@font-face {
  font-family: 'Arnold';
  src: url('../fonts/Arnold21.eot');
  src: url('../fonts/Arnold21.eot?#iefix') format('embedded-opentype'), url('../fonts/Arnold21.woff2') format('woff2'), url('../fonts/Arnold21.woff') format('woff'), url('../fonts/Arnold21.ttf') format('truetype'), url('../fonts/Arnold21.svg#Arnold21') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* exo-regular - latin_latin-ext */
@font-face {
  font-family: 'Exo';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/exo-v6-latin_latin-ext-regular.eot');
  /* IE9 Compat Modes */
  src: local('Exo Regular'), local('Exo-Regular'), url('../fonts/exo-v6-latin_latin-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/exo-v6-latin_latin-ext-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/exo-v6-latin_latin-ext-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/exo-v6-latin_latin-ext-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/exo-v6-latin_latin-ext-regular.svg#Exo') format('svg');
  /* Legacy iOS */
}
/* exo-600 - latin_latin-ext */
@font-face {
  font-family: 'Exo';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/exo-v6-latin_latin-ext-600.eot');
  /* IE9 Compat Modes */
  src: local('Exo SemiBold'), local('Exo-SemiBold'), url('../fonts/exo-v6-latin_latin-ext-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/exo-v6-latin_latin-ext-600.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/exo-v6-latin_latin-ext-600.woff') format('woff'), /* Modern Browsers */ url('../fonts/exo-v6-latin_latin-ext-600.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/exo-v6-latin_latin-ext-600.svg#Exo') format('svg');
  /* Legacy iOS */
}
/* exo-600italic - latin_latin-ext */
@font-face {
  font-family: 'Exo';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/exo-v6-latin_latin-ext-600italic.eot');
  /* IE9 Compat Modes */
  src: local('Exo SemiBold Italic'), local('Exo-SemiBoldItalic'), url('../fonts/exo-v6-latin_latin-ext-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/exo-v6-latin_latin-ext-600italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/exo-v6-latin_latin-ext-600italic.woff') format('woff'), /* Modern Browsers */ url('../fonts/exo-v6-latin_latin-ext-600italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/exo-v6-latin_latin-ext-600italic.svg#Exo') format('svg');
  /* Legacy iOS */
}
/* exo-900 - latin_latin-ext */
@font-face {
  font-family: 'Exo';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/exo-v6-latin_latin-ext-900.eot');
  /* IE9 Compat Modes */
  src: local('Exo Black'), local('Exo-Black'), url('../fonts/exo-v6-latin_latin-ext-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/exo-v6-latin_latin-ext-900.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/exo-v6-latin_latin-ext-900.woff') format('woff'), /* Modern Browsers */ url('../fonts/exo-v6-latin_latin-ext-900.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/exo-v6-latin_latin-ext-900.svg#Exo') format('svg');
  /* Legacy iOS */
}
/*****************************************************************
 * GENERAL STYLING
 *****************************************************************/
html,
body {
  background-color: #081020;
  font-family: 'Exo', sans-serif;
  font-weight: 600;
  overflow: hidden;
  width: 100%;
  height: 100%;
  text-align: justify;
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
  /* No support for these yet, use at own risk */
  -o-user-select: none;
  user-select: none;
}
h2 {
  color: black;
  font-size: 24pt;
  margin-bottom: 2px;
}
h3 {
  margin-bottom: 0em;
  font-weight: 900;
}
/*****************************************************************
 * BACKGROUND
 *****************************************************************/
body {
  background-image: url(../images/arka-fon-yatay.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: bottom, center;
}
#container .frontimg,
#container .baseimg {
  pointer-events: none;
  position: absolute;
}
/*****************************************************************
 * TOP SECTION ELEMENTS
 *****************************************************************/
#title {
  color: #0A0D12;
  font-size: 320%;
  font-family: 'Arnold', 'Impact', 'Arial Black', sans-serif;
  position: absolute;
  top: 15%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
/*****************************************************************
 * CALENDAR STYLING
 *****************************************************************/
#takvim {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color: white;
}
#takvim-vertical {
  display: none;
  color: white;
}
col {
  width: 80px;
}
td {
  height: 160px;
}
.tab {
  display: block;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-size: contain;
  background-repeat: no-repeat;
  text-align: center;
  font-size: 16pt;
  font-family: 'Arnold', sans-serif;
  vertical-align: middle;
  padding-top: 14px;
}
/*****************************************************************
 * POPUP STYLING
 *****************************************************************/
#popupcontent .content img {
  max-width: 100%;
  display: block;
  margin: auto;
}
body.popup-shown {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../images/arka-fon-yatay.jpg);
  background-size: 100%;
}
body.popup-shown #maincontent {
  display: none;
}
#popupcontent-img {
  display: none;
}
#popupcontent {
  display: none;
}
body.popup-shown #popupcontent {
  display: block;
  left: 14%;
  right: 22%;
  top: 9%;
  bottom: 30%;
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
}
::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 10px;
}
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
body.popup-shown #popupcontent-img {
  display: block;
  left: 10%;
  right: 10%;
  top: 2%;
  bottom: 2%;
  position: absolute;
  background-image: url("../images/gunluk-oyku-fon-yatay.png");
  background-size: 100% 100%;
}
#close {
  cursor: hand;
  cursor: pointer;
  font-size: 20pt;
  position: absolute;
  right: 2%;
  top: 1%;
  z-index: 1000;
}
#popupcontent .content > div {
  display: none;
}
#popupcontent .content > div.shown {
  display: block;
}
[data-show],
.player,
.collapsable {
  cursor: hand;
  cursor: pointer;
}
.day-icon {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100px;
  height: 100px;
}
.story {
  padding-top: 2em;
  padding-right: 1em;
  padding-left: 9em;
  font-size: 10pt;
}
.activity {
  text-align: justify;
}
.activity a {
  color: #46B5FD;
  text-decoration: none;
}
.activity-title {
  font-weight: bold;
}
/*****************************************************************
 * LOWER SECTION ELEMENTS
 *****************************************************************/
.jesus {
  bottom: 0px;
  left: 0px;
  right: 0px;
  text-align: center;
  position: fixed;
}
.player {
  position: absolute;
  bottom: 5%;
  left: 5%;
  display: block;
}
.player .img {
  width: 50px;
  height: 50px;
}
.player.musicoff .img {
  background-image: url(../images/button-play.png);
  background-size: 100%;
}
.player.musicon .img {
  background-image: url(../images/button-pause.png);
  background-size: 100%;
}
audio,
.player audio,
source,
audio source {
  display: none !important;
  height: 0;
  width: 0;
}
.info {
  position: absolute;
  right: 15%;
  bottom: 5%;
  display: block;
}
.info .img {
  width: 150px;
  height: 56px;
  /* ratio needs to be width*0.37 */
  background-image: url(../images/button-bilgi.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.logo img {
  position: absolute;
  right: 5%;
  bottom: 5%;
  display: block;
  width: 56px;
  height: 56px;
}
.fb-div {
  margin: 0 auto;
  width: 84px;
  position: absolute;
  left: 10%;
  bottom: 5%;
}
.fb-share-button {
  text-align: center;
}
/*****************************************************************
 * LESS SCRIPTING
 *****************************************************************/
#tab-10.tab {
  background-image: url("../images/gun-10.png");
  background-size: 100%;
}
#tab-10.tab.opened {
  background-image: url("../images/gun-10a.png");
  background-size: 100%;
}
#tab-9.tab {
  background-image: url("../images/gun-9.png");
  background-size: 100%;
}
#tab-9.tab.opened {
  background-image: url("../images/gun-9a.png");
  background-size: 100%;
}
#tab-8.tab {
  background-image: url("../images/gun-8.png");
  background-size: 100%;
}
#tab-8.tab.opened {
  background-image: url("../images/gun-8a.png");
  background-size: 100%;
}
#tab-7.tab {
  background-image: url("../images/gun-7.png");
  background-size: 100%;
}
#tab-7.tab.opened {
  background-image: url("../images/gun-7a.png");
  background-size: 100%;
}
#tab-6.tab {
  background-image: url("../images/gun-6.png");
  background-size: 100%;
}
#tab-6.tab.opened {
  background-image: url("../images/gun-6a.png");
  background-size: 100%;
}
#tab-5.tab {
  background-image: url("../images/gun-5.png");
  background-size: 100%;
}
#tab-5.tab.opened {
  background-image: url("../images/gun-5a.png");
  background-size: 100%;
}
#tab-4.tab {
  background-image: url("../images/gun-4.png");
  background-size: 100%;
}
#tab-4.tab.opened {
  background-image: url("../images/gun-4a.png");
  background-size: 100%;
}
#tab-3.tab {
  background-image: url("../images/gun-3.png");
  background-size: 100%;
}
#tab-3.tab.opened {
  background-image: url("../images/gun-3a.png");
  background-size: 100%;
}
#tab-2.tab {
  background-image: url("../images/gun-2.png");
  background-size: 100%;
}
#tab-2.tab.opened {
  background-image: url("../images/gun-2a.png");
  background-size: 100%;
}
#tab-1.tab {
  background-image: url("../images/gun-1.png");
  background-size: 100%;
}
#tab-1.tab.opened {
  background-image: url("../images/gun-1a.png");
  background-size: 100%;
}