body {
    background: url(../img/background.jpg) ;
    font-family: "Open sans", Arial;
}

a, a:visited {
    color: inherit ;
    transition: all .3s ;
}

a:hover, a:focus {
    color: rgb(202, 73, 73);
    text-decoration: none ;
}

abbr {
    text-decoration: none ;
    border-bottom: none !important ;
}

@media (min-width: 992px) {
    
    .navbar {
        width: 970px ;
    }   

}

@media (min-width: 1200px) {
    
    .navbar {
        width: 970px ;
    }
    
}

@media(max-width: 992px) {
    
    .navbar {
        width: 100% !important ;
        position: static !important ;
        margin-left: 0 !important ;
    }

    .navbar-nav {
        margin: 0 ;
    }

    .header-picture {
        display: none ;
    }

    .container {
        width: 100% ;
    }

    .wrapper {
        padding: 0px !important ;
        box-shadow: none !important ;
    }

    .languages {
        display: table ;
        position: static !important ;
        width: 100% ;
        background: white !important ;
        border-radius: 0 !important ;
    }

    .languages .flag {
        display: table-cell ;
        text-align: center ;
    }
    
    section aside.col-md-3 h2 {
        font-weight: bold ;
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

    section aside.col-md-3 img {
        display: none ;
    }

    article .div-period {
        float: left ;
    }
    
}

.languages {
    position: fixed;
    top: 100px;
    z-index: 1001;
    left: 0px;
    background: whitesmoke;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.languages img {
    margin: 0 4px ;
    width: 40px ;
    height: 26px ;
    cursor: pointer ;
}

.wrapper {
    background: white ;
    padding: 56px 30px 0 30px;
    box-shadow: 0 0 30px rgba(0,0,0,0.6);
    width: 970px ;
}

.navbar {
    border-radius: 0px !important;
    box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
    padding-top: 15px;
    border: none;
    position: fixed ;
    top: 0;
    background: white ;
    z-index: 1001 ;
    margin-left: -30px ;
}

.navbar-nav {
    display: table ;
    width: 100% ;
}

.navbar-nav li {
    display: table-cell ;
    float: none ;
    text-align: center ;
    text-transform: uppercase ;
}

.navbar-default .navbar-nav > li > a {
        border-bottom: 6px solid transparent;
        transition: all .8s ;
}

.navbar-default .navbar-nav>.active>a, 
.navbar-default .navbar-nav>.active>a:hover, 
.navbar-default .navbar-nav>.active>a:focus {
    color: #777 ;
    background: none ;
    border-bottom: 6px solid rgb(202, 73, 73);
}

.header-picture {
    overflow: hidden ;
    height: 300px ;
    margin-left: -30px;
    margin-right: -30px;
}

.header-picture img {
    width: 100% ;
    margin-top: -235px;
}

.wrapper > hr {
    display: block ;
    clear: both ;
    margin: 20px 0 ;
}

section.row {
    margin: 0 ;
    padding: 0 20px 20px 20px ;
}

section > h2 {
    padding-left: 15px;
    color: rgb(202, 73, 73);
}

section > h2::after {
    height: 1px;
    width: 100%;
    display: block;
    content: '';
    background: linear-gradient(to left, white 0%, lightgray 50%, white 100%);
    margin-top: 15px;
    margin-bottom: 20px;
}

.profile {
    padding: 20px 20px 0 20px !important ;
}

.profile .photo img {
    width: 150px ;
}

.profile-title {
    text-align: center ;
}

.social-networks a {
    display: inline-block;
    margin: 4px;
}

.social-networks a img {
    width: 32px;
    height: 32px;
    margin: 2px;
}

.social-networks a img:hover {
    width: 36px;
    height: 36px;
    margin: 0px;
}

.profile address {
    padding-top: 35px;
}

.profile address p {
    height: 30px ;
}

.profile .address i.glyphicon {
    margin-right: 5px ;
}

.profile .address .tongues img {
    height: 20px ;
    margin: 0 3px ;
}

section aside.col-md-3 {
    text-align: center ;
}

section aside.col-md-3 img {
     width: 150px ;
}

.domaine {
    padding: 0 40px ;
}

.competences {
    line-height: 26px;
}

article .div-period, article .status {
    margin-top: 20px ;
    line-height: 26.399999618530273px ;
}

article .period, article .status span {
    font-size: 0.9em ;
}

article header {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin-bottom: 20px;
    padding-bottom: 10px;
}

article header h3, article header .status {
    display: inline-block ;
    max-width: 85%;
}

article .status {
    float: right;
}

.description p {
    text-align: justify ;
}

article .images {
    border-top: 1px solid rgba(0,0,0,0.1);
}

article .images .gallery, .gallery-video {
    display: inline-block ;
}

article .image-link img, article .youtube-link img {
    height: 80px ;
}

article .youtube-link, article .image-link {
    opacity: 0.8 ;
}

article .youtube-link:hover,
article .image-link:hover {
    opacity: 1.0 ;
} 

article .youtube-link::after {
    content: "\e072" ;
    font-family: 'Glyphicons Halflings';
    font-size: 36px ;
    color: rgb(202, 73, 73);
    display: block ;
    position: absolute ;
    margin-top: -80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    width: 103px; /* 103px is the width of a youtube thumbnail with height = 80px. */
    transition: all .2s ease-in-out;
}

article .youtube-link:hover::after {
    color: rgb(231, 37, 37);
}

article .competences {
    margin-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.1);
}

article .competences h5, article .images h5 {
    font-weight: bold ;
}

.contact textarea {
    resize: vertical ;
}