/*-------------------------------------------------------------------------------------*/
body ,html {margin: 0px; width:100%; background:url(../imagenes/body-bg.png) center top no-repeat; background-size:contain; min-height:100%;}
img { border:none; line-height:0;}
a { text-decoration:none; color:#CC2128;}
a:hover { text-decoration:none;}
a:focus { outline:none;}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary, mark, fieldset { display:block;}
h1, h2, h3, h4, h5, h6, p, span { margin:0; padding:0;}

/* Fonts
================================================== */
@font-face {
    font-family: 'ProximaNovaRgRegular';
    src: url('https://www.hidroccim.com.ar/www/fonts/proximanova-regular-webfont-webfont.eot');
    src: url('https://www.hidroccim.com.ar/www/fonts/proximanova-regular-webfont-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.hidroccim.com.ar/www/fonts/proximanova-regular-webfont-webfont.woff') format('woff'),
         url('https://www.hidroccim.com.ar/www/fonts/proximanova-regular-webfont-webfont.ttf') format('truetype'),
         url('https://www.hidroccim.com.ar/www/fonts/proximanova-regular-webfont-webfont.svg#ProximaNovaRgRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
	font-family: 'Gotham-Book';
	src: url('https://www.hidroccim.com.ar/www/fonts/Gotham-Book.eot');
	src: local('☺'), url('https://www.hidroccim.com.ar/www/fonts/Gotham-Book.woff') format('woff'), url('https://www.hidroccim.com.ar/www/fonts/Gotham-Book.ttf') format('truetype'), url('https://www.hidroccim.com.ar/www/fonts/Gotham-Book.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Gotham-Light';
	src: url('https://www.hidroccim.com.ar/www/fonts/Gotham-Light.eot');
	src: local('☺'), url('https://www.hidroccim.com.ar/www/fonts/Gotham-Light.woff') format('woff'), url('https://www.hidroccim.com.ar/www/fonts/Gotham-Light.ttf') format('truetype'), url('https://www.hidroccim.com.ar/www/fonts/Gotham-Light.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Headlines P
================================================== */
h1 { text-decoration:none; font-family: 'Gotham-Light'; font-size: 35px; color:#003D38; letter-spacing:0.0em; line-height:30px;}
h2 { text-decoration:none; font-family:'Gotham-Light'; font-size: 16px;  line-height: 18px; color: #CB2127; text-align:left; letter-spacing:0.1em;}
h3 { text-decoration:none; font-family:'Gotham-Light'; font-size: 12px; line-height: 16px; color: #F26E21; text-align:left; letter-spacing:0.1em;}
h4 { text-decoration:none; font-family: 'Gotham-Light'; font-size: 14px; line-height: 18px; color: #CB2127; text-align:left; letter-spacing:0.1em;}
h5 { text-decoration:none; font-family: 'Gotham-Light'; font-size: 29px; line-height: 28px; color: #CB2127; letter-spacing:0.1em;}
p { font-family:'Gotham-Light'; font-size:13px; text-align:left; color:#2D3535; line-height:15px; letter-spacing:0.1em;}


/* Contenido
================================================== */
.contenido { width:100%; position:relative;}
.scrollup { position:fixed; bottom:30px; right:30px; display:none; transition:All 0.4s ease; -webkit-transition:All 0.4s ease; z-index:9999999; color:#FFF; font-size:30px; font-weight:bold; background:rgba(0,0,0,0.6); text-align:center; padding:20px;}
.scrollup:hover {}


/* Header
================================================== */
header { height:220px; position:relative; z-index:10;}
	header > div { margin:auto!important; background:#FFF; position:relative; height:100px; float:none!important; overflow:visible!important; width:400px;}
	header > div:after { position: absolute; width: 90%; height: 32%; left: 5%; border-radius: 41%; z-index: -1; bottom: 0%; content: ""; box-shadow: 0 3px 18px rgba(0,0,0,0.4);}
	header .logo { width:158px; height:138px; background:url(https://www.hidroccim.com.ar/www/imagenes/header-logo-hidroccim.png) center center no-repeat; position:relative; text-indent:-9999px; margin:0 auto; display:block; bottom:-35px;}
	header nav { background:#FFF; height:30px; margin:90px 0 0; position:relative;}
	header nav:after { position: absolute; width: 90%; height: 100%; left: 10%; border-radius: 50%; z-index: -1; bottom: 0%; content: ""; box-shadow: 0 0px 8px rgba(0,0,0,0.6);}
	header ul { margin:auto; padding:0; overflow:hidden; width:460px; margin:3px auto 0; display:block;}
	header li { list-style:none; padding:0; margin:0; float:left;}
		header li a { color:#58595B; font-size:14px; font-family: 'Gotham-Light'; letter-spacing:0.1em; margin:0 20px;}


/* Slider top
================================================== */
#slidertop { background:url(https://www.hidroccim.com.ar/www/imagenes/slider-bg.png) center center no-repeat #FFF; width:100%; position:relative;}
#slidertop:after { position: absolute; width: 80%; height: 40%; left: 10%; border-radius: 50%; z-index: -1; bottom: 0%; content: ""; box-shadow: 0 2px 12px rgba(0,0,0,0.4);}
	#slidertop > div { height:240px; background:url(https://www.hidroccim.com.ar/www/imagenes/slider-bg2.png) right no-repeat; margin-bottom:30px;}
	#slidertop p { font-size:20px; text-shadow:0 -2px 4px rgba(0,0,0,0.2); line-height:30px; padding:3% 0 0;}


/* Celular
================================================== */
.btn-menu { display:none; font-family: 'Gotham-Book'; letter-spacing:0.1em; color:#FFF; font-size:14px; text-align:center; cursor:pointer; transition:all 0.3s ease; -webkit-transition:all 0.3s ease; position:absolute; top:-0px; right:0px; z-index:9999; background:#CB2127;}
.btn-menu i { display:block; margin:auto;}
.btn-menu-open { display:block; padding:10px;}
.btn-menu-close { display:none; padding:10px;}

.menu-cel { display:none; width:70%; height:100%; background:#CB2127; position:fixed; top:0; right:-80%;}
	.menu-cel > a { position:absolute; right:0;}
	.menu-cel ul { margin:0; padding:0;}
	.menu-cel li { list-style:none; margin:0; padding:0;}
	.menu-cel li a { width:100%; display:block; padding:20px 0; font-family: 'Gotham-Book'; letter-spacing:0.1em; color:#FFF; font-size:18px; border-bottom:1px solid #896F60; display:block;}
	.menu-cel ul, .menu-cel h1 { margin:4%;}
	.menu-cel h1 { text-shadow:none; font-size:36px; font-weight:bold; color:#CCC; margin-top:20px;}


/* Empresa
================================================== */
#empresa { width:100%; background:#F0F1F1; overflow:hidden; padding:30px 0; position:relative;}
	#empresa > div { position:relative; display:block; width:100%; margin-bottom:20px; z-index:10; padding:0!important;}
	#empresa > div:after { position: absolute; width: 80%; height: 100%; left: 10%; border-radius: 50%; z-index: -1; top: 0%; content: ""; box-shadow: 0 0px 8px rgba(0,0,0,0.6);}
		#empresa > div > h2 { color:#666; text-align:center; padding:5px 1%; background:#F0F1F1;}
		#empresa section div { box-shadow:inset -1px 0 1px -1px rgba(0,0,0,0.4);}
			#empresa section div 	* { margin:0 7% 0 0;}
			#empresa section div img { margin:auto!important; display:block; position:relative; left:-7%;}
			#empresa section div h2 { margin:10px 0;}
		#empresa section div:last-child { box-shadow:none;}
	#marcas { width:100%; background:#E7E7E8; padding:20px 0 0; z-index:10; position:relative;}
		#marcas > div { background:#E7E7E8; position:relative; padding-bottom:20px;}
		#marcas > div:after { position: absolute; width: 90%; height: 50%; left: 5%; border-radius: 50%; z-index: -1; bottom: 0%; content: ""; box-shadow: 0 2px 12px rgba(0,0,0,0.4);}
		#marcas img { width:100%;}


/* Servicios
================================================== */
#serv { width:100%; background:#FFF; padding:30px 0; position:relative;}
	#serv h2 { color:#666; text-align:center; padding:5px 1%; background:#FFF;}
	#serv div div { position:relative; display:block; width:100%; margin-bottom:20px; z-index:10;}
	#serv div div:after { position: absolute; width: 80%; height: 100%; left: 10%; border-radius: 50%; z-index: -1; top: 0%; content: ""; box-shadow: 0 0px 8px rgba(0,0,0,0.6);}
	#serv span { color:#CB2127;}
	#serv div > section { overflow:hidden;}
	#serv section section a { box-shadow:0 0 2px rgba(0,0,0,0.8); width:45%; height:auto;}
		#serv section section a img { width:100%;}


/* Galeria
================================================== */
#galeria { width:100%; background:#0082C6; overflow:hidden; padding:30px 0 0;}
	#galeria h2 { color:#FFF; text-align:center; padding:5px 1%; background:#0082C6;}
	#galeria div { position:relative; display:block; width:100%; margin-bottom:20px; z-index:10; padding:0!important;}
	#galeria div:after { position: absolute; width: 80%; height: 100%; left: 10%; border-radius: 50%; z-index: -1; top: 0%; content: ""; box-shadow: 0 0px 8px rgba(255,255,255,0.8);}
	#galeria ul { padding:0;}
	#galeria li { list-style:none; margin:0 2% 20px 0; padding:0; transition:all ease 0.3s;}
	#galeria li:nth-child(3n) { margin-right:0;}
		#galeria li a { border:10px solid rgba(255,255,255,1); transition:all ease 0.3s; display:block;}
		#galeria li:hover a { border:10px solid rgba(160,160,160,1);}
			#galeria li a img { width:100%; margin-bottom:-5px;}
			#galeria li p { margin:10px 0 0; text-align:center; color:#FFF;}
	#galeria ul:hover li:not(:hover) { -webkit-transform: scale(.9); transform: scale(.9); opacity:0.7;}


/* Contacto
================================================== */
.clientes li { float: left; width: 25%; margin-top: 40px; list-style: none;}
#contacto input[type="text"], #contacto textarea, select { width:94%; font-family: 'ProximaNovaRgRegular'; padding:6px 3% 5px 3%; border:0px; color:#444; letter-spacing:0.1em; font-size:12px; margin-bottom:10px; background:#FFF; box-shadow:inset 0 0 0 2px #CCC;}
#contacto input[type="text"]:focus, #contacto textarea:focus { border:0px; background:#DDD;box-shadow:inset 0 0 0 2px #CB2127;}
#contacto textarea { width:97%; height:77px; resize:none; padding:4px 1.5% 3px 1.5%;}

input[type="submit"] { cursor:pointer; display:block; background:#E20000; color:#FFF; padding:5px 8px; font-family: 'ProximaNovaRgRegular'; font-size:12px; letter-spacing:0.1em; float:right; border:0;}
input[type="submit"]:hover { -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.4); box-shadow: 0px 0px 4px rgba(0,0,0,0.4); background:#B20000;}
input[type="submit"]:active {  -webkit-box-shadow:inset 0px 0px 4px rgba(0,0,0,0.4); box-shadow:inset 0px 0px 4px rgba(0,0,0,0.4);}

#contacto label { font-size:13px; line-height:15px; color:#757678; font-family:'ProximaNovaRgRegular'; letter-spacing:0.1em;}
footer fieldset { margin:0; padding:0; border:0;}


/* Footer
================================================== */
footer { width:100%; background:#E7E7E8; overflow:hidden; padding:30px 0 0;}
	footer h2 { color:#666; text-align:center; padding:5px 1%; background:#E7E7E8;}
	footer section { position:relative; display:block; width:100%; margin-bottom:20px; z-index:10; padding:0!important;}
	footer section:after { position: absolute; width: 80%; height: 100%; left: 10%; border-radius: 50%; z-index: -1; top: 0%; content: ""; box-shadow: 0 0px 8px rgba(0,0,0,0.6);}


/* ArtGraph
================================================== */
#artgraph { width:100%; padding:0px; overflow:hidden; margin:auto; float:left; margin-bottom:15px;}
a.art{ background:url(https://www.hidroccim.com.ar/www/imagenes/art.png) no-repeat top; height:22px; display:block; text-indent:-9999px; width:125px; margin-top:10px; float:left;}
a.art:hover { background-position: 0px -22px; border-bottom:0px;}