/* =====================================================
   CONTACT PAGE - Custom Styles
   Extracted from contact.php inline <style> block
   ===================================================== */

.bg-deep-purple {
    background-color: #303236 !important;
}

.slide-a {
    color: #1b92ec;
    font-size: 16pt;
    margin-right: 2%;
}

.top-font-custom {
    font-family: 'Montserrat', sans-serif;
    font-size: 60px;
    line-height: 62px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #000000;
}

.top-font-custom-1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 55px;
    line-height: 62px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #000000;
}

.top-font-custom-2 {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    font-size: 40px;
    line-height: 30px;
    font-weight: 300;
    letter-spacing: 0px;
    color: #000000;
}

/* FIX: max-width 75% -> 100% for proper responsive images */
img,
video {
    max-width: 75%;
    height: auto;
}

.sm-cont2 {
    height: 51.4em;
}

/* FIX: viewport-relative height instead of fixed 714px */
.sm-content-cont {
    display: table;
    height: 55vw;
    max-height: 750px;
    min-height: 400px;
}

.space {
    margin-top: 6px;
    margin-bottom: 6px;
    margin-left: 6px;
    margin-right: 6px;
}

.container-m-60 {
    padding-right: 15px;
    padding-left: 15px;
}

.port-view-more {
    padding-top: 18px;
    padding-bottom: 18px;
    font-weight: 700;
    font-family: 'Open Sans';
}

.about-text {
    font-size: 18px;
    line-height: 1.8;
    text-align: justify;
}

.contact-form-cont {
    position: relative;
    max-width: 100%;
    padding: 0px 10px 2px 10px;
}

.customSliderText {
    display: inline-block;
    overflow: hidden;
    text-align: left;
    margin-top: 20px;
}

.customSliderTextLeft {
    width: 32%;
    float: left;
    text-align: left;
    margin-left: 15px;
}

.customSliderTextRight {
    width: 32%;
    float: right;
    text-align: left;
    margin-right: 15px;
}

.customSliderTextRight2 {
    width: 49%;
    float: right;
    text-align: left;
    margin-right: 15px;
}

.customLeftBottomSliderText {
    text-align: left;
    position: absolute;
    bottom: 55px;
    left: 55px;
}

/* FIX: background-size contain -> cover for proper full-width coverage */
.customBackImage {
    background-color: #fcfcfc;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.itemPositionTopLeft {
    display: table-cell;
    height: 100%;
    vertical-align: top;
    padding-top: 1%;
}

.itemPositionTopRight {
    display: table-cell;
    height: 100%;
    vertical-align: top;
    float: right;
}

.itemPositionTopCenter {
    display: table-cell;
    height: 100%;
    vertical-align: top;
    width: 50%;
    margin: auto;
}

.itemPositionCenterLeft {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}

.itemPositionCenterRight {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
    text-align: right;
}

.itemPositionCenterCenter {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
    text-align: center;
}

.itemPositionCenterBottom {
    display: table-cell;
    height: 100%;
    vertical-align: bottom;
    text-align: center;
}

.itemPositionBottomRight {
    display: table-cell;
    height: 100%;
    vertical-align: bottom;
    text-align: right;
}

.itemPositionBottomLeft {
    display: table-cell;
    height: 100%;
    vertical-align: bottom;
    padding-bottom: 5%;
}

.page-title {
    margin-bottom: 3%;
    margin-top: 3%;
    font-size: 24px;
    line-height: 0;
    letter-spacing: 6px;
    font-weight: 600;
    text-transform: capitalize;
}

::-webkit-input-placeholder {
    color: #ea8b1f !important;
}

.checkbox,
.radio {
    margin-top: 2px;
}


/* =====================================================
   MEDIA QUERIES
   ===================================================== */

/* 2560px+ (4K / Ultra-wide) */
@media screen and (min-width: 2560px) {
    .sm-content-cont {
        height: 40vw;
        max-height: 1100px;
    }

    .top-font-custom {
        font-size: 82px;
        line-height: 86px;
    }

    .top-font-custom-1 {
        font-size: 72px;
        line-height: 78px;
    }

    .top-font-custom-2 {
        font-size: 56px;
        line-height: 60px;
    }

    .textItemDesc {
        font-size: 24px;
    }

    .slide-a {
        font-size: 20pt;
    }
}

/* 1920px+ (Full HD and above) */
@media screen and (min-width: 1920px) and (max-width: 2559px) {
    .sm-content-cont {
        height: 45vw;
        max-height: 900px;
    }

    .top-font-custom {
        font-size: 70px;
        line-height: 74px;
    }

    .top-font-custom-1 {
        font-size: 60px;
        line-height: 66px;
    }

    .top-font-custom-2 {
        font-size: 48px;
        line-height: 52px;
    }

    .textItemDesc {
        font-size: 22px;
    }

    .slide-a {
        font-size: 18pt;
    }
}

/* max-width: 1600px */
@media screen and (max-width: 1600px) {
    .top-font-custom {
        font-family: 'Montserrat', sans-serif;
        font-size: 51px;
        line-height: 62px;
        font-weight: 800;
        letter-spacing: 1px;
        color: #000000;
    }

    .top-font-custom-2 {
        font-family: 'Montserrat', Arial, Helvetica, sans-serif;
        font-size: 24px;
        line-height: 30px;
        font-weight: 300;
        letter-spacing: 0px;
        color: #000000;
    }

    .textItemDesc {
        font-family: 'Montserrat', sans-serif;
        font-size: 15px;
    }

    .slide-a {
        color: #1b92ec;
        font-size: 13pt;
        margin-right: 2%;
    }

    .top-font-custom-1 {
        font-family: 'Montserrat', sans-serif;
        font-size: 44px;
        line-height: 62px;
        font-weight: 800;
        letter-spacing: 1px;
        color: #000000;
    }

    .sm-mb-15 {
        margin-bottom: 7px;
    }

    .sm-content-cont {
        display: table;
        height: 594px;
    }
}

/* 1380px - 1560px */
@media (min-width: 1380px) and (max-width: 1560px) {
    .sm-content-cont {
        height: 555px;
    }
}

/* 1025px - 1279px */
@media (min-width: 1025px) and (max-width: 1279px) {
    .sm-content-cont {
        height: 380px;
    }
}

/* Tablet: 768px - 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
    .sm-content-cont {
        height: 475px;
    }
}

/* (1366x768) WXGA Display */
@media screen and (max-width: 1366px) {
    .top-font-custom {
        font-family: 'Montserrat', sans-serif;
        font-size: 38px;
        line-height: 62px;
        font-weight: 800;
        letter-spacing: 1px;
        color: #000000;
    }

    .top-font-custom-2 {
        font-family: 'Montserrat', Arial, Helvetica, sans-serif;
        font-size: 24px;
        line-height: 10px;
        font-weight: 300;
        letter-spacing: 0px;
        color: #000000;
    }

    .bottom-custom {
        padding-bottom: 5%;
        padding-left: 8%;
    }

    .div-margin {
        margin-right: 50%;
    }

    .sm-mt-20 {
        margin-top: 10px;
    }

    .page-title {
        margin-bottom: 20px;
        margin-top: 20px;
        font-size: 18px;
        line-height: 0;
        letter-spacing: 6px;
        font-weight: 600;
        text-transform: capitalize;
    }

    h2 {
        font-size: 19px;
        line-height: 26px;
        margin: 4px 0 3px 0;
    }

    p {
        font-size: 12px;
    }

    .sm-content-cont {
        height: 476px;
    }

    .section-title {
        margin: 0;
        padding: 4px 0px 4px 10px;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
        font-weight: 300;
        font-size: 22px;
        line-height: 24px;
        color: #4b4e53;
        border-left: #4b4e53 2px solid;
    }

    input,
    textarea,
    select,
    .login-select,
    .controled {
        border: none;
        border-bottom: 1px solid #a6a7a9;
        border-radius: 0px;
        background: transparent;
        color: #4b4e53;
        font-size: 10px;
        margin: 0;
        outline: medium none;
        padding: 0px 10px 7px 0px;
    }

    google-map-custom {
        width: 720px !important;
        height: 500px !important;
    }

    .customBackImage {
        background-color: #fcfcfc;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .g-recaptcha-outer {
        text-align: center;
        border-radius: 2px;
        background: #f9f9f9;
        border-style: solid;
        border-color: #37474f;
        border-width: 1px;
        border-bottom-width: 2px;
    }

    .g-recaptcha-inner {
        width: 154px;
        height: 82px;
        overflow: hidden;
        margin: 0 auto;
    }

    .g-recaptcha {
        position: relative;
        left: -2px;
        top: -1px;
    }
}

/* Hide mobile menu on desktop */
@media (min-width: 481px) and (max-width: 2560px) {
    .custom-mobile-menu {
        display: none !important;
    }
}

/* Mobile: 320px - 480px */
@media (min-width: 320px) and (max-width: 480px) {
    .logo-img {
        margin-left: -30%;
    }

    img,
    video {
        max-width: 55%;
    }

    .customSliderTextRight {
        width: 96%;
    }

    .textItemDesc {
        margin-top: 50%;
    }

    .sm-content-cont {
        height: 390px !important;
        min-height: unset;
        max-height: unset;
    }

    .customSliderTextLeft {
        width: 100%;
        float: left;
        text-align: left;
        margin-left: 0px;
    }

    .top-font-custom {
        font-size: 30px !important;
        color: #000000 !important;
    }

    .top-font-custom-2 {
        font-size: 25px !important;
        color: #000000 !important;
    }

    .textItemDesc {
        color: #000000 !important;
    }

    .customSliderText {
        margin-top: 17% !important;
        float: left;
    }

    .slide-a {
        color: #1b92ec;
        font-size: 15px;
        margin-right: 6%;
    }

    .top-font-custom-1 {
        font-size: 31px;
        line-height: 40px;
        color: #000000 !important;
    }

    .mobile-custom {
        margin-top: 90% !important;
    }

    .custom-menu {
        display: none !important;
    }

    .customSliderTextRight2 {
        width: 100%;
        float: right;
        text-align: left;
    }

    .div-margin {
        margin-right: 0%;
    }

    .div-margin-lef {
        margin-top: -50%;
        margin-right: 0%;
    }

    .mobile-bottom {
        padding-bottom: 0% !important;
        padding-left: 0% !important;
    }

    .sm-img-bg {
        display: none !important;
    }

    .grey-light-bg {
        margin-top: 21%;
        height: 41px;
    }
}