@charset "UTF-8";
/* CSS Document */

* {	/*--make all to 0 as default--*/
	padding: 0;
	margin: 0;
	outline:none;
	-webkit-text-size-adjust: none !important;
}


/* Fonts */

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

@font-face {
	font-family: 'futura_book';
	src: url('fonts/FuturaStd-Book.eot');
	src: local('☺'), 
	url('fonts/FuturaStd-Book.woff') format('woff'), 
	url('/fonts/FuturaStd-Book.ttf') format('truetype'), 
	url('fonts/FuturaStd-Book.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Global Styles */

body {
      background:#fff;
      margin:0px;
      font-family: 'futura_bold';
	  font-size:1em;
	  border:10px;
}

h1 {
	font-family: 'futura_bold';
	font-size:1.9em;
	color:#00b698;
	letter-spacing:0em;
	font-weight: 100;
}

h2 {
	font-family: 'futura_book';
	font-size:1.2em;
	color:#1a1a1a;
	letter-spacing:0em;
	font-weight: 100;
}

h3 {
	font-family: 'futura_book';
	font-size:1em;
	color:#1a1a1a;
	letter-spacing:0em;
	font-weight: 100;
	opacity:1;
}

a {
	font-family: 'futura_book';
	font-size:1em;
	text-decoration:none;
	color:#1a1a1a;
	text-decoration:underline;
}

a:hover {
color:#999;
}

p {
	font-family: 'futura_book';
	font-size:1em;
	text-decoration:none;
	color:#1a1a1a;
	width:92%;
	max-width:600px;
}

.icon_navigation {
	top:85%;
	left:50%;
	margin-left:-42.5px;
	position:fixed;
	z-index:-1;
}

/* Header */

#header {
	margin:auto;
	top:0px;
	position:fixed;
	text-align:left;
	padding:18px;
	font-size:1.2em;
	background-color:#fff;
	z-index:10;
	width:100%;
	-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.3);
	-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.3);
	box-shadow:0px 1px 2px rgba(0,0,0,0.3);
}


.info_small {
	font-size: 1.5em;
	font-family: 'futura_book';
	float:right;
	width:30px;
	height:30px;
	position:fixed;
	right:15px;
	top:15px;
	color:#fff;
}

.info_close {
	font-size: 1.5em;
	font-family: 'futura_book';
	float:right;
	width:30px;
	height:30px;
	position:fixed;
	right:15px;
	top:15px;
	color:#fff;
	display:none;
}

.twitter {
	font-size: 1.5em;
	font-family: 'futura_book';
	float:right;
	width:30px;
	height:30px;
	position:fixed;
	right:60px;
	top:15px;
	color:#fff;
	z-index:100;
}

.info_small:hover {
	opacity:0.5;
	cursor:pointer;
}

.info_close:hover {
	opacity:0.5;
	cursor:pointer;
}

.twitter:hover {
	opacity:0.5;
	cursor:pointer;
}

#content {
		margin-top:60px;
}

#block {
	padding-left:50%;
	margin-left:-150px;
	z-index:-1;
	height:310px;
	padding-top:10px;
}

#footer {
	padding:20px;
	background-color:#000;
	color:#999;
	font-size: 0.8em;
	font-family: 'futura_book';
}

#footer a {
	color:#999;
	text-decoration:underline;
}

#footer a:hover {
	color:#fff;
}

#arrow_icon {
	float:right;
	margin-right:30px;
	display: table-cell; vertical-align: middle;
	height:100%;
}

#hint {
	position: fixed;
	right:-55px;
	top:52.5%;
	float:right;
	z-index:0;
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    padding:3px;
    padding-top:10px;
    padding-left:13px;
	text-align:left;
	background-color:#fff;
	-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.3);
	-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.3);
	box-shadow:0px 1px 2px rgba(0,0,0,0.3);
	width:170px;
}

#hint h3 {
	padding-right:5px;
}

#scale_icon {
	float:right;
	z-index:-5;
	display:block;
	padding-top:0px;
	margin-left:5px;
}
              
        /* Style for overlay and box */
        
        a.activator {

            z-index:1;
            cursor:pointer;
        }
        
        .overlay{
            background: #000;
            opacity:0.5;
            position:fixed;
            top:0px;
            bottom:0px;
            left:0px;
            right:0px;
            z-index:1;
        }
        
        .box{
            position:fixed;
            margin:auto;
            top:-170px;
            width:100%;
            background-color:#fff;
            color:#fff;
            padding:20px;
            z-index:1;
            max-height:200px;
            display:none;
            -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.3);
			-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.3);
			box-shadow:0px 1px 2px rgba(0,0,0,0.3);
        }
        
/* Style for overlay and box end*/        

.logo1 {
  width: 300px;
  height: 300px;
  background: url(images/logo1.svg);
  background-position: center top;
  padding:0px;
}

.logo2 {
  width: 300px;
  height: 300px;
  background: url(images/logo2.svg);
  background-position: center top;
}

.logo3 {
  width: 300px;
  height: 300px;
  background: url(images/logo3.svg);
  background-position: center top;
}

.logo4 {
  width: 300px;
  height: 300px;
  background: url(images/logo4.svg);
  background-position: center top;
}

.logo5 {
  width: 300px;
  height: 300px;
  background: url(images/logo5.svg);
  background-position: center top;
}

.logo6 {
  width: 300px;
  height: 300px;
  background: url(images/logo6.svg);
  background-position: center top;
}


.logo7 {
  width: 300px;
  height: 300px;
  background: url(images/logo7.svg);
  background-position: -900px 0px;
}

.logo8 {
  width: 300px;
  height: 300px;
  background: url(images/logo8.svg);
  background-position: -900px 0px;
}

.logo9 {
  width: 300px;
  height: 300px;
  background: url(images/logo9.svg);
  background-position: -900px 0px;
}

.logo10 {
  width: 300px;
  height: 300px;
  background: url(images/logo10.svg);
  background-position: -900px 0px;
}

.logo11 {
  width: 300px;
  height: 300px;
  background: url(images/logo11.svg);
  background-position: -900px 0px;
}

.logo12 {
  width: 300px;
  height: 300px;
  background: url(images/logo12.svg);
  background-position: -900px 0px;
}

.logo13 {
  width: 300px;
  height: 300px;
  background: url(images/logo13.svg);
  background-position: -900px 0px;
}

.logo14 {
  width: 300px;
  height: 300px;
  background: url(images/logo14.svg);
  background-position: -900px 0px;
}

.logo15 {
  width: 300px;
  height: 300px;
  background: url(images/logo15.svg);
  background-position: -900px 0px;
}

.logo16 {
  width: 300px;
  height: 300px;
  background: url(images/logo16.svg);
  background-position: -900px 0px;
}

.logo17 {
  width: 300px;
  height: 300px;
  background: url(images/logo17.svg);
  background-position: -900px 0px;
}

@media only screen and (min-width: 15em) {
	.logo1, .logo2, .logo3, .logo4, .logo5, .logo6, .logo7, .logo8, .logo9, .logo10, .logo11, .logo12, .logo13, .logo14, .logo15, .logo16, .logo17 {background-position: left -900px;}
}

@media only screen and (min-width: 28em) {
	.logo1, .logo2, .logo3, .logo4, .logo5, .logo6, .logo7, .logo8, .logo9, .logo10, .logo11, .logo12, .logo13, .logo14, .logo15, .logo16, .logo17 {background-position: left -600px;}
}

@media only screen and (min-width: 45em){
	.logo1, .logo2, .logo3, .logo4, .logo5, .logo6, .logo7, .logo8, .logo9, .logo10, .logo11, .logo12, .logo13, .logo14, .logo15, .logo16, .logo17 {background-position: left -300px;}
}

@media only screen and (min-width: 60em){
	.logo1, .logo2, .logo3, .logo4, .logo5, .logo6, .logo7, .logo8, .logo9, .logo10, .logo11, .logo12, .logo13, .logo14, .logo15, .logo16, .logo17   {background-position: left 0px;}
 }