/* LESS Document */ @charset "utf-8"; @mineColor: #0f141a; /*dark gray*/ @themeColor: #000000; /*black*/ @additionalColor: #ffffff; /*white*/ @fontMine: 'apercu-regular'; /*font-family: 'apercu-regular', sans-serif;*/ @fontAdditional: 'apercu-bold'; /*font-family: 'apercu-bold'*/ @fontAddRegular: 'apercu-italic'; /*font-family: 'apercu-italic'*/ @font-face { font-family: 'apercu-italic'; src: url(../fonts/apercu-italic.eot); src: url(../fonts/apercu-italic.eot?#iefix) format('embedded-opentype'), url(../fonts/apercu-italic.woff) format('woff'), url(../fonts/apercu-italic.woff2) format('woff2'), url(../fonts/apercu-italic.ttf) format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: @fontMine; src: url(../fonts/apercu-regular.eot); src: url(../fonts/apercu-regular.eot?#iefix) format('embedded-opentype'), url(../fonts/apercu-regular.woff) format('woff'), url(../fonts/apercu-regular.woff2) format('woff2'), url(../fonts/apercu-regular.ttf) format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: @fontAdditional; src: url(../fonts/apercu-bold.eot); src: url(../fonts/apercu-bold.eot?#iefix) format('embedded-opentype'), url(../fonts/apercu-bold.woff) format('woff'), url(../fonts/apercu-bold.woff2) format('woff2'), url(../fonts/apercu-bold.ttf) format('truetype'); font-weight: normal; font-style: normal; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: @additionalColor; color: @mineColor; font-family: @fontMine; padding: 0; margin: 0; } header { width: 100%; } .mainTop { margin: 0; } .mainTop .container-fluid { padding-left: 0px; padding-right: 0px; } .menu_top .navbar-nav{ display:flex; li{ display:flex; align-content: space-between; } } .navbar-nav > li > a .min_w_menu::before { @media (max-width: 767px) { color: #ffffff; height: 0;} } .navbar-nav > li > a .min_w_menu { @media (max-width: 767px) { padding: 0 3px; display: block; position: relative; color: #ffffff;} } .top_line { position: relative; float: left; height: 64px; background-color: @additionalColor; padding: 14px 0 0 0; } .navbar-nav > li > a { font-size: 12px; font-family: @fontAdditional; text-transform: uppercase; letter-spacing: 0.5px; color: @mineColor; text-align: center; overflow: hidden; padding: 0; margin: 25px 47px 25px; @media (max-width: 979px) { /*color: @additionalColor;*/ margin: 25px 20px 25px; } } .shop .navbar-nav > li > a { margin: 25px 0 25px; } .navbar-nav > li > a:hover { color: @mineColor; @media (max-width: 979px) { color: @additionalColor; } } .navbar-nav > li > a::after { background: #0e141a none repeat scroll 0 0; content: ""; height: 100%; position: absolute; right: 0; top: 0; transform: translate3d(0, 100%, 0); transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; width: 100%; z-index: -1; } .navbar-nav > li > a.item_buy::after { background: #468894 none repeat scroll 0 0; content: ""; height: 100%; position: absolute; right: 0; top: 0; transform: translate3d(0, 100%, 0); transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; width: 100%; z-index: -1; } .navbar-nav > .activ_blue > a.item_buy::after { background: #468894 none repeat scroll 0 0; content: ""; height: 100%; position: absolute; right: 0; top: 0; transform: none; transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; width: 100%; z-index: -1; } .navbar-nav > .activ_blue > a.item_buy:hover::after { transform: translate3d(0px, 0px, 0px); } .navbar-nav > li > a:hover::after { transform: translate3d(0px, 0px, 0px); } .navbar-nav > li > a .min_w_menu { padding: 0 3px; display: block; position: relative; /*color: #ffffff;*/ } .navbar-nav > li > a .min_w_menu::before { color: @mineColor; content: attr(data-letters); left: 0; right: 0; overflow: hidden; position: absolute; text-align: center; transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; height: 100%; @media (max-width: 1024px) { /*color: @additionalColor;*/ height: 0; } } .navbar-nav > li > a:hover .min_w_menu::before { height: 0; } .navbar-nav > li > a.activ_menu .min_w_menu::before { color: #ffffff !important; background-color: @mineColor; } .navbar-nav > li.active_blue > a.activ_menu .min_w_menu::before { color: #ffffff !important; background-color: #468894 !important; } .min_w_menu:hover { display: inline-block; //padding: 0 3px; color: @additionalColor; } .navbar-nav .activ a .min_w_menu, .navbar-nav .activ a .min_w_menu::before { display: inline-block; //padding: 0 3px; background: @mineColor; color: @additionalColor; @media (max-width: 979px) { color: @mineColor; background: @additionalColor; } } .nav > li > a:focus, .nav > li > a:hover { background-color: transparent; } .nav_top_line { position: relative; width: 100%; clear: both; .language { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); padding-right: 10px; padding: 0 20px 30px 0; a { color: @additionalColor; } } .navbar-toggle { a { font-size: 12px; font-family: @fontAdditional; text-transform: uppercase; letter-spacing: 0.5px; color: @additionalColor; margin-right: -15px; } } } .navbar-header{ left: 15px; position: absolute; top: 0; z-index:10006; @media (max-width: 767px) { width:100%; background-color:#ffffff; } } .navbar-collapse.in { overflow-y: auto; position: fixed; top: 0; width: 100%; z-index: 10010; height: 100%; } .navbar-nav > li > a > .min_w_menu, .nav > li > a > .min_w_menu { @media (max-width: 979px) { display: inline-block; } } .navbar-nav > li > a:focus .min_w_menu, .nav > li > a:focus .min_w_menu { @media (max-width: 979px) { background-color: @additionalColor; color: #0e141a; } } .collapse.in { @media (max-width: 767px) { background: @mineColor; } } /*&:focus{ background-color: @additionalColor; }*/ @media (max-width: 767px) { color: @additionalColor; padding: 40px 3px 40px; width: 100%; &:hover { color: @additionalColor; } &:focus { color: @mineColor; } } .navTopMenu { display: table; margin: auto; @media (max-width: 767px) { width: 100%; height:100%; } } .shop { position: absolute; right: 0; top: 0; font-size: 12px; font-family: @fontAdditional; text-transform: uppercase; letter-spacing: 0, 5px; padding: 0 15px 0 0; a { text-decoration: none; color: @mineColor; } @media (max-width: 979px) { padding: 27px 0 0 0; } @media (max-width: 1024px) { display: none !important; } } .navbar-brand { width: 96px; height: 36px; padding: 15px 15px 50px !important; background-image:none !important; img{ @media (max-width: 767px) { width:80px; height:auto; } } } .navbar-toggle { margin-right: 0; a { font-size: 12px; font-family: @fontAdditional; text-transform: uppercase; letter-spacing: 0.5px; color: @mineColor; } &:focus .mainTop { background-color: #0e141a } @media (max-width: 979px) { margin-top: 10px; margin-bottom: 10px; min-width:95px; } } .h1, h1 { font-size: 56px; font-family: @fontAdditional; text-align: left; line-height: 1.14; color:#0f141a; @media (max-width: 1200px) { font-size: 46px; } @media (max-width: 979px) { font-size: 36px; line-height: 1.17; } @media (max-width: 767px) { font-size: 24px; line-height: 1.17; } a{ color:#0f141a; text-decoration:underline; &:hover{ text-decoration:none; } } } .color_mine { color: @mineColor; } .color_add { color: @additionalColor; } .carousel-inner { width: 100%; overflow: hidden; max-height:90vh; } #carousel-example-generic{ .item .h1{ top: 0px; left: -70px; @media (max-width: 979px) { top: -10px; left: -40px; } @media (max-width: 767px) { left: -20px; } @media (max-width: 400px) { width:250px; } } .position_caption_name{ @media (max-width: 767px) { left:30px; } } .carousel-caption{ left:7%; @media (max-width: 767px) { left:0; } } .carousel-inner { @media (max-width: 767px) { margin-top:66px; } } } .carousel-indicators li { width: 30px; height: 2px; border: 1px solid rgba(15, 20, 26, 0.25); border-radius: 0; margin: 0 10px; } .carousel-indicators .active { width: 30px; height: 2px; border: 1px solid #0e141a; border-radius: 0; margin: 0 10px; background-color:transparent; } .carousel-indicators { bottom: -40px; } .carousel-control.right{ right:0; @media (max-width: 1011px) { right:0; } } .carousel-control.left, .carousel-control.right { background-image: none; @media (max-width: 460px) { width: auto; } } .carousel_arr { display: table; height: 100%; margin: auto; img{ width:57px; height:57px; } } .carousel_arr div { display: table-cell; vertical-align: middle; } .carousel-caption { top: 0; bottom: 0; left: 14.5%; right: 14.5%; text-shadow: none; @media (max-width: 979px) { left: 3%; } @media (max-width: 767px) { left: 0; } } .position_caption_name { position: absolute; bottom: 168px; left: 47px; @media (max-width: 979px) { position: absolute; bottom: 120px; left: 47px; } @media (max-width: 767px) { position: absolute; bottom: 49px; left: 47px; .h1 { position: absolute; top: 170px; left: -23px; } } @media (max-width: 450px) { position: absolute; bottom: 49px; left: 47px; .h1 { position: absolute; top: 170px; left: -23px; } } } .position_caption_name_1 { position: absolute; top: 363px; left: 0; @media (max-width: 979px) { position: absolute; bottom: 120px; left: 47px; } @media (max-width: 767px) { position: absolute; bottom: 49px; left: 47px; .h1 { position: absolute; top: 170px; left: -23px; } } } .item { .h1 { position: absolute; top: 70px; left: -30px; width: 800px; } @media (max-width: 979px) { .h1 { position: absolute; top: 10px; left: -30px; width: 500px; } } @media (max-width: 767px) { .h1 { position: absolute; top: 10px; left: -30px; width: 350px; } } @media (max-width: 450px) { .h1 { position: absolute; top: -10px; left: -30px; width: 280px; } } } #right_scrol_box { position: absolute; top: 0; right: 0; bottom: 0; width: 64px; background-color: @additionalColor; z-index: 100; overflow: hidden; @media (max-width: 1024px) { display: none !important; } } .language { display: table-cell; vertical-align: middle; -webkit-transform: rotate(-270deg); transform: rotate(-270deg); font-family: @fontAdditional; font-size: 12px; letter-spacing: 0.5px; text-align: center; text-transform: uppercase; a { text-decoration: none; color: @mineColor; } } .scroll { position: absolute; bottom: 83px; right: 5px; -webkit-transform: rotate(-270deg); transform: rotate(-270deg); font-family: @fontAdditional; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; &:after { content: " "; position: absolute; bottom: 9px; right: -70px; width: 60px; height: 2px; margin-top: 10px; background-color: #0e141a; border: none; } a { text-decoration: none; color: @mineColor; } } .vert_position { position: relative; width: 100%; height: 100%; display: table; } .vert_position_1 { display: table; margin: auto; } .vert_position_2 { display: table; } .vert_align { margin: auto; display: table-cell; vertical-align: middle; } .no_padd { padding: 0; } .top_padd { padding: 140px 0 0 0; @media (max-width: 1024px) { padding: 120px 0 0 0; } @media (max-width: 767px) { padding: 100px 0 0 0; } } .top_padd224 { padding: 200px 0 0 0; @media (max-width: 767px) { padding: 100px 0 0 0; } } .equal, .equal > div[class*='col-'] { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex: 1 0 auto; } .text_24 { font-family: @fontAdditional; font-size: 24px; line-height: 1.5; @media (max-width: 1200px) { font-size: 24px; line-height: 1.44; } @media (max-width: 979px) { font-size: 18px; line-height: 1.44; } @media (max-width: 767px) { font-size: 18px; line-height: 1.44; } } .text_24_1 { font-family: @fontAdditional; font-size: 24px; line-height: 1.5; @media (max-width: 1200px) { font-size: 24px; line-height: 1.44; } @media (max-width: 767px) { font-size: 18px; line-height: 1.44; } } .text_with_rectangle { display: table-cell; vertical-align: middle; padding: 20px; background-image: url(../assets/rectangles/desk_rec_insight.svg); /*url("../assets/rectangles/desk_rec_insight.svg");*/ background-position: center; background-repeat: no-repeat; height: 450px; @media (max-width: 1200px) { background-image: url("../assets/rectangles/desk_rec_insight.svg"); } @media (max-width: 979px) { height: 500px; background-image: url("../assets/rectangles/tab_rec_insight.svg"); } @media (max-width: 767px) { height: 390px; background-image: url("../assets/rectangles/mob_rec_insight.svg"); } @media (max-width: 360px) { height: 390px; background-image: url("../assets/rectangles/mob_rec_insight.svg"); } } .text_with_rectangle_1 { background-image: url(../assets/rectangles/desk_rec_article.svg); background-position: center; background-repeat: no-repeat; height: 474px; margin-bottom: 350px; margin-top: 280px; padding-top: 39px; @media (max-width: 1200px) { background-image: url("../assets/rectangles/desk_rec_article.svg"); background-size: 90%; } @media (max-width: 979px) { height: 310px; background-image: url("../assets/rectangles/tab_rec_article.svg"); background-size: 100%; margin-top: 120px; } @media (max-width: 767px) { height: 333px; background-image: url("../assets/rectangles/mob_rec_article.svg"); margin-top: 50px; margin-bottom: 300px; padding-left: 20px; } @media (max-width: 360px) { height: 333px; background-image: url("../assets/rectangles/mob_rec_article.svg"); margin-top: 50px; margin-bottom: 300px; padding-top: 39px; padding-left: 20px; } } .text_with_rectangle_2 { background-image: url(../assets/rectangles/desk_rec_news.svg); background-position: left top; background-repeat: no-repeat; height: 400px; overflow: hidden; } /*.text_with_rectangle_3{ background-image: url(../assets/rectangles/desk_rec_news.svg); background-position: left top; background-repeat: no-repeat; overflow: hidden; padding: 35px 0 0 15px; }*/ .text_with_rectangle_3, .text_with_rectangle_3_film, .text_with_rectangle_3_ffprod, .text_with_rectangle_3_ssprod { background-image: url(../images/rect-film.svg); background-position: 7% 0; background-repeat: no-repeat; overflow: hidden; padding: 30px 0 0 0; @media (max-width: 979px) { background-image: url(../images/rect-film-sm.svg); } @media (max-width: 767px) { background-image: url(../images/rect-film-xs.svg); } } .text_with_rectangle_3_ffprod.sp-s{ @media (max-width: 767px) { background-image: none; padding:0; .news_name{ display:none; } } } .text_with_rectangle_3_action{ background-image: url(../images/rect-square-gray.svg); background-position: 6.6% 0; background-repeat: no-repeat; overflow: hidden; padding: 40px 0 0 0; margin-top: 25px; .news_name{ top:52%; } @media (max-width: 979px) { } @media (max-width: 767px) { background-size:40px 40px; } } .text_with_rectangle_6 { display: table; background-image: url(../images/rect-thin-3.svg); background-position: 100% 50%; background-repeat: no-repeat; height: 312px; @media (max-width: 979px) { background-image: url(../images/rect-thin-3_sm.svg); height: 203px; } @media (max-width: 767px) { background-image: url(../images/rect-thin-3_xs.svg); height: 179px; } } .grey_border { position: absolute; height: 100px; width: 100px; border: solid 20px #ccc; } .backgr_color_mine { background-color: #0e141a; } .row-flex { display: flex; flex-flow: row wrap; } .position_slider_name { padding: 0 15%; @media (max-width: 767px) { padding: 10% 15%; } } .text_normal { font-size: 14px; letter-spacing: 0.5px; line-height: 1.43; font-family: @fontMine; } .text_normal_bold{ font-size: 14px; letter-spacing: 0.5px; line-height: 1.43; font-family: @fontAdditional; } .width_textnorm { position: relative; width: 360px; @media (max-width: 1200px) { width: 360px; } @media (max-width: 979px) { width: 340px; } /*@media (max-width: 767px) { width: 340px; }*/ @media (max-width: 360px) { /*width: 280px;*/ width: 130%; } } .read_more { display: block; position: relative; float: left; font-family: @fontAdditional; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: @mineColor; text-decoration: none; padding: 20px 20px 0 40px; &:before { content: url(../images/arrow-black.svg); /* content:url(../images/gallery-arrow.png);*/ position: absolute; left: 0; top: 12px; padding: 0; } &:hover { color: @mineColor; text-decoration: none; } } .magazin { position: relative; margin: 30px auto 0; text-align: center; width: 370px; height: 500px; @media (max-width: 979px) { width: 234px; height: 316px; } @media (max-width: 767px) { /* margin-top: 0; width: 234px; height: 316px;*/ margin-top: 80px; width: 189px; height: 255px; } } .press_name { position: absolute; bottom: 120px; right: -160px; &:before { content: " "; position: absolute; left: -80px; top: 20px; width: 60px; height: 2px; background-color: @themeColor; } @media (max-width: 1200px) { position: absolute; bottom: 120px; right: -160px; left: auto; } @media (max-width: 979px) { bottom: 50px; right: -140px; } @media (max-width: 767px) { /*position: absolute; bottom: 50px; right: -140px; left: auto; }*/ position: absolute; bottom: -80px; right: auto; left: 80px; } @media (max-width: 480px) { position: absolute; bottom: -80px; right: auto; left: 80px; } } .data_press { font-size: 14px; font-family: @fontMine; padding-top: 8px; span { display: inline-block; padding-right: 60px; } } .name_link { color: @mineColor; //text-decoration: underline; &:hover { color: @mineColor; //text-decoration:none; } } .l_1 { display: inline-block; line-height: 1; outline: medium none; position: relative; text-decoration: none; overflow: hidden; margin-bottom: -0.15em; padding: 0 2px; } .l_2 { display: inline-block; line-height: 1; outline: medium none; position: relative; text-decoration: none; overflow: hidden; margin-bottom: 0; padding: 2px; } .name_link a.l_1 { color: @mineColor; } .read_more a.l_2, .share a.l_2, .press_next a.l_2 .view_link a.l_2, .show a.l_2, .prod-nav a.l_2 { color: @mineColor; } .name_link a.l_1::after { background: #0e141a none repeat scroll 0 0; content: ""; height: 100%; position: absolute; right: 0; top: 0; transform: translate3d(0, 92%, 0); transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; width: 100%; z-index: -1; } .read_more a.l_2::after, .view_link a.l_2::after, .share a.l_2::after, .press_next a.l_2::after, .show a.l_2::after, .prod-nav a.l_2::after { background: #0e141a none repeat scroll 0 0; content: ""; height: 100%; position: absolute; right: 0; top: 0; transform: translate3d(0, 100%, 0); transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; width: 100%; z-index: -1; } .name_link a.l_1:hover::after { transform: translate3d(0px, 0px, 0px); } .read_more a.l_2:hover::after, .view_link a.l_2:hover::after, .share a.l_2:hover::after, .press_next a.l_2:hover::after, .show a.l_2:hover::after, .prod-nav a.l_2:hover::after { transform: translate3d(0px, 0px, 0px); } .name_link a.l_1 span::before { color: #0e141a; content: attr(data-letters); left: 0; right: 0; overflow: hidden; position: absolute; text-align: center; transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; height: 100%; } .read_more a.l_2 span::before, .view_link a.l_2 span::before, .show a.l_2 span::before, .prod-nav a.l_2 span::before{ color: #0e141a; content: attr(data-letters); left: 0; right: 0; overflow: hidden; position: absolute; text-align: center; transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; height: 100%; } .share a.l_2 span::before, .press_next a.l_2 span::before { color: #0e141a; content: attr(data-letters); left: 0; right: 0; overflow: hidden; position: absolute; text-align: center; transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; height: 100%; @media (max-width: 767px) { color: #ffffff; } } .name_link a.l_1 span { display: block; position: relative; text-align: center; color: #fff; } .view_link a.l_2 span, .share a.l_2 span, .press_next a.l_2 span, .show a.l_2 span { display: block; position: relative; text-align: center; /*color: rgba(0,0,0,0) color: #0e141a;*/ color: #ffffff; } .read_more a.l_2 span:hover, .view_link a.l_2 span:hover, .share a.l_2 span:hover, .press_next a.l_2 span:hover, .show a.l_2 span:hover, .prod-nav a.l_2 span:hover{ color: #fff; } .name_link a.l_1:hover { color: #0e141a; text-decoration: none; } .read_more a.l_2:hover, .view_link a.l_2:hover, .share a.l_2:hover, .press_next a.l_2:hover, .show a.l_2:hover, .prod-nav a.l_2:hover { color: #0e141a; text-decoration: none; } .name_link a.l_1:hover span::before { height: 0; } .read_more a.l_2:hover span::before, .view_link a.l_2:hover span::before, .show a.l_2:hover span::before, .prod-nav a.l_2:hover span::before{ height: 0; } .share a.l_2:hover span::before, .press_next a.l_2:hover span::before { height: 0; @media (max-width: 767px) { height: 100%; } } .padd_top_bott { padding: 150px 0 100px 0; @media (max-width: 460px) { padding: 50px 0 50px 0; } } .padd_top_bott_1 { padding: 150px 0 100px 0; @media (max-width: 460px) { padding: 50px 0 100px 0; } } .padd_top_bott_15 { padding: 50px 0 100px 0; @media (max-width: 460px) { padding: 50px 0 100px 0; } } .padd_top_bott_16 { padding: 50px 0 60px 0; @media (max-width: 460px) { padding: 50px 0 60px 0; } } .padd_top_bott_2 { padding: 30px 0 0 0; } .padd_top_bott_4 { padding: 0 0 70px 0; @media (max-width: 1024px) { padding: 0 0 40px 0; } @media (max-width: 1024px) { padding: 0 0 5px 0; } } .padd_top_bott_5 { padding: 70px 0 100px 0; } .padd_top_bott6 { padding: 150px 0 100px 0; @media (max-width: 460px) { padding: 60px 0 15px 0; } } .padd_top_bott61 { padding: 150px 0 50px 0; @media (max-width: 460px) { padding: 60px 0 15px 0; } } .padd_top_bott_81 { padding: 100px 0 50px 0; @media (max-width: 460px) { padding: 35px 0 25px 0; } } .marg_top { margin-top: 170px; @media (max-width: 979px) { margin-top: 140px; } } .marg_bott { margin-bottom: 160px; @media (max-width: 979px) { margin-bottom: 115px; } } .padd-top-text-norm{ padding-top:5px; } .padd-top-text-bold{ padding-top:20px; } /*.news_name{ vertical-align: middle; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); font-family:@fontAdditional; font-size: 12px; letter-spacing: 0.5px; text-align: center; text-transform: uppercase; position: absolute; width: 200px; height: 20px; top: 50%; left: -130px; margin-top: -50px; }*/ .news_name { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); font-family: @fontAdditional; font-size: 12px; letter-spacing: 0.5px; text-align: center; text-transform: uppercase; position: absolute; display: inline-block; top: 35%; left: -3%; @media (max-width: 460px) { left: -10%; } /* height: 100%; padding-top: 15%; margin-top: -40px; @media (max-width: 979px) { padding-top: 22%; margin-top: -30px; } @media (max-width: 767px) { padding-top: 40%; margin-top: -40px; }*/ } .news_item { position: relative; font-family: @fontAdditional; font-size: 24px; line-height: 1.2; @media (max-width: 979px) { font-size: 18px; } } .news_item_position { position: relative; padding: 20px 0 20px 46px; &:before { content: " "; position: absolute; left: 0; top: 33px; width: 30px; height: 2px; background-color: @themeColor; } @media (max-width: 767px) { padding: 20px 0 50px 46px; } } .news_item_position:before { @media (max-width: 990px) { top: 29px; } @media (max-width: 1023px) { width: 20px; } } .name_hook { position: absolute; bottom: 70px; left: 57px; font-family: @fontAdditional; font-size: 24px; line-height: 1.5; color: @additionalColor; @media (max-width: 979px) { bottom: 30px; left: 10px; font-size: 18px; } @media (max-width: 767px) { bottom: 30px; left: 20px; font-size: 18px; } } .text_vis { //display: none; position: relative; font-family: @fontMine; font-size: 14px; color: @additionalColor; padding: 0 0 0 45px; &:before { content: " "; position: absolute; left: 0; top: 10px; width: 30px; height: 2px; background-color: @additionalColor; } @media (max-width: 767px) { &:before { left: 0; top: 10px; } } } .img_link { position:relative; display: block; background: @themeColor; overflow: hidden; img { background-color: #000; } &:hover .name_hook { color: @additionalColor; text-decoration: none; } &:hover .text_vis { //display: block; color: @additionalColor; text-decoration: none; } @media (max-width: 976px) { position: relative; margin: 0 0 60px 0; } @media (max-width: 767px) { margin: 0 -15px 60px -15px; } } .img_link.img-link-full{ @media (max-width: 1200px) { .name-hook{ bottom:30px;} } @media (max-width: 976px) { margin: 0; } @media (max-width: 767px) { min-height: 240px; overflow: hidden; margin: 0; img{ width:220%; margin-left: -50%; } } } footer { background-color: #0e141a; padding: 130px 0; } .f_n_item { font-family: @fontAdditional; font-size: 24px; line-height: 1.5; color: @additionalColor; padding: 80px 0 0 38px; &:before { content: " "; position: absolute; left: 0; top: 96px; width: 30px; height: 2px; background-color: @additionalColor; } @media (max-width: 767px) { font-size: 18px; padding: 40px 0 0 58px; &:before { top: 54px; width: 50px; } } } .link_container { position: absolute; z-index: 1; top: 0; left: 0; } .footer_menu { padding-top: 10px; li { padding: 4px 0; list-style: none; font-family: @fontMine; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; overflow: hidden; @media (max-width: 767px) { padding: 4px 0 4px 18px; } } } .footer_menu > li > a { font-size: 12px; font-family: @fontAdditional; text-transform: uppercase; letter-spacing: 0.5px; color: @additionalColor; overflow: hidden; position: relative; float: left; padding: 0 3px; } .footer_menu > li > a:hover { text-decoration: none; color: @mineColor; } .footer_menu > li > a::after { background: @additionalColor none repeat scroll 0 0; content: ""; height: 100%; position: absolute; right: 0; top: 0; bottom: 0; transform: translate3d(0, 100%, 0); transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; width: 100%; z-index: -1; } .footer_menu > li > a:hover::after { transform: translate3d(0px, 0px, 0px); } .footer_menu > li > a .min_w_menu { position: relative; float: left; display: block; color: @mineColor; overflow: hidden; } .footer_menu > li > a .min_w_menu::before { color: @additionalColor; content: attr(data-letters); left: 0; right: 0; overflow: hidden; position: absolute; padding: 0; margin: 0; transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; height: 100%; } .footer_menu > li > a:hover .min_w_menu::before { height: 0; } .footer_menu .min_w_menu:hover { display: inline-block; padding: 0; margin: 0; color: @mineColor; } /*.footer_menu .activ a .min_w_menu, .footer_menu .activ a .min_w_menu::before{ display: inline-block; padding: 0 3px; background: @additionalColor ; color:@mineColor; @media (max-width: 979px) { color: @mineColor; background:@additionalColor; } }*/ .footer_menu > li > a:focus, .footer_menu > li > a:hover { background-color: #fff; } .pos_text_press { margin-left: -120px; @media (max-width: 979px) { margin-left: -50px; } @media (max-width: 767px) { margin-left: -30px; } @media (max-width: 460px) { margin-left: -20%; width: 100%; } } .name_border { position: relative; border-style: solid; border-width: 18px; box-sizing: border-box; @media (max-width: 979px) { border-width: 12px; } @media (max-width: 767px) { border-width: 8px; } } .b_color_1 { border-color: #0e141a; } .b_color_2 { border-color: rgba(15, 20, 26, 0.05); } .b_1 { width: 376px; height: 279px; box-sizing: border-box; @media (max-width: 979px) { width: 240px; height: 157px; } @media (max-width: 767px) { width: 148px; height: 120px; } } .b_3 { height: 474px; margin: 150px 0 200px 0; @media (max-width: 979px) { height: 310px; margin: 150px 0 200px 0; } @media (max-width: 767px) { height: 355px; margin: 70px 0 100px 0; } @media (max-width: 360px) { margin: 70px 0 200px 0; } } .position_left_block { display: table; margin: auto; width: 100%; height: 100%; background-image: url(../images/rect-thin.svg); background-repeat: no-repeat; background-position: center; @media (max-width: 767px) { height: 350px; background-image: url(../images/rect-thin_1.svg); } } .pos_text_left_bl { display: table-cell; vertical-align: middle; padding: 0 15px; } .min_w_menu { // padding: 0 3px; } /*.min_w_menu:hover{ display: inline-block; padding: 0 3px; background: @mineColor; color: @additionalColor; } .black_bg_m .min_w_menu:hover, .black_bg a:hover{ background: @mineColor !important; color: @additionalColor !important; @media (max-width: 767px) { background: @additionalColor !important; color: @mineColor !important; } } */ .activ .min_w_menu { display: inline-block; // padding: 0 3px; background: @mineColor; color: @additionalColor; } .black_bg_m .activ .min_w_menu { display: inline-block; // padding: 0 3px; background: @mineColor !important; color: @additionalColor !important; @media (max-width: 1024px) { background: @additionalColor !important; color: @mineColor !important; } } .nav > li > a:focus, .nav > li > a:hover { background-color: transparent; } .social_block { position: absolute; bottom: 120px; left: 0; right: 0; margin: auto; text-align: center; a { display: inline-block; padding: 0 17px; } @media (max-width: 767px) { bottom: 50px; } } .res_place { position: relative; padding-bottom: 180px; margin-left:0 !important; } .nav_top_line { position: relative; width: 100%; clear: both; .language { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); padding-right: 10px; padding: 0 20px 30px 0; a { color: @additionalColor; } } .navbar-toggle { a { font-size: 12px; font-family: @fontAdditional; text-transform: uppercase; letter-spacing: 0.5px; color: @additionalColor; margin-right: -15px; } } } .navbar-collapse.in { overflow-y: auto; position: fixed; top: 0; width: 100%; z-index: 10010; height: 100%; } .navbar-nav > li > a > .min_w_menu, .nav > li > a > .min_w_menu { @media (max-width: 979px) { display: inline-block; } } .navbar-nav > li > a:focus .min_w_menu, .nav > li > a:focus .min_w_menu { @media (max-width: 979px) { background-color: @additionalColor; color: #0e141a; } } .collapse.in { @media (max-width: 1024px) { background: @mineColor; } } .btn { border: 2px solid @mineColor; border-radius: 0; font-size: 12px; font-weight: normal; line-height: 1.42857; margin-bottom: 0; padding: 6px 0; text-transform: uppercase; font-family: @fontAdditional; height: 48px; width: 180px; @media (max-width: 350px) { width: 150px; } } .btn-1 { background-color: @additionalColor; &:hover { background-color: @mineColor; color: @additionalColor; } &:active { background-color: @mineColor; color: @additionalColor; } } .btn-2 { background-color: @mineColor; color: @additionalColor; &:hover { color: @additionalColor; } /*:after { background: #242424 none repeat scroll 0 0; content: ""; height: 100%; position: absolute; right: 0; top: 0; transform: translate3d(101%, 0px, 0px); transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; width: 100%; z-index: -1; }*/ } *, *::after, *::before { box-sizing: border-box; } .button_1 a.link--kumya ::after { background: @mineColor none repeat scroll 0 0; content: ""; height: 100%; position: absolute; right: 0; top: 0; transform: translate3d(0, 100%, 0); transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; width: 100%; z-index: -1; } .button_1 a.link--kumya { position: relative; color: #0e141a; font-family: @fontAdditional; font-size: 12px; font-weight: normal; line-height: 1.42857; border-radius: 0; background: transparent; text-transform: uppercase; height: 48px; width: 180px; overflow: hidden; } .button_1 a.link { display: inline-block; outline: medium none; position: relative; text-decoration: none; } .button_1 a.link--kumya span::before { color: #0e141a; content: attr(data-letters); left: 0; right: 0; position: absolute; overflow: hidden; text-align: center; transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; height: 100%; } .button_1 a.link--kumya span { color: #ffffff; display: block; position: relative; text-align: center; padding: 14px 0 13px; overflow: hidden; border: 2px solid @mineColor; box-sizing: border-box; } .button_1 a.link--kumya:hover { color: #0e141a; text-decoration: none; } .button_1 a.link--kumya :hover::after { transform: translate3d(0px, 0px, 0px); } .button_1 a.link--kumya:hover span::before { height: 0; } /* .button_2 { margin: 0 auto; padding: 0; text-align: center; } .button_2 a.link--kumya ::after { background: #ffffff none repeat scroll 0 0; content: ""; height: 100%; position: absolute; right: 0; //top: 0; //transform: translate3d(0, 100%, 0); top: 44px; transition: top 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; width: 100%; z-index: -1; } .button_2 a.link--kumya { position: relative; color: #ffffff; font-family: @fontAdditional; font-size: 12px; font-weight: normal; line-height: 1.42857; border: 2px solid @mineColor; border-radius: 0; background: @mineColor; text-transform: uppercase; height: 48px; width: 180px; overflow: hidden; } .button_2 a.link { display: inline-block; outline: medium none; position: relative; text-decoration: none; } .button_2 a.link--kumya span::before { color: #ffffff; content: attr(data-letters); left: 0; right: 0; position: absolute; overflow: hidden; text-align: center; transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; height: 100%; } .button_2 a.link--kumya span { color: #0e141a; display: block; vertical-align: middle; position: relative; text-align: center; padding: 14px 0 13px; overflow: hidden; box-sizing: border-box; } .button_2 a.link--kumya:hover { color: #0e141a; text-decoration: none; } .button_2 a.link--kumya :hover::after { //transform: translate3d(0px, 0px, 0px); top: 0; } .button_2 a.link--kumya:hover span::before { height: 0; } */ /*__________________________________________________________ end button _____________________________________________________ */ .btn-invert { background-color: @mineColor; color: @additionalColor; border: solid 2px @additionalColor; &:hover { background-color: @additionalColor !important; color: @mineColor !important; border: solid 2px @mineColor !important; } /*:after { background: #242424 none repeat scroll 0 0; content: ""; height: 100%; position: absolute; right: 0; top: 0; transform: translate3d(101%, 0px, 0px); transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; width: 100%; z-index: -1; }*/ } .link--kumya a:after { background: #242424 none repeat scroll 0 0; content: ""; height: 100%; position: absolute; right: 0; top: 0; transform: translate3d(101%, 0px, 0px); transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; width: 100%; z-index: -1; } .link--kumya a { display: block; color: @mineColor; font-family: 'apercu-regular'; font-size: 12px; text-transform: uppercase; line-height: 1; overflow: hidden; padding: 10px 10px 0; } .link a { display: block; color: #9e9ba4; display: inline-block; font-size: 12px; line-height: 1; outline: medium none; position: relative; text-decoration: none; } .link--kumya a span:before { color: #fff; content: attr(data-letters); left: 0; overflow: hidden; position: absolute; transition: width 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; white-space: nowrap; width: 0; } .link--kumya a span { display: block; position: relative; } .head_block { position: relative; overflow: hidden; width: 100%; /*height: 640px;*/ @media (max-width: 979px) { /*height: 701px;*/ } @media (max-width: 767px) { background-size: contain; padding-top:66px; /*height: 320px;*/ } } /*.big_photo{ position: relative; width: 100%; height:100%; background-position:100% 0; background-repeat: no-repeat; background-size: cover; @media (max-width: 979px) { height: 701px; } @media (max-width: 767px) { height: 320px; } }*/ .fon_top { position: relative; width: 100%; height: auto; overflow: hidden; } .big_photo { position: relative; width: 100%; height: auto; @media (max-width: 979px) { /*height: 701px;*/ } @media (max-width: 767px) { /*height: 320px;*/ } } .position_t_w_r { position: absolute; left: 0; bottom: 72px; right:0; @media (max-width: 767px) { bottom:40px; } } .video { position: relative; display: table; margin: auto; background-color: @themeColor; width: 100%; height: 100%; overflow: hidden; } .pos_video_text { position: absolute; width: 100%; text-align: center; margin: auto; top: 38%; z-index: 200; color: @additionalColor; h1 { text-align: center; } } .watch { display: inline-block; position: relative; font-family: @fontAdditional; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: @additionalColor; &:after { content: url(../images/play-white.svg); position: absolute; right: -20px; top: 0; } &:hover { color: @additionalColor; text-decoration: none; } } .sign { display: block; position: relative; font-family: @fontMine; font-size: 14px; float:right; &:before { content: " "; position: absolute; left: -40px; top: 10px; width: 30px; height: 2px; background-color: @mineColor; } } .name_img { position: absolute; bottom: 25px; left: 24px; font-family: @fontAdditional; font-size: 14px; line-height: 1.5; color: @additionalColor; @media (max-width: 979px) { bottom: 30px; left: 10px; font-size: 18px; } @media (max-width: 767px) { bottom: 30px; left: 20px; font-size: 18px; } } .img_link_1 { display: block; background: @themeColor; img { &:hover { opacity: 0.5; -moz-opacity: 0.5; filter: alpha(opacity=50) black; -khtml-opacity: 0.5; background-color: #000; } } &:hover .name_img { font-size: 24px; color: @additionalColor; text-decoration: none; } &:hover .text_vis { //display: block; color: @additionalColor; text-decoration: none; } } .carousel-caption_1 { bottom: 0; left: 0; right: 0; padding: 30px 50% 40px 8%; text-shadow: none; @media (max-width: 767px) { padding: 20px 15px 30px 15px; } } .padd_top_bott_3 { padding: 15px 0 15px 0; } .cut_img { @media (max-width: 460px) { margin: 0 -20%; overflow: hidden; } } .carousel-indicators_1 { position: absolute; left: 50%; list-style: outside none none; margin-left: -30%; padding-left: 0; text-align: center; width: 60%; z-index: 15; bottom: -40px; @media (max-width: 979px) { left: 0; margin-left: 0; width: 100%; position: absolute; list-style: outside none none; bottom: -40px; text-align: center; padding: 0; } } .carousel-indicators_1 li { width: 50px; height: 2px; border: 1px solid rgba(15, 20, 26, 0.25); border-radius: 0; margin: 0 16px; cursor: pointer; display: inline-block; text-indent: -999px; @media (max-width: 979px) { display: inline-block; cursor: pointer; width: 25px; height: 2px; border: 1px solid rgba(15, 20, 26, 0.25); border-radius: 0; margin: 0 8px; } } .carousel-indicators_1 .active { width: 50px; height: 2px; border: 1px solid #0e141a; border-radius: 0; margin: 0 16px; @media (max-width: 979px) { width: 25px; height: 2px; border: 1px solid #0e141a; border-radius: 0; margin: 0 8px; } } .show { display: inline-block; position: relative; font-family: @fontAdditional; color: @themeColor; font-size: 12px; text-transform: uppercase; text-decoration: none; text-align: center; margin: 0 auto; &:before { content: url(../images/dropdown-arrow.svg); position: absolute; top: -15px; text-align: center; margin-left: -7px; left: 50%; } &:hover { color: @themeColor; text-decoration: none; } } .color_line { width: 100%; height: 2px; padding: 20px 0 0 0; div { position: relative; float: left; width: 7.14%; height: 2px; } } .c_1 { background-color: #eea2ac; } .c_2 { background-color: #cfb081; } .c_3 { background-color: #afc062; } .c_4 { background-color: #6dc2a0; } .c_5 { background-color: #78bfdd; } .c_6 { background-color: #9ab4d7; } .c_7 { background-color: #dda7cb; } .c_8 { background-color: #e41f4b; } .c_9 { background-color: #f5ed64; } .c_10 { background-color: #29a78c; } .c_11 { background-color: #2863b1; } .c_12 { background-color: #fce6d9; } .c_13 { background-color: #6b7e4e; } .c_14 { background-color: #f6afab; } .width_textnorm_1 { width: 80%; } .width_textnorm_2 { width: 60%; @media (max-width: 979px) { width: 100%; } } .gray_box { background-color: rgba(15, 20, 26, 0.03); padding: 100px 0 150px 0; @media (max-width: 767px) { padding: 50px 0 50px 0; } } .view_link { display: block; font-family: @fontAdditional; font-size: 12px; color: @mineColor; text-decoration: none; text-transform: uppercase; text-align: center; &:hover { color: @mineColor; text-decoration: none; } } /* .menu_top{ font-family: @fontAdditional; font-size: 12px; text-transform: uppercase; text-align: center; margin:13px auto 8px auto; ul{ margin-bottom: 8px; } ul li{ display: inline-block; list-style: none; padding: 0 20px; } a{ display: inline-block; float: left; color: @mineColor; text-decoration: none; padding: 0 7px; &:hover{ background-color: @themeColor; color: @additionalColor; } } .activ_menu{ background-color: @themeColor; color: @additionalColor; } .item_buy{ color: #468894; &:hover{ background-color: #468894; color: @additionalColor; } } } */ .menu_top { display: table; font-family: @fontAdditional; font-size: 12px; text-transform: uppercase; text-align: center; margin: 0px auto; @media (max-width: 767px) { display:none; } } .btn_menu { width: 100%; height: 48px; border-bottom: solid 1px #cccccc; color: @themeColor; background-color: @additionalColor; border-top: none; border-left: none; border-right: none; font-size: 14px; text-align: left; padding-left: 15px; } .caret_menu { position: absolute; display: inline-block; right: 15px; top: 15px; width: 16px; height: 16px; background-image: url(../images/dropdown-arrow.svg); transform: rotate(180deg); } .dropdown.open .caret_menu { background-image: url(../images/dropdown-arrow.svg); transform: rotate(0deg); } .dropdown-menu { position:relative; width: 100%; border: none; border-radius: 0; box-shadow: none; text-align: center; float: none; background-color: @additionalColor; padding: 0 0 40px 0; } .dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover { background-color: @themeColor; color: @additionalColor; } .dropdown-menu > li > a { font-family: @fontAdditional; font-size: 12px; text-transform: uppercase; text-align: center; display: inline-block; color: @mineColor; text-decoration: none; padding: 0 7px; margin: 40px 0 0 0; } .dropdown-menu > li > .activ_menu { background-color: @themeColor; color: @additionalColor; font-size: 12px; text-transform: uppercase; text-align: center; display: inline-block; text-decoration: none; padding: 0 7px; margin: 40px 0 0 0; } .dropdown-menu > li > .item_buy { color: #468894; &:hover { background-color: #468894; color: @additionalColor; } } .news_block { padding: 10px 0 60px 0; @media (max-width: 979px) { padding: 10px 0 40px 0; } @media (max-width: 767px) { padding: 0; } } .black_square { position: absolute; top: -30px; left: -14px; width: 88px; height: 88px; @media (max-width: 767px) { display: none; } } .photo_with_sign { padding: 0 0 60px 0; } .padd_top { padding-top: 70px; @media (max-width: 979px) { padding-top: 50px; } } .padd_bott { padding-bottom: 70px; @media (max-width: 979px) { padding-bottom: 30px; } } .sign_photo { position: relative; font-family: @fontMine; font-size: 10px; line-height: 1.4; padding: 5px 0 0 45px; &:before { content: " "; width: 30px; height: 2px; background-color: @mineColor; position: absolute; left: 0; top: 12px; } } article { //-webkit-column-count:2; //-moz-column-count:2; //column-count:2; //@media (max-width:767px) { // -webkit-column-count:1; //-moz-column-count:1; //column-count:1; //} } .pos_share_next { position: fixed; z-index: 300; width: 40px; height: 300px; top: 50%; margin-top: -150px; right: 4%; //background: @additionalColor; background: none; @media (max-width: 1200px) { } @media (max-width: 979px) { right: 2%; } @media (max-width: 767px) { width: 100%; height: 50px; top: auto; bottom: 0; right: 0; left: 0; background: @mineColor; } } .press_next { position: absolute; bottom: 20px; right: 5px; -webkit-transform: rotate(-270deg); transform: rotate(-270deg); font-family: @fontAdditional; color: @mineColor; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; &:after { content: " "; position: absolute; bottom: 8px; left: -70px; width: 60px; height: 2px; margin-top: 10px; background-color: #0e141a; border: none; } &:hover { text-decoration: none; color: @mineColor; } &:focus { text-decoration: none; color: @mineColor; } @media (max-width: 767px) { bottom: 17px; right: 15px; -webkit-transform: rotate(0deg); transform: rotate(0deg); font-family: @fontAdditional; color: @additionalColor; &:after { display: none; } &:hover { color: @additionalColor; text-decoration: none; } &:focus { text-decoration: none; color: @additionalColor; } } } .share { position: absolute; top: 20px; right: 0; -webkit-transform: rotate(-270deg); transform: rotate(-270deg); font-family: @fontAdditional; color: @mineColor; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; &:after { content: " "; position: absolute; bottom: 10px; right: -70px; width: 60px; height: 2px; margin-top: 10px; background-color: #0e141a; border: none; } /*&:hover{ text-decoration: none; color: @mineColor; } &:focus{ text-decoration: none; color: @mineColor; }*/ @media (max-width: 767px) { top: auto; bottom: 11px; left: 15px; right: auto; -webkit-transform: rotate(0deg); transform: rotate(0deg); font-family: @fontAdditional; color: @additionalColor; &:after { display: none; } /*&:hover{ color: @additionalColor; text-decoration: none; } &:focus{ text-decoration: none; color: @additionalColor; }*/ } } .close_share_next { position: absolute; top: 50%; margin-top: -14px; right: 5px; background: url(../images/close-black.svg) no-repeat; width: 32px; height: 32px; @media (max-width: 767px) { background: url(../images/close-white.svg) no-repeat; top: auto; bottom: 10px; left: 50%; margin-left: -14px; margin-top: 0; right: auto; } } .carousel-caption_2 { bottom: 0; left: 0; right: 0; padding: 0; text-shadow: none; @media (max-width: 767px) { padding: 20px 0 30px 0; } } .position_control { position: absolute; bottom: 24px; right: 24px; width: 55px; height: 30px; } .padd_left_right { padding: 0 17%; @media (max-width: 767px) { padding: 0 ; } } .name_country { font-size: 56px; font-family: @fontAdditional; text-align: center; line-height: 1.14; text-decoration: none; color:rgba(15, 20, 26, 0.25); display: table-cell; vertical-align: middle; &:hover { color: @mineColor; text-decoration: none; } &:focus { color: @mineColor; text-decoration: none; } @media (max-width: 1200px) { font-size: 36px; line-height: 1.17; } @media (max-width: 767px) { font-size: 24px; line-height: 1.17; } } .img_width { img { @media (max-width: 767px) { width: 70%; height: auto; } } } .padd_top_bott_6 { padding: 40px 0; @media (max-width: 767px) { padding: 18px 0; } } .padd_top_bott_61 { padding: 40px 0; @media (max-width: 767px) { padding: 40px 0; } } .padd_top_bott_7 { padding: 25px 0 5px; } .padd_top_bott_8 { padding: 50px 0 80px; @media (max-width: 767px) { padding: 30px 15px 50px; } } .padd_top_bott_9 { padding: 200px 0px; @media (max-width: 979px) { padding: 125px 0px; } @media (max-width: 767px) { padding: 80px 0px 90px 0px; } } .padd_top_bott_92 { padding: 140px 0px 30px 0px; @media (max-width: 979px) { padding: 80px 0px 0px 0px; } @media (max-width: 767px) { padding: 40px 0px 0px 0px; } } .padd_top_bott_91 { padding: 50px 15px; @media (max-width: 979px) { padding: 15px 10px; } @media (max-width: 767px) { padding: 5px 10px 5px 10px; } } .padd_top_bott_11 { padding: 100px 0 200px 0; @media (max-width: 979px) { padding: 60px 0; } @media (max-width: 767px) { padding: 60px 0 60px; } } .padd_top_bott_12 { padding: 60px 0 110px 0; @media (max-width: 979px) { padding: 40px 0; } @media (max-width: 767px) { padding: 40px 0 40px; } } .city_item { position: relative; font-family: @fontAdditional; font-size: 18px; line-height: 1.2; @media (max-width: 979px) { font-size: 18px; } } .city_item_position { position: relative; padding: 20px 0 20px 46px; &:before { content: " "; position: absolute; left: 0; top: 30px; width: 30px; height: 2px; background-color: @additionalColor; } @media (max-width: 767px) { padding: 20px 0 50px 46px; } } .text_normal_1 { font-size: 14px; letter-spacing: 0.5px; line-height: 1.43; font-family: @fontMine; @media (max-width: 767px) { font-size: 10px; line-height: 1.4; } } .caption_1 { display: inline-block; font-family: @fontAdditional; color: @additionalColor; font-size: 56px; text-align: center; text-decoration: none; margin: 7px auto; padding: 0 10px; &:hover { background-color: @mineColor; color: @additionalColor; text-decoration: none; } } .social_block_footer { position: absolute; top: 0; right: 0; a { display: block; position: relative; float: left; margin-left: 34px; img { width: 24px; height: 24px; @media (max-width: 1200px) { width: 32px; height: 32px; } } @media (max-width: 768px) { display: inline-block; float: none; margin-left: 17px; margin-right: 17px; text-align: center; } } @media (max-width: 767px) { position: relative; margin: 56px auto 0; text-align: center; } } /*__________________________________________________________nariko____________________________________________________________________*/ .input--nariko, .input--nariko_f { overflow: hidden; padding-top: 0; } .input, .input_f { display: inline-block; margin: 20px 0; position: relative; vertical-align: top; width: 100%; z-index: 1; } .input__field--nariko { background: transparent none repeat scroll 0 0; color: #ffffff; opacity: 0; padding: 0.6em 0.35em 0.1em; width: 100%; z-index: 100; } .input__field--nariko_f { background: transparent none repeat scroll 0 0; color: #ffffff; opacity: 0; height: 6em; padding: 0.6em 0.35em 0.1em; width: 100%; z-index: 100; } .input--filled, .input__field--nariko, .input--filled, .input__field--nariko, .input--filled_f, .input__field--nariko_f, .input--filled_f, .input__field--nariko_f { cursor: text; opacity: 1; transition: opaciti 0s ease 0.4s; } .input__field, .input__field_f { background: transparent none repeat scroll 0 0; border: medium none; border-radius: 0; color: @additionalColor; display: block; float: right; font-family: @fontAdditional; padding: 20px 8px 8px 8px; position: relative; width: 100%; font-size: 24px; &:focus { outline: medium none; } } .input__label--nariko, .input__label--nariko_f { bottom: 0; color: @mineColor; padding: 0; pointer-events: none; position: absolute; text-align: left; width: 100%; } .input__label--nariko::before { background: #000000 none repeat scroll 0 0; border-top: 2px solid @mineColor; content: ""; height: 4em; left: 0; position: absolute; top: 100%; transform: translate3d(0px, -3px, 0px); transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1) 0s; width: 100%; } .input__label--nariko_f::before { background: #000000 none repeat scroll 0 0; border-top: 2px solid @mineColor; content: ""; height: 6em; overflow: hidden; left: 0; position: absolute; top: 100%; transform: translate3d(0px, -3px, 0px); transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1) 0s; width: 100%; } .input__label, .input__label_f { -moz-user-select: none; color: @mineColor; font-family: @fontAdditional; display: inline-block; float: right; font-size: 24px; padding: 0; width: 100%; @media (max-width: 979px) { font-size: 18px; } } .input__label-content, .input__label-content_f { display: block; padding: 0 0 5px 0; position: relative; width: 100%; } .input__field--nariko { background: transparent none repeat scroll 0 0; color: #ffffff; opacity: 0; padding: 0.6em 0.35em 0.1em; width: 100%; z-index: 100; } .input__field--nariko_f { background: transparent none repeat scroll 0 0; color: #ffffff; opacity: 0; padding: 1.2em 0.35em 0.1em; width: 100%; z-index: 100; } .input__label-content--nariko { padding: 0 0 5px 0; transform-origin: 0 100% 0; transition-delay: 0s, 0s; transition-duration: 0.4s, 0.4s; transition-property: transform, font-size, color; transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); } .input__field--nariko:focus, .input--filled .input__field--nariko { cursor: text; opacity: 1; transition: opacity 0s ease 0.4s; } .input__field--nariko:focus + .input__label--nariko::before, .input--filled .input__label--nariko::before { transform: translate3d(0px, -2.8em, 0px); transition-delay: 0.05s; } .input__field--nariko:focus + .input__label--nariko .input__label-content--nariko, .input--filled .input__label-content--nariko { color: @additionalColor; font-size: 12px; padding: 0 0 0 9px; transform: translate3d(0px, -2.8em, 0px) scale3d(0.81, 0.81, 1); } .input__label-content--nariko_f { padding: 0 0 5px 0; transform-origin: 0 100% 0; transition-delay: 0s, 0s; transition-duration: 0.4s, 0.4s; transition-property: transform, font-size, color; transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); } .input__field--nariko_f:focus, .input--filled_f .input__field--nariko_f { cursor: text; opacity: 1; transition: opacity 0s ease 0.4s; } .input__field--nariko_f:focus + .input__label--nariko_f::before, .input--filled_f .input__label--nariko_f::before { transform: translate3d(0px, -5.8em, 0px); transition-delay: 0.05s; } .input__field--nariko_f:focus + .input__label--nariko_f .input__label-content--nariko_f, .input--filled_f .input__label-content--nariko_f { color: @additionalColor; font-size: 12px; padding: 0 0 0 9px; transform: translate3d(0px, -10em, 0px) scale3d(0.81, 0.81, 1); } .input__field--nariko.acf, .input__field--nariko_f.acf { cursor: text; opacity: 1; transition: opacity 0s ease 0.4s; } .input__field--nariko_f.acf { height: 6em; } .input__field--nariko.acf + .input__label--nariko::before, .input--filled .input__label--nariko::before, .input__field--nariko_f.acf + .input__label--nariko_f:before, .input--filled_f .input__label--nariko_F::before { transform: translate3d(0px, -2.8em, 0px); transition-delay: 0.05s; } .input__label--nariko_f.acf::before { height: 6em; } .input__field--nariko.acf + .input__label--nariko .input__label-content--nariko, .input--filled .input__label-content--nariko, .input__field--nariko_f.acf + .input__label--nariko_f .input__label-content--nariko_f, .input--filled_f .input__label-content--nariko_f { color: @additionalColor; font-size: 12px; padding: 0 0 0 9px; transform: translate3d(0px, -2.8em, 0px) scale3d(0.81, 0.81, 1); } .input__field--nariko_f.acf + .input__label--nariko_f::before, .input--filled_f .input__label--nariko_f::before { transform: translate3d(0px, -5.8em, 0px); transition-delay: 0.05s; } .acf .input__label-content--nariko_f { display: none !important; } label { margin-bottom: 0; font-weight: normal; } /*_________________________________________________________________________ end nariko ________________________________________________________________________*/ /*___________________________________________________________________________ icons_1 ___________________________________________________________________________*/ .spec_item_1 { position: relative; font-size: 14px; color: @mineColor; padding: 12px 2px 0 45px; margin: 20px 0 0 0; @media (max-width: 1024px) { padding: 12px 2px 0 32px; } @media (max-width: 768px) { padding: 12px 9px 0 32px; } @media (max-width: 320px) { padding: 12px 2px 0 30px; margin-top: 15px; } } .spec_item { position: relative; float: left; width: 33%; padding: 20px 0 0 5%; @media (max-width: 979px) { width: 50%; } @media (max-width: 767px) { padding: 30px 0 0 5%; } @media (max-width: 560px) { width: 100%; padding: 30px 0 0 8%; } } .tech_spec { position: relative; font-family: @fontAdditional; font-size: 24px; padding: 0 0 0 45px; @media (max-width: 767px) { font-size: 18px; } } .dimen { &:after { content: url(../images/spec_icons/groesse.svg); position: absolute; width: 30px; height: 30px; top: 12px; left: 0; //zoom: 0.6; transform: scale(0.6, 0.6); @media (max-width: 1024px) { transform: scale(0.5, 0.5); } @media (max-width: 450px) { transform: scale(0.45, 0.45); } } } .supply { &:after { content: url(../images/spec_icons/spannung.svg); position: absolute; width: 30px; height: 30px; top: 12px; left: 0; // zoom: 0.6; transform: scale(0.6, 0.6); @media (max-width: 1024px) { transform: scale(0.5, 0.5); } @media (max-width: 450px) { transform: scale(0.45, 0.45); } } } .cintinuous_d { &:after { content: url(../images/spec_icons/dimmbar.svg); position: absolute; width: 30px; height: 30px; top: 12px; left: 0; transform: scale(0.6, 0.6); @media (max-width: 1024px) { transform: scale(0.5, 0.5); } @media (max-width: 450px) { transform: scale(0.45, 0.45); } } } .depth { &:after { content: url(../images/spec_icons/tiefe.svg); position: absolute; width: 30px; height: 30px; top: 12px; left: 0; transform: scale(0.6, 0.6); @media (max-width: 1024px) { transform: scale(0.5, 0.5); } @media (max-width: 450px) { transform: scale(0.45, 0.45); } } } .power { &:after { content: url(../images/spec_icons/power_input.svg); position: absolute; width: 30px; height: 30px; top: 12px; left: 0; transform: scale(0.6, 0.6); @media (max-width: 1024px) { transform: scale(0.5, 0.5); } @media (max-width: 450px) { transform: scale(0.45, 0.45); } } } .cooling { &:after { content: url(../images/spec_icons/cooling.svg); position: absolute; width: 30px; height: 30px; top: 12px; left: 0; transform: scale(0.6, 0.6); @media (max-width: 1024px) { transform: scale(0.5, 0.5); } @media (max-width: 450px) { transform: scale(0.45, 0.45); } } } .weight { &:after { content: url(../images/spec_icons/gewicht.svg); position: absolute; width: 30px; height: 30px; top: 12px; left: 0; transform: scale(0.6, 0.6); @media (max-width: 1024px) { transform: scale(0.5, 0.5); } @media (max-width: 450px) { transform: scale(0.45, 0.45); } } } .cri { &:after { content: url(../images/spec_icons/farbtemperatur.svg); position: absolute; width: 30px; height: 30px; top: 12px; left: 0; transform: scale(0.6, 0.6); @media (max-width: 1024px) { transform: scale(0.5, 0.5); } @media (max-width: 450px) { transform: scale(0.45, 0.45); } } } .temperature { &:after { content: url(../images/spec_icons/temperatur.svg); position: absolute; width: 30px; height: 30px; top: 12px; left: 0; transform: scale(0.6, 0.6); @media (max-width: 1024px) { transform: scale(0.5, 0.5); } @media (max-width: 450px) { transform: scale(0.45, 0.45); } } } .sub_spec { position: relative; font-family: @fontMine; font-size: 14px; line-height: 1.4; padding: 0 0 0 45px; &:before { content: " "; width: 30px; height: 2px; background-color: @mineColor; position: absolute; left: 5px; top: 10px; } } .marg_bott_1 { @media (max-width: 767px) { margin-bottom: 50px; } } /*________________________________________________________________text_with_rectangle__________________________________________________________________________*/ .text_with_rectangle_4 { display: table; background-image: url(../images/f-ph-rect-head.svg); background-position: 20% 50%; background-repeat: no-repeat; height: 300px; padding-top: 80px; margin-top: 235px; @media (max-width: 979px) { background-image: url(../images/f-ph-rect-head-sm.svg); background-position: 20% 95%; height: 300px; padding-top: 30%; margin-top: 355px; } @media (max-width: 767px) { display: block; background-image: url(../images/f-ph-rect-head-xs.svg); background-position: 20% 100%; background-size:148px 121px; padding-top: 180px; margin-top: 0; } @media (max-width: 450px) { background-image: url(../images/f-ph-rect-head-xs.svg); background-position: 20% 100%; background-size:148px 121px; padding-top: 200px; margin-top: 0; } @media (max-width: 350px) { background-image: url(../images/rect-black-small_2.svg); background-position: 20% 99%; height: 300px; padding-top: 190px; margin-top: 0; } } .text_with_rectangle_5 { display: table; background-image: url(../images/rect-mid.svg); background-position: 100% 20%; background-repeat: no-repeat; height: 390px; padding: 0 16% 0 0; @media (max-width: 1200px) { background-image: url(../images/rect-mid_md.svg); background-position: 90% 0; height: 252px; padding: 0 8% 0 0; } @media (max-width: 767px) { background-image: url(../images/rect-mid_xs.svg); padding: 0; } } .text_with_rectangle_7 { display: table; background-image: url(../images/rect-thin-2.svg); background-position: center; background-repeat: no-repeat; /*background-size:54px 222px;*/ min-height:222px; padding: 0 0 0 0; @media (max-width: 976px) { background-image: url(../images/rect-thin-2.svg); background-size:70px; } @media (max-width: 767px) { background-image: url(../images/rect-thin-2.svg); background-size:50px; padding: 0; } } .text_with_rectangle_66 { display: table; background-image: url(../images/rect-mid.svg); background-repeat: no-repeat; background-position: 100% 50%; background-size:466px 390px; min-height:390px; @media (max-width: 1200px) { background-image: url(../images/rect-8-lg.svg); background-position: 100% 0; background-size: 142px 204px; min-height:204px; padding: 0 0 0 13%; margin-bottom:30px; } @media (max-width: 767px) { background-image: url(../images/rect-8-lg.svg); background-position: 90% 0; background-size: 104px 179px; min-height:179px; padding: 0 0 20px 0; } } .text_with_rectangle_8 { display: table; background-image: url(../images/rect-8-lg.svg); background-repeat: no-repeat; background-position: 70% 50%; background-size:210px 312px; min-height:312px; @media (max-width: 1200px) { background-image: url(../images/rect-8-lg.svg); background-position: 70% 50%; background-size:89px 160px; min-height:160px; padding: 0 0 0 8%; } @media (max-width: 767px) { background-image: url(../images/rect-8-lg.svg); background-position: 75% 50%; background-size:85px 130px; min-height:130px; padding: 0; width:250px; } } .text_with_rectangle_77 { display: table; background-image: url(../images/rect-8-lg.svg); background-repeat: no-repeat; background-position: 100% 50%; background-size:210px 312px; min-height:312px; @media (max-width: 1200px) { background-image: url(../images/rect-8-lg.svg); background-position: 100% 0; background-size: 142px 204px; min-height:204px; padding: 0 0 0 0; } @media (max-width: 767px) { background-image: url(../images/rect-8-lg.svg); background-position: 90% 0; background-size: 104px 179px; min-height:179px; padding: 0 0 20px 0; } } .text_with_rectangle_88 { display: table; background-image: url(../images/rect-8-lg.svg); background-repeat: no-repeat; background-position: 70% 50%; background-size:210px 312px; min-height:312px; @media (max-width: 1200px) { background-image: url(../images/rect-8-lg.svg); background-position: 100% 0; background-size: 142px 204px; min-height:204px; padding: 0 0 0 13%; margin-bottom:30px; } @media (max-width: 767px) { /* background-image: url(../images/rect-8-lg.svg); */ background-position: 90% 0; background-size: 104px 179px; min-height:179px; padding: 0 0 20px 0; } } .text_without_rectangle{ display: table; min-height:312px; padding-top:50px; padding-bottom:50px; @media (max-width: 1200px) { min-height:204px; padding: 30px 0 30px 13%; } @media (max-width: 767px) { //min-height:179px; padding: 40px 0 0 0; } } .text_with_rectangle_99{ display: table; background-image: url(../images/rect-thin-2.svg); background-repeat: no-repeat; background-position: 11% 100%; background-size: 102px 227px; min-height: 227px; padding-left: 16.66%; padding-bottom: 40px; padding-right:8%; @media (max-width: 1200px) { background-image: url(../images/rect-8-lg.svg); background-position: 100% 0; background-size: 142px 204px; min-height:204px; padding: 0 0 0 13%; margin-bottom:20px; } @media (max-width: 767px) { background-image: url(../images/rect-8-lg.svg); background-position: 90% 0; background-size: 104px 179px; min-height:179px; padding: 0 0 20px 0; } } .text_with_rectangle_9 { display: table; background-image: url(../images/rect-thin-3.svg); background-repeat: no-repeat; background-position: 50% 0; height: 320px; @media (max-width: 1200px) { background-image: url(../images/rect-thin-3_sm.svg); } @media (max-width: 767px) { background-image: url(../images/rect-thin-3_xs.svg); height: 180px; } } .text_with_rectangle_10 { display: table; background-image: url(../images/rect-square-2.svg); background-position: 0 60%; background-repeat: no-repeat; height: 100%; padding: 0 0 0 8%; @media (max-width: 1200px) { background-image: url(../images/rect-square-2_sm.svg); } @media (max-width: 767px) { background-image: url(../images/rect-square-2_xs.svg); background-position: 10% 10%; padding: 0; } } .text_with_rectangle_11 { display: table; background-image: url(../images/rect-thin-3.svg); background-repeat: no-repeat; background-position: 100% 0; height: 320px; padding: 0 6% 0 0; @media (max-width: 1200px) { background-image: url(../images/rect-thin-3_sm.svg); } @media (max-width: 767px) { background-image: url(../images/rect-thin-3_xs.svg); height: 180px; } } .text_with_rectangle_12 { display: table; background-image: url(../images/combined-shape.svg); background-repeat: no-repeat; background-position: 16% 50%; height: 279px; margin: 280px 0 0 0; @media (max-width: 979px) { background-image: url(/themes/demo/assets/images/f-ph-rect-head-sm.svg); // background-image: url(../images/rect-black-small_1.svg); margin: 427px 0 0 0; height: 157px; } @media (max-width: 767px) { background-image: url(/themes/demo/assets/images/f-ph-rect-head-xs.svg); // background-image: url(../images/rect-black-small_2.svg); margin: 138px 0 0 0; height: 121px; } } .text_with_rectangle_13 { display: table; background-image: url(../images/rect-black-mini.svg); background-repeat: no-repeat; background-position: 7% 50%; height: 189px; margin: 367px 0 0 0; @media (max-width: 979px) { background-image: url(../images/rect-black-mini_sm.svg); margin: 464px 0 0 0; height: 148px; } @media (max-width: 767px) { background-image: url(../images/rect-black-mini_xs.svg); margin: 146px 0 0 0; height: 122px; } } .text_with_rectangle_14 { display: table; background-image: url(../images/rect-8-lg.svg); background-repeat: no-repeat; background-position: 100% 50%; background-size:210px 312px; min-height:312px; /*padding: 0 8%;*/ @media (max-width: 1200px) { background-size: 142px 204px; min-height:204px; padding: 0 0 0 0; } @media (max-width: 767px) { background-size: 104px 179px; min-height:179px; padding: 0 0 20px 0; } } .text_with_rectangle_15 { display: table; background: url(../images/rect-square-3.svg); background-repeat: no-repeat; background-position: 50% 0; height: 174px; padding: 0 9% 0 0; @media (max-width: 1200px) { padding: 0 9% 0 8%; } @media (max-width: 979px) { background:; background-repeat: no-repeat; padding: 0 0 0 8%; background-position: 50% 0; } @media (max-width: 767px) { background: url(../images/rect-mid_xs.svg); background-repeat: no-repeat; margin: 40px auto; background-position: 50% 0; padding: 0; } } .text_without_rec { padding: 0 0 0 5%; } .padd_text_w_rec { padding: 0 16%; @media (max-width: 767px) { padding: 0 15px; } } /*____________________________________________________________________ icons ___________________________________________________________________________________*/ .ico_block { position: relative; float: left; font-family: @fontMine; font-size: 14px; line-height: 20px; color: @mineColor; margin: 50px 0 0 0; text-align: center; } .ico_after { position: absolute; width: 44px; height: 44px; top: -52px; right: 50%; margin-right: -22px; } .ico_position_block { div { margin: 80px 50px 0 0; &:last-child { margin: 80px 0 0 0; } } } .ico_flachengewicht { .ico_block; &:after { .ico_after; content: url(../images/spec_icons/gewicht.svg); } } .ico_depth { .ico_block; &:after { .ico_after; content: url(../images/spec_icons/tiefe.svg); top: -45px; } } .ico_tape { .ico_block; &:after { .ico_after; content: url(../images/spec_icons/tape.svg); } } .ico_pin { .ico_block; &:after { .ico_after; content: url(../images/pin.gif); } } .ico_hook { .ico_block; &:after { .ico_after; content: url(../images/spec_icons/haken.svg); } } .ico_knot { .ico_block; &:after { .ico_after; content: url(../images/spec_icons/knoten.svg); top: -40px; } } .ico_three_layers { .ico_block; &:after { .ico_after; content: url(../images/spec_icons/3_layers.svg); } } .ico_up_to_leds { .ico_block; &:after { .ico_after; content: url(../images/spec_icons/up_to_xx_leds.svg); } } .ico_endless { .ico_block; &:after { .ico_after; content: url(../images/spec_icons/endless_placing.svg); } } .ico_stretch { .ico_block; &:after { .ico_after; width: 62px; margin-right: -31px; content: url(../images/spec_icons/strech.svg); } } .ico_fold { .ico_block; &:after { .ico_after; top: -44px; content: url(../images/spec_icons/faltbar.svg); } } .ico_squeeze { .ico_block; &:after { .ico_after; content: url(../images/spec_icons/squeeze.svg); } } .ico_splash { .ico_block; &:after { .ico_after; content: url(../images/spec_icons/wasserfest.svg); } } p { margin: 0 0 20px 0; } .padd_top_bott_10 { padding: 150px 0 40px; @media (max-width: 979px) { padding: 110px 0 40px; } @media (max-width: 767px) { padding: 70px 0 20px; } } .check_container { position: relative; color: @mineColor; margin-top: 10px; } .ch_box { position: relative; float: left; padding: 0 32px 16px 0; font-size: 24px; font-family: @fontAdditional; span { padding: 0 0 0 10px; } @media (max-width: 979px) { font-size: 18px; float: none; } } .ch_box input[type="checkbox"] { display: none; } input[type="checkbox"] + label { cursor: pointer; } input[type="checkbox"] + label::before { content: ""; display: inline-block; height: 28px; width: 28px; margin: 0 0 -5px 0; background: #ffffff url(../images/checkbox.svg); background-repeat: no-repeat; background-position: 2px 2px; } input[type="checkbox"]:checked + label::before { background-position: 0 0; background: #ffffff url(../images/checkbox_on.svg); } .pos_video_text h1 { color: @additionalColor; } #j-carousel-quotes h1{ @media (max-width: 600px) { font-size: 22px; } } .city_item_position a, .city_item_position a:hover{ color: #fff; text-decoration: underline; } .bg-photo{ position:relative; display: table; width: 100%; text-align: center; height: 400px; background-size: cover; background-position: center; margin:0 auto 25px; } .name-center{ font-size: 44px; font-family: 'apercu-regular'; line-height: 1.14; color:#ffffff; margin: auto; display: table-cell; vertical-align: middle; @media (max-width:767px){ font-size: 34px; } } .padd-bott-50{ padding-bottom: 50px; } .butt-full{ position:absolute; bottom:0; left:15px; right:15px; height: 48px; @media (max-width:767px){ position: relative; left: 0; } } .butt-full .button_2 a.link--kumya{ width: 100%; padding: 0 px 0; } .text-red{ color:#FB0206; } .block-inline{ div{ display:inline-block; padding-right: 15px; } } .prod_name { position: relative; font-family: 'apercu-regular'; font-size: 22px; line-height: 1.5; } .viev-ph-v{ position: absolute; bottom: 0; left:15px; height: 180px; overflow:hidden; } .position-prod-left{ padding-bottom: 50px; } .position-prod-right{ padding-bottom: 50px; } .v-box{ display: block; position: relative; float: left; margin: 5px 20px 0 0; height: 160px; width: auto; img{ height: 160px; width: auto; } } .v-butt{ position: absolute; left:50%; top: 50%; margin-left: -25px; margin-top: -25px; img{ width: 50px; height: auto; } } .text-12-upp{ font-family: 'apercu-bold'; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: #0f141a; } .reserv-place{ padding-bottom: 210px; } .prod-photo{ padding-bottom: 0; img{ width: 100%; height:auto; margin-bottom: 60px; } @media (max-width:767px){ padding-bottom: 50px; img{ margin-bottom: 20px; } } } .padd-bott-20{ padding-bottom: 20px; } .row-flex { display: flex; flex-flow: row wrap; } *, *::after, *::before { box-sizing: border-box; } .button_1 a.link--kumya ::after { background: @mineColor none repeat scroll 0 0; content: ""; height: 100%; position: absolute; right: 0; top: 0; transform: translate3d(0, 100%, 0); transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; width: 100%; z-index: -1; } .button_1 a.link--kumya { position: relative; color: #0e141a; font-family: @fontAdditional; font-size: 12px; font-weight: normal; line-height: 1.42857; border-radius: 0; background: transparent; text-transform: uppercase; height: 48px; width: 180px; overflow: hidden; } .button_1 a.link { display: inline-block; outline: medium none; position: relative; text-decoration: none; } .button_1 a.link--kumya span::before { color: #0e141a; content: attr(data-letters); left: 0; right: 0; position: absolute; overflow: hidden; text-align: center; transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; height: 100%; } .button_1 a.link--kumya span { color: #ffffff; display: block; position: relative; text-align: center; padding: 14px 0 13px; overflow: hidden; border: 2px solid @mineColor; box-sizing: border-box; } .button_1 a.link--kumya:hover { color: #0e141a; text-decoration: none; } .button_1 a.link--kumya :hover::after { transform: translate3d(0px, 0px, 0px); } .button_1 a.link--kumya:hover span::before { height: 0; } .button_2 { margin: 0 auto; padding: 0; text-align: center; } .button_2 a.link--kumya ::after { background: #ffffff none repeat scroll 0 0; content: ""; height: 100%; position: absolute; right: 0; top: 0; transform: translate3d(0, 100%, 0); transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; width: 100%; z-index: -1; } .button_2 a.link--kumya { position: relative; color: #ffffff; font-family: @fontAdditional; font-size: 12px; font-weight: normal; line-height: 1.42857; border: 2px solid @mineColor; border-radius: 0; background: @mineColor; text-transform: uppercase; height: 48px; width: 180px; overflow: hidden; } .button_2 a.link { display: inline-block; outline: medium none; position: relative; text-decoration: none; } .button_2 a.link--kumya span::before { color: #ffffff; content: attr(data-letters); left: 0; right: 0; position: absolute; overflow: hidden; text-align: center; transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; height: 100%; } .button_2 a.link--kumya span { color: #0e141a; display: block; vertical-align: middle; position: relative; text-align: center; padding: 14px 0 13px; overflow: hidden; box-sizing: border-box; } .button_2 a.link--kumya:hover { color: #0e141a; text-decoration: none; } .button_2 a.link--kumya :hover::after { transform: translate3d(0px, 0px, 0px); } .button_2 a.link--kumya:hover span::before { height: 0; } .logo-box{ display: inline-block; position: relative; margin: 5px 20px 0 0; height: 100px; width: auto; img{ width: auto; } } /*_____________________________________________________________________________*/ .vert-align{ margin: auto; display: table-cell; vertical-align: middle; } .text-rectangle-1 { display: table; background-image:url(../images/rect-square.svg); background-position: left; background-repeat: no-repeat; background-size: 90px; height: 100%; padding: 0 0 0 45px; @media (max-width:967px){ background-size: 60px; height: 100%; padding: 0 0 0 30px; } @media (max-width:767px){ background-position: 10px center; padding: 0 0 0 0; } } .text-rectangle-2{ display: table; background-image:url(../images/rect-thin-3.svg); background-position: right center; background-repeat: no-repeat; background-size: 210px; min-height: 312px; padding: 0 40px 0 0; @media (max-width:967px){ background-size:114px; min-height:173px; } @media (max-width:767px){ background-image:url(../images/rect-thin-3mob.svg); background-size: 104px; min-height:179px; padding: 0 10px 0 0; } } .img_link{ display: block; background: #000000; overflow:hidden; } .img_link img{ width:100%; height:auto; opacity:1; transition:all 0.5s ease; } .img_link:hover img{ opacity:0.5; -moz-opacity:0.5; filter: alpha(opacity=50) black; -khtml-opacity:0.5; } .img_link:hover .name-hook{ color: #ffffff; text-decoration: none; } .img_link:hover .text-vis{ color: #ffffff; text-decoration: none; margin-bottom: 0; opacity: 1; } .text-vis-name{ font-family: 'apercu-bold'; font-size: 24px; line-height: 36px; color: #ffffff; @media (max-width: 767px) { font-size: 24px; } } .name-hook { position: absolute; bottom: 70px; left: 57px; right:15px; @media (max-width: 767px) { bottom: 24px; left: 15px; right:15px; } } .text-vis{ position: relative; font-family: 'apercu-regular'; font-size: 14px; color: #ffffff; padding: 0 0 0 45px; margin-bottom: -25px; transition:all 0.5s ease; opacity: 0; } .text-vis:before{ content: " "; position: absolute; left: 0; top: 10px; width: 30px; height: 2px; background-color: #FFF; @media (max-width:767px){ left: 0; top: 10px; } } .explore-link{ position:absolute; left:0; right:0; text-align:center; top:45%; font-family:'apercu-bold'; font-size: 56px; color:#ffffff; opacity:0; transition:all 0.5s ease; @media (max-width:767px){ font-size: 24px; } } .img_link:hover .explore-link{ opacity:1; top:40%; } .pos-relative{ position: relative; } /*.item .h1{ position: absolute; top: 70px; left: -30px; width: 650px; }*/ .padd-t-b{ padding-bottom: 60px; padding-top:60px; } .padd-t{ padding-top:60px; } .padd-b{ padding-bottom:60px; } .black_bg_m .activ .min_w_menu { display: inline-block; background: #0f141a !important; color: #ffffff !important; @media (max-width: 1024px){ background: #ffffff !important; color: #0f141a !important; } } .pos-center{ display: flex; justify-content: center; align-items: center; height: 156px; img{ //width:100%; @media (max-width: 767px) { width:auto; } } @media (max-width: 767px) { //height:auto; height: 136px; } } .pos-center-block-1{ align-content: center; display: flex; justify-content: center; align-items: center; @media (max-width: 767px) { display: block; } } .pos-center-block{ align-content: center; display: flex; justify-content: center; align-items: center; } .color-block{ position:relative; height:570px; @media (max-width: 967px) { height:auto; min-height:370px; margin: 0 0 40px 0; } @media (max-width: 767px) { min-height:auto; } } .color-seagreen{ background-color:#4a8a98; color:@additionalColor; margin:0 -15px 100px -15px; @media (max-width: 967px) { margin: 0 0 40px 0; } } .color-beige{ background-color:#bfb699; color:@additionalColor; background-image: url(/themes/demo/assets/images/beige-bg.jpg); background-repeat:no-repeat; background-position:100% 50%; background-size:contain; @media (max-width: 767px) { background-image:none; } } .text-pos-bott{ padding:0 0 70px 70px; @media (max-width: 967px) { padding:0 0 40px 40px; } @media (max-width: 767px) { padding:40px 15px 20px 15px; width:100%; text-align:center; .h1{ text-align:center; margin-top:15px; } } } .vert-align-c-b-text{ display: flex; align-items: flex-end; } .vert-align-c-b-img{ display: flex; align-items: center; } .col-bl-img{ //margin-right:-15px; text-align:center; margin:auto; img{ width:60%; margin:auto; @media (max-width: 767px) { width:86%; //margin-left:-15px; } } } .col-bl-img-empty{ width:100%; padding-bottom:70%; } .pos-butt-c-b{ padding-top:20px; .button_2{ text-align:left; } @media (max-width: 767px) { padding-bottom:40px; .button_2{ width:100% !important; } .button_2 a.link--kumya{ width:100% !important; } } } .prod-color-block{ padding-bottom:160px; .text-vis-name{ color:#0f141a; padding:0 0 7px 0; @media (max-width: 767px) { padding:0 0 20px 0; } } .button_2{ position:absolute; bottom: 110px; right: 15px; left: 15px; @media (max-width: 767px) { position:relative; width:100%; bottom: 0; right: 0; left: 0; } } .button_2 a.link--kumya{ width:100% !important; } img{ width:100%; } .text_normal{ padding-bottom:40px;} @media (max-width: 767px) { padding-bottom:60px; } } .name-series{ font-family:@fontMine; font-size: 14px; line-height: 1.43; padding:15px 0 5px; } .c-b-red{color:#783947;} .c-b-blue{color:#468894;} .c-b-green{color:#3c6b5e;} .c-b-beige{color:#bfb699;} .c-b-gray{color:#b4b4b4;} .proportions{ } .text-center .h1{ text-align:center; } #our-product.text_with_rectangle_3_film{ background-position:7% 0; @media (max-width: 1200px) { .news_name{ left:-15px; } } @media (max-width: 967px) { .news_name{ left:-26px; } } @media (max-width: 767px) { padding:0; background-image:none; .news_name{ display:none; } } } .item .quote-block .h1{ position:relative; left:0; right:0; bottom:0; top:0; color:#000000; width:100%; } .quote-pos{ position:relative; width:60%; margin:auto; @media (max-width: 767px) { width: calc(~'100% - 30px'); } } .quote-block{ display: flex; justify-content: center; align-items: center; background-image: url(../images/rect-8-lg.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size:210px 312px; height:440px; @media (max-width: 767px) { background-size:88px 168px; height:340px; } } #carousel-example-generic .carousel-control{ opacity:0; transition: all 0.5s ease; width:50%; } #carousel-example-generic .carousel-control.left .carousel_arr div{ position:absolute; top:50%; margin-top:-20px; left:40px; } #carousel-example-generic .carousel-control.right .carousel_arr div{ position:absolute; top:50%; margin-top:-20px; right:40px; } #carousel-example-generic .carousel-control:hover{ opacity:1; } #carousel-example-generic-full{ margin-bottom:40px; } #carousel-example-generic-2, #carousel-example-generic-3, #carousel-example-generic-4, #carousel-example-generic-5, #carousel-example-generic-22{ margin-bottom:40px; padding:0 20px; @media (max-width: 976px) { margin-bottom:40px; } } #carousel-example-generic-1 .carousel-control.right, #carousel-example-generic-full .carousel-control.right{ right: 0; } #carousel-example-generic-2 .carousel-control.right, #carousel-example-generic-22 .carousel-control.right { right:-20px; @media (max-width: 767px) { right:-5px; } } #carousel-example-generic-2 .carousel-control.left, #carousel-example-generic-22 .carousel-control.left { left:-20px; @media (max-width: 767px) { left:-5px;} } #carousel-example-generic-2 .carousel-inner, #carousel-example-generic-22 .carousel-inner, #carousel-example-generic-3 .carousel-inner, #carousel-example-generic-4 .carousel-inner, #carousel-example-generic-5 .carousel-inner,{ @media (max-width: 767px) { width:90%; margin:auto; } } /*#carousel-example-generic-3{ margin:0 0 40px 0; @media (max-width: 967px) { margin:0 -15px 20px -15px; } }*/ #carousel-example-generic-3 .carousel-control{ @media (max-width: 967px) { } } #carousel-example-generic-3 .carousel-control.right, #carousel-example-generic-4 .carousel-control.right, #carousel-example-generic-2 .carousel-control.right { right:-20px; @media (max-width: 767px) { right:0; } } #carousel-example-generic-3 .carousel-control.left, #carousel-example-generic-4 .carousel-control.left, #carousel-example-generic-2 .carousel-control.left { left:-20px; @media (max-width: 767px) { left:0;} } #carousel-example-generic-1 .carousel-control{ @media (max-width: 767px) { position:relative; width:49%; display:inline-block; } } #carousel-example-generic-1 .left .carousel_arr{ @media (max-width: 767px) { margin:0 15px 0 auto; } } #carousel-example-generic-1 .right .carousel_arr{ @media (max-width: 767px) { margin:0 auto 0 15px; } } #carousel-example-generic-1 .carousel_arr img, #carousel-example-generic-2 .carousel_arr img, #carousel-example-generic-2 .carousel_arr img, #carousel-example-generic-3 .carousel_arr img, #carousel-example-generic-4 .carousel_arr img, #carousel-example-generic-22 .carousel_arr img{ width:32px !important; height:auto; } a.link-1{ display:block; font-family:@fontAdditional; font-size: 24px; color:#000000; padding:15px 0 15px 0; &:hever{ color:#000000; text-decoration:none!important; } &:focus{ color:#000000; text-decoration:none!important; } } .companies-logo{ @media (max-width: 767px) { margin:40px auto 0; } } .companies-logo img{ max-width:90%; @media (max-width: 767px) { //margin:40px auto 0; } @media (max-width: 460px) { //margin:40px auto 0; max-width:100%; } } .in-detail{ padding:10px 0 0 50px; @media (max-width: 976px) { padding:30px 0 0 0; } } .price-block{ } .detail-descr{ .view_link{ text-align:left; margin:27px 0; @media (max-width: 767px) { text-align:center; margin:20px 0; } } } .price-block .button_2{ display:inline-block; margin:16px 20px 5px 0; @media (max-width: 767px) { margin:16px 0 0 0; width:100%; } } .price-block .button_2 a.link--kumya{ @media (max-width: 1200px) { width:140px; } @media (max-width: 767px) { width:100%; } } .accordion-block{ display:inline; } .color-gray{ background-color:#f3f3f3; color:#000000; background-repeat: no-repeat; background-size: contain; } .br-edit{ background-image: url(/themes/demo/assets/images/bag-1.jpg); background-position: 85% 50%; @media (max-width: 767px) { background-image: none; } } .xp-s{ background-image: url(/themes/demo/assets/images/xp-s-all.jpg); background-position: 100% 50%; @media (max-width: 767px) { background-image: none; } } .xp-m{ background-image: url(/themes/demo/assets/images/xp-m-all.jpg); background-position: 100% 50%; @media (max-width: 767px) { background-image: none; } } .d-block-sm{ display:flex; @media (max-width: 967px) { display:block; } } .d-block-sm-1{ display:flex; @media (max-width: 767px) { display:block; } } .long-text{ columns: 2; padding-top:20px; .collapse.in{ background:transparent; color:#000000; min-height:auto; } @media (max-width: 767px) { columns: 1; } } .link-h1 { padding: 0 0 90px 0; @media (max-width: 767px) { padding: 30px 0 ; } a{ display:block; font-size: 56px; font-family: @fontAdditional; text-align: left; line-height: 1.14; color:#c3c4c6; padding:24px 0; transition: all 0.3s ease; &:hover{ color:#0f141a; text-decoration:none; } @media (max-width: 1200px) { font-size: 46px; padding:15px 0; } @media (max-width: 979px) { font-size: 36px; line-height: 1.17; padding:15px 0; } @media (max-width: 767px) { font-size: 24px; line-height: 1.17; padding:5px 0; } } } .photo_with_rectangle{ display: table; background-image: url(../images/rect-8-lg.svg); background-repeat: no-repeat; background-position: 100% 100%; background-size:210px 312px; min-height:312px; padding: 0 11% 90px 0; @media (max-width: 1200px) { background-image: url(../images/rect-8-lg.svg); background-size: 142px 204px; min-height:204px; padding: 0 10% 50px 0; } @media (max-width: 767px) { background-image: none; padding: 0 0 0 0; } } input[type="radio"], input[type="checkbox"] { margin: 4px 6px 0 0; } .text-rectangle-1-fix{ margin-left: -50px; margin-bottom: 50px; @media (max-width: 1200px) { margin-left: 0; margin-bottom: 20px; } } .photo-frame{ position:relative; width:100%; padding-bottom:75%; overflow:hidden; background-color:#cccccc; margin-bottom: 30px; } .in-frame{ position: absolute; top:0; left:0; bottom: 0; right: 0; background-position: center; background-size: cover; background-repeat: no-repeat; } .full-photo{ position:relative; max-height:700px; overflow:hidden; } .f-photo{ background-position:center; background-size:cover; padding-bottom:50%; @media (max-width: 967px) { padding-bottom:60%; } @media (max-width: 767px) { padding-bottom:100%; } } .prod-nav-block{ position:absolute; width:100%; height:40px; background-color:#f2f3f3; z-index:-2; @media (max-width: 768px) { top:70px; } } .prod-nav{ padding:12px 0 6px; text-align:center; font-family: @fontAdditional; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: @mineColor; text-decoration: none; &:hover { color: @mineColor; text-decoration: none; } a{margin:0 10px;} @media (max-width: 768px) { margin-top:70px; } } .carousel-example-generic-full .item{ max-height:700px; overflow:hidden; } .lrent{ color: #fff; text-decoration: underline; } .menu-block-2{ display:none; @media (max-width: 767px) { display:block; } } .color-connect { background-color: #3c5d6c; color: #ffffff; background-image: url(/storage/app/media/cpt.jpg); background-repeat: no-repeat; background-position: 100% 50%; background-size: contain; @media (max-width: 767px) { background-image:none; } } .color-connect1 { background-color: #4a8998; color: #ffffff; background-image: url(/storage/app/media/greensea-bg.jpg); background-repeat: no-repeat; background-position: 100% 50%; background-size: contain; margin:0 -15px 100px -15px; @media (max-width: 967px) { margin: 0 0 40px 0; padding-top: 300px; } @media (max-width: 767px) { /* background-image:none; */ padding-top: 0; } } .bggr { background-color: #f3f3f3; // padding: 22px 25px 20px 40px; } .item .news_item a { color: #0f141a; background-color: #fff; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; -ms-transition: all 0.6s ease; transition: all 0.6s ease; -moz-transform: scaleX(1); -o-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); } .item:hover .news_item a { color: #fff; background-color: #0f141a; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; -ms-transition: all 0.6s ease; transition: all 0.6s ease; -moz-transform: scaleX(1.1); -o-transform: scaleX(1.1); -webkit-transform: scaleX(1.1); transform: scaleX(1.1); text-decoration:none; } .news_block:hover a img { -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -o-transform: scale(0.95); -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; -ms-transition: all 0.6s ease; transition: all 0.6s ease; } .region-title{ font-family: @fontAdditional; font-size:16px; padding:80px 0 20px 0; text-align:center; width: 100%; } #carousel-example-generic-11{ @media (max-width: 767px) { .carousel-inner { //max-height:auto; } .carousel-inner > .item{ width:200%; margin-left:-50%; } .carousel-control{ display:none; } .carousel-indicators { left: 0; width: 100%; margin-left: 0; } } } #carousel-example-generic-122{ @media (max-width: 767px) { .carousel-indicators{ width:100%; left:0; margin-left: 0; } .carousel-control{ top:auto; text-shadow:none; } .carousel-control.left{ padding-left: calc(~'50% - 60px'); } .carousel-control.right{ padding-right: 50%; // margin-right: -60px; } } @media (max-width: 460px) { .carousel-control.right{ padding-right: calc(~'50% - 60px') } } } .videoframe{ height:400px; @media (max-width: 767px) { height:350px; } @media (max-width: 460px) { height:250px; } } .top_padd_xs{ @media (max-width: 767px) { padding-top:0; } } #carousel-example-generic-3{ @media (max-width: 767px) { padding: 0; margin-left:-15px; margin-right:-15px; .carousel-control{ display:none; } .carousel-inner{ width:100%; } } } .text-center-xs{ @media (max-width: 767px) { text-align:center; } .h1{ @media (max-width: 767px) { text-align:center; } } } a.r-m{ display:block; font-family:@fontAdditional; font-size:12px; letter-spasing:0.5px; color:#0f141a; text-transform:uppercase; text-decoration:none; padding:10px 0; &:hover{ color:#0f141a; text-decoration:none!important; } } .caret-r-m { position:relative; display: inline-block; width: 16px; height: 16px; margin-right:10px; margin-bottom: -4px; background-image: url(../images/dropdown-arrow.svg); transform: rotate(0deg); } .collapsed .caret-r-m { background-image: url(../images/dropdown-arrow.svg); transform: rotate(180deg); } li .navbar-toggle{ margin:0 auto; padding:0; text-align:center; width:100%; a{ color:#ffffff; &:hover{text-decoration:none;} } } .navbar-nav{ @media (max-width: 767px) { display:table-cell; vertical-align:middle; } } .prod-nav{ @media (max-width: 767px) { display:none; }} .prod-nav-block{ @media (max-width: 767px) { display:none; }} .menu-block-3{ display:none; @media (max-width: 767px) { display:block; margin-top: 66px; border-top:solid 1px #cccccc; } } .text_normal .collapse.in{ background:#ffffff;} #carousel-example-generic-full .carousel-control{ @media (max-width: 767px) { display:none; } } .carousel-indicators{ @media (max-width: 767px) { left:0; right:0; margin-left:0; width:100%; } } .marg_top_xs{ @media (max-width: 767px) { margin-top:0; } } .r-88-xs{ @media (max-width: 767px) { background-image: none; min-height:auto; } } .text-center-xs{ @media (max-width: 767px) { text-align:center; } } .carousel-control-xs{ @media (max-width: 767px) { display:none; } } .owl-carousel { -ms-touch-action: pan-y; touch-action: pan-y; } #carousel-example-generic-122 .carousel-control{ opacity:1 !important; } .text-center-xs .button_2{ @media (max-width: 767px) { width:50%; } @media (max-width: 460px) { width:70%; } } .form-group label.in-f-2{ display:inline; border-bottom:none; } .form-block{ bottom:auto; } .in-f-3 { position: relative; border-top: none; border-left: none; border-right: none; border-bottom: solid 3px #0f141a; background-color: transparent; height: 36px; width: 100%; padding: 7px 0; margin: 5px 0 5px 0; font-family: 'apercu-bold'; font-size: 22px; &:active{ border-top:0; border-right:0; border-left:0; } @media (max-width: 767px) { font-size: 18px; } } .form-label-1{ display:none; } .btn { border: 2px solid #1f648b;} .mess-t-area{ border: solid 1px #0f141a; border-radius:3px; background-color:#ffffff; width:100%; } input {outline:none;}