/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.og-grid {
	list-style: none;
	margin: 0 auto;
	text-align: center;
	max-width: 960px;
}

.og-grid li {
	display: inline-block;
	margin: 10px 5px 0 5px;
	vertical-align: top;
/*	height: 250px;            */
}

.og-grid li > a,
.og-grid li > a img {
	border: none;
	outline: none;
	display: block;
	position: relative;
	-webkit-box-shadow: 0 2px 5px -2px #aaaaaa;
	   -moz-box-shadow: 0 2px 5px -2px #aaaaaa;
	        box-shadow: 0 2px 5px -2px #aaaaaa;
}

.og-grid li.og-expanded > a::after {
	top: auto;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-bottom-color: #ddd;
	border-width: 15px;
	left: 50%;
	margin: -20px 0 0 -15px;
	box-shadow: 0px 0px 0px #aaaaaa;
}

.og-expander {
	position: absolute;
	background: #ddd;
	top: auto;
	left: 0;
	width: 100%;
	margin-top: 10px;
	text-align: left;
	height: 0;
	overflow: hidden;
}

.og-expander-inner {
	padding: 50px 30px;
	height: 100%;
}

.og-close {
	position: absolute;
	width: 40px;
	height: 40px;
	top: 20px;
	right: 20px;
	cursor: pointer;
}

.og-close::before,
.og-close::after {
	content: '';
	position: absolute;
	width: 100%;
	top: 50%;
	height: 1px;
	background: #888;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}

.og-close::after {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.og-close:hover::before,
.og-close:hover::after {
	background: #333;
}

.og-fullimg,
.og-details {
	width: 50%;
	float: left;
	height: 100%;
	overflow: hidden;
	position: relative;
}

.og-details {
	padding: 0 40px 0 20px;
}

.og-fullimg {
	text-align: center;
}

.og-fullimg img {
	display: inline-block;
	max-height: 100%;
	max-width: 100%;
}

.og-details h3 {
	font-weight: 300;
	font-size: 52px;
	margin-bottom: 10px;
}

.og-details p {

}

.og-details a {
    font-weight: bold;
	font-size: 1.8rem;
	color: #800000;
	padding: 10px 20px;
	display: inline-block;
	outline: none;
}

.og-details a::before {
	content: '\2192';
	display: inline-block;
	margin-right: 10px;
}

.og-details a:hover {
	background-color: #f8c200;
}

.og-loading {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ddd;
	box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px 0 0 -25px;
	-webkit-animation: loader 0.5s infinite ease-in-out both;
	-moz-animation: loader 0.5s infinite ease-in-out both;
	animation: loader 0.5s infinite ease-in-out both;
}

@-webkit-keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@-moz-keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@media screen and (max-width: 830px) {

	.og-expander h3 { font-size: 32px; }
	.og-expander p { font-size: 13px; }
	.og-expander a { font-size: 12px; }

}

@media screen and (max-width: 650px) {

	.og-fullimg { display: none; }
	.og-details { float: none; width: 100%; }
	
}

.box {
   display: flex;
   align-items:center;
   margin-bottom: 2.5rem;
}
.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px; 
  box-sizing: border-box; }
.row {
   margin-top: 20pt;
}
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box;
  padding: 10px;  
  background-color: white;
  	-webkit-box-shadow: 0 2px 5px -2px #aaaaaa;
	   -moz-box-shadow: 0 2px 5px -2px #aaaaaa;
	        box-shadow: 0 2px 5px -2px #aaaaaa;}
 .fourtrans.columns { 
		box-shadow: 0px 0px 0px #aaaaaa;}
		
 .six.columns { 
		width: 100%;
		background-color: #EEE;
		box-shadow: 0px 0px 0px #aaaaaa;}
  
 .twelve.columns {
	 width: 100%;
	 margin-left: 0;
	 background-color: #EEE;
	 box-shadow: 0px 0px 0px #aaaaaa;}
	 
 .twelwhite.columns {
	 width: 100%;
	 margin-left: 0;
	 background-color: #FFF;
	 -webkit-box-shadow: 0 2px 5px -2px #aaaaaa;
	   -moz-box-shadow: 0 2px 5px -2px #aaaaaa;
	        box-shadow: 0 2px 5px -2px #aaaaaa;}

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 90%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 95%; }
  .column,
  .columns {
    margin-left: 4%; 
	padding: 10px;
    background-color: white;
  	-webkit-box-shadow: 0 2px 5px -2px #aaaaaa;
	   -moz-box-shadow: 0 2px 5px -2px #aaaaaa;
	        box-shadow: 0 2px 5px -2px #aaaaaa;}
  .column:first-child,
  .columns:first-child {
    margin-left: 0;}

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .fourtrans.columns              { width: 30.6666666667%; box-shadow: 0px 0px 0px #aaaaaa;}
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%; background-color: #EEE; box-shadow: 0px 0px 0px #aaaaaa;}
  .sixwhite.columns                    { width: 48%; background-color: #FFF; -webkit-box-shadow: 0 2px 5px -2px #aaaaaa; -moz-box-shadow: 0 2px 5px -2px #aaaaaa; box-shadow: 0 2px 5px -2px #aaaaaa;}
  .sixs.columns                   { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; background-color: #EEE; box-shadow: 0px 0px 0px #aaaaaa;}
  .twelwhite.columns                 { width: 100%; margin-left: 0; margin-left: 0; background-color: #FFF; -webkit-box-shadow: 0 2px 5px -2px #aaaaaa; -moz-box-shadow: 0 2px 5px -2px #aaaaaa; box-shadow: 0 2px 5px -2px #aaaaaa;}

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%;}
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
/*  line-height: 1.6; */
  font-weight: 400;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222; 
  background-color: #EEE;
  overflow: scroll;
  overflow-x: hidden;}

/* Slideshow style
-------------------------------------------------- */

* {box-sizing: border-box}
.mySlides1, .mySlides2 {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin-bottom: 40px;
	 -webkit-box-shadow: 0 2px 5px -2px #aaaaaa;
	   -moz-box-shadow: 0 2px 5px -2px #aaaaaa;
	        box-shadow: 0 2px 5px -2px #aaaaaa;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a grey background color */
.prev:hover, .next:hover {
  background-color: #f1f1f1;
  color: black;
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  color: #222;
  line-height: 1.6;
  margin-top: 0;
  }
  
/* Header Style */
.codrops-top {
	line-height: 24px;
	font-size: 11px;
	background: #fff;
	background: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	z-index: 9999;
	position: relative;
	box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}

.codrops-top a {
	padding: 0px 10px;
	letter-spacing: 1px;
	color: #333;
	display: inline-block;
}

.codrops-top a:hover {
	background: rgba(255,255,255,0.8);
	color: #000;
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	float: left;
	display: block;
}

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #800000;
  text-decoration: none;
    font-weight: bold;}
a:hover {
  color: #800000;
  text-decoration: none;
}

/* Navbar 
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.navbar {
  overflow: hidden;
}

.navbar a {
  float: right;
  font-size: 1.8rem;
  color: #800000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: right;
  overflow: hidden;
}

.dropdown .dropbtn {
  border: none;
  outline: none;
  font-size: 1.8rem;
  color: #800000;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
   font-weight: bold;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #f8c200;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
/*  min-width: 160px; */
    -webkit-box-shadow: 0 8px 16px 0px #aaaaaa;
	   -moz-box-shadow: 0 8px 16px 0px #aaaaaa;
	        box-shadow: 0 8px 16px 0px #aaaaaa;
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: #800000;
  padding: 8px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size: 1.4rem;
}

.dropdown-content a:hover {
  background-color: #f8c200;
}

.dropdown:hover .dropdown-content {
  display: block;
}


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  color: #800000;
  padding: 2px 2px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; 

  }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  list-style-type: square;
  margin-bottom: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  color: #fff;
  background-color: #800000; 
  }


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.0rem; }
pre,
blockquote,
dl,
figure,
p,
ul,
ol,
form {
margin-bottom: 1.2rem;
  }
table {
margin-bottom: 0;}

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-logo-max-full-width {
  max-width: 100%;
  box-sizing: border-box;
  margin-right:10px;  }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }
.u-images {
  max-width: 100%;
  vertical-align: top;
  display: inline-block;
  box-sizing: border-box;
  border: thin solid black;
  float: left;
  margin-top:1rem;
  margin-bottom:1rem;
  margin-right:1rem;  }

/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  border-width: 0;
  border-top: 1px solid #222; }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}



.filter-cat {
  margin: 1em 0;
}

.f-cat {
  color: #000;
/*  padding: 1em; */
  border: 5px solid #fff;
}

.filter-cat-results .f-cat {
  opacity: 0;
  width: 290px;
  min-height: 102px;
  float: left;
/*  background-color: #f8c200; */
  border: thin solid black;
  font-size: 1.3rem;
  color: black;
  text-align: left;
  margin: 2px;
  padding: 4px;
  display: none; /* Hidden by default */
  position: relative;
}
.filter-cat-results .f-cat.active {
  opacity: 1;
  display: block;
  -webkit-animation: fadeIn 0.65s ease forwards;
  animation: fadeIn 0.65s ease forwards;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


.containerexp {
    width:100%;
/**    border:1px solid #d3d3d3; */
}
/**.containerexp div {
    width:100%;
} **/
.containerexp .headerexp {
    padding-top: 20px; 
    cursor: pointer;
    font-weight: bold;
	color: #800000;
/*	padding: 4px; */
/*	position: absolute; */
/*    bottom: 0px; */
}
.containerexp .contentexp {
    display: none;
    padding-top: 5px; 
	
}