/* GENERALE */

body{
    font-family: "Rhodium Libre", comic-sans-ms;
}

h1,h2,h3,h4,h5,h6{
    font-weight : bold; 
}

img{
    max-width : 100%; 
    height : auto;
}

section{
    padding : 65px 0 80px 0; 
}

section .heading{
    text-align: center;
    padding-bottom : 40px;
}

section .heading#firstheading{
    text-align: center;
    padding-bottom : 0px;
}


section .heading h2{
    text-transform: uppercase;
}

section .heading h3{
    color: #002400; 
}

section .subheading h3{
    color : #002400; 
    margin-top: 35px;
}

section .subheading h3#firstsub{
    color : #002400; 
    margin-top: 0px;
}

.divider{
    width : 100px; 
    height : 2px; 
    background-color: #58641D;
    margin : 0 auto 20px;
}

.divider.white{
    background-color: #fff;
}

ul{
    list-style: none;
}
/* ABOUT */ 

#about {
    background: #58641D;
    background: radial-gradient(circle, rgba(88, 100, 29, 1) 1%, rgba(180, 192, 153, 1) 100%);
}

.profil-picture{
    text-align: center;
    margin : 0px auto 30px; 
}

#about .heading h1{
    color : #B4C099; 
    text-transform: uppercase;
    margin-bottom: 20px;
}

.button1{
    color : #B4C099; 
    text-transform: uppercase;
    border : 1px solid #B4C099; 
    padding : 18px 50px;
    font-weight: bold;
    display : inline-block; 
    border-radius: 3px;
    text-decoration: none;
    margin-top : 20px;
    transition : all 0.3s ease-in 0s;
}

.button1:hover{
    color : #58641D; 
    text-transform: uppercase;
    border : 1px solid #B4C099; 
    padding : 18px 50px;
    font-weight: bold;
    display : inline-block; 
    border-radius: 3px;
    text-decoration: none;
    margin-top : 20px;
    background-color: #B4C099;
}

/* SKILLS*/

#skills{
    background-color: #B4C099;
    padding-top:25px;
}
#skills h2{
    color :#58641D; 
}

#skills .progress {
    height : 45px; 
    margin : 30px 20px; 
}

#skills .progress:last-child{
    margin-bottom: 0px;
}

#skills .progress-bar{
    background-color: #58641D;
}



#skills .progress-bar h5{
    text-shadow: 1px 1px 1px #002400;
    color:#B4C099;
    margin-bottom: 3px;
    

}

.mention {
    padding-top : 30px;
}

section#skills {
    padding-bottom: 20px;
}

.mention h5 a {
    color: #002400; 
    text-decoration: none;
    font-size:100%;
    transition: all .3s ease-in-out;
}

.mention h5 a:hover{
    color: #58641D; 
    text-decoration: none;
    font-size:120%;
    transition: all .3s ease-in-out;
}



.mention h5 {
    color:#002400;
}

#skills .heading {
    padding-bottom: 0;
    padding-top: 15px;
}






/* EXPERIENCE */ 

#experience {
    background-color: #58641D;
    padding-top : 25px;
}

#experience .heading h2{
    color : #B4C099; 
}

.timeline{
    padding : 30px 10px; 
    position : relative; 
}

.timeline:before{
    content: ""; 
    top : 0; 
    bottom : 0; 
    position: absolute;
    width : 5px; 
    background-color: #B4C099;
    left : 50% ; 
    margin-left: -2.5px;
}

.timeline > li {
    margin-bottom: 20px;
    position : relative; 
}

.timeline > li:before, .timeline > li:after{
    content: ""; 
    display : table; 
}

.timeline >li:after{
    clear : both; 
}

.timeline li .timeline-badge{
    color : #002400; 
    width : 50px; 
    line-height : 50px; 
    font-size : 20px; 
    text-align: center;
    position: absolute; 
    top : 16px; 
    left : 50% ; 
    margin-left : -25px; 
    background-color: #B4C099;
    border-radius: 50%;
}

.timeline-panel-container{
    width : 50%; 
    float: left;
}

.timeline-panel-container-inverted{
    width : 50%; 
    float : right; 
}

.timeline-panel{
    width : 90%; 
    float : right; 
    margin-right : 40px; 
    border : 1px solid #B4C099; 
    border-radius : 7px; 
    padding : 20px 25px; 
    position : relative; 
    box-shadow : 0 1px 6px rgba(0, 0, 0, 0.175); 
    background: #B4C099;
}

.timeline-panel-container-inverted .timeline-panel{
    float : left; 
    margin-left: 40px;
}

.timeline-panel:after{
    position:absolute; 
    top : 27px; 
    right : -14px; 
    display : inline-block; 
    border-top: 14px solid transparent;
    border-left:14px solid #B4C099; 
    border-right: 0 solid #B4C099; 
    border-bottom: 14px solid transparent;
    content : "";
}

.timeline-panel-container-inverted .timeline-panel:after{
    border-left-width : 0; 
    border-right-width:14px;
    left : -14px; 
    right : auto;
}

.timeline-heading h3{
    margin-top: 5px;
    font-size : 20px; 
    color :#002400; 
}

.timeline-heading h4{
    color :#002400; 
}

.timeline-panel h3, h4, p{
    color :#002400; 
}

#experience .divider.white{
    background-color: #B4C099;
}

/* Diplome */ 

#education .heading h2{
    color :#58641D; 
    margin : 15px 0; 
}

#education {
    background-color: #B4C099;
    padding-top:25px;
}
#education .divider{
    color:#58641D !important;
}

.education-block {
    width : 90%; 
    margin : 0 auto; 
    text-align : center; 
    padding : 30px; 
    background : #58641D; 
    border-radius: 5px; 
    border : 1px solid #58641D; 
    margin-bottom: 20px;
}

.education-block h5{
    color : #B4C099; 
    font-size : 15px; 
    margin-bottom: 15px;
}

.education-block span{
    font-size: 35px;
}

.education-block h3{
    color :#B4C099; 
    margin : 15px 0; 
}

.education-block h4{
    margin-bottom: 20px;
    font-weight: normal;
    color:#002400;
}

#education span.bi-award-fill::before{
    color:#002400;
}

/* PORTFOLIO */ 

#portefolio {
    background-color: #B4C099;
    padding-top:25px;
    padding-bottom: 25px;
}

#portefolio .heading h2{
    color : #58641D; 
}

#portefolio .divider.white{
    background-color: #58641D;
}

#portefolio .col-md-4{
    margin-bottom: 20px; 
}

img.img-thumbnail{
    background-color: #58641D;
    border:0px;
    transition : background-color .2s ease-in-out;
}

img.img-thumbnail:hover{
    background-color: #002400;
    transition : background-color .2s ease-in-out;
}

#portefolio a.button1{
    background-color: #58641D;
    transition: all .3s ease-in-out;
    color:#B4C099;
}

#portefolio a.button1:hover{
    background-color: #002400;
    transition: all .3s ease-in-out;
    color:#B4C099;
}

/*Certification*/

#certification .heading h2{
    color : #B4C099;     
}

#certification {
    background-color: #58641D;
    padding-top:25px;
}

#certification .divider.white{
    background-color: #B4C099;
}

#myCarousel .carousel-item {
    padding : 30px 30px 90px; 
}

#myCarousel .carousel-item h3{
    color : #B4C099; 
    font-style : italic;
}

#certification a{
    color:#002400; 
    text-decoration: none;
    font-size: 32px;
    padding : 0 10px;
    background-color: #B4C099;
    border-radius: 5px;
    transition: all .3s ease-in-out;
}

#certification a:hover{
    color:#B4C099; 
    text-decoration: none;
    font-size: 32px;
    padding : 0 10px;
    background-color: #002400;
    border-radius: 5px;
    transition: all .3s ease-in-out;
}

#certification h4{
    margin-bottom: 20px;
}

#certification button.active{
    background-color: #002400;
}

/* FOOTER */ 

footer{
    background-color: #6c735a;
    padding:  0px 0 0px; 
}

footer span{
    color:#58641D; 
    font-size: 25px;
    transition: font-size .2s ease-in-out;
    margin:0;
}

footer span:hover{
    font-size: 27px;
    transition: font-size .2s ease-in-out;
}

footer h5{
    color:#B4C099; 
    font-weight: normal; 
    margin-bottom:5px;
}

/*NAVBAR */ 

.navbar {
    background-color: #58641D;
    letter-spacing: 2px; 
    text-transform: uppercase;
    font-weight: bold;
    border-bottom: 1px solid white;
    border:0px;
}

.navbar-nav{
    margin : 0 auto; 
    text-align: center;
}

.nav-link {
    color:#B4C099 !important; 
    margin:0 6px;     
}

.nav-link.active, .nav-link:hover{
    background-color: #B4C099;
    color:#58641D !important; 
}