section#topimg-grid{padding: 0;}
section#topimg-grid li{display: block; width:40%; float: left; font-size: 1.5em}
section#topimg-grid li:first-child{width:60%;font-size: 2em}
section#topimg-grid li:first-child div{margin-right:2px;}
section#topimg-grid li:last-child div{margin-top:2px;}
section#topimg-grid li div a{display: table; height: 179px; width: 100%; vertical-align: middle;}
section#topimg-grid li:first-child div a{ height: 360px}
section#topimg-grid li div a div{display: table-cell; vertical-align: middle; background-color: rgba(30,30,30,.3); color: #fff; padding: 0 32px; text-transform: uppercase; letter-spacing: 3px; font-weight: bold;}
section#topimg-grid li:first-child div a div { padding: 48px 64px; letter-spacing: 8px;}
section#topimg-grid li div a:hover div{background-color: rgba(0,61,166,.6);}

#titler{margin: 24px 0 24px 0; position: relative;}
#titler h3{font-size: 3.5em; letter-spacing: -.02em}
#titler h4{font-size: 2.5em; padding: 8px 0; letter-spacing: -.01em}
#titler a{display: block; position: absolute; right: 0; top: 50%; line-height: 40px; padding: 0 16px; margin: -20px 16px; border-radius: 20px; background-color: #eee;}
#titler a:hover{background-color: #0076d8; color: #fff;}

#ListGrid li{display: inline-block; width: 20%; text-align: center; float: left; position: relative;}
/* #ListGrid li div:first-child{height: 256px; background-color: #eee; margin:4px} */
#ListGrid li a{display: block;  border: 8px solid transparent; border-radius: 16px; overflow:hidden; }
#ListGrid li a:hover {border-color: #eee;}
#ListGrid li a:hover div{color: #0076d8;}
#ListGrid li a img{display: block; width: 100%}
#ListGrid li a div{padding:8px 16px 0 16px; min-height: 4em}

#ListGrid.photos div{display: none;}

.imgbigview{position: relative; padding: 0}
.imgbigview .fullview img{width: 100%}
.mobileview{display: none;}
.unbold{font-weight: normal;}

#ListGrid.promosview li{width:33.33%;}
#ListGrid.promosview li a{border-radius:0; border:none; margin: 4px; display: table; vertical-align: middle;}
#ListGrid.promosview li a div{position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: none; margin: 4px; font-size: 1.5em; padding: 35% 24px 0 24px; min-height: inherit;}
#ListGrid.promosview li a:hover div{background-color: rgba(30,30,30,.9); color: #fff; display: table-cell; vertical-align: middle;}

.cntText p{font-size: 1.125em; line-height: 1.5em; padding: 2em 0;}

.imggridview{position: relative; }
.imggridview a{margin: 2px; display: block; height: 320px;}
.imggridview a div{padding: 60px 32px; font-size: 2em;}
.imggridview li{display: inline-block; float: left;}
.imggridview.col-2 li{width: 49.4%;}

@media only screen and (max-width: 768px){
  #ListGrid.promosview li a div{font-size: 1.25em;}



  .imgbigview .fullview{display: none;}
  .mobileview{display: block; height: 480px}
  .mobilehide{display: none;}
  .mobileshow .fullview{display: block;}
  section#topimg-grid li:first-child div a div, section#topimg-grid li div a div{padding: 24px}
  section{padding: 16px 0;}
  section#topimg-grid{overflow: hidden;}
  section#topimg-grid div{overflow:auto; white-space: nowrap;}
  section#topimg-grid li, section#topimg-grid li:first-child{display: inline-block; width: 85%; margin-right: 2px; float: none; max-width: 480px; min-width: 300px}
  section#topimg-grid li:first-child div a,section#topimg-grid li div a, section#topimg-grid{height: 320px}
  section#topimg-grid li a div{white-space: normal;}
  section#topimg-grid li:first-child{font-size: 1.5em;}
  #ListGrid li{width: 25%}
  #titler{text-align: center; margin-top: 16px}
  #titler h3{font-size: 2em}
  #titler h4{font-size: 1.5em}
  #titler a{display: inline-block; margin: 12px auto 0 auto; position: relative; padding: 0 24px}
  #ListGrid li a div{padding:8px 8px 0 8px; font-size: .75em;}
  #ListGrid li{width: 25%}
  #ListGrid.photos li:nth-child(1n+5){display: none;}
}

@media only screen and (max-width: 640px){
  #ListGrid.promosview li a div{font-size: 1.125em;}
  .mobileview{height: 360px}
  #ListGrid li{width: 33.33%}
  #ListGrid.photos li:nth-child(1n+4){display: none;}
}

@media only screen and (max-width: 480px) {
  #ListGrid.promosview li a div{ display: inline-block; left: 30%; margin: 0;  padding: 20px 16px; text-align: left; overflow: hidden; text-overflow: ellipsis; max-height: 1.125em}
  #ListGrid.promosview li a:hover div{background: none; color: #333}
  #ListGrid.promosview li{float: none; display: block; margin: 0 auto 0px auto; width: 100%; max-width: 480px;}
  #ListGrid.promosview li a{border-top: 1px solid #eee; display: block;}
  #ListGrid.promosview li:nth-child(odd) {background: #f2f2f2}
  #ListGrid.promosview li img{width: 30%; max-width: 160px;}
  #ListGrid.promosview li a:hover div{background: }
}