@font-face {
   font-family: 'RubikRegular';
   src: url('../font/RubikRegular.ttf');
}




/* General Style */ 
body {
background: #F1F1F1;  color: black;

  width: auto;
  height: auto;
margin: 0px;

}

.header0 {
/*height: 10cm;
background-image: url(images/IMG_6225b.jpg);
background-size: cover;*/

}

.header {

padding: 15px;
background: #F7D900;
color: black;
text-align:center;
clear: both;
font-size: 23px;
/*margin-bottom: 30px;
opacity: 0.7;
filter: alpha(opacity=70);*/
}

iframe {
  width: 100%;
}  

h1 { 
    display: block;
    font-size: 1.7em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;

}


#font20
{ font-size: 16px;
}

#font20 img {
     width: 250px;
    height: auto;
 }

#font25
{ font-size: 21px; font-weight:bold; }

#font23
{ font-size: 19px; font-weight:bold; }

#font10
{ font-size: 90%; }

#font11
{ font-size: 95%; }

#font9
{ font-size: 14px;
  font-weight: normal; }

.flex-container img {
     width: 50%;
    height: auto;
 }
 
 .flex-container1 {
display: -webkit-flex;
 display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
  flex-direction: row;
  -webkit-flex-direction: row; 
width:100%;
  }

.flex-container1 img {
     width: 10%;
    height: auto;
 }
 
 .box1184 {
max-width: 1184px; 
width: 1184px; 
margin-left: auto; 
margin-right: auto;
padding:9px;
background: white;
color:black;
font-size:14px;
}
 
 

 
input[type="text"] { color:#F7D900; font-size: 20px; width: 100px; height: 43px; background:black; text-align:center; border:0px solid white; border-bottom:0px solid white;}

input[type="text1"] { color:black; font-size: 20px; width: 300px; height: 43px; background:#E6E6E6; text-align:center; border:0px solid white; border-bottom:0px solid white;}

input[type="anfrage"] { color:black; font-size: 12px; height: 50px; min-width: 400px; border:1px solid lightgrey; text-align:center; }

.select {
color:black; font-size: 12px; height: 50px; min-width: 400px; background:lightgrey; text-align:center; border:0px solid white; border-bottom:1px solid white;
   }

.flex-container {
display: -webkit-flex;
 display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
  flex-direction: row;
  -webkit-flex-direction: row; 

  }


.flex-item {
-webkit-flex: 1 0 auto; 
flex: 1 0 auto; 
flex-grow: 1; 
flex-shrink: 1;
background: white; color:#131D20;
width: 33.33%;
margin:10px;
padding:30px;
border-bottom:1px solid #F1F1F1;
font-size:13px;
}

.flex-item1 {
-webkit-flex: 1 0 auto; 
flex: 1 0 auto; 
flex-grow: 1; 
flex-shrink: 1;
background: white; color:#131D20;
width: 20%;
padding:30px;
border-bottom:1px solid #F1F1F1;
font-size:13px;
}


.item-1 {
-webkit-flex: 1 0 auto; 
flex: 1 0 auto; 
width:100%;

font-weight:normal;
line-height:1.3;
}

.item-2 {
-webkit-flex: 1 0 auto; 
flex: 1 0 auto; 
width:30%;
float:right;
text-align:right;
}


.item-4 {
-webkit-flex: 1 0 auto; 
flex: 1 0 auto; 
width: auto;
padding: 10px;
float:left;
line-height:2;
text-transform: uppercase;
font-weight: bolder;
}

#item-5 {
 cursor:pointer;-webkit-flex: 1 0 auto; 
flex: 1 0 auto; 
flex-grow: 1; 
flex-shrink: 1;
color:#131D20;
width: 33.33%;
margin:10px;
padding:20px;

font-size:12px;

}

.item-6 {
float:left;width:100px;margin-right:10px;
}

#btnlink:link {color:black; text-decoration:none}
#btnlink:visited {color:black; text-decoration:none}
#btnlink:active {color:black; text-decoration:none}
#btnlink:hover {color:black; text-decoration:underline}

hr { 
    background-color: grey; 
    border: medium; 
    height: 1px; 
    margin: 1em; 
} 

.btn {
  background: black;
 /* background-image: -webkit-linear-gradient(top, #F7D900, #F7D900);
  background-image: -moz-linear-gradient(top, #F7D900, #F7D900);
  background-image: -ms-linear-gradient(top, #F7D900, #F7D900);
  background-image: -o-linear-gradient(top, #F7D900, #F7D900);
  background-image: linear-gradient(to bottom, #F7D900, #F7D900);
  -webkit-border-radius: 6;
  -moz-border-radius: 6;
  border-radius: 6px;
*/
  color: white;
  font-size: 13px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  width: 70px;
}

.btn:hover {
  background: #f5b800;
  text-decoration: none;
}

.btn1 {
  background: white;
  margin-top:10px;
cursor:pointer;
 /* background-image: -webkit-linear-gradient(top, #000508, #000508);
  background-image: -moz-linear-gradient(top, #000508, #000508);
  background-image: -ms-linear-gradient(top, #000508, #000508);
  background-image: -o-linear-gradient(top, #000508, #000508);
  background-image: linear-gradient(to bottom, #000508, #000508);
  -webkit-border-radius: 6;
  -moz-border-radius: 6;
  border-radius: 6px;
 */
  color: black;
  font-size: 13px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  width: 70px;
  margin-left: auto;
  margin-right: auto;
  
}

.btn1:hover {
  color: white;
  background: #f5b800;
  text-decoration: none;
}


.dropbtn {
    background-color: white;
    color: black;
    padding: 9px;
    font-size: 20px;
    border: none;
    cursor: pointer;
    border: 1px solid lightgrey;
    border-radius: 7px;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

 

/*VERKAUFERBUTTONS*/
/* Three columns side by side */
.column {
    float: left;
    width: 20%;
    margin-bottom: 16px;
    padding: 0 8px;
    font-size:12px;
}

/* Display the columns below each other instead of side by side on small screens */
@media (max-width: 650px) {
    .column {
        width: 100%;
        display: block;
    }
}

/* Add some shadows to create a card effect */
.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

/* Some left and right padding inside the container */
.container {
    padding: 0 16px;
}

/* Clear floats */
.container::after, .row::after {
    content: "";
    clear: both;
    display: table;
}

.title {
    color: grey;
}

.button {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 8px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    width: 100%;
}

.button:hover {
    background-color: #555;
} 
/*VERKAUFERBUTTONS ende*/

/*==================================================
 * box shadow Effect 2
 * ===============================================*/
#effect2
{
  position: relative;
  border-bottom: 1px solid lightgrey;
}
#effect2:before
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

#effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

/* **********************************************UNTER 1000px ipad mini/kindle fire/galaxy tab********************************************************* */
@media screen and (max-width:1000px) {
.flex-container img {
     width: 50%;
    height: auto;
                    }
                                    }


/* **********************************************UNTER 730px ipad mini/kindle fire/galaxy tab********************************************************* */
@media screen and (max-width:730px) {
.flex-item {
width: 50%;
margin-left:1px;
margin-right:1px;
           }
.flex-container img {
     width: 50%;
    height: auto;
 }    
 input[type="text1"] { width: 160px; }
        
                                    }
                                    

/* **********************************************UNTER 550 iphone4/5/6/6PLUS********************************************************* */
@media screen and (max-width:550px) {
.flex-container img {
     width: 100%;
    height: auto; 
                    }
 .flex-item {
margin-left:1px;
margin-right:1px;
padding: 8px;
                    }
.item-1 {
line-height:1.4;
width: 100%;
}   

#item-5 {
padding: 10px;
} 

.item-6 {
width:100%;
}   
input[type="text1"] { width: 100px; } 

                                    }

/* **********************************************UNTER 400px********************************************************* */
@media screen and (max-width:400px) {
.select {
min-width: 160px; 
   } 
input[type="anfrage"] { min-width: 200px; }
                                    }     

iframe {
 width: 250px;
}