@charset "utf-8";
/* CSS Document */
/*------------------------------------
            $Banner
------------------------------------*/
.banner{ 
	background: lightgray; 
	background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
    position: relative;
	height: 52vw; 
	background-image: url(../images/landing-main_2.jpg);
}


	.banner > .row{ height: 100%; }
	.banner-info {
	float: left;
	position: absolute;
	top: 43%;
	left: 29.5%;
	width: 800px;
	    /*padding-right: 40%;*/
	}
	
/*	.banner-info .title{
		    color: #282828;
			font-size:48px;
			font-family: 'Roboto', sans-serif;
			font-weight: 700;
			
		}*/

		
		
		.banner .playbutton{
	    position: absolute;
	    right: 30%;
	    top: 15%;
		width:10vw;
		height:20vw;
			}
			
		.banner .Bonus{
	    position: absolute;
	    right: 4.75%;
	    top: 37%;
		width:26vw;
		height:26vw;
			}
	
	
	 .banner-info .banner-button{
		    font-size: calc( 20.4px + 0.5vw); /*24-16*/
		    border: none;
		    background-color: #636363;
		    color: #fff;
		    padding-top: 10px;
    		padding-bottom: 10px;
		    padding-right: 30px;
		    padding-left: 30px;
		    min-height: 64px;
		}
		.banner-info .banner-button:focus{ outline: none; }
		.banner-info .banner-button:hover{ background-color: #fff; color: #666666; }
		.banner-info .banner-button:hover .icon{ fill: #666666; }
		.ct .banner-info .banner-button:hover{ background-color: #cccccc; }
	
	.Price {
		font-size: calc( 22px + 1vw); /*70-30*/
		color:#fff;
		font-weight:bold;
		line-height: 0.8;
	}

	.listPrice {
		font-size: calc( 14.4px + 0.3vw);
		color:#C3C3C3;
		text-decoration:line-through;
	}
			
	.number {	
	 list-style-type:none;
	 padding-left:60px;
	 font-weight:500;
	 line-height:1.2;
	 font-size: calc( 16px + 0.5vw); /*24-16*/
}



	.number span{
	font-style:italic; 
	font-size: calc( 32px + 0.5vw);
	font-weight:bold;
}


/*------------------------------------
            $Description
------------------------------------*/
.description{ position: relative; }
	.description p{
		color: #fff;
		font-size: calc( 16.8px + 0.375vw ); /*24-18*/
		margin: 0 auto;
		text-align: center;
		width: 80%;
	}
	.description .triangle{
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 20px 20px 0 20px;
		border-color: #4a4a4a transparent transparent transparent;
		margin-left: auto;
		margin-right: auto;
		position: absolute;
		left: 0;
		right: 0;
		bottom: -20px;
		z-index: 3;
	}

		
/*------------------------------------
            $PACK ITEM
------------------------------------*/
.Pack{ 
	 padding:20px;}
.PackThumb a{
	}
.PackThumb :hover{
	 fill:#282828;}

.item {	
	 list-style-type:none;
	 list-style-image:url(../images/check_2.png);background-repeat:no-repeat;
	 padding-left:60px;
	 font-size: calc( 14.4px + 0.5vw); /*24-16*/
}
.item span{
	font-style:italic; 
	font-size: calc( 16.4px + 0.5vw);
	font-weight:bold;
}


.item2 span{
	font-style:italic; 
	font-size: calc( 16.4px + 0.5vw);
	font-weight:bold;
}

.PackPrice{
	position:absolute;
	right:70px;
	bottom:40px;
	z-index:10;
	}
	
.PackPrice .Price {
	font-size: calc( 22px + 2.5vw); /*70-30*/
	color:#282828;
	font-weight:bold;
	}
.PackPrice .listPrice {
	font-size: calc( 14.4px + 0.5vw);
	text-decoration:line-through;
	}
.btn-lg{
	background-color:transparent; 
	border:1px solid #d6d6d6; 
	border-radius:0; 
	color:#fff; 
	font-weight:800;
	margin-right: 30px;
	padding:10px 30px
}



.btn-red{
	background-color:#e70012; border:none; border-radius:0; color:#fff; width:98%; font-weight:800;
}


.FeatureText{ 
		color:#e2e2e2;
	}
	
.FeatureText h3{
	    font-size: calc( 26.4px + 0.5vw ); /*36*/ 
        font-weight: 300; 
        line-height:1.2; 
        padding-top: 0;
        padding-bottom: calc( 16px + 1.25vw );
		text-transform:uppercase;
		} 

.FeatureText_2{ 
		color:#fff;
	}

.FeatureText_3{ 
		color:#565656;
	}

.FeatureText_3 h3{
	    font-size: calc( 26.4px + 0.5vw ); /*36*/ 
        font-weight: 300; 
        line-height:1.2; 
        padding-top: 0;
        padding-bottom: calc( 16px + 1.25vw );
		text-transform:uppercase;
		} 

.FeatureText_2 h3{
	    font-size: calc( 26.4px + 0.5vw ); /*36*/ 
        font-weight: 300; 
        line-height:1.2; 
        padding-top: 0;
        padding-bottom: calc( 16px + 1.25vw );
		text-transform:uppercase;
		} 
		
.FeatureBack{
	background-color:#131416; 
	background-repeat: no-repeat;
    background-size: cover;
	position: relative;
    height: 40vw;
	background-image: url(../images/feature01.jpg);
}		
		
.FeatureBack02{
	    background: #393b3a; 
	    background-repeat: no-repeat;
        background-size: cover;
		position: relative;
		height:45vw;
	    background-image: url(../images/feature02.jpg);
         }
		 
		 
.FeatureBack03{
	    background: #393b3a; 
	    background-repeat: no-repeat;
        background-size: cover;
		position: relative;
		height:45vw;
	    background-image: url(../images/feature03.jpg);
         }


/*------------------------------------
            $Bonus
------------------------------------*/
.bonus{ 
	background: lightgray; 
	background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
    position: relative;
	height: 52vw; 
	background-image: url(../images/Bonus.png);
}


	.bonus > .row{ height: 100%; }
	.bonus-info {
		float: right;
	    position: absolute;
	    top: 23%;
	    right: 27%;
		font-size: calc( 18px + 0.5vw); /*24-16*/
	    /*padding-right: 40%;*/
	}
	
/*	.banner-info .title{
		    color: #282828;
			font-size:48px;
			font-family: 'Roboto', sans-serif;
			font-weight: 700;
			
		}*/

		
	 .bonus-info .banner-button{
		    font-size: calc( 14.4px + 0.5vw); /*24-16*/
		    border: none;
		    background-color: #636363;
		    color: #fff;
		    padding-top: 10px;
    		padding-bottom: 10px;
		    padding-right: 30px;
		    padding-left: 30px;
		    min-height: 64px;
		}
		.bonus-info .bonus-button:focus{ outline: none; }
		.bonus-info .bonus-button:hover{ background-color: #fff; color: #666666; }
		.bonus-info .bonus-button:hover .icon{ fill: #666666; }
		.ct .bonus-info .bonus-button:hover{ background-color: #cccccc; }
		
		
	
	
	
	.icon-info {
		float: left;
	    position: absolute;
	    bottom: 18%;
	    left: 6.5%;
		font-size: calc( 18px + 0.5vw); /*24-16*/
	    /*padding-right: 40%;*/
	}
	
	
	.Index{
	position:absolute;
	right: 11%;
	top: 23%;
	width:14vw;
	height:10vw;
	}
	
	.Index .Price {
	font-size: calc( 22px + 2.5vw); /*70-30*/
	color:#282828;
	font-weight:bold;
	}
	.Index .listPrice {
	font-size: calc( 14.4px + 0.5vw);
	text-decoration:line-through;
	}
	
	.Index2{
	position:absolute;
	right: 13.5%;
	bottom: -5%;
	width:14vw;
	height:10vw;
	}
	
	.Index2 .Price {
	font-size: calc( 22px + 2.5vw); /*70-30*/
	color:#282828;
	font-weight:bold;
	}
	.Index2 .listPrice {
	font-size: calc( 14.4px + 0.5vw);
	text-decoration:line-through;
	}
	
	.Exclusive{
	background-color:#e8f6ff;
	text-align:center;
	position:absolute;
	left: 5%;
	top: 1%;
	width:15vw;
	border:1px solid #282828;
	font-size: calc( 18px + 0.275vw);
	padding:10px;}

    .Additional a{color:#CD7F56; text-decoration:none; }
    .Additional a:hover{color:#afafaf; text-decoration:underline;}
    .Additional a:focus,
    .Additional a:active,
    .Additional a:active:focus{color:#5E5E5E; outline: none;}



@media screen and (min-width: 990px) and (max-width: 1280px){
 .Feature01_img{
  display:none
 }
}
