/* ============================================== */
/* FONTS */
/* ============================================== */

@font-face {
  font-family: "Ionicons";
  src: url("../fonts/ionicons.eot?v=2.0.0");
  src: url("../fonts/ionicons.eot?v=2.0.0#iefix") format("embedded-opentype"), url("../fonts/ionicons.ttf?v=2.0.0") format("truetype"), url("../fonts/ionicons.woff?v=2.0.0") format("woff"), url("../fonts/ionicons.svg?v=2.0.0#Ionicons") format("svg");
  font-weight: normal;
  font-style: normal;
}

ion-icon{
  font-size: 20px;
  margin:3px 10px 0 0;
  padding: 0;
  display: block;
  float: left;
}

table ion-icon{
  margin: 0 0 0 -3px;
}

.btn-editar ion-icon,
.btn-borrar ion-icon{
  float:none !important;
}

table ion-icon .icon-inner {
  border:none !important;
  box-shadow: none;
  background: transparent;
}

.navigation-user ion-icon{
  float:none !important;
  margin:0 auto;
  width: 50px;
  font-size: 50px;
  text-align: center;
}

/* ============================================== */
/* ALERTS */
/* ============================================== */


.alert-success,
.alert-warning,
.alert-error{
  padding:0;
  display: block;
  text-align: center;
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px;

}

.alert-success{
    background: #DFF0D8;
    border:1px solid #cce2c3;
}

.alert-error{
    background: #f9b1b1;
    border:1px solid #ef9e9e;
}

.alert-warning{
    background: #fbecb7;
    border:1px solid #e5d392;
}

.alert-warning p,
.alert-success p,
.alert-error p{
    padding:13px;
    text-align: center;
}

.alert-success p{
    color:#3C763D;
}

.alert-error p,
.alert-error i{
    color:#AF2A2B;
}

.alert-warning p,
.alert-warning i{
    color:#9c8a49;
}

.alert-warning button,
.alert-success button,
.alert-error button{
  float:right;
  background: transparent;
  padding:12px 4px 12px 14px;
  border:none;
  outline:none;
  color:black;
  border-radius: .25em;
  cursor: pointer;
  font-size: 1.7em;
  opacity: 0.5;
}

.alert-error button:before,
.alert-success button:before,
.alert-warning button:before{
  content: "\f2d7";
  font-family: "Ionicons";
  margin-right:15px;
}

/* ============================================== */
/* CONTENTS */
/* ============================================== */

.content,
.content-center,
.content-center-admin{

  margin:0 auto;
  width:100%;
}

.content{max-width:1440px;}
.content-center{max-width:960px;}
.content-center-admin{max-width:400px;}

.clear{clear: both;display: block;width: 100%;}
.line{margin-bottom:20px;padding-top:20px;width: 100%;}

@media screen and (max-width: 1280px){
  .content{max-width:1200px;}
}

@media screen and (max-width: 1024px){
  .content{width:100%;}
}


/* ============================================== */
/* BLOCKS */
/* ============================================== */


.block,
.block-big,
.block-top,
.block-bottom{
  width: 100%;
  overflow: hidden;
  float: left;
  display: block;
}

.block{padding:80px 0;}
.block-top{padding:80px 0 0 0;}
.block-big{padding:180px 0;}
.block-bottom{padding:0 0 80px 0;}

@media screen and (max-width: 1280px){
  .block{
    padding:80px 0;
  }
}

@media screen and (max-width: 768px){
  .block{padding:20px 0;}
  .block-top{padding:40px 0 0 0;}
  .block-big{padding:80px 0;}
}

/* ============================================== */
/* SECTION & FOOTER */
/* ============================================== */

.section,
footer{
  margin-left:360px;
  display: block;
  overflow: hidden;
}

.section{
  padding:80px 20px 20px 20px;
  overflow: visible;
}

.section-active,
.footer-active{
  margin-left:0;
}

@media screen and (max-width: 1280px){
  .section,
  footer{
    margin-left:200px;
  }

  .section-active,
  .footer-active{
    margin-left:0;
  }
}

@media screen and (max-width: 768px){
  footer,
  .section{
    margin-left:0;
  }
  .section{
    padding:60px 0 40px;
  }

  footer{
    padding:0;
  }
}

/* ============================================== */
/* PADDINGS */
/* ============================================== */

.p-5,
.p-10,
.p-20,
.p-30{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
    overflow: hidden;
}

.p-5{padding:5px;}
.p-10{padding:10px;}
.p-20{padding:20px;}
.p-30{padding:30px;}


/* ============================================== */
/* ICON */
/* ============================================== */

img.icon{
  width: 30px;
}

/* ============================================== */
/* LEFT & RIGHT */
/* ============================================== */

.left{float:left;}
.right{float:right;}

/* ============================================== */
/* TEXT-ALIGN */
/* ============================================== */

.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}

/* ============================================== */
/* FLEXBOX */
/* ============================================== */

.flex-center{
  width: 100%;
  display: flex;
  justify-content:center;
}

/* ============================================== */
/* LOADDING */
/* ============================================== */

.loader {
    border: 3px solid #ddd; /* Light grey */
    border-top: 3px solid #ff9c00; /* Blue */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin:0 auto;
    animation: spin 0.50s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================== */
/* OVERLAY */
/* ============================================== */

.bg-overlay-page,
.bg-overlay-page-active{
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  position: absolute;
  z-index:5;
}

.bg-overlay-page{opacity:0;display: none;z-index: 9999;}
.bg-overlay-page-active{opacity:1;display: block;}

/* ============================================== */
/* MENU-BREADCRUMBS */
/* ============================================== */

#uno,
#dos,
#tres,
#cuatro,
#cinco,
#seis,
#siete{
  display: block;
  float: left;
  padding:80px 0 0 0;
  width: 100%;
  margin: 1px 0;
}

.white-box{
  width: 100%;
  margin: 0;
}


.white-box > ul{
  list-style-type: none;
  margin:0;
  padding:0;
  display: block;
  float: left;
  width: 100%;
}

.white-box ul li{
  display: block;
  margin:0;
  float:left;
  padding:10px;
  width: 100%;
}

.white-box.col-2 ul li{width: 50%;}
.white-box.col-3 ul li{width: 33.3333%;}
.white-box.col-4 ul li{width: 25%;}

.white-box ul li span{
  padding: 20px;
  display: block;
  float: left;
  width: 100%;
  position: relative;
}

.white-box ul li span#limite,
.white-box ul li span#limiteTextHero,
.white-box ul li span#limiteTitleHero{
  padding: 0;
  width: auto;
  float: none;
  display: inline-block;
}

.white-box ul li .title{
  padding:10px 0;
  border-radius: 2px 2px 0 0;
  display: block;
  float: left;
  width: 100%;
}

.white-box ul li .title a{
  float: right;
  display: block;
  margin: -10px 0 0 0;
}

.white-box ul li .title a.link{
  float: left;
  display: block;
  margin: 0 5px 0 0;
}

.white-box a.btn{
  overflow: hidden;
  display: block;
  position: absolute;
  right: 20px;
  top:50%;
  margin-top:-20px;
  width: 40px;
  height: 40px;
}

.white-box a.btn:before{
  /*content: "\f217";*/
  content: "\f133";
  font-family: "Ionicons";
  padding: 8px 10px;
  margin:0;
  display: block;
  font-size: 24px;
}

.white-box ul li span p.nombre{
  float: left;
  font-weight: bold;
}


.white-box ul li span p.fecha{
  float: right;
}

.white-box a.btn:hover{
  -ms-transform: scale(0.9);
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

.white-box ul li:nth-child(1) {
  -webkit-animation: translating .2s forwards ease-in-out;
  -moz-animation: translating .2s forwards ease-in-out;
  animation: translating .2s forwards ease-in-out;
}

.white-box ul li:nth-child(2) {
  -webkit-animation: translating .4s forwards ease-in-out;
  -moz-animation: translating .4s forwards ease-in-out;
  animation: translating .4s forwards ease-in-out;
}

.white-box ul li:nth-child(3) {
  -webkit-animation: translating .6s forwards ease-in-out;
  -moz-animation: translating .6s forwards ease-in-out;
  animation: translating .6s forwards ease-in-out;
}

.white-box ul li:nth-child(4) {
  -webkit-animation: translating .8s forwards ease-in-out;
  -moz-animation: translating .8s forwards ease-in-out;
  animation: translating .8s forwards ease-in-out;
}

.white-box ul li:nth-child(5) {
  -webkit-animation: translating 1s forwards ease-in-out;
  -moz-animation: translating 1s forwards ease-in-out;
  animation: translating 1s forwards ease-in-out;
}

.white-box ul li:nth-child(6) {
  -webkit-animation: translating 1.2s forwards ease-in-out;
  -moz-animation: translating 1.2s forwards ease-in-out;
  animation: translating 1.2s forwards ease-in-out;
}

.white-box ul li:nth-child(7) {
  -webkit-animation: translating 1.4s forwards ease-in-out;
  -moz-animation: translating 1.4s forwards ease-in-out;
  animation: translating 1.4s forwards ease-in-out;
}

.white-box ul li:nth-child(8) {
  -webkit-animation: translating 1.6s forwards ease-in-out;
  -moz-animation: translating 1.6s forwards ease-in-out;
  animation: translating 1.6s forwards ease-in-out;
}

.white-box ul li:nth-child(9) {
  -webkit-animation: translating 1.8s forwards ease-in-out;
  -moz-animation: translating 1.8s forwards ease-in-out;
  animation: translating 1.8s forwards ease-in-out;
}


@-webkit-keyframes translating {
  from {
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@media screen and (max-width: 960px){

  .white-box.col-3 ul li,
  .white-box.col-4 ul li{width: 50%;}
}

@media screen and (max-width: 480px){
  .white-box.col-2 ul li,
  .white-box.col-3 ul li,
  .white-box.col-4 ul li{
    width: 100%;
  }
  .white-box ul li{
    padding:0 20px;
  }
  .white-box ul li span{
    padding:10px 20px;
  }
}

/* ============================================== */
/* BUTTONS */
/* ============================================== */

.btn-editar,
.btn-borrar,
.btn-agregar,
input[type=submit]{
  display: block;
  overflow: hidden;
  margin: 0 5px;
  text-align: center;
  width: auto;
  float: left;
  text-decoration: none;
  cursor: pointer;
  padding:7px 30px;
  font-size:14px;
}

input[name=EliminarCorreo]{
  background: transparent !important;
  font-weight: normal !important;
  padding: 0 10px !important;
  margin: 0 auto!important;
  text-align: center !important;
  float: right !important;
  box-shadow: none !important;
}

input[type=submit]{
  padding:10px 30px;
  float: none;
  margin:20px auto 10px auto;
}

/* ------- */

footer p{font-size:12px;}


.btn-borrar-img{
  display: block;
  cursor: pointer;
  position: absolute;
  width: 30px;
  height: 30px;
  top:5px;
  right: 5px;
  z-index: 9999;
  text-align: center;
}

.btn-borrar-img:before{
  font-family: "Ionicons";
  margin-right: 0;
  display: block;
  font-weight: 700;
  font-size: 16px;
  padding: 3px 9px;
  float: left;
  content: "\f129";
  color: white;
}


@media screen and (max-width: 768px){
  .btn-editar,
  .btn-borrar,
  .btn-agregar{
    width: 180px;
    float: none;
    margin:15px auto;
  }
}


/* ============================================== */
/* TABLE */
/* ============================================== */

figure{

  width: 100%;
  margin:0 auto;
  padding:0;
  display: block;
  float: left;
  border: 0;
  outline: none;
}


table{
  border: 0;
  outline: none;
  width: 100%;
  margin:0;
  padding:0;
  border-collapse: collapse;
  border-spacing: 0;
  overflow: hidden;
}

table thead tr th{
  overflow: hidden;
  font-weight: normal;
}

table thead tr th::first-letter{text-transform: capitalize !important;}

table tr{border: none;}

table th,
table td {
  padding: 7px 20px;
  vertical-align:middle;
  overflow: hidden;
  line-height: 1.5em;
}


table td div{
  width: 50px;
  /*border:4px solid transparent;*/
  overflow: hidden;
  position: relative;
  text-align: center;
}

table th,
table td {
  text-align: left;
}

table td p,
table td p strong,
table td h1 strong,
table td h2 strong,
table td h3 strong{
  font-size: 14px !important;
  font-weight: normal !important;
}

table div{
  display: block;
}

table tr > td > a.btn-link{
  float: left !important;
  text-align: left;
  width: auto !important;
  padding: 0 !important;
}

table thead tr th:last-child{
  text-align: center;
}

table tr td.flex{
  width: 100%;
  display: flex;
  justify-content:center;
}

table tr td.flex a{
  margin:8px 5px;
}

@media screen and (max-width: 768px) {

  table tr td.close{
    display: none;
  }

  table td.center{
    text-align: center !important;
  }

  table tr > td > a.btn-link{
    float: right !important;
    margin: 0;
    line-height: normal;
    font-weight: bold;
  }

  table td div{
    width: 100px;
    margin: 0 auto !important;
    float:none !important;
  }

  table tr th:last-child,
  table tr td:last-child{
    width:100% !important;
    padding: 7px 20px;
  }

  table tr td.flex a{
    margin:1%;
    width: 48%;
  }

  table tr td a{
    padding: 10px 40px;
  }

  table thead {
    display: none;
  }

  table tr {
    display: block;
    border: 0;
    padding:0;
    margin-bottom:10px;
  }

  table td{
    display: block;
    text-align: right;
    vertical-align:middle;
    border-bottom: 0;
    overflow: hidden;
  }

  table div{
    float:left;
    margin:0;
  }

  table td:before {
    content: attr(data-label);
    float: left;
  }

  table td,
  table td:before{font-size: 12px;}

  table th,
  table td {
    padding: 20px;
  }

}


/* ============================================== */
/* FORMS CONTACT */
/* ============================================== */

#chars-text,
#chars{
  display: block;
  float: right;
}

input[name=google],
input[name=instagram],
input[name=linkedin],
input[name=facebook],
input[name=youtube],
input[name=twitter],

input[name=id_info_social],
input[name=usuario],
input[name=nombre],
input[name=horario],
input[name=link],
input[name=link_videos],
input[name=autor],
input[name=keywords],
input[name=direccion],
input[name=password],
input[name=new_password],
input[name=new_password_repeat],
input[name=email],
input[name=telefono],
input[name=descripcion],
textarea[name=descripcion]{

  padding: 15px 20px;
  position: relative;
  overflow: hidden;

  -webkit-transition:all 250ms ease;
  -moz-transition:all 250ms ease;
  -ms-transition:all 250ms ease;
  transition:all 250ms ease;

}

textarea[name=descripcion]{
  width: 100%;
  resize: none;
}

input[name=id_info_social],
input[name=google],
input[name=instagram],
input[name=linkedin],
input[name=facebook],
input[name=youtube],
input[name=twitter],

input[name=usuario],
input[name=nombre],
input[name=horario],
input[name=link],
input[name=link_videos],
input[name=autor],
input[name=keywords],
input[name=direccion],
input[name=password],
input[name=new_password],
input[name=new_password_repeat],
input[name=email],
input[name=telefono],
input[name=descripcion],
textarea[name=descripcion],
select[name=select1],
select[name=select2]{
  width: 100%;

  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  border-radius: 2px;
}

input[name=id_info_social]:focus,
input[name=google]:focus,
input[name=instagram]:focus,
input[name=linkedin]:focus,
input[name=facebook]:focus,
input[name=youtube]:focus,
input[name=twitter]:focus,

input[name=usuario]:focus,
input[name=nombre]:focus,
input[name=horario]:focus,
input[name=link]:focus,
input[name=link_videos]:focus,
input[name=autor]:focus,
input[name=keywords]:focus,
input[name=direccion]:focus,
input[name=password]:focus,
input[name=new_password]:focus,
input[name=new_password_repeat]:focus,
input[name=email]:focus,
input[name=telefono]:focus,
input[name=descripcion]:focus,
textarea[name=descripcion]:focus{

  -webkit-transition:all 250ms ease;
  -moz-transition:all 250ms ease;
  -ms-transition:all 250ms ease;
  transition:all 250ms ease;

}

i.none{
  
}

/*--- checkbox ---*/

input[type="checkbox"] {
  display:block;
  float: right;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  margin:0 10px 0 0!important; 
}

/*--- select ---*/

.select-hidden {
  display: none;
  visibility: hidden;
  padding-right: 0;
  z-index: 999999;
}

.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  width: 100%;
  display: block;
  float: left;
  z-index: 999999;
}

.select-styled {
  padding: 12px 20px;
  position: relative;
  overflow: hidden;
  width: 100%;

  -webkit-transition:all 250ms ease;
  -moz-transition:all 250ms ease;
  -ms-transition:all 250ms ease;
  transition:all 250ms ease;

  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  border-radius: 2px;
  z-index: 999999;
}

.select-styled:before,
.select-styled:active:before,
.select-styled.actived:before{
  font-family: "Ionicons";
  margin:0;
  overflow: hidden;
  display: block;
  position:absolute;
  font-weight: bold;
  right: 15px;
  top:13px;
  z-index: 9;
  font-size: 14px;
  z-index: 999999;
}

.select-styled:before{content: "\f123";}
.select-styled:active:before, .select-styled.actived:before {content: "\f126";}

.select-options {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  overflow-y: scroll;
  max-height: 300px;
}

.select-options li {

  color:rgb(31, 34, 37);
  margin: 0;
  width: 100%;
  padding: 12px;
  text-indent: 15px;
  border-top: 1px solid rgba(255,255,255,0.1);

  -moz-transition: all 0.15s ease-in;
  -o-transition: all 0.15s ease-in;
  -webkit-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
}

.select-options li[rel="hide"] {
  display: none;
}

@media screen and (max-width: 768px){
.select-options {
    position: relative;
    overflow: hidden;
    box-shadow: none;
    max-height: 100%;
  }
  .select-options li {
    padding: 15px;
  }
}

/* ============================================== */
/* GALLERY */
/* ============================================== */

.upload-wrap{
  min-height: 100px;
  padding:10px;
  float: none;
  position: relative;
  border: 2px dashed rgba(255,255,255,0.2);
}

.upload-wrap img{
  text-align: center;
}

.upload-wrap:before{
  font-family: "Ionicons";
  margin: -15px 0 0 -15px;
  display: block;
  font-size: 24px;
  width: 30px;
  height: 30px;
  padding:3px;
  content: "\f147";
  color: #cccccc;
  position: absolute;
  top:50%;
  left: 50%;
}

img.upload-image {
  cursor: default;
  background-size: cover;
  background-position: center;
  display: block;
  position: relative;
  top:0;
  left: 0;
}


 label[for="upload-image"] {
  cursor: pointer;
  padding:5px 20px;
  font-size:14px;
  float: none;
 }

.upload-wrap,
label[for="upload-image"]{
  display: block;
  overflow: hidden;
  margin: 20px auto;
  text-align: center;
  width: 220px;
  text-decoration: none;
}


/*-- form link --*/


form.search-link{
  position: relative;
  float: right;
  padding:0;
  width: 500px;
  margin:0;
}

form.search-link input{
  height: auto;
  margin:0;
  border:none;
  overflow: hidden;
  display: block;
  position: relative;
  padding:10px 20px 10px 35px !important;
  width: 80%;
  float: left;

  -webkit-border-radius:2px 0 0 2px;
  -moz-border-radius:2px 0 0 2px;
  -ms-border-radius:2px 0 0 2px;
  border-radius:2px 0 0 2px;
}

form.search-link:before{
  content: "\f4a4";
  font-family: "Ionicons";
  margin:0;
  overflow: hidden;
  display: block;
  position:absolute;
  left: 15px;
  top:8px;
  z-index: 999;
  font-size: 14px;
}

form.search-link button{
  width: 20%;
  float: left;
  outline: none;
  border:none;
  cursor: pointer;

  text-align: center;
  margin: 0;

  -webkit-border-radius:0 2px 2px 0;
  -moz-border-radius:0 2px 2px 0;
  -ms-border-radius:0 2px 2px 0;
  border-radius:0 2px 2px 0;
}

form.search-link input,
form.search-link button{height: 41px;padding:9px 0;}

form.search-link button:hover{background: #5cacff;}

@media screen and (max-width: 1280px){

  form.search-link{width: 280px;}
  form.search-link button{width: 25%;}
  form.search-link input{width: 75%;}

}


@media screen and (max-width: 768px){

  form.search-link button,
  form.search-link input{
    display: block;
    float: left;
    width: 100%;
    margin-bottom:5px;
  }

  form.search-link{
    width: 100%;
    display: block;
    float: left;
    padding: 0;
    margin:0;
  }

  form.search-link,
  form.search-link input,
  form.search-link button{
    width: 100% !important;
    height: auto;
    display: block;
    position: relative;
    float: left;
  }

  form.search-link input{
    padding:20px 0;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -ms-border-radius:2px;
    border-radius:2px;
  }

}

/* ============================================== */
/* LOGIN */
/* ============================================== */

#login{

  z-index: 9999;
  max-width: 500px;
  width: 100%;
  overflow: hidden;
  display: block;
  padding: 20px;
  top:50% !important;
  left: 50%;
  position: absolute;
  
  -webkit-transform: translate3d(-50%, -50%, 0);
  -moz-transform: translate3d(-50%, -50%, 0);
  -ms-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);

}

#login form{
  overflow: hidden;
  padding: 50px;
}

#login > form > img{
  margin:0 auto 20px auto;
  display: block;
  max-width: 200px;
  width: 200px;
  float: none;
  text-align: center;
}

#login form input{
  margin-bottom: 10px;
}


#login form input[type=submit]{
  display: block;
  width: 100%;
  float: left;
}


@media screen and (max-width: 768px){
  #login form{
    padding: 40px 20px;
  }
}


#show_password{
  float: left;
  margin-top: -3px;
}

a.link{
  text-decoration: underline;
}

/* ============================================== */
/* VER MAS */
/* ============================================== */

.ver-mas-cerrado{
  display: none;
  float:left;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
}

.ver-mas-cerrado:after{
  content: "";
  clear: both;
  display: block;
}

/* ============================================== */
/* PAGINATION */
/* ============================================== */

.pagination{
  width: 100%;
  height:auto;
  display: flex;
  justify-content:center;
}

.pagination ul{
  margin-top: 20px;
  padding:0;
}

.pagination ul li{
  float: left;
  position:relative;
  display: block;
  margin:3px;
}

.pagination ul li a {
  display: block;
  text-decoration: none;
  padding:5px 12px;
}