@charset "utf-8";
@font-face {
    font-family: 'Calibri Light';
    src: url('calibril.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
#preloader {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #E5E5E5; /* change if the mask should have another color then white */
	z-index: 99999; /* makes sure it stays on top */
}
#status {
	width: 200px;
	height: 200px;
	position: absolute;
	left: 50%; /* centers the loading animation horizontally one the screen */
	top: 50%; /* centers the loading animation vertically one the screen */
	background-image: url(../images/preloading.gif); /* path to your loading animation */
	background-repeat: no-repeat;
	background-position: center;
	margin: -100px 0 0 -100px; /* is width and height divided by two */
}

#preloaderIntro {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #E5E5E5; /* change if the mask should have another color then white */
	z-index: 99999; /* makes sure it stays on top */
}
#statusIntro {
	width: 100%;
	height: 600px;
	opacity:0;
	cursor:pointer;
	position: absolute;*/
	margin: 5% auto;
	/*left: 50%;  centers the loading animation horizontally one the screen */
	/*top: 20%; /* centers the loading animation vertically one the screen */
	/*background-image: url(../images/intro.jpg); /* path to your loading animation */
	background-repeat: no-repeat;*/
	background-position: center;
	margin: -100px 0 0 -100px;  is width and height divided by two */
}

#preloaderIndex {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #E5E5E5; /* change if the mask should have another color then white */
	z-index: 9998; /* makes sure it stays on top */
}
#statusIndex {
	width: 919px;
	height: 749px;
	position: absolute;
	left: 50%; /* centers the loading animation horizontally one the screen */
	top: 50%; /* centers the loading animation vertically one the screen */
	background-image: url(../images/intro.jpg); /* path to your loading animation */
	background-repeat: no-repeat;
	background-position: center;
	margin: -100px 0 0 -100px; /* is width and height divided by two */
}

#preloaderGal {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #E5E5E5; /* change if the mask should have another color then white */
	z-index: 99999; /* makes sure it stays on top */
}
#statusGal {
	width: 200px;
	height: 200px;
	position: absolute;
	left: 50%; /* centers the loading animation horizontally one the screen */
	top: 50%; /* centers the loading animation vertically one the screen */
	background-image: url(../images/preloading.gif); /* path to your loading animation */
	background-repeat: no-repeat;
	background-position: center;
	margin: -100px 0 0 -100px; /* is width and height divided by two */
}

/* musica */
.b-music {
    background:none;
    color:#fff;
    padding:2px;
}
*:focus {
	outline:none !important;
}
/**/

#galleria{ width: 100%; height: 720px; }

/*-------------------------promociones---------------------*/
#pestana {
	display:block;
	height:25px;
	color:#FFF;
	padding:15px;
	z-index:10000;
	cursor:pointer;
	-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: tb-rl;
	position:absolute;
	left:-105px;
	top:250px;
}
#pestana h2{
	color:#FFF;
	font-size:2.1em;
    writing-mode: tb-rl;
	font-family: "le-havre",sans-serif;
}
#promociones{
	position:absolute;
	top:15%;
	left:40px;
	width:270px;
	height:auto;
	padding-bottom:5px;
	z-index:10000;
	/*background:#fff;*/
}
#promociones h2{
	display:block;
	/*background:#b3b3b3;*/
	color:#FFF;
	font-size:24px;
	padding:5px 0 5px 15px;
	font-family: "le-havre",sans-serif;
}
#promociones p{
	text-align:left;
	margin:5px 15px;
	color:#fff;
}
#promociones ol {
	list-style:upper-latin;
	text-align:left;
	margin:10px 0 0 0;
}
#promociones ol li {
	margin:0 0 5px 35px;
	color:#fff;
}
/*********************************************************/
body {
	/*background: url(../images/bg-body.png) repeat #333;overflow:hidden;*/
}
body { color:#6B6356;}

h1 {
	font-weight: 500;
	font-size: 3.8em;
	color: #FFF;
	text-align: left;
	margin-bottom: 20px;
	font-family: "le-havre",sans-serif;
	font-weight:100;
}

h2 {
	text-align: left;
	font-size: 1.5em !important;
	color: #FFF;
	font-family: "museo-sans-condensed",sans-serif;
}
h3 {
	font-weight: 500;
	font-size: 3.8em;
	color: #FFF;
	text-align: left;
	margin-bottom: 20px;
	font-family: "le-havre",sans-serif;
	font-weight:100;
}


/*///////////////////// Galería tipo masonry)/////////////////////*/
/* ==|== primary styles =====================================================
   Author: Luke Shumard (lukeshumard.com)
   ========================================================================== */

#content {
	/*width: 980px;*/
	/*width: 95%;*/
	width: auto;
	margin: 0 auto;
}
.item {
	display: block;
	float: left;
	width: 250px;
	margin: 0 20px 20px 0;
	transition: left .4s ease-in-out, top .4s ease-in-out .4s;
	-o-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
	-ms-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
	-moz-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
	-webkit-transition: left .4s ease-in-out, top .4s ease-in-out .4s;
}
.item img {
	width: 250px;
	height: auto;
}
.featured {
	width: 450px;
}
.featured img {
	width: 450px;
	height: auto;
}
.featured2 {
	width: 670px;
}
.featured2 img {
	width: 670px;
	height: auto;
}
.featured3 {
	width: 370px;
}
.featured3 img {
	width: 370px;
	height: auto;
}
.offset {
	margin-left:77px;
}
.offset2 {
	margin-left:-77px;
}
img {
	border: 0;
	-ms-interpolation-mode: bicubic;
	vertical-align: middle;
}
/******************************************************************/

/*
/////////////////////// Sello de la constructora ///////////////////////
*/
#contenedorSello {
	position: fixed;
	top: 60px;
	right: 2.5%;
	z-index: 10;
	width: 85px;
}
/*******************************************************************/

/*
/////////////////////// Menú principal Morroscity ////////////////////////
*/
#main-nav.morroscity {
	height: 60px;
	width: 100%;
	position: fixed;
	margin: 0 0 3px 0;
	z-index: 9999;
}
#main-nav.morroscity #pestana-menu {
	display:none;
}
#main-nav.morroscity #second-menu {
	display:none;
}
#main-nav.morroscity #main-menu {
    width: auto;
    float:right;
}
#main-nav.morroscity #main-menu #items {
	float: right;
	margin-top: 18px;
	z-index: 9999;
}
#main-nav.morroscity #main-menu #items li {
	float: left;
	padding: 0 4px;
	margin: 0;
	z-index: 9999;
}
#main-nav.morroscity #main-menu #items li a {
	font-size:2.3em;
	color:#FFF;
	font-family: "le-havre",sans-serif;
	font-weight:100;
}
#main-nav.morroscity #main-menu #items li a:hover {
	color: #999;
}
#main-nav.morroscity #main-menu #items li a.activo {
	color: #999;
}
#main-nav.morroscity #main-menu #items li a.off {
}
#main-nav.morroscity #logo {
	background-image: url(../images/logo_morroscity.png);
	height: 60px;
	width: 152px;
	float: left;
	margin: 0 0 0 20px;
	z-index: 9999;
}
#main-nav.morroscity #logoNegro {
	background-image: url(../images/logo_morroscity_negro.png);
	height: 60px;
	width: 152px;
	float: left;
	margin: 0 0 0 20px;
	z-index: 9999;
}
@media only screen and (max-width: 1180px) {
	#main-nav.morroscity {
		position:static;
	}
	#main-nav.morroscity #logo, #main-nav.morroscity #logoNegro {
		margin: 0 0 0 40%;
		position:relative;
	}
	#main-nav.morroscity #pestana-menu {
		display:block;
		position:absolute;
		float:left;
		margin: 25px 0 0 55px;
    	font-size:1.6em;
    	color:#FFF;
    	font-family: "le-havre",sans-serif;
		cursor:pointer;
		font-weight: 100;
		text-transform: uppercase;
	}
	#main-nav.morroscity #second-menu {
	   position:absolute;
        margin:85px 0 0 -260px;
    	display:block;
    	font-size:2.5em;
    	font-family: "le-havre",sans-serif;
		font-weight:100;
	}
	#main-nav.morroscity #second-menu #items a:hover {
	   color:#999;
	}
	#main-nav.morroscity #main-menu #items {
		margin-right: 8%;
		display:none;
	}
}
/*******************************************************************/




/*
/////////////////////// Header ////////////////////////
*/
section#principal {
	width: 100%;
	height: 90%;
	margin: 60px auto;
	float: right;
	overflow: auto;
	/*position: absolute*/
}
section #header {
	margin: 8% 0 0 35%;
	float: left;
	top: 160px;
	width: auto;
	text-align: left;
}
/**************************************************************/



/*
/////////////////////// Estilos sección ////////////////////////
*/
#principal p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #FFF;
	text-align: justify;
	line-height: 1.8em;
	margin-bottom: 2em;
}
#principal #fotos {
	float: left;
	position: fixed;
	margin: 10% 0 0 0;
	right: 43%;
}
#principal #fotos img {
	margin: 0 0 15px 0;
}
#principal #articulo {
	width: 30%;
	margin: 5% 5% 0 60%;
	padding: 20px;
	float: left;
}
#principal #articulo.firma {
	width: 35%;
	margin: 5% 0 0 55%;}
#principal .articuloLeft {
	float: right !important;
	margin: 5% 60% 0 5% !important;
}

#principal #articulo img {
	float: left;
	position: absolute;
	left: 43%;
}
#principal #articulo.firma img {
	float: left;
	position: absolute;
	left: 30%;
}
section #bg-parke {
	background: url(../images/bg_parke.png)center top;
	margin: 10% 0 0 60%;
	float: left;
	width: 521px;
	height: 471px;
}
section #bg-disenos {
	background: url(../images/bg_creadores.png)center top;
	margin: 6% 0 0 46%;
	float: left;
	width: 700px;
	height: 909px;
}
section #bg-planos {
	background: url(../images/bg_planos.png)center top;
	margin: 6% auto 0 auto;
	width: 1009px;
	height: 579px;
}
section #contenidoFullWidth {
	/*background: url(../images/bg_contacto.png)center top;*/
	margin: 8% auto 0 auto;
	width: 65%;
}
section #bg-ubicacion {
	background: url(../images/mapa-ubicacion-grande.jpg)center top;
	margin: 8% auto 0 auto;
	width: 940px;
	height: 468px;
}
#principal.mapa {
	width: 100%;
	height: 100%;
	margin-top:0 !important;
}
section #ubicacionMorros {
	overflow:hidden;
	width: 100%;
	height: 100%;
}
section #ubicacionMorros #mapa{
	margin:0 auto;
	width: 2266px;
	height: 1695px;
}

.puerto h2 {
	min-width:30px;
	margin:0 10px 0 0;
	padding:0 5px 0 0;
	border-right:1px solid #FFF;
}
/**************************************************************************/





/*
////////////////////////////// Planos ////////////////////////////////
*/
.conten-medio {
	width: 960px;
	margin: 70px auto 0 auto !important;
	display: block;
	position: relative;
}
.content-edf2 {
	width: 263px;
	padding: 30px;
	float: left;
}
.content-edf {
	width: 263px;
	margin: auto;
	padding: 30px;
	background: #0F0;
}
#content-apto-a {
	width: 600px;
	height: 451px;
	position: absolute;
}
#content-apto-a1 {
	width: 600px;
	height: 451px;
	position: absolute;
}
#content-apto-b {
	width: 600px;
	height: 451px;
	opacity: 0.8;
	position: absolute;
}
#content-apto-c {
	width: 600px;
	height: 451px;
	opacity: 0.8;
	position: absolute;
}
#content-apto-d {
	width: 600px;
	height: 451px;
	opacity: 0.8;
	position: absolute;
}
#content-apto-f {
	width: 600px;
	height: 451px;
	opacity: 0.8;
	position: absolute;
}
#vendido {
	width: 600px;
	height: 451px;
	position: absolute;
}
.apto-d-img {
	width: 100%;
	height: 100px;
	margin-top: 30px;
}
.apto-d-img .item {
	float: left;
	margin-left: 42px;
	margin-top: 5px;
	width: 171px;
	height: 79px;
}
.apto-d-img .item#primera {
	margin-left: 2px;
}
.claer {
	clear: both;
}

#tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #404040;
	background-color: #FFF;
	padding: 5px;
	color: #595348;
	opacity: 0.85;
	filter: alpha(opacity=85);
}
#tooltip h3, #tooltip div {
	margin: 0;
	font-size: 12px;
	color: #6B6356;
}
#tooltip p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #6B6356;
}
.instrucciones {
	font-size: 11px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	color: #E2E2E2;
	margin-bottom: 7px;
}
.mensaje-fin {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-align: center;
	width: 300px;
	margin: auto;
	height: 70px;
	padding: 40px 30px 20px 30px;
	margin-top: 80px;
}
.mensaje-fin .title {
	font-size: 20px;
	padding: 0;
	margin: 0;
}
.aptos {
	background: #262626;
	position: absolute;
	top: 0;
	left: 0;
	width: 600px;
	height: 451px;
}
.mano {
	background: url("../images/mano.png");
	position: absolute;
	top: 26px;
	left: 132px;
	width: 142px;
	height: 46px;
	z-index: 10;
}
#content-planos {
	width: 600px;
	height: 451px;
	float: left;
	margin: 60px auto;
	padding-left:30px;
	position: relative;
	opacity:0.85;
}
/*
////////////////////////////// Vistas ///////////////////////////////
*/

/*#page {
	text-align: center;
	color: white;
}
#page a {
	color: white;
}*/

.page .panorama-viewport {
	padding-top: 90px;
	margin-left: auto;
	margin-right: auto;
}
section #thumbs {
	margin: 25px auto;
	width: 700px;
}
#thumbs table tr td img {
	padding: 5px;
}
/*
////////////////////////// Formulario /////////////////////////////
*/
form {
	margin: 100px 0 0 0;
}
input[type="submit"], input {
	margin: 0;
	padding-bottom: 0px !important;
}
form table tr td {
	height: 62px !important;
	width: 33%;
	vertical-align: bottom !important;
}
form table tr td textarea,
form table tr td input {
	width: 80%;
	height: 32px;
	float: left;
	background: #FFF;
	font-family: 'DINFont', arial, sans-serif;
	padding: 0 0 0 8px;
	font-size: 1.2em !important;
	line-height: 1.2em !important;
}
form table tr td textarea {
	padding-top: 5px;
	width: 90%;
	margin: -32px 0 0 0;
	height: 88px;
}
form table tr td input#enviar {
	width: 93%;
	text-align: center;
	background: #666 !important;
	color: #FFF;
	text-decoration: none;
	padding-bottom: 0px !important;
	margin-bottom: 0px !important;
	cursor:pointer;
}
form table p {
	font-size: 1.3em !important;
	line-height: 1.4em !important;
	float: left;
}
form img {
	float: right;
}
@media only screen and (max-width: 1050px) {
	section #contenidoFullWidth {
		width: 90%;
	}
}
/*@media only screen and (max-width: 909px) {
	#principal #articulo {
		width: 60%;
	}
	#principal .articuloLeft {
		float: left !important;
		margin: 0 0 0 10% !important;
	}
	#principal #articulo img {
		position:aboslute;
		right:3%;
		left:auto !important;
		display:block;
	}
}*/
@media only screen and (max-width: 1000px) {/*813*/
	h1 {
		font-size: 2.8em;
	}
	#principal .articuloLeft {
		float: left !important;
		margin: 0 0 0 10% !important;
	}
	#principal #articulo { 
		width: 45%;
		margin: 5% 5% 0 50%;
	}
	#principal #articulo img {
		position:static !important;
		right:auto;
		margin:0 10px 10px 0;
		left:auto !important;
		/*margin:20px 50px 10px 0;*/
		display:inline-block;
	}
}