/* ////// FDN 102 THEME STYLES ////// */

/******************* Site Menu ********************/
.gallery-style-4
{
	padding: 0 25px;
	margin: auto;	
}

body.fv-gallery-4-layout, body.fv-gallery-4-layout #PageContainer,
body.landing-page.layout-1, body.landing-page.layout-1 #PageContainer,
body.landing-page.layout-4 #PageContainer
{
    overflow-x: visible;
}

#MenuHorzTop
{
	padding-top: 25px;
	padding-left: 25px;
	padding-right: 25px;
	margin: 0 auto;
}

#MenuHorzTop li
{
      margin-right: 12px;
      margin-left: 12px;
      margin-top: 5px;
}

#TheMenuLogo
{
      margin-right: 20px;
}

#MenuHorzTop .the-sub-menu li 
{
	display: none
}
#MenuHorzTop .menu-open .the-sub-menu li 
{
	display: block;
}
#MenuHorzTop li:last-child ul.the-sub-menu
{
    right: -20px;
}
#MenuHorzTop li.active a
{
	border-bottom: 1px solid #333;
}
.site-menu-outer
{
	z-index: 200;
}
.menu-social-media a i, 
.menu-social-media-page-bottom a i
{
	color: #222;
}
#MenuHorzTop ul.site-menu
{
	margin-top: 12px;
}
#TheSiteMenu 
{
	margin-top: 15px;
}
#TheSiteMenu .sub-menu-container span:after
{
    content: "\f107";
    margin-left: 5px;
	margin-top: -3px;
	line-height: 60px;
	display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#TheSiteMenu .sub-menu-container.menu-open span:after
{
	content: "-";
	padding-right: 4px;
}

/******************* Gallery Text ********************/
body.gallery-page #GalleryStyle-1 .story-text,
body.gallery-page #GalleryStyle-3 .story-text,
body.gallery-page #GalleryStyle-4 .story-text
{
    width: 100%;
    max-width: 800px;
    margin: 30px auto;
    display: none; /* JS toggle */
}
.text-page .story-text
{
	display: block;
}


/******************* Gallery-1 ********************/
#GalleryStyle-1
{
	margin: auto;
}
#Gallery-1-Nav .slideshow-nav
{
	font-size: 2.2em;
}
#GalleryStyle-1 .below-captions
{
  width: 90%;
  max-width: 650px;
  margin: 0 auto 30px;
  padding: 5px 10px;
  height: auto;
  text-align: left;
}

/******************* Gallery-2, 3, 4 ********************/

#GalleryStyle-2,
#GalleryStyle-2-top-title
{
  padding-left: 25px;
}

body.fv-gallery-2-layout .columns.site-menu-column
{
  	background-color: rgba(255, 255, 255, .9);
  	padding: 0 10px;
  	display: inline-block;
  	min-width: 260px;
  	position: fixed;
  	left: 0;
  	z-index: 10;
  	box-sizing: content-box;
}
body.fv-gallery-2-layout .columns.site-menu-column:hover
{
	background-color: rgba(255, 255, 255, 1);
}
#GalleryStyle-3
{
	width: 100%;
	margin: auto;
}
.gallery-4-info-i
{
	border-bottom: none;
}
/******************* Landing Intro ********************/

.landing-intro-wrapper
{
      width: 100%;
	max-width: 800px;
      margin: auto;
	padding: 5px;
      border-bottom:1px solid #999;
}

body.top-menu .landing-intro
{
	padding: 10px;
	margin: 0;
	max-width: 800px;
}

/******************* Landing-1 ********************/

#LandingStyle-1 .landing-page-block
{
	width: auto;
	margin: 10px 40px 30px 0;
}

#LandingStyle-1 .landing-page-block.landing-intro-text
{
  padding: 10px;
  position: fixed;
  left: 50%;
  width: 500px;
  margin-left: -250px;
  z-index: 200;
  bottom: 0;
  margin-bottom: 0;
  background-color: rgba(255,255,255,.9);
}


/******************* Landing-2 ********************/
#LandingStyle-2, #Gallery-2-Nav
{
	padding-left: 20px;
}
#LandingStyle-2 .landing-item-title
{
	position: absolute;
	top: 40%;
	width: 100%;
	text-align: center;
	z-index: 200;
	color: #fff;
	text-shadow: 0 0 3px #333;
	opacity: 0;
      font-size: 3.5em;
}
#LandingStyle-2 .landing-page-block:hover .landing-item-title
{
	opacity: 1;
    transition: opacity .4s ease-in-out;
}
#LandingStyle-2 .slick-list
{
	padding-bottom: 10px;
}
#LandingStyle-2 img 
{
	margin: 5px;
}
#LandingStyle-2 .landing-page-block:hover img
{
	background-color: #111;
	opacity: .5;
}
.landing-page-block a
{
	display: block;
}
body.landing-page.layout-2 #MenuVerticleLeft
{
    position: fixed;
    z-index: 300;
    opacity: 1;
	padding: 0 5px;
	width: 15%;
}
body.landing-page.layout-2 #MenuVerticleLeft li
{
	padding: 4px;
}
body.landing-page.layout-2 .site-content.columns.large-9
{
    width: 100%;
}

/******************* Landing-3 ********************/
#LandingStyle-3
{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

#LandingStyle-3 .landing-item-title
{
  position: absolute;
  right: 0;
  top: auto;
  bottom: 100px;
  background-color: #fff;
  padding: 6px 35px 6px 15px; 
  z-index: 200;
  opacity: .9;
  display: inline-block;
  font-size: 2.2em;
}


body.landing-page.layout-3 .site-menu-column
{
  opacity: .7;
  z-index: 10;
}

#LandingStyle-3 .landing-item-title:hover,
#LandingStyle-3 .landing-item-title a:hover
{
  opacity: 1;
}

body.landing-page.layout-3 .landing-intro-wrapper
{
	bottom: 170px;
	top: auto;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	background-color: #fff;
	opacity: .9;
	border-radius: 0;
}

/******************* Landing-4 ********************/

#LandingStyle-4 
{
	max-width: 96%;
	margin: auto; 
        overflow-x: auto;
}
#LandingStyle-4 .landing-page-block
{
	width: 22%;
	margin: 1.5%;
}
#LandingStyle-4 .landing-item-title
{
	padding: 5px 0;
	font-weight: normal;
}
#LandingStyle-4 .landing-page-block.landing-intro-text
{
	position: fixed;
	top: 20%;
	width: 500px;
	left: 50%;
	margin-left: -250px;
	padding: 0 10px;
	background-color: rgba(255,255,255,.85);
	z-index: 200;
}

/******************* Landing-5 ********************/

#GoInstagram
{
	max-width: 640px;
	margin: auto;
}

#LandingStyle-5 .close-landing-text
{
	display: none;
}

/******************* Tablet ********************/

@media all and (max-device-width: 1024px), (max-width: 1024px)
{
	#PageContainer
	{
		max-width: 100%;
		margin: auto;	
		overflow: hidden;
        min-height: 500px;
	}
	#MenuHorzTop 
	{
		padding: 20px;
	}
	#LandingStyle-4 .landing-page-block
	{
		margin-bottom: 10px;
	}
	#LandingStyle-4 .landing-page-block.landing-intro-text
	{
		width: 100%;
		margin-bottom: 25px;
	}
	.landing-intro-wrapper
	{
		max-width: 375px;
	}
	.site-content
	{
		padding-left: 0;
	}
	#GalleryStyle-2 .story-text
	{
		margin-left: 20px;
	}
}
/******************* Mobile ********************/

@media all and (max-device-width: 645px), (max-width: 645px)
{
	#PageContainer
	{
		max-width: 100%;
		margin: auto;	
		overflow: visible;
	}
	.columns
	{
		float: none;
	}

	.site-content
	{
		padding-left: 0;
	}

	.row .row
	{
		margin-left: 0;
	}

	body.left-menu .columns.site-menu-column
	{
		min-height: 0;
		max-width: 90%;
		z-index: 1000;
	}

	#MenuHorzTop .top-menu-inner
	{
		max-width: 100%;
	}

	body.left-menu #GalleryStyle-2 
	{
		padding-left: 0;
	}

	body.fv-gallery-2-layout .columns.site-menu-column
	{
		position: relative;
		width: 100%;
	}

	#TheSiteMenu
	{
		display: none;
		float: left;
		width: 100%;
	}

	#MenuVerticleLeft,
	body.landing-page.layout-2 #MenuVerticleLeft
	{
		min-height: 50px;
		width: 100%;
		position: relative;
	}

	#TheSiteMenu a, #TheSiteMenu .sub-menu-container span
	{ 
		font-size: 1.5em;
	}

	#MenuVerticleLeft #LogoText
	{
		margin-bottom: 20px;
	}

	.image-container
	{
		padding: 10px 0;
	}

	.image-container img 
	{
		width: 100%;
		height: auto;
	}

	.captionarea 
	{
		font-size: 1.5em;
		position: relative;
		padding: 5px 15px;
		display: block;
		width: 100%;
	}
    
	#Gallery-2-Nav, #Gallery-1-Nav
	{
		display: none;
	}

	#GalleryStyle-2, #LandingStyle-2, #Gallery-2-Nav, #GalleryStyle-2-top-title
	{
		padding-left: 0;
	}

	#GalleryStyle-2 .story-text
	{
		max-width: 95%;
		margin: auto;
		max-height: 2000px; 
	}

	.trigger-mobile-menu
	{
		cursor: pointer;
	}

	.text-page-image-wrapper {
		text-align: center;
	}
      
      #LandingStyle-2 .landing-item-title
      {
            opacity: 1;
      }

	#LandingStyle-3
	{
		position: relative;
	}

	#LandingStyle-3 img
	{
		margin-bottom: 3px;
	}

	#LandingStyle-3 .landing-item-title
	{
		top: 0;
		position: relative;
	}

	#LandingStyle-4 .landing-page-block
	{
		width: 100%;
		margin-bottom: 5px;
	}

	#LandingStyle-4 .landing-item-title
	{
		position: relative;
		margin-top: 5px;
		padding: 5px 10px;
		background-color: rgba(255, 255, 255, .8);
		opacity: 1;
		width: 100%;
	}
	#LandingStyle-1 .landing-page-block.landing-intro-text
	{
		position: relative;
		left: 0;
		top:0;
		transform: none;
	}

}

/* ////// FDN 102 THEME STYLES ////// */