@font-face {
    font-family: 'guthen_bloots_reg';
    src: url('/repo/DAL/common/fonts/GuthenBloots/guthen_bloots_basic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#outerPageContainer {width: 100%!important}

#ff-container {
	margin: 0 auto 2%;
	position: relative;
	width: 100%;
	max-width: 1600px;
	text-align: center;
}

#ff-hero {
	position: relative;
}

#ff-container img.BG {max-width:100%;display: block;}

#ff-container a {text-decoration: none;}

/* Header */
#ff-hero .logo-panel-area {
	width: 64%;
    position: absolute;
    left: 13%;
    top: 25%;
    text-align: center;
    background-color: #fff;
    padding: 5%;
}

#ff-hero .logo-panel-area img {
	width: 86%;
    padding-bottom: 5%;
}

#ff-hero img {max-width: 94%; margin: 2% auto;}

.ff-desktop {display: none!important;}


#ff-container .ff-hero .f_textArea p.f-copy {
	padding: 25px 0;
}

#ff-intro p {
	letter-spacing: 1px;
    font: 0.7em/1.6 'CircularBold';
    text-transform: uppercase;
    padding: 4.5%;
    margin: 0 auto;
    text-align: center;
    color: #000000;
}

/* generic */
.ff-cta, a.ff-cta {
	background: #000;
    color: #fff;
    font: .85em/1 'CircularBold';
    text-align: center;
    padding: 15px 0;
    position: relative;
    display: block;
    width: 90%;
    margin: 0 auto;
}
.ff-cta.main {
	width: 100%;
	margin: 8% auto;
}
.ff-cta.main a {
	color: inherit;
}

.nav-container {
	width: 100%;
    display: block;
    margin: 3% auto 0;
}
.nav-container .hiddenContent {
	display: none;
	background: #000000;
}
.nav-container h5 {
	background: #000000;
    color: #fff;
    font: .85em/1 'CircularBold';
    text-align: center;
    padding: 15px 0;
    position: relative;
    display: block;
    width: 100%;
    margin: 0 auto;
}
.nav-container h5::before {		  
	content: '\25bc';
	position: absolute;
	left: 5%;	 
}
.nav-container h5::after {		  
	content: '\25bc';
	position: absolute;
	right: 5%;	 
}
.nav-container a.nav-cta.ff-cta {
    width: 100%;
	color: #fff;
	background: none;
	left: 0;
}

.trends-heading img 	{
	width: 50%;
    padding: 10% 0 4%;
}


.f-feature {
	display: inline-block;
	position: relative;
}

#ff-furniture {
	width: 100%;
	position: relative;
}

#ff-furniture .f-feature img {
	width: 100%;
	margin: 8% auto;
}

#ff-furniture .ff-cta {
	background: #000;
    color: #fff;
    font: .85em/1 'CircularBold';
    text-align: center;
    padding: 15px 0;
    position: absolute;
    display: block;
    width: 80%;
    left: 10%;
    top: 80%;
}

#ff-categories {
	position: relative;
}

#ff-container .cat-heading img {
	width: 70%;
	margin: auto;
}

#ff-container .cat	{
	width: 80%;
	margin: 10% auto;
}

#ff-container .cat img	{
	width: 100%;
}

#ff-container .colour-block {
	width: 15%;
    height: 109%;
    background-color: #e6d9ed;
    position: absolute;
    right: 0%;
    top: 2%;
    z-index: -1;
}

#ff-outdoor	{
	width: 100%;
	margin: 12% auto;
	position: relative;
}

#ff-outdoor img	{
	width: 100%;
	margin-bottom: 5%;
}

#ff-categories .ff-cta {
	background: #000;
    color: #fff;
    font: .85em/1 'CircularBold';
    text-align: center;
    padding: 15px 0;
    position: relative;
    display: block;
    width: 80%;
    margin: -23% auto -5%;
}


#ff-container p.f-copy {
	color: #000;
    font: .85em/1.6 'CircularBold';
    width: 90%;
    margin: 0 auto;
    padding: 12px 0;
}



.alt-font {
    font-family: 'guthen_bloots_reg'!important;
    text-transform: none!important;
}



.cta-container a.nav-cta {
    width: 45%;
    display: inline-block;
    margin: 1%;
}
.cta-container a.nav-cta:nth-child(7) {
	width: 92%;
}




/* specifics */


#ff-trends h3 {
	font-size: 6vw;
    padding: 7%;
    color: #000000;
    text-align: center;
}

#ff-furniture h2 {
	font-size: 9.5vw;
    color: #fff;
    text-align: left;
    position: absolute;
    top: 10%;
    left: 7%;
    width: 66%;
}

#ff-outdoor h2	{
	font-size: 9.5vw;
    color: #FFFFFF;
    text-align: center;
    position: absolute;
    margin: 0 auto;
    top: 4%;
    width: 100%;	
}

#ff-final-cta .ff-cta{
	width: 100%;
	margin: 0;
}


#ff-trends .owl-carousel {
			margin:10px auto;
			width: 76%;
		}

#ff-trends > div.owl-nav {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 100%;
			z-index: -1;
		}

#ProductCarousel .owl-prev {
    content: url(/repo/FW/desktop/pages/freeFormat/SS17/SwimwearShop/week12/02-images/previous.png);
    position: absolute;
    left: -12%;
    top: 36%;
}

#ProductCarousel .owl-next {
    content: url(/repo/FW/desktop/pages/freeFormat/SS17/SwimwearShop/week12/02-images/next.png);
    position: absolute;
    right: -12%;
    top: 36%;
}

#ff-container .ff-cta {
	transition:background-color ease-in-out .4s;
}

#ff-container .ff-cta:hover {
	background-color:#333;
	background-color:rgba(0,0,0,0.6);
}

@media only screen and (min-width: 600px) {
	.nav-container a.nav-cta.ff-cta {width: 33.3%;display: inline-block;}
	.ff-section p.f-copy {font-size: 1em;}
	#ff-furniture .ff-cta {margin: -13% auto 16%;}
	#ff-categories .ff-cta {margin: -17% auto -5%;}
	#ff-furniture .ff-cta {top: 82%;}
}

@media only screen and (min-width: 768px) {
	#ff-container a {font-size: 100%;}
	.ff-mobile {display: none!important;}
	.ff-desktop {display: block!important;}
	.ff-cta {padding: 12px 0;width: 200px;}
	a.ff-cta {font-size: .8em!important;}
	.ff-section {margin: 2% auto;}
	.f-feature.f-wide {width: 82%;}
	.f-feature.f-long {width: 58%;margin: 0 42% 0 0;}
	.f-feature.f-tall {width: 35%;margin: -28% 0 0 59%!important;}
	.cta-container {background: #000;}
	.cta-container a.nav-cta {margin: 0;width: 14%!important;}
    .ff-section .f-container {width: 45%;display: inline-block;vertical-align: top;}
	.f-feature.f-square {width: 100%;}
	
	.nav-container{margin: 3% auto;}
	.nav-container h5 {display: none;}
	.nav-container .hiddenContent {display: block;background: #000000;}
	.nav-container .hiddenContent a {position: relative;width: 20%}
	.nav-container a.nav-cta.ff-cta {width: 20%;display: inline-block;font-size: .8em!important;background: none;margin: 0 auto;}
	
	.ff-header .f_titleArea {top: 23vw;}
	.ff-header .f_titleArea img.title {width: 65%;}
	#ff-container .ff-header h2 br {display: none;}
	#ff-container .ff-header h2.alt-font {font-size: 11vw;}
	.ff-header h1 {color: #fff;font-size: 2vw;padding: 1% 0 0 0;}
	.ff-header h1 span.dot {height: 10px;width: 10px;background-color: #fff;border-radius: 50%;display: inline-block;margin: 0 2%;}
	.ff-header .f_textArea {margin-top: 0;}
	#ff-container .ff-header .f_textArea p.f-copy {padding: 20px 0;}
	
	#ff-hero .logo-panel-area {width: 32%;position: absolute;left: 32%;top: 18.5%;text-align: center;background-color: #fff;padding: 2%;}
	
	#ff-intro p {font: 0.7em/1.6 'CircularBold';
    padding: 1% 4.5%; margin: 0 10%;}
	
	.trends-heading img {width: 14%;padding: 2% 0;margin: 0 auto;}
	
	#ff-furniture h2 {font-size: 4vw;top: 35.5%;left: 7%;}
	#ff-furniture .ff-cta {margin: -26% auto 16%;position: absolute;top: 93%;left: 7%;width: 26%;}
	#ff-furniture .f-feature img {margin: 7% auto;}
	
	#ff-container .cat-heading img {width: 44%;}
	#ff-container .cat {width: 26%;margin: 6% 1%;}
	#ff-categories .ff-cta {margin: -26% auto -28%;}
	
	#ff-outdoor {margin: 11% 0 4%;text-align: left;}
	.outdoor-img-left {width: 60%; vertical-align: top;display: inline-block;}
	#ff-outdoor .f_textArea {display: inline-block; vertical-align: top;width: 35%;}
	#ff-outdoor h2 {font-size: 5.5vw;color: #000000;position: relative;margin: 35% auto 7%;text-align: left;}
	#ff-outdoor .ff-cta {margin: 0;}
	
	#ff-trends-desktop .desktop-trend{
		width: 27%;
    	margin: 0 1.5%;
		display: inline-block;
		text-align: center;
		position: relative;
	}
	
	#ff-trends-desktop .trends-row .img-area img {
		width: 100%;
	}
	
	.trends-row {
		position: relative;
		width: 100%;
		margin: 3% auto;
	}
	
	.desktop-trend h3 {
    font-size: 2.5vw;
    padding: 7% 0 8%;
    color: #000000;
    text-align: center;
	}
	
}
	


@media only screen and (min-width: 900px) {
}

@media only screen and (min-width: 1024px) {
	.nav-container a.nav-cta.ff-cta {width: 17%;}
	.cta-container {margin: 15px 0;}
	#ff-container p.f-copy {font-size: 1em;}
	#ff-hero .logo-panel-area {top: 19.5%;}
}
	
@media only screen and (min-width: 1200px) {
	.nav-container a.nav-cta.ff-cta {font-size: .9em!important;}
	.nav-container.stuck {top: 111px}
	#ff-hero .logo-panel-area {top: 20.5%;}
	#ff-categories .ff-cta {margin: -21% auto -28%;}
	.desktop-trend h3 {font-size: 2.2vw;}
}

@media only screen and (min-width: 1400px) {
	.ff-cta {width: 280px;}
	#ff-container p.f-copy {font-size: 1.3em;}
	.f-feature.f-wide {width: 85%;}
	.f-feature.f-wide img.BG {width: 100%;}
	#ff-hero .logo-panel-area {top: 21.5%;}
	#ff-furniture .ff-cta {top: 94%;}
	#ff-categories .ff-cta {margin: -19% auto -28%;}
	#ff-outdoor h2 {font-size: 5vw;}
	#ff-trends-desktop .desktop-trend {width: 22%; margin: 0 2.5%;}
	.desktop-trend h3 {font-size: 2vw;}
}

@media only screen and (min-width: 1600px) {
	.ff-cta {font-size: 1em;}
	a.ff-cta {font-size: 1em!important;}
	.ff-section p.f-copy {font-size: 1em;line-height: 1.5;padding: 15px 0;}
	.nav-container a.nav-cta.ff-cta {font-size: 1em!important;width: 13%;}
	.cta-container a.nav-cta {width: 12%!important;}
	.ff-header .f_titleArea {top: 33%;}
	#ff-container .ff-header h2.alt-font {font-size: 11em;}
	.ff-header h1 {font-size: 1.7em;}
}