/* CORE MODAL WINDOW */
.body--modal--open { overflow: hidden; height: 100vh; }
.body--modal--open ._hj_feedback_container { display: none !important;   }

.modal__outer { display: none; position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; z-index: 200; padding-top: 32px; padding-bottom: 32px; min-height: 100%; max-height: 100%; }
.modal__bg { opacity: 0.95; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #292929; z-index: 190; }
.modal__inner { position: relative; margin: 0px auto !important; text-align: center; width: 75%; max-width: 936px; height: 100%;   z-index: 210; display: flex; flex-direction: column; justify-content: center; align-content: center;  }
.modal__close { text-decoration: none; margin: 16px; position: absolute; top: -32px; right: 0px; z-index: 300; width: 26px; padding: 4px; cursor: pointer;  border: 2px solid #ec1c99; border-radius: 4px;  }
.modal_close_svg { position: relative; display: block; width: 14px; height: 14px;  fill: #ec1c99; z-index: 300;   }
.modal__close__circle  { width: 36px; position: absolute; left: -10px; top: -10px; z-index: 201; opacity: 0; transition: opacity 0s; }
.modal__close:hover .modal__close__circle { opacity: 1;  }
.modal__close__circle circle { fill: rgba(0,0,0,0.1);  }
.modal__close:hover {  border: 2px solid #ec652c;  }
.modal__close:hover .modal_close_svg {  fill: #ec652c; }


.modal__outer a, .modal__outer a:visited {  font-family: 'VAGRoundedNext-SemiBold'; color: #ec1c99; }
.modal__outer a:hover { color: #ec652c;  }


.modal__button {  
  position: relative; display: inline-block; font-family: 'VAGRoundedNext-SemiBold'; color: #ec1c99; font-size: 28px; line-height: 28px; 
  text-align: center; vertical-align: top; text-transform: uppercase; z-index: 101;  
border: 1px solid #ec1c99; cursor: pointer; padding: 5px 24px;  border-radius: 19px; margin: 8px 16px 8px; background-color: #FFFFFF;  
 }
 
.modal__button--log-in { width: calc(50% - 32px); margin-top: 8px;  padding: 8px 24px; border-radius: 10px;  min-width: 370px; }
.modal__button--sign-up { width: calc(50% - 32px); margin-top: 8px;  padding: 8px 24px; border-radius: 10px;  min-width: 370px; }
.modal__button--forgot {  width: 200px; display: none; } 
.modal__button--forgot.show {  display: inline-block;  }
 


.modal__close__button {  
 position: relative; display: inline-block; font-family: 'VAGRoundedNext-SemiBold'; color: #ec1c99; font-size: 28px; line-height: 28px; 
 text-align: center; vertical-align: top; text-transform: uppercase; z-index: 101;  
border: 1px solid #ec1c99; cursor: pointer; padding: 5px 24px;  border-radius: 19px; margin: 8px 16px 16px; background-color: transparent;  margin-top: 32px; 
}

.modal__close__button:hover { border: 1px solid #ec652c;  color: #ec652c;   }


 
.modal__button a { color: inherit;   }
.modal__button:hover { border: 1px solid #ec652c;  color: #ec652c;  }

.modal__content__outer {  position: relative; width: 100%; text-align: center; width: 100%;  max-height: 100%;  display: block;  }
 
.modal__content { position: relative; display: block; padding: 0px 32px; max-height: 100%; font-family: 'VAGRoundedNext-Light'; color: #FFFFFF; font-size: 24px; line-height: 30px;   }
.modal__content__inner {  position: relative; display: block; max-height: calc(100vh - 80px); }

.modal__content .content__section--report {  color: #2f2725; padding: 0px; display: block; overflow: auto; height: calc(100% - 96px); padding-right: 32px;   }
.modal__content .content__block__title__icon path { fill: #2f2725; stroke: #2f2725; }
.modal__content .content__block__title { color: #2f2725; font-size: 48px; line-height: 48px; font-weight: bold; padding-bottom: 24px;  }

.modal__title { position: relative; display: block; font-size: 40px; line-height: 40px; color: #FFFFFF; padding-bottom: 16px;  font-family: 'VAGRoundedNext-SemiBold';  text-transform: uppercase; letter-spacing: 6px;  }
.modal__text { position: relative; display: block; font-size: 18px; line-height: 24px; color: #FFFFFF;  width: 75%; margin: 0px auto; padding-bottom: 10px;    }

.modal__form { position: relative; display: block; border: 0px solid white;  font-size: 0px; line-height: 0px;  }
.modal__form--review { padding-bottom: 40px;   }


.modal__input  { position: relative; display: inline-block; width: 50%; padding: 0px 16px 8px; vertical-align: top;  }
.modal__input--full-width { width: 100%;    }
.modal__input input { position: relative;  display: block; width: 100%; font-family: 'VAGRoundedNext-Light'; font-size: 24px; line-height: 24px; padding: 12px 16px; background-color: #FFFFFF; color: #ec1c99; 
 border: 0px;  }

.modal__input input.invalid { color: red;  background-color: #f9c6c0;  }

#modal__login__form .modal__input { margin: 0px 25%;   }
#modal__login__form .modal__input input { text-align: center; }

.modal_minor { height: 0px; overflow: hidden; margin: 0px 0px; border: 0px; padding: 0px 0px;   }

input:placeholder-shown { color: #ec1c99; line-height: 24px; }

input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #ec1c99; }
input::-moz-placeholder { /* Firefox 19+ */ color: #ec1c99;  opacity: 1;  }
input:focus::-moz-placeholder { /* Firefox 19+ */ color: #ec1c99;  opacity: 0.2; }
input:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */  color: #ec1c99;  opacity: 0.2; }
input:focus::-ms-input-placeholder { /* Firefox 19+ */ color: #ec1c99;  opacity: 0.2; }
input:-ms-input-placeholder { /* IE 10+ */ color: #ec1c99;  }
input:-moz-placeholder { /* Firefox 18- */ color: #ec1c99; }

input:focus::placeholder-shown { color: #2f2725;  }

input.invalid::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: rgb(255, 0, 0); }
input.invalid::-moz-placeholder { /* Firefox 19+ */ color: rgb(255, 0, 0);  opacity: 1;  }
input.invalid:focus::-moz-placeholder { /* Firefox 19+ */ color: rgb(255, 0, 0);  opacity: 0.2; }
input.invalid:-ms-input-placeholder { /* IE 10+ */ color: rgb(255, 0, 0);  }
input.invalid:-moz-placeholder { /* Firefox 18- */ color: rgb(255, 0, 0); }


.modal__input--receive_news { width: 100%;   text-align: left;  }
.modal__input--not_a_teacher { width: 100%;   text-align: left;  }
.modal__input--ts_and_cs { width: 100%;   text-align: left;  }

.signup__form__input__label { position: relative; display: inline-block; width: auto; color: #FFFFFF; font-size: 18px; line-height: 30px; font-family: 'VAGRoundedNext-Light'; text-align: left;  }
.invalid .signup__form__input__label { color: rgb(255, 0, 0);   }

.signup__form__input__label a { color: #ec1c99; }
.signup__form__input__label a:hover { color: #ec652c; }


.modal__input input[type="radio"] + label::after,
.modal__input input[type="checkbox"] + label::after { 
  content: " "; line-height: 21px; font-size: 18px; background-size: 20px; width: 20px;  height: 21px;  background-position: 50% 50%; 
background-repeat: no-repeat;  opacity: 0.6;  position: relative;  display: inline-block; margin-left: 16px; vertical-align: top; margin-top: 5px; }

.modal__input input[type="radio"] + label::after {  background-image: url('../img/radio_circle.svg'); }
.modal__input input[type="checkbox"] + label::after {   background-image: url('../img/check_box_empty_new.svg'); }

.modal__input input[type="radio"] + label:hover::after, .modal__input input[type="checkbox"] + label:hover::after { opacity: 1; }

.modal__input input[type="radio"], .modal__input input[type="checkbox"] { display: none;   }

.modal__input input[type="radio"]:checked + label::after { background-image: url('../img/radio_circle_blue.svg'); opacity: 1; }
.modal__input input[type="checkbox"]:checked + label::after { background-image: url('../img/checkbox_square_blue.svg'); opacity: 1; }

.mandatory_text { position: relative; width: 100%; text-align: center; font-family: 'VAGRoundedNext-Light'; font-style: italic; font-size: 16px; line-height: 21px; color: #FFFFFF;  height: 42px;  }
.mandatory_text.invalid { color: red; }
.modal__form__error { color: red; font-size: 18px; line-height: 21px; height: 42px;   }
.modal__sign-in__error.invalid {  color: red; font-size: 18px; line-height: 21px;  } 

.modal__button--forgot { width: 200px; display: none; }


/* FORGOTTEN PASSWORD */
.modal__login__forgotten__text { display: none;  font-size: 18px; line-height: 21px; margin-bottom: 8px;   }
.modal__login__forgotten { color: #ec1c99; font-size: 18px; line-height: 21px;  cursor: pointer;  }
.modal__login__forgotten:hover { color: #ec652c; }

.modal__login__remembered { color: #ec1c99; font-size: 18px; line-height: 21px;  cursor: pointer; display: none;   }
.modal__login__remembered:hover { color: #ec652c; }

.modal__login__resent { color: #ec1c99; font-size: 18px; line-height: 21px;  cursor: pointer; display: none;  }


/* REVIEW FORM */
.modal__outer--review .modal__content__outer { padding-top: 40px; padding-bottom: 40px;   }
.modal__outer--review .modal__content { padding-top: 0px; padding-bottom: 0px;    }
.modal__outer--review .modal__close { right: -24px; top: -12px;   }
.review_form_subtitle { position: relative; display: block; width: 100%; text-align: center;   font-family: 'VAGRoundedNext-Regular'; font-size: 21px; line-height: 26px; padding-bottom: 0px; }

.modal__form input[type="checkbox"] + label::after { 
  content: " "; line-height: 21px; font-size: 21px; background-size: 20px; width: 20px;  height: 30px;  background-position: 50% 50%; 
background-repeat: no-repeat;  opacity: 0.6;  display: inline-block; margin: 0px 10px; vertical-align: top; }
.modal__form input[type="checkbox"] + label::after {   background-image: url('../img/checkbox_square_empty_pink.svg'); }
.modal__form input[type="checkbox"]:checked + label::after { background-image: url('../img/checkbox_square_filled_pink.svg'); opacity: 1; }
 
.form__field.form__field--stars { text-align: center;  padding: 0px 0px 16px;  }
.form_field_stars { display: inline-block; position: relative; padding: 0px 16px;  font-size: 0px; line-height: 0px;   } 
.form__field__input__outer .resource_star {  width: 36px; margin: 0px 4px; cursor: pointer; fill: #FFFFFF; opacity: 0.2;  }
.form__field__input__outer--small .resource_star { width: 30px; } 
.modal__form .resource_subject_icon svg { height: 32px;  fill: #50B6E8;  }
.modal__form .resource_aspect_icon svg { height: 32px;   }
.modal__form .resource_subjects_outer { padding: 0px 0px;     }
.modal__form .resource_subjects_subtitle { color: #FFFFFF; border-bottom: 1px solid #FFFFFF;   }
.resource_subjects_major, .resource_subjects_minor { padding-top: 6px; }
.modal__form .resource_aspects_outer { padding: 0px 0px; text-align: center;     }
.modal__form .resource_aspects_inner { border-top: 1px solid #FFFFFF; padding-top: 8px;    }
.modal__form .resource_aspects_subtitle { color: #FFFFFF; border-bottom: 1px solid #FFFFFF;   }
.modal__form--review .form__field__input--textarea-editor { border: 1px solid #ec1c99; background-color: transparent; color: #FFFFFF;    }
.modal__form--review .form__field__input--textarea-editor-inline { border: 1px solid #ec1c99; background-color: transparent; color: #FFFFFF; min-height: 150px; text-align: center !important; outline: 0;    }

.modal__form--review .tox-edit-area__iframe {  background-color: transparent !important; color: #FFFFFF !important; text-align: center;   }
.modal__form--review .form__field__title { text-align: center;    }
.modal__form--review .form__field__input__outer--checkbox { text-align: center;    }
.modal__form--review .form__field--cols-4 { padding-bottom: 16px;   }

.review_form_thank_you { position: relative; display: none; font-size: 18px; line-height: 30px; color: #FFFFFF;  width: 75%; margin: 0px auto; padding-bottom: 16px;    }

.modal__form--review .review_form_error {  position: relative; display: none; font-size: 18px; line-height: 30px; color: red; text-align: center;  width: 75%; margin: 0px auto; padding-bottom: 16px;   }
.invalid  .resource_star  { stroke: red; stroke-width: 1px; opacity: 1; fill: #5B5B5B; }


/* IMPACT FORM */

.modal__form--impact .form__field--cols-2 { padding-bottom: 16px;  width: 50%;   }
.impact_form_thank_you { position: relative; display: none; font-size: 18px; line-height: 30px; color: #FFFFFF;  width: 75%; margin: 0px auto; padding-bottom: 16px;    }



.modal_input_label { position: relative; display: block; text-align: left; padding-bottom: 0px; font-size: 24px; line-height: 30px;  font-family: 'VAGRoundedNext-SemiBold'; color: #FFFFFF;  }
.modal_input_notes {  position: relative; display: block; width: 100%; color: #FFFFFF; font-size: 14px; line-height: 21px; font-family: 'VAGRoundedNext-Light'; text-align: left;   }


.modal__input_inner { position: relative; display: block; width: 100%;   }

.show_password { position: absolute; display: block; width: 36px; top: 13px; right: 12px; cursor: pointer; z-index: 220;  }
.hide_password { position: absolute; display: block; width: 36px; display: none; top: 13px; right: 12px; cursor: pointer; z-index: 220;  }
.show_password svg, .hide_password svg { position: relative; display: block; width: 100%; fill: #292929; }


.modal_or_divider_outer { position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: nowrap; border: 0px solid red; margin-top: 4px;   }
.modal_or_divider_line { position: relative; display: block; border-bottom: 1px solid white; flex-grow: 1;  }
.modal_or_divider_or { position: relative; display: block; padding: 0px 16px;  font-size: 21px; line-height: 21px;  font-family: 'VAGRoundedNext-SemiBold'; color: #FFFFFF; text-transform: uppercase;   flex-grow: 0;  flex-shrink: 0;      }

.social_login_buttons_outer { position: relative; display: block; width: 100%; padding: 16px;   }

.continue_with_facebook { position: relative; display: inline-block; font-family: 'VAGRoundedNext-SemiBold'; color: #ec1c99;
  font-size: 28px; line-height: 28px; text-align: center; vertical-align: top; text-transform: uppercase; z-index: 101;
  border: 1px solid #ec1c99; cursor: pointer; padding: 8px 24px; border-radius: 10px; margin: 8px 16px 16px;  background-color: #FFFFFF;
} 

.fb-login-button { position: relative; display: inline-block !important; width: 300px;  margin: 0px 16px 16px;  vertical-align: top; }


.continue_with_facebook svg { position: relative; display: inline-block; width: 28px; vertical-align: top; margin-left: 8px; fill: #4267B2;   }
.continue_with_google {  position: relative; display: inline-block !important; width: 300px; margin: 0px 16px 8px; vertical-align: top;  }

/*.real_google_buttton_hidden { display: none;  } */


@media only screen and (max-width: 500px) {
  .modal__inner {  width: 100%;   }
  .modal__outer { padding-top: 8px; padding-bottom: 8px;    }
  .modal__close { margin: 0px 16px; width: 20px; top: 0px; right: -4px;  }
  .modal_close_svg { width: 8px; height: 8px;   }
  .modal__content__outer {  border: 0px solid red;   }
   .modal__content__inner {  max-height: calc(100vh - 80px);  } 
  
  .modal__content { padding: 16px 16px; font-size: 14px; line-height: 21px;   }
  .modal__text {  font-size: 14px; line-height: 21px; width: 100%;   }
  .modal__title { font-size: 24px;  line-height: 24px;   }
  .modal__input { width: 100%;    }
  .modal__input input { font-size: 14px; line-height: 14px; padding: 8px 8px; margin-bottom: 0px;   }
  #modal__login__form .modal__input { margin: 0px 0px;   }
  
  .modal__button { font-size: 16px; line-height: 16px;  padding: 5px 6px;  border-radius: 14px;  }
  .modal__login__forgotten {   font-size: 14px; line-height: 16px;  }
  .modal__login__forgotten__text {  font-size: 14px; line-height: 16px;   }
  .modal__login__remembered { font-size: 14px; line-height: 16px;  }
  
  
  .signup__form__input__label { font-size: 14px; line-height: 18px;  padding-right: 32px; width: 100%;  }
  .modal__input input[type="radio"] + label::after, .modal__input input[type="checkbox"] + label::after {  background-size: 16px; width: 16px; margin-top: 0px; height: 18px;  }
  .modal__button--sign-up { width: 120px; display: block; margin: 8px auto !important; padding: 8px 6px;  border-radius: 10px;    }
  
  .modal__button--log-in { margin-top: 8px;  padding: 8px 24px; border-radius: 10px;  min-width: 288px; }
  .modal__button--sign-up {  margin-top: 8px;  padding: 8px 24px; border-radius: 10px;  min-width: 288px; }
  
  .mandatory_text { font-size: 14px; line-height: 16px; }
  .modal__outer--review .modal__close { right: -12px; top: 0px;   }
  
  .show_password {  width: 24px; top: 7px; right: 4px;  }
  .hide_password {  width: 24px;  top: 7px; right: 4px;  }
  
  .continue_with_facebook { font-size: 16px; line-height: 16px;  }
  .continue_with_facebook svg { width: 16px;   }
  
  .modal_or_divider_or {  font-size: 18px; line-height: 21px;   }
  
  .modal__text .news_body.slightly_smaller {  font-size: 14px !important; line-height: 16px !important; }
  .modal_input_notes { font-size: 10px; line-height: 15px; display: none;  }
  
  .mandatory_text { height: auto;   }
  
  .continue_with_google {  display: inline-block !important; margin: 0px 0px 8px;  }
   .fb-login-button {  display: inline-block !important;  margin: 0px 0px 8px;  }
}


@media only screen and (min-width: 501px) and (max-width: 580px) { /* BLUE */
  .modal__inner {  width: 100%;   }
  .modal__close { margin: 0px 16px; width: 20px; top: -8px; right: -4px;   }
  .modal_close_svg { width: 8px; height: 8px;   }
  .modal__content__inner {  max-height: calc(100vh - 80px);  } 

  .modal__content { padding: 16px 16px; font-size: 14px; line-height: 21px;   }
  .modal__text {  font-size: 14px; line-height: 21px; width: 100%;   }
  .modal__title { font-size: 24px;  line-height: 24px;   }
  .modal__input { padding: 8px 8px;   }
/*   .modal__input { width: 100%;  max-width: 320px;   } */
  .modal__input input { font-size: 14px; line-height: 14px; padding: 8px 8px; margin-bottom: 0px;   }
  #modal__login__form .modal__input { margin: 0px 0px;   }
  
  .modal__button { font-size: 16px; line-height: 16px;  padding: 5px 6px;  border-radius: 14px;  }
  .modal__login__forgotten {   font-size: 14px; line-height: 16px;  }
  .modal__login__forgotten__text {  font-size: 14px; line-height: 16px;   }
  .modal__login__remembered { font-size: 14px; line-height: 16px;  }
  
  .signup__form__input__label { font-size: 14px; line-height: 16px;  padding-right: 32px; width: 100%;   }

  .modal__input input[type="radio"] + label::after, .modal__input input[type="checkbox"] + label::after {  background-size: 16px; width: 16px; margin-top: -1px; }
  .modal__button--sign-up { width: 120px; display: block; margin: 8px auto !important;   }
  .mandatory_text { font-size: 14px; line-height: 16px; }
  .modal__outer--review .modal__close { right: -12px; top: 0px;   }
  
  
  .show_password {  width: 24px; top: 7px; right: 4px;  }
  .hide_password {  width: 24px;  top: 7px; right: 4px;  }
  .continue_with_facebook { font-size: 16px; line-height: 16px;  }
  .continue_with_facebook svg { width: 16px;   }
  
  .modal_or_divider_or {  font-size: 18px; line-height: 21px;   }
  
  .modal__button--log-in { margin-top: 8px;  padding: 8px 24px; border-radius: 10px;  min-width: 288px; }
  .modal__button--sign-up {  margin-top: 8px;  padding: 8px 24px; border-radius: 10px;  min-width: 288px; }
  
  .modal__text .news_body.slightly_smaller {  font-size: 14px !important; line-height: 16px !important; }
  .modal_input_notes { font-size: 10px; line-height: 15px;  }
  
  

/*  .modal__form .modal__input { width: 50%; padding: 4px 8px; } */
  
  .mandatory_text { height: auto;   }
  
}


@media only screen and (min-width: 581px) and (max-width: 767px) { /* RED */
  
  .modal__inner {  width: 90%;   }
  .modal__close { margin: 0px 16px; width: 20px;  top: -8px; right: -4px;  }
    .modal_close_svg { width: 8px; height: 8px;   }

  .modal__content { padding: 16px 16px; font-size: 16px; line-height: 24px;   }
  .modal__text {  font-size: 16px; line-height: 24px; width: 100%;   }
  .modal__title { font-size: 28px;  line-height: 28px;   }
    .modal__input { padding: 8px 8px;   }
/*  .modal__input { width: 100%;  max-width: 320px;    } */
  .modal__input input { font-size: 16px; line-height: 16px; padding: 8px 8px; margin-bottom: 0px;   }
  #modal__login__form .modal__input { margin: 0px 0px;   }
  
  .modal__button { font-size: 18px; line-height: 18px;  padding: 6px 6px;  border-radius: 16px;  }
  .modal__login__forgotten {   font-size: 16px; line-height: 18px;  }
  .modal__login__forgotten__text {  font-size: 16px; line-height: 18px;   }
  .modal__login__remembered { font-size: 16px; line-height: 18px;  }
  
  .signup__form__input__label { font-size: 14px; line-height: 18px;  padding-right: 32px; width: 100%;   }
  .modal__input input[type="radio"] + label::after, .modal__input input[type="checkbox"] + label::after {  background-size: 16px; width: 16px; margin-top: 0px; height: 18px;  }
  .modal__button--sign-up { width: 120px; display: block; margin: 8px auto !important;   }
  
  .modal__outer--review .modal__close { right: -12px; top: 0px;   }
  
  
  .show_password {  width: 24px; top: 9px; right: 4px;  }
  .hide_password {  width: 24px;  top: 9px; right: 4px;  }
  .continue_with_facebook { font-size: 16px; line-height: 16px;  }
  .continue_with_facebook svg { width: 16px;   }
  
  .modal_or_divider_or {  font-size: 18px; line-height: 21px;   }
  
  .modal__button--log-in { margin-top: 8px;  padding: 8px 24px; border-radius: 10px;  min-width: 288px; }
  .modal__button--sign-up {  margin-top: 8px;  padding: 8px 24px; border-radius: 10px;  min-width: 288px; }
  
  .modal__text .news_body.slightly_smaller {  font-size: 14px !important; line-height: 16px !important; }
  .modal_input_notes { font-size: 10px; line-height: 15px;  }
  
  /*  .modal__form .modal__input { width: 50%; padding: 4px 8px; } */
  
}


@media only screen and (min-width:  768px) and (max-width: 840px)   { /* PINK */
  
  .modal__inner {  width: 100%;   }
/*  .modal__input { width: 100%;  max-width: 400px;  } */
  .modal__input input {  font-size: 16px; line-height: 16px; padding: 8px 8px;  margin-bottom: 0px;  }
  #modal__login__form .modal__input { margin: 0px auto !important;   }

  .signup__form__input__label { font-size: 16px; line-height: 18px;  padding-right: 32px; width: 100%;   }
  .modal__input input[type="radio"] + label::after, .modal__input input[type="checkbox"] + label::after {  background-size: 18px; width: 18px; margin-top: 0px;  }

  .show_password {  width: 24px; top: 9px; right: 4px;  }
  .hide_password {  width: 24px;  top: 9px; right: 4px;  }



  .modal__button--sign-up { width: 240px; display: block; margin: 16px auto !important;   }
  .modal__outer--review .modal__close { right: -12px; top: -12px;   }
  
/*    .modal__form .modal__input { width: 50%; padding: 4px 8px; } */
  
}


@media only screen  and (min-width: 841px) and (max-width: 1000px)  { /* YELLOW */
  
  .modal__inner {  width: 80%;   }
/*  .modal__input { width: 100%;  max-width: 400px;  } */
.modal__input--full-width { width: 100%; /* max-width: 400px;  */  } 
  .modal__input input {  font-size: 21px; line-height: 21px; }
  #modal__login__form .modal__input { margin: 0px auto !important;   }
  
  .signup__form__input__label { font-size: 18px; line-height: 21px;   padding-right: 32px; width: 100%;   }
  .modal__button--sign-up { width: 240px; display: block; margin: 16px auto !important;   }
  .modal__input input[type="radio"] + label::after, .modal__input input[type="checkbox"] + label::after { background-size: 18px; width: 18px; margin-top: 0px; height: 21px;  }
  
    .modal__outer--review .modal__close { right: -12px; top: -12px;   }
    
  /*    .modal__form .modal__input { width: 50%; padding: 4px 8px; } */
  
}

@media only screen  and (min-width: 1001px) and (max-width: 1264px)  { /* BLACK */
  
  .modal__inner {  width: 80%;   }
/*  .modal__input { width: 100%;  max-width: 400px;  } */
/*  .modal__input--full-width { width: 100%; max-width: 400px;    }  */
  
  .modal__input--receive_news { width: 100%; max-width: 800px;   }
  .modal__input--not_a_teacher { width: 100%;  max-width: 800px;    }
  .modal__input--ts_and_cs { width: 100%; max-width: 800px;   }
  
  
  .modal__input input {  font-size: 21px; line-height: 21px; }
  #modal__login__form .modal__input { margin: 0px auto !important;   }
  
  .signup__form__input__label { font-size: 18px; line-height: 21px;   padding-right: 32px; width: 100%;   }
  .modal__button--sign-up { width: 240px; display: block; margin: 16px auto !important;   }
  .modal__input input[type="radio"] + label::after, .modal__input input[type="checkbox"] + label::after { background-size: 18px; width: 18px; margin-top: 0px; height: 21px;  }
  
  /*  .modal__form .modal__input { width: 50%; padding: 4px 8px; } */
}


@media only screen  and (max-height: 500px)  { 
    .modal__inner { height: 100%; width: 100%;   }
.modal__outer { padding-top: 8px; padding-bottom: 8px;   }



.modal__form .modal__input { width: 50%; padding: 4px 8px; }
.modal__text { padding-bottom: 4px;   }
.modal__button--log-in { margin-top: 4px; margin-bottom: 8px;    }
.modal__button--sign-up {  margin-top: 4px; margin-bottom: 8px;   }
.modal__text .news_body { font-size: 14px; line-height: 18px;   }
.modal__title { font-size: 18px; line-height: 18px; padding-bottom: 4px;   }
}


@media only screen  and (max-height: 700px)  { 
    .modal__inner { height: 100%; width: 100%;   }
.modal__outer { padding-top: 8px; padding-bottom: 8px;   }

.mandatory_text { height: auto;   }

.modal__form .modal__input { width: 50%; padding: 4px 8px; }
.modal__form .modal__input--full-width { width: 100%;  max-width: 640px;   }
.modal__input input { padding: 6px 16px;  }
.modal__text { padding-bottom: 4px;   }
.modal__button--log-in { margin-top: 4px; margin-bottom: 8px;    }
.modal__text .news_body { font-size: 18px; line-height: 24px;   }
.modal__title { font-size: 28px; line-height: 28px; padding-bottom: 4px;   }

.modal__form .modal__input--receive_news  { width: 100%; text-align: left; max-width: 100%;  }
.modal__form .modal__input--ts_and_cs { width: 100%; text-align: left;   max-width: 100%;  }
.modal__form .modal__input--receive_news  { width: 100%; text-align: left;   max-width: 100%;  }
.modal__form .modal__input--not_a_teacher {   width: 100%; text-align: left;  max-width: 100%;  }

.show_password {  width: 24px; top: 7px; right: 4px;  }
.hide_password {  width: 24px;  top: 7px; right: 4px;  }

}