/**************************************/
/*           CSS STYLES               */
/*                                    */
/* Author : Marie-Hélène Lebée        */
/**************************************/


/**************************************/
/**************** GENERAL *************/
/**************************************/

body {
    
    font-family: helvetica, sans-serif;
    text-transform: uppercase;
    overflow-x: hidden;
 }

 .background-black {
    background-color: #000000;
 }



/**************************************/
/**************** MENU ****************/
/**************************************/


/* navbar-inverse = white on black */
/* navbar-default = black on white */

/* barre supérieure*/
.navbar-inverse,
.navbar-default   {
    border: none;
}

.navbar-inverse .sidebar-name {
    color: #fff;
}

.navbar-inverse .navbar-nav>li>a {
    color: #fff;
}


.navbar-inverse .navbar-nav>li>a:hover {
    color: #999;
}

.navbar-inverse .navbar-nav>.active>a, 
.navbar-inverse .navbar-nav>.active>a:focus, 
.navbar-inverse .navbar-nav>.active>a:hover {
    background-color: rgba(0, 0, 0, 0);
    color: #999;
}


.navbar-default .navbar-nav>li>a {
    color: #000;
}

.navbar-default .navbar-nav>li>a:hover {
    color: #999;
}

.navbar-default .navbar-nav>.active>a, 
.navbar-default .navbar-nav>.active>a:focus, 
.navbar-default .navbar-nav>.active>a:hover {
    background-color: rgba(255, 255, 255, 0);
    color: #999;
}


.side-nav>li>ul {
    padding: 0;
}

.side-nav>li>ul>li>a {
    display: block;
    padding: 10px 15px 10px 38px;
    text-decoration: none;   
}

.navbar-nav>li>a {
    padding: 0;
}

.navbar-nav>.sidebar-brand>a {
    line-height: 0.9;
    height: 65px;
    font-size: 40px;      
    font-weight: bold;
    margin: 5px 0 15px 0;
}

.navbar-nav>.sidebar-name>a {
    font-size: 24px;
    line-height: 0.9;
}


.navbar-nav>.sidebar-item>a {
    font-size: 18px;  
    line-height: 1; 
}


/************************************** /
/****** MENU MEDIA QUERIES ************ /

/* Special desktop */
@media(min-width:768px) {
    
    .navbar-default,
    .navbar-inverse {
        background-color: rgba(0, 0, 0, 0);
    }

    .side-nav {
        position: fixed;
        top: 50px;
        left: 50px;
        width: 320px;
        margin-left: 0px;
        border: none;
        border-radius: 0;
        overflow-y: auto;
        bottom: 0;
        overflow-x: hidden;
        padding-bottom: 40px;
    }

    .side-nav>li>a {
        width: 320px;
    }

    .side-nav li a:hover,
    .side-nav li a:focus {
        outline: none;      
    }

}



/* Special mobile */
@media(max-width:767px) {
    
    .navbar-default {
        background-color: #FFF;
    }

    .navbar-inverse {
        background-color: #000;
    }

    .side-nav {
       padding-left: 30px;
    }
}



/**************************************/
/**************** IMAGES **************/
/**************************************/
.image-portfolio {
    margin-bottom: 50px;
    border: 1px #000 solid;
}



.arrow-click a {
    display: block;
    width: 108px;
    height: 90px;
    background: url("../images/arrow-right-sprite.png") top right no-repeat;
    margin: 0 auto;
}

.arrow-click a:hover {
    background-position: top left;
}

.container-videos {
    max-width: 800px;
    margin: 0 auto;
}

.video {
    margin-bottom: 50px;
}

/* Special desktop */
@media(min-width:768px) {

    .container-images {
        padding-left: 320px;
        padding-top: 130px;
    }
    .arrow-click {
        margin-top: 500px;  
    }


}


/* Special mobile */
@media(max-width:767px) {
    .container-images {
        padding-top: 50px;
    }

    .arrow-click {
        margin-top: 200px;  
    }

}


/* Arrow doesn't appear except on big screens */
@media(min-width:1340px) {
    .arrow-scroll {
        position: fixed;
        bottom: 20px;
        right: 20px;
    }
}

@media(max-width:1339px) {
 .arrow-scroll {
        display: none;
    }
}






/**************************************/
/**************** TEXT ****************/
/**************************************/

.item-presentation {
    max-width: 800px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.item-title {
    font-weight: bold;
}

.item-paragraph {
    color: #999;
    margin-bottom: 40px;
}

.art-director-introduction {
    max-width: 400px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    font-weight: bold;
    color: #FFF;
}

.art-director-presentation {
    max-width: 400px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    color: #FFF;
    line-height: 0.6;
    margin-bottom: 50px;
}

.art-director-presentation a {
    color: #FFF;
}

.contact, 
.contact a {
    text-transform: lowercase;
    color: #FFF;

}


/* Special desktop */
@media(min-width:768px) {
    
    .art-director-introduction {
        font-size: 44px;
        line-height: 42px;
    }

    .contact,
    .contact-arrow {
        font-size: 20px;
        line-height: 24px;
        margin-top: 200px;
    }

}

/* Special mobile */
@media(max-width:767px) {

    .art-director-introduction {
        font-size: 20px;
    }
}