/*
Theme Name: U-Bring Theme
Theme URI: https://www.u-bring.de
Description: Twenty Twenty-One Child-Theme
Author: nvii media
Author URI: https://www.nvii-media.com/
Template: twentytwentyone
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* titillium-web-regular - latin */

@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/titillium-web-v10-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/titillium-web-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/titillium-web-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/titillium-web-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/titillium-web-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/titillium-web-v10-latin-regular.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}

/* titillium-web-italic - latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/titillium-web-v10-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/titillium-web-v10-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/titillium-web-v10-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/titillium-web-v10-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/titillium-web-v10-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/titillium-web-v10-latin-italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}

/* titillium-web-700 - latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/titillium-web-v10-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/titillium-web-v10-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/titillium-web-v10-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/titillium-web-v10-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/titillium-web-v10-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/titillium-web-v10-latin-700.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}

/* titillium-web-700italic - latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/titillium-web-v10-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/titillium-web-v10-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/titillium-web-v10-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/titillium-web-v10-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/titillium-web-v10-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/titillium-web-v10-latin-700italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}

:root {

	/* Font Family */
	--global--font-primary: var(--font-headings, -apple-system, "Titillium Web", sans-serif);
	--global--font-secondary: var(--font-base, -apple-system, "Titillium Web", sans-serif);
	
	/* Colors */
	--global--color-black: #000;
	--global--color-dark-gray: #28303d;
	--global--color-gray: #3F4F4C;
	--global--color-light-gray: #f0f0f0;
	--global--color-green: #4AD793;
	--global--color-blue: #d1dfe4;
	--global--color-purple: #d1d1e4;
	--global--color-red: #e4d1d1;
	--global--color-orange: #FDB070;
	--global--color-yellow: #eeeadd;
	--global--color-white: #fff;
	--global--color-white-50: rgba(255, 255, 255, 0.5);
	--global--color-white-90: rgba(255, 255, 255, 0.9);
	--global--color-primary: var(--global--color-dark-gray);

	/* Body text color, site title, footer text color. */
	--global--color-secondary: var(--global--color-gray);
	
	--heading--font-weight: 700;
	
	--footer--font-size: var(--global--font-size-xs);
	--branding--title--font-size: var(--global--font-size-xs);

}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
	clear: both;
	font-family: var(--heading--font-family);
	font-weight: var(--heading--font-weight);
}

.site-logo .custom-logo {
	margin-left: auto;
	margin-right: auto;
	max-width: 200px;
	max-height: 150px;
	height: auto;
	display: inline-block;
	width: auto;
}

.site-footer > .site-info {
	border-top: 2px solid #F1F1F1;
	font-size: var(--footer--font-size);
}

.site-footer > .site-info .site-name {
	text-transform: var(--branding--title--text-transform);
	font-size: var(--branding--title--font-size);
}

.site-footer > .site-info .powered-by {
	margin-top: calc(0.5 * var(--global--spacing-vertical));
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=search],
input[type=number],
input[type=tel],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime],
input[type=datetime-local],
input[type=color],
.site textarea {
	border: 1px solid var(--global--color-light-gray);
	border-radius: var(--form--border-radius);
	color: var(--global--color-light-gray);
	line-height: var(--global--line-height-body);
	padding: var(--form--spacing-unit);
	margin: 0 2px;
	max-width: 100%;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=date]:focus,
input[type=month]:focus,
input[type=week]:focus,
input[type=time]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=color]:focus,
.site textarea:focus {
	color: var(--global--color-light-dark-gray);
	outline-offset: 2px;
	outline: 2px dotted var(--global--color-dark-gray);
}

input[type=checkbox], input[type=radio] {
    border: 1px solid var(--global--color-dark-gray);
    background: var(--global--color-white);
}

#mailpoet_form_2 {
	max-width:1240px;
}

.usp-header {
	margin-bottom:0;
}

.usp-icons {
	font-size:2.5em;
	font-weight:700;
}

.usp-header .wp-block-columns {
    display: flex;
    justify-content: center;
    align-items: center;
}

.usp-group.wp-block-columns .wp-block-column:last-child {
    flex: 0 0 32%;
}
.usp-group.wp-block-columns .wp-block-column:first-child {
    flex: 0 0 20%;
}

.site-header, .site-main {
	padding-top: 0px;
	padding-bottom: 0;
}

.teaser-video {
	margin:0;
}

.wp-block-media-text__media,
.wp-block-image img,
.wp-block-media-text figure img {
    border-radius: 1rem !important;
}

.wp-block-group.alignfull.has-background .wp-block-image img {
    border-radius: 0 !important;
}

.wp-block-social-links:not(.is-style-logos-only) li {
    color: #41d891 !important;
    background: transparent !important;
}

.primary-navigation a:hover, .primary-navigation a:link, .primary-navigation a:visited {
	font-size: 14px;
	font-weight:bold;
}

/*
.newsletter-send{
	display: flex;
	flex-direction: row;
}

.ub-newletter-btn::after{
	content: "";
    background-image: url("/wp-content/uploads/2021/12/arrow-send.png");
	background-repeat: no-repeat;
	display: block;
	width: 100px;
	height: 100px;
}
*/

.wp-social-link.wp-social-link-facebook.wp-block-social-link svg {
  width: 48px !important;
  height: 48px !important;
}
header#masthead {
	display: flex;
	flex-direction: unset;
	flex-wrap: nowrap;
	align-items: center;
	position: sticky;
	top: 0;
	background-color: #ffffff;;
	box-shadow: 0 2px 3px rgb(0 0 0 / 10%);
	max-width: 100%;
	padding: 0 14%;
	margin: 0;
	z-index: 100;
}


@media (max-width:1510px) {
	.usp-header .wp-block-columns {
		flex-direction:column;
	}	
}


@media (max-width: 1024px){
	html,body {
		overflow-x: hidden !important;
	}
	
	header#masthead {
		position: fixed;
		width: 100%;
	}
	
	#content {
		margin-top: 7rem;
	}
}


@media only screen and (min-width: 822px) {

	.site-header {
		padding-top: 0;
	}
}


@media only screen and (max-width: 821px) {

	.site-header {
		padding-top: 0px;
		padding-bottom: 0;
	}
	
	.site-logo .custom-logo {
		max-width: 150px;
	    max-height: 100px;
		height: auto;
		width: auto;
	}
	
	#content {
		margin-top: 5rem;
	}
}


@media (max-width:767px) {
	.usp-group .wp-block-uagb-icon-list.uagb-block-9d8f7bce .uagb-icon-list__wrap .uagb-icon-list__wrapper{
		margin-bottom:  20px
	}
}


@media only screen and (max-width: 482px) {
	h2,.h2 {
		font-size: var(--heading--font-size-h3);
	}
}


@media only screen and (max-width: 481px) {
	.site-header {
		padding-top: 30px;
		padding-bottom: 45px;
	}
	
	.site-logo .custom-logo {
		max-width: 150px;
	    max-height: 100px;
		height: auto;
		width: auto;
	}
	
	header#masthead {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
		position: fixed;
		top: 0;
		background-color: #ffffff;;
		width: 100%;
		max-width: unset;
		box-shadow: 0 2px 3px rgb(0 0 0 / 10%);
		padding: 0 .5rem .75rem;
		margin: 0;
		z-index: 100;
	}
	
	header#masthead .site-logo {
		margin-left: .35rem;
	}
	
	#content {
		margin-top: 4rem;
	}
}


@media (max-width:375px) {
	.usp-group h3 {
		text-align: center;
		width: 100%;
		flex: 0 0 100%;
		font-size: 29px;
		word-break: break-word;
	}
}