body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li{float:left}.ce_gallery>ul li.col_first{clear:left}.float_left{float:left}.float_right{float:right}.block{overflow:hidden}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.ie7 img{-ms-interpolation-mode:bicubic}.ie8 img{width:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.responsive{position:relative;height:0}.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.responsive.ratio-169{padding-bottom:56.25%}.responsive.ratio-1610{padding-bottom:62.5%}.responsive.ratio-219{padding-bottom:42.8571%}.responsive.ratio-43{padding-bottom:75%}.responsive.ratio-32{padding-bottom:66.6666%}
#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;-webkit-transform:translate3d(0,0,0)}#cboxWrapper{max-width:none}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic}.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#cboxOverlay{background:#000;opacity:.9;filter:alpha(opacity = 90)}#colorbox{outline:0}#cboxContent{margin-top:20px;background:#000}.cboxIframe{background:#fff}#cboxError{padding:50px;border:1px solid #ccc}#cboxLoadedContent{border:5px solid #000;background:#fff}#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc}#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}#cboxLoadingGraphic{background:url(../../assets/colorbox/images/loading.gif) no-repeat center center}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0 0}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top left;width:28px;height:65px;text-indent:-9999px}#cboxPrevious:hover{background-position:bottom left}#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top right;width:28px;height:65px;text-indent:-9999px}#cboxNext:hover{background-position:bottom right}#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(../../assets/colorbox/images/controls.png) no-repeat top center;width:38px;height:19px;text-indent:-9999px}#cboxClose:hover{background-position:bottom center}
/**
 * @Author: http://meyerweb.com/eric/tools/css/reset/
 * @Date:   2018-05-01T15:48:26+02:00
 * @Last modified by:   andreasprietzel
 * @Last modified time: 2018-05-01T15:48:50+02:00
 */
 /* http://meyerweb.com/eric/tools/css/reset/
    v2.0 | 20110126
    License: none (public domain)
 */

 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed,
 figure, figcaption, footer, header, hgroup,
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
 	margin: 0;
 	padding: 0;
 	border: 0;
 	font-size: 100%;
 	font: inherit;
 	vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
 	display: block;
 }
 body {
 	line-height: 1;
 }
 ol, ul {
 	list-style: none;
 }
 blockquote, q {
 	quotes: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after {
 	content: '';
 	content: none;
 }
 table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }

/**
 * @Author: andreasprietzel
 * @Date:   2018-04-29T23:50:59+02:00
 * @Last modified by:   andreasprietzel
 * @Last modified time: 2018-06-06T21:13:20+02:00
 */

header
{
	position  : fixed;
	max-height: 50px;
	height    : 50px;
	width     : 100vw;
	z-index   : 10;
	background-color : rgba(0, 0, 0, 0.4);
}

header.MakeItDarker
{
	background-color : rgba(0, 0, 0, 0.9);
}

header .mod_navigation
{
	text-align: center;
	text-transform: uppercase;
}

header .mod_navigation ul
{
	-webkit-margin-before: 0;
    -webkit-margin-after : 0;
    -webkit-padding-start: 0;
	margin               : 0;
}

header .mod_navigation li
{
	list-style    : none;
	display       : inline-block;
	padding-left  : 10px;
	padding-right : 10px;
	color         : white;
	padding-top   : 17px;
	padding-bottom: 17px;
	cursor        : pointer;
}

header .mod_navigation li a
{
	text-decoration: none;
	color          : white;
}

header .mod_navigation li:hover,
header .mod_navigation li.Active
{
	background-color: rgba(255,255,255,0.4);
	transform       : scale(1.1);
}

body.sf11 header
{
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter        : blur(10px);
}

/*
    Smartphone
    240px = 0.125%
*/
@media (max-width: 479px)
{
	header .mod_navigation li
	{
		font-size: 12px;
	}
}

@media (max-width: 320px)
{
	header .mod_navigation li
	{
		font-size: 9px;
	}
}

/**
 * @Author: andreasprietzel
 * @Date:   2018-04-30T10:38:42+02:00
 * @Last modified by:   andreasprietzel
 * @Last modified time: 2018-06-06T21:20:09+02:00
 */

section.Start
{
	width              : 100vw;
	min-height         : 100vh;
	background-color   : rgba(0, 0, 0, 0.1);
	filter             : drop-shadow(0 20px 20px rgba(0,0,0, 1));
	overflow           : hidden;
	position           : relative;
}

section.Start video
{
	position         : absolute;
	top              : 0;
	width            : 100vw;
	filter           : drop-shadow(0 6px 20px black);
	height           : auto;
	left             : 50%;
	top              : 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform   : translate(-50%, -50%);
	-ms-transform    : translate(-50%, -50%);
	-o-transform     : translate(-50%, -50%);
	transform        : translate(-50%, -50%);
}

section.Start .AbsoluteContent
{
	position : absolute;
	top      : 0;
	width    : 100vw;
	height   : 100vh;
}

section.Start .WelcomeRow,
section.Start .HelloRow,
section.Start .PortraitRow
{
	flex-grow: 1;
}

.WelcomeText
{
	color      : white;
	text-align : center;
	font-size  : 48px;
	font-weight: 900;
	line-height: 300px;
	left       : 0;
	right      : 0;
	position   : absolute;
	text-shadow: 0px 0px 1px black;
}

section.Start .HelloWorldTypedText
{
	color      : white;
	text-align : center;
	font-size  : 28px;
	font-weight: 100;
	line-height: 300px;
	left       : 0;
	right      : 0;
	position   : absolute;
	/*top:200px;*/
	text-shadow: 0px 0px 1px black;
}

section.Start .Portrait
{
	width     : 100%;
	text-align: center;
}

section.Start .Portrait img
{
	height          : 240px;
	background-color: rgba(255,255,255,0.7);
	border-radius   : 50%;
}

/*
    Smartphone
    240px = 0.125%
*/
@media (max-width: 479px)
{
	.WelcomeText
	{
		font-size: 28px;
		line-height: 212px;
	}

	section.Start .HelloRow .HelloWorldTypedText
	{
		font-size: 21px;
		line-height: 170px;
	}

	section.Start .Portrait img
	{
		height: 200px;
	}
}

/**
 * @Author: andreasprietzel
 * @Date:   2018-04-30T10:38:52+02:00
 * @Last modified by:   andreasprietzel
 * @Last modified time: 2020-07-13T10:03:33+02:00
 */

section.Skills
{
 	width                : 100vw;
 	min-height           : 80vh;
	background-image     : url('../../files/res/skillsBackground.jpg');
	background-position  : center center;
	background-size      : 100%;
	background-attachment: fixed;
	display              : grid;
	grid-template-rows   : auto;
	background-repeat    : no-repeat;
    background-size      : cover;
}

section.Languages
{
	display:flex;
	flex-direction:column;
	filter:drop-shadow(0 -20px 20px rgba(0,0,0, 1));
	background-image   : url('../../files/res/projectsBackground.jpg');
	background-position: center center;
	background-size    : 100%;
	background-repeat  : no-repeat;
	background-size    : 300%;
	grid-template-rows : 180px auto;
}

.SkillsList
{
	grid-column: 2 / 2;
	grid-row   : 1/1;
	color      : white;
	display    : flex;
	flex-wrap  : wrap;
	align-items: center;
}

.SkillsList .SkillEntry
{
	flex-grow          : 1;
	text-align         : center;
	height             : 170px;
	width              : 170px;
	-webkit-transition : 300ms all ease-out;
	-moz-transition    : 300ms all ease-out;
	-o-transition      : 300ms all ease-out;
	-ms-transition     : 300ms all ease-out;
	transition         : 300ms all ease-out;
}

.SkillsList .SkillEntry:hover
{
	transform: scale(1.2);
	-webkit-transition : 150ms all ease-out;
	-moz-transition    : 150ms all ease-out;
	-o-transition      : 150ms all ease-out;
	-ms-transition     : 150ms all ease-out;
	transition         : 150ms all ease-out;
}

.SkillsList .SkillEntry .SkillTitle
{
    text-shadow: 1px 1px 1px black, -1px -1px 1px black;
}

.SkillsList .SkillEntry .SkillImage
{
	width              : 96px;
    height             : 96px;
	margin             : 0 auto;
    border-radius      : 50%;
    position           : relative;
    overflow           : hidden;
	background-position: center;
	background-repeat  : no-repeat;
	background-size    : 70%;
}

.SkillsList .SkillEntry.SkillJavascript .SkillImage
{
	background-size    : 100%;
}

.SkillsList .SkillEntry .SkillImage:hover
{

}

.ios.safari section.Skills
{
	background-attachment: local;
}


/*
    Smartphone
    240px = 0.125%
*/
@media (max-width: 479px)
{
	section.Languages
	{
		background-size    : auto;
	}

	.SkillsList .SkillEntry
	{
		width: auto;
	}
}

/**
 * @Author: andreasprietzel
 * @Date:   2018-04-30T10:39:03+02:00
 * @Last modified by:   andreasprietzel
 * @Last modified time: 2020-07-12T18:57:37+02:00
 */


section.Projects
{
 	width              : 100vw;
 	min-height         : 621px;
	filter             : drop-shadow(0 -20px 20px rgba(0,0,0, 1));
	/*background-image   : url('../../files/res/projectsBackground.jpg');*/
	background-position: center center;
	background-size    : 100%;
	background-repeat  : no-repeat;
	background-size    : 300%;
	grid-template-rows : 180px auto;
}

section.Projects > *
{
	grid-column: 2 / 2;
}

section.Projects > h2
{
	grid-row: 1 / 1;
}

section.Projects > div
{
	grid-row: 2 / 2;
}


section.Projects .ProjectsList .UIPage
{
	color      : white;
	display    : flex;
	flex-wrap  : wrap;
	align-items: center;
	background-color: rgba(255,255,255,0.2);
}


.ProjectsList .ProjectEntry
{
	flex-grow          : 1;
	text-align         : center;
	height             : 170px;
	width              : 170px;
	cursor             : pointer;
	-webkit-transition : 300ms all ease-out;
	-moz-transition    : 300ms all ease-out;
	-o-transition      : 300ms all ease-out;
	-ms-transition     : 300ms all ease-out;
	transition         : 300ms all ease-out;
}

.ProjectsList .ProjectEntry:hover
{
	transform: scale(1.2);
	-webkit-transition : 150ms all ease-out;
	-moz-transition    : 150ms all ease-out;
	-o-transition      : 150ms all ease-out;
	-ms-transition     : 150ms all ease-out;
	transition         : 150ms all ease-out;
}

.ProjectsList .ProjectEntry .ProjectTitle
{
    text-shadow: 1px 1px 1px black, -1px -1px 1px black;
}

.ProjectTab
{
	color: white;
}

.ProjectImage
{
	width              : 64px;
    height             : 64px;
	margin             : 0 auto;
    border-radius      : 50%;
    position           : relative;
    overflow           : hidden;
	background-position: center;
	background-repeat  : no-repeat;
	background-size    : 70%;
	float              : left;
}

#projectCatNav
{
	position: relative;
}

div#cboxLoadedContent video
{
	margin           : 0 auto;
    display          : block;
    top              : 50%;
    -webkit-transform: translateY(-50%);
	-moz-transform   : translateY(-50%);
	-ms-transform    : translateY(-50%);
	-o-transform     : translateY(-50%);
	transform        : translateY(-50%);
    position         : relative;
}

/*
    Desktop
    1680px = 0.875%
*/
@media (min-width : 1680px) AND (max-width: 1919px)
{
}

/*
    Desktop small
    1440px* = 0.75%
*/
@media (min-width : 1440px) AND (max-width: 1679px)
{
}

/*
    Desktop extra small (oder landscape tablet?)
    1200px = 0.625%
*/
@media (min-width : 1200px) AND (max-width: 1439px)
{
}

/*
    Tablet landscape
    960px = 0.5%
    Bootsrap geht bis 992px statt 960px...
*/
@media (max-width: 1199px)
{

	section.Projects .UIVisualTimeline .UIEntry .Content .Tech
	{
		height: auto;
	}

	/*section.Projects .UIVisualTimeline .UIEntry .Content .Tech .Key,
	section.Projects .UIVisualTimeline .UIEntry .Content .Tech .Value
	{
		float: left;
		width: 100%;
	}*/

	section.Projects .UIVisualTimeline .UIEntry .Content .Tech .Value
	{
		float: none;
		margin-top: 36px;
	}

	.UIVisualTimeline .UIEntry .Content .Tech .Icon
	{
		margin-bottom: 5px;
	}


	/*section.Projects .UIVisualTimeline .UIEntry .Content .Tech .Value img
	{
		float: left;
	}*/
}

/*
    Tablet portrait
    720px = 0.375%
    Bootsrap geht bis 991px statt 959px...
*/
@media (min-width : 720px) AND (max-width: 991px)
{
}

/*
    Tablet small, Smartphone big;
    480px = 0.25%
*/
@media (max-width: 719px)
{
	section.Projects .UIVisualTimeline .UIEntry .UITimeBar
	{
		width: 65px;
	}

	section.Projects .UIVisualTimeline .UIEntry .UITimeBar .Time
	{
		display: none;
	}

	section.Projects .UIVisualTimeline .UIEntry .Content
	{
		padding-left: 72px;
	}
}

/*
    Smartphone
    240px = 0.125%
*/
@media (max-width: 479px)
{
}



/*******************************************************************************************************************************/


@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow);
body {
  font-family: Open Sans, "Helvetica Neue", "Helvetica", Helvetica, Arial,   sans-serif;
  font-size: 13px;
  color: #666;
  position: relative;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td {
  margin: 0;
  padding: 0;
  font-size: 13px;
  direction: ltr;
}

.sectionClass {
  padding: 20px 0px 50px 0px;
  position: relative;
  display: block;
}

.fullWidth {
  width: 100% !important;
  display: table;
  float: none;
  padding: 0;
  min-height: 1px;
  height: 100%;
  position: relative;
}


.sectiontitle {
  background-position: center;
  margin: 30px 0 0px;
  text-align: center;
  min-height: 20px;
}

.sectiontitle h2 {
  font-size: 30px;
  color: #222;
  margin-bottom: 0px;
  padding-right: 10px;
  padding-left: 10px;
}


.headerLine {
  width: 160px;
  height: 2px;
  display: inline-block;
  background: #101F2E;
}


.projectFactsWrap{
    display: flex;
  margin-top: 30px;
  flex-direction: row;
  flex-wrap: wrap;
}


#projectFacts .fullWidth{
  padding: 0;
}

.projectFactsWrap .item{
  width: 25%;
  height: 100%;
  padding: 50px 0px;
  text-align: center;
}

.projectFactsWrap .item:nth-child(1){
  background: rgb(16, 31, 46);
}

.projectFactsWrap .item:nth-child(2){
  background: rgb(18, 34, 51);
}

.projectFactsWrap .item:nth-child(3){
  background: rgb(21, 38, 56);
}

.projectFactsWrap .item:nth-child(4){
  background: rgb(23, 44, 66);
}

.projectFactsWrap .item p.number{
  font-size: 40px;
  padding: 0;
  font-weight: bold;
}

.projectFactsWrap .item p{
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  margin: 0;
  padding: 10px;
  font-family: 'Open Sans';
}


.projectFactsWrap .item span{
  width: 60px;
  background: rgba(255, 255, 255, 0.8);
  height: 2px;
  display: block;
  margin: 0 auto;
}


.projectFactsWrap .item i{
  vertical-align: middle;
  font-size: 50px;
  color: rgba(255, 255, 255, 0.8);
}


.projectFactsWrap .item:hover i, .projectFactsWrap .item:hover p{
  color: white;
}

.projectFactsWrap .item:hover span{
  background: white;
}

@media (max-width: 786px){
  .projectFactsWrap .item {
     flex: 0 0 50%;
  }
}

/* AUTHOR LINK */


footer{
  z-index: 100;
  padding-top: 50px;
  padding-bottom: 50px;
  width: 100%;
  bottom: 0;
  left: 0;
}

footer p {
color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  opacity: 0;
  font-family: 'Open Sans';
  width: 100%;
    word-wrap: break-word;
  line-height: 25px;
  -webkit-transform: translateX(-200px);
  transform: translateX(-200px);
  margin: 0;
  -webkit-transition: all 250ms ease;
  -moz-transition: all 250ms ease;
  transition: all 250ms ease;
}

footer .authorWindow a{
  color: white;
  text-decoration: none;
}

footer p strong {
    color: rgba(255, 255, 255, 0.9);
}

.about-me-img {
  width: 120px;
  height: 120px;
  left: 10px;
  /* bottom: 30px; */
  position: relative;
  border-radius: 100px;
}


.about-me-img img {
}


.authorWindow{
  width: 600px;
  background: #75439a;
  padding: 22px 20px 22px 20px;
  border-radius: 5px;
  overflow: hidden;
}

.authorWindowWrapper{
  display: none;
  left: 110px;
  top: 0;
  padding-left: 25px;
  position: absolute;
}





.trans{
  opacity: 1;
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  transition: all 500ms ease;
}

@media screen and (max-width: 768px) {
    .authorWindow{
         width: 210px;
    }

    .authorWindowWrapper{
             bottom: -170px;
  margin-bottom: 20px;
    }

    footer p{
          font-size: 14px;
    }
}

/**
 * @Author: andreasprietzel
 * @Date:   2018-05-01T15:43:13+02:00
 * @Last modified by:   andreasprietzel
 * @Last modified time: 2018-06-06T21:00:02+02:00
 */

section.AboutMe
{
  	width            : 100vw;
  	min-height       : 100vh;
	background-color : white;
	display          : none;
}

section.AboutMe h2
{
	color: black;
}

section.AboutMe > *
{
	grid-column: 2 / 2;
}

section.AboutMe article
{
	transform: translateY(-50%);
	top      : 50%;
	position : absolute;
}

section.AboutMe .ItsMe
{
	width        : 240px;
	border       : 1px solid black;
	border-radius: 50%;
	margin       : 12px;
	display      : block;
	margin-bottom: 48px;
}

section.AboutMe p
{
	font-size: 14px;
	text-align: justify;
}

section.AboutMe
{
	grid-template-rows: 96px auto;
}

/**
 * @Author: andreasprietzel
 * @Date:   2018-05-01T15:43:21+02:00
 * @Last modified by:   andreasprietzel
 * @Last modified time: 2020-02-25T15:16:46+01:00
 */

section.Contact
{
  	width              : 100vw;
	background-color   : gray;
	background-image   : url('../../files/res/contactBackground.jpg');
	background-position: center center;
	background-size    : 100%;
	background-repeat  : no-repeat;
	background-size    : cover;
	padding-bottom     : 70px;
}

section.Contact > *
{
 	grid-column: 2 / 2;
}

section.Contact article
{
	font-size: 16px;
	text-align: center;
}

section.Contact .ContactForm
{
	z-index: 2;
	display: none;
}

section.Contact .ContactForm input
{
	height: 36px;
}

section.Contact .ContactForm textarea
{
	height: 144px;
	padding-top: 10px;
	padding-bottom: 10px;
}

section.Contact .ContactForm input,
section.Contact .ContactForm textarea
{
	width           : calc(100% - 20px);
	margin-bottom   : 5px;
	border          : none;
	padding-left    : 10px;
	padding-right   : 10px;
	font-size       : 16px;
	background-color: rgba(255,255,255,.5);
	border-radius   : 3px;
}

section.Contact .ContactForm input:focus,
section.Contact .ContactForm textarea:focus,
section.Contact .ContactForm input:hover,
section.Contact .ContactForm textarea:hover
{
	background-color: rgba(255,255,255,.7);
	outline         : none;
}

section.Contact .ContactFormSendButton
{
	width         : 100%;
	height        : 36px;
	border-radius : 2px;
	outline       : none !important;
	text-transform: uppercase;
	cursor        : pointer;
}

section.Contact .SendAnimation
{
	animation: sendAnimation 1s forwards ease-in;
}

@keyframes sendAnimation
{
    0%
	{
		transform: scale(1);
	}
    50%
	{
		transform: scale(0.5);
	}
	100%
	{
		transform: translateX(200%) scale(0.5);
	}
}

section.Contact .ThankYouForYourMessage
{
	position   : absolute;
	width      : 100%;
    transform  : translate(-50%, -50%) scale(0.6);
	opacity    : 0;
    top        : 50%;
    left       : 50%;
	z-index    : -1;
	font-size  : 24px;
	font-weight: 900;
	color      : white;
	text-align : center;
}

section.Contact .ThankYouForYourMessage.MessageHasBeenSend
{
	transform: translate(-50%, -50%) scale(1.4);
	opacity  : 1;
	z-index  : 1;
}

section.Contact .Tabs
{
	width: 70%;
	height: 45px;
	margin:0 auto;

}

section.Contact .Tab
{
	display      : inline-block;
	height       : 100%;
	line-height  : 45px;
	color        : white;
	font-weight  : 900;
	padding-left : 15px;
	padding-right: 15px;
	padding-bottom: 5px;
	cursor       : pointer;
}

section.Contact .Tab.Active::after
{
	display: block;
	content            : "";
	background-image   : url('../../files/res/arrowDown.png');
	width              : 32px;
	height             : 32px;
	background-position: center;
	background-size    : 100%;
	background-repeat  : no-repeat;
	transform          : translateX(8px) translateY(-20px);
}

section.Contact .Tab:hover,
section.Contact .Tab.Active
{
	background-color: rgba(0,0,0,0.5);
}

section.Contact .TabContent
{
	display: none;
	width  : 65%;
	margin : 0 auto;
	color  : white;
	overflow: hidden;
	word-wrap:normal;
}

section.Contact .TabContent.Active
{
	display: block;
}

section.Contact .TabContent p
{
	display            : block;
    margin-block-start : 1em;
    margin-block-end   : 1em;
    margin-inline-start: 0px;
    margin-inline-end  : 0px;
}

section.Contact .TabContent strong
{
	font-weight: 900;
}

/*Smartphone*/
@media (max-width : 767px)
{
	section.Contact .TabContent
	{
		width  : 92vw;
	}

	section.Contact .Tabs
	{
		width: 90%;
		height: 45px;
		margin:0 auto;

	}
}

/**
 * @Author: andreasprietzel
 * @Date:   2018-04-30T10:39:11+02:00
 * @Last modified by:   andreasprietzel
 * @Last modified time: 2018-04-30T10:39:12+02:00
 */

/**
 * @Author: andreasprietzel
 * @Date:   2018-04-30T10:40:38+02:00
 * @Last modified by:   andreasprietzel
 * @Last modified time: 2020-07-13T09:50:39+02:00
 */

body
{
	font-family           : "Roboto mono", "Verdana", "Helvetica Neue";
	-webkit-font-smoothing: antialiased;
	background            : black;
	font-weight           : 600;
	font-size             : 12px;
}

#wrapper
{
	overflow-x: hidden;
}


.invisible
{
	display: none;
}

section
{
	position: relative;
}

h2
{
	/*font-size   : 2.5em;*/
	margin-top    : 60px;
	margin-bottom : 48px;
	color         : white;
	text-align    : center;
	width         : 100%;
	font-size     : 48px;
	font-weight   : 900;
	text-transform: uppercase;
}

a:focus
{
	outline: none;
}

.GridTemplateColumns
{
	display              : grid;
	grid-template-columns: 12% auto 12%;
	grid-template-rows   : auto;
}

.NOTD
{
	-webkit-transition : none;
	-moz-transition    : none;
	-o-transition      : none;
	-ms-transition     : none;
	transition         : none;
}

.TD150
{
	-webkit-transition : 150ms all ease-out;
	-moz-transition    : 150ms all ease-out;
	-o-transition      : 150ms all ease-out;
	-ms-transition     : 150ms all ease-out;
	transition         : 150ms all ease-out;
}

.TD300
{
	-webkit-transition : 300ms all ease-out;
	-moz-transition    : 300ms all ease-out;
	-o-transition      : 300ms all ease-out;
	-ms-transition     : 300ms all ease-out;
	transition         : 300ms all ease-out;
}

.TD600
{
	-webkit-transition : 600ms all ease-out;
	-moz-transition    : 600ms all ease-out;
	-o-transition      : 600ms all ease-out;
	-ms-transition     : 600ms all ease-out;
	transition         : 600ms all ease-out;
}

.TD1000
{
	-webkit-transition : 1000ms all ease-out;
	-moz-transition    : 1000ms all ease-out;
	-o-transition      : 1000ms all ease-out;
	-ms-transition     : 1000ms all ease-out;
	transition         : 1000ms all ease-out;
}

.Flexbox
{
	display: flex;
}

.FlexDirectionCol
{
	flex-direction: column;
}

a:visited,
a
{
	color: white;
}

/*
    Desktop
    1680px = 0.875%
*/
@media (min-width : 1680px) AND (max-width: 1919px)
{
}

/*
    Desktop small
    1440px* = 0.75%
*/
@media (min-width : 1440px) AND (max-width: 1679px)
{
	/*.GridTemplateColumns
	{
		display              : grid;
		grid-template-columns: 12% auto 12%;
		grid-template-rows   : auto;
	}*/
}

/*
    Desktop extra small (oder landscape tablet?)
    1200px = 0.625%
*/
@media (min-width : 1200px) AND (max-width: 1439px)
{
}

/*
    Tablet landscape
    960px = 0.5%
    Bootsrap geht bis 992px statt 960px...
*/
@media (max-width: 1199px)
{
	.GridTemplateColumns
	{
		display              : grid;
		grid-template-columns: 2% auto 2%;
		grid-template-rows   : auto;
	}
}

/*
    Tablet portrait
    720px = 0.375%
    Bootsrap geht bis 991px statt 959px...
*/
@media (min-width : 720px) AND (max-width: 991px)
{
}

/*
    Tablet small, Smartphone big;
    480px = 0.25%
*/
@media (min-width : 480px) AND (max-width: 719px)
{
}

/*
    Smartphone
    240px = 0.125%
*/
@media (min-width : 0px) AND (max-width: 479px)
{
}

/*Smartphone*/
@media (max-width : 767px)
{
	h2
	{
		margin-top    : 30px;
		margin-bottom : 28px;
		font-size     : 24px;
	}
}

/**
 * @Author: andreasprietzel
 * @Date:   2018-02-07T13:39:59+01:00
 * @Last modified by:   andreasprietzel
 * @Last modified time: 2018-05-10T19:07:47+02:00
 */

.UIAccordion .SortLetter
{
	font-size: 13px;
	font-weight: 500;
}

.UIAccordion h1,
.UIAccordion h2,
.UIAccordion h3,
.UIAccordion h4
{
	height     : 64px;
    cursor     : pointer;
	margin     : 0;
	padding    : 5px;
	font-size  : 23px !important;
	line-height: 64px;
}

.AccordionHeading
{
    color                      : #909090 !important;
    border-radius              : 2px;
    font-size                  : 18px;
	color                      : white;
	line-height                : 34px;
    width                      : calc(100% - 12px);
	text-align                 : left;
	-webkit-transition-duration: 300ms;
	-moz-transition-duration   : 300ms;
	-o-transition-duration     : 300ms;
	transition-duration        : 300ms;
	margin-top                 : 10px !important;
	-webkit-user-select        : none;
	-moz-user-select           : none;
	-ms-user-select            : none;
	user-select                : none;
	height                     : 64px;

}

.AccordionHeading i
{
	position: absolute;
	left: 25px;

}

.AccordionHeading .Function
{
	float: right;
}

.AccordionHeading.Open
{

}

.AccordionHeading:hover
{
    border-color: #46bf71;
	color: #46bf71 !important;
}

.AccordionContent
{
    padding: 15px;
	opacity: 1;
	transition: padding-top 300ms, padding-bottom 300ms, opacity 600ms;
}

.AccordionContent.ClosedAccordionContent
{
    padding: 0;
	opacity: 0;
}

.AccordionHeading::first-letter
{
    letter-spacing: 10px;
}


.ClosedAccordionContent
{
	transition   : padding-top 300ms, padding-bottom 300ms, opacity 100ms !important;
    opacity      : 0;
    height       : 0;
    overflow     : hidden;
    /*margin-left: 90px;*/
}

.fa-simple-plus:before
{
    content: "+";
}

.fa-simple-minus:before
{
    content    : "-";
	font-size  : 35px;
	line-height: 20px;
}

/**
 * @Author: andreasprietzel
 * @Date:   2018-05-10T19:56:26+02:00
 * @Last modified by:   andreasprietzel
 * @Last modified time: 2018-06-07T17:23:43+02:00
 */

.UIVisualTimeline
{
	display       : flex;
	flex-direction: column;
	overflow      : hidden;
}

.UIVisualTimeline .UIEntry
{
	overflow: hidden;
	position: relative;
	color: white;
	padding-bottom: 48px;
}

.UIVisualTimeline .UIEntry .UITimeBar
{
	width         : 288px;
	height        : 100%;
	float         : left;
	position      : absolute;
	pointer-events: none;
}

.UIVisualTimeline .UIEntry .UITimeBar > *
{
	margin-top: 12px;
}

.UIVisualTimeline .UIEntry .UITimeBar::after
{
	content         : " ";
    width           : 4px;
    background-color: white;
    position        : absolute;
    height          : 100%;
    left            : 50%;
    transform       : translateX(-50%);
	z-index         : 1;
}


.UIVisualTimeline .UIEntry .UITimeBar img
{
	width              : 48px;
    position           : absolute;
    left               : 50%;
    transform          : translateX(-50%);
    z-index            : 2;
	user-drag          : none;
	user-select        : none;
	-moz-user-select   : none;
	-webkit-user-drag  : none;
	-webkit-user-select: none;
	-ms-user-select    : none;
	border-radius      : 20%;
}

.UIVisualTimeline .UIEntry .UITimeBar .Time
{
	line-height: 46px;
    position   : absolute;
    right      : 192px;
	z-index    : 1;
}

.UIVisualTimeline .UIEntry .Content
{
	padding-left           : 192px;
    padding-right          : 24px;
    opacity                : 1;
    padding-top            : 12px;
    padding-bottom         : 12px;
	background-color       : rgba(255,255,255,0.2);
	border-radius          : 12px;
	-webkit-backdrop-filter: blur(25px);
}

.UIVisualTimeline .UIEntry .Content.IsHidden
{
	opacity: 0;
}

.UIVisualTimeline .UIEntry .Content .Tech
{
	margin-top: 30px;
	height    : 48px;
}

.UIVisualTimeline .UIEntry .Content .Tech .Icon
{
	height             : 32px;
	display            : inline-block;
	margin-left        : 5px;
	margin-right       : 5px;
	top                : 50%;
    position           : relative;
    transform          : translateY(-50%);
	user-drag          : none;
	user-select        : none;
	-moz-user-select   : none;
	-webkit-user-drag  : none;
	-webkit-user-select: none;
	-ms-user-select    : none;
}

.UIVisualTimeline .UIEntry h3
{
	height       : 60px;
	font-size    : 20px;
	font-weight  : 600;
	display      : inline-block;
	top          : 12px;
	position     : relative;
	width        : 60%;
	margin-bottom: 20px;
}

.UIVisualTimeline .UIEntry .Content .Category
{
/*	float      : right;*/
	line-height: 45px;
	position   : absolute;
    right      : 24px;
    top        : 12px;
}

.UIVisualTimeline .UIEntry .Description
{
	line-height: 23px;
	text-align : justify;
}

.UIVisualTimeline .UIEntry .Content .Value
{
	float: right;
}

.UIVisualTimeline .UIEntry .Content .Key
{
	font-weight: 900;
}

.UIVisualTimeline .UIEntry .Content .Gallery img,
.UIVisualTimeline .UIEntry .Content .Gallery video
{
	width       : 64px;
	margin-right: 5px;
	cursor      : pointer;
}

/**
 * @Author: andreasprietzel
 * @Date:   2018-03-22T14:22:51+01:00
 * @Last modified by:   andreasprietzel
 * @Last modified time: 2018-06-02T13:11:44+02:00
 */



.UIPlaceholderInput,
.UIPlaceholderTextarea
{
	position: relative;
}

.widget.widget-text  hr
{
	/*display: none;*/
}


.UIPlaceholderInput .Placeholder,
.UIPlaceholderTextarea .Placeholder
{
	position      : absolute;
	top           : 20px;
	left          : 10px;
	font-size     : 16px;
	line-height   : 16px;
	color         : #7b7b7b;
	pointer-events: none;
	transition    : all .25s ease
}

.UIPlaceholderInput .Placeholder.Required:after,
.UIPlaceholderTextarea .Placeholder.Required:after
{
	color   : #e3051b;
	content : "*";
	position: absolute;
	right   : -10px;
	top     : 0;
}

.UIPlaceholderInput.Filled .Placeholder,
.UIPlaceholderTextarea.Filled .Placeholder
{
	top      : 4px;
	font-size: 11.2px
}

.UIPlaceholderInput.Filled input
{
	padding-top: 16.67px;
}

.UIPlaceholderInput input
{
	padding-top: 16.67px;
}

.UIPlaceholderTextarea textarea
{
	padding-top: 24px !important;
}

/**
 * @Author: andreasprietzel
 * @Date:   2020-07-05T13:58:38+02:00
 * @Last modified by:   andreasprietzel
 * @Last modified time: 2020-07-12T19:08:53+02:00
*/

.NSNFCardStack
{
	position        : relative;
	height          : 600px;
	display         : grid;
	grid-template-columns: 20% 20% 20% 20% 20%;
	flex-direction  : row;
	width           : 100%;
	font-family     : "Lato";
	justify-content : space-around;
	padding-bottom  : 40px;
}

.LanguageCard
{
	margin:0 auto;
	position: relative;
	width: 300px;
	border-radius: 19px;
	background-color: transparent;
	margin-top: 80px;

	height: 411px;
	box-shadow: -1px 15px 30px -12px black;
	transform: scale(0.9);
	transition-duration: 300ms;
}

.RotateLayer
{
	transition-duration: 300ms;
	z-index: 2;
}

.LanguageCard:hover
{
	transform: scale(1.1) !important;
	z-index: 2;
}

.RotateLayer:hover
{
	transform: rotate(0)!important;
}

.LanguageCard .Description
{
	padding-top: 15px;
	height: 160px;
	background-color: white;
}

.LanguageCard .Header
{
	height          : 175px;
	background-size : 100%;
	border-top-left-radius : 19px;
	border-top-right-radius : 19px;
	background-color: silver;
}

.LanguageCard .Stats > div
{
	background-color: silver;
}

.LanguageCard .Header .Image
{
	width              : 100%;
	height             : 100%;
	background-size    : 75%;
	background-repeat  : no-repeat;
	position           : relative;
	top                : -45px;
	right              : 15px;
	background-position: right;
}

.LanguageCard.JavaScript .Header
{
	background-image: url('../../files/NSNFCodestats/JS-Background.jpg');
}

.LanguageCard.JavaScript .Header .Image
{
	background-image   : url(../../files/NSNFCodestats/JS-Foreground.png);
}

.LanguageCard.PHP .Header .Image
{
	background-image   : url(../../files/NSNFCodestats/PHP-Foreground.png);
}

.LanguageCard.CSS .Header .Image
{
	background-image   : url(../../files/NSNFCodestats/CSS-Foreground.png);
    height             : 140%;
    background-size    : 55%;
}

.LanguageCard.Go .Header .Image
{
	background-image   : url(../../files/NSNFCodestats/GO-Foreground.png);
	height             : 140%;
    background-size    : 55%;
}

.LanguageCard.HTML .Header .Image
{
	background-image   : url(../../files/NSNFCodestats/HTML-Foreground.png);
	height             : 140%;
    background-size    : 55%;
}

.LanguageCard.PHP .Header
{
	background-image: url(../../files/NSNFCodestats/PHP-Background.jpg);
}

.LanguageCard.CSS .Header
{
	background-image: url(../../files/NSNFCodestats/CSS-Background.jpg);
}

.LanguageCard.Go .Header
{
	background-image: url(../../files/NSNFCodestats/GO-Background.jpg);
}

.LanguageCard.HTML .Header
{
	background-image: url(../../files/NSNFCodestats/HTML-Background.jpg);
}


.LanguageCard.PHP .Stats > div
{
	background-color: #4e76a7;
}

.LanguageCard.JavaScript .Stats > div
{
	background-color: #f7df1e;
}

.LanguageCard.CSS .Stats > div
{
	background-color: #465390;
}

.LanguageCard.Go .Stats > div
{
	background-color: #6ad7e5;
}

.LanguageCard.HTML .Stats > div
{
	background-color: #b74b31;
}

.LanguageCard .LanguageName
{
	font-size: 36px;
	color: black;
	font-weight: 900;
	width: 100%;
	text-align: center;
}

.LanguageCard .LanguageLevel
{
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 700;
	margin-top: 40px;
}

.LanguageCard .Stats
{
	border-bottom-left-radius : 19px;
	border-bottom-right-radius : 19px;
	width: 100%;
	position: relative;
}

.LanguageCard .Stats > div
{
	width: 50%;
	padding: 20px 15px;
	float:left;
	color:white;
	/*text-shadow: 0 0 1px black, -1px 0 1px black, -1px -1px 1px black, 1px 0 1px black,1px 1px 1px black;*/

	text-shadow:
     -1px -1px 0 #000,
      1px -1px 0 #000,
      -1px 1px 0 #000,
	  -1px 0px 0 #000,
       1px 1px 0 #000;

	   -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.LanguageCard .Stats > div:first-child
{
	border-bottom-left-radius : 19px;
	border-right: 1px solid black;
}

.LanguageCard .Stats > div:last-child
{
	border-bottom-right-radius : 19px;
}

.LanguageCard .Stats .Key,
.LanguageCard .Stats .Value
{
	width: 100%;
	text-align: center;
	text-transform: uppercase;
}

.LanguageCard .Stats .Key
{
	font-size: 12px;
	font-weight: 400;
}

.LanguageCard .Stats .Value
{
	font-size: 24px;
	font-weight: 700;
}

@media screen and (max-width: 1700px)
{
	.LanguageCard
	{

		-webkit-transform: scale(0.8);
	}

	.LanguageCard:hover
	{
		transform: scale(1.0) !important;
		z-index: 2;
	}
}

@media screen and (max-width: 1550px)
{
	.LanguageCard
	{
		-webkit-transform: scale(0.65);
	}

	.LanguageCard:hover
	{
		transform: scale(0.9) !important;
		z-index: 2;
	}
}

@media screen and (max-width: 1400px)
{
	.LanguageCard
	{
		-webkit-transform: scale(0.5);
	}

	.LanguageCard:hover
	{
		transform: scale(0.8) !important;
		z-index: 2;
	}
}

@media screen and (max-width: 1250px)
{
	.NSNFCardStack
	{
		height: auto;
	}

	.LanguageCard
	{
		-webkit-transform: scale(0.8);
	}

	.LanguageCard:hover
	{
		transform: scale(0.8) !important;
		z-index: 2;
	}

	.NSNFCardStack
	{
		grid-template-columns: 50% 50%;
	}
}


@media screen and (max-width: 600px)
{
	.LanguageCard
	{
		-webkit-transform: scale(1);
	}

	.LanguageCard:hover
	{
		transform: scale(1.1) !important;
		z-index: 2;
	}

	.NSNFCardStack
	{
		grid-template-columns: 100%;
	}
	.RotateLayer
	{
		transform: rotate(0) !important;
	}
}