@CHARSET "UTF-8";

html { }
body {
	font-family: 'Raleway', Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 21px;
	height: 100%;
	color: #787E87;
	margin: 0;
	padding: 0;
	background-color: #FFFFFF;
	background-image: url(img/mapamonde.jpg)
	background-repeat: repeat;
	background-position: center;
}

a {
	color: #1B2B5F;
	text-decoration: none;
	outline: none;
	border: none;
	font-weight: 700;
}
a:hover {
	text-decoration: underline;
	color: #FFFFFF;
	font-weight: 700;
}
a img {outline: none; border: 0; }

#Wrapper
 {
	width: 1200px;
	margin: 40px auto;
	overflow: hidden;
	text-align: left;
	color: #009999;
	font-size: 16px;
	margin-right: auto;
	margin-left: auto;
	background-color: #F5F6F8;
	height: auto;
	width: 1170px;
	-moz-box-shadow: 0px 10px 10px #CCC;
	-webkit-box-shadow: 0px 10px 10px #CCC;
	box-shadow: 0px 10px 11px 0px #000;
	border-bottom-width: 6px;
	border-bottom-style: solid;
	border-bottom-color: #FA9B23;
	background-image: url(img/mapamonde.jpg);
	font-weight: 900;
 }
#logo {
	background: url("img/logo.png") no-repeat;
	width: 600px;
	height: 60px;
	display: block;
	overflow: hidden;
	text-indent: -9999px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
}

h1 { margin:0;}
h2 {
	text-align: center;
	margin-bottom: 40px;
	font-size: 36px;
	line-height: 25px;
	font-weight: 700;
}
h3 {
	text-align: center;
	margin-bottom: 23px;
	font-size: 28px;
	line-height: 22px;
	color: #009999;
	margin: 5px 0 0;
	font-weight: 800;
}
.item:hover h3 {
	color: #009999;
	font-weight: bold;
}

p {
	text-align: center;
	color: #1B2B5F;
}
p span { color:#222;}
p.description { padding:10px; border-top:1px solid rgba(0,0,0,.1); font-size:130%;}

img.scale-with-grid {
	max-width: 100%;
	height: auto;
}

.items {
	overflow: hidden;
	margin-bottom: 20px;
	margin-top: 20px;
}
.items .item { width: 30%; margin:0 1.5%; float: left; position: relative; }
.items .item .desktop { position: absolute; left: 43px; top: 11px; width: 274px; height: 173px; overflow: hidden; }
.items .item .desktop .inside { position: absolute; left: 0px; width: 100%; line-height: 0; }

.items .item .desktop .inside {   
  -webkit-transition-duration: 2s;
     -moz-transition-duration: 2s;
      -ms-transition-duration: 2s;
       -o-transition-duration: 2s;
          transition-duration: 2s;
}
.items .item-1 a:hover .desktop .inside { margin-top:-396px;}
.items .item-2 a:hover .desktop .inside { margin-top:-416px;}
.items .item-3 a:hover .desktop .inside { margin-top:-490px;}

@media only screen and (min-width: 960px) and (max-width: 1239px) {
	#Wrapper { width: 920px;}
	.items .item .desktop { position: absolute; left: 33px; top: 9px; width: 210px; height: 131px; }
	.items .item-1 a:hover .desktop .inside { margin-top:-305px;}
	.items .item-2 a:hover .desktop .inside { margin-top:-320px;}
	.items .item-3 a:hover .desktop .inside { margin-top:-376px;}
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
	#Wrapper {
	width: 760px;
}
	.items .item .desktop { position: absolute; left: 27px; top: 7px; width: 174px; height: 109px; }
	.items .item-1 a:hover .desktop .inside { margin-top:-252px;}
	.items .item-2 a:hover .desktop .inside { margin-top:-265px;}
	.items .item-3 a:hover .desktop .inside { margin-top:-310px;}
}

@media only screen and (max-width: 767px) {
	#Wrapper { width: 420px; }
	.items .item { width: 100%; margin:0 0 20px; }
	.items .item .desktop { position: absolute; left: 51px; top: 14px; width: 319px; height: 200px; }
	.items .item-1 a:hover .desktop .inside { margin-top:-462px;}
	.items .item-2 a:hover .desktop .inside { margin-top:-485px;}
	.items .item-3 a:hover .desktop .inside { margin-top:-573px;}
}

@media only screen and (max-width: 479px) {
	#Wrapper { width: 300px; }
	.items .item { width: 100%; margin:0 0 20px; }
	.items .item .desktop { position: absolute; left: 36px; top: 10px; width: 228px; height: 143px; }
	.items .item-1 a:hover .desktop .inside { margin-top:-330px;}
	.items .item-2 a:hover .desktop .inside { margin-top:-345px;}
	.items .item-3 a:hover .desktop .inside { margin-top:-409px;}
}
