﻿

body { margin: 0; padding: 0; display: block; }

/* Fonts
--------------------------------------------------------------------------------------------------------------- */
body, input, textarea, select { font-family: "Segoe UI",Arial,Sans-Serif; font-size: 15px; color: #333; margin: 0; }

a { color: #274472; outline: none; text-decoration: none; }
a:hover { text-decoration: underline; }

img { display: block; margin: 0; padding: 0; border: none; }

/*--HTML 5 Overrides--*/
address, article, aside, figcaption, figure, footer, header, nav, section { display: block; margin: 0; padding: 0; }


h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 10px; color: #1C3039; font-weight: 600; letter-spacing: -0.025em; }
h1 { font-size: 26px; }
h2 { font-size: 24px; }
h3 { font-size: 22px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 15px; }

p { margin: 0 0 5px 0; }
ul, label { margin: 0; padding: 0; }

hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0 }

.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.clear20 { width: 100%; height: 20px; clear: both; display: block; }
.clear30 { width: 100%; height: 30px; clear: both; display: block; }
.clear50 { width: 100%; height: 50px; clear: both; display: block; }
.clearfix { display: block; }

.wrapper { width: 100%; float: left; margin: 0; padding: 0; }

.col0 { width: 100%; float: left; background: #fff; }
.col1 { width: 100%; float: left; border-top: 5px solid #01AB55; }

/*--- html5 element ---*/

header { width: 100%; display: table; position: relative }
main { width: 100%; margin-top: 30px; display: table; }
footer { width: 100%; height: 250px; padding-top: 25px; background: #1C3039; border-top: 3px solid #0062A3; display: table; }

section#sec1 { width: 100%; float: left; margin-bottom: 20px; padding: 10px 0; background: #fff; }
section#sec2 { width: 100%; float: left; padding: 10px 0; background: #F2F4F9; }
section#inside { width: 100%; float: left; background: #fff; min-height: 650px; }

article#showcase { width: 800px; max-height: 420px; float: left; }
article#menuside { width: 260px; float: right; background: #fff; }

article#leftside { width: 740px; float: left; }
article#rightside { width: 280px; float: right; padding: 10px; background: #FAFBFD; }

article#leftside1 { width: 740px; float: left; }
article#rightside1 { width: 280px; min-height: 180px; float: right; padding: 10px; background: #fff; }

article#detail { width: 750px; min-height: 650px; float: right; }


aside#sidebar { width: 280px; min-height: 400px; float: left; padding: 10px; background: #eee; }
aside#sidebar h3 { width: 97%; float: left; margin-bottom: 10px; padding: 5px; color: #fff; font-weight: 400; background: #86AF49; }

/*container*/

.container { width: 1100px; margin: 0 auto; padding: 10px 0; overflow: hidden; }

.topleft1 { width: 25px; height: 50px; float: left; display: none; }
.topleft2 { width: 250px; height: 70px; float: left; background: url(image/logo.png) left 0 no-repeat; cursor: pointer; }
.topright { width: auto; float: right; margin-top: 20px; font-size: 16px; }


.slogan { width: auto; float: left; padding: 10px; margin-top: 130px; background: #444; opacity: 0.5; }
.slogan p { font-size: 42px; color: #fff; font-weight: 600; }
.slogan p + p { font-size: 18px; color: #fff; }

.navbar { width: 1100px; background: #0062A3; margin: auto; position: absolute; left: 0; right: 0; bottom: 0; }
.navbar a { display: inline-block; color: #f2f2f2; text-align: center; padding: 15px 16px; text-decoration: none; }
.navbar a:hover { color: #fff; text-decoration: none; background: #86AF49; }
.navbar .act { background: #86AF49; color: #fff; }

.navright { float: right; color: #fff; font-size: 16px; font-weight: 600; background: #86AF49; padding: 19px 25px; }
.navright:hover { background: #8B2F3E; text-decoration: none; }

.topslider { width: 100%; float: left; }
.topslider .bigslider { width: 100%; margin: 0 auto; display: none; min-height: 300px; max-height: 500px; }


.openNav { width: 30px; float: left; margin: 10px 0 0 10px; font-size: 28px; cursor: pointer; color: #333 }
.sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #274472; overflow-x: hidden; transition: 0.5s; padding-top: 50px; display: none; }
.sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; color: #fff; }
.sidenav .baskan { width: 100%; float: left; }

.phDiv { width: 100%; float: left; }

.mainbox1 { width: 125px; margin-left: 60px; padding-bottom: 5px; display: inline-block; text-align: center; color: #274472; border-bottom: 1px solid #ccc; }
.mainbox1:first-child { margin-left: 0px; }
.mainbox1 a { display: block; color: #274472; font-weight: 600; }
.mainbox1 a:hover { color: #6CCDF7; }
.mainbox1:hover > div { background: #ddd; }

.mainbox2 { width: 100%; float: left; }
.mainbox2 img { width: 400px; max-height: 300px; float: left; margin-right: 20px; border-radius: 3px; }
.mainbox2 a { width: 320px; float: left; font-size: 18px; font-weight: bold; line-height: 25px; }
.mainbox2 p { width: 320px; float: left; margin-top: 15px; line-height: 20px; }
.mainbox2 a:hover { color: #444; }

/*bilgilendirme ana sayfa*/
.mainbox3 { width: 100%; display: grid; grid-template-columns: 70px 1fr; grid-template-rows: 55px; margin-bottom: 5px; background: #fff; box-sizing: border-box; }
.mainbox3 .boximg { width: 100%; max-height: 55px; border: 1px solid #d4eadf; border-radius: 3px; overflow: hidden; }
.mainbox3 .boximg img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 3px; }
.mainbox3 .boxcontent { width: 100%; padding: 10px; box-sizing: border-box; display: block; position: relative; }
.mainbox3 .boxcontent h2 { color: #274472; font-size: 14px; font-weight: 400; word-break: break-word; }
.mainbox3 a:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #01AB55; opacity: 0; }
.mainbox3 a:hover:before { opacity: 0.2; }

/*image gallery ana sayfa*/
.mainbox4 { width: 225px; float: left; margin-left: 30px; position: relative; }
.mainbox4:first-child { margin-left: 0; }
.mainbox4 a:hover { text-decoration: none; }
.mainbox4 img { width: 100%; height: 150px; display: block; }
.mainbox4 span { width: 100%; padding: 10px 0; position: absolute; bottom: 0; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.5); /* Black see-through */ color: #f1f1f1; transition: .5s ease; opacity: 0; color: white; font-size: 18px; text-align: center; }
.mainbox4:hover span { opacity: 1; }

/*duyurular ana sayfa*/
.mainbox5 { width: 100%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto; margin-bottom: 5px; background: #fff; box-sizing: border-box; }
.mainbox5 .boxcontent { width: 100%; box-sizing: border-box; display: block; position: relative; }
.mainbox5 .boxcontent h2 { color: #274472; font-size: 14px; font-weight: 400; word-break: break-word; }
.mainbox5 a:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #01AB55; opacity: 0; }
.mainbox5 a:hover:before { opacity: 0.2; }

.newsbox2 { width: 320px; height: 110px; float: left; margin-left: 30px; color: #274472; transition: transform .1s; }
.newsbox2:nth-child(-n+2) { border-bottom: 1px solid #ddd; margin-bottom: 20px; }
.newsbox2 h3 { font-size: 16px; font-weight: 600; color: #333; }
.newsbox2 p { font-size: 13px; color: #666; margin: 0; }
.newsbox2:hover { -ms-transform: scale(1.1); /* IE 9 */ -webkit-transform: scale(1.1); /* Safari 3-8 */ transform: scale(1.1); }
.newsbox2:hover h3 { color: #e74c3c; }


.boxtop { width: 100%; float: left; margin-bottom: 15px; border-bottom: 1px solid #ccc; }
.boxtop h1 { width: auto; float: left; font-weight: 300; padding-left: 5px; border-left: 5px solid #86AF49; }
.boxtop a { width: auto; float: right; margin-top: 15px; color: #0062A3; }
.boxtop a:hover { text-decoration: underline; }


/*--------detail page*/

.detailPage { width: 100%; float: left; }
.detailPage img { max-width: 600px; float: left; }
.detailPage .statement { width: 100%; float: left; margin: 15px 0 10px 0; line-height: 20px; }
.detailPage .info { width: 100%; float: left; margin: 10px 0; }

.maingallery { width: 100%; float: left; margin-top: 20px; }

.detailgal { width: 100%; float: left; margin-top: 30px; background: #0062A3; }
.minigal { display: block; }

.rsidebar { width: 100%; float: left; }
.rsidebar a { width: 100%; float: left; line-height: 25px; }
.rsidebar a:before { content: "» "; }


/*--------End detail page*/



/*-------Contact Page*/
.contact { width: 100%; float: left; }
.contact table { width: 100%; float: left; }
.contact td { padding: 3px; }
.contact td:first-child { width: 120px; }
.contact td input[type=text], input[type=number], input[type=email] { width: 90%; max-width: 250px; padding: 5px; }
.contact td textarea { width: 90%; max-width: 350px; padding: 5px; overflow: hidden; }
.contact img { max-width: 550px; }

.login { width: 400px; margin: auto; }
.login input[type=text], input[type=email], input[type=password] { width: 250px; padding: 4px; }



.checkbox label { padding-left: 10px; line-height: 30px; font-size: 15px; color: #6870a8; font-weight: normal; display: inline-block; }

/*-------Search Page*/
.searchbox { width: 100%; float: left; margin-bottom: 20px; }
.searchbox img { width: 100px; height: 70px; float: left; margin-right: 10px; }
.searchbox a { width: 550px; float: left; font-size: 16px; color: #168eea; }
.searchbox p { width: 550px; float: left; color: #666; }


/*footer side*/

.leftfooter { width: 500px; float: left; color: #fff; font-size: 13px; }
.leftfooter p { margin-bottom: 10px; }
.leftfooter span { margin-left: 5px; }
.leftfooter a { }

.rightfooter { width: 500px; float: right; color: #2F2B2A; font-size: 13px; }
.rightfooter h4 { font-weight: 400; color: #fff; }
.rightfooter a { font-size: 14px; color: #86AF49; display: inline-block; padding: 5px; }
.rightfooter a:hover { color: #eee; }


input[type=text], input[type=Password], textarea, select { background-color: #fff; border: 1px solid #bbb; margin: 0; padding: 6px; color: #444; }
input[type=text]:focus, input[type=Password]:focus, textarea:focus, select:focus { border-color: #2D3940; color: #3e3e3e; }

input[type=Radio] { margin: -2px 5px 0 5px; vertical-align: middle; }

input[type=submit] { margin: 0; padding: 7px 9px 7px 9px; color: #fff; background: #595959; border: 0; cursor: pointer; }
input[type=submit]:hover { color: #fff; background-color: #3498DB; }
