@import url(http://fonts.googleapis.com/css?family=Tinos:400,700);
@import url(http://fonts.googleapis.com/css?family=Lato:400,700,900);

@CHARSET "ISO-8859-1";

/* Reset CSS
 * --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
a{
	text-decoration:none;
}
table {
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
strong{
	font-weight: bold;
}
ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption,th {
    text-align: left;

}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
    margin:0;
    padding:0;
    color:#444;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border: 0;
}


/*Miguel's fucking work */

#rot{
	display: none;
	z-index: 99;
	color: #ffffff;
	background-color: rgba(0, 0, 0, 0.85);
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	padding: 35px 50px 50px 35px;
		
}

#rot p{
	width: 60%;
	text-align: center;
	color: #ffffff;
	font-size: 24px;
		
}

/* Landscape Bloqueo */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
#rot{
	display: block;
		
}
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
#rot{
	display: block;
		
}
}

@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
#rot{
	display: block;
		
}
}


@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: landscape) {
  #rot{
	display: block;
}
}

@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
#rot{
	display: block;
}
}

@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
#rot{
	display: block;
}
}

/* Custom CSS
 * --------------------------------------- */
body{
	font-family: arial,helvetica;
	color: #333;
	color: rgba(0,0,0,0.5);
}
.wrap{
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	position: relative;
}
h1{
	font-size: 5em;
		font-family: arial,helvetica;
		color: #000000;
		margin:0;
		padding:0;
}

h1 span{
	font-weight:bold; 
	color:red;
	text-align:center;
	}

h2{
	font-size: 2em;
		max-width:500px;
		margin: 20px auto;
		font-family: 'Tinos', serif;
		color:#000000;
		text-align: center;
}


p{
	font-size: 16px;
		font-family: 'Lato', sans-serif;
		color:#000000;
		text-align: justify;
		width:500px;
		margin:20px auto;
		font-weight:700;
		line-height: 28px;
		
	
}




.section{
		background-size: cover;
	}
	.slide{
		background-size: cover;
	}
	
	
	

	/* Defining each section background and styles
	* --------------------------------------- */
	#section0{
		background-image: url(../img/bg1.jpg);
		padding: 10% 0 0 0;
	}
	
	#section0 p{
		text-shadow: 1px 0px 0px rgb(202, 202, 202);
	}
	
		
	#section1{
		background-image: url(../img/bg2.jpg);
		background-color:#ffffff;
		padding: 10% 0 0 0;
	}
	
	#section1 h1{color:#ffffff;}
	#section1 h2{color:#ffffff;}
	#section1 p{color:#ffffff;}
	
	#section2{
		background-image: url(../img/bg3.jpg);
		padding: 10% 0 0 0;
	}
	

	#section2.logo{background-image: url("../img/twopdk-w.png");
	}
	#section3{
		background-image: url(../img/bg4.jpg);
		padding: 10% 0 0 0;
	}
	
	
	#section4{
		background-image: url(../img/bg5.jpg);
		padding: 10% 0 0 0;
	}
	
	#section5{
		background-image: url(../img/bg6.jpg);
		padding: 10% 0 0 0;
	}
	
	#section5 h1{color:#ffffff;}
	#section5 h2{color:#ffffff;}
	#section5 p{color:#ffffff;}
	
	#section6{
		background-color:#ffffff;;
		padding: 10% 0 0 0;
	}


#section6 p{
		text-align: center;
		font-size: 20px;
	}

#section6 a{
		color: #000000;
		text-decoration: none;
	}

.intro p{
	width: 50%;
	margin: 0 auto;
	font-size: 1.5em;
}
.section{
	text-align:center;
}
#menu li {
	display:list-item;
	margin: 0px;
	color: #000;
	background:#fff;
	background: rgba(255,255,255, 0.5);
	-webkit-border-radius: 0px;
            border-radius: 0px;
}
#menu li.active{
	background:#666;
	background: rgba(0,0,0, 0.5);
	color: #fff;
	font-weight:bold;
}
#menu li a{
	text-decoration:none;
	color: #000;
}
#menu li.active a:hover{
	color: #000;
}
#menu li:hover{
	background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
	padding: 9px 18px;
	display:block;
}
#menu li.active a{
	color: #fff;
}
#menu{
	position:fixed;
	top:112px;
	left:10px;
	height: 40px;
	z-index: 70;
	font-size:12px;
	width: 150px;
	padding: 0;
	margin:0;
}

#logo{
	
	position: fixed;
	width: 160px;
	height: 102px;
	top: 10px;
	left: 7px;
	z-index: 80;
	background-image: url("../img/twopdk.png");
	
}

#logoh{width:330px; margin: auto;}

#success{color: rgb(0, 0, 0); 
	font-family: Tinos; 
	font-size: 47px; 
	padding-top:6px; 
	text-align: center; 
	width: 70px; 
	height: 70px; 
	background-image: url(../img/succes.png); 
	margin:50px auto; 
	background-repeat: no-repeat;
	}


@media screen and (max-width: 768px) {
#menu{ 
	display:none;
	}
	
#logo{
	width: 100%;
	background-position: center top;
	left: auto;
	background-repeat: no-repeat;
	margin-top: -55px;
	background-image: url("../img/twopdk2.png");
		
	}	
	
.section{
		background-position: center top;
	}
	
	
}	


@media screen and (max-width: 501px) {
	
p {
	width:90%;
	font-size: 14px;
	margin: 10px auto;
	line-height: 18px;
		}	

#section0{padding-top: 20%}
#section1{padding-top: 20%}
#section2{padding-top: 20%}
#section3{padding-top: 20%}
#section4{padding-top: 20%}
#section5{padding-top: 20%}
#section6{padding-top: 20%}

#logoh{width:200px;}

#success{color: rgb(0, 0, 0); 
	margin:10px auto 20px;
	font-size: 23px; 
	padding-top:3px; 
	text-align: center; 
	width: 35px; 
	height: 35px; 
	background-image: url(../img/succes-2.png);  
	
	}

h1{
	font-size: 34px;
}

h2{
	font-size: 24px;
	width: 90%;
	margin: 10px auto;
	}
	
	
.slide h2{font-size: 14px!important; line-height:16px; margin-top:-25px}	
.slide p{font-size: 8px; line-height: 14px;}	

}	


#lan a{
	font-family: 'Lato', sans-serif;
	z-index: 80;
	color: red;
	text-decoration: none;
	font-size: 14px;
	position: fixed;
	top:20px;
	right: 10px;
	height: 
}

#lan a:hover{
	font-weight: bold;
	}

/* Para portatil */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
  #section4{padding: 3% 0 0 0;}


#success{
	margin:15px auto; 
}

	#section5{
		padding: 5% 0 0 0;
	}


}


 @media screen and (-webkit-min-device-pixel-ratio: 1.3), screen and (min--moz-device-pixel-ratio: 1.3), screen and (-o-min-device-pixel-ratio: 2 / 1), screen and (min-device-pixel-ratio: 1.3), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
  #logo {
    background-image: url("../img/twopdk2-retina.png");
    -webkit-background-size: 160px 102px;
    -moz-background-size: 160px 102px;
    -o-background-size: 160px 102px;
    background-size: 160px 102px;
  }
}