Skip to main content
adicionou 87 caracteres ao conteúdo
Fonte Link
GOLX
  • 153
  • 4
  • 13

Estou a trabalhar com a tag <picture> para usar sua função responsiva e inserindo diversos tamanhos da mesma imagem num único objeto conforme a resolução da tela pelo parametro "media" da tag <source>. No chrome e no Mozilla Firefox os resultados foram perfeitosm mas nos celulares e IE11 nao funcionou, estão apenas usando a imagem na tag <img> segue um exemplo do erro:

a#capa-individual{
width: 85%;
position: relative;
display: block;
margin-top: 3%;
margin-bottom: 3%;
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
border: 30px solid rgba(255,0,0,.3);
}
.foto1{
width: 100%;
vertical-align: middle;
text-align: center;
border-radius: 5px;
border: 0px solid rgba(0,0,0,.7);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="erro.css">
</head>
<body>
        <a id="capa-individual" href="individual.html">
            <picture>
                <source class="foto1" srcset="http://thumbs.dreamstime.com/x/lying-male-dalmatian-18553200.jpg" media="(max-width: 480px)">
                <source class="foto1" srcset="http://thumbs.dreamstime.com/x/liver-spotted-dalmatian-bitch-17136208.jpg" media="(min-width:481px)">
                <img class="foto1" src="http://thumbs.dreamstime.com/x/liver-spotted-dalmatian-bitch-17136208.jpg.jpg" alt="">
            </picture>
        </a>
    
</body>
</html>

Estou a trabalhar com a tag <picture> para usar sua função responsiva e inserindo diversos tamanhos da mesma imagem. No chrome e no Mozilla Firefox os resultados foram perfeitosm mas nos celulares e IE11 nao funcionou, estão apenas usando a imagem na tag <img> segue um exemplo do erro:

a#capa-individual{
width: 85%;
position: relative;
display: block;
margin-top: 3%;
margin-bottom: 3%;
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
border: 30px solid rgba(255,0,0,.3);
}
.foto1{
width: 100%;
vertical-align: middle;
text-align: center;
border-radius: 5px;
border: 0px solid rgba(0,0,0,.7);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="erro.css">
</head>
<body>
        <a id="capa-individual" href="individual.html">
            <picture>
                <source class="foto1" srcset="http://thumbs.dreamstime.com/x/lying-male-dalmatian-18553200.jpg" media="(max-width: 480px)">
                <source class="foto1" srcset="http://thumbs.dreamstime.com/x/liver-spotted-dalmatian-bitch-17136208.jpg" media="(min-width:481px)">
                <img class="foto1" src="http://thumbs.dreamstime.com/x/liver-spotted-dalmatian-bitch-17136208.jpg.jpg" alt="">
            </picture>
        </a>
    
</body>
</html>

Estou a trabalhar com a tag <picture> para usar sua função responsiva e inserindo diversos tamanhos da mesma imagem num único objeto conforme a resolução da tela pelo parametro "media" da tag <source>. No chrome e no Mozilla Firefox os resultados foram perfeitosm mas nos celulares e IE11 nao funcionou, estão apenas usando a imagem na tag <img> segue um exemplo do erro:

a#capa-individual{
width: 85%;
position: relative;
display: block;
margin-top: 3%;
margin-bottom: 3%;
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
border: 30px solid rgba(255,0,0,.3);
}
.foto1{
width: 100%;
vertical-align: middle;
text-align: center;
border-radius: 5px;
border: 0px solid rgba(0,0,0,.7);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="erro.css">
</head>
<body>
        <a id="capa-individual" href="individual.html">
            <picture>
                <source class="foto1" srcset="http://thumbs.dreamstime.com/x/lying-male-dalmatian-18553200.jpg" media="(max-width: 480px)">
                <source class="foto1" srcset="http://thumbs.dreamstime.com/x/liver-spotted-dalmatian-bitch-17136208.jpg" media="(min-width:481px)">
                <img class="foto1" src="http://thumbs.dreamstime.com/x/liver-spotted-dalmatian-bitch-17136208.jpg.jpg" alt="">
            </picture>
        </a>
    
</body>
</html>

adicionou 15 caracteres ao conteúdo
Fonte Link
GOLX
  • 153
  • 4
  • 13

Estou a trabalhar com a tag picture<picture> para usar suassua função responsiva e inserindo diversos tamanhos da mesma imagem. No chrome e no Mozilla Firefox os resultados foram perfeitosperfeitosm mas nos celulares e IE11 nao funcionou, estaestão apenas usando a imagem na tag <img> segue o codigo.um exemplo do erro:

a#capa-individual{
width: 85%;
position: relative;
display: block;
margin-top: 3%;
margin-bottom: 3%;
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
border: 30px solid rgba(255,0,0,.3);
}
.foto1{
width: 100%;
vertical-align: middle;
text-align: center;
border-radius: 5px;
border: 0px solid rgba(0,0,0,.7);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="erro.css">
</head>
<body>
        <a id="capa-individual" href="individual.html">
            <picture>
                <source class="foto1" srcset="http://thumbs.dreamstime.com/x/lying-male-dalmatian-18553200.jpg" media="(max-width: 480px)">
                <source class="foto1" srcset="http://thumbs.dreamstime.com/x/liver-spotted-dalmatian-bitch-17136208.jpg" media="(min-width:481px)">
                <img class="foto1" src="http://thumbs.dreamstime.com/x/liver-spotted-dalmatian-bitch-17136208.jpg.jpg" alt="">
            </picture>
        </a>
    
</body>
</html>

Estou a trabalhar com a tag picture para usar suas função responsiva e inserindo diversos tamanhos da mesma imagem. No chrome e no Mozilla Firefox os resultados foram perfeitos mas nos celulares e IE11 nao funcionou, esta apenas usando a imagem na tag <img> segue o codigo.

a#capa-individual{
width: 85%;
position: relative;
display: block;
margin-top: 3%;
margin-bottom: 3%;
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
border: 30px solid rgba(255,0,0,.3);
}
.foto1{
width: 100%;
vertical-align: middle;
text-align: center;
border-radius: 5px;
border: 0px solid rgba(0,0,0,.7);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="erro.css">
</head>
<body>
        <a id="capa-individual" href="individual.html">
            <picture>
                <source class="foto1" srcset="http://thumbs.dreamstime.com/x/lying-male-dalmatian-18553200.jpg" media="(max-width: 480px)">
                <source class="foto1" srcset="http://thumbs.dreamstime.com/x/liver-spotted-dalmatian-bitch-17136208.jpg" media="(min-width:481px)">
                <img class="foto1" src="http://thumbs.dreamstime.com/x/liver-spotted-dalmatian-bitch-17136208.jpg.jpg" alt="">
            </picture>
        </a>
    
</body>
</html>

Estou a trabalhar com a tag <picture> para usar sua função responsiva e inserindo diversos tamanhos da mesma imagem. No chrome e no Mozilla Firefox os resultados foram perfeitosm mas nos celulares e IE11 nao funcionou, estão apenas usando a imagem na tag <img> segue um exemplo do erro:

a#capa-individual{
width: 85%;
position: relative;
display: block;
margin-top: 3%;
margin-bottom: 3%;
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
border: 30px solid rgba(255,0,0,.3);
}
.foto1{
width: 100%;
vertical-align: middle;
text-align: center;
border-radius: 5px;
border: 0px solid rgba(0,0,0,.7);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="erro.css">
</head>
<body>
        <a id="capa-individual" href="individual.html">
            <picture>
                <source class="foto1" srcset="http://thumbs.dreamstime.com/x/lying-male-dalmatian-18553200.jpg" media="(max-width: 480px)">
                <source class="foto1" srcset="http://thumbs.dreamstime.com/x/liver-spotted-dalmatian-bitch-17136208.jpg" media="(min-width:481px)">
                <img class="foto1" src="http://thumbs.dreamstime.com/x/liver-spotted-dalmatian-bitch-17136208.jpg.jpg" alt="">
            </picture>
        </a>
    
</body>
</html>

removeu 22298 caracteres do conteúdo
Fonte Link
GOLX
  • 153
  • 4
  • 13
@charset "UTF-8";

*{
margin:0px;
padding:0px;
}




html, body{
font-family: 'Poiret One', cursive;
background-image: url("../imagens/backgroundvinho2.png");   
background-attachment: fixed;
width:100%; 

font-size: 16px;
padding: 0px;
margin:0px;
}




                        
div#brasa-agora{
width:8.571875%; 

padding:0.4% 0px;
float:left;
margin-top:0.890625%;
margin-left:.7%;
border-radius:8px;
box-sizing: border-box;
box-shadow: 0px 0px 10px 1px #ff0000;
border:3px solid rgba(62,2,1,.5);
background-color:rgba(0,0,0,.2);
z-index: 1;
}
div#brasa-agora img{
margin-left:3%;
float:left;
width:100%;
z-index: 1;
}
div#brasa-agora:hover{
box-shadow:0px 0px 1px 2px rgba(255,255,255,.7);
-webkit-transition: all .2s ease-in;
background:rgba(255,255,255,.1);
}



#owl-carousel #owl-theme{
z-index: 1;
}

#carousel{
width: 90%;
float: right;
z-index: 1;
}
#container{
position: relative;
display: block;
box-sizing: border-box;
padding-top: 12px;
z-index: 2;
}
div a img {
z-index: 2;
border-radius: 4px;
}

#carousel span{
position: relative;
display: block;
font-family: 'Bad Script', cursive;
font-size: 16px;
line-height: 1.2;
color: white;
margin-top:10%;
padding-top: 10px;
padding-bottom: 5px;
text-align: center;
border-radius: 5px;
opacity: 0;
background:;
}
#carousel a{
text-decoration: none;
}

#carousel img:hover{
z-index: 2;
box-shadow: 0px 0px 1px 2px white;
-webkit-transition: all .2s ease-in;
border-radius: 3px;
}
#carousel a:hover span{
opacity: 1;
-webkit-transition: all .3s ease-in;
}





                                
div#cabecalho{
position: relative;
clear: both;
display: inline-block;
width:100%;
margin-top:-2%;
background:;
}                           
picture.logo {
position: relative;
display: inline-block;
margin-left: 6%;
width:auto;
}



/*----------------------------------- CHAMADAS CABEÇALHO----------------------------------*/
                            
                            
div#video{
position: relative;
width: 13%;
display: inline-block;
float: right;
text-align: center;
margin-right: 5%;
margin-top: 2%;
padding: 4% 0% 2% 0%;
background: url(../imagens/video_chamada.png) no-repeat center;
background-size: 70%;
-webkit-transition: background-image .5s ease-in-out;
-moz-transition: all .3s linear;
}
div#video:hover{
 background-image: url('../imagens/video_chamada_deslize.png');
 background-size:70% auto;
}
div#video a{
opacity:0;
}
                        



a#capa-individual{
width: 85%;
position: relative;
display: block;
margin-top: 3%;
margin-bottom: 3%;
margin-right: auto;
margin-left: auto;
margin-bottom: 3%;
border-radius: 5px;
background-color:;
text-align: center;
box-sizing: border-box;
box-shadow:;
border: 30px solid rgba(255,0,0,.3);
box-shadow: 0px 0px 10px 1px #000000;
}
.foto1{
width: 100%;
vertical-align: middle;
text-align: center;
border-radius: 5px;
border: 0px solid rgba(0,0,0,.7);
}




                                        

div#chamada_verificado{
float:left;
width:41.578125%;
padding:4.990625% 0px;
margin-left:5.7109375%;
margin-top:3.125%;
background-image:url("../imagens/chamada_verificado_novo.jpg");
background-color:rgba(0,0,0,.3); 
background-size:100% auto;
box-shadow:5px 5px 3px rgba(0,0,0,.6);
border:1px solid #8b4b4b;
border-radius: 10px;
}

div#chamada_calendario{
float:left;
width:41.578125%;
padding:4.990625% 0px;
margin-left:4.7109375%;
margin-top:3.125%;
background-image:url("../imagens/chamada_calendario_trans.jpg");
background-size:100% auto;
box-shadow:8px 8px 3px rgba(0,0,0,.6);
border:1px solid #b66f6f;
border-radius: 10px;
}



                                            

div.passarela{
width:100%;
float:left;
margin:2.325% 0px 0% 0px;
background-color:;
}
div.passarela img{
width:100%;
padding:7.015625% 0px 6.015625% 0px;
}   
div.passarela img:hover {
-webkit-transform:scale(1.1);
-webkit-transition: all .2s ease-in;
}
                            




div#tabela_principal{
clear: both;
display: inline-block;
width: 100%;
box-shadow: 0px 0px 20px 4px black;
margin-top:3%;
margin-bottom: 2%;
padding-top: 2%;
padding-bottom: 1%;
background-image: url("../imagens/backgroundvinho2.png");   
}
div#tabela_icones{
width: 80%;
margin-left:auto;
margin-right: auto;
text-align: center;
margin-bottom: 2%;
background-color:;
}
div#tabela_icones div{
width: 10%;
display: inline-block;
margin-left: 2%;
margin-right: 2%;
margin-top: 2%;
text-align: center;
vertical-align: middle;
border-radius: 100%;
background-color:rgba(0,0,0,.3);
border:1px solid #884949;
box-shadow:3px 3px 10px 2px black;
background-color:;

}
div#tabela_icones div:hover {
cursor: pointer;
-webkit-transform:scale(0.9);
-webkit-transition: all .1s ease-in;
box-shadow:0px 0px 5px 1px white;
background-color:rgba(117,106,106,.4);
}

div#tabela_icones img{
width:100%;
background-color:;
text-align: center;
vertical-align: middle;
}
div#tabela_texto{
width: 80%;
margin-left:auto;
margin-right: auto;
text-align: center;
margin-bottom: 1%;
background-color:;
}
div#tabela_texto div{
width: 10%;
display: inline-block;
margin-left: ;
text-align: center;
vertical-align: middle;
border:1px solid rgba(0,0,0,0);
margin-left: 2%;
margin-right: 2%;
background-color:;
}


div#tabela_texto span{
color: #dbbebe;
background-color:;
font-family: 'Bad Script', cursive;
font-size: 17px;
letter-spacing: 1px;
font-weight: bold;
}

div#tabela_texto span:hover {
text-shadow:0px 0px 30px white;
color: #dfc3c3;
}
                    




div#container-localidade{
position: relative;
display: inline-block;
clear: both;
width: 100%;
text-align: center;
background:;
margin-top: 1%;
margin-bottom: 2%;
vertical-align:top;
}
nav#menu_localidade{
position: relative;
display: inline-block;
list-style-type: none;
width: 270px;
text-align: center;
padding: 1% 1% 1% 1%;
background:;
border-radius: 10px;
padding: 1.5%;
z-index: 2;
}

nav#menu_localidade li{
width: 90%;
position:relative;
float: left;
list-style: none;
padding: 4%;
font-family: 'Poiret One', cursive;
color: #e4d6d6;
font-size: 17px;
background-color:;
z-index: 2;
}

nav#menu_localidade li a{
font-family: 'Poiret One', cursive;
font-weight: bold;
font-size: 13px;
color:#ffffff;
text-decoration: none;
}
nav#menu_localidade li#escolher_localidade{
width: 100%;
display: inline-block;
color: #efe2e2;
font-family: 'Poiret One', cursive;
font-size: 20px;
border-radius: 7px;
padding:5px 0% 5px 0%;
letter-spacing: 1px;
text-align: center;
cursor: default;
box-shadow: 0px 0px 8px 1px #cf1010;
border:2px solid rgba(62,2,1,.5);
background-color: rgba(0,0,0,.2);
}
nav#menu_localidade li ul{
width: 120%;
position: absolute;
left: -15%;
margin-top:7%;
background-color: rgba(0,0,0,.8);
display: none;
padding: 5%;
border-radius: 4%;
}
nav#menu_localidade li ul span{
color: gray;
cursor: default;
font-size: 13px;
font-weight: bold;
padding-top:0%;
font-weight: bold;
}
nav#menu_localidade li.regiao{
padding: 1.5%;
margin-left: 4%
}


nav#menu_localidade li ul li{
border-bottom: 1px solid black;
display: block;
}


nav#menu_localidade:hover ul, nav#menu_localidade li:hover ul, nav#menu_localidade li ul li:hover ul, nav#menu_localidade li.over ul, nav#menu_localidade li ul li.over ul{
display: block;
} 
#menu_localidade a li:hover{
background-color: rgba(0,0,0,.3);
}                   





                                    
ul#galeria_principal {
width:100%;
float:left;
list-style:none;
text-align:center;
background-color:;
margin-bottom: 4%;
}
ul#galeria_principal a{
display:inline-block;
width:42.96875%;
padding:11.71875% 0px;
border:0px solid ;
margin:1.5625%;
background-color: #ffffff;
box-shadow:0px 0px 0px 7px rgba(255,255,255,.5);
border-radius: 5px;
}
ul#galeria_principal a#foto_01{
background-image: url('../imagens/chamada_camila.jpg');
background-size:100% auto;
}
ul#galeria_principal a#foto_02{
background-image: url('../imagens/chamada_patricia.jpg');
background-size:100% auto;
}
ul#galeria_principal a#foto_03{
background-image: url('../imagens/chamada_rafaela.jpg');
background-size:100% auto;
}
ul#galeria_principal a#foto_04{
background-image: url('../imagens/chamada_marta.jpg');
background-size:100% auto;
}
ul#galeria_principal a#foto_05{
background-image: url('../imagens/chamada_paloma.jpg');
background-size:100% auto;
}
ul#galeria_principal a#foto_06{
background-image: url('../imagens/chamada_rui.jpg');
background-size:100% auto;
}
ul#galeria_principal a:hover {box-shadow:0px 0px 2px 5px white;
}




                                                            


div#video_principal{
position: relative;
clear: both;
box-sizing:border-box;
display: block;
width:57.6875%; 

padding:4.796875% 0px 0% 0px;
margin:0% auto 5.8125% auto; 

background-color:rgba(0,0,0,.4); 
/*background-color:rgba(117,106,106,.3); */
border-radius:10px;
box-shadow: 0px 0px 20px 2px #cf1010;
border:5px solid rgba(55,2,1,1);
background-color: rgba(0,0,0,.3);
}

video#video_principal{
width:80.14285714285714%; 

display: block;
position:relative;
left:10%;
top:50%;
border-radius: 5px;
background-color:rgba(0,0,0,.5); 
border:5px solid rgba(62,2,1,1);
}
div#video_principal p{
position:relative;
text-align:center;
margin-top:1.857142857142857%;
font-family: 'Poiret One', cursive;
color:rgba(255,255,255,.5);
font-size:1.375rem;
}
div#video_principal a{
text-decoration: none;
}







footer#rodape{
position: relative;
width:100%;
background-color:;
padding: 0;
}

div#super_fundo{
position: relative;
display: block;
width: 100%;
background-color: rgba(0,0,0,.7);
text-align: center;
}
.logo_rodape{
position: relative;
display: inline-block;
margin-top: .8%;
bottom: auto;
opacity: .6;
margin-left: 5%;
}
div#super_fundo p{
position: relative;
display: inline-block;
width: 55%;
text-align: justify;
color: #dbbebe;
margin-top: 2.5%;
margin-left:4%;
font-size: 26px;
margin-bottom: 2%;
background-color:;
vertical-align: top;
font-family: 'Poiret One', cursive;
font-weight:;
}
div#info_rodape{
position: relative;
width: 100%;
padding-top: 2%;
padding-bottom: 2%;
margin-left: 0%;
background:#180000;
text-align: center;
border-top: 1px solid #1c0000;
}
div#info_rodape p{
font-family: 'Poiret One', cursive;
font-size: 20px;
color: #bc9e9e;
margin-bottom: 4%;
text-align: left;
font-weight: bold;
}
div#info_rodape a{
display: block;
font-size: 16px;
color: #ddaeae;
text-decoration: none;
text-align: left;
font-family: 'Poiret One', cursive;
padding: 8px 0;
}
div#info_rodape a:hover{
text-decoration: underline;
}
div#mapa_site{
position: relative;
display: inline-block;
width: 17%;
background-color:;
margin: 0 5%;
margin-left: 10%;
background-color:;
}
div#mapa_menu{
position: relative;
display: inline-block;
width: 17%;
margin: 0 5%;
}
div#nosso_site{
position: relative;
display: inline-block;
width: 17%;
vertical-align:top;
margin: 0 5%;
}
div#adulto_rodape{
width: 12%;
position: absolute;
display: inline-block;
top: 50%;
right: 18%;
clear: both;
background-color:;
}
div#adulto_rodape img{
width: 130px;
opacity: .8;
}


@media screen and (min-width: 100px) and (max-width: 480px){







body{
    background: #620202;
}






div#brasa-agora{
    box-shadow: 0px 0px 3px 1px #ff0000;
    border-radius: 4px;
}






div#container span{
    display: none;
}
div a img{
    border-radius: 2px;
}

#container{
padding-bottom: 12px;
}




    
div#cabecalho{
    position: relative;
    display: inline-block;
    clear: both;
    margin-top: 5%;
    margin-bottom: 20%;
    text-align: center;
}
.logo {
    margin-left: 0%;
}

div#video{
    display: none;
}






a#capa-individual{
    width: 97%;
    margin-top: 8%;
    margin-bottom: 4%;
    border: 7px solid rgba(255,0,0,.3);
    border-radius: 5px;
}

.foto1{
    border-radius: 5px;
}






div#chamada_verificado{
    width: 95%;
    margin: 7% 0% 5% 2%;
    padding: 11% 0%;
}
div#chamada_calendario{
    width: 95%;
    margin: 4% 0 5% 2%;
    padding: 11% 0%;
}   







div.passarela{
    width:100%;
    margin-bottom: 3%;
}

div.passarela img{
    width:180%;
    display: inline-block;
    padding-right: 50px;
}
div.passarela a{
    margin-right: 2%;
}







div#tabela_principal{
    width: 100%;
    background-image: none;
    box-shadow: none;
    margin-top: 4%;
    margin-bottom:4%;
}
div#tabela_icones{
    position: relative;
    float: left;
    width: 100%;
    padding-top: 2.5%;
    text-align: center;
    background:;
}
div#tabela_icones div{
    width: 80px;
    position: relative;
    text-align: center;
    display: inline-block;
    margin-right: 4.2%;
    margin-left: 4.2%;
    margin-top: 5px;
    margin-bottom: 20px;
    background:;
    box-shadow: 0px 0px 10px 1px #cf1010;

}
div#tabela_texto{
    display: none;
}






nav#menu_localidade{

    padding-bottom: 8%;
}
nav#menu_localidade li#escolher_localidade{
padding: 10px 0px;
}
nav#menu_localidade li{
    font-size: 20px;
}
nav#menu_localidade li ul{
    width: 92%;
    left: -1%;
    margin-top: 18px;
    text-align: center;
}






ul#galeria_principal{
    margin-top:0%;
    margin-bottom: 10%;
}
ul#galeria_principal a{
    box-shadow:0px 0px 0px 5px rgba(255,255,255,.5);
    border-radius: 3px;
    margin-bottom: 5%;
    display: inline-block;
    width: 90%;
    padding-top: 35%;
}






div#video_principal{
    display: inline-block;
    width: 95%;
    left: 0%;
    margin-top: 5%;
    margin-bottom: 5%;
    padding-left: 2%;
    padding-top: 10%;
    border:3px solid rgba(55,2,1,1);
    text-align: center;
}
video#video_principal{
    text-align: center;
    width: 95%;
    left: 0;
}


/*#######  RODAPÉ   ##########*/


div#super_fundo p{
    width: 90%;
    margin-bottom: 3%;
    margin-top: 3%;
    font-size: 22px;
    text-align: center;
}
.logo_rodape {
        margin-top: 1%;
    }
div#mapa_site{
    position: relative;
    width: 100%;
    text-align: center;
    background:;
    margin: 0;
}
div#mapa_menu{
    position: relative;
    width: 100%;
    text-align: center;
    background:;
    margin: 0;
}
div#nosso_site{
    position: relative;
    width: 100%;
    text-align: center;
    background:;
    margin: 0;
}


div#info_rodape p{
    padding-top: 2%;
    text-align: center;
    border-top: 1px solid #190202;

}
div#info_rodape a{
    text-align: center;
    padding:3% 0;
    font-size: 
}
div#adulto_rodape{
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: center;
    top: 0;
    right: 0;
}
div#adulto_rodape img{
    position: relative;
    width: 120px;
    text-align: center;
    margin-top: 3%;
}


}



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






div#cabecalho{
    width: 100%;
    margin-top: -1%;
    text-align: center;
    clear: both;
}
.logo {
    margin-left: 0%;
    margin-bottom: 4%;
}
    div#video{
    display: none;
}

a#capa-individual{
    width: 95%;
    margin-top: 1%;
    margin-bottom: 3%;
    border: 20px solid rgba(255,0,0,.3);
    border-radius: 8px;
}
.foto1{
    border-radius:4px;
}






div#chamada_verificado{
    width: 80%;
    padding: 9% 0%;
    margin-top: 3%;
    margin-right: 0%;
    margin-left: 10%;
}
div#chamada_calendario{
    width: 80%;
    padding: 9% 0%;
    margin-top: 5%;
    margin-bottom: 6%;
    margin-left: 10%;
}







div#tabela_principal{
    margin-top:6%;
    margin-bottom: 6%;
}                       

div#tabela_icones{
    width: 100%;
}
div#tabela_icones div{
    width: 11%;
}
div#tabela_texto{
    width: 100%;
}
div#tabela_texto div{
    width: 13%; 
    margin-left: 1%;
    margin-right: 1%;   
    background-color: ;
 }
div#tabela_texto span{
    font-size: 18px
}





nav#menu_localidade{

    margin-bottom: 4%;
}
nav#menu_localidade {

    margin-bottom: 4%;
}





ul#galeria_principal{
    margin-bottom: 10%;
}
ul#galeria_principal a{
    width:44.96875%;
    margin:18px 2%;
}






div#video_principal{
    width: 85%;
    padding-bottom: 5%;
    margin-bottom: 10%;
    margin-left: 7.5%;
    padding: 8% 4% 3% 4%;
    border:3px solid rgba(55,2,1,1);
    text-align: center;
}
video#video_principal{
    text-align: center;
    width: 90%;
    margin-left: 4.5%;
    left: 0;
}


/*#######  RODAPÉ   ##########*/


div#super_fundo p{
    font-size:22px;
    width: 85%;
    text-align: center;
    margin-bottom: 1%;
    margin-top:3;
    margin-left: 0;
}
.logo_rodape{
    margin-bottom: 1%;
    margin-left: 0;
}
div#mapa_site{
    width: 25%;
    margin: 0 0% 0 2%;
    background-color:;
}
div#mapa_menu{
    width: 25%;
    margin: 0 0% 0 5%;
    background-color:;

}
div#nosso_site{
    width: 25%;
    margin: 0 0% 0 2% ;
    background-color:;
}
div#adulto_rodape img{
    width: 130px;
    margin-left: 0;
}
div#info_rodape a{
    font-size: 16px;
    padding: 7px 0;  
}
div#info_rodape p{
    font-size: 20px;
}


}



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






div#cabecalho{
    margin-top: -2%;
}
.logo {
    margin-left:;
}


div#video{
    position: absolute;
    width: 150px;
    padding: 30px 0;
    left:80%;
}


a#capa-individual{
    width: 90%;
    margin-bottom: 3%;
    border: 25px solid rgba(255,0,0,.3);
}

div#chamada_verificado{
    width:46%;
    padding:5% 0px;
    margin-left:2%;
    margin-top:3.125%;
}

div#chamada_calendario{
    float:left;
    width:46%;
    padding:5% 0px;
    margin-left:2%;
    margin-top:3.125%;
}


div#tabela_principal{
    margin-top:6%;
    margin-bottom: 6%;
}                       

div#tabela_icones{
    width: 100%;
}
div#tabela_icones div{
    width: 8%;
    margin-left: 3%;
    margin-right: 3%;
}
div#tabela_texto{
    width: 100%;
}
div#tabela_texto div{
    width: 13%; 
    margin-left: .5%;
    margin-right: .5%;  
    background-color: ;
}
div#tabela_texto span{
    font-size: 20px;
}


div#container-localidade{
    margin-top: -2%
}


ul#galeria_principal{
    margin-bottom: 7%;
}

div#video_principal{
    width: 70%;
    margin-bottom: 8%;
    margin-left: 15%;
    padding: 8% 4% 3% 4%;
    border:3px solid rgba(55,2,1,1);
    text-align: center;
}
video#video_principal{
    text-align: center;
    width: 90%;
    margin-left: 4.5%;
    left: 0;
}

/*#######  RODAPÉ   ##########*/


div#super_fundo p{
    margin-bottom: 2%;
    margin-left: 0;
}


}



div#brasa-agora{
width:16%;
margin-left:2%;
margin-top: 10px;
box-shadow: 0px 0px 3px 1px #ff0000;
border-radius: 4px;
}

#carousel{
width: 81%; 
float: right;
z-index: 1;
}
#carousel div a img{
border-radius: 3px;
}


}



div#brasa-agora{
width:14%; 

margin-left:1%;
margin-top: 10px;
border-radius: 5px;
}

#carousel{
width: 84%; 
float: right;
z-index: 1;
}
#carousel div a img{
border-radius: 3px;
}


}



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


div#brasa-agora{
width:10.8%; 

margin-left:1%;
margin-top: 10px;
}

#carousel{
width: 87.5%;   
float: right;
z-index: 1;
}


}



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

#carousel img:hover{
-webkit-transform:scale(1.1);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="erro.css">
</head>
<body>
        <a id="capa-individual" href="individual.html">
            <picture>
                <source class="foto1" srcset="imagenssrcset="http:/capa_mulheres_peq/thumbs.dreamstime.com/x/lying-male-dalmatian-18553200.jpg" media="(max-width: 480px)">
                <source class="foto1" srcset="imagenssrcset="http:/capa_mulheres/thumbs.dreamstime.com/x/liver-spotted-dalmatian-bitch-17136208.jpg" media="(min-width:481px)">
                <img class="foto1" src="imagenssrc="http:/capa_mulheres/thumbs.dreamstime.com/x/liver-spotted-dalmatian-bitch-17136208.jpg.jpg" alt="">
            </picture>
        </a>
    
</body>
</html>
@charset "UTF-8";

*{
margin:0px;
padding:0px;
}




html, body{
font-family: 'Poiret One', cursive;
background-image: url("../imagens/backgroundvinho2.png");   
background-attachment: fixed;
width:100%; 

font-size: 16px;
padding: 0px;
margin:0px;
}




                        
div#brasa-agora{
width:8.571875%; 

padding:0.4% 0px;
float:left;
margin-top:0.890625%;
margin-left:.7%;
border-radius:8px;
box-sizing: border-box;
box-shadow: 0px 0px 10px 1px #ff0000;
border:3px solid rgba(62,2,1,.5);
background-color:rgba(0,0,0,.2);
z-index: 1;
}
div#brasa-agora img{
margin-left:3%;
float:left;
width:100%;
z-index: 1;
}
div#brasa-agora:hover{
box-shadow:0px 0px 1px 2px rgba(255,255,255,.7);
-webkit-transition: all .2s ease-in;
background:rgba(255,255,255,.1);
}



#owl-carousel #owl-theme{
z-index: 1;
}

#carousel{
width: 90%;
float: right;
z-index: 1;
}
#container{
position: relative;
display: block;
box-sizing: border-box;
padding-top: 12px;
z-index: 2;
}
div a img {
z-index: 2;
border-radius: 4px;
}

#carousel span{
position: relative;
display: block;
font-family: 'Bad Script', cursive;
font-size: 16px;
line-height: 1.2;
color: white;
margin-top:10%;
padding-top: 10px;
padding-bottom: 5px;
text-align: center;
border-radius: 5px;
opacity: 0;
background:;
}
#carousel a{
text-decoration: none;
}

#carousel img:hover{
z-index: 2;
box-shadow: 0px 0px 1px 2px white;
-webkit-transition: all .2s ease-in;
border-radius: 3px;
}
#carousel a:hover span{
opacity: 1;
-webkit-transition: all .3s ease-in;
}





                                
div#cabecalho{
position: relative;
clear: both;
display: inline-block;
width:100%;
margin-top:-2%;
background:;
}                           
picture.logo {
position: relative;
display: inline-block;
margin-left: 6%;
width:auto;
}



/*----------------------------------- CHAMADAS CABEÇALHO----------------------------------*/
                            
                            
div#video{
position: relative;
width: 13%;
display: inline-block;
float: right;
text-align: center;
margin-right: 5%;
margin-top: 2%;
padding: 4% 0% 2% 0%;
background: url(../imagens/video_chamada.png) no-repeat center;
background-size: 70%;
-webkit-transition: background-image .5s ease-in-out;
-moz-transition: all .3s linear;
}
div#video:hover{
 background-image: url('../imagens/video_chamada_deslize.png');
 background-size:70% auto;
}
div#video a{
opacity:0;
}
                        



a#capa-individual{
width: 85%;
position: relative;
display: block;
margin-top: 3%;
margin-right: auto;
margin-left: auto;
margin-bottom: 3%;
border-radius: 5px;
background-color:;
text-align: center;
box-sizing: border-box;
box-shadow:;
border: 30px solid rgba(255,0,0,.3);
box-shadow: 0px 0px 10px 1px #000000;
}
.foto1{
width: 100%;
vertical-align: middle;
text-align: center;
border-radius: 5px;
border: 0px solid rgba(0,0,0,.7);
}




                                        

div#chamada_verificado{
float:left;
width:41.578125%;
padding:4.990625% 0px;
margin-left:5.7109375%;
margin-top:3.125%;
background-image:url("../imagens/chamada_verificado_novo.jpg");
background-color:rgba(0,0,0,.3); 
background-size:100% auto;
box-shadow:5px 5px 3px rgba(0,0,0,.6);
border:1px solid #8b4b4b;
border-radius: 10px;
}

div#chamada_calendario{
float:left;
width:41.578125%;
padding:4.990625% 0px;
margin-left:4.7109375%;
margin-top:3.125%;
background-image:url("../imagens/chamada_calendario_trans.jpg");
background-size:100% auto;
box-shadow:8px 8px 3px rgba(0,0,0,.6);
border:1px solid #b66f6f;
border-radius: 10px;
}



                                            

div.passarela{
width:100%;
float:left;
margin:2.325% 0px 0% 0px;
background-color:;
}
div.passarela img{
width:100%;
padding:7.015625% 0px 6.015625% 0px;
}   
div.passarela img:hover {
-webkit-transform:scale(1.1);
-webkit-transition: all .2s ease-in;
}
                            




div#tabela_principal{
clear: both;
display: inline-block;
width: 100%;
box-shadow: 0px 0px 20px 4px black;
margin-top:3%;
margin-bottom: 2%;
padding-top: 2%;
padding-bottom: 1%;
background-image: url("../imagens/backgroundvinho2.png");   
}
div#tabela_icones{
width: 80%;
margin-left:auto;
margin-right: auto;
text-align: center;
margin-bottom: 2%;
background-color:;
}
div#tabela_icones div{
width: 10%;
display: inline-block;
margin-left: 2%;
margin-right: 2%;
margin-top: 2%;
text-align: center;
vertical-align: middle;
border-radius: 100%;
background-color:rgba(0,0,0,.3);
border:1px solid #884949;
box-shadow:3px 3px 10px 2px black;
background-color:;

}
div#tabela_icones div:hover {
cursor: pointer;
-webkit-transform:scale(0.9);
-webkit-transition: all .1s ease-in;
box-shadow:0px 0px 5px 1px white;
background-color:rgba(117,106,106,.4);
}

div#tabela_icones img{
width:100%;
background-color:;
text-align: center;
vertical-align: middle;
}
div#tabela_texto{
width: 80%;
margin-left:auto;
margin-right: auto;
text-align: center;
margin-bottom: 1%;
background-color:;
}
div#tabela_texto div{
width: 10%;
display: inline-block;
margin-left: ;
text-align: center;
vertical-align: middle;
border:1px solid rgba(0,0,0,0);
margin-left: 2%;
margin-right: 2%;
background-color:;
}


div#tabela_texto span{
color: #dbbebe;
background-color:;
font-family: 'Bad Script', cursive;
font-size: 17px;
letter-spacing: 1px;
font-weight: bold;
}

div#tabela_texto span:hover {
text-shadow:0px 0px 30px white;
color: #dfc3c3;
}
                    




div#container-localidade{
position: relative;
display: inline-block;
clear: both;
width: 100%;
text-align: center;
background:;
margin-top: 1%;
margin-bottom: 2%;
vertical-align:top;
}
nav#menu_localidade{
position: relative;
display: inline-block;
list-style-type: none;
width: 270px;
text-align: center;
padding: 1% 1% 1% 1%;
background:;
border-radius: 10px;
padding: 1.5%;
z-index: 2;
}

nav#menu_localidade li{
width: 90%;
position:relative;
float: left;
list-style: none;
padding: 4%;
font-family: 'Poiret One', cursive;
color: #e4d6d6;
font-size: 17px;
background-color:;
z-index: 2;
}

nav#menu_localidade li a{
font-family: 'Poiret One', cursive;
font-weight: bold;
font-size: 13px;
color:#ffffff;
text-decoration: none;
}
nav#menu_localidade li#escolher_localidade{
width: 100%;
display: inline-block;
color: #efe2e2;
font-family: 'Poiret One', cursive;
font-size: 20px;
border-radius: 7px;
padding:5px 0% 5px 0%;
letter-spacing: 1px;
text-align: center;
cursor: default;
box-shadow: 0px 0px 8px 1px #cf1010;
border:2px solid rgba(62,2,1,.5);
background-color: rgba(0,0,0,.2);
}
nav#menu_localidade li ul{
width: 120%;
position: absolute;
left: -15%;
margin-top:7%;
background-color: rgba(0,0,0,.8);
display: none;
padding: 5%;
border-radius: 4%;
}
nav#menu_localidade li ul span{
color: gray;
cursor: default;
font-size: 13px;
font-weight: bold;
padding-top:0%;
font-weight: bold;
}
nav#menu_localidade li.regiao{
padding: 1.5%;
margin-left: 4%
}


nav#menu_localidade li ul li{
border-bottom: 1px solid black;
display: block;
}


nav#menu_localidade:hover ul, nav#menu_localidade li:hover ul, nav#menu_localidade li ul li:hover ul, nav#menu_localidade li.over ul, nav#menu_localidade li ul li.over ul{
display: block;
} 
#menu_localidade a li:hover{
background-color: rgba(0,0,0,.3);
}                   





                                    
ul#galeria_principal {
width:100%;
float:left;
list-style:none;
text-align:center;
background-color:;
margin-bottom: 4%;
}
ul#galeria_principal a{
display:inline-block;
width:42.96875%;
padding:11.71875% 0px;
border:0px solid ;
margin:1.5625%;
background-color: #ffffff;
box-shadow:0px 0px 0px 7px rgba(255,255,255,.5);
border-radius: 5px;
}
ul#galeria_principal a#foto_01{
background-image: url('../imagens/chamada_camila.jpg');
background-size:100% auto;
}
ul#galeria_principal a#foto_02{
background-image: url('../imagens/chamada_patricia.jpg');
background-size:100% auto;
}
ul#galeria_principal a#foto_03{
background-image: url('../imagens/chamada_rafaela.jpg');
background-size:100% auto;
}
ul#galeria_principal a#foto_04{
background-image: url('../imagens/chamada_marta.jpg');
background-size:100% auto;
}
ul#galeria_principal a#foto_05{
background-image: url('../imagens/chamada_paloma.jpg');
background-size:100% auto;
}
ul#galeria_principal a#foto_06{
background-image: url('../imagens/chamada_rui.jpg');
background-size:100% auto;
}
ul#galeria_principal a:hover {box-shadow:0px 0px 2px 5px white;
}




                                                            


div#video_principal{
position: relative;
clear: both;
box-sizing:border-box;
display: block;
width:57.6875%; 

padding:4.796875% 0px 0% 0px;
margin:0% auto 5.8125% auto; 

background-color:rgba(0,0,0,.4); 
/*background-color:rgba(117,106,106,.3); */
border-radius:10px;
box-shadow: 0px 0px 20px 2px #cf1010;
border:5px solid rgba(55,2,1,1);
background-color: rgba(0,0,0,.3);
}

video#video_principal{
width:80.14285714285714%; 

display: block;
position:relative;
left:10%;
top:50%;
border-radius: 5px;
background-color:rgba(0,0,0,.5); 
border:5px solid rgba(62,2,1,1);
}
div#video_principal p{
position:relative;
text-align:center;
margin-top:1.857142857142857%;
font-family: 'Poiret One', cursive;
color:rgba(255,255,255,.5);
font-size:1.375rem;
}
div#video_principal a{
text-decoration: none;
}







footer#rodape{
position: relative;
width:100%;
background-color:;
padding: 0;
}

div#super_fundo{
position: relative;
display: block;
width: 100%;
background-color: rgba(0,0,0,.7);
text-align: center;
}
.logo_rodape{
position: relative;
display: inline-block;
margin-top: .8%;
bottom: auto;
opacity: .6;
margin-left: 5%;
}
div#super_fundo p{
position: relative;
display: inline-block;
width: 55%;
text-align: justify;
color: #dbbebe;
margin-top: 2.5%;
margin-left:4%;
font-size: 26px;
margin-bottom: 2%;
background-color:;
vertical-align: top;
font-family: 'Poiret One', cursive;
font-weight:;
}
div#info_rodape{
position: relative;
width: 100%;
padding-top: 2%;
padding-bottom: 2%;
margin-left: 0%;
background:#180000;
text-align: center;
border-top: 1px solid #1c0000;
}
div#info_rodape p{
font-family: 'Poiret One', cursive;
font-size: 20px;
color: #bc9e9e;
margin-bottom: 4%;
text-align: left;
font-weight: bold;
}
div#info_rodape a{
display: block;
font-size: 16px;
color: #ddaeae;
text-decoration: none;
text-align: left;
font-family: 'Poiret One', cursive;
padding: 8px 0;
}
div#info_rodape a:hover{
text-decoration: underline;
}
div#mapa_site{
position: relative;
display: inline-block;
width: 17%;
background-color:;
margin: 0 5%;
margin-left: 10%;
background-color:;
}
div#mapa_menu{
position: relative;
display: inline-block;
width: 17%;
margin: 0 5%;
}
div#nosso_site{
position: relative;
display: inline-block;
width: 17%;
vertical-align:top;
margin: 0 5%;
}
div#adulto_rodape{
width: 12%;
position: absolute;
display: inline-block;
top: 50%;
right: 18%;
clear: both;
background-color:;
}
div#adulto_rodape img{
width: 130px;
opacity: .8;
}


@media screen and (min-width: 100px) and (max-width: 480px){







body{
    background: #620202;
}






div#brasa-agora{
    box-shadow: 0px 0px 3px 1px #ff0000;
    border-radius: 4px;
}






div#container span{
    display: none;
}
div a img{
    border-radius: 2px;
}

#container{
padding-bottom: 12px;
}




    
div#cabecalho{
    position: relative;
    display: inline-block;
    clear: both;
    margin-top: 5%;
    margin-bottom: 20%;
    text-align: center;
}
.logo {
    margin-left: 0%;
}

div#video{
    display: none;
}






a#capa-individual{
    width: 97%;
    margin-top: 8%;
    margin-bottom: 4%;
    border: 7px solid rgba(255,0,0,.3);
    border-radius: 5px;
}

.foto1{
    border-radius: 5px;
}






div#chamada_verificado{
    width: 95%;
    margin: 7% 0% 5% 2%;
    padding: 11% 0%;
}
div#chamada_calendario{
    width: 95%;
    margin: 4% 0 5% 2%;
    padding: 11% 0%;
}   







div.passarela{
    width:100%;
    margin-bottom: 3%;
}

div.passarela img{
    width:180%;
    display: inline-block;
    padding-right: 50px;
}
div.passarela a{
    margin-right: 2%;
}







div#tabela_principal{
    width: 100%;
    background-image: none;
    box-shadow: none;
    margin-top: 4%;
    margin-bottom:4%;
}
div#tabela_icones{
    position: relative;
    float: left;
    width: 100%;
    padding-top: 2.5%;
    text-align: center;
    background:;
}
div#tabela_icones div{
    width: 80px;
    position: relative;
    text-align: center;
    display: inline-block;
    margin-right: 4.2%;
    margin-left: 4.2%;
    margin-top: 5px;
    margin-bottom: 20px;
    background:;
    box-shadow: 0px 0px 10px 1px #cf1010;

}
div#tabela_texto{
    display: none;
}






nav#menu_localidade{

    padding-bottom: 8%;
}
nav#menu_localidade li#escolher_localidade{
padding: 10px 0px;
}
nav#menu_localidade li{
    font-size: 20px;
}
nav#menu_localidade li ul{
    width: 92%;
    left: -1%;
    margin-top: 18px;
    text-align: center;
}






ul#galeria_principal{
    margin-top:0%;
    margin-bottom: 10%;
}
ul#galeria_principal a{
    box-shadow:0px 0px 0px 5px rgba(255,255,255,.5);
    border-radius: 3px;
    margin-bottom: 5%;
    display: inline-block;
    width: 90%;
    padding-top: 35%;
}






div#video_principal{
    display: inline-block;
    width: 95%;
    left: 0%;
    margin-top: 5%;
    margin-bottom: 5%;
    padding-left: 2%;
    padding-top: 10%;
    border:3px solid rgba(55,2,1,1);
    text-align: center;
}
video#video_principal{
    text-align: center;
    width: 95%;
    left: 0;
}


/*#######  RODAPÉ   ##########*/


div#super_fundo p{
    width: 90%;
    margin-bottom: 3%;
    margin-top: 3%;
    font-size: 22px;
    text-align: center;
}
.logo_rodape {
        margin-top: 1%;
    }
div#mapa_site{
    position: relative;
    width: 100%;
    text-align: center;
    background:;
    margin: 0;
}
div#mapa_menu{
    position: relative;
    width: 100%;
    text-align: center;
    background:;
    margin: 0;
}
div#nosso_site{
    position: relative;
    width: 100%;
    text-align: center;
    background:;
    margin: 0;
}


div#info_rodape p{
    padding-top: 2%;
    text-align: center;
    border-top: 1px solid #190202;

}
div#info_rodape a{
    text-align: center;
    padding:3% 0;
    font-size: 
}
div#adulto_rodape{
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: center;
    top: 0;
    right: 0;
}
div#adulto_rodape img{
    position: relative;
    width: 120px;
    text-align: center;
    margin-top: 3%;
}


}



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






div#cabecalho{
    width: 100%;
    margin-top: -1%;
    text-align: center;
    clear: both;
}
.logo {
    margin-left: 0%;
    margin-bottom: 4%;
}
    div#video{
    display: none;
}

a#capa-individual{
    width: 95%;
    margin-top: 1%;
    margin-bottom: 3%;
    border: 20px solid rgba(255,0,0,.3);
    border-radius: 8px;
}
.foto1{
    border-radius:4px;
}






div#chamada_verificado{
    width: 80%;
    padding: 9% 0%;
    margin-top: 3%;
    margin-right: 0%;
    margin-left: 10%;
}
div#chamada_calendario{
    width: 80%;
    padding: 9% 0%;
    margin-top: 5%;
    margin-bottom: 6%;
    margin-left: 10%;
}







div#tabela_principal{
    margin-top:6%;
    margin-bottom: 6%;
}                       

div#tabela_icones{
    width: 100%;
}
div#tabela_icones div{
    width: 11%;
}
div#tabela_texto{
    width: 100%;
}
div#tabela_texto div{
    width: 13%; 
    margin-left: 1%;
    margin-right: 1%;   
    background-color: ;
 }
div#tabela_texto span{
    font-size: 18px
}





nav#menu_localidade{

    margin-bottom: 4%;
}
nav#menu_localidade {

    margin-bottom: 4%;
}





ul#galeria_principal{
    margin-bottom: 10%;
}
ul#galeria_principal a{
    width:44.96875%;
    margin:18px 2%;
}






div#video_principal{
    width: 85%;
    padding-bottom: 5%;
    margin-bottom: 10%;
    margin-left: 7.5%;
    padding: 8% 4% 3% 4%;
    border:3px solid rgba(55,2,1,1);
    text-align: center;
}
video#video_principal{
    text-align: center;
    width: 90%;
    margin-left: 4.5%;
    left: 0;
}


/*#######  RODAPÉ   ##########*/


div#super_fundo p{
    font-size:22px;
    width: 85%;
    text-align: center;
    margin-bottom: 1%;
    margin-top:3;
    margin-left: 0;
}
.logo_rodape{
    margin-bottom: 1%;
    margin-left: 0;
}
div#mapa_site{
    width: 25%;
    margin: 0 0% 0 2%;
    background-color:;
}
div#mapa_menu{
    width: 25%;
    margin: 0 0% 0 5%;
    background-color:;

}
div#nosso_site{
    width: 25%;
    margin: 0 0% 0 2% ;
    background-color:;
}
div#adulto_rodape img{
    width: 130px;
    margin-left: 0;
}
div#info_rodape a{
    font-size: 16px;
    padding: 7px 0;  
}
div#info_rodape p{
    font-size: 20px;
}


}



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






div#cabecalho{
    margin-top: -2%;
}
.logo {
    margin-left:;
}


div#video{
    position: absolute;
    width: 150px;
    padding: 30px 0;
    left:80%;
}


a#capa-individual{
    width: 90%;
    margin-bottom: 3%;
    border: 25px solid rgba(255,0,0,.3);
}

div#chamada_verificado{
    width:46%;
    padding:5% 0px;
    margin-left:2%;
    margin-top:3.125%;
}

div#chamada_calendario{
    float:left;
    width:46%;
    padding:5% 0px;
    margin-left:2%;
    margin-top:3.125%;
}


div#tabela_principal{
    margin-top:6%;
    margin-bottom: 6%;
}                       

div#tabela_icones{
    width: 100%;
}
div#tabela_icones div{
    width: 8%;
    margin-left: 3%;
    margin-right: 3%;
}
div#tabela_texto{
    width: 100%;
}
div#tabela_texto div{
    width: 13%; 
    margin-left: .5%;
    margin-right: .5%;  
    background-color: ;
}
div#tabela_texto span{
    font-size: 20px;
}


div#container-localidade{
    margin-top: -2%
}


ul#galeria_principal{
    margin-bottom: 7%;
}

div#video_principal{
    width: 70%;
    margin-bottom: 8%;
    margin-left: 15%;
    padding: 8% 4% 3% 4%;
    border:3px solid rgba(55,2,1,1);
    text-align: center;
}
video#video_principal{
    text-align: center;
    width: 90%;
    margin-left: 4.5%;
    left: 0;
}

/*#######  RODAPÉ   ##########*/


div#super_fundo p{
    margin-bottom: 2%;
    margin-left: 0;
}


}



div#brasa-agora{
width:16%;
margin-left:2%;
margin-top: 10px;
box-shadow: 0px 0px 3px 1px #ff0000;
border-radius: 4px;
}

#carousel{
width: 81%; 
float: right;
z-index: 1;
}
#carousel div a img{
border-radius: 3px;
}


}



div#brasa-agora{
width:14%; 

margin-left:1%;
margin-top: 10px;
border-radius: 5px;
}

#carousel{
width: 84%; 
float: right;
z-index: 1;
}
#carousel div a img{
border-radius: 3px;
}


}



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


div#brasa-agora{
width:10.8%; 

margin-left:1%;
margin-top: 10px;
}

#carousel{
width: 87.5%;   
float: right;
z-index: 1;
}


}



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

#carousel img:hover{
-webkit-transform:scale(1.1);
}
<a id="capa-individual" href="individual.html">
<picture>
    <source class="foto1" srcset="imagens/capa_mulheres_peq.jpg" media="(max-width: 480px)">
    <source class="foto1" srcset="imagens/capa_mulheres.jpg" media="(min-width:481px)">
    <img class="foto1" src="imagens/capa_mulheres.jpg" alt="">
</picture>
</a>
a#capa-individual{
width: 85%;
position: relative;
display: block;
margin-top: 3%;
margin-bottom: 3%;
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
border: 30px solid rgba(255,0,0,.3);
}
.foto1{
width: 100%;
vertical-align: middle;
text-align: center;
border-radius: 5px;
border: 0px solid rgba(0,0,0,.7);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="erro.css">
</head>
<body>
        <a id="capa-individual" href="individual.html">
            <picture>
                <source class="foto1" srcset="http://thumbs.dreamstime.com/x/lying-male-dalmatian-18553200.jpg" media="(max-width: 480px)">
                <source class="foto1" srcset="http://thumbs.dreamstime.com/x/liver-spotted-dalmatian-bitch-17136208.jpg" media="(min-width:481px)">
                <img class="foto1" src="http://thumbs.dreamstime.com/x/liver-spotted-dalmatian-bitch-17136208.jpg.jpg" alt="">
            </picture>
        </a>
    
</body>
</html>
removeu 4867 caracteres do conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando
adicionou 27378 caracteres ao conteúdo; título editado
Fonte Link
GOLX
  • 153
  • 4
  • 13
Carregando
adicionou 11 caracteres ao conteúdo; título editado
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando
Fonte Link
GOLX
  • 153
  • 4
  • 13
Carregando