/* ********************************************* */
/* Global */

html, body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;

}

.bg-gray {
    background-color: gainsboro;
}

#mycronexlogo {
    height: 60;
    margin: 20 40 20 20;
    float: left;
}

#tyreconnexion {
    height: 60;
    float: right;
    margin: 13 20 20 20;
}

.topnav {
    /* Add a black background color to the top navigation */
    /* background-color: rgb(255, 255, 255); */
    /* overflow: hidden; */
    /* display: inline-block; */
    height: 70;
}

.topnav a {
    /* Style the links inside the navigation bar */
    float: left;
    /* margin: 30 20 20 20; */
    /* top right bottom left */
    padding: 23;
    /* text-decoration: none; */
    /* display: inline-block; */
    font-size: 15pt;
    text-align: center;


}

.topnav a:hover {
    /* Change the color of links on hover */
    color: black;
}

.topnav a.active {
/* Add a color to the active/current link */
    color: rgb(60, 157, 196)
}

p {
    line-height: 1.3;
    margin-top: 0px;
    font-size: 12pt;
}

/* Big banner accross screen */
.imglandscape {
    width: 100%;
}

.bluefont {
    color: rgb(60, 157, 196);
}

.mainblue {
    color: rgb(60, 157, 196);
}

.h1black {
    text-align: center;
    padding: 30 0 30 0;
    font-size: 40;
}

.pmain {
    text-align: center;
    font-size: 24;
}

.h1blue {
    color: rgb(60, 157, 196);
    text-align: center;
}

.centered {
    text-align: center;
}

.graybox {
    background-color: gainsboro;
}


/* ********************************************* */
/* Index */

#reifenaufschnitt {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    max-width: 850;
    padding: 50 0 50 0;
}

.grayboxfull1col {
    background-color: gainsboro;
    padding: 40 200 40 200;
}

.grayboxfull2col {
    background-color: gainsboro;
}

.column1 {
    float: left;
    width: 40%;
    padding: 30 15 30 6%;
}

.grayboxfull2col:after {
    content: "";
    display: table;
    clear: both;
}

#habouridyllic {
    width: 100%;
}

#tyreconnexionlogoinh1 {
    height: 60;
    padding: 0 6 0 0;
}

/* ********************************************* */
/* Produkte */
.productbox {
    /* border: 1px solid green; */
    overflow: hidden;
    width: 100%;
    margin-top: 60;
}

/* 1. Produkt */
#standaloneleft {
    float: left;
    width: 40%;
    min-width: 260;
    max-width: 360;
    padding: 35 10 10 50;
}

#standaloneright {
    width: 40%;
    min-width: 280;
    float: left;
    padding: 10 20 0 40;
}

/* 2. Produkt */
#canbusleft {
    /* height: 380; */
    width: 20%;
    min-width: 180;
    max-width: 270;
    float: left;
    padding: 20 0 20 0;
}

#canbusmiddle {
    float: left;
    width: 33%;
    min-width: 300;
    max-width: 380;
    padding: 0 10 0 20;
}

#canbusright {
    width: 30%;
    min-width: 280;
    max-width: 380;
    float: left;
    padding: 20 10 10 10;
}

/* 3. Produkt */
#trucktrailerleft {
    float: left;
    width: 40%;
    min-width: 260;
    max-width: 360;
    padding: 35 10 10 50;
}

#trucktrailerright {
    width: 40%;
    min-width: 300;
    max-width: 480;
    float: left;
    padding: 10 20 0 30;
}


/* 4. Produkt */
#gateleft {
    width: 23%;
    min-width: 170;
    max-width: 250;
    float: left;
    padding: 23 10 10 0;
}

#gatemiddle {
    float: left;
    width: 33%;
    min-width: 240;
    max-width: 440;
    padding: 0 10 10 30;
}

#gateright {
    width: 33%;
    min-width: 300;
    max-width: 390;
    float: left;
    padding: 20 10 10 30;
}

/* 5. Produkt */
#telematikleft {
    float: left;
    width: 40%;
    min-width: 360;
    max-width: 550;
    padding: 35 20 20 30;
}

#telematikright {
    width: 40%;
    max-width: 380;
    float: left;
    padding: 10 20 0 20;
}


/* ********************************************* */
/* Features */

#featurewrapper {
    margin: 6% 0 10% 8%;
    overflow: hidden;
}

.column2 {
    float: left;
    width: 40%;
    /* border: 1px solid green; */
    padding: 20;
  }

  .column3left {
    float: left;
    width: 23%;
    /* border: 1px solid orangered; */
    
  }
  .column3right {
    float: left;
    width: 65%;
    /* border: 1px solid orchid; */
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
    /* border: 1px solid orange; */
  }

.featureicon {
    width: 50%;
    max-width: 60;
    padding: 25 5 5 20%;
}


/* ********************************************* */
/* Technologie */

#technologyuntertitel {
    font-style: italic;
}

/* Modul */
#modul {
    overflow: hidden;
    /* border: 1px solid red; */
    width: 100%;
    margin: 40 0 80 0;
}

#modulimg {
    float: left;
    width: 20%;
    min-width: 200;
    max-width: 240;
    padding: 30 30 0 10%;
}

#modultext {
    float: left;
    width: 60%;
    max-width: 600;
}


/* Radsensoren */
#radsensoren {
    float: left;
    /* border: 1px solid orange; */
    overflow: hidden;
    width: 100%;
    margin: 0 0 80 0;

}

#radsensorentext {
    float: left;
    width: 60%;
    max-width: 600;
    padding: 0 0 0 10%;
}

#radsensorenimg {
    float: left;
    width: 180;
    padding: 20;
}


/* Vorteile */
#vorteile {
    float: left;
    /* border: 1px solid purple; */
    width: 100%;
    max-width: 800;
    padding: 0 30% 0 10%;
    margin: 0 0 80 0;

}

#vorteile li {
    line-height: 1.8;
    padding: 0 100 0 0;
}


/* ********************************************* */
/* Kontakt */
#contact {
    padding: 70 0 20% 10%;
}

#contact p {
    font-size: 16;
}

#contact p a {
    color: rgb(60, 157, 196);
}

#footer {
    background:#6cf;
 }


/* ********************************************* */
/* Impressum */
footer {
    /* position:absolute; */
    bottom:0;
    width:100%;
    height:60px;   /* Height of the footer */
    float: left;

    border-top: 1px solid rgb(97, 97, 97);
    color: rgb(97, 97, 97);
}

footer p {
    font-size: 9pt;
    text-align: center;
}

/* footer a:hover, a:visited, a:link, a:active { */
footer a:hover, a:visited, a:link, a:active {
    text-decoration: none;
    color: rgb(97, 97, 97);
}

#impressum {
        padding: 70 0 20% 20;
}