/*START BANNER*/

a, a:hover, a:active, a:focus {
  text-decoration: none;
  outline: 0;
}

.swiper-container, .swiper-slide {
  width: 100%;
}

.image-container {
	background-color: #000;
}

.swiper-container .arrow-left {
  /*background: url("../img/arrows.png") no-repeat left top;*/
  color: #FFD000;
  position: absolute;
  left: 10px;
  top: 50%;
  margin-top: -15px;
  width: 17px;
  height: 30px;
  z-index: 100;
  display: block;

  -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.swiper-container .arrow-right {
  /*background: url("../img/arrows.png") no-repeat left bottom;*/
  color: #FFD000;
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -15px;
  width: 17px;
  height: 30px;
  z-index: 100;
  display: block;

  -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.swiper-container .arrow-left:hover,  .swiper-container .arrow-right:hover{
	color: #FFFFFF;

	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.swiper-slide #slider-1 {
	width: 100%;
	border-color: #000;
	opacity: 0.33;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=33)";
	filter: alpha(opacity=33);
	background: #FFF url("../img/home.jpg") no-repeat center center;
	background-size: cover;
	position: relative;
}

.swiper-slide #slider-2 {
	width: 100%;
	border-color: #000;
	opacity: 0.33;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=33)";
	filter: alpha(opacity=33);
	background: #FFF url("../img/home-2.jpg") no-repeat center center;
	background-size: cover;
	position: relative;
}

.swiper-slide #slider-3 {
	width: 100%;
	border-color: #000;
	/*opacity: 0.33;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=33)";
	filter: alpha(opacity=33);*/
	background: #FFF url("../img/home-3.jpg") no-repeat left top;
	background-size: cover;
	position: relative;
}

.text{
	display: table-cell;
	position: absolute;
	z-index: 20;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.text .content{
	width: 100%;
	text-align: center;
	position: absolute;
	top: 50%;
	height: auto;
	color: #FFD000;
	line-height: 3px;
	margin-top: -10em;
}

.text .content p {
	color: #FFD000;
	font-size: 32px;
	font-family: open-sans, sans-serif;
	font-weight: 400;
}

.main-banner-container .img-container .text {
	display: table-cell;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.main-banner-container .img-container .text .content {
	width: 100%;
	text-align: center;
	position: absolute;
	top: 62%;
	height: auto;
	color: #FFD000;
	line-height: 3px;
	margin-top: -10em;
}

.main-banner-container .img-container .text .content p {
	color: #FFD000;
	font-size: 32px;
	font-family: open-sans, sans-serif;
	font-weight: 400;
}

.main-banner-container .img-container .text .content img {
	height: 74px;
  	width: 171px;
}

.main-banner-container .img-container .image-container {
	height: 100vh;
	background-color: #000;
}

.main-banner-container .img-container .image-container #image {
	height: 800px;
	width: 100%;
	border-color: #000;
	opacity: 0.33;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=33)";
	filter: alpha(opacity=33);
	background: #FFF url("../img/home.jpg") no-repeat center center;
	background-size: cover;
	position: relative;
}

/*END OF BANNER*/

.content-slide {
  	padding: 20px;
	color: #FFF;
	text-align: center;
	top: 33%;
	line-height: 3px;
	position: absolute;
}
.content-slide img {
  	height: 74px;
  	width: 171px;
}
.content-slide p {
  	color: #FFD000;
	font-size: 60px;
	font-family: open-sans, sans-serif;
	font-weight: 400;
}

.content-slide-2 {
  	padding: 20px;
	color: #FFF;
	text-align: center;
	top: 35%;
	line-height: 3px;
	position: absolute;
}
.content-slide-2 p {
  	color: #FFD000;
	font-size: 60px;
	font-family: open-sans, sans-serif;
	font-weight: 400;
}

.content-slide-3 {
  	padding: 20px;
	color: #FFF;
	text-align: left;
	top: 16.5%;
	line-height: 5px;
	position: absolute;
	margin-left: 150px;

	/*width: 100%;
	text-align: center;
	position: absolute;
	top: 50%;
	height: auto;
	color: #FFD000;
	line-height: 3px;
	margin-top: -10em;*/
	
}
.content-slide-3 img {
  	height: 53px;
  	width: 223px;
  	margin-top: -25px;
}
.content-slide-3 p {
  	color: #FFD000;
	font-size: 60px;
	font-family: open-sans, sans-serif;
	font-weight: 400;
}

.content-slide-3 .view-details{
	z-index: 100;
	width: 156px;
	border-width: 1px;
	border-style: solid;
	border-color: #FFD000;
	background-color: rgba(0, 0, 0, 0);
	line-height: 20px;
	font-size: 14px;
	color: #FFD000;
	text-align: center;
	font-family: open-sans, sans-serif;
	font-weight: 400;
	margin-top: 20px;
	position: relative;
	padding: 10px 10px 10px 10px;

	-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.content-slide-3 .view-details:hover{
	border-color: #FFFFFF;
	color: #FFFFFF;

	-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}


.pagination {
  z-index: 20;
  position: absolute;
  left: 0;
  text-align: center;
  bottom: 10px;
  width: 100%;
}
.swiper-pagination-switch {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 10px;
  background: transparent;
  box-shadow: 0px 0px 2px #FFD000 inset;
  margin: 0 5px;
  cursor: pointer;
}
.swiper-active-switch {
  background: #FFD000;
}

/*START CONTENT*/
.div-container {
	background-color: #000;
}

.div-container .content {
	position: relative;
	width: 501px;
	height: auto;
	min-height: 500px;
	text-align: center;
	margin: 0 auto;
	padding: 30px 0px 70px 0px;
}

.main-banner-container {
	position: relative;
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
	/*padding-top: 60px;*/
}

.main-banner-container .img-container-introduction {
	position: relative;
	width: 50%;
	height: auto;
	float: left;
}

.main-banner-container .img-container-introduction.image-container {
	background-color: #000;
}


.main-banner-container .img-container-introduction .image-layer{
	width: 100%; 
	height: 592px;
	border-color: #000;
	opacity: 0.70;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	background: rgba(0, 0, 0, 0) url("../img/introduction.jpg") no-repeat left top;
	background-size: cover;
	position: relative;

	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

/*.main-banner-container .img-container-introduction .image-layer:hover{
	background-color: #000;
	opacity:1.0;
    filter:alpha(opacity=100);
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-transition: opacity 0.3 linear;
}*/

.main-banner-container .img-container-introduction .text {
	display: table-cell;
	/*position: absolute;*/
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.main-banner-container .img-container-introduction .text .content {
	width: 100%;
	text-align: center;
	position: absolute;
	top: 57%;
	height: auto;
	color: #FFD000;
	line-height: 3px;
	margin-top: -10em;
}

.main-banner-container .img-container-introduction .text .content img{
	height: 166px;
	width: 182px;
}

.main-banner-container .img-container-introduction .text .content p {
	font-size: 14px;
	color: #FFD000;
	text-align: center;
	font-family: open-sans, sans-serif;
	font-weight: 700;
	position: relative;

	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.main-banner-container .img-container-introduction .text .content a {
	text-decoration: none;
}

.main-banner-container .img-container-gallery {
	position: relative;
	width: 50%;
	height: auto;
	float: left;

	-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

/*.main-banner-container .img-container-gallery:hover {
	background-color: #000;
	opacity:0.99;
    filter:alpha(opacity=100);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}*/

.main-banner-container .img-container-gallery .image-container{
	background-color: #000;
}

.main-banner-container .img-container-gallery .image-layer{
	width: 100%;
	height: 296px;
	border-color: #000;
	opacity: 0.70;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	background: #7F7F7F url("../img/gallery.jpg") no-repeat center center;
	background-size: cover;
	position: relative;

	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.main-banner-container .img-container-gallery .text {
	display: table-cell;
	/*position: absolute;*/
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.main-banner-container .img-container-gallery .text .content {
	width: 100%;
	text-align: center;
	position: absolute;
	top: 120%;
	height: auto;
	color: #FFD000;
	line-height: 10px;
}

.main-banner-container .img-container-gallery .text .content p {
	font-size: 16px;
	color: #FFD000;
	text-align: left;
	font-family: open-sans, sans-serif;
	font-weight: 700;
	position: relative;
	margin-left: 25px;

	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.main-banner-container .img-container-gallery .text .content a {
	text-decoration: none;
}

.main-banner-container .img-container-product {
	position: relative;
	width: 50%;
	height: auto;
	float: right;

	-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

/*.main-banner-container .img-container-product:hover {
	background-color: #000;
	opacity:0.97;
    filter:alpha(opacity=100);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}*/

.main-banner-container .img-container-product .image-container{
	background-color: #000;
	width: 50%;
	float: right;
}

.main-banner-container .img-container-product .image-layer{
	height: 296px;
	border-color: #000;
	opacity: 0.7; 
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	background: #FFF url("../img/product.jpg") no-repeat center center;
	background-size: cover;
	position: relative;

	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.main-banner-container .img-container-product .details {
	width: 50%;
	background: #FFD000;
	float: left;
	height: 296px;
}

.main-banner-container .img-container-product .details .text {
	display: table-cell;
	/*position: absolute;*/
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.main-banner-container .img-container-product .details .text .content {
	width: 100%;
	text-align: center;
	position: absolute;
	top: 65.5%;
	height: auto;
	color: #000;
	line-height: 3px;

	-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.main-banner-container .img-container-product .details .text .content .title{
	width: 205px;
	min-height: 20px;
	background-color: rgba(0, 0, 0, 0);
	font-size: 14px;
	color: #000;
	text-align: left;
	font-family: open-sans, sans-serif;
	font-weight: 700;
	position: relative;
	padding-left: 50px;
}

.main-banner-container .img-container-product .details .text .content .product-content{
	width: 205px;
	min-height: 91px;
	background-color: rgba(0, 0, 0, 0);
	line-height: 30px;
	font-size: 30px;
	color: #000;
	text-align: left;
	font-family: open-sans, sans-serif;
	font-weight: 700;
	margin-top: 20px;
	position: relative;
	padding-left: 50px;
}

.main-banner-container .img-container-product .details .text .content .view-details{
	width: 125px;
	min-height: 25px;
	border-width: 1px;
	border-style: solid;
	border-color: #000;
	background-color: rgba(0, 0, 0, 0);
	line-height: 20px;
	font-size: 12px;
	color: #000;
	text-align: center;
	font-family: open-sans, sans-serif;
	font-weight: 400;
	margin-top: 50px;
	position: relative;
	padding-top: 5px;
	margin-left: 50px;

	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}


.main-banner-container .img-container-product .details .text .content a{
	color: #000;
	text-decoration: none;
}

/*END CONTENT*/

@media only screen and (min-width : 320px) and (max-width : 480px) {
	.main-banner-container .img-container .text .content { top: 65%;}
	.main-banner-container .img-container .text .content p { font-size: 20px;}
	.main-banner-container .img-container-introduction { width: 100%;}
	.main-banner-container .img-container-product { width: 100%; }
	.main-banner-container .img-container-product .details { width: 100%;}
	.main-banner-container .img-container-product .image-layer { display: none !important; }
	.main-banner-container .img-container-gallery { width: 100%; }

	.content-slide {width: 83vw; top: 14.5%; line-height: 0.9;}
	.content-slide p { font-size: 40px;}
	.content-slide-2 {width: 83vw; top: 14.5%; line-height: 0.9;}
	.content-slide-2 p { font-size: 40px; }

	.content-slide-3 {margin-left: 0px; top: 32%;}
	.content-slide-3 p { font-size: 25px; }
	.content-slide-3 img {margin-top: -10px; height: 45px; width: 120px;}
	.content-slide-3 .view-details { padding:5px 5px 5px 5px; margin-top: 10px; width: 120px;}
}

@media only screen and (min-width : 480px) and (max-width : 800px) { 
	.main-banner-container .img-container-introduction { width: 100%;}
	.main-banner-container .img-container-product { width: 100%;}
	.main-banner-container .img-container-gallery { width: 100%;}

	.content-slide {width: 90vw; top: 22.5%; line-height: 0.9;}
	.content-slide p { font-size: 40px;}
	.content-slide-2 {width: 90vw; top: 32.5%; line-height: 0.9;}
	.content-slide-2 p { font-size: 40px; }

	.content-slide-3 {margin-left: 0px; top: 35%;}
	.content-slide-3 p { font-size: 40px; }
	.content-slide-3 img {margin-top: -10px; height: 45px; width: 150px;}
	.content-slide-3 .view-details { padding:10px 10px 10px 10px; margin-top: 10px;}
}

@media only screen and (min-width : 768px) and (max-width : 1280px) { 
	.main-banner-container .img-container-introduction { width: 100%;}
	.main-banner-container .img-container-product { width: 100%;}
	.main-banner-container .img-container-gallery { width: 100%;}

	.content-slide {width: 95vw; top: 33%;}
	.content-slide p { font-size: 60px;}
	.content-slide-2 {width: 95vw; top: 36.5%;}
	.content-slide-2 p { font-size: 60px; }
	
	.content-slide-3 {margin-left: 80px; top: 30%;}
	.content-slide-3 p { font-size: 50px; }
	.content-slide-3 img {margin-top: -10px; height: 53px; width: 223px;}
}

@media (max-width: 976px) {
	.swiper-container .arrow-left {display: none;}
	.swiper-container .arrow-right {display: none;}
}