body, h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans',sans-serif;
    color: #000;
    font-weight: 400;
}

.grid-container{padding:0; max-width: 40rem;}

h5, .h5 {
    font-size: 1.0625rem;
    line-height: 1;
    margin-top: 0;
    margin-bottom: 0rem;
    font-weight: 300;
}
#menuLeft h5{font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem;}
h2, .h2 {
    font-size: 1.5rem;
    line-height: 1.4;
    margin-top: 0.5;
    margin-bottom: 0.5rem;
    font-weight: 700;
}
a{color:#000;}
input{margin-bottom: 0;}
[type='file'], [type='checkbox'], [type='radio'] {
    margin: 0 0 0.5rem;
}

.alert-box{ 
   background-color: #f7e4e1;;
    text-align:center;
    color: #ce4646;
    position: relative;
    margin: 0 0 1rem 0;
    padding: 1rem;
    border: 1px solid rgba(10, 10, 10, 0.25);
    border-radius: 0;}

.success-box {
    background-color: #e1faea;
    text-align:center;
    color:green;
    position: relative;
    margin: 2rem 0;
    padding: 1rem;
    border: 1px solid rgba(10, 10, 10, 0.25);
    border-radius: 0;
}

.table{display:table; width:100%; height:100%}
.tablecell{display:table-cell; width:100%; vertical-align:middle;}
.align-left{text-align: left;}
.align-center{text-align: center;}
.align-right{text-align: right;}
.no-margin{margin:0;}
.hidden{display:none;}

.home{ background-image: url(images/bg-home.jpg);
       background-repeat: no-repeat;
       background-size: cover;
       background-position: center center;
}

.button.login {
    padding: 0.5rem 0.5rem;
    max-width: 5rem;
    border-radius: 1rem;
    background: #fff;
    color: #25619F;
}
.button.login img{width:80%; margin-bottom: 0.5rem;}

/*HEADER*/
.header-title{ text-align: center; background-size: cover; background-repeat: no-repeat; padding: 2rem 0; min-height: 160px; background-color: #004697; background-position-x: center; background-position-y: center; }
.header-title h1{font-size: 2rem; font-weight: 700; color:#fff; text-shadow: 0px 2px 12px #000;}
.header-title h1 span{display:block; font-size: 1.5rem; font-weight: 300;}

.lang{position:absolute; top:0.6rem; right:1rem; width: 30px; height:30px;  border: solid 2px #fff;}

ul.languages{list-style: none; padding:0; margin: 1rem; width:100%; text-align: left;}
ul.languages li{display:inline-block; width:3rem; margin: 1rem 0.5rem 1rem 0.5rem;}

ul.languages li.disable img{filter: opacity(20%);}




.user-log{position:relative; display: block; background: #333;}
.user-log .button{margin-bottom: 0;}
.user-log .pdf-file{background-color: #63A7CB; padding: 0.5em 1em;font-size: 0.9rem; margin-top: 0.5em;}
.user-log .pdf-file [type='file'] {margin: 0!important; width: 95%!important;display:inline-block; overflow:hidden;}
.user-log .pdf-file span {color:#fff!important; display:block; font-size: 0.8rem!important;}

/*HEADER*/

/*TABS*/
.tabs {
    border-bottom: 6px solid #e6e6e6;
    text-align: center;
    padding: 10px 0;
}
.tabs-title {
    float: none;
    display: inline-block;
    position:relative;
}
.tabs-title > a {
    display: block;
    padding: 0.8rem 1.5rem;
    font-size: 1.0625rem;
    line-height: 1;
    color: #000;
    font-weight: 700;
    border-radius: 10px;
}

.tabs-title a.disable {
    color: #ccc;
    text-decoration:line-through;
}


.tabs-title > a:focus, .tabs-title > a[aria-selected='true'] {
    background: #333;
    color: #fff;
}

.tabs-content h3 {
    padding: 0.5rem 0.625rem 0.625rem;
    background: #666;
    color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-bottom: 0;
}
.tabs-content h2 {
    padding: 0.5rem 0.625rem 0.625rem;
    background: #888;
    color: #fff;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-bottom: 1rem;
    margin-bottom: -0.5rem;
}
.tabs-panel{position:relative;}

.nav-top{position:relative; text-align: center; border-bottom:solid 2px #eee;}

.fila, .title-fila{position:relative;}
.fila div{ text-align: right; padding: 1rem 0.5rem; border-top: solid 1px #ccc;}
.fila div.small-8 { text-align: left!important; padding-left: 0;}
.fila div.small-8 div { text-align: left!important; padding-left: 0;}
.fila div.eye{ padding: 1rem 0!important;}
.fila input {margin: 0;}
.fila h5{margin: 2px 0 0 0;}
.fila a .fa-eye{margin-left: 0;}
.fila .price div{display: inline-block;}
.fila div div {border-top: none; padding:0;}

.fila div div.divProductes { display:inline-block!important;;}


.tabs-title a.disable{
    background: url(images/bg-disable-2.png) 0 0 ;
}
.tabs-title > a.disable:focus, .tabs-title > a.disable[aria-selected='true'] {
    background: url(images/bg-disable-2.png) 0 0 ;
    color: #666;
}
.tabs-content .title-fila.disable h3 {
    background: url(images/bg-disable-3.png) 0 0 ;
}
.fila.disable {
    background: url(images/bg-disable.png) 0 0 ;
}
.fila.disable h5, .fila.disable .price, .fila.disable .eye a {
    color: #ccc;
    text-decoration:line-through;
}

.fila .divProductes:after{
    display:none;
    width:1rem;
    height:1rem;
    content: "";
    background-image: url(images/cog-solid.svg);
    background-size: cover;
    vertical-align: middle;
}
.fila .divProductes:focus:after { }

.fila .divProductes:focus:after {
    display:inline-block;
    animation-name: spin;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
    margin-left: 10px;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

.admin-user{position:absolute; text-align: right; z-index: 10;filter: opacity(0%);transition-duration: 1s;}
.title-fila:hover .admin-user{filter: opacity(100%);transition-duration: 1s;}

.fila:hover .admin-user{filter: opacity(100%);transition-duration: 1s;}
.fila:hover {background: #FEF4E4;}
.admin-user a{border-radius:50%; width:28px; height:28px; text-align: center; line-height: 28px; display:inline-block; color:#fff;}
.admin-user a.borrar{background-color: red; float:right;}
.admin-user a.editar{background-color: green;}
.admin-user a.mover{background-color: #888; float:left;}

.admin-user a.editar.addButton {background-color: #ce4646; display:inline-block; width:auto; border-radius: 10px; padding: 0 10px;}
.admin-user a.editar.addSection {background-color: #25619F; display:inline-block; width:auto; border-radius: 10px; padding: 0 10px;}
.admin-user a.editar.addProduct {background-color: green; display:inline-block; width:auto; border-radius: 10px; padding: 0 10px;}



.fila .admin-user{left:0; top:-24px; right:0; bottom:auto; border-bottom:none; padding: 6px; background: #FEF4E4; }
.title-fila .admin-user{top:-24px; left:0; right:0; background: #FEF4E4;}
.header-title .admin-user{top:0; left:0; right:0; bottom:0; text-align: center;}

.nav-top .admin-user{
    display:inline-block; 
    position:relative;
    filter: opacity(100%);
    text-align: center;
    padding: 0.5rem 1rem 1.5rem 1rem;
    background: #eee;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px; }

.img-product{position:relative;}

.img-product .nav-top{position:absolute; border:none; text-align: center; top:2rem; left:0; right:0;}
.img-product .nav-top .admin-user {
    display: inline-block;
    position: relative;
    filter: opacity(100%);
    text-align: center;
    padding: 0.5rem 1rem 1rem 1rem;
    background: #eee;
    border-radius: 10px;
}
.header-title .admin-user a:hover{box-shadow: 0 0 0 6px #fff;}
.img-product .nav-top .admin-user a:hover{box-shadow: 0 0 0 6px #fff;}

.tabs-title .admin-user{
    position:absolute;
    top:0; left:0;
    right:0;
    text-align: center;
    filter: opacity(0%);
    transition-duration: 1s;
    border-radius: 10px;
    height:1px;
    overflow: hidden;
    padding: 0;
    max-height: 40px;
}
.tabs-title:hover .admin-user{background: #FEF4E4; filter: opacity(100%); transition-duration: 1s; height:auto; padding: 0.5rem; top:-80%; text-align: center; }

.tabs-title .admin-user a{border-radius:50%; width:18px; height:18px; text-align: center; line-height: 18px; display:inline-block; color:#fff; margin: 0 0.7rem;}
.tabs-title .admin-user a.borrar{background-color: red; float:none; margin-right: 0;}
.tabs-title .admin-user a.editar{background-color: green;}
.tabs-title .admin-user a.mover{background-color: #888; float:none; margin-left: 0;}

.tabs-title .admin-user a .fas{font-size:11px; line-height: 13px;}

.header-title .nav-top{border:none;}
.header-title .nav-top .admin-user{ background: none; padding:0;}


/*TABS*/

/*CHECKBOX*/
/* Customize the label (the container) */
.cont-check {
    display: inline-block;
    float:right;
    position: relative;
    padding-left: 0px;
    margin-right: 60px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 17px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.cont-check input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 2px;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #fff;
    border:solid 1px #25619F;
}

/* On mouse-over, add a grey background color */
.cont-check:hover input ~ .checkmark {
    background-color: #25619F;
}

/* When the checkbox is checked, add a blue background */
.cont-check input:checked ~ .checkmark {
    background-color: #25619F;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.cont-check input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.cont-check .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.tabs-title .admin-user .cont-check{display:inline-block; width:18px; margin: 3px 0.5rem; float:none; vertical-align: top;}

.tabs-title .admin-user .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #fff;
    border: solid 1px #25619F;
}
.tabs-title .admin-user .cont-check .checkmark:after {
    left: 6px;
    top: 2px;
}
/* FIN CHECKBOX*/


body.public .user-log{display:none;} 
body.public .nav-top {border-bottom: none;}
body.public .admin-user{display:none;} 
body.public .fila input {display:none;} 
body.public .header-title  .admin-user {display:none!important;} 
body.public .off-canvas .admin-user {display:none!important;}
body.public ul.languages {text-align: center;}
body.public ul.languages li{display:block;}
body.public .idiomas{display:none!important;} 
body.public ul.languages li.disable {display:none!important;}

/*TABLA*/
table td{position:relative;}
tbody td:last-child {text-align: right;}
tbody td:nth-child(2n) {text-align: right!important;}
table.listado td{text-align: right;}
table.listado td:first-child{text-align: left;;}
/* FIN TABLA*/


.position-left {
    top: 0;
    left: 0;
    height: 100%;
    overflow-y: auto;
    width: 100%;
    background: #fff;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%); }
.off-canvas-content .off-canvas.position-left {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%); }
.off-canvas-content .off-canvas.position-left.is-transition-overlap.is-open {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0); }
.off-canvas-content.is-open-left.has-transition-push {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%); }
.position-left.is-transition-push {
    -webkit-box-shadow: inset -13px 0 20px -13px rgba(10, 10, 10, 0.25);
    box-shadow: inset -13px 0 20px -13px rgba(10, 10, 10, 0.25); }

.button.close{ width: 40px; position:absolute; top:1rem; right:1rem; background: #000;}

.position-right {
    top: 0;
    right: 0;
    height: 100%;
    overflow-y: auto;
    width: 130px;
    background: #fff;
    -webkit-transform: translateX(130px);
    -ms-transform: translateX(130px);
    transform: translateX(130px); }
.off-canvas-content .off-canvas.position-right {
    -webkit-transform: translateX(130px);
    -ms-transform: translateX(130px);
    transform: translateX(130px); }
.off-canvas-content .off-canvas.position-right.is-transition-overlap.is-open {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0); }
.off-canvas-content.is-open-right.has-transition-push {
    -webkit-transform: translateX(-130px);
    -ms-transform: translateX(-130px);
    transform: translateX(-130px); }
.position-right.is-transition-push {
    -webkit-box-shadow: inset 13px 0 20px -13px rgba(10, 10, 10, 0.25);
    box-shadow: inset 13px 0 20px -13px rgba(10, 10, 10, 0.25); }

.sticky.is-stuck {
    position: fixed!important;
    z-index: 100;
    width: 100%;
}

h2.subtitle{font-size: 1rem; font-weight: 700;}
.gratis{ position: absolute; top:1rem; right:1rem; width:80px; height:80px;}
.gratis img{ width:80px; height:80px;}
.free{ background: #FFA606; color:#fff; text-align: center;}
.free h3{color:#fff; margin: 0.4rem auto;}

.video-btn{ position: absolute; top:1.5rem; left:1rem; width:80px; height:80px; text-align: center;}
.video-btn a{color:#bf0311;}
.video-btn a span{font-size:10px; text-transform: uppercase;}


.contact{ background: #666; padding-top: 0.5rem; color:#fff;}
.contact .info{ font-size:10px; line-height: 10px; margin: 0px 0 10px 0;}
.contact h6{color:#fff;}
.contact a, .contact button{ margin:0; background: #888;}

.suggestion {color: #ce4646; display:inline-block; margin-left: 0.5rem;}