/**
Theme Name: Astra Child
Author: Mediativ AG
Author URI: https://www.mediativ.de/
Description: Astra child theme version 1.0 for \"Sanitätshaus Vital\" touch screens (which now be able to be shown as a website after finished work).
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/



/* product pages */

#masthead {
	display: none !important;
}

.back-arrow-container {
	position: fixed;
	left: 0.75%;
	top: 47.4%;
}

.back-button a {
	margin-bottom: 15px !important;
}

.page-headline-column {
	position: relative !important;
	margin-left: 0 !important;
	min-height: 50px !important;
}

.page-headline-container {
	position: absolute !important;
	bottom: 0 !important;
}

.page-headline {
	color: #0062A3 !important;
	font-size: calc( 2.5vw + 2.5vh ) !important;
	margin-bottom: 0 !important;
}

.yellow {
	color: #FAB31B !important;
}

.wp-block-columns:first-of-type {
	margin-top: 1.75em;
}

.logo-products img, .product-column img {
	display: block;
  	margin-left: auto;
  	margin-right: auto;
}

.logo-products {
	margin-bottom: 0 !important;
}

.product-column {
	/* positioning of call-to-action ("Für Details antippen") through .product-row height and .product-column min-height */
	min-height: 471px;
	width: 90%;
	border: 5px solid #0062A3;
	border-radius: 10px;
	box-shadow: 5px 5px #FAB31B;
}

.product-column:hover {
	border: 5px solid #FAB31B;
	box-shadow: none;
	cursor: pointer;
}

.products-column {
	margin-top: 45px !important;
	margin-bottom: 45px !important;
}

.logo-back-bottom {
	position: sticky;
}

.product-column:nth-child(odd) {
	margin-left: 7%;
	margin-right: 3%;
}

.product-column:nth-child(even) {
	margin-left: 3% !important;
	margin-right: 7%;
}

.product-column img {
	max-height: 250px;
	width: auto;
}

.product-name {
	text-align: left;
}

.product-row {
	width: 100%;
	margin: 0 auto;
	display: table;
	/* positioning of call-to-action ("Für Details antippen") through .product-row height and .product-column min-height */
	height: 82%;
}

.product-pic {
	margin-bottom: 0 !important;
}

.product-details {
	margin-bottom: 0 !important;
	font-size: 80%;
	text-align: center;
}

.indications-column, .product-pic-column,.product-logo-column, .product-name-column {
	display: table-cell;
  	vertical-align: middle;
}

.indications-column {
	margin-left: 0 !important;
	padding-right: 30px;
}

.product-name-row {
	margin-top: 0 !important;
	padding-top: 3%;
	margin-bottom: 0;
	max-height: 63px;
}

.product-logo-pic, .product-name {
	margin-bottom: 0 !important;
}

.product-logo-pic img, .product-logo-column {
	max-height: 40px;
}

.product-logo-pic-big img, .product-logo-column-big {
	max-height: 80px;
}

.product-name, .product-name-column {
	margin-left: 0 !important;
}

.indications {
	font-size: 120%;
	margin-left: 0 !important;
	margin-bottom: 0 !important;
}

.product-pic img {
	padding-left: 30px;
	padding-right: 30px;
}

.product-pic-small img {
	max-height: 275px !important;
}

.back-button-row {
	position: relative;
	height: 100%;
}

.back-button {
	margin: 0 !important;
  	position: absolute;
  	top: 40%;
  	left: 50%;
  	transform: translate(-50%, -40%);
	height: 20%;
	min-width: 180px;
}

.back-button a {
	display: flex;
    justify-content: center;
	align-items: stretch;
	font-size: 230%;
	box-shadow: 5px 5px #FAB31B;
}

.back-button a:hover {
	color: #0062A3 !important;
	background-color: #FAB31B !important;
	box-shadow: 5px 5px #0062A3 !important;
}

.product-column:nth-last-child(1):nth-child(odd) {
	margin: 0 auto !important;
}

.product-background {
	z-index: -1;
	width: 100vw;
	height: 100vh;
	background-image: linear-gradient(#FAEEBE, #FEE485);
	position: fixed;
	top: 0;
	left: 0;
}

/* product-popups */

.popup-headline {
	text-align: center;
}

.popup-pic img {
	display: block;
  	margin-left: auto;
  	margin-right: auto;
	max-height: 350px;
	width: auto;
}

.popup-size, .popup-article-nr {
	text-align: center;
	font-weight: bold;
}

.popup-table-container {
	border: 2px solid #0062A3;
}

.modal-text b {
	color: #0062A3;
}

/* popup table */

.popup-table-container .wp-block-columns, .popup-cell {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.popup-cell {
	font-size: 120%;
}

.popup-table-column:nth-child(odd) {
	border-right: 2px solid #0062A3;
}

.popup-table-column:nth-child(even) {
	margin-left: 0;
}

.popup-table-column .popup-cell:not(:last-child) {
	border-bottom: 2px solid #0062A3;
}

.popup-table-column .popup-cell-size:not(:first-child), .popup-table-column .popup-cell-nr:not(:first-child) {
	text-align: center;
}

/* main scene */

#layer-foot:hover #button-foot, #layer-shoulder:hover #button-shoulder, #layer-elbow:hover #button-elbow, #layer-spine:hover #button-spine, #layer-knee:hover #button-knee, #layer-hand:hover #button-hand {
	background-color: #0062A3 !important;
	border-color: #FAB31B !important;
}

#layer-foot:hover #text-foot, #layer-shoulder:hover #text-shoulder, #layer-elbow:hover #text-elbow, #layer-spine:hover #text-spine, #layer-knee:hover #text-knee, #layer-hand:hover #text-hand {
	background-color: #FAB31B !important;
	color:  #0062A3 !important;
}

#layer-foot:hover #arrow-foot, #layer-shoulder:hover #arrow-shoulder, #layer-elbow:hover #arrow-elbow, #layer-spine:hover #arrow-spine, #layer-knee:hover #arrow-knee, #layer-hand:hover #arrow-hand {
	color: #FAB31B !important;
}

#wrapper-foot {
   top: 52.5% !important;
   left: 17vw !important;
}
#wrapper-shoulder {
   top: 15% !important;
   left: 24vw !important;
}
#wrapper-elbow {
   top: 27% !important;
   left: 15vw !important;
}
#wrapper-spine {
   top: 40% !important;
   left: 16vw !important;
}
#wrapper-knee {
   top: 66% !important;
   left: 16vw !important;
}
#wrapper-hand {
   top: 24% !important;
   left: 47vw !important;
}

.home-button {
	border-width: calc(0.15vw + 0.15vh) !important;
}

/* main scene @media queries -> new ones have to be written because of the latest design changes -> left has to be "responsive" again cause of windowed/fullscreen */

@media (min-height: 975px) and (max-height: 999px) {
	#wrapper-foot {
   		left: 16.7vw !important;
	}
	#wrapper-shoulder {
   		left: 23.3vw !important;
	}
	#wrapper-elbow {
   		left: 14.3vw !important;
	}
	#wrapper-spine {
   		left: 15.6vw !important;
	}
	#wrapper-knee {
   		left: 15.6vw !important;
	}
}

@media (min-height: 1000px) {
	#wrapper-foot {
   		left: 16.3vw !important;
	}
	#wrapper-shoulder {
   		left: 22.7vw !important;
	}
	#wrapper-elbow {
   		left: 14vw !important;
	}
	#wrapper-spine {
   		left: 15.1vw !important;
	}
	#wrapper-knee {
   		left: 15.1vw !important;
	}
}

@media (aspect-ratio: 16/9) {
	#wrapper-foot {
   		left: 16vw !important;
	}
	#wrapper-shoulder {
   		left: 22vw !important;
	}
	#wrapper-elbow {
   		left: 13vw !important;
	}
	#wrapper-spine {
   		left: 13vw !important;
	}
	#wrapper-knee {
   		left: 13vw !important;
	}
}

/*
@media (max-aspect-ratio: 16/9)
{
   #wrapper-foot {
	   top: calc( 50vh + ( 20 * ( 1vw / 16 * 9 ) ) ) !important;
   }
   #wrapper-shoulder {
	   top: calc( 50vh - ( 30 * ( 1vw / 16 * 9 ) ) ) !important;
   }
   #wrapper-elbow {
	   top: calc( 50vh - ( 15 * ( 1vw / 16 * 9 ) ) ) !important;
   }
   #wrapper-spine {
	   top: calc( 50vh - ( 14 * ( 1vw / 16 * 9 ) ) ) !important;
   }
   #wrapper-knee {
	   top: calc( 50vh + ( 3 * ( 1vw / 16 * 9 ) ) ) !important;
   }
   #wrapper-hand {
	   top: calc( 50vh - ( 26 * ( 1vw / 16 * 9 ) ) ) !important;
   }
   #wrapper-call-to-action {
	   top: calc( 50vh + ( 5 * ( 1vw / 16 * 9 ) ) ) !important;
   }
}

@media (min-aspect-ratio: 16/9)
{
	#wrapper-foot {
		left: calc( 50vw - ( 34 * ( 1vh / 9 * 16 ) ) ) !important;
	}
	#wrapper-shoulder {
		left: calc( 50vw - ( 28 * ( 1vh / 9 * 16 ) ) ) !important;
	}
	#wrapper-elbow {
		left: calc( 50vw - ( 37 * ( 1vh / 9 * 16 ) ) ) !important;
	}
	#wrapper-spine {
		left: calc( 50vw - ( 30 * ( 1vh / 9 * 16 ) ) ) !important;
	}
	#wrapper-knee {
		left: calc( 50vw - ( 44 * ( 1vh / 9 * 16 ) ) ) !important;
	}
	#wrapper-hand {
		left: calc( 50vw - ( 3 * ( 1vh / 9 * 16 ) ) ) !important;
	}
}
*/

.touch-icon {
	max-width: 10vw !important;
}

/* Visitor counter (only for logged in wp admin) */

#wpsvccount {display:none;}

/* Page transition */

.page-template-default, .limb-wrap {opacity: 0;}

.fade-in, .limb-wrap {animation: fadein 0.5s forwards;}

@keyframes fadein {
	0%  {opacity: 0;}
	25% {opacity: 0.25;}
	50% {opacity: 0.5;}
	75% {opacity: 0.75;}
	100%{opacity: 1;}
}

.fade-out {animation: fadeout 0.5s forwards;}

@keyframes fadeout {
	0%  {opacity: 1;}
	25% {opacity: 0.75;}
	50% {opacity: 0.5;}
	75% {opacity: 0.25;}
	100%{opacity: 0;}
}

/* 
* REMINDERS: 	- wp-content\plugins\popup-block\build\frontend.js -> added stopVideos function call to closeModal (see copy) -> may has to be added again after an update
* 				- product-column id -> with "video-" before == modal figure id (video inside)
* 				- added following rule to path "wp-content/themes/astra/inc/assets/css/block-editor-styles.css":
* 				  .popup-preview svg {display: none;} -> massive popup svg doesn't annoy anymore -> may has to be added again after an update
* 				- added "if (is_super_admin()) { }" around the plugin return -> path: "\wp-content\plugins\wps-visitor-counter\wps_visitor_counter_views.php" (+ translation) ->
				may has to be added again after an update
* */

@media (max-width: 1200px) {
	.products-column, .product-name-row, .product-row {
		display: flex !important;
		flex-wrap: wrap !important;
	}
	.product-column, .product-logo-column, .product-name-column, .product-pic-column, .indications-column {
		display: flex !important;
		flex-basis: 100% !important;
		flex-grow: 0 !important;
	}
	.wp-block-column:not(:only-child) {
		flex-basis: 100% !important;
		flex-wrap: wrap !important;
	}
	.page-headline-column {
		margin-bottom: 0 !important;
	}
	.page-headline-container {
		left: 7%;
	}
}

@media (max-width: 650px) {
	.modal-content {
		width: 90vw !important;
		min-width: inherit !important;
	}
}

/* new rules cause of last minute design changes -> background worthless without products and pics with transparent background */

.home {
	overflow: hidden !important;
}

/*
body:not(.home) {
	background-image: linear-gradient(#FFFDDE, #EDDAAA);
}
*/