html{
    font-size: 100%;
}

#logoNavigation:after{
    content: "";
    position: fixed;
    left: 0.1%;
    top:0.2%;
    z-index: -1; 
    width: 99.8%;
    height: 99.6%;
    background-image: url("../img/11.jpg");
    background-position: 50% 60%;
    background-repeat:   no-repeat;
    background-color: white;
}


.col-centered {
    
    float:none;
    margin: 0 auto;
}


#background-nav {
    background-color: white;
    height: 80px;
    display:none;
    position:fixed;
    z-index: 999;
    opacity: 0.95;
    filter: alpha(opacity=95); /* For IE8 and earlier */

}

#nav ul{
    margin: 3% 0px;
    float: right
}

#nav2 ul {
    margin: 29% 0;
    float: right;
}


#nav ul li a {
    font-family: 'Muli'; 
    font-weight: normal;
    color: white;
    font-size: 0.7692rem;
    padding: 0 10px;
    text-decoration: none;
    width:100%;
}

#nav2 ul li a {
    font-family: 'Muli'; 
    font-weight: normal;
    color: white;
    font-size: 0.7692rem;
    padding-left: 10px;
    text-decoration: none;
    width:100%;
}

#nav ul li a:hover,
#nav2 ul li a:hover{
    font-weight: bold;
}

#nav ul li .selected,
#nav2 ul li .selected{
   font-weight: bold; 
}


#logo #text-logo {
    margin: 10px 0px;
    width: 170px;
    height: 65px;
    background-image: url(../img/logo/LOGO_white.png);
    background-size: 100%;
    background-repeat: no-repeat;
    float: right;
}

#text-logo h1{
    display:none;
}


.vertical-align-wrap {
    position: absolute;
    width: 99%;
    height: 98.4%;
    display: table;
    padding: 0;
}

.vertical-align {
    display: table-cell;
}

.vertical-align--middle {
    vertical-align: middle;
    text-align: center;
}

.vertical-align--bottom {
    vertical-align: bottom;
}



#text-slogan h1{
    font-family: 'Lora';
    color: white; 
    font-size: 2.692rem;
    font-style: italic;
}

#icons-social-links{
    text-align: center;
}

#icons-social-links a { 
    padding: 0 10px;
}

#icons-social-links a img { 
    width: 23px;
    height:24px;
}

#contentDiv {
    background-color: white;
    background-image: url(../img/Background-total.jpg);
    background-repeat: no-repeat;
    /*background-position: 0 46.1%;*/
    background-position: 0px 0px;
    background-size: 102%;
    overflow: hidden;
}



.separador{
    margin-top: 10%;
    width: 100%;
    height: 100px;
    background-color: white;
    text-align: center;
    padding: 2.5% 0 0;
}



#imgHomePage {
    border: 5px solid black;
    height: 400px;
    width: 900px;
}

.tittle-header{
    font-family: 'Lora';
    font-style: italic;
    font-size: 3.077rem;
    padding-bottom:50px;
    color: #333333;
}

/*.subTitulo h1{
    font-style: bold;
    font-size: ;
}*/

.texto{
    font-size: 1rem;
    font-family: 'Lora';
    line-height:30px;
    color: #333333;
    margin-bottom: 30px;
}

.bold{
    font-size:1.308rem;
    padding-top: 40px;
}

.windowHeight{
    height: 80vh;
}


#aNossaHistoria{
    margin-top: 10%;
    padding-top: 5%;
    width: 100%;
    height: 100%;
}


#destination{
    margin-top: 10%;
    padding-top: 5%;
    width: 100%;
    height: 100%;
}

#destination #fotoDestination {
    padding: 0;
    height: 75%;
}

#destination #fotoDestination img{
    width: 90%;
    display:block;
}

#servicos{
    margin-top: 10%;
    padding-top: 5%;
    width: 100%;
    height: 100%;
}

.servicos-panel{
    margin-left: 6%;
    width: 23.5%;
    padding: 0% 2%;
}

.servicos-panel2{
    margin-left: 9%;
    width: 23.5%;
    padding: 0% 2%;
 
}

#servicos h1 {
    text-align: center;
}

#servicos h2{
    font-family: 'Muli';
    font-weight: bold;
    font-size: 1.231rem;
    text-align: center;
}

#servicos h3{
    font-family: 'Lora';
    font-style: italic;
    font-size: 1.231rem;
    margin-top: 0px;
    text-align: center;
    margin-bottom: 15%;
}

#servicos-panel p{
    font-family: 'Lora';
    font-size: 1rem;
    text-align:left;
}

#servicos-panel2 p{
    font-family: 'Lora';
    font-size: 1rem;
    text-align:left;
}

.buttonMore{
    height: 25px;
    width: 25px;
    border: 1px solid black;
    border-radius: 100%;
}

.buttonMore span {
    font-family: 'Playfair Display SC';
    font-style: normal;
    font-size: 1.538rem;
    position: relative;
    bottom: 35%;
    left: 15.5%;
    cursor: pointer;
}

#more1, #more2 {
    margin: 30px auto;
}

#more3 {
    margin: 50px auto;
}

/*=========Modal Box ================*/

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies. 
    background-color:rgba(255, 255, 255, 0.8)
}

/* Modal Content/Box */
.modal-content {
    background-color: #ededed;
    /*padding: 20px;*/
    border: none;
    border-radius: 0%;
    -webkit-box-shadow: 4px 4px 6px 0px rgba(0,0,0,0.4);
    -moz-box-shadow: 4px 4px 6px 0px rgba(0,0,0,0.4);
    box-shadow: 4px 4px 6px 0px rgba(0,0,0,0.4);
    /*width: 1430px;  Could be more or less, depending on screen size */
    /*height:510px;*/
    width: 80%;
    /*height: 60%; */
    top: 20%;
    left: 10%;
}

/* The Close Button */
.close {
    font-family: 'Playfair Display SC';
    font-style: normal;
    font-size: 2.308rem;
    color: black;
    position: absolute;
    top: 10px;
    left:10px;
    opacity: 1;
}

.close:hover, .close:focus{
    color: black;
    opacity:1;
    cursor: pointer;

}

.ladoEsquerdo{
    padding: 50px;
    margin: 0px;
    /*width: 640px;*/
    width: 40%;
    display:inline-block;
    vertical-align: top;
}


.ladoDireito{
    display: inline-block;
    width: 60%;
    height: 100%;
}

.ladoDireito img{
    /*width:770px;
    height:510px;*/
    position: relative;
    max-width: 100%;
}

.servicosModalHeader{
    font-family: 'Muli';
    font-weight: bold;
    font-size: 1.385rem;

}

.servicosModalSubHeader{
    font-family: 'lora';
    font-style: italic;
    font-size: 1.308rem;
    margin-bottom: 70px;

}

.servicosModalP{
    font-family: 'Lora';
    font-size: 1rem;
    text-align:left;
    margin-top: 25px ;
}

#quemFizemosFelizes {
    margin-top: 10%;
    padding-top: 5%;
    width: 100%;
    height:100%;
}

#quemFizemosFelizesTittle {
    width: 460px;
    margin: 0 15%;
}

.blockReview{
    background-color: blue;
    margin: 0 13%;
    height:180px;
    margin-top:5px;
    padding:0;
}

#felizes1{

    /* z-index: -1; */ 

    background-image: url("../img/22.jpg");

    background-position: 85% 66%;

    background-size: 1435px 956px;

    background-repeat:   no-repeat;
}

#felizes2{

    /* z-index: -1; */ 

    background-image: url("../img/9.jpg");

    background-position: 85% 55%;

    background-size: 1435px 956px;

    background-repeat:   no-repeat;
}

#felizes3{

    /* z-index: -1; */ 

    background-image: url("../img/43.jpg");

    background-position: 85% 60%;

    background-size: 1435px 956px;

    background-repeat:   no-repeat;
}

.blockReviewHeader{
    width: 100%;
    text-align: center;
    font-family: 'Lora';
    font-size: 3.077rem;
    font-weight: bold;
    color: white;
    margin-top: 2%;
    margin-bottom:0;
    line-height: 40px;
}
.blockReviewHeader2{
    font-weight: normal;
    font-size: 1.923rem;
}

.blockReviewText{
    width:100%;
    text-align: center;
    font-family: 'Lora';
    font-style: italic;
    font-size: 1.538rem;
    color: white;
}

.buttonMore2{
    height: 25px;
    width: 25px;
    border: 1px solid white;
    border-radius: 100%;
    margin: 0 auto;
}

.buttonMore2 span {
    font-family: 'Playfair Display SC';
    font-style: normal;
    font-size: 1.538rem;
    position: relative;
    bottom: 8px;
    cursor: pointer;
    color: white;
    left:4px;
}

.shadowClass {
   . border: none;
    border-radius: 0%;
    -webkit-box-shadow: 4px 4px 6px 0px rgba(0,0,0,0.4);
    -moz-box-shadow: 4px 4px 6px 0px rgba(0,0,0,0.4);
    box-shadow: 4px 4px 6px 0px rgba(0,0,0,0.4);

}

.diminuirDiv{
    width:1386px;
    height: 165px;
    margin: 15px 14.2%;
}

.blockReviewExtended{
    display: none;
    background-color: #ededed;
    /*height: 6200px;*/
    margin: 0 13%;
    border: none;
    border-radius: 0%;
    -webkit-box-shadow: 4px 4px 6px 0px rgba(0,0,0,0.4);
    -moz-box-shadow: 4px 4px 6px 0px rgba(0,0,0,0.4);
    box-shadow: 4px 4px 6px 0px rgba(0,0,0,0.4);
    padding: 3%;

}

.pormenoresCasamento {
    width: 45%;
    display:inline-block;
    min-height:1300px;
}

.coresDisplay{
    width: 35px;
    height: 35px;
    margin-right:2px;
    margin-top: 2px;
    display: inline-block;
}

#corDisplay1{
    background-color: #FFCBCB;
}
#corDisplay2{
    background-color: #C31436;
}
#corDisplay3{
    background-color: #F8D19F;
}
#corDisplay4{
    background-color: #CD8A09;
}

#corDisplay5{
    background-color: #F8D1B1;
}
#corDisplay6{
    background-color: #660436;
}
#corDisplay7{
    background-color: #2B2B2B;
}
#corDisplay8{
    background-color: #D1BDAD;
}


#corDisplay9{
    background-color: #E9E9E9;
}
#corDisplay10{
    background-color: #C79085;
}
#corDisplay11{
    background-color: #0A6F6C;
}
#corDisplay12{
    background-color: #D1BDAD;
}

.paddingHeader{
    padding-top: 100px;
}



#textoPormenores {
    font-size: 1.077rem;
    margin-bottom: 0px;
    
}
#textoPormenores2 {
    font-size: 1.077rem;
    margin:0;
    
}
.primeirasImagens {
    width: 655px;
    position: absolute;
    top:1%;
    right: 4%;

}

.fotos{
    width:45%;
    float:right;
    margin-bottom: 10px;
}

.segundasFotos{
    width: 100%;
}


.fotosNormal{
    max-width:99%;
    object-fit: contain;
    margin: 0.5%;
}


.fotosNormal2Right{
    max-width:48.5%;
    margin: 0.5%;
    float: right;
    display: inline-block;
    /*vertical-align: top;*/
}

.fotosNormal2Left{
    max-width:48.5%;
    margin: 0.5%;
    float: left;
    display: inline-block;
    /*vertical-align: top;*/
}

.fotosOdd2Left{
    max-width:48.3%;
    margin: 0.5%;
    float: left;
    display: inline-block;
    /*vertical-align: top;*/
}

.fotosAltoRight{
    max-width:48.5%;
    margin: 0.5%;
    float:right;
    display: inline-block;
    /*vertical-align: top;*/
}

.fotosAltoLeft{
    max-width:48.5%;
    margin: 0.5%;
    float:left;
    display: inline-block;
    /*vertical-align: top;*/
}

.iconsInside {
    
    position: unset;
}

#partilhaIcons{
    font-family: 'Muli'; 
    color: #929599;
    text-align: center;
    font-size: 0.85em
}

#borderPartilha{
    border-bottom: 1px solid #929599;
    margin-bottom: 5px;
}





#contactos {
    margin-top: 5%;
    margin-bottom: 5%;
    padding-top: 5%;
    width: 100%;
    height:100%;



}

#contactosTittle{
    padding:0 0 20px;
}

#subTittleContactos{
    font-family: 'Lora';
    font-size: 1.308rem;
    font-weight: normal;
    padding: 0 5% 80px;
}

.labelContactos{
    font-family: 'Muli';
    font-size: 1.231rem;
    font-weight: bold;
    padding-right:45%;
}

.labelContactos2{
    font-family: 'Muli';
    font-size: 1.231rem;
    font-weight: bold;
}


#contactosForm #inputNome {
    width: 550px;
    border: 1px solid black;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 12px 20px 10px 20px;
    margin-bottom: 70px;
    margin-right: 25px;
}

#contactosForm #inputEmail{
    width: 550px;
    border: 1px solid black;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 12px 20px 10px 20px;
}

.labelMensagemContactos {
    padding-right: 100%;
}

#textareaContactos {
    width: 100%;
    border: 1px solid black;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 12px 20px 10px 20px;
    height: 280px;
}

#btSubmit{
    font-family: 'Muli';
    font-size: 1.231rem;
    font-weight: bold;
    background-color:white;
    border: none;
    margin: 20px 45%;
    width: 100px;
}

@media only screen and (min-width: 1367px) and (max-width: 1680px) {
    #contentDiv {
        background-position: 0px 130px;
    }

    .servicos-panel p{
        font-size: 12px; 
    }
    .servicos-panel2 p{
        font-size: 12px; 
    }


}

@media only screen and (min-width: 1281px) and (max-width: 1367px) {
    #contentDiv {
        background-position: 0px 395px;
    }

    .servicos-panel p{
        font-size: 12px; 
    }
    .servicos-panel2 p{
        font-size: 12px; 
    }
}

@media only screen and (min-width: 1025px) and (max-width: 1280px) {
    #contentDiv {
        background-position: 0px 470px;
    }

    .servicos-panel p{
        font-size: 12px; 
    }
    .servicos-panel2 p{
        font-size: 12px; 
    }
}

@media only screen and (max-width: 769px) {
    #logoNavigation:after{
        background-size: contain;
        background-position: 0 80%;

    }

    #logo #text-logo {
        background-image: url(../img/logo/LOGO_black.png);
        margin: 10px auto;
        float: unset;
    }

    .vertical-align-wrap {
        height: 45%;
    }

    #slogan #text-slogan h1{
        color: black;
    }

    #contentDiv{
        background-image: unset;
    }

    #nav, #nav2{
        display: none;
    }

    #destination #fotoDestination img {
        width: 100%;
    }

    .servicos-panel{
        margin-left: unset; 
        width: unset; 
        padding: 0% 32%;
    }

    .servicos-panel2{
        margin-left: unset; 
        width: unset; 
        padding: 0% 29%;
    }

    .modal-content{
        top: 9%;
    }

    .ladoEsquerdo {
        padding: 50px;
        margin: 0px;
        width: 100%;
        display: inline-block;
        vertical-align: top;
    }

    .ladoDireito {
        display: inline-block;
        width: 100%;
        /*height: 100%;*/
    }

    .ladoEsquerdo p.servicosModalSubHeader {

        margin: unset;
    }

    .pormenoresCasamento {
        min-height: unset;
    }

    #contactosTittle{
        text-align: center;
    }

    #subTittleContactos {
        text-align: center;

    }

    .labelContactos, .labelContactos2{
        display:none;
    }

    #contactosForm #inputNome, #contactosForm #inputEmail {
        width: 590px;
        margin-bottom: 20px;
    }

    .col-sm-10{
        margin-left: 8.33333333%;
    }







   
}