/* stylesheet for demo and examples */
hr{display: block;	height: 0;	border: 0; 	border-top: 1px solid rgba(0,0,0,0.2); 	border-bottom: 1px solid rgba(255,255,255,0.2);	margin:1.5em 0;	padding:0;}
#navigation-menu, #content{	position: relative;}
#navigation-menu{ position: fixed;top:7.5em; right:0px;	left: auto;	bottom: auto; z-index: 9; text-shadow: none; font-size: 0.85em;}
#navigation-menu ul{ overflow: hidden;	background: #564a44; background: rgba(57,63,72,.35); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
#navigation-menu li{ margin: 3px;}
#navigation-menu a{	display: block; color:#fff;	padding: 0.2em 0.6em; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;}
#navigation-menu a:hover, #navigation-menu a.mPS2id-highlight{	background: rgba(146,7,131,1); color: #fff;}

#content section{ text-shadow: none;}
.bg-pink{
	background: #94cbce;
	background: rgb(214,251,252); 
	background: linear-gradient(to bottom,#fff 30%,#fcedf4 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#fcedf4',GradientType=1 ); 
	color: #25201e;
}

.content{ padding:5% 3em;}
.content hr + a, .content hr + a + a{	margin-right: 2em;}
.content h1{ color: #920783; text-align: center; margin-bottom:1.5em;}
.content h2{ display: block; padding-bottom:.75em; font-size:2.35em; line-height:1.5em; color:#393f48; text-align: center;  background: url(../images/line-bk.jpg) no-repeat center  bottom; text-shadow: 1px 1px 3px rgba(0, 0, 0, .2); }
.content h3{ margin:2% 0px;font-size:1.8em; color:#34495e; display: block; line-height:1.45em; min-height:40px; margin-bottom:1%;}
.info p{ text-align:left; }
.bed{ background: url(../images/application/bed/home.jpg ) no-repeat left top; background-size: cover; min-height:900px;}
.bed-2{ background: url(../images/application/bed/bg2.png) no-repeat right top rgba(148,203,206,.1); background-size:800px auto;   min-height: 600px;}
.bed-3{ background: url(../images/application/bed/bg3.png) no-repeat right bottom rgba(246,246,220,.3); background-size:600px auto;   min-height: 600px;}
.bed-4{ background-image: url(../images/application/hand.png) ; background-position: left bottom; background-repeat: no-repeat;background-size:20%; min-height:400px;}
.apper{ background: url(../images/application/clothes/apper.jpg) no-repeat left top; background-size:100%  auto; background-attachment: fixed;}
.apper-1{background-image: url(../images/top-icon.png), url(../images/application/clothes/apper2.jpg); background-position: top center, right bottom;   background-repeat: no-repeat;  background-color: #e5eef0;}
.apper-2{ background: url(../images/application/clothes/apper-2.jpg) no-repeat right bottom rgba(148,203,206,.1);  background-attachment:fixed; background-size: cover;   min-height: 600px;}
.apper-3{ background-image: url(../images/application/clothes/apper-4.png),url(../images/application/clothes/apper-3.jpg);background-repeat: no-repeat ;background-size:auto auto,100% 665px; background-position: right top, center bottom; background-color:#c7c2bf; min-height:500px;}
.med{background-image: url(../images/application/medical/medical-bg2.jpg), url(../images/application/mask/mask-add-bg.jpg); background-repeat: no-repeat; background-position:left top,left 57%;background-size:100% auto, auto;}
.med-2{ background-image: url(../images/application/medical/mask.png), url(../images/application/medical/mask-bg.png); background-position:right top, right top; background-repeat: no-repeat,no-repeat;
background-size:40% auto,70% auto; }
.med-3{ background: url(../images/application/medical/medical-bg2.jpg) no-repeat right top rgba(148,203,206,.1); background-size: cover; }

.med-4{ background-image:url(../images/application/medical/medical-bg2.jpg), url(../images/application/mask/mask-add-bg2.jpg), url(../images/application/mask/mask-add-bg3.jpg); background-position: right 0px, left 45%,right bottom;background-repeat: no-repeat; background-size:contain, auto,40% auto;}
.other{ background: url(../images/application/other/bg.jpg) no-repeat left top; background-size: cover; min-height:900px;}
.other-2{ background: url(../images/application/other/bg2.jpg) no-repeat left top; background-size: cover; }
.other-3{ background: url(../images/application/other/bg.png) no-repeat right top #f8f7f6; background-size:auto 100%; }
.block-blue{ background: url(../images/top-icon.png) top center #e5eef0 no-repeat;}
.block-about{ background-image: url(../images/top-icon.png),url(../images/about/about-02.jpg); background-position:top  center, left top; background-repeat: no-repeat, no-repeat; }
.block-ff{ background: url(../images/top-icon.png) top center #f8f8f6 no-repeat;}
.block-vision{background-image:  url(../images/top-icon.png),url(../images/about/vision-bg.jpg); background-color:#e5eef0; background-repeat: no-repeat; background-position: center top, right bottom;}
.block-about h2,.block-about h3{ color:#fff !important; text-align: center; margin:0px !important;}




/*banner*/
.banner-Top {/* min-width:960px;*/ margin: 0 auto; /*background:#666;*/ height:320px; position: relative;  background-repeat:no-repeat; background-position:center 200px; background-size:cover; }
.banner-Top h2 { text-align:center; font-size: 2.65em;  padding-bottom: 0.3em; padding-top:60px;  }
.banner-Top p { text-align:center; width:80%; max-width: 420px; margin:auto; color:#FFF;  font-size:1.2em; line-height:1.5em; font-family:'Oswald', Helvetica, Arial, sans-serif; }
.mask-smart{ background-image:url(../images/application/mask/banner-smart.png); background-position: center 80px; background-size: auto;}


.service{ width:1002px; margin:0px auto; text-align: center;}
.service h2{ text-align: center;}
.service p{ width:80%;  margin:5% auto;display: block; color:#677475;}
.info{ width:65%; display: inline-block; vertical-align:top; text-align: left;}
.half{ width:30%; display: inline-block; margin:2% auto; }
.col-full{margin:2% auto; width:92%; display:block;vertical-align: text-top;}
.col-2{ margin:1% 2% 1% 2%; width:42%;  display: inline-block;vertical-align: top; padding-left:2%}
.col-2-no{ margin:1% auto; width:44%;  display: inline-block;vertical-align: top;}
.col-3{ margin:0px; width:30%;  display: inline-block;vertical-align:text-top; padding-left:2%}

.col-5{ width:50%;  display: inline-block;vertical-align: top;}
.col-8{width:70%; margin:0px auto; display: block; text-align: center; }

/*li style*/
.block-4,.block-5{ width:auto; margin:3% auto; text-align: center;}
.block-4 li{width:16%; display: inline-block; padding:0px 2%; margin: 1%; vertical-align:top; text-align: left; font-size:1em; color:#34495e;  font-weight:400; border-right: solid 1px rgba(255,255,255,.3); text-shadow:0px 1px 1px rgba(255,255,255,1);}
.block-4 li:last-of-type,.block-5 li:last-of-type{ border-right: none;}
.block-4 li img{ display: block; }
.block-5 li{width:22%; display: inline-block; padding:0px 2%; margin: 1%; color:#FFF; vertical-align:top; text-align: left; word-wrap: break-word; font-size:1em;  font-weight:400; border-right: solid 1px rgba(255,255,255,1); text-shadow:0px 1px 1px rgba(0,0,0,1);}
.block-5 li strong{ display: block;}
.block-3{ width:70%; margin:1% auto; text-align: center;}
.block-3 li{width:30%; display: inline-block;vertical-align:top; text-align: left; font-size:1em;  font-weight:400; text-shadow:0px 1px 1px rgba(0,0,0,1);}
ul.dot,ul.comon{ width:90%; display: block; margin:2% auto;  text-align: left; vertical-align:text-top;}
ul.dot li{padding:2px 0px 2px 20px; width:33%; display: inline-block; vertical-align:text-top;background: url(../images/icon-check.png) no-repeat left 5px; background-size:16px; font-weight:600; }
ul.comon li{padding:2px 0px 2px 20px; margin-left:2%; width:45%; display: inline-block; background: url(../images/dot.png) no-repeat left 5px; background-size:16px; font-weight:300; vertical-align: text-top;}
ul.comon li.full{width:90% !important; display:block;}


.range{ width:100%; display: block;  margin:2% auto;}
.range li{ width:16%; display: inline-block; padding:0px; margin: 1%; vertical-align:top; text-align: center; font-size:.9em; font-weight:300;}
.circle{ width:100px; height:100px; margin:0px auto; border: solid 3px rgba(57,63,72,.15);border-radius:50em; display: block; background:rgba(255,255,255,.65);}
.circle img{ width:100px; height:100px;border-radius:50em;}
/*ABOUT*/
.about{ background: url(../images/about/about-01.jpg) no-repeat left top; background-size:30% auto;}

/*seacell*/
.seacell{ background: url(../images/brand/seacell/Seacell-bg.jpg) no-repeat center top; background-attachment: fixed; background-size: contain;}
.seacell-2{ background: url(../images/brand/seacell/Seacell-bg2.jpg) no-repeat center top; background-size: 100% auto;  background-attachment: scroll; min-height:600px;}
.seacell-2 h2,.seacell-2 h3,.seacell-2 p{ color:#FFF;}
.box-grid{ width:100%; max-width:1024px; margin:1% auto; display: block;}
.bg-gray{ background-color:#878b94; }
.bg-purple{ background-color:#bd8cbf;}
.bg-red{ background-color:#f5989d;}
.bg-brown{ background-color:#e7bd8e;}
.bg-fuchsia{ background-color:#d56983;}
.box-all{ width:100%; float:left; margin:5px auto; }
.box-all h3{ font-size:2em; color:#fff; font-weight:200; }
.box-all p{ font-size:1em; color:#fff; line-height:1.35em;}

.box-wrap{ float:left;padding:2% 4%; text-align: left; width:50%;}
.box-img-left{ float:left; width:469px; height:auto;  padding:0; margin:0;}
.box-img-right{ float:right; width:469px; height:auto;  padding:0; margin:0; text-align:right;}

/*smart*/
.smart{ background: url(../images/brand/smart/Smartcel-bg.jpg) no-repeat center top; background-attachment: fixed; background-size: contain;}
.smart-2{ background-image:url(../images/top-icon.png), url(../images/brand/smart/Smartcel-bg2.jpg), url(../images/brand/smart/color-bg.jpg); background-position:center top,left top, left top; background-color:#bac6d1; background-repeat: no-repeat, no-repeat, repeat-y;}
.smart-2 h4{ color:#4295b2; font-size:2em; padding:1.5em 2em; text-shadow:1px 1px 1px rgba(255,255,255,1);}

/*socks*/
.socks{ background-image: url(../images/application/sock/sock-left.png), url(../images/application/sock/sock-right.png); background-position: left bottom, right bottom; background-repeat: no-repeat; background-color:#e7eaf1;}
.socks-2{ background-image: url(../images/application/sock/white.jpg), url(../images/application/sock/sock-bg2.jpg); background-position:left top, right top; background-repeat:repeat-y, repeat-y; background-size:50% 100%,50%; margin:-2% auto 0px 0px; padding:0px 0px 2% 0px;}
#content .wrapper .col-full .col-2-no p{ color:#FFF; padding-left:8%;}
/*ESCURA*/
.escura{ background-image: url(../images/brand/escura/escura-bg.jpg), url(../images/brand/escura/escura-bg-x.jpg); background-position: center top, left top; background-repeat: no-repeat, repeat-y;background-attachment: fixed; background-size: contain;}
.escura-2{ margin-top:-5%; padding:1% 0px 0px 0px;background-image: url(../images/brand/escura/escura-2.jpg), url(../images/brand/escura/escura-block.png); background-position: left top, right top; background-repeat: no-repeat, repeat; background-color:#fcedf4; background-size:50% auto, auto;}
.escura-3{ background: url(../images/brand/escura/escura-bg3.jpg) no-repeat center top #e1f0f1; background-attachment: fixed; background-size: contain; margin-top:-2%;}
.escura-4 {
    background-image: url(../images/application/sock/white.jpg), url(../images/brand/escura/escura_05.jpg);
    background-position: left top, right top;
    background-repeat: repeat-y, repeat-y;
    background-size:38% 100%,62%;
    margin: -2% auto 0px 0px;
    padding: 0px 0px 2% 0px;
}
.escura-4 h2{ margin-top:6%;}
.escura-4 h3{ font-size:1.75em;}
.escura-4 h2,.escura-4 h3, .escura-4 hr{ padding-left:5% !important; margin-left:3%; margin-bottom:0px; padding-bottom:0px;}
.escura-5{ background: url(../images/brand/escura/escura-bg-2.jpg) no-repeat center bottom #fdfdfd; background-size:100%; margin-top:-2%;}

/**/
.attest{ display: block; font-size:.8em;text-align: left; margin-bottom:2%;}
.attest img{ padding:1%;display: block; text-align:left;}
/**/
.title{ margin:3% auto; padding-top:2%; color:#920783;display: block;}
@media only screen and (max-width: 1440px){
.escura-2{ margin-top:-5%; padding:1% 0px 0px 0px;background-image: url(../images/brand/escura/escura-2.jpg), url(../images/brand/escura/escura-block.png); background-position: left top, right top; background-repeat: no-repeat, repeat; background-color:#fcedf4; background-size:50% auto, auto;}

}
@media only screen and (max-width: 1366px){
.content{ padding:10% 3em;}
.seacell-2{background-size: auto 800px;  background-attachment: scroll; }

}
@media only screen and (max-width: 1280px){
.escura-2{ background-size:auto 100%, auto; background-position:-100px top,right top;}
.escura-4 { background-size: 30% 100%,70%;}
}
@media only screen and (min-width: 1024px){
	
	.content, footer, 
	.horizontal-layout header, .horizontal-layout .content, .horizontal-layout footer,
	.auto-layout .content{
		padding-right: 3em;
		padding-left: 3em;
	}
	
	#navigation-menu{
		font-size: 1em;
		top: 100px;
	}
	
	.horizontal-layout #navigation-menu, .auto-layout #navigation-menu{
		right: 3em;
		left: auto;
		top: 1.55em;
	}
	
	#navigation-menu ul{
		-moz-border-radius: 17px; -webkit-border-radius: 17px; border-radius: 17px;
	}
	
	#navigation-menu li{
		float: left;
		margin: 3px 5px;
	}
	
	#navigation-menu a{
		-moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;
	}
	
}
@media only screen and (max-width: 768px){
.block-5 li {width: 45%; margin:3% auto 3% 3%; border-bottom: solid 1px rgba(255,255,255,1); border-right: none;}
.block-about { background-color:#94009c;}
.col-2,.service{width: 100%;}
.col-2 img{text-align: center;}
.apper { background-position: center 14%; background-size: 100% auto;}
.bed-4 {background-size:30%;}
.apper-3 {
    background-size: auto 50%,auto;
    background-position: right bottom, center top;
    min-height:600px;
}
ul.dot li { width:48%;}

}
@media only screen and (max-width: 640px){
ul.dot li ,.service p{ width:100%;}
.content h2{ font-size:2em;}
.purple,.gray{ width:100%; margin:2% 0px;}
.apper-1{ background-size:auto auto,180% auto;background-position: top center,20% bottom;}

}
@media only screen and (max-width: 568px){
h1{ font-size:2em;}
.content {
    padding: 10% 1em;
}
.content h2{ font-size:1.6em;}
ul.dot, ul.comon {width: 100%;}
.attest{margin-bottom:4%; word-wrap:break-word;}
.attest img{ text-align:center; padding-left:5%;}
.bed-4 {background-size:50%;}

}