html
{
   height:100%;
}

body
{
   font-family: Helvetica, sans-serif;
   margin:0;
   padding:0;
   height:100%;
}

img
{
   width:  100%;
   height: auto;
}


#block,#block-hell,.hell
{
   color:      #000000;
   background: #ffffff;
}
#block-dark,.dark
{
   color:      #ffffff;
   background: #354045;
}

#frame,#frame-home,#frame-mini,#frame-midi,.lmargin
{
   margin-left:    5vw;
}
#frame,#frame-home,#frame-mini,#frame-midi
{
   margin-right:   5vw;
   padding-top:    50px;
   padding-bottom: 50px;
}
#frame-home
{
   padding-top:    0px;
   padding-bottom: 0px;
}
#frame-full
{
   margin-left:    0px;
   margin-right:   0px;
   padding-top:    0px;
   padding-bottom: 0px;
}
#frame-mini
{
   margin-left:  30vw;
   margin-right: 30vw;
}
#frame-midi
{
   margin-left:  15vw;
   margin-right: 15vw;
}

#but
{
   transition: 0.5s ease;
}
#but:hover
{
   opacity: 0.5;
}


.head,#head
{
   font-size:      180%;
   padding-top:    20px;
   padding-bottom: 10px;
   opacity: 0.8;
}
.vcenter > .head
{
   padding-top: 0px;
}

.text,#text
{
   font-size: 100%;
   opacity:   0.8;
   line-height: 1.5;
   padding-bottom: 20px;
   opacity: 0.8;
}
.view,#view,.view-padding
{
}

.view-padding
{
   padding-top:    20px;
   padding-bottom: 20px;
}
.stat
{
   font-size: 400%;
   font-weight: bold;
}

.list,#list
{
   padding-left: 20px;
   padding-top:  10px;
}

#contact,#contact:link,#contact:visited,#contact:hover,#contact:active
{
   color:   #ffffff;
   text-decoration: underline;
}

#para
{
   z-index: -1;
   position: relative;
   width:100%;
   min-height:90%;
   opacity: 0.8;
   background-repeat: no-repeat;
   background-attachment: fixed
   background-position: 20% 0;
   background-size: cover;
}

#pos
{
   position: relative;
   height: auto;
   top:    30vh;
   display: flex;
   justify-content: center;
}
#txt
{
   font-size: 200%;
   padding: 15px;
   color:            #f5f5f5;
   background-color: #354045;
   opacity: 0.92;
}
#box
{
   box-sizing: border-box;
   background:rgba(248,248,248,.8);
   width: 100%;
   padding:0% 1%;
   box-shadow: 0 1px 1px rgba(0,0,0,.7),0 -1px 1px rgba(0,0,0,.7);
   border-radius:5px;
}

#row, .row
{
   display: flex;
}
#col, .col
{
   flex: 1;
}
#gap, .gap
{
   width: 10vw;
}
#row,.row,#col,.col,#gap,.gap
{
/*   border: 1px solid black;
*/
}

.blue    { color: #0080FF; }
.italic  { font-style: italic; }
.center  { text-align: center; }
.hcenter { text-align: center; }
.vcenter
{
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}

#home_10
{
   z-index: 1;
   position: relative;
   height: 0px;
   top:   15vh;
   margin-left:55%;
   margin-right:10%;
   background: transparent;
}
#home_11
{
   font-size: 10vmin;
   margin-bottom: 10px;
   opacity: 0.92;
}
#home_12
{
   font-size: 3vmin;
   color:            #f5f5f5;
   background-color: #354045;
   opacity: 0.92;
   padding: 10px;
}

#nav
{
   position: fixed;
   z-index: 10;
   width: 100%;
   transition: top 0.3s;
}
#nav-bar
{
   opacity: 0.92;
   list-style-type: none;
   margin: 0;
   pdding: 0;
   overflow: hidden;
   background-color: #ffffff;
}
#nav-but a
{
   float: right;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   color: #000000;
   opacity: 0.8;
}
#nav-but a:hover
{
   color:            #ffffff;
   background-color: #354045;
   opacity: 0.8;
}
#nav-but a:active
{
   color:            #ffffff;
   background-color: #657085;
   opacity: 0.8;
}