@font-face {
    font-family: 'open_sansextrabold';
    src: url('/inc/fonts/open_sans/OpenSans-ExtraBold-webfont.eot');
    src: url('/inc/fonts/open_sans/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/inc/fonts/open_sans/OpenSans-ExtraBold-webfont.woff2') format('woff2'),
         url('/inc/fonts/open_sans/OpenSans-ExtraBold-webfont.woff') format('woff'),
         url('/inc/fonts/open_sans/OpenSans-ExtraBold-webfont.ttf') format('truetype'),
         url('/inc/fonts/open_sans/OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansbold';
    src: url('/inc/fonts/open_sans/OpenSans-Bold-webfont.eot');
    src: url('/inc/fonts/open_sans/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/inc/fonts/open_sans/OpenSans-Bold-webfont.woff2') format('woff2'),
         url('/inc/fonts/open_sans/OpenSans-Bold-webfont.woff') format('woff'),
         url('/inc/fonts/open_sans/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('/inc/fonts/open_sans/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansregular';
    src: url('/inc/fonts/open_sans/OpenSans-Regular-webfont.eot');
    src: url('/inc/fonts/open_sans/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/inc/fonts/open_sans/OpenSans-Regular-webfont.woff2') format('woff2'),
         url('/inc/fonts/open_sans/OpenSans-Regular-webfont.woff') format('woff'),
         url('/inc/fonts/open_sans/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('/inc/fonts/open_sans/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sanscondensed_light';
    src: url('/inc/fonts/open_sans_condensed/OpenSans-CondLight-webfont.eot');
    src: url('/inc/fonts/open_sans_condensed/OpenSans-CondLight-webfont.eot?#iefix') format('embedded-opentype'),
         url('/inc/fonts/open_sans_condensed/OpenSans-CondLight-webfont.woff2') format('woff2'),
         url('/inc/fonts/open_sans_condensed/OpenSans-CondLight-webfont.woff') format('woff'),
         url('/inc/fonts/open_sans_condensed/OpenSans-CondLight-webfont.ttf') format('truetype'),
         url('/inc/fonts/open_sans_condensed/OpenSans-CondLight-webfont.svg#open_sanscondensed_light') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sans_condensedbold';
    src: url('/inc/fonts/open_sans_condensed/OpenSans-CondBold-webfont.eot');
    src: url('/inc/fonts/open_sans_condensed/OpenSans-CondBold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/inc/fonts/open_sans_condensed/OpenSans-CondBold-webfont.woff2') format('woff2'),
         url('/inc/fonts/open_sans_condensed/OpenSans-CondBold-webfont.woff') format('woff'),
         url('/inc/fonts/open_sans_condensed/OpenSans-CondBold-webfont.ttf') format('truetype'),
         url('/inc/fonts/open_sans_condensed/OpenSans-CondBold-webfont.svg#open_sans_condensedbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

.container{
    min-height: 85vh;
    width: 80vw;
    padding: 90px 0;
}

p, h1, h2, h3, h4, h5, h6{
    margin: 0;
}

a:hover{
    text-decoration: none;
}


/*_______HAUT-SITE________*/

/*- barre de navigation -*/
.nav{
    padding-top: 10px;
}

a.nav-link{
    font-family: 'open_sansregular';
    text-align: center;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #363F45;
    transition: 0.4s;
}

.nav .lien::after{
    content: "";
    border : 0px solid #A3CCEE;
    width : 0px;
    display: block;
    margin: 0 auto;
    transition: 0.2s;
}

.nav .lien:hover:after{
    border : 1px solid #A3CCEE;
    width : 50px;
}

.nav .lien:hover{
    font-family: 'open_sansbold';
    letter-spacing: 5px;
}

ul li{
    width: 20%;
}

ul li:first-child, ul li:last-child{
    width: 5%;
}

ul li:last-child{
    padding-left: 50px;
}

/*- animation icône contact -*/
#icon_contact{
    width : 30px;
	transition: transform 300ms cubic-bezier(.75,-0.5,0,1.75);
}

#icon_contact:hover {
	transform: scale(1.3) translate(0, 5px);
}

#line1, #line2{
	transition: transform 400ms cubic-bezier(1,-0.75,0,1.75);
}

#icon_contact:hover #line1{
	transform: rotate(25deg) translate(16px, -6px);
}

#icon_contact:hover #line2{
	transform: rotate(-25deg) translate(-21px, 12px);
}
/*---------*/


/*- animation icône home -*/
a.nav-link:hover span{
    color: #F9B224;
	transform: scale(1.5);
}

a.nav-link span{
    transition: transform 250ms cubic-bezier(1,1,0,1.75);
}


/*_______INDEX________*/

#icon_fleche, #icon_coeur{
    width : 45px;
}

.logos{
    padding-top : 30px;
}



/*_______PRESENTATION________*/

/*-icônes-*/

#icon_formation{
    margin-right : -50px;
}
#icon_exp{
    margin-left : -50px;
}
.icone svg{
    width : 65px;
    height: 65px;
    padding : 10px;
    border : #D3E4ED 4px solid;
    background-color: #fff;
    border-radius: 200px 200px 200px 200px;
    -moz-border-radius: 200px 200px 200px 200px;
    -webkit-border-radius: 200px 200px 200px 200px;
    position : relative;
}

.descriptif{
    margin-top : 80px;
}

/*-points-*/

.time-form .gp-text::before{
    margin : 3px 0 0 52px;
}
.time-exp .gp-text::before{
    margin : 3px 0 0 -72px;
}
.gp-text::before{
    background: #F9B224;
    border: 5px solid #ffffff;
    border-radius: 200px 200px 200px 200px;
    -moz-border-radius: 200px 200px 200px 200px;
    -webkit-border-radius: 200px 200px 200px 200px;
    content: "";
    height: 20px;
    position: absolute;
    width: 20px;
}

/*-timeline-*/

.time-form::after, .time-exp::before{
    content : "" ;
    border : #D3E4ED 2px solid;
    background-color: #D3E4ED;
}

/*-photo-*/

.photo{
    width: auto;
    height: 130px;
    border-radius: 200px 200px 200px 200px;
    -moz-border-radius: 200px 200px 200px 200px;
    -webkit-border-radius: 200px 200px 200px 200px;
    -webkit-box-shadow: -3px -3px 10px 0px rgba(0,0,0,0.16);
    -moz-box-shadow: -3px -3px 10px 0px rgba(0,0,0,0.16);
    box-shadow: -3px -3px 10px 0px rgba(0,0,0,0.16);
    shape-outside: circle(50%);
    margin-right: 20px;
    float: left;
}

.presentation .col-md-12 p{
    font-family: 'open_sansregular';
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    color : #676D70;
}

.presentation .gp-text h1{
    font-family: 'open_sansregular';
    font-size: 1.3rem;
    color : #363F45;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 3px;
}

.presentation .gp-text h1 .lieu{
    font-family: 'open_sansbold';
    font-size: 1.1rem;
}

.presentation .gp-text p.date{
    font-family: 'open_sansbold';
    font-size: 0.9rem;
    color : #A3CCEE;
    margin-bottom: 7px;
}

.presentation .gp-text h2{
    font-family: 'open_sansregular';
    font-size: 1rem;
    color : #363F45;
    text-transform: uppercase;
}

.presentation .gp-text p{
    font-family: 'open_sanscondensed_light';
    font-size: 1rem;
    color : #676D70;
    margin-top: 7px;
    line-height: initial;
}

.opt{
    text-transform: none !important;
}

.time-form .date span{
    margin-left : 5px;
}

.time-exp .date span{
    margin-right : 5px;
}

.outils{
    font-family: 'open_sans_condensedbold';
    font-size: 0.8rem;
    color : #363F45;
    text-transform: uppercase;
}

.presentation .gp-text{
    margin-bottom: 35px;
}


/*_______COMPETENCES________*/

.trace{
    height: 3px;
    width: 40px;
    background-color: #A3CCEE;
    margin: 20px auto;
}

.competences .blue{
    background-color: #E8F5FB;
    text-align: center;
    padding: 40px 15px;
}

.competences h1{
    font-family: 'open_sansregular';
    font-size: 1.4rem;
    color : #363F45;
    text-transform: uppercase;
}

.competences .blue p{
    font-family: 'open_sanscondensed_light';
    font-size: 1rem;
    color : #363F45;
    width: 70%;
    margin: 0 auto;
}

.competences img{
    padding-bottom: 25px;
}

.competences h2, .frameworks h2{
    font-family: 'open_sansregular';
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.frameworks h2{
    color : #676D70;
}

.competences h2{
    color : #363F45;
}

.softwares{
    margin: 60px 0;
}

.softwares .col-md-12{
    padding : 0;
}

.softwares .soft_design .col-auto{
    padding-left : 30px;
    padding-right: 0;
}

.softwares .soft_web .col-auto{
    padding-right : 30px;
    padding-left: 0;
}

.softwares .trace{
    margin : 15px 0 !important;
}

.frameworks{
    padding: 70px 0 95px 0;
    z-index : -1;
    width : 100%;
    left: 0;
    /*background-image: url('/chloethuillier/inc/css/img/green_cup.png');*/
    position : absolute;
}

.absolute{
    margin-bottom: 170px;
}


/*_______PORTFOLIO ( à venir )________*/
.avenir{
    text-align: center;
    color : #363F45;
    font-family: 'open_sansregular';
}
.workinprogress{
    width :15%;
    padding-bottom : 10px;
    color : #363f4570;
}
/*_______PORTFOLIO !!! PAS ENCORE PRET________*/

.guimet{
    background : linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.45)),
    url('/chloethuillier/inc/css/img/musee-guimet.jpg');
}

.lectra{
    background : linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.45)),
    url('/chloethuillier/inc/css/img/lectraworks.jpg');
}

.kraken{
    background : linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.45)),
    url('/chloethuillier/inc/css/img/kraken.jpg');
}

.realisations div{
    width: 130px;
    height: 130px;
    margin: 30px 40px 70px 40px;
    background-size: cover;
    border-radius: 200px 200px 200px 200px;
    -moz-border-radius: 200px 200px 200px 200px;
    -webkit-border-radius: 200px 200px 200px 200px;
}

.design::after, .web::after{
    content :"";
    width : 40px;
    border: solid 2px #A3CCEE;
    display: block;
    margin: 10px auto;
}

.design_projects h1, .web_projects h1{
    font-family: 'open_sansregular';
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: center;
}

.realisations a h2{
    text-align: center;
    font-size: 0rem;
    color : rgba(255, 255, 255, 1);
    font-family: 'open_sansbold';
    padding: 90% 0;
    transition: 0.3s;
}

.realisations a:hover h2{
    color : #fff;
    padding: 30% 10px;
    font-size: 1.1rem;
}

.realisations a:hover .kraken{
    background : linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
    url('/chloethuillier/inc/css/img/kraken.jpg');
    transform: scale(1.3);
    transition: 0.3s;
    background-size: cover;
}

.realisations a:hover .lectra{
    background : linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
    url('/chloethuillier/inc/css/img/lectraworks.jpg');
    transform: scale(1.3);
    transition: 0.3s;
    background-size: cover;
}

.realisations a:hover .guimet{
    background : linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
    url('/chloethuillier/inc/css/img/musee-guimet.jpg');
    transform: scale(1.3);
    transition: 0.3s;
    background-size: cover;
}




/*_______CONTACT________*/

.contact{
    background-color: #F9B224;
    margin-top: -2px;
    padding: 30px 0 80px;
    color: #363F45;
    font-family: 'open_sansregular';
}

.contact h1{
    color : #fff;
    font-family: 'open_sansextrabold';
    font-size : 1.8em;
    text-transform: uppercase;
    letter-spacing: 12px;
    padding-bottom: 60px;
}

.contact .col{
    padding : 0 0 10px 0;
    font-size: 1em;
}

.contact input, .contact textarea, .contact button{
    border : solid 1px #fff;
    border-radius: 0 0 0 0;
    -moz-border-radius: 0 0 0 0;
    -webkit-border-radius: 0 0 0 0;
    background-color: rgba(0, 0, 0, 0);
}

.contact button{
    font-size: 0.9em;
    text-transform: uppercase;
    color: #363F45;
    letter-spacing: 3px;
}

.contact button:hover{
    background-color: rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
    border : solid 1px #fff;
}

.contact button:active{
    background-color: #fff !important;
    border : solid 1px #fff !important;
    color : #F9B224 !important;
}

.contact input{
    height: 35px;
}

.contact label{
    font-size: 0.9em;
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.oi-map-marker{
    color: #fff;
    font-size: 2.2em;
    margin-top : 4px;
}

.contact input:focus, .contact textarea#message:focus{
    background-color: rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
    border : solid 1px #fff;
}