/* layout styles */
body { padding: 0; margin: 0px; background-color: #000; }
body, .page { padding: 0px; margin: 0px; background-color: #000; }
img { display: block; }
img.full { width: 100%; height: auto; }


/* Layout */

a h1, a h2, a h3, a h4, a h5, a h6,
a span, a time, a p, a div, .item-list a {
    text-decoration: none !important;
}


.page-wrap { width: 100%; overflow: hidden; position: relative; }
.page { position: relative; z-index: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); background: #000; }
.page.no-transform { -webkit-transition: all 0s ease-out; -moz-transition: all 0s ease-out; -ms-transition: all 0s ease-out; -o-transition: all 0s ease-out; transition: all 0s ease-out; -webkit-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -o-transform: none !important; transform: none !important; }
.mobile-menu, .menu-button { display: none; }

.row { width: 100%; display: block; position: relative; clear: both; *zoom: 1; }
.row:before, .row:after { content: ''; display: table; clear: both; height: 0; visibility: hidden; font-size: 0; }
.col { position: relative; float: left; left: 100%; }
.row-header { width: 100%; margin: 0px auto; text-align: left; position: relative; }

.font-icon, .mobile-menu-mask, .menu-button { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; text-indent: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* header */
.header { position: relative; margin: 0; font-size: 0; padding: 35px 0 15px; text-align: center; }


.header .top-menu { position: absolute; left: 0; top: 25px; margin: 0; padding: 0; text-align: left; }
.header .top-menu ul { min-width: 300; }
.header .top-menu li { display: inline-block; *display: inline; *zoom: 1; vertical-align: top; margin: 0 27px 0 0; padding: 0; }
.header .top-menu li a { display: block; font-size: 20px; font-weight: 600; line-height: 25px; }

.header .logo { display: inline-block; *display: inline; *zoom: 1; vertical-align: top; margin: 0 auto; }
.header .logo p { margin: 0; color: #fff; font-size: 20px; line-height: 25px; padding: 15px 0 35px; }
.header .logo a { text-decoration: none; }
.header .logo img, .header .logo svg { display: block; margin: 0; height: auto; max-width: 573px; }
.header .logo .font-icon { text-decoration: none; color: #fff; }
.header .logo .font-icon:before { content:'\e904'; font-size: 25px; position: absolute; left: 0; top: 0; }

.header .search-box { position: absolute; right: 0; top: 23px; margin: 0; padding: 0; }
.header .search-box input:focus { outline: none; }
.header .search-box input[type=text] { color: #fff; line-height: normal; width: 95%; height: 29px; font-family: 'Titillium Web', Arial, sans-serif; font-weight: 600; font-size: 20px; padding: 0 30px 0 2px; margin-right: 10px; border-bottom: 1px solid #777; background-color: transparent; }
.header .search-box .submit-wrap { width: 28px; height: 30px; position: absolute; top: 0; right: 0; }
.header .search-box .submit-wrap:before { content:'\e902'; font-size: 30px; position: absolute; left: 0; top: 0; color: #fff; }
.header .search-box input[type=submit] { position: absolute; top: 0; right: 0; width: 100%; height: 100%; color: transparent; font-size: 0; padding: 0; }

.header .menu { position: relative; }
.header .menu ul { margin: 0; padding: 0; text-align: center; background-color: #7f7f7f; white-space: nowrap; }
.header .menu ul li { display: inline-block; *display: inline; *zoom: 1; vertical-align: top; margin: 0; padding: 0; width: 11.111111111%; }
.header .menu ul li a { display: block; text-decoration: none; color: #fff; padding: 0 25px 2px; font-size: 20px; font-weight: 600; line-height: 48px; background-color: transparent; }
.header .menu ul li a.active, .header .menu ul li a:hover { background-color: #636363; }

.header.sticky { position: fixed; left: 0; top: 0; z-index: 100; padding: 0; width: 100%; }
.header.sticky .row-header { width: 100%; }
.header.sticky .top-menu { display: none; }
.header.sticky .logo { position: absolute; left: 40px; z-index: 2; width: 180px; height: 26px; top: 12px; }
.header.sticky .logo p, .header.sticky .logo a:first-child { display: none; }
.header.sticky .logo .font-icon { display: block; }
.header.sticky.menuOpened { position: absolute; }
.header.sticky .search-box { right: 40px; top: 10px; z-index: 2; }
.header.sticky .search-box input[type=text] { color: #fff; border-color: #fff; background-color: transparent; width: 170px; }
.header.sticky .search-box .submit-wrap { color: #fff; }
.header.sticky .menu ul li { width: auto; }


/* main content */
.main { z-index: 2; position: relative; background-color: #000; }


/* OG BOX */ 

.og-box { max-width: 630px; margin: 50px auto 65px; text-decoration: none; }
.og-box img { float: left; max-width: 280px; height: auto; }
.og-box a { text-decoration: none !important; }
.og-box p { padding: 0;  color: #000; margin: 0;  }
.og-box .text-box { margin-left: 300px; text-align: left !important;   }
.og-box .text-box p { padding-bottom: 55px; color: #000; text-align: left !important; font-size: 18px  !important; }
.og-box .text-box p.eshop {font-size: 18px  !important; }
.og-box .text-box i { font-size: 18px; padding-top: 20px; font-weight: normal; font-style: normal; max-height: 120px;  display: -webkit-box; overflow: hidden;  -webkit-line-clamp: 3; -webkit-box-orient: vertical;   }
.og-box .text-box h4 { font-size: 24px; line-height: 30px; font-weight: 700; padding: 0; text-decoration: none; text-transform: none; }
.og-box a:hover .text-box h4 { text-decoration: none; }


/* forms */
input[type=text], input[type=email], input[type=password], input[type=file], textarea { font-family: 'Titillium Web', Arial, sans-serif; font-weight: normal; box-sizing: border-box; border: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-appearance: none; }
input[type=submit] { overflow: visible; border: none; cursor: pointer; background: none; font-family: 'Titillium Web', Arial, sans-serif; }

::-webkit-input-placeholder { color: #fff; }
:-moz-placeholder { color: #fff; opacity: 1; }
::-moz-placeholder { color: #fff; opacity: 1; }
:-ms-input-placeholder { color: #fff; }
:input-placeholder { color: #fff; }

.header.sticky ::-webkit-input-placeholder { color: #fff; }
.header.sticky :-moz-placeholder { color: #fff; }
.header.sticky ::-moz-placeholder { color: #fff; }
.header.sticky :-ms-input-placeholder { color: #fff; }
.header.sticky :input-placeholder { color: #fff; }

.form input[type=text], .form input[type=email], .form input[type=file], .form input[type=password], .form textarea { text-align: left; display: block; width: 100%; background-color: #fff; height: 40px; line-height: 40px; padding: 0 20px; color: #000; font-size: 20px; margin: 0; border: 1px solid #000; }
.form .error input[type=text], .form .error input[type=email], .form .error input[type=password], .form .error textarea { outline: none; margin: 0; border-color: #ff0000; }
.form input[type=text]:required:invalid, .form input[type=email]:required:invalid, .form input[type=password]:required:invalid { box-shadow: 0 0 0 rgba(0,0,0,0); }
.form input[type=text]:required:focus, .form input[type=email]:required:focus, .form input[type=password]:required:focus, .form textarea:required:focus, .form input[type=text]:disabled, .form input[type=email]:disabled, .form input[type=password]:disabled, .form textarea:disabled, .form textarea:focus { outline: none; }
.form textarea { position: relative; display: block; width: 100%; height: 95px; line-height: 30px; padding: 20px; margin: 0; overflow: hidden; resize: none; }

.form { position: relative; margin: 50px auto 65px; text-align: left; }
.form .row > .half { display: inline-block; vertical-align: top; width: 49%; }
.form .row > label { color: #000; font-size: 24px; line-height: 30px; text-align: left; display: block; }

.form .message { display: block; font-size: 0; line-height: 0; text-align: left; }
.form .error .message { display: block; position: relative; line-height: 24px; color: #ff0000; font-size: 14px; margin-top: 8px; }
.form .ok-message, .form .error-message { font-size: 16px; line-height: 27px; font-weight: 500; padding: 5px 0 5px 35px; position: relative; display: inline-block; *display: inline; *zoom: 1; vertical-align: top; }
.form .ok-message { color: #288948; }
.form .error-message { color: #ff0000; }


/* opacity */
.header.sticky.menuOpened, li a span.play
{ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; }
.mobile-menu-mask
{ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=35)"; filter: alpha(opacity=35); -moz-opacity: 0.35; -khtml-opacity: 0.35; opacity: 0.35; }
.header .search-box .submit-wrap:hover, .item-list ul a:hover img, .page .menu-button:hover, .og-box a:hover img
{ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; }
.foo
{ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); -moz-opacity: 0.75; -khtml-opacity: 0.75; opacity: 0.75; }
.header.sticky, li a:hover span.play
{ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }

/* normal transitions */
.page, a, .header.sticky, .page .menu-button, .og-box img
{ -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.foo
{ -webkit-transition: all 0.5s ease-out 0.15s; -moz-transition: all 0.5s ease-out 0.15s; -ms-transition: all 0.5s ease-out 0.15s; -o-transition: all 0.5s ease-out 0.15s; transition: all 0.5s ease-out 0.15s; }
.foo
{ -webkit-transition: background-color 0.2s ease-out; -moz-transition: background-color 0.2s ease-out; -ms-transition: background-color 0.2s ease-out; -o-transition: background-color 0.2s ease-out; transition: background-color 0.2s ease-out; }
.header .search-box .submit-wrap, li a span.play
{ -webkit-transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; -ms-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; transition: opacity 0.2s ease-out; }

/* IE7 :before, :after hack */
.main {*zoom:expression(runtimeStyle.zoom = 1, insertAdjacentHTML('afterBegin', '<span class="before"></span>'), insertAdjacentHTML('beforeEnd', '<span class="after"></span>'));}



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

.row-header > h1, .row-header > h2, .row-header > h3 { padding-left: 20px; padding-right: 20px; }

/* header */
.header { padding-bottom: 15px; }
.header .top-menu { top: 17px; }
.header .top-menu li { margin: 0 21px 0 0; }
.header .top-menu li a { font-size: 16px; line-height: 20px; }
.header .logo p { font-size: 16px; line-height: 20px; padding-bottom: 30px; }
.header .logo img, .header .logo svg { max-width: 444px; }
.header .logo .font-icon:before { font-size: 19px; }
.header .search-box { top: 16px; }
.header .search-box input[type=text] { height: 23px; font-size: 16px; padding: 0 20px 0 2px; margin-right: 10px; }
.header .search-box .submit-wrap { width: 23px; height: 24px; }
.header .search-box .submit-wrap:before { content:'\e902'; font-size: 24px; }
.header .menu ul li a { padding: 0 25px 1px; font-size: 16px; line-height: 38px; }

.header.sticky .search-box { right: 20px; top: 9px; }
.header.sticky .search-box input[type=text] { width: 130px; }
.header.sticky .logo { left: 20px; width: 138px; height: 20px; top: 10px; }


/* og box */
.og-box { max-width: 550px; margin: 35px auto 45px; }
.og-box img { max-width: 250px; height: auto; }
.og-box .text-box { margin-left: 270px; }
.og-box .text-box p { padding-bottom: 25px; }
.og-box .text-box i { max-height: 139px;}
.og-box .text-box h4 { font-size: 26px; line-height: 36px; }

}


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

/* header */
.header .logo p { font-size: 15px; }

.header .top-menu li { margin: 0 15px 0 0; }
.header .top-menu li a { font-size: 15px; }

.header .menu ul li a { padding: 0 10px 1px; font-size: 15px; line-height: 38px; }
.header .search-box input[type=text] { font-size: 15px; }
.header.sticky .search-box input[type=text] { width: 110px; }

}


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

/* header */
.header .logo img, .header .logo svg { max-width: 345px; }

}



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

/* layout */
body { -webkit-text-size-adjust: 100%; }
img, svg { max-width: 100%; height: auto; }

/* header */
.header { display: none; height: 39px; }
.header.sticky .logo { width: 180px; height: 26px; top: 10px; position: relative; }
.header .logo p, .header .logo a:first-child, .header .top-menu, .header .menu { display: none; }
.header .logo .font-icon { display: block; }
.header .search-box .submit-wrap:before { font-size: 22px; top: 1px; }
.header.sticky { background-color: #7f7f7f; display: block !important; }

.header .menu ul { margin: 0; padding: 0; text-align: center; }
.header .menu ul li { display: inline-block; *display: inline; *zoom: 1; vertical-align: top; margin: 0; padding: 0; }
.header .menu ul li a { display: block; text-decoration: none; color: #fff; padding: 0 25px 2px; font-size: 20px; font-weight: 600; line-height: 48px; background-color: transparent; }
.header .menu ul li a.active, .header .menu ul li a:hover { background-color: #7a1f45; }

.menu-button { position: absolute; left: 16px; top: 9px; cursor: pointer; width: 29px; height: 22px; z-index: 100; display: block; color: #fff; }
.menu-button:before { content:'\e903'; font-size: 15px; position: absolute; left: 4px; top: 3px; color: #fff; }
.menu-button:hover { -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; }
.menu-button.active { left: 10px; }

.mobile-menu { position: fixed; left: 0; top: 0; bottom: 0; right: 55px; overflow: auto; -webkit-overflow-scrolling: touch; color: #2b2b2b; z-index: 0; }
.mobile-menu > .mobile-menu-bg { position: fixed; width: 100%; height: 100%; background-color: #2b2b2b; }
.mobile-menu > div { position: relative; height: 100%; background-color: #2b2b2b; }
.mobile-menu .mobile-menu-inner ul { margin: 0; padding: 0; background-color: #fff; }
.mobile-menu .mobile-menu-inner ul li { margin: 0; padding: 0; background: none; -webkit-transition: background-color 0.1s ease-out; -moz-transition: background-color 0.1s ease-out; -ms-transition: background-color 0.1s ease-out; -o-transition: background-color 0.1s ease-out; transition: background-color 0.1s ease-out; }
.mobile-menu .mobile-menu-inner ul li + li { border-top: 1px solid #afafaf; }
.mobile-menu .mobile-menu-inner ul li a { position: relative; display: block; color: #2b2b2b; text-decoration: none; padding: 15px 20px 13px; line-height: 20px; font-size: 17px; font-weight: 700; text-transform: uppercase; }
.mobile-menu .mobile-menu-inner ul li a.active { color: #808080; }
.mobile-menu .mobile-menu-inner ul li:hover { background-color: #808080; }
.mobile-menu .mobile-menu-inner ul li:hover, .mobile-menu .mobile-menu-inner ul li:hover + li { border-color: #808080; }
.mobile-menu .mobile-menu-inner ul li:hover a { color: #fff; }

.mobile-menu .mobile-menu-inner h4 { font-size: 20px; color: #fff; padding: 30px 20px 15px; }
.mobile-menu .mobile-menu-inner .top-menu { background-color: #2b2b2b; }
.mobile-menu .mobile-menu-inner .top-menu li:first-child { border-top: 1px solid #a0a0a0; }
.mobile-menu .mobile-menu-inner .top-menu li + li { border-color: #a0a0a0; }
.mobile-menu .mobile-menu-inner .top-menu li a { padding: 11px 20px 10px; line-height: 18px; font-size: 15px; color: #fff; }
.mobile-menu .mobile-menu-inner .top-menu li:hover { background-color: #fff; }
.mobile-menu .mobile-menu-inner .top-menu li:hover, .mobile-menu .mobile-menu-inner ul li:hover + li { border-color: #fff; }
.mobile-menu .mobile-menu-inner .top-menu li:hover a { color: #2b2b2b; }

.mobile-menu-mask { background: #000; position: fixed; right: 0px; width: 55px; top: 0px; bottom: 0; z-index: 1; }
.mobile-menu-mask:before { content:'\e903'; font-size: 15px; position: absolute; left: 18px; top: 17px; color: #fff; }

/* main */
.main { padding-top: 50px; }


/* og box */ 
.og-box { max-width: 450px; margin: 30px auto 40px; }
.og-box img { max-width: 200px; }
.og-box .text-box { margin-left: 215px; }
.og-box .text-box i { line-height: 22px !important; }
.og-box .text-box p { padding-bottom: 15px; }
.og-box .text-box p.eshop {font-size: 15px  !important; }
.og-box .text-box h4 { font-size: 19px; line-height: 21px; }

}


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

/* header */
.header .search-box { padding-left: 15px; }

}


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

/* header */
.header.sticky .search-box input[type=text] { width: 0; }

/* og box */
.og-box { max-width: 100%; margin-bottom: 70px; text-align: center; }
.og-box a { position: relative; display: block; padding-top: 0px;}
.og-box a:hover p { color: #c3057e; }
.og-box img { float: none; display: block; max-width: 280px; width: 100%; margin: 0 auto 20px; }
.og-box .text-box { max-width: 280px; margin: 0 auto; text-align: center !important; display: block; position:relative; }
.og-box .text-box p { position: relative; top: 0; left: 0; width: 100%; text-align: center !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.og-box .text-box h4 { font-size: 18px; line-height: 22px; }
.og-box .text-box i { display:none; }
}