@charset "UTF-8";
/* CSS Datei */

/* stylesheet: i-Tech GmbH & Co. KG, Landing-Page, Letze Aktualisierung: 09.11.2018 */

/* ========================================================================================================================= 
																RESET!
============================================================================================================================ */	

* {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size:100%;
	font-weight: normal;
	text-decoration: none;
	}
	
.clearer {
	clear: both;
	}

/* ########################### eingebundene webfonts ######################################## */

/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans-v15-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Light'), local('OpenSans-Light'),
       url('../fonts/open-sans-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
        }
/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
        }
/* open-sans-800 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/open-sans-v15-latin-800.eot'); /* IE9 Compat Modes */
  src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
       url('../fonts/open-sans-v15-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-800.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-800.svg#OpenSans') format('svg'); /* Legacy iOS */
        }

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

/* ########################### schriftformatierungen ######################################## */

h1 {
    color: #4b4b4b;
    font-family: 'Open Sans', sans-serif;
    font-size: 450%;
    font-weight: 800;
    text-align: left;
    }

.schnellkontakt {
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    }

.schnellkontakt:hover,
.schnellkontakt:active {
    text-decoration: underline; 
    }

.link {
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 1.3vw; /* 160% */
    font-weight: 300; 
    }

.align_right {
    text-align: right;
    }

.align_left {
    text-align: left;
    }

#kleines_impressum p {
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 70%;
    text-align: right;
    }

#kleines_impressum a {
    color: #fff;
    }

#kleines_impressum a:hover,
#kleines_impressum a:active {
    text-decoration: underline;
    }

.imp_content_text {
    color: #151515;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.4em;   
    }

.imp_link {
    color: #f7a823;
    }

.imp_link:hover,
.imp_link:active,
.imp_link:focus {
    text-decoration: underline;
    }

.imp_link_2:hover,
.imp_link_2:active,
.imp_link_2:focus {
    text-decoration: underline;
    }

.imp_klein {
    color: #151515;
    font-family: 'Open Sans', sans-serif;
    font-size: 80%;
    }

footer h6 {
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 90%;
    line-height: 2.5em;
    }

footer a {
    color: #888;
    font-family: 'Open Sans', sans-serif;
    font-size: 80%;
    line-height: 2.5em;
    }

footer a:hover,
footer a:active,
footer a:focus {
    color: #fff;
    }

.fo_kleingedruckt {
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 70%;
    }

.fo_a_klein {
    color: #fff;
    font-size: 100%;
    }

/* ============== span class/ typo elemente ===================== */

.bold {
    font-weight: 800;
    }

.datenschutz_sub_1 {
    font-size: 90%;
    text-decoration: underline;
    }

.datenschutz_kl {
    font-size: 80%;
    }

.datenschutz_kontakt {
    color: #f7a823;
    font-size: 90%;
    font-style: italic;
    }

/* =================================== hauptboxen eigenschaften =================================== */

body {
    background-color: #fff; /* weisser rand - weil class="wrapper" margin: 2.3vh 1.3% */
    width: 100%;
    height: 100%;
    }

.wrapper {
    background-color: #fff;
    width: 97.4%; /* 97.4% width bei 1.3% border */
    height: 95.4vh;
    margin: 2.3vh 1.3%; /* weisser rand */
    }

header {
    background-color: #fff;
    width: 100%;
    height: auto;
    padding: 12em 0 4em 0;
    }

.consulting {
    background: url(../bilder/systemhaus_v9_bg_yellow.jpg) no-repeat; 
    background-size: cover;
    width: 50%;
    height: 95.4vh; /* 94.3vh // 95.4vh da class="wrapper" auf 95.4vh wegen margin: 2.3vh 1.3% */
    cursor: url(../bilder/cursor.png),auto;
    float: left;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    }

.img_hover_con:hover {
    background: url(../bilder/systemhaus_v9_bg.jpg) no-repeat;
    background-size: cover;
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
    }

.digital_signage {
    background: url(../bilder/signage_v9_bg_yellow.jpg) no-repeat;
    background-size: cover;
    width: 50%;
    height: 95.4vh; /* 94.3vh // 95.4vh da class="wrapper" auf 95.4vh wegen margin: 2.3vh 1.3% */
    cursor: url(../bilder/cursor_2.png),auto;
    float: left;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    }

.img_hover_ds:hover {
    background: url(../bilder/signage_v9_bg.jpg) no-repeat;
    background-size: cover;
    -webkit-transition: all 0.4s ease-in;
    -moz-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
    }

#impressum {
    background: #fff;
    padding: 5em 0;
    }

footer {
    /* background: url(../bilder/background_32.jpg) no-repeat fixed; */
    background: #151515;
    height: auto;
    padding: 7em 0 4em 0;
    }

/* =================================== navigation eigenschaften =================================== */

.home_logo {
    position: fixed;
    width: 1.5%;
    height: auto;
    top: 30px;
    left: 35px;
    }

/* =================================== sonstiges eigenschaften =================================== */

.itech_logo {
    position: absolute;
    width: 6%;
    height: auto;
    top: 50px;
    left: 55px;
    }

.kontakt {
    position: absolute;
    width: 200px;
    height: auto;
    top: 100px;
    right: 100px;
    }

.telefon {
    width: 100%;
    height: auto;
    float: left;
    margin: 0 0 0.4em 0;
    }

.mail {
    width: 100%;
    height: auto;
    float: left;
    }

#button_left {
    background-color: #2b2b2b;
    width: 25%;
    height: auto;
    margin: 37vh 0 0 75%;
    border-radius: 10em 0 0 10em;
    /* width: 30%;
    height: 14.5em;
    margin: 37vh 35% 0 35%;
    border-radius: 100em; */
    }

#button_right {
    background-color: #2b2b2b;
    width: 25%;
    height: auto;
    margin: 37vh 75% 0 0;
    border-radius: 0 10em 10em 0;
    /* width: 30%;
    height: 14.5em;
    margin: 37vh 35% 0 35%;
    border-radius: 100em; */
    }

.link_right {
    padding: 1.75em 0;
    }

.link_left {
    padding: 1.75em 0;
    }

.align_right {
    padding-right: 10%;
    }

.align_left {
    padding-left: 10%;
    }

.tel_vektor {
    width: 15px;
    height: auto;
    float: left;
    margin-right: 4%;
    padding-top: 0.1em;
    }

.mail_vektor {
    width: 15px;
    height: auto;
    float: left;
    margin-right: 4%;
    padding-top: 0.25em;
    }

#kleines_impressum {
    width: 40%;
    height: auto;
    position: absolute;
    bottom: 115px;
    right: 100px;
    }

/*
.social_icons_lp {
    position: absolute;
    width: 80px;
    height: auto;
    bottom: 2.2em;
    right: 0;
    margin-bottom: 0.5em;
    }

.social_media_lp {
    width: 15px;
    height: auto;
    margin-right: 5px;
    float: left;
    }
*/

#social_link {
    position: absolute;
    width: 148px;
    height: auto;
    bottom: 2.2em;
    right: -5px; /* rechts optisch auf achse */
    margin-bottom: 0.5em;
    }

.fab_box {
    position: relative;
    width: 32px;
    height: 32px;
    margin-right: 5px;
    background: #f7a823;
    float: left;
    }

.insta {
    background: #ceb36b;
    }

.insta:hover {
    background: #ffdc80;
    }

.xing {
    background: #026466;
    /* background: #cfdc00; */
    }

.xing:hover {
    background: #0c7c7e;
    }

.facebook {
    background: #3b5998;
    }

.facebook:hover {
    background: #5371b2;
    }

.youtube {
    background: #f00;
    }

.youtube:hover {
    background: #fa3737;
    }

.fab {
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 14px;
    }

.kl_imp_text {
    margin-bottom: 1em;
    }

.nordanex_logo {
    position: absolute;
    width: 90px;
    height: auto;
    bottom: 1;
    right: 0;
    }

.heins {
    height: auto;
    width: 25%;
    padding-top: 0.5em; 
    margin: 0 58% 0 17%;
    border-top: solid 0.22em;
    }

.impressum_content {
    width: 66%;
    height: auto;
    margin: 0 17%;
    }

#footer_kasten {
    width: 70%;
    height: auto;
    margin: 0 15% 0 15%;
    }

.footer_content {
    width: 26.66%;
    height: auto;
    margin-bottom: 8em;
    float: left;
    }

footer img {
    max-width: 100%;
    }

.itech_logo_footer {
    width: 30%;
    height: auto;
    }

.fo_right {
    margin-right: 10%;
    }

.social_icons_wrapper {
    width: 100%;
    height: auto;
    margin-top: 2.5em;
    }

.social_media_svg {
    width: 4.5%;
    height: auto;
    margin-right: 2%;
    }

/* =================================== nqp_partner.html eigenschaften =================================== */

#nqp_partner {
    background: #fff;
    background: url(../bilder/background_2.jpg) no-repeat fixed;
    width: 100%;
    height: auto;
    }

#nqp_kasten {
    width: 64%;
    height: auto;
    padding: 12em 0 13em 0;
    margin: 0 18% 0 18%;
    }

.nqp_kasten_float {
    width: 100%;
    height: auto;
    float: left;
    }

.nqp_kasten_float_2 {
    width: 100%;
    height: auto;
    margin: 13em 0 0 0;
    float: left;
    }

.nqp_sign {
    width: 8%;
    height: 2em;
    margin: 0 22.66% 0 0; 
    float: left;
    }

.nqp_sign_right {
    width: 8%;
    height: 2em;
    float: left;
    }

.logos {
    width: 100%;
    height: auto;
    }

/* =================================== formular meldung html eigenschaften =================================== */

/* ////////////
fonts */

.form_meldung {
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 300%;
    font-weight: 800;
    text-transform: uppercase;
    }

.mailto_fehler {
    color: #f7a823;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    }

.mailto_fehler:hover,
.mailto_fehler:active,
.mailto_fehler:focus {
    text-decoration: underline;
    }

.back_home {
    color: #f7a823;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    }

.back_home:hover,
.back_home:active,
.back_home:focus {
    text-decoration: underline;
    }

/* ////////////
sonstiges */

#meldung {
    background: #151515;
    width: 100%;
    height: 100vh;
    }

.form_meldung {
    width: 50%;
    padding: 1em;
    }

/* ############################################################# */
/* ####################### BREAKPOINTS ######################### */
/* ############################################################# */

/* =========================== Tablet ========================== */

@media screen and (max-width: 1024px) {
    
    /* #### SCHRIFTEN #### */
    
    .link {
        font-size: 2.2vw;
        }
    
    #kleines_impressum p {
        text-align: left;
        }
    
    h1 {
        font-size: 350%;
        }
    
    footer h6 {
        font-size: 85%;
        }

    footer a {
        font-size: 75%;
        line-height: 3em;
        }

    .fo_kleingedruckt {
        font-size: 60%;
        }
    
    .imp_content_text {
        font-size: 90%;  
        }

    .imp_klein {
        font-size: 70%;
        }
    
    /* #### SONSTIGES #### */
    
    .itech_logo {
        min-width: 80px;
        top: 30px;
        left: 30px;
        }
    
    #button_left {
        width: 40%;
        margin: 37vh 0 0 60%;
        }

    #button_right {
        width: 40%;
        margin: 37vh 60% 0 0;
        }

    .kontakt {
        width: 50%;
        top: 85px;
        left: 30px;
        }
    
    .tel_vektor {
        width: 15px;
        margin-right: 3%;
        }

    .mail_vektor {
        width: 15px;
        margin-right: 3%;
        }
    
    #kleines_impressum {
        width: 80%;
        left: 30px;
        bottom: 55px;
        }
    
/*
     .social_icons_lp {
        left: 0;
        bottom: 36px;
        }
*/
    
    #social_link {
        left: 0;
        }
    
    .nordanex_logo {
        width: 80px;
        left: 0;
        }
    
    header {
        padding: 6em 0 2em 0;
        }
    
    .heins {
        padding-top: 0.2em;
        margin: 0 70% 0 5%;
        }
    
    footer {
        padding: 3em 0 3em 0;
        }
    
    #footer_kasten {
        width: 90%;
        margin: 0 5% 0 5%;
        }

    .footer_content {
        width: 30%;
        margin-bottom: 4em;
        }

    .fo_right {
        margin-right: 5%;
        }

    .social_media_svg {
        width: 14px;
        margin-right: 3%;
        }
    
     #nqp_kasten {
        width: 90%;
        padding: 3em 0 3em 0;
        margin: 0 5% 0 5%;
        }

    .nqp_kasten_float {
        width: 100%;
        height: auto;
        float: left;
        }

    .nqp_kasten_float_2 {
        margin: 4em 0 0 0;
        }
    
    #impressum {
        padding: 3em 0;
        }
    
    .impressum_content {
        width: 90%;
        margin: 0 5%;
        }
    
    .home_logo {
        width: 20px;
        top: 20px;
        left: 20px;
        }
}

/* =========================== Mobile ========================== */

@media screen and (max-width: 480px) {
    
    /* #### SCHRIFTEN #### */
    
    .link {
        font-size: 200%;
        font-weight: bold;
        }
    
    .align_right {
        text-align: left;
        }
    
    #kleines_impressum p {
        text-align: left;
        }
    
    h1 {
        font-size: 200%;
        }
    
    footer h6 {
        font-size: 75%;
        }

    footer a {
        font-size: 65%;
        line-height: 3em;
        }
    
    .fo_kleingedruckt {
        font-size: 55%;
        }
    
    .imp_content_text {
        font-size: 80%;  
        }

    .imp_klein {
        font-size: 60%;
        }
    
    /* #### SONSTIGES #### */
    
    .wrapper {
        width: 100%;
        height: 100vh;
        margin: 0;
        }
    
    .consulting {
        height: 50vh;
        width: 100%;
        float: none;
        }
    
    .digital_signage {
        height: 50vh;
        width: 100%;
        float: none;
        }
    
    #button_left {
        position: absolute;
        background: none;
        width: 80%;
        top: 30vh;
        left: 10px;
        margin: 0;
        }
    
    #button_right {
        position: absolute;
        background: none;
        width: 80%;
        top: 55vh;
        left: 10px;
        margin: 0;
        }
    
    .itech_logo {
        display: none;
        }
    
    .link_right {
        padding: 0;
        }

    .link_left {
        padding: 0;
        }

    .align_right {
        padding: 0;
        }

    .align_left {
        padding: 0;
        }
    
    .kontakt {
        background: rgba(247, 168, 35, 0.9);
        width: 90%;
        padding: 4px;
        border-radius: 6px;
        top: 10px;
        left: 10px;
        }
    
    .tel_vektor {
        width: 15px;
        margin-right: 2%;
        }

    .mail_vektor {
        width: 15px;
        margin-right: 2%;
        }
    
    #kleines_impressum {
        width: 90%;
        bottom: 35px;
        left: 10px;
        }
    
    .social_icons_lp {
        bottom: 52px;      
        }
    
    header {
        padding: 4em 0 1em 0;
        }
    
    .heins {
        padding-top: 0.1em;
        }
    
    footer {
        padding: 2em 0 2em 0;
        }
    
    #footer_kasten {
        width: 90%;
        margin: 0 5% 0 5%;
        }

    .footer_content {
        width: 100%;
        margin-bottom: 1em;
        float: none;
        }

    .fo_right {
        margin-right: 0;
        }
    
    .itech_logo_footer {
        width: 20%;
        }
    
    .social_icons_wrapper {
        margin-top: 0.5em;
        }

    .social_media_svg {
        width: 14px;;
        margin-right: 2%;
        float: none;
        }
    
    #nqp_kasten {
        width: 90%;
        padding: 2em 0 2em 0;
        margin: 0 5% 0 5%;
        }

    .nqp_kasten_float {
        width: 100%;
        }

    .nqp_kasten_float_2 {
        margin: 3em 0 0 0;
        }
    
    .nqp_sign {
        width: 12%;
        height: 2.5em;
        margin: 0 17.33% 0 0; 
        }

    .nqp_sign_right {
        width: 12%;
        height: 2.5em;
        }
    
     #impressum {
        padding: 1em 0;
        }
    
    .home_logo {
        width: 15px;
        top: 10px;
        left: 10px;
        }
}