/*
Theme Name: flatsome-child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* COMMON */
.break_text {
	display: none;
}

/* TOP page */
/* Header */

.nav>li>a, .nav-dropdown>li>a, .nav-column>li>a {
	color: #000;
}

.nav-left {
	width: calc(100% + 24px);
}

.nav>li>a:hover,
.nav>li.active>a,
.nav>li.current>a,
.nav>li>a.active,
.nav>li>a.current,
.nav-dropdown li.active>a,
.nav-column li.active>a,
.nav-dropdown>li>a:hover,
.nav-column li>a:hover {
	color: #D00101;
}

.header-wrapper .header-main {
	height: 82px;
}

.header-nav .nav > li > a {
	font-size: 15px;
}

.header-wrapper .header-main {
	color: #fff;
}

#logo img {
	max-height: 200px!important;
}

.header-top {
	z-index: 9;	
}

.logo a {
	transform: translateY(-30%);
}

.nav-divided>li+li>a:after {
	border-left: 1px solid #000000;
}

.header-nav .nav > li > a {
    font-weight: 500;
    font-size: 15px;
}

.header-button .button.primary
{
	font-size: 15px;
	background: none;
	color: #121212;
	border:0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.header-button .button.primary:hover {
	background: none;
	box-shadow: none;
}

.header-button .button.secondary
{
	font-size: 15px;
	background: none;
	color: #121212;
	border:0;
	display: flex;
	justify-content: center;
	align-items: center;
	text-transform: lowercase;
	padding: 0 0 0 8px;
	position: relative;
}

.header-button .button.secondary:hover {
	background: none;
	box-shadow: none;
	text-transform: lowercase;
}

.nav-dark .social-icons .button.is-outline,
.dark .social-icons .button.is-outline {
	    border-color: gray;
	border: 1px solid grey;
}

.social-icons i {
	color: gray;
}

.header-social-icons {
	margin-right: 0!important;
}
.header-search {
	margin-left: 0!important;
}

.header-search .is-small, .header-search .is-small.button {
    font-size: 0.75em;
}

.header-search .button.is-outline,
.header-search input[type='submit'].is-outline,
.header-search [type='reset'].is-outline,
.header-search input[type='button'].is-outline {
	border: 1px solid grey;
}

.header-search a:hover {
	background: orange!important;
}

.header-search .button.icon.is-small i {
	color: grey;
}

/* Banner */
.banner-layers {
	transform: translateX(0.5%);
}


.banner {
	height: calc(100vh - 207px);
} 
#content .banner .bong-den-top {
	width: 70%;
}

.banner {
	background-color: #2f0d00!important;
}


.setting-icon a img,
.screen-icon a img,
.sound-icon a img,
.printer-icon a img
{
	cursor: pointer;
}

.setting-icon a img:hover,
.screen-icon a img:hover,
.sound-icon a img:hover,
.printer-icon a img:hover
{
  animation: hover-in 1s; 
}

@keyframes hover-in {
  /* You could think of as "step 1" */
  0% {
    opacity: 0.5;
  }
  /* You could think of as "step 2" */
  100% {
    opacity: 1;
  }
}

.setting-icon p,
.screen-icon p,
.sound-icon p,
.printer-icon p{
	font-size: 20px;
}

.setting-icon {
	left: 0%;
    top: 10%;
}

.screen-icon {
	top: 11%;
    right: 3%;
}

.sound-icon {
	bottom: 12%;
    left: 0.5%;
}

.printer-icon {
	bottom: 12%;
    right: 3.2%;
}

.sub_banner_menu {
	font-size: 20px;
}

/* Footer */
.footer_name {
	font-size: 18px;
	line-height: 20px;
	text-align: center;
}

.footer_address1,
.footer_address2
{
	font-size: 16px;
	line-height: 20px;
	text-align: center;
}

.btnMail {
	display: flex;
	align-items: center;
}

.btnCall .fa-phone:before {
	font-size: 22px;
	color: #B54400;
}

.btnMail i:before {
	color: #B54400;
	font-size: 18px;
}

.btnCall .button span,
.btnMail .button span,
{
	font-weight: 400;
}

#logo {
	position: relative;
}

#logo:before {
	position: absolute;
    content: "";
    width: 89%;
    padding-top: 60%;
    top: -30px;
    left: -7px;
    margin: 0 auto;
    background: white;
    right: 0;
    border-radius: 54%;
}

@media screen and (max-height: 900px) {
	.banner {
		height: 45vw!important;
	}
	
	.banner-layers {
		transform: translateX(0);
	}
	
	.banner-layers {
		max-width: 85%;
	}
	
	.setting-icon p,
	.screen-icon p,
	.sound-icon p,
	.printer-icon p{
		font-size: 1.5vw;
	}
	
	#content .banner .bong-den-top {
		width: 45vw;
	}
	
	.setting-icon {
		left: 6vw;
    	top: 2vw;
	}
	
	.screen-icon {
		top: 3vw;
    	right: 8vw;
	}
	
	.sound-icon {
		bottom: 2vw;
    	left: 6.5vw;
	}
	
	.printer-icon {
    	bottom: 2vw;
    	right: 7.8vw;
	}
}

@media only screen and (max-width: 1080px) {
	
	.banner {
		height: 100vw!important;
	}
	
	.banner-layers {
		transform: translateX(0);
	}
	
	.banner-layers {
		max-width: 100%;
	}
	
	.setting-icon p,
	.screen-icon p,
	.sound-icon p,
	.printer-icon p{
		font-size: 3vw;
	}
	
	#content .banner .bong-den-top {
		width: 70vw;
	}
	
	.setting-icon {
		left: 0vw;
    	top: 22vw;
	}
	
	.screen-icon {
		top: 22vw;
    	right: 3.3vw;
	}
	
	.sound-icon {
		bottom: 14vw;
    	left: 0.5vw;
	}
	
	.printer-icon {
    	bottom: 16vw;
    	right: 4.2vw;
	}
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	/* COMMOM */
	.break_text {
		display: block;
	}
	/* 	Phone icon */
	.header-button .button.primary {
		justify-content: flex-start;
		padding-left: 0;
		font-size: 20px;
		color: brown;
	}
	
	.header-button-1,
	.header-button-2 {
		padding-top: 0px!important;
		padding-bottom: 0px!important;
	}
	
	#logo img {
		max-height: 80px!important;
		margin-top: 20px;
	}
	
	.footer_name {
		font-size: 13px;
		font-weight: bold;
		color: #e4bbbb;
		margin-top: 1em;
		margin-bottom: 1em;
	}
	
	.footer_address1 {
		margin-bottom: 0.5em;
	}
	
	.footer_address1,
	.footer_address2 {
		font-size: 11px;
	}
	
	.off-canvas .nav-vertical li li>a {
		font-size: 12px;
	}
}