/* home blocks */

.homeblock {
	background-color: var(--theme-color-background);
    display: block;
    position: relative;
    margin-top: 2rem;
    border-top: solid 4px var(--ram-drkblue);
    z-index: 0;
	
	h2 {
		font-family: "Roboto Slab";
		font-weight: 200;
		font-size: 2.6rem;
		line-height: 2.0rem;
		display: block;
		background-color: var(--ram-drkblue);
		color: #fff;
		padding: 0.75em;
		margin: 0;
		width: fit-content;
		box-sizing: border-box;
		margin-right: 50px;
		padding-right: 56px;
		margin-bottom: 10px;
	}
	h2:after {
		content: '';
		display: inline-block;
		height: 0;
		position: absolute;
		top: 0;
		width: 0;
		z-index: 1;
		border-top: 59px solid transparent;
		border-right: 56px solid var(--theme-color-background);
		transition: all .2s ease-in;
	}

}

/*hero section */

.cms-index-index {	
	
	 .hero {
		width: calc(100% + 40px);
		margin-left: -20px;
		 
		 .pagebuilder-slide-wrapper {
			display: flex;
		    flex-direction: row;
    		align-items: center;
			 aspect-ratio: 3.6 / 1;
		 }
		 
		 .pagebuilder-collage-content > div {
			background: #ffffffcc;
    		padding: 2rem 0;
			 
			 h3 {
				font-size: 2rem;
				font-weight: 600;
				color: var(--theme-color-text-light);
				 margin: 0 2rem;
			 }
			 
			 p {
				 margin: 0 2rem;
			 }
		 }
		 
		 button {
			 font-family: 'Roboto';
			 font-weight: 400;
			 background-color: var(--ram-blue);
			 border-radius: 0;
			 border-color: var(--ram-blue);
			 transition: all .2s linear;
		 }
		 button:hover {
			 background-color: #FFF;
			 color: var(--ram-blue);
		 }
		 button:before {
			display: inline-block;
			content: "\203A";
			position: relative;
			font-size: 200%;
			font-weight: 600;
			line-height: 50%;
			left: -6px;
			top: 3px;
		 }
	}
	.hero > div {
		max-width: none;
	}
	
}

/*featured products */

.homeblock {
	.featured_wrapper {
		width: 100%;
        overflow: hidden;
        overflow-x: auto;
		
		ul {
			list-style: none;
			display: flex	;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: stretch;
			padding: 0;

			li {
				display: inline-block;
                position: relative;
                padding: 2rem;
                margin-right: 2rem;
                background-color: #FFF;
                box-sizing: border-box;
                width: calc(100% / 4.5);
				min-width: 264px;
				
				a {
					display: flex;
					height: 100%;
					flex-direction: column;
					flex-wrap: nowrap;
					justify-content: space-between;
				}
				
				h3 {
					margin: 0;
					font-size: 21px;
					font-weight: 600;
					color: var(--ram-drkblue);
				}
				
				img {
					width: 100%;
                    aspect-ratio: 4 / 3;
					margin-bottom: 1rem;
				}
				
				button {
					display: block;
                    background-color: var(--ram-blue);
                    border-radius: 0;
                    border-color: var(--ram-blue);
                    transition: all .2s linear;
                    color: #FFF;
                    padding: 1.5rem 3rem;
                    margin: 0 auto;
				}
				button:before {
					display: inline-block;
					content: "\203A";
					position: relative;
					font-size: 200%;
					font-weight: 600;
					line-height: 50%;
					left: -6px;
					top: 3px;
				}
				button:hover {
					color: var(--ram-blue);
					background-color: #FFF;
				}

			}
		}
	}
}

/*social media feed */

.crt-panel-next, .crt-panel-prev {
    background-color: rgb(0 40 69 / 25%)!important;
}

.crt-panel-next:hover, .crt-panel-prev:hover {
    background-color: var(--ram-drkblue)!important;
}

.crt-controls-over .crt-panel-prev {
    left: -15px!important;
}
.crt-controls-over .crt-panel-next {
    right: -15px!important;
}


/*resource links */

.homeblock.tools {
	ul {
		list-style: none;
		padding: 0 2rem;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;

		li {
			width: calc(100% / 3);
			min-width: fit-content;
				
			a {
				font-weight: 700;
				color: var(--theme-color-primary);
				font-size: 2rem;
				padding: 0 2rem;
				box-sizing: border-box;
					
			}
			a:before {
				content: "\203A";
				position: relative;
				left: -6px;
				top: 5px;
				font-size: 225%;
				font-weight: 600;
				font-style: normal;
				color: inherit;
				line-height: 50%;
			}
			a:hover:before {
				color: var(--ram-red);
			}
			a:after {
				display: inline-block;
                content: '';
                position: relative;
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center;
                width: 4rem;
                height: 4rem;
                top: 1rem;
                left: 1rem;
				transition: all .2s linear;
			}
			a#news:after {
				background-image: url(../images/icon_email.svg);
			}
			a#makers:after {
				background-image: url(../images/icon_moldmaker.svg);		
			}
			a#catalog:after {
				background-image: url(../images/icon_catalog.svg);
			}
			a:hover:after {
				transform: scale(1.25);
			}
		}
	}
}


/*about us */

.about-us {
	box-sizing: border-box;
    position: relative;
    top: 0px;
    color: rgb(255, 255, 255);
    background-image: url(../images/aboutus_map_bg.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    background-color: var(--ram-drkblue);
    background-position: top right;

    h2 {
        font-family: "Roboto Slab";
        font-size: 2.6rem;
        display: block;
        background-color: var(--ram-drkblue);
        color: #FFF;
        width: fit-content;
        padding: 0.75em 56px 0.75em 0.75em;
        margin: 0;
    }

    p {
		display: inline-block;
		position: relative;
        font-weight: 300;
        line-height: 166%;
        font-size: 2rem;
        background: linear-gradient(90deg, var(--ram-drkblue) 0%, #000000c9 90%, transparent 100%);
        box-sizing: border-box;
        padding: 10px 27px;
        margin: 0;
        width: 70%;		
	}
	
	p:last-child {
		padding-bottom: 3rem;
	}
	
	div.brands {
		display: flex;
		position: relative;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-evenly;
		background: linear-gradient(90deg, var(--ram-drkblue) 0%, #000000c9 90%, transparent 100%);
		width: 70%;
		padding: 0;
		margin: 0;

		img {
			width: 18%;
			padding: 0 2rem;
			box-sizing: border-box;
		}

	}
	
	@media screen and (min-width: 769px){
		
		h2 {
			width: 70%;
			background: linear-gradient(90deg, var(--ram-drkblue) 0%, #000000c9 90%, transparent 100%);
			box-sizing: border-box;
		}
	}

}

/* responsive */

@media screen and (max-width: 1024px){
	
	.about-us {
		
		div.brands {
			img {
				padding: 0 1rem;
			}
		}
	}
	
}

@media screen and (max-width: 768px) {
	
	.cms-index-index {
		.hero {
			width: 100%;
			margin-left: 0;
			
			.pagebuilder-slide-wrapper {
				align-items: flex-end;
				/* min-height: 205px; */
				margin-bottom: 6rem;
				
				.pagebuilder-collage-content {
					display: flex;
    				flex-direction: column-reverse;
				}
				.pagebuilder-collage-content > div {
					padding: 0;
					background: var(--theme-color-background);
				}
				
				.pagebuilder-collage-content > button {
					width: fit-content;
					margin-left: 2rem;
					margin-bottom: 1rem;
					padding: 1rem 2rem;
				}
				
				.pagebuilder-overlay {
					width: 100%;
					padding: 0;
					margin-bottom: -5rem;
				}
				
			}
		}
	}
	
	.homeblock {

		h2 {
			width: 100%;
		}
		h2:after {
			content: none;
		}
	}
	
	.about-us {
		padding: 0;
		background-image: url(../images/aboutus_map_bg_800.jpg);
		
		h2:first-child {
			margin: 0px 50px 66px 0px;
		}
		
		h2:first-child:after {
			top: 0!important;
		}
		
		p {
			width: 100%;
			font-size: 1.8rem;
		}
		
		div.brands {
			width: 100%;
		}
	}
	
}

@media screen and (max-width: 425px) {
	
	.cms-index-index {
		.hero {
			.pagebuilder-slide-wrapper {			
				.pagebuilder-collage-content > button {
					display: none;
				}			
			}
		}
	}
	
	.about-us {
		background-position: 0 66px;
		
        h2:first-child {
            width: 100%;
            margin: 0;
			margin-bottom: 80px;
            box-sizing: border-box;
        }
		
		h2:first-child:after {
			display: none;
		}
		
		div.brands {
			img {
				width: 30%;
			}
		}

    }
}