@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;500&display=swap');


* {
  margin: 0;
  box-sizing: border-box;
}

html {
  scroll-snap-type: y mandatory;
}

.bold {font-weight: 700;}
.logobase {
  position: absolute;
  top:6%;
  left: 2%;
  width: 100px;
  height: auto;
  z-index: 1;
}

.namesmall { 
  position: absolute;
  top:10%;
  left: 2%;
  font-size: 16px; color: white; opacity: .7;
  z-index: 1;
  }

body {
  color: white;
  background-color: fff;
  height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
  font-family: 'Roboto', sans-serif;
  
}

.backbase {
  position: absolute;
  top:2%;
  left: 2%;
  width: 100px;
  height: auto;
  font-size: 12px;
  z-index: 1;
}
.backbase a{ color:#fff}



 .box2content {
  float:left;
  display:block;
  width:30%;
  height:100%;
  background:#fff;
  height: 100%;
  overflow: scroll;
  transitionx: width 1s, height 1s; 
}

#box1x { display: none;}
.boxcontent {
  float:left;
  width:70%;height: 100%;
  backgroundx:blue;
  transitionx: width 1s, height 1s;
}

.videoSidebar {
  position: absolute;
  top: 18%;
  right: 30%;
}

.videoSidebar .material-icons {
  font-size: 38px;
  cursor: pointer;
}

.videoSidebar .material-iconsbig {
  font-size: 38px;
  cursor: pointer;
  background-color: #657786;
}



.app__videos {
  position: relative;
  height: 100%;
  background-color: #000;
  overflow: scroll;
  width: 100%;
  max-width: 100%;
  scroll-snap-type: y mandatory;
  xborder-radius: 20px;
}

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

.app__videos {
  -ms-overflow-style: none;
  scrollbar-width: none;
}


.video {
  position: relative;
  height: 100%;
  width: 100%;  
  background-color: rgb(0, 0, 0);
  scroll-snap-align: start;

  
}

.jointext {
  background:    #4361ee;
  border-radius: 20px;
  padding:       10px 45px;
  color:         #ffffff;
  display:       inline-block;
  font:          normal 20px/1 'Roboto', sans-serif;
  text-align:    center;
  width: 90%;
}
.jointext a { color:#ffffff;text-decoration: none;}

.textinfo {
color: rgb(37, 37, 37); padding: 10px 20px;
font: 300 15px/1 'Roboto', sans-serif;
line-height: 1.6;

}


.video__player {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.pix__player {
  object-fit: cover;
  width: 100%;
  height: 100%;
  max-height: 1400px;
  display: flex;
  justify-content: center;
  align-items: center;
  
}





#videosidebar_content {
  position: absolute;
  top: 0%;
  right: 20px;
  width:200px;
  height: 100%;
  background:darkcyan; 

}
.post-comment-user-img{
  border-radius: 50%;
  height: 40px;
  width: 40px;
  cursor: pointer;
}



.videoSidebar__button {
  padding: 10px;
  text-align: center;
}

.videoSidebar__buttonx {
  
  width: 80px;
  text-align: center;
  background-color: #171717;
  padding: 10px;
}
.videoSidebar__buttonmobile {
  width: 60px;
  text-align: center;
  background-color: #171717;
  padding: 10px;
}

.videoFooter {
  position: relative;
  bottom: 100px;
  margin-left: 20px;
  color: white;
  display: flex;
text-align: center;
}

@keyframes spinTheRecord {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.videoFooter__record {
  animation: spinTheRecord infinite 5s linear;
  height: 50px;
  filter: invert(1);
  position: absolute;
  bottom: 0;
  right: 20px;
}

.videoFooter__text {
  flex: 1; 

}

.videoFooter__text h3 {
  padding-bottom: 20px; 
}

.videoFooter__icon {
  position: absolute;
}

.videoFooter__ticker {
  width: 400px;
  display: flex;
  align-items: center;
}

.videoFooter__ticker marquee {
  height: fit-content;
  margin-left: 30px;
  width: 60%;
}

.videoFooter__description {
  padding-bottom: 20px;
}

@media (max-width: 425px) {
  .app__videos {
    width: 100%;
    height: 100%;
    max-width: 100%;
    border-radius: 0;
  }
}

/* profile starts  */
.profilecard{
  width: 100%; float: left; background: rgb(255, 255, 255); margin: 0px; position: relative; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
 }
  
 .profilecardhead{
  background-color:#ff0000;height:145px; width: 100%;
 }

 .profilecardhead img{
  height:145px; width: 100%;
  
 }
  
 .profilecardimagediv{
  margin:-50px 0 0 8%;padding:1px;background:#FFF;display:inline-block;border-radius:50%; text-align: center; 
 }
  
 .profilecardimagediv img{
  width:120px;height:120px;border-radius:50%;box-sizing:border-box;border:3px solid #FFF;
 }
  
 .profilecardnameidcont{
  position:absolute;top:103px;left:90px;width:185px;
 }
  
 .profilecardnamecont{
  font-size:18px;font-weight:bold;line-height:25px;margin:-1px 0 -2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal
 }
  
 #profilecardname{
  color:inherit;text-transform:uppercase;
 }
  
 #profilecarduid{
  color:#667786;font-size:14px;padding-right:5px;text-transform:uppercase;
 }
  
 .profilecardstatsdiv{
  padding:0px 6px 0px 16px;
 }
  
 .profilecardstatslist{
  table-layout:fixed;box-sizing:border-box;display:table;margin:0;min-width:100%;padding:0;list-style:outside none;
 }
  
 .profilecardstatslistitem{
  width:10%;vertical-align:bottom;display:table-cell;padding:0;box-sizing:border-box;line-height:1;overflow:hidden;transition:all 0.15s ease-in-out 0s;text-align:inherit;
 }
  
 .dispblk{
  display:block;
 }
  
 .nametext {
 color:#000; float: left;
 font-size:1.5rem;


 }
 .statslistitemhead{
  color:#657786;font-size:12px;font-weight:bold;letter-spacing:0,02em;line-height:16px;overflow:hidden;transition:color 0.15s ease-in-out 0s;display:block;
 }
  
 .statslistitemcount{
  display:block;font-size:18px;font-weight:bold;padding-top:3px;transition: color .15s ease-in-out 0s;color:#ff0000;
 }
  
 .rightcontainer{
  width:580px;float:right;margin-top:10px;margin-right:10px;
 }
  
 .posttweetcontainer{
  background:#ffe5e5;padding:10px 12px;position:relative;
 }
  
 .posttweetprofimg{
  width:32px;height:32px;position:absolute;left:28px;top:13px;border-radius:50%;
 }
  
 .follow {
  position:absolute;
  right:10px;
  top:150px;
  background:    #fe0088;
  border-radius: 20px;
  padding:       10px 15px;
  color:         #ffffff;
  font:          normal 15px/1 'Roboto', sans-serif;
  text-align:    center;
  width: 40%;
}
.follow a { color:#ffffff;text-decoration: none;}
 .ml56px{
  margin-left:56px;
 }
  
 .ml58px{
  margin-left:58px;
 }
  
 .mt10px{
  margin-top: 10px;
 }
  
 .posttweettacontainer{
  border-radius: 8px; border: 1px solid rgb(255, 153, 153); border-image: none; line-height: 20px; box-shadow: 0px 0px 0px 1px #ff9999; background-color: rgb(255, 255, 255);
 }
  
 .posttweetta{
  border-width: 1px 1px 0px; border-style: solid solid none; border-color: rgb(230, 236, 240) rgb(230, 236, 240) currentColor; margin: 0px; padding: 8px; outline: 0px; border-radius: 8px; border-image: none; width: 100%; height: 50px; font-family: "Segoe UI",Arial,sans-serif; font-size: 14px; box-sizing: border-box; opacity: 0.8; background-color: rgb(255, 255, 255);
 }
  
 .posttweetcountcont{
  overflow: hidden; margin-top: 10px;
 }
  
 .posttweetcount{
  margin-right: 10px; display: block; float: right;
 }
  
 .posttweetbutcont{
  overflow: hidden; margin-top: 10px;
 }
  
 .posttweetbut{
  padding: 6px 16px; border-radius: 100px; border: 1px solid rgb(255, 50, 50); border-image: none; text-align: center; color: rgb(255, 255, 255); line-height: 20px; font-size: 14px; font-weight: bold; white-space: nowrap; position: relative; cursor: pointer; float: right; box-shadow: none; background-color: rgb(255, 50, 50);
 }
 

/* profile end */


/**
  * mobile base codes
*/

.videomobile { display: none;
  position: absolute;
  top: 0%;
  right: 0%;

}

@media screen and (max-width:1120px) {
  .boxcontent { float:left;width:70%; height: 100%;}
  .box2content { float:left;width:30%; height: 100%;}
  .videoSidebar {  position: absolute; right: 30%; z-index: 1;}

}
@media screen and (max-width:1100px) {
  .boxcontent { float:left;width:60%;height: 100%;}
  .box2content { float:left;width:40%;height: 100%;}  
  .videoSidebar {  position: absolute; right: 40%; z-index: 1;}
}

@media screen and (max-width:1020px) {
  .boxcontent { float:left;width:70%;height: 100%;}
  .box2content { float:left;width:30%;height: 100%;}  
  .videoSidebar {  position: absolute; right: 30%; z-index: 1;}
}

@media screen and (max-width:780px) {
  .boxcontent { float:left;width:70%;height: 100%;}
  .box2content { float:left;width:30%;height: 100%;}  
  .videoSidebar { position: absolute; right: 30%; display: block; z-index: 1;}
  
}

@media screen and (max-width:680px) {
  .boxcontent { display: none; width:100%}
  .box2content { width: 100%;}
  .videomobile { display: block; z-index: 1;}
  .videoSidebar { position: absolute; right: 3%; display: block; z-index: 1;}
  .namesmall { display: none;}
}


 /**
  * BASIC TYPE
  */
 
 img, video {
   max-width: 100%;
   vertical-align: middle;
 }
 

 
 /**
  * BOX HACKING
  */
 
 html {
   box-sizing: border-box;
 }
 
 *,
 *:before,
 *:after {
   box-sizing: inherit;
 }
 .wrapper { 
   max-width: 100%;
   margin-right: auto;
   margin-left: auto;
   padding: 1.5em;
 }

 .masonry-wrapper {
   padding: .5em;
   max-width: 100%;
   margin-right: auto;
   margin-left: auto;
   backgroundx:#1b1b1b;
 }
 .masonry {
   columns: 1;
   column-gap: 2px;
 }
 .masonry-item {
   display: inline-block;
   vertical-align: top;
   margin-bottom: 2px;
  
 }
 @media only screen and (max-width: 1023px) and (min-width: 768px) {
     .masonry {
     columns: 2;
   }
 }

 @media only screen and (max-width: 768px) and (min-width: 568px) {
  .masonry {
  columns: 3;
}
}
 @media only screen and (min-width: 1024px) {
   .masonry {
     columns: 3;
   }
 }
 .masonry-item, .masonry-content {
   border-radius: 2px;
   overflow: hidden;
   
 }
 
 video {
         height:100%;
         width: 100vh;
         object-fit: fill; // use "cover" to avoid distortion
         position: absolute;
     }
 
 .pixfix {
         height:100%;
         width: 100vh;
         object-fit: fill; // use "cover" to avoid distortion
         position: absolute;
     }
 
 
 .masonry-item {
   filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, .3));
   transition: filter .25s ease-in-out;
 }
 .masonry-item:hover {
   filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, .3));
 
 }
 
 .masonry-item  { width: 100%;}
 
 .masonry-footer {
   font-size: .75em;
   opacity: .25;
   text-align: center;
   padding-top: 3em; 
   padding-bottom: 3em;
   margin-bottom: -1.5em;
   transition: opacity 1s ease-in-out;
 }
 
 .space {
 
   text-align: center;
   padding-top: 3em; 
   padding-bottom: 3em;
 
 }
 .masonry-footer a {
   color: currentColor;
 }
 .masonry-footer:hover, .masonry-footer:active, .masonry-footer:focus {
   opacity: .75;
 }
 
 
 .masonry  > a {
     cursor: pointer;
 }
 
 
 .hovermasonryx {
     backface-visibility: hidden;
     display: block;
     position: relative;
     z-index: 0;
     overflow: hidden;
     -webkit-transform: translateZ(0px);
     -ms-transform: translateZ(0px);
     -o-transform: translateZ(0px);
     transform: translateZ(0px);
     -webkit-transition: all 0.1s ease-out;
     -o-transition: all 0.1s ease-out;
     transition: all 0.1s ease-out;
     vertical-align: middle;
 }

 .hovermasonry img { width: 100%;}
 
 .hovermasonryx:hover{
     content: "";
     position: absolute;
 
       background: url(../images/over.png) center no-repeat ;   
 
     transition: all 0.1s ease-out;
 }
 .hovermasonry {
   backface-visibility: hidden;
   display: block;
   position: relative;
   z-index: 0;
   overflow: hidden;
   -webkit-transform: translateZ(0px);
   -ms-transform: translateZ(0px);
   -o-transform: translateZ(0px);
   transform: translateZ(0px);
   -webkit-transition: all 0.1s ease-out;
   -o-transition: all 0.1s ease-out;
   transition: all 0.1s ease-out;
   vertical-align: middle;
 
 
 }
   .hovermasonry::before {
     content: "";
     position: absolute;
     z-index: 1;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(255,255,255,0.15);
       background: url(images/hover.png) center no-repeat ;   
       -webkit-transform: scale(0);
     -ms-transform: scale(0);
     -o-transform: scale(0);
     transform: scale(0);
     -webkit-transition: all 0.1s ease-out;
     -o-transition: all 0.1s ease-out;
     transition: all 0.1s ease-out;
   }
   .hovermasonry:hover::before,
   .hovermasonry:focus::before {
     -webkit-transform: scale(1);
     -ms-transform: scale(1);
     -o-transform: scale(1);
     transform: scale(1);
   }
 
 /*
  * footer
  */
 
 footer{
   padding: 60px 0;
   text-align: center;
   color: #bababa;
   margin-top: 0px;
 }
 footer img { width:auto;}
 footer span{
   display: block;
   margin: 0 auto 20px;
 }
 footer p{
   font-size: 16px;
   line-height: 24px;
   margin: 5px 7% 30px;
 }
 footer p strong{color: #fff;}
 footer h5{
   font-size: 16px;
   font-weight: 700;
   color: #737373;
   text-transform: uppercase;
 }
 footer small{
   font-size: 12px;
   color: #9d9d9d
 }
 
 footer a{ color:#fff}
 footer a:hover{ color:#ff8a00}
 
 
 .logo img{
   width: 700px;
   height: auto;
   margin:15px;
   transition: all .2s;
 }
 .logox{ float:left;
 
 
 }
 .logox img{
   width: 371px;
   height: auto;
   margin:15px;
   transition: all .2s;
 }
 
 @media screen and (max-width:1240px) {
 .logo{margin-left: 10px;}
 }
 @media screen and (max-width:1100px) {
 .logo img{
   width: 471px;
   height: auto;
   transition: all .2s;
 }
 
 @media screen and (max-width:960px) {
 html, body{overflow: auto}
 .logo img{
   width: 500px;
   height: auto;
   transition: all .2s;
 }
 header.fixed .logo img{width: 320px;}
 
 @media screen and (max-width:680px) {
 .logo img{width: 400px}
 }
 @media screen and (max-width:550px) {
 .logox img{ width:80% }
 footer{margin-top: 10px;}
 
 }
 @media screen and (max-width:400px) {
 .logox img{ width:30% }
 }
 /*
  * Header
  */
 
 .nav-masthead .nav-link {
   padding: .25rem 0;
   font-weight: 700;
   color: rgba(255, 255, 255, .5);
   background-color: transparent;
   border-bottom: .25rem solid transparent;
 }
 
 .nav-masthead .nav-link:hover,
 .nav-masthead .nav-link:focus {
   border-bottom-color: rgba(255, 255, 255, .25);
 }
 
 .nav-masthead .nav-link + .nav-link {
   margin-left: 1rem;
 }
 
 .nav-masthead .active {
   color: #fff;
   border-bottom-color: #fff;
 }