/*
 Theme Name:   Wordpress+
 Theme URI:    
 Description:  Twenty twenty Child Theme
 Author:       Arjan Vriezen
 Author URI:   https://arjan.ch
 Template:     twentytwenty
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         
 Text Domain:  wordpressplus
*/

/* ---------------------------------------------------- TYPOGRAPHY ---------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;0,800;1,400;1,700;1,800&display=swap');

body, .widget_text p, .wp-block-button__link, .entry-content, h1, h2, h3, h4, h5, h6, input {
	font-family: 'Montserrat', sans-serif !important;
	letter-spacing: 0 !important;
}

h1, h2, h3 {
	font-weight: 800;
}

.has-normal-font-size, .has-regular-font-size {
	font-size: 1em !Important;
}

.entry-content {
	font-size: 0.9em !Important;
}

.orange {
	color: #FD5621 !important;
}

button, input[type="submit"] {
	background-color: #FD5621 !important;	
}

a {
	text-decoration: underline !Important;
}

a:hover {
	text-decoration: none !Important;
}

span, p, b, h1, h2, h3, h4, h5, h6, li, a {
	color: #333333 !important;	
}

.button-wrapper {
	text-align: center;
	margin: 2em auto 0 auto !important;
}

.wp-block-button__link, .button-wrapper a, input[type="submit"]{
	background-color: #FD5621 !important;
	color: white !important;
	text-decoration: none !Important;
	letter-spacing: 0 !Important;
	padding: 0.6em 1em;
	transition: all 0.5s;
	font-size: 0.9em !important;
	text-transform: uppercase;
	font-weight: 700;
	display: inline-block;
}

.wp-block-button__link:hover, .button-wrapper a:hover, input[type="submit"]:hover {
	background-color: #E53C0E !important;
	transition: all 0.5s;
}

.widget-title {
	font-size: 1.2em;
}

.textwidget {
	font-size: 0.9em;
}


/* ---------------------------------------------------- HEADER ---------------------------------------------------- */

.entry-header {
	display: none !Important;
}

.header-inner {
	display: block !Important;
	padding: 2em 0 2em 0 !Important;
}

.header-titles-wrapper, .header-titles {
	display: block !Important;
	text-align: center !important;
	margin-right: 0 !Important;
}

.header-titles {
	margin: 2em 0 !important;
	display: none !important;
}

.header-titles-wrapper {
	flex-basis: 100%;
	margin: 0 auto 0 auto !important;
	max-width: 42em !important;
	padding-right: 0 !Important;

}

.no-underline {
	text-decoration: none !important;
}

.header-titles h1 {
	text-transform: uppercase;
	margin: 0 !Important;
	font-size: 60px !Important;
}

.header-titles p {
	text-align: center !important;
	display: inline !Important;
}

#introtekst p a {
	color: #FD5621 !important;
	font-weight: 700;
}

#introtekst {
	margin: 4em 0;
}

#introtekst h4 {
	margin-bottom: 1rem !Important;
}

.header-navigation-wrapper li a {
	font-size: 0.8em !Important;	
}
.work {
	margin-bottom: 0 !Important;
}

.arrow4 {
	margin: 0px;
	display: inline-block;
	height: 8px;
	position: relative;
	width: 8px;
}

.arrow4::after {
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-right-style: solid;
	border-right-width: 1px;
	content: '';
	display: inline-block;
	height: 8px;
	left: 0;
	position: absolute;
	top: 0;
	width: 8px;
}

.arrow4.is-bottom {
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.arrow4.is-left {
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}

.current-menu-item a {
	font-weight: 700 !Important;
	text-decoration: none !important;
}

.lang-item-de {
	margin-left: 5px !Important;
}


.lang-item {
	opacity: 30%;
	margin-top: 11px !important;
}

.current-lang, .lang-item:hover {
	opacity: 100%;
}

/* ---------------------------------------------------- BODY ---------------------------------------------------- */

main article {
	margin-bottom: 2em;
}

.wide {
	max-width: 100rem !important;
}
/* ---------------------------------------------------- PORTFOLIO ---------------------------------------------------- */

.portfolio-item {
	overflow: hidden;
	width: 100%;
	text-align: center;
	background-size: cover;
	background-position: center;
	display: block;
	text-decoration: none !Important;
	border-bottom: 1px solid #ededee;
}


.portfolio-item h2 {
	color: white !important;
	text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.0);
	margin: 0 !Important;
	padding: 1em;
	width: 100%;
	background-color:rgba(0, 0, 0, 0.6);
	transition: all 0.5s;
}

.portfolio-item h2:hover {
	text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.8);
	background-color:rgba(0, 0, 0, 0);
	transition: all 0.5s;
	padding-top: 1em;
	padding-bottom: 1em;
}

/* ---------------------------------------------------- FOOTER ---------------------------------------------------- */

.footer-credits {
	display: none !important;
}

.footer-nav-widgets-wrapper {
	margin-top: 0 !Important;
}

.textwidget p {
	margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------------- RESPONSIVE ---------------------------------------------------------------------------- */

@media only screen and (max-width: 1000px) {
	.primary-menu-wrapper, .header-navigation-wrapper {
		display: block !Important;
	}
	.primary-menu {
		justify-content: center !Important;
	}	
	
	.portfolio-item h2 {
		font-size: 1.5em !important;
		padding-top: 1.5em !important;
		padding-bottom: 1.5em !Important;
	}
	
}


@media only screen and (max-width: 600px) {
	.portfolio-item h2 {
		font-size: 1em !important;
		padding-top: 2em !important;
		padding-bottom: 2em !Important;
	}

	.header-navigation-wrapper li a {
		font-size: 0.7em !Important;
		
	}
	
	#introtekst h4 {
		font-size: 1.5em !Important;
	}
	
	.header-inner {
		padding-top: 20px !Important;
		padding-bottom: 20px !Important;
	}
	
	.lang-item {
		margin-top: 10px !important;
	}
	
	#introtekst, .work, .footer-widgets{
		font-size: 0.8em !Important;	
	}
	
	label, .has-large-font-size {
		font-size: 1em !Important;	
	}
	
	.entry-content h3 {
		font-size: 1.3em !important;
		text-align: left !Important;
	}
	
	.portfolio-item h2 {
		text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
	}
	
}

@media only screen and (max-width: 400px) {
	.portfolio-item h2 {
		font-size: 0.9em !important;
		padding-top: 2.5em !important;
		padding-bottom: 2.5em !Important;
	}
	

}