/* =======================    GENERAL    ======================= */
body {
    font-family: 'Open Sans', sans-serif;
}

.l { text-align: left; }
.r { text-align: right;
     font-size: 20px; }
.c { text-align: center; }

h1 {
    font-family: Oswald, sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 48px;
    margin-top: 25px;
    margin-bottom: 25px;
}

h1 + span {
    display: inline-block;
    width: 15%;
    height: 3px;
    background: white;
}

h1 + span + p {
    font-size: 16px;
    margin-bottom: 30px;
}

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;
    }

/* =====================   HEADER   ===================== */
header {
    background-repeat: repeat;
    padding: 15px 0;
    text-align: center;
    /*background: #186686;*/
    background-image:url('../img/ui/fundo.png');
    color: #ffffff;
}

/* =====================   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: #000000;
    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: center;
    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;
    margin-bottom: 10px;
}

.product-card span#Caixinha-4-Bombons-Trufados {
    background-image: url('../img/products/1-bombons-trufados.jpg');
}

.product-card span#Coelinho-de-Chocolate {
    background-image: url('../img/products/2-coelinhos.jpg');
}

.product-card span#Bombom-Recheado-Personalizado {
    background-image: url('../img/products/3-bombom-recheado-personalizado.png');
}

.product-card span#barra-de-chocolate {
    background-image: url('../img/products/4-barra-de-chocolate.png');
}

.product-card span#mini-ovo {
    background-image: url('../img/products/Mini-Ovo.png');
}

.product-card span#Par-bombons-decorados-30g {
    background-image: url('../img/products/Par-bombons-decorados.png');
}

.product-card span#Caixinha-Metalica-Personalizada {
    background-image: url('../img/products/7-caixinha-metálica.png');
}

.product-card span#Barrinha-de-Chocolate {
    background-image: url('../img/products/8-cinta-personalizada.jpg');
}

.product-card span#Ovinhos {
    background-image: url('../img/products/9-ovinhos-embalagem-de-coelho.png');
}


.product-card span#orcar {
    background-image: url('../img/ui/coelho.png');
    position: absolute;
    display: block;
    width: 115px;
    top: 222px;
    left: 30px; 
    padding: 40px 0px 20px 0px;
    cursor: pointer;
}
.product-card>div a {
    position: absolute;
    display: block;
    width: 100px;
    background-color: #406618;
    color: #ffffff;
    top: 190px;
    left: 60px;
    text-align: center;
    box-sizing: border-box;
    padding: 7px 0px 7px 0px;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 15px;
    transition: 0.6s;
    font-weight: bold;
}

/*.product-card>div:hover a {
    width: 120px;    
    top: 185px;
    left: 45px;
    box-shadow: inset 0 0 0 6px #8dad29;
    padding: 20px 0px;
    text-decoration: none;
}*/

.product-card h2 {
    border-top: 1px dotted #e8e8e8;
    margin: 0px 20px;
    padding-top: 5px;
    text-align: left;
}
.product-card h2 p{
    font-size: 15px;
    /*border-top: 1px dotted #e8e8e8;*/
    margin: 0px 20px;
    padding-top: 5px;
    text-align: left;

}
.product-card .valor {
    text-align: right;
    margin: 10px 20px 0;
    color: #777;
    line-height: 1.2;
}

.product-card .valor * {
    display: inline;
}

    .product-card .valor p {
        font-size: 20px;
        font-weight: 600;
        margin: 0;
        color: #72be44;
       
    }

/* =====================   TEXT   ===================== */
section#text {
    background-image:url('../img/ui/fundo2.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#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;
}

/* =======================    FORM    ======================= */
section#cta {
    background-color: #186686;
    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: #023144;
}

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: #abd037;
    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 #8dad29;
}

/* =======================    FOOTER    ======================= */
footer {
    background-color: #f0f0f0;
    color: #777777;
    padding: 15px 0px;
    font-size: 13px;
}

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

/* ====================== Custom xlg size ===================== */
    @media screen and (min-width: 1400px) {
        /*Extra Large styles*/
         .product-card>div:hover #orcar {
           top: 217px;
           left: 13px; 
        }
        .product-card>div a {
            top: 250px;
            left: 50px;
        }

        .product-card>div:hover a {
            top: 245px;
            left: 35px;            
        }
       
    }

/* ===================== Bootstrap lg size ===================== */
    @media screen and (min-width: 1200px) and (max-width: 1399px) {
        /*Big Screens styles*/
        .product-card>div a {
            top: 250px;
            left: 50px;
        }

        .product-card>div:hover a {
            top: 245px;
            left: 35px;            
        }
    }

/* ===================== Bootstrap md size ===================== */
    @media screen and (min-width: 992px) and (max-width: 1199px) {
        /*Standard Screens styles*/
        .product-card>div a {
            left: 20px;
        }

        .product-card>div:hover a {
            left: 5px;            
        }
        
        .product-card span#orcar{
            left: 0px;
            margin-top: -60px;
        }
        .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;
        }
    }

/* ===================== Bootstrap sm size ===================== */
    @media screen and (min-width: 768px) and (max-width: 991px) {
        /*Tablet styles*/
        header 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 span#orcar{
            left: -46px;
            margin-top: -60px;
        }

        .product-card>div a {
            left: -30px;
        }

       /* .product-card>div:hover a {
            left: -15px; 
            margin-top: -59px;

        }
        */
        .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: center;
        }

        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 span#orcar {
            padding: 35px 0px;
            float: none;
            position: initial;
            border-radius: 0;
            width: 30%;
            height: 75px;
            margin-top: -75px;
        }

        .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>div:hover #orcar  {            
            width: 100%;
            height: 40px;
            padding: 10px 15px;
        }

        .product-card p {
            margin-right: 20px;
        }

        .product-card h2 {
            margin: 40px 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;
        }
    }

/* POP UP ENCERRAMENTO */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: RGB(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}

/* Modal Content/Box */

.modal-content {
  background-color: #fefefe;
  font-family: Oswald, sans-serif;
  font-size: 1.5rem;
  text-align: justify;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 40%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #000;
  float: right;
  font-size: 28px;
  font-weight: bold;
  padding-left: 10px;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
} 

/* Modal Content/Box Smartphone */
@media screen and (min-width: 1px) and (max-width: 767px) {
.modal-content {
  background-color: #fefefe;
  font-family: Oswald, sans-serif;
  font-size: 1.5rem;
  text-align: justify;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 75%; /* Could be more or less, depending on screen size */
}

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