Instalar CODIGOS HTML Y CSS
vamos a > Personalizar > > CSS y pegaremos el código css.
/* ------- ADDITIONAL STYLES ------ */
.ads-slot{
text-align: center;
width: 100%;
clear: both;
padding: 20px 0;
}
.ads-slot img{
max-width: 100%;
height: auto;
}
.nopadding{
padding: 0;
}
.style-select{
left: -250px;
top: 120px;
z-index: 999;
position: fixed;
width: 250px;
webkit-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
.stalabel{
cursor: pointer;
position: absolute;
top: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
margin-bottom: 0;
padding: 12px 16px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
-webkit-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
width: 48px;
right: -48px;
webkit-transition: all 300ms ease-out;
transition: all 300ms ease-out;
background: #fff;
color: #333;
opacity: 0.6;
}
.stalabel:hover,
.style-select.aperto .stalabel{
opacity: 1;
}
.style-select.aperto{
left: 0;
box-shadow: 0 0px 20px rgba(0,0,0,0.19), 0 4px 6px rgba(0,0,0,0.23);
}
.stylepanel .btn{
background: #333;
color: #fff;
}
/*.stylepanel .btn:hover{
background: #65aed0;
color: #fff;
}*/
.stylepanel{
width: 250px;
background: #fff;
color: #333;
padding: 15px;
float: left;
position: relative;
display: block;
}
.style-select.aperto .stylepanel,
.style-select.aperto .stalabel{
background: #fff;
}
.stalabel .fa{
font-size: 18px;
float: left;
}
.style-select .input-group-addon{
background-color: #2a2a2a;
border-color: #323232;
color: #d9d9d9;
}
.demo-signin .badge {
background-color: rgba(255, 255, 255, 0.6);
}
@media (max-width:767px){
.features, .instructions{
margin-top: 10px;
}
.features ul li{
float: left;
clear: both;
list-style:none;
line-height: 2em;
margin: 3px 0;
}
.vfm-biglogo{
font-size: 80px;
width: 50%;
}
}
.instructions{
margin-top: 20px;
}
.instructions p{
margin-bottom: 10px;
}
/*
* A colorselector for Twitter Bootstrap which lets you select a color from a predefined set of colors only.
* https://github.com/flaute/bootstrap-colorselector
*
* Copyright (C) 2014 Flaute
*
* Licensed under the MIT license
*/
/* colorselector dropdown */
.dropdown-colorselector{
float: left;
clear: both;
margin-bottom: 20px;
}
.dropdown-colorselector>.dropdown-stoca {
float: left;
clear: both;
width: 100%;
background: rgba(255,255,255,0.9);
margin: 0;
padding: 0;
display: block;
padding: 6px;
}
/*
.dropdown-colorselector>.dropdown-stoca.pull-right {
right: -7px;
left: auto;
}
*/
.dropdown-colorselector > .dropdown-stoca > li {
display: block;
float: left;
width: 26px;
height: 26px;
margin: 4px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.dropdown-colorselector > .dropdown-stoca > li > .color-btn {
display: block;
width: 26px;
height: 26px;
margin: 0;
padding: 0;
border-radius: 0;
position: relative;
-webkit-transition: all ease 0.1s;
transition: all ease 0.1s;
border: none;
border-top: 6px solid transparent;
border-bottom: 8px solid transparent;
}
/*
.dropdown-colorselector > .dropdown-stoca > li > .color-btn:after {
position:absolute;
right:0;
bottom:-2px; content:'';
border-bottom: 10px solid #333;
border-right: 10px solid transparent;
}*/
.dropdown-colorselector > .dropdown-stoca > li > .color-btn:hover {
text-decoration: none;
opacity: 0.8;
filter: alpha(opacity = 80);
-webkit-transform: scale(1.08);
-ms-transform: scale(1.08);
transform: scale(1.08);
}
/*.dropdown-colorselector > .dropdown-stoca > li > .color-btn.selected:after {
content: "\e013";
font-family: 'Glyphicons Halflings';
display: inline-block;
font-size: 18px;
color: #fff;
position: absolute;
left: 0;
right: 0;
text-align: center;
line-height: 20px;
}*/
.dropdown-colorselector > .dropdown-stoca > li > .color-btn.selected{
-webkit-box-shadow: 0 0 0 1px #333;
box-shadow: 0 0 0 1px #333;
}
.btn-colorselector {
display: inline-block;
width: 20px;
height: 20px;
background-color: #DDD;
vertical-align: middle;
border-radius: 0;
}
.dropdown-stoca.dropdown-caret:before {
border-bottom: 7px solid rgba(0, 0, 0, 0.2);
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
display: inline-block;
left: 9px;
position: absolute;
top: -7px;
}
.dropdown-stoca.dropdown-caret:after {
border-bottom: 6px solid #FFFFFF;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
content: "";
display: inline-block;
left: 10px;
position: absolute;
top: -6px;
}
/*!
* jquery-drawer v3.2.2
* Flexible drawer menu using jQuery, iScroll and CSS.
* http://git.blivesta.com/drawer
* License : MIT
* Author : blivesta (http://blivesta.com/)
*/
.drawer-open{overflow:hidden!important}.drawer-nav{position:fixed;z-index:2;top:0;overflow:hidden;width:16.25rem;height:100%;color:#222;background-color:#fff}.drawer-brand{font-size:1.5rem;font-weight:700;line-height:3.75rem;display:block;padding-right:.75rem;padding-left:.75rem;text-decoration:none;color:#222}.drawer-menu{margin:0;padding:0;list-style:none}.drawer-menu-item{font-size:1rem;display:block;padding:.75rem;text-decoration:none;color:#222}.drawer-menu-item:hover{text-decoration:underline;color:#555;background-color:transparent}.drawer-overlay{position:fixed;z-index:1;top:0;left:0;display:none;width:100%;height:100%;background-color:rgba(0,0,0,.2)}.drawer-open .drawer-overlay{display:block}.drawer--top .drawer-nav{top:-100%;left:0;width:100%;height:auto;max-height:100%;-webkit-transition:top .6s cubic-bezier(.19,1,.22,1);transition:top .6s cubic-bezier(.19,1,.22,1)}.drawer--top.drawer-open .drawer-nav{top:0}.drawer--top .drawer-hamburger,.drawer--top.drawer-open .drawer-hamburger{right:0}.drawer--left .drawer-nav{left:-16.25rem;-webkit-transition:left .6s cubic-bezier(.19,1,.22,1);transition:left .6s cubic-bezier(.19,1,.22,1)}.drawer--left .drawer-hamburger,.drawer--left.drawer-open .drawer-nav,.drawer--left.drawer-open .drawer-navbar .drawer-hamburger{left:0}.drawer--left.drawer-open .drawer-hamburger{left:16.25rem}.drawer--right .drawer-nav{right:-16.25rem;-webkit-transition:right .6s cubic-bezier(.19,1,.22,1);transition:right .6s cubic-bezier(.19,1,.22,1)}.drawer--right .drawer-hamburger,.drawer--right.drawer-open .drawer-nav,.drawer--right.drawer-open .drawer-navbar .drawer-hamburger{right:0}.drawer--right.drawer-open .drawer-hamburger{right:16.25rem}.drawer-hamburger{z-index:4;top:0;display:block;box-sizing:content-box;width:2rem;padding:0;padding:18px .5rem 14px;-webkit-transition:all .6s cubic-bezier(.19,1,.22,1);transition:all .6s cubic-bezier(.19,1,.22,1);-webkit-transform:translateZ(0);transform:translateZ(0);border:0;outline:0;background-color:transparent}.drawer-hamburger:hover{cursor:pointer;background-color:transparent}.drawer-hamburger-icon{position:relative;display:block;margin-top:10px}.drawer-hamburger-icon,.drawer-hamburger-icon:after,.drawer-hamburger-icon:before{width:100%;height:2px;-webkit-transition:all .6s cubic-bezier(.19,1,.22,1);transition:all .6s cubic-bezier(.19,1,.22,1);background-color:#FFCD3C}.drawer-hamburger-icon:after,.drawer-hamburger-icon:before{position:absolute;top:-10px;left:0;content:" "}.drawer-hamburger-icon:after{top:10px}.drawer-open .drawer-hamburger-icon{background-color:transparent}.drawer-open .drawer-hamburger-icon:after,.drawer-open .drawer-hamburger-icon:before{top:0}.drawer-open .drawer-hamburger-icon:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.drawer-open .drawer-hamburger-icon:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);width:1px;height:1px;margin:-1px;padding:0;border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;overflow:visible;clip:auto;width:auto;height:auto;margin:0}.drawer--sidebar,.drawer--sidebar .drawer-contents{background-color:#fff}@media (min-width:64em){.drawer--sidebar .drawer-hamburger{display:none;visibility:hidden}.drawer--sidebar .drawer-nav{display:block;-webkit-transform:none;transform:none;position:fixed;width:12.5rem;height:100%}.drawer--sidebar.drawer--left .drawer-nav{left:0;border-right:1px solid #ddd}.drawer--sidebar.drawer--left .drawer-contents{margin-left:12.5rem}.drawer--sidebar.drawer--right .drawer-nav{right:0;border-left:1px solid #ddd}.drawer--sidebar.drawer--right .drawer-contents{margin-right:12.5rem}.drawer--sidebar .drawer-container{max-width:48rem}}@media (min-width:75em){.drawer--sidebar .drawer-nav{width:16.25rem}.drawer--sidebar.drawer--left .drawer-contents{margin-left:16.25rem}.drawer--sidebar.drawer--right .drawer-contents{margin-right:16.25rem}.drawer--sidebar .drawer-container{max-width:60rem}}.drawer--navbarTopGutter{padding-top:3.75rem}.drawer-navbar .drawer-navbar-header{border-bottom:1px solid #ddd;background-color:#fff}.drawer-navbar{z-index:3;top:0;width:100%}.drawer-navbar--fixed{position:fixed}.drawer-navbar-header{position:relative;z-index:3;box-sizing:border-box;width:100%;height:3.75rem;padding:0 .75rem;text-align:center}.drawer-navbar .drawer-brand{line-height:3.75rem;display:inline-block;padding-top:0;padding-bottom:0;text-decoration:none}.drawer-navbar .drawer-brand:hover{background-color:transparent}.drawer-navbar .drawer-nav{padding-top:3.75rem}.drawer-navbar .drawer-menu{padding-bottom:7.5rem}@media (min-width:64em){.drawer-navbar{height:3.75rem;border-bottom:1px solid #ddd;background-color:#fff}.drawer-navbar .drawer-navbar-header{position:relative;display:block;float:left;width:auto;padding:0;border:0}.drawer-navbar .drawer-menu--right{float:right}.drawer-navbar .drawer-menu li{float:left}.drawer-navbar .drawer-menu-item{line-height:3.75rem;padding-top:0;padding-bottom:0}.drawer-navbar .drawer-hamburger{display:none}.drawer-navbar .drawer-nav{position:relative;left:0;overflow:visible;width:auto;height:3.75rem;padding-top:0;-webkit-transform:translateZ(0);transform:translateZ(0)}.drawer-navbar .drawer-menu{padding:0}.drawer-navbar .drawer-dropdown-menu{position:absolute;width:16.25rem;border:1px solid #ddd}.drawer-navbar .drawer-dropdown-menu-item{padding-left:.75rem}}.drawer-dropdown-menu{display:none;box-sizing:border-box;width:100%;margin:0;padding:0;background-color:#fff}.drawer-dropdown-menu>li{width:100%;list-style:none}.drawer-dropdown-menu-item{line-height:3.75rem;display:block;padding:0;padding-right:.75rem;padding-left:1.5rem;text-decoration:none;color:#222}.drawer-dropdown-menu-item:hover{text-decoration:underline;color:#555;background-color:transparent}.drawer-dropdown.open>.drawer-dropdown-menu{display:block}.drawer-dropdown .drawer-caret{display:inline-block;width:0;height:0;margin-left:4px;-webkit-transition:opacity .2s ease,-webkit-transform .2s ease;transition:opacity .2s ease,-webkit-transform .2s ease;transition:transform .2s ease,opacity .2s ease;transition:transform .2s ease,opacity .2s ease,-webkit-transform .2s ease;-webkit-transform:rotate(0deg);transform:rotate(0deg);vertical-align:middle;border-top:4px solid;border-right:4px solid transparent;border-left:4px solid transparent}.drawer-dropdown.open .drawer-caret{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.drawer-container{margin-right:auto;margin-left:auto}@media (min-width:64em){.drawer-container{max-width:60rem}}@media (min-width:75em){.drawer-container{max-width:70rem}}
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
@charset "UTF-8";
.select2-container {
box-sizing: border-box;
display: inline-block;
margin: 0;
position: relative;
vertical-align: middle;
}
.select2-container .select2-selection--single {
box-sizing: border-box;
cursor: pointer;
display: block;
height: 28px;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-select: none;
}
.select2-container .select2-selection--single .select2-selection__rendered {
display: block;
padding-left: 8px;
padding-right: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.select2-container .select2-selection--single .select2-selection__clear {
position: relative;
}
.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
padding-right: 8px;
padding-left: 20px;
}
.select2-container .select2-selection--multiple {
box-sizing: border-box;
cursor: pointer;
display: block;
min-height: 32px;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-select: none;
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
display: inline-block;
overflow: hidden;
padding-left: 8px;
text-overflow: ellipsis;
white-space: nowrap;
}
.select2-container .select2-search--inline {
float: left;
}
.select2-container .select2-search--inline .select2-search__field {
box-sizing: border-box;
border: none;
font-size: 100%;
margin-top: 5px;
padding: 0;
}
.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.select2-dropdown {
background-color: white;
border: 1px solid #aaa;
border-radius: 4px;
box-sizing: border-box;
display: block;
position: absolute;
left: -100000px;
width: 100%;
z-index: 1051;
}
.select2-results {
display: block;
}
.select2-results__options {
list-style: none;
margin: 0;
padding: 0;
}
.select2-results__option {
padding: 6px;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-select: none;
}
.select2-results__option[aria-selected] {
cursor: pointer;
}
.select2-container--open .select2-dropdown {
left: 0;
}
.select2-container--open .select2-dropdown--above {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.select2-container--open .select2-dropdown--below {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.select2-search--dropdown {
display: block;
padding: 4px;
}
.select2-search--dropdown .select2-search__field {
padding: 4px;
width: 100%;
box-sizing: border-box;
}
.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.select2-search--dropdown.select2-search--hide {
display: none;
}
.select2-close-mask {
border: 0;
margin: 0;
padding: 0;
display: block;
position: fixed;
left: 0;
top: 0;
min-height: 100%;
min-width: 100%;
height: auto;
width: auto;
opacity: 0;
z-index: 99;
background-color: #fff;
filter: alpha(opacity=0);
}
.select2-hidden-accessible {
border: 0 !important;
clip: rect(0 0 0 0) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
}
.select2-container--default .select2-selection--single {
background-color: #fff;
border: 1px solid #aaa;
border-radius: 4px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: #444;
line-height: 28px;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
cursor: pointer;
float: right;
font-weight: bold;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #999;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 26px;
position: absolute;
top: 1px;
right: 1px;
width: 20px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: #888 transparent transparent transparent;
border-style: solid;
border-width: 5px 4px 0 4px;
height: 0;
left: 50%;
margin-left: -4px;
margin-top: -2px;
position: absolute;
top: 50%;
width: 0;
}
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
float: left;
}
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
left: 1px;
right: auto;
}
.select2-container--default.select2-container--disabled .select2-selection--single {
background-color: #eee;
cursor: default;
}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
display: none;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent #888 transparent;
border-width: 0 4px 5px 4px;
}
.select2-container--default .select2-selection--multiple {
background-color: white;
border: 1px solid #aaa;
border-radius: 4px;
cursor: text;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
box-sizing: border-box;
list-style: none;
margin: 0;
padding: 0 5px;
width: 100%;
}
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
color: #999;
margin-top: 5px;
float: left;
}
.select2-container--default .select2-selection--multiple .select2-selection__clear {
cursor: pointer;
float: right;
font-weight: bold;
margin-top: 5px;
margin-right: 10px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #e4e4e4;
border: 1px solid #aaa;
border-radius: 4px;
cursor: default;
float: left;
margin-right: 5px;
margin-top: 5px;
padding: 0 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
color: #999;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-right: 2px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
color: #333;
}
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice,
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder,
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline {
float: right;
}
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
margin-left: 5px;
margin-right: auto;
}
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
margin-left: 2px;
margin-right: auto;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
border: solid black 1px;
outline: 0;
}
.select2-container--default.select2-container--disabled .select2-selection--multiple {
background-color: #eee;
cursor: default;
}
.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
display: none;
}
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
border: 1px solid #aaa;
}
.select2-container--default .select2-search--inline .select2-search__field {
background: transparent;
border: none;
outline: 0;
box-shadow: none;
-webkit-appearance: textfield;
}
.select2-container--default .select2-results > .select2-results__options {
max-height: 200px;
overflow-y: auto;
}
.select2-container--default .select2-results__option[role=group] {
padding: 0;
}
.select2-container--default .select2-results__option[aria-disabled=true] {
color: #999;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: #ddd;
}
.select2-container--default .select2-results__option .select2-results__option {
padding-left: 1em;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__group {
padding-left: 0;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option {
margin-left: -1em;
padding-left: 2em;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -2em;
padding-left: 3em;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -3em;
padding-left: 4em;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -4em;
padding-left: 5em;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
margin-left: -5em;
padding-left: 6em;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #5897fb;
color: white;
}
.select2-container--default .select2-results__group {
cursor: default;
display: block;
padding: 6px;
}
.select2-container--classic .select2-selection--single {
background-color: #f7f7f7;
border: 1px solid #aaa;
border-radius: 4px;
outline: 0;
background-image: linear-gradient(to bottom, white 50%, #eeeeee 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0);
}
.select2-container--classic .select2-selection--single:focus {
border: 1px solid #5897fb;
}
.select2-container--classic .select2-selection--single .select2-selection__rendered {
color: #444;
line-height: 28px;
}
.select2-container--classic .select2-selection--single .select2-selection__clear {
cursor: pointer;
float: right;
font-weight: bold;
margin-right: 10px;
}
.select2-container--classic .select2-selection--single .select2-selection__placeholder {
color: #999;
}
.select2-container--classic .select2-selection--single .select2-selection__arrow {
background-color: #ddd;
border: none;
border-left: 1px solid #aaa;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
height: 26px;
position: absolute;
top: 1px;
right: 1px;
width: 20px;
background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0);
}
.select2-container--classic .select2-selection--single .select2-selection__arrow b {
border-color: #888 transparent transparent transparent;
border-style: solid;
border-width: 5px 4px 0 4px;
height: 0;
left: 50%;
margin-left: -4px;
margin-top: -2px;
position: absolute;
top: 50%;
width: 0;
}
.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear {
float: left;
}
.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow {
border: none;
border-right: 1px solid #aaa;
border-radius: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
left: 1px;
right: auto;
}
.select2-container--classic.select2-container--open .select2-selection--single {
border: 1px solid #5897fb;
}
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
background: transparent;
border: none;
}
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent #888 transparent;
border-width: 0 4px 5px 4px;
}
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
background-image: linear-gradient(to bottom, white 0%, #eeeeee 50%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0);
}
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background-image: linear-gradient(to bottom, #eeeeee 50%, white 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0);
}
.select2-container--classic .select2-selection--multiple {
background-color: white;
border: 1px solid #aaa;
border-radius: 4px;
cursor: text;
outline: 0;
}
.select2-container--classic .select2-selection--multiple:focus {
border: 1px solid #5897fb;
}
.select2-container--classic .select2-selection--multiple .select2-selection__rendered {
list-style: none;
margin: 0;
padding: 0 5px;
}
.select2-container--classic .select2-selection--multiple .select2-selection__clear {
display: none;
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice {
background-color: #e4e4e4;
border: 1px solid #aaa;
border-radius: 4px;
cursor: default;
float: left;
margin-right: 5px;
margin-top: 5px;
padding: 0 5px;
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
color: #888;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-right: 2px;
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
color: #555;
}
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
float: right;
}
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
margin-left: 5px;
margin-right: auto;
}
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
margin-left: 2px;
margin-right: auto;
}
.select2-container--classic.select2-container--open .select2-selection--multiple {
border: 1px solid #5897fb;
}
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.select2-container--classic .select2-search--dropdown .select2-search__field {
border: 1px solid #aaa;
outline: 0;
}
.select2-container--classic .select2-search--inline .select2-search__field {
outline: 0;
box-shadow: none;
}
.select2-container--classic .select2-dropdown {
background-color: white;
border: 1px solid transparent;
}
.select2-container--classic .select2-dropdown--above {
border-bottom: none;
}
.select2-container--classic .select2-dropdown--below {
border-top: none;
}
.select2-container--classic .select2-results > .select2-results__options {
max-height: 200px;
overflow-y: auto;
}
.select2-container--classic .select2-results__option[role=group] {
padding: 0;
}
.select2-container--classic .select2-results__option[aria-disabled=true] {
color: grey;
}
.select2-container--classic .select2-results__option--highlighted[aria-selected] {
background-color: #3875d7;
color: white;
}
.select2-container--classic .select2-results__group {
cursor: default;
display: block;
padding: 6px;
}
.select2-container--classic.select2-container--open .select2-dropdown {
border-color: #5897fb;
}
/* Slider */
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
}
.slick-track:before,
.slick-track:after {
content: "";
display: table;
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
display: none;
}
[dir="rtl"] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
/* Slider */
.slick-loading .slick-list {
background: #fff url("../files/img/ajax-loader.gif") center center no-repeat;
}
/* Icons */
@font-face {
font-family: "slick";
src: url("../fonts/slick.eot");
src: url("../fonts/slick.eot?#iefix") format("embedded-opentype"), url("../fonts/slick.woff") format("woff"), url("../fonts/slick.ttf") format("truetype"), url("../fonts/slick.svg#slick") format("svg");
font-weight: normal;
font-style: normal;
}
/* Arrows */
.slick-prev,
.slick-next {
position: absolute;
display: block;
height: 20px;
width: 20px;
line-height: 0px;
font-size: 0px;
cursor: pointer;
background: transparent;
color: transparent;
top: 50%;
margin-top: -10px\9;
/*lte IE 8*/
transform: translate(0, -50%);
padding: 0;
border: none;
outline: none;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
outline: none;
background: transparent;
color: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
opacity: 0.25;
}
.slick-prev {
left: -25px;
}
[dir="rtl"] .slick-prev {
left: auto;
right: -25px;
}
.slick-prev:before {
content: "â†";
}
[dir="rtl"] .slick-prev:before {
content: "→";
}
.slick-next {
right: -25px;
}
[dir="rtl"] .slick-next {
left: -25px;
right: auto;
}
.slick-next:before {
content: "→";
}
[dir="rtl"] .slick-next:before {
content: "â†";
}
/* Dots */
.slick-slider {
margin-bottom: 30px;
}
.slick-dots {
position: absolute;
bottom: -45px;
list-style: none;
display: block;
text-align: center;
padding: 0;
width: 100%;
}
.slick-dots li {
position: relative;
display: inline-block;
height: 20px;
width: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button {
border: 0;
background: transparent;
display: block;
height: 20px;
width: 20px;
outline: none;
line-height: 0px;
font-size: 0px;
color: transparent;
padding: 5px;
cursor: pointer;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
opacity: 1;
}
.slick-dots li button:before {
position: absolute;
top: 0;
left: 0;
content: "•";
width: 20px;
height: 20px;
font-family: "slick";
font-size: 6px;
line-height: 20px;
text-align: center;
color: black;
opacity: 0.25;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
color: black;
opacity: 0.75;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: sans-serif;
}
img {
max-width: 100%;
height: auto;
}
a {
text-decoration: none;
}
/*
GRUPOS Y CAJAS
==============
Los grupos son contenedores para las cajas.
Las cajas crean las divisiones en el grupo (columnas).
En ED GRID 1.2. los grupos son containers y las
cajas son items. Para crear un namespace se usan las
clases ed-container y ed-item. Se pueden seguir usando
las clases .grupo y .caja pero se desaconseja (en la v2 desaparecerán)
*/
.grupo,
.ed-container {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.grupo.total,
.grupo.full,
.ed-container.total,
.ed-container.full {
max-width: 100%;
}
.caja,
.ed-item {
margin: 0;
padding-left: 15px;
padding-right: 15px;
width: 100%;
}
.base-5,
.caja.base-5,
.ed-item.base-5 {
width: 5%;
}
.base-10,
.caja.base-10,
.ed-item.base-10 {
width: 10%;
}
.base-15,
.caja.base-15,
.ed-item.base-15 {
width: 15%;
}
.base-20,
.caja.base-20,
.ed-item.base-20 {
width: 20%;
}
.base-25,
.caja.base-25,
.ed-item.base-25 {
width: 25%;
}
.base-30,
.caja.base-30,
.ed-item.base-30 {
width: 30%;
}
.base-35,
.caja.base-35,
.ed-item.base-35 {
width: 35%;
}
.base-40,
.caja.base-40,
.ed-item.base-40 {
width: 40%;
}
.base-45,
.caja.base-45,
.ed-item.base-45 {
width: 45%;
}
.base-50,
.caja.base-50,
.ed-item.base-50 {
width: 50%;
}
.base-55,
.caja.base-55,
.ed-item.base-55 {
width: 55%;
}
.base-60,
.caja.base-60,
.ed-item.base-60 {
width: 60%;
}
.base-65,
.caja.base-65,
.ed-item.base-65 {
width: 65%;
}
.base-70,
.caja.base-70,
.ed-item.base-70 {
width: 70%;
}
.base-75,
.caja.base-75,
.ed-item.base-75 {
width: 75%;
}
.base-80,
.caja.base-80,
.ed-item.base-80 {
width: 80%;
}
.base-85,
.caja.base-85,
.ed-item.base-85 {
width: 85%;
}
.base-90,
.caja.base-90,
.ed-item.base-90 {
width: 90%;
}
.base-95,
.caja.base-95,
.ed-item.base-95 {
width: 95%;
}
.base-100,
.caja.base-100,
.ed-item.base-100 {
width: 100%;
}
.base-1-3,
.caja.base-1-3,
.ed-item.base-1-3 {
width: 33.3333333333%;
}
.base-2-3,
.caja.base-2-3,
.ed-item.base-2-3 {
width: 66.6666666667%;
}
.base-3-3,
.caja.base-3-3,
.ed-item.base-3-3 {
width: 100%;
}
.base-1-6,
.caja.base-1-6,
.ed-item.base-1-6 {
width: 16.6666666667%;
}
.base-2-6,
.caja.base-2-6,
.ed-item.base-2-6 {
width: 33.3333333333%;
}
.base-3-6,
.caja.base-3-6,
.ed-item.base-3-6 {
width: 50%;
}
.base-4-6,
.caja.base-4-6,
.ed-item.base-4-6 {
width: 66.6666666667%;
}
.base-5-6,
.caja.base-5-6,
.ed-item.base-5-6 {
width: 83.3333333333%;
}
.base-6-6,
.caja.base-6-6,
.ed-item.base-6-6 {
width: 100%;
}
.base-1-8,
.caja.base-1-8,
.ed-item.base-1-8 {
width: 12.5%;
}
.base-2-8,
.caja.base-2-8,
.ed-item.base-2-8 {
width: 25%;
}
.base-3-8,
.caja.base-3-8,
.ed-item.base-3-8 {
width: 37.5%;
}
.base-4-8,
.caja.base-4-8,
.ed-item.base-4-8 {
width: 50%;
}
.base-5-8,
.caja.base-5-8,
.ed-item.base-5-8 {
width: 62.5%;
}
.base-6-8,
.caja.base-6-8,
.ed-item.base-6-8 {
width: 75%;
}
.base-7-8,
.caja.base-7-8,
.ed-item.base-7-8 {
width: 87.5%;
}
.base-8-8,
.caja.base-8-8,
.ed-item.base-8-8 {
width: 100%;
}
@media all and (min-width: 480px) {
.movil-5,
.caja.movil-5,
.ed-item.movil-5 {
width: 5%;
}
.movil-10,
.caja.movil-10,
.ed-item.movil-10 {
width: 10%;
}
.movil-15,
.caja.movil-15,
.ed-item.movil-15 {
width: 15%;
}
.movil-20,
.caja.movil-20,
.ed-item.movil-20 {
width: 20%;
}
.movil-25,
.caja.movil-25,
.ed-item.movil-25 {
width: 25%;
}
.movil-30,
.caja.movil-30,
.ed-item.movil-30 {
width: 30%;
}
.movil-35,
.caja.movil-35,
.ed-item.movil-35 {
width: 35%;
}
.movil-40,
.caja.movil-40,
.ed-item.movil-40 {
width: 40%;
}
.movil-45,
.caja.movil-45,
.ed-item.movil-45 {
width: 45%;
}
.movil-50,
.caja.movil-50,
.ed-item.movil-50 {
width: 50%;
}
.movil-55,
.caja.movil-55,
.ed-item.movil-55 {
width: 55%;
}
.movil-60,
.caja.movil-60,
.ed-item.movil-60 {
width: 60%;
}
.movil-65,
.caja.movil-65,
.ed-item.movil-65 {
width: 65%;
}
.movil-70,
.caja.movil-70,
.ed-item.movil-70 {
width: 70%;
}
.movil-75,
.caja.movil-75,
.ed-item.movil-75 {
width: 75%;
}
.movil-80,
.caja.movil-80,
.ed-item.movil-80 {
width: 80%;
}
.movil-85,
.caja.movil-85,
.ed-item.movil-85 {
width: 85%;
}
.movil-90,
.caja.movil-90,
.ed-item.movil-90 {
width: 90%;
}
.movil-95,
.caja.movil-95,
.ed-item.movil-95 {
width: 95%;
}
.movil-100,
.caja.movil-100,
.ed-item.movil-100 {
width: 100%;
}
.movil-1-3,
.caja.movil-1-3,
.ed-item.movil-1-3 {
width: 33.3333333333%;
}
.movil-2-3,
.caja.movil-2-3,
.ed-item.movil-2-3 {
width: 66.6666666667%;
}
.movil-3-3,
.caja.movil-3-3,
.ed-item.movil-3-3 {
width: 100%;
}
.movil-1-6,
.caja.movil-1-6,
.ed-item.movil-1-6 {
width: 16.6666666667%;
}
.movil-2-6,
.caja.movil-2-6,
.ed-item.movil-2-6 {
width: 33.3333333333%;
}
.movil-3-6,
.caja.movil-3-6,
.ed-item.movil-3-6 {
width: 50%;
}
.movil-4-6,
.caja.movil-4-6,
.ed-item.movil-4-6 {
width: 66.6666666667%;
}
.movil-5-6,
.caja.movil-5-6,
.ed-item.movil-5-6 {
width: 83.3333333333%;
}
.movil-6-6,
.caja.movil-6-6,
.ed-item.movil-6-6 {
width: 100%;
}
.movil-1-8,
.caja.movil-1-8,
.ed-item.movil-1-8 {
width: 12.5%;
}
.movil-2-8,
.caja.movil-2-8,
.ed-item.movil-2-8 {
width: 25%;
}
.movil-3-8,
.caja.movil-3-8,
.ed-item.movil-3-8 {
width: 37.5%;
}
.movil-4-8,
.caja.movil-4-8,
.ed-item.movil-4-8 {
width: 50%;
}
.movil-5-8,
.caja.movil-5-8,
.ed-item.movil-5-8 {
width: 62.5%;
}
.movil-6-8,
.caja.movil-6-8,
.ed-item.movil-6-8 {
width: 75%;
}
.movil-7-8,
.caja.movil-7-8,
.ed-item.movil-7-8 {
width: 87.5%;
}
.movil-8-8,
.caja.movil-8-8,
.ed-item.movil-8-8 {
width: 100%;
}
}
@media all and (min-width: 768px) {
.tablet-5,
.caja.tablet-5,
.ed-item.tablet-5 {
width: 5%;
}
.tablet-10,
.caja.tablet-10,
.ed-item.tablet-10 {
width: 10%;
}
.tablet-15,
.caja.tablet-15,
.ed-item.tablet-15 {
width: 15%;
}
.tablet-20,
.caja.tablet-20,
.ed-item.tablet-20 {
width: 20%;
}
.tablet-25,
.caja.tablet-25,
.ed-item.tablet-25 {
width: 25%;
}
.tablet-30,
.caja.tablet-30,
.ed-item.tablet-30 {
width: 30%;
}
.tablet-35,
.caja.tablet-35,
.ed-item.tablet-35 {
width: 35%;
}
.tablet-40,
.caja.tablet-40,
.ed-item.tablet-40 {
width: 40%;
}
.tablet-45,
.caja.tablet-45,
.ed-item.tablet-45 {
width: 45%;
}
.tablet-50,
.caja.tablet-50,
.ed-item.tablet-50 {
width: 50%;
}
.tablet-55,
.caja.tablet-55,
.ed-item.tablet-55 {
width: 55%;
}
.tablet-60,
.caja.tablet-60,
.ed-item.tablet-60 {
width: 60%;
}
.tablet-65,
.caja.tablet-65,
.ed-item.tablet-65 {
width: 65%;
}
.tablet-70,
.caja.tablet-70,
.ed-item.tablet-70 {
width: 70%;
}
.tablet-75,
.caja.tablet-75,
.ed-item.tablet-75 {
width: 75%;
}
.tablet-80,
.caja.tablet-80,
.ed-item.tablet-80 {
width: 80%;
}
.tablet-85,
.caja.tablet-85,
.ed-item.tablet-85 {
width: 85%;
}
.tablet-90,
.caja.tablet-90,
.ed-item.tablet-90 {
width: 90%;
}
.tablet-95,
.caja.tablet-95,
.ed-item.tablet-95 {
width: 95%;
}
.tablet-100,
.caja.tablet-100,
.ed-item.tablet-100 {
width: 100%;
}
.tablet-1-3,
.caja.tablet-1-3,
.ed-item.tablet-1-3 {
width: 33.3333333333%;
}
.tablet-2-3,
.caja.tablet-2-3,
.ed-item.tablet-2-3 {
width: 66.6666666667%;
}
.tablet-3-3,
.caja.tablet-3-3,
.ed-item.tablet-3-3 {
width: 100%;
}
.tablet-1-6,
.caja.tablet-1-6,
.ed-item.tablet-1-6 {
width: 16.6666666667%;
}
.tablet-2-6,
.caja.tablet-2-6,
.ed-item.tablet-2-6 {
width: 33.3333333333%;
}
.tablet-3-6,
.caja.tablet-3-6,
.ed-item.tablet-3-6 {
width: 50%;
}
.tablet-4-6,
.caja.tablet-4-6,
.ed-item.tablet-4-6 {
width: 66.6666666667%;
}
.tablet-5-6,
.caja.tablet-5-6,
.ed-item.tablet-5-6 {
width: 83.3333333333%;
}
.tablet-6-6,
.caja.tablet-6-6,
.ed-item.tablet-6-6 {
width: 100%;
}
.tablet-1-8,
.caja.tablet-1-8,
.ed-item.tablet-1-8 {
width: 12.5%;
}
.tablet-2-8,
.caja.tablet-2-8,
.ed-item.tablet-2-8 {
width: 25%;
}
.tablet-3-8,
.caja.tablet-3-8,
.ed-item.tablet-3-8 {
width: 37.5%;
}
.tablet-4-8,
.caja.tablet-4-8,
.ed-item.tablet-4-8 {
width: 50%;
}
.tablet-5-8,
.caja.tablet-5-8,
.ed-item.tablet-5-8 {
width: 62.5%;
}
.tablet-6-8,
.caja.tablet-6-8,
.ed-item.tablet-6-8 {
width: 75%;
}
.tablet-7-8,
.caja.tablet-7-8,
.ed-item.tablet-7-8 {
width: 87.5%;
}
.tablet-8-8,
.caja.tablet-8-8,
.ed-item.tablet-8-8 {
width: 100%;
}
}
@media all and (min-width: 1024px) {
.web-5,
.caja.web-5,
.ed-item.web-5 {
width: 5%;
}
.web-10,
.caja.web-10,
.ed-item.web-10 {
width: 10%;
}
.web-15,
.caja.web-15,
.ed-item.web-15 {
width: 15%;
}
.web-20,
.caja.web-20,
.ed-item.web-20 {
width: 20%;
}
.web-25,
.caja.web-25,
.ed-item.web-25 {
width: 25%;
}
.web-30,
.caja.web-30,
.ed-item.web-30 {
width: 30%;
}
.web-35,
.caja.web-35,
.ed-item.web-35 {
width: 35%;
}
.web-40,
.caja.web-40,
.ed-item.web-40 {
width: 40%;
}
.web-45,
.caja.web-45,
.ed-item.web-45 {
width: 45%;
}
.web-50,
.caja.web-50,
.ed-item.web-50 {
width: 50%;
}
.web-55,
.caja.web-55,
.ed-item.web-55 {
width: 55%;
}
.web-60,
.caja.web-60,
.ed-item.web-60 {
width: 60%;
}
.web-65,
.caja.web-65,
.ed-item.web-65 {
width: 65%;
}
.web-70,
.caja.web-70,
.ed-item.web-70 {
width: 70%;
}
.web-75,
.caja.web-75,
.ed-item.web-75 {
width: 75%;
}
.web-80,
.caja.web-80,
.ed-item.web-80 {
width: 80%;
}
.web-85,
.caja.web-85,
.ed-item.web-85 {
width: 85%;
}
.web-90,
.caja.web-90,
.ed-item.web-90 {
width: 90%;
}
.web-95,
.caja.web-95,
.ed-item.web-95 {
width: 95%;
}
.web-100,
.caja.web-100,
.ed-item.web-100 {
width: 100%;
}
.web-1-3,
.caja.web-1-3,
.ed-item.web-1-3 {
width: 33.3333333333%;
}
.web-2-3,
.caja.web-2-3,
.ed-item.web-2-3 {
width: 66.6666666667%;
}
.web-3-3,
.caja.web-3-3,
.ed-item.web-3-3 {
width: 100%;
}
.web-1-6,
.caja.web-1-6,
.ed-item.web-1-6 {
width: 16.6666666667%;
}
.web-2-6,
.caja.web-2-6,
.ed-item.web-2-6 {
width: 33.3333333333%;
}
.web-3-6,
.caja.web-3-6,
.ed-item.web-3-6 {
width: 50%;
}
.web-4-6,
.caja.web-4-6,
.ed-item.web-4-6 {
width: 66.6666666667%;
}
.web-5-6,
.caja.web-5-6,
.ed-item.web-5-6 {
width: 83.3333333333%;
}
.web-6-6,
.caja.web-6-6,
.ed-item.web-6-6 {
width: 100%;
}
.web-1-8,
.caja.web-1-8,
.ed-item.web-1-8 {
width: 12.5%;
}
.web-2-8,
.caja.web-2-8,
.ed-item.web-2-8 {
width: 25%;
}
.web-3-8,
.caja.web-3-8,
.ed-item.web-3-8 {
width: 37.5%;
}
.web-4-8,
.caja.web-4-8,
.ed-item.web-4-8 {
width: 50%;
}
.web-5-8,
.caja.web-5-8,
.ed-item.web-5-8 {
width: 62.5%;
}
.web-6-8,
.caja.web-6-8,
.ed-item.web-6-8 {
width: 75%;
}
.web-7-8,
.caja.web-7-8,
.ed-item.web-7-8 {
width: 87.5%;
}
.web-8-8,
.caja.web-8-8,
.ed-item.web-8-8 {
width: 100%;
}
}
@media all and (min-width: 1400px) {
.hd-5,
.caja.hd-5,
.ed-item.hd-5 {
width: 5%;
}
.hd-10,
.caja.hd-10,
.ed-item.hd-10 {
width: 10%;
}
.hd-15,
.caja.hd-15,
.ed-item.hd-15 {
width: 15%;
}
.hd-20,
.caja.hd-20,
.ed-item.hd-20 {
width: 20%;
}
.hd-25,
.caja.hd-25,
.ed-item.hd-25 {
width: 25%;
}
.hd-30,
.caja.hd-30,
.ed-item.hd-30 {
width: 30%;
}
.hd-35,
.caja.hd-35,
.ed-item.hd-35 {
width: 35%;
}
.hd-40,
.caja.hd-40,
.ed-item.hd-40 {
width: 40%;
}
.hd-45,
.caja.hd-45,
.ed-item.hd-45 {
width: 45%;
}
.hd-50,
.caja.hd-50,
.ed-item.hd-50 {
width: 50%;
}
.hd-55,
.caja.hd-55,
.ed-item.hd-55 {
width: 55%;
}
.hd-60,
.caja.hd-60,
.ed-item.hd-60 {
width: 60%;
}
.hd-65,
.caja.hd-65,
.ed-item.hd-65 {
width: 65%;
}
.hd-70,
.caja.hd-70,
.ed-item.hd-70 {
width: 70%;
}
.hd-75,
.caja.hd-75,
.ed-item.hd-75 {
width: 75%;
}
.hd-80,
.caja.hd-80,
.ed-item.hd-80 {
width: 80%;
}
.hd-85,
.caja.hd-85,
.ed-item.hd-85 {
width: 85%;
}
.hd-90,
.caja.hd-90,
.ed-item.hd-90 {
width: 90%;
}
.hd-95,
.caja.hd-95,
.ed-item.hd-95 {
width: 95%;
}
.hd-100,
.caja.hd-100,
.ed-item.hd-100 {
width: 100%;
}
.hd-1-3,
.caja.hd-1-3,
.ed-item.hd-1-3 {
width: 33.3333333333%;
}
.hd-2-3,
.caja.hd-2-3,
.ed-item.hd-2-3 {
width: 66.6666666667%;
}
.hd-3-3,
.caja.hd-3-3,
.ed-item.hd-3-3 {
width: 100%;
}
.hd-1-6,
.caja.hd-1-6,
.ed-item.hd-1-6 {
width: 16.6666666667%;
}
.hd-2-6,
.caja.hd-2-6,
.ed-item.hd-2-6 {
width: 33.3333333333%;
}
.hd-3-6,
.caja.hd-3-6,
.ed-item.hd-3-6 {
width: 50%;
}
.hd-4-6,
.caja.hd-4-6,
.ed-item.hd-4-6 {
width: 66.6666666667%;
}
.hd-5-6,
.caja.hd-5-6,
.ed-item.hd-5-6 {
width: 83.3333333333%;
}
.hd-6-6,
.caja.hd-6-6,
.ed-item.hd-6-6 {
width: 100%;
}
.hd-1-8,
.caja.hd-1-8,
.ed-item.hd-1-8 {
width: 12.5%;
}
.hd-2-8,
.caja.hd-2-8,
.ed-item.hd-2-8 {
width: 25%;
}
.hd-3-8,
.caja.hd-3-8,
.ed-item.hd-3-8 {
width: 37.5%;
}
.hd-4-8,
.caja.hd-4-8,
.ed-item.hd-4-8 {
width: 50%;
}
.hd-5-8,
.caja.hd-5-8,
.ed-item.hd-5-8 {
width: 62.5%;
}
.hd-6-8,
.caja.hd-6-8,
.ed-item.hd-6-8 {
width: 75%;
}
.hd-7-8,
.caja.hd-7-8,
.ed-item.hd-7-8 {
width: 87.5%;
}
.hd-8-8,
.caja.hd-8-8,
.ed-item.hd-8-8 {
width: 100%;
}
}
.grid {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.grid > grid-item,
.grid > .grid-item {
width: calc(20% - 1em);
margin: 0.5em;
}
.grid-item {
background: lightblue;
text-align: center;
padding: 0 1em;
}
/*ESTILOS PARA DESARROLLO
========================
Añada la clase "desarrollo"
a para tener ayudas al trabajar con ED GRID
*/
body.desarrollo {
margin: 0 !important;
}
body.desarrollo:before {
background: steelblue;
color: #fff;
font-family: sans-serif;
font-size: 18px;
font-weight: bold;
line-height: 36px;
text-align: center;
display: block;
height: 36px;
margin-bottom: 30px;
position: relative;
z-index: 900;
}
body.desarrollo .grupo,
body.desarrollo .ed-container {
padding-top: 22px;
margin-bottom: 10px;
outline: 1px solid tomato;
position: relative;
}
body.desarrollo .grupo .caja,
body.desarrollo .grupo .ed-item,
body.desarrollo .ed-container .caja,
body.desarrollo .ed-container .ed-item {
position: relative;
padding-bottom: 22px;
}
body.desarrollo .grupo .caja:nth-child(even),
body.desarrollo .grupo .ed-item:nth-child(even),
body.desarrollo .ed-container .caja:nth-child(even),
body.desarrollo .ed-container .ed-item:nth-child(even) {
background: rgba(70, 130, 180, 0.2);
}
body.desarrollo .grupo .grupo,
body.desarrollo .grupo .ed-container,
body.desarrollo .ed-container .grupo,
body.desarrollo .ed-container .ed-container {
margin-bottom: 0;
}
.desarrollo .grupo:before,
.desarrollo .ed-container:before,
.desarrollo .grupo .caja:after,
.desarrollo .ed-container .ed-item:after {
content: attr(class);
font-style: italic;
font-size: 12px;
font-weight: normal;
padding: 0 5px;
z-index: 1;
bottom: 0;
right: 0;
position: absolute;
display: table;
width: 100%;
height: 22px;
line-height: 22px;
}
.desarrollo .grupo:before,
.desarrollo .ed-container:before {
background: rgba(255, 99, 71, 0.3);
color: tomato;
top: 0;
left: 0;
width: 100%;
}
.desarrollo .caja:after,
.desarrollo .ed-item:after {
background: rgba(70, 130, 180, 0.2);
color: steelblue;
}
.desarrollo .caja.total:after,
.desarrollo .ed-item.total:after {
background: rgba(27, 50, 70, 0.3);
}
body.desarrollo:before {
content: "ED-GRID: Tamaño base";
}
@media screen and (min-width: 480px) {
body.desarrollo:before {
content: "ED-GRID: Tamaño movil, desde 480px";
}
}
@media screen and (min-width: 768px) {
body.desarrollo:before {
content: "ED-GRID: Tamaño tablet, desde 768px";
}
}
@media screen and (min-width: 1024px) {
body.desarrollo:before {
content: "ED-GRID: Tamaño web, desde 1024px";
}
}
@media screen and (min-width: 1400px) {
body.desarrollo:before {
content: "ED-GRID: Tamaño hd, desde 1400px";
}
}
.grupo.demostrar,
.ed-container.demostrar {
outline: 1px solid tomato;
margin: 1em auto;
}
.grupo.demostrar > .caja,
.grupo.demostrar > .ed-item,
.ed-container.demostrar > .caja,
.ed-container.demostrar > .ed-item {
background: #eee;
box-shadow: 0 0 0 1px steelblue;
padding-top: 1em;
padding-bottom: 1em;
}
.grupo.demostrar > .caja p,
.grupo.demostrar > .ed-item p,
.ed-container.demostrar > .caja p,
.ed-container.demostrar > .ed-item p {
margin-bottom: 0;
}
.grupo.demostrar > .caja:nth-child(odd),
.grupo.demostrar > .ed-item:nth-child(odd),
.ed-container.demostrar > .caja:nth-child(odd),
.ed-container.demostrar > .ed-item:nth-child(odd) {
background: #ddd;
}
@media screen and (max-width: 479px) {
.desde-movil,
.from-movil {
display: none !important;
}
}
@media screen and (max-width: 767px) {
.desde-tablet,
.from-tablet {
display: none !important;
}
}
@media screen and (max-width: 1023px) {
.desde-web,
.from-web {
display: none !important;
}
}
@media screen and (max-width: 1399px) {
.desde-hd,
.from-hd {
display: none !important;
}
}
@media screen and (min-width: 480px) {
.hasta-movil,
.to-movil {
display: none !important;
}
}
@media screen and (min-width: 768px) {
.hasta-tablet,
.to-tablet {
display: none !important;
}
}
@media screen and (min-width: 1024px) {
.hasta-web,
.to-web {
display: none !important;
}
}
@media screen and (min-width: 1400px) {
.hasta-hd,
.to-hd {
display: none !important;
}
}
.centro,
.centrar,
.center {
display: block;
clear: both;
margin-right: auto !important;
margin-left: auto !important;
}
.left,
.izquierda {
float: left;
}
.right,
.derecha {
float: right;
}
.total,
.full {
width: 100%;
clear: both;
}
.centrar-texto,
.center-text
.text-center {
text-align: center;
}
.izquierda-texto,
.izquierda-contenido {
text-align: left;
}
.derecha-texto,
.derecha-contenido {
text-align: right;
}
.circulo,
.circle {
border-radius: 50%;
}
.limpiar:before,
.limpiar:after,
.clearfix:before,
.clearfix:after {
content: "";
display: table;
width: 100%;
clear: both;
}
/*NO PADDING
===========
class="no-padding" al grupo, le da padding cero a todas sus cajas.
class="no-padding" a la caja le da padding cero solo a ella
*/
.no-padding.grupo > .caja,
.no-padding.ed-container > .ed-item,
.caja.no-padding,
.ed-item.no-padding {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Controlar el padding*/
.padding {
padding-left: 15px;
padding-right: 15px;
}
.padding-2 {
padding-left: 30px;
padding-right: 30px;
}
.padding-3 {
padding-left: 45px;
padding-right: 45px;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
position: relative;
top: .15em;
display: inline-block;
}
.espacio:before {
margin-right: .3em;
}
.ed-video {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.ed-video > iframe,
.ed-video > object,
.ed-video > video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ed-menu,
.ed-menu ul {
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
list-style: none;
}
.ed-menu li {
position: relative;
}
.ed-menu ul {
position: absolute;
display: none;
}
.ed-menu a {
display: block;
width: 100%;
line-height: 3em;
padding: 0 1em;
}
.ed-menu.default,
.ed-menu.nav-bar {
background: #eee;
}
.ed-menu.default li,
.ed-menu.nav-bar li {
-ms-flex: 1;
flex: 1;
}
.ed-menu.default li:hover,
.ed-menu.nav-bar li:hover {
background: rgba(0, 0, 0, 0.1);
}
.ed-menu.default ul,
.ed-menu.nav-bar ul {
background: #e1e1e1;
}
.ed-menu.default a,
.ed-menu.nav-bar a {
color: #666;
}
.ed-menu.nav-bar {
border: 1px solid rgba(0, 0, 0, 0.1);
}
.ed-menu.nav-bar li {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.ed-menu.nav-bar li:last-child {
border-right: none;
}
.ed-menu.nav-bar ul {
border: 1px solid rgba(0, 0, 0, 0.1);
}
.ed-menu.nav-bar ul li {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.ed-menu.nav-bar ul li:last-child {
border-bottom: none;
}
.ed-menu.button-bar li {
margin-bottom: .5em;
margin-right: .5em;
}
.ed-menu.button-bar a {
border: 1px solid rgba(0, 0, 0, 0.1);
display: block;
background: #eee;
line-height: 2.5em;
margin-right: .5em;
padding: 0 1.5em;
border-radius: 4px;
color: #666;
}
.ed-menu.button-bar a:hover {
background: rgba(0, 0, 0, 0.1);
}
@media screen and (min-width: 768px) {
.tablet-horizontal {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
}
.tablet-horizontal.nav-bar > li {
border-right: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: none;
}
.tablet-horizontal a {
text-align: center;
}
.tablet-horizontal ul {
position: absolute;
top: 100%;
min-width: 10em;
}
.tablet-horizontal ul ul {
top: 0;
left: 100%;
}
.tablet-horizontal li:hover > ul {
display: block;
}
}
@media screen and (min-width: 1024px) {
.web-horizontal {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
}
.web-horizontal.nav-bar > li {
border-right: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: none;
}
.web-horizontal a {
text-align: center;
}
.web-horizontal ul {
position: absolute;
top: 100%;
min-width: 10em;
}
.web-horizontal ul ul {
top: 0;
left: 100%;
}
.web-horizontal li:hover > ul {
display: block;
}
}
@font-face {
font-family: "ed-grid";
src: url("../fonts/ed-grid.eot");
src: url("../fonts/ed-grid.eot?#iefix") format("embedded-opentype"), url("../fonts/ed-grid.woff") format("woff"), url("../fonts/ed-grid.ttf") format("truetype"), url("../fonts/ed-grid.svg#ed-grid") format("svg");
font-weight: normal;
font-style: normal;
}
[data-icon]:before {
font-family: "ed-grid", sans-serif !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: "ed-grid",sans-serif !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.icon-youtube:before {
content: "a";
}
.icon-twitter:before {
content: "b";
}
.icon-facebook:before {
content: "c";
}
.icon-linkedin:before {
content: "d";
}
.icon-pinterest:before {
content: "e";
}
.icon-instagram:before {
content: "f";
}
.icon-rss:before {
content: "g";
}
.icon-github:before {
content: "h";
}
.icon-izquierda:before {
content: "i";
}
.icon-derecha:before {
content: "j";
}
.icon-arriba:before {
content: "k";
}
.icon-abajo:before {
content: "l";
}
.icon-triangulo-izquierda:before {
content: "m";
}
.icon-triangulo-derecha:before {
content: "n";
}
.icon-triangulo-arriba:before {
content: "p";
}
.icon-aceptar:before {
content: "q";
}
.icon-triangulo-abajo:before {
content: "o";
}
.icon-telefono:before {
content: "r";
}
.icon-android:before {
content: "s";
}
.icon-apple:before {
content: "t";
}
.icon-bitcoin:before {
content: "u";
}
.icon-fecha:before {
content: "v";
}
.icon-camara:before {
content: "w";
}
.icon-tarjeta:before {
content: "x";
}
.icon-pin:before {
content: "y";
}
.icon-cerrar:before {
content: "z";
}
.icon-whatsapp:before {
content: "A";
}
.icon-vimeo:before {
content: "B";
}
.icon-menu:before {
content: "C";
}
.icon-menu-secundario:before {
content: "D";
}
.icon-correo:before {
content: "E";
}
.icon-ed:before {
content: "F";
}
.icon-google-plus:before {
content: "G";
}
.icon-carrito:before {
content: "H";
}
.icon-usuario:before {
content: "I";
}
.icon-enlace:before {
content: "J";
}
.icon-portafolio:before {
content: "K";
}
.icon-mastercard:before {
content: "L";
}
.icon-paypal:before {
content: "M";
}
.icon-visa:before {
content: "N";
}
.icon-buscar:before {
content: "O";
}
@media screen and (min-width: 480px) {
.movil-order-1 {
-ms-flex-order: 1;
order: 1;
}
.movil-order-2 {
-ms-flex-order: 2;
order: 2;
}
.movil-order-3 {
-ms-flex-order: 3;
order: 3;
}
.movil-order-4 {
-ms-flex-order: 4;
order: 4;
}
.movil-order-5 {
-ms-flex-order: 5;
order: 5;
}
.movil-order-6 {
-ms-flex-order: 6;
order: 6;
}
.movil-order-7 {
-ms-flex-order: 7;
order: 7;
}
.movil-order-8 {
-ms-flex-order: 8;
order: 8;
}
.movil-order-9 {
-ms-flex-order: 9;
order: 9;
}
.movil-order-10 {
-ms-flex-order: 10;
order: 10;
}
}
@media screen and (min-width: 768px) {
.tablet-order-1 {
-ms-flex-order: 1;
order: 1;
}
.tablet-order-2 {
-ms-flex-order: 2;
order: 2;
}
.tablet-order-3 {
-ms-flex-order: 3;
order: 3;
}
.tablet-order-4 {
-ms-flex-order: 4;
order: 4;
}
.tablet-order-5 {
-ms-flex-order: 5;
order: 5;
}
.tablet-order-6 {
-ms-flex-order: 6;
order: 6;
}
.tablet-order-7 {
-ms-flex-order: 7;
order: 7;
}
.tablet-order-8 {
-ms-flex-order: 8;
order: 8;
}
.tablet-order-9 {
-ms-flex-order: 9;
order: 9;
}
.tablet-order-10 {
-ms-flex-order: 10;
order: 10;
}
}
@media screen and (min-width: 1024px) {
.web-order-1 {
-ms-flex-order: 1;
order: 1;
}
.web-order-2 {
-ms-flex-order: 2;
order: 2;
}
.web-order-3 {
-ms-flex-order: 3;
order: 3;
}
.web-order-4 {
-ms-flex-order: 4;
order: 4;
}
.web-order-5 {
-ms-flex-order: 5;
order: 5;
}
.web-order-6 {
-ms-flex-order: 6;
order: 6;
}
.web-order-7 {
-ms-flex-order: 7;
order: 7;
}
.web-order-8 {
-ms-flex-order: 8;
order: 8;
}
.web-order-9 {
-ms-flex-order: 9;
order: 9;
}
.web-order-10 {
-ms-flex-order: 10;
order: 10;
}
}
@media screen and (min-width: 1400px) {
.hd-order-1 {
-ms-flex-order: 1;
order: 1;
}
.hd-order-2 {
-ms-flex-order: 2;
order: 2;
}
.hd-order-3 {
-ms-flex-order: 3;
order: 3;
}
.hd-order-4 {
-ms-flex-order: 4;
order: 4;
}
.hd-order-5 {
-ms-flex-order: 5;
order: 5;
}
.hd-order-6 {
-ms-flex-order: 6;
order: 6;
}
.hd-order-7 {
-ms-flex-order: 7;
order: 7;
}
.hd-order-8 {
-ms-flex-order: 8;
order: 8;
}
.hd-order-9 {
-ms-flex-order: 9;
order: 9;
}
.hd-order-10 {
-ms-flex-order: 10;
order: 10;
}
}
.column,
.column-reverse,
.abcenter,
.justify,
.distribute,
.main-start,
.main-center,
.main-end,
.cross-start,
.cross-center,
.cross-end {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.justify {
-ms-flex-pack: justify;
justify-content: space-between;
}
.distribute,
.distributed {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.main-center {
-ms-flex-pack: center;
justify-content: center;
}
.main-start {
-ms-flex-pack: start;
justify-content: flex-start;
}
.main-end {
-ms-flex-pack: end;
justify-content: flex-end;
}
.cross-start {
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
}
.cross-center {
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
}
.cross-end {
-ms-flex-align: end;
align-items: flex-end;
-ms-flex-line-pack: end;
align-content: flex-end;
}
.reverse {
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.column {
-ms-flex-direction: column;
flex-direction: column;
}
.column-reverse {
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.abcenter {
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
}
@media all and (min-width: 480px) {
.caja.movil-offset-5,
.ed-item.movil-offset-5 {
margin-left: 5%;
}
.caja.movil-offset-10,
.ed-item.movil-offset-10 {
margin-left: 10%;
}
.caja.movil-offset-15,
.ed-item.movil-offset-15 {
margin-left: 15%;
}
.caja.movil-offset-20,
.ed-item.movil-offset-20 {
margin-left: 20%;
}
.caja.movil-offset-25,
.ed-item.movil-offset-25 {
margin-left: 25%;
}
.caja.movil-offset-30,
.ed-item.movil-offset-30 {
margin-left: 30%;
}
.caja.movil-offset-35,
.ed-item.movil-offset-35 {
margin-left: 35%;
}
.caja.movil-offset-40,
.ed-item.movil-offset-40 {
margin-left: 40%;
}
.caja.movil-offset-45,
.ed-item.movil-offset-45 {
margin-left: 45%;
}
.caja.movil-offset-50,
.ed-item.movil-offset-50 {
margin-left: 50%;
}
.caja.movil-offset-55,
.ed-item.movil-offset-55 {
margin-left: 55%;
}
.caja.movil-offset-60,
.ed-item.movil-offset-60 {
margin-left: 60%;
}
.caja.movil-offset-65,
.ed-item.movil-offset-65 {
margin-left: 65%;
}
.caja.movil-offset-70,
.ed-item.movil-offset-70 {
margin-left: 70%;
}
.caja.movil-offset-75,
.ed-item.movil-offset-75 {
margin-left: 75%;
}
.caja.movil-offset-80,
.ed-item.movil-offset-80 {
margin-left: 80%;
}
.caja.movil-offset-85,
.ed-item.movil-offset-85 {
margin-left: 85%;
}
.caja.movil-offset-90,
.ed-item.movil-offset-90 {
margin-left: 90%;
}
.caja.movil-offset-95,
.ed-item.movil-offset-95 {
margin-left: 95%;
}
.caja.movil-offset-100,
.ed-item.movil-offset-100 {
margin-left: 100%;
}
.caja.movil-offset-1-3,
.ed-item.movil-offset-1-3 {
margin-left: 33.3333333333%;
}
.caja.movil-offset-2-3,
.ed-item.movil-offset-2-3 {
margin-left: 66.6666666667%;
}
.caja.movil-offset-3-3,
.ed-item.movil-offset-3-3 {
margin-left: 100%;
}
.caja.movil-offset-1-6,
.ed-item.movil-offset-1-6 {
margin-left: 16.6666666667%;
}
.caja.movil-offset-2-6,
.ed-item.movil-offset-2-6 {
margin-left: 33.3333333333%;
}
.caja.movil-offset-3-6,
.ed-item.movil-offset-3-6 {
margin-left: 50%;
}
.caja.movil-offset-4-6,
.ed-item.movil-offset-4-6 {
margin-left: 66.6666666667%;
}
.caja.movil-offset-5-6,
.ed-item.movil-offset-5-6 {
margin-left: 83.3333333333%;
}
.caja.movil-offset-6-6,
.ed-item.movil-offset-6-6 {
margin-left: 100%;
}
.caja.movil-offset-1-8,
.ed-item.movil-offset-1-8 {
margin-left: 12.5%;
}
.caja.movil-offset-2-8,
.ed-item.movil-offset-2-8 {
margin-left: 25%;
}
.caja.movil-offset-3-8,
.ed-item.movil-offset-3-8 {
margin-left: 37.5%;
}
.caja.movil-offset-4-8,
.ed-item.movil-offset-4-8 {
margin-left: 50%;
}
.caja.movil-offset-5-8,
.ed-item.movil-offset-5-8 {
margin-left: 62.5%;
}
.caja.movil-offset-6-8,
.ed-item.movil-offset-6-8 {
margin-left: 75%;
}
.caja.movil-offset-7-8,
.ed-item.movil-offset-7-8 {
margin-left: 87.5%;
}
.caja.movil-offset-8-8,
.ed-item.movil-offset-8-8 {
margin-left: 100%;
}
}
@media all and (min-width: 768px) {
.caja.tablet-offset-5,
.ed-item.tablet-offset-5 {
margin-left: 5%;
}
.caja.tablet-offset-10,
.ed-item.tablet-offset-10 {
margin-left: 10%;
}
.caja.tablet-offset-15,
.ed-item.tablet-offset-15 {
margin-left: 15%;
}
.caja.tablet-offset-20,
.ed-item.tablet-offset-20 {
margin-left: 20%;
}
.caja.tablet-offset-25,
.ed-item.tablet-offset-25 {
margin-left: 25%;
}
.caja.tablet-offset-30,
.ed-item.tablet-offset-30 {
margin-left: 30%;
}
.caja.tablet-offset-35,
.ed-item.tablet-offset-35 {
margin-left: 35%;
}
.caja.tablet-offset-40,
.ed-item.tablet-offset-40 {
margin-left: 40%;
}
.caja.tablet-offset-45,
.ed-item.tablet-offset-45 {
margin-left: 45%;
}
.caja.tablet-offset-50,
.ed-item.tablet-offset-50 {
margin-left: 50%;
}
.caja.tablet-offset-55,
.ed-item.tablet-offset-55 {
margin-left: 55%;
}
.caja.tablet-offset-60,
.ed-item.tablet-offset-60 {
margin-left: 60%;
}
.caja.tablet-offset-65,
.ed-item.tablet-offset-65 {
margin-left: 65%;
}
.caja.tablet-offset-70,
.ed-item.tablet-offset-70 {
margin-left: 70%;
}
.caja.tablet-offset-75,
.ed-item.tablet-offset-75 {
margin-left: 75%;
}
.caja.tablet-offset-80,
.ed-item.tablet-offset-80 {
margin-left: 80%;
}
.caja.tablet-offset-85,
.ed-item.tablet-offset-85 {
margin-left: 85%;
}
.caja.tablet-offset-90,
.ed-item.tablet-offset-90 {
margin-left: 90%;
}
.caja.tablet-offset-95,
.ed-item.tablet-offset-95 {
margin-left: 95%;
}
.caja.tablet-offset-100,
.ed-item.tablet-offset-100 {
margin-left: 100%;
}
.caja.tablet-offset-1-3,
.ed-item.tablet-offset-1-3 {
margin-left: 33.3333333333%;
}
.caja.tablet-offset-2-3,
.ed-item.tablet-offset-2-3 {
margin-left: 66.6666666667%;
}
.caja.tablet-offset-3-3,
.ed-item.tablet-offset-3-3 {
margin-left: 100%;
}
.caja.tablet-offset-1-6,
.ed-item.tablet-offset-1-6 {
margin-left: 16.6666666667%;
}
.caja.tablet-offset-2-6,
.ed-item.tablet-offset-2-6 {
margin-left: 33.3333333333%;
}
.caja.tablet-offset-3-6,
.ed-item.tablet-offset-3-6 {
margin-left: 50%;
}
.caja.tablet-offset-4-6,
.ed-item.tablet-offset-4-6 {
margin-left: 66.6666666667%;
}
.caja.tablet-offset-5-6,
.ed-item.tablet-offset-5-6 {
margin-left: 83.3333333333%;
}
.caja.tablet-offset-6-6,
.ed-item.tablet-offset-6-6 {
margin-left: 100%;
}
.caja.tablet-offset-1-8,
.ed-item.tablet-offset-1-8 {
margin-left: 12.5%;
}
.caja.tablet-offset-2-8,
.ed-item.tablet-offset-2-8 {
margin-left: 25%;
}
.caja.tablet-offset-3-8,
.ed-item.tablet-offset-3-8 {
margin-left: 37.5%;
}
.caja.tablet-offset-4-8,
.ed-item.tablet-offset-4-8 {
margin-left: 50%;
}
.caja.tablet-offset-5-8,
.ed-item.tablet-offset-5-8 {
margin-left: 62.5%;
}
.caja.tablet-offset-6-8,
.ed-item.tablet-offset-6-8 {
margin-left: 75%;
}
.caja.tablet-offset-7-8,
.ed-item.tablet-offset-7-8 {
margin-left: 87.5%;
}
.caja.tablet-offset-8-8,
.ed-item.tablet-offset-8-8 {
margin-left: 100%;
}
}
@media all and (min-width: 1024px) {
.caja.web-offset-5,
.ed-item.web-offset-5 {
margin-left: 5%;
}
.caja.web-offset-10,
.ed-item.web-offset-10 {
margin-left: 10%;
}
.caja.web-offset-15,
.ed-item.web-offset-15 {
margin-left: 15%;
}
.caja.web-offset-20,
.ed-item.web-offset-20 {
margin-left: 20%;
}
.caja.web-offset-25,
.ed-item.web-offset-25 {
margin-left: 25%;
}
.caja.web-offset-30,
.ed-item.web-offset-30 {
margin-left: 30%;
}
.caja.web-offset-35,
.ed-item.web-offset-35 {
margin-left: 35%;
}
.caja.web-offset-40,
.ed-item.web-offset-40 {
margin-left: 40%;
}
.caja.web-offset-45,
.ed-item.web-offset-45 {
margin-left: 45%;
}
.caja.web-offset-50,
.ed-item.web-offset-50 {
margin-left: 50%;
}
.caja.web-offset-55,
.ed-item.web-offset-55 {
margin-left: 55%;
}
.caja.web-offset-60,
.ed-item.web-offset-60 {
margin-left: 60%;
}
.caja.web-offset-65,
.ed-item.web-offset-65 {
margin-left: 65%;
}
.caja.web-offset-70,
.ed-item.web-offset-70 {
margin-left: 70%;
}
.caja.web-offset-75,
.ed-item.web-offset-75 {
margin-left: 75%;
}
.caja.web-offset-80,
.ed-item.web-offset-80 {
margin-left: 80%;
}
.caja.web-offset-85,
.ed-item.web-offset-85 {
margin-left: 85%;
}
.caja.web-offset-90,
.ed-item.web-offset-90 {
margin-left: 90%;
}
.caja.web-offset-95,
.ed-item.web-offset-95 {
margin-left: 95%;
}
.caja.web-offset-100,
.ed-item.web-offset-100 {
margin-left: 100%;
}
.caja.web-offset-1-3,
.ed-item.web-offset-1-3 {
margin-left: 33.3333333333%;
}
.caja.web-offset-2-3,
.ed-item.web-offset-2-3 {
margin-left: 66.6666666667%;
}
.caja.web-offset-3-3,
.ed-item.web-offset-3-3 {
margin-left: 100%;
}
.caja.web-offset-1-6,
.ed-item.web-offset-1-6 {
margin-left: 16.6666666667%;
}
.caja.web-offset-2-6,
.ed-item.web-offset-2-6 {
margin-left: 33.3333333333%;
}
.caja.web-offset-3-6,
.ed-item.web-offset-3-6 {
margin-left: 50%;
}
.caja.web-offset-4-6,
.ed-item.web-offset-4-6 {
margin-left: 66.6666666667%;
}
.caja.web-offset-5-6,
.ed-item.web-offset-5-6 {
margin-left: 83.3333333333%;
}
.caja.web-offset-6-6,
.ed-item.web-offset-6-6 {
margin-left: 100%;
}
.caja.web-offset-1-8,
.ed-item.web-offset-1-8 {
margin-left: 12.5%;
}
.caja.web-offset-2-8,
.ed-item.web-offset-2-8 {
margin-left: 25%;
}
.caja.web-offset-3-8,
.ed-item.web-offset-3-8 {
margin-left: 37.5%;
}
.caja.web-offset-4-8,
.ed-item.web-offset-4-8 {
margin-left: 50%;
}
.caja.web-offset-5-8,
.ed-item.web-offset-5-8 {
margin-left: 62.5%;
}
.caja.web-offset-6-8,
.ed-item.web-offset-6-8 {
margin-left: 75%;
}
.caja.web-offset-7-8,
.ed-item.web-offset-7-8 {
margin-left: 87.5%;
}
.caja.web-offset-8-8,
.ed-item.web-offset-8-8 {
margin-left: 100%;
}
}
@media all and (min-width: 1400px) {
.caja.hd-offset-5,
.ed-item.hd-offset-5 {
margin-left: 5%;
}
.caja.hd-offset-10,
.ed-item.hd-offset-10 {
margin-left: 10%;
}
.caja.hd-offset-15,
.ed-item.hd-offset-15 {
margin-left: 15%;
}
.caja.hd-offset-20,
.ed-item.hd-offset-20 {
margin-left: 20%;
}
.caja.hd-offset-25,
.ed-item.hd-offset-25 {
margin-left: 25%;
}
.caja.hd-offset-30,
.ed-item.hd-offset-30 {
margin-left: 30%;
}
.caja.hd-offset-35,
.ed-item.hd-offset-35 {
margin-left: 35%;
}
.caja.hd-offset-40,
.ed-item.hd-offset-40 {
margin-left: 40%;
}
.caja.hd-offset-45,
.ed-item.hd-offset-45 {
margin-left: 45%;
}
.caja.hd-offset-50,
.ed-item.hd-offset-50 {
margin-left: 50%;
}
.caja.hd-offset-55,
.ed-item.hd-offset-55 {
margin-left: 55%;
}
.caja.hd-offset-60,
.ed-item.hd-offset-60 {
margin-left: 60%;
}
.caja.hd-offset-65,
.ed-item.hd-offset-65 {
margin-left: 65%;
}
.caja.hd-offset-70,
.ed-item.hd-offset-70 {
margin-left: 70%;
}
.caja.hd-offset-75,
.ed-item.hd-offset-75 {
margin-left: 75%;
}
.caja.hd-offset-80,
.ed-item.hd-offset-80 {
margin-left: 80%;
}
.caja.hd-offset-85,
.ed-item.hd-offset-85 {
margin-left: 85%;
}
.caja.hd-offset-90,
.ed-item.hd-offset-90 {
margin-left: 90%;
}
.caja.hd-offset-95,
.ed-item.hd-offset-95 {
margin-left: 95%;
}
.caja.hd-offset-100,
.ed-item.hd-offset-100 {
margin-left: 100%;
}
.caja.hd-offset-1-3,
.ed-item.hd-offset-1-3 {
margin-left: 33.3333333333%;
}
.caja.hd-offset-2-3,
.ed-item.hd-offset-2-3 {
margin-left: 66.6666666667%;
}
.caja.hd-offset-3-3,
.ed-item.hd-offset-3-3 {
margin-left: 100%;
}
.caja.hd-offset-1-6,
.ed-item.hd-offset-1-6 {
margin-left: 16.6666666667%;
}
.caja.hd-offset-2-6,
.ed-item.hd-offset-2-6 {
margin-left: 33.3333333333%;
}
.caja.hd-offset-3-6,
.ed-item.hd-offset-3-6 {
margin-left: 50%;
}
.caja.hd-offset-4-6,
.ed-item.hd-offset-4-6 {
margin-left: 66.6666666667%;
}
.caja.hd-offset-5-6,
.ed-item.hd-offset-5-6 {
margin-left: 83.3333333333%;
}
.caja.hd-offset-6-6,
.ed-item.hd-offset-6-6 {
margin-left: 100%;
}
.caja.hd-offset-1-8,
.ed-item.hd-offset-1-8 {
margin-left: 12.5%;
}
.caja.hd-offset-2-8,
.ed-item.hd-offset-2-8 {
margin-left: 25%;
}
.caja.hd-offset-3-8,
.ed-item.hd-offset-3-8 {
margin-left: 37.5%;
}
.caja.hd-offset-4-8,
.ed-item.hd-offset-4-8 {
margin-left: 50%;
}
.caja.hd-offset-5-8,
.ed-item.hd-offset-5-8 {
margin-left: 62.5%;
}
.caja.hd-offset-6-8,
.ed-item.hd-offset-6-8 {
margin-left: 75%;
}
.caja.hd-offset-7-8,
.ed-item.hd-offset-7-8 {
margin-left: 87.5%;
}
.caja.hd-offset-8-8,
.ed-item.hd-offset-8-8 {
margin-left: 100%;
}
}
.boton,
.button,
button {
display: inline-block;
line-height: 2.5em;
background: #ddd;
color: #333;
padding: 0 1.5em;
cursor: pointer;
margin-bottom: 1em;
}
.boton:hover,
.button:hover,
button:hover {
background: #d0d0d0;
}
.boton:active,
.button:active,
button:active {
transform: scale(0.97);
}
.ed-social {
display: table;
}
.ed-social a {
display: inline-block;
color: rgba(255, 255, 255, 0.5);
line-height: 1;
}
.ed-social.circle a,
.ed-social.square a {
background: rgba(0, 0, 0, 0.1);
padding: .4em;
margin: .3em;
}
.ed-social.circle a:hover,
.ed-social.square a:hover {
background: rgba(0, 0, 0, 0.3);
}
.ed-social.circle a:before {
border-radius: 50%;
}
html {
background: #111;
}
body {
background: #fff;
font-family: "Open Sans", sans-serif;
color: rgba(255, 255, 255, 0.5);
}
a {
color: initial;
text-decoration: none;
}
p,
blockquote,
li {
font-size: 0.9em;
line-height: 1.5;
}
p {
margin: 0 0 1em 0;
}
p:last-child,
p:only-child {
margin: 0;
}
h2 {
font-size: 1.4em;
}
@media screen and (max-width: 767px) {
h2 {
font-size: 1.2em;
}
}
h3 {
font-size: 1.3em;
}
h4 {
font-size: 1em;
}
h5 {
font-size: 0.9em;
}
h6 {
font-size: 0.8em;
}
input,
select,
textarea {
font-size: 1em;
}
input[type='text'],
select,
textarea {
width: 100%;
}
main {
padding-top: 3em;
}
.admin-menu {
position: absolute;
z-index: 100;
width: 10em;
display: none;
background: #111;
}
@media screen and (max-width: 1023px) {
.admin-menu {
right: 0;
}
}
.admin-menu__link {
font-size: .9em;
}
.admin-menu-toggle {
width: 1.5em;
display: inline-block;
text-align: center;
background: #111;
cursor: pointer;
}
.admin-menu-container {
position: relative;
width: 2em;
margin-left: 1em;
}
.main-menu {
display: -ms-flexbox !important;
display: flex !important;
}
.hide {
display: none !important;
}
.logo {
font-size: 1.3em;
font-weight: 700;
text-indent: -1000px;
display: block;
height: 70px;
width: 140px;
}
.logo,
.logo:hover {
background: url(../files/img/logo.png) center center/contain no-repeat;
}
.main-search-box > form {
position: relative;
height: 1.8rem;
display: -ms-flexbox;
display: flex;
-ms-flex-align: stretch;
align-items: stretch;
}
@media screen and (min-width: 1024px) {
.main-search-box > form input {
transition: all .4s;
}
}
@media screen and (max-width: 1023px) {
.main-search-box > form input {
width: 0;
padding: 0;
position: relative;
}
.main-search-box > form input.js-to-left {
width: 13em;
padding: 0 .7em;
}
}
.main-search-box > form input:focus {
width: 15em;
outline: none;
box-shadow: none;
}
.main-footer .sociales {
display: table;
}
.main-footer .sociales a:hover {
opacity: 1;
}
@media screen and (max-width: 479px) {
.capitulos-grid {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.capitulos-grid > capitulos-grid__item,
.capitulos-grid > .capitulos-grid__item {
width: calc(50% - 0.1em);
margin: 0.05em;
}
}
@media screen and (min-width: 480px) {
.capitulos-grid {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.capitulos-grid > capitulos-grid__item,
.capitulos-grid > .capitulos-grid__item {
width: calc(33.3333333333% - 0.1em);
margin: 0.05em;
}
}
@media screen and (min-width: 768px) {
.capitulos-grid {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.capitulos-grid > capitulos-grid__item,
.capitulos-grid > .capitulos-grid__item {
width: calc(25% - 0.1em);
margin: 0.05em;
}
}
@media screen and (min-width: 1024px) {
.capitulos-grid {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.capitulos-grid > capitulos-grid__item,
.capitulos-grid > .capitulos-grid__item {
width: calc(20% - 0.1em);
margin: 0.05em;
}
}
.capitulos-portada {
margin-top: 2em;
}
.capitulos-grid__item {
text-align: center;
position: relative;
padding: 1em;
border-radius: .2em;
transition: all .2s;
}
.capitulos-grid__item__title {
font-size: .85em;
font-weight: normal;
margin: 0;
text-transform: uppercase;
margin-bottom: .6em;
}
.animes-grid {
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.animes-grid > anime,
.animes-grid > .anime {
width: calc(100% - 2em);
margin: 1em;
}
@media screen and (min-width: 480px) {
.animes-grid {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.animes-grid > anime,
.animes-grid > .anime {
width: calc(50% - 2em);
margin: 1em;
}
}
@media screen and (min-width: 768px) {
.animes-grid {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.animes-grid > anime,
.animes-grid > .anime {
width: calc(33.3333333333% - 2em);
margin: 1em;
}
}
@media screen and (min-width: 1024px) {
.animes-grid {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.animes-grid > anime,
.animes-grid > .anime {
width: calc(25% - 2em);
margin: 1em;
}
}
.animes-grid--home {
margin-top: 4em;
}
@media screen and (min-width: 1024px) {
.animes-grid--home {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.animes-grid--home > anime,
.animes-grid--home > .anime {
width: calc(16.6666666667% - 2em);
margin: 1em;
}
}
.animes-grid--relacionados {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.animes-grid--relacionados > anime,
.animes-grid--relacionados > .anime {
width: calc(100% - 2em);
margin: 1em;
}
@media screen and (min-width: 480px) {
.animes-grid--relacionados {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.animes-grid--relacionados > anime,
.animes-grid--relacionados > .anime {
width: calc(50% - 2em);
margin: 1em;
}
}
@media screen and (min-width: 768px) {
.animes-grid--relacionados {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.animes-grid--relacionados > anime,
.animes-grid--relacionados > .anime {
width: calc(50% - 2em);
margin: 1em;
}
}
.animes-grid--relacionados__title {
margin-top: 0;
margin-bottom: .5em;
font-weight: 600;
font-size: 1.3em;
}
.anime {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
@media screen and (max-width: 479px) {
.anime {
margin-bottom: 2em;
}
}
.anime--flip {
perspective: 2000;
}
.anime--flip:hover .anime--flip__flipper {
transform: rotateY(180deg);
}
.anime--flip__flipper {
position: relative;
transition: all .3s;
transform-style: preserve-3d;
}
.anime--flip__front,
.anime--flip__back {
backface-visibility: hidden;
}
.anime__img {
display: block;
margin: auto;
}
.ver-anime .ed-video {
margin-bottom: 1em;
background: rgba(255, 255, 255, 0.05);
position: relative;
}
@media screen and (max-width: 1023px) {
.ver-anime__mirrors:before {
font-size: .8em;
position: relative;
top: -.8em;
}
}
@media screen and (max-width: 479px) {
.ver-anime__mirrors {
margin-left: auto;
margin-right: auto;
}
}
.ver-anime__mirrors li {
display: inline-block;
}
.ver-anime__mirrors a {
display: block;
/*line-height: 2;*/
padding: 0 1em;
background: none;
}
@media screen and (max-width: 1023px) {
.ver-anime__mirrors a {
font-size: .8em;
}
}
@media screen and (max-width: 767px) {
.ver-anime__capitulos .hasta-tablet {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
}
.ver-anime__capitulos .hasta-tablet a {
height: 2.5rem !important;
line-height: 2.5rem !important;
margin: 0 1em;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
}
.ver-anime__capitulos .hasta-tablet a:before {
position: relative;
top: 0;
}
}
@media screen and (max-width: 767px) and (max-width: 479px) {
.ver-anime__capitulos .hasta-tablet a {
line-height: 1.2 !important;
text-align: center;
}
}
/*.ver-anime a {
border: 1px solid rgba(251, 75, 43, 0.3);
line-height: 2.5;
color: #FB4B2B;
font-size: .9em;
padding: 0 1em;
margin-bottom: 0 !important;
text-transform: uppercase;
display: inline-block;
}*/
@media screen and (max-width: 1023px) {
.ver-anime a {
font-size: .8em;
}
}
@media screen and (max-width: 767px) {
.link-veranime{
display: table;
margin-left: auto;
margin-right: auto;
margin-top: 1em;
position: relative;
}
/*.ver-anime a {
display: table;
margin-left: auto;
margin-right: auto;
margin-top: 1em;
position: relative;
}*/
}
@media screen and (max-width: 767px) {
.ver-anime .icon-derecha,
.ver-anime .icon-izquierda {
display: none;
}
}
.ver-anime .icon-izquierda {
left: 15px;
}
@media screen and (max-width: 479px) {
.ver-anime .icon-izquierda {
left: 7.5px;
}
}
.ver-anime .icon-derecha {
right: 15px;
}
@media screen and (max-width: 479px) {
.ver-anime .icon-derecha {
right: 7.5px;
}
}
.ver-anime .icon-izquierda-container {
padding-right: 0;
z-index: 20;
}
.ver-anime .icon-derecha-container {
padding-left: 0;
z-index: 20;
}
.anuncio a {
/*border: 1px solid rgba(251, 75, 43, 0.3);
line-height: 2.5;
color: #FB4B2B;
font-size: .9em;
padding: 0 1em;
margin-bottom: 0 !important;
text-transform: uppercase;
display: inline-block;
color: #fff;
border: 0;
display: block;*/
}
.anuncio iframe {
height: 170px;
width: 100%;
}
.loading {
color: #fff;
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.loading.active {
display: block;
}
.loading svg {
position: relative;
top: 4px;
left: 7px;
}
.loading circle {
fill: none;
stroke: #fff;
stroke-width: 3px;
stroke-dasharray: 62.8px;
animation: loader 2s infinite linear;
transform-origin: center center;
stroke-dashoffset: 62.8px;
}
@keyframes loader {
100% {
transform: rotate(1080deg);
stroke-dashoffset: 0;
}
}
.video-container {
z-index: 10;
}
@media screen and (max-width: 767px) {
.video-container {
margin-left: auto;
margin-right: auto;
}
}
.video-container .alert-info {
display: none;
line-height: 1;
padding: 10px 0 20px 0;
}
.video-container .alert-info.active {
display: block;
}
.video-container .alert-info a {
border: 0;
display: inline;
line-height: 1;
padding: 0;
text-transform: none;
}
.video-container .alert-info a:hover {
background: transparent;
}
.video-container .ed-video--dailymotion {
background-repeat: no-repeat;
background-size: cover;
}
.video-container .ed-video--dailymotion .icon-youtube {
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
font-size: 10em;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.serie_banner {
position: relative;
}
.serie_banner:hover img {
filter: none;
}
.serie_banner:hover:after {
background: none;
}
.serie_banner:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .3;
z-index: 20;
background: #000;
transition: all .3s;
}
.serie_banner__img {
filter: blur(5px);
width: 110% !important;
max-width: 110%;
position: absolute;
top: -25%;
left: -5%;
}
.serie-header {
position: relative;
top: -2.5em;
padding: 1em 0 0;
}
.serie-header__data {
padding-left: 210px;
}
@media screen and (max-width: 479px) {
.serie-header__data {
padding-left: 150px;
}
}
@media screen and (max-width: 479px) {
.serie-header__metadata {
margin-left: -150px;
}
}
.serie-header__img {
max-width: 190px;
border: 1px solid #111;
position: absolute;
z-index: 200;
}
@media screen and (min-width: 768px) {
.serie-header__img {
bottom: 0;
}
}
@media screen and (max-width: 479px) {
.serie-header__img {
width: 140px;
top: 0;
}
}
.serie-header__title {
font-weight: 700;
color: #5e5e5e;
font-size: 1.4em;
}
.serie-header__fecha {
margin-right: 1em;
margin-bottom: .5em;
}
.serie-header__tags,
.serie-header__genero {
list-style: none;
display: -ms-flexbox;
display: flex;
margin: 0 1em .5em 0;
padding-left: 0;
}
.serie-header__tags h3,
.serie-header__genero h3 {
display: -ms-inline-flexbox;
display: inline-flex;
line-height: 2;
font-size: 1em;
font-weight: 300;
margin: 0 .5em 0 0;
}
.serie-description + a:after {
content: " +";
}
.serie-description + a.menos:after {
content: " -";
}
.serie-capitulos {
margin-bottom: 3em;
}
h2 + .emision {
line-height: 2.5;
padding-left: 1em;
margin-bottom: 2em;
margin-top: -2.5em;
}
@media screen and (max-width: 767px) {
.banner-home {
display: none;
}
}
.slider-home {
margin-top: 1em;
margin-bottom: 1em;
display: table;
}
@media screen and (max-width: 767px) {
.slider-home__description {
display: block;
width: 100%;
text-align: center;
}
}
@media screen and (min-width: 768px) {
.slider-home__title {
text-align: left;
}
}
@media screen and (max-width: 767px) {
.slider-home__synopsis {
display: none;
}
}
.slider-home__img-container {
display: table-cell;
width: 50%;
text-align: right;
}
.slider-home__img-container a {
display: block;
float: right;
}
.slider-home__img-container img {
box-shadow: 0 15px 25px -10px black;
}
@media screen and (max-width: 767px) {
.main-aside {
margin-left: 15px;
margin-right: 15px;
}
}
@media screen and (min-width: 768px) {
.main-aside {
display: block !important;
}
}
.aside__title {
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
font-size: 1.2em;
margin: 0 0 1em;
}
.filtro {
padding: 0 0 1em;
}
.login-form form {
background: rgba(0, 0, 0, 0.6);
border-bottom: 1px solid rgba(251, 75, 43, 0.2);
padding: 1em;
margin: 1em auto;
box-shadow: 0 10px 20px -10px #000;
animation: login 1s;
animation-fill-mode: forwards;
position: relative;
top: -500px;
width: 80%;
}
@media screen and (min-width: 768px) {
.login-form form {
width: 60%;
}
}
@media screen and (min-width: 1024px) {
.login-form form {
width: 40%;
}
}
.login-form__title {
border-bottom: none;
}
.login-form label {
color: rgba(255, 255, 255, 0.5);
display: inline-block;
margin-bottom: .3em;
}
.login-form input {
display: block;
width: 100%;
border: none;
height: 1.8em;
font-size: .9em;
margin-bottom: 1em;
padding-left: .7em;
}
.login-form [type="submit"] {
background: #FB4B2B;
line-height: 2.5rem;
height: 2.5rem;
margin-top: 2em;
text-transform: uppercase;
font-weight: bold;
color: #fff;
cursor: pointer;
}
.login-form [type="submit"]:hover {
background: #fb3e1c;
}
@keyframes login {
from {
}
to {
top: 0;
}
}
.anime-form {
font-size: 16px;
padding: 1em 0;
}
.anime-form__title {
border-bottom: none !important;
}
.anime-form [type="text"],
.anime-form [type="date"],
.anime-form [type="number"] {
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
height: 2rem;
line-height: 2rem;
padding: 0 .5em;
margin-bottom: 1em;
display: block;
width: 100%;
color: rgba(255, 255, 255, 0.7);
}
.anime-form [type="text"]::-webkit-input-placeholder,
.anime-form [type="date"]::-webkit-input-placeholder,
.anime-form [type="number"]::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.1);
}
.anime-form [type="text"]:-ms-input-placeholder,
.anime-form [type="date"]:-ms-input-placeholder,
.anime-form [type="number"]:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.1);
}
.anime-form [type="text"]::placeholder,
.anime-form [type="date"]::placeholder,
.anime-form [type="number"]::placeholder {
color: rgba(255, 255, 255, 0.1);
}
.anime-form [type="text"]:focus,
.anime-form [type="date"]:focus,
.anime-form [type="number"]:focus {
outline: none;
}
.anime-form [type="number"] {
line-height: 1;
width: 90%;
}
.anime-form [type="file"] {
margin-bottom: 1em;
}
.anime-form label,
.anime-form .texto {
margin-bottom: .3em;
color: rgba(251, 75, 43, 0.6);
display: block;
}
.anime-form .select2-container {
width: 100% !important;
margin-bottom: 1em;
}
.anime-form textarea {
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
margin-bottom: 1em;
color: rgba(255, 255, 255, 0.7);
}
.anime-form [type="submit"] {
background: #FB4B2B;
border: none;
border: none;
margin-top: 1em;
line-height: 2rem;
padding: 0 1.5em;
color: #fff;
text-transform: uppercase;
cursor: pointer;
}
.anime-form [type="submit"]:hover {
background: #fb3e1c;
}
.anime-form [type="file"] {
font-size: .9em;
font-style: italic;
}
.anime-form fieldset {
border: 1px solid rgba(255, 255, 255, 0.1) !important;
background: rgba(255, 255, 255, 0.02);
width: 100% !important;
margin-bottom: 1.5em;
}
.anime-form legend {
color: #ffcd3c;
}
.anime-form h3 {
margin-top: 0;
margin-bottom: .2em;
font-size: 1em;
font-weight: 600;
}
.anime-form h3 + img {
margin-bottom: 1em;
}
.anime-form .select2-container--default .select2-selection--multiple .select2-selection__choice,
.anime-form .select2-container--default .select2-selection--single,
.anime-form .select2-container--default .select2-selection--multiple {
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
font-weight: 600;
}
.anime-form .select2-container--default .select2-selection--single .select2-selection__rendered {
color: rgba(255, 255, 255, 0.7);
}
.code {
font-family: "Consolas", "Lucida Console";
}
.select2-results__option {
color: #000;
}
.redirecciones__table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.redirecciones__table,
.redirecciones__table td,
.redirecciones__table th {
border: 1px solid rgba(255, 255, 255, 0.1);
}
.redirecciones__table th {
color: rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.08);
font-weight: 600;
text-transform: uppercase;
font-size: .9em;
line-height: 2;
}
.redirecciones__table td {
padding: .6em 1em;
font-size: .85em;
color: rgba(255, 255, 255, 0.5);
}
.redirecciones__table td:first-child {
padding: 0;
text-align: center;
}
.redirecciones__table a {
color: #FB4B2B;
display: block;
text-align: center;
}
.redirecciones__table a:hover {
text-decoration: underline;
}
.redirecciones__table .first {
width: 120px;
text-align: center;
}
.redirecciones__table .zero {
text-align: center;
width: 4em;
}
.redirecciones__title,
.redirecciones__borrar input,
.banners__borrar input {
background: #FB4B2B;
display: table;
color: #fff;
text-transform: uppercase;
font-weight: 300;
font-size: 1.2em;
line-height: 2;
padding: 0 1em;
}
.redirecciones__title:hover,
.redirecciones__borrar input:hover,
.banners__borrar input:hover {
background: #ef2905;
}
.redirecciones__title a,
.redirecciones__borrar input a,
.banners__borrar input a {
color: inherit;
}
.redirecciones__borrar input {
border: none;
font-size: .8em;
background: darkred;
line-height: 2.5;
margin: 0 auto 1em;
}
.redirecciones__filtro {
margin-bottom: 1em;
}
.redirecciones__filtro .consulta {
line-height: 1.8rem;
padding: 0 .7em;
width: calc(100% - 90px);
font-size: .8em;
font-style: italic;
border: none;
background: rgba(255, 255, 255, 0.3);
color: #fff;
}
.redirecciones__filtro .submit {
background: #FB4B2B;
border: 0;
color: #fff;
display: inline-block;
font-weight: 300;
height: 28px;
padding: 0 1em;
vertical-align: middle;
width: 80px;
}
#fakeplayer,
#fakeplayer img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.bloques-descargas {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.enlace-descarga {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
margin: 4em auto;
}
.enlace-descarga a {
border: 1px solid rgba(251, 75, 43, 0.3);
color: #fb4b2b;
cursor: pointer;
display: inline-block;
line-height: 2.5em;
margin-bottom: 0;
padding: 0 1.5em;
}
.enlace-descarga a:hover {
background: #fb4b2b;
color: #fff;
}
.bloque__home,
.bloque__serie-superior,
.bloque__descargas-centro {
height: 110px;
margin: 0 auto;
max-width: 720px;
overflow: hidden;
}
.bloque__capitulo-centro {
margin-top: 3em;
}
.bloque__capitulo-izquierda,
.bloque__capitulo-derecha {
display: none;
}
@media screen and (min-width: 1360px) {
.bloque__capitulo-izquierda,
.bloque__capitulo-derecha {
display: block;
height: 600px;
position: fixed;
top: 56px;
width: 160px;
z-index: 0;
}
}
.bloque__capitulo-izquierda {
left: 0;
}
.bloque__capitulo-derecha {
right: 0;
}
.bloque__descargas-izquierda,
.bloque__descargas-derecha {
height: 250px;
width: 300px;
}
.banners__table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.banners__table,
.banners__table td,
.banners__table th {
border: 1px solid rgba(255, 255, 255, 0.1);
}
.banners__table th {
color: rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.08);
font-weight: 600;
text-transform: uppercase;
font-size: .9em;
line-height: 2;
}
.banners__table td {
padding: .6em 1em;
font-size: .85em;
color: rgba(255, 255, 255, 0.5);
}
.banners__table td:first-child {
padding: 0;
text-align: center;
}
.banners__table a {
color: #FB4B2B;
display: block;
text-align: center;
}
.banners__table a:hover {
text-decoration: underline;
}
.banners__table .first {
width: 120px;
text-align: center;
}
.banners__table .zero {
text-align: center;
width: 4em;
}
.banners__title {
background: #FB4B2B;
display: table;
color: #fff;
text-transform: uppercase;
font-weight: 300;
font-size: 1.2em;
line-height: 2;
padding: 0 1em;
}
.banners__title:hover {
background: #ef2905;
}
.banners__title a {
color: inherit;
}
.banners__borrar input {
border: none;
font-size: .8em;
background: darkred;
line-height: 2.5;
margin: 0 auto 1em;
}
.banners__filtro {
margin-bottom: 1em;
}
.banners__filtro .consulta {
line-height: 1.8rem;
padding: 0 .7em;
width: calc(100% - 90px);
font-size: .8em;
font-style: italic;
border: none;
background: rgba(255, 255, 255, 0.3);
color: #fff;
}
.banners__filtro .submit {
background: #FB4B2B;
border: 0;
color: #fff;
display: inline-block;
font-weight: 300;
height: 28px;
padding: 0 1em;
vertical-align: middle;
width: 80px;
}
h1 {
position: relative;
vertical-align: middle;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}
h1 a {
font-size: .5em;
height: 1.8rem;
background: #FB4B2B;
vertical-align: middle;
color: #eee;
padding: 0 .8em;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
margin-left: 2em;
}
header + ul {
background: #222;
color: #FB4B2B;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
font-size: 1em;
}
header + ul:before {
content: "Corrija los siguientes errores e intente nuevamente: ";
display: block;
color: #ffcd3c;
font-size: .9em;
margin-bottom: .5em;
}
.fakeplayer {
position: relative;
display: block;
}
.fakeplayer:after {
font-family: ed-grid, sans-serif;
font-size: 3em;
content: "n";
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 50;
top: 0;
left: 0;
display: -ms-flexbox;
display: flex;
font-style: normal;
transition: all .3s;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
color: rgba(255, 255, 255, 0.95);
opacity: 0;
}
.fakeplayer:before {
position: absolute;
content: "";
top: 50%;
left: 50%;
color: #fff;
transform: translate(-55%, -50%);
width: 3em;
height: 3em;
border: 2px solid rgba(255, 255, 255, 0.5);
z-index: 100;
opacity: 0;
border-radius: 50%;
}
.fakeplayer:hover:after,
.fakeplayer:hover:before {
opacity: 1;
}
.serie_poster {
width: 100%;
height: 0;
overflow: hidden;
padding-bottom: 150%;
}
.serie_banner {
width: 100%;
height: 0;
overflow: hidden;
padding-bottom: 25%;
}
.capitulo_poster {
width: 100%;
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
}
.capitulo_poster,
.serie_banner,
.serie_poster {
display: block;
position: relative;
overflow: hidden;
}
.capitulo_poster img,
.serie_banner img,
.serie_poster img {
display: block;
width: 100%;
position: absolute;
}
.boolean-group {
-ms-flex-align: center;
align-items: center;
display: -ms-flexbox;
display: flex;
margin: 1em 0;
}
.boolean-group .boolean-button {
display: none;
}
.boolean-group .boolean-button + label {
display: inline-block;
margin-right: .5em;
width: 64px;
height: 32px;
background: #FB4B2B;
position: relative;
}
.boolean-group .boolean-button + label:after,
.boolean-group .boolean-button + label:before {
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
content: "SÃ";
display: -ms-flexbox;
display: flex;
font-size: .8em;
width: 32px;
height: 32px;
background: #111;
line-height: 32px;
text-align: center;
color: #fff;
position: absolute;
}
.boolean-group .boolean-button + label:after {
content: "No";
background: none;
left: 32px;
}
.boolean-group .boolean-button:checked + label:before {
background: none;
}
.boolean-group .boolean-button:checked + label:after {
background: #111;
}
.main-search-boxx > form {
position: relative;
height: 1.8rem;
display: -ms-flexbox;
display: flex;
-ms-flex-align: stretch;
align-items: stretch;
}
.pcd_clase{
margin: auto 0% 0% 11%;
position:relative;
left:-10px;
}
/* MENU PRINCIPAL */
html {
background: #E9EAED;
}
header { /* LISTO */
display: -ms-flexbox;
display: flex;
height: 3.5em;
background: #E9EAED;
border-bottom: 1px solid rgba(196, 204, 201, 0.3);
color: #185eed;
}
header.home,
header.ver {
background: #fff;
}
header a { /* LISTO */
font-weight: 600;
font-size: .95em;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #185eed;
}
header a:hover { /* LISTO */
background: rgba(24, 94, 237, 0.6);
color: #eee;
}
h1 {
position: relative;
vertical-align: middle;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}
h1 a {
font-size: .5em;
height: 1.8rem;
background: #FB4B2B;
vertical-align: middle;
color: #eee;
padding: 0 .8em;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
margin-left: 2em;
}
header + ul {
background: #222;
color: #FB4B2B;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
font-size: 1em;
}
header + ul:before {
content: "Corrija los siguientes errores e intente nuevamente: ";
display: block;
color: #ffcd3c;
font-size: .9em;
margin-bottom: .5em;
}
/* BUSCADOR */
.main-search-box > form .icon-buscar,
.main-search-box > form .icon-cerrar { /* LISTO */
display: inline-block;
height: 1.8rem;
margin-left: .2em;
width: 1.8rem;
line-height: 1.8rem;
text-align: center;
color: #fff;
background: #185eed;
}
.main-search-box > form input { /* LISTO */
line-height: 1.8rem;
padding: 0 .7em;
width: 10em;
margin-left: 1em;
font-size: .8em;
font-style: italic;
border: none;
background: rgb(226, 233, 230);
color: #070807;
}
.main-search-boxx > form input {
line-height: 1.8rem;
padding: 0 .7em;
width: 9em;
margin-left: 1em;
font-size: .8em;
font-style: italic;
border: none;
background: rgb(226, 233, 230);
color: #070807;
}
.main-search-boxx > form input {
transition: all .4s;
}
.main-search-boxx > form .icon-buscar,
.main-search-boxx > form .icon-cerrar {
display: inline-block;
height: 1.8rem;
margin-left: .2em;
width: 1.8rem;
line-height: 1.8rem;
text-align: center;
color: #fff;
background: #185eed;
}
/* SLIDER CENTRAL */
.slick-prev:before,
.slick-next:before {
font-family: "slick";
font-size: 20px;
line-height: 1;
color: #847f7f;
opacity: 0.75;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.banner-home {
background: #E9EAED;
padding: 1.5em 0;
overflow: hidden;
}
.slider-home__description {
display: table-cell;
width: 50%;
vertical-align: middle;
padding: 0 2em;
font-size: .85em;
color: rgba(95, 88, 88);
}
.slider-home__title {
color: #080707 !important;
font-weight: 300;
text-transform: uppercase;
margin: 0 0 .5em 0;
}
/* CAPITULOS RECIENTES */
#main {
background: #fff;
padding-bottom: 3em;
-ms-flex: auto;
flex: auto;
}
main h1 {
margin-top: 0;
text-transform: uppercase;
font-weight: 300;
color: #0c0c0c;
border-bottom: 1px solid rgba(11, 12, 14, 0.2);
}
.capitulos-grid__item__link {
font-size: .9em;
font-style: italic;
color: #185eed;
display: block;
margin-top: auto;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Open Sans", sans-serif;
font-weight: 300;
text-transform: normal;
color: rgba(21, 22, 23, 0.7);
}
h1 {
color: rgba(21, 22, 23, 0.7);
font-size: 2em;
line-height: 1.2;
}
.video-container .alert-infos {
display: none;
line-height: 0px;
padding: 0px 0 0px 0;
font-size: 11px;
font-family: Arial;
color: #185eed;
text-align: right;
width: 78%;
}
.video-container .alert-infos a {
color: #185eed;
background-color: transparent;
text-decoration: none;
}
.video-container .alert-infos a:hover {
color: #fff;
background-color: transparent;
text-decoration: none;
}
@media screen and (max-width: 767px) {
h1 {
font-size: 1.2em;
}
.video-container .alert-infos {
width: 100%;
}
}
/* SERIES RECIENTES */
.anime--flip__back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #847f7f;
transform: rotateY(180deg);
}
.anime__data {
font-size: .8em;
background: rgba(24, 94, 237, 0.6);
padding: 1em;
color: #0c0f0e;
-ms-flex: auto;
flex: auto;
position: relative;
}
.anime__synopsis {
display: -ms-flexbox;
display: flex;
text-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 1em;
color: #fff;
font-size: .82em;
text-overflow: ellipsis;
overflow: hidden;
}
.anime__title {
font-size: 1.1em;
font-weight: 600;
color: #fff;
margin: 0 0 .5em;
text-transform: uppercase;
}
.anime__title a {
color: #fff;
}
.anime__status {
background: #ffcd3c;
padding: 0 .8em;
line-height: 2rem;
display: inline-block;
position: absolute;
right: 0;
top: -2rem;
color: #111;
text-transform: uppercase;
font-weight: 600;
}
/* FOOTER */
.main-footer {
background: #E9EAED;
padding: 1em 0;
margin-top: auto;
border-top: 1px solid rgba(196, 204, 201, 0.3);
}
.main-footer__title {
margin: 0 0 .5em;
color: #185eed;
font-weight: 400;
font-size: 1.2em;
}
.main-footer__description {
color: rgba(95, 88, 88);
font-size: .8em;
line-height: 1.2;
}
.main-footer .sociales a {
background: #ffcd3c;
margin: 0 .5em;
width: 1.5em;
display: inline-block;
text-align: center;
height: 1.5em;
line-height: 1.5em;
border-radius: 50%;
color: #111;
opacity: .5;
}
/* INFORMACION ANIMES */
.serie-header h1 {
font-size: 1.8em;
text-transform: uppercase;
color: #185eed;
font-weight: 300;
margin: 0;
-ms-flex-pack: start;
justify-content: flex-start;
}
@media screen and (max-width: 479px) {
.serie-header h1 {
font-size: 1.2em;
}
.video-container .alert-infos {
width: 100%;
}
}
.serie-header__tags a,
.serie-header__genero a {
background: none;
border: 1px solid rgba(24,94,237, 0.5);
color: #185EED;
display: block;
line-height: 1.6;
margin: 0 .5em;
padding: 0 .7em;
}
.serie-header__tags a:hover,
.serie-header__genero a:hover {
background: rgba(24,94,237, 0.9);
color: #fff;
}
.serie-description {
padding-top: .5em;
font-size: .85em;
color: rgba(21, 22, 23, 0.7);
margin: 0;
}
.serie-description + a {
color: #185eed;
cursor: pointer;
font-size: .85em;
}
.serie-capitulos__title {
color: #185eed;
text-transform: uppercase;
margin: 1em 0 1.5em;
font-size: 2.5em;
font-weight: 300;
border-bottom: 1px solid rgba(24,94,237, 0.5);
}
.serie-capitulos__list__item {
border-bottom: 1px solid rgba(24, 94, 237, 0.3);
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-left: .3em;
}
.serie-capitulos__list__item:hover {
background: #185eed;
-ms-flex-pack: justify;
justify-content: space-between;
}
.serie-capitulos__list__item:hover span {
-ms-flex-order: 1;
order: 1;
color: #fff;
}
.serie-capitulos__list__item:hover a {
padding-left: 2em;
font-weight: 700;
color: #fff;
}
.serie-capitulos__list__item span {
color: rgba(24, 94, 237, 0.6);
font-size: 1.3em;
margin-right: .5em;
}
.serie-capitulos__list__item a {
color: rgba(62, 62, 62, 0.7);
display: block;
line-height: 3;
-ms-flex: 1;
flex: 1;
}
.serie-capitulos__list__item a:visited {
color: rgba(41, 170, 84);
}
.serie-capitulos__list__item a:visited:hover {
color: #ffcd3c;
}
.emision {
background: rgba(41, 170, 84, 0.6) !important;
color: #fff !important;
border: none !important;
}
.serie-header__metadata {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
padding-top: 1em;
font-size: .8em;
color: rgba(95,88,88, 8.0);
}
/* ANIME BUSCADOR AVANZADO */
.button {
display: inline-block;
background: #c7cdda;
border: 1px solid #185eed;
line-height: 2.8;
padding: 0 1.5em;
color: #185eed;
text-transform: uppercase;
border-radius: .2em;
outline: none;
}
.button:hover,
.button:active {
color: #185eed;
background: none;
}
.button:active {
transform: scale(0.95);
}
.filtro__title {
font-weight: 600;
text-transform: uppercase;
background: rgba(24, 94, 237, 0.6);
line-height: 2;
padding: 0 .5em;
font-size: .9em;
margin: 0 0 1em;
}
.filtro__option {
font-size: .85em;
color: rgba(15, 14, 14, 0.5);
border-bottom: 1px solid #C4CCC9;
line-height: 1.8;
}
.filtro [type="radio"] {
margin-right: .5em;
}
.filtro + input {
background: #FB4B2B;
border: none;
width: 100%;
line-height: 2;
text-transform: uppercase;
opacity: .8;
cursor: pointer;
border-top: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 2px solid rgba(0, 0, 0, 0.4);
color: #fff;
}
.filtro + input:hover {
opacity: 1;
}
.filtro .icon-fecha {
position: relative;
top: -2px;
}
.ver-filtros {
display: table;
margin: 1em 0;
font-size: .85rem;
line-height: 2.5;
padding: .3em 0;
width: 100%;
text-align: center;
}
.filtro-nuevo {
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
list-style: none;
display: none;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.filtro-nuevo.mostrar {
display: -ms-flexbox;
display: flex;
}
.filtro-nuevo li {
display: block;
line-height: 2;
padding: 0 1em;
background: #185eed;
margin: .4em;
-ms-flex: auto;
flex: auto;
text-align: center;
cursor: pointer;
color: #fff;
}
.filtro-nuevo li:hover,
.filtro-nuevo li.active {
background: #ffcd3c;
color: #111;
}
.filtros-avanzados {
display: none;
}
.activar-filtros {
padding-left: 0;
list-style: none;
}
.activar-filtros li {
color: #7e7b7b;
line-height: 3;
border-bottom: 1px solid #C4CCC9;
cursor: pointer;
padding-left: 1em;
margin-bottom: .5em;
}
.activar-filtros li:hover,
.activar-filtros li.active {
background: #185eed;
color: #fff;
}
.filtro .select2 {
width: 100% !important;
}
#select2-anio-results,
#select2-letra-results {
color: #444 !important;
}
#select2-anio-results .select2-results__options,
#select2-letra-results .select2-results__options {
color: #444 !important;
}
.main-aside {
background: #E9EAED;
border: 1px solid #C4CCC9;
padding-bottom: 2em;
}
/* ANIME BUSCADOR PAGINACION */
.pager {
list-style: none;
margin-top: 1.7rem;
margin-bottom: 0;
padding-left: 0;
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-pack: center;
justify-content: center;
}
.pager__item {
background: #C4CCC9;
margin: 0 .1em;
border-radius: .2em;
}
.pager__item.active {
background-color: #185eed;
border-radius: 50%;
}
.pager__item.active .pager__link:hover {
color: #eee;
}
.pager__link {
display: block;
height: 1.7rem;
width: 1.7rem;
line-height: 1.7rem;
text-align: center;
color: #fff;
font-size: 1.02rem;
}
.pager__link.first,
.pager__link.last {
width: 2.55rem;
}
.pager__link:hover {
color: #62615e;
}
/* VER ANIMES */
#extratexto {
color: rgba(95, 88, 88);
}
.ver-anime {
background: #3e3e3e; /* #3e3e3e */
padding-bottom: 1.5em;
}
.ver-anime h1 {
color: #eee;
font-weight: normal;
text-transform: uppercase;
margin: 0 0 1em;
border-bottom: none;
}
.ver-anime h1 a {
color: rgba(255, 255, 255, 0.7);
font-size: .4em;
line-height: 1.8rem;
}
/*.ver-anime .ed-video {
margin-bottom: 1em;
background: rgba(255, 255, 255, 0.05);
position: relative;
}*/
.ver-anime__mirrors {
padding-left: 0;
list-style: none;
margin-top: 0;
margin-bottom: 0;
}
.ver-anime__mirrors:before {
content: "Opciones ";
margin-right: .5em;
color: #fff;
}
.ver-anime__mirrors a:hover,
.ver-anime__mirrors a:active,
.ver-anime__mirrors a.active {
background: #185eed;
color: #fff;
border-color: #185eed;
}
.link-veranime{
border: 1px solid rgba(24, 94, 237, 0.8);
line-height: 2.5;
color: #185eed;
font-size: .9em;
padding: 0 1em;
margin-bottom: 0 !important;
text-transform: uppercase;
display: inline-block;
}
.ver-anime a:hover {
background: #185eed;
color: #eee;
}
.ver-anime .icon-derecha,
.ver-anime .icon-izquierda {
border: 1px solid rgba(24, 94, 237, 0.9);
color: #185eed;
width: 2em;
height: 5em;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 1.2em;
opacity: .8;
position: relative;
}
.ver-anime .icon-derecha:hover,
.ver-anime .icon-izquierda:hover {
background: #185eed;
color: #fff;
}
.video-container .ed-video--dailymotion .icon-youtube:hover,
.video-container .ed-video--dailymotion .icon-youtube:active {
color: #ffcd3c;
}
/* WIDGET */
.WdgtCn{
border-radius:3px;
box-shadow:0 0 0px 0 rgba(0,0,0,.1);
}
.Title{
font-weight:700;
font-size:12px;
line-height:15px;
max-height:45px;
overflow:hidden;
margin-bottom:10px;
}
.hola {
line-height: 20px;
background-color: #185eed;
position: absolute;
left: -2px;
bottom: -2px;
border-radius: 0 10px 0 0;
font-size: 11px;
color: #fff;
font-weight: 700;
padding: 0 8px;
}
.Title a:hover, .Title a:active {
color: #01bcf3;
}
#Ytaila,
#Ytaila img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.Ytaila {
position: relative;
display: block;
}
.Ytaila:after {
font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f06e";
font-size: 3em;
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 50;
top: 0;
left: 0;
display: -ms-flexbox;
display: flex;
font-style: normal;
transition: all .3s;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
color: rgba(255, 255, 255, 0.95);
opacity: 0;
}
.Ytaila:before {
position: absolute;
content: "";
top: 50%;
left: 50%;
color: #fff;
transform: translate(-55%, -50%);
width: 3em;
height: 3em;
z-index: 100;
opacity: 0;
border-radius: 50%;
}
.Ytaila:hover:after,
.Ytaila:hover:before {
opacity: 1;
}
/* MENU ANDROID */
#navfondo {
background: #fff;
}
#navtitulo {
background: #E9EAED;
color: rgba(24, 94, 237, 0.8);
text-align:center;
}
.drawer-hamburger-icon{
position:relative;
display:block;margin-top:10px
}
.drawer-hamburger-icon,
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before{
width:100%;height:2px;
-webkit-transition:all .6s cubic-bezier(.19,1,.22,1);
transition:all .6s cubic-bezier(.19,1,.22,1);
background-color:#185eed;
}
.activar-filtrosx {
padding-left: 0;
list-style: none;
}
.activar-filtrosx li {
color: #fff;
line-height: 3;
border-bottom: 1px solid rgba(196, 204, 201, 0.5);
cursor: pointer;
padding-left: 1em;
margin-bottom: .5em;
}
.activar-filtrosx li:hover,
.activar-filtrosx li.active {
background: rgba(255, 205, 60, 0.6);
color: #000;
}
#link_bar a {
font-weight: 600;
font-size: .95em;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #185eed;
}
#link_bar a:hover {
background: 0;
color: #eee;
}
/* DESCARGA */
.enlace-descarga a {
border: 1px solid rgba(24, 94, 237, 0.8);
color: #185eed;
cursor: pointer;
display: inline-block;
line-height: 2.5em;
margin-bottom: 0;
padding: 0 1.5em;
}
.enlace-descarga a:hover {
background: #185eed;
color: #eee;
}
.sustituida-modificada {
background: url('/files/img/ajax-loader-azul.gif') no-repeat;
background-size: cover;
position: relative;
display: flex;
flex-flow: row;
box-sizing:border-box;
width:80px;
height:80px;
padding-left:80px;
overflow:hidden;
}
No olvides guardar los cambios presionando el botón "GUARDAR". Ahora nos vamos a dirigir a > Editar HTML, </body> y pegaremos el siguiente código:<div class="ed-container">
<div class="animes-grid">
<article class="anime">
<div class="anime--flip">
<div class="anime--flip__flipper">
<div class="anime--flip__front">
<a href="https://www.animeyt.tv/shinmai-maou-no-testament" class="anime__img-container">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb5YgBABtFUubb6YcHq560rax1p1xPkjBQAM17E8qY6gbAuIOk1riLymciaXEdD6Hq82ikfne7ondg5JFFI6zORqdg1bNPo_IPg9c1tpxH7wJp7LSvRp_FqsHqNWKsOCDSf1FnN1B6YpQ/s1600/s_1018_poster.jpg" alt="Shinmai Maou no Testament" class="anime__img">
</a>
</div>
<div class="anime--flip__back">
<a href="https://www.animeyt.tv/shinmai-maou-no-testament" class="anime__synopsis-container">
<p class="anime__synopsis js-synopsis-reduce">Basara Toujo es un estudiante de instituto, un buen día su padre le hace una extraña pregunta, “¿Querías una hermana pequeña?”, para acto seguido anunciar que se ha vuelto a casar (más)</p>
</a>
</div>
</div>
</div>
<div class="anime__data">
<h3 class="anime__title">Shinmai Maou no Testament <small>(Serie)</small></h3>
<div class="anime__date"> <span class="icon-fecha"></span> 08-12-2015
<span class="anime__status">Finalizado</span>
</div>
<div class="anime__genres"> Generos:
<span class="anime__genre">Acción</span>
<span class="anime__genre">Romance</span>
<span class="anime__genre">Fantasía</span>
<span class="anime__genre">Ecchi</span>
<span class="anime__genre">Harem</span>
</div>
<div class="anime__tags"> Tags:
<span class="anime__tag">Shinmai</span>
</div>
</div>
</article>
<article class="anime">
<div class="anime--flip">
<div class="anime--flip__flipper">
<div class="anime--flip__front">
<a href="https://www.animeyt.tv/shinmai-maou-no-testament-burst" class="anime__img-container">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp4oiSODi6qGi-B7OvsZkfW-lOBhL_VWJu0fxtX7JZKTcqdaKtSBcXcLByrYnt1qtys9oGGbVGaPnBSC4NvTEzsbKQlE2AVzOtDZbQUklAE8MMLp5s93oY3sw_HauNmjhCk_hVLGIdat4/s1600/s_1260_poster.jpg" alt="Shinmai Maou No Testament BURST" class="anime__img">
</a>
</div>
<div class="anime--flip__back">
<a href="https://www.animeyt.tv/shinmai-maou-no-testament-burst" class="anime__synopsis-container">
<p class="anime__synopsis js-synopsis-reduce">Segunda temporada Shinmai Maou no Testament.
(más)</p>
</a>
</div>
</div>
</div>
<div class="anime__data">
<h3 class="anime__title">Shinmai Maou No Testament BURST <small>(Serie)</small></h3>
<div class="anime__date"> <span class="icon-fecha"></span> 10-10-2015
<span class="anime__status">Finalizado</span>
</div>
<div class="anime__genres"> Generos:
<span class="anime__genre">Acción</span>
<span class="anime__genre">Romance</span>
<span class="anime__genre">Fantasía</span>
<span class="anime__genre">Ecchi</span>
<span class="anime__genre">Harem</span>
</div>
<div class="anime__tags"> Tags:
<span class="anime__tag">Shinmai</span>
</div>
</div>
</article>
<article class="anime">
<div class="anime--flip">
<div class="anime--flip__flipper">
<div class="anime--flip__front">
<a href="https://www.animeyt.tv/shinmai-maou-no-testament-departures" class="anime__img-container">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRFWHmocA0sQ9uaZIhcl7zciAqPYWEYB7afHUFJ1g3jKZyTAJLOu2mwAB5JkyxQvbrRQJiRzgXJkGKu7F6SUJFMyUCZGqatiCWlNcNCcBq2JeXkAM0mw1HP_kb9ISi3U-oelV7QkKsjRg/s1600/s_3426_poster.jpeg" alt="Shinmai Maou no Testament Departures" class="anime__img">
</a>
</div>
<div class="anime--flip__back">
<a href="https://www.animeyt.tv/shinmai-maou-no-testament-departures" class="anime__synopsis-container">
<p class="anime__synopsis js-synopsis-reduce">OVA que hace de secuela directa para Shinmai Maou no Testament Burst. (más)</p>
</a>
</div>
</div>
</div>
<div class="anime__data">
<h3 class="anime__title">Shinmai Maou no Testament Departures <small>(Ova)</small></h3>
<div class="anime__date"> <span class="icon-fecha"></span> 06-03-2018
<span class="anime__status">Finalizado</span>
</div>
<div class="anime__genres"> Generos:
<span class="anime__genre">Acción</span>
<span class="anime__genre">Demonios</span>
<span class="anime__genre">Ecchi</span>
<span class="anime__genre">Fantasía</span>
<span class="anime__genre">Harem</span>
<span class="anime__genre">Magia</span>
</div>
<div class="anime__tags"> Tags:
<span class="anime__tag">Shinmai</span>
</div>
</div>
</article>
</div>
<div class="ed-container bloques-descargas">
<div class="bloque bloque__descargas-izquierda ed-item">
<script type="text/javascript">
if(!window.BB_a) { BB_a = [];} if(!window.BB_ind) { BB_ind = 0; } if(!window.BB_vrsa) { BB_vrsa = 'v3'; }if(!window.BB_r) { BB_r = Math.floor(Math.random()*1000000000)} BB_ind++; BB_a.push({ "pl" : 42492, "index": BB_ind});
</script>
<script type="text/javascript">
document.write('<scr'+'ipt async data-cfasync="false" id="BB_SLOT_'+BB_r+'_'+BB_ind+'" src="//st.bebi.com/bebi_'+BB_vrsa+'.js"></scr'+'ipt>');
</script><script async="" data-cfasync="false" id="BB_SLOT_410975708_2" src="//st.bebi.com/bebi_v3.js"></script>
</div>
<div class="bloque bloque__descargas-derecha ed-item">
<script type="text/javascript">
if(!window.BB_a) { BB_a = [];} if(!window.BB_ind) { BB_ind = 0; } if(!window.BB_vrsa) { BB_vrsa = 'v3'; }if(!window.BB_r) { BB_r = Math.floor(Math.random()*1000000000)} BB_ind++; BB_a.push({ "pl" : 42491, "index": BB_ind});
</script>
<script type="text/javascript">
document.write('<scr'+'ipt async data-cfasync="false" id="BB_SLOT_'+BB_r+'_'+BB_ind+'" src="//st.bebi.com/bebi_'+BB_vrsa+'.js"></scr'+'ipt>');
</script><script async="" data-cfasync="false" id="BB_SLOT_410975708_3" src="//st.bebi.com/bebi_v3.js"></script>
</div>
</div>
</div>
Guarda los cambios y listo. Con eso ya tenemos instalado el "El efecto flip de AnimeYT.tv" sin jquery.
Opciones
De momento solo he incluido 2 opciones y se encuentran en el código javascript, están resaltadas en amarillo y por defecto contienen el valor 600 y 1000. En la siguiente tabla se explican estos valores:
showButton number Desplazamiento del scroll antes de mostrar el botón
scrollSpeed number Velocidad de desplazamiento (1000 = 1 segundo)
Espero que este aporte les sea de utilidad. Si fue asi no olvides compartir este articulo en todas tus redes sociales, es algo que siempre valoro mucho.
