html,body{height:100%; width: 100%;}

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

body.index { background: #8cadc6 url(../images/bg/index.jpg) no-repeat center top; }
body.referans { background: #33cbf2 url(../images/bg/referans.jpg) no-repeat center top; }
body.partners { background: #dedede url(../images/bg/partners.jpg) no-repeat center top; }
body.page { background: #91b0c4 url(../images/bg/page.jpg) no-repeat center top; }
body.contact { background: #b15e5e url(../images/bg/contact.jpg) no-repeat center top; }

.container { width: 820px; }

/*Header*/
header { width: 100%; position: relative; z-index:1; padding-top: 20px; }
header .container { border-bottom: 1px solid #fff; padding-bottom: 20px; }
header .nav { font-size: 12px; color: #fff; }
header .nav a { color: #fff; font-weight: normal; }
header .nav a:hover, header .nav a:active, header .nav a:focus { background: none;color: #e3c227; }
header .nav ul { list-style: none; padding: 0 15px; }
header .nav ul li { list-style: none; padding: 5px 0; margin: 0; }

.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus { background: none; color: #e3c227; }

ul.dil { list-style: none; padding: 0; margin: 0; }
ul.dil li { list-style: none; margin-bottom: 5px; }
ul.dil li a { display: block; width: 42px; height: 49px; }
ul.dil li a.dil1 { background: url(../images/tr.png) no-repeat; }
ul.dil li a.dil1:hover, ul.dil li a.dil1.active {  background: url(../images/tr_hover.png) no-repeat; }
ul.dil li a.dil5 { background: url(../images/en.png) no-repeat; }
ul.dil li a.dil5:hover,ul.dil li a.dil5.active {  background: url(../images/en_hover.png) no-repeat; }

/*Slider*/
section.slider {height: 76%; overflow: hidden; width: 100%;}
section.slider .carousel,.item,.active{height:100%;}
section.slider .carousel-inner{height:100%;}
section.slider .fill{width:100%;height:100%;background-position:center;background-size:cover;}
section.slider .carousel-caption { bottom: auto; color: #fff; font-weight: normal; }
section.slider .carousel-caption span.baslik { font-size: 68px; display: block; }
section.slider .carousel-caption span { font-size: 22px; }
section.slider .carousel-caption .btn-primary {background: url(../images/transparan.png); border-color: #fff; color: #fff; border-radius: 15px; margin-top: 30px; padding: 20px 70px; font-size: 20px; }

.carousel-caption span.baslik { font-family: 'Open Sans', sans-serif; }
.carousel-caption span.baslik strong { font-family: 'Open Sans', sans-serif; }
.carousel-caption span { font-family: 'Open Sans', sans-serif; }
h1,h2,h3,h4 { font-family: 'Open Sans', sans-serif; }

section.content { color: #000; }
section.content h1 { font-weight: bold; margin: 25px 0; }

/*partners*/
.pentagon { margin-top: 60px; }
.pentagon .row.satir { text-align: center; margin-top: -20px; }
.pentagon .row.satir a { margin: 0 16px; }

/*Reference*/
.reference { margin-top: 60px; }
.reference { margin-bottom: 40px; }
.reference a.item { /*margin: 10px 79px 10px 0;*/ margin: 20px 0; }
/*.reference a.item:nth-child(3) { margin-right: 0; }*/

/*İletişim*/
#header_map { position: relative; width: 100%; height: 400px; display: inline-block; left: 0; top: 0; }
.iletisim { width: 100%; margin: 30px 0; }
.iletisim .container, .iletisim .col-md-4 { padding: 0; }
.iletisim .row { padding: 20px 15px; }
.iletisim .row > div { text-align: left; color: #fff; }
.iletisim .row > div span { display: inline-block; width: 200px; }
.iletisim .row > div img { vertical-align: middle; }
.iletisim .row > div.adres img { vertical-align: top; }
.iletisim a { color: #fff; }
#header_map {-webkit-border-radius: 10px; border-radius: 10px;}

.iletisimForm { width: 100%; background-color: #f9f9f9; margin: 10px 0 100px 0; font-family: Arial; }
.iletisimForm h2 { text-align: center; padding: 30px 0; }
.iletisimForm form { width: 250px; margin: 0 auto; font-style: normal; }
.iletisimForm input, .iletisimForm textarea { border: 1px solid #666; text-align: center; background-color: transparent; }
.iletisimForm .btn { font-weight: bold; background-color: #666; border-color: #666; }

footer { background: #292929; padding: 60px 0; text-align: center; }
footer .sosyal { width: 100%; margin-bottom: 20px; }
footer a { color: #909090; font-size: 12px; }


/*
TABLET & SMALLER LAPTOPS
The average viewing window and preferred media query for those is 768px.
But I think that some more breathing space is good:)
*/
@media only screen and (max-width: 920px) {
    .container { width: 100%; }
    header > .container > .row > .col-md-1 {top: 20px; position: absolute; right: 20px;}
    .pentagon .row.satir { margin-top: 0; }
    .pentagon .row.satir a {margin: 10px 16px; display: inline-block;}
    .referans a.item {display: inline-block; width: 49%; text-align: center;}
    .iletisim .container, .iletisim .col-md-4 { padding: 10px; }
    section.slider .carousel-caption span.baslik { font-size: 30px; }
    section.slider .carousel-caption span { font-size: 14px; }
}

/*
LARGER MOBILE DEVICES
This is for mobile devices with a bit larger screens.
*/
@media only screen and (max-width: 481px) { 
    .container { width: 100%; }
    header > .container > .row > .col-md-1 {top: 20px; position: absolute; right: 20px;}
    .pentagon .row.satir { margin-top: 0; }
    .pentagon .row.satir a {margin: 10px 16px; display: inline-block;}
    .referans a.item {display: inline-block; width: 100%; text-align: center;}
    .iletisim .container, .iletisim .col-md-4 { padding: 10px; }
    .carousel-caption { left: 0; right: 0; }
    section.slider .carousel-caption span.baslik { font-size: 30px; }
    section.slider .carousel-caption span { font-size: 14px; }
    .nav-pills > li > a { font-weight: bold; }
}

/*
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 1030px) {
}

/*
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*/
@media only screen and (min-width: 1240px) {
}

/*
RETINA (2x RESOLUTION DEVICES)
This applies to the retina iPhone (4s) and iPad (2,3) along with
other displays with a 2x resolution.
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}

/*
iPHONE 5 MEDIA QUERY
iPhone 5 or iPod Touch 5th generation styles (you can include your own file if you want)
*/
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) { 
}

/*
PRINT STYLESHEET
*/
@media print {
}