* {								/* ALL elements will include the padding and border in the element's total width and height (NOT margin) */
	box-sizing: border-box;  	/* width/height + padding + border = actual width/height of an element (By default, without setting border-box) */
}								/* Text color */
.no-pad {
	padding: 0; /* This class takes away padding from an element */
}
html {
	background-color: #F3F7F0;
}
body { 
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	background-color: white;
}
a {
	text-decoration: none; /* Removes underline from all links */
	color: green; /* Text color */
}

	/* icon-horizontal Header styling */
	
.icon-horizontal { /*  Style for 1st section in header. It's hidden from view */
	background-color: black;
	overflow: hidden;
	height: 1.75em;
	display: none;
}

	/* logo-horizontal Header styling */
	
img.logo{ /* Logo styles defined: dimension, alignment */
	max-width: 7.25em;
	height: 6.25em;
	padding: 8px 0 0 0;
	vertical-align: middle;
}
span.logo-text-2 { /* Hide Logo acronym from view */
	display: none;
}
.logo-horizontal {
	height: 6.25em;
	color: black;
	text-align: center;
	padding: 0 3.75em 0 3.45em;
	font-size: 30px;
	font-weight: 600px;
	line-height: 25px;
}
.logo-left {	/* Float logo img and text to the left. Element is taken out of normal document flow. Virtually have no height. Element that contains it has no height as well. But the next unfloated element will start where the floated element should've been. Using "clear: left|right|both" skips over floats and resumes normal document flow. Combine clear with psuedoclass ::after */
	float: left;		/* get block elements to slide left next to each other */
	display: inline-block;	/* allows us to set a width and height on the element(s); top and bottom margins/paddings of containing element are respected; doesn't add a line-break after the element, so the element can sit next to other elements */
}
.logo-right {
	float: right;
	font-size: 20px;
	font-weight: 600px;
	height: 100%;
}
.sociallinks-top {
	padding: 44px 0 0 0;
}
a.apparel-store, a.donate-btn-1:hover, a.donate-btn-1:active, a.donate-btn-2 {
	background-color: green;
	opacity: 1;
	color: #CBA32B;
	border: none;
	border-radius: 18.25px;
	padding: 14px 25px;
	text-align: center;
	transition: 0.3s;
	display: inline-block;
	cursor: pointer;
}
a.donate-btn-1, a.donate-btn-2:hover, a.donate-btn-2:active, a.apparel-store:hover, a.apparel-store:active {
	background-color: #093824;
	opacity: 0.6;
	color: white;
	border: none;
	border-radius: 18.25px;
	padding: 14px 25px;
	text-align: center;
	transition: 0.3s;
	display: inline-block;
	cursor: pointer;
}

a.contact-us {
	margin: 0;
	padding: 14px 25px;
}
@media screen and (max-width: 1120px) {   /* Makes logo-right responsive by hiding it when screen width shrinks  */
	.logo-right {
		display: none;
	}
	.logo-left {
		float: none;
		margin: 0 auto;
	}
	@media screen and (max-width: 930px) {   /* Makes logo-right responsive  */
		span.logo-text-1 {
			display: none !important;
		}
		span.logo-text-2 {
			display: inline-block;
		}
		@media screen and (max-width: 545px) {
			span.logo-text-2 {
				display: none;
			}
			.logo-horizontal {
				padding: 0;
			} 
			img.logo{
				display: block;
				margin: 0 auto;
			}
		}
	}
}

ul {
	list-style-type: none;
    padding: 0;
    margin: 0;
}
.sociallinks-top li, .sociallinks-bottom li{
	display: inline-block;
    padding: 5%;
}
a {
	text-decoration: none;
}
.fas, .fab {
	font-size: 20px;
}
.fa-facebook-f {
	color: blue;
}
.fa-envelope, .fa-phone, .fa-map-marker-alt {
	color: #CBA32B;
}
.fa-youtube {
	color: red;
}

	/* nav-bar section Styling */
	
.nav-bar {
	overflow: hidden;
	background-color: #F3F7F0;
}
.nav-wrapper a {
	float: left;
	display: block;
	text-align: center;
	padding: 14px 16px;
	font-size: 17px;
	width: 20%;
	border-left: 1px solid grey;
}
.nav-wrapper .icon, .nav-wrapper .iconleft {
	display: none;
}
.dropdown {
	float: left;
	overflow: hidden;
	width: 20%;
}
.dropbtn {
	//border-left: 1px solid grey;
    width: 100%;
	color: green;
}
.dropdown .dropbtn {
	font-size: 17px;    
	border: none;
	outline: none;
	padding: 14px 16px;
	background-color: inherit;
	margin: 0;
	border-left: 1px solid grey;
}
.dropdown #active {
	border-left: none;
}
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 290px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}
.dropdown-content a {
	float: none;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
	width: 100%;
}
.nav-wrapper a:hover, .dropdown:hover .dropbtn {
	background-color: #CBA32B;
	color: white;
}
.dropdown-content a:hover {
	background-color: #CBA32B;
	color: white;
}
.dropdown:hover .dropdown-content {
	display: block;
}

@media screen and (max-width: 700px) {
  .nav-wrapper a/*:not(:first-child)*/, .dropdown .dropbtn {
    display: none;
  }
  .nav-wrapper a.icon {
    float: right;
    display: block;
    min-width: 52%;
	border-left: none;
  }
  .nav-wrapper a.iconleft {
    float: left;
    display: block;
    width: 45%;
	text-align: right;
  }
}
@media screen and (max-width: 700px) {
  .nav-wrapper.responsive {position: relative;}
  .nav-wrapper.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
    text-align: right;
  }
  .nav-wrapper.responsive a {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
  }
  .nav-wrapper.responsive .dropdown {float: none; width: 100%;}
  .nav-wrapper.responsive .dropdown-content {position: relative;}
  .nav-wrapper.responsive .dropdown .dropbtn {
	display: block;
	width: 100%;
	text-align: left;
  }
}

	/* Page content */

@import url("https://fonts.googleapis.com/css?family=Arvo");
main {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	height: 100%;
	background: #f5f4f4;
	color: green;
	font-size: 13px;
	font-family: 'Arvo', monospace;
}
@supports (display: grid) {
  main {
    display: block;
  }
}

.message {
  border: 1px solid #d2d0d0;
  padding: 2em;
  font-size: 1.7vw;
  box-shadow: -2px 2px 10px 0px rgba(68, 68, 68, 0.4);
}
@supports (display: grid) {
  .message {
    display: none;
  }
}

.section {
  display: none;
  padding: 2rem;
}
@media screen and (min-width: 768px) {
  .section {
    padding: 4rem;
  }
}
@supports (display: grid) {
  .section {
    display: block;
  }
}

h1 {
	font-size: 2rem;
	margin: 0 0 1.5em;
	text-align: center;
	//font-weight: 600px;
	font-family: Arial, Helvetica, sans-serif;
}

.grid {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 150px;
  grid-auto-flow: row dense;
}

.item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  background: #0c9a9a;
  color: #fff;
  grid-column-start: auto;
  grid-row-start: auto;
  color: #fff;
  background: url("https://s3.amazonaws.com/ocdausa.com/convention-backdrop.png");
  background-size: cover;
  background-position: center;
  box-shadow: -2px 2px 10px 0px rgba(68, 68, 68, 0.4);
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  cursor: pointer;
  counter-increment: item-counter;
}
.item:nth-of-type(3n) {
  background-image: url("https://s3.amazonaws.com/ocdausa.com/WA-5.jpg");
}
.item:nth-of-type(4n) {
  background-image: url("https://s3.amazonaws.com/ocdausa.com/WA-2.jpg");
}
.item:nth-of-type(5n) {
  background-image: url("https://s3.amazonaws.com/ocdausa.com/WA-3.jpg");
}
.item:nth-of-type(6n) {
  background-image: url("https://s3.amazonaws.com/ocdausa.com/juju1.jpg");
}
.item:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.3;
  transition: opacity 0.3s ease-in-out;
}
.item:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
.item:hover:after {
  opacity: 0;
}
.item--medium {
  grid-row-end: span 2;
}
.item--large {
  grid-row-end: span 3;
}
.item--full {
  grid-column-end: auto;
}
@media screen and (min-width: 768px) {
  .item--full {
    grid-column: 1/-1;
    grid-row-end: span 2;
  }
}
.item__details {
  position: relative;
  z-index: 1;
  padding: 15px;
  color: #444;
  background: #fff;
  text-transform: lowercase;
  letter-spacing: 1px;
  color: #828282;
}
.item__details:before {
  content: counter(item-counter);
  font-weight: bold;
  font-size: 1.1rem;
  padding-right: 0.5em;
  color: #444;
}

	
	

	/* Footer styling */

footer {
	background-color: #3F3F3F;
	position: static;
	bottom: 0;
	width: 100%;
	color: white;
	text-align: center;
	font-family: Campton, Verdana, Tahoma, Arial, sans-serif;
	
	text-transform: uppercase;
	font-weight: 400;
	font-size: 1em;
	line-height: 1.1;
}
footer .footer-nav {
	text-align: left;
}
.footercols {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}

.footercols {
	padding: 1.5em 0;
}
.footercols .quickactions {
    width: 20%;
	margin: 0;
}
.footercols .contact-info {
    width: 40%;
	margin: 0;
	padding-left: 17.5%;
    padding-right: 0;
}
.footercols .footer-nav {
    width: 40%;
	margin: 0;
	padding-left: 3.35%;
    padding-right: 0;
}
.footer-menu-item a{
	color: white;
}
.footer-nav ul li {
	margin: 0 0 1em;
	font-weight: 700;
	font-size: 1.075em;
}
.footer-nav ul li:nth-child(1) {
	margin: 1.950em 0 1em;
}
.apparelblock, .contactblock {
	margin-bottom: 1.2em;
}
.footercol p {
	text-transform: none;
}
.sociallinks-bottom li{
	display: inline-block;
    padding: 0 0.7em 1em 0.7em;
}
.designed-by-info p {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	font-size: .575rem;
	text-decoration: underline overline;
	color: grey;
}
@media screen and (max-width: 970px) {
	.footercols {
		flex-direction: column;
	}
	.footercols .footercol {
		min-width: 80%;
		padding: 0;
		margin-left: auto;
		margin-right: auto;
	}
	footer .footer-nav {
		text-align: center;
	}
}	


/*
color: green;
font-size: 30px;
font-weight: 600px;
font-family: Arial, Helvetica, sans-serif;

*/