/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1.1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
#navegacion_principal{position: fixed; width: 100%; text-align: center; background-color: transparent;
 z-index: 150;-webkit-transition: background-color 400ms linear;
    -ms-transition: background-color 400ms linear;
    transition: background-color 400ms linear;}

#navegacion_principal.active{background-color: rgba(255,255,255,.9);
    -webkit-transition: background-color 400ms linear;
    -ms-transition: background-color 400ms linear;
    transition: background-color 400ms linear;}

.contenedor_p{display: block;overflow: hidden; width: 100%; max-width: 960px; margin: 0 auto;}

ul.menu_principal{ width: 100%;  display: block;overflow: hidden;max-width: 960px;
    margin: 0 auto;
    padding: 26px 0; }

.menu_principal li { display: inline-block;; }
.menu_principal li a{ font-size: 14px; margin: 10px 20px;text-decoration: none; color: #525252; text-transform: uppercase; }




body{font-family: 'Open Sans', sans-serif; color:#525252; background: url(../img/fondo_cab.png) no-repeat;
    background-size: contain; font-size: 16px;}

a{ color: #8c8c8c;
    text-decoration: none;}
a:hover{ color: #e96a5b;
    text-decoration: underline;}

h1, h2, h3, h4{font-family: 'Lato', serif; font-weight: 300}
#cabecera, .entradilla{text-align: center}

img.person{  display: inline-block;margin: 0 auto; -webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
    margin-bottom: 40px;
    max-width: 200px;
    }


h3 { font-size: 30px; }

.sobremi{background:#fcf6f6 url(../img/fondo_sobre.png) no-repeat;
    background-size: contain;; text-align: center;
    padding: 60px 0 0 0;}
header{    
    width: 100%;
    max-width: 100%;
    min-height: 512px;}
#cabecera{ width: 50% ; text-align: left; opacity: 0;
animation: fade-slide-left 2s .3s cubic-bezier(0, 0.5, 0, 1) forwards; margin-top: 120px; 
}
#cabecera h2{font-weight: 300;
    font-family: 'Open Sans', sans-serif;
    font-size: 46px;
    color: #3d3d3d;
    margin: 60px 10px 0px 10px; text-align: left }

#cabecera h1{
    font-size: 48px;
    color: #8cbbbb;
    margin: 0px 10px 20px 10px;
    line-height: 50px; }
    #cabecera p.telefono{ margin: 40px 20px;}
    .telefono a{    color: #c98f89;
    text-decoration: none;
    font-size: 22px;}

    h2{
    font-size: 48px;
    color: #3d3d3d;
    margin: 0px 10px 20px 10px;
    line-height: 50px;
    margin-bottom: 80px; text-align: center;}


.entradilla{ padding: 80px 20px; }


.entradilla .bloque p:after {
    content: "\201D";
    color: #8cbbbb;
    font-weight: bold;
    font-size: 47px;
    font-family: serif;
    line-height: 38px;
    vertical-align: top;
    margin-left: 6px;
}


.entradilla .bloque p:before {
    content: "\201C";
    color: #8cbbbb;
    font-weight: bold;
    font-size: 47px;
    font-family: serif;
    line-height: 30px;
    vertical-align: top;
    margin-right: 6px;
}


.entradilla .bloque{     width: calc(60% - 80px);
    float: right;
    text-align: center;
    font-size: 22px;
    color: #8cbbbb;
    line-height: 30px;
   /* background: url(../img/comillas.svg) no-repeat left 5px;*/
    padding: 0 0 0 60px;
    background-size: 50px;
    font-weight: 100;
    letter-spacing: 0.05em;}
.entradilla .imagen_entrada{    width: 32%;
    float: left;
    text-align: right;
    padding: 0 4%;}



.texto_quien{ width: 70%; margin: 0 auto;
    line-height: 1.8em; }
.flu_izq{ text-align: justify; }

#munecos { 
    max-width: 160px !important;
    padding-top: 24px; }

.uper{font-size: 40px;font-family: 'Lato', serif;}
    header:before{ 

animation: fade-slide-right 1s .2s cubic-bezier(0, 0.5, 0, 1) forwards;
  background: url(../img/cab_v4.svg) no-repeat 95% 10px;
  background-size: contain;
  content: "";
  opacity: 0;
  position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  z-index: -1;
    max-height: 600px;

    }

@keyframes fade-slide-right{
  0% {
    opacity: 0;
    transform: translateX(1rem);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade-slide-left{
  0% {
    opacity: 0;
    transform: translateX(-1rem);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}



.colegiada{
    background: #ffffff;overflow: hidden;display: block;
    padding: 10px; margin:40px 0 0 0;
    }
    .colegio_o{
    margin: 10px auto;display: table; 
   }
    .colegio_o .datos{ color: #ffffff;
    line-height: 1em;display: table-cell;
  text-align: center;
  vertical-align: middle;
    padding: 0 20px;}
    .imagen_colegio{    display: table-cell; width: 100%;
    max-width: 480px;}

.izquierda{ opacity: 0;
/*-moz-transform: rotate(90deg) translate(200px, -500px);
-webkit-transform: rotate(90deg) translate(200px,-500px);
-o-transform: rotate(90deg) translate(200px, -500px);
-ms-transform: rotate(90deg) translate(200px, -500px);
transform: rotate(90deg) translate(200px, -500px);*/
}
.derecha{ opacity: 0;
/*-moz-transform: rotate(90deg) translate(200px, 0px);
-webkit-transform: rotate(90deg) translate(200px, 0px);
-o-transform: rotate(90deg) translate(200px, 0px);
-ms-transform: rotate(90deg) translate(200px, 0px);
transform: rotate(90deg) translate(200px, 0px);*/
}

.fondo_blanco{ 
    /* background-color: #ffffff;
    background:  url(../img/background_blanco.png) no-repeat  bottom right,
    linear-gradient(29.45deg, #693564 0%, #694CF8 100%);*/
        background-color: #ffffff;
    background:  url(../img/background_blanco.png) no-repeat right bottom  ,url(../img/background_blanco_i.png) no-repeat left bottom, #ffffff ;
    margin: 0px 0 0 0;
    padding: 40px 0;
    background-size: contain;}
ul.experiencia{     text-align: left;
    font-size: 16px;
    line-height: 30px;list-style: none; }
    ul.experiencia li::before{    content: "\2022";
    color: #088789;
    font-weight: bold;
    display: inline-block;
    width: 30px;
    font-size: 18px;
    width: 1em;}

@keyframes rot {
    from {
        transform: rotate(0deg)
                   translate(-15px)
                   rotate(0deg);
    }
    to {
        transform: rotate(360deg)
                   translate(0px) 
                   rotate(-360deg);
    }
}

.derecha {
    animation: rot 6s 1 linear;
}

.izquierda {
    animation: rot 8s 1 linear;
}

.psicoterapia .cita{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fefbf9+0,fcf6f5+100 */
background: #fefbf9; /* Old browsers */
background: -moz-linear-gradient(top, #fefbf9 0%, #fcf6f5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #fefbf9 0%,#fcf6f5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #fefbf9 0%,#fcf6f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefbf9', endColorstr='#fcf6f5',GradientType=0 ); /* IE6-9 */}


.contenido_cita {    background: url(../img/caminando.svg) 0 bottom no-repeat;
    /* background-size: contain; */
    min-height: 480px;}
.textocita{

 width: 50%; font-size: 22px; color: #d38a83; padding: 60px; line-height: 1.5em; float: right; position: relative; font-weight: 100; }

.textocita cite{ text-align: right;float: right; color: #bd6260;
   }
.textocita::before{     content: "\201C";
    color: #bd6260;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -59px;
    
    font-size: 80px;
    font-family: serif;
    margin: 0;
    z-index: 100;
    position: absolute;
    left: -0px;
    top: 89px;}
q::before {    content: "";}
.textocita q::after {     content: "\201D";
    color: #bd6260;
    font-weight: bold;
    font-size: 47px;
    font-family: serif;
    line-height: 38px;
    vertical-align: top;
    margin-left: 6px;}




h2.tit_centrada{margin: 80px auto 40px; text-align: center;}

.psicoteratipa_articulo {
    display: block;overflow: hidden; margin: 60px auto; padding: 60px 0 60px 60px;
width: 100%;
    max-width: 960px;


-webkit-box-shadow: 1px 1px 70px -17px rgba(0,0,0,0.46);
-moz-box-shadow: 1px 1px 70px -17px rgba(0,0,0,0.46);
box-shadow: 1px 1px 70px -17px rgba(0,0,0,0.46);}



.psicoteratipa_articulo img{max-width: 50% ; float: left;}
.psicoteratipa_articulo .texto{ float: left;
    width: calc(100% - 370px);
    text-align: justify;
    position: relative;}

#gestalt{ margin: 80px 0 }

q{ font-style: oblique; color: #333333 }

.botoens_sociales{     position: fixed;
    top: 50%;
    right: 0px;
    z-index: 120;
    background-color: #ffffff;border: 1px solid #f6f9f8 ; border-bottom: 0px}
    .botoens_sociales li{ list-style: none; padding: 10px; border-bottom: 1px solid #f6f9f8 ; }
.b-social-list { padding: 0px;    margin: 0px;}
.botoens_sociales path{
    fill: #e96a5b;}


/* ==========================================================================
   Helper classes
   ========================================================================== */

.psicoterapia_total {     overflow: hidden;
    display: block;
    width: 100%;
   /* max-width: 960px;margin: 0 auto;*/
    height: 800px;
    position: relative; max-width: 1400px; float: right; }

 
  .psicoterapia_total article {
  position: absolute;
  top: 0;
  width: 80%;
  height: 70%;
  text-align: center;
}
.psicoterapia_total #adultos{left: 0; background-color: #fff; /*color:#1D607E;*/}
/*#adultos h3{color:#1D607E !important;}*/
.psicoterapia_total #adolescentes{left: 20%; background-color: #fff;/*color:#A53F6A !important;*/}
/*#adolescentes h3{color:#A53F6A !important;}*/
.psicoterapia_total #infantil{left: 40%; background-color: #fff; /*color:#014B94;*/}
.psicoterapia_total #pareja{left: 60%; background-color: #fff; /*color:#0C1154;*/}
.psicoterapia_total #grupos{left: 80%; background-color: #fff}

.psicoteratipa_articulo{    padding: 60px 0 60px 20px;    border: 2px solid #f7f7f7;}

.psicoteratipa_articulo .titulo{    position: absolute;    top: 250px;    /*left: 20%;*/}
.psicoteratipa_articulo img{ max-width: 200px; margin-right: 60px }
.psicoteratipa_articulo h3{ /*transform: rotate(90deg);
  transform-origin: left top 0; line-height: 100px;*/

    max-height: 352px;
    writing-mode: tb-rl;
  float: left;     font-size: 28px;
    font-weight: 300;    padding-left: 50px;
    min-height: 350px;
    text-align: left;
   }


.img_gestal{ width: 50%; float :left}

    p.tcita{ font-size: 1.2em; color: #949494; padding: 30px; }


/*footer{ background: url(../img/footerfondo.svg) no-repeat 80% bottom;
    background-size: 260px;}*/
#contacto{    background: #fff9f5  url(../img/footerfondo.svg) no-repeat 80% bottom;
    background-size: cover;}
    #contacto a{ color: #333333 }

 #contacto .info{
  /* background: #fff9f5 url(../img/fondotarjeta.svg) no-repeat center 90%;
    padding: 60px 0 300px 0 !important;
    background-size: 250px;*/
     padding: 0px 0 60px 20px !important;}

    #contacto .info , #contacto .formulario_contacto   {    float: left;
    width: 46%;
    padding: 2%;}
     #contacto .info h3{ font-size: 30px; }
     #contacto .info h3 .description{    font-size: 18px;   width: 100%;
    display: block;}

    .formulario_contacto input, .formulario_contacto textarea{    display: block;
    height: 34px;
    width: 90%;
    margin: 2px auto 30px;
    border: 1px solid #faebde; padding-left: 16px;
}
.formulario_contacto textarea{ height: 180px }

    .formulario_contacto label , .formulario_contacto p{    display: block;
    height: 30px;
    width: 90%;
    margin: 15px auto 2px;font-size: 14px;
    
}
 .formulario_contacto p{ margin-bottom: 30px;  }

 .creacion{ text-align: center;font-size: 10px }

.enviar_contacto {
    height: 34px;
    width: 90%;
    margin: 10px auto;
    border: 1px solid #faebde;
    max-width: 200px;
    background: #e96a5b;
    color: #ffffff;
    margin-top: 26px !important;
}
#contacto h2{ margin-bottom: 30px; margin-top: 40px; }

/* ==========================================================================
   Helper classes
   ========================================================================== 


.psicoteratipa_articulo h3 {
    max-height: 352px;
     writing-mode: initial; 
    float: left;
    font-size: 26px;
    font-weight: 400;
    padding-left: 10px;
    min-height: 350px;
    text-align: center;
    max-width: 200px;
}
.psicoteratipa_articulo .titulo {
    position: absolute;
    top: 271px;
}

*/



/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}



   .menu_bars{display: none!important;} 

.menu_bars a {text-decoration: none;    color: #e96a5b  }
.menu_bars a:hover {color: #525252}

.menu_principal li a:hover , .menu_principal li  a.actual { 
    border-bottom: 1px solid rgba(247, 6, 6, 0.6);  transition: all 800ms cubic-bezier(0.23, 1, 0.32, 1);

}

.envio_formulario{
    padding: 22px;
    font-size: 17px;
    color: #ffffff;
    background: #7aa38b;
    font-weight: 100;
}

.error_formulario{
    padding: 22px;
    font-size: 17px;
    color: #ffffff;
    background: #f74e52;
    font-weight: 100;
}


.vermas{position: absolute;
    width: 100%;
    text-align: left;
    background: rgba(231,107,94,0);
    height: 100%;
    top: 0;
    left: -200px;
    font-size: 40px; color: transparent; cursor: pointer}
.vermas:hover{
    transition: all 900ms cubic-bezier(0.23, 1, 0.32, 1);
    background: rgba(231,107,94,.1);
     color: #ffffff;

}

.psicoterapia_total_abierto .vermas:hover .leyenda{ animation: none; transition: none;}
.psicoterapia_total_abierto .vermas:hover {   -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;}


.vermas:hover .leyenda{
animation: fade-flecha 1s .1s cubic-bezier(0, 0.5, 0, 1) forwards;
 transition: all 900ms cubic-bezier(0.23, 1, 0.32, 1);
    background: rgba(231,107,94,.9); color: #ffffff;  
   height: 60px;
    width: 60px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;



}


    .vermas .leyenda{    position: absolute;   bottom:  10px;
   /* padding-top: 250px; width: 250px;*/

   height: 60px;
    width: 160px;
    padding-left: 0px;
    text-align: center;
    -webkit-border-top-right-radius: 50%;
-webkit-border-bottom-right-radius: 50%;
-moz-border-radius-topright: 50%;
-moz-border-radius-bottomright: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
}

   .vermas .letrero {
    font-size: 14px;
    padding-left: 0px;
    text-align: center;
    position: absolute;
    top: -23px;
    color: #eb786b;
    width: 60px;
}

.vermas:hover .letrero{
/*animation: fade-letrero 1s .1s cubic-bezier(0, 0.5, 0, 1) forwards;*/}

    @keyframes fade-flecha{
  0% {
  /*  opacity: 0;*/
   transform: none;
  }
  100% { transform: translateX(275px);
  /*  opacity: 1;*/
    
  }
}
    @keyframes fade-letrero{
  0% {
  /*  opacity: 0;*/
   transform: none;
  }
  100% { transform: translateX(70px);
  /*  opacity: 1;*/
    
  }
}

.psicoteratipa_articulo .cerrar {     position: absolute;
    top: 30px;
    right: 68px;
    font-size: 40px; cursor: pointer;}


.escondido{ display: none; }

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media screen and (max-width: 960px), screen and (max-device-width: 960px) {
    /* Style adjustments for viewports that meet the condition */

    #cabecera {
    margin-left: 10%;
}



    .psicoterapia_total {    height: 900px !important;}
    .psicoteratipa_articulo{ font-size: 14px; }
    .psicoteratipa_articulo h3 {    padding-left: 0px !important;}

    .entradilla .bloque{ display: inline-block;
    float: none;
    width: 320px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 24px;}
    .entradilla .imagen_entrada {
    width: 100%;
    float: none;
    text-align: center;
    padding: 0;
}


}






@media screen and (max-width: 800px), screen and (max-device-width: 800px) {

.psicoteratipa_articulo .vermas:hover .leyenda{ animation: none; transition: none;
 background: transparent;}
.psicoteratipa_articulo .vermas:hover {   -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;
 background: transparent; height: 0; width: 0; display: none; cursor: auto;}

.psicoteratipa_articulo .vermas{height: 0; width: 0; display: none; cursor: auto;}




.psicoteratipa_articulo .cerrar ,    .menu_principal li {display: none}
    #navegacion_principal.active{ background-color: transparent; }

.menu_abierto{background-color: rgba(255,255,255, 0.6)!important; display: block;  display: flex; height: 100%}

.menu_abierto .menu_bars{background-color: rgba(247, 6, 6, 0.6)!important;
    height: 47px;}



#navegacion_principal ul{ position: absolute; top: -400px; }

    .menu_abierto li {display: flex;
    justify-content: center;
    margin: 0;
    padding:0;
    width: 100%; border-bottom: 1px solid #ffecec;;
    }
    .menu_abierto ul {float: right; text-align: left;    display: flex;
    position: absolute;
    top: 0!important;
    margin-top: 67px;
    left: 0;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center; overflow: hidden;background-color: rgba(255,255,255,.9)!important;
    padding: 0px 0;

  transition: top 400ms cubic-bezier(0.23, 1, 0.32, 1);


}
 .menu_cerrado ul{ position: absolute; top: -400px;
    transition: top 600ms cubic-bezier(0.23, 1, 0.32, 1); }

.menu_principal li a{ width: 100%; text-align: center;font-size: 18px;
    padding: 1em 0;
    margin: 0;}
.menu_principal li a:hover , .menu_principal li  a.actual { background: rgba(247, 6, 6, 0.6); color: #ffffff; transition: all 800ms cubic-bezier(0.23, 1, 0.32, 1);}

.menu_abierto .menu_bars a{ color:#ffffff !important; }

   .menu_bars{display: block !important;
    float: right;
    font-size: 34px;
    margin: 0px;
    width: 100%;
    text-align: right;
 padding: 10px 20px} 

.menu_abierto .menu_bars .fa-navicon:before, .menu_abierto .menu_bars .fa-reorder:before,.menu_abierto .menu_bars .fa-bars:before{
    content: "\f00d";}





    header:before {
    background: url(../img/cab_v4.svg) no-repeat 105% 0px;
    background-size: 440px;

}

#cabecera {
    width: 70%;    
    margin: 80px auto !important;
}

#cabecera h1 {
    font-size: 36px;
    line-height: 40px;
    width: 60%;
}

#cabecera h2 {font-size: 42px;}

.psicoterapia_total{ height: auto !important; position: relative !important; }

.psicoterapia_total article{position: relative !important;
    /* top: 0; */
    width: 85%;
    height: auto;
    text-align: center;
    left: 0 !important;}

.contenido_cita { background-size: 70%;}
.psicoteratipa_articulo .titulo {
    position: relative !important;
     top: 10px !important; 

    width: calc(100% - 240px);
    float: left;
    /* left: 20%; */
}


.psicoteratipa_articulo .texto {
    width: 80% ;
    text-align: justify;
    position: relative;
    margin: 0 auto;
    float: none;
    padding: 0 10%; display: block;;
}
.psicoteratipa_articulo h3 {
    max-height: auto;
    writing-mode: initial !important;
    float: left;
    font-size: 28px;
    font-weight: 300;
    padding-left: 50px;   
    min-height: auto !important;
    text-align: left;
}

.psicoteratipa_articulo img {
    margin: 0 40px 20px 0!important;display: inline-block;
}
.texto_quien {
    width: 80%;}
#contacto .info, #contacto .formulario_contacto{ width: 90%; padding: 0 5%; }

#contacto .info{  text-align: center; padding-bottom: 40px }
}



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

.psicoteratipa_articulo img {
    margin: 0 auto!important;
    float: none;
    display: block;

}
.psicoteratipa_articulo .titulo {
    position: relative !important;
    top: 0px !important; 
    width: calc(100%);
    text-align: center !important;
    display: block;
    overflow: hidden;
    /* left: 20%; */
}
.psicoteratipa_articulo h3 { float: none !important ; text-align: center !important ;
    overflow: hidden;
    min-height: 100px;
    display: block;}
}

@media screen and (max-width: 600px), screen and (max-device-width: 600px) {

    
#cabecera p.telefono {
    margin: 20px 10px;
}




#cabecera {
    width: 86%;
    margin: 80px auto !important;
}
#cabecera h1 {
    font-size: 32px;
    line-height: 40px;
}
#cabecera h2 {font-size: 39px;}


.psicoteratipa_articulo img {
    margin: 0 auto!important;
    float: none;

}
.psicoteratipa_articulo .titulo {
    position: relative !important;
     top: 0px !important; 
    width: calc(100%);
    text-align: center !important;
    /* left: 20%; */
}
.psicoteratipa_articulo h3 { float: none !important ; text-align: center !important }


}

@media screen and (max-width: 500px), screen and (max-device-width: 500px) {

header{min-height: 400px}
 header:before {
        background: url(../img/cab_v4.svg) no-repeat 50% 50%;
    background-size: 320px;
}
#cabecera h2 {    font-size: 32px;
    text-align: center;}
#cabecera h1 {
    font-size: 20px;
    line-height: 25px;
    width: 80%;
    margin: 0 auto;
    text-align: center;
    font-weight: 400;
}
#cabecera p.telefono {text-align: center;}

.entradilla {
    padding: 40px 10px;
}
.entradilla .bloque {
    width: calc(100% - 40px);
    float: none;
    text-align: left;
    font-size: 16px;
    color: #8cbbbb;
    line-height: 30px;
  /*  background: url(../img/comillas.svg) no-repeat left 14px;*/
    padding: 0 0 0 23px;
    background-size: 20px;
    font-weight: 100;
    letter-spacing: 0.05em;
}
.textocita{ font-size: 18px; }



}







@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster */
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}