/* GENERAL */

*
{
    font-family:Georgia, 'Times New Roman';
    
}
h1,h2,h3,h4,h5
{
    font-weight: bold;
}

img
{
    max-width:100%;
    height:auto;
}
.divider
{
    width:100px;
    height:2px;
    background-color:darksalmon;
    margin: 50px auto 0;
    position:relative;
    top:20px;
}
ul
{
    list-style: none;
}

/* NAVBAR */

.navbar
{
    background-color:gainsboro;
    letter-spacing: 3px;
    font-weight: bold;
    border-bottom:1px solid white;
}
.navbar-nav
{
    margin: 0 auto;
    text-align:center;
}
.nav-link
{
    color:white !important;
    margin: 0 10px;
    text-shadow: 0px 1px 6px black;
}

            /* INTRO */
#intro
{
    background: url("images/background/bg-main.jpg");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align:center;
}         
            
#intro h1
{
    font-family: 'Amagro';
}
.profile-picture
{
    margin: 0px auto 20px;
    padding-top:30px;
}
@media (max-width : 767px){

    .profile-picture img {

        width : 100%;
    }

}
@media (min-width : 767px){

    .profile-picture img {

        width : 60%;
    }

}
.heading
{
    padding-bottom:30px;
    
    
}
.heading h1
{
    font-size: 20px;
    color:crimson;
    text-transform: uppercase;
}
.heading h3
{
    font-size: 20px;
    color:indianred;
    text-transform: capitalize;
}
.button1
{
    margin-top:5px;
    text-decoration: none;
    text-transform: capitalize;
    color:indigo;
    border: 1px solid indigo;
    display: inline-block;
    margin-top:5px;
    border-radius: 3px;
    padding:5px;
    transition: all 0.4s ease-in 0s;
}
.button1:hover
{
    background:indigo;
    color:white;
}

/* SKILLS */

#skills
{
    padding-bottom:30px;
}

#skills h2
{
    text-align:center;
    margin-top:70px;
    text-transform: uppercase;
    color:indigo;
    font-size: 30px;
}
#skills .progress
{
   height:55px;
   margin:30px 20px;
}
#skills .progress:last-child
{
    margin-bottom:0px;
}
#skills .progress-bar
{
    background-color:cadetblue;
}
#skills .progress-bar h6
{
    text-shadow: 1px 1px 1px #000;
    margin-top:10px;
}

/* EXPERIENCE */
#experience
{
    background-color:rgb(205, 190, 216);
    color:#000;
    
}
#experience h2
{
    margin-top: 70px;
    text-align:center;
    text-transform: uppercase;
    color:white;
}

/* Il s'agit de la zone qui contient la barre et les blocs */
.timeline
{
    padding:10px 5px 15px;
    position: relative;
    margin-top:50px;
}

/* Les caractéristiques de l'introduction de la barre dans cette zone */
.timeline:before
{
    content:" ";
    top:0;
    bottom:20px;
    position: absolute;
    width:5px;
    background-color:darksalmon;
    margin-left:-2.5px;
}

/* Je voudrais que la timeline se déplace à partir de la gauche de 90% 
jusqu'à 767px, et à partir de 767px de 50% */
 @media (max-width : 767px){

    .timeline:before {

        left: 90%;
    }

}
@media (min-width : 767px){

    .timeline:before {

        left : 50%;
    }

}
.timeline > li
{
    margin-bottom:20px;
    position: relative;
}
.timeline > li:before,
.timeline > li::after
{
    content:" ";
    display: table;
} 
.timeline > li::after
{
    clear:both;
}
/* Le Badge */
.timeline .timeline-badge
{
    color:darksalmon;
    width:50px;
    line-height:50px;
    text-align:center;
    position: absolute;
    top:16px;
    margin-left:-25px;
    background-color:lavenderblush;
    border-radius: 50%;
}
/* L'adaptation du badge en fonction de la timeline qui change de position
en fonction de la taille de l'écran */
@media (max-width : 767px){

    .timeline .timeline-badge {

        left: 90%;
    }

}
@media (min-width : 767px){

    .timeline .timeline-badge {

        left : 50%;
    }

}
/* L'espace occupé en fonction de la taille de l'écran et le float du bloc principal de gauche*/
.timeline-panel-container
{
    float:left;
}
@media (max-width : 767px){

    .timeline-panel-container {

        width:90%;
    }

}
@media (min-width : 767px){

    .timeline-panel-container {

        width : 50%;
    }

}
/* L'espace occupé en fonction de la taille de l'écran et le float du bloc principal de droite */
@media (max-width : 767px){

    .timeline-panel-container-right {

        width:90%;
        float : left;
    }

}
@media (min-width : 767px){

    .timeline-panel-container-right {

        width : 50%;
        float : right;
    }

}
/* Les propriétés de la div de gauche */
.timeline-panel
{
    width:85%;
    float:right;
    margin-right:40px;
    border:1px solid lavenderblush;
    border-radius:7px;
    padding:20px 25px;
    position: relative;
    box-shadow: 2px 1px 6px rgba(0,0,0,0.5);
    background-color:white;
    font-size: 15px;
}
/* Les propriétés de la div de droite */
@media (max-width : 767px){

    .timeline-panel-container-right .timeline-panel {

        float:right;
    }

}
@media (min-width : 767px){

    .timeline-panel-container-right .timeline-panel {

        float:left;
        margin-left:40px;
    }

}

/* Les propriétés de des flèches de gauche */
.timeline-panel:after
{
    position: absolute;
    top:27px;
    right:-14px;
    display: inline-block;
    border-top: 14px solid transparent;
    border-left:14px solid #fff;
    border-right:0 solid #fff;
    border-bottom:14px solid transparent;
    content:" ";
}

/* Les propriétés des flèches de droite en fonction du déplacement du bloc */
@media (max-width : 767px){

    .timeline-panel-container-right .timeline-panel:after {
        right:-14px;
        border-top: 14px solid transparent;
        border-left:14px solid #fff;
        border-right:0 solid #fff;
        border-bottom:14px solid transparent;
    }

}
@media (min-width : 767px){

    .timeline-panel-container-right .timeline-panel:after {

        border-left-width:0;
        border-right-width:14px;
        left:-14px;
        right: auto;
    }

}
.timeline-panel h4
{
    font-weight: normal;
}
.pro-link
{
    color:indigo;
}
.timeline-body p
{
    margin-bottom:0;
    font-size: 16px;
}
.bi-bookmark-dash
{
    color:gray;
}

/* EDUCATION */
#education
{
    text-align:center;
}
#education .heading
{
    position: relative;
    bottom:70px;
    text-align:center;
    color:indigo;
    text-transform: uppercase;
    
    
}
#education .text-muted
{
    padding-top:30px;
    
}
.education-block span
{
    font-size: 35px;
}
#education h3
{
    margin-top: 20px;
    color:indigo;
}
#education h4
{
    margin-top:20px;
}


#education .divider
{
    margin-bottom:150px;
}
#education .education-block p
{
    position: relative;
    bottom:70px;
}
.education-block
{
    width:100%;
    height:400px;
    margin: 0 auto 20px;
    background-color: antiquewhite;
    background-size: cover;
    padding:10px;
    border-radius: 5px;
    border:1px solid beige;
    box-shadow: 1px 2px 2px lavenderblush;
    cursor: pointer;
    transition: transform .1s;
}
.education-block:hover
{
    transform: scale(1.005);
    -webkit-transform: scale(1.005);
    -ms-transform: scale(1.005);
}

#special-block-3
{
    margin:0 auto;

}

#education .row
{
   position: relative; 
   bottom:30px;
}

/* PORTFOLIO */

#portfolio
{
    background: url('images/portfolio-images/portfolio-bg.jpg') no-repeat center;
    background-size: cover;
}
#portfolio .divider
{
    position: relative;    
    top:50px;
    background-color: #fff;
}
#portfolio h2
{
    text-transform: uppercase;
    text-align:center;
    color:#fff;
    margin-top:70px;
    margin-bottom:50px;
}
#portfolio .row
{
    text-align:center;
    margin-bottom:15px;
}
#portfolio img
{
    margin-bottom:20px;
    width:100%;
    height:auto;
    box-shadow: 0px 0px 2px darkgrey;
    filter:grayscale(100%);
    -webkit-filter:grayscale(100%);
    -ms-filter: grayscale(100%);
    transition: all .5s; 
}
#portfolio img:hover
{
    transform: scale(1.01);
    -ms-transform: scale(1.01);
    -webkit-transform: scale(1.01);
    filter:none;
    -webkit-filter:none;
    
}
.more
{
    width:75px;
    height:30px;
    margin:0 auto;
    border:1px solid #fff; 
    border-radius: 10px;
    margin-bottom:20px;
    position: relative;
    bottom:10px;
}
.more:hover
{
    background-color: indigo;
    border:1px solid indigo;
    transition: all 0.3s ease-in-out 0.1s;
}
.more a
{
    text-decoration: none;
}
.more a h5:hover
{
    color:#fff;
}
.more h5
{
    text-align:center;
    color:#fff;
    text-decoration: none;
    font-size: 15px;
    line-height:30px;
}

/* RECOMMENDATIONS */
#recommendation
{
    margin-bottom:50px;
    padding: 10px;
}
#recommendation .heading h2
{
    text-transform: uppercase;
    color:indigo;
    text-align:center;
    margin-top:70px;
}
#myCarousel
{
    position:relative;
}
.carousel-control-prev
{
    background-color: #6765d5;
    width:50px;
    height:50px;
    border-radius: 50%;
    position: absolute;
    top:20%;
    margin-left:10%;
}
.carousel-control-next
{
    background-color: #6765d5;
    width:50px;
    height:50px;
    border-radius: 50%;
    position: absolute;
    top:20%;
    margin-right:10%;
}
.carousel-control-prev-icon
{
    position: absolute;
    top:20%;
    right:20%;
}
.carousel-control-next-icon
{
    position: absolute;
    top:20%;
    left:20%;
}
#myCarousel .carousel-item
{
    padding:30px 40px 70px;
    text-align: center;
}
#myCarousel .carousel-item h3
{
    color:darksalmon;
    font-style: italic;
    font-size: 16px;
}
#myCarousel .carousel-item h4
{
    color:indigo;
    font-weight: bold;
    font-size: 16px;
}
#myCarousel
{
    transition: transform 1s ease, opacity .1s ease-out;
}

/*CONTACT*/

#contact
{
	background-color: antiquewhite;
	padding:40px 0 60px;
	margin-bottom:40px;
}
#contact .divider
{
	width:100px;
	height:2px;
	background-color:darksalmon;
	margin: 0 auto;
}
#contact .heading
{
	
	text-align:center;
	margin-bottom: 40px;
	position: relative;
	top:40px;
}
#contact h2
{
	text-transform: uppercase;
	color: white;
	font-weight: bold;
}
.row .col-lg-9
{
	margin:0 auto;
}
#contact-form
{
	font-size: 20px;
	padding: 40px;
	color:#fff;
}
.comment
{
	font-style:italic;
	color:brown;
	height:25px;
	font-size:15px;
}
#contact-form input[type=submit]
{
	margin: 40px auto 0px;
	display:block;
}
#contact .button1
{
	border: 1px solid #d9d9d9;
	background-color: #ffbd59;
	color:#fff;
	width:100%;
	font-weight:bold;
	text-transform: uppercase;
	padding:18px;
	border-radius:5px;
	transition: all 0.3s ease-in 0;
}
#contact .button1:hover
{
	background-color:#545454;
	border-color: #ffbd59;
}
.thank-you
{
	text-align:center;
	margin-top: 15px;
	font-weight: bold;
	font-size:22px;
	color:#fff;
}

/* FOOTER */
footer
{
   background-color:burlywood;
   padding:30px 0 20px; 
}
footer .bi-c-circle
{
    color:#fff;
    
}
footer .bi-chevron-up
{
    color:indigo;
    font-size: 25px;
    line-height:60px;
}
footer .bi-chevron-up:hover
{
    font-size: 30px;
}
footer h5
{
    color:#fff;
    font-weight:normal;
}