/* fixes to the w3 style sheet */

/* w3 used inherit, but doesn't work in explorer */
.w3-button {
	color:white;
	background-color:black;
}
	
.w3-37-percent {
	float:left;
	width:35%;
}


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

.anchor {
	position: relative;
	top:-48px;
}
.max-width { max-width:1030px; }

p.divider-small:after { 

	content:" ";
}

.border { border:solid; border-color:black; border-width:1px; }

 h1 { font-size:48pt; }
 h2 { font-size:18pt; }

@media only screen and (max-width : 890px) {

	 h2 { font-size:16pt; }
}

@media only screen and (max-width : 820px) {

	 h1 { font-size:40pt; }
	 h2 { font-size:14pt; }
	 h3 { font-size:12pt;}
}

/* the titles get crunched when the screen gets small */
@media only screen and (max-width : 640px) {

	 h1 { font-size:32pt; }
	 h2 { font-size:12pt; }
	 h3 { font-size:10pt; }
	 
	 .w3-37-percent, .w3-quarter, .w3-third { width:100%; }
	 
	 .category-card { padding-bottom:8px !important; }
}

@media only screen and (max-width : 400px) {

	 h1 { font-size:24pt; }
	 h2 { font-size:14pt; }
	 h3 { font-size:10pt; }
	 
	 .w3-37-percent, .w3-quarter, .w3-third { width:100%; }
	 
	 .category-card { padding-bottom:8px !important; }
}

@media only screen and (max-height : 920px) {

	.max-width { max-width:800px; }
}

.category-title {

	color: #33A1AE;
	text-shadow: 2px 2px white;

	font-size:200%;
	font-weight:bold;
}

.catalog-click {
	
	font-weight:bold;
}

html {
	scroll-behavior: smooth;
}

.backdrop {
	background: linear-gradient(#004D55, white);
	z-index:-1000; 
	position:fixed; 
	top:0px; 
	left:0px; 
	width:100%; 
	height:90vh;
	border-bottom-left-radius: 80px;
	border-bottom-right-radius: 80px;
}
	

.background-sparkle {

	background-image:url(/images/background-sparkle-2.png); 
	background-position:center top;
}

.background-extension {
	background-image:url(/content/background-extension-small.png);
	background-repeat:no-repeat; 
	background-repeat:repeat-y;
	border:solid;
	border-color:red;
	background-size:100% 200px;
}

.sideboard-left {

	background-image:url(/content/sideboard-left.png);
	background-repeat:no-repeat; 
	background-repeat:repeat-y;
	position:relative;
	width:206px;
	height:1000px;
	left:-206px;
	background-color:green;
	float:left;
}

.decoration-none {
	text-decoration:none;
}

.category-divider {
	border-top:2px solid darkgray; 
	border-bottom:1px solid green; 
	margin-left:5%;
	margin-right:5%;
}

.testimonial-blurb {
	text-align:left;
}

.testimonial-card {

	color:black;

	text-align:left;
	
	margin: 0px 4px 8px 4px;
	
	border:solid; border-color:black; border-width:1px;
	
	-o-border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;

	-o-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	
}

p.testimonial-name {

	color:red;
	margin-bottom:0px;
	font-style: italic;
}
p.testimonial-title {

	color:darkblue;
	margin-top:0px;
}

.small-card {

	background-color:transparent;

	border:solid; border-color:black; border-width:1px;

	-o-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;

	-o-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}
	
.product-card, .rotateLuggage-full, .rotateBanners-full, .rotateAwards-full, .rotateOther-full {

	margin: 0 4px 8px 4px;

	background-color:transparent;

	border:solid; border-color:black; border-width:1px;
	

	-o-border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;

	-o-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	
}

.category-card {

	background-color:transparent;

	-o-border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;

	-o-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.map { 

	border:solid; border-color:black; border-width:1px;

	-o-border-radius: 30px;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


.no-top { position:relative; top:-1em; }





/* keep button on screen even if something ELSE is accidentally so long that it exapands the window */
.lgs-right-button
{
	position:fixed;
	left:calc(100vw - 50px);
}

.logo-name {
	font-weight:600;
	color:#33A1AE;
	line-height:50%;
	margin-bottom:0;
	text-shadow: 2px 2px white;
	font-family: bodoniflf-roman;
}


@media only screen and (max-width : 630px) {


}
/* 
	copryright 2022 MyAppFast.com 
	video window with selector buttons
*/
.video-category {
	box-sizing: border-box;
	position:relative;
	--width:calc(0.98 * var(--maf-window-client-width) - 0px * 2);
	width: var(--width);
	margin:0 auto;
}

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

	.video-category {
	
		--width:calc(0.98 * 800px - 0px * 2);
	}
}

.video-container {

	box-sizing: border-box;
	position:relative;
	width: 100%;
	height: calc(0.5625 * var(--width));
	
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.9);
	border-radius:1vw;
}



.video-container video {
	box-sizing: border-box;
	object-fit: cover;
	width:100%;

	position: relative;
	top: 0;
	left: 0;
	border-radius:1vw;

}

.video-container video::-internal-media-controls-download-button { 
    display:none; 
} 
 

.video-overlay {
	box-sizing: border-box;
	position: absolute;
  
	width:80%;
  
	background:rgba(0,0,0,0.4);
	
	font-size:24px;
	color:white;
  
 
	text-align: center;

	bottom: calc(0.05 * var(--width));
	--padding:calc(0.06 * var(--width));
	padding: 0 var(--padding) var(--padding) var(--padding);
	border-radius:calc(0.01 * var(--width));
	
	transition: all 1s ease 0s;	
	cursor:pointer;

}

@media only screen and (max-width : 500px) {
	.video-overlay {
		--padding:calc(0.02 * var(--width));
		padding: 0 var(--padding) 0px var(--padding);
		width:90%;
		bottom: calc(0.025 * var(--width));
	}
}

.video-btn {
	
	box-sizing: content-box;
	display:inline-block;

	width:calc(0.20 * var(--width));
	min-width:100px;
	max-width:30%;
	height:calc(0.5625 * 0.20 * var(--width));
	min-height:calc(0.5625 * 100px);
	cursor:pointer;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.9);
	border-radius:0.5vw;
	transition: all 0.5s ease 0s, z-index 0s, border 0s;
	
	margin:8px;
	
}

.video-btn-selected {
	
	border:4px solid green;
	transform:scale(1.25);
	z-index:1;
	
}

@media (hover: hover) {

	.video-btn:hover {

		transform:scale(1.25);
		z-index:1;
	}


.video-btns-container {
		
	box-sizing: border-box;
	width:var(--width);
	display: flex;
	justify-content: center;
	flex-wrap:wrap;

	
}
.video-btn:first-of-type {

}