@charset "UTF-8";
:root {
--font-primary: #000000;
--font-color: #ffffff;
--font-gray: #ededed;
--font-red: #ff6f6f;
}

* {box-sizing: border-box; scroll-behavior: smooth;}

/*========================------ CUSTOM CSS  ------========================*/
html {
  min-width: 320px;
  scroll-behavior: smooth;
}
body {
  font-family: 'Montserrat', Arial, sans-serif;
  background-color: #ffffff;
  min-width: 320px;
  color: var(--font-primary);
}
p {
  margin: 0 0 20px 0;
  font-family: 'Montserrat', Arial, sans-serif;
  color: var(--font-primary);
}
h1, h2, h3 {color:var(--font-color); font-weight: 600; margin-bottom: 20px;}
h4, h5, h6 {color:var(--font-color); font-weight: 600; margin-bottom: 16px;}

/*------ MAIN ---------*/
.main-container { margin: 0 auto; padding: 3rem 0 0 0; max-width: 960px; /*background-color: #ff6f6f;*/ }

/*--- Section Main ---*/
.section {margin: 0;}

.section-unsub { margin: 0 0 1rem 0; padding: 0; background-color: #ffffff; overflow: hidden; }
/*--- end: Section Main ---*/


/*--- Unsub section ---*/
.section-top { margin: 0 0 3rem 0; padding: 1rem 0; min-height: 450px; }

.section-top-panel { margin: 0 0 1rem 0; padding: 16px 30px; text-align: left;}
.section-top-title { display: inline-block; position: relative; margin: 0; padding: 0 12px; font-family: 'Montserrat', Arial, sans-serif; font-size:30px; font-weight: 600; line-height: 1.2; color: #000000; text-align: left; }

/*---------------*/
.form-container { display: block; margin: 0 auto 2rem auto; padding: 50px 30px; border-radius: 20px; 
  background: url('../img/form/unsubscribe_bg.png');
  background-repeat: no-repeat;
  background-position: right -5% center;
  background-size: 400px;
  background-color: #ededed;
}

.form-course {width: 60%; margin: 0; padding: 0;}

.form-course p { margin: 0 0 24px 0; padding: 0; font-family: 'Montserrat', Arial, sans-serif; font-size:18px; font-weight: 400; line-height: 1.2; color: var(--font-primary); text-align: left; }
.form-course p a { margin: 0; padding: 0; font-family: 'Montserrat', Arial, sans-serif; font-size:18px; font-weight: 400; line-height: 1.2; color: var(--font-primary); text-align: left; text-decoration: underline; text-decoration-style: dotted; }


@media only screen and (max-width: 768px) {
  .section-top-title { padding: 12px 0; font-size: 26px; }
  /*----------------*/
  .form-container { padding: 40px 20px;
    background-position: right -5% center;
    background-size: 300px;
    background-color: #ededed;
  }

  .form-course {width: 60%;}
}
@media only screen and (max-width: 576px) {
  .section-top-panel {padding: 16px 20px;}
  .section-top { margin: 0 0 1rem 0;}
  .course-top-info { width: 90%; }
  /*-------------*/
  .form-container { padding: 30px 10px;
    background-position: right -5% center;
    background-size: 200px;
    background-color: #ededed;
  }
  .form-course {width: 80%;}
  .form-course p { margin: 0 0 16px 0; font-size:16px; }
  .form-course p a { font-size:16px;}
}
@media only screen and (max-width: 400px) {
  .section-top-panel { margin: 20px 0 10px 0; }
  .section-top-title { padding: 12px 0; font-size: 22px; }
  /*----------------*/
  .form-course {width: 100%;}
}
/*--- end: Unsub section ---*/


/*--- Form Unsub ----*/
.form-line {padding: 0 0.75rem; font-size: 24px; font-weight: 400; color: #000000;}

.form-control {padding: 1rem 0.75rem; font-size: 24px; line-height: 1.2; font-weight: 400; color: #000000; border-radius: 16px; background-color: #ffffff; }
.form-control::placeholder { color: #000000;}
.form-control:focus { box-shadow: none; background-color: #ffffff; }

.form-check-input {background-color: #1e1f24; border-color: #ffffff;}
.form-check-input:focus { box-shadow: none; border-color: #ffffff;}
.form-check-input:checked { background-color: #1e1f24; border-color: var(--font-red); }
.form-check-input:checked[type=checkbox] { background: url('../img/form/checkbox.svg'); }
.form-check label { font-size: 10px; }

/*--- form btn ----*/
.form-btn-container {position: relative; margin: 0; padding: 0; text-align: center;}

.form-btn,
.form-btn:link,
.form-btn:visited,
.form-btn:hover,
.form-btn:active {
  display: inline-block;
  margin: 0;
  padding: 15px 36px;
  width: 100%;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  color:var(--font-color);
  text-align: center;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  text-decoration: none;
  border: 2px solid rgb(172, 215, 255);
  background-color: rgb(68, 115, 197);
  box-shadow: 0px 10px 10.56px 0.44px rgba(0, 0, 0, 0.15),inset 0px 0px 21px 0px rgba(255, 255, 255, 0.45);
}
.form-btn:disabled { opacity: 0.8; }

@media only screen and (max-width: 768px) {
  .form-control {padding: 0.75rem 0.75rem; font-size: 18px;}
  .form-btn, .form-btn:link, .form-btn:visited, .form-btn:hover, .form-btn:active { padding: 14px 18px; font-size: 18px; }
}
@media only screen and (max-width: 576px) {
  .form-control { font-size: 16px; }
  .form-btn, .form-btn:link, .form-btn:visited, .form-btn:hover, .form-btn:active { padding: 12px 16px; font-size: 16px; }
}
/*--- end: Form Unsub ----*/


/*----- Footer ----*/
.footer { padding: 3rem 10px 1rem 10px; max-width: 960px; }

.footer-line {margin: 0 0 10px 0; padding: 0; color: var(--font-primary); font-size: 16px; text-align: left;}

.footer-text { display: block; margin: 0 0 10px 0; padding: 0; font-family: 'Montserrat', Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.2; color:var(--font-primary); text-align: center; text-transform: uppercase; }

.footer-image {margin: 0 0 16px 0; padding: 0; text-align: center;}
.footer-image img {display: inline-block; margin: 0 5px 5px 5px; padding: 0; max-width: 100%;}

/*---- footer menu ----*/
.footer-menu {margin: 0; padding: 0;}
.footer-menu-item:link,
.footer-menu-item:visited,
.footer-menu-item:active {
  display: block;
  margin: 0 0 5px 0;
  padding: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  color:var(--font-primary);
  text-align: left;
  text-decoration: none;
}
.footer-menu-item:hover { text-decoration: underline; }

@media only screen and (max-width: 768px) {
  .footer {padding: 1rem 10px;}
  .footer-text { font-size: 16px; text-align: left; }
  .footer-image {margin: 0 0 16px 0; text-align: left;}
}
@media only screen and (max-width: 400px) {
  .footer {padding: 1rem 10px;}
  .footer-text {font-size: 14px;}

  .footer-menu-item:link,
  .footer-menu-item:visited,
  .footer-menu-item:active { font-size: 14px; }
}
/*----- end: Footer ----*/

/*------- end: Custom css ----*/