@charset "utf-8";
/*		  
Olá mundo! 
Este CSS foi criado pela designer Dani Guerrato como demo de um artigo do Tableless.

Web:       www.tableless.com.br
E-mail:    dani@popupdesign.com.br

Divirta-se! :)
*/

/*Dases dimensionais deste site
Container – 1128px
 Logotipo – 234px x 36px
 Menu – maximo 840px
 Banner – 1128px x 450px
 Caixa de texto – 480px
 Colunas de texto – 264px
 Fotos – 264px x 218px
 Margens – 24px
 Rodapé – 1128px*/



/* ==========================================================================
   Normatização CSS
   ========================================================================== */
*, *:before, *:after {
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

a {color: #00ccff;text-decoration: none;font-size: 1.6em;}

a:hover {text-decoration: underline;}

.banner {
	/*	background: url('../imgs/banner.jpg'); */
    /* height: 450px;*/
	height: 215px;
	/*margin-bottom: 4.8em;*/
	margin-bottom: 1.5em;
	/*margin-left: 2.127659574468%;*/
	margin-right: 0px;
	/*margin-left:2.127659574468%;*/
	margin-left:0%;
	/*margin-right:2.127659574468%;*/
	margin-right:0%;
	position: relative;
	visibility: inherit;
}

.banner_int {
	/*background: url('../imgs/banner.jpg'); */
   /* height: 450px;*/
     height: 150px;
	/*margin-bottom: 4.8em;*/
    margin-bottom: 1.5em;
    margin-left:2.127659574468%;
	margin-right:2.127659574468%;
	position: relative;
}
body {
    font-size: 62.5%;
    line-height: 1.5;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   	/*background-color: #42413c;*/
 	background-color: #e1e1e1;
}

.caixa {
	width: 261px; /* 4col +3*24=1128  1col=264  264/1128= 0.2340425531914894. FEITO ARREDONDAMENTO*/
	padding: 2.4em 4em 2.4em 4em;
	position: absolute;
	/*top: 48px*/;
	top: -2px; /*ARN*/
	background: rgba(0,0,0,0.6);
	height: 164px;
	/*left: 72px;*/

margin-left:2.127659574468%;
}

.caixa p {
    font-size: 1.4em;
    font-weight: 200;
    color: #fff;
}

.coluna {
    width: 22.34042553191489%; 
    float: left; 
    margin-right:2.12765957446809%; /* 24 / 1128px */
    margin-top: 2.127659574468%*/; /*ARN*/
  	height: 405px;
    /*background: rgba(146,3,19,1.0);*/
    padding:0.0% 0.2% 0.0% 0.2%;
}

.coluna:last-child {
    margin-right: 0;
}
.coluna_int {
    width: 22.34042553191489%; /* 252/1008 ((1128-5*24)/4*)/1128)*/
    float: left;
    margin-right: 2.127659574468%; /* 24 / 1128px */
    margin-top: 2.127659574468%; /*ARN*/
	height: 405px; /*ARN*/
    background-color:#FDFDFD;
    padding:0.0% 0.2% 0.0% 0.2%;
}
.coluna_int:last-child {
    margin-right: 0;
}


.coluna_int3 {
    width: 30.49645390070922%; /* 344/1008 ((1128-4*24)/3*)/1128)*/
    float: left; 
    margin-right:2%; /* 24 / 1128px */
    margin-top: 2.127659574468%*/; /*ARN*/
  	height: 405px;
   padding:0.0% 0.2% 0.0% 0.2%;
}
.coluna_int3:last-child {
    margin-right: 0;
}



/*
.container {max-width: 1128px;margin: 0 auto;background-color:#FBFBFB;}
*/
.container {
width: 1128px;
background-color: #FFFFFF;
margin: 0 auto; /* o valor automático nos lados, combinado com a largura, centraliza o layout */
overflow: hidden;/*ARN ver http://www.criarweb.com/artigos/solucao-problema-float-construcao-css.html e http://www.criarweb.com/artigos/atributo-overflow-de-css.html*/
}
img,
picture,
video,
embed {
    max-width: 100%;
}

h1  {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 4em;
    font-weight: 200;
    color: #FFF;
}

h2  { /*ARN*/
    margin-top: 0;
    margin-bottom: 0;  
	font-size: 3em;
    font-weight: 150;
    color: #FFF;
}

h2 {
    font-size: 2.4em;
    font-weight: 200;
}
h3 {
    font-size: 1.8em;
    font-weight: 200;
    color: #fff;
margin-left:0.6em;
}

.header {width: 100%;
height: 48px; 
margin-top: 3.6em;
margin-bottom: 3.6em;
margin-left:2.127659574468%;
margin-right:2.127659574468%;}

.foto {
    width: 100%;
margin-top:1%;
}
.footer {float: left;
width: 100%;
height:40px;
background: rgba(146,3,19,1.0);
margin-top: 2.4em;
text-align:center;
color:#fff; 
padding-top:1.2em; 
clear: both ;
	   }



.footer p {
    margin-bottom: 0;
}

#footer small {
	
	font-size: 1.4em;
	margin-top: .124em;
	position: absolute;
	text-align:center;
	
	/*left: 165px;*/
	/*//top: 868px;*/
}

.footer a {
    font-size: 1.4em;
}

.logo {
    float: left;
    /*width: 20.744680851064%; /*234px / 1128px **//  
 width: 40.744680851064%;
}

.menutopo1u {
    width: 74.468085106383%; /*840px / 1128px */
   float: right;
}
/*.menu {
    width: 74.468085106383%; /*840px / 1128px */
  /*  float: right;
}*/

/*.menu ul {
    float: right;
}*/

/*.menu li {
    font-size: 1.2em;
    margin-left: 2em;
    margin-top: 1em;
    display: inline-block;
}*/

/*.menu li a {
    color: #999;
}*/


p {
    font-size: 1.6em;
}

p1 {
/*font-size: 1.6em;*/ /*arn*/
font-size: 1.3em;
color: #fff;
}

p1p {
    /*font-size: 1.6em;*/ /*arn*/
padding:0.5em:;
font-size:1.3em;
text-align: left;
color: #000;
}

.titulo {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
float: right;
padding-right:50px;
font-size:4em;
	}

.menutopo1 {
 height: 40px;
 line-height:40px;
 width: 1128px;
 text-align:center;
color:#fff; 
background-color: #920313;
}
.menutopo1 a {color: #fff;text-decoration: none;font-size: 1.6em;}
.menutopo1 a:hover {text-decoration: underline;color:#00ccff; }


/* ==========================================================================
   Media Queries
   ========================================================================== */


@media screen and (max-width: 1128px) {/*ARN SAMSUNG mini 540 x 960*/
.container {padding: 0 2.4em 0 2.4em;    }
/*.coluna_int3{ width: 90%;  margin-right: 0; height:auto;}*/
.logo{ width: 40%;}

}

@media screen and (max-width: 768px) { /*ARN SAMSUNG mini 540 x 960*/
.container {width:95%;}
.banner, .baner_int { height: 120px; } 
.caixa { width: 30%;    }
.coluna { width: 35%; margin-bottom: 2.4em; margin-right: 2%;    }
.titulo{ padding: 1em 0.5em 0 0;float:right; width: auto;font-size: 1.5em;}
.coluna_int { width: 100%;  margin-right: 0; height:auto;}
.titulo{ padding: 1em 0.5em 0 0;float:right; width: auto;font-size: 2.5em;}
}


@media screen and (max-width: 718px) {

   .banner {
        position: relative;
        float: left;
        margin:0;
       /* height: 150px;*/
  height: 72px; /*arn150x215/450*/
    }

    .caixa {
        position: relative;
        display: block;
        float: left;
        margin-top:100px;
        width: 50%;
        background: #000;
    }

    .caixa h1 {
        font-size: 2.5em;
    }

    .principal {
        margin-top: 450px;
    }

}

@media screen and (max-width: 640px) {
.menu {width: 100%; }
.menu li:first-child { margin-left: 0;}

}


@media screen and (max-width: 520px) { /*ARN SAMSUNG mini 540 x 960*/
.container {width:100%;}
.banner, .baner_int { height: 120px; }     /* height: 120px;*/     /*arn120*215/450*/
/*.baner_int { height: 120px;  }*/     /* height: 120px;*/     /*arn120*215/450*/
.caixa {padding: 1.2em 2em 1.2em 2em;}
.caixa {position: relative;display: block;float: left;margin-top:80px;width: 70%;background: #000;}
.coluna     { width: auto;  margin-right: 0; height:auto;}
.coluna_int3{ width: 100%;  margin-right: 0; height:auto;}
.clearfix:before,.clearfix:after {content: " ";display: table; }
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
.logo{ width: 40%;}
.menutopo1{width: 100%;} 
}