@import url('https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300');

/* ---------- standard ---------- */

body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	font-family: 'Open Sans', sans-serif;
}

p {
	font-size: 13px;
	color: #222;
}

a {
	text-decoration: none;
}

input:focus {
	outline: none;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Open Sans Condensed', sans-serif;
	color: #ff7602;
}

ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.left {
	float: left;
}

.right {
	float: right;
}

.padding {
	box-sizing: border-box;
	padding: 0px 15px;
}

.center {
	text-align: center;
}

.multiple2 {
	-webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

.multiple3 {
	-webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

.multiple2 p, .multiple3 p {
	margin: 0px;
}

.multiple2 img, .multiple3 img {
	width: 100%;
	height: auto;
	padding: 10px 0px;
	max-width: 200px;
}

.subsection {
	width: 100%;
	padding: 15px;
	margin: 5px 0px;
	background: #72c7e7;
	box-sizing: border-box;
}

.subsection p {
	font-size: 12px;
}

.subsection li {
	font-size: 12px;
}

.subsection h2 {
	color: #fff;
}

.subsection h3 {
	color: #fff;
}

.subsection h3:first-child {
	margin-top: 0px;
}

.subsection ul {
	list-style-image: url(../images/checkWhite.png) !important;
}

.subsection a {
	color: #fff !important;
}

/* ---------- about ---------- */

.aboutItem {
	width: 33.33%;
	padding-right: 30px;
	box-sizing: border-box;
	float: left;
}

.aboutItem img {
	height: auto;
	height: 100px;
	width: auto;
	max-width: 100%;
	text-align: center;
}

/* ---------- steps ---------- */

.arrow {
	width: 14%;
	float: left;
	height: 200px;
	background: url(../images/arrow.png);
	background-size: 30% auto;
	background-repeat: no-repeat;
	background-position: center;
}

.step {
	width: 24%;
	position: relative;
	float: left;
	height: 300px;
}

.stepImage {
	width: 100%;
	height: 100%;
	position: absolute;
	line-height: 300px;
	text-align: center;
	-webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s;
}

.stepImage img {
	width: 90%;
	height: auto;
}

.stepText {
	width: 100%;
	padding: 15px;
	opacity: 0;
	box-sizing: border-box;
	-webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s;
}

.stepText p {
	font-size: 10px;
}

.step:hover .stepImage {
	opacity: .0;
}

.step:hover .stepText {
	opacity: 1;
}

/* ---------- cols ---------- */

.col1 {
	width: 100%;
	float: left;
}

.col1-2 {
	width: 75%;
	float: left;
}

.col2 {
	width: 50%;
	float: left;
}

.col3 {
	width: 33.33%;
	float: left;
}

.col4 {
	width: 25%;
	float: left;
}

.col5 {
	width: 20%;
	float: left;
}

.col6 {
	width: 16.66%;
	float: left;
}

.col7 {
	width: 14.28%;
	float: left;
}

.col8 {
	width: 12.5%;
	float: left;
}

.col9 {
	width: 11.11%;
	float: left;
}

.col10 {
	width: 10%;
	float: left;
}

/* ---------- colors ---------- */

.black {
	background: #464645;
}

.orange {
	background: #ff7602;
}

.greyLight {
	background: #d3d3d2;
}

.greyMedium {
	background: #a6a6a5;
}

.blue {
	background: #72c7e7;
}

.turquoise {
	background: #0094b3;
}

.red {
	background: #ce5c43;
}

.yellow {
	background: #fdc82f;
}

.lemon {
	background: #f2ed7a;
}

/* ---------- style ---------- */

#lightbox {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	text-align: center;
	overflow-y: scroll;
	overflow-x: hidden;
	z-index: 7;
	background: rgba(000, 000, 000, .5);
}

#lightbox img {
	top: 50%;
	box-shadow: 0px 0px 20px #222;
	background: #fff;
	padding: 15px;
	max-width: 100%;
	z-index: 7;
	min-width: 70%;
	box-sizing: border-box;
}

.lightClick {
	cursor: pointer;
}

#header {
	width: 100%;
	height: 70px;
	float: left;
}

#language {
	width: 100px;
	height: 25px;
	background: #fff;
	position: absolute;
	top: 70px;
	right: 10px;
	z-index: 6;
}

#language a {
	float: left;
	margin: 0px 5px;
}

#language a img {
	width: 40px;
}

#header>a>h2 {
	font-size: 18px;
	margin: 0px 20px;
	padding: 0px;
	line-height: 70px;
	color: #222;
}

#header .logo {
	margin: 5px 20px;
	width: 60px;
	overflow: hidden;
	-webkit-transition: width .3s;
    -moz-transition: width .3s;
    -o-transition: width .3s;
    transition: width .3s;
}

#header .logo:nth-child(3) {
	width: 50px;
}

#header .logo:hover {
	width: 250px;
}

#header .logo:nth-child(3):hover {
	width: 150px;
}

.bar {
  display: block;
  height: 5px;
  width: 60px;
  background-color: #222;
  margin: 11px auto;
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s ease;
  -ms-transition: all .7s ease;
  -o-transition: all .7s ease;
  transition: all .7s ease;
}

.button {
  cursor: pointer;
  display: inline-block;
  width: 60px;
  height: 60px;
  margin: 5px 20px;
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s ease;
  -ms-transition: all .7s ease;
  -o-transition: all .7s ease;
  transition: all .7s ease;
}

.button:hover div:first-of-type {
	margin: 6px 0px 16px 0px;
}

.button:hover div:last-of-type {
	margin: 16px 0px 6px 0px;
}

.button.active .top {
  -webkit-transform: translateY(15px) rotateZ(45deg);
  -moz-transform: translateY(15px) rotateZ(45deg);
  -ms-transform: translateY(15px) rotateZ(45deg);
  -o-transform: translateY(15px) rotateZ(45deg);
  transform: translateY(15px) rotateZ(45deg);
}

.button.active .bottom {
  -webkit-transform: translateY(-15px) rotateZ(-45deg);
  -moz-transform: translateY(-15px) rotateZ(-45deg);
  -ms-transform: translateY(-15px) rotateZ(-45deg);
  -o-transform: translateY(-15px) rotateZ(-45deg);
  transform: translateY(-15px) rotateZ(-45deg);
}

.button.active .middle { width: 0; }

#mobileMenu {
	width: 100%;
	position: absolute;
	height: calc(100% - 70px);
	z-index: 10;
	background: rgba(255, 255, 255, .9);
	top: 70px;
	display: none;
	overflow-y: scroll;
}

#mobileMenu::-webkit-scrollbar {
    display: none;
}

#mobileMenu div {
	width: 100%;
	text-align: center;
	margin-top: 50px;
}

#mobileMenu div div {
	display: none;
}

#mobileMenu div div a {
	font-size: 60px;
	clear: both;
	margin: 20px 0px;
	color: #222;
	-webkit-transition: color .2s;
    -moz-transition: color .2s;
    -o-transition: color .2s;
    transition: color .2s;
}

#mobileMenu div div a:hover {
	color: #ff7602;
}

#top {
	width: 100%;
	background: url(../images/refugees.jpg);
	background-size: cover;
	background-position: center;
	float: left;
}

#topBlack {
	width: 100%;
	height: 100%;
	background: rgba(000, 000, 000, .4);
	float: left;
}

#topHeading {
	max-width: 400px;
	margin: 50px auto;
	text-align: center;
}

#topHeading h1 {
	color: #fff;
}

#dropDownTopmenu {
	width: 200px;
	height: 30px;
	background-color: #fff;
	background-image: url(../images/arrowDown.png);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	margin: auto;
	cursor: pointer;
	display: none;
}

#dropDownTopmenu:hover {
	background-position: 0px 5px;
}

.dropdownClicked {
	background-image: url(../images/arrowUp.png) !important;
}

.dropdownClicked:hover {
	background-position: 0px -5px !important;
}

#topMenu {
	width: 100%;
}

#topMenu ul li {
	padding: 20px;
	height: 73px;
	text-align: center;
	box-sizing: border-box;
}

#topMenu ul li a {
	padding: 10px 0px;
	color: #fff;
	border-bottom: 4px solid #ff7602;
	-webkit-transition: border .1s;
    -moz-transition: border .1s;
    -o-transition: border .1s;
    transition: border .1s;
}

#topMenu ul li a:hover {
	border-bottom: 6px solid #ff7602;
}

/* ---------- content ---------- */

#content {
	width: 100%;
	float: left;
	padding: 50px 15px;
	box-sizing: border-box;
}

#contentIn {
	width: 100%;
	max-width: 1200px;
	margin: auto;

}


#content ul {
	font-size: 13px;
	color: #222;
	list-style-image: url(../images/check.png);
	padding-left: 18px;
}

#content table {
	text-align: left;
	font-size: 13px;
	color: #222;
	width: 100% !important;
	border-color: #222 !important;
}

#content table img {
	width: 100% !important;
	height: auto !important;
}

#content table tr td {
	padding: 15px;
	vertical-align: top;
}

#content a {
	color: #ff7602;
}

#content a:hover {
	text-decoration: underline;
}

#content h4 a {
	color: #ff7602;
}

#content h4 a:hover {
	color: #a6a6a5;
}

#content .video {
	position: relative;
	width: 100%;
	max-width: 500px;
	cursor: pointer;
}

#content .video:hover .playButton{
	opacity: .8;
}

#content .video .playButton {
	width: 100px;
	height: 70px;
	position: absolute;
	margin-left: 50%;
	left: -50px;
	top: 50%;
	margin-top: -35px;
	background: url(../images/play.png);
	background-size: cover;
}

#content .video iframe {
	width: 100%;
	max-width: 500px;
}

#content .video img {
	width: 100%;
	max-width: 500px;
}

#content .slideDown h2:hover {
	text-decoration: underline;
	cursor: pointer;
}

#content .slideDown .slideDownText {
	display: none;
	float: left;
}

.further {
	float: right;
}

.further img {
	width: 90%;
	height: auto;
	max-width: 120px;
}

.further a {
	color: #222 !important;
}

.further a:hover {
	text-decoration: underline;
}

/* ---------- website ---------- */

#links {
	
}

#links .col4 {
	position: absolute;
	height: calc(100% - 70px);
	box-sizing: border-box;
	-webkit-transition: border 1s, width 1s, left 1s;
    -moz-transition: border 1s, width 1s, left 1s;
    -o-transition: border 1s, width 1s, left 1s;
    transition: border 1s, width 1s, left 1s;
}

#links .col4:nth-child(2) {
	left: 25%;
	background: url(../images/refugees.jpg);
	background-size: cover;
	background-position: center;
}

#links .col4:nth-child(3) {
	left: 50%;
	background: url(../images/neighbourhood.jpg);
	background-size: cover;
	background-position: center;
}

#links .col4:nth-child(4) {
	left: 75%;
	background: url(../images/familly.jpg);
	background-size: cover;
	background-position: right;
}

#links .col4:nth-child(2):hover {
	border-left: 8px solid #ff7602;
	border-right: 8px solid #ff7602;
	width: 27%;
	left: 24%;
	z-index: 5;
}

#links .col4:nth-child(3):hover {
	border-left: 8px solid #ff7602;
	border-right: 8px solid #ff7602;
	width: 27%;
	left: 49%;
	z-index: 5;
}

#links .col4:nth-child(4):hover {
	border-left: 8px solid #ff7602;
	border-right: 8px solid #ff7602;
	z-index: 5;
	width: 27%;
	left: 73%;
}

#links .col4 .darkHover {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(000, 000, 000, .5);
}

#links .big a .head {
	width: 100%;
	height: 246px;
	box-sizing: border-box;
	padding: 0px 20px;
	margin-top: -123px;
	top: 50%;
	vertical-align: middle;
	position: absolute;
	text-align: center;
	-webkit-transition: margin 1s, top 1s;
    -moz-transition: margin 1s, top 1s;
    -o-transition: margin 1s, top 1s;
    transition: margin 1s, top 1s;
}

#links .big a .head h2 {
	color: #fff;
	font-size: 40px;
}

#links .big:hover a .head {
	top: 0%;
	margin-top: 20px;
}

#links .col4 .menu {
	display: none;
	position: absolute;
	top: 286px;
	width: 100%;
}

#links .col4 .menu ul {
	width: 100%;
}

#links .col4 .menu ul li {
	text-align: center;
	display: block;
	width: 100%;
	height: 58px;
}

#links .col4 .menu ul li a {
	font-size: 25px;
	padding: 10px 0px;
	color: #fff;
	border-bottom: 4px solid #ff7602;
	-webkit-transition: border .1s;
    -moz-transition: border .1s;
    -o-transition: border .1s;
    transition: border .1s;
}

#links .col4 .menu ul li a:hover {
	border-bottom: 6px solid #ff7602;
}

#links .col4 > .col1 {
	height: 25%;
	position: absolute;
}

#links .col4 .col1:nth-child(2) {
	top: 25%;
}

#links .col4 .col1:nth-child(3) {
	top: 50%;
}

#links .col4 .col1:nth-child(4) {
	top: 75%;
}

#links .col4 .col1 .head {
	text-align: center;
}

#links .col4 .col1 .head h1 {
	color: #fff;
}

#links .land .col1 {
	cursor: pointer;
}

#links .land .col1:nth-child(4) .head h1 {
	color: #222;
}

#links .land .col1 .map {
	text-align: center;
	position: absolute;
	height: 50%;
	margin-top: 20px;
	-webkit-transition: height .5s;
    -moz-transition: height .5s;
    -o-transition: height .5s;
    transition: height .5s;
}

#links .land .col1:hover .map {
	height: 60%;
}

#links .land .col1 .map img {
	height: 100%;
}

/* ---------- responsive ---------- */

@media only screen and (max-width : 1600px) {
	#links .big .head h2 {
		font-size: 30px;
	}

	#links .col4 .menu ul li a {
		font-size: 20px;
	}

}

@media only screen and (max-width : 1400px) {
	
	#topMenu ul li a {
		font-size: 12px;
	}
}

@media only screen and (max-width : 1200px) {
	#header>a>h2 {
		font-size: 13px;
	}

	#topMenu {
		display: none;
	}

	#topMenu ul li {
		width: 100%;
	}

	#dropDownTopmenu {
		display: block;
	}

	#topMenu ul li a {
		font-size: 15px;
	}
	
	#contentIn {
		box-sizing: border-box;
		padding: 0px 15px;
	}

	#links .big a .head h2 {
		font-size: 20px;
	}

	#links .col4 .menu ul li a {
		font-size: 15px;
	}
}

@media only screen and (max-width : 979px) {
	#header>a>h2 {
		width: 260px;
		margin: 0px 10px;
		line-height: 35px;
	}

	.multiple3 {
		-webkit-column-count: 2;
	    -moz-column-count: 2;
	    column-count: 2;
	}

	.aboutItem {
		width: 50%;
	}
}

@media only screen and (max-width : 767px) {
	.col2 {
		width: 100%;
	}

	.step {
		width: 90%;
		max-width: 300px;
		margin: auto;
		position: relative;
		float: none;
		height: 300px;
	}

	.arrow {
		width: 100%;
		float: none;
		-webkit-transform: rotate(90deg);
	    -moz-transform: rotate(90deg);
	    -o-transform: rotate(90deg);
	    -ms-transform: rotate(90deg);
	    transform: rotate(90deg);
	}


	#header>a>h2 {
		width: 220px;
		font-size: 11px;
		margin: 0px 0px 0px 10px;
	}

	#header .logo {
		margin: 5px 10px;
	}

	#header .logo:hover {
		width: 60px;
	}

	#header .logo:nth-child(3):hover {
		width: 50px;
	}

	#mobileMenu div {
		margin-top: 20px;
	}

	#mobileMenu div div a {
		font-size: 50px;
	}

	#links > .col4 {
		width: 50%;	
		height: calc(50% - 35px);
	}

	#links .col4:nth-child(2) {
		left: 50%;
	}

	#links .col4:nth-child(3) {
		left: 0%;
		top: calc(50% + 35px);
	}

	#links .col4:nth-child(4) {
		left: 50%;
		top: calc(50% + 35px);
	}

	#links .col4:nth-child(2):hover {
		border: none;
		width: 50%;
		left: 50%;
	}

	#links .col4:nth-child(3):hover {
		border: none;
		width: 50%;
		left: 0;
	}

	#links .col4:nth-child(4):hover {
		border: none;
		width: 50%;
		left: 50%;
	}

	.big a .head {
		height: auto !important;
		margin-top: -38px !important;
	}

	#links .big:hover a > .head {
		top: 30%;
	}

	#links .land .col1 .head h1 {
		font-size: 20px;
		margin: 0px;
		padding: 0px;
	}

	#links .land .col1 .map {
		display: none;
	}

	#links .land .col1 .head {
		position: absolute;
	    top: 50%;
	    margin-top: -15px;
	}

	#links .big .menu {
		display: none !important;
	}

	.col1-2 {
		width: 100%;
	}

	.further {
		width: 100%;
	}

	#content {
		padding: 15px 0px;
	}

	#content iframe {
		width: 100%;
	}

	#content .video {
		width: 100%;
		overflow: hidden;
	}

	#content .video iframe {
		width: 100%;
	}

	#content .video img {
		width: 100%;
	}
}

@media only screen and (max-width : 480px) {
	#content {
		padding-bottom: 0px;
	}

	.multiple2, .multiple3 {
		-webkit-column-count: 1;
	    -moz-column-count: 1;
	    column-count: 1;
	}

	.aboutItem {
		width: 100%;
		padding: none;
	}

	#main {
		min-width: 320px;
		width: 100%;
		height: 100%;
		position: absolute;
	}

	#header .logo {
		display: none;
	}

	#language {
		width: 60px;
		height: 23px;
	}

	#language a {
		float: left;
		margin: 0px 5px;
	}

	#language a img {
		width: 20px;
	}

	.button {
		margin: 5px 10px !important;
	}

	#links .big a .head h2 {
		font-size: 15px;
	}

	#content table p {
		font-size: 10px !important;
	}
}

@media only screen and (max-width : 320px) {

}

@media only screen and (max-height : 650px) {
	#links .land .col1 .map {
		display: none;
	}

	#links .col4 .menu {
		display: none!important;
	}
}