@charset "UTF-8";
@viewport{
    zoom: 1.0;
    width: device-width;
}
.barra{
  display:none;
}
.vimeo-wrapper {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   pointer-events: none;
   overflow: hidden;
}
.vimeo-wrapper iframe {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 100vh;
   min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

/* Gallery: Square Images */
#container {
  position:absolute;
  left:28vw;
}
#container ul{
  width:44vw;
  min-height:90vh;
  list-style:none outside none;
  position:relative;
  overflow:hidden;
}
#container ul img{
  width:44vw;
  max-width:1200px;
  height:auto;
  display:block;
  margin-bottom: 1vw;
}
#container li:first-child{
  display:list-item;
  position:absolute;
}
#container li{
  display:none;
  position:absolute;
}

/* Gallery: Rectangle Images */
#container-rect {
  position:absolute;
  left:18vw;
}
#container-rect ul{
  width:64vw;
  min-height:86vh;
  list-style:none outside none;
  position:relative;
  overflow:hidden;
}
#container-rect ul img{
  width:64vw;
  max-width:1200px;
  height:auto;
  display:block;
  margin-bottom: 1vw;

}
#container-rect li:first-child{
  display:list-item;
  position:absolute;
}
#container-rect li{
  display:none;
  position:absolute;
}

/* Gallery: Cut Short */
table.cs{
  width:64vw;
}
table.cs-text{
  width:40vw;
  margin-left: 12vw;
  height: auto;
}
#container-cs {
  position:absolute;
  left:18vw;
}
#container-cs ul{
  width:64vw;
  min-height:100vh;
  list-style:none outside none;
  position:relative;
  overflow:hidden;
}
#container-cs ul img{
  width:48vw;
  max-width:1200px;
  height:auto;
  display:block;
  margin-left:8vw;
  margin-bottom: 1vw;
}
#container-cs li:first-child{
  display:list-item;
  position:absolute;
}
#container-cs li{
  display:none;
  position:absolute;
}
#cutshort-right{
  color:#333;
  text-align:justify;
  padding-left:20px;
  width:40%;
}
#cutshort{
  width:40%;
  text-align:left;
}
#cutshort-info{
  text-align:justify;
}

/* Gallery: Urra */
#container-urra {
  position:absolute;
  left:23vw;
}
#container-urra ul{
  width:54vw;
  min-height:85vh;
  list-style:none outside none;
  position:relative;
  overflow:hidden;
}
#container-urra ul img{
  width:54vw;
  max-width:1200px;
  height:auto;
  display:block;
  margin-bottom: 1vw;
}
#container-urra li:first-child{
  display:list-item;
  position:absolute;
}
#container-urra li{
  display:none;
  position:absolute;
}

/* Gallery: The Club */
table.theclub{
  width:5000vw;
  margin-left: -5vw;
}
#theclub{
  width:200px;
  padding:0px 1vw;
  align:left;
  vertical-align:top;
}
#theclub img{
  width:60vw;
  max-width:900px;
  height:auto;
  max-height:600px;
}
#theclub img.ver{
  width:26.65vw;
  max-width:400px;
  height:auto;
  max-height:600px;
}
iframe{
	width: 71vw;
	height: 40vw;
}

/* Gallery: Maskirovka */
table.maskirovka{
  width:1180vw;
  margin-left: -5vw;
}
#maskirovka{
  padding:0px 1vw;
  align:left;
  vertical-align:top;
}
#maskirovka img{
  width:30vw;
  max-width:800px;
  height:auto;
  padding-left: 2vw;
}

/* General */
table{
  align:left;
  float:left;
  width:40vw;
}
td{
  padding:0px;
  align:left;
  vertical-align:top;
}
body{
  font-family:'Open Sans', sans-serif;
  font-size:calc(7px + 0.35vw);
  line-height:calc(14px + 0.35vw);
  color:#666;
}
strong{
  font-weight:700;
}
ul, ol, dl{
  padding:0;
  margin:0;
}
h1, h2, h3, h4, h5, h6, p{
  margin-top:0;
  padding:0px 0.5vw;
}
h6{
  color:#999;
  font-size:10px;
  font-weight:400;
  padding-left:0px !important;
}
a img{
  border:none;
}
a:link{
  color:#666;
  text-decoration:none;
}
a:visited{
  color:#666;
  text-decoration:none;
}
a:hover, a:active, a:focus{
  color:#999;
  text-decoration:none;
  border:none;
}
header{
  width:12vw;
  min-width:120px;
  top:0px;
  padding:1vw 0.5vw;
  padding-left:1vw;
  padding-bottom:5vw;
  margin-left:-8px;
  text-transform:uppercase;
  position:fixed;
  background: #fff;
  z-index:999;
}
nav{
  float:left;
  position:fixed;
  width:12vw;
  min-width:120px;
  padding:0.5vw;
  padding-left:1vw;
  padding-bottom:2vw;
  margin-top:40px;
  margin-left:-8px;
  z-index:2000;
  background: #fff;
}
#menu-icon {
	display: hidden;
	width: 20px;
	height: 20px;
	background: url(../images/menu-drop.png) center;
  margin-top:2vw;
  margin-left:8vw;
}
ul{
  list-style:none;
}
ul a, ul a:visited{
  display:block;
  text-decoration:none;
  color:#666;
}
ul a:hover, ul a:active, ul a:focus{
  color:#CCC;
}
.content{
  padding:0.5vw;
  float:left;
  margin-top:60px;
  margin-left:20vw;
  margin-right:-3000px;
}
.clearfloat{
  clear:both;
  height:0;
  font-size:1px;
  line-height:0px;
}
.info{
  width:15vw;
  padding:0px 0.5vw;
  position:fixed;
  left:83vw;
  top:110px;
  text-align:left;
}
#number{
  text-align:right;
  width:10vw;
}
.prevButton{
  height:16px;
  width:16px;
  position:fixed;
  background:url('images/buttons.png') no-repeat;
  top:75px;
  left:83.5vw;
  cursor:pointer;
  background-position:left top;
}
.prevButton:hover{
  background-position:left bottom;
}
.nextButton{
  height:16px;
  width:16px;
  position:fixed;
  background:url('images/buttons.png') no-repeat;
  top:75px;
  left:calc(83.5vw + 36px);
  cursor:pointer;
  background-position:right top;
}
.nextButton:hover{
  background-position:right bottom;
}

#books{
  padding-left:20px;
  align:left;
  vertical-align:top;
}
#books img{
  width:20vw;
  max-width:300px;
  height:auto;
}

/* ------------- Start Mobile queries ------------*/
@media only screen and (max-width: 768px) {
  .barra{
    display:block;
    margin-top:-8px;
    margin-left:-8px;
    background:#fff;
    width:100vw;
    height:12vw;
    max-height:70px;
    z-index:999;
  }
  table{
    width:70vw;
  }
  table#bookstable{
    width:90vw;
  }
  body{
    font-size:calc(10px + 0.4vw);
    line-height:calc(18px + 0.4vw);
  }
  header {
		position: fixed;
    top:0vw;
    left:0vw;
    width:20vw;
    padding:4vw;
    padding-left:5vw;
    padding-bottom:2vw;
    z-index:999;
  }
	#menu-icon {
		display:inline-block;
	}
  nav{
    float:none;
    position:fixed;
    margin-top:0px;
    margin-left:80vw;
    padding:0.5vw;
  }
	nav ul, nav:active ul {
		display: none;
		position: fixed;
		padding: 4vw;
		background: #fff;
		left: 0px;
		top: 0px;
		width: 100vw;
    height:100vh;
	}

	nav li {
		text-align: center;
    padding-bottom:0.5vw;
	}
	nav:hover ul {
		display: block;
	}

  .info{
    width:90vw;
    padding:0px 0.5vw;
    position: fixed;
    left:5vw;
    top:100vw;
    text-align:left;
  }
  .prevButton{
    top:4vw;
    left:40vw;
    z-index:1;
  }
  .nextButton{
    top:4vw;
    left:60vw;
    z-index:1;
  }

  /* Gallery: Square Images */
  #container {
    left:15vw;
  }
  #container ul{
    width:70vw;
  }
  #container ul img{
    width:70vw;
  }

  /* Gallery: Rectangle Images */
  #container-rect {
    left:5vw;
  }
  #container-rect ul{
    width:90vw;
  }
  #container-rect ul img{
    width:90vw;
  }

  /* Gallery: Urra */
  #container-urra {
    left:5vw;
  }
  #container-urra ul{
    width:90vw;
  }
  #container-urra ul img{
    width:90vw;
  }



  /* Gallery: Cut Short */
  table.cs{
    width:90vw;
    font-size:calc(7px + 0.4vw);
    line-height:calc(13px + 0.4vw);
  }
  table.cs-text{
    width:60vw;
    font-size:calc(7px + 0.4vw);
    line-height:calc(13px + 0.4vw);
    margin-left: 15vw;
  }
  #container-cs {
    position:absolute;
    left:5vw;
  }
  #container-cs .info {
    display: none;
  }
  #container-cs ul{
    width:90vw;
  }
  #container-cs ul img{
    width:90vw;
    margin-left:0vw;
  }

  /* Gallery: The Club */
  table.theclub{
    width:9000vw;
    margin-left: -20vw;
  }
  #theclub{
    width:300px;
    padding:0px 2vw;
  }
  #theclub img{
    width:80vw;
    max-width:1200px;
    height:auto;
    max-height:600px;
  }
  #theclub img.ver{
    width:57.5vw;
    max-width:450px;
    height:auto;
    max-height:900px;
  }
  iframe{
	width: 95vw;
	height: 53vw;
}

  /* Gallery: Maskirovka */
  table.maskirovka{
    width:2140vw;
    margin-left: -20vw;
  }
  #maskirovka{
    padding:0px 2vw;
  }
  #maskirovka img{
    width:60vw;
    max-width:800px;
    height:auto;
  }

}