/* ANCHO DE LAS PAGINAS */
*{margin: 0;padding: 0;}
html {width: 100%; height: 100%;}
body {width: 100%;margin:0;font-family:Verdana, Geneva, Tahoma, sans-serif}
p {margin:0 0 10px}
a {text-decoration:none; color:#454550; transition: all 0.5s;}
a:hover{ color:#858596}
#cuerpo {width:100%;margin: 0 auto 0 auto;padding:0}
h1 {margin:50px auto 20px auto;line-height: 40px;}
h2 {font-size:14px;margin:10px auto;}
h3 {margin:10px auto 20px auto;text-align:center;text-transform:uppercase}
.imgs {width:100%;margin:5px auto}

#contact {width:100%;padding:8px 0;text-align:center;font-size:14px;color:#fff;background-color:#454550}
#contact a {color:white}
#contact a:hover {color:#858596; transition: all 1s;}
.cabecera {width:98%;margin:auto; padding:12px 1%}
#logo {float:left;max-height:85px;transition: all 1s}
.logo {max-width:283px;z-index: 999;display:block;transition: all 1s}
.logo_movil {max-width:283px;z-index: 999;display:none;transition: all 1s}
.br {display:block}
.container   {position:absolute;text-align:center;left:0px;top:0px;z-index:100;background-color:rgba(0,0,0,0.5);width:100%;height:100%;position:fixed;overflow:hidden}
.subcontainer{position:absolute;text-align:center;left:30%;top:30%;z-index:102;background-color:white;border-radius:5px;box-shadow:0px 7px 10px #222;padding:5px!important;width:40%;font-size:14px !important}
.ok{color:#4375ea;padding:20px 10px;font-size:20px}
.error{color:#ff0000;padding:20px 10px;font-size:20px}

/* MENU*/
.logos_link{margin:0 5px;font-size: 23px}
.logos_link2{margin:0 5px;font-size: 18px}
a { cursor:pointer}
.menu_bar {display:none;}
header {width: 100%}
header nav {margin:auto;float:right}
header nav ul {list-style:none;}
header nav ul li {display:inline-block;position: relative;text-align:center}
.menu1 {padding:18px 15px 40px 15px}
header nav ul li:hover {color:#858596}
header nav ul li a {color:#454550;display:block;text-decoration:none}
header nav ul li a span {margin-right:10px}
header nav ul li:hover .children {display:block;}
header nav ul li .children {display: none;background:#858596;position: absolute;width: 220px;z-index:1000;top:93px}
header nav ul li .children li {display:block;overflow: hidden;border-bottom: 1px solid rgba(255,255,255,.5);height:40px;text-align:left}
header nav ul li .children li a {display: block;color:white;padding:10px}
header nav ul li .children li a span {float: right;position: relative;margin-right:0;margin-left:10px;}
header nav ul li .caret {margin-left:2px;position:absolute;-webkit-transform: rotate(180deg);transition: all 0.3s}

/* Menu pegajoso */
.cabecera-fixed {height:50px !important;position:fixed;z-index:10;top:0;box-shadow:0px 4px 3px rgba(0,0,0,.5);background-color:white;transition: all 0.5s}
.header-fixed {height:50px !important;transition: all 0.5s}
.logo-fixed {max-width:180px!important;transition: all 0.5s}
.li-fixed {height:51px !important;line-height:normal !important;padding:18px 15px 30px 15px !important;transition: all 0.5s}
.li-fixed a:hover {height:51px !important}
.menu1-fixed {padding:4px 15px 15px 15px !important}
.children-fixed {top:62px !important;}
.espacio-index-fixed {margin:580px auto auto auto !important}
.contenido-fixed {margin:110px auto auto auto !important}

/* INDEX.PHP */
#contenido-index1 {text-align:center;background-color:white;width:90%;padding:0;overflow:hidden;transition: opacity 1.5s}
#contenido-index2 {text-align:center;background-color:white;width:90%;padding:0;overflow:hidden;transition: all 1.5s;margin:auto}
.espacio-index {margin:560px auto auto auto !important}
#contenido {text-align:center;margin:auto;background-color:white;width:95%;padding:0;overflow:hidden}
#vacio { width:100%;height:80px}
.logos_texto{ margin:10px;font-size:30px}
#texto-izq1, #texto-izq2 {width:44%;padding:3%;text-align:justify;color:#454550;position:relative;float:left;margin:5px auto;line-height:25px;transition: all 1.5s}
#texto-der1, #texto-der2 {width:44%;padding:3%;text-align:justify;color:#454550;position:relative;float:left;margin:5px auto 0 auto;transition: all 1.5s}
.bodasnet {text-align:center;}
.bodasnet_img {width:125px;height:125px}
.bodasnet_img0 {width:150px;height:150px}
.bodasnet_img1 {width:175px;height:175px}
.bodasnet_img2 {width:200px;height:200px}
.instalaciones {margin:3px;text-align:center}

#texto-slider {text-align:justify;width: 100%;max-width: 800px;margin:auto;font-size: 15px;line-height: 20px;}
.fotoslider {color:white;margin:10px}
.fotoslider2 {text-align:justify}
.videos{width:100%;margin:10px auto}
.video{max-width:390px;box-shadow:0px 5px 12px #333;margin:7px}
.photocalls {width: 100%;max-width: 800px;margin: auto}
.img-photocalls {width: 45%;max-width: 350px;margin:20px 2%;box-shadow: 0px 5px 12px #333;}
        
/* PIE DE PAGINAS */
#copy {text-align:center; margin:auto; padding:1%; color:white; font-size:12px; width:98%;overflow:hidden; background-color:#454550}
.tdizq {text-align: center; width:27%; padding:1%;float:left;font-size:16px}
.tdcen {text-align: center; width:40%; padding:1%;float:left;font-size:16px}
.tdder {text-align: center; width:27%; padding:1%;float:left;font-size:12px;color:white}
.info { text-align:justify;max-width:300px;margin:13px auto;line-height:1.5}
.copy-texto {text-align: center; width:90%;padding:10px 5%;overflow:hidden;}
.logos_redes {font-size:30px;margin:auto 5px;line-height:1.5em !important;color:white}
a .icon-phone{ color:white}
a .tel {color:white}
a .logos_redes{ color:white}
a:hover .logos_redes, a:hover .tel, a:hover .icon-phone{ color:#858590}
.imgtd { max-height:40px;margin:10px 0}
#footer {background-image:url('../images/gente_bailando.png');height:70px; width:100%; margin:20px auto auto auto;}
.menu-abajo{color:white;width:100%;padding:10px 0;overflow:hidden}   
.menu-abajo a {color:white;}   
.menu-abajo a:hover{ color:#858596}
.br2 {display:none}

/* form */
input     {margin:10px 0 0 0; font-size: 10pt; height: 30px; width: 98%;max-width:300px;}
.medio-input {margin:10px 0 0 0; font-size: 10pt; height: 30px; width: 47%;max-width:145px;}
textarea  {margin:10px 0 0 0; font-size: 10pt; height: 100px; width: 98%;max-width:300px;font-family: Arial, Helvetica, sans-serif}
.mensaje-form {text-align:center;color:#454550;font-weight:bold;overflow:hidden;padding:2%;width:86%;margin:auto;background-color:white;opacity:0.9}
.asunto {display:none}

/* Cookies */
#cookies {width:100%;bottom:0;padding:0.5% 0;font-size:14px;text-align:center;background:#111;color:white;overflow:hidden;position:fixed;opacity:0.8;z-index:99999999999}
#cookies:hover {}
.cookies-texto {padding:0 1%;width:98%;color:#fff;line-height:20px;text-align:center}
.cookies-boton {padding:2px;width:70px;margin:0 auto}
.cerrar {background:#666;color:#FFF;padding:2px 10px;cursor:pointer}

/* Fijos abajo */
.subir {position:fixed;bottom:10px;left:10px;opacity:0.8;font-size:45px;color:#858596}
.subir:hover {color:#444}
.whatsapp {bottom:5px;right:10px;overflow:hidden;position:fixed;font-size:45px}
.whatsapp a {color:#25D366;}


/*---------------------------------------------------------------------------- MEDIA QUERY---------------------------------------------------------------------*/

@media only screen and (max-width: 1000px) {  
/* CABECERA */
.br {display:none}
#logo {float:none}
.logo {display:none}
.logo_movil {display:block;margin:auto}
header{position:relative}
.cabecera {padding:15px 0;width:100%}
.logos_link{margin:0 7px 0 7px ;}
.ir{background: url('../images/jpg_viejas/ir.png') no-repeat center;float:right; margin:7px 10px 0 10px; display:block}
.logos_texto{ margin:5px;font-size:30px}
.letra_disco{ display:block;float:left;color:white}
.bodasnet_img {width:100px;height:100px}
.bodasnet_img0 {width:120px;height:120px}
.bodasnet_img1 {width:140px;height:140px}
#contenido-index {width:90%}
#contenido {width:90%;padding:0 5%}

/* MENU */
.cerrar-menu {display:none !important}
.menu_bar {display:block;width:100%;color:#454550}
.menu_bar .bt-menu {display: block;overflow: hidden;width:39px;position:absolute;right:0;top:3px;padding:19px 14px}
.menu_bar .icon-menu {color:#858596}
header nav {width: 70%;display:none;margin: 0;margin-left:30%;position:absolute;z-index:999}
header nav ul li {display: block;border-bottom:1px solid rgba(255,255,255,.5);background:#454550;text-align:left}
.menu1 {padding: 0}
#nav-boton span, #nav-boton span:after, #nav-boton span:before {transition: all 500ms ease-in-out;border-radius: 1px;height: 5px;width: 33px;position: absolute;display: block;content: "";background: #858596;}
#nav-boton span:before {top: -10px;}
#nav-boton span:after {top: 10px;}
.activo span {background-color: transparent !important;}
.activo span:before, .activo span:after {top: 0 !important;}
.activo span:after {transform: rotate(-45deg);}
.activo span:before {transform: rotate(45deg);}
header nav ul li a:hover {color:white}
header nav ul li a {display: block;color:white;padding: 10px}
header nav ul li:hover .children {display: none;}
header nav ul li .children {width: 100%;position: relative;top:0}
header nav ul li .children li {background:#858596}
header nav ul li .children li a {margin-left:20px;}
header nav ul li .caret {float:right;position:relative;top:2px}
.titulo{width:50% ; height: 50px; margin:auto;text-align:center;line-height:57px;display:block;color:#454550;font-weight:bold}
.atras{display:block;float:left;margin:0;width:50px;height:50px}
.atras2{position: relative;font-size: 46px;top: 2px;left: 15px;color: #858596;font-weight: bold !important;transform: rotate(270deg);float: left;}
.girar {top:7px !important;-webkit-transform: none !important;transition: all 0.3s}

/* Menu pegajoso */
.cabecera-fixed {height:0 !important;box-shadow:none;padding:0;transition:none}
.header-fixed {box-shadow:0px 4px 3px rgba(0,0,0,.5);background-color:white}
.logo-fixed { display:none}
.li-fixed {height:inherit !important;padding-top:0 !important}
.li-fixed a:hover {height:inherit !important}
.menu1-fixed {padding:0 !important}
.children-fixed {top:auto !important}
.espacio-index {margin:420px auto auto auto !important}
.contenido-fixed {margin:160px auto auto auto !important}
}

@media only screen and (max-width: 800px) {  
#texto-izq1, #texto-izq2 {float:none;width:88%;padding:6%}
#texto-der1, #texto-der2 {float:none;width:88%;padding:6%}
.logos_texto{ margin:10px;font-size:30px}
.tdizq, .tdcen, .tdder {float:none;width:90%; padding:2% 5%;}
.copy-texto {padding:30px 5%;}
.menu-abajo {padding:20px 0;}  
.br2 {display:block}
}

@media only screen and (max-width:620px){
#contact {font-size:13px}
}
@media only screen and (max-width:540px){
.logos_texto{ margin:5px;font-size:28px}
}