@import url("https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
.scrollable_container2 {
  height: 80vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  border: 1px solid lightblue; }

.snippet_pic {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background-color: #E9F9FE;
  border-radius: 5px;
  width: 95%;
  height: 500px;
  margin: 40px 0; }

.snippet_img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  height: 75%;
  max-width: 85%;
  max-height: 75%;
  border-radius: 3px; }

.og_vid {
  height: auto;
  width: 70%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 5px;
  padding: 20px 20px; }

.slogan {
  text-align: center;
  width: 700px;
  transform: translateX(-50%);
  color: lightgrey;
  font-family: 'Libre Franklin', sans-serif;
  font-size: 30px;
  border-radius: 5px;
  position: relative;
  left: 50%;
  transform: translate(-50%, -50%); }

.slogan span {
  color: black; }

.new_watch_vid_btn {
  transition: box-shadow .2s;
  border: 1px solid grey;
  font-weight: 400;
  color: grey;
  cursor: pointer;
  white-space: nowrap;
  background-color: white;
  z-index: 9999999;
  padding: 15px 20px;
  font-size: 16px;
  font-family: 'Libre Franklin', sans-serif;
  position: relative;
  text-align: center;
  width: 130px;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 2px; }

.abt_page_container {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 20px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  width: 1000px;
  height: 548px; }

.abt_page_container iframe {
  width: 100%;
  position: absolute;
  height: 100%; }

.grey-over-pic {
  width: 100%;
  position: absolute;
  height: 100%;
  background-color: white;
  object-fit: cover;
  z-index: 9999;
  overflow: visible; }

.bigtxt {
  position: relative;
  text-align: center;
  font-size: 30px;
  font-weight: 300;
  font-family: 'Libre Franklin', sans-serif;
  overflow: visible;
  white-space: nowrap;
  margin-bottom: 20px; }

.abt_page_container span img {
  width: 100%;
  position: absolute;
  height: 100%;
  background-color: grey;
  object-fit: cover; }

.abt_page_container span h4 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
  color: white;
  padding-left: 25px;
  font-weight: 300;
  font-size: 17px;
  font-family: 'Libre Franklin', sans-serif; }

.abt_page_container span svg {
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-48%, -50%);
  cursor: pointer;
  z-index: 100000; }

.fake-play-play {
  color: white;
  z-index: 995;
  opacity: .9;
  padding-left: 3px; }

.animate_index_clickme a {
  font-size: 14px;
  color: #6d89ad;
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 200;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0); }

.animate_index_clickme a span {
  font-weight: 500; }

.animate_index_clickme {
  width: 400px;
  position: absolute;
  top: 30%;
  left: calc(50% - 400px); }

.submit_sign_up_p {
  width: 62%;
  height: 40px;
  border-radius: 5px;
  margin-left: 6px;
  position: relative;
  cursor: pointer; }

.submit_login_p {
  width: 62%;
  height: 40px;
  border-radius: 5px;
  margin-left: 6px;
  position: relative;
  cursor: pointer; }

.super_small_txt p span a {
  color: #55AEF4;
  text-decoration: none; }

.top_header_T_login {
  /* font-size: 25px; */
  /* position: absolute;
    font-family: 'Libre Franklin', sans-serif; */
  font-weight: 700; }

.top_header_o_login {
  /* position: absolute;
    left: 90px; */
  /* font-size: 25px; */
  /* font-family: 'Libre Franklin', sans-serif; */
  font-weight: 200; }

.ttitle_on_home_screen p {
  text-decoration: none;
  color: black;
  width: auto; }

.ttitle_on_home_screen {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%); }

.under_logo_txt {
  text-align: center;
  font-size: 14px;
  font-style: italic; }

.ttitle {
  text-decoration: none;
  color: black;
  position: absolute;
  /* top: -11px; */
  /* padding-top: -10px; */
  /* font-size: 25px; */
  /* transform: translate(0, -50%); */ }

.ttitle p {
  font-size: 25px;
  font-family: 'Libre Franklin', sans-serif;
  position: absolute;
  padding-top: 2px;
  margin-top: 15px; }

.home_base {
  font-size: 15px;
  text-decoration: none;
  color: #565656;
  padding: 6px 8px;
  border-radius: 4px; }

.home_base:hover {
  background-color: #f0f0f0; }

/* .top_header_container div a p{
    font-size: 20px;
    border-radius: 4px;
    padding: 6px 8px;
} */
#login_page_box1 {
  font-family: 'Libre Franklin', sans-serif;
  width: 400px;
  height: 650px;
  border-radius: 10px;
  font-size: 14px;
  background-color: whitesmoke;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 210;
  overflow: hidden; }

#login_form {
  height: 100%;
  width: 100%; }

#login_box_name {
  text-align: center;
  padding: 10% 0 5% 0;
  font-size: 2em; }

#login_box_form_div1 {
  height: 50%;
  width: 100%; }

#login_box_form_div1 input {
  display: block;
  transform: translate(30%, 0);
  font-size: 1em;
  width: 60%;
  height: 11%;
  border-radius: 5px;
  margin-bottom: 2%;
  text-indent: 10px;
  border: 1px solid grey;
  font-family: 'Libre Franklin', sans-serif; }

.super_small_txt {
  font-size: .9em;
  text-align: center; }

.super_small_txt span {
  color: #55AEF4; }

.under_input_txt {
  padding-top: 6%; }

#signup_page_box1 {
  font-family: 'Libre Franklin', sans-serif;
  width: 400px;
  height: 650px;
  background-color: whitesmoke;
  position: absolute;
  top: 50%;
  right: 50%;
  border-radius: 10px;
  z-index: 210;
  transform: translate(-20%, -46%);
  overflow: hidden;
  font-size: 14px; }

.signup_form_p {
  height: 100%;
  width: 100%; }

#signup_box_name {
  text-align: center;
  padding: 10% 0 5% 0;
  font-size: 2em; }

#signup_box_form_div1 {
  height: 50%;
  width: 100%; }

#signup_box_form_div1 input {
  width: 60%;
  display: block;
  transform: translate(30%, 0);
  text-indent: 10px;
  font-size: 1em;
  height: 11%;
  border-radius: 5px;
  margin-bottom: 2%;
  border: 1px solid grey;
  font-family: 'Libre Franklin', sans-serif; }

.under_input_txt_sign {
  padding-top: 3%; }

.top_grey {
  background-color: white;
  width: calc(100vw - 240px);
  height: 60px;
  top: 0;
  right: 0;
  z-index: 1000;
  position: fixed; }

.top_header_container {
  background-color: white;
  position: absolute;
  border-top: 4px solid #01ae80;
  position: fixed;
  width: calc(100vw - 240px);
  height: 60px;
  top: 0;
  right: 0vw;
  z-index: 1001;
  font-family: 'Libre Franklin', sans-serif; }

.top_header_container_left {
  position: absolute;
  height: 100%;
  width: 45%;
  left: 30%;
  transform: translate(-50%, 0); }

.top_header_container_right {
  font-family: 'Libre Franklin', sans-serif;
  position: absolute;
  height: 100%;
  width: 45%;
  right: 5%; }

.top_header_container_mid {
  font-family: 'Libre Franklin', sans-serif;
  position: absolute;
  height: 100%;
  width: 37%;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 3000; }

.top_header_container_right a {
  float: right;
  padding: 20px 1.6vw;
  color: #464646;
  margin-top: -10px; }

.loader {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid #f3f3f3;
  border-radius: 50%;
  border-top: 3px solid #757575;
  border-bottom: 3px solid #757575;
  border-right: 3px solid #757575;
  width: 15px;
  height: 15px;
  animation: spin .8s linear infinite;
  z-index: -1; }

@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

#signup_line_line {
  width: 70px;
  height: 651.5px;
  background-color: whitesmoke;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(-114%, -46%);
  z-index: 303; }

#signup_page_box2 {
  font-family: 'Libre Franklin', sans-serif;
  width: 600px;
  height: 650px;
  background-color: #3BBC8E;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-20%, -46%);
  border-radius: 10px;
  text-align: center;
  overflow: hidden; }

/* MAKE THINGS LOOK THE SAME WITH PERCENTS.. AND THEN MEDIA QUERIES JUST CHANGE WIDTH AND HEIGHT OF MAIN DIV */
/* MEDIA QUERIES */
@media screen and (min-width: 1100px) {
  #login_page_box1 {
    transform: translate(20%, -46%); }
  #login_line_line {
    width: 70px;
    height: 651.5px;
    background-color: whitesmoke;
    position: absolute;
    top: 50%;
    right: 50%;
    /*translated 3% more from 290*/
    transform: translate(211%, -46%);
    z-index: 303; }
  #login_page_box2 {
    font-family: 'Libre Franklin', sans-serif;
    width: 600px;
    height: 650px;
    background-color: #3BBC8E;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(20%, -46%);
    border-radius: 10px;
    text-align: center;
    overflow: hidden; }
  .login_page_box2_img2 {
    width: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    opacity: .4; } }

@media screen and (max-width: 1250px) {
  .abt_page_container {
    width: 89vw;
    height: 48.8vw;
    max-width: 1000px;
    max-height: 548px; }
  .slogan {
    width: 500px; } }

@media screen and (max-width: 1100px) {
  #login_page_box1 {
    transform: translate(-50%, -46%); }
  #login_page_box2 {
    display: none; }
  #login_line_line {
    display: none; }
  #signup_line_line {
    display: none; }
  #signup_page_box1 {
    transform: translate(50%, -46%); }
  #signup_page_box2 {
    display: none; } }

@media screen and (max-width: 580px) {
  #login_page_box1 {
    width: 300px;
    height: 487px;
    border-radius: 10px;
    font-size: 11px; }
  #signup_page_box1 {
    width: 300px;
    height: 487px;
    border-radius: 10px;
    font-size: 11px; }
  #login_box_form_div1 input {
    border-radius: 3px; }
  #signup_box_form_div1 input {
    border-radius: 3px; }
  .bigtxt {
    font-size: 25px; }
  .slogan {
    font-size: 20px;
    width: 80vw; }
  .new_watch_vid_btn {
    padding: 13px 10px;
    width: 130px;
    font-size: 14px; } }

@media screen and (max-width: 420px) {
  .slogan {
    font-size: 16px; } }

@media screen and (max-width: 400px) {
  .fake-play-play {
    width: 3em;
    height: 3em; } }

@media screen and (max-width: 360px) {
  #login_page_box1 {
    width: 250px;
    height: 406px;
    border-radius: 8px;
    font-size: 10px; }
  #signup_page_box1 {
    width: 250px;
    height: 406px;
    border-radius: 8px;
    font-size: 10px; }
  #login_box_form_div1 input {
    border-radius: 2px; }
  #signup_box_form_div1 input {
    border-radius: 2px; }
  .bigtxt {
    white-space: unset; } }

@media screen and (max-width: 475px) {
  /* .ttitle p{
        font-size: 5vw;
    } */
  .top_header_T_login, .top_header_o_login {
    font-size: 5vw; }
  .home_base {
    font-size: 3.1vw;
    padding: 1vw 1vw; }
  /* .top_header_container div a p{
        font-size: 5vw;
    } */ }

/*# sourceMappingURL=auth_basic.css.map */