/* ----------- GENERIC SETTINGS ------------- */
/* Landscape */
@media screen and (max-width: 900px) {
  .tab {
    font-size: 10pt;
    padding-top: 10px;
  }
  col {
    width: 60px;
  }
  td {
    height: 120px;
  }
  #title {
    font-size: 200%;
    top: 9%;
  }
  #close {
    top: 0%;
  }
  body.popup-shown #popupcontent {
    left: 7%;
    right: 16%;
  }
  body.popup-shown #popupcontent-img {
    left: 5%;
    right: 5%;
  }
  .player .img {
    width: 40px;
    height: 40px;
  }
  .jesus img {
    height: 11em;
  }
  .info {
    right: 16%;
    bottom: 5%;
  }
  .info .img {
    width: 100px;
    height: 37px;
    /* ratio needs to be width*0.37 */
  }
  .logo img {
    width: 40px;
    height: 40px;
  }
}
/* Portrait */
@media screen and (max-width: 900px) and (orientation: portrait) {
  body {
    width: 100vw;
    height: 100vh;
    background-image: url(../images/arka-fon-dikey.jpg);
    background-size: cover;
    background-position: bottom, center;
  }
  #takvim {
    display: none;
  }
  #takvim-vertical {
    top: 14%;
    right: 18%;
    left: 18%;
    position: absolute;
    display: block;
  }
  .days-table {
    display: table;
    table-layout: fixed;
    width: 100%;
    border-spacing: 0px;
    border-collapse: separate;
  }
  .days-row {
    display: table-row;
  }
  .tab {
    display: table-cell;
    padding-top: 6px;
    font-size: 9pt;
    height: 68px;
    vertical-align: top;
  }
  /*****************************************************************
 * LESS SCRIPTING
 *****************************************************************/
  #tab-10.tab {
    background-image: url("../images/gun-10.png");
    background-size: contain;
    background-position: top;
  }
  #tab-10.tab.opened {
    background-image: url("../images/gun-10a.png");
    background-size: contain;
    background-position: top;
  }
  #tab-9.tab {
    background-image: url("../images/gun-9.png");
    background-size: contain;
    background-position: top;
  }
  #tab-9.tab.opened {
    background-image: url("../images/gun-9a.png");
    background-size: contain;
    background-position: top;
  }
  #tab-8.tab {
    background-image: url("../images/gun-8.png");
    background-size: contain;
    background-position: top;
  }
  #tab-8.tab.opened {
    background-image: url("../images/gun-8a.png");
    background-size: contain;
    background-position: top;
  }
  #tab-7.tab {
    background-image: url("../images/gun-7.png");
    background-size: contain;
    background-position: top;
  }
  #tab-7.tab.opened {
    background-image: url("../images/gun-7a.png");
    background-size: contain;
    background-position: top;
  }
  #tab-6.tab {
    background-image: url("../images/gun-6.png");
    background-size: contain;
    background-position: top;
  }
  #tab-6.tab.opened {
    background-image: url("../images/gun-6a.png");
    background-size: contain;
    background-position: top;
  }
  #tab-5.tab {
    background-image: url("../images/gun-5.png");
    background-size: contain;
    background-position: top;
  }
  #tab-5.tab.opened {
    background-image: url("../images/gun-5a.png");
    background-size: contain;
    background-position: top;
  }
  #tab-4.tab {
    background-image: url("../images/gun-4.png");
    background-size: contain;
    background-position: top;
  }
  #tab-4.tab.opened {
    background-image: url("../images/gun-4a.png");
    background-size: contain;
    background-position: top;
  }
  #tab-3.tab {
    background-image: url("../images/gun-3.png");
    background-size: contain;
    background-position: top;
  }
  #tab-3.tab.opened {
    background-image: url("../images/gun-3a.png");
    background-size: contain;
    background-position: top;
  }
  #tab-2.tab {
    background-image: url("../images/gun-2.png");
    background-size: contain;
    background-position: top;
  }
  #tab-2.tab.opened {
    background-image: url("../images/gun-2a.png");
    background-size: contain;
    background-position: top;
  }
  #tab-1.tab {
    background-image: url("../images/gun-1.png");
    background-size: contain;
    background-position: top;
  }
  #tab-1.tab.opened {
    background-image: url("../images/gun-1a.png");
    background-size: contain;
    background-position: top;
  }
  body.popup-shown {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../images/arka-fon-dikey.jpg);
    background-size: 100%;
  }
  body.popup-shown #popupcontent {
    left: 5%;
    right: 8%;
    top: 5%;
    bottom: 36%;
  }
  body.popup-shown #popupcontent-img {
    left: 3%;
    right: 3%;
    top: 3%;
    bottom: 10%;
    background-image: url("../images/gunluk-oyku-fon-dikey.png");
  }
  .day-icon {
    width: 50px;
    height: 50px;
  }
  .story h2 {
    font-size: 16pt;
  }
  .story {
    padding-top: 1em;
    padding-right: 0em;
    padding-left: 5em;
    font-size: 8pt;
  }
  .jesus img {
    height: 11em;
  }
  .fb-div {
    left: 15%;
    bottom: 4%;
    width: 50px;
  }
  .player {
    bottom: 4%;
  }
  .info {
    right: 16%;
    bottom: 5%;
  }
  .info .img {
    width: 70px;
    height: 26px;
    /* ratio needs to be width*0.37 */
  }
  .logo img {
    right: 4%;
    bottom: 5%;
    width: 40px;
    height: 40px;
  }
}
/* ----------- Large Landscape Screens ----------- */
@media screen and (max-width: 1400px) and (min-height: 700px) and (orientation: landscape) {
  .fb-div {
    left: 14%;
  }
  .tab {
    height: 130px;
    font-size: 14pt;
  }
  col {
    width: 70px;
  }
  .jesus img {
    height: 28em;
  }
}
/* ----------- Large Portrait Screens ----------- */
@media screen and (max-width: 1050px) and (min-height: 815px) and (orientation: portrait) {
  #title {
    font-size: 350%;
  }
  .tab {
    font-size: 16pt;
    padding-top: 8px;
    height: 110px;
  }
  .jesus img {
    height: 25em;
  }
  .story {
    font-size: 10pt;
  }
  .jesus img {
    height: 31em;
  }
  .player .img {
    width: 60px;
    height: 60px;
  }
  .info .img {
    width: 140px;
    height: 52px;
    /* ratio needs to be width*0.37 */
  }
  .logo img {
    width: 60px;
    height: 60px;
  }
  .fb-div {
    left: 20%;
    width: 80px;
  }
}
@media screen and (max-width: 1050px) and (min-height: 768px) and (orientation: portrait) {
  #title {
    font-size: 350%;
  }
  .tab {
    font-size: 16pt;
    padding-top: 8px;
    height: 110px;
  }
  .jesus img {
    height: 25em;
  }
  .story {
    font-size: 10pt;
  }
  .jesus img {
    height: 26em;
  }
  .player .img {
    width: 60px;
    height: 60px;
  }
  .info .img {
    width: 140px;
    height: 52px;
    /* ratio needs to be width*0.37 */
  }
  .logo img {
    width: 60px;
    height: 60px;
  }
  .fb-div {
    left: 20%;
    width: 80px;
  }
}
@media screen and (max-width: 760px) and (min-height: 800px) and (orientation: portrait) {
  #title {
    font-size: 200%;
  }
  .tab {
    font-size: 10pt;
    height: 90px;
    padding-top: 6px;
  }
  .story p {
    font-size: 8pt;
  }
  .jesus img {
    height: 21em;
  }
  .player .img {
    width: 30px;
    height: 30px;
  }
  .info .img {
    width: 70px;
    height: 26px;
    /* ratio needs to be width*0.37 */
  }
  .logo img {
    width: 30px;
    height: 30px;
  }
  .fb-div {
    left: 20%;
    width: 40px;
  }
}
/* ----------- General Smaller Screens ----------- */
/* Portrait and Landscape */
@media screen and (max-height: 375px) and (max-width: 850px) {
  #title {
    font-size: 170%;
  }
}
/* Landscape */
/* SPECIFIC DEVICE SETTINGS */
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 200px) and (max-device-width: 568px) and (max-device-height: 800px) and (-webkit-min-device-pixel-ratio: 2) {
  #title {
    font-size: 150%;
  }
  .tab {
    font-size: 8pt;
    height: 58px;
    padding-top: 5px;
  }
  .story p {
    font-size: 8pt;
  }
  .player .img {
    width: 30px;
    height: 30px;
  }
  .info .img {
    width: 70px;
    height: 26px;
    /* ratio needs to be width*0.37 */
  }
  .logo img {
    width: 30px;
    height: 30px;
  }
  .fb-div {
    left: 20%;
    width: 40px;
  }
}
@media screen and (max-width: 360px) and (min-height: 568px) and (orientation: portrait) {
  #title {
    font-size: 150%;
  }
  .tab {
    font-size: 8pt;
    height: 58px;
    padding-top: 5px;
  }
  .player .img {
    width: 30px;
    height: 30px;
  }
  .info .img {
    width: 60px;
    height: 22px;
    /* ratio needs to be width*0.37 */
  }
  .logo img {
    width: 30px;
    height: 30px;
  }
  .fb-div {
    left: 20%;
    width: 30px;
  }
}
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 200px) and (max-device-height: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  .tab {
    font-size: 8pt;
    height: 30px;
  }
}
/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .tab {
    font-size: 6pt;
    height: 50px;
  }
  .player .img {
    width: 20px;
    height: 20px;
  }
}