@import url('colors.css');

body {
	background-color: #efefef;
	font-family: 'Open Sans', sans-serif;
}

header {
	margin-top: 4em;
}

header a .logo {
	width: 177px;
	height: 206px;
	background: url('../img/fisek_icons.png') 0px 0px;
}

main {
	margin-top: 2em;
	margin-bottom: 4em;
}

.boxes {
	padding-right: 0px;
	padding-left: 0px;
	height: 250px;
	overflow-y: hidden;
	position: relative;
}

.box {
	position: absolute;
	top: 0;
	width: 100%;
	height: 250px;
	color: #fff;
}

.box-icon {
  display: flex;
  justify-content: center;
  align-items: center;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	   -moz-transform: rotateX(0deg) rotateY(0deg);
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
	-webkit-transition: all .5s ease-in-out;
	   -moz-transition: all .5s ease-in-out;
		-ms-transition: all .5s ease-in-out;
		 -o-transition: all .5s ease-in-out;
			transition: all .5s ease-in-out;
}

.boxes .box-content {
	-webkit-transform: rotateY(-180deg);
	 -moz-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
	 -moz-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
	 -moz-backface-visibility: hidden;
-webkit-transition: all .5s ease-in-out;
	 -moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	 -o-transition: all .5s ease-in-out;
		transition: all .5s ease-in-out;
}

.flip .box-icon {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
}
.flip .box-content {
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg);
}

.boxes a > h1 {
	display: none;
}

.boxes .box-content h1, .boxes h1 {
	margin-top: 0.5em;
	margin-left: 0.5em;
	font-size: 1.2em;
	font-weight: 800;
}

.boxes .box-content > p, .boxes .box-content > ul > li {
	font-size: 0.8em;
	margin-left: 0.7em;
	font-weight: 300;
}

.icon {
	background: url('../img/fisek_icons.png');
	height: 110px;
	width: 150px;
}

.calisan-cocuklar-icon {
	background-position:  0px -206px;
}

.is-guvenligi-icon {
	background-position: -150px -206px;
}

.fisek-ailesi-icon {
	background-position: -300px -206px;
}

.sosyalizasyon-icon {
	background-position: -450px -206px;
}

.sosyal-politika-icon {
	background-position: -600px -206px;
}

.cocuk-emegi-icon {
	background-position: -750px -206px;
}

.beyin-gocu-icon {
	background-position: -300px -316px;
}

.calisma-ortami-icon {
	background-position: 0px -316px;
}

.cocuk-emegi-kaynakcasi-icon {
	background-position: -150px -316px;
}

.uzak-ulke-icon {
	background-position: -450px -316px;
}

.kitap-kurdu-icon {
	background-position: -750px -316px;
}

.portreler-icon {
	background-position: -600px -316px;
}

.black-text {
	color: #1c1c1f;
}

@media only screen and (max-width: 800px) {
	.boxes {
		height: 300px;
		overflow-y: visible;
	}

	.box-icon, .box-content {
		-webkit-transform: none !important;
		-moz-transform: none !important;
	}

	.box-content {
		display: none;
	}

	.boxes a h1 {
		display: block;
		top: 255px;
		position: absolute;
		margin: 0px;
		left: inherit;
		color: #717376;
		font-size: 1em;
		text-align: center;
		width: 100%;
	}
}