/*======HELPER CLASSES======*/
/*-----START-----*/
/*fonts*/
.font-roboto {font-family: 'Roboto', sans-serif;}

/*font size*/
.font-10 {font-size: 0.625em;}
.font-11 {font-size: 0.688em;}
.font-12 {font-size: 0.750em;}
.font-13 {font-size: 0.813em;}
.font-14 {font-size: 0.875em;}
.font-15 {font-size: 0.938em;}
.font-16 {font-size: 1em;}
.font-17 {font-size: 1.063em;}
.font-18 {font-size: 1.125em;}
.font-19 {font-size: 1.188em;}
.font-20 {font-size: 1.250em;}
.font-21 {font-size: 1.313em;}
.font-22 {font-size: 1.375em;}
.font-23 {font-size: 1.438em;}
.font-24 {font-size: 1.500em;}
.font-25 {font-size: 1.563em;}
.font-26 {font-size: 1.625em;}
.font-27 {font-size: 1.688em;}
.font-28 {font-size: 1.750em;}

/*text transform*/
.t-up {text-transform: uppercase;}

/*line height*/
.line-height-20 {
    line-height: 1.2;
}

/*background*/
.bg-yellow {background-color: rgba(251,190,63,1) !important;}
.bg-black {background-color: rgba(34,34,34,1) !important;}
.bg-black-07 {background-color: rgba(34,34,34,0.7) !important;}

/*color*/
.item-yellow {color: rgba(251,190,63,1) !important;}
.item-white {color: rgba(255,255,255,1) !important;}
.item-white-08 {color: rgba(255,255,255,0.8) !important;}
.item-dark {color: rgba(74,74,74,1) !important;}
.item-grey {color: rgba(184,184,184,1) !important;}
.item-grey-08 {color: rgba(184,184,184, 0.8)!important;}
.item-light {color: rgba(192,192,192,1) !important;}

/*display*/
.display-box {display: inline-box;display: -moz-inline-box;display: -webkit-inline-box;}
.display-block {display: block;}
.display-hidden {display: none;}
.oh {
    overflow: hidden;}
/*-----END-----*/



/*======GENERAL CLASSES=====*/
/*-----START-----*/
html, body {
    overflow-x: hidden;
}
body {
    font-family: 'Ubuntu', sans-serif;
    position: relative;
    height: 100%;
}
.line {
    height: 4px;
    width: 15%;
    background-color: rgba(251,190,63,1);
    border: 0;
}
.close {
    color: rgba(255,255,255,1);
}
.close:hover {
    color: #fff;
}
/*-----END-----*/



/*======COVER STYLES=====*/
/*-----START-----*/
.cover-overlay {
    z-index: 1;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top right, rgba(34,34,34,0.5), rgba(34,34,34,0.2) );
}
.cover-title h1{
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
}
.cover-title p{
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
}
.cover-title .lead {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
}
.jumbotron {
    z-index: 0;
    height: 100vh;
    background-size: cover;
    background: url('../images/cover/cover-1.jpg') center no-repeat;
}
/*-----END-----*/



/*======BUTTON STYLES=====*/
/*-----START-----*/
.cover-title {
    padding-top: 300px;
    line-height: 25px;
}
.btn-outline-success:not(:disabled):not(.disabled):active {
    background-color: rgba(255,255,255,1);
    border-color: rgba(255,255,255,1);
    color: rgba(34,34,34,1);
}
.btn-outline-success:not(:disabled):not(.disabled):active:focus,.btn-outline-success:focus {
    box-shadow: 0 0 0 0.2rem rgba(255,255,255,0);
}
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: rgba(251,190,63,1);
    border-color: rgba(251,190,63,1);
    color: rgba(34,34,34,1);
}
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.btn-outline-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(255,255,255,0);
}
.btn-outline-warning:not(:disabled):not(.disabled):active {
    background-color: rgba(251,190,63,1);
    border-color: rgba(251,190,63,1);
    color: rgba(34,34,34,1);
}
.btn-outline-warning:not(:disabled):not(.disabled):active:focus,.btn-outline-warning:focus {
    box-shadow: 0 0 0 0.2rem rgba(255,255,255,0);
}
.btn-outline-info:not(:disabled):not(.disabled):active {
    background-color: rgba(251,190,63,1);
    border-color: rgba(251,190,63,1);
    color: rgba(34,34,34,1);
}
.btn-outline-info:not(:disabled):not(.disabled):active:focus,.btn-outline-info:focus {
    box-shadow: 0 0 0 0.2rem rgba(255,255,255,0);
}
.btn-lg {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    font-size: 16px;
}
.btn-outline-primary {
    border: 3px solid rgba(251,190,63,1);
    background-color: transparent;
    color: rgba(251,190,63,1);
}

.btn-outline-primary:hover {
    background-color: rgba(251,190,63,1);
    border: 3px solid rgba(251,190,63,1);
    color: rgba(34,34,34,1);
}

.btn-outline-success {
    border: 3px solid rgba(255,255,255,0.8);
    background-color: transparent;
    color: rgba(255,255,255,0.8);
}

.btn-outline-success:hover {
    background-color: rgba(255,255,255,1);
    border: 3px solid rgba(255,255,255,1);
    color: rgba(34,34,34,1);
}
.btn-outline-warning {
    width: 100px;
    border-radius: initial;
    border: 3px solid rgba(251,190,63,1);
    background-color: transparent;
    color: rgba(251,190,63,1);
}

.btn-outline-warning:hover {
    background-color: rgba(251,190,63,1);
    border: 3px solid rgba(251,190,63,1);
    color: rgba(34,34,34,1);
}
.btn-outline-info {
    border-radius: initial;
    border: 1px solid rgba(34,34,34,1);
    background-color: transparent;
    color: rgba(34,34,34,1);
}

.btn-outline-info:hover {
    background-color: rgba(34,34,34,1);
    border: 1px solid rgba(251,190,63,1);
    color: rgba(255,255,255,1);
}

/*-----END-----*/

/*======HIDDEN HEADER STYLES=====*/
/*-----START-----*/
.logo-small {
    max-width: 100%;
}
/*-----END-----*/

/*======HEADER STYLES=====*/
/*-----START-----*/
.header-logo a{
    width: 100%;
}
.phone-icon,
.email-icon {
    width: 30px;
    font-size: 30px;
}
.call-us-info,
.email-us-info {
    line-height: 14px;
}
hr {
    width: 100%;
    height: 0.01em;
    background: rgba(184,184,184, 0.3);
    margin: 0 25px 0 25px ;
}
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,1);
}
.navbar-dark .navbar-nav .active>.nav-link {
    color: rgba(251,190,63,1);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
.navbar-nav .nav-item .nav-link:hover {
     color: rgba(251,190,63,1);
     -webkit-transform: scale(1.05);
     -moz-transform: scale(1.05);
     -ms-transform: scale(1.05);
     -o-transform: scale(1.05);
     transform: scale(1.05);
     -webkit-transition: 0.3s;
     -moz-transition: 0.3s;
     -ms-transition: 0.3s;
     -o-transition: 0.3s;
     transition: 0.3s;

 }a.nav-link.active {
      color: rgba(251,190,63,1) !important;
  }

/*-----END-----*/


/*======CARD STYLES=====*/
/*-----START-----*/
.card-deck {
    max-height: 250vh;
}
.card {
    border: none;
}

.card-img {
    border-radius: 0;
}

.card-img-overlay {
    width: 100%;
    height: 35%;
    background: linear-gradient(to top, rgba(34,34,34,0.7), rgba(34,34,34,0.7) );
    top: initial;
}

.card-img-overlay-reveal {
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to right, rgba(34,34,34,0.7), rgba(34,34,34,0.7) );
    padding: 1.25rem;
}

.card-reveal {
    display: none;
}
.wrapper {
    position: relative;
    overflow: hidden;
}
.wrapper:after {
    content: '';
    display: block;
    padding-top: 140%;
}

.wrapper img {
    width: auto;
    height: 100%;
    max-width: none;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}
/*-----END-----*/

/*======GALLERY STYLES=====*/
/*-----START-----*/
#gallery-rendam p,
#gallery-pantai p,
#gallery-tan p,
#gallery-wynn p {
    text-shadow: 1px 1px rgba(34,34,34,1);
}
.gallery-project-bg {
    width: 100%;
    object-fit: cover;
    background-position: center;
}
.gallery-rendam {
    background: url("../images/gallery/rendam.jpg") no-repeat center;
    background-size: cover;
    height: 270px;
}
.gallery-pantai {
    background: url("../images/gallery/pantai.jpg") no-repeat center;
    background-size: cover;
    height: 270px;
}
.gallery-tan {
    background: url("../images/gallery/tanresidencecover.jpeg") no-repeat center;
    background-size: cover;
    height: 540px;
}
.gallery-wynn {
    background: url("../images/gallery/wynn.jpg") no-repeat center;
    background-size: cover;
    height: 540px;
}
.gallery-overlay {
    width: 100%;
    background: rgba(34, 34, 34, 0.1);
    height: 270px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
.gallery-overlay-lg {
    width: 100%;
    background: rgba(34, 34, 34, 0.1);
    height: 540px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
.gallery-overlay:hover,
.gallery-overlay-lg:hover {
    background: transparent;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
.gallery-reveal {
    display: none;
}
.gallery-overlay-reveal {
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(34,34,34,0.9);
    border: 3px solid rgba(251,190,63,1);
    padding: 1.25rem;
}
ul {
    list-style: none;
}
.gallery-overlay-reveal ul li:before {
    content:"\2714\0020";
}
.rendam-images img:hover,
.pantai-images img:hover,
.tan-images img:hover,
.wynn-images img:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.1);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
.rendam-images img,
.pantai-images img,
.tan-images img,
.wynn-images img {
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
.rendam-images img,
.pantai-images img {
    width: 80px;
    height: 50px;
    cursor: pointer;
}
.tan-images img {
    width: 32.33%;
    height: 95px;
    cursor: pointer;
}
.wynn-images img {
    width: 200px;
    height: 120px;
    cursor: pointer;
}
.modal-content {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    border: none;
}
.modal-body button {
    position: absolute;
    top: 2%;
    right: 2%;
}
.modal-body img {
    width: 100%;
}
/*-----END-----*/

/*======COMPANY STYLES=====*/
/*-----START-----*/
.project-planning img,
.project-tracking img,
.communication img,
.quality-control img {
    width: 50px;
    height: 50px;
}
/*-----END-----*/


/*======PARALLAX STYLES=====*/
/*-----START-----*/

.parallax-banner {
    text-align: center;
    background: linear-gradient(to top, rgba(34,34,34,0.6), rgba(34,34,34,0.6) ),
    url("../images/parallax/parallax.jpg") center repeat fixed;
    background-size: cover;
}

/*-----END-----*/

/*======FORM STYLES=====*/
/*-----START-----*/

.form-control::-webkit-input-placeholder {
    color: #C0C0C0;
    font-size: 14px;
}
.form-control::-moz-placeholder {
    color: #C0C0C0;
    font-size: 14px;
}
.form-control:-ms-input-placeholder {
    color: #C0C0C0;
    font-size: 14px;
}
.form-control:-moz-placeholder {
    color: #C0C0C0;
    font-size: 14px;
}
.form-control:focus {
    border-color: #DD0D36 !important;
    box-shadow: 0 0 10px rgba(251,190,63,1) !important;
}

/*-----END-----*/


/*======SIDEBAR STYLES=====*/
/*-----START-----*/

.waze-map-embed a img {
    object-fit: none;
   max-height: 150px;
    width: 100%;
}
.google-map-embed iframe {
    width: 100%;
    height: 33%;
}
.contact-info {
    background-color: #222;
}
/*-----END-----*/


/*======SIDEBAR STYLES=====*/
/*-----START-----*/

.footer {
    background-color: #222;
}
.footer-nav {
    margin-bottom: 10px;
}
.footer-nav li a {
    color: rgba(255,255,255,1);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
.footer-nav li a:hover {
    text-decoration: none;
    color: rgba(251,190,63,1);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
.footer-credit p a {
    color: rgba(184,184,184, 0.8);
}
.footer-credit p a:hover{
    text-decoration: none;
    border-bottom: 1px solid white;
}
/*-----END-----*/

/*======TOP BUTTON STYLES=====*/
/*-----START-----*/
#goToTop {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: transparent;
    color: rgba(251,190,63,1);
    cursor: pointer;
    font-size: 70px;
    transition: 0.3s;
}

/*-----END-----*/


/*======PRELOADER STYLES=====*/
/*-----START-----*/

.spinner {
    width: 60px;
    height: 60px;
    background-color: rgba(251,190,63,1);

    position: fixed;
    z-index: 999;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
    0% { -webkit-transform: perspective(120px) }
    50% { -webkit-transform: perspective(120px) rotateY(180deg) }
    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    } 50% {
          transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
          -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
      } 100% {
            transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        }
}
.spinner-wrapper {
    position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(34,34,34,1);
    z-index: 999999;
}
/*-----END-----*/


/*======MEDIA QUERIES=====*/
/*-----START-----*/

@media (max-width: 767.98px) {
    /*global settings*/
    h2 {
        font-size: 1.6em;
    }
    /*logo settings*/
    .dropdown-logo {
        text-align: center;
    }

    /*cover settings*/
    .cover-title {
        padding-top: 100px;
    }
    .cover-title h1 {
        font-size: 1.5em;
    }
    .cover-title p {
        font-size: 0.8em;
        line-height: 1.2;
    }
    .lead a {
        font-size: 14px;
    }

    /*navbar settings*/
    .navbar-dark .navbar-toggler {
        border: 1px solid rgba(251,190,63,1);
    }
    .dropdown-nav {
        background-color: rgba(34,34,34,0.7) !important;
    }

    /*title settings*/
    .service-title p,
    .gallery-title p,
    .company-title p,
    .form-title p {
        font-size: 0.688em;
    }

    /*card settings*/
    .card {
        height: 50vh;
    }
    .card-deck .card {
        margin-bottom: 1em;
    }
    .card-deck {
        -moz-box-orient: vertical;
        -webkit-box-orient: vertical;
        flex-flow: column;
    }
    .wrapper img {
        width: 100%;
        height: auto;
    }
}
@media (max-width: 567.98px) {
    .jumbotron {
        height: 70vh;
    }
    .cover-title {
        padding-top: 150px;
    }
    .card {
        height: 25vh;
    }
}

@media (max-width: 374.98px) {
    #gallery .font-14 {
        font-size: 0.750em;
    }
    .gallery-overlay,
    .gallery-overlay-lg,
    .gallery-overlay-reveal,
    .gallery-rendam,
    .gallery-pantai,
    .gallery-tan,
    .gallery-wynn {
        height: 250px;
    }
    .tan-images img,
    .wynn-images img {
        width: 80px;
        height: 50px;
    }
    .gallery-rendam,
    .gallery-pantai,
    .gallery-tan,
    .gallery-wynn {
        margin-bottom: 1em;
    }
    .contact-info .col-6 {
        max-width: 100%;
        flex: 0 0 100%;
    }
    .phone-info {
        padding-top: 0;
    }
    .project-tracking h3,
    .quality-control h3 {
        padding-top: 0.65em;
    }
    .card p {
        font-size: 0.750em;
    }
    .card {
        height: 25vh;
    }
}
@media (min-width: 375px) and (max-width: 575.98px){
    /*gallery settings*/
    .gallery-overlay,
    .gallery-overlay-lg,
    .gallery-overlay-reveal,
    .gallery-rendam,
    .gallery-pantai,
    .gallery-tan,
    .gallery-wynn {
        height: 300px;
    }
    .gallery-rendam,
    .gallery-pantai,
    .gallery-tan,
    .gallery-wynn {
        margin-bottom: 1em;
    }
    .rendam-images img,
    .pantai-images img,
    .tan-images img,
    .wynn-images img {
        width: 100px;
        height: 70px;
    }
    #gallery .font-14 {
        font-size: 0.750em;
    }
    .project-planning h3,
    .project-tracking h3,
    .communication h3,
    .quality-control h3 {
        padding-top: 0.65em;
    }
}
@media (min-width: 576px) and (max-width: 991.98px) {

    /*gallery settings*/
    .gallery-overlay,
    .gallery-overlay-lg,
    .gallery-rendam,
    .gallery-pantai,
    .gallery-tan,
    .gallery-wynn {
        height: 300px;
    }
    /*icon settings*/
    .project-planning img,
    .project-tracking img,
    .communication img,
    .quality-control img {
        height: 40px;
        width: 40px;
    }
    .project-planning h3,
    .project-tracking h3,
    .communication h3,
    .quality-control h3 {
        font-size: 1em;
        padding-top: 0.65em;
    }
    .project-planning p,
    .project-tracking p,
    .communication p,
    .quality-control p {
        font-size: 0.875em;
        font-size: 0.875em;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    /*gallery settings*/
    .rendam-images img,
    .pantai-images img,
    .tan-images img,
    .wynn-images img {
        width: 140px;
        height: 90px;
    }

    /*cover settings*/
    .lead a {
        font-size: 12px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .cover-title {
        padding-top: 120px;
    }
    .cover-title h1 {
        font-size: 1.9em;
    }
    .lead a {
        font-size: 12px;
    }

    /*gallery settings*/
    .rendam-images img,
    .pantai-images img,
    .tan-images img,
    .wynn-images img {
        width: 100px;
        height: 70px;
    }
    /*footer settings*/
    .footer p,
    .footer-credit p{
        font-size: 0.625em;
    }

    /*card settings*/
    .card-deck .card {
        height: 300px;
    }
    .card-deck .construction {
        margin-bottom: 2em;
    }
}

/*-----END-----*/