*{
margin: 0;
padding: 0;
}

@import url(http://fonts.googleapis.com/css?family=Rosario:400,400italic,700,700italic);

html,body { width: 100%; height: 100%; min-height:100%; }

body { margin: 0; font-family:'Rosario', sans-serif;background-image: url(images/bg.png);background-repeat: repeat;}

header { background-color: #f2a037; border-bottom: 5px solid #a53918; height: 44px; width: 100%; z-index: 1; }
.logo { width: 100%; margin-top: -50px; text-align: center; margin-bottom: 20px;z-index: -1;}
.superior {width: 100%; height: auto;}
#redes { float:right; width: 10%; position: relative; margin-top: 15px; }
.iconos { margin-left: 10px; }

.content { width: 960px; margin-left:auto; margin-right:auto; background-color: #fff; position: absolute; left:0;right:0; }
.slider { width: 99%; background-color: #fff; margin: 0 auto;}

section {width:100%; float: left; }

ol { list-style-type:none; }

.titulares_servicios { width: 960px; background-color: #fff; margin-top: 40px; margin-bottom: 10px;}
.titulares_servicios h1 {float: left; height:40px; width: auto; background: url(images/banderin_orange.png) right top no-repeat; color: #fff; font-size: 16px; 
padding-left: 10px; padding-top: 10px; padding-right: 30px;}

.titulares_trabajo { width: 960px; background-color: #f09e48; margin-top: 10px; margin-bottom: 10px;}
.titulares_trabajo h1 {float: left; height:40px; width: auto; background: url(images/banderin_blanco.png) right top no-repeat; color: #f09e48; font-size: 16px; padding-left: 20px; 
padding-top: 10px; padding-right: 30px;}

.titulares_internas { width: 960px; background-color: #fff; margin-top: 40px; margin-bottom: 10px;}
.titulares_internas h1 {float: left; height:40px; width: auto; background: url(images/banderin_bordo.png) right top no-repeat; color: #fff; font-size: 16px; 
padding-left: 20px; padding-top: 10px; padding-right: 30px;}

.contenedor_section {width: 960px; float: left;}

/* nuestros servicios */

.servicios {width: 100%; background-color: #fff; overflow: hidden; }
#servicios {width: 20%; float: left; margin: 20px 14px 20px 30px; color:#4d4d4d;  }
#servicios img {width: 60%; margin-bottom: 20px; display:block; margin-left: auto;margin-right: auto; margin-top: 10px;}
#servicios h2 {text-align: center; font-size: 16px; line-height: 19px; font-weight: 400 italic;  }
#servicios p {text-align: center; font-size: 14px; line-height: 16px; margin-top: 10px; margin-bottom: 10px; margin-left: auto;margin-right: auto; }
#servicios a {text-decoration: none; font-size: 12px; color: #a53918; text-align: center; margin-left: auto;margin-right: auto; font-weight: bold; }
#servicios a:hover {text-decoration: underline; font-size: 12px; text-align:center; color: #a53918; text-align: center; }

/* nuestro trabajo */

.trabajo {width: 100%; background-color: #f09e48; overflow: hidden; padding-bottom: 40px; }
#trabajo {width: 15%; float: left; margin: 20px 14px 20px 25px; color:#4d4d4d;  }
#trabajo img { max-width: 100%; }
#trabajo h2 {text-align:left; font-size: 16px; font-size: 14px; line-height: 16px; margin: 15px 0 10px 10px;color: #4d4d4d;}
#trabajo a { margin: 15px 0 10px 0px; text-decoration: none; font-size: 10px; text-align:center; color: #4d4d4d; }
#trabajo a:hover {margin: 15px 0 10px 0px; text-decoration: underline; font-size: 10px; text-align:center; color: #A53918; }


/* BANNER */
.banner {width: 100%; background-color: #a63b19; overflow: hidden; padding-bottom: 40px; padding-top: 40px;  }
.banner a {text-decoration: none;}
.blogspot {text-align:center; color: #fff; font-size: 14px;}
.blog {font-size: 22px; margin-top: 5px; }
.sitio { text-decoration: underline; font-size: 14px; margin-top: 5px;}

/* footer */

footer {background-color: #4c4c4c; width: 100%; display: table; border-top: 5px solid #a53918; margin-left: auto;margin-right: auto; position: relative; text-align: center; margin-top: 50px; }
footer p {width: 100%; font-size: 12px; color: #fff; float: left; text-align: center; margin: 50px 0px 20px 0px;}
footer ul {list-style: none;  margin-left: auto;margin-right: auto; width: 45%; overflow: hidden; }
footer ul li a {text-decoration: none; color: #fff; float: left; text-align: center;}
footer ul li {color: #fff; float: left; margin: 20px;}
footer ul li a:hover {text-decoration: underline; color: #fff; float: left; text-align: center;}



/************************************************************************************
smaller than 980
*************************************************************************************/

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

header {width: 100%; height: 50px; background-color: #f2a037; border-bottom: 5px solid #a53918; z-index: 2; }
.content {width: 100%; position: absolute; background-color: #fff;}

.logo { width: 100%; margin-top: -50px; text-align: center; margin-bottom: 20px;}
header div {width: 100%; height: auto; z-index: 1; }
.superior {width: 100%; height: auto;}
.contenedor {width: 100%;}
.header {width: 100%; margin: 0 auto;}
#redes {float:right; width: 10%; position: relative; margin-top: 15px; }

section {width:100%;}
.contenedor_section {width: 100%; float: none;}
.titulares_servicios { width: 100%; background-color: #fff; margin-top: 40px; margin-bottom: 10px;}
.titulares_trabajo { width: 100%; background-color: #f09e48; margin-top: 10px; margin-bottom: 10px;}
.titulares_internas { width: 100%; background-color: #fff; margin-top: 10px; margin-bottom: 10px;}


.servicios { width:100%; margin-left: auto;margin-right: auto;}
#servicios { width:100%; margin-left: auto;margin-right: auto; text-align: center;}
#servicios img { width:170px; margin-bottom: 20px; margin-top: 20px; }
#servicios h2 {text-align: center; font-size: 18px; line-height: 20px; font-weight: 400 italic;  }
#servicios p {text-align: center; font-size: 20px; line-height: 18px; margin-top: 10px; margin-bottom: 10px; margin-left: auto;margin-right: auto; }
#servicios a {text-decoration: none; font-size: 20px; color: #4d4d4d; }
#servicios a:hover {text-decoration: underline; font-size: 20px; text-align:center; color: #4d4d4d; }


#trabajo { width: 100%; text-align: center; margin-left: auto; margin-right: auto; text-align: center;}
.trabajo { width:100%; padding-bottom:50px; margin-left: auto; margin-right: auto; }
#trabajo img { width:160px; display: block;margin-left: auto; margin-right: auto;}
#trabajo h2 {width:80%; text-align: center; margin-left: auto; margin-right: auto; font-size: 18px; line-height: 20px;color: #4d4d4d;}
#trabajo a {  text-decoration: none; font-size: 14px; text-align:center; color: #4d4d4d; }
#trabajo a:hover {; text-decoration: underline; font-size: 14px; text-align:center; color: #A53918; }


/* footer */

footer { background-color: #4c4c4c; width: 100%; display: table; border-top: 5px solid #a53918; margin: auto; position: relative; text-align: center; }
footer p {width: 100%; font-size: 12px; color: #fff; float: left; text-align: center; margin: 50px 0px 20px 0px;}
footer ul {list-style: none;  margin-left: auto;margin-right: auto; width:37%; }
footer ul li a {width:100%; text-decoration: none; color: #fff; float: left; text-align: center; font-size: 15px;}
footer ul li { color: #fff; float: left; margin: 10px;}
footer ul li a:hover {width:100%;text-decoration: none; color: #fff; float: left; text-align: center; font-size: 15px;}
}




/************************************************************************************
smaller than 768
*************************************************************************************/


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

header {width: 100%; height: 60px; background-color: #f2a037; border-bottom: 5px solid #a53918; }

.content {width: 100%; position: absolute; background-color: #fff;}
.logo { width: 100%; margin-top: -50px; text-align: center; margin-bottom: 20px;}
#redes {display: none;}
.superior {width: 100%; height: auto;}

section {width:100%;}
.contenedor_section {width: 100%; float: none;}
.titulares_servicios { width: 100%; background-color: #fff; margin-top: 40px; margin-bottom: 10px; }
.titulares_trabajo {width: 100%; background-color: #f09e48; margin-top: 20px; margin-bottom: 10px; height: 60px;}
.titulares_internas { width: 100%; background-color: #fff; margin-top: 10px; margin-bottom: 10px;}

.servicios { width:100%; margin-left: auto;margin-right: auto;}
#servicios { width:100%; margin-left: auto;margin-right: auto; text-align: center;}
#servicios img { width:150px; margin-bottom: 20px; margin-top: 20px; }
#servicios h2 {text-align: center; font-size: 18px; line-height: 20px; font-weight: 400 italic;  }
#servicios p {width:60%; text-align: center; font-size: 16px; line-height: 18px; margin-top: 10px; margin-bottom: 10px; margin-left: auto;margin-right: auto; }
#servicios a {text-decoration: none; font-size: 12px; color: #a53918; }
#servicios a:hover {text-decoration: underline; font-size: 12px; text-align:center; color: #a53918; }

#trabajo { width: 100%; text-align: center; float:none; margin-left: auto;margin-right: auto; }
.trabajo { width:100%; padding-bottom:50px; float:none; margin-left: auto;margin-right: auto; }
#trabajo img { width:160px; display: block;margin-left: auto;margin-right: auto;}
#trabajo h2 { width:60%; text-align: center; margin-left: auto; margin-right: auto; font-size: 18px; line-height: 20px;color: #4d4d4d;}
#trabajo a {  text-decoration: none; font-size: 14px; text-align:center; color: #4d4d4d; }
#trabajo a:hover {; text-decoration: underline; font-size: 14px; text-align:center; color: #A53918; }

footer {background-color: #4c4c4c; width: 100%; display: table; border-top: 5px solid #a53918; margin-left: auto;margin-right: auto; position: relative; text-align: center; }
footer p {width: 100%; font-size: 12px; color: #fff; float: left; text-align: center; margin: 50px 0px 20px 0px;}
footer ul {list-style: none;  margin-left: auto;margin-right: auto; width: 100%; }
footer ul li a {width:100%; text-decoration: none; color: #fff; float: none; text-align: center; font-size: 15px;}
footer ul li { color: #fff; float: none; margin: 20px; border-bottom: 1px solid #fff; padding: 20px;}
footer ul li a:hover {width:100%;text-decoration: none; color: #fff; float: none; text-align: center; font-size: 15px;}



}