/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 15/05/2018, 17:08:47
    Author     : alefrogers
*/


/* #### Fonts #### */

@font-face {
    font-family: Gotham;
    src: url(../fonts/GothamLight.otf);
    font-weight: 300;
}

@font-face {
    font-family: Gotham;
    src: url(../fonts/Gotham Book Regular.otf);
    font-weight: 400;
}

@font-face {
    font-family: Gotham;
    src: url(../fonts/Gotham-Black.otf);
    font-weight: 600;
}


/* #### Globals #### */

.opacity-0{
    opacity: 0 !important;
}

.opacity-1{
    opacity: 1 !important;
}

.black-line{
    background-color: black;
    height:10px;
    width: 100%;
}

body{
    width: 100%;
    background: url(../images/background-guy.jpg) no-repeat top center;
    background-size: cover;
    font-family: Gotham;
    color:#ffdf00;
    font-size: 16px;
}

#content-all{
    position: relative;
    overflow: hidden;
}

.remove-padding{
    padding:0;
}

.transition-0_2 {
    transition: all 0.2s ease-in-out 0s;
}

.transition-0_5 {
    transition: all 0.5s ease-in-out 0s;
}

.transition-0_8 {
    transition: all 0.8s ease-in-out 0s;
}

.transition-1_0 {
    transition: all 1s ease-in-out 0s;
}

.align-items{
    align-items: center;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    justify-content: center;
    -webkit-justify-content: center;
}

.hidden{
    display: none;
}


/* #### Section menu open #### */

#container-menu-open{
    height: 100%;
    width: 100%;
    position: absolute;
    top: -100%;
    left:0;
    background-color: #eaeaea;
    z-index: 2;
}

#container-menu-open ul{
    list-style: none;
    color:#393939;
    font-weight: 300;
    font-size: 36px;
    text-transform: uppercase;
    padding-left: 0;
    margin: 0;
}

#container-menu-open ul li{
    padding:15px 0 15px 0;
    cursor: pointer;
}

#container-menu-open ul li a{
    color:#393939;
}

#container-menu-open ul li:hover{
    background-color: #393939;
    color:#ffdf00;
    font-weight: 600;
}

#container-menu-open ul li:hover a{
    color:#ffdf00;
    text-decoration: none;
}

#container-menu-open ul li a:focus{
    text-decoration: none;
}

#container-menu-open .active-item{
    background-color: #393939;
    color:#ffdf00;
    font-weight: 600;
}

#container-menu-open p{
    font-weight: 300;
    color:#393939;
}

#container-menu-open .option-left span{
    position: relative;
    right: 91px;
}

#container-menu-open .text-div-barnett{
    text-align: justify;
    display: none;
    padding-right: 30px;
}

#container-menu-open .text-div-barnett.open-text{
    display: block;
}



/* #### Custom Menu #### */

#container-menu-closed .content-menu{
    margin-top: 20px;
    border-bottom: 2px solid #ffdf00;
}

.custom-toggle{
    width: 32px;
    height: 28px;
    position: absolute;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    left:-30px;
    top:34px;
}

.custom-toggle .icon-bar{
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #ffdf00;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.custom-toggle .icon-bar:nth-child(1) {
    top: 0px;
}

.custom-toggle .icon-bar:nth-child(2),.custom-toggle .icon-bar:nth-child(3) {
    top: 10px;
}

.custom-toggle .icon-bar:nth-child(4) {
    top: 20px;
}

#container-menu-closed .category-select{    
    font-weight: 600;
    color:white;
    font-size: 36px;
    text-transform: uppercase;
    cursor: pointer;
}

#container-menu-closed .active-menu.content-menu{
    border: none;
}


#container-menu-closed .category-select .category{
    position: relative;
}

#container-menu-closed .category-select .category .effect{
    top:33px;
    position: absolute;
    left: 0;
    opacity: 0;
}

#container-menu-closed .category-select .category .visible{
    position:relative;
    display: inline-block;
    width: 600px;
}

#container-menu-closed .category-select.active .category .visible{
    animation: old-category 0.7s 0s linear 1;
}

#container-menu-closed .category-select.active .category .effect{
    animation: new-category 0.7s 0s linear 1;
}

#container-menu-closed .small-text{
    font-size: 10px;
}


/* SECTION CARD VIDEOS */

#card-videos{
    margin-top:40px;
}

#card-videos .featured-cards{
    padding: 0;
}

#card-videos .card-row:nth-child(even){
    position: relative;
    right: 15px;
}

#card-videos .card{
    margin-bottom: 14px;
}

#card-videos .card-row{
    margin-bottom: 30px;
}

#card-videos .cards-hidden{
    display: none;
}

#card-videos .card img{
    width: 100%;
    padding-bottom: 3px;    
    border-bottom: 2px solid #ffdf00;
    filter: grayscale(100%);
}

#card-videos .card:hover img{
    filter:none;
    border-bottom: 5px solid #ffdf00;
    padding-bottom: 0px;      
}

#card-videos .card .text-div .title-feature{
    font-weight: 600;   
    text-transform: uppercase;  
    margin-right: 8px;
}

#card-videos .card .text-div .title{
    font-weight: 300;   
    text-transform: uppercase; 
}

#card-videos .card .text-div{
    margin: 0;
}

#card-videos .card .img-div{
    margin: 0;
}

/* Modal Style */

#modal-video{
    background-color: black;
}

#modal-video .modal-content{
    background-color: #303030;
    min-height: 550px;
    padding: 40px;
}

#modal-video .modal-content h2{
    margin: 0;
    text-transform: uppercase;
}

#modal-video .modal-content .category-title{
    color:white;
    font-size: 32px;
    font-weight: 600;
}

#modal-video .modal-content .client-title{
    font-size: 22px;
    font-weight: 600;
}

#modal-video .modal-content .close-button{
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

#modal-video .modal-content .close-button img{
    width: 42px;
}

#modal-video .modal-content .video{
    opacity: 0;
}

#modal-video .modal-content .photos-div #carousel-card .carousel-inner img{
    margin: 0 auto;    
}

/* Responsive */

@media(max-width:768px){
    .custom-toggle{
        position: relative;
        display: inline-block;
        left: 0;
        top: 4px;
        margin-right: 5px;
    }

    #container-menu-closed .small-text{
        display: none;
    }

    #container-menu-closed .category-select .category .visible{
        width: 202px;
    }

    #container-menu-closed .category-select{
        font-size: 22px;
    }

    #container-menu-open ul{
        font-size: 22px;
    }

    #card-videos .card .img-div{
        margin: initial;
    }

    #card-videos .commum-cards{
        padding: 0;
    }

    #card-videos .card-row:nth-child(even){
        position: relative;
        right: 0;
    }

    #card-videos .card-row{
        margin-bottom: 0px;
    }

    #container-menu-open .option-left span{
        right: 57px;
    }


}