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

* {
    box-sizing: border-box;
}

body {
	font-family: 'Libre Baskerville', sans-serif;
	font-weight:400;
	font-size:14px;
	margin:0px;
	padding:0px;
	color: #4b4b4b;
    
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a:link {
	text-decoration: none; 
	color:#4b4b4b;
}
a:visited {
	text-decoration: none;
	color:#4b4b4b;
}
a:hover {
	text-decoration: none;
	color:#4b4b4b;
}
a:active {
	text-decoration: none;
	color:#4b4b4b;
}


.flex{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap;}
.flex_vertical_center{align-items:center;}
.flex_vertical_bottom{align-items:flex-end;}
.flex_vertical_wrap{flex-wrap: wrap;}
.flex_space_right_end{justify-content:flex-end;}
.flex_center{justify-content:center;}
.flex_space_between{justify-content:space-between;}
.flex_space_around{justify-content:space-around;}

.container{
    width: 1000px;
}
#topo{
	position: fixed;
	width: 100%;
	border-bottom: 1px solid #E1E1E1;
	background-color: #fbf3e8;
	z-index: 999;
    display: none;
}
#menu{
    padding: 20px 0px 100px 0px;
    position: absolute; 
    width: 100%; 
    z-index: 999;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.8+0,0+100 */
    background: -moz-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
#menu .item{
    margin: 0px 10px;
    cursor: pointer;
    color: #FFF;
    font-weight: bold;
}
#topo_mobile{
	position: fixed;
    top: 20px;
    padding: 0px 20px;
    z-index: 9;
    width: 100%;
    display: none;
}
#topo_fixo{
    width: 100%;
    background-color:#96a88a;
    padding: 10px;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 999;
    display: none;
    border-bottom: 1px solid #CCC;
}
#topo_fixo .item{
    margin: 0px 10px;
    cursor: pointer;
    color: #FFF;
    font-weight: bold;
}
#topo_mobile .logo{
	width: 70%;
}
#menu_mobile_aberto{
	width: 100vw;
    height: 100vh;
    background-color: #fbf3e8;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    display: none;
}
#menu_mobile_aberto .item {
    border-bottom: 1px solid #e8403f2b;
    font-size: 14px;
    margin: 0px 50px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    text-align: center;
}
#menu_mobile_aberto .fechar {
    position: absolute;
    right: 5vw;
    top: 5vw;
    width: 5vw;
    height: 5vw;
    background-image: url(../img/bt_fechar.png);
    background-size: cover;
}



/*-------------------------  HOME  -----------------------*/
@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
#home{
    width: 100vw;
    height: 100vh;
/*
    
    background: #F4D5BB;
    background-image: url(../img/capa.jpg);
    background-size: cover;
    background-position: center;
*/
    /*
    background: linear-gradient(270deg, #23d5a7, #dcaee1);
    background-size: 400% 400%;

    -webkit-animation: AnimationName 15s ease infinite;
    -moz-animation: AnimationName 15s ease infinite;
    animation: AnimationName 15s ease infinite;
    position: relative;
    */
}
#home .logo{
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0px;
    left: 0px;
}



/*-------------------------  NOS  -----------------------*/
.imagem_nos{
    width: 100vw;
    height: 100vh;
}
.imagem_nos .container{
    height: 100%;
    color: #FFF;
    font-size: 70px;
    font-weight: bold;
    font-family: 'Dancing Script', cursive;
}
#nos{
    background-color: #fae6e0;
    padding: 100px 0px;
}
#nos .titulo{
    font-size: 36px;
    font-style: italic;
    color:#96a88a;
}
#nos .item1, #nos .item2{ 
    width: 100%;
}
#nos .item1 .texto{
    width: 50%;
    text-align: left;
}
#nos .item2 .texto{
    width: 50%;
    text-align: right;
}
#nos .redondo{
    border-radius: 50%;
    border: 8px solid #FFF;
    margin: 20px;
}

.reveal{
    visibility: visible;
    opacity: 1;
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transition: opacity 1s cubic-bezier(0.5, 0, 0, 1) 0s, transform 1s cubic-bezier(0.5, 0, 0, 1) 0s;
}


/*-------------------------  ONDE VAI SER  -----------------------*/
#onde .lado{
    width: 50%;
}
#onde .lado .infs{
    /*width: 80%;*/
}
#onde .lado .infs .titulo{
    font-size: 30px;
    font-style: italic;
}
#onde .lado .infs .grande{
    font-size: 40px;
    margin-bottom: 10px;
}
#onde .imagem2{
    width: 100%;
    height: 90vh;
}
#onde .texto{
    text-align: left;
}
#onde .bt{
    margin-top: 30px;
    background-color: #e8403f;
    padding: 15px 80px;
    font-size: 14px;
    display: inline-block;
    font-style: italic;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    color:#FFF;
}

.imagem_onde_cerimonia{
    width: 100vw;
    height: 80vh;
}

/*-------------------------  CERIMONIA  -----------------------*/
#cerimonia .lado{
    width: 50%;
}
#cerimonia .lado .infs{
    width: 80%;
}
#cerimonia .lado .infs .titulo{
    font-size: 30px;
    font-style: italic;
}
#cerimonia .lado .infs .grande{
    font-size: 40px;
    margin-bottom: 10px;
}
#cerimonia .imagem2{
    width: 100%;
    height: 90vh;
}
#cerimonia .texto{
    text-align: right;
}
#cerimonia .bt{
    margin-top: 30px;
    background-color: #e8403f;
    padding: 15px 80px;
    font-size: 14px;
    display: inline-block;
    font-style: italic;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    color:#FFF;
}


/*-------------------------  PADRINHOS  -----------------------*/
#padrinhos{
    padding: 100px 0px;
    background-color: #cce8f1;
}
#padrinhos .titulo{
    font-size: 40px;
    font-style: italic;
    margin-bottom: 40px;
}
#padrinhos .item{
    width: 45%;
    font-size: 25px;
    margin: 0px 20px;
    margin-bottom: 80px;
}
#padrinhos .imagem{
    width: 45%;
}
#padrinhos .imagem .redondo{
    border-radius: 50%;
    border: 8px solid #FFF;
    width: 90%;
}
.item_padrinho{
    display: none;
    width: 300px;
    font-family: 'Libre Baskerville', sans-serif;
    font-weight: 400;
    color: #4b4b4b;
    text-align: center;
}
.item_padrinho .titulo{
    font-size: 40px;
    font-style: italic;
    text-align: center;
    margin-bottom: 10px;
}
.item_padrinho .imagem{
    width: 100%;
}
.item_padrinho .imagem .redondo{
    border-radius: 50%;
    border: 8px solid #FFF;
    width: 100%;
}



/*-------------------------  CONFIRME  -----------------------*/
#confirme{
    padding: 60px 0px 100px 0px;
    background-color: #fae6e0;
    color: #96a88a;
}
#confirme .divisao .linha{
    width: 40%;
}
#confirme .divisao .detalhe img{
    padding: 0px 30px;
}
#confirme .titulo{
    font-size: 40px;
    font-style: italic;
    margin-top: 50px;
}
#confirme .texto{
    width: 35%;
    margin-top: 20px;
    color: #4b4b4b;
}
#confirme .formulario{
    margin-top: 40px;
}
#confirme .formulario input{
    margin-bottom: 20px;
    border: 0px;
    padding: 15px;
    width: 40%;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    text-align: center;
    font-family: 'Libre Baskerville', sans-serif;
    color: #8f9569;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    font-style: italic;
}
#confirme .formulario .bt{
    margin-top: 10px;
    color:#FFF;
    background-color: #96a88a;
    padding: 15px 80px;
    font-size: 14px;
    display: inline-block;
    font-style: italic;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    cursor: pointer;
    font-weight: bold;
}

/*-------------------------  PRESENTES  -----------------------*/
#presentes{
    padding: 60px 0px 100px 0px;
    background-color: #eb5b52;
    color: #FFF;
}
#presentes .divisao .linha{
    width: 40%;
}
#presentes .divisao .detalhe img{
    padding: 0px 30px;
}
#presentes .titulo{
    font-size: 40px;
    font-style: italic;
    margin-top: 50px;
}
#presentes .lista{
    margin: 50px 0px 80px 0px;
}
#presentes .categoria{
    margin: 0px 5px;
    font-style: italic;
    font-size: 16px;
    cursor: pointer;
}
#presentes .categoria.ativo{
    border-bottom: 1px solid white;
    padding-bottom: 2px;
    display: inline-block;
    cursor: default;
}
#presentes .lista2{
    margin: 20px 0px;
}
#presentes .lua{
    display: none;
}
#presentes .item{
    margin: 10px;
    width: 25%;
}
#presentes .item .imagem{
    width: 200px;
    height: 200px;
    background-size: cover;
    background-position: center;
    background-color: white;
    margin-bottom: 5px;
}
#presentes .item .texto, #presentes .item .valor{
    text-align: center;
    font-style: italic;
    font-size: 16px;
}
#presentes .item .valor{
    font-weight: bold;
    font-size: 20px;
    margin-top: 5px;
}
#presentes .item .bt{
    margin-top: 10px;
    margin-bottom: 60px;
    background-color: #ad2625;
    padding: 15px;
    font-size: 14px;
    max-width: 80%;
    font-style: italic;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    cursor: pointer;
    font-weight: bold;
    display: inherit;
    color: #FFF;
}



/* ------------------ PÁGINA COMPRA ------------------ */
#menu_tela_compra{
    width: 100%;
    padding: 10px 0px;
    background-color: #FFF;
    border-bottom: 1px solid #e7e7e7;
    z-index: 999;
    background-image: url(../img/fundo_itens_compras.jpg);
    min-height: 10vh;
}
#menu_tela_compra img{
    height: 10vh;
}
#compra{
    min-height: 75vh;
}
#compra .item_imagem{
    width: 40%;
    padding-top: 50px;
}
#compra .item_imagem img{
    max-width: 100%;
}
#compra .item_formulario{
    width: 55%;
    padding: 50px 0px;
}
#compra .topo{
    border-bottom: 1px solid #CCC;
    padding-bottom: 10px;
}
#compra .item_formulario .topo .texto{
    font-size: 28px;
    font-weight: 700;
    color: #e8403f;
    font-style: italic;
}
#compra .item_formulario .topo .valor{
    text-align: right;
    font-size: 20px;
}
/* Dados pessoais */
#compra .item_formulario .pessoais{
    padding-top: 10px;
    padding: 20px 0px;
}
#compra .item_formulario .pessoais input{
    margin-top: 5px;
}
#compra .item_formulario .pessoais .item{
    width: 48%;
    margin-bottom: 10px;
}
/* Endereço */
#compra .item_formulario .endereco{
    padding: 20px 0px;
}
#compra .item_formulario .endereco input{
    margin-top: 5px;
}
#compra .item_formulario .endereco .item{
    width: 48%;
    margin-bottom: 10px;
}
#compra .item_formulario .endereco .item2{
    width: 100%;
    margin-bottom: 10px;
}
/* Pagamento */
#compra .item_formulario .pagamento{
    border-top: 1px solid #CCC;
    padding-top: 10px;
    padding: 20px 0px 0px 0px
}
#compra .item_formulario .pagamento .bt{
    /*width: 48%;*/
    width: 100%;
    margin-bottom: 10px;
    border: 1px solid #CCC;
    border-radius: 5px;
    padding: 20px 0px;
    text-align: center;
    cursor: pointer;
}
#compra .item_formulario .pagamento .bt svg{
    height: 40px;
}
#compra .item_formulario .pagamento .bt.ativo{
    background-color: #eb5b52;
    color: #FFF;
    cursor: default;
}
#compra .item_formulario .pagamento .bt.ativo svg{
    fill: #FFF;
}
#compra .item_formulario .pagamento .cartao{
    border-bottom: 1px solid #CCC;
    padding: 20px 0px;
}
#compra .item_formulario .pagamento .cartao .item{
    width: 65%;
    margin-bottom: 10px;
    position: relative;
}
#compra .item_formulario .pagamento .cartao .item2{
    width: 30%;
    margin-bottom: 10px;
    position: relative;
}
#compra .item_formulario .pagamento .cartao .bandeira{
    position:absolute; 
    bottom:10px; 
    right:10px; 
    max-height: 45%; 
    display:none;
}
#compra .item_formulario .pagamento input{
    margin-top: 5px;
}

/* Total */
#compra .item_formulario .total{
    border-top: 1px solid #CCC;
    padding-top: 10px;
    text-align: right;
    width: 100%;
}
#compra .item_formulario .total .quantidade_resumo{
    display: none;
    font-weight: bold;
}
#compra .item_formulario .total .valor{
    color: var(--cor3);
    margin-top: 10px;
    font-weight: bold;
}
#compra .item_formulario .total .valor .final{
    margin-top: -5px;
    font-size: 50px;
}
#compra .item_formulario .total .bt {
    width: inherit;
    cursor: pointer;
    background-color: #eb5b52;
    padding: 15px;
    color: #FFF;
    font-weight: 700;
    border: 3px solid #fae6e0;
    border-radius: 10px;
    text-align: center;
    display:inherit;
    margin-top: 10px;
}

/* Pagamento */
#compra .item_formulario .total #aguarde{
    display: none;
}
#compra .item_formulario .total #aguarde img{
    height: 20px;
    margin-left: 10px;
}
/*Parabéns*/
#compra .compra_efetuada{ 
    font-size: 30px;
    color: var(--cor1);
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 10px;
}
#compra .destaque{
    color: var(--cor1);
    font-weight: bold;
}

#compra .parcelas {
    width:100%;  /* Tamanho final do select */
    overflow:hidden; /* Esconde o conteúdo que passar do tamanho especificado */
}
  
#compra #parcelas{
    border-radius: 50px;
    border: 5px solid #fae6e0;
    padding: 15px;
    height: 45px;
    font-weight: bold;
    text-indent: 0.01px;
    background-color: white;
    width: 100%;
    text-indent: 0.01px; /* Remove seta padrão do FireFox */
    text-overflow: "";  /* Remove seta padrão do FireFox */     
    select::-ms-expand {display: none;} /* Remove seta padrão do IE*/ 
}

/*-------------------------  OBRIGADO  -----------------------*/
.oba{
    font-size:100px;
}

/*-------------------------  FOTOS  -----------------------*/
#fotos{
    padding: 60px 0px 100px 0px
}
#fotos .divisao .linha{
    width: 40%;
}
#fotos .titulo{
    font-size: 40px;
    font-style: italic;
    
    color: #e8403f;
}
#fotos .lista{
    margin-top: 30px;
    width: 80%;
}
#fotos .lista .item{
    width: 25vw;
    height: 25vw;
}
#fotos .lista .zoom_over{
    overflow: hidden;
}
#fotos .lista .zoom_over .imagem {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
#fotos .lista .zoom_over:hover .imagem, .zoom_over:focus .imagem {
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    filter: brightness(130%);

}




/* Small devices (landscape phones, 576px and up) */
@media only screen and (min-width : 10px) and (max-width : 767px) {
	.container {
		width: 90%;
		position: relative;
		
	}
	/* ------------------------------------------ TOPO ------------------------------------------*/
	#topo{
		display: none;
	}
	#topo_mobile{
		display: block;
	}
    
    
    #home #menu{
        display: none;
    }
    #home img{
        width: 90%;
    }
    
    .imagem_nos {
        height: 50vh;
    }
    /*-------------------------  NOS  -----------------------*/
    #nos{
        padding: 40px 0px;
    }
    #nos .item1 .texto, #nos .item2 .texto{
        width: 100%;
        text-align: center;
    }
    #nos .item2 .imagem{
        margin-top: 30px;
    }
    #nos .item2 .texto{
        order: 1;
    }
    #nos .meio{
        display: none;
    }
    #nos .item1 .imagem .redondo, #nos .item2 .imagem .redondo {
        margin: 20px 0px;
    }

    .imagem_onde_cerimonia{
        display: none;
    }
    /*-------------------------  ONDE VAI SER  -----------------------*/
    #onde {
        padding: 0px;
    }
    #onde .lado{
        width: 100%
    }
    #onde .lado .imagem2{
        height: 40vh;
        order: 2;
    }
    #onde .texto {
        text-align: center;
        order: 1;
        padding: 50px 0px;
    }
    
    /*------------------------- CERIMONIA  -----------------------*/
    #cerimonia {
        padding: 0px;
    }
    #cerimonia .lado{
        width: 100%
    }
    #cerimonia .lado .imagem2{
        height: 40vh;
        order: 2;
    }
    #cerimonia .texto {
        text-align: center;
        order: 1;
        padding: 50px 0px;
    }
    
    /*------------------------- CERIMONIA  -----------------------*/
    #padrinhos .item {
        width: 100%;
        margin: 0px;
        margin-bottom: 80px;
    }
    #padrinhos .imagem {
        width: 50%;
    }
    
    /*-------------------------  CONFIRME  -----------------------*/
    #confirme .titulo {
        margin-top: 20px;
    }
    #confirme .divisao .linha{
        display: none;
    }
    #confirme .texto {
        width: 90%;
    }
    #confirme .formulario input {
        width: 90%;
    }


    /*-------------------------  PRESENTES  -----------------------*/
    #presentes {
        padding: 60px 20px 100px 20px;
    }
    #presentes .item {
        width: 100%;
    }
    #presentes .divisao .linha{
        display: none;
    }
    #presentes .titulo {
        font-style: italic;
        margin: 15px 0px;
    }
    #presentes .item .imagem {
        width: 250px;
        height: 250px;
    }

    /*-------------------------  FOTOS  -----------------------*/
    #fotos {
        padding: 60px 20px 0px 20px;
    }
    #fotos .divisao .linha{
        display: none;
    }
    #fotos .titulo {
        font-style: italic;
        margin: 15px 0px;
    }
    #fotos .lista {
        width: 100%;
    }
    #fotos .lista .item {
        width: 100%;
        height: 200px;
        margin-bottom: 20px;
    }
    /*-------------------------  COMPRA  -----------------------*/
    #compra .item_imagem, #compra .item_formulario {
        width: 100%;
    }
    #compra .item_formulario .topo .texto{
        text-align: center;
    }
    #compra .item_formulario .pessoais .item {
        width: 100%;
    }
    #compra .item_formulario .endereco .item {
        width: 100%;
    }
    #compra .item_formulario .pagamento .cartao .item, #compra .item_formulario .pagamento .cartao .item2{
        width: 100%;
    }
    #compra .item_formulario .total {
        text-align: center;
    }
    #compra #parcelas {
        height: 70px;
    }
    /*-------------------------  OBRIGADO  -----------------------*/
    .oba{
        font-size:45px;
    }
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    font-family: 'Libre Baskerville', sans-serif;
    opacity: 1;
    color: #777;
    font-style: italic;
    font-size: 14px;
    text-align: center;
    font-weight: normal;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-family: 'Libre Baskerville', sans-serif;
    color: #777;
    font-style: italic;
    font-size: 14px;
    text-align: center;
    font-weight: normal;
}

::-ms-input-placeholder { /* Microsoft Edge */
    font-family: 'Libre Baskerville', sans-serif;
    color: #777;
    font-size: 14px;
    font-style: italic;
    text-align: center;
    font-weight: normal;
}