@font-face {
    font-family: 'Microsoft Sans Serif';
    src: url('../fonts/MicrosoftSansSerif.eot');
    src: url('../fonts/MicrosoftSansSerif.eot?#iefix') format('embedded-opentype'),
        url('../fonts/MicrosoftSansSerif.woff2') format('woff2'),
        url('../fonts/MicrosoftSansSerif.woff') format('woff'),
        url('../fonts/MicrosoftSansSerif.ttf') format('truetype'),
        url('../fonts/MicrosoftSansSerif.svg#MicrosoftSansSerif') format('svg');
    font-weight: normal;
    font-style: normal;
}

a{text-decoration:none; color:inherit;}
a:link{text-decoration:none; color:inherit;}
a:visited{text-decoration:none; color:inherit;}
a:hover{text-decoration:none; color:inherit;}
a:active{text-decoration:none; color:inherit;}



.contentsinline{width:96vw; position:relative; left:2vw; height:155px;}
.contentsinline > .gameblock{width:250px; height:150px;
background-color:lightgrey; position:relative; display:inline-block;margin-right:20px;}
.gameicon{width:150px;height:150px;background-color:deepskyblue;position:relative;display:inline-block;transition:300ms;}
.gameicon:hover{transform: scale(1.05, 1.05);}
.gi1{background-image:url("../games/okeypuzzle1/okeywebpuzzle.gif"); background-size:contain; border: 1px solid deepskyblue;}
.playbtn{width:70px; height:30px; border-radius:8px; background-color:dodgerblue; display:inline-block; 
vertical-align:top; margin-top: 55px; margin-left:5px; color:white; font-weight:bold; 
text-align:center; line-height:30px;font-size:14px;cursor:pointer;transition:300ms;}
.playbtn:hover{background-color:deepskyblue;font-size:16px;transform: scale(1.05, 1.05);}


body{margin:0; padding:0;background-color:white; overflow:hidden; width:100vw; height:100vh;font-family: 'Microsoft Sans Serif'; color:darkslategrey; font-size:13px; position:relative; -webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:0;}
header{position:relative; width:100vw; height:100px; top:0;}
.logo{position:absolute;width:80px;height:80px;left:calc(50vw - 40px);top:0;margin:1vw;background-image:url("../img/logo.png");background-size:contain; transition:1s; z-index:3;}
.logo:hover{transform:scale(1.05, 1.05);}
ul{margin:0;padding:0;}
li{list-style:none;}
h1{font-size:17px;color:dodgerblue;}

#bg1{position:absolute;width:100vw;height:100vh;background-color:rgba(190, 190, 190, 0.3);left:0;top:0;display:none;z-index:5;}

nav{position:absolute; left:0; top:0; width:43px;height:40px;border:1px solid lightgrey; cursor:pointer;border-bottom-right-radius:10px;z-index:3;}
nav>hr{position:relative;width:25px;border:2px solid dodgerblue; margin:0; margin-top:7px; left:6px;}
nav:hover>hr{border:2px solid royalblue;}
nav>ul>li{position:relative; left:5px;margin:8px;transition:500ms;display:block;transform-origin:left;cursor:pointer; width:170px; border-left:1px solid grey; padding-left:5px;}
nav>ul>li:hover{color:dodgerblue;transform:scale(1.02, 1.02);font-weight:bold;}
nav>ul{position:absolute;top:53px; left:0; width:0;height:auto;overflow:hidden;transition:500ms ease-out ;}
nav:hover>ul{width:170px;}
.topnav{position:absolute;top:0;right:0;width:100vw;background-color:white;text-align:right;height:16px;z-index:2;}
.topnav>ul>li{display:inline-block; border-left:1px solid grey; margin:0; margin-right:5px; padding-left:5px; margin-top:5px;transition:500ms;cursor:pointer;font-size:14px;}
.topnav>ul>li:hover{color:dodgerblue;}
main{position:relative;top:30px;}
.titlediv{position:relative; left:20vw; top: 0px;}


.tut{position:relative;left:20vw;margin-bottom:30px;}
.freetuts{position:relative;height:calc(100vh - 230px);overflow:hidden; overflow-y:scroll; width:100vw; scrollbar-width: none;}
.freetuts::-webkit-scrollbar {
    display: none;
}

.tc{width:300px;height:200px;background-color:lightgrey;display:inline-block; vertical-align:middle;}
.tc>.vidiframe{width:300px;height:169px;margin-top:15px;background-image:url(../img/yt/yt1.png);background-size:contain;}
/*--.tc>.enlargedvidiframe{width:70vw;height:calc(70vw * 0.563);margin-top:15px; z-index:3;left:-15vw;position:absolute;top:0;}--*/
.enlargedvidiframe{width:70vw;height:calc(70vw * 0.563);z-index:7;left:15vw;position:absolute;top:10vw;}
#ytunderlayer{width:70vw;height:calc(70vw * 0.563);left:15vw;position:absolute;top:10vw;background-color:#B0E0E6;z-index:6;display:none;}
.tutcover{position:absolute; z-index:2; background-color:rgba(239, 126, 69, 0.3);width:300px;height:169px;margin-top:15px;left:0; top:0;cursor:pointer;transition:500ms;}
.tutcover:hover{background-color:rgba(0, 102, 204, 0.1);}
.td{width:calc(60vw - 300px);min-width:300px; height:200px;border:1px solid lightgrey;display:inline-block;vertical-align:top;border-bottom-right-radius:10px;}
.td>h1{font-size:15px; font-weight:bold; color:dodgerblue; margin:0; margin-top:5px; text-indent:20px;margin-bottom:20px;margin-left:5px;margin-right:5px;}
.td>p{text-indent:15px;text-align:justify;margin:5px;}
.backbtn{position:absolute;left:calc(85vw - 120px);top:calc(10vw - 25px);width:120px;height:25px;background-color:lightgrey;border-top-left-radius:10px; font-size:17px; line-height:25px; text-align:center;display:none;transition:500ms;cursor:pointer;border:1px solid yellow; border-bottom:none;}
.backbtn:hover{background-color:dodgerblue; color:white;} 
 
#visitors{
    position:absolute;
    bottom:0;
    right:0;
    color:white;
    transition:1s;
}

#visitors:hover{color:grey;}

#freecont{
    position:relative;margin:0 auto; width:70vw; height:calc(100vh - 230px); overflow:hidden; overflow-y:scroll; 
    scrollbar-width: none;
}

#freecont::-webkit-scrollbar {
    display: none;
}

#paidcont{
    position:relative;margin:0 auto; width:70vw; height:calc(100vh - 230px); overflow:hidden; overflow-y:scroll; 
    scrollbar-width: none;
}

#paidcont::-webkit-scrollbar {
    display: none;
}

#contacts{
    position:relative;margin:0 auto; width:70vw; height:calc(100vh - 230px); overflow:hidden; 
    scrollbar-width: none;
    color:skyblue;
    font-size:16px;
    font-weight:bold;
}



.icon{width:30px;height:30px;vertical-align:top; border-radius:10px;background-color:lightgrey;display:inline-block;margin-top:10px;}

.cont>p{display:inline-block; line-height:10px;margin-left:20px;}



.dnlcont{
    position:relative; width:calc(70vw - 20px); height:160px;
    overflow-x:hidden; padding:5px;
    border:1px solid grey;
    margin-top:15px;
}
 
.dnlcont>a{
   display:inline-block; vertical-align:middle; text-align:center;position:absolute;right:20px;
   background-color:steelblue; color:white; padding:15px; margin-top:30px;transition:500ms; 
} 

.dnlcont>a:hover{
   background-color:dodgerblue;font-size:14px;
} 


.dnl{width:150px;height:150px;background-color:steelblue;
display:inline-block; vertical-align:top;
    
} 

.freecontdesc{
 min-width:200px;
 height:auto;
 display:inline-block;vertical-align:top;
 position:relative;
padding:20px;
padding-top:10px;
}


.newsblock{
    position:relative;margin:0 auto; width:70vw; height:calc(100vh - 230px); overflow:hidden; overflow-y:scroll; 
    scrollbar-width: none;
}

.newsblock::-webkit-scrollbar {
    display: none;
}


.newsfeed{
    position:relative; width:calc(70vw - 20px); height:260px;
    overflow-x:hidden; padding:5px;
    border:1px solid lightgrey;
    margin-top:15px; 
}

.newstitleblock{
   width:100%;
   height:80px;
   background-color:steelblue;
}

.newstitleblock:hover{
    background-color:dodgerblue;
}


body>h1{text-align:center;font-size:30px;color:grey;font-weight:bold;}

.loader{width:20px; height:20px; background-color:white; border-radius:5px;position:absolute;left:30vw;top:20vw;
animation-duration: 1500ms;
animation-iteration-count: infinite;
animation-name: loader1;
transition:250ms;
}
 
 @keyframes loader1 {
  0%{visibility:visible;width:20px; height:20px; left:30vw; }   
 
     30%{visibility:hidden; left:calc(30vw + 25px);}
40%{visibility:visible;}
60% {visibility:hidden; } 
      70%{left:calc(30vw + 25px + 25px);}
80%{visibility:visible;left:calc(30vw + 25px + 25px);}
 
100% {visibility:hidden; left:30vw;}
 }
 
 
 
 
 
 
 
 
 
 
 
 
 
 @media screen and (max-width: 1200px) {
 .topnav>ul>li{font-size:12px;}
.logo{top:10px;}
 }
 
  @media screen and (max-width: 1020px) {
.enlargedvidiframe{top:15vw;}
#ytunderlayer{top:15vw;}
.backbtn{top:calc(15vw - 25px);}
 }
 
 
 @media screen and (max-width: 800px) {
 .logo{width:70px;height:70px;left:calc(50vw - 35px);margin:2vw;}  
 .topnav{top:calc(100vh - 30px); margin-bottom:5px;}
 .enlargedvidiframe{width:100vw;height:53.3vw;margin-top:0;left:0;top:30vh;}
#ytunderlayer{width:100vw;height:53.3vw;margin-top:0;left:0;top:30vh;}
#freecont{margin:0; width:100vw;}
#paidcont{margin:0; width:100vw;}
.dnlcont{width:100vw;}
 }
 
 
  @media screen and (max-width: 617px) {
.td{height:auto;}
.td>p{padding-bottom:20px;}
.dnlcont>a{
 position:relative;right:auto;
 vertical-align:top;
 } 
 .dnlcont{
 height:auto;
}

.newsblock{
 width:100vw;   
}

.newsfeed{
   width:calc(100vw - 20px);
}

 }
 
  @media screen and (max-width: 400px) {
      
 .titlediv>h1{font-size:14px;}     
 .logo{width:53px;height:53px;left:calc(50vw - 53px);margin:8vw;} 
 .topnav{display:none;}
.td{width:100vw;min-width:100px;}
.tc{width:100vw;height:53.3vw;}
.tc>.vidiframe{width:100vw;height:53.3vw;margin-top:0;}
.tut{left:0;}
.td>h1{font-size:12px;}
.td>p{margin-right:20px;}
.tutcover{width:100vw;}
 
 }