/*	

	Less+ by Jimmy Rosén, http://www.angrycreative.se/projekt/less-framework
	Based on Less Framework 3 by Joni Korpi, http://lessframework.com
	
*/

/*	Resets
	------	*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
	display: block;
}

a img {border: 0;}

a{
	
	color:#FFFFFF;	
}


#alcatraz a{
	text-decoration:underline;
	color:#FFFFFF;	
}



html,
body
{
  padding: 0;
  margin: 0;
  font-family: Arial, sans-serif;
  	background-color: #110602;
}

/* hide horizontal scrollbars, since we use the vertical ones to scroll to the right 
body
{
	overflow-x: hidden;
	background-color: #110602;
}*/


.consumo {
  bottom: 50px;
  height: 455px;
  left: 0;
  position: fixed;
  width: 40px;
  z-index: 1000;
}

.consumo img{
	width:100%;
	height:auto;
		
}

@font-face {
    font-family: 'oswaldbold';
    src: url('../fonts/oswald-bold-webfont.eot');
    src: url('../fonts/oswald-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/oswald-bold-webfont.woff') format('woff'),
         url('../fonts/oswald-bold-webfont.ttf') format('truetype'),
         url('../fonts/oswald-bold-webfont.svg#oswaldbold') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'oswaldlight';
    src: url('../fonts/oswald-light-webfont.eot');
    src: url('../fonts/oswald-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/oswald-light-webfont.woff') format('woff'),
         url('../fonts/oswald-light-webfont.ttf') format('truetype'),
         url('../fonts/oswald-light-webfont.svg#oswaldlight') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'oswaldregular';
    src: url('../fonts/oswald-regular-webfont.eot');
    src: url('../fonts/oswald-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/oswald-regular-webfont.woff') format('woff'),
         url('../fonts/oswald-regular-webfont.ttf') format('truetype'),
         url('../fonts/oswald-regular-webfont.svg#oswaldregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


h1 {
	color: #2E6E80;
	font-size: 20px;
	font-weight: normal;
  left: 80px;
	position: absolute;
	top: 80px;
  z-index: 5000;
  width: 100%;
  max-width: 300px!important;
}

#menu-videos li {
  height: 25%;
  list-style-type: none;
  position: relative;
}

#menu-videos li figcaption {
  background-color: #F93131;
  color: #FFFFFF;
  display: block;
  font-family: 'oswaldbold';
  font-size: 28px;
  height: 100%;
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 0;
  transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
  width: 100%;
  z-index: 10;
}

#menu-videos li figure{
	background-size:cover;
	
}

#logos img{
	
	width:100%;
	height:auto;
	
}

figcaption h3 {
	
	position: absolute;
	top: 37%;
	font-weight: normal;
	width: 100%;
	text-align:center;
}
.resize {
	height: 100%;
  position: absolute;
	width: 100%;
  /*z-index: 1000;*/
}

#menu-videos ul {
  height: 100%;
  position: relative;
  width: 100%!important;
}


#compartir {
  height: 70px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 120px;
  position: absolute;
  width: 1080px;
  z-index: 100;
  top: 20px;
  left: -404px;
}

#compartir ul {
	width: 130px;
	margin-right: auto;
	margin-left: auto;
}


#compartir li {
	display: block;
	float: left;
	height: 41px;
	width: 41px;
	margin-right: 2px;
}

#logos h5 {
  color: #F93131;
  font-family: 'oswaldregular';
  font-size: 12px;
  font-weight: normal;
  left: 80px;
  position: absolute;
  top: 63px;
  z-index: 10;
}

#compartir p {
  color: #F93131;
  font-family: 'oswaldregular';
  font-size: 11px;
  left: 488px;
  position: absolute;
  top: 104px;
  z-index: 100;
}

.video iframe, .video-dos iframe, .video-tres iframe, .video-cuatro iframe {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0px;
  display: none;
}






section {

  height: 100%;
  position: relative;
  width:100%;
 
}

#home {
  background-image: url("../img/jugamos-al-rugby-y-hacemos-ron.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
  height: 880px;
}


.mouse{
	
	position:fixed;
	right: 20%;
	transition: all 0.6s cubic-bezier(0.785, 0.135, 0.150, 0.860);
}

#hacemos-ron {
	
	background-image: url(../img/hacemos-ron.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
#jugamos {
	
	background-image: url(../img/jugamos-al-rugby.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
#hacienda {	 

	background-image: url(../img/nuestra-hacienda.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
#alcatraz {

	background-image: url(../img/proyecto-alcatraz.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;

}


#menu-videos {
  height: 100%;
  max-width: 335px;
  position: fixed;
  right: 0;
  width: 100%;
  z-index: 1000;
  top: 0;
  transition: all 0.6s cubic-bezier(0.785, 0.135, 0.150, 0.860);
}

#content {
  height: 330px;
  margin-top: 80px;
  position: absolute;
  width: 80%;
  bottom: 12%;
}
#logos h2 {
  margin-left: 80px;
  position: absolute;
  top: 40%;
  transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
  z-index: 5000;
   width: 100%;
  max-width: 250px!important;
}

#content h3 {
  color: #FFFFFF;
  display: block;
  font-family: 'oswaldbold';
  font-size: 46px;
  font-weight: normal;
  line-height: 55px;
  margin-left: 80px;
  position: relative;
  text-transform: uppercase;
  width: 70%;
}
#hacemos-ron h3 {
  left: 5%;
  top: 43%;
  width: 50%;
}
#jugamos h3 {
   left: 5%;
  top: 43%;
  width: 50%;
}
#hacienda h3 {
  left: 5%;
  top: 43%;
  width: 50%;
}
#alcatraz h3 {
   left: 5%;
  top: 43%;
  width: 50%;
}

#content p {
  color: #FFFFFF;
  font-family: Georgia,"Times New Roman",Times,serif;
  width: 530px;
}

#home p {
  margin-left: 39%;
  position: relative;
  top: 23%;
  transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
}

#home h3 {
  top: 15%;
  transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
}

#hacemos-ron p {
  left: 26%;
  position: relative;
  top: 163px;
}

#jugamos p {
  left: 26%;
  position: relative;
  top: 163px;
}
#hacienda p {
   left: 26%;
  position: relative;
  top: 163px;
}
#alcatraz p {
   left: 26%;
  position: relative;
  top: 163px;
}

#video-uno figure {
  background-image: url("../img/thumb-video-uno.jpg");
  background-repeat: no-repeat;
  height: 100%;
  position: absolute;
  width: 100%;
   background-position:center;
}


#video-dos figure {
  background-image: url("../img/thumb-video-dos.jpg");
  background-repeat: no-repeat;
  height: 100%;
  position: absolute;
  width: 100%;
   background-position:center;
}


#video-tres figure {
  background-image: url("../img/thumb-video-tres.jpg");
  background-repeat: no-repeat;
  height: 100%;
  position: absolute;
  width: 100%;
   background-position:center;
}


#video-cuatro figure {
  background-image: url("../img/thumb-video-cuatro.jpg");
  background-repeat: no-repeat;
  height: 100%;
  position: absolute;
  width: 100%;
  background-position:center;
}

.play {
  background-image: url("../img/play.png");
  background-position: center center;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 1;
  background-repeat: no-repeat;
}

.video {
  background-attachment: fixed;
  background-image: url("../img/hacemos-ron-bn.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  margin-left: 21%;
  max-height: 422px;
  max-width: 737px;
  position: absolute;
  top: 6%;
  width: 100%;
  z-index: 2;
}

.video-dos {
  background-image: url("../img/jugamos-al-rugby-bn.jpg");
  background-attachment:fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  margin-left: 21%;
  max-height: 422px;
  max-width: 737px;
  position: absolute;
  top: 6%;
  width: 100%;
  z-index: 2;
 
}
.video-tres {
  background-attachment: fixed;
  background-image: url("../img/nuestra-hacienda-bn.jpg");
   background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  margin-left: 21%;
  max-height: 422px;
  max-width: 737px;
  position: absolute;
  top: 6%;
  width: 100%;
  z-index: 2;

}
.video-cuatro {
  background-attachment: fixed;
  background-image: url("../img/proyecto-alcatraz-bn.jpg");
   background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  margin-left: 21%;
  max-height: 422px;
  max-width: 737px;
  position: absolute;
  top: 6%;
  width: 100%;
  z-index: 2;
}





#play-video {
	height: 87px;
	width: 162px;
	margin-left: -81px;
	margin-top: -43px;
	position: relative;
	top: 50%;
	left: 50%;
}

.layer {
  background-color: #000000;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
  width: 100%;
  z-index: 100;
}



#menu-videos li figure{
	
	transition: all 0.6s cubic-bezier(0.785, 0.135, 0.150, 0.860);
	position:absolute;
	left: 0;
	
}


#logos {
  height: 400px;
  width: 400px;
  z-index: 10000;
 
}

.wrapper {
  height: 100%;
  width: 100%;
  position:absolute;
 
}


/* Reemplazo de imagenes */
.reemplazo{display: block; overflow: hidden; text-indent: -9999px;}
#video-uno figure {
	background-image: url(../img/thumb-video-uno.jpg);
	background-repeat: no-repeat;
}
.play {
	background-image: url(../img/play.png);
	background-position: center center;
	height: 100%;
	width: 100%;
	position: absolute;
}





/*////////////////////////////RESPONSIVE /////////////////////////////////*/



/*******************************************************
                   
				    1440 x 900
					
*******************************************************/		

@media screen and (min-width: 1366px) and (max-width: 1440px){

#content {
  height: 600px;
  margin-top: 80px;
  position: absolute;
  width: 100%;
  bottom: -25%!important;
}

#logos h5 {
  color: #F93131;
  font-family: 'oswaldregular';
  font-size: 12px;
  font-weight: normal;
  left: 51px;
  position: absolute;
  top: 49px;
  z-index: 10;
}	
	
h1 {
  color: #2E6E80;
  font-size: 20px;
  font-weight: normal;
  left: 50px;
  position: absolute;
  top: 66px;
  z-index: 100;
}

#compartir {
  height: 70px;
  left: -436px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 120px;
  position: absolute;
  top: 20px;
  width: 1080px;
  z-index: 100;
}

#home p {
  margin-left: 39%;
  position: relative;
  top: 25%!important;
  transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
}

#home h3 {
  top: 22%;
  transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
}

#compartir p {
  color: #F93131;
  font-family: 'oswaldregular';
  font-size: 11px;
  left: 488px;
  position: absolute;
  top: 104px;
  z-index: 100;
}

#logos h2 {
  margin-left: 40px;
  position: absolute;
  top: 42%;
  z-index: 100;
  width: 163px;
}

#menu-videos {
  height: 100%;
  max-width: 260px;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1000;
}

#menu-videos li figcaption {
  color: #FFFFFF;
  font-family: 'oswaldbold';
  font-size: 23px;
  text-align: center;
}
	
	
#content h3 {
  bottom: -41%;
  color: #FFFFFF;
  display: block;
  font-family: 'oswaldbold';
  font-size: 43px;
  font-weight: normal;
  line-height: 43px;
  margin-left: 44px;
  position: relative;
  text-transform: uppercase;
  width: 73%;
}

#home p {
  margin-left: 36%;
  position: relative;
  top: 45%;
}
#hacemos-ron h3 {
  left: 5%;
  width: 50%;
}
#hacemos-ron p {
  left: 17%;
  position: relative;
  top: 45%;
  font-size: 14px;
}
.video {
  height: 100%;
  margin-left: 30%;
  max-height: 412px;
  max-width: 666px;
  position: absolute;
  top: 5%;
  width: 100%;
  z-index: 2;
}

#jugamos h3 {
 left: 5%;
  width: 50%;
}
#jugamos p {
 left: 17%;
  position: relative;
  top: 45%;
  font-size: 14px;
}

.video-dos, .video-tres, .video-cuatro {
  background-size: cover;
  height: 100%;
  margin-left: 30%;
  max-height: 412px;
  max-width: 666px;
  position: absolute;
  top: 5%;
  width: 100%;
  z-index: 2;
}




#hacienda h3 {
  left: 5%;
  width: 50%;
}

#hacienda p {
 left: 17%;
  position: relative;
  top: 45%;
  font-size: 14px;
}

#alcatraz h3 {
left: 5%;
  width: 50%;
}

#alcatraz p {
   left: 17%;
  position: relative;
  top: 45%;
  font-size: 14px;
}

}


/*-----------------------------------------------------------------------------------

                           RESPONSIVE 1280 X 1024

-----------------------------------------------------------------------------------*/


@media screen and (min-width: 1180px) and (max-width: 1365px){
	
	
	
	#content {
  height: 600px;
  margin-top: 80px;
  position: absolute;
  bottom: -4%;
  width: 170%;
}
	#home h3 {
  top: 50%;
  transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
}
	
	#content p {
  color: #FFFFFF;
  font-family: Georgia,"Times New Roman",Times,serif;
  width: 500px;
  font-size: 14px;
}
	
	#logos h5 {
  color: #F93131;
  font-family: 'oswaldregular';
  font-size: 12px;
  font-weight: normal;
  left: 51px;
  position: absolute;
  top: 26px;
  z-index: 10;
}
	
	#compartir {
  height: 70px;
  left: -437px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 120px;
  position: absolute;
  top: 0;
  width: 1080px;
  z-index: 100;
}

	
#compartir p {
  color: #F93131;
  font-family: 'oswaldregular';
  font-size: 11px;
  left: 489px;
  position: absolute;
  top: 101px;
  z-index: 100;
}
	h1 {
  color: #2E6E80;
  font-size: 20px;
  font-weight: normal;
  left: 50px;
  position: absolute;
  top: 40px;
  z-index: 100;
}

#logos h2 {
  margin-left: 40px;
  position: absolute;
  top: 40%;
  z-index: 100;
  width: 180px;
}

	#menu-videos {
  height: 100%;
  max-width: 260px;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1000;
}

#menu-videos li figcaption {
  color: #FFFFFF;
  font-family: 'oswaldbold';
  font-size: 23px;
  text-align: center;
}
	
	
#content h3 {
  bottom: -43%;
  color: #FFFFFF;
  display: block;
  font-family: 'oswaldbold';
  font-size: 50px;
  font-weight: normal;
  line-height: 51px;
  margin-left: 44px;
  position: relative;
  text-transform: uppercase;
  width: 43%;
}

#home p {
  margin-left: 18%;
  position: relative;
  top: 53%;
  width: 436px;
}

#hacemos-ron h3 {
  left: 2%;
  top: 60%;
  width: 50%;
}
#hacemos-ron p {
  left: 9%;
  position: relative;
  top: 64%;
}
.video, .video-dos, .video-tres, .video-cuatro {
  height: 100%;
  margin-left: 28%;
  max-height: 332px;
  max-width: 536px;
  position: absolute;
  top: 6%;
  width: 100%;
  z-index: 2;
}
#jugamos h3 {
 left: 2%;
  top: 60%;
  width: 50%
}

#jugamos p {
  left: 9%;
  position: relative;
  top: 64%;
}

#hacienda h3 {
left: 2%;
  top: 60%;
  width: 50%
}

#hacienda p {
  left: 9%;
  position: relative;
  top: 64%;
}

#alcatraz h3 {
left: 2%;
  top: 60%;
  width: 50%
}

#alcatraz p {
 left: 9%;
  position: relative;
  top: 64%;
}

#content h3 {
  bottom: -50%;
  color: #FFFFFF;
  display: block;
  font-size: 35px;
  font-weight: normal;
  line-height: 41px;
  margin-left: 44px;
  position: relative;
  text-transform: uppercase;
  width: 43%;
}
	
	
}


/*-----------------------------------------------------------------------------------

                           RESPONSIVE 1024 X 768

-----------------------------------------------------------------------------------*/



@media (max-width: 1179px){
	
	
	#content {
  height: 600px;
  margin-top: 113px;
  position: absolute;
  bottom: -27%;
  width: 100%;
}
	
	#logos h5 {
  color: #F93131;
  font-family: 'oswaldregular';
  font-size: 12px;
  font-weight: normal;
  left: 51px;
  position: absolute;
  top: 21px;
  z-index: 10;
}
#compartir {
  height: 70px;
  left: -437px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 120px;
  position: absolute;
  top: -13px;
  width: 1080px;
  z-index: 100;
}

#compartir p {
  color: #F93131;
  font-family: 'oswaldregular';
  font-size: 11px;
  left: 490px;
  position: absolute;
  top: 101px;
  z-index: 100;
}
	
#logos img{
	
	width: 100%;
	height:auto;	
}
	
		#content p {
  color: #FFFFFF;
  font-family: Georgia,"Times New Roman",Times,serif;
  width: 500px;
  font-size: 14px;
}
	
h1 {
  color: #2E6E80;
  font-size: 20px;
  font-weight: normal;
  left: 50px;
  position: absolute;
  top: 40px;
  z-index: 100;
  width: 200px;
}

#logos h2 {
  margin-left: 40px;
  position: absolute;
  top: 38%;
  width: 200px;
  z-index: 100;
}

#menu-videos {
  height: 100%;
  max-width: 200px;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1000;
}

#menu-videos li figcaption {
  color: #FFFFFF;
  font-family: 'oswaldbold';
  font-size: 16px;
  text-align: center;
}

figcaption h3 {
  font-weight: normal;
  position: absolute;
  text-align: center;
  top: 41%;
  width: 100%;
}

.play {
  background-image: url("../img/play.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
  left: 27%;
  position: absolute;
  top: 39px;
  width: 100px;
}
	
#content h3 {
  bottom: -43%;
  color: #FFFFFF;
  display: block;
  font-family: 'oswaldbold';
  font-size: 50px;
  font-weight: normal;
  line-height: 51px;
  margin-left: 44px;
  position: relative;
  text-transform: uppercase;
  width: 43%;
}

#home p {
  margin-left: 25%;
  position: relative;
  top: 31%;
  width: 416px;
}

#hacemos-ron h3 {
  left: 5%;
  top: 38%!important;
}
#hacemos-ron p {
  left: 15%;
  position: relative;
  top: 40%;
}

.video, .video-dos, .video-tres, .video-cuatro {
  height: 100%;
  margin-left: 24%;
  max-height: 332px;
  max-width: 536px;
  position: absolute;
  top: 5%;
  width: 100%;
  z-index: 2;
}

#jugamos h3 {
 left: 5%;
  top: 38%!important;
}

#jugamos p {
  left: 15%;
  position: relative;
  top: 40%;
}

#hacienda h3 {
  left: 5%;
  top: 38%!important;
}

#hacienda p {
   left: 15%;
  position: relative;
  top: 40%;
}

#alcatraz h3 {
 left: 5%;
  top: 38%!important;
}

#alcatraz p {
  left: 15%;
  position: relative;
  top: 40%;
}

#content h3 {
  bottom: -38%;
  color: #FFFFFF;
  display: block;
  font-family: 'oswaldbold';
  font-size: 35px;
  font-weight: normal;
  line-height: 41px;
  margin-left: 44px;
  position: relative;
  text-transform: uppercase;
  width: 63%;
}

#home h3 {
  transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
  top: 154px;
}
	
}