/**
 * Copyright: 2022 (c)Franco (nextime) Lanza <franco@nexlab.it>
 * License: GNU/GPL version 3.0
 *
 * This file is part of SexHackMe Wordpress Plugin.
 *
 * SexHackMe Wordpress Plugin is free software: you can redistribute it and/or modify it 
 * under the terms of the GNU General Public License as published 
 * by the Free Software Foundation, either version 3 of the License, 
 * or (at your option) any later version.
 *
 * SexHackMe Wordpress Plugin is distributed in the hope that it will be useful, 
 * but WITHOUT ANY WARRANTY; without even the implied warranty of 
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. 
 * See the GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License 
 * along with SexHackMe Wordpress Plugin. If not, see <https://www.gnu.org/licenses/>.
 */

.sexhack_gallery_title {
   top: -30px;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2; 
   -webkit-box-orient: vertical;
   text-align: left;
   margin-bottom: 0.1em !important;
}

.sexhack_gallery_thumbnail {
   padding: 10px 10px 10px 10px;
}

ul.products li.sexhack_thumbli {
   //border: 2px solid #253e50;
   border-radius:15px;
   margin-bottom: 1em; 
}


.sexhack_vtag {
  position:relative;
  float:left;
  border-radius:20px;
  text-align: center;
  font-size: 9px;
  color:white;
  top:-10px;
}

.sexhack_vtag:hover {
   z-index:100;
}
.sexhack_download {
   position: absolute;
   top:1px;
   left:-1px;
   z-index:100;
   border-bottom:-20px;
   background-color:#4a235a;
}

.sexhack_VR {
   position: absolute;
   top:1px;
   right:-5px;
   z-index:100;
   font-size: 14px;
   border-bottom:-20px;
   background-color:#9c640c;
}

.sexhack_public {
   background-color:#145a32;
}

.sexhack_premium {
   background-color: #78281f;
}

.sexhack_members {
   background-color: #154360;
}

.sexhack_preview {
   background-color: #283747;
}


.sexhack-videonotify {
   margin:  0 0 0 0; 
   text-align: center;
	font-weight: bold;
	padding: 10% 0;
}

.sexhack-videonotify a {
	font-weight: bold;
}
.sexhack-video-container {
   border: solid 1px white;
   border-top: solid 0px;
   border-right: solid 0px;
   border-left: solid 0px;
	border-radius: 0px 0px 8px 8px;

}

.sexhack_videopreview {
   width: 100%;
}

.sexhack-tabs {
	margin-left: 10px;
}

.sexhack_tab_button {
	border-radius: 0 0 4px 4px;
   padding: 0.2em 0.4em;
}

.sexhack_toggled_button {
	background-color: black;
	color: white;
	border-bottom: 1px solid white;
	border-left: 1px solid white;
	border-right: 1px solid white;
	outline: 2px solid black;
}

@media screen and (max-width: 568px) {
   .col-full {
      margin-left: 0.41em;
      margin-right: 0.41em;
   }

}

@media screen and (max-width: 767px) {
   .videogallery-home {
      width: 100%;
      margin-left: 0%;
   }
   .sexhack_gallery_thumbnail { 
      width:90%;
      display: block;
   }
   
	.sexhack-video-container {
		min-height: 100px;
	}

   .sexhack_video_title {
      font-size: 0.9em;
      color: #e0e0e0;
      font-weight: 400;

   }

   .col-full {
      margin-left: 0.41em;
      margin-right: 0.41em;
   }

   .sexhack_vtag {
      padding: 0 10px 0 10px;
   }

   .sexhack_gallery_row {
      display: block;
   }

	ul.products li.sexhack_thumbli img.sexhack_thumbnail {
		width:90%;
	}
	.sexhack_thumb_cont .sexhack_thumb_hover {
		width: 100%;
	}

}


@media screen and (min-width: 768px) {
	
   .videogallery-home {
      width: 100%;
      margin-left: 0;
   }  


	.site-main ul.products.columns-4 li.sexhack_thumbli {
      width: 24% !important;
      margin-right: 1% !important;
      /* This to solve the different title lenght, combine with right trim and popup full title maybe, 
         and maybe not here but adding another container.
         I should also re-check the sexhack class naming...
      */
      height: fit-content;
   }

   .sexhack_gallery_title {
      font-size: 0.95rem !important;
      font-weight: 350 !important;
      line-height: 1;
   }

	.sexhack-video-container {
		min-height: 200px;
	}

   .sexhack_vtag {
      padding: 0 4px 0 4px;
   }


   .sexhack_gallery_row {
      display: table-row;
   }

   .sexhack_gallery_container {
      align: left;
      align-content: top;
      align-items:top;
      display: table;
   }
	
	.sexhack_thumb_cont .sexhack_thumb_hover {
		object-fit: contain;
   }

}            

@media screen and (min-width: 1000px) {

   .sexhack_vtag {
      padding: 0 10px 0 10px;     
   }
}

@media screen and (min-width: 870px) {

   .sexhack_vtag {
      padding: 0 7px 0 7px;
   }
}


.sexhack_thumb_cont {
     position: relative;
     max-width: 100%;
     display: block;
     //border: 2px solid red;
     //border-radius: 6px;
}
.sexhack_thumb_cont img {
	margin: -1px auto 0 !important;
}
.sexhack_thumb_cont .sexhack_thumb_hover {
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
     opacity: 0;
     transition: opacity .2s;
}
.sexhack_thumb_cont:hover .sexhack_thumb_hover {
     opacity: 1;
}

.sexhack_thumb_hover {
   height: 100%;
}
