@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/MaterialIcons-Regular.eot'); /* For IE6-8 */
    src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url('../fonts/MaterialIcons-Regular.woff2') format('woff2'),
        url('../fonts/MaterialIcons-Regular.woff') format('woff'),
        url('../fonts/MaterialIcons-Regular.ttf') format('truetype'); }

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

@font-face{
    font-family : "Stellar";
    src : url('../fonts/Stellar-Regular.otf') format('truetype');
    font-weight:normal;
    font-style:normal;
    font-variant:normal;
}

@font-face{
    font-family: "StellarBold";
    src: url('../fonts/Stellar-Bold.otf') format('truetype');
    font-weigth: bold;
}
/****** BODY =============================================*/
html,body{
    margin:0;
    padding:0; }
body{
    width: 100%;
    font-size: 1.2rem;
    font-family: "Stellar";
    color: #000066;
}
section{
    padding: 2rem 5%;
    width: 90%;
}
.homesection{
    margin: 2rem 0;
}
#presentation-home p{
    width: 70%;
    margin: 0 15%;
}
p{
    text-align: justify;
    line-height: 2;
}
ul{
    margin:0;
    padding:0;
}
img{
    border:none;
}

h1, h2, h3{
    text-transform: uppercase;
    font-family: "StellarBold";
    text-align:center;
    width: 100%;
}
h1{
    color: #000066;
    background-color: #ffffff;
    padding: 2rem 0;
    font-size: 2.75rem;
}
h2{
    color: #000066;
    background-color: #ffffff;
    padding: 2rem 0;
    font-size: 2.5rem;
}
h3{
    font-size: 2rem;
    color: #ffad5c;
}
a, a:link, a:visited{
    color: #7aaa26;
    text-decoration: none;}
a:hover, a:active, a:focus{
    text-decoration: underline;}


/****** HEADER ===========================================*/
header{
    background-color: #ffffff;
    color: #000000;
    box-sizing: border-box;
    width: 100%;
    padding: 1rem;
}

                            /**** HEADER ****/

header #logo{
    box-sizing: border-box;
    width: 100%;
    padding: 0 0 0 2em;
    margin:0;
    min-width:112px }
header #logo a{
    margin: 0 auto;
    width:300px;
    max-width: 100%;
    display:block;    }
header #logo a img{

    width:300px;
    max-width: 100%;
    border: 3px solid #ffffff;
}
header #logo a:hover img{
    border: 3px dotted #000066;
}
#burger_btn {
    margin: 0;
    color: #000066;
    font-size: 2em;
    line-height: 0.8;
    width: 32px;
    text-align: center;
    float:right;}

#burger_btn::before {
    font-feature-settings: 'liga';
	font-family:'Material Icons';
	content: 'menu'; }

#menu{
    position: absolute;
    z-index:10;
    top: 3rem;
    right: 0;
    display:none;
    width: 15rem;
    background-color: #000066;
    color: #ffffff;

    }
#menu ul{
    padding:0;
    list-style-type: none;
}
#menu ul li{
    width:100%;
}
#menu a{
    display:block;
    color: #ffffff;
    font-size: 1.3rem;
    width: 80%;
    text-align: left;
    text-transform: uppercase;
    padding: 1em 15% 0.5em 5%;}

#lang{
    float:right;
    clear:left;
}

#lang ul{
    list-style-type: none;
    margin: 0;
    padding: 0 0 0 1.5rem;
}
#lang ul li{
    display: inline-block;
    padding: 0.2rem 0 0 0.25rem;
}

.itemfr::before{
    background-image: url('../images/fr.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    content:' ';
    display: block;
    width: 32px;
    height: 32px;

}
.itemen::before{
    background-image: url('../images/en.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    content:' ';
    display: block;
    width: 32px;
    height: 32px;
}
/******* MAIN ==============================*/
main{
    position:relative;
    width:100%;
    padding: 0;
    min-height: 66.4vh;}

/**** FOOTER ****/
footer{
    width:100%;
    box-sizing: border-box;
    padding: 1em 5%;
    background-color: #000066;
    color: #ffffff;
}
footer a, footer a:link, footer a:visited{
    color: #ffffff;
}
footer a:hoover, footer a:active, footer a:focus{
   text-decoration:underline;
}
footer p{
    width:100%;
    text-align: center;
    font-size: 1rem;
}
/* CONTACT ========================== */
#contact{
    display:flex;
    flex-wrap: wrap;
}

.contact{
    width: calc(40% - 0.5rem);
    min-width: 293px;
}
#contact-left{
    margin: 1% 0.5rem 2rem 10%;
}
#contact-right{
    margin: 1% 10% 2rem 0.5rem;
}
.contact form{
    width: 100%;
    margin: 0;
    padding: 0;
}
.shadow{
    box-sizing: border-box;


    padding: 1rem 2rem;
}
input, textarea{
    box-sizing: border-box;
    border: 1px solid #ffad5c;
    width: 100%;
    background-color: transparent;
    padding: 0.7rem 0.5rem;
    margin: 0.5rem 0;
    color: #000066;
}
input:focus, textarea:focus, input:active, textarea:active{
    outline: none !important;
    border:1px dotted #000066;
}
textarea{
    height: 24rem;
}
button{
    outline: none !important;
    background-color: #7aaa26;
    border: 1px solid #7aaa26;
    color: #ffffff;
    padding: 0.5em;
    margin: 0.5em 0;
    min-width: 7rem;
}
button:focus, button:hover, button:active{
    border: 1px dotted #000066;
}
.text-right{
    width:100%;
    text-align:right;
}

.card{
    padding: 1rem 2rem;
    margin: 0 0 1rem 0;
    border-right: 6px solid #ffad5c;
    border-left: 6px solid #000066;
    height: 10rem;
}
.card:last-of-type{
    margin: 0;
}
.card h4, .card h3{
    text-align:left;
    color: #000066;
}
.card h3{
    font-size:1.1rem;
}
.card h4{
    font-size:1rem;
    font-weight: normal;
    margin: 0.3rem 0;
}
.card ul{
    list-style: none;
}

.screenReader {
    left: -9999px;
    position: absolute;
    top: -9999px;}
.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.alert {
    font-size: 1rem;
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}

/* SOCIAL */
.soc{
    display:inline-block;
    width: 48px;
    height: 48px;
    font-size : 1.4em; /* 40 / 16 */
    font-weight: bold;
    margin: 0;}
.soc a{
    display:block;
    width: 48px;
    height: 48px;
    line-height:48px;
    color: #ffffff;
    text-align:center;
    background-color: #000066;
    border-radius: 10px;}
.soc a:hover, .soc a:active, .soc a:focus   {
    text-decoration: none;
    color: #ffffff;
    background-color: #7aaa26;}
.facebook a::before{
    vertical-align: middle;
    font-family:'si'!important;
    content:'\e028';}
.linkedin a::before{
    vertical-align: middle;
    font-family:'si'!important;
    content:'\e04c';}
.google a::before{
    vertical-align: middle;
    font-family:'si'!important;
    content:'\e038';}
.twitter a::before{
    vertical-align: middle;
    font-family:'si'!important;
    content:'\e08d';}


/*  SCROLL BUTTON  ========================================================================== */

.scroll_top{
    width: 32px;
    height:32px;
    font-size:16px;
    line-height:2;
    background-color: #000066;
    color:#FFFFFF;
    position: fixed;
    bottom:0;
    right:0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    text-align: center;
    z-index: 25;
    margin:0;
    padding:0;
    border: 1px solid #ffffff;}


/* add fade in for blog and detailspost */
#scrolltop{
    display:block;
    height:100%;
    width:100%;}

a#scrolltop, a#scrolltop:link, a#scrolltop:visited{
    color:#FFFFFF;}
a#scrolltop:hover, a#scrolltop:active, a#scrolltop:focus{
    text-decoration:none;
    background-color: #7aaa26; }

#scrolltop::before{
    font-feature-settings: 'liga';
    font-family:'Material Icons';
    content:"keyboard_arrow_up"; }

.show_scroll{
    visibility:visible;
    opacity:1;}
/* SECTIONS ==============================================*/
#cases{
    display:flex;
    flex-wrap: wrap;
    list-style: none;
}
#cases li{
    width: 50%;
    min-width: 300px;
    margin: 0 auto;
    padding: 1rem;
    box-sizing: border-box;
}
ul#customers{
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
}
#customers li{
    min-width:250px;
    width:25%;
}
#customers li img{
    width:100%;
}

#values-home h3{
    text-align:center;
    margin: 2rem 0;
}

#legal{
    padding: 2rem 10%;
    width: 80%;
    min-height: 73.4vh;
    line-height:2;
}
#legal a{
    color: #474747;
}
#presentation-home{
    background-image: url('../images/globe-bl.png');
    background-repeat: no-repeat;
    background-position: center  -360px;
    background-size: contain;
}
#presentation-home p{
    margin-top: 2rem;
}
#international-home{
    background-image: url('../images/globe-g.png');
    background-repeat: no-repeat;
    background-position: center  -550px;
    background-size: contain;
}
#international-home h2, #presentation-home h1{
    margin-bottom: 11rem;
}
#international-home img{
    margin: 0 auto;
    display:block;
    max-width: 100%;
}
#marc-home{
    box-sizing: border-box;
    width: 100%;
    padding: 0;
}

#marc-home img, #marc-home video{
    width: 100%;
    display: block;
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
}
#marc-home p{
    width: 100%;
    max-width: 800px;
    box-sizing: border-box;
    padding: 1rem 2%;
    margin: 0 auto;
}
#testimonial-home{
    display:flex;
    flex-wrap: wrap;
}

#testimonial-home img{
    width: 25%;
    min-width: 334px;
    height: 25%;
    min-height: 500px;
    margin:0 auto;
}
#testimonial-home p{
    margin: 0;
}
.testimonials{
    list-style: none;
    padding: 0 1rem;

    box-sizing: border-box;
    margin: 0 auto;
}
#testimonial-home .testimonials{
    width: 70%;
}
.testimonials li{
    padding: 0;
    margin:0 ;
}
.testimonials blockquote{
    font-size: 1.2rem;
    font-style: italic;
    margin: 0;
}
.testimonials cite{
    width: 100%;
    text-align: right;
    display:block;
    margin-bottom: 2rem;
}
#count{
    width:100%;
    list-style: none;
    width: 100%;
    text-align:center;
    font-size: 2rem;
}
#count li{
    margin-top: 2em;
}
#count p{
    width:100%;
    text-align:center;
    font-size: 2rem;
}
.more {width: 100%; text-align:center;}
.more a{
    display:block;
    color: #ffad5c;
    font-size: 4rem;
    width: 64px;
    height: 64px;
    margin: 1rem auto;
    text-decoration: none;

}
.more a:hover{
    color: #7aaa26;


}
.more a::before{
    font-feature-settings: 'liga';
    font-family: 'Material Icons';
    content: "add_circle";
}
/* PAGES */
#international, #quote, #testimonial,  #marc{
    background-image: url('../images/globe-g.png'), url('../images/international.jpg');
    background-position: center -33vw, center bottom;
    background-repeat: no-repeat;
    background-size: 50%, contain;
    padding-bottom:60vw;
video {
	width: 100%    !important;
	height: auto   !important;
}
}
#offshoring, #values, #partners{
    background-image: url('../images/globe-bl.png'), url('../images/relocation.jpg');
    background-position: center -33vw, center bottom;
    background-repeat: no-repeat;
    background-size: 50%, contain;
    padding-bottom:60vw;
}

.page h2{
    margin-bottom: 9vw;
}
#marc{
    display: flex;
    flex-wrap: wrap;
}
#marc img{
    width: 25%;
    height: 25%;
    min-width: 250px;
    margin: 0 auto 2rem auto;
}
#marc p{
    box-sizing: border-box;
    padding-left: 2rem;
    width: 75%;
    min-width: 250px;
    margin: 0 auto;
}
#testimonial img{
    max-width: 100%;
    display:block;
}
#testimonial img.testileft{
    margin: 0 1rem 0 0;
    float: left;
}
#testimonial img.testiright{
    margin: 0 0 0 1rem;
    float: right;
}
#testimonial .testimonials{
    list-style: none;
    box-sizing: border-box;
    margin: 0 auto;
}
/* pictos ==============================================*/
ul.pictos{
    width: 100%;
    text-align: center;
    list-style: none;
}
ul.pictos li{
    display: inline-block;
    margin:1rem;
}
li.picto::before{
    content: " ";
    display: block;
    background-position: center;
    background-repeat:  no-repeat;
    min-width: 64px;
    height: 64px;
    margin-bottom: 1rem;
}
.picto-displacement::before{
    background-image: url('../images/picto-fly.png');
}
.picto-family::before{
    background-image: url('../images/picto-family.png');
}
.picto-move::before{
    background-image: url('../images/picto-car.png');
}
.picto-housing::before{
    background-image: url('../images/picto-house.png');
}
.picto-administrative::before{
    background-image: url('../images/picto-notes.png');
}
@media screen and (max-width: 1400px) {
    #international,
    #quote,
    #testimonial,
    #marc{
        background-position: center -45vw, center bottom;
        background-size: 70%, contain;
    }
    #offshoring, #values, #partners{
        background-position: center -47vw, center bottom;
        background-size: 70%, contain;
    }

}
@media screen and (max-width: 900px) {
    footer h3,
    footer h4{
        width:100%;
        text-align:center;
    }
    #international,
    #quote,
    #testimonial,
    #marc{
        background-position: center -35vw, center bottom;
    }
    #offshoring, #values, #partners{
        background-position: center -36vw, center bottom;
    }
    #international-home,
    #presentation-home{
        background-position: center  -500px;
        background-size: 900px;
    }
    #testimonial img, #testimonial img.testileft, #testimonial img.testiright{
        position: static;
        width: 70%;
        margin: 1rem auto;
        float: none;
    }

    #cases li{
        width: 100%;
    }
    .contact{
        width: calc(90% - 0.5rem);
        min-width: 293px;
    }
    #contact-left,
    #contact-right{
        margin: 1% 10%;
    }
    textarea {
        height: 10rem;
    }
    #testimonials {
        padding: 0;
        width: 100%!important;
    }
}
@media screen and (max-width: 768px) {

    #international, #quote, #testimonial,  #marc{
        background-position: center -55vw, center bottom;
        background-size: 80%, contain;
    }
    #offshoring, #values, #partners{
        background-position: center -57vw, center bottom;
        background-size: 80%, contain;
    }
    #marc p,
    #marc-home p,
    #presentation-home p,
    #testimonial-home p,
    #count p,
    p {
        width: 90%;
        margin: 0 5%;
        padding: 0;
    }
    footer p {
        width: 100%;
        padding: 0;
        margin: 0;
    }
    #customers li {
        min-width: 180px;
        width: 33%;
    }
    h1{
        font-size: 2.25rem;
    }
    h2, h3{
        margin: 0 auto;
        font-size: 1.5rem;
        padding: 0.5rem 0;
    }
    #international-home {
        background-position: center -700px;
    }
    #presentation-home {
        background-position: center -550px;
    }
    #international-home h2, #presentation-home h1 {
        margin-bottom: 5.5rem;
    }
}
@media screen and (max-width: 500px) {
    #international, #quote, #testimonial,  #marc{
        background-position: center -40vw, center bottom;
        background-size: 120%, contain;
    }
    #offshoring, #values, #partners{
        background-position: center -30vw, center bottom;
        background-size: 120%, contain;
    }
    .page h2{
        margin-bottom: 10vw;
    }

}

@media screen and (max-width: 380px) {
    header{
        padding: 0.1rem;
        height: auto;
    }
   header #logo{
        padding: 0 0.1rem;
    }
    header #logo a,
    header #logo a img {
        width: 200px;
    }

    #lang,
    #lang ul{
        margin: 0;
    }
    #burger_btn {
        float: left;
        padding: 0.5rem 0.3rem 0 1rem;
    }
    #lang ul li{
        padding: 0.5rem 0.3rem 0 0.3rem;
    }

    #menu a{
        width: 100%;
        text-align:center;
        margin:0;}
    #presentation-home {
        background-position: center -480px;
        background-size: 900px;
    }
    #international-home {
        background-position: center -660px;
    }

    #customers li {
        min-width: 180px;
        width: 50%;
    }

    body {
        font-size: 1rem;
    }
    .homesection{
        margin: 0 auto;
    }
    .page h2 {
        margin-bottom: 20vw;
    }
    #international, #quote, #testimonial,  #marc{
        background-position: center -68vw, center bottom;
    }
    #offshoring, #values, #partners {
        background-position: center -75vw, center bottom;
    }
}
.video-conteneur {
position:absolute;
padding-bottom:56.25%;
height:0;
overflow:hidden;
}
.video-conteneur iframe,
.video-conteneur object,
.video-conteneur embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}