@font-face {
      font-family: 'metrostyle'; 
      src: url('metrostyle.woff2') format('woff2'),
            url('metrostyle.woff') format('woff'),
            url('metrostyle.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
      }

         @font-face {
      font-family: 'univers55'; 
      src: url('UNVR55W.woff2') format('woff2'),
            url('UNVR55W.woff') format('woff'),
            url('UNVR55W.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
      }


   body                    {
      height: 100%;
      position: relative; 
      text-align: center;
      margin: 0; 
      background: #fff;
      font-family: 'univers55', Tahoma, Verdana, Segoe, sans-serif;
      }
 
    header  {        
      display: table; 
      text-align: center;
      margin-bottom:1200px;
      margin-top: 0; 
      margin-left: 17%; 
      margin-right: 17.2%;
      position: fixed;
      top: 0;
      padding-top: 1em;
      padding-bottom: 2em;
      background: #fff;
      z-index: 10;     
      border-bottom: solid 30px rgb(255, 255, 255, 0.7);
      width: 66.2%;  
    }
  
  h1, h2  {margin: 0 0 0.3em 0;}

  h1, h2, h3 {font-family: 'metrostyle', 'Century Gothic', 'Avant Garde', 'Trebuchet MS', sans-serif;}

  main {
      
      text-align: justify; 
      width: 66%;
      margin-left: 17%; 
      margin-right: 17%;
      margin-bottom: 17em;}

  main a {color: #700;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease; }    

  main a:hover {color: #e00;
                border-bottom: dotted 1px #e00;}   

  section     {
      padding-top: 5em;
      clear: both;
  }

  a   {color: #999;
      text-decoration: none; 
      -webkit-transition: all 0.4s ease;
      -moz-transition: all 0.4s ease;
      -o-transition: all 0.4s ease;
      transition: all 0.4s ease; 
  }

  a:hover {  
        text-decoration: none;
  }

  iframe {border:0px; 
          padding: 0; 
          margin: 0; 
          display: inline-block; 
  }

  #title { 
      position: realtive; 
      padding-top: 0.8em;
      float: left; 
      text-align: center; 
      color: #000;
      text-decoration: none;
      opacity: 0.9;
      /*text-shadow: 0.03em 0.03em 1px #AAAAAA;*/
      -webkit-transition: all 3s ease;
      -moz-transition: all 3s ease;
      -o-transition: all 3s ease;
      transition: all 3s ease;
  }

  #title a {color: #4bf;}    

  #title h1 {font: 1.9em 'metrostyle', 'Century Gothic', 'Avant Garde', 'Trebuchet MS', sans-serif;
  }

  #title h2 {font: 1.4em 'metrostyle', 'Century Gothic', 'Avant Garde', 'Trebuchet MS', sans-serif;
            line-height: 0.33em;
  }
  
  li    {
      border: none;
  }

  #hmenu    { 
      float: right;
      position: relative; 
  }
  
  #hmenu ul   {
      list-style-type: none;
      list-style-image: none;
      text-align: center; 
      margin: 0px;
      padding: 0px; 
  }
  
  #hmenu li.topmenu    {
    float: left; 
      padding: 1em; 
  }

  #hmenu li a    {       
      color: #999;
      text-decoration: none;
      opacity: 0.8;
      -webkit-transition: all 0.4s ease;
      -moz-transition: all 0.4s ease;
      -o-transition: all 0.4s ease;
      transition: all 0.4s ease;
  } 

  #hmenu li.topmenu a    {      
      font: 1.6em 'univers55', Tahoma, Verdana, Segoe, sans-serif;      
  }
  
  #hmenu li.submenu a    {
      font: 1.2em 'univers55', Tahoma, Verdana, Segoe, sans-serif;
      color: #999;
  }
  
  #hmenu li a:hover    {
 
      opacity: 1.0;
      border: none;
      text-shadow: 0.03em 0.03em 1px #AAAAAA;
                        -webkit-transition: all 0.4s ease;
                        -moz-transition: all 0.4s ease;
                        -o-transition: all 0.4s ease;
                        transition: all 0.4s ease;
  }
    
    #hmenu li ul li {
      margin: 0em;
      padding: 0em;
  }      
      
   .topmenu a         {
          float: left;   
   }

  .topmenu ul   {
        display: none;
  }   
     
   .topmenu:hover ul  {
       display: block;
   }
        
 .spin        {
              display: block;
              position: relative;
              top: 1.5em; 
              font-size: 5em;
              opacity: 1;
              clear: both;
              margin: 0.5em 0 5em 0;
              }

  .spin img   {
              height: 75vh;
              border-radius: 150px 60px 180px 80px; 
            }   

.menugaleria          {font: 2.1em 'metrostyle', 'Century Gothic', 'Avant Garde', 'Trebuchet MS', sans-serif;
                       color: #333;  
                       width:100%;
                       margin-bottom:50px; 
                       margin-top: 50px;
                        -webkit-transition: all 0.5s ease;
                        -moz-transition: all 0.5s ease;
                        -o-transition: all 0.5s ease;
                        transition: all 0.5s ease;}


.submenugaleria        {font: 0.5em 'univers55', Tahoma, Verdana, Segoe, sans-serif;
                        
                        font-variant: normal;
                       color: #333; 
                       vertical-align: top; 
                        -webkit-transition: all 0.5s ease;
                        -moz-transition: all 0.5s ease;
                        -o-transition: all 0.5s ease;
                        transition: all 0.5s ease;
                        overflow: auto; 
                       }   

.ra      {
          -moz-hyphens: auto;
          -o-hyphens: auto;
          -webkit-hyphens: auto;
          -ms-hyphens: auto;
          hyphens: auto; 
          width: 40%;
          padding-right: 10%;
          float: left;
          text-align: left;
}

.ra img             {width: 28%; 
                    float: left; 
                    margin: 1.7em 1.7em 1.0em 0;}



 .gallery       {text-align: center;
                width: 100%;}  

 .gallery img   {margin: 1em;}                                    

.artistlink     {
                        font-size: 0.5em;
                        width: 5em;
                        display: inline-block;
}

.webdesignlink     {
                        font-size: 0.5em;
                        display: inline-block;
} 

.webdesignlink:hover    {
                        text-decoration: underline;
}                      
                                              


#home   {
                position: fixed;
                bottom: 1%;
                right: 2em;
                display: none;
                text-align: center;
}

#home a   {
                display: block;
                margin-bottom: 0.5em;
}

footer { 
                padding: 2em 17%;
                background-color: rgb(55, 55, 55, 0.3);
                width: 66%;
}

footer div {text-align: left;
            padding: 0.3em;
            }

footer a {color: #777;}

#credits {
          
          padding:  0.5em 17%;
          background-color: #fff;
          height: auto;
          font-family: tahoma;

}

#credits a {
          color: #ccc;
          font-size: 0.9em;
        }


/*S T A R T   D E R    R A K E T E*/




/*A M   E N D E   D E R    R A K E T E*/

@media screen and (max-width: 1540px) {

 header, main                     {
      width: 66%;
      margin-left: 17%; 
      margin-right: 17%;
      
      }

  footer { 
            padding: 2em 17%;  
  }

  #credits {          
            padding:  0.5em 17%;
  }


}

@media screen and (max-width: 1550px) {


 header, main                    {
      width: 77%;
      margin-left: 11.5%; 
      margin-right: 11.5%;
      
      }

  footer { 
            padding: 2em 11.5%;
                width: 77%; 
  }

  #credits {          
            padding:  0.5em 11.5%;
  }

 
 
   
}

@media screen and (max-width: 1280px) {


 header, main                    {
      width: 88%;
      margin-left: 6%; 
      margin-right: 6%;
      
      }
 
 footer { 
            padding: 2em 6%; 

                width: 88%;
  }

  #credits {          
            padding:  0.5em 6%;
  }


  #hmenu li.topmenu a    {

      
      font-size: 1.7em;
      
      
  }

  #hmenu li.topmenu    {
      padding: 0.9em;
  }

  #title { 
      position: realtive; 
      padding-top: 0.3em;     
      }


 #home   {  
                right: 1em; 
}     

 
}

@media screen and (max-width: 1130px) {


body {
        font-size: 92%;
    }

header           {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
        margin-bottom: 0;
        border-bottom: none;
}  

 main                    {
      width: 86%;
      margin: 6em 7%;  
      }

iframe { 
          width: 100%;
  }

#title          {
                width: 100%; 
                float: none;
                margin: 0 0 1em 0;      
}

  #hmenu    { 
      float: none;
      top: 0;  
      margin:0;
      background-color: #FFF;
      width: 100%; 
  }

   #hmenu ul   {
      display: inline-block; 
      padding-left: auto;
      padding-right: auto;   
  }
  

 #hmenu li.topmenu    {
      padding: 0.8em;
  }


 .spin        {
           margin: 1.5em 0 6em 0;
           text-align: center;
            }
  .spin img   {
              height: auto;
              max-height: 69vh;
              width: auto;
              max-width: 90%;
            } 
  .menugaleria  {margin-top: 4em;
                 }

  #title          {
                font-size: 1.8em;
              
}

 #home   {  
                right: 0.8em; 
} 



}

@media screen and (max-width: 750px) {

body {
        font-size: 86%;
    }

 header {margin: 0 0;
        width: 100%;}

     #hmenu li.topmenu    {
      padding: 0.6em;
  }

.menugaleria {width: 95%;}

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

 #home   {  
                right: 0.6em; 
} 


} 

@media screen and (max-width: 600px) {

body {
        font-size: 78%;
    }

 #home   {  
                right: 0.4em; 
} 

 .spin        {
           margin: 2.8em 0 6em 0;
           text-align: center;
            }

}

} 

@media screen and (max-width: 500px) {

body {
        font-size: 70%;
    }
 #home   {  
                right: 0.2em; 
} 



@media screen and (max-width: 400px) {

body {
        font-size: 62%;
    }



}