html, body, page {margin:0 ; padding: 0}
#main {width:100%}

#main {padding: 0px 0 150px 0;}
#main-menu{
    background: linear-gradient(180deg, #8C1510 0%, #B02721 100%);
    color: #FFFFFF;
    padding: 20px 0;
    font-size: 20px;
    line-height: 1;
	width: 100%;
	margin: 0px auto 0 auto
}
#menu-in {margin: 0 auto}
.menu-container {
    display: block;
    cursor: pointer;
    float: left;
    margin: 5px 10px;
    position: relative;
    TOP: -20px;
}
.bar1, .bar2, .bar3 {
    width: 35px;
    height: 3px;
    background-color: #fff;
    margin: 6px 0;
    transition: 0.4s;
	top: -20px
}
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-5px, 5px);
    transform: rotate(-45deg) translate(-5px, 5px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}


#hi  {
    margin: 0 auto;
    width: 300px;
    height: 0px;
    top: -10px;
    position: relative;
}


#header, #footer, .block, .blue{display: block;  margin: 0px auto; }
#header-outer {background-color:#e3e1dc; width: 100%; border-bottom: 1px solid #8A140E; height: auto;
    overflow: visible;}
.lang {top: 0px; position: relative}
.lang select {color:#23345c; padding: 3px; font-size: 20px}
#ht1 {display: block; color: #8A140E; font-weight: 700; margin: 20px 0 0 30px; font-size: 3.1vw; position:relative; float: left;}
#ht2{display: block; color: #23345c; font-weight: 400; margin: 20px 0 0 10px; font-size: 3.1vw; position:relative; float: left; clear: right}
#ht3 {font-family: 'Dancing Script', cursive; text-shadow: 0px -1.5px 1px #fff; display: block; color: #8A140E; clear:left; float: right; font-size: 4.2vw;  font-weight: 700; top: -60px; left: -1vw; position:relative;}
.blue-outer {width: 100%; padding: 40px 0; margin: 30px 0}
.blue {color: #fff}
.blue-outer, .blue {background-color: #697EAF}
#header {background-color:#e3e1dc;  height: auto; width: 80%; font-family:Roboto;}
#header div{width: 100%;
    margin: 0;
    display: block;}
	#header img{width:100%; display:block}
#main {clear: both; color: #23345c; line-height: 1.6;}
.tab {background-color:#B4B4B6;width:calc(50% - 2px); border-top: 1px solid #23345c; border-right: 1px solid #23345c; border-top-left-radius: 10px; border-top-right-radius: 10px;float: left; 
text-align: center; cursor: pointer; padding: 10px 0;}
#tab1{border-left: 1px solid #23345c;}
#tab2{}
.tabActive {background-color:#fff; color: #8A140E; cursor: auto; font-weight: 900;}
.invest{clear: both; margin: 20px 0; border-top: 1px solid #929397; padding: 20px 0}
.show {background-color: #DA683E; color: #fff; padding: 20px; border:1px solid #CA400E;}
.show{ height: auto; transition:all 0.3s ease;}
.show a {color: #fff; font-size: 20px; margin-top: 30px; display: block}
.link {color: #283067; cursor:pointer}
.close {border: 1px solid #CA400E; border-radius: 30px; height: 40px; width: 40px; text-align center; cursor: pointer; color: #fff; 
background-color: #EAA991; margin: 20px auto 0 auto; padding: 0 0 7px 10px}
.investBtn
 {
    cursor: pointer;
    border: 1px solid #ddd;
    background-color: #eee;
    width: 300px;
    text-align: center;
    margin: 30px auto 0 auto;
}
.investBtn2
 {
    cursor: pointer;
    border: 1px solid #ddd;
    background-color: #eee;
	float: left;
    width: 300px;
    text-align: center;
    margin: 30px calc((100% - 605px)/4);
}

.mainBtn{
	color:#fff;
    cursor: pointer;
    border: 1px solid #3F4E75;
    background-color: #eee;
    width: 100%;
    text-align: center;
    margin: 30px auto 0 auto;
	padding: 10px 0;
	background: linear-gradient(180deg, #697EAF 0%, #9EA6BB 100%);
}
.mainBtn:hover{color: #8A140E; background: linear-gradient(180deg, #9EA6BB 0%, #697EAF 100%)}

.digits{width: 25%; float:left}
.count{font-size: 5vw; margin: 0 auto;
    display: block;
    text-align: center;}
.digits div {text-align: center;}
.biproject {color: #8A140E;}
#footer-outer {background-color: #23345c; width: 100%; padding: 20px 0 50px 0; overflow: hidden;}
#footer, #footer2 {color: #fff; width: 100%; margin: 0 auto;  display: flex; font-size: 16px;}
#footer a, #footer2 a {color:#fff; }

.red{color: #8A140E}
.hid {visibility: hidden; height: 0px; overflow:hidden; padding: 0; transition:all 0.3s ease; margin: 0}

html {
  font-size: 16px;
}

#buttons-container { margin-top: 30px}

.d1right{    margin: 30px auto 0 auto;
    width: 300px}
.d1right input, .d1right textarea {
    padding: 10px 3px;
}
.d1right input {height: 22px;}
.d1right input, .d1right textarea {
    width: 300px; width: 342px;
    color: #000057;
    font-family: roboto, sans-serif;
    font-size: 20px;
    font-style: italic;
    font-weight: 300;
    min-height: 0px;
	}
#send {
    width: 250px;
}

#send {
    cursor: pointer;
    background-color: #64B18E;
    padding: 15px 40px;
    color: #FFF;
    font-size: 20px;
    font-family: roboto, sans-serif;
    font-weight: 400;
    border-radius: 10px;
    text-align: center;
    width: 250px;
    margin: 0 auto;
}




.fa {font-size: 64px; color:#D5DEF3; margin: 40px 25px 0 0 }
#err .fa {margin: 40px 5px 0 0 }

.fa:hover {color:#fff}
.flex-container, .c-logo {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: stretch;
  align-items_: center;
}

.c-logo.t1 {
  width: 25%;
  max-width: 500px;
  height: 500px;
  background-color: #292929;
  background-image: linear-gradient(150deg, #5a00ff 0%, #ff1ff7 100%, #ff1ff7 100%);
  box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
  color: white;
  text-decoration: none;
  font-size: 4em;
  font-weight: 300;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: perspective(500px);
          transform: perspective(500px);
  
	z-index: 1;
}

.c-logo.t2.click {
	cursor:pointer;
}

.c-logo.t2 {
  width: 20%;
  max-width: 350px;
  min-width: 300px;
  height: 390px;
  color: white;
  font-size: 1.8em;
	z-index: 1;
	overflow: hidden;
	position:relative; 
	top: 0
}

.c-logo.t1 {
background-color: #292929;
  background-image: linear-gradient(150deg, #5a00ff 0%, #ff1ff7 100%, #ff1ff7 100%);
  box-shadow: 0 20px 70px -10px rgba(0, 0, 0, 0.7), 0 50px 100px 0 rgba(0, 0, 0, 0.2);
}
.c-logo.t2 img {display: block; clear: both; margin: 0 auto 70px auto;}

.c-logo.t2 h2 {color:#fff; font-size: 28px; margin: 20px auto; font-weight: normal; width: 80%; text-align: center}
.c-logo.t2 p {border-bottom: solid #ABB8D7 1px; color:#fff; font-size: 20px; width: 80%; margin: 0px auto; text-align: center}
.c-logo.t2 a{display: block; color:#516ac2; font-size: 16px; width: 80%; margin: 0 auto; text-align: center}

.c-logo.t2:hover  {top: -20px;
	opacity: 1.0; z-index: 2;
	box-shadow: 0 0px 0px -10px rgba(0, 0, 0, 0.7), 0 20px 50px 0 rgba(0, 0, 0, 0.2);
	transition: top 0.4s ease-out;
	-moz-transition: top 0.4s ease-out;
	-webkit-transition: top 0.4s ease-out;
	z-index: 99
}

.c-logo.t3 {
	width: 30%;
}

.c-logo > span, .c-logo .s1 {

  display: block;
  font-family: 'Roboto';
  font-weight:700;

  text-shadow: -5px -3px 3px #000;
  justify-content: left;
  top: 1vh;
  position:relative;
  height:80%;
  padding-top: 60%
}
.c-logo:hover:after {
  -webkit-transform: translateZ(-100px);
          transform: translateZ(-100px);
	
	
}

.c-logo:hover {opacity: 1; z-index: 99;}
.c-logo  img {opacity: 1; height: 7vw; top: 40px; position: relative;}

.flex-container {margin-top:50px}
a.c-logo{text-decoration: none}

	.teamImg .text {width: 100%; text-align: center; line-height: 1.2; margin: 0; padding: 0}
	#team h1 {font-size: 3.5vw; color:#697EAF; margin: 0; text-align:center}
	#team img {width: 100%}
	
.overHid {overflow: hidden;}

.fl20-100-m {margin: 10px 20px}
.topBord {margin: 60px auto 10px auto; border-top: 1px dotted #C3C5C8; padding-top: 40px}
.fl20-100-bg {background-color: #fff; color:#23345c; padding: 0; float:left; width: 20%}

.buy, .submit, .login{color: #8C1510; border: 2px solid #8C1510; margin: 0 auto; width: 150px; text-align: center; cursor:pointer}
.login {width: 250px;}

.ct3 {color: #8C1510;}

#menuDrop {position: absolute; margin: 20px 0 0 10px; width: 300px; background-color: #8C1510; color: #fff; z-index: 100}
.menuItem {cursor:pointer; padding: 10px 15px; border-bottom: 1px solid #fff; font-family: "Montserrat", system-ui, BlinkMacSystemFont, -apple-system, sans-serif; font-size :24px}
.menuItem.hid {padding: 0}
.cross {text-decoration: line-through}
.grey {color:#787676}

#cources ul {padding: 0 10px 0 30px}
#cources li {padding: 0 0 15px 0;}
#footer .fa, #footer2 .fa{
    font-size: 54px;
    color: #fff;
    margin: 0px 15px 0 0;
}
.footer__logo {
    display: flex;
    align-items: center;
	text-decoration: none
	}
.footer__logo-img {
    margin: 0 auto;
	display: block;
	width: 50%
}
.footer__logo-text {
	font-size: 16px;
	font-weight: 600;
    display: inline-block;
    margin: 8px 0 0 32px;
	width: 100px;
}
.center {margin: 0 auto; display: block; float: none}

h3 {line-height: 1.2; font-weight: 400}

@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 
	#main {padding: 0px 0 70px 0;}
	.mb001, .mb002 {width: 100%}
	.fl20-100, .fl20-100-m, .fl25-100, .fl40-100, .fl50-100, .fl60-100 , .fl80-100, .flp200-100  {width: 95%; float:left; padding-left: 3%;}
	.fr20-100, .fr50-100  {width: 95%; float:right; padding-left: 3%;}
	
	.fl20-100-bg {background-color: #23345c; color:#fff; padding: 5px 0 5px 20px; width: 100%; margin-bottom: 20px}
	.topBord {border-top: none; padding-top: 10px}
	.buy {margin: 30px auto 0 auto;}
	.submit, .login {margin: 30px auto 0 auto;}
	.m40-0 {margin: 0px auto 10px auto}
	.height-m-0 {height: 0}
	.ct3, .ct7 {text-align: center; font-size: 34px; font-weight: 600}
	.menuItem {padding: 20px; font-size: 28px} 
	
	.footer__logo {display: block}
	.footer__logo-text {margin: 8px auto;  display: block;}
	.footer_socials {margin: 20px auto; width: 150px;}
	#menuDrop {margin: 20px 0; width: 100%}
	
	#header, #main {width: 100%}
	#imgTrainer {width: 80%; float: none; margin: 10px auto}
	#footer, #footer2  {width: 90%; display: block}
	#ht1 {font-size: 5vw}
	#ht2 {font-size: 4vw}
	#ht3 {font-size: 6.2vw; top:-70px}
	.block, .blue {width: 90%}
	.count {font-size: 12vw}
	.digits div {font-size: 20px}
	
	.d1right {width: 320px}
	.d1right input, .d1right textarea {width: 320px; margin: 0 auto; display: block;}
	
	#send { padding: 15px 20px; width: 250px; margin: 0 auto}
	table{padding: 0; margin: 0}
	
	.teamImg {display: block; width: calc(25% - 20px);  float: none; min-width: 280px; margin: 20px auto}
	#team h1 {font-size: 28px}

}


@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ 
.mb001, .mb002 {width: 100%;}

.fl20-100-bg {background-color: #23345c; color:#fff; padding: 5px 0 5px 20px; width: 100%; margin-bottom: 20px}
.topBord {padding-top: 10px}
.buy {margin: 30px auto 0 auto;}
.teamImg {display: block; width: calc(25% - 20px);  float: none; min-width: 320px; margin: 20px auto}
#team h1 {font-size: 28px}
}
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ 

#menuDrop {margin: 20px 0 0 10px; width: 300px; z-index: 100}
.menuItem {padding: 15px; font-size: 20px}
.fr20-100  {width: 20%; float:right; padding: 0}
.fr50-100  {width: 50%; float:right; padding: 0}
.flp200-100 {width: 200px; float:left}
.d1right {width: 550px;}
.submit {margin: 2 auto;}
.footer__logo {display: flex}
.footer__logo-text {margin: 8px 0 0 32px; display: inline-block;}
.footer_socials {margin: 0px auto}
#footer, #footer2 {width: 90%; display: flex}
}
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ 
#imgTrainer {width: 50%; float: right; margin: 0}
.m40-0 {margin: 40px auto 10px auto}
}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ 
	#main {padding: 0px 0 150px 0;}
	.height-m-0 {height: auto}
	.mb001 {width: 70%}
	.mb002 {width: 95%}
	.fl20-100 {width: 20; float:left}
	.fl20-100-m {width: 20%; float:left;}
	.fl25-100 {width: 25%; float:left}
	.fl40-100 {width: 40%; float:left}
	.fl50-100  {width: 50%; float:left}
	
	.fl60-100 {width: 60%; float:left}
	.fl80-100 {width: 80%; float:left}
	.fl20-100, .fl20-100-m, .fl40-100, .fl50-100, .fl60-100 , .fl80-100  {padding-left: 0;}
	.fl20-100-bg {background-color: #fff; color:#23345c; padding: 0; width: 20%}
	.topBord {border-top: 1px dotted #C3C5C8; padding-top: 40px}
	.buy {margin: 0 auto;}
	.ct3, .ct7 {text-align: left; font-size: 24px; font-weight: 400;}
	#header {width: 70%}
	.block, .blue {width: 60%}
	#ht1, #ht2 {font-size: 3vw}
	#ht3 {font-size: 4.2vw; top:-60px}
	
	.count {font-size: 7vw}
	.digits div {font-size: 30px}
	
	.teamImg {display: block; width: calc(25% - 20px);  float: left; min-width: 150px; margin: 10px 10px}
	#team h1 {font-size: 3.5vw}
}

@media (min-width:1281px) { /* hi-res laptops and desktops */ 
	.mb001 {width: 70%}
	.mb002 {width: 95%}
	.fl20-100 {width: 20%; float:left;}
	.fl20-100-m {width: 20%; float:left;}
	.fl40-100 {width: 40%; float:left}
	.fl50-100  {width: 50%; float:left}
	.fl60-100 {width: 60%; float:left}
	.fl80-100 {width: 80%; float:left}
	.fl20-100, .fl20-100-m, .fl40-100, .fl50-100, .fl60-100 , .fl80-100  {padding-left: 0;}
	.fl20-100-bg {background-color: #fff; color:#23345c; padding: 0; width: 20%}
	.topBord {padding-top: 40px}
	.buy {margin: 0 auto;}
	
	#header {width: 70%}
	.block, .blue {width: 60%}
	#ht1, #ht2 {font-size: 3vw}
	#ht3 {font-size: 4.2vw; top:-60px}
	
	.count {font-size: 7vw}
	.digits div {font-size: 30px}
	
	.teamImg {display: block; width: calc(25% - 20px);  float: left; min-width: 150px; margin: 30px 10px}
	#team h1 {font-size: 3.0vw}
}



@media screen and (min-width: 320px) {
  html {
    font-size: calc(22px + 6 * ((100vw - 320px) / 680));
  }
}
@media screen and (min-width: 1000px) {
  html {
    font-size: 22px;
  }
}