/* --------------------------------------------------------------------------------
        ESTILOS PARA LA SECCION DE USUARIOS (secccion  privada de clientes)
 * -------------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------------
 *                              Tipografías
 * --------------------------------------------------------------------------------*/

@font-face {
    font-family: 'Work Sans Light';
    src: url('/fonts/worksans/WorkSans-Light.otf');
    src: url('/fonts/worksans/WorkSans-Light.ttf');
}

@font-face {
    font-family: 'Work Sans Regular';
    src: url('/fonts/worksans/WorkSans-Regular.otf');
    src: url('/fonts/worksans/WorkSans-Regular.ttf');
}

@font-face {
    font-family: 'Work Sans SemiBold';
    src: url('/fonts/worksans/WorkSans-SemiBold.otf');
    src: url('/fonts/worksans/WorkSans-SemiBold.ttf');
}

@font-face {
    font-family: 'Work Sans Bold';
    src: url('/fonts/worksans/WorkSans-Bold.otf');
    src: url('/fonts/worksans/WorkSans-Bold.ttf');
}


@font-face {
    font-family: 'Playlist Script';
    src: url('/fonts/playlist/Playlist-Script.otf');
    src: url('/fonts/playlist/Playlist-Script.ttf');
}


@font-face {
    font-family: 'PlayfairDisplay-Black';
    src: url('/fonts/playfair/PlayfairDisplay-Black.otf');
    src: url('/fonts/playfair/PlayfairDisplay-Black.ttf');
}

@font-face {
    font-family: 'PlayfairDisplay-Regular';
    src: url('/fonts/playfair/PlayfairDisplay-Regular.otf');
    src: url('/fonts/playfair/PlayfairDisplay-Regular.ttf');
}

@font-face {
    font-family: 'PlayfairDisplay-Italic';
    src: url('/fonts/playfair/PlayfairDisplay-Italic.otf');
    src: url('/fonts/playfair/PlayfairDisplay-Italic.ttf');
}

@font-face {
    font-family: 'PlayfairDisplay-BlackItalic';
    src: url('/fonts/playfair/PlayfairDisplay-BlackItalic.otf');
    src: url('/fonts/playfair/PlayfairDisplay-BlackItalic.ttf');
}



.font-worksans-light{
    font-family: 'Work Sans Light', sans-serif;    
}


/* tipografía principal */
.font-worksans-regular{
    font-family: 'Work Sans Regular', sans-serif;    
}

.font-worksans-semibold{
    font-family: 'Work Sans SemiBold', sans-serif;    
}

.font-worksans-bold{
    font-family: 'Work Sans Bold', sans-serif;    
}

.font-playlist{
    font-family: 'Playlist Script', 'Amatic SC', cursive;;
}


.font-playfair-regular{
    font-family: 'PlayfairDisplay-Regular', sans-serif;
}

.font-playfair-italic{
    font-family: 'PlayfairDisplay-Italic', sans-serif;
}



.color-black, a.color-black{
    color: rgb(0, 0, 0);
}

.color-gray{
    color: rgb(117, 117, 117);
}

.color-aqua{
    color: rgb(0, 205, 205);
}

.color-pink{
    color: rgb(231, 102, 231);
}



.size-12{
    font-size: 12px;
}

.size-16{
    font-size: 16px;
}

.size-18{
    font-size: 18px;
}

.size-22{
    font-size: 22px;
}

.size-28{
    font-size: 28px;
}

.size-32{
    font-size: 32px;
}
.size-36{
    font-size: 36px;
}

.size-40{
    font-size: 40px;
}

.size-50{
    font-size: 50px;
}


.size-82{
    font-size: 82px;
}

.line-height-22{
    line-height: 22px;
}

.line-height-28{
    line-height: 28px;
}

.line-height-34{
    line-height: 34px;
}

.line-height-50{
    line-height: 50px;
}

.line-height-09{
    line-height: 0.9em;
}


.letter-spacing-2{
    letter-spacing: 2px;
}

.font-weight-300{
    font-weight: 300;
}

body{
    font-family: 'Work Sans Regular', sans-serif;
    font-size: 14px;
    background-image: url("/img/ecommerce/background-lines.jpg");
    background-size: 100%;
    background-repeat: repeat-y;
    color: #000000;
}

  
a{
    text-decoration: none !important;
    color:rgb(231, 102, 231);
}
a:hover, a.selected{
    color:rgb(35, 210, 210);
}

.m-top-less-25{margin-top: -25px}

.m-top-15{margin-top: 15px}
.m-top-20{margin-top: 20px}
.m-top-25{margin-top: 25px}

.m-top-30{
    margin-top: 30px;
}

.m-top-50{
    margin-top: 50px
}
.m-top-56{
    margin-top: 56px
}
.m-top-70{margin-top: 70px}
.m-top-100{margin-top: 100px}

.m-top-100{
    margin-top: 100px
}

.m-top-150{
    margin-top: 150px;
}

.m-top-180{
    margin-top: 180px;
}


.m-bottom-30{
    margin-bottom: 30px;
}

.m-bottom-100{
    margin-bottom: 100px;
}


.m-left-10{
    margin-left: 10px;
}

.m-left-15{
    margin-left: 15px;
}

.m-left-22{
    margin-left: 22px;
}

.m-right-15{
    margin-right: 15px;
}

.img-main{
    height: 440px;
    overflow: hidden;
}

figure.overflow-hidden{
    overflow: hidden;
}

.pad-15{
    padding: 15px;
}

.pad-50{
    padding: 50px;
}


.pad-left-10,
.col-md-4.pad-left-10 {
    padding-left: 10px;
}

.pad-right-10,
.col-md-4.pad-right-10 {
    padding-right: 10px;
}



.pad-left-15,
.col-md-6.pad-left-15 {
    padding-left: 15px;
}

.pad-left-45,
.col-md-6.pad-left-45 {
    padding-left: 45px;
}

.pad-right-15,
.col-md-6.pad-right-15{
    padding-right: 15px;
}

.pad-right-45,
.col-md-6.pad-right-45{
    padding-right: 45px;
}

.pad-left-30{
    padding-left: 30px;
}

.pad-right-30{
    padding-right: 30px;
}

.pad-top-100{
 padding-top: 100px;
}

.pad-bottom-0{
    padding-bottom: 0px;
}

.pad-bottom-60{
    padding-bottom: 60px;
}


.full-width{width: 100%}

.margin-none{
    margin: 0 !important;
}

.margin-top-none{
    margin-top: 0 !important;
}


.min-h-300{
    min-height: 300px;
}





body{
    font-family: 'Work Sans Regular', sans-serif;
    font-size: 16px;
    background-image: url("/img/ecommerce/background-lines.jpg");
    background-size: 100%;
    background-repeat: repeat-y;
    color: #000000;
}


/* --------------------------------------------------------------------------------
 *                              Modales
 * --------------------------------------------------------------------------------*/



 /* Encabezado  del modal de login, de  un rosa ligero  */
 .login-container .block-flat .header, 
.sign-up-container .block-flat .header, 
.forgotpassword-container .block-flat .header{
    background: rgb(244, 197, 244);             
    border-bottom: 1px solid rgb(233, 139, 233);
}

.login-container .block-flat .header .logo-img,
.sign-up-container .block-flat .header .logo-img, 
.forgotpassword-container .block-flat .header .logo-img{
    height: 100px;
}




/* --------------------------------------------------------------------------------
 *                              Botones
 * --------------------------------------------------------------------------------*/


.btn-default {    
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Work Sans SemiBold', sans-serif;
    padding: 12px 30px;
    font-size: 14px;
    outline: none !important;
   box-shadow: none;
}


.btn-primary {
    color: #fff !important;
    background-color: rgb(54, 177, 187) !important;
    border-color: rgb(54, 177, 187) !important;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Work Sans SemiBold', sans-serif;
    padding: 12px 30px;
    outline: none !important;
   box-shadow: none;
   font-size: 14px;
}

.btn-primary.green  {
    color: #fff;
    background-color: rgb(99, 224, 223) !important;
    border-color: rgb(99, 224, 223) !important;
    text-transform: uppercase;
    border-radius: 0;
    font-family: 'Work', sans-serif;
    letter-spacing: 1.2px;
    font-size: 18px;
}

.btn-primary.gray  {
    color: #fff;
    background-color: rgb(206, 206, 206) !important;
    border-color: rgb(206, 206, 206) !important;
    text-transform: uppercase;
    border-radius: 0;
    font-family: 'Bebas Neue Bold', sans-serif;
    letter-spacing: 1.2px;
    font-size: 18px;
}

.btn-primary.pink  {
    color: #fff;
    background-color: rgb(231, 102, 231)!important;
    border-color: rgb(231, 102, 231)!important;
}

.btn-primary.gold{
    background: rgb(255,229,121);
    background: linear-gradient(90deg, rgba(255,229,121,1) 0%, rgba(216,170,61,1) 40%, rgba(207,157,48,1) 100%);
    color: black !important;
    background-color: rgb(216,170,61) !important;
    border-color: rgb(255,229,121) !important;
}


.btn-primary.transparent{
    background: transparent !important;
    border-color: transparent !important;
    color: black !important;    
    transition:background 1s linear;
    -webkit-transition: background 1s;
}


.btn-primary.white{
    background: white !important;
    border-color: white !important;
    color: black !important;    
    transition:background 1s linear;
    -webkit-transition: background 1s;
}
.btn-primary.white:hover, 
.btn-primary.transparent:hover{
    background: black !important;
    border-color: black !important;
    color: white !important;    
}



/***************** LOADING *****************/
/* PANEL DEL CARGANDO / PROCESANDO */
#loading {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
    opacity: 0.7;
    background-color: #fff;
    z-index: 9999;
    text-align: center;
    display: none;
}

#loading-image {
    position: absolute;
    top: 35%;
    left: 45%;
    z-index: 100;
    color: #00D2D4;
    font-size: 150px;
}