@media ( min-width: 1200px ) {
	
}

@media ( min-width: 992px ) {

}

@media ( min-width: 769px ) {

}

@media ( max-width: 768px ) {

}



/* MONTSERRAT ************************************************************************************************** */

/* montserrat-300 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/montserrat/montserrat-v13-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Light'), local('Montserrat-Light'),
       url('../fonts/montserrat/montserrat-v13-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat/montserrat-v13-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat/montserrat-v13-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat/montserrat-v13-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat/montserrat-v13-latin-300.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat/montserrat-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Regular'), local('Montserrat-Regular'),
       url('../fonts/montserrat/montserrat-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat/montserrat-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat/montserrat-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat/montserrat-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat/montserrat-v13-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-500 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/montserrat/montserrat-v13-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Medium'), local('Montserrat-Medium'),
       url('../fonts/montserrat/montserrat-v13-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat/montserrat-v13-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat/montserrat-v13-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat/montserrat-v13-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat/montserrat-v13-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-600 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/montserrat/montserrat-v13-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'),
       url('../fonts/montserrat/montserrat-v13-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat/montserrat-v13-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat/montserrat-v13-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat/montserrat-v13-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat/montserrat-v13-latin-600.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-700 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/montserrat/montserrat-v13-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Bold'), local('Montserrat-Bold'),
       url('../fonts/montserrat/montserrat-v13-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat/montserrat-v13-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat/montserrat-v13-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat/montserrat-v13-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat/montserrat-v13-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-800 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/montserrat/montserrat-v13-latin-800.eot'); /* IE9 Compat Modes */
  src: local('Montserrat ExtraBold'), local('Montserrat-ExtraBold'),
       url('../fonts/montserrat/montserrat-v13-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat/montserrat-v13-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat/montserrat-v13-latin-800.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat/montserrat-v13-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat/montserrat-v13-latin-800.svg#Montserrat') format('svg'); /* Legacy iOS */
}

@media only screen and (min-width: 993px) {
.container {width: 90%;}
}

@media ( max-width: 768px ) {
.container {width: 90%;}
}

*{ 
border:0px;
margin:0px;
padding:0px;
text-decoration:none;
outline:none;
-webkit-tap-highlight-color: rgba(255,255,255,0.4);
box-sizing:border-box;
}

*::selection {
background:#ccc;
color:#fff;
}

textarea, input[type="text"] {
-webkit-appearance: none;
-webkit-border-radius:0; 
border-radius:0;
}

html, body {
height: 100%;
}

body {
background: #fff;
color: #092c3e;
font-family: 'Montserrat', Arial, Verdana, sans-serif;
font-size: 17px;
-webkit-text-size-adjust: none;
font-weight:300;
}

div {
position: relative;
}

img, iframe, video {
vertical-align:bottom;
}

h1, h2, h3, h4, h5, h6 {
margin: 0 0 10px 0;
-webkit-hyphens: none;
hyphens: none;
word-wrap: break-word;
}

h1{
font-size:40px;
font-weight: 800;
}

/*
h1:after{content: "";width: 60px;position: absolute;border-bottom: 3px solid #b7ce00;bottom: 5px;left: 15px;}
*/

h2{
font-size:28px;
font-weight: 700;
}

h3{
font-size:18px;
line-height: 26px;
font-weight: 600;
}

h4{
font-size:18px;
font-weight: 600;
}

h5{
font-size:32px;
font-weight: 700;
}

h6{
font-size:16px;
text-transform: uppercase;
letter-spacing: 1px;
}

p {
margin: 0 0 10px 0;
line-height:24px;
font-weight:300;
line-height: 1.4em;
letter-spacing: 0.02em;
-webkit-hyphens: auto;
hyphens: auto;
}

p a{
color:#092c3e;
}

p a:hover{
color:#092c3e;
}

.footer p a:hover{
color:#fff;
}


a.readmore:after {    
font-family: 'FontAwesome';
content: '\f105';
margin:0 0 0 5px;
transform:translate(0,1px);
color: #b7ce00;
display:inline-block;
transition:.1s;
}

a.readmore:hover:after{
transform:translate(3px,1px);
}

strong{font-weight: 700;}

.button{
background:#e03f1e;
color:#fff;
padding:15px 25px;
transition:all .2s;
display:inline-block;
letter-spacing:1px;
position:relative;
font-weight:300;
text-transform:uppercase;
border:0;
margin: 20px 0;
font-size: 15px;
}


.button:hover{
background:#fff;
color:#e03f1e;
transition:all .15s;
border:0;
text-decoration: none;
}

.arrow_right{
padding-right:35px;	
}

.arrow_right:after{
font-family: 'FontAwesome';
content: "\f054";
z-index:100;
color:#fff;
position: absolute;
top:50%;
margin-top:-5px;
right:15px;
transition:all .15s;
}

.arrow_right:hover:after{
color:#d30000;
right:10px;
}

hr{
height: 0;
margin: 20px 0;
border-bottom: 3px solid #ccc;
width: 100px;
text-align: left;
}

.shaded{
display: inline;
color: #fff!important;
background: none repeat scroll 0px 0px #e03f1e;
box-shadow: 5px 0 0 #e03f1e, -5px 0 0 #e03f1e;
background-origin: border-box;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}

.lined{
text-transform:uppercase;
font-weight:bold;
letter-spacing:6px;
position: relative;
z-index: 1;
overflow: hidden;
text-align: center;
margin-bottom:30px;
}

.lined:before, .lined:after{
background-color: #aaa;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}

.lined:before{right: 1em;margin-left: -50%;}
.lined:after{left: 1em;margin-right: -50%;}

.number{
background: #e03f1e;;
width: 30px;
height: 30px;
text-align: center;
color:#fff;
line-height: 30px;
margin-bottom: 10px;
border-radius: 50%;
font-weight: 600;
}


/* LAYOUT */

.bodywrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto; 
width:100%;
position:relative;
}

.section{
width: 100%;
padding: 0;
}

.bgimg{
background-size: cover;
background-position: center;
}

.row{margin-bottom: 0;}

/*.col{outline: 1px dotted #ccc;}*/

.padding30{padding-top:30px; padding-bottom:30px;}
.padding50{padding-top:50px; padding-bottom:50px;}
.padding70{padding-top:70px; padding-bottom:70px;}

.paddingbottom10{padding-bottom:10px;}
.paddingbottom20{padding-bottom:20px;}

.spacer10{height:10px;}
.spacer20{height:20px;}
.spacer30{height:30px;}
.spacer50{height:50px;}

@media ( max-width: 768px ) {
.desktop{display: none;}
.mobile{display: block;}
.wrap{width:100%;}

.padding30{padding-top:15px; padding-bottom:15px;}
.padding50{padding-top:25px; padding-bottom:25px;}
.padding70{padding-top:35px; padding-bottom:35px;}
}

.fullwidth{
width:100%;
}

.content img{
margin:5px 0 15px 0;
}

.image_right{
float:right;
margin:0 !important;
padding:7px 0 10px 20px;
width:40%;
}

.image_left{
float:left;
margin:0 !important;
padding:7px 20px 10px 0;
width:40%;
}

@media ( max-width: 768px ) {
.image_right, .image_left{
float:none;
width:100%;
padding:5px 0 15px 0;
}
}

.bodywrap {
margin: 0 auto -150px; 
}

.push {
height: 150px; 
}

.footer {


margin: 0 auto; 
width:100%;

transition: transform .2s;
color:#fff;
}

.footer a{
color:#fff;
}

.footer a:hover{

}

@media ( max-width: 768px ) {
.footer{
height:auto;
}

.bodywrap {
margin: 0 auto; 
min-height: auto;
height: auto;
}

.push {
height:auto;
display:none;
}
}

.bg-color-1{
background:#092c3e;
}


.bg-color-1 p, .bg-color-1 h1, .bg-color-1 h5, .bg-color-1 h6, .bg-color-1 label{
color:#fff;
}

label{
font-weight: 600;
letter-spacing: 0.02em;
margin: 2px 0;
}

.form-text{
color:#fff;
text-align: left;
}


/* CUSTOM */

.teich{
height: 370px;
}

.angel, .fisch{
width: 250px;
position: absolute;
left:50%;
margin-left: -125px;
margin-top:-50px;
}

.angel{
animation: angel 4s infinite;
}

@keyframes angel
{
0%   {transform: translate(0,0)}
22%  {transform: translate(0,-10px)}
44%  {transform: translate(0,3px)}
77%  {transform: translate(0,-7px)}
99%  {transform: translate(0,1px)}
}

.fisch-1{
animation: fisch-1 6s infinite;
}

@keyframes fisch-1
{
0%   {transform: translate(0,0)}
22%  {transform: translate(2px,-3px)}
44%  {transform: translate(-1px,2px)}
77%  {transform: translate(2px,-1px)}
88%  {transform: translate(5px,1px)}
}

.fisch-2{
animation: fisch-2 5s infinite;
}

@keyframes fisch-2
{
0%   {transform: translate(0,0)}
22%  {transform: translate(2px,-1px)}
45%  {transform: translate(2px,-3px)}
77%  {transform: translate(-1px,2px)}
88%  {transform: translate(5px,1px)}
}

.fisch-3{
animation: fisch-3 7s infinite;
}

@keyframes fisch-3
{
0%   {transform: translate(0,0)}
22%  {transform: translate(-2px,-1px)}
45%  {transform: translate(5px,-3px)}
77%  {transform: translate(4px,-2px)}
88%  {transform: translate(-2px,1px)}
}



.armaturenbrett{
height: 100px;
}

.tacho{
width: 100px;
position: absolute;
left:50%;
margin-left: -50px;
}

.tacho-2{
transform:rotate(-170deg);
transition:1s;
}

.tacho-2.active{
transform:rotate(0);
}

.anzeige{
box-shadow: 0 0 8px rgba(0,0,0,0.3);
}


.red-text{
color: #e03f1e;
}

.box{
border:3px solid #092c3e;
}

.box-head{
background: #092c3e;
text-align: center;
padding: 15px;
color: #fff;
}

.box-head h6{
font-weight: 700;
font-size: 20px;
line-height: 30px;
}

.box-content{
padding: 25px;
}

.price{
font-size: 50px;
font-weight: 700;
}

.header{
background:#efefef;
}

.logo{
height:100px;
}


@media ( max-width: 768px ) {
.header{
}	
.logo{height:60px;}
}

.content ul{
margin:10px 0;
list-style:none;
}

.content ol{
margin:10px 0;
}

.content li{
margin:0 0 10px 25px;
line-height:23px;
}

.content ol li{
margin:0 0 10px 18px;
padding-left:6px;
}

.content ul li:before {    
font-family: 'FontAwesome';
content: '\f00c';
margin:0 10px 0 -25px;
color: #0cb800;
position:absolute;
}

.content li a{
color:#666;
}

.content li a:hover{
opacity:.7;
}

/* VIDEO / YOUTUBE */

.video iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.video{
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
height: 0;
overflow: hidden;
}

/* GRID */
/*<div class="grid" data-columns> */


@media ( min-width: 992px ) {
.grid[data-columns]::before {content: '3 .column.size-1of3';}
}

@media ( min-width: 769px ) {
.grid[data-columns]::before {content: '2 .column.size-1of2';}
}

@media ( max-width: 768px ) {
.grid[data-columns]::before {content: '1 .column.size-1of1';}
}

.column { float: left; }
.size-1of1 { width: 100%; }
.size-1of2 { width: 50%; }
.size-1of3 { width: 33.333%; }
.item{padding:0 15px 15px 15px;}

/* ACC */

.acc_item{
border-bottom: 1px solid #ccc;
padding: 12px 0;
font-size: 16px;
line-height: 22px;
}

.acc_btn{
font-weight: 500;
cursor: pointer;
padding-top: 4px;
padding-right: 15px;
}

.acc_btn p{
margin: 0;
}

.acc_btn:after{
font-family: 'FontAwesome';
content: "\f0d7";
z-index:100;
color:#bd9b07;
position: absolute;
top:3px;
right:5px;
transition:all .2s;
}

.acc_btn.active:after{
transform: rotate(-180deg);
}

.acc_btn:hover{
opacity: .7;
}

.acc_content{
padding-top: 12px;
display: none;
}

.cms .acc_content{
display: block;
}


/* MAP */

.map{
height:400px;
background:#f9f8f8;
width:100%;
}

@media ( max-width: 750px ) {	
.map{
height:250px;
}
}


/* *** */

.arrow_up_section{
position:fixed;
z-index:15;
bottom:0;
padding: 0;
margin: 0;
}

.arrow_up_section .row{
margin-bottom: 0;
}

.arrow_up{
position:absolute;
right:10px;
bottom:-200px;
z-index:10;
transition:.5s;
background:#e03f1e;
width:60px;
height:60px;
line-height:60px;
text-align:center;
font-size:40px;
}

.arrow_up.visible{
bottom:0;
}

.arrow_up i{
color:#fff;
}

/* GALLERY */

.gallerywrap a img{
float:left;
position:relative;
}

.gallerywrap:hover img{
opacity:.5;
z-index:900;
}

.gallerywrap a img{
transition: all .4s;
}

.gallerywrap a:hover img{
transform: scale(1.07);
transition: all .1s;
opacity:1;
z-index:1000;
}

.collagewrap{
background:#fff;
}

.collage{ 
padding:10px;
background:#fff;
}

.collage img{
vertical-align:bottom;
float:left;
}

.collage img a{
float:left;
}

/* CONTENTOVERLAY / LIGHTBOX */

.contentoverlay{
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
background:#fff;
background:rgba(255,255,255,0.85);
z-index:1250;
overflow-y:scroll;
-webkit-overflow-scrolling: touch;
text-align:center;
padding: 40px 15px;
display:none; 
}

.contentoverlay img{
max-width:100%;
}

.contentoverlayclose{
position:fixed;
cursor:pointer;
top:15px;
right:30px;	
font-size:20px;
z-index:360;
color:#666;
}

.contentoverlayclose:hover{
opacity:0.5;
}


/* FORM */


.form_error {
border:1px solid red !important;
color: red !important;
-webkit-animation: shake .1s;
-webkit-animation-iteration-count:3;
-moz-animation: shake .1s;
-moz-animation-iteration-count:3;
animation: shake .1s;
animation-iteration-count:3;
}

.text_error {
color: red !important;
-webkit-animation: shake .1s;
-webkit-animation-iteration-count:3;
-moz-animation: shake .1s;
-moz-animation-iteration-count:3;
animation: shake .1s;
animation-iteration-count:3;
}

@-webkit-keyframes shake
{
0%   {-webkit-transform: translate(0,0)}
33%  {-webkit-transform: translate(-10px,0)}
66%  {-webkit-transform: translate(10px,0)}
100%  {-webkit-transform: translate(0,0)}
}

@-moz-keyframes shake
{
0%   {-moz-transform: translate(0,0)}
33%  {-moz-transform: translate(-10px,0)}
66%  {-moz-transform: translate(10px,0)}
100%  {-moz-transform: translate(0,0)}
}

@keyframes shake
{
0%   {transform: translate(0,0)}
33%  {transform: translate(-10px,0)}
66%  {transform: translate(10px,0)}
100%  {transform: translate(0,0)}
}

.not_selectable{
-moz-user-select:none;
-webkit-user-select:none;
user-select:none;
}


/* MARQUEE */

@keyframes marquee{0%{transform:translate(0,0);}100%{transform:translate(-1800px,0);}}
.marqueesection{background:#eee;}
.marqueewrap{width:100000px;}
.marquee.animated{animation:marquee 80s linear infinite}
.marquee a{transition:.1s;display:inline-block;color:#c0392b}
.marquee h3{font-size:20px;display:inline;font-weight:300;letter-spacing:1px;color:#111;}
.marquee h3 a:hover{color:#111;}
.marquee h3 strong{font-size:22px;display:inline;font-weight:300;letter-spacing:1px;color:#333}
@media (max-width:800px){.marquee h3{font-size:18px;display:inline;}}


/*  * * * *  */

.fadeInOnLoad{
opacity:0; 
transition: .15s;
}

.clearer{
clear:both;
}

.overflowhidden{
overflow:hidden;
}


@media ( min-width: 769px ) {
.mobile{
display: none;
}
}


/* MOBILE  NAVIGATION * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

@media ( max-width: 768px ) {

.navigation{
display: none;
} 

.navicon{
position: absolute;
right: 15px;
top:10px;
height: 30px;
width: 30px;
line-height:0;
text-align: right;
display: block;
z-index: 100;
}

.navicon img{
height: 30px;
}

.outerwrap{
transition: transform .2s;
}

.shifted{
transition: transform .2s;
transform: translateX(-270px);
}

.subnav_mobile{
background: #1d3b57;
position: fixed;
width: 270px;
top:0;
bottom:0;
right:-270px;
transition: transform .2s;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
padding: 20px 0;
}

.subnav_mobile ul{
list-style: none;
}

.subnav_mobile ul li{
margin: 0 0 0 0;
text-transform:uppercase;
}

.subnav_mobile ul li ul li{
text-transform:none;
}

.subnav_mobile ul li a{
padding:10px 5px 10px 20px;
display: block;
font-weight:300;
color:#fff;
letter-spacing: 1px;
word-wrap: break-word;
hyphens:auto;

}


.subnav_mobile ul li:last-child{
border-bottom:none;
}

.subnav_mobile ul li a:hover{
opacity: .8;
}

.subnav_mobile ul li a.current{
color: #fff;
font-weight: bold;
}

.subnav_mobile ul li ul{
padding:0 0 0 20px;
}

.subnav_mobile ul li ul li{
}

.subnav_mobile ul li ul li a{
padding:7px 0;
color:#fff;
}

.subnav_mobile ul li ul li:last-child a{
margin-bottom:10px;
}

.subnav_mobile.shifted{
box-shadow: 0 0 6px rgba(0,0,0,.3) !important;
}

.subnav_mobile_overlay{
background: rgba(255,255,255,.7);
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
display: none;
transition: transform .2s;
}

.bodywrap{
transition: transform .2s;
}

}

/* Dots */

.slick-dotted.slick-slider{
/*margin-bottom: 30px;*/
}

.slick-dots{
position: absolute;
/*bottom: -25px;*/
bottom: 15px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
z-index: 100;
}

.slick-dots li{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}

.slick-dots li button{
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}

.slick-dots li button:hover,.slick-dots li button:focus{
outline: none;
}

.slick-dots li button:hover:before,.slick-dots li button:focus:before{
opacity: 1;
}

.slick-dots li button:before{
font-family: sans-serif;
font-size: 22px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before{
opacity: .75;
color: black;
}


/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus { 
  -webkit-text-fill-color: #111 !important;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

/*
.wrap{width:990px;margin: 0 auto;}
@media ( min-width: 1460px ) {.wrap{width:1160px}}
@media ( max-width: 1010px ) {.wrap{width:730px}}

.col, .col33, .col50, .col66, .col100{
min-height: 10px;
float: left; 
padding-left:15px;
padding-right:15px;
}
.col33{width:33.333%;}
.col50{width:50%;}
.col66{width:66.666%;}
.col100{width:100%;}
*/


@-webkit-keyframes animateBubble {
    0% {
        margin-top: 1000px;
    }
    100% {
        margin-top: -100%;
    }
}

@-moz-keyframes animateBubble {
    0% {
        margin-top: 1000px;
    }
    100% {
        margin-top: -100%;
    }
}

@keyframes animateBubble {
    0% {
        margin-top: 1000px;
    }
    100% {
        margin-top: -100%;
    }
}

@-webkit-keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}

@-moz-keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}

@keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}

/* ANIMATIONS */

.x1 {
    -webkit-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;

	
	left: -5%;
	top: 5%;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
}

.x2 {
    -webkit-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
	-moz-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
	animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
	
	left: 5%;
	top: 80%;
	
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	transform: scale(0.7);
}

.x3 {
    -webkit-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: 10%;
	top: 40%;
	
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	transform: scale(0.7);
}

.x4 {
    -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	-moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	
	left: 20%;
	top: 0;
	
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	transform: scale(0.5);
}

.x5 {
    -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	-moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	
	left: 30%;
	top: 50%;
	
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	transform: scale(0.5);
}

.x6 {
    -webkit-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: 50%;
	top: 0;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
}

.x7 {
    -webkit-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: 65%;
	top: 70%;
	
	-webkit-transform: scale(0.4);
	-moz-transform: scale(0.4);
	transform: scale(0.4);
}

.x8 {
    -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	-moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	
	left: 80%;
	top: 10%;
	
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	transform: scale(0.5);
}

.x9 {
    -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	-moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	
	left: 90%;
	top: 50%;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
}

.x10 {
    -webkit-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: 80%;
	top: 80%;
	
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	transform: scale(0.3);
}

/* OBJECTS */

.bubble {
    -webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	

	
    height: 30px;
	position: absolute;
	width: 30px;
	border: 3px solid #fff;
	z-index: 300;
	cursor: pointer;
}


.bubble.popped {

 	transform: scale(2.3);
 	opacity: .2;
}