/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
    background-color: #fff !important;
    font-family: 'Aktiv Grotesk Corp' !important;
}

.cs-max-width {
    max-width: 1200px;
}

.font-light-18 {
    font-size: 18px;
    font-weight: 300;
    font-style: normal;
}

.font-light-22 {
    font-size: 22px;
    font-weight: 300;
    font-style: normal;
}

.font-regular-18 {
    font-size: 18px;
    font-weight: normal;
    font-style: normal;
}

.font-regular-22 {
    font-size: 22px;
    font-weight: normal;
    font-style: normal;
}

.font-regular-29 {
    font-size: 29px;
    font-weight: normal;
    font-style: normal;
}

.font-medium-18 {
    font-size: 18px;
    font-weight: 500;
    font-style: normal;
}

.font-medium-20 {
    font-size: 20px;
    font-weight: 500;
    font-style: normal;
}

.font-medium-22 {
    font-size: 22px;
    font-weight: 500;
    font-style: normal;
}

.font-bold-28 {
    font-size: 28px;
    font-weight: bold;
    font-style: normal;
}

.font-bold-36 {
    font-size: 36px;
    font-weight: bold;
    font-style: normal;
}

.font-bold-45 {
    font-size: 45px;
    font-weight: bold;
    font-style: normal;
}



/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: hidden;
    background: #fbfbfb;
}

#load {
    transform: rotate(0deg);
    transition: all 1s linear;
    max-width: 600px;
    max-height: 600px;
    position: fixed;
    top: calc(50% - 180px);
    left: calc(50% - 300px);
    margin: 0 auto;
}

#load img {
    max-width: 600px;
    height: auto;
}


/*--------------------------------------------------------------
# Top Nav
--------------------------------------------------------------*/
.nav-icon i {
    font-size: 28px;
}

.nav-icon div {
    text-align: right;
}

.mobile-navbar {
    position: fixed;
    top: -180%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background-color: #fff;
    min-width: 300px;
    height: 100vh;
}

.nav-splitter {
    background-color: black;
    border: 1px solid black;
    width: 100%;
    border-width: 0.01em;
    position: relative;
    z-index: 9999;
}

.nav-m-wrap {
    height: 40px;
}

/*
.nav-m div:nth-child(odd){
    height: 60px;
    border-bottom: 1px solid black;
}
*/

/*--------------------------------------------------------------
# Main Project
--------------------------------------------------------------*/
#featured-project {
    width: 100%;
    height: auto;
}

.hero-image-wrapper {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100% !important;
    height: 73vh;
    overflow: hidden;
}

.hero-image-wrapper img {
    opacity: 0;
}

.cs-grid {
    float: left;
    padding: 0 5px 0 15px;
    margin-right: -12px;
}

.thumb-container {
    transition: transform .2s;
    cursor: pointer;
}

.thumb-container:hover {
    -ms-transform: scale(0.99);
    -webkit-transform: scale(0.99);
    transform: scale(0.99);
}

.project-name {}

.project-desc {
    font-size: 18px;
    font-weight: 300;
    font-style: normal;
}


@media only screen and (max-width: 600px) {
    #featured-project {
        width: 100%;
        height: auto;
        padding: 20px 0px 0px 0px !important;
    }

    .hero-image-wrapper {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 100% !important;
        height: 320px;
        overflow: hidden;
        background-image: url('assets/img/diocles_main_page_full.jpg')
    }

}

/*--------------------------------------------------------------
# Project
--------------------------------------------------------------*/
.image-wrapper {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100% !important;
    height: 320px;
    transition: transform .2s;
    cursor: pointer;
}

.image-wrapper:hover {
    -ms-transform: scale(0.98);
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
}

.image-wrapper img {
    opacity: 0;
}

.coming-soon {
    opacity: 0;
    transition: 0.5s;
    cursor: auto;
}

.project-1:hover .coming-soon, .project-2:hover .coming-soon, .project-3:hover .coming-soon, .project-4:hover .coming-soon,
.project-5:hover .coming-soon, .project-6:hover .coming-soon{
    opacity: 0.8;
    -ms-transform: scale(0.98);
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
}

.project-1:hover .image-wrapper, .project-2:hover .image-wrapper, .project-3:hover .image-wrapper, .project-4:hover .image-wrapper,
.project-5:hover .image-wrapper,.project-6:hover .image-wrapper
{
    -ms-transform: scale(0.98);
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
}



/*--------------------------------------------------------------
# Back-to-top
--------------------------------------------------------------*/
.back-to-top {
    width: 100%;
}

.back-to-top .border {
    background-color: #d3d3d3;
    border: 1px solid #d3d3d3;
    width: 100%;
}

.back-to-top .text {
    float: right;
    background-color: white;
    margin-top: -15px;
    padding: 0px 10px 0px 10px;
    margin-right: -10px;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
    width: 100%;
}

.social-link {
    display: table;
    margin: 0 auto;
    margin-top: -12px;
}

.social-link a {
    float: left;
    padding: 10px;
}

.social-link a img {
    width: 32px;
}


/*--------------------------------------------------------------
# About Page
--------------------------------------------------------------*/
/*
.about-featured-image img {
    transition: transform .2s;
    cursor: pointer;
}

.about-featured-image img:hover {
    -ms-transform: scale(0.98);
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
}
*/


@media only screen and (max-width: 600px) {
    .about-featured-image {
        overflow: hidden;
    }

    .about-featured-image img {
        min-width: 140%;
        left: 35%;
        position: relative;
        transform: translateX(-50%);
    }
}


/*--------------------------------------------------------------
# Illustration
--------------------------------------------------------------*/
.illustration-image-wrapper {
    background-repeat: no-repeat;
    background-size: 100% 105%;
    background-position: center;
    width: 100% !important;
    height: 80%;
    cursor: pointer;
}

.illustration-image-wrapper img {
    opacity: 0;
}


.illustration-desc-1 {
    display: none;
    background-color: #d8f1ed;
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    padding: 5px 0px 25px 0px;
}

.illustration-1:hover + .illustration-desc .illustration-desc-1 {
    display: block;
}

.illustration-desc-2 {
    display: none;
    background-color: #f4e2ff;
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    padding: 5px 0px 25px 0px;
}

.illustration-2:hover + .illustration-desc .illustration-desc-2 {
    display: block;
}

.illustration-desc-3 {
    display: none;
    background-color: #def1fe;
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    padding: 5px 0px 25px 0px;
}

.illustration-3:hover + .illustration-desc .illustration-desc-3 {
    display: block;
}



@media only screen and (max-width: 600px) {

    .illustration-desc-1 {
        display: block;
        background-color: #fff;
        text-align: center;
        font-size: 22px;
        font-weight: 500;
        padding: 10px 0px 25px 0px;
    }

    .illustration-desc-2 {
        display: block;
        background-color: #fff;
        text-align: center;
        font-size: 22px;
        font-weight: 500;
        padding: 10px 0px 25px 0px;
    }

    .illustration-desc-3 {
        display: block;
        background-color: #fff;
        text-align: center;
        font-size: 22px;
        font-weight: 500;
        padding: 10px 0px 25px 0px;
    }

}


/*--------------------------------------------------------------
# Illustration
--------------------------------------------------------------*/
.client-logo img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


@media only screen and (max-width: 600px) {
    .client-logo img {
        transform: scale(0.60);
    }
}


/*--------------------------------------------------------------
# Contact Page
--------------------------------------------------------------*/
.cs-send-btn {
    border-radius: 0px;
    width: 120px;
}

.cs-send-btn:hover {
    background-color: black;
    color: white;
}

@-moz-document url-prefix() {
    textarea {
        height: 2em;
    }
}

.validate {
  display: none;
}

.relative .progress, .relative .success, .relative .failed{
    display: none;
}
/*
.contact-image {
    cursor: pointer;
    transition: transform .2s;
}

.contact-image:hover {
    -ms-transform: scale(0.98);
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
}
*/

/*--------------------------------------------------------------
# Diocles Page
--------------------------------------------------------------*/
.diocles-header-image-wrapper {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100% !important;
    height: 60vh;
    overflow: hidden;
}

.diocles-header-image-wrapper img {
    opacity: 0;
}

/*
.diocles-header-image-wrapper:hover {
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
*/

.diocles-image {
    transition: transform .2s;
}

/*
.diocles-image:hover {
    -ms-transform: scale(0.98);
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
}
*/

.diocles-bottom-image-wrapper {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100% !important;
    height: 70vh;
    overflow: hidden;
}

/*
.diocles-bottom-image-wrapper:hover {
    -ms-transform: scale(0.98);
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
}
*/

.diocles-bottom-image-wrapper img {
    opacity: 0;
}

@media only screen and (max-width: 600px) {
    .diocles-header-image-wrapper {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: left;
        width: 100% !important;
        height: 320px !important;
        overflow: hidden;
    }

    .diocles-bottom-image-wrapper {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 100% !important;
        height: 363px;
        overflow: hidden;
    }
}