@import url('https://fonts.googleapis.com/css2?family=Lancelot&family=Quattrocento:wght@700&display=swap');
@font-face{
font-weight:normal;
font-style:normal;
font-family:'codropsicons';
src:url('../fonts/codropsicons/codropsicons.eot');
src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),url('../fonts/codropsicons/codropsicons.woff') format('woff'),url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}
@font-face{
font-family:'ElegantIcons';
src:url('../webfonts/ElegantIcons.eot');
src:url('../webfonts/ElegantIcons.eot?#iefix') format('embedded-opentype'),url('../webfonts/ElegantIcons.woff') format('woff'),url('../webfonts/ElegantIcons.ttf') format('truetype'),url('../webfonts/ElegantIcons.svg#ElegantIcons') format('svg');
font-weight:normal;
font-style:normal;
}
.back-to-top{
background:red;
position:fixed;
bottom:20px;
right:20px;
padding:1em;
opacity:1;
transform:translateY(0);
}
.scrollToTopBtn{
background-color:black;
border:none;
border-radius:50%;
color:white;
cursor:pointer;
font-size:16px;
line-height:48px;
width:48px;
position:fixed;
bottom:30px;
right:30px;
z-index:100;
opacity:0;
transform:translateY(100px);
transition:all .5s ease}
.showBtn{
opacity:1;
transform:translateY(0)}
[data-icon]:before{
font-family:'ElegantIcons';
content:attr(data-icon);
speak:never;
font-weight:normal;
font-variant:normal;
text-transform:none;
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
button.menunav{
font-size:60%;
background:transparent;
color:rgba(196,43,56,1.0);
border:none;
z-index:999;
}
button.menunav:hover{
font-size:60%;
background:transparent;
color:rgba(20,153,169,1.0);
border:none;
 z-index:999;
}
button.menunav:active{
font-size:60%;
background:transparent;
color:rgba(255,255,255,1.0);
border:0px solid rgba(255,255,255,0.0);
z-index:999;
}
.box-style01{
padding:0.76em;
 border-radius:0.95em;
 background:transparent;
}
.gradient{
background:url("../tools/lines-overlay-darker.png");
border:1px solid rgba(0,0,0,0.47);
background:-moz-linear-gradient(top, rgba(16,41,78,0.51), rgba(0,56,156,0.37));
background:-webkit-linear-gradient(top, rgba(16,41,78,0.51), rgba(0,56,156,0.37));
background:-ms-linear-gradient(top, rgba(16,41,78,0.51), rgba(0,56,156,0.37));
background:-o-linear-gradient(top, rgba(16,41,78,0.51), rgba(0,56,156,0.37));
 -webkit-box-shadow:10px 7px 7px 0px rgba(13, 14, 31, 0.51);
-moz-box-shadow:10px 7px 7px 0px rgba(13, 14, 31, 0.51);
box-shadow:10px 7px 7px 0px rgba(13, 14, 31, 0.51);
}
body{
 max-width:100%;
 margin:0 auto 0;
background:rgba(24,28,63,1.0);
color:rgba(108,101,52,0.95);
background:url("../images/untergrund-BGS.webp") no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
 h3.cs-header {
                    padding-top: 0;
                                        color:rgba(250,162,20, 1.0);
                                       font-family:'Lancelot', cursive;  !important
font-size:2.51em;
                                        font-size:2.75em;
                }
img.musicicon {
    width: 128px;
    height: 128px;
    background: rgba(0,0,0,0.0);
    margin: 0 auto 0;
    margin:0.15em 0.15em 0.35em 0.15em;
    border:0;
    box-shadow:0 0 0;
}
a.buttonCute {
        	display: block;
                    font-weight:normal;
                    font-family: 'Satisfy', cursive !important;
                    font-size:1.05em;
                    letter-spacing:0.12em;
        -webkit-box-shadow: 12px 12px 16px 0px rgba(0, 0, 0, 0.55);
        -moz-box-shadow:    12px 12px 16px 0px rgba(0, 0, 0, 0.55);
        box-shadow:         12px 12px 16px 0px rgba(0, 0, 0, 0.55);
        position: relative;
        display: inline-block;
        background: rgba(124,48,50,0.85) url("images/lines-overlay-darker.png");
        color: rgba(255,255,255,1.0);
        text-align: center;
        border-radius: 0.5em;
        text-decoration: none;
        padding: 0.65em 3em 0.65em 3em;
        border: 0;
        cursor: pointer;
        outline: 0;
        font-weight: 300;
        -moz-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
        -webkit-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
        -ms-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
        transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
    }

    a.buttonCute:hover {
        	display: block;
                    font-weight:normal;
                    font-family: 'Satisfy', cursive;
                    font-size:1.05em;
                    letter-spacing:0.12em;
        -webkit-box-shadow: 12px 12px 16px 0px rgba(0, 0, 0, 0.55);
        -moz-box-shadow:    12px 12px 16px 0px rgba(0, 0, 0, 0.55);
        box-shadow:         12px 12px 16px 0px rgba(0, 0, 0, 0.55);
        position: relative;
        display: inline-block;
        background: rgba(124,48,50,0.85) url("images/lines-overlay-darker.png");
        color: rgba(255,151,10,1.0) !important;
        text-align: center;
        border-radius: 0.5em;
        text-decoration: none;
        padding: 0.65em 3em 0.65em 3em;
        border: 0;
        cursor: pointer;
        outline: 0;
        font-weight: 300;
        -moz-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
        -webkit-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
        -ms-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
        transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
    }
body.follower{
max-width:100%;
margin:0 auto 0;
background:rgba(24,28,63,1.0);
color:rgba(108,101,52,0.95);
background:url("../images/untergrund-BGS2.jpg") no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
body.klangliege{
max-width:100%;
margin:0 auto 0;
background:rgba(24,28,63,1.0);
color:rgba(108,101,52,0.95);
background:url("../images/untergrund-BGS3.jpg") no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
body.sonologie-mobil{
max-width:100%;
margin:0 auto 0;
background:rgba(24,28,63,1.0);
color:rgba(108,101,52,0.95);
background:url("../images/untergrund-BGS41a.jpg") no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
body.angebote{
max-width:100%;
margin:0 auto 0;
background:rgba(24,28,63,1.0);
color:rgba(108,101,52,0.95);
background:url("../images/untergrund-angebote.jpg") no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.wrapper{
position:relative;
top:-0.90em;
width:100%;
}
#intro{
 position:relative;
top:5.5em;
margin-bottom:-5.0em;
text-align:center;
-webkit-animation:fadeIn 3s;
-moz-animation:fadeIn 3s;
-o-animation:fadeIn 5s;
animation:fadeIn 5s;
background:transparent;
}
 @-webkit-keyframes fadeIn{
0%{
 opacity:0;
}
100%{
 opacity:1;
}
}
 @-moz-keyframes fadeIn{
0%{
 opacity:0;
}
100%{
 opacity:1;
}
}
 @-o-keyframes fadeIn{
0%{
 opacity:0;
}
100%{
 opacity:1;
}
}
 @keyframes fadeIn{
0%{
 opacity:0;
}
100%{
 opacity:1;
}
}
.wrapper{
background:url("../tools/lines-overlay-darker.png")}
 .wrapper .title{
position:absolute;
top:-3.25em;
left:50%;
text-align:center;
text-transform:uppercase;
display:block;
font-weight:700;
letter-spacing:0.25em;
font-size:2.1em;
width:25em;
height:3.25em;
font-family:'Josefin Slab', serif;
line-height:3.25em;
margin-bottom:-3.25em;
margin-left:-12.5em;
padding-top:0.5em;
border-top:1px solid rgba(0,0,0,0.25);
border-left:1px solid rgba(0,0,0,0.25);
border-right:1px solid rgba(0,0,0,0.25);
}
.wrapper .title:before{
content:'';
position:absolute;
bottom:-38px;
left:-35px;
width:35px;
height:38px;
background:url("images/shadow.png");
}
.wrapper .title:after{
-moz-transform:scaleX(-1);
-webkit-transform:scaleX(-1);
-ms-transform:scaleX(-1);
transform:scaleX(-1);
content:'';
position:absolute;
bottom:-38px;
right:-35px;
width:35px;
height:38px;
background:url("images/shadow.png");
}
.wrapper.style1{
background:linear-gradient(rgba(255,255,255,0.15), rgba(12,5,59,0.07) 100%);
-webkit-box-shadow:6px -3px 5px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow:6px -3px 5px 0px rgba(0, 0, 0, 0.2);
 box-shadow:6px -3px 5px 0px rgba(0, 0, 0, 0.2);
 color:rgba(255, 255, 255, 0.75);
 text-shadow:4px 4px 6px rgba(0,0,0, 0.65);
 border:0px solid rgba(0,0,0,0.0);
 box-shadow:7px 7px 11px 0px rgba(0,0,0,0.41);
 -webkit-box-shadow:7px 7px 11px 0px rgba(0,0,0,0.41);
 -moz-box-shadow:7px 7px 11px 0px rgba(0,0,0,0.41);
 width:86%;
 margin-left:7%;
 margin-right:7%;
}
.wrapper.style1 a{
 color:rgba(255,255,255,1.0);
 text-decoration:none;
}
 .wrapper.style1 a:hover{
color:rgba(255,0,0,1.0);
text-decoration:none;
}
.wrapper.styleintro{
 position:relative;
 top:0.0em;
 background:transparent;
 - color:rgba(255,255,255,0.75);
 text-shadow:4px 4px 6px rgba(0,0,0,0.65);
 border:0px solid rgba(0,0,0,0.0);
 width:96%;
 margin-left:2%;
 margin-right:2%;
 margin-bottom:-5.5em;
}
#banner-top{
position:relative;
margin-top:-9.89em;
}
#banner-top2{
position:relative;
margin-top:-3.89em;
}
#banner-top-follow{
position:relative;
margin-top:-3.29em;
}
#banner{
position:relative;
margin-top:-2.77em;
margin:0 auto 0;
}
#banner h1{
font-family:'Lancelot', cursive;
font-size:7.27em;
line-height:1.01em;
text-align:center;
}
div.wipe{
position:relative;
top:-6.55em;
}
div.wipe2{
position:relative;
margin-top:-8.75em;
}
div.wipe3{
position:relative;
top:-6.75em;
}
#banner h2{
font-family:'Lancelot', cursive;
font-size:3.31em;
line-height:1.26em;
}
#banner-top h3{
font-family:'Lancelot', cursive;
font-size:3.91em;
line-height:1.26em;
}
#banner-top h4{
font-family:'Lancelot', cursive;
font-size:2.51em;
line-height:1.26em;
}
div#banner-follow{
position:relative;
top:-1.95em;
}
#banner-follow h2{
font-family:'Lancelot', cursive;
font-size:6.55em;
line-height:1.26em;
}
.linear-wipe{
font-family:'Lancelot', cursive;
text-align:center;
font-weight:300;
background:linear-gradient(to right, rgb(230,103,41) 20%, rgb(252,155,3) 40%, rgb(204,130,64) 60%, rgb(230,103,41) 80%);
background-size:200% auto;
color:rgba(0,0,0,0.65);
background-clip:text;
text-fill-color:transparent;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
-webkit-animation:shine 4s linear infinite;
animation:shine 4s linear infinite;
}
.linear-wipe2{
font-family:'Lancelot', cursive;
text-align:center;
font-weight:300;
background:linear-gradient(to right, rgb(247,216,14) 20%, rgb(247,148,14) 40%, rgb(247,148,14) 60%, rgb(247,216,14) 80%);
background-size:200% auto;
color:rgba(0,0,0,0.65);
background-clip:text;
text-fill-color:transparent;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
-webkit-animation:shine 4s linear infinite;
animation:shine 4s linear infinite;
}
@-webkit-keyframes shine{
to{
background-position:200% center;
}
}
@keyframes shine{
to{
background-position:200% center;
}
}
.wrapper.style1 .title{
background:rgba(255,255,255,0.15);
color:rgba(255,255,255,1.0);
font-family:'Josefin Slab', serif;
-webkit-box-shadow:6px -3px 5px 0px rgba(0, 0, 0, 0.11);
-moz-box-shadow:6px -3px 5px 0px rgba(0, 0, 0, 0.11);
box-shadow:6px -3px 5px 0px rgba(0, 0, 0, 0.11);
}
h1.linear-wipe{
font-family:'Lancelot', cursive;
font-size:3.85em;
margin-top:0.19em;
line-height:2.65em;
}
h2.linear-wipe{
            font-family: 'Lancelot', cursive;
            font-size:3.62em;
            margin-top:0.09em;
            line-height:2.06em;
            text-align:center;
            }

.powlink{
 margin: 0 auto 0;
 width:100%;
 height:1.05em;
 line-height:1.56em;
 font-size:0.86em;
 font-family:'Open Sans', sans-serif;
 color:rgba(255,255,255,1.0);
 border-bottom:1px solid rgba(114,236,220,1.0);

}
hr.cute{position:relative;
display:block;
border:0;
height:1px;
border-bottom:solid 1px rgba(114,236,220,0.42) !important;

width:25%;
margin:0 auto 0;
top:0.05em;

}

a.cutefeld{
 font-weight:200;
 font-size:0.86em;
 font-family:'Open Sans', sans-serif;
 line-height:0.16em;
 color:rgba(245,199,70,0.91)!important;
 text-shadow: 1px 1px 6px rgba(6,7,23,0.68);
 margin:0 auto 0;
 width:50%;
 text-align:center!important;
 letter-spacing:0.1em;
}
a.cutefeld:hover{
 font-size:0.65em;
 font-weight:400;
font-size:0.86em;
 font-family:'Open Sans', sans-serif;
 line-height:1.16em;
 color:rgba(37,0,40,0.95)!important;
 text-shadow: 1px 1px 6px rgba(6,7,23,0.68);
 margin:0 auto 0;
 width:50%;
 text-align:center!important;
 letter-spacing:0.1em;
}
h3.linear-wipe{
font-family:'Lancelot', cursive;
font-size:1.15em;
margin-top:0.29em;
}
h4.linear-wipe{
font-family:'Lancelot', cursive;
font-size:1.95em;
margin-top:0.69em;
line-height:1.86em;
}
h5.linear-wipe{
font-family:'Lancelot', cursive;
font-size:2.5em;
margin-top:0.29em;
}
[data-title]:hover:after{
opacity:1;
transition:all 0.1s ease 0.5s;
visibility:visible;
}
[data-title]:after{
content:attr(data-title);
background-color:rgba(86,150,161,0.85);
color:rgba(255,255,255,0.95);
font-size:0.65em;
line-height:1.15em;
position:absolute;
padding:1px 5px 2px 5px;
bottom:-1.16em;
left:10%;
white-space:nowrap;
box-shadow:1px 1px 3px #000;
opacity:0;
border-radius:0.21em;
border:1px solid rgba(6,150,161,1.0);
z-index:99999;
visibility:hidden;
}
[data-title]{
position:relative;
}
a{
text-decoration:none;
color:#f7f7f7;
outline:none;
}
a:hover, a:focus{
color:#fff;
outline:none;
}
div.main{
position:relative;
top:-9.73em;
max-width:100%;
margin:0 auto 0;
background:transparent;
}
div.main-follow{
position:relative;
top:-2.23em;
max-width:100%;
margin:0 auto 0;
background:transparent;
}
img.ton-ft{
margin:0 auto 0;
width:26%;
height:auto;
border:0;
margin-top:-2.55em;
margin-bottom:0.15em;
margin-left:37%;
margin-right:37%;
}
 img.pic-ft{
margin:0 auto 0;
width:32%;
height:auto;
border:0;
margin-top:-2.55em;
margin-bottom:0.15em;
margin-left:34%;
margin-right:34%;
box-shadow:none;
}
 img.pic-ft3{
margin:0 auto 0;
width:10%;
height:auto;
border:0;
margin-top:-2.55em;
margin-bottom:0.15em;
margin-left:45%;
margin-right:45%;
box-shadow:none;
}
img.ton-ft-logo{
margin:0 auto 0;
width:26%;
height:auto;
border:none;
margin-top:-3.55em;
margin-bottom:0.05em;
margin-left:37%;
margin-right:37%;
box-shadow:none;
}
img.ton-ft-logo_kl{
margin:0 auto 0;
width:18%;
height:auto;
border:none;
margin-top:-3.55em;
margin-bottom:0.05em;
margin-left:41%;
margin-right:41%;
box-shadow:none;
}
img.ton-ft2{
margin:0 auto 0;
width:14%;
height:auto;
border:0;
margin-top:-0.95em;
margin-bottom:0.45em;
margin-left:18%;
margin-right:18%;
}
div.impo{
font-size:1.0em;
letter-spacing:1px;
font-weight:400;
font-family:'Open Sans', sans-serif;
line-height:1.75em;
text-align:center;
text-transform:none;
color:rgba(255,255,255,0.87);
margin:0 auto 0;
width:86%;
}
.box.special1{
width:60%;
margin-left:20%;
margin-right:20%;
text-align:center;
background:transparent;
margin:0 auto 0;
margin-top:5.5em;
margin-bottom:7.5em;
}
header.major1{
width:92%;
margin-left:4%;
margin-right:4%;
}
header.major11{
position:relative;
top:-18.5em;
width:92%;
margin-left:4%;
margin-right:4%;
}
 header.major1 h2{
margin:0;
margin-top:0.95em;
color:rgba(255,38,7,0.77);
font-family:'Lancelot', cursive;
font-weight:400;
font-size:2.52em;
line-height:2.0em;
}
header.major11 h1{
margin:0;
margin-top:0.15em;
color:rgba(255,38,7,0.77);
font-family: 'Lancelot', cursive;
            font-size:3.65em;
            margin-top:0.09em;
            line-height:3.06em;
            }
header.major11 h2{
margin:0;
margin-top:0.15em;
color:rgba(255,38,7,0.77);
font-family: 'Lancelot', cursive;
            font-size:3.62em;
            margin-top:0.09em;
            line-height:3.06em;
            }

header.major11 h3{
margin:0;
margin-top:0.15em;
color:rgba(255,38,7,0.77);
font-family:'Lancelot', cursive;
font-weight:400;
font-size:3.55em;
line-height:3.30em;
}
header.major11 h2.toppe{
margin:0;
margin-top:0.95em;
color:rgba(255,38,7,0.77);
font-family:'Lancelot', cursive;
font-weight:400;
font-size:2.22em;
line-height:2.0em;
}
header.major1 p{
display:inline-block;
border-top:solid 1px rgba(252,26,9,0.24);
width:100%;
color:rgba(255,255,255,0.57);
margin:1.5em 0 0 0;
padding:1.5em 0 0 0;
font-style:normal;
font-family:'Lancelot', cursive;
font-weight:400;
text-align: left;
font-size:1.25em;
line-height:1.95em;
hyphens:auto;
}
 header.major11 p.zitat{
display:inline-block;
width:100%;
color:rgba(255,255,255,0.97);
margin:0.1em 0 0 0.5em;
padding:0.5em 0 0.5em 0;
font-style:normal;
 font-family:'Lancelot', cursive;
font-weight:400;
text-align:justify;
font-size:1.55em;
line-height:2.15em;
hyphens:auto;
}
header.major11 p{
display:inline-block;
border-top:solid 0px rgba(18,74,149,0.76);
width:80%;
color:rgba(255,255,255,0.87);
margin:1.5em 0 0 0;
padding:1.5em 0 0 0;
font-style:normal;
font-family:'Open Sans', sans-serif;
font-weight:300;
text-align:justify;
font-size:1.25em;
line-height:1.95em;
hyphens:auto;
margin-left:10%;
margin-right:10%;
}
header.major11 h3{
display:inline-block;
border-top:solid 0px rgba(18,74,149,0.76);
width:80%;
color:rgba(255,255,255,0.87);
margin:1.5em 0 0 0;
padding:1.5em 0 0 0;
font-style:normal;
font-family:'Open Sans', sans-serif;
font-weight:300;
text-align:center;
font-size:1.25em;
line-height:1.95em;
hyphens:auto;
margin-left:10%;
margin-right:10%;
}
header.major11 p.fuss{
display:inline-block;
border-top:solid 0px rgba(18,74,149,0.76);
width:80%;
color:rgba(255,149,42,1.0);
margin:1.5em 0 0 0;
padding:1.5em 0 0 0;
font-style:normal;
font-family:'Open Sans', sans-serif;
font-weight:300;
text-align:center;
font-size:0.973em;
line-height:1.95em;
hyphens:auto;
margin-left:10%;
margin-right:10%;
}
header.major11 a{
text-decoration:none;
color:rgba(114,211,236,0.93);
font-style:normal;
font-family:'Open Sans', sans-serif;
font-weight:300;
text-align:justify;
font-size:1.05em;
line-height:1.95em;
}
 header.major11 a:hover{
 color:rgba(18,205,174,1.0);
}
h2.siterindex2{
color:rgba(255,188,83,1.0); !important;
font-family:'Open Sans',sans-serif; 
font-style:normal;
font-weight:300;
font-size:1.45em;
margin-bottom:0.250em;
line-height:1.26em;
}

ul.siterindex{
list-style-type:disc;
margin-bottom:-5.25em;
color:rgba(255,188,83,1.0); !important;
}
li.siterindex{
border-top:solid 0px rgba(18,74,149,0.76);
width:76%;
color:rgba(255,188,83,1.0); !important;
margin:0.5em 0 0 0;
padding:0.5em 0 0 0;
font-style:normal;
font-weight:300;
text-align:justify;
font-size:1.25em;
line-height:1.95em;
hyphens:auto;
margin-left:12%;
margin-right:12%;
}
header.major p{
display:inline-block;
border-top:solid 1px rgba(252,26,9,0.24);
width:100%;
color:rgba(255,255,255,0.57);
margin:1.5em 0 0 0;
padding:1.5em 0 0 0;
font-style:normal;
font-family:'Bree Serif';
font-weight:400;
text-align:justify;
font-size:1.25em;
line-height:1.95em;
hyphens:auto;
}
.followcontent{
margin-top:7.5em;
}
div.spin{
position:relative;
top:1.47em;
}
.kreis-spin{
position:relative;
width:28%;
height:28%;
background:transparent;
border-radius:100%;
clip-path:circle(40% at 50% 50%);
-webkit-clip-path:circle(40% at 50% 50%);
margin:0 auto 0;
border:0;
margin-left:36%;
margin-right:36%;
-webkit-box-shadow:-3px 3px 300px 0px rgba(7, 7, 66, 0.851);
-moz-box-shadow:-3px 3px 300px 0px rgba(7, 7, 66, 0.85);
box-shadow:-3px 3px 300px 0px rgba(7, 7, 66, 0.85);
 -webkit-animation:spin 10s linear infinite;
-moz-animation:spin 10s linear infinite;
animation:spin 10s linear infinite;
}
@-moz-keyframes spin{
 100%{
 -moz-transform:rotate(360deg);
}
}
@-webkit-keyframes spin{
 100%{
 -webkit-transform:rotate(360deg);
}
}
@keyframes spin{
 100%{
 -webkit-transform:rotate(360deg);
 transform:rotate(360deg);
}
}
.rotate {
    animation: rotation 8s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}
#footer{
position:relative;
top:-1.5em;
background:linear-gradient(rgba(29,142,167,0.21), rgba(23,101,197,0.07) 100%);
padding:4em 0 6em 0;
text-align:center;
width:100%;
height:auto;
border-top:1px solid rgba(0,0,0,0.76);
font-family:'Open Sans', sans-serif;
}
#footer h1{
margin-top:0.35em;
font-family:'Lancelot', cursive;
font-size:4.95em;
line-height:1.1em;
font-weight:300;
letter-spacing:0.015em;
}
#footer div.fto{
position:relative;
top:-4.4em;
}
#footer strong.pp{
font-family:'Lancelot', cursive;
font-size:1.90em;
font-weight:300;
letter-spacing:0.015em;
color:rgba(29,142,167,1.0);
background-image:linear-gradient(90deg,#f28e18,#f25e18,#f24c18,#f25e18,#f28e18);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
text-align:center;
margin:0 auto 0;
}
hr.fot{
position:relative;
display:block;
border:0;
height:6px;
border-top:solid 1px rgba(0,0,0,0.42) !important;
border-bottom:solid 1px rgba(0,0,0,0.42) !important;
width:80%;
margin:0 auto 0;
top:0.85em;
}
hr.fot:before, hr:after{
content:'';
position:absolute;
top:-8px;
display:block;
width:1px;
height:21px;
background:rgba(0,0,0,0.42) !important;
}
hr.fot:before{
left:-1px;
}
hr.fot:after{
right:-1px;
}
#footer img.logo{
width:18.50em;
 height:auto;
 border:0;
margin-top:-1.55em;
padding-bottom:-0.95em;
box-shadow:none;
}
div.lg{
position:relative;
margin-top:-1.05em;
}
#footer img.logo2{
width:10.0em;
 height:auto;
 border:0;
margin-top:0.95em;
padding-bottom:0.55em;
box-shadow:none;
}
hr.style20{
 border:0;
 height:1px;
 background-image:linear-gradient(to right, rgba(0, 0, 0, 0), rgba(203, 45, 27, 0.55), rgba(0, 0, 0, 0));
 margin-top:-0.75em;
}
hr.style201{
 position:relative;
 top:-4.5em;
 border:0;
 height:1px;
 background-image:linear-gradient(to right, rgba(0, 0, 0, 0), rgba(203, 45, 27, 0.55), rgba(0, 0, 0, 0));
 margin-top:-0.75em;
}
hr.style30{
 border:0;
 height:1px;
 background-image:linear-gradient(to right, rgba(0, 0, 0, 0), rgba(203, 45, 27, 0.55), rgba(0, 0, 0, 0));
 margin-bottom:1.55em;
}
 #footer .copyright{
color:rgba(255,255,255,0.95);
font-size:1.05em;
line-height:1.35em;
margin:0.25em 0 0 0;
padding:0;
text-align:center;
vertical-align:middle;
font-family:'Open Sans', sans-serif;
}
#footer .copyright a{
color:rgba(255,255,255,0.95);
}
#footer .copyright a:hover{
color:rgba(22,223,230,0.95);
 ;
}
#footer div.copyright{
position:relative;
top:-2.28em;
border-left:solid 0px rgba(0,0,0,0.75);
display:inline-block;
list-style:none;
margin-left:1.0em;
margin-right:1.0em;
font-family:'Open Sans', sans-serif;
font-size:0.90em;
color:rgba(255,255,255,0.73);
line-height:1.75em;
font-weight:300;
text-align:left;
}
.clearfix:before,.clearfix:after{
display:table;
width:100%;
content:" ";
}
.clearfix:after{
clear:both;
}
.codrops-header,.codrops-top{
font-family:'Lancelot', cursive;
}
.codrops-header{
padding-bottom:0.57em;
border:none;
}
div.codrops-top{
background:rgba(0,0,0,1.0);
}
div.codrops-hamburg{
position:relative;
background:transparent;
top:-1.0em;
margin-top:0.0em;
z-index:999;
}
.codrops-header{
margin:0 auto 0;
background:rgba(0,0,0,0.01);
text-align:center;
width:100%;
margin-top:-2.75em;
}
.codrops-header h1{
margin:0;
font-weight:300;
font-size:2.625em;
line-height:1.3;
}
div.cuteNews{
        margin: 0 auto 0;
        padding-left:2.25em;
        padding-right:2.25em;
    }
     div.cuteNews_list{
        margin: 0 auto 0;
        padding-left:2.25em;
        padding-right:2.25em;
    }
    div.cuteNews_list img{
        width: 6.5em;
    height: 6.5em;
    background: rgba(0,0,0,0.0);
    margin: 0 auto 0;
    margin:0.15em 0.15em 0.35em 0.15em;
    border:0;
    box-shadow:0 0 0;
    }
     .moreRead{
  position: relative;
  float: right;;
  width: 12.5em;;
  height: auto;
  margin-top:1.5em;
  margin-right:5.5em;
    }
.codrops-header span{
display:block;
padding:0 0 0.6em 0.1em;
font-size:60%;
opacity:0.7;
}
.codrops-top{
position:relative;
width:100%;
background:#91cfa1;
background:rgba(255, 255, 255, 0.1);
text-transform:uppercase;
font-size:0.69em;
line-height:2.2;
padding-bottom:-2.5em;
}
.codrops-top a{
display:inline-block;
padding:0 1em;
color:#fff;
text-decoration:none;
letter-spacing:0.1em;
}
.codrops-top a:hover{
background:rgba(255,255,255,0.95);
color:#333;
}
.codrops-top span.right{
float:right;
}
.codrops-top span.right a{
display:block;
float:left;
}
.codrops-icon:before{
margin:0 4px;
text-transform:none;
font-weight:normal;
font-style:normal;
font-variant:normal;
font-family:'codropsicons';
line-height:1;
speak:never;
-webkit-font-smoothing:antialiased;
}
.codrops-icon-drop:before{
content:"\e001";
}
.codrops-icon-prev:before{
content:"\e004";
}
.codrops-demos{
padding-top:1em;
font-size:1.1em;
}
.codrops-demos a{
display:block;
float:left;
clear:both;
margin:0.5em 0.5em 0.5em 1.9em;
padding:1em 1.1em;
width:280px;
outline:none;
color:#fff;
background:#336ca6;
text-align:center;
text-decoration:none;
font-weight:700;
}
.codrops-demos a:hover,.codrops-demos a.current-demo,.codrops-demos a.current-demo:hover{
opacity:0.6;
}
.content{
padding:4em 2em;
max-width:1200px;
margin:0 auto;
}
.block{
float:right;
padding:0;
margin-right:122%;
margin-top:-6.85em;
}
.block-40{
width:40%;
}
.block-60{
width:60%;
}
.block p{
margin:0;
padding:0 1em 0.6em;
font-size:1.8em;
line-height:1.5;
}
.info{
text-align:center;
font-size:1.5em;
margin-top:3em;
clear:both;
padding-top:3em;
color:rgba(255,255,255,0.5);
}
.info a{
font-weight:700;
font-size:0.9em;
}
.info a:hover{
color:#336ca6;
}
.fs1{
font-size:8.6em;
}
.fs2{
font-size:1.5em;
vertical-align:middle;
}
.fs202{
font-size:15%;
vertical-align:middle;
}
.fs3{
font-size:4.25em;
vertical-align:middle;
}
.glyph{
text-align:center;
padding:0em;
margin-top:0.015em;
margin-left:0.015em;
margin-bottom:0.015em;
margin-right:0.015em;
text-shadow:none;
}
.circle2{
width:42%;
height:42%;
background:rgba(0,0,19,0.19);
border-radius:100%;
margin:0 auto 0;
border:1px solid rgba(22,44,119,0.56);
margin-left:29%;
margin-right:29%;
box-shadow:none;
}

.scrollToTopBtn{
background-color:black;
border:none;
border-radius:50%;
color:white;
cursor:pointer;
font-size:16px;
line-height:48px;
width:48px;
position:fixed;
bottom:30px;
right:30px;
z-index:100;
opacity:0;
transform:translateY(100px);
transition:all .5s ease}
#myBtn{
display:none;
position:fixed;
bottom:20px;
right:25px;
z-index:99;
font-size:0.60em;
border:none;
outline:none;
color:rgba(196,43,56,1.0);
background-color:rgba(252,26,9,0.0);
cursor:pointer;
padding:15px;
}
#myBtn:hover{
background-color:rgba(0,0,0,0.0);
color:rgba(20,153,169,1.0);
}



@media screen and (max-width:768px){
 html,body{
 min-height:100%;
 background:rgba(24,28,63,1.0);
}
 body.is-os{
background-image:url('../images/untergrund-BGS.webp') no-repeat center fixed;
background-attachment:initial !important;
background-size:cover !important;
}
 body{
background:transparent;
background-image:url('../images/untergrund-BGS.webp') no-repeat center fixed;
background-size:cover;
}
body.is-os .follower{
background-image:url('../images/untergrund-BGS2.webp') no-repeat center fixed;
background-attachment:initial !important;
background-size:cover !important;
}
body.follower{
background:transparent;
background-image:url('../images/untergrund-BGS2.webp') no-repeat center fixed;
background-size:cover;
}
body.is-os .klangliege{
background-image:url('../images/untergrund-BGS3.webp') no-repeat center fixed;
background-attachment:initial !important;
background-size:cover !important;
}
body.klangliege{
background:transparent;
background-image:url('../images/untergrund-BGS3.webp') no-repeat center fixed;
background-size:cover;
}
div.codrops-hamburg{
position:relative;
background:transparent;
margin-top:0.25em;
margin-bottom:1.75em;
}
 div.cuteNews{
        margin: 0 auto 0;
        padding-left:0.85em;
        padding-right:0.85em;
    }
    a.buttonCute {
        	display: block;
                    font-weight:normal;
                    font-family: 'Satisfy', cursive !important;
                    font-size:0.85em;
                    letter-spacing:0.0em;
        -webkit-box-shadow: 12px 12px 16px 0px rgba(0, 0, 0, 0.55);
        -moz-box-shadow:    12px 12px 16px 0px rgba(0, 0, 0, 0.55);
        box-shadow:         12px 12px 16px 0px rgba(0, 0, 0, 0.55);
        position: relative;
        display: inline-block;
        background: rgba(124,48,50,0.85) url("images/lines-overlay-darker.png");
        color: rgba(255,255,255,1.0);
        text-align: center;
        border-radius: 0.5em;
        text-decoration: none;
        padding: 0.65em 3em 0.65em 3em;
        border: 0;
        cursor: pointer;
        outline: 0;
        font-weight: 300;
        -moz-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
        -webkit-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
        -ms-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
        transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
    }

    a.buttonCute:hover {
        	display: block;
                    font-weight:normal;
                    font-family: 'Satisfy', cursive;
                    font-size:0.85em;
                    letter-spacing:0.0em;
        -webkit-box-shadow: 12px 12px 16px 0px rgba(0, 0, 0, 0.55);
        -moz-box-shadow:    12px 12px 16px 0px rgba(0, 0, 0, 0.55);
        box-shadow:         12px 12px 16px 0px rgba(0, 0, 0, 0.55);
        position: relative;
        display: inline-block;
        background: rgba(124,48,50,0.85) url("images/lines-overlay-darker.png");
        color: rgba(255,151,10,1.0) !important;
        text-align: center;
        border-radius: 0.5em;
        text-decoration: none;
        padding: 0.65em 3em 0.65em 3em;
        border: 0;
        cursor: pointer;
        outline: 0;
        font-weight: 300;
        -moz-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
        -webkit-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
        -ms-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
        transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
    }
.block{
float:none;
width:100% !important;
padding:1em;
}
img.ton-ft{
margin:0 auto 0;
width:92%;
height:auto;
border:0;
margin-top:0em;
margin-bottom:0.45em;
margin-left:4%;
margin-right:4%;
}
img.ton-ft-logo{
margin:0 auto 0;
width:72%;
height:auto;
border:none;
margin-top:-0.35em;
margin-bottom:0.05em;
margin-left:14%;
margin-right:14%;
box-shadow:none;
}
img.ton-ft-logo_kl{
margin:0 auto 0;
width:38%;
height:auto;
border:none;
margin-top:-2.55em;
margin-bottom:0.05em;
margin-left:36%;
margin-right:36%;
box-shadow:none;
padding-bottom:1.25em;
}
hr.style201{
 position:relative;
 top:-4.5em;
 border:0;
 height:1px;
 background-image:linear-gradient(to right, rgba(0, 0, 0, 0), rgba(203, 45, 27, 0.55), rgba(0, 0, 0, 0));
 margin-top:3.55em;
}
#banner-follow h2{
font-family:'Lancelot', cursive;
font-size:3.25em;
line-height:1.26em;
}
 img.pic-ft{
margin:0 auto 0;
width:92%;
height:auto;
border:0;
margin-top:-0.55em;
margin-bottom:-0.55em;
margin-left:4%;
margin-right:4%;
box-shadow:none;
}
.circle2{
width:76%;
height:76%;
background:rgba(0,0,19,0.19);
border-radius:100%;
margin:0 auto 0;
border:1px solid rgba(22,44,119,0.56);
margin-left:12%;
margin-right:12%;
box-shadow:none;
}

.codrops-header{
padding-bottom:0.57em;
border-bottom:24px solid rgba(255,0,0,1.0);
}
#intro{
position:relative;
top:-7.75em;
padding-bottom:8.0em;
text-align:center;
-webkit-animation:fadeIn 3s;
-moz-animation:fadeIn 3s;
-o-animation:fadeIn 5s;
animation:fadeIn 5s;
margin-bottom:-4.5em;
width:96%;
margin-left:2%;
margin-right:2%;
background:transparent;
}
 hr.style20{
 border:0;
 height:1px;
 width:98%;
 margin-left:2%;
 margin-right:2%;
 background-image:linear-gradient(to right, rgba(0, 0, 0, 0), rgba(203, 45, 27, 0.55), rgba(0, 0, 0, 0));
 margin-top:0.75em;
}
 hr.style30{
 border:0;
 height:1px;
 width:98%;
 margin-left:2%;
 margin-right:2%;
 background-image:linear-gradient(to right, rgba(0, 0, 0, 0), rgba(203, 45, 27, 0.55), rgba(0, 0, 0, 0));
 margin-top:-4.25em;
}

.box.special1{
width:88%;
margin-left:6%;
margin-right:6%;
text-align:center;
background:transparent;
margin:0 auto 0;
margin-top:5.5em;
margin-bottom:7.5em;
}
.wrapper.styleintro{
 position:relative;
 top:0.0em;
 background:transparent;
 - color:rgba(255,255,255,0.75);
 text-shadow:4px 4px 6px rgba(0,0,0,0.65);
 border:0px solid rgba(0,0,0,0.0);
 width:96%;
 margin-left:2%;
 margin-right:2%;
padding-bottom:4.5em;
}
.wrapper.style1{
background:linear-gradient(rgba(255,255,255,0.15), rgba(12,5,59,0.07) 100%);
-webkit-box-shadow:6px -3px 5px 0px rgba(0,0,0,0.2);
-moz-box-shadow:6px -3px 5px 0px rgba(0,0,0,0.2);
 box-shadow:6px -3px 5px 0px rgba(0,0,0,0.2);
 color:rgba(255, 255, 255, 0.75);
 text-shadow:4px 4px 6px rgba(0,0,0,0.65);
 border:0px solid rgba(0,0,0,0.0);
 box-shadow:7px 7px 11px 0px rgba(0,0,0,0.41);
-webkit-box-shadow:7px 7px 11px 0px rgba(0,0,0,0.41);
-moz-box-shadow:7px 7px 11px 0px rgba(0,0,0,0.41);
 width:96%;
 margin-left:2%;
 margin-right:2%;
}
.wrapper .title{
position:absolute;
top:-3.25em;
left:50%;
text-align:center;
text-transform:uppercase;
display:block;
font-weight:700;
letter-spacing:0.25em;
font-size:1.21em;
width:15em;
height:3.25em;
font-family:'Josefin Slab', serif;
line-height:3.25em;
margin-bottom:-3.25em;
margin-left:-7.5em;
padding-top:0.5em;
border-top:1px solid rgba(0,0,0,0.25);
border-left:1px solid rgba(0,0,0,0.25);
border-right:1px solid rgba(0,0,0,0.25);
}
header.major1{
margin-bottom:-4.55em;
}
header.major11{
position:relative;
top:-3.5em;
margin-top:2.55em;
margin-bottom:-9.95em;
}
 header.major1 h2{
margin-top:1.55em;
color:rgba(255,38,7,0.77);
font-family:'Lancelot', cursive;
font-weight:400;
font-size:1.52em;
line-height:1.22em;
}
header.major11 h2{
margin-top:0.75em;
color:rgba(255,38,7,0.77);
font-family:'Lancelot', cursive;
font-weight:300;
font-display:fallback;
font-size:1.26em;
line-height:1.62em;
}
header.major11 h2.toppe{
margin-top:1.55em;
color:rgba(255,38,7,0.77);
font-family:'Lancelot', cursive;
font-weight:300;
font-display:fallback;
font-size:1.12em;
line-height:1.42em;
}
header.major p{
display:inline-block;
border-top:solid 1px rgba(252,26,9,0.24);
width:100%;
color:rgba(255,255,255,0.57);
margin:1.5em 0 0 0;
padding:0.5em 0 0 0;
font-style:normal;
font-family:'Lancelot', cursive;
font-weight:300;
text-align:justify;
font-size:0.93em;
line-height:1.955em;
hyphens:auto;
}
header.major1 p{
display:inline-block;
border-top:solid 1px rgba(252,26,9,0.24);
width:100%;
color:rgba(255,255,255,0.57);
margin:1.5em 0 0 0;
padding:1.5em 0 0 0;
font-style:normal;
 font-family:'Lancelot', cursive;
font-weight:300;
font-display:fallback;
text-align:justify;
font-size:0.93em;
line-height:1.955em;
hyphens:auto;
}
 header.major11 p{
display:inline-block;
border-top:solid 0px rgba(252,26,9,0.24);
width:100%;
color:rgba(255,255,255,0.97);
margin:0.5em 0 0 0;
padding:0.5em 0 0 0;
font-style:normal;
font-weight:300;
text-align:justify;
font-size:1.15em;
line-height:1.375em;
hyphens:auto;
}
li.siterindex{
border-top:solid 0px rgba(18,74,149,0.76);
width:76%;
color:rgba(255,188,83,1.0);
margin:0.5em 0 0 0;
padding:0.5em 0 0 0;
font-style:normal;
font-weight:300;
text-align:left;
font-size:1.15em;
line-height:1.95em;
hyphens:auto;
margin-left:12%;
margin-right:12%;
}
header.major11 p.zitat{
display:inline-block;
width:90%;
color:rgba(255,255,255,0.97);
margin:0.1em 0 0 0.5em;
padding:0.5em 0.5em 0.5em 0.5em;
font-style:normal;
font-family:'Lancelot', cursive;
font-weight:300;
font-display:fallback;
text-align:center;
font-size:1.35em;
line-height:1.25em;
hyphens:auto;
}
header.major11 p.fuss{
display:inline-block;
border-top:solid 0px rgba(18,74,149,0.76);
width:94%;
color:rgba(255,149,42,1.0);
margin:1.15em 0 0 0;
padding:1.15em 0 0 0;
font-style:normal;
font-family:'Open Sans', sans-serif;
font-weight:300;
text-align:center;
font-size:0.885em;
line-height:1.35em;
hyphens:auto;
margin-left:3%;
margin-right:3%;
}
#banner{
position:relative;
margin-top:-1.17em;
}
#banner h1{
font-family:'Lancelot',cursive;
font-weight:300;
font-size:2.55em;
line-height:1.11em;
font-display:fallback;
}
div.wipe{
position:relative;
top:-8.5em;
}
div.wipe2{
position:relative;
margin-top:-10.65em;
}
div.wipe{
position:relative;
margin-top:8.65em;
}
#banner h2{
font-family:'Quattrocento', serif;
font-weight:300;
font-size:1.31em;
line-height:1.26em;
font-display:fallback;
}
#banner-top h3{
font-family:'Lancelot',cursive;
font-size:1.61em;
line-height:0.86em;
font-display:fallback;
}
#footer h1.linear-wipe{
 font-family:'Lancelot',cursive;
 font-weight:300;
font-size:3.75em;
line-height:1.0em;
font-display:fallback;
margin-top:0.19em;
margin-bottom:1.25em;
}
h2.linear-wipe{
            font-family: 'Lancelot', cursive;
            font-size:1.45em;
            margin-bottom:0.250em;
            line-height:1.26em;
            }
h3.linear-wipe{
font-family:'Quattrocento',serif;
font-weight:300;
font-size:1.17em;
font-display:fallback;
margin-top:-0.79em;
}
#banner-top{
position:relative;
margin-top:-5.89em;
}
div.main{
position:relative;
top:-9.73em;
max-width:100%;
margin:0 auto 0;
background:transparent;
}
div.impo{
font-size:0.91em;
letter-spacing:1px;
font-weight:400;
font-family:'Open Sans',sans-serif;
line-height:1.75em;
text-align:center;
text-transform:none;
color:rgba(255,255,255,0.87);
margin:0 auto 0;
width:90%;
}
img{
    border:1px solid rgba(0,0,0,1.0);
    border-radius: 18px;
}

.image.featured2 {
            width: 60%;
            height:auto;
            margin: 0 auto 0;
            background: rgba(41,36,77,1.0);
            border: 1px solid rgba(0,0,0,1.0);
            border-radius: 18px;
            -webkit-box-shadow: 12px 12px 16px 0px rgba(0, 0, 0, 0.75);
            -moz-box-shadow:    12px 12px 16px 0px rgba(0, 0, 0, 0.75);
            box-shadow:         12px 12px 16px 0px rgba(0, 0, 0, 0.75);
            display:block;

        }
.image.featured2.abgerundete-ecken {
    border-radius: 10px;
}
img.ton-ft2{
margin:0 auto 0;
width:44%;
height:auto;
border:0;
margin-top:-0.95em;
margin-bottom:0.45em;
margin-left:18%;
margin-right:18%;
}
.video-container {
    width:85%;
    height:auto;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
    background:rgba(0,0,0,0.25);
    border:1px solid rgba(0,0,0,1.0);
    margin-left:1.55em;
    margin-right:1.55em;
    margin:0 auto 0;
    -webkit-box-shadow: 7px 7px 9px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    7px 7px 9px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         7px 7px 9px 0px rgba(50, 50, 50, 0.75);
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.kreis-spin{
position:relative;
top:0.5em;
width:46%;
height:46%;
background:transparent;
border-radius:100%;
margin:0 auto 0;
border:0;
margin-left:26%;
margin-right:26%;
box-shadow:none;
 -webkit-animation:spin 10s linear infinite;
-moz-animation:spin 10s linear infinite;
animation:spin 10s linear infinite;
}
.rotate {
    animation: rotation 8s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@-moz-keyframes spin{
 100%{
 -moz-transform:rotate(360deg);
}
}
@-webkit-keyframes spin{
 100%{
 -webkit-transform:rotate(360deg);
}
}
@keyframes spin{
 100%{
 -webkit-transform:rotate(360deg);
 transform:rotate(360deg);
}
}
#footer{
position:relative;
top:-1.5em;
background:linear-gradient(rgba(29,142,167,0.21), rgba(23,101,197,0.07) 100%);
padding:4em 0 6em 0;
text-align:center;
width:100%;
height:auto;
border-top:1px solid rgba(0,0,0,0.76);
font-family:'Open Sans',sans-serif;
margin-left:0%;
margin-right:0%;
}
#footer .copyright{
color:rgba(255,255,255,0.95);
font-size:1.05em;
line-height:1.35em;
margin:0.25em 0 0 0;
padding:0;
text-align:center;
vertical-align:middle;
font-family:'Open Sans',sans-serif;
}
#footer strong.pp{
font-size:1.05em;
 line-height:1.05em;
font-weight:300;
letter-spacing:0.15em;
color:rgba(252,26,9,1.0);
text-align:center;
margin:0 auto 0;
margin-top:-5.95em;
}
#footer div.fto{
position:relative;
top:-4.4em;
width:100%;
margin-left:0%;
margin-right:0%;
text-align:center;
}
#myBtn{
display:none;
position:fixed;
bottom:10px;
right:10px;
z-index:99;
font-size:0.60em;
border:none;
outline:none;
background-color:rgba(252,26,9,0.0);
color:rgba(196,43,56,1.0);
cursor:pointer;
padding:15px;
}
#myBtn:hover{
background-color:rgba(0,0,0,0.0);
color:rgba(20,153,169,1.0);
}
#footer img.logo{
width:11.50em;
 height:auto;
 border:0;
margin-top:-2.25em;
padding-bottom:0.55em;
box-shadow:none;
}
 #footer img.logo2{
width:6.25em;
 height:auto;
 border:0;
margin-top:0.95em;
padding-bottom:0.55em;
}
#footer div.copyright{
position:relative;
top:-1.95em;
border-left:solid 0px rgba(0,0,0,0.75);
display:inline-block;
list-style:none;
margin-left:1.0em;
margin-right:1.0em;
font-family:'Open Sans', sans-serif;
font-size:0.78em;
color:rgba(255,255,255,0.73);
line-height:1.75em;
font-weight:300;
text-align:center;
}
.fs1{
font-size:5.6em;
}
.fs2{
font-size:1.07em;
}
}
@media screen and (max-width:411px){
body{
font-size:80%;
}
div.main{
position:relative;
top:-9.73em;
max-width:150%;
margin:0 auto 0;
background:transparent;
}
.codrops-icon span{
display:none;
}
.wrapper.styleintro{
background:transparent;
 color:rgba(255, 255, 255, 0.75);
 text-shadow:4px 4px 6px rgba(0,0,0,0.65);
 border:0px solid rgba(0,0,0,0.0);
 width:96%;
 margin-left:2%;
 margin-right:2%;
 margin-top:5.85em;
}
}