@charset "UTF-8";
/* 
==================================
======= DETAY MÜZİK COFFEE =======
====== @package DETAYCOFFEE ======
====== Developer: Yigit Koc ======
= Dev. Website: yigitkoc.com.tr  =
==================================
========== DETAY CARDS ===========
==================================
*/
.detay-card {
  margin: 0 0 16px;
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
  padding: 0; }

.detay-card-image {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 210px;
  margin: 0;
  padding: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover; }

.detay-card-block {
  display: block;
  position: absolute;
  width: 100%;
  height: 5%;
  top: 95%; }

.detay-card-text {
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 10pt;
  display: block;
  position: relative; }

.detay-card-text h1 {
  width: 100%;
  padding: 2pt 0;
  margin: 0;
  text-align: center;
  font-family: "Josefin Sans", sans-serif;
  font-weight: bold;
  font-size: 2em; }

.detay-card-text p {
  box-sizing: border-box;
  text-align: center;
  width: 100%;
  font-weight: 400;
  padding: 0 2pt;
  margin: 5px 0 10px;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1.1em;
  line-height: 1.3em; }

.detay-link-1 {
  font-family: "Josefin Sans", sans-serif;
  font-size: 1em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  float: left;
  -webkit-transform: translate(-50%, 0);
  box-sizing: border-box;
  margin: 10px 0 10px 50%;
  padding: 10px 10px;
  white-space: nowrap;
  display: block;
  border-width: 2px;
  border-style: solid; }

/* TABLET */
@media only screen and (min-width: 768px) {
  .detay-card {
    float: left; }

  .detay-card > div {
    clear: right;
    float: left; }

  .detay-card-image {
    width: 35%;
    height: 250px;
    margin: 0;
    padding: 0; }

  .detay-card-block {
    height: 100%;
    width: 3%;
    left: 97.5%;
    top: 0; }

  .detay-card-text {
    height: 250px;
    width: 65%;
    margin: 0; }

  .detay-card-text h1 {
    float: left;
    text-align: left;
    margin-left: 0;
    font-size: 2em; }

  .detay-card-text p {
    float: left;
    text-align: left;
    margin-left: 0;
    font-size: 1em; }

  .detay-link-1 {
    position: absolute;
    bottom: 0;
    margin: 10px 0;
    -webkit-transform: translate(0, 0); }

  /*IMAGE ON RIGHT*/
  .detay-card-image-right > div {
    clear: left;
    float: right; }

  .detay-card-image-right .detay-card-image {
    margin: 0; }

  .detay-card-image-right .detay-card-image .detay-card-block {
    float: right;
    height: 100%;
    width: 3%;
    left: 0;
    right: 98%;
    top: 0; } }
/* LD */
@media only screen and (min-width: 992px) {
  .detay-card-text p {
    font-size: 1.02em; } }
/* XLD */
@media only screen and (min-width: 1200px) {
  .detay-card-image {
    width: 33.67%;
    height: 300px;
    margin: 0 1.33% 0 0; }

  .detay-card-block {
    display: none; }

  .detay-card-text {
    height: 300px;
    padding: 24px; }

  .detay-card-text p {
    font-size: 1.1em; }

  .detay-link-1 {
    position: absolute;
    bottom: 0;
    margin: 24px 0; }

  /* IMAGE ON RIGHT */
  .detay-card-image-right .detay-card-image {
    margin: 0 0 0 1.33%; } }
/* Animation */
.detay-link-1 {
  -webkit-transition-property: background color;
  -webkit-transition-duration: .4s;
  transition-property: background color;
  transition-duration: .4s; }