body {font: 13px Helmet, Freesans, sans-serif;}
body, select, input, textarea {color: #333;}
a {color: #222;}
a:hover {color: #222;}
::-moz-selection{background: #fff; color: #222; text-shadow: none;}
::selection {background: #fff; color: #222; text-shadow: none;} 
a:link {-webkit-tap-highlight-color: #fff;} 
ins {background-color: #fff; color: #000; text-decoration: none;}
mark {background-color: #fff; color: #000; font-style: italic; font-weight: bold;}
input:-moz-placeholder { color:#666; }
textarea:-moz-placeholder { color:#666; }


html, body {
    height: 100%;
}

.carousel,
.carousel-inner, 
.carousel-item {
    height: 100%;
}

.imsvg {
    display: block;
    margin: 0;
    padding: 0;
}

.imsvg:before {
    display: block;
    padding-top: 100%;
    content: " ";
}

.ci1 {
    background: #F5F4EF;
}

.ci2 {
    background: #FDFCFA;
}

#logo {
    background: url(../images/logo.svg) center center / contain no-repeat;
    width: 39.635vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

#logo:before {
    padding-top: 39%;
}

#slide2Content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 75.78vw;
    display: flex;
    flex-direction: column;
}

#personalado ,
#personafrente {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    opacity: 0;
    transition: all 1s ease-out;
}

#personalado  {
    background: url(../images/renders-unno.png) center center / contain no-repeat;
    left: 40%;
}

#personafrente {
    background: url(../images/render-frente.png?rand=67846784) center center / contain no-repeat;
    right: 40%;
}

.section.active #personalado  {
    left: 15%;
    opacity: 1;
}
.section.active #personafrente {
    right: 15%;
    opacity: 1;
}




#subtitle {
    background: url(../images/subtitle.svg) center center / contain no-repeat;
    width: 100%;
    margin-bottom: 5vw;
}

#subtitle:before {
    padding-top: 20.13%;
}

.sl2lines {
    margin: 1.8vw 0 ;
    display: block;
    transition: all 1s ease-out;
}





#sl2line1 {
    background: url(../images/sl2line1.svg) center center / contain no-repeat;
    width: 80.62vw;
    opacity: 0;
    margin-left: 15%;
    transition-delay: .0s;
}

.section.active #sl2line1 {
    opacity: 1;
    /*margin-left: -37%;*/
    margin-left: -3%;
}

#sl2line1:before {
    padding-top: 2.44608053958813%;
}

#sl2line2 {
    background: url(../images/sl2line2.svg) center center / contain no-repeat;
    width: 81.746875vw;
    opacity: 0;
    margin-left: 15%;
    transition-delay: .3s;
}

.section.active #sl2line2 {
    opacity: 1;
    margin-left: 4%;
}

#sl2line2:before {
    padding-top: 2.41368024404013%;
}

#sl2line3 {
    background: url(../images/sl2line3.svg) center center / contain no-repeat;
    width: 79.6140625vw;
    opacity: 0;
    margin-left: 15%;
    transition-delay: .6s;
}

.section.active #sl2line3 {
    opacity: 1;
    margin-left: -6%;
}

#sl2line3:before {
    padding-top: 2.48321409464134%;
}

#sl2line4 {
    background: url(../images/sl2line4.svg) center center / contain no-repeat;
    width: 23.75vw;
    margin: 2vw auto 0;
    opacity: 0;
    margin-left: 35%;
    transition-delay: .6s;
}

.section.active #sl2line4 {
    opacity: 1;
    margin-left: 40%;
}

#sl2line4:before {
    padding-top: 6.54616534021912%;
}



#slide3Content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 75.78vw;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

.sl3lines {
    margin: 2vw 0 ;
    display: block;
    transition: all 1s ease-out;
}

#sl3line1 {
    background: url(../images/sl3line1_2.svg) center center / contain no-repeat;
    width: 56vw;
    opacity: 0;
    left: -10%;
    transition-delay: .0s;
    align-self: flex-end;
    position: relative;
}

.section.active #sl3line1 {
    opacity: 1;
    left: 0%;
}

#sl3line1:before {
    padding-top: 14.12%;
}

#sl3line2 {
    background: url(../images/sl3line2_2.svg) center center / contain no-repeat;
    width: 70.52vw;
    opacity: 0;
    margin-left: 15%;
    transition-delay: .3s;
}

.section.active #sl3line2 {
    opacity: 1;
    margin-left: 0%;
}

#sl3line2:before {
    padding-top: 17.43%;
}

#sl3line3 {
    background: url(../images/sl3line3_2.svg?rand=235345) center center / contain no-repeat;
    width: 61.40vw;
    opacity: 0;
    left: -10%;
    transition-delay: .6s;
    align-self: flex-end;
    position: relative;
}

.section.active #sl3line3 {
    opacity: 1;
    left: 0%;
}

#sl3line3:before {
    padding-top: 7.125%;
}


#renderme {
    background: url(../images/contactme.svg) center center / contain no-repeat;
    width: 23.7vw;
    opacity: 0;
    transition-delay: 1s;
    align-self: center;
    margin: 2vw auto 0;
}

.section.active #renderme {
    opacity: 1;
}

#renderme:before {
    padding-top: 16.92%;
}

.fp-watermark {
    display: none;
}






/* Media queries
-------------------------------------------------------------------------------*/

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

    .carousel-control-prev,
    .carousel-control-next {
        display: none;
    }




    

    #personalado  {
        background: url(../images/renders-unno2.png) center left / auto 100% no-repeat;
        left: 85%;
    }

    #personafrente {
        background: url(../images/render-frente2.png) center right / auto 100% no-repeat;
        right: 85%;
    }

    .section.active #personalado  {
        left: 60%;
    }
    .section.active #personafrente {
        right: 40%;
    }



    
    #logo {
        width: 80vw;
    }

    
    #slide2Content {
        width: 90vw;
    }

    .sl2lines {
        margin: 3.8vw 0 ;
    }

    #sl2line1 {
        width: 120.62vw;
        margin-left: -10%;
    }
    
    #sl2line2 {
        width: 121.746875vw;
    }

    #sl2line3 {
        width: 119.6140625vw;
    }

    #sl2line4 {
        width: 43.75vw;
        margin: 4vw auto 0;
    }

    .section.active #sl2line4 {
        margin-left: 25%;
    }



    #slide3Content {
        width: 95vw;
    }

    .sl3lines {
        margin: 4vw 0 ;
    }

    #sl3line1 {
        width: 81vw;
    }

    #sl3line2 {
        width: 95.52vw;
    }

    #sl3line3 {
        width: 86.40vw;
    }


    #renderme {
        width: 48.7vw;
        margin: 2vw auto 0;
    }






}