/* ---------------------- A.Cooling & Heating Aircon 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);
}

h1, h2, h3 {
	font-family: Impact; font-weight: 400; letter-spacing: 1.5px;
	color: black; position: relative; opacity: 0; animation: fade-slide 1s;
	animation-fill-mode: forwards; animation-delay: 0.5s;
}
h2 {
	margin: 15px 0 0; font-size: 32pt;
}
h3 {
	font-size: 20pt; color: black;
}

p {
	font-family: calibril; font-size: 14pt; font-weight: 400; letter-spacing: .5px;
	opacity: 0; animation: fade-text 1s; animation-delay: 0.7s; animation-fill-mode: forwards;
}
a {
	font-family: calibril; font-size: 18pt; font-weight: 400;
	letter-spacing: .5px; color: black; opacity: 0; animation: fade-text 1s;
	animation-delay: 0.7s; animation-fill-mode: forwards;
}


#container {
	width: 100%; float: left;
}


/* -------- Slideshow container -------- */

#slideshow-container {
	width: 100%; height: 800px; position: relative;
	float: left; text-align: center;
}

.mySlides{
	width: 100%; height: 100%; background-size: cover;
	background-repeat: no-repeat; background-position: center;
	float: left; text-align: center;
}


#promo {
	width: 70%; position: absolute; top: 200px; color: white;
    background: rgba(0,0,0,0.5); text-align: right; transition: .5s;
}

#promo h1{
	margin: 15px 50px 0 0; color: rgb(255,161,21);
	font-size: 36pt; transition: .5s;
}
#promo p {
	margin: 0 50px 15px 0; color: white; font-size: 14pt;
}

#promo a{
	margin: 7.5px 0 0 0; padding: 10px 25px; background-color: rgba(212,252,125,0.7);
	text-align: center; display: inline-block; transition: background-color .2s;
}
#promo a:hover{
	background-color: rgb(212,252,125);
}


/* -------- Next & Previous buttons -------- */

.prev, .next {
	margin: 25px; position: absolute; top: 40%; color: rgb(255,161,21,0.6);
	font-size: 50pt; font-weight: 400; cursor: pointer; transition: color .5s;
}


.next {
	right: 0;
}
.prev {
	left: 0;
}


.prev:hover, .next:hover {
	color: rgb(255,161,21);
	transition: color .2s;
}


/* ------- The dots/bullets/indicators ------- */

#dot-conatiner {
	width: 100%; position: relative; top: -35px;
	text-align: center; float: left; transition: .5s;
}

.dot {
	height: 13px; width: 13px; margin: 0 5px;
	background-color: rgba(255,161,21,0.6); border-radius: 50%;
	display: inline-block; cursor:pointer; transition: background-color 0.6s ease;
}


/* Fading animation */

.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 7.5s;
	animation-name: fade;
	animation-duration: 7.5s;
}


@-webkit-keyframes fade {
  0%{
    opacity: 0.1;
  }

  20%{
    opacity: 1;
  }

  80%{
    opacity: 1;
  }

  100%{
    opacity: 0;
  }
}

@keyframes fade{
  0%{
    opacity: 0.1;
  }

  20%{
    opacity: 1;
  }

  80%{
    opacity: 1;
  }

  100%{
    opacity: 0;
  }

}



/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {
  .slprev, .slnext,.text {font-size: 11px}
}


/* ------- Context ------- */

#context-container {
	width: 800px; height: 260px; background-color: rgba(0,0,0,0.6);
	position: relative; top: -260; display: inline-flex;
	
}

#context {
	width: 100%; float: left;
}
#context p{
	margin: 15px 50px 0 50px; font-size: 18pt; color: white;
}
#context h1{
	margin: 0 50px 20px 50px; font-size: 22pt; color: white;
}

#brands {
	width: 100%; margin: 0 0 25px 0; text-align: center;
	float: left;
}
#brands img {
	width: 75px; margin: 0 15px; display: inline-flex;
	transition: 0.2s;
}
#brands img:hover {
	animation: rexpand 1.2s infinite; cursor: pointer;
}


/* -------- new -------- */

#new {
	width: 100%; height: 350px; text-align: center;
	transition: .2s; float: left; overflow: hidden;
}

#new h1 {
	width: 100%; margin: 45px 0; font-size: 48pt;
	opacity: 1; animation: expand 2s infinite;
}
#new h2 {
	font-size: 32pt;  color: rgb(255, 161, 21);
}

#new a {
	margin: 15px 0 0; padding: 15px 35px; font-size: 18pt;
	color: white; background-color: rgba(61,148,255,0.7);
	display: inline-block; transition: .2s;
}
#new a:hover {
	background-color: rgb(61,148,255); cursor: pointer;
}


/* -------- reviews -------- */

#reviews {
	width: calc(100% - 600px); margin: 30px 300px 0 300px; float: left;
}
#reviews h2 {
	text-align: center;
}

#reviews span {
	width: calc(100% - 333px); min-height: 52px; margin: 0 25px; padding: 15px 10px;
	position: relative; border: solid 1px rgb(200, 200, 200); float: left;
}
#reviews span:before {
	width: 0; border-bottom: 13px solid transparent; border-right: 18px solid #c4c6ca;
	border-top: 13px solid transparent; content: ""; height: 0; position: absolute; right: 100%; top: 26px;
}
#reviews span:after {
	width: 0; border-bottom: 13px solid transparent; border-right: 18px solid #fff;
	border-top: 13px solid transparent; content: ""; height: 0; left: -16px; position: absolute; top: 26px;
}

#reviews i {
	display: none;
}


/* -------- 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); cursor: pointer;
}


/* -------- 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: 1200px; height: 700px; margin: 50px calc(50% - 635px);
	padding: 70px; background-color: white;
}

#opt-exp-cont li {
	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 h1 {
	color: rgb(255,161,21); font-size: 34pt;
}

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

#opt-exp-cont h2 {
	margin: 15px 0 0 10px; display: inline-block;
}


/* ------- Diagram ------- */

#diagram {
	width: calc(100% - 600px); margin: 30px 300px 0 300px;
	float: left;
}
#diagram li {
	width: 250px; margin: 0 20px 0; float: left;
	text-align: center;
}
#diagram li img {
	width: 130px; margin: 0 35px;
}
#diagram li:nth-of-type(1) img {
	position: relative; left: 10px;
}


/* ------- Conclusion ------- */

#conclusion {
	width: calc(100% - 600px); margin: 30px 300px 0 300px;
	float: left;
}
#conclusion p {
	font-size: 14pt; margin: 10px 0 0;
}


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

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

#new {
	height: 400px;
}


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

#opt li {
	height: 350px;
}
#opt li h1 {
	margin: 15px 50px; font-size: 30pt;
}
#opt li p {
	margin: 15px 50px; font-size: 15pt;
}
#opt a {
	margin: 15px 50px; font-size: 16pt;
}

}





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

@media screen and (max-width:1200px){
	
#slideshow-container {
	height: 750px;
}

#promo {
	width: 75%;
}
#promo h1{
	font-size: 32pt;
}


#context-container {
	width: 100%;
}


/* -------- new -------- */

#new {
	height: 350px;
}
#new h1 {
	font-size: 36pt;
}


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

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


/* -------- 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;
}

}



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

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


/* -------- Slideshow container -------- */

#slideshow-container {
	height: 80%;
}

.prev, .next {
	top: 25%; font-size: 40pt;
}


/* ------- promo ------- */

#promo {
	width: 100%; top: 75px;
}
#promo h1{
	margin: 15px 50px 0 0; color: rgb(255,161,21); font-size: 18pt;
}
#promo p {
	margin: 0 50px 15px 15px; color: white; font-size: 12pt;
}


/* ------- Context ------- */

#context-container {
	width: 100%;
}

#content {
	width: 100%; float: left;
}
#context p{
	margin: 15px 15px 5px 15px; font-size: 16pt;
}
#context h1{
	margin: 0 15px 20px 15px; font-size: 18pt;
}

#brands {
	width: 100%; margin: 0 0 25px 0; text-align: center;
	float: left;
}
#brands img {
	width: 60px;
}
#brands img:hover {
	transform: scale(1.1);
}


/* -------- new -------- */

#new {
	height: auto; margin: 0 0 15px;
}
#new h1 {
	margin: 45px 0; font-size: 24pt;
}



/* -------- reviews -------- */

#reviews {
	width: 90%; margin: 0 5%;
}

#reviews h2 {
	margin: 20px 0; font-size: 24pt;
}

#reviews li {
	width: 100%; margin: 0 0 25px; display: inline-block;
}

#reviews li div {
	margin: 2px 20px 0 0; float: left;
}
#reviews li:nth-child(odd) div {
	float: right; margin: 2px 0 0 20px;
}

#reviews li b {
	width: 110px; height: 75px; padding: 10px 5px; background-color: gainsboro;
	border-radius: 40px; text-align: center; box-shadow: 3px 3px 8px rgba(0,0,0,0.2);
	display: table-cell; vertical-align: middle;
}


#reviews li span {
	width: calc(100% - 162px); padding: 10px; margin: 0;
}
	
#reviews li p {
	display: -webkit-box; -webkit-box-orient: vertical;
	-webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;
}


#reviews li:nth-child(odd) span:before {
	left: 100%; transform: rotate(180deg);
}
#reviews li:nth-child(odd) span:after {
	right: -16px; left: initial; transform: rotate(180deg);
}

#reviews i {
	margin: 5px 15px; color: rgb(255,161,21); display: block;
}

/* -------- 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 li::marker {
	font-size: 18pt;
}

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

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


/* -------- diagram/conclusion -------- */

#diagram, #conclusion {
	width: 90%; margin: 0 5%;
}

#diagram {
	padding: 40px 0;
}

#diagram h2, #conclusion h2 {
	font-size: 21pt;
}
#diagram h2 {
	text-align: center;
}

#diagram li {
	width: 100%; margin: 0 0 15px;
}
#diagram li img {
	width: 100px;
}

}





/* Animation */

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

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

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

@keyframes wipe {
    from {width: 0;}
    to {width: 50%;}
}



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

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

  100%{
    transform: scale(1);
  }

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

  100%{
    transform: scale(1);
  }

}