/*   
	Theme Name:        Studio Campo Theme
	Theme URI:         https://studiocampo.nl
	Description:       Studio Campo theme.
	Author:            Studio Campo
	Author URI:        https://studiocampo.nl
	License:           GNU General Public License v3 or later.
	License URI:       https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain:       sc-theme
*/

:root {

	--blue:#08afcf;
	--grijs:#dcdede;
	--wit:#ffffff;
	--zwart:#000002;
}

html,
body {

	padding: 0;
	margin: 0;
	font-family: var(--e-global-typography-primary-font-family);
}

/**
* Projecten - overzicht met filter
*/
#sc-projecten {

	.elementor-widget-theme-post-featured-image:before {

		content: '';
		position: absolute;
		width:60px;
		height: 60px;
		background-color: var(--blue);
		border-radius: 60px;
		top:15px;
		left:15px;
	}
}

/**
* Vacatures
*/
.sc-vacature-block {

	.elementor-widget-text-editor {

		height: 100%;
	}

	.sc-vacature-block-center {

		display: flex;
    	align-items: center;
	}
}

/**
* Klanten
*/
#sc-logos {

	.elementor-swiper-button.elementor-swiper-button-next,
	.elementor-swiper-button.elementor-swiper-button-prev {

		top: -60px;
		background-color: var(--blue);
		border-radius: 50px;
		padding: 10px;
		width: 50px;
		height: 50px;
		display: flex;
   		align-items: center;
    	justify-content: center;

		&.swiper-button-disabled {

			background-color: var(--grijs);
		}

	}

	.elementor-swiper-button.elementor-swiper-button-prev {

		right:70px;
		left:auto;
	}
}

/* 
#sc-projecten {

	.elementor-post__thumbnail__link {

		padding-bottom: 0;
	}

	.elementor-post__thumbnail,
	.elementor-portfolio-item__overlay {

		position: relative;
		overflow: inherit;
	}

	.elementor-post__thumbnail {
		
		background: linear-gradient( 180deg, var(--wit) 0%, var(--wit) 50%, var(--blue) 50% );
		
		img {

			position: relative;
			transform: scale(1.01) translate(0, 0);
			left:0;
			top:0;
			border-top-right-radius: 30px;
			border-bottom-right-radius: 30px;
		}
	}

	.elementor-portfolio-item__overlay {

		opacity: 1;
        top: auto;
        bottom: auto;
		background-color: var(--blue);
    }
} */

/**
* Swiper - carousel voor diensten en toepassingen
*/
.sc-swiper {

	position: relative;

	.swiper {

		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.mySwiper {

		box-sizing: border-box;
		padding: 10px;
		margin-left: 0;
		width: 67%;

		.swiper-slide {

			width: auto !important;
			height: 100%;
		}

		.swiper-slide-thumb-active {

			opacity: 1;
		}
	}

	.mySwiper2 {

        z-index: 0;

		.swiper-slide {
			
			width: 33.3333%;
		}
	}

	.sc-swiper-slide {

		.sc-swiper-slide-inner {

			border-radius: 20px;
			padding: 10px;

			img {

				border-top-right-radius: 20px;
				border-bottom-right-radius: 20px;
			}

			button,
			.sc-projecten-more {

				border: 0;
				background-color: var(--blue);
				border-top-right-radius: 8px;
				border-bottom-right-radius: 8px;
				padding: 8px 10px;
                font-size: initial;
                float: right;
				color: var(--zwart);
				line-height: 1;

				&:hover {

					color:var(--wit);
				}
			}

			.sc-projecten-more {

				margin-left:20px;
			}
		}
	}

	.sc-swiper-navigation {

		position: absolute;
		right: 0;
		top:0;
		width: 120px;
		height: 100px;

		div {

			background-color: var(--blue);
			border-radius: 50px;
			padding:10px;
			width: 50px;
			height: 50px;
			color:var(--zwart);
			top: 0;
            margin-top: 0;

			&.swiper-button-disabled {

				background-color: var(--grijs);
			}

			&:after {

				display: none;
			}
		}

		.swiper-button-prev {

			left:0;
		}
	}
}

.sc-swiper-popup {

	display: none;
	position: fixed;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	padding:40px;
	box-shadow: 0 0 8px rgba(0,0,0,0.3);
	z-index: 11;
	background-color: white; 
	
	.close-btn {

		position: absolute;
		top: 8px;
		right: 8px;
		background: transparent;
		border: none;
		font-size: 1.25rem;
		cursor: pointer;
	}
}

.sc-swiper-popup.active {

	display: block;
}

.sc-swiper-popup-backdrop {

	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.5);
	z-index: 10;
}

@media (max-width:800px) {

	.mySwiper {

		display: none !important;
	}

	.sc-swiper .mySwiper2 {

		padding-top: 50px;
	}
}

@media (min-width:801px) {

	.sc-swiper .mySwiper2 {

		padding-top: 100px;
        margin-top: -110px;
	}
}