*{margin: 0; padding:0;}
.container-principal{font-family: 'Verdana'; color: #777;}

/*Definir a propriedades do topo*/
header{width:100%; height: 100px; background-color:#fff; position: relative; top: 0;}

/*Definir a propriedades do logo*/
.logo{position: absolute; width: 300px; height: auto;}
.logo img{width: 90%; margin-left: 10%;}

/* definir as propriedades do menu*/
nav {position: absolute; right: 30px; bottom: 0px;}
nav ul li {float: left; color: #fff; width: auto; margin: 0.8em; font-size: 1.5em; font-family: 'verdana'; list-style:none;}
nav ul li a {text-decoration: none;color: #bbb;}
nav ul li a:hover{color:#b13030}/*quando passar o mouse*/

/*definir as propriedades da imagem principal*/
#banner{width: 100%}
#banner img{width: 100%; margin-bottom: 0;}

/*Definir as propriedades dos pop´ups*/
.modalDialog{
    position: fixed;
    font-family: 'Verdana';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(181, 9, 9, 0.8);
    z-index: 9999;/*tamanho total da janela, acima de todos os elementos*/
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;/*nao tem eventos cliques e hovers*/
    display: none;/*como os elementos devem ser renderizados pelo motor*/
}
.modalDialog:target{
    display: block;
    opacity: 1;
    pointer-events: auto;
}
.modalDialog div{
    width: 500px;/*largura*/
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 10px;
    background-color: #fff;
}
.modalDialog p{
    margin-top: 5%;
    margin-bottom: 5%;
}
.modalDialog img{
    width: 50%;
    position: relative;
    margin-left: 25%;

}
.close{
    background-color: #606061;
    color: #FFFFFF;
    line-height: 25px;/*altura que cada linha do texto terá, nesse caso do botão close:altura que o X dentro do botâo close*/
    position: absolute;
    right: -12px;
    text-align: center;/*Alinhar o texto*/
    top: -10px;
    width: 24px;
    text-decoration: none;/*tirar underline e cor diferente do <a>*/
    font-weight: bold;
    /*como o navegador deve renderizar a borda*/
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;

}
.close:hover{
    background-color: #b50909;
    
}
footer{
    width: 100%;
    height: 18%;
    background-color: #b50909;
    color:#fff;
    position: relative;
    float: left;
    font-family:'verdana';
}
footer .footer-text{
    width: 30%;
    margin: 1%;
    position: relative;
    float: left;
}
footer .footer-text a{color:#fff}
/*Define a cor de fundo das páginas sobre, clientes e contato*/
.color-page {background-color: #ddd;}

.img-titulo {width: 20%; height: auto; margin-bottom: 10px; position: relative; float: left; margin-right: 5%;}
.img-titulo img{width: 90%; margin-left: 10%; margin-top: 50px;}

/* definir as propriedades da página clientes */
#clientes-code {width: 75%; position: relative; float: left;}
#clientes-code .config-clientes {width: 40%; border: 1px solid #b50909; margin-left: 1.5%; padding: 1%; float: left;
    margin-top: 30px; background-color: #fff;}
#clientes-code .config-clientes img{width: 60%; margin-left: 20%; margin-bottom: 20px;}
#clientes-code .config-clientes p{width: 90%; margin-left: 5%; font-size: 1.2em; margin-bottom: 20px; text-align: center;}
#clientes-code .config-clientes p a{ color: #111;}

/*Definir as propriedades da página sobre*/
#container-sobre {width: 65%; margin-left: 5%; float: left; position: relative; height: 80%; background-color: #fff; top: 10%}
#txt-sobre {width: 40%; float: left; position: relative; padding: 5%;}
#txt-sobre p {width:100%; position: relative; float: left;}
#txt-sobre d1 {width: 50%;}
#img-conteudo-sobre {width: 45%; position: relative; float: left; padding: 2%;}
#img-conteudo-sobre img{width: 100%;}

/*Definir a propriedades da página contato*/
#txt-contato{width: 100%; height: 100%;}
#txt-contato form {width:38%; position: relative; float: left; background-color: #fff; padding: 2%;
top: 5%; min-height: 400px;}
#txt-contato form label{font-weight: bold;}
#txt-contato form input {max-width: 100%; width: 99%; height: 30px; margin-top: 10px;
margin-bottom: 15px; border: solid #b50909 1px; padding-left: 1%;}
#txt-contato form textarea {max-width: 100%; width: 99%; border: solid #b50909 1px; padding-Left: 1%; min-height: 100px;}
#txt-contato form button{width: 30%; height:auto; cursor:pointer; background-color: #b50909;
color: #fff; font-size: 1.5em; padding: 15px 0 15px 0; margin-left: 35%; margin-top: 1%;}
#txt-contato #conta-data{width: 26%;position: relative; float: left;padding: 2%;
background-color: #b50909; color: #fff; top: 5%; margin-left: 1.5%; height:400px; text-align:center;}
#txt-contato #conta-data h3{color: #fff; text-align: center;}
#txt-contato #conta-data h5{margin-top: 6%;margin-bottom: 4%; vertical-align: middle;}
#txt-contato #conta-data h5 img{width: 50px;}