@import url('https://fonts.googleapis.com/css?family=Oxygen:300');
@import "bootstrap.min.css";


html,body {
	padding-left: 60px;
	color: rgba(120, 120, 120, 1);
	font-size: 14px;
}

body {
	height: 100%;
	width: 100%;
	position: absolute;
	overflow-x: hidden;
}

.wrapper {
	position: absolute;
	top:5rem;
	left:5%;
	width:120rem;
	height: 70rem;
 	/* border:1px solid black; */
 
}

.zappo {
	 font-family: 'LinotypeZapfino One', arial;
	 padding-bottom: 1rem;
	 margin-top: 0;
	 font-size: 3rem;

}

.page-link {
	cursor: pointer;
}
.page-link:hover {
	color: #337ab7;
}
.inner {
	width: 100%;
}

.landing {
	position: relative;
	margin-top: 5rem;
	width: 30rem;
	height: auto;
}

.language-item {
	padding-top: 3rem;
	width:3rem;
	height: 8rem;
}

.language-link {
	position:relative;
	height: 80%;
	width: auto;
	font-size: 1rem;
	color: rgba(120, 120, 120, 1);	
}
.language-link span {
	position: absolute;
	top:5rem;
	left: 0;
}


.flag {
	position: absolute;
	width: 2.4rem;
	height:auto;
	top: 0;
	left: 0;
	border: 1px solid rgba(120, 120, 120, 1);
}
.non-visible {
	visibility: hidden;
}

.flag-touched {
	z-index: -1;
}

.flag-untouched {
	z-index: 2;
}

.language-link:hover .flag-touched {
	z-index: 2;
}

.language-link:hover .flag-untouched {
	z-index: -1;
}

/* -----/ form */
@media all and (max-width: 559px) {
	html,body {
		font-size: 10px;
	}
}
@media all and (min-width: 560px) and (max-width: 959px) {
	html,body {
		font-size: 12px;
	}
}
@media all and (min-width: 960px) and (max-width: 1499px){
	html,body {
		font-size: 14px;
	}
}
@media all and (min-width: 1500px) {
	html,body {
		font-size: 16px;
	}
}
@media all 
	and (-webkit-min-device-pixel-ratio: 2) 
  and (min-resolution: 192dpi)
  and (min-resolution: 2dppx) {


  		@media all and (max-width: 559px) {
				html,body {
					font-size: 12px;
				}
			}
			@media all and (min-width: 560px) and (max-width: 959px) {
				html,body {
					font-size: 14px;
				}
			}
			@media all and (min-width: 960px) {
				html,body {
					font-size: 16px;
				}
			}
			


}