@charset "utf-8";
/* RESET */
* {
    margin: 0px;
    padding: 0px;
    outline: 0px none transparent;
    border: 0px none transparent;
    background: transparent none repeat scroll 0% 0%;
    font-weight: normal;
    font-style: normal;
    font-size: 100%;
    list-style-type: none;
    color: #1e1a1b;
    position: relative;
    font-family: Open Sans, Arial, sans-serif;
}
*, *::after, *::before {
    box-sizing: border-box;
}
@font-face {
    font-family: 'Pacifio';
    font-style: normal;
    font-weight: 400;
    src: local('Pacifio'), local('Pacifio'), url(../../web/fonts/pacifio.woff2) format('woff2');
}
h1{font-size: 4em;}
h2{font-size: 3em;}
h3{font-size: 2.5em;}
h4{font-size: 2em;}
h5{font-size: 1.5em;}

a{
    cursor: pointer;
    text-decoration: none;
}
a:hover, *:hover{
    text-decoration: none;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
b, strong{
    font-weight: bold;
}

img{
    width: 100%;
}
.center{text-align: center;}
.txt-left{text-align: left;}
.txt-right{text-align: right;}
.pull-right{float: right!important}
.pull-left{float: left!important}

.m10{margin: 10px !important}
.m20{margin: 20px !important}
.m30{margin: 30px !important}
.m40{margin: 40px !important}
.m50{margin: 50px !important}
.mtop10{margin-top: 10px !important}
.mtop20{margin-top: 20px !important}
.mtop30{margin-top: 30px !important}
.mtop40{margin-top: 40px !important}
.mtop50{margin-top: 50px !important}
.mbot10{margin-bottom: 10px !important}
.mbot20{margin-bottom: 20px !important}
.mbot30{margin-bottom: 30px !important}
.mbot40{margin-bottom: 40px !important}
.mbot50{margin-bottom: 50px !important}

.clear{clear: both}
.hide {display:none;}

header{
    z-index: 9;
    background: #fff;
    -webkit-box-shadow: 0 0 18px rgba(0,0,0,.5);
    -moz-box-shadow: 0 0 18px rgba(0,0,0,.5);
    box-shadow: 0 0 18px rgba(0,0,0,.5);
}
nav.contact{
    background: #fcfcfc;
    padding: 5px 10%;
}
nav.contact li{
    display: inline-block;
    margin-right: 30px;
    font-size: 12px;
}
nav.contact li img{
    width: 20px;
    margin-right: 10px;
    vertical-align: middle;
}
.logo{
    display: inline-block;
    width: 100%;
}
.logo img{
    width: 200px;
    margin: 15px 8%;
}
.slogan{
    font-size: 1.4em;
    font-family: 'Pacifio', serif;
    text-align: right;
    line-height: 110%;
    margin: 10px 8%;
    color: #dbd2da;
    letter-spacing: 1px;
}
nav.sections{
    border-top: 1px solid #eee;
    width: 85%;
    margin: 0 auto;
}
nav.sections ul{
    text-align: center
}
nav.sections li{
    display: inline-block;
}
nav.sections li a{
    display: inline-block;
    padding: .5em .75em;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 100;
    margin: 0 20px;
}
/*contenido*/
section{
    padding: 30px 10% 50px;
    display: inline-block;
    margin: -3px 0;
    width: 100%;
}
.sectionone{
    background-image: url('images/flor.jpg');
    background-size:  cover;
    background-position: center;
}
.pedircita{
    max-height: 600px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    -webkit-box-shadow: 0 0 18px rgba(0,0,0,.5);
    -moz-box-shadow: 0 0 18px rgba(0,0,0,.5);
    box-shadow: 0 0 18px rgba(0,0,0,.5);
}
.pedircita .contact{
    position: absolute;
    bottom: 30px;
    right: 20px;
}
.pedircita .contact img{
    width: 20px;
    vertical-align: middle;
    margin-right: 10px
}
.pedircita .btn.only-on-mobile{
    position: absolute;
    bottom: 15px;
    right: 10px;
}
.pedircita h1 {
    text-transform: uppercase;
    font-weight: 100;
    letter-spacing: 2px;
    font-size: 2em;
    padding: 7em 0 .5em;
    height: 50%;
    max-height: 300px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    color: #fff;
    background-image: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,.9) 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255,255,255,0)), color-stop(50, rgba(255,255,255,.5)), color-stop(100, rgba(255,255,255,.9)));
    background-image: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,.9) 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,.5)), to(rgba(255,255,255,.9)));
    background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,.9) 100%);
}
#mensaje_ok_cita,
.pedircita form{
    position: absolute;
    bottom: 0;
    background-color: rgba(255,255,255,.9);
    height: 50%;
    padding: 0 20px 20px 20px;
    width: 100%;
}
input, textarea, select{
    background: rgba(255,255,255,.9);
    padding: 20px 25px;
    width: 50%;
    float: left;
}
input, select{
    border: 1px solid transparent;
}
input, select{
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
}
input:nth-child(2), select{
    border-right: 1px solid transparent;
}
textarea{
    width: 100%;
    margin-bottom: 30px
}
input[placeholder], [placeholder], *[placeholder] {
    color: #1e1a1b;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #ccc;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #ccc;
    opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #ccc;
    opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #ccc;
}
::-ms-input-placeholder { /* Microsoft Edge */
    color:    #ccc;
}
select{
    color: #ccc;
    padding: 19px 25px;
}
.error{
    border-color: red!important;
}
.error::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: red;
}
.error:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    red;
    opacity:  1;
}
.error::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    red;
    opacity:  1;
}
.error:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    red;
}
.error::-ms-input-placeholder { /* Microsoft Edge */
    color:    red;
}



.btn{
    background-color: #9e4b93;
    color: #fff;
    padding: .5em 1em;
    border-radius: 2px;
    width: auto;
    border: none;
}
.btn:hover{
    background-color: #511f4a;
}
.btn:active{
    background-color: #1e1a1b;
}
.destacado .btn{
    padding: 1em 2em;
    border-radius: 2em;
    font-size: 1.1em;
    text-transform: uppercase;
    font-weight: 100;
    letter-spacing: 2px;
    display: block;
    width: 333px;
    margin: 0 auto;
    text-align: center;
}
.destacado h1{
    text-align: right;
    padding: 1em 3em 1em 0;
}
.destacado h1 span{
    font-family: 'Pacifio', serif;
    display: block;
    font-size: 180%;
    line-height: 100%;
    color: #ffffff;
    text-shadow: 0 0 20px #000;
    z-index: 1
}
.destacado h1 b {
    font-size: 150%;
    line-height: 110%;
}
.destacado h1 strong:after{
    content: '';
    position: absolute;
    right: 0;
    bottom: -15px;
    width: 90%;
    height: 5px;
    background-color: #9e4b93
}
.destacado h1 b:before{
    content: '';
    position: absolute;
    right: 0;
    top: 15px;
    width: 200%;
    height: 5px;
    background-color: #9e4b93;
    z-index: 0;
}

.sectiontwo{
    background: #fff;
    -webkit-box-shadow: 0 0 18px rgba(0,0,0,.5);
    -moz-box-shadow: 0 0 18px rgba(0,0,0,.5);
    box-shadow: 0 0 18px rgba(0,0,0,.5);
    text-align: center;
}
.sectiontwo h2:before{
    content: '';
    position: absolute;
    right: 35%;
    top: -5px;
    width: 30%;
    height: 5px;
    background-color: #9e4b93
}
.sectiontwo h2:after{
    content: '';
    position: absolute;
    right: 30%;
    bottom: -10px;
    width: 40%;
    height: 5px;
    background-color: #9e4b93
}
.sectiontwo p{
    margin: 30px;
}
.sectiontwo h2{
    font-size: 2.8em;
    font-weight: 900;
    text-shadow: 0 0 6px rgba(0,0,0,.5);
    color: #fff;
}
.sectiontwo h3:after{
    content: '';
    position: absolute;
    right: 30%;
    bottom: -10px;
    width: 40%;
    height: 5px;
    background-color: #9e4b93
}
.sectiontwo h3{
    font-weight: 100;
}

/*footer*/
footer {
    background-image: -webkit-linear-gradient(30deg, #511f4a 0%, #9e4b93 100%);
    background-image: -o-linear-gradient(30deg, #511f4a 0%, #9e4b93 100%);
    background-image: linear-gradient(60deg, #511f4a 0%, #9e4b93 100%);
    padding: 40px 10%;
    display: inline-block;
    margin: -5px 0;
}
footer h4{
    color: rgba(255,255,255,.8);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1.2em;
    margin-bottom: 8px
}
footer  h4 + ul{
    margin-left: 15px;
}
footer  li, footer p{
    color: rgba(255,255,255,.4);
    margin: 10px 0 0 15px;
}
footer li span{
    color: rgba(255,255,255,.7);
}
footer li span a{
    color: #e5ae14;
}

.form_error{
    float: left;
    width: 50%;
}
.form_error *{
    width: 100%;
}
.form_error input, .form_error select{
    border-color: rgba(255, 102, 102, 0.9);
}
.form_error textarea{
    border: 1px solid rgba(255, 102, 102, 0.9);
}
.form_error .mensaje_error {
    position: absolute;
    top: 60px;
    padding: 2px 20px;
    background-color: rgba(255, 102, 102, 0.9);
    z-index: 1;
    color: white;
    left: 0;
    font-size: 0.9em;
}
.cien {
    width: 100%;
}
#contacto_cargando {
    height: 100%;
    display: none;
    text-align: center;
    padding: 8% 0%;
    color: #9e4b93;
}
#contacto_cargando img{
    height: 50%;
    margin-bottom:20px;
}
#contacto_respuesta{
    text-align: center;
    width:100%;
    padding: 1%;
    float:left;
    display: none;
}
.respuestaText{
    margin: 20px auto;
    max-width: 500px;
}
#okemail{
    color: #00FF00;
}
#email_error{
    color: red;
}

/*PC +1680*/
@media (min-width: 1680px){
}
/*PC 19" 1440*/
@media all and (max-width: 1440px){
    section{padding: 30px 8%}
}
/*PC 15" 1366*/
@media all and (max-width: 1366px){
    section{padding: 30px 5%}
}
/*PC 13" 1280*/
@media all and (max-width: 1280px){
    section{padding: 20px 5% }
    input, select{ width: 100%; }
    .form_error { width: 100%; }
    input, select { border-right: 1px solid transparent; }
    .pedircita { max-height: 675px; }
    .pedircita h1 { height: 40%; padding: 5.8em 0 .5em; }
    #mensaje_ok_cita,
    .pedircita form { height: 60%; }
}

@media all and (max-width: 1125px){
    .pedircita { max-height: 600px; }
    .pedircita h1 { height: 30%; padding: 3.5em 0 .5em; }
    #mensaje_ok_cita,
    .pedircita form { height: 70%; }
}

/*desde Tablet Horizontal*/
@media all and (min-width: 1025px){
}
/*Tablet Horizontal*/
@media all and (max-width: 1024px){
    section{padding: 20px}
    nav.contact {padding: 5px 5%;}
    .destacado h1 {padding: 1em 1em 1em 0;}
}

/*Tablet vertical*/
@media all and (max-width: 769px){
    .pedircita {max-height: 530px;}
    .pedircita .contact {bottom: 20px;right: 10px;}
    .destacado h1 {padding: 1.75em .5em 1em 0;font-size: 3em}
    .destacado h1 span {font-size: 180%;}
    .pedircita .contact img{display: none}
    h3{font-size: 2em;}
    .pedircita h1 { height: 25%; padding: 2.5em 0 .5em; }
    #mensaje_ok_cita,
    .pedircita form { height: 75%; }

}
/*Smartphone horizontal*/
@media all and (max-width: 736px){
    .pedircita {max-height: 540px;}
    nav.contact {display: none}
    .slogan {font-size: 1em;margin: 10px 15px;letter-spacing: 0;}
    .logo img {margin: 9px 10px;position: absolute;}
    .destacado h1 {padding: 0 .5em .75em 0;}
    .destacado .btn{transform: scale(.8);margin-bottom: 10px}
    .sectiontwo h2, h3{font-size: 1.8em;}
    .sectiontwo p {margin: 30px 0;}
    input, select { width: 50%; }
    .form_error { width: 50%; }
    input, select{ border-right: 1px solid #eee; }
    .pedircita h1 { padding: 7em 0 .5em;height: 50%; }
    #mensaje_ok_cita,
    .pedircita form{ height: 50%; }
}
/*Smartphone*/
@media all and (max-width: 575px){
    input, select {width: 100%;}
    .form_error { width: 100%; }
    input, select{border-right: 1px solid transparent;}
    .pedircita h1 { padding: 2.5em 0 .5em;height: 27%; }
    #mensaje_ok_cita,
    .pedircita form{ height: 73%; }
}
@media all and (max-width: 360px){
    .slogan {opacity: 0}
    .logo img{left: 50%;transform: translateX(-50%);}
    .pedircita h1 { padding: 1.1em 0 .5em;}
    #mensaje_ok_cita,
    .pedircita form{ height: 82%; }
    textarea { margin-bottom: 10px; }
}
#mensaje_enviando_cita {
    height: 35px;
    width: auto;
    vertical-align: bottom;
    display: none;
}
#mensaje_ok_cita {
    text-align: center;
    padding: 20px 20px 70px;
    margin: auto;
    display: none;
}
#mensaje_ok_cita * {
    width: auto;
    font-size: 16px;
}
#mensaje_ok_cita .w {
    font-size: 1.3em;
    margin-bottom: 0.5em;
}