/* ---------------------- A.Cooling & Heating Aircon Products 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);
}
@font-face {
    font-family: calibri;
    src: url(CALIBRI.ttf);
}

h1 {
	font-family: Impact;
	font-weight: 400;
	letter-spacing: 1.5px;
	color: rgb(254,144,0);
	position: relative;
	opacity: 0;
	animation: fade-slide 1s;
	animation-fill-mode: forwards;
	animation-delay: 0.5s;
}
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: 16pt;
	font-weight: 400;
	letter-spacing: .5px;
	opacity: 0;
	animation: fade-text 1s;
	animation-delay: 0.7s;
	animation-fill-mode: forwards;
}


#container {
	width: 100%;
	margin: 70px 0 40px 0;
	transition: .5s;
	display: flex;
	float: left;
	background-color: rgb(245,245,245);
}


#side-menu {
	width: 250px;
	height: 150px;
	margin: 30px 0 30px 15px;
	background-color: gray;
	float: left;
}
#side-form, input[type=submit]  {
	margin: 15px;
	font-family: calibril;
	font-size: 14pt;
	font-weight: 400;
	letter-spacing: .5px;
}
input[type=submit] {
	padding: 2.5px 7.5px;
}



#product-container {
	margin: 0 2.5%;
	width: 80%;
}
#product-container h1{
	margin: 25px 0 0 0;
}
#selection {
	width: 100%;
}

#selection  li{
	width: 300px;
	height: 300px;
	margin: 15px 25px 0 0;
	background-color: white;
	box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
	float: left;
	text-align: center;
}
#selection  li img{
	width: 70%;
	margin: 0 15%;
	float: left;
}
#selection  li h2{
	margin: 5px 15px;
	font-family: calibri;
	font-size: 14pt;
	text-align: center;
}
#selection  li a {
	margin: 10px 1px 0 0;
	display: inline-block;
	font-family: calibri;
	font-size: 14pt;
	padding: 5px 10px;
	color: white;
	transition: .3s;
}

#purchase {
	background-color: rgba(254,144,0,0.8);
}
#purchase:hover{
	background-color: rgb(254,144,0);
}
#learn {
	background-color: rgba(61,148,255,0.8);
}
#learn:hover {
	background-color: rgb(61,148,255);
}


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

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

#container {
	margin: 60px 0 75px 0;
	transition: .5s;
}

}


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

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

#side-menu {
	display: none;
}

#product-container {
	width: 95%;
}

}


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

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

#container {
	margin: 50px 0 75px 0;
}

#product-container {
	width: 90%;
	margin: 0 5% 75px 5%;
}
#product-container h1{
	margin: 15px 0 0 0;
}

#selection  li{
	width: 50%;
	height: 220px;
	margin: 15px 0 ;
	background-color: white;
	box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
	float: left;
	text-align: center;
}
#selection  li h2{
	font-size: 12pt;
	margin: 5px;
}
#selection  li a{
	padding: 2.5px 10px;
	margin: 5px 1px 0 0;
	font-size: 12pt;
}

}





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