<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="svg-wrap">
<svg viewBox="0 0 400 20" xmlns="http://www.w3.org/2000/svg"><line id="svg_line" x1="5" y1="15" x2="708" y2="15" id="svg_3"/>
</svg>
</div>
<section class="news" id="stories">
<div class="container">
<div class="sixteen columns">
<h1>Stories</h1>
</div>
<!--div class="sixteen columns">
<div class="sub-text-line"></div>
</div-->
<div class="sixteen columns">
<div class="sub-text link-svgline">
<a href="#about" data-gal="m_PageScroll2id" data-ps2id-offset="65">We believe<svg class="link-svgline"><use xlink:href="#svg_line"></use></svg></a> in coming up with original ideas and turning them into digital work that is both <a href="#services" data-gal="m_PageScroll2id" data-ps2id-offset="65">innovative and measurable.<svg class="link-svgline"><use xlink:href="#svg_line"></use></svg></a>
</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="portfolio"></div>
<div class="clear"></div>
<!-- ====== SORT FILTER ======= -->
<div class="container">
<div class="sixteen columns">
<div id="portfolio-filter">
<ul id="filter">
<li>
<div class="link-svgline"><a href="#" class="current" data-filter="*" title="">Show all<svg class="link-svgline"><use xlink:href="#svg_line"></use></svg></a>
</div>
</li>
<li>
<div class="link-svgline"><a href="#" data-filter=".new" title="">news<svg class="link-svgline"><use xlink:href="#svg_line"></use></svg></a>
</div>
</li>
<li>
<div class="link-svgline"><a href="#" data-filter=".awards" title="">awards<svg class="link-svgline"><use xlink:href="#svg_line"></use></svg></a>
</div>
</li>
<li>
<div class="link-svgline"><a href="#" data-filter=".success-stories" title="">success stories<svg class="link-svgline"><use xlink:href="#svg_line"></use></svg></a>
</div>
</li>
<li>
<div class="link-svgline"><a href="#" data-filter=".community" title="">community<svg class="link-svgline"><use xlink:href="#svg_line"></use></svg></a>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- ====== END SORT FILTER ======= -->
<div class="clear"></div>
<div class="expander-wrap relative">
<div id="expander-wrap">
<p class="cls-btn"><a class="close">X</a></p>
<div class="expander-inner"></div>
</div>
</div>
<ul class="portfolio-wrap">
<li class="portfolio-box new success-stories">
<a class="expander" href="ajax-article.html" title="">
<img src="https://placeimg.com/600/480/nature" alt="" />
<figure class="effect-morley">
<figcaption>
<h5>Top 5 tips</h5>
<p>Considering a mobile app for your next event? Make sure you’re asking the right questions. <a href="#" title="Download tips guide">Download tips guide</a></p>
</figcaption>
</figure>
</a>
</li>
<li class="portfolio-box success-stories community">
<a class="expander" href="ajax-article.html" title="">
<img src="https://placeimg.com/600/480/tech" alt="" />
<figure class="effect-morley">
<figcaption>
<h5>Museum build project</h5>
<p>Check out this photo gallery of our work at the Detroit Historical Museum, including the Kid Rock wing. <a href="#" title="">Visit gallery</a></p>
</figcaption>
</figure>
</a>
</li>
<li class="portfolio-box community new">
<a class="expander" href="ajax-article.html" title="">
<img src="https://placeimg.com/600/480/arch" alt="" />
<figure class="effect-morley">
<figcaption>
<h5>In the news</h5>
<p>New projects = new associates to work them. A local news station interviews our HR director on job opportunities at Morley. <a href="#" title="">See more news</a></p>
</figcaption>
</figure>
</a>
</li>
<li class="portfolio-box success-stories awards">
<a class="expander" href="ajax-article.html" title="">
<img src="https://placeimg.com/600/480/people" alt="" />
<figure class="effect-morley">
<figcaption>
<h5>We saved the day</h5>
<p>We’ve heard our clients call them “Morley Miracles.” Here are some stories of how we’ve helped clients when their challenges seemed beyond help. <a href="#" title="">See more stories</a></p>
</figcaption>
</figure>
</a>
</li>
<li class="portfolio-box new community">
<a class="expander" href="ajax-article.html" title="">
<img src="https://placeimg.com/600/480/any" alt="" />
<figure class="effect-morley">
<figcaption>
<h5>Hear we’re hiring?</h5>
<p>Our diverse range of services requires people of many talents. <a href="#" title="">View open positions</a></p>
</figcaption>
</figure>
</a>
</li>
<li class="portfolio-box new">
<a class="expander" href="ajax-article.html" title="">
<img src="https://placeimg.com/600/480/animals" alt="" />
<figure class="effect-morley">
<figcaption>
<h5>See you at SOCAP</h5>
<p>Customer service is a passion at Morley. At this year’s SOCAP national conference, we’re presenting some innovative concepts about voice of the customer.</p>
</figcaption>
</figure>
</a>
</li>
<li class="portfolio-box awards">
<a class="expander" href="ajax-article.html" title="">
<img src="https://placeimg.com/600/480/any" alt="" />
<figure class="effect-morley">
<figcaption>
<h5>Champion Employer award</h5>
<p>Experience Works named Morley its 2013 Champion Employer of the Year for the State of Michigan.</p>
</figcaption>
</figure>
</a>
</li>
<li class="portfolio-box community">
<a class="expander" href="ajax-article.html" title="">
<img src="https://placeimg.com/600/480/tech" alt="" />
<figure class="effect-morley">
<figcaption>
<h5>Morley has an unique 150-year heritage in Saginaw</h5>
<p>At Morley, you can immerse yourself in our award-winning culture.</p>
</figcaption>
</figure>
</a>
</li>
</ul><!-- END .portfolio-wrap -->
<div class="clear"></div>
</section>
/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, select {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
/* #Basic Styles
================================================== */
body {
background: #f2f2f2;
font-weight: 300;
font: 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
line-height: 24px;
color: #666666;
overflow-x: hidden;
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
-webkit-text-size-adjust: 100%;
}
html { overflow-x: hidden; height:100%; }
/* #Typography
================================================== */
h1, h2, h3, h4, h5, h6 {
font-family: 'centrale_sans_light', sans-serif;
text-align: center;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 46px; line-height: 46px; text-transform: uppercase; letter-spacing: 6px; }
h2 { font-size: 40px; line-height: 40px; text-transform: uppercase; letter-spacing: 5px; }
h3 { font-size: 34px; line-height: 34px; text-transform: uppercase; letter-spacing: 4px; }
h4 { font-size: 28px; line-height: 34px; text-transform: uppercase; letter-spacing: 3px; }
h5 { font-size: 20px; line-height: 20px; text-transform: uppercase; letter-spacing: 2px; }
h6 { font-size: 16px; line-height: 16px; text-transform: uppercase; letter-spacing: 1px; }
p img { margin: 0; }
p.lead { font-size: 21px; line-height: 27px; color: #777; }
em { font-style: italic; }
strong { font-weight: 600; }
small { font-size: 80%; }
/* Blockquotes */
blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; }
blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; }
blockquote cite { display: block; font-size: 12px; color: #555; }
blockquote cite:before { content: "\2014 \0020"; }
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
h1::after,
h2::after {
content: '';
border-bottom: 5px solid #212121;
height: 5px;
width: 65px;
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 19px;
}
.news {
position: relative;
margin: 0 auto;
width: 100%;
overflow: hidden;
background: #fff;
padding-top: 50px;
}
.sub-text-line {
position: relative;
width: 150px;
margin: 0 auto 30px;
text-align: center;
}
.sub-text-line:after {
content: '';
width: 100%;
height: 1px;
border-bottom: 4px solid #212121;
display: block;
position: absolute;
z-index: 9;
top: 100%;
right: 0;
left: 0;
bottom: auto;
}
.sub-text {
position: relative;
width: 100%;
max-width: 850px;
margin: 0 auto 60px;
text-align: center;
font-weight: 400;
font-size: 14px;
line-height: 30px;
text-transform: uppercase;
letter-spacing: 2px;
color: #999999;
padding-bottom: 10px;
}
/* SVG line */
.svg-wrap {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
white-space: normal;
display: block;
}
.link-svgline {
position: relative;
padding-bottom: 1px;
z-index: 1; /* needed for setting pseudo-element z-index */
overflow: hidden;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
.link-svgline.nobreak {
line-height: 0;
display: inline-block;
padding: 5px 3px;
top: 3px;
}
.link-svgline a {
position: relative;
display: inline-block;
outline: none;
color: #212121;
font-weight: 600;
vertical-align: bottom;
text-decoration: none;
white-space: nowrap;
}
.link-svgline a::before,
.link-svgline a::after {
pointer-events: none;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
.link-svgline a svg.link-svgline {
position: absolute;
top: 100%;
left: -3px;
overflow: hidden;
margin: 0;
width: 100%;
height: 20px;
fill: none;
stroke-width: 2;
stroke-dasharray: 500px;
stroke-dashoffset: 500px;
-webkit-transition:stroke-dashoffset 0.4s ease-in-out;
-moz-transition:stroke-dashoffset 0.4s ease-in-out;
-o-transition:stroke-dashoffset 0.4s ease-in-out;
transition:stroke-dashoffset 0.4s ease-in-out;
-webkit-transform:translateY(-90%);
-moz-transform:translateY(-90%);
-ms-transform:translateY(-90%);
-o-transform:translateY(-90%);
transform:translateY(-90%);
}
@media screen and (max-width: 50em) {
.link-svgline a svg.link-svgline {
-webkit-transform:translateY(-80%);
-moz-transform:translateY(-80%);
-ms-transform:translateY(-80%);
-o-transform:translateY(-80%);
transform:translateY(-80%);
}
}
.link-svgline a:hover svg.link-svgline {
stroke-dashoffset: 0;
}
.portfolio-wrap {
position: relative;
width: 100%;
overflow: hidden;
margin-bottom: -1px;
-webkit-transform:translateX(2px);
-moz-transform:translateX(2px);
-ms-transform:translateX(2px);
-o-transform:translateX(2px);
transform:translateX(2px);
}
.portfolio-box {
position: relative;
width: 25%;
overflow: hidden;
display: inline-block;
margin-left: -1px;
margin-top: -1px;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition:all 300ms linear;
-moz-transition:all 300ms linear;
-o-transition:all 300ms linear;
transition:all 300ms linear;
}
.portfolio-box:after {
content: '';
display: block;
clear: both;
}
.portfolio-box img {
width: 100%;
height: auto;
display: block;
-webkit-transition:all 300ms linear;
-moz-transition:all 300ms linear;
-o-transition:all 300ms linear;
transition:all 300ms linear;
}
.portfolio-box:hover img {
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-ms-transform:scale(1.1);
-o-transform:scale(1.1);
transform:scale(1.1);
}
figure.effect-morley {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
figure.effect-morley figcaption::before {
content: '';
opacity: 0;
background: -webkit-linear-gradient(top, rgba(21,21,21,0.1) 0%, rgba(21,21,21,0.9) 100%);
background: linear-gradient(to bottom, rgba(21,21,21,0.1) 0%, rgba(21,21,21,0.9) 100%);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform:translate3d(0,50%,0);
-moz-transform:translate3d(0,50%,0);
-ms-transform:translate3d(0,50%,0);
-o-transform:translate3d(0,50%,0);
transform:translate3d(0,50%,0);
}
figure.effect-morley h5 {
position: absolute;
top: 50%;
left: 0;
width: 100%;
color: #fff;
right: 0;
margin-right: auto;
margin-left: auto;
display: block;
-webkit-transition:-webkit-transform 0.35s, color 0.35s;
-moz-transition:-moz-transform 0.35s, color 0.35s;
-o-transition:-o-transform 0.35s, color 0.35s;
transition:transform 0.35s, color 0.35s;
-webkit-transform:translate3d(0,-50%,0);
-moz-transform:translate3d(0,-50%,0);
-ms-transform:translate3d(0,-50%,0);
-o-transform:translate3d(0,-50%,0);
transform:translate3d(0,-50%,0);
}
figure.effect-morley h5 span {
font-weight: 300;
font-size: 18px;
line-height: 18px;
text-transform: uppercase;
}
figure.effect-morley figcaption::before,
figure.effect-morley p {
-webkit-transition:opacity 0.35s, -webkit-transform 0.35s;
-moz-transition:opacity 0.35s, -moz-transform 0.35s;
-o-transition:opacity 0.35s, -o-transform 0.35s;
transition:opacity 0.35s, transform 0.35s;
}
figure.effect-morley p {
position: absolute;
bottom: 0;
left: 0;
padding-bottom: 40px;
padding-right: 6%;
padding-left: 6%;
width: 100%;
opacity: 0;
text-align: left;
font-size: 12px;
letter-spacing: 1px;
color: #fff;
line-height: normal;
-webkit-transform:translate3d(0,10px,0);
-moz-transform:translate3d(0,10px,0);
-ms-transform:translate3d(0,10px,0);
-o-transform:translate3d(0,10px,0);
transform:translate3d(0,10px,0);
}
figure.effect-morley figcaption p a.expander {
color: inherit;
}
figure.effect-morley:hover h5 {
color: #fff;
-webkit-transform:translate3d(0,-40px,0);
-moz-transform:translate3d(0,-40px,0);
-ms-transform:translate3d(0,-40px,0);
-o-transform:translate3d(0,-40px,0);
transform:translate3d(0,-40px,0);
}
figure.effect-morley:hover figcaption::before,
figure.effect-morley:hover p {
opacity: 1;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}
#portfolio-filter {
position: relative;
width: 100%;
text-align: center;
}
#filter {
position: relative;
width: 100%;
}
#filter li {
display: inline-block;
}
#filter li a {
position: relative;
display: inline-block;
font-weight: 400;
font-size: 12px;
padding-bottom: 7px;
margin-bottom: 10px;
outline: none;
color: #706e6e;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 0 1px rgba(255,255,255,0.3);
margin-left: 12px;
margin-right: 12px;
-webkit-transition:all 200ms linear;
-moz-transition:all 200ms linear;
-o-transition:all 200ms linear;
transition:all 200ms linear;
}
#filter li .current {
color: #bdb3b3;
}
#filter li a:hover {
color: #bdb3b3;
}
#filter li .link-svgline a.current svg.link-svgline {
stroke-dashoffset: 0;
}
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
.isotope, .isotope .isotope-item {
-webkit-transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-o-transition-duration: 0.6s;
transition-duration: 0.6s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-o-transition-property: -o-transform, opacity;
transition-property: transform, opacity;
}
/* Expander Item Styles */
.relative {
position: relative;
}
.portfolio {
width: 100%;
height: auto;
margin: 0 auto;
max-width: 1200px;
}
.expander-wrap {
position: relative;
display: none;
text-align: center;
background-color: #eeeeee;
}
#expander-wrap {
position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
}
a.expander {
color: #FFF;
}
a.expander:hover, a.expander:focus {
color: #FFF;
}
/* Expander Item Controls */
.project-controls {
position: relative;
width: 100%;
height: auto;
top: 105px;
max-width: 1200px;
margin: 0 auto;
}
.expander-inner {
position: relative;
}
.cls-btn {
width: 100%;
padding: 0;
margin: 0 auto;
display: block;
height: auto;
text-align: right;
}
.cls-btn::before {
content: '';
display: block;
border-bottom: 25px solid transparent;
border-right: 25px solid transparent;
border-left: 25px solid transparent;
border-top: 25px solid #ffffff;
width: 0;
margin-right: auto;
margin-left: auto;
position: absolute;
z-index: 1;
left: 0;
right: 0;
pointer-events: none;
}
.expander-wrap .cls-btn .close {
position: relative;
display: inline-block;
color: #ffffff;
top: 55px;
margin-top: 25px;
width: auto;
height: auto;
font-size: 30px;
font-weight: 100;
text-align: center;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.33);
padding: 10px 15px;
float: none;
z-index: 999;
-webkit-transition:all 300ms linear;
-moz-transition:all 300ms linear;
-o-transition:all 300ms linear;
transition:all 300ms linear;
}
.expander-wrap .cls-btn .close:hover {
background-color: rgba(0, 0, 0, 0.65);
}
.expander-close:hover {
color: #3a3a3a;
cursor: pointer;
}
/* #Ajax Projects Expanders
================================================== */
.ajax-project-single-wrapper {
position: relative;
margin: 0 auto;
width: 100%;
overflow: hidden;
display: block;
padding-top: 10px;
padding-bottom: 40px;
}
.ajax-project-single-wrapper h2 {
padding-bottom: 40px;
}
.ajax-project-single-wrapper h2::after {
content: '';
border-bottom: 5px solid #838383;
width: 50px;
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 25px;
}
.ajax-project-single-wrapper .general-subtext {
font-size: 16px;
line-height: 21px;
letter-spacing: 2px;
}
.ajax-project-top-text p {
text-align: left;
padding-bottom: 8px;
}
.ajax-project-top-text p span {
font-weight: normal;
font-size: 12px;
line-height: 24px;
padding-right: 15px;
}
.ajax-project-top-text {
position: relative;
margin: 0 auto;
width: 100%;
overflow: hidden;
display: block;
padding-bottom: 10px;
}
.ajax-project-top-text img {
width: 100%;
}
.ajax-project-top-text h4 {
text-align: left;
padding-bottom: 25px;
}
.ajax-project-top-text p {
text-align: left;
padding-bottom: 8px;
}
.ajax-project-top-text p span {
font-weight: normal;
font-size: 22px;
line-height: 24px;
padding-right: 8px;
}
.project-slider-wrapper img {
width: 100%;
height: auto;
display: block;
}
.slider-project-ajax {
position: relative;
width: 100%;
}
.slider-project-ajax img {
width: 100%;
height: auto;
display: block;
}
.portfolio-box h4,
.ajax-project-top-text p span {
color: #B78500;
}
.link-svgline a svg.link-svgline {
stroke: #B78500;
}
.link-svgline-getintouch p svg.link-svgline-getintouch {
stroke: #B78500;
}
#ajax-form textarea:focus,
#ajax-form input:focus,
#ajax-form textarea:active,
#ajax-form input:active {
border-bottom: 2px solid #B78500;
}
//Portfolio filter
$(window).load(function () {
var $container = $('.portfolio-wrap');
var $filter = $('#filter');
// Initialize isotope
$container.isotope({
filter: '*',
layoutMode: 'fitRows',
animationOptions: {
duration: 750,
easing: 'linear'
}
});
// Filter items when filter link is clicked
$filter.find('a').click(function () {
var selector = $(this).attr('data-filter');
$filter.find('a').removeClass('current');
$(this).addClass('current');
$container.isotope({
filter: selector,
animationOptions: {
animationDuration: 750,
easing: 'linear',
queue: false
}
});
return false;
});
});
// Portfolio Isotope
$(document).ready(function(){
var container = $('.portfolio-wrap');
function splitColumns() {
var winWidth = $(window).width(),
columnNumb = 1;
if (winWidth > 1024) {
columnNumb = 4;
} else if (winWidth > 900) {
columnNumb = 2;
} else if (winWidth > 479) {
columnNumb = 2;
} else if (winWidth < 479) {
columnNumb = 1;
}
return columnNumb;
}
function setColumns() {
var winWidth = $(window).width(),
columnNumb = splitColumns(),
postWidth = Math.floor(winWidth / columnNumb);
container.find('.portfolio-box').each(function () {
$(this).css( {
width : postWidth + 'px'
});
});
}
function setProjects() {
setColumns();
container.isotope('reLayout');
}
container.imagesLoaded(function () {
setColumns();
});
$(window).bind('resize', function () {
setProjects();
});
});
// Portfolio Ajax
$(window).load(function() {
var loader = $('.expander-wrap');
if(typeof loader.html() == 'undefined'){
$('<div class="expander-wrap"><div id="expander-wrap" class="container clearfix relative"><p class="cls-btn"><a class="close">X</a></p><div/></div></div>').css({opacity:0}).hide().insertAfter('.portfolio');
loader = $('.expander-wrap');
}
$('.expander').on('click', function(e){
e.preventDefault();
e.stopPropagation();
var url = $(this).attr('href');
loader.slideUp(function(){
$.get(url, function(data){
var portfolioContainer = $('.portfolio');
var topPosition = portfolioContainer.offset().top;
var bottomPosition = topPosition + portfolioContainer.height();
$('html,body').delay(600).animate({ scrollTop: bottomPosition - (-10)}, 800);
var container = $('#expander-wrap>div', loader);
container.html(data);
/*$('.project-wrap-slider').flexslider({
animation: "fade",
selector: ".slider-project-ajax .slide",
controlNav: false,
directionNav: true ,
slideshowSpeed: 5000,
});*/
loader.slideDown(function(){
if(typeof keepVideoRatio == 'function'){
keepVideoRatio('.video-container > iframe');
}
}).delay(1000).animate({opacity:1}, 200);
});
});
});
$('.close', loader).on('click', function(){
loader.delay(300).slideUp(function(){
var container = $('#expander-wrap>div', loader);
container.html('');
$(this).css({opacity:0});
});
var portfolioContainer = $('.portfolio');
var topPosition = portfolioContainer.offset().top;
$('html,body').delay(0).animate({ scrollTop: topPosition - 70}, 500);
});
});
