@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&subset=latin,latin-ext');
body{margin:0px;background:#f0f0f0}
.temiz{clear:both}
input{outline:none}

.genelKap{overflow:hidden}
.genelKap h1{font:normal 500 42px 'Roboto';color:#403c84;margin:0px !important}
.genelKap h2{font:normal 300 20px 'Roboto';color:#808080;margin-top:20px}
.genelKap h3, .genelKap h4{font:normal 400 15px/23px 'Roboto';color:#808080;margin-top:10px}
.genelKap h4{margin-top:20px}
.genelKap h1 a{color:#403c84}
.genelKap h1 a:hover{color:#544eac}

.isimiste{width:100%;margin-top:20px;border-radius:3px;overflow:hidden}
.isimiste p{background:#3498db;color:#fff;font:normal 500 15px 'Roboto';padding:10px 15px;margin-bottom:0px !important}
.input{background:#f5f5f5;padding:15px;border:1px solid #eee;border-top:none}
.input input{background:#fff;border:1px solid #ddd;font:normal 500 15px 'Roboto';color:#666;padding:10px;border-radius:3px;width:calc(100% - 22px)}
.input input:focus{border-color:#87c2ea;box-shadow:0px 0px 12px -2px rgba(167,215,249, 0.8)}

/* - */

.sorular{margin-top:20px}
label input{display:none}
label{display:block;background:#f9f9f9;border:1px solid #ddd;border-radius:3px;margin-top:10px;overflow:hidden;font:normal 400 18px 'Roboto';color:#444;padding:15px;cursor:pointer}
label span{display:block;width:55px;float:left;text-align:right;margin-right:15px;color:#777}
label span i{color:#b6b6b6;font-style:normal;padding-left:15px}
label p{display:block;width:calc(100% - 111px);float:left;font:normal 400 18px 'Roboto';color:#444;margin-bottom:0px !important}
label:hover{background:#fcf2c8}
label p, label span{position:relative;top:2px}
.kutu{width:26px;height:26px;background:#fff;top:0px;box-shadow:inset 0px 0px 0px 2px #b0b0b0;border-radius:3px;position:relative}

label input:checked + .kutu{box-shadow:inset 0px 0px 0px 2px #f1c40f}
label input:checked + .kutu:before{width:24px;height:24px;content:'';display:block;background:url(check.png);position:absolute;top:-1px;left:4px}
label input:checked + .kutu + span + p{color:#2079b4}

button{display:block;font:normal 500 15px/48px 'Roboto';color:#fff;background:#3498db;border-radius:3px;padding:0px 48px;cursor:pointer;margin-top:20px;border:none}
button:hover, a.yeniden:hover{background:#264f90}

a.yeniden{display:inline-block;font:normal 500 15px/48px 'Roboto';color:#fff;background:#3498db;border-radius:3px;padding:0px 48px;cursor:pointer;margin-top:20px}

#grafikBuraya{margin-top:20px}

/* Meslek */

.meslekBas{background:#dff0d8;font:normal 500 17px 'Roboto';color:#83763d;padding:15px;border:1px solid #d6e9c6;border-radius:3px 3px 0px 0px;overflow:hidden;margin-top:20px}
.meslekAlt{background:#fff;border:1px solid #ddd;border-top:none;padding:15px;font:normal 17px/25px 'Roboto';color:#555;border-radius:0px 0px 3px 3px}
.grup{float:left;background:#3498db;color:#fff;padding:5px 15px;border-radius:30px;width:140px;text-align:center}
.meslekBas p{float:left;display:block;line-height:30px;margin-left:15px;margin-bottom:0px !important}
.meslekBas i{padding-right:15px}

.baslikRenk_Kotu{background:#dedede;color:#e74c3c;border-color:#ebccd1}
.baslikRenk_Orta{background:#d9edf7;color:#3498db;border-color:#bce8f1}
.baslikRenk_Guze{background:#dff0d8;color:#27ae60;border-color:#d6e9c6}

.paylas{background:#f5f5f5;padding:20px;border:1px solid #ddd;border-radius:3px;margin-top:20px;overflow:hidden}
.paylas p{font:normal 400 15px/23px 'Roboto';color:#808080;margin-bottom:0px !important}
.paylas a.fb, .paylas a.wp, .paylas a.tw{background:#4862a3;font:normal 400 15px 'Roboto';color:#fff;border-radius:3px;padding:10px 15px;float:left;margin-right:10px;margin-top:10px}
.paylas a b{font-weight:400}
.paylas a i{padding-right:10px}
.paylas a.fb:hover{background:#6981bd}
.paylas a.wp{background:#71be32}
.paylas a.wp:hover{background:#8fd358}
.paylas a.tw{background:#1da1f2}
.paylas a.tw:hover{background:#55b8f5}

.reklamara{margin-top:10px}
.reklamalt{margin-top:20px}

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

	.genelKap h1{font-size:28px}
	.genelKap h2{font-size:17px;margin-top:10px}

	.meslekBas{font-size:15px}
	.meslekAlt{font:normal 400 13px/21px 'Roboto'}

}

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

	.grup{float:none}
	.meslekBas p{float:none;display:block;margin-left:0px;margin-top:15px}

}

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

	label{font-size:15px}

}