body{
background-color: transparent; ;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

@keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}

.intro a{
font-weight: 800;
color: #253239;
text-decoration: underline;
}

.btn-primary {
color: #fff!important;
background-color: #253239;
border-color: none;
font-family: 'work_sansregular', serif;
font-weight: 900;
font-size: 20px;
color: #000;
border: none;
}

.btn-primary:hover {
color: #fff!important;
background-color: #253239;
border-color: none;
font-family: 'work_sansregular', serif;
font-weight: 900;
font-size: 20px;
color: #000;
text-decoration: underline;
}

.navbar {
background-color: transparent;
border: none;
font-family: 'work_sansregular', serif;
font-weight: 900;
font-size: 14px;
color: #000;
margin-top: 0;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 20px;
}

.navbar-default .navbar-nav>li{
padding: 0 50px;
}

.navbar-default .navbar-nav>li>a {
color: #fff;
padding-bottom: 1px;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
color: #fff;
background-color: transparent;
border-bottom: 2px solid #fff;
}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
color: #fff;
}

.navbar .navbar-nav {
display: inline-block;
float: none;
}

.navbar .navbar-collapse {
text-align: center;
}

.navbar-default .navbar-toggle {
border: none;
}

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
background-color: transparent;
}

.title {
margin: 0 auto 0;
text-align: center;
}

.jumbotron {
background-color: transparent;
animation: fadein 1s;
-moz-animation: fadein 1s; /* Firefox */
-webkit-animation: fadein 1s; /* Safari and Chrome */
-o-animation: fadein 1s; /* Opera */
margin-bottom: 80px;
margin-top: 80px; 
}

.jumbotron h1 {
font-family: 'Playfair Display', serif;
font-weight: 900;
font-size: 180px;
color: #fff;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
padding-bottom:30px;
display: inline-block;

}


.about {
margin-top:120px; 
position: relative;
background-color: #fff;
margin-bottom: 20px;
padding-bottom: 0px;
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
}

.intro {
padding: 0px 100px 0px;
}

.intro h1 {
font-family: 'work_sansblack', serif;
font-weight: 900;
font-size: 100px;
color: #000;
margin-top: 0;
line-height: 1.6;
color: #F15F55;
margin-bottom: 0;
padding-bottom: 0;
}

.intro h3 {
font-family: 'work_sansregular', sans-serif;
font-weight: 900;
font-size: 36px;
color: #F15F55;
margin-top: 0;
line-height: 1.4;
margin-top: 120px;
padding-bottom: 20px;
border-top: 1px solid #000;
padding-top: 30px;
}

.intro h3 a{
color: #F15F55;
text-decoration: none;
border-bottom: 4px solid #F15F55;
}

.intro p {
font-family: 'georgia', serif;
font-weight: 400;
font-size: 18px; 
color: #000;
line-height: 1.6;
border-top: 1px solid #000;
padding-top: 30px;
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
}

.intro img{
width: 100%;
padding-top: 30px;
padding-bottom: 80px;
}

.map-container {
padding-left: 100px;
padding-right: 100px;
padding-top: 50px;
padding-bottom: 100px;
background: rgba(247,247,247,1);
background: -moz-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(255,255,255,1) 7%, rgba(255,255,255,1) 52%, rgba(255,255,255,1) 90%, rgba(240,240,240,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(247,247,247,1)), color-stop(7%, rgba(255,255,255,1)), color-stop(52%, rgba(255,255,255,1)), color-stop(90%, rgba(255,255,255,1)), color-stop(100%, rgba(240,240,240,1)));
background: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(255,255,255,1) 7%, rgba(255,255,255,1) 52%, rgba(255,255,255,1) 90%, rgba(240,240,240,1) 100%);
background: -o-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(255,255,255,1) 7%, rgba(255,255,255,1) 52%, rgba(255,255,255,1) 90%, rgba(240,240,240,1) 100%);
background: -ms-linear-gradient(top, rgba(247,247,247,1) 0%, rgba(255,255,255,1) 7%, rgba(255,255,255,1) 52%, rgba(255,255,255,1) 90%, rgba(240,240,240,1) 100%);
background: linear-gradient(to bottom, rgba(247,247,247,1) 0%, rgba(255,255,255,1) 7%, rgba(255,255,255,1) 52%, rgba(255,255,255,1) 90%, rgba(240,240,240,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#f0f0f0', GradientType=0 );
}

.about hr{
text-align: center;
width: 20px;
border-bottom: 1px solid #ccc;
}

.map-container h2, .articles-container h2{
font-family: 'work_sanssemibold', serif;
font-weight: 900;
font-size: 38px;
color: #000;
margin-top: 0;
margin-bottom: 20px;
padding-top: 50px;
}

.map-container p{
font-family: georgia, serif;
font-size: 18px; 
color: #000;
}

.line-right{
border-right:1px solid #ccc; 
}

.map {
margin-bottom: 50px;
border:5px solid #253239; 
}

.articles-container {
padding-left: 100px;
padding-right: 100px;
padding-top: 50px;
padding-bottom: 100px;
}

.article {
text-align: center;
}

/**===== Crop Mark Positions =====**/
.crop-mark {
position: absolute;
height: 80px;
width: 80px; }
.crop-mark:after {
content: '';
width: 20px;
height: 20px;
display: block;
position: absolute; }

.crop-top-left {
top: 0;
left: 0; }
.crop-top-left:after {
bottom: -2px;
right: -2px; }

.crop-top-right {
top: 0;
right: 0; }
.crop-top-right:after {
bottom: -2px;
left: -2px; }

.crop-bottom-left {
bottom: 0;
left: 0; }
.crop-bottom-left:after {
top: -2px;
right: -2px; }

.crop-bottom-right {
bottom: 0;
right: 0; }
.crop-bottom-right:after {
top: -2px;
left: -2px; }

/**===== Crop Marks - Program =====**/
.about .crop-mark:after {
background: #fff; }
.about .crop-top-left {
border-right: 2px solid #253239 ;
border-bottom: 2px solid #253239 ; }
.about .crop-top-right {
border-left: 2px solid #253239 ;
border-bottom: 2px solid #253239 ; }
.about .crop-bottom-left {
border-right: 2px solid #253239 ;
border-top: 2px solid #253239 ; }
.about .crop-bottom-right {
border-left: 2px solid #253239 ;
border-top: 2px solid #253239 ; }



/* Common style */
.article figure {
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
width: 100%;
background: #3085a3;
text-align: center;
cursor: pointer;
}

.article figure img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 0.8;
}

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

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

.article figure figcaption,
.article 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 */
.article figure figcaption > a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}

.article figure h2 {
font-family: 'Playfair Display', serif;
font-weight: 900;
font-size: 45px;
color: #fff;
padding-bottom: 20px;
display: inline-block;
text-transform: none;
letter-spacing: 0;
}

.article figure span {
letter-spacing: 1px;
font-family: 'work_sansregular', serif;
text-transform: none;
font-weight: 400;
text-transform: uppercase;
font-size: 38px;
}


.article figure h2,
.article figure p {
margin: 0;
}

.article figure p {
letter-spacing: 1px;
font-family: 'work_sansblack', serif;
text-transform: none;
font-weight: 900;
font-size: 20px;
text-transform: uppercase;
}

footer {
border-color: none;
font-family: 'work_sansregular', serif;
font-weight: 900;
font-size: 14px;
color: #fff;
border: none;
}

footer a{
color: #fff;
}

footer a:hover{
color: #fff;
}


/*---------------*/
/***** Bubba *****/
/*---------------*/

figure.effect-bubba {
background: #253239 ;
}

figure.effect-bubba img {
opacity: 1;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}

figure.effect-bubba:hover img {
opacity: 0.2;
}

figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}

figure.effect-bubba figcaption::before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0,1);
transform: scale(0,1);
}

figure.effect-bubba figcaption::after {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1,0);
transform: scale(1,0);
}

figure.effect-bubba h2 {
padding-top: 50%;
opacity: 0;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,-20px,0);
transform: translate3d(0,-20px,0);
}

figure.effect-bubba p {
padding: 20px 2.5em;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}

figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}

figure.effect-bubba:hover h2,
figure.effect-bubba:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}


/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
.jumbotron h1 {
font-size: 120px;
}

.intro {
padding: 10px 40px 0px;
background: #fff;
}

.intro h3 {
font-family: 'work_sansregular', sans-serif;
font-weight: 900;
font-size: 24px;
color: #F15F55;
line-height: 1.4;
margin-top: 70px;
padding-bottom: 20px;
border-top: 1px solid #000;
padding-top: 20px;
}

.map-container {
padding-left: 20px;
padding-right: 20px;
padding-top: 50px;
padding-bottom: 100px;
}

.articles-container {
padding-left: 20px;
padding-right: 20px;
padding-top: 50px;
padding-bottom: 100px;
background: #fff;
}

.crop-mark {
position: absolute;
height: 40px;
width: 40px; }
.crop-mark:after {
content: '';
width: 20px;
height: 20px;
display: block;
position: absolute; 
}

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
.jumbotron h1 {
font-size: 100px;
}

.intro {
padding: 10px 20px 10px;
background: #fff;
}

.intro h3 {
font-family: 'work_sansregular', sans-serif;
font-weight: 900;
font-size: 24px;
color: #F15F55;
line-height: 1.4;
margin-top: 70px;
padding-bottom: 20px;
border-top: 1px solid #000;
padding-top: 20px;
}

.map-container {
padding-left: 0px;
padding-right: 0px;
padding-top: 50px;
padding-bottom: 100px;
}

.articles-container {
padding-left: 0px;
padding-right: 0px;
padding-top: 50px;
padding-bottom: 100px;
}

.crop-mark {
position: absolute;
height: 40px;
width: 40px; }
.crop-mark:after {
content: '';
width: 20px;
height: 20px;
display: block;
position: absolute; 
}

.article img{
    width: 100%;
}

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
.jumbotron h1 {
font-size: 50px;
padding-bottom:10px;
}

.intro {
padding: 10px 20px 10px;
background: #fff;
}

.map-container {
padding-left: 20px;
padding-right: 20px;
padding-top: 50px;
padding-bottom: 100px;
}

.intro h3 {
font-family: 'work_sansregular', sans-serif;
font-weight: 900;
font-size: 24px;
color: #F15F55;
line-height: 1.4;
margin-top: 40px;
padding-bottom: 20px;
border-top: 1px solid #000;
padding-top: 20px;
}


.intro p {
font-family: 'georgia', serif;
font-weight: 400;
font-size: 16px; 
color: #000;
line-height: 1.6;
border-top: 1px solid #000;
padding-top: 30px;
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
        -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
        -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
        -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;
}

.article img{
    width: 100%;
}

.map-container h2, .articles-container h2{
font-family: 'work_sanssemibold', serif;
font-weight: 900;
font-size: 22px;
color: #000;
margin-top: 0;
margin-bottom: 20px;
padding-top: 50px;
}

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
.jumbotron h1 {
font-size: 50px;
padding-bottom:10px;
}

}