@charset "UTF-8";

/* ≡≡≡ Webfonts ≡≡≡ */

/* roboto-condensed-300 - latin */
@font-face{
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 300;
	src: url('../fonts/roboto_condensed/roboto-condensed-v19-latin-300.eot'); /* IE9 Compat Modes */
	src: local(''),
	url('../fonts/roboto_condensed/roboto-condensed-v19-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/roboto_condensed/roboto-condensed-v19-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/roboto_condensed/roboto-condensed-v19-latin-300.woff') format('woff'), /* Modern Browsers */ url('../fonts/roboto_condensed/roboto-condensed-v19-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/roboto_condensed/roboto-condensed-v19-latin-300.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-regular - latin */
@font-face{
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/roboto_condensed/roboto-condensed-v19-latin-regular.eot'); /* IE9 Compat Modes */
	src: local(''),
	url('../fonts/roboto_condensed/roboto-condensed-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/roboto_condensed/roboto-condensed-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/roboto_condensed/roboto-condensed-v19-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/roboto_condensed/roboto-condensed-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/roboto_condensed/roboto-condensed-v19-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-700 - latin */
@font-face{
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/roboto_condensed/roboto-condensed-v19-latin-700.eot'); /* IE9 Compat Modes */
	src: local(''),
	url('../fonts/roboto_condensed/roboto-condensed-v19-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/roboto_condensed/roboto-condensed-v19-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/roboto_condensed/roboto-condensed-v19-latin-700.woff') format('woff'), /* Modern Browsers */ url('../fonts/roboto_condensed/roboto-condensed-v19-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/roboto_condensed/roboto-condensed-v19-latin-700.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}


/* ≡≡≡ Core ≡≡≡ */

:root{
	--spacing-content: 20px;
	--spacing-page: 35px;
	--color-red: #ff4c61;
	--color-red-hover: #c53c51;
	--color-yellow: #f8d74c;
	--color-blue: #6c6ce6;
	--color-gray: #302d40;
	--color-head: #323150;
	--color-head-darker: #242339;
	--shadow: 0 0 50px 0 rgba(26, 50, 93, .2);
	--shadow-lower: 0 0 15px 0 rgba(26, 50, 93, .2);
}

.bg-red{
	background: var(--color-red);
}

.bg-yellow{
	background: var(--color-yellow);
}

.bg-blue{
	background: var(--color-blue);
}

.clr{
	clear: both;
	height: 0px !important;
}

/* === Headings === */

h1, .h1, h2, .h2,
h3, .h3, h4, .h4,
h5, .h5, h6, .h6{
	margin: 0;
}

h1, .h1{
	margin-bottom: var(--spacing-content);
	font-size: 36px;
	line-height: 40px;
}

h2, .h2{
	margin-bottom: calc(var(--spacing-content) * 0.75);
	font-size: 28px;
	line-height: 32px;
}

h3, .h3{
	margin-bottom: calc(var(--spacing-content) * 0.5);
	font-size: 24px;
	line-height: 28px;
}

h4, .h4,
h5, .h5,
h6, .h6{
	margin-bottom: calc(var(--spacing-content) * 0.25);
	font-size: 20px;
	line-height: 24px;
}

/* === Text === */

p{
	margin: 0px 0px var(--spacing-content) 0px;
}

/* === Links === */

a{
}

a:hover{
}

/* === Lists === */

ul ul,
ol ol,
ul ol,
ol ul{
	margin: calc(var(--spacing-content) * 0.5) 0px 0px 0px;
}

/* --- Unordered Lists --- */

ul{
	margin: 0px 0px var(--spacing-content) 0px;
}

ul > li{
	margin: 0px 0px calc(var(--spacing-content) * 0.5) 0px;
}

ul > li::before{
}

ul > li > ul > li::before{
}

/* --- Ordered Lists --- */

ol{
	margin: 0px 0px var(--spacing-content) 0px;
	list-style: none;
	counter-reset: ol-list;
}

ol > li{
	margin: 0px 0px calc(var(--spacing-content) * 0.5) 0px;
	counter-increment: ol-list;
}

ol > li::before{
	content: counter(ol-list) ". ";
}

ol > li > ol > li::before{
}

/* === Lines === */

hr{
	display: block;
	opacity: 0.25;
	width: 100%;
	height: 1px;
	margin: var(--spacing-content) 0px;
	background-color: currentColor;
	border: 0px;
	color: inherit;
}

/* === Tables === */

.table-wrap{
	margin: 0px 0px var(--spacing-content) 0px;
}

table{
	margin: 0px;
}

table th{
}

table td{
}


/* === Images === */

img{
	max-width: 100%;
}

/* === Figures === */

figure{
	margin: 0px 0px var(--spacing-content) 0px;
}

figure img{
}

figcaption{
	margin: 0px;
	padding: 6px 0px 0px 0px;
}


/* === Forms === */

legend{
	margin: 0px 0px var(--spacing-content) 0px;
}

label{
}

input, textarea,
button, select{
	margin: 0px;
}

button{
	font-size: 16px;
	line-height: 22px;
	font-weight: 400;
	border-radius: 30px;
	padding: 6px 18px;
	font-family: 'Roboto Condensed', sans-serif;
}

select{

}

/* === Blockquotes === */

blockquote{
	margin: 0px 0px var(--spacing-content) 0px;
}

/* === Pre === */

pre{
	margin: 0px 0px var(--spacing-content) 0px;
}

/* === Maxwidths === */

.maxwidth{
	max-width: 1200px;
	margin: 0 auto;
}

/* === Buttons === */

.btn{
	display: inline-block;
	padding: 6px 18px;
	border: none;
	border-radius: 30px;
	cursor: pointer;
	text-align: center;
	transition: color 0.25s ease, background 0.25s ease;
	vertical-align: middle;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	appearance: none;
	background: var(--color-red);
	color: #fff;
}

.btn:hover{
	color: #fff;
	background: var(--color-red-hover);
	text-decoration: none;
}

.btn:disabled,
.btn.disabled{
	opacity: 0.65;
	pointer-events: none;
}

/* --- Youtube --- */

.youtube-wrap{
	position: relative;
	height: 0;
	padding-top: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
}

.youtube-wrap iframe,
.youtube-wrap object,
.youtube-wrap embed{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ≡≡≡ Template ≡≡≡ */
body{
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 18px;
	line-height: 24px;
	background: #faf9ff;
	color: var(--color-gray);
}

#menu{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#logo{
	max-width: 100px;
	padding: 15px 0;
}

#logo .matrix_1,
#logo .matrix_2,
.logo .matrix_1,
.logo .matrix_2{
	fill: #FFF;
}

#logo .matrix_3,
.logo .matrix_3{
	fill: var(--color-red);
}


/* menu */
#mainmenu .lv-0{
	display: flex;
	list-style-type: none;
	padding-left: 0;
}

#mainmenu ul{
	list-style-type: none;
	padding: 0;
	margin-top: 0;
}

#mainmenu a:hover{
	text-decoration: none;
	transition: color .25s ease-in-out, background .25s ease-in-out;
}

#mainmenu .lv-0 > li{
	margin-right: 30px;
	font-size: 20px;
	line-height: 24px;
	padding-top: 30px;
	padding-bottom: 30px;
	border-top: 4px solid transparent;
	margin-bottom: 0;
}

#mainmenu li > a{
	color: #fff;
	transition: color .27s ease-in-out;
}

#mainmenu li > a:hover{
	color: var(--color-red);
}

#mainmenu .lv-0 > li.current{
	border-top: 4px solid var(--color-red);
}

#mainmenu .mod-menu{
	margin: 0;
}

#mainmenu .lv-0 > li:last-child{
	margin-right: 0;
}

#mainmenu li.parent{
	position: relative;
}

#mainmenu .lv-0 > li.parent > ul{
	position: absolute;
	top: 100%;
	left: -14px;
	white-space: nowrap;
	background: var(--color-head);
	padding: 8px 14px;
	border-radius: 0 0 8px 8px;
	border: 1px solid var(--color-head-darker);
	border-top: none;
	opacity: 0;
	user-select: none;
	visibility: hidden;
	transition: opacity .27s ease-in-out;
	z-index: 10;
}

#mainmenu .lv-0 > li.parent:hover > ul{
	opacity: 1;
	user-select: auto;
	visibility: visible;
}

#mainmenu .btn{
	padding-top: 6px;
	padding-bottom: 6px;
	margin-top: -6px;
	transition: color 0.25s ease, background 0.25s ease;
}

#mainmenu .nav-header{
	cursor: default;
}

#mainmenu .btn:hover{
	color: #fff;
}



/* topbar */
#topbar{
	background: var(--color-head);
	color: #fff;
	font-size: 20px;
	line-height: 24px;
}

#topbar > .maxwidth{
	display: flex;
	justify-content: space-between;
}

/* header */
#header{
	position: relative;
	height: 400px;
	background: var(--color-head);
	color: #fff;
	margin-bottom: 75px;
}

.home #header{
	height: 600px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#header > .inner{
	max-width: 300px;
	text-align: center;
	color: #fff;
}

#header .picture {
	height: 100px;
}

#header h1 {
	margin-top: calc(var(--spacing-content) / 2);
}

.socialmedia{
	list-style-type: none;
	padding: 0;
	text-align: center;
}

.socialmedia li{
	display: inline-block;
	margin-right: 10px;
}

.socialmedia > li:last-child{
	margin-right: 0;
}

.socialmedia a{
	color: #fff;
}

/* modules */
.module{
	margin-top: 100px;
	margin-bottom: 100px;
}

.module .module-headline{
	color: #323150;
	font-weight: 700;
	font-size: 28px;
	line-height: 32px;
	margin-bottom: 30px;
	position: relative;
}

.module .module-headline > *{
	position: relative;
	display: block;
	z-index: 5;
}

.module .module-headline::before{
	content: '';
	width: 25px;
	height: 25px;
	background: url(/templates/matthiasloeschmann/img/squares.png);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: contain;
	position: absolute;
	left: -8px;
	top: -4px;
	z-index: 1;
	
}


/* ueber-mich | module */
.speechbubble{
	box-shadow: var(--shadow);
	border-radius: 32px;
	padding: 35px 40px;
}

.skills{
	max-width: 600px;
}

.skill{
	margin-bottom: 20px;
}

.skills > .skill:last-child{
	margin-bottom: 0;
}

.skill p{
	margin-bottom: 5px;
}

.skill > .name{
	float: left;
}

.skill > .prog{
	float: right;
}

.progressbar{
	width: 100%;
	height: 8px;
	border-radius: 6px;
	background: #efefef;
}

.progressbar > .progress{
	height: 8px;
	border-radius: 6px;
}

/* counter | module */
.counter{
	display: flex;
	justify-content: space-between;
}

.counter p{
	margin-bottom: 5px;
}

.counter > .item{
	display: flex;
	align-items: center;
}

.counter > .item .icon{
	font-size: 46px;
	color: #cfcfcf;
	padding-right: 15px;
}

.counter .number{
	font-size: 28px;
	line-height: 28px;
	font-weight: 700;
}

.couner .desc{

}

/* newsflash | module */
.mod-articles-news .module-headline{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.mod-articles-news .module-headline .btn{
	font-size: 18px;
	line-height: 22px;
}

.newsflash .item{
	background: #fff;
	box-shadow: var(--shadow);
	border-radius: 32px;
	display: block;
	text-decoration: none;
	position: relative;
	transition: box-shadow .27s ease-in-out;
}

.newsflash .item:hover {
	box-shadow: var(--shadow-lower);
}

.newsflash .category{
	position: absolute;
	top: 20%;
	left: -8px;
	background: var(--color-red);
	padding: 7px 14px;
	font-size: 16px;
	line-height: 20px;
	color: #fff;
}

.newsflash .category::before{
	height: 0;
	width: 0;
	bottom: 100%;
	left: 0.1px;
	border-bottom: 9px solid #852230;
	border-left: 9px solid transparent;
	display: block;
	position: absolute;
	content: '';
}

.newsflash .category::after{
	height: 0;
	width: 0;
	left: 100%;
	top: 0;
	border-top: 17px solid transparent;
	border-bottom: 17px solid transparent;
	border-left: 12px solid var(--color-red);
	display: block;
	position: absolute;
	content: '';
}

.newsflash .item .image{
	width: 100%;
	min-height: 200px;
	border-radius: 32px 32px 0 0;
	background-size: cover;
	background-position: center;
}

.newsflash .item .inner{
	padding: 15px 25px;
}

.newsflash .item .title{
	font-size: 22px;
	line-height: 26px;
	font-weight: 700;
	color: var(--color-gray);
}

.newsflash .meta > p{
	color: #cfcfcf;
}

.newsflash .autor{
	color: var(--color-red);
	position: relative;
	padding-left: 15px;
}

.newsflash .autor::before{
	content: '';
	width: 6px;
	height: 6px;
	background: #cfcfcf;
	display: inline-block;
	position: absolute;
	top: 8px;
	left: 3px;
	border-radius: 8px;
}

.newsflash.custom-blog .row > [class^="col-"]{
	margin-top: 30px;
}


/* contact-site */
.contact-info{
	display: flex;
	align-items: center;
	justify-content: center;
}

.contact-info > .profile-picture{
	min-width: 160px;
	flex: 0 0 160px;
	margin-right: 20px;
}

.contact-info > .profile-informations p{
	margin-bottom: 5px;
	font-size: 24px;
	line-height: 28px;
}

#header .contact-info{
	padding-top: 100px;
}

#contact-form .mt-ff {
	margin-top: 0;
}

.important-info{
	position: relative;
	padding-left: 50px;
}

.important-info::before{
	content: '\f129';
	font-family: "icon";
	background: rgba(0, 0, 0, .07);
	border-radius: 32px;
	position: absolute;
	left: 0;
	top: calc(50% - 16px);
	font-style: normal;
	font-weight: normal;
	speak: never;
	display: inline-block;
	text-decoration: inherit;
	width: 32px;
	height: 32px;
	margin-right: .2em;
	text-align: center;
	font-variant: normal;
	text-transform: none;
	line-height: 1em;
	margin-left: .2em;
	font-size: 20px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
	color: var(--color-red);
	padding-top: 6px;
}

.form-check{
	display: flex;
}

.form-check > input{
	width: 20px;
	height: 20px;
	display: inline-block;
	margin-top: 5px;
}

.form-check > label{
	width: calc(100% - 20px);
}

#jform_consentbox-lbl{
	display: none;
}

.contact-intro{
	padding-bottom: 200px;
	background: url('/images/content/welt.png') no-repeat;
	background-position: top 30px center;
	background-size: contain;
}

/* login */
#login{
	height: 100vh;
	display: flex;
}

#login .left-side{
	height: 100vh;
	width: 40%;
	background: var(--color-head);
	color: #fff;
	position: relative;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

#login .left-side::after{
	position: absolute;
	left: 100%;
	top: 0;
	height: 100%;
	content: '';
	border-left: 0 solid var(--color-head);
	border-right: 150px solid transparent;
	border-top: 100vh solid var(--color-head);
}

#login .right-side{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60%;
}

#login h1 {
	margin-top: 30px;
}

.com-users-login__form fieldset > div{
	margin-top: 25px;
}

.com-users-login__form fieldset > div:first-child{
	margin-top: 0;
}

.visually-hidden{
	display: none;
}

.plg_system_webauthn_login_button > :first-child{
	margin-right: 10px;
}

button[class*="plg_system_webauthn_login_button"]{
	display: flex;
	align-items: center;
	padding: 6px 18px;
}

.com-users-login__submit{
	display: flex;
	justify-content: space-between;
}

.com-users-login__options{
	padding-top: 30px;
	margin-top: 29px;
	border-top: 1px solid #efefef;
}

.com-users-login__options a{
	text-decoration: none;
}

.com-users-login__options > :first-child{
	margin-top: 0;
}

.com-users-login__options > *{
	display: block;
	color: var(--color-gray);
	margin-top: 6px;
}

.information-tree p{
	margin: 0;
}

.information-tree > .info{
	margin-bottom: 15px;
}

.user_remind{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.user_remind > .inner,
.user_remind .remind__submit{
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
}

.user_remind input{
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.user_remind .btn{
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	padding-top: 8px;
	padding-bottom: 9px;
}

/* user-profile */
.user_coreinfo{
	display: flex;
	justify-content: flex-start;
}

.user_coreinfo > .profile_container{
	padding-right: 39px;
	margin-right: 40px;
	border-right: 1px solid #eee;
}

.user_coreinfo > .profile_container .username{
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
	margin-top: 15px;
}

.user_coreinfo > .info_container{
	width: 100%;
}

.info_container > .info_row{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-bottom: 14px;
	margin-bottom: 15px;
	border-bottom: 1px solid #eee;
}

.info_container > .info_row > p{
	flex: 0 0 100%;
	margin-bottom: 5px;
	font-size: 20px;
	line-height: 24px;
}

/* blog */
.blog .items img{
	max-width: 100%;
}


/* formfields */
input,
textarea{
	width: 100%;
	border-radius: 22px;
	border: 1px solid #efefef;
	font-size: 18px;
	line-height: 22px;
	padding: 8px 12px;
	font-family: 'Roboto Condensed', sans-serif;
}

label{
	margin-bottom: 6px;
	display: block;
	margin-left: 10px;
}

.input-group{
	display: flex;
}

.input-group input{
	border-radius: 22px 0 0 22px;
}

.input-group .btn{
	border-radius: 0 22px 22px 0;
	padding: 6px 18px 6px 14px;
}

input.form-control-danger,
textarea.form-control-danger{
	border: 1px solid var(--color-red);
}

.control-group{
	position: relative;
}

.control-group .form-control-feedback{
	position: absolute;
	color: var(--color-red);
	font-size: 14px;
	line-height: 18px;
	top: 100%;
	left: 10px;
}

form fieldset > .control-group{
	margin-top: 25px;
}

form fieldset > .control-group:first-child{
	margin-top: 0;
}

/* CTA | module */
.module.cta{
	background: var(--color-head);
	color: #fff;
	margin-bottom: 0;
	padding: 0 15px 75px 15px;
	position: relative;
	margin-top: 200px;
}

.flex-center{
	display: flex;
	justify-content: center;
	align-items: center;
}

.module.cta .image-container{
	margin-right: 50px;
	max-width: 300px;
	margin-top: -75px;
}

.module.cta .image-container > img{
	max-width: 100%;
	max-height: 100%;
}

.module.cta .module-container{
	max-width: 400px;
	padding-top: 65px;
}

.module.cta .module-container .headline{
	font-weight: 700;
	font-size: 28px;
	line-height: 32px;
	margin-bottom: 8px;
}

/* teaser */
.teasers .teaser{
	padding: 24px;
	border-radius: 32px;
	box-shadow: var(--shadow);
	color: #fff;
}

.teasers .teaser .image{
	height: 130px;
	text-align: center;
	margin-bottom: 24px;
}

.teasers .teaser img{
	max-width: 100%;
	max-height: 100%;
}

.teasers .teaser .headline{
	font-size: 24px;
	line-height: 28px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 24px;
}

.teasers .teaser .headline > *{
	margin: 0;
}

.teasers .teaser .content{
	text-align: center;
}

.teasers .bg-yellow{
	color: var(--color-gray);
}

/* ITEM-PAGE */
.page-header,
h1{
	max-width: 1200px;
	margin: 50px auto var(--spacing-content);
}

.item-page a {
	color: var(--color-red);
	transition: color .21s ease-in-out;
}

.item-page a:hover {
	color: var(--color-red-hover);
	text-decoration: none;
}

.item-page .text > section,
#blog .category-description{
	padding-top: 100px;
	padding-bottom: 100px;
}

.item-page .text > section:nth-child(2n){
	background: #f2f2f2;
	position: relative;
	margin-top: 100px;
	margin-bottom: 100px;
	padding-top: 150px;
	padding-bottom: 150px;
}


.item-page .text{
	max-width: 100%;
	overflow-x: hidden;
}

.item-page .text > section:nth-child(2n)::before{
	width: 0px;
	height: 0px;
	-webkit-transform: rotate(360deg);
	border-style: solid;
	border-width: 0 0 100px 100vw;
	border-color: transparent transparent #f2f2f2 transparent;
	content: '';
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
}

.item-page .text > section:nth-child(2n)::after{
	width: 0px;
	height: 0px;
	-webkit-transform: rotate(360deg);
	border-style: solid;
	border-width: 100px 100vw 0 0;
	border-color: #f2f2f2 transparent transparent transparent;
	content: '';
	position: absolute;
	top: 100%;
	right: 0;
}

.quote{
	box-shadow: var(--shadow);
	border-radius: 32px;
	padding: 35px 40px;
	position: relative;
}

.quote p{
	margin: 0;
}

.quote .flex-center{
	min-height: 120px;
}

.flex-center{
	display: flex;
	align-items: center;
	justify-content: center;
}

.quote .autor{
	position: absolute;
	top: calc(15px + 33%);
	right: -42px;
	color: var(--color-red);
	transform: rotate(-90deg);
}

.rocket{
	position: relative;
}

.rocket img{
	max-width: 150px;
	margin: 0 auto;
	display: block;
	animation-name: bouncy-idle;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}

@keyframes bouncy-idle{
	0%{
		margin-top: 0;
		margin-bottom: 0;
	}
	50%{
		margin-top: 10px;
		margin-bottom: -10px;
	}
	100%{
		margin-top: 0;
		margin-bottom: 0;
	}
}

.rocket::after{
	content: '';
	position: absolute;
	top: 100%;
	left: calc(50% - 10px);
	height: 100%;
	width: 20px;
	background: rgb(23, 42, 138);
	background: radial-gradient(circle, rgba(23, 42, 138, 0.24411771544555327) 0%, rgba(255, 255, 255, 0) 100%);
	display: block;
	border-radius: 0 0 20px 20px;
}

.mw100{
	max-width: 100%;
	max-height: 100%;
}


/* pagination */
.mod-pagination{
	margin-top: 80px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}


.mod-pagination ul{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	list-style-type: none;
	padding: 0;
}

.mod-pagination ul li{
	font-size: 18px;
	line-height: 18px;
	width: 40px;
	height: 40px;
	text-align: center;
	align-items: center;
	background: #eee;
	color: #888;
	border-radius: 40px;
	transition: background .27s ease-in-out;
	margin-right: 10px;
	margin-bottom: 0;
}

.mod-pagination ul li:hover{
	background: #dedede;
}

.mod-pagination ul li:last-child{
	margin-right: 0;
}

.mod-pagination a{
	color: #333;
	padding: 10px;
	display: block;
	text-decoration: none;
}

.mod-pagination span{
	padding: 10px;
	display: block;
}

.mod-pagination .page-active{
	background: var(--color-red);
}

.mod-pagination .page-active:hover{
	background: var(--color-red-hover);
}

.mod-pagination .page-active a{
	color: #fff;
}

/* autoren | kontakte */
.contacts .item{
	display: flex;
	align-items: center;
	box-shadow: var(--shadow);
	border-radius: 22px;
	padding: 25px;
}

.contacts .item > .left{
	flex: 0 0 175px;
	border-right: 1px solid #eee;
	margin-right: 25px;
	padding-right: 25px;
}

.contacts .item > .left img{
	width: 100%;
	border-radius: 100%;
	height: 150px;
	object-fit: cover;
	object-position: top center;
	border: 1px solid #eee;
}

.contacts .item .personal > :first-child,
#author-box .personal > :first-child{
	font-weight: 700;
	font-size: 20px;
	line-height: 24px;
	margin-bottom: 0;
}

.contacts .item .personal > :last-child,
#author-box .personal > :last-child{
	font-size: 16px;
	line-height: 20px;
}

.contacts .item .personal{
	margin-bottom: 15px;
}

.contacts .item .contact{
	padding: 0;
	list-style-type: none;
}
.contacts .item .contact > li{
	position: relative;
	padding-left: 32px;
	margin-bottom: 5px;
}

.contacts .item .contact > li::before{
	font-family: "icon";
	font-style: normal;
	font-weight: normal;
	speak: never;
	display: block;
	text-decoration: inherit;
	width: 1em;
	margin-right: .2em;
	text-align: center;
	font-variant: normal;
	text-transform: none;
	line-height: 1em;
	margin-left: .2em;
	font-size: 120%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
	position: absolute;
	left: 0;
	bottom: 2px;
	color: var(--color-red);
}

.contacts .item .contact > li.email::before{
	content:'\e800';
	font-size: 20px;
}

.contacts .item .contact > li.location::before {
	content: '\e812';
	left: -2px;
}

.contacts .contact a {
	color: var(--color-gray);
	text-decoration: none;
}

.badge {
	background: var(--color-red);
	border-radius: 5px;
	padding: 2px 6px;
	font-size: 14px;
	line-height: 16px;
	color: #FFF;
	text-shadow: 1px 1px 1px rgba(0,0,0,.25);
}

.contacts .contact .badge {
	font-size: 12px;
	position: absolute;
	top: 2px;
	margin-left: 5px;
}


.flex-row {
	display: flex;
	justify-content: stretch;
	align-items: flex-end;
}

.flex-row > * {
	margin-right: 30px;
}

.flex-row > *:last-child{
	margin-right: 0;
}

.ajax_req{
	margin-top: 25px;
	max-width: 600px;
	min-height: 76px;
}

.ajax_req .alert {
	border-radius: 8px;
	padding: 12px 18px;
}

.ajax_req .alert > .alert-heading {
	font-weight: 700;
	margin-bottom: 4px;
}

.ajax_req .alert-success {
	background: rgb(209, 231, 221);
	color: rgb(15, 81, 50);
}

.ajax_req .alert-error {
	background: rgb(248, 215, 218);
	color: rgb(132, 32, 41);
}

code {
	max-width: 600px;
	padding: 24px;
	border-radius: 22px;
	 display:block;
	border:1px solid var(--color-blue);
	border-left: 22px solid var(--color-blue);
	margin-bottom: var(--spacing-content);
}

.highlight {
	background: var(--color-red);
	padding: 2px 6px;
	border-radius: 5px;
	text-shadow: 1px 1px 1px rgba(0,0,0,.31);
	color: #FFF;
}

.red {
	color: var(--color-red);
}

/* author box */
#author-box {
	background: var(--color-head);
	color: #FFF;
	padding: 40px 15px;
}

#author-box > .inner {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

#author-box > .inner > .left img{
	width: 200px;
	height: 200px;
	object-fit: cover;
	object-position: top center;
	border-radius: 100%;
	box-shadow: var(--shadow);
}

#author-box > .inner > .left {
	padding-right: 38px;
	margin-right: 40px;
	border-right: 2px solid #f2f2f2;
}

#author-box .personal {
	margin-bottom: 15px;
}

/* skills copple-in */

/* footer */
#footer{
	background: #241e20;
	color: #dbcaca;
	font-size: 14px;
	line-height: 18px;
	text-align: center;
	padding: 15px 15px 5px;
	margin-top: 75px;
}

.home #footer,
.footer-no-margin #footer{
	margin-top: 0;
}

#footer .copyright{
	margin-bottom: 10px;
}

#footer .mod-menu{
	padding-left: 0;
	margin: 0;
}

#footer .module{
	padding-top: 0;
	padding-bottom: 0;
}

#footer .mod-menu a{
	color: #dbcaca;
}

#footer .mod-menu > li{
	display: inline-block;
	margin-right: 14px;
	position: relative;
}

#footer .mod-menu > li::after{
	content: '';
	height: 15px;
	width: 1px;
	background: #666060;
	position: absolute;
	right: -8px;
	top: 2px;
}

#footer .mod-menu > li:last-child{
	margin-right: 0;
}

#footer .mod-menu > li:last-child::after{
	display: none;
}


/* === Responsive === */

/* XL - Extra Large */
@media (max-width: 1399.98px){
	:root{
		--spacing-content: 20px;
		--spacing-page: 35px;
	}
}

/* LG - Large */
@media (max-width: 1199.98px){
	:root{
		--spacing-content: 20px;
		--spacing-page: 32px;
	}
}

/* MD - Medium */
@media (max-width: 991.98px){
	:root{
		--spacing-content: 15px;
		--spacing-page: 28px;
	}
}

/* SM - Small */
@media (max-width: 767.98px){
	:root{
		--spacing-content: 15px;
		--spacing-page: 24px;
	}
}

/* XS - Extra Small */
@media (max-width: 575.98px){
	:root{
		--spacing-content: 12px;
		--spacing-page: 20px;
	}
}