/* classes reguladoras (fix)*/
body {
margin: 0;
padding: 0;
background: #f0f0f0
}
img {
border: none
}
/* classes padrão para organização */
.caixa {
max-width: 2400px;
width: 95%;
min-width: 240px;
margin: 0 auto
}
.bloco {
background: #fff;
float: left;
width: 96%;
margin: 2%;
border-radius: 6px;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
.bloco:hover {
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
.bloco img {
width: 100%;
float: left;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.bloco div {
width: 96%;
padding: 2%;
font-size: 18px;
color: #666;
font-family: 'Exo 2', sans-serif;
float: left;
}
.coluna1, .coluna2, .coluna4, .coluna8 {
width: 100%;
float: left;
}
#carregar {
width: 52%;
margin: 20px 20%;
padding: 2%;
float: left;
background: #09c;
color: #fff;
text-align: center;
font-family: 'Exo 2', sans-serif;
font-size: 18px;
transition: all 0.3s;
}
#carregar:hover {
-moz-box-shadow: inset 0 0 8px -2px #000;
-webkit-box-shadow: inset 0 0 8px -2px #000;
box-shadow: inset 0 0 8px -2px #000;
cursor: pointer;
}

/* exibir ou não em celular */
@media screen and (min-width : 240px) {
.coluna1 {
width: 100%;
float: left;
}
}
@media screen and (min-width : 640px) {
.coluna2 {
width: 50%;
float: left;
}
}
@media screen and (min-width : 1100px) {
.coluna2 {
width: auto;
float: none;
}
.coluna4 {
width: 25%;
float: left;
}
}
@media screen and (min-width : 2560px) {
.coluna2, .coluna4 {
width: auto;
float: none;
}
.coluna8 {
width: 12.5%;
float: left;
}
}