@charset "utf-8";
/* CSS Document */

/* tipografias, cargar aca las que se quieran usar para cada proyecto */
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:400,600|Roboto+Slab:300,400,700|Quicksand:400,700|Amatic+SC:400,700);



/* reset */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
    letter-spacing: normal;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav, ul {
    list-style:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    text-decoration: none;
}

input, textarea {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: none;
    outline: none;
    border: none;
    color: rgba(0,0,0,1);
    font-size: 16px;
    font-weight: 300;
}

/* estilos tipografia */

h1, h2 {
    font-family: 'Quicksand', sans serif;
}

p, span, li {
    font-family: 'Roboto Slab', sans-serif;
}

h4, h5 {
    font-family: 'Roboto Slab', serif;
}

h6, label, input, textarea, form fieldset p, form fieldset span, span {
    font-family: 'Quicksand', serif;
}

footer, h3 {
    font-family: 'Quicksand', sans-serif;
}

/* estilos generales */

section {
    position: relative;
    width: 100%;
    margin: auto;
}

/* fondos */

#nombre-novios {
    background-image: url(../img/bg/2560/bg-header.jpg);
    height: 100%;
	background-position:center;
}

#invitacion {
	background-color: rgba(123,237,154,1);
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    height: 224px;
   
}

#schedule {
	background-color: rgba(255,255,255,1);
}

#gift {
    background-image: url(../img/bg/2560/bg-gift.jpg);
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-top: 30px;
    padding-bottom: 30px;
}

#contact {
    background-color: rgba(123,237,154,1);
    height: 100%;
    padding-top: 42px;
    padding-bottom: 42px;
}

#social-share {
	background-color: rgba (0,0,0,1);
    height: 100%;
    padding-top: 15px;
}


/* header con fondo de luces */

header {
    position: relative;
    background-repeat: no-repeat;
    background-position: top center;
    width: 100%;
    max-height: 130px;
    margin: auto;
    text-align: center;
}

/* nombre de los novios */

header img {
    margin-top: 630px;
}

/* invitacion */

#contenedor-blonda {
    max-width: 500px;
    min-height: 370px;
    text-align: center;
    margin: auto;
}

#info-padres {
    padding-top: 40px;
}

#info-padres p {
    font-size: 22px;
	line-height:26px;
    color: rgba(0,0,0,1);
    max-width: 500px;
    margin: auto;
	text-transform:uppercase;
}

#info-padres h3 {
    font-size: 18px;
	line-height:24px;
    color: rgba(0,0,0,1);
    margin: auto;
    font-weight: 400;
	max-width: 500px;
}

/* schedule */

#titulo-fechas {
    margin: auto;
    padding-top: 40px;
    background-repeat: no-repeat;
    width: 300px;
    height: 48px;
    text-align: center;
    color: rgba(0,0,0,1);
    font-size: 22px;
    text-transform: uppercase;
	font-weight:400
}

#schedule ul {
    max-width: 815px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 25px;
    text-align: center;
}

#schedule ul li {
    display: inline-block;
    text-align: center;
    margin-right: 130px;
    max-width: 182px;
}

#schedule ul li:last-child {
    margin-right: 0;
}

#schedule ul li img {
    margin-bottom: 9px;
}

#mail:hover {
    content: url(../img/schedule/mail-hover.png);
}

#lista:hover {
    content: url(../img/schedule/lista-hover.png);
}

#mapa:hover {
    content: url(../img/schedule/mapa-hover.png);
}
#form:hover {
    content: url(../img/schedule/form-hover.png);
}

#imprimir:hover {
    content: url(../img/schedule/imprimir-hover.png);
}

#fotos:hover {
    content: url(../img/schedule/fotos-hover.png);
}

#disenos:hover {
    content: url(../img/schedule/disenos-hover.png);
}

#regalo:hover {
    content: url(../img/schedule/regalo-hover.png);
}

#calendario:hover {
    content: url(../img/schedule/calendario-hover.png);
}



#ejemplo:hover {
    content: url(../img/schedule/ejemplo-hover.png);
}


/* styles */

#titulo-fechas {
    margin: auto;
    padding-top: 40px;
    background-repeat: no-repeat;
    width: 261px;
    height: 48px;
    text-align: center;
    color: rgba(0,0,0,1);
    font-size: 22px;
	line-height:28px;
    text-transform: uppercase;
	font-weight:400
}

#styles ul {
    max-width: 815px;
    margin: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: center;
}

#styles ul li {
    display: inline-block;
    text-align: center;
	margin-left:2px;
    margin-right: 2px;
    max-width: 261px;
}

#styles ul li:last-child {
    margin-right: 0;
}

#styles ul li img {
    margin-bottom: 9px;
}

#floral:hover {
    content: url(../img/styles/floral-hover.jpg);
}

#vintage:hover {
    content: url(../img/styles/vintage-hover.jpg);
}

#classic:hover {
    content: url(../img/styles/classic-hover.jpg);
}

#rustic:hover {
    content: url(../img/styles/rustic-hover.jpg);
}
#handcrafted:hover {
    content: url(../img/styles/handcrafted-hover.jpg);
}

#gold:hover {
    content: url(../img/styles/gold-hover.jpg);
}



/* info regalo */

#contenedor-info-regalo, #contenedor-info-gracias {
	position: relative;
    max-width: 500px;
    margin: auto;
    text-align: center;
    background-repeat: no-repeat;
    background-position: top center;
}

#contenedor-info-regalo img, #contenedor-info-gracias img {
    margin-top: 500px;
    margin-bottom: 15px;
}

#contenedor-info-regalo h2, #contenedor-info-gracias h2 {
    margin-top: 500px;
	font-size: 18px;
    color: rgba(255,255,255,1);
    line-height: 20px;
    max-width: 340px;
    margin: auto;
    margin-bottom: 20px;
    font-weight: 400;
}

#contenedor-info-regalo p, #contenedor-info-gracias p {
    position: relative;
    font-size: 16px;
    color: rgba(255,255,255,1);
    padding-bottom: 20px;
}

#contenedor-info-regalo a, #contenedor-info-gracias a {
    color: rgba(255,255,255,1);
}

br#oculto {
    display: none;
}

/* contact */

#titulo-contact {
    margin: auto;
    background-repeat: no-repeat;
    width: 300px;
    height: 38px;
    text-align: center;
    color: rgba(0,0,0,1);
    font-size: 22px;
    text-transform: uppercase;
	font-weight:400
}


#contact h6 {
    font-size: 16px;
    font-weight: 500;
    color: rgba(0,0,0,1);
    text-align: center;
    line-height: 20px;
    max-width: 360px;
    margin: auto;
}

#contact a {
    font-weight: 600;
    color: rgba(234,88,100,1);
}

/* form */

#contact form {
    position: relative;
    text-align: center;
    margin: auto;
    margin-top: 35px;
}

#contact form fieldset {
    display: inline-block;
    max-width: 385px;
    vertical-align: top;
    text-align: left;
}

#contact form fieldset label {
    display: block;
    color: rgba(0,0,0,1);
    font-size: 16px;
    font-weight: 300;
}

.label-hide {
    position: absolute;
    padding-left: 10px;
    padding-top: 15px;
}

#contact form fieldset input {
    height: 44px;
    background-color: rgba(255,255,255,1);
    border-top-width: 1px;
    border-top-color: rgba(0,0,0,.26);
    border-top-style: inset;
    border-radius: 3px;
    padding-left: 15px;
    color: rgba(0,0,0,1);
}

#contact form fieldset p {
    margin-top: 10px;
    color: rgba(0,0,0,1);
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 30px;
}

#contact form fieldset ul {
    margin-top: 15px;
    text-align: left;
}

#contact form fieldset ul li {
    display: inline-block;
    margin-right: 8px;
}

#contact form fieldset ul li:last-child {
    margin-right: 0;
}

#contact form fieldset ul li span {
    display: inline-block;
    color: rgba(0,0,0,1);
    font-size: 16px;
    font-weight: 300;
    margin-left: 2px;
}

#contact form fieldset textarea {
    resize: none;
    height: 82px;
    background-color: rgba(255,255,255,1);
    border-top-width: 1px;
    border-top-color: rgba(0,0,0,.26);
    border-top-style: inset;
    border-radius: 3px;
    padding-left: 14px;
    padding-top: 15px;
    color: rgba(0,0,0,1);
    margin-bottom: 23px;
    width: 383px;
}

#submit-button {
    height: 44px;
    width: 115px;
    float: right;
    background-color: rgba(234,88,100,1) !important;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-color: rgba(203,53,66,1);
    border-top: none !important;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 16px;
    color: rgba(255,255,255,1) !important;
    padding: 0 !important;
    cursor: pointer;
}

#submit-button:hover {
    background-color: rgba(203,53,66,1) !important;
}

/* margen entre campos */

.izquierda {
    margin-right: 19px;
}

/* tamaño inputs */

.largo {
    width: 375px;
}

.cuadrado {
    width: 42px;
    text-align: center;
    padding-left: 0 !important;
}

.mediano {
    width: 235px;
}

/* social share */

#social-share h3 {
    font-size: 18px;
    line-height: 26px;
    color: rgba(0,0,0,1);
    max-width: 345px;
    margin: auto;
    text-align: center;
    font-weight: 700;
}

#social-share span {
    color: rgba(255,255,255,1);
    font-weight: 600;
    font-size: 20px;
    color: rgba(255,249,237,1);
    text-transform: uppercase;
}

#social-share ul {
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

#social-share ul li {
    display: inline-block;
    margin-right: 5px;
}

#social-share ul li:last-child {
    margin-right: 0;
}

#social-share ul li a {
    display: block;
    width: 44px;
    height: 44px;
    background-repeat: no-repeat;
    background-position: top center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

a#facebook {
    background-image: url(../img/iconos/social-share/fb-icon.png);
}

a#twitter {
    background-image: url(../img/iconos/social-share/tw-icon.png);
}

a#instagram {
    background-image: url(../img/iconos/social-share/instagram-icon.png);
}

a#whatsapp {
    background-image: url(../img/iconos/social-share/wp-icon.png)s;
}

#social-share ul li a:hover {
    background-position: bottom;
}

#volado {
    width: 100%;
    height: 21px;
    background-image: url(../img/bg/2560/bg-volado.png);
    background-repeat: no-repeat;
}

/* print invitacion */



/* footer y chivo not a piece of paper */

footer {
    clear: both;
    width: 100%;
    background-color: rgba(255,255,255,1);
    padding-top: 10px;
    height: 32px;
    text-align: center;
    font-size: 15px;
    font-weight: 400;
    vertical-align: middle;
}

footer a {
    font-weight: 700;
    color: rgba(234,88,100,1);
}

/* gracias */

#gracias {
    background: url(../img/bg/2560/bg-header.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#contenedor-info-gracias {
    margin-top: 55px;
}

#contenedor-info-gracias h2 {
    max-width: 305px;
}

/* notebooks 1280 */
@media only screen and (min-width : 1025px) and (max-width : 1280px) {

/* fondos */

#nombre-novios {
    background-image: url(../img/bg/1280/bg-header.jpg);
}

#invitacion {
    background-color: rgba(123,237,154,1);
}

#schedule {
    background-color: rgba(255,255,255,1);
}

#gift {
    background-image: url(../img/bg/1280/bg-gift.jpg);
}

#contact {
    background-color: rgba(123,237,154,1);
}

#social-share {
    background-color: rgba(255,255,255,1);
}

#print {
    background-color: rgba(255,255,255,1);
}    
}

/* ipads (portrait y landscape) corregir la caligrafica que se ve con interletra abierta */

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

/* fondos */

#nombre-novios {
    background-image: url(../img/bg/1024/bg-header.jpg);

}

header img {
    margin-top: 610px;
}

#invitacion {
    background-color: rgba(123,237,154,1);
}

#schedule {
    background-color: rgba(255,255,255,1);
}

#gift {
    background-image: url(../img/bg/1024/bg-gift.jpg);
}

#contact {
   background-color: rgba(123,237,154,1);
}

#social-share {
    background-color: rgba(255,255,255,1);
}

#print {
    background-color: rgba(255,255,255,1);
}
    
#volado {
    background-image: url(../img/bg/1024/bg-volado.png);
}

#contact form fieldset textarea {
    height: 92px;
}


#submit-button {
    height: 54px !important;
}
    
/* schedule */
    
#mail:hover, #web:hover, #mapa:hover, #form:hover, #imprimir:hover, #fotos:hover, #ejemplo:hover {
    content:none;
}
    
}

/* iPads (portrait) y resoluciones de pantalla bajas */

@media only screen and (min-width : 768px) and (max-width : 959px) {
    
/* fondos */

#nombre-novios {
    background-image: url(../img/bg/768/bg-header.jpg);
}

#invitacion {
    background-color: rgba(123,237,154,1);
}

#schedule {
    background-color: rgba(255,255,255,1);
}

#gift {
    background-image: url(../img/bg/768/bg-gift.jpg);
}

#contact {
    background-color: rgba(123,237,154,1);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#social-share {
    background-color: rgba(255,255,255,1);
}

#print {
    background-color: rgba(255,255,255,1);
}
    
/* schedule */
    
#schedule ul li {
    margin: auto;
}
    
#mail:hover, #web:hover, #mapa:hover, #form:hover, #imprimir:hover, #fotos:hover, #ejemplo:hover {
    content:none;
}

/* styles */    
	
#styles ul {
    max-width: 768px;
    margin: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: center;
}

#styles ul li {
    display: inline-block;
    text-align: center;
    margin-right: 0px;
    max-width: 250px;
}	
	
	
/* contacto */
    
#contact h6 {
    max-width: 358px;
}
    
/* formulario de contacto */
    
#contact {
    padding-bottom: 30px;
}
    
#contact form {
    max-width: 390px;
}
    
#contact form fieldset {
    display: block;
    margin-bottom: 20px;
}
    
#submit-button {
    height: 54px !important;
}
}
    
/* Smartphones (portrait y landscape) */

@media only screen and (min-width : 320px) and (max-width : 767px) {
    
/* fondos */

#nombre-novios {
    background-image: url(../img/bg/480/bg-header.jpg);
	height: 620px !important
}

#invitacion {
    background-color: rgba(123,237,154,1);
	height:296px;
}

#schedule {
    background-color: rgba(255,255,255,1);
}

#gift {
    background-image: url(../img/bg/480/bg-gift.jpg);
}

#contact {
    background-color: rgba(123,237,154,1);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#social-share {
    background-color: rgba(255,255,255,1);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#print {
    background-color: rgba(255,255,255,1);
}

/* header */
    
#nombre-novios {
    background-image: url(../img/bg/480/bg-header.jpg);
}
    
header {
    background-size: auto;
}
    
header img {
    width: 220px;
}

header img {
    margin-top: 530px;
}
    
/* invitacion */
    
#contenedor-blonda {
    max-width: 300px;
    min-height: 385px;
}
    
#info-padres {
    padding-top: 40px;
}
    
#info-padres p {
    max-width: 290px;
    line-height: 1.2;
}
    
.margin-bottom {
    margin-bottom: 10px !important;
}
    

    
#info-padres h3 {
    margin-top: 0;
	max-width:320px;
	margin:auto;
    margin-bottom: 10px;
}
    
/* schedule */
    
#schedule {
    
    padding-top: 28px;
}

#titulo-fechas {
    padding-top: 25px;
}
    
#schedule ul {
    max-width: 100%;
    position: relative;
}
    
#schedule ul li {
    margin-right: 0;
    display: block;
    position: relative;
    left: 50%;
    margin-left: -91px;
    margin-bottom: 40px;
}
    
    
#mail:hover, #web:hover, #mapa:hover, #form:hover, #imprimir:hover, #fotos:hover, #ejemplo:hover {
    content:none;
}

/* styles */    
	
#styles ul {
    max-width: 261px;
	position:relative;
}


    
/* regalo */
    
#contenedor-info-regalo, #contenedor-info-gracias {
    background-image: url(../img/bg/480/bg-paper.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    max-width: 290px;
}
    
#contenedor-info-regalo h2, #contenedor-info-gracias h2 {
    max-width: 240px;
}
    
br#oculto {
    display: block;
}
    
/* contact */
    
#contact h6 {
    max-width: 280px;
}
    
/* formulario de contacto */
    
#contact form, #contact form input, #contact form textarea {
    max-width: 264px;
}
    
.mediano {
    width: 140px !important;
}
    
#contact form fieldset ul li {
    margin-right: 0;
    margin-bottom: 20px;
}
    
#submit-button {
    height: 54px !important;
}
    
/* social */
    
#social-share h3 {
    max-width: 280px;
}
    
/* print */
    
#print h6 {
    max-width: 280px;
}
    
#print h6 span {
    max-width: 225px;
    padding-top: 6px;
}
    
#print a {
    margin-top: 5px;
    margin-bottom: 10px;
}
    
}