@charset "utf-8";

/*
Projet : Olivier Cez Portfolio CSS
Author : Olivier Cez
Version : 1.0
Date : November 2015
*/





/*--------------------------------------------------*/
/*-------------------- PATTERN ---------------------*/
/*--------------------------------------------------*/







/*--------------------------------------------------*/
/*---------------------- HEADER --------------------*/
/*--------------------------------------------------*/



.logo {
    display: inline-block;
    margin: 0;
    padding-left: 0.25em;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.logo:hover {
    opacity: .75;
    -webkit-transform: scale(0.85);
    transform: scale(0.85);
}

.menu li {
    display: inline-block;
}

.menu a {
    display: block;
    font-weight: 300;
    color: #ededed;
    padding: 1.7em 0.5em;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.menu a:hover {
    opacity: .35;
    color: #fff;
}

.menu .is-active {
    background: rgba(200, 200, 200, 0.55);
    color: #1C1F26;
}

#header .parallax-bg-accueil {
    position: relative;
    background: url('../img/img_accueil.jpg') no-repeat;
    background-size: 110%;
    background-position: center top;
    height: 340px;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

#header .parallax-bg-creations {
    position: relative;
    background: url('../img/img_creations.jpg') no-repeat;
    background-size: 110%;
    background-position: center top;
    height: 340px;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

#header .parallax-bg-uxdesign {
    position: relative;
    background: url('../img/img_ux_design.jpg') no-repeat;
    background-size: 110%;
    background-position: center 20%;
    height: 340px;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}


#header .parallax-bg-photographies {
    position: relative;
    background: url('../img/img_photographies.jpg') no-repeat;
    background-size: 110%;
    background-position: center 20%;
    height: 340px;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

#header .parallax-bg-illustrations {
    position: relative;
    background: url('../img/img_illustrations.jpg') no-repeat;
    background-size: 110%;
    background-position: center 20%;
    height: 340px;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}


.fixed-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    background: rgba(60, 60, 60, 0.5);
}



/*--------------------------------------------------*/
/*--------------------- BURGER ---------------------*/
/*--------------------------------------------------*/

.btn-menu {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    background: url('../img/menu.png') no-repeat;
    cursor: pointer;
    display: none;
}




/*--------------------------------------------------*/
/*-------------------- CONTENT ---------------------*/
/*--------------------------------------------------*/

#first-part div {
    position: relative;
    top: -60px;
}

#first-part p:first-child {
    position: relative;
    top: 30px;
}

#first-part img {
    width: 120px;
    border: 2px solid #fff;
    border-radius: 50%;
    margin-bottom: 1em;
}

#first-part p,
#second-part p,
#third-part p,
#fourth-part p,
#fifth-part p,
#sixth-part {
    padding: 0 8.333%;
}

#second-part article p, #third-part article p {
    padding: 0;
}

#second-part img {
    border: 1px solid #eee;
}

section .bg-blanc {
    background-color: #eee;
}

section article {
    padding: 20px;
}

#third-part article {
    padding: 20px 20px 0 20px;
}

#third-part .grid {
    border-bottom: 1px solid #ddd;
}

#third-part .grid:last-child {
    border-bottom: 0;
}


#fourth-part .photo, #fifth-part .photo {
    padding: 0;
}

#second-part .grid, #fourth-part .grid, #fifth-part .grid {
    margin: 0;
}

div .video p {
    margin: 0;
}



/*--------------------------------------------------*/
/*---------------------- GRID ----------------------*/
/*--------------------------------------------------*/


.wrap {
    padding-left: 10px;
    padding-right: 10px;
}

@media (min-width: 480px) {
        .wrap {
            max-width: 960px;
            margin-left: auto;
            margin-right: auto;
        }

        .grid:after {
            display: table;
            content: "";
            clear: both;
        }

        .grid {
            margin-right: -10px;
            margin-left: -10px;
        }

        .grid [class*="col-"] {
            float: left;
            padding-left: 10px;
            padding-right: 10px;
        }



        /*--- col ---*/


        .col-1 {
            width: 8.333%;
        }

        .col-2 {
            width: 16.667%;
        }

        .col-3 {
            width: 25%;
        }

        .col-4 {
            width: 33.333%;
        }

        .col-5 {
            width: 41.667%;
        }

        .col-6 {
            width: 50%;
        }

        .col-7 {
            width:58.333%;
        }

        .col-8 {
            width: 66.667%;
        }

        .col-9 {
            width: 75%;
        }

        .col-10 {
            width: 83.333%;
        }

        .col-11 {
            width: 91.667%;
        }

        .col-12 {
            width: 100%;
        }



        .table {
            display: table;
            width: 100%;
        }

        .fixed {
            table-layout: fixed;
        }

        .row {
            display: table-row;
        }

        .cell {
            display: table-cell;
            vertical-align: top;
        }
}


/*--------------------------------------------------*/
/*--------------------- BUTTONS --------------------*/
/*--------------------------------------------------*/

.btn, .btn:visited {
    position: relative;
    display: inline-block;
    color: #fff;
    background-color: #333;
    border: none;
    border-radius: 3px;
    padding: 0 1.5em;
    line-height: 2.5em;
    height: 2.5em;
    white-space: nowrap; /*avec nowrap, le bouton n'est jamais coupé au milieu d'un mot*/
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.btn:hover {
    color: #333;
    background-color: #fff;
}

.btn:active {
    top: 1px;
}

.btn--secondary, .btn--secondary:visited {
    background-color: #ededed;
    color:#666;
}

.btn--secondary:hover {
    background-color: #666;
    color:#ededed;
}

.btn--small {
    font-size: .75em;
}

.btn--large {
    font-size: 1.5em;
}





/*--------------------------------------------------*/
/*--------------------- THUMBS ---------------------*/
/*--------------------------------------------------*/

.thumb {
    width: 100%;
}

.thumb a {
    display: block;
}

.thumb figure {
    margin: 0;
    position: relative;
}

.thumb figcaption {
    opacity: 0;
    position: absolute;
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.thumb-txt {
    height: 38%;
    transform: translateY(120%);
}

.thumb a:hover figcaption {
    opacity: 1;
}

.thumb-title {
    font-size: 1.250em;
    font-weight: 300;
    color: #fff;
    margin: 0;
}

#fourth-part .thumb-txt, #fifth-part .thumb-txt {
    height: 30%;
    transform: translateY(120%);
}

#fourth-part .thumb-title, #fifth-part .thumb-title {
    font-size: 2.5em;
}






/*--------------------------------------------------*/
/*-------------------- SOCIALICON ------------------*/
/*--------------------------------------------------*/


#footer li {
    margin: 0 1em;
}

#socialicon li, #socialicon a {
    display: inline-block;
    width: 41px;
    height: 41px;
}

#linkedin {
    left: 0;
    background: url('../img/lk_icon_s.png') 0 0 no-repeat;
}

#linkedin:hover {
    background: url('../img/lk_icon_s.png') -41px 0 no-repeat;
}

#viadeo {
    left: 0;
    background: url('../img/via_icon_s.png') 0 0 no-repeat;
}

#viadeo:hover {
    background: url('../img/via_icon_s.png') -41px 0 no-repeat;
}

#twitter {
    left: 0;
    background: url('../img/tw_icon_s.png') 0 0 no-repeat;
}

#twitter:hover {
    background: url('../img/tw_icon_s.png') -41px 0 no-repeat;
}

#mail {
    left: 0;
    background: url('../img/ml_icon_s.png') 0 0 no-repeat;
}

#mail:hover {
    background: url('../img/ml_icon_s.png') -41px 0 no-repeat;
}




/*--------------------------------------------------*/
/*--------------------- HELPER ---------------------*/
/*--------------------------------------------------*/

.txt-center {
    text-align: center;
}

.txt-left {
    text-align: left;
}

.txt-right {
    text-align: right;
}


.v-top {
    vertical-align: top;
}

.v-middle {
    vertical-align: middle;
}

.v-bottom {
    vertical-align: bottom;
}



/* ------------Spacing helper------------
m, p = margin, padding
a, t, r, l, b = all, top, right, left, bottom
s, m, l, n = small, medium, large, none*/


/* ------------padding------------*/

.pan {
    padding: 0 !important;
}

.pas {
    padding: 20px !important;
}

.pam {
    padding: 40px !important;
}

.pal {
    padding: 60px !important;
}





.ptn {
    padding-top: 0 !important;
}

.pts {
    padding-top: 20px !important;
}

.ptm {
    padding-top: 40px !important;
}

.ptl {
    padding-top: 60px !important;
}





.pbn {
    padding-bottom: 0 !important;
}

.pbs {
    padding-bottom: 20px !important;
}

.pbm {
    padding-bottom: 40px !important;
}

.pbl {
    padding-bottom: 60px !important;
}






.pln {
    padding-left: 0 !important;
}

.pls {
    padding-left: 20px !important;
}

.plm {
    padding-left: 40px !important;
}

.pll {
    padding-left: 60px !important;
}





.prn {
    padding-right: 0 !important;
}

.prs {
    padding-right: 20px !important;
}

.prm {
    padding-right: 40px !important;
}

.prl {
    padding-right: 60px !important;
}




/* ------------margin------------*/

.man {
    margin: 0 !important;
}

.mas {
    margin: 20px !important;
}

.mam {
    margin: 40px !important;
}

.mal {
    margin: 60px !important;
}





.mtn {
    margin-top: 0 !important;
}

.mts {
    margin-top: 20px !important;
}

.mtm {
    margin-top: 40px !important;
}

.mtl {
    margin-top: 60px !important;
}





.mbn {
    margin-bottom: 0 !important;
}

.mbs {
    margin-bottom: 20px !important;
}

.mbm {
    margin-bottom: 40px !important;
}

.mbl {
    margin-bottom: 60px !important;
}






.mln {
    margin-left: 0 !important;
}

.mls {
    margin-left: 20px !important;
}

.mlm {
    margin-left: 40px !important;
}

.mll {
    margin-left: 60px !important;
}





.mrn {
    margin-right: 0 !important;
}

.mrs {
    margin-right: 20px !important;
}

.mrm {
    margin-right: 40px !important;
}

.mrl {
    margin-right: 60px !important;
}


/*--------------------------------------------------*/
/*------------------ MEDIA QUERIES -----------------*/
/*--------------------------------------------------*/


@media (max-width: 479px) {
        .btn-menu {
            display: block;
        }

        .menu {
            height: 0px;
            opacity: 0;
            overflow: hidden; /*overflow hidden permet de cacher correctement le menu lors du toggle*/
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
        }

        .menu-collapse {
            display: block;
            height: auto;
            opacity: 1;
            text-align: center;
        }

        .menu-collapse li {
            display: block;
        }

        .menu-collapse a {
            font-size: 1.125em;
            padding: 0.938em 0;
        }

        #header .parallax-bg-accueil, #header .parallax-bg-creations, #header .parallax-bg-uxdesign, #header .parallax-bg-photographies,#header .parallax-bg-illustrations {
            background-size: 200%;
            height: 340px;
        }

        .thumb {
            width: 100%;
        }

        article .img {
            margin-bottom: 1em;
        }

        #footer small {
            text-align: center;
            display: block;
        }

        #totop {
            display: block;
            text-align: center;
            color: #fff;
            background-color: #333;
            padding: 0.625em 1.5em;
            margin-top: 20px;
            margin-bottom: 20px;
        }
}



@media (min-width: 480px) and (max-width: 768px){
        .col-3 {
            width: 50%;
        }
        #header .parallax-bg-accueil, #header .parallax-bg-creations, #header .parallax-bg-uxdesign, #header .parallax-bg-photographies,#header .parallax-bg-illustrations {
            background-size: 110%;
            height: 260px;
        }

}



@media (max-width: 768px){
        .thumb figcaption {
            opacity: 1;
            background: rgba(0, 0, 0, 0.2);
        }

        .thumb-title {
            font-size: 1.250em;
            padding: 0.313em;
        }

        .thumb-txt {
            -webkit-transform: translateY(110%);
            transform: translateY(110%);
        }
}



@media (min-width: 768px){
        #header .parallax-bg-accueil, #header .parallax-bg-creations, #header .parallax-bg-uxdesign, #header .parallax-bg-illustrations {
            background-position: center 10%;
        }
        #header .parallax-bg-photographies {
            background-position: center 40%;
        }
}

@media (min-width: 768px) and (max-width: 960px){
        .thumb-title {
            font-size: 1.375em;
        }
}