/* - - - - - - - - - - - - - - - - - - - - - - - 
GLOBAL FIXES
- - - - - - - - - - - - - - - - - - - - - - - - */

/* box-sizing applied to a universal selector changes the box model so that border and padding cut into the height/width of the box rather than expanding it. Explanation here: http://css-tricks.com/box-sizing. */
* {
   -webkit-box-sizing: border-box; 
   -moz-box-sizing: border-box; 
   box-sizing: border-box;
}

/* Add the "group" class to a container element to contain it's floats (without needing to specify a fixed height). See: http://nicolasgallagher.com/micro-clearfix-hack. If you need a quick refresher on working with floats I recommend reading: http://css-tricks.com/all-about-floats. */
.group:before,
.group:after {
   content:"";
   display:table;
}
.group:after {
   clear:both;
}
.group {
   zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

/* resets */
*,
*:before,
*:after {
  box-sizing: border-box;
}

/* MENU FIX ------------------------------------------------------- */
.clearfix:after {
   content: "";
  display: table;
  clear: both;
}

h1.basliklar { 
  display: inline;
  font-size: 100%; 
  text-align: left; 
  line-height: 0; 
  text-align: center; 
  font-weight: normal;
}

h1.homekey {
  display: inline;
  font-size: 0%; 
  text-align: left; 
  line-height: 0; 
  text-align: center; 
  font-weight: normal;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   

      MOBILE CSS


- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@font-face {
  font-family: 'Gilroy-Light';
  src: url('Gilroy-Light.ttf');
}

@font-face {
  font-family: 'Gilroy-Bold';
  src: url('Gilroy-Bold.ttf');
}

body {
   font-family: Gilroy-Light, sans-serif;
   font-size: 100%;
   line-height: 1.5;
   height: 100%;
}

h2 { font-family: Gilroy-Bold, sans-serif; font-size: 1.1em; line-height: 0; text-align: center; font-weight: normal; }
#h2-h { font-family: Gilroy-Bold, sans-serif; font-size: 1.1em; line-height: 1.1em; text-align: center; font-weight: normal; }
h3 { font-family: Gilroy-Light, sans-serif; font-size: 0.9em; line-height: 1.1em; text-align: center; font-weight: normal; }
#h2 { font-family: Gilroy-Bold, sans-serif; font-size: 1.1em; font-weight: normal; line-height: 1.5; text-align: left; }

.top-nav { display: none; }

.top-nav a { color: black; text-decoration: none; }

.top { width: 100%; height: 4em; }

/* -----------------------------------------------------------------
      GENERAL
----------------------------------------------------------------- */

.titles {
  width: 100%;
  height: 2em;
  font-family: Gilroy-Bold, sans-serif;
  font-size: 140%;
  text-align: center;
  color: #021C39;
  margin-top: 2em;
  margin-bottom: 1em;
}

.titles-line {
  width: 100%;
  height: 0.2em;
  background: #EDEDED url('../images/bg-titles.png') no-repeat center;
}

.content {
  width: 95%;
  margin: 0 auto;
}

/* -----------------------------------------------------------------
      ANASAYFA MARKALARIMIZ
----------------------------------------------------------------- */

.home-brands { width: 33%; height: 6em; float: left; position: relative; }
.home-brands img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 60px;}

/* -----------------------------------------------------------------
      HAKKIMIZDA MARKALARIMIZ
----------------------------------------------------------------- */

.hakkimizda-brands { width: 30%; height: 5em; float: left; position: relative; }
.hakkimizda-brands img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 60px;}

/* -----------------------------------------------------------------
      İLETİŞİM
----------------------------------------------------------------- */

.iletisim-boxes { width: 100%; height: auto; text-align: center; font-size: 140%; margin-bottom: 0.5em; }
.iletisim-boxes img { vertical-align: bottom; max-height: 25px }

/* -----------------------------------------------------------------
      FOOTER
----------------------------------------------------------------- */

.footer-first {
  width: 100%;
  height: 12em;
  background-color: #021C3B;
  margin-top: 2em;
} .footer-first img { vertical-align: bottom; } .footer-first a { color: white; text-decoration: none; }

.footer-second {
  width: 100%;
  background-color: #FFF;
  text-align: center;
  color: black;
  font-size: 85%;
  padding: 1em;
} .footer-second img { max-height: 2em; }

.footer-socialmedia {
  width: 100%;
  height: 2em;
  text-align: center;
  color: #FFF;
  font-size: 85%;
  padding: 2em;
} .footer-socialmedia img { max-height: 20px; }

.footer-info {
  width: 100%;
  height: 2em;
  text-align: center;
  color: #FFF;
  margin-top: 1em;
}

/* -----------------------------------------------------------------
      MENU
----------------------------------------------------------------- */

/* header */

.header {
  background-color: #fff;
  width: 100%;
  z-index: 3;
  font-family: Gilroy-Light, sans-serif;
  font-size: 0.85em;
  position: fixed;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #fff;
}

.header li a {
  display: block;
  padding: 0.8em 1em;
  text-decoration: none;
  color: #021C3A;
  z-index: 3;
  border-bottom: solid 0.1em #F2F2F2;
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: none;
  border-bottom: none;
}

.header {
  display: block;
  float: left;
}

.logo {
   display: block;
   float: left;
   margin-top: 0.3em;
   margin-left: 1em;
}


/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}


/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}


/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 400px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   

      DESKTOP CSS - MIN-WIDTH: 800PX;


- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

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

.top {
  width: 1000px;
  height: 4.3em ;
  margin: 0 auto;
  margin-top: 0.4em;
}

.content {
  width: 1000px;;
  margin: 0 auto;
}

/* -----------------------------------------------------------------
      TOP NAV
----------------------------------------------------------------- */

.top-nav {
  display: block;
  width: 100%;
  height: 3em;
  background-color: #E7E7E7;
  margin-bottom: 1em;
}

.top-nav-inside {
  width: 1000px;
  height: 3em;
  line-height: 3em;
  margin: 0 auto;
  font-size: 90%;
} .top-nav-inside img { vertical-align: middle; max-height: 20px; }

.top-nav-left {
  float: left;
}

.top-nav-right {
  float: right;
}

/* -----------------------------------------------------------------
      ANASAYFA MARKALARIMIZ
----------------------------------------------------------------- */

.home-brands { width: 20%; height: 10em; }
.home-brands img { max-width: 120px; }

/* -----------------------------------------------------------------
      HAKKIMIZDA MARKALARIMIZ
----------------------------------------------------------------- */

.hakkimizda-brands { width: 15%; }

/* -----------------------------------------------------------------
      FOOTER
----------------------------------------------------------------- */

.footer-first {
  height: 10em;
}

/* -----------------------------------------------------------------
      MENU
----------------------------------------------------------------- */

.header { width: 1000px; position: absolute; }
.header li { float: left; }
.header li a { padding: 20px 15px; border-bottom: none; cursor: pointer; transition: all .4s ease-in-out; }
.header li a:hover { padding: 20px 15px; border-bottom: none; background-color: #021C3A; color: white; }
.header .menu { clear: none; float: right; max-height: none; }
.header .menu-icon { display: none; }
.logo { display: block; float: left; margin-top: 0; margin-left: 0; }
.section { overflow: hidden; margin: auto; max-width: 1400px; }
.section a { position: relative; float: left; width: 100%; }
.section a img { width: 100%; display: block; }
.section a span { color: #fff; position: absolute; left: 5%; bottom: 5%; font-size: 2em; }
.section-split a span { display: none; }
.section-split a:hover span { display: block; }
.section-split a { width: 50%; }
.header li a:hover, .header .menu-btn:hover { background-color: none; }

} /* END OF THE CSS */