* 
    box-sizing border-box
    ::before
    ::after


   

                                                                                        
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
    height: 90%;
    width: 100%;
    
}
                                                                                        
body {
   font-family: sans-serif;
    color:rgb(148, 148, 148);
    background: #fff;
    font-weight: 200;
    text-align: center;
}
img {
    max-width:100%;
   height: auto;
}
div{
   margin-left: auto;
   margin-right: auto;
}
 .main-nav a:visited {
 color:rgb(148, 148, 148);
  
}                                                                                             
a:link {
     color:rgb(148, 148, 148);
     font-style: italic;
     text-decoration: none;
}
 .main-nav a:hover {
    color: red;
  
}      

                                                                                        


                                                                                        

.menu-toggle{
   display: block;
   border: none;
   background-color: #fff;
   font-size: 1rem;
   

}
.contact{
  margin-top: 5%;
  line-height: 2rem;
 

}
.contact a:hover{
   color: red;
}
.title{
   margin-top: 5%;
}


/*Iphonew*/
@media  (max-width:480px) and (orientation: portrait) {
    .name{
        font-size: 2.7rem;
        text-align: center;
        margin-top: 8%;
       text-align: center;
     
    
    }
    .musik_header-left{
      font-size: 2.5rem;
    }
   .navig{
       float: right;
        margin-right: 8%;
        margin-top: -4%;
         background-color: #fff;
       
     }
     .main-nav{
        display: none;
           margin-bottom: 80%;
            
     }
     button.menutoggle{
         font-size: 1rem;
         background-color: #fff;
          width: 10%;
          margin-left: -20%;
        
         
      
     }

   
     .main_img{
      margin-top: 33%;
      
      margin-right:2%;
       width: 93%;
     

     }
     .musik{
      display: flex;
      width: 90%;
      padding-left: 10px;
      
     }
     .musik-img{
      width: 180%;
      margin-top: -5%;
      margin-left:2%;
     }
     .musik-text{
      font-size: .8rem;
       font-style: italic;
      padding-left: 5px;
      padding-right: 5px;
       font-weight: 500; 
      
     }
     
   
     .globe_sm{
        display: block;
       
       
        
       margin-left:-19%;
         }
         .quote-musik{
            display: block;
          font-size: .9rem;
          text-align: left;
          font-weight: 100;
          line-height: 1.2rem;
          width: 80%;
         }

         .sup-img {
            width:110%;

            margin-top: -5%;
         }
                .sup-text p{
        font-size: .8rem;
       font-style: italic;
      padding-left: 5px;
      padding-right: 5px;
       font-weight: 500; 
   
      
     }
       .quote-sup p{
              display: block;
          font-size: .8rem;
          text-align: left;
          font-weight: 100;
          line-height: 1.1rem;
          width: 80%;
          margin-left: 10%;
          margin-top: 20%;
      
       
      
         }
         .quote-lehr{
            font-size: .7rem;
            width: 80%;
            text-align: left;
            line-height: 1rem;
         }
         .port-img{
            width: 30%;
            height: auto;
            margin-top: -5%;
            margin-left: 1%;
         }
         .quote-portrait{
            margin-top: 10%;
            font-size: .9rem;
            margin-left: -6%;
            margin-right: auto;
            text-align: left;
            width: 95%;
            line-height: 1.3rem;
         }
         .port_cat{
            font-weight:bold  ;
           text-decoration: underline;
         }
         .contact{
            width: 95%;
            font-size: .8rem;
            margin-top: 40%;
            margin-left: -1%;
         }
       
         


}


 @media  (min-height:360px)  and (orientation:landscape) {
    .name{
        font-size: 2.5rem;
        margin:.5%;
      margin-left: -4%;
      
    }
     .musik_header-left{
      font-size: 2rem;
      margin-top: -2%;
    }
   
   
    .navig{
        margin-right: 10%;
        margin-top: -6%;
        width: 100%;
     
    }
    .main-nav{
        display:none;
    }
    button.menu-toggle{
        margin-left: 85%;
        width: 8%;
    }
     .main_img{
      margin-top:1.9%;
      margin-left:30%;
      margin-right: auto;
       width: 33%;
       height: auto;
     }
      .musik{
      display: flex;
      width: 45%;
      padding-left: 10px;
      margin-top: -6%;
      margin-left: 6%;
      
     }
     .musik-img{
      width: 165%;
      padding-right: 20px;
     }
     .musik-text{
      font-size: .8rem;
      padding-left: 5px;
      padding-right: 5px;
       font-style: italic;
      font-weight: 500; 
      margin-top: 15%;
      
     }
      .quote-musik{
            display: block;
          font-size: .9rem;
          text-align: left;
          font-weight: 100;
          line-height: 1.3rem;
          width: 65%;
          margin-left: 26%;
          margin-top: -1%;
         }
         .supervison img{
            width:10%;
         }
         .sup-img{
            width:160%;
         }
      .sup-text p{
       font-size: .8rem;
       font-style: italic;
      padding-left: 5px;
      padding-right: 5px;
       font-weight: 500; 
   
      
     }
       .quote-sup p{
              display: block;
          font-size: .8rem;
          text-align: left;
          font-weight: 100;
          line-height: 1.1rem;
          width: 60%;
          margin-left: 25%;
          margin-top: -4%;
      
       
      
         }
           .quote-lehr{
            font-size: .9rem;
            width: 90%;
            text-align: left;
            line-height: 1.2rem;
            margin-left: 7%;
         }
            .port-img{
            width: 37%;
            height: auto;
            margin-left: -7%;
            margin-top: -4%;
         }
         .quote-portrait{
            font-size: .9rem;
            margin-left: 25%;
            margin-right: auto;
            margin-top:-10%;
            text-align: left;
            width: 95%;
            line-height: 1.3rem;
         }
         .port_cat{
            font-weight:bold  ;
           text-decoration: underline;
         }
      }
      /*IPads*/
    @media  (min-width:700px) and (orientation: portrait) {
     .name{
       margin-top: 5%;
       font-size:4rem;
     }
     .musik_header-left{
      font-size: 3.5rem;
      margin-top: -1%;
     }
     button.menu-toggle{
        display: none;
     }

     .navig{
          margin-left: -6%;
            margin-right: auto
           
         }
         .main-nav{
            font-size: 1.2rem;
            display: block;
            margin-top: 7%;
           
         }
       .main_img{
          margin-top: 5%;
           width: 65%;
          margin-left: auto;
        margin-right: auto;
       }
       .musik{
      display: flex;
      width: 70%;
      height: 
      auto;
      padding-left: 10px;
      margin-top: 9%;
      margin-left: auto;
      margin-right: auto;
      
     }
     .musik-img{
      width: 100%;
     }
    
     .musik-text{
      font-size: 1rem;
       font-style: italic;
      padding-left: 5px;
      padding-right: 5px;
       font-weight: 500; 
       }
      
     
      .quote-musik{
            display: block;
          font-size: .9rem;
          text-align: left;
          font-weight: 100;
          line-height: 1.3rem;
          width: 80%;
          margin-left: 15%;
          margin-right: auto;
          margin-top: 10%;
         }
         .sup-img{
            width: 130%;
         }
           .sup-text{
      font-size: 1rem;
       font-style: italic;
      padding-left: 5px;
      padding-right: 5px;
       font-weight: 500; 
       }
        .quote-sup{
            display: block;
          font-size: .9rem;
          text-align: left;
          font-weight: 100;
          line-height: 1.3rem;
          width: 70%;
          margin-left: auto;
          margin-right: auto;
          margin-top: 3%;
         }
           .quote-lehr{
            font-size: .9rem;
            width: 80%;
            text-align: left;
            line-height: 1.3rem;
            margin-top: 12%;
         }
             .port-img{
            width: 25%;
            height: auto;
            margin-left: -19%;
            margin-top: -4%;
         }
         .port{
            margin-top: -20%;
            margin-left: 5%;
         }
         .quote-portrait{
            font-size: .8rem;
            margin-left: 14%;
            margin-right: auto;
            margin-top:-25%;
            text-align: left;
            width: 95%;
            line-height: 1.3rem;
            margin-top: 10%;
         }
         .port_cat{
            font-weight:bold  ;
           text-decoration: underline;
         }
    }

      
      
           
    
 @media  (min-width:1020px) and (orientation:landscape){
        .name{
            font-size: 3.5rem;
           
         }
         .navig{
          margin-left: auto;
            margin-right: auto
           
         }
         .main-nav{
            font-size: 1.2rem;
            display: block;
            margin-top: 7%;
           
         }
         .main_img{
         margin-top:12%;
          width: 40%;
          margin-top: 1%;
       
         }
         .menu-toggle{
            display: none;
         }
         .musik{
      display: flex;
      width: 40%;
      padding-left: 10px;
      margin-top: 2%;
      margin-left: 15%;
      margin-bottom: 3%;
     
     
      
     }
     .musik-img{
      width: 130%;
      padding-right: 20px;
     }
     .musik-text p{
       font-size: .9rem;
    font-style: italic;
      padding-left: 5px;
      padding-right: 5px;
      padding-top: 20px;
      margin-top: -6%;
       font-weight: 500; 
   
      
     }

     
       .quote-musik p{
            display: block;
          font-size: .9rem;
          text-align: left;
          font-weight: 100;
          line-height: 1.2rem;
             margin-top:-7%;
             margin-left: 12%;
            z-index: 25;
             width: 150%;
      
       
      
         }
         .sup-img{
      width: 160%;
     }
     .sup-text p{
       font-size: .9rem;
    font-style: italic;
      padding-left: 5px;
      padding-right: 5px;
      padding-top: 20px;
      margin-top: 2%;
       font-weight: 500; 
   
      
     }
        .quote-sup p{
            display: block;
          font-size: .9rem;
          text-align: left;
          font-weight: 100;
          line-height: 1.2rem;
             margin-top: 6%;
             margin-left: 9%;
            z-index: 25;
             width: 80%;
      
       
      
         }
            .quote-lehr{
            font-size: .9rem;
            width: 80%;
            text-align: left;
            line-height: 1.3rem;
            margin-left: 27%;

            margin-top: -8%;
         }



             .port-img{
            width: 35%;
            height: auto;
            margin-left: 5%;
            margin-top: 4%;
         }
         .quote-portrait{
            font-size: .9rem;
            margin-left: 32%;
            margin-right: auto;
            margin-top:-10%;
            text-align: left;
            width: 95%;
            line-height: 1.3rem;
         }
         .port_cat{
            font-weight:bold  ;
           text-decoration: underline;
         }
          }
   /*Ipad Pro*/
   @media  (min-height:1300px) and (min-width:1010px) and (orientation:portrait) {
     .name{
        display: block;
       margin-top: 3%;
       font-size:5rem;
     }
     button.menu-toggle{
        display:none;
     }
     .navig{
      
          display: flex;
       
        margin-left: 4%;
        margin-right: auto;
        
        
     }
     .main-nav a{
       font-size: 1.6rem;
     }

    
       .main-nav{
   
          margin-top: 1%;
         margin-right: auto;
        display: flex;
         
       
       }
     

       .main_img{
         margin-top: 6%;
         width: 64%;
          margin-left: auto;
          margin-right: auto;
        }
      .musik{
         display: flex;
         width: 60%;
         padding-left: 10px;
         margin-top: 4%;
         margin-left: 12%;
      }
      .musik-image{
         width: 10%;
      }
     
     
      
  
     .musik-text p{
       font-size: 1.2rem;
        font-style: italic;
        margin-left: 10%;
   
      padding-left: 5px;
      padding-right: 5px;
      padding-top: 20px;
       font-weight: 500; 
   
      
     }
       .quote-musik {
            display: block;
          font-size: 1.3rem;
          text-align: left;
          font-weight: 100;
          line-height: 1.8rem;
             margin-top: 3%;
             margin-left: 2%;
            z-index: 25;
             width: 100%;
      
       
      
         }
          .sup-text p{
       font-size: 1.2rem;
        font-style: italic;
   
      padding-left: 5px;
      padding-right: 5px;
      padding-top: 20px;
       font-weight: 500; 
   
      
     }
       .quote-sup p{
            display: block;
          font-size: 1.3rem;
          text-align: left;
          font-weight: 100;
          line-height: 1.8rem;
             margin-top: 5%;
             margin-left: -6%;
            z-index: 25;
             width: 100%;
      
       
      
         }

            .quote-lehr{
            font-size: 1.1em;
            width: 80%;
            text-align: left;
            line-height: 1.3rem;
            margin-left: 20%;
            margin-top: -1%;
           
         }
             .port-img{
            width: 30%;
            height: auto;
            margin-left: -12%;
            margin-top: 2%;
         }
         .port{
             font-size: 1.1rem;
         }
         .quote-portrait{
           
            margin-left: 25%;
            margin-right: auto;
            margin-top:-20%;
            text-align: left;
            width: 95%;
            line-height: 1.3rem;
         }
         .port_cat{
            font-weight:bold  ;
           text-decoration: underline;
         }
      
     

  
    }

   @media  (min-width:1300px) and (min-height:1020px) and (orientation:landscape){

    
     .name{
      margin-top: 2%;
       font-size: 3.5rem;
     }
     .musik_header-left{
      margin-top: 2%;
      font-size: 2.5rem;
     }
     
     .main-nav{
      margin-left: -5%;
      margin-top: 8%;
      gap: 1;
     }
     .main-nav a{
      font-size: 1.1rem;
       
            font-size: 1.5rem;
     }
     .main_img{
      width: 40%;
     }
      .globe{
            width: 120%;
            margin-left:-6%;

            margin-right: auto;
            margin-top: 10%;
        }

     .musik{
      width: 50%;
      margin-top: 5%;
     }
     .musik-img{
      width: 160%;
     }
     .musik-text{
      padding-left: 30px;
      
       
      
     }

     .musik-text p{
      font-size: 1.1rem;
      font-style: italic;
       font-weight: 500; 
    
     }
     .quote-musik{
      margin-left: 46%;
      margin-right: auto;
      margin-top: -14%;
       font-size: 1rem;
      line-height: 1.6rem;
     }
     .quote-musik p{
     
         
            width: 25%;
            height: auto;
            margin-left: 2%;
            margin-top: 4%;
         }
         .quote-lehr{
            margin-left: 25%;
         }
        
         .quote-portrait{
            font-size: .9rem;
            margin-left: 32%;
            margin-right: auto;
            margin-top:-26%;
            text-align: left;
            width: 95%;
            line-height: 1.3rem;
         }
         .port_cat{
            font-weight:bold  ;
           text-decoration: underline;
         }
   }
    
    

   
  @media  (min-width:1410px) and (orientation:landscape){

   
   p.name{
      margin-top: 2%;
      font-size: 4.5rem;
     
     }
     .main-nav{
      font-size: 1.6rem;
     
     }
     .main_img{
      width: 40%;
   }
   .globe{
      width:80%;
      margin-left:12%;
      margin-top: 8%;
      
      }
      .musik{
         width: 35%;
         margin-left: 8%;
         margin-top: -1%;
          
      }
     
      .musik-img{
         width: 35%;
      }
      .musik-text{
          font-weight: 500; 
          width: 50%;
          margin-top: 10%;
        
      }
      .quote-musik {
         width: 50%;
         margin-left: 27%;
         margin-top: -10%;
         font-size: 1.1rem;
         line-height: 1.4rem;
        
      }
       .quote-musik p{
         line-height: 1.4rem;
         font-size: 1.1rem;
       }
      .sup{
         margin-left: -5%;
         display: flex;
      }
      .sup-img{
         width: 18%;}


            .quote-lehr{
         margin-top: 1%;
         margin-left: 34%;
         width: 60%;
         line-height: 1.8rem;
         text-align: left;
         font-size: 1.1rem;
       
       
        }
         
         
         .port-img{
            width: 34%;
            height: auto;
            margin-left:19%;
            margin-right: auto;
            margin-top: 10%;
         }
         .quote-portrait{
            font-size: 1rem;
            margin-left: 35%;
            margin-right: auto;
            margin-top:-11%;
            text-align: left;
            width: 95%;
            line-height: 1.3rem;
         }
         .port_cat{
            font-weight:bold  ;
           text-decoration: underline;
         }
      
   }
  
    
  
 
    @media (min-width:2200px) and (orientation: landscape) {
       .name{
        font-size: 3.5rem;
       }

       .navig{
        margin-left:auto;
        margin-right: auto;
        margin-top: -6%;
       }
        .main-nav{
          font-size: 1.5rem;
        
        }
        .globe{
            width: 40%;
            margin-left: 24%;
            margin-top: 6%;
            
        }
        .musik{
         width: 30%;
         margin-top: -2%;
         margin-left: 15%;
        }
       .musik-img{
         width: 20%;
         margin-left: 10%;
        
       }
        
        .musik-text{
         margin-top: 10%;
         width: 30%;
         margin-left: -25%;
         
          font-weight: 300;   
        }
        .quote-musik{
         margin-top: -20.5%;
         margin-left: 42%;
         width: 40%;
       
       
        }
         .quote-lehr{
         margin-top: 2%;
         margin-left: 38%;
         width: 40%;
         line-height: 1.8rem;
         text-align: left;
         font-size: 1.1rem;
       
       
        }

        .quote-musik p{
           line-height: 1.8rem;
           font-size: 1.1rem;
           margin-top: 38%;
           margin-left: -13%;
           width: 90%;
         
        
        }
       .port-img{
            width: 25%;
            height: auto;
            margin-left:50%;
            margin-right: auto;
            margin-top: 11%;
         }
         .quote-portrait{
            font-size: 1rem;
            margin-left: 42%;
            margin-right: auto;
            margin-top:-8%;
            text-align: left;
            width: 95%;
            line-height: 1.6rem;
         }
         .port_cat{
            font-weight:bold  ;
           text-decoration: underline;
         }
         .contact{
            margin-left: -3%;
            margin-top: 6%;
         }
     
     
 }