@viewport {
    width: device-width;
}

@-ms-viewport{
    width: device-width;
}

body {
	/*background-image: linear-gradient(to top, #1176c5 0%, #37a1f4 100%);*/
	/*width:1398px;*/
	/*height:807px;*/
	top:0px;
	left:0px;
	right: 0px;
	bottom: 0px;
	width: 100%;
	height: 100%;
	/*height:5000px;*/
	margin: 0px;
	/* overflow: hidden; */

	font-family: 'Roboto Condensed', sans-serif;
	font-size: 16px;
	font-weight: 700;
	color:#4d4d4f;
	overflow-x: hidden;
}

/*flag next to rectangle*/
.border_logo_lan{
	position: relative;
	width: 25px;
	height: 50px;
	border-radius: 50%;
	border:1px solid transparent;
 	display: inline-block;
}

/*position the flag*/
.language{
	margin-top: 12px;
}

#ge, #nl, #it {
	display: none;
}
#ge2, #nl2, #it2 {
	display: none;
}

/*make uk flag opacity*/
#en{
	opacity: 0.8;
}

/*progress bar page*/
#firstline{
	font-size: 40px;
	padding-right: 30px;
	padding-left: 30px;
}

@media only screen and (min-width: 768px) {
	#firstline{
		font-size: 40px;
	}
}

#secondline{
	font-size: 40px;
	padding-bottom: 25px;
}

#percent{
	width:526px;
	height:41px;
	color: #ff6602;
	font-size: 35px;
}
#percentNature{
	width:526px;
	height:41px;
	color: #ff6602;
	font-size: 35px;
}
#percentOffice{
	width:526px;
	height:41px;
	color: #ff6602;
	font-size: 35px;
}
.container {
	display: -webkit-box;
 	display: -ms-flexbox;
 	display: flex;

    -webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;

    -webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;

	/* -ms-flex-wrap: wrap;
    flex-wrap: wrap; */

    position: fixed;

    width: 100%;
    height: 100%;
    top: 0;
    right:0;
    z-index: 5;
    /*z-index: 0;*/
}

@media only screen and (min-width: 768px) {
	.container {


		/* -ms-flex-pack: distribute;
		justify-content: space-around; */
		-webkit-box-pack: center;
	        -ms-flex-pack: center;
	            justify-content: center;

		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;

		/* -ms-flex-wrap: wrap;
		flex-wrap: wrap; */


		z-index: 5;
		/*z-index: 0;*/
	}
}

/*position button*/
.spacelogo{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	/* -webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between; */

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
    width: 100%;
    height: 100%;
    z-index: 5;
}

@media only screen and (min-width: 768px) {
	.spacelogo{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;

		/* -ms-flex-pack: distribute;
		justify-content: space-around; */

		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	    width: 100%;
	    height: 100%;
	    z-index: 5;
	}
}

/*position text and graph in introduction page*/
.introisland{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-ms-grid-row-align: center;
	align-items: center;

	z-index: 5;
	width: 100%;
	margin-left: : 50px;
	margin-right: 50px;


}

@media only screen and (min-width: 768px) {
	.introisland{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-ms-flex-pack: distribute;
		justify-content: space-around;

	    width: 100%;
	    z-index: 5;
	    max-width: 960px;

	}
}

/*text in introduction page*/
.words{
	width: 100%;
    max-width: 500px;
	/*height:42px;*/
	color:#363636;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight:300;
	line-height: 21px;
	text-align: center;
}

@media only screen and (min-width: 768px) {
	.words{
		width: 33.3%;
		max-width:280px;
	}
}

/*position title progress image 123 in introduction page*/
.aboutcolumn{
	display: block;
    height: auto;
    text-align: center;
}

.aboutcolumn p {
  margin-top: 0;
}

@media only screen and (min-width: 768px) {
	.aboutcolumn {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-ms-flex-pack: distribute;
		justify-content: space-around;
	    width: 100%
	}
}

/*progress image*/
.process-line {
	display: none;
}

@media only screen and (min-width: 768px) {
	.process-line {
		display: block;
	}
}

.title {
	font-size: 40px;
	padding-left: 30px;
	padding-right: 30px;
}

@media only screen and (min-width: 768px) {
	.title {
		font-size: 40px;
	}
}

#logo{
	/*margin-top: 51px;*/
	margin-left: 50px;
}

/*logo except sgs*/
#fb1{

	margin-right: 5px;
	cursor: pointer;
}

@media only screen and (min-width: 768px) {
	#fb1{

		margin-right: 50px;
		cursor: pointer;

	}
}
/*logo except sgs in container*/
#fb2{

	margin-right: 50px;
	cursor: pointer;

}

/*progress bar in progress page*/
#myprogress{
	position: relative;
	width: 300px;
	height: 5px;
	background-color: rgba(255,102,2,0.22);
}
#myprogressNature{
	position: relative;
	width: 300px;
	height: 5px;
	background-color: rgba(255,102,2,0.22);
}


@media only screen and (min-width: 768px) {
	#myprogress{
		position: relative;
		width: 527px;
		height: 5px;
		background-color: rgba(255,102,2,0.22);
	}
    #myprogressNature{
		position: relative;
		width: 527px;
		height: 5px;
		background-color: rgba(255,102,2,0.22);
	}
}

#mybar{
	position: absolute;
	height: 5px;
	background-color: #ff6602;

}
#mybarNature{
	position: absolute;
	height: 5px;
	background-color: #ff6602;

}

.intro_blackwords{
	padding-left: 30px;
	padding-right: 30px;
}

@media only screen and (min-width: 768px) {
	.intro_blackwords{

	}
}

/*switch button*/
#left{
	display: none;
	cursor: pointer;
}

#right{
	display: none;
	cursor: pointer;
}

/*.home{
	width:70px;
	height: 70px;
	align-self: flex-end;
}*/

/*flags in island one, two, three*/
.flags {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: #fc5d03;
	z-index: 12;
	cursor: pointer;
	 -webkit-transform: scale(1);
	transform: scale(1);
}

.flags2 {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: #fc5d03;
	z-index: 12;
	cursor: pointer;
	-webkit-transform: scale(1);
	transform: scale(1);
}

.flags3 {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: #fc5d03;
	z-index: 12;
	cursor: pointer;
	-webkit-transform: scale(1);
	transform: scale(1);
}

.flags.active, .flags2.active, .flags3.active {
	box-shadow: 0 0 0 rgba(252,93,3,0.4);
	-webkit-animation: pulse 5s infinite; /* Safari 4.0 - 8.0 */
  	animation: pulse 5s infinite;
	-webkit-transform: scale(2.5);
	transform: scale(2.5);
	background-color: rgba(252,93,3,0.95);
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(252,93,3,0.4);
	}

	70% {
		box-shadow: 0 0 0 5px rgba(252,93,3,0.4);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(252,93,3,0.4);
	}
}

/*flag id count from island one to three*/
#flag1{
	position:absolute;
	display: none;
}

#flag2{
	position:absolute;
	display: none;
}

#flag3{
	position:absolute;
	display: none;
}

#flag4{
	position:absolute;
	display: none;
}


#flag5{
	position:absolute;
	display: none;
}

#flag6{
	position:absolute;
	display: none;
}


#flag7{
	position:absolute;
	display: none;
}

#flag8{
	position:absolute;
	display: none;
}

#flag9{
	position:absolute;
	display: none;
}

#flag10{
	position:absolute;
	display: none;
}

#flag11{
	position:absolute;
	display: none;
}

#flag12{
	position:absolute;
	display: none;
}

#flag13{
	position:absolute;
	display: none;
}

#flag14{
	position:absolute;
	display: none;
}

#flag15{
	position:absolute;
	display: none;
}

#flag16{
	position:absolute;
	display: none;
}

#flag17{
	position:absolute;
	display: none;
}

#flag18{
	position:absolute;
	display: none;
}

#flag19{
	position:absolute;
	display: none;
}

#flag20{
	position:absolute;
	display: none;
}

#flag21{
	position:absolute;
	display: none;
}

#flag22{
	position:absolute;
	display: none;
}

#flag23{
	position:absolute;
	display: none;
}
/* The actual popup in island one, two and three */
#pop0Outer {
	display: none;
}

#pop0Outer.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}


.popupText {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	justify-content: center;
	align-items: center;
}

.popupTextInner {
	width: 100%;
	max-width: 500px;
	border: 1px solid #ff6d0d;
	background-color: #FFFFFF;
	z-index: 200;
	padding: 20px;
	visibility:hidden;
}

.popuptext{
    visibility: hidden;
    width: 170px;
    /*height:220px;*/
    background-color: #FFFFFF;
    color: grey;
    padding: 8px 0;
    position: absolute;
    z-index: 200;
    /*z-index: 1;*/
    /*bottom: 125%;
    left: 50%;*/
    /*margin-left: -80px;*/
    border: 1px solid #ff6d0d;
    padding: 20px;
}

@media only screen and (min-width: 768px) {
	.popuptext{
	    visibility: hidden;
	    width: 420px;
	    /*height:220px;*/
	    background-color: #FFFFFF;
	    color: grey;
	    padding: 8px 0;
	    position: absolute;
	    z-index: 200;
	    /*z-index: 1;*/
	    /*bottom: 125%;
	    left: 50%;*/
	    /*margin-left: -80px;*/
	    border: 1px solid #ff6d0d;
	    padding: 20px;
	}
}

.popuptext2{
    visibility: hidden;
    width: 170px;
    /*height:220px;*/
    background-color: #FFFFFF;
    color: grey;
    padding: 8px 0;
    position: absolute;
    z-index: 200;
    /*z-index: 1;*/
    /*bottom: 125%;
    left: 50%;*/
    /*margin-left: -80px;*/
    border: 1px solid #ff6d0d;
    padding: 20px;
}

@media only screen and (min-width: 768px) {
	.popuptext2{
	    visibility: hidden;
	    width: 420px;
	    /*height:220px;*/
	    background-color: #FFFFFF;
	    color: grey;
	    padding: 8px 0;
	    position: absolute;
	    z-index: 200;
	    /*z-index: 1;*/
	    /*bottom: 125%;
	    left: 50%;*/
	    /*margin-left: -80px;*/
	    border: 1px solid #ff6d0d;
	    padding: 20px;
	}
}

.popuptext3{
    visibility: hidden;
    width: 170px;
    /*height:220px;*/
    background-color: #FFFFFF;
    color: grey;
    padding: 8px 0;
    position: absolute;
    z-index: 200;
    /*z-index: 1;*/
    /*bottom: 125%;
    left: 50%;*/
    /*margin-left: -80px;*/
    border: 1px solid #ff6d0d;
    padding: 20px;
}

@media only screen and (min-width: 768px) {
	.popuptext3{
	    visibility: hidden;
	    width: 420px;
	    /*height:220px;*/
	    background-color: #FFFFFF;
	    color: grey;
	    padding: 8px 0;
	    position: absolute;
	    z-index: 200;
	    /*z-index: 1;*/
	    /*bottom: 125%;
	    left: 50%;*/
	    /*margin-left: -80px;*/
	    border: 1px solid #ff6d0d;
	    padding: 20px;
	}
}

/*close button*/
.btn {
	text-align: right;


}

.btnClosePop {
	border: none;
	color: #ff6600;
	width: 16px;
	height:16px;
	display: inline-block;
	cursor: pointer;
}

.btnClosePop:hover {
	opacity: 0.7;
}

.btn-close {
	border: none;
	color: #ff6600;
	width: 16px;
	height:16px;
	display: inline-block;
	cursor: pointer;
}

.tooltip-title {
	font-family: 'Roboto', sans-serif;
	color: #ff6600;
	font-size: 21px;
	text-transform: uppercase;
}

.tooltipTitle {
	font-family: 'Roboto', sans-serif;
	color: #ff6600;
	font-size: 21px;
	text-transform: uppercase;
}

.tooltip-content {
	color: #363636;
	font-size: 12px;
	line-height: 21px;
	font-weight: 300;
	font-family: 'Roboto', sans-serif;
}

.tooltipContent {
	color: #363636;
	font-size: 12px;
	line-height: 21px;
	font-weight: 300;
	font-family: 'Roboto', sans-serif;
}

/* Toggle this class - hide and show the popup */
.show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

.showProgress {
    display: block
    visibility: visible;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

/*progress page*/
#progress {
	position: fixed;
	top: 0;
	left:0;
	width: 100%;
	height: 100%;
    background-color: #FFFFFF;
	z-index: 10;
	text-align: center;

	display: -webkit-box;
  	display: -ms-flexbox;
  	display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

#progressNature {
    display: none;
}

#progressNature.showProgress {
	position: fixed;
	top: 0;
	left:0;
	width: 100%;
	height: 100%;
    background-color: #FFFFFF;
	z-index: 10;
	text-align: center;

	display: -webkit-box;
  	display: -ms-flexbox;
  	display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

/*about page*/
#aboutpage{
	display: none;
	position: fixed;
	top: 0;
	left:0;
	width: 100%;
	height: 100%;
    background-color: white;
    z-index: 0;
}

.inner-about {
    overflow: scroll;
    height: 100%;
}

/*#progress h1 {
    max-width: 500px;
}*/

#oval{
	width/*:680px;
	height:29px;
	background-color: #000000;
	opacity: 0.35*/;
}

#shadow {
    position: absolute;
    bottom: 100px;
	position: absolute;
	bottom: 100px;
	left: 0;
	width: 100%;
	text-align: center;
}

.threedisland {
	z-index: 3;
	width: auto;
}
@media only screen and (min-width: 768px) {

	.threedisland {
		z-index: 3;
		width: 50%;
	}
}

#test-render {
    position: absolute;
	top: 0;
	left: 0;
    z-index: 2;
}

/*position logo*/
.menu {
	max-width: 960px;
    margin: auto;
    width: 100%;
    margin-top: 8px;
    z-index: 10;
}

@media only screen and (min-width: 768px) {
	.menu {
		max-width: 960px;
	    margin: auto;
	    width: 100%;
	    margin-top: 45px;
	    z-index: 10;
	}
}

.menu #logo {
	display: inline-block;
}

.menu #fb1 {
	float: right;

}

.menu #fb2 {
	float: right;

}

hr {
    opacity: 0.5;
}

/*progress image in mobile version*/
.number{
	position: relative;
	text-align: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-color: #fc5d03;
	margin-left: 15px;
}

.circle_inner{
	position:absolute;
	top:0;
	bottom: 0;
	left:0;
	width:100%;
	height:100%;
}

.circle_wrapper{
	display:table;
	width:100%;
	height:100%;

}

.circle_content{
	display: table-cell;
	padding:2px;
	vertical-align: middle;
	/*font-size: 27px;*/
	color:white;
}

@media only screen and (min-width: 768px) {
	.number{
		display: none;

	}
}

.square_content{
	padding: 13px 36px;
	vertical-align: middle;
	font-size: 18px;
	color:white;
	background-color: #fc5d03;
    cursor: pointer;
    max-width: 170px;
    margin: auto;
    margin-bottom: 30px;
    margin-top: 55px;
	opacity: 1;
	transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}

.square_content:hover {
	opacity: 0.7;
}

@media only screen and (min-width: 768px) {
	.square_content{
		padding: 13px 36px;
		vertical-align: middle;
		font-size: 18px;
		color:white;
		background-color: #fc5d03;
	    cursor: pointer;
	    max-width: 170px;
	    margin: auto;
	    margin-bottom: 75px;
	    margin-top: 55px;
	}
}

i {
	border: solid white;
	border-width: 0 2px 2px 0;
	display: inline-block;
	padding: 3px;
	margin: 2px 7px;
}

.continue-right {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

/*.border_f {
	margin-right: 20px;
}*/


/*orange border*/
.border_logo{
	display: none;
	position: relative;
	text-align: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border:1px solid #ff6602;
	z-index: 10;

 	/*display: inline-block;*/
 	/*margin-right: 9px;*/
}

@media only screen and (min-width: 768px) {
	.border_logo{

		position: relative;
		text-align: center;
		width: 42px;
		height: 42px;
		border-radius: 50%;
		border:1px solid #ff6602;

	 	display: inline-block;
	 	margin-right: 9px;
	 	z-index: 10;
	}
}

#facebook_icon{
	transform: matrix(1,0,0,1,20,30);
}

@media only screen and (min-width: 768px) {
	#facebook_icon{
		display: none;
	}
}

#twitter_icon{
	transform: matrix(1,0,0,1,60,30);
}

@media only screen and (min-width: 768px) {
	#twitter_icon{
		display: none;
	}
}

/*mobile version*/
#facebook_icon_about{
	transform: matrix(1,0,0,1,20,30);
}

@media only screen and (min-width: 768px) {
	#facebook_icon_about{
		display: none;
	}
}

#twitter_icon_about{
	transform: matrix(1,0,0,1,60,30);
}

@media only screen and (min-width: 768px) {
	#twitter_icon_about{
		display: none;
	}
}

/*mune button*/
.mune{
	position: relative;
	text-align: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border:1px solid #ff6602;

 	display: inline-block;
 	margin-right: 9px;
}

/*share button in mobile version*/
.share{
	position: relative;
	text-align: center;

	-ms-flex-item-align: end;
    align-self: flex-end;

	width: 42px;
	height: 42px;
	border-radius: 50%;
	border:1px solid #ff6602;

 	/*display: inline-block;*/
 	margin-right: 9px;
 	bottom: 0;
 	z-index: 10;
}

@media only screen and (min-width: 768px) {
	.share{
		display: none;
	}
}

.share_style{
	padding: 9px 0;
	color: #ff6602;
}

.share_style i {
	border:none;
}

.share_style:hover{
	color: white;
}

.share:hover .overlay {
    background-color: #ff6602;
}

.icons{
	display: block;
	position: relative;

	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	-ms-flex-item-align: end;
	align-self: flex-end;

 	bottom: 0;
 	z-index: 10;
}

@media only screen and (min-width: 768px) {
	.icons{
		display: none;

	}
}

.overlay {
  position: absolute;
  text-align: center;
  border-radius: 50%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 1;
  transition: .5s ease;
  background-color: white;
}


.border_logo:hover .overlay {
    background-color: #ff6602;
}

.mune:hover .overlay {
    background-color: #ff6602;
}
/*#fb-img {
    padding: 12px 0;
}*/

.fb_style {
	padding: 9px 0;
	color: #ff6602;
}

.fb_style i {
	border:none;
}

/*#fb-img:hover{
	color: red;
}*/

.fb_style:hover{
	color: white;
}


/*#twitter-img {
    padding: 15px 0;
}*/

.twitter_style {
	padding: 10px 0;
	color: #ff6602;
}

.twitter_style i {
	border:none;
}

.twitter_style:hover{
	color:white;
}

.border_logo_rec{
	position: relative;
	text-align: left;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border:1px solid transparent;
 	display: inline-block;
	float: right;
}

/*drop down list*/

.dropbtn {
  color: white;
  padding: 17px;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

/*.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}*/

.dropdown {
	position: relative;
	display: inline-block;
	/*float:right;*/
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: white;
	min-width: 160px;
	overflow: auto;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 6;
	right:0;
}

.dropdown-content a{
	color: #ff6602;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.dropdown a:hover {
	background-color: #ddd;
}

.show {display: block;}

#sound_off{
	display: none;
}

#sound{
	display: block;
}

.sound_style {
	color: #ff6602;
	padding: 9px 0;
}

.sound_style:hover{
	color:white;
}

.sound_style i {

	border:none;

}
/*#sound i {
	border:none;

}

#sound_off i {
	border:none;

}*/

.switch{
	position: relative;
	text-align: center;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	border:1px solid #ff6602;
 	margin-right: 9px;
	margin-bottom: 30px;
	z-index: 10;
}

.grey_switch {
	display: none;
	position: relative;
	text-align: center;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	border:1px solid #4d4d4f;
 	margin-right: 9px;
	margin-bottom: 30px;
	z-index: 10;
}

@media only screen and (min-width: 768px) {
	.switch{
		margin-bottom: 0px;
	}
	.grey_switch{
		margin-bottom: 0px;
	}
}

.overlay_switch {
  position: absolute;
  text-align: center;
  border-radius: 50%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 1;
  transition: .5s ease;
  background-color: #ff6602;
}

.grey_overlay_switch {
  position: absolute;
  text-align: center;
  border-radius: 50%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 1;
  transition: .5s ease;
  background-color: white;
}

.switch:hover .overlay_switch{
    background-color: white!important;
}

.switch:hover .overlay_switch .right_style i{
    border: solid #ff6602;
    border-width: 0 3.25px 3.25px 0;
}

.right_style {
	padding: 25px 0;

}

.grey_right_style {
	padding: 25px 0;
}

.right_style i {
	border: solid white;
	border-width: 0 3.25px 3.25px 0;
	display: inline-block;
	padding: 1px 1px;
	margin: 1px 7px;
	z-index: 10;
	width:12px;
	height:12px;
}

.grey_right_style i {
	border: solid #4d4d4f;
	border-width: 0 3.25px 3.25px 0;
	display: inline-block;
	padding: 1px 1px;
	margin: 1px 7px;
	z-index: 10;
	width:12px;
	height:12px;
}

.switch-right {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

.switch:hover .overlay_switch .left_style i{
    border: solid #ff6602;
    border-width: 0 3.25px 3.25px 0;
}

.left_style {
	padding: 25px 0;

}

.grey_left_style {
	padding: 25px 0;

}

.left_style i {
	border: solid white;
	border-width: 0 3.25px 3.25px 0;
	display: inline-block;
	padding: 1px 1px;
	margin: 1px 7px;
	z-index: 10;
	width:12px;
	height:12px;
}

.grey_left_style i {
	border: solid #4d4d4f;
	border-width: 0 3.25px 3.25px 0;
	display: inline-block;
	padding: 1px 1px;
	margin: 1px 7px;
	z-index: 10;
	width:12px;
	height:12px;
}

.switch-left {
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
}

.zoom-control {
	z-index: 10;
	position: absolute;
	bottom: 0;
	right: 0;
	margin-right: 20px;
	margin-bottom: 20px;
}

.zoom-out:hover, .zoom-in:hover {
	opacity: 0.7;
}

.zoom-out, .zoom-in {
	border: 1px solid #ff6602;
	width: 40px;
	height: 40px;
	margin-bottom: 10px;
	cursor: pointer;
}

i.fa-plus, i.fa-minus {
	display: inline-block;
	padding: 3px;
	margin: 9px 11px;
	border: none;
	color: #ff6602;
	font-size: 16px;
}

/* TODO: remove when intro copy is ready */

/* Hides language switch in app (Being enabled again upon entering the app using the "continue" button) */
.spacelogo #fb2 {
  display: none;
}