@import url('https://fonts.googleapis.com/css?family=Cairo:400,500,700');
@font-face {
    font-family: Prime;
    src: url('/static/fonts/Prime-Regular.woff');
}

html, body {
    height:100%;
    width:100%;
    background-image:url("/static/imgs/grid.svg");
    background-position: center;
    background-repeat: false;
    font-family: "Cairo", sans-serif;
    font-size: 18px;
}

h1, h2, h3, h4, h5 {font-family: "Prime";}



::-moz-selection { /* Code for Firefox */
    color:  #868A81;
    background: #29F6D3;
}

::selection {
    color:  #868A81;
    background: #29F6D3;
}

#logo {width:175px;}

a:focus { color: #29F6D3;
          outline:0}


a:focus img{-webkit-transform: rotate(20deg);
            -moz-transform: rotate(20deg);
            -o-transform: rotate(20deg);
            -ms-transform: rotate(20deg);
            transform: rotate(20deg);
           }
a img {-webkit-transition: all 0.75s ease;
       -moz-transition: all 0.75s ease;
       -o-transition: all 0.75s ease;
       -ms-transition: all 0.75s ease;
       transition: all 0.75s ease;}

.tilt {
    -webkit-transition: all 0.75s ease;
    -moz-transition: all 0.75s ease;
    -o-transition: all 0.75s ease;
    -ms-transition: all 0.75s ease;
    transition: all 0.75s ease;
}

.tilt:hover {
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
}

.morph {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.morph:hover {
    border-radius: 50%;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}


/* to pad the bottom when in phone mode and fullpage is scrolled */
.section {padding-bottom:100px !important;
          padding-top:0px !important;}

.footer-links{
    position: relative;
    font-size: 16px;
    line-height: 18px;
    font-weight: 900;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    vertical-align: middle;
    color:  #868A81}

.footer-links:hover{color:#CBCBCB;
                    font-size:17px;
                    text-decoration:none}


.nav-link {font-family: "Prime";
           font-size:24px;}

.quote {font-style: italic;}

/* headers */
.front-slogan {font-family: "Prime";
               font-size: 60px;
               letter-spacing: 3.22px;
               line-height: 82px;}

.overview-slogan{font-family: "Prime";
                 font-size: 50px;
                 letter-spacing: 2.36px;
                 line-height: 60px;
                }

.undertext {  color: #1A1919;
              font-size: 18px;
              font-weight: bold;
              letter-spacing: 0;
              line-height: 21.6px;
              margin-top: 15px;
              margin-bottom: 15px;}

/* Home: page 2*/
.anwendung-group{height: 249px;
                 width: 220px;}

.anwendung-header{color: #1A1919;
                  font-size: 18px;
                  font-weight: bold;
                  letter-spacing: 0;
                  line-height: 21.6px;
                  text-align: center;}

.anwendung-text {
    width:220px;
    color: #1A1919;
    font-family: Cairo;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 21.6px;
    text-align: center;
}

/* Home: page 3*/
.components-block{padding-bottom:30px;
                  padding-top: 30px;}

.components-slogan {font-size: 60px;
                    align-self: left;
                    letter-spacing: 2.36px;
                    line-height: 72px;}

.components-header {font-size: 18px;
                    font-weight: bold;
                    letter-spacing: 0;
                    line-height: 21.6px;}

.components-text{height: 151.2px;
                 width: 264px;
                 font-size: 18px;
                 letter-spacing: 0;
                 line-height: 21.6px;
                 text-align: center;}

/* Home: page 4*/
.about-slogan {color: #0C0C0C;
               font-size: 60px;
               letter-spacing: 2.36px;
               line-height: 72px;}

.about-header {text-align:center;
               font-size: 18px;
               font-weight: bold;
               letter-spacing: 0;
               line-height: 21.6px;}

.about-text {color: #1A1919;
             font-size: 18px;
            }

/* Home: page5*/
.contact-slogan {color: #0C0C0C;
                 font-size: 60px;
                 letter-spacing: 2.36px;
                 line-height: 72px;}

.info-button {
    float:right;
    position: relative;
    margin: 0;
    padding: 19px 22px;
    transition: all 0.2s ease;
}

.info-button:before {
    text-decoration: none;
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    display: block;
    border-radius: 28px;
    background: #29F6D3;
    width: 56px;
    height: 56px;
    transition: all 0.3s ease;
}
.info-button span {
    position: relative;
    font-size: 16px;
    line-height: 18px;
    font-weight: 900;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    vertical-align: middle;
}
.info-button svg {
    position: relative;
    top: 0;
    margin-left: 10px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: #111;
    stroke-width: 2;
    transform: translateX(-5px);
    transition: all 0.3s ease;
}
.info-button:hover:before, .info-button:focus:before {
    width: 100%;
    background: #29F6D3;
}
.info-button:hover svg, .info-button:focus svg{
    transform: translateX(0);
}
.info-button:active {
    transform: scale(0.96);
}

/* SVG Morph */
.morph-wrap {max-width:1440px;
             width: 100%;
            }

#morph1 {
    max-width:1440px;
    width: 1440px;
    height: auto;
    position: fixed;}

#morph2 {
    max-width:1440px;
    width: 1440px;
    height: auto;
    position: fixed;}

#morph3 {
    max-width:1440px;
    width: 1440px;
    height: auto;
    position: fixed;}

#morph4 {
    max-width:1440px;
    width: 1440px;
    height: auto;
    position: fixed;}

#morph5 {
    max-width:1440px;
    width: 1440px;
    height: auto;
    position: fixed;}

#morph6 {
    max-width:1440px;
    width: 1440px;
    height: auto;
    position: fixed;}


/*Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap*/

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { }

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .overview-slogan{font-family: "Prime";
                     font-size: 60px;
                     letter-spacing: 2.36px;
                     line-height: 60px;
                    }

    .sticky-top{position: fixed;
                width: 100%;}
    .bg-light {
        background-color: rgba(0,0,0,0) !important;
    }
    .info-button span {
        font-size: 20px;
    }
    .section {padding-bottom:110px !important;
              padding-top:110px !important;}

    .about-text {vertical-align: bottom;
                 color: #1A1919;
                 font-size: 18px;
                 letter-spacing: 0;
                 line-height: 21.6px;
                }

}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .front-slogan {font-size:80px;}}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    #logo{width:300px;}
}