/**
 * 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;
}

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

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


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

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

.sexhack_VR {
   position: absolute;
   top:1px;
   right:-15px;
   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-radius: 0px 0px 8px 8px;

}

.sexhack_videopreview {
   width: 100%;
}

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

.sexhack_tab_button {
	border-radius: 0 0 4px 4px;
}

.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: 767px) {
   .sexhack_gallery_thumbnail { 
      width:90%;
      display: block;
   }
   
	.sexhack-video-container {
		min-height: 100px;
	}

   .sexhack_gallery_row {
      display: block;
   }

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

}


@media screen and (min-width: 768px) {
	
	.site-main ul.products.columns-4 li.sexhack_thumbli {
      width: 21%;
      /* 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: 210px;
      height: fit-content;
		//overflow: hidden;
   }

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

   .sexhack_gallery_row {
      display: table-row;
   }

   .sexhack_gallery_container {
      align: left;
      align-content: top;
      align-items:top;
      //border: 2px solid red;
      display: table;
   }
	
	.sexhack_thumb_cont .sexhack_thumb_hover {
		object-fit: contain;
   }

}            

.sexhack_thumb_cont {
     position: relative;
     max-width: 100%;
     display: block;
     //border: 2px solid red;
     //border-radius: 6px;
}
.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;
}

