/* Box Model Hack */
* {
     -moz-box-sizing: border-box;
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

/******************************************
/* BASE STYLES
/*******************************************/
:root {
    --darkest: #03045e;     /*eg. h1,h4 color*/
    --dark3: #023e8a;
    --dark2: #0077b6;       /*eg. selected color, hoovered color*/
    --dark1: #0096c7;
    --medium: #00b4d8;      /*eg. header from dark to lightest background*/
    --light1: #48cae4;
    --light2: #90e0ef;      /*eg. footer from dark to lightest background*/
    --light3: #ade8f4;
    --lightest: #caf0f8     /*eg. background color*/
}
html {
    font-size: 62.5%;
    color: black;
}
body {
    font-family: "Roboto", "Helvetica", sans-serif;
    font-weight: 500;
    background-color: var(--lightest);
}
h1 {
    font-size: 4rem;
    color: var(--darkest);
}
h2 {
    font-size: 2rem;
    color: var(--darkest);
    line-height: 3rem;
}
h4 {
    font-size: 1rem;
    color: var(--darkest);
}
p {
    font-size: 2rem;
}
a {
    font-size: 2rem;
    text-decoration: none;
}
a, a:visited, a:active {
    color: var(--dark2);
}
a.select {
    color: var(--medium);
}
a:hover {
    color: var(--medium);
}
li {
    list-style: none;
    font-size: 2rem;
}
.bold {
    font-weight: bold;
}
.impressum {
    font-size: 1.5rem;
}
.impressumSite > main {
    margin: 0 20%;
}
.impressumSite > main > * {
    text-align: center;
}
.bold {
    font-weight: bold;
}
.distanceTop {
    margin-top: 100px;
}
.distanceMedium {
    margin-top: 200px;
}
.distanceSmall {
    margin-top: 40px;
}
.noMarginPadding {
    margin: 0;
    padding: 0;
}

/******************************************
/* Header
/*******************************************/
header {
    background: linear-gradient(to bottom, var(--light2), var(--lightest));
    display: flex;
    width: 100%;
}
header h2 {
    font-size: 1.5rem;
    text-align: left;
}
header > .topheader  {
    margin: 0;
    padding: 0;
    width: 30%;
    display: flex;
    justify-content: flex-start;
}
header > .topheader > a {
    width: 15%;
}
header > .topheader > div {
    margin: 20px 40px;
    width: 85%;
}
.headerImage {
	width: 500%;
    padding: 20px;
}
header > nav {
    width: 70%;
    margin-right: 15px;
}
header li:hover {
    transform: translateY(-5px);
    transition: all 1s;
}
.topheader h1, .topheader h2 {
    margin: 0;
    padding: 0;
}
.topheader h1 {
    font-size: 4rem;
}
.navlist {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: baseline;
    margin: 25px 0;
    padding: 0;
}
.navlist > li {
    padding: 0 1.5%;
}
.navlist > a {
    padding: 0 0.5%;
}
.navlist a {
    font-size: 2.5rem;
    font-weight: bold;
}
nav img  {
    position: relative;
    height: 3rem;
    top: 7px;
}
img.smallFlag {
    position: relative;
    height: 5rem;
    width: 5rem;
    margin-bottom: 0;
    top: 22px;
    text-align: left;
}

/******************************************
/* Footer
/*******************************************/
footer{
    display:block;
    background: linear-gradient(to top, var(--light2), var(--lightest));
    position: absolute;
    bottom: 0;
    width:100%;
    padding: 1% 1%;
}
footer > * {
    display: inline;
    padding: 0 1%;
}
footer i {
    font-size: 3rem;
    color: var(--darkest);
}
footer p i {
    font-size: 1.5rem;
}
footer p {
    float:right;
    font-size: 1.5rem;
    margin-right: 2%;
}
footer a > i:hover {
    color: var(--dark2);
    transform: translateY(-10px);
    transition: all 1s;
}
footer svg {
    max-width: 2.7rem;
    height: auto;
}
footer svg:hover {
    transform: translateY(-10px);
    transition: all 1s;
}
footer .wrapperSVG {
    color: var(--darkest);
    display: inline;
    position: relative;
    top: 2px;
}
footer .wrapperSVG:hover {
    color: var(--dark2);
}
.normalEnd {
    clear:both;
    position: static;
    display: block;
    padding-top: 50px;
}


/******************************************
/* Main
/*******************************************/
.welcomeBody > * {
    float:left;
}
.welcomeSite {
    width: 60%;
    text-align: center;
}
.welcomeSite:first-of-type, .welcomeSite:last-of-type {
    width: 20%;
}
.welcomeSite span {
    color: var(--dark3);
    font-size: 4rem;
    line-height: 2rem;
}
.welcomeSite h2 img {
    width: 10%;
    position: relative;
    top: 8px;
}

.welcomeLeft span, .welcomeRight span {
    display: block;
    font-size: 1.5rem;
    margin-top: -5%;
}
.welcomeLeft img, .welcomeRight img {
    max-width: 70%;
    margin-top: 40%;
    margin-left: 10%;
    border-radius: 40%;
}
.welcomeLeft span, .welcomeRight span{
    width: 50%;
    margin-left: 30%;
    font-weight: bold;
}
.welcomeRight span {
    position: relative;
    top: 200px;
    padding: 1.5rem;
}
.welcomeRight span.headline {
    font-size: 2.5rem;
    line-height: 3rem;
}
.welcomeLeft span:hover {
    color: var(--dark2);
}
.welcomeSite > * {
    margin: 5% 0;
    line-height: 6rem;
}
.welcomeSite h1 {
    padding-top: 0;
    color: black;
    font-size: 8rem;
    line-height: 8rem;
}
.welcomeSite h2 {
    font-size: 3rem;
    margin: 60px 0;
    padding: 0;
}


/******************************************
/* Article
/*******************************************/
article {
    margin: 1% 25%;
}
article * {
    text-align: center;
    /*display: block;*/
    padding: 1%;
}
article p {
    border-bottom: 1px solid var(--medium);
    border-right: 1px solid var(--medium);
    box-shadow: 10px 10px 15px var(--medium);
    line-height: 4rem;
    padding: 2%;
}
article p.noShadow {
    border: none;
    box-shadow: none;
}
article h2 {
    font-size: 2rem;
    margin: 5% 0 2% 0;
}
article h2.Shadow {
    border-bottom: 1px solid darkgrey;
    border-right: 1px solid darkgrey;
    box-shadow: 10px 10px 15px var(--light2);
}
article span {
    display:inline;
    font-size: 2.5rem;
    border: 2px solid var(--dark3);
    border-radius: 60%;
    box-shadow: 5px 5px 10px var(--light2);
    padding: 0 1%;
    margin: 0 1.5%;
    color: var(--dark3);
    font-weight: bold;
}
article img {
    width: 100%;
    margin-bottom: 5%;
}
article img.smaller {
    width: 75%;
    /*margin: 0 10% 0 20%;*/
}
article li {
    list-style-type: decimal;
    text-align: left;
    margin: 0 20%;
}
.greater10 {
    padding: 0 0.5%;
}


/******************************************
/* Layout
/*******************************************/
.layoutMain {
    margin: auto 10%;
    margin-top: 50px;
    margin-bottom: 30px;
}
.layoutMain h1 {
    color: var(--darkest);
    font-size: 3rem;
    display: inline;
    font-style: italic;
}
.layoutMain div {
    text-align: center;
}
.layoutMain .mainHeader {
    margin: 20px;
}
.layoutMain h3 {
     font-size: 2rem;
}
.layoutMain a img, .layoutMain h1 {
    display: inline;
}
.layoutMain a {
    color: var(--dark2);
    text-decoration: none;
    font-size: 2.5rem;
    border-radius: 5%;
}
.layoutMain h1 a {
    font-size: 3.5rem;
}
.layoutMain h1 .fa-envelope {
    padding: 0 7px;
    position: relative;
    top: 4px;
}
.layoutMain h1 .fa-file-pdf {
    padding: 0 5px;
    /*position: relative;*/
    /*top: 4px;*/
}
.layoutMain .leonnoel {
    position: relative;
    top: 5px;
    left: 5px;
    width: 30px;
}
.layoutMain .javascript30 {
    position: relative;
    width: 120px;
    top: 5px;
}
.wesbos {
    position: relative;
    top: 3px;
}

.layoutBody > div {
    margin: 0 10%;
}
.layoutSection img {
    max-width: 100%;
    max-height: 70%;
    display: block;
    margin: 0 auto;
}
.layoutSection {
    float: left;
    text-align: center;
    width: 47%;
    border-bottom: 1px solid darkgrey;
    border-right: 1px solid darkgrey;
    box-shadow: 10px 10px 15px var(--light3);
    height: 40rem;
    margin: 3% 1%;
}
.layoutSection span{
     font-size: 2rem;
     display: block;
     padding: 1rem;
     margin-top: -3rem;
     margin-bottom: 0.5rem;
     color: black;
}
.layoutSection a {
    font-size: 2.5rem;
}
.layoutSection:hover {
    transform: scale(0.9);
    transition: 1.5s ease;
    background: var(--light2);
}
.underContruction {
     color: red;
}

@media screen and (max-width: 60rem) {
.layoutSection img, .layoutMain img {
          max-height: 27rem;
          max-width: 20rem;
     }
}


/******************************************
/* Financetools Main, Financetools Details
/*******************************************/
.financeToolsMain > section {
    margin: 0 5% 0 10%;
    text-align: center;
}
.financeToolsMain > section > section {
    float: left;
    width: 25%;
    padding: 1%;
    margin: 2%;
    border-bottom: 1px solid darkgrey;
    border-right: 1px solid darkgrey;
    box-shadow: 10px 10px 15px var(--light3);
    height: 600px;
}
.financeToolsMain > section > section span {
    display: block;
}
.financeToolsMain > section > section img {
    width: 100%;
}
.financeToolsMain > section > section h2 {
    font-size: 3rem;
}
.financeToolsMain > section > section span,
.financeToolsDetail > main > div span {
    display: inline-block;
    font-size: 2rem;
    text-align: center;
    border-radius: 10%;
    padding: 2%;
    margin: 2%;
    border-bottom: 1px solid darkgrey;
    border-right: 1px solid darkgrey;
    box-shadow: 10px 10px 15px var(--light3);
    background-color: #c9dbe6;
}

.financeToolsMain > section > section span:hover {
    transform: translateY(-5px);
    transition: 1s;
}

.financeToolsMain > section > section span.buy,
.financeToolsDetail > main > div span.buy {
    background-color: #f8f8bb;
}
.financeToolsMain > section > section p {
    font-size: 1.8rem;
    text-align: justify;
}
.financeToolsMain > section > section p.center {
    font-size: 2rem;
    text-align: center;
}
.financeToolsMain .mainHeader h1 {
    display: inline;
}
.financeToolsMain .mainHeader img {
    position: relative;
    top: 15px;
    left: 20px;
    width: 3%;
}
.financeToolsMain .mainHeader h2 span {
    color: #ff6468;
}
.financeToolsMain section li {
    font-size: 1.5rem;
}
.financeToolsDetail > main > div {
    float: left;
    width: 45%;
    padding: 1% 2%;
    height: 1100px;
}
.financeToolsDetail > main > div:last-of-type > * {
    text-align: left;
}
.financeToolsDetail main h2 {
    margin-top: 5%;
    font-size: 4rem;
}
.financeToolsDetail h3 {
    font-size: 3rem;
    padding-top: 5%;
    margin: 0;
    text-align: center;
}
.financeToolsDetail > main > div:last-of-type {
    float: left;
    border-bottom: 1px solid darkgrey;
    border-right: 1px solid darkgrey;
    box-shadow: 10px 10px 15px var(--light3);
    height: 100%;
}
.financeToolsDetail > main img {
    width: 100%;
}
.financeToolsDetail > main > div > a:first-of-type > span {
    /*margin-left: 10%;*/
}
.financeToolsDetail > main > div span {
    font-size: 3rem;
    padding: 2%;
    border-radius: 10%;
}
.financeToolsDetail > main p {
    padding: 1% 0;
    line-height: 2.7rem;
}
.financeToolsDetail > main ul li p {
    padding: 1rem;
    margin: 0;
}
.financeToolsDetail > main ul li p.detail {
    margin-bottom: 3%;
}
.financeToolsDetail > main p.titleList {
    margin-top: 5%;
}
.financeToolsDetail main li {
    list-style-type: circle;
    line-height: 3rem;
}
.financeToolsDetail .videoContainer {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
.financeToolsDetail .videoContainer iframe {
    position: absolute;
    top: 0;
    left: 20%;
    width: 60%;
    height: 55%;
}
.financeToolsDetail .operatingSystem i {
    font-size: 4rem;
    padding: 0 7%;
    float: right;
}
.financeToolsDetail .operatingSystem {
    width: 20%;
    float: right;
    padding-top: 4%
}
.financeToolsDetail .iconFAQ img {
    width: 5%;
    padding: 0 20px;
    position: relative;
    top: 10px;
}
.financeToolsDetail .addPics {
    margin: 2rem auto;
    display: block;
    width: 75%;
}



/******************************************
/* Technikhilfe
/*******************************************/
.mainContent {
    text-align: center;
    margin: 0 20%;
}
.mainContent > * {
    margin: 4% 0;
    line-height: 3rem;
}
.detailContent {
    clear: both;
    margin:0 12% 0 18%;
}
.detailContent > section {
    margin: 1%;
    max-width: 45%;
    width: 45%;
    float: left;
    height: 200px;
    background-position: center;
}
.detailContent .secWin10Install {
    background-image: url("../images/homepage/windows.jpg");
}
.detailContent .secNodeMailGMail {
    background-image: url("../images/homepage/nodemailerGMail.png");
}
.detailContent .secMagentaWebmail {
    background-image: url("../images/homepage/mail.jpg");
    background-position: right;
}
.detailContent .secSpeedDial {
    background-image: url("../images/homepage/fvd.jpg");
}
.detailContent .secHTML {
    background-image: url("../images/homepage/html.png");
}
.detailContent .secPythonFacebook {
    background-image: url("../images/homepage/pythonFacebookAutoPost.png");
}
.detailContent .secSeniorsPC {
    background-image: url("../images/homepage/seniorsPC.jpg");
}
.detailContent .secCSS {
    background-image: url("../images/homepage/css.png");
}
.detailContent .secJavaScript {
    background-image: url("../images/homepage/javascript.jpg");
}
.detailContent .secPython {
    background-image: url("../images/homepage/pythonLearn.jpg");
}
.detailContent .secGIT {
    background-image: url("../images/homepage/git.jpg");
}
.detailContent .secSQL {
    background-image: url("../images/homepage/sqlBanner.png");
}
.detailContent span {
    display: block;
    color: var(--darkest);
    font-size: 3rem;
    font-weight: bold;
    padding: 5%;
}
.detailContent span.sectionDetail {
    display: block;
    color: var(--darkest);
    font-size: 2rem;
    font-weight: normal;
    padding-top: 0;
    padding-bottom: 0;
}


/******************************************
/* FAQ, KundenFeedback
/*******************************************/
.faq .mainHeader h1, .feedback .mainHeader h1 {
    display: inline;
}
.faq .mainHeader img, .feedback .mainHeader img {
    position: relative;
    /*top: 15px;*/
    /*left: 20px;*/
    width: 15%;
}
.faq .mainHeader, .feedback .mainHeader {
    text-align: center;
    margin-bottom: 50px;
}
.faq article, .feedback article {
    width: 60%;
    text-align: center;
    margin: 3% auto;
    border-bottom: 1px solid var(--medium);
    border-right: 1px solid var(--medium);
    box-shadow: 10px 10px 15px var(--medium);
}

.faq article {
    line-height: 4rem;
    padding: 2%;    
}

.faq article p, .feedback article p {
    text-align: left;
    padding: 0;
    margin: 1.5rem 0;
    border-bottom: none;
}
.faq article .firstLetter, .feedback article .firstLetter {
    font-size: 4rem;
    padding: 0;
    margin: 0;
}
.faq article li, .feedback article li {
    width: 100%;
    margin: 0;
}

/******************************************
/* MarkDownMonster
/*******************************************/
.markdownMonster h1 {
    font-size: 4rem;
}
.markdownMonster h4 {
    font-size: 3rem;
    padding: 0;
    margin: 0;
}
.markdownMonster h4.ankiLine {
    display: inline;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}
section.ankiLine {
    margin: 0 auto;
    /*width: 60%;*/
}
.markdownMonster h2{
    font-size: 4rem;
    padding-top: 50px;
}
.markdownMonster p {
    font-size: 2.5rem;
    padding-top: 25px;
    margin: 0.5rem 0 1rem 0;
}
.markdownMonster pre {
    font-size: 2rem;
}
.markdownMonster a {
    padding: 0;
    margin: 0;
}
.markdownMonster > section > * {
    margin: 0;
    padding: 0;
    text-align: center;
}
.markdownMonster > section > p {
    padding-bottom: 1rem;
    font-size: 1.5rem;
}
.markdownMonster > section img {
    max-width: 2%;
    position: relative;
    top:5px;
}
.markdownMonster > section:first-of-type a:first-of-type {
    font-size: 3rem;
}
.markdownMonster section.ankiLine div.ankiLine {
    display: none;
}
.markdownMonster h4.ankiLine:hover + div.ankiLine {
    display: block;
    list-style: decimal;
}
.markdownMonster div.ankiLine {
    width: 30%;
    margin: 0 0 0 62%;
}
.markdownMonster div.ankiLine li {
    text-align: left;
    list-style: decimal;
    margin: 0;
    padding: 0;
}
.markdownMonster div.ankiLine ol {
    border-radius: 20px;
    border: 2px solid var(--dark3);
}
.markdownMonster .subNavList {
    width: 75%;
    margin: 2% auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-bottom: 2rem;
}
.markdownMonster .subNavList a {
    flex: 2;
    font-size: 2.5rem;
    font-weight: bold;
    margin: 0 10px;
    border-radius: 20px;
    border: 2px solid var(--dark3);
}
#MainContent {
    margin: auto 10%;
}

/******************************************
/* ThankYouBuy
/*******************************************/
.thankyouBuy main h1,h2 {
    text-align: center;
}
.thankyouBuy main h1 {
    font-size: 6rem;
}
.thankyouBuy main h2 {
    font-size: 2.5rem;
}
.thankyouBuy main img {
    width: 3%;
    position: relative;
    top:5px;
}
.thankyouBuy .subscribeButton {
    width: 6%;
}
.thankyouBuy main {
    width: 65%;
    margin: 0 auto;
}
.thankyouBuy main a {
    font-size: 2.5rem;
}
.thankyouBuy li {
    font-size: 2rem;
}
.thankyouBuy .fa-glass-cheers {
    font-size: 15rem;
}
.thankyouBuy .fa-laugh-beam {
    font-size: 6rem;
}
.thankyouBuy span {
    color: var(--medium);
}

/******************************************
/* GitHub Program
/*******************************************/
.gitHubProgram #MainContent li, a {
    list-style-type: disc;
    font-size: 2.5rem;
}
.gitHubProgram #MainContent h1 {
    font-size: 6rem;
}

/******************************************
/* Responsive
/*******************************************/
@media screen and (max-width: 1400px) {
    header {
        display: block;
    }
    header > .topheader  {
        width: 100%;
        text-align: center;
    }
    header > .topheader > a {
        width: 100%;
        display: inline;
    }
    header > .topheader img {
        width: 25%;
    }
    header > nav {
        width: 100%;
    }
    .navlist {
        margin: 0;
        padding: 0;
        justify-content: center;
    }
    footer {
        clear:both;
        position: static;
        display: block;
        padding-top: 50px;
    }
    article {
        margin: 1% 10%;
    }
    article img {
        width: 75%;
        margin: 0 10% 5% 10%;
    }
    .financeToolsMain > section > section h2 {
        font-size: 1.5rem;
    }
    .financeToolsMain > section > section p {
        font-size: 1.5rem;
        text-align: justify;
    }
    .financeToolsDetail h2 {
        font-size: 3rem;
    }
    .financeToolsDetail h3 {
        font-size: 2rem;
    }
    .financeToolsDetail > main p.titleList {
        font-size: 2rem;
    }
    .financeToolsDetail li {
        line-height: 2rem;
    }
    .financeToolsDetail > main > div {
        height: 1100px;
    }
    .welcomeRight span {
        top: 250px;
    }
}

@media screen and (max-width: 1000px) {
    header > .topheader img {
        width: 50%;
    }
    .header, .navlist {
        flex-direction: column;
    }
    .navlist {
        justify-content: center;
        align-items: center;
    }
    .navlist li {
        margin: 3px;
    }
    .financeToolsMain > section > section {
        height: 350px;
    }
    .financeToolsMain > section > section p {
        display: none;
    }
    .welcomeSite h1 {
        font-size: 3rem;
        line-height: 3rem;
    }
    .welcomeSite h2 {
        font-size: 2rem;
        line-height: 3rem;
    }
    .welcomeSite span {
        font-size: 2.5rem;
        line-height: 3rem;
    }
    .welcomeLeft span, .welcomeRight span {
        display: none;
    }
    footer i {
        font-size: 1.5rem;
    }
    footer svg {
    max-width: 1.5rem;
    height: auto;
    }
}