@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
/*@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300;400;500&family=Merriweather:wght@300;400;700&display=swap');*/

/**********************************************
*  Helper Classes
**********************************************/

/*old coloer  #47E8C8; */
.bg-white {background: #fff;}
.bg-light-grey {background: #F8F8F8; }
.bg-dark-grey {background: #282828;}
.bg-blue {background: #47E8C8;}

.hide-mobile {display: none;}

.bg-blue-gradient {background: #47E8C8;background: -o-linear-gradient(318deg, #47E8C8 0%, #2eb197 100%);background: linear-gradient(132deg, #47E8C8 0%, #2eb197 100%);}
.flex-center {display:-webkit-box;display:-ms-flexbox;display:flex;  -webkit-box-align: center;  -ms-flex-align: center;  align-items: center;   justify-content: center;} 
.inset-shadow {-webkit-box-shadow: inset 3px 3px 2px 0px rgba(0,0,0,0.2); box-shadow: inset 3px 3px 2px 0px rgba(0,0,0,0.2);}
.drop-shadow {-webkit-box-shadow: 3px 3px 2px 0px rgba(0,0,0,0.2); box-shadow: 3px 3px 2px 0px rgba(0,0,0,0.2);}


/**********************************************
*  Fonts
**********************************************/
html, body, p, h3, h4, h5, h6, ul, li {font-family: "Merriweather Sans", sans-serif; color: #282828; }
h1, h2, h3 {font-family: "Merriweather", serif; color: black; }
p, ul, li, ol, a {font-size: 14px; font-weight: 300;}
h1 {font-weight: 400; font-size: 24px;}
h2 {font-weight: 500; font-size: 22px; margin-top: 40px;}


 
h1.card-title {font-weight: 400; font-size: 32px;}
h2.card-title {font-weight: 500; margin-bottom: 60px;font-size: 24px; text-align: center; letter-spacing: 2px; color: transparent; background-color: rgb(32, 32, 32);
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
    -webkit-background-clip: text;
       -moz-background-clip: text;
            background-clip: text;}
h2.card-title::after {content:""; border-bottom: 1px solid black; width: 80px; position:relative; display: block; margin:auto; margin-top: 24px;}
.card h3 {font-weight: 500; font-size: 18px; margin-bottom: 18px; }



/**********************************************
*  General
**********************************************/
html {scroll-behavior: smooth;}
body {background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='1666.7' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.04'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;}
.card {padding-top: 60px !important; padding-bottom: 60px !important; margin: 0 2vw 40px 2vw ;}
.card:first-of-type {margin-top: -60px;}

ul {margin-bottom: 20px !important;}


/**********************************************
*  Top-Bar
**********************************************/
.top-bar img {float: left; margin: 0 20px -8px 0; height: 48px; width: 48px;}
.top-bar {height: 100px; z-index: 1; padding-top: 16px;}
.top-bar a {text-decoration: none;}
.title {font-size: 20px; font-weight: 300;}
.subtitle {font-size: 14.2px; font-weight: 300; line-height: 16px;}


/**********************************************
*  Social Navigation (sticky side nav)
**********************************************/
/*
.social-nav {position: fixed; top: 10px; right: 0; z-index: 10; overflow: hidden;}
.social-nav .fa {color: #F8F8F8; font-size: 20px; width: 40px; height: 40px; line-height: 40px; text-align: center; text-decoration: none; margin-bottom: 10px;}
.social-nav .fa.fa-bars {color: #47E8C8;}
.social-nav .fa.fa-bars:hover {color:  #282828;}
.social-nav .fa:hover{background: #47E8C8;}
*/
.social-nav .fa {color: #F8F8F8; font-size: 30px; width: 60px; height: 60px; line-height: 60px; text-align: center; text-decoration: none; margin-bottom: 0px;}
.social-nav .fa.fa-bars {color: #47E8C8;}
.social-nav .fa.fa-bars:hover {color:  #282828;}
.social-nav .fa:hover{background: #47E8C8;}

.social-nav {z-index: 10; position: fixed;right:0; top:0; transform: translateX(100%);  transition: 0.2s ease-in-out }
.social-nav-buttons {position: fixed; top:20px; right: 100%;}
.social-nav-sidebar {height: 100vh; max-width: 80vw;min-width: 50vw; background: #282828; color: #F8F8F8; z-index: 10; padding-left: 30px !important;}
.social-nav-sidebar ul {padding-left: 0;}
.social-nav-sidebar ul ul {padding-left: 30px;}
.social-nav-sidebar a {color: #f8f8f8; font-size:14px; line-height:40px; text-decoration: none; letter-spacing: 1px;}
.social-nav-sidebar a:hover {color:  #47E8C8; }
/**********************************************
*  Hero   
**********************************************/
.hero.full-height {min-height: calc(100vh - 100px); }
.hero.half-height {min-height: 20vh; }
.hero-content {text-align: center; padding-top: 20%; padding-bottom: 120px;}
.hero-content p {font-size: 18px; padding-left: 32px; padding-right: 32px; }
.hero-content h1 {font-size: 24px; margin-top: 32px;}
.hero-portrait img {width: 200px; height: 200px;}
.hero-nav {text-align: center; padding-bottom: 10px;display:none;}
.hero-nav a:first-child {padding-left: 0 !important;}
.hero-nav a {font-size: 14px; line-height: 32px ; font-weight: 400; margin-right: 22px; padding: 0 0 4px 0 !important; text-decoration: none; position: relative; border-bottom: 1px solid #47E8C8 !important ;}
.hero-nav a:last-child {margin-right: 0;}
.hero-nav a:hover {border-bottom: 4px solid #47E8C8 !important; padding-bottom: 0px !important;}
.hero-nav a::after {content: "/"; position: absolute; right: -16px}
.hero-nav a:last-child::after{content: ""; padding-left: 12px;}
.hero-icon {font-size: 120px; color:  #47E8C8;}

/**********************************************
*  Intro
**********************************************/
.cta-button {font-size: 14px; margin-top: 60px; letter-spacing: 1px;}
.cta-button:hover {background: #fff !important;}
.intro-content {text-align: center;}
.intro-circle, .intro-circle::after {width: 150px; height: 150px; border: 8px solid white; border-radius: 50%; margin: 0 auto; border: 8px solid rgba(255,255,255,1); }
.intro-circle {position: relative; margin-bottom: 24px; -webkit-animation: blurrLeft ease-in-out 8s; animation: blurrLeft ease-in-out 8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-delay: 1s; animation-delay: 1s; }
.intro-circle::after {position: absolute; content:""; top:-8px; left:-8px; -webkit-animation: blurrRight ease-in-out 8s; animation: blurrRight ease-in-out 8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-delay: 1s; animation-delay: 1s;  }



/**********************************************
*  Section Service
**********************************************/
.service-icon-container {padding-top: 32px;}
.service-icon {vertical-align: top; display: inline-block; text-align: center; margin: 20px 0px; width: 148px;}
.service-icon .icon {font-size: 42px !important; line-height: 76px !important; width: 80px; height: 80px; margin-top:6px; border-radius: 50%; background: #fff; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;   }
.service_icon__ring {background: #47E8C8; width:92px; height:92px; border-radius: 50%; display: inline-block;}
.service-icon .caption {font-size: 14px; font-weight: 300; display: block;  width: 120px; margin: 20px auto; text-decoration: underline;}
.service-icon:hover {color: #47E8C8;}
.service-icon:hover .icon {-webkit-transform: scale(0.95);-ms-transform: scale(0.95);transform: scale(0.95);}


/**********************************************
*  Section Skills
**********************************************/
.progress-bar {padding-left:0 !important; border-bottom: none !important;}
.progress-bar__caption {width: 170px !important; padding-left: 0 !important; font-size: 14px; font-weight: 300;}
.progress-bar__bg {width: 140px; background: #f8f8f8; padding: 0 !important; border-radius: 4px; overflow: hidden;}
.progress-bar__progress { height: 8px; background: #47E8C8; border-bottom-left-radius: 4px; border-top-left-radius: 4px;}
.progress-bar__progress.progress10 {width: 10%;}
.progress-bar__progress.progress20 {width: 20%;}
.progress-bar__progress.progress30 {width: 30%;}
.progress-bar__progress.progress40 {width: 40%;}
.progress-bar__progress.progress50 {width: 50%;}
.progress-bar__progress.progress60 {width: 60%;}
.progress-bar__progress.progress70 {width: 70%;}
.progress-bar__progress.progress80 {width: 80%;}
.progress-bar__progress.progress90 {width: 90%;}
.progress-bar__progress.progress100 {width: 100%; border-radius: 4px;}

.skills-content {padding-bottom: 32px;}
/**********************************************
*  Section About
**********************************************/
.about-bg {background-image: url(../images/about_bg.jpg); background-size: cover; height: 650px;   -webkit-filter: grayscale(100%);   filter: grayscale(100%);}
.polygon-vertical {height: 101%;}
.polygon-horizontal {width: 101%;}

/**********************************************
*  Section Referenezen
**********************************************/
.referenzen {padding: 64px 0 64px 0; }
.referenzen h2 {margin-bottom:0;}
.referenz-item {width: 360px; height: 280px; perspective: 1000px; padding: 32px; }
.referenz-item:hover .referenz-item-flip {transform: rotateX(180deg);}
.referenz-item-flip {position: relative; width: 100%; height: 100%; transition: all 0.2s ease-in-out; transform-style: preserve-3d;}
.referenz-item-front, .referenz-item-back {height: 100%;width: 100%; position:absolute; top:0; left: 0;backface-visibility: hidden; text-align: center; } 
.referenz-item-back {transform: rotateX(180deg);}
.referenz-item__logo {max-width: 200px; max-height: 100px;}
.referenz-item__title {margin: 16px; }
.referenz-item h3 { font-size: 20px;}
.referenz-item ul { padding-left: 16px;}
.referenz-item p, li {font-size: 14px; list-style:none;}


/**********************************************
*  Footer
**********************************************/
.footer {height: auto;  padding: 60px 0 !important; color: #F8F8F8;}
.footer a, .footer p, .footer h4 { letter-spacing: 1px; text-decoration: none;}

.footer h4 {font-size: 18px; margin-bottom: 30px; color: #47E8C8;}
.footer .email {border-bottom: 1px solid #47E8C8;}
.footer .email:hover {border-bottom: 4px solid #47E8C8;}
.footer .fa {padding: 40px; font-size: 30px;}
.footer .fa:hover {color: #47E8C8 !important;}
.legal {margin-top: 60px; }
.legal a {font-size: 14px;} 
.legal a:hover {color: #47E8C8;}
.footer .border {border: 1px solid #47E8C8; padding: 40px;}

/**********************************************
*  Subpage
**********************************************/

.back-to-home {border-bottom: 1px solid #47E8C8; text-decoration:none; margin-top: 50px !important;}
.back-to-home:hover {border-bottom: 4px solid #47E8C8;}

/**********************************************
*  Queries
**********************************************/
@media (min-width:600px){
    
    .hero.full-height .hero-content {padding-top: 18vh;}
    .hero.half-height .hero-content {padding-top: 7vh;}
    .hero-content p {font-size: 24px;}
    .hero-nav a {font-size: 18px;}
    .hero h1 {font-size: 32px;}
    .hero-icon {font-size: 200px;}
}
@media (min-width:768px){
    .social-nav-sidebar {width: 400px; min-width:0; padding-left: 60px !important; padding-top: 20px !important;}
    .social-nav-sidebar a {font-size: 18px;line-height:40px; }
    .hero-portrait img {width: 250px; height: 250px;}
    h2.card-title {font-size: 40px;}
    p, a {font-size: 18px;}
    .service-icon .caption {font-size: 18px;}
    .progress-bar__caption {font-size: 18px;}
    .progress-bar__bg {width: 200px;}
    .cta-button {font-size: 18px;}
    .top-bar img {height: 72px; width: 72px;}
    .title {font-size: 28px;}
    .subtitle {font-size: 20px;}
    .card {padding-bottom: 100px !important;}
    .service-icon {width: 178px;}
    .service-icon .icon {font-size: 42px !important; line-height: 96px !important; width: 100px; height: 100px;}
    .service_icon__ring {width:112px; height:112px;}
    .referenz-item li {list-style: square;}
    .referenz-item-front, .referenz-item-back {text-align: left;}
    
}
@media (min-width:992px){

    .hero-content {text-align: left;}
    .hero.full-height .hero-content{padding-top: 24vh;}
    .hero.half-height .hero-content{padding-top: 9vh;}
    .hero-nav {text-align: left; display:block;}
    .hero-content p {font-size: 24px; padding-left: 0; padding-right: 0;}
    /*.social-nav {top: 80px;}*/
    .social-nav .fa {display: block;}
    .polygon-horizontal {display: none;}
    .intro-circle {margin-top: 84px;}
    .intro-content {text-align: left;}
    }
    
@media (min-width:1205px){
    .card {max-width: 1600px; width:90vw; margin: 0 auto 80px auto; }
    .card.hoverable {position: relative;}
    .card.hoverable::before {content: ""; position: absolute; top:0; left:0; width: 20px; height: 100%;  background:transparent;  -webkit-transition: 0.5s ease-in-out;  -o-transition: 0.5s ease-in-out;  transition: 0.5s ease-in-out; }
    .card.hoverable:hover::before {background: #47E8C8; }
}
@media (min-width:4005px){}



/**********************************************
*  Animations
**********************************************/

@-webkit-keyframes blurrRight{
    0%, 100% {-webkit-transform:  translate(0px,0px);transform:  translate(0px,0px);}
    50% {-webkit-transform:  translate(15px,0px);transform:  translate(15px,0px);
      border: 8px solid rgba(255,255,255, .7); 
      -webkit-box-shadow: 0px 0px 15px 5px rgba(255,255,255,0.7), 
                  inset 0px 0px 15px 5px rgba(255,255,255,0.7); 
              box-shadow: 0px 0px 15px 5px rgba(255,255,255,0.7), 
                  inset 0px 0px 15px 5px rgba(255,255,255,0.7);
    }}

@keyframes blurrRight{
    0%, 100% {-webkit-transform:  translate(0px,0px);transform:  translate(0px,0px);}
    50% {-webkit-transform:  translate(15px,0px);transform:  translate(15px,0px);
      border: 8px solid rgba(255,255,255, .7); 
      -webkit-box-shadow: 0px 0px 15px 5px rgba(255,255,255,0.7), 
                  inset 0px 0px 15px 5px rgba(255,255,255,0.7); 
              box-shadow: 0px 0px 15px 5px rgba(255,255,255,0.7), 
                  inset 0px 0px 15px 5px rgba(255,255,255,0.7);
    }}
@-webkit-keyframes blurrLeft{
        0%, 100% {-webkit-transform:  translate(0px,0px);transform:  translate(0px,0px);}
        50% {-webkit-transform:  translate(-15px,0px);transform:  translate(-15px,0px);
          border: 8px solid rgba(255,255,255, .7); 
          -webkit-box-shadow: 0px 0px 15px 5px rgba(255,255,255,0.7), 
                      inset 0px 0px 15px 5px rgba(255,255,255,0.7); 
                  box-shadow: 0px 0px 15px 5px rgba(255,255,255,0.7), 
                      inset 0px 0px 15px 5px rgba(255,255,255,0.7);
        }}
@keyframes blurrLeft{
        0%, 100% {-webkit-transform:  translate(0px,0px);transform:  translate(0px,0px);}
        50% {-webkit-transform:  translate(-15px,0px);transform:  translate(-15px,0px);
          border: 8px solid rgba(255,255,255, .7); 
          -webkit-box-shadow: 0px 0px 15px 5px rgba(255,255,255,0.7), 
                      inset 0px 0px 15px 5px rgba(255,255,255,0.7); 
                  box-shadow: 0px 0px 15px 5px rgba(255,255,255,0.7), 
                      inset 0px 0px 15px 5px rgba(255,255,255,0.7);
        }}