

                   body{

                        background-color:#fff;

                        text-align:center;

                        font-family: Raleway-ExtraBold, sans-serif;

                        margin:0px;

                   }

                   .topo{

                         width:100%;

                         height:25%;

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

						 background-size: cover;

						 background-repeat: no-repeat;

                         float:top;

                         margin:0px;

                   }

                   .logo{

                         width: 20%;

                         height: 0; /* A mÃ¡gica estÃ¡ aqui */

                         padding-bottom: 15%; /* ... e estÃ¡ aqui */

                         float: center;

                         position: relative;

                         text-align: right;

                         background-repeat: no-repeat;

                         background-position: center bottom;

                         background-attachment: fixed;

                         background-size: 40% 10%;

                         background-origin:border-box;

                         margin-left:40%;

                   }

				   
				   .logo img{

				   }

                   .horizontal{

						margin-top: -0.7%;

                         width:100%;

                         height: 0; /* A mÃ¡gica estÃ¡ aqui */

                         padding-bottom: 6%; /* ... e estÃ¡ aqui */

                         float: none;

                         position: relative;

                         background-color:#fff;

                   }

				   
                   .recorte{

                         width: 100%;

                         height: 0; /* A mÃ¡gica estÃ¡ aqui */

                         padding-bottom: 2%; /* ... e estÃ¡ aqui */

                         float: center;

                         position: relative;

                         text-align: right;

                         background-repeat: no-repeat;

                         background-position: center bottom;

                         background-attachment: fixed;

                         background-size: 40% 10%;

                         background-origin:border-box;

 
                   }

				   
				   .recorte img{

				   }

				   
				   .cursinho{

				   float: none;

				   height: 0; /* A mÃ¡gica estÃ¡ aqui */

                         padding-top: 1.4%; /* ... e estÃ¡ aqui */

                         width: 23%;

				   }

				   
				   .cursinho img{

				   width: 100%;

				   }

				   
				   .links {

				   width: 75%;

				   margin-left: 24%;

				   padding-bottom: 3%;}

				   
				   .links li{

				   float: left;

				   list-style-type: none;

				   margin-top: 0.7%;

				   }

				   
                   .fileira{

                            width:60%;

                            margin:0px;

                            float:left;

                   }

				   .quad1{

                         width: 66.7%;

                         height: 0; /* A mÃ¡gica estÃ¡ aqui */

                         padding-bottom: 66.7%; /* ... e estÃ¡ aqui */

                         float: left;

                         position: relative;

                         background-color: #0ff;

                   }

				   
				   .quad1 img{

				   width: 100%;

				   }

				   
                   .quad2{

                         width: 40%;

                         height: 0; /* A mÃ¡gica estÃ¡ aqui */

                         padding-bottom: 40%; /* ... e estÃ¡ aqui */

                         float: right;

                         position: relative;

                         background-color: #d4ac76;

                         text-align:center;

                         font-family: Raleway-ExtraBold, sans-serif;
                         
                         top:5px;

                   }


                   .quad3{

                         width: 33.3%;

                         height: 0; /* A mÃ¡gica estÃ¡ aqui */

                         padding-bottom: 33.35%; /* ... e estÃ¡ aqui */

                         float: right;

                         position: relative;

                         background-color: #ff0;

                   }

				   
				   .quad3 img{

				   
				   width: 100%;

				   }

                   .quad4{

                         width: 33.3%;

                         height: 0; /* A mÃ¡gica estÃ¡ aqui */

                         padding-bottom: 33.35%; /* ... e estÃ¡ aqui */

                         float: right;

                         position: relative;

                         background-color: #888;

                   }

				   .quad4 img{

				   
				   width: 100%;

				   }

				   
                   .widgets{

                         width: 40%;

                         float: left;

                         position: relative;

                         margin:0px;

                   }

                   .widblog{

                         width: 100%;

                         height: 0; /* A mÃ¡gica estÃ¡ aqui */

                         padding-bottom: 50%; /* ... e estÃ¡ aqui */

                         float: left;

                         position: relative;

                         background-color: #74a2aa;

                         margin:0px;

                   }

				   
				   .titulo_blog {

				   width: 100%; 

				   font-family: Gotham, sans-serif;

				   font-size: 1.2vw;

				   height: 0;

				   line-height: 1.5vw;

				   padding-bottom: 5%;

				   
				   }

				   
				   .titulo_face {   

				   font-family: Gotham, sans-serif;

				   font-size: 1.2vw;

				   height: 0;

				   line-height: 1.5vw;

				   padding-bottom: 5%;

				   
				   }

				   
				   .titulo_blog img{

				   width: 100%;

				   }

				   
				   .titulo_face img{

				   margin-top: 1%;

				   margin-left: 1%;

				   width: 15%;

				   }

				   
				   .nome_fb {

				   font-size: 1vw;

				   line-height: 1.6vw;

				   height:0;

				   padding-top: 15%;

				   margin-left: 15.5%;

				   width: 70%;

				   border: solid 1px #000;}

				   .profile{

				   border: solid 1px #000;

				   width: 15%;

				   height: 0;

				   padding-top: 15%;

				   float: left;

				   
				   margin-top: 1%;

				   margin-left: 1%;

				   }

				   
				   .profile img{

				   width: 100%;

				   
				   }

				   
				   .fundo{

				   font-family: Gotham, sans-serif;

				   margin-top: 7.5%;

				   margin-left: 15%;

				   width: 75%;

				   height: 0;

				   padding-bottom: 35%;

				   background-color: white;

				   font-size: 1vw;

				   text-align: left;

				   }

				   .feedword{

				   padding-top: 8.5%;

				   }

				   
				   .feedword li{

				   margin-left: 1.2%;

				   padding-top: 2%;

				   padding-bottom: 3%;

				   list-style:none;}

				   
				   .fundo a{

				   				   color:black;

				   text-decoration: none;}

				   
				   .blogicon {

				   margin-top: 8%;

				   height: 0;

				   padding-bottom: 10%;

				   width:10%;

				   margin-left: 5%;

				   float: left;

				   
				   }

				   
				   .blogicon img{

				   width: 100%;}

				   
                   .widface{

                         width: 100%;

                         height: 0; /* A mÃ¡gica estÃ¡ aqui */

                         padding-bottom: 50%; /* ... e estÃ¡ aqui */

                         float: left;

                         position: relative;

                         background-color: #3254a4;

                         margin:0px;

                   }

				   .fb_page{

				   margin-left: auto;

				   margin-right: auto;

				   
				   }

				   
				   .fb-wrap {

  width:50%;

  margin: 0 auto;

}


.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] { width: 100% !important; }

				   
                   .outro{

                         width: 60%;

                         float: right;

                         position: relative;

                         margin:0px;

                   }

                   .feed{

                         width: 100%;

                         height: 0; /* A mÃ¡gica estÃ¡ aqui */

                         padding-bottom: 10%; /* ... e estÃ¡ aqui */

                         float: right;

                         position: relative;

                         background-color: #000;

                         margin:0px;

						 color: #fff;

                   }

                   .galeria{

                         width: 100%;

                         height: 0; /* A mÃ¡gica estÃ¡ aqui */

                         padding-bottom: 56.7%; /* ... e estÃ¡ aqui */

                         float: right;

                         position: relative;

						 opacity:1;

                         margin:0px;

					}

					
					.img_galeria{

					height:0;

					padding-top: 56.7%;

					position: absolute;

					width:100%;

					}

					
					.img_galeria img{

					top: 0;

						left: 0;

						width: 100%;

						height: 100%;}

				   
				   .efeito{

				   
				   position: absolute;

				   height:0;

				   width: 100%;

				   padding-bottom: 56.7%;

				   }

				   
				   .efeito:hover{

				   background-color:red;

				   opacity:0.4;

				   }

				   
                   .rodape{

                         width:100%;

                         height: 0; /* A mÃ¡gica estÃ¡ aqui */

                         padding-bottom: 13%; /* ... e estÃ¡ aqui */

                         float:left;

                         position: relative;

                         background-color:#000;

                   }

				   
				   .element-to-stretch { 

						position: absolute;

						top: 0;

						left: 0;

						width: 100%;

						height: 100%;

}


@font-face{

font-family: Raleway;

src: url(Raleway-ExtraBold.ttf);

}

@font-face{

font-family: Gotham;

src: url(Gotham-Rounded-Medium_21022.ttf);

}


/* Reset CSS */

*, *:after, *:before{

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  line-height: 1;

}


/* Fundo do menu */

.menu{

	
	max-width: 100%;

  background: #fff;
  position: relative;
  bottom:5px;

}

/* Remove as bolinhas do lado das listas */

.menu .list{

	
}

.menu .sub-menu{

margin-top: 2%;

list-style: none;

}


/* Configura todos os links do nosso menu */

.menu a{

text-align: left;

	color: #000;

  text-decoration: none;

  display: block;

  cursor: pointer;

  font-size: 1.3vw;

font-family: Gotham, sans-serif;

font-weight: 900;

}

/* Faz os <li>s ficarem na horizontal */

.menu > .menu-list > li{

  float: left;

  position: relative;

}

/* Configura os links do menu principal */

.menu > .menu-list > li > a {

	padding-right:5%;

  padding-bottom:30%;

  margin: 0;

  background: #fff;

}

/* Configura o fundo do menu principal quando com mouse hover */

.menu > .menu-list > li:hover a {

  background: #fff;

}

/* Mostra o submenu no evento de mouse hover */

.menu > .menu-list > li:hover > .sub-menu {

  display: block;

}

/* Configura o estilo do submenu */

.menu > .menu-list > li > .sub-menu {

  font-family: Gotham, sans-serif;

  width: 120%;

	position: absolute;

  top: 70%;

  background-color: #fff;

  z-index: 1000;

  display: none;

}

.menu > .menu-list > li{

	 font-family: Raleway-ExtraBold, sans-serif;}


/* Configura os links do submenu */

.menu > .menu-list > li > .sub-menu > li > a {

	padding-top: 10%;

	padding-bottom:10%;

	width: 100%;

}


.menu:after {


  content: '.';

  display: block;

  clear: both;

  visibility: hidden;

  line-height: 0;

  height: 0;

}


#fb-root {

  display: none;

}

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {

  width: 80% !important;


  }

  
  .mail{

  margin-left: 3%;

  margin-top: 3%;

  height: 0;

  padding-top: 3%;

  border-radius: 8px;

  }

  
  .texto_news{

  
  font-size: 1.2vw;

  font-family: Gotham, sans-serif;

  font-weight: 900;

  height: 0;

  margin-left:5%;

  width: 16%;

  padding-top: 3%;

  padding-bottom: 10%;

  float: left;

  text-align:left;

  }

  
  .formulario{

  height: 0;

  margin-left: 21%;

  width: 65%;

  padding-top: 3%;

  padding-bottom: 10%;

  }

  
  .form1{

  /*font-size:1vw;

  margin-top: 1%;

  height:0;*/

width:100%;

padding: 2.4%;

border-radius:5px;

border:1px solid #7ac9b7;

  }

  
  .recorte_rodape{

	background-color: #000;

                         width: 100%;

                         height: 0; /* A mÃ¡gica estÃ¡ aqui */

                         padding-bottom: 2%; /* ... e estÃ¡ aqui */

                         background-repeat: no-repeat;

                         background-position: center bottom;

                         background-attachment: fixed;

                         background-size: 40% 10%;

                         background-origin:border-box;

 
                   }

				   
.recorte_rodape img{

width: 100%;

margin-top: -0.75%;

}			


 .direitos{

 margin-left: 36%;

 padding-top: 3.5%;

 color: #fff;

 width: 24%;

 height: 0;

 position: relative;

 float: left;

 text-align: center;

 padding-bottom: 6%;

  font-size: 1.2vw;

font-family: Gotham, sans-serif;

font-weight: 900;}

  
 .vermelho{

 margin-left: -0.4%;

 padding-top: 3.5%;

 width: 1%;

 float: left;

 position: relative;

 height: 0;

 text-align: center;

 padding-bottom: 6%;

  font-size: 1.2vw;

font-family: Gotham, sans-serif;

font-weight: 900;

 color: red;

 }

 
 .data{

 padding-top: 3.5%;

 width: 3.5%;

 float: left;

 position: relative;

 height: 0;

 text-align: center;

 padding-bottom: 6%;

  font-size: 1.2vw;

font-family: Gotham, sans-serif;

font-weight: 900;

 color: #fff;

 
 }

 
 .vermelho1{

 padding-top: 1.7%;

 width: 5%;

 float: left;

 position: relative;

 height: 0;

 text-align: center;

 padding-bottom: 6%;

 font-size: 1.2vw;

font-family: Gotham, sans-serif;

font-weight: 900;

 color: red;

 }

 
.agenda{

       width: 40%;

       height: 0; /* A mÃ¡gica estÃ¡ aqui */

       padding-bottom: 40%; /* ... e estÃ¡ aqui */

       float: left;

       position: relative;

       background-color: #d4ac76;

}

.conteudo{

          width: 100%;

          background-color: #cacaca;

}

                   .cima{

                         height:18%;

                         width:100%;

                         line-height: 2.6em;

                         font-size: 2vw;

                         font-weight: bold;

                   }

                   .mes{

                        width:100%;

                        font-size: 1.8vw;

                        text-align: right;

                        height: 0; /* A mágica está aqui */

                        padding-bottom: 12%; /* ... e está aqui */

                        margin-right:15%;

                        margin-top:10%;

                   }

                   .quadrado{

                             width: 67%;

                             height: 0; /* A mágica está aqui */

                             padding-bottom: 67%; /* ... e está aqui */

                             float: center;

                             position: relative;

                             text-align: right;

                             background-color: #fff;

                             font-weight: bold;

                             font-size:1vw;

                             margin-left:16.5%;

                             margin-top:16.5%;

                   }

                   .quadrado a{

                             color: #000;

                             text-decoration: none;

                   }

                   .calendar{

                             width:15%;

                             height:0%;

                             float:left;

                             padding-bottom: 15%;

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

                             background-size: 100% 100%;

                             background-repeat: no-repeat;

                             text-align:center;

                             line-height: 350%;

                             font-size: 1.3vw;

							 margin-left:2%;

                   }

                   .evento{

                           width:85%;

                           height:0%;

                           padding-bottom: 12%;

                           line-height: 350%;

                           font-size: 1.3vw ;

                           text-align: left;


                   }

				   .evento a{

						line-height: 350%;

                        font-size: 1.3vw ;

                        text-align: left;

				   
				   }

                   .mes img{

                           width: 3.1%;

                   }

 
 #fb-root {

    display: none;

}


/* To fill the container and nothing else */


.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {

    width: 100% !important;

}

    #datepicker .ui-widget {

        font-size: 30px;

    }

.box-datepicker {
   width:  100%;
   

}

.box-datepicker #datepicker .ui-datepicker-inline  {
  position: relative; 
  top:80px;
  margin: 0 auto;
}

.box-manutencao {
  background: red;
  width: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  padding:20px;
  font-family: Gotham,sans-serif;
  padding-bottom: 40px;
}

.box-manutencao p {
  margin-bottom: 30px;
  margin-top:10px;
}

.box-manutencao .botao_voltar {
  text-decoration: none;
  color: #000;
  background: #fff;
  padding: 10px;
  margin-top: 30px;
}