body {
    font-family: Open sans;
    background-color: #e7e9e8;
}

/****************************************
*****************HEADER******************
****************************************/

#header {
    background:      url('../img/bg.jpg') no-repeat top center fixed;
    background-size: cover;
}

#header .bg-cover {
    position:         absolute;
    right:            0;
    left:             0;
    bottom:           0;
    z-index:          1;
    height:           100%;
    background-color: rgba(0, 5, 8, 0.6);
}

.header-content {
    position:    fixed;
    right:       0;
    left:        0;
    top:         33%;
    z-index:     2;
    text-align:  center;
    font-family: Open sans;
}

.header-content h1 {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size:      56px;
    font-weight:    600;
    color:          #ffffff;
}

.header-content h2 {
    text-transform: capitalize;
    letter-spacing: 2px;
    font-size:      23px;
    font-weight:    300;
    color:          #ffffff;
    margin-top:     -10px;
}

.header-content p {
    line-height: 1.5em;
    font-size:   18px;
    font-weight: 300;
    padding:     50px 100px;
    color:       #ffffff;
}

.header-first-letter {
    text-transform: uppercase;
    font-weight:    600;
}

.header-btn {
    text-decoration:     none;
    border-radius:       5px;
    padding:             10px 20px;
    margin:              0 10px;
    transition-property: all;
    transition-duration: 0.8s;
    border:              1px solid #ffffff;
    color:               #ffffff;
}

.header-btn:hover {
    text-decoration: none;
    background:      #ffffff;
    color:           #000000;
}

.header-btn:visited {
    text-decoration: none;
    color:           #ffffff;
}

.header-btn:visited:hover {
    text-decoration: none;
    color:           #000000;
}

.header-btn:link {
    text-decoration: none;
}

.scroll-down {
    position:   absolute;
    right:      0;
    left:       0;
    bottom:     0;
    text-align: center;
}

.scroll-down img {
    width: 50px;
}

/****************************************
*****************NAVBAR******************
****************************************/

.st-navbar {
    position:            fixed;
    top:                 0;
    right:               0;
    left:                0;
    z-index:             2;
    transition-property: all;
    transition-duration: 0.8s;
}

.st-navbar.full {
    height:      100px;
    line-height: 100px;
}

.st-navbar.shrink {
    height:      60px;
    line-height: 60px;
    background:  #222222;
}

.st-navbar.shrink .navbar-logo img {
    height: 60px;
}

.navbar-logo {
    float:          left;
    vertical-align: center;
}

.navbar-logo img {
    transition-property: all;
    transition-duration: 0.8s;
    height:              100px;
}

.navbar-menu {
    overflow:   hidden;
    text-align: right;
}

.navbar-menu a {
    text-decoration: none;
    text-transform:  uppercase;;
    font-size:       14px;
    color:           #ffffff;
    padding:         0 15px;
}

.navbar-menu .active {
    color: #19a3d7;
}

.st-container {
    max-width: 1170px;
    margin:    auto;
}

/****************************************
****************SECTIONS*****************
****************************************/

.content {
    height: 100vh;
}

section h2 {
    font-family:    Open sans;
    font-size:      30px;
    text-transform: uppercase;
    text-align:     center;
}

/***** SECTION 1 ******/
.project-presentation-col h3 {
    text-transform: uppercase;
    font-size:      30px;
    font-weight:    600;
}

.st-icon {
    font-size: 150px;
    display:   block;
    margin:    30px 0px;
}

#first-section .row {
    margin-top: 10vh;
}

.project-presentation-col {
    text-align: center;
}

.project-presentation-col p {
    font-size: 16px;
    padding:   0px 20px;
}

.project-presentation-description {
    text-align: center;
    font-size:  18px;
    margin:     20px;
}

/***** SECTION 4 *****/
section.team {
    padding: 20px 30px;
}

.team-presentation {
    margin: auto;
    margin-top: 30px;
}

.team-presentation .profile {
    margin: 10px 10px;
    padding-top: 55px;
    background-color: white;
    height: 150px;
    box-shadow: 0px 5px 7px rgba(0,0,0,0.22);
}

.team-presentation .student {
    border-top: 2px solid #26b4e9;
}

.team-presentation .teacher {
    border-top: 2px solid #53dd4c;
}

.team-presentation .client {
    border-top: 2px solid #e92626;
}

.team-presentation p {
    margin: 0;
    text-align: center;
    font-weight: 600;
}

.team-presentation .fonction {
    font-weight: 300;
}

#fourth-section {
    padding: 20px 30px;
}

/****/

@media only screen and (max-width: 992px) {
    .header-content {
        top: 20%;
    }

    .navbar-logo {
        margin-left: 20px;
    }

    .navbar-menu {
        display: none;
    }

    .st-navbar.shrink .navbar-ico-resp {
        position: relative;
        display:  block;
        float:    right;
        width:    45px;
        height:   60px;
        cursor:   pointer;
    }

    .st-navbar.shrink .navbar-ico-resp:after {
        content:    '';
        position:   absolute;
        display:    block;
        width:      1rem;
        height:     0;
        top:        15px;
        left:       15px;
        box-shadow: 0 10px 0 1px white, 0 16px 0 1px white, 0 22px 0 1px white;
    }

    .responsive.shrink .navbar-menu {
        display:          block;
        position:         absolute;
        top:              60px;
        right:            0;
        left:             0;
        text-align:       center;
        background-color: #222222;
    }

    .responsive.shrink .navbar-menu a {
        display:     block;
        height:      40px;
        line-height: 40px;
    }

    .navbar-ico-resp {
        overflow:     hidden;
        margin-right: 20px;
    }

    #first-section .row {
        margin: 10px 0px;
    }
}

/****************************************
******************FONTS******************
****************************************/

@font-face {
    font-family: 'icomoon';
    src:         url('../fonts/icomoon.eot?3906iw');
    src:         url('../fonts/icomoon.eot?#iefix3906iw') format('embedded-opentype'),
                 url('../fonts/icomoon.woff?3906iw') format('woff'),
                 url('../fonts/icomoon.ttf?3906iw') format('truetype'),
                 url('../fonts/icomoon.svg?3906iw#icomoon') format('svg');
    font-weight: normal;
    font-style:  normal;
}

[class^="icon-"], [class*=" icon-"] {
    font-family:             'icomoon';
    speak:                   none;
    font-style:              normal;
    font-weight:             normal;
    font-variant:            normal;
    text-transform:          none;
    line-height:             1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-profile:before {
    content: "\e923";
}

.icon-mobile2:before {
    content: "\e959";
}

.icon-user-tie:before {
    content: "\e976";
}