/* If you want to add your own CSS code, please do it in this file */

/* font awesome */
.fontawesome-icon-list .fa-hover { float:left; width: 25%; font-size: 13px; line-height:18px; padding-bottom:10px;}
.fontawesome-icon-list .fa-hover .text-muted { color:#ccc;}
.fontawesome-icon-list .fa-hover [class*=" fa-"] { color: #3E3E3E; font-size: 18px; width:23px; display:inline-block;}

	@media only screen and (min-width: 768px) and (max-width: 959px){
		.fontawesome-icon-list .fa-hover { width:33.333%;}
	}
	@media only screen and (min-width: 480px) and (max-width: 767px){
		.fontawesome-icon-list .fa-hover { width:50%;}
	}
	@media only screen and (max-width: 479px){
		.fontawesome-icon-list .fa-hover { width:100%;}
	}

/* #configurator */
#configurator { color:#213442 !important; background:#f9f9f9; width: 190px; position: fixed; left: -192px; top: 15px; z-index: 9000; color: #515E6C; line-height: 21px; font-size: 12px; text-transform:uppercase;}
#configurator form { margin-bottom:0; text-align:center;}
#configurator select { background:none; box-shadow:0 0 0; margin-bottom:10px; padding: 3px; color:#213442;}
#configurator .control { display:block; width:51px; height:51px; position:absolute; top:216px; right:-51px; background:#f9f9f9 url(/images/configurator/ico.png) no-repeat center; text-indent:-9999px;}
#configurator .inside { padding:10px;}
#configurator .header { text-align:center; padding-bottom:5px; margin-bottom:5px; border-bottom:1px solid #eee; font-size:18px;}

#configurator ul.image-select { margin-bottom:5px;}
#configurator ul.image-select li { display:block; float:left; }
#configurator ul.image-select li a { display:block; width:32px; height:32px; float:left; margin:5px;}
#configurator ul.image-select li:hover { border-color:#ccc;}

#configurator ul.select-color li a { text-indent:-9999px;}

#configurator ul.text-select { margin-bottom:15px; }
#configurator ul.text-select li { float:left; width:50%; font-size:13px; }
#configurator ul.text-select li:not(.active) a { color:#515E6C; }

#configurator p { line-height:16px; margin-bottom:5px;}

	/* mobile only */
	@media only screen and (max-width: 768px){
		#configurator { display:none;}
	}

/* demo - clean menu */
.menu-clean.color-custom #Header .menu > li > a { color: #444;}
.menu-clean.color-custom #Header .menu > li.current-menu-item > a,
.menu-clean.color-custom #Header .menu > li.current_page_item > a,
.menu-clean.color-custom #Header .menu > li.current-menu-ancestor > a,
.menu-clean.color-custom #Header .menu > li.current_page_ancestor > a { color: #F94C3F !important;}
.menu-clean.color-custom #Header .menu > li > a:hover,
.menu-clean.color-custom #Header .menu > li.hover > a { color: #F94C3F !important;}
.menu-clean.color-custom .social li a { color: #B1B1B1 !important;}
.menu-clean.color-custom .social li a:hover { color: #444 !important;}

/* Demo */
.demo_no_line .fancy_heading .fancy_heading_wrapper { padding-bottom: 0; }
.demo_no_line .fancy_heading .fancy_heading_wrapper.no_icon:after { display: none; }
.demo_contact_section .fancy_heading .fancy_heading_wrapper { padding-top: 0; }

#searchform input[type="submit"] {
	display: none;
}

.pad40-0 {
	padding-top:40px; padding-bottom:0px;
}

/*Slider Images*/

.slider1 {
	background-image:url(/upload/slide_1.jpg);
}
.slider2 {
	background-image:url(/upload/slider_2.jpg);
}
.slider3 {
	background-image:url(/upload/slide_3.jpg);
}

.samplebox h5 {
	padding-top: 20px;
}

.vertical-fancy {
	padding-top:40px; padding-bottom:0px; 
	background-color:#E4E4D2; 
	background-image:url(/upload/section_offer.jpg); 
	background-repeat:repeat; background-position:center top; 
}

#gallery-1 {
	margin: auto;
}
#gallery-1 .gallery-item {
	float: left;
	margin-top: 10px;
	text-align: center;
	width: 25%;
}
#gallery-1 img {
	border: 2px solid #cfcfcf;
}
#gallery-1 .gallery-caption {
	margin-left: 0;
}

.soundcloud iframe {
	width: 100%;
}

.user img {
	display: none !important;
}

.interact {
	display: none !important;
}

/********** 201807 member app **********/
.app-text {
	max-width: 570px;
	width: 100%;
	position: relative;
	display: inline-block;
	vertical-align: top;
}

.app-download {
    padding: 25px 0 0 18px;
}

@media screen and (min-width: 768px) {
	.app-icon {
	    padding-left: 25px;
	    display: inline-block;
	    vertical-align: middle;
    }

    .app-icon img {
	    max-width: 100px !important;
	    vertical-align: text-top;
	    display: inline-block;
    }

    .app-icon-text {
	    display: inline-block;
	    vertical-align: bottom;
	    padding-left: 25px;
	    padding-top: 15px;
    }

    .app-hashtags {
	    display: inline-block;
	    vertical-align: bottom;
	    padding-left: 25px;
	    padding-top: 15px;
	    padding-bottom: 15px;
    }

    .app-download-text-1 {
    	display: block;
    }

    .app-download-text-2 {
    	display: none;
    }
}

@media screen and (max-width: 767px) {
	.app-icon {
	    position: relative;
	    left: 50%;
	    margin-left: -50px;
    }

    .app-icon img {
	    max-width: 100px !important;
	    vertical-align: text-top;
	    display: inline-block;
    }

    .app-icon-text {
	    padding: 15px 5px 0 5px;
	    text-align: center;
    }

    .app-hashtags {
    	text-align: center;
	    padding: 15px 5px;
    }

    .app-qr,
    .app-download-text-1 {
    	display: none !important;
    }

    .app-download-text-2 {
    	display: block;
    }
}

@media screen and (min-width: 1240px) {
	.app-bg {
		position: absolute;
	    max-width: 570px !important;
	    display: inline-block;
	    margin-left: 10px;
		clip: rect(0,auto,auto,0);
	}
}
@media screen and (min-width: 960px) and (max-width: 1239px) {
	.app-bg {
		position: absolute;
	    max-width: 570px !important;
	    display: inline-block;
	    margin-left: 10px;
		clip: rect(0,380px,auto,0);
	}
}
@media screen and (min-width: 768px) and (max-width: 959px) {
	.app-bg {
		position: absolute;
	    max-width: 570px !important;
	    display: inline-block;
	    margin-left: 10px;
		clip: rect(0,147px,auto,0);
	}
}
@media screen and (min-width: 480px) and (max-width: 767px) {
	.app-bg {
		position: relative;
	}

	.app-download {
    	position: relative;
	    left: 50%;
	    margin-left: -235px;
	    padding-top: 15px;
    }
}
@media screen and (max-width: 479px) {
	.app-bg {
		position: relative;
	}

	.app-download {
    	position: relative;
	    left: 50%;
	    margin-left: -100px;
	    padding: 15px 0 0 0;
    }
}