@charset "UTF-8";
/* CSS Document */
@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot');
    src: url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff') format('woff'), url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}



div.timeline_element.iframe.animated:before {font-family: "Glyphicons Halflings";
    content:"\e059"; color:white; z-index:9999; padding-left: 10px; font-size: 24px;
}

/*h1#cams {   font-size: 36px; letter-spacing: 2px; text-align: left; background: linear-gradient(315deg, #1f55eb 10%,  #0df5ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: normal; text-shadow: 2px 2px 4px rgba(14,30,46,0.6); }*/
h1#cams2 { font-size: 40px; text-align: center; letter-spacing: 2px; font-weight: bold; color: white; text-shadow: 2px 2px 4px rgba(14,30,46,0.3);  margin-top: 60px;  background-color: orange;  border-radius: 5px;}
h1#cams3 { font-size: 36px; text-align: center; letter-spacing: 2px; font-weight: bold; color: white; text-shadow: 2px 2px 4px rgba(14,30,46,0.3);  margin-top: 60px;  background-color: #f29400;  border-radius: 5px;}
h2#cams2 { line-height: 50px; text-align: center; margin: 100px 0 0; padding: 10px; font-size: 20px;  text-shadow: 2px 2px 4px rgba(14,30,46,0.9); color: white; font-weight: normal;}
h2#cams3 { line-height: 30px; text-align: center; margin: 5px 0 0 0; padding: 5px; font-size: 16px;  text-shadow: 2px 2px 4px rgba(14,30,46,0.9); color: white; font-weight: normal; background-color: rgba(14,30,46,0.3);  border-radius: 5px;}
h3#cams2 {   font-size: 20px; letter-spacing: 2px; text-align: left;  color:#0df5ff; font-weight: normal; text-shadow: 2px 2px 4px rgba(14,30,46,0.3); padding: 5px; background-color: rgba(14,30,46,0.3); width: auto; }
h4#cams2 {   font-size: 20px; letter-spacing: 2px; text-align: left;  color:#0df5ff; font-weight: normal; text-shadow: 2px 2px 4px rgba(14,30,46,0.3); padding: 5px; background-color: rgba(14,30,46,0.3); width: auto; margin: 20px 0 0; }
h5#cams2 {   font-size: 20px; letter-spacing: 2px; text-align: left;  color:#0df5ff; font-weight: normal; text-shadow: 2px 2px 4px rgba(14,30,46,0.3); padding: 5px; background-color: rgba(14,30,46,0.3); width: auto; margin: 20px 0 0; }
h6#cams2 {   font-size: 20px; letter-spacing: 2px; text-align: left;  color:#0df5ff; font-weight: normal; text-shadow: 2px 2px 4px rgba(14,30,46,0.3); padding: 5px; background-color: rgba(14,30,46,0.3); width: auto; }

.cams1 { width: 100%; display: flex; justify-content: space-around; flex-wrap: wrap; margin: 20px 0 0 ; }
.camstart {position: relative; flex: 1; width: 100%; max-width: 270px; margin: 10px;   }


img.imagestart { max-width: 270px; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); display: block; border-radius: 5px;}

#example1 { padding: 60px 0 0;
  background: url(../images/404/foto1500.png) no-repeat center center fixed;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%; height: 500px; border-radius: 5px;
}

.camstarttext { color: white; text-align: center;  position: absolute; top:0px; left:0px; width: 100%; background-color: rgba(0,0,0,0.6); padding: 6px 0; border-top-left-radius: 5px; border-top-right-radius: 5px; font-size: 14px;  } 

.live { position: absolute; bottom:10px; right:10px; width: 30px; height: 30px; background-color: rgba(0,0,0,0.6); border-radius: 50%; border: 2px solid #0df5ff;
     z-index:9999;  padding: 5px; text-align: center;
}

.live:before {font-family: "Glyphicons Halflings";  content:"\e059"; color:white; z-index:9999; font-size: 20px; }
.livebild { position: absolute; bottom:10px; right:10px; width: 30px; height: 30px; background-color: rgba(0,0,0,0.6); border-radius: 50%; border: 2px solid #0df5ff;
     z-index:9999;  padding: 5px; text-align: center;
}

.livebild:before {font-family: "Glyphicons Halflings";  content:"\e060"; color:white; z-index:9999; font-size: 20px; }

.camleft { width:calc(50% - 2px); float:left; height: 500px;  position: absolute; top: 60px;left: 0; background-color: #0a4e70;}
.camright { width: 50%; float:right; height: 500px; background-image: url('../images/cams/nerja.jpeg'); background-position: center; 
    background-repeat: no-repeat; background-size: cover; z-index:-2; position: relative; }

.camleft:after { position: absolute; z-index: -1; content: ""; left:99%; width: 50px; height: 100%; border-radius: 0% 100% 100% 2% / 97% 82% 96% 0%; background-color: #0a4e70;/* box-shadow: 1px 1px 4px #000;*/ box-shadow: 0 0 20px rgba(0,0,0,0.75);
    clip-path: inset(0px -15px 0px 0px);}

#camlefttitel { position: absolute; top: 150px; left: 12%; width: 60%; }
.camlefttitelklein { width: 500px;}   
.camlefttitelklein2 { width: 80%; margin: 0 auto; /*padding: 100px 0 0 100px;*/}   
.camlefttitelklein3 { width: 90%;margin: 0 auto; padding-top:0px; }     

.camrighttext { position: relative; /*top: 510px; right: 20px;*/ float: right; margin: 455px 10px 0 0; color: white; font-size: 12px; text-shadow: 2px 2px 4px rgba(14,30,46,0.4); background-color: rgba(0,0,0,0.4); padding: 10px;}

#contentcamsstart {  z-index:99; background-color: rgba(14,30,46,1); width: 300px; padding:20px; color: white; text-align: center; line-height: 25px; float:left; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); height: 450px; }

.station1 { width: 300px; float:right; height: 450px; margin-top: 20px; background-image: url('../images/cams/stationa1.png'); background-position: center; 
    background-repeat: no-repeat; background-size: cover; z-index:-2; position: relative; }
.station2 {  width: 300px; float:left; height: 450px; margin-top: 20px; background-image: url('../images/cams/stationa2.png'); background-position: center; 
        background-repeat: no-repeat; background-size: cover; z-index:-2; position: relative; }
    
        .estacionstart { width: 940px; margin: 10px auto;}

.welchecams {  width: 100%; /*height: 550px; background-image: url('../images/cams/bild.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;*/ position: relative; }

.welchecamstext { color: white; font-size: 14px; text-shadow: 2px 2px 4px rgba(14,30,46,0.4); /*background-color: rgba(0,0,0,0.4); padding: 10px;*/ width: 90%;  margin: 10px auto 0; top: 20px; position: relative; display: flex; flex-direction: column; }
.welchecamstext p { background-color: rgba(14,30,46,0.8); padding: 10px;  position: relative; top: auto; left: auto; line-height: 20px; }


.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column div {
  margin-top: 8px;
  vertical-align: middle;
}

#camstop { width: 100%; max-width: 1000px; margin: 0 auto; /*background-image: url('../images/camsneustart.gif'); background-position: center;  background-repeat: no-repeat;*/ }
#camstop img { width: 100%;}

@media (max-width: 1320px) {

#example1 { padding: 60px 0 0;
  background: url(../images/404/foto1000.png) no-repeat center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%; height: 500px; border-radius: 5px;
}
}


@media (max-width: 970px) {
    
.estacionstart { width: 100%; max-width: 940px; margin: 10px auto;}
.station1, .station2 { width:calc(50% - 170px); max-width: 300px; }   
    
.welchecamstext p { background-color: rgba(14,30,46,0.8); padding: 10px;  position: relative; top: auto; left: auto; line-height: 20px; margin: 5px 0; }
 .camlefttitelklein3 { width: 90%;margin: 0 auto; padding-top:20px; }   
   
}


/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
    
    
#example1 { padding: 60px 0 0;
  background: url(../images/404/foto1000.png) no-repeat center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%; height: 500px; border-radius: 5px;
}
    
    
}


@media (max-width: 740px) {
    
.welchecamstext p { background-color: rgba(14,30,46,0.8); padding: 5px;  position: relative; top: auto; left: auto; line-height: 19px; margin: 5px 0; }
h1#cams2 { font-size: 36px; text-align: center; letter-spacing: 2px; font-weight: bold; color: white; text-shadow: 2px 2px 4px rgba(14,30,46,0.3);  margin-top: 50px;  background-color: orange;  border-radius: 5px;}
h1#cams3 { font-size: 36px; text-align: center; letter-spacing: 2px; font-weight: bold; color: white; text-shadow: 2px 2px 4px rgba(14,30,46,0.3);  margin-top: 50px;  background-color: orange;  border-radius: 5px;}
h2#cams2 { line-height: 50px; text-align: center; margin: 100px 0 0; padding: 10px; font-size: 18px;  text-shadow: 2px 2px 4px rgba(14,30,46,0.9); color: white; font-weight: normal;}
h2#cams3 { line-height: 50px; text-align: center; margin: 5px 0 0; padding: 10px; font-size: 16px;  text-shadow: 2px 2px 4px rgba(14,30,46,0.9); color: white; font-weight: normal;}
    
}

@media (max-width: 640px) {
#example1 { width: 100%; height: 300px; padding: 30px 0 0; }
h1#cams2 { font-size: 30px; text-align: center; letter-spacing: 2px; font-weight: bold; color: white; text-shadow: 2px 2px 4px rgba(14,30,46,0.3);  margin-top: 20px;  background-color: orange;  border-radius: 5px;}
h1#cams3 { font-size: 30px; text-align: center; letter-spacing: 2px; font-weight: bold; color: white; text-shadow: 2px 2px 4px rgba(14,30,46,0.3);  margin-top: 50px;  background-color: orange;  border-radius: 5px;}
h2#cams2 { line-height: 30px; text-align: center; margin: 50px 0 0; padding: 10px; font-size: 16px;  text-shadow: 2px 2px 4px rgba(14,30,46,0.9); color: white; font-weight: normal;}
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
    
    
  .welchecamstext p { background-color: rgba(14,30,46,0.8); padding: 5px;  position: relative; top: auto; left: auto; line-height: 17px; margin: 5px 0; }
   
}

@media (max-width: 570px) {
   .camlefttitelklein3 { width: 100%;margin: 0 auto; padding-top:20px; }   

#example1 { width: 100%; height: 300px; padding: 30px 0 0;  }
h1#cams2 { font-size: 24px; text-align: center; letter-spacing: 2px; font-weight: bold; color: white; text-shadow: 2px 2px 4px rgba(14,30,46,0.3);  margin-top: 10px;  background-color: orange;  border-radius: 5px;}
h1#cams3 { font-size: 24px; text-align: center; letter-spacing: 2px; font-weight: bold; color: white; text-shadow: 2px 2px 4px rgba(14,30,46,0.3);  margin-top: 10px;  background-color: orange;  border-radius: 5px;}
h2#cams2 { line-height: 24px; text-align: center; margin: 20px 0 0; padding: 10px; font-size: 16px;  text-shadow: 2px 2px 4px rgba(14,30,46,0.9); color: white; font-weight: normal;}
h2#cams3 { line-height: 24px; text-align: center; margin: 5px 0 0; padding: 10px; font-size: 16px;  text-shadow: 2px 2px 4px rgba(14,30,46,0.9); color: white; font-weight: normal;}
}

@media (max-width: 550px) {


.welchecamstext { font-size: 14px;  width: 98%;  margin: 10px auto 0; top: 5px; position: relative; display: flex; flex-direction: column; }
.welchecams {  height: auto; background-image: none;  }

    h3#cams2, h4#cams2, h5#cams2, h6#cams2 { font-size: 16px; } 
.camlefttitelklein2 { width: 90%; margin: 0 auto; /*padding: 100px 0 0 100px;*/}   

}

@media (max-width: 500px) {

#example1 { width: 100%; height: 300px; padding: 30px 0 0; background: url(../images/404/foto500.png) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

.welchecamstext { font-size: 14px;  width: 98%;  margin: 10px auto 0; top: 2px; position: relative; display: flex; flex-direction: column; }
  .welchecamstext p { background-color: rgba(14,30,46,0.8); padding: 5px;  position: relative; top: auto; left: auto; line-height: 17px; margin: 2px 0; }


}