/*--------------------------*/
/*       screens test       */
/*--------------------------*/

/* Small devices (tablets, 768px and up) */
/*@media (min-width: 750px) {
    .navbar {
        background-color:red !important;
    }

}*/

/* Medium devices (desktops, 992px and up) */
/*@media (min-width: 970px) { 
    .navbar {
        background-color:orange !important;
    }
}*/

/* Large devices (large desktops, 1200px and up) */
/*@media (min-width: 1170px) { 
    .navbar {
        background-color:blue !important;
    }
}*/


/*--------------------------*/
/*          General         */
/*--------------------------*/

body {
    font-family: 'Raleway', sans-serif, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

.text-justify {
    text-align: justify;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Raleway', sans-serif, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

.separator {
    border-color: #3498db;
    border-bottom-width: 3px;
    border-bottom-style: solid;
    margin-top: 3px;
    margin-bottom: 60px;
}

.anchor-top {
    position: relative;
    top: -80px;
    height: 0px !important;
}

section {
    padding-top: 80px;
    padding-bottom: 80px;
}

    section section {
        padding-top: 10px;
        padding-bottom: 10px;
    }

/*--------------------------*/
/*          Video           */
/*--------------------------*/

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    margin: 40px 20px 40px 20px;
}

    .video-container iframe, .video-container object, .video-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.category-title {
    margin-top: 0px !important;
}


/*--------------------------*/
/*          Navbar          */
/*--------------------------*/

/*header {
    height:50px;
}*/

/*header .container {
        padding:0px;
        margin:0px;
        width:100% !important;
    }*/

#main-menu {
    margin-top: -3px;
}

.navbar {
    background-color: rgba(255, 255, 255, 1);
    border-color: #fff;
    font-family: proxima-nova,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
    font-size: 18px;
    height: 50px;
    width: 100%;
    padding-top: 3px;
}

    .navbar .container {
        margin-top: 0px;
    }

    .navbar a {
        color: #555 !important;
        margin-left: 2.5px;
        margin-right: 2.5px;
        font-size: 12px;
        letter-spacing: 2px;
        font-weight: bold;
    }

    .navbar li a:hover {
        border-color: #2b78b6;
        border-bottom-width: 3px;
        border-bottom-style: solid;
    }

    .navbar li.active a {
        /*background-color:#2b78b6 !important;*/
        /*color:white !important;*/
        background-color: white !important;
        color: #2b78b6 !important;
    }

    .navbar .navbar-collapse.collapse {
        margin-top: 0px;
        min-width:900px;
    }

    .navbar .navbar-brand {
        padding-top: 0px;
        margin-top: -3px;
    }

    .navbar .navbar-header .mylogo {
        width: 50px;
        height: 50px;
    }

.navbar-collapse.in {
    background-color: white;
}


@media (max-width: 750px) {
    .navbar {
        margin-bottom: 0px;
        height: 50px;
    }

        .navbar .container {
            margin-top: 0px;
        }
}


/*--------------------------*/
/*  Carousel and Hero img   */
/*--------------------------*/

.hero-image {
    margin-top: 55px;
    background: linear-gradient(174deg,rgba(80,177,255,0) 0,rgba(80,177,255,0) 50%,rgba(80,177,255,.6) 90%,#50b1ff 100%),#175587 url(/content/images/backgrounds/krisskross.png) center center repeat;
    width: 100%;
    height: 550px;
}

.carousel-inner {
    width: 100%;
    min-height: 550px;
    margin-top: -20px !important;
}

.carousel .slide-responsive-img {
    margin-top: 40px;
}

.carousel-inner .item {
    text-align: center;
    margin-top: 30px;
    color: white;
}

.carousel-header .carousel-slide-image-top img {
    margin-top: 80px;
    margin-bottom: 50px;
    width: 120px;
    border-color:rgba(0,0,0,0.2);
    border-width: 8px;
    border-style: solid;
}

.carousel-header .carousel-slide-text {
    padding-top: 10px;
}

.carousel-inner .html-warrior-img {
    height: 240px;
}

.carousel-inner .slide-warrior-logo {
    padding-top: 10px;
    text-align: center;
}

.carousel-slide-htmlwarrior .web-tech-logo {
    padding-left: 0px;
    padding-right: 0px;
    margin-top:40px;
}

.carousel-platform-img-container img {
    width: 100px;
    height: 100px;
}

.carousel-slide-htmlwarrior h1 {
    margin-top: 80px !important;
}

h4.carousel-second-line {
    margin-top: 40px;
}

.item {
    padding-left: 20px;
    padding-right: 20px;
}

.carousel-slide-htmlwarrior h4 {
    margin-left: 20px;
    margin-right: 20px;
}

.carousel-slide-htmlwarrior .web-tech-logo img {
    width: 110px;
}


.slide-responsive-img {
    margin-top: 50px;
}

.carousel-slide-responsive {
    margin-left: 20px;
    margin-right: 20px;
}

@media (max-width: 769px) {

    .carousel {
        height: 460px;
    }

    .hero-image {
        height: 460px;
        /*margin-top: 60px;*/
    }

        .hero-image .avatar-img {
            margin-top: 30px !important;
        }

    .carousel-slide-title h1 {
        margin-top: 0px;
    }

    .slide-responsive-img {
        margin-top: 30px;
    }

    .html-warrior-img {
        height: 180px !important;
    }

    #warrior-slide {
        margin-top: 10px;
    }

        #warrior-slide h1 {
            margin-top: 10px;
        }

    .carousel-platform-img-container img {
        width: 80px;
        height: 80px;
    }
}

@media(max-width:992px) {
    .slide-responsive-img {
        width: 278px;
    }

    .carousel-slide-htmlwarrior .web-tech-logo img {
        width: 80px;
    }

    .carousel-header .carousel-slide-image-top .avatar-img {
        margin-bottom: 15px;
    }
}


/*--------------------------*/
/*         About me         */
/*--------------------------*/

.section-about-me {
    min-height: 250px;
    background-color: #f7f7f7;
}

.coffee-cup {
    text-align: center;
}

    .coffee-cup img {
        padding-left: 20px;
    }

.coffee-cup-text h2 {
    text-align: justify;
}

.coffee-cup-text p {
    padding-bottom: 30px !important;
}

#page-comefrom {
    background: linear-gradient(to bottom,#222324,#404244);
    background-color: #222324;
    padding-bottom:0px;
}

#page-livein {
    background: linear-gradient(to bottom,#222324,#404244);
    background-color: #222324;
    padding-bottom:0px;
}

#page-comefrom img {
    width:100%;
    /*min-height:30px;*/
}


/*--------------------------*/
/*     Skills sections      */
/*--------------------------*/

.superskills-container {
    background-color: #2b78b6;
    color: white;
    text-align: center;
}

.superskills {
    background-color: #2b78b6;
    color: white;
    text-align: center;
}

    .superskills .container {
        padding-top: 20px;
        padding-bottom: 20px;
    }

        .superskills .container i {
            font-size: 80px;
            margin-top: 20px;
        }

        .superskills .container h2 {
            margin-top: 0px;
        }

        .superskills .container p {
            text-align: left;
            padding: 5px 25px 5px 25px;
        }

.skills-list-container {
    background-color: #f7f7f7;
}

.skills-list .skills-level {
    margin-top: 60px;
}


.chart {
    position: relative;
    display: inline-block;
    width: 150px;
    height: 150px;
    margin-bottom: 50px;
    text-align: center;
}

    .chart canvas {
        position: absolute;
        top: 0;
        left: 0;
    }

.percent {
    display: inline-block;
    line-height: 150px;
    z-index: 2;
}

    .percent:after {
        content: '%';
        margin-left: .1em;
        font-size: .8em;
    }

/*--------------------------*/
/*       Portfolio          */
/*--------------------------*/

#page-portfolio {
    padding-bottom:0px;
}

#page-portfolio h3 {
    margin-top:0px;
}

#grid-controls-wrapper {
    text-align: center;
    float: none;
    width: 100%;
    margin-bottom:20px;
    margin-top:20px;
}

.center-pills {
    display: inline-block;
}

#grid .mix {
    width: 150px;
    height: 112.5px;
    vertical-align: top;
    margin: 20px 20px 20px 0;
    color: #fff;
    text-align: center;
    display: inline-block;
}

    #grid .mix .thumbnail {
        border: 2px thin #F7F7F7;
        padding: 0;
        border-radius: 0;
    }

    #grid .mix .overlay {
        width: 150px;
        /*height: 150px;*/
        position: absolute;
        opacity: 0;
    }

        #grid .mix .overlay:hover {
            opacity: .8;
        }

        #grid .mix .overlay i {
            font-size: 2em;
            opacity: 1;
            color: #fff;
            padding-top: 30%;
        }

.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

.isotope, .isotope .isotope-item {
    -webkit-transition-duration: .8s;
    -moz-transition-duration: .8s;
    -ms-transition-duration: .8s;
    -o-transition-duration: .8s;
    transition-duration: .8s;
}

.isotope {
    -webkit-transition-property: height,width;
    -moz-transition-property: height,width;
    -ms-transition-property: height,width;
    -o-transition-property: height,width;
    transition-property: height,width;
}

    .isotope .isotope-item {
        -webkit-transition-property: -webkit-transform,opacity;
        -moz-transition-property: -moz-transform,opacity;
        -ms-transition-property: -ms-transform,opacity;
        -o-transition-property: -o-transform,opacity;
        transition-property: transform,opacity;
    }


        .isotope .isotope-item.no-transition,
        .isotope.no-transition,
        .isotope.no-transition .isotope-item {
            -webkit-transition-duration: 0s;
            -moz-transition-duration: 0s;
            -ms-transition-duration: 0s;
            -o-transition-duration: 0s;
            transition-duration: 0s;
        }

.isotope-item img {
    /*width: 100% !important;*/
    /*height: 100% !important;*/
    max-height:100%;
    width:100%;
    margin:auto;
    vertical-align:middle;
}

/*--------------------------*/
/*        Screenshots       */
/*--------------------------*/

#page-screenshots {
    padding-top:20px;
}

.iphone-cover {
    position: relative;
    width: 260px;
    height: 550px;
    background: url('../content/images/slides/iphone.png') no-repeat;
    z-index: 1;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    -webkit-background-size: 100%;
    background-size: 100%;
}

.iphone {
    display: block;
    position: relative;
    width: 260px;
    height: 550px;
    z-index: 0;
    margin: 0 auto;
}

    .iphone .carousel {
        height: 100%;
    }

    .iphone .image-wrapper {
        position: absolute;
        top: 78px;
        left: 23px;
        width: 215px;
        height: 380px;
        overflow: hidden;
        background-color: #fff;
    }

    .iphone .carousel-inner {
        height: inherit;
    }

        .iphone .carousel-inner .item {
            height: inherit;
            overflow: hidden;
            padding-left: 0px;
            padding-right: 0px;
            margin: 0px;
            max-height: 400px;
        }

#iphone-carousel-inner {
    height: 100%;
}

.iphone .image-wrapper img {
    min-height: 100%;
}

/* Carousel iphone Controls */

.iphone .carousel-control {
    width: 30px;
    height: 30px;
    top: 50%;
    margin-top: -40px;
    border: none;
    z-index: 2;
    opacity: .25;
    font-size: 30px;
    background: none;
}

    .iphone .carousel-control.left {
        left: -80px;
    }

        .iphone .carousel-control.left span {
            top: 18px;
        }

    .iphone .carousel-control.right {
        right: -75px;
    }

    .iphone .carousel-control span {
        color: #000;
        vertical-align: middle;
    }

        .iphone .carousel-control span:hover {
            color: #3498db;
            vertical-align: middle;
        }

/* Macbook Carousel */

.macbook-cover {
    position: relative;
    width: 560px;
    height: 310px;
    background: url('../content/images/slides/macbook.png') no-repeat;
    background-size: 100%;
    z-index: 1;
}

.macbook {
    display: block;
    position: relative;
    width: 560px;
    height: 310px;
    z-index: 0;
    margin: 0 auto;
    margin-top:122px;
}

    .macbook .carousel {
        height: 100%;
    }

    .macbook .image-wrapper {
        position: absolute;
        top: 18px;
        left: 64px;
        width: 425px;
        height: 260px;
        overflow: hidden;
        background-color: #ddd;
    }

    .macbook .carousel-inner {
        height: 100%;
        /*min-height: 550px;*/
        margin-top: -20px !important;
    }

        .macbook .carousel-inner .item {
            height: inherit;
            overflow: hidden;
            padding-left: 0px;
            padding-right: 0px;
            margin: 0px;
            max-height: 258px;
            margin-top: 20px;
            margin-left:10px
        }

#macbook-carousel-inner {
    width: 100%;
}

.macbook .image-wrapper img {
    min-height: 100%;
}

@media (max-width: 768px) {
    .macbook, .macbook .macbook-cover {
        width: 280px;
        height: 180px;
        margin-top: 50px;
    }

        .macbook .image-wrapper {
            top: 8px;
            width: 210px;
            height: 130px;
            margin-left: -105px;
        }

}


/* Carousel macbook Controls */

.macbook .carousel-control {
    width: 30px;
    height: 30px;
    top: 50%;
    margin-top: -40px;
    border: none;
    z-index: 2;
    opacity: .25;
    font-size: 30px;
    background: none;
}

    .macbook .carousel-control.left {
        left: -40px;
    }

        .macbook .carousel-control.left span {
            top: 18px;
        }

    .macbook .carousel-control.right {
        right: -37px;
    }

    .macbook .carousel-control span {
        color: #000;
        vertical-align: middle;
    }

        .macbook .carousel-control span:hover {
            color: #3498db;
            vertical-align: middle;
        }


/*--------------------------*/
/*      eat sleep code      */
/*--------------------------*/


#eat-sleep-code {
    background: linear-gradient(169deg,#175587 40%,#5fc6fc 100%);
    font-size: 60px;
    color: white;
}


/*--------------------------*/
/*     User experience      */
/*--------------------------*/

#page-ux {
    text-align:justify;
    color:white;
    background: linear-gradient(169deg,#175587 40%,#5fc6fc 100%);
    background-color: #175587;
}

.ux1 div {
    margin-top:120px
}

.ux2 {
    margin-top:30px;
}

.ux2 div {
    margin-top:80px;
    text-align:right;
    margin-bottom:20px
}


@media (max-width: 750px) {
   
   .ux1 div {
        margin-top:20px;
        margin-bottom:0px;
    }
   .ux2 div {
        margin-top:0px;
        text-align:center;
    }
   .ux2 {
        margin-top:10px;
    }

}


/*--------------------------*/
/*         Resume           */
/*--------------------------*/

.resume-container {
    background-color: white;
    /*padding-bottom:20px;*/
}




/*--------------------------*/
/*        Summary           */
/*--------------------------*/

#page-resume {
   background-color: #f7f7f7;
}

.summary-container {
    background: linear-gradient(169deg,#175587 40%,#5fc6fc 100%);
    background-color: #175587;
    color: white;
    /*padding-bottom:20px;*/
    text-align: justify;
}

#me-paris {
    /*width:177px;
    height:212px;*/
    width: 180px;
    height: 180px;
    border-color: rgba(255,255,255,0.4);
    border-style: solid;
    border-width: 5px;
    padding: 0px;
    /*padding-top:20px;*/
    margin: 15px;
}


@media (max-width: 750px) {
    .summary-container p {
        margin: auto;
        margin-top: 20px;
    }
}

/*--------------------------*/
/*         Referees         */
/*--------------------------*/

.referee-container {
    background-color: #f7f7f7;
}

#page-referee {
    padding-top: 10px;
    padding-bottom: 10px;
}

/*--------------------------*/
/*          Contact         */
/*--------------------------*/

#page-contact {
    background: linear-gradient(to bottom,#222324,#404244);
    background-color: #222324;
    color: white !important;
}

    #page-contact p {
        font-size:14px;
    }

    #page-contact i {
        color:white;
        font-size:40px;
    }

     #page-contact i:hover {
        color:#175587;
    }

.linkedIn-container {
    margin-top: 18px;
    margin-bottom:30px;
}


.opera-white {
    width:90px;
}

.map-container iframe {
    width:100%;
}

/*--------------------------*/
/*          Modals          */
/*--------------------------*/

.modal img {
    max-width:100%;
    margin-top:20px;
}

.modal p {
    margin-top:20px;
}

/*--------------------------*/
/*      Media queries       */
/*--------------------------*/

@media (max-width: 768px) {

    .list-image-top {
        display: none;
    }
}