/* Reset ----------------------------------------------- */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    padding: 0;
    margin: 0;

    font: inherit;
    font-size: 100%;

    vertical-align: baseline;

    border: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
body {
    line-height: 1;
}
ol,
ul {
    list-style: none;
}
blockquote,
q {
    quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}
table {
    border-spacing: 0;
    border-collapse: collapse;
}
a,
a:focus,
a:active,
button,
button:focus,
button:active {
    outline: none;
}

/* Layout ----------------------------------------------- */

body {
    font: 400 16px/1 "Roboto", sans-serif;
}

.max-width {
    max-width: 1256px;
    padding: 0 20px;
    margin: 0 auto;
}

/* Header ----------------------------------------------- */

a#logo {
    display: inline-block;
    margin-top: 25px;

    font-size: 0;

    flex-shrink: 0;
}

a#logo img {
    width: 100%;
    height: auto;
    max-width: 200px;
    padding: 0;

    flex-shrink: 0;
}

.top-banner {
    background: #eee;
}

.top-banner blockquote p {
    padding: 15px 0;

    font: 400 16px/21px;
}

.header-main {
    display: flex;
    margin-bottom: 25px;
}

.nav-wrapper {
    display: flex;
    width: 100%;
    padding: 25px 0 0 95px;

    justify-content: flex-end;
}

nav.main-nav {
    display: grid;
    width: 100%;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

nav.main-nav .sections-nav {
    display: flex;

    align-self: flex-end;
    grid-column: span 2;
    justify-content: flex-end;
}



nav.main-nav .turnos-online {
    display: inline-block;
    padding: 15px;

    font: bold 16px/1 "Roboto";

    text-decoration: none;
    text-transform: uppercase;

    color: #fff;
    background: #0e8cac;

    align-self: flex-start;
    justify-self: baseline;
}

#close {
    display: none;
}


.social-nav {
    display: flex;

    align-items: center;
    justify-content: flex-end;
}

.social-nav li {
    display: inline-block;
}

.social-nav a.icon {
    display: inline-block;
    padding: 20px;
    margin: 0 10px;

    font-size: 0;

    border-radius: 20px;
    background-color: #78777c;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 21px;
}

.social-nav a.icon.instagram {
    background-image: url(../img/instagram-bg.svg);
}
.social-nav a.icon.facebook {
    background-image: url(../img/facebook-bg.svg);
}

.social-nav a.p.contacto {
    font: bold 16px/1 "Roboto Condensed", sans-serif;

    text-decoration: none;
    text-transform: uppercase;

    color: #79787d;
}


.sections-nav li {
    position: relative;

    display: flex;

    align-items: center;
}

.sections-nav li a {
    position: relative;

    display: inline-block;
    padding: 10px 20px;

    font: bold 16px/1 "Roboto Condensed", sans-serif;

    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    color: #79787d;
}

.sections-nav li a:hover {
    color: #0e8cac;
}

.btnactive {
    color: #E777AA !important;
}

.sections-nav li a:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;

    display: block;
    width: 1px;
    height: 36px;
    margin: auto;

    content: " ";

    background: #79787d;
}

.sections-nav li:last-child a {
    padding-right: 0;
}

.sections-nav li:last-child a:after {
    content: none;
}


.sections-nav .sub-menu {
    display: none;
    opacity: 0;
}

.sections-nav li:hover .sub-menu,
.sections-nav li .sub-menu:hover {
    position: absolute;
    top: 36px;
    z-index: 9999 !important;

    display: flex;
    padding: 20px 0;
    flex-direction: column;

    opacity: 1;
    border-bottom: 7px solid  #0e8cac;
    background: #fff;
}



.sections-nav .sub-menu li a {
    display: inline-block;
    padding-bottom: 10px;

    line-height: 1.3;

    text-align: left;
}



.sections-nav .sub-menu li a:after {
    content: none;
}


.main-nav-mobile {
    display: none;
    width: 40px;
    height: 40px;

    border: 1px solid #ccc;
    border-radius: 4px;
    background: white;
    background-image: url(../img/icon-menu.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 21px;
}


/* Home: Main Slide ------------------------------------ */

.main-gallery {
    position: relative;
}

.main-gallery .owl-dots {
    display: none;
}

.main-gallery .owl-nav {
    position: absolute;
    top: 50%;

    display: flex;
    width: 100%;

    transform: translateY(-50%);

    justify-content: space-between;
}

.main-gallery .owl-nav span {
    padding: 35px;

    font: bold 72px/1 "Roboto", sans-serif;

    color: #fff;
}


/* Home: Dr Ferroni ------------------------------------ */

.ferroni-bio {
    position: relative;

    display: flex;
    padding: 20px;
    margin-top: 25px;

    background: #0e8cac;

    flex-flow: column;
}

.ferroni-bio .ferroni-pic {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;

    width: 35%;
    height: 630px;
    max-height: 120%;

    background-image: url(../img/dr-ferroni.png);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: contain;
}

.ferroni-bio .txt-wrap {
    padding-left: 36%;
}

.ferroni-bio .txt-wrap h2 {
    margin-bottom: 12px;

    font: bold 18px/24px "Roboto", sans-serif;

    color: #fff;
    margin-top:20px;
}

.ferroni-bio .txt-wrap p {
    margin-bottom: 12px;

    font: 400 18px/24px "Roboto", sans-serif;

    color: #fff;
}

.ferroni-bio .ampliar {
    margin-top: 0;

    font: bold 18px/1 "Roboto";

    text-decoration: none;
    text-transform: uppercase;

    color: #fff;

    align-self: flex-end;
}

/* Home: Acerca de la Clinic ------------------------------------ */

.clinica {
    display: flex;
    padding: 30px 0;
    margin: 50px 0;
}

.clinica .txt-wrap {
    width: 40%;
    padding-right: 3%;
}

.clinica .txt-wrap h2 {
    margin-bottom: 12px;

    font: bold 24px/30px "Roboto", sans-serif;

    color: #009ec7;
}

.clinica .txt-wrap p {
    margin-bottom: 12px;

    font: 400 18px/24px "Roboto", sans-serif;

    color: #717375;
}




.clinica .txt-wrap li {
    margin-bottom: 12px;

    font: 400 18px/24px "Roboto", sans-serif;

    color: #717375;
}

.clinica .gallery-wrap {
    width: 60%;
}

.clinica .clinica-gallery .owl-dots {
    display: flex;

    justify-content: flex-end;
}

.clinica .clinica-gallery .owl-dot span {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin: 20px 0 0 12px;

    border-radius: 40px;
    background: #84bad3;
}

.clinica .clinica-gallery .owl-dot.active span {
    background: #3698b9;
}

.clinica .clinica-gallery .owl-nav {
    display: none;
}


/* Home: Noticias ------------------------------------ */

.noticias {
    background: #f2f3f5;
}

.noticias h2 {
    padding: 25px 0;

    font: bold 26px/1 "Roboto", sans-serif;

    text-transform: uppercase;

    color: #009ec7;
}

.noticias-wrapper {
    display: flex;

    margin: 0 -15px;

    flex-wrap: wrap;
    justify-content: flex-start
}

.noticias-wrapper .article {
    display: flex;
    flex-direction: column;

    background: #717375;

    width: 100%;
    max-width: calc(33.33% - 30px);
    margin: 15px;
    box-sizing: border-box;
    margin-bottom: 25px;

}

.noticias-wrapper .article .img-link {
    display: inline-block;
    margin: 20px 0;
}

.noticias-wrapper .article .noticia-img {
    width: 100%;
    height: auto;
}

.noticias-wrapper .article .txt-wrap {
    display: flex;
    height: 100%;
    padding: 0 20px 20px 20px;
    flex-direction: column;

    justify-content: space-between;
}

.noticias-wrapper .article .titulo-noticia a {
    display: inline-block;
    margin-bottom: 30px;

    font: bold 20px/1.3 "Roboto", sans-serif;

    text-decoration: none;

    color: #fff;
}

.noticias-wrapper .article a.ver-mas {
    text-decoration: none;

    color: #fff;

    align-self: flex-end;
}

.noticias-archive {
    margin: 0 -15px;

    flex-wrap: wrap;
    justify-content: flex-start;
}

.noticias-archive .article {
    width: 100%;
    max-width: calc(33.33% - 30px);
    margin: 15px;
    box-sizing: border-box;
}

.noticias-archive-2 {
    flex-direction: column;    
}

.noticias-archive-2 .article {
    max-width: 100%;
    background: none;
}

.noticias-archive-2 .article .titulo-noticia {
    margin-bottom: 10px;
}

.noticias-archive-2 .article .titulo-noticia a {
    color: #0e8cac;
    margin-bottom: 0;
}

.noticias-archive-2 .article .txt-wrap {
    padding: 0;
}

.main-body .titulo-noticia {
    margin-top: 0;
}



/* Internas ------------------------------------ */



.main-picture img {
    width: 100%;
    height: auto;
}

section.main-body {
    padding: 70px 0;
}

.main-body .max-width {
    max-width: 900px;
}

.main-body h1 {
    padding: 25px 0;
    margin-bottom: 25px;

    font: bold 30px/1 "Roboto", sans-serif;

    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;

    /*color: #0e8cac;*/
    color: #717375;
    border-bottom: 1px solid #ccc;
}

.main-body h2 {
    margin-top: 35px;
    margin-bottom: 14px;

    font: bold 18px/1 "Roboto", sans-serif;

    letter-spacing: .63px;

    /*color: #766099;*/
    color: #717375;
}


.main-body h3 {
    margin-top: 35px;
    margin-bottom: 20px;

    font: bold 21px/1 "Roboto", sans-serif;

    letter-spacing: .5px;

    /*color: #ec7004;*/
    color: #717375;
}

.main-body h4 {
    padding-bottom: 0;
    margin-top: 40px;
    margin-bottom: 15px;

    font: bold 15px/1 "Roboto", sans-serif;

    letter-spacing: .5px;
    text-transform: uppercase;

    /*color: #009ab9;*/
    color: #717375;
}

.main-body p {
    margin-bottom: 12px;

    font: 400 18px/24px "Roboto", sans-serif;

    color: #717375;
}

.main-body li {
    padding-left: 0;
    margin-bottom: 12px;
    margin-left: 50px;

    font: 400 18px/24px "Roboto", sans-serif;
    list-style-type: disc;

    color: #717375;
}

.main-body .especialidad {
    /*padding-left: 30px;*/
}

.main-body .subtitulo-especialidades {
    padding-bottom: 20px;
    margin-top: 70px;
    margin-bottom: +30px;

    font-size: 30px;
    font-weight: 400;

    text-align: center;

    color: #414141;
    border-bottom: 1px solid #ccc;
}

.main-body .subsubtitulo-especialidades {
    margin-top: 35px;
    margin-bottom: 14px;

    font: bold 18px/1 "Roboto", sans-serif;

    letter-spacing: 1px;
    text-transform: inherit;

    color: #646464;
}

.main-body strong {
    font-weight: bold;
}

.divider {
    border-top: 1px solid #ccc;
    margin: 30px 0;
}

.main-body .bajada {
    font-size: 24px;
    line-height: 1.3;
    margin-bottom: 25px;
}

p.color-azul, .color-azul li {
    font-weight: bold;
    color: #0e8cac;
}

img.body-image {
    margin: 15px auto;
    display: block;
    max-width: 100%;
    height: auto;
}

.galeria-interna-wrapper {
    margin: 25px 0;
}


/* Contacto ------------------------------------- */

.contacto-container {
    max-width: 600px;
    margin: 0 auto;
}

#contact fieldset {
    width: 100%;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
  font: 400 16px/21px "Roboto", Helvetica, Arial, sans-serif;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
  width: 100%;
  border: 1px solid #ccc;
  background: #FFF;
  margin: 0 0 15px;
  padding: 10px;
  border-radius: 5px;
  box-sizing: border-box;
}

#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
  -webkit-transition: border-color 0.3s ease-in-out;
  -moz-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
  border: 1px solid #aaa;
}

#contact textarea {
  height: 100px;
  max-width: 100%;
  resize: none;
}

#contact button[type="submit"] {
  cursor: pointer;
  width: 100%;
      display: inline-block;
    padding: 15px;
    font: bold 16px/1 "Roboto";
    text-decoration: none;
    text-transform: uppercase;
    color: #fff;
    background: #0e8cac;
    border: none;

}


#contact button[type="submit"]:hover {
  background: #43A047;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.main-body .mapa {
    height: auto;
    margin-bottom: 25px;
    width: 100%;
}

.main-body .mapa iframe{
    width: 100%;
}


.datos-contacto {
    text-align: center;
    margin-bottom: 25px;
}

/* Footer ------------------------------------ */

footer .main-wrapper {
    display: flex;
}

#footer-nav li a {
    display: inline-block;
    margin-bottom: 9px;

    font: 400 18px/20px "Roboto", sans-serif;

    text-decoration: none;

    color: #fff;
}


.bloque-turnos {
    display: flex;
    width: 34%;
    flex-direction: column;

    align-items: center;
    justify-content: center;
}

.bloque-azul {
    display: flex;
    width: 66%;
    padding: 35px 0;

    background: #0e8cac;

    align-items: center;
    justify-content: space-around;
}

.bloque-turnos .boton-turnos {
    display: inline-block;
    padding: 15px;

    font: bold 24px/1 "Roboto Condensed";

    text-decoration: none;
    text-transform: uppercase;

    color: #fff;
    background: #0e8cac;
}

.bloque-turnos h3 {
    margin-bottom: 15px;

    font: bold 24px/1 "Roboto Condensed";

    text-transform: uppercase;

    color: #646466;
}

.bloque-turnos span.comuniquese {
    margin-top: 25px;

    font: bold 24px/1.3 "Roboto Condensed";

    text-transform: uppercase;

    color: #646466;
}


a#logo-footer {
    display: inline-block;

    font-size: 0;

    flex-shrink: 0;
}

a#logo-footer img {
    width: 100%;
    height: auto;
    max-width: 200px;
    padding: 0;

    flex-shrink: 0;
}

.bloque-azul .separador {
    display: inline-block;
    width: 2px;
    height: 200px;

    background: #fff;
}

footer .bottom {
    display: flex;
    padding: 25px 0;

    justify-content: space-between;
}

footer .bottom span {
    display: inline-block;

    font: bold 13px/1.3 "Roboto", sans-serif;

    color: #646466;
}
footer .bottom .firma {
    display: inline-block;

    font: bold 13px/1.3 "Roboto", sans-serif;

    text-decoration: none;

    color: #646466;
}


@media (max-width: 800px) {
    header .max-width {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 9999 !important;

        background: #fff;
        box-shadow: 2px 0 5px #ccc;
    }

    main {
        margin-top: 160px;
    }

    a#logo img {
        max-width: 100px;
    }
    nav.main-nav {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 9999;

        display: none;
        padding-bottom: 35px;
        flex-direction: column;

        background: #fff;

        align-items: center;
    }

    nav.main-nav.open {
        display: flex;
    }

    nav.main-nav .sections-nav {
        flex-direction: column;

        align-self: center;
    }

    nav.main-nav .turnos-online {
        margin: 30px 0;

        align-self: center;
    }



    .social-nav {
        max-width: 140px;

        flex-wrap: wrap-reverse;
        justify-content: center;
        order: 4;
    }

    button#close {
        position: absolute;
        top: 20px;
        right: 20px;

        display: inline;

        font-size: 18px;

        cursor: pointer;

        border: none;
        background: none;
    }

    .sections-nav .sub-menu:hover {
        display: none !important;

        /*position: absolute;
        top: 36px;
        z-index: 9999 !important;

        display: flex;
        padding: 20px 0;
        flex-direction: column;

        opacity: 1;
        border-bottom: 7px solid  #0e8cac;
        background: #fff;*/
    }
    .mnu {
        position: absolute !important;
        top: 36px !important;
        z-index: 9999 !important;
        display: flex !important;
        padding: 20px 0 !important;
        flex-direction: column !important;
        opacity: 1 !important;
        border-bottom: 7px solid  #0e8cac !important;
        background: #fff !important;
    }

    .sections-nav li:last-child a {
        padding-right: 20px;
    }

    .sections-nav li {
        justify-content: center;
    }
    .social-nav li a {
        display: inline-block;
        padding: 10px;
    }
    .sections-nav li a:after {
        display: none;
    }
    .main-nav-mobile {
        display: inline-block;
    }

    .social-nav a.icon {
        margin-top: 15px;
    }

    /* Home: Dr Ferroni ------------------------------------ */

    .ferroni-bio {
    }

    .ferroni-bio .ferroni-pic {
        position: relative;

        width: 100%;
        height: 200px;
        margin-bottom: 32px;

        background-position: center;
    }

    .ferroni-bio .txt-wrap {
        padding-left: 0;
    }

    .ferroni-bio .txt-wrap h2 {
    }

    .ferroni-bio .txt-wrap p {
    }

    .ferroni-bio .ampliar {
    }

    /* Home: Acerca de la Clinic ------------------------------------ */

    .clinica {
        flex-direction: column;
    }

    .clinica .txt-wrap {
        width: 100%;
        margin-bottom: 30px;
    }

    .clinica .gallery-wrap {
        width: 100%;
    }

    /* Home: Noticias ------------------------------------ */

    .noticias-wrapper {
        flex-direction: column;
        margin: 0 ;
    }
    .noticias-wrapper .article {
        width: 100%;
        max-width: 100%;
        margin: 0 0 25px 0;

    }

    .noticias-archive {
        margin: 0 ;
        max-width: 100%;
        margin: 15px 0;
    }

    .noticias-archive .article {
        max-width: 100%;
        margin: 15px 0;
    }



    /* Footer ------------------------------------ */


    footer .main-wrapper {
        flex-direction: column;
    }

    .bloque-azul {
        width: 100%;
    }
    .bloque-turnos {
        width: 100%;
        padding: 25px 0;
    }
}

@media (max-width: 575px) {
    .bloque-azul {
        flex-direction: column;
    }
    .bloque-azul .separador {
        width: 100%;
        height: 0;
        margin: 25px;
    }

    #footer-nav li {
        text-align: center;
    }

    footer .bottom {
        flex-direction: column;
    }
    footer .firma {
        margin: 25px;

        text-align: center;
    }

}