@charset utf-8;

/* RESETS ------ */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,a,code,del,em,img,samp,small,strong,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tr,th,td {margin:0; padding:0; border:0}
a img {border:0}
a {outline:0}

a:link, a:visited {color:#FFF; text-decoration:none}
a:hover {color:#FFF; text-decoration:underline}

.clear {height:0px; clear:both}

body {font:76% 'Open Sans', sans-serif; background:#00657f; color:#FFF}

/* HEADER ------ */
#header {width:1000px; margin:0 auto; padding:80px 0}
#header h1 {width:241px; height:89px; margin:0 auto; background:url(img/enero.png) no-repeat left top; display:block; text-indent:-9999px}

#content {width:1000px; margin:0 auto}

.item1 a {width:320px; height:185px; margin:0 20px 20px 0; background:url(img/packaging.png) no-repeat left top; transition:background .2s ease-in-out; -moz-transition:background .2s ease-in-out; -webkit-transition:background .2s ease-in-out; display:block; float:left}
.item2 a {width:320px; height:185px; margin:0 20px 20px 0; background:url(img/editorial.png) no-repeat left top; transition:background .2s ease-in-out; -moz-transition:background .2s ease-in-out; -webkit-transition:background .2s ease-in-out; display:block; float:left}
.item3 a {width:320px; height:185px; margin:0 0 20px 0; background:url(img/web.png) no-repeat left top; transition:background .2s ease-in-out; -moz-transition:background .2s ease-in-out; -webkit-transition:background .2s ease-in-out; display:block; float:left}
.item1 a:hover, .item2 a:hover, .item3 a:hover {background-position:left -185px}

.logo1 a {width:184px; height:184px; margin:0 20px 20px 0; background:url(img/logo_Sarasvati.png) no-repeat left top;transition:background .2s ease-in-out; -moz-transition:background .2s ease-in-out; -webkit-transition:background .2s ease-in-out; display:block; float:left}
.logo2 a {width:184px; height:184px; margin:0 20px 20px 0; background:url(img/logo2_Queridas.png) no-repeat left top;transition:background .2s ease-in-out; -moz-transition:background .2s ease-in-out; -webkit-transition:background .2s ease-in-out; display:block; float:left}
.logo3 a {width:184px; height:184px; margin:0 20px 20px 0; background:url(img/logo3_GoSouth.png) no-repeat left top;transition:background .2s ease-in-out; -moz-transition:background .2s ease-in-out; -webkit-transition:background .2s ease-in-out; display:block; float:left}
.logo4 a {width:184px; height:184px; margin:0 20px 20px 0; background:url(img/logo4_GrowUp.png) no-repeat left top;transition:background .2s ease-in-out; -moz-transition:background .2s ease-in-out; -webkit-transition:background .2s ease-in-out; display:block; float:left}
.logo5 a {width:184px; height:184px; margin:0 0 20px 0; background:url(img/logo5_GlobalEnvios.png) no-repeat left top;transition:background .2s ease-in-out; -moz-transition:background .2s ease-in-out; -webkit-transition:background .2s ease-in-out; display:block; float:left}
.logo1 a:hover, .logo2 a:hover, .logo3 a:hover, .logo4 a:hover, .logo5 a:hover {background-position:left -184px}

/* FOOTER ------ */
#footer {margin:0 auto; padding:20px 0; text-align:center}
#footer p {margin:0 0 10px 0; font-size:1.2em; color:#FFF}


/* RESPONSIVE QUERIES */

/* Check size */
.s768 {display:none; color:#FFF}
.s480 {display:none; color:#FFF}
.s479 {display:none; color:#FFF}  

/* Common */
@media screen and (max-width: 1000px) {
	
	#header {width:96%}
	#content {width:96%}
	#footer {width:96%}
	
}

/* Landscape tablet and dated desktop */
@media screen and (min-width: 1000px) {
}

/* Portrait tablet to landscape and desktop */
@media screen and (min-width: 768px) and (max-width: 1000px) {

	#header {padding:60px 0}
	
	#content {width:716px}
	
	.item1 a {width:232px; height:134px; margin:0 10px 10px 0; background-size:232px}
	.item2 a {width:232px; height:134px; margin:0 10px 10px 0; background-size:232px}
	.item3 a {width:232px; height:134px; margin:0 0 10px 0; background-size:232px}
	.item1 a:hover, .item2 a:hover, .item3 a:hover {background-position:left -134px}
	
	.logo1 a, .logo2 a, .logo3 a, .logo4 a {width:135px; height:135px; margin:0 10px 10px 0; background-size:135px}
	.logo5 a {width:135px; height:135px; margin:0 0 10px 0; background-size:135px}
	.logo1 a:hover, .logo2 a:hover, .logo3 a:hover, .logo4 a:hover, .logo5 a:hover {background-position:left -135px}
	
	/* Check size */
	.s768 {display:block} 

}

/* Iphone Ipod Landscape */
@media screen and (min-width: 480px) and (max-width: 767px) {

	html {-webkit-text-size-adjust:none}
	
	#header {padding:40px 0}
	
	#footer {width:86%}
	#footer span {width:300px; height:5px; color:#00657f; display:block}
	
	#content {width:300px}
	
	.item1 a {width:300px; height:173px; margin:0 auto 20px auto; background-size:300px; float:none}
	.item2 a {width:300px; height:173px; margin:0 auto 20px auto; background-size:300px; float:none}
	.item3 a {width:300px; height:173px; margin:0 auto 20px auto; background-size:300px; float:none}
	.item1 a:hover, .item2 a:hover, .item3 a:hover {background-position:left -173px}
	
	.logo1 a, .logo3 a {width:140px; height:140px; margin:0 20px 20px 0; background-size:140px}
	.logo2 a, .logo4 a {width:140px; height:140px; margin:0 0 20px 0; background-size:140px}
	.logo5 a {display:none}
	.logo1 a:hover, .logo2 a:hover, .logo3 a:hover, .logo4 a:hover, .logo5 a:hover {background-position:left -140px}

	
	/* Check size */
	.s480 {display:block} 
	
}

/* Iphone Ipod vertical and down */
@media screen and (max-width: 479px) {
	
	#header {padding:30px 0}
	#header h1 {width:200px; height:74px; background-size:200px}
	
	#footer {width:86%}
	#footer span {width:300px; height:5px; color:#00657f; display:block}
	
	#content {width:300px}
	
	.item1 a {width:300px; height:173px; margin:0 auto 20px auto; background-size:300px; float:none}
	.item2 a {width:300px; height:173px; margin:0 auto 20px auto; background-size:300px; float:none}
	.item3 a {width:300px; height:173px; margin:0 auto 20px auto; background-size:300px; float:none}
	.item1 a:hover, .item2 a:hover, .item3 a:hover {background-position:left -173px}
	
	.logo1 a, .logo3 a {width:140px; height:140px; margin:0 20px 20px 0; background-size:140px}
	.logo2 a, .logo4 a {width:140px; height:140px; margin:0 0 20px 0; background-size:140px}
	.logo5 a {display:none}
	.logo1 a:hover, .logo2 a:hover, .logo3 a:hover, .logo4 a:hover, .logo5 a:hover {background-position:left -140px}

	/* Check size */
	.s479 {display:block} 

}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (min--moz-device-pixel-ratio: 1.5), 
only screen and (min-resolution: 240dpi) {


}