/* ----------------------------------------------------------------

    

    Filename: landing.css

    Description: over-bootstrap css

    Version: 1.0.0

    Author: Guilherme de Oliveira Costa

    Website: http://www.benance.net/guilhermedeocosta

    

-----------------------------------------------------------------*/





/* =======================    GENERAL    ======================= */

body {

    font-family: 'Open Sans', sans-serif;

}



.ie body {

    

}



.l { text-align: left;

      margin-top: 12px; }

.r {text-align: right;}

.c { text-align: center; }



h1 {

    font-family: Oswald, sans-serif;

    text-transform: uppercase;

    font-weight: 700;

    font-size: 48px;

    margin-top: 20px;

}



    h1 + span {

        display: inline-block;

        width: 15%;

        height: 3px;

        background: white;

        margin-bottom: 5px;

    }



h2 {

    font-family: Oswald, sans-serif;

    font-weight: 300;

    color: #707070;

    font-size: 21px;

}



.cropper {

    overflow: hidden;

    display: inline-block;

    width: 100%;

    height: 0;

    padding-bottom: 100%;

    text-align: center;

    position: relative;

}



    .cropper img {

        width: 100%;

        height: auto;

    }



.space-me {

    display: block;

    width: 100%;

    white-space: nowrap;

    background-color: transparent;

}



.space-me.ten-px {min-height:10px;}

.space-me.fifteen-px {min-height:15px;}

.space-me.twenty-px {min-height:20px;}

.space-me.thirty-px {min-height:30px;}

.space-me.fifty-px {min-height:50px;}



/* =====================   ANIMATIONS   ===================== */

.animate {

    -webkit-transition: all .3s ease-in-out;

    -ms-transition: all .3s ease-in-out;

    -o-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;

}



.animated { 

    -webkit-animation-duration: 1s; 

    animation-duration: 1s; 

    -webkit-animation-fill-mode: both; 

    animation-fill-mode: both; 

    -webkit-animation-timing-function: ease-in-out; 

    animation-timing-function: ease-in-out; 

}



/* =====================   HEADER   ===================== */

header {

    background-image: url('../img/ui/header-bg.png');

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center top;

    color: #ffffff;

    

}



header .logo span {

    

}



header .logo .divider {

    margin: 5px 15px;

    width: 1px;

    max-width: 1px;

    overflow: hidden;

    background-color: #ffffff;

    background-color: rgba(255,255,255,0.3);

    height: 36px;

    display: inline-block;

}



#first-call {

    

    background-repeat: no-repeat;

    background-position: right bottom;

    /*background-size: contain;*/

    text-align: center;

    height: 190px;

    margin-top: -36px;

    /*padding: 15px;*/

    

}



/* =====================   FEATURES   ===================== */

#features {

    background-color: #f8f8f8;

    padding: 10px 0px 7px;

    border-bottom: 1px solid #f0f0f0;

    margin-bottom: 30px;

}



#features .col-lg-2 {

    padding-left: 5px;

    padding-right: 5px;

}



#features .feature {

    color: #4e4640;

    text-align: right;

}



#features .feature span {

    display: block;

    padding-right: 40px;

    background-repeat: no-repeat;

    background-image: url('../img/ui/icons-spritesheet.png');

    font-size: 11px;

    text-transform: uppercase;

    height:  34px;

}



#features .feature#pagamento span {

    background-position: 155px 2px;

}



#features .feature#flores span {

    background-position: 155px -53px;

}



#features .feature#cartao span {

    background-position: 155px -110px;

}



#features .feature#frete span {

    background-position: 153px -164px;

}



#features .feature#atendimento span {

    background-position: 155px -218px;

}



#features .feature#entrega span {

    background-position: 155px -275px;

}



/* =====================   SHOWCASE   ===================== */

.product-card>div {

    position: relative;

    text-align: left;

    margin-bottom: 50px;

}



.product-card span {

    display: block;

    height: 0;

    padding-bottom: 80%;

    overflow: hidden;

    background-repeat: no-repeat;

    background-position: center;

    background-size: contain;

}



.product-card span.detalhes {

    padding-bottom: 0px;

    overflow: initial;

    height: initial;

    background-position: left center;

    margin-top: 10px;

    background-color: #f8f8f8;

    padding: 2px 10px;

    text-transform: lowercase;

    opacity: 0;

    display: inline-block;

    cursor: pointer;

    color: #999999;

}



.product-card:hover span.detalhes {

    opacity: 1;

}



.product-card span#bombons-de-nutella {

    background-image: url('../img/photos/bombons-de-nutella.png');

}



.product-card span#bombons {

    background-image: url('../img/photos/bombons.jpg');

}



.product-card span#keksi-personalizado {

    background-image: url('../img/photos/3-Keksi-Personalizado.png');

}



.product-card span#suporte-de-bolsa {

    background-image: url('../img/photos/4-Suporte-de-Bolsa.png');

}



.product-card span#kit-manicure {

    background-image: url('../img/photos/5-Kit-Manicure.png');

}



.product-card span#necessaire {

    background-image: url('../img/photos/necessaire.jpg');

}



.product-card span#bolsa-de-cosmeticos {

    background-image: url('../img/photos/7-Bolsa-de-Cosmeticos.png');

}





.product-card span#lancheira-neoprene {

    background-image: url('../img/photos/8-Lancheira-Neoprene.png');

}



.product-card span#kit-lixa {

    background-image: url('../img/photos/kit-lixa.jpg');

}



.product-card span#kit-manicure-couro {

    background-image: url('../img/photos/10-Kit-Manicure-Couro.png');

}



.product-card span#clutch-636 {

    background-image: url('../img/photos/11-Clutch-636.png');

}



.product-card span#porta-batom {

    background-image: url('../img/photos/porta-batom-couro-sintetico.jpg');

}





.product-card>div a {

    position: absolute;

    display: block;

    width: 96px;

    height: 60px;

    border-radius: 50%;

    -moz-border-radius: 50%;

    -o-border-radius: 50%;

    -webkit-border-radius: 19%;

    background-color: #FBD91C;

    color: #ffffff;

    top: 190px;

    left: 60px;

    text-align: center;

    padding: 15px;

    cursor: pointer;

    text-transform: uppercase;

    font-size: 21px;

    transition: 0.6s;

}



.product-card>div:hover a {

    width: 95px;

    height: 60px;

    top: 150px;

    left: -45px;

    box-shadow: inset 0 0 0 1px #D39432;

    padding:15px;

    text-decoration: none;

}



.product-card {

    min-height: 450px;

}



.product-card p {

    text-align: right;

    margin-right: 50px;

    font-weight: 700;

    color: #837d79;

    font-size: 16px;

    display: inline;

}



.product-card p b {

    color: #3db537;

    font-size: 21px;

    font-weight: 600;

}



.product-card h2 {

    border-top: 1px dotted #e8e8e8;

    margin: 0px 20px;

    padding-top: 5px;

    text-align: right;

}





.product-card h3 {

    margin: 0 20px;

    padding-top: 5px;

    text-align: right;

    font-size: 16px;

    padding-top: 30px;

}

div>.personalizavel::before {

    display: block;

    position: absolute;

    bottom: -35px;

    right: 20px;

    background-color: #4e4640;

    color: white;

    text-transform: uppercase;

    font-size: 12px;

    padding: 4px 10px;

    content: "Personalizável";

    opacity: 0.7;

    transition: 1s;

}



/* =======================    FORM    ======================= */

section#cta {

    background-color: #a94442;

    color: white;

    padding: 70px 0 100px;

}



section#cta h5 {

    font-size: 16px;

    margin-bottom: 30px;

}



section#cta label {

    min-width: 120px;

    max-width: 90%;

    padding: 8px 15px 20px;

    text-transform: uppercase;

    font-weight: 300;

    font-family: 'Oswald', sans-serif;

    display: inline-block;

    background: #E57373;

}



section#cta .form-control {

    -webkit-border-radius: 0px;

    -moz-border-radius: 0px;

    border-radius: 0px;

    border: none;

    position: relative;

    margin-top: -20px;

    margin-left: 10px;

}



section#cta .btn-send {

    background-color: #F44336;

    color: #ffffff;

    text-transform: uppercase;

    font-size: 16px;

    transition: 0.6s;

    font-weight: bold;

    border: none;

    -webkit-border-radius: 0px;

    -moz-border-radius: 0px;

    border-radius: 0px;

    padding: 10px 25px;

    margin-top: 15px;

}



section#cta .btn-send:hover {

    box-shadow: inset 0 0 0 4px #F44300;

}



/* =====================   TEXT   ===================== */

section#text {

     background-image: url('../img/ui/header-bg.png');

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center top;

    color: #ffffff;

    



   /*background-repeat: no-repeat;

    display: block;

   background-repeat: no-repeat;

    background-image: url('../img/ui/mãe.png');

    color: white;

    padding: 50px 0 70px 0;*/

}



section h3, section h4 {

    font-family: 'Oswald', sans-serif;

    font-size: 32px;

    font-weight: 300;

    margin-top: 30px;

    margin-bottom: 5px;

}

section .FeaturesWork{

    margin-bottom: 30px;

}

section#text img{

    max-width: 100%;

}



section#text h3{

    margin-bottom: 50px;

}

section#text h3 b, section#text h4 b {

    font-weight: 500;

}



section#text span, section#cta span {

    display: inline-block;

    width: 80px;

    height: 2px;

    background: white;

    margin-bottom: 10px;

}



section#text p {

    font-size: 16px;

    line-height: 1.5;

    text-render: optimizeLegibility;

}



/* =====================   EMPRESA   ===================== */

section#empresa {

    background-color: #f8f8f8;

    padding: 40px 0px;

    margin-top: 50px;

    color: #828282;

}



section#empresa img {

    width: 100%;

    height: auto;

    border: 7px solid #ffffff;

    -webkit-box-shadow: 2px 2px 3px 0px rgba(50, 50, 50, 0.1);

    -moz-box-shadow:    2px 2px 3px 0px rgba(50, 50, 50, 0.1);

    box-shadow:         2px 2px 3px 0px rgba(50, 50, 50, 0.1);

}



section#empresa h3 {

    margin-top: 0px;

    font-family: Oswald, sans-serif;

    font-weight: 300;

    text-transform: uppercase;

    font-size: 32px;

    color: #cd0316;

}



section#empresa p {

    line-height: 22px;

}



/* =======================    SHOWROOM    ======================= */

section.showroom {

    height: 700px;

    height: 100vh;

    box-sizing: border-box;

    padding: 11% 0px;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    color: #ffffff;

    overflow: hidden;

    position: relative;

}



span.controlling {

    display: block;

    position: absolute;

    height: 20px;

    width: 50px;

    border-radius: 50% / 100%;

    background-color: transparent;

    border: 2px solid #ffffff;

    background-image: url('../img/ui/icons-spritesheet.png');

    background-repeat: no-repeat;

    left: 50%;

    opacity: 0.5;

    -webkit-transition: all .3s ease-in-out;

    -ms-transition: all .3s ease-in-out;

    -o-transition: all .3s ease-in-out;

    -moz-transition: all .3s ease-in-out;

    cursor: pointer;

}



span.controlling:hover {

    opacity: 1;

}



span.controlling.prev-section {

    top: 0;

    margin-left: -24px;

    background-position: 17px -364px;

    border-top-left-radius: 0;

    border-top-right-radius: 0;

    border-top: none;

}



span.controlling.next-section {

    bottom: 0;

    margin-left: 24px;

    background-position: 17px -326px;

    border-bottom-left-radius: 0;

    border-bottom-right-radius: 0;

    border-bottom: none;

}



section.showroom#flores-nobres {

    background-image: url('../img/ui/flores-nobres-bg.jpg');

}



section.showroom#rosas-nacionais {

    background-image: url('../img/ui/rosas-nacionais-bg.jpg');

}



section.showroom#orquidea {

    background-image: url('../img/ui/orquidea-bg.jpg');

}



section.showroom .photo {

    display: block;

    overflow: hidden;

    width: 100%;

    height: 0;

    padding-left: 20px;

    padding-right: 20px;

    padding-bottom: 100%;

    text-align: center;

    background-color: #ffffff;

    border-radius: 50%;

    -o-border-radius: 50%;

    -moz-border-radius:50%;

    -webkit-border-radius: 50%;

}



section.showroom .photo img {

    width: 80%;

    margin-top: 45px;

    display: inline-block;

}



section.showroom#rosas-nacionais .photo img {

    margin-top: 75px;

    width: 90%;

}



section.showroom#orquidea .photo img {

    margin-top: 30px;

    width: 65%;

}



section.showroom h3 {

    text-transform: uppercase;

    font-family: Oswald;

    font-size: 48px;

    font-weight: 300;

    line-height: 60px;

    margin-top: 10px;

}



section.showroom h4 {

    text-transform: uppercase;

    font-size: 18px;

    margin: 35px 0px 10px;

}



section.showroom p {

    font-weight: 300;

    font-size: 16px;

    line-height: 26px;

}



section.showroom span p {

    font-size: 22px;

    margin-top: 20px;

    font-weight: 500;

}



section.showroom p b {

    font-size: 44px;

}



section.showroom .btn {

    background-color: transparent;

    border: 2px solid #ffffff;

    border-radius: 2px;

    text-transform: uppercase;

    padding: 18px 50px;

    margin-top: 15px;

    font-size: 16px;

}



section.showroom#flores-nobres .btn:hover, section.showroom#flores-nobres .btn:focus {

    color: #bd315b;

}



section.showroom#rosas-nacionais .btn:hover, section.showroom#rosas-nacionais .btn:focus {

    color: #a92c2c;

}



section.showroom#orquidea .btn:hover, section.showroom#orquidea .btn:focus {

    color: #5d4f60;

}



/* =======================    FOOTER    ======================= */

footer {

    background-color: #f0f0f0;

    color: #777777;

    padding: 15px 0px;

    font-size: 13px;

}



.btn-primary {

    background-color: #f2c200;

    color: white;

    border-color: #f2c200;

}



.btn-primary:hover, .btn-primary:focus {

    background-color: #337ab7;

    border-color: #337ab7;

    color: white;

}



/* ============================================================= */

/* ======================= Media Queries ======================= */

/* ============================================================= */



/* ====================== Custom xlg size ===================== */

    @media screen and (min-width: 1400px) {

        /*Extra Large styles*/

        .product-card span#p-flores {

            margin: 0px 0px 0px 120px;

        }



        .product-card span#p-rosas {

            margin: 0px 0px 0px 60px;

        }



        .product-card span#p-orquidea {

            margin: 0px 50px;

        }



        .product-card>div a {

            top: 224px;

            left: 40px;

        }



        .product-card>div:hover a {

            top: 210px;

            left: 35px;            

        }

    }



/* ===================== Bootstrap lg size ===================== */

    @media screen and (min-width: 1200px) and (max-width: 1399px) {

        /*Big Screens styles*/

        .product-card span#p-flores {

            margin: 0px 0px 0px 120px;

        }



        .product-card span#p-rosas {

            margin: 0px 0px 0px 60px;

        }



        .product-card span#p-orquidea {

            margin: 0px 50px;

        }



        .product-card>div a {

            top: 225px;

            left: 50px;

        }



        .product-card>div:hover a {

            top: 235px;

            left: 35px;            

        }

    }



/* ===================== Bootstrap md size ===================== */

    @media screen and (min-width: 992px) and (max-width: 1199px) {

        /*Standard Screens styles*/

        .product-card span#p-flores {

            margin: 0px 0px 0px 60px;

        }



        .product-card>div a {

            left: 20px;

        }



        .product-card>div:hover a {

            left: 5px;            

        }



        .product-card p {

            margin-right: 30px;

        }

        

        .product-card h2 {

            margin: 0px 30px;

            padding-left: 90px;

            min-height: 52px;

        }

        

        #features .feature#pagamento span {

            background-position: 202px 2px;

        }



        #features .feature#flores span {

            background-position: 202px -53px;

        }



        #features .feature#cartao span {

            background-position: 202px -110px;

        }



        #features .feature#frete span {

            background-position: 200px -164px;

        }



        #features .feature#atendimento span {

            background-position: 202px -218px;

        }



        #features .feature#entrega span {

            background-position: 202px -275px;

        }



        section.showroom {

            min-height: 100vh;

            height: initial;

        }



    }



/* ===================== Bootstrap sm size ===================== */

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

        /*Tablet styles*/

        header #first-call h1 {

            font-size: 36px;

        }



        #features .feature#pagamento span {

            background-position: 148px 2px;

        }



        #features .feature#flores span {

            background-position: 148px -53px;

        }



        #features .feature#cartao span {

            background-position: 148px -110px;

        }



        #features .feature#frete span {

            background-position: 146px -164px;

        }



        #features .feature#atendimento span {

            background-position: 148px -218px;

        }



        #features .feature#entrega span {

            background-position: 148px -275px;

        }



        .product-card>div a {

            width: 80px;

            height: 60px;

            top: 140px;

            left: -12px;

            padding: 20px 0px;

        }



        .product-card>div:hover a {

            width: 110px;

            height: 110px;

            top: 110px;

            left: -10px;            

            padding: 45px 0px;

        }



        .product-card p {

            margin-right: 20px;

        }



        .product-card h2 {

            margin: 0px 10px;

            padding-left: 60px;

            letter-spacing: -0.5px;

            min-height: 52px;

        }



        section.showroom {

            min-height: 600px;

            height: initial;

        }

    }



/* ===================== Bootstrap xs size ===================== */

    @media screen and (min-width: 1px) and (max-width: 767px) {

        /*Smartphone styles*/

        header {

            height: initial;

            margin-bottom: 50px;

            max-height: none;

        }

        

        header .logo {

            text-align: left;

        }



        header .logo span {

            display: block;

            width: 100%;

        }



        header #first-call {

            background: none;

            padding: 0px;

            text-align: center;

        }



        header #first-call h1 {

            margin-top: 20px;

            padding: 0px;

            font-size: 30px;

        }



        header br {

            display: none;

        }



        .product-card span#p-flores {

            padding-bottom: 100%;

            margin: 0px 0px 0px 20px;

        }



        .product-card span#p-rosas {

            padding-bottom: 100%;

        }



        .product-card span#p-orquidea {

            padding-bottom: 120%;

        }



        .product-card {

            margin-bottom: 50px;

            text-align: center;

        }



        .product-card>div {

            display: inline-block;

            width: 100%;

            max-width: 400px;

        }



        .product-card>div a {

            padding: 35px 0px;

            float: none;

            position: initial;

            border-radius: 0;

            width: 100%;

            height: 40px;

            padding: 10px 15px;

            margin-top: 15px;

        }



        .product-card>div:hover a {            

            width: 100%;

            height: 40px;

            padding: 10px 15px;

        }



        .product-card p {

            margin-right: 20px;

        }



        .product-card h2 {

            margin: 0px 10px;

            letter-spacing: -0.5px;

        }



        section#empresa {

            margin-top: 0px;

        }



        section#empresa img {

            border: 5px solid #ffffff;

        }



        section#empresa h3 {

            margin-top: 15px;

            text-align: center;

        }



        section#empresa p {

            line-height: 25px;

        }



        section.showroom {

            height: initial;

            min-height: 500px;

            text-align: center;

        }



        section.showroom .container {

            max-width: 320px;

        }



        section.showroom h3 {

            margin-top: 30px;

            font-size: 30px;

            line-height: initial;

        }



        section.showroom .r {

            text-align: center;

        }



        section.showroom p b {

            font-size: 30px;

        }

    }



/* ============================================================= */

/* ============================================================= */

/* ============================================================= */