/* CSS Document */

*, *:before, *:after {box-sizing: inherit;}

html {box-sizing: border-box;
height: 100%;
scroll-behavior: smooth;}

body {background-color: #F0F0F0;
color: #041205;
margin: 0px;
padding: 0px;
font-family: 'Open Sans', Century Gothic, Arial, sans-serif;
height: 100%;
-ms-overflow-style: none;}

body::-webkit-scrollbar {
	display: none;}

a:link, a:visited {color: #51A66E;
text-decoration: none;
transition: 0.25s;}

a:hover, a:active {color: #2EB532;
transition: 0.25s ease;}

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

header {background-image: url("./Assets/Images/Header.jpg"); /*This image is taken from Unsplash. https://unsplash.com/photos/b4H05tU17mg*/
background-repeat: no-repeat;
background-size: cover;
background-position: left top;}

header ul {list-style: none;
margin: 0px;
padding: 0px;}

header ul li {display: inline-block;}

.langIcon {width: 1.15em;
height: 0.75em;
display: inline-block;
background-repeat: no-repeat;
background-size: cover;
background-position: left center;}

.RU {background-image: url("./Assets/Graphics/RuFlag.jpg");} /*This image is 100% made by me*/

.EN {background-image: url("./Assets/Graphics/UsFlag.jpg");} /*This image is 100% made by me*/

.lang {position: relative;
display: inline-block;}

.langContent {display: none;
position: absolute;
padding: 5px 0px 4px 0px;
width: 4em;
right: 0;
background-color: rgba(240,240,240,0.9);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 2;}

.lang:hover .langContent {display: block;}

#topNav {position: fixed;
z-index: 2;
background-color: rgba(240,240,240,0.95);
font-size: 2em;
margin-left: 15px;
margin-top: 10px;
padding-top: 5px;
padding-bottom: 5px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
border-radius: 3px;}

#topNav ul li {padding-right: 8px;
padding-left: 7px;}

#topNav ul li:first-child {padding-left: 10px;}

#topNav ul li:after {content: '';
display: block;
border-bottom: solid 2px #2EB532;
transform: scaleX(0);
transition: transform 500ms ease;
transform-origin: center;}

#topNav ul li:hover:after {transform: scaleX(1);
transform-origin: center;}

#topNav .fas {font-size: .85em;}

#mobNav {display: none;
font-size: 2em;
position: fixed;
top: 0;
left: 0;
z-index: 2;
padding: 6px 30px 30px 10px;
color: #2EB532;
cursor: pointer;}

.sidenav {display: none;
position: fixed;
left: 0;
top: 0;
z-index: 2;
height: 100%;
width: 0;
background-color: rgba(240,240,240,0.98);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
overflow-x: hidden;
padding-top: 15px;
transition: 0.2s;
color: #51A66E;}

.sidenav ul li a {font-size: 2em;
padding-bottom: 12px;
padding-top: 12px;
text-decoration: none;
display: block;
transition: 0.4s;
color: #51A66E;}

.sidenav ul li a:hover {color: #2EB532;
transition: 0.25s ease;}

.sidenav ul {position: absolute;
top: 24%;
left: 30px;}

.sidenav ul li {display: block;}

.sidenav ul li .fas {font-size: .85em;}

.sidenav .closebtn {position: absolute;
top: 0;
left: 0;
padding: 6px 30px 30px 10px;
font-size: 2em;
cursor: pointer;
color: #2EB532;}

#curtain {width: 100%;
height: 100%;
position: fixed;
left: 250px;
z-index: 2;
background-color: rgba(0,0,0,0.0);
transition: 0.4s;
display: none;}

#mobLang {margin-bottom: 20px;
display: flex;
position: absolute;
top: 0;
right: 0;
font-weight: bold;}

#mobLang a {text-align: center;
padding: 8px 10px 10px 10px;}

#logo {text-align: right;
margin-right: 10px;}

#logo img {width: 400px;
height: 128px;
transition: 0.3s ease;
margin-top: 20px;}

#logo h1 {margin: 0 35px 0 0;
font-size: 2.35em;
transition: 0.3s ease;
font-weight: normal;}

#hText {margin: 0 auto;
margin-top: 30px;
width: 80%;
padding: 5px 30px 30px 30px;
background-color: rgba(240,240,240,0.65);
border-radius: 3px 3px 0px 0px;
box-shadow: 0px -10px 50px 0px rgba(0,0,0,0.05);}

#hText h2 {font-size: 2.5em;}

#hText p {font-size: 1.3em;
width: 75%;}

#about {width: 80%;
margin: auto;
margin-bottom: 50px;
background-color: rgba(255,255,255,0.5);
padding: 20px;
margin-top: 30px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}

.intro {margin-bottom: 50px;}

.intro h1 {font-size: 2.3em;
margin-top: 0px;}

.intro p {font-size: 1.4em;}

#aboutContainter {display: flex;
flex-wrap: wrap;
margin: auto;
justify-content: space-around;}

.aboutContent {flex-basis: 33%;
display: flex;
justify-content: center;}

.aboutContentText {margin:0px 0px 0px 20px;}

.aboutContent img {border-radius: 50%;
width: 175px;
height: 175px;}

.aboutContentText h2 {margin-top: 0px;
font-size: 1.75em;}

.aboutContent h2 .fas {font-size: 0.85em;}

.aboutContentText p {font-size: 1.2em;}

.mobileExtraButtonOn, .mobileExtraButtonOff {display: none;
background-color: #51A66E;
color: #F0F0F0;
border: none;
padding: 10px;
font-size: 1.1em;
border-radius: 3px;
box-shadow: 0px 2px 16px 0px rgba(0,0,0,0.2);}

.mobileExtraButtonOn .fas, .mobileExtraButtonOff .fas {margin-left: 5px;}

.aboutMobileExtra {display: none;
padding: 10px;
margin: -10px 0px 20px 0px;
box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.2);}

.mobile {display: none;}

.line {height: 1px;
width: 95%;
background-color: #041205;
margin-bottom: 20px;}

#courses {width: 80%;
margin: auto;
padding: 20px 20px 0px 20px;}

#coursesContainer {display: flex;
justify-content: space-around;
flex-wrap: wrap;}

#courses .vLine {width: 2px;
background-color: #041205;}

.coursesVideoContainer {display: flex;
width: 35vw;
height: 19.7vw;
justify-content: center;
text-align: center;
flex-direction: column;}

.coursesVideoContainer .coursesVideo {width: 35vw;
height: 19.7vw;
position: relative;}

.fade h2 {font-size: 3em;
margin: 0 auto;
width: 35vw;
cursor: pointer;
position: absolute;
z-index: 1;}

.coursesVideoContainer .fade {background-color: rgba(0,0,0,0.8);
position: absolute;
height: 19.7vw;
width: 35vw;
transition: color, background 0.3s ease;
display: flex;
justify-content: center;
text-align: center;
flex-direction: column;
z-index: 1;
color: #F0F0F0;}

.coursesVideoContainer .fade:hover {background-color: rgba(0,0,0,0.6);
color: #FFF;
transition: color, background 0.3s ease;
cursor: pointer;}

.coursesContent ul {list-style: none;
padding: 0px;
margin-left: 10px;}

.coursesContent ul li {width: 35vw;}

.coursesContent {display: flex;
flex-direction: column;
justify-content: space-between;}

.coursesContent button {align-self: flex-end;
background-color: #51A66E;
color: #F0F0F0;
border: none;
padding: 10px;
font-size: 1.1em;
border-radius: 3px;
box-shadow: 0px 2px 16px 0px rgba(0,0,0,0.2);
transition: 0.3s ease;
cursor: pointer;}

.coursesContent button:hover {background-color: #2EB532;
transition: 0.3s ease;}

.coursesContent button .fas {font-size: 1.1em;
margin-left: 5px;}

#coursesExtraInfo {display: none;
position: fixed;
z-index: 1;
padding-top: 5vw;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);}

.modalContent {position: relative;
background-color: #FAFAFA;
margin: auto;
margin-bottom: 30px;
padding: 0px 0px 5px 0px;
width: 80%;
box-shadow: 0px 2px 16px 0px rgba(0,0,0,0.2);
-webkit-animation-name: modalAnima;
-webkit-animation-duration: 0.4s;
animation-name: modalAnima;
animation-duration: 0.4s;}

.modalHead {background-color: #51A66E;
color: #F0F0F0;}

.modalHead h2 {padding: 20px 0px 20px 10px;
text-align: center;
font-size: 2em;}

.modalHead #closeModal {font-size: 2em;
float: right;
padding-right: 10px;
margin-top: 5px;
cursor: pointer;}

.modalBody h3 {margin: 15px 0px 15px 0px;}

.modalBody ul {font-size: 1.2em;
padding-right: 10px;}

.modalBody ul li {line-height: 1.45em;
margin-right: 10px;}

.modalBody p {margin: 15px;
font-size: 1.2em;}

#serviceModal, #serviceModalHeader {display: none;}

#techModal, #techModalHeader {display: none;}

.hLine {height: 2px;
width: 100%;
background-color: #041205;
margin: 20px auto;
display: none;}

#news {width: 70%;
margin: auto;}

#news h1 {text-align: center;
font-size: 2em;
margin-top: 70px;}

#vk_widget {width: 100%;}

#vk_groups {width: 100%;
box-shadow: 0px 2px 16px 0px rgba(0,0,0,0.2);}

#contacts {background-color: #FAFAFA;
box-shadow: 0px 2px 16px 0px rgba(0,0,0,0.2);
margin-top: 50px;
padding-bottom: 1px;}

#contacts h1 {padding-left: 15px;
padding-top: 9px;
padding-bottom: 13px;
background-color: #51A66E;
color: #F0F0F0;
margin-bottom: 0px;}

#contactsContainer {display: flex;
justify-content: space-between;}

#contactsContainer a:hover, #contactsContainer a:active {color: #26D72B;}

#contactsContainer ul {padding-left: 0px;
list-style: none;
margin: 0px 20px 20px 20px;
flex: 1;
text-align: right;}

#contactsSocialsContainer {display: flex;
justify-content: space-between;
align-items: flex-start;
align-content: flex-end;
flex: 2;}

#contactsSocialsContainer ul {text-align: left;}

#contactsSocialsContainer ul:last-child li {font-size: 1.3em;}

#contactsSocialsContainer ul:first-child li {margin-bottom: 4px;}

#contactsContainer ul h2 {margin-bottom: 15px;}

form {max-width: 800px;
margin: auto;
margin-top: 40px;
font-size: 1.2em;
background-color: #F5F5F5;
padding: 0px 0px 10px 0px;
box-shadow: 0px 2px 16px 0px rgba(0,0,0,0.2);
border-radius: 4px;}

legend {margin: 0px 0px 30px 0px;
padding: 7px 0px 10px 0px;
display: block;
text-align: center;
width: 100%;
background-color: #51A66E;
color: #F0F0F0;
border-radius: 4px 4px 0px 0px;}

.input {display: flex;
align-items: flex-end;
margin: auto;
margin-bottom: 10px;
max-width: 500px;
padding: 0px 10px 0px 10px;}

label {font-size: .93em;}

.input input {flex: 1;
height: 2em;
margin-left: 10px;
max-width: 30em;}

#Email {max-width: 29.65em;}

.checkbox {margin-top: 30px;
text-align: center;}

.checkbox input {height: 1.25em;}

.buttons {max-width: 185px;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 5px;
display: block;}

.button {background-color: #51A66E;
color: #F0F0F0;
border: none;
padding: 10px;
font-size: .7em;
width: 90px;
border-radius: 3px;
transition: 0.3s ease;
cursor: pointer;}

.button:hover {background-color: #2EB532;
transition: 0.3s ease;}

@-webkit-keyframes modalAnima {
  from {left: -100px; opacity:0} 
  to {left:0; opacity:1}
}

@-webkit-keyframes modalAnima {
  from {left: -100px; opacity:0} 
  to {left:0; opacity:1}
}

@media screen and (max-width: 1670px){
	.aboutContent {margin-bottom: 20px;}
	.aboutContentText {width: 300px;}
	.aboutContent img {height: 160px;
	width: 160px;}
	.fade h2 {font-size: 2.5em;}
}

@media screen and (max-width: 1280px){
	.langContent {width: 4.2em;}
	#topNav {font-size: 1.5em;}
	#logo h1 {font-size: 1.8em;
	margin: 0 20px 0 0;}
	#logo img {width: 300px;
	height: 96px;}
	#hText {width: 70%}
	#hText h2 {font-size: 2em;}
	#hText p {font-size: 1.2em;
	width: 100%;}
	#about {width: 95%;}
	.intro h1 {font-size: 2em;}
	.intro p {font-size: 1.2em;}
	.aboutContentText {width: 280px;}
	.aboutContent img {height: 140px;
	width: 140px;}
	#courses {width: 95%;}
	.fade h2 {font-size: 1.7em;}
	.modalBody ul {font-size: 1.1em;}
	.modalBody ul li {line-height: 1.3em;}
	.modalBody p {font-size: 1.1em;}
}

@media screen and (max-width: 992px){
	.langIcon {display: block;
	width: 35px;
	height: 20px;
	margin-bottom: 5px;}
	.sidenav {display: block;}
	#topNav {display: none;}
	#mobNav {display: block;}
	#hText h2 {font-size: 1.5em;
	text-align: center;}
	#hText p {text-align: center;}
	.aboutContent {flex: 1;
	flex-basis: 100%;}
	.aboutContentText {width: 100%;}
	.aboutContent img {order: 2;}
	#coursesContainer {display: block;}
	.coursesContent {margin-bottom: 30px;
	display: block;}
	.coursesVideoContainer {width: 80vw;
	height: 45vw;
	margin: auto;}
	.coursesVideoContainer .coursesVideo {width: 80vw;
	height: 45vw;}
	.fade h2 {width: 80vw;
	font-size: 2.5em;}
	.coursesVideoContainer .fade {width: 80vw;
	height: 45vw;}
	.coursesContent ul li {width: 80vw;
	margin: auto;}
	.coursesContent button {display: block;
	margin: auto;}
	.modalBody h3 {margin: 25px 0px 25px 0px;}
	.hLine {display: block;}
	#news h1 {margin-top: 20px;}
	#contacts h1 {text-align: center;
	padding-left: 0px;
	font-size: 1.7em;}
	#contactsContainer ul h2 {font-size: 1.3em;}
}
	
@media screen and (max-width: 768px){
	#logo img {width: 200px;
	height: 64px;}
	#logo h1 {font-size: 1.2em;
	margin: 0 15px 0 0;}
	#hText {width: 100%;
	border-radius: 0px;}
	.intro h1 {font-size: 1.6em;}
	.intro p {font-size: 1.05em;}
	.aboutContentText h2 {font-size: 1.4em;}
	.aboutContentText {margin: 0px;}
	.aboutContentText p {display: none;}
	.mobileExtraButtonOn {display: inline;}
	.mobile {display: initial;}
	.fade h2 {font-size: 2em;}
	.modalHead h2 {font-size: 1.25em;
	text-align: left;
	margin-left: 30px;}
	.modalHead #closeModal {font-size: 1.75em;}
	.modalContent {width: 85%;}
	#news {width: 75%;}
	#contactsContainer {display: block;}
	#contactsContainer ul {text-align: center;}
	#contactsSocialsContainer ul {text-align: left;}
	#contactsSocialsContainer ul:last-child {text-align: right;}
	#contactsSocialsContainer ul:last-child li {font-size: 1.35em;}
}

@media screen and (max-width: 500px){
	.aboutContent img {height: 20vw;
	width: 20vw;}
	.fade h2 {font-size: 1.5em;}
	.modalHead h2 {font-size: 1em;
	margin-left: 10px;}
	.modalBody h3 {font-size: 1.1em;}
	.modalBody ul {font-size: 1em;}
	.modalBody p {font-size: 1em;}
	#contactsContainer ul {margin: 0px 10px 20px 10px;}
	#contactsSocialsContainer ul:first-child {margin-right: 0px;}
	#contactsSocialsContainer ul:last-child {margin-left: 0px;}
}

@media screen and (max-height: 450px){
	.sidenav ul li a {font-size: 1.6em;}
	.sidenav ul {left: 40px;
	top: 17%}
}