html{
    margin:0;
    padding:0;
    background: url(../images/fond.jpg) no-repeat center center scroll;
    background-size: 100% 100%;
 }
    
body{
    font:16px 'Source Code Pro';
    color: rgb(67, 48, 26);

}
header h1,header h2,header h3, header p{
    margin:0;
    padding: 0;
    font-weight: 500;
}
.container{
    width: 1200px;
    margin:18rem auto 3rem auto;
    position: relative;
    overflow: hidden;
    height: auto !important;


}
.wrap{
    width: 1000px;
    margin: 0 auto;
}
/*menu*/

.menu{
    font-size: 1.1rem;
    font-weight: 700 ;
    position: fixed;
    top:0rem;
    width: 75rem;
    z-index: 100;
    -webkit-transition: all ease 500ms ;
    -moz-transition: all ease 500ms ;
    -ms-transition: all ease 500ms ;
    -o-transition: all ease 500ms ;
    transition: all ease 500ms ;

}

.menu ul{
    position:relative;
    display: table;
    margin:0 auto ;
    padding:0 1rem;
    background: url(../images/craft.jpg) ;
    background-size: 50% ;
    border-radius: 3px;
    width: 73rem;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .1) inset,
    0 -1px 0 rgba(0, 0, 0, .1) inset,
    0 -2px 0 rgba(0, 0, 0, .1) inset,
    0 -3px 0 rgba(0, 0, 0, .1) inset,
    -1px 0 0 rgba(0, 0, 0, .1) inset;
}

.menu ul li{
    display: table-cell;
}


.menu ul li a{
    display: block;
    position: relative;
    text-align: center;
    color:rgb(93, 67, 37);
    text-decoration: none;
    padding: 13px 18px 23px 8px ;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .1);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .1) inset,
    0 -1px 0 rgba(0, 0, 0, .1) inset,
    0 -2px 0 rgba(0, 0, 0, .1) inset,
    0 -3px 0 rgba(0, 0, 0, .1) inset;
    -webkit-transition: all 1s ;
    -moz-transition: all 1s ;
    -ms-transition: all 1s ;
    -o-transition: all 1s ;
    transition: all 1s ;
    transition: all 1s;

}
.mail{
    display: none;
}
/*hamburger*/

.is-closed, .is-opened{
    margin: 0;
    padding: 0;
    width: 60px;
    height: 60px;
    position: absolute;
    right:.5rem;
    top:2.2rem;
    background:rgba(67, 48, 26,.1) ;
    border-radius:50%;
    display: none;
}
svg {
    width: 60px;
    height: 55px;
    cursor: pointer;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
path {
    fill: none;
    -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
    -moz-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
    -o-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
    -ms-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
    transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
    stroke-width: 50px;
    stroke-linecap: round;
    stroke: rgb(67, 48, 26);
;
    stroke-dashoffset: 0px;
}
path#top,
path#bottom {
    stroke-dasharray: 240px 950px;
}
path#middle {
    stroke-dasharray: 240px 240px;
}
.is-opened path#top,
.is-opened path#bottom {
    stroke-dashoffset: -650px;
    stroke-dashoffset: -650px;
}
.is-opened path#middle {
    stroke-dashoffset: -115px;
    stroke-dasharray: 1px 220px;
}

.home{
    cursor: pointer;

}

.menu ul li:nth-child(1) {
    background: url(../images/accolade.png) no-repeat 0 3rem,  url(../images/accolade-reverse.png) no-repeat 260px 3rem;
    background-size:25px 170px;
    padding:3rem;
    padding-left: 2rem;
    border-radius:0 0 5px 5px;
    /*color: rgb(67, 48, 26);*/

}

.menu ul li:nth-child(1) h1{
    padding: 0;
    font-size:3rem ;
    font-weight: 400;
}
.menu ul li:nth-child(1) p{
    font-size: 2rem;
    font-weight: 200;
    letter-spacing: .7rem;

    margin:.5rem 0;
}
.menu ul li:nth-child(1) p+p{
    margin:.8rem 0;
    font-weight: 500;
    font-size: 1.3rem;
    letter-spacing: -.13rem;

}



.menu ul li a::before{
    content: '';
    display:none;
    position: absolute;
    left: 45%;
    bottom: 3.3em;
    margin-left: 0px;
    width: 8px;
    height: 8px;

    background: rgba(93, 67, 37,.5);
}



.menu ul li a:hover::before,
.menu ul li a:focus::before{
    background: rgba(93, 67, 37, 1);
    box-shadow: 0 0 2px rgba(255, 255, 255, .4),
    0 -1px 0 rgba(0, 0, 0, .3);
}



.menu ul li a:hover,
.menu ul li a:focus{
    padding:13px 25px 23px 25px;
    background: rgba(93, 67, 37, 0.08);
    box-shadow: 0 -3px 10px rgba(93, 67, 37, 0.2) inset,
    0 -6px 10px rgba(93, 67, 37, 0.1) inset,
    0 -9px 10px rgba(93, 67, 37, 0.1) inset;
    -webkit-transition: all 1s 0s;
    -moz-transition: all 1s 0s;
    -ms-transition: all 1s 0s;
    -o-transition: all 1s 0s;
    transition: all 1s 0s;
    transition: all 1s 0s;
}


.menu ul li a:active{
    background: -webkit-linear-gradient(rgba(0,0,0,.08),rgba(93, 67, 37, 0.1));
    background:    -moz-linear-gradient(rgba(0,0,0,.08),rgba(93, 67, 37, 0.1));
    background:     -ms-linear-gradient(rgba(0,0,0,.08),rgba(93, 67, 37, 0.1));
    background:      -o-linear-gradient(rgba(0,0,0,.08),rgba(93, 67, 37, 0.1));
    background:         linear-gradient(rgba(0,0,0,.08),rgba(93, 67, 37, 0.1));

    box-shadow: 0 0 2px rgba(93, 67, 37, 0.3) inset;
}
.footer{
    font:1rem Merriweather;
    background: url("../images/encre.png") no-repeat -50px -150px,url(../images/craft.jpg) no-repeat center center;
    cursor: pointer;
    background-size: cover;
    padding-bottom: 7.8rem;
    color: rgb(67, 48, 26);
    width: 75%;
}
.footer .fa{
    font-size: 1.3rem;
}
.footer .fa:hover{
    color:#000000;
}
.footer ul{
    padding: 3rem;
    padding-left: 6rem;

}
.footer ul li{
    list-style: none;


}
.footer h3, .footer p{
    margin:0;
    padding:0;
}
.footer h3{
    color:#000000;
}

.footer sup{
    font-size:3rem;
    line-height: 1.3rem;
    font-weight: 500;
    color: rgb(67, 48, 26);

}
.footer .phonetique {
    color: rgb(67, 48, 26) !important;
}
.footer p, .footer a{
    color: #000000;
}
header .fa{
    margin: 0;
}
header .fa:hover{
    text-decoration: none;
}
header h1{
    text-align: left;
}

/*end menu*/
a{
    text-decoration: none;
}

ul, li{
    list-style: none;
    margin: 0;
    padding: 0;
}

p{
    margin-left: 2rem;
}
	

h3{
    margin-left: 1rem;
}



section{
    width: 50%;
    float: left;
}

article{
    background: url(../images/craft.jpg) repeat;
    background-size:auto;
    background-position: 0 0;
    position:relative;
    margin: .8rem;
    padding: 1.3rem;
	padding-top:.1rem;
    border: 1px solid rgb(149, 108, 59);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    border-radius:5px;
    
}


h1{
    text-align: center;
    font-weight: 600;
	font-size:1.8rem;
	
}

h2{
    font-weight: 400;
}

h3{
    font-weight: 500;
	
	
    
}

section:first-child article:first-child h2{
	text-align:left;
    font-size: 1.1rem;
    font-weight: 400;
	letter-spacing:-0.09rem;
}

.contact-responsive{
    display:none;
}
.contact-responsive h2{
    text-align:left;
    font-size: 1.1rem;
    font-weight: 400;
}
.nom{
	margin-left:2.8rem;
}
.portfolio{
    margin-left:2.8rem;

}
.mail:hover{
    cursor: pointer;
    color:rgba(0,0,0,.7);
    text-decoration: underline;

}


section:first-child article:nth-child(2) p{
    font-weight: 700;
}

section:first-child article:nth-child(2) p+p+p{
    font-weight: 300;
}

section:first-child article:nth-child(2) p+p+p+p+p{
    
    font-weight: 400;
}

.interest{
    margin-top: 0 ;
}
.interest ul{
	margin-left:4rem;
}

.experiences{
    padding-bottom:2.6rem;
}

.experiences-responsive{
    display:none;
}
.experiences-responsive p{
        font-weight: 700;

}
.experiences-responsive p+p+p{
        font-weight: 300;
}

.utility{
    margin-top: 0;
    padding: 1.3rem;
    float: right;
    text-align: center;
}

.utility a{
    color:inherit;

}


 .experiences a,  .experiences-responsive a {
    display: block;
    color:inherit;
    word-wrap: break-word;
    margin-left: .3rem;
    text-decoration: none;
	font-weight:600;
}

a:hover{
	text-decoration:underline;
    color:rgba(0,0,0,.7);

}

.skills{
    padding-bottom: 6rem;
}

.skills br{
	display:none;
}

section:last-child article:last-child ul li p{
    font-weight: 600;

}
section:last-child article:last-child ul li:last-child p br{
    display:block;

}

section:last-child article:last-child ul li:last-child p .fa{
        margin-left: 4rem;
		margin-bottom:.1rem;
		font-size:.8rem;
     
}

.school p{
	font-weight:600;


}

/*ombrage*/
article:before, article:after {
    content: "";
    position: absolute;
    z-index: -2;
    bottom: 15px;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.9);
    height: 20%;
    left: 10px;
    max-width: 300px;
    transform: rotate(-3deg);
    width: 50%;
}

article:after {
    left: auto;
    right: 10px;
    transform: rotate(3deg);
}
/*fa*/

.fa{
    margin:.3rem 1rem;
    font-size: 1.1rem;
    
}
.fa-paint-brush{
    font-size: 1rem;
}
.fa-smile-o{
	font-size:1.8rem;
}

.fa-print {

	font-size:1.8rem;
	margin:1rem;
    display: inline;

}


.big{
	font-size:1.8rem;
	margin:1rem;
}

.utility .fa:hover{
    cursor: pointer;
}
.footer{
    display: none;
    font:1rem Merriweather;
    background: url("../images/encre.png") no-repeat -50px -150px,url(../images/craft.jpg) no-repeat center center;
    cursor: pointer;
    background-size: cover;
    color: rgb(67, 48, 26);

}
.footer ul{
    padding: 3rem;
    padding-left: 3rem;

}
.footer ul li{
    list-style: none;


}
.footer h3{
    font-size: 2rem;

}
.footer h3, .footer p{
    margin:0;
    padding:0;
    font-weight: 500;
}
.footer p, .footer a{
    color: #000000;
    font-size: 1.2rem;

}

.footer sup{
    font-size:3rem;
    line-height: 1.3rem;
    font-weight: 500;
    color: rgb(67, 48, 26);

}
.footer .phonetique {
    color: rgb(67, 48, 26) !important;
}
.footer p, .footer a{
    color: #000000;
}


/*tooltip


.tooltip[data-tooltip] {
		position: relative;
		
	}
	
.tooltip[data-tooltip]::after  {
		content: attr(data-tooltip);
		position: absolute;
		width: auto;
		
		line-height:35px;
		bottom: 30px;
		padding: 1rem;
		color: #fff;
		background: rgb(149, 108, 59);
		display: none;
		text-align: center;
		border:1px solid rgb(149, 108, 59);
		border-radius: 13rem;
		font-size:80%;
		text-transform:capitalize;
		
	}
	
.tooltip[data-tooltip]::before {
		content: "";
		display: none;
		position: absolute;
		width: 0;
		height: 0;
		bottom: 10px;
		left:1.8rem;
		
		border: 10px solid transparent;
		border-top-color: rgb(149, 108, 59);
		
	}
	
.tooltip[data-tooltip]:hover::before, .tooltip[data-tooltip]:hover::after {
		display: block;
	}*/

/*clearfix*/
.clearfix{

    margin-bottom:0;
    padding: 0;
}
.clearfix:after{
    display: block;
    content: '';
    clear: both;
    visibility: hidden;
    height: 0;
    padding: 0;
}

/*responsive*/

@media screen and (max-width:1024px){
    .wrap{
        width: auto;
    }
    .container {
        width: auto;
        margin: 1rem 1rem 3rem 1rem;

    }
    .menu {
        width: auto;
        margin: 0;
        position: relative;

    }
    .menu ul {
        display: block;
        background: url(../images/fond.jpg) no-repeat center center !important  ;
        width: auto;
        padding: 0;
        margin: 0;
        background-size: 100%;
        box-shadow: 0 1px 0 rgba(0, 0, 0, .1) inset,
        0 -1px 0 rgba(0, 0, 0, .1) inset,
        -1px 0 0 rgba(0, 0, 0, .1) inset;

    }
    .menu ul li:nth-child(2) a {
        border-radius: 3px 3px 0 0;
    }
    .menu ul li:last-child a{
        border-radius: 0 0 3px 3px;
    }
    .menu ul li{
        display: none ;
    }
    .menu ul li:first-child{
        display:block ;
    }
    .mail{
        display: block;
        position: absolute;
        width: 60px;
        height: 60px;
        font-size: 2rem;
        z-index: 150;
        color: rgb(67, 48, 26);
        background: rgba(67, 48, 26,.1);
        border-radius: 50%;
        box-sizing: border-box;
        padding: .9rem;
        font-weight: 600;
        top:5rem;
        right: .5rem;
    }
    .is-closed, .is-opened{
        display: block;
    }
    section{
        width: auto;
        float:none;
    }
    section:first-child{
        display:none;
    }
    article{
        background: url(../images/craft.jpg) no-repeat;
        background-size: 100% 103%;
        margin: 1rem 0;
    }
    
    .experiences-responsive{
        display:block;
    }

    
    .contact-responsive{
        display: block;
        width: auto;
   
    }

    section:last-child article:first-child{
        display: block;
        width:auto;
    }


    br{
        display: block;

    }

   

    section:last-child article:last-child ul li:last-child p .fa{
        margin-left:5rem;
        font-size: .8rem;
    }

	.interest-responsive{
	display:block;
	}
	
	.interest-responsive ul{
	margin-left:5rem;
	}
    .skills{
        padding-bottom: 1.3rem;
    }
    .utility{
       display: none;

    }
    .fa-print, .fa-file-pdf-o{
        display: none;
    }


    .footer{
        display: block;
        background: url("../images/encre.png") no-repeat -150px -250px,url(../images/craft.jpg) no-repeat center center;
        background-size: cover;
        width: auto;


    }

}

@media screen and (max-width:500px){
    

    section:last-child article:last-child ul li:last-child p .fa{
        margin-left: 4rem;
        
    }
    .footer{
        background: url("../images/encre.png") no-repeat -25px -75px,url(../images/craft.jpg) no-repeat center center;
        background-size: cover;

    }
    .menu ul {
        background-size: contain;
        background: url(../images/craft.jpg) no-repeat center center  ;
        background-size: cover;
        box-shadow: 0 1px 0 rgba(0, 0, 0, .1) inset,
        -1px 0 0 rgba(0, 0, 0, .1) inset;
    }


    .menu ul li:first-child {

        padding-left: 3rem;
        background-size: 25px 140px;
        background: url(../images/accolade.png) no-repeat 15px 40px,  url(../images/accolade-reverse.png) no-repeat 170px 40px;
        background-size:25px 150px;
        padding-bottom: 1rem;

    }

    .menu ul li:first-child h1{
        font-size: 1.8rem;
    }
    .menu ul li:first-child p{
        font-size: 1.8rem;
        letter-spacing: normal;
    }
    .menu ul li:first-child p+p{
        font-size: 1.3rem;
        letter-spacing: .1rem;
    }
    .footer{
        background: url("../images/encre.png") no-repeat -25px -75px,url(../images/craft.jpg) no-repeat center center;
        background-size: cover;

    }
    .home{
        -webkit-transform: scale(.8);
        -moz-transform: scale(.8);
        -ms-transform: scale(.8);
        -o-transform: scale(.8);
        transform: scale(.8);
        -webkit-transform-origin: left top;
        -moz-transform-origin: left top;
        -ms-transform-origin: left top;
        -o-transform-origin: left top;
        transform-origin: left top;
        width: 150px;

    }

}