/*@font-face {
font-family: 'MetaPro';
src: url('https:/www.festo.com/Fonts/MetaPro-Regular.woff2') format('woff2'),
url('https:/www.festo.com/Fonts/MetaPro-Regular.woff') format('woff');
}
@font-face {
font-family: 'MetaPro';
src: url('https:/www.festo.com/Fonts/MetaPro-Bold.woff2') format('woff2'),
url('https:/www.festo.com/Fonts/MetaPro-Bold.woff') format('woff');
font-weight: bold;
}
*/

@font-face {
    font-family: 'MetaPro';
    src: url('fonts/MetaPro-Regular.woff2') format('woff2'),
    url('fonts/MetaPro-Regular.woff') format('woff');
}

@font-face {
    font-family: 'MetaProBold';
    src: url('fonts/MetaPro-Bold.woff2') format('woff2'),
    url('fonts/MetaPro-Bold.woff') format('woff');
    font-weight: bold;
}







/*

.tnum {

font-feature-settings: "tnum";
-moz-font-feature-settings: "tnum";
-webkit-font-feature-settings: "tnum";
font-variant-numeric: tabular-nums diagonal-fractions ordinal;
}
.pnum {

font-feature-settings: "pnum";
-moz-font-feature-settings: "pnum";
-webkit-font-feature-settings: "pnum";
font-variant-numeric: proportional-nums diagonal-fractions ordinal;
}
.lnum-pnum {

font-feature-settings: "lnum", "pnum";
-moz-font-feature-settings: "lnum", "pnum";
-webkit-font-feature-settings: "lnum", "pnum";
font-variant-numeric: lining-nums proportional-nums diagonal-fractions ordinal;
}
.lnum-tnum {

font-feature-settings: "tnum", "lnum";
-moz-font-feature-settings: "tnum", "lnum";
-webkit-font-feature-settings: "tnum", "lnum";
font-variant-numeric: lining-nums tabular-nums diagonal-fractions ordinal;
}
.ordinal {
font-variant-numeric: ordinal;
}
.diagonal-fractions {
font-variant-numeric: diagonal-fractions;
}
.no-ligatures {
font-feature-settings: "liga" 0;
-moz-font-feature-settings: "liga" 0;
-webkit-font-feature-settings: "liga" 0;
}
body {
font-family: 'MetaPro';
font-feature-settings: "frac" 1, "kern" 1, "mgrk" 1, "ordn" 1, "sinf" 1, "subs" 1, "sups" 1, "pnum" 1, "lnum" 1;
-webkit-font-feature-settings: "frac" 1, "kern" 1, "mgrk" 1, "ordn" 1, "sinf" 1, "subs" 1, "sups" 1, "pnum" 1;
-moz-font-feature-settings: "frac" 1, "kern" 1, "mgrk" 1, "ordn" 1, "sinf" 1, "subs" 1, "sups" 1, "pnum" 1, "lnum";
-moz-font-feature-settings: "frac=1, kern=1, mgrk=1, ordn=1, sinf=1, subs=1, sups=1, pnum=1, lnum=1";
-ms-font-feature-settings: "frac" 1, "kern" 1, "mgrk" 1, "ordn" 1, "sinf" 1, "subs" 1, "sups" 1, "pnum" 1, "lnum";
-o-font-feature-settings: "frac" 1, "kern" 1, "mgrk" 1, "ordn" 1, "sinf" 1, "subs" 1, "sups" 1, "pnum" 1, "lnum" 
}


*/

body {
    font-family: 'MetaPro', Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #8d8d8b;
    font-weight: 400;
    line-height: 130%;
}

h1,
.h1,
h2,
.h2,
h3,
.h3 {
    margin-top: 20px;
    margin-bottom: 20px;
}

h2 {
    color: #2d2d2d;
    font-size: 40px;
    font-weight: bold;
    font-family: 'MetaProBold', Arial, Helvetica, sans-serif;
}

h3 {
    font-family: 'MetaProBold', Arial, Helvetica, sans-serif;
    color: #2d2d2d;
    font-weight: bold;
    font-size: 30px;
}

body.result h3 {
    font-size: 24px;
    margin-bottom: 0.5em;
}

h3.result {

    margin-top: 25px;
    margin-bottom: 0;
}

h4 {
    font-family: 'MetaProBold', Arial, Helvetica, sans-serif;
    color: #666666;
    font-weight: bold;
    font-size: 24px;
}

h4.result {

    margin-top: 0;
    margin-bottom: 0;
}

body.result h4.result {
    font-size: 18px;
}


@media (max-width: 767px) {
    footer {
        margin-top: 150px;
    }

    body {
        margin-top: 35px;
    }
    h2 {

        font-size: 40px;
    }
    h3 {

        font-size: 26px;
    }
}

p {
    margin: 0 0 25px;
}

header .container-middle {
    height: 0px;
    margin-bottom: 60px;
    border-bottom: 1px solid #e0e4e7;
}

ul,
ol {
    margin-top: 0;
    margin-bottom: 18px;
}


ul.aligned {
    padding-left: 20px;
}

ul.aligned li {
    margin-left: 0;
    padding-left: 20px;
}

a.pale,
a.pale:link,
a.pale:hover,
a.pale:visited,
a.pale:active {

    color: #6fb2db;
    color: #0091dc;
}

a {
    color: #0091dc;
}

a:link,
a:hover,
a:visited,
a:active {
    /*   color:#0091dc;*/
}

body.result a:hover,
body.result a:focus {
    color: #0091dc;
    text-decoration: none;
}

.btn-primary {
    border: none;
    background-color: #0091dc;
}

.btn-primary:active:hover,
.btn-primary.active:hover,
.open>.dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open>.dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open>.dropdown-toggle.btn-primary.focus,
.btn-primary:active:hover,
.btn-primary.active:hover,
.open>.dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open>.dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open>.dropdown-toggle.btn-primary.focus,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary,
.btn-primary:hover {
    border: none;
    background-color: #6fb2db;
}

.btn-gigabutton {

    border-radius: 2em;
    display: inline-block;
    white-space: normal;
    margin: auto;
    padding: 0.2em 2em;
}

.btn-gigabutton div.icon {
    display: inline-block;
    background-image: url(../images/email-icon.png);
    background-repeat: no-repeat;
    width: 36px;
    height: 36px;
    position: relative;
    top: 9px;
    padding: 0 0.4em;
}

.btn-gigabutton div {
    padding: 0 0em 0.3em 0.5em;
    display: inline-block;
    white-space: normal;
    position: relative;
    top: 0;
    font-size: 30px;
    font-weight: bold;
}


@media (max-width: 1200px) {
    .btn-gigabutton div.icon {
        display: none;
    }
    .btn-gigabutton div {
        font-size: 30px;
    }
}

@media (max-width: 767px) {
    .btn-gigabutton {
        padding: 0.3em 0.3em;
        font-size: 20px;
    }
    .btn-gigabutton div {
        font-size: 20px;
        padding: 0 0.3em;
        top: 0;
    }
}


.navbar-default {
    background-color: #FFFFFF;
    border: none;
}


.headerimage-holder {
    background-image: url(../images/pattern.jpg);
    margin-bottom: 40px;
}

.introbox {
    width: 320px;
    height: 444px;
    background-image: url(../images/introbox-bg.jpg);
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-right: 10px;
    opacity: 0;
}

.introboxes .introbox:last-child {
    margin-right: 0px;
}

.introbox .introboximage {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 33;
    background-image: url(../images/introbox-arrow.png);
    width: 95px;
    height: 103px;
    /*-webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;*/
    opacity: 0;
}

.introboxes.inview {
    animation: 1s ease-out 0s 1 fadeinanimation;
    opacity: 1;
}

.introboxes.inview .introbox .introboximage {
    animation: 1s ease-out 0s 1 fadeinfromleftanimation;
    opacity: 1;
}

.introboxes.inview .introbox {
    opacity: 1;
}



.introbox div {
    position: absolute;
    padding: 20px 15px;
}

.introbox div.white {
    color: #FFFFFF;
    font-size: 20px;
    top: 0;
    left: 0;
    font-family: 'MetaProBold', Arial, Helvetica, sans-serif;
    width: 210px;
}

.introbox div.black {
    color: #000000;
    font-size: 20px;
    left: 50px;
    width: 250px;
}

.tabletarea {
    opacity: 0;
}

.tabletarea.inview {
    opacity: 1;
    animation: 1s ease-out 0s 1 fadeinanimation;
}


.thetablet {
    width: 80%;
    margin-left: 0;
}



















/*theme */

.navbar-brand:link,
.navbar-brand:hover,
.navbar-brand:visited,
.navbar-brand:active {
    font-family: 'MetaProBold', Arial, Helvetica, sans-serif;
    color: #0091dc;
    font-size: 30px;
    padding: 0;
    margin-top: 2px;
    line-height: 0.9em;
}

.festoblue {
    color: #0091dc;
}

.darkstrong {
    font-family: 'MetaProBold', Arial, Helvetica, sans-serif;
    color: #000000;
}

.strong {
    font-family: 'MetaProBold', Arial, Helvetica, sans-serif;
}

.verticalspace {
    height: 50px;
}

.verticalspace-middle {
    height: 30px;
}

.verticalspace-small {
    height: 15px;
}

@keyframes fadeinfromleftanimation {
    0% {
        transform: translateX(-30px);
        opacity: 0;
    }
    100% {
        transform: translateX( 0);
        opacity: 1;
    }
}

@keyframes fadeinanimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}



.presonal-data-section {
    background-color: #f3f3f3;
    padding-top: 30px;
    padding-bottom: 30px;
}




.presonal-data-section input,
.presonal-data-section input.form-control:focus {
    border: none;

    box-shadow: none;
    border-radius: 0;
    display: block;
    background-color: #f3f3f3;
}

.presonal-data-section #questions-ul,
.presonal-data-section #questions-ul li {
    width: 100%;
}

.presonal-data-section #the-quiz-itself {
    background-color: transparent;
    padding: 0;
}

.presonal-data-section .oneoption input[type="text"],
.presonal-data-section .oneoption input[type="email"] {
    padding-bottom: 0;
    margin-bottom: 0;
    font-size: 18px;
    /*border-bottom:1px solid #0091dc;*/
}

.presonal-data-section .oneoption {
    position: relative;
    ;
    margin-bottom: 30px;
    width: 100%;
    border-bottom: 1px solid #8d8d8b;
}

.presonal-data-section .oneoption label {
    position: absolute;
    top: 5px;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;
    font-weight: normal;
    font-size: 18px;
    text-transform: uppercase;
}

.presonal-data-section .oneoption.open label {
    top: -60%;
}

.presonal-data-section .oneoption::after {
    content: "";
    position: absolute;
    width: 0%;
    height: 0px;
    border-bottom: 2px solid #0091dc;
    -webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    transition: all 0.4s linear;
}

.presonal-data-section .oneoption.open::after {
    width: 100%;
}

.personal-submit {
    float: right;
    text-align: right;
}

@media (max-width: 1200px) {
    .personal-submit {

        float: none;
        text-align: center;
        clear: both;
        width: 100%;
    }
}



.sponsorboxes .sponsor-box {

    background-color: #f3f3f3;
    text-align: center;
    padding: 0;
    border-left: 5px solid white;
    border-right: 5px solid white;
}

.sponsorboxes .sponsor-box img {
    display: block;
    margin: auto;
}

.sponsorboxes .sponsor-box:first-child {
    border-left-color: #f3f3f3;
}

.sponsorboxes .sponsor-box:last-child {
    border-right-color: #f3f3f3;
}

.socials {
    text-align: center;
}

.socials a:hover {
    opacity: 0.7;
}

.socials a.fb {
    background-image: url(../images/icon-fb.png);
}

.socials a.in {
    background-image: url(../images/icon-in.png);
}

.socials a.yt {
    background-image: url(../images/icon-yt.png);
}

footer .container-middle {
    height: 30px;
    margin-bottom: 80px;
    border-bottom: 1px solid #e0e4e7;
}

footer .footer-links a:link,
footer .footer-links a:hover,
footer .footer-links a:visited,
footer .footer-links a:active {
    display: inline-block;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #434341;
}



#quiz-section .headerimage-holder .container-wide .container {

    background-image: url(../images/transparentbg.png);
}

body .container-wide {
    /*background-position: center center;*/
    background-repeat: no-repeat;
    background-size: cover;
}

body.current-slide-1 .container-wide {
    /*  background-image: url(../images/step-bgs/1.jpg);*/
}


#result-section p {
    color: #3b3b3b;
}

.greystrong {

    color: #3b3b3b;
}

.emailicon {
    background-image: url(../images/email-icon-blue.png);
    background-repeat: no-repeat;
    height: 49px;
    width: 49px;
}

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

    .emailicon {
        background-position: center center;
    }
    .emailicon~div h3 {
        text-align: center;
    }
}

.result-spider-diagram-holder {
    background-image: url(../images/result-spider-diagram-bg.jpg);
    background-size: 100% 100%;
}



.has-error .form-control {

    -webkit-box-shadow: none;
    box-shadow: none;
}

.presonal-data-section .has-error label {
    color: #0091dc;
}


#introboxes {
    width: 1310px;
}







/*scroll starts */

.external-scroll_x,
.external-scroll_y {
    border: solid 1px #cccccc;
    cursor: pointer;
    display: none;
    position: absolute;
}

.external-scroll_x.scroll-scrollx_visible {
    display: block;
    height: 10px;
    left: 0;
    top: 0;
    width: 100%;
}

.external-scroll_y.scroll-scrolly_visible {
    display: block;
    height: 200px;
    left: 610px;
    top: 0;
    width: 10px;
}

.external-scroll_x div,
.external-scroll_y div {
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
}

.external-scroll_x .scroll-bar,
.external-scroll_y .scroll-bar {
    background: #cccccc;
    z-index: 12;
}

.external-scroll_x .scroll-bar {
    width: 100px;
}

.external-scroll_y .scroll-bar {
    height: 100px;
}


/*scroll ends */


/*
body.front.en .introbox.i1 div.black{
    top:220px;

}
body.front.en .introbox.i2 div.black{
    top:180px;
    
}
body.front.en .introbox.i3 div.black{
    top:220px;
}
body.front.en .introbox.i4 div.black{
    top:150px;
}


body.front.de .introbox.i1 div.black{
   top:185px;

}
body.front.de .introbox.i2 div.black{
    top:180px;
    
}
body.front.de .introbox.i3 div.black{
   top:220px;
}
body.front.de .introbox.i4 div.black{
    top:140px;
}
*/

body.front .introbox div.black {
    top: 50%;
    padding-top: 120px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

@media (max-width: 991px) {
    /*
.external-scroll_x.scroll-scrollx_visible {
    margin-top: -30px;
}


    #introboxes{
     
        transform: scale(0.8);
        transform-origin: top left;

        
    }
    .scroll-wrapper {

    height: 390px;
    }
    .scroll-wrapper > .scroll-content{
        overflow-y:hidden !important;
    }

 #introboxes-holder {
   
}
*/
    #introboxes {
        width: 1070px;
    }

    .introbox {
        background-size: 100% 100%;
        width: 256px;
        height: 355px;
    }
    .introbox .introboximage {
        width: 76px;
        background-size: 100% 100%;
        height: auto;
    }

    .introbox div.white,
    .introbox div.black {
        font-size: 15px;
        width: 165px;
        line-height: 1.3em;
    }
    .introbox div.white {
        margin-left: 2px;
        margin-top: 5px;
    }
    .introbox div {

        padding: 10px 10px;
    }
    .introbox div.black {
        width: 190px;
        padding-left: 0;
    }
    /*
body.front.en .introbox.i1 div.black{
    top:180px;

}
body.front.en .introbox.i2 div.black{
    top:135px;
    
}
body.front.en .introbox.i3 div.black{
    top:180px;
}
body.front.en .introbox.i4 div.black{
    top:130px;
}


body.front.de .introbox.i1 div.black{
    top:175px;

}
body.front.de .introbox.i2 div.black{
    top:155px;
    
}
body.front.de .introbox.i3 div.black{
    top:170px;
}
body.front.de .introbox.i4 div.black{
    top:120px;
}
*/
    body.front .introbox div.black {
        padding-top: 90px;
    }
}