/* Preloader */

body {
    overflow: hidden;
}

/* Preloader */

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff; 
    z-index:99;
}

#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; 
    top:50%; 
    background-image:url(../img/status.gif); 
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px;
}


html {
    font-size: 1em;
    line-height: 1.4;
}


::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}


audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}


fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}


textarea {
    resize: vertical;
}

/*-----------------------------------*/
/*            color palette          */
/*-----------------------------------*/

/*

dark blue: #222d4b rgba(34, 45, 75, 1)
mid blue: #3b4f82
light blue: #4d7abd

dark ochre: #988363
light ochre: #ccb085

dark gray: #3d3d3d 
mid gray: #7f7f7f
light gray: #eff1f2

*/

/*-----------------------------------*/
/*            custom styles          */
/*-----------------------------------*/

@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot?cefk32');
	src:url('../fonts/icomoon.eot?cefk32#iefix') format('embedded-opentype'),
		url('../fonts/icomoon.ttf?cefk32') format('truetype'),
		url('../fonts/icomoon.woff?cefk32') format('woff'),
		url('../fonts/icomoon.svg?cefk32#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-envelope-o:before {
	content: "\f003";
}
.icon-user:before {
	content: "\f007";
}
.icon-close:before {
	content: "\f00d";
}
.icon-remove:before {
	content: "\f00d";
}
.icon-times:before {
	content: "\f00d";
}
.icon-phone:before {
	content: "\f095";
}
.icon-linkedin:before {
	content: "\f0e1";
}
.icon-angle-right:before {
	content: "\f105";
}





* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}



html {
    font-size: 100%;
}


body {
    position:relative;
    background-color: #eff1f2;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: normal;
    color: #222d4b; 
    margin: ;
    padding: 0;
}

section { 
    padding: 100px 0 50px 0; 
}

.row { 
    max-width: 1200px; 
    padding: 0 10%; 
    margin: 0 auto;
}

.col-md-12{ 
    width: 100%;  
    margin: 30px 0;
    padding: 0;
}


.col-md-6 { 
    padding: 0 30px 0 0;
    margin: 30px 0;
}

.col-md-4 { 
    padding: 0 20px;
    margin: 0;
}



.title-container {
    height: 50px;
    border-bottom: 1px solid #988363;
    margin: 0 0 20px 0;
    padding: 0 0 0 0;
    text-align: left;
}





h1, h2, h3 {
    font-family: "Libre Baskerville", serif;
}

h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
}

a {
    color: #4e7ac7;
}

a:hover, a:visited, a:link, a:active {
    text-decoration: none;
}

ul { 
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1.5em;
}

p { 
    margin: 0;
    padding: 0;
    line-height: 1.5em;
}


.dark-blue { 
    color: #222d4b;
}

.light-blue { color: #4d7abd;}

.white { 
    color: #FFF;
}

.light-ochre {color: #ccb085; }


h2 { 
    color: #988363;
    line-height: 1em;
    margin: 10px 0px 10px 0;

}

h3 { 
    color: #3b4f82;
    margin: 0px;
}

h4 { 
    font-size; ;
    font-weight: 300;
}





@media (min-width: 768px) {

    body {
        font-size: 16px;
        font-size: 1rem;
    }

    h1 {
        font-size: 60px;
        font-size: 3.75rem;
    }

    h2 {
        font-size: 28px;
        font-size: ;
    }

    h3 {
        font-size: 20px;
        font-size: ;
    }
    
    h4 {
        font-size: 20px;
        font-size: ;
    }

}

@media (min-width: 992px) {

}

@media (min-width: 1200px) {

}

/*-----------*/
/*  ACCUEIL  */
/*-----------*/


h1 { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    font-size: 12px;
    color: #988363;
    padding: 0; 
    margin: 0;
}

#accueil { 
    background: url("../img/bkg-02.jpg") no-repeat center center;
    background-size: cover; 
    width: 100%;
    height: 700px;
    position: relative;
    padding: 0;
}


#accueil .row {
    width: 100%;
    max-width: 100%; 
    height: 700px;
    position: relative;
    background-color: rgba(34, 45, 75, 0.7);
    padding: 0;
}

#accueil .row-border {
    max-width: 100%;
    height: 660px;
    position: relative;
    display: block;
    border: 3px solid #eff1f2;
    padding: 0;
    margin: 20px;        
}

#accueil .logo-box { 
    background-color:;
    position: relative;
    top: 10%;
    left: 0;
    text-align: center; 
    margin: 0;
    padding: 0;
    opacity: 0; 
}

#accueil svg { 
    max-width: 120px; 
    height:130px;
    margin: 0;
    padding: 0;
}

#accueil svg .st0{ fill:#eff1f2;}

#accueil .name h2 { 
    color: #eff1f2;
    font-size: 23px;
    font-weight: lighter; 
    letter-spacing: 0.05em;
    margin: 50px 0 10px 0;
    padding: 0;
    text-align: center;
    opacity: 0;
}

#accueil .subtitle { font-family: "Libre Baskerville", serif; font-size: 1.1em; color:#ccb085; }

#accueil .fade-subtitle {font-family: "Libre Baskerville", serif; font-size: 1.1em; color:#ccb085; display: none; margin: 0; padding: 0;}

#accueil .description {
    position: absolute;
    left: 0%;
    bottom: 35%;
    width: 100%;
    text-align: center;
    display: none;
}

#accueil .description p { 
    font-family: "Libre Baskerville", serif;
    font-size: 18px; 
    color: #eff1f2; 
    font-weight: lighter;
    letter-spacing: 0.05em;
    padding:0px 20px;
}

#accueil .desc-it { 
    font-style: italic; 
    color: #ccb085;
}

#accueil .glyphicon { 
    font-size: 22px; 
    color: #eff1f2;  
    padding: 30px 0 0; 
    opacity: 0;
}

#accueil .first-link {
    position: absolute;
    bottom: 120px;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#accueil .arrow { 
    stroke: #FFF; 
    fill: #FFF; 
    opacity: 0;
    max-width: 50px;
    height: auto;
}



@media (min-width: 768px) {


    #accueil .logo-box { 
        top: 10%;
    }
    
    #accueil .description {
        bottom: 20%;
    }
    
    #accueil .first-link {
        bottom: 20px;
    }
    
    #accueil .arrow {
        max-width: 80px;
        height: auto;
    }

}

@media (min-width: 992px) {
    
    #accueil svg { 
        max-width: 160px; 
        height: auto; 
    }    

    #accueil .name h2 {
        font-size: 28px;
        font-size: ;
    }     
    
    #accueil .description p{
        font-size: 23px;
        font-size: ;
    }

   
}

@media (min-width: 1200px) {

}



/*----------*/
/*  ENJEUX  */
/*----------*/

#enjeux { 
    background-color: #222d4b;

}

#enjeux p { color: #eff1f2; }

#enjeux .col-md-4 { text-align: center; margin: 30px 0}

#enjeux .centered { font-size: 18px; text-align: ; color: #969696; }

#enjeux .title-container { }

#enjeux h2 { opacity: 0; color: #ccb085}

#enjeux h3 {
    font-family: Libre Baskerville;
    font-size: 18px;
    font-weight: 700;
    color: #4d7abd;
    line-height: 1.6em;
    opacity: 0;
}

#enjeux .light-blue { color: #4d7abd;}

@media (min-width: 992px) {

    #enjeux .col-md-4 { text-align: center; margin: 20px 0,}
    
}



/*---------*/
/*  OFFRE  */
/*---------*/

#offre { 
    background-color: #eff1f2;
    color:; 
}

#offre h2 { color: #988363; font-weight: 300; opacity: 0;}


#offre .subt {
    font-family: 'Libre Baskerville', serif;
    font-size: 20px;
    font-weight: 700;
    color: 3d3d3d;
    line-height: 1.6em;
    opacity: 0; 
    margin-bottom: 30px;
}

#offre .blue { color: #4d7abd; }

/*PRESTATIONS*/

#offre .prestations { background-color:; padding-bottom: 30px}

#offre h3 {
    opacity: 0;
    color: #988363;
    line-height: ;
    padding:20px 0
}


.reg { position: relative;
    font-size: 80%;
    line-height: 0;
    vertical-align: baseline;
    top: -0.3em;
    padding-left:2px; 
}

#offre .act { 
    color: #7f7f7f; 
    text-transform: uppercase;
}

#offre .bond { 
    color: #988363; 
    text-transform: uppercase; 
    text-align:;
}

/* #offre .col-md-12 .trio  { margin-bottom: 20px; padding-left: 0px; line-height: 1.7em; text-align: center;} */

#offre .triangle-container { 
    max-width: 93%;
    margin: 0 auto;
}

#offre .col-md-2 { display: none; }

#offre .col-md-5 .trio {
    color: 3d3d3d ;
    margin:0;
    padding:10% 5%;
    border: 1px solid #7f7f7f; 
    border-radius: 20px;
    text-align: center;
}

#offre .act-bond { font-size: 20px; font-weight: 600; letter-spacing: 0.025em;}

#offre .left-col { 
     height: auto;
     vertical-align: inherit;
}

#offre .right-col .trio { 
    margin: 0; 
    position: inherit;
    }

#offre .right-col { 
     height: auto;
     position: inherit;
}

#offre .right-col .trio {
    width: 100%;
    margin: 20px 0px; 
    position: inherit;
}

#offre .right-col .top {top: 0px;}

#offre .right-col .bottom { bottom: 0px;}

/*NIVEAUX*/

#offre .niveaux {}

#offre .col-md-8 p  { position: relative; margin-bottom: 30px; padding-left: 60px; line-height: 1.7em;}

.grey { color: #7f7f7f;}

.uno {font-weight: 700; color: black;}

.dos {font-style: italic; color: black;}

.tres {font-weight: 700; color: black; font-style: italic; letter-spacing: 0.025em}

.blu { color:#4d7abd;}

#offre .col-md-4 ul li { padding: 10px 0; line-height: 1.7em;}


@media (min-width: 992px) {
    
    #offre .col-md-2{ 
        display: block;
        height: 500px;
        position: relative;
    }

    #offre #arrows { 
        max-width: 100px; 
        height: auto;
        position: absolute;
        top:50%;
        left: 50%;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }

    #offre .st0 {
        fill:none;
        stroke:#988363;
        stroke-width:6;
        stroke-linecap:round;
        stroke-linejoin:round;
        stroke-miterlimit:10;
    }    
    
    
    #offre .left-col{ 
         height: 500px;
         display: table-cell;
         vertical-align: middle;
    }    
    
    #offre .right-col { 
         height: 500px;
         position: relative;
    }

    #offre .right-col .trio { 
        margin: 0; 
        position: absolute;
    }

    #offre .right-col .top { top: 3%;}

    #offre .right-col .bottom { bottom: 3%;}    
}

/*------------*/
/*  APPROCHE  */
/*------------*/

#approche { background-color: rgba(34, 45, 75, 0.9); color: #fff;}

#approche h2 { color: #ccb085; font-weight: 300; opacity: 0;}

#approche h3.etapes, #offre h3.etapes { 
    display: inline;
    font-size: 12px;
    color: #222d4b;
    margin: 0; 
    padding: 0;
}



#approche h3.actions {color: #4d7abd; line-height: 1.6em; opacity: 0; }

#approche h3.alliance { font-size: 22px; color: #ccb085; font-weight: 300; line-height: 1.6em; margin: 60px 0 0; opacity:0 ;}



#approche h4 { color: #7f7f7f; text-align: center;}

#approche h2.min, #offre h2.min { font-size: 22px; margin-bottom: 30px; opacity: 0;}

#approche .col-md-6 {  padding:; margin: 0;}

#approche .col-md-6 p { line-height: 1.7em; padding: 0 20px; text-align: center;}




#approche .letter, #offre .letter { 
    position: absolute;
    top; 72px;
    left: 0px;
    font-family: "Libre Baskerville", serif;  
    font-size: 45px;
    line-height: 1.1em;
    color:#7f7f7f;
    opacity: 0;
}

#approche .col-md-12 p{ position: relative; margin-bottom: 30px; padding-left: 60px; line-height: 1.7em;}

/*----------*/
/*  PROFIL  */
/*----------*/

#profil { padding-bottom: 20px;}

#profil h2 { opacity: 0;}

#profil .compagnon { font-family: 'Libre Baskerville', serif; font-size: 16px; color:#3b4f82 ; font-weight: 600; opacity: 0;}

#profil h3 {  
    font-family: 'Roboto', sans-serif;  
    font-size: 18px; 
    font-weight: 400;
    color: #7f7f7f;
    margin-bottom: 20px;
    opacity: 0;
}

#profil ul { margin-bottom: 30px;}

#profil ul.sub-list { margin-bottom: 0px; margin: 10px 0 0;}

#profil ul.sub-list li { }

#profil ul li { margin-left: 0px; padding-bottom: 10px; }

#profil img { display: block; max-width: 250px; height: auto; float: none; margin: 20px auto 40px auto; }

#profil .col-md-12 {  display: block; }

#profil .read-more { background-color:; margin: 0; text-align: right;}

#profil .read-more li { display: inline; margin: 0; padding: 10px 15px;}

#profil .read-more li a { outline: none;}


.modal-header { 
    border: none;
    text-align: right;
}

.modal-content {padding: 30px;}

.linkedin-link { text-align: right; margin-top: 30px;}

.linkedin-link i {font-size: 23px;}

.close i { font-size: 23px;}

.nowrap {white-space: nowrap;}

@media (min-width: 768px) {
    
    #profil { padding-bottom: 100px;}

    #profil img { max-width: 320px; height: auto; float: left; margin: 0 40px 30px 0; }
    
    #profil .compagnon { font-size: 20px; }
    
}


@media (min-width: 992px) {

    #profil img { max-width: 400px; height: auto; float: left; margin: 0 40px 30px 0; }
    
}

#profil .ying img { max-width: 20px; height: auto; margin: 0; padding: 0; float: none; display: inline;}

/*-----------*/
/*  MESSAGE  */
/*-----------*/

#message h4 { 
    display: inline; 
    font-size: 12px;
    color: #222d4b;
    margin: 0; 
    padding: 0;
}

#message { padding: 0;}

#message .both-container { 
    
    position: relative; 
    width: 100%; 
    display: block; 
    margin: 0; 
    padding: 0; 
    background-color: #222d4b ;
}

#message .test { display: inline-block; float: none; max-width: 100%;}

#message .left { position: relative;}

#message .attribution { 
    position: absolute; 
    left: 20px; 
    bottom: 30px; 
}

#message .left p { 

    color: #fff; 
    font-size: 12px; 
    line-height:; 
}

#message .left img {width: 100%; height: auto; }

#message .right { padding: 60px 0;}

#message .right .right-container { display: block; width: 80%; padding: 0; margin: 0 auto;}

#message .right .right-container img{ display: inline; max-width: 25px; height: auto;}

#message .right .right-container p { color: #FFF; margin-bottom: 20px; font-size: 14px; font-weight: 300; line-height: 1.7em; }


@media (min-width: 768px) {

    #message .right { padding: 10% 0;}
    
    #message .right .right-container { width: 60%; }    

    
}

@media (min-width: 992px) {
    
    #message .test { float: left; max-width: 50%;}
}

@media (min-width: 1200px) {

}


/*-----------*/
/*  CONTACT  */
/*-----------*/

#contact { background-color: #988363; text-align: center; padding: 0 0 100px 0; }

#contact .row { max-width: 70%;}

#contact .col-md-6 { padding: 0; opacity: 0;}

#contact .left{ text-align: center; display: inline-block; }

#contact .left ul { display: inline-block; text-align: left; width: 250px}

#contact .right{  text-align: center; display: inline-block;}

#contact .right ul { display: inline-block; text-align: left; width: 250px;}

#contact ul li { color: #3d3d3d; text-align: ;}

#contact .light-ochre { font-size: 20px; color: #ccb085; margin-bottom: 10px;} 

@media (min-width: 992px) {
    
    #contact {}
    #contact .left{ text-align: left; display: inline-block; }
    
    #contact .right{  text-align: right; display: inline-block;}
}

#contact .right ul i, #contact .left ul i { font-size: 18px; margin-right: 8px; }
#contact .right ul li a, #contact .left ul li a { color: #3b4f82;}

#contact .credits {
    background-color: ; 
    margin-top: 0px; 
    padding:5px 0 0;  
    border-top: 1px solid #3d3d3d;
}

#contact .credits .col-md-6 { opacity: 1;}

#contact .credits .left, #contact .credits .right {
    font-size: 13px;
    color: #3d3d3d;
    margin: 0;
    padding-top: 5px;
}

#contact .credits .left { width: 100%; text-align: center;}

#contact .credits .right { width: 100%; text-align: center;}

#contact .credits a { color: #3b4f82;}


#contact .sasu { font-size: 0.9em; color: #3d3d3d;  max-width: 70%; margin: 50px auto 0 auto;}

@media (min-width: 992px) {
    
    #contact .sasu { font-size: 0.9em; color: #3d3d3d; max-width: 70%; margin: 50px auto 0 auto; padding-bottom: 5px;} 
    
    #contact .credits .left { width: 50%; text-align: left;}

    #contact .credits .right { width: 50%; text-align: right;}    
    
}


.hidden {
    display: none !important;
}



.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}



.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}



.invisible {
    visibility: hidden;
}


.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

@media only screen and (min-width: 35em) {

}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {

}


@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; 
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }



    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }


    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}






/*---------------*/
/*     BREAK     */
/*---------------*/

.break { 
    position: relative; 
    height: 250px; 
    padding: 0;
}

.break .mid{ height: 50%;}

.break .top { background-color: #222d4b ; margin: 0;}

.break .bottom { background-color: #eff1f2; margin: 0;}

.break .quote   { margin: 0}

.break .quote p {
    font-size: 13px;
    max-width: 300px; 
    height: 280px; 
    display: block;
    margin: 0 auto; 
    background-color: #FFF;
    padding: 40px 30px;
}


/* .second-break .top { background-color: #222d4b; opacity: 0.9;}

.second-break .bottom { background-color: #eff1f2;} */



.break h4 { 
    position: absolute; 
    font-size: 12px; 
    bottom: -20px; 
    left: 0px; 
    margin: 0; 
    padding: 0;
}

.break h4.neologisme { color: transparent; opacity: 0;}

.break h4.deontologie{ color: transparent; opacity: 0;}





@media (min-width: 768px) {

.break .quote p {
    font-size: 14px;
    max-width: 300px; 
    height: 250px; 

}    
    
}

.second-break .quote p { max-width: 320px;}

.second-break .top { background-color: #eff1f2; }

.second-break .bottom {background-color: #222d4b;  background-color: rgba(34, 45, 75, 0.9); }


.third-break .quote p { max-width: 320px;}

.third-break .top { background-color: #222d4b; background-color: rgba(34, 45, 75, 0.9);}

.third-break .bottom {  background-color: #eff1f2;}