/****************************************** PAGES ************************************/

/**** RS Slider *****/

div.royalSlider .rsSlide * { opacity: 0.25; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); }

div.royalSlider .rsActiveSlide * { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }



/*************** FLIP BOX *************/

.flip-box { background-color: transparent; width: 300px; height: 200px; border: 1px solid #f1f1f1; perspective: 1000px }
.flip-box-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d }
.flip-box:hover .flip-box-inner { transform: rotateY(180deg) }
.flip-box-front, .flip-box-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden }
.flip-box-front { }
.flip-box-back { transform: rotateY(180deg) }

/*********** H1 ANIMATION **********/

.fadez { animation: fade-in 1s linear 2s 1 normal; -moz-animation: fade-in 1s linear 2s 1 normal; -webkit-animation: fade-in 1s linear 2s 1 normal; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; opacity: 0; transform: scale(0) }

@-webkit-keyframes fade-in {
    0% { opacity: 0; transform: scale(0); }
    85% { opacity: 0.5; transform: scale(0.5); }
    100% { transform: scale(1); opacity: 1 }
}


#section01 > h1 > span:nth-of-type(2) { display: inline-block; overflow: hidden; white-space: nowrap; }


#section01 > h1 > span:nth-of-type(2) { width: 0px; animation: reveal 8s normal; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; }

/*#section01 > h1 > span:nth-of-type(2) > span {
  margin-left:-1805px;
  animation: slidein 15s normal;
     animation-fill-mode: forwards;
     -webkit-animation-fill-mode: forwards;
}*/


@keyframes slidein {
    0% { margin-left: -18000px; }
    20% { margin-left: -8000px; }
    35% { margin-left: 0px; }
    100% { margin-left: 0px; }
}

@keyframes reveal {
    0% { opacity: 0; width: 0px; }
    30% { opacity: 0; width: 0% }
    60% { opacity: 0; width: 0% }
    100% { opacity: 1; width: 100%; }
}


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


    @keyframes slidein {
        0% { margin-left: 0px; }
        20% { margin-left: 0px; }
        35% { margin-left: 0px; }
        100% { margin-left: 0px; }
    }

    @keyframes reveal {
        0% { opacity: 0; width: 100%; }
        30% { opacity: 0; width: 100% }
        60% { opacity: 0; width: 100% }
        100% { opacity: 1; width: 100%; }
    }
}


/*********** ARROWS ANIMATION **********/


.arrowAnim { width: 100%; height: 120px; }

.arrow { width: 23px; height: 20px; background: url(../images/ui/Arrow_down.png) center center no-repeat; margin-bottom: 20px }


.arrowSliding { position: absolute; -webkit-animation: slide 3s linear infinite; animation: slide 3s linear infinite; }

.delay1 { -webkit-animation-delay: 1s; animation-delay: 1s; }
.delay2 { -webkit-animation-delay: 2s; animation-delay: 2s; }

@-webkit-keyframes slide {
    0% { opacity: 0; transform: translateY(0); }
    20% { opacity: 0.5; transform: translateY(40px); }
    80% { opacity: 1; transform: translateY(80px); }
    100% { opacity: 0; transform: translateY(120px); }
}

@keyframes slide {
    0% { opacity: 0; transform: translateY(0); }
    20% { opacity: 0.5; transform: translateY(40px); }
    80% { opacity: 1; transform: translateY(80px); }
    100% { opacity: 0; transform: translateY(120px); }
}



/***************** ACCUEIL ****************/


#section01 { background: url(../images/photos/bg_accueil.jpg) no-repeat center center; background-size: cover; position: relative; min-height: 700px }
#section01 > h1 { position: absolute; text-align: center; top: 50%; width: 100%; font-size: 250%; margin-top: -160px }


/*

#section01 > div.royalSlider {height:600px !important}
#section01 > div.royalSlider .rsSlide {height:600px !important}
#section01 > div.royalSlider .rsSlide a{display: inline-block;width:320px;height: 250px;position: relative;padding: 2%;text-decoration:none;text-align:center;top:25%}
#section01 > div.royalSlider .rsSlide a > img{position:absolute;left:50%;top:45%;margin-top:-50px;margin-left:-75px}
#section01 > div.royalSlider .rsSlide a > img:last-of-type{opacity:0}
#section01 > div.royalSlider .rsSlide a:hover > img:last-of-type,
#section01 > div.royalSlider   .rsActiveSlide a > img:last-of-type{opacity:1}
#section01 > div.royalSlider .rsSlide a:hover > img:first-of-type,
#section01 > div.royalSlider   .rsActiveSlide a > img:first-of-type{opacity:0}
#section01 > div.royalSlider .rsSlide a > h2{text-transform:uppercase;color:#4f4f4f;position: relative;top: 70%}
#section01 > div.royalSlider .rsSlide a:hover > h2,#section01 > div.royalSlider  .rsActiveSlide a > h2{color:#217fc3}

*/

#section01 > div { position: absolute; width: 100%; bottom: 0; background: rgba(80,80,80,0.7); text-align: center; border: 1px solid #217fc3; border-left: 0; border-right: 0 }
#section01 > div > a { position: relative; display: inline-block; width: 150px; text-decoration: none; height: 115px }
#section01 > div > a > h2 { font-size: 80%; text-transform: uppercase; position: relative; top: 70%; color: #fff }
#section01 > div > a:hover > h2 { color: #217fc3; letter-spacing: 0.04em }
#section01 > div > a > img { position: absolute; top: 15px; margin-left: -45px; width: 90px }
#section01 > div > a > img:last-of-type { opacity: 0 }
#section01 > div > a:hover > img:first-of-type { opacity: 0 }
#section01 > div > a:hover > img:last-of-type { opacity: 1 }

#section02 { text-align: center; }
#section02 > h2 { text-align: center; margin: 60px 0px; font-style: italic }
#section02 > h2 > span { display: block }
#section02 > h2 > span:first-of-type { margin-right: 10% }
#section02 > h2 > span:last-child { margin-right: 0; margin-left: 20% }
#section02 > div.flip-box { color: #000; border: 1px solid #217fc3; border-left: 0; border-right: 0; width: 16.46%; display: inline-block; min-width: 250px; vertical-align: top; height: 435px; max-width: 450px; margin: 0 auto }
#section02 > div.flip-box > div > div { padding: 20px; }
#section02 > div.flip-box > div > div > h2 { font-size: 1em; text-transform: uppercase; height: 110px }
#section02 > div.flip-box > div > div p { font-size: 0.8em; text-align: justify }
#section02 > div.flip-box > div > div img { height: 140px; padding-bottom: 40px }
#section02 > div.flip-box > div > div.flip-box-front { background: -moz-linear-gradient(top, #a7d6f7 0%, #ffffff 51%, #a7d6f7 100%); background: -webkit-linear-gradient(top, #a7d6f7 0%,#ffffff 51%,#e2ecc8 100%); background: linear-gradient(to bottom, #a7d6f7 0%,#ffffff 51%,#a7d6f7 100%) }
#section02 > div.flip-box > div > div.flip-box-back { background: #a7d6f7; background: -moz-linear-gradient(top, #a7d6f7 0%, #ffffff 100%); background: -webkit-linear-gradient(top, #a7d6f7 0%,#ffffff 100%); background: linear-gradient(to bottom, #a7d6f7 0%,#ffffff 100%); }
#section02 > div.flip-box > div > div a.button { position: absolute; bottom: 90px; margin-left: -55px; left: 50% }
#section02 > div.flip-box > div > div.flip-box-back img { position: absolute; left: 0; width: 100%; opacity: 0.2; top: 60px; height: auto; padding: 0 }


@media only screen and (max-width:1599px) {
    #section02 > div.flip-box { width: 49.8% }
}

@media only screen and (max-width:900px) {
    #section01 { min-height:750px }
    #section01 > h1 { top: 200px; font-size: 1.8em !important; width: 98% }
    #section01 > h1 > span:nth-of-type(2) { display: block; overflow: auto; white-space: inherit; }
    #section01 > div { top: 250px }
    #section02 > h2 {margin: 30px 0px;}
    #section02 > h2 > span {margin:0 !important}
    #section02 > div.flip-box { width: 100% ;height: 325px}
    #section02 > div.flip-box > div > div a.button{bottom:10px}
    #section02 > div.flip-box > div > div.flip-box-back img { left: 25%; width: 50%; top: 50px }
    #section02 > div.flip-box > div > div.flip-box-back { display: block !important }
    #section02 > div.flip-box > div > div.flip-box-front { display: none !important }
    .flip-box:hover .flip-box-inner, .flip-box-back { transform: none }
}

#section03 { border-bottom: 1px solid #217fc3 }
#section03 > div { min-height: 565px; width: 33.2%; display: inline-block; vertical-align: top; min-width: 320px; padding: 10px 27px 10px 27px }
#section03 > div:nth-of-type(2) { background: #eff2f6; text-align: center }
#section03 > div:nth-of-type(2) p { text-align: center }
#section03 > div:nth-of-type(2) > p > img { padding: 40px }
#section03 > div h2 { text-align: center; margin-top: 20px }
#section03 > div h3 { font-size: 1.3em }
#section03 > div > div.newsacc { margin: 30px auto }
#section03 > div > div.newsacc p { font-family: 'robotomedium'; color: #383838 }
#section03 > div > div.newsacc > a.lnkmore { display: block; text-align: right; padding-top: 16px }
#section03 > div:first-of-type > a { text-transform: uppercase; text-decoration: none; font-family: 'robotomedium'; color: #217fc3; width: 200px; display: block; margin: 0 auto }

#section03 > div:last-of-type { width: 32.9%;overflow:auto;overflow-x:no-display;max-height:565px }
#section03 > div:last-of-type > blockquote { margin: 32px }
#section03 > div:last-of-type > blockquote > cite { font-family: 'robotomedium'; font-style: normal }
#section03 > div:last-of-type > blockquote > p { font-style: italic }

@media only screen and (max-width:900px) {
    #section03 > div { width: 100% !important; max-width: 550px; margin: 0 auto; min-height: inherit; display: block }
    #section03 > div:nth-of-type(2) { width: 100%; max-width: inherit }
    #section03 > div:last-of-type {overflow:hidden;max-height:inherit }
}



/****************************** PAGES ******************************/

header.headerpage { background: #e9e9e9; text-align: center; margin: 40px 0px 0px 0px; position: fixed; top: 140px; width: 100%; z-index: 80 }
header.headerpage a { display: inline-block; vertical-align: top; width: 160px; height: 160px; position: relative; padding: 10px; text-decoration: none; text-align: center; top: 25%; color: #000 }
headerr.headerpage.fida a { height: 40px; top: 0px }
header.headerpage a > img { position: absolute; left: 50%; top: 45%; margin-top: -50px; margin-left: -50px; width: 100px }
header.headerpage a > img:last-of-type { opacity: 0 }
header.headerpage a > img:first-of-type { opacity: 0.7 }
header.headerpage a:hover > img:first-of-type { opacity: 0 }
header.headerpage a:hover > img:last-of-type { opacity: 1 }
header.headerpage a > h2 { text-transform: uppercase; color: #4f4f4f; position: relative; top: 60%; font-size: 0.8em; font-family: 'robotobold'; }
header.headerpage.fida a > h2 { top: 0px }
header.headerpage a:hover > h2 { color: #217fc3 }

header.headerpage.tiny { top: -41px }
header.headerpage.tiny.fida { top: 0 }
header.headerpage.tiny a { height: 120px }
header.headerpage.tiny a > img { margin-left: -40px; width: 80px; top: 44% }
header.headerpage.tiny a > h2 { top: 52% }
header.headerpage.tiny.fida a > h2 { top: 0 }

section > section.sectionpage:first-of-type { margin-top: 172px }
section > header.headerpage.tiny ~ section.sectionpage.parralax { }

/**************** VIDEO ********/

iframe.video {width: 450px; height: 450px;}

@media only screen and (max-width:900px) {
    iframe.video {width: 300px; height: 300px;}
}

@media only screen and (max-width:1279px) {
    header.headerpage a { width: 140px }
    header.headerpage { margin: 0px; position: inherit }
    section > section.sectionpage:first-of-type { margin-top: 0px }
}

@media only screen and (max-width:1024px) {
    header.headerpage a { width: 140px }
}

@media only screen and (max-width:900px) {
    header.headerpage a { width: 32%; height: 100px }
    header.headerpage a > img { top: 40%; margin-top: -40px; margin-left: -40px; width: 80px; }
    header.headerpage a > h2 { top: 50%; font-size: 0.7em }
}


.parralax { background-attachment: fixed; background-position: top center; background-repeat: no-repeat; background-size: cover }
section.sectionpage.parralax { border-bottom: 1px solid #848483 }
div.divbg { background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.77) 25%, rgba(255,255,255,0.8) 26%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.8) 75%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.77) 25%,rgba(255,255,255,0.8) 26%,rgba(255,255,255,1) 50%,rgba(255,255,255,0.8) 75%,rgba(255,255,255,0) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.77) 25%,rgba(255,255,255,0.8) 26%,rgba(255,255,255,1) 50%,rgba(255,255,255,0.8) 75%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ) }
div.container { padding-top: 40px; min-height: 660px; max-width: 960px; margin: 0 auto }
div.container { text-align: center }
div.container > div { display: inline-block; width: 44%; text-align: left; padding: 40px 20px; vertical-align: top; text-align: justify }
div.container > a.button { margin-top: 40px }
div.container > div.div1 { display: block; width: 100%; max-width: 760px; margin: 0 auto }
div.container > h2 { margin-bottom: 20px }
div.container > span { font-weight: bold; display: block; margin-bottom: 20px }

td > span.name { display: block; font-weight: bold; text-transform: uppercase }
div.blockadress { background: #eff2f6; text-align: center; text-transform: uppercase; padding-top: 30px }
div.blockadress > a { display: block; text-decoration: none; color: #fff; margin-top: 30px; padding: 4px 0px }
div.blockadress > a > img { padding-right: 4px }



@media only screen and (max-width:900px) {
    div.container > div { width: inherit; display: block }
    div.divbg { background: -moz-linear-gradient(left, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.77) 25%, rgba(255,255,255,0.8) 26%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.8) 75%, rgba(255,255,255,0.5) 100%); background: -webkit-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.77) 25%,rgba(255,255,255,0.8) 26%,rgba(255,255,255,1) 50%,rgba(255,255,255,0.8) 75%,rgba(255,255,255,0.5) 100%); background: linear-gradient(to right, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.77) 25%,rgba(255,255,255,0.8) 26%,rgba(255,255,255,1) 50%,rgba(255,255,255,0.8) 75%,rgba(255,255,255,0.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ) }

    div.container > span { margin: 0px 20px 20px 20px }
}



/************** SERVICES ***************/
section#sectioncreation { background-image: url(../images/photos/bg_creation.jpg) }
section#sectioncompta { background-image: url(../images/photos/bg_compta.jpg) }
section#sectionsalaries { background-image: url(../images/photos/bg_salaries.jpg) }
section#sectionjuridique { background-image: url(../images/photos/bg_juridique.jpg) }
section#sectionfiscalite { background-image: url(../images/photos/bg_fiscalite.jpg) }
section#sectiongestion { background-image: url(../images/photos/bg_gestion.jpg) }
section#sectioncession { background-image: url(../images/photos/bg_cession.jpg) }


@media only screen and (max-width:900px) {
    header.headerpage a { width: 32%; height: 100px }
    header.headerpage a > img { top: 40%; margin-top: -40px; margin-left: -40px; width: 80px; }
    header.headerpage.fida  a > h2 { top: 50%; font-size: 0.7em }
}

/************** VOTRE ACTIVITE ***************/

@media only screen and (max-width:900px) {
    section.sectionpage:nth-of-type(2n) > div > div > div:first-of-type { -webkit-order: 2; -ms-flex-order: 2; order: 2 }
    section.sectionpage > div > div > div { padding-bottom: 0px }
}

/************** OUTILS ***************/

section#sectiongestioncompta { background-image: url(../images/photos/bg_compta.jpg) }
section#sectionpilotage { background-image: url(../images/photos/bg_pilotage.jpg) }
section#sectionfacturation, section#sectionnotesdefrais { background-image: url(../images/photos/bg_facturation.jpg) }
section#sectiondocuments { background-image: url(../images/photos/bg_documents.jpg) }
section#sectionvisio { background-image: url(../images/photos/bg_visio.jpg) }


/************** FIDA ***************/

header.headerpage.fida { margin: 0; height: 56px; top: 180px; padding-top: 8px }
header.headerpage.fida a { top: -1px; }
section#sectionqui { margin-top: 60px }
div.container > div.div3 { display: inline-block; width: 34%; text-align: center; vertical-align: top; margin: 40px 10px }
div.container > div.div3:nth-of-type(2) { width: 23%; text-align: center; padding-top: 40px; }
div.container > div.div3:nth-of-type(2) > p:nth-of-type(2) { font-weight: bold; text-transform: uppercase; font-size: 1.2em; line-height: 1.8em }

@media only screen and (max-width:900px) {
    section#sectionqui { margin-top: 0px }
    div.container > div.div3, div.container > div.div3:nth-of-type(2) { display: block; width: inherit; margin: 20px auto; max-width: 450px; padding: 0px 20px; }
}


/************** CONTACTS ***************/

section#sectioncontact { margin-top: 0px; background: url(../images/photos/bureaubg.jpg); background-size: cover }
section#sectioncontact > div.divbg { min-height: 1060px; background: none }
section#sectioncontact fieldset { font-family: 'robotomedium'; border: 1px solid #e2ecc8; max-width: 600px; padding: 20px; margin: 10px auto 40px auto; background: rgba(255,255,255,0.7) }
section#sectioncontact fieldset label { text-align: right; width: 122px; margin: 0px 4px 10px 0px; display: inline-block }
section#sectioncontact legend { font-size: 14px; color: #eee; font-weight: 900 }
section#sectioncontact input { width: 250px; color: #555; padding: 4px; background: #d3ea9c; border: 0 }
section#sectioncontact input[type="checkbox"] { width: 20px; font-size: 48px; height: 16px; position: relative; top: 3px; margin-right: 4px; margin-bottom: 6px; }
section#sectioncontact textarea { width: 100%; min-height: 140px; background: #d3ea9c }
section#sectioncontact input[type="submit"] { font-family: 'robotomedium'; width: 100%; background: #217fc3; margin: 10px auto; text-transform: uppercase; color: #fff; padding: 10px; cursor: pointer }
section#sectioncontact fieldset > span { display: block; max-width: 284px; text-align: left; margin: 20px auto }
section#sectioncontact fieldset > span:not(:first-of-type) { max-width: 450px }

/************** RECRUT ***************/

section#sectionrecrut { margin-top: 60px }
section#sectionrecrut fieldset { text-align: left; font-family: 'robotomedium'; border: 1px solid #e2ecc8; max-width: 450px; padding: 40px 20px 20px 20px; margin: 40px auto 40px auto }
section#sectionrecrut fieldset label { text-align: right; width: 122px; margin: 0px 4px 10px 0px; display: inline-block }

section#sectionrecrut fieldset > input { width: 250px; color: #555; padding: 4px; background: #d3ea9c; border: 0 }
section#sectionrecrut fieldset > input.file { cursor: pointer; border: 0; font-family: 'robotomedium'; width: 150px; background: #217fc3; margin: 40px auto 0px auto; text-transform: uppercase; color: #fff; padding: 10px; }
section#sectionrecrut fieldset > input.submit { cursor: pointer; border: 0; font-family: 'robotomedium'; width: 150px; background: #217fc3; margin: 40px auto 0px auto; text-transform: uppercase; color: #fff; padding: 10px; }
section#sectionrecrut fieldset > input:last-of-type { float: right }

@media only screen and (max-width:900px) {
    section#sectionrecrut { margin: 0 20px }
}

/************** ACCES ***************/

section#sectionacces { margin-top: 60px }
section#sectionacces a { text-decoration: none; color: #217fc3; display: inline-block; padding: 10px; width: 320px }
section#sectionacces a:hover { background: rgba(33,127,195,0.1); border-radius: 3px }