/*
 ===========================
 CONTENTS:

 00 Override
 01 General
 02 Menu
 03 Home Template
 04 Staff Template
 05 Gallery Template
 06 Portfolio Template
 07 Contact Template
 08 Media queries
 ===========================
 */



/* ------------------------------------------------------------------
 Override
 */
.navbar-inverse div.navbar-inner
{
	background-image: linear-gradient(to bottom, rgb(44, 103, 143), rgb(17, 17, 17));
}

/* DynamicMenu: Because clicking it has no effect anyway in AJAX mode! */
ul#tiefe0 ul
{
	display: none;
}



/* ------------------------------------------------------------------
 General
 */
html {
	font-size: 13px; /* Overwriting possible user (browser) setting may be sensible, because it might be optimally derived from media query's determined real device width and the pixel width (i.e. density pixels/m). Nevertheless one can also upscale accordingly if the density is high, e.g. via %, 100% on the body node, 120% if high density, and so on, which still will respect user settings! Only pitfall: The default in browsers may change, which may require one absolute default setting for the first/largest media query's result. All above this query is guessing, the user setting may be anything! So just use an as default as possible absolute value (which will prevent pages looking different in browsers with different default font sizes) and rely on the user finding a working zoom instead of expecting a correction of the font-size in the browser settings (to adapt this for every site is an endless task) and ensure the used dimensins within the page live in harmony with respect to each other. Once the first media query size is reached, the density can be used for figuring a sensible absolute value that may live without requiring an adaption in the browser zoom. */
}

body {
	background-attachment: fixed;
	background-color: #ADAEC0;
	background-image: url("../images/background_mimikri.jpg");
	background-position: right top;
	background-repeat: repeat-x;
	background-size: auto 115%;
	color: white;
	text-shadow: .05rem .05rem .1rem black;
	font-family: 'Open Sans', 'SourceSansPro', 'Verdana', 'Arial', sans-serif;
	font-size: 1.0rem;
	line-height: 1.2rem;
	margin: 0;
}

#referenzen ~ div img
{
	width: 150px;
	height: auto;
}

div.marker
{
	padding-bottom: 1rem;
}
.page h1
,.page h2
,.page h1 + p
,.page h2 + p
{
	/*padding-top: 4rem; removed because of marker usage for manual menu*/
}
div h2 + p:before
{
	content: "⇡";
}
div h2 + p
{
	z-index: 1001;
	position: absolute;
	top: 2.1rem;
	right: -14rem;
	width: 5rem;
	height: 5rem;
	background: transparent url("");
}
/*
div h2 + p a
{
	color: transparent;
}
*/

#page-444
{
	font-size: .6rem;
	line-height: .7rem;
	margin-bottom: 1px;  /* because the glass effect is more difficult to see the bigger the margin is */
}

#page-444 h2 + h2
{
	padding-top: .4rem;
	padding-bottom: 0rem;
}

.loader_bar_horizontal {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: .2rem;
	z-index: 100;
	background-color: rgb(2, 2, 2);
}

/* Having this separate allows to apply these rules to a single global wrapper easily.
 The problem with the global wrapper as dimension limit is that each section may want
 its own colors and a background that stretches across the entire width of the window.
 */
.wrapper
{
	bottom: 0;
	position: absolute;
	text-align: left;
	margin-bottom: 1%;/*4rem;*/
}

.container
{
	width: 70%;
	/* To scale the CSS gallery vertically as big as fitting onto the screen: */
	height: 97%;  /* 100% - bottom margin - top padding - step adaption for height to device screen adaption */
	overflow: hidden;
	overflow-y: auto;
}
section .container {
	padding: 0;
	padding-left: 2%;
	padding-right: 30%;
}

section.page img
{
	max-height: 100%;
	margin-right: .9rem;
}
div.ce-gallery div.ce-row
{
	float: left;
}
div.content_right div.ce-gallery div.ce-row img
{
	max-height: 18rem;
	width: auto;
	margin: auto;
}
div.content_right div.ce-gallery div.ce-row
{
	padding: 1rem;
	box-shadow: 0px 0px 9px aliceblue;
	margin: 1rem 1rem 1rem 0;
	height: 10rem;
	text-align: center;
}
div.content_right div.ce-gallery div.ce-row:hover
{
	box-shadow: 0px 0px 9px grey;
}
div.ce-gallery div.ce-row div
{
	width: 100%;
	height: 100%;
}
div.ce-gallery div.ce-media a
{
	width: 100%;
	height: 100%;
	display: block;
}

.row
{
	margin-bottom: 2.31rem;
}

div#slogan + div.row
{
	margin-bottom: 0;
}

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

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

h1
{
	font-size: 3rem;
	line-height: 2.5rem;
	text-align: left;
	font-weight: normal;
	text-shadow: .05rem .05rem .1rem black;
}

ul
, ol
{
	padding: 0;
	margin: 0 0 0 0;
}

h3 {
	font-size: 2rem;
	color: royalblue;
	font-weight:300;
}

p {
	font-weight: 400;
}

li, a, img {
	outline: none !important;
}

header {
	z-index: 99999;
	position: relative;
}
header nav
{
	display: none;
}

header,
section
{
	padding-top: 0;
	margin-bottom: .1rem;
	overflow: hidden;
	width: 100%;
}
section
{
	background-color: rgba(2,2,2, .5);
	/* TODO color variation */
}

figure
{
	margin-left: 0;
}

.page
{
	min-height: 60rem;
	position: relative; /* To be reference for absolute pos of child. */
}

div.container > div
{
	z-index: 100;
	position: relative;
}
div.content_border  div
{
	z-index: 1111;
}
div#main-nav
{
	display: none;
}
div.container > div:last-child
{
	width: 95%;
	position: absolute;
	bottom: 0rem;
	z-index: 10;
}
#page-1 div.container > div:last-child
{
	bottom: 5rem;
}

.page_content
, .page_content_left
{
	background-color: rgba(0,0,0, .4);
	color: rgb(255, 255, 255);
	text-shadow: .05rem .05rem .05rem black;
}
.page_content_right
{
/*	background-color: royalblue;
	background-color: rgba(65, 105, 225, .85);
*/
}

section.last-section .container h2:first-child
{
	font-size: 1.2rem;
	line-height: 1.4rem;
}
section.last-section .container h2:first-child + div
{
	font-size: 1rem;
	line-height: 1.2rem;
}
/*
.last-section > div > div {
	width: 30%;
	float: left;
}

.last-section > div > div + div {
	width: 65%;
	float: right;
}
*/

.section-title {
	font-family: 'NovecentowideBookBold';
	font-size: 50px;
	line-height: 50px;
	margin-bottom: 40px;
	font-weight: normal;
}
.border {
	border-top: 1px solid #f0f0f0;
	padding-top: 20px;
}
a {
	color: #dde;
}
a:hover {
	text-decoration: underline;
	color: #fff;
}
#footer,
footer {
	margin-bottom: 0;
	background-color: royalblue;
	background-color: rgb(0, 0, 0);
	filter: alpha(opacity=50);
	opacity: .5;
	padding: 15px 0;
	color: #fff;
	font-size: 1rem;
	font-family:  'NovecentowideLightRegular';
}
#footer,
footer a {
	color:#fff;
	text-decoration:underline;
}
#footer,
footer img {
		max-height: 50pt;
}
input, textarea {
	border-radius: 0;
}



/* ------------------------------------------------------------------
 Menu
 */
#manual_menu
,#main-nav
{
	height: 2rem;
	position: fixed;
	top: .5rem;
	right: 3%;
	/*right: 7rem; use in combinarion with to top arrow.*/
	font-size: 1.2rem;
	font-weight: 10;
	z-index: 1002;
	font-variant: small-caps;
	/*
	margin-left: -150pt;
	left: 50%;
	*/
}
#manual_menu
{
	margin-top: 1rem;
	position: sticky;
	text-align: right;
}

#manual_menu img
{
	height: 20px;
}

#manual_menu li,
#main-nav li {
	display: inline-block;
	margin: 0;
	border-radius: 1rem;
	padding: .4rem 0.2rem;
}
#main-nav li+li {
	background-color: royalblue;
}
#main-nav li+li+li {
	/*background-color: magenta;*/
}

#manual_menu li a,
#main-nav li a {
	color: rgb(0, 0, 0);
	text-shadow: 0px 0px 1px white;
	text-decoration: none;
	-webkit-transition: color 0.5s ease;
	-moz-transition: color 0.5s ease;
	-o-transition: color 0.5s ease;
	transition: color 0.5s ease;
}

#manual_menu li:hover a,
#main-nav li:hover a
{
	color: white;
	text-shadow: 1px 1px 1px black;
}
#main-nav li+li a {
	color: white;
}
#main-nav li+li+li a {
	color: white;
}

#main-nav li  ul {
	display: none;
	position: relative;
	top: 15pt;
	margin-left: -100pt;
}
/*
#manual_menu li {
	border-bottom: .1rem solid red;
}
#manual_menu li+li {
	border-bottom: .1rem solid orange;
}
#manual_menu li+li+li {
	border-bottom: .1rem solid olive;
}
#manual_menu li+li+li+li {
	border-bottom: .1rem solid lightblue;
}
#manual_menu li+li+li+li+li {
	border-bottom: .1rem solid magenta;
}
*/
#manual_menu li a {
    -moz-text-decoration-color: red;
    text-decoration-color: red;
}
#manual_menu li+li a {
    -moz-text-decoration-color: orange;
    text-decoration-color: orange;
}
#manual_menu li+li+li a {
    -moz-text-decoration-color: olive;
    text-decoration-color: olive;
}
#manual_menu li+li+li+li a {
    -moz-text-decoration-color: lightblue;
    text-decoration-color: lightblue;
}
#manual_menu li+li+li+li+li a {
    -moz-text-decoration-color: magenta;
    text-decoration-color: magenta;
}

#manual_menu li.active + li ul,
#main-nav li.active + li ul,
.nav_ul li.current + li ul
{
	display: inline;
}
#manual_menu li.current,
#manual_menu li:hover,
#manual_menu li.active,
#main-nav li.current,
#main-nav li:hover,
#main-nav li.active
{
	color: rgb(255,255,255);
}

#manual_menu li:target,
#manual_menu li::target,
#main-nav li:target,
#main-nav li::target
{
	color: #fff;
	background-color: rgba(0,0,0, .5);
	border: .1rem solid white;
}
.navbar .nav {
	float: right;
}
#manual_menu li a,
#main-nav li a,
.navbar .nav > li > a {
	padding: .5rem;
	/*
	background-color: inherit;
	font-family: 'Open Sans', 'Verdana', 'Arial', sans-serif;
	text-transform:uppercase;
	font-weight:400;
	*/
}

.navbar .nav > li > a:hover {
	background:transparent!important;
}
.navbar .nav > li.active > a {
	background:transparent!important;
}

#mini-logo {
	width:auto;
	padding-top:13px;
	float:left;
	font-weight: bold;
	color: rgb(255, 255, 255);
}
#mini-logo img {
	/*
	position: fixed;
	left: 50%;
	margin-left: -15px;
	*/
	height:30px; /* 56px; */
	width:auto;
	display:block;
	float: left;
	margin-top: -5px;
	margin-right: 10px;
}



/* ------------------------------------------------------------------
 Home Template
 */

#home-header {
}
#mini-link {
	float: left;
	display: block;
	text-align: left;
	padding-left: 2%;
}
#logo-title {
	font-size:60px;
	text-align:left;
	font-family: 'NovecentowideBookBold';
	font-weight:normal;
}
#mini-slogan {
	font-family: 'NovecentowideLightRegular';
	font-weight:normal;
	text-align:right;
	font-size:18px;
	padding-top:8px;
}
#slogan {
	display: block;
	overflow: hidden;
	margin-bottom: 60px;
}
.three-big {
	height: 218px;
}
.two-big {
	height: 130px;
}
.one-big {
	height: 100px;
}
/*h1#first-title ~ div.row + div
*/
section.page:nth-of-type(2n+1)
{
	background-color: rgba(255,255,255, .5);
}
section.page:nth-of-type(2n+1)
,section.page:nth-of-type(2n+1) a
{
	color: black;
	text-shadow: .02rem .02rem .01rem white;
}
section.page:nth-of-type(2n)
{
	border-top: .05rem solid #AAA;
}
section.page:first-of-type
{
	background-color: transparent;
}
/*
section#page-1 div.container div:last-of-type
*/
div#title
{
	color: black;
/*
	position: relative;
	top: -11rem;
*/
}
/*
section#page-1 div.container div:last-of-type h1
*/
div#title h1
{
	text-shadow: .05rem .05rem .1rem white;
}
section:last-of-type
{
	/* glass effect */
	border-bottom: 1px solid rgb(17, 17, 17);
}
.big-title {
	/* Novecento font not working font-family: 'NovecentowideLightRegular', sans;*/
	padding-top: 0;
	font-size: 3.5rem;
	line-height: 3rem;
	margin-bottom: .1rem;
	margin-top: 0.5rem;
	font-weight: normal;
	text-shadow: .05rem .05rem .1rem black;
	/*no javascript display:none;*/
}
.big-title span {
	color: white !important;
	padding-right: .8rem;
}
#nav-home ul
, ul.unstyled
, .last-section ul
, ul.ce-uploads
{
	list-style: none;
}
ul.ce-uploads li
{
	display: inline-block;
}
nav#nav-home ul li {
	display:table;
	position:relative;
}
.circle-nav a,
.circle-menu {
	width: 170px;
	height: 170px;
	display:block;
	background-color: #000;/*#01a3b2;*/
	-moz-border-radius: 85px;
	-webkit-border-radius: 85px;
	border-radius: 85px;
	text-align:center;
	color:#fff;
	display:table-cell;
	vertical-align:middle;
	margin:auto;
	position:relative;
	font-size:16px;
	z-index: 1;
	font-family: 'NovecentowideLightRegular';
	background-image: url("../images/i8_logo.png");
	background-repeat: no-repeat;
	background-size: 40%;
}
.circle-nav a {
	width: 74pt;
	height: 10pt;
	font-size: 90%;
}
.circle-black {
	background: #000!important;
}
.label-link {
	position:relative;
	display:inline-block;
	-moz-transition: all 1s ease;
	-webkit-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
	color:#fff;
}
.circle-menu:hover .label-link {
	-moz-transform:  rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform:  rotate(360deg);
	transform:  rotate(360deg);
	color:#fff;
}
span.arrow {
	display:block;
	background:url(img/arrow.png) no-repeat;
	width:18px;
	height:9px;
	margin-left:-9px;
	position:absolute;
	bottom:20px;
	left:50%;
	z-index: 3;
}



/* ------------------------------------------------------------------
 Staff Template
 */

#staff {
	overflow: hidden;
}
.col-title {
	font-family: 'NovecentowideLightRegular';
	font-size: 20px;
	font-weight: normal;
	line-height: 20px;
	font-style:normal;
}
.tab-content {
	overflow: hidden;
}
.nav-tabs {
	border: 0;
}
.nav-tabs li a {
	border: 0;
	font-weight: normal;
	background: #01A3B2;
	color: #ffffff;
	border-radius: 0;
	font-family: 'NovecentowideLightRegular';
}
.nav-tabs > li > a:hover {
	background: #000000;
	color: #ffffff;
	border: 0;
	border-radius: 0;
}
.nav-tabs > .active > a, .nav-tabs > .active > a:hover {
	background: #000;
	color: #ffffff;
	border: 0;
	border-radius: 0;
}



/* ------------------------------------------------------------------
 Gallery Template
 */

.magnifier {
	opacity: 1;
	position: relative;
	height: auto;
	display: block;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	text-align:center;
}
.magnifier:hover {
	opacity: 0.7;
}
.magnifier:after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 0;
	left: 0;
	top: 0;
	background: url('img/magnifier.png') center center no-repeat;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.magnifier:hover:after {
	opacity: 1;
}



/* ------------------------------------------------------------------
 Portfolio Template
 */

#portfolio a.link-portfolio {
	background: #01A3B2;
	color: #ffffff!important;
	text-decoration: none;
	font-weight: normal;
	padding: 8px 12px;
	margin-top: 20px;
	display: block;
	width: 94px;
	font-family: 'NovecentowideLightRegular';
}
#portfolio a.link-portfolio:hover {
	background: #000000;
}



/* ------------------------------------------------------------------
 Contact Template
 */

.email-link {
	font-family: 'Open Sans', 'Verdana', 'Arial', sans-serif;
	color:#000000;
	text-decoration:underline;
}
#find-us h3, #contact-info h3 {
	margin-bottom:30px;
}
#find-us ul li {
	line-height:30px;
	font-size:15px;
	font-weight:400;
}
#find-us ul li .contact-icon {
	margin:4px 3px 0;
}
#contact ul li {
	margin-bottom: 10px;
}
ul.social {
	margin-top:20px;
}
ul.social li {
	margin-right:10px;
	float:left;
}
.sprite-social {
	background:url(img/sprite-social.png) no-repeat;
	height:20px;
	display:block;
}
.fb-icon {
	background-position: 0 0 ;
	width:9px;
}
.tw-icon {
	background-position: -12px 0 ;
	width:22px;
}
.gp-icon {
	background-position: -36px 0 ;
	width:23px;
}
.pt-icon {
	background-position: -61px 0 ;
	width:16px;
}
.ln-icon {
	background-position: -80px 0 ;
	width:21px;
}
.yt-icon {
	background-position: -104px 0 ;
	width:20px;
}
input[type="text"],input[type="email"], textarea {
	border: none;
	background: transparent;
	border-bottom: 1px solid #999;
	box-shadow: none;
	margin-bottom: 20px;
	border-radius: 0;
	font-family: 'Open Sans', 'Verdana', 'Arial', sans-serif;
	font-weight:400;
}
textarea:focus, input[type="text"]:focus,input[type="email"]:focus {
	border-bottom: 1px solid #f0f0f0;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	border-radius: 0;
}
input[type="submit"] {
	border: 0;
	background: #01a3b2;
	color: #fff;
	font-family: 'NovecentowideLightRegular';
	padding: 10px 20px;
}
input[type="submit"]:hover {
	background: #000000;
}



/* ------------------------------------------------------------------
 CSS Gallery, courtesy of www.cssplay.co.uk
 */
div#gallery
{
	width: 100%;
}

div#fullHolder
{
	width: 100%;
	/*padding-bottom: 93%;  /* 100% - bottom margin - 2 * vertical padding */
	position: relative;
}
div#fullHolder ul
{
	padding: 0;
	margin: 0;
	list-style: none;
}
div#fullHolder li
{
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
div#fullHolder li input
{
	display: none;
}
div#fullHolder li div
{
	display: none;
	filter: alpha(opacity=0);
	opacity: 0;
	transition: .5s;
	width: 100%;
}
div#fullHolder li input:checked + div
{
	display: block;
	filter: alpha(opacity=100);
	opacity: 1;
}
div#fullHolder li div img
{
	display: block;
	padding-bottom: .3rem;
	width: 100%;
	border: 1px solid #DDD;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0, 0.4);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0, 0.4);
	box-shadow: 0 1px 3px rgba(0,0,0, 0.4);
}
div#fullHolder li div span
{
	display: block;
	font: normal 1rem/1.1rem 'open sans' helvetica arial sans-serif;
	color: #444;
	text-shadow: .01rem .01rem .01rem #eee;
	text-rendering: optimizelegibility;
	/*
	text-align: center;
	position: absolute;
	z-index: 1003;
	top: .1rem;
	left: .1rem;
	*/
	font-variant-caps: all-small-caps;
}


div#thumbHolder
{
	height: 12rem;
	width: 98%;
	text-align: center;
	overflow: hidden;
	position: absolute;
	bottom: 0rem;
}
div#thumbHolder ul
{
	height: 13rem;
	padding: 0;
	margin: 0;
	list-style: none;
	white-space: nowrap;
	overflow-y: hidden;
	overflow-x: auto;
	text-align: center;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}
div#thumbHolder li:first-child
{
	padding-left: 0;
}

div#thumbHolder li
{
	display: inline-block;
	vertical-align: top;
	margin: .38rem .31rem;
	height: 10.5rem;
	overflow: hidden;
	box-shadow: 0 0 3px rgba(0,0,0, 0.4);
}
div#thumbHolder li img
{
	display: block;
	margin: 0 auto;
	width: 7.77rem;
	cursor: pointer;
}

div#thumbHolder li:last-child
{
	padding-right: 0;
}




/* ------------------------------------------------------------------
 Uber mich
 */
div#uber_mich ~ div.container figure
{
	display: inline-block;
	position: relative;
	vertical-align: top;
	border: 1px solid #DDD;
	background-color: #EEE;
	background-color: transparent;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0, 0.4);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0, 0.4);
	box-shadow: 0 1px 3px rgba(0,0,0, .4);
	width: 300px;  /* image width */
	height: 445px;
	overflow: hidden;
}

figcaption
{
	position: absolute;
	top: 5px;
	padding: 2px 4px;
	left: 0;
	height: 350px;
	width: 100%;
	display: inline-block;
	font-size: 15px;
	line-height: 16px;
	text-shadow: 1px 0px 1px white;
}

figcaption::before
{
	font-size: 19px;
	line-height: 19px;
	content: "Angelika Hirschberg";
	display: inline-block;
	padding-bottom: 380px;
	width: 100%;
	padding-left: 2px;
	padding-top: 2px;
	color: white;
	text-shadow: 1px 0px 1px black;
}




/* ------------------------------------------------------------------
 Media Queries
 */

@media (min-height:780px) {
	.last-section {
		min-height:750px;
	}
}

@media (max-width: 1199px) {
	.circle-menu {
		height:140px;
	}
	#mini-slogan {
		padding-top:4px;
		font-size:16px;
	}
}

@media (max-width: 979px) and (min-width: 767px) {
	.navbar .nav
	, #main-nav
	{
		float: left;
	}
	.home-col h2 {
		font-size: 30px;
		line-height: 30px;
	}
}


@media (max-width: 979px) {
	.nav-collapse ul {
		margin-top:10px;
		padding-top:20px;
	}
	.nav-collapse ul li {
		padding-bottom:20px;
	}
	.nav-collapse ul > li > a {
		padding: 0px 10px 0px!important;
	}
	.circle-menu {
		height:104px;
	}
	#home-header {
		margin-top:-26px;
	}
	#mini-logo {
		padding-left:10px;
	}
	.circle-menu:hover .label-link {
		/* Firefox */
		-moz-transform: scale(1) rotate(0deg) translate(0px);
		/* WebKit */
		-webkit-transform: scale(1) rotate(0deg) translate(0px);
		/* Opera */
		-o-transform: scale(1) rotate(0deg) translate(0px);
		/* Standard */
		transform: scale(1) rotate(0deg) translate(0px);
		color:#fff;
	}
}

@media (max-width: 750px) {
	body {
		padding:0;
		/*
		background-size: auto 210%;
		*/
		background-position: -970px top; /* px because it is an image */
	}
	/*TODO*/
	#body-bg
	{
		-moz-transform: scaleX(-1);
		-o-transform: scaleX(-1);
		-webkit-transform: scaleX(-1);
		-ms-transform: scaleX(-1);
		transform: scaleX(-1);
		-ms-filter: "FlipH";
		filter: FlipH;
	}
}

@media only screen
	and (min-device-width : 768px)
	and (max-device-width : 1024px)
	and (orientation : landscape) {
	.circle-menu:hover .label-link {
		/* Firefox */
		-moz-transform: scale(1) rotate(0deg) translate(0px);
		/* WebKit */
		-webkit-transform: scale(1) rotate(0deg) translate(0px);
		/* Opera */
		-o-transform: scale(1) rotate(0deg) translate(0px);
		/* Standard */
		transform: scale(1) rotate(0deg) translate(0px);
		color:#fff;
	}
}







/* WIDTH DEPENDENT */

@media (max-width:400px)
{
	html
	{
		font-size: 9px;
		font-size: 13px;
	}
}
@media (min-width:400px) and (max-width:450px)
{
	html
	{
		font-size: 9.5px;
		font-size: 13px;
	}
}
@media (min-width:450px) and (max-width:500px)
{
	html
	{
		font-size: 10px;
		font-size: 13px;
	}
}
@media (min-width:500px) and (max-width:550px)
{
	html
	{
		font-size: 10.5px;
		font-size: 13px;
	}
}
@media (min-width:550px) and (max-width:600px)
{
	html
	{
		font-size: 11px;
		font-size: 13px;
	}
}
@media (min-width:600px) and (max-width:700px)
{
	html
	{
		font-size: 11.5px;
		font-size: 13px;
	}
}
@media (min-width:700px) and (max-width:750px)
{
	html
	{
		font-size: 12px;
		font-size: 13px;
	}
}
@media (min-width:750px) and (max-width:800px)
{
	html
	{
		font-size: 12.5px;
		font-size: 13px;
	}
}
@media (min-width:800px) and (max-width:850px)
{
	html
	{
		font-size: 13px;
	}
}
@media (min-width:850px) and (max-width:900px)
{
	html
	{
		font-size: 13.5px;
	}
}
@media (min-width:900px) and (max-width:950px)
{
	html
	{
		font-size: 14px;
	}
}
@media (min-width:950px) and (max-width:1000px)
{
	html
	{
		font-size: 14.5px;
	}
}
@media (min-width:1000px) and (max-width:1050px)
{
	html
	{
		font-size: 15px;
	}
}
@media (min-width:1050px) and (max-width:1100px)
{
	html
	{
		font-size: 15.5px;
	}
}
@media (min-width:1100px) and (max-width:1150px)
{
	html
	{
		font-size: 16px;
	}
}
@media (min-width:1150px) and (max-width:1200px)
{
	html
	{
		font-size: 16.5px;
	}
}
@media (min-width:1200px)
{
	html
	{
		font-size: 17px;
	}
}



/* HEIGHT DEPENDENT */
@media (max-height:350px)
{
	section.page
	{
		min-height: 354px;
	}
}
@media (min-height:350px) and (max-height:375px)
{
	section.page
	{
		min-height: 379px;
	}
}
@media (min-height:375px) and (max-height:400px)
{
	section.page
	{
		min-height: 404px;
	}
}
@media (min-height:400px) and (max-height:425px)
{
	section.page
	{
		min-height: 429px;
	}
}
@media (min-height:425px) and (max-height:450px)
{
	section.page
	{
		min-height: 454px;
	}
}
@media (min-height:450px) and (max-height:475px)
{
	section.page
	{
		min-height: 479px;
	}
}
@media (min-height:475px) and (max-height:500px)
{
	section.page
	{
		min-height: 514px;
	}
}
@media (min-height:500px) and (max-height:525px)
{
	section.page
	{
		min-height: 539px;
	}
}
@media (min-height:525px) and (max-height:550px)
{
	section.page
	{
		min-height: 564px;
	}
}
@media (min-height:550px) and (max-height:575px)
{
	section.page
	{
		min-height: 589px;
	}
}
@media (min-height:575px) and (max-height:600px)
{
	section.page
	{
		min-height: 614px;
	}
}
@media (min-height:600px) and (max-height:625px)
{
	section.page
	{
		min-height: 639px;
	}
}
@media (min-height:625px) and (max-height:650px)
{
	section.page
	{
		min-height: 664px;
	}
}
@media (min-height:650px) and (max-height:675px)
{
	section.page
	{
		min-height: 689px;
	}
}
@media (min-height:675px) and (max-height:700px)
{
	section.page
	{
		min-height: 714px;
	}
}
@media (min-height:700px) and (max-height:725px)
{
	section.page
	{
		min-height: 739px;
	}
}
@media (min-height:725px) and (max-height:750px)
{
	section.page
	{
		min-height: 764px;
	}
}
@media (min-height:750px) and (max-height:775px)
{
	section.page
	{
		min-height: 799px;
	}
}
@media (min-height:775px) and (max-height:800px)
{
	section.page
	{
		min-height: 824px;
	}
}
@media (min-height:800px) and (max-height:825px)
{
	section.page
	{
		min-height: 849px;
	}
}
@media (min-height:825px) and (max-height:850px)
{
	section.page
	{
		min-height: 874px;
	}
}
@media (min-height:850px) and (max-height:875px)
{
	section.page
	{
		min-height: 899px;
	}
}
@media (min-height:875px) and (max-height:900px)
{
	section.page
	{
		min-height: 924px;
	}
}
@media (min-height:900px) and (max-height:925px)
{
	section.page
	{
		min-height: 949px;
	}
}
@media (min-height:925px) and (max-height:950px)
{
	section.page
	{
		min-height: 974px;
	}
}
@media (min-height:950px) and (max-height:975px)
{
	section.page
	{
		min-height: 999px;
	}
}
@media (min-height:975px) and (max-height:1000px)
{
	section.page
	{
		min-height: 1024px;
	}
}
@media (min-height:1000px) and (max-height:1025px)
{
	section.page
	{
		min-height: 1049px;
	}
}
@media (min-height:1025px) and (max-height:1050px)
{
	section.page
	{
		min-height: 1074px;
	}
}
@media (min-height:1050px) and (max-height:1075px)
{
	section.page
	{
		min-height: 1099px;
	}
}
@media (min-height:1075px) and (max-height:1100px)
{
	section.page
	{
		min-height: 1124px;
	}
}
@media (min-height:1100px) and (max-height:1125px)
{
	section.page
	{
		min-height: 1149px;
	}
}
@media (min-height:1125px) and (max-height:1150px)
{
	section.page
	{
		min-height: 1174px;
	}
}
@media (min-height:1150px) and (max-height:1175px)
{
	section.page
	{
		min-height: 1199px;
	}
}
@media (min-height:1175px) and (max-height:1200px)
{
	section.page
	{
		min-height: 1224px;
	}
}
@media (min-height:1200px) and (max-height:1225px)
{
	section.page
	{
		min-height: 1249px;
	}
}
@media (min-height:1225px) and (max-height:1250px)
{
	section.page
	{
		min-height: 1274px;
	}
}
@media (min-height:1250px) and (max-height:1275px)
{
	section.page
	{
		min-height: 1299px;
	}
}
@media (min-height:1275px) and (max-height:1300px)
{
	section.page
	{
		min-height: 1324px;
	}
}
@media (min-height:1300px)
{
	section.page
	{
		min-height: 1324px;
	}
}