@font-face {
    font-family: CarlitoF;
    src: url("../fonts/Carlito-Regular.ttf");
}

@font-face {
    font-family: CarlitoF;
    src: url("../fonts/Carlito-Italic.ttf");
    font-style: italic;
}

@font-face {
    font-family: CarlitoF;
    src: url("../fonts/Carlito-Bold.ttf");
    font-weight: bold;
}

@font-face {
    font-family: CarlitoF;
    src: url("../fonts/Carlito-BoldItalic.ttf");
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: TrashHandF;
    src: url("../fonts/trashhand.ttf");
}

html {
    font-size:100%;
}

body {
	background:#fff;
    font: 1.0em/1.6em Calibri,Carlito,CarlitoF,"Open Sans","Noto Sans","Helvetica Neue",FreeSans,Helvetica,Arial,sans-serif;
    margin:0;
    padding:0;
}

#site {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    /*max-width: 177vh;*/
    text-align:center;
    overflow: hidden;
}

#menu {
	position:fixed;
	right:0;
    top:1em;
	background: url(../layout/elements/menuFrame.png) top repeat-x, url(../layout/elements/menuFrameBottom.png) bottom repeat-x, rgba(255, 255, 255, 0.8);
	padding:0.4em;
	font-size:120%;
	font-weight:bold;
	line-height:2em;
    z-index: 10;
}

#menu:before {		/* menu fader */
	content:"";
	position:absolute;
	width:4em;
	height:100%;
	z-index:9;
	top: 0;
	left:0;
	margin-left:-4em;
	pointer-events: none;
	background: url(../layout/elements/menuFrame_fadeout.png) top/100% 15px no-repeat border-box, url(../layout/elements/menuFrameBottom_fadeout.png) bottom/100% 6px no-repeat border-box, linear-gradient(to left, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
}

#menu:after {		/* menu shadow */
	content:"";
	position:absolute;
	display:block;
	width:115%;
	height:10%;
	z-index:8;
	bottom: 0;
	left:0;
	margin-left:-4em;
	pointer-events:none;
	box-shadow: 0 0.2em 0.2em -0.1em rgba(0, 0, 0, .4);
}

.menuContent {
	position:relative;
	display:block;
	height:2em;
	line-height:2em;
	vertical-align: middle;
}

#menuLinks {
	margin-top:0.1em;
	margin-bottom:-0.1em;
	float:left;
}

.menuLinksOn {
	display:flex;
}

.menuLinksOff {
	display:none;
}

#menuFunctions {
	display:inline-block;

}

div.menuLink, div.languageButton, div.littleEmpireLogo {
	float:left;
    margin-top:0.06em;
}

div.littleEmpireLogo {
    line-height: 0;
    margin-top:0.1em;
    padding-left:1em;
    padding-right:1.2em;
    z-index:11;
}

div.littleEmpireLogo img {
    width:1.8em;
    height:1.8em;
}

a {
    color: #117c79;
}

a:hover {
    color: #0b3f3b;
}

#shortLink {
	line-height:0;
	height:2em;
	display:none;
	z-index:12;
	margin-right:4em;
}

#shortLink img {
	display:block;
	padding-left:1em;
	padding-right:1em;
	padding-top:0.6em;
	height:0.8em;
}

div.languageButton {
	margin:0;
	padding:0;
	line-height:0;
	display:inline;
	z-index:12;
}

div.languageButton a {
	margin:0;
	margin-top:0.1em;
	margin-bottom:0.1em;
	padding:0;
	display:inline-block;
	width:1.8em;
	height:1.8em;
	text-decoration:none;
	line-height:0;
}

div.langES a
{
	background:url("../layout/elements/lang_espa_inactive.svg") center center no-repeat;
	background-size:contain;
}

div.langES a:hover, div.langESactive a
{
	background:url("../layout/elements/lang_espa.svg") center center no-repeat;
	background-size:contain;
}

div.langEN a
{
	background:url("../layout/elements/lang_engl_inactive.svg") center center no-repeat;
	background-size:contain;
}

div.langEN a:hover, div.langENactive a
{
	background:url("../layout/elements/lang_engl.svg") center center no-repeat;
	background-size:contain;
}

div.langDE a
{
	background:url("../layout/elements/lang_deu_inactive.svg") center center no-repeat;
	background-size:contain;
}

div.langDE a:hover, div.langDEactive a
{
	background:url("../layout/elements/lang_deu.svg") center center no-repeat;
	background-size:contain;
}

div.menuLink a {
    display:inline-block;
    padding:0.9;
    padding-left:1.5em;
    padding-right:1.5em;
    margin:0;
    height:2em;
    text-decoration: none;
    border:none;
}

.menuLink:first-child {
	margin-left:-1.5em;
}


#menu .loadHidden {
	opacity:0.01;
	width:0.01em;
	height:0.01em;
	border:none;
}



/* ----------- */
/*    Footer   */
/* ----------- */

.footerBar {
	width:100%;
	background:#1e1e1e;
}

.footer {
    position: relative;
    display:block;
    margin-left:auto;
    margin-right:auto;

    height:0;
    padding-top:12%;

    font-size:1.32vw;
}

.footerAddress {
	position:absolute;
	top:12%;
	right:5%;
	height:77%;
	line-height:1;
	text-align:left;
	color:#dff2f2;
	font-size:85%;
	line-height:1.1;
}

.footerAddress h3 {
	color:#33bdba;
	margin:0;
	margin-bottom:0.25em;
	text-transform:uppercase;
	font-weight:normal;
	font-size:120%;
}

.footerAddress a {
	color:#56e2df;
}

.contactButtons {
	position:absolute;
	top:39%;
	left:5%;
	height:30%;
	display:flex;
	flex-direction:row;
	justify-content:left;
	align-items: center;
	text-align:left;
}

.contactButtons a {
	flex:1;
	height:3em;
	padding-left:2em;
	margin-right:3em;
	display: flex;
	color:#e6e6e6;
	text-decoration: none;
	font-size:1.2em;
	line-height:3em;
}

a.footerEmpireLogo {
	background:url(../layout/footer_logo.svg) left center no-repeat;
	background-size:contain;
	width:3em;
	height:3em;
	margin-right:2em;
	text-decoration:none;
	color:#e6e6e6;
}

a.contactFacebook {
	background:url(../layout/footer_facebook.png) left center no-repeat;
	background-size:1.5em;
}

a.contactInstagram {
	background:url(../layout/footer_instagram.png) left center no-repeat;
	background-size:1.5em;
}

a.contactYoutube {
	background:url(../layout/footer_youtube.png) left center no-repeat;
	background-size:1.5em;
}



@media only screen and (max-width: 55em) {  /* small screens */
	#menu {
	}

	#menu::after {		/* menu shadow */
		margin-left:-1em;
	}

	#shortLink {
		display:inline-block;
	}

	.littleEmpireLogo {
		display:inline;
		position:absolute;
		right:0;
		top:0;
	}

	#menuLinks {
		flex-direction: column;
		text-align:center;
		float:left;
		clear:both;
	}

	div.menuLink {
		float:none;
		display:block;
		text-align:left;
		padding-left:0;
		width:100%;
	}

	div.menuLink a {
		padding-left:0.95em;
	}

	.menuLink:first-child {
		margin-left:auto;
		margin-right:auto;
	}

	#menuFunctions {
		float:right;
		clear:both;
		display:inline-block;
		text-align:right;
		width:14em;
		line-height:0;
	}

	.flexbanner, .nosotros_puzzleBorder {
		display:block;
	}

	.flexspacer, .puzzlespacer {
		display:none;
	}

	.serviciosVideoContainer {
	    left:0;
	    width:100%;
	    height: 0;
	    padding-bottom: 56.25%;
	}

	.videoClose {	/* bigger close button on small screens */
		font-size:300%;
	}
}

@media only screen and (min-width:55em) {  /* intermediate screens */
	#menuLinks {
		display:inline;
	}

	.flexbanner, .nosotros_puzzleBorder {
		display:block;
	}

	.flexspacer, .puzzlespacer {
		display:none;
	}
}

@media only screen and (min-width: 77em) {	/* large screens */
	.flexspacer, .puzzlespacer {
		display:block;
	}

	.flexbanner, .nosotros_puzzleBorder {
		display:flex;
	}

	.banner {
		width: 75em;
		height:42.18em;	/* 16:9 width:height */
		padding-top:0;
		font-size:100%;
	}

	.banner_carousel {
		width: 100%;
		height:42.18em;
		padding-top:0;
		font-size:100%;
	}

	#menuLinks {
		display:inline;
	}

	.footer {
		width: 75em;
		height: 9em;  /* 8.3:1 width:height */
		padding-top:0;
		font-size:100%;
	}

	.servicios, .nosotros, .nosotrosSkyContainer, .nosotrosCityContainer, .nosotrosWhiteContainer, .nosotros_puzzleBorder_center {
		width:75em;
		font-size:100%;
	}

	.nosotros_puzzleBorder {
		font-size:100%;
	}
}