@charset "utf-8";
/*top owl banner section*/

.product  .gridContainer .Title,
.top_owl_banner .product_intro_container .Title {
  font-size: 18px;
  color: #4d6680;
  font-weight: bold;
  margin: 10px 0 0;
  line-height: 24px;
}
.top_owl_banner .product_intro_container .Subtitle {
  font-size: 18px;
  color: #4d6680;
  font-weight: bold;
  line-height: 24px;
}

.top_owl_banner .product_intro_container .Description {
  font-size: 16px;
  color: #272222;
  /*   margin: 10px 0 0; */
  line-height: 22px;
  /*   padding: 0px 10px; */
}

.product .gridContainer .CreatedOn,
.top_owl_banner .product_intro_container .CreatedOn {
  font-size: 12px;
  color: #4d6680;
  margin: 10px 0 0;
  line-height: 24px;
}

.product .gridContainer .CreatedOn {
  margin: 10px 0 0;
}

.top_owl_banner .btn_container {
  padding: 10px 0;
/*   float: left; */
}

.top_owl_banner .PurchaseButton {
  /*width: 195px;*/
  margin: 0px 25px;
  background-color: #0fa0be;
  font-size: 18px;
  padding: 10px;
  font-weight: bold;
  text-align: center;
}

.image_container .icon_container {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 60px;
  text-align: center;
  background: #E54F50;
  color: #fff;
  font-size: 12px;
  padding: 4px;
}

.icon_container .icon {
  font-size: 30px;
  text-align: center;
  margin: 0 -5px -6px;
}

/* ----------------------------------------------------------- */
.top_owl_banner {
  width: 1180px;
  height: 400px;
  margin: 0 auto;
  padding: 25px;
}
.top_owl_banner .owl_container {
  height: auto;
}
.top_owl_banner .owl-carousel .owl-stage-outer, 
.top_owl_banner .owl_element {
  width: 1188px;
  height: 270px;
}
.top_owl_banner .owl_element .image_container,
.top_owl_banner .owl_element .product_intro_text {
  height: 100%;
  float: left;
}
.top_owl_banner .owl_element .image_container,
.top_owl_banner .owl_element .image_container .img-crop {
  width: 524px;
}
.top_owl_banner .owl_element .product_intro_text {
  width: calc(100% - 570px);
}
.top_owl_banner .owl_element .image_container  .img-crop img {
  width: auto;
  height: 100%;
/*   max-width: 524px; */
}
.top_owl_banner .owl_element .product_intro_text .product_intro_container {
  padding: 34px 40px;
}
.top_owl_banner .owl_element .product_intro_text .product_intro_container > * {
    margin: 12px 0;
}
/* tablet */
.tablet .top_owl_banner {
  width: 1024px;
  height: 350px;
  margin: 0 auto;
  padding: 20px 40px;
}
.tablet .top_owl_banner .owl_container {
  height: auto;
}
.tablet .top_owl_banner .owl-carousel .owl-stage-outer, 
.tablet .top_owl_banner .owl_element {
  width: 980px;
  height: 240px;
}

 .tablet .top_owl_banner .owl_element .image_container, 
 .tablet .top_owl_banner .owl_element .product_intro_text { 
    height: 100%;
 } 
 .tablet .top_owl_banner .owl_element .image_container, 
 .tablet .top_owl_banner .owl_element .image_container .img-crop,
 .tablet .top_owl_banner .owl_element .image_container  .img-crop img{ 
    height: 100%;
	width: auto;
 } 
 .tablet .top_owl_banner .owl_element .product_intro_text { 
    width: calc(100% - 490px);
 } 
 .tablet .top_owl_banner .owl_element .product_intro_text .product_intro_container { 
   padding: 8px 20px; 
   text-align: left;
}

/* mobile */
.mobile .top_owl_banner {
  width:  414px;
  height: auto;
  margin: 0 auto;
  padding: 25px 47px 30px;
}
.mobile .top_owl_banner .owl_container {
  height: auto;
}
.mobile .top_owl_banner .owl-carousel .owl-stage-outer, 
.mobile .top_owl_banner .owl_element {
 width:  320px;
  height: auto;
}

.mobile .top_owl_banner .owl_element .image_container,
.mobile .top_owl_banner .owl_element .product_intro_text {
  height: auto;
}
.mobile .top_owl_banner .owl_element .image_container,
.mobile .top_owl_banner .owl_element .image_container .img-crop{
  width: 100%;
}
.mobile .top_owl_banner .owl_element .product_intro_text {
  width: 100%;
}
.mobile .top_owl_banner .owl_element .image_container  .img-crop img {
  width: inherit;
/*   max-width: 524px; */
}
.mobile .top_owl_banner .owl_element .product_intro_text .product_intro_container {
  padding: 8px 40px;
}


.top_owl_banner .owl-dots.disabled {
		display: block;
}
@media only screen and (max-width: 359px)
{
    .mobile .top_owl_banner {
		padding: 20px 0;
	}
	.mobile .top_owl_banner .owl-dots.disabled {
		display: inline;
		position: relative;
		top: 0;
		left: 42%;
	}
}
@media only screen and (min-width: 360px) and (max-width: 375px)
{
	.mobile .top_owl_banner .owl_container {
		margin: 0 -18px;
	}
}


/*product section*/
.product .gridContainer{
    width: 1180px;
    margin: 0 auto;
    position: relative;
    clear: both;
    padding: 0 32px;	
}

.product .gridContainer .item{
    border: solid #f2f8f9;
    border-width: 0 1px 0 0;
	float: left;
	width: 279px;
	min-height: 430px;
}

.product .gridContainer>.item:nth-child(4n+1){
	border-width: 0px 0px 0px 0px;
}

.product .gridContainer .item a{
    display: block;
    padding: 15px;
    border: 2px #fff;
    border-style: solid;
}

.product .gridContainer  .image_container{
    width: 100%;
    position: relative;
    height: 100%;	
}

.product .gridContainer  .image_container .img-crop{
    overflow: hidden;
    position: relative;
    height: 100%;
    width: 100%;
}

.product  .gridContainer .image_container .img-crop img {
    height: 100%;
    width: 100%;
    display: block;
    margin: 0 auto;
}

.product .item .icon_container{
	top: auto;
	bottom: 0;
}

/*Mobile*/
.tablet .top_owl_banner,
.mobile .top_owl_banner{
	float: none;
    width: 100%;
}

.tablet .top_owl_banner .image_grid{
	width: 100%;
}

.mobile .top_owl_banner .image_grid{
	float: none;
	width: 100%;
}

.tablet .product .gridContainer,
.mobile .product .gridContainer{
	width: 100%;
}

.tablet .product .gridContainer .item,
.mobile .product .gridContainer .item{
    margin: 0 4.6%;
    width: 40.6%;
    border: none;
    min-height: 410px;
}

.mobile .product .gridContainer .item{
	margin: 0;
}

.mobile .product .gridContainer .item{
	width: 100%;
	min-height: 300px;
   
}

.tablet .top_owl_banner .product_intro_container{
    margin-left: 0;
    padding: 10px 20px 20px 20px;
    margin-bottom: 0;
    height: 250px;
    text-align: center;
}




.mobile .top_owl_banner .btn_container{
	float: none;
/* 	width: 42%;
    margin: 0 auto; */
}

.tablet .top_owl_banner .btn_container{
	float: none;
    width: 42%;
   /* margin: 0 auto;*/
}


.tablet .top_owl_banner .PurchaseButton
{
    width: 100%;
    background-color: #0fa0be;
    font-size: 18px;
    padding: 10px;
    font-weight: bold;
    text-align: center;
}




.tablet .top_owl_banner .product_intro_text{
    width: 100%;
	height:660px;
	
}


/*common*/
.news-section .icon-fontawesome-webfont-3 {
    color: #FFF;
    font-size: 18px;
    vertical-align: middle;
}

.news-section .icon-member-card-icon {
    color: #0fa0be;
    font-size: 35px;
    vertical-align: middle;
}

.news-section .icon-calendar{
	padding-right: 5px;
}

.news-section .icon_heading{
	display: table;
    /* margin: 0 0 20px 0;	 */
}

.news-section .icon_heading span{
    font-size: 28px;
    color: #0fa0be;
    margin: 0 4px;
    position: relative;
    display: table-cell;
    float: left;
}

.news-section .icon_heading .icon {
    font-size: 39px;
    position: relative;
    top: -7px;
    display: table-cell;
}

.news-section .owl-controls.clickable{
    /*position: absolute;
	right: 20px;
	bottom: 10px; */
}

.news-section .owl-theme .owl-controls .owl-page.active span, .news-section .owl-theme .owl-controls.clickable .owl-page:hover span
{
    /*	background: #0fa0be; */
}
.news-section .owl_container{
    /* width: 1086px;
    height: 270px; */
}

.news-section .owl-carousel .owl-stage-outer {
	height: 100%;
}

.news-section .item .image_container {}

.Title { font-size: 18px;
    color: #4d6680;
    font-weight: bold;
    margin: 10px 0 0;
    line-height: 24px;}
	

.promotion { width: 1180px; height: 100%; margin: 0 auto; padding: 25px 32px 10px;}

.promotion .item { 
    float:left; 
    padding:15px; 
    width:50%; 
    height:420px; 
    border : 1px solid #dadada; 
    border-radius : 10px;
    margin: 10px; 
    box-sizing: border-box;
    width: calc(50% - 20px); 
    position : relative;
  }
.promotion .item .item-link{
    position: absolute;
    inset: 0;   
    z-index: 1; 
}

.promotion .item .image_container {}

.promotion .Description {font-size: 16px; color: #272222; margin: 10px 0 0; line-height: 24px;}

.promotion .icon_container {
	position: absolute;
	left: 0;
	top: 0;
    min-width: 60px;
    text-align: center;
    background: #E54F50;
    color: #fff;
    font-size: 12px;
    padding: 4px;}
	
.promotion .img-crop img {     height: 100%; width: 100%; display: block; margin: 0 auto;}	
	
.promotion .gridContainer .image_container{
    width: 100%;
    position: relative;
}

.center-button{
	text-align: center;
	margin:20px 0;	
}
.btn-more-less{
	display: inline-block;
	padding: 0 0 0 20px;
	font-size: 24px;
	font-weight: bold;
	line-height: 60px;
	background: #f7941d;
	color: white;
	width: 300px;
	margin: 0 15px;
	cursor: pointer;
}

/**************Tablet*************/


.tablet .top_owl_banner .product_intro_container{
	margin-left: 0;
    padding: 10px 20px 20px 20px;
    margin-bottom: 0;
    height: 100%;
    text-align: center;
}

.tablet .promotion { width: 100%; height: 100%; margin: 0 auto; padding: 25px 32px 10px;}

.tablet .promotion .item { float:left; padding:15px; width:50%; height: 100%;}



/**************Mobile*************/

.mobile .top_owl_banner .product_intro_text{
    width: 100%;
	height: 100%;
	
}

.mobile .top_owl_banner .product_intro_container{
	margin-left: 0;
    padding: 10px 20px 20px 20px;
    margin-bottom: 0;
    height: 100%;
    text-align: center;
}


.mobile .promotion { width: 100%; height: 100%; margin: 0 auto; padding: 25px 32px 10px;}

.mobile .promotion .item { clear: both; padding:0px; width:100%; height:100%; padding-bottom:20px;}

.mobile .promotion .item .image_container {}

.mobile .promotion .Description {font-size: 16px; color: #272222; margin: 10px 0 0; line-height: 24px;}

.mobile .promotion .icon_container {position: absolute; min-width:60px; height:60px; bottom: 162px; text-align: center; background: #E54F50; color: #fff; font-size: 12px; padding: 4px;}

.mobile .promotion .img-crop img {     height: 100%; width: 100%; display: block; margin: 0 auto;}



/* Toast - Start */
/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 999; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
    visibility: visible; /* Show the snackbar */

/* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.3s 2.5s;
    animation: fadein 0.5s, fadeout 0.3s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}
/* Toast - End */