/* 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(5, 3, 39);
	font-family: "Ubuntu Sans", sans-serif;
	font-style: normal;
        font-weight: 300;
        box-sizing: border-box;
        scroll-behavior: smooth;
}


h1{
        margin-top: 20px;
        margin-bottom: 40px;
        font-family: "Ubuntu Sans", sans-serif;
        font-size: 1.5em;
        color: rgba(138, 225, 245);
        font-weight: 300;
}
h2{
        position: relative;
        display: inline;
        margin-top: 10px;
        margin-bottom: 10px;
        font-family: "Ubuntu Sans", sans-serif;
        font-size: 1.5em;
        color: rgba(199, 199, 255);
        font-weight: 300;
}

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

p {
        font-family: "Ubuntu Sans", sans-serif;
        font-size: 1.3em;
        color: rgba(199, 199, 255);
        font-weight: 300;
}

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




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




span b { 
  font-size: 77%; 
  font-weight: 300; 
  margin: 0;
  padding: 0;
  color: rgba(185, 185, 220);
  text-align:right;
  line-height: 18px; /* 4px +12px + 4px */
}






ul{
    list-style: none;
}


textarea::placeholder {
  font-weight: 300;
  color: rgba(155, 148, 148);
}



table {
  border-collapse: collapse;
  border-style: hidden;
  font-size:1.5em;
  width: 100%;
}


table td {
  border: 0px solid rgb(148,255,255);
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right: 12px;
  text-align: right;
  color: rgb(199,199,255)
}



table th {
  padding-top: 19px;
  padding-bottom: 19px;
  padding-right: 12px;
  line-height: 39px;
  text-align: right;
  font-style: thin;
  /*background-color: #04AA6D;*/
  color: rgb(155,155,255);
}



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


/* Logo */
.logo{
    display: inline-block;
    color: rgba(220, 85, 125);
    font-size: 45px;
    margin-left: 14px;
    height: 25px;
}

.nav{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(15, 15, 55);
    overflow: hidden;
    top:58px;
}
.menu a{
    display: block;
    padding: 20px;
    color: rgba(175, 175, 225);
    font-weight: 300;
    font-size: 1.2em;
    
}

.menu a:hover{
    background-color: rgba(15, 15, 55);
}

.nav{
    max-height: 0;
    transition: max-height .7s ease-out;
}

/* Menu Icon */
.hamb{
    cursor: pointer;
    float: right;
    padding: 30px 35px;
}/* Style label tag */

.hamb-line {
    background: rgba(100, 220, 220);
    display: block;
    height: 2px;
    position: relative;
    width: 25px;

} /* Style span tag */

.hamb-line::before,
.hamb-line::after{
    background: rgba(100, 220, 220);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}
.hamb-line::before{
    top: 8px;
}
.hamb-line::after{
    top: -8px;
}

.side-menu {
    display: none;
} /* Hide checkbox */


/* Toggle menu icon */
.side-menu:checked ~ nav{
    max-height: 100%;
}
.side-menu:checked ~ .hamb .hamb-line {
    background: transparent;
}
.side-menu:checked ~ .hamb .hamb-line::before {
    transform: rotate(-45deg);
    top:0;
}
.side-menu:checked ~ .hamb .hamb-line::after {
    transform: rotate(45deg);
    top:0;
}




.info {
  font-size: 1.25em;
  color: rgba(155, 245, 255);
}


/* Responsiveness */
@media (min-width: 1177px) {
    .nav{
        max-height: none;
        top: 0;
        position: relative;
        float: right;
        width: fit-content;
        background-color: transparent;
    }
    .menu li{
        float: left;
    }
    .menu a:hover{
        background-color: transparent;
        color: rgba(100, 220, 220);

    }
    .hamb{
        display: none;
    }
}


a:hover{
	text-decoration: none;
}

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




.bullet {
  width: fit-content;
  float: left;
  height: fit-content;
}


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


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


.link_signup { 
  color: rgba(175, 175, 205);
  text-decoration: none;
  width: fit-content;
  height: 100%;
  cursor: pointer;
} 


.link_signup:hover { 
  color: rgba(100, 220, 220,1);
  text-decoration: none;
  cursor: pointer;
}


.link_inverted { 
  color: rgba(85, 177, 177);
  text-decoration: none;
} 

.link_inverted:hover { 
  color: rgba(100, 220, 220);
  text-decoration: none;
}




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

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

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



.main-block{
	width: 95%;
	margin: 0 auto;
	margin-top: 105px;
	margin-bottom: 36px;	
}

.main-block a{
	font-family: "Ubuntu Sans", sans-serif;
}




.main-block h1{
	text-align: left;
	color: rgba(220, 85, 125);
	font-size: 40px;
	margin-top: 25px;
	margin-bottom: 25px;
	font-weight: 300;
}

.description-content{
	width: 58%;
	float:center;
	margin: auto auto;
	font-family: "Ubuntu Sans", sans-serif;
        font-size: 18px;
}



.description-content h1{
	font-family: "Ubuntu Sans", sans-serif;
	margin-bottom: 10px;
}


.description-data img{
	display: block;
	margin: auto;
	max-width: 100%;
}


.data_description{
	width: 55%;
	margin: 0 auto;
	text-align: center;
	padding-top: 35px;
	padding-bottom: 14px;
	font-family: "Ubuntu Sans", sans-serif;
    	font-size: 16px;
    	color: rgba(220, 85, 125);
    	font-weight: 300;
}    	


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


.excite {
          opacity: 0.545;
          cursor: pointer;
          font-size:47px;
          color:rgb(148,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.762;
          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%);
}


.carbonLoader {
        width: 20px;
        aspect-ratio: 1;
        background: rgb(100,100,255);
        box-shadow: 0 0 60px 15px rgb(100,100,255);
        transform: translate(-80px);
        position:relative; 
        top:14px;
        clip-path: inset(0);
        animation:
          l4-1 0.5s ease-in-out infinite alternate,
          l4-2 1s   ease-in-out infinite;
}
@keyframes l4-1 {
        100% {transform: translateX(80px)}
}
@keyframes l4-2 {
         33% {clip-path: inset(0 0 0 -100px)}
         50% {clip-path: inset(0 0 0 0)     }
         83% {clip-path: inset(0 -100px 0 0)}
}


.avatar {
  outline: none;
  width: 100px;
  margin: 0 auto;
  margin-left: 15px; 
  bottom:30px;
  vertical-align: middle;
}


.profile_hl {
  font-size: 1.2em;
  margin-top: 14px;  
  line-height: 28px;  /* 4px +12px + 4px */  
  padding-bottom: 4px;
  margin-bottom: 0; 
  padding-bottom: 0;
  color: rgb(100, 220, 220);
}





.profile_details {
  margin: 0;
  padding-bottom: 4px;
  font-size: 1.1em;
  color: rgba(175, 175, 205);
  text-align:right;
  line-height: 18px; /* 4px +12px + 4px */
}



.hl {
  color: rgba(220, 85, 125);
  text-decoration: underline;
}


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


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




.col-container {
  /*display: table;*/
  width: 100%;
}
.col {
  /*display: table-cell;*/
  padding: 0px;
}

/* invisible for pseudo elements*/
.star {
  width: 77%;
  opacity:0;
  line-height:1px;
}


.cv_right {
  color: rgba(185,185, 225);
}




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



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

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







/* HTML: <div class="loader"></div> */
.loader {
  width: auto;
  margin-top: 25px;
  margin-bottom: 35px;
  text-align: center;
  top: 0px;
  width: 155px;
  height: 15px;
  transform: skewX(-45deg);
  background: 
    linear-gradient(#3FFFF1 0 0) left -30px top 0/30px 20px no-repeat 
    rgba(5,5,45);
  animation: l3 1s infinite linear;
}

@keyframes l3 {
  100% {background-position: right -30px top 0}
}





/* The container */
.chk_box_container {
  display: block;
  width: fit-content;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  line-height:22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


* {
  box-sizing: border-box;
}

/*the container must be positioned relative:*/
.autocomplete {
  width: 94%;
  height: 55px;
  position: relative;
  vertical-align: middle;
  display: inline-block;
  font-family: "Play", sans-serif;
  font-weight: 300;
  border: rgba(155, 155, 255, .5);
  border-width: 2px;
  border-style: dashed;
  box-shadow: 0 0 14px rgba(155, 155, 255, .4);
}

.key_search {
  position: relative;
  display: inline-block;
  font-family: "Play", sans-serif;
  font-weight: 300;
  border: rgba(155, 155, 255, .5);
  border-width: 2px;
  border-style: dashed;
}






.autocomplete-items {
  position: absolute;
  outline: solid 2px rgba(15, 7, 58);
  border-bottom: none;
  border-top: none;
  z-index: 1;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}


.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: rgba(15, 7, 58); 
  color: rgba(85, 177, 177); 
  border-bottom: 2px dashed rgba(155, 155, 255, .5); 
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: rgba(35, 8, 125); 
}

/*when navigating through the items using the arrow keys:*/

.autocomplete-active {
  background-color: rgba(35, 8, 125) !important; 
}


.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: "Ubuntu Sans", sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 1.7em;
  border: none;
  height: 100%;
  line-height:45px;
  background-color: rgb(4,1,25);
}


.email_input::placeholder {
  font-family: "Ubuntu 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);
}


/* --- Styles for Resume / CV_Card details ------------------------------------------------------------------------------------------------ */


.fit_container {
  height: 45px;
  width: 77px;
  position: relative;
  float: right;
  margin-right: 0px;
  margin-top: 4px;   
}

.fit_image {
  position: absolute;
  left: 0;
  top: 0;
}



.fit_text_mini {
  z-index: 1;
  position: relative;
  color: rgba(85, 177, 177);
  font-size: 21px;
  font-weight: thin;
  text-align: center;
  left: 0px;
  top: 0px;
}



.parallelogram_button {
        transform: skew(-18deg);
	padding-top: 0px;
	background: rgba(85, 177, 177);
	text-align:center;
	color: rgba(15, 5, 155);
	font-weight: 300;
}


.parallelogram_button:hover {
  background-color: rgba(85, 225, 225);
  overflow: hidden;
  cursor: pointer;
}




.start_button {
        /*transform: skew(-25deg);*/
	background: rgba(48, 185, 185);
	text-align:center;
	color: rgba(15, 5, 125);
	font-size: 1.4em;
	font-weight: 300;
	line-height: 45px;
        height: 45px;
        width: 14%;
        max-width: 185px;
        position: absolute;
        border: none;
}




.start_button:hover {
  background-color: rgba(85, 255, 255);
  overflow: hidden;
  cursor: pointer;
}





.promo_code {
	background: rgba(148, 225, 255, 0.4);
	text-align:center;
	color: rgba(148, 225, 255);
	font-size: 1.4em;
	font-weight: 300;
        padding-top:14px;
        padding-bottom:14px;        
        width: 348px;
        border: none;
        font-family: "Ubuntu 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(85, 177, 177);  
  /*border-width: 2px;
  border-style: dashed;*/
  width: 			77%;
  margin-right: 		0px;
  margin-left: 		0px;
}





.welcome {
  width:				90%; 
  max-width: 		851px; 
  margin:			auto;
  padding-bottom:	34px;
  /*border-top: 		solid 1px rgba(18, 18, 58);
  border-bottom: 	solid 1px rgba(18, 18, 58);*/
}





form.gettoknow input[type=text] {
  padding: 10px;
  font-family: 		"Play", sans-serif;
  font-weight: 		normal;
  font-size: 1.4em;
  border: none;
  float: left;
  width: calc(100% - 95px);
  background: rgb(18,18,58);
  outline: none;
}


form.gettoknow button {
  float: left;
  width: 95px;
  background: rgba(18, 18, 58);
  color: rgb(100, 220, 220);
  border: none;
  cursor: pointer;
  transform: skew(-25deg);
  text-align:center;
  font-size: 1.4em;
  font-weight: 300;
  line-height: 46px;
  height: 46px;
  width: 95px;
  position: absolute;
  border-top: 	1px solid rgb(18, 18, 58);
  border-left: 	1px solid rgb(18, 18, 58);
  border-right: 	1px solid rgb(18, 18, 58);
  border-bottom:  none;
  outline: none;
}

form.gettoknow button:hover {
  border-top: 	1px solid rgb(85, 177, 177);
  border-left: 	1px solid rgb(85, 177, 177);
  border-right: 	1px solid rgb(85, 177, 177);
  border-bottom:  none;
  outline: 		none;
  background: rgba(18, 18, 58);
  overflow: hidden;
  cursor: pointer;
}


form.gettoknow::after {
  content: "";
  clear: both;
  display: table;
}




.parallelogram {
        transform: skew(-18deg);
	width: 70px;
	height: 35px;
	padding-top: 4px;
	background: rgba(85, 177, 177);
	text-align:center;
	color: rgba(15, 5, 155);
	font-size: 23px;
        font-weight: 300;
}


.mini_parallelogram {
	width: 126px;
	left:-14px;
	height: 28px;
	transform: skew(-18deg);
	background: rgba(35, 8, 125);
	text-align:center;
	color: rgba(185, 185, 220);
	font-size: 20px;
        font-weight: thin;
        margin-top: 0px;
        margin-left: 5px;
        position: relative;
        line-height: 24px;
}





/* 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: 300;
  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;
  }
  .sizing_bottom {
    padding-bottom:25px;
  }
}

@media only screen and (min-width: 577px) {
  .sizing {
    padding-top:100px;
  }
  .sizing_bottom {
    padding-bottom:25px;
  }
  .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;
        margin: 10px;
        display:block;
        border-bottom: 1px solid rgb(138,225,255);
        opacity: 1;
        animation: fade 2.5s linear;
  }
}

@media only screen and (min-width: 1177px) {
  .sizing {
    padding-top:74px;
  }
  .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;
  border-bottom: 1px solid rgb(138,225,255);
  opacity: 1;
  animation: fade 2.5s linear;
}

}

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


@media only screen and (min-width: 1477px) {
  .sizing {
    padding-top:96px;
  }
  .sizing_bottom {
    padding-bottom:21px;
  }
}



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


@media only screen and (min-width: 1977px) {
  .sizing {
    padding-top:194px;
  }
  .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;
          margin: 10px;
          display:block;
          border-bottom: 1px solid rgb(138,225,255);
          opacity: 1;
          animation: fade 2.5s linear;
        }
	table {
	  font-size: 1.4em;
	}
}