@font-face { font-family: 'webly';          
            src: url('webly-webfont.ttf')   
            format('truetype');             
}
html {                                  
    overflow-x: hidden;                     
    font-family: webly;                     
    letter-spacing: 1px; 
    background-color: white;
    z-index: 1;
}
body {
    margin-left: 0px;
}
a {                                     
    text-decoration: none;                  
    color: inherit;                         
}
#jsoff{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    background-color: black;
    z-index: 1000;
    color: white;
}
.json{
    visibility: hidden;
    display: none;
}
.header {                               
    background-color: black;                
    margin-top: -10px;
    position: fixed;                        
    z-index: 1;                             
    width: 100%; 
}
.wall{
    width: 100%;
    z-index: 1;
}
#wall1{
    background: url(Render1.png);
    background-attachment: fixed;
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
    height: 500px;
}
#wall2{
    background: url(Content%20v5.png);
    background-attachment: fixed;
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
    height: 800px;
}
.background{
    visibility: hidden;
    display: none;
}
#chargeit{
    position: absolute;
    left: 50%;
    text-align: right;
    top: 1875px;
    width: 45%;
    font-size: 50px;
    opacity: 0;
    transition: 0.5s ease-in-out;
}
#chargeit.visible{
    opacity: 1;
    transform: translateX(-50px);
    transition: 0.5s ease-in-out;
}
.fixed{
    top: 75px;
    position: fixed;
    background-color: #2BC0F3;                
    padding-top: 5px;                       
    padding-bottom: 5px;                                            
    color: white;
    width: 100%;
    z-index: 6;
}
#aboutfixspace{
    height: 113px;
}
.invisible, .mobile{
    display: none;
    visibility: hidden;
}
.visible{
    visibility: visible;
    display: block;
}
.nav {                                  
    position: fixed;                        
    right: 180px;                           
    top: 20px;                              
    width: 600px;                           
}
a.navigation {                          
    color: white;                           
    font-size: 25px;                        
    padding-left: 2.5%;                      
    padding-right: 2.5%;                     
    padding-top: 20px;                      
    padding-bottom: 22px;                   
}
a.navigation:hover {                   
    color: #2BC0F3;                         
    transition: color .2s linear;           
}
.logo {                                 
    padding-top: 5px;                        
    padding-left: 1%;                      
    padding-bottom: 5px;                     
    padding-right: 0.5%;                     
    vertical-align: middle;                 
    height: 70px;    
}
.order, .about {                        
    background-color: #2BC0F3;              
    color: white;                           
    font-size: 25px;                        
    padding-left: 1%;                     
    padding-right: 1%;                    
    padding-bottom: 22px;                   
    padding-top: 22px;                      
    text-align: center;                 
    position: fixed;                        
    right: 0px;                             
}
.order:hover, .about:hover {            
    color: black;                           
    transition: color .2s linear;           
}
.content {                                                  
    padding-top: 70px;
    left: 2%;
    
}
.title {
    width: 100%;
    background-color: #2BC0F3;                          
    padding-top: 5px;                       
    padding-bottom: 5px;                         
    color: white;
    z-index: 7;
}
h3 {                                    
    font-size: 30px;                        
    padding-left: 2%;                                
    z-index: 7;
}
p {                                     
    color: #0981AB;                           
    padding-left: 2%;
    font-size: 40px;
}
#impressum{
    text-align: center;
    width: 80%;
    position: absolute;
    font-size: 50px;
    left: 15%;
    top: 20%;
}
.footer {                               
    background-color: #2f2d2d;              
    color: #2BC0F3;                         
    font-size: 30px;                                           
    padding-top: 40px;                      
    padding-bottom: 20px;                                        
}
#phone{
    position: absolute;
    top: 1032px;
    padding-left: 175px;
    height: 700px;
}
#dockingstation{
    width: 1000px;
    margin-left: -120px;
    z-index: 0;
}
#text-phone{
    position: absolute;
    text-align: right;
    right: 1%;
    top: 1300px;
    font-size: 50px;
    opacity: 0;
    transition: 0.5s ease-in-out;
}
#text-phone.visible{
    opacity: 1;
    transition: 0.5s ease-in-out;
    transform: translateX(-50px);
}
.fixed-phone{
    position: fixed !important;
    top: -58px !important;
}
.phone-space{
    height: 490px;
}
.phone-down{
    top: 1372px !important;
}
.kontakt, .blog {                       
    padding-left: 2%;                     
    padding-right: 2%;                    
}

a.kontakt:hover, a.blog:hover {         
    color: #5be024;                          
    transition: color .2s linear;           
}
iframe{
    padding-left: 30px;
}
.buy {                                  
    color: white;
    background-color: #2BC0F3;
    width: 450px;
    margin-top: 10px;
    padding-left: 30px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    margin-left: 20%;
    border-radius: 25px;
    cursor: pointer;
    font-size: 80px;
    display: flex;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    transition: box-shadow .2s linear;
}
.buy:hover {                            
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    transition: box-shadow .2s linear;      
}


/* Sticky Footer */

html, body {                            
    height: 100%;
}
.content {                              
    min-height: 100%;
    margin-bottom: -50px; 
}
.content:after {                        
    content: "";
    display: block;
}
.footer, .content:after {               
    height: 50px; 
}


button {                               
    width: 205px;
    height: 205px;
    cursor: pointer;                        
    margin-top: 10px;
    margin-bottom: 10px;
}
#schwarz, #mschwarz {
    color: white;   
}

button.passive {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    transition: box-shadow .2s linear;
    border-color: transparent;

}
button.active, button.passive:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    transition: box-shadow .2s linear;
    border-color: #2BC0F3;             
  
}
.farbauswahl {
    padding-left: 20px;
}

.choose, .frage {
    left: 100px;
}
.choose {
    position: relative;
    height: auto;
    top: 0px;
}
#a1, #a2, #a3 {                         
    background-color: grey;
    position: fixed;
    height: 500px;
    top: 100px;
    width: 1000px;
    left: 100px;
    border-radius: 30px;
    z-index: 2;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.option {
    top: 250px;
    position: fixed;    
}
div.active {                            
    visibility: visible;   
}
div.passive {
    visibility: hidden;                 
}
.frage {                                
    position: relative;
    padding-top: 0px;
    padding-left: 0px;
    font-size: 50px;
    color: #2BC0F3;
}
p.active {                              
    visibility: visible;
    color: inherit;
    font-size: inherit;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-left: 0px;
}
p.passive {                             
    visibility: hidden;
    display: none;
}
div.change1, div.change2, div.change3 { 
    cursor: pointer;
    padding-left: 100px;
    background-color: #2BC0F3;
    color: white;
    width: 260px;
    padding-left: 30px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 15px;
    margin-bottom: 10px;
    font-size: 40px;
    margin-left: 20px;
    border-radius: 20px;
    float: left;
    margin-top: 10px;
    margin-right: 00px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    transition: box-shadow .2s linear;
    border-color: transparent;
}
div.change1:hover, div.change2:hover, div.change3:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    transition: box-shadow .2s linear;
}
div.change {                            
    display: -webkit-box;
    display: flex;
    
}
img.active, img.passive {               
    padding-top: 10px;
    margin-left: 0px;
    width: 220px;
}
img.passive {                           
    visibility: hidden;
    display: none;
}
.name {                                 
    width: 200px;
    font-size: 30px;
    color: #2BC0F3;
}
.description {                          
    position: relative;
    padding-left: 0px;
    width: 200px;
}
#option1 {
    left: 200px;
}
#option2 {
    left: 500px;
}
#option3 {
    left: 800px;
}
#mobile {                               
    visibility: hidden;
    display: none;
}
#nonmobile {                            
    visibility: visible;
    display: block;
}
.moption{
    position: relative;
    padding-right: 10px;
}
.mchoose{
    display: flex;
    margin-left: 20px;
    margin-bottom: 30px;
}
#mc1, #mc2, #ml1, #ml2, #mm1, #mm2, #mlgw3, #maw3{
    background-repeat: no-repeat;
    background-size: cover;
}

#mc1, #mc2{
    background-image: url(usbc2.png);
}
#ml1, #ml2{
    background-image: url(lightning2.png);
}
#mm1, #mm2{
    background-image: url(microusb2.png);
}
#maw3{
    background-image: url(Apple-Watch_Adapter2.png);
}
#mlgw3{
    background-image: url(LG-g-watch_Adapter2.png);
}