/*
== Color Notes ==

Base BG Back Color:
rgb (46, 179, 152) 
rgba (46, 179, 152, 0.5) 


== Font styles ==

Source Sans Pro:

Extra-Light 200
Light       300
Normal      400
Semi-Bold   600
Bold        700
Ultra-Bold  900

*/

/* Self-hosted Fonts (GDPR / DSGVO compliant - no Google Fonts request needed) */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat/Montserrat-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../font/Source_Sans_Pro/SourceSansPro-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../font/Source_Sans_Pro/SourceSansPro-Regular.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../font/Source_Sans_Pro/SourceSansPro-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../font/Source_Sans_Pro/SourceSansPro-Italic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../font/Source_Sans_Pro/SourceSansPro-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* additional canvas styling*/

canvas {
    position:absolute;
    left:0;
    top:0;
    z-index:0;
  }

#wrapper{
    position: relative;
    z-index:1;
}
 

/* typed-cursor styling*/

.typed-cursor {
    font-size: 3.5em;
}

#typed-strings {
    height: 4.6em;
}

#typed {
    display: block;
    float: left;
}


/* remove browser formats*/
* {
    margin: 0;
    padding: 0;
}


body {
    font-family: 'Source Sans Pro', Arial, sans-serif;
    font-weight:400;
    color: rgb(236, 236, 236);
    background-color: #20437b;
} 



/* Attention: in case of non loaded random BG CSS Use same BG color here!*/
.subHeadBG {
    background-color: #20437b;
}

/* LINKS definieren */
	a:link {
		text-decoration: none;
		color: white;
	}
	a:visited {
		text-decoration: none;
		color: white;
	}
	a:hover {
		color: #20437b;
        cursor: pointer;
	}

    a span {
        border-width: 0px 0px 1px;
        border-style: solid;
        width: 100%;
        position: relative;
    }
    a span:hover {
        background-color: #ffffff;
        color: black;
        cursor: pointer;
    }
/* LINKS definieren ENDE */

p {
    color: #FFFFFF;
    font-size: 1.09em;
    font-weight: 500;
    line-height: 1.5em;
}

.h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 5.5em;
    font-size: 5em;
    line-height: 1em;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    margin-left: -0.06em;
}

h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.84em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.003em;
    padding-top: 0.5em;
/*    text-decoration-line: underline;*/
/*    GIVE THE UNDERLINE MORE DISTANCE*/
/*    MAKE ALL WEIGHTS THE RIGHT EM*/
}

h2 span {
    text-decoration: none;
    position: relative;
}

h2 span:after {
    content: '';

    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;

    border-width: 0 0 2px;
    border-style: solid;
}

h2 span:hover {
    cursor: pointer;
}



.IconsSubCat{
    font-size: 1.4em;
    text-align: center;
    width: 100%;
    padding-top: 0.5em;
}

.IconsContact{
    font-size: 1.4em;
    text-align: center;
    width: 100%;
    line-height: 1.7em;
}

.IconContactDiv{
    width: 2.55em;
    height: 2.55em;
    float: left;
    margin-right: 5px;
    background-color: rgba(255,255,255, 0.4) !important;
}
.IconContactDiv:hover{
    background-color: rgba(255,255,255, 0.9) !important;
}


.smallIcons {
    float: left;
    padding-top: 0.4em;
    padding-right: 0.6em;
}

.bodytextIcon{
    padding: 0em 0.1em 0em 0.1em;
    font-size: 0.8em;
}


.subheadDiv {
    width: 100%;
    text-align: center;
    padding-top: 0.2em;
}

.subheadDiv span{
    padding-left: 1em;
    padding-right: 1em;
}

.lineSubHead {
    width: 100%;
    border-bottom: 1px solid;
    margin-top: -0.69em;
    margin-bottom: 1.5em;
}

.colleft{
    float: left;
    width: 50%;
/*    background-color: fuchsia;*/
}
.colright{
    float: right;
    width: 50%;
}
.colfull{
    clear: both;

}
.clearboth {
    clear: both;
}

#content {
    padding-top: 100px;
    max-width: 600px;
    margin: auto;
}

.profilePicture {
    height: 250px;
    float: right;
}


/*ADDING SOME RESPONSIVE RULES*/
@media (max-width:630px) { 
    
    #content {padding: 5% !important;
    }
    
    .colleft {
        clear: both;
        width: 100% !important;
    }
    .colright {
        clear: both;
        width: 100% !important;
    }

    .profilePicture {
        display: block;
        margin-left: auto;
        margin-right: auto;
        float: none;
    }


}


/* Adding some fancy css rules
/*
/*
/* Marker Effect
*/
::selection {
    background: #ffffff;
    color: black;
}
/* Firefox */
::-moz-selection {
    background-color: #ffffff;
    color: black;
}
    
/* blinking cursor here you go 
*/
.typed-cursor{
	opacity: 1;
	-webkit-animation: blink 0.7s infinite;
	-moz-animation: blink 0.7s infinite;
	animation: blink 0.7s infinite;
}
@keyframes blink{
	0% { opacity:1; }
	50% { opacity:0; }
	100% { opacity:1; }
}
@-webkit-keyframes blink{
	0% { opacity:1; }
	50% { opacity:0; }
	100% { opacity:1; }
}
@-moz-keyframes blink{
	0% { opacity:1; }
	50% { opacity:0; }
	100% { opacity:1; }
}