/*   
	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 {

	--rood:#E30613;
	--donkergrijs:#333333;
	--grijs:#686868;
	--lichtgrijs:#EBEBEB;
	--zwart:#000000;
	--wit:#ffffff;
}

/* Font */
@font-face {
	font-family: 'Source Sans';
	src: url('../fonts/SourceSans3-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Source Sans';
	src: url('../fonts/SourceSans3-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Source Sans';
	src: url('../fonts/SourceSans3-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Algemeen */
html,
body {
	padding: 0;
	margin: 0;
	font-family: 'Source Sans', sans-serif;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-weight: 300;
	color:var(--zwart);
}

h1,
h2,
h3 {

	margin-top: 0;

	&.elementor-heading-title {

		line-height: initial;
	}
}

h1,
.h1,
h2,
.h2 {

	font-weight: 700;
}

h1,
.h1 {

	@media (min-width:1024px) {
		font-size: 45px;
		line-height: 55px;
	}
	@media (max-width:1023px) {
		font-size: 38px;
		line-height: 48px;
	}
	@media (max-width:460px) {
		font-size: 26px;
		line-height: 40px;
	}
}
h2,
.h2 {

	@media (min-width:768px) {
		font-size: 30px;
		line-height: 40px;
	}
	@media (max-width:767px) {
		font-size: 22px;
		line-height: 32px;
	}
}

h3,
.h3 {

	font-weight: 600;
	@media (min-width:768px) {
		font-size:20px;
		line-height: 30px;
	}
	@media (max-width:767px) {
		font-size:18px;
		line-height: 28px;
	}
}

.sc-small {
	font-size: 14px;
}

.sc-intro {

	@media (min-width:768px) {
		font-size: 24px;
		line-height: 34px;
	}
	@media (max-width:767px) {
		font-size: 19px;
		line-height: 29px;
	}
}

.sc-intro-small {

	@media (min-width:768px) {
		font-size: 22px;
		line-height: 32px;
	}
	@media (max-width:767px) {
		font-size: 17px;
		line-height: 27px;
	}
}

/**
* Menu
*/
nav.elementor-nav-menu--main {
    
    ul {
        @media(min-width:768px) {
            justify-content: space-between;
            width: 100%;
        }
        &:after {
            display: none;
        }
    }
}

.elementor-nav-menu .sc-menu-logo {
    @media(max-width:767px) {
        display: none;
    }
    img {
        max-height: 80px;
        width: auto;
        @media(min-width:768px) {
            margin:10px;
        }
    }
}

/**
* Projecten carousel
*/
.sc-projecten-carousel {
	.elementor-swiper-button {
		top:0 !important;
		background-color:var(--rood);
		padding:2px;
		&:hover {
			background-color: var(--zwart);
		}
	}
	.elementor-swiper-button-next {
		left:40px;
		right: auto !important;
	}		
}
.sc-projecten-carousel-2 {
	.elementor-swiper-button {
		bottom:-80px !important;
		top: auto !important;
		background-color:var(--rood);
		padding:2px;
		&:hover {
			background-color: var(--zwart);
		}
	}
	.elementor-swiper-button-prev {
		right:40px;
		left: auto !important;
	}		
}

/**
* Nieuws carousel
*/
.sc-posts-carousel {
	.elementor-swiper-button {
		top:0 !important;
		background-color:var(--rood);
		padding:2px;
		&:hover {
			background-color: var(--zwart);
		}
	}
	.elementor-swiper-button-prev {
		right:40px;
		left: auto !important;
	}		
}

/**
* Team
*/
.sc-team {
	> .elementor-element,
	.elementor-flip-box__layer {
		overflow: hidden;
	}
}

/**
* Contact form
*/
.sc-form {
	input[type="text"],
	input[type="tel"],
	input[type="email"],
	textarea {
		box-shadow: 0 0 8px rgba(0,0,0,0.15);
		padding: 15px 25px;
		margin-top: 8px;
	}
	.elementor-field-label {
		padding-left:25px;
	}
	.elementor-field-group .elementor-field-textual::-moz-placeholder {
		color: var(--lichtgrijs);
	}
	.elementor-field-group .elementor-field-textual::placeholder {
		color: var(--lichtgrijs);
	}
}

/**
* Vacature
*/
.sc-relative.e-con>.elementor-element.elementor-absolute {
	@media(max-width:767px) {
		position: relative;
	}
}

/* Call-to-action */
.sc-header-cta {
	
	transform: translateX(75px);

	.elementor-icon-list-item:hover .elementor-icon-list-text {
		text-decoration: underline;
	}

	&:hover {
		transform: translateX(0);
	}
}