header{
	font-size: 240%;
	background-size: cover;
	gap: 1ex;
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-shadow: 0 0 1vh black;
}
header h1{
	font-size: 100%;
	border-bottom: none;
	text-align: left;
	padding: 0;
	margin: 0;
}
.home-slogan{
	font-size: 75%;
	text-align: right;
	text-shadow: 0 0 1vh black;
}
main{
	background-color: #090909;
}

													/* welding bending */
.video-thumb{
	height: min(80px, 24vw);
	width: 100%;
	display: flex;
	place-items: center;
	place-content: center;
	background: url(img/laser-thumb.jpg);
	background-position: center;
	cursor: pointer;
}
.cards:hover .video-thumb{
	filter: brightness(1.9);
}
.video-button{
	width: 50px;
	height: min(90% , 50px);
	overflow: visible;
}
.video-button:hover{
	transform: scale(0.95);
}
.video-button circle{
	fill: black;
}
.video-button polygon{
	fill: white;
}
.video-button:hover polygon{
	filter: drop-shadow(0 0 10px orange);
}
.video-button:active polygon{
	fill: orange;
}

#video-page{
	background: rgba(0,0,0, .7);
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 20;
	width: 100vw;
	height: 100vh;
	justify-content: center;
	align-items: center;
}
.video-wrapper{
	position: relative;
	max-width: fit-content;
}
.x{
	width: 40px;
	height: 40px;
	max-width: 10vw;
	max-height: 10vw;
	background-color: rgba(255,255,255, 0.4);
	border: 1vw solid transparent;
	border-radius: 50%;
	position: absolute;
	top: -25px;
	right: -25px;
	z-index: 22;
}
.x:hover{
	background-color: white;
	cursor: pointer;
}
video{
	width: 80vw;
	height: 45vw;
}


.cards{
	padding-top: 2.5vw;
}
.cards-h2{
    color: orange;
    text-shadow:
	0 0 3px black,
	0 0 10px BLACK,
	0 0 15px #222,
	0 0 20px #111;
}
.cards-icon{
	display: inline-block;
}
.cards-icon{
	width: 56px;
	height: 56px;
	background-color: #fdb80a;
	background-repeat: no-repeat;
	border-radius: 50%;
	vertical-align: bottom;
}
.cards-icon-laser{
	background-image: url("img/card-icon-laser.svg");
}
.cards-icon-weld{
	background-image: url("img/card-icon-weld.svg");
}
.cards-icon-bend{
	background-image: url("img/card-icon-bend.svg");
}
.cards-icon-ndt{
	background-image: url("img/card-icon-ndt.svg");
}
.cards-h2-text{
	display: inline-block;
	vertical-align: bottom;
	margin-left: 6px;
	width: calc(100% - 62px - 1ex);
}
.carousel-thumb{
	width: min(24vw, 80px);
	height: min(24vw, 80px);
	object-fit: cover;
	outline: 3px solid transparent;
	filter: brightness(68%);
	transition: 600ms;
}
.carousel{
	width:100%;
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
}
.carousel-thumb:hover{
	outline: 3px solid white;	
}
.cards:hover .carousel-thumb{
	filter: initial;
}

																					/*medias*/
@media (max-width: 330px){

	.cards-icon{
		width: 16vw;
		height: 16vw;
	}
}

/*---*/

@media(max-width: 499px){
	main{
		padding-top: 40px;
	}
	h1, .home-slogan{
		font-weight: 300;
	}
	header{
		background-image: url("img/home-900-filter.jpg");
		background-size: cover;
		background-position: center;
		padding: 24px;
		font-size: 150%;
	}
	.carousel{
		padding: 3px;
		padding-bottom: -15px;
	}
	.cards-h2{
		font-weight: 400;
	}
	#laser{
		margin: calc(20px + 2.5vw) 0;
	}
}

/*---*/

@media (min-width: 501px){
	main{
		background-size: cover;
		background-position: center;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	header{
		margin-bottom: 24px;
	}
	.cards-wrapper{
		display: flex;
		justify-content: space-between;
		gap: min(6vw, 44px);
	}
	.cards{
		width: 25%;
		padding-bottom: 68px;
		position: relative;
	}
	.cards:hover .carousel{
		background: rgba(0,0,0, .5);
	}
	.cards-h2{
		text-align: center;
		padding-bottom: 16px;
	}
	.cards-icon{
		margin-bottom: 24px;
	}
	.cards-h2-text{
		height: 2em;
		display: block;
		width: initial;
		font-size: min(2.6vw, 125%);
	}
	.video-thumb{
		position: absolute;
		bottom: 0;
		left: 0;
		height: 68px;
		width: 100%;
		margin-bottom: 0;
	}
	.carousel{
		white-space: normal;
		height: 68px;
		width: calc(100% + 12px);
		position: absolute;
		bottom: 0;
		left: 0;
		overflow-y: scroll;
	}
	.cards:hover .carousel{
		height: 150%;
		transition: 1000ms;
		padding: 12px 0 12px 12px;
	}
	.carousel-thumb{
		height: 5vw;
	}
	.cards:hover .carousel-thumb{
		margin: 5px auto;
	}
}

/*---*/

@media (min-width: 501px) and (max-width: 600px){
	.cards-icon{
		width: 8vw;
		height: 8vw;
	}
}
@media (min-width: 601px){
	.cards-icon{
		width: 68px;
		height: 68px;
	}
}
@media (min-width: 501px) and (max-width: 750px){
	.carousel-thumb{
		height: 5vw;
		width: calc(100% - 4px);
	}
	.cards:hover .carousel-thumb{
		height: 68px;
	}
}
@media (min-width: 751px){
	.carousel-thumb{
		height: 5vw;
		width: calc(50% - 4px);
	}
	.cards:hover .carousel-thumb{
		height: 5vw;
	}
}

@media (min-width: 948px){
	header{
		padding: 7vh;

	}
	.cards{
		padding-top: 36px;
	}
	.carousel-thumb{
		height: 3vw;
		width: calc(33% - 0.3ex)
	}
}
@media (min-height: 901px) and (min-width: 900px){
	header{
		padding: 56px;

	}
}

/* --- PIC SIZES --- */
@media (min-width: 2561px){
	main{background-image: url("img/raster/aa-home-6000.jpg")}
}
@media (min-width: 1921px) and (max-width: 2560px){
	main{background-image: url("img/raster/aa-home-2560.jpg")}
}
@media (min-width: 1441px) and (max-width: 1920px){
	main{background-image: url("img/raster/aa-home-1920.jpg")}
}
@media (min-width: 1281px) and (max-width: 1440px){
	main{background-image: url("img/raster/aa-home-1440.jpg")}
}
@media (min-width: 501px) and (max-width: 1280px){
	main{background-image: url("img/raster/aa-home-1280.jpg")}
}
@media (min-width: 501px) and (max-width: 1100px) and (orientation: portrait){
	main{background-image: url("img/raster/aa-home-0945.jpg")}
}
@media (max-width: 500px){
	header{background-image: url("img/raster/aa-home-0404.jpg")}
}