@charset "UTF-8";
/* 
==================================
======= DETAY MÜZİK COFFEE =======
====== @package DETAYCOFFEE ======
====== Developer: Yigit Koc ======
= Dev. Website: yigitkoc.com.tr  =
==================================
=== DETAY M. COFFEE PORTFOLIO ====
==================================
*/
/* MOBILE */
.portfolio-container {
  width: 90%;
  overflow: hidden;
  margin: 0 5%; }
  .portfolio-container .category {
    overflow: hidden;
    margin: 0 0 32px;
    clear: left; }
    .portfolio-container .category h1 {
      margin: 0;
      padding: 0;
      text-align: center;
      font-size: 200%; }
    .portfolio-container .category .portfolio-outer .portfolio-object {
      width: 100%;
      padding: 0;
      overflow: hidden;
      max-height: 35.8vw;
      margin: 16px 0; }
      .portfolio-container .category .portfolio-outer .portfolio-object .portfolio-image {
        width: 40%;
        padding-top: 40%;
        display: block;
        float: left;
        border: none;
        background-position: 50% 50% !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        border-right: 4px solid; }
      .portfolio-container .category .portfolio-outer .portfolio-object .portfolio-description {
        width: 60%;
        float: left; }
        .portfolio-container .category .portfolio-outer .portfolio-object .portfolio-description h2 {
          font-size: 110%;
          margin: 0;
          padding: 14px 8px 0; }
        .portfolio-container .category .portfolio-outer .portfolio-object .portfolio-description h3 {
          font-size: 100%;
          margin: 0;
          padding: 0 8px; }
        .portfolio-container .category .portfolio-outer .portfolio-object .portfolio-description p {
          margin: 0;
          padding: 12px 8px 8px; }

.reference-container {
  clear: left; }
  .reference-container h1 {
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 210%; }
  .reference-container .references {
    width: 90%;
    clear: both;
    height: auto;
    margin: 16px 5%;
    overflow: hidden; }
    .reference-container .references h2 {
      float: left;
      overflow: hidden;
      width: 40%;
      text-align: center;
      font-size: 100%;
      margin: 4px 0 0;
      padding: 4px;
      border: 2px solid; }
    .reference-container .references ul {
      float: right;
      width: 60%;
      list-style: none;
      padding: 0 0 0 16px;
      margin: 0; }
      .reference-container .references ul li {
        margin: 0;
        padding: 0 0 8px; }

/* TABLET */
@media only screen and (min-width: 768px) {
  .portfolio-container {
    width: 100%;
    margin: 0 0; }
    .portfolio-container .category h1 {
      margin: 16px 0 8px;
      font-size: 250%; }
    .portfolio-container .category .portfolio-outer .portfolio-object {
      width: 48%;
      padding: 0;
      max-height: 134.4px;
      margin: 8px 1%;
      float: left; }
      .portfolio-container .category .portfolio-outer .portfolio-object .portfolio-image {
        border-right: 4px solid; }
      .portfolio-container .category .portfolio-outer .portfolio-object .portfolio-description h2 {
        font-size: 110%; }
      .portfolio-container .category .portfolio-outer .portfolio-object .portfolio-description h3 {
        font-size: 100%; }

  .reference-container .references {
    width: 100%;
    margin: 16px 0; }
    .reference-container .references h2 {
      width: 20%; }
    .reference-container .references ul {
      width: 80%; }
      .reference-container .references ul li {
        width: 50%;
        float: left;
        margin: 0;
        padding: 0 0 8px; } }
/* LD */
@media only screen and (min-width: 992px) {
  .portfolio-container {
    width: 100%; }
    .portfolio-container .category {
      margin: 16px 0; }
      .portfolio-container .category .portfolio-outer .portfolio-object {
        max-height: 172.8px; }
        .portfolio-container .category .portfolio-outer .portfolio-object .portfolio-image {
          border-right: 6px solid; }
        .portfolio-container .category .portfolio-outer .portfolio-object .portfolio-description h2 {
          font-size: 140%; }
        .portfolio-container .category .portfolio-outer .portfolio-object .portfolio-description h3 {
          font-size: 120%; }

  .reference-container .references {
    margin: 16px 0; }
    .reference-container .references h2 {
      margin: 2px 0 0; }
    .reference-container .references ul li {
      width: 33.3%; } }
/* XLD */
@media only screen and (min-width: 1200px) {
  .portfolio-container {
    width: 100%;
    margin: 0; }
    .portfolio-container .category .portfolio-outer .portfolio-object {
      width: 31.3%;
      max-height: 150.24px; }
      .portfolio-container .category .portfolio-outer .portfolio-object .portfolio-image {
        border-right: 4px solid; }
      .portfolio-container .category .portfolio-outer .portfolio-object .portfolio-description p {
        font-size: 90%; }

  .reference-container {
    overflow: hidden; }
    .reference-container .references-outer-wrap {
      width: 100%;
      overflow: hidden;
      clear: none; }
    .reference-container .references {
      margin: 32px 0; }

  	/*
  	.reference-container{
  		overflow: hidden;
  		.references-outer-wrap{
  			width: 100%;
  			overflow: hidden;
  			clear: none;
  		}
  		h1{
  		}
  		.references{
  			margin: 0;
  			padding: 0;
  			width: 20%;
  			float: left;
  			position: static;
  			clear: none;
  			display: inline-block;
  			h2{	
  				margin: 0px 0 0;
  				width:100%;
  				border: none;
  				text-align: left;
  				padding: 4px;
  			}
  			ul{
  				padding: 4px;
  				width: 100%;
  				li{	
  					width: unset;
  					float: none;
  				}
  			}
  
  		}
  	}	*/ }