@charset "utf-8";
/* CSS Document */
body{ background-color: transparent; }
/*------------------------------------
            $Banner
------------------------------------*/
.banner{ 
	background: black; 
	background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
    position: relative;
	height: 36.4vw;
	background-image: url(../images/main.jpg); 
}

.banner > .row{ height: 100%; }

.banner .banner-title{
	position: absolute;
    left: 33%;
	top: 56%;
    width:44vw;
	height:44vw;
	}
	
.banner .play_button{
	position: absolute;
    left: 58.5%;
	top: 68%;
    width:10vw;
	height:10vw;
	}

	
.banner .banner-info {
	position: absolute;
	right: 9vw;
	top: 0vw;
	width:19vw;
	height:30vw;
	background-color:#000000;
	opacity:0.80;
	z-index:10;
	padding:calc( 10px + 1vw ) calc( 10px + 1vw );
  }

.banner-info .text{
	display:block; 
	padding-bottom:calc( 12px + 1vw ); 
	border-bottom:1px dashed #969696; margin-bottom:15px;}
.banner-info .text h3{
	color:#ffffff;
	}
.banner-info .text p{
	color:#e4e4e4;
	}
	
.banner-info .Price {
	font-size: calc( 18px + 2.5vw); /*70-30*/
	color:#ffffff;
	font-weight:bold;
	}
.banner-info .listPrice {
	font-size: calc( 10px + 0.5vw);
	text-decoration:line-through;
	color:#cccccc;
	}
		
.banner-button{
	font-size: calc( 14.4px + 0.5vw); /*24-16*/
	line-height: none;
	border: none;
	background-color: #ff9f00;
	color: #fff;
	display:block;
	width:98%;
	text-align:center;
	padding:0.5vh;
	opacity:1;
		}
		

.galleryErea{
	padding-top:calc( 10px + 2vw ); 
	padding-bottom:calc( 10px + 2vw );
	
	}	
		
		.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; }



		
/* ------ pack data (begin)------ */
.pack-data {
    color:#ffffff;
	position: absolute;
	right: calc(13vw - 80px);
	
    width:calc(130px + 12vw);
	background-color:#141414;
	opacity:0.8;
	z-index:10;
	padding:0px calc(5px + 1vw );
	margin-top:

    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    justify-content: space-around;
    -webkit-flex- justify-content: space-around;
}


.pack-data > div {
    padding-bottom:calc(1.5vw);
}

.pack-data .info {
	border-bottom:1px dashed #969696; margin-bottom:15px; 
}

.pack-data .info .pack-name,
.pack-data .info .artist {
    line-height: 1.2;
    color:#e4e4e4;
}

.pack-data .price-area {
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    -webkit-flex- justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
}

.pack-data .price-area-buy {
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    -webkit-flex- justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
	margin-bottom:20px;
}

.pack-data .saleprice {
	font-size: calc( 10px + 2vw); /*70-30*/
	line-height: 1.2;
	color: #ffffff;
	font-weight: 500;
    text-align: right;
}
	
.pack-data .price-area .listprice {
	font-size: calc( 15px + 0.5vw);
	text-decoration: line-through;
	color: #cccccc;
    text-align: right;
}
		
.pack-data .price-area .buy-button {
	font-size: calc(16px + 0.5vw); /*24-16*/
	line-height: none;
	border: none;
	background-color: #ff9f00;
	color: #fff;
	width:calc(90px + 5vw);
	text-align:center;
	padding:0.5vw;
}

.pack-data .buy-button:focus { outline: none; }
.pack-data .buy-button:hover { background-color: #fff; color: #666666; }

.pack-data a {
    text-decoration: none !important;
}


/* ------banner 1440 pack data (begin)------ */

.banner1440{
	position: relative;
	background-image: url(../images/main_1440.jpg);
	background-repeat: no-repeat;
    background-size: cover;
}

.banner1440 > .row{ height: 100%; }

.banner1440 .banner-title{
	position: absolute;
    right: 2%;
	top: 55%;
	width:54vw;
}
.pack-data1440 {
    color:#ffffff;
	background-color:#000000;
	opacity:0.8;
	z-index:10;
	padding:0px calc(20px + 1vw );
	
/*	padding:0px calc(5px + 1vw );

    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    justify-content: space-around;
    -webkit-flex- justify-content: space-around;*/
}


.pack-data1440 > div {
/*    padding-bottom:calc(1.5vw);*/
}

.pack-data1440 .info {
	/*border-bottom:1px dashed #969696;*/ margin-bottom:15px;
}

.pack-data1440 .info .pack-name,
.pack-data1440 .info .artist {
    line-height: 1.2;
    color:#e4e4e4;
}

.pack-data1440 .price-area {
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    -webkit-flex- justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
	margin-bottom:15px;
}

.pack-data1440 .saleprice {
	font-size: calc( 30px + 2vw); /*70-30*/
	line-height: 1.2;
	color: #ffffff;
	font-weight: 500;
    text-align: right;
}
	
.pack-data1440 .price-area .listprice {
	font-size: calc( 20px + 0.3vw);
	text-decoration: line-through;
	color: #cccccc;
    text-align: right;
}
		
.pack-data1440 .price-area .buy-button {
	font-size: calc(16px + 0.5vw); /*24-16*/
	line-height: none;
	border: none;
	background-color: #ff9f00;
	color: #fff;
	width:calc(150px + 5vw);
	text-align:center;
	padding:1vw;
}

.pack-data1440 .buy-button:focus { outline: none; }
.pack-data1440 .buy-button:hover { background-color: #fff; color: #666666; }

.pack-data1440 a {
    text-decoration: none !important;
}

/*-----Link Style-----*/
    .rl-style a{color:#CD7F56; text-decoration:none; }
    .rl-style a:hover{color:#afafaf; text-decoration:underline;}
    .rl-style a:focus,
    .rl-style a:active,
    .rl-style a:active:focus{color:#5E5E5E; outline: none;}


  .rl-style .how-to-area a{color:#5E5E5E; text-decoration: underline; }
    .rl-style .how-to-area a:hover{color:#afafaf; text-decoration:underline;}
    .rl-style .how-to-area a:focus,
    .rl-style .how-to-area a:active,
    .rl-style .how-to-area a:active:focus{color:#5E5E5E; outline: none;}
/*------------------------------------
            $Feature ITEM
------------------------------------*/

.FeatureTitle{
	border:1px solid #fff; 
	padding:5px 15px; 
	line-height:1.5;
	text-transform:uppercase; 
	background-color:#0f0f0f; 
	width:300px; 
	color:#ffffff;
	}

.HowtoTitle{
	border:1px solid #cccccc; 
	padding:5px 15px; 
	line-height:1.5;
	text-transform:uppercase; 
	background-color:#141414; 
	width:300px;
	color:#ffffff;
	}
	
.DescriptionTitle{
	border:1px solid #cccccc; 
	padding:5px 15px; 
	line-height:1.5;
	text-transform:uppercase; 
	background-color:#fafafa; 
	width:300px;
	}
	
.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:#c8c8c8;
	}

.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: 46vw;
	background-image: url(../images/Feature_01.jpg);
}

.FeatureBack02_1{
	background-color:#131416; 
	background-repeat: no-repeat;
    background-size: cover;
	position: relative;
    height: 48vw;
	background-image: url(../images/Feature_02_Blaze.jpg);
}

.FeatureBack02_2{
	background-color:#131416; 
	background-repeat: no-repeat;
    background-size: cover;
	position: relative;
    height: 48vw;
	background-image: url(../images/Feature_02_Frost.jpg);
}

.FeatureBack02_3{
	background-color:#131416; 
	background-repeat: no-repeat;
    background-size: cover;
	position: relative;
    height: 48vw;
	background-image: url(../images/Feature_02_Forest.jpg);
}

.FeatureBack02_4{
	background-color:#131416; 
	background-repeat: no-repeat;
    background-size: cover;
	position: relative;
    height: 45vw;
	background-image: url(../images/Feature_02_Dark.jpg);
}

.FeatureBack03{
	    background: #15191c; 
	    background-repeat: no-repeat;
        background-size: cover;
		position: relative;
		height:45vw;
	    background-image: url(../images/Feature_03.jpg);
         }
		 
		 
.FeatureBack04{
	    background: #393b3a; 
	    background-repeat: no-repeat;
        background-size: cover;
		position: relative;
		height:45vw;
	    background-image: url(../images/feature04.jpg);
         }
		 

		 
.FeatureBack05{
	    background:#0f0f0f; 
	    background-repeat: no-repeat;
        background-size: cover;
		Height: 48vw;
	    background-image: url(../images/Feature05.jpg);
        }
		 		 
		 
.FeatureBack05_1440{
	background-color:#0f0f0f; 
	background-repeat: no-repeat;
    background-size: cover;
    height: 48vw;
	background-image: url(../images/feature05_1440.jpg);
}


		 

/*------------------------------------
            $Learning
------------------------------------*/
.Learning{
	    background: #262626; 
	    background-repeat: no-repeat;
        background-size: cover;
	    background-position: right center;
		height:30vw;
	    background-image: url(../images/Learning_banner.jpg);
         }



.Learning .Learning-title{
	position: absolute;
    left: 30%;
	bottom: 18.6%;
    width:35vw;
	height:35vw;
	}
.Learning .Learning-BTN{
	position: absolute;
    left: 48%;
	bottom:17.6%;
    width:35vw;
	height:35vw;
	}

	
	
.note{ color:#fff;}
	
.note a{ color:#B4B4B4;}
.note a:hover{color:#dcdcdc;}
.note a:link{color:#B4B4B4;}
.note a:focus,
.note a:active,
.note a:active:focus{color:#B4B4B4; outline: none;}

.Bundle{
	background-color:#dcdcdc; 
	padding-top:calc( 20px + 1vw ); 
	padding-bottom:calc( 30px + 1vw );
	}
	
.BuyAlso{
	background-color:#464646; 
	padding-top:calc( 20px + 1vw ); 
	padding-bottom:calc(40px + 1vw );
	}

.BuyAlso .price .list {
	/* font-size: calc( 15px + 0.5vw); */
	font-size: calc(0.6875vw + 11.8px);
	text-decoration: line-through;
	color: #cccccc;
    text-align: right;
}

.BuyAlso .sale {
	/* font-size: calc( 10px + 2vw);  */
	/*70-30*/
	font-size: calc(1.625vw + 16.8px); /* 48 -> 22 */
	line-height: 1.2;
	color: #ffffff;
	font-weight: 500;
	text-align: right;
}
		
.BuyAlso .price .buy {
	font-size: calc(14px + 0.4vw); /*24-16*/
	line-height: none;
	border: none;
	background-color: #ff9f00;
	color: #fff;
	width:calc(90px + 5vw);
	text-align:center;
    padding:0.2vw;
	border: 2px solid #ff9f00;
}
.rl-style .buyalsolink:hover{
		text-decoration: none;
	}

.btn-lg{
	background-color:transparent; 
	border:1px solid #d6d6d6; 
	border-radius:0; 
	color:#fff; 
	font-weight:800;
	margin-right: 30px;
}


	
	
	/* ------ Bundle pack data------ */
.bundle-erea {
	position: relative;
	border: 1px solid #969696; 
	background-color: #ffffff; 
	padding:20px calc(10px + 1vw );
}

.bundle-lable{
	position: absolute;
	right: 0%;
    top: 5%;
	width:15vw;
    height:7.5vw;
}

.bundle-lable-top{
	position: absolute;
	left: 0%;
    top: 0%;
	width:11.5vw;
    height:7.5vw;
}


.pack-Bundle {
    /*padding:20px calc(10px + 1vw );*/
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    justify-content: space-around;
    -webkit-flex- justify-content: space-around;
}

.pack-Bundle > div {
    padding-bottom:calc(0.5vw);
}

.pack-Bundle .price-area {
/*    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    -webkit-flex- justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;*/
}

.pack-Bundle .saleprice {
	font-size: calc( 20px + 2vw); /*70-30*/
	line-height: 1.2;
	color: #282828;
	font-weight: 700;
    text-align: center;
}
	
.pack-Bundle .price-area .listprice {
	font-size: calc( 10px + 0.5vw);
	text-decoration: line-through;
	color: #969696;
    text-align: center;
}
		
.pack-Bundle .price-area .buy-button {
	font-size: calc(16px + 0.5vw); /*24-16*/
	line-height: none;
	border: none;
	background-color: #ff9f00;
	color: #fff;
/*	width:calc(90px + 5vw);*/
	text-align:center;
	padding:0.5vw;
}

.pack-Bundle .buy-button:focus { outline: none; }
.pack-Bundle .buy-button:hover { background-color: #ea9200; color: #ffffff; }


.pack-Bundle a {
    text-decoration: none !important;
}

.paddingLeft{margin-left: -20px; margin-bottom: 30px;}

.priceArea{
	width:280px; 
	bottom:calc(1.4375vw + 2.4px);
}

.btn-knoowmore{
	margin-top: 2vh;
	background-color: transparent !important;
    border: 2px solid !important;
    color: #ff9f00 !important;
}

		
@media screen and (max-width: 1440px) {
    .pack-data {
        right: 2vw;
	}
	.priceArea{
		width:500px; 
	}
	.BuyAlso .sale{
		margin-top: 0.5vh;
    	display: inline-block;
	}
	.btn-knoowmore{
		margin-top: 1vh;
	}
	.buyalsolink{
		float: left
	}
}

@media screen and (max-width: 767px) {
	.priceArea{
		bottom: 7px;
	}
	.BuyAlso .sale{
		margin-top: 1vh;
	}
}