/*************/
/*** RESET ***/
/*************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input, textarea {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
    vertical-align: baseline;
    line-height: 1.25;
    box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: inside;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html {
  scroll-behavior: smooth;
}


/*************/
/*** FONTS ***/
/*************/

@font-face {
    font-family: Montserrat;
    src: url('../fonts/montserrat-medium-webfont.woff2') format('woff2');
         /* url('../fonts/montserrat-medium-webfont.woff') format('woff'); */
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: Montserrat;
    src: url('../fonts/montserrat-bold-webfont.woff2') format('woff2');
         /* url('../fonts/montserrat-bold-webfont.woff') format('woff'); */
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: Nunito;
    src: url('../fonts/nunitosans-regular-webfont.woff2') format('woff2');
         /* url('../fonts/nunitosans-regular-webfont.woff') format('woff'); */
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: Nunito;
    src: url('../fonts/nunitosans-bold-webfont.woff2') format('woff2');
         /* url('../fonts/nunitosans-bold-webfont.woff') format('woff'); */
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: Circular;
    src: url('../fonts/CircularStd-Black.woff') format('woff');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: Circular;
    src: url('../fonts/CircularStd-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/***********************/
/*** TEMPLATE STYLES ***/
/***********************/

/*
Noir : #171717 / R23 V23 B23
Gris clair : #f5f5f5
Gris : #787878 / R120 V120 B120
Vert d'eau : #10c9c3
Vert d'eau clair : #22e4de
*/

html, body{
    font-size: 100%;
}

@media screen and (max-width:840px) {
    html, body{
        font-size: 90%;
    }
}

body {
    font-family: Nunito;
    /* color: #787878; */
    color: #3f3f3f;
    background-color: #f5f5f5;
    padding-top: 81px;
}

@media screen and (min-width:841px) {
    body {
        padding-top: 70px;
    }
}

/* Titles */

.tmp-title0 {
    font-family: Circular;
    font-weight: bold;
    font-size: 2.4rem; /* 38.4px */
    color: #171717;
}

.tmp-title1 {
    font-family: Circular;
    font-weight: bold;
    font-size: 2.4rem; /* 38.4px */
    text-transform: uppercase;
    /* color: #171717; */
    background-color: black;
    color: white;
    text-align: center;
    margin-bottom: 1.5rem;
    border-radius: 25px;
    margin-left: auto;
    margin-right: auto;
    padding: 0.3rem 1.5rem;
    width: fit-content;
}

.tmp-title2 {
    font-family: Circular;
    font-weight: bold;
    font-size: 1.75rem; /* 28px */
    color: #171717;
}

/* Links & buttons */

a {
    color: #171717;
}
a:hover {
    /* color: #26C4EC; */
    color: #2d71ca;
}

.tmp-btn {
    display: inline-block;
    /* background-color: #0095B6; */
    background-color: #004fb6;
    padding: .9rem 1.6rem; /* 14.4px 25.6px */
    font-family: Circular;
    font-size: 0.85rem; /* 13.6px */
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: .1rem;
    transition: background-color 400ms;
}

.tmp-btn:hover{
    /*background-color: #26C4EC; */
    background-color: #2d71ca;
    box-shadow: 0 0 .95rem rgba(23,23,23,.1);
    color: white;
}

.tmp-btn-small {
    display: inline-block;
    /* background-color: #0095B6; */
    background-color: #004fb6;;
    padding: .7rem 1.15rem;
    font-family: Circular;
    font-size: 0.75rem;
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: .1rem;
    transition: background-color 400ms;
}

.tmp-btn-small:hover{
    /*background-color: #26C4EC; */
    background-color: #2d71ca;
    box-shadow: 0 0 .8rem rgba(23,23,23,.1);
    color: white;
}

/* Strong */

strong {
    font-weight: bold;
    color: #171717;
}

/* Page menu */

.tmp-menu{
    position: fixed;
    width:100%;
    background-color: white;
    padding: 1.15rem 3rem; /* 34.4px 0 */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    top:0;
    z-index: 2;
    box-shadow: 0px 0px 23px -10px black;
}

.tmp-menu a{
    text-decoration: none;
    color: #171717;
}

.tmp-menu .home-link {
    font-family: Circular;
    font-weight: bold;
    font-size: 1.5rem; /* 24px */
    margin-top:.2rem;
}

.tmp-menu .site-links {
    margin-top: .35rem;
}

.tmp-menu .site-links a {
    font-family: Circular;
    /*font-size: 0.9rem;*/ /* i.e 14.4px */
    font-size: 1.1rem; /* i.e 14.4px */
    /* text-transform: uppercase; */
    font-weight: bold;
    margin-left: 3rem;
    transition: color 400ms;
}

.tmp-menu .site-links a:hover {
    /* color: #26C4EC; */
    /* border-bottom-style: solid;
    border-bottom-color: #2d71ca; */
    color: #2d71ca;
}

.tmp-menu .site-links a.active {
    /* color: #0095B6; */
    border-bottom-style: solid;
    color: #004fb6;
}

.tmp-menu .site-links a.w--current {
    /* color: #0095B6; */
    border-bottom-style: solid;
    color: #004fb6;
}

.tmp-menu .burger {
    display: none;
    padding-top: 3.5px;
    cursor: pointer;
}

.tmp-menu .burger span{
    display: block;
    width: 1.75rem;
    height: 2px;
    background-color: #171717;
    transition: all 500ms;
}

.tmp-menu .burger span:nth-child(1),
.tmp-menu .burger span:nth-child(2) {
    margin-bottom: 7px;
}

.tmp-menu[data-state=opened] .burger span:nth-child(1) {
    transform: rotate(45deg);
    transform-origin: 0 0;
    margin-bottom: 15px;
    margin-right: -5px;
}

.tmp-menu[data-state=opened] .burger span:nth-child(2) {
    display: none;
} 

.tmp-menu[data-state=opened] .burger span:nth-child(3) {
    transform: rotate(-45deg);
    transform-origin: 0 100%;
    margin-right: -5px;
}


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

    .tmp-menu{
        padding-top: 1.7rem;
        padding-bottom: 1.7rem;
    }

    .tmp-menu .site-links {
        text-align: right;
    }

    .tmp-menu .site-links a {
        margin-left: 0;
    }

    .tmp-menu[data-state=closed] .site-links a{
        display: none;
    }

    .tmp-menu[data-state=opened] .site-links a {
        display: block;
        padding: .45rem 0;
    }
    .tmp-menu[data-state=opened] .site-links a:last-of-type {
        padding-bottom: 0;
    }

    .tmp-menu .burger {
        display: inline-block;
    }

    .tmp-menu[data-state=opened] .burger {
        margin-bottom: 20px;
    }

}

/* Page main */

/* .tmp-main .tmp-content-competences {
    padding: 0 4rem;
} */

/* Page footer */

.tmp-footer {
    padding: 4rem 2rem;
    background-color: #171717;
}

.tmp-footer h1,
.tmp-footer h2,
.tmp-footer a {
    color: white;
}

.tmp-footer h1,
.tmp-footer h2 {
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.tmp-footer h1 {
    font-size: 1.5rem;
}

.tmp-footer h2 {
    font-size: 1.25rem;
}

.tmp-footer a {
    text-decoration: none;
    display: inline-block;
    margin-bottom: .25rem;
}

.tmp-footer a:hover{
    /* color: #26C4EC; */
    color: #2d71ca;
}

.tmp-footer .contact a {
    background-repeat: no-repeat;
    background-position-y: center;
    padding-left: 24px;
}

.tmp-footer .contact a:nth-of-type(1) {
    background-image: url(../images/template/mail.png);
}
.tmp-footer .contact a:nth-of-type(1):hover{
    background-image: url(../images/template/mail-hover.png);
}

.tmp-footer .contact a:nth-of-type(2) {
    background-image: url(../images/template/phone.png);
}
.tmp-footer .contact a:nth-of-type(2):hover{
    background-image: url(../images/template/phone-hover.png);
}

.tmp-footer .contact a:nth-of-type(3) {
    background-image: url(../images/template/linkedin.png);
}
.tmp-footer .contact a:nth-of-type(3):hover{
    background-image: url(../images/template/linkedin-hover.png);
}

.tmp-footer .contact a:nth-of-type(4) {
    background-image: url(../images/template/github.png);
}
.tmp-footer .contact a:nth-of-type(4):hover{
    background-image: url(../images/template/github-hover.png);
}
.tmp-footer .contact a:nth-of-type(5) {
    background-image: url(../images/template/flickr.png);
}
.tmp-footer .contact a:nth-of-type(5):hover{
    background-image: url(../images/template/flickr-hover.png);
}
.tmp-footer .contact a:nth-of-type(6) {
    background-image: url(../images/template/soundcloud.png);
}
.tmp-footer .contact a:nth-of-type(6):hover{
    background-image: url(../images/template/soundcloud-hover.png);
}
.tmp-footer .contact a:nth-of-type(7) {
    background-image: url(../images/template/youtube.png);
}
.tmp-footer .contact a:nth-of-type(7):hover{
    background-image: url(../images/template/youtube-hover.png);
}

.tmp-footer strong {
    color: inherit;
}
@media screen and (max-width:500px) {
    .tmp-footer .contact {
        margin-bottom: 2rem;
    }
}
@media screen and (min-width:501px) {
    .tmp-footer {
        display: flex;
    }
    
    /* .tmp-footer .contact, */
    .tmp-footer .contact {
        flex:1;
    }
    
    .tmp-footer .contact .links {
        columns: 2;
    }

    .tmp-footer .menu {
        flex:1;
    }
    
    .tmp-footer .menu .links {
        columns: 2;
    }
}

/* Page main (not home) */

.tmp-main:not(.home) {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

/* Page content (not home) */

/* .tmp-content header, */
.tmp-content h1 {
    margin-bottom: 2rem;
}
/* .tmp-content header p{
    font-size: 1.15rem;
} */

.tmp-content h2,
.tmp-content p,
.tmp-content table,
.tmp-content form {
    margin-bottom: 1.3rem;
}

.tmp-content ul{
    margin-bottom: 0rem;
}

/* Page content (not home) */

/* .tmp-content-competences header, */
.tmp-content-competences h1 {
    margin-bottom: 2rem;
}
/* .tmp-content-competences header p{
    font-size: 1.15rem;
} */

.tmp-content-competences h2,
.tmp-content-competences p,
.tmp-content-competences table,
.tmp-content-competences form {
    margin-bottom: 1.3rem;
}

.tmp-content-competences ul{
    margin-bottom: 0rem;
}

/* Page aside */

.tmp-aside {
    font-size: .95rem;
}

.tmp-aside h2 {
    margin-top: .6rem;
    margin-bottom: 2.15rem;
}

.tmp-aside p {
    line-height: 1.5;
}

.tmp-aside .infos p {
    margin-bottom: .5rem;
}

.tmp-aside .infos a:first-of-type {
    margin-bottom: .5rem;
}

.tmp-aside .projects h2 {
    margin-top: 2.5rem;
}

.tmp-aside .projects h3 {
    /* color: #0095B6; */
    color: #004fb6;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: .25rem;
}

.tmp-aside .projects a {
    display: inline-block;
    margin-bottom: 1.5rem;
}

@media screen and (max-width:840px) {
    .tmp-aside {
        border-top: 1px solid #787878;
        margin-top: 2.75rem;
        padding-top: 2rem;
    }
}

/* @media screen and (min-width:841px) {
    .tmp-content-competences {
        padding-right: 10%;
    }
} */

/* placement côte à côte de .tmp-aside et .tmp-main à partir de 841px */
@media screen and (min-width:841px) {
    .tmp-main:not(.home) {
    display: flex;
    }
    .tmp-content-competences {
        /* padding-right: 5%; */
        width: 100%;
    }
    .tmp-content{
        width: 63.5%;
    }
    .tmp-aside {
        padding-left: 3.15rem;
        width: 36.5%;
    }
}

/* Images responsives */

.img-responsive {
    max-width: 100%;
    width: auto; /* pour IE */
    height: auto; /* pour IE */ -ms-interpolation-mode: bicubic; /* lissage pour IE */
}

.background {
    width: 100%;
}

.column {
  float: left;
  width: 50%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}