@font-face {font-family: 'Tajawal';font-style: normal;font-weight: 300;font-display: swap;src: local('Tajawal Medium'), local('Tajawal-Medium'), url(https://fonts.gstatic.com/s/tajawal/v3/Iurf6YBj_oCad4k1l8KiHrRpiYlJ.woff2) format('woff2');unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;}
/* latin 400 */
@font-face {font-family: 'Tajawal';font-style: normal;font-weight: 300;font-display: swap;src: local('Tajawal Medium'), local('Tajawal-Medium'), url(https://fonts.gstatic.com/s/tajawal/v3/Iurf6YBj_oCad4k1l8KiHrFpiQ.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* arabic */
@font-face {font-family: 'Tajawal';font-style: normal;font-weight: 500;font-display: swap;src: local('Tajawal Medium'), local('Tajawal-Medium'), url(https://fonts.gstatic.com/s/tajawal/v3/Iurf6YBj_oCad4k1l8KiHrRpiYlJ.woff2) format('woff2');unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;}
/* latin */
@font-face {font-family: 'Tajawal';font-style: normal;font-weight: 500;font-display: swap;src: local('Tajawal Medium'), local('Tajawal-Medium'), url(https://fonts.gstatic.com/s/tajawal/v3/Iurf6YBj_oCad4k1l8KiHrFpiQ.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

@font-face {
     font-family:'AraAqeeq';
    src:url(fonts/AraAqeeq-ExtraBold.ttf); 
   
}

@font-face {
     font-family:'ElMessiri';
    src:url(fonts/ElMessiri-Bold.ttf); 
   
}

.instagram-media {
  width: 100% !important;
  aspect-ratio: 9 / 16;
  height: auto !important;
}

.wwe
{
    /*position: relative;
    right: -9999px;*/
  /*visibility: hidden;*/
}

.dots {
    display: inline-block;
    padding: 8px 10px;
    color: #777;
}
/*================= Body ===================*/

/*====== header ======*/

/*====== Post In Home ======*/
.containerMatch{
    padding: 0;
    border: 1px solid var(--BG2);
    overflow: hidden;
    text-align: center;
     width: 95%;
      background:  linear-gradient(50deg, #f9c7249e, #f9c724, #f9c724, #f9c7249e); 
    margin-bottom: 20px;
    position: relative;
    right: 20px;
    bottom: 10px;
    border-radius: 10px;
    
    

}



.containerMatch.Soon {order: 2;}

.containerMatch.Not {order: 3;}

.containerMatch.End{order: 4;}

.containerMatch a .Match
{display:grid;
    justify-content:center;
    align-items:center;
    grid-template-columns:repeat(3,1fr);
        color: #59516b;
}

.containerMatch a ul{
    display: grid;
    justify-content: center; 
    align-items: center; 
    grid-template-columns: repeat(3,1fr);
    background: #2f2e40; 
    border-radius: 10px; 
    width: 95%;
    margin: 10px auto;
    margin-bottom: 20px;
    padding: 10px;
    color: #f9c724;
}


.containerMatch a ul li{list-style:none;font-size:15px;font-weight:600;color:var(--CO);padding:3px}


.containerMatch a ul li:nth-child(1):before {content: "";font-family: FontAwesome;display: inline-flex;margin: 0 0 0 2px;}


.containerMatch a ul li:nth-child(2):before {content: "";margin-left: 8px;font-family: FontAwesome;color: #000;}


.containerMatch a ul li:nth-child(3):before {content: "";font-family: FontAwesome;color: #eaae19;margin: 0 0 0 3px;}

@keyframes blinker{0%{background-color: #c00606;}50%{background-color: #4b0a03;}100%{background-color: #c00606;}}

.containerMatch a .Match .natej,.containerMatch a .matchHour{margin:0 0 10px;font-weight:600;color:var(--CO);}

.containerMatch a .Match .natej {letter-spacing: 8px;}

.containerMatch a .Match .fareq{padding:10px}

.asm{font-size:19px;font-weight:700;color:var(--CO)}

.containerMatch a .Show{position:absolute;z-index:2;background:#29324140;top:0;left:0;right:0;width:100%;height:100%;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM10.622 8.415l4.879 3.252a.4.4 0 0 1 0 .666l-4.88 3.252a.4.4 0 0 1-.621-.332V8.747a.4.4 0 0 1 .622-.332z' fill='rgba(255,255,255,1)'/%3E%3C/svg%3E");background-size:6% 37%;background-repeat:no-repeat;background-position:center;opacity:0;transition:opacity .1s ease-in-out}

.containerMatch:hover .Show{opacity:1}

.Match .matchDate.end {background-color: #111;padding: 4px 10px;border-radius: 5px;color: #fff;display: inline-block;font-size: 16px;}

.Match .matchDate.live {    animation: blinker 500ms ease-in-out infinite;background-color: #d62c1a;padding: 4px 10px;border-radius: 5px;font-size: 16px;}

.containerMatch.Not .natej,.containerMatch.Soon .natej{display: none;}

.containerMatch.End .matchHour{display: none;}

.containerMatch.Live #matchHour,.containerMatch.Live .natej{display: none;}

.containerMatch a .Match .fareq img{width: 60px;height: 60px;}



.containerVid{
    padding: 0;
    border: 1px solid var(--BG2);
    overflow: hidden;
    text-align: center;
     width: 100%;
     /*  background:  linear-gradient(50deg, #f9c7249e, #f9c724, #f9c724, #f9c7249e); */
    margin-bottom: 15px;
    position: relative;
    right: 0px;
    bottom: 0px;;
    

}

.containerVid a .Show{position:absolute;z-index:2;background:#29324140;top:0;left:0;right:0;width:100%;height:98%;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM10.622 8.415l4.879 3.252a.4.4 0 0 1 0 .666l-4.88 3.252a.4.4 0 0 1-.621-.332V8.747a.4.4 0 0 1 .622-.332z' fill='rgba(255,255,255,1)'/%3E%3C/svg%3E");background-size:6% 37%;background-repeat:no-repeat;background-position:center;opacity:0;transition:opacity .1s ease-in-out;   -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px; }

.containerVid:hover .Show{opacity:1}


.containermostVid{
  
    border: 1px solid var(--BG2);
    overflow: hidden;
    text-align: center;
     width: 100%;
     /*  background:  linear-gradient(50deg, #f9c7249e, #f9c724, #f9c724, #f9c7249e); */
  
    position: relative;
   
 
    height: 120px;
}

.containermostVid .Show{position:absolute;z-index:2;background:#29324140;top:0;left:0;right:0;width:100%;height:100%;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM10.622 8.415l4.879 3.252a.4.4 0 0 1 0 .666l-4.88 3.252a.4.4 0 0 1-.621-.332V8.747a.4.4 0 0 1 .622-.332z' fill='rgba(255,255,255,1)'/%3E%3C/svg%3E");background-size:60% 37%;background-repeat:no-repeat;background-position:center;opacity:0;transition:opacity .1s ease-in-out;  
    }

.containermostVid:hover .Show{opacity:1}

/*====== Post In Post ======*/

/*====== blog-pager ======*/

/*======== footer =========*/

/*====== contact =====*/

/*================= Responsev ===================*/





body {
    
   background: linear-gradient(70deg, #ffffff, #f9c724, #ffffff, #f9c724);
  /*background: linear-gradient(10deg, #f9dc24, #f9dc24, #f9dc24, #ffffff);*/
   
    color: aliceblue;

    color: #000305;
    font-size: 87.5%;
    font-family:'AraAqeeq', sans-serif;
    line-height: 1.5;
    
}

a
{
    text-decoration: none;
}

/*a:link, a:visited{
    
    color: #f9c724;
}*/




.body{
    
    margin: 0 auto;
    width: 90%;
    clear: both;
    
}

.mainheader img{
    
    width: 12%;
    height: 10%;
    margin: 2% 0;
    
}

.mainheaderlogo nav
{
      position: relative;
    width: 100%;
    background-color: #1e1c21;
    height: 120px;
    top:-15px;
    margin-bottom: -20px;
    border-radius: 5px;
    -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}



.homebtn_site{
    width: 258px;
    height: 190px;
    -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
     -webkit-border-top-right-radius:20px;
    -webkit-border-top-left-radius:20px;
    position: relative;
    right: 60px;
    
    
    bottom: 35px;
}

.homebtn_site::before {
    width: 100%;
    height: 50%;
}

.page-home .homebtn_site::after {
    width: 0;
    height: 0;
    border-color: transparent;
}

.homebtn_site::before,  .homebtn_site::after {
    position: absolute;
    top: 50%;
    right: 50%;
    z-index: 2;
    content: "";
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
     -webkit-border-top-right-radius:20px;
    -webkit-border-top-left-radius:20px;
    border: 2px solid #fff;
    transform: translate(50%, -50%);
    transition: all 500ms;
    
}

.homebtn
{
    background-image: url('site-new.jpg');
    transition: background-position  5s;
    width: 230px;
    height: 80px;
    overflow: hidden;
   -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
     -webkit-border-top-right-radius:20px;
    -webkit-border-top-left-radius:20px;
    position: absolute;
    top: 50%;
    right: 50%;
    border: 5px solid #fff;
    background-color: #161619;
    transform: translate(50%, -50%);
    background-position: 150%;
    background-repeat: no-repeat;
    background-size: 500%;
}

.homebtn_site:hover .homebtn {
  border-color: #f9c724;
  background-position:  -1%;
}



@keyframes exa2{
  
    from {transform:scale(1.05);}
   to {position:absolute;top:46px;right:-1px; transform:scale(1);}
   
}

.homebtn_site:hover::before {
  width: 0;
  height: 0;
  border-color: transparent;
}

.homebtn_site:hover::after {
  width: 100%;
  height: 50%;
  border-color: #f9c724;
    animation-name: exa2;
animation-duration: 2s;
animation-fill-mode:forwards;
}


 .homebtn_site:hover .logo{
  opacity: 1;
}
 .homebtn_site:hover .logo{
  right: -100%;
}

 .homebtn_site:hover .logo2{
  opacity: 1;
}
 .homebtn_site:hover .logo2{
  right: -100%;
}
.page-home .home-site-btn-container:hover .home-site-btn .text {
  bottom: 100%;
}
.page-home .home-site-btn {
  width: 230px;
  height: 230px;
  overflow: hidden;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 50%;
  border: 5px solid #fff;
  background-color: #161619;
  transform: translate(50%, -50%);
  background-position: center -43%;
  background-repeat: no-repeat;
  background-size: 120%;
}
  .logo {
      
transition: all 3s;
      width: 170px;
   height:80px;
  margin-top: 100px; 
      margin-right: -30px;
   
}

  .logo2 {
      
  transition: all 5s;
     width: 170px;
  height:80px;
      margin-top: 100px;
         margin-right: 430px;
    
}


.homebtn .logo {
  position: absolute;
  top: -100px;
  right: 100%;
  z-index: 2;
  transform: translate(100%);
}

.homebtn .logo2 {
  position: absolute;
  top: -100px;
  right: 100%;
  z-index: 2;
  transform: translate(100%);
}
.page-home .home-site-btn .text {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 55px;
  right: 50%;
  z-index: 2;
  transform: translate(50%);
}


/*# sourceMappingURL=home.css.map */

.mainheader nav{
    
    position: absolute;
    width: 90%;
    background-color: #1e1c21;
    height: 40px;
    border-radius: 5px;
    -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
   
}

.logs
{
     position: absolute;
    width: 12%;
    background-color: inherit;
    bottom: 10px;
    left: 20px;
    font-size: 14.4px;
    font-weight: 1000;
}

.logs:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 3px;
    top: 30px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.logs:hover::before{
    margin: 5px;
    width: 90%;
    
    
}
    
  .logs:hover
{
    color:#2f2e40;
}

     .logs a h1
{
    position: relative;
    bottom: 15px;
    right: 5px;
     font-size: 15px;
    font-weight: 1000;
    width: 97px;
}

.butpro:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 90px;
    top: 25px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.butpro:hover::before{
    margin: 5px;
    width: 50%;
    
    
}
    
  .butpro:hover
{
    color:#2f2e40;
}

.butpro
{
    direction: rtl;
     position: absolute;
    width:15%;
    background-color: #fff;
    bottom: 10px;
    left: 20px; 
    font-size: 15px;
    font-weight: 1000;
}

.butlogout
{
   
     position: absolute;
    width:2px;
    background-color: #fff;
    bottom: 10px;
    left: 250px; 
}

.sss{
    
  
     overflow: hidden;
       transition: 1s;
    list-style: none;
     height:100px;
    margin: 0 auto;
    
}
.mainheader nav ul {
    
    margin: 0 auto;
    
}

.mainheader nav ul li {
    margin: 5px;
      position:relative;
 float: right;
    display: inline;
    font-size: 15px;
    font-weight: 1000;
   
}

.mainheader nav a:link , .mainheader nav a:visited {
    
    
   color: #fff;
    display: inline-block;
    padding: 10px 25px;
    height: 20px; 
    border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}


.mainheader nav ul li a:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 2px;
    top: 30px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.mainheader nav ul li a:hover::before{
    margin: 5px;
    width: 93%;
    
    
}
    
    .mainheader nav ul li a:hover
{
    color:#2f2e40;
}
.mainheader nav a{
     background-color: #3d3848;
    transition: .5s;
}
.mainheader nav a:hover , .mainheader nav a:active,
.mainheader nav .active a:link, .mainheader nav .active :visited
{
   color: #2f2e40;
    background-color: #f9c724;
   text-shadow: none;
     transition: .5s;
   
}


.mainheaderbtn nav
{
    position: relative;
    width: 70%;
    height: 120px;
    top:100px;
    margin-bottom: 20px;
    border-radius: 5px;
    -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
    background-color: #1e1c21;
     z-index: 0;

}

.btn1
{
       position: relative;
    top:50px;
    right: 70px;
   background-color: #3d3848;
     color: white;
    width: 215px;
    height: 30px;
    font-size: 20px;
    font-style: oblique;
   border-color: #3d3848;
    -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
    transition: .5s;
       font-family:'AraAqeeq', sans-serif;
}

.btn1:hover
{
    background-color: #f9c724;
    color: black;
    transition: .5s;
}

.maincontent{
    padding-top: 80px;
    line-height: 25px;
    border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
   
}

.content{
    
    width: 70%;
    float: right;
     border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.topcontent{
    
 background: linear-gradient(10deg, #3d3848, #1e1c21, #3d3848, #1e1c21);
color: white;
     border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
   
     margin-top: 2%;
   
    height: auto;
}
 
.topcontent2{
    

    background: linear-gradient(10deg, #3d3848, #1e1c21, #3d3848, #1e1c21);

     border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
   
     margin-top: 2%;
 
    height: 1350px;
    font-size: 15px
}

  .topcontent h2,.topcontent2 h2
    {
        
        margin-right: 20px;
        padding-top: 10px;
    }

.apolo{
    

    position: relative;
    top:300px;
    
}

.bottomcontent{
    
background: linear-gradient(10deg, #3d3848, #1e1c21, #3d3848, #1e1c21);
   color: white;
     border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
    padding: 3% 5%;
     margin-top: -6%;
    font-family:sans-serif;
}

    .titlepost {
        font-family:'AraAqeeq', sans-serif;
        font-size: 25px;
    }


.npost
{
    font-family:'ElMessiri', sans-serif;
    font-size: 16px;
    font-weight:900;
}

p
{
   font-family:'ElMessiri', sans-serif;
    font-size: 16px;
    font-weight:900;
}



.top-sidbar{
     width: 21%;
    float: left;
    background-color: #1e1c21;
    color: white;
    border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
   margin: 2% 0 2%;
    padding: 2% 3%;
    font-size: 15px;
}

.middle-sidbar{
     width: 21%;
    height: 300px;
    float: left;
    background-color: #1e1c21;
    border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
     color: white;
    margin-bottom: 2%;
    margin-top: 2%;
     padding: 2% 3%;
    font-size: 15px;
}
#adimage2
{
        width: 100%;
    height: 300px;
  
}
.bottom-sidbar{
     color: white;
     width: 21%;
    float: left;
    background-color: #1e1c21;
    border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
    font-size: 15px;
    margin-bottom: 2%;
    margin-top: 2%;
     padding: 2% 3%;
}


.mainFooter{
       color: #FFF;
    width:  100%;
    height: 200px;
    float: left;
    border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
    background-color: #1e1c21;
  margin: 2% 0;
}

.mainFooter p{

    width:  92%;
    margin: 10px auto;
    color: #FFF;
}

.mainFooter a{
   color: #f9c724;
    width: inherit;
}

.depart
{
    position: relative;
    bottom: 135px;
    bottom: 40px;
    width: 1px;
     right: 10px;
     display:grid;
    font-size: 20px;
    font-weight: 900;
}

.depart2
{
    position: relative;
   bottom: 70px;
    width: 150px;
    right: 150px;
 display:grid;
   font-size: 20px;
    font-weight: 900;
}

.depart3
{
    position: relative;
   bottom: 220px;
    width: 120px;
    right: 350px;
 display:grid;
    font-size: 20px;
    font-weight: 900;
}

.depart4
{
  position: relative;
   bottom: 340px;
    width: 105px;
    right: 550px;
  
 display:grid;
  font-size: 20px;
    font-weight: 900;
    
}

.depart5
{
  position: relative;
   bottom: 340px;
    width: 155px;
    right: 550px;
  
 display:grid;
  font-size: 20px;
    font-weight: 900;
    
}

.copy{
    
    position: relative;
   bottom: 280px;
    width: 500px;
    right: 650px;
    -moz-right: 600px;
  -webkit-right: 600px;
}

.post-info{
       
    font-style: italic;
    font-family:'AraAqeeq', sans-serif;
    color: #f9c724;
    font-size: 85%;
}

.content img{
     border-radius: 10px;
    
    height: 400px;
    width: 100%;
    
    
    
}

.pont
{
    cursor: pointer;
    
}



.ser{
    
    cursor: pointer;
} 


.dsa{
    
    cursor: pointer;
} 
.menu-icon{
    border-radius: 5px;
   
    width: 100%;
    background-color: #1e1c21;
    text-align: right;
    box-sizing: border-box;
    padding: 15px 24px;
    
    color: #fff;
    display: none;
}


.seh{
    
     position:absolute;
     font-family:'AraAqeeq', sans-serif;
     top: -70px;
        right: 400px;
    display:block; 
    height: 35px;
    width:300px;
    border-radius:5px; 
    border-color: #3d3848;
    background-color: #f9c724; 
font-weight: 900;
    }

    .btn{
    
     position:absolute;
        font-family:'AraAqeeq', sans-serif;
   right: 710px;
       bottom: 72px;
    display:block; 
    width:50px;
          height: 35px;
    border-radius:5px; 
    background-color: #f9c724;
         border-color: #3d3848;
        font-size: 15px;
font-weight: 900;
    }

#searchicon
{
    width:60%;
    height: 60%;
 
}

#tech
{ 
   
     border:2px solid ;
    
    /*-webkit-border-top-right-radius:20px;
     -webkit-border-top-left-radius:20px;*/
    
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
   
   margin-bottom:  15px ;
 margin-right: -8px;
  height:200px;
  width:810px;
     
    background-color: black;
color: white;
text-align: center
   
 
}

@keyframes exa{
   from {background-color:black;}
   to {background-color:white;transform:scale(1.05);}
   
}

#tech:hover{

animation-name: exa;
animation-duration: 2s;
animation-fill-mode: forwards;
}

#tech:hover #fonts{

position:absolute;

  width:100%; 
    height: 45%;
 background: rgba(2,10,11,22);
      opacity:0.2;

}

#tech:hover #fontsdate{

position:absolute;

 width:100%; 
opacity:0.2;

}

#tech:hover #fontsVid{

position:absolute;

  width:100%; 
    height: 40.50%;
 background: rgba(2,10,11,22);
      opacity:0.2;

}


#tech:hover #fontsdateVid{

position:absolute;

 width:100%; 
    height: 30%;
      opacity:0.2;

}





#pics
{ 
   
  
 
left: 31.8%;
     -webkit-border-top-right-radius:0px;
     -webkit-border-top-left-radius:0px;
    
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
  height:200px;
   width:814px;
      margin-right: -2px;
  

   
 
}

#tech:hover #pics{



}

#picpost
{ 
   
  
 
left: 31.8%;
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
  height:350px;
  width:100%;
     

   
 
}

.videoplayer
    {
      
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
height:350px;
  width:100%;
     
    }

video
{
    background-color: black;
}

iframe
    {
        left: 31.8%;
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
height:350px;
 width:100%;
         margin-bottom: 10%;
    }
    
blockquote 
    {
        left: 31.8%;
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
height:350px;
 width:100%;
    }

.otwebpost 
    {
        left: 31.8%;
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
height:350px;
 width:100%;
        
    }

#fonts
{
  position:absolute;
font-size:19px;
   width:100%; 
    height: 40.50%;
 background: rgba(2,10,11,22);
      opacity:0.8;
   right: 0px;
   
}



#fontsdate
{
 position:absolute;
 -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
font-size:13px;
    margin-top: 60px;
  width:100%; 
    opacity:0.8;
   right: 0px;

   
}


#most_watch
{
min-height:120px;
    height:auto;
    background-color: #f9c724;
     color: #1e1c21;
    font-size: 12px;
    -webkit-border-top-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;

}

#most_watch *
{
font-size:inherit;
  line-height:inherit;  

}

#pic1
{
    width:100px ;
    height: 120px;
      float:right;
     -webkit-border-top-right-radius:20px;
 
}

#iconlink
{
    width:50px ;
    height: 40px;
      float:right;
    margin: 2px;
     -webkit-border-radius:20px;
 
}

.top1
{
  
    margin-bottom: 70px;
    
}

#iconprof
{
    width:50px ;
    height: 40px;
      float:left;
    margin-top: -10px;
     -webkit-border-radius:20px;
 
}
#iconpost
{
     width:40px ;
    height: 30px;
    
   position: relative;
    top: 10px;
      -webkit-border-radius:20px;
 
}

#iconlogout
{
     width:50px ;
    height: 40px;
    
    margin-right: -25px;
    margin-top: -10px;
     
 
}

#most_watch_pic
{
      float:right;

    background-color: #2f2e40;
    -webkit-border-top-right-radius:20px;
}
#most_watch_title
{
  
   width: 50%;
    height: 50%;

    
    font-size: 11px;

   background-color: #2f2e40;

}

#multipages
{
    margin-top: 5px;
    margin-bottom: 53px;
    padding-top: 10px;
     padding-bottom: 10px;
    top: 50px;
     width:100%; 
     height: 50%;
    border: 50%;
        background-color:#1e1c21;
    border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
   
  
}

#unactive {
   
    height: 100%;
      color:#59516b;

    display: inline;
    
}

#multipages li hover {
    padding: 5px;
      color:#59516b;

    display: inline;
}
#multipages a {
   
   
     color: #fff;
    display: inline-block;
    padding: 10px 25px;
    height: 20px;
}


#multipages a:link , #multipages a:active {
    
    
  
    display: inline-block;
    padding: 10px 25px;
    height: 20px;
}

#active,  #active a
 {
    
    
  color: #59516b;
    background-color: #f9c724;
    display: inline-block;
    border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
   
  
}

#activebtn
 {
    
    
  color: black;
    background-color: #f9c724;
    display: inline-block;
    border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
   
  
}

#multipages a:hover
 {
    
    
  color: #59516b;
    background-color: #f9c724;
    display: inline-block;
    padding: 10px 25px;
    height: 100%;
     transition: all ease-in-out 270ms;
       border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
   
  
}

#icon
{

  position: relative;
    bottom: 5px;
  width: 50px;
    height: 30px; 
   
}

#micon
{

  position: relative;
    bottom: 6px;
  width: 27px;
    height: 15px; 
   
}

#ad nav
{
    
    background-color: white;
      position: relative;
  right: 200px;
  width: 700px;
    height: 200px; 
    margin-top: 50px;
         -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
   
}

#adimage
{
    width: 700px;
    height: 200px; 
       -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.maylike {
  position: relative;
  overflow: hidden;
  margin: 15px 10px;
    width: 300px;
    height: 400px;
    left: 85px;
      float: left;
    top: 4px;

}



.maylike:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0px;
  width: 60%;
  background: #12c2e9;  /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #f64f59, #c471ed, #12c2e9);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #4b4558, #f9c724bd, #ffffff);  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */








  opacity: 0.9;
  -webkit-transform: skewX(-45deg);
  -ms-transform: skewX(-45deg);
  transform: skewX(-45deg);
}

.maylike:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1px;
  width: 100%;
 background: #12c2e9;  /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #f64f59, #c471ed, #12c2e9);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #4b4558, #f9c724bd, #ffffff);  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */




  opacity: 0.9;
  -webkit-transform: skewX(-45deg) translateX(-100%);
  -ms-transform: skewX(-45deg) translateX(-100%);
  transform: skewX(-45deg) translateX(-100%);
}

.maylike .maylike-img {
  position: relative;
  background-color: #E4E7ED;
  z-index: -1;
    border-radius: 100px;
}

.maylike .maylike-img>img {
  width: 100%;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
     
}

.maylike:hover .maylike-img>img{
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
     
   
}

.maylike .maylike-body {
  position: absolute;
  top: 0;
  width: 75%;
  padding: 30px;
  z-index: 10;
    
}

.maylike .maylike-body h3 {
  color: #FFF;
}

.maylike .maylike-body .cta-btn {
  color: black;
    font-size: 20px;
    font-weight: 1000;
  position: absolute;
    top: 200px;
    right: 200px;
}

.main-raised {

    margin: -7px 30px 0px;
    border-radius: 6px;
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);

}
.main {

    background: #fff;
    position: relative;
    z-index: 3;

}
.mainn-raised {

margin: px 0px 0px;

border-radius: 6px;

box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
  
}
.row {background: linear-gradient(10deg, #3d3848, #1e1c21, #3d3848, #1e1c21);  /* fallback for old browsers */background: -webkit-linear-gradient(10deg, #3d3848, #1e1c21, #3d3848, #1e1c21);  /* Chrome 10-25, Safari 5.1-6 */background: linear-gradient(10deg, #3d3848, #1e1c21, #3d3848, #1e1c21); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */position: relative;z-index: 3;
    color: white;
  width: 140%;
    float: right;
   left: 8px;
    height: 500px;
    margin-top: 50px;
          -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
.row h1
{
    text-align: center;
   
}
.containers{
    width: 200px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    overflow: hidden;
 border-radius: 5%;
}

.clock{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.containers::before{
    content: '';
    background:  #f9c724;
    position: absolute;
    height: 100px;
    width: 100px;
    top: 10px;
    left: 80px;
    border-radius: 75% 39% 58% 52% / 60% 62% 50% 40%;
    z-index: -1;
}

.containers::after{
    content: '';
    background: #3d3848;
    position: absolute;
    height: 100px;
    width: 100px;
    bottom: 0px;
    right: 70px;
    border-radius: 53% 47% 39% 61% / 52% 34% 66% 48%;
    z-index: -1;
}

.clock span{
    font-size: 20px;
    width: 20px;
    display: inline-block;
    text-align: center;
    position: relative;
}

.clock span:nth-child(1):after{
    content: 'ساعة';
    font-size: 10px;
    position: relative;
    display: flex;
    bottom: 10px;
    justify-content: center;
    font-family: system-ui;
    font-weight: 500;
}

.clock span:nth-child(3):after{
    content: 'دقيقة';
    font-size: 10px;
    position: relative;
    display: flex;
    bottom: 10px;
    justify-content: center;
    font-family: system-ui;
    font-weight: 500;
}

.clock span:nth-child(5):after{
    content: 'ثانية';
    font-size: 10px;
    position: relative;
    display: flex;
    bottom: 10px;
    justify-content: center;
    font-family: system-ui;
    font-weight: 500;
}

.container{
    height: 100%;
    width: 100%;
}

.shapes{
    height: 100%;
    width: 100%;
}

.container ul{
    list-style: none;
}

.shapes li{
   
    border-radius: 20%;
    position: absolute;
    display: inline;
    top: -100px;
    z-index: -1;
    animation: animate 8s linear infinite;
}

.shapes li:nth-child(even) {
    left: calc(70px*var(--i));
    width: calc(4px*(200 - var(--i)));
    height: calc(4px*(200 - var(--i)));
    animation-delay: calc(3s*var(--i));
    animation-duration: calc(1.1s*var(--i) + 90s);
}

.shapes li:nth-child(odd) {
    left: calc(75px*var(--i));
    animation-delay: calc(1.2s*var(--i));
    animation-duration: calc(2s*var(--i) + 60s);
}

.shapes li:nth-child(3n) {
    width: calc(5px*var(--i) + 20px);
    height: calc(5px*var(--i) + 20px);
    animation-delay: calc(1.2s*(21 - var(--i)));
    animation-duration: calc(1.6s*(21-var(--i)) + 4s);
}

.shapes li:not(:nth-child(3n)) {
    height: calc(6px*(21 - var(--i)));
    width: calc(6px*(21 - var(--i)));
    animation-duration: calc(1.2s*var(-i) + 8s);
}

@keyframes animate{
    0%{
        transform: translateY(0px) rotate(0deg);
        opacity: 1;
    }
    100%{
        transform: translateY(2000px) rotate(360deg);
        opacity: 0;
    }
}

.shapes{
    height: 100%;
    width: 100%;
}

.container ul{
    list-style: none;
}

.shapes li{
   
    border-radius: 20%;
    position: absolute;
    display: inline;
    top: -100px;
    z-index: -1;
    animation: animate 8s linear infinite;
}

.shapes li:nth-child(even) {
    left: calc(70px*var(--i));
    width: calc(4px*(200 - var(--i)));
    height: calc(4px*(200 - var(--i)));
    animation-delay: calc(3s*var(--i));
    animation-duration: calc(1.1s*var(--i) + 90s);
}

.shapes li:nth-child(odd) {
    left: calc(75px*var(--i));
    animation-delay: calc(1.2s*var(--i));
    animation-duration: calc(2s*var(--i) + 60s);
}

.shapes li:nth-child(3n) {
    width: calc(5px*var(--i) + 20px);
    height: calc(5px*var(--i) + 20px);
    animation-delay: calc(1.2s*(21 - var(--i)));
    animation-duration: calc(1.6s*(21-var(--i)) + 4s);
}

.shapes li:not(:nth-child(3n)) {
    height: calc(6px*(21 - var(--i)));
    width: calc(6px*(21 - var(--i)));
    animation-duration: calc(1.2s*var(-i) + 8s);
}

@keyframes animate{
    0%{
        transform: translateY(0px) rotate(0deg);
        opacity: 1;
    }
    100%{
        transform: translateY(2000px) rotate(360deg);
        opacity: 0;
    }
}

.shapes2{
    height: 100%;
    width: 100%;
}

.container ul{
    list-style: none;
}

.shapes2 li{
   
    border-radius: 20%;
    position: absolute;
    display: inline;
    top: -100px;
    z-index: -1;
    animation: animate2 8s linear infinite;
}

.shapes2 li:nth-child(even) {
    left: calc(70px*var(--i));
    width: calc(4px*(200 - var(--i)));
    height: calc(4px*(200 - var(--i)));
    animation-delay: calc(3s*var(--i));
    animation-duration: calc(1.1s*var(--i) + 90s);
}

.shapes2 li:nth-child(odd) {
    left: calc(75px*var(--i));
    animation-delay: calc(1.2s*var(--i));
    animation-duration: calc(2s*var(--i) + 60s);
}

.shapes2 li:nth-child(3n) {
    width: calc(5px*var(--i) + 20px);
    height: calc(5px*var(--i) + 20px);
    animation-delay: calc(1.2s*(21 - var(--i)));
    animation-duration: calc(1.6s*(21-var(--i)) + 4s);
}

.shapes2 li:not(:nth-child(3n)) {
    height: calc(6px*(21 - var(--i)));
    width: calc(6px*(21 - var(--i)));
    animation-duration: calc(1.2s*var(-i) + 8s);
}

@keyframes animate2{
    0%{
        transform: translateY(0px) rotate(0deg);
        opacity: 1;
    }
    100%{
        transform: translateY(1500px) rotate(360deg);
        opacity: 0;
    }
}

.boxRote
{
    position: relative;
    z-index: 3;
  width: 1150px;
    float: right;
   left: 8px;
    height: 400px;
    margin-top: 50px;
          -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
.box {
    
    position: relative;
    width: 200px;
    height: 200px;
    top: 100px;
    right: 460px;
    transform-style: preserve-3d;
    animation: animatebox 20s linear infinite;
  z-index: 3;
}

.box:hover{
    animation-play-state: paused;
}


@keyframes animatebox {
    0%{
        transform: perspective(2000px) rotateY(0deg);
    }
    100%{
        transform: perspective(2000px) rotateY(360deg);
    }
}

.box span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform-style: preserve-3d;
    /*transform: rotateY(calc(var(--i) * 36deg)) translateY(450px);*/
    transform: rotateY(calc(var(--i) * 36deg)) translateZ(450px);
    -webkit-box-reflect: below -30px linear-gradient(transparent, transparent, rgba(4, 4, 4, 0.267));
}



.box span img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.5s;
    border-radius: 15px;
    border: 4px double rgb(0, 0, 0);
}

.box span img:hover{
    transform: translateY(-2px);
    
}

.titlechamp
{
  
   
   background: linear-gradient(10deg, #3d3848, #1e1c21, #3d3848, #1e1c21); 
      height: 50px;
    margin-top: -50px;
    margin-bottom: -10px;
    border-radius: 5px;
    margin-left: 30px;
}

.titlechamp h1
{color: white;
   width: 10px;
  position: relative;
    right: 500px;
    top: 10px;
    font-size: 30px;
}
.Matchs .match img {
    width: 50px;
    margin: 3px 0 0 3px;
  display: block;
      height:50px;
}
.Matchs .match span {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    max-width: 200px;
    width: 100%;
    
}


  .Matchs .match .info,.Matchs .match .naamee {
    display: flex;
    justify-content: space-around;
        align-items: center;
    margin: 10px 0;
}
  .Matchs .match.get .info {
    color: #000;
}
  .Matchs .match .info {
    background: #f9fafb;
    border-radius: 10px;
    width: 95%;
    margin: 10px auto;
    padding: 2px;
}
.Matchs .match {
    cursor: pointer;
    background: #ffffff;
    box-shadow: 0 0 9px 0 #0a0d3726;
    border-radius: 7px;
    padding: 7px 0px;
    margin: 10px 0px;

}

  .Matchs .match.get {
background: rgba(114,129,160,.9);
    color: #fff;
}
.match.Not .scores, .match.Soon .scores,
.match.End div.Time,
.match.Live div.Time {
    
        font-size: 2.5em;
}
.All_scores >* {font-size: 16px;margin: 0px 0;text-align: center;}
.MatchsOP {
    text-align: center;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}
.All_scores {
    width: 100%;
    max-width: 150px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
}


.contener {
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 10px;
}









        th, td {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }
   

        #popup {
            display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #ddd;
    background: #fff;
    padding: 10px;
    flex-wrap: wrap;
    width: 95%;
    max-width: 500px;
    list-style: none;
    margin: 0 auto;
    background-color: #fefefe;
    border-radius: 20px;
    z-index: 3;
    box-shadow: 0 0 9px 0 #0a0d3726;
    transition: all .2s ease;
        }
       
                #htmlCode:focus-visible {

    border: 2px solid #ddd;
        }
        .match.Not.match-row.active {
    background: #cedbe9;
}
        .match.Not.match-row.active .info {
    background: #ffffff;
}



textarea {
    width: 97%;
    height: 200px;
    margin-top: 20px;
    direction: ltr;
    background: #f9fafb;
    border: 1px solid #ddd;
}

textarea:focus-visible, textarea:active , textarea:focus,#htmlCode:focus-visible, #htmlCode:active , #htmlCode:focus{
    outline: none;
}
.details-button {
    color: #100d48;
    padding-top: 11px;
    font-weight: 600;
}
.swal2-rtl .swal2-close {
    right: auto;
    left: 0;
    color: #e91e63;
    font-size: 50px;
}
button#copyHtmlCodeBtn2 {
    padding: 5px 15px;
    text-align: center;
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.22s ease;
    border-radius: 7px;
    color: #ffffff;
    outline: none;
    font-weight: 600;
    font-size: 19px;
    display: block;
    width: 100%;
    background-color: #070a2d;
}
.boot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    flex-direction: row-reverse;
}


/*css for football*/


.mainheaderf nav{
    background: rgba(0,0,0,0);
     overflow: hidden;
       transition: 0.5s;
    list-style: none;
      
    position: absolute;
   top: 110%;
    width: 550px;
     height: 45px;
    background-color:  #1e1c21;
    border-radius: 5px;
    -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
       opacity:0;
    visibility:hidden;
    z-index: 9;
}
 
.mainheader nav ul li:nth-child(2):hover .mainheaderf nav{
   
    opacity:1;
    visibility:visible;
    transition:0.35;
}

.topcontentf{
    
 background-color: #f9c724;
     border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
   
     margin-top: 8%;
}

.mainheaderf nav ul {
    
    margin: 0 auto;
}

.mainheaderf nav ul li {
    padding: 5px;
      position:relative;
    bottom: 7px;
 float: right;
    display: inline;
}

.mainheaderf nav a:link , .mainheaderf nav a:visited {
    
    
   color: #fff;
    display: inline-block;
    padding: 10px 25px;
    height: 20px;
}

.mainheaderf nav ul li a:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 2px;
    top: 35px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.mainheaderf nav ul li a:hover::before{
    margin: 5px;
    width: 85%;
    
    
}
    
    .mainheaderf nav ul li a:hover
{
    color:#2f2e40;
}


 .mainheaderf nav a:active,
.mainheaderf nav ul li .asizef:link, .mainheaderf nav ul li .asizef:visited
{
   color:#fff;
    background-color:#3d3848;
   text-shadow: none;
   
}

.mainheaderf nav ul li .asizef:hover
{
    
    color:#2f2e40;
    background-color:#f9c724;
   text-shadow: none;
    
}

.top-sidbarf{
     width: 21%;
    float: left;
    background-color:#f9c724;
    border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
   margin: 6% 0 2%;
    padding: 2% 3%;
}

.middle-sidbarf{
     width: 21%;
    float: left;
    background-color:#f9c724;
    border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
    
    margin-bottom: 2%;
    margin-top: 2%;
     padding: 2% 3%;
}

.bottom-sidbarf{
     width: 21%;
    float: left;
    background-color:#f9c724;
    border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
    
    margin-bottom: 2%;
    margin-top: 2%;
     padding: 2% 3%;
}

/*css for football*/



/*css for basketball*/

.mainheaderb nav{
    background: rgba(0,0,0,0);
     overflow: hidden;
       transition: 0.5s;
    list-style: none;
      
     position: absolute;
   top: 110%;
    width: 550px;
     height: 45px;
    background-color:  #1e1c21;
    border-radius: 5px;
    -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
    opacity:0;
    visibility:hidden;
      z-index: 9;
    
}

.mainheader nav ul li:nth-child(3):hover .mainheaderb nav{
   
    opacity:1;
    visibility:visible;
    transition:0.35;
}

.topcontentb{
    
 background-color:#f9c724;
     border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
   
     margin-top: 8%;
}

.mainheaderb nav ul {
    
    margin: 0 auto;
}

.mainheaderb nav ul li {
    padding: 5px;
      position:relative;
     bottom: 7px;
 float: right;
    display: inline;
}

.mainheaderb nav a:link , .mainheaderb nav a:visited {
    
    
   color: #fff;
    display: inline-block;
    padding: 10px 25px;
    height: 20px;
}

.mainheaderb nav ul li a:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 2px;
    top: 35px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.mainheaderb nav ul li a:hover::before{
    margin: 5px;
    width: 85%;
    
    
}
    
    .mainheaderb nav ul li a:hover
{
    color:#2f2e40;
}


.top-sidbarb{
     width: 21%;
    float: left;
    background-color:#f9c724;
    border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
   margin: 6% 0 2%;
    padding: 2% 3%;
}

.middle-sidbarb{
     width: 21%;
    float: left;
    background-color:#f9c724;
    border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
    
    margin-bottom: 2%;
    margin-top: 2%;
     padding: 2% 3%;
}

.bottom-sidbarb{
     width: 21%;
    float: left;
    background-color:#f9c724;
    border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
    
    margin-bottom: 2%;
    margin-top: 2%;
     padding: 2% 3%;
    
    
    
    
    
}


 .mainheaderb nav a:active,
.mainheaderb nav ul li .asizeb:link, .mainheaderb nav ul li .asizeb:visited
{
   color:#fff;
    background-color:#3d3848;
   text-shadow: none;
   
}

.mainheaderb nav ul li .asizeb:hover
{
    
    color:#2f2e40;
    background-color:#f9c724;
   text-shadow: none;
    
}
/*css for basketball*/


/*css for wresling*/

.mainheaderw nav{
    background: rgba(0,0,0,0);
     overflow: hidden;
       transition: 0.5s;
    list-style: none;
     position: absolute;
      top: 110%;
    width: 450px;
     height: 45px;
    background-color:  #1e1c21;
    border-radius: 5px;
    -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
    opacity:0;
    visibility:hidden;
      z-index: 9;
}

.mainheader nav ul li:nth-child(3):hover .mainheaderw nav{
   
    opacity:1;
    visibility:visible;
    transition:0.35;
}

.topcontentw{
    
 background-color:#f9c724;
     border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
   
     margin-top: 8%;
}

.mainheaderw nav ul {
    
    margin: 0 auto;
}

.mainheaderw nav ul li {
    padding: 5px;
      position:relative;
     bottom: 7px;
 float: right;
    display: inline;
}

.mainheaderw nav a:link , .mainheaderw nav a:visited {
    
    
   color: #fff;
    display: inline-block;
    padding: 10px 25px;
    height: 20px;
}

.mainheaderw nav ul li a:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 3px;
    top: 35px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.mainheaderw nav ul li a:hover::before{
    margin: 5px;
   width: 85%;
    
    
}
    
    .mainheaderw nav ul li a:hover
{
    color:#2f2e40;
}

 .mainheaderw nav a:active,
.mainheaderw nav ul li .asizew:link, .mainheaderw nav ul li .asizew:visited
{
   color:#fff;
    background-color:#3d3848;
   text-shadow: none;
   
}

.mainheaderw nav ul li .asizew:hover
{
    
    color:#2f2e40;
    background-color:#f9c724;
   text-shadow: none;
    
}


.top-sidbarw{
     width: 21%;
    float: left;
    background-color:#f9c724;
    border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
   margin: 6% 0 2%;
    padding: 2% 3%;
}

.middle-sidbarw{
     width: 21%;
    float: left;
    background-color:#f9c724;
    border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
    
    margin-bottom: 2%;
    margin-top: 2%;
     padding: 2% 3%;
}

.bottom-sidbarw{
     width: 21%;
    float: left;
    background-color:#f9c724;
    border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
    
    margin-bottom: 2%;
    margin-top: 2%;
     padding: 2% 3%;
}

/*css for wresling*/

.bodicon{
    
    margin: 0;
    padding: 0;
    background: #ccc;
}

.ulicon{
    
    position: relative;
   top: 70px;
    left: -730px;
        width: 100px;
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    display: flex;
  
}

.ulicon li{
    
    list-style: none;
    margin: 0 35px;
}

.ulicon li:nth-child(1) a .fa-brands
{
    
    font-size: 25px;
    color: #3b5999;
   
  padding-top: 6px;
    transition: .5s;
}

.ulicon li:nth-child(2) a .fa-brands
{
    
    font-size: 25px;
   background: linear-gradient(45deg, #FEDA77, #FA7E1E, #D62976, #962FBF, #4F5BD5);
    -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
  padding-top: 6px;
    transition: .5s;
}

/*.ulicon li:nth-child(2) a .fa-brands
{
    
    font-size: 25px;
    color:  #0088cc;
   
  padding-top: 6px;
    transition: .5s;
}*/

.ulicon li:nth-child(3) a .fa-brands
{
    
    font-size: 25px;
    color:  #25D366;
   
  padding-top: 6px;
    transition: .5s;
}

.ulicon li:nth-child(4) a .fa-brands
{
    
    font-size: 25px;
    color:  #E4405F;
   
  padding-top: 6px;
    transition: .5s;
}
.ulicon li a 
{
    
    position: relative;
    display: block;
    width: 29px;
    height: 40px;
    background: #fff;
    text-align: center;
    transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(0,0);
    transition: .5s;
    box-shadow: -20px 20px 10px rgba(0,0,0,.5);
}

.ulicon li a:before
{
    content: '';
    position: absolute;
    top: 10px;
    left: -20px;
    height: 100%;
    width: 20px;
    background: #b1b1b1;
    transition: .5s;
    transform:  rotate(0deg) skewY(-45deg);
    
}

.ulicon li a:after
{
    content: '';
    position: absolute;
    bottom: -20px;
    left: -10px;
    height: 20px;
    width: 100%;
    background: #b1b1b1;
    transition: .5s;
    transform:  rotate(0deg) skewx(-45deg);
    
}

.ulicon li a:hover
{
    
    transform: perspective(1000px) rotate(-30deg) skew(20deg) translate(10px,-10px);
    box-shadow: -50px 50px 50px rgba(0,0,0,.5);
}

.ulicon li:hover a .fa-brands
{
    
   color: #fff;
}



.ulicon li:hover:nth-child(1) a
{
    
   background: #3b5999;
}

.ulicon li:hover:nth-child(1) a:before
{
    
   background: #2e4a86;
}

.ulicon li:hover:nth-child(1) a:after
{
    
   background: #4a69ad;
}


.ulicon li:hover:nth-child(2) a
{
    
  /*background: linear-gradient(-45deg, #FEDA77, #FA7E1E, #D62976, #962FBF, #4F5BD5);*/
     background: #9759a3b3;
}

.ulicon li:hover:nth-child(2) a:before
{
    
/* background: linear-gradient(45deg, #FEDA77, #FA7E1E, #D62976, #962FBF, #4F5BD5);*/
     background: #fa7e1ecc;
}

.ulicon li:hover:nth-child(2) a:after
{
    
  /*background: linear-gradient(45deg, #FEDA77, #FA7E1E, #D62976, #962FBF, #4F5BD5);*/
      background: #e5183fad;
}

.ulicon li:hover:nth-child(2) a .fa-brands
{
    
 background: #fff;
   
    -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/*.ulicon li:hover:nth-child(2) a
{
    
   background: #0088cc;
}

.ulicon li:hover:nth-child(2) a:before
{
    
   background: #007cbb;
}

.ulicon li:hover:nth-child(2) a:after
{
    
   background: #0c92d5;
}*/



.ulicon li:hover:nth-child(3) a
{
    
   background: #25D366;
}


.ulicon li:hover:nth-child(3) a:before
{
    
   background: #25A456;
}

.ulicon li:hover:nth-child(3) a:after
{
    
   background: #25D356;
}





.ulicon2{
    
    position: relative;
   bottom: -7px;
     left: -360px;
        width: 100px;
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    display: flex;
   
}

.ulicon2 li{
    
    list-style: none;
    margin: 0 10px;
    
}

.ulicon2 li:nth-child(1) a .fa-brands
{
    
    font-size: 25px;
    color: #3b5999;
   
  padding-top: 6px;
    transition: .5s;
}

.ulicon2 li:nth-child(2) a .fa-brands
{
    
    font-size: 25px;
    color:  #0088cc;
   
  padding-top: 6px;
    transition: .5s;
}

.ulicon2 li:nth-child(3) a .fa-brands
{
    
    font-size: 25px;
    color:  #f9c724;
   
  padding-top: 6px;
    transition: .5s;
}

.ulicon2 li:nth-child(4) a .fa-brands
{
    
    font-size: 25px;
    color:  #25D366;
   
  padding-top: 6px;
    transition: .5s;
}

.ulicon2 li:nth-child(5) a .fa-brands
{
    
    font-size: 25px;
    color:  #000;
   
  padding-top: 6px;
    transition: .5s;
}
.ulicon2 li a 
{
    
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    background: #fff;
    text-align: center;
    border-radius: 100%;
    transform: perspective(1000px)  translate(0,0);
    transition: .5s;
    
}





.ulicon2 li a:hover
{
    
    transform: perspective(1000px) rotate(30deg) skew(2deg) translate(2px,-2px);
    box-shadow: -50px 50px 50px rgba(0,0,0,.5);
}

.ulicon2 li:hover a .fa-brands
{
    
   color: #fff;
}


.ulicon2 li:hover:nth-child(1) a
{
    
   background: #3b5999;
}

.ulicon2 li:hover:nth-child(1) a:before
{
    
   background: #2e4a86;
}

.ulicon2 li:hover:nth-child(1) a:after
{
    
   background: #4a69ad;
}

.ulicon2 li:hover:nth-child(2) a
{
    
   background: #0088cc;
}

.ulicon2 li:hover:nth-child(2) a:before
{
    
   background: #007cbb;
}

.ulicon2 li:hover:nth-child(2) a:after
{
    
   background: #0c92d5;
}



.ulicon2 li:hover:nth-child(3) a
{
    
   background: #f9c724;
}


.ulicon2 li:hover:nth-child(3) a:before
{
    
   background: #f9d724;
}

.ulicon2 li:hover:nth-child(3) a:after
{
    
   background: #f9c724;
}

.ulicon2 li:hover:nth-child(4) a
{
    
   background: #25D366;
}

.ulicon2 li:hover:nth-child(4) a:before
{
    
   background: #075E54;
}

.ulicon2 li:hover:nth-child(4) a:after
{
    
   background: #beff6d;
}


.ulicon2 li:hover:nth-child(5) a
{
    
   background: #000;
}

.ulicon2 li:hover:nth-child(5) a:before
{
    
   background: #000;
}

.ulicon2 li:hover:nth-child(5) a:after
{
    
   background: #000;
}

.h2icon{
 
    
      position:absolute ;
    right: 900px;
      margin-top: 1px;
 
}




@font-face {
	font-family: charlieUltra;
	src: url(fonts/charlie-display-ultra.ttf);
}

@font-face {
	font-family: GreatSejagad;
	src: url(fonts/Great_Sejagad.ttf);
    
}

.container {
	width: 1355px;
	height: 100%;
	margin: 0 auto;
}

.center {
    width: 50%;
	height: 50%;
}

.title,.title2,.title3 {
	color: #f9c724;
	font-size: 70px;
	font-family: GreatSejagad;
}

.main_title {
    color: #fff;
    font-size: 70px;
    font-family: charlieUltra;
	line-height: 80px;
}

section.slider {
    padding: 10px 0;
    background: #0e0e16;
    height: 500px;
    width: 142%;
    margin-top: 50px;
    border-radius: 2%;
}

section.slider .title {
    font-size: 50px;
    position: relative;
    top: 2px;
    left: 330px;
}

section.slider .title2 {
    font-size: 50px;
    position: relative;
    top: 2px;
    left: 400px;
}

section.slider .title3 {
    font-size: 50px;
    position: relative;
    top: 2px;
    left: 450px;
}

.slider-title {
    display: flex;
    justify-content: space-between;
    align-items: end;
	margin-bottom: 50px;
}

.slide_content {
    position: absolute;
    bottom: 20px;
    width: 70%;
    padding: 0 30px 0 30px;
    text-align: center;
}

button.slider__button {
	background: #f9c724;
    border: 3px solid #f9c724;
    width: 50px;
    height: 50px;
    font-size: 25px;
    cursor: pointer;
    color: #0e0e16;
    opacity: 1 !important;
    border-radius: 10px;
    position: relative;
    right: 910px;
}

button.slider__button:after{
    content: "";
    display: block;
    height: 20px;
    width: 20%;
    left: 10px;
    bottom: 5px;
    background-color:#0e0e16;
    position: relative;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
    transform: rotate(120deg);
}

button.slider__button:before{
    content: "";
    display: block;
    height: 20px;
    width: 20%;
    left: 10px;
    top: 7px;
    background-color:#0e0e16;
    position: relative;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
     transform: rotate(-120deg);
}

button.slider__button:hover{

    background-color:inherit;
   transition: all ease-in-out 270ms;
}

button.slider__button:hover::before{

    background-color:#f9c724;
   
}

button.slider__button:hover::after{

    background-color:#f9c724;
   
}


button.slider__button2 {
	background: #f9c724;
    border: 3px solid #f9c724;
    width: 50px;
    height: 50px;
    font-size: 25px;
    cursor: pointer;
    color: #0e0e16;
    opacity: 1 !important;
    border-radius: 10px;
}
button.slider__button2:after{
    content: "";
    display: block;
    height: 20px;
    width: 20%;
    left: 15px;
    bottom: 5px;
    background-color:#0e0e16;
    position: relative;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
    transform: rotate(-122deg);
}

button.slider__button2:before{
    content: "";
    display: block;
    height: 20px;
    width: 20%;
    left: 15px;
    top: 7px;
    background-color:#0e0e16;
    position: relative;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
     transform: rotate(122deg);
}
button.slider__button2:hover{

    background-color:inherit;
   transition: all ease-in-out 270ms;
}

button.slider__button2:hover::before{

    background-color:#f9c724;
   
}

button.slider__button2:hover::after{

    background-color:#f9c724;
   
}

.slide_content p {
    color: #f9c724;
    font-family: charlieUltra;
    font-size: 22px;
    font-weight: 900;
	letter-spacing: 1px;
    margin-bottom: 30px;
}
.slider .btns {
    text-align: center;
    margin-top: 50px;
}

.slider .btns button {
    height: 48px;
    width: 150px;
    border-radius: 50px;
    font-size: 18px;
    padding: 0 10px;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    background: none;
    font-family: charlieUltra;
    border: 3px solid #45f882;
    color: #45f882;
	letter-spacing: 1px;
}

.slider .btns button:hover {
    background: #f9c724;
    border: 3px solid #f9c724;
    color: #0e0e16;
}


.slider {
  --slider-padding: 1rem;
  --slider-column-gap: 1em;
  --slide-width: 20%;
  --slide-min-width: 15rem;
  
  position: relative;
  overflow: hidden;
    direction: ltr;
}

.slider__track {
  display: flex;
  overflow-x: auto;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
  padding-inline: var(--slider-padding);
  scroll-behavior: smooth;
  list-style-type: none;
  padding: 0;
  margin-right: calc(--var(slider-column-gap) * -1);
  scrollbar-width: none;
}

.slider__track > * {
  flex: 0 0 var(--slide-width);
  min-width: var(--slide-min-width);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding-right: var(--slider-column-gap);
}

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

.slider__buttons {
  margin-top: 1rem;
}

.slider__buttons [disabled] {
  opacity: 0.5;
}

.slide {
	display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1/1;
    position: relative;
    border-radius: 10px;
    padding: 3px;
    
}

.slide .slideimg {
	 width: 100%;
	 border-radius: 10px;
    height: 300px;
     border: 3px solid #383c4e;
    padding: 5px
}

    .slide :hover  .slideimg{
    border: 3px solid #f9c724;
    }


/* Responsive Media Query */
@media (max-width: 1400px){
	.container {
		width: 90%;
	}
}

@media (min-width: 1200px){
	.menu ul {
		display: flex;
		justify-content: center;
	}
	.mob-icons {
		display: none;
	}
}

@media (max-width: 769px) {
	.main_title {
		font-size: 60px;
		line-height: 60px;
	}
	.title {
		font-size: 60px;
	}
}

@media (max-width: 600px) {
	.title {
		font-size: 40px;
	}
	.main_title {
		font-size: 40px;
		line-height: 50px;
	}
	section.slider .title {
		font-size: 40px;
	}
	button.slider__button {
		width: 40px;
		height: 40px;
		font-size: 20px;
	}
    .slider .btns button {
        font-size: 16px;
    }
}

@media (max-width: 426px) {
	.main_title {
		font-size: 35px;
		line-height: 35px;
	}
	section.slider .title {
		font-size: 30px;
		top: 10px;
	}
}
/* Responsive Media Query End */

.section1{
    background-color: #2f2e40;
    height: 550px;
        width: 700px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 20px;
    border: 4px solid #2f2e40;
    box-shadow: 5px 5px 20px #2f2e40,
    -2px -2px 10px #2f2e40;
  
}

.imgslid{
    width: 100%;
    height: fit-content;
    position: absolute;
    transition: 1s;
}

.nav{
    
    color: aliceblue;
    position: absolute;
    display: flex;
    justify-content: space-between;
    gap: 900px;
    font-size: 30px;
}

.prev:hover,
.next:hover{
    color: rgb(255, 251, 0);
}

.buttons{
      direction: rtl;
    z-index: 100;
    display: flex;
    position: absolute;
    color: aliceblue;
    bottom: 20px;
    gap: 15px;
}

input[type="radio"] {
    height: 1.2rem;
    width: 1.2rem;
}


html{
    scroll-behavior: smooth;
}


.GoToTopButton{
    display: none;
    position: fixed;
    bottom: 20px;
    right: 6px;
    z-index: 99;
    background-color: #59516b;
    border-style:dashed ; 
    border-color: #f9c724;
    width: 50px;
    height: 50px;
    border-radius: 150px;
    cursor: pointer;
    transition: 0.2s;
}


.GoToTopButton:hover i{
    transform: translateY(3px);
}
.GoToTopButton:active{
    transform: translateY(6px);
}
.GoToTopButton i{
    color: white;
    font-size: 20px;
    transition: 0.2s;
}
.GoToTopButton i:after{
    content: "";
    display: block;
    height: 20px;
    width: 20%;
    right: 5px;
    bottom: 13px;
    background-color:#f9c724;
    position: relative;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
    transform: rotate(-60deg);
}

.GoToTopButton i:before{
    content: "";
    display: block;
    height: 20px;
        width: 20%;
    right: 20px;
    top: 7px;
    background-color:#f9c724;
    position: relative;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
    transform: rotate(60deg);
}
.wrapper {
 font-family:'AraAqeeq', sans-serif;
  width: 95%;
  padding: 18px 25px 20px;
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.06);
    color: black;
}
.wrapper label
{
color: #f9c724;  
}

.wrapper label:before{
    content: "";
    display: block;
    height: 3px;
    width: 100%;
    left: 2px;
    top: 30px;
    background-color:#f9c724;
    position: relative;
 
}

.wrapper label:after{
    content: "";
    display: block;
    height: 3px;
    width: 50%;
    left: 2px;
    top: 10px;
    background-color:#f9c724;
    position: relative;
 
}

.wrapper p:before{
    content: "";
    display: block;
    height: 3px;
    width: 50%;
    left: 2px;
    top: -15px;
    background-color:#f9c724;
    position: relative;
 
}

.wrapper p:after{
    content: "";
    display: block;
    height: 3px;
    width: 100%;
    left: 2px;
    top: -10px;
    background-color:#f9c724;
    position: relative;
 
}

.cont {
  margin: 10px 0;
    
}
.wrapper .cont ul {
   
    font-size: 18px;
    position: inherit;
     
  display: flex;
  flex-wrap: wrap;
  padding: 7px;
  margin: 1px 0;

  border-radius: 5px;
}


.taglink
{
    color: #3d3848;
    margin: 2px;
    padding: 5px;
    background-color: #f9c724;
    border-radius: 10px;
      transition: 0.2s;
}

.taglink:hover
{
    color: #f9c724;
    background-color: #3d3848;
    transition: 0.2s;
}


@media only screen and (min-width: 150px) and (max-width: 820px)
    
{
   
    @supports (-moz-appearance:none)
{
    #firefox
    {
        display: none !important;
    }
}
    .body{
    
    
    width: 90%;
    font-size: 95%;
    
}
    
       .mainheaderlogo nav
{
      position: relative;
    width: 100%;
    background-color: #1e1c21;
    height: 120px;
    top:-15px;
    right: auto;
    margin-bottom: -20px;
    border-radius: 5px;
    -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
    
    .logs
{
    
    width: 30%;
    background-color: #2f2e40;
    bottom: 10px;
    left: 10px;
    
   
}
     .logs a h1
{
    position: absolute;
    bottom: 2px;
    right: 14px;
     font-size: 12px;
    font-weight: 1000;
    width: 100px;
} 
    
.logs:before{
   
    height: 3px;
    width: 0%;
    left: 2px;
    top: 25px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.logs:hover::before{
    margin: 5px;
    width: 90%;
    
    
}
    
  .logs:hover
{
    color:#2f2e40;
}
    
    .butlogout
    {
        left: 150px;
    }
    
    .butpro:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 60px;
    top: 25px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.butpro:hover::before{
    margin: 5px;
    width: 60%;
    
    
}
    
  .butpro:hover
{
    color:#2f2e40;
}

.butpro
{
  right: 180px;
    width:25%;
    font-size: 13px;
    font-weight: 900;
}


   #iconprof
{
   margin-left:-25px; 
 height:30px;
    width: 35px;
    margin-top: -5px;
} 
    
    #tech
{ 
   
     border:2px solid ;
    
    /*-webkit-border-top-right-radius:20px;
     -webkit-border-top-left-radius:20px;*/
    
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
   
   margin-bottom:  15px ;
 margin-right: -5px;
  height:200px;
  width:102%;
     
    background-color: black;
color: white;
text-align: center
   
 
}
    .containerVid a .Show{
        
    background-size:8% ;
    }
.containerMatch a .Show{
        
    background-size:10% ;
    }

.containerVid a .Show{opacity:1}
    
.containerMatch a .Show{opacity:1}    
    
.containermostVid .Show{opacity:1}


    .homebtn{
   background-image: url('site-new1.jpg');
    transition: background-position  5s;
} 

   /* .homebtn_site{
    width: 230px;
    height: 190px;
    -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
     -webkit-border-top-right-radius:20px;
    -webkit-border-top-left-radius:20px;
    position: relative;
    right: 60px;
    
    
    bottom: 35px;
}*/
  .homebtn_site{
    width: 20px;
    height: 190px;
    -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
     -webkit-border-top-right-radius:20px;
    -webkit-border-top-left-radius:20px;
    position: relative;
    right:70px;
    
    
    bottom: 35px;
}   

/*.homebtn_site::before {
    width: 53%;
    height: 40%;
    
    
}*/
 .homebtn_site::before {
    width: 120px;
    height: 40%;
    
    
}   
    

.page-home .homebtn_site::after {
    width: 0;
    height: 0;
    border-color: transparent;
}

.homebtn_site::before,  .homebtn_site::after {
   
    right: 5%;

}

.homebtn
{
    width: 100px;
    height: 60px;
    
    top: 50%;
    right: 5%;
    border: 5px solid #fff;
    background-color: #161619;
    transform: translate(50%, -50%);
    background-position: 150%;
    background-repeat: no-repeat;
    background-size: 500%;
}
  /*  @keyframes exa2{
  
    from {transform:scale(1.05);}
   to {position:relative;top:55px;right:-54px; transform:scale(1);}
   
}*/
    
     @keyframes exa2{
  
    from {transform:scale(1.05);}
   to {position:absolute;top:55px;right:-60px; transform:scale(1);}
   
}


.homebtn_site:hover::before {
  width: 0;
  height: 0;
  border-color: transparent;
}

/*.homebtn_site:hover::after {
  width: 55%;
  height: 40%;
  border-color: #f9c724;
    animation-name: exa2;
animation-duration: 2s;
animation-fill-mode:forwards;
}*/
    
 .homebtn_site:hover::after {
  width: 120px;
  height: 40%;
  border-color: #f9c724;
    animation-name: exa2;
animation-duration: 2s;
animation-fill-mode:forwards;
}
   


 .homebtn_site:hover .logo{
  opacity: 1;
}
 .homebtn_site:hover .logo{
  right: -100%;
}
    
.homebtn_site:hover .logo2{
  opacity: 1;
}
 .homebtn_site:hover .logo2{
  right: -100%;
}
.page-home .home-site-btn-container:hover .home-site-btn .text {
  bottom: 100%;
}
.page-home .home-site-btn {
  width: 230px;
  height: 230px;
  overflow: hidden;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 50%;
  border: 5px solid #fff;
  background-color: #161619;
  transform: translate(50%, -50%);
  background-position: center -43%;
  background-repeat: no-repeat;
  background-size: 120%;
}
  .logo {
      
  transition: all 3s;
      width: 90px;
  height: 60px;
      margin-top: 100px;
      margin-right: -7px;
}
    
     .logo2 {
      
   transition: all 5s;
     width: 90px;
  height: 60px;
      margin-top: 100px;
         margin-right: 195px;
   
}


.homebtn .logo {
  position: absolute;
  top: -100px;
  right: 100%;
  z-index: 2;
  transform: translate(100%);
}
    
    .homebtn .logo2 {
  position: absolute;
  top: -100px;
  right: 100%;
  z-index: 2;
  transform: translate(100%);
}
.page-home .home-site-btn .text {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 55px;
  right: 50%;
  z-index: 2;
  transform: translate(50%);
}

  
   .containers{
    width: 110px;
    height: 50px;
    top: 50%;
    left: 20%;
    
}

.clock{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.containers::before{
    content: '';
    position: absolute;
    height: 100px;
    width: 100px;
    top: 10px;
    left: 40px;
    border-radius: 75% 39% 58% 52% / 60% 62% 50% 40%;
    z-index: -1;
}

.containers::after{
    content: '';
    position: absolute;
    height: 100px;
    width: 100px;
    bottom: 0px;
    right: 40px;
    border-radius: 53% 47% 39% 61% / 52% 34% 66% 48%;
    z-index: -1;
}


   @keyframes  navBtnAni{
  
    from { transform: rotate(-45deg);top:1px;}
   to { transform: rotate(0deg);}
   
}

       @keyframes navBtnAni2{
  
    from { transform: rotate(45deg);bottom: 1px;}
   to { transform: rotate(0deg);}
   
}
    
    .navBtn {
    position: relative;
    right: 5px;
    top: 5px;
    height: 80%;
    width: 50px;
    background-color: #3d3848;
    float: right;
    -webkit-transform: translateZ(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
        border-radius: 5px;
}

.navBtn .menuIcon {
     
     position: absolute; 
     left: 50%;
    top: 50%;
 bottom: auto; 
  right: auto; 
     width: 30px; 
    height: 3px; 
    background-color: #fff;
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    
}


.navBtn .menuIcon:before {
    
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: inherit;
    left: 0;
}
    
    .navBtn .menuIcon:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: inherit;
    left: 0;
}

.navBtn .menuIcon:after {
    top: 8px;
}

.navBtn .menuIcon:after {
    top: 6px;
       animation-name: navBtnAni;
          animation-duration: 1s;
       animation-fill-mode: forwards;
}


.navBtn .menuIcon:before {
    bottom: 8px;
}

.navBtn .menuIcon:before {
    bottom: 6px;
     animation-name: navBtnAni2;
          animation-duration: 1s;
       animation-fill-mode: forwards;
}

    
     .navBftn {
    position: relative;
    right: 5px;
    top: 5px;
    height: 80%;
    width: 50px;
    background-color: #f9c724;
    float: right;
    -webkit-transform: translateZ(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
           border-radius: 5px;
         visibility: hidden;
}

    .navBftnHide
    {
          visibility: hidden;
    }
    .navBftnShow
    {
          visibility: visible;
    }   

.navBftn .menuIcon {
     
     position: absolute; 
     left: 50%;
    top: 50%;
 bottom: auto; 
  right: auto; 
     width: 30px; 
    height: 3px; 

    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    
}


.navBftn .menuIcon:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: inherit;
    left: 0;
}
    .navBftn .menuIcon:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: inherit;
    left: 0;
        
       
}
     

.navBftn .menuIcon:after {
    top: 8px;
}

.navBftn .menuIcon:after {
    top: 6px;
}


.navBftn .menuIcon:before {
    bottom: 8px;
}

.navBftn .menuIcon:before {
    bottom: 6px;
}

    
     @keyframes  navBftnAni{
  
    from { transform: rotate(0deg);top:5px;}
   to { transform: rotate(-45deg);}
   
}

       @keyframes navBftnAni2{
  
    from { transform: rotate(0deg);bottom: 5px;}
   to { transform: rotate(45deg);}
   
}
    .navBftn .menuIcon:after {
    animation-name: navBftnAni;
          animation-duration: 1s;
       animation-fill-mode: forwards;
    background: #fff;
    top: 0;
}
    
     .navBftn .menuIcon:before {
    animation-name: navBftnAni2;
          animation-duration: 1s;
       animation-fill-mode: forwards;
    background: #fff;
    bottom: 0;
        
}

    
  
#pics
{ 

  width:100%;
     margin-right: 0.1px;
}
    
    #fonts
{
font-size: 13px;

   
}



#fontsdate
{
font-size: 15px;
   
}
    
#font1
    {
        font-size: 14px;
    }
    
   .topcontent2
{
 font-size: 16px;
   
}
    
    #sdsd
    {
        
       position: absolute;
           
    }
    #wewd
    {
        
       position: absolute;
       
           
    }
    
    #icon
{

  position: relative;
    bottom: 10px;
  width: 45px;
    height: 25px; 
   
}
     #micon {
 
  width: 25px;
 
} 
    
.mainheader img{
    
    width: 100%;
   
    
}

 
    
.mainheader nav{
    
    position:absolute;
    height: 10px;
    right: auto;
   padding-bottom: 40px;
border-top-left-radius:0px;
    border-top-left-radius:0px;
}
    
   .seh{
    
     position:relative;
   
        right: -150px;
        top:10px;
    display:block; 
    width:200px;
    border-radius:5px; 
 background-color: #f9c724; 
    }

    .btn{
    
     position:relative;
   right: 62px;
       bottom: 30px;
    display:block; 
    width:50px;
    border-radius:5px; 
    background-color: #f9c724; 

    }


    
   .sss{
       position: relative;
       z-index: 3;
         width: 50%;
        float: right;
       margin-top: 20px;
        max-height: 0px;
         background: linear-gradient(60deg, #3d3848, #1e1c21, #3d3848, #1e1c21,#3d3848, #1e1c21,#3d3848, #1e1c21,#3d3848, #1e1c21);

       
    }
    
    

 
.mainheader nav ul #fot {
    
    position: relative;
    
    left: 200px;
    
width: 160px;
    text-align: center;
}
    
 .mainheader nav #fot a{
    
    
  
    padding: 10px 25px;
    height: 20px;
   
}
 .mainheader li:nth-child(3) 
{
  font-size:14px;
}      

.mainheader nav a:link , .mainheader nav a:visited {
    
    
  
    padding: 10px 25px;
    height: 15px;
    display: block;
}

    
    
.mainheader nav ul li a:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 6px;
    top: 26px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
    
}
    
    
    
.mainheader nav ul li a:hover::before{
    width: 90%;
    
}
    
    .mainheader nav ul li a:hover
{
    color:#2f2e40;
}
    
    
    .mainheaderbtn nav
{
         
    width: 100%;
    height: 120px;
    top:70px;
z-index: 13;
    
}
    

.btn1
{

    top:50px;
    right: 25px;

    width: 90px;
    height: 30px;
    font-size: 12px;
    font-weight: 900;
    font-style: oblique;

}

    .containerMatch{
  
    right: 12px;
  

}
.content{
    
    width: 100%;
    float: left;
    margin-top: 2%;
}

.topcontent{
    
 background-color:ghostwhite;
     border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
    
   
    margin-bottom: 4%;
      height: auto;
}

.livetitle
    {
        font-size: 17px;
    }
.bottomcontent{
    
    margin-top: 3%;
}

.top-sidbar, .middle-sidbar, .bottom-sidbar{
     width: 94%;
   margin: 2% 0 2% 0%;
    padding: 2% 3%;
    font-size: 18px;
}


.mainFooter{
    
    width:  100%;
    height: 130px;
    float: left;
    border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  margin: 2% 0;
}

.mainFooter p{

    width:  92%;
    margin: 10px auto;
    color: #FFF;
}

    
    .depart
{
   
    bottom: 110px;
     display:grid;
   font-size: 9px;
    font-weight: 900;
}

.depart2
{
   
  bottom: 124px;
 width: 80px;
    right: 60px;
 display:grid;
  font-size: 9px;
    font-weight: 900;
}

.depart3
{
   
    bottom: 192px;
    
    right: 125px;
 display:grid;
   font-size: 9px;
    font-weight: 900;
}

.depart4
{
  
    bottom: 246px;
 width: 65px;
    right: 175px;
  
 display:grid;
  font-size: 9px;
    font-weight: 900;
    
}
    
 .depart5
{
  
    bottom: 246px;

    right: 175px;
  
 display:grid;
  font-size: 9px;
    font-weight: 900;
    
}   

.copy{
    
    
   bottom: 190px;
    width: 210px;
    right: 100px;
    font-size: 12px;
}

    
.post-info{
    
    color: #f9c724;
    font-size: 85%;
}
    
    
  
    
    .section1{
    height: 450px;
    width: 290px;
}

.videoplayer
    {
         
        height: 300px;
          -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
    }
    
iframe
    {
          
        height: 300px;
          -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
    } 
    
    .otwebpost
    {
          
        height: 300px;
          -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
    } 
    
.buttons{
    bottom: 0px;
}


     .showing
    {
        
       
        max-height: 30em;
        padding-right: 50%;
         padding-bottom: 130%;
    }
    
      .dpong
    {
        
        position:;
        max-height: 20em;
        padding-right: 50%;
         padding-bottom: 30%;
    }
    
    
     .menu-icon{
        
        display: block;
    }
    
 #ad nav
{
    
   
  right: 0px;
  width: 100%;
    height: 150px; 
    
   
}
    
#adimage
{
      right: 0px;
  width: 100%;
    height: 150px;   
}
   
    .maylike {
  position: relative;
  overflow: hidden;
  margin: 15px 6px;
    width: 95px;
    height: 300px;
    left: 0px;
      float: left;
    top: 10px;
border-radius: 5%;
        
}

.maylike .maylike-body {
width: 35%;
    
}


.maylike .maylike-body h3 {
  color: #FFF;
    font-size: 10px;
    position: absolute;
    top: 1px;
    right: 15px;
    
}

.maylike .maylike-body .cta-btn {
  color: black;
position: absolute;
    top: 120px;
    right: 60px;
    font-size: 13px;
}

 
    .maylike:before {

  left: 0px;
  width: 60%;

}

.maylike:after {

  
  left: 0.5px;
 
    width: 200px;

}

.row {
  width: 100%;
   left: 0px;
    height: 400px;
     font-size: 10px;
}

    .boxRote
{
    position: relative;
    z-index: 3;
  width: 70%;
    float: right;
   left: 8px;
    height: 400px;
    margin-top: 50px;
          -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
.box {
    
    position: relative;
    width: 90px;
    height: 200px;
    top: 100px;
    right: 55%;
    transform-style: preserve-3d;
    animation: animatebox 20s linear infinite;
  z-index: 3;
}

.box:hover{
    animation-play-state: paused;
}


@keyframes animatebox {
    0%{
        transform: perspective(5000px) rotateY(0deg);
    }
    100%{
        transform: perspective(5000px) rotateY(360deg);
    }
}

.box span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform-style: preserve-3d;
    transform: rotateY(calc(var(--i) * 36deg)) translateZ(160px);
    -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, rgba(4, 4, 4, 0.267));
}



.box span img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.5s;
    border-radius: 15px;
    border: 4px double rgb(0, 0, 0);
}

.box span img:hover{
    transform: translateY(-2px);
    
}

    .titlechamp
{

    width: 340px;
}

.titlechamp h1
{
  
    right: 120px;
    
}
    
    .container {
	width: 500px;
	height: 100%;
	margin: 0 auto;
}

section.slider {
    padding: 10px 0;
    background: #0e0e16;
    height: 400px;
    width: 100%;
    margin-top: 50px;
     border-radius: 2%;
}

section.slider .title {
    font-size: 42px;
    position: relative;
    top: -30px;
    left: 55%;
}
    
section.slider .title2 {
    font-size: 42px;
    position: relative;
    top: -30px;
    left: 55%;
}
    
section.slider .title3 {
    font-size: 42px;
    position: relative;
    top: -30px;
    left: 55%;
}    
   
.slider-title {
    display: flex;
    justify-content: space-between;
    align-items: end;
	margin-bottom: -50px;
}


button.slider__button {
    width: 50px;
    height: 50px;
    font-size: 25px;
    right: 390px;
    top: -50px;
}

button.slider__button2 {
	
    width: 50px;
    height: 50px;
    font-size: 25px;
    position: relative;
    right: 180px;
    top: -50px;
}    



.slider .btns {
    text-align: center;
    margin-top: 50px;
}

.slider .btns button {
    height: 4px;
    width: 10px;
    border-radius: 50px;
    font-size: 18px;
    padding: 0 10px;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    background: none;
    font-family: charlieUltra;
    border: 3px solid #f9c724;
    color: #f9c724;
	letter-spacing: 1px;
}


.slider {

  --slide-min-width: 40rem;

}


.slide {

    width: 40%;

    left: 30px;

    
}
    

.slide .slideimg {
	 width: 100%;
	 border-radius: 15px;
    height: 300px;
     border: 3px solid #383c4e;
   
    padding: 5px;
}
    .slide :hover .slideimg {
    border: 3px solid #f9c724;
    }
    
  
  
    
   /* .slider {

  --slide-min-width: 40rem;
height: 1000px;
}


    .slide {
	display:contents;
    align-items: center;
    justify-content: center;
    width: 40%;
    aspect-ratio: 1/1;
    position: absolute;
         left: 100px;
    border: 3px solid #383c4e;
    border-radius: 10px;
    padding: 3px;
  
     
}

.slide .slideimg {
	 width: 40%;
	 border-radius: 15px;
    height: 300px;
     border: 3px solid #383c4e;
    margin-left:70px;
    padding: 5px;
}
    .slide .slideimg:hover {
    border: 3px solid #f9c724;
}*/
    
    .slider__track {
  display: flex;
  overflow-x: auto;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
  padding-inline: var(--slider-padding);
  scroll-behavior: smooth;
  list-style-type: none;
  padding: 0;
  margin-right: calc(--var(slider-column-gap) * -1);
  scrollbar-width: none;
}

.slider__track > * {
  flex: 0 0 var(--slide-width);
  width:500px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding-right: var(--slider-column-gap);
}
    
   
    
    /* for football */
    
    .mainheaderf nav{
     
    position:relative;
        width:400px;
   
    right: -5px;
   
   height:65px; 
    opacity:1;
    visibility:visible;
   
}
    
.mainheaderf nav ul {
    
    margin: 0 auto;
    
}


.mainheaderf nav ul li {
    padding: 1px;
    padding-left: 4px;
      position:relative;
    top: 0px;
 float: right;
    display: inline;
    
}

    .mainheader nav ul #fot:nth-child(2){
   
    
}
    

    
.mainheaderf nav a:link , .mainheaderf nav a:visited {
    
    
   color: #fff;

     position:relative;
    bottom: 30px;
    left: 30px;
   margin-left: -10px;

    
   
}

.mainheaderf nav ul li a:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: -4px;
    top: 26px;
    background-color:#2f2e40 ;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
    
}
    
.mainheaderf nav ul li a:hover::before{
    margin: 5px;
    width: 100%;
    
    
}
    
    .mainheaderf nav ul li a:hover
{
    color:antiquewhite;
}
    
    .mainheaderf nav li #icon
    {
      width: 60px;
        height: 30px;
       left: 1px;
        bottom: 6px;
    } 
    
     .showingf
    {
        max-height: 20em;
       
         padding-bottom: 9%;
    }

     .asizef{
        
   font-size: 14px;
        
    }
    
    .tfoot{
        
   font-size: 14px;
        
    }
    
    .top-sidbarf, .middle-sidbarf, .bottom-sidbarf{
     width: 94%;
   margin: 2% 0 2% 0%;
    padding: 2% 3%;
}

     /* for football */

    
     /* for basketball */
    
    .mainheaderb nav{
     
 position:relative;
      width:400px;
   
    right: -5px;
   
  height:65px; 
    opacity:1;
    visibility:visible;

   
}
    
      .mainheader nav ul #fot:nth-child(3){
   
     
}
    
    .mainheaderb nav ul {
    
    margin: 0 auto;
}

.mainheaderb nav ul li {
    padding: 1px;
    padding-left: 4px;
      position:relative;
       top: 0px;
 float: right;
    display: inline;
}

.mainheaderb nav a:link , .mainheaderb nav a:visited {
    
    
   color: #fff;
     position:relative;
    bottom: 30px;
     left: 30px;
   margin-left: -10px;
 
}

.mainheaderb nav ul li a:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: -4px;
    top: 27px;
    background-color:#2f2e40 ;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.mainheaderb nav ul li a:hover::before{
    margin: 5px;
    width: 93%;
    
    
}
    
    .mainheaderb nav ul li a:hover
{
    color:#6b71bf;
}
    
    .mainheaderb nav li #icon
    {
      width: 60px;
        height: 30px;
       left: 1px;
        bottom: 6px;
    } 
    
     .showingb
    {
        max-height: 20em;
       
         padding-bottom: 9%;
    }

     .asizeb{
        
   font-size: 14px;
        
    }
    
    .top-sidbarb, .middle-sidbarb, .bottom-sidbarb{
     width: 94%;
   margin: 2% 0 2% 0%;
    padding: 2% 3%;
}

     /* for basketball */
    
    
    
        /* for wresling */
    
    .mainheaderw nav{
     
    position:relative;
        width:400px;
   
    right: -5px;
   
    height:65px;  
    opacity:1;
    visibility:visible;

   
}
    
     .mainheader nav ul #fot:nth-child(4){
   
   
}
   
    
    .mainheaderw nav ul {
    
    margin: 0 auto;
        
}

.mainheaderw nav ul li {
    padding-top: 1px;
     padding-left: 10px;
      position:relative;
       top: 0px;
 float: right;
    display: inline;
}

.mainheaderw nav a:link , .mainheaderw nav a:visited {
    
    
   color: #fff;
     position:relative;
    bottom: 30px;
    left: 30px;
   margin-left: -18px;
}

.mainheaderw nav ul li a:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: -4px;
    top: 27px;
    background-color:#2f2e40 ;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.mainheaderw nav ul li a:hover::before{
    margin: 5px;
    width: 93%;
    
    
}
    
    .mainheaderw nav ul li a:hover
{
    color:#6b71bf;
}
    
  .mainheaderw nav li #icon
    {
      width: 60px;
        height: 30px;
       left: 1px;
        bottom: 6px;
    }  
    
    
     .showingw
    {
        max-height: 20em;
       
         padding-bottom: 9%;
    }
    .asizew{
        
   font-size: 12px;
        
    }
    
    .top-sidbarw, .middle-sidbarw, .bottom-sidbarw{
     width: 94%;
   margin: 2% 0 2% 0%;
    padding: 2% 3%;
}

     /* for wresling */

 /*   .ulicon li:nth-child(1) a
{
    
   background: #3b5999;
}

.ulicon li:nth-child(2) a
{
    
   background: #0088cc;
}

.ulicon li:nth-child(3) a
{
    
   background: #1AB7EA;
}

.ulicon li:nth-child(4) a
{
    
   background: #E4405F;
}*/
   .ulicon{
    
    position:relative;
    bottom: 20px;
    padding-bottom: 60%;
    right: 30%;
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    display: flex;
} 
    
    
    
    .ulicon li{
    
    list-style: none;
    margin: 0 15px;
        padding-top: 0px;
}
    
    .ulicon li a 
{
    
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    background: #fff;
    text-align: center;
    transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(0,0);
    transition: .5s;
    box-shadow: -20px 20px 10px rgba(0,0,0,.5);
}

.ulicon li a:before
{
    content: '';
    position: absolute;
    top: 6px;
    left: -11px;
    height: 89%;
    width: 11px;
    background: #b1b1b1;
    transition: .5s;
    transform:  rotate(0deg) skewY(-45deg);
    
}

.ulicon li a:after
{
    content: '';
    position: absolute;
    bottom: -10px;
    left: -6px;
    height: 10px;
    width: 100%;
    background: #b1b1b1;
    transition: .5s;
    transform:  rotate(0deg) skewx(-45deg);
    
}
    
    .ulicon li a:hover
{
    
    transform: perspective(1000px) rotate(-30deg) skew(20deg) translate(10px,-10px);
    box-shadow: -50px 50px 50px rgba(0,0,0,.5);
}
    
    .ulicon li:nth-child(1) a .fa-brands
{
    
     font-size: 19px;
    position: relative;
  
    top: -5px;
}

.ulicon li:nth-child(2) a .fa-brands
{
    
  font-size: 19px;
  
     position: relative;
  
    top: -5px;
}

.ulicon li:nth-child(3) a .fa-brands
{
    
    font-size: 19px;
  
      position: relative;
  
    top: -5px;
}

.ulicon li:nth-child(4) a .fa-brands
{
    
    font-size: 19px;
  
      position: relative;
  
    top: -5px;

}
    
    
    
    .ulicon2{
    
    position: relative;
   top: 10px;
    right: 5px;
        width: 100px;
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    display: flex;
    
}

.ulicon2 li{
    
    list-style: none;
    margin: 0 5px;
    
}


.ulicon2 li a 
{
    
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    background: #fff;
    text-align: center;
    border-radius: 100%;
    transform: perspective(1000px)  translate(0,0);
    transition: .5s;
    
}
    
    .h2icon{
 
    position: relative;
        top: 20px;
        width: 90px;
     left:650px;
    font-size: 20px;
   
}
    
   .wrapper {
    
margin-right: -15px ;

}
.wrapper .cont ul {
   
    font-size: 13px;

}
    
}

@media only screen and (max-width: 240px)
{ 
   .seh {
        right: -100px;
        top: 40px;
        width: 140px;
    }
     .btn {
        right: 50px;
        bottom: -1px;
        width: 50px;
    }
    
    .mainheader nav ul #fot
    {
      left: 160px;
     
    }
    .mainheaderf nav , .mainheaderb nav , .mainheaderw nav
    {
        right: -8px;
       width:250px; 
    }
      .mainheaderf nav li , .mainheaderb nav li
    {
      
       width:55px; 
    }
      .mainheaderw nav li
    {
      
       width:40px; 
    }
    .asizef,.asizeb
    {
        font-size: 10px;
        
    }
        .mainheaderf nav li #icon, .mainheaderb nav li #icon
    {
      width: 50px;
       left: 15px;
        bottom: 6px;
    }
      .mainheaderw nav li #icon
    {
        width: 50px;
       left: 20px;
        bottom: 6px;
    }
    
    .top-sidbar, .middle-sidbar, .bottom-sidbar{
     width: 94%;
   margin: 2% 0 2% 0%;
    padding: 2% 3%;
    font-size: 13px;
}
    .logs a h1 {
        right: 12px;
        font-size: 10px;
        width: 80px;
    }
 
    .homebtn_site{
    width: 50px;
    height: 190px;
    -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
     -webkit-border-top-right-radius:20px;
    -webkit-border-top-left-radius:20px;
    position: relative;
    right: 65px;
    
    
    bottom: 35px;
}
.homebtn_site::before {
    width: 120px;
    height: 37%;
    
    
}

.homebtn_site::before,  .homebtn_site::after {
   
    right: 5%;

}

.homebtn
{
    width: 100px;
    height: 50px;
    
    top: 50%;
    right: 5%;
    border: 5px solid #fff;
    background-color: #161619;
    transform: translate(50%, -50%);
    background-position: 150%;
    background-repeat: no-repeat;
    background-size: 500%;
}
    @keyframes exa2{
  
    from {transform:scale(1.05);}
   to {top:59px;right:-60px; transform:scale(1);}
   
}


.homebtn_site:hover::after {
   width: 120px;
    height: 37%;
  border-color: #f9c724;
    animation-name: exa2;
animation-duration: 2s;
animation-fill-mode:forwards;
}


 .homebtn_site:hover .logo{
  opacity: 1;
}
 .homebtn_site:hover .logo{
  right: -100%;
}
    
.homebtn_site:hover .logo2{
  opacity: 1;
}
 .homebtn_site:hover .logo2{
  right: -100%;
}


  .logo {
      
  transition: all 3s;
      width: 75px;
  height: 50px;
      margin-top: 100px;
      margin-right: -15px;
}
    
     .logo2 {
      
   transition: all 5s;
    width: 75px;
  height: 50px;
  
      margin-top: 100px;
         margin-right: 185px;
   
}


.homebtn .logo {
  position: absolute;
  top: -100px;
  right: 100%;
  z-index: 2;
  transform: translate(100%);
}
    
    .homebtn .logo2 {
  position: absolute;
  top: -100px;
  right: 100%;
  z-index: 2;
  transform: translate(100%);
}


  
   .containers{
    width: 80px;
    height: 50px;
    top: 50%;
    left: 20%;
    
}
    
   .butlogout
    {
        left: 90px;
    }
    
    .butpro:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 30px;
    top: 20px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.butpro:hover::before{
    margin: 5px;
    width: 60%;
    
    
}
    
  .butpro:hover
{
    color:#2f2e40;
}

.butpro
{
  right: 120px;
    width:20%;
    font-size: 8px;
    font-weight: 900;
}

.butpro font
{
    position: relative;
  left: 10px;
  
}
   #micon {
 
  width: 25px;
 
} 
   #iconprof
{
   margin-left:-22px; 
 height:25px;
    width: 30px;
    margin-top: -5px;
} 
    
.titlepost
    {
          font-size: 19px;
    }
    .post-info
    {
        font-size: 9px;
    }
#picpost
    {
        
       height: 300px;
    }
    

    .section1
    {
         width: 100%;
         height: 350px;
    }
   .section1 .imgslid
    {
        height: 300px;
        
    }
    .bottom-sidbar h2
    {
       font-size: 20px; 
    }
    
    #font1
    {
        font-size: 10px;
    }
    
    .row {
      
        font-size: 7px;
        height: 600px;
    }
    
  
        .maylike .maylike-img>img {
   
       width:100%;
    height:150px;
    }
    
    .maylike
    {
         width: 96%;
    height: 150px;
    }
    .maylike .maylike-body .cta-btn {
   
        top: 90px;
        right: 150px;
    
    }

    
    .maylike .maylike-body h3 {
        color: #FFF;
            text-align:center;
       font-size: 9px;
        position: absolute;
        top: -7px;
        right: 60px;
        width: 150px;
    }
    
    .titlechamp
    {
        width: 230px;
    }
    

    
     .titlechamp h1 {
        right: 60px;
    }
    
    
    
     .box {
       right: 90px;
    }
    
    .box span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        transform: rotateY(calc(var(--i)* 47deg)) translateZ(120px);
        -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, rgba(4, 4, 4, 0.267));
    }
           
    .depart
    {
        font-size: 8px;
        bottom: 50px;
    }
     .depart2
    {
        font-size: 8px;
          bottom: 61px;
        right: 45px;
    }
     .depart3
    {
        font-size: 8px;
       bottom: 122px;
        right: 102px;
    }
     .depart4
    {
        font-size: 8px;
        bottom: 170px;
        right: 165px;
        width: 63px;
    }
      .depart5
    {
        font-size: 8px;
        bottom: 170px;
        right: 155px;
        width: 65px;
    }
      .ulicon
    {
       top: 40px;
        right: 30px;
        
    }
    
      .ulicon li a
    {
        width: 15px;
        height:  15px;
    }
    
         .ulicon li:nth-child(1) a .fa-brands {
            font-size: 13px;
    padding-top:3px;
}
        .ulicon li:nth-child(2) a .fa-brands {
            font-size: 13px;
    padding-top:3px;
}
        .ulicon li:nth-child(3) a .fa-brands {
            font-size: 13px;
    padding-top:3px;
}
  
    
    .ulicon2
    {
         top: 5px;
        right: -30px;
    }
    
      .ulicon2 li a
    {
        width: 25px;
        height:  25px;
    }
    
        .ulicon2 li:nth-child(1) a .fa-brands {
            font-size: 18px;
    padding-top:3px;
}
        .ulicon2 li:nth-child(2) a .fa-brands {
            font-size: 18px;
    padding-top:3px;
}
        .ulicon2 li:nth-child(3) a .fa-brands {
            font-size: 18px;
    padding-top:3px;
}
    .ulicon2 li:nth-child(4) a .fa-brands {
        font-size: 18px;
    padding-top:3px;
}
    
    .h2icon
    {
        right: 100px;
        font-size: 15px;
        top: 45px;
        
    }
    
    .copy
    {
        bottom: 100px;
        right: 20px;
        font-size: 9px;
        width: 193px;
    }
    
        .showing {
        padding-bottom: 290%;
    }
   
    
    .slide {
        width: 30%;
        left: 0px;
        top:20px;
        margin-bottom: 30px;
    }
   section.slider .title {
        font-size: 17px;
        top: -15px;
        left: 40%;
    }
    
    section.slider .title2 {
        font-size: 22px;
        top: -14px;
         left: 80%;
        
    }
    
    section.slider .title3 {
        font-size: 22px;
        top: -14px;
         left: 140%;
    }
    
         button.slider__button {
      width: 40px;
             height: 40px;
        right: 410px;
        top: -18px;
    }
    button.slider__button:before {
    
    height: 20px;
    width: 20%;
    left: 7px;
    top: 2px;
   
}
    
    button.slider__button:after {
   
    height: 20px;
    width: 20%;
    left: 7px;
    bottom: 8px;
   
}
        button.slider__button2 {
     width: 40px;
             height: 40px;
        right: 290px;
        top: -18px;
    }
    
    button.slider__button2:before {
   
    height: 20px;
    width: 20%;
    left: 12px;
    top: 2px;

}
   button.slider__button2:after {
 
    height: 20px;
    width: 20%;
    left: 12px;
    bottom: 8px;
  
}
 .btn1
    {
        width: 55px;
        font-size: 6px;
        font-weight: 900;
    }   
    
}

@media only screen and (max-width: 320px) and (max-height: 240px)
{
     .mainheaderw nav
    {
       height: 20px;
    }
    
}
@media only screen and (min-width: 241px) and (max-width: 280px)
{ 
   .seh {
        right: -120px;
        top: 40px;
        width: 160px;
    }
     .btn {
        right: 50px;
        bottom: -1px;
       
    }
    
    .mainheader nav ul #fot
    {
      left: 160px;
     
    }
    .mainheaderf nav , .mainheaderb nav , .mainheaderw nav
    {
        right: -8px;
       width:250px; 
    }
      .mainheaderf nav li , .mainheaderb nav li
    {
      
       width:55px; 
    }
      .mainheaderw nav li
    {
      
       width:40px; 
    }
    .asizef,.asizeb
    {
        font-size: 10px;
        
    }
        .mainheaderf nav li #icon, .mainheaderb nav li #icon
    {
      width: 50px;
       left: 15px;
        bottom: 6px;
    }
      .mainheaderw nav li #icon
    {
        width: 50px;
       left: 20px;
        bottom: 6px;
    }
    
    .top-sidbar, .middle-sidbar, .bottom-sidbar{
     width: 94%;
   margin: 2% 0 2% 0%;
    padding: 2% 3%;
    font-size: 13px;
}
    
    .logs a h1 {
        right: 12px;
        font-size: 10px;
        width: 80px;
    }
 
    .homebtn_site{
    width: 50px;
    height: 190px;
    -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
     -webkit-border-top-right-radius:20px;
    -webkit-border-top-left-radius:20px;
    position: relative;
    right: 65px;
    
    
    bottom: 35px;
}
.homebtn_site::before {
    width: 120px;
    height: 37%;
    
    
}

.homebtn_site::before,  .homebtn_site::after {
   
    right: 5%;

}

.homebtn
{
    width: 100px;
    height: 50px;
    
    top: 50%;
    right: 5%;
    border: 5px solid #fff;
    background-color: #161619;
    transform: translate(50%, -50%);
    background-position: 150%;
    background-repeat: no-repeat;
    background-size: 500%;
}
    @keyframes exa2{
  
    from {transform:scale(1.05);}
   to {top:59px;right:-60px; transform:scale(1);}
   
}


.homebtn_site:hover::after {
   width: 120px;
    height: 37%;
  border-color: #f9c724;
    animation-name: exa2;
animation-duration: 2s;
animation-fill-mode:forwards;
}


 .homebtn_site:hover .logo{
  opacity: 1;
}
 .homebtn_site:hover .logo{
  right: -100%;
}
    
.homebtn_site:hover .logo2{
  opacity: 1;
}
 .homebtn_site:hover .logo2{
  right: -100%;
}


  .logo {
      
  transition: all 3s;
      width: 90px;
  height: 50px;
      margin-top: 100px;
      margin-right: -5px;
}
    
     .logo2 {
      
   transition: all 5s;
      width: 90px;
  height: 50px;
      margin-top: 100px;
         margin-right: 195px;
   
}


.homebtn .logo {
  position: absolute;
  top: -100px;
  right: 100%;
  z-index: 2;
  transform: translate(100%);
}
    
    .homebtn .logo2 {
  position: absolute;
  top: -100px;
  right: 100%;
  z-index: 2;
  transform: translate(100%);
}


  
   .containers{
    width: 80px;
    height: 50px;
    top: 50%;
    left: 20%;
    
}
    
   .butlogout
    {
        left: 110px;
    }
    
    .butpro:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 30px;
    top: 20px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.butpro:hover::before{
    margin: 5px;
    width: 60%;
    
    
}
    
  .butpro:hover
{
    color:#2f2e40;
}

.butpro
{
  right: 145px;
    width:20%;
    font-size: 10px;
    font-weight: 900;
}

.butpro font
{
    position: relative;
  left: 10px;
  
}
 #micon {
 
  width: 25px;
 
} 
   #iconprof
{
   margin-left:-22px; 
 height:25px;
    width: 30px;
    margin-top: -20px;
} 
    
.titlepost
    {
          font-size: 19px;
    }
    .post-info
    {
        font-size: 10px;
    }
      .npost p
    {
         font-size: 11px;
    }
#picpost
    {
    
       height: 300px;
    }
    
    .videoplayer
    {
        width: 100%;
        
    }
    
        
blockquote 
    {
        
 width:100%;
    }
    
    iframe
    {
         width: 100%;
       
    } 
    .section1
    {
         width: 100%;
         height: 350px;
    }
   .section1 .imgslid
    {
        height: 300px;
        
    }
    .bottom-sidbar h2
    {
       font-size: 20px; 
    }
    
    .row {
      
        font-size: 7px;
        height: 600px;
        direction: rtl;
    }
    
  
        .maylike .maylike-img>img {
   
       width:100%;
    height:150px;
    }
    
    .maylike
    {
         width: 96%;
    height: 150px;
    }
    .maylike .maylike-body .cta-btn {
   
        top: 90px;
        right: 180px;
    
    }

    
    .maylike .maylike-body h3 {
        color: #FFF;
            text-align:center;
       font-size: 9px;
        position: absolute;
        top: -7px;
        right: 80px;
        width: 150px;
    }
    
    .titlechamp
    {
        width: 270px;
    }
    

    
     .titlechamp h1 {
        right: 80px;
    }
    
     .box {
       right: 90px;
    }
    
    .box span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        transform: rotateY(calc(var(--i)* 47deg)) translateZ(120px);
        -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, rgba(4, 4, 4, 0.267));
    }
           
      .depart
    {
        font-size: 8px;
        bottom: 50px;
    }
     .depart2
    {
        font-size: 8px;
          bottom: 62px;
        right: 47px;
    }
     .depart3
    {
        font-size: 8px;
       bottom: 122px;
        right: 112px;
    }
     .depart4
    {
        font-size: 8px;
        bottom: 170px;
        right: 170px;
        width: 63px;
    }
      .depart5
    {
        font-size: 8px;
        bottom: 170px;
        right: 170px;
        width: 65px;
    }
      .ulicon
    {
       top: 40px;
        right: 30px;
        
    }
      .ulicon
    {
       bottom: -5px;
        right: 55px;
        
    }
    
      .ulicon li a
    {
        width: 15px;
        height:  15px;
    }
    
    .ulicon2
    {
         top: 5px;
        right: 0px;
    }
    
      .ulicon2 li a
    {
        width: 25px;
        height:  25px;
    }
    
        .ulicon2 li:nth-child(1) a .fa-brands {
            font-size: 16px;
    padding-top:3px;
}
        .ulicon2 li:nth-child(2) a .fa-brands {
            font-size: 16px;
    padding-top:3px;
}
        .ulicon2 li:nth-child(3) a .fa-brands {
            font-size: 16px;
    padding-top:3px;
}
    .ulicon2 li:nth-child(4) a .fa-brands {
        font-size: 16px;
    padding-top:3px;
}
    .ulicon2 li:nth-child(5) a .fa-brands {
        font-size: 16px;
    padding-top:3px;
}
    
    .h2icon
    {
        right: 120px;
        font-size: 15px;
        top: 45px;
        
    }
    
      .copy
    {
        bottom: 100px;
        right: 20px;
        font-size: 9px;
        width: 193px;
    }
    
        .showing {
        padding-bottom: 250%;
    }
   
    
    .slide {
        width: 40%;
        left: -12px;
        top:20px;
        margin-bottom: 30px;
    }
   section.slider .title {
        font-size: 22px;
        top: -15px;
        left: 30%;
    }
    
    section.slider .title2 {
        font-size: 22px;
        top: -14px;
         left: 105%;
        
    }
    
    section.slider .title3 {
        font-size: 22px;
        top: -14px;
         left: 180%;
    }
    
         button.slider__button {
      width: 40px;
             height: 40px;
        right: 410px;
        top: -18px;
    }
    button.slider__button:before {
    
    height: 20px;
    width: 20%;
    left: 7px;
    top: 2px;
   
}
    
    button.slider__button:after {
   
    height: 20px;
    width: 20%;
    left: 7px;
    bottom: 8px;
   
}
        button.slider__button2 {
     width: 40px;
             height: 40px;
        right: 255px;
        top: -18px;
    }
    
    button.slider__button2:before {
   
    height: 20px;
    width: 20%;
    left: 12px;
    top: 2px;

}
   button.slider__button2:after {
 
    height: 20px;
    width: 20%;
    left: 12px;
    bottom: 8px;
  
}
 .btn1
    {
        width: 65px;
        font-size: 8px;
    }   
    
}

@media only screen and (min-width: 281px) and (max-width: 320px)
{ 
     .seh
    {
        width: 170px;
        right: -120px;
    }
    .btn
    {
       bottom: 28px;
        right: 60px;
    }
    
    .containers
    {
       right: 118px;
    }
    
     .mainheader nav ul #fot
    {
      left: 170px;
     
    }
    .mainheaderf nav , .mainheaderb nav , .mainheaderw nav
    {
        right: -8px;
       width:265px; 
    }
      .mainheaderf nav li , .mainheaderb nav li
    {
      
       width:60px; 
    }
      .mainheaderw nav li
    {
      
        width:50px; 
    }
    .asizef,.asizeb
    {
        font-size: 10px;
        
    }
        .mainheaderf nav li #icon, .mainheaderb nav li #icon
    {
      width: 50px;
       left: 15px;
        bottom: 6px;
    }
      .mainheaderw nav li #icon
    {
        width: 50px;
       left: 17px; 
        bottom: 6px;
    }
    
    .top-sidbar, .middle-sidbar, .bottom-sidbar{
     width: 94%;
   margin: 2% 0 2% 0%;
    padding: 2% 3%;
    font-size: 13px;
}
    
   .butlogout
    {
        left: 120px;
    }
    
    .butpro:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 40px;
    top: 25px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.butpro:hover::before{
    margin: 5px;
    width: 55%;
    
    
}
    
  .butpro:hover
{
    color:#2f2e40;
}

.butpro
{
  right: 175px;
    width:20%;
    font-size: 10px;
    font-weight: 900;
}

.butpro font
{
    position: relative;
  left: 10px;
  
}
   #iconprof
{
   margin-left:-22px; 
 height:25px;
    width: 30px;
    margin-top: -2px;
} 
    #micon {

  width: 25px;

}
.titlepost
    {
          font-size: 23px;
    }
    .post-info
    {
        font-size: 7px;
    }
    #iconpost
    {
  width: 20px;
  height: 20px;
   top:8px;     
    }
#picpost
    {
        width: 100%;
       height: 300px;
    }
    
   
    .section1
    {
         width: 100%;
    }
    
      .row {
      
        font-size: 9px;
        height: 600px;
        
    }
    
  
        .maylike .maylike-img>img {
   
       width:100%;
    height:150px;
    }
    
    .maylike
    {
         width: 96%;
    height: 150px;
    }
    .maylike .maylike-body .cta-btn {
   
        top: 90px;
        right: 180px;
     width: 40%;
    }
    
     .maylike .maylike-body h3 {
        color: #FFF;
            text-align:center;
       font-size: 9px;
        position: absolute;
        top: -7px;
        right:100px;
        width: 150px;
    }
    
    .titlechamp
    {
        width: 300px;
    }
    
      .titlechamp
    {
        width: 300px;
    }
    
     .titlechamp h1 {
        right: 100px;
    }
    
    .box span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        transform: rotateY(calc(var(--i)* 40deg)) translateZ(140px);
        -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, rgba(4, 4, 4, 0.267));
    }
           
    .depart
    {
            bottom: 100px;
        bottom: 55px;
    }
     .depart2
    {
          bottom: 68px;
         width: 65px
    }
     .depart3
    {
      bottom: 136px;
         width: 60px;
        margin-right: 8px;
    }
     .depart4
    {
        bottom: 190px;
        margin-right: 25px;
        width: 70px;
    }
    
     .depart5
    {
        bottom: 190px;
        margin-right: 25px;
        width: 70px;
    }
      .ulicon
    {
       top: 50px;
        right: 120px;
        
    }
    
      .ulicon li a
    {
        width: 20px;
        height:  20px;
    }
    
       .ulicon li a:after
    {
        left: -6px;
        height:  10px;
    }
    .ulicon li a:before
    {
        left: -11px;
       top: 6px;
        height: 19px;
    }
    .ulicon2
    {
         top: 5px;
        
    }
    
      .ulicon2 li a
    {
        width: 30px;
        height:  30px;
    }
    
        .ulicon2 li:nth-child(1) a .fa-brands {
    padding-top:3px;
}
        .ulicon2 li:nth-child(2) a .fa-brands {
    padding-top:3px;
}
        .ulicon2 li:nth-child(3) a .fa-brands {
    padding-top:3px;
}
    .ulicon2 li:nth-child(4) a .fa-brands {
    padding-top:3px;
}
    
    .h2icon
    {
        right:190px;
        font-size: 15px;
        top: 40px;
        
    }
    
    .copy
    {
     bottom: 120px;
    right: 60px;
    font-size: 10px;
    width: 214px;
    }
    
        .showing {
        padding-bottom: 210%;
    }
   
    
    .slide {
        width: 40%;
        left: 10px;
        top:20px;
        margin-bottom: 30px;
    }
  section.slider .title {
    font-size: 1rem;
    top: -15px;
    left:80px;
}
    
    section.slider .title2 {
       font-size: 1.5rem;
        top: -10px;
         left: 100px;
        
    }
    
    section.slider .title3 {
       font-size: 1.5rem;
        top: -10px;
       left: 110px;
    }
    
         button.slider__button {
      
        right: 390px;
        top: -17px;
    }
        button.slider__button2 {
     
        right: 220px;
        top: -17px;
    }
    .btn1
    {
        width: 80px;
        font-size: 11px;
    }
}
@media only screen and (min-width: 321px) and (max-width: 360px)
{
     .seh {
        right: -135px;
        top: 55px;
        width: 200px;
    }
     .btn {
        right: 75px;
        bottom: -16px;
       
    }
    
    .mainheader nav ul #fot
    {
      left: 200px;
     
    }
    .mainheaderf nav , .mainheaderb nav , .mainheaderw nav
    {
        right: -2px;
       width:310px; 
    }
      .mainheaderf nav li , .mainheaderb nav li
    {
      
       width:75px; 
    }
      .mainheaderw nav li
    {
      
       width:65px; 
    }
  
        .mainheaderf nav li #icon, .mainheaderb nav li #icon
    {
      
       left: 14px;
        bottom: 6px;
    }
      .mainheaderw nav li #icon
    {
      
       left: 14px;
        bottom: 6px;
    }
     
  .butlogout
    {
        left: 140px;
    }
    .butpro:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 35px;
    top: 20px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.butpro:hover::before{
    margin: 5px;
    width: 60%;
    
    
}
    
  .butpro:hover
{
    color:#2f2e40;
}

.butpro
{
  right: 190px;
    width:22%;
    font-size: 13px;
    font-weight: 900;
}
    
.butpro font
{
    position: relative;
  left: 10px;
   bottom: 5px;
}

    #iconprof
{
   margin-left:-24px; 
 height:30px;
    width: 35px;
    margin-top: -25px;
} 
    
.titlepost
    {
          font-size: 21px;
    }
    .post-info
    {
        font-size: 7px;
    }
    #iconpost
    {
        width: 30px;
       height: 20px;
        top: 8px;
    }
#picpost
    {
        width: 100%;
        height: 300px;
    }
    
    .videoplayer
    {
        width: 100%;
      
    }
    
     iframe
    {
           width: 100%;
       
    } 
    .section1
    {
         width: 100%;
    }
    
       .row {
      
        font-size: 9px;
        height: 600px;
        
    }
    
  
        .maylike .maylike-img>img {
   
       width:100%;
    height:150px;
    }
    
    .maylike
    {
         width: 96%;
    height: 150px;
    }
    .maylike .maylike-body .cta-btn {
   
        top: 90px;
        right: 200px;
     width: 40%;
    }
    
     .maylike .maylike-body h3 {
        color: #FFF;
            text-align:center;
       font-size: 10px;
        position: absolute;
        top: -7px;
        right:120px;
        width: 150px;
    }
    
    .titlechamp
    {
        width: 340px;
    }
    
     
    
     .titlechamp h1 {
        right: 110px;
    }
    
    .box span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        transform: rotateY(calc(var(--i)* 40deg)) translateZ(140px);
        -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, rgba(4, 4, 4, 0.267));
    }
    #micon {
 
  width: 24px;
 
    }
           
    .depart
    {
        
        bottom: 55px;
    }
     .depart2
    {
          bottom: 68px;
        margin-right: 20px;
        width: 65px;
    }
     .depart3
    {
       bottom: 136px;
        margin-right: 30px;
        width: 60px;
    }
     .depart4
    {
        bottom: 190px;
        margin-right: 50px;
        width: 65px;
    }
    
    .depart5
    {
        bottom: 190px;
        margin-right: 50px;
        width: 70px;
    }
     .ulicon
    {
       top: 45px;
        right: 150px;
        
    }
    
      .ulicon li a
    {
        width: 20px;
        height:  20px;
    }
       .ulicon li a:after
    {
        left: -6px;
        height:  10px;
    }
    .ulicon li a:before
    {
        left: -11px;
       top: 6px;
        height: 19px;
    }
    
    .ulicon2
    {
         top: 5px;
         right: 30px;
         
    }
    
      .ulicon2 li a
    {
        width: 30px;
        height:  30px;
    }
    
        .ulicon2 li:nth-child(1) a .fa-brands {
    padding-top:3px;
}
        .ulicon2 li:nth-child(2) a .fa-brands {
    padding-top:3px;
}
        .ulicon2 li:nth-child(3) a .fa-brands {
    padding-top:3px;
}
    .ulicon2 li:nth-child(4) a .fa-brands {
    padding-top:3px;
}
    
     .h2icon
    {
       right: 220px;
        font-size: 15px;
        top: 30px;
        
    }
    
   .copy
    {
        bottom: 120px;
        right: 85px;
        font-size: 10px;
        width: 214px;
    }
    
        .showing {
        padding-bottom: 200%;
    }
   
    
    .slide {
        width: 40%;
        left: 24px;
        top: 10px;
         margin-bottom: 30px;
    }
   section.slider .title {
        font-size: 1.2rem;
        top: -20px;
         left: 90px;
    }
    
    section.slider .title2 {
        font-size: 1.5rem;
        top: -15px;
          left: 120px;
        
    }
    
    section.slider .title3 {
        font-size: 1.5rem;
        top: -14px;
          left: 130px;
    }
    
         button.slider__button {
      
        right: 390px;
        top: -17px;
    }
        button.slider__button2 {
     
        right: 181px;
        top: -17px;
    }
    
    
    .wrapper .cont ul {
   
    font-size: 15px;
    }
    
 }

/*---------Between (321px) and (360px)----------------*/

@media only screen and (min-width: 353px) and (max-width: 360px)
{
    
    #iconprof
{
   
    margin-top: -7px;
} 
    
}

/*---------Between (321px) and (360px)----------------*/

@media only screen and (min-width: 361px) and (max-width: 375px)
{ 
 .seh {
        right: -150px;
        top: 60px;
        width: 230px;
    }
     .btn {
        right: 90px;
        bottom: -22px;
        
    }
    
   .butlogout
    {
        left: 135px;
    }
    
    .butpro:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 40px;
    top: 23px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.butpro:hover::before{
    margin: 5px;
    width: 60%;
    
    
}
    
  .butpro:hover
{
    color:#2f2e40;
}

.butpro
{
  right: 210px;
    width:22%;
    font-size: 13px;
    font-weight: 900;
}
   .butpro font
     {
         position: relative;
         bottom: 3px;
         left: 11px;
     }       
    
.mainheader nav ul #fot
    {
      left: 210px;
     
    }
    .mainheaderf nav , .mainheaderb nav , .mainheaderw nav
    {
        right: -2px;
       width:330px; 
    }
    #micon {
  width: 25px;
}
   #iconprof
{
   margin-left:-22px; 
 height:30px;
    width: 35px;
    margin-top: -7px;
} 


    
.titlepost
    {
          font-size: 19px;
    }
     #iconpost
    {
        width: 30px;
       height: 20px;
        top: 8px;
    }
    .post-info
    {
        font-size: 8px;
    }
#picpost
    {
        width: 100%;
       height: 300px;
    }
    
    .videoplayer
    {
        width: 100%;
      
    }
    
     iframe
    {
            width: 100%;
      
    } 
    .section1
    {
         width: 100%;
    }
    
       .row {
      
        font-size: 9px;
        height: 600px;
        
    }
    
  
        .maylike .maylike-img>img {
   
       width:100%;
    height:150px;
    }
    
    .maylike
    {
         width: 96%;
    height: 150px;
    }
    .maylike .maylike-body .cta-btn {
   
        top: 90px;
        right: 220px;
     width: 40%;
    }
    
     .maylike .maylike-body h3 {
        color: #FFF;
            text-align:center;
       font-size: 10px;
        position: absolute;
        top: -7px;
        right:130px;
        width: 150px;
    }
    
    .titlechamp
    {
        width: 355px;
    }
    
    
    
     .titlechamp h1 {
        right: 130px;
    }
    
    .box
    {
        width: 100px;
    }
    .box span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        transform: rotateY(calc(var(--i)* 45deg)) translateZ(140px);
        -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, rgba(4, 4, 4, 0.267));
    }
           
      .depart
    {
        
        bottom: 55px;
    }
     .depart2
    {
          bottom: 68px;
        margin-right: 20px;
        width: 65px;
    }
     .depart3
    {
       bottom: 136px;
        margin-right: 30px;
        width: 60px;
    }
     .depart4
    {
        bottom: 190px;
        margin-right: 50px;
        width: 65px;
    }
    
    .depart5
    {
        bottom: 190px;
        margin-right: 50px;
        width: 70px;
    }
     .ulicon
    {
       top: 45px;
        right: 150px;
        
    }
      .ulicon li a
    {
        width: 20px;
        height:  22px;
    }
       .ulicon li a:after
    {
        left: -6px;
        height:  10px;
    }
    .ulicon li a:before
    {
        left: -11px;
       top: 6px;
        height: 21px;
    }
    
    .ulicon2
    {
         top: 5px;
         right: 50px;
    }
    
      .ulicon2 li a
    {
        width: 30px;
        height:  30px;
    }
    
        .ulicon2 li:nth-child(1) a .fa-brands {
    padding-top:3px;
}
        .ulicon2 li:nth-child(2) a .fa-brands {
    padding-top:3px;
}
        .ulicon2 li:nth-child(3) a .fa-brands {
    padding-top:3px;
}
    .ulicon2 li:nth-child(4) a .fa-brands {
    padding-top:3px;
}
    
    .h2icon
    {
       right: 220px;
        font-size: 15px;
        top: 30px;
        
    }
    
   .copy
    {
        bottom: 120px;
        right: 85px;
        font-size: 10px;
        width: 214px;
    }
    
        .showing {
        padding-bottom: 200%;
    }
   
    
    .slide {
        width: 40%;
        left: 32px;
        top: 10px;
         margin-bottom: 30px;
    }
    .slide_content
    {
        width: 67%;
    }
    
    section.slider .title {
         font-size: 1.2rem;
        top: -20px;
        left: 98px;
    }
    
    section.slider .title2 {
        font-size: 1.5rem;
        top: -14px;
         left: 130px;
        
    }
    
    section.slider .title3 {
        font-size: 1.5rem;
        top: -14px;
         left: 140px;
    }
    
         button.slider__button {
      
        right: 390px;
        top: -16px;
    }
        button.slider__button2 {
     
        right: 168px;
        top: -16px;
    } 
}

@media only screen and (min-width: 376px) and (max-width: 384px)
{    
    .seh {
        right: -150px;
        top: 60px;
        width: 240px;
    }
     .btn {
        right: 100px;
        bottom: -22px;
        
    }
    
   .butlogout
    {
        left: 140px;
    }
    
    .butpro:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 40px;
    top: 25px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.butpro:hover::before{
    margin: 5px;
    width: 60%;
    
    
}
    
  .butpro:hover
{
    color:#2f2e40;
}

.butpro
{
  right: 210px;
    width:22%;
    font-size: 13px;
    font-weight: 900;
}
    
.mainheader nav ul #fot
    {
      left: 210px;
     
    }
    .mainheaderf nav , .mainheaderb nav , .mainheaderw nav
    {
        right: -2px;
       width:330px; 
    }
   #iconprof
{
   margin-left:-22px; 
 height:30px;
    width: 35px;
    margin-top: -7px;
} 

#micon {
  
  width: 25px;
  
}
    
.titlepost
    {
          font-size: 21px;
    }
    .post-info
    {
        font-size: 8px;
    }
     #iconpost {
  width: 30px;
  height: 20px;
  top: 8px;
    }
#picpost
    {
        width: 100%;
       height: 300px;
    }
    
    .videoplayer
    {
        width: 100%;
       
    }
    
     iframe
    {
           width: 100%;
       
    } 
    
    .section1
    {
         width: 100%;
    }
    
       .row {
      
        font-size: 9px;
        height: 600px;
        
    }
    
  
        .maylike .maylike-img>img {
   
       width:100%;
    height:150px;
    }
    
    .maylike
    {
         width: 96%;
    height: 150px;
    }
    .maylike .maylike-body .cta-btn {
   
        top: 90px;
        right: 220px;
     width: 40%;
    }
    
     .maylike .maylike-body h3 {
        color: #FFF;
            text-align:center;
       font-size: 10px;
        position: absolute;
        top: -7px;
        right:140px;
        width: 150px;
    }
    
    .titlechamp
    {
        width: 363px;
    }
    
    
    
     .titlechamp h1 {
        right: 130px;
    }
    
    .box
    {
        width: 100px;
    }
    .box span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        transform: rotateY(calc(var(--i)* 45deg)) translateZ(140px);
        -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, rgba(4, 4, 4, 0.267));
    }
           
    .depart
    {
        
        bottom: 55px;
    }
     .depart2
    {
          bottom: 68px;
        margin-right: 20px;
        width: 65px;
    }
     .depart3
    {
       bottom: 136px;
        margin-right: 40px;
        width: 60px;
    }
     .depart4
    {
        bottom: 190px;
        margin-right: 80px;
        width: 65px;
    }
    
    .depart5
    {
        bottom: 190px;
        margin-right: 80px;
        width: 70px;
    }
     .ulicon
    {
       top: 45px;
        right: 180px;
        
    }
    
      .ulicon li a
    {
        width: 20px;
        height:  22px;
    }
    
        .ulicon li a:after
    {
        left: -6px;
        height:  10px;
    }
    .ulicon li a:before
    {
        left: -11px;
       top: 6px;
        height: 20.6px;
    }
    
    .ulicon2
    {
         top: 5px;
         right: 60px;
    }
    
      .ulicon2 li a
    {
        width: 30px;
        height:  30px;
    }
    
        .ulicon2 li:nth-child(1) a .fa-brands {
    padding-top:3px;
}
        .ulicon2 li:nth-child(2) a .fa-brands {
    padding-top:3px;
}
        .ulicon2 li:nth-child(3) a .fa-brands {
    padding-top:3px;
}
    .ulicon2 li:nth-child(4) a .fa-brands {
    padding-top:3px;
}
    
     .h2icon
    {
       right: 250px;
        font-size: 15px;
        top: 30px;
        
    }
    
   .copy
    {
        bottom: 120px;
        right: 100px;
        font-size: 10px;
        width: 214px;
    }
    
        .showing {
        padding-bottom: 170%;
    }
   
    
    .slide {
        width: 40%;
        left: 34px;
    }
    .slide_content
    {
        width: 67%;
    }
    
    .slide_content p {

    margin-right: 20px;
 
    }
   section.slider .title {
        font-size: 1.2rem;
        top: -20px;
        left: 105px;
    }
    
    section.slider .title2 {
        font-size: 1.5rem;
        top: -15px;
        left: 125px;
        
    }
    
    section.slider .title3 {
        font-size: 1.5rem;
        top: -15px;
        left: 135px;
    }
    
         button.slider__button {
      
        right: 390px;
        top: -16px;
    }
        button.slider__button2 {
     
        right: 160px;
        top: -16px;
    }
.btn1
    {
        width: 98px;
    }
}
@media only screen and (min-width: 385px) and (max-width: 390px)
{ 
 .seh {
        right: -150px;
        top: 60px;
        width: 230px;
    }
     .btn {
        right: 90px;
        bottom: -22px;
    }
    
      .mainheader nav ul #fot
    {
      left: 210px;
     
    }
    .mainheaderf nav , .mainheaderb nav , .mainheaderw nav
    {
        right: -1px;
       width:335px; 
    }
    
   .butlogout
    {
        left: 145px;
    }
    
    .butpro:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 35px;
    top: 20px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.butpro:hover::before{
    margin: 5px;
    width: 60%;
    
    
}
    
  .butpro:hover
{
    color:#2f2e40;
}

.butpro
{
  right: 215px;
    width:20%;
    font-size: 13px;
    font-weight: 900;
}

.butpro font
{
    position: relative;
  left: 10px;
   bottom: 5px;
}
    #micon {
 
  width: 25px;
 
} 
   #iconprof
{
   margin-left:-22px; 
 height:30px;
    width: 35px;
    margin-top: -7px; 
} 
    
.titlepost
    {
          font-size: 21px;
    }
    .post-info
    {
        font-size: 8px;
    }
    #iconpost {
  width: 30px;
  height: 20px;
  top: 8px;
    }
#picpost
    {
        width: 100%;
        height: 300px;
    }
    
    .videoplayer
    {
        width: 100%;
        
    }
    
     iframe
    {
           width: 100%;
    
    } 
    .section1
    {
         width: 100%;
    }
    
    .row {
      
        font-size: 9px;
        height: 600px;
        
    }
    
  
        .maylike .maylike-img>img {
   
       width:100%;
    height:150px;
    }
    
    .maylike
    {
         width: 96%;
    height: 150px;
    }
    .maylike .maylike-body .cta-btn {
   
        top: 90px;
        right: 225px;
     width: 40%;
    }
    
     .maylike .maylike-body h3 {
        color: #FFF;
            text-align:center;
       font-size: 10px;
        position: absolute;
        top: -7px;
        right:140px;
        width: 155px;
    }
    
      .titlechamp
    {
        width: 370px;
    }
    
     .titlechamp h1 {
        right: 130px;
    }
    
    .box span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        transform: rotateY(calc(var(--i)* 40deg)) translateZ(140px);
        -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, rgba(4, 4, 4, 0.267));
    }
           
    .depart
    {
        
        bottom: 55px;
    }
     .depart2
    {
          bottom: 68px;
        margin-right: 20px;
        width: 65px;
    }
     .depart3
    {
       bottom: 136px;
        margin-right: 40px;
        width: 60px;
    }
     .depart4
    {
        bottom: 190px;
        margin-right: 80px;
        width: 65px;
    }
    
    .depart5
    {
        bottom: 190px;
        margin-right: 80px;
        width: 70px;
    }
     .ulicon
    {
       top: 45px;
        right: 180px;
        
    }
    
      .ulicon li a
    {
        width: 20px;
        height:  20px;
    }
    
     .ulicon li a:after
    {
        left: -6px;
        height:  10px;
    }
    .ulicon li a:before
    {
        left: -11px;
       top: 6px;
        height: 18.8px;
    }
    
    .ulicon2
    {
         top: 5px;
         right: 60px;
    }
    
      .ulicon2 li a
    {
        width: 30px;
        height:  30px;
    }
    
        .ulicon2 li:nth-child(1) a .fa-brands {
    padding-top:3px;
}
        .ulicon2 li:nth-child(2) a .fa-brands {
    padding-top:3px;
}
        .ulicon2 li:nth-child(3) a .fa-brands {
    padding-top:3px;
}
    .ulicon2 li:nth-child(4) a .fa-brands {
    padding-top:3px;
}
    
    .h2icon
    {
       right: 250px;
        font-size: 15px;
        top: 30px;
        
    }
    
   .copy
    {
        bottom: 120px;
        right: 100px;
        font-size: 10px;
        width: 214px;
    }
    
        .showing {
        padding-bottom: 165%;
    }
   
    
    .slide {
        width: 40%;
        left: 34px;
        top: 10px;
        margin-bottom: 10px;
    }
    section.slider .title {
        font-size: 1.2rem;
        top: -17px;
        left: 105px;
    }
    
    section.slider .title2 {
        font-size: 1.5rem;
        top: -12px;
        left: 125px;
        
    }
    
    section.slider .title3 {
        font-size: 1.5rem;
        top: -12px;
        left: 135px;
    }
    
       .slide_content
    {
        width: 67%;
    }
    
    .slide_content p {

    margin-right: 20px;
 
    } 
          button.slider__button {
      
        right: 390px;
        top: -16px;
    }
        button.slider__button2 {
     
        right: 160px;
        top: -16px;
    }
    
    
    
    
      
    
    .btn1
    {
        width: 100px;
    }
}
@media only screen and (min-width: 391px) and (max-width: 393px)
{   
    .seh {
        right: -150px;
        top: 60px;
        width: 230px;
    }
     .btn {
        right:90px;
        bottom: -22px;
       
    }
    
     .mainheader nav ul #fot
    {
      left: 210px;
     
    }
    .mainheaderf nav , .mainheaderb nav , .mainheaderw nav
    {
        right: -1px;
       width:335px; 
    }
    
    .butlogout
    {
        left: 140px;
    }
    
    .butpro:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
     left: 35px;
    top: 20px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.butpro:hover::before{
    margin: 5px;
    width: 60%;
    
    
}
    
  .butpro:hover
{
    color:#2f2e40;
}

.butpro
{
  right: 220px;
    width:20%;
    font-size: 13px;
    font-weight: 900;
}

.butpro font
{
    position: relative;
  left: 10px;
   bottom: 5px;
}
    
   #iconprof
{
   margin-left:-22px; 
 height:30px;
    width: 35px;
    margin-top: -7px; 
} 
   
.titlepost
    {
          font-size: 21px;
    }
    .post-info
    {
        font-size: 8px;
    }
    #iconpost {
  width: 30px;
  height: 20px;
  top: 8px;
    }
#picpost
    {
        width: 100%;
        height: 300px;
    }
    
    .videoplayer
    {
        width: 100%;
       
    }
    
    iframe
    {
           width: 100%;
       
    } 
    .section1
    {
         width: 100%;
    }
    
    .row {
      
        font-size: 9px;
        height: 600px;
        
    }
    
  
        .maylike .maylike-img>img {
   
       width:100%;
    height:150px;
    }
    
    .maylike
    {
         width: 96%;
    height: 150px;
    }
    .maylike .maylike-body .cta-btn {
   
        top: 90px;
        right: 225px;
     width: 40%;
    }
    
     .maylike .maylike-body h3 {
        color: #FFF;
            text-align:center;
       font-size: 10px;
        position: absolute;
        top: -7px;
        right:140px;
        width: 155px;
    }

      .titlechamp
    {
        width: 370px;
    }
    
     .titlechamp h1 {
        right: 130px;
    }
    
    .box span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        transform: rotateY(calc(var(--i)* 40deg)) translateZ(140px);
        -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, rgba(4, 4, 4, 0.267));
    }
           
     .depart
    {
        
        bottom: 55px;
    }
     .depart2
    {
          bottom: 68px;
        margin-right: 20px;
        width: 65px;
    }
     .depart3
    {
       bottom: 136px;
        margin-right: 40px;
        width: 60px;
    }
     .depart4
    {
        bottom: 190px;
        margin-right: 80px;
        width: 65px;
    }
    
    .depart5
    {
        bottom: 190px;
        margin-right: 80px;
        width: 70px;
    }
     .ulicon
    {
       top: 45px;
        right: 180px;
        
    }
    
      .ulicon li a
    {
        width: 20px;
        height:  20px;
    }
    
    .ulicon li a:after
    {
        left: -6px;
        height:  10px;
    }
    .ulicon li a:before
    {
        left: -11px;
       top: 6px;
        height: 18.8px;
    }
    .ulicon2
    {
         top: 5px;
         right: 60px;
       
    }
    
      .ulicon2 li a
    {
        width: 30px;
        height:  30px;
    }
    
        .ulicon2 li:nth-child(1) a .fa-brands {
    padding-top:3px;
}
        .ulicon2 li:nth-child(2) a .fa-brands {
    padding-top:3px;
}
        .ulicon2 li:nth-child(3) a .fa-brands {
    padding-top:3px;
}
    .ulicon2 li:nth-child(4) a .fa-brands {
    padding-top:3px;
}
    
   .h2icon
    {
       right: 250px;
        font-size: 15px;
        top: 30px;
        
    }
    
   .copy
    {
        bottom: 120px;
        right: 100px;
        font-size: 10px;
        width: 214px;
    }
    
        .showing {
        padding-bottom: 165%;
    }
   
    
    .slide {
        width: 40%;
        left: 34px;
        top: 10px;
        margin-bottom: 10px;
    }
 
    section.slider .title {
        font-size: 1.2rem;
        top: -17px;
        left: 105px;
    }
    
    section.slider .title2 {
        font-size: 1.5rem;
        top: -12px;
        left: 125px;
        
    }
    
    section.slider .title3 {
        font-size: 1.5rem;
        top: -12px;
        left: 135px;
    }
    
       .slide_content
    {
        width: 67%;
    }
    
    .slide_content p {

    margin-right: 20px;
 
    } 
      button.slider__button {
      
        right: 390px;
        top: -16px;
    }
        button.slider__button2 {
     
        right: 160px;
        top: -16px;
    }
.btn1
    {
        width: 100px;
    }
    
    .wrapper .cont ul {
   
    font-size: 18px;
 
}
}
@media only screen and (min-width: 394px) and (max-width: 412px)
{
         .seh {
        right: -160px;
        top: 100px;
        width: 250px;
    }
     .btn {
        right: 100px;
        bottom: -62px;
       
    }

      .butlogout
    {
        left: 160px;
    }
    
    .butpro:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 50px;
    top: 20px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.butpro:hover::before{
    margin: 5px;
    width: 60%;
    
    
}
    
  .butpro:hover
{
    color:#2f2e40;
}
    

.butpro
{
  right: 220px;
    width:25%;
    font-size: 14px;
    font-weight: 900;
}
    
  .butpro font
{
    position: relative;
 bottom: 5px;
    left: 10px;
}  

 .mainheader nav ul #fot
    {
      left: 220px;
     
    }
    .mainheaderf nav , .mainheaderb nav , .mainheaderw nav
    {
        right: -1px;
       width:350px; 
    }
   #iconprof
{
   margin-left:-22px; 
 height:30px;
    width: 40px;
    margin-top: -7px;
} 
    
.titlepost
    {
          font-size: 22px;
    }
    .post-info
    {
        font-size: 9px;
    }
     #iconpost {
  width: 30px;
  height: 20px;
  top: 8px;
    }
#picpost
    {
        width: 100%;
        height: 300px;
    }
    
    .videoplayer
    {
        width: 100%;
       
    }
    
    iframe
    {
           width: 100%;
        
    } 
    
    .section1
    {
         width: 100%;
    }
    
    .row {
      
        font-size: 9px;
        height: 670px;
        
    }
    
  
        .maylike .maylike-img>img {
   
       width:100%;
    height:170px;
    }
    
    .maylike
    {
         width: 96%;
    height: 170px;
    }
    .maylike .maylike-body .cta-btn {
   
        top: 90px;
        right: 235px;
     width: 40%;
    }
    
     .maylike .maylike-body h3 {
        color: #FFF;
            text-align:center;
       font-size: 11px;
        position: absolute;
        top: -7px;
        right:150px;
        width: 170px;
    }
    
    .titlechamp
    {
        width: 385px;
    }
    
    
    
     .titlechamp h1 {
        right: 140px;
    }
    
    .box
    {
        width: 130px;
        right: 120px;
    }
    .box span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        transform: rotateY(calc(var(--i)* 45deg)) translateZ(170px);
        -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, rgba(4, 4, 4, 0.267));
    }
           
    .depart
    {
        
        bottom: 55px;
    }
     .depart2
    {
          bottom: 68px;
        margin-right: 20px;
        width: 65px;
    }
     .depart3
    {
       bottom: 136px;
        margin-right: 40px;
        width: 60px;
    }
     .depart4
    {
        bottom: 190px;
        margin-right: 80px;
        width: 65px;
    }
    
    .depart5
    {
        bottom: 190px;
        margin-right: 80px;
        width: 70px;
    }
     .ulicon
    {
       top: 45px;
        right: 180px;
        
    }
    
      .ulicon li a
    {
        width: 20px;
        height:  20px;
    }
     .ulicon li a:after
    {
        left: -6px;
        height:  10px;
    }
    .ulicon li a:before
    {
        left: -11px;
       top: 6px;
        height: 18.8px;
    }
    
    .ulicon2
    {
         top: 5px;
          right: 70px;
    }
    
      .ulicon2 li a
    {
        width: 30px;
        height:  30px;
    }
    
        .ulicon2 li:nth-child(1) a .fa-brands {
    padding-top:3px;
}
        .ulicon2 li:nth-child(2) a .fa-brands {
    padding-top:3px;
}
        .ulicon2 li:nth-child(3) a .fa-brands {
    padding-top:3px;
}
    .ulicon2 li:nth-child(4) a .fa-brands {
    padding-top:3px;
}
    
     .h2icon
    {
       right: 250px;
        font-size: 15px;
        top: 30px;
        
    }
    
   .copy
    {
        bottom: 120px;
        right: 100px;
        font-size: 10px;
        width: 214px;
    }
    
        .showing {
        padding-bottom: 175%;
    }
   
    
    .slide {
        width: 40%;
        left: 45px;
    }

    section.slider .title {
        font-size: 1.2rem;
        top: -17px;
        left: 115px;
    }
    
    section.slider .title2 {
        font-size: 1.5rem;
        top: -14px;
        left: 135px;
        
    }
    
    section.slider .title3 {
        font-size: 1.5rem;
        top: -14px;
        left: 145px;
    }
    
         button.slider__button {
      
        right: 390px;
        top: -16px;
    }
        button.slider__button2 {
     
        right: 138px;
        top: -16px;
    }
    
    .btn1
    {
        width: 105px;
    }
    
    .wrapper .cont ul {
   
    font-size: 18px;
 
}
 }
@media only screen and (min-width: 413px) and (max-width: 414px)
{ 
        .seh {
        right: -160px;
        top: 60px;
        width: 250px;
    }
     .btn {
        right: 100px;
        bottom: -22px;
     
    }

      .butlogout
    {
        left: 160px;
    }
    
    .butpro:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 45px;
    top: 23px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.butpro:hover::before{
    margin: 5px;
    width: 60%;
    
    
}
    
  .butpro:hover
{
    color:#2f2e40;
}

.butpro
{
  right: 220px;
    width:25%;
    font-size: 14px;
    font-weight: 900;
}
      .butpro font
     {
         position: relative;
         bottom: 5px;
         left: 10px;
     }    

 .mainheader nav ul #fot
    {
      left: 220px;
     
    }
    .mainheaderf nav , .mainheaderb nav , .mainheaderw nav
    {
        right: -1px;
       width:350px; 
    }
   #iconprof
{
   margin-left:-22px; 
 height:30px;
    width: 40px;
    margin-top: -7px;
} 
    
.titlepost
    {
          font-size: 22px;
    }
    .post-info
    {
        font-size: 9px;
    }
     #iconpost {
  width: 30px;
  height: 20px;
  top: 8px;
    }
#picpost
    {
        width: 100%;
        height: 300px;
    }
    
    .videoplayer
    {
        width: 100%;
       
    }
    
    iframe
    {
           width: 100%;
       
    } 
    
    .section1
    {
         width: 100%;
    }
    
   .row {
      
        font-size: 9px;
        height: 670px;
        
    }
    
  
        .maylike .maylike-img>img {
   
       width:100%;
    height:170px;
    }
    
    .maylike
    {
         width: 96%;
    height: 170px;
    }
    .maylike .maylike-body .cta-btn {
   
        top: 90px;
        right: 235px;
     width: 40%;
    }
    
     .maylike .maylike-body h3 {
        color: #FFF;
            text-align:center;
       font-size: 11px;
        position: absolute;
        top: -7px;
        right:150px;
        width: 170px;
    }
    
    .titlechamp
    {
        width: 385px;
    }
    
    
    
     .titlechamp h1 {
        right: 150px;
    }
    
       .box
    {
        width: 130px;
        right: 120px;
    }
    .box span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        transform: rotateY(calc(var(--i)* 45deg)) translateZ(170px);
        -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, rgba(4, 4, 4, 0.267));
    }
           
    .depart
    {
        
        bottom: 55px;
    }
     .depart2
    {
          bottom: 68px;
        margin-right: 20px;
        width: 65px;
    }
     .depart3
    {
       bottom: 136px;
        margin-right: 40px;
        width: 60px;
    }
     .depart4
    {
        bottom: 190px;
        margin-right: 80px;
        width: 65px;
    }
    
    .depart5
    {
        bottom: 190px;
        margin-right: 80px;
        width: 70px;
    }
     .ulicon
    {
       top: 45px;
        right: 180px;
        
    }
    
      .ulicon li a
    {
        width: 20px;
        height:  20px;
    }
    
  
    
     .ulicon li a:before
{
  
    height: 95%;

    
}
    
    .ulicon2
    {
         top: 5px;
          right: 70px;
    }
    
      .ulicon2 li a
    {
        width: 30px;
        height:  30px;
    }
    
        .ulicon2 li:nth-child(1) a .fa-brands {
    padding-top:3px;
}
        .ulicon2 li:nth-child(2) a .fa-brands {
    padding-top:3px;
}
        .ulicon2 li:nth-child(3) a .fa-brands {
    padding-top:3px;
}
    .ulicon2 li:nth-child(4) a .fa-brands {
    padding-top:3px;
}
    
       .h2icon
    {
       right: 250px;
        font-size: 15px;
        top: 30px;
        
    }
    
   .copy
    {
        bottom: 120px;
        right: 100px;
        font-size: 10px;
        width: 214px;
    }
    
        .showing {
        padding-bottom: 175%;
    }
   
    
    .slide {
        width: 40%;
        left: 50px;
        top:10px;
        margin-bottom: 10px;
    }
 section.slider .title {
        font-size: 1.2rem;
        top: -17px;
        left: 115px;
    }
    
    section.slider .title2 {
        font-size: 1.5rem;
        top: -14px;
        left: 135px;
        
    }
    
    section.slider .title3 {
        font-size: 1.5rem;
        top: -14px;
        left: 145px;
    }
    
         button.slider__button {
      
        right: 390px;
        top: -16px;
    }
        button.slider__button2 {
     
        right: 138px;
        top: -16px;
    }
    .btn1
    {
        width: 105px;
    }
    
    .wrapper .cont ul {
   
    font-size: 18px;
 
}
 }
@media only screen and (min-width: 415px) and (max-width: 428px)
{  
    .seh {
        right: -160px;
        top: 60px;
        width: 250px;
    }
     .btn {
        right: 100px;
        bottom: -22px;
      
    }
    
      .mainheader nav ul #fot
    {
      left: 225px;
     
    }
    .mainheaderf nav , .mainheaderb nav , .mainheaderw nav
    {
        right: -1px;
       width:360px; 
    }
    
   .butlogout
    {
        left: 140px;
    }
    
    .butpro:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
  left: 35px;
    top: 20px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.butpro:hover::before{
    margin: 5px;
    width: 60%;
    
    
}
    
  .butpro:hover
{
    color:#2f2e40;
}

.butpro
{
  right: 250px;
    width:20%;
    font-size: 13px;
    font-weight: 900;
}
    
.butpro font
{
    position: relative;
  left: 10px;
   bottom: 5px;
}

   #iconprof
{
   margin-left:-22px; 
 height:30px;
    width: 35px;
    margin-top: -7px;
} 
    
.titlepost
    {
          font-size: 22px;
    }
    .post-info
    {
        font-size: 10px;
    }
      #iconpost {
  width: 30px;
  height: 20px;
  top: 8px;
    }
#picpost
    {
        width: 100%;
        height: 300px;
    }
    
    .videoplayer
    {
        width: 100%;
      
    }
    iframe
    {
           width: 100%;
       
    } 
    .containers
    {
        width: 130px;
    }
    .section1
    {
         width: 100%;
    }
    
   .row {
      
        font-size: 11px;
        height: 670px;
        
    }
    
  
        .maylike .maylike-img>img {
   
       width:100%;
    height:170px;
    }
    
    .maylike
    {
         width: 96%;
    height: 170px;
    }
    .maylike .maylike-body .cta-btn {
   
        top: 90px;
        right: 235px;
     width: 40%;
    }
    
     .maylike .maylike-body h3 {
        color: #FFF;
            text-align:center;
       font-size: 11px;
        position: absolute;
        top: -7px;
        right:150px;
        width: 170px;
    }
    
    .titlechamp
    {
        width: 300px;
    }
    
      .titlechamp
    {
        width: 400px;
    }
    
     .titlechamp h1 {
        right: 140px;
    }
    
    .box
    {
        width: 150px;
        right: 120px;
    }
    .box span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        transform: rotateY(calc(var(--i)* 60deg)) translateZ(140px);
        -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, rgba(4, 4, 4, 0.267));
    }
           
   .depart
    {
        
        bottom: 55px;
    }
     .depart2
    {
          bottom: 68px;
        margin-right: 30px;
        width: 65px;
    }
     .depart3
    {
       bottom: 136px;
        margin-right: 60px;
        width: 60px;
    }
     .depart4
    {
        bottom: 190px;
        margin-right: 110px;
        width: 65px;
    }
    
    .depart5
    {
        bottom: 190px;
        margin-right: 110px;
        width: 70px;
    }
     .ulicon
    {
       top: 45px;
        right: 210px;
        
    }
    
      .ulicon li a
    {
        width: 20px;
        height:  20px;
    }
        
     .ulicon li a:before
{
  
    height: 95%;

    
}
    
    .ulicon2
    {
         top: 5px;
           right: 85px;
    }
    
      .ulicon2 li a
    {
        width: 30px;
        height:  30px;
    }
    
        .ulicon2 li:nth-child(1) a .fa-brands {
    padding-top:3px;
}
        .ulicon2 li:nth-child(2) a .fa-brands {
    padding-top:3px;
}
        .ulicon2 li:nth-child(3) a .fa-brands {
    padding-top:3px;
}
    .ulicon2 li:nth-child(4) a .fa-brands {
    padding-top:3px;
}
    
      .h2icon
    {
       right: 280px;
        font-size: 15px;
        top: 30px;
        
    }
    
   .copy
    {
        bottom: 120px;
        right: 130px;
        font-size: 10px;
        width: 214px;
    }
    
    
    
        .showing {
        padding-bottom: 165%;
    }
   
    
    .slide {
        width: 40%;
        left: 55px;
        top: 10px;
        margin-bottom: 10px;
    }
  section.slider .title {
        font-size: 1.2rem;
        top: -17px;
        left: 120px;
    }
    
    section.slider .title2 {
        font-size: 1.5rem;
        top: -14px;
        left: 140px;
        
    }
    
    section.slider .title3 {
        font-size: 1.5rem;
        top: -14px;
        left: 150px;
    }
    
     
         button.slider__button {
      
        right: 390px;
        top: -16px;
    }
        button.slider__button2 {
     
        right: 120px;
        top: -16px;
    } 
.btn1
    {
        width: 110px;
    }

}
@media only screen and (min-width: 429px) and (max-width: 448px)
{ 
    .seh {
        right: -160px;
        top: 60px;
        width: 250px;
    }
     .btn {
        right: 100px;
        bottom: -22px;
        
    }
    
      .mainheader nav ul #fot
    {
      left: 225px;
     
    }
    .mainheaderf nav , .mainheaderb nav , .mainheaderw nav
    {
        right: -1px;
       width:360px; 
    }
    
   .butlogout
    {
        left: 150px;
    }
    
    .butpro:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 40px;
    top: 25px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.butpro:hover::before{
    margin: 5px;
    width: 60%;
    
    
}
    
  .butpro:hover
{
    color:#2f2e40;
}

.butpro
{
  right: 260px;
    width:20%;
    font-size: 10px;
    font-weight: 900;
}


   #iconprof
{
   margin-left:-22px; 
 height:30px;
    width: 35px;
    margin-top: -7px;
} 
    
.titlepost
    {
          font-size: 22px;
    }
    .post-info
    {
        font-size: 10px;
    }
     #iconpost {
  width: 30px;
  height: 20px;
  top: 8px;
    }
#picpost
    {
        width: 100%;
        height: 300px;
    }
    
    .videoplayer
    {
        width: 100%;
        
    }
    iframe
    {
           width: 100%;
         
        
    } 
    .containers
    {
        width: 130px;
    }
    .section1
    {
         width: 100%;
    }
    
  .row {
      
        font-size: 11px;
        height: 670px;
        
    }
    
  
        .maylike .maylike-img>img {
   
       width:100%;
    height:170px;
    }
    
    .maylike
    {
         width: 96%;
    height: 170px;
    }
    .maylike .maylike-body .cta-btn {
   
        top: 90px;
        right: 255px;
     width: 40%;
    }
    
     .maylike .maylike-body h3 {
        color: #FFF;
            text-align:center;
       font-size: 11px;
        position: absolute;
        top: -7px;
        right:130px;
        width: 200px;
    }
    
    .titlechamp
    {
        width: 300px;
    }
    
      .titlechamp
    {
        width: 405px;
    }
    
     .titlechamp h1 {
        right: 150px;
    }
    
    .box
    {
        width: 150px;
        right: 120px;
    }
    .box span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        transform: rotateY(calc(var(--i)* 60deg)) translateZ(140px);
        -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, rgba(4, 4, 4, 0.267));
    }
       
    .containerVid a .Show{
        
        background-size:13% 37%;
    
    }
   .depart
    {
        
        bottom: 55px;
    }
     .depart2
    {
          bottom: 68px;
        margin-right: 30px;
        width: 65px;
    }
     .depart3
    {
       bottom: 136px;
        margin-right: 60px;
        width: 60px;
    }
     .depart4
    {
        bottom: 190px;
        margin-right: 110px;
        width: 65px;
    }
    
    .depart5
    {
        bottom: 190px;
        margin-right: 110px;
        width: 70px;
    }
     .ulicon
    {
       top: 45px;
        right: 210px;
        
    }
    
      .ulicon li a
    {
        width: 20px;
        height:  20px;
    }
    
       .ulicon li a:before
{
  
    height: 95%;

    
}
    
    .ulicon2
    {
         top: 5px;
           right: 80px;
    }
    
      .ulicon2 li a
    {
        width: 30px;
        height:  30px;
    }
    
        .ulicon2 li:nth-child(1) a .fa-brands {
    padding-top:3px;
}
        .ulicon2 li:nth-child(2) a .fa-brands {
    padding-top:3px;
}
        .ulicon2 li:nth-child(3) a .fa-brands {
    padding-top:3px;
}
    .ulicon2 li:nth-child(4) a .fa-brands {
    padding-top:3px;
}
    
      .h2icon
    {
       right: 280px;
        font-size: 15px;
        top: 30px;
        
    }
    
   .copy
    {
        bottom: 120px;
        right: 130px;
        font-size: 10px;
        width: 214px;
    }
    
    
        .showing {
        padding-bottom: 175%;
    }
   
    
    .slide {
        width: 40%;
        left: 60px;
        top: 10px;
        margin-bottom: 10px;
    }
   section.slider .title {
        font-size: 1.2rem;
        top: -17px;
        left: 135px;
    }
    
    section.slider .title2 {
        font-size: 1.5rem;
        top: -14px;
        left: 155px;
        
    }
    
    section.slider .title3 {
        font-size: 1.5rem;
        top: -14px;
        left: 165px;
    }
    
    
         button.slider__button {
      
        right: 390px;
        top: -16px;
    }
        button.slider__button2 {
     
        right: 102px;
        top: -16px;
    }
    
.btn1
    {
        width: 110px;
    }
    
    #font1
    {
          font-size: 15px;
    }
    .wrapper .cont ul {
   
    font-size: 18px;
 
}
}

@media only screen and (min-width: 449px) and (max-width: 480px)
{ 
  
        .seh {
        right: -190px;
        top: 60px;
        width: 300px;
    }
     .btn {
        right: 120px;
        bottom: -22px;
        
    }
       .homebtn_site{
   width: 180px;
    height: 180px;
    right: 15px;
    bottom: 35px;
}

.homebtn_site::before {
    width: 100%;
    height: 50%;
}

.page-home .homebtn_site::after {
    width: 0;
    height: 0;
    border-color: transparent;
}

.homebtn_site::before,  .homebtn_site::after {
    position: absolute;
    top: 50%;
    right: 50%;
    z-index: 2;
    content: "";
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
     -webkit-border-top-right-radius:20px;
    -webkit-border-top-left-radius:20px;
    border: 2px solid #fff;
    transform: translate(50%, -50%);
    transition: all 500ms;
    
}

.homebtn
{
  width: 150px;
    height: 70px;
    overflow: hidden;
   -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
     -webkit-border-top-right-radius:20px;
    -webkit-border-top-left-radius:20px;
    position: absolute;
    top: 50%;
    right: 50%;
    border: 5px solid #fff;
    background-color: #161619;
    transform: translate(50%, -50%);
    background-position: 150%;
    background-repeat: no-repeat;
    background-size: 500%;
}

.homebtn_site:hover .homebtn {
  border-color: #f9c724;
  background-position:  -1%;
}



@keyframes exa2{
  
    from {transform:scale(1.05);}
   to {top:43px;right:-1px; transform:scale(1);}
   
}

.homebtn_site:hover::before {
  width: 0;
  height: 0;
  border-color: transparent;
}

.homebtn_site:hover::after {
  width: 100%;
  height: 50%;
  border-color: #f9c724;
    animation-name: exa2;
animation-duration: 2s;
animation-fill-mode:forwards;
}


 .homebtn_site:hover .logo{
  opacity: 1;
}
 .homebtn_site:hover .logo{
  right: -100%;
}

 .homebtn_site:hover .logo2{
  opacity: 1;
}
 .homebtn_site:hover .logo2{
  right: -100%;
}
.page-home .home-site-btn-container:hover .home-site-btn .text {
  bottom: 100%;
}
.page-home .home-site-btn {
  width: 230px;
  height: 230px;
  overflow: hidden;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 50%;
  border: 5px solid #fff;
  background-color: #161619;
  transform: translate(50%, -50%);
  background-position: center -43%;
  background-repeat: no-repeat;
  background-size: 120%;
}
  .logo {
      
  transition: all 3s;
      width: 120px;
  height: 70px;
      margin-top: 100px;
      margin-right: -20px;
   
}

  .logo2 {
      
  transition: all 5s;
         width: 120px;
  height: 70px;
      margin-top: 100px;
         margin-right: 280px;
    
}


.homebtn .logo {
  position: absolute;
  top: -100px;
  right: 100%;
  z-index: 2;
  transform: translate(100%);
}

.homebtn .logo2 {
  position: absolute;
  top: -100px;
  right: 100%;
  z-index: 2;
  transform: translate(100%);
}
.page-home .home-site-btn .text {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 55px;
  right: 50%;
  z-index: 2;
  transform: translate(50%);
}

  .containers
    {
        width: 150px;
        right: 190px;
    }
      .butlogout
    {
        left: 180px;
    }
    
    .butpro:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 60px;
    top: 20px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.butpro:hover::before{
    margin: 5px;
    width: 50%;
    
    
}
    
  .butpro:hover
{
    color:#2f2e40;
}

    
.butpro
{
  right: 260px;
    width:25%;
    font-size: 16px;
    font-weight: 900;
}

.butpro font
{
    position: relative;
  left: 10px;
  bottom: 6px;
}    
 .mainheader nav ul #fot
    {
      left: 250px;
     
    }
    .mainheaderf nav , .mainheaderb nav , .mainheaderw nav
    {
        right: -1px;
       width:410px; 
    }
    

    
          .mainheaderf nav li #icon, .mainheaderb nav li #icon
    {
      width: 50px;
        height: 30px;
       left: 2px;
        bottom: 10px;
    }
      .mainheaderw nav li #icon
    {
      
     width: 50px;
        height: 30px;
       left: 2px;
        bottom: 10px;
    }
    
   .mainheaderf nav ul li a:before,.mainheaderb nav ul li a:before,.mainheaderw nav ul li a:before{
    left: -3px;
    top: 24px;
} 
   #iconprof
{
   margin-left:-22px; 
 height:30px;
    width: 40px;
    margin-top: -7px;
} 
    
.titlepost
    {
          font-size: 25px;
    }
    .post-info
    {
        font-size: 11px;
    }
         #iconpost {
  width: 30px;
  height: 20px;
  top: 8px;
    }
#picpost
    {
        width: 100%;
        height: 300px;
    }
    
    .videoplayer
    {
        width: 100%;
      
    }
    
      iframe
    {
        width: 100%;
        
    }
   
    .section1
    {
         width: 100%;
    }
    
   .row {
      
        font-size: 12px;
        height: 670px;
        
    }
    
  
        .maylike .maylike-img>img {
   
       width:100%;
    height:170px;
    }
    
    .maylike
    {
         width: 96%;
    height: 170px;
    }
    .maylike .maylike-body .cta-btn {
   font-size: 15px;
        top: 90px;
        right: 265px;
     width: 40%;
    }
    
     .maylike .maylike-body h3 {
        color: #FFF;
            text-align:center;
       font-size: 13px;
        position: absolute;
        top: -7px;
        right:150px;
        width: 210px;
    }
    .titlechamp
    {
        width: 450px;
    }
    
    
    
     .titlechamp h1 {
        right: 170px;
    }
    
       .box
    {
        width: 130px;
        right: 150px;
    }
    .box span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        transform: rotateY(calc(var(--i)* 45deg)) translateZ(170px);
        -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, rgba(4, 4, 4, 0.267));
    }
       #font1
    {
        font-size: 17px;
    }  
    .containerVid a .Show{
        
        background-size:12% 37%;
    
    }
    .depart
    {
            bottom: 55px;
        font-size: 13px;
    }
     .depart2
    {
          bottom: 75px;
        font-size: 13px;
         right: 90px;
        width: 86px
    }
     .depart3
    {
       bottom: 172px;
         right: 190px;
        font-size: 13px;
        width: 86px;
    }
     .depart4
    {
        bottom: 250px;
        right: 300px;
        font-size: 13px;
        width: 73px;
    }
     .depart5
    {
      
        bottom: 250px;
        right: 300px;
        font-size: 13px;
       width: 99px;
    }
        .ulicon
    {
      top: 45px;
    right: 250px;
        
    }
    
      .ulicon li a
    {
        width: 20px;
        height:  20px;
    }
    
     .ulicon li a:before
{
  
    height: 93%;

    
}
    
    .ulicon2
    {
         top: 5px;
          right: 120px;
    }
    
      .ulicon2 li a
    {
        width: 30px;
        height:  30px;
    }
    
        .ulicon2 li:nth-child(1) a .fa-brands {
    padding-top:3px;
}
        .ulicon2 li:nth-child(2) a .fa-brands {
    padding-top:3px;
}
        .ulicon2 li:nth-child(3) a .fa-brands {
    padding-top:3px;
}
    .ulicon2 li:nth-child(4) a .fa-brands {
    padding-top:3px;
}
    
    .h2icon
    {
        right: 320px;
        font-size: 15px;
        top: 40px;
        
    }
    
    .copy
    {
    bottom: 200px;
    right: 150px;
    font-size: 12px;
    width: 260px;
    }
    
        .showing {
        padding-bottom: 155%;
    }
   
    
    .slide {
        width: 40%;
        left: 74px;
        top:10px;
        margin-bottom: 10px;
    }
 section.slider .title {
        font-size: 1.5rem;
        top: -10px;
        left: 125px;
    }
    
    section.slider .title2 {
        font-size: 1.7rem;
        top: -8px;
         left: 160px;
        
    }
    
    section.slider .title3 {
        font-size: 1.7rem;
        top: -9px;
         left: 170px;
    }
    
         button.slider__button {
      
        right: 390px;
        top: -20px;
    }
        button.slider__button2 {
     
        right: 74px;
        top: -20px;
    }
   .btn1
    {
        width: 130px;
        right: 20px;
    }
    
    .wrapper .cont ul {
   
    font-size: 19px;
 
}
}

@media only screen and (min-width: 481px) and (max-width: 540px)
{
         .seh {
        right: -200px;
        top: 100px;
        width: 320px;
    }
     .btn {
        right: 130px;
        bottom: -62px;
        
    }
    
    
    .homebtn_site{
   width: 190px;
    height: 180px;
    right: 15px;
    bottom: 35px;
}

.homebtn_site::before {
    width: 100%;
    height: 50%;
}

.page-home .homebtn_site::after {
    width: 0;
    height: 0;
    border-color: transparent;
}

.homebtn_site::before,  .homebtn_site::after {
    position: absolute;
    top: 50%;
    right: 50%;
    z-index: 2;
    content: "";
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
     -webkit-border-top-right-radius:20px;
    -webkit-border-top-left-radius:20px;
    border: 2px solid #fff;
    transform: translate(50%, -50%);
    transition: all 500ms;
    
}

.homebtn
{
  width: 170px;
    height: 70px;
    overflow: hidden;
   -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
     -webkit-border-top-right-radius:20px;
    -webkit-border-top-left-radius:20px;
    position: absolute;
    top: 50%;
    right: 50%;
    border: 5px solid #fff;
    background-color: #161619;
    transform: translate(50%, -50%);
    background-position: 150%;
    background-repeat: no-repeat;
    background-size: 500%;
}

.homebtn_site:hover .homebtn {
  border-color: #f9c724;
  background-position:  -1%;
}



@keyframes exa2{
  
    from {transform:scale(1.05);}
   to {top:43px;right:-1px; transform:scale(1);}
   
}

.homebtn_site:hover::before {
  width: 0;
  height: 0;
  border-color: transparent;
}

.homebtn_site:hover::after {
  width: 100%;
  height: 50%;
  border-color: #f9c724;
    animation-name: exa2;
animation-duration: 2s;
animation-fill-mode:forwards;
}


 .homebtn_site:hover .logo{
  opacity: 1;
}
 .homebtn_site:hover .logo{
  right: -100%;
}

 .homebtn_site:hover .logo2{
  opacity: 1;
}
 .homebtn_site:hover .logo2{
  right: -100%;
}
.page-home .home-site-btn-container:hover .home-site-btn .text {
  bottom: 100%;
}
.page-home .home-site-btn {
  width: 230px;
  height: 230px;
  overflow: hidden;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 50%;
  border: 5px solid #fff;
  background-color: #161619;
  transform: translate(50%, -50%);
  background-position: center -43%;
  background-repeat: no-repeat;
  background-size: 120%;
}
 .logo {
      
  transition: all 3s;
      width: 140px;
  height: 70px;
      margin-top: 100px;
      margin-right: -20px;
   
}

  .logo2 {
      
  transition: all 5s;
         width: 140px;
  height: 70px;
      margin-top: 100px;
         margin-right: 320px;
    
}


.homebtn .logo {
  position: absolute;
  top: -100px;
  right: 100%;
  z-index: 2;
  transform: translate(100%);
}

.homebtn .logo2 {
  position: absolute;
  top: -100px;
  right: 100%;
  z-index: 2;
  transform: translate(100%);
}
.page-home .home-site-btn .text {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 55px;
  right: 50%;
  z-index: 2;
  transform: translate(50%);
}


      .butlogout
    {
        left: 170px;
    }
    
    .butpro:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 50px;
    top: 20px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.butpro:hover::before{
    margin: 5px;
    width: 60%;
    
    
}
    
  .butpro:hover
{
    color:#2f2e40;
}

.butpro
{
  right: 325px;
    width:20%;
    font-size: 12px;
    font-weight: 900;
}
    
.butpro font
{
    position: relative;
  bottom: 5px;

}    
    .containers {
        width: 150px;
        height: 50px;
        top: 50%;
        left: 18%;
    }
 .mainheader nav ul #fot
    {
      left: 270px;
     
    }
    .mainheaderf nav , .mainheaderb nav , .mainheaderw nav
    {
        right: -1px;
       width:450px; 
    }
   #iconprof
{
   margin-left:-22px; 
 height:30px;
    width: 40px;
    margin-top: -7px;
} 
    
.titlepost
    {
          font-size: 25px;
    }
    .post-info
    {
        font-size: 14px;
    }
     #iconpost {
  width: 35px;
  height: 25px;
  top: 8px;
    }
#picpost
    {
        width: 100%;
       height: 300px;
    }
    
    #tech {
    width: 101.3%;
}
    
    .videoplayer
    {
        width: 100%;
       
    }
   iframe
    {
        width: 100%;
        
    }
    
    .section1
    {
         width: 100%;
    }
    
 .row {
      
        font-size: 12px;
        height: 670px;
        
    }
    
  
        .maylike .maylike-img>img {
   
       width:100%;
    height:170px;
    }
    
    .maylike
    {
         width: 96%;
    height: 170px;
    }
    .maylike .maylike-body .cta-btn {
   font-size: 16px;
        top: 90px;
        right: 310px;
     width: 40%;
    }
    
     .maylike .maylike-body h3 {
        color: #FFF;
            text-align:center;
       font-size: 13px;
        position: absolute;
        top: -7px;
        right:150px;
        width: 270px;
    }
    
    .titlechamp
    {
        width: 505px;
    }
    
    
    
     .titlechamp h1 {
        right: 200px;
    }
    
    .box
    {
        width: 200px;
        height: 210px;
        right: 150px;
    }
    .box span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        transform: rotateY(calc(var(--i)* 70deg)) translateZ(170px);
        -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, rgba(4, 4, 4, 0.267));
    }
      
   #font1
    {
        font-size: 18px;
    }
    
 
   #fonts
{
font-size: 17px;
}

 
 #pic1
    {
        width: 150px;
    }
    
    #fontsVid
    {
        
    }
    #fontsdateVid
    {
        
    }
    .containerVid a .Show{
        
        background-size:10% 37%;
    
    }
   .depart
    {
            bottom: 55px;
        font-size: 13px;
    }
     .depart2
    {
          bottom: 75px;
        font-size: 13px;
         right: 110px;
        width: 86px
    }
     .depart3
    {
       bottom: 172px;
         right: 230px;
        font-size: 13px;
        width: 86px;
    }
     .depart4
    {
        bottom: 250px;
        right: 350px;
        font-size: 13px;
        width: 73px;
    }
     .depart5
    {
      
        bottom: 250px;
        right: 350px;
        font-size: 13px;
       width: 99px;
    }
        .ulicon
    {
      top: 45px;
    right: 280px;
        
    }
    
      .ulicon li a
    {
        width: 25px;
        height:  25px;
        margin-left: 10px;
    }
       
    .ulicon li a:hover
{
    
    transform:  rotate(-30deg) skew(20deg) translate(5px,-5px);
}
    
    .ulicon li a:before
    {
      
        height:  24px;
     
    }
       .ulicon li:nth-child(1) a .fa-brands {
    padding-top:8px;
}
        .ulicon li:nth-child(2) a .fa-brands {
    padding-top:8px;
}
        .ulicon li:nth-child(3) a .fa-brands {
    padding-top:8px;
}
    .ulicon li:nth-child(4) a .fa-brands {
    padding-top:8px;
}
    
    .ulicon2
    {
         top: 8px;
          right: 130px;
    }
    
      .ulicon2 li a
    {
        width: 40px;
        height:  40px;
    }
    
        .ulicon2 li:nth-child(1) a .fa-brands {
    padding-top:3px;
}
        .ulicon2 li:nth-child(2) a .fa-brands {
    padding-top:3px;
}
        .ulicon2 li:nth-child(3) a .fa-brands {
    padding-top:3px;
}
    .ulicon2 li:nth-child(4) a .fa-brands {
    padding-top:3px;
}
    
 .h2icon
    {
        right: 360px;
        font-size: 15px;
        top: 40px;
        
    }
    
    .copy
    {
    bottom: 200px;
    right: 200px;
    font-size: 12px;
    width: 260px;
    }
    
        .showing {
        padding-bottom: 150%;
    }
   
    
    .slide {
        width: 40%;
        left: 100px;
    }
    .slide_content
    {
        width: 67%;
    }
    
    .slide_content p {

    margin-right: 20px;
 
    }
   section.slider .title {
        font-size: 30px;
        top: -20px;
        left: 130px;
    }
      section.slider .title2 {
        font-size: 30px;
        top: -20px;
        left: 180px;
    }
      section.slider .title3 {
        font-size: 30px;
        top: -20px;
        left: 200px;
    }
         button.slider__button {
      
        right: 390px;
        top: -30px;
    }
        button.slider__button2 {
     
        right: 20px;
        top: -30px;
    }
    
    .btn1
    {
        width: 140px;
    }
    
    .wrapper .cont ul {
   
    font-size: 19px;
 
}
 }


@media only screen and (min-width: 541px) and (max-width: 600px)
{
        .seh {
        right: -210px;
        top: 100px;
        width: 350px;
    }
     .btn {
        right: 150px;
        bottom: -62px;
       
    }
    
    
    .homebtn_site{
   width: 190px;
    height: 180px;
    right: 15px;
    bottom: 35px;
}

.homebtn_site::before {
    width: 100%;
    height: 50%;
}

.page-home .homebtn_site::after {
    width: 0;
    height: 0;
    border-color: transparent;
}

.homebtn_site::before,  .homebtn_site::after {
    position: absolute;
    top: 50%;
    right: 50%;
    z-index: 2;
    content: "";
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
     -webkit-border-top-right-radius:20px;
    -webkit-border-top-left-radius:20px;
    border: 2px solid #fff;
    transform: translate(50%, -50%);
    transition: all 500ms;
    
}

.homebtn
{
  width: 170px;
    height: 70px;
    overflow: hidden;
   -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
     -webkit-border-top-right-radius:20px;
    -webkit-border-top-left-radius:20px;
    position: absolute;
    top: 50%;
    right: 50%;
    border: 5px solid #fff;
    background-color: #161619;
    transform: translate(50%, -50%);
    background-position: 150%;
    background-repeat: no-repeat;
    background-size: 500%;
}

.homebtn_site:hover .homebtn {
  border-color: #f9c724;
  background-position:  -1%;
}



@keyframes exa2{
  
    from {transform:scale(1.05);}
   to {top:43px;right:-1px; transform:scale(1);}
   
}

.homebtn_site:hover::before {
  width: 0;
  height: 0;
  border-color: transparent;
}

.homebtn_site:hover::after {
  width: 100%;
  height: 50%;
  border-color: #f9c724;
    animation-name: exa2;
animation-duration: 2s;
animation-fill-mode:forwards;
}


 .homebtn_site:hover .logo{
  opacity: 1;
}
 .homebtn_site:hover .logo{
  right: -100%;
}

 .homebtn_site:hover .logo2{
  opacity: 1;
}
 .homebtn_site:hover .logo2{
  right: -100%;
}
.page-home .home-site-btn-container:hover .home-site-btn .text {
  bottom: 100%;
}
.page-home .home-site-btn {
  width: 230px;
  height: 230px;
  overflow: hidden;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 50%;
  border: 5px solid #fff;
  background-color: #161619;
  transform: translate(50%, -50%);
  background-position: center -43%;
  background-repeat: no-repeat;
  background-size: 120%;
}
 .logo {
      
  transition: all 3s;
      width: 140px;
  height: 70px;
      margin-top: 100px;
      margin-right: -20px;
   
}

  .logo2 {
      
  transition: all 5s;
         width: 140px;
  height: 70px;
      margin-top: 100px;
         margin-right: 320px;
    
}


.homebtn .logo {
  position: absolute;
  top: -100px;
  right: 100%;
  z-index: 2;
  transform: translate(100%);
}

.homebtn .logo2 {
  position: absolute;
  top: -100px;
  right: 100%;
  z-index: 2;
  transform: translate(100%);
}
.page-home .home-site-btn .text {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 55px;
  right: 50%;
  z-index: 2;
  transform: translate(50%);
}


      .butlogout
    {
        left: 190px;
    }
    
    .butpro:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 52px;
    top: 20px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.butpro:hover::before{
    margin: 5px;
    width: 60%;
    
    
}
    
  .butpro:hover
{
    color:#2f2e40;
}

.butpro
{
  right: 360px;
    width:20%;
    font-size: 12px;
    font-weight: 900;
}
    
.butpro font
{
    position: relative;
  left: 8px;
    bottom: 5px;
  
}    
    .containers {
        width: 180px;
        height: 50px;
        top: 50%;
        left: 18%;
    }


.containers::before{
 
    top: 10px;
    left: 80px;
    
}

.containers::after{
 
    bottom: 0px;
    right: 70px;
  
}
 .mainheader nav ul #fot
    {
      left: 300px;
     
    }
    .mainheaderf nav , .mainheaderb nav , .mainheaderw nav
    {
        right: -1px;
       width:510px; 
    }
   #iconprof
{
   margin-left:-22px; 
 height:30px;
    width: 40px;
    margin-top: -7px;
} 
    
.titlepost
    {
          font-size: 25px;
    }
    .post-info
    {
        font-size: 14px;
    }
#picpost
    {
        width: 100%;
       height: 300px;
    }
    p
    {
        font-size: 18px;
    }
    #tech {
    width: 101.3%;
}
    
    .videoplayer
    {
        width: 100%;
        
    }
     iframe
    {
        width: 100%;
      
    }
    
    .section1
    {
         width: 100%;
    }
    
     .row {
      
        font-size: 12px;
        height: 730px;
        
    }
    
  
        .maylike .maylike-img>img {
   
       width:100%;
    height:190px;
    }
    
    .maylike
    {
         width: 96%;
    height: 190px;
    }
    .maylike .maylike-body .cta-btn {
   font-size: 20px;
        top: 110px;
        right: 350px;
     width: 40%;
    }
    
     .maylike .maylike-body h3 {
        color: #FFF;
            text-align:center;
       font-size: 15px;
        position: absolute;
        top: -7px;
        right:170px;
        width: 290px;
    }
    
    .titlechamp
    {
        width: 560px;
    }
    
    
    
     .titlechamp h1 {
        right: 230px;
    }
    
    .box
    {
        width: 200px;
        height: 210px;
        right: 180px;
    }
    .box span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        transform: rotateY(calc(var(--i)* 70deg)) translateZ(170px);
        -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, rgba(4, 4, 4, 0.267));
    }
      
   #font1
    {
        font-size: 18px;
    }
    
    
   #fonts
{
font-size: 18px;
}

 
 #pic1
    {
        width: 150px;
    }
    
    #fontsVid
    {
        
    }
    #fontsdateVid
    {
        
    }
    
      .containerVid a .Show{
        
        background-size:10% 37%;
    
    }
    
    .depart
    {
            bottom: 65px;
        font-size: 13px;
    }
     .depart2
    {
          bottom: 84px;
        font-size: 13px;
         right: 120px;
        width: 86px
    }
     .depart3
    {
       bottom: 182px;
         right: 250px;
        font-size: 13px;
        width: 86px;
    }
     .depart4
    {
        bottom: 260px;
        right: 390px;
        font-size: 13px;
        width: 73px;
    }
     .depart5
    {
      
        bottom: 260px;
        right: 390px;
        font-size: 13px;
       width: 99px;
    }
        .ulicon
    {
      top: 45px;
    right: 345px;
        
    }
    
      .ulicon li a
    {
        width: 30px;
        height:  30px;
        margin-left: 10px;
    }
    
       
    .ulicon li a:hover
{
    
    transform: rotate(-30deg) skew(20deg) translate(5px,-5px);
   
}
    .ulicon li a:before
    {
      
        height:  95%;
     
    }
    
    .ulicon2
    {
         top: 5px;
          right: 175px;
    }
    
      .ulicon2 li a
    {
        width: 40px;
        height:  40px;
    }
    
        .ulicon2 li:nth-child(1) a .fa-brands {
    padding-top:3px;
}
        .ulicon2 li:nth-child(2) a .fa-brands {
    padding-top:3px;
}
        .ulicon2 li:nth-child(3) a .fa-brands {
    padding-top:3px;
}
    .ulicon2 li:nth-child(4) a .fa-brands {
    padding-top:3px;
}
    
    .h2icon
    {
        right: 430px;
        font-size: 15px;
        top: 40px;
        
    }
    
    .copy
    {
    bottom: 200px;
    right: 250px;
    font-size: 12px;
    width: 260px;
    }
    
        .showing {
        padding-bottom: 135%;
    }
   
    
    .slide {
        width: 40%;
       left: 110px;
    }
    .slide_content
    {
        width: 67%;
    }
    
    .slide_content p {

    margin-right: 20px;
 
    }
   section.slider .title {
        font-size: 30px;
        top: -20px;
        left: 130px;
    }
      section.slider .title2 {
        font-size: 30px;
        top: -20px;
        left: 180px;
    }
      section.slider .title3 {
        font-size: 30px;
        top: -20px;
        left: 200px;
    }
         button.slider__button {
      
        right: 390px;
        top: -30px;
    }
        button.slider__button2 {
     
        right: 10px;
        top: -30px;
    }
    
      .btn1
    {
        width: 160px;
    }
    
    .wrapper .cont ul {
   
    font-size: 20px;
 
}
 }

/*---------Between (541px) and (600px)----------------*/

@media only screen and (min-width: 560px) and (max-width: 568px)
{
        .seh {
        right: -230px;
        top: 100px;
        width: 320px;
    }
     .btn {
        right: 100px;
        bottom: -62px;
        width: 130px;
    }
    
  
      .butlogout
    {
        left: 180px;
    }
    
    .butpro:before{

    left: 53px;
    top: 23px;

}
    
.butpro
{
  right: 345px;
    width:20%;
}
.butpro font
{
    position: relative;
  left: 10px;
   bottom: 2px;
}
    
 .mainheader nav ul #fot
    {
      left: 290px;
     
    }
    .mainheaderf nav , .mainheaderb nav , .mainheaderw nav
    {
        right: -1px;
       width:490px; 
    }
    .mainheaderw nav
    {
        height: 50px;
    }
 
    

    
    .titlechamp
    {
        width: 530px;
    }
    
    
    
     .titlechamp h1 {
        right: 210px;
    }
    
       #fonts
{
font-size: 17px;
}
  
      .ulicon
    {
        top: 40px;
        right: 310px;
        
    }
    

    .ulicon2
    {
         top: 5px;
          right: 170px;
    }
    
    
    
     .h2icon
    {
       right: 390px;
        font-size: 15px;
        top: 35px;
        
        
    }
    
   
    
    .copy
    {
         bottom: 210px;
        right: 190px;
        font-size: 15px;
        width: 317px;
    }
    
        .showing {
        padding-bottom: 145%;
    }
   
   
    
      .btn1
    {
        width: 150px;
    }
 }

/*---------Between (541px) and (600px)----------------*/

@media only screen and (min-width: 601px) and (max-width: 640px)
{
         .seh {
        right: -240px;
        top: 100px;
        width: 380px;
    }
     .btn {
        right: 155px;
        bottom: -62px;
        width: 70px;
    }
    
    
    .homebtn_site{
   width: 190px;
    height: 180px;
    right: 15px;
    bottom: 35px;
}

.homebtn_site::before {
    width: 100%;
    height: 50%;
}

.page-home .homebtn_site::after {
    width: 0;
    height: 0;
    border-color: transparent;
}

.homebtn_site::before,  .homebtn_site::after {
    position: absolute;
    top: 50%;
    right: 50%;
    z-index: 2;
    content: "";
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
     -webkit-border-top-right-radius:20px;
    -webkit-border-top-left-radius:20px;
    border: 2px solid #fff;
    transform: translate(50%, -50%);
    transition: all 500ms;
    
}

.homebtn
{
  width: 170px;
    height: 70px;
    overflow: hidden;
   -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
     -webkit-border-top-right-radius:20px;
    -webkit-border-top-left-radius:20px;
    position: absolute;
    top: 50%;
    right: 50%;
    border: 5px solid #fff;
    background-color: #161619;
    transform: translate(50%, -50%);
    background-position: 150%;
    background-repeat: no-repeat;
    background-size: 500%;
}

.homebtn_site:hover .homebtn {
  border-color: #f9c724;
  background-position:  -1%;
}



@keyframes exa2{
  
    from {transform:scale(1.05);}
   to {top:43px;right:-1px; transform:scale(1);}
   
}

.homebtn_site:hover::before {
  width: 0;
  height: 0;
  border-color: transparent;
}

.homebtn_site:hover::after {
  width: 100%;
  height: 50%;
  border-color: #f9c724;
    animation-name: exa2;
animation-duration: 2s;
animation-fill-mode:forwards;
}


 .homebtn_site:hover .logo{
  opacity: 1;
}
 .homebtn_site:hover .logo{
  right: -100%;
}

 .homebtn_site:hover .logo2{
  opacity: 1;
}
 .homebtn_site:hover .logo2{
  right: -100%;
}
.page-home .home-site-btn-container:hover .home-site-btn .text {
  bottom: 100%;
}
.page-home .home-site-btn {
  width: 230px;
  height: 230px;
  overflow: hidden;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 50%;
  border: 5px solid #fff;
  background-color: #161619;
  transform: translate(50%, -50%);
  background-position: center -43%;
  background-repeat: no-repeat;
  background-size: 120%;
}
   .logo {
      
  transition: all 3s;
      width: 140px;
  height: 70px;
      margin-top: 100px;
      margin-right: -20px;
   
}

  .logo2 {
      
  transition: all 5s;
         width: 140px;
  height: 70px;
      margin-top: 100px;
         margin-right: 320px;
    
}


.homebtn .logo {
  position: absolute;
  top: -100px;
  right: 100%;
  z-index: 2;
  transform: translate(100%);
}

.homebtn .logo2 {
  position: absolute;
  top: -100px;
  right: 100%;
  z-index: 2;
  transform: translate(100%);
}
.page-home .home-site-btn .text {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 55px;
  right: 50%;
  z-index: 2;
  transform: translate(50%);
}


      .butlogout
    {
        left: 200px;
    }
    
    .butpro:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 60px;
    top: 20px; 
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.butpro:hover::before{
    margin: 5px;
    width: 60%;
    
    
}
    
  .butpro:hover
{
    color:#2f2e40;
}

.butpro
{
  right: 385px;
    width:20%;
    font-size: 13px;
    font-weight: 900;
}
    
  .butpro font
{
    position: relative;
  left: 10px;
   bottom: 5px;
}  
     #micon {
    width: 30px;
  }
    .containers {
        width: 180px;
        height: 50px;
        top: 50%;
        left: 18%;
    }


.containers::before{
 
    top: 10px;
    left: 80px;
    
}

.containers::after{
 
    bottom: 0px;
    right: 70px;
  
}

   .mainheader nav ul #fot
    {
      left: 310px;
     width: 200px;
          font-size: 20px;
        
    }
   


.mainheader nav #fot a{
    
    
  
    padding: 10px 25px;
    height: 40px;
   
}
    .mainheaderf nav , .mainheaderb nav , .mainheaderw nav
    {
        right: -8px;
       width:545px; 
        height: 80px;
    }
      .mainheaderf nav li , .mainheaderb nav li
    {
       
       width:105px;
      
    }
      .mainheaderw nav li
    {
      
       width:105px; 
    }
    .asizef,.asizeb
    {
        font-size: 20px;
   
    }
        .mainheaderf nav li #icon, .mainheaderb nav li #icon
    {
      width: 80px;
        height: 60px;
       left: 10px;
        bottom: 10px;
    }
      .mainheaderw nav li #icon
    {
      
     width: 80px;
        height: 60px;
       left: 10px;
        bottom: 10px;
    }
    .mainheader nav ul li a:before{
    top: 35px;
}
  
.mainheaderf nav ul li a:before,.mainheaderb nav ul li a:before,.mainheaderw nav ul li a:before{
    left: -3px;
    top: 49px;
}idth:450px; 
    
   #iconprof
{
   margin-left:-22px; 
 height:30px;
    width: 40px;
    margin-top: -7px;
} 
    
.titlepost
    {
          font-size: 25px;
    }
    .post-info
    {
        font-size: 14px;
    }
#picpost
    {
        width: 100%;
       height: 300px;
    }
       #tech {
    width: 101.3%;
}
    
    .videoplayer
    {
        width: 100%;
       
    }
     iframe
    {
        width: 100%;
       
    }
    
    .section1
    {
         width: 100%;
    }
    
.row {
      
        font-size: 12px;
        height: 730px;
        
    }
    
  
        .maylike .maylike-img>img {
   
       width:100%;
    height:190px;
    }
    
    .maylike
    {
         width: 96%;
    height: 190px;
    }
    .maylike .maylike-body .cta-btn {
   font-size: 20px;
        top: 110px;
        right: 350px;
     width: 40%;
    }
    
     .maylike .maylike-body h3 {
        color: #FFF;
            text-align:center;
       font-size: 15px;
        position: absolute;
        top: -7px;
        right:200px;
        width: 290px;
    }
    
    .titlechamp
    {
        width: 590px;
    }
    
    
    
     .titlechamp h1 {
        right: 250px;
    }
    
    .box
    {
        width: 200px;
        height: 210px;
        right: 180px;
    }
    .box span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        transform: rotateY(calc(var(--i)* 70deg)) translateZ(170px);
        -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, rgba(4, 4, 4, 0.267));
    }
      
   #font1
    {
        font-size: 18px;
    }
    
   #fonts
{
font-size: 18px;
}

 
 #pic1
    {
        width: 170px;
    }
    
    #fontsVid
    {
        
    }
    #fontsdate
    {
        font-size: 18px;
    }
    p
    {
        font-size: 18px;
    }
    
    .containerVid a .Show{
        
        background-size:10% 37%;
    
    }
.depart
    {
            bottom: 70px;
        font-size: 13px;
    }
     .depart2
    {
          bottom: 89px;
        font-size: 13px;
         right: 90px;
        width: 86px
    }
     .depart3
    {
       bottom: 187px;
         right: 210px;
        font-size: 13px;
        width: 86px;
    }
     .depart4
    {
        bottom: 260px;
        right: 360px;
        font-size: 13px;
        width: 73px;
    }
     .depart5
    {
      
        bottom: 265px;
        right: 330px;
        font-size: 13px;
       width: 99px;
    }
        .ulicon
    {
      top: 34px;
    right: 375px;
        
    }
          .ulicon li:nth-child(1) a .fa-brands {
    padding-top:7px;
}
        .ulicon li:nth-child(2) a .fa-brands {
    padding-top:7px;
}
        .ulicon li:nth-child(3) a .fa-brands {
    padding-top:7px;
}
    .ulicon li:nth-child(4) a .fa-brands {
    padding-top:7px;
}
    
      .ulicon li a
    {
        width: 25px;
        height:  25px;
        margin-left: 10px;
    }
      .ulicon li a:hover
{
    
    transform: rotate(-30deg) skew(20deg) translate(5px,-5px);
   
}
    
    .ulicon li a:before
{

    height: 97%;
  
}
    
    .ulicon2
    {
         top: 5px;
          right: 200px;
    }
    
      .ulicon2 li a
    {
        width: 40px;
        height:  40px;
    }
    
        .ulicon2 li:nth-child(1) a .fa-brands {
        font-size: 30px;    
    padding-top:5px;
}
        .ulicon2 li:nth-child(2) a .fa-brands {
       font-size: 30px;          
    padding-top:5px;
}
        .ulicon2 li:nth-child(3) a .fa-brands {
     font-size: 30px;       
    padding-top:5px;
}
    .ulicon2 li:nth-child(4) a .fa-brands {
      font-size: 30px;   
    padding-top:5px;
}
    
    .h2icon
    {
       right: 445px;
        font-size: 20px;
        top: 30px;
        
    }
    
    .copy
    {
      bottom: 215px;
        right: 260px;
        font-size: 14px;
        width: 295px;
    }
    
        .showing {
        padding-bottom: 145%;
    }
   
    
    .slide {
        width: 40%;
        left: 100px;
    }
    .slide_content
    {
        width: 67%;
    }
    
    .slide_content p {

    margin-right: 20px;
 
    }
   section.slider .title {
        font-size: 30px;
        top: -20px;
        left: 130px;
    }
      section.slider .title2 {
        font-size: 30px;
        top: -20px;
        left: 180px;
    }
      section.slider .title3 {
        font-size: 30px;
        top: -20px;
        left: 200px;
    }
         button.slider__button {
      
        right: 390px;
        top: -30px;
    }
        button.slider__button2 {
     
        right: 20px;
        top: -30px;
    }
    
    .btn1
    {
        width: 170px;
        font-size: 16px;
        font-weight: 900;
    }
    .wrapper .cont ul {
   
    font-size: 19px;
 
}
    
    
 }


@media only screen and (min-width: 641px) and (max-width: 745px)
{ 
    
    
    .homebtn_site{
   width: 190px;
    height: 180px;
    right: 15px;
    bottom: 35px;
}

.homebtn_site::before {
    width: 116%;
    height: 55%;
}

.page-home .homebtn_site::after {
    width: 0;
    height: 0;
    border-color: transparent;
}

.homebtn_site::before,  .homebtn_site::after {
    position: absolute;
    top: 52%;
    right: 60%;
    z-index: 2;
    content: "";
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
     -webkit-border-top-right-radius:20px;
    -webkit-border-top-left-radius:20px;
    border: 2px solid #fff;
    transform: translate(50%, -50%);
    transition: all 500ms;
    
}

.homebtn
{
  width: 200px;
    height: 80px;
    overflow: hidden;
   -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
     -webkit-border-top-right-radius:20px;
    -webkit-border-top-left-radius:20px;
    position: absolute;
    top: 52%;
    right: 60%;
    border: 5px solid #fff;
    background-color: #161619;
    transform: translate(50%, -50%);
    background-position: 150%;
    background-repeat: no-repeat;
    background-size: 500%;
}

.homebtn_site:hover .homebtn {
  border-color: #f9c724;
  background-position:  -1%;
}



@keyframes exa2{
  
    from {transform:scale(1.05);}
   to {top:43px;right:2px; transform:scale(1);}
   
}

.homebtn_site:hover::before {
  width: 0;
  height: 0;
  border-color: transparent;
}

.homebtn_site:hover::after {
  width: 116%;
    height: 55%;
  border-color: #f9c724;
    animation-name: exa2;
animation-duration: 2s;
animation-fill-mode:forwards;
}


 .homebtn_site:hover .logo{
  opacity: 1;
}
 .homebtn_site:hover .logo{
  right: -100%;
}

 .homebtn_site:hover .logo2{
  opacity: 1;
}
 .homebtn_site:hover .logo2{
  right: -100%;
}
.page-home .home-site-btn-container:hover .home-site-btn .text {
  bottom: 100%;
}
.page-home .home-site-btn {
  width: 230px;
  height: 230px;
  overflow: hidden;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 50%;
  border: 5px solid #fff;
  background-color: #161619;
  transform: translate(50%, -50%);
  background-position: center -43%;
  background-repeat: no-repeat;
  background-size: 120%;
}
   .logo {
      
  transition: all 3s;
      width: 175px;
  height: 80px;
      margin-top: 100px;
      margin-right: -17px;
   
}

  .logo2 {
      
  transition: all 5s;
        width: 175px;
  height: 80px;
      margin-top: 100px;
         margin-right: 385px;
    
}


.homebtn .logo {
  position: absolute;
  top: -100px;
  right: 100%;
  z-index: 2;
  transform: translate(100%);
}

.homebtn .logo2 {
  position: absolute;
  top: -100px;
  right: 100%;
  z-index: 2;
  transform: translate(100%);
}
.page-home .home-site-btn .text {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 55px;
  right: 50%;
  z-index: 2;
  transform: translate(50%);
}

      .mainheader nav ul #fot
    {
      left: 350px;
     width: 200px;
          font-size: 20px;
        
    }
   


.mainheader nav #fot a{
    
    
  
    padding: 10px 25px;
    height: 40px;
   
}
    .mainheaderf nav , .mainheaderb nav , .mainheaderw nav
    {
        right: -8px;
       width:625px; 
        height: 80px;
    }
      .mainheaderf nav li , .mainheaderb nav li
    {
       
       width:105px;
      
    }
      .mainheaderw nav li
    {
      
       width:105px; 
    }
    .asizef,.asizeb
    {
        font-size: 20px;
   
    }
        .mainheaderf nav li #icon, .mainheaderb nav li #icon
    {
      width: 80px;
        height: 60px;
       left: 10px;
        bottom: 10px;
    }
      .mainheaderw nav li #icon
    {
      
     width: 80px;
        height: 60px;
       left: 10px;
        bottom: 10px;
    }
    .mainheader nav ul li a:before{
    top: 35px;
}
  
.mainheaderf nav ul li a:before,.mainheaderb nav ul li a:before,.mainheaderw nav ul li a:before{
    left: -3px;
    top: 49px;
}
    
    
    

      .butlogout
    {
        left: 200px;
    }
    
    .butpro:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 60px;
    top: 23px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.butpro:hover::before{
    margin: 5px;
    width: 60%;
    
    
}
    
  .butpro:hover
{
    color:#2f2e40;
}

.butpro
{
  right: 450px;
    width:20%;
    font-size: 15px;
    font-weight: 900;
}
    
     .butpro font
     {
         position: relative;
         bottom: 5px;
         
     } 
    
     #micon {
    width: 30px;
  }
    
    #most_watch {
  height: 130px;

}
    
 .clock span{
    font-size: 23px;
    width: 20px;
    display: inline-block;
    text-align: center;
    position: relative;
     margin-left: 10px;
}

.clock span:nth-child(1):after{

    font-size: 15px;
    bottom: 10px;
    font-weight: 500;
}
    
    .clock span:nth-child(3):after{
    font-size: 15px;
    bottom: 10px;
    font-weight: 500;
       
        
}
    
    .clock span:nth-child(5):after{

    font-size: 15px;
    bottom: 10px;
    font-weight: 500;
}
    .containers {
        width: 200px;
        height: 50px;
        top: 50%;
        left: 17%;
          font-size: 30px;
    }
    
    .containers::before{
 
    height: 100px;
    width: 100px;
    top: 10px;
    left: 80px;

}

.containers::after{

    height: 100px;
    width: 100px;
    right: 100px;
    
}
    
    .topcontent h2, .topcontent2 h2
    {
         font-size: 30px;
        
    }
   
   #iconprof
{
   margin-left:-22px; 
 height:30px;
    width: 40px;
    margin-top: -7px;
} 
    #fonts
    {
         font-size: 18px;
    }
    
    p
    {
          font-size: 20px;
    }
     #fontsdate
    {
         font-size: 17px;
    }
.titlepost
    {
          font-size: 35px;
    }
    .post-info
    {
        font-size: 16px;
    }
    
    .npost
    {
          font-size: 28px;
    }
#picpost
    {
        width: 100%;
       height: 300px;
    }
    .wrapper label {

    font-size: 25px;
}
    
   #pic1
    {
        width: 200px;
        height: 130px;
    }
    .containermostVid
    {
          height: 130px;
    }
    
     #tech {
    width: 101.3%;
}
    
    
    
    .top-sidbar h2, .middle-sidbar h2, .bottom-sidbar h2
    {
         font-size: 35px;
    }
    .top2 h2
    {
        margin-top: 80px;
    }
    #iconlink
    {
        margin-top: -20px;
       width: 60px;
        height: 60px;
    }
    .videoplayer
    {
        width: 100%;
       
        
    }
     iframe
    {
        width: 100%;
      
    }
    
    .section1
    {
         width: 100%;
    }
    
    
    .row {
      
        font-size: 14px;
        height: 730px;
        
    }
    
  
        .maylike .maylike-img>img {
   
       width:100%;
    height:190px;
    }
    
    .maylike
    {
         width: 96%;
    height: 190px;
    }
    .maylike .maylike-body .cta-btn {
   font-size: 23px;
        top: 110px;
        right: 400px;
     width: 50%;
    }
    
     .maylike .maylike-body h3 {
        color: #FFF;
            text-align:center;
       font-size: 17px;
        position: absolute;
        top: -7px;
        right:250px;
        width: 320px;
    }
    
    
    
    .titlechamp
    {
        width: 660px;
    }
    
    
    
     .titlechamp h1 {
        right: 270px;
    }
    .boxRote
    {
         margin-bottom: 90px;
    }
    .box
    {
        width: 330px;
        height: 250px;
        right: 160px;
       
    }
    .box span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        transform: rotateY(calc(var(--i)* 70deg)) translateZ(270px);
        -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, rgba(4, 4, 4, 0.267));
    }
      
   #font1
    {
        font-size: 20px;
    }
     .depart
    {
        font-size: 16px;
            bottom: 88px;
    }
     .depart2
    {
         font-size: 16px;
        right: 100px;
          bottom: 112px;
         width: 105px;
    }
     .depart3
    {
         font-size: 16px;
         right: 250px;
       bottom: 232px;
        width: 105px;
    }
     .depart4
    {
         font-size: 16px;
        right: 30px;
        bottom: 375px;
        width: 85px;
    }
     .depart5
    {
       font-size: 16px;
        right: 390px;
        bottom: 327px;
       width: 125px;
    }
      .ulicon
    {
        top: 10px;
        right: 460px;
        
    }
    
      .ulicon li a
    {
        width: 30px;
        height:  30px;
        margin-left: 10px;
    }
    
          .ulicon li:nth-child(1) a .fa-brands {
       font-size: 25px;
    padding-top:8px;
}
        .ulicon li:nth-child(2) a .fa-brands {
      font-size: 25px;
    padding-top:8px;
}
        .ulicon li:nth-child(3) a .fa-brands {
       font-size: 25px;
    padding-top:8px;
}
    .ulicon li:nth-child(4) a .fa-brands {
        font-size: 25px;
    padding-top:8px;
}
    
 .ulicon li a:before
{
  
    height: 95%;

    
}
   
    .ulicon2
    {
         top: 10px;
          right: 260px;
    }
    
      .ulicon2 li a
    {
        width: 45px;
        height:  45px;
    }
    
        .ulicon2 li:nth-child(1) a .fa-brands {
      font-size: 35px;       
    padding-top:5px;
}
        .ulicon2 li:nth-child(2) a .fa-brands {
            font-size: 35px;    
    padding-top:5px;
}
        .ulicon2 li:nth-child(3) a .fa-brands {
            font-size: 35px;    
    padding-top:5px;
}
    .ulicon2 li:nth-child(4) a .fa-brands {
        font-size: 35px;    
    padding-top:5px;
}
    
    .h2icon
    {
         right: 525px;
        font-size: 25px;
        top: 5px;
        width: 130px;
    }
    
    .copy
    {
        bottom: 290px;
        right: 320px;
        font-size: 15px;
        width: 316px;
    }
    
        .showing {
        padding-bottom: 175%;
    }
   
    
    .slide {
        width: 40%;
        left: 100px;
    }
    .slide_content
    {
        width: 67%;
    }
    
    .slide_content p {

    margin-right: 20px;
 
    }
   section.slider .title {
        font-size: 30px;
        top: -20px;
        left: 130px;
    }
      section.slider .title2 {
        font-size: 30px;
        top: -20px;
        left: 180px;
    }
      section.slider .title3 {
        font-size: 30px;
        top: -20px;
        left: 200px;
    }
         button.slider__button {
      
        right: 390px;
        top: -30px;
    }
        button.slider__button2 {
     
        right: 10px;
        top: -30px;
    }
    
      .btn1
    {
        width: 195px;
        font-size: 20px;
    }
    
    .wrapper .cont ul {
   
    font-size: 20px;
 
}
 }

/*---------Between (641px) and (745px)----------------*/

@media only screen and (min-width: 650px) and (max-width: 653px)
{ 
        .seh {
        right: -255px;
        top: 100px;
        width: 390px;
            height: 50px;
              font-size: 25px;
    }
     .btn {
        right: 150px;
        bottom: -48px;
        width: 100px;
          height: 50px;
         font-size: 25px;
    }
    
   
.containerVid a .Show{
        
    background-size:9% ;
    }
    
      .mainheader nav ul #fot
    {
      left: 320px;
     width: 200px;
          font-size: 20px;
        
    }
   
    .mainheaderf nav , .mainheaderb nav , .mainheaderw nav
    {
        right: -8px;
       width:565px; 
        height: 80px;
    }
 
    
    .mainheader nav ul li a:before{
    top: 35px;
}
  
.mainheaderf nav ul li a:before,.mainheaderb nav ul li a:before,.mainheaderw nav ul li a:before{
    left: 0px;
    top: 49px;
}    

      .butlogout
    {
        left: 195px;
    }
    
    .butpro:before{

    left: 60px;
    top: 23px;
  
}
    
.butpro:hover::before{
    margin: 5px;
    width: 60%;
    
    
}
    
  .butpro:hover
{
    color:#2f2e40;
}

.butpro
{
  right: 400px;
    width:20%;
    font-size: 15px;
    font-weight: 900;
}
    
  .butpro font
     {
         position: relative;
         bottom: 5px;
         
     }  
    
      .maylike .maylike-body .cta-btn {
   font-size: 20px;
        top: 110px;
        right: 380px;
     width: 50%;
    }
    
     .maylike .maylike-body h3 {
        color: #FFF;
            text-align:center;
       font-size: 17px;
        position: absolute;
        top: -7px;
        right:200px;
        width: 320px;
    }
    
 
    .containers {
        width: 200px;
        height: 50px;
        top: 50%;
        left: 19%;
          font-size: 30px;
    }
    
   
    
    .topcontent h2, .topcontent2 h2
    {
         font-size: 30px;
        
    }
   


    
    .titlechamp
    {
        width: 610px;
    }
    
    
    
     .titlechamp h1 {
        right: 250px;
    }
    
    .box
    {
        width: 250px;
        height: 250px;
        right: 180px;
       
    }
    
      
   #font1
    {
        font-size: 20px;
    }
    p
    {
          font-size: 19px;
    }
 .depart
    {
        font-size: 16px;
            bottom: 90px;
    }
     .depart2
    {
         font-size: 16px;
        right: 100px;
          bottom: 113px;
         width: 105px;
    }
     .depart3
    {
         font-size: 16px;
         right: 220px;
       bottom: 235px;
       width: 105px;
    }
     .depart4
    {
         font-size: 16px;
        right: 350px;
       bottom: 330px;
        width: 85px;
    }
      .depart5
    {
         font-size: 16px;
        right: 350px;
        bottom: 330px;
       
    }
       .ulicon
    {
       top: 17px;
        right: 370px;
        
    }
    
      .ulicon li a
    {
        width: 30px;
        height:  30px;
        margin-left: 10px;
    }
    
    .ulicon2
    {
         top: 9px;
          right: 190px;
    }
    
     
    
 
    .h2icon
    {
        right: 435px;
        font-size: 25px;
        top: 20px;
        width: 150px;
    }
    
    .copy
    {
        bottom: 287px;
        right: 240px;
        font-size: 15px;
        width: 317px;
    }
    
        .showing {
        padding-bottom: 145%;
    }
   

      .btn1
    {
        width: 180px;
        font-size: 20px;
    }
 }

@media only screen and (min-width: 654px) and (max-width: 667px)
{ 
         .seh {
        right: -255px;
        top: 100px;
        width: 390px;
            height: 50px;
              font-size: 25px;
    }
     .btn {
        right: 150px;
        bottom: -48px;
        width: 100px;
          height: 50px;
         font-size: 25px;
    }
    
   
.containerVid a .Show{
        
    background-size:9% ;
    }
    
      .mainheader nav ul #fot
    {
      left: 330px;
     width: 200px;
          font-size: 20px;
        
    }
   
    .mainheaderf nav , .mainheaderb nav , .mainheaderw nav
    {
        right: -8px;
       width:585px; 
        height: 80px;
    }
 
    
    .mainheader nav ul li a:before{
    top: 35px;
}
  
.mainheaderf nav ul li a:before,.mainheaderb nav ul li a:before,.mainheaderw nav ul li a:before{
    left: 0px;
    top: 49px;
}    

      .butlogout
    {
        left: 195px;
    }
    
    .butpro:before{

    left: 60px;
    top: 23px;
  
}
    
.butpro:hover::before{
    margin: 5px;
    width: 60%;
    
    
}
    
  .butpro:hover
{
    color:#2f2e40;
}

.butpro
{
  right: 420px;
    width:20%;
    font-size: 15px;
    font-weight: 900;
}
    
  .butpro font
     {
         position: relative;
         bottom: 5px;
         
     }    
 
    .containers {
        width: 200px;
        height: 50px;
        top: 50%;
        left: 19%;
          font-size: 30px;
    }
    
   
    
    .topcontent h2, .topcontent2 h2
    {
         font-size: 30px;
        
    }
   

    
     .maylike .maylike-body h3 {
     
  
        right:200px;
     
    }
    
    
    .titlechamp
    {
        width: 620px;
    }
    
    
    
     .titlechamp h1 {
        right: 250px;
    }
    
    .box
    {
        width: 250px;
        height: 250px;
        right: 180px;
       
    }
    
      
   #font1
    {
        font-size: 20px;
    }
    p
    {
          font-size: 20px;
    }
  .depart
    {
        font-size: 16px;
            bottom: 90px;
    }
     .depart2
    {
         font-size: 16px;
        right: 100px;
          bottom: 113px;
         width: 105px;
    }
     .depart3
    {
         font-size: 16px;
         right: 220px;
       bottom: 233px;
       width: 105px;
    }
     .depart4
    {
         font-size: 16px;
        right: 350px;
       bottom: 330px;
        width: 85px;
    }
      .depart5
    {
         font-size: 16px;
        right: 350px;
        bottom: 330px;
       
    }
       .ulicon
    {
       top: 17px;
        right: 390px;
        
    }
    
      .ulicon li a
    {
        width: 30px;
        height:  30px;
        margin-left: 10px;
    }
    
    .ulicon2
    {
         top: 9px;
          right: 200px;
    }
    
     
    
   
    .h2icon
    {
        right: 455px;
        font-size: 25px;
        top: 20px;
        width: 150px;
    }
    
    .copy
    {
        bottom: 287px;
        right: 260px;
        font-size: 15px;
        width: 317px;
    }
    
        .showing {
        padding-bottom: 145%;
    }
   

      .btn1
    {
        width: 180px;
        font-size: 20px;
    }
 }

@media only screen and (min-width: 700px) and (max-width: 712px)
{
    .seh{
    
     position:relative;
   
        right: -280px;
        top:37px;
    display:block; 
    width:400px;
    border-radius:5px; 
 background-color: #f9c724; 
    }

    .btn{
    
     position:relative;
   right: 135px;
       bottom: 0px;
    display:block; 
    width:80px;
    border-radius:5px; 
    background-color: #f9c724; 

    }
     .ulicon
    {
         
          right: 450px;
    }
      .ulicon2
    {
         top: 10px;
          right: 230px;
    }

       .showing {
        padding-bottom: 135%;
    }
 
   .copy
    {
        right: 290px;
    }
}
@media only screen and (min-width: 730px) and (max-width: 736px)
{ 
           .seh {
        right: -255px;
        top: 100px;
        width: 390px;
            height: 50px;
              font-size: 25px;
    }
     .btn {
        right: 150px;
        bottom: -48px;
        width: 100px;
          height: 50px;
         font-size: 25px;
    }

    

   .containerVid a .Show{
        
        background-size:8%;
    
    }

.butpro
{
  right: 470px;
    width:20%;
    font-size: 15px;
    font-weight: 900;
}
    
  .butpro font
     {
         position: relative;
         bottom: 5px;
         
     }    
 
    
   
    
    .topcontent h2, .topcontent2 h2
    {
         font-size: 30px;
        
    }
   


    .titlechamp
    {
        width: 680px;
    }
    
    
    
     .titlechamp h1 {
        right: 280px;
    }
    
    .box
    {
        width: 250px;
        height: 250px;
        right: 200px;
       
    }
    
 
    
        .showing {
        padding-bottom: 125%;
    }
   

      .btn1
    {
        width: 200px;
        font-size: 20px;
    }
 }

@media only screen and (min-width: 740px) and (max-width: 745px)
{ 
        .seh {
        right: -285px;
        top: 100px;
        width: 420px;
            height: 50px;
              font-size: 25px;
    }
     .btn {
        right: 150px;
        bottom: -48px;
        width: 100px;
          height: 50px;
         font-size: 25px;
    }
    

    

   

.butpro
{
  right: 475px;
    width:20%;
    font-size: 15px;
    font-weight: 900;
}
    
  .butpro font
     {
         position: relative;
         bottom: 5px;
         
     }    
 
    
   .containerVid a .Show{
        
        background-size:8% 37%;
    
    }
    
    .topcontent h2, .topcontent2 h2
    {
         font-size: 30px;
        
    }
   

    
    .titlechamp
    {
        width: 680px;
    }
    
    
    
     .titlechamp h1 {
        right: 280px;
    }
    
    .box
    {
        width: 250px;
        height: 250px;
        right: 200px;
       
    }
    
 
    
        .showing {
        padding-bottom: 135%;
    }
   

      .btn1
    {
        width: 200px;
        font-size: 20px;
    }
 }

/*---------Between (641px) and (745px)----------------*/

/*@media screen  and (max-device-width: 750px) and (orientation: landscape)
{
    .body{
    
    
    width: 90%;
    font-size: 95%;
    
}
    
       .mainheaderlogo nav
{
      position: relative;
    width: 100%;
    background-color: #2f2e40;
    height: 120px;
    top:-15px;
    right: auto;
    margin-bottom: -20px;
    border-radius: 5px;
    -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
    
    .logs
{
    
    width: 20%;
    background-color: #2f2e40;
    bottom: 10px;
    left: 10px;
   
}
     .logs a h1
{
    position: absolute;
    bottom: 2px;
    right: 14px;
     font-size: 12px;
    font-weight: 1000;
    width: 100px;
} 
    
.logs:before{
   
    height: 3px;
    width: 0%;
    left: 2px;
    top: 25px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.logs:hover::before{
    margin: 5px;
    width: 90%;
    
    
}
    
  .logs:hover
{
    color:#2f2e40;
}
    
    .butlogout
    {
        left: 160px;
    }
    
    .butpro:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 40px;
    top: 25px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.butpro:hover::before{
    margin: 5px;
    width: 60%;
    
    
}
    
  .butpro:hover
{
    color:#2f2e40;
}

.butpro
{
  right: 420px;
    width:17%;
    font-size: 15px;
    font-weight: 900;
}


   #iconprof
{
   margin-left:-25px; 
 height:30px;
    width: 35px;
    margin-top: -5px;
} 
    
    #tech
{ 
   
     border:2px solid ;
    

    
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
   
   margin-bottom:  15px ;
 margin-right: -5px;
  height:200px;
  width:102%;
     
    background-color: black;
color: white;
text-align: center
   
 
}
    

    .homebtn_site{
    width: 230px;
    height: 190px;
    -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
     -webkit-border-top-right-radius:20px;
    -webkit-border-top-left-radius:20px;
    position: relative;
    right: 60px;
    
    
    bottom: 35px;
}

.homebtn_site::before {
    width: 73%;
    height: 40%;
    
    
}

.page-home .homebtn_site::after {
    width: 0;
    height: 0;
    border-color: transparent;
}

.homebtn_site::before,  .homebtn_site::after {
   
    right: 15%;

}

.homebtn
{
    width: 150px;
    height: 60px;
    
    top: 50%;
    right: 15%;
    border: 5px solid #fff;
    background-color: #161619;
    transform: translate(50%, -50%);
    background-position: 150%;
    background-repeat: no-repeat;
    background-size: 500%;
}
    @keyframes exa2{
  
    from {transform:scale(1.05);}
   to {position:relative;top:55px;right:-54px; transform:scale(1);}
   
}

.homebtn_site:hover::before {
  width: 0;
  height: 0;
  border-color: transparent;
}

.homebtn_site:hover::after {
  width: 75%;
  height: 40%;
  border-color: #f9c724;
    animation-name: exa2;
animation-duration: 2s;
animation-fill-mode:forwards;
}


 .homebtn_site:hover .logo{
  opacity: 1;
}
 .homebtn_site:hover .logo{
  right: -100%;
}
    
.homebtn_site:hover .logo2{
  opacity: 1;
}
 .homebtn_site:hover .logo2{
  right: -100%;
}
.page-home .home-site-btn-container:hover .home-site-btn .text {
  bottom: 100%;
}
.page-home .home-site-btn {
  width: 230px;
  height: 230px;
  overflow: hidden;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 50%;
  border: 5px solid #fff;
  background-color: #161619;
  transform: translate(50%, -50%);
  background-position: center -43%;
  background-repeat: no-repeat;
  background-size: 120%;
}
  .logo {
      
  transition: all 3s;
      width: 70px;
  
      margin-top: 100px;
      margin-right: -40px;
}
    
     .logo2 {
      
   transition: all 5s;
     width: 70px;
  
      margin-top: 100px;
         margin-right: 260px;
   
}


.homebtn .logo {
  position: absolute;
  top: -100px;
  right: 100%;
  z-index: 2;
  transform: translate(100%);
}
    
    .homebtn .logo2 {
  position: absolute;
  top: -100px;
  right: 100%;
  z-index: 2;
  transform: translate(100%);
}
.page-home .home-site-btn .text {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 55px;
  right: 50%;
  z-index: 2;
  transform: translate(50%);
}

  
   .containers{
    width: 180px;
    height: 50px;
    top: 50%;
    left: 17%;
    
}

.clock{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.containers::before{
    content: '';
    background:  #f9c724;
    position: absolute;
    height: 100px;
    width: 100px;
    top: 10px;
    left: 80px;
    border-radius: 75% 39% 58% 52% / 60% 62% 50% 40%;
    z-index: -1;
}

.containers::after{
    content: '';
    background: #59516b;
    position: absolute;
    height: 100px;
    width: 100px;
    bottom: 0px;
    right: 80px;
    border-radius: 53% 47% 39% 61% / 52% 34% 66% 48%;
    z-index: -1;
}



    
    .navBtn {
    position: relative;
    right: 5px;
    top: 5px;
    height: 80%;
    width: 50px;
    background-color: #59516b;
    float: right;
    -webkit-transform: translateZ(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
        border-radius: 5px;
}

.navBtn .menuIcon {
     
     position: absolute; 
     left: 50%;
    top: 50%;
 bottom: auto; 
  right: auto; 
     width: 30px; 
    height: 3px; 
    background-color: #fff;
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}


.navBtn .menuIcon:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: inherit;
    left: 0;
}
    
    .navBtn .menuIcon:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: inherit;
    left: 0;
}

.navBtn .menuIcon:after {
    top: 8px;
}

.navBtn .menuIcon:after {
    top: 6px;
}


.navBtn .menuIcon:before {
    bottom: 8px;
}

.navBtn .menuIcon:before {
    bottom: 6px;
}

    
     .navBftn {
    position: relative;
    right: 5px;
    top: 5px;
    height: 80%;
    width: 50px;
    background-color: #f9c724;
    float: right;
    -webkit-transform: translateZ(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
           border-radius: 5px;
}

.navBftn .menuIcon {
     
     position: absolute; 
     left: 50%;
    top: 50%;
 bottom: auto; 
  right: auto; 
     width: 30px; 
    height: 3px; 

    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}


.navBftn .menuIcon:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: inherit;
    left: 0;
}
    .navBftn .menuIcon:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: inherit;
    left: 0;
        
       
}
     

.navBftn .menuIcon:after {
    top: 8px;
}

.navBftn .menuIcon:after {
    top: 6px;
}


.navBftn .menuIcon:before {
    bottom: 8px;
}

.navBftn .menuIcon:before {
    bottom: 6px;
}

    
    
    .navBftn .menuIcon:after {
    transform: rotate(-45deg);
    background: #fff;
    top: 0;
}
    
     .navBftn .menuIcon:before {
    transform: rotate(45deg);
    background: #fff;
    bottom: 0;
}

    
  
#pics
{ 

  width:100%;
     margin-right: 0.1px;
}
    
    #font1
    {
        font-size: 17px;
    }




    

    
   .topcontent2
{
 font-size: 16px;
   
}
    
    #sdsd
    {
        
       position: absolute;
           
    }
    #wewd
    {
        
       position: absolute;
       
           
    }
    
    #icon
{

  position: relative;
    bottom: 10px;
  width: 45px;
    height: 25px; 
   
}
    
.mainheader img{
    
    width: 100%;
   
    
}

 
    
.mainheader nav{
    
    position:absolute;
    height: 10px;
    right: auto;
   padding-bottom: 40px;
border-top-left-radius:0px;
    border-top-left-radius:0px;
}
    
    .seh{
    
     position:relative;
   
        right: -200px;
        top:30px;
    display:block; 
    width:350px;
    border-radius:5px; 
 background-color: #f9c724; 
    }

    .btn{
    
     position:relative;
   right: 160px;
       bottom: 8px;
    display:block; 
    width:100px;
    border-radius:5px; 
    background-color: #f9c724; 

    }


    
   .sss{
         width: 50%;
        float: right;
       margin-top: 20px;
        max-height: 0px;
         background: linear-gradient(60deg, #59516b, #2f2e40, #59516b, #2f2e40,#59516b, #2f2e40,#59516b, #2f2e40,#59516b, #2f2e40);

       
    }
    
    


.mainheader nav ul #fot {
    
    position: relative;
    
    left: 320px;
    
width: 160px;
    text-align: center;
}

.mainheader nav a:link , .mainheader nav a:visited {
    
    
  
    padding: 10px 25px;
    height: 15px;
    display: block;
}

    
    
.mainheader nav ul li a:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 6px;
    top: 26px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
    
}
    
    
    
.mainheader nav ul li a:hover::before{
    width: 90%;
    
}
    
    .mainheader nav ul li a:hover
{
    color:#2f2e40;
}
    
    
    .mainheaderbtn nav
{
         
    width: 100%;
    height: 120px;
    top:70px;
z-index: 1;
   
}

.btn1
{

    top:50px;
    right: 25px;

    width: 170px;
    height: 30px;
    font-size: 12px;
    font-weight: 900;
    font-style: oblique;

}

    .containerMatch{
  
    right: 12px;
  

}
.content{
    
    width: 100%;
    float: left;
    margin-top: 2%;
}

.topcontent{
    
 background-color:ghostwhite;
     border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
    
   
    margin-bottom: 4%;
      height: auto;
}


.bottomcontent{
    
    margin-top: 3%;
}

.top-sidbar, .middle-sidbar, .bottom-sidbar{
     width: 94%;
   margin: 2% 0 2% 0%;
    padding: 2% 3%;
}


.mainFooter{
    
    width:  100%;
    height: 130px;
    float: left;
    border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
    background-color: #2f2e40;
  margin: 2% 0;
}

.mainFooter p{

    width:  92%;
    margin: 10px auto;
    color: #FFF;
}

    

 .titlepost
    {
        font-size: 25px;
    }
.post-info{
    
    color: #f9c724;
    font-size: 16px;
}
    
    
    #picpost
{ 
  width:520px;
}
    
    .section1{
    height: 450px;
    width: 510px;
}

.videoplayer
    {
           width: 100%;
   
    }
     iframe
    {
         width: 100%;
     
    }
    
.buttons{
    bottom: 0px;
}


     .showing
    {
        
       
        max-height: 30em;
        padding-right: 50%;
         padding-bottom: 70%;
    }
    
      .dpong
    {
        
        position:;
        max-height: 20em;
        padding-right: 50%;
         padding-bottom: 30%;
    }
    
    
     .menu-icon{
        
        display: block;
    }
    
 #ad nav
{
    
   
  right: 0px;
  width: 100%;
    height: 150px; 
    
   
}
    
     #adimage
{
    
   
  right: 0px;
  width: 100%;
    height: 150px; 
    
   
}
   
    .maylike {
  position: relative;
  overflow: hidden;
  margin: 15px 6px;
    width: 180px;
    height: 300px;
    left: 0px;
      float: left;
    top: 10px;
border-radius: 5%;
        
}

.maylike .maylike-body {
width: 35%;
    
}


.maylike .maylike-body h3 {
  color: #FFF;
    font-size: 15px;
    position: absolute;
    top: 1px;
    right: 15px;
    
}

.maylike .maylike-body .cta-btn {
  color: black;
position: absolute;
    top: 120px;
    right: 120px;
    font-size: 14px;
}

 
    .maylike:before {

  left: 0px;
  width: 60%;

}

.maylike:after {

  
  left: 0.5px;
 
    width: 200px;

}

.row {
  width: 100%;
   left: 0px;
    height: 400px;
     font-size: 10px;
}

    .boxRote
{
    position: relative;
    z-index: 3;
  width: 70%;
    float: right;
   left: 1px;
    height: 400px;
    margin-top: 50px;
          -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
.box {
    
    position: relative;
    width: 120px;
    height: 200px;
    top: 100px;
    right: 55%;
    transform-style: preserve-3d;
    animation: animatebox 20s linear infinite;
  z-index: 3;
}

.box:hover{
    animation-play-state: paused;
}


@keyframes animatebox {
    0%{
        transform: perspective(5000px) rotateY(0deg);
    }
    100%{
        transform: perspective(5000px) rotateY(360deg);
    }
}

.box span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform-style: preserve-3d;
    transform: rotateY(calc(var(--i) * 36deg)) translateZ(220px);
    -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, rgba(4, 4, 4, 0.267));
}



.box span img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.5s;
    border-radius: 15px;
    border: 4px double rgb(0, 0, 0);
}

.box span img:hover{
    transform: translateY(-2px);
    
}

    .titlechamp
{

    width: 590px;
}

.titlechamp h1
{
  
    right: 250px;
    
}
    
    .container {
	width: 500px;
	height: 100%;
	margin: 0 auto;
}

section.slider {
    padding: 10px 0;
    background: #0e0e16;
    height: 400px;
    width: 100%;
    margin-top: 50px;
     border-radius: 2%;
}

section.slider .title {
    font-size: 42px;
    font-weight: 900;
    position: relative;
    top: -30px;
    left: 110%;
}

.slider-title {
    display: flex;
    justify-content: space-between;
    align-items: end;
	margin-bottom: -50px;
}


button.slider__button {
    width: 50px;
    height: 50px;
    font-size: 25px;
    right: 390px;
    top: -50px;
}

button.slider__button2 {
	
    width: 50px;
    height: 50px;
    font-size: 25px;
    position: relative;
    right: 10px;
    top: -50px;
}    



.slider .btns {
    text-align: center;
    margin-top: 50px;
}

.slider .btns button {
    height: 4px;
    width: 10px;
    border-radius: 50px;
    font-size: 18px;
    padding: 0 10px;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    background: none;
    font-family: charlieUltra;
    border: 3px solid #f9c724;
    color: #f9c724;
	letter-spacing: 1px;
}


.slider {

  --slide-min-width: 40rem;

}


.slide {

    width: 40%;

    left: 120px;

    
}
    

.slide .slideimg {
	 width: 100%;
	 border-radius: 15px;
    height: 300px;
     border: 3px solid #383c4e;
   
    padding: 5px;
}
    .slide .slideimg:hover {
    border: 3px solid #f9c724;
    }
   
    .slider__track {
  display: flex;
  overflow-x: auto;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
  padding-inline: var(--slider-padding);
  scroll-behavior: smooth;
  list-style-type: none;
  padding: 0;
  margin-right: calc(--var(slider-column-gap) * -1);
  scrollbar-width: none;
}

.slider__track > * {
  flex: 0 0 var(--slide-width);
  width:500px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding-right: var(--slider-column-gap);
}
    
   
    

    
    .mainheaderf nav{
     
    position:relative;
        width:560px;
   
    right: -5px;
   
   height:10px; 
    opacity:1;
    visibility:visible;
   
}
    
.mainheaderf nav ul {
    
    margin: 0 auto;
    
}


.mainheaderf nav ul li {
    padding: 1px;
    padding-left: 4px;
      position:relative;
 float: right;
    display: inline;
    
}

    .mainheader nav ul #fot:nth-child(2){
   
    
}
    

    
.mainheaderf nav a:link , .mainheaderf nav a:visited {
    
    
   color: #fff;

     position:relative;
    bottom: 30px;
    left: 30px;
   margin-left: -10px;

    
   
}

.mainheaderf nav ul li a:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: -4px;
    top: 22px;
    background-color:#2f2e40 ;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
    
}
    
.mainheaderf nav ul li a:hover::before{
    margin: 5px;
    width: 100%;
    
    
}
    
    .mainheaderf nav ul li a:hover
{
    color:antiquewhite;
}
    
     .showingf
    {
        max-height: 20em;
       
         padding-bottom: 9%;
    }

     .asizef{
        
   font-size: 14px;
        
    }
    
    .tfoot{
        
   font-size: 14px;
        
    }
    
    .top-sidbarf, .middle-sidbarf, .bottom-sidbarf{
     width: 94%;
   margin: 2% 0 2% 0%;
    padding: 2% 3%;
}

  
    
    .mainheaderb nav{
     
 position:relative;
     width:560px;
   
    right: -5px;
   
  height:10px; 
    opacity:1;
    visibility:visible;

   
}
    
      .mainheader nav ul #fot:nth-child(3){
   
     
}
    
    .mainheaderb nav ul {
    
    margin: 0 auto;
}

.mainheaderb nav ul li {
    padding: 1px;
    padding-left: 4px;
      position:relative;
 float: right;
    display: inline;
}

.mainheaderb nav a:link , .mainheaderb nav a:visited {
    
    
   color: #fff;
     position:relative;
    bottom: 30px;
     left: 30px;
   margin-left: -10px;
 
}

.mainheaderb nav ul li a:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: -4px;
    top: 22px;
    background-color:#2f2e40 ;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.mainheaderb nav ul li a:hover::before{
    margin: 5px;
    width: 93%;
    
    
}
    
    .mainheaderb nav ul li a:hover
{
    color:#6b71bf;
}
    
     .showingb
    {
        max-height: 20em;
       
         padding-bottom: 9%;
    }

     .asizeb{
        
   font-size: 14px;
        
    }
    
    .top-sidbarb, .middle-sidbarb, .bottom-sidbarb{
     width: 94%;
   margin: 2% 0 2% 0%;
    padding: 2% 3%;
}

   
    .mainheaderw nav{
     
    position:relative;
       width:560px;
   
    right: -5px;
   
   height:10px; 
    opacity:1;
    visibility:visible;

   
}
    
     .mainheader nav ul #fot:nth-child(4){
   
   
}
   
    
    .mainheaderw nav ul {
    
    margin: 0 auto;
        
}

.mainheaderw nav ul li {
    padding-top: 1px;
     padding-left: 10px;
      position:relative;
 float: right;
    display: inline;
}

.mainheaderw nav a:link , .mainheaderw nav a:visited {
    
    
   color: #fff;
     position:relative;
    bottom: 30px;
    left: 30px;
   margin-left: -18px;
}

.mainheaderw nav ul li a:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: -4px;
    top: 22px;
    background-color:#2f2e40 ;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.mainheaderw nav ul li a:hover::before{
    margin: 5px;
    width: 93%;
    
    
}
    
    .mainheaderw nav ul li a:hover
{
    color:#6b71bf;
}
    
     .showingw
    {
        max-height: 20em;
       
         padding-bottom: 9%;
    }
    .asizew{
        
   font-size: 12px;
        
    }
    
    .top-sidbarw, .middle-sidbarw, .bottom-sidbarw{
     width: 94%;
   margin: 2% 0 2% 0%;
    padding: 2% 3%;
        
}

   

   .ulicon{
    
    position:relative;
    bottom: 20px;
    padding-bottom: 60%;
    right: 60%;
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    display: flex;
} 
    
    
    
    .ulicon li{
    
    list-style: none;
    margin: 0 10px;
        padding-top: 0px;
}
    
    .ulicon li a 
{
    
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    background: #fff;
    text-align: center;
    transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(0,0);
    transition: .5s;
    box-shadow: -20px 20px 10px rgba(0,0,0,.5);
}

.ulicon li a:before
{
    content: '';
    position: absolute;
    top: 6px;
    left: -11px;
    height: 89%;
    width: 11px;
    background: #b1b1b1;
    transition: .5s;
    transform:  rotate(0deg) skewY(-45deg);
    
}

.ulicon li a:after
{
    content: '';
    position: absolute;
    bottom: -10px;
    left: -6px;
    height: 10px;
    width: 100%;
    background: #b1b1b1;
    transition: .5s;
    transform:  rotate(0deg) skewx(-45deg);
    
}
    
    .ulicon li a:hover
{
    
    transform: perspective(1000px) rotate(-30deg) skew(20deg) translate(10px,-10px);
    box-shadow: -50px 50px 50px rgba(0,0,0,.5);
}
    
    .ulicon li:nth-child(1) a .fa-brands
{
    
     font-size: 19px;
    position: relative;
  
    top: -5px;
}

.ulicon li:nth-child(2) a .fa-brands
{
    
  font-size: 19px;
  
     position: relative;
  
    top: -5px;
}

.ulicon li:nth-child(3) a .fa-brands
{
    
    font-size: 19px;
  
      position: relative;
  
    top: -5px;
}

.ulicon li:nth-child(4) a .fa-brands
{
    
    font-size: 19px;
  
      position: relative;
  
    top: -5px;

}
    
    
    
    .ulicon2{
    
    position: relative;
   top: 10px;
    right:270px;
        width: 100px;
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    display: flex;
    
}

.ulicon2 li{
    
    list-style: none;
    margin: 0 5px;
    
}


.ulicon2 li a 
{
    
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    background: #fff;
    text-align: center;
    border-radius: 100%;
    transform: perspective(1000px)  translate(0,0);
    transition: .5s;
    
}
    
    .h2icon{
 
    position: relative;
        top: 20px;
        width: 90px;
     left:400px;
    font-size: 20px;
   
}
        .depart
{
   
    bottom: 110px;
     display:grid;
   font-size: 14px;
    font-weight: 900;
}

.depart2
{
   
  bottom: 130px;
 width: 100px;
    right: 80px;
 display:grid;
  font-size: 14px;
    font-weight: 900;
}

.depart3
{
   
    bottom: 235px;
    
    right: 190px;
 display:grid;
   font-size: 14px;
    font-weight: 900;
}

.depart4
{
  
    bottom: 320px;
 width: 72px;
    right: 260px;
  
 display:grid;
  font-size:14px;
    font-weight: 900;
    
}

.copy{
    
    
   bottom: 250px;
    width: 210px;
    right: 350px;
    font-size: 12px;
}
    
   .wrapper {
    
margin-right: -15px ;

}
}*/

@media (min-width: 751px) and (max-width: 800px) 
{ 
          .seh {
        right: -265px;
        top: 100px;
        width: 410px;
            height: 50px;
              font-size: 25px;
    }
     .btn {
        right: 160px;
        bottom: -48px;
        width: 100px;
          height: 50px;
         font-size: 25px;
    }
    
 
    
    .homebtn_site{
   width: 190px;
    height: 180px;
    right: 15px;
    bottom: 35px;
}

.homebtn_site::before {
    width: 116%;
    height: 55%;
}

.page-home .homebtn_site::after {
    width: 0;
    height: 0;
    border-color: transparent;
}

.homebtn_site::before,  .homebtn_site::after {
    position: absolute;
    top: 52%;
    right: 60%;
    z-index: 2;
    content: "";
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
     -webkit-border-top-right-radius:20px;
    -webkit-border-top-left-radius:20px;
    border: 2px solid #fff;
    transform: translate(50%, -50%);
    transition: all 500ms;
    
}

.homebtn
{
  width: 200px;
    height: 80px;
    overflow: hidden;
   -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
     -webkit-border-top-right-radius:20px;
    -webkit-border-top-left-radius:20px;
    position: absolute;
    top: 52%;
    right: 60%;
    border: 5px solid #fff;
    background-color: #161619;
    transform: translate(50%, -50%);
    background-position: 150%;
    background-repeat: no-repeat;
    background-size: 500%;
}

.homebtn_site:hover .homebtn {
  border-color: #f9c724;
  background-position:  -1%;
}



@keyframes exa2{
  
    from {transform:scale(1.05);}
   to {top:43px;right:2px; transform:scale(1);}
   
}

.homebtn_site:hover::before {
  width: 0;
  height: 0;
  border-color: transparent;
}

.homebtn_site:hover::after {
  width: 116%;
    height: 55%;
  border-color: #f9c724;
    animation-name: exa2;
animation-duration: 2s;
animation-fill-mode:forwards;
}


 .homebtn_site:hover .logo{
  opacity: 1;
}
 .homebtn_site:hover .logo{
  right: -100%;
}

 .homebtn_site:hover .logo2{
  opacity: 1;
}
 .homebtn_site:hover .logo2{
  right: -100%;
}
.page-home .home-site-btn-container:hover .home-site-btn .text {
  bottom: 100%;
}
.page-home .home-site-btn {
  width: 230px;
  height: 230px;
  overflow: hidden;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 50%;
  border: 5px solid #fff;
  background-color: #161619;
  transform: translate(50%, -50%);
  background-position: center -43%;
  background-repeat: no-repeat;
  background-size: 120%;
}
  .logo {
      
  transition: all 3s;
      width: 175px;
  height: 80px;
      margin-top: 100px;
      margin-right: -17px;
   
}

  .logo2 {
      
  transition: all 5s;
        width: 175px;
  height: 80px;
      margin-top: 100px;
         margin-right: 385px;
    
}


.homebtn .logo {
  position: absolute;
  top: -100px;
  right: 100%;
  z-index: 2;
  transform: translate(100%);
}

.homebtn .logo2 {
  position: absolute;
  top: -100px;
  right: 100%;
  z-index: 2;
  transform: translate(100%);
}
.page-home .home-site-btn .text {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 55px;
  right: 50%;
  z-index: 2;
  transform: translate(50%);
}
    #most_watch {
  height: 130px;

}
.containerVid a .Show{
        
    background-size:8% ;
    }
    
      .mainheader nav ul #fot
    {
      left: 395px;
     width: 200px;
          font-size: 20px;
    }
    
    .mainheader nav #fot a{

    padding: 10px 25px;
    height: 40px;
   
}
    .mainheaderf nav , .mainheaderb nav , .mainheaderw nav
    {
        right: -8px;
       width:715px; 
        height: 80px;
    }
      .mainheaderf nav li , .mainheaderb nav li
    {
       
       width:105px;
      
    }
      .mainheaderw nav li
    {
      
       width:105px; 
    }
    .asizef,.asizeb
    {
        font-size: 20px;
   
    }
        .mainheaderf nav li #icon, .mainheaderb nav li #icon
    {
      width: 80px;
       height: 60px;
       left: 10px;
        bottom: 10px;
    }
      .mainheaderw nav li #icon
    {
      
     width: 80px;
       height: 60px;
       left: 10px;
        bottom: 10px;
    }
    
     .mainheader nav ul li a:before{

    top: 30px;

    
}
    

    
.mainheaderf nav ul li a:before,.mainheaderb nav ul li a:before,.mainheaderw nav ul li a:before{

    left: -2px;
    top: 49px;

    
}
    

      .butlogout
    {
        left: 220px;
    }
    
    .butpro:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 60px;
    top: 23px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.butpro:hover::before{
    margin: 5px;
    width: 60%;
    
    
}
    
  .butpro:hover
{
    color:#2f2e40;
}

.butpro
{
  right: 510px;
    width:20%;
    font-size: 15px;
    font-weight: 900;
}
 .butpro font
     {
         position: relative;
         bottom: 5px;
         
     }   
    
 .clock span{
    font-size: 23px;
    width: 20px;
    display: inline-block;
    text-align: center;
    position: relative;
     margin-left: 10px;
}

.clock span:nth-child(1):after{

    font-size: 15px;
    bottom: 10px;
    font-weight: 500;
}
    
    .clock span:nth-child(3):after{
    font-size: 15px;
    bottom: 10px;
    font-weight: 500;
       
        
}
    
    .clock span:nth-child(5):after{

    font-size: 15px;
    bottom: 10px;
    font-weight: 500;
}
    .containers {
        width: 200px;
        height: 50px;
        top: 50%;
        left: 16%;
          font-size: 30px;
    }
    
    .containers::before{
 
    height: 100px;
    width: 100px;
    top: 10px;
    left: 80px;

}

.containers::after{

    height: 100px;
    width: 100px;
    right: 100px;
    
}
    
    .topcontent h2, .topcontent2 h2
    {
         font-size: 30px;
        
    }
   
   #iconprof
{
   margin-left:-22px; 
 height:30px;
    width: 40px;
    margin-top: -7px;
} 
    #fonts
    {
         font-size: 20px;
    }
     #fontsdate
    {
         font-size: 17px;
    }
.titlepost
    {
          font-size: 35px;
    }
    .post-info
    {
        font-size: 18px;
    }
     .npost
    {
          font-size: 28px;
    }
    
    .wrapper label {

    font-size: 25px;
}
#picpost
    {
        width: 100%;
       height: 300px;
    }
    
   #pic1
    {
        width: 200px;
        height: 130px;
    }
    .containermostVid
    {
          height: 130px;
    }
    
    .top-sidbar h2, .middle-sidbar h2, .bottom-sidbar h2
    {
         font-size: 35px;
    }
    .videoplayer
    {
        width: 100%;
        height: 300px;
    }
    
     iframe
    {
        width: 100%;
        height: 300px;
    }
    
    .section1
    {
         width: 100%;
    }
    
        #tech {
    width: 101.3%;
}
    
    .row {
      
        font-size: 14px;
        height: 745px;
        
    }
    
  
        .maylike .maylike-img>img {
   
       width:100%;
    height:190px;
    }
    
    .maylike
    {
         width: 96%;
    height: 190px;
    }
    .maylike .maylike-body .cta-btn {
   font-size: 23px;
        top: 110px;
        right: 450px;
     width: 50%;
    }
    
     .maylike .maylike-body h3 {
        color: #FFF;
            text-align:center;
       font-size: 17px;
        position: absolute;
        top: -7px;
        right:250px;
        width: 350px;
    }
    
    
    
    .titlechamp
    {
        width: 740px;
    }
    
    
    
     .titlechamp h1 {
        right: 320px;
    }
    .boxRote
    {
         margin-bottom: 90px;
    }
    .box
    {
        width: 330px;
        height: 250px;
        right: 220px;
       
    }
    .box span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        transform: rotateY(calc(var(--i)* 70deg)) translateZ(270px);
        -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, rgba(4, 4, 4, 0.267));
    }
      
   #font1
    {
        font-size: 20px;
    }
    p
    {
        font-size: 20px;
    }
    .depart
    {
        font-size: 16px;
        bottom: 90px;
    }
     .depart2
    {
         font-size: 16px;
        right: 100px;
          bottom: 113px;
         width: 110px;
    }
     .depart3
    {
         font-size: 16px;
         right: 220px;
       bottom: 233px;
    }
     .depart4
    {
         font-size: 16px;
        right: 340px;
        bottom: 328px;
        width: 85px;
    }
      .depart5
    {
         font-size: 16px;
        right: 340px;
        bottom: 328px;
       width: 125px;
    }
      .ulicon
    {
       top: 10px;
        right: 420px;
        
    }
    
      .ulicon li a
    {
        width: 30px;
        height:  30px;
        margin-left: 10px;
    }
    
          .ulicon li:nth-child(1) a .fa-brands {
           font-size: 25px;
    padding-top:7px;     
    
}
        .ulicon li:nth-child(2) a .fa-brands {
           font-size: 25px;
    padding-top:7px;   
    
}
        .ulicon li:nth-child(3) a .fa-brands {
             font-size: 25px;
    padding-top:7px; 
    
}
    .ulicon li:nth-child(4) a .fa-brands {
          font-size: 25px;
    padding-top:7px;
    
}
    
    .ulicon li a:before
    {
 
        height:  29px;
    } 
    
    .ulicon2
    {
         top: 5px;
          right: 310px;
    }
    
      .ulicon2 li a
    {
        width: 45px;
        height:  45px;
    }
    
        .ulicon2 li:nth-child(1) a .fa-brands {
            font-size: 35px;
    padding-top:5px;
}
        .ulicon2 li:nth-child(2) a .fa-brands {
     font-size: 35px;
    padding-top:5px;
}
        .ulicon2 li:nth-child(3) a .fa-brands {
     font-size: 35px;
    padding-top:5px;
}
    .ulicon2 li:nth-child(4) a .fa-brands {
     font-size: 35px;
    padding-top:5px;
}
    
    .h2icon
    {
        right: 490px;
        font-size: 25px;
        top: 5px;
        width: 130px;
    }
    
    .copy
    {
        bottom: 295px;
        right: 340px;
        font-size: 15px;
        width: 320px;
    }
    
        .showing {
        padding-bottom: 135%;
    }
   
    
    .slide {
        width: 40%;
        left: 100px;
    }
    .slide_content
    {
        width: 67%;
    }
    
    .slide_content p {

    margin-right: 20px;
 
    }
   section.slider .title {
        font-size: 30px;
        top: -20px;
        left: 130px;
    }
      section.slider .title2 {
        font-size: 30px;
        top: -20px;
        left: 180px;
    }
      section.slider .title3 {
        font-size: 30px;
        top: -20px;
        left: 200px;
    }
         button.slider__button {
      
        right: 390px;
        top: -30px;
    }
        button.slider__button2 {
     
        right: 10px;
        top: -30px;
    }
    
    .btn1
    {
        width: 220px;
        font-size: 20px;
    }
    
    .wrapper .cont ul {
   
    font-size: 20px;
 
}
 }

/*---------Between (751px) and (800px)----------------*/

@media (min-width: 755px) and (max-width: 768px) 
{ 
   
      .mainheader nav ul #fot
    {
      left: 375px;
    }
    

    .mainheaderf nav , .mainheaderb nav , .mainheaderw nav
    {
       width:675px; 
    }

    .butpro
{
  right: 490px;
   
}
#picpost
    {
        width: 100%;
       height: 300px;
    }
    
    .top-sidbar h2, .middle-sidbar h2, .bottom-sidbar h2
    {
         font-size: 35px;
    }
    .videoplayer
    {
        width: 100%;
        height: 300px;
    }
    
     iframe
    {
        width: 100%;
        height: 300px;
    }
    
    
    .titlechamp
    {
        width: 710px;
    }
    
    
   
  
      .ulicon
    {
       bottom: 40px;
        right: 415px;
        
    }
    
      .ulicon li a
    {
        width: 30px;
        height:  30px;
        margin-left: 10px;
    }
    
    .ulicon li:nth-child(1) a .fa-brands {
            font-size: 23px;
    padding-top:7px;
}
        .ulicon li:nth-child(2) a .fa-brands {
        font-size: 23px;
    padding-top:7px;
}
        .ulicon li:nth-child(3) a .fa-brands {
       font-size: 23px;
    padding-top:7px;
}
    .ulicon li:nth-child(4) a .fa-brands {
        font-size: 23px;
    padding-top:7px;
}
    
     .ulicon li a:before
{
  
    height: 94%;

    
}
    
    .ulicon2
    {
         top: 5px;
          right: 280px;
    }

    
        .ulicon2 li:nth-child(1) a .fa-brands {
            font-size: 30px;
    padding-top:5px;
}
        .ulicon2 li:nth-child(2) a .fa-brands {
        font-size: 30px;
    padding-top:5px;
}
        .ulicon2 li:nth-child(3) a .fa-brands {
      font-size: 30px;
    padding-top:5px;
}
    .ulicon2 li:nth-child(4) a .fa-brands {
        font-size: 30px;
    padding-top:5px;
}
    
   
    
  
    
    .btn1
    {
        width: 220px;
        font-size: 20px;
    }
 }

@media (min-width: 780px) and (max-width: 786px) 
{ 
   
      .mainheader nav ul #fot
    {
      left: 375px;
    }
    

    .mainheaderf nav , .mainheaderb nav , .mainheaderw nav
    {
       width:675px; 
    }
    
     .butlogout
{
  right: 445px;
   
}
    
    .butpro
{
  right: 505px;
   
}


#picpost
    {
        width: 100%;
       height: 300px;
    }
    
    .top-sidbar h2, .middle-sidbar h2, .bottom-sidbar h2
    {
         font-size: 35px;
    }
    .videoplayer
    {
        width: 100%;
        height: 300px;
    }
    
     iframe
    {
        width: 100%;
        height: 300px;
    }
    
    
    .titlechamp
    {
        width: 710px;
    }
    
    
   
  
      .ulicon
    {
       bottom: 40px;
        right: 420px;
        
    }
    
      .ulicon li a
    {
        width: 30px;
        height:  30px;
        margin-left: 10px;
    }
    
    .ulicon li:nth-child(1) a .fa-brands {
            font-size: 23px;
    padding-top:7px;
}
        .ulicon li:nth-child(2) a .fa-brands {
        font-size: 23px;
    padding-top:7px;
}
        .ulicon li:nth-child(3) a .fa-brands {
       font-size: 23px;
    padding-top:7px;
}
    .ulicon li:nth-child(4) a .fa-brands {
        font-size: 23px;
    padding-top:7px;
}
    
     .ulicon li a:before
{
  
    height: 94%;

    
}
    
    .ulicon2
    {
         top: 5px;
          right: 280px;
    }

    
        .ulicon2 li:nth-child(1) a .fa-brands {
            font-size: 30px;
    padding-top:5px;
}
        .ulicon2 li:nth-child(2) a .fa-brands {
        font-size: 30px;
    padding-top:5px;
}
        .ulicon2 li:nth-child(3) a .fa-brands {
      font-size: 30px;
    padding-top:5px;
}
    .ulicon2 li:nth-child(4) a .fa-brands {
        font-size: 30px;
    padding-top:5px;
}
    
   
    
  
    
    .btn1
    {
        width: 220px;
        font-size: 20px;
    }
 }

/*---------Between (751px) and (800px)----------------*/

@media (min-width: 801px) and (max-width: 820px) 
{ 
       .seh {
        right: -265px;
        top: 100px;
        width: 410px;
            height: 50px;
              font-size: 25px;
    }
     .btn {
        right: 160px;
        bottom: -48px;
        width: 100px;
          height: 50px;
         font-size: 25px;
    }
    
    
    .homebtn_site{
   width: 190px;
    height: 180px;
    right: 15px;
    bottom: 35px;
}

.homebtn_site::before {
    width: 116%;
    height: 55%;
}

.page-home .homebtn_site::after {
    width: 0;
    height: 0;
    border-color: transparent;
}

.homebtn_site::before,  .homebtn_site::after {
    position: absolute;
    top: 52%;
    right: 60%;
    z-index: 2;
    content: "";
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
     -webkit-border-top-right-radius:20px;
    -webkit-border-top-left-radius:20px;
    border: 2px solid #fff;
    transform: translate(50%, -50%);
    transition: all 500ms;
    
}

.homebtn
{
  width: 200px;
    height: 80px;
    overflow: hidden;
   -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
     -webkit-border-top-right-radius:20px;
    -webkit-border-top-left-radius:20px;
    position: absolute;
    top: 52%;
    right: 60%;
    border: 5px solid #fff;
    background-color: #161619;
    transform: translate(50%, -50%);
    background-position: 150%;
    background-repeat: no-repeat;
    background-size: 500%;
}

.homebtn_site:hover .homebtn {
  border-color: #f9c724;
  background-position:  -1%;
}



@keyframes exa2{
  
    from {transform:scale(1.05);}
   to {position:relative;top:43px;right:2px; transform:scale(1);}
   
}

.homebtn_site:hover::before {
  width: 0;
  height: 0;
  border-color: transparent;
}

.homebtn_site:hover::after {
  width: 116%;
    height: 55%;
  border-color: #f9c724;
    animation-name: exa2;
animation-duration: 2s;
animation-fill-mode:forwards;
}


 .homebtn_site:hover .logo{
  opacity: 1;
}
 .homebtn_site:hover .logo{
  right: -100%;
}

 .homebtn_site:hover .logo2{
  opacity: 1;
}
 .homebtn_site:hover .logo2{
  right: -100%;
}
.page-home .home-site-btn-container:hover .home-site-btn .text {
  bottom: 100%;
}
.page-home .home-site-btn {
  width: 230px;
  height: 230px;
  overflow: hidden;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 50%;
  border: 5px solid #fff;
  background-color: #161619;
  transform: translate(50%, -50%);
  background-position: center -43%;
  background-repeat: no-repeat;
  background-size: 120%;
}
  .logo {
      
  transition: all 3s;
      width: 175px;
  height: 80px;
      margin-top: 100px;
      margin-right: -17px;
   
}

  .logo2 {
      
  transition: all 5s;
        width: 175px;
  height: 80px;
      margin-top: 100px;
         margin-right: 385px;
    
}


.homebtn .logo {
  position: absolute;
  top: -100px;
  right: 100%;
  z-index: 2;
  transform: translate(100%);
}

.homebtn .logo2 {
  position: absolute;
  top: -100px;
  right: 100%;
  z-index: 2;
  transform: translate(100%);
}
.page-home .home-site-btn .text {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 55px;
  right: 50%;
  z-index: 2;
  transform: translate(50%);
}
.containerVid a .Show{
        
    background-size:8% ;
    }
    
      .mainheader nav ul #fot
    {
      left: 395px;
     width: 200px;
          font-size: 20px;
    }
    
    .mainheader nav #fot a{

    padding: 10px 25px;
    height: 40px;
   
}
    .mainheaderf nav , .mainheaderb nav , .mainheaderw nav
    {
        right: -8px;
       width:715px; 
        height: 80px;
    }
      .mainheaderf nav li , .mainheaderb nav li
    {
       
       width:105px;
      
    }
      .mainheaderw nav li
    {
      
       width:105px; 
    }
    .asizef,.asizeb
    {
        font-size: 20px;
   
    }
        .mainheaderf nav li #icon, .mainheaderb nav li #icon
    {
      width: 80px;
       height: 60px;
       left: 10px;
        bottom: 10px;
    }
      .mainheaderw nav li #icon
    {
      
     width: 80px;
       height: 60px;
       left: 10px;
        bottom: 10px;
    }
    
     .mainheader nav ul li a:before{

    top: 35px;

    
}
    

    
.mainheaderf nav ul li a:before,.mainheaderb nav ul li a:before,.mainheaderw nav ul li a:before{

    left: -2px;
    top: 49px;

    
}
    

      .butlogout
    {
        left: 215px;
    }
    
    .butpro:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 60px;
    top: 23px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.butpro:hover::before{
    margin: 5px;
    width: 60%;
    
    
}
    
  .butpro:hover
{
    color:#2f2e40;
}

.butpro
{
  right: 530px;
    width:20%;
    font-size: 15px;
    font-weight: 900;
}
   .butpro font
     {
         position: relative;
         bottom: 5px;
         
     }       
    #most_watch {
  height: 130px;
  
}
    
 .clock span{
    font-size: 23px;
    width: 20px;
    display: inline-block;
    text-align: center;
    position: relative;
     margin-left: 10px;
}

.clock span:nth-child(1):after{

    font-size: 15px;
    bottom: 10px;
    font-weight: 500;
}
    
    .clock span:nth-child(3):after{
    font-size: 15px;
    bottom: 10px;
    font-weight: 500;
       
        
}
    
    .clock span:nth-child(5):after{

    font-size: 15px;
    bottom: 10px;
    font-weight: 500;
}
    .containers {
        width: 200px;
        height: 50px;
        top: 50%;
        left: 15%;
          font-size: 30px;
    }
    
    .containers::before{
 
    height: 100px;
    width: 100px;
    top: 10px;
    left: 80px;

}

.containers::after{

    height: 100px;
    width: 100px;
    right: 100px;
    
}
    
    .topcontent h2, .topcontent2 h2
    {
         font-size: 30px;
        
    }
   
   #iconprof
{
   margin-left:-22px; 
 height:30px;
    width: 40px;
    margin-top: -7px;
} 
    #fonts
    {
         font-size: 20px;
    }
     #fontsdate
    {
         font-size: 17px;
    }
.titlepost
    {
          font-size: 35px;
    }
    .post-info
    {
        font-size: 18px;
    }
     .npost
    {
          font-size: 28px;
    }
    
    p
    {
        font-size: 20px;
    }
    .wrapper label {

    font-size: 25px;
}
#picpost
    {
        width: 100%;
       height: 300px;
    }
    
   #pic1
    {
        width: 200px;
        height: 130px;
    }
    .containermostVid
    {
          height: 130px;
    }
    
    .top-sidbar h2, .middle-sidbar h2, .bottom-sidbar h2
    {
         font-size: 35px;
    }
    .videoplayer
    {
        width: 100%;
        height: 300px;
    }
     iframe
    {
        width: 100%;
        height: 300px;
    }
    
    .section1
    {
         width: 100%;
    }
    
         #tech {
    width: 101.3%;
}
    
    .row {
      
        font-size: 14px;
        height: 745px;
        
    }
    
  
        .maylike .maylike-img>img {
   
       width:100%;
    height:190px;
    }
    
    .maylike
    {
         width: 98.4%;
    height: 190px;
    }
    .maylike .maylike-body .cta-btn {
   font-size: 23px;
        top: 110px;
        right: 470px;
     width: 50%;
    }
    
     .maylike .maylike-body h3 {
        color: #FFF;
            text-align:center;
       font-size: 17px;
        position: absolute;
        top: -7px;
        right:250px;
        width: 390px;
    }
    
    .titlechamp
    {
        width: 755px;
    }
    
    
    
     .titlechamp h1 {
        right: 320px;
    }
    .boxRote
    {
         margin-bottom: 90px;
    }
    .box
    {
        width: 330px;
        height: 250px;
        right: 220px;
       
    }
    .box span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        transform-style: preserve-3d;
        transform: rotateY(calc(var(--i)* 70deg)) translateZ(270px);
        -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, rgba(4, 4, 4, 0.267));
    }
      
   #font1
    {
        font-size: 20px;
    }
     .depart
    {
        font-size: 16px;
            bottom: 88px;
    }
     .depart2
    {
         font-size: 16px;
        right: 100px;
          bottom: 110px;
         width: 110px;
    }
     .depart3
    {
         font-size: 16px;
         right: 250px;
       bottom: 230px;
        width: 100px;
    }
     .depart4
    {
         font-size: 16px;
        right: 320px;
        bottom: 305px;
        width: 85px;
    }
    
      .depart5
    {
         font-size: 16px;
        right: 420px;
        bottom: 325px;
       width: 130px;
    }
      .ulicon
    {
       top: 10px;
        right: 510px;
        
    }
    
    .ulicon li:nth-child(1) a .fa-brands {
    font-size: 23px;
    padding-top:7px;
}
        .ulicon li:nth-child(2) a .fa-brands {
     font-size: 23px;
    padding-top:7px;
}
        .ulicon li:nth-child(3) a .fa-brands {
     font-size: 23px;
    padding-top:7px;
}
    .ulicon li:nth-child(4) a .fa-brands {
      font-size: 23px;
    padding-top:7px;
}
    
      .ulicon li a
    {
        width: 30px;
        height:  30px;
        margin-left: 10px;
    }
    
       .ulicon li a:before
{
  
    height: 94%;

    
}
    .ulicon2
    {
         top: 9px;
          right: 310px;
    }
    
      .ulicon2 li a
    {
        width: 45px;
        height:  45px;
    }
    
        .ulicon2 li:nth-child(1) a .fa-brands {
        font-size: 30px;
    padding-top:5px;
}
        .ulicon2 li:nth-child(2) a .fa-brands {
       font-size: 30px;
    padding-top:5px;
}
        .ulicon2 li:nth-child(3) a .fa-brands {
        font-size: 30px;
    padding-top:5px;
}
    .ulicon2 li:nth-child(4) a .fa-brands {
       font-size: 30px;
    padding-top:5px;
}
    
  .h2icon
    {
        right: 580px;
        font-size: 25px;
        top: 5px;
        width: 130px;
    }
    
    .copy
    {
        bottom: 290px;
        right: 370px;
        font-size: 15px;
        width: 316px;
    }
     
     
        .showing {
        padding-bottom: 125%;
    }
   
    
    .slide {
        width: 40%;
        left: 100px;
    }
    .slide_content
    {
        width: 67%;
    }
    
    .slide_content p {

    margin-right: 20px;
 
    }
   section.slider .title {
        font-size: 30px;
        top: -20px;
        left: 130px;
    }
      section.slider .title2 {
        font-size: 30px;
        top: -20px;
        left: 180px;
    }
      section.slider .title3 {
        font-size: 30px;
        top: -20px;
        left: 200px;
    }
         button.slider__button {
      
        right: 390px;
        top: -30px;
    }
        button.slider__button2 {
     
        right: 10px;
        top: -30px;
    }
    
    .btn1
    {
        width: 230px;
        font-size: 20px;
    }
    
    .wrapper .cont ul {
   
    font-size: 20px;
 
}
 }


 @media (min-width: 821px) and (max-width: 912px) 
 {

     
     
     
     .logs
{
     position: absolute;
    width: 12%;
    background-color: #2f2e40;
    bottom: 10px;
    left: 30px;
    font-size: 14.4px;
    font-weight: 1000;
}

.logs:before{
    
    left: 0px;
    top: 20px;
  
}
    
.logs:hover::before{
    margin: 5px;
    width: 90%;
    
    
}
    


     .logs a h1
{
    
    bottom: 7px;
    right: 1px;
     font-size: 9px;
    font-weight: 1000;
    width: 60px;
}

.butpro:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 33px;
    top: 20px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.butpro:hover::before{
    margin: 5px;
    width: 60%;
    
    
}
    
  .butpro:hover
{
    color:#2f2e40;
}

.butpro
{
    width:8%;
    bottom: 10px;
    left: 20px; 
    font-size: 10px;
}
.butpro font
     {
         position: relative;
         left: 10px;
        font-size: 12px; 
     }
.butlogout
{
  width:1px;
   left: 140px; 
}
  #iconlogout
{
  width:50px;
  
}         
#iconprof
{
    width:28px ;
    height: 28px;
      float:left;
    margin-top: -3px;
    margin-left: -25px;
     -webkit-border-radius:20px;
 
}
           
 .containers
{
      width: 150px; 
    left: 95px;
 }
 
.seh
{
    height: 23px;
    width: 200px ; 
    right: 250px;     
}
           
 .btn
{
     height: 28px;
    bottom: 82px;
    right: 460px; 
    width: 60px;
    
} 
     
  .mainheader nav ul {
    
    margin: 0 auto;
 
}

.mainheader nav ul li{
    margin: 5px;
      position:relative;
 float: right;
    display: inline;
    font-size: 10px;
    font-weight: 1000;
     width: 120px;
    margin-right: -10px;
    top: 10px;
}

#micon
{
   
    right: 10px;   
    width: 14px;
    
}
.mainheader nav a:link , .mainheader nav a:visited {
    
    
   color: #fff;
    display: inline-block;
    padding: 5px 25px;
    height: 20px; 
    border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
    margin-right: -10px;
}

.mainheader li:nth-child(3){
    
  padding-left:  20px; 
}
     .mainheader li:nth-child(2){
    
  padding-left:  5px; 
}
.mainheader nav ul li a:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 42px;
    top: 20px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.mainheader nav ul li a:hover::before{
    margin: 5px;
    width: 60%;
    
    
}
    
    .mainheader nav ul li a:hover
{
    color:#2f2e40;
}
.mainheader nav a{
     background-color: #3d3848;
    transition: .5s;
}
.mainheader nav a:hover , .mainheader nav a:active,
.mainheader nav .active a:link, .mainheader nav .active :visited
{
   color: #2f2e40;
    background-color: #f9c724;
   text-shadow: none;
     transition: .5s;
   
}
     


.mainheaderf nav  {
    
  top: 33px;
    width: 400px;
}

   .mainheaderf nav ul li{
    margin: 5px;
       top: 0px;
    width: 100px;
      position:relative;
 float: right;
    display: inline;
    font-size: 10px;
    font-weight: 1000;
    margin-right: -25px;
}
     
 .mainheaderf nav ul li:nth-child(1){
   
    width: 85px;
      
}
     .mainheaderf nav ul li a:before{
  
    width: 0%;
    left: 39px;
    top: 25px;
   
}
    
.mainheaderf nav ul li a:hover::before{

    width: 55%;

}
 
 .mainheaderb nav  {
    
   top: 33px;
    width: 400px;
}    

     
        .mainheaderb nav ul li{
    margin: 5px;
       top: 0px;
    width: 100px;
      position:relative;
 float: right;
    display: inline;
    font-size: 10px;
    font-weight: 1000;
    margin-right: -25px;
}
     
 .mainheaderb nav ul li:nth-child(1){
   
     width: 85px;
      
}
     
   .mainheaderb nav ul li a:before{
  
    width: 0%;
    left: 39px;
    top: 25px;
   
}
    
.mainheaderb nav ul li a:hover::before{

    width: 55%;

} 
     
 .mainheaderw nav  {
    
   top: 33px;
    width: 370px;
}
 .mainheaderw nav ul li {
     top: 0px;
  
}    
   .mainheaderw nav ul li{
    margin: 5px;
       top: 0px;
    width: 100px;
      position:relative;
 float: right;
    display: inline;
    font-size: 10px;
    font-weight: 1000;
    margin-right: -25px;
}
     
 
    
   .mainheaderw nav ul li a:before{
  
    width: 0%;
    left: 35px;
    top: 25px;
   
}
    
.mainheaderw nav ul li a:hover::before{

    width: 65%;

}    
     
#icon
 {
     bottom: 5px;
    width: 30px;     
}
     
    .homebtn{
   background-image: url('site-new1.jpg');
    transition: background-position  5s;
} 
     .homebtn_site{
    width: 258px;
    height: 190px;
    right: 60px;

}

.homebtn_site::before {
    width: 60%;
    height: 47%;
}



.homebtn_site::before,  .homebtn_site::after {
    position: absolute;
    top: 50%;
    right: 20%;
    
    
}

.homebtn
{
    width: 130px;
    height: 70px;
    top: 50%;
    right: 20%;

}



@keyframes exa2{
  
    from {transform:scale(1.05);}
   to {top:49px;right:-28px; transform:scale(1);}
   
}


.homebtn_site:hover::after {
  width: 60%;
  height: 47%;
    

}


 .homebtn_site:hover .logo{
  opacity: 1;
}
 .homebtn_site:hover .logo{
  right: -100%;
}

 .homebtn_site:hover .logo2{
  opacity: 1;
}
 .homebtn_site:hover .logo2{
  right: -100%;
}

  .logo {
      
  transition: all 3s;
      width: 120px;
  height: 70px;
      margin-top: 100px;
      margin-right: -7px;
   
}

  .logo2 {
      
  transition: all 5s;
     width: 120px;
  height: 70px;
      margin-top: 100px;
         margin-right: 255px;
    
}


.homebtn .logo {
  position: absolute;
  top: -100px;
  right: 100%;
  z-index: 2;
  transform: translate(100%);
}

.homebtn .logo2 {
  position: absolute;
  top: -100px;
  right: 100%;
  z-index: 2;
  transform: translate(100%);
}


        
             #tech
{ 
   
     border:2px solid ;
    
    /*-webkit-border-top-right-radius:20px;
     -webkit-border-top-left-radius:20px;*/
    
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
   
   margin-bottom:  15px ;
 margin-right: -8px;
  height:200px;
  width:565px;
     
    background-color: black;
color: white;
text-align: center
   
 
}
     
                 #pics
{ 
   
  
 
left: 31.8%;
     -webkit-border-top-right-radius:0px;
     -webkit-border-top-left-radius:0px;
    
     -webkit-border-bottom-right-radius:16px;
    -webkit-border-bottom-left-radius:16px;
  height:200px;
 width:567px;
      margin-right: -2px;
  

   
 
}

#picpost
{ 
   
  
 
left: 31.8%;
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
  height:300px;
  width:500px;
     

   
 
}
     #iconpost {
  width: 35px;
  height: 25px;
  
}

 #pic1
 {
    width: 167px;     
         
 }
 #most_watch
{    
          
 width: 172px;  
} 
#font1
     {
         font-size: 15px;
     }
    #tech:hover #pics{

width:567px;
} 
           
 .videoplayer
{ 
   
  
 
left: 31.8%;
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
 height:300px;
  width:500px;
     

   
 
}
  iframe
    {
  left: 31.8%;
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
 height:300px;
  width:500px;
    }
        
     

.topcontent2
     {
         height: 1400px;
     }

   .maylike {
 
    width: 225px;
   right: -20px;
}
     
.maylike .maylike-body  .cta-btn
     {
         font-size: 25px;
         right: 150px;
         top: 170px;
     }
    .boxRote
{
    
    margin-bottom:20px;
width:500px;
}
.box {
    
    
    width: 150px;
    height: 180px;
    right: 320px;
    
}



.box span{

    /*transform: rotateY(calc(var(--i) * 36deg)) translateY(450px);*/
    transform: rotateY(calc(var(--i) * 36deg)) translateZ(300px);
   
}



.box span img{

}

.box span img:hover{
    transform: translateY(-15px);
    
}
    
    .titlechamp
    {
        width:795px;
    }
    
     .titlechamp h1
    {
        right: 360px;
    }

    #ad nav
{
  
  width: 500px;
    height: 150px; 
  margin-top: 50px;
   margin-right: -50px;
}

#adimage
{
  width: 500px;
   height: 150px;
}
    
    .bodicon{
    
    margin: 0;
    padding: 0;
    background: #ccc;
}
            
 .section1
  {
  width:500px
  }

      section.slider {
  height: 450px;
 
}
  
     section.slider .title {
    font-size: 42px;
    position: relative;
    top: 25px;
     left: 220px;
}
    
section.slider .title2 {
    font-size: 42px;
    position: relative;
       top: 24px;
     left: 280px;
}
    
section.slider .title3 {
    font-size: 42px;
    position: relative;
       top: 24px;
     left: 300px;
}    
.slide_content p
{
    font-size: 17px;  
    margin-right: 20px;
    width: 100px;
}

button.slider__button {
	
    right: 600px;
    
}

button.slider__button2 {

   margin-right: 0px;
}


.slider__track > * {
  
      margin-left:-80px;
}



.slide .slideimg {
	 width: 100%;
    height: 250px;

}
     
 .slide  {
	 width: 60%;
    left: 100px;

}
         
.depart
 {
     bottom: 20px;
     font-size: 16px;
 }
           
  .depart2
 {
     bottom: 43px;
     font-size: 16px;
     right: 120px;
     width: 105px;
 } 
           
    .depart3
 {
     bottom: 162px;
     font-size: 16px;
     right: 250px;
      width: 100px;
 } 
           
   .depart4
 {
      bottom: 258px;
     font-size: 16px;
     right: 390px;
      width: 126px;
 }  
     
        .depart5
 {
     bottom: 258px;
     font-size: 16px;
     right: 390px;
      width: 126px;
 }  
.ulicon{
    
   top: 90px;
  left: -505px;
   width: 100px;
 
}

.ulicon li{
    
    list-style: none;
    margin: 0 20px;
}

.ulicon li:nth-child(1) a .fa-brands
{
    
    font-size: 20px;
   
   
  padding-top: 4px;
    transition: .5s;
}

.ulicon li:nth-child(2) a .fa-brands
{
    
    font-size: 20px;
   
   
  padding-top: 4px;
    transition: .5s;
}

.ulicon li:nth-child(3) a .fa-brands
{
    
    font-size: 20px;
   
   
  padding-top: 4px;
    transition: .5s;
}

.ulicon li:nth-child(4) a .fa-brands
{
    
    font-size: 20px;
   
   
  padding-top: 4px;
    transition: .5s;
}
.ulicon li a 
{
    
    position: relative;
    display: block;
    width: 25px;
    height: 25px;
    background: #fff;
    text-align: center;
    transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(0,0);
    transition: .5s;
    box-shadow: -20px 20px 10px rgba(0,0,0,.5);
}




.ulicon2{
    
   top: 5px;
    left: -240px;
        width: 100px;
  
}

.ulicon2 li a 
{
    width: 30px;
    height: 30px;
    margin-right: -10px;
}

.ulicon2 li:nth-child(1) a .fa-brands
{
    
  padding-top: 4px;
  
}

.ulicon2 li:nth-child(2) a .fa-brands
{

  padding-top: 4px;
   
}

.ulicon2 li:nth-child(3) a .fa-brands
{
    
  padding-top: 4px;
   
}

.ulicon2 li:nth-child(4) a .fa-brands
{
   
  padding-top: 4px;

}
.h2icon{
 
    
     right: 622px;
     padding-top:20px;
      margin-top: 1px;
   width: 110px;
}

.copy
    {
        bottom: 190px;
        right: 410px;
        font-size: 17px;
        width: 356px;
    }
    
    .btn1
    {
        width: 140px;
        font-size: 19px; 
     
    }
           

    
   #iconlink
     {
         width: 40px;
     }
     
     .wrapper .cont ul {
   
    font-size: 20px;
 
}

        }

/*---------Between (821px) and (912px)----------------*/

 @media (min-width: 821px) and (max-width: 823px) 
 {


.butlogout
     {
      
         bottom: 30px;
     }
.butpro
     {
         bottom: 30px;
     }
#tech
{ 

  height:200px;
  width:530px;

}
  #pics
{ 

  height:200px;
 width:557px;

}

 #pic1
 {
    width: 172px;     
         
 }

    #tech:hover #pics{

width:557px;
} 
     
#picpost
{ 
   

  height:300px;
  width:475px;
     

   
 
}
     
     
.videoplayer
{ 
   
  
 height:300px;
   width:475px;
     

   
 
}
  iframe
    {

 height:300px;
 width:475px;
    }
    
   .maylike {
 
    width: 210px;
}
     
     
.maylike .maylike-body  .cta-btn
     {
       
         right: 130px;
         top: 160px;
     }
    .titlechamp
    {
        width:750px;
    }
    
     .titlechamp h1
    {
        right: 340px;
    }


    .btn1
    {
        width: 125px;
    }
           
    #ad nav
{
   margin-right: -80px;
}

    
   #iconlink
     {
         width: 40px;
     }
     
  

  .ulicon{
    
   bottom: 20px;
 left: -480px;
   width: 100px;
 
}   
     
     .ulicon2{
    
left: -220px;
   top: 3px;
 
}
     
     .h2icon{
 
 right: 590px;
    padding-bottom: 50px;
    width: 100px;
}

.copy
    {
    bottom: 180px;
    right: 330px;
        font-size: 17px;
     
    }
    
.btn1
     {
        font-size: 19px; 
     }
     
button.slider__button {
	
    right: 560px;
    
}
     
    section.slider .title {
    font-size: 2.2rem;
     left: 210px;
}
    
    
section.slider .title2 {
    font-size: 2.5rem;
     left: 270px;
}
    
section.slider .title3 {
   font-size: 2.5rem;
     left: 270px;
}   
     
         
        }

 @media (min-width: 840px) and (max-width: 844px) 
 {


.butlogout
     {
      
         bottom: 30px;
     }
.butpro
     {
         bottom: 30px;
     }
#tech
{ 

  height:200px;
  width:545px;

}
  #pics
{ 

  height:200px;
 width:557px;

}

 #pic1
 {
    width: 159px;     
         
 }

#most_watch  {
   width: 159px;
 
}
    #tech:hover #pics{

width:557px;
} 
     
#picpost
{ 
   

  height:300px;
  width:475px;
     

   
 
}
     
     
.videoplayer
{ 
   
  
 height:300px;
   width:475px;
     

   
 
}
  iframe
    {

 height:300px;
 width:475px;
    }
    
   .maylike {
 
    width: 215px;
}
     
     
.maylike .maylike-body  .cta-btn
     {
       
         right: 130px;
         top: 160px;
     }
    .titlechamp
    {
        width:765px;
    }
    
     .titlechamp h1
    {
        right: 340px;
    }


    .btn1
    {
        width: 125px;
    }
           
    #ad nav
{
   margin-right: -80px;
}

    
   #iconlink
     {
         width: 40px;
     }
     
     button.slider__button {
	
    right: 570px;
    
}

  .ulicon{
    
    
   bottom: 20px;
  left: -450px;
   width: 100px;
 
}   
     
     .ulicon2{
    
left: -210px;
   top: 3px;
 
}
     
     .h2icon{

     right: 570px;
     padding-bottom: 50px;
    
   width: 100px;
}

.copy
    {
        bottom: 180px;
        right: 340px;
        font-size: 17px;
      
    }
    

         
        }

 @media (min-width: 850px) and (max-width: 854px) 
 {


.butlogout
     {
      
         bottom: 30px;
     }
.butpro
     {
         bottom: 30px;
     }
    
#tech
{ 

  height:200px;
  width:550px;

}
  #pics
{ 

  height:200px;
 width:557px;

}

 #pic1
 {
    width: 172px;     
         
 }

    #tech:hover #pics{

width:557px;
} 
     
#picpost
{ 
   

  height:300px;
  width:485px;
     

   
 
}
     
     
.videoplayer
{ 
   
  
 height:300px;
  width:485px;
     

   
 
}
  iframe
    {

 height:300px;
 width:485px;
    }
    
   .maylike {
 
    width: 220px;
}

    .titlechamp
    {
        width:765px;
    }
    
     .titlechamp h1
    {
        right: 340px;
    }

   button.slider__button {
	
    right: 580px;
    
   }
    .btn1
    {
        width: 130px;
    }
           
  #ad nav
     {
         right: 180px;
     }
    
   #iconlink
     {
         width: 40px;
     }

     .ulicon2{
    
left: -220px;
   top: 3px;
 
}
     .copy
     {
         right: 350px;
     }
       section.slider .title {
    
    top: 25px;
     left: 190px;
}
    
  
     
        }


 @media (min-width: 890px) and (max-width: 896px) 
 {


.butlogout
     {
      
         bottom: 30px;
     }
.butpro
     {
         bottom: 30px;
     }
     
#tech
{ 

  height:200px;
  width:575px;

}
  #pics
{ 

  height:200px;
 width:577px;

}

 #pic1
 {
    width: 172px;     
         
 }

    #tech:hover #pics{

width:577px;
} 
           

    
   .maylike {
 
    width: 230px;
}

    .titlechamp
    {
        width:797px;
    }
    
     .titlechamp h1
    {
        right: 340px;
    }


    .btn1
    {
        width: 140px;
    }
           

    
   #iconlink
     {
         width: 40px;
     }
     
     .depart
 {
     bottom: 20px;
     font-size: 16px;
 }
           
  .depart2
 {
     bottom: 43px;
     font-size: 16px;
     right: 120px;
   
 } 
           
    .depart3
 {
     bottom: 162px;
     font-size: 16px;
     right: 250px;
      
 } 
           
   .depart4
 {
      bottom: 258px;
     font-size: 16px;
     right: 390px;
    
 }  
     
        .depart5
 {
     bottom: 258px;
     font-size: 16px;
     right: 390px;
      
 }  
        .h2icon{

     right: 570px;
     padding-bottom: 50px;
    
   width: 100px;
}

        }


 @media (min-width: 894px) and (max-width: 904px) 
 {


     
     
     .ulicon{
    
  left: -485px;

 
}
   .h2icon{

     right: 600px;
   
}

        }

@media (min-width: 905px) and (max-width: 912px) 
 {



     
#tech
{ 

  height:200px;
  width:585px;

}
  #pics
{ 

  height:200px;
 width:587px;

}

 #pic1
 {
    width: 173px;     
         
 }

    #tech:hover #pics{

width:587px;
} 
           

    
   .maylike {
 
    width: 230px;
}

    .titlechamp
    {
        width:820px;
    }
    
     .titlechamp h1
    {
        right: 340px;
    }

button.slider__button {
	
    right: 630px;
    
}

    .btn1
    {
        width: 140px;
    }
           

    
   #iconlink
     {
         width: 40px;
     }

        }


/*---------Between (821px) and (912px)----------------*/

 @media (min-width: 913px) and (max-width: 960px)
 {

     
     
     
     .logs
{
     position: absolute;
    width: 12%;
    background-color: #2f2e40;
    bottom: 10px;
    left: 30px;
    font-size: 14.4px;
    font-weight: 1000;
}

.logs:before{
    
    left: 0px;
    top: 20px;
  
}
    
.logs:hover::before{
    margin: 5px;
    width: 90%;
    
    
}
    


     .logs a h1
{
    
    bottom: 7px;
    right: 1px;
     font-size: 10px;
    font-weight: 1000;
    width: 65px;
}

.butpro:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 33px;
    top: 20px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.butpro:hover::before{
    margin: 5px;
    width: 60%;
    
    
}
    
  .butpro:hover
{
    color:#2f2e40;
}

.butpro
{
    width:8%;
    bottom: 10px;
    left: 20px; 
    font-size: 10px;
}
.butpro font
     {
         position: relative;
         left: 10px;
        font-size: 12px; 
     }
.butlogout
{
  width:1px;
   left: 145px; 
}
  #iconlogout
{
  width:50px;
  
}         
#iconprof
{
    width:28px ;
    height: 28px;
      float:left;
    margin-top: -3px;
    margin-left: -25px;
     -webkit-border-radius:20px;
 
}
           
 .containers
{
      width: 150px; 
    left: 95px;
 }
 
.seh
{
    height: 23px;
    width: 200px ; 
    right: 250px;     
}
           
 .btn
{
     height: 28px;
    bottom: 82px;
    right: 460px; 
    width: 60px;
    
} 
     
  .mainheader nav ul {
    
    margin: 0 auto;
 
}

.mainheader nav ul li{
    margin: 5px;
      position:relative;
 float: right;
    display: inline;
    font-size: 10px;
    font-weight: 1000;
     width: 120px;
    margin-right: -10px;
    top: 10px;
}

#micon
{
   
    right: 10px;   
    width: 18px;
    
}
.mainheader nav a:link , .mainheader nav a:visited {
    
    
   color: #fff;
    display: inline-block;
    padding: 5px 25px;
    height: 20px; 
    border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
    margin-right: -10px;
}

/*.mainheader li:nth-child(3){
    
  padding-left:  20px; 
}*/
     
.mainheader li:nth-child(2){
    
  padding-left:  8px; 
}
.mainheader nav ul li a:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 42px;
    top: 20px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.mainheader nav ul li a:hover::before{
    margin: 5px;
    width: 60%;
    
    
}
    
    .mainheader nav ul li a:hover
{
    color:#2f2e40;
}
.mainheader nav a{
     background-color: #3d3848;
    transition: .5s;
}
.mainheader nav a:hover , .mainheader nav a:active,
.mainheader nav .active a:link, .mainheader nav .active :visited
{
   color: #2f2e40;
    background-color: #f9c724;
   text-shadow: none;
     transition: .5s;
   
}
     


.mainheaderf nav  {
    
  top: 33px;
    width: 400px;
}

   .mainheaderf nav ul li{
    margin: 5px;
       top: 0px;
    width: 100px;
      position:relative;
 float: right;
    display: inline;
    font-size: 10px;
    font-weight: 1000;
    margin-right: -25px;
}
     
 .mainheaderf nav ul li:nth-child(1){
   
     width: 85px;
      
}
     .mainheaderf nav ul li a:before{
  
    width: 0%;
    left: 42px;
    top: 25px;
   
}
    
.mainheaderf nav ul li a:hover::before{

    width: 55%;

}
 
 .mainheaderb nav  {
    
   top: 33px;
    width: 400px;
}    

     
        .mainheaderb nav ul li{
    margin: 5px;
       top: 0px;
    width: 100px;
      position:relative;
 float: right;
    display: inline;
    font-size: 10px;
    font-weight: 1000;
    margin-right: -25px;
}
     
 .mainheaderb nav ul li:nth-child(1){
   
     width: 85px;
      
}
     
   .mainheaderb nav ul li a:before{
  
    width: 0%;
    left: 42px;
    top: 25px;
   
}
    
.mainheaderb nav ul li a:hover::before{

    width: 55%;

} 
     
 .mainheaderw nav  {
    
   top: 33px;
    width: 370px;
}
 .mainheaderw nav ul li {
     top: 0px;
  
}    
   .mainheaderw nav ul li{
    margin: 5px;
       top: 0px;
    width: 100px;
      position:relative;
 float: right;
    display: inline;
    font-size: 10px;
    font-weight: 1000;
    margin-right: -25px;
}
     
 
    
   .mainheaderw nav ul li a:before{
  
    width: 0%;
    left: 60px;
    top: 25px;
   
}
    
.mainheaderw nav ul li a:hover::before{

    width: 50%;

}    
     
#icon
 {
     bottom: 5px;
    width: 30px;     
}
     
     .homebtn_site{
    width: 258px;
    height: 190px;
    right: 60px;

}

.homebtn_site::before {
    width: 60%;
    height: 47%;
}



.homebtn_site::before,  .homebtn_site::after {
    position: absolute;
    top: 50%;
    right: 20%;
    
    
}

.homebtn
{
    width: 130px;
    height: 70px;
    top: 50%;
    right: 20%;

}



@keyframes exa2{
  
    from {transform:scale(1.05);}
   to {top:49px;right:-28px; transform:scale(1);}
   
}


.homebtn_site:hover::after {
  width: 60%;
  height: 47%;
    

}


 .homebtn_site:hover .logo{
  opacity: 1;
}
 .homebtn_site:hover .logo{
  right: -100%;
}

 .homebtn_site:hover .logo2{
  opacity: 1;
}
 .homebtn_site:hover .logo2{
  right: -100%;
}
  .logo {
      
  transition: all 3s;
      width: 120px;
  height: 70px;
      margin-top: 100px;
      margin-right: -7px;
   
}

  .logo2 {
      
  transition: all 5s;
     width: 120px;
  height: 70px;
      margin-top: 100px;
         margin-right: 255px;
    
}
.homebtn .logo {
  position: absolute;
  top: -100px;
  right: 100%;
  z-index: 2;
  transform: translate(100%);
}

.homebtn .logo2 {
  position: absolute;
  top: -100px;
  right: 100%;
  z-index: 2;
  transform: translate(100%);
}


        
             #tech
{ 
   
     border:2px solid ;
    
    /*-webkit-border-top-right-radius:20px;
     -webkit-border-top-left-radius:20px;*/
    
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
   
   margin-bottom:  15px ;
 margin-right: -8px;
  height:200px;
  width:600px;
     
    background-color: black;
color: white;
text-align: center
   
 
}
     
                 #pics
{ 
   
  
 
left: 31.8%;
     -webkit-border-top-right-radius:0px;
     -webkit-border-top-left-radius:0px;
    
     -webkit-border-bottom-right-radius:16px;
    -webkit-border-bottom-left-radius:16px;
  height:200px;
  width:610px;
      margin-right: -2px;
  

   
 
}

#picpost
{ 
   
  
 
left: 31.8%;
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
  height:300px;
  width:530px;
     

   
 
}

 #pic1
 {
    width: 176px;     
         
 }
#most_watch { 
    width: 180px;    
     } 
     
#font1
     {
         font-size: 15px;
     }
     p
     {
        font-size:19px; 
     }
    #tech:hover #pics{

width:610px;
} 
           
 .videoplayer
{ 
   
  
 
left: 31.8%;
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
 height:300px;
 width:100%;
     

   
 
}
     
      iframe
    {
        left: 31.8%;
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
 height:300px;
 width:100%;
    }
    

.topcontent2
     {
         height: 1400px;
     }
    
   .maylike {
 
    width: 235px;
   right: -30px;
}
     
.maylike .maylike-body  .cta-btn
     {
         font-size: 25px;
         right: 150px;
         top: 170px;
     }
    .boxRote
{
    
    margin-bottom:20px;
width:500px;
}
.box {
    
    
    width: 150px;
    height: 180px;
    right: 350px;
    
}



.box span{

    /*transform: rotateY(calc(var(--i) * 36deg)) translateY(450px);*/
    transform: rotateY(calc(var(--i) * 36deg)) translateZ(300px);
   
}



.box span img{

}

.box span img:hover{
    transform: translateY(-15px);
    
}
    
    .titlechamp
    {
        width:835px;
    }
    
     .titlechamp h1
    {
        right: 360px;
    }

    #ad nav
{
  
  width: 500px;
    height: 150px; 
  margin-top: 50px;
   margin-right: -50px;
}

#adimage
{
  width: 500px;
   height: 150px;
}
    
    .bodicon{
    
    margin: 0;
    padding: 0;
    background: #ccc;
}
            
 .section1
  {
  width:518px;
  }

      section.slider {
  height: 450px;
 
}
  
     section.slider .title {
    font-size: 42px;
    position: relative;
    top: 25px;
     left: 220px;
}
    
section.slider .title2 {
    font-size: 42px;
    position: relative;
       top: 24px;
     left: 280px;
}
    
section.slider .title3 {
    font-size: 42px;
    position: relative;
       top: 24px;
     left: 300px;
}    
.slide_content p
{
    font-size: 17px;  
    margin-right: 20px;
    width: 100px;
}

button.slider__button {
	
    right: 670px;
    
}



.slider__track > * {
  
      margin-left:-80px;
}



.slide .slideimg {
	 width: 100%;
    height: 250px;

}
     
 .slide  {
	 width: 60%;
    left: 100px;

}
     
.depart
 {
     bottom: 20px;
     font-size: 16px;
 }
           
  .depart2
 {
     bottom: 43px;
     font-size: 16px;
     right: 130px;
     width: 110px;
 } 
           
    .depart3
 {
     bottom: 165px;
     font-size: 16px;
     right: 280px;
     width: 100px;
 } 
           
   .depart4
 {
    bottom: 260px;
     font-size: 16px;
     right: 450px;
      width: 128px;
     
 }    
    
  .depart5
 {
     bottom: 260px;
     font-size: 16px;
     right: 450px;
      width: 128px;
 }    
.ulicon{
    
   top: 90px;
  left: -570px;
   width: 100px;
 
}



.ulicon li{
    
    list-style: none;
    margin: 0 20px;
}

.ulicon li:nth-child(1) a .fa-brands
{
    
    font-size: 20px;
  padding-top: 4px;
    transition: .5s;
}

.ulicon li:nth-child(2) a .fa-brands
{
    
    font-size: 20px;
  padding-top: 4px;
    transition: .5s;
}

.ulicon li:nth-child(3) a .fa-brands
{
    
    font-size: 20px;
  padding-top: 4px;
    transition: .5s;
}

.ulicon li:nth-child(4) a .fa-brands
{
    
    font-size: 20px;
  padding-top: 4px;
    transition: .5s;
}
.ulicon li a 
{
    
    position: relative;
    display: block;
    width: 25px;
    height: 25px;
    background: #fff;
    text-align: center;
    transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(0,0);
    transition: .5s;
    box-shadow: -20px 20px 10px rgba(0,0,0,.5);
}




.ulicon2{
    
   top: 2px;
    left: -270px;
        width: 100px;
  
}

.ulicon2 li a 
{
    width: 30px;
    height: 30px;
    margin-right: -10px;
}

      .ulicon2 li:nth-child(1) a .fa-brands {
          font-size: 21px;
    padding-top:5px;
}
        .ulicon2 li:nth-child(2) a .fa-brands {
    font-size: 21px;
    padding-top:5px;
}
        .ulicon2 li:nth-child(3) a .fa-brands {
     font-size: 21px;
    padding-top:5px;
}
    .ulicon2 li:nth-child(4) a .fa-brands {
     font-size: 21px;
    padding-top:5px;
}     


.h2icon{
 
    
     right: 685px;
     padding-top: 20px;
      margin-top: 1px;
   width: 100px;
}

.copy
    {
        bottom: 180px;
        right: 450px;
        font-size: 17px;
        width: 358px;
    }
    
    .btn1
    {
        width: 140px;
    }
           

    
   #iconlink
     {
         width: 40px;
     }
.wrapper .cont ul {
   
    font-size: 20px;
 
}
        }

/*---------Between (913px) and (960px)----------------*/

@media (min-width: 913px) and (max-width: 915px) 
 {



     
#tech
{ 

  height:200px;
  width:590px;

}
  #pics
{ 

  height:200px;
  width:592px;

}

 #pic1
 {
    width: 173px;     
         
 }
#most_watch
{   
    width: 172px;  
} 

    #tech:hover #pics{

  width:592px;
} 
           

    
   .maylike {
 
    width: 230px;
}

    .titlechamp
    {
        width:820px;
    }
    
     .titlechamp h1
    {
        right: 340px;
    }
     
     .depart5
     {
         width: 123px;
     }

button.slider__button {
	
    right: 630px;
    
}

    .btn1
    {
        width: 145px;
    }
           

    
   #iconlink
     {
         width: 40px;
     }

        }

@media (min-width: 920px) and (max-width: 928px) 
 {


    
.mainheaderw nav ul li a:before{

    left: 45px;
    

    
}
    

 #pic1
 {
    width: 180px;     
         
 }

        }

@media (min-width: 940px) and (max-width: 950px) 
 {
    
.mainheaderw nav ul li a:before{

    left: 45px;

}
   
 #pic1
 {
    width: 180px;     
         
 }

        }

@media (min-width: 955px) and (max-width: 960px) 
 {



     
#tech
{ 

  height:200px;
  width:615px;

}
  #pics
{ 

  height:200px;
 width:617px;

}

 #pic1
 {
    width: 181px;     
         
 }

    #tech:hover #pics{

 width:617px;
} 
           

    
   .maylike {
 
    width: 240px;
}

    .titlechamp
    {
        width:820px;
    }
    
     .titlechamp h1
    {
        right: 340px;
    }



    .btn1
    {
        width: 155px;
    }
           

    
   #iconlink
     {
         width: 40px;
     }

        }

/*---------Between (913px) and (960px)----------------*/

 @media (min-width: 961px) and (max-width: 1024px)
 {


     .logs
{
     position: absolute;
    width: 12%;
    background-color: #2f2e40;
    bottom: 10px;
    left: 30px;
    font-size: 14.4px;
    font-weight: 1000;
}

.logs:before{
    
    left: -5px;
    top: 25px;
  
}
    
.logs:hover::before{
    margin: 5px;
    width: 80%;
    
    
}
    


     .logs a h1
{
    
    bottom: 10px;
    right: 5px;
     font-size: 12px;
    font-weight: 1000;
    width: 80px;
}

.butpro:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 45px;
    top: 25px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.butpro:hover::before{
    margin: 5px;
    width: 65%;
    
    
}
    
  .butpro:hover
{
    color:#2f2e40;
}

.butpro
{
    width:11%;
    bottom: 10px;
    left: 20px; 
}
.butpro font
{
    position: relative;
    left: 18px;
    bottom: 3px;
}
.butlogout
{
  width:1px;
   left: 180px; 
}
           
#iconprof
{
    width:28px ;
    height: 28px;
      float:left;
    margin-top: -3px;
    margin-left: -25px;
     -webkit-border-radius:20px;
 
}
           
 .containers
{
      width: 170px;         
 }
 
.seh
{
    width: 200px          
}
           
 .btn
{
    right: 610px; 
    width: 50px;
} 
     
  .mainheader nav ul {
    
    margin: 0 auto;
  
}

.mainheader nav ul li{
    margin: 5px;
      position:relative;
 float: right;
    display: inline;
    font-size: 10px;
    font-weight: 1000;
     width: 120px;
    margin-right: -10px;
    top: 1px;
}


#micon
{
    right: 10px;   
    width: 14px;
}
.mainheader nav a:link , .mainheader nav a:visited {
    
    
   color: #fff;
    display: inline-block;
    padding: 10px 25px;
    height: 20px; 
    border-radius: 5px;
      -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.mainheader li:nth-child(3){
    
  padding-left:  20px; 
}
.mainheader li:nth-child(3) 
{
  font-size:9px;
}
.mainheader nav ul li a:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 20px;
    top: 30px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.mainheader nav ul li a:hover::before{
    margin: 5px;
    width: 75%;
    
    
}
    
    .mainheader nav ul li a:hover
{
    color:#2f2e40;
}
.mainheader nav a{
     background-color: #3d3848;
    transition: .5s;
}
.mainheader nav a:hover , .mainheader nav a:active,
.mainheader nav .active a:link, .mainheader nav .active :visited
{
   color: #2f2e40;
    background-color: #f9c724;
   text-shadow: none;
     transition: .5s;
   
}
     



.mainheaderf nav ul li {
    
    width: 100px;
      position:relative;
    top: -6px;
 float: right;
    display: inline;
}
     
 .mainheaderf nav ul li a:before{
    top: 35px;
    left: 18px;
   
}
     
 .mainheaderf nav ul li:nth-child(1) a:before{

    left: 32px;
   
}     
.mainheaderf nav ul li a:hover::before{
    margin: 5px;
    width: 70%;
    
    
}
  .mainheaderf nav ul li:nth-child(1) a:hover::before{
    width: 60%;
}    
.mainheaderb nav ul li {
    
    width: 100px;
      position:relative;
    top: -6px;
 float: right;
    display: inline;
} 
  .mainheaderb nav ul li a:before{

    top: 35px;
    left: 18px;
   
}  
.mainheaderb nav ul li:nth-child(1) a:before{

    left: 32px;
   
}
     .mainheaderb nav ul li a:hover::before{
    margin: 5px;
    width: 70%;
    
    
}
  .mainheaderb nav ul li:nth-child(1) a:hover::before{
    width: 60%;
} 
     
.mainheaderw nav ul li {
      position:relative;
    top: -6px; 
}      
     
   .mainheaderw nav ul li a:before{

    top: 35px;
    left: 32px;
   
}  

     .mainheaderw nav ul li a:hover::before{
    margin: 5px;
    width: 65%;
    
    
}
  
#icon
 {
    width: 40px;     
}

        
    #tech
{ 
   
     border:2px solid ;
    
    /*-webkit-border-top-right-radius:20px;
     -webkit-border-top-left-radius:20px;*/
    
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
   
   margin-bottom:  15px ;
 margin-right: -8px;
  height:200px;
  width:656px;
     
    background-color: black;
color: white;
text-align: center
   
 
}
              #pics
{ 
   
  
 
left: 31.8%;
     -webkit-border-top-right-radius:0px;
     -webkit-border-top-left-radius:0px;
    
     -webkit-border-bottom-right-radius:16px;
    -webkit-border-bottom-left-radius:16px;
  height:200px;
   width:656px;
      margin-right: -2px;
  

   
 
}

#picpost
{ 
   
  
 
left: 31.8%;
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
  height:350px;
  width:100%;
     

   
 
}


      #tech:hover #pics{

width: 656px;
}
   
           
 .videoplayer
{ 
   
  
 
left: 31.8%;
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
   height:350px;
  width:570px;
     

   
 
}

iframe
    {
        left: 31.8%;
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
 height:350px;
  width:570px;
    }
    
    
   .maylike {
 
    width: 250px;
   right: -40px;
}
 .maylike .maylike-body  .cta-btn
     {
         font-size: 25px;
         right: 150px;
         top: 170px;
     }    
     
    .boxRote
{
    
    margin-bottom:50px;
width:900px;
}
.box {
    
    
    width: 150px;
    height: 200px;
    right: 370px;
    
}



.box span{

    /*transform: rotateY(calc(var(--i) * 36deg)) translateY(450px);*/
    transform: rotateY(calc(var(--i) * 36deg)) translateZ(400px);
   
}



.box span img{

}

.box span img:hover{
    transform: translateY(-15px);
    
}
    
    .titlechamp
    {
        width:920px;
    }
    
     .titlechamp h1
    {
        right: 400px;
    }

    #ad nav
{
  
  width: 600px;
    height: 200px; 
  margin-top: 50px;
   margin-right: -50px;
}

#adimage
{
  width: 600px;
   height: 200px;
}
    
    .bodicon{
    
    margin: 0;
    padding: 0;
    background: #ccc;
}
            
 .section1
  {
   width:570px;
  }

      section.slider {
  height: 560px;
}
    section.slider .title {
  top:25px;
    left: 230px;
}

     section.slider .title2 {
  top:25px;
   left: 320px;
}

     section.slider .title3 {
  top:25px;
    left: 350px;
}


button.slider__button {
	
    left: -719px;
}

button.slider__button2 {

   margin-right: 0px;
}


.slider__track > * {
 
      margin-left:20px;
}



.slide .slideimg {
	 width: 100%;
    height: 350px;

}
           
 .depart
 {
     bottom: 35px;
     font-size: 16px;
 }
           
  .depart2
 {
     bottom: 60px;
     font-size: 16px;
     right: 100px;
     width: 110px;
 } 
           
    .depart3
 {
     bottom: 180px;
     font-size: 16px;
     right: 230px;
     width: 100px;
 } 
           
   .depart4
 {
     bottom: 275px;
     font-size: 16px;
     right: 350px;
      width: 130px;
 }   
     
      .depart5
 {
     bottom: 275px;
     font-size: 16px;
     right: 350px;
     width: 130px;
 }  
.ulicon{
    
   bottom: 20px;
  left: -520px;
   width: 100px;
 
}



.ulicon2{
    
   bottom: -7px;
    left: -225px;
        width: 100px;
   
}

     .ulicon2 li:nth-child(1) a .fa-brands
{
    font-size: 30px;
  padding-top: 5px;
  
}

.ulicon2 li:nth-child(2) a .fa-brands
{
  font-size: 30px;
  padding-top: 5px;
   
}

.ulicon2 li:nth-child(3) a .fa-brands
{
   font-size: 30px;   
  padding-top: 5px;
   
}

.ulicon2 li:nth-child(4) a .fa-brands
{
   font-size: 30px;  
  padding-top: 5px;

}

.h2icon{
 
    
     right: 680px;
      margin-top: 1px;
   width: 100px;
}

.copy
    {
        bottom: 200px;
        right: 480px;
        font-size: 17px;
        width: 360px;
    }
    
    .btn1
    {
        width: 160px;
    }
           
    #font1
 {
       font-size: 9px;        
 }

     
        }

 @media (min-width: 1020px) and (max-width: 1024px) and (min-height: 1350px) and (max-height: 1366px)
 {


  
        
    #tech
{ 
   
  width:655px;

 
}
              #pics
{ 

  height:200px;
    width:657px;
 
}




      #tech:hover #pics{

  width:657px;
}
   
 

    
   .maylike {
 
    width: 250px;
   right: -40px;
}
  
   .maylike .maylike-body  .cta-btn
     {
         right: 160px;
         top:180px;
     }
    
    .titlechamp
    {
        width:910px;
    }

     
        }

@media (min-width: 1025px) and (max-width: 1180px) 
 {
          
           
   
.logs
{
     position: absolute;
    width: 12%;
    background-color: #2f2e40;
    bottom: 10px;
    left: 30px;
    font-size: 14.4px;
    font-weight: 1000;
}

.logs:before{
    
    left: 3px;
    top: 25px;
  
}
    
.logs:hover::before{
    margin: 5px;
    width: 90%;
    
    
}
    


     .logs a h1
{
    
    bottom: 10px;
    right: 5px;
     font-size: 12px;
    font-weight: 1000;
    width: 80px;
}

.butpro:before{
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    left: 30px;
    top: 25px;
    background-color:#2f2e40;
    position: absolute;
    transition: all ease-in-out 270ms;
    margin: 0 15 5 10%;
}
    
.butpro:hover::before{
    margin: 5px;
    width: 50%;
    
    
}
    
  .butpro:hover
{
    color:#2f2e40;
}

.butpro
{
    width:8%;
    bottom: 10px;
    left: 20px; 
}

.butlogout
{
  width:1px;
   left: 160px; 
}
           
#iconprof
{
    width:35px ;
    height: 35px;
      float:left;
    margin-top: -7px;
    margin-left: -25px;
     -webkit-border-radius:20px;
 
}
           
 .containers
{
      width: 170px;         
 }
 
.seh
{
    width: 250px          
}
           
 .btn
{
    right: 660px; 
    width: 70px;
}         
           
    #tech
{ 

  width:755px;
 
}
           
  #pics
{ 

  width:757px;

}

#picpost
{ 
   
 
  height:350px;
  width:100%;
     

   
 
}


    #tech:hover #pics{

 width:757px;
}
           
           
 .videoplayer
{ 
   

   height:350px;
  width:100%;
     

   
 
}

iframe
    {
     
 height:350px;
   width:100%;
    }
    
    
   .maylike {
 
    width: 290px;
   right: -60px;
}
    .boxRote
{
    
    margin-bottom:100px;
width:1000px;
}
.box {
    
    
    width: 200px;
    height: 250px;
    right: 400px;
    
}



.box span{

    /*transform: rotateY(calc(var(--i) * 36deg)) translateY(450px);*/
    transform: rotateY(calc(var(--i) * 36deg)) translateZ(450px);
   
}



.box span img{

}

.box span img:hover{
    transform: translateY(-15px);
    
}
    
    .titlechamp
    {
        width:1060px;
    }
    
     .titlechamp h1
    {
        right: 450px;
    }

    #ad nav
{
  
  width: 600px;
    height: 200px; 
  margin-top: 50px;
   
}

#adimage
{
  width: 600px;
   height: 200px;
}
    
    .bodicon{
    
    margin: 0;
    padding: 0;
    background: #ccc;
}
            
 .section1
  {
   width:650px;
  }

      section.slider {
  height: 560px;
}
    section.slider .title {
  top: 15px;
    left: 290px;
}
       section.slider .title2 {
  top: 15px;
    left: 380px;
}
       section.slider .title3 {
  top: 15px;
    left: 400px;
}


button.slider__button {
	
    right: 840px;
}

button.slider__button2 {

   margin-right: 0px;
}


.slider__track > * {
 
      margin-left:20px;
}



.slide .slideimg {
	 width: 100%;
    height: 350px;

}
           
 .depart
 {
     bottom: 35px;
     font-size: 16px;
 }
           
  .depart2
 {
     bottom: 60px;
     font-size: 16px;
     right: 100px;
     width: 105px;
 } 
           
    .depart3
 {
     bottom: 180px;
     font-size: 16px;
     right: 230px;
     width: 100px;
 } 
           
   .depart4
 {
     bottom: 275px;
     font-size: 16px;
     right: 350px;
      width: 123px;
 }  
     
       .depart5
 {
     bottom: 275px;
     font-size: 16px;
     right: 350px;
      width: 123px;
 }  
.ulicon{
    
   bottom: 20px;
  left: -615px;
   width: 100px;
 
}



.ulicon2{
    
   bottom: -10px;
    left: -300px;
        width: 100px;
  
}


.h2icon{
 
     right: 790px;
      margin-top: 1px;
   width: 200px;
}

.copy
    {
        bottom: 200px;
        right: 580px;
        font-size: 17px;
        width: 360px;
    }
    
    .btn1
    {
        width: 190px;
    }
           
    #font1
 {
       font-size: 12px;        
 }
    
        }

/*---------Between (1025px) and (1180px)----------------*/

@media (min-width: 1130px) and (max-width: 1138px) 
 {
          
           

           
       
           
    #tech
{ 

  width:720px;
 
}
           
  #pics
{ 

 width:732px;

}

#picpost
{ 
   
 
  height:350px;
  width:650px;
     

   
 
}


    #tech:hover #pics{

width:732px;
}
           
           
 .videoplayer
{ 
   

   height:350px;
    width:650px;
     

   
 
}

iframe
    {
     
 height:350px;
   width:650px;
    }
    
    
   .maylike {
 
    width: 275px;
   right: -60px;
}
 
    .titlechamp
    {
        width:1030px;
    }
    
     .titlechamp h1
    {
        right: 450px;
    }

button.slider__button {
	
    right: 800px;
}
    
.copy
    {

        right: 580px;
    }
   
    
        }

@media (min-width: 1139px) and (max-width: 1152px) 
 {
          
           

           
       
           
    #tech
{ 

  width:730px;
 
}
           
  #pics
{ 

 width:732px;

}

#picpost
{ 
   
 
  height:350px;
  width:650px;
     

   
 
}


    #tech:hover #pics{

width:732px;
}
           
           
 .videoplayer
{ 
   

   height:350px;
    width:650px;
     

   
 
}

iframe
    {
     
 height:350px;
   width:650px;
    }
    
    
   .maylike {
 
    width: 275px;
   right: -60px;
}
 
    .titlechamp
    {
        width:1030px;
    }
    
     .titlechamp h1
    {
        right: 450px;
    }


    
    

.copy
    {

        right: 580px;
    }
   
    button.slider__button {
	
    right: 800px;
}
        }

/*---------Between (1025px) and (1180px)----------------*/


  /* Media Query for Laptops and Desktops */
@media (min-width: 1181px) and (max-width: 1280px) and (min-height: 790px) and (max-height: 800px) 
    {
         #tech
{ 
   
     border:2px solid ;
    
    /*-webkit-border-top-right-radius:20px;
     -webkit-border-top-left-radius:20px;*/
    
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
   
   margin-bottom:  15px ;
 margin-right: -8px;
  height:200px;
  width:820px;
     
    background-color: black;
color: white;
text-align: center
   
 
}
            
                      
               #pics
{ 
   
  
 
left: 31.8%;
     -webkit-border-top-right-radius:0px;
     -webkit-border-top-left-radius:0px;
    
     -webkit-border-bottom-right-radius:16px;
    -webkit-border-bottom-left-radius:16px;
  height:200px;
     width:822px;
      margin-right: -2px;
  

   
 
}




    #tech:hover #pics{

 width:822px;
}
        
        .titlechamp
    {
        width:1140px;
    }
    
     .titlechamp h1
    {
        right: 550px;
    }
     }

        /* Media Query for Large screens */
 @media (min-width: 1281px) and (max-width: 1400px) 
 {
  #tech
{ 
   
     border:2px solid ;
    
    /*-webkit-border-top-right-radius:20px;
     -webkit-border-top-left-radius:20px;*/
    
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
   
   margin-bottom:  15px ;
 margin-right: -8px;
  height:200px;
   width:894px;
     
    background-color: black;
color: white;
text-align: center
   
 
}
            
                      
               #pics
{ 
   
  
 
left: 31.8%;
     -webkit-border-top-right-radius:0px;
     -webkit-border-top-left-radius:0px;
    
     -webkit-border-bottom-right-radius:16px;
    -webkit-border-bottom-left-radius:16px;
  height:200px;
    width:895px;
      margin-right: -2px;
  

   
 
}

#picpost
{ 
   
  
 
left: 31.8%;
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
  height:350px;
   width: 770px;
     

   
 
}


    #tech:hover #pics{

 width:895px;
}

 .videoplayer
{ 
   
  
 
left: 31.8%;
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
  height:350px;
  width: 770px;
     

   
 
}

iframe
    {
        left: 31.8%;
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
 height:350px;
  width:770px;
    }
    
    
   .maylike {
 
    width: 320px;

}
    .boxRote
{
    
    margin-bottom:100px;

}
.box {
    
    
    width: 240px;
    height: 240px;
    right: 490px;
    
}



.box span{

    /*transform: rotateY(calc(var(--i) * 36deg)) translateY(450px);*/
    transform: rotateY(calc(var(--i) * 36deg)) translateZ(550px);
   
}



.box span img{

}

.box span img:hover{
    transform: translateY(-15px);
    
}
    
    .titlechamp
    {
        width:1230px;
    }
    
     .titlechamp h1
    {
        right: 550px;
    }

    #ad nav
{
  
  width: 800px;
    height: 200px; 
  margin-top: 50px;
   
}

#adimage
{
  width: 800px;
   height: 200px;
}
    
    .bodicon{
    
    margin: 0;
    padding: 0;
    background: #ccc;
}
            
 .section1
  {
   width: 750px;
  }

      section.slider {
  height: 560px;
}
    section.slider .title {
  
    left: 380px;
}

       section.slider .title2 {
  
    left: 450px;
}

       section.slider .title3 {
  
    left: 480px;
}

     

button.slider__button {
	
    right: 980px;
}

button.slider__button2 {

   margin-right: 0px;
}


.slider__track > * {
 
      margin-left:20px;
}



.slide .slideimg {
	 width: 100%;
    height: 350px;

}
            
.ulicon{
    
   bottom: 20px;
    left: -750px;
        width: 100px;
 
}



.ulicon2{
    
   top: 3px;
    left: -470px;
        width: 100px;
  
}


.h2icon{
 
    
     right: 920px;
     padding-bottom: 50px;
      margin-top: 1px;

}

.copy
    {
        right: 700px;
    }
    
    .btn1
    {
        width: 230px;
    }
    
            
            
 }

/*---------Between (1281px) and (1400px)----------------*/

 @media (min-width: 1360px) and (max-width: 1366px) 
 {
#tech
{ 
 width:873px;
}
 #pics
{ 
   width:873px;  
}

#picpost
{ 

left: 31.8%;
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
  height:350px;
   width: 770px;

}

   #tech:hover #pics{

 width:874px;
}
 .videoplayer
{ 
   
  
 
left: 31.8%;
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
  height:350px;
  width: 770px;
     

   
 
}

iframe
    {
        left: 31.8%;
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
 height:350px;
  width:770px;
    }
    
    
   .maylike {
 
    width: 320px;

}
 

    .titlechamp
    {
        width:1220px;
    }
    
     .titlechamp h1
    {
        right: 570px;
    }


.ulicon{
    
  
    right: 785px;
    
  
}
     
.ulicon2{
    
   bottom: -7px;
    left: -400px;
        width: 100px;
  
}
     
      .ulicon2 li:nth-child(1) a .fa-brands {
          font-size:30px;
    padding-top:5px;
}
        .ulicon2 li:nth-child(2) a .fa-brands {
   font-size:30px;
    padding-top:5px;
}
        .ulicon2 li:nth-child(3) a .fa-brands {
    font-size:30px;
    padding-top:5px;
}
    .ulicon2 li:nth-child(4) a .fa-brands {
   font-size:30px;
    padding-top:5px;
}

.h2icon{
 
    
     right: 950px;
 
}

.copy
    {
        right: 680px;
    }
    
    .btn1
    {
        width: 230px;
    }
    
            
            
 }
/*---------Between (1281px) and (1400px)----------------*/


@media (min-width: 1401px) and (max-width: 1500px)
{
    
    .butlogout
{
  width:1px;
   left: 270px; 
}
  .butpro:before{
    left: 110px;
}  
    
    
        .butpro font
{
    position: relative;
    left: 10px;
    bottom: 3px;
}
               #tech
{ 
   
     border:2px solid ;
    
    /*-webkit-border-top-right-radius:20px;
     -webkit-border-top-left-radius:20px;*/
    
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
   
   margin-bottom:  15px ;
 margin-right: -8px;
  height:200px;
  width:957px;
     
    background-color: black;
color: white;
text-align: center
   
 
}
            
               #pics
{ 
   
left: 31.8%;
     -webkit-border-top-right-radius:0px;
     -webkit-border-top-left-radius:0px;
    
     -webkit-border-bottom-right-radius:16px;
    -webkit-border-bottom-left-radius:16px;
  height:200px;
   width:957px;
      margin-right: -2px;
  
 
}

#picpost
{ 
   
  
 
left: 31.8%;
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
  height:390px;
  width:810px;
     

   
 
}


    
    #tech:hover #pics{

width:958px;
}
            
 .videoplayer
{ 
   
  
 
left: 31.8%;
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
  height:390px;
  width:810px;
     

   
 
}

iframe
    {
        left: 31.8%;
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
 height:390px;
  width:810px;
    }
    
    
   .maylike {
 
    width: 390px;
height: 450px;
}
    
    .maylike .maylike-img {
  
 height:450px;
}

.maylike .maylike-img>img {
 
      height:450px;
}
    
    .row {
    height: 550px;

}
    .boxRote
{
    
    margin-bottom:100px;

}
.box {
    
    
    width: 250px;
    height: 250px;
    right: 530px;
    
}



.box span{

    /*transform: rotateY(calc(var(--i) * 36deg)) translateY(450px);*/
    transform: rotateY(calc(var(--i) * 36deg)) translateZ(550px);
   
}



.box span img{

}

.box span img:hover{
    transform: translateY(-15px);
    
}
    
    .titlechamp
    {
        width: 1320px;
    }
    
     .titlechamp h1
    {
        right: 600px;
    }

    #ad nav
{
  
  width: 800px;
    height: 200px; 
  margin-top: 50px;
   
}

#adimage
{
  width: 800px;
   height: 200px;
}
    
    .bodicon{
    
    margin: 0;
    padding: 0;
    background: #ccc;
}
            
 .section1
  {
   width: 800px;
  }

      section.slider {
  height: 560px;
}
    section.slider .title {
  
    left: 480px;
}

    section.slider .title2 {
  
    left: 550px;
}

    section.slider .title3 {
  
    left: 580px;
}

    

button.slider__button {
	
    right: 1130px;
}

button.slider__button2 {

   margin-right: 100px;
}


.slider__track > * {
 
      margin-left:20px;
}



.slide .slideimg {
	 width: 100%;
    height: 350px;

}
            
.ulicon{
    
   bottom: 20px;
    left: -820px;
        width: 100px;
 
}



.ulicon2{
    
   bottom: -8px;
    left: -440px;
        width: 100px;
  
}


.h2icon{
 
    
    right: 1000px;
     

}

.copy
    {
        right: 750px;
    }
    
    .btn1
    {
        width: 250px;
    }
    

        }

/*---------Between (1401px) and (1500px)----------------*/


@media (min-width: 1400px) and (max-width: 1430px)
{

               #tech
{ 
  
  
   width:900px;

 
}

               #pics
{ 
   

    width:902px;

  
 
}

    
    #tech:hover #pics{

 width:902px;
}
            
 
   .maylike {
 
    width: 340px;

}

    
}

@media (min-width: 1431px) and (max-width: 1440px)
{
    
    

               #tech
{ 
   
     border:2px solid ;
    
    /*-webkit-border-top-right-radius:20px;
     -webkit-border-top-left-radius:20px;*/
    
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
   
   margin-bottom:  15px ;
 margin-right: -8px;
  height:200px;
   width:920px;
     
    background-color: black;
color: white;
text-align: center
   
 
}
            
               #pics
{ 
   
left: 31.8%;
     -webkit-border-top-right-radius:0px;
     -webkit-border-top-left-radius:0px;
    
     -webkit-border-bottom-right-radius:16px;
    -webkit-border-bottom-left-radius:16px;
  height:200px;
    width:922px;
      margin-right: -2px;
  
 
}

    
    #tech:hover #pics{

 width:922px;
}
            
 
   .maylike {
 
    width: 345px;

}

    
    .titlechamp
    {
        width:1270px;
    }
    
     .titlechamp h1
    {
        right: 600px;
    }


    

        }

/*---------Between (1401px) and (1500px)----------------*/

@media (min-width: 1501px) and (max-width: 1600px)
{
    
     .seh{
 
        right: 490px;
   
    }

    .btn{
    
   right: 800px;
 
    }
     .butlogout
    {
        left: 290px;
    }
    
    .butpro:before{
 
    left: 110px;
    top: 25px;

    }
    
               #tech
{ 
   
     border:2px solid ;
    
    /*-webkit-border-top-right-radius:20px;
     -webkit-border-top-left-radius:20px;*/
    
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
   
   margin-bottom:  15px ;
 margin-right: -8px;
  height:200px;
  width:1010px;
     
    background-color: black;
color: white;
text-align: center
   
 
}
    
    #pics
{ 
   
  
 
left: 31.8%;
     -webkit-border-top-right-radius:0px;
     -webkit-border-top-left-radius:0px;
    
     -webkit-border-bottom-right-radius:16px;
    -webkit-border-bottom-left-radius:16px;
  height:200px;
   width:1011px;
      margin-right: -2px;
  

   
 
}

#picpost
{ 
   
  
 
left: 31.8%;
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
  height:450px;
  width:900px;
     

   
 
}
.videoplayer
{ 
   
  
 
left: 31.8%;
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
  height:450px;
  width:900px;
     

   
 
}

iframe
    {
        left: 31.8%;
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
 height:450px;
  width:900px;
    }
    
    
    #tech:hover #pics{

width: 1013px;
}
    
   .maylike {
 
    width: 390px;
height: 500px;
}
    
    .maylike .maylike-img {
  
 height:500px;
}

.maylike .maylike-img>img {
 
      height:500px;
}
    
    .row {
    height: 600px;

}
    .boxRote
{
    
    margin-bottom:150px;

}
.box {
    
    
    width: 300px;
    height: 300px;
    right: 560px;
    
}



.box span{

    /*transform: rotateY(calc(var(--i) * 36deg)) translateY(450px);*/
    transform: rotateY(calc(var(--i) * 36deg)) translateZ(550px);
   
}



.box span img{

}

.box span img:hover{
    transform: translateY(-15px);
    
}
    
    .titlechamp
    {
        width:1395px;
    }
    
     .titlechamp h1
    {
        right: 600px;
    }

    #ad nav
{
  
  width: 1000px;
    height: 250px; 
  margin-top: 50px;
   
}

#adimage
{
  width: 1000px;
    height: 250px; 
}
    
    .bodicon{
    
    margin: 0;
    padding: 0;
    background: #ccc;
}
    
    .section1
  {
   width: 900px;
  }
  
       section.slider {
  height: 680px;
}
    section.slider .title {

    left: 500px;
}
    
    section.slider .title2 {

    left: 600px;
}
    
    section.slider .title3 {

    left: 600px;
}


button.slider__button {

    right: 1250px;
}

button.slider__button2 {

}



.slider__track > * {

      margin-left: 20px;
}




.slide .slideimg {
	 width: 100%;
    height: 450px;

}



.ulicon{
    
   bottom: 20px;
    left: -955px;
        width: 100px;
    transform: translate(-50%,-50%);

}



.ulicon2{
    
   bottom: -7px;
    left: -540px;
        width: 100px;
    transform: translate(-50%,-50%);
    
}


.h2icon{
 
    
     right: 1140px;
   
  

}

.copy
    {
        right: 880px;
    }
    
    .btn1
    {
        width: 280px;
    }
    
        #most_watch
{

    font-size: 15px;


}
    
        }

@media (min-width: 1601px)
{
    
   html {
    width: 1600px;
   background: linear-gradient(70deg, #ffffff, #f9c724, #ffffff, #f9c724);
  /*background: linear-gradient(10deg, #f9dc24, #f9dc24, #f9dc24, #ffffff);*/
   
    color: aliceblue;
position: absolute;
       right: 30%;
    color: #000305;
    font-size: 87.5%;
    font-family:'AraAqeeq', sans-serif;
    line-height: 1.5;
    
} 
   
 .mainheader nav{
    
    position: absolute;
    width: 90%;
    height: 40px;
    border-radius: 5px;
    -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
   
}
    
     .mainheaderf nav,.mainheaderb nav{
  
    width:550px;
         height: 47px;
   
   
}
    
    .mainheaderw nav{
  
    width:450px;
   
   
}
   .seh {
        right: 500px;
      
    }
     .btn {
        right: 810px;
     
    }  
    
    .butlogout
    {
        left: 290px;
    }
      .butpro:before
    {
        left: 110px;
    }
     .containers{
  right: 1110px;
    width: 200px;
} 
    .container{
    height: 10%;
    width: -100%;
}

.shapes{
    height: 10%;
    width: 10%;
}

.container ul{
    list-style: none;
}

.shapes li{
   
    border-radius: 20%;
    position: absolute;
    display: inline;
    top: -100px;
    z-index: -1;
    animation: animate 8s linear infinite;
}

.shapes li:nth-child(even) {
    left: calc(70px*var(--i));
    width: calc(4px*(200 - var(--i)));
    height: calc(4px*(200 - var(--i)));
    animation-delay: calc(3s*var(--i));
    animation-duration: calc(1.1s*var(--i) + 90s);
}

.shapes li:nth-child(odd) {
    left: calc(75px*var(--i));
    animation-delay: calc(1.2s*var(--i));
    animation-duration: calc(2s*var(--i) + 60s);
}

.shapes li:nth-child(3n) {
    width: calc(5px*var(--i) + 20px);
    height: calc(5px*var(--i) + 20px);
    animation-delay: calc(1.2s*(21 - var(--i)));
    animation-duration: calc(1.6s*(21-var(--i)) + 4s);
}

.shapes li:not(:nth-child(3n)) {
    height: calc(6px*(21 - var(--i)));
    width: calc(6px*(21 - var(--i)));
    animation-duration: calc(1.2s*var(-i) + 8s);
}

@keyframes animate{
    0%{
        transform: translateY(0px) rotate(0deg);
        opacity: 1;
    }
    100%{
        transform: translateY(2000px) rotate(360deg);
        opacity: 0;
    }
}
    #tech
{ 
   
     border:2px solid ;
    
    /*-webkit-border-top-right-radius:20px;
     -webkit-border-top-left-radius:20px;*/
    
     -webkit-border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
   
   margin-bottom:  15px ;
 margin-right: -8px;
  height:200px;
  width:1020px;
     
    background-color: black;
color: white;
text-align: center
   
 
}
    
    #pics
{ 

width:1022px;

}
    
      #tech:hover #pics{

width:1022px;
}
    
     .maylike {
 
    width: 390px;

}
    
     .maylike .maylike-body  .cta-btn
     {
         font-size: 25px;
         right: 180px;
         top: 180px;
     }  
    
      .maylike .maylike-body  h3
     {
         font-size: 20px;
         position: relative;
         right: 10px;
         top: -30px;
     }  
    
    .titlechamp
    {
        width:1430px;
    }
    
     .titlechamp h1
    {
        right: 680px;
    }
    
        .boxRote
{
    
    margin-bottom:50px;

}
.box {
    
    
   
  
    right: 600px;
    
}



.box span{

    /*transform: rotateY(calc(var(--i) * 36deg)) translateY(450px);*/
    transform: rotateY(calc(var(--i) * 25deg)) translateZ(600px);
   
}

 .ulicon{
    
 
  left: -1000px;
 
 
}  
    
     .ulicon2{
    
 
  right: 550px;
 
 
}   
.h2icon{
 
    
     right: 1200px;
    
}

.copy
    {
      
        right: 900px;
  
        
    }
    
    .btn1
    {
        width: 280px;
        font-size: 20px;
        font-weight: 900;
    }
    .wrapper label
    {
        font-size: 20px;
    }
   
    .titlepost
    {
         font-size: 30px;
    }
    .post-info
    {
        font-size: 18px;
    }
    
     section.slider .title {

    left: 500px;
}
    
    section.slider .title2 {

    left: 600px;
}
    
    section.slider .title3 {

    left: 600px;
}


button.slider__button {

    right: 1250px;
}

button.slider__button2 {

}
    .slide_content {

    width: 60%;
   
}
    
    .GoToTopButton{
   
    bottom: 20px;
    right: 30.5%;
    
}
    

        }