/*----- kopfbereich -----*/
html { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; }
body { background-color:#DDD; margin: 0px; padding: 0px;  scroll-behavior: smooth;
font-family: 'Quicksand', sans-serif; font-weight: 400; 
font-size: 22px; color: #333; line-height: 30px;  }

/*----- vorladen und scrollen zu top -----*/
#laden { display: block; position: absolute; z-index: 9999; left: 0px; top: 0px; 
width: 100%; height: 3000px; text-align: center; padding-top: 200px; background-color: #222; } 

#scrollbox { float: left; text-align: right; overflow: hidden; width: 100%;  }
#scrollbox img { width: 50px; opacity: 0.6; filter: alpha(opacity=60); margin: 20px 50px 0px 0px; }
#scrollbox img:hover  { opacity: 0.9; filter: alpha(opacity=90); }

       
/*----- links  -----*/
div a { outline: none; border: 0px none; }
a:link { color: #0489B1; font-weight: 700; text-decoration: underline; }
a:visited { color: #0489B1; text-decoration: underline; }
a:hover { color: #661; text-decoration: underline; }
a:aktive { color: #661; text-decoration: none; }
a:focused { color: #661; text-decoration: none; }




/*----- schriften / titel  -----*/
b { color: #61380B; font-weight: 700; }
 
h1 { font-size: 38px; color: #61380B; font-weight: 700; 
line-height: 46px; margin: 10px 0px 10px 0px; }
 
h2 { font-size: 30px; color: #555; font-weight: 400; 
line-height: 36px; margin: 0px 0px 10px 0px; } 

h3 { display: inline; font-size: 20px; 
font-weight: 400; color: #AAAAFF; line-height: 28px; }

hr { border: none; border-bottom: 1px dotted #555; 
margin: 4px 0px 2px 0px; padding: 0px; background-color: none; height: 1px; }

.small { color: #AAA; }





/*----- aufzählungen  -----*/
p { padding: 5px 20px 5px 0px; margin: 0px; }

ol li {  list-style-type: none; padding: 5px 0px 5px 0px;  
line-height: 28px; margin-bottom: 2pt; margin-left: -10px; 
border-bottom: 1px dotted #666; }
li::before  {  content: "";  color: #6BE; font-size: 20px; 
font-weight: 700;  margin-left: 0px; }






/*-----  inhalte seite  -----*/

#inhalt {  width: 100%; background-image: url(../img/hg_seite.jpg); background-size: 4000px auto;
background-position: top center; background-repeat: no-repeat; }

#seite { position: relative; top: 0px; left: 0%; display: block;  padding: 0px;
margin-left: 0%; width: 100%; text-align: left; }

/* Abstand zu Anim und Menu mit margin */

#logobg {  position: absolute;  width: 100%; height: 700px; top: 0px; left: 0px;  display: block;  

background-image: url(../img/hg_seite_oben.jpg); background-size: 4000px auto;
background-position: top center; background-repeat: no-repeat; }


  

/*-----   logo  -----*/
#logo { position: absolute; z-index: 995; top: 110px; left: 0px; width: 100%;  }
#logo img { float: right; width: 15%; margin: 0px 20px 0px 0px; opacity: 1; }



/*----- Boxen fuer Flaggen clubs -----*/
.boxflag {  float: left; width: 60px; height: auto; padding: 5px  5px  0px  5px; 
box-sizing: border-box; opacity: 1;}
.boxflag a:hover { opacity: 0.7; } 
      



/* B I L D A N I M A T I O N / Formatierung Bildcontainer und Bilder */

.animbox { float: right;  display: inline-block;  width: 100%;  height: auto; box-sizing: border-box;  
margin: 78px 0px 16px 0px;  border: 1px solid #666; overflow: hidden; box-shadow: 0px 0px 20px #111; 
background: #444; }

/* Verhältnis z.B  9/0.16 = 56.25% */  
.cutbox { position: relative; width: 100%; padding-bottom: 50%; }
.slideshow { position: absolute; width: 100%; height: 100%;  }

/* Animation Einstellungen Position, Grösse usw. */ 
.slideshow li  { list-style: none; width: 95%; height: 95%;  color: transparent;
position: absolute; top: 10px; right: 0px; bottom: 0px; left: 35px; 
background-size: cover; background-position: 50% 50%; 
opacity: 0; animation: animimg 18s linear infinite 0s; }



/*-----   anim textbox und hintergrund  -----*/
.txtbox { position: relative; opacity: 1; z-index: 990; padding: 20px 20px 6px 15px; 
width: 100%; height: auto; margin: -70px 0px 0px 0px; border-radius: 5px; 
text-align: right; font-size: 30px; font-weight: 700; color: #DDD;  text-shadow: 0px 0px 4px #111; }

.hgbox { position: relative; z-index: 90; width: 100%; height: 70px; 
margin-top: -45px; border-top: 1px solid #666;
background-color:#222; opacity: 0.5; filter: alpha(opacity=50); } 



/*-----    hauptnavigation hintergrund 100%  -----*/
#navbg { position: absolute; top: 0px; width: 100%; height: 85px;  z-index: 995;  overflow: hidden; 
background: #624221; box-shadow: 0px 0px 10px #111; position: fixed; }


/*-----    hauptnavigation seitenbreite 1400px  (open- grafik)  -----*/
#nav {  position: relative; top: 0px; left: 0%; display: block;  padding: 0px;
margin-left: 3%; width: 94%; z-index: 998;  text-align: left; 
padding: 0px; box-sizing: border-box;  overflow: hidden; position: fixed; 
background-image: url(../img/hg_nav_kopf.png); background-size: 120% auto;
background-position: top right; background-repeat: no-repeat; }

#nav:hover { opacity: 1; }
.nav a { font-weight: 700; line-height: 75px; font-size: 75px; text-decoration: none;  }
.nav img { width: auto; height: 80px; border: 0px; margin: 0px 0px -5px 0px; opacity: 1; }
.nav img:hover { opacity: 0.4; }




/*-----    popup-box hauptnavigation (close-grafik)  -----*/

#lclose { visibility: hidden; float: left; margin: 20px 0px 20px 25px; padding: 10px; border-radius: 8px; 
box-sizing: border-box; overflow: hidden; background: #555; }
#lclose img { width: 60px; border: 0px none; opacity: 0.4; }
#lclose img:hover { opacity: 1; }

#navbox { position: relative; top: 0px; left: 20px; z-index: 999; width: 50%; height: 0px; 
line-height: 20px; font-size: 20px; color: #999; box-sizing: border-box; 
overflow: hidden; box-shadow: 0px 0px 10px #111; 


-moz-transition: height 0.5s ease;
-webkit-transition: height 0.5s ease;
transition: height 0.5s ease; }



/*-----    linktypen / hauptnavigation  -----*/
.hl { float: left; width: 100%; height: 55px; padding: 14px 5px 10px 40px; 
border-top: 1px solid #976;  border-bottom: 1px solid #421; border-right: 1px solid #333; 
box-sizing: border-box; background: #6F5437; opacity: 0.9; }
.hl a { line-height: 25px; font-size: 25px; font-weight: 400; color: #FEFEFE; text-decoration: none; }
.hl a:hover { color: #B0A498; text-decoration: none; }

.sl { float: left; border-top: 1px solid #976;  border-bottom: 1px solid #421; width: 100%;  border-radius: 0px; 
height: 55px; padding: 14px 5px 8px 60px; 
box-sizing: border-box;  background: #6F5437; opacity: 0.9; }
.sl a { line-height: 25px; font-size: 25px; font-weight: 400; color: #FEFEFE; text-decoration: none; }
.sl a:hover { color: #B0A498; text-decoration: none; }

.xl { float: left; width: 100%; height: 30px; margin-top: -2px; background: #555; }

#lop1, #lop2, #lop3, #lop4, #lop5, #lop6, #lop7, #lop8, #lop9, #lop10, #lop11
{ float: right; width: 35px; overflow: hidden; margin-right: 25px; 
margin-top: 5px; border: 0px solid #777; opacity: 0.8; }
.lop img { width: 35px; border: 0px none; }

#lbox1, #lbox2, #lbox3, #lbox4, #lbox5, #lbox6, #lbox7, #lbox8, #lbox9, #lbox10, #lbox11 
{ float: left; width: 100%; overflow: hidden; height: 55px;  }

.hidden { display: none; }
.visible { display: block; border-bottom: 0px solid #333; }




/*----- inhalt subbox  -----*/
#subinhalt { float: left; width: 100%; height: 500px; box-sizing:  border-box; margin-top: 20px; 
background-image: url(../img/hg_seite_unten.jpg); background-size: 4000px auto;
background-position: top center; background-repeat: no-repeat;  background-color: none; }

#subbox { position: relative; box-sizing: border-box; color: #F0ECE9; 
left: 0%; display: block; text-align: left;  margin-left: 0%; width: 100%; }

#subbox p { color: #C0B3A6; }
#subbox h1 { color: #C0B3A6; font-size: 34px; font-weight: 400; line-height: 40px; margin-bottom: 10px; }
#subbox b { color: #C0B3A6; }
#subbox a { color: #F0ECE9; font-weight: 400; }



/*-----  I - F R A M E S  - V I D E O S  -----*/
.videobox { float: left; width: 100%; }
.iframebox { position: relative; padding-bottom: 56.25%; display: inline-block; 
overflow: hidden; width: 100%; height: auto; box-shadow: 0px 0px 8px #666; }
.iframebox iframe { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
.videotext { float: left: width: 100%; height: auto;  line-height: 28px; box-sizing: border-box; margin-top: -2px;  
padding: 10px 5px 0px 5px; overflow: hidden;  }



/*----- B I L D E R  /  Boxen und Formatierungen ACHTUNG AUCH FUER CLUBS -----*/
.bildbox { float: left; width: 100%; }
.bildtext { float: left: width: 100%; height: auto;  line-height: 28px; box-sizing: border-box; margin: 2px 0px 0px 0px;
border-bottom: 1px solid #111;  
padding: 10px 20px; text-align: left; overflow: hidden;  color: #FFF; }

.imgboxleft { float: left;  width: 49.8%; height: auto; line-height: 12px; margin: 0px 25px 0px 0px;  
box-sizing: border-box; box-shadow: 2px 2px 2px #111; }
.imgboxleft img { vertical-align: top; margin-bottom: 0px; width: 100%; height: auto; }

.imgboxright { float: right;  width: 49.8%; height: auto; line-height: 12px; margin: 0px 0px 0px 15px; 
box-sizing: border-box; box-shadow: 2px 2px 2px #111;  }
.imgboxright img { vertical-align: top; margin-bottom: 0px; width: 100%; height: auto; }

/*----- mit float -----*/
.links { float: left;  width: 33%; height: auto; margin: 0px 15px 10px 0px; box-shadow: 2px 2px 2px #111; }
.rechts { float: right;  width: 33%; height: auto; margin: -15px -10px 15px 10px; box-shadow: 0px 0px 4px #111; }
.breit { float: left;  width: 100%; height: auto; margin: 0px; box-shadow: 0px 0px 4px #111; }
.rotate { float: left;  width: 90%; height: auto; 
border-top: 1px solid #FFF; border-right: 1px solid #555;  border-bottom: 1px solid #555;  border-left: 1px solid #FFF; 
margin: 0px; transform: rotate(-2deg); }




/*----- CONTAINER fuer Seite  -----*/
.clear { clear: both; width: 100%; height: 1px; }
.clear02 { clear: both; width: 100%; height: 1px;  }
.clear03 { display: none; }



/*----- Spalten fuer Texte -----*/
div { box-sizing: border-box; }

.spalte00 { float: left; width: 100%; padding: 0px; margin-bottom: 0px; 
box-sizing: border-box; background: none; }
.spalte01 { float: left; width: 49.5%; padding: 0px; margin: 1px; 
box-sizing: border-box; background: none; }
.spalte02 { float: left; width: 49.5%; padding: 0px; margin: 1px; 
box-sizing: border-box; background: none; }
.spaltenbox { float: left; width: 32.9%; height: auto; 
padding: 0px 0px 20px 0px; margin: 1px; 
box-sizing: border-box; overflow: hidden; background: none; }



/*----- Boxen fuer Texte -----*/
.boxlb25 { float: left; width: 24.4%; margin: 0.5% 0.3%; box-sizing: border-box; }
.boxlb33 { float: left; width: 35%; margin: 1.5%; box-sizing: border-box; padding-left: 20px; }
.boxlb { float: left; width: 100%; padding: 10px 10px 10px 25px; box-sizing: border-box; }
.boxlbvar { float: left; width: 100%; padding: 10px 20px 10px 25px; box-sizing: border-box; }
.boxrb { float: left; width: 100%; padding: 10px 0px 10px 10px; box-sizing: border-box;  }
.boxlbneg { float: left; width: 100%; margin-top: 2px; padding: 10px 10px 10px 25px; color: #FFF; 
box-sizing: border-box; background: #333; }
.boxlbneg b { color: #EEE; }

.boxform { float: left; width: 100%; padding: 0px; }



/*----- S P A L T E N -----*/
#spalten { 
-webkit-column-count: 1;  -moz-column-count: 1;  column-count: 1; 
-webkit-column-width: 100%; -moz-column-width: 100%; column-width: 100%;
-webkit-column-gap: 3px; -moz-column-gap: 3px; column-gap: 3px;
float: left; width: 100%; height: auto; box-sizing: border-box; }

#spalten img { float: left; width: 50%; margin: 3px 15px 3px 3px; 
box-shadow: 0px 0px 8px #111;  }


/*-----   A K T E U L L E S - G A L E R I E N   /   -----*/
/* ------ News / Formatierung Bildcontainer und Bilder W E G  ------ */
.boxnews { float: left; width: 48.9%; padding: 0.5%; height: auto; box-sizing: border-box; }
.boxnews img { width: 100%; height: auto; box-shadow: 3px 3px 6px #333; box-sizing: border-box; }
.textnews { float: right; width: 100%; padding: 15px; box-sizing: border-box;  }

.imgnews { float: left; width: 100%; height: auto; 
padding: 5px; box-sizing: border-box; }
.imgnews img { float: left; width: 100%; height: auto;  }
.imgnews img:hover  { opacity: 0.6; filter: alpha(opacity=60); }


/*-----   V I D E O - G A L E R I E N auch Clubs  -----*/
.boxvideo { float: left; width: 303px; height: 420px; 
margin: 1px; box-shadow: 2px 2px 3px #111;
box-sizing: border-box; background: #222; }
.textvideo { width: 100%; padding: 7px 15px 20px 15px; margin-top: 0px; 
border-left: 0px dotted #444; border-bottom: 0px dotted #444; 
box-sizing: border-box;  background: #222; }

.boxvideo img { width: 100%; height: auto; margin-bottom: -3px; 
border-bottom: 1px solid #222; }
.boxvideo img:hover  { opacity: 0.6; filter: alpha(opacity=60); }





/*----- D I V. T A B E L L E N -----*/
.tabbody { display: table; border-collapse: collapse;  width: 100%; margin-bottom: 10px; }
.tabzeile { display: table-row; width: 100%;  background: #333; border-bottom: 1px solid #222; }

.tabz31 { display: table-cell; width: auto;  padding: 15px 15px; border-right: 1px solid #222; }
.tabz32 { display: table-cell; width: auto;  padding: 15px 15px; border-right: 1px solid #222; }
.tabz33 { display: table-cell; width: auto;  padding: 15px 15px; border-right: 1px solid #222; }

.tabz21 { display: table-cell; width: auto;  padding: 7px 20px; text-align: left; border-right: 1px solid #222; }
.tabz22 { display: table-cell; width: auto;  padding: 7px 20px; text-align: left; border-right: 1px solid #222; }





/*-----  A C C O R D I O N   0 1  -----*/
#accordeon { position: absolute; top: 585px; right: 0px; width: 350px;  overflow: hidden;  } 

/*-----  Titelzellen / Link Id  -----*/

#li0, #li2, #li4, #li6, #li18, #li10, #li12, #li14, #li16, #li18 { opacity: 1; }

/*-----  Link Class -----*/
.li { float: left; width: 100%; box-sizing: border-box; 
padding: 8px 0px 8px 30px; margin-bottom: 1px; border-radius: 5px; background: #999; }
.li a { font-size: 22px; font-weight: 400; color: #FFF; text-decoration: none; }
.li a:hover { opacity: 1; }

/*-----  Open Button in Titelzellen -----*/
#op0, #op2, #op4, #op6, #op8, #op10, #op12, #op14, #op16, #op18 { width: 33px; overflow: hidden; opacity: 0.4; transition: opacity 1s; } 
.op { float: right; box-sizing: border-box; margin: 3px 20px -5px 0px; }
.op img { width: 33px; border: 0px none; }

/*-----  Close Button in Titelzellen -----*/
#cl0, #cl2, #cl4, #cl6, #cl8, #cl10, #cl12, #cl14, #cl16, #cl18 { margin: 0px; width: 0px; overflow: hidden; opacity: 0; transition: opacity 1s; } 
.cl { float: right; box-sizing: border-box; margin: 1px 20px -5px 0px; }
.cl img { width: 33px; border: 0px none; }

/*-----  Inhaltzellen -----*/
#co0, #co2, #co4, #co6, #co8, #co10, #co12, #co14, #co16, #co18 { display: none; }

.co { float: left; width: 100%; color: #FFF; margin-bottom: 2px; padding: 0px; }

/*-----  Linkzellen -----*/
.acc_link { float: left; width: 100%; color: #FFF; background: #555;  border-radius: 0px;
border-top: 1px solid #666; border-bottom: 1px solid #333; padding: 10px 20px 10px 30px; }
.acc_link a { color: #FFF; font-weight: 400; text-decoration: none; }
.acc_link a:hover { color: #AAA; text-decoration: none; }



/*-----  2. G A L E R I E N   /  Übersicht über einzelne Galerien -----*/
#galerieboxselect { float: left; width: 1200px; box-sizing: border-box; }

/*-----  Boxen für Auswahlbilder wird nicht mehr gebraucht -----*/
.galerie { float: left; width: 33.3%; height: 600px; box-sizing: border-box;  
border: 1px solid #222; overflow: hidden; background-color: #333; }
.galerie img { width: 100%; height: auto; }
.galeriebildtext { float: left; padding: 5px 20px 50px 20px; 
box-sizing: border-box; border-top: 0px solid #FFF; }
                             


/*----- Container nur fuer News-Vorschau (div's)  -----*/
.newsbox { float: left; width: 49.5%; height: auto; box-sizing: border-box; 
display: inline-block; margin: 0px 5px 5px 0px; overflow: hidden; 
border-top: 1px solid #FFF;  border-right: 1px solid #BBB;  border-bottom: 0px solid #999;   border-left: 1px solid #EEE;  
 }

.newscounter { float: left; width: 100%; box-sizing: border-box; 
margin: 10px 5px 10px 15px; overflow: hidden; }

.newsdatum01 { display: none; width: 100%; box-sizing: border-box; font-size: 20px; 
font-weight: 400;  color: #444;  line-height: 24px; 
border-top: 1px solid #EEE;  border-right: 1px solid #999;  border-bottom: 1px solid #999;   border-left: 1px solid #EEE;  
padding: 15px 30px 15px 0px; text-align: right; 
background: #BBB; }

.newsdatum02 { display: none; width: 100%; box-sizing: border-box; font-size: 20px; 
font-weight: 400;  color: #999;  line-height: 24px; 
padding: 10px 20px 10px 0px; border-top: 1px solid #333; 
border-left: 1px solid #333; text-align: right; background: #D7DBBC;  }
 
.newsdatum03 { display: none; width: 100%; box-sizing: border-box; font-size: 20px; 
font-weight: 400;  color: #999;  line-height: 24px; 
padding: 10px 20px 10px 0px; border-top: 1px solid #333; 
border-left: 1px solid #333; text-align: right; background: #D7DBBC;  }

.newsdatum04 { display: none; width: 100%; box-sizing: border-box; font-size: 20px; 
font-weight: 400;  color: #999;  line-height: 24px; 
padding: 10px 20px 10px 0px; border-top: 1px solid #333; 
border-left: 1px solid #333; text-align: right; background: #D7DBBC;  }

.newsdatum05 { display: none; width: 100%; box-sizing: border-box; font-size: 20px; 
font-weight: 400;  color: #999;  line-height: 24px; 
padding: 10px 20px 10px 0px; border-top: 1px solid #333; 
border-left: 1px solid #333; text-align: right; background: #D7DBBC;  }

.newsdatum06 { display: none; width: 100%; box-sizing: border-box; font-size: 20px; 
font-weight: 400;  color: #999;  line-height: 24px; 
padding: 10px 20px 10px 0px; border-top: 1px solid #333; 
border-left: 1px solid #333; text-align: right; background: #D7DBBC;  }

.newsdat01 { margin-left: 7px; }
.newsdat02 { float: right; }

.newsimgquer { padding: 20px; height: 600px; text-align: center; box-sizing: border-box; }
.newsimgquer img { border: 0px solid #555; box-shadow: 0px 0px 10px #333; }

.newsimghoch { padding: 20px; height: 600px; text-align: center; box-sizing: border-box; }
.newsimghoch img { width: auto; height: 100%; border: 0px solid #555; box-shadow: 0px 0px 10px #333;  }

.newsimgquadrat { float: left; width: 100%; text-align: center; 
margin: 0px; border: 0px solid #AAA;  }
.newsimgquadrat img { border: 0px solid #555; box-shadow: 0px 0px 10px #333;  }

.newsimgtext { float: left; width: 100%; text-align: left;  color: #999; 
margin: 0px 0px 5px 0px; padding: 5px 15px 5px 5px; border: 0px solid #AAA; 
border-bottom: 0px dotted #555; }

.newstitel { float: left; width: 100%; height: auto; box-sizing: border-box; text-align: center; 
color: #555; padding: 0px 10px 0px 5px; }

.newstextquer { float: left; width: 100%; height: auto; box-sizing: border-box; text-align: center; 
color: #555; padding: 0px 10px 20px 5px; }

.blogvsbox { float: left; width: 100%; height: auto; box-sizing: border-box;  
overflow: hidden;  padding: 5px 0px 10px 0px; background-color: none; }

.blogvsdat { float: left; width: 12%; box-sizing: border-box; 
color: #555;  text-align: center; border-radius: 5px; 
padding: 5px 0px 5px 0px; background-color: #EEE;}

.newslinks { float: left; width: auto; margin: 15px 10px 10px 0px;
border-top: 1px solid #883; border-left: 1px solid #883;
padding: 7px 25px 7px 25px; text-align: center; border-radius: 3px; 
background-color: #772; }
.newslinks a { font-weight: 400; color: #FFE; text-decoration: none; }
.newslinks:hover { opacity: 0.8; }

.newslinkw { float: left; width: auto; margin: 15px 10px 10px 0px;
border-top: 1px solid #883; border-left: 1px solid #883;
padding: 7px 25px 7px 25px; text-align: center; border-radius: 3px; 
background-color: #444; }
.newslinkw a { font-weight: 400; color: #EEE; text-decoration: none; }
.newslinkw a:hover { color: #999;  text-decoration: none;}


/*----- Formular  -----*/

textarea:focus { outline: 2px solid #66C;  font-size: 20px; background-color: #333; }

.error { float: left; width: 100%;  font-family: 'Quicksand', sans-serif; font-size: 20px; color: #F99;  text-align: left; 
margin-top: 5px; }
.form_name { float: left; width: 100%; resize: none; height: 25px; font-family: 'Quicksand', sans-serif; font-size: 20px; color: #FFF;  text-align: left; 
padding: 8px 15px; margin-bottom: 8px; border: 0px none; background: #444;  overflow: hidden; }
.form_email { float: left; width: 100%; resize: none;  height: 25px; font-family: 'Quicksand', sans-serif; font-size: 20px; color: #FFF;  text-align: left; 
padding: 8px 15px; margin-bottom: 8px; border: 0px none; background: #444; overflow: hidden; }
.form_text { float: left; width: 100%; height: 90px;  font-family: 'Quicksand', sans-serif; font-size: 20px; color: #FFF;  text-align: left; 
padding: 8px 15px;  margin-bottom: 8px; border: 0px none; background: #444; }
.form_zahl { float: left; width: 25px;  margin: 0px; resize: none;  height: 25px; font-family: 'Quicksand', sans-serif; font-size: 20px; color: #FFF;  text-align: left;  padding: 8px 15px;  border: 0px none; background: #444; overflow: hidden; }
.form_button { float: left;  
font-size: 20px; color: #DDD;  border: 0px none; border-left: 1px solid #AA5; border-top: 1px solid #AA5; 
padding: 8px 30px 5px 30px; margin-top: 10px; text-align: center; border-radius: 5px; 
background: #883; }



/*----- Bild grosse  -----*/


.imgview_b { width: 100%;  height: 100%; }

.imgview_b img { width: 100%;  height: 100%; }


.imgview_h { width: 100%;  height: 90%; text-align: center; background: #777; }

.imgview_h img { width: auto;  max-height: 100%; margin: 5% auto; box-shadow: 0px 0px 10px #111; }