/* global */
html { height: 100% }
body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; color: #172335; font-family: 'Lato', sans-serif; height: 100% }
.no-scroll { overflow: hidden }
.overlay { background-color: rgba(0, 0, 0, 0.7); display: none; height: 100vh; opacity: 0; position: fixed; transition: all 0.5s ease-in-out; width: 100vw; z-index: 998 }
.overlay.active { display: block; opacity: 1 }
a { text-decoration: none !important }
header { -moz-box-shadow: inset 25vw 0 0 0 #172335, inset 0 50px 0 0 #009FE3; -webkit-box-shadow: inset 25vw 0 0 0 #172335, inset 0 50px 0 0 #009FE3; background-color: #FFF; box-shadow: inset 25vw 0 0 0 #172335, inset 0 50px 0 0 #009FE3; position: absolute; width: 100%; z-index: 2 }
header #header-logo { background-color: #172335; display: block; height: 100% }
header #header-logo img { width: 292px; }
header #header-contact { height: 50px }
header #header-contact .social { font-size: 18px; padding: 0 50px 0 0 }
header #header-contact a.social { color: #FFF; opacity: 50%; }
header #header-contact a.social:hover { color: #172335; opacity: 50%; }
header #header-contact a.contact { color: #FFF }
header #header-contact a.contact:hover { color: #172335 }
header #header-contact a.contact i { font-size: 18px; color: #172335; padding: 0 5px 0 30px }
header .navbar { background-color: #FFF; height: 50px; padding: 0; width: 100%; }
header .navbar .navbar-nav li a { -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; color: #252C47; font-size: 15px; padding-left: 0 !important; padding-right: 30px !important; text-transform: uppercase; transition: 0.3s }
header .navbar .navbar-nav li a:hover, header .navbar .navbar-nav li a:focus, header .navbar .navbar-nav li.active a { color: #009FE3 }
header .navbar .navbar-nav .dropdown-item { padding-left: 15px !important; padding-right: 15px !important }
.get-in-touch { padding: 13px 30px; overflow: hidden; background-color: #172335; text-transform: uppercase; position: absolute; right: 0; top: 0; color: #fff; }
.get-in-touch:hover { background-color: #009FE3; }
.header-contact-icon { display: none }
#carousel-home { background-color: #FFF; height: 100%; position: relative; top: 0; width: 100%; z-index: 1; }
#carousel-home, #carousel-home .carousel-inner, #carousel-home .carousel-item, #carousel-home .carousel-item.active { height: 800px; }
#carousel-home .carousel-item { -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-position: center; background-repeat: no-repeat; background-size: cover; color: #FFF; cursor: pointer; }
#carousel-home-btn { bottom: 0; position: absolute; width: 100%; z-index: 2 }
#carousel-home-btn a { -moz-border-top-left-radius: 60px; -moz-border-top-right-radius: 60px; -webkit-border-top-left-radius: 60px; -webkit-border-top-right-radius: 60px; background-color: #172335; border-top-left-radius: 60px; border-top-right-radius: 60px; color: #FFF; display: block; font-size: 75px; height: 60px; line-height: 0; margin: 0 auto; text-align: center; width: 120px; font-weight: 300; }
.blue-bg { background-color: #172335; color: #fff; padding: 40px 0 135px 0; margin-top: 0; text-align: center; }
.blue-bg h2 { font-size: 28px; font-weight: 400; }
.services { margin-top: -100px; margin-bottom: 60px; text-align: center; }
.services img { border: 3px solid #fff; }
.services h3 { font-size: 29px; font-weight: 600; margin-top: 20px; }
.services p { font-size: 16px; }
.services a.btn { font-size: 19px; background-color: #172335; color: #fff; padding: 10px 40px; border-radius: 0; text-transform: uppercase; }
.services a.btn:hover { background-color: #009FE3; }
.orange-quality { background-color: #009FE3; padding: 80px 0; }
.orange-quality h4 { color: #fff; font-size: 64px; font-weight: 400; }
.orange-quality h4 span { color: #172335; font-weight: 900; }
.orange-quality p { font-size: 18px; padding-top: 10px; line-height: 30px; }
.orange-quality p.strap { color: #fff; font-size: 26px; padding-top: 20px; font-weight: 400; font-style: italic; }
.orange-quality p.strap strong { font-weight: 600; }
.orange-quality a.btn { background-color: #172335; padding: 10px 40px; color: #fff; text-transform: uppercase; font-size: 19px; margin-top: 20px; border-radius: 0; }
.orange-quality a.btn:hover { background-color: #fff; padding: 10px 40px; color: #009FE3; text-transform: uppercase; font-size: 19px; margin-top: 20px; }
.orange-quality ul { list-style-type: none; }
.orange-quality ul li { padding: 5px 0; font-size: 23px; }
.orange-quality li::before { content: '\f00c'; font-family: "Font Awesome 5 Pro"; color: #fff; margin-right: 10px; }
.blue-quality { background-color: #172335; padding: 60px 0; }
.blue-quality h4 { color: #fff; font-size: 64px; font-weight: 400; }
.blue-quality h4 span { color: #009FE3; font-weight: 900; }
.blue-quality p { font-size: 18px; padding-top: 10px; line-height: 30px; color: #fff; }
.blue-quality p.strap { color: #fff; font-size: 26px; padding-top: 20px; font-weight: 400; font-style: italic; }
.blue-quality p.strap strong { font-weight: 600; }
.blue-quality a.btn { background-color: #009FE3; padding: 10px 40px; color: #fff; text-transform: uppercase; font-size: 19px; margin-top: 20px; border-radius: 0; }
.blue-quality a.btn:hover { background-color: #fff; padding: 10px 40px; color: #009FE3; text-transform: uppercase; font-size: 19px; margin-top: 20px; }
.blue-quality ul { list-style-type: none; color: #fff; }
.blue-quality ul li { padding: 5px 0; font-size: 23px; }
.blue-quality li::before { content: '\f00c'; font-family: "Font Awesome 5 Pro"; color: #009FE3; margin-right: 10px; }
.service-quality { background-color: #172335; padding: 60px 0; }
.service-quality h4 { color: #fff; font-size: 64px; font-weight: 400; }
.service-quality h4 span { color: #009FE3; font-weight: 900; }
.service-quality p { font-size: 18px; padding-top: 10px; line-height: 30px; color: #fff; }
.service-quality p.strap { color: #fff; font-size: 26px; padding-top: 20px; font-weight: 400; font-style: italic; }
.service-quality p.strap strong { font-weight: 600; }
.service-quality a.btn { background-color: #009FE3; padding: 10px 40px; color: #fff; text-transform: uppercase; font-size: 19px; margin-top: 20px; border-radius: 0; }
.service-quality a.btn:hover { background-color: #fff; padding: 10px 40px; color: #009FE3; text-transform: uppercase; font-size: 19px; margin-top: 20px; }
.service-quality ul { list-style-type: none; color: #fff; padding-left: 20px }
.service-quality ul li { padding: 5px 0; font-size: 22px; }
.service-quality li::before { content: '\f00c'; font-family: "Font Awesome 5 Pro"; color: #009FE3; margin-left: -30px; padding-right: 10px; }
#dream-plan { margin: 40px 0; }
#dream-plan .dream-plan-img { }
#dream-plan .dream-plan-text { padding: 50px; font-size: 18px; display: flex; flex-direction: column; margin-top: 100px; }
#dream-plan .dream-plan-text h5 { font-size: 64px; font-weight: 400; line-height: 80px; }
#dream-plan .dream-plan-text h5 span { font-weight: 900; color: #009FE3; }
#dream-plan .dream-plan-text .strap { padding: 15px 0 10px 0; font-size: 23px; }
#dream-plan .dream-plan-text .btn { background-color: #252C47; font-size: 19px; text-transform: uppercase; border-radius: 0; color: #fff; padding: 15px 30px; margin-top: 20px; }
#dream-plan .dream-plan-text .btn:hover { background-color: #009FE3; }
#love-a-challenge { margin: 40px 0; }
#love-a-challenge .love-a-challenge-img { }
#love-a-challenge .love-a-challenge-text { padding: 50px; font-size: 18px; display: flex; flex-direction: column; margin-top: 100px; }
#love-a-challenge .love-a-challenge-text h5 { font-size: 64px; font-weight: 400; line-height: 80px; }
#love-a-challenge .dlove-a-challenge-text h5 span { font-weight: 900; color: #009FE3; }
#love-a-challenge .love-a-challenge-text .strap { padding: 15px 0 10px 0; font-size: 23px; }
#love-a-challenge .love-a-challenge-text .btn { background-color: #252C47; font-size: 19px; text-transform: uppercase; border-radius: 0; color: #fff; padding: 15px 30px; margin-top: 20px; }
#love-a-challenge .love-a-challenge-text .btn:hover { background-color: #009FE3; }
.blue-projects { background-color: #172335; color: #fff; padding: 60px 0; margin-top: 0; text-align: center; }
.blue-projects h6 { font-size: 36px; font-weight: 700; margin-bottom: 30px; }
.blue-projects img { border: 3px solid #fff; }
.blue-projects p { font-size: 17px; line-height: 24px; font-style: italic; }
.blue-projects p.title{ font-size: 21px; margin-top: 40px; font-weight: 300; font-style: normal; }
.blue-projects a.btn { font-size: 19px; background-color: #fff; color: #172335; padding: 10px 40px; border-radius: 0; text-transform: uppercase; margin-top: 10px; }
.blue-projects a.btn:hover { background-color: #009FE3; }
#share-this { background-color: #F2F2F2; padding: 10px 0; text-align: center }
#share-this h5 { font-size: 16px; margin: 0 0 5px 0; text-transform: uppercase }
footer { background-color: #172335; padding: 50px 0 45px 0; color: #fff; }
footer #footer-logo img { width: 292px; }
footer address { font-size: 16px; margin: 0; padding-left: 100px }
footer #footer-contact a { color: #fff; font-size: 16px; font-weight: 500 }
footer #footer-contact a:hover { color: #009FE3; }
footer #footer-contact a i { color: #FFF; padding-right: 3px }
footer #footer-policy { color: #FFF; font-size: 16px; text-align: right }
footer #footer-policy a { color: #fff }
footer #footer-policy a:hover { color: #009FE3; }
footer #footer-social { font-size: 18px; padding-top: 50px; text-align: right }
footer #footer-social a { color: #FFF; opacity: .5; padding-left: 35px }
footer #footer-social a:hover { opacity: 1 }
#footer-bottom { background-color: #2D2D2E; border-top: 1px solid #707070; color: #FFF; font-size: 14px; font-weight: 300; padding: 10px 0 }
#footer-bottom #footer-bottom-copyright a { color: #FFF }
#footer-bottom #footer-bottom-copyright br { display: none }
#footer-bottom #footer-bottom-designed { text-align: right }
#footer-bottom #footer-bottom-designed img { padding-left: 5px; position: relative; top: -1px; width: 220px }
/* sidebar */
#sidebar { background-color: #172335; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2); color: #FFF; height: 100vh; left: -275px; overflow-y: scroll; position: fixed; top: 0; transition: all 0.3s; width: 275px; z-index: 999999 }
#sidebar.active { left: 0 }
#sidebar .sidebar-header { padding: 20px 10px 17px 10px }
#sidebar .sidebar-header h3 { font-size: 28px }
#sidebar #dismiss { background-color: #009FE3; color: #FFF; cursor: pointer; height: 35px; line-height: 35px; position: absolute; right: 10px; text-align: center; top: 20px; width: 35px }
#sidebar ul { margin: 0 }
#sidebar ul p { color: #FFF; padding: 10px }
#sidebar ul li a { color: rgba(255,255,255, 0.6); display: block; font-size: 18px; padding: 10px; text-decoration: none !important }
#sidebar ul li a:hover { color: #FFF }
#sidebar ul li.active>a, #sidebar a[aria-expanded="true"] { color: #FFF !important }
#sidebar a[aria-expanded="true"] { background-color: #009FE3 }
#sidebar ul ul a { background-color: #009FE3; color: #FFF; font-size: 16px !important; padding-left: 30px !important }
#sidebar a[data-toggle="collapse"] { position: relative }
#sidebar .dropdown-toggle::after { display: block; position: absolute; right: 20px; top: 50%; transform: translateY(-50%) }
/* cookie bar */
#cookie-bar { background-color: #172335; bottom: 0; color: #FFF; height: auto; line-height: 24px; padding: 8px 0; position: fixed; text-align: center; width: 100%; z-index: 2000 }
#cookie-bar p { font-size: 14px; margin: 0; padding: 0; text-shadow: none }
#cookie-bar br { display: none }
#cookie-bar a { color: #FFF; display: inline-block; font-size: 14px; margin-left: 8px; padding: 0 6px; text-decoration: none }
#cookie-bar .cb-enable { background-color: #009FE3 }
#cookie-bar .cb-policy { background-color: #FFF; color: #172335 }
/* inner */
.inner-head-banner { background-size: cover; background-position: center; background-repeat: no-repeat; height: 700px; margin-bottom: 100px; position: relative; top: 100px }
.inner-head-banner h1 { color: #fff; font-size: 61px; font-weight: 300; padding: 40px 0; position: absolute; bottom: 1; left:19.5%; /*margin: 0;*/ margin-left: 30px; }
.inner-head-banner h1 span { font-weight: 600; }
.inner-head-banner img { position: absolute; bottom: 75px; left:15%; text-shadow: 2px 2px 2px rgba(0, 0, 0, 1); width: 86px; }
.inner-head-banner .header-text { position: absolute; bottom: 0; width: 100%; margin: 0; height: 200px; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.685) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ) }
.about { background-image: url('/img/layout/dj-banner-about-2026.jpg'); }
.our-team { background-image: url('/img/layout/our-team-banner.jpg'); }
.portfolio { background-image: url('/img/layout/dj-banner-projects-2026.jpg'); }
.contact-banner { background-image: url('/img/layout/dj-banner-contact-2.jpg'); }
.residential-banner { background-image: url('/img/layout/residential-banner.jpg'); background-position: top right }
.commercial-banner { background-image: url('/img/layout/commercial-banner.jpg'); }
.redevelopment-banner { background-image: url('/img/layout/redevelopment-banner.jpg'); }
.reviews-banner { background-image: url('/img/layout/dj-banner-reviews-2026.jpg'); }
.services-banner { background-image: url('/img/layout/dj-banner-services-2025.jpg'); }
#about-us { position: relative; overflow: hidden; padding: 50px 0 60px 0 }
#about-us .about-us-img { /*position: absolute; top: 80px; right: 0; width: 42%*/ }
#about-us .about-us-text { font-size: 18px; line-height: 30px }
#about-us .about-us-text .top-text-block { margin-bottom: 60px; }
#about-us .about-us-text p { padding-bottom: 8px }
#about-us .about-us-text p.lead { font-weight: 700; font-size: 23px; }
#about-us .about-us-text h2 { font-size: 61px; font-weight: 600; line-height: 80px; margin-bottom: 30px }
#about-us .about-us-text h2 span { font-weight: 600; color: #009FE3; }
#about-us .about-us-text .strap { padding: 15px 0 10px 0; font-size: 36px; line-height: 42px; font-weight: 400 }
#about-us .about-us-text .strap strong { font-weight: 700; color: #009FE3; }
#about-us .about-us-text .btn { background-color: #009FE3; font-size: 19px; text-transform: uppercase; border-radius: 0; color: #fff; padding: 15px 30px; margin-top: 20px; }
#about-us .about-us-text .btn:hover { background-color: #172335; }
#team { padding: 80px 0 40px 0 }
#team .flip-card { background-color: transparent; height: 600px; margin-bottom: 60px; perspective: 1000px; width: 100% }
#team .flip-card-inner { height: 100%; position: relative; text-align: center; transform-style: preserve-3d; transition: transform 0.6s; width: 100% }
#team .flip-card:hover .flip-card-inner { transform: rotateY(180deg) }
#team .flip-card-front, .flip-card-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; height: 100%; position: absolute; width: 100% }
#team .flip-card-front { background-color: #FFF; border: 1px solid #DEE0E2; padding: 30px; height: 100% }
#team .flip-card-front h4 { color: #373737; font-size: 31px; margin: 20px 0px; text-transform: uppercase; width: 100%; }
#team .flip-card-front p { color: #797979; font-size: 16px; font-style: italic; margin: -20px 0 0 0; width: 100% }
#team .flip-card-back { background-color: #172335; color: #FFF; padding: 30px; transform: rotateY(180deg) }
#team .flip-card-back p { font-size: 16px; font-weight: 300; margin-bottom: 20px }
#team .flip-card-back .team-links a { color: #FFF; font-size: 18px }
@media (max-width: 4200px) {
/* global */
.container { max-width: 1560px }
}
@media (max-width: 1919px) {
/* global */
#dream-plan { /*height: 480px*/ }
}
@media (max-width: 1589px) {
/* global */
.container { max-width: 1140px }
#carousel-home, #carousel-home .carousel-inner, #carousel-home .carousel-item, #carousel-home .carousel-item.active { height: 480px; }
.blue-bg { padding: 30px 0 120px 0; }
.blue-bg h2 { font-size: 24px; }
.inner-head-banner { height: 360px; }
.inner-head-banner h1 { font-size: 50px; padding: 45px 0; }
.inner-head-banner h1 span { font-weight: 600; }
.inner-head-banner img { position: absolute; bottom: 75px; left:15%; text-shadow: 2px 2px 2px rgba(0, 0, 0, 1); width: 86px; }
.inner-head-banner .header-text { position: absolute; bottom: 0; width: 100%; margin: 0; height: 200px; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.685) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ) }
header #header-logo img { padding-right: 30px; }
header #header-contact a.contact { font-size: 14px; }
.orange-quality h4 { font-size: 50px; }
.orange-quality p.strap { font-size: 20px; padding-top: 10px; }
.orange-quality p { padding-top: 5px; }
.orange-quality ul li { font-size: 20px; }
#dream-plan { /*height: 417px;*/ }
#dream-plan .dream-plan-text { padding: 30px 40px; font-size: 16px; margin-top: 60px; }
#dream-plan .dream-plan-text h5 { font-size: 45px; line-height: 65px; }
#dream-plan .dream-plan-text .strap { font-size: 18px; }
.blue-projects p { font-size: 20px; line-height: 24px; }
.blue-projects p.title{ font-size: 23px; margin-top: 30px; font-weight: 400; }
.services p { font-size: 16px; }
.services a.btn { font-size: 19px; background-color: #009FE3; color: #fff; padding: 10px 40px; border-radius: 0; text-transform: uppercase; }
footer address { font-size: 14px; padding-left: 50px }
footer #footer-contact { margin-right: -50px }
footer #footer-contact a { font-size: 14px }
footer #footer-policy { font-size: 14px }
footer #footer-social { padding-top: 35px }
footer #footer-social a { padding-left: 25px }
#about-us .about-us-text .strap { font-size: 30px; line-height: 36px; }
#love-a-challenge .love-a-challenge-text { padding: 50px; font-size: 18px; display: flex; flex-direction: column; margin-top: 40px; }
#love-a-challenge .love-a-challenge-text h5 { font-size: 40px; font-weight: 400; line-height: 46px; }
/* inner */
.inner-head-banner h1 { left:16%; }
.inner-head-banner img { left:10%; }
#about-us { padding: 50px 0 20px 0 }
#about-us .about-us-img { top: 70px }
#about-us .about-us-text h2 { font-size: 45px; font-weight: 600; line-height: 60px; margin-bottom: 30px }
#about-us .about-us-text { font-size: 18px; line-height: 30px }
.blue-quality h4 { font-size: 50px; }
.blue-quality p.strap { font-size: 20px; padding-top: 10px; }
.blue-quality p { padding-top: 5px; }
.blue-quality ul li { font-size: 20px; }
#team { padding: 70px 0 30px 0 }
#team .flip-card { height: 450px; margin-bottom: 50px }
#team .flip-card-front h4 { font-size: 28px }
#team .flip-card-front p { font-size: 16px }
#team .flip-card-back p { font-size: 16px }
}
@media (max-width: 1199px) {
/* global */
.container { max-width: 960px }
#footer-bottom { font-size: 13px }
header #header-contact { text-align: right }
header #header-contact .social { padding: 0 40px 0 0 }
header #header-contact a.contact { display: none }
header #header-social { width: 100% }
.header-contact-icon { display: inline; }
header .navbar .navbar-nav li a { padding-right: 20px !important }
header #header-get-in-touch { display: none }
.orange-quality ul li { font-size: 20px; }
.services img { margin-top: 30px; }
#dream-plan { /*height: 312px;*/ }
#dream-plan .dream-plan-text { padding: 10px; font-size: 14px; }
#dream-plan .dream-plan-text h5 { font-size: 42px; line-height: 42px; }
#dream-plan .dream-plan-text .strap { font-size: 16px; }
#dream-plan .dream-plan-text .btn { font-size: 16px; padding: 10px 30px; margin-top: 0px; }
.blue-projects img { margin-top: 30px; }
.blue-projects p { font-size: 16px; line-height: 24px; }
.blue-projects p.title { font-size: 24px; font-weight: 600; margin-top: 20px; }
footer #footer-logo { display: block; padding-bottom: 30px; text-align: center; }
footer address { padding-left: 0; text-align: center }
footer #footer-contact { margin-right: 0; text-align: center; width: 100% }
footer #footer-policy { text-align: center }
footer #footer-social { padding: 20px 0; text-align: center }
footer #footer-social a { padding: 0 15px }
/* inner */
#about-us { padding: 50px 0 70px 0 }
#about-us .about-us-img { display: none }
.blue-quality ul li { font-size: 20px; }
.inner-head-banner { height: 380px }
.inner-head-banner h1 { font-size: 61px; margin-left: 50px; }
#team { padding: 60px 0 20px 0 }
#team .flip-card { height: 370px; margin-bottom: 40px }
#team .flip-card-front h4 { font-size: 24px }
#team .flip-card-front p { font-size: 14px }
#team .flip-card-back p { font-size: 14px }
#love-a-challenge .love-a-challenge-text { padding: 50px; font-size: 18px; display: flex; flex-direction: column; margin-top: 0px; }
#love-a-challenge .love-a-challenge-text h5 { font-size: 40px; font-weight: 400; line-height: 46px; }
}
@media (max-width: 991px) {
/* global */
.container { max-width: 720px }
.header-contact-icon { padding: 0 0 0 40px !important }
#footer-bottom { font-size: 14px; padding-bottom: 13px; text-align: center }
#footer-bottom #footer-bottom-designed { padding-top: 5px; text-align: center }
.navbar .navbar-toggler { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; color: #172335; font-size: 18px; font-weight: 300; margin-top: 4px; outline: none; padding-right: 0; text-transform: uppercase; width: 100%; text-align: right }
.navbar .navbar-toggler i { font-size: 26px; position: relative; right: 0; }
/*.services p { display: none; }*/
#dream-plan { height: auto; text-align: center; }
#dream-plan .dream-plan-text { padding: 75px; font-size: 18px; }
#dream-plan .dream-plan-img { position: relative; width: 100%; }
footer #footer-social { padding: 30px 0 20px 0 }
/* inner */
.inner-head-banner { height: 458px }
.inner-head-banner h1 { margin-left: 70px; }
/*.about { background-image: url('/img/layout/header-about-tablet.jpg'); }
.our-team { background-image: url('/img/layout/header-team-tablet.jpg'); }
.portfolio { background-image: url('/img/layout/header-portfolio-tablet.jpg'); }
.contact-banner { background-image: url('/img/layout/header-contact-tablet.jpg'); }
.residential-banner { background-image: url('/img/layout/header-residential-tablet.jpg'); }
.commercial-banner { background-image: url('/img/layout/header-commercial-tablet.jpg'); }
.redevelopment-banner { background-image: url('/img/layout/header-redevelopment-tablet.jpg'); }*/
#team .flip-card { height: 430px }
#team .flip-card-front h4 { font-size: 28px }
#team .flip-card-front p { font-size: 16px }
#team .flip-card-back p { font-size: 16px }
#dream-plan .dream-plan-text { padding: 30px 40px 0 40px; font-size: 16px; margin-top: 0px; }
#love-a-challenge .love-a-challenge-text { padding: 50px 50px 0 50px; font-size: 18px; display: flex; flex-direction: column; margin-top: 0px; }
}
@media (max-width: 768px) {
/* global */
.container { max-width: 540px }
header #header-logo img { padding-right: 15px }
header #header-contact .social { font-size: 18px; padding: 0 30px 0 0 }
.header-contact-icon { padding: 0 0 0 30px !important }
.blue-bg { padding: 30px 0 90px 0; margin-top: 0; text-align: center; }
.blue-bg h2 { font-size: 22px; font-weight: 400; }
/*.blue-projects p { display: none }*/
.blue-projects p.title { display: block;}
.orange-quality { text-align: center; }
.orange-quality ul { margin-top: 30px; padding: 0; text-align: left }
#dream-plan .dream-plan-text { padding: 30px 10px 0 10px; }
.blue-quality { text-align: center }
.blue-quality ul { margin-top: 30px; padding: 0; text-align: left }
footer address { font-size: 18px }
footer #footer-contact a { font-size: 18px }
#carousel-home, #carousel-home .carousel-inner, #carousel-home .carousel-item, #carousel-home .carousel-item.active {
height: 310px;
}
/* inner */
#about-us { text-align: center; margin: 60px 0 0 0; padding: 50px 0 30px 0 }
#team .flip-card { height: 620px }
#team .flip-card-front h4 { font-size: 31px }
#team .flip-card-front p { font-size: 16px }
#team .flip-card-back p { font-size: 16px }
}
@media (max-width: 575px) {
/* global */
.container { max-width: 100% }
header { -moz-box-shadow: inset 100vw 0 0 0 #172335; -webkit-box-shadow: inset 100vw 0 0 0 #172335; box-shadow: inset 100vw 0 0 0 #172335; }
header #header-logo { padding: 20px 0px 10px 0 }
header #header-logo img { margin: 0 auto; padding: 0; width: 270px }
header .navbar { background-color: #172335; height: 50px; padding: 0 }
.navbar .navbar-toggler { color: #009FE3; text-align: center; }
header #header-contact { display: none; }
#footer-bottom #footer-bottom-copyright span { display: none }
#footer-bottom #footer-bottom-copyright br { display: inline }
#footer-bottom #footer-bottom-designed { padding-top: 8px }
/* inner */
.inner-head-banner { height: 200px; margin-bottom: 145px; top: 135px }
.inner-head-banner h1 { font-size: 38px; margin-left: 28px; margin-top: 75px }
.inner-head-banner img {
position: absolute;
bottom: 35px;
left: 5%;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
width: 65px;
}
/*.about { background-image: url('/img/layout/header-about-mobile.jpg'); }
.our-team { background-image: url('/img/layout/header-team-mobile.jpg'); }
.portfolio { background-image: url('/img/layout/header-portfolio-mobile.jpg'); }
.contact-banner { background-image: url('/img/layout/header-contact-mobile.jpg'); }
.residential-banner { background-image: url('/img/layout/header-residential-mobile.jpg'); }
.commercial-banner { background-image: url('/img/layout/header-commercial-mobile.jpg'); }
.redevelopment-banner { background-image: url('/img/layout/header-redevelopment-mobile.jpg'); }*/
#team .flip-card { height: 420px }
#team .flip-card img { width: 266px }
/* cookie bar */
#cookie-bar br { display: inline }
}
@media (max-width: 374px) {
/* global */
footer address { font-size: 14px }
footer #footer-contact a { font-size: 14px }
}