/* Custom CSS Stylesheet */

/*** *** *** *** *** *** Page: Index *** *** *** *** *** ***/

/*--GENERAL--*/

h1 {
    font-family: 'Kaushan Script', cursive;
    font-weight: 700;
    font-kerning: normal;
    color: inherit;
}

h2 {
    font-family: 'Open Sans Condensed', sans-serif;

}

h3 {
    font-family: 'Open Sans', sans-serif;
    color: white;
    text-align: justify;
    font-weight: 500;
}




ul {
    list-style-type: none;
}

ul > li {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;

}

.icon-block {
    padding: 0 15px;
}

.icon-block .material-icons {
    font-size: inherit;
}



/***--- --- --- HEADER --- --- ---***/

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 100;
}

.background {
    background-color: #f38081;
    height: 15vh;
}

.background > #logo-container > img {
    height: 15vh;
}

/***--- --- slide-nav --- ---***/

.slide-nav {
    z-index: 200 !important;
}

#slide-out {
    z-index: 200 !important;
}

#sidenav-overlay {
    z-index: 10 !important;
}

/***- --- --- MAIN --- --- ---***/

.section-divider {
    height: 3vh;
}

/***--- --- Section: home --- ---***/

#home {
    background-color: #f38081;
    height: 100vh;
    margin: 0;
}

#home > h4 {
    color: #f38081;
    text-transform: uppercase;
    height: 9vh;
    line-height: 9vh;
    margin-top: 9vh;
    padding-left: 1em;
}

.logo-front {
    margin-top: 6vh;
    height: 24vh;
}

#home > h1 {
    color: #f38081;
    margin-top: 6vh;
    height: 9vh;
    padding-right: 1em;
    line-height: 8vh;
    font-size: 3.5em;
    letter-spacing: 0.1em;
}

.arrow {
    background-color: #f38081;
    font-size: 4vh;
    margin-top: 9vh;
    z-index: 2;
}


.arrow > a > i {
    color: white;
    font-size: 6vh;
    line-height: 6vh;
}

#home > a {
    margin-bottom: ;
}



/***--- --- Sections: about, services, work, contact - common properties --- ---***/

#about,
#work {
    top: 0;
    bottom: 0;
}

.about-title,
.services-title,
.work-title,
.blog-title {
    background-color: #f1f1f1;
    color: #f38081;
    height: 30vh;
    top: auto;
    bottom: 0;
}

.contact-title {
    background-color: #f38081;
    color: #f1f1f1;
    height: 30vh;
    bottom: 0;
}

#impressum {
    background-color: #f38081;
    color: #f1f1f1;
    bottom: 0;
}




.work-title > h2,
.contact-title > h2 {
    font-family: 'Kaushan Script', cursive;
    color: white;
}

.about-title > h2,
.services-title > h2,
.work-title > h2,
.blog-title > h2 {
    font-family: 'Kaushan Script', cursive;
    color: #f38081;
}

.about-content,
.work-content,
.contact-content {
    background-color: transparent;

}

.work-content {
    background-color: #f1f1f1;
}

/***--- --- Section: about --- ---***/

.about-me-title,
.skills-title,
.services-title-q,
.blog-title-q {
    background-color: #f38081;
}

.about-me-title > h3,
.skills-title > h3 .contact-title-q > h3 {
    color: whitesmoke;
}

.avatar {
    z-index: 3;
    border-radius: 50%;
}

.avatar,
.about-text {
    margin-top: 5vh;
}

.about-text > p {
    padding: 1em;
    text-align: justify;
}

.about-text > p > span {
    font-weight: 600;
    font-size: 1.2em;
}

#web-dev-skill,
#design-skill,
#soft-skill {}

/***--- --- Section: skills --- ---***/

/***--- Web Dev Skills ---***/

.round > img {
    height: 5vh;
}

/***--- Design Skills ---***/

.design-skill-content {
    display: grid;
    grid-template-columns: 1;
    grid-template-rows: 1;
}

.design-abilities {
    grid-column: 1;
    grid-row: 1;
}

.design-tools {
    grid-column: 1;
    grid-row: 2;
}

.d-abilities-wrapper,
.d-tools-wrapper,
.languages {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: space-between;
}

/***--- --- skillbars --- ---***/

/*source: https://w3lessons.info/2013/06/04/skill-bar-with-jquery-css3/ */

/*couldn't make animation work :/*/

.skillbar {
    position: relative;
    display: block;
    margin-bottom: 15px;
    width: 100%;
    background: #eee;
    height: 35px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -webkit-transition: 0.4s linear;
    -moz-transition: 0.4s linear;
    -ms-transition: 0.4s linear;
    -o-transition: 0.4s linear;
    transition: 0.4s linear;
    -webkit-transition-property: width, background-color;
    -moz-transition-property: width, background-color;
    -ms-transition-property: width, background-color;
    -o-transition-property: width, background-color;
    transition-property: width, background-color;
}

.skillbar-title {

    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    font-weight: normal;
    font-size: 13px;
    color: #ffffff;
    background: #f27276;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.skillbar-title span {
    display: block;
    background: rgba(0, 0, 0, 0.1);
    padding: 0 20px;
    height: 35px;
    line-height: 35px;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.skillbar-bar {
    height: 35px;
    background: #f38081;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

.skill-bar-percent {
    position: absolute;
    right: 10px;
    top: 0;
    font-size: 11px;
    height: 35px;
    line-height: 35px;
    color: #ffffff;
    color: rgba(0, 0, 0, 0.4);
}

/*temporary solution to display skills -> no animation :/*/

.js-bar {
    width: 55%;
}

.corp-bar,
.seo-bar {
    width: 65%;
}

.brand-bar {
    width: 70%;
}

.ui-bar,
.mod-bar,
.html-bar,
.css-bar {
    width: 75%;
}

.cms-bar,
.illust-bar {
    width: 85%;
}

.print-bar {
    width: 90%;
}






/***--- --- donut charts --- ---***/

/*Donut Chart Mixin*/

.donut-chart {
    position: relative;
    border-radius: 50%;
    overflow: hidden;
}

.donut-chart .quad {
    position: absolute;
    top: 0;
    left: 0;
}

.donut-chart .chart-center {
    position: absolute;
    border-radius: 50%;
    background: #fff;
}

.donut-chart .chart-center span {
    display: inline-block;
    text-align: center;

}

@-webkit-keyframes chart1 {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(150deg);
    }
}

@-webkit-keyframes chartRotate2 {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(90deg);
    }
}

@-webkit-keyframes chartRotate3 {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(180deg);
    }
}

@-webkit-keyframes chartRotate4 {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(270deg);
    }
}

@-webkit-keyframes chartCover {
    0%,
    90% {
        opacity: 1;
    }
    91%,
    100% {
        opacity: 0;
    }
}

.donut-chart.chart1 {
    width: 10vh;
    height: 10vh;
    background: #e1e1e1;
}

.donut-chart.chart1 .quad {
    width: 5vh;
    height: 5vh;
    top: 0;
    left: 0;
    border-radius: 100% 0 0 0;
    display: none;
}

.donut-chart.chart1 .quad.one {
    -webkit-transform: rotate(150deg);
    -webkit-transform-origin: bottom right;
    background: #f38081;
    -webkit-animation: chart1 1s linear;
    display: block;
}

.donut-chart.chart1 .quad.two {
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: bottom right;
    background: #f38081;
    -webkit-animation: chartRotate2 1s linear;
    display: block;
}

.donut-chart.chart1 .quad.three {
    -webkit-transform: rotate(180deg);
    -webkit-transform-origin: bottom right;
    background: #f38081;
    -webkit-animation: chartRotate3 1s linear;
    display: block;
}

.donut-chart.chart1 .quad.four {
    -webkit-transform: rotate(270deg);
    -webkit-transform-origin: bottom right;
    background: #f38081;
    -webkit-animation: chartRotate4 1s linear;
}

.donut-chart.chart1 .quad.top {
    display: inline-block;
    background: #e1e1e1;
}

.donut-chart.chart1 .chart-center {
    top: 1vh;
    left: 1vh;
    width: 8vh;
    height: 8vh;
    background: #e1e1e1;
}

.chart-center > img {
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.donut-chart.chart1 .chart-center:after {
    display: inline-block;
    width: 100%;
    font-size: 2vh;
    color: #f38081;
    text-align: center;
    line-height: 8vh;

}

@-webkit-keyframes chart2 {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(133.2deg);
    }
}

@-webkit-keyframes chartRotate2 {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(90deg);
    }
}

@-webkit-keyframes chartRotate3 {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(180deg);
    }
}

@-webkit-keyframes chartRotate4 {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(270deg);
    }
}

@-webkit-keyframes chartCover {
    0%,
    90% {
        opacity: 1;
    }
    91%,
    100% {
        opacity: 0;
    }
}

/***--- --- Section: services--- ---***/

.serv-panel {
    background: transparent;
    margin: auto;
}

.serv-img {
    border-radius: 50%;
}

.services-card > .card-image {
    border-radius: 50%;
    background: white;
}

/***--- --- Section: work-- ---***/

#project1 > .card-image {
    background-color: #566270;
}

video {
    margin: 0 auto;
    z-index: 0;
}

/***--- --- --- FOOTER --- --- ---***/

.contact-title-q {
    background-color: #f1f1f1;

}

.contact-title-q > h3 {
    color: #f38081;
}


iframe {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#impressum > p {
    color: whitesmoke;
    padding-left: 5vw;
}

.social-buttons-foot > a > i {
    color: whitesmoke;
    font-weight: 500;

}


/*** -- -- >>>>>>>>>>MEDIA QUERIES<<<<<<<<<< -- -- ***/

/*** -- -- >>>>>>>>>>PHONE ONLY<<<<<<<<<< -- -- ***/

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

    /***--- --- Section: home --- ---***/
    /***--- --- Section: home --- ---***/
    .logo-front {
        margin-top: 12vh;
        height: 24vh;
    }

    #home > h1 {
        font-size: 6vh;
    }
    #home > h4 {
        font-size: 3vh;
        margin-top: 10vh;
    }

    .arrow {
        background-color: #f1f1f1;
        font-size: 4vh;
        margin-top: 9vh;
        z-index: 2;
    }


    .arrow > a > i {
        color: #f38081;
        font-size: 6vh;
        line-height: 6vh;
    }

    #home > a {
        margin-bottom: ;
    }


    /***--- --- Section: about --- ---***/
    .avatar {
        transform: scale(0.75);
        margin: 1em auto;
    }
    .about-text {
        margin-top: 0;
    }

    .skills-content {
        margin-top: 0vh;
    }

    #web-dev-skill-button {
        margin-top: 1em;
        height: 8vh;
        width: 100%;
    }

    #design-skill-button,
    #soft-skill-button {
        margin-top: 2em;
        height: 8vh;
        width: 100%;
    }

    /***--- --- --- FOOTER --- --- ---***/
    /***--- --- Section: contact --- ---***/
    .contact-content {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, 1fr);
        background-color: #f38081;
    }
    .contact-mail {
        grid-column: 1/4;
        grid-row: 1;
    }
    .contact-phone {
        grid-column: 1/4;
        grid-row: 2;
    }
    #googleMap {
        width: auto;
        height: auto;
        grid-column: 1/4;
        grid-row: 4;
    }
    .contact-address {
        grid-column: 1/4;
        grid-row: 3;
    }
    .contact-mail,
    .contact-phone,
    .contact-address {
        position: relative;
        margin: 0.5rem 0 1rem 0;
        background-color: whitesmoke;
        -webkit-transition: -webkit-box-shadow .25s;
        transition: -webkit-box-shadow .25s;
        transition: box-shadow .25s;
        transition: box-shadow .25s, -webkit-box-shadow .25s;
        border-radius: 2px;
    }
}

/*** -- -- >>>>>>>>>>TABLET (AND UP)<<<<<<<<<< -- -- ***/

@media screen and (min-width: 601px) {
    /***--- --- --- HEADER --- --- ---***/
    #logo-container {
        margin-left: 0.75rem;

    }
    /***--- --- --- SECTIONS --- --- ---***/
    /***--- --- Section: home --- ---***/
    /***--- --- --- SECTIONS --- --- ---***/
    /***--- --- Section: about, services, work --- ---***/
    #about,
    .about-title,
    #work,
    .work-title {
        height: 100vh;
    }
    #services,
    .services-title,
    #blog,
    .blog-title,
    #contact,
    .contact-title {
        height: 50vh;
    }
    .about-me-title,
    .skills-title,
    .contact-title-q {
        top: 5vh;
    }

    /***--- --- Section: about --- ---***/
    .avatar {
        height: auto;
    }
    .skills-content {
        margin-top: 5vh;
    }

    #web-dev-skill-button {
        margin-top: 0;
        height: 3vh;
        width: 100%;
    }

    #design-skill-button,
    #soft-skill-button {
        margin-top: 1vh;
        height: 3vh;
        width: 100%;
    }
    /***--- --- Section: services --- ---***/
    #services,
    #blog {
        width: 100%;
        height: 50vh;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(10, 1fr);
    }


    .services-title,
    .blog-title {
        z-index: 1;
        grid-column: 9/13;
        grid-row: 1/11;
    }


    .services-title-q,
    .blog-title-q {
        z-index: 3;
        grid-column: 2/10;
        grid-row: 2;
    }
    .services-panels,
    .blog-content {
        grid-column: 1/8;
        grid-row: 3/11;
        column-gap: 3vw;
    }

    .blog-ent-1 {
        grid-column: 1/9;
        grid-row: 3/6;
        column-gap: 1em;

    }
    .blog-ent-2 {
        grid-column: 1/9;
        grid-row: 8/11;
        column-gap: 1em;

    }

    /***--- --- Section: work --- ---***/
    .work-content {
        overflow-y: hidden;
        height: 100vh;
        z-index: 5;
        padding: 5em 5em 5em 0;
    }
    .work-content:hover,
    .blog-content:hover {
        overflow-y: scroll;
    }
    /***--- --- Section: blog --- ---***/
    .blog-content {
        overflow-y: hidden;
        z-index: 5;
        padding: 5em 5em 5em 0;
    }
    /***--- --- --- FOOTER --- --- ---***/
    /***--- --- Section: contact --- ---***/
    #contact {
        color: #565652;
    }
    .contact-content {
        margin-top: 5vh;
    }
    #googleMap {
        width: 100%;
    }
}

/*** -- -- >>>>>>>>>>DESKTOP (AND UP)<<<<<<<<<< -- -- ***/

@media screen and (min-width: 992px) {
    /***--- --- --- SECTIONS --- --- ---***/
    /***--- --- Section: home --- ---***/
    #home {
        margin-top: 15vh;
        height: 85vh;
    }
    /***--- --- Section: about --- ---***/
    .skills-content {
        margin-top: 10vh;
    }

    #web-dev-skill-button {
        margin-top: 0;
        height: 5vh;
        width: 100%;
    }

    #design-skill-button,
    #soft-skill-button {
        margin-top: 5vh;
        height: 5vh;
        width: 100%;
    }

    /***--- --- --- FOOTER --- --- ---***/
    /***--- --- Section: contact --- ---***/
    #contact {
        background-color: transparent;
        color: #565652;
    }
    .contact-content {
        background-color: transparent;
        margin-top: 5vh;
        height: 35vh;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
    .contact-mail {
        grid-column: 1;
        grid-row: 1;
    }
    .contact-phone {
        grid-column: 2;
        grid-row: 1;
    }
    #googleMap {
        width: auto;
        height: auto;
        grid-column: 1/4;
        grid-row: 2;
    }
    .contact-address {
        grid-column: 3;
        grid-row: 1;
    }
}

/*** -- -- >>>>>>>>>> XL DESKTOP <<<<<<<<<< -- -- ***/

@media screen and (min-width: 1200px) {
    /***--- --- --- SECTIONS --- --- ---***/
    /***--- --- Section: home --- ---***/
    .work-content > .grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(4, 1fr);
        grid-gap: 1em;
        padding: 5em 5em 5em 0;
    }
    #project1 {
        grid-column: 1/7;
        grid-row: 1/2;
    }
    #project2 {
        grid-column: 1/5;
        grid-row: 2/3;
    }

    #project3 {
        grid-column: 5/7;
        grid-row: 2/3;
    }
    #project4 {
        grid-column: 1/3;
        grid-row: 3/4;
    }
    #project5 {
        grid-column: 3/7;
        grid-row: 4/5;
    }
    #project6 {
        grid-column: 1/7;
        grid-row: 4/5;
    }
    #project7 {
        grid-column: 3/7;
        grid-row: 3/4;
    }
}

/*** *** *** *** *** *** Page: Blog *** *** *** *** *** ***/