@media screen and (min-width:200px){
header{background-color: #fff; height: 95px; -webkit-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.15);
box-shadow: 0px 1px 4px 2px rgba(0,0,0,0.15);}
header .container{position: relative;}
header img{width: 100px;}
.modal-dialog{max-width: 700px !important}
.navbar-brand{padding-top: 18px !important;}
.navbar-toggler{background: #2f99cf; padding: 10px 10px 6px 10px !important;}
.navbar-toggler i{font-size: 1.6rem; color: #fff;}
.navbar-collapse{background: #fff; border:1px solid #e9e9e9;}
.navbar.navbar-brand,
.navbar .navbar-text {
    color: rgba(255,255,255,.8);
}
.navbar .navbar-nav .nav-link {
    color: #6a6f74;
    padding: 0.9rem 0.8rem 0.9rem 0.8rem


}
.navbar-expand-lg{padding-top: 0px; padding-bottom: 0px;}

.navbar-nav:not(.sm-collapsible) .dropdown-item .sub-arrow, .navbar-nav:not(.sm-collapsible):not([data-sm-skip]) .dropdown-menu .dropdown-toggle::after{transform: rotate(90deg); top:60%;}

.nav-active{
color: #fff !important;
background: #88be4c;
}
.navbar .nav-item:hover .nav-link {
color: #fff;
background: #88be4c;
}


.navbar .nav-item:hover .nav-link {
    color: #fff;
}

/* for dropdown only - change the color of droodown */
.navbar .dropdown-menu {
    background-color: #fff;
    padding:0px;
}
.navbar .dropdown-menu li a{color: #505050 !important; padding: 10px 15px !important;}
.navbar.dropdown-item {
    color: #ffffff;
    
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    color: #fff !important;
    background-color: #88be4c;
}

.numNmail{padding: 0px; margin: 0px; list-style: none;}
.numNmail li{display: inline-block; padding: 10px 5px;}
.numNmail li a{color: #6a6f74}
.numNmail li a:hover{text-decoration: none;}

.socialMIcon{padding: 0px; margin: 0px; list-style: none;}
.socialMIcon li{display: inline-block;}


section.banner{width: 100%; height: 330px; background: url('images/award-banner.jpg')  -850px center no-repeat;}
section.banner .container .logo{padding-top: 100px}
.bannerLogo{padding-top: 100px;}
.hofTxt{position: absolute; top: 200px; left: 5%; color: #fff;}


.hallOfFame .container{}
	figure.textFlip {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  min-width: 100%;
  max-width: 365px;
  width: 100%;
  color: #000000;
  text-align: center;
  -webkit-perspective: 50em;
  perspective: 50em;
}
figure:hover .fameName{opacity: 0;}
.fameName{transition: opacity 0.5s linear; width: 100%; height: 45px; position: absolute; z-index: 10; bottom: 0; color: #fff; padding-top: 8px; font-size: 1.4rem;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.9+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#e6000000',GradientType=0 ); /* IE6-9 */

}
figure.textFlip * {
  -webkit-box-sizing: padding-box;
  box-sizing: padding-box;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
figure.textFlip img {
  max-width: 100%;
  vertical-align: top;
}
figure.textFlip figcaption {
  top: 50%;
  left: 20px;
  right: 20px;
  position: absolute;
  padding: 0px 5px;
  opacity: 0;
  z-index: 1;
}
figure.snip1321 h2,
figure.snip1321 h4 {
  margin: 0;
}
figure.textFlip h2 {
  font-weight: 600;
  font-size: 1.6rem;
}
figure.textFlip h4 {
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.2rem;
  padding-top: 10px;
}
figure.textFlip i {
  font-size: 1.3rem;
  color: #88be4c;
  padding-top: 10px;
}
figure.textFlip:after {
  background-color: #ffffff;
  position: absolute;
  content: "";
  display: block;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  opacity: 0;
}
figure.textFlip a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}
figure.textFlip:hover figcaption,
figure.textFlip.hover figcaption {
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  opacity: 1;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
figure.textFlip:hover:after,
figure.textFlip.hover:after {
  -webkit-transform: rotateX(0);
  transform: rotateX(0);
  opacity: 0.9;
}
.linkIcon{position: absolute; bottom: 0px; left: 48%;}

}

footer{width: 100%; height: auto; background: #252932;}
.logoFooter{width: 150px; padding-top:50px;}
footer h4{color: #88be4c; font-weight: 300; padding-top: 50px;}
footer h5{font-size: 1.4rem; color: #b7bcc8; font-weight: 300;}
footer h6{font-size: 1.1rem; color: #b7bcc8; font-weight: 300;}
footer p{font-size: 0.9rem; color: #b7bcc8;}
footer i{font-size: 0.9rem; color: #b7bcc8;}
footer a{font-size: 0.9rem; color: #88be4c;}
footer a:hover{color: #88be4c;}
.copyrights{width: 100%; height: auto; background: #21252d; padding: 15px 0px;}
p.allRights{color: #565a62; text-align: center; padding: 0px; margin: 0px;}

@media (min-width: 768px) {
section.banner{background: url('images/award-banner.jpg')  center center no-repeat;}
}

@media screen and (min-width:1024px){
header{height: 50px;}
.navbar-collapse{background: transparent; border:none;}
.navbar-brand{padding-top: 2px !important;}
.bannerLogo{padding-top: 70px;}
.hofTxt{top: 150px; left: 40%;}
}


@media screen and (min-width:1333px){


}