@import url(flags.css);
@import url(logos.css);

html {background: #000 url(../assets/images/se-partners-hero.jpg) no-repeat 50% 0%}
html {background-size: 1920px; background-attachment: fixed}
body {background: rgba(0,50,100,.6)}

/* Icons */
	@font-face {font-family: 'Icomoon'; src: url('icomoon.ttf') format('truetype');}
	[class^="icon-"], [class*=" icon-"] {
		font-family: 'Icomoon'; speak: none; font-style: normal; font-weight: normal;
		font-variant: normal; text-transform: none;	line-height: 1;
		/* Better Font Rendering =========== */
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	.icon-home:before {content: "\e902"}
	.icon-contact:before {content: "\e96b"}
	.icon-linkedin:before {content: "\eac9"}
	.icon-geographical:before {content: "\e9c9"}
	.icon-project:before {content: "\e99c"}
	.icon-network:before {content: "\e9bc"}

/* Nav icons */
	#nav-icons {list-style: none; font-size: 3em; padding: 0}
	#nav-icons li {display: inline-block; margin: 0 .3em}
	#nav-icons li a {color: #fff; text-decoration: none; opacity: 0.3}
	#nav-icons li a {
		transition: opacity 0.4s ease-out;
		-moz-transition: opacity 0.4s ease-out;
		-webkit-transition: opacity 0.4s ease-out;
	}
	#nav-icons li a:hover {opacity: 1}

	h1 #nav-icons {float: right; font-size: .8em; line-height: 1.3em}
	h1 #nav-icons li a {color: #999}
	h1 #nav-icons li.home {display: inline-block;}

/* Helpers */
	.noselect {
		-webkit-touch-callout: none; -webkit-user-select: none;	-khtml-user-select: none;
		-moz-user-select: none; -ms-user-select: none; user-select: none;
	}

/* Content */
	#global-wrapper {height: 100vh; padding-top: 120px; overflow: auto}
	#gmap {position: absolute; bottom: 0; left: 0; right: 0; top: 100%}

/* EU Map */
	#map-wrapper {font-size: 100%; position: absolute; top: 0; right: 0; bottom: 0}
	#map-wrapper .map-row {display: block}
	#map-wrapper .map-row .cell {display: inline-block; margin: .3em}
	#map-wrapper .map-row .cell {width: 3em; height: 3em}
	#map-wrapper .map-row .cell {border-radius: 3em}
	#map-wrapper .map-row .cell:before {content: "\00a0"}
	#map-wrapper .map-row .cell.fill {background: #fff}
	#map-wrapper .map-row .cell.flag {position: relative; cursor: pointer; background: #fff}
	#map-wrapper .map-row .cell.transparent {background: none}

	#map-wrapper .cell.flag .state {position: absolute; background: #fff; outline: none}
	#map-wrapper .cell.flag .state {top:0; left: 0; border-radius: 7em}
	#map-wrapper .cell.flag .state {width: 6.6em; height: 6.55em}

	#map-wrapper .cell.flag .state p {text-transform: uppercase;}
	#map-wrapper .cell.flag .state p {text-align: center; position: absolute}
	#map-wrapper .cell.flag .state p {font-size: 10px; color: #08c; line-height: 9em}

	#map-wrapper .cell.flag .state p {display: block; top: -1px; left: -1px; right: -1px; bottom: -1px; background: #fff}
	#map-wrapper .cell.flag .state p {margin: 0; padding: 0; border-radius: 7em}

	#map-wrapper .cell.flag .state {background-repeat: no-repeat; background-size: cover}
	#map-wrapper .cell.flag .state {background-position: 50% 50%; box-shadow: inset 0 0 4em rgba(255,255,255,0.3), inset 0 0 5px #fff, 0 0 2px #fff}

	#map-wrapper .cell.flag.md .state {background-image: url(../assets/images/flags/md.png)}
	#map-wrapper .cell.flag.fr .state {background-image: url(../assets/images/flags/fr.png)}
	#map-wrapper .cell.flag.hr .state {background-image: url(../assets/images/flags/hr.png)}
	#map-wrapper .cell.flag.sr .state {background-image: url(../assets/images/flags/sr.png)}
	#map-wrapper .cell.flag.al .state {background-image: url(../assets/images/flags/al.png)}
	#map-wrapper .cell.flag.ba .state {background-image: url(../assets/images/flags/ba.png)}
	#map-wrapper .cell.flag.bg .state {background-image: url(../assets/images/flags/bg.png)}
	#map-wrapper .cell.flag.me .state {background-image: url(../assets/images/flags/me.png)}
	#map-wrapper .cell.flag.mk .state {background-image: url(../assets/images/flags/mk.png)}
	#map-wrapper .cell.flag.ro .state {background-image: url(../assets/images/flags/ro.png)}
	#map-wrapper .cell.flag.tr .state {background-image: url(../assets/images/flags/tr.png)}
	#map-wrapper .cell.flag.xk .state {background-image: url(../assets/images/flags/xk.png)}

	.cell.fill {opacity: 0.3}

	#map-wrapper .cell.flag .state p {
		opacity: 0;
		transition: opacity 0.2s ease-out;
		-moz-transition: opacity 0.2s ease-out;
		-webkit-transition: opacity 0.2s ease-out;
	}

	#map-wrapper .cell.flag:hover .state p {opacity: 1}

	#map-ribbon {background: #08c; max-height: 450px; margin-bottom: 3em; position: relative; z-index: 3}
	#map-ribbon #map-ss {background: url(../assets/images/map-ss.png) no-repeat 50% 50%; height: 450px}
	#map-ribbon #map-ss-text {color: #fff}

	#map-ss-text p, #map-ss-text h3 {font-family: 'Open Sans Condensed', sans-serif}
	#map-ss-text p {font-size: 1.6em; line-height: 1.5em}
	#map-ss-text h3 {font-size: 3.5em; margin-top: 1em}
	#map-ss-text .btn {margin-bottom: 2em}

	#map-wrapper .popover-title {color: #999}
	#map-wrapper .popover-content {color: #333; width: 200px; font-size: .75em}
	#map-wrapper .popover-content p {margin: 0.4em 0; text-align: left;}
	#map-wrapper .popover-content p:last-child {margin: 1em 0 0.4em}

/* Homepage */
	#frontpage {cursor: default; color: #fff; background: none; margin: 0; padding: 0; height: 100vh}
	#frontpage h1, #frontpage h2 {font-family: 'Open Sans Condensed', sans-serif; margin: 0; padding: 0}
	#frontpage h1 {font-size: 12vh; text-shadow: 1px 1px 5px rgba(0,0,0,0.3); margin-top: 30vh; margin-bottom: .1em}
	#frontpage h2 {color: #05EAFF; text-transform: uppercase; font-size: 2.5em; text-shadow:0 0 30px #08c;}
	#frontpage h2 p {margin: 20px; color: #fff; opacity: 0.3; text-shadow: none; font-size: .7em}
	#frontpage h2 p small {margin: 0 .3em; color: #fff; font-size: .8em}

	#frontpage a.btn {font-size: 2.5em; padding: .3em .7em; text-shadow: 1px 1px 1px rgba(0,0,0,0.3);}
	#frontpage a.btn {position: absolute; left: calc(50% - 3.5em); bottom: 30vh; width: 7em}

	#frontpage #nav-icons {position: absolute; left: 0; right: 0; bottom: 10vh}
	#frontpage #nav-icons li {margin: 0 4vw; font-size: 6vh}

/* Navbar */
	#navbar {background: #fff !important; border: none; right: 15px}

	#navbar .nav {width: 100%}
	#navbar .nav li {width: 20%; text-transform: uppercase; text-align: center; font-size: 1.3em; font-weight: bold}
	#navbar .nav li {padding: 24px 0}
	#navbar .nav li a {line-height: 1.5em; font-family: 'Open Sans Condensed', sans-serif; padding: 0.5em 1.35em}	

	#navbar li.home {position: relative; height: 120px; cursor: pointer}	
	#navbar li.home a, #navbar li.home .hover {position: absolute; left: calc(50% - 50px); top: 0; bottom: 0; right: calc(50% - 50px)}
	#navbar li.home a, #navbar li.home .hover {width: 50px; margin: 0 auto; opacity: 0}
	#navbar li.home a, #navbar li.home .hover {background: url(../assets/images/logo-sprite-color.png) no-repeat 0% 50%}
	#navbar.clear li.home a, #navbar.clear li.home .hover {background: url(../assets/images/logo-sprite.png) no-repeat 0% 50%}

	#navbar li.home a {background-position: 100% 50%}
	#navbar li.home .hover {background-position: 0% 50%}
	#navbar.clear li.home a {background-position: 100% 50%}
	#navbar.clear li.home .hover {background-position: 0% 50%}
	
	#navbar .navbar-toggle .icon-bar {background: rgba(0,0,0,0.5))}
	#navbar .navbar-toggle:hover .icon-bar {background: #00BADE}

	#navbar.clear .navbar-toggle .icon-bar {background: #fff}
	#navbar.clear .navbar-toggle:hover .icon-bar {background: #05EAFF}

	#navbar .lang-btn {position: absolute; border: none; border-radius: 10em}
	#navbar .lang-btn {font-size: 14px; width: 30px; height: 30px; line-height: 30px}
	#navbar .lang-btn {top: 50%; outline: none; z-index: 9999}
	#navbar .lang-btn.en {left: calc(50% - 75px)}
	#navbar .lang-btn.fr {right: calc(50% - 75px)}

	#navbar.clear .lang-btn {background: none; color: #fff}
	#navbar.clear .lang-btn.active {background: #fff; color: #274872}

	#navbar .lang-btn {background: none; color: #777}
	#navbar .lang-btn.active {background: #777; color: #fff}

	#navbar li.home a {opacity: 1}
	#navbar li.home:hover a {opacity: 0}
	#navbar li.home:hover .hover {opacity: 1}

	#navbar .nav li.home * {
		transition: opacity 0.2s ease-in-out;
		-moz-transition: opacity 0.2s ease-in-out;
		-webkit-transition: opacity 0.2s ease-in-out;
	}
	#navbar .navbar-toggle .icon-bar {
		transition: background-color 0.2s ease-in-out;
		-moz-transition: background-color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out;
	}

	#navbar li a {  
		transition: color 0.2s ease-in-out;
		-moz-transition: color 0.2s ease-in-out;
		-webkit-transition: color 0.2s ease-in-out;
	}
	#navbar li a:hover {color: #00BADE !important}

	#navbar.clear li a:hover {color: #05EAFF !important}
	#navbar.clear li a {color: #fff}
	#navbar.clear {background: none !important}


/* Footer */
	footer {color: rgba(255,255,255,0.5); padding-bottom: .5em}
	footer .powered a {background-repeat: no-repeat; padding-right: 24px; background-position: 100% 100%}
	footer .powered a {text-decoration: none; color: #fff; opacity: 0.5; height: 16px !important; display: inline-block;}

	footer:hover a {opacity: 1}
	footer .powered a {
		transition: opacity 0.3s ease-in-out;
		-moz-transition: opacity 0.3s ease-in-out;
		-webkit-transition: opacity 0.3s ease-in-out;
	}

	footer.inverted {color: rgba(0,0,0,0.5)}
	footer.inverted .powered a {color: #000; background-position: 100% 0%}


#scrolldown {position: absolute; bottom: 2vh; left: 0; right: 0}
#scrolldown {color: #fff; font-size: 5em; display: block; opacity: 0.2}
#scrolldown:hover {opacity: .6}
#scrolldown {
	transition: opacity 0.4s ease-out;
	-moz-transition: opacity 0.4s ease-out;
	-webkit-transition: opacity 0.4s ease-out;
}


.page-wrapper {background: #fff; position: relative;}
.page-wrapper.clear {background: none; color: #fff}
.page-wrapper h1, .page-wrapper h2 {font-family: 'Open Sans Condensed', sans-serif; margin: .5em 0}
.page-wrapper h1 {font-size: 5em}

.page-wrapper .row {padding: 1em 0}
.page-wrapper hr {margin: 2em 0; padding: 1em 0}

.page-wrapper h2 {font-size: 3em; text-align: center; color: #666; line-height: 1.5em; width: 80%; margin: auto; margin-top: 1em}
.page-wrapper p {font-size: 1.3em; margin: 1.5em 0}

.page-wrapper p.lead {margin: 0 auto; text-align: center; min-height: 350px}
.page-wrapper p.lead {font-family: 'Open Sans Condensed', sans-serif; font-size: 1.8em; color: rgba(0,0,0,0.7)}
.page-wrapper p.lead i {display: block; color: rgba(0,0,0,0.2); font-size: 4.5em; margin: .5em 0 .3em 0}

.page-wrapper div.logo {background: url(../assets/images/logo.png) no-repeat 50% 50%; margin: 3em 0; min-height: 200px}

.bullet-wrapper {background: #08c; color: #fff}
.bullet-wrapper {font-family: 'Open Sans Condensed', sans-serif; font-size: 2em}
.bullet-wrapper ul li {margin: 2em 0}

.container {position: relative;}
h2.left {color: rgba(255,255,255, 0.6); font-size: 2em; position: absolute}
h2.left {text-align: left; top: 60vh; left: 16px; margin: 0; width: 30%}

/* Bubble wrapper */
	#bubble-wrapper {position: relative; padding: 5em; margin-top: 2em}
	#axis {position: absolute; left: 50%; width: 5px; background: #08c; top: 0; bottom: 0}

	#axis {
		background: #fff;
		background: -moz-linear-gradient(top,  #fff 0%, #08c 15%, #08c 85%, #fff 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(15%,#08c), color-stop(85%,#08c), color-stop(100%,#fff));
		background: -webkit-linear-gradient(top,  #fff 0%,#08c 15%,#08c 85%,#fff 100%);
		background: -o-linear-gradient(top,  #fff 0%,#08c 15%,#08c 85%,#fff 100%);
		background: -ms-linear-gradient(top,  #fff 0%,#08c 15%,#08c 85%,#fff 100%);
		background: linear-gradient(to bottom,  #fff 0%,#08c 15%,#08c 85%,#fff 100%);
	}

	#bubble-wrapper .bubble {background: #08c; color: #fff; width: 40%; margin: 0 auto; position: relative;}
	#bubble-wrapper .bubble {padding: 0; border-radius: .5em; text-align: center; margin-bottom: 3em}
	#bubble-wrapper .bubble p {font-family: 'Open Sans Condensed', sans-serif; font-size: 2em}
	#bubble-wrapper .bubble p {padding: .5em 1em}

	#bubble-wrapper .bubble span {position: absolute; width: 2em; height: 2em; display: block; top: calc(50% - 1em)}
	#bubble-wrapper .bubble span {background: #08c; border-radius: 2em; border: 5px solid #fff}

	#bubble-wrapper .bubble .arrow {position: absolute; top: calc(50% - 20px)}
	#bubble-wrapper .bubble .arrow {width: 0; height: 0; border-style: solid; -webkit-transform:rotate(360deg)}
	#bubble-wrapper .bubble.left .arrow {right: -20px; border-width: 20px 0 20px 34.6px; border-color: transparent transparent transparent #08c}
	#bubble-wrapper .bubble.right .arrow {left: -20px; border-width: 20px 34.6px 20px 0; border-color: transparent #08c transparent transparent}

	#bubble-wrapper .bubble.left {margin-right: 60%}
	#bubble-wrapper .bubble.right {margin-left: 60%}

	#bubble-wrapper .bubble.left span {right: calc(-27.5% - 1em + 8px)}
	#bubble-wrapper .bubble.right span {left: calc(-27.5% - 2px)}

	#bubble-wrapper .fade {position: absolute; top: 0; height: 100px; left: 0; right: 0; background: #c00; width: 100%}

	#bubble-wrapper .bubble:hover span {border: 3px solid #fff}











/* Parallax base styles
	--------------------------------------------- */

	.parallax {    
		height: 500px; /* fallback for older browsers */
		height: 100vh;    
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-perspective: 310px;
		perspective: 310px;
		-webkit-perspective-origin-x: 100%;
		perspective-origin-x: 100%;    
	}

	.parallax__group {
		position: relative;
		height: 500px; /* fallback for older browsers */
		height: 100vh;    
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
	box-shadow: 0 0 20px rgba(0,0,0,0.7)
	}

	.parallax__layer {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		-webkit-transform-origin-x: 100%;
		transform-origin-x: 100%;
	}

	.parallax__layer--fore {
		-webkit-transform: translateZ(90px) scale(.7);
		transform: translateZ(90px) scale(.7);
		z-index: 1;
	}

	.parallax__layer--base {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		z-index: 4;
	}

	.parallax__layer--back {
		-webkit-transform: translateZ(-300px) scale(2);
		transform: translateZ(-300px) scale(2);
		z-index: 3;
	}

	.parallax__layer--deep {
		-webkit-transform: translateZ(-600px) scale(3);
		transform: translateZ(-600px) scale(3);
		z-index: 2;
	}


	/* demo styles
	--------------------------------------------- */

	body, html {
		overflow: hidden;
	}


	.parallax {
		font-size: 200%;
	}

	 /* centre the content in the parallax layers */
	.title {
		text-align: center;
		position: absolute;
		left: 50%;
		top: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		color: #333;
		font-size: 220%;
		line-height: 1.15em;
		font-family: 'Open Sans Condensed', sans-serif;    
		background: rgba(255,255,255,0.9);
		padding: .2em .3em;
		border-radius: .5em;
		width: 520px;
		box-shadow: .1em .1em .1em rgba(0,0,0,0.2)
	}

	.title .logos {text-align: center; margin: .4em 0 .2em 0}
	.title .logos .energy-sprite,
	.title .logos .it-sprite,
	.title .logos .oil-sprite,
	.title .logos .telco-sprite,
	.title .logos .real-sprite {
		display: inline-block;
		margin: .1em .2em
	}


	/* style the groups
	--------------------------------------------- */

	#group1 {
		z-index: 5; /* slide over group 2 */    
		color: #333 !important
	}
	#group1 .parallax__layer--base {
		background: #fff;
	}
	
	#group1 .title {width: 960px; box-shadow: none; line-height: inherit;}
	#group1 .title .text {font-size: 50%; margin-top: 1em}

	#group2 {
		z-index: 3; /* slide under groups 1 and 3 */    
	}
	#group2 .parallax__layer--back {
		background: url(../assets/images/slides/oil-gas-engineering.jpg) no-repeat 50% 50%;
		background-size: cover;
	}

	#group3 {
		z-index: 4; /* slide over group 2 and 4 */    
	}
	#group3 .parallax__layer--base {
		background: url(../assets/images/slides/renewable-energy.jpg) no-repeat 50% 50%;
		background-size: cover;
	}

	#group4 {
		z-index: 2; /* slide under group 3 and 5 */    
	}
	#group4 .parallax__layer--deep {
		background: url(../assets/images/slides/infrastructure-real-estate.jpg) no-repeat 50% 50%;
		background-size: cover;
	}

	#group5 {
		z-index: 3; /* slide over group 4 and 6 */
	}
	#group5 .parallax__layer--base {
		background: url(../assets/images/slides/telecommunication.jpg) no-repeat 50% 50%;
		background-size: cover;
	}

	#group6 {
		z-index: 2; /* slide under group 5 and 7 */    
	}
	#group6 .parallax__layer--back {
		background: url(../assets/images/slides/it-outsourcing.jpg) no-repeat 50% 50%;
		background-size: cover;
	}

	#group7 {
		z-index: 3; /* slide over group 7 */
	}
	#group7 .parallax__layer--base {
		background: #08c
	}

	#group7 .title {background: none; box-shadow: none; color: #fff; border-radius: 0; width: 100%; margin: .5em 0}
	#group7 .title .btn {font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important; font-size: .4em}
	#group7 .title h3 {font-size: .7em}
	#group7 .title #nav-icons {font-size: 2em}
	#group7 .title #nav-icons li {margin: .5em 1em 0 1em}
	
/* Contact page */
#contact-wrapper p {font-size: 1.15em}
#contact-wrapper p .flag:before {margin: 2px 0 0 5px}
.page-wrapper .alert ul {list-style: none;}
.page-wrapper .alert ul li p {margin: 1em 0; font-size: 1.2em}

/* Responsive overrides */

@media (max-width: 768px) {	
	html {background-size: cover}
	#global-wrapper {padding-top: 90px}

	.title {font-size: 140%; width: 75%; padding: .2em .2em .3em .2em;}	
	#group1 .title {width: 90%; box-shadow: none; line-height: inherit}
	#group1 .title .text {font-size: 50%}
	
	/*#navbar {left: 0; background: none !important}*/
	#navbar li.home {width: 37px; height: 75px; margin-left: 30px}
	#navbar li.home a, #navbar li.home .hover {background-size: auto 100% !important; padding: 0; margin: 0}
	#navbar li.home a, #navbar li.home .hover {left: 0; top: 0; bottom: 0; right: 0; width: 100%}
	#navbar li.home a {background-position: 100% 0% !important}
	#navbar li.home .hover {background-position: 2% 0% !important}

	#bs-navbar-collapse {background: #fff; position: absolute; top: 0; left: 0; right: 65px; right: 0}
	#bs-navbar-collapse {box-shadow: 0 0 30px rgba(0,0,0,0.3)}
	#bs-navbar-collapse .nav {width: calc(100% - 2em); padding: 1em .75em}
	#bs-navbar-collapse .nav li {width: 100%; padding: 1vh 0}
	#bs-navbar-collapse .nav li a {color: #999; text-align: left;}

	.navbar-toggle {padding: 15px; margin:  25px 0 25px 15px; border: none; background: none !important}
	.navbar-toggle:hover .icon-bar {background: #05EAFF}	
	#bs-navbar-collapse .navbar-toggle .icon-bar {height: 2px !important; background: #777 !important}

	#frontpage h1 {font-size: 9vh}
	#frontpage h2 {font-size: 3.5vh; margin-top: .5em}
	#frontpage h2 p {font-size: 1em}
	#frontpage a.btn {font-size: 5vh; bottom: 25vh}
	#frontpage #nav-icons {bottom: 8vh}

	.title #nav-icons {font-size: 1em !important}
	.title #nav-icons li {margin: .7em !important}

	.page-wrapper h1.clearfix {font-size: 8vh}
	.page-wrapper h1.clearfix * {float: none !important; text-align: center;}
	.page-wrapper h1.clearfix #nav-icons {margin-top: 2vh}

	.page-wrapper h2 {font-size: 6vh}
	.page-wrapper p.lead {font-size: 4vh}

	#map-ss-text h3 {font-size: 12vw}

	.bullet-wrapper {font-size: 1.6em}

	#bubble-wrapper {padding: 5em 0}
	#bubble-wrapper .bubble {font-size: 2vh}

	footer {font-size: 12px}


	#navbar .lang-btn {position: absolute; border: none; border-radius: 10em}
	#navbar .lang-btn {font-size: 14px; width: 30px; height: 30px; line-height: 30px}
	#navbar .lang-btn {right: 2em !important; left: auto !important; outline: none; z-index: 9999}
	#navbar .lang-btn.fr {top: calc(100% - 5em) !important}
	#navbar .lang-btn.en {top: calc(100% - 8em) !important}

	#navbar .lang-btn {background: none !important; color: #777 !important}
	#navbar .lang-btn.active {background: #777 !important; color: #fff !important}

}
/*
@media (min-width: 992px) and (max-width: 996px) and (orientation: landscape) {
	#map-wrapper {font-size: .35em !important; right: 20vw !important}
	h1.left {top: -4vh !important; font-size: 3.5em !important}
	h2.left {top: 30vh !important}
}
*/

/* Portrait mode */
@media (max-width: 768px) and (orientation: portrait) {

	footer div {float: none !important; font-size: .9em}
	footer div p {width: 100%; text-align: center; margin: .1em 0}
	
	#navbar {right: 0}
	
	#map-wrapper {font-size: 1.1vw; top: 25vh; left: 3vw}
	h1.left {font-size: 10vw !important}
	h2.left {position: static;}
	h2.left {color: rgba(255,255,255, 0.6); font-size: 1em; line-height: 1.3em}
	h2.left {text-align: center; margin: 0; width: 100%; padding: 0}

	#frontpage h1 {font-size: 9vh; margin-top: 40%}
	#map-wrapper .cell.flag .state p {color: transparent;}
}

/* Landscape mode */
@media (max-width: 768px) and (orientation: landscape) {

	html {background-size: cover}	
	#global-wrapper {padding-top: 65px}
	footer, footer * {padding-bottom: 0}	
	footer div {font-size: .8em}

	#frontpage h1 {font-size: 8vw}
	#frontpage h2 {font-size: 3vw; margin-top: .5em}
	#frontpage h2 p {display: none}
	#frontpage #nav-icons {top: 15px}
	#frontpage #nav-icons li {font-size: .8em}
	#frontpage a.btn {font-size: 4vw; bottom: 25vh}

	#navbar {height: 65px; right: 0 !important}
	#navbar li.home {width:22px; height: 48px}
	#navbar .navbar-toggle {margin: 10px 5px 10px}
	#bs-navbar-collapse .nav li {width: 100%; padding: 0}

	#nav-icons {top: auto !important; height: 12vh; font-size: 2em}

	.title #nav-icons {font-size: 1em !important}
	.title #nav-icons li {margin: .7em !important}

	.page-wrapper h1.clearfix {font-size: 7vw}	
	.page-wrapper h1.clearfix #nav-icons {margin-top: 2vh}	

	.page-wrapper h2 {font-size: 6vw}
	.page-wrapper p.lead {font-size: 4vw}

	#bubble-wrapper {padding: 5em 0}
	#bubble-wrapper .bubble {font-size: 2vw}

	#map-wrapper {font-size: .5vw; top: 5vh; right: 10vw}
	#map-wrapper .cell.flag .state p {color: transparent;}
	h1.left {font-size: 4vw !important; position: absolute; left: 0}
	h2.left {font-size: 2.5vw; top: 18vh}

	#map-ss-text h3 {font-size: 8vw}

}

@media (min-width: 768px) {	
	#navbar .nav li a {padding: 0.5em 0}
	#frontpage #nav-icons {bottom: 7vh}
	#frontpage a.btn {font-size: 5vh; bottom: 23vh}
}

@media (max-width: 992px) {
	
	.page-wrapper h1.clearfix * {float: none !important; text-align: center;}
	.container .row .logo {margin: 1em 0}

}

@media (min-width: 768px) and (max-width: 992px) {
	
	html {background-size: 1200px}
	#navbar .nav li {font-size: 1.15em}	
	#navbar .nav li a {padding: 0.8em 0}

	h1.clearfix {font-size: 4.2em}
	h1 #nav-icons {display: block; float: none; text-align: center;}
	h1 #nav-icons li {font-size: .9em}

	#frontpage h2 {font-size: 6vh}
	#frontpage h2 p {margin: 1vh}
	#frontpage a.btn {font-size: 5vh; bottom: 25vh}

	.title {font-size: 150%; width: 40%}
	.title #nav-icons {font-size: .7em !important}
	.title #nav-icons li {margin: .7em !important}

	#group1 .title {width: 80%}
	#group1 .title .text {font-size: 50%}

	#map-wrapper {font-size: .5em; top: 5vh}
	#map-wrapper .cell.flag .state p {color: transparent;}
	h1.left {position: absolute; font-size: 3em}
	h2.left {color: rgba(255,255,255, 0.6); font-size: 1.5em; position: absolute; line-height: 1.3em}
	h2.left {text-align: left; top: 35vh; left: 16px; margin: 0; width: 30%}
}

@media (min-width: 992px) and (max-width: 1200px) {	
	#contact-wrapper p span.text-muted {display: block;}
	#contact-wrapper p .flag:before {margin: 0}
	#global-wrapper .page-wrapper h2.left {top:50vh;}
	#map-wrapper .cell.flag .state p {font-size: 9px; color: #08c; line-height: 7.75em}
}

@media (min-width: 992px) {	
	#navbar .nav li a {padding: 0.5em .35em}

	h1.clearfix {font-size: 4.2em}
	h1 #nav-icons li {font-size: .9em}

	#map-wrapper {font-size: .55em; top: 2vh; right: 0}
	.title .btn {margin: 3em 0 1em}
	.title #nav-icons li {font-size: .6em}

	h1.left {position: absolute; top: 3vh; left: 0}
	h2.left {color: rgba(255,255,255, 0.6); font-size: 1.5em; position: absolute}
	h2.left {text-align: left; top: 35vh; left: 16px; margin: 0; width: 30%}

}

@media (max-width: 1200px) {

	#map-ss-text h3 {margin-top: 0.5em}

}

@media (min-width: 1200px) {
	#map-wrapper {font-size: .9em; top: 1vh; right: 5em}

	h1.left {position: static;}
	h2.left {color: rgba(255,255,255, 0.6); font-size: 2em; position: absolute}
	h2.left {text-align: left; top: 55vh; left: 16px; margin: 0; width: 30%}

	#navbar .nav li a {padding: 0.5em 1.35em}
	#frontpage a.btn {font-size: 2.5em; bottom: 30vh}
	.title #nav-icons li {font-size: .5em}

}

@media (min-width: 1600px) {	
	html {background-size: cover}
}

/* Hide language selection controls */
#navbar .lang-btn {display: none}