/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*         o°        o°        o°                                         °o        °o        °o         */
/*        O         O         O                    STORY                    O         O         O        */
/* ><(((°>   ><(((°>   ><(((°>                                               <°)))><   <°)))><   <°)))>< */
/* _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_ */

/* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */
/*  o°        o°      o°      o°    Main container with large background   °o      °o      °o        °o  */
/* O ><(((°> O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O <°)))>< O */

#main-container.story{
	background-image:url(../images/brand/story.jpg);
	padding-bottom:0;
}

/* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */
/*  o°        o°      o°      o°               Main container              °o      °o      °o        °o  */
/* O ><(((°> O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O <°)))>< O */

.story-main{
	padding:67px 0 0 0;
}

@media all and (max-width: 989px){
	.story-main{padding:22px 0 0 0;}
}

@media all and (max-width: 767px){
	.story-main{padding:71px 0 0 0;}
}

/* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */
/*  o°        o°      o°      o°                Story item                 °o      °o      °o        °o  */
/* O ><(((°> O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O <°)))>< O */

.story-item{
	padding:50px 0;
	background:#fff;
}

/* even elements */

.story-item:nth-child(even){
	background:#edece8;
}

/* .o° .o° .o° .o° .o° .o° Image °o. °o. °o. °o. °o. °o. */

.story-item .img{
	float:left;
	width:380px;
	padding:0 47px 0 0;
	text-align:right;
}

.story-item .img img{
	max-width:100%;
}

/* even elements */

.story-item:nth-child(even) .img{
	float:right;
	padding:0 0 0 47px;
	text-align:left;
}

/* .o° .o° .o° .o° .o° .o° Text °o. °o. °o. °o. °o. °o. */

.story-item .text{
	float:left;
	width:462px;
	font:400 16px / 25px 'Open Sans', sans-serif;
	color:#411200;
}

/* even elements */

.story-item:nth-child(even) .text{
	text-align:right;
	float:right;
}

/* .o° .o° .o° .o° .o° .o° Text title °o. °o. °o. °o. °o. °o. */

.story-item .text h3{
	font:700 36px / 38px 'Dancing Script', cursive;
	color:#e5232a;
	padding:0 0 55px 0;
}

.story-item .text h3 .decade{
	font:700 37px / 46px 'Open Sans', sans-serif;
	color:#fff;
	background:#e5232a;
	display:inline-block;
	text-transform:uppercase;
	padding:0 9px;
	margin:0 0 0 -80px;
}

.story-item .text h3 .year{
	font:700 94px / 50px 'Open Sans', sans-serif;
	color:#e5232a;
	letter-spacing:-5px;
	padding:0 0 0 87px;
}

/* even elements */

.story-item:nth-child(even) .text h3 .decade{
	margin:0 15px 0 0;
}

.story-item:nth-child(even) .text h3 .year{
	padding:0;
	margin:0 -110px 0 0;
}

@media all and (max-width: 989px){
	.story-item .global{width:722px;}
	.story-item .img{width:286px; padding:0 36px 0 0;}
	.story-item:nth-child(even) .img{padding:0 0 0 36px;}
	.story-item .text{width:346px; font-size:14px; line-height:18px;}
	.story-item .text h3{font-size:27px; line-height:27px; padding:0 0 44px 0;}
	.story-item .text h3 .decade{font-size:27px; line-height:34px; margin:0 0 0 -63px;}
	.story-item .text h3 .year{font-size:71px; line-height:39px; letter-spacing:-4px; padding:0 0 0 60px;}
	.story-item:nth-child(even) .text h3 .decade{margin:0 12px 0 0;}
	.story-item:nth-child(even) .text h3 .year{margin:0 -82px 0 0;}
}

@media all and (max-width: 767px){
	.story-item .global{width:320px;}
	.story-item .img, .story-item:nth-child(even) .img{float:none; width:auto; padding:0; text-align:center;}
	.story-item .img img{max-width:80%;}
	.story-item .text, .story-item:nth-child(even) .text{float:none; width:auto; text-align:left; padding:10px 0 0 0;}
	.story-item .text h3{padding:0 40px 15px 40px;}
	.story-item .text h3 .decade, .story-item:nth-child(even) .text h3 .decade{margin:0 0 0 -40px;}
	.story-item .text h3 .year, .story-item:nth-child(even) .text h3 .year{margin:0; text-align:right; display:block;}
	.story-item .text p{padding:0 40px;}
}

/* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */
/*  o°        o°      o°      o°                Story bottom               °o      °o      °o        °o  */
/* O ><(((°> O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O <°)))>< O */

.story-bottom{
	height:773px;
	background:url(../images/brand/story-bottom.jpg) no-repeat center top;
}

/* .o° .o° .o° .o° .o° .o° Title °o. °o. °o. °o. °o. °o. */

.story-bottom hgroup{
	padding:72px 0 100px 0;
	position:relative;
}

.story-bottom hgroup h3{
	font:700 180px / 130px 'Open Sans', sans-serif;
	color:#fff;
}

.story-bottom hgroup h4{
	position:absolute; top:110px; left:270px;
	font:700 70px / 60px 'Dancing Script', cursive;
	color:#f01724;
	transform:rotate(-10deg);
	background:url(../images/brand/story-bottom-title.png) no-repeat right top;
	display:inline-block;
	padding:30px 30px 0 0;
	text-align:center;
	text-shadow:0 0 16px #fff;
}

/* .o° .o° .o° .o° .o° .o° Table for image and text °o. °o. °o. °o. °o. °o. */

.story-bottom table tr td:nth-child(1){
	width:240px;
	background:#fff;
	text-align:center;
	vertical-align:middle;
}

.story-bottom table tr td img{
	max-width:100%;
}

.story-bottom table tr td:nth-child(2){
	background:rgba(255, 255, 255, 0.6);
	padding:0 18px;
	vertical-align:middle;
	font:400 16px / 25px 'Open Sans', sans-serif;
	color:#411200;
}

@media all and (max-width: 989px){
	.story-bottom{height:580px; background-size:1500px;}
	.story-bottom .global{width:722px;}
	.story-bottom table{width:584px;}
	.story-bottom hgroup{padding:55px 0 75px 0;}
	.story-bottom hgroup h2{font-size:134px; line-height:96px;}
	.story-bottom hgroup h3{top:82px; left:202px; font-size:52px; line-height:45px; padding:22px 22px 0 0;}
	.story-bottom table tr td:nth-child(1){width:180px;}
	.story-bottom table tr td:nth-child(1) img{width:165px;}
	.story-bottom table tr td:nth-child(2){padding:0 14px; font-size:14px; line-height:18px;}
}

@media all and (max-width: 767px){
	.story-bottom{height:auto; padding:0 0 40px 0; background:url(../images/brand/story-bottom-mobile.jpg) no-repeat center 0; background-size:100%; overflow:hidden;}
	.story-bottom .global{width:320px;}
	.story-bottom hgroup{padding:55px 0 120px 0;}
	.story-bottom hgroup h2{text-align:center;}
	.story-bottom hgroup h3{background:none; left:0; font-size:45px; width:100%; top:125px;}
	.story-bottom table{width:265px; margin:0 auto;}
	.story-bottom table tr td{display:block;}
	.story-bottom table tr td:nth-child(1){width:265px; padding:15px 0;}
	.story-bottom table tr td:nth-child(2){width:229px; padding:18px;}
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*         o°        o°        o°                                         °o        °o        °o         */
/*        O         O         O               COMMERCIAL SAGA               O         O         O        */
/* ><(((°>   ><(((°>   ><(((°>                                               <°)))><   <°)))><   <°)))>< */
/* _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_ */

/* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */
/*  o°        o°      o°      o°    Main container with large background   °o      °o      °o        °o  */
/* O ><(((°> O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O <°)))>< O */

#main-container.saga{
	background-image:url(../images/brand/saga.jpg);
}

/* ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨ */
/*  o°        o°      o°      o°                   Block                   °o      °o      °o        °o  */
/* O ><(((°> O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O . . . O <°)))>< O */

.saga-block{
	width:982px;
	padding:3px;
	border:solid 1px #dbdbdb;
	margin:35px auto 0 auto;
	background:#fff;
}

@media all and (max-width: 989px){
	.saga-block{width:738px; padding:1px; margin:64px auto 0 auto;}
}

@media all and (max-width: 767px){
	.saga-block{width:314px; padding:1px; margin:50px auto 0 auto;}
}

/* .o° .o° .o° .o° .o° .o° Video °o. °o. °o. °o. °o. °o. */

.saga-block .fitvids{
	height:555px;
}

@media all and (max-width: 989px){
	.saga-block .fitvids{height:418px;}
}

@media all and (max-width: 767px){
	.saga-block .fitvids{height:189px;}
}

/* .o° .o° .o° .o° .o° .o° Slider °o. °o. °o. °o. °o. °o. */

.saga-block .slider-container{
	position:relative;
	font-size:0;
	text-align:center;
	padding:0 1px 0 0;
}

/* controls */

.saga-block .slider-container .saga-controls{
	position:absolute; top:0;
	width:44px;
	height:151px;
	cursor:pointer;
}

.saga-block .slider-container .prev{
	left:-44px;
	background:url(../images/common/slider-prev.png) no-repeat 0 bottom;
}

.saga-block .slider-container .next{
	right:-44px;
	background:url(../images/common/slider-next.png) no-repeat right bottom;
}

/* slides */

.saga-block .slide{
	position:relative;
	width:324px;
	height:227px;
	padding:23px 1px 0 1px;
	line-height:0;
	display:inline-block;
	overflow:hidden;
	cursor:pointer;
}

/* slides : main pic */

.saga-block .slide img.main{
	width:100%;
}

/* slides : title */

.saga-block .slide h3{
	position:absolute; bottom:0; left:0;
	width:100%;
	font:700 25px / 26px 'Dancing Script', cursive;
	color:#ca0103;
	padding:8px 7px;
	background:rgba(255, 255, 255, 0.9);
	box-sizing:border-box;
}

/* slides : play button */

.saga-block .slide .play-button{
	position:absolute; top:50%; left:50%;
	width:50px; height:50px;
	margin-left:-25px; margin-top:-25px;
}

/* slides : hover */

.saga-block .slide:hover h3, .saga-block .slide.focus h3{
	color:#fff;
	background:#f01724;
}

.saga-block .slide .focus-border{
	position:absolute; top:23px; left:0;
	width:100%;
	height:227px;
	box-sizing:border-box;
	border:solid 7px #f01724;
	display:none;
}

.saga-block .focus-border .focus-arrow{
	position:absolute; top:-30px; left:50%;
	width:70px;
	height:23px;
	margin-left:-35px;
	background:url(../images/common/slider-current.png) no-repeat 0 0;
}

.saga-block .slide:hover .focus-border, .saga-block .slide.focus .focus-border{
	display:block;
}

.saga-block .slide:hover .play-button, .saga-block .slide.focus .play-button{
	display:none;
}

@media all and (max-width: 989px){
	.saga-block .slider-container{padding:0;}
	.saga-block .slider-container .saga-controls{top:23px; width:49px; height:171px; background-color:#fff;}
	.saga-block .slider-container .prev{left:0; background-position:7px center; box-shadow:30px 0px 15px -10px rgba(0, 0, 0, 0.3);}
	.saga-block .slider-container .next{right:0; background-position:16px center; box-shadow:-30px 0 15px -10px rgba(0, 0, 0, 0.3);}
	.saga-block .slide{width:244px; height:171px;}
	.saga-block .slide h3{font-size:19px; line-height:20px; padding:6px 7px;}
	.saga-block .slide .focus-border{height:171px;}
}

@media all and (max-width: 767px){
	.saga-block .slider-container{overflow:hidden;}
	.saga-block .slide{width:184px !important; height:140px; padding-top:17px;}
	.saga-block .saga-slider{margin-left:-119px;}
	.saga-block .slider-container .saga-controls{top:17px; width:38px; height:140px; background-color:#fff; background-size:18px auto;}
	.saga-block .slider-container .prev{left:0; background-position:5px center; box-shadow:20px 0px 15px -10px rgba(0, 0, 0, 0.3);}
	.saga-block .slider-container .next{right:0; background-position:15px center; box-shadow:-20px 0 15px -10px rgba(0, 0, 0, 0.3);}
	.saga-block .slide h3{background-color:#fff;}
	.saga-block .slide .focus-border{top:17px; height:140px;}
	.saga-block .focus-border .focus-arrow{top:-21px; width:42px; height:14px; margin-left:-21px; background-size:42px auto;}
	.saga-block .slide .play-button{width:30px; height:30px; margin-left:-15px; margin-top:-15px;}
}