@import url("../bridge/style.css");

@font-face {
    font-family: 'gotham_blackregular';
    src        : url('https://www.anayael.com/fonts/gotham-black-webfont.eot');
    src        : url('https://www.anayael.com/fonts/gotham-black-webfont.eot?#iefix') format('embedded-opentype'),
        url('https://www.anayael.com/fonts/gotham-black-webfont.woff2') format('woff2'),
        url('https://www.anayael.com/fonts/gotham-black-webfont.woff') format('woff'),
        url('https://www.anayael.com/fonts/gotham-black-webfont.ttf') format('truetype'),
        url('https://www.anayael.com/fonts/gotham-black-webfont.svg#gotham_blackregular') format('svg');
    font-weight   : normal;
    font-style    : normal;

}

@font-face {
    font-family: 'gotham_blackitalic';
    src        : url('https://www.anayael.com/fonts/gotham-blackitalic-webfont.eot');
    src        : url('https://www.anayael.com/fonts/gotham-blackitalic-webfont.eot?#iefix') format('embedded-opentype'),
        url('https://www.anayael.com/fonts/gotham-blackitalic-webfont.woff2') format('woff2'),
        url('https://www.anayael.com/fonts/gotham-blackitalic-webfont.woff') format('woff'),
        url('https://www.anayael.com/fonts/gotham-blackitalic-webfont.ttf') format('truetype'),
        url('https://www.anayael.com/fonts/gotham-blackitalic-webfont.svg#gotham_blackitalic') format('svg');
    font-weight   : normal;
    font-style    : normal;

}

@font-face {
    font-family: 'gotham_mediumregular';
    src        : url('https://www.anayael.com/fonts/gotham-medium-webfont.eot');
    src        : url('https://www.anayael.com/fonts/gotham-medium-webfont.eot?#iefix') format('embedded-opentype'),
        url('https://www.anayael.com/fonts/gotham-medium-webfont.woff2') format('woff2'),
        url('https://www.anayael.com/fonts/gotham-medium-webfont.woff') format('woff'),
        url('https://www.anayael.com/fonts/gotham-medium-webfont.ttf') format('truetype'),
        url('https://www.anayael.com/fonts/gotham-medium-webfont.svg#gotham_mediumregular') format('svg');
    font-weight   : normal;
    font-style    : normal;

}

@font-face {
    font-family: 'gotham_lightregular';
    src        : url('https://www.anayael.com/fonts/gotham-light-webfont.eot');
    src        : url('https://www.anayael.com/fonts/gotham-light-webfont.eot?#iefix') format('embedded-opentype'),
        url('https://www.anayael.com/fonts/gotham-light-webfont.woff2') format('woff2'),
        url('https://www.anayael.com/fonts/gotham-light-webfont.woff') format('woff'),
        url('https://www.anayael.com/fonts/gotham-light-webfont.ttf') format('truetype'),
        url('https://www.anayael.com/fonts/gotham-light-webfont.svg#gotham_lightregular') format('svg');
    font-weight   : normal;
    font-style    : normal;

}

@font-face {
    font-family: 'gotham_lightitalic';
    src        : url('https://www.anayael.com/fonts/gotham-lightitalic-webfont.eot');
    src        : url('https://www.anayael.com/fonts/gotham-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
        url('https://www.anayael.com/fonts/gotham-lightitalic-webfont.woff2') format('woff2'),
        url('https://www.anayael.com/fonts/gotham-lightitalic-webfont.woff') format('woff'),
        url('https://www.anayael.com/fonts/gotham-lightitalic-webfont.ttf') format('truetype'),
        url('https://www.anayael.com/fonts/gotham-lightitalic-webfont.svg#gotham_lightitalic') format('svg');
    font-weight   : normal;
    font-style    : normal;

}

@font-face {
    font-family: 'gotham_mediumitalic';
    src        : url('https://www.anayael.com/fonts/gotham-mediumitalic-webfont.eot');
    src        : url('https://www.anayael.com/fonts/gotham-mediumitalic-webfont.eot?#iefix') format('embedded-opentype'),
        url('https://www.anayael.com/fonts/gotham-mediumitalic-webfont.woff2') format('woff2'),
        url('https://www.anayael.com/fonts/gotham-mediumitalic-webfont.woff') format('woff'),
        url('https://www.anayael.com/fonts/gotham-mediumitalic-webfont.ttf') format('truetype'),
        url('https://www.anayael.com/fonts/gotham-mediumitalic-webfont.svg#gotham_mediumitalic') format('svg');
    font-weight   : normal;
    font-style    : normal;

}

::-moz-selection {
    background: #e73744 !important;
}

::selection {
    background: #e73744 !important;
}

h1,
h2 {
    font-family            : 'gotham_blackregular', Arial, sans-serif !important;
    font-weight            : normal !important;
    font-style             : normal !important;
    -webkit-font-smoothing : antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

h3,
h4,
h5 {
    font-family            : 'gotham_mediumregular', Arial, sans-serif !important;
    font-weight            : normal !important;
    font-style             : normal !important;
    -webkit-font-smoothing : antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.projects_holder article .portfolio_description .portfolio_title {
    font-family            : 'gotham_lightregular', Arial, sans-serif !important;
    font-weight            : normal !important;
    font-style             : normal !important;
    -webkit-font-smoothing : antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-transform         : capitalize !important;
    letter-spacing         : 1px;
    font-size              : 0.8rem;
}

.subtitol {
    color    : #86969b !important;
    font-size: 0.8em;
}


.project-title {
    font-family            : 'gotham_mediumregular', Arial, sans-serif !important;
    font-size              : 1.26rem;
    font-weight            : normal !important;
    font-style             : normal !important;
    -webkit-font-smoothing : antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.project-subtitle,
.project-year {
    font-family            : 'gotham_lightregular', Arial, sans-serif !important;
    font-weight            : normal !important;
    font-style             : normal !important;
    -webkit-font-smoothing : antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.project-subtitle {
    font-size: 0.9rem;
}

.project-year {
    font-size: 0.7rem;
    color    : #86969b;
}

.filter.current span {
    color: #e73845 !important;
}

.figCaptionElement {
    text-align    : center;
    margin-top    : 13px;
    letter-spacing: 0px;
}

.portfolio_navigation .portfolio_next a,
.portfolio_navigation .portfolio_prev a {
    width                : 43px;
    height               : 43px;
    line-height          : 43px;
    text-align           : center;
    font-size            : 28px;
    border               : none outline: 0;
    -o-border-radius     : 24px;
    -moz-border-radius   : 24px;
    -webkit-border-radius: 24px;
    border               : none;
    color                : rgba(231, 56, 69, 1);
}

.portfolio_navigation .portfolio_next a:hover,
.portfolio_navigation .portfolio_prev a:hover {
    background-color: transparent;
}

.content.content_top_margin_none {
    padding-bottom: 33.22px;
}

.project-content {
    margin-top   : 90px;
    margin-bottom: 90px;
}

.project-row {
    margin-top: 45px;
}


.project-image {
    margin-bottom: 45px;
}



.peuFoto {
    text-align             : center;
    padding-bottom         : 50px;
    padding-top            : 15px;
    font-family            : 'gotham_lightregular', Arial, sans-serif !important;
    font-weight            : normal !important;
    font-style             : normal !important;
    -webkit-font-smoothing : antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.filter_holder ul li span {
    padding: 0 16px !important;
}

.projects_holder article .portfolio_description .project_category {
    line-height: 0px !important;
}

p,
.portfolio_slider_holder.standard li .project_category,
.projects_holder.standard article .project_category,
.projects_holder.standard_no_space article .project_category {
    font-family            : 'gotham_lightregular', Arial, sans-serif !important;
    font-weight            : normal !important;
    font-style             : normal !important;
    -webkit-font-smoothing : antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

nav.main_menu>ul>li>a,
.textwidget,
.filter_holder ul li span {
    font-style             : normal;
    font-family            : 'gotham_lightregular' !important;
    font-weight            : normal !important;
    font-style             : normal !important;
    -webkit-font-smoothing : antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-size              : 0.82rem;
}

/*#menuLeft a, #menuRight a*/
.menuLeftItem a,
.menuRightItem a {
    font-style             : normal;
    font-family            : 'gotham_lightregular' !important;
    font-weight            : normal !important;
    font-style             : normal !important;
    -webkit-font-smoothing : antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-transform         : uppercase;
    font-size              : 0.9rem;
    letter-spacing         : 1px;

    color: #425363 !important;

    padding : 8px 0;
    position: relative;
}

/*#menuLeft a:hover, #menuRight a:hover*/
.menuLeftItem a:hover,
.menuRightItem a:hover {
    color: #e73744 !important;
}

/* Effect 3: bottom line slides/fades in */
#menuLeft a,
#menuRight a {}

/*#menuLeft a::after, #menuRight a::after*/
.menuLeftItem a::after,
.menuRightItem a::after {
    position          : absolute;
    top               : 100%;
    left              : 0;
    width             : 20px;
    height            : 2px;
    background        : #e73744;
    content           : '';
    opacity           : 0;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition   : opacity 0.3s, -moz-transform 0.3s;
    transition        : opacity 0.3s, transform 0.3s;
    -webkit-transform : translateY(10px);
    -moz-transform    : translateY(10px);
    transform         : translateY(10px);
}

@media screen and (min-width: 992px) {

    /*********** BOOKS ***********/
    .page-id-15922 .menuLeftItem:nth-child(2) a {
        color: #e73845 !important;
    }

    .page-id-15922 .menuLeftItem:nth-child(2) a {
        -webkit-transition:all 0s ease-in;  
        -moz-transition:all 0s ease-in;  
        -o-transition:all 0s ease-in;  
        transition:all 0s ease-in;
    }
    
    .page-id-15922 .menuLeftItem:nth-child(2) a::after {
        position          : absolute;
        top               : 100%;
        left              : 0;
        width             : 20px;
        height            : 2px;
        background        : #e73744;
        content           : '';
        opacity           : 1 !important;
        -webkit-transition: opacity 0s, -webkit-transform 0s !important;
        -moz-transition   : opacity 0s, -moz-transform 0s !important;
        transition        : opacity 0s, transform 0s !important;
        -webkit-transform : translateY(0px) !important;
        -moz-transform    : translateY(0px) !important;
        transform         : translateY(0px) !important;
    }

    .page-id-15922 .menuLeftItem:nth-child(2) a:hover::after {
        top               : 100% !important;
    }


    /*********** ART ***********/
    .page-id-15924 .menuLeftItem:nth-child(3) a {
        color: #e73845 !important;
    }

    .page-id-15924 .menuLeftItem:nth-child(3) a {
        -webkit-transition:all 0s ease-in;  
        -moz-transition:all 0s ease-in;  
        -o-transition:all 0s ease-in;  
        transition:all 0s ease-in;
    }
    
    .page-id-15924 .menuLeftItem:nth-child(3) a::after {
        position          : absolute;
        top               : 100%;
        left              : 0;
        width             : 20px;
        height            : 2px;
        background        : #e73744;
        content           : '';
        opacity           : 1 !important;
        -webkit-transition: opacity 0s, -webkit-transform 0s !important;
        -moz-transition   : opacity 0s, -moz-transform 0s !important;
        transition        : opacity 0s, transform 0s !important;
        -webkit-transform : translateY(0px) !important;
        -moz-transform    : translateY(0px) !important;
        transform         : translateY(0px) !important;
    }

    .page-id-15924 .menuLeftItem:nth-child(3) a:hover::after {
        top               : 100% !important;
    }



    /*********** ABOUT ***********/
    .page-id-74 .menuRightItem:nth-child(2) a {
        color: #e73845 !important;
    }

    .page-id-74 .menuRightItem:nth-child(2) a {
        -webkit-transition:all 0s ease-in;  
        -moz-transition:all 0s ease-in;  
        -o-transition:all 0s ease-in;  
        transition:all 0s ease-in;
    }
    
    .page-id-74 .menuRightItem:nth-child(2) a::after {
        position          : absolute;
        top               : 100%;
        left              : 0;
        width             : 20px;
        height            : 2px;
        background        : #e73744;
        content           : '';
        opacity           : 1 !important;
        -webkit-transition: opacity 0s, -webkit-transform 0s !important;
        -moz-transition   : opacity 0s, -moz-transform 0s !important;
        transition        : opacity 0s, transform 0s !important;
        -webkit-transform : translateY(0px) !important;
        -moz-transform    : translateY(0px) !important;
        transform         : translateY(0px) !important;
    }

    .page-id-74 .menuRightItem:nth-child(2) a:hover::after {
        top               : 100% !important;
    }



    /*********** HIRE ***********/
    .page-id-16201 .menuRightItem:nth-child(3) a {
        color: #e73845 !important;
    }

    .page-id-16201 .menuRightItem:nth-child(3) a {
        -webkit-transition:all 0s ease-in;  
        -moz-transition:all 0s ease-in;  
        -o-transition:all 0s ease-in;  
        transition:all 0s ease-in;
    }
    
    .page-id-16201 .menuRightItem:nth-child(3) a::after {
        position          : absolute;
        top               : 100%;
        left              : 0;
        width             : 20px;
        height            : 2px;
        background        : #e73744;
        content           : '';
        opacity           : 1 !important;
        -webkit-transition: opacity 0s, -webkit-transform 0s !important;
        -moz-transition   : opacity 0s, -moz-transform 0s !important;
        transition        : opacity 0s, transform 0s !important;
        -webkit-transform : translateY(0px) !important;
        -moz-transform    : translateY(0px) !important;
        transform         : translateY(0px) !important;
    }

    .page-id-16201 .menuRightItem:nth-child(3) a:hover::after {
        top               : 100% !important;
    }
}


/*#menuLeft a:focus, #menuLeft a:hover, 
#menuRight a:focus, #menuRight a:hover*/
.menuLeftItem a:focus,
.menuLeftItem a:hover,
.menuRightItem a:focus,
.menuRightItem a:hover {
    outline: none;
}

/*#menuLeft a:hover::after, #menuRight a:hover::after,
#menuLeft a:focus::after, #menuRight a:focus::after*/
.menuLeftItem a:hover::after,
.menuLeftItem a:hover::after,
.menuRightItem a:hover::after,
.menuRightItem a:hover::after {
    opacity          : 1;
    -webkit-transform: translateY(0px);
    -moz-transform   : translateY(0px);
    transform        : translateY(0px);
}


header.stick_with_left_right_menu:not(.sticky),
header.stick_with_left_right_menu {
    padding   : 8vh 0vw 3vh;
    width     : 100vw;
    background: rgba(255, 255, 255, 0.96);
}


#menuTop {
    display              : grid;
    grid-template-columns: 1fr 170px 1fr;
    grid-template-rows   : 2fr;
    grid-column-gap      : 5%;
    grid-row-gap         : 20%;
    justify-items        : stretch;
    align-items          : end;
}

#menuLeft,
#menuRight {
    display       : flex;
    flex-direction: row;
    flex-wrap     : nowrap;
    align-items   : baseline;
    align-content : stretch;
}

#menuLeft {
    justify-content: flex-end;
}

#menuRight {
    justify-content: flex-start;
}


.menuLeftItem {
    margin-left : 1.6rem;
    margin-right: 1.6rem;
}

.menuRightItem {
    margin-left : 1.6rem;
    margin-right: 1.6rem;
}

#logo {
    width : 100%;
    margin: 0;
}

.mTop {
    margin-top: 16px;
}

.footerPage {
    display           : grid;
    grid-template-rows: 1fr;
    grid-column-gap   : 2%;
    grid-row-gap      : 2%;
    justify-items     : center;
    align-items       : stretch;
}

#imagotipFooter {
    width : 50px;
    margin: 10px 21px;
}

.footer_bottom p a,
.footer_bottom a {
    color                     : #fff;
    transition                : all .15s cubic-bezier(.33, .66, .66, 1);
    -webkit-transition        : all .15s cubic-bezier(.33, .66, .66, 1);
    -moz-transition           : all .15s cubic-bezier(.33, .66, .66, 1);
    -o-transition             : all .15s cubic-bezier(.33, .66, .66, 1);
    transition-timing-function: ease;
}

.footer_bottom p a:hover,
.footer_bottom a:hover {
    color        : #e73845;
    border-bottom: 1px solid #fff;
}

#footerSocialLinks {
    display              : grid;
    grid-template-columns: 50px 50px;
    grid-template-rows   : 50px 50px;
    grid-column-gap      : 16px;
    grid-row-gap         : 10px;
    grid-row-gap         : 10px;
    justify-items        : flex-start;
    align-items          : stretch;
    margin-top           : 16px;
}

#footerSocialLinks a {
    color                     : #00b1ff;
    font-size                 : 1rem;
    line-height               : 50px;
    transition                : all .15s cubic-bezier(.33, .66, .66, 1);
    -webkit-transition        : all .15s cubic-bezier(.33, .66, .66, 1);
    -moz-transition           : all .15s cubic-bezier(.33, .66, .66, 1);
    -o-transition             : all .15s cubic-bezier(.33, .66, .66, 1);
    transition-timing-function: ease;
}

#footerSocialLinks a:hover {
    color: #fff;
}

.footerSocialLinksItem {
    width                : 50px;
    height               : 50px;
    background-color     : #fff;
    border-radius        : 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius   : 25px;
    -o-border-radius     : 25px;
    margin-right         : 0.66rem;
    text-align           : center;

    transition                : all .15s cubic-bezier(.33, .66, .66, 1);
    -webkit-transition        : all .15s cubic-bezier(.33, .66, .66, 1);
    -moz-transition           : all .15s cubic-bezier(.33, .66, .66, 1);
    -o-transition             : all .15s cubic-bezier(.33, .66, .66, 1);
    transition-timing-function: ease;
}


.footerSocialLinksItem:hover {
    background-color          : #e73744;
    color                     : #fff;
    transition                : all .15s cubic-bezier(.33, .66, .66, 1);
    -webkit-transition        : all .15s cubic-bezier(.33, .66, .66, 1);
    -moz-transition           : all .15s cubic-bezier(.33, .66, .66, 1);
    -o-transition             : all .15s cubic-bezier(.33, .66, .66, 1);
    transition-timing-function: ease;
}




.footerIcon {
    font-size: 0.96rem;
}

@media only screen and (min-width: 1200px) {
    .footerPage {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    #logo {
        margin: 0;
    }

    .footerPage {
        grid-template-columns: 1fr 1fr 1fr;
    }
}


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

    #menuTop,
    .filter_outer,
    .separator-red,
    #imagotip {
        display: none;
    }

    .filter_holder ul li span {
        padding: 0 12px !important;
    }

    .filter_holder ul li span {
        font-size: 0.9rem;
    }

    .footerPage {
        grid-template-columns: 1fr 1fr;
    }

    #back_to_top>span {
        display: none;
    }
}

@media only screen and (min-width: 992px) {
    #menuMobile {
        display: none;
    }

    .booksElement {
        margin-top: 46px;
    }

    .rightColAbout {
        padding: 0 15% 0 10%;
    }

    .leftColAbout {
        padding: 0 0 0 5%;
    }

    .leftColHire {
        padding: 0 0 0 10%;
    }
}

.separator-red {
    display: none;
}

header.centered_logo .header_inner_left {
    margin: 0px 0 0px !important;
}

.filter_holder ul li span {
    font-style             : normal;
    font-family            : 'gotham_lightregular' !important;
    font-weight            : normal !important;
    font-style             : normal !important;
    -webkit-font-smoothing : antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-size              : 0.8rem;
}

.projects_holder article .portfolio_description {
    padding: 10px 0 0px !important;
}

.filter_holder ul li span {
    text-transform: capitalize;
    letter-spacing: 0px;
    color         : #86969b;
}

/* text-transform: initial; */

nav.main_menu>ul>li>a {
    color         : #425363 !important;
    text-transform: uppercase;
}

.filter_outer {
    margin: -15px 0 15px !important;
}

nav.main_menu ul li.active a span.underline_dash,
nav.vertical_menu ul li.active a span.underline_dash {
    background-color: #e73845 !important;
}

nav.main_menu ul li.active a span.underline_dash,
nav.main_menu ul li:hover a span.underline_dash,
nav.vertical_menu ul li.active a span.underline_dash,
nav.vertical_menu ul li:hover a span.underline_dash {
    opacity: 1 !important;
}

nav.main_menu ul li a span.underline_dash {
    bottom: 33% !important;

}

nav.main_menu ul li a span.underline_dash,
nav.vertical_menu ul li a span.underline_dash {
    width            : 1em !important;
    transform        : none !important;
    -webkit-transform: none !important;
    height           : 2px;
    margin-left      : -27.5%;
}

#nav-menu-item-16096 nav.main_menu ul li a span.underline_dash {
    left: 21%;
}

#nav-menu-item-16203 nav.main_menu ul li a span.underline_dash {
    left: 25%;
}

nav.main_menu>ul>li:hover>a,
header.sticky nav.main_menu>ul>li:hover>a {
    background-color: #fff !important;
}

nav.main_menu ul li a:hover {
    color: #425363 !important;
}

.masonry_with_space .projects_holder .mix {
    padding: 0 23px 23px 23px !important;

}

.projects_holder.standard article .project_category {
    margin: 8.5px 0 0 !important;
}

.projects_holder article span.text_holder,
.portfolio_main_holder .item_holder.thin_plus_only .portfolio_shader {
    background-color: rgba(231, 56, 69, 0.33) !important;
}

.thin_plus_only_icon {
    display: none !important;
}

.filter_number_of_items {
    visibility: hidden !important;
}

nav.main_menu>ul>li>a {
    padding: 0 22px;
}

a [class^="icon-"],
a [class*=" icon-"] {
    font-size: 1.05em !important;
}

#nav-menu-item-16101 .underline_dash,
#nav-menu-item-16102 .underline_dash,
#nav-menu-item-16103 .underline_dash,
#nav-menu-item-16104 .underline_dash {
    display: none !important;
}

#nav-menu-item-16101 ul li a:hover,
#nav-menu-item-16102 ul li a:hover,
#nav-menu-item-16103 ul li a:hover,
#nav-menu-item-16104 ul li a:hover {
    color: #e73744 !important;
}

#nav-menu-item-16101 {
    margin-left: 38px;
}



#imagotip {
    width : 50px;
    margin: auto;
}

#imagotip img {
    width: 100%;
}

.filter_outer {
    line-height: 20px !important;
}

.content .container .container_inner.default_template_holder,
.content .container .container_inner.page_container_inner {
    padding-top: 0 !important;
}

..content .container .container_inner.page_container_inner {
    padding: 0 !important;
}

/* header */

.header figure {
    display    : block;
    width      : 213px;
    margin     : auto;
    padding-top: 2rem;
}


.header {
    background-color: #fff;
    position        : fixed;
    width           : 100%;
    z-index         : 3;
    margin          : 1rem 0 2rem;
}

.header ul {
    margin          : 0;
    padding         : 0;
    list-style      : none;
    overflow        : hidden;
    background-color: #fff;
}

.header li a {
    display                : block;
    padding                : 1.6rem 20px;
    border-right           : 1px solid #f0f4f9;
    text-decoration        : none;
    text-align             : center;
    font-size              : 1.2rem;
    font-family            : 'gotham_lightregular', Arial, sans-serif !important;
    font-weight            : normal !important;
    font-style             : normal !important;
    -webkit-font-smoothing : antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    letter-spacing         : 1px;
    color                  : #465263 !important;
}

.header li a:hover,
.header .menu-btn:hover {
    background-color: #f0f4f9;
    color           : #e73744 !important;
}



/* menu */

.header .menu {
    clear     : both;
    max-height: 0;
    transition: max-height .2s ease-out;
}

/* menu icon */
.header .menu-icon {
    cursor     : pointer;
    display    : inline-block;
    padding    : 28px 20px;
    position   : relative;
    user-select: none;
    position   : fixed;
    top        : 28px;
    left       : 4.6%;
}

.header .menu-icon .navicon {
    background: #465263;
    display   : block;
    height    : 2px;
    position  : relative;
    transition: background .2s ease-out;
    width     : 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
    background: #465263;
    content   : '';
    display   : block;
    height    : 100%;
    position  : absolute;
    transition: all .2s ease-out;
    width     : 100%;
}

.header .menu-icon .navicon:before {
    top: 5px;
}

.header .menu-icon .navicon:after {
    top: -5px;
}

/* menu btn */

.header .menu-btn {
    display: none;
}

.header .menu-btn:checked~.menu {
    max-height: 74vh;
}

.header .menu-btn:checked~.menu-icon .navicon {
    background: transparent;
}

.header .menu-btn:checked~.menu-icon .navicon:before {
    transform: rotate(-45deg);
}

.header .menu-btn:checked~.menu-icon .navicon:after {
    transform: rotate(45deg);
}

.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
    top: 0;
}

/* 48em = 768px */

@media screen and (min-width: 992px) {
    .header li {
        float: left;
    }

    .header li a {
        padding: 20px 30px;
    }

    .header .menu {
        clear     : none;
        float     : right;
        max-height: none;
    }

    .header .menu-icon {
        display: none;
    }
}












@media screen and (max-width: 25em) {

    .codrops-icon span {
        display: none;
    }

}

/* END OF Hover Menú */



@media screen and (min-width: 800px) {
    #nav-menu-item-15933 {
        margin-right: 150px !important;
    }

    #nav-menu-item-16098 {
        margin-left: 150px !important;
    }


}




@media screen and (min-width: 0px) and (max-width: 768px) {

    .masonry_with_space .projects_holder.v4 .mix,
    .masonry_with_space .projects_holder.v4 .qode-portfolio-masonry-gallery-grid-sizer,
    .masonry_with_space .projects_holder.v5 .mix,
    .masonry_with_space .projects_holder.v5 .qode-portfolio-masonry-gallery-grid-sizer,
    .masonry_with_space .projects_holder.v6 .mix,
    .masonry_with_space .projects_holder.v6 .qode-portfolio-masonry-gallery-grid-sizer {
        width: 100% !important;
    }

    .fixedElement {
        padding-bottom: 33px;
    }

    .booksElement {
        margin-top: 40px;
    }
}


@media screen and (min-width: 768px) and (max-width: 992px) {

    .masonry_with_space .projects_holder.v4 .mix,
    .masonry_with_space .projects_holder.v4 .qode-portfolio-masonry-gallery-grid-sizer,
    .masonry_with_space .projects_holder.v5 .mix,
    .masonry_with_space .projects_holder.v5 .qode-portfolio-masonry-gallery-grid-sizer,
    .masonry_with_space .projects_holder.v6 .mix,
    .masonry_with_space .projects_holder.v6 .qode-portfolio-masonry-gallery-grid-sizer {
        width: 50% !important;
    }

    .fixedElement {
        padding-bottom: 33px;
    }

    .booksElement {
        margin-top: 46px;
    }
}

@media screen and (min-width: 887px) and (max-width: 992px) {

    .fixedElement {
        padding-bottom: 33px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {

    .fixedElement {
        padding-bottom: 33px;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1450px) {

    .fixedElement {
        position: absolute !important;
        left    : 5%;
    }

    .colRightProjects {
        padding-bottom: 45px !important;
        margin-left   : 22% !important;
        width         : 85%;
    }


}



@media screen and (min-width: 992px) and (max-width: 1450px) {

    .masonry_with_space .projects_holder.v4 .mix,
    .masonry_with_space .projects_holder.v4 .qode-portfolio-masonry-gallery-grid-sizer,
    .masonry_with_space .projects_holder.v5 .mix,
    .masonry_with_space .projects_holder.v5 .qode-portfolio-masonry-gallery-grid-sizer,
    .masonry_with_space .projects_holder.v6 .mix,
    .masonry_with_space .projects_holder.v6 .qode-portfolio-masonry-gallery-grid-sizer {
        width: 33.33% !important;
    }

    .full_width .projects_holder_outer.v4 .hover_text,
    .full_width .projects_holder_outer.v4 .standard,
    .full_width .projects_holder_outer.v5 .hover_text,
    .full_width .projects_holder_outer.v5 .standard,
    .full_width .projects_holder_outer.v6 .hover_text,
    .full_width .projects_holder_outer.v6 .standard {
        width: 95% !important;
    }

}



@media only screen and (min-width: 1450px) {

    header.stick_with_left_right_menu nav.main_menu.left_side>ul,
    header.stick_with_left_right_menu nav.main_menu.right_side {
        line-height: 10;
    }

    .full_width .projects_holder_outer.v4 .hover_text,
    .full_width .projects_holder_outer.v4 .standard,
    .full_width .projects_holder_outer.v5 .hover_text,
    .full_width .projects_holder_outer.v5 .standard,
    .full_width .projects_holder_outer.v6 .hover_text,
    .full_width .projects_holder_outer.v6 .standard {
        width: 95% !important;
    }

    .fixedElement {
        position: absolute !important;
        left    : 5%;
    }

    .colRightProjects {
        padding-bottom: 45px !important;
        margin-left   : 22% !important;
        width         : 85%;
    }

}


@media only screen and (min-width: 1700px) {

    header.stick_with_left_right_menu:not(.sticky),
    header.stick_with_left_right_menu {
        padding   : 4vh 20vw;
        width     : 60vw;
        background: rgba(255, 255, 255, 0.96);
    }

    .fixedElement {
        position: absolute !important;
        left    : 5%;
    }

    .colRightProjects {
        padding-bottom: 45px !important;
        margin-left   : 22% !important;
        width         : 85%;
    }
}



@media screen and (min-width: 768px) {
    .video-item {
        width        : 650px;
        max-width    : 100%;
        margin       : auto !important;
        margin-bottom: 44px !important;
    }

    .col-left-custom {
        padding-right: 7%;
    }
    .col-right-custom {
        padding-left: 7%;
    }
}

@media screen and (max-width: 768px) {
    .video-item {
        margin       : auto !important;
        margin-bottom: 44px !important;
    }

}