﻿/*=============================
=            FONTS            =
=============================*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600');

/*===================================
=            BASE STYLES            =
===================================*/
html {
    color: #222;
    font-size: 1em;
    line-height: 1.5;
}

::-moz-selection {
    background: #323338;
    text-shadow: none;
}

::selection {
    background: #323338;
    text-shadow: none;
}

body {
font: normal 100% 'Open Sans', sans-serif, Helvetica, Arial, sans-serif;
background-color:#ffffff;
margin:0;
padding:0;
}

section, header, footer, main, article, nav, aside {
    position: relative;
}

#skrollr-body { 
    margin: 0; 
}

h1 {
font-size: 2.4em;
    font-weight: 600;
line-height:120%;
    text-align: center;
margin:0 0 0.865em 0;
padding-top:0.225em;
color:#4b5c66;
}

h2 {
font-size: 2.1em;
    font-weight: 200;
line-height:120%;
    text-align: left;
margin:1em 0 0.865em 0;
padding-top:0.225em;
color:#4b5c66;
}

h3 {
font-size: 1.5em;
    font-weight: 200;
    text-align: left;
margin:0 0 0.865em 0;
padding-top:0.225em;
color:#4b5c66;
}

h4 {
font-size: 1.5em;
    font-weight: 200;
    text-align: left;
margin:0 0 0.865em 0;
padding-top:0.225em;
color:#4b5c66;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

p {
font-size: 1.025em;
line-height:150%;
    font-weight: 300;
padding:0;
    margin: 0 0 0.865em 0;
    color:#4b5c66;
}
form {
font-size: 1.025em;
color:#4b5c66;
font-weight: 300;
}

a {
    outline: none !important;
color:#ab812d;
font-weight:400;
    text-decoration: none !important;
    -webkit-transition: all 175ms ease;
    -moz-transition: all 175ms ease;
    transition: all 175ms ease;
    text-decoration: none !important;
}

a:hover {
color:#dfb445;
text-decoration:underline;
}


.active{ background:#eee;}

/*===================================
=            VISIBILITY            =
===================================*/
.hidden {
    display: none !important;
}
.invisible {
    visibility: hidden;
}

.clear-fix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

section[id]:before {
    content:"";
    display:none;
    height:0px;
    margin:0;
}

.spacer {
clear:both;
}

/*===================================
=             FORMS                 =
===================================*/
fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

fieldset legend {
    display: none;
}

fieldset ol, fieldset ul {
    padding: 0;
    list-style: none;
}

fieldset ol li {
    padding-bottom: 5px;
}

label {
    display: inline-block;
    font-size: 0.865em;
    font-weight: 600;
width:8em;
margin-top:3px;
}

label.checkbox {
    display: inline;
}

input, textarea, select {
    border: 1px solid #e2e2e2;
border-radius:3px;
    background: #fff;
    color: #333;
    font-size: 1.025em;
    margin: 2px 0 6px 0;
    padding: 3px 5px;
    width: 20em;
font-size: 0.865em;
}
input[type=submit]{
width:6em;
background:#444;
color:#eee;
}
input[type=submit]:hover{
background:#222;
color:#fff;
}

input.paypal-submit {
width:160px;
}

.signup label {
width:auto;
margin:3px 6px;
color:#fff;
}
.signup input {
width:14em;

}
.signup input[type=submit] {
width:auto;
}

textarea {
    font-family: inherit;
    width: 500px;
font-size: 1.025em;
}

/*======================================
=                 HEADER               =
======================================*/
header {
width:100%;
line-height:100%;
margin:auto;
position:relative;
overflow:visible;
border-bottom:1px solid #4b5c66;
padding-bottom:16px;
margin-bottom:30px;
background:#ffffff;
z-index:10;
}
header .topbar {
text-align:left;
height:36px;
padding:4px 8px;
background-color:#cecdcc;
color:#4b5c66;
font-size:0.8em;
}
header .topbar a {
color:#4b5c66;
}

header .header-contacts {
max-width:960px;
margin:8px auto;
}
header .header-email {
float:left;
width:50%;
}
header .header-social {
float:right;
font-size:1.6em;
text-align:right;
color:#fff;
}
header .newsletter-signup {
font-size:0.65em;
padding:0 2em 0 0;
display:block;
float:left;
}
header .newsletter-signup a {
padding:3px 4px;
border-radius:3px;
}
header .newsletter-signup a:hover {
background:#4b5c66;
color:#ddd;
}
header .logo {
text-align:center;
position:relative;
margin:20px;
height:auto;
}
header .logo img {
width:400px;
height:96px;
}

header nav {
margin:0 auto;
position:relative;
height:auto;
text-align:center;
max-width:960px;

z-index:1000;
}

.headroom {
transition: transform 200ms linear;
}
.slideDown {
-webkit-transform:translateY(0%);
-moz-transform:translateY(0%);
-o-transform:translateY(0%) ;  
transform: translateY(0%);
}
.slideUp {
-webkit-transform:translateY(-100%);
-moz-transform:translateY(-100%);
-o-transform:translateY(-100%);
transform: translateY(-100%);
}

#headerfix {
height:0px;
}

.nav-up {
    top: -40px;
}

/*=============================
=            NAV            =
=============================*/
#menu-button {
  position: relative;
  padding: 0 2em 0.2em 0.2em;
margin:0.3em;
line-height:30px;
}
#menu-button:before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: -0.2em;
  width: 1.5em;
  height: 0.25em;
  background: #c5c5c5;
  box-shadow: 
    0 0.55em 0 0 #c5c5c5,
    0 1.1em 0 0 #c5c5c5;
}
#menu.collapsed {
  display: none;
}
#nav-social {
display:inline-block;
width:30px;
margin:0;
}
#nav-social .fa {
font-size:1.225em;
}
@media (min-width: 59em) {
  /* hide the button in desktop view */
  #menu-button {
    display: none;
  }
  /* always show the menu in desktop view */
  #menu.collapsed {
    display: block;
  }
}

/*=============================
=            SECTIONS            =
=============================*/
section {
position: relative;
margin:0;
padding:0;
}
.main-content {
padding:0;
margin:0;  
}
section .wrap {
    position: relative;
    width: 100%;  
color:#4b5c66;
font-weight:300;
padding:0;
margin:0;
}

section.normalPage .wrap {
height:auto;
min-height:4em;
}

section.fillpage .wrap  {
min-height: calc(100vh - 321px);
}

.wrap .innerText  {
margin:auto;
max-width:960px;
padding: 1px 2% 10px 2%;
}

.wrap .innerText p {
color:#4b5c66;
max-width:960px;
padding-left:0;
padding-right:0;
}
.wrap .innerText h2 {
color:#4b5c66;
margin:1em 0 0.6em 0;
}

section.fullwidth .wrap .innerText {
max-width:none;
padding-left:0;
padding-right:0;
}
section.fullwidth .wrap .innerText h2 {
margin-left:0;
margin-right:0;
margin-top:0;
margin-bottom:1em;
color:#e7e9e5;
}

section .slider {
width:100%;
max-width:960px;
margin:0 auto;
}

section ul {
    list-style-type:none;
margin:0 0 1.2em 0;
padding:0 0 0 12px;
} 
section li {
background-size:18px;
line-height:145%;
padding-bottom:10px;
min-height:24px;
}
form li {
background:none;
}

.quote, blockquote {
    font-family: 'Open sans',sans-serif;
    font-size:1.1875em;
font-style:italic;
background-color:rgba(80,80,80,0.25);
padding:1em;
margin:1em 3.6em 1em 4em;
border-radius:0.5em;
}
.author {
font-family:'Open Sans';
font-size:0.8em;
font-style:normal;
opacity:0.7;
padding-left:8px;
}

section.staticImage .wrap {
padding:0;
margin:0;
width:100%;
height:auto;
overflow:hidden;
}

section.staticImage .wrap img {
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}

.author {
font-family:'Open Sans';
font-size:0.8em;
font-style:normal;
opacity:0.7;
padding-left:8px;
}

.breadcrumb {
margin:0 0 12px 0;
color:#4b5c66;
font-size:0.86em;
}

/*======================================
=            SLIDER                   =
======================================*/

.rslides {
  position: relative;
  list-style: none;

  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0 auto 0;
}

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
background-image:none;
  width: 100%;
  left: 0;
  top: 0;
margin:0;
padding:0;
}

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

.callbacks_container {
  margin-bottom: 0;
  position: relative;
  float: left;
  width: 100%;
  }

.callbacks .caption {
  display: block;
  position: absolute;
  z-index: 2;
  text-shadow: none;
font-size:1.4em;
        color:#fff;
bottom:6%;
width:100%;
text-align:left;
font-size:2.5vw;
font-family: 'Open Sans', serif;
text-shadow:0 0 10px rgba(0, 0, 0, 0.55);
font-weight:400; 
  margin: 0;
margin-left:30px;
  max-width: none;
  }
.callbacks .caption a {
color:#fff;
}

.callbacks_nav {
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 50%;
  left: 0;
  opacity: 0.7;
  z-index: 3;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  height: 61px;
  width: 38px;
  background: transparent url("../Images/themes.gif") no-repeat left top;
  margin-top: -45px;
}

.callbacks_nav:active {
  opacity: 1.0;
}

.callbacks_nav.next {
  left: auto;
  background-position: right top;
  right: 0;
}


/*=============================
=            TEASERS          =
=============================*/
.teaser-wrapper {
margin:0 auto;
text-align:center;
display:block;
}
.teaser {
width:268px;
display:inline-block;
margin:1% 1.5% 1% 1.5%;
border:1px solid #BDBDBA;
height:14em;
overflow:hidden;
position:relative;
}
 
.teaser h2 {
padding-top:0;
margin:0;
text-align:center;
font-size:2em;
}
.teaser h2 a{
    text-transform:uppercase;
    color:#BDBDBA;
    display:block;
    width:100%;
padding:3px 0 3px 0;
    }
.teaser h2 a:hover{
background-color:#dfb445;
color:#575859;
    }
.teaser-img {
height:92px;
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
}
.teaser-inner {
padding:8px;
position:absolute;
bottom:0;
background-color:#BDBDBA;
width:252px;
height:73px;
overflow:hidden;
}
.teaser-inner p {
color:#323338;
font-size:0.865em;
margin:0 0 2px 0;
padding:0;
}

.stories .teaser {
width:320px;
}
.stories .teaser h2 a{
    text-transform:none;
padding:2px 0;
margin:0;
font-size:0.9em;
}
.stories .teaser h2 a span{
    font-size:0.7em;
display:block;
padding-bottom:2px;
}

.stories .teaser-inner {
height:25px;
width:314px;
position:relative;
background-color:#fff;
}
.stories .teaser-inner p {
padding:0;
margin:0;
}
.stories .teaser-img {
height:142px;
}

/*=============================
=            TEAM             =
=============================*/

section.about-team .wrap {
background-color:#fff;
}

.team-member {
height:auto;
margin:0 0 1.5% 0;
position:relative;
padding-bottom:1.5%;
}
.team-img {
width:120px;
height:160px;
float:left;
text-align:left;
margin:5px 1em 0.5em 0;
}
.team-img img {
width:120px;
height:160px;
border:1px solid #BDBDBA;
}
.team-title {
text-align:left;
margin-left:160px;
}
.team-title h2 {
font-size:1.425em;
color:#4b5c66;
text-align:left;
padding: 0 8px 0 0;
margin:0 0 3px 0;
}

.team-caption {
height:auto;
padding:8px 8px 1px 0px;
margin-left:160px;
}
.team-caption p {
font-size:0.845em;
padding:0px 0px 5px 0px;
color:#4b5c66;
}

.team-social {

}
.team-social a .fa {
display:inline-block;
border-radius:4px;
text-align:center;
padding:4px;
margin:3px 3px 1px 3px;
font-size:1.1em;
color:#c5c5c5;
}
.team-social a:hover .fa {
background-color:none;
color:#323338;
}


/*=============================
=            MEDIA            =
=============================*/

.film-wrapper {
text-align:center;
position:relative;
}



.play-button {
position:absolute;
display:block;
background-image: url(../Images/video-play-icon-100.png);
background-repeat:no-repeat;
background-position:center; 
opacity:0.8;
width:100%;
height:133px;
}
.lightbox {
position:absolute;
opacity:0.8;
width:100%;
height:158px;
}


.video-img {
height:133px;
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
}

.gallery-author {
display:block;
}

a.gallery img {
    cursor: -moz-zoom-in; 
    cursor: -webkit-zoom-in; 
    cursor: zoom-in;
}

/** SUPPORTERS **/
section.supporters .wrap {

}

.supporter {
float:left;
width:380px;
height:220px;
border:1px solid #ccc;
margin:6px 12px 6px 0px;
background:#fff;
}
.supporter-logo {
width:163px;
height:80px;
padding:4px 8px;
}
.supporter-title {
text-align:left;
padding:8px;
margin:0;
}
.supporter h3 {
font-size:1.1em;
line-height:125%;
text-align:left;
margin:0px;
padding:0px;
}
.supporter a{
color:#666;
}
.supporter a:hover {
color:#dfb445;
}
.supporter-about {
padding:8px;
margin-top:0px;
}
.supporter-about p{
color:#323338;
font-size:0.825em;
margin:2px 0px 2px 0px;
}


/*==============================
=            OVERLAY
==============================*/
#overlay {
display:none;
width:70%;
min-height:70%;
padding:8px;
background-color:#fff;
border-radius:8px;
position:relative;
}

.overlay_close {
position:absolute;
top:-18px;
right:-18px;
width:36px;
height:36px;
cursor:pointer;
background-image:url(../Images/close.png);
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top:0px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.lightboxWrapper img {
width:100%;
height:auto;
}

/** BLOG  **/
.blogindex h1 {
font-size:2.1em;
margin-top:0.4em;
}
.blogsummary {
border-bottom:1px dotted #aaa;
margin:0 0 1.6em 0;
padding:0 0 1.6em 0;
clear:both;
}
.blogsummary .blog-img {
float:left;
width:220px;
margin-top:10px;
}
.blog-entry .blog-entry-img {
max-width:900px;
height:100%;
width:100%;
}

.blogsummary .blog-title h2 {
margin:0 0 0.5em 0;
padding:0;
margin-left:220px;
}
.blog-entry .blog-title h2 {
    margin-left:0;
}
.blog-meta {
    color:#aaa;
    font-size:0.84em;
}
.blogsummary .blog-preview {
position:relative;
margin:4px 0 1em 0;
margin-left:220px;
}
.blog-preview p {
display:inline; 
}

.more {
display:inline;
padding-left:10px;
}
.blogsummary .blog-tags {
margin-left:220px;
color:#aaa;
font-size:0.84em;
}
.blog-entry .blog-tags {
color:#aaa;
font-size:0.84em;
}
.blog-tags .tag {
padding:1px 4px;
}

.blog-entry img {
max-width:100%;
height:auto;
}
.blog-entry .image-left {
padding:0.45em 1.2em 0.5em 0;
float:left;
}
.blog-entry .image-right {
padding:0.45em 0 0.5em 1.2em;
float:right;
}

.paging {
clear:both;
margin:3px 80px 8px 80px;
}
.paging a {
background:#444;
border-radius:4px;
padding:1px 4px;
}
.paging a:hover {
background:#3f3f3f;
}
.paging .older {
float:right;
text-align:right;
width:50%;
}
.paging .newer{
float:left;
text-align:left;
}

#loginForm {
background:#fff;
padding:30px 20px;
}
#loginForm h2 {
margin:20px;
}
#loginForm a {
color:#999;
}
#loginForm a:hover {
color:#333;
}

/*==============================
=            FOOTER            =
==============================*/
/* .main-content {
    min-height: calc(100vh - 196px);
} */

footer {
height:38px;
    width: 100%;
margin-top:0;
background-color:#cecdcc;
padding:0.8em 0 0.2em 0;
border-top:0px solid #494949;
}

footer .wrap { height:auto;
padding:0.5em;margin:0;
background-color:#cecdcc;
text-align:center; }
footer .copyright{
width:48%;
float:left;
margin:0 1%;
}
footer .credits {
width:48%;
float:right;
margin:0 1%;
}
footer h2 { color: #fff;margin:0 0 0.5em 0; }
footer p {color:#4b5c66;font-size:0.86em;}
footer a {
color:#97989B;
}
/*==============================
=            MISC            =
==============================*/
#share {
    margin:0.8em 0 1em 0;
}

.left{
text-align:left;
}
.right {
text-align:right;
}

.p404 {
margin-top:30px;
min-height:390px;
}
a.big-button {
font-weight:600;
}

.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(232, 98, 86, 0.8) url(/Images/cd-top-arrow.svg) no-repeat center 50%;
  opacity: 1;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}

.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top:hover {
  background-color: #e86256;
  opacity: 1;
}

/*=====================================
=            MEDIA QUERIES            =
=====================================*/
@media only screen and (min-width: 768px) {
  .cd-top {
    right: 20px;
    bottom: 20px;
  }
}
@media only screen and (min-width: 1024px) {
  .cd-top {
    height: 60px;
    width: 60px;
    right: 30px;
    bottom: 30px;
  }
}

@media (max-width:1280px) {
table.itemOptions {
font-size:1.1em;
margin-bottom:8px;
}
table.itemOptions td {
padding-bottom:5px;
}
}
@media (max-width: 53em) {
#nav ul#menu{

}
#menu {
position: relative;
z-index: 9999;
}
#menu ul {
width: 12em; /* fixed width only please */
}
.slicknav_menu {
	display:block;
}
}

@media (max-width: 46em) {
.gallerycontainer, .videocontainer {
width:258px;
width:46%;
height:14.3em;
}
.gallery-img img {
width:101%;
height:auto;


}
.gallery-inner {
height:54px;
height:auto;
padding:2px 3% 6px 3%;
}
}

@media (max-width: 480px) {

    header .logo {
        margin: 1.2em 0 0.8em 0;
    }
        header .logo img {
            max-width: 400px;
height:auto;
width:90%;
        }

    h2 {
        font-size: 1.8em;
        margin: 6px 0 5px 0;
    }

    section ul {
        margin-left: 0px;
        padding-left: 2px;
    }

    section li {
        padding-left: 32px;
        margin-left: 0px;
        background-size: 20px;
    }


    blockquote {
        font-size: 1.2em;
        margin: 0.5em 1em;
    }
.paraCaption h2.quote, .paraCaption h2 blockquote {
font-size:1.3em;
margin:0.2em;
padding:0.3em;
}

.team-member .team-img {
        text-align: center;
float:none;
        width: 100%;
margin:5px 0 0.5em 0;
    }

    .team-title {
        text-align: left;
        margin: 3px 5px;
    }

        .team-title h2 {
            font-size: 1.2em;
        }

    .team-caption {
        height: auto;
        padding: 8px 8px 1px 0px;
        margin-left: 6px;
        clear: both;
    }

        .team-caption p {
            font-size: 0.845em;
            padding: 0px 0px 5px 0px;
            color: #c5c5c5;
        }

    .team-member:nth-child(even) .team-title {
        text-align: left;
        margin-right: 6px;
        margin-left: 0px;
    }

    .team-member:nth-child(even) .team-caption {
        text-align: left;
        margin-right: 6px;
        margin-left: 0px;
    }

    .team-member:nth-child(even) .team-img {
        text-align: center;
        float: none;
        margin: 5px 0 0.5em 0;
    }

    .gallerycontainer, .videocontainer {
        width: 96%;
        height: 13.6em;
    }

    .paraCaption h1 {
        font-size: 6.0vw;
    }

    .paraCaption h2 {
        font-size: 4.5vw;
    }

    img.image-left, img.image-right {
        padding: 0 0.225em;
        float: none;
        text-align: center;
        max-width: 460px;
        height: auto;
    }

    .blogsummary .blog-img {
        float: none;
        text-align: center;
    }

    .blog-entry .blog-img {
        max-width: 460px;
        height: auto;
    }

    .blogsummary .blog-title h2 {
        margin: 0 0 0.5em 0;
        padding: 0;
        margin-left: 6px;
    }
.blog-entry .blog-title h1 {
    margin-left:0;
font-size:1.5em;
}

    .blogsummary .blog-preview {
        margin-left: 6px;
    }

    .blogsummary .blog-tags {
        margin-left: 6px;
    }

    .blog-tags .tag {
        display: inline-block;
        margin: 2px;
    }

    .paging {
        clear: both;
        margin: 3px 10px 8px 10px;
    }

}

@media (max-width: 360px) {
        .blog-entry .blog-img {
        max-width: 360px;
        height: auto;
    }
        img.image-left, img.image-right {
        padding: 0 0.225em;
        float: none;
        text-align: center;
        max-width: 360px;
        height: auto;
    }
}