.content{
	background-image: url("images/indexbg.jpg");
	background-size: cover;
	min-height: 968px;
}
.sol{
	display: block;
	text-align: center;
	float: right;
}
.solbuton{
	margin-right: 400px;
	margin-top:100px;
	display: block;
	text-align: center;
	float: left;
}
.solimage2{

	display: none;
}
.sagimage2{
	display: none;
}
.sag{
	display: block;
	text-align: center;
	float: left;
}
.sagbuton{
	display: block;
	text-align: center;
	float: left;
	margin-left:400px;
	margin-top: 100px;
}


/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

	.content{
		background-color: #3e3e3e;
	}
	.sol{
		width: 100px;
		text-align: center;
		float: right;
	}
	.solbuton{
		display: none;

	}
	.solimage2{
		display: block;
		width: 100px;
	}
	.solimage1{
		display: none;
		width: 100px;
	}
	.sagimage1{
		display: none;
		width: 100px;
	}
	.sagimage2{
		display: block;
		width: 100px;
	}

	.sag{
		display: block;
		text-align: center;
		float: left;
	}
	.sagbuton{
		display: none;
	}
}



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


	.content{
		background-color: #3e3e3e;

	}
	.sol{
		width: 100px;
		text-align: center;
		float: right;
	}
	.solbuton{
		display: none;

	}
	.solimage2{
		display: block;
		width: 100px;
	}
	.solimage1{
		display: none;
		width: 100px;
	}
	.sagimage1{
		display: none;
		width: 100px;
	}
	.sagimage2{
		display: block;
		width: 100px;
	}

	.sag{
		display: block;
		text-align: center;
		float: left;
	}
	.sagbuton{
		display: none;


	}

}
/* iPads (portrait and landscape) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	/* CSS KODLARI BURAYA */

}

/* iPads (landscape) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {


	/* iPads (portrait) ----------- */

	@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

	}

	/* Desktops and laptops ----------- */

	@media only screen and (min-width : 1224px) {

		/* Large screens ----------- */

		@media only screen and (min-width : 1824px) {


			/* iPhone 5 (portrait & landscape)----------- */
			@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {

				
				.content{
					background-color: #3e3e3e;

				}
				.sol{
					width: 100px;
					text-align: center;
					float: right;
				}
				.solbuton{
					display: none;

				}
				.solimage2{
					display: block;
					width: 100px;
				}
				.solimage1{
					display: none;
					width: 100px;
				}
				.sagimage1{
					display: none;
					width: 100px;
				}
				.sagimage2{
					display: block;
					width: 100px;
				}

				.sag{
					display: block;
					text-align: center;
					float: left;
				}
				.sagbuton{
					display: none;


				}


			}


			/* iPhone 5 (landscape)----------- */
			@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {

				.content{
					background-color: #3e3e3e;

				}
				.sol{
					width: 100px;
					text-align: center;
					float: right;
				}
				.solbuton{
					display: none;

				}
				.solimage2{
					display: block;
					width: 100px;
				}
				.solimage1{
					display: none;
					width: 100px;
				}
				.sagimage1{
					display: none;
					width: 100px;
				}
				.sagimage2{
					display: block;
					width: 100px;
				}

				.sag{
					display: block;
					text-align: center;
					float: left;
				}
				.sagbuton{
					display: none;


				}


			}

			/* iPhone 5 (portrait)----------- */
			@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {

				.content{
					background-color: #3e3e3e;

				}
				.sol{
					width: 100px;
					text-align: center;
					float: right;
				}
				.solbuton{
					display: none;

				}
				.solimage2{
					display: block;
					width: 100px;
				}
				.solimage1{
					display: none;
					width: 100px;
				}
				.sagimage1{
					display: none;
					width: 100px;
				}
				.sagimage2{
					display: block;
					width: 100px;
				}

				.sag{
					display: block;
					text-align: center;
					float: left;
				}
				.sagbuton{
					display: none;


				}


			}