/***** BEGIN RESET *****/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;	
}

ol, ul {
	list-style: none;
}



/***** END RESET *****/

/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

/* COLORS 
maroon: #9a1a3c
*/

/*-------- BODY STYLES ---------------------------------------*/
body {
    margin:0 auto;
    width:100%;
  	font-family: 'Poppins', sans-serif !important;
  	font-size:18px;
  	line-height:32px;
	overflow-x:hidden;
	background: #fff;
}

h1 {font-size:40px; text-transform:uppercase; color:#9a1a3c; font-weight: 700; padding: 10px 0px 20px 0px;}
h2{font-size: 30px;text-transform:uppercase; font-weight: 400; padding-top: 0;} 
h2:hover{color:#9a1a3c;}
h3{font-size:28px; text-transform:uppercase; color:#9a1a3c; font-weight: 700; text-align:left;}
h4 {font-size:18px; text-transform:uppercase; color:#9a1a3c; }

a:link, a:visited, a:active {text-decoration:none; }
a:hover {text-decoration:none; }
hr{ border: 3px solid #fff; width:35%;}

p{padding-bottom: 5px;}

/*-------- LAYOUT STYLES ---------------------------------------*/

.wrapper-inner {
	width: 60%;
	margin:0 auto;
    padding: 20px 0px;
}

.wrapper {
	text-align:center;
	max-width:100%; 
	margin:0 auto;
}
   
#pad{padding: 40px 0;}

.logo {width:17%; display:inline-block; float:left; padding:10px 0px 10px 80px;}

.two-cols {
	width: 48%;
	max-width: 100%;
	display: inline-block;
	vertical-align: top;
	text-align: left;
	padding: 20px 0px;
}


/*------- GRID IMAGE EFFECTS -----------------------------*/
.grid {
	position: relative;
	margin: 0 auto;
	width: 100%;
	list-style: none;
	text-align: center;
	
}
.grid3 {
	position: relative;
	margin: 0 auto;
	width: 100%;
	list-style: none;
	text-align: center;
	
}

/* Common style */
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	width: 50%;
	height: auto;
	margin: 0 auto; 
	background: #3085a3;
	text-align: center;
	cursor: pointer;
}

.effect-ming img {
	width: 100%;
	height: auto;
}

.grid figure figcaption {
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h1 {
	word-spacing: -0.15em;
	font-weight: 700;
	color:#fff; text-align:center;
}

.grid figure h1 span {
	font-weight: 800;
}

.grid figure h1,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}
/*----------MING EFFECT ------------------*/


figure.effect-ming {
	background: #030c17;
}

figure.effect-ming img {
	opacity: 0.7;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-ming figcaption::before {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	border: 2px solid #fff;
	box-shadow: 0 0 0 30px rgba(255,255,255,0.2);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(1.4,1.4,1);
	transform: scale3d(1.4,1.4,1);
}

figure.effect-ming h2 {
    padding: 10px 0px 20px 0px;
	margin: 30% 0 10px 0;
    font-size: 40px;
      text-transform: uppercase;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
    font-weight: 700;
}

figure.effect-ming p {
	padding: 1em;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
}

figure.effect-ming:hover h2 {
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}

figure.effect-ming:hover figcaption::before,
figure.effect-ming:hover p {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

figure.effect-ming:hover figcaption {
	background-color: rgba(58,52,42,0);
}

figure.effect-ming:hover img {
	opacity: 0.4;
}



/*-------- NAVIGATION STYLES ---------------------------------------*/
/* This horizontal navigation has 4 dropdown levels, but you can change it to include more levels if necessary.*/
#navlists img{display:inline-block;}

.navigation_container { /* container to center the nav within a standard width of 1020px, or adjust to width of your site. Links will always float left or right. */
    text-align:center;
    background:#fff;
    border-bottom: 2px solid #9a1a3c;
}
  
#nav {
    position:relative;
    display:block;  
    z-index:9000;
    margin:0 auto 0 auto;
    padding:0 0 0 0;
    text-align:center;
    padding: 2% 2% 0 0 ;
	float:right;
}
  
#nav ul, #nav li {
    list-style: none;  
    margin:0 0 0 0;
    padding:0 0 0 0;  
}
  
#nav ul li {
    display: block;
    position: relative;
    float:right;
    text-align:center;
}
  
#nav li ul {
    display: none;
}
  
  
#nav ul li a { /* appearance of the first-level links */
    display: block;
    text-decoration: none;
    color: #9a1a3c;
    font-weight:700;
    font-size:18px;
    line-height:18px;
    transition:color .2s ease-in-out; -moz-transition:color .2s ease-in-out; -webkit-transition:color .2s ease-in-out;
    padding:8px 17px;  
    text-transform: uppercase;
    text-align:center;
  	font-family: 'Poppins', sans-serif;
}
 
 
#nav ul li a:hover { /* appearance of the first-level links on hover */
    color:#000; 
}
  
  
  
#nav ul li li a { /* appearance of the sub-level links */
    width:215px;
    padding:8px 0 8px 15px;
    text-align:left;
    background:#090909;
    border-bottom:1px #333 solid;
    border-right: 1px solid #333;
    border-left: 1px solid #333;    
}
#nav ul li li a:hover { /* appearance of the sub-level links on hover */
    color:#fff; 
    background:#4b0000;     
}
  
  
  
/* Optional-use, Begin targeting styles of first and last links */
#nav ul li:last-child  { /* Optional-use, this targets last li */
}
#nav ul li:last-child a {
}
#nav ul li:first-child  { /* Optional-use, this targets first li */
}
  
/* Optional-use, cancells out border for subnav li containers*/
#nav ul li li:last-child  {
    border-left:0;
    border-right:0;
}
#nav ul li li:last-child a {
    border-right: 1px solid #333;
}
#nav ul li li:first-child  {
    border-left:0;
    border-right:0;
}
/* Optional-use, End targeting styles of first and last links */
  
  
  
/* Unless needing to do something extra or experimental, DON'T edit these positioning styles below! */
#nav ul ul {
    display: none;
    position: absolute; 
    top:100%;
    left:0;
}
  
#nav ul ul ul {
    position: absolute; 
    left: 100%;
    top:0; 
}
  
#nav ul li:hover > ul {  
    display: block;
    line-height:18px; /* make sure your line-height always matches that of your main link styles!*/
    z-index: 100;
    background:#4b0000; /* make sure your background color always matches your link styles!*/
}
  
#nav ul ul li {
    float: none; 
    position: relative;
}
  
  
.show-menu-for-mobile {display:none;}  /* At most larger screen widths, the burger icon for the mobile menu won't be displayed. */

/******MAIN NAVIGATION END******/

/*-------- MANU LOGO STYLES -------------------------------*/
.manu-logos{ 
	background-color: #f3f3f3;
	width: 100%;

}
.manu-logos img{ 
	max-width: 200px; 
	padding: 30px 40px;
	display: inline-block;
	text-align: center;
	margin: 0 auto;
	width:100%;
}

/*-------- HOME FEATURE IMAGE STYLES -----------------------------*/

.feature{
	background:url(../siteart/feature.jpg);
	width:100%;
	color: #fff;
	border-top: 6px solid #9a1a3c;
}

.feature-inner {
	top: 0px; 
	bottom: 0px;
	margin-top: 0px; 
	margin-bottom: 0px;
	width: 60%; 
	margin: 0 auto;
	padding: 6% 0px;
}

.feature h2, .feature h1{color:#fff; padding: 10px 0px; font-size: 30px; line-height: 38px;font-weight: 700;text-transform: uppercase;}


/*-------- FOOTER STYLES ---------------------------------------*/
.bottomwrap{background: #fff; width: 100%;  color: #9a1a3c;}

#bottom-contact{ display: inline-block; color:#9a1a3c; padding: 20px 0px;}
#bottom-contact a {color:#9a1a3c;}
.col-left{display:inline-block; float:left; text-align:left; padding: 20px 0px; width:40%;}
.col-left p{color:#9a1a3c;text-transform: uppercase; font-weight: 700; text-align:left; font-size: 18px;}
.col-left a {color:#9a1a3c;}
.col-right{display:inline-block; float:right; padding: 20px 0px; text-align:right; width: 40%;}
.col-right img{ width:60%; display: inline-block;}

footer {border-top: #9a1a3c solid thin; width:100%; margin:0 auto; background: #fff;  color: #9a1a3c;}
#footercontent {width:70%; margin:0 auto; font-weight: 700; text-transform: uppercase; font-size: 15px; padding: 10px 0px;}
#footercontent a{ color:#9a1a3c;}
#footercontent a:hover{ text-decoration: underline;}


/*-------- RESPONSIVE STYLES ---------------------------------------*/

@media screen and (max-width: 1100px) and (min-width:321px) {
.show-menu-for-mobile {display: block;}
.hide-for-mobile {display:none;}
.hide {display:none;}
/******************styles for the main site navigation during mobile display*************/
#navicon {
	float: left;
	font-size: 32px;
	text-decoration: none;
	position: relative;
	display:inline-block;
	z-index: 99999999999999999;
	margin: 0.25rem 0 0 0.5rem;
	color:#9a1a3c;
}
#nav  {display:none;}
.logo {width:30%;float:none; padding: 0px;}

.col-left, .col-right{float:none; text-align:center; width:100%; margin: 0 auto;}
.col-left p, .col-left h3{text-align:center;}

.wrapper-inner, .feature-inner{width: 90%;}
}
 
@media screen and (max-width: 649px) and (min-width: 320px) {	
.wrapper-inner{width: 90%;}
h1{font-size:30px;}
.feature h1{font-size:22px;}

.logo {width: 45%; float:none;}

#bottom-inner { width:95%;}
#footercontent{width: 95%;}
.two-cols{width: 95%; text-align: center;}
.col-left, .col-right{float:none; text-align:center; width:100%; margin: 0 auto;}
.col-left p, .col-left h3{text-align:center;}
#footercontent{font-size:12px;}

.grid figure h1{font-size: 20px;}
}

@media screen and (max-width: 410px){
.grid figure {width:100%; float:none;}
.grid figure h1{font-size: 25px;} 
}

@media screen and (max-width: 320px){
.show-menu-for-mobile {display: block;}
.hide-for-mobile {display:none;}
.hide {display:none;}
/******************styles for the main site navigation during mobile display*************/
#navicon {
	float: left;
	font-size: 32px;
	text-decoration: none;
	position: relative;
	display:inline-block;
	z-index: 99999999999999999;
	margin: 0.25rem 0 0 0.5rem;
	color:#9a1a3c;
}
#nav {display:none;}
.container {margin-top:0px;}
.logo {width: 50%;}

.wrapper-inner, .feature-inner{width: 90%;}

h1{font-size:30px;}
.feature h1{font-size:20px;}
h3{ font-size: 28px;}

.two-cols{width: 95%; text-align: center;}

#footercontent{width: 95%;}
#bottom-inner { width:95%;}
.col-left, .col-right{float:none; text-align:center; width:100%; margin: 0 auto;}
.col-left p, .col-left h3{text-align:center;}
.col-right img{width: 80%;}
#footercontent{font-size:12px;}

}