@charset "UTF-8";
/* 
==================================
======= DETAY MÜZİK COFFEE =======
====== @package DETAYCOFFEE ======
====== Developer: Yigit Koc ======
= Dev. Website: yigitkoc.com.tr  =
==================================
===== DETAY M. COFFEE STYLE ======
==================================
*/
@import url("https://use.typekit.net/fpr4cua.css");
/* MOBILE */
/* Nav-menu */
#menu {
  z-index: 99;
  top: 0;
  position: fixed;
  width: 100%;
  height: 75px; }

#menu-container {
  width: 100%;
  height: 75px; }

#menu-container-logo {
  box-sizing: border-box;
  -webkit-text-align: center;
  text-align: center;
  padding-top: 5px;
  align-content: center;
  width: 50%;
  margin-right: 25%;
  height: 70px;
  float: left; }

#menu-container-navigation {
  clear: left;
  width: 100%;
  min-height: 25px; }

#menu-container-navigation ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

#menu-container-navigation ul li {
  transition: background 0.4s;
  text-align: center;
  box-sizing: content-box;
  width: 100%;
  line-height: 35px;
  font-size: 23px;
  padding: 10px 0px;
  display: block; }

#menu-container-navigation ul li a {
  font-family: "Josefin Sans", sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  color: inherit; }

.menu-container-nav-close {
  display: none; }

/* Footer Elements */
#footer {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  bottom: 0;
  padding: 0;
  overflow: hidden;
  min-height: 250px; }

.footer-content {
  width: 80%;
  margin: 16px auto;
  text-align: center;
  padding: 16px 0px; }

.footer-content h3 {
  margin: 0 0 16px;
  padding: 0; }

.footer-content p {
  font-size: 16px;
  line-height: 18px; }

.footer-content a {
  text-decoration: none; }

.footer-sitemap ul {
  list-style: none;
  margin: 0;
  padding: 0; }

.footer-sitemap ul li {
  display: inline-block;
  line-height: 18px;
  margin: 0 5px 0px 5px; }

.footer-sitemap a {
  text-decoration: underline; }

.footer-map iframe {
  width: 100%; }

.social-icons {
  margin: 20px 0 0; }

.social-icons ul {
  padding: 0;
  margin: 0;
  list-style: none; }

.social-icons ul li {
  font-size: 45px;
  display: inline-block;
  margin: 0 10px; }

.social-icons ul li a {
  text-decoration: none; }

/* Hamburger Styles */
.hamburger_container {
  float: left;
  display: inline-block;
  cursor: pointer;
  width: 25%;
  height: 75px;
  padding: 18px 18px 18px; }

.hamburger_bar1, .hamburger_bar2, .hamburger_bar3 {
  width: 35px;
  height: 5px;
  margin: 6px 0;
  transition: 0.4s; }

.hamburger_ico_change .hamburger_bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px); }

.hamburger_ico_change .hamburger_bar2 {
  opacity: 0; }

.hamburger_ico_change .hamburger_bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px); }

/* ACCORDION */
.detay-list-type-card-1 {
  width: 90%;
  margin: 0px 5% 16px; }
  .detay-list-type-card-1 h1 {
    text-align: left;
    margin: 0;
    font-size: 180%;
    padding: 16px 32px 16px 32px; }
  .detay-list-type-card-1 ul {
    list-style: none;
    margin: 0;
    padding: 0; }
    .detay-list-type-card-1 ul li {
      width: 100%;
      margin: 0px; }
      .detay-list-type-card-1 ul li button {
        text-align: left;
        background-image: url(../img/icon_accord.png);
        background-repeat: no-repeat;
        background-position: left 11px center;
        background-size: 11px auto;
        font-size: 125%;
        padding: 16px 16px 16px 32px;
        margin: 0;
        border: none;
        width: 100%;
        -webkit-transition: background-color 0.6s ease-in-out;
        -moz-transition: background-color 0.6s ease-in-out;
        -ms-transition: background-color 0.6s ease-in-out;
        -o-transition: background-color 0.6s ease-in-out;
        transition: background-color 0.6s ease-in-out; }
      .detay-list-type-card-1 ul li p {
        border: none;
        text-align: left;
        box-sizing: border-box;
        margin: 0;
        overflow: hidden;
        max-height: 0;
        font-weight: 400;
        padding: 0 16px 0 32px;
        -webkit-transition: max-height 0.6s ease-in-out, padding 0.6s ease-in-out;
        -moz-transition: max-height 0.6s ease-in-out, padding 0.6s ease-in-out;
        -ms-transition: max-height 0.6s ease-in-out, padding 0.6s ease-in-out;
        -o-transition: max-height 0.6s ease-in-out, padding 0.6s ease-in-out;
        transition: max-height 0.6s ease-in-out, padding 0.6s ease-in-out; }
      .detay-list-type-card-1 ul li .active {
        background-image: url(../img/icon_accord_m.png); }

/* TABLET */
@media only screen and (min-width: 768px) {
  .footer-content {
    width: inherit; }

  /* ACCORDION */
  .detay-list-type-card-1 {
    width: 100%;
    margin: 0; }
    .detay-list-type-card-1 ul li p {
      font-size: 120%; } }
/* LD */
@media only screen and (min-width: 992px) {
  /* Nav-menu */
  #menu-container {
    width: 900px;
    margin: auto; }

  .menu-container-nav-close {
    display: block; }

  #menu-container-logo {
    text-align: left;
    width: 25%;
    padding-left: 0;
    margin: 0; }

  #menu-container-navigation {
    clear: none;
    width: 75%;
    float: left;
    min-height: 75px; }

  #menu-container-navigation ul {
    padding: 0;
    margin: 0 0 0 25px;
    float: right; }

  #menu-container-navigation ul li {
    box-sizing: border-box;
    margin: 0;
    display: inline-block;
    width: inherit;
    line-height: 72px;
    font-size: 16px;
    padding: 1px 8px;
    background: none; }

  /* Hamburger Remove */
  .hamburger_container {
    display: none; }

  /* Footer */
  .footer-content {
    height: 252px;
    width: 33.33%;
    padding: 0px 16px 0 0;
    text-align: left; }

  .social-icons ul li {
    margin: 0 10px 0 0;
    font-size: 30px; }

  .footer-sitemap ul li {
    margin: 0 10px 0 0; }

  /* Page Content */
  /* Page Hero */
  .page-hero {
    margin: 20px 0px; } }
/* XLD */
@media only screen and (min-width: 1200px) {
  #menu {
    position: relative; }

  #menu-container {
    width: 1200px;
    margin: auto; } }
/* Animation */
a {
  transition: 0.4s; }