body{
    font-family: 'Quicksand', sans-serif;
}
.nav-links{
    font-weight: bold;
}
.paddedtext{
    letter-spacing: .3em;
}
.shine{
    background: -webkit-linear-gradient(45deg, #000000 0%, #d1d1d1 13%, #000000 23%, #000000 23%, #d1d1d1 36%, #000000 47%, #d1d1d1 62%, #000000 75%, #d1d1d1 86%, #000000 99%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Nunito', sans-serif;
}
.lato-light{
    font-family: 'Lato', sans-serif;
}
.b-shadow{
    /*-webkit-filter: drop-shadow(0px 4px 8px #5e5e52);*/

    -webkit-appearance: none;
}
.card{
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.container-extra{
    padding-top: 4em;
}
.main-buttons{
    margin-top: 3em;
}
.main-info{
    /*background:
        linear-gradient(
          rgba(233, 233, 233, 0.85),
          rgba(233, 233, 233, 0.85)
        ),
        url(../images/main-bg.jpg);*/
    background-image: url(../images/main-bg2.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 2em;
    padding-top: 6em;
    padding-bottom: 10em;
    height: 100%;
}
.module-table{
    padding-top: 3em;
}
.servicios{
    padding-top: 3em;
    background:
        linear-gradient(
          rgba(255, 255, 255, 0.85),
          rgba(255, 255, 255, 0.85)
        ),
        url(../images/servicios-bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 10em;
    height: 100%;
}
.servcont{
    padding-top: 2em;
}
.module{
    padding-top: 8em;
}
.conocenos-logo{
    padding-top: 3em;
    margin-left: 20%;
    margin-right: 20%;
    padding-bottom: 3em;
}
.conocenos{
    padding-top: 3em;
    padding-bottom: 10em;
}
.cards-servicios{
    margin-top: 5em;
}
.marcas{
    padding-top: 5em;
}
.block-marca{
    padding-top: 4em;
    padding-bottom: 4em;
    margin: .5em;
}
/*.block-marca:hover {
    -webkit-filter: blur(5px);
}*/
.rayban{
    background:
        linear-gradient(
          rgba(0, 0, 0, 0.38),
          rgba(0, 0, 0, 0.38)
        ),
        url(../images/marcas/rayban-bg.jpg);
    background-size: cover;
    padding-top: 8em;
}
.rayban:hover{
    background:
        linear-gradient(
          rgba(0, 0, 0, 0.50),
          rgba(0, 0, 0, 0.50)
        ),
        url(../images/marcas/rayban-bg.jpg);
    background-size: cover;
}
.edit-info{
    padding-top: 3em;
}
.container-table-mobile{
    padding-left: 2em;
    padding-right: 2em;
    text-align: center;
}
.michael{
    background:
        linear-gradient(
          rgba(0, 0, 0, 0.38),
          rgba(0, 0, 0, 0.38)
        ),
        url(../images/marcas/michael-bg.jpg);
    background-size: cover;
    padding: 10.4em 0;
}
.michael:hover{
    background:
        linear-gradient(
          rgba(0, 0, 0, 0.50),
          rgba(0, 0, 0, 0.50)
        ),
        url(../images/marcas/michael-bg.jpg);
    background-size: cover;
}
.blick-foot{
    font-size: 2.5em;
}
.dolce{
    background:
        linear-gradient(
          rgba(0, 0, 0, 0.38),
          rgba(0, 0, 0, 0.38)
        ),
        url(../images/marcas/dolce-bg.jpg);
    background-size: cover;
    padding:9em 0;
}
.dolce:hover{
    background:
        linear-gradient(
          rgba(0, 0, 0, 0.50),
          rgba(0, 0, 0, 0.50)
        ),
        url(../images/marcas/dolce-bg.jpg);
    background-size: cover;
}
.armani-exchange{
    background:
        linear-gradient(
          rgba(0, 0, 0, 0.38),
          rgba(0, 0, 0, 0.38)
        ),
        url(../images/marcas/armani_exchange.png);
    background-size: cover;
    background-position: center;
    padding: 7.5em 0;
}
.armani-exchange:hover{
    background:
        linear-gradient(
          rgba(0, 0, 0, 0.50),
          rgba(0, 0, 0, 0.50)
        ),
        url(../images/marcas/armani_exchange.png);
    background-size: cover;
    background-position: center;
}
.prada{
    background:
        linear-gradient(
          rgba(0, 0, 0, 0.38),
          rgba(0, 0, 0, 0.38)
        ),
        url(../images/marcas/prada-bg.jpg);
    background-size: cover;
    padding-top: 10em;
}
.prada:hover{
    background:
        linear-gradient(
          rgba(0, 0, 0, 0.50),
          rgba(0, 0, 0, 0.50)
        ),
        url(../images/marcas/prada-bg.jpg);
    background-size: cover;
}
.armani{
    background:
        linear-gradient(
          rgba(0, 0, 0, 0.38),
          rgba(0, 0, 0, 0.38)
        ),
        url(../images/marcas/armani-bg.jpg);
    background-size: cover;
    padding-top: 8em;
}
.armani:hover{
    background:
        linear-gradient(
          rgba(0, 0, 0, 0.50),
          rgba(0, 0, 0, 0.50)
        ),
        url(../images/marcas/armani-bg.jpg);
    background-size: cover;
}
.oliver-peoples{
    background:
        linear-gradient(
          rgba(0, 0, 0, 0.38),
          rgba(0, 0, 0, 0.38)
        ),
        url(../images/marcas/oliverpeoples.png);
    background-size: cover;
    background-position: center;
}
.oliver-peoples:hover{
    background:
        linear-gradient(
          rgba(0, 0, 0, 0.50),
          rgba(0, 0, 0, 0.50)
        ),
        url(../images/marcas/oliverpeoples.png);
    background-size: cover;
    background-position: center;
}
.tory-burch{
    background:
        linear-gradient(
          rgba(0, 0, 0, 0.38),
          rgba(0, 0, 0, 0.38)
        ),
        url(../images/marcas/tory-burch.png);
    background-size: cover;
}
.tory-burch:hover{
    background:
        linear-gradient(
          rgba(0, 0, 0, 0.50),
          rgba(0, 0, 0, 0.50)
        ),
        url(../images/marcas/tory-burch.png);
    background-size: cover;
}
.tory-burch > img
{
    transform:scale(0.7);
}
.burberry{
    background:
        linear-gradient(
          rgba(0, 0, 0, 0.38),
          rgba(0, 0, 0, 0.38)
        ),
        url(../images/marcas/burberry-bg.jpg);
    background-size: cover;
    padding-top: 10em;
}
.burberry:hover{
    background:
        linear-gradient(
          rgba(0, 0, 0, 0.50),
          rgba(0, 0, 0, 0.50)
        ),
        url(../images/marcas/burberry-bg.jpg);
    background-size: cover;
}

.form-control{
    border-radius: 0em;
    opacity: .9;
    border-width: medium;
    font-weight: bold;
    color: black;
    padding-top: 1em;
    padding-bottom: 1em;
}

.form-edit-info{
    border-style: none;
    border-width: 0em;
}

.form-consulta{
    border-color: black;
    opacity: 1;
    border-width: thin;
}

.table-info{
    border-style: solid;
    border-color: black;
    border-radius: 0px;
    border-width: medium;
    background-color: transparent;
}
.table-info-m{
    border-style: solid;
    border-color: black;
    border-radius: 0px;
    border-width: medium;
    background-color: transparent;
}

.rowinfo{
    padding-top: 2em;
    padding-bottom: 2em;
}
.lentes-oft{
    margin-top: -1.4em;
}

.card-adapta{
    margin-top: -0.6em;
}

/*------------------------------------------------flip--------------------*/
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
	-webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
}


/* flip speed goes here */
.flipper {
	-webkit-transition: 0.6s;
            transition: 0.6s;
	-webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.front, .back {
 -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
 -webkit-transition: 0.6s;
         transition: 0.6s;
 -webkit-transform-style: preserve-3d;
         transform-style: preserve-3d;
 position: absolute;
 top: 0;
 left: 0;
 }

 /*  UPDATED! front pane, placed above back */
.front {
 z-index: 2;
 -webkit-transform: rotateY(0deg);
         transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
 -webkit-transform: rotateY(-180deg);
         transform: rotateY(-180deg);
}
/*------------------------------------------------flip--------------------*/

.contacto{
    padding-top: 10em;

}

.contactform{
    background:
        linear-gradient(
          rgba(233, 233, 233, 0.85),
          rgba(233, 233, 233, 0.85)
        ),
        url(../images/contacto-bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 10em;
    padding-bottom: 10em;
}
.invert{
    filter: invert(100%);
    width: 15em;
}

.ctalog-marcas{
    margin-top: 5em;
}
.info-group{
    padding-bottom: 7em;
}
#googleMap{
    width: 100%;
    height: 400px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.footer-container{
    padding-top: 2em;
    margin-left: 2em;
    margin-right: 2em;
}
.btn {
    border-radius: 0px;
    border-width: medium;
    font-weight: bolder;
}
.mainsb{
    width: 100%;
}
.info-admin{
    padding-top: 4em;
}
.card-back{
    font-weight: bold;
}


@media (min-width: 768px) and (max-width: 1280px) {
    .nav-to-center{
        padding-left: 22em;
    }
}

@media (min-width: 1290px){
    .nav-to-center{
        padding-left: 26em;
    }
}

@media (min-width: 768px){
    .conocenos-subtitle{
        font-size: 1.7em;
    }

    .conocenos-text{
        font-size: 1.5em;
    }
    .fecha-input{
        padding-right: 5em;
    }
    .container-extra{
        margin-left: 20%;
        margin-right: 20%;
    }
    .main-title{
        font-size: 15em;
    }
    .main-subtitle{
        font-size: 3em;
    }
    .conocenos-brand-title{
        font-size: 10em;
    }
    .card-servicio{
        width: 15em;
        height: 15em;
    }
    .card-back{
        padding-top: 6em;
        margin-left: 0.1em;
    }
    .card-top-l{
        padding-top: 12em;
        padding-left: 12em;
    }
    .card-top-c{
        margin-left: -5em;
    }
    .card-top-r{
        margin-top: 13em;
        margin-left: -10em;
    }
    .card-bot-l{
        padding-left: 18em;
    }
    .card-bot-r{
        margin-left: -10em;
    }
    .icon-servicio{
        margin-left: -.9em;
        margin-top: -.6em;
        width: 10em;
    }
    .consulinfo{
        padding-top: 2em;
        padding-left: 10em;
        padding-right: 10em;
        font-size: 1.4em;
    }
    .consulta{
        padding-top: 7em;
    }
    .form-button-consulta{
        border-width: thin;
        width: 30%;
        padding-top: 1em;
        padding-bottom: 1em;
    }
    .admin{
        padding-top: 20em;
    }
    .adminform{
        padding-left: 5em;
        padding-right: 5em;
    }
    .form-button{
        width: 20%;
        padding-top: 1em;
        padding-bottom: 1em;
        font-weight: bold;
        border-color: grey;
        border-width: thin;
    }

    .form-button-newpaciente{
        width: 60%;
        padding-top: 1em;
        padding-bottom: 1em;
        font-weight: bold;
        border-color: grey;
        border-width: thin;
    }
}
@media (max-width: 768px) {
    .container-extra{
        padding-top: 8em;
    }
    .main-title{
        font-size: 8em;
    }
    .conocenos-brand-title{
        font-size: 5em;
    }
    .center-align{
        padding-left: 20%;
        padding-top :2em;
    }
    .card-servicio{
        width: 15em;
        height: 15em;
    }
    .card-back{
        padding-top: 5em;
        margin-left: 0.3em;
    }
    .icon-servicio{
        margin-left: -.4em;
        margin-top: -.3em;
        width: 9em;
    }
    .consulinfo{
        padding-top: 2em;
        padding-left: 1em;
        padding-right: 1em;
    }
    .consulta{
        padding-top: 5em;
    }
    .form-button-consulta{
        border-width: thin;
        width: 60%;
        padding-top: 1em;
        padding-bottom: 1em;
    }
    .titleconuslta{
        font-size: 1em
    }
    .form-button{
        width: 60%;
        padding-top: 1em;
        padding-bottom: 1em;
        font-weight: bold;
        border-color: grey;
        border-width: thin;
    }
    .mainsb{
        font-size: 0.35em;
    }
}