.tkw-window {width: 100%; height: 100%;  position: fixed;  left: 0;  right: 0;  top: 0;  z-index: 999999;}.tkw-window .tkw-mask { width: 100%;height: 100%;     background-color: #000;    opacity: .8;    -ms-filter: alpha(opacity=60);    filter: alpha(opacity=60);} .tkw-window .levelUp-window {  position: absolute;   width: 400px;    height: 700px;    top: 50%;    left: 50%;    transform: translate(-50%,-50%);} .tkw-window .levelUp-window-inner {   position: absolute;  top: 156px;    left: 36px;    right: 19px;    bottom: 0;} .tkw-window .levelUp-window-toLevel.level-1 {    background-image: url(//stat.dinamalar.com/new/images/dmrenglishlogonew.png); } .tkw-window .levelUp-window-title {   width: 100%;   font-size: 24px;   font-weight: 700;   color: #000;   text-align: center;	margin:20px 5px;}.tkw-window .levelUp-window-text {     margin: 16px auto 0;     width: 76%;   font-size: 18px;    color: #666;     text-align: center; } .tkw-window .levelUp-window-toLevel { margin: 0 auto; display: block;  width: 200px;  height: 50px;    background-size: contain;    background-repeat: no-repeat;} .tkw-window .levelUp-window-btn { position: absolute;    bottom: 0;    width: 100%;    height: 56px;    line-height: 56px;    background-image: linear-gradient(-79deg,#0bbae0 0,#239bfe 100%);    border-radius: 0 0 20px 20px;     text-align: center;    font-family: AdobeHeitiStd-Regular;    font-size: 20px;    color: #fff;    transition: all .2s;} .tkw-window .levelUp-window-light {    position: absolute;    width: 954px;    height: 967px;    top: 50%;    left: 50%;    background: url(//stat.dinamalar.com/new/2018/red_light.png) center no-repeat;    background-size: contain;    z-index: -1;    animation: rotateLight 5s infinite linear;} .tkw-window .levelUp-window-link {    position: relative;    margin: 0 auto;    display: block;    width: 433px;    height: 413px;    background: url(//stat.dinamalar.com/new/2018/20year_greet.png) no-repeat;} .tkw-window .levelUp-window-close {   position: absolute;    top: 5%;    right: -50px;    width: 36px;    height: 36px;    border: 1px solid #000;    border-radius: 50%;    background:#fff url(//stat.dinamalar.com/new/2018/littleIcons.png) no-repeat center center;    cursor: pointer;    display: block;} .tkw-window .levelUp-window-close:hover { background-color:#77d7b9} @keyframes rotateLight{0%{transform:translate(-50%,-50%) rotate(0)}100%{transform:translate(-50%,-50%) rotate(360deg)}}
	
	.phone {
  position: absolute;
  width: 377.59999999999997px;
 height: 610px;
  border-radius: 15px;
  margin: auto;
  top: 50px;
  right: -9999px;
  left: -9999px;
  background: #ddd;
  box-shadow:0px 3px 0 #bbb, 0px 4px 0 #bbb, 0px 5px 0 #bbb, 0px 7px 0 #bbb, 0px 10px 20px #666;
}
.face {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  background: #111;
  border-radius: 40px;
}
.face .speaker {
  position: absolute;
  top: 42.860000000000014px;
  width: 20%;
  background: #8c8c8c;
  height: 8px;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 4px;
}
.face .home {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  width: 55px;
  height: 55px;
  margin: auto;
  border: solid 2px #3a3b39;
  border-radius: 50%;
}
.screen {
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  height: 590px;
  width: 360px;
  margin: auto;
  overflow: hidden;
  box-shadow: 0 0 1px rgba(255,255,255,0.4); border-radius:12px;
}
.screen:before,
.screen:after {
  position: absolute;
  top: 0;
  display: block;
  content: ' ';
  width: 100%;
  height:15%;
  background-image: linear-gradient(rgba(34,34,34,0.1), rgba(17,17,17,0));
  z-index: 2;
}

.screen .status-bar,
.screen .header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: #eee url(//stat.dinamalar.com/sprite/images/bodyBg.gif) repeat;
  z-index: 3;
  text-align: center;
  font-family: 'helvetica neue', arial, sans-serif;
  color: #fff;
  font-size: 11px;
  line-height: 20px;
}
.screen .status-bar:before,
.screen .status-bar:after {
  position: absolute;
  left: 10px;
  line-height: 20px;
  content: 'Dinamalar';
}
.screen .status-bar:after {
  left: auto;
  right: 10px;
  content: '75%';
}
.screen .header {
  height: 50px;
  top: 0;
  line-height: 50px;
  font-size: 20px;
  color: #232323;
  font-weight: bold;
  text-transform: uppercase;
}

.screen .header span {
  display: block; 
  background: #fff;
}


.app {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 590px;
  width: 100%;
  -webkit-perspective: 1300px;
          perspective: 1300px;
  background-image: linear-gradient(#eee, #fff);
  -webkit-perspective-origin: 50% 130%;
          perspective-origin: 50% 130%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-overflow-scrolling: touch;
}
.app.no-scroll {
  overflow: hidden;
}
.cover-flow {
  position: relative;
  width: 290px;
  margin: 60px auto -40px;
  list-style: none;
  padding: 0;
}
.cover-flow__item {
  display: block;
  
}
.cover-flow__item img {
  max-width: 100%;
  transition: all 0.3s;
}
.details {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 270px;
  overflow-y: auto;
  background: linear-gradient(bottom, #111 60%, rgba(17,17,17,0));
  opacity: 0;
  transition: all 0.3s;
  padding: 10px 30px 60px 30px;
}
.details.inactive {
  display: none;
}
.details.active {
  display: block;
  opacity: 1;
}
.details.active h2 {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.details.active p {
  opacity: 0.5;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.details h2 {
  color: #fff;
  font-weight: 400;
  font-size: 20px;
  overflow: hidden;
  margin: 0 0 4px;
/*  white-space: nowrap;
  text-overflow: ellipsis;*/
  opacity: 0;
  transition: all 0.3s;
  transition-delay: 0.1s;
  -webkit-transform: translateY(15px);
          transform: translateY(15px);
}
.details p {
  color: #fff;
  opacity: 0.5;
  font-size: 13px;
  margin: 0;
  opacity: 0;
  line-height: 1.8;
  transition: all 0.3s;
  transition-delay: 0.2s;
  -webkit-transform: translateY(15px);
          transform: translateY(15px);
}
.ui {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background-image: linear-gradient(bottom, #111 20%, rgba(17,17,17,0) 100%);
  color: #fff;
  font-size: 24px;
  display: none;
}
.ui h1 {
  font-weight: 200;
  margin: 0;
  font-size: 20px;
  padding: 0 20px;
  margin-top: 60px;
  line-height: 60px;
}
/* Let's get this party started */
::-webkit-scrollbar {
  width: 8px;
}
/* Track */
::-webkit-scrollbar-track {
  border-radius: 4px;
}
/* Handle */
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(17,17,17,0.3);
  border: solid 1px rgba(255,255,255,0.2);
}
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255,255,255,0.4);
}
      #slide1  {
        background: linear-gradient(#eee, #fff);
      }
      #slide2 {
        background: linear-gradient(#eee, #fff);
      }
      #slide3 {
       background: linear-gradient(#eee, #fff);
      }
      #slide4{
       background: linear-gradient(#eee, #fff);
      }
      #slide5 {
        background: linear-gradient(#eee, #fff);
      }
	   #slide6 {
        background: linear-gradient(#eee, #fff);
      }


      .app section > span {
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translate(-50%, -0%);
        font-size: 14px;
        font-family: sans-serif;
        color: #fff;
		width:100%
      }
	  
.card .menu-content {
  margin: 0;
  padding: 0;
  list-style-type: none;
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2);
	position:absolute; width:100%; height:50px; bottom:0;
	
}
.card .menu-content::before, .card .menu-content::after {
  content: '';
  display: table;
}
.card .menu-content::after {
  clear: both;
}
.card .menu-content li {
  display: inline-block;
}
.card .menu-content a {
  color: #fff;
}
.card .menu-content span {

}
.card .wrapper {
  background-color: #fff;
  position: relative; height:550px; overflow:auto;

}
.simg { margin:0; padding:0;}
.simg  img{ width:100%;}
.card .data {
  width: 100%;

  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.card .data .content {
  padding: .5em;

}
.card .author {
  font-size: 11px; color:gray; text-align:right; display:block; text-align:right;
}
.card .author a{ color:gray; float:left; cursor:inherit;}
.card .author a:hover{ color:gray;}
.card .title {
padding: 10px;
background: #fafafa;
border-bottom: #e7e7e7 solid 1px;
margin: 5px 0 10px 0;
}
.card .text {
  margin: 0;
}

.card .text ul{ margin:0 0 0 5px; padding:0; list-style: none;}
.card .text ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: red; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}
.card .text li{ list-style:none; margin:0 0 10px 10px; padding:0; font-size:12px; color:gray;}

.example-1 .date {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #77d7b9;
  color: #fff;
  padding: 0.8em;
}
.example-1 .date span {
  display: block;
  text-align: center;
}
.example-1 .date .day {
  font-weight: 700;
  font-size: 24px;
  text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.18);
}
.example-1 .date .month {
  text-transform: uppercase;
}
.example-1 .date .month,
.example-1 .date .year {
  font-size: 12px;
}
.example-1 .content {
  background-color: #fff;
}
.example-1 .title a {
  color: #3a3b39; font-size:12px; font-weight:bold; text-decoration:none; line-height:1.6;
}

.example-1 .title a:hover{ color:#c00;}
.example-1 .menu-content li {
  width: 33.333333%;
  float: left;
  background-color: #77d7b9;
  height: 40px;
  position: relative; text-align:center; line-height:50px;
}
.example-1 .menu-content a { text-decoration:none;}
.example-1 .menu-content a img{ position:relative; top:4px;}
.example-1 .menu-content span { font-size: 14px; top: -6px; position: relative; margin-left: 4px;}
.example-1 .menu-content a:hover{ color:#39695a;}




.slider__body {
	margin: 0;
	padding: 0;
	overflow:hidden;
}

.slider__container {
	position: relative;
	display: block;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition: -webkit-transform 500ms ease-in-out;
	transition: -webkit-transform 500ms ease-in-out;
	-o-transition: transform 500ms ease-in-out;
	transition: transform 500ms ease-in-out;
	transition: transform 500ms ease-in-out, -webkit-transform 500ms ease-in-out;
}

.slider__page {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.slider__indicators {
	position: fixed;
	right: 3%;
	top: 40%;
	margin: 0;
	padding: 0;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	border-radius:25px;
	background:rgba(6, 6, 6, 0.5);
	z-index:999999;
}
.shortnews_userguide{ 	position: absolute;
	right: -90%;
	top: 48%;
	margin: 0;
	padding: 0;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	border-radius:25px;
	background:rgba(6, 6, 6, 0.5);
	background:url(images/shortnews.png) no-repeat; width:350px; height:346px;}
	
.slider__indicator {
	display: block;
	width: 10px;
	height: 10px;
	margin: 10px 3px;
	border-radius: 100px;
	background-color: #fff;
	cursor: default;
	border:#333 solid 1px;
	background:#fff; opacity:.5; cursor:pointer;
}
.slider__indicator--active { background:#c00; opacity:1;
}