html { 	padding: 0;	margin: 0;}
body {	padding: 0;	margin: 0;	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 	font-size: 12px; background:#fff;}
img {border: 0;}

ul, ol, li, dl, dt, dd { list-style-type: none; margin: 0; padding: 0; }
a { text-decoration: none; }
h1,h2,h3,h4,h5,h6 {padding: 0; margin: 0;}
form,fieldset,label,input {padding: 0;margin: 0;}
fieldset {border: 0;}
p {	margin: 0 0;	line-height:18px; padding: 0 0 12px 0;}
nav{    display: block;}

#contenidos {clear: both; width: 960px; margin: 0 auto; position: relative;}
#contenidos h2 {padding: 30px 0 0 0px;font-size: 36px; color: #3f9199;font-weight: normal;}

#top-sitio {clear: both;height: 100px;background: #fff;position: fixed;z-index: 900;width: 100%;}
.fondo {background: #f2f2f2;padding-bottom: 50px;}

#bordetop {	background-image: url(../img/puerto_encuentro_lineatop.jpg);	background-repeat: repeat;	height: 5px;	width: 100%;	bottom: 0px;	position: absolute;}
#contenidos .topizq {display: inline-block;float: left;}
#contenidos .topizq h1 a {	background-image: url(../img/puerto_encuentro_logotop.jpg);background-repeat: no-repeat;float: left;height: 75px;width: 242px;text-indent: -9000px;position: absolute;z-index: 999;top: 11px;}
#contenidos .topder {float: right;margin-top: 40px;}
#cuerpo-sitio-top {	border-bottom: 4px solid #b6aa9c;}
#cuerpo-sitio p { font-size:14px; }

.fotoportada {float: left;padding-right: 15px;}

/*----- Menu --------- */
/* Nuestro nav con id #menu lo flotaremos a la derecha*/
#menu{float: right;}   
/* Quitamos estilos por defecto de el tag UL */
#menu ul{list-style-type: none;margin: 0 auto;z-index: 998;}
/* Centramos y ponemos los textos en mayuscula */
#menu li{display: block; float: left; height: 15px;    list-style: none;    position: relative}
/* Damos estilo a nuestros enlaces */
#menu li a{display: block; color: #000;    display: block;  font-size: 14px;    line-height: 15px;    padding: 0 13px;   text-decoration: none;}
#menu li a:hover{color: #439299;}
/* Estilos #nav-mobile y lo ocultamos */
#nav-mobile{display: none;background: url(../img/nav.png) no-repeat center center;float: right;width: 60px;height: 60px;position: absolute;right: 0;top:0;opacity: .6;}   
/* Agregaremos esta clase a #nav-mobile, cuando el menu mobile haya sido desplegado */
#nav-mobile.nav-active{opacity: 1;}
/* fin menu del sitio */

.margen100 {height: 100px;}

.slider {float: left;display: block;height: 436px;overflow: hidden;width: 100%;background-image: url(../img/loader.gif);background-repeat: no-repeat;background-position: center center;margin-top: 100px;}
.slider img {height:436px}
.navizq { left: 15px; z-index: 196; position: absolute; top: 320px;}
.navder { z-index: 196; position: absolute; top: 320px; right: 15px;}
.navizq #prev2 {	background-image: url(../img/arrows.png);	background-position: 0px 0px; height: 48px; width: 48px; display: block;}
.navder #next2 {	background-image: url(../img/arrows.png);	background-position: -48px 0px;  height: 48px;	width: 48px;	display: block;	}
.nav {	width: 984px;position: absolute;top: 165px;z-index: 999;left: -10px;}
.navder #next2:hover{	background-position: -48px -48px;}
.navizq #prev2:hover{	background-position: 0px -48px;}
.navder span {	display: none;}
.navizq span {	display: none;}
.padding {padding: 40px;}
.clear {display: inline-block;width: 100%;}

.paddingdeptos {padding: 20px 0 20px 0;}
.paddingdeptos h3 {font-size: 22px;margin: 10px 0 0 0;}
.paddingdeptos span { font-size:16px;}
.paraspam {margin: 0 0 20px 0;display: inline-block;}

.mapaubicacion {border-top: 1px solid #b6aa9c;margin-top: 30px; border-bottom: 1px solid #b6aa9c;margin-top: 30px;}
.mapaubicacion iframe {width:100%; height:487px; frameborder:0; scrolling:no; marginheight:0; marginwidth:0;}

/* formulario de contacto */
#datoscontacto {display: inline-block;float: left;width: 400px;}
#datoscontacto li {font-size: 16px;margin-bottom: 10px;}
#datoscontacto li span{color: #b6aa9c;}
#formulario {display: inline-block;float: left;width: 550px;}
form .imput {font-size: 14px;background-color: #fff;width: 95%;border: 1px solid #e7e3da;padding: 12px;margin-bottom: 5px;}
form .imputsmall {font-size: 14px;background-color: #fff;width: 26%;border: 1px solid #e7e3da;padding: 12px;margin-bottom: 5px; margin-right:11px;}
form .imputsmall2 {font-size: 14px;background-color: #fff;width: 28%;border: 1px solid #e7e3da;padding: 12px;margin-bottom: 5px;}
form .captcha {    width: 28%;
    display: inline-block;
    position: relative;
}
form .imgcaptcha {
    width: 100%;
    top: -23px;
    position: absolute;
    left: 15px;
}
.largo {width: 215px;margin: 12px auto;}
.corte { width:100%; height:25px;float: left;}
p {margin: 0;	padding: 0;	font-family: Verdana, Geneva, sans-serif;text-align: justify;}
.alerta {border: 1px solid #b6aa9c;padding: 10px;margin: 10px 40px 30px 0px;background: #fcfbef;}
.botones{
background-image: linear-gradient(bottom, rgb(239,239,239) 12%, rgb(255,255,255) 78%);
background-image: -o-linear-gradient(bottom, rgb(239,239,239) 12%, rgb(255,255,255) 78%);
background-image: -moz-linear-gradient(bottom, rgb(239,239,239) 12%, rgb(255,255,255) 78%);
background-image: -webkit-linear-gradient(bottom, rgb(239,239,239) 12%, rgb(255,255,255) 78%);
background-image: -ms-linear-gradient(bottom, rgb(239,239,239) 12%, rgb(255,255,255) 78%);
background-image: -webkit-gradient(	linear,	left bottom,	left top,	color-stop(0.12, rgb(239,239,239)),	color-stop(0.78, rgb(255,255,255))); border-radius:4px;border: 1px solid #cbcbcb;padding: 15px 60px;font-weight: bold;cursor: pointer; color: #333333;display: inline-block;}
.botones:hover { box-shadow: #ccc 0.0em 0.0em 0.6em }
.respuesta p {text-align: center;color: #2E7E0E;}
#form .respuesta {margin-top: 30px;}
/* formulario de contacto 


#gallery {padding: 7px;} */
#gallery li {display: inline-block;padding: 8px;margin-bottom: 4px;border-radius: 3px;background: #DDD;}
#gallery li:hover {background: #b6aa9c;}

#pie-sitio {clear: both;margin: 0 auto;padding: 40px 0;background: #efefef;border-top: 3px solid #000; }
#terra-virtual {	clear: both;	width: 100%;	margin-right: auto;	margin-bottom: 0px;	margin-left: auto;	margin-top: 20px;	text-align: center;	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 9px;	color: #FFFFFF;display: inline-block;}
#terra-virtual a {	color: #999;}
#terra-virtual a:hover {	color: #99CC00;}

.pie-izq {text-align: left; width: 70%; color: #000; font-size: 16px; float: left;}

.pie-der {float: right; width: 20%; margin-right: 10px;}

/*  #Mobile (Portrait) ================================================== */	 
  @media only screen and (max-width: 768px){
	 
	 #contenidos {width: 90%;}
	 #contenidos .topder {width: 100%;} 
	 .slider { height: 236px;}
	 .slider img {height:236px}
	 .navizq, .navder { top: 180px;}
	 .padding {padding: 20px;}
	 .mapaubicacion iframe {width:100%; height:287px; frameborder:0; scrolling:no; marginheight:0; marginwidth:0;}
	 #datoscontacto { width: 48%;}
	 #formulario { width: 50%;}
	 form .imputsmall {width: 95%;}
	 form .imputsmall2 {width: 95%;}


	 
	  /* mostramos #nav-mobile */
    #nav-mobile{ display: block; }

    /* Fijamos nuestro nav en 100% ancho y dejamos de flotarlo  */
    #menu{
        width: 100%;
        float: none;
        padding-top: 60px;
    }
        /* Convertimos nuestra lista de enlaces en un menú horizontal */
        #menu ul{
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
            box-shadow: 0 1px 2px rgba(0,0,0,.5);
            max-height: 0;
            overflow: hidden;
        }
            /* estilos para los LI del menu */
            #menu li{
                background: #33363b;
                border-bottom: 1px solid #282b30;
                height: 35px;
				width: 50%;
				text-align: center;
				color: #fff;
            }

            /* Quitamos el borde del ultimo item del menú #menu li:last-child{ border-bottom: 0;} */
            
                #menu li a{
                    padding: 10px 0;
                    height: auto;
                    line-height: normal;
					color: #fff;
                }
                #menu li a:hover{background:#2a2d33}

        /* Agregamos una animación al despligue del menú */
        #menu ul.open-menu{
            max-height: 400px;
            -webkit-transition: max-height .4s;
            -moz-transition: max-height .4s;
            -ms-transition: max-height .4s;
            -o-transition: max-height .4s;
            transition: max-height .4s;
        }
	 
 }
 
 @media only screen and (min-width: 210px) and (max-width: 480px){
	 
	 #contenidos {width: 90%;}
	 #contenidos .topder {width: 100%;}
	 #contenidos h2 {font-size: 28px;}
	 .paddingdeptos h3 {font-size: 18px;}
	 .paddingdeptos span {font-size: 12px;}
	/* #gallery, .margen100, .pie-der {display:none;} */
	 .slider { height: 136px;}
	 .slider img {height:136px}
	 .navizq, .navder { top: 136px;}
	 .padding {padding: 10px;}
	 .mapaubicacion iframe {width:100%; height:250px; frameborder:0; scrolling:no; marginheight:0; marginwidth:0;}
	 #datoscontacto { width: 100%;}
	 #datoscontacto li {font-size: 14px;}
	 #formulario { width: 100%;}
	 form .imputsmall {width: 95%;}
	 form .imputsmall2 {width: 95%;}
	 .alerta {margin: 20px 0px;}
	 .pie-izq {width: 100%;}
	 form .captcha { width: 100%;}
form .imgcaptcha {
    width: 70%;
    top: 0;
    position: relative;
    left: 50px;
    margin-bottom: 7px;
}
	 /* mostramos #nav-mobile */
    #nav-mobile{ display: block; }

    /* Fijamos nuestro nav en 100% ancho y dejamos de flotarlo  */
    #menu{
        width: 100%;
        float: none;
        padding-top: 60px;
    }
	
        /* Convertimos nuestra lista de enlaces en un menú horizontal */
        #menu ul{
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
            box-shadow: 0 1px 2px rgba(0,0,0,.5);
            max-height: 0;
            overflow: hidden;
        }
            /* estilos para los LI del menu */
            #menu li{
                background: #33363b;
                border-bottom: 1px solid #282b30;
                height: 35px;
				width: 50%;
				text-align: center;
				color: #fff;
            }

            /* Quitamos el borde del ultimo item del menú #menu li:last-child{ border-bottom: 0;}*/
            
                #menu li a{
                    padding: 10px 0;
                    height: auto;
                    line-height: normal;
                }
                #menu li a:hover{background:#2a2d33}

        /* Agregamos una animación al despligue del menú */
        #menu ul.open-menu{
            max-height: 400px;
            -webkit-transition: max-height .4s;
            -moz-transition: max-height .4s;
            -ms-transition: max-height .4s;
            -o-transition: max-height .4s;
            transition: max-height .4s;
        }
 }