/* ---------------------- A.Cooling & Heating Header CSS ---------------------- */

/* ------ Removal of default padding, margin & list style ------ */

*{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	text-decoration: none;
}
html{
	min-height: 100%;
	position: relative;
}
#l-sn {
	width: 100%; height: 100vh; position: absolute; top: 0;
	background-color: rgb(81,174,238); text-align: center; z-index: 5;
}
#l-sn p{
	position: relative; top: 40%; font-family: arial; font-size: 26pt;
	font-weight: 600; color: white; animation: prefade 2s infinite;
}

#ani-cont{
	width: 100%; height: 100px; margin: 50px 0 0 0; 
	text-align: center; position: relative; top: 40%;
}
#left-cont {
	width: 200px;
	height: 25px;
	display: inline-block;
	animation: drawArc1 1s linear infinite;
}
#left {
	display: inline-block;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background-color: white;
}


#right {
	display: inline-block;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background-color: white;
}
#center {
	display: inline-block;
	width: 25px;
	height: 25px;
	margin: 0 15px;
	border-radius: 50%;
	background-color: white;
	animation: expand 1s infinite; 
}


/* -------- nav -------- */

nav {
	width: 100%; height: 70px; top: 0px;
	background-color: rgba(0,0,0,0.7); transition: .5s;
}

#nav-ico {
	width: 30%; height: 70px; float: left; 
}
#nav-ico img{
	height: 70px; transition: .5s;
}


#nav-sel {
	width: 60%; height: 70px; margin: 0 5% 0 5%;
	float: right; 
}

#nav-sel a {
	width: 16.66%; padding: 17.5px 0; font-size: 14pt;
	letter-spacing: 2.5px; font-family: calibril; color: white;
	transition: color .2s; text-align: center; float: left;
	transition: .5s;
}
#nav-sel a:hover{
	color:rgb(212,252,125);
}


/* -------- Hide Side Nav -------- */

#nav-tab {
	display:none;
}
#side-nav {
	display: none;
}


/* --------------------------- Medium sized screens -------------------------- */

@media screen and (max-width:1680px){
	
/* -------- nav -------- */

nav {
	height: 60px;
	transition: .5s;
}

#nav-ico {
	height: 60px;
}
#nav-ico img{
	height: 60px;
}

#nav-sel {
	height: 60px;
}
#nav-sel a {
	font-size: 13pt;
}

}


/* --------------------------- Tablet sized screens -------------------------- */

@media screen and (max-width:1200px){
	
/* -------- nav -------- */

#nav-ico {
	width: 100%;
}

#nav-sel {
	width: 100%;
	margin: 0;
	height: 45px;
	background-color: rgba(254,144,0,0.6);
	transition: .5s;
}
#nav-sel a {
	padding: 10px 0;
	font-size: 11pt;
}

}


/* --------------------------- Mobile sized screens -------------------------- */

@media screen and (max-width:680px){

/* -------- Hide Nav -------- */

nav {
	display: none;
}


#nav-tab {
	width: 100%;
	height: 50px;
	position: absolute;
	top: 0px;
	z-index: 2;
	background-color: rgba(0,0,0,0.3);
	display: block;
}


#side-btt {
	display: block;
	margin: 0 0 0 10px;
	position: relative;
	top: -5px;
	font-size: 28pt;
	font-weight: 600;
	color: white;
	cursor: pointer;
	float: left;
}
#side-ico img{
	height: 40px; margin: 5px 0;
}

/* -------- Side Nav -------- */

#side-nav {
	height: 100%;
	width: 0;
	padding-top: 60px;
	position: fixed;
	top: 0;
	left: 0;
	background-color: black;
	overflow-x: hidden;
	display: block;
	transition: width 0.5s;
	z-index: 2;
}
#side-nav a {
	width: 210px;
	padding: 12px 8px 12px 32px;
	font-size: 25px;
	font-family: arial;
	overflow-x: hidden;
	color: gray;
	text-decoration: none;
	display: block;
	transition: color 0.3s;
}
#side-nav a:hover{
	color: white;
}


#cover {
	height: 100%;
	width: 0;
	position: fixed;
	top: 0;
	left: 0;
	transition: background-color .5s;
	z-index: 1;
}


#acc-mob {
	display: block;
	width: 10%;
	float: left;
}
#acc-mob a{
	font-size: 30pt;
	text-decoration: none;
}



/* -------- Background -------- */

#background {
	height: 60px;
}

#closebtn {
	position: absolute;
	top: 0;
	left: 175px;
	font-size: 36px;
}

}



@keyframes prefade{
  0%{
    opacity: 0;
  }

  50%{
    opacity: 1;
  }

  100%{
    opacity: 0;
  }

}

@keyframes zoom{
  0%{
    opacity: 0;
  }

  50%{
    opacity: 1;
  }

  100%{
    opacity: 0;
  }

}

@keyframes expand{
  0%{
	transform: scale(1);
  }

  15%{
	transform: scale(1);
  }
  
  50%{
	transform: scale(1.4);
  }
  
  65%{
	transform: scale(1.4);
  }

  100%{
    transform: scale(1);
  }

}

@keyframes drawArc1 {
  0%{
	transform: rotate(0deg);
  }
  15%{
	transform: rotate(0deg);
  }
  40%{
	transform: rotate(160deg);
  }
  50%{
	transform: rotate(180deg);
  }
  65%{
	transform: rotate(180deg);
  }
  90%{
	transform: rotate(340deg);
  }
  100%{
    transform: rotate(360deg);
  }
}