/*
DEFINITIONS:

dpi := 96 (May be 72 often, too. However systems use ever higher setting with time.)

unit := rem (Because it is multiplied by the most global font-size, which is - at one point - defined absolutely, if not in the HTML, then up in the browser. Thus everything scales.)

unit_media.query := px (Because the device's hardware screen is defined by its amount of pixels. Mostly use media query to show/hide elements, rearrange for usability on smaller devices.)

font-size_media.query := As an absolute value per media query or omit it and rely fully on relative dimensions measures like percent.

unit_graphics.bitmap := px (Because bitmap doesn't scale, is fixed at absolute dimensions.)

unit_graphics.vector := rem/em (Because a vector is scalable.)

unit_layout.non_text_containing := % (Because it must be independent of the set font-size and relative to screen dimensions, i.e. depends on the media queries or is a fully relative system. It must fit the real screen! If the font size is increased, then there already is space lost! Losing more space by increasing the paddings, margins too is not desirable then because scrolling left and right is not usable effectively because the information is spread on a 2 dimensional matrix, instead of a linear 1 dimensionsal one. This is why setting one absolute font size that depends on the media query's window width can be useful - as small devices allow zooming anyway! Of course it's even better to remove/merge/rearrange(linearize/serialize?) elements to still allow bigger size font size settings on high density pixel small dimension devices.)

unit_layout.with_text {
unit_space.horizontal := % (Because horizontal space is limited because it's fixed/constant, id est not desirably scrollable at normal zoom!)

unit_space.vertical := rem/em (Because vertical is along the 1 dimension of the linear matrix and 1.5 line spacing should remain constant if it's a design/structure element.)
}


*/

/*
 ===========================
 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
 */

/* Overrule bootstrap absolute dimensions, margins, paddings: */
h1 {
	font-size: 2.31rem;
	text-align: left;
}
ul
, ol
{
	padding: 0;
	margin: 0 0 0 0;
}

.navbar-inverse div.navbar-inner
{
	/*background-image: linear-gradient(to bottom, rgb(44, 103, 143), rgb(17, 17, 17));*/
	background-color: rgb(255, 248, 237);
	background-image: linear-gradient(to bottom, rgb(255, 248, 227), rgb(245, 238, 217));
}

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

/*
mirror background only
http://css-tricks.com/snippets/css/flip-an-image/transform
*/
ul#tiefe0 li:before
,ul#tiefe0 li::before
{
	color: transparent;
	content: "."; /* Required to be non-empty to allow width, height to take effect, to be sure it's also displayed as inline-block. */
	display: inline-block;
	position: absolute;
	height: 5rem;
	width: 10rem;
	background: transparent url("../images/horse_silhouette_logo.svg") 7px 0px / auto 99% no-repeat;
	left: -1.5rem;
	margin-top: 0;
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
	opacity: .5;
	filter: alpha(opacity=50);
	z-index: -1;
}

.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
/*	box-shadow: 0px 3px .62rem rgba(255, 255, 255, 0.125) inset;*/
	color: rgb(91, 69, 48);
}

div#contact-info input[type="submit"]
{
	background-color: #f00;
}
div#contact-info input[type="submit"]:hover
{
	background-color: #000;
}




/* ------------------------------------------------------------------
 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: linear-gradient(to bottom, #BAAD7B, #FFFFFE);
	font-family: 'Open Sans', 'SourceSansPro', 'Verdana', 'Arial', sans-serif;
	font-size: 1rem;
	line-height: 1.54rem;
	color: #2d2d2d;
	/*
	background-image: url("../images/redshift.png");
	background-image: url("http://www.wildtextures.com/wp-content/uploads/2012/01/wildtextures-seamless-blue-fabric-texture.jpg");
	*/
	background-color: rgb(44, 103, 143);
	background-color: black;
	background-color: #BAAD7B;
	background-repeat: repeat-x;
}


.container {
	/*padding: .77rem;*/
	/*
	background-color: rgba(252, 252, 252, 0.2);
	*/
	width: 94%;
}
section .container {
	box-shadow: .08rem .08rem 1.54rem white;
	background-color: rgb(255, 248, 227);
	padding: 3%;
}
.row {
	margin-bottom: 2.31rem;
}
div#slogan + div.row {
	margin-bottom: 0;
}

/* typography */
@font-face {
	font-family: 'SourceSansPro';
	src: url('../../fonts/source_sans_pro/SourceSansPro-Regular.eot');
	src: url('../../fonts/source_sans_pro/SourceSansPro-Regular.eot?#iefix') format('embedded-opentype'), url('../../fonts/source_sans_pro/SourceSansPro-Regular.otf.woff') format('woff'), url('../../fonts/source_sans_pro/SourceSansPro-Regular.ttf.woff2') format('woff2'), url('../../fonts/source_sans_pro/SourceSansPro-Regulatr.ttf'), url('../../fonts/source_sans_pro/SourceSansPro-Regular.otf') format('otf');
/*
	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,h2,h3,h4,h5,h6 {
	font-weight:normal;
}
h3 {
	font-size: 2.31rem;
	color: #333;
	font-weight:300;
}
p {
	font-weight: 400;
}
header {
	display:none;
	z-index: 99999;
	position:relative;
}
li, a, img {
	outline: none !important;
}
section {
	padding-top: 5rem;
	margin-bottom: 20rem;
	overflow: visible;
}
#page-1 {
}
.last-section {
	margin-bottom: 0;
	background-color: rgba(252,252,252, .5);
	background-color: rgb(252,252,252);
}
.section-title {
	font-family: 'NovecentowideBookBold';
	font-size: 3.85rem;
	line-height: 3.85rem;
	margin-bottom: 3.08rem;
	font-weight: normal;
}
.border {
	border-top: .08rem solid #f0f0f0;
	padding-top: 1.54rem;
}
a {
	color:#01A3B2;
}
a:hover {
	text-decoration:underline;
	color:#01A3B2;
}
#footer,
footer {
	margin-bottom: 0;
	padding: 1.15rem 0;
	color: inherit;
	font-family: 'SourceSansPro';
	background-color: rgb(255, 248, 237);
	background-image: linear-gradient(to bottom, rgb(255, 248, 227), rgb(245, 238, 217));
	background-repeat: repeat-x;
	border-color: rgb(37, 37, 37);
	border-width: 0px 0px 1px;
	box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
	position: relative;
	z-index: 1000;
}
#footer,
footer a {
	color:#fff;
	text-decoration:underline;
}
#footer,
footer img {
	max-height: 5.13rem;
}
input, textarea {
	-webkit-appearance: none;
	border-radius: 0;
}
.activation-message {
	text-align:center;
	font-size: 1.54rem;
	line-height: 1.69rem;
	padding: 3.85rem;
}
#page-2 .activation-message,#page-3 .activation-message,#page-4 .activation-message,#page-5 .activation-message {
	display:none;
}







.vertical_bar {
	position: absolute;  /* To allow scaling of page and limit to  max width. */
	right: 5%;
	width: 20%;
	height: 100%;
	top: 0;
	z-index: 10;
}
section:nth-of-type(1) .container * {
	z-index: 100;
	position: relative;
}
section ~ section .container,
section ~ footer .container
{
	z-index: 100;
	position: relative;
}
body {
	text-align: center;
}
div#wrapper {
	width: 100%;
	max-width: 100rem; /* 100 * default font size on root element (16px) = 1600px */
	margin: auto;
	text-align: left;
	position: relative;
}

/*
Night
<?php if (now()['H'] > 18 || now()['H'] < 6) { ?>
*/
.vertical_bar {
	background-color: rgb(194, 53, 46);
}

/*
Day
<?php } else { ?>
*/
.vertical_bar {
	background-color: rgb(157, 35, 30)
}


/*
<?php } ?>
*/

/*
.navbar-inverse .navbar-inner {
	background-image: linear-gradient('to bottom', rgb(0,0,0), rgba(134, 34, 34, .5));
}
*/






/* ----------------------------------------------------------------------------------------------------------
 02 Menu ----------------------------------------------------------------------------------------
 ---------------------------------------------------------------------------------------------------------- */

/* main menu and sub menu added by J.R.I.B.-Wein and our DynamicMenu of mathematics, also developed by J.R.I.*/
#main-nav {
	position: fixed;
	z-index: 100000;
	font-variant: small-caps;
	font-size: 1.25rem;
	top: .82rem;
	margin-top: 20rem;  /* space for logo */
	margin-left: -11rem;/* -12.82rem; */
	right: 5%;
	width: 20%;
}
nav .container
{
	width: 100%;
}
.nav_ul li  ul {
	display: none;
	position: relative;
	top: 1.54rem;
	margin-left: -10.26rem;
}
.nav_ul li.active + li ul,
.nav_ul li.current + li ul {
	display: inline;
}
#main-nav ul li {
	/*margin-right: .21rem; artifact red shine through on hover */
	display: block;
	margin-bottom: 1rem;

}
.nav_ul li.current,
.nav_ul li a.current,
.nav_ul li a:hover,
.nav_ul li a.active {
	color: #FFFDF5;
/*	background-color: rgb(255, 248, 227);
	color: rgb(91, 69, 48);*/
}
.nav_ul li a {
	color: #FFFFFE;
}

.navbar .nav {
	float: right;
}
#main-nav > .nav_ul > .nav_li a,
.navbar .nav > li > a {
	padding: .77rem 0 .77rem 1.15rem;

	font-family: 'Open Sans', 'Verdana', 'Arial', sans-serif;
	text-transform:uppercase;
	font-weight:400;
	padding-right: 1.15rem;
}
.navbar .nav > li > a:hover
,.navbar .nav > li.active > a
{
	background:transparent !important;
}
#mini-logo {
	width:auto;
	padding-top: 1rem;
	float:left;
	font-weight: bold;
	color: rgb(255, 255, 255);
}
#mini-logo img {
	/*
	position: fixed;
	left: 50%;
	margin-left: -1.15rem;
	*/
	height: 2.31rem; /* 4.31rem; */
	width:auto;
	display:block;
	float: left;
	margin-top: -13px;
	margin-right: .77rem;
	height: 8.31rem;
	position: absolute;
	left: 19px;
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}

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

#home-header {
	/*margin-top: -7.69rem;*/
	margin-bottom: 3.85rem;
}
#mini-link {
}
#logo-title {
	font-size:4.62rem;
	text-align:left;
	font-family: 'NovecentowideBookBold';
	font-weight:normal;
}
#mini-slogan {
	font-family: 'NovecentowideLightRegular';
	font-weight:normal;
	text-align:right;
	font-size: 1.38rem;
	padding-top: .62rem;
}
#slogan {
	display: block;
	overflow: hidden;
	margin-bottom: 0;
	width: 60%;
	background: url("../images/horse_silhouette_logo.svg") no-repeat scroll 100% 0 / 100% auto transparent;
	padding-right: 44%;
	padding-bottom: 10rem;
	padding-top: 5%;
	margin-top: -5%;
	text-align: left;
	min-height: 25rem; /* To fit the logo. */
}
div#slogan h1 {
	text-align: left;
	padding-left: 0.8rem;
}
div#slogan span {
	display: inline-block;
}
div#slogan h1:nth-of-type(1)
,#mini-logo-text
{
	font-size: 3.5rem;
	color: rgb(79, 58, 0) !important;
	font-variant: small-caps;
	margin-bottom: 1rem;
}
div#slogan h1:nth-of-type(2) > span {
	color: rgb(108, 82, 55) !important;
}
div#slogan h1:nth-of-type(3) {
}
div#slogan h1:nth-of-type(4) {
	font-size: 1.2rem;
	line-height: 1.9rem;
	color: rgb(144, 65, 32) !important;
	font-variant: small-caps;
	margin-bottom: 1rem;
}
.three-big {
	height: 18.46rem;
	font-family: 'Open Sans', 'SourceSansPro' !important;
}
.two-big {
	height: 10rem;
}
.one-big {
	height: 7.69rem;
}
.big-title {
	/*font-family: 'NovecentowideLightRegular';*/
	text-align: center;
	padding-top: 0;
	font-size: 2rem;
	line-height: 2rem;
	margin-bottom: 0rem;
	font-weight: normal;
	display:none;
}
.big-title span {
	/*background: #000;*/
	padding-right: .8rem;
}
.container h1 > span, h2 > span
,#mini-logo-text
{
	/*color: rgb(255, 255, 255) !important;*/
	color: rgb(91, 69, 48) !important;
}
#mini-logo-text
{
	margin-left: 70px;
}
#nav-home ul {
	list-style: none;
}
nav#nav-home ul li {
	display:table;
	position:relative;
}
.circle-nav a,
.circle-menu {
	width: 13rem;
	height: 11rem;
	display:block;
	background-color: #000;/*#01a3b2;*/
	-moz-border-radius: 6.5rem;
	-webkit-border-radius: 6.5rem;
	border-radius: 6.5rem;
	text-align:center;
	color:#fff;
	display:table-cell;
	vertical-align:middle;
	margin:auto;
	position:relative;
	font-size: 1.2rem;
	z-index: 1;
	font-family: 'NovecentowideLightRegular';
	background-image: url("../images/logo.png");
	background-repeat: no-repeat;
	background-size: 40%;
}

/*
1pt := 1/72 inch; dpi :=(often) 96;
 => 1pt(screen) = 96 px/inch (dpi) * 1/72 inch = 1.1/3 px
 <=>(*12) 12pt(screen) = 12 * 1.333... px = 16px
 */
.circle-nav a {
	width: 7rem;
	height: 1rem;
	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:#000;
}
span.arrow {
	display:block;
	background:url(../images/arrow.png) no-repeat;
	width:18px;
	height:9px;
	margin-left:-.69rem;
	position:absolute;
	bottom: 1.54rem;
	left:50%;
	z-index: 3;
}

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

#staff {
	overflow: hidden;
}
.col-title {
	font-family: 'NovecentowideLightRegular';
	font-size: 1.54rem;
	font-weight: normal;
	line-height: 1.54rem;
	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;
}

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

.magnifier {
	opacity: 1;
	filter: alpha(opacity=100);
	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;
	filter: alpha(opacity=70);
}
.magnifier:after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 0;
	filter: alpha(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;
	filter: alpha(opacity=100);
}

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

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



/* ----------------------------------------------------------------------------------------------------------
 07 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:2.31rem;
}
#find-us ul li {
	line-height:2.31rem;
	font-size:15px;
	font-weight:400;
}
#find-us ul li .contact-icon {
	margin:4px 3px 0;
}
#contact ul li {
	margin-bottom: .77rem;
}
ul.social {
	margin-top:1.54rem;
}
ul.social li {
	margin-right: .77rem;
	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: .08rem solid #999;
	box-shadow: none;
	margin-bottom: 1.54rem;
	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: .08rem 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: .77rem 1.54rem;
}
input[type="submit"]:hover {
	background: #000000;
}
span.wpcf7-not-valid-tip {
	background: none !important;
	border: 0 !important;
	color: red;
	font-size: 1.03rem;
	padding: .15rem;
	position: absolute;
	left: 20%;
	top: -78% !important;
	width: 280px;
	z-index: 100;
}
#contact-info, #find-us {
	position:relative;
}
#contact-info a {
	text-decoration:underline;
}


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

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


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

@media (max-width: 979px) and (min-width: 767px) {
	.navbar .nav {
		float: left;
	}
	.home-col h2 {
		font-size: 2.31rem;
		line-height: 2.31rem;
	}
	.circle-menu {
		font-size: 12px;
	}
}


@media (max-width: 979px) {
	/* HACK: Override bootstrap class that leads to misalignment horizontally: */
	.row
	{
		margin-left: 0;
	}
	.navbar-fixed-top, .navbar-fixed-bottom {
		position: fixed;
	}
	.navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner {
		padding: 0;
	}
	.nav-collapse ul {
		margin-top: .77rem;
		padding-top: 1.54rem;
	}
	.nav-collapse ul li {
		padding-bottom: 1.54rem;
	}
	.nav-collapse ul > li > a {
		padding: 0 .77rem 0 !important;
	}
	.circle-menu {
		height: 8rem;
	}
	#mini-logo {
		padding-left: .77rem;
		padding-top: 2rem;
	}
	#mini-slogan {
		padding-top: .62rem;
		font-size: 14px;
		line-height: 14px;
	}
	section {
	}
	#page-1 {
	}
	.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: 767px) {
	html {
		font-size: 50%; /* TODO Query device pixel density, relate to current window width, calculate absolute font size. */
		padding: 0;
	}
	section {
		padding: 0 inherit 0 0;
	}
	footer {
		padding-left: 1.54rem;
		padding-right: 1.54rem;
	}
	.three-big,.two-big,.one-big   {
		height: auto;
	}
	.navbar .nav {
		float: left;
	}
	#contact-info {
		clear: both;
		margin-top: 6.15rem;
	}
	#logo {
		text-align: center;
		width: 100%;
	}
	#logo img {
		width: 15%;
		display:block;
		margin:auto;
	}
	#mini-slogan {
		text-align:center;
		float:none;
	}
	.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
		margin: 0;
	}
	#home-header {
	}
	#nav-home ul li {
		width: 13.08rem;
		margin: 1.54rem auto 0;
	}
	.circle-menu {
		width: 8rem;
		height: 8rem;
	}
}


@media screen and (min-width: 980px)
{
	.collapsed
	{
		height: auto !important;
		overflow: visible !important;
		visibility: visible !important;
	}
}


@media screen and (max-width: 979px)
{
	#slogan
	{
		min-height: 20rem; /* To fit the logo. */
	}
	/*
	#mini-logo
	{
		height: 0;
		overflow: hidden;
		visibility: hidden; /* mini-logo still shown without it TODO further research the issue. * /
	}
	*/
	.navbar .btn-navbar
	{
		display: block;
		position: absolute;
		right: .5%;
		z-index: 1000000; /* this all does not have effect! */
	}
	.navbar-inverse .btn-navbar
	{
		color: rgb(255, 255, 255);
		text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
		background-color: rgb(91, 69, 48);
		background-image: linear-gradient(to bottom, rgb(91, 69, 48), rgb(81, 59, 38));
		background-repeat: repeat-x;
		border-color: rgba(255, 248, 227, 0.1) rgba(255, 248, 227, 0.1) rgba(255, 248, 227, 0.25);
	}
}

@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;
	}
}

@media (max-width: 767px)
{
	body
	{
		padding-left: 0;
		padding-right: 0;
	}

	#slogan
	{
		min-height: 25rem;
	}
}
@media screen and (max-width: 550px)
{
	html
	{
		font-size: 42%;
	}
	#slogan
	{
		min-height: 20rem;
	}
}