*{
	margin:0;
	padding:0;
	box-sizing: border-box;
	font-family: Poppins, sans-serif;
}

html {
	scroll-behavior: smooth;
}

:root {
	--C1: #f5f5f5;
	--C2: #bababa;
	--C3: #707070;
	--C4: #777777;
	--C5: #232323;
	--C6: #80764444;
	--C7: #807644;
	--C8: #222420cc;
    --C9: #c1aa50;
}

body{
  color: var(--C1);
  text-align: center;
  line-height: 1.5;
}

#console{
	position: fixed;
	bottom:10px;
	left:20px;
	background:#ff2222;
	z-index:200;
}

.loader {
	background: var(--C5);
	position: fixed;
	width: 100%;
    height: 100vh;		
	z-index: 1000;	
	transition: 2s all ease;
	visibility: hidden;
	opacity: 0;
}	
	
.loader.active{	
	visibility: visible;
	z-index: 1000;	
	opacity: 1;
}


.spinner {
	position: absolute;
	width: 100px;
	height: 16px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
.spinner:before , .spinner:after{
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #aaa;
  box-shadow: 32px 0 #aaa;
  left: 0;
  top: 0;
  animation: ballMoveX 2s linear infinite;
}
.spinner:after {
  box-shadow: none;
  transform: translateX(64px) scale(1);
  z-index: 2;
  animation: none;
  animation: trfLoader 2s linear infinite;
}

header{
	position: fixed;
	display: flex;
	justify-content: center;
	height:63px;	
	z-index:12;
	top:0;
	left:0;
	right:0;
	text-align: center;
}

nav{
	display: flex;
	justify-content: center;
	align-items: flex-end;
	text-align: center;
	width:80%;
	height:100%;
	border-bottom: solid 2px var(--C7);
}

.Menu_Tagarea{
	width: 25%;
	padding-bottom:10px;
}

nav a{
	text-decoration: none;
	color: var(--C1);
	font-size: 16px;
	font-weight: bold;
}

nav a.active{
	color: var(--C9);
}

#Menu_Circle{
	content: '';
	display: block;
	position: relative;
	border: 1px solid var(--C1);
    width: 7px;
    height: 7px;
    border-radius: 100%;
	background: var(--C1);
	left:12.6%;
	transition: left 3s ease;
}



section {
	position: relative;
	min-height: 100vh;
}

.CONTAINER-100{
	width: 100%;
	min-height: 100vh;
	top:0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.CONTAINER-100.FIX{
	position: fixed;
}

h1{
	margin-bottom:10px;
}

#Home{
	min-height: 200vh;
	z-index: 0;
}

#viewport_1{
	z-index: 2;
}

#Background{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	z-index: 1;
	background: url(../img/B01_FHD2o3.jpg);
	background-position: 50% 50%;
	background-size: cover;
}

#canvas{
	position:relative;
	width: 100%; 
	height: 100%; 
}

#Sky{
	z-index: 6;
}

#Sky_Top, #Sky_Bottom{
	position: absolute;
	width: 100%;
}

#Sky_Top{
	top:0;
	height: 49%;
	background-image: url(../img/sky_top.png);
	background-size:auto 100%;
	background-repeat: repeat-x;
	background-position-y: top;
	animation: move-sky 60s ease-in-out alternate infinite;
}

#Sky_Bottom{
	bottom:0;
	height: 100%;
	background-image: url(../img/sky_bot.png);
	background-position-y: bottom;
	background-size: auto 50%;
	background-repeat: repeat-x;
	animation: move-sky 120s ease-in-out alternate infinite;
}

#DarkSet{
	z-index: 8;
	background-color: var(--C5);
	opacity: 0;
}

#Logo{
	position:absolute;
	top:25%;
	width: 60%;
	height: 7%;
	z-index: 4;
}

#Logo_text, #Logo_A{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;	
	width: 100%;
	height: 100%;
	transform: translateY(100px) scale(2);
	opacity: 0;	
}

#Logo_text{
	background: url(../img/Logo_Text.png) no-repeat center;
	background-size: auto 100%;
	transition-delay: 2s;	
	transition: 1s all ease;

}

#Logo_A{
	background: url(../img/Logo_AA.png) no-repeat center;
	background-size: auto 100%;		
	transform: translateY(100px) scale(2);
	transition: 2s all ease;
}

#Logo_text.active, #Logo_A.active{
  transform: translateY(0) scale(1.1);
  opacity: 1;
}

#Arraw_button1:hover{
	cursor: pointer;
}

.Arraw {
	position: fixed;
	width: 50px;
	height: 50px;
	text-align: center;
	background: var(--C6);
	border:solid 2px var(--C7);
	border-radius: 100%;
	left:0;
	right:0;
	margin: auto;
	bottom:40px;
	z-index:20;
}

.chevron {
	position: absolute;
	display: block;
	height: 50%;
	width: 65%;
	top:20%;
	left:0;
	right:0;
	margin: auto;
	opacity: 0;
	transform: scale(0.3);
	animation: move-chevron 3s ease-out infinite;
}

.chevron:before,
.chevron:after {
 content: '';
 position: absolute;
 top: 0;
 height: 15%;
 width: 50%;
 background: var(--C8);
}

.chevron:before {
 left: 0;
 transform: skewY(30deg);
}

.chevron:after {
 right: 0;
 transform: skewY(-30deg);
}

.chevron:first-child {
  animation: move-chevron 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
  animation: move-chevron 3s ease-out 2s infinite;
}

.Overlay-text{
position:absolute;
display:block;
z-index: 4;
padding:10px 0 10px 0;
width:50%;
border-radius: 10px;
opacity: 0;
visibility: hidden;
top:100%; 
transition: top 2.5s, opacity 2s, visibility 2s;
}

.Overlay-text.show {
	top:53%;	
	opacity: 1;
	visibility: visible;
}

.Overlay-text h1{
	margin-bottom:10px;
	color:var(--C1);
}
.Overlay-text p{
	color:var(--C2);
	font-weight: bold;
}

/******************************/

#About{
	z-index: 10;
	box-shadow: 0 10px 10px #333;
}

#Abouttext{
	position: sticky;
	bottom: 10%;
	top: 31%;
	text-align: center;
	line-height:2;
	margin-bottom:8px;
	padding-bottom:10px;
}

.text-container{
	display: flex;
	flex-direction: row;
	flex-wrap:wrap;
	justify-content: space-around;
	align-items: flex-start;
	line-height: 30px;
}

.text-container .text-box{
	width:300px;
	margin: 10px;
	text-align: center;
	background: var(--C8);
	border-radius: 0.2em;
	box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}

.text-box_top{
	margin:20px;
	padding-bottom:10px;
	border-bottom: solid 2px var(--C7);
}

.text-box_mid{
	margin: 0 20px 0 20px;
	padding-left: 20px;
	padding-bottom: 80px;	
	background-image: url(../img/TextBoxA2m.svg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 80% auto;
}

#linevertical{
	position:absolute;
	bottom:0;
	width:10px;
}

#linevertical::before{
	content: '';
	display: block;
	position:absolute;
	width: 8px;
    height: 8px;
	left:0;
	right:0;
	margin:auto;
    border-radius: 100%;
	background-color: var(--C1);
	
}

#linevertical::after{
	display:block;
	content:'';
	width:2px;
	height:100%;
	left:0;
	right:0;
	margin:auto;
	background-color:var(--C1);
}

#Services{
	z-index: 9;
	padding:5% 0 5% 0;
	color: var(--C2);
	background-image: url(../img/ROADS.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
}

#Services .CONTAINER-100{
	padding:0 10% 0 10%;
}

.Service_list{
	color: var(--C3);
	text-align: left;
	line-height:1.8;
}

#Contacts{
	z-index: 11;
	background: var(--C5);
	box-shadow: 0 -10px 10px #333;
	padding:0 10% 0 10%;
}

#Contacts h1{
	color:var(--C7);
}

#Contacts a{
	text-decoration: none;
	color:var(--C2);
}

#Contacts .text-box{
	text-align:left;
	color:var(--C4);
	background: none;
	box-shadow: none;
	min-width: 320px;
}

#Contacts span{
	color:var(--C2);
}

#Modal{
	z-index: 100; /* Sit on top */
	background-color: rgba(0,0,0,0);
	visibility:hidden;
}
#Modal.active{
	visibility:visible;
	background-color: rgba(0,0,0,0.7);
	transition: background-color 1s ease;	
}

.Modal-content{
	position: fixed;
	width:50%;
	padding:10px;
	margin:auto;
	color:var(--C7);
	background:var(--C1);
	border-radius: 5px;
}

#Mclose{
	position:absolute;
	display: block;
	width:30px;
	top:-30px;
    right:-30px;
    border-radius: 100%;
	background-color: var(--C2);
	text-align:center;
	line-height: 1;
	color: #000;
	font-size: 30px;
}
#Mclose:hover,
#Mclose:focus {
    cursor: pointer;
}

.google-map {
     padding-bottom: 50%;
     position: relative;
}

.google-map iframe {
     height: 100%;
     width: 100%;
     left: 0;
     top: 0;
     position: absolute;
}

#LT{
	width:100%;
	background-image: url(../img/LT.png);
	background-position: 50% 0;
	background-repeat: no-repeat;
	background-size: 270px;
	
}

.ic{
  display:  inline-block;
  vertical-align:  middle;
  padding: 0.9rem;
  margin-right:   0.3em;
}

.fc-logo{
	background: url(../img/LOGO.png);
	background-size: cover;
	width:65%;
	height:50px;
	margin-bottom:5px;
}

.fc-tel{
  background: url(../img/C_PHONE.svg);
  background-size: cover;
}

.fc-email{
  background: url(../img/C_MAIL.svg);
  background-size: cover;
}
.fc-adr{
  background: url(../img/C_LOCATION.svg);
  background-size: cover;
}

.fix_content{
margin-top:10%;
}

#footer{
	position: absolute;
	text-align: center;
	bottom:0;
	width:80%;
	height:30px;
	border-top: solid 2px var(--C7);
	font-size:0.7rem;
	line-height: 30px;
	color:var(--C2);
}

.reveal{
  position: relative;
  transform: translateY(100px);
  opacity: 0;
  transition: 2s all ease;
}
.reveal.active{
  transform: translateY(0);
  opacity: 1;
}

@media (max-width: 900px){
	#Logo{
		width: 70%;
		height: 9%;
	}

	.Overlay-text{
		width:80%;
	} 	
	
	.text-container{
		flex-direction: column;
	}
  
	.Modal-content{
		position: fixed;
		width:80%;
	}  

    nav a{
	font-size: 14px;
    }
}

@keyframes move-sky {
	0% {background-position-x:0;}
	100% {background-position-x:100%;}
}

@keyframes move-chevron {
 25% {
  opacity: 1;
	}
 33.3% {
  opacity: 1;
  transform: translateY(5px);
 }
 66.6% {
  opacity: 1;
  transform: translateY(20px);
 }
 100% {
  opacity: 0;
  transform: translateY(25px) scale(0.5);
 }
}

@keyframes trfLoader {
  0% , 5%{
    transform: translateX(64px) scale(1);
    background: var(--C7);
  }
  10%{
    transform: translateX(64px) scale(1);
    background: var(--C7);
  }
  40%{
      transform: translateX(32px) scale(1.5);
      background: var(--C7);
    }
  90%, 95% {
    transform: translateX(0px) scale(1);
    background: var(--C7);
  }
  100% {
    transform: translateX(0px) scale(1);
    background: #aaa;
  }
}
@keyframes ballMoveX {
  0% , 10%{  transform: translateX(0) }
  90%, 100% { transform: translateX(32px) }
}