/*
Theme Name: Kreativpinsel Template
Theme URI: https://9px.eu
Author: Mathias von 9PX
Author URI: https://9px.eu
Description: Zweites Template für Kreativpinsel created by Mathias von 9PX 2024
Version: 2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: template
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready
*/



/* cardo-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cardo';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/cardo-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/inter-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/inter-v18-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


html {
	font-family: "Inter", sans-serif !important;
}

a, a:hover {
	color: inherit;
}

.uk-navbar-container {
	height: 65px;
}

.uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle {
	min-height: 65px;
	font-family: "Inter", sans-serif;
	color: #000;
}

.uk-navbar-nav>li>a {
background-image: url(img/underline.png);
background-repeat: no-repeat;
background-position: right 40px;
background-size: auto 12px;
-webkit-transition: background-position .2s ease;
-moz-transition: background-position .2s ease;
transition: background-position .2s ease;
}

.uk-navbar-nav>li>a:hover {
background-position: left 40px;
-webkit-transition: background-position .5s ease;
-moz-transition: background-position .5s ease;
transition: background-position .5s ease;
color: #000;
}

h2.bygabi {
	font-size: 2em;
    font-weight: 300;
    letter-spacing: 15px;
    color: #fff;
	text-transform: uppercase;
	margin: 0 0 10px;
}

h2.about {
	font-family: "Cardo", sans-serif;
	display: inline-block;
	font-size: 60px;
	margin-bottom: 60px;
	background-image: url(img/underline.png);
background-repeat: no-repeat;
background-position: bottom left;
background-size: auto 12px;
}

h3.title {
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 40px;
	padding: 0;
}

.intro {
	animation: switchBackground 20s infinite;
	background-size: cover;
	background-position: center;
}

@keyframes switchBackground {
	0% {
		background-image: url('img/intro.webp');
	}
    33% {
        background-image: url("img/intro2.webp");
    }
	66% {
        background-image: url("img/intro3.webp");
    }
	100% {
        background-image: url("img/intro.webp");
    }
}

.aboutsection {
	background-image: url("img/pinsel2.jpg");
	background-size: 60%;
	background-repeat: no-repeat;
	background-position: center right;
}

.aboutsection2 {
	background-image: url("img/pinsel3.jpg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center right;
}

.galeriesection {
padding-left: 30px;
padding-right: 30px;
}

.uk-subnav-pill>.uk-active>a {
	background-color: transparent;
	color: #000;
	background-image: url(img/underline.png);
background-repeat: no-repeat;
background-position: bottom left;
background-size: auto 12px;
}

.uk-subnav>li>a:hover {
	background-color: transparent;
	color: #000;
	background-image: url(img/underline.png);
background-repeat: no-repeat;
background-position: bottom left;
background-size: auto 12px;
}

.toggle-label {
	background: #FFCE21;
	padding: 4px 10px;
	color: #000;
	text-transform: uppercase;
	font-size: .8em;
}

.toggle-label:hover {
	background: #FFCE21;
	padding: 4px 10px;
	color: #000;
	text-transform: uppercase;
	text-decoration: none;
}

.uk-offcanvas-bar {
	top: 65px;
}

.mobilemenu li a {

}

.mobilemenu li a span {
	color: #FFCE21 !important;
}


@media (max-width: 1200px) {
	
	h2.bygabi {
	font-size: 1.5em;
	letter-spacing: 10px;
}
	
	h2.about {
	font-size: 50px;
}
	
}

@media (max-width: 650px) {
		h2.bygabi {
	font-size: 1.2em;
	letter-spacing: 5px;
}
		h2.about {
	font-size: 30px;
}
	
	.uk-text-lead {
    font-size: 1.0rem;
}
	
}