@media screen and ( max-width: 600px ) {
	html { margin-top: 0px !important; min-height: 100vh; }
	* html body { margin-top: 0px !important; }
}
@media (max-width: $screen-sm-max) {
	html{ padding-bottom: 50px; }
}
body {
	color: $color; line-height: 1.8; overflow-x: hidden;
	#sns_wrapper{
		> .wrap {
			width: 100%;
		}
	}
}
.btn:focus, .btn.focus, .btn:active:focus, .btn.focus:active, .btn.active:focus, .btn.active.focus,
*, a {
	&:hover,
	&:focus,
	&:active {
		outline: none;
	}
}
.label,
label{
	font-size: 100%; font-weight: inherit; color: inherit;
}
a {
	color: $link-color; @include transition(all 0.25s ease-out 0s);
	&:before{ @include transition(all 0.25s ease-out 0s); }
	&:hover{
		text-decoration: none;
		color: $color1;
	}
	&.underline{ text-decoration: underline; 
		&:hover{ }
	}
}
.text-bold{ font-weight: bold;
	i{ margin-left: 5px; }
}
p{ margin-bottom: 18px;}
ul, ol {
    margin-bottom: 18px; margin-top: 0; padding-left: 25px;
    ul, ol{
    	padding-left: 30px;
    }
    li{
    	padding: 3px 0;
    	&:first-child{ padding-top: 0px; }
    	&:last-child{ padding-bottom: 0px; }
    }
}
dl:not(.gallery-item){
	margin: 0 20px;
	dt{
		font-weight: bold;
	}
	dd{
		margin: 0 0 15px;
	}
}
address{
	margin: 0 0 20px; font-style: italic;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	margin-top: 0; margin-bottom: 12px; color: $link-color; font-weight: bold; line-height: 1.42857;
}
h1 { font-size: 3em; }
h2 { font-size: 2.5em; }
h3 { font-size: 1.7142em; }
h4 { font-size: 1.4285em; }
h5 { font-size: 1.1428em; }
h6 { font-size: 0.8571em; }
label {
	font-weight: inherit; cursor: pointer; margin: 0 5px 0 0;
	&.required {
		&:before {
			content: "*";
			color: red;
			font-size: 14px;
			position: relative;
			line-height: 12px;
		}
	}
}

legend{
	font-weight: inherit; margin: 15px 0 15px; padding: 0 0 5px; color: $link-color; font-size: 130%;
}
blockquote{
	margin: 0 0 15px; padding: 5px 25px; line-height: 1.7; font-size: 1em;
	border: none; position: relative;
	> *:not(cite){ color: $link-color; font-size: 1.1428em; font-weight: bold; }
	cite{ font-size: 1em; font-weight: bold; text-transform: uppercase; font-style: normal; color: $low-color; display: block; margin-top: 18px; 
		a { color: inherit; 
			&:hover{ color: $color1; }
		}
	}
	&:before{ position: absolute; content: ""; height: calc(100% - 10px); width: 5px; background: $strong-color; left: 0px; top: 5px; }
	&.has-text-align-right{
		&:before{ left: auto; right: 0px; }
	}
}
pre{ border-color: $base-border-color; padding: 25px; white-space: pre-wrap; }

select{
	height: 50px; line-height: 50px; margin: 0; padding: 4px 10px;
    border: 1px solid $base-border-color; cursor: pointer;
    @include border-radius(0px);@include transition(all 0.25s ease-out);
    &:focus{border-color: $hover-border-color; @include box-shadow(none);}
}
input, button, select, textarea{
	max-width: 100%;
}
input[type="checkbox"], 
input[type="radio"]{
	margin: 0 8px 0 0;
}
#searchform input#s,
input[type="password"],
input[type="email"],
input[type="search"],
input[type="text"],
input.input-text{
	@include border-radius(4px); padding: 0 15px; height: 50px; line-height: 48px; @include transition(all 0.25s ease-out); color: $color; border: 1px solid $base-border-color;
	@include box-shadow(none); vertical-align: middle; @include placeholder($low-color);
	&:hover,
	&:focus{
		color: inherit; border-color: $base-border-color; @include box-shadow(none);
	}
}
.uppercase{
	text-transform: uppercase;
}
textarea{
	@include border-radius(4px);@include box-shadow(none); padding:11px 15px;@include transition(all 0.25s ease-out); 
	border: 1px solid $base-border-color; resize: none; @include placeholder($low-color);
	&:focus{ 
		@include box-shadow(none);
	}
}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce .hidden-title-form a.hide-title-form,
article.type-attachment .more-link,
article.type-page .more-link,
article.type-post .more-link,
.btn,
.comment-respond #submit, 
#searchform #searchsubmit,
input[type="submit"], button[type="submit"],
input[type="button"],
.button,
button{
	@include inline-block(); padding: 0px 30px; height: 50px; line-height: 50px; border: none; background: $button-bg-color; color: #FFF; font-weight: bold; 
	text-transform: uppercase; cursor: pointer;
	font-size: 1em; @include transition(all 0.25s ease-out); @include border-radius(4px); vertical-align: middle; white-space: normal;
	&:hover,
	&:focus{
		color: #fff; text-decoration: none; background-color: $color1; 
	}
}
#sns_wrapper .vc_btn3-container.dbea-btn .vc_btn3{
	@include inline-block(); padding: 0px 45px; height: 50px; line-height: 50px; border: none; background: $link-color; color: #FFF !important; text-transform: uppercase; cursor: pointer;
	font-size: 1em !important; font-weight: bold; @include transition(all 0.25s ease-out); @include border-radius(5px); vertical-align: middle; white-space: normal;
	&:hover,
	&:focus{
		color: #FFF !important; background: $color1 !important; border: none; text-decoration: none;
	}
}
#sns_wrapper .vc_btn3-container.dbea-btn-white .vc_btn3{
	@include inline-block(); padding: 0px 50px; height: 60px; line-height: 60px; border: none; background: #FFF; color: $link-color !important; text-transform: uppercase; cursor: pointer;
	font-size: 1em !important; font-weight: bold; @include transition(all 0.25s ease-out); @include border-radius(5px); vertical-align: middle; white-space: normal;
	&:hover,
	&:focus{
		color: #FFF !important; background: $color1 !important; border: none; text-decoration: none;
	}
}
.color-text{ color: $color; }
a:focus,
input:focus,
button:focus,
select:focus,
a:visited,
input:visited,
button:visited,
select:visited{
	outline: none !important
}

#sns-totop {
    width: 40px; height: 40px; border: none; bottom: 100px; right: 50px; text-decoration: none; position: fixed;
    overflow: hidden; z-index: 40; display: block; text-align: center; background: $button-bg-color; @include border-radius(4px); @include opacity(0); visibility: hidden;
    @include transition(all 0.25s ease-out 0s);
    &:before{
    	@include font-ionicons('\f366', 40px); position: absolute; top: 0; left: 0; font-size: 24px; text-align: center; color: #fff; @include transition(all 0.25s ease-out 0s);
    	@include scale(1);
    	
    }
    &.active{  @include opacity(1); visibility: visible; }
    &:hover{
    	&:before{ background: $color1;
    		-webkit-animation: heartBeat 1s ease-in-out infinite;
		    -moz-animation: heartBeat 1s ease-in-out infinite;
		    -o-animation: heartBeat 1s ease-in-out infinite;
		    animation: heartBeat 1s ease-in-out infinite;
    	}
    }
		@media(max-width: $screen-md-max){
			position: fixed; left: auto; right: 30px; bottom: 180px; 
		}
}

.icon-chevron-right,
.icon-th-large,
.icon-th-list,
.icon-home,
.icon-remove {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome; // shortening font declaration
	font-size: inherit; // can't have font-size inherit on line above, so need to override
	text-rendering: auto; // optimizelegibility throws things off #1094
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

}
.icon-remove:before { content: "\f00d"; }
.icon-home:before { content: "\f015"; }
.icon-th-large:before { content: "\f009"; }
.icon-th-list:before { content: "\f00b"; }
.icon-chevron-right:before { content: "\f054"; }
// select2
.select2-container--default { @include transition(none);
	.select2-selection--single{
		border: 1px solid $base-border-color; @include border-radius(0px); height: 50px;
		.select2-selection__rendered{
			line-height: 50px; padding: 0 30px 0 15px;
		}
		.select2-selection__arrow{
			top: 12px; right: 8px;
		}
	}
}
.select2-dropdown{
	padding: 10px 10px 10px; border: 1px solid $base-border-color !important; @include border-radius(0px);
	.select2-results__option{ padding: 3px 8px; }
}
.select2-container--default .select2-search--dropdown{
	padding: 0; margin: 0 0 10px;
	.select2-search__field{ border-color: $base-border-color; padding: 0 15px; height: 44px; line-height: 44px; }
} 
// Float, align responsive
.align-center{
	text-align: center;
}
.align-left{
	text-align: left;
}
.align-right{
	text-align: right;
}
@media (min-width: $screen-lg-min) {
	.float-lg-left{
		float: left;
	}
	.float-lg-right{
		float: right;
	}
	.align-lg-center{
		text-align: center !important;
	}
	.align-lg-left{
		text-align: left !important;
	}
	.align-lg-right{
		text-align: right !important;
	}
}
@media (max-width: $screen-md-max) {
	.float-md-left{
		float: left;
	}
	.float-md-right{
		float: right;
	}
	.align-md-center{
		text-align: center !important;
	}
	.align-md-left{
		text-align: left !important;
	}
	.align-md-right{
		text-align: right !important;
	}
}
@media (max-width: $screen-sm-max) {
	.float-sm-left{
		float: left;
	}
	.float-sm-right{
		float: right;
	}
	.align-sm-center{
		text-align: center !important;
	}
	.align-sm-left{
		text-align: left !important;
	}
	.align-sm-right{
		text-align: right !important;
	}
}
@media (max-width: $screen-xs-max) {
	.float-xs-left{
		float: left;
	}
	.float-xs-right{
		float: right;
	}
	.align-xs-center{
		text-align: center !important;
	}
	.align-xs-left{
		text-align: left !important;
	}
	.align-xs-right{
		text-align: right !important;
	}
}
@media (max-width: $screen-phone) {
	.float-phone-left{
		float: left;
	}
	.float-phone-right{
		float: right;
	}
	.align-phone-center{
		text-align: center !important;
	}
	.align-phone-left{
		text-align: left !important;
	}
	.align-phone-right{
		text-align: right !important;
	}
}
// Tooltip
.tooltip.in {
	z-index: 1200; @include opacity(1);
}
.tooltip-inner {
  background-color: rgba( $color1, 1); padding: 7px 12px; font-weight: bold;
  @include border-radius(3px); box-shadow: -1px 0 10px rgba(0,0,0,0.4);
}
.tooltip{
  &.top .tooltip-arrow {
    border-top-color: rgba( $color1, 1);
  }
  &.top-left .tooltip-arrow {
    border-top-color: rgba( $color1, 1);
  }
  &.top-right .tooltip-arrow {
    border-top-color: rgba( $color1, 1);
  }
  &.right .tooltip-arrow {
    border-right-color: rgba( $color1, 1);
  }
  &.left .tooltip-arrow {
    border-left-color: rgba( $color1, 1);
  }
  &.bottom .tooltip-arrow {
    border-bottom-color: rgba( $color1, 1);
  }
  &.bottom-left .tooltip-arrow {
    border-bottom-color: rgba( $color1, 1);
  }
  &.bottom-right .tooltip-arrow {
    border-bottom-color: rgba( $color1, 1);
  }
}
@media (max-width: $screen-xs - 1) {
	@include make-grid(phone);
}
// Sticky post
.sticky {
	background: none; padding: 0px; position: relative;
}
.post-password-form{
	@media (max-width: $screen-phone) {
		label{
			input[type="password"]{ display: block; margin: 10px 0 15px; }
		}
		input[type="submit"]{
			display: block;
		}
	}
}
header.archive-header{
	margin-bottom: 30px; border-bottom: 1px solid $line-border-color;
}
img{
	max-width: 100%;
	height: auto;
}
.owl-carousel {
	.owl-item img{
		width: auto;
	}
}

[class^="ion-"]:before, [class*=" ion-"]:before {   
	font-family: Ionicons; font-size: 1em; font-style: normal; margin: 0;
}
// Comment
.sns-comments{
	margin: 75px 0 0; position: relative;
	&.no-comment{
		margin-top: 90px;
		#respond{ margin-top: 0px; }
	}
	h3#comments{
		margin: 0 0 26px; font-size: 2em; font-weight: bold; color: $link-color; line-height: 1.1; position: relative;
		@media (max-width: $screen-phone){ font-size: 1.5em; }
	}
	.comment-reply-title{
		margin: 0 0 18px; font-size: 2em; font-weight: bold; color: $link-color; line-height: 1.1; position: relative;
		@media (max-width: $screen-phone){ font-size: 1.5em; }
	}
	.commentlist{
		@include ulclear(); margin: 0; 
		& + .navigation{ margin-top: 15px; }
		li.pingback,
		li.trackback,
		li.comment{ list-style: none; padding: 0; 
			.comment-body{
				@include clearfix(); position: relative; padding: 30px 0 30px; margin: 0; border-top: 1px dashed $base-border-color;
				.comment-user-meta{
					display: block; padding: 0 0 0 105px; position: relative;
					img.avatar{
						float: left;margin: 0 25px 0 0;vertical-align: top; @include border-radius(5px);
						position: absolute; left: 0px; top: 0px;
					}
					.comment-head{
						margin: 0 0; position: relative; @include clearfix();
						h4.comment-user{
							margin: 0 0; text-transform: none; color: $low-color; font-size: 1em; text-transform: none; font-weight: normal;
							.date{
								text-transform: none; position: relative;
								color: $low-color; margin: 0 0 0 11px; padding: 0 0 0 16px; font-weight: normal;
								&:before{ content: ""; position: absolute; left: 0; top: calc(50% - 6px); height: 12px; width: 1px; background: $low-color; }
							}
						}
					}
					.comment-meta{ margin: 20px 0 0; font-size: 1em; @include clearfix(); 
						.comment-edit-link,
						.comment-reply-link{
							text-transform: uppercase; color: $link-color; display: inline-block; position: relative; font-weight: bold;
							padding: 0 12px; line-height: 26px; height:26px; @include transition(all 0.25s ease-out); 
							background: none; border: none; margin: 0 0 0 15px; font-size: 0.8571em; display: inline; float: left;
							&:first-child{ margin-left: 0; }
							&:before{ position: absolute; content: ""; height: 24px; width: 24px; background: $color1; @include border-radius(100%);
								left: 0px; top: 0px; z-index: -1;
							}
							&:hover{ color: #FFF; background: none;
								&:before{
									height: 100%; width: 100%; top: 0px; @include border-radius(4px); 
								}
							}
							&:focus{
								color: $color1; box-shadow: none;
							}
						}
						> * {
							&:first-child{  margin: 0 0; }
						}
					}
					.comment-content{
						position: relative; margin: 13px 0 0;
						p:last-child{margin: 0 0;}
						ol,
						ul{
							padding: 0 0 0 25px; margin: 0 0 25px;
							ol,
							ul{ margin: 0 0; padding: 0 0 0 30px; }
						}
					}
				}
			}
			@media (max-width: $screen-xs-max){
				.comment-body{
					.comment-user-meta{ padding: 0 0 0 65px;
						img.avatar{max-width: 50px; margin-right: 15px;}
					}
					&:before{
						display: none;
					}
				}
			}
		}
		li.trackback,
		li.pingback{
			.comment-body{
				.comment-user-meta{ padding-left: 0px; 
				}
			}
		}
		> li:first-child{
			> .comment-body:first-child{
				padding-top: 0; border-top: none;
			}
		}
		> li:last-child{
			> .comment-body:last-child{
				padding-bottom: 28px; border-bottom: none;
			}
		}
		.children{
			position: relative; margin-left: 35px; padding-left: 35px;
			@media (max-width: $screen-xs-max){
				margin-left: 25px; padding-left: 25px;
			}
			@media (max-width: $screen-phone){
				margin-left: 15px; padding-left: 15px;
			}
			li{
				.comment-body{}
			}
		}
		#respond{
			margin: 10px 0 45px;
			.comment-reply-title{
				margin-bottom: 15px;
			}
			#cancel-comment-reply-link{
				text-transform: uppercase; color: $link-color; display: inline-block; position: relative; font-weight: bold;
				padding: 0 12px; line-height: 26px; height:26px; @include transition(all 0.25s ease-out); 
				background: none; border: none; margin: 0 0 0 15px; display: inline-block; position: relative; top: -3px;
				&:before{ position: absolute; content: ""; height: 24px; width: 24px; background: $color1; @include border-radius(100%);
					left: 0px; top: 0px; z-index: -1;
				}
				&:hover{ color: #FFF; background: none;
					&:before{
						height: 100%; width: 100%; top: 0px; @include border-radius(4px); 
					}
				}
			}
		}
		+ #respond{ margin: 45px 0 0; }
	}
	.navigation{
		margin: 0 0; padding: 0px 0 0; @include clearfix(); border: none;
		& + #respond{ margin-top: 55px; }
	}
	small{
		font-size: 12px; margin: 0 0 0 5px;
		a{ text-transform: uppercase; color: $link-color; font-weight: bold;
			&:hover{ color: $color1; }
		}
	}
	#respond{
		margin: 73px 0 0;
	}
	.comment-form{
		label{
			
		}
		.logged-in-as,
		.comment-notes{
			margin-bottom: 15px; color: $color;
			a{ color: inherit; 
				&:hover{ color: $color1; }
			}
		}
		.comment-form-cookies-consent{ margin-bottom: 25px; }
		.logged-in-as + .your-comment{ margin-bottom: 0px; }
		.form-submit{
			margin: 0;
			clear: both;
			input#submit{
				display: inline; vertical-align: middle;
				&:hover{ background: $color1; }
			}
		}
		input[type="text"],
		textarea{
			max-width: 100%; width: 100%; margin-bottom: 20px; @include placeholder($low-color); border: 1px solid $base-border-color; background:#f9f9f9; padding: 0 20px;
		}
		textarea{
			margin-bottom: 20px; height: 220px !important; padding: 12px 20px;
		}
		.form-allowed-tags{
			margin-bottom: 10px;
		}
		.your-comment{
			@include clearfix();
		}
		.text-field{
			margin: 0 -10px; @include clearfix();
			> div{ width: 33.33%; padding: 0 10px; float: left; 
				@media(max-width: $screen-phone){
					width: 100%;
				}
			}
			input{
				margin-bottom: 20px; height: 50px;
			}
		}
	}
	p.no-comments{ margin-top: 70px; }
}
.wp-caption{max-width: 100%}
// Pageination
.navigation{
	padding: 0 0; margin: 0 0 100px; text-align: center;
	h2,h4{ font-size: 1em; text-transform: uppercase; font-weight: bold; }
	.screen-reader-text{
		display: inline-block; line-height: 25.2px; color: $link-color; margin: 0 5px 0 0; vertical-align: middle;
		font-size: 1em;
		position: static !important;
		width: auto;
		height: 25.2px;
		clip-path: none;
	}
	.pagination{
		margin: -5px 0; color: $color; vertical-align: middle;
		a{
		    text-align: center; margin: 2.5px 2.5px; padding: 0 0; display: inline-block; width: 28px; height: 28px; line-height: 28px;
	    	float: left; font-size: 1em; color: #FFF; background: $button-bg-color;
	    	border: none; @include border-radius(2px);
	    	&:hover{ background: $color1; }
		}
		span.page-numbers{
			text-align: center; display: inline-block; float: left;
		}
		span.current{
			text-align: center; margin: 2.5px 2.5px; padding: 0 0; display: inline-block; width: 28px; height: 28px; line-height: 28px;
    	float: left; font-size: 1em; color: #FFF; background: $color1;
    	border: none; @include border-radius(2px);
		}
		.next,
		.prev{
			position: relative; font-size: 0px; margin: 2.5px 2.5px; width: 28px; height: 28px;
			&:hover{ background: $color1; }
		}
		.next{
			&:after{ @include font-ionicons('\f10a', 28px); font-size: 16px; line-height: 28px; position: absolute; top: 0px; left: 0px; }
		}
		.prev{
			&:before{ @include font-ionicons('\f107', 28px); font-size: 16px; line-height: 28px; position: absolute; top: 0px; left: 0px; }
		}
		> * {
			margin: 2.5px 2.5px; text-transform: uppercase;
			&:first-child{ margin-left: 0px; }
			&:last-child{ margin-right: 0px; }
		}
	}
}

// navigation-ajax
.navigation-ajax{
	display: block;
	text-align: center;
	margin: -30px 0 100px;
	#navigation-ajax{
		@include inline-block(); padding: 0px 25px; height: 50px; line-height: 50px; border: 1px solid $base-border-color; background: #f5f5f5; color: $link-color; font-weight: normal; 
		text-transform: uppercase; cursor: pointer;
		font-size: 1em; @include transition(all 0.25s ease-out); @include border-radius(0px); vertical-align: middle; white-space: normal;
		&:hover{
			color: #fff !important; text-decoration: none; background-color: $color1; border-color: $color1;
		}
	    &.auto-load{ @include opacity(0); }
	    &.snsnav-active{ @include opacity(1); background: $color1; border-color: $color1; color: #FFF; cursor: wait;
	    	&:before{
	    		@include font-ionicons('\f29c', 16px); font-size: 16px; z-index:1; vertical-align: middle; margin-right: 4px; margin-top: -3px;
			    -webkit-animation: spin 0.6s ease-in-out infinite;
			    -moz-animation: spin 0.6s ease-in-out infinite;
			    -o-animation: spin 0.6s ease-in-out infinite;
			    animation: spin 0.6s ease-in-out infinite;
	    	}
	    }
	}
}
h3.sidebar-shortcodes{
	font-size: 114.29%;font-weight: bold;margin: 0;padding: 20px;position: relative;text-transform: uppercase;border-bottom: 1px solid $line-border-color;
	span{
		position:relative; padding: 0;display: inline-block;
	}
}

// .handle-preload
.handle-preload{
	@include opacity(0);
	visibility: hidden;
}

.bypostauthor{
	font-size: 100%;
}

#sns_content .wpb_row{
	&:last-child{
		margin-bottom: 0;
	}
}

#sns_content .wpb_column > .wpb_wrapper > *:last-child{
	margin-bottom: 0;
}

@media (min-width: 1200px){
	#sns_content .wpb_row{
		&:last-child{
			margin-bottom: 0;
		}
	}
	#sns_content .wpb_column > .wpb_wrapper > *:last-child{
		margin-bottom: 0;
	}
	.archive #sns_content,
	.archive #sns_content .sns-content{
		margin-bottom: 0px;
	}
}

@media (max-width: $screen-phone){
	#sns_content .hide-border-phone{
		border: none !important;
	}
}
// Bootstrap new size
$screen-xlarge: 1830px;
$screen-slarge: 1140px;
$sns-wgutter: 30px;
$sns-wgutter-md: 20px;
$sns-wgutter-xs: 15px;
// Bootstrap container
.container{
	@media (min-width: 768px) {
	    width: 750px;
	}
	@media (min-width: 992px) {
	    width: 970px;
	}
	@media (min-width: 1200px) {
	    width: 1170px;
	}
	@media(min-width: 1460px){
			width: 1350px;
	}
}
@media (max-width: $screen-phone) {
	@include responsive-invisibility('.hidden-phone');
}
@media (min-width: $screen-lg){
	.col-lg-2_4{
		width: 20%;
	}
}