/* --- HTML --- */
html { background:#fff; }

body { font:normal 13px/23px 'Open Sans', serif; letter-spacing:0.05rem; color:#000; background:#fff }

section { }

a { color:#6240ad }
a:hover { background-color:#6240ad; color:#fff; padding:0 3px }

button, .button { display:inline-block; background:#6240ad url(../img/button.svg) center right no-repeat;
	color:#fff; padding:15px 45px 15px 25px; font-size:15px; font-weight:700; letter-spacing:1px;
	text-transform:uppercase; border:0; outline:0; transition:0.4s ease all; cursor:pointer
}

button:hover, .button:hover { background-color:#000; color:#fff; padding:15px 45px 15px 25px; }

label { color:#999; font-size:13px }
/* --- HTML --- */


/* --- Styles --- */
.content { position:relative }

.display { font:normal 16px/19px 'Michroma', Verdana, serif }

.bg { position:fixed; top:105px; left:0; right:500px; bottom:45px; -webkit-backface-visibility:hidden }

.background { position:fixed; top:0; left:0; right:0; bottom:0; background-size:contain }

.lila { color:#6240ad }
/* --- Styles --- */


/* --- Navigation bar --- */
.nav-offset { display:block; height:105px}

.top-nav { position:fixed; z-index:998; top:0; left:0; right:0; height:70px; -webkit-backface-visibility:hidden }

.nav-wrapper { position:relative; background-color:#fff; height:70px; border-top:5px solid #6240ad }

.logo { display:inline-block; width:160px; height:70px; margin:0 0 0 30px; background:url(../img/logo.png) center }
.logo a:hover { background-color:transparent; padding:0 }

#hamburger { display:inline-block; width:50px; height:50px; background:url(../img/hamburger.svg); opacity:0.6 }
#hamburger:hover { opacity:1 }

.navigation { position:absolute; top:10px; right:20px }

.navigation a { display:inline-block; color:#000; font-size:14px; margin-right:50px; padding:0 3px; line-height:18px }
.navigation a:hover, .navigation a.active { background:#6240ad; color:#fff; padding:0 3px }

#langs { display:inline-block }
#langs a { display:inline-block; text-transform:uppercase; color:#999; width:30px;
	text-align:center; padding:0; margin:0 5px 0 0 }
#langs a:hover, #langs a.active { font-weight:700; color:#6240ad; background:transparent; padding:0 }

.main-menu { position:relative; display:block; background:#000; width:100%; height:30px; padding-left:41px }

.main-menu:empty { height:4px; background:#eee}

.main-menu a { display:inline-block; padding:5px 25px; margin:-5px 10px; font-size:14px; color:#fff;
	line-height:30px; text-transform:uppercase }

.main-menu a:hover, .main-menu a.active { background:#6240ad; color:#fff }

@media only screen and (max-width : 992px) {



}

@media only screen and (max-width:600px) {

	.logo { margin-left:20px }

	#langs { display:block; text-align:right; margin-top:5px }

	.navigation a { margin:0 6px 0 10px }

	.main-menu { padding-left:5px }

	.main-menu a {font-size:12px; margin:0 0; padding:0 12px }
}
/* --- Navigation bar --- */


/* --- Page selection --- */
.page_select { position:absolute; top:75px; bottom:0; width:50%; text-align:center; overflow:hidden }
.page_select:hover { padding:0; background-color:transparent }

.page_select section { position:absolute; display:block; top:50%; margin-top:-120px; width:100% }


#select_logistics { left:0 }
#select_logistics .bg { position:absolute; top:0; right:0; bottom:0; left:0;
	background-image:url(../img/map_poly.svg); background-position:center; transition:all 0.6s }

#select_logistics .bg_grid { position:absolute; top:0; right:0; bottom:0; left:0; background:url(../img/bg_dots.png) repeat }

.page_select .overlay { position:absolute; top:0; right:0; bottom:0; left:0;
	background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.4) 0%, rgba(0,0,0,0.4) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.4)), color-stop(100%,rgba(0,0,0,0.4)));
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.4) 100%);
	background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.4) 100%);
	background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.4) 100%);
	background: radial-gradient(ellipse at center,  rgba(255,255,255,0.4) 0%,rgba(0,0,0,0.4) 100%);
}

.page_select .vignette { position:absolute; top:0; right:0; bottom:0; left:0; opacity:0; transition:all 0.6s;
	background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.3)));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%);
	background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%);
	background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%);
	background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%);
}

#select_home_fashion { right:0 }
#select_home_fashion .bg { position:absolute; top:0; right:0; bottom:0; left:0; background-image:url(../img/bg_wallpaper.png); transition:all 0.6s }

.page_select:hover .bg { transform:scale(1.05) }
.page_select:hover .vignette{ opacity:1 }

.page_select .title { margin:10px auto; font-size:58px; line-height:60px; color:#6240ad }

.page_select .subtitle { display:inline-block; margin:10px auto; padding:5px 7px 7px 7px; font-size:16px; line-height:16px; text-transform:uppercase; color:#fff; background:#000 }

.page_select .continue { display:inline-block; width:60px; height:30px; background:#000 url(../img/continue.svg) center }

#select_home_fashion .title { color:#7A6A3D }
#select_home_fashion .continue { background-color:#7A6A3D }


#select_home_fashion.domdeco .bg { background-image:url(../img/bg_domdeco.jpg); background-size: cover }

#select_home_fashion.domdeco .title { color: #fff }
#select_home_fashion.domdeco .continue { background-color:#000 }

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

	.page_select {left:0; right:0; width:100%; height:50%}

	#select_logistics { top:80px; bottom:auto }

	#select_home_fashion { top:auto; bottom:-55px }
}

@media only screen and (max-width:600px) {

	.page_select .title { font-size:32px }
	.page_select .subtitle { font-size:12px }

}
/* --- Page selection --- */


/* --- Page layout --- */
.catchline { position:absolute; top:180px; left:0 }

.catchline h3, .catchline h4 { display:inline-block; font:normal 40px/42px 'Michroma', serif;
	background:#000; color:#fff; padding:5px 10px 10px 40px; margin:0 }

.catchline h4 { border-left:120px solid #6240ad; padding:5px 10px 10px 20px; background:#fff; color:#6240ad }

.side { position:fixed; top:105px; right:0; bottom:45px; width:25%; min-width:500px; background:#fff }

.side h2 { font:normal 16px/19px 'Michroma', Verdana, serif; font-size:28px; color:#6240ad; margin-bottom:60px }

.side .button { margin-top:30px }

.side .content { position:relative; padding:50px 40px; height:100%; overflow:auto; box-sizing:border-box }


@media only screen and (max-width:1360px) {

	.catchline h3, .catchline h4 { font-size:32px }
}

@media only screen and (max-width:1200px) {

	.catchline h3, .catchline h4 { font-size:24px }
}

@media only screen and (max-width:1000px) {

	.catchline h3, .catchline h4 { display:none }
}

@media only screen and (max-width:800px) {

	.side { min-width:inherit; width:100% }

	.bg { display:none }

	#select_home_fashion.domdeco .bg { display:block }
}
/* --- Page layout --- */


/* --- Logistics Homepage --- */
.logistics_home { background:url(../img/bg_home.jpg) right; background-size:cover; width:76% }

.about_us { background:url(../img/bg_about.jpg) right; background-size:cover; width:76% }
/* --- Logistics Homepage --- */


/* --- Partner countries page --- */
.countries { background:url(../img/map_dots.png) #1e1a33 40px -160px no-repeat; background-size:1200px; width:76% }

.countries .target { position:absolute; width:60px; height:60px; background:url(../img/target.svg) 0 0; cursor:pointer }
.countries .target .active { width:60px; height:60px; transform:scale(0.7); transition:all 0.3s;
	background:url(../img/target.svg) 0 -60px; opacity:0 }
.countries .target:hover .active, .countries .target.active .active { transform:scale(1); opacity:1 }



#countries_list { list-style:none; margin:0; padding:0 }

#countries_list li { display:block; margin:0 0 30px -40px; padding:0 }

#countries_list li .arrow_box { display:inline-block; text-align:center; padding:5px 4px 5px 12px; width:30px; height:32px;
	vertical-align:text-top; box-sizing:border-box; transition:all 0.15s }

#countries_list li .arrow { display:block; font-size:28px; line-height:18px; vertical-align:text-top;
	color:#000; transform:scale(0.6,1); transition:all 0.15s }

#countries_list li .title { display:inline-block; font-size:16px; padding:5px 10px; height:32px;
	vertical-align:text-top; box-sizing:border-box; transition:all 0.15s }

#countries_list li .country { cursor:pointer }

#countries_list li .country:hover .title,
#countries_list li.active .title { color:#fff; background:#000 }

#countries_list li .country:hover .arrow_box,
#countries_list li.active .arrow_box { background:#6240ad }
#countries_list li .country:hover .arrow,
#countries_list li.active .arrow { color:#fff; /*transform:scale(1,0.6) rotate(90deg) translate(2px,2px)*/ }

#countries_list li.active .hideable { display:block }

#countries_list li.marked .title { color:#6240ad }
#countries_list li.marked.active .title { color:#fff }
#countries_list li.marked .arrow_box { background:#6240ad }
#countries_list li.marked .arrow { color:#fff }

#countries_list li .hideable a { display:block; margin:0 5px 0 40px; height:40px; line-height:50px }
#countries_list li .hideable a:hover { padding:0; background:none; color:#000 }

#countries_list .hideable { display:none }

@media only screen and (max-width:1400px) {

	.countries { left:-140px }
}

@media only screen and (max-width:1000px) {

	.countries { left:-240px }
}
/* --- Partner countries page --- */


/* --- Contact page --- */
#contact_form p { margin:4px 0 20px 0; font-size:15px }
/* --- Contact page --- */


/* --- Distributors page --- */
.item { display:inline-block; margin:10px 10px 100px 10px; text-align:center; vertical-align:top }

.item .image { margin-bottom:20px }

.item .title { font-size:18px; width:280px }

.item .subtitle { font-size:14px; text-transform:uppercase; font-weight:bold; color:#6240ad }
/* --- Distributors page --- */


/* --- Footer --- */
footer { position:fixed; bottom:0; left:0; right:0; color:#ccc; height:45px; padding:10px 30px; box-sizing:border-box;
	background:#000; -webkit-backface-visibility:hidden }

footer a, footer span { color:#fff }
footer a:hover { text-decoration:underline; background:none; padding:0 }
/* --- Footer --- */


@media only screen and (max-width:992px) {

}

@media only screen and (max-width:600px) {

	footer { padding:4px 30px; line-height:16px }

	footer .left, footer .right { float:none!important; display:block; text-align:center }
}