body {
font-family: 'Inter', sans-serif;
font-size: 1.1rem;
line-height: 1.5;
font-weight: 300;
overflow-x: hidden;
color: #222;
-webkit-font-smoothing: antialiased;
}
.fs-sm {
font-size: 1rem !important;
}
.spec-font {
font-family: 'Caveat', cursive;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-family: 'Inter', sans-serif;
font-weight: 600 !important;
}
.equal-2-1::before {
padding-top: 0;
height: 600px;
}
.card-title>* {
line-height: 1.2;
}
.wpcf7-spinner {
position: absolute !important;
top: 10px !important;
left: 10px !important;
}
body.page-template-default .navbar,
body.blog .navbar,
body.single .navbar {
background: rgb(53,6,173);
background: linear-gradient(150deg, rgba(53,6,173,1) 0%, rgba(162,21,255,1) 49%, rgba(255,187,0,1) 100%);
}
body.home .navbar,
body.single-post .navbar,
body.single-system .navbar,
body.single-tjanster .navbar {
background: none;
}
#hero .dropdown .dropdown-menu {
padding: 0;
border: 1px solid rgba(255,255,255,0.4);
border-radius: 15px;
background: #7a00eb;
overflow: hidden;
}
#hero .dropdown a:hover,
#hero .dropdown a:focus {
background: rgb(122,0,235);
background: linear-gradient(295deg, rgba(122,0,235,1) 18%, rgba(194,101,176,1) 62%, rgba(255,187,0,1) 100%);
}
#hero .grouped-inputs {
transition: 0.3s;
}
#hero .grouped-inputs:hover {
background: #7a00eb;
}
#hero .grouped-inputs:hover .btn {
background: rgb(122,0,235) !important;
background: linear-gradient(295deg, rgba(122,0,235,1) 18%, rgba(194,101,176,1) 62%, rgba(255,187,0,1) 100%) !important;
color: #7a00eb !important;
}
#hero .grouped-inputs:hover .btn {
color: #fff !important;
}
#hero .dropdown a {
display: block;
padding: 0.6rem 1.25rem;
font-weight: 500;
font-size: 1.2rem;
color: #fff;
border-top: 1px solid rgba(255,255,255,0.4);
}
#hero .dropdown li:first-child a {
border:0;
}
.badge {
letter-spacing: 0.1rem;
padding-left: 1.15rem;
padding-right: 1.15rem;
}
.icon-box[class*="-sm"] {
min-width: 1.5rem;
width: 1.5rem;
height: 1.5rem;
font-size: 0.8rem;
} .wave-pulsating-circle {
width: 100px;
height: 100px;
background-color: #000;
border-radius: 50%;
animation: wavePulse 2s infinite;
position: fixed;
bottom: 0;
left: 0;
border:0;
margin: 40px;
z-index:100;
display:flex;
align-items:center;
justify-content:center;
font-size:3rem;
color:#fff;
} @keyframes wavePulse {
0% {
transform: scale(0.8);
opacity: 0.7;
}
50% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(0.8);
opacity: 0.7;
}
}
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
padding: 0 2rem;
}
.carousel[class*="-big-controls"] .tns-controls {
height: 5rem;
overflow: hidden;
}
.modal-header img {
max-width:150px;
}
.navbar-sticky {
padding-left: 2rem;
padding-right: 2rem;
}
.form-control,
.form-select {
border-radius: 6px;
}
.form-control::placeholder {
color:#000;
}
.sidebar {
max-width:400px;
}
.card {
display: block;
}
.card .card-wrapper {
text-decoration: none;
display: flex;
flex-flow: column wrap;
height: 100%;
flex-wrap: nowrap;
}
.card .card-wrap {
flex-flow: column wrap;
padding: 2.5rem;
flex: auto;
width: 100%;
transition: all .25s ease-in-out;
display: flex;
flex-direction: column;
}
.card .card-wrap p {
flex: auto;
}
.action {
font-weight: 700 !important;
}
small, .small {
font-weight: 400 !important;
}
img {
max-width: 100%;
}
.tns-item img {
width: 100%;
}
.rounded-lg,
.plyr,
.plyr__video-embed,
.plyr__video-embed iframe {
border-radius: 2rem !important;
overflow: hidden;
}
.rounded-bottom {
border-bottom-left-radius: 2rem !important;
border-bottom-right-radius: 2rem !important;
}
.rounded-top {
border-top-left-radius: 2rem !important;
border-top-right-radius: 2rem !important;
}
.nav-tabs {
margin: 0 -0.75rem;
}
.nav-tabs .nav-item {
text-align: center;
display: block;
flex: 1 0 0%;
margin: 0;
padding: 0 0.25rem;
}
.nav-tabs .nav-link {
text-align: center;
border: 2px solid #bdb0cc;
line-height: 1.1;
color: #222;
font-weight: 500;
width: 100%;
padding: 1rem 0;
border-radius: 10px;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link.active {
background: #2b2e32;
color: #fff;
}
.tab-icon img {
height: 45px;
}
.equal-3-4::before {
display: block;
content: "";
width: 100%;
padding-top: 92.2223%;
}
h1, .h1 {
font-size: 3.5rem;
line-height: 1.1;
}
h2, .h2 {
font-size: 2.5rem;
line-height: 1.25;
}
h2 span {
display: block;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, #740fdd, #dc4c4c 50%, #fff8ba);
-webkit-background-clip: text;
background-clip: text;
}
h3, .h3 {
font-size: 2rem;
line-height: 1.25;
}
h4, .h4 {
font-size: 1.9rem;
line-height: 1.25;
}
h5, .h5 {
font-size: 1.45rem;
line-height: 1.25;
}
.icon-box {
width: 3rem;
min-width: 3rem;
height: 3rem;
}
.module-border-wrap {
padding: 0.3rem;
border-radius: 500px;
background: linear-gradient(295deg, rgba(122,0,235,1) 18%, rgba(194,101,176,1) 62%, rgba(255,187,0,1) 100%);
}
.animated-progress {
width: 100%;
height: 20px;
border-radius: 2px;
margin-bottom: 1rem;
border-bottom: 1px solid rgba(122,0,235,1);
overflow: hidden;
position: relative;
}
.animated-progress span {
height: 100%;
display: block;
width: 0;
color: rgb(255, 251, 251);
background: rgb(122,0,235);
background: linear-gradient(295deg, rgba(122,0,235,1) 18%, rgba(194,101,176,1) 62%, rgba(255,187,0,1) 100%);;
line-height: 20px;
position: absolute;
text-align: end;
padding-right: 5px;
font-size: 0.7rem;
font-weight: 700;
}
.equal-2-1::before {
padding-top: 83%;
}
.caption {
position: absolute;
bottom: 0;
right: 0;
z-index: 10;
margin: 2rem;
}
.caption-inner {
border-left: 4px solid rgba(122,0,235,1);
padding-left: 0.5rem;
}
.puff-caption {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.75);
}
.puff-caption h2 {
font-weight: 900 !important;
opacity: 0.6;
}
.rounded-xsm {
border-radius: 10px !important;
}
.rounded-sm {
border-radius: 30px !important;
}
.rounded {
border-radius: 60px !important;
}
.rounded-top-0 {
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
}
.rounded-bottom-0 {
border-bottom-left-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
a {
color: #7a00eb;
}
.bi {
line-height: 1.16em;
height: auto;
}
.inverted [class*="border"],
.inverted[class*="border"] {
border-color: rgba(255,255,255,0.4) !important;
}
figure.img {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
figure.img img {
height: 250px;
width: 100%;
object-fit: cover;
}
figure.img-no-fixed {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
figure.img-no-fixed img {
width: 100%;
height: 90px;
object-fit: contain;
}
figure.img-lg {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
figure.img-lg img {
height:450px;
width: 100%;
object-fit: cover;
}
figure.img-no-height {
width: 100%;
height: auto;
overflow: hidden;
margin: 0;
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
figure.img-no-height img {
height: 300px;
width: 100%;
object-fit: cover;
}
.shadow-lg {
box-shadow: 0 24px 100px rgba(0,0,0,0.25) !important;
}
.shadow {
box-shadow: 0 24px 100px rgba(152, 157, 166, .16) !important;
}
.display-3 {
font-size: 2.8rem;
}
.fw-bold,
strong,
b {
font-weight: 500 !important;
}
.fw-bold-lg {
font-weight: 700 !important;
}
.text-warning {
color: #ffbb00 !important;
}
.text-primary {
color: #ffbb00  !important;
}
.text-info  {
color: #7a00eb !important;
}
.bg-primary {
background: #7a00eb !important;
}
.bg-info {
background: #ff2b80 !important;
}
.grouped-inputs {
border-radius: 10px !important;
}
.btn {
font-size: 1.2rem;
font-weight: 600;
border-radius: 15px !important;
}
.btn.rounded {
border-radius: 1.5rem !important;
}
.btn-primary {
color: #fff;
background: #7a00eb;
border-color: #7a00eb;
}
.btn-outline-primary {
border:2px solid #222;
color: #222;
}
.btn-info {
color: #fff;
background: #ff2286;
border-color: #ff2286;
}
.btn img {
width: auto;
margin-left: -4rem;
margin-top: -3rem;
height: 5rem;
border-radius: 500px;
}
.lh-sm {
line-height: 1.2 !important;
}
.navbar-dark .btn-outline-white {
border-color: rgba(255,255,255,1);
} .mt-minus-sm {
margin-top:-3rem !important;
}
.mt-minus {
margin-top:-9rem !important;
}
.mt-minus-lg {
margin-top:-17rem;
}
.navbar-brand img {
max-height: 6rem;
}
.navbar-light .navbar-nav .nav-link {
font-weight: 600;
}
.bg-gradient-new {
background-image: url(//scrillnet.se/wp-content/themes/scrill_theme/assets/images/bg.png);
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
background: rgb(53,6,173);
background: linear-gradient(150deg, rgba(53,6,173,1) 0%, rgba(162,21,255,1) 49%, rgba(255,187,0,1) 100%);
}
.bg-gradient-new2 {
background: rgb(122,0,235);
background: linear-gradient(295deg, rgba(122,0,235,1) 18%, rgba(194,101,176,1) 62%, rgba(255,187,0,1) 100%);;
}
.bg-gradient-new3 {
background-image: linear-gradient(#e1d0ef 25%, #fff);
}
.bg-new3 {
background:#e1d0ef;
}
.bg-gradient-new4 {
background-image: linear-gradient(#efe4d0 25%, #fff);
}
.bg-new4 {
background:#efe4d0;
}
.bg-gradient-new5 {
background-image: linear-gradient(#ffddd6 25%, #fff);
}
.bg-new5 {
background:#ffddd6;
}
.bg-dark {
background-color: #2b2e32 !important;
}
.background[class*="-overlay"]::after {
opacity: 0.4;
}
body.home .media,
body.page-template-template-landing .media {
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
overflow: hidden;
border-top: 35px solid #222;
border-left: 2px solid #222;
border-right: 2px solid #222;
overflow: visible;
}
.media span {
border-left-width: 1px !important;
font-size: 110% !important;
color: #100cce;
font-family: 'Book Antiqua';
}
body.home .media span::before,
body.page-template-template-landing .media span::before {
content: "•••";
position: relative;
top: -40px;
left: 6px;
height: 30px;
display: block;
z-index: 10;
color: #fff;
font-size: 3rem;
line-height: 1;
text-align: left;
}
.media-video-absolute {
position: absolute;
top: -5rem;
left: -5rem;
width: 400px;
border-radius: 2rem;
overflow: hidden;
}
.media[class*="-video"]::after,
.plyr .plyr__control--overlaid,
.plyr__control--overlaid {
background-color: #7a00eb;
color: #fff;
opacity: 1;
width: 5rem;
height: 5rem;
line-height: 5rem;
margin-left: 0 !important;
}
.media[class*="-video"] span,
.media[class*="-image"] span {
transform: scale(1) !important;
}
.headroom--not-top .navbar-sticky.navbar-dark {
background: none !important;
}
.container-fluid {
width: 100%;
max-width: 1600px;
margin:0 auto;
}
.headroom--not-top .navbar-sticky.navbar-light {
background: none;
}
.caption-video {
position: absolute;
top: 20px;
right: 20px;
background: #fff;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
padding: 1rem 2rem;
font-size: 1.4rem;
z-index: 10;
border-radius: 12px;
}
.caption-video-right {
right: 60px;
}
.puffs img {
max-width: 80px;
}
.container-inner {
margin:6rem auto 0 auto;
} .service-list:nth-child(odd) .service-list-content {
order:1;
}
.service-list:nth-child(odd) .service-list-thumbnail {
order:2;
}
.service-list:nth-child(even) .service-list-content {
order:2;
}
.service-list:nth-child(even) .service-list-thumbnail {
order:1;
}
.service-list:nth-of-type(odd) .container-inner {
background-image: linear-gradient(#e1d0ef 25%, #fff);
}
.service-list:nth-of-type(even) .container-inner {
background-image: linear-gradient(#ffddd6 25%, #fff);
}
.counter-value-wrap {
font-weight: 700 !important;
color: #7a00eb;
font-family: 'Caveat', cursive;
font-size: 5.5rem;
}
.counter-value {
text-align: center;
display: inline-block;
}
.bg-holder,
#wk-video-container {
width: 100%;
}
.bg-holder {
width: 100%;
height: 450px;
overflow: hidden;
}
#wk-video-container {
width: 100%;
height: 450px;
object-fit: cover;
} #puffz img {
margin: 0 auto;
height: 150px;
}
.icon-img-list li {
display: flex;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}
.icon-img-list li div {
width: 100%;
max-width: 100%;
flex: 1 0 0%;
}
.icon-img-list figure {
margin-right: 1.5rem;
display: block;
flex: 0 0 auto;
width: auto;
}
.icon-img-list figure img {
width: 60px;
max-height: 50px;
}
.half-half:nth-child(odd) .level-3 .row {
justify-content: flex-end;
}
.half-half:nth-child(odd) .back .row {
justify-content: flex-start;
}
.half-half:nth-child(even) .level-3 .row {
justify-content: flex-start;
}
.half-half:nth-child(even) .back .row {
justify-content: flex-end;
}
.price-list-groups .list-group-item  {
height: 60px;
display: flex;
align-items: center;
padding: 0 1rem;
}
.list-group-item .dropdown,
.list-group-item .dropdown-menu {
width:100% !important;
}
.navbar-brand {
margin-right: 0;
}
#gradient-row {
padding: 60px 0;
}
#gradient-row .thumbnail {
max-width: 1025px;
max-width: 100%;
top: -20%;
right: 0;
position: absolute;
}
#gradient-row .text {
max-width:650px;
}
.half-half:nth-of-type(odd) .text {
order:1;
}
.half-half:nth-of-type(odd) .thumbnail {
order:2;
}
.half-half:nth-of-type(even) .text {
order:2;
}
.half-half:nth-of-type(even) .thumbnail {
order:1;
}
.half-half .thumbnail .caption {
right: auto;
left: 0%;
width: 370px;
}
.half-half .thumbnail .caption img {
max-width: 250px;
height: auto;
}
.half-half:nth-of-type(even) .thumbnail .caption {
left: auto;
right: 0%;
}
.footer {
background-color: #7a00eb;
color: white;
font-size: 1em;
min-height: 120px;
text-align: left;
padding-bottom: 30px;
}
.footer img {
max-width: 200px;
margin-bottom: 2rem;
}
.footer li.menu-item a {
border-top: 1px solid rgba(255,255,255,0.4);
display: block;
padding: 0.3rem 0;
}
.footer li.menu-item:first-child a {
border-top: 0;
padding-top: 0;
}
.fvLNFm {
margin-top: 0px;
padding-top: 0px;
position: relative;
}
svg {
fill: currentcolor;
}
@media (max-width: 1399px) {
h1, .h1 {
font-size: 3.25rem;
line-height: 1.1;
}
.nav-tabs .nav-item {
padding: 0 0.25rem;
}
#mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle + #mega-menu-max_mega_menu_1 {
background: #7a00eb !important;
}
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
background: rgb(53,6,173) !important;
background: linear-gradient(150deg, rgba(53,6,173,1) 0%, rgba(162,21,255,1) 49%, rgba(255,187,0,1) 100%) !important;
}
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item.mega-toggle-on > a.mega-menu-link:hover,
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item.mega-toggle-on > a.mega-menu-link:focus {
background: rgb(53,6,173) !important;
background: linear-gradient(150deg, rgba(53,6,173,1) 0%, rgba(162,21,255,1) 49%, rgba(255,187,0,1) 100%) !important;
}
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item > a.mega-menu-link {
padding:8px 25px !important;
font-weight: 500 !important;
height: auto !important;
font-size: 24px !important;
border-top: 1px solid rgba(255,255,255,0.4) !important;
}
#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
padding:0px 25px !important;
font-weight: 500 !important;
}
}
@media (max-width: 1150px) {
h1, .h1 {
font-size: 2.9rem;
line-height: 1.1;
}
.nav-tabs .nav-item {
flex: none;
width: 33.333%;
margin-bottom: 0.5rem;
}
.half-half:nth-of-type(odd) .text {
padding-left: 0;
padding-bottom: 1.5rem;
}
.half-half:nth-of-type(odd) .thumbnail {
order: 1;
}
.half-half:nth-of-type(even) .thumbnail {
order: 1;
}
.sidebar {
max-width:100%;
}
#gradient-row .text {
max-width: 100%;
}
}
@media (max-width: 767px) {
html {
overflow-x: hidden;
}
body {
font-size: 1rem;
line-height: 1.4;
}
h1, .h1 {
font-size: 2.5rem;
line-height: 1.1;
}
h2, .h2 {
font-size: 2rem;
line-height: 1.25;
}
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
padding: 0 1rem;
}
#gradient-row {
padding: 30px 0;
}
.half-half .thumbnail .caption {
margin:0rem;
width: 100%;
position: relative;
}
.media[class*="-video"]::after {
left: 44%;
}
.container-inner {
margin: 2rem auto 0 auto;
}
.service-list:nth-child(even) .service-list-thumbnail {
order: 2;
}
figure.img-lg img {
height: 250px;
}
.card .card-wrap {
flex-flow: column wrap;
padding: 1.75rem;
}
.equal-2-1::before {
height: 300px;
}
#mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle + #mega-menu-max_mega_menu_1 {
width: 300px !important;
}
}