@charset "UTF-8";



/*****************************************************
*****   Home   ***************************************
*****************************************************/
/* Hero Banner */
#home .hero {height:auto; position:relative;}
#home .hero:after {background:linear-gradient(145deg,rgba(0,0,0,0.5), transparent); content:""; display:block; height:100%; left:0; position:absolute; top:0; width:100%;}
#home .hero hgroup {margin:0 auto; position:absolute; width:100%; z-index:1;}
@media screen and (max-width:1024px) {
    #home .hero hgroup {padding:100px;}
    #home .hero hgroup h1 {font-size:3.6rem;}
    #home .hero hgroup h2 {font-size:2.2rem; margin-top:12px;}
}
@media screen and (max-width:480px) {
    #home .hero .slideshow {height:100%;}
    #home .hero .slideshow img {object-fit:cover; height:100%;}
}

/* Featured Services */
#home .services {border-bottom:1px solid #ddd; margin:50px 0 0; padding:0 0 50px; text-align:center;}
#home .services h4 {color:#999; margin:25px 0 0;}
#home .services ul {display:flex; flex-wrap:wrap; justify-content:space-evenly;}
#home .services li {margin:50px 0 0; min-width:250px; width:calc(33% - 50px);}
#home .services img {margin:auto; width:60%;}
#home .services h5 {font-size:2.1rem; margin:25px 0 0;}
#home .services h6 {margin:12px 0 0;}
#home .services .button {margin:25px auto 0;}

/* Featured Projects */
#home .projects {margin:50px 0 0; text-align:center;}
#home .projects h4 {color:#999; margin:25px 0 0;}
#home .projects ul {display:flex; flex-wrap:wrap; justify-content:center;}
#home .projects li {margin:50px 12px 0; min-width:180px; width:20%;}
#home .projects li a {display:block;}
#home .projects li a:hover img {opacity:0.5;}
#home .projects img {margin:0 auto; width:85%;}
#home .projects h5 {margin:25px 0 0;}
#home .projects h6 {margin:12px 0 0;}
@media screen and (max-width:480px) {
    #home .projects li {width:75%;}
}



/*****************************************************
*****   About   **************************************
*****************************************************/
/* Certifications */
#certifications .content ul {display:flex; flex-wrap:wrap; justify-content:center; margin:0 auto; max-width:1024px; text-align:center;}
#certifications .content li {flex:0 0 17.5%; flex-wrap:wrap; margin:25px 25px 0; min-width:180px;}
#certifications .content img {margin:0 auto; width:90%;}
#certifications .content h4 {font-size:inherit; line-height:inherit; margin:25px 0 0;}

/* Company */
#company .details img {float:left; margin:0 25px 25px 0; width:auto;}

/* Team */
#team .content li {border-top:1px solid #ddd; clear:both; padding:25px 0;}
#team .content li:first-child {border:0; padding-bottom:50px;}
#team .content li:last-child {padding-top:50px;}
#team .content img {float:left; margin:0 25px 25px 0; width:115px;}
#team .content h5 {color:#999; margin:10px 0 0;}
#team .skills {display:flex; flex-direction:row; justify-content:space-between; margin:25px 0 0;}
#team .skills h6 {color:#999;}
#team .education {width:calc(50% - 25px);}
#team .certifications {border-right:1px solid #ddd; width:calc(50% - 25px);}



/*****************************************************
*****   Services   ***********************************
*****************************************************/
/* Details */
#services .details img {float:left; margin:0 25px 25px 0; width:200px;}
#services .details h4 {font-size:inherit; margin:25px 0 0;}
#services .details ul {margin:25px 0 0 25px;}
#services .details li {margin:10px 0 0;}
#services .details li:before {color:#9e0b0f; content:"✓"; font-size:2.8rem; font-weight:700; margin:0 12px 0 0; vertical-align:middle;}
#services .details b {color:#999; font-weight:400; position:relative; top:7px;}
@media screen and (max-width:480px) {
    #services .details img {float:none; margin:25px auto 0; width:75%;}
    #services .details li {margin-top:25px;}
}

/* Projects */
#services .projects {border-top:1px solid #ddd; margin:50px 0 0; text-align:center;}
#services .projects h4 {margin:25px 0 0;}
#services .projects ul {display:flex; flex-wrap:wrap; justify-content:center;}
#services .projects li {margin:25px 12px 0; min-width:180px; width:29%;}
#services .projects a {display:block;}
#services .projects a:hover img {opacity:0.5;}
#services .projects img {margin:0 auto}
#services .projects h5 {margin:25px 0 0;}
#services .projects h6 {margin:12px 0 0;}
@media screen and (max-width:650px) {
    #services .projects li {width:75%;}
}



/*****************************************************
*****   Projects   ***********************************
*****************************************************/
/* Images */
#projects .images {display:flex; justify-content:space-between; margin:25px 0 0;}
#projects .main {width:calc(90% - 25px);}
#projects .thumbs {width:10%;}
#projects .thumbs li {cursor:pointer; margin:25px 0 0;}
#projects .thumbs li:first-child {margin:0;}
#projects .thumbs li.active  {cursor:default; opacity:0.5;}
#projects .thumbs li:hover {opacity:0.5;}
@media screen and (max-width:650px) {
    #projects .images {flex-direction:column;}
    #projects .main {width:100%;}
    #projects .thumbs {display:flex; margin:12px 0 0; width:100%;}
    #projects .thumbs li {margin:0 0 0 12px; max-width:75px; min-width:50px; width:20%;}
}

/* Details */
#projects .details {margin:25px 0 0;}
#projects .details hgroup {column-count:2; column-gap:25px; margin:25px 0 0;}
#projects .details h4 {color:#5a5a5a; font-size:1.6rem; margin:6px 0 0;}
#projects .details h4 b {color:#999; font-weight:400;}
#projects .details h5 {color:#999; font-size:1.6rem; margin:25px 0 0;}
#projects .details p {margin:12px 0 0;}

/* Related Projects */
#projects .related {border-top:1px solid #ddd; margin:50px 0 0; text-align:center;}
#projects .related h4 {margin:25px 0 0;}
#projects .related ul {display:flex; flex-wrap:wrap; justify-content:center;}
#projects .related li {margin:25px 12px 0; min-width:180px; width:29%;}
#projects .related a {display:block;}
#projects .related a:hover img {opacity:0.5;}
#projects .related img {margin:0 auto}
#projects .related h5 {margin:25px 0 0;}
#projects .related h6 {margin:12px 0 0;}
@media screen and (max-width:650px) {
    #projects .related li {width:75%;}
}



/*****************************************************
*****   Contact   ************************************
*****************************************************/
#contact h3 {border-bottom:1px solid #ddd; margin:50px 0 0; padding:0 0 25px;}

/* Info */
#contact .info {margin-top:25px;}
#contact .contact-info {width:calc(25% - 25px);}
#contact .contact-info > div {margin:25px 0 0;}
#contact .contact-info > div:first-child {margin-top:0;}
#contact .contact-info p {margin-top:0;}
#contact .contact-info a {color:inherit;}
#contact .contact-info a:hover {color:#9e0b0f;}
@media screen and (max-width:1023px) {
    #contact .info {flex-direction:column;}
    #contact .contact-info {width:100%;}
}

/* Map */
#contact .map {width:calc(75% - 25px);}
#contact iframe {background:#e8e8e8; border:1px solid #ddd; height:450px; width:100%;}
@media screen and (max-width:1023px) {
    #contact .map {margin-top:25px; width:100%;}
}



/*****************************************************
*****   Plan Room   **********************************
*****************************************************/
#planroom h3 {border-bottom:1px solid #ddd; margin:50px 0 0; padding:0 0 25px;}
#planroom .icons {display:flex; flex-wrap:wrap; justify-content:center; margin:0 auto; max-width:1024px;}
#planroom .icons li {background:url("../images/design/icon-planroom.jpg") no-repeat; background-size:cover; border:1px solid #ddd; border-radius:3px; box-shadow:0 2px 3px rgba(0,0,0,0.1); flex:0 0 25%; margin:25px 12px 0; overflow:hidden;}
#planroom .icons li:hover {opacity:0.5;}
#planroom .icons a {align-items:flex-end; color:#9e0b0f; display:flex; justify-content:center; font-size:2.4rem; padding:80% 0 25px; position:relative; text-decoration:none; width:100%;}
@media screen and (max-width:1023px) {
    #planroom .icons li {flex:none; max-width:250px; min-width:180px; width:75%;}
}



/*****************************************************
*****   F.A.Q.   *************************************
*****************************************************/
#faq .content ol {padding:0 0 0 25px;}
#faq .content li {border-bottom:1px solid #ddd; list-style:decimal; padding:25px 0 25px 25px}
#faq .content h4 {color:#999;}



/*****************************************************
*****   Privacy Policy   *****************************
*****************************************************/
#privacy .content h4 {font-size:inherit; margin:25px 0 0;}
#privacy .content h5 {color:#999;}
#privacy .content ul > li {border-bottom:1px solid #ddd; padding:25px 0;}
#privacy .content ul > li:first-child {border-top:1px solid #ddd; margin:25px 0 0;}
#privacy .content ol {list-style:lower-alpha; margin:0 0 0 50px;}
#privacy .content ol li {margin:12px 0 0;}



/*****************************************************
*****   Terms of Use   *******************************
*****************************************************/
#terms .content h4 {font-size:inherit; margin:25px 0 0;}
#terms .content h5 {color:#999;}
#terms .content ul > li {border-bottom:1px solid #ddd; padding:25px 0;}
#terms .content ul > li:first-child {border-top:1px solid #ddd; margin:25px 0 0;}



/*****************************************************
*****   Site Map   ***********************************
*****************************************************/
/* Top-level */
#sitemap .main {display:inline-flex; flex-direction:column;}
#sitemap .main > li {margin:25px 0 0;}
#sitemap .main a {color:#5a5a5a;}
#sitemap .main a:hover {color:#9e0b0f;}

/* Second-level */
#sitemap .sub {margin:0 0 0 10px}
#sitemap .sub > li {border-bottom:1px solid #ddd; border-left:1px solid #ddd; padding:6px 0 6px 12px;}
#sitemap .sub a {color:#999;}



/*****************************************************
*****   Error Pages   ********************************
*****************************************************/
#error-page h3 {border-bottom:1px solid #ddd; margin:50px 0 0; padding:0 0 25px;}
#error-page main {display:flex; flex-direction:column; width:500px;}
#error-page h4,
#error-page h5 {margin:25px 0 0;}
#error-page .button {display:inline-block; margin:25px 0 0; text-align:center; width:150px;}