@charset "UTF-8";
/*
Theme Name: Xi An Theme
Theme URI: 
Description: Only for Xi An Interior Design
Version: 1.0
Author: Gary Kam
Author URI: 
*/

@font-face {
	font-family: 'Noto Sans TC';
	font-style: normal;
	font-weight: 400;
	src:
		url(assets/fonts/NotoSansTC-Regular.woff2) format('woff2'),
		url(assets/fonts/NotoSansTC-Regular.woff) format('woff'),
		url(assets/fonts/NotoSansTC-Regular.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans TC';
	font-style: normal;
	font-weight: 700;
	src:
		url(assets/fonts/NotoSansTC-Bold.woff2) format('woff2'),
		url(assets/fonts/NotoSansTC-Bold.woff) format('woff'),
		url(assets/fonts/NotoSansTC-Bold.otf) format('opentype');
}

body { margin: 0; padding: 0; font-family: "Noto Sans TC", sans-serif; }
h1, h2, h3, h4 { margin: 0; line-height: 1.6em; font-weight: normal; }
ol, ul, li { margin: 0; padding: 0; list-style: none; }
a:focus { outline: none; }

#page {
	position: relative;
	width: 100%;
	max-width: 1920px;
	min-width: 320px;
	margin: auto;
	-webkit-box-shadow: 0 0 10px #585757;
	   -moz-box-shadow: 0 0 10px #585757;
	        box-shadow: 0 0 10px #585757;
}

header, nav { width: inherit; }

.menu-xi_an_mainmenu-container { width: inherit; }

.hamburgerMenuBtn, .closeMenuBtn { display: none; }

.page-scroll {
	text-decoration: none;
	padding: 6px 0;
	color: #666;
	display: block;
	border-left: 1px solid #444;
}

#menu-xi_an_mainmenu > li { font-size: 18px; }
#menu-xi_an_mainmenu > li > a { text-decoration: none; }
#menu-xi_an_mainmenu > li:first-child > a { border: 0; }

div#n2-ss-2-align { overflow: hidden; margin-bottom: 50px; }
#n2-ss-2-align > a > img { width: 100%; display: block; }

section {
	margin: 50px 0;
	clear: both;
	overflow: hidden;
}
section h2 {
	font-size: 30px;
	color: #333;
	line-height: 2em;
	text-align: center;
	font-weight: normal;
}
section h2 > span { font-family: 'Arial'; font-size: 24px; }
section p {
	color: #333;
	font-size: 18px;
	text-align: justify;
}

.sectionContent { padding: 0 40px; }

#aboutUs h2 { text-align: left; }
#aboutUs blockquote {
	font-size: 26px;
	padding-left: 10px;
	margin-left: 0;
	border-left: 5px solid #70B0CF;
	color: #999;
}
#aboutUs p { color: #999; }
#aboutUs br { display: none; }

#service h2 { line-height: 1em; margin: .5em auto; }
#service h3 {
	display: inline-block;
	font-size: 24px;
	border-bottom: 2px dashed;
	letter-spacing: 0.2em;
}
#service h4 {
	font-size: 20px;
	padding: 0.8em;
}
#service ul > li {
	font-size: 20px;
	margin: 10px 0 10px 0.8em;
}
#service ul > li::before {
	content: '✓ ';
	color: red;
}
#service p { margin: 0 0 0 .8em; }
#serviceFlow > li { font-size: 24px; margin: 10px 0; }
#serviceFlow > li > b {
	display: inline-block;
	width: 65px;
	height: 65px;
	background: url(assets/images/serviceFlow_icon@1x.png) no-repeat;
	background-size: cover;
	margin-right: 5px;
	vertical-align: middle;
}
#serviceFlow > li:nth-child(1) > b { background-position: 0 0; }
#serviceFlow > li:nth-child(2) > b { background-position: 0 -65px; }
#serviceFlow > li:nth-child(3) > b { background-position: 0 -130px; }
#serviceFlow > li:nth-child(4) > b { background-position: 0 -195px; }
#serviceFlow > li:nth-child(5) > b { background-position: 0 -260px; }
#serviceFlow > li:nth-child(6) > b { background-position: 0 -325px; }
#serviceFlow > li:nth-child(7) > b { background-position: 0 -390px; }

#contactUs { margin-bottom: 0; }
#contactUs > .sectionContent { padding: 0; }
#contactUs .map { border: 0; }

#wpcf7-f171-o1 { margin: auto; padding-bottom: 40px; font-size: 18px; max-width: 688px; box-sizing: border-box; }
#wpcf7-f171-o1 > form > div { margin-bottom: 1em; }
#wpcf7-f171-o1 b { color: red; }
#wpcf7-f171-o1 input { font-size: 18px; }
#wpcf7-f171-o1 input[type="text"],
#wpcf7-f171-o1 input[type="email"], #wpcf7-f171-o1 textarea { border: 1px solid #ccc; border-radius: 6px; padding: 3px; }
#wpcf7-f171-o1 input[type="text"],
#wpcf7-f171-o1 input[type="email"]{ width: 300px; }
#wpcf7-f171-o1 textarea { font-size: 18px; box-sizing: border-box; width: 100%; }

.wpcf7-list-item { margin-right: 1em; }
.wpcf7-response-output { display: none; text-align: center; }

.formFooter { text-align: center; }
.formFooter > button { font-size: 18px; }

.screen-reader-response { display: none; }

.wpcf7-not-valid-tip { font-size: 14px; color: red; }
/*.wpcf7-response-output { text-align: center; }*/
.g-recaptcha { width: 304px; margin: 0 auto 1em; }

footer {
	background-color: #767676;
	color: #fff;
	padding: 20px 20px 10px;
	overflow: hidden;
}
footer > address { font-size: 16px; font-style: normal; }

#contactInfo > li > b {
	display: inline-block;
	width: 24px;
	height: 22px;
	background: url(assets/images/contact_icons@1x.png) no-repeat;
	background-size: cover;
	margin-right: 5px;
	vertical-align: text-bottom;
}
#contactInfo > li:nth-child(1) > b { background-position: 0 0; }
#contactInfo > li:nth-child(2) > b { background-position: -24px 0; }
#contactInfo > li:nth-child(3) > b { background-position: -48px 0; }
#contactInfo > li:nth-child(4) > b { background-position: -72px 0; }
#contactInfo > li:nth-child(5) > b { background-position: -96px 0; }
#contactInfo > li:nth-child(6) > b { background-position: -120px 0; }
#contactInfo > li:nth-child(7) > b { background-position: -144px 0; }
#contactInfo a { color: #fff; text-decoration: none; }

#copyRight { margin: 0; }

#adminLink { color: #fff; text-decoration: none; }

#toTop {
	display: none;
	width: 60px;
	height: 60px;
	border: 0;
	border-radius: 50%;
	background: url(assets/images/toTop_icon.png) no-repeat;
	background-size: 60px 60px;
	position: fixed;
	right: 20px;
	bottom: 20px;
}

.fb_customer_chat_bubble_pop_in { bottom: 86px !important; right: 20px !important; }
#fb-root iframe { bottom: 140px !important; }


@media only screen and (min-width: 320px) and (max-width: 767px) {

	#page { padding-top: 44px; }
	header {
		background-color: rgba(255,255,255,.95);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		height: 44px;
		box-shadow: 0 0 3px 0 #333;
	}
	#left_horiz_line,
	#right_horiz_line,
	#upper_vert_line,
	#lower_vert_line,
	#menu-xi_an_mainmenu { display: none; }
    #menu-xi_an_mainmenu > li { font-size: 20px; }
	
	h1 {
		font-size: 23px;
		font-weight: normal;
		line-height: 44px;
		color: #fff;
		text-align: center;
		text-shadow: 1px 1px 2px #333;
	}
	h1 > span[lang="en-US"] { display: none; }

	#logo {
		width: 38px;
		height: 38px;
		position: absolute;
		left: 3px;
		top: 3px;
		background-size: cover;
	}

	.hamburgerMenuBtn,
	.closeMenuBtn {
		position: absolute;
		left: 5px;
		top: 2px;
		display: block;
		height: 40px;
		width: 40px;
		border: 0;
		-webkit-box-sizing: content-box;
		   -moz-box-sizing: content-box;
		    -ms-box-sizing: content-box;
		     -o-box-sizing: content-box;
		        box-sizing: content-box;
		background-color: transparent;
		padding: 0;
	}
	.closeMenuBtn {
		position: absolute;
		right: 5px;
		top: 2px;
		display: none;
	}
	.hamburgerMenuBtn > span,
	.closeMenuBtn > span {
		display: block;
		width: 30px;
		height: 2px;
		background-color: #666;
		-webkit-border-radius: 2px;
		   -moz-border-radius: 2px;
		        border-radius: 2px;
		margin: 5px auto;
	}
	.closeMenuBtn > span {
		margin: 0;
		position: absolute;
		top: 18px;
		left: 5px;
		-webkit-transform-origin: center center;
		   -moz-transform-origin: center center;
		    -ms-transform-origin: center center;
		     -o-transform-origin: center center;
		        transform-origin: center center;
	}
	.closeMenuBtn > span:first-child {
		-webkit-transform: rotate(45deg);
		   -moz-transform: rotate(45deg);
		    -ms-transform: rotate(45deg);
		     -o-transform: rotate(45deg);
		        transform: rotate(45deg);
	}
	.closeMenuBtn > span:last-child {
		-webkit-transform: rotate(-45deg);
		   -moz-transform: rotate(-45deg);
		    -ms-transform: rotate(-45deg);
		     -o-transform: rotate(-45deg);
		        transform: rotate(-45deg);
	}

	.hamburgerMenuBtn:focus,
	.closeMenuBtn:focus { outline: none; }
    .menu-xi_an_mainmenu-container { width: inherit; }
	#menu-xi_an_mainmenu {
		position: fixed;
		top: 44px;
		left: 0;
		z-index: 11;
		width: inherit;
	}
	#menu-xi_an_mainmenu > li { 
		width: inherit;
		background-color: rgba(255,255,255,.9);
		text-align: center;
	}

    .page-scroll { border-left: 0; }

	#aboutUs img { width: 100%; }

    #contactUs .map { width: 100%; height: 500px; }

	#wpcf7-f171-o1 { padding: 40px 40px 40px; }
	#wpcf7-f171-o1 input { margin-bottom: 0; }
	#wpcf7-f171-o1 p { text-align: left; }
	#wpcf7-f171-o1 p br { display: none; }
	.wpcf7-not-valid-tip { display: block; margin-left: 0; margin-bottom: 1em; }

	footer > address { margin-bottom: 20px; margin: 0 auto 1em; }

	#copyRight { text-align: center; }
}


@media only screen and (min-width: 768px) {

	h1 {
		position: absolute;
		top: 18px;
		z-index: 6;
		font-weight: normal;
		color: #fff;
		text-shadow: 1px 1px 3px #333;
		opacity: 0;
		animation-name: showTitle;
		animation-duration: 2.5s;
		animation-delay: 3s;
		animation-timing-function: ease-out;
		animation-fill-mode: forwards;
	}
		h1 > span:first-child { font-size: 30px; }
		h1 > span[lang="en-US"] { font-size: 25px; font-family: Arial, "sans-serif"; }
		.fixedMenuTitle {
		    font-size: 28px;
            font-weight: normal;
            color: #fff;
            text-shadow: 1px 1px 3px #333;
            display: block;
            position: fixed;
            top: -2px;
            left: -180px;
            z-index: 11;
            animation-name: titleSlideOut;
            animation-duration: 1s;
            animation-delay: 1s;
            animation-timing-function: ease-out;
            animation-fill-mode: forwards;
		}

    .page-scroll { color: #fff; border-left-color: #fff; text-shadow: 0 0 3px #333; }
    .fixedMenu .page-scroll { border-left: 0; }

    .menu-xi_an_mainmenu-container { width: inherit; }
	#menu-xi_an_mainmenu { z-index: 10;}
	#menu-xi_an_mainmenu.staticMenu { position: absolute; top: 80px; }
	#menu-xi_an_mainmenu.fixedMenu {
		width: inherit;
		height: 42px;
		background-color: rgba(255,255,255,.9);
		position: fixed;
		left: 0;
		text-align: right;
		animation-name: slideDownMenu;
		animation-duration: 1s;
		animation-delay: 0;
		animation-timing-function: ease-out;
		animation-fill-mode: forwards;
	}

	#menu-xi_an_mainmenu > li {
		list-style: none;
		width: 150px;
		text-align: center;
		padding: 5px 0;
	}
	#menu-xi_an_mainmenu > li > a  { color: #fff; text-shadow: 1px 1px 3px #333; }
	#menu-xi_an_mainmenu.staticMenu > li { float: left; }
	#menu-xi_an_mainmenu.fixedMenu > li {
		background-color: transparent;
		float: none;
		display: inline-block;
		width: 150px;
	}


	#page > header > nav {
		position: relative;
		right: 20px;
		text-align: right;
		z-index: 2;
	}

	#aboutUs img { float: right; margin: -55px -40px 40px 2em; width: 48%; }

	#service > .sectionContent { overflow: hidden; }
	#service > .sectionContent > div { box-sizing: border-box; float: left; }
	#service > .sectionContent > div:nth-of-type(1) { width: 60%; padding-right: 50px; }
	#service > .sectionContent > div:nth-of-type(2) { width: 40%; padding-left: 50px; }

    #contactUs .map { width: 100%; height: 500px; }

	#wpcf7-f171-o1 { padding: 40px 0 40px; }
	.wpcf7-not-valid-tip { display: inline; margin-bottom: 0; margin-left: 1em; }

	footer > address { float: left; width: auto; margin-bottom: 0; }
	#copyRight { float: right; margin-top: 96px; }

}

@media only screen and (min-width: 1024px) {

    h1 { left: 50px; }
    #menu-xi_an_mainmenu.staticMenu { top: 35px; right: 20px; }
    #menu-xi_an_mainmenu > li { width: 120px; }
    .page-scroll { border-left: 0; }
    
    .decorationLine {
        width: 94%;
        height: 1px;
        display: block;
        background-color: #fff;
        box-shadow: 0 0 3px #333;
        position: absolute;
        top: 72px;
        z-index: 12;
        margin: 0 45px;
    }


    #contactUs > .sectionContent > div { display: flex; flex-wrap: wrap; justify-content: space-around; }
    #contactUs > .sectionContent > div > div:first-child { width: 60%; }
    #contactUs > .sectionContent > div > div:last-child { width: 40%; padding: 0 40px; }

    #contactUs .map { display: block; height: 760px; }

    #wpcf7-f171-o1 { margin: 0; }
}

@media only screen and (min-width: 1280px) {

		h1 > span:first-child { font-size: 33px; }
		h1 > span[lang="en-US"] { font-size: 26px; }

	#logo {
		width: 100px; /* 100 */
		height: 98px; /* 98 */
		-webkit-background-size: cover;
		   -moz-background-size: cover;
		     -o-background-size: cover;
		        background-size: cover;
	}

	#left_horiz_line,
	#right_horiz_line { height: 3px; }

	#upper_vert_line,
	#lower_vert_line { width: 3px; }

	#left_horiz_line { top: 101px; }
	#right_horiz_line {
		top: 101px;
		left: 144px;
	}
	#upper_vert_line { left: 75px; }
	#lower_vert_line {
		top: 128px;
		left: 75px;	
	}

	#menu-xi_an_mainmenu > li { width: 150px; }
	#aboutUs img { margin-top: -177px; width: 41%; }
	#aboutUs blockquote { font-size: 30px; margin-left: 40px; }
	#aboutUs br { display: block; }

    #contactUs > .sectionContent > div > div:first-child { width: 70%; }
    #contactUs > .sectionContent > div > div:last-child { width: 30%; padding: 0 40px; }
}


/* 2.0 dpr */
@media
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (   min--moz-device-pixel-ratio: 2),
	only screen and (   -o-min-device-pixel-ratio: 2/1),
	only screen and (        min-device-pixel-ratio: 2),
	only screen and (           min-resolution: 192dpi),
	only screen and (            min-resolution: 2dppx) {
		#logo { background-image: url(assets/images/xi_an_logo@2x.png); }
		#serviceFlow > li > b { background-image: url(assets/images/serviceFlow_icon@2x.png); }
		#contactInfo > li > b { background-image: url(assets/images/contact_icons@2x.png); }
    }


@keyframes showTitle {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes slideDownMenu {
	0% {
		top: -44px;
		background-position: -100px center;
	}
	50% { top: 0; background-image: none; }
	100% {
		top: 0;
		background-position: 40px center;
	}
}
@keyframes titleSlideOut {
    0% { left: -180px; }
    100% { left: 20px; }
}