/* Reset */ *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'GOST type B';
    src: url('fonts/gost/gosttypeb.eot'); /* IE9 Compat Modes */
    src: url('fonts/gost/gosttypeb.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/gost/gosttypeb.woff') format('woff'), /* Modern Browsers */
         url('fonts/gost/gosttypeb.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('fonts/gost/gosttypeb.svg#Gost Type B') format('svg'); /* Legacy iOS */
}


html, body{
        height: 100%;
	background-color: rgba(14,8,55);
	font-family: "Noto Sans", sans-serif;
	font-style: normal;
        font-weight: 400;
        box-sizing: border-box;
        scroll-behavior: smooth;
}


h1{
        margin-top: 20px;
        margin-bottom: 40px;
        font-family: "Noto Sans", sans-serif;
        font-size: 1.5em;
        color: rgba(88, 225, 245);
        font-weight: 400;
        font-style: normal;
}
h2{
        position: relative;
        display: inline;
        margin-top: 10px;
        margin-bottom: 10px;
        font-family: "Noto Sans", sans-serif;
        font-size: 1.25em;
        color: rgba(188, 188, 255);
        font-weight: 400;
        font-style: normal;
}

h3 {
        font-family: "Noto Sans", sans-serif;
        font-size: 1.1em;
        color: rgba(100, 220, 240);
        font-weight: 400;
        font-style: normal;
}

p {
        font-family: "Noto Sans", sans-serif;
        font-size: 1.25em;
        color: rgba(188, 188, 255);
        font-weight: 400;
        font-style: normal;
}

a {
	text-decoration: none;
	margin-left: 0px;
	margin-right: 0px;
        text-decoration: none;
        color: rgba(220, 85, 125);
}




p:hover span {
    opacity: 1 !important;
}

.news{
  background-color: rgba(14,25,77, 0.881);
  border-bottom: 1px solid rgb(88,225,255);
}


#headline_box {
  background-color: rgba(14,25,77, 0.881);
  padding: 0 34px 34px 34px;
  max-width: 588px;
  border-left: 1px solid rgb(255,88,174);
}


#walking_box {
  /*background-color: rgba(14,41,55, 0.545);
  background-color: rgba(41,34,77, 0.588);*/
  background-color: rgba(14,25,77, 0.881);
  padding: 88px 34px 0px 34px;
  max-width: 788px;
  border-left: 1px solid rgb(88,88,255);
}



#x1:hover {
  cursor: pointer;
  color: rgb(88,225,255) ;
}

#x2:hover {
  cursor: pointer;
  color: rgb(88,225, 255) ;
}

#x3:hover {
  cursor: pointer;
  color: rgb(88,225, 255) ;
}


.rating {
  font-size:1.25em;
}


.left {
  width: 37%;
  text-align: left;
}



.info {
  font-size: 1.25em;
  line-height:1.25em;
  color: rgba(148, 225, 255);
}



a:hover{
	text-decoration: none;
}

img {
    max-width: 100%;
    max-height: 100%;
}



.link { 
  color: rgba(188, 188, 255);
  text-decoration: none;
  width: fit-content;
  height: 100%;
} 


.link:hover { 
  color: rgba(88,225,255);
  text-decoration: none;
  cursor: pointer;
}




.headline a{
  color: rgba(96, 245, 255,.8);
}

.headline p:hover { 
  color: rgba(85, 177, 177);
}

.headline a:hover { 
  color: rgba(88,225,255);
}



.instruction {
  font-size:1.9em;
  line-height:55px;
}


.excite {
          opacity: 0.545;
          cursor: pointer;
          font-size:47px;
          color:rgb(88,225,255);
          line-height:47px;
          height:125px;
}




.excite:hover {
  opacity:	1;
  background-image: url("/static/img/pay_line_2.png");
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 120px auto;
}


.promo_excite {
          opacity: 0.84;
          cursor: pointer;
}


.promo_excite:hover {
          opacity: 1;
}


/*
#logoSizing {
  cursor: pointer;
}


#totalEnabler {
  cursor: pointer;
  opacity:	0.9;
}
*/

#totalEnabler:hover {
  opacity:	1;
}



.buyLine {
  background-image: url("/static/img/pay_line_1.png");
}



#overlay {
        position: fixed; /* Sit on top of the page content */
        display: none; /* Hidden by default */
        width: 100%; /* Full width (cover the whole page) */
        height: 100%; /* Full height (cover the whole page) */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(15,15,55,0.9); /* Black background with opacity */
        z-index: 35; /* Specify a stack order in case you're using a different order for other elements */
        cursor: pointer; /* Add a pointer on hover */
}
#warning{
        position: absolute;
        margin-top: 280px;
        left: 50%;
        font-size: 25px;
        transform: translate(-50%,-50%);
       -ms-transform: translate(-50%,-50%);
}




.line {
  border:none;	
  border-top: 2px dashed rgba(155, 155, 255, .5);  
}


.column {
  float: left;
  padding: 0px;
  height: 120px;
}



.basementline {
  opacity:0.41;
}

/* --- Columns for Responsive Design  --------------------------------------------------------------------------------------------- */



.preview_left {
      width: 120px;
      margin-right: 33px;
}

.preview_right {
      width: calc(100% - 180px);
      float: right;
}
    
    


.email_form {
  width:100%;
  display:none;
}

.email_input {
  width: 100%;
  background-color: rgb(5,4,34);
  padding-left:14px;
  color: rgb(148,255,255);
  outline:none;
  font-family: "Noto Sans", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.7em;
  border: none;
  height: 100%;
  line-height:45px;
  background-color: rgb(4,1,25);
}


.email_input::placeholder {
  font-family: "Noto Sans", sans-serif;
  font-style: "italic";
  font-weight: 400;
  color: rgb(148,148,255);
}


input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgb(148,255,255);
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232329;
}

input:-webkit-autofill {
  caret-color: rgb(148,255,255);
}


.promo_code {
	background: rgba(148, 225, 255, 0.4);
	text-align:center;
	color: rgba(148, 225, 255);
	font-size: 1.25em;
	font-weight: 400;
        padding-top:14px;
        padding-bottom:14px;        
        width: 348px;
        border: none;
        font-family: "Noto Sans", sans-serif;
        font-weight: normal;
        font-style: normal;
}




.start_area {
  position: 			relative;
  display: 			inline-block;
  font-family: 		"Play", sans-serif;
  font-weight: 		normal;
  /*border: 			rgba(155, 155, 255, .5);*/
  border-bottom: 	1px solid rgb(84, 177, 177);  
  /*border-width: 2px;
  border-style: dashed;*/
  width: 			77%;
  margin-right: 		0px;
  margin-left: 		0px;
}




.welcome {
  width:				100%; 
  margin:			auto;
  padding-bottom:	34px;
  z-index:			10;
  position: 			absolute;
  background: 		rgba(25, 14, 55, 0.148);
  opacity: 			1;
  animation: 		fade 4.1s linear;
  /*
  max-width: 		851px; 
  left: 50%;
  border-top: 		solid 1px rgba(18, 18, 58);
  border-bottom: 	solid 1px rgba(18, 18, 58);*/
}


#shustreeplay {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index:0;
}




/* Clear floats after the columns */
.row {
  display: flex;
  flex-wrap: wrap;
  height: 120px;
  align-items: center;
  margin-bottom:25px;
  margin-top:25px;
}


.totaller {
  line-height: 40px;
  font-size:1.25em;
  margin-bottom:25px;
  margin-top:34px;
}


.headliner {
  width:100%;
  margin-top:25px;
  margin-bottom:25px;
}



.contact {
  padding: 8px 0px 0px 0px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
  flex:1;
}






/* ------------------------------------  REQUEST TEST POPUP -----------------------------------------------------------  */

/* Extra styles for the cancel button */
.cancelbtn {
  padding: 14px 20px;
  background-color: rgba(35,35,85,.8);
}

/* Float cancel and signup buttons and add an equal width */
.cancelbtn, .signupbtn {
  float: left;
  width: 50%;
}

/* Add padding to container elements */
.container {
  padding: 16px;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(85,85,148,.88);
  padding-top: 50px;
  outline: none;
}


/* Modal Content/Box */
.modal-content {
  background-color: rgb(25, 25, 75);
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: none;
  outline: none;
  width: 50%; /* Could be more or less, depending on screen size */
}


/* Style the horizontal ruler */


/* The Close Button (x) */
.close {
  position: absolute;
  right: 35px;
  top: 15px;
  font-size: 40px;
  font-weight: 400;
  color: #f1f1f1;
}

.close:hover,
.close:focus {
  color: #f44336;
  cursor: pointer;
}

/* Clear floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}







/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
  .cancelbtn, .signupbtn {
     width: 100%;
  }
}


@media only screen and (max-width: 577px) {
  .sizing {
    padding-top:88px;
  }
  .sizingX {
    padding-bottom:74px;
  }
  .sizing_bottom {
    padding-bottom:25px;
  }
}

@media only screen and (min-width: 577px) {
  .sizing {
    padding-top:100px;
  }
  .sizingX {
    padding-bottom:88px;
  }
  .sizing_bottom {
    padding-bottom:25px;
  }
  .news{
        width: calc(100% - 20px);
        position: relative;
        text-align: left;
        /*top: 9px;
        box-shadow: 0px 0px 3px 3px rgba(155, 155, 255,.711);
        border: 1px solid green;*/
        padding: 20px;
        margin: 10px;
        display:block;
  }
}


@media only screen and (min-width: 1177px) {
  .sizing {
    padding-top:74px;
  }
  .sizingX {
    padding-bottom:55px;
  }
  .sizing_bottom {
    padding-bottom:15px;
  }
  .news {
  /*background-color: rgba( 25,13,138);*/
  width: 25%;
  position: absolute;
  left:65%;
  text-align: left;
  top: 69px;
  /*box-shadow: 0px 0px 3px 3px rgba(155, 155, 255,.711);
  border: 1px solid green;*/
  padding: 20px;
  margin: 10px;
  display:block;
}

}

@keyframes fade {
  0%,100% { opacity: 0 }
  100% { opacity: 1 }
}


@media only screen and (min-width: 1477px) {
  .sizing {
    padding-top:94px;
  }
  .sizingX {
    padding-bottom:84px;
  }
  .sizing_bottom {
    padding-bottom:20px;
  }
}



@media only screen and (min-width: 1677px) {
  .sizing {
    padding-top:117px;
  }
  .sizingX {
    padding-bottom:105px;
  }
  .sizing_bottom {
    padding-bottom:34px;
  }
}


@media only screen and (min-width: 1977px) {
  .sizing {
    padding-top:194px;
  }
  .sizingX {
    padding-bottom:188px;
  }
  .sizing_bottom {
    padding-bottom:45px;
  }
}




@media only screen and (max-width: 577px) {
	.header-block, .description-content, .cv-content, .footer, .data_description{
		width: 92%;
		font-size: 1.1em;
	}
        .modal-content {
          width: 95%;      
        }
	.chk_box_container {
	  line-height: 25px;
	  font-size: 1.0em;
	}
	.collapsible  {
	  font-size: 1.1em;
	  line-height: auto;
	  padding: 14px;
	}
	.conv_loader {
	  font-size: 1.0em;
	}
	.bg {
          height: 85%; 	
	}
	.headline_right{
	  padding-bottom:25px;
	}
	.row {
	  margin-top:25px;
	  margin-bottom:34px;
	}
	.email_input {
	  font-size: 1.25em;
	}
	.instruction {
	  line-height:28px;
	}
	.totaller {
          margin-bottom:25px;
          margin-top:55px;
        }
        .headliner {
          width:100%;
          margin-top:34px;
          margin-bottom:0px;
        }
        .preview_left {
          width: 110px;
          margin-right: 14px;
        }
        .preview_right {
          width: calc(100% - 134px);
          float: right;
        }
        .news{
          width: 100%;
          position: relative;
          text-align: left;
          top: 9px;
          /*box-shadow: 0px 0px 3px 3px rgba(155, 155, 255,.711);
          border: 1px solid green;*/
          padding: 20px;
          display:block;
        }
	table {
	  font-size: 1.25em;
	}
}