/* General  **************************/

* { box-sizing:border-box; }

html { background:#fff; color:#39b9bd; cursor:default; line-height:1.3; overflow:hidden; overflow-y:auto; height:100%; }
body { font-size: 16px; font-family:'Open Sans', Arial, sans-serif; height:100%; }

img { max-width:100%; height:auto; vertical-align: top; box-sizing: content-box; }

svg { height:auto; }
svg * { fill:currentColor !important; }

ul, li { list-style: none; padding:0; margin:0; }
a { text-decoration: none; color:currentColor; }
p { margin:24px 0; }

h1, h2, h3, h4, h5 { margin:0;  }


.clearfix:after { content:''; display:table; clear:both; }

.relative { position: relative; }

.valign-mid { font-size:0; }
.valign-mid:before { content:' '; display: inline-block; vertical-align:middle; height:100%; width:0.01%; }
.valign-mid > * { display: inline-block; vertical-align: middle; width:99.99%; }

.align-right { float:right; margin:0 0 20px 15px; }
.align-left { float:left; margin:0 15px 20px 0; }

#wrapper { overflow:hidden; }
.wrapper { max-width:1000px; height:100%; padding:0 20px; margin:0 auto; position: relative; }
.wrapper:after { content:''; display:table; clear:both; }

section, .in-section { position: relative; }
section { margin:-100px -50px 0; }
.in-section { padding:100px 50px 0; border-radius:0 0 80% 80% / 0 0 70px 70px; overflow:hidden; }
/* animate */
.in-section .wrapper { opacity:0; transition:opacity 400ms ease-in; }
.active .in-section .wrapper { opacity:1; }

section .wrapper { padding:200px 20px 100px; }

.title { color:currentColor; font-size:30px; margin:0 0 20px; font-weight:600; position: relative; }

.content { line-height:1.5; }


.raindrop { background:url('../img/bg-raindrop.png') no-repeat 0 0; background-size:cover; width:115px; height:213px; padding:0 0 20px; position: absolute; top:60px; left:50%; z-index:40; margin:0 0 0 -57px; }
.raindrop.small { width:67px; height:125px; margin:0 0 0 -33px; }
.raindrop:before { content:' '; position:relative; display:block; width:100%; height:100%; background:no-repeat 50% 100%; }
/* animate */
.raindrop { transform:translateY(-20px); transition:transform 400ms ease-out; }
.active .raindrop { transform:translateY(0); }


.bg { background:no-repeat 50% 0; background-size:cover; display:block; position:absolute; left:0; top:0; width:100%; height:100%; }


/* Header **************************/

#header { position:fixed; top:0; left:0; width:100%; z-index:99; background:#fff; text-align: center; }

#header nav { float:left; text-align: left; font-size:0; margin:19px 0 17px; }
#header nav li { display: inline-block; position: relative; font-size:18px; font-weight:700; line-height:1; }
#header nav li a { padding:8px 25px; display:block; text-transform: uppercase; transition:color 150ms ease-out; }
#header nav li a:hover,
#header nav li.active a { color:#f3a486; }
/* animate */
#header nav { opacity:0; transition:all 350ms ease-out; }
.lets-start #header nav { opacity:1; }

#header .logo { display:none; }

#header .social { float:right; text-align: right; padding:15px 0; font-size:0; }
#header .social li { display: inline-block; vertical-align: middle; margin:0 0 0 6px; }
#header .social li:first-child { margin:0; }
#header .social li a { display:block; text-align: center; }
#header .social li a:hover { opacity:0.95; }
#header .social li a img { vertical-align: middle; width:30px; }
/* animate */
#header .social li a { opacity:0; transform:translateY(-20px); transition:all 500ms ease-out; }
.lets-start #header .social li a { opacity:1; transform:translateY(0); }


#header .ham-nav { display:none; }


/* Footer **************************/
#footer { background:#fff; text-align: right; padding:20px 0; }
#footer .copyright span { font-size: 14px; vertical-align:bottom; display: inline-block; }
#footer .copyright .picture {  vertical-align:bottom; width:94px; padding:0 0 0 5px; position: relative; top:4px; }


/* Sections ********************************/

/* Section - home */
#section-home .wrapper { padding:0; }
#section-home .raindrop { cursor:pointer; bottom:-60px; top:auto; }
#section-home .raindrop:before { background-image:url('../img/icon-scroll.png'); animation:scroll 600ms ease-in infinite alternate; }
#section-home .in-section { text-align: center; height:670px; border:2px solid #fff; border-top-width:0; }
#section-home .in-section .bg { background-image:url('../img/bg-childs.jpg'); }
#section-home .in-section .logo { padding:0 20px 30px; }
/* animate */
#section-home .in-section .logo { opacity:0; transform:translateY(-50px); transition:all 850ms 100ms ease-out; }
.lets-start #section-home .in-section .logo { opacity:1; transform:translateY(0); }
#section-home .in-section .scroll { opacity:0; transition:all 350ms 200ms ease-out; }
.lets-start #section-home .in-section .scroll { opacity:1; }


/* Section presentation */
#section-presentation .in-section { background:#39b9bd; color:#fff; }
#section-presentation .wrapper { padding-top:100px; }
#section-presentation .portraits { margin:40px 0 30px; min-height:190px; text-align:center; padding:0; background:url('../img/bg-smile.png') no-repeat 50% 0; }
#section-presentation .portraits .portrait { display:inline-block; margin:40px 20px 0; text-align:center; }
#section-presentation .portraits .portrait .picture { border-radius:200px; overflow:hidden; margin:0 auto 12px; width:180px; height:180px; background:no-repeat 50% 50%; background-size:cover; }
#section-presentation .portraits .portrait .name { display:block; }
#section-presentation .portraits .portrait .job { display:block; font-style:italic; }



/* Section photos */
#section-photos .in-section { background:#e2b826; color:#fff; }
#section-photos .raindrop:before { background-image:url('../img/icon-apn.png'); }
#section-photos .pictures { margin:0 -10px 30px; }
#section-photos .pictures .line { overflow:hidden; clear:both; }
#section-photos .pictures .line .pic { padding:10px; }
#section-photos .pictures .line.two .pic { width:50%; float:left; }


/* Section contact */
#section-contact .in-section { border-radius:0; }
#section-contact .bg { background-image:url('../img/bg-contact-gradient.jpg'); }
#section-contact .bg:before { content:' '; width:100%; height:100%; display:block; background:url('../img/bg-contact-pattern.png') repeat 0 0; }
#section-contact .raindrop:before { background-image:url('../img/icon-phone.png'); }

#section-contact .inner { font-size:18px; background:#fff; overflow:hidden; }
#section-contact .col { width:50%; float:left; }

#section-contact .col.left { padding:60px 64px 30px; }
#section-contact .subtitle { font-size:24px; margin:35px 0 30px; font-weight:600; }
#section-contact .list { color:#707173; }
#section-contact .list .item { overflow:hidden; margin:0 0 30px; }
#section-contact .list a:hover { text-decoration:underline; }
#section-contact .list img { float:left; margin:0 13px 0 0; }
#section-contact .list .col { float:left; margin:0 70px 0 0; }
#section-contact .list .desc { overflow:hidden; }
#section-contact .house { margin:60px 0 0; }


#section-contact .col.right { background:#39b8bc; text-align: center; padding:30px 20px; position: relative; }
#section-contact .col.right:after { content:' '; position:absolute; top:100%; left:0; width:100%; height:400px; background:#39b8bc;  }




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

    /* General ***************************/


    /* Header **************************/

    #header .logo { display:none; height:48px; margin:8px 0 0; opacity:0; transition:opacity 250ms ease-out; }
    .lets-start #header .logo { display:inline-block; }
    html:not([data-section=section-home]) #header .logo { opacity:1; cursor:pointer;  }

    #header nav { position: absolute; z-index:5; top:100%; left:0; width:100%; margin:0; visibility:hidden; opacity:0; background:rgba(255,255,255,0.9); transition:opacity 150ms ease-out; }
    #header.opened nav { visibility: visible; opacity:1; }
    #header.opened nav li { display: block; text-align: center; }
    #header.opened nav li a { padding:20px; }

    #header .ham-nav { margin:11px 0 0; float:left; display:block; cursor:pointer; height:4px; border:20px solid transparent; width:45px; color:#39b8bc; background:currentColor; position: relative; z-index:1; background-clip: content-box; box-sizing: content-box; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
    #header .ham-nav:before,
    #header .ham-nav:after { content:' '; display: block; position: absolute; width:100%; height:100%; background:currentColor; transition:top 150ms ease-out 100ms, transform 150ms ease-out; }
    #header .ham-nav:before { top:-11px;  }
    #header .ham-nav:after { top:11px; }
    #header .ham-nav:hover:before { top:-14px;  }
    #header .ham-nav:hover:after { top:14px; }
    #header.opened .ham-nav { background-color:transparent; }
    #header.opened .ham-nav:before,
    #header.opened .ham-nav:after { top:0; transform:rotate(-45deg); transition:top 150ms ease-out, transform 150ms ease-out 100ms; }
    #header.opened .ham-nav:after { transform:rotate(45deg); }


    /* Sections ********************************/

    /* Section presentation */
    #section-presentation .portraits { background-size:90% auto; background-position:50% 20%; }



}



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

    /* General **************************/


    /* Sections ********************************/

    /* Section - home */
    #section-home .in-section { height:650px; }

    /* Section presentation */
    #section-presentation .portraits { background:none; }
    #section-presentation .portraits .portrait { display:block; }

    /* Section photos */
    #section-photos .pictures .line.two .pic { width:100%; }

    /* Section contact */
    #section-contact .col { width:100%; float:none; }
    #section-contact .col.left { padding:40px 30px; }
    #section-contact .house { margin:30px 0 0; }
    #section-contact .bg:before { background-size:55%; }


}



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

    /* General **************************/

    .title { text-align:center; }

    html[data-section=section-presentation] #header .logo { opacity:0; }
    /*#header .logo { display:none; }*/

    /* Sections ********************************/
    /* Section - home */
    #section-home .in-section { height:450px; }
    #section-home .in-section .logo { padding-bottom:0; }


}



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


    /* Header **************************/
    #header .logo { height:42px; }
    #header .wrapper { padding:0 10px 0 0; }

}