/*



    Colors used :

    

    #26607F

    #00A5FF

    #0084CC

    #00537F

    #4CC0FF



    #444



*/



body {

    background-color: rgb(252, 252, 252);

}



.button-container {

    width: 100%;

}



.button-container > a {

    display: block;

    width: 220px;

    padding: 5px;

    text-align: center;

    margin: 50px auto 0px auto;

    background-color: rgba(0, 165, 255, 0.1);

    color: #00537F;

    font-weight: bold;

    border-radius: 100px;

    border: 1px #444 solid;

}



#main {

    padding: 5%;

    width: 100%;

}



a {

    color: inherit;

    text-decoration: none;

}



.info-icon, .category-icon {

    color: #444;

}



#CV-section {

    z-index: 10;

}



.CV-page-sizer {

    width: 100%;

    max-width: 1200px;

    padding-top: 141%;

    margin: 0px auto;

    position: relative;

}



#CV-page {

    border: 1px #26607F solid;

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0px;

    left: 0px;

    background-color: white;

    z-index: 10;

    

    font-size: 1.5vw;

}



#CV-page > .container-fluid, #CV-page .row {

    width: 100%;

    height: 100%;

    padding: 0px;

}



.leftArea {

    height: 100%;

    border-left: 3px #00537F solid;

}



.rightArea {

    height: 100%;

}



.leftArea .info-icon {

    width: 50%;

    display: block;

    margin: 0px auto;

    text-align: center;

    padding-bottom: 0.7vw;

    margin-bottom: 0.3vw;

    border-bottom: 1px #26607F solid;

    font-size: 1.3em;

}



.photo-group {

    padding: 2vw;

    border-bottom: 3px #00537F solid;

}



.photo {

    border: 1px #DDD solid;

}



.leftArea span {

    width: 100%;

    display: block;

    text-align: center;

    margin-bottom: 1.2vw;

}



.leftArea span:last-child {

    margin-bottom: initial;

}



.personnal-infos-group {

    padding-top: 1.5vw;

}



.book {

    position: absolute;

    bottom: 0px;

    left: 0px;

    border-top: 3px #00537F solid;

    padding-top: 1.5vw;

    padding-bottom: 3vw;

    width: 100%;

}



.book > .website-link-1 {

    margin-top: 2vw; 

} 



.book > .website-link-2 {

    margin-bottom: 2vw; 

}



.book > .info-icon {

    border: none;

}



.interest-group > span:first-child {

    margin-bottom: 0.5vw;

}



.personnal-infos-group em {

    font-weight: normal;

    text-decoration: underline;

}



.book .separator {

    box-sizing: border-box;

    width: calc(100% - 6vw);

    margin: 1.5vw 3vw 1.5vw 3vw;

    border-bottom: 3px #26607F double;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #444;

}



.book .separator > .separator-icon {

    width: 5vw;

    height: 3vw;

    text-align: center;

    background-color: white;

    position: absolute;

    right: calc(50% - 2.5vw);

    top: calc(0px - 1.5vw);

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 2.5vw;

}



.small-line {

    width: 75%;

    margin: 1vw auto;

    border-bottom: 3px #26607F double;

}



.flashcode-container {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

}



.book img {

    width: 40%;

}



.leftArea > .row > .col-sm-12 {

    position: relative;

}



.CV-main-title {

    width: 90%;

    margin: 2vw auto;

}



.CV-main-title span:first-child {

    display: block;

    width: 100%;

    border-bottom: 1px #0084CC solid;

    text-align: left;

    font-size: 2vw;

    color: black;

    font-weight: 700;

}



.CV-main-title span:last-child {

    display: block;

    width: 100%;

    text-align: right;

    font-size: 2.5vw;

    color: black;

    font-weight: 700;

}



.tagscloud {

    width: 80%;

    margin: 0px 10%;

}



.skills > span {

    display: block;

    width: 100%;

    text-align: center;

    margin-bottom: 0.5vw;

}



.skills em {

    font-style: normal;

    font-weight: bold;

    font-size: 1.33em;

    text-decoration: none;

    margin-top: 0.5vw;

    border-top: 1px black solid;

    color: #444;

}



.long-line {

    width: 75%;

    margin: 3vw auto 3vw auto;

    border-bottom: 1px #26607F dashed;

}



#CV-main-infos {

    font-size: 1.1em;

}



.date > span {

    display: block;

    padding: 0px 0.5vw;

}



.date {

    font-weight: bold;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    font-size: 0.85em;

    color: #444;

}



.description > span {

    padding: 0px 3vw 0px 1vw;

    display: block;

    font-size: 0.88em;

}



.description > span > em {

    font-weight: bold;

    font-style: normal;

    font-size: 1em;

    color: #444;

}



.description > span:first-of-type > em:first-of-type {

    font-weight: bold;

    font-style: normal;

    font-size: 1.1em;

    color: #0084CC;

}



.location {

    text-indent: 3vw;

    font-style: italic;

}



.jobs .location {

    text-indent: 6vw;

}



.description > span:last-child {

    margin-bottom: 1vw;

}



.spacer {

    margin-top: 4vw;

}



.jobs .description span:nth-child(2) {

    margin-left: 3vw;

}



.category-title {

    box-sizing: border-box;

    height: calc(100% - 2vw);

    margin: 1vw 3vw 1vw 0vw;

    border-right: 3px #26607F double;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #444;

}



.category-title > h3 {

    margin: 0px;

    font-size: 3vw;

    writing-mode: vertical-rl;

    text-orientation: mixed;

    transform: rotate(180deg) translateX(0.5vw);

}



.category-icon {

    width: 3vw;

    height: 5vw;

    text-align: center;

    background-color: white;

    position: absolute;

    top: calc(50% - 2.5vw);

    right: calc(0px - 1.5vw);

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 2.5vw;

}



#realisationsTitle .category-icon {

    background-color: rgb(252, 252, 252);

}





/**********************************************************************************/





#book-section {

    margin-top: 100px;

    z-index: 1;

}



#website-introduction {

    width: 90%;

    max-width: 600px;

    text-align: justify;

    border-bottom: 3px #26607F solid;

    padding: 20px;

    padding-top: 0px;

    margin: 0px auto;

}



#website-introduction > a {

    margin-top: 10px;

    display: block;

    text-align: right;

    text-decoration: underline;

    color: #0084CC;

}



.website {

    width: 518px;

    border-top: 3px #444 solid;

    border-left: 3px #444 solid;

    border-bottom: 1px rgb(245, 245, 245) solid;

    border-right: 1px rgb(245, 245, 245) solid;

    position: relative;

    z-index: 2;

    margin-top: 100px;

    margin-left: auto;

    margin-right: auto;

    background-color: white;

    padding-right: 5px;

}



.website:nth-child(2) {

    margin-top: 76px;

}



.website > .container-fluid {

    padding: 0px;

}



.website ul {

    margin-bottom: 0.5rem;

}



.website-number {

    width: 150px;

    height: 150px;

    background-color: rgb(252, 252, 252);

    border: 3px transparent solid;

    border-right: 3px #444 solid;

    border-radius: 75px;

    position: absolute;

    top: -78px;

    left: -78px;

    transform: rotate(45deg);

    

    

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 2;

}



.website-number > span {

    transform: rotate(-45deg);

    font-size: 4rem;

    color: #0084CC;

    text-align: center;

    position: relative;

    bottom: 5px;

    right: -15px;

    z-index: 3;

    color: #0084CC;

}



.website h3 {

    display: block;

    width: calc(100% - 80px);

    text-align: right;

    font-size: 1.5rem;

    margin-left: 75px;

    margin-right: 5px;

}



.website-instructions-area h4 {

    display: block;

    width: 100%;

    text-align: center;

    border-top: 2px #0084CC solid;

    font-size: 1.2rem;

    padding-top: 15px;

}



.website-thumbnail-area {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}



.website-thumbnail-area > a {

    box-sizing: border-box;

    width: calc(100% - 20px);

}



.website-thumbnail-area span {

    font-size: 0.8rem;

    display: block;

    width: 100%;

    text-align: center;

}



.website-thumbnail {

    border: 5px #EEE solid;

}



.website em {

    font-style: normal;

    font-weight: bold;

    color: #26607F;

}



.website-tags > span {

    font-weight: bold;

    text-align: left;

    margin: 0px 5px;

    color: #00A5FF;

}



.website-tags > span:first-child {

    margin-left: 20px;

}



.website-tags > span:last-child {

    margin-right: 20px;

}



.website .fa-exclamation-circle {

    color: #0084CC;

}



.website .fa-exclamation-triangle {

    color: red;

}



.website .fa-exclamation-triangle:first-of-type, .website .fa-exclamation-circle:first-of-type {

    margin-right: 5px;

}



.website .fa-exclamation-triangle:last-of-type, .website .fa-exclamation-circle:last-of-type {

    margin-left: 5px;

}







/* ****************************************************************************************



										MEDIA QUERIES



**************************************************************************************** */		







 @media all and (min-width: 1200px) /* Pour les écrans extra-larges */

{

    #CV-page {

        font-size: 0.75vw;

    }



    .leftArea .info-icon {

        padding-bottom: 0.35vw;

        margin-bottom: 0.15vw;

    }



    .leftArea span {

        margin-bottom: 0.7vw;

    }



    .personnal-infos-group {

        padding-bottom: 0.5vw;

        padding-top: 0.75vw;

    }



    .small-line {

        margin: 0.5vw auto;

    }









    .book {

        padding-top: 0.75vw;

        padding-bottom: 1.5vw;

    }

    

    .book > .website-link-1 {

        margin-top: 1vw; 

    } 

    

    .book > .website-link-2 {

        margin-bottom: 1vw; 

    }

    

    .book .separator {

        box-sizing: border-box;

        width: calc(100% - 3vw);

        margin: 0.75vw 1.5vw 0.75vw 1.5vw;

        border-bottom: 3px #26607F double;

        position: relative;

        display: flex;

        justify-content: center;

        align-items: center;

        color: #444;

    }

    

    .book .separator > .separator-icon {

        width: 2.5vw;

        height: 1.5vw;

        text-align: center;

        background-color: white;

        position: absolute;

        right: calc(50% - 1.25vw);

        top: calc(0px - 0.75vw);

        display: flex;

        justify-content: center;

        align-items: center;

        font-size: 1.25vw;

    }









    .book > span:nth-child(2) {

        margin: 0.5vw auto 0vw auto;

    }

    

    .book ol {

        padding-left: 1.5vw;

    }



    .book li {

        margin: 0.25vw 0px;

    }

    

    .CV-main-title {

        margin: 1vw auto;

    }



    .CV-main-title span:first-child {

        font-size: 1vw;

    }



    .CV-main-title span:last-child {

        font-size: 1.25vw;

    }



    .skills > span {

        margin-bottom: 0.25vw;

    }



    .skills em {

        margin-top: 0.25vw;

    }



    .long-line {

        margin: 1.5vw auto 1.5vw auto;

    }



    .date > span {

        padding: 0px 0.25vw;

    }



    .description > span {

        padding: 0px 1.5vw 0px 0.5vw;

    }



    .location {

        text-indent: 1.5vw;

    }



    .jobs .location {

        text-indent: 3vw;

    }



    .description > span:last-child {

        margin-bottom: 0.5vw;

    }



    .spacer {

        margin-top: 3.5vw;

    }



    .jobs .description span:nth-child(2) {

        margin-left: 1.5vw;

    }



    .category-title {

        height: calc(100% - 1vw);

        margin: 0.5vw 1.5vw 0.5vw 0vw;

    }



    .category-title > h3 {

        font-size: 1.5vw;

        transform: rotate(180deg) translateX(0.25vw);

    }



    .category-icon {

        width: 1.5vw;

        height: 2.5vw;

        top: calc(50% - 1.25vw);

        right: calc(0px - 0.75vw);

        font-size: 1.25vw;

    }

    

    #book-section {

        margin-top: 0px;

        margin-left: 75px;

    }

} 





/**********************************************************************************/





@media all and (min-width: 2666px) /* Pour éviter d'élargir le CV à l'infini */

{

    .CV-page-sizer {

        padding-top: 1692px;

    }



    #CV-page {

        font-size: 20px;

    }



    .leftArea i {

        padding-bottom: 8px;

        margin-bottom: 4px;

    }



    .leftArea span {

        margin-bottom: 37px;

    }



    .website-group {

        padding-bottom: 7px;

    }



    .personnal-infos-group {

        padding-bottom: 13px;

        padding-top: 20px;

    }



    .book {

        padding: 13px;

    }



    .interest-group > span:first-child {

        margin-bottom: 7px;

    }



    .other-infos-group {

        padding-top: 20px;

    }



    .small-line {

        margin: 13px auto;

    }



    .book > span {

        padding-top: 13px;

    }



    .book li {

        margin: 7px 0px;

    }



    .CV-main-title {

        margin: 27px auto;

    }



    .CV-main-title span:first-child {

        font-size: 27px;

    }



    .CV-main-title span:last-child {

        font-size: 33px;

    }



    .skills > span {

        margin-bottom: 7px;

    }



    .skills em {

        font-size: 27px;

        margin-top: 7px;

    }



    .long-line {

        margin: 40px auto 40px auto;

    }



    .date > span {

        padding: 0px 7px;

    }



    .description > span {

        padding: 0px 40px 0px 13px;

    }



    .location {

        text-indent: 40px;

    }



    .jobs .location {

        text-indent: 80px;

    }



    .description > span:last-child {

        margin-bottom: 13px;

    }



    .spacer {

        margin-top: 93px;

    }



    .jobs .description span:nth-child(2) {

        margin-left: 40px;

    }



    .category-title {

        height: calc(100% - 27px);

        margin: 13px 40px 13px 0px;

    }



    .category-title > h3 {

        font-size: 40px;

        transform: rotate(180deg) translateX(7px);

    }



    .category-icon {

        width: 40px;

        height: 67px;

        top: calc(50% - 33px);

        right: calc(0px - 20px);

        font-size: 33px;

    }

}





/**********************************************************************************/





@media all and (max-width: 575px) /* Pour les smartphones */

{

    .button-container > a {

        width: 55vw;

        padding: 1.5vw;

        margin: 5vw auto 0px auto;

        font-size: 3.8vw;

    }

    

    .CV-page-sizer {

        padding-top: initial;

        height: auto;

    }

    

    #CV-page {

        border: none;

        position: initial;



        font-size: 3.8vw;

    }

    

    .leftArea, .rightArea {

        height: auto;

    }

    

    .info-icon, .category-icon > i {

        width: 100%;

        text-align: center;

        margin: 0px;

        padding: 0px;

    }

    

    .CV-main-title {

        width: 75%;

        margin: 2vw auto 5vw auto;

    }



    .CV-main-title span:first-child {

        text-align: center;

        font-size: 4.5vw;

    }



    .CV-main-title span:last-child {

        text-align: center;

        font-size: 6.5vw;

    }

    

    .tagscloud {

        width: 100%;

        margin: 1vw 0px;

    }



    .long-line {

        margin: 3vw auto 12vw auto;

    }

    

    #CV-main-infos {

        font-size: 1em;

    }



    .date {

        width: 35%;

        margin: 2vw auto 0.9vw auto;

        font-size: 1em;

        padding-bottom: 1vw;

        border-bottom: 1px #26607F solid;

    }



    .location {

        text-indent: 4vw;

    }



    .jobs .location {

        text-indent: 8vw;

    }



    .description > span:last-child {

        margin-bottom: 1vw;

    }



    .spacer {

        margin-top: 15vw;

    }



    .jobs .description span:nth-child(2) {

        margin-left: 4vw;

    }



    .category-title {

        height: initial;

        width: 100%;

        margin: 0vw 0vw 4vw 0vw;

        border-right: none;

        border-bottom: 3px #26607F double;

    }



    .category-title > h3 {

        margin-bottom: 4vw;

        font-size: 7vw;

        writing-mode: initial;

        text-orientation: initial;

        transform: none;

    }



    .category-icon {

        width: 10vw;

        height: 6vw;

        text-align: center;

        top: auto;

        right: auto;

        bottom: calc(0px - 3vw);

        left: calc(50% - 5vw);

        font-size: 5vw;

    }



    .leftArea {

        border-left: none;

    }



    .leftArea i {

        width: 20%;

        padding-bottom: 1.5vw;

        margin-bottom: 0.8vw;

    }



    .leftArea span:last-child {

        margin-bottom: initial;

    }



    .personnal-infos-group {

        padding-bottom: 2.5vw;

        padding-top: 2.5vw;

        width: 70%;

        margin: 0px auto 2vw auto;

    }



    .small-line {

        width: 50%;

        margin: 2.5vw auto;

    }

    

    

    /*************************************************/

    

    

    #book-section {

        margin-top: 0px;

    }



    #website-introduction {

        padding-top: 5vw;

        padding-bottom: 0px;

        font-size: 3.8vw;

        border: none;

    }



    .website {

        width: 90%;

        border-left: 1px rgb(245, 245, 245) solid;

        margin-top: 15vw;

        padding-top: 5.2vw

    }



    .website-number {

        width: 10vw;

        height: 10vw;

        border-bottom: 3px #444 solid;

        border-radius: 5vw;

        top: calc(-5vw - 3px);

        left: calc(50% - 5vw);

    }



    .website-number > span {

        transform: rotate(-45deg);

        font-size: 7vw;

        bottom: 0px;

        right: 0px;

    }



    .website h3 {

        width: calc(100% - 8vw);

        text-align: center;

        font-size: 5vw;

        margin-left: 4vw;

        margin-right: 4vw;

    }



    .website-instructions-area h4 {

        width: 55%;

        font-size: 3.2vw;

        margin: 2.4vw auto 2vw auto;

        padding-top: 2.4vw;

    }

    

    .website-instructions-area li {

        font-size: 3.8vw;

    }

    

    .website-tags {

        font-size: 3.8vw;

    }



    .website-thumbnail-area {

        margin-top: 4vw;

    }



    .website-thumbnail-area span {

        font-size: 2.2vw;

    }



    .website-thumbnail {

        border: 5px #EEE solid;

    }



    .website-tags > span:first-child {

        margin-left: 4vw;

    }



    .website-tags > span:last-child {

        margin-right: 4vw;

    }



    .website .fa-exclamation-triangle:first-of-type, .website .fa-exclamation-circle:first-of-type {

        margin-right: 1vw;

    }



    .website .fa-exclamation-triangle:last-of-type, .website .fa-exclamation-circle:last-of-type {

        margin-left: 1vw;

    }

}