h1 {text-align: center;color: #111328;padding: 1em 0;font-size: 200%;font-weight: 700; background-color:#111328;}
#Content {padding: 46px 0 0 0; overflow:hidden;}


#Services,#Blog,#News,#FAQ,#About {padding:3em 2%;}
#About,#Blog {background: #20233e;}

#Services > div,#Blog > div,#News > div{display:inline-block;width: 22%;margin: .5%;padding: 1%;color: #f8f9ff;  border-radius:5px;}
#Services > div > h2,#Blog > div > h3,#News > div > h3 {height: 2em;text-align: center}
#Services > div > h2 > a,#Blog > div > h3 > a,#News > div > h3 > a {color: #f4a302;font-weight: 400;font-size: 85%}
#Services > div > a,#Blog > div > a,#News > div > a {display: block;color: #111328; margin:15%; border-radius:50%; overflow:hidden; transition:.6s;}
#Services > div:hover>a,#Blog > div:hover>a,#News > div:hover>a {box-shadow: 0 0 5px #111328;border-radius:5px;}
#Services > div > a > img,#Blog > div > a > img,#News > div > a > img {display: block;width: 100%;height: auto}
#Services > div > p,#Blog > div > p,#News > div > p {height: 9em;font-size: 85%;line-height: 130%;text-align: justify;overflow: hidden}
#Services > div > div,#Blog > div > div,#News > div > div {text-align: center;font-weight: 700;font-size: 1.3em}



#About a {color: #f4a302;}
#Gallery {float: left;width: 44%;padding: 2%;text-align: center;}
#Gallery > a{display:inline-block; width:23%; margin:1%;}
#Gallery > a img{display:block;width:100%;}
#Gallery > a:first-child, #Gallery > a:first-child > img {width: 100%;display: block;margin:0 0 1% 0;}
#About > article {float: right;width: 50%;  text-align:justify; font-size:95%;}

#FAQ>section {background-color:#111328;width: 19%;margin: .25%; padding:.25%;display:inline-block;overflow: hidden;position: relative;}
#FAQ > section:hover > article {opacity: 1;transform: scale(1) rotate(0deg);transition-delay: 0.2s;}
#FAQ>section:hover img {transform: scale(0);opacity: 0;transition-delay: 0s;}
#FAQ>section:hover h3,#FAQ>section:hover p{opacity: 1;transition-delay: 0.5s;}
#FAQ>section>article{height:auto;position: absolute;overflow: hidden;top: 0;left: 0;right:0; bottom:0;opacity: 0;transform: scale(0) rotate(-180deg);transition: all 0.4s ease-in;padding:2%; background-color:#f4a302; border-radius:3px;}
#FAQ>section img {transition: all 0.4s ease-in-out 0.2s;opacity: 1;display: block;position: relative;border-radius:5px;width: 100%;height:auto;}
#FAQ>section h3{text-align:center; border-radius:5px;color: #FFCC99;position:absolute;bottom:2%; right:2%; left:2%;padding: 10px 0;margin: 0;font-weight:700;background:#111328;opacity:0;transition: all 0.5s ease-in-out;}
#FAQ>section p {color: #111328;padding: 0 10px 5px 10px ;text-align:justify;opacity: 0;transition: all 0.5s ease-in-out; font-size:100%; line-height:130%;}
#FAQ>section figure {transition: all 0.4s ease-in-out 0.2s;filter: alpha(opacity=100);opacity: 1;position:relative;}
#FAQ > section:hover figure {transform: scale(0);opacity: 0;transition-delay: 0s;}
#FAQ figcaption {position: absolute;bottom: 0;right: 0;width: 100%;background-color: rgba(0,0,0,.7);z-index: 99;padding: 2%;color: #fff;text-align:center;}
@media only screen and (min-width:1px) and (max-width:1023px) {
#Services > div, #Blog > div, #News > div {display:block;width: 90%; margin:2.5%; background-color:#111328; padding:1% 2.5%;}
#Services > div > a,#Blog > div > a,#News > div > a {color: #111328; margin:5% 15%; border-radius:0%; overflow:hidden; transition:.6s;}
#Services > div > p, #Blog > div > p, #News > div > p{height:auto;}
#Services > div:hover > a, #Blog > div:hover > a, #News > div:hover > a {box-shadow: none;border-radius: 0;}
#About > article {float: none;width: 100%;font-size: 85%;}
#Gallery {float: none;width: 96%;padding: 2%; text-align:center;}
#Gallery > a {width: 48%;}
#FAQ > section{display:block;width:68%; font-size:75%; margin:1% auto;}
}