.w-100 {
  width: 100% !important;
}
.mr-auto,
.mx-auto {
  margin-right: auto !important;
}

.mb-auto,
.my-auto {
  margin-bottom: auto !important;
}

.ml-auto,
.mx-auto {
  margin-left: auto !important;
}
.text-center {
  text-align: center !important;
}

html {
font: 62.5%/1.4  georgia,"trebuchet ms","Open Sans", arial, serif;
font-size:62.5%;
line-height:1.5em;
font-weight: 400;

text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
h1  {
text-align: center;
margin-left: auto;
margin-right: auto;
 }
body
{
font-size:1.6rem;
margin: 0 auto;
color:#000;
background:rgb(212,212,212);        
 }

img
{
width:100% !important;
height:100% !important;
display: block;
}
.navbar
{
background:rgb(212,212,212);
 }

 .btn
{
background:darkgray;
 }
 .footer-mitte
 {
 width:400px;
 height:133px;
 display: block;
 margin-left: auto;
 margin-right: auto;
 background: url(../img/footer_logo_klein.gif);
  }
.footer-unten
{
text-align:center;
background:rgb(212,212,212);
margin-left: auto;
margin-right: auto;
}

.footer-unten p
{

text-align:center;
color:rgb(181, 181, 181);
}

.footer-unten a
{
text-decoration:none;
color:rgb(0,0,0);
}

.footer-unten a:hover
{
text-decoration:none;
color:rgb(0,0,0);
}

.footer-unten a:visited
{
text-decoration:none;
color:rgb(133, 133, 133);
}
img .displayed
{
display: block;
margin-left: auto;
margin-right: auto
}

.col_6  { width: 48.333333333333%; }

.myButton {
	box-shadow:inset 0px -3px 7px 0px #29bbff;
	background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
	background-color:#2dabf9;
	border-radius:3px;
	border:1px solid #0b0e07;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:28px;
	font-weight:bold;
	padding:20px 38px;
	text-decoration:none;
	text-shadow:0px 1px 0px #263666;
    text-align: center;
}
.myButton:hover {
	background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
	background-color:#0688fa;
  	text-decoration:none;
}
.myButton:active {
	position:relative;
	top:1px;
   	text-decoration:none;
}

.facebook
   {
 width:100px;
 height:100px;
 text-align: center;
 display: block;
 margin-left: auto;
 margin-right: auto;
background: url(../img/facebook-logo.png);
}

.meinbutton {
    width:400px;
    height:80px;
   	background-color:transparent;
	border-radius:10px;
	border:2px solid black;
	display:inline-block;
	color:#000000;
	font-family:Arial;
	font-size:30px;
	font-weight:bold;
	text-decoration:none;
    text-align: center;
}
.meinbutton:hover {
    text-decoration:none;
	background-color:#2dabf9;
}
.meinbutton:active {
	position:relative;
    text-decoration:none;
	top:1px;
}

 .mitte
 {
     text-align: center;
     margin:auto;

 }

.farben
 {
 width:320px;
 height:270px;
 text-align: center;
 display: block;
 margin-left: auto;
 margin-right: auto;
background: url(../img/farben-klein.png);
 }

.caparol
 {
 width:150px;
 height:150px;
 text-align: center;
 display: block;
 margin-left: auto;
 margin-right: auto;
background: url(../img/caparol_klein.gif);
 }

 .meister
 {
 width:173px;
 height:173px;
 display: block;
 margin-left: auto;
 margin-right: auto;
background: url(../img/meister_klein.gif);

 }

 .meister ,.meister:hover {
-webkit-transition: all 10s ease-in-out;
transition: all 10s ease-in-out;
}

.meister:hover , .meister a:hover, .meister img:hover  {
-webkit-transform: rotate(720deg);
transform: rotate(720deg);
}
.wackeln:hover {
-webkit-animation-name: wackeln;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-iteration-count: 2;
animation-name: wackeln;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-iteration-count: 2;
}

@keyframes wackeln {
25% {transform: rotate3d(0, 0, 1, 30deg);  }
45% {transform: rotate3d(0, 0, 1, -30deg); }
65% {transform: rotate3d(0, 0, 1, 15deg);  }
85% {transform: rotate3d(0, 0, 1, -15deg); }
to  {transform: rotate3d(0, 0, 1, 0deg);   }
}


@-webkit-keyframes wackeln {

25% {transform: rotate3d(0, 0, 1, 30deg);  }
45% {transform: rotate3d(0, 0, 1, -30deg); }
65% {transform: rotate3d(0, 0, 1, 15deg);  }
85% {transform: rotate3d(0, 0, 1, -15deg); }
to  {transform: rotate3d(0, 0, 1, 0deg);   }
}
@media (min-width: 768px) {
  .text-md-left {
    text-align: left !important;
  }
  .text-md-right {
    text-align: right !important;
  }
  .text-md-center {
    text-align: center !important;
  }
}