* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body{
	font-family: 'Lato','Microsoft JhengHei';
	font-size: 16px;
	margin: 0;
	position:relative;
    background: rgba(247,243,242,1);
}

.header-box {
    width:100%; display:flex; justify-content: center; align-items: center; flex-direction: column; margin-top: 56px; margin-bottom: 32px
}

.header-box h2 {
    font-weight:bold; font-size:36px; padding: 0 5px; color: #384359;
}

.header-box h6 {
    padding: 0 5px; color: #5d7079;
}

@media only screen and (max-width: 960px) {
    .header-box h2 {
        font-size: 20px;
        text-align: center !important;
    }
}

.landing-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    outline: 0;
    font-size: 14px;
    padding-left: 16px;
    padding-right: 16px;
    height: 32px;
	width:100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
    cursor: pointer;
    padding-top: 0;
    padding-bottom: 0;
}

.landing-btn:hover {
    text-decoration: none;
}

.landing-btn:focus {
    outline: 0;
}

.landing-btn-primary {
    color: white;
    background-color: #008EEC;
    font-weight: 600;
    border: 1px solid #008EEC;
    box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
    transition: all 0.1s ease;
}

.landing-btn-primary:hover {
    background-color: #0080d4;
    box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
}

.landing-btn-secondary-ghost {
    background-color: rgba(255,255,255,0);
    color: rgb(60, 66, 87);
    border: 1px solid #d8d9dd;
}

.navbar {
    box-shadow: 0 2px 5px 0 rgba(60,66,87, 0.08), 0 1px 1px 0 rgba(0,0,0, 0.12);
}

.navheader{
	width: 100%;
	height: 100px;
	position: fixed;
  	align-items: flex-end;
  	justify-content: flex-end;
  	top: 0;
  	left: 0;
  	z-index: 9999;
  	background-color: #FFFFFF;
  	display: flex;
  	line-height: 50px;
}
.container{
	max-width: 1150px;
	width: 100%;
	margin: 0 auto;	
	margin-top:20px;
    padding-left: 0px;
    padding-right: 0px;
}
.table-plan{
	display: table;
	border: 1px solid #ECECEC;
	width: 950px;
    z-index: 999;
    color: #384359;
}
.table-pricing{
	display: table;
	border: 1px solid #ECECEC;
	width: 950px;
}
.table-buy{
	display: table;
	width: 1032px;
	/* margin: 20px 0 200px 0; */
	margin: 20px 0 20px 0; 
}
.table-buy .col-content-5{
	width: calc(950px / 5);
	min-width: calc(950px / 5);
}
.table-buy .col-title{
	width: calc(950px / 5 - 30px);
	min-width: calc(950px / 5 - 30px);

}
.sticky {
	position: fixed;
  	top: 0px;
  	margin-top: 0;
}
.col-pricing-5, .col-content-5{
	display: table-cell;
	width: calc(950px / 5);
	min-width: calc(950px / 5);
	border-bottom: 1px solid #f2f2f2;
	border-left: 1px solid #f2f2f2;
	text-align: center;
}
.col-pricing-5{
	height: 60px;
}
.row-collaspe{
	background: #F1F9FF;
    transition: background 0.2s ease;
    cursor: pointer;
}

.row-collaspe:hover {
/*    background: #F4F8FF;*/
}

.row-pricing, .row-content{
	background: #FFFFFF;
}
.row-buy{
	background: transparent;
}
.row-buy .col-content-5{
	border:none;
}
.col-heading{
	width: 100%;
	border-bottom: 1px solid #f2f2f2;
	padding-left: 20px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
	font-weight: 600;
	color: #028EEC;
    display: flex;
    align-items: center;
}
.col-heading, .col-content-5{
/*	height: 45px;*/
/*	line-height: 45px;*/
}
.col-title{
	text-align: left;
	color: #707070;
	padding-left: 20px;
	padding-right: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
	width: calc(950px / 5);
	min-width: calc(950px / 5);
}
.col-content-5{
	color: #1a1f36;
    line-height: 1;
    padding: 16px 20px;
} 
.plan-name{
/*	margin: 15px 0 12px 0;*/
    color: #a3acb9;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px !important;
    letter-spacing: 1.5px;
}
.month-pricing, .year-pricing{
	color: #707070;
}
.plan-name, .month-pricing span, .year-pricing span{
	font-size: 16px;
}
.month-pricing span, .year-pricing span{
	color: #404040;
}
.free-plan .plan-name{
/*	color: #74B9D2;*/
}
.best-seller-plan .plan-name{
/*	color: #8AC441;*/
}
.economical-plan .plan-name{
/*	color: #FDCA01;*/
}
.business-plan .plan-name{
/*	color: #F7402D;*/
}
.enterprise-plan .plan-name{
/*	color: #F7402D;*/
}
.bespoke-plan .plan-name{
/*	color: #F7402D;*/
}

.free-plan span{
/*	font-weight: 600;*/
}
.best-seller-plan span{
/*	font-weight: 600;*/
}
.economical-plan span{
/*	font-weight: 600;*/
}
.business-plan span{
/*	font-weight: 600;*/
}
.enterprise-plan span{
/*	font-weight: 600;*/
}
.bespoke-plan span{
	font-weight: 600;
}

.col-content .checked{
	width: 14px;
	vertical-align: middle;
}
.row-content:hover{
	background: #F4F8FF;
}
.row-content.row-buy:hover{
	background: none;
}
.trial-one-month{
	background-color: #FEAF3C;
	color: #FFFFFF;
	font-size: 16px;
	border-radius: 5px;
	border: none;
	padding: 8px 16px;
	cursor: pointer;
}
.trial-one-month:hover{
	opacity: 0.8;
}
.trial-one-month:focus{
	outline: none;
}
.buy-plan{
	width: 90%;
	height: 40px;
	border: none;
	font-size: 16px;
	border-radius: 5px;
}
.buy-plan a.buy-plan-a{
	color: #FFFFFF;
}
.buy-plan:focus{
	outline: none;
}
.buy-free{
	background: #74B9D2;
	color: #FFFFFF;
	cursor: pointer;
}
.buy-best-seller{
	background: #8AC441;
	color: #FFFFFF;
	cursor: pointer;
}
.buy-economical{
	background: #FDCA01;
	color: #FFFFFF;
	cursor: pointer;
}
.buy-business-plan{
	background: #F7402D;
	color: #FFFFFF;
	cursor: pointer;
}
.choose-plan{
	display: none;
}
.buy-plan-a:hover{
/*	opacity:0.5;*/
}

.month-year-toggle {
    display:flex;justify-content: center; align-items: center;
}

.month-year-toggle-text {
    font-size: 14px;
    margin-bottom: 8px;
}

.best-seller-p, .economical-p, .business-p, .enterprise-p, .enterprise-plus-p, .bespoke-p {
		display: table-cell;
}

.col-title span, .month-pricing, .year-pricing, .col-content, .trial-one-month{
    font-size: 14px;
    line-height:1.5;
}

@media only screen and (max-width: 1154px){
	.container, .table-plan, .table-pricing{
		width: 100% !important;
	}
	.col-pricing-5, .col-content-5{
/*		width: calc(900px / 6);*/
		min-width: calc(100% / 6);
	}
	.col-title span, .month-pricing, .year-pricing, .col-content, .trial-one-month{
		font-size: 14px;
	}
	.plan-name, .month-pricing span, .year-pricing span{
/*		font-size: 22px;*/
	}
	.col-title{
/*		width: calc(900px / 6 - 30px);*/
/*		min-width: calc(900px / 6 - 30px);*/
		display: table-cell;
	}
	.table-buy{
		display: table;
		width: 907px;
		margin: 20px 0 200px 0;
	}
	.table-buy .col-content-5{
		width: calc(902px / 6);
		min-width: calc(902px / 6);
	}
	.table-buy .col-title{
		width: calc(902px / 6 - 30px);
		min-width: calc(902px / 6 - 30px);
	}
}
/*
@media only screen and (max-width: 960px){
	
	.landing-btn-primary {
		font-size: 12px;
	}
	
	.plan-name, .month-pricing span, .year-pricing span{
		font-size: 20px;
	}
	.container, .table-plan, .table-pricing{
		width: 900px;
	}
	.col-pricing-5, .col-content-5{
		width: calc(900px / 6);
		min-width: calc(900px / 6);
	}
	.col-title{
		width: calc(900px / 6);
		min-width: calc(900px / 6);
	}
	.r-1{
		line-height: 30px;
	}
	.table-buy{
		display: table;
		width: 900px;
		margin: 20px 0 200px 0;
	}
	.table-buy .col-content-5{
		width: calc(900px / 6);
		min-width: calc(900px / 6);
	}
	.table-buy .col-title{
		width: calc(900px / 6);
		min-width: calc(900px / 6);
	}
}
*/
@media only screen and (max-width: 960px){
	
    .table-plan {
       
    }
    
    .container, .table-pricing, .table-buy{
		width: 100% !important;
		margin: 5px auto;
	}
	.container{
		margin-top: 10px;
	}
	.choose-plan{
		position: sticky;
		display: block;
		width: 100%;
		top: 0px;
		
	}
	.choose-plan a{
		display: inline-block;
		background: #FFFFFF;
		border: none;
		float: left;
		width: 20%;
		line-height: 50px;
		height: 50px;
		text-align: center;
		text-decoration: none;
		color: #707070;
		font-size: 16px;
	}
	.choose-plan a:focus{
		outline: none;
	}
	.choose-plan #free{
		color: #74B9D2;
		border-bottom: 3px solid #74B9D2;
	}
	.choose-plan #free:hover{
		color: #74B9D2;
		border-bottom: 3px solid #74B9D2;
	}
	.choose-plan #best-seller:hover, .choose-plan #best-seller.active{ 
		color: #8AC441;
		border-bottom: 3px solid #8AC441;
	}
	.choose-plan #economical:hover, .choose-plan #economical.active{
		color: #FDCA01;
		border-bottom: 3px solid #FDCA01;
	}
	.choose-plan #business:hover, .choose-plan #business.active{
		color: #F7402D;
		border-bottom: 3px solid #F7402D;
	}
	.row-content{
		border-bottom: 1px solid #f2f2f2;
        transition: background 0.2s ease;
	}	
	.free-p.hide, .best-seller-p.hide, .economical-p.hide, .business-p.hide, .enterprise-p.hide, .enterprise-plus-p.hide{
		display: none;
	}
	.col-pricing-5 {
		width: 50vw;
	}
	.col-title, .table-buy .col-title{
		width: 50vw;
		border-bottom: none;
	}
	.col-content, .table-buy .col-content{
		width: 50%;
		min-width: 50%;
		border-bottom: none;
	}
	.cs-title .col-content{
		height: 90px;
		vertical-align: top;
	}
}
@media only screen and (max-width: 550px){
	.choose-plan{
		width: 100%;
		overflow-x: scroll;
	}
	.choose-plan .scroll-box{
		width: 100%;
	}
	.choose-plan a{
		width: calc(100% / 5);
		color: #707070;
		font-size: 16px;
	}
	::-webkit-scrollbar {
    	width: 0px;  /* Remove scrollbar space */
    	background: transparent;  /* Optional: just make scrollbar invisible */
	}
}
@media only screen and (max-width: 550px){
	
	#fancybox-wrap{
		width:100%!important;
		height:100vh!important; 
		top:0px!important;
		left:0px!important;
		padding:0px!important;
	}
	#fancybox-content{
		width:calc(100% - 20px)!important;
		height:calc(100vh - 20px)!important;
	}
	#fancybox-close{
		top:0px!important;
		right:0px!important;
	}
}

.feature-rows {
/*    display: none;*/
}

a:hover {
    text-decoration: none !important;
}

.card-pricing {
    display: flex;
    flex-direction: column;
/*    align-items: center;*/
    padding: 12px;
}

.plan-price {
    line-height: 1.25;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plan-get {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.plan-upgrade-existing {
    margin: 4px 0;
    cursor: pointer;
}

.plan-upgrade-existing:hover {
    text-decoration: none;
}

.plan-upgrade-existing span {
    color: #0080d4;
    font-size: 13px;
}

.plan-upgrade-existing span:hover {
    border-bottom: 1px solid #0080d4;
    text-decoration: none;
}

.m_price, .y_price_m, .y_price_y {
    font-size: 14px;
}

.price-amount {
    font-size: 36px;
    vertical-align: middle;
}

.y_price_y {
    font-size: 14px;
    color: #a3acb9;
}

/* PLUS-MINUS TOGGLE */
.opened {
  opacity: 1;
}

.opened .vertical {
    transition: all 0.4s ease-in-out;
    transform: rotate(90deg);
 }

.opened .horizontal {
    transition: all 0.4s ease-in-out;
    transform: rotate(90deg);
    opacity: 0;
}

.closed .vertical {
    transition: all 0.4s ease-in-out;
    transform: rotate(-90deg);
}

.closed .horizontal {
    transition: all 0.4s ease-in-out;
    transform: rotate(-90deg);
    opacity: 1;
}

.circle-plus {
/*    height: 4em;*/
/*    width: 4em;*/
/*    font-size: 1em;*/
/*    opacity: .7;*/
    display: inline-block;
    
}

.circle-plus .circle {
    position: relative;
    width: 1em;
    height: 1em;
    border-radius: 100%;
    border: solid 2px #008EEC;
    margin-right: 1em;
}
.circle-plus .circle .horizontal {
    position: absolute;
    background-color: #008EEC;
    width: 8px;
    height: 2px;
    left: 50%;
    margin-left: -4px;
    top: 50%;
    margin-top: -1px;
}
.circle-plus .circle .vertical {
    position: absolute;
    background-color: #008EEC;
    width: 2px;
    height: 8px;
    left: 50%;
    margin-left: -1px;
    top: 50%;
    margin-top: -4px;
}

/* SWITCH */
	.switch {
		position: relative;
		display: inline-block;
		width: 32px;
		height: 16px;
        margin-right: 8px;
	}
    
	.switch input { 
        display: none;
	}
	.slider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #CCC;
		-webkit-transition: .4s;
		transition: .4s;
        -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
        -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
        
	}
	.slider:before {
		position: absolute;
		content: "";
		height: 20px;
		width: 20px;
		left: -6px;
		bottom: -2px;
		background-color: rgba(255,255,255,1);
		-webkit-transition: 0.15s;
		transition: 0.15s;
        box-shadow: 0 0 4px rgba(0,0,0,0.16), 0 3px 4px rgba(0,0,0,0.23);
	}
    
	input:checked + .slider {
		background-color: #008EEC;
	}
	input:focus + .slider {
		box-shadow: 0 0 1px #2196F3;
	}
	input:checked + .slider:before {
		-webkit-transform: translateX(24px);
		-ms-transform: translateX(24px);
		transform: translateX(24px);
	}
	/* Rounded sliders */
	.slider.round {
		border-radius: 34px;
	}
	.slider.round:before {
		border-radius: 50%;
	}
	.y_price{
		display:none;
	}