/* archivo-black-regular - latin */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/archivo-black-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/archivo-black-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/archivo-black-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/archivo-black-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/archivo-black-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/archivo-black-v17-latin-regular.svg#ArchivoBlack') format('svg'); /* Legacy iOS */
}



/* varela-round-regular - latin */
@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/varela-round-v19-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/varela-round-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/varela-round-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/varela-round-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/varela-round-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/varela-round-v19-latin-regular.svg#VarelaRound') format('svg'); /* Legacy iOS */
}



/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/roboto-v30-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-300italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/roboto-v30-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-300italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/roboto-v30-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/roboto-v30-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-500.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-500italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/roboto-v30-latin-500italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-500italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-500italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-v30-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-700italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/roboto-v30-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-700italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-900 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/roboto-v30-latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-900.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-900.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-900italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 900;
  src: url('fonts/roboto-v30-latin-900italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-900italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-900italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-900italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-900italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-900italic.svg#Roboto') format('svg'); /* Legacy iOS */
}








body {   -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
         box-sizing: border-box;
         margin:0;
         padding:0;


         animation:fadein 0.9s;
         -moz-animation:fadein 0.9s;
         -webkit-animation:fadein 0.9s;
         scroll-behavior: smooth;

         /*
         -ms-user-select: none;
         -webkit-user-select: none;
         -moz-user-select: none;
         user-select: none;
         */

         }



.wrapper {
        max-width: 1280px;
        padding: 0 0 0 0;
        margin: 0 auto;
         }

@media all and (max-width: 1300px) {
        .wrapper {
        padding: 0 15px 0 15px;
         }
}



.wrapperwide {
        max-width: 1920px;
        padding: 0 80px 0 80px;
        margin: 0 auto;
         }


@media all and (max-width: 1460px) {
        .wrapperwide {
        padding: 0 15px 0 15px;
         }
}




/* ============ Backgrounds ===============      */
.bgcolor_antworten {background-color: #032651; }


.bgcolor_hero {background-color: #133F46; }
.bgcolor_print {background-color: #DFDFDF; }
.bgcolor_video {background-color: #EFEFEF; }

.bgcolor_midgrey {background-color: #AFAFAF; }

.bgcolor_startup {background-color: ##FFFFFF; }

.bgcolor_black {background-color: #000000; }



/* ============ FONTS ATTRIBUTES =============== */


















/* ==== LOGO ======= */
.logo { width:400px; margin:10px 0 10px 15%;}
@media all and (max-width: 1200px) {.logo { width:400px; margin:10px 0 10px 20px;} }
@media all and (max-width: 1000px) {.logo { width:300px; } }
@media all and (max-width: 600px) {.logo { width:200px; }  }

/* ====== abstand unter header===== */
.menuunder { height:150px; background:#FFFFFF;}
@media all and (max-width: 1200px) {.menuunder { height:150px; } }
@media all and (max-width: 1000px) {.menuunder { height:150px; } }
@media all and (max-width: 600px) {.menuunder { height:150px; }  }













/* ========================================= IMG =============== */
img {width:100%;}

.img100 {width:100%; border:0px solid #FF0000;}
.img75 {width:75%; margin-left:12.5%}

.img74 {width:74%; margin-left:0%}
.img60 {width:60%; margin-left:0%}
.img50 {width:50%; margin-left:0%}
.img50c {width:50%; margin-left:25%}


.imgtwin {width: 50%;float:left;}
         @media all and (max-width: 560px) { .imgtwin {width: 100%;}}

.imgthirds {width: 33.33%;float:left;}
         @media all and (max-width: 560px) {  .imgthirds {width: 100%;}}

.imgquads {width: 25%;float:left;}
         @media all and (max-width: 560px) {.imgquads {width: 50%;}}



.imgarrows {width: 15%; margin-left:24%; margin-bottom:20px;}
         @media all and (max-width: 560px) {.imgquads {width: 50%;}}


.imgjobskala {width: 50%; margin-left:25%; margin-top:40px;}
         @media all and (max-width: 560px) { .imgjobskala {width: 70%; margin-left:15%; margin-top:10px;}}



.zoom img {
         z-index:-50;
        -webkit-transition: all 2.8s ease-in-out;
        -moz-transition: all 2.8s ease-in-out;
        -o-transition: all 2.8s ease-in-out;
        -ms-transition: all 2.8s ease-in-out;
        transition: all 2.8s ease-in-out;
}

.zoom:hover img {
         z-index:-50;
        transform: scale(1.05, 1.05);

        -webkit-transition: all 2.8s ease-in-out;
        -moz-transition: all 2.8s ease-in-out;
        -o-transition: all 2.8s ease-in-out;
        -ms-transition: all 2.8s ease-in-out;
        transition: all 2.8s ease-in-out;
}





.grafiken {padding:0px 100px 0 100px}
        @media all and (max-width: 1500px) { .grafiken {padding:2px 15px 0 15px} }


.btow {background-image: linear-gradient(#000000, #FFFFFF); height:150px;}


.imgthema {width: 300px;}
         @media all and (max-width: 560px) { .imgthema {width: 100%;}}


.icondrucker {
        width: 30px;
        margin-left:5px;
        vertical-align: middle;
        border:0px solid #00BF00;
}

/* ============ buttons =============== */

.goto50,
.goto100 {
        margin-top:20px;
        border: 1px solid #5f8ce9;
        background: #5f8ce9;


          display: -webkit-flex;
          display:         flex;
          -webkit-align-items: center;
                  align-items: center;
          -webkit-justify-content: center;
                  justify-content: center;


        opacity:1;


        font-family: 'Roboto', sans-serif;
                font-size: 80%;
                font-weight:600;
                color:  #FFFFFF;
                line-height:1.3em;
                letter-spacing: 0.1em;
                text-align:center;
                text-transform: uppercase;


        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
}

.goto50 {
        width: calc(50% - 4px);
        height: 80px;
        float:left;
}



.goto100 {
        height: 80px;
        width: calc(100% - 2px);
        margin-left:0%;
        margin-bottom:0px;

}


.goto50:hover,
.goto100:hover {
        cursor:pointer;
        color: #FFFFFF;
        background: #5f8ce9;
        transform: scale(1.0);

        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
         opacity:0.8;
}



/* Mid screens */
@media all and (max-width: 1700px) {
        .goto100 {
        height: 60px;

                }
}














.gotomore {
        margin-top:20px;
        border: 1px solid #5f8ce9;

        width: 50%;
        margin-left:25%;
        height: 80px;
        background: #FFFFFF;

          display: -webkit-flex;
          display:         flex;
          -webkit-align-items: center;
                  align-items: center;
          -webkit-justify-content: center;
                  justify-content: center;


        opacity:1;

        font-family: 'Roboto', sans-serif;
                font-size: 80%;
                font-weight:600;
                color: #5f8ce9;
                line-height:1.3em;
                letter-spacing: 0.1em;
                text-align:center;
                text-transform: uppercase;

        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
}



.gotomore:hover {
        cursor:pointer;
        color: #FFFFFF;
        border: 1px solid #AFAFAF;
        background: #5f8ce9;

        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
         opacity:0.8;
}







.gotojob {
        margin-top:10px;
        border-bottom: 1px solid #5f8ce9;

        width: calc(50% - 2px);
        margin-left:25%;



          -webkit-align-items: center;
                  align-items: center;
          -webkit-justify-content: left;
                  justify-content: left;


        opacity:1;

        font-family: 'Varela Round', sans-serif;
                font-size: 90%;
                font-weight:500;
                color: #000000;
                line-height:1.3em;
                letter-spacing: 0.05em;
                text-align:left;
                text-transform: uppercase;
                padding:0px 0 10px 0;

        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;

        margin-bottom:0px;
}


/*
.gotojob:hover {
        cursor:pointer;
        color: #FFFFFF;
        border-bottom: 1px solid #5f8ce9;
        background: #5f8ce9;
        transform: scale(1.0);

        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
         opacity:0.8;
}
*/


/* Mid screens */
@media all and (max-width: 960px) {
        .gotojob {
        width: calc(100% - 2px);
        margin-left:0%;


                }
}





/* Tasten unter liniengetrennten aufz hlungen auf Subseiten */
.gotodetails {
        margin-top:10px;
        border: 0px solid #5f8ce9;

        width: 100%;

        height: 36px;
        background: #1C4EAE;

          display: -webkit-flex;
          display:         flex;
          -webkit-align-items: center;
                  align-items: center;
          -webkit-justify-content: center;
                  justify-content: center;


        opacity:1;

        font-family: 'Roboto', sans-serif;
                font-size: 80%;
                font-weight:600;
                color: #5f8ce9;
                line-height:1.3em;
                letter-spacing: 0.1em;
                text-align:center;
                text-transform: uppercase;

        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
}



.gotodetails:hover {
        cursor:pointer;
        color: #FFFFFF;
        border: 0px solid #AFAFAF;
        background: #5f8ce9;

        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
         opacity:0.8;
}








/* ============ buttons =============== */
/* darkblue 5 nebeneinander */
.gotothema {
        margin:0 4px 4px 0;
        border-top: 0px solid #5f8ce9;
        border-left: 1px solid #29466b;
        border-right: 1px solid #000000;
        border-bottom: 0px solid #000000;

        background: #0a376f;

        width: calc(20% - 8px);
        height: 50px;
        float:left;

          display: -webkit-flex;
          display:         flex;
          -webkit-align-items: center;
                  align-items: center;
          -webkit-justify-content: center;
                  justify-content: center;


        opacity:1;


        font-family: 'Roboto', sans-serif;
                font-size: 80%;
                font-weight:600;
                color:  #FFFFFF;
                line-height:1.3em;
                letter-spacing: 0.1em;
                text-align:center;
                text-transform: uppercase;


        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
}

.gotothema:hover {
        cursor:pointer;
        color: #FFFFFF;
        background: #5f8ce9;
        transform: scale(1.0);

        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
         opacity:0.8;
}



@media all and (max-width: 1200px) {.gotothema {width: calc(25% - 8px); height: 50px;  }}
@media all and (max-width: 900px) {.gotothema {width: calc(33% - 8px); height: 50px;  }}
@media all and (max-width: 560px) {.gotothema {width: calc(50% - 8px); height: 50px;  }}







/* darkblue 50%, 50%centered, 100% breit */
.gotoblue50,
.gotoblue50c,
.gotoblue100 {
        margin:0 4px 4px 0;
        border-top: 0px solid #5f8ce9;
        border-left: 0px solid #29466b;
        border-right: 0px solid #000000;
        border-bottom: 0px solid #000000;

        background: #0a376f;

        height: 50px;

          display: -webkit-flex;
          display:         flex;
          -webkit-align-items: center;
                  align-items: center;
          -webkit-justify-content: center;
                  justify-content: center;


        opacity:1;


        font-family: 'Roboto', sans-serif;
                font-size: 80%;
                font-weight:600;
                color:  #FFFFFF;
                line-height:1.3em;
                letter-spacing: 0.1em;
                text-align:center;
                text-transform: uppercase;


        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
}


.gotoblue50  {width:  50%;}
.gotoblue50c {width:  50%; margin-left:25%}
.gotoblue100 {width:  100%;}

.gotoblue50:hover,
.gotoblue50c:hover,
.gotoblue100:hover {
        cursor:pointer;
        color: #FFFFFF;
        background: #5f8ce9;
        transform: scale(1.0);

        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;
         opacity:0.8;
}



@media all and (max-width: 1200px) {.gotoblue50 {width: 50%; height: 50px;  }}
@media all and (max-width: 900px) {.gotoblue50 {width: 50%; height: 50px;  }}
@media all and (max-width: 560px) {.gotoblue10 {width: 100%; height: 50px;  }}











.kachelingrid  {width:  100%; opacity:0.3; -webkit-transition: .3s ease-in-out; transition: .2s ease-in-out;}
.kachelingridon {opacity:1;}
.kachelingrid:hover {opacity:1; -webkit-transition: .3s ease-in-out; transition: .2s ease-in-out;}
.opp100 {opacity:1;}
























.ergaenzungstext {
        margin-top:10px;
        border-bottom: 1px solid #5f8ce9;

        width: calc(100% - 2px);
        margin-left:0%;


          -webkit-align-items: center;
                  align-items: center;
          -webkit-justify-content: left;
                  justify-content: left;


        opacity:1;

        font-family: 'Roboto', sans-serif;
                font-size: 90%;
                font-weight:500;
                color: #000000;
                line-height:1.3em;
                letter-spacing: 0.05em;
                text-align:left;
                text-transform: uppercase;
                padding:0px 0 10px 0;

        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;

        margin-bottom:0px;
}



/* Mid screens */
@media all and (max-width: 960px) {
        .ergaenzungstext {
        width: calc(100% - 2px);
        margin-left:0%;

                }
}



.ergaenzungstext_02 {
        margin-top:10px;
       border-bottom: 1px solid #032651;

        width: calc(100% - 2px);
        margin-left:0%;


          -webkit-align-items: center;
                  align-items: center;
          -webkit-justify-content: left;
                  justify-content: left;


        opacity:1;

        font-family: 'Roboto', sans-serif;
                font-size: 90%;
                font-weight:500;
                color: #032651;
                line-height:1.3em;
                letter-spacing: 0.05em;
                text-align:left;
                text-transform: uppercase;
                padding:0px 0 10px 0;

        -webkit-transition: .3s ease-in-out;
          transition: .2s ease-in-out;

        margin-bottom:0px;
}



/* Mid screens */
@media all and (max-width: 960px) {
        .ergaenzungstext {
        width: calc(100% - 2px);
        margin-left:0%;

                }
}








/* ============ FONTS TYPES =============== */






h1,
h2 {    font-family: 'Archivo Black', sans-serif;
        font-weight:800;
        line-height: 1.1em;
        letter-spacing:0.0em;
        color: #5f8ce9;
        text-transform:uppercase;
        margin:0;
}



.head1 {font-size:400%;}
         @media all and (max-width: 1200px){.head1 {font-size:280%; }}
         @media all and (max-width: 800px) {.head1 {font-size:240%; }}
         @media all and (max-width: 640px) {.head1 {font-size:190%; }}


.head2 {font-size:220%; color: #000000;  }
         @media all and (max-width: 1200px){.head2 {font-size:180%; line-height: 1.3em; }}
         @media all and (max-width: 800px) {.head2 {font-size:140%; line-height: 1.3em; }}
         @media all and (max-width: 640px) {.head2 {font-size:115%; line-height: 1.3em; }}



p {
        font-family: 'Roboto', sans-serif;

        font-size: 100%;
        font-weight:400;
        color: #000000;
        line-height:150%;
        letter-spacing: 0.05em;
         -moz-hyphens: auto;
         -o-hyphens: auto;
         -webkit-hyphens: auto;
         -ms-hyphens: auto;
         hyphens: auto;
}




         @media all and (max-width: 1200px){p {font-size:100%; line-height: 1.5em; }}
         @media all and (max-width: 860px) {p {font-size:95%; line-height: 1.5em; }}
         @media all and (max-width: 640px) {p {font-size:95%; line-height: 1.4em; }}
         @media all and (max-width: 560px) {p {font-size:90%; line-height: 1.4em; }}




.anlauf {
        font-size: 125%;
}

         @media all and (max-width: 1200px){.anlauf {font-size:110%; line-height: 1.5em; }}
         @media all and (max-width: 860px) {.anlauf {font-size:100%; line-height: 1.5em; }}
         @media all and (max-width: 640px) {.anlauf {font-size:95%; line-height: 1.4em; }}
         @media all and (max-width: 560px) {.anlauf {font-size:90%; line-height: 1.4em; }}



.kennung  {
        font-weight:300;
        font-size:100%;
        line-height: 120%;
        text-transform:uppercase;
        margin:10px 0 10px 0;
        }
@media all and (max-width: 640px) {.kennung {font-size:80%;}}








/* ------------- HOME /  Textbreiten verk rzt ------ */
.shorter_311 { margin-left:0px;}
.shorter_113 { margin-left:0%}




.tipp {
        font-family: 'Roboto', sans-serif;
        font-size: 100%;
        font-weight: 400;
        color: #000000;
        line-height:150%;
        letter-spacing: 0.05em;
        border-left:10px solid #8F8F8F;
        border-top:1px solid #8F8F8F;
         -moz-hyphens: auto;
         -o-hyphens: auto;
         -webkit-hyphens: auto;
         -ms-hyphens: auto;
         hyphens: auto;
         padding:5px 0 5px 15px;
}
         @media all and (max-width: 1200px){.tipp {font-size:90%; line-height: 1.5em; }}
         @media all and (max-width: 860px) {.tipp {font-size:85%; line-height: 1.5em; }}
         @media all and (max-width: 640px) {.tipp {font-size:85%; line-height: 1.4em; }}
         @media all and (max-width: 560px) {.tipp {font-size:80%; line-height: 1.4em; }}




.ziffer {font-size:1000%;margin-left:15%; color:#000000; }
         @media all and (max-width: 1500px) {.ziffer {font-size:800%; }}
         @media all and (max-width: 1200px) {.ziffer {font-size:600%; }}
         @media all and (max-width:  800px) {.ziffer {font-size:500%; }}
         @media all and (max-width:  640px) {.ziffer {font-size:400%; }}


.ziffer2 {font-size:1000%;margin-left:0%; color:#000000; }
         @media all and (max-width: 1500px) {.ziffer2 {font-size:800%; }}
         @media all and (max-width: 1200px) {.ziffer2 {font-size:600%; }}
         @media all and (max-width:  800px) {.ziffer2 {font-size:500%; }}
         @media all and (max-width:  640px) {.ziffer2 {font-size:400%; }}





.little {
        font-size: 80%;
        color: #000000;
        line-height:160%;

}
         @media all and (max-width: 1200px){.little {font-size:80%; line-height: 1.6em; }}
         @media all and (max-width: 860px) {.little {font-size:75%; line-height: 1.5em; }}
         @media all and (max-width: 640px) {.little {font-size:65%; line-height: 1.4em; }}







.joblisthead {
        font-weight:600;
        line-height: 1.4em;
        letter-spacing:0.15em;
        color: #5f8ce9;
        text-transform:uppercase;

}







ul  {   font-family: 'Roboto', sans-serif;
        font-size: 100%;
        font-weight: 300;
        color: #333;
        line-height:140%;
        letter-spacing: 0.05em;
        padding-left: 14px;
        list-style-type: square;
}

         @media all and (max-width: 1200px){ul {font-size:100%; line-height: 1.4em; }}
         @media all and (max-width: 860px) {ul {font-size:90%; line-height: 1.4em; }}
         @media all and (max-width: 640px) {ul {font-size:85%; line-height: 1.4em; }}


li  {   margin-bottom:10px;}

.job  { padding-bottom:20px; }












a {
        color: #CFCFCF; text-decoration: none;
}

a:hover {
        color: #5f8ce9;
}


/*  ----- footer  --- */






.footer {background-color: #1F1F1F; }

.p_footer {
        font-size: 95%;
        font-weight: 300;
        color: #FFFFFF;
        line-height:160%;
        letter-spacing: 0.15em;
        text-transform:uppercase;
        margin:0;
}
@media all and (max-width: 1200px) {.p_footer {font-size:85%; line-height: 140%; }}
@media all and (max-width: 860px) {.p_footer {font-size:75%; line-height: 140%; letter-spacing: 0.05em; }}
/*
.jump {
        color: #FFFFFF; text-decoration: none;
}

.jump:hover {
        color: #c3916a;
}

*/




/* ============ FONTS ATTRIBUTES ===============*/


.white {color: #FFFFFF;}

.rot, .red {color: #FF0066;}

.darkblue {color: #032651;}


.green {color: #1C8F79;}
.colfussball {color: #A7D316;}

.caram {color: #5f8ce9;}
.grey  {color: #6F6F6F;}

.grundpreis   {color: #B689EA;}
.direktpreis  {color: #4AECCC;}


.right {text-align:right;}
         @media all and (max-width: 640px) {.right {text-align:right; }}

.center {text-align:center;}
         @media all and (max-width: 640px) {.center {text-align:left; }}

.center2 {text-align:center;}

/*  ----- lines  --- */
.dottedline
        {
        margin:10px 0 10px 0;
        border-top: 2px dotted  #000000;
        height: 1px;
        width: 100%;
}


.blueline
        {
        border-bottom: 1px solid #5f8ce9;

}





.pricebox {
        border-left:2px solid #8F8F8F;
        border-bottom:2px solid #8F8F8F;
        padding:0px 0 15px 15px;
}



/*  ----- distancer  --- */

.gap5   {border-left: 0px solid; height: 5px; width: 0px;}
.gap10   {border-left: 0px solid; height: 10px; width: 0px;}
.gap20   {border-left: 0px solid; height: 20px; width: 0px;}
.gap40   {border-left: 0px solid; height: 40px; width: 0px;}
.gap56   {border-left: 0px solid; height: 56px; width: 0px;}
.gap60   {border-left: 0px solid; height: 60px; width: 0px;}
.gap80   {border-left: 0px solid; height: 80px; width: 0px;}
.gap100   {border-left: 0px solid; height: 100px; width: 0px;}


@media all and (max-width: 860px) {
.gap5   {border-left: 0px solid; height: 5px; width: 0px;}
.gap10   {border-left: 0px solid; height: 5px; width: 0px;}
.gap20   {border-left: 0px solid; height: 10px; width: 0px;}
.gap40   {border-left: 0px solid; height: 20px; width: 0px;}
.gap60   {border-left: 0px solid; height: 30px; width: 0px;}
.gap80   {border-left: 0px solid; height: 40px; width: 0px;}
.gap100   {border-left: 0px solid; height: 50px; width: 0px;}
}



/*  ----- displaying  --- */


.displaysmart_none {display: none;}
         @media all and (min-width: 560px) {.displaysmart_none {display: block;}
}


.displaysmart_on {display: none;}
         @media all and (max-width: 559px) {.displaysmart_on {display: block;}
}




/*  ----- displaying 2 breiter --- */

.displaysmart_none2 {display: none;}
         @media all and (min-width: 1400px) {.displaysmart_none2 {display: block;}
}


.displaysmart_on2 {display: none;}
         @media all and (max-width: 1399px) {.displaysmart_on2 {display: block;}
}



/* -------------- In und out unterschiedlicher Contents ---------------- */

/* Mid screens - schaltet bei Tablets aus: */
@media all and (max-width: 1000px) {
        .displaynone_mid {
                display:none;
                }
}

/*  ... schaltet bei Tablets ein
                 bei gr  eren  aus*/
@media all and (min-width: 1000px) {
        .displaymob_mid {
                display:none;
                }
}


/* Small screens - schaltet bei kleineren aus - bei gr  eren an: */
@media all and (max-width: 561px) {
        .displaynone {
                display:none;
                }
}



/*  ... schaltet bei kleineren ein
                 bei gr  eren  aus*/
@media all and (min-width: 560px) {
        .displaymob {
                display:none;
                }
}



@media all and (max-width: 800px) {
        .nodisplay800 {
                display:none;
                }
}


@keyframes fadein{
        from{
        opacity:0;}to{opacity:1;}}
        @-moz-keyframes fadein{from{opacity:0;}to{opacity:1;}}
        @-webkit-keyframes fadein{from{opacity:0;}to{opacity:1;}}
        @-o-keyframes fadein{from{opacity:0;}to{opacity:1;}}
}


.easing_scaling {
         -webkit-animation: scale 0.7s ease-in-out;
         -moz-animation: scale 0.7s ease-in-out;
         animation: scale 0.7s ease-in-out;
         }


         @keyframes scale {
                 0% {
                 transform: scale(0.9);
                 opacity: 0;
                 }
                 50% {
                 transform: scale(1);
                 opacity: 0.8;
                 }
                 100% {
                 transform: scale(1);
                 opacity: 1;
                 }
         }