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

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

@font-face {
    font-family: Impact; src: url(Impact.ttf);
}
@font-face {
	font-family: Calibril; src: url(CALIBRIL.ttf);
}


/* -------- Container -------- */

#container{
	width: 100%; display: none; float: left;
}
h1, h2{
	font-family: Impact; font-weight: 400; letter-spacing: .5px;
	color: rgb(254,144,0); opacity: 0; position: relative; 
    animation: fade-slide 1s; animation-fill-mode: forwards;  animation-delay: 0.5s;
}
h1 {
	font-size: 40pt;
}
p {
	font-family: Calibril; font-weight: 400; letter-spacing: .5px; opacity: 0;
	animation: fade-text 1s; animation-delay: 0.3s; animation-fill-mode: forwards; 
	animation-delay: 0.5s;
}
a {
	font-family: Calibril; font-size: 16pt; font-weight: 400;
	letter-spacing: .5px;
}


/* -------- Spill -------- */

#spill {
	width: calc(100% - 600px); margin: 70px 300px; float: left;
}

#spill p {
	font-size: 16pt;
}
#spill a {
	color: rgb(254,144,0); transition: 0.2s; font-weight: 600;
}
#spill a:hover {
	color: black;
}


/* -------- opt -------- */

#opt {
	width: 1300px; padding: 70px calc(50% - 650px);
	background-color: gainsboro; float: left;
}
#opt li {
	width: calc(33.33% - 30px); height: 400px; margin: 0 15px;
	background-size: cover; background-repeat: no-repeat;
	background-position: center; display: inline; float: left;
}
#opt li h2 {
	margin: 25px 75px; font-size: 32pt; color: rgb(255,161,21);
	transition: .2s;
}
#opt li p {
	padding: 15px 75px; font-size: 14pt; color: white;
	background-color: rgba(0,0,0,0.7); transition: .2s;
}
#opt a {
	margin: 35px 75px; padding: 15px 20px; font-size: 14pt;
	color: white; background-color: rgba(61,148,255,0.7);
	text-align: center; display: block; transition: .2s; 
}
#opt a:hover {
	background-color: rgb(61,148,255);
}


/* -------- opt-exp-------- */

#opt-exp {
	width: 100vw; height: 100vh; position: fixed;
	top: 0; background-color : rgba(0,0,0,0.7); opacity: 0; z-index: -1;
}
#opt-exp-cont {
	width: 1000px; height: 600px; padding: 50px 100px;
	margin: 50px calc(50% - 600px); background-color: white;
}

#opt-exp-cont h1 b {
	padding: 15px; position: absolute; right: -45px;
	top: -20px; font-size: 30pt; font-weight: 400; color: firebrick;
}
#opt-exp-cont h1 b:hover {
	box-shadow: 5px firebrick; cursor: pointer;
}

#opt-exp-cont li {
	margin: 0 0 15px; list-style-type: decimal; list-style-position: inside;
}
#opt-exp-cont li::marker {
	font-family: Impact; font-size: 24pt; font-weight: 400;
}

#opt-exp-cont h2 {
	color: black; font-size: 24pt; margin: 10px 0 0; display: inline-block;
}
#opt-exp-cont p {
	font-size: 16pt;
}


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

@media screen and (max-width:1680px){
	
#container{
	margin: 60px 0 0 0 ;
}

}


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

@media screen and (max-width:1200px){
	
#container {
	margin: 105px 0 0 0 ;
}



#spill h1 {
	margin: 25px 50px 0 50px;
}
#spill p {
	font-size: 16pt;
	margin: 5px 50px 25px 50px;
}

/* -------- opt -------- */

#opt li {
	width: 100%; height: 350px;
}
#opt li h1 {
	margin: 25px 50px; font-size: 32pt;
}
#opt li p {
	padding: 15px 50px;	font-size: 18pt;
}
#opt li a {
	margin: 15px 50px; font-size: 18pt;
}

}


/* --------------------------- Mob sized screens -------------------------- */

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

#container {
	margin: 0;
}

/* -------- Spill -------- */

#spill {
	width: 90%; margin: 60px 5% 25px 5%;
}
#spill h1 {
	margin: 15px 0 0 0;
	font-size: 28pt;
}
#spill p {
	margin: 10px 0 0;
}


/* -------- opt -------- */

#opt {
	width: 100%; padding: 40px 0;
}

#opt li {
	width: calc(100% - 30px); margin: 5px 15px;
}
#opt li h2 {
	margin: 25px 0; text-align: center;
}
#opt li p {
	width: calc(100% - 80px); margin: 0;
	padding: 15px 40px; font-size: 14pt;
}


/* -------- opt-exp-------- */

#opt-exp-cont {
	width: calc(90vw - 40px); height: 85vh; padding: 25px 20px;
	margin: 25px 5%;
}

#opt-exp-cont h1 {
	font-size: 30pt;
}
#opt-exp-cont h1 b {
	right: -10px; top: -16px;
}

#opt-exp-cont li {
	margin: 0;
}
#opt-exp-cont li::marker {
	font-size: 18pt;
}

#opt-exp-cont h2 {
	margin: 10px 0 0; font-size: 18pt;
}
#opt-exp-cont p {
	font-size: 12pt;
}

}


/* Animation */

@keyframes sel1-slide {
    from {top: 40%;
	z-index: -2;
	opacity: 0;
	}
    to {top: 0px;
	z-index: 0;
	opacity: 1;
	}
}

@keyframes fade-slide {
    from {left: -10%; 
	opacity: 0;
	}
    to {left: 0px;
	opacity: 1;
	}
}

@keyframes fade-text {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fade-up {
    from {top: 10%;
	opacity: 0;
	}
    to {top: 0px;
	opacity: 1;
	}
}

@keyframes rexpand{
  0%{
	transform: scale(1);
  }
  
  50%{
	transform: scale(1.15);
  }

  100%{
    transform: scale(1);
  }

}