%PDF-
%PDF-
Mini Shell
Mini Shell
.bg {
background-image: url("img/bg-home.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.bg-without-lights {
background-image: url("../img/bg_without_light.png");
}
%button-style {
margin-left: auto;
appearance: none;
border: none;
background-color: transparent;
padding: calc-rem(0);
}
.lock {
overflow-y: hidden;
}
.hidden {
display: none;
}
.icon-menu,
.btn-menu-cross {
@extend %button-style;
}
.site-logo {
height: 113px;
width: 117px;
display: block;
@include media-breakpoint-down(md) {
width: calc-rem(65);
height: calc-rem(65);
}
img {
width: 100%;
height: auto;
}
}
.icon-menu {
svg {
@include media-breakpoint-down(md) {
width: calc-rem(40);
height: calc-rem(14);
}
}
}
.btn-menu-cross {
svg {
@include media-breakpoint-down(md) {
width: calc-rem(30) !important;
height: calc-rem(30) !important;
}
}
}
.header .burger-content .content {
margin: calc-rem(100) auto 0 auto !important;
@include media-breakpoint-down(md) {
margin-top: calc-rem(0) !important;
}
}
.social-item {
display: flex !important;
align-items: baseline;
position: relative;
z-index: 1;
}
.social-icon {
margin-right: calc-rem(20);
position: absolute;
z-index: 2;
top: 50%;
left: -34px;
transform: translateY(-50%);
}
.social-icons {
li {
margin-right: calc-rem(55) !important;
&.active, &:hover {
color: #030027;
transition: none !important;
svg, path {
fill: #030027;
}
g path {
stroke: #030027;
fill: transparent;
}
}
}
}
.container {
max-width: calc-rem(1680) !important;
@include media-breakpoint-down(xm) {
padding: 0 calc-rem(15);
}
}
.icon-menu-burger {
pointer-events: none;
}
.pd-250 {
padding: calc-rem(250) 0;
}
.pd-200 {
padding: calc-rem(200) 0;
}
.pd-t-200 {
padding-top: calc-rem(200);
}
.pd-150 {
padding: calc-rem(150) 0;
}
.mx-auto {
margin: 0 auto;
}
.running-string {
overflow: hidden;
font-family: Montserrat, sans-serif;
font-style: normal;
font-weight: bold;
font-size: calc-rem(140);
line-height: 171px;
color: $white;
white-space: nowrap;
padding: calc-rem(96) 0;
span {
display: inline-block;
width: calc-rem(93);
height: calc-rem(10);
border-radius: calc-rem(5);
margin: calc-rem(40) calc-rem(42);
background-color: $orange;
}
}
.btn, .title-h1, .title-h2, .title-h3, .desxription {
font-family: Montserrat, sans-serif;
font-style: normal;
text-align: center;
color: $white;
}
.btn {
display: block;
width: calc-rem(316);
padding: calc-rem(31) 0;
border-radius: calc-rem(50);
border: 1px solid $orange;
font-weight: normal;
font-size: calc-rem(30);
line-height: 120%;
position: relative;
z-index: 1;
overflow: hidden;
}
.btn::after {
content: "";
border-radius: calc-rem(50);
background: $orange;
position: absolute;
z-index: -1;
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
transform: scale(0, 0);
transition: all 0.3s ease;
}
.btn:hover::after {
transition: all 0.3s ease-out;
transform: scale(1, 1);
}
.btn:hover {
cursor: pointer;
}
.btn-phone {
position: relative;
z-index: 3;
width: calc-rem(100);
height: calc-rem(100);
display: flex;
align-items: center;
justify-content: center;
background-color: $orange;
border-radius: 50%;
i {
font-size: calc-rem(38);
color: $white;
}
}
.title-h1 {
font-weight: bold;
font-size: calc-rem(100);
line-height: calc-rem(122);
}
.title-h2 {
font-weight: bold;
font-size: calc-rem(48);
line-height: calc-rem(59);
}
.title-h3 {
font-weight: bold;
font-size: calc-rem(30);
line-height: calc-rem(36);
}
.description,
.description p {
font-weight: 500;
font-size: calc-rem(24);
line-height: calc-rem(29);
}
#information {
zoom: 2.37;
}
#kundcase {
zoom: 1.48;
}
#omoss {
zoom: 1.79;
}
#comment-img-small {
zoom: 0.425;
}
#comment-img-big {
zoom: 0.739;
}
#omoss-info {
zoom: 2.29;
}
#teamet {
zoom: 1.49;
}
#konstlagret {
zoom: 1.888;
}
#nyheter {
zoom: 1.8;
}
#nyheter-welcom {
zoom: 2.789;
}
#nyheter-four {
zoom: 1.31;
}
#kontact {
zoom: 0.741;
}
.nav-case {
overflow-x: auto;
@include media-breakpoint-down(md) {
margin-bottom: calc-rem(64);
}
&::-webkit-scrollbar {
width: 4px;
height: 4px;
background-color: #141237;
}
&::-webkit-scrollbar-thumb {
background: $orange;
}
ul {
list-style-type: none;
display: flex;
@include media-breakpoint-down(md) {
margin-bottom: 0;
}
li {
margin-right: calc-rem(50);
flex-shrink: 0;
@include media-breakpoint-down(md) {
margin-right: calc-rem(16);
}
&:last-child {
margin-right: 0;
}
}
a {
font-family: Montserrat, sans-serif;
font-style: normal;
font-weight: 500;
font-size: calc-rem(24);
line-height: calc-rem(29);
color: $gray-3;
transition: 0.3s;
&:hover {
color: $white;
}
}
.current-menu-item {
a {
color: $white;
}
}
}
}
.welcome {
width: 100%;
min-height: 100vh;
padding-top: calc-rem(200);
@include media-breakpoint-down(lg) {
min-height: unset;
}
&__content {
margin: 0 auto;
text-align: center;
@include media-breakpoint-down(md) {
margin-bottom: calc-rem(50);
}
h1 {
color: $orange;
text-transform: uppercase;
font-style: normal;
font-weight: bold;
font-size: calc-rem(48);
line-height: calc-rem(59);
@include media-breakpoint-down(lg) {
font-size: calc-rem(42);
}
@include media-breakpoint-down(sm) {
font-size: calc-rem(24);
line-height: calc-lh(24, 29);
}
h1:last-child {
margin-bottom: calc-rem(75);
@include media-breakpoint-down(lg) {
margin-bottom: calc-rem(51);
}
}
}
div {
max-width: calc-rem(520);
height: auto;
margin: calc-rem(70) auto;
img {
width: -webkit-fill-available;
}
@include media-breakpoint-down(lg) {
margin: calc-rem(55) auto;
}
@include media-breakpoint-down(sm) {
margin: calc-rem(40) auto;
max-width: calc-rem(420);
}
@include media-breakpoint-down(xm) {
margin: calc-rem(23) auto;
width: calc-rem(260);
}
}
div.hero-banner-logo {
//@include media-breakpoint-down(sm) {
// max-width: calc-rem(260px);
//}
img {
width: 100%;
height: auto;
}
}
}
}
.information {
&__content {
margin: 0 auto;
display: flex;
&-text {
h2 {
font-family: 'Montserrat', sans-serif;
color: $white;
font-size: calc-rem(30);
line-height: calc-rem(36);
margin-bottom: calc-rem(80);
font-weight: 700;
line-height: 120%;
@include media-breakpoint-down(md) {
font-size: calc-rem(26);
line-height: calc-rem(30);
margin-bottom: calc-rem(28);
}
@include media-breakpoint-down(sm) {
font-size: calc-rem(22);
line-height: calc-rem(26);
margin-bottom: calc-rem(24);
}
@include media-breakpoint-down(xm) {
font-size: calc-rem(18);
line-height: calc-rem(22);
margin-bottom: calc-rem(20);
}
}
p {
font-family: 'Montserrat', sans-serif;
color: $orange;
text-transform: uppercase;
font-weight: 500;
font-size: calc-rem(24);
line-height: calc-rem(29);
@include media-breakpoint-down(md) {
font-size: calc-rem(22);
line-height: calc-rem(25);
}
@include media-breakpoint-down(sm) {
font-size: calc-rem(18);
line-height: calc-rem(21);
}
@include media-breakpoint-down(xm) {
font-size: calc-rem(14);
line-height: calc-rem(17);
}
&:last-of-type {
margin-bottom: 0;
}
}
&.text-small {
p {
text-transform: initial;
color: $white;
span {
@include media-breakpoint-down(md) {
position: relative;
display: block;
text-align: center;
padding-bottom: calc-rem(80);
&:after {
content: "";
width: calc-rem(4);
height: calc-rem(40);
border-radius: calc-rem(2);
background-color: $white;
position: absolute;
bottom: calc-rem(20);
left: 50%;
@include media-breakpoint-down(sm) {
width: calc-rem(2);
border-radius: calc-rem(1);
}
@include media-breakpoint-down(xm) {
width: calc-rem(1);
border-radius: calc-rem(0);
}
}
}
&.orange {
color: $orange;
}
&:first-of-type {
@include media-breakpoint-down(md) {
text-align: start;
}
}
}
}
}
}
&-img {
position: relative;
overflow: hidden;
width: 100%;
height: calc-rem(615);
clip-path: url(#information);
@include media-breakpoint-down(xxl) {
height: calc-rem(420);
}
@include media-breakpoint-down(xl) {
height: calc-rem(360);
}
@include media-breakpoint-down(lg) {
clip-path: url(#information-mobile);
margin: 0 auto;
width: calc-rem(254);
height: calc-rem(290);
}
@include media-breakpoint-down(md) {
margin: 0 auto calc-rem(20) auto;
}
@include media-breakpoint-down(xm) {
width: calc-rem(182);
height: calc-rem(200);
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: calc-rem(630);
object-fit: cover;
@include media-breakpoint-down(xxl) {
height: calc-rem(430);
}
@include media-breakpoint-down(xl) {
height: calc-rem(380);
}
@include media-breakpoint-down(lg) {
height: calc-rem(295);
}
@include media-breakpoint-down(xm) {
width: calc-rem(182);
height: calc-rem(200);
}
}
}
.row {
@include media-breakpoint-down(md) {
margin: 0;
}
}
.image {
padding-right: 0;
@include media-breakpoint-down(lg) {
order: -1;
}
&.hide {
@include media-breakpoint-down(md) {
display: none;
}
}
}
.col-md-6 {
@include media-breakpoint-down(lg) {
width: 100%;
}
@include media-breakpoint-down(md) {
padding: 0;
}
}
.vertical-center {
display: flex;
flex-direction: column;
justify-content: center;
}
}
&.pd-250 {
@include media-breakpoint-down(lg) {
padding: calc-rem(200) 0;
}
@include media-breakpoint-down(xl) {
padding: calc-rem(50) 0;
}
}
.title-h1 {
margin-bottom: calc-rem(100);
@include media-breakpoint-down(md) {
margin-bottom: calc-rem(60);
}
}
}
.kundcase {
overflow: hidden;
.running-string {
@include media-breakpoint-down(xm) {
padding-top: calc-rem(50);
}
}
&__content {
margin: 0 auto;
@include media-breakpoint-down(xl) {
padding-bottom: calc-rem(40);
}
@include media-breakpoint-down(lg) {
padding-top: calc-rem(100)
}
.text {
margin-bottom: calc-rem(200);
@include media-breakpoint-down(lg) {
margin-bottom: calc-rem(120);
padding-left: calc-rem(20);
padding-right: calc-rem(20);
}
@include media-breakpoint-down(md) {
margin-bottom: calc-rem(40);
}
h1 {
@include media-breakpoint-down(md) {
padding: 0;
}
}
p {
color: $gray;
text-align: center;
}
}
.card {
margin-bottom: calc-rem(20);
@include media-breakpoint-down(md) {
margin-bottom: calc-rem(34);
}
@media only screen and (max-width:850px) {
margin-bottom: calc-rem(60);
}
h2 {
}
.block-hover:hover {
@include media-breakpoint-down(md) {
margin-bottom: calc-rem(20);
}
}
.img {
position: relative;
overflow: hidden;
width: 100%;
height: calc-rem(385);
clip-path: url(#kundcase);
transform: scale(1.1);
@include media-breakpoint-down(xxl) {
height: calc-rem(280);
}
@include media-breakpoint-down(lg) {
height: calc-rem(330);
}
@include media-breakpoint-down(xl) {
margin-left: calc(50% - 125px);
width: calc-rem(255);
clip-path: url(#information-mobile);
}
@include media-breakpoint-down(md) {
transform: scale(0.51);
margin: calc-rem(-95) auto;
height: calc-rem(315);
}
@include media-breakpoint-down(xm) {
width: calc-rem(180);
height: calc-rem(240);
margin: calc-rem(-80) auto;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: calc-rem(440);
object-fit: cover;
transition: 0.8s;
@include media-breakpoint-down(xxl) {
height: calc-rem(350);
}
@include media-breakpoint-down(xl) {
height: calc-rem(335);
}
}
}
.text {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 0;
margin: 0;
h2 {
text-align: left;
margin-bottom: calc-rem(20);
@include media-breakpoint-down(lg) {
text-align: center;
}
@include media-breakpoint-down(md) {
padding: calc-rem(25) 0 calc-rem(10);
font-size: calc-rem(20);
line-height: calc-lh(20, 24);
margin-bottom: calc-rem(0);
}
}
p {
color: $gray;
text-align: left;
@include media-breakpoint-down(lg) {
text-align: center;
}
}
@include media-breakpoint-down(lg) {
padding: 0 calc-rem(20);
}
@include media-breakpoint-down(md) {
padding-left: calc-rem(15);
padding-right: calc-rem(15);
}
@include media-breakpoint-down(xm) {
padding-left: 0;
padding-right: 0;
}
}
&.right {
h2, p {
text-align: right;
@include media-breakpoint-down(lg) {
text-align: center;
}
}
.text {
padding: 0 calc-rem(60) 0 0;
@include media-breakpoint-down(lg) {
padding: 0 calc-rem(20);
}
@include media-breakpoint-down(xm) {
padding-left: 0;
padding-right: 0;
}
}
.col-md-8 {
order: -1;
@include media-breakpoint-down(lg) {
order: 2;
}
}
.img {
margin-left: calc-rem(24);
@media only screen and (max-width: 850px) {
margin-left: calc(50% - 125px);
}
@media only screen and (max-width: 375px) {
margin-left: calc(50% - 90px);
}
}
}
.col-md-4 {
@include media-breakpoint-down(lg) {
width: 100%;
}
}
.col-md-8 {
@include media-breakpoint-down(lg) {
width: 100%;
}
}
&.row {
@include media-breakpoint-down(lg) {
--bs-gutter-x: 0;
}
}
}
&.pd-150 {
@include media-breakpoint-down(md) {
padding: calc-rem(40) 0;
}
}
.btn {
margin: calc-rem(100) auto 0 auto;
@include media-breakpoint-down(md) {
margin: 0 auto;
}
}
.img {
img {
@include media-breakpoint-down(md) {
height: -webkit-fill-available;
}
}
}
}
.card {
//@include media-breakpoint-down(md) {
// transform: scale(0.5);
//}
}
}
.kunder {
position: relative;
z-index: 1;
overflow: hidden;
&__content {
margin: 0 auto;
p {
margin: calc-rem(40) 0 calc-rem(210) 0;
text-align: center;
color: $gray;
@include media-breakpoint-down(md) {
margin: calc-rem(0) 0 calc-rem(120) 0;
}
@include media-breakpoint-down(xm) {
margin: calc-rem(0) 0 calc-rem(100) 0;
}
}
}
.list-icon {
width: 100%;
height: calc-rem(210);
display: flex;
overflow: hidden;
@include media-breakpoint-down(lg) {
height: calc-rem(150);
}
@include media-breakpoint-down(xm) {
height: calc-rem(75);
}
&__content {
display: flex;
align-items: center;
.list-item {
margin-right: calc-rem(195);
img {
@include media-breakpoint-down(lg) {
width: auto;
height: 100%;
}
}
@include media-breakpoint-down(lg) {
height: calc-rem(150);
margin-right: calc-rem(150);
}
@include media-breakpoint-down(md) {
height: calc-rem(50);
margin-right: calc-rem(120);
}
@include media-breakpoint-down(xm) {
height: calc-rem(75);
margin-right: calc-rem(90);
}
}
&.js-move-right {
.list-item {
@include media-breakpoint-down(lg) {
height: calc-rem(70);
}
@include media-breakpoint-down(md) {
height: calc-rem(50);
}
@include media-breakpoint-down(xm) {
height: calc-rem(30);
}
}
}
}
}
&.pd-200 {
@include media-breakpoint-down(md) {
padding: calc-rem(50) 0;
}
}
&:before {
content: "";
width: calc-rem(572);
height: calc-rem(577);
background: url('/src/img/circle.png');
background-repeat: no-repeat;
position: absolute;
top: calc-rem(50);
right: calc-rem(-100);
z-index: 0;
touch-action: none;
@include media-breakpoint-down(md) {
right: calc-rem(-75);
top: calc-rem(25);
width: calc-rem(140);
height: calc-rem(140);
z-index: -1;
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMxIiBoZWlnaHQ9IjEzNSIgdmlld0JveD0iMCAwIDEzMSAxMzUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBvcGFjaXR5PSIwLjciIGN4PSI2NS45OTY2IiBjeT0iNjkuOTg4MyIgcj0iNjQuMjExNSIgc3Ryb2tlPSIjRjY5MjFFIiBzdHJva2Utd2lkdGg9IjAuNyIvPjxjaXJjbGUgb3BhY2l0eT0iMC41IiBjeD0iNTIuNzE3NSIgY3k9IjUzLjI2NzMiIHI9IjUyLjQ2NzUiIHN0cm9rZT0iI0Y2OTIxRSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48L3N2Zz4=) center center no-repeat;
}
/*&:after {
position: absolute;
content: '';
display: none;
right: calc-rem(-80);
top:calc-rem(20);
width: calc-rem(140);
height: calc-rem(140);
z-index: -1;
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMxIiBoZWlnaHQ9IjEzNSIgdmlld0JveD0iMCAwIDEzMSAxMzUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBvcGFjaXR5PSIwLjciIGN4PSI2NS45OTY2IiBjeT0iNjkuOTg4MyIgcj0iNjQuMjExNSIgc3Ryb2tlPSIjRjY5MjFFIiBzdHJva2Utd2lkdGg9IjAuNyIvPjxjaXJjbGUgb3BhY2l0eT0iMC41IiBjeD0iNTIuNzE3NSIgY3k9IjUzLjI2NzMiIHI9IjUyLjQ2NzUiIHN0cm9rZT0iI0Y2OTIxRSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48L3N2Zz4=) center center no-repeat;
@include media-breakpoint-down(lg) {
display: block;
}
}*/
/*@include media-breakpoint-down(sm) {
top: calc-rem(125);
right: calc-rem(-30);
width: calc-rem(100);
height: calc-rem(105);
background-size: calc-rem(100);
}
@include media-breakpoint-down(md) {
top: calc-rem(80);
right: calc-rem(-30);
width: calc-rem(92);
height: calc-rem(92);
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iOTIiIHZpZXdCb3g9IjAgMCA0OCA5MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIG9wYWNpdHk9IjAuNyIgY3g9IjQ2Ljg3NjYiIGN5PSI0Ny42NzQiIHI9IjQzLjk3NTgiIHN0cm9rZT0iI0Y2OTIxRSIgc3Ryb2tlLXdpZHRoPSIwLjciLz48Y2lyY2xlIG9wYWNpdHk9IjAuNSIgY3g9IjM2LjE5NDEiIGN5PSIzNi4xOTQxIiByPSIzNS45NDQxIiBzdHJva2U9IiNGNjkyMUUiIHN0cm9rZS13aWR0aD0iMC41Ii8+PC9zdmc+) center center no-repeat;
background-size: contain;
}*/
}
}
.omoss {
&__content {
margin: 0 auto;
h1 {
margin: calc-rem(170) 0 calc-rem(200) 0;
@include media-breakpoint-down(lg) {
margin: calc-rem(50) 0 calc-rem(130) 0;
}
@include media-breakpoint-down(md) {
margin: calc-rem(50) 0 calc-rem(100) 0;
}
@include media-breakpoint-down(xm) {
margin: calc-rem(50) 0 calc-rem(80) 0;
}
}
p {
color: $gray;
margin: 0 calc-rem(110) calc-rem(40) 0;
@include media-breakpoint-down(lg) {
margin: 0 0 calc-rem(40) 0;
text-align: left;
}
}
.btn {
margin-bottom: calc-rem(190);
@include media-breakpoint-down(md) {
margin: 0 auto calc-rem(50) auto;
}
}
.col-md-4 {
@include media-breakpoint-down(lg) {
width: 100%;
order: -1;
}
@include media-breakpoint-down(lg) {
margin-bottom: calc-rem(20);
}
}
.col-md-8 {
@include media-breakpoint-down(lg) {
width: 100%;
}
}
&-img {
position: relative;
overflow: hidden;
width: 100%;
height: calc-rem(385);
clip-path: url(#omoss);
@include media-breakpoint-down(xxl) {
height: calc-rem(307);
}
@include media-breakpoint-down(xl) {
height: calc-rem(253);
}
@include media-breakpoint-down(lg) {
width: calc-rem(254);
height: calc-rem(290);
margin: 0 auto;
}
@include media-breakpoint-down(xm) {
width: calc-rem(182);
height: calc-rem(200);
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: calc-rem(385);
object-fit: cover;
@include media-breakpoint-down(xxl) {
height: calc-rem(307);
}
@include media-breakpoint-down(xl) {
height: calc-rem(253);
}
@include media-breakpoint-down(lg) {
width: calc-rem(254);
height: calc-rem(290);
}
@include media-breakpoint-down(xm) {
width: calc-rem(182);
height: calc-rem(200);
}
}
}
}
}
.comment {
&__content {
margin: 0 auto;
max-width: calc-rem(1020);
@media only screen and (max-width: 768px) {
max-width : calc-rem(640);
width : 100%;
}
h3 {
position: relative;
width: fit-content;
text-align: center;
margin-top: calc-rem(330);
@include media-breakpoint-down(lg) {
margin-top: calc-rem(150);
}
@include media-breakpoint-down(md) {
font-size: calc-rem(18);
line-height: calc-lh(18, 22);
margin-top: calc-rem(100);
}
@include media-breakpoint-down(xm) {
margin-top: calc-rem(50);
}
&:before {
content: '';
position: absolute;
top: calc-rem(-54);
left: calc-rem(-12);
width: calc-rem(68);
height: calc-rem(52);
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAzMyAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuNjA1OSAyM0gwLjQwNTg1OUwxMC4wMDU5IDAuMjk5OTk3SDE2LjUwNTlMMTAuNjA1OSAyM1pNMjYuODA1OSAyM0gxNi42MDU5TDI2LjIwNTkgMC4yOTk5OTdIMzIuNzA1OUwyNi44MDU5IDIzWiIgZmlsbD0iI0Y2OTIxRSIvPjwvc3ZnPg==) center center no-repeat;
@include media-breakpoint-down(md) {
left: 0;
}
@include media-breakpoint-down(xm) {
top: calc-rem(-35);
width: calc-rem(35);
height: calc-rem(26);
//font-size: calc-rem(25);
}
}
}
.list-image {
margin: calc-rem(120) 0 calc-rem(256) 0;
display: flex;
justify-content: space-between;
align-items: center;
@include media-breakpoint-down(lg) {
margin: calc-rem(100) 0 calc-rem(150) 0;
}
@include media-breakpoint-down(xm) {
margin: calc-rem(40) 0 calc-rem(50) 0;
}
&__small {
width: calc-rem(110);
height: calc-rem(100);
//width: 110px;
//height: -webkit-fill-available;
clip-path: url(#comment-img-small);
@include media-breakpoint-down(sm) {
width: calc-rem(70);
height: calc-rem(70);
}
img {
height: calc-rem(100);
@include media-breakpoint-down(sm) {
width: calc-rem(70);
height: calc-rem(70);
}
}
}
&__big {
width: calc-rem(175);
height: calc-rem(165);
//height: -webkit-fill-available;
//clip-path: url(#comment-img-big);
-webkit-clip-path: url(#comment-img-big);
@include media-breakpoint-down(sm) {
width: calc-rem(100);
height: calc-rem(100);
}
img {
height: calc-rem(164);
@include media-breakpoint-down(sm) {
width: calc-rem(100);
height: calc-rem(100);
}
}
}
.img {
position: relative;
overflow: hidden;
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
object-fit: cover;
}
}
}
}
}
.services {
&__content {
margin: 0 auto;
padding: 0 0 calc-rem(90) 0;
@include media-breakpoint-down(xm) {
padding: calc-rem(50) 0 calc-rem(30) 0;
}
h1 {
margin-bottom: calc-rem(200);
@include media-breakpoint-down(lg) {
margin-bottom: calc-rem(150);
}
@include media-breakpoint-down(md) {
margin-bottom: calc-rem(100);
}
@include media-breakpoint-down(md) {
margin-bottom: calc-rem(82);
}
@include media-breakpoint-down(xm) {
margin-bottom: calc-rem(80);
font-size: calc-rem(24);
line-height: calc-lh(24, 29);
}
}
.info {
h2 {
text-align: left;
}
p {
color: #817F94;
text-align: left;
margin: calc-rem(64) 0;
@include media-breakpoint-down(md) {
margin: calc-rem(20) 0;
}
}
ul {
padding: 0;
list-style-type: none;
color: $white;
li {
margin-bottom: calc-rem(20);
font-size: calc-rem(24);
line-height: calc-rem(29);
@include media-breakpoint-down(md) {
margin-bottom: calc-rem(10);
}
@include media-breakpoint-down(xm) {
font-size: calc-rem(14);
line-height: calc-lh(14, 17);
}
&:last-child {
@include media-breakpoint-down(md) {
margin-bottom: calc-rem(40);
}
}
}
}
}
.text {
p {
color: $gray;
margin-bottom: calc-rem(90);
text-align: left;
@include media-breakpoint-down(md) {
margin-bottom: calc-rem(42);
}
}
.btn {
@include media-breakpoint-down(md) {
margin: 0 auto;
}
}
}
.card {
margin-bottom: calc-rem(287);
@include media-breakpoint-down(lg) {
margin-bottom: calc-rem(150);
}
@include media-breakpoint-down(xm) {
margin-bottom: calc-rem(50);
}
}
.row {
@include media-breakpoint-down(md) {
padding: 0 calc-rem(20);
--bs-gutter-x: 0;
}
@include media-breakpoint-down(xm) {
padding: 0;
}
}
}
}
.nyheter {
padding: calc-rem(165) 0 calc-rem(150) 0;
@include media-breakpoint-down(xm) {
padding: calc-rem(93) 0;
}
.nav-case {
ul {
padding-left: 0;
}
}
&__content {
position: relative;
overflow: hidden;
height: calc-rem(560);
@include media-breakpoint-down(md) {
height: calc-rem(350);
}
@include media-breakpoint-down(xm) {
height: calc-rem(200);
}
&-image {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: flex;
justify-content: space-between;
.title {
font-family: Montserrat, sans-serif;
font-style: normal;
font-weight: bold;
font-size: calc-rem(140);
line-height: calc-rem(171);
color: $white;
white-space: nowrap;
position: absolute;
z-index: 3;
top: calc-rem(135);
@include media-breakpoint-down(lg) {
font-size: calc-rem(110);
top: calc-rem(90);
}
@include media-breakpoint-down(md) {
font-size: calc-rem(80);
top: calc-rem(45);
}
@include media-breakpoint-down(xm) {
font-size: calc-rem(36);
line-height: calc-rem(44);
top: calc-rem(70);
}
span {
display: inline-block;
width: calc-rem(93);
height: calc-rem(10);
border-radius: calc-rem(5);
margin: calc-rem(40) calc-rem(42);
background-color: $orange;
@include media-breakpoint-down(md) {
margin: calc-rem(25) calc-rem(22);
}
@include media-breakpoint-down(xm) {
width: calc-rem(30);
height: calc-rem(5);
margin: calc-rem(10) calc-rem(22);
}
}
}
.list-card {
display: flex;
.card {
position: relative;
overflow: hidden;
width: calc-rem(560);
height: calc-rem(560);
border-radius: calc-rem(40);
flex-shrink: 0;
margin-right: calc-rem(180);
@include media-breakpoint-down(md) {
width: calc-rem(350);
height: calc-rem(350);
margin-right: calc-rem(70);
}
@include media-breakpoint-down(xm) {
width: calc-rem(200);
height: calc-rem(200);
margin-right: calc-rem(60);
}
&:last-child {
margin-right: 0;
}
img {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
transform: translate(-50%, -50%);
height: calc-rem(560);
object-fit: cover;
@include media-breakpoint-down(xm) {
height: calc-rem(200);
}
}
.btn-img {
font-style: normal;
font-weight: bold;
font-size: calc-rem(48);
line-height: calc-rem(59);
color: $white;
position: absolute;
bottom: 0;
z-index: 2;
width: 100%;
background: rgba(0, 0, 0, 0.24);
padding: calc-rem(45) 0 calc-rem(58) 0;
text-align: center;
border-radius: calc-rem(40);
@include media-breakpoint-down(md) {
padding: calc-rem(32) 0;
font-size: calc-rem(30);
line-height: calc-rem(34);
}
@include media-breakpoint-down(xm) {
font-size: calc-rem(20);
line-height: calc-rem(24);
}
}
}
}
}
}
}
.info-omoss {
padding-top: calc-rem(200);
overflow: hidden;
@include media-breakpoint-down(md) {
padding-top: calc-rem(140);
}
@include media-breakpoint-down(xm) {
padding-top: 0;
}
&.bg {
@include media-breakpoint-down(xm) {
padding-top: calc-rem(140);
}
}
&.pd-0 {
padding: 0;
}
.image.web-design {
display: flex;
align-items: center;
.info-omoss__content-img {
&:after {
@include media-breakpoint-down(lg) {
display: none;
}
}
}
}
&.web-design {
position: relative;
@include media-breakpoint-down(xm) {
padding-top: calc-rem(52);
}
> .container {
position: relative;
&:before,
&:after {
position: absolute;
z-index: 2;
touch-action: none;
font-family: Montserrat, sans-serif;
font-style: normal;
font-weight: 100;
font-size: calc-rem(140);
line-height: calc-rem(171);
color: rgba(246, 146, 30, 0.6);
transform: rotate(-15.71deg);
@include media-breakpoint-down(xxl) {
font-size: calc-rem(100);
}
@include media-breakpoint-down(xl) {
font-size: calc-rem(100);
}
@include media-breakpoint-down(lg) {
display: none;
}
}
&:before {
content: "Web";
top: calc-rem(-60);
left: calc-rem(100);
@include media-breakpoint-down(xxl) {
top: calc-rem(-100);
left: calc-rem(68);
}
/*@include media-breakpoint-down(xl) {
top: calc-rem(108);
left: calc-rem(96);
}*/
}
&:after {
content: "Design";
bottom: 110px;
left: 50%;
margin-left: -110px;
@include media-breakpoint-down(xxl) {
bottom: 60px;
}
@include media-breakpoint-down(xl) {
/*bottom: calc-rem(66);
right: calc-rem(200);*/
}
}
}
.title-h3 {
@include media-breakpoint-down(xm) {
margin-top: 0;
}
}
}
&.ui-ux {
position: relative;
&:before,
&:after {
position: absolute;
z-index: 2;
touch-action: none;
font-family: Montserrat, sans-serif;
font-style: normal;
font-weight: 100;
font-size: calc-rem(140);
line-height: calc-rem(171);
color: rgba(246, 146, 30, 0.6);
transform: rotate(-15.71deg);
@include media-breakpoint-down(xl) {
font-size: calc-rem(120);
}
@include media-breakpoint-down(lg) {
display: none;
}
}
&:before {
content: "UI";
top: calc-rem(220);
left: calc-rem(440);
@include media-breakpoint-down(xxl) {
top: calc-rem(238);
left: calc-rem(237);
}
@include media-breakpoint-down(xl) {
top: calc-rem(232);
left: calc-rem(174);
}
}
&:after {
content: "UX";
bottom: calc-rem(51);
right: calc-rem(745);
@include media-breakpoint-down(xxl) {
bottom: calc-rem(51);
right: calc-rem(745);
}
@include media-breakpoint-down(xl) {
right: calc-rem(480);
}
}
}
&.pagespeed {
position: relative;
&:before,
&:after {
position: absolute;
z-index: 2;
touch-action: none;
font-family: Montserrat, sans-serif;
font-style: normal;
font-weight: 100;
font-size: calc-rem(140);
line-height: calc-rem(171);
color: rgba(246, 146, 30, 0.6);
transform: rotate(-15.71deg);
@include media-breakpoint-down(xl) {
font-size: calc-rem(120);
}
@include media-breakpoint-down(lg) {
display: none;
}
}
&:before {
content: "Page";
top: calc-rem(62);
left: calc-rem(174);
@include media-breakpoint-down(xxl) {
left: calc-rem(0);
}
@include media-breakpoint-down(xl) {
top: calc-rem(35);
left: calc-rem(35);
}
}
&:after {
content: "Speed";
bottom: calc-rem(66);
right: calc-rem(600);
@include media-breakpoint-down(xxl) {
bottom: calc-rem(161);
right: calc-rem(157);
}
@include media-breakpoint-down(xl) {
bottom: calc-rem(79);
right: calc-rem(50);
}
}
}
&.sociala {
position: relative;
&:before,
&:after {
position: absolute;
z-index: 2;
touch-action: none;
font-family: Montserrat, sans-serif;
font-style: normal;
font-weight: 100;
font-size: calc-rem(140);
line-height: calc-rem(171);
color: rgba(246, 146, 30, 0.6);
transform: rotate(-15.71deg);
@include media-breakpoint-down(xl) {
font-size: calc-rem(120);
}
@include media-breakpoint-down(lg) {
font-size: calc-rem(100);
}
@include media-breakpoint-down(md) {
font-size: calc-rem(80);
}
@include media-breakpoint-down(sm) {
font-size: calc-rem(65);
}
@include media-breakpoint-down(xm) {
font-size: calc-rem(50);
}
}
&:before {
content: "Sociala";
top: calc-rem(62);
left: calc-rem(174);
@include media-breakpoint-down(xxl) {
left: calc-rem(0);
}
@include media-breakpoint-down(xl) {
top: calc-rem(35);
left: calc-rem(35);
}
@include media-breakpoint-down(lg) {
top: calc-rem(263);
left: calc-rem(37);
}
@include media-breakpoint-down(md) {
top: calc-rem(173);
left: calc-rem(67);
}
@include media-breakpoint-down(sm) {
top: calc-rem(185);
left: calc-rem(29);
}
@include media-breakpoint-down(xm) {
top: calc-rem(81);
left: calc-rem(16);
}
}
&:after {
content: "Medier";
bottom: calc-rem(66);
right: calc-rem(600);
@include media-breakpoint-down(xxl) {
bottom: calc-rem(161);
right: calc-rem(157);
}
@include media-breakpoint-down(xl) {
bottom: calc-rem(79);
right: calc-rem(50);
}
@include media-breakpoint-down(lg) {
bottom: calc(100% - 640px);
right: calc-rem(98);
}
@include media-breakpoint-down(md) {
bottom: calc(100% - 577px);
}
@include media-breakpoint-down(sm) {
bottom: calc(100% - 591px);
right: calc-rem(71);
}
@include media-breakpoint-down(xm) {
bottom: calc(100% - 431px);
right: calc-rem(20);
}
}
}
&.sem {
position: relative;
&:before,
&:after {
content: '';
position: absolute;
z-index: 20;
touch-action: none;
width: calc-rem(312);
height: calc-rem(171);
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAyIiBoZWlnaHQ9IjE3MyIgdmlld0JveD0iMCAwIDMwMiAxNzMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTYwLjEwODggMTYzLjQ4N0M1My4yODA2IDE2NS40MDggNDYuNTE1NCAxNjYuMDAzIDM5LjgxMzMgMTY1LjI3MUMzMy4wODU4IDE2NC40NDkgMjcuNTQ4OCAxNjIuNTE2IDIzLjIwMjEgMTU5LjQ3M0wyNC41OTU5IDE1Ny4xOUMyOC42NjE4IDE1OS45MjQgMzMuODY2MSAxNjEuNzA4IDQwLjIwODkgMTYyLjU0MUM0Ni41MjYzIDE2My4yODUgNTIuODc0NiAxNjIuNzU5IDU5LjI1MzUgMTYwLjk2NEM2OS4wNDY2IDE1OC4yMDkgNzUuODcwNCAxNTQuMjA0IDc5LjcyNDggMTQ4Ljk1MUM4My42NDM4IDE0My41ODIgODQuNzMxMiAxMzcuNzk4IDgyLjk4NyAxMzEuNTk4QzgxLjYyMTkgMTI2Ljc0NyA3OS4yMzIxIDEyMy4yNSA3NS44MTc3IDEyMS4xMDhDNzIuNDAzMyAxMTguOTY2IDY4LjU2MjIgMTE3LjcyIDY0LjI5NDQgMTE3LjM2OUM2MC4xMTY0IDExNi45OTQgNTQuNTc4MiAxMTYuOTUyIDQ3LjY3OTYgMTE3LjI0NUM0MC4yODEzIDExNy40ODQgMzQuMzQ1NyAxMTcuNDA5IDI5Ljg3MjkgMTE3LjAxOUMyNS4zNzQ5IDExNi41NCAyMS4yMzMzIDExNS4wODcgMTcuNDQ4MyAxMTIuNjYyQzEzLjcyNzggMTEwLjEyMSAxMS4wOTY1IDEwNi4xMTEgOS41NTQ0NSAxMDAuNjNDOC4zNDEwNSA5Ni4zMTc1IDguMzUxODIgOTIuMDQ4MyA5LjU4Njc3IDg3LjgyMjZDMTAuODIxNyA4My41OTY4IDEzLjUxNjcgNzkuNzM1OSAxNy42NzE4IDc2LjIzOThDMjEuODI2OSA3Mi43NDM3IDI3LjQwODQgNzAuMDA5OCAzNC40MTYyIDY4LjAzOEMzOS40NDc1IDY2LjYyMjQgNDQuNjE2NSA2Ni4wNDA2IDQ5LjkyMzIgNjYuMjkyOEM1NS4yMDQ1IDY2LjQ1NTEgNTkuOTYzNyA2Ny4zNDYgNjQuMjAwOCA2OC45NjU2TDYzLjMyNSA3MS41MzlDNTguODgzIDY5Ljg4MDEgNTQuMTgxNCA2OS4wMjE0IDQ5LjIyMDEgNjguOTYzQzQ0LjMyMzQgNjguNzg5NCAzOS42NzM5IDY5LjMyMiAzNS4yNzE1IDcwLjU2MDdDMjUuODM3OCA3My4yMTUgMTkuMjE5IDc3LjI1ODggMTUuNDE1MSA4Mi42OTIyQzExLjU4NTkgODguMDM1NyAxMC41NDM0IDkzLjgwNzEgMTIuMjg3NyAxMDAuMDA2QzEzLjY1MjggMTA0Ljg1OCAxNi4wNTUyIDEwOC40IDE5LjQ5NDkgMTEwLjYzMkMyMi45MDkzIDExMi43NzMgMjYuNzUwNCAxMTQuMDIgMzEuMDE4MiAxMTQuMzdDMzUuMjg2IDExNC43MjEgNDAuOTI2NyAxMTQuNzgyIDQ3Ljk0MDQgMTE0LjU1NEM1NS4yNDg5IDExNC4zNCA2MS4xNTIyIDExNC40NzIgNjUuNjUwMyAxMTQuOTUyQzcwLjEyMyAxMTUuMzQyIDc0LjIwNyAxMTYuNzYyIDc3LjkwMjIgMTE5LjIxM0M4MS41NzIyIDEyMS41NzQgODQuMTY1NiAxMjUuNDQ5IDg1LjY4MjMgMTMwLjg0Qzg2Ljg5NTcgMTM1LjE1MyA4Ni44NCAxMzkuNDM0IDg1LjUxNTIgMTQzLjY4NkM4NC4xOTA0IDE0Ny45MzcgODEuNDA1NiAxNTEuODIzIDc3LjE2MDYgMTU1LjM0NEM3Mi45ODAzIDE1OC43NSA2Ny4yOTYzIDE2MS40NjUgNjAuMTA4OCAxNjMuNDg3Wk0xNzkuOTcgMTI2LjU2M0wxODAuNjkxIDEyOS4xMjNMMTE3Ljg4OSAxNDYuNzkzTDkxLjM0NTkgNTIuNDU2M0wxNTIuMTI2IDM1LjM1NDlMMTUyLjg0NiAzNy45MTU1TDk0Ljc2MTcgNTQuMjU4NUwxMDYuNzQ0IDk2Ljg0NDlMMTU4Ljc2NCA4Mi4yMDgzTDE1OS40ODUgODQuNzY4OEwxMDcuNDY0IDk5LjQwNTVMMTE5Ljg2NCAxNDMuNDc0TDE3OS45NyAxMjYuNTYzWk0yNzQuMzU1IDAuOTYzNzk2TDMwMC44OTkgOTUuMzAwOEwyOTguMjAzIDk2LjA1OTFMMjczLjI5MSA3LjUxNzE2TDI1MS40NTkgOTQuODEzM0wyNDkuODQxIDk1LjI2ODNMMTg1Ljc2OCAzMi40MzM5TDIxMC42MDUgMTIwLjcwNkwyMDcuOTA5IDEyMS40NjVMMTgxLjM2NiAyNy4xMjc4TDE4My42NTcgMjYuNDgzMUwyNDkuNjI2IDkxLjQwMjFMMjcyLjA2NCAxLjYwODQxTDI3NC4zNTUgMC45NjM3OTZaIiBmaWxsPSIjRjY5MjFFIiBmaWxsLW9wYWNpdHk9IjAuNSIvPjwvc3ZnPg==) center center no-repeat;
}
&:before {
transform: rotate(-15.71deg);
top: calc-rem(190);
left: calc-rem(235);
@include media-breakpoint-down(xxl) {
top: calc-rem(165);
left: calc-rem(15);
}
@include media-breakpoint-down(lg) {
display: none;
}
}
&:after {
transform: rotate(28deg);
bottom: calc-rem(160);
right: calc-rem(256);
@include media-breakpoint-down(xxl) {
top: calc-rem(469);
right: calc-rem(178);
}
@include media-breakpoint-down(xl) {
top: calc-rem(400);
right: calc-rem(143);
}
@include media-breakpoint-down(lg) {
top: auto;
bottom: calc-rem(110);
right: calc(50% - 190px);
width: calc-rem(112);
height: calc-rem(61);
background-size: cover;
}
@include media-breakpoint-down(sm) {
bottom: calc-rem(50);
}
@include media-breakpoint-down(xm) {
right: calc(50% - 165px);
}
}
}
&__content {
margin: 0 auto;
padding-bottom: calc-rem(200);
@include media-breakpoint-down(lg) {
padding-bottom: calc-rem(60);
}
@include media-breakpoint-down(md) {
padding-bottom: calc-rem(50);
}
@include media-breakpoint-down(xm) {
padding-bottom: calc-rem(36);
}
.row {
@include media-breakpoint-down(lg) {
flex-direction: column-reverse;
}
.image {
@include media-breakpoint-down(lg) {
order: unset;
}
}
}
.col-md-7 {
display: flex;
flex-direction: column;
justify-content: center;
@include media-breakpoint-down(lg) {
order: 1;
}
.description {
color: $gray;
text-align: left;
max-width: calc-rem(690);
position: relative;
.title-h3 {
text-align: left;
margin-bottom: calc-rem(40);
}
.mob-hide {
@include media-breakpoint-down(lg) {
display: none;
}
}
p {
text-align: left;
}
span {
color: $orange;
}
&.arrow {
&.mob {
&:after {
@include media-breakpoint-down(xm) {
transform: scale(-1, 1);
left: calc-rem(-2);
top: calc(100% + 50px);
}
}
}
}
}
@include media-breakpoint-down(lg) {
width: 100%;
}
}
&-img {
position: relative;
width: 100%;
clip-path: url(#omoss-info);
@include media-breakpoint-down(lg) {
display: flex;
justify-content: center;
margin-top: calc-rem(40);
z-index: 10;
}
@include media-breakpoint-down(xm) {
margin-top: 0;
}
&:after {
content: "";
width: calc-rem(250);
height: calc-rem(360);
position: absolute;
bottom: calc-rem(-10);
left: calc-rem(-185);
z-index: -1;
touch-action: none;
display: block;
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQ4IiBoZWlnaHQ9IjM2MSIgdmlld0JveD0iMCAwIDI0OCAzNjEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE2NS45NjkgMUMxNjUuOTY5IDI1LjU1NTYgMTY1Ljk2OSA1MC4xMTExIDE2NS45NjkgNzQuNjY2N0MxNjUuOTY5IDEwMy42NTggMTY4Ljc2OSAxMzQuMDkzIDE2My45MjMgMTYyLjc2NUMxNTYuNjc2IDIwNS42NDIgMTQwLjEwOCAyMzguODc3IDk2LjE3OTUgMjUxLjA3OUM1OC4zOTk1IDI2MS41NzMgMTMuNDA3OCAyNTguNDA5IDIuMjY1MjggMjE1LjQzQy02LjQxMjY3IDE4MS45NTggMzEuNDQ4MiAxNTUuMDY2IDU3LjgzODQgMTQyLjk0OEM4Ny42MzIgMTI5LjI2OCAxMjEuNjM3IDEyMy4zMzMgMTU0LjIzIDEyOC4wODZDMTkzLjE5OSAxMzMuNzY5IDIyMy43NiAxNjMuODY3IDI0MC4yODIgMTk4LjA5MUMyNDcuOTMxIDIxMy45MzYgMjQ3LjM5IDIzNC43MzkgMjQ3LjM5IDI1MS45NDFDMjQ3LjM5IDI3NC44NTcgMjM3LjI3NCAyOTMuMzI1IDIyNC44ODEgMzEyLjE0NUMyMTUuNzM5IDMyNi4wMjcgMjAzLjA5NCAzMzguMDI1IDE5MS4zODYgMzQ5LjczMkMxODguMzk3IDM1Mi43MjEgMTg0Ljk1MSAzNTcuOTA0IDE4MS40NzggMzU5LjY0IiBzdHJva2U9IiNGNjkyMUUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxwYXRoIGQ9Ik0xODEuMTMzIDM0Ny4zNTJDMTgxLjEzMyAzNTEuNjMgMTgwLjg4MiAzNTUuOTkgMTgxLjEzMyAzNjAuMjYxQzE4MS4xNTYgMzYwLjY1NyAxODQuMjIyIDM1OS4yMDQgMTg0LjU3OCAzNTkuMTAxQzE5MC42NDEgMzU3LjM1NSAxOTYuODgzIDM1Ni4wODQgMjAzIDM1NC41MzIiIHN0cm9rZT0iI0Y2OTIxRSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+) center center no-repeat;
@include media-breakpoint-down(xl) {
bottom: calc-rem(-150);
}
@include media-breakpoint-down(lg) {
width: calc-rem(75);
height: calc-rem(110);
left: calc(50% - 12rem);
bottom: 0;
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEyIiBoZWlnaHQ9IjEyNSIgdmlld0JveD0iMCAwIDExMiAxMjUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIwLjY1ODMgMjIuNTQwOEMyNC4wMDIzIDI4Ljc0OTggMjcuMzQ2NCAzNC45NTg3IDMwLjY5MDUgNDEuMTY3N0MzNC42Mzg2IDQ4LjQ5ODQgMzguMDczIDU2LjU3NjUgNDMuMjA3MSA2My4xNjQyQzUwLjg4NDggNzMuMDE1OCA1OS42MTM5IDc5LjE1NTUgNzIuNDIwMiA3Ni4yMzg2QzgzLjQzNCA3My43MzAxIDk0LjQxNzIgNjYuNzgyNCA5MS4zOTExIDU0LjM5MjZDODkuMDM0MyA0NC43NDMzIDc1Ljc2NjkgNDMuMTE2NyA2Ny40MjE2IDQzLjY1ODVDNTggNDQuMjcwMiA0OC41NjQ4IDQ3LjQxNTggNDAuOTQzNSA1My4wNzFDMzEuODMxMSA1OS44MzI2IDI4LjE3NjcgNzEuNjE5IDI4LjY0NTkgODIuNTI5OUMyOC44NjMxIDg3LjU4MTYgMzEuODMzNSA5Mi43Njc5IDM0LjE3NiA5Ny4xMTc0QzM3LjI5NjggMTAyLjkxMiA0Mi4zNzgyIDEwNi4xOTkgNDguMDg1MyAxMDkuMjY1QzUyLjI5NSAxMTEuNTI2IDU3LjEzNyAxMTIuODMyIDYxLjcwMTUgMTE0LjE5MkM2Mi44NjY4IDExNC41NCA2NC40NDY5IDExNS4zNzkgNjUuNTY0NiAxMTUuMzQ0IiBzdHJva2U9IiNGNjkyMUUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxwYXRoIGQ9Ik02My42NDUzIDExMS44MzRDNjQuMjcwNiAxMTIuOTk1IDY0Ljk2ODIgMTE0LjE0NiA2NS41MzIxIDExNS4zMzdDNjUuNTg0NCAxMTUuNDQ4IDY0LjYzNTIgMTE1LjQ1IDY0LjUzNDUgMTE1LjQ2OUM2Mi44MjIxIDExNS43OCA2MS4xMzYxIDExNi4yNDMgNTkuNDM5IDExNi42MTMiIHN0cm9rZT0iI0Y2OTIxRSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+) center center no-repeat;
}
@include media-breakpoint-down(sm) {
left: calc-rem(25);
}
@include media-breakpoint-down(xm) {
left: calc-rem(20);
}
}
img {
width: 100%;
object-fit: contain;
height: calc-rem(609);
@include media-breakpoint-down(xxl) {
height: calc-rem(396);
}
@include media-breakpoint-down(xl) {
height: calc-rem(323);
}
@include media-breakpoint-down(lg) {
width: calc-rem(295);
height: calc-rem(325);
}
@include media-breakpoint-down(xm) {
width: calc-rem(182);
height: calc-rem(200);
}
}
}
.col-md-5 {
&.image {
&.web-design {
position: relative;
@include media-breakpoint-down(lg) {
order: 6;
margin-bottom: calc-rem(80);
}
&:before,
&:after {
display: none;
position: absolute;
z-index: 2;
touch-action: none;
font-family: Montserrat, sans-serif;
font-style: normal;
font-weight: 100;
font-size: calc-rem(140);
line-height: calc-rem(171);
color: rgba(246, 146, 30, 0.6);
transform: rotate(-15.71deg);
@include media-breakpoint-down(lg) {
font-size: calc-rem(100);
display: block;
}
@include media-breakpoint-down(md) {
font-size: calc-rem(80);
}
@include media-breakpoint-down(sm) {
font-size: calc-rem(65);
}
@include media-breakpoint-down(xm) {
font-size: calc-rem(50);
}
}
&:before {
content: "Web";
@include media-breakpoint-down(lg) {
top: 0;
left: calc(50% - 219px);
}
@include media-breakpoint-down(md) {
left: calc(50% - 203px);
}
@include media-breakpoint-down(sm) {
left: calc(50% - 187px);
}
@include media-breakpoint-down(xm) {
top: calc-rem(-22);
left: calc(50% - 127px);
}
}
&:after {
content: "Design";
@include media-breakpoint-down(lg) {
bottom: calc-rem(-74);
right: calc(50% - 200px);
}
@include media-breakpoint-down(md) {
bottom: calc-rem(-67);
right: calc(50% - 177px);
}
@include media-breakpoint-down(sm) {
bottom: calc-rem(-65);
right: calc(50% - 163px);
}
@include media-breakpoint-down(xm) {
bottom: calc-rem(-75);
right: calc(50% - 121px);
}
}
}
&.ui-ux {
position: relative;
&:before,
&:after {
display: none;
position: absolute;
z-index: 2;
touch-action: none;
font-family: Montserrat, sans-serif;
font-style: normal;
font-weight: 100;
font-size: calc-rem(140);
line-height: calc-rem(171);
color: rgba(246, 146, 30, 0.6);
transform: rotate(-15.71deg);
@include media-breakpoint-down(lg) {
font-size: calc-rem(100);
display: block;
}
@include media-breakpoint-down(md) {
font-size: calc-rem(80);
}
@include media-breakpoint-down(sm) {
font-size: calc-rem(65);
}
@include media-breakpoint-down(xm) {
font-size: calc-rem(50);
}
}
&:before {
content: "UI";
@include media-breakpoint-down(lg) {
top: 0;
left: calc(50% - 219px);
}
@include media-breakpoint-down(md) {
left: calc(50% - 203px);
}
@include media-breakpoint-down(sm) {
left: calc(50% - 187px);
}
@include media-breakpoint-down(xm) {
top: calc-rem(-22);
left: calc(50% - 127px);
}
}
&:after {
content: "UX";
@include media-breakpoint-down(lg) {
bottom: calc-rem(-74);
right: calc(50% - 200px);
}
@include media-breakpoint-down(md) {
bottom: calc-rem(-67);
right: calc(50% - 177px);
}
@include media-breakpoint-down(sm) {
bottom: calc-rem(-65);
right: calc(50% - 163px);
}
@include media-breakpoint-down(xm) {
bottom: calc-rem(-75);
right: calc(50% - 121px);
}
}
}
&.pagespeed {
position: relative;
&:before,
&:after {
display: none;
position: absolute;
z-index: 2;
touch-action: none;
font-family: Montserrat, sans-serif;
font-style: normal;
font-weight: 100;
font-size: calc-rem(140);
line-height: calc-rem(171);
color: rgba(246, 146, 30, 0.6);
transform: rotate(-15.71deg);
@include media-breakpoint-down(lg) {
font-size: calc-rem(100);
display: block;
}
@include media-breakpoint-down(md) {
font-size: calc-rem(80);
}
@include media-breakpoint-down(sm) {
font-size: calc-rem(65);
}
@include media-breakpoint-down(xm) {
font-size: calc-rem(50);
}
}
&:before {
content: "Page";
top: calc-rem(62);
left: calc-rem(174);
@include media-breakpoint-down(lg) {
top: calc-rem(-59);
left: calc-rem(21);
}
}
&:after {
content: "Speed";
bottom: calc-rem(66);
right: calc-rem(600);
@include media-breakpoint-down(lg) {
bottom: calc-rem(-51);
right: calc-rem(17);
}
}
}
&.bf-so {
position: relative;
&:before,
&:after {
content: "SEO";
position: absolute;
z-index: 2;
touch-action: none;
font-family: Montserrat, sans-serif;
font-style: normal;
font-weight: 100;
font-size: calc-rem(140);
line-height: calc-rem(171);
color: rgba(246, 146, 30, 0.6);
@include media-breakpoint-down(xl) {
font-size: calc-rem(120);
}
@include media-breakpoint-down(lg) {
font-size: calc-rem(100);
}
@include media-breakpoint-down(md) {
font-size: calc-rem(80);
}
@include media-breakpoint-down(sm) {
font-size: calc-rem(65);
}
@include media-breakpoint-down(xm) {
font-size: calc-rem(50);
}
}
&:before {
transform: rotate(-5.91deg);
top: calc-rem(100);
left: calc-rem(-800);
@include media-breakpoint-down(xxl) {
top: calc-rem(30);
left: calc-rem(-642);
}
@include media-breakpoint-down(xl) {
top: calc-rem(9);
left: calc-rem(-545);
}
@include media-breakpoint-down(lg) {
top: calc-rem(9);
left: calc-rem(140);
}
@include media-breakpoint-down(md) {
top: calc-rem(31);
left: calc-rem(98);
}
@include media-breakpoint-down(md) {
top: calc-rem(7);
left: calc-rem(60);
}
@include media-breakpoint-down(sm) {
top: calc-rem(10);
left: calc-rem(80);
}
@include media-breakpoint-down(xm) {
top: calc-rem(-11);
left: calc-rem(45);
}
}
&:after {
transform: rotate(15deg);
top: calc-rem(780);
left: calc-rem(300);
@include media-breakpoint-down(xxl) {
top: calc-rem(800);
left: 0;
}
@include media-breakpoint-down(xl) {
top: calc-rem(1140);
left: 0;
}
@include media-breakpoint-down(lg) {
top: calc-rem(815);
left: calc-rem(497);
}
@include media-breakpoint-down(md) {
top: calc-rem(690);
left: calc-rem(360);
}
@include media-breakpoint-down(sm) {
top: calc-rem(700);
left: calc-rem(53);
}
@include media-breakpoint-down(xm) {
top: calc-rem(733);
left: calc-rem(215);
}
}
}
&.bf-r {
position: relative;
&:after {
content: "";
background-repeat: no-repeat !important;
position: absolute;
z-index: 0;
touch-action: none;
width: calc-rem(572);
height: calc-rem(577);
background: url('img/circle.png');
top: calc-rem(100);
right: calc-rem(1178);
@include media-breakpoint-down(xxl) {
background-size: calc-rem(230);
width: calc-rem(233);
height: calc-rem(232);
right: calc-rem(1025);
}
@include media-breakpoint-down(xl) {
top: calc-rem(392);
right: calc-rem(837);
}
@include media-breakpoint-down(xl) {
display: none;
}
}
}
&.bf-so-r {
position: relative;
&:before {
content: "SEO";
position: absolute;
z-index: 2;
touch-action: none;
font-family: Montserrat, sans-serif;
font-style: normal;
font-weight: 100;
font-size: calc-rem(140);
line-height: calc-rem(171);
color: rgba(246, 146, 30, 0.6);
transform: rotate(-5.91deg);
top: calc-rem(305);
left: calc-rem(-175);
@include media-breakpoint-down(xxl) {
font-size: calc-rem(120);
top: calc-rem(216);
left: calc-rem(-138);
}
@include media-breakpoint-down(xl) {
font-size: calc-rem(100);
top: calc-rem(154);
left: calc-rem(-133);
}
@include media-breakpoint-down(lg) {
top: calc-rem(-10);
left: calc-rem(126);
}
@include media-breakpoint-down(md) {
font-size: calc-rem(80);
}
@include media-breakpoint-down(sm) {
font-size: calc-rem(65);
left: calc-rem(76);
}
@include media-breakpoint-down(xm) {
font-size: calc-rem(50);
top: calc-rem(-28);
left: calc-rem(46);
}
}
}
&.arrow {
position: relative;
@include media-breakpoint-down(md) {
overflow: hidden;
}
&:before {
content: "";
background-repeat: no-repeat !important;
position: absolute;
z-index: 2;
touch-action: none;
background: url('img/curve.png');
width: calc-rem(160);
height: calc-rem(208);
top: calc-rem(-74);
left: calc-rem(9);
@include media-breakpoint-down(xxl) {
background-size: calc-rem(140);
}
@include media-breakpoint-down(xl) {
background-size: calc-rem(130);
top: calc-rem(-80);
left: calc-rem(1);
}
@include media-breakpoint-down(lg) {
top: calc-rem(-23);
left: 60%;
}
@include media-breakpoint-down(md) {
top: calc-rem(-8);
left: 61.2%;
}
@include media-breakpoint-down(sm) {
left: 67%;
}
@include media-breakpoint-down(xm) {
background-size: calc-rem(100);
}
}
}
}
&.ord {
@include media-breakpoint-down(lg) {
order: 1;
margin-bottom: calc-rem(40);
}
}
@include media-breakpoint-down(lg) {
width: 100%;
margin-bottom: calc-rem(50);
order: -1;
}
@include media-breakpoint-down(md) {
margin-bottom: 0;
}
}
.tabs-ul {
display: flex;
list-style-type: none;
padding: calc-rem(90) 0 calc-rem(123) 0;
@include media-breakpoint-down(lg) {
display: none;
}
li {
margin-right: calc-rem(164);
a {
font-family: Montserrat, sans-serif;
font-style: normal;
font-weight: bold;
font-size: calc-rem(30);
line-height: 120%;
color: $gray-2;
transition: all 0.4s ease-in-out;
}
&:hover,
&.ui-tabs-active {
a {
color: $white;
border-bottom: 2px solid $white;
}
}
&:last-child {
margin-right: 0;
}
}
}
}
.col-md-12 {
overflow: hidden;
}
#tabs {
@include media-breakpoint-down(lg) {
margin-top: calc-rem(90);
}
@include media-breakpoint-down(xm) {
margin-top: 0;
}
.btn {
margin-top: calc-rem(40);
@include media-breakpoint-down(md) {
margin: calc-rem(40) auto 0 auto;
}
}
.tab {
@include media-breakpoint-down(lg) {
margin-bottom: calc-rem(100);
&:first-child {
margin-bottom: 0;
}
}
@include media-breakpoint-down(xm) {
margin-bottom: 0;
}
.description {
.title-h3 {
display: none;
}
}
}
}
.mob-title {
order: 10;
text-align: left;
@include media-breakpoint-down(lg) {
display: block;
}
h3 {
text-align: left;
margin: calc-rem(28) 0 calc-rem(40) 0;
}
span {
display: inline-block;
text-align: left;
margin-bottom: calc-rem(40);
}
.description {
text-align: left;
color: $white;
margin-bottom: calc-rem(40);
}
}
.sub-description {
.description {
position: relative;
z-index: 4;
text-align: left;
color: $gray;
p {
margin-top: calc-rem(100);
@include media-breakpoint-down(lg) {
margin-top: calc-rem(60);
}
@include media-breakpoint-down(xm) {
margin-top: calc-rem(40);
}
&:last-of-type {
margin-bottom: 0;
}
}
span {
color: $orange;
}
&.text-left {
p {
text-align: left;
}
}
}
}
}
.omoss-page {
.info-omoss__content {
.row {
@include media-breakpoint-down(lg) {
flex-direction: column;
}
}
.col-md-7 {
@include media-breakpoint-down(lg) {
position: relative;
z-index: 1;
}
&:after {
position: absolute;
content: '';
display: block;
right: calc-rem(15);
bottom: calc-rem(-25);
width: calc-rem(80);
height: calc-rem(110);
z-index: 1;
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODYiIGhlaWdodD0iMTEzIiB2aWV3Qm94PSIwIDAgODYgMTEzIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik02Mi41MzM4IDcuMTcyNjVDNjEuNDY5NyAxNC4xNDQyIDYwLjQwNTYgMjEuMTE1NyA1OS4zNDE0IDI4LjA4NzJDNTguMDg1MSAzNi4zMTgxIDU3LjU2MzcgNDUuMDgwNSA1NC45NDA4IDUzLjAxQzUxLjAxODUgNjQuODY4MSA0NC44NTkgNzMuNTgzMiAzMS44MTcgNzUuMTM3NkMyMC42MDA1IDc2LjQ3NDQgNy45MjE2OCA3My42MTk4IDYuNjEwMTUgNjAuOTMzNEM1LjU4ODcyIDUxLjA1MzEgMTcuNTM4OCA0NS4wNjQ0IDI1LjU4MTIgNDIuNzcxNUMzNC42NjA5IDQwLjE4MjggNDQuNjA0NSAzOS45NzYzIDUzLjY4MjYgNDIuNzQyOUM2NC41MzY3IDQ2LjA1MDYgNzEuOTM3OSA1NS45MjQ3IDc1LjE2MTEgNjYuMzU5MkM3Ni42NTM0IDcxLjE5MDMgNzUuNTk3NyA3Ny4wNzMxIDc0Ljg1MjMgODEuOTU2N0M3My44NTkyIDg4LjQ2MjggNzAuMTc3NSA5My4yNjYyIDY1LjgzMTYgOTguMDcwNEM2Mi42MjYgMTAxLjYxNCA1OC41MDQgMTA0LjQ3MSA1NC42NjE3IDEwNy4yODVDNTMuNjgwOCAxMDguMDA0IDUyLjQ3NDYgMTA5LjMyNiA1MS40MDk5IDEwOS42NjgiIHN0cm9rZT0iI0Y2OTIxRSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTUyLjAzODkgMTA1LjcxN0M1MS44NCAxMDcuMDIxIDUxLjU2OTQgMTA4LjMzOSA1MS40Mzg1IDEwOS42NTFDNTEuNDI2NCAxMDkuNzcyIDUyLjMyMTMgMTA5LjQ1NiA1Mi40MjIyIDEwOS40MzlDNTQuMTM5NiAxMDkuMTU3IDU1Ljg4MzIgMTA5LjAyNyA1Ny42MDYyIDEwOC44MDYiIHN0cm9rZT0iI0Y2OTIxRSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+) center center no-repeat;
}
}
}
.info-omoss__content-img {
@include media-breakpoint-down(lg) {
margin-bottom: calc-rem(20);
margin-top: 0;
}
&:after {
@include media-breakpoint-down(lg) {
display: none;
}
}
}
}
.descript {
position: relative;
overflow: hidden;
padding: calc-rem(230) 0 calc-rem(360) 0;
&.v2 {
padding-bottom: calc-rem(122);
}
@include media-breakpoint-down(lg) {
padding: calc-rem(90) 0 calc-rem(110) 0;
}
@include media-breakpoint-down(xm) {
padding: calc-rem(44) 0 calc-rem(45) 0;
}
&__content {
margin: 0 auto;
padding: 0 calc-rem(60);
@include media-breakpoint-down(xxl) {
padding: 0;
}
@include media-breakpoint-down(md) {
padding: 0 calc-rem(20);
}
&.px-0 {
padding: 0;
@include media-breakpoint-down(lg) {
padding: 0 20px !important;
width: 83.33333%;
}
@include media-breakpoint-down(sm) {
padding: 0 0 !important;
width: 100%;
}
.description {
@include media-breakpoint-down(md) {
padding: 0 calc-rem(15);
}
@include media-breakpoint-down(xm) {
padding: 0;
}
}
}
.description {
position: relative;
z-index: 2;
@include media-breakpoint-down(xm) {
padding: 0 calc-rem(15);
}
h3 {
text-align: left;
margin-bottom: calc-rem(40);
}
p {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
color: $white;
text-align: left;
margin-bottom: calc-rem(40);
@include media-breakpoint-down(md) {
margin-bottom: calc-rem(20);
}
&:last-of-type {
margin-bottom: 0;
}
}
}
&:before,
&:after {
content: "";
position: absolute;
z-index: 0;
touch-action: none;
background-repeat: no-repeat;
}
&:before {
width: calc-rem(610);
height: calc-rem(500);
background: url('img/trapeze.png');
top: calc-rem(-95);
left: calc-rem(-182);
@include media-breakpoint-down(xxl) {
background-size: calc-rem(400);
width: calc-rem(380);
height: calc-rem(315);
top: calc-rem(-52);
left: calc-rem(-120);
}
@include media-breakpoint-down(lg) {
width: calc-rem(305);
height: calc-rem(280);
transform: rotate(0deg);
top: auto;
bottom: calc-rem(426);
left: calc-rem(-49);
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgzIiBoZWlnaHQ9IjMwMiIgdmlld0JveD0iMCAwIDI4MyAzMDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwOS4wODkgNjAuMTA0OUwtNC41NTk3NSAxMzkuMDE1Qy0xOS4zMDQ5IDE0OS4yNTQgLTIyLjc0NTUgMTY5LjYxNiAtMTIuMTgyOCAxODQuMTNMMTcuNDY3NCAyMjQuODczQzI4Ljk1OTkgMjQwLjY2NSA1MS43OTU3IDI0Mi41NjcgNjUuNzQyOCAyMjguODk1TDE2Ny43NjYgMTI4Ljg3OEMxODAuMDkzIDExNi43OTMgMTgwLjYxMyA5Ny4xMDc2IDE2OC45MzkgODQuMzg5MUwxNTAuOTE1IDY0Ljc1MThDMTQwLjA5NiA1Mi45NjM4IDEyMi4yMzIgNTAuOTc5MiAxMDkuMDg5IDYwLjEwNDlaIiBzdHJva2U9IiNGNjkyMUUiLz48cGF0aCBkPSJNLTEuNTI3MjQgMjYzLjMwMkwxMzYuODI2IDI2NC41MDRDMTU0Ljc3NiAyNjQuNjYgMTY5LjM0MyAyNTAuMDIyIDE2OS4xMDEgMjMyLjA3M0wxNjguNDIgMTgxLjY4OEMxNjguMTU2IDE2Mi4xNTggMTUwLjYxMSAxNDcuNDE5IDEzMS4zMjkgMTUwLjUyOEwtOS43MTkyMSAxNzMuMjcxQy0yNi43NjI3IDE3Ni4wMTkgLTM4LjU1MzkgMTkxLjc5MSAtMzYuMzY3NSAyMDguOTE2TC0zMi45OTE3IDIzNS4zNTZDLTMwLjk2NTMgMjUxLjIyOCAtMTcuNTI3MSAyNjMuMTYzIC0xLjUyNzI0IDI2My4zMDJaIiBmaWxsPSIjRjY5MjFFIiBzdHJva2U9IiNGNjkyMUUiLz48L3N2Zz4=) center center no-repeat;
}
@include media-breakpoint-down(sm) {
bottom: calc-rem(20);
}
}
&:after {
width: calc-rem(572);
height: calc-rem(577);
background: url('img/circle.png');
top: calc-rem(97);
right: calc-rem(-175);
@include media-breakpoint-down(xxl) {
background-size: calc-rem(230);
width: calc-rem(233);
height: calc-rem(232);
right: calc-rem(-61);
}
@include media-breakpoint-down(lg) {
right: calc-rem(-50);
top: calc-rem(120);
width: calc-rem(135);
height: calc-rem(135);
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMxIiBoZWlnaHQ9IjEzNSIgdmlld0JveD0iMCAwIDEzMSAxMzUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBvcGFjaXR5PSIwLjciIGN4PSI2NS45OTY2IiBjeT0iNjkuOTg4MyIgcj0iNjQuMjExNSIgc3Ryb2tlPSIjRjY5MjFFIiBzdHJva2Utd2lkdGg9IjAuNyIvPjxjaXJjbGUgb3BhY2l0eT0iMC41IiBjeD0iNTIuNzE3NSIgY3k9IjUzLjI2NzMiIHI9IjUyLjQ2NzUiIHN0cm9rZT0iI0Y2OTIxRSIgc3Ryb2tlLXdpZHRoPSIwLjUiLz48L3N2Zz4=) center center no-repeat;
}
}
}
}
.teamet {
.list-team {
padding: calc-rem(110) 0 calc-rem(300) 0;
@include media-breakpoint-down(xm) {
padding: calc-rem(50) 0;
}
}
.title-h1 {
margin-top: calc-rem(170);
@include media-breakpoint-down(xm) {
padding: calc-rem(40) 0;
margin-top: 0;
}
}
&__content {
display: flex;
overflow-x: auto;
-ms-overflow-style: none;
scrollbar-width: none;
@include media-breakpoint-down(lg) {
width: 100%;
margin-bottom: cacl-rem(50);
}
&::-webkit-scrollbar {
width: 0;
height: 0;
}
&-img {
position: relative;
overflow: hidden;
clip-path: url(#teamet);
width: calc-rem(290);
height: calc-rem(320);
@include media-breakpoint-down(xm) {
width: calc-rem(158);
height: calc-rem(175);
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
object-fit: cover;
height: calc-rem(320);
@include media-breakpoint-down(xm) {
height: calc-rem(175);
}
}
}
.description {
text-align: center;
font-weight: 600;
color: $white;
margin: calc-rem(20) 0;
@include media-breakpoint-down(xm) {
font-weight: bold;
margin: calc-rem(10) 0;
font-size: calc-rem(20);
line-height: calc-rem(24);
}
}
span {
display: block;
text-align: center;
font-family: Montserrat, sans-serif;
font-style: normal;
font-weight: bold;
font-size: calc-rem(18);
line-height: calc-rem(22);
color: $orange;
margin-bottom: calc-rem(10);
@include media-breakpoint-down(xm) {
font-weight: 500;
}
}
.card {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
margin-right: calc-rem(100);
@include media-breakpoint-down(xm) {
width: calc-rem(200);
margin-right: calc-rem(60);
}
}
}
.block-btn {
display: flex;
justify-content: center;
align-items: center;
@include media-breakpoint-down(lg) {
order: 2;
width: 100%;
}
}
.btn-scroll {
width: calc-rem(172);
height: calc-rem(172);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid $orange;
font-family: "Montserrat", sans-serif;
font-weight: 400;
font-size: calc-rem(22);
color: $white;
i {
margin-left: calc-rem(4);
}
@include media-breakpoint-down(xxl) {
width: calc-rem(150);
height: calc-rem(150);
}
@include media-breakpoint-down(xl) {
width: calc-rem(120);
height: calc-rem(120);
}
@include media-breakpoint-down(lg) {
flex-direction: column;
margin-top: calc-rem(80);
width: calc-rem(150);
height: calc-rem(150);
}
@include media-breakpoint-down(md) {
width: calc-rem(120);
height: calc-rem(120);
}
@include media-breakpoint-down(xm) {
margin-top: calc-rem(30);
width: calc-rem(86);
height: calc-rem(86);
font-size: calc-rem(14);
}
}
}
.map {
padding: calc-rem(84) 0 calc-rem(74) 0;
@include media-breakpoint-down(xm) {
padding: calc-rem(64) 0 calc-rem(74) 0;
}
.title-h1 {
margin-bottom: calc-rem(100);
@include media-breakpoint-down(sm) {
margin-bottom: calc-rem(80);
}
@include media-breakpoint-down(xm) {
margin-bottom: calc-rem(40);
}
}
&__block {
display: flex;
justify-content: space-between;
img {
width: 100%;
height: calc-rem(627);
object-fit: contain;
@include media-breakpoint-down(xxl) {
height: calc-rem(500);
}
@include media-breakpoint-down(xl) {
height: calc-rem(340);
}
@include media-breakpoint-down(lg) {
margin: 0 auto;
width: calc-rem(472);
height: calc-rem(263);
}
@include media-breakpoint-down(sm) {
width: calc-rem(335);
height: calc-rem(188);
}
@include media-breakpoint-down(xm) {
height: calc-rem(180);
}
}
}
}
.konstlagret {
position: relative;
overflow: hidden;
min-height: 100vh;
padding-top: calc-rem(241);
@include media-breakpoint-down(md) {
padding-top: calc-rem(230);
min-height: unset;
padding-bottom: calc-rem(50);
}
.z-in {
position: relative;
z-index: 3;
}
&:after {
content: "";
position: absolute;
width: calc-rem(1414);
height: calc-rem(877);
top: 0;
right: 0;
z-index: 1;
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQxNSIgaGVpZ2h0PSI4NzgiIHZpZXdCb3g9IjAgMCAxNDE1IDg3OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMzMuOTkzMyAwQzkuNDAzMTMgMzAuOTM1NiAxIDY1LjMyMjggMSA5OC40NzI5QzEgMTYzLjMxNSA5Ni40OTg5IDIxNC44MjggMjAyLjYyNiAyNDcuMDgyQzI0Ny4wOTggMjYwLjU5OCAyNzkuNDEyIDI4MC45MSAyODguNTEzIDMwNi42MDNDMjkzLjgxMiAzMjEuNTYyIDI5NC4xMTMgMzM2LjUwNCAyOTMuMjI3IDM1MS43MjZDMjkyLjUxMiAzNjQuMDA0IDI3OC40MDEgMzc3LjY3NiAyNzQuMzczIDM5MC4wMzVDMjY1LjQ1NyA0MTcuMzk0IDI1MS4yMDEgNDUzLjA1NSAyNzkuMDg3IDQ3OC45OTVDMzEwLjkwMyA1MDguNTkgMzc5LjY4MyA1MzEuODUyIDQzOS4zNCA1NDYuMUM1MDguNTAxIDU2Mi42MTkgNTgxLjc0NyA1NzYuMTI5IDY1NC4wNTkgNTg4LjkwOUM2OTEuMjk0IDU5NS40OSA3MjkuNzk5IDU5OS43ODcgNzY3LjE3OSA2MDYuMjY0Qzc5My44OTMgNjEwLjg5MyA4MjkuODA5IDYxNy4yMjIgODUxLjQ5NSA2MjUuOTMzQzg5Ni43MjkgNjQ0LjEwMiA4NjMuNTQgNjkxLjkzIDg2My41NCA3MTcuODQ5Qzg2My41NCA3MzYuODY2IDg3My4zMDcgNzQ5LjYgOTA5LjEwMiA3NjAuMTQ0Qzk2MC4xIDc3NS4xNjYgMTA1NS4zNiA3NjguMjQzIDExMTQuMzkgNzY4LjI0M0MxMTQ2LjYzIDc2OC4yNDMgMTE3My40MiA3NzEuMjg3IDEyMDMuMTYgNzc2LjM0MkMxMjc5LjcyIDc4OS4zNTIgMTI4Ny42MyA4MzcuNjA4IDEzMzkuNTkgODYzLjExNkMxMzY2LjYxIDg3Ni4zODQgMTM3Ny44NCA4NzcgMTQxNSA4NzciIHN0cm9rZT0iI0Y2OTIxRSIgc3Ryb2tlLXdpZHRoPSIwLjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg==) center center no-repeat;
background-size: contain;
@include media-breakpoint-down(lg) {
width: 100%;
height: calc-rem(360);
}
@include media-breakpoint-down(md) {
width: calc-rem(295);
height: calc-rem(517);
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjk2IiBoZWlnaHQ9IjUxOCIgdmlld0JveD0iMCAwIDI5NiA1MTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTcuODgzMzMgMEMyLjc1MzEzIDE4LjIzNjggMSAzOC41MDg0IDEgNTguMDUwN0MxIDk2LjI3NTggMjAuOTIzNyAxMjYuNjQzIDQzLjA2NDggMTQ1LjY1N0M1Mi4zNDI5IDE1My42MjUgNTkuMDg0NSAxNjUuNTk5IDYwLjk4MzMgMTgwLjc0NUM2Mi4wODg4IDE4OS41NjQgNjIuMTUxNSAxOTguMzczIDYxLjk2NjcgMjA3LjM0NkM2MS44MTc2IDIxNC41ODQgNTguODczNiAyMjIuNjQ0IDU4LjAzMzMgMjI5LjkyOUM1Ni4xNzMxIDI0Ni4wNTggNTMuMTk4OSAyNjcuMDggNTkuMDE2NyAyODIuMzcyQzY1LjY1NDQgMjk5LjgxOSA4MC4wMDM4IDMxMy41MzIgOTIuNDUgMzIxLjkzMUMxMDYuODc5IDMzMS42NjkgMTIyLjE2IDMzOS42MzMgMTM3LjI0NiAzNDcuMTY4QzE0NS4wMTUgMzUxLjA0NyAxNTMuMDQ4IDM1My41OCAxNjAuODQ2IDM1Ny4zOThDMTY2LjQyIDM2MC4xMjcgMTczLjkxMyAzNjMuODU4IDE3OC40MzcgMzY4Ljk5M0MxODcuODc0IDM3OS43MDUgMTgwLjk1IDQwNy44OTkgMTgwLjk1IDQyMy4xNzlDMTgwLjk1IDQzNC4zOSAxODIuOTg4IDQ0MS44OTYgMTkwLjQ1NiA0NDguMTEyQzIwMS4wOTUgNDU2Ljk2OCAyMjAuOTcgNDUyLjg4NyAyMzMuMjg1IDQ1Mi44ODdDMjQwLjAxMSA0NTIuODg3IDI0NS41OTkgNDU0LjY4MSAyNTEuODA1IDQ1Ny42NjFDMjY3Ljc3NiA0NjUuMzMgMjY5LjQyNyA0OTMuNzc4IDI4MC4yNjcgNTA4LjgxNUMyODUuOTA1IDUxNi42MzcgMjg4LjI0NyA1MTcgMjk2IDUxNyIgc3Ryb2tlPSIjRjY5MjFFIiBzdHJva2Utd2lkdGg9IjAuMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+) center center no-repeat;
}
}
&__content {
position: relative;
margin: calc-rem(50) auto;
@include media-breakpoint-down(md) {
margin-top: 0;
}
.col-md-7 {
position: relative;
z-index: 4;
display: flex;
flex-direction: column;
justify-content: center;
@include media-breakpoint-down(sm) {
width: 60%;
}
@include media-breakpoint-down(xm) {
width: 67%;
}
span, h2, h3 {
font-family: Montserrat, sans-serif;
font-style: normal;
font-weight: 500;
text-align: left;
}
span {
display: inline-block;
font-size: calc-rem(24);
line-height: calc-rem(29);
color: $gray-3;
margin-bottom: calc-rem(60);
@include media-breakpoint-down(sm) {
margin-bottom: calc-rem(45);
font-size: calc-rem(18);
line-height: calc-rem(24);
}
@include media-breakpoint-down(xm) {
margin-bottom: calc-rem(40);
font-size: calc-rem(14);
line-height: calc-rem(17);
}
}
h2 {
font-weight: bold;
font-size: calc-rem(80);
line-height: calc-rem(98);
color: $white;
text-align: left;
margin: 0;
@include media-breakpoint-down(xxl) {
font-size: calc-rem(70);
line-height: calc-rem(88);
}
@include media-breakpoint-down(xl) {
font-size: calc-rem(55);
line-height: calc-rem(72);
}
@include media-breakpoint-down(md) {
font-size: calc-rem(45);
line-height: calc-rem(53);
}
@include media-breakpoint-down(sm) {
font-size: calc-rem(28);
line-height: calc-rem(33);
}
@include media-breakpoint-down(xm) {
font-size: calc-rem(24);
line-height: calc-rem(29);
}
}
.title-h3 {
margin: calc-rem(40) 0 calc-rem(60) 0;
text-align: left;
color: $gray;
@include media-breakpoint-down(sm) {
margin: calc-rem(25) 0 calc-rem(45) 0;
}
@include media-breakpoint-down(xm) {
margin: calc-rem(20) 0 calc-rem(40) 0;
}
@include media-breakpoint-down(xm) {
margin: calc-rem(12) 0 calc-rem(40) 0;
}
}
.btn {
display: flex;
align-items: center;
justify-content: center;
i {
margin-left: calc-rem(30);
}
}
.btn-arrow-down {
display: inline-block;
position: relative;
z-index: 1;
width: calc-rem(35);
height: calc-rem(36);
margin-bottom: 0;
margin-left: calc-rem(25);
@include media-breakpoint-down(md) {
width: calc-rem(26);
height: calc-rem(26);
margin-left: calc-rem(5);
}
&:before {
position: absolute;
content: '';
display: block;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: calc-rem(35);
height: calc-rem(36);
z-index: 10;
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTQiIGhlaWdodD0iNTQiIHZpZXdCb3g9IjAgMCA1NCA1NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjcgMTEuMjVMMjcgNDIuNzUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTQyLjc1IDI2Ljk5OThMMjcgNDIuNzQ5OEwxMS4yNSAyNi45OTk4IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==) center center no-repeat;
@include media-breakpoint-down(md) {
width: calc-rem(20);
height: calc-rem(21);
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyNiAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTMgNS40MTY3NUwxMyAyMC41ODM0IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0yMC41ODIgMTNMMTIuOTk4NyAyMC41ODMzTDUuNDE1MzcgMTMiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+) center center no-repeat;
}
}
}
}
.col-md-5 {
@include media-breakpoint-down(lg) {
position: absolute;
width: calc-rem(293);
padding: 0;
right: calc-rem(-114);
}
@include media-breakpoint-down(md) {
right: calc-rem(-83);
}
@include media-breakpoint-down(sm) {
width: calc-rem(305);
right: calc-rem(-77);
}
@include media-breakpoint-down(xm) {
width: calc-rem(276);
right: calc-rem(-135);
}
.img {
position: relative;
overflow: hidden;
width: 100%;
height: calc-rem(420);
clip-path: url(#konstlagret);
@include media-breakpoint-down(xxl) {
height: calc-rem(336);
}
@include media-breakpoint-down(xl) {
height: calc-rem(280);
}
@include media-breakpoint-down(md) {
right: calc-rem(-10);
}
@include media-breakpoint-down(sm) {
height: calc-rem(284);
}
@include media-breakpoint-down(xm) {
height: calc-rem(259);
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: calc-rem(420);
object-fit: cover;
@include media-breakpoint-down(xxl) {
height: calc-rem(336);
}
@include media-breakpoint-down(xl) {
height: calc-rem(280);
}
@include media-breakpoint-down(sm) {
height: calc-rem(284);
}
@include media-breakpoint-down(xm) {
height: calc-rem(259);
}
}
}
}
}
}
.citat {
position: relative;
overflow: hidden;
background: #030027;
&:after {
content: "";
position: absolute;
width: calc-rem(309);
height: calc-rem(347);
top: calc-rem(30);
right: calc-rem(-30);
z-index: 1;
background: url(img/citat-curve.png) center;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
@include media-breakpoint-down(lg) {
background-size: calc-rem(200);
width: calc-rem(200);
}
@include media-breakpoint-down(md) {
top: calc(100% - 345px);
background-size: calc-rem(150);
width: calc-rem(150);
}
@include media-breakpoint-down(sm) {
top: calc(100% - 345px);
background-size: calc-rem(100);
width: calc-rem(100);
}
}
&__content {
margin: 0 auto;
padding: calc-rem(178) 0;
@include media-breakpoint-down(md) {
padding: calc-rem(178) calc-rem(20);
}
@include media-breakpoint-down(xm) {
padding: calc-rem(42) 0;
}
.description {
text-align: center;
color: $white;
p {
margin-bottom: calc-rem(40);
&:last-child {
margin-bottom: 0;
}
}
}
}
}
.challenge {
position: relative;
overflow: hidden;
padding: calc-rem(132) 0 calc-rem(97) 0;
@include media-breakpoint-down(xm) {
padding: calc-rem(50) 0;
}
&:after {
content: "KONSTLAGRET";
font-family: Montserrat, sans-serif;
font-style: normal;
font-weight: 250;
font-size: calc-rem(60);
line-height: calc-rem(73);
color: rgba(246, 146, 30, 0.2);
position: absolute;
top: calc-rem(73);
left: calc(50% - (448px / 2));
z-index: 1;
@include media-breakpoint-down(sm) {
font-size: calc-rem(40);
top: calc-rem(21);
left: calc(50% - (299px / 2));
}
}
&__content {
margin: 0 auto;
.text {
font-family: Montserrat, sans-serif;
font-style: normal;
padding-right: calc-rem(60);
@include media-breakpoint-down(xxl) {
padding-right: 0;
}
@include media-breakpoint-down(xm) {
padding-left: 0;
}
.title {
font-weight: 500;
font-size: 20px;
line-height: 24px;
color: #DBDBDB;
}
span {
display: inline-block;
text-transform: uppercase;
font-size: calc-rem(20);
line-height: calc-rem(24);
color: $gray;
@include media-breakpoint-down(xm) {
font-size: calc-rem(14);
line-height: calc-rem(15);
}
}
.description {
margin: calc-rem(40) 0;
color: $white;
text-align: left;
@include media-breakpoint-down(xm) {
margin: calc-rem(40) 0;
}
}
&-orange {
font-weight: 500;
font-size: calc-rem(28);
line-height: calc-rem(34);
color: $orange;
@include media-breakpoint-down(lg) {
font-size: calc-rem(24);
line-height: calc-rem(29);
}
@include media-breakpoint-down(md) {
font-size: calc-rem(16);
line-height: calc-rem(22);
}
@include media-breakpoint-down(sm) {
font-size: calc-rem(15);
line-height: calc-rem(19);
}
@include media-breakpoint-down(xm) {
font-size: calc-rem(14);
line-height: calc-rem(15);
margin-bottom: calc-rem(80);
}
}
}
p {
margin: calc-rem(40) 0;
color: $white;
text-align: left;
@include media-breakpoint-down(xm) {
margin: calc-rem(40) 0;
}
}
.btn-block {
padding-left: calc-rem(60);
@include media-breakpoint-down(xxl) {
padding-left: calc-rem(20);
}
@include media-breakpoint-down(xm) {
padding-left: 0;
padding-right: 0;
}
&__container {
justify-content: space-between;
flex-direction: column;
height: 100%;
@include media-breakpoint-down(sm) {
align-items: flex-start;
*{
text-align: left;
}
}
}
.title {
font-weight: 500;
font-size: 20px;
line-height: 24px;
color: #DBDBDB;
margin-top: 0;
@include media-breakpoint-down(sm) {
padding: 0;
}
}
p {
@include media-breakpoint-down(xxl) {
padding-left: calc-rem(20);
}
@include media-breakpoint-down(xm) {
padding-left: 0;
padding-right: 0;
}
p {
color: $white;
text-align: left;
margin-bottom: calc-rem(40);
@include media-breakpoint-down(xm) {
margin-bottom: calc-rem(20);
}
&:last-child {
margin-bottom: calc-rem(120);
@include media-breakpoint-down(xm) {
margin-bottom: calc-rem(40);
}
}
}
.btn {
@include media-breakpoint-down(md) {
margin: 0 auto;
}
}
}
}
}
}
.decision {
position: relative;
overflow: hidden;
padding: calc-rem(164) 0 calc-rem(191) 0;
@include media-breakpoint-down(md) {
padding: calc-rem(50) 0 calc-rem(90) 0;
}
@include media-breakpoint-down(xm) {
padding: calc-rem(28) 0 calc-rem(63) 0;
}
&:after {
content: "";
width: 100%;
height: calc-rem(285);
background: url('img/line-decision.png');
background-repeat: no-repeat;
position: absolute;
bottom: calc-rem(100);
left: 0;
right: 0;
z-index: 1;
touch-action: none;
background-size: contain;
@include media-breakpoint-down(lg) {
height: calc-rem(160);
}
@include media-breakpoint-down(md) {
height: calc-rem(121);
bottom: calc-rem(10);
}
@include media-breakpoint-down(xm) {
height: calc-rem(78);
}
}
&__content {
margin: 0 auto;
.text {
span {
display: inline-block;
text-transform: uppercase;
font-size: calc-rem(20);
line-height: calc-rem(24);
color: $gray;
@include media-breakpoint-down(xm) {
font-size: calc-rem(14);
line-height: calc-rem(15);
}
}
.description {
text-align: left;
color: $white;
margin: calc-rem(40) 0 calc-rem(120) 0;
@include media-breakpoint-down(xm) {
margin: calc-rem(40) 0;
}
}
}
}
.container {
.card-container {
display: flex;
position: relative;
height: calc-rem(400);
@include media-breakpoint-down(sm) {
height: calc-rem(200);
}
}
.card-scroll {
position: absolute;
left: 0;
top: 0;
display: flex;
overflow: auto;
width: 86vw;
}
.list__content {
margin: 0;
position: relative;
z-index: 2;
flex-wrap: inherit;
width: 100%;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
width: 0;
height: 0;
}
.card {
padding: 0;
flex-shrink: 0;
margin-right: calc-rem(80);
width: calc-rem(400);
height: calc-rem(400);
@include media-breakpoint-down(sm) {
width: calc-rem(200);
height: calc-rem(200);
margin-right: calc-rem(40);
}
&:first-child {
margin-left: calc-rem(0);
}
}
.image {
position: relative;
overflow: hidden;
width: 100%;
height: calc-rem(400);
border-radius: calc-rem(20);
padding: 0;
@include media-breakpoint-down(sm) {
height: calc-rem(200);
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
width: 100%;
height: calc-rem(400);
@include media-breakpoint-down(sm) {
height: calc-rem(200);
}
}
}
}
}
}
.result {
padding: calc-rem(164) 0 calc-rem(187) 0;
@include media-breakpoint-down(lg) {
padding: calc-rem(28) 0;
}
&__content {
margin: 0 auto;
.text {
span {
display: inline-block;
text-transform: uppercase;
font-size: calc-rem(20);
line-height: calc-rem(24);
color: $gray;
@include media-breakpoint-down(xm) {
font-size: calc-rem(14);
line-height: calc-rem(15);
}
}
.description {
text-align: left;
color: $white;
margin: calc-rem(40) 0 calc-rem(150) 0;
@include media-breakpoint-down(xm) {
margin: calc-rem(40) 0;
}
}
}
.result-block {
.col-md-7 {
position: relative;
margin: 0 auto;
max-width: calc-rem(1030);
width: 100%;
@include media-breakpoint-down(lg) {
width: 80%;
}
@include media-breakpoint-down(md) {
width: 70%;
}
@include media-breakpoint-down(xm) {
width: 75%;
}
&:before {
content: "";
width: calc-rem(159);
height: calc-rem(204);
background: url('img/curve.png');
background-repeat: no-repeat;
position: absolute;
top: calc-rem(-100);
left: calc-rem(-100);
z-index: 1;
touch-action: none;
background-size: contain;
@include media-breakpoint-down(xl) {
width: calc-rem(134);
height: calc-rem(158);
background-size: calc-rem(120);
top: calc-rem(-70);
left: calc-rem(-70);
}
@include media-breakpoint-down(sm) {
width: calc-rem(84);
height: calc-rem(110);
background-size: calc-rem(80);
top: calc-rem(-60);
left: calc-rem(-40);
}
@include media-breakpoint-down(xm) {
width: calc-rem(80);
height: calc-rem(98);
background-size: calc-rem(80);
top: calc-rem(-43);
left: calc-rem(-22);
}
}
i {
position: absolute;
top: calc(50% - (45px / 2));
right: calc-rem(-80);
font-size: calc-rem(44);
color: $orange;
@include media-breakpoint-down(xl) {
font-size: calc-rem(34);
}
@include media-breakpoint-down(md) {
right: calc-rem(-70);
}
@include media-breakpoint-down(sm) {
right: calc-rem(-38);
}
@include media-breakpoint-down(xm) {
font-size: calc-rem(20);
}
}
img {
width: 100%;
height: auto;
border-radius: calc-rem(20);
}
}
}
}
}
.nyheter {
padding: calc-rem(165) 0 calc-rem(100) 0;
@include media-breakpoint-down(md) {
padding-bottom: calc-rem(50);
}
.nav-case {
margin-bottom: calc-rem(100);
@include media-breakpoint-down(md) {
margin-bottom: calc-rem(64);
}
ul {
li {
@include media-breakpoint-down(md) {
margin-right: calc-rem(16);
}
}
}
}
.list-card {
.col-md-4 {
@include media-breakpoint-down(lg) {
width: 100%;
}
}
.img {
position: relative;
overflow: hidden;
width: 100%;
clip-path: url(#nyheter);
height: calc-rem(400);
@include media-breakpoint-down(xxl) {
height: calc-rem(320);
}
@include media-breakpoint-down(xl) {
height: calc-rem(265);
}
@include media-breakpoint-down(lg) {
width: calc-rem(280);
margin: 0 auto;
}
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
object-fit: cover;
height: calc-rem(400);
@include media-breakpoint-down(xxl) {
height: calc-rem(320);
}
@include media-breakpoint-down(xl) {
height: calc-rem(265);
}
}
span {
display: inline-block;
font-family: Montserrat, sans-serif;
font-style: normal;
font-weight: 500;
font-size: calc-rem(14);
line-height: calc-rem(17);
color: $orange;
text-align: left;
margin-top: calc-rem(40);
@include media-breakpoint-down(xm) {
margin-top: calc-rem(20);
}
}
h3 {
text-align: left;
margin: calc-rem(20) 0;
}
p {
text-align: left;
color: $white;
}
}
}
.nyheter-welcome {
overflow: hidden;
position: relative;
padding: calc-rem(241) 0 calc-rem(60) 0;
@include media-breakpoint-down(md) {
padding-top: calc-rem(180);
}
&__image {
@include media-breakpoint-down(lg) {
position: absolute;
right: calc-rem(-107);
top: calc(50% - 150px);
}
@include media-breakpoint-down(md) {
width: calc-rem(484);
right: calc-rem(-185);
top: calc(50% - 113px);
}
@include media-breakpoint-down(sm) {
width: calc-rem(360);
right: calc-rem(-180);
top: calc(50% - 77px);
}
@include media-breakpoint-down(xm) {
right: calc-rem(-220);
top: calc(50% - 70px);
}
.img {
position: relative;
overflow: hidden;
width: 100%;
clip-path: url(#nyheter-welcom);
height: calc-rem(620);
@include media-breakpoint-down(xxl) {
height: calc-rem(500);
}
@include media-breakpoint-down(xl) {
height: calc-rem(415);
}
@include media-breakpoint-down(sm) {
height: calc-rem(300);
}
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
object-fit: cover;
height: calc-rem(620);
@include media-breakpoint-down(xxl) {
height: calc-rem(500);
}
@include media-breakpoint-down(xl) {
height: calc-rem(415);
}
@include media-breakpoint-down(sm) {
height: calc-rem(300);
}
}
}
&__text {
display: flex;
flex-direction: column;
justify-content: center;
@include media-breakpoint-down(lg) {
order: -1;
}
@include media-breakpoint-down(md) {
width: 60%;
padding: 0;
}
@include media-breakpoint-down(xm) {
width: 68%;
}
span {
display: inline-block;
font-family: Montserrat, sans-serif;
font-style: normal;
font-weight: 500;
font-size: calc-rem(24);
line-height: calc-rem(29);
color: $orange;
text-align: center;
margin-top: calc-rem(20);
@include media-breakpoint-down(lg) {
text-align: left;
}
}
h2 {
margin: calc-rem(40) 0;
@include media-breakpoint-down(lg) {
text-align: left;
}
}
p {
text-align: center;
color: $gray;
@include media-breakpoint-down(lg) {
text-align: left;
}
}
}
.row {
@include media-breakpoint-down(md) {
width: 100%;
margin: 0 auto;
}
}
.container {
@include media-breakpoint-down(md) {
padding: 0 calc-rem(15);
}
}
}
.vanilla-descript {
position: relative;
overflow: hidden;
padding: calc-rem(60) 0 calc-rem(213) 0;
@include media-breakpoint-down(sm) {
padding: calc-rem(60) 0 calc-rem(50) 0;
}
.row {
--bs-gutter-x: 0;
padding: 0 calc-rem(20);
@include media-breakpoint-down(md) {
padding: 0 calc-rem(15);
}
}
.description {
color: $gray;
max-width: 1110px;
p {
text-align: left;
margin-bottom: calc-rem(40);
}
strong {
color: $white;
}
}
&:after {
content: "Nyheter";
position: absolute;
z-index: 2;
touch-action: none;
font-family: Montserrat, sans-serif;
font-style: normal;
font-weight: 100;
font-size: calc-rem(140);
line-height: calc-rem(171);
color: rgba(246, 146, 30, 0.6);
transform: rotate(-15.71deg);
right: calc-rem(40);
top: calc(50% - 30px);
@include media-breakpoint-down(xl) {
font-size: calc-rem(120);
}
@include media-breakpoint-down(lg) {
font-size: calc-rem(100);
top: calc(50% - 200px);
}
@include media-breakpoint-down(md) {
font-size: calc-rem(80);
}
@include media-breakpoint-down(sm) {
font-size: calc-rem(65);
}
@include media-breakpoint-down(xm) {
font-size: calc-rem(50);
}
}
}
.nyheter-list {
padding: calc-rem(118) 0 calc-rem(105) 0;
@include media-breakpoint-down(md) {
padding: calc-rem(36) 0 calc-rem(34) 0;
}
h3 {
color: $orange;
text-align: left;
margin-bottom: calc-rem(80);
}
.row {
@include media-breakpoint-down(md) {
width: 100%;
margin: 0 auto;
}
}
.list-card {
.col-md-3 {
@include media-breakpoint-down(lg) {
width: 100%;
}
@include media-breakpoint-down(md) {
padding: 0;
}
}
.img {
position: relative;
overflow: hidden;
width: 100%;
clip-path: url(#nyheter-four);
height: calc-rem(292);
@include media-breakpoint-down(xxl) {
height: calc-rem(230);
}
@include media-breakpoint-down(xl) {
height: calc-rem(190);
}
@include media-breakpoint-down(lg) {
width: calc-rem(320);
height: calc-rem(300);
margin: 0 auto;
}
@include media-breakpoint-down(xm) {
width: calc-rem(280);
height: calc-rem(265);
}
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
object-fit: cover;
height: calc-rem(292);
@include media-breakpoint-down(xxl) {
height: calc-rem(230);
}
@include media-breakpoint-down(xl) {
height: calc-rem(190);
}
@include media-breakpoint-down(lg) {
height: calc-rem(300);
}
@include media-breakpoint-down(xm) {
height: calc-rem(265);
}
}
span {
display: inline-block;
font-family: Montserrat, sans-serif;
font-style: normal;
font-weight: 500;
font-size: calc-rem(14);
line-height: calc-rem(17);
color: $orange;
text-align: left;
margin-top: calc-rem(40);
@include media-breakpoint-down(xm) {
margin-top: calc-rem(20);
}
}
h3 {
text-align: left;
color: $white;
margin: calc-rem(20) 0;
}
p {
text-align: left;
color: $white;
font-size: calc-rem(20);
@include media-breakpoint-down(lg) {
margin-bottom: calc-rem(40);
}
}
}
}
.kontact {
padding: calc-rem(251) 0 calc-rem(85) 0;
overflow: hidden;
@media only screen and (max-width: 670px) {
padding-top: calc-rem(150);
}
@include media-breakpoint-down(sm) {
padding: calc-rem(150) 0 calc-rem(85) 0;
}
&__content {
position: relative;
margin-top: calc-rem(173);
@include media-breakpoint-down(sm) {
margin-top: calc-rem(50);
}
}
&__image {
.img {
position: relative;
overflow: hidden;
width: 100%;
clip-path: url(#kontact);
height: calc-rem(500);
transform: scale(1.1);
@include media-breakpoint-down(xxl) {
height: calc-rem(396);
}
@include media-breakpoint-down(xl) {
height: calc-rem(329);
}
@include media-breakpoint-down(lg) {
width: calc-rem(284);
height: calc-rem(255);
}
@include media-breakpoint-down(sm) {
width: calc-rem(166);
height: calc-rem(152);
}
@media only screen and (max-width: 1470px) {
transform: scale(1);
}
@media only screen and (max-width: 670px) {
transform: scale(0.8);
}
@media only screen and (max-width: 480px) {
transform: scale(0.9);
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
object-fit: cover;
height: calc-rem(500);
@include media-breakpoint-down(xxl) {
height: calc-rem(396);
}
@include media-breakpoint-down(xl) {
height: calc-rem(329);
}
@include media-breakpoint-down(lg) {
height: calc-rem(255);
}
@include media-breakpoint-down(sm) {
height: calc-rem(152);
}
}
}
}
.title-h2 {
@media only screen and (max-width: 670px) {
font-size: calc-rem(25);
}
}
.title-h3 {
@media only screen and (max-width: 670px) {
font-size: calc-rem(18);
}
}
&__text {
position: absolute;
width: calc-rem(800);
right: calc-rem(145);
top: calc-rem(-155);
padding: 0;
@include media-breakpoint-down(xxl) {
width: calc-rem(630);
right: calc-rem(106);
}
@include media-breakpoint-down(xl) {
width: calc-rem(540);
}
@include media-breakpoint-down(lg) {
top: calc-rem(-150);
width: calc-rem(470);
right: calc-rem(55);
}
@include media-breakpoint-down(md) {
width: calc-rem(420);
}
@include media-breakpoint-down(sm) {
padding: 0;
right: calc-rem(16);
top: calc-rem(-90);
width: calc-rem(226);
}
@media only screen and (max-width: 1470px) {
right: calc-rem(10);
}
@media only screen and (max-width: 1370px) {
right: calc-rem(85);
}
@media only screen and (max-width: 850px) {
right: calc-rem(15);
}
@media only screen and (max-width: 768px) {
width : calc-rem(400);
right : calc-rem(-25);
}
@media only screen and (max-width: 670px) {
width: calc-rem(380);
right: calc-rem(60);
top: calc-rem(-70);
}
@media only screen and (max-width: 480px) {
width: calc-rem(226);
right: calc-rem(95);
}
@media only screen and (max-width: 375px) {
right: 0;
top: calc-rem(-95);
}
.square {
position: relative;
padding: calc-rem(94) calc-rem(27);
border-radius: calc-rem(20);
background: rgba(217, 215, 242, 0.17);
@include media-breakpoint-down(xl) {
padding: calc-rem(60) calc-rem(27);
}
@include media-breakpoint-down(lg) {
padding: calc-rem(45) calc-rem(27);
}
@include media-breakpoint-down(sm) {
padding: calc-rem(22) calc-rem(15);
}
h2 {
text-align: left;
margin-bottom: calc-rem(80);
@include media-breakpoint-down(xl) {
margin-bottom: calc-rem(40);
}
@include media-breakpoint-down(sm) {
margin-bottom: calc-rem(20);
font-weight: 700;
font-size: calc-rem(20);
line-height: calc-rem(25);
}
}
h3 {
text-align: left;
@include media-breakpoint-down(sm) {
font-weight: 500;
font-size: calc-rem(14);
line-height: calc-rem(17)
}
}
.trapeze {
position: relative;
&__block {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
width: calc-rem(520);
height: calc-rem(420);
right: calc-rem(-260);
bottom: calc-rem(-310);
@include media-breakpoint-down(xl) {
width: calc-rem(400);
height: calc-rem(320);
right: calc-rem(-172);
bottom: calc-rem(-228);
}
@include media-breakpoint-down(lg) {
right: calc-rem(-125);
bottom: calc-rem(-260);
}
@include media-breakpoint-down(md) {
right: calc-rem(-59);
bottom: calc-rem(-284);
}
@include media-breakpoint-down(sm) {
width: calc-rem(230);
height: calc-rem(230);
right: calc-rem(-22);
bottom: calc-rem(-203);
}
span {
position: relative;
font-weight: 400;
z-index: 3;
display: block;
color: $white;
@include media-breakpoint-down(sm) {
font-size: calc-rem(14);
line-height: calc-rem(17);
}
}
.btn-phone {
margin: calc-rem(47) 0 calc-rem(65) 0;
@include media-breakpoint-down(xxl) {
margin: calc-rem(95) 0 calc-rem(50) 0;
}
@include media-breakpoint-down(xl) {
margin: calc-rem(100) 0 calc-rem(40) 0;
}
//@media only screen and (max-width: 1030px) {
// margin-top: calc-rem(100);
//}
@include media-breakpoint-down(sm) {
margin: calc-rem(55) 0 calc-rem(20) 0;
}
}
&:before,
&:after {
content: "";
background-repeat: no-repeat !important;
position: absolute;
z-index: 2;
touch-action: none;
}
&:before {
background: url('img/trapeze-2.png');
width: calc-rem(446);
height: calc-rem(276);
top: calc-rem(90);
left: calc-rem(50);
@include media-breakpoint-down(xxl) {
background-size: 420px;
top: calc-rem(122);
}
@include media-breakpoint-down(xl) {
background-size: 320px;
}
@include media-breakpoint-down(lg) {
background-size: 300px;
}
@include media-breakpoint-down(sm) {
left: calc-rem(30);
background-size: 185px;
}
}
&:after {
transform: rotate(0deg);
width: calc-rem(80);
height: calc-rem(110);
background-size: 70px;
top: calc-rem(113);
left: calc(50% + 42px);
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTAiIGhlaWdodD0iMTA5IiB2aWV3Qm94PSIwIDAgOTAgMTA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik02OC45NzQ4IDk2LjE3NTlDNjcuMDgxNiA5MC4wMzI3IDY1LjE4ODUgODMuODg5NCA2My4yOTUzIDc3Ljc0NjFDNjEuMDYwMiA3MC40OTMxIDU5LjQxNDIgNjIuNjYzMSA1NS45OTEzIDU1Ljg2MzZDNTAuODcyNiA0NS42OTU0IDQ0LjE2NTQgMzguNjU4MiAzMi4yMzQ3IDM4Ljk5MjJDMjEuOTczOSAzOS4yNzk0IDEwLjk2MTkgNDMuNTM5OSAxMS40ODc4IDU1LjE1MTJDMTEuODk3MyA2NC4xOTQyIDIzLjQ0MjYgNjguMDAzIDMwLjk3OTEgNjkuMDAwMUMzOS40ODc1IDcwLjEyNTcgNDguNDUyNCA2OC45ODg4IDU2LjIzOTkgNjUuMjg2OUM2NS41NTEgNjAuODYwOCA3MC44NzYzIDUwLjk3NDUgNzIuMzcxMiA0MS4xMzg5QzczLjA2MzMgMzYuNTg1MSA3MS4zMjQgMzEuNDIyMiA2OS45OTc4IDI3LjExODhDNjguMjMxIDIxLjM4NTYgNjQuMjc2NSAxNy41NDUyIDU5LjcyNDkgMTMuNzkyNEM1Ni4zNjc2IDExLjAyNDIgNTIuMjc5IDguOTk3NTUgNDguNDQ3NSA2Ljk3MTIxQzQ3LjQ2OTMgNi40NTM5IDQ2LjIwNzYgNS40MjI5NSA0NS4yMDQ3IDUuMjU2MjUiIHN0cm9rZT0iI0Y2OTIxRSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTQ2LjA2MzEgOC4zNTYzOEM0NS43MzMyIDcuMjg2MDMgNDUuMzM0MiA2LjIxNDY1IDQ1LjA2NzggNS4xMjY2MkM0NS4wNDMxIDUuMDI1NzcgNDUuOTIyMSA1LjE1MzE0IDQ2LjAxOTEgNS4xNTEzNEM0Ny42NzA1IDUuMTIwNjggNDkuMzMwMSA0Ljk1NzQ5IDUwLjk4MDIgNC44NzQxOCIgc3Ryb2tlPSIjRjY5MjFFIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=) center center no-repeat;
@include media-breakpoint-down(xxl) {
top: calc-rem(145);
}
@include media-breakpoint-down(sm) {
top: calc-rem(35);
left: calc(50% + 27px);
background-size: 35px;
}
}
}
}
}
}
}
//my
.page-error {
position: relative;
overflow: hidden;
.container-fluid {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}
&__content {
text-align: center;
h1 {
font-family: Montserrat, sans-serif;
font-style: normal;
font-weight: bold;
font-size: calc-rem(140);
line-height: calc-rem(171);
color: $white;
}
h2 {
margin: calc-rem(20) 0;
color: $white;
}
p {
color: $gray;
}
span {
display: block;
margin-top: calc-rem(100);
color: $gray;
a {
color: $orange;
}
}
}
.list_link {
li {
position: absolute;
}
&__4, &__6, &__9, &__10 {
a {
font-weight: 700;
font-size: calc-rem(20);
line-height: calc-rem(24);
color: $white;
}
}
&__7, &__8, &__13 {
a {
font-weight: 500;
font-size: calc-rem(14);
line-height: calc-rem(17);
color: $white;
}
}
&__1 {
transform: rotate(4.07deg);
top: calc(50% - (100px / 2));
left: 6.3%;
}
&__2 {
transform: rotate(-24.27deg);
top: 24%;
left: 23%;
a {
font-weight: 700;
font-size: calc-rem(24);
line-height: calc-rem(29);
color: $white;
}
}
&__3 {
top: 10.6%;
left: 16.8%;
a {
font-weight: 500;
font-size: calc-rem(14);
line-height: calc-rem(17);
color: $white;
}
}
&__4 {
top: 14%;
left: 42.7%;
}
&__5 {
top: 6%;
left: 66.4%;
a {
display: block;
width: calc-rem(65);
height: calc-rem(65);
img {
width: 100%;
height: auto;
}
}
}
&__6 {
transform: rotate(24.41deg);
top: 21%;
left: 71.6%;
}
&__7 {
top: 46%;
left: 80%;
}
&__8 {
top: 66%;
left: 71.5%;
}
&__9 {
transform: rotate(-21.32deg);
top: 76.5%;
left: 75.5%;
}
&__10 {
transform: rotate(-13.27deg);
top: 81%;
left: 50.3%;
}
&__11 {
top: 76%;
left: 40%;
a {
width: calc-rem(54);
height: calc-rem(54);
i {
font-size: calc-rem(20);
}
}
}
&__12 {
top: 78%;
left: 24%;
a {
text-transform: uppercase;
font-size: calc-rem(30);
line-height: 120%;
color: $white;
}
}
&__13 {
top: 69%;
left: 15%;
text-transform: uppercase;
}
}
}
////////////////////////////////////////////////////
// MEDIA
////////////////////////////////////////////////////
@media(max-width: 1400px) {
#information {
zoom: 1.9;
}
#kundcase {
zoom: 1.17;
}
#omoss {
zoom: 1.42;
}
#omoss-info {
zoom: 1.83;
}
#konstlagret {
zoom: 1.5;
}
#nyheter {
zoom: 1.437;
}
#nyheter-welcom {
zoom: 2.239;
}
#nyheter-four {
zoom: 1.03;
}
#kontact {
zoom: 0.59;
}
.title-h1, .title-h2 {
font-weight: bold;
font-size: calc-rem(44);
line-height: calc-rem(40);
text-align: center;
}
.running-string {
font-size: calc-rem(140);
line-height: 171px;
padding: calc-rem(80) 0;
span {
width: calc-rem(93);
height: calc-rem(10);
border-radius: calc-rem(5);
margin: calc-rem(40) calc-rem(42);
}
}
}
@media(max-width: 1200px) {
#information {
zoom: 1.5;
}
#kundcase {
zoom: 0.96;
}
#omoss {
zoom: 1.17;
}
#omoss-info {
zoom: 1.499;
}
#konstlagret {
zoom: 1.239;
}
#nyheter {
zoom: 1.18;
}
#nyheter-welcom {
zoom: 1.862;
}
#nyheter-four {
zoom: 0.847;
}
#kontact {
zoom: 0.49;
}
.title-h1, .title-h2 {
font-weight: bold;
font-size: calc-rem(40);
line-height: calc-rem(38);
text-align: center;
}
.running-string {
font-size: calc-rem(110);
line-height: calc-rem(118);
padding: calc-rem(80) 0;
span {
width: calc-rem(93);
margin: calc-rem(25) calc-rem(40);
}
}
.title-h3 {
font-size: calc-rem(27);
}
.btn-phone {
width: calc-rem(75);
height: calc-rem(75);
i {
font-size: calc-rem(30)
}
}
}
@media(max-width: 1025px) {
#nyheter-four {
zoom: 1.351;
}
#kontact {
zoom: 0.379;
}
}
@media(max-width: 991px) {
#information-mobile {
zoom: 1.3;
}
#omoss {
zoom: 1.311;
}
.title-h1, .title-h2 {
font-weight: bold;
font-size: calc-rem(36);
line-height: calc-rem(35);
text-align: center;
margin-bottom: 20px;
}
.title-h3 {
font-size: calc-rem(23);
line-height: calc-rem(25);
}
.description,
.description p {
font-style: normal;
font-weight: 500;
font-size: calc-rem(20);
line-height: calc-rem(20);
text-align: center;
}
.nav-case {
overflow-x: auto;
ul {
a {
font-size: calc-rem(21);
line-height: calc-rem(24);
}
}
}
}
@media(max-width: 767px) {
.btn {
width: calc-rem(200);
padding: calc-rem(17);
font-size: 16px;
}
.title-h1, .title-h2 {
font-weight: bold;
font-size: calc-rem(32);
line-height: calc-rem(32);
text-align: center;
}
.description,
.description p {
font-style: normal;
font-weight: 500;
font-size: calc-rem(16);
line-height: calc-rem(20);
text-align: center;
}
.running-string {
font-size: calc-rem(90);
line-height: calc-rem(98);
padding: calc-rem(80) 0;
@media only screen and (max-width: 670px) {
margin-bottom: calc-rem(105);
}
span {
width: calc-rem(80);
margin: calc-rem(20) calc-rem(35);
}
}
.nav-case {
overflow-x: auto;
ul {
a {
font-size: calc-rem(18);
line-height: calc-rem(21);
}
}
}
}
@media(max-width: 576px) {
#comment-img-small {
zoom: 0.29;
}
#comment-img-big {
zoom: 0.42;
}
#konstlagret {
zoom: 1.28;
}
#nyheter-welcom {
zoom: 1.35;
}
#kontact {
zoom: 0.224;
}
.title-h1, .title-h2 {
font-weight: bold;
font-size: calc-rem(24);
line-height: calc-rem(25);
text-align: center;
}
.description,
.description p {
font-style: normal;
font-weight: 500;
font-size: calc-rem(14);
line-height: calc-lh(14, 18);
text-align: center;
}
.running-string {
font-size: calc-rem(50);
line-height: calc-rem(58);
padding: calc-rem(80) 0;
@include media-breakpoint-down(md) {
padding: calc-rem(72) 0;
margin-bottom: calc-rem(46);
}
span {
width: calc-rem(70);
height: calc-rem(8);
margin: calc-rem(10) calc-rem(25);
}
}
.nav-case {
overflow-x: auto;
ul {
a {
font-size: calc-rem(16);
line-height: calc-rem(20);
}
}
}
.btn-phone {
width: calc-rem(54);
height: calc-rem(54);
i {
font-size: calc-rem(20);
}
}
}
@media(max-width: 375px) {
#information-mobile,
#omoss,
#omoss-info {
zoom: 0.93;
}
#teamet {
zoom: 0.813;
}
#konstlagret {
zoom: 1.16;
}
#nyheter-four {
zoom: 1.189;
}
.btn {
width: calc-rem(150);
padding: calc-rem(16);
font-size: 14px;
}
.title-h1, .title-h2 {
font-weight: bold;
font-size: calc-rem(20);
line-height: calc-lh(20, 24);
text-align: center;
}
.title-h3 {
font-weight: bold;
font-size: calc-rem(20);
line-height: calc-rem(25);
}
.description,
.description p {
font-style: normal;
font-weight: 500;
font-size: calc-rem(14);
line-height: calc-rem(17);
text-align: center;
}
.running-string {
font-size: calc-rem(36);
line-height: calc-rem(44);
span {
width: calc-rem(30);
height: calc-rem(5);
margin: calc-rem(7) calc-rem(20);
}
}
.nav-case {
overflow-x: auto;
ul {
a {
font-size: calc-rem(14);
line-height: calc-rem(17);
}
}
}
}
.section-404 {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow-x: hidden;
min-height: 1080px;
@media(max-width: 1240px) {
min-height: 100vh;
}
.btn {
background-color: transparent;
}
&-top__logo {
position: absolute;
white-space: nowrap;
top: calc-rem(-190);
left: calc-rem(-392);
}
&-top__link {
position: absolute;
top: calc-rem(-245);
left: calc-rem(560);
width: calc-rem(65);
height: calc-rem(65);
@media (max-width: 1240px) {
top: calc-rem(-192);
left: calc-rem(49);
}
img {
width: 100%;
height: 100%;
}
}
&__wrapper {
max-width: calc-rem(500);
position: relative;
a {
&:hover {
color: $white;
opacity: 0.8;
}
}
@media (max-width: 1240px) {
margin-top: 50px;
}
}
&__title {
font-family: Montserrat, sans-serif;
font-size: calc-rem(140);
line-height: calc-rem(171);
font-weight: bold;
color: $white;
flex: none;
order: 0;
flex-grow: 0;
margin: calc-rem(20) 0;
text-align: center;
@media (max-width: 1366px) {
font-size: calc-rem(100);
line-height: calc-rem(131);
}
@media (max-width: 1240px) {
font-size: calc-rem(36);
line-height: calc-rem(44);
margin: calc-rem(10) 0;
}
}
&__subtitle {
font-family: Montserrat, sans-serif;
font-style: normal;
font-weight: bold;
font-size: calc-rem(48);
line-height: calc-lh(48, 59);
text-align: center;
/* identical to box height */
color: $white;
flex: none;
order: 1;
flex-grow: 0;
margin: calc-rem(20) 0;
@media (max-width: 1366px) {
font-size: calc-rem(36);
line-height: calc-rem(47);
}
@media (max-width: 1240px) {
font-size: calc-rem(24);
line-height: calc-rem(29);
margin: calc-rem(10) 0;
}
}
&__description, &__home {
color: $white;
text-align: center;
font-size: calc-rem(24);
line-height: calc-rem(29);
@media (max-width: 1366px) {
font-size: calc-rem(20);
line-height: calc-rem(25);
}
@media (max-width: 1240px) {
font-size: calc-rem(14);
line-height: calc-rem(17);
}
}
&__home {
margin-top: calc-rem(100);
@media (max-width: 1240px) {
margin-top: calc-rem(50);
}
}
&__link {
font-size: calc-rem(24);
line-height: calc-lh(24, 29);
color: $orange;
@media (max-width: 1366px) {
font-size: calc-rem(20);
line-height: calc-rem(25);
}
@media (max-width: 1240px) {
font-size: calc-rem(14);
line-height: calc-rem(17);
}
}
}
.mobile-hide {
@media (max-width: 1240px) {
display: none;
}
}
.position {
position: absolute;
&-1 {
left: calc-rem(-591);
top: calc-rem(180);
transform: rotate(5deg);
@media(max-width: 1680px) {
left: calc-rem(-395);
}
@media(max-width: 1240px) {
left: calc-rem(175);
top: calc-rem(293);
transform: rotate(-45deg);
}
}
&-2 {
left: calc-rem(-274);
top: calc-rem(-14);
transform: rotate(-25deg);
}
&-3 {
top: calc-rem(-151);
left: calc-rem(105);
}
&-4 {
top: calc-rem(-45);
right: calc-rem(-340);
transform: rotate(25deg);
@media (max-width: 1240px) {
top: calc-rem(324);
right: calc-rem(143);
white-space: nowrap;
}
}
&-5 {
top: calc-rem(191);
right: calc-rem(-365);
@media (max-width: 1240px) {
top: initial;
right: calc-rem(213);
bottom: calc-rem(-55);
}
}
&-6 {
bottom: calc-rem(40);
right: calc-rem(-255);
@media (max-width: 1240px) {
bottom: initial;
top: calc-rem(-137);
right: calc-rem(6);
transform: rotate(22deg);
}
}
&-7 {
right: calc-rem(-465);
bottom: calc-rem(-140);
transform: rotate(-22deg);
@media (max-width: 1680px) {
right: calc-rem(-300);
}
}
&-8 {
bottom: calc-rem(-182);
left: calc-rem(250);
transform: rotate(-13deg);
@media (max-width: 1240px) {
bottom: initial;
top: calc-rem(-88);
left: calc-rem(-15);
}
}
&-9 {
bottom: calc-rem(-163);
left: calc-rem(-260);
@media (max-width: 1240px) {
bottom: initial;
top: calc-rem(-64);
left: calc-rem(188);
font-size: calc-rem(14);
}
}
&-10 {
bottom: calc-rem(17);
left: calc-rem(-350);
}
&-11 {
bottom: calc-rem(-105);
left: calc-rem(49);
@media (max-width: 1240px) {
bottom: calc-rem(-90);
left: calc-rem(140);
}
}
}
.icon-menu.btn-menu {
background-color: transparent;
border: none;
}
.teamet {
.btn-scroll {
margin-top: calc-rem(240);
@include media-breakpoint-down(md) {
margin: calc-rem(50) auto;
}
}
}
.teams {
position: relative;
&-scroll {
position: relative;
margin-top: calc-rem(110);
margin-bottom: calc-rem(250);
@include media-breakpoint-down(lg) {
margin-bottom: calc-rem(100);
}
@include media-breakpoint-down(md) {
margin-top: calc-rem(50);
margin-bottom: 0;
}
display: flex;
overflow: auto;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
&::-webkit-scrollbar {
display: none;
}
}
&-card {
margin-right: calc-rem(100);
@include media-breakpoint-down(md) {
margin-right: calc-rem(20);
}
&:last-of-type {
margin-right: 0;
}
&__figure {
width: calc-rem(290);
height: calc-rem(320);
@include media-breakpoint-down(md) {
width: calc-rem(158);
height: calc-rem(175);
margin: 0 auto;
}
}
&__img {
width: 100%;
height: 100%;
object-fit: contain;
}
&__title {
font-family: Montserrat, sans-serif;
font-style: normal;
font-weight: 600;
font-size: calc-rem(24);
line-height: calc-rem(29);
text-align: center;
color: #FFFFFF;
flex: none;
order: 1;
flex-grow: 0;
margin: calc-rem(20) 0px;
@include media-breakpoint-down(md) {
font-size: calc-rem(20);
line-height: calc-rem(24);
margin: calc-rem(10) 0px;
}
}
&__description {
font-family: Montserrat, sans-serif;
font-style: normal;
font-weight: bold;
font-size: calc-rem(18);
line-height: calc-rem(22);
text-align: center;
color: #F6921E;
flex: none;
order: 2;
flex-grow: 0;
margin: calc-rem(20) 0px;
@include media-breakpoint-down(md) {
font-size: calc-rem(14);
line-height: calc-rem(17);
margin: calc-rem(10) 0px;
}
}
}
}
//.col-md-7,
//.col-md-5,
//.col-md-12,
//.col-md-10 {
// @include media-breakpoint-down(xm) {
// padding-right: calc-rem(15);
// padding-left: calc-rem(15);
// }
//}
//.row,
//.col-md-10 .col-md-12,
//.col-md-6 {
// @include media-breakpoint-down(xm) {
// padding-right: 0 !important;
// padding-left: 0 !important;
// }
//}
.col-md-7,
.col-md-5,
.col-md-12,
.col-md-10 {
@include media-breakpoint-down(xm) {
padding-right: 0;
padding-left: 0;
}
}
.row {
@include media-breakpoint-down(xm) {
margin: 0;
}
}
.case-page {
.nav-case {
ul {
padding-left: 0;
}
}
.container {
@media only screen and (max-width: 1670px) {
width: 90%;
}
}
.kundcase-row {
//@media only screen and (max-width: 1471px) {
// width: 90%;
// margin: 0 auto;
// --bs-gutter-x: 0;
// --bs-gutter-y: 0;
//}
}
.col-md-12 {
padding-left: 0;
}
.kundcase__content {
margin-left: 0;
margin-right: 0;
width: 100%;
.text.big {
h2 {
font-size: calc-rem(80);
line-height: calc-rem(98);
@include media-breakpoint-down(md) {
font-size: calc-rem(24);
line-height: calc-rem(29);
}
}
p {
font-size: calc-rem(24);
line-height: calc-rem(29);
@include media-breakpoint-down(md) {
font-size: calc-rem(14);
line-height: calc-rem(29);
}
}
}
.card {
padding-top : calc-rem(60);
&.right {
.img {
margin-left : calc-rem(155);
@media only screen and (max-width : 1670px) {
margin-left : calc-rem(95);
}
@media only screen and (max-width : 1470px) {
margin-left : calc-rem(55);
}
@media only screen and (max-width : 1030px) {
margin-top : calc-rem(-45);
margin-bottom : calc-rem(-45);
}
@media only screen and (max-width : 1025px) {
margin-left: calc(50% - 90px);
margin-top: calc-rem(-45);
margin-bottom: calc-rem(-45);
}
@media only screen and (max-width : 991px) {
transform: scale(.8);
margin-left: calc(50% - 125px);
margin-top: calc-rem(-45);
margin-bottom: calc-rem(-45);
}
@media only screen and (max-width : 850px) {
margin-left : calc(50% - 125px);
margin-top: calc-rem(-45);
margin-bottom: calc-rem(-45);
}
@media only screen and (max-width : 670px) {
margin : calc-rem(-95) auto;
margin-top: calc-rem(-45);
margin-bottom: calc-rem(-45);
}
@include media-breakpoint-down(md) {
margin-left: auto;
}
//@include media-breakpoint-down(1470px) {
// mar gin-left: calc-rem(30);
//}
//
//@include media-breakpoint-down(850px) {
// margin-left: calc(50% - 125px);
//}
}
.text, .col-md-8 {
padding-right : 0;
}
}
.img {
transform : scale(1.3);
margin-left : calc-rem(95);
@media only screen and (max-width : 1670px) {
margin-left : calc-rem(35);
transform : scale(1.1);
}
@media only screen and (max-width : 1025px) {
margin-left: calc(50% - 90px);
margin-top: calc-rem(-45);
margin-bottom: calc-rem(-45);
}
@media only screen and (max-width : 991px) {
transform: scale(.8);
margin-left: calc(50% - 125px);
margin-top: calc-rem(-45);
margin-bottom: calc-rem(-45);
}
@media only screen and (max-width : 850px) {
margin-left : calc(50% - 125px);
}
@media only screen and (max-width : 375px) {
margin-left : calc(50% - 90px);
}
//@include media-breakpoint-down(xm) {
// margin-left: calc(50% - 90px);
//}
}
.text, .col-md-8 {
padding-left : 0;
}
}
}
}
Zerion Mini Shell 1.0