@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;
}

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

.content,
.content-center{
  margin:40px auto;
  overflow: hidden;
  max-width: 1300px;
  width:100%;
  background: white;
  border-radius: 10px;

  -webkit-box-shadow: 0 1px 30px rgba(0,0,0,0.1);
  -moz-box-shadow: 0 1px 30px rgba(0,0,0,0.1);
  box-shadow: 0 1px 30px rgba(0,0,0,0.1);

}

.content-center{
  max-width: 800px;
}

.default{
  cursor: default;
}

.clear{
  clear: both;
}

.line-solid{
  border-bottom:1px solid #dedede;
}

.line-dashed{border-bottom:1px dashed #cccccc;margin-bottom:20px;padding-top:20px;width: 100%;display: block;float: left;}

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

@media screen and (max-width: 1270px){
  .content,
  .content-center{
    margin:20px auto;
  }
}


/* ============================================== */
/* CLOSE & OPEN */
/* ============================================== */

@media screen and (max-width: 1270px){
  .close-laptop{display:none;overflow: hidden;}
}

@media screen and (max-width: 960px){
  .close-tablet{display:none;overflow: hidden;}
}
@media screen and (max-width: 768px){
  .close-mobile{display:none;overflow: hidden;}
}

@media screen and (min-width: 1270px){
  .open-laptop{display:none;overflow: hidden;}
}

@media screen and (min-width: 960px){
  .open-tablet{display:none;overflow: hidden;}
}
@media screen and (min-width: 768px){
  .open-mobile{display:none;overflow: hidden;}
}

/* ============================================== */
/* COLUMNS */
/* ============================================== */


.col-12,
.col-11,
.col-10,
.col-9,
.col-8,
.col-7,
.col-6,
.col-5,
.col-4,
.col-3,
.col-2,
.col-1,
.aside,
.section{
    margin:0;
    float:left;
    padding:0;
    overflow: hidden;
}

.col-12{width:100%;}
.col-11{width:91.67%;}
.col-10{width:83.34%;}
.col-9{width:75%;}
.col-8{width:66.66%;} /* -- */
.col-7{width:58.34%;}
.col-6{width:50%;}    /* -- */
.col-5{width:41.66%;}
.col-4{width:33.33%;} /* -- */
.col-3{width:25%;}    /* -- */
.col-2{width:16.66%;} /* -- */
.col-1{width:8.33%;}

@media screen and (max-width: 768px) {
  .col-2,
  .col-3{width:50%;}
  .col-4,
  .col-8{width:100%;}
}

@media screen and (max-width: 480px) {
  .col-2,
  .col-3,
  .col-6{width:100%;}
}

/* ============================================== */
/* SECTION & ASIDE */
/* ============================================== */


.aside{
    width:300px;
    height: 100%;
    position: fixed;
    overflow: hidden;
}

.section{
    width:100%;
    padding-left:300px;
}

@media screen and (max-width: 1440px){
  .aside{
      width:200px;
  }

  .section{
      padding-left:200px;
  }
}

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

  .aside{
    display: none;
  }

  .section{
    padding-left:0;
  }

}

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


.block-top,
.block-bottom,
.block{
  width: 100%;
  overflow: hidden;
}


.block-top{padding:0 0 20px 0;}
.block-bottom{padding:20px 0 80px 0;}
.block{padding:80px 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;
}

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


@media screen and (max-width: 1270px){
  .p-20{padding:20px 10px;}
}

/* ============================================== */
/* 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;padding:20px;}

@media screen and (max-width: 768px){
  .center-mobile{text-align: center;}
  .center-mobile a{text-align: center;margin:0 auto;float: none;}
  .padding-mobile{padding:0 10px;}
  .text-left{text-align:center;}
  .text-right{visibility: hidden;display:none;}
}

/* ============================================== */
/* COLOR */
/* ============================================== */

.color-red {color:#ED5564;}
.color-yellow {color:#FCCE54;}
.color-aqua {color:#47CEC0;}
.color-purple {color:#9398EC;}
.color-blue {color:#3367d6;}
.color-orange {color:#F77E51;}
.color-green{color:#42CB6F;}
.color-white{color:white;}

.bg-red,
.bg-black,
.bg-yellow,
.bg-aqua,
.bg-purple,
.bg-blue,
.bg-orange,
.bg-green,
.bg-white,
.bg-gray{overflow: hidden;}

.bg-red {background:#fd4d3e;}
.bg-yellow {background:#FCCE54;}
.bg-aqua {background:#47CEC0;}
.bg-purple {background:#9398EC;}
.bg-blue {background:#2C91FC;}
.bg-orange {background:#F77E51;}
.bg-green{background:#42CB6F;}
.bg-black{background:#222222;}
.bg-white{background:#f1f1f1;}
.bg-gray{background:#0E131A;}

.teaser ul li.bg-red,
.teaser ul li.bg-yellow,
.teaser ul li.bg-aqua,
.teaser ul li.bg-purple,
.teaser ul li.bg-blue,
.teaser ul li.bg-orange{overflow: hidden;}

.teaser ul li.bg-red {background:#ED5564;}
.teaser ul li.bg-yellow {background:#FCCE54;}
.teaser ul li.bg-aqua {background:#47CEC0;}
.teaser ul li.bg-purple {background:#9398EC;}
.teaser ul li.bg-blue {background:#4EC2E7;}
.teaser ul li.bg-orange {background:#F77E51;}

.teaser ul li.bg-red:hover {background:#D9434E;}
.teaser ul li.bg-yellow:hover {background:#F5BA42;}
.teaser ul li.bg-aqua:hover {background:#3BBEB0;}
.teaser ul li.bg-purple:hover {background:#B377D9;}
.teaser ul li.bg-blue:hover {background:#3BB1D9;}
.teaser ul li.bg-orange:hover {background:#E7663F;}

.bg-logo,
.bg-menu-header,
.bg-menu-aside,
.bg-body{
  overflow: hidden;
}

/* ============================================== */
/* EDITS */
/* ============================================== */

.logo-text{padding:20px;background: #fbfbfb;}
.bg-logo {background:white;}
.bg-menu-header{background:white;border-bottom:1px solid #ebebf4;}
.bg-menu-aside{background:white;}
.bg-body{background:#eaeff3;}

.aside{border-right:1px solid #ebebf4;}

.menu-vertical-aside ul li:first-child{border-top:1px solid #ebebf4;}
.menu-vertical-aside ul li a{border-bottom:1px solid #ebebf4;}

.menu-vertical-aside ul li,
.menu-vertical-aside ul li a {color:#7b808b;}
.menu-vertical-aside ul li a:hover{background:#ebedf0;}

.menu-vertical ul li{color:#444444;border-bottom:1px solid #ebebf4;}

.menu-horizontal ul li{color:#7b808b;border-right:1px solid #ebebf4;}
.menu-horizontal ul li a{color:#cccccc;}
.menu-horizontal ul li a:hover{color:#7b808b;background: #f2f2f2;}

.menu-breadcrumbs{color:black;background: white;border-bottom:1px solid #ebebf4;}
.teaser ul li a{color:black;background: white;box-shadow: 0 2px 5px rgba(99,103,120,0.3);}
.teaser ul li a:hover{box-shadow: 0 2px 20px rgba(99,103,120,0.3);}


table thead tr th{background: #aab0c6;}
table tr{border: 1px solid #ebebf4;}
table tr:nth-child(odd) {background: #f8f8f8;}

@media screen and (max-width: 1270px){
  .bg-logo {border-bottom:1px solid #ebebf4;}
  .logo-text{padding:15px;}
  .cbp-spmenu{background:white;}
  .cbp-spmenu-right{border-left:1px solid #ebebf4;};
}

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

/*-- Login --*/
input[name=username],
input[name=password],
input[name=link],
input[name=nombre],
input[name=imagen-cargada],
input[name=titulo],
input[name=subtitulo],
input[name=experiencia],
input[name=titulo_nosotros],
input[name=titulo_servicios],
input[name=correo],
input[name=telefono],
input[name=direccion],
input[name=google],
input[name=instagram],
input[name=linkedin],
input[name=facebook],
input[name=youtube],

textarea[name=descripcion_doctor],
textarea[name=descripcion_servicios],
textarea[name=descripcion_blog],
textarea[name=descripcion_temas_blog],
textarea[name=descripcion_nosotros],
textarea[name=descripcion_cuadro]{

  background: white;
  border:1px solid #dddddd;
  margin:5px 0 20px 0;
  position:relative;
  padding: 15px;
  color:black;
  float:left;
  display: block;
  width: 100%;
  cursor:auto;
  text-align: left;

  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

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

}

textarea[name=descripcion_doctor],
textarea[name=descripcion_servicios],
textarea[name=descripcion_blog],
textarea[name=descripcion_temas_blog],
textarea[name=descripcion_nosotros],
textarea[name=descripcion_cuadro]{
  min-height:100px;
  line-height: 1.5em;
  overflow-y: scroll;
}

/*--- select ---*/

select[name=categoria],
select[name=correo_status],
select[name=temas]{

  border:1px solid #dddddd;
  padding: 15px;
  font-size: 1em;
  margin:5px 0 20px 0;
  width: 100%;
  outline:none;
  display: inline-block;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
  color: black;
  background: #fff url("./../../images/body/arrow_down.svg") no-repeat 98% center;

  position: relative;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

select[name=correo_status]{width: 150px;padding: 7px 15px;margin:0 0 0 10px;}


/*-- Login --*/
input[name=username]:focus,
input[name=password]:focus,
input[name=nombre]:focus,
input[name=link]:focus,
input[name=imagen-cargada]:focus,
input[name=titulo]:focus,
input[name=subtitulo]:focus,
input[name=experiencia]:focus,
input[name=titulo_nosotros]:focus,
input[name=titulo_servicios]:focus,
input[name=correo]:focus,
input[name=telefono]:focus,
input[name=direccion]:focus,
input[name=google]:focus,
input[name=instagram]:focus,
input[name=linkedin]:focus,
input[name=facebook]:focus,
input[name=youtube]:focus,

textarea[name=descripcion_doctor]:focus,
textarea[name=descripcion_servicios]:focus,
textarea[name=descripcion_blog]:focus,
textarea[name=descripcion_temas_blog]:focus,
textarea[name=descripcion_nosotros]:focus,
textarea[name=descripcion_cuadro]:focus{

  border:1px solid #c1e0f8;
  background: #f1f9ff;

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

}


/*--- img ---*/

img.admin-img-banner,
img.admin-img,
img.admin-img-vip{
  border-radius: 0;
  display: block;
  overflow: hidden;
  float: left;
  border:3px solid white;

  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.2);
  box-shadow: 0 1px 5px rgba(0,0,0,0.2);
}

img.admin-img-banner{
  max-width: 100px;
}

img.admin-img{
  max-width: 50px;
}

img.admin-img-vip{
  max-width: 400px;
  max-height: 400px;
  width: 100%;
  border:8px solid white;
}

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

  img.admin-img,
  img.admin-img-vip{
    max-width: 100px;
    max-height: 100px;
    float: none;
  }

  img.admin-img-vip{
    border:3px solid white;
  }
}

/*--- search ---*/


form.search{
  background: #f2f2f2;
  width: 300px;
  margin:20px auto;
  display: block;
  float: none;
  border-radius: 25px;
  overflow: hidden;
  position: relative;
}

form.search:before{
  content: "\f4a4";
  font-family: "Ionicons";
  margin:0;
  display: block;
  color:#cccccc;
  position:absolute;
  right: 15px;
  top:5px;
  font-size: 1.7em;
  font-weight: lighter;
}

input[name=search]{
  background: transparent;
  width: 100%;
  padding:10px 40px 10px 20px;
  border-radius: 0;
  border:none;
  margin:0;
  color:#444444;
}

input[name=search]:focus{
  background: #f5f5f5;

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

input[name=search]::-webkit-input-placeholder{
  font-style: italic;
}

input[name=search]:-moz-placeholder{
  font-style: italic;
}

input[name=search]:-ms-input-placeholder {
  font-style: italic;
}

input[name=search]:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #dddddd inset;
}

/*--- disabled ---*/


input[name=username].disabled,
input:disabled{
  background: #f4f4f4;
  color:#888888;
  overflow: hidden;
  border-color:#cccccc;
  cursor:no-drop;
}

input::-webkit-input-placeholder {color: #bbbbbb;} /* WebKit */
input:-moz-placeholder {color: #bbbbbb;} /* Firefox 18- */
input::-moz-placeholder {color: #bbbbbb;} /* Firefox 19+ */
input:-ms-input-placeholder {color: #bbbbbb;} /* IE 10+ */

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
}

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


#login{
  position:absolute;
  left: 50%;
  top: 50%;
  max-width: 400px;
  width: 100%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  padding:20px;

}

#login p{
  padding:0;
  display: block;
  text-transform: uppercase;
}

#login .alert-error p{
  padding: 15px;
}

input[name=reset],
.btn-reset{
  background: transparent;
  padding:10px 0;
  cursor: pointer;
  display: block;
}

.btn-reset{
  color: #1379b5;
}

@media screen and (max-width: 480px){
  #login{
    width: 100%;
  }
}


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


.flex-center,
.flex-left,
.flex-right{
  width: 100%;
  display: flex;
}

.flex-center{justify-content:center;}
.flex-right{justify-content:flex-end;}
.flex-left{justify-content:flex-start;}

@media screen and (max-width: 768px){
  .flex-right,
  .flex-left{justify-content:center;}
}



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


.btn-black,
.btn-blue,
.btn-green,
.btn-orange,
.btn-red{

  display: block;
  overflow: hidden;
  width: 120px;
  margin: 0 5px;
  border: none;
  text-align: center;
  color: white;
  float: left;
  text-decoration: none;
  cursor: pointer;
  padding:8px 20px;
  font-weight: normal;

  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;

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

}


.btn-black{background: #080709;}
.btn-blue{background: #438bed;}
.btn-green{background: #3bd585;}
.btn-red{background: #fd4d3e;}
.btn-orange{background: #fd4d3e;}

.btn-orange:hover,
.btn-black:hover,
.btn-blue:hover,
.btn-green:hover,
.btn-red:hover{

  color:white;
  -webkit-transition:all 250ms ease;
  -moz-transition:all 250ms ease;
  -ms-transition:all 250ms ease;
  transition:all 250ms ease;
}

.btn-black:hover{background: #000000;}
.btn-orange:hover{background: #f75a00;}
.btn-red:hover{background: #ff6154;}
.btn-blue:hover{background: #3367d6;}
.btn-green:hover{background: #21c16e;}

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

  .btn-blue,
  .btn-green,
  .btn-orange,
  .btn-red{
    margin: 0 2px;
    width: 120px;
  }

}


/* ============================================== */
/* 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;
    border-radius: 0;
    border:1px solid #dfdfdf;
}

.pagination ul li.active a{
   background: #3367d6;
   color:white;
   border-radius: 0;
}

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


  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-box-sizing:border-box;
  transition: all 0.2s ease-in-out;
}

.pagination ul li a:hover {
  background: #438bed;
  color:white;
  border-radius: 0;
}


/* ============================================== */
/* TEASER*/
/* ============================================== */

.teaser{
  overflow: hidden;
  margin:0 auto;
  padding:5px;
  width: 100%;
}

.teaser ul{
  list-style-type: none;
  width: 100%;
  overflow: hidden;
  font-weight: lighter;
  margin:0;
  padding:0;
}

.teaser ul li{
  overflow: hidden;
  float: left;
  width:33.333%;
  line-height: 1.3em;

  margin:0;
  padding: 10px;
  text-align: center;
  border-radius:0;

}

.teaser ul li a{
  display: block;
  text-decoration: none;
  padding: 14px 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.teaser ul li a,
.teaser ul li a:hover{
  -webkit-transition:all 250ms ease;
  -moz-transition:all 250ms ease;
  -ms-transition:all 250ms ease;
  transition:all 250ms ease;
}

.teaser ul li a i{color:white;}

.teaser ul li span{
  margin: 0 auto;
  padding:20px 0;
  width: 100%;
  display: block;
  overflow: hidden;
  font-size: 4em;
  font-weight: bold;
  text-shadow: 0 2px 12px rgba(0,0,0,0.2);
}

@media screen and (max-width: 1270px){
  .teaser ul{display: block;}
}

@media screen and (max-width: 768px){
  .teaser ul li {
    width:50%;
    padding: 10px;
  }
  .teaser ul li a{
    font-size: 0.80em;
  }
}

@media screen and (max-width: 480px){
  .teaser ul li {width:100%;}
}

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

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

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


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


.alert-success,
.alert-error{
  padding:0;
  display: block;
  text-align: center;
  width: 100%;
  margin-bottom: 20px;
  overflow: hidden;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;
  box-sizing:border-box;
}

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

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

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

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

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

.alert-success button,
.alert-error button{
  float:right;
  background: transparent;
  border:none;
  outline:none;
  border-radius: .25em;
  cursor: pointer;
}

.alert-error button:before,
.alert-success button:before{
  content: "\f2d7";
  font-family: "Ionicons";
  padding:7px;
  margin:2px;
  display: block;
  font-size: 1.7em;
}
/* ============================================== */
/* LINK */
/* ============================================== */


.link{color:#4F6672;border-bottom:1px solid #4F6672;}

/* ============================================== */
/* TOGGLE */
/* ============================================== */

.container-toggle .box {
  float: left;
  width: 100%;
  margin: 0;
}

.container-toggle .box .top {
  padding: 12px;
  background: #f2f2f2;
  color: black;
  cursor: pointer;
}

.container-toggle .box .bottom {
  display: none;
}

/* ============================================== */
/* FAQS */
/* ============================================== */

a.faqs{
  padding:5px;
  font-size: 1.2em;
}

a.faqs.active{
  padding:5px;
  color:red;
}

.faqs-escondido{
  display: none;
  float: left;
  width: 100%;
}

.faqs-abierto{
  display: block;
}