/*container*/
html, body{height:100%;}

#container{width:100%; min-height:100%; position:relative;}
section>div, .responsiveWidth{margin:0 auto;}

@media only screen and (max-width:639px){
	.responsiveWidth, section>div{width:320px;}
}
@media only screen and (min-width :640px) and (max-width :979px){
	.responsiveWidth, section>div{width:640px;}
}
@media only screen and (min-width :640px){
	#content{margin-top:65px;}
}
@media only screen and (min-width :980px){
	.responsiveWidth, section>div{width:960px;}
	main{width:720px;}
}

/*image*/
figure{overflow:hidden; margin:0; position:relative;}
.ctrFr, .lFr{position: relative; overflow:hidden;}
figure>img, .ctrFr img, .ctrFr h4, .ctrFr h3{position: absolute; left: 50%; top: 50%;
	-webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
}
.lFr img{position: absolute; left: 0; top: 50%;
	-webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); transform: translate(0,-50%);
}
img{border:0px;}

/*color*/
.text a, .over{color: #9F8046;}
.topText>a, .topText>nav, #topLogo a{color:black;}
.textLogo{color:white;}

/*footer*/
footer{background-color:rgb(20,20,20);}
footer a:hover{color:#1e46a0;}
footer, footer p, footer a, .cp{color:white;}

/*image*/
.icon {
	background-image:url('/img/icons/sprite.png');
	background-repeat:no-repeat; width:20px; height:20px;
	display:inline-block; vertical-align:middle; margin:0 10px 0 0;
}
.icon-phone{background-position:-180px 0px;}
.icon-fax{background-position:-180px -20px;}
.icon-whatsapp{background-position:-160px 0px;}
.icon-smartphone{background-position:-120px 0px;}
.icon-mail{background-position:-200px 0px;}
.icon + div{display:inline-block; width:80%; vertical-align:top;}

@media only screen and (min-width :640px) and (max-width :979px){
	.icon + div{width:170px;}
}
@media only screen and (min-width :980px){
	.icon + div{width:80%;}
}


/*letter*/
body{
	font-size: 12px; 
	line-height: 1.5; word-wrap:break-word;
	color:rgb(40,40,40); position: relative;
	margin:0; padding:0;
}
.cn h1{margin:0 0 10px 0;}
.text h1, .text h2{margin:5px 0; font-weight:100; font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;}

p{margin-top:0; text-align:left;}
p, li{font-size:12px; font-family:"Helvetica Neue", Arial;}
a:link, a:visited, a:hover, a:active{text-decoration:none;}

.text h2, .text h3, .text h4{margin:30px 0 10px 0;}
.text h1{font-weight:100; color:rgb(30,30,30); line-height:1.4;}
.text h2{font-weight:100; color:rgb(30,30,30);}
.text h2:first-child{margin-top:0;}
.text h3, .text h4{font-weight:normal; padding:0; color:black;}
.text, .text li, .text p{color:rgb(50,50,50); line-height:1.8;}
.text li{margin:5px 0;}
.text ul{text-align:left;}
.text ol{color: rgb(40,40,40); text-align:left; margin:5px 0 15px 0;}
.text figure{margin:0 auto;}

@media only screen and (max-width:639px){  
    .text h1{font-size:26px; margin:20px 0 20px 0;}
    .text h2{font-size:20px;}
    .text h3{font-size:15px;}
    .text h4{font-size:14px;}
    .text, .text li, .text p{font-size:13px;}

	.text figure{border-radius:25px; height:50px; width:50px;}
    .text figure img{min-height:50px;}
}
@media only screen and (min-width:640px) and (max-width:979px){
    .text h1{font-size:22px; margin-top:15px;}
	.cn h2, .text h2{font-size:18px;}
    .text, .text li, .text p{font-size:14px;}
}
@media only screen and (min-width:640px){
	.text h1{margin-bottom:40px;}
    .text h2{font-weight:100;}
	.cn h1{font-size:36px;}
	.text h3{font-size:20px;}
    .text h4{font-size:17px;}

	.text ol{padding:0 0 0 30px;}
	.text figure{border-radius:60px; width:120px;}
	.text figure, .text figure img{height:120px}
}
@media only screen and (min-width:980px){
	.text h1{font-size:42px;}
	.cn h2, .text h2{font-size:24px;}
    .text h2{font-weight:100;}
    .text, .text li, .text p{font-size:15px;}
}

/*header*/
header>div>nav, .topText, .topText>a, .topText>nav, .topText>li{display:inline-block; vertical-align:top;}
#logo-image, #logo-text{display:inline-block; vertical-align:middle;}

header{
	width:100%; z-index:10000; background-color:rgba(255,255,255,0.2);
	position:fixed; top:0; left:0;
	font-family:"Helvetica Neue", Arial;
}
header>div{margin:0 auto; position:relative;}

/*commons*/
#topLang{float:right;}
#topLang>a{color:rgb(50,50,50); padding-top:27px; font-size:11px;}
#topLang>a:hover{opacity:0.8;}

/*Logo*/
#topLogo{overflow:hidden; position:relative}
#topLogo img{height:30px; margin:10px;}
#topLogo a{height:35px; font-size:15px; display:block; letter-spacing:-1px;}
#logo-text{font-family:"Helvetica Neue", Arial;}
#logo-text b{font-weight:900;}
/*Account*/
#topAccount{position:absolute; bottom:0; right:-1px; z-index:100000;}

/*logged in*/
#topAccount i{width:10px; height:20px;}

/*menus*/
.topText>a, .topText>nav{height:15px; color:rgb(40,40,40);}
.topText>a:hover{opacity:0.7;}
.topText li{list-style:none;}

@media only screen and (max-width:639px){
	#content{margin-top:75px;}
	header{border-top:solid 1px rgb(220,220,220); height:55px; padding:10px 0;}
	header>div{width:300px;}

	#topLogo{margin:10px 0 0 0; width:30px;}
	#topLogo a, #topAccount{height:30px; padding:0; border:0;}
    #topLang>a{padding-top:18px;}
    #topMenu{width:190px; padding-left:10px;}

	#topAccount{top:0; margin:0 3px 0 5px;}
	#topAccount span{display:none!important;}
	
	#topLogo img{margin:0 0 0 0;}

    .topText>a, .topText>nav{padding:5px; font-size:12px;}
}
@media only screen and (min-width:640px) and (max-width:979px){
	header{height:65px;}
	#topLogo{width:190px;}
	#topLogo img{margin:2px 5px 0 0;}
	#topLogo a{font-size:12px;}
	#logo-text{margin-top:6px;}
	header>div{width:630px;}

    #topSearch{margin:12px 0;}
    #topSearch label{height:20px; font-size:13px;}

	#topAccount{max-width:150px;}

    .topText>a, .topText>nav{padding:25px 2px; font-size:12px;}
}
@media only screen and (min-width:640px){
	#content{margin-top:65px;}
    #topLogo>a{padding:15px 0;}
	header>div, header>div>nav{height:65px; padding:0 7px;}
	header>div{padding:0 20px;}
    #topSearch{height:36px;}
	#topMenu{width:auto; float:right;}
}
@media only screen and (min-width:980px){
	#topLogo{font-size:14px;}
	#topLogo img{margin-top:3px;}
	#topLogo a{font-size:15px;}

    #topSearch{margin:14px 0;}
    #topSearch label{height:20px; font-size:14px;}

    #topLogo>a{padding:15px 5px;}
	#topCart{width:60px;}
    
    #topAccount{max-width:270px!important;}
	
    .topText>a, .topText>nav{padding:25px 10px; font-size:13px;}
}

/*footer*/
footer{
	width:100%; padding:50px 0; position:absolute;
	bottom:0; line-height:1.7;
	font-family:"Helvetica Neue", Arial;
}
footer>div>div, footer ul{display:inline-block; vertical-align:top;}
.footer-img, .footer-text{display:inline-block; vertical-align:top;}

footer>div{margin:0 auto;}

footer p{padding:0; margin:0 0 3px 0;}
footer a{line-height:1.5; color:rgb(80,80,80); font-weight:normal;}
footer li{padding:4px 0;}
footer h6{font-weight:normal; margin:5px 0; font-size:15px; color:gray;}

footer #name{font-size:14px; letter-spacing:-1px;}
#name b{font-weight:900;}
.footer-text{width:200px;}
footer img{width:40px; margin-right:10px;}

footer ul{list-style-type:none; margin:0; padding:0;}
footer .cp{font-size:10px;}
footer .note{font-size:10px; opacity:0.5;}

@media only screen and (max-width:639px){
	#content{padding-bottom:495px;}
	footer ul{padding:10px;}
	footer ul:nth-child(n+2){display:none;}
	footer .icon{margin-right:20px;}
	footer>div>div{margin-top:12px;}
}
@media only screen and (min-width :640px) and (max-width :979px){
	#content{padding-bottom:295px;}
	footer ul{padding:0; width:200px;}
	footer li{font-size:12.5px;}
	.footer-text{width:140px;}
	footer .icon{margin-right:10px;}
	footer>div>div{margin:0 6px;}
}
@media only screen and (min-width :980px){
	#content{padding-bottom:235px;}
	footer{padding:40px 0;}
	footer ul{padding:0 20px!important;}
	footer li{font-size:13px;}
	.footer-text{font-size:13px;}
	footer .icon{margin-right:20px;}
}

#chat textarea{
	background-color:rgb(240,240,240);
	font-size:14px; font-family:Helvetica;
	border:0; border-radius:3px;
	padding:10px; margin:10px 0;
}

#mailingList input{
	border:0; border-radius:3px; font-size:14px; padding:7px 10px; margin:10px 0;
	font-family:"Helvetica Neue", Arial;
}
#mailingList input[type="submit"]{
	border:1px solid white; background-color: transparent;
	font-size:14px; color:white;
	padding:6px 10px; margin:0;
}
#mailingList input[type="submit"]:hover{
	background-color: white; color:black;
}

/*social*/
.soc1{height:24px; width:70px; float:right; padding:6px 5px 0px 5px;}
.soc2{height:24px; width:100px; float:right; padding:0px 5px 0px 0px;}
.fcIc{width:50px; height:50px; border-radius:50px;}

/*columns*/
.column-1280, .column-980, .column-960,
.column-640, .column-470,
.column-320, .column-160,.column-80,
.column-4>div, .column-4>figure,
.column-3>div, .column-3>figure,
.column-2>div, .column-3>figure,
.inline>div
{display: inline-block; vertical-align:top;}

.column-1280{width:1280px;}
.column-980{width:980px;}
.column-960{width:960px;}
.column-640{width:640px;}
.column-470{width:470px;}
.column-320{width:320px;}
.column-240{width:240px;}
.column-160{width:160px;}
.column-80{width:80px;}

/*based on responsive full width*/
@media only screen and (max-width:639px){
    .column-2>div, .column-2>figure{width:300px;}
    .column-3>div, .column-3>figure{width:320px;}
    .column-4>div, .column-4>figure{width:240px;}
}
@media only screen and (min-width:640px) and (max-width:979px){
    .column-2>div, .column-2>figure{width:290px;}
    .column-2>div:nth-of-type(1), .column-2>figure:nth-of-type(1){padding-right:20px;}
    .column-3>div, .column-3>figure{width:200px;}
    .column-4>div, .column-4>figure{width:140px;}
}
@media only screen and (min-width:980px){
    .column-2>div, .column-2>figure{width:450px;}
    .column-2>div:nth-of-type(1), .column-2>figure:nth-of-type(1){padding-right:20px;}
    .column-3>div, .column-3>figure{width:320px;}
    .column-4>div, .column-4>figure{width:240px;}
}

/*present*/
.column2>div, .column3>div, .text{display:inline-block; vertical-align: top;}

/*Mood*/
.mood{
    width:100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-attachment: fixed;
	position:relative;
}

.glass{background-color:rgba(255,255,255,0.5); border-top:solid 1px rgb(230,230,230);}
.over span:nth-child(1){opacity:0.8;}
.over span:nth-child(3){opacity:1;}
.over h1{font-weight:300; opacity:0.6; line-height:0.9;}
.over h1 span{font-weight:100;}
section>div{z-index:1000000; margin:0 auto;}

@media only screen and (max-width:639px){
    .banner{height:220px;}
	.enter{height:320px;}
    .mood img{height:150%; z-index:-10;}
	.over{padding:80px 0 0 10px; width:160px;}
	.over span:nth-child(1){font-size:32px;}
	.over span:nth-child(3){font-size:22px;}
	.over h1{margin-top:15px; font-size:24px;}
}
@media only screen and (min-width:640px) and (max-width:959px){
    .banner{height:320px;}
	.enter{height:320px;}
    .mood img{width:100%; z-index:-10;}
	.over{padding:80px 0 0 180px;}
	.over span:nth-child(1){font-size:36px;}
	.over span:nth-child(3){font-size:24px;}
	.over h1{margin-top:15px; font-size:28px;}
}
@media only screen and (min-width:960px){
    .banner{height:320px;}
	.enter{height:520px;}
	.mood img{width:100%; z-index:-10;}
	.over{padding:150px 0 0 320px;}
	.over span:nth-child(1){font-size:48px;}
	.over span:nth-child(3){font-size:36px;}
	.over h1{margin-top:25px; font-size:42px;}
}

/*Text*/
.paper{padding:30px 0;}
#read {padding:30px 20px;}

@media only screen and (max-width:639px){  
    #leftColumn{width:280px; padding:0 10px;}
	#leftColumn img, #leftColumn p{width:160px;}
    #read{width:300px; padding:20px 10px;}
}
@media only screen and (min-width:640px) and (max-width:979px){
    #leftColumn{width:150px; padding:20px 0 20px 10px;}
	#leftColumn img{width:150px;}
	#leftColumn p{font-size:12px;}
    #read{width:440px;}
}
@media only screen and (min-width:640px){
	#leftColumn, .text{min-height:320px; display:inline-block;}
}
@media only screen and (min-width:980px){
    #leftColumn{width:280px; padding:20px 0px 20px 20px;}
    #read{width:600px;}
}

/*read*/
#left, #right
{display:inline-block; vertical-align: top;}

.start-image{width:180px; margin-right:20px;}
.start-paragraph{width:400px;}

.pageLinks{margin: 10px 0; padding:0; list-style:none;}
.pageLinks>li{padding: 5px 0;}
.pageLinks a{color: #9F8046!important;}
h5{font-weight:normal; margin:0px 0 2px 0;}
h5:active{margin:2px 0 0 0;}

.arr{font-size:14px; width:20px; color:rgb(40,40,40); opacity:0.8;}
#right h2{color:rgb(40,40,40); margin:50px 0 0 0; font-weight:100;}
#right{margin-bottom:20px;}

a.guide{color:#75bd26;}
a.guide:hover{text-decoration: underline;}

@media only screen and (max-width:639px){
    #left{width:90px; padding:10px 10px 0 0;}
	#left h5{font-size:12px; width:70px;}
	.pageLinks{padding:0;}
	.pageLinks>li{font-size:11px;}
	
	#right{width:200px;}
	#right h2{font-size:18px; margin:20px 5px 0 5px;}

	#read img{max-width:300px;}
}
@media only screen and (min-width:640px) and (max-width:979px){
    #left{width:150px; padding:10px 40px 0 0;}
	#left h5{font-size:14px; width:110px;}
	.pageLinks>li{font-size:12px;}
	
	#right{width:450px;}
	#right h2{font-size:24px;}
}
@media only screen and (min-width:980px){
	#left{width:260px; padding:20px 80px 0 0;}    
	#left h5{font-size:16px; width:210px;}
	.pageLinks>li{font-size:13px;}
	
	#right{width:600px;}
	#right h2{font-size:32px;}
}