:root {
--main-color: #195F8C;
--heading-color: #195F8C;
--button-color: #FA690F;
--link-color: #FA690F;
--alt-color: #323232;
--text-color: #FAFEFE;
--content-color: #EEF2F4;
--web-green-color: #19F064;
--middle-blue-color: #417DA5;
--green-color: #32CD32;
--clear-blue-color: #3C9BCD;
--cloud-blue-color: #E8EFF3;
--hind-font: "Hind", sans-serif;
--mon-font: "Montserrat", sans-serif;
--extra-light-weight: 100;
--light-weight: 200;
--hind-light-weight: 300;
--normal-weight: 400;
--medium-weight: 500;
--heavy-weight: 600;
--reg-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
--tran-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.12), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
--width-Ckb: 40px;
--checkedColor: rgba(33, 150, 243, 1);
--unCheckedColor: rgba(220, 220, 220, 1);
--height-Ckb: (var(--width-Ckb)*0.5625);
--transitionSpeed: 0.05s;
--border: var(--width-Ckb) - var(--height-Ckb)/10;
}
::selection {
color: #195F8C;
background: #EAF0F4;
}
.br-5 {
border-radius: 10px !important;
}
code {
font-style: normal;
font-size: 13px;
background: #EAF0F4;
padding: 5px 8px;
border-radius: 5px;
color: #195F8C;
}
hr {
width: 100%;
max-width: 700px;
border: 0.25px solid #195F8C70;
float: left;
margin: 50px 0;
}
h1::selection, h2::selection {
color: #fafefe;
background: #195F8C;
}
.inline-rubrik {
text-transform: uppercase;
font-weight: 600;
font-size: 15px;
}
a::selection {
color: #fafefe;
background: #FA690F;
}
.index {
background: #FAFEFE;
scroll-behavior: smooth;
}
li {
line-height: 1.2;
}
.toc {
grid-column: 8 / span 3;
position: sticky;
padding: 5px;
top: 70px;
height: fit-content;
max-height: 90vh;
margin-right: 5%
}
.stidebar-sticky {
position: sticky !important;
top: -130px !important;
max-height: 110vh !important;
}
#TableOfContents ul>li {
list-style: none;
}
#TableOfContents ul>li>a {
font: var(--hind-light-weight) 16px var(--hind-font);
color: var(--clear-blue-color);
margin: 10px 0 2px 0;
line-height: 1;
}
#TableOfContents ul>li>ul>li>a {
font: var(--hind-light-weight) 15px var(--mon-font);
color: var(--alt-color);
}
#TableOfContents ul li > ul li::before {
content: "-";
color: var(--link-color);
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
}
#TableOfContents ul>li>ul {
margin-left: 17px;
margin-bottom: 15px;
}
p, ol {
font: var(--hind-light-weight) 17px var(--mon-font);
color: var(--alt-color);
line-height: 1.5;
}
h2 {
padding-top: 30px;
font: var(--hind-light-weight) 30px var(--hind-font);
color: var(--heading-color);
line-height: 30px;
margin-bottom: 7px;
}
h2:first-child {
padding-top: 0;
}
img {
width: 100%;
}
.content-body img {
border-radius: 5px;
}
h3 {
margin: 40px 0 10px 0;
font: var(--hind-light-weight) 20px var(--hind-font);
color: var(--clear-blue-color);
line-height: 21px;
}
h4 {
margin: 30px 0 10px 0;
font: var(--hind-light-weight) 16px var(--hind-font);
color: var(--main-color);
line-height: 21px;
}
.youtube, video {
max-width: 700px !important;
}
/*html {
overflow: hidden;
-webkit-overflow-scrolling: touch;
height: 100%;
}
body {
margin: 0;
overflow: auto;
height: inherit;
font-variant-numeric: normal;
scroll-behavior: smooth;
}*/
body {
margin: 0;
}
.light-backround {
color: #323232 !important;
}
a {
color: var(--link-color);
text-decoration: none;
font: var(--normal-weight) 16px var(--mon-font);
}
a:hover {
color: var(--main-color);
}
button {
outline: none;
border: none;
}
.linked-form {
width: 360px;
height: 900px;
}
.g-recaptcha {
margin-top: 40px;
}
@media only screen and (max-width: 400px) {
.linked-form {
width: 100%;
}
#rc-imageselect, .g-recaptcha {
transform:scale(0.7);
-webkit-transform:scale(0.7);
transform-origin:0 0;
-webkit-transform-origin:0 0;
}
}
/*.form {
display: block;
max-width: 250px;
padding: 15px 24px;
margin: 8px 0;
line-height: 20px;
border: 1px solid var(--main-color);
color: var(--main-color);
font: var(--normal-weight) 15px var(--mon-font);
border-radius: 50px;
background-color: var(--text-color);
}*/
form h3 {
margin-top: 40px;
}
select {
border: none;
width: 80%;
color: var(--main-color);
font: var(--normal-weight) 15px var(--mon-font);
background-color: var(--text-color);
}
input[type=text], [type=email] {
padding: 15px 24px;
margin: 8px 0;
line-height: 20px;
border: 1px solid var(--main-color);
color: var(--main-color);
font: var(--normal-weight) 15px var(--mon-font);
border-radius: 50px;
background-color: var(--text-color);
width: 250px;
}
::-webkit-input-placeholder { /* WebKit browsers */
color: var(--main-color) !important;
opacity: 1 !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: var(--main-color) !important;
opacity: 1 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: var(--main-color) !important;
opacity: 1;
}
/*
input {
display: block;
width: 100%;
max-width: 218px;
padding: 12px 24px;
margin: 8px 0;
line-height: 20px;
border: 1px solid var(--main-color);
font: var(--normal-weight) 15px var(--mon-font);
border-radius: 50px;
background-color: var(--text-color);
}
*/
textarea {
width: 250px;
padding: 12px 24px;
margin: 8px 0;
background-color: var(--text-color);
color: var(--main-color);
font: var(--normal-weight) 15px var(--mon-font);
line-height: 20px;
border: 1px solid var(--main-color);
border-radius: 25px;
}
.inline_rubrik {
text-transform: uppercase;
font-weight: var(--heavy-weight);
font-size: 14px;
}
.green {
color: var(--web-green-color)
}
::placeholder {
color: var(--main-color);
opacity: 1;
/* Firefox */
}
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: var(--main-color);
}
::-ms-input-placeholder {
/* Microsoft Edge */
color: #fefefe;
}
blockquote p {
color: var(--main-color);
font-style: italic;
}
.quote {
color: var(--heading-color);
font-size: 20px;
font-style: italic;
padding: 30px;
text-align: center;
line-height: 1.2;
}
#button {
width: 175px;
background-color: var(--button-color);
border-radius: 50px;
padding: 10px 25px 8px 25px;
margin: 30px 0px;
text-align: center;
cursor: pointer;
font: var(--heavy-weight) 16px var(--hind-font);
color: var(--text-color);
text-transform: uppercase;
}
/*#button a {
font: var(--heavy-weight) 15px var(--hind-font);
color: var(--text-color);
text-transform: uppercase;
}*/
/*#button:hover {
box-shadow: var(--tran-shadow);
transition: all 0.4s ease;
transform: translateY(-1px);
color: var(--text-color) !important;
}*/
.button {
background-color: var(--button-color);
border-radius: 50px;
padding: 10px 25px 8px 25px;
margin: 30px 0px;
text-align: center;
font: var(--heavy-weight) 16px var(--hind-font);
color: var(--text-color);
text-transform: uppercase;
white-space: nowrap;
}
.button:hover {
box-shadow: var(--tran-shadow);
transition: all 0.2s ease-in-out ;
transform: translateY(-2px);
color: var(--text-color) !important;
}
/* Checkbox toggle */
.inputGroup {
background-color: var(--content-color);
display: block;
margin: 10px 0;
position: relative;
border-radius: 50px;
max-width: 300px;
}
.inputGroup label {
padding: 12px 12px 12px 60px;
display: block;
text-align: left;
color: var(--main-color);
cursor: pointer;
position: relative;
z-index: 2;
transition: color 200ms ease-in;
overflow: hidden;
border-radius: 50px;
max-width: 300px;
font: var(--heavy-weight) 17px var(--hind-font);
}
.inputGroup label:before {
width: 10px;
height: 10px;
border-radius: 50%;
content: "";
background-color: var(--main-color);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale3d(1, 1, 1);
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
z-index: -1;
}
.inputGroup label:after {
width: 32px;
height: 32px;
content: "";
border: 2px solid #D1D7DC;
background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
background-repeat: no-repeat;
background-position: 4px 5px;
border-radius: 50%;
z-index: 2;
position: absolute;
left: 9px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
transition: all 200ms ease-in;
}
.inputGroup input:checked~label {
color: #fff;
}
.inputGroup input:checked~label:before {
transform: translate(-50%, -50%) scale3d(56, 56, 1);
opacity: 1;
}
.inputGroup input:checked~label:after {
background-color: var(--web-green-color);
border-color: var(--main-color);
}
.inputGroup input {
width: 32px;
height: 32px;
order: 1;
z-index: 2;
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
visibility: hidden;
}
/*input.switch {
-moz-appearance: none;
-webkit-appearance: none;
-o-appearance: none;
appearance: none;
width: var(--width-Ckb);
height: var(--height-Ckb);
border-radius: var(--height-Ckb);
box-shadow: inset var(--width-Ckb/2.3) 0px 0px 0px var(--unCheckedColor);
border: var(--border) solid var(--unCheckedColor);
outline: none;
transition: var(--transitionSpeed);
cursor: pointer;
background-color:rgba(255,255,255,1);
}
input.switch:after {
content: "";
font-size:var(--height-Ckb/2);
display: inline-flex;
justify-content: center;
width:var(--width-Ckb/2);
line-height:var(--height-Ckb);
position:relative;
z-index:99;
left: 0;
top: var(--border);
color:var(--unCheckedColor);
transition: var(--transitionSpeed);
}
input.switch:checked {
box-shadow: inset var(--width-Ckb/2.3) 0px 0px 0px var(--checkedColor);
border: var(--border) solid var(--checkedColor);
+ label.switch-label {
color: var(--checkedColor);
}
input.switch:after{
content: "";
left:calc(100% - var(--width-Ckb));
left: var(--width-Ckb/2) - var(--border);
color: var(--checkedColor);
}
}
label.switch-label {
font-size: var(--height-Ckb/1);
height: var(--height-Ckb);
display: flex;
line-height: var(--height-Ckb);
padding: 0 0 0 var(--width-Ckb/4);
color: var(--unCheckedColor);
}*/
#lankar {
margin: 10px 0px 10px 0px;
}
#text-button {
font: var(--heavy-weight) 15px var(--hind-font);
color: var(--button-color);
text-transform: uppercase;
white-space: nowrap;
line-height: 5;
}
#text-button:hover {
color: var(--main-color);
transition: color 0.2s ease-out
}
.navbar {
letter-spacing: 0.2px;
background: var(--main-color);
z-index: 100;
position: fixed;
width: 100%;
align-items: center;
}
.navbar a {
font: var(--heavy-weight) 16px var(--hind-font) !important;
}
.navbar>* {}
.nav-flex {
display: -ms-grid;
display: grid;
grid-template-columns: repeat(10, 1fr);
align-items: center;
}
.logo {
max-width: 150px;
color: var(--text-color);
display: grid;
grid-column: 2 / span 1;
}
@media only screen and (max-width: 1150px) {
.site-navigation {
display: grid;
grid-column: 2 / span all;
}
.logo {
grid-column: 1;
min-width: 150px;
margin-left: 16px;
}
.ch-sidebar-logo {
padding: 0 0 15px;
max-width: 65px !important;
}
.menu-item {
padding: 10px;
margin-left: 25px;
}
}
#h-bar {
display: none
}
.menu {
margin: 0px;
padding: 0px;
z-index: 100;
list-style: none;
}
.menu-item-flag {
text-align: left;
padding: 22px 20px 8px 20px;
float: right;
}
.menu-item {
text-align: left;
padding: 22px 20px 18px 20px;
float: right;
}
.menu-item li {
text-align: left;
padding: 20px 0px 0px 30px;
}
/*.menu-item.active svg {
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}*/
.menu-item ul {
padding: 0px 0px 0px 0px;
}
/*.menu-item:last-child ul {
padding: 0px 0px 20px 30px;
}*/
.blur {
background: inherit;
filter: blur(10px);
}
.svg-filters {
height: 0;
left: -9999em;
margin: 0;
padding: 0;
position: absolute;
width: 0;
}
.safespring_blue {
filter: url('#safespring_blue');
}
.safespring_dark {
filter: url('#safespring_dark');
}
.dropdown {
margin: 18px auto 0;
visibility: hidden;
min-width: 250%;
min-height: 100%;
background: #323232;
position: absolute;
overflow: hidden;
border-radius: 0 0 5px 5px;
left: -0px;
z-index: 100;
}
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
.dropdown {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: rgba(0, 0, 0, 0.5);
}
}
.sub-menu {
clear: both;
padding: 10px 10px 5px 20px;
list-style-type: none;
}
.sub-sub-menu a {
font: var(--hind-light-weight) 16px var(--hind-font) !important;
padding: 5px 0 0 10px !important;
}
.sub-menu:last-child {
padding-bottom: 15px;
border-radius: 0px 0px 5px 5px;
}
@media only screen and (min-width: 970px) {
.site-navigation {
display: grid;
grid-column: span 8;
}
}
.site-navigation li {
color: var(--text-color);
position: relative;
text-decoration: none;
}
.site-navigation li a {
color: var(--text-color);
text-decoration: none;
display: block;
}
.site-navigation li a:hover {
color: var(--link-color);
transition: color 0.2s ease-in-out
}
.site-navigation ul li:hover>ul, .site-navigation ul li ul:hover {
visibility: visible;
}
.heading-index {
background-image: linear-gradient(90deg, #195F8C, #195F8C99 80%);
display: -ms-grid;
display: grid;
grid-template-columns: repeat(10, 1fr);
padding: 200px 0 100px 0;
}
/*.heading-index:before {
content: "";
position: absolute;
top: 0;
left: 0;
background: url('/img/safespring-index-2.webp');
width: 100%;
height: 100%;
background-size: cover;
background-position: left;
z-index: -1;
}*/
.heading-index>* {
grid-column: main
}
.container {
display: -ms-grid;
display: grid;
grid-template-rows: 1fr 0.5fr;
grid-row-gap: 300px
}
#slideshow {
margin: 0;
position: relative
}
#slideshow>div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0
}
.hidden {
display: none
}
.heading-content {
margin: 166px 0 5% 0;
grid-column: 2 / span 6;
align-self: end;
}
.heading-content h1 {
font: var(--extra-light-weight) 55px var(--hind-font);
line-height: 1.1;
color: var(--text-color);
margin: 0;
}
.heading-content h1:nth-child(2) {
margin-top: -20px;
line-height: 1;
}
.heading-content p {
font: var(--medium-weight) 18px var(--mon-font);
color: var(--text-color)
}
.heading-event h1 {
font: var(--extra-light-weight) 38px var(--hind-font)
}
.heading-event p {
font: var(--heavy-weight) 16px var(--mon-font)
}
.heading-event h1 {
font: var(--extra-light-weight) 42px var(--hind-font);
color: var(--text-color);
margin: 0
}
.heading-event h1:nth-child(2) {
margin-top: -20px
}
.heading-event p {
font: var(--medium-weight) 18px var(--mon-font);
margin: 0;
color: var(--text-color)
}
.arrows {
text-align: center
}
#arrow {
font-size: 20px;
color: var(--text-color);
text-decoration: none
}
#arrow:hover {
color: rgba(249, 255, 255, 0.5);
transition: color 0.4s ease-in-out
}
.more {
font: var(--extra-light-weight) 15px var(--hind-font);
margin: 25px;
padding: 10px 25px;
border-radius: 50px;
text-decoration: none;
background-color: var(--button-color);
color: var(--text-color)
}
.more:hover {
box-shadow: var(--tran-shadow);
transition: box-shadow 0.4s ease-in-out
}
.heading-sub {
margin: 0;
display: -ms-grid;
display: grid;
grid-template-columns: repeat(10, 1fr);
overflow: hidden;
}
.heading-background {
height: 100%;
z-index: -1;
position: absolute;
background-size: cover;
background-position: center
}
.heading-background-index {
height: 100%;
z-index: -1;
position: absolute;
background-size: cover;
background-position: center
}
.heading-background-event {
height: 50;
left: 0px;
top: 0px;
z-index: -1;
position: absolute;
}
.heading-sub-event {
position: relative;
margin: 0;
display: -ms-grid;
display: grid;
grid-template-columns: [full-start] minmax(1em, 2fr)[main-start] minmax(0, 48rem)[main-end] minmax(1em, 3fr)[full-end];
grid-template-rows: [full-start] minmax(4em, 1fr)[main-start] minmax(7em, auto)[main-end] minmax(3.125em, 0.5fr)[full-end];
}
.heading-sub-event>* {
grid-column: main;
grid-row: main
}
.eventmeta {
text-align: center;
}
.eventmeta p {
margin: 10px;;
}
.eventdag {
font: var(--heavy-weight) 16px var(--hind-font) !important;
color: var(--main-color);
line-height: 30px;
}
.eventdatum {
font: var(--hind-light-weight) 40px var(--hind-font);
color: var(--clear-blue-color);
line-height: 40px;
}
.footer {
position: relative;
display: -ms-grid;
display: grid;
grid-gap: 15px;
grid-template-columns: [full-start] minmax(2em, 1fr)[main-start] minmax(0, 32rem)[main-middle] minmax(0, 32rem)[main-end] minmax(1em, 1fr)[full-end];
width: 100%;
background-color: var(--main-color);
padding: 25px 0;
}
.contact {
grid-column: main-start
}
.navigation {
grid-column: main-middle;
justify-self: end
}
.copyright {
grid-column: full
}
.footer li {
list-style: none
}
.footer a {
text-decoration: none
}
.footer a:hover {
color: var(--link-color)
}
.contact {
justify-self: start;
display: -ms-grid;
display: grid;
grid-template-columns: 1fr 1fr;
min-width: 320px
}
.navigation {
justify-self: end;
display: -ms-grid;
display: grid;
grid-template-columns: 1fr 1fr;
min-width: 320px
}
.copyright {
text-align: center
}
.copyright p {
font: var(--normal-weight) 15px var(--mon-font);
color: var(--text-color)
}
.address, .email, .about, .offer {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
padding: 0px 0
}
.email, .offer {
justify-self: end
}
.address, .about {
justify-self: start;
border-right: 1px solid var(--web-green-color);
width: auto;
padding-right: 25px
}
.footer-head {
font: var(--heavy-weight) 14px var(--hind-font);
color: var(--link-color)
}
.footer-text {
font: var(--heavy-weight) 14px var(--mon-font);
color: var(--text-color)
}
.page-nav .page-prev a {
font-size: 14px;
text-align: left
}
.page-nav .page-next a {
font-size: 14px;
color: var(--alt-color);
text-align: right
}
.content-main {
background: var(--text-color);
min-height: 61%;
display: -ms-grid;
display: grid;
grid-template-columns: [full-start] minmax(2em, 1fr)[main-start] minmax(0, 39rem)[main-end] minmax(2em, 1fr)[full-end];
grid-template-rows: [full-start] minmax(4em, 1fr)[main-start] minmax(30em, auto)[main-end] minmax(4em, 1fr)[full-end];
justify-items: center;
}
.content-main-index {
background: var(--text-color);
display: flex;
flex-direction: column;
}
@media only screen and (max-width: 1600px) {
.content-main-index {
background: var(--text-color);
display: grid;
grid-template-columns: repeat(10, 1fr);
}
.content-body-index {
font: var(--normal-weight) 15px var(--mon-font);
color: var(--alt-color);
margin: 10%;
display: grid;
align-self: start;
grid-column: span 6;
}
.content-container-index {
grid-column: 2 / span 8;
bottom: 8vh;
}
}
.content-body-index {
font: var(--normal-weight) 15px var(--mon-font);
color: var(--alt-color);
margin: 10%;
display: grid;
align-self: start;
max-width: 700px;
grid-column: span 6;
}
.content-main-index {
background: var(--text-color);
display: grid;
grid-template-columns: repeat(10, 1fr);
}
.content-image {
grid-column: span 4;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden
}
.content-image img {
flex-shrink: 0;
min-height:100%;
min-width: 100%;
object-fit: cover;
}
@media only screen and (max-width: 1150px) {
.menu-item > a {
font: var(--heavy-weight) 25px var(--hind-font) !important;
}
}
@media only screen and (max-width: 900px) {
.mobile {
display: block;
}
.desktop {
display: none;
}
.content-image {
order: 2;
grid-column: span 10;
}
.menu-item {
margin-left: 25px;
}
.sub-menu > a {
font: var(--normal-weight) 16px var(--mon-font);
}
.content-body-index {
margin: 10% 30px;
grid-column: span 10;
}
.content-body-index p {
margin-bottom: 0px;
}
.heading-sub {
padding: 130px 0 0 0;
width: 100vw;
overflow: hidden;
background-position: center;
background-size: cover;
}
.heading-sub:last-child {
margin: 0 0 20px 0;
}
.ch-sidebar {
margin:20px
}
}
.content-main>* {
grid-column: main;
grid-row: main
}
.content-head>* {
font: var(--heavy-weight) 20px var(--mon-font);
color: var(--heading-color)
}
.content-head-index {
font: var(--heavy-weight) 18px var(--mon-font);
font: var(--heavy-weight) 20px var(--mon-font);
color: var(--heading-color);
display: grid;
}
.content-head p {
margin-top: 0px;
}
.content-body ul {
list-style-type: none;
font: var(--hind-light-weight) 17px var(--mon-font);
color: var(--alt-color);
line-height: 1;
list-style-position: outside;
}
.content-body ul li {
margin-bottom: 10px;
}
.content-body ul li::before {
content: "\2022";
color: var(--clear-blue-color);
font-weight: bold;
display: inline-block;
width: 2em;
margin-left: -2em;
}
.ch-sidebar .content-body ul li::before {
content: "";
color: var(--clear-blue-color);
font-weight: bold;
display: inline-block;
width: 2em;
margin-left: -2em;
}
.ch-sidebar .content-body ul li {
line-height: 1;
}
.videoplayer {
}
.video{
float: right;
}
.playlist {
}
.float-right {
float: right !important;
}
.playlist ul li::before {
font-family: "Font Awesome 5 Free";
content: "\f144";
color: var(--clear-blue-color);
padding: 20px;
}
.playlist ul li:hover:before {
background-color: #F2F7F9;
}
.playlist ul li {
font: 20px var(--hind-font) !important;
color: var(--main-color) !important;
margin: 0px;
/*padding: 15px 0 13px 0;*/
border-bottom: 0.25px solid #E8EFF3;
}
.playlist ul li span {
float:right;
padding: 17px 15px 0 0;
}
.playlist ul li a{
font: 20px var(--hind-font) !important;
color: var(--main-color) !important;
}
.playlist li:hover {
background-color: #F2F7F9;
}
@media only screen and (min-width: 900px) {
.webinarplayer {
margin-top: 10%;
display: grid;
grid-column: 2 / span 8;
grid-template-columns: repeat(5, 1fr);
}
.webinarvideo {
display: grid;
grid-column: 1 / span 3;
}
.webinarplaylist-container {
grid-column: 4 / span 2;
padding: 40px 40px 40px 0;
margin: 0 0 0 40px;
border-radius: 10px;
background-color: white;
}
}
@media only screen and (max-width: 900px) {
.webinarplayer {
margin-top: 10%;
display: grid;
grid-column: 2 / span 8;
grid-template-columns: repeat(10, 1fr);
}
.webinarvideo {
display: grid;
grid-column: 2 / span 8;
}
.webinarplaylist-container {
grid-column: 2 / span 8;
padding: 40px 40px 40px 0;
margin: 40px 0 0 0;
border-radius: 10px;
background-color: white;
}
}
.webinarplaylist-container h3 {
padding-left: 50px;
margin: 10px 0 0 0;
font-size: 30px;
margin-bottom: 20px;
}
.webinarplaylist {
}
.webinarplaylist ul li::before {
font-family: "Font Awesome 5 Free";
content: "\f144";
color: var(--clear-blue-color);
padding: 20px;
}
.webinarplaylist ul li:hover:before {
background-color: #F2F7F9;
}
.webinarplaylist ul li {
font: 18px var(--hind-font) !important;
color: var(--main-color) !important;
margin: 0px;
padding: 15px 0;
border-bottom: 0.25px solid #E8EFF3;
list-style-type: none;
list-style-position: outside;
line-height: 1 !important;
}
.webinarplaylist ul li span {
float:right;
padding: 0px 15px 0 0;
}
.webinarplaylist ul li a{
font: 20px var(--hind-font) !important;
color: var(--main-color) !important;
}
.webinarplaylist li:hover {
background-color: #F2F7F9;
}
.content-body ul li > ul {
margin: 3px 0 15px 0;
}
.docs-container {
margin: 10% 0;
width: 50vw;
background-color: white;
border-radius: 10px;
padding: 50px;
}
.docs-container h2 {
margin: 0;
padding: 0;
}
.docs-list {
column-count: 2;
}
.docs-category {
font: var(--heavy-weight) 14px var(--mon-font);
color: var(--green-color);
passing:0;
margin: 0 0 20px 0;
text-transform: uppercase;
}
.content-body ul li > ul li {
font-style: italic;
font-size: 15px;
margin-bottom: 0px;
}
.content-body ul li > ul li::before {
content: "-";
color: var(--link-color);
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
}
.content-body-index ul {
list-style-type: none;
font: var(--hind-light-weight) 17px var(--mon-font);
color: var(--alt-color);
line-height: 1;
list-style-position: outside;
}
.content-body-index ul li {
margin-bottom: 10px;
}
.content-body-index ul li::before {
content: "\2022";
color: var(--clear-blue-color);
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
}
.content-body-index ul li > ul {
margin: 3px 0 15px 0;
}
.content-body-index ul li > ul li {
font-style: italic;
font-size: 15px;
margin-bottom: 0px;
}
.content-body-index ul li > ul li::before {
content: "-";
color: var(--link-color);
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
}
.background-gray {
padding: 5% 0 5% 0;
background: rgb(235,241,245);
background: linear-gradient(0deg, rgba(235,241,245,1) 0%, rgba(235,241,245,0) 100%);
}
.background-bright {
padding: 2% 0 2% 0;
background: #EEF2F4;
}
.background-gray h2{
max-width: 100vw;
margin: 0px;
text-align: center;
}
.blogg-promo h2 {
text-align: center;
}
.ingress p {
font: var(--light-weight) 25px var(--mon-font);
margin-bottom: 30px;
line-height: 1.25;
color: #000;
}
.TableOfContents {
list-style: none;
}
/*.content-body h2 {
padding-top: 30px;
font: var(--hind-light-weight) 30px var(--hind-font);
color: var(--heading-color);
line-height: 30px;
margin-bottom: 7px;
}*/
.social-container {
background: #E8EFF3;
border-radius: 5px;
display: inline-block;
margin: 1rem;
position: relative;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
padding: 10px;
font: var(--heavy-weight) 15px var(--hind-font);
color: var(--main-color);
text-transform: uppercase;
margin-bottom: 0px;
font-variant-numeric: normal;
}
.sociallogo {
height: 20px;
vertical-align: middle;
width: 30px;
}
.social-container:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.partner-container {
background: #FFFFFF;
border-radius: 10px;
display: inline-block;
margin: 1rem;
position: relative;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
padding: 30px;
font: var(--heavy-weight) 15px var(--hind-font);
color: var(--main-color);
text-transform: uppercase;
margin-bottom: 0px;
font-variant-numeric: normal;
}
#dark {
background: var(--alt-color);
}
.partner-container:hover {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20), 0 7px 7px rgba(0, 0, 0, 0.20);
}
.partnerlogo {
height: auto;
width: 175px;
vertical-align: middle;
}
.index-content {
display: -ms-grid;
display: grid;
grid-template-columns: [full-start] minmax(1em, 1fr)[main-start] minmax(0, 35rem)[main-end] minmax(1em, 1fr)[full-end]
}
.index-content>* {
grid-column: main
}
@media only screen and (min-width: 900px) {
.mobile {
display: none;
}
.desktop {
display: block;
}
.content-chalmers {
Background-color: #FAFEFE;
min-height: 61%;
display: -ms-grid;
display: grid;
grid-template-columns: repeat(10, 1fr);
/* grid-auto-columns: 65rem;
grid-template-columns: 1.3fr 0.7fr */
}
/*.ch-content {
display: -ms-grid;
display: grid;
grid-column: 2 / span 4;
margin: 10% 0 10% 0;
}*/
.ch-content {
display: -ms-grid;
display: grid;
grid-column: 2 / span 5;
margin: 10% 0;
}
.ch-content li {
margin: 7px 0;
line-height: 1.5;
}
.ch-content p, h2, h3, h4, li, ol {
max-width: 700px;
/*margin: 16px 10% 0 0;*/
}
.listpage {
width: 90%;
margin: 0 auto;
grid-column: 1 / span 7;
}
.ch-sidebar {
height: fit-content;
background-color: #FFF;
grid-column: 8 / span 3;
margin: 10% 10% 10% 5px;
padding: 10% 15% 10% 15%;
border-radius: 10px;
}
.webinar-side-bar {
grid-column: 1 / span 10;
padding: 10%;
background-color: var(--cloud-blue-color)
}
.event-sidebar {
height: fit-content;
background-color: #FFF;
grid-column: 7 / span 4;
margin: -15% 5% 5% 5%;
padding: 15%;
border-radius: 10px;
}
.ch-sidebar p {
font-size: 16px;
}
.event-sidebar p {
font-size: 16px;
}
.ch-sidebar h2 {
font-size: 16px;
}
.event-sidebar h2 {
font-size: 16px;
}
}
@media only screen and (min-width: 1600px) {
.site-navigation {
grid-column: 4 / span 6;
}
.heading-content {
grid-column: 2 / span 5;
}
.content-container-index {
grid-column: 3 / span 5;
bottom: 8vh;
}
.logo {
grid-column: 2;
min-width: 150px;
}
.webinar-side-bar {
padding: 5% 20%;
background-color: var(--cloud-blue-color);
height: 100%;
}
.ch-sidebar-logo {
padding: 0 0 15px;
max-width: 65px !important;
}
.toc {
margin-right: 0;
margin-left: ;
grid-column: 8 / span 2;
}
.ch-sidebar {
grid-column: 8 / span 2;
margin-right: 5%;
}
.listpage {
grid-column: 2 / span 5;
}
}
.ch-content {
grid-column: 2 / span 5;
}
.ch-sidebar p {
font-size: 16px;
}
.event-sidebar {
grid-column: 8 / span 3;
margin: 15% 0;
}
.event-sidebar p {
font-size: 16px;
}
}
.content-container-index {
position: absolute;
display: block;
}
@media only screen and (max-width: 900px) {
.content-chalmers {
background-color: #FAFEFE;
}
.ch-content {
grid-column: span all;
margin: 30px;
}
.webinar-side-bar {
padding: 10%;
background-color: var(--cloud-blue-color);
height: 100%;
}
.body {
margin: 20px auto !important;
}
.ch-sidebar p {
font-size: 16px;
}
.event-sidebar {
background-color: #FFF;
grid-column: span all;
padding: 10%;
margin: 25px;
border-radius: 10px;
}
.event-sidebar p {
font-size: 16px;
}
}
.content-heading>* {
margin: 0;
padding: 0;
font: var(--heavy-weight) 18px var(--hind-font);
color: var(--heading-color);
text-transform: uppercase;
line-height: 18px
}
.ch-content .content-heading:nth-child(n+2) {
padding: 55px 0 0
}
.ch-sidebar-logo {
padding: 0 0 15px;
max-width: 65px !important;
}
.ch-sidebar a {
color: var(--main-color);
}
.ch-sidebar a:hover {
color: var(--link-color);
}
.event-sidebar img {
padding: 0 0 15px;
width: 95px
}
.event-sidebar a {
color: var(--main-color);
}
.event-sidebar a:hover {
color: var(--link-color);
}
.kontakt-sidebar {
background-color: #FFF;
align-self: start;
display: flex;
flex-direction: column;
}
.kontakt-sidebar img {
padding: 50px 0px 0px 0px;
}
.kontakt-sidebar div:first-child>img {
padding: 0px 0px 0px 0px;
width: 95px
}
.kontakt-sidebar h2 {
padding: 0px;
}
.kontakt-sidebar .button {
color: var(--text-color)
}
#find-more {
font: var(--heavy-weight) 15px var(--mon-font);
line-height: 15px;
color: var(--text-color);
text-align: center;
background-color: var(--button-color);
border-radius: 50px;
padding: 10px 25px;
margin: 10px 0
}
#find-more:hover {
box-shadow: var(--tran-shadow);
transition: box-shadow 0.4s ease-in-out
}
#TableOfContents>* {
padding: 0px;
font-size: 15px;
list-style: none;
padding: 0px;
list-style-type: none;
list-style-position: inside;
text-decoration: none;
font: var(--normal-weight) 15px var(--mon-font);
color: var(--alt-color);
line-height: 20px;
margin-bottom: 10px;
margin-top: 10px;
font-variant-numeric: normal;
}
#TableOfContents a {
color: var(--alt-color)
}
#TableOfContents a:hover {
color: var(--link-color)
}
#TableOfContents ul {
padding: 0px;
list-style: none;
}
#TableOfContents ul ul {
padding: 0px;
list-style: none;
}
#TableOfContents ul ul ul {
padding: 0px;
list-style: none;
}
.read-more {
padding: 0;
}
.read-more h2 {
padding: 0;
font: var(--heavy-weight) 16px var(--hind-font);
color: var(--heading-color);
text-transform: uppercase;
line-height: 25px;
}
.read-more li {
font-size: 16px;
padding: 0px;
line-height: 16px;
list-style-type: '– ';
list-style-position: inside;
text-decoration: none;
}
.read-more a {
color: var(--alt-color);
font: var(--normal-weight) 15px var(--mon-font);
}
.read-more a:hover {
color: var(--link-color)
}
.kon-main {
padding-top: 96px
}
.kontakt {
display: -ms-grid;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 0.5fr 1fr;
grid-gap: 5%
}
.adr, .cont {
background-color: var(--main-color);
color: var(--text-color);
line-height: 18px;
padding: 15px;
height: auto
}
.adr h3, .cont h3 {
font: var(--heavy-weight) 18px var(--hind-font)
}
.adr p, .cont a {
font: var(--heavy-weight) 14px var(--mon-font);
color: var(--text-color)
}
.cont a:hover {
color: var(--link-color)
}
/*.form {
display: -ms-grid;
display: grid;
grid-template-columns: repeat(2, auto);
grid-template-rows: auto;
grid-gap: 5px
}
.form-text,
.form-message {
outline: none;
border: none;
resize: none;
border: 2px solid var(--alt-color);
margin: 0 0 15px;
padding: 10px 20px;
font: var(--heavy-weight) 18px var(--hind-font);
line-height: 15px;
color: var(--alt-color);
background-color: var(--text-color);
grid-column: 1 / 3
}
.form-message {
flex-grow: 2;
padding-top: 15px
}
.form button p {
margin: 0
}*/
.kun {
background-color: var(--text-color);
display: -ms-grid;
display: grid;
grid-template-columns: [full-start] minmax(2em, 1fr)[main-start] minmax(auto, 65rem)[main-end] minmax(2em, 1fr)[full-end];
grid-template-rows: [full-start] minmax(4em, 1fr)[main-start] minmax(20em, auto)[main-end] minmax(4em, 1fr)[full-end];
justify-items: center
}
.kun>* {
grid-column: main;
grid-row: main
}
.kun-top, .kun-bottom {
display: -ms-grid;
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, auto);
justify-self: center
}
.kun-top .kun-img {
background: #f9ffff url("/img/chalmers.jpg?crc=176662249") no-repeat 50% 50%;
background-size: cover;
}
.kun-bottom .kun-img {
background: #f9ffff url("/img/safespring_musikhogskolan.jpg?crc=4038356576") no-repeat 50% 50%;
background-size: cover
}
.kun-side-img {
background: #f9ffff url("/img/safespring_musikverket.jpg?crc=4018464081") no-repeat 50% 50%;
background-size: cover
}
.kun-img {
max-width: 680px;
height: 320px;
margin-bottom: 15px
}
.kun-side-img {
height: 430px;
max-width: 320px;
margin-bottom: 15px
}
.kun-container {
display: -ms-grid;
display: grid;
grid-template-columns: 680px 320px;
grid-gap: 20px
}
.kun-container .content-heading {
padding-top: 25px
}
.kun-main {
display: -ms-grid;
display: grid;
grid-gap: 20px;
justify-self: center
}
.kun-top, .kun-bottom, .kun-side {
background-color: var(--content-color)
}
.kun-bottom {
padding-bottom: 5px
}
.kun-top span, .kun-side span {
color: var(--heading-color)
}
.kun-top a {
float: right
}
.kun-top a:hover {
box-shadow: var(--tran-shadow);
transition: box-shadow 0.4s ease-in-out
}
.kun-side {
justify-self: center
}
.kun-top .content-heading, .kun-top .content-body, .kun-bottom .content-heading, .kun-bottom .content-body, .kun-side .content-heading, .kun-side .content-body {
padding: 0 20px
}
.kun-bottom, .kun-side {
padding-bottom: 20px
}
.content-om {
background-color: var(--text-color);
display: -ms-grid;
display: grid;
grid-auto-columns: 65rem;
grid-template-columns: 1.3fr 0.7fr
}
.content-om a {
text-decoration: none;
color: var(--link-color)
}
.om-content {
padding: 65px 0;
display: -ms-grid;
display: grid;
grid-template-columns: [full-start] minmax(2em, 1fr)[main-start] minmax(0, 41rem)[main-end] minmax(2em, 0.5fr)[full-end]
}
.om-content>* {
grid-column: main
}
.om-sidebar img {
width: 85px
}
#om-name {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: flex-start;
padding: 10px 0 0
}
#om-contact {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
font-size: 13px;
padding: 10px 0 0
}
#om-contact div {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: flex-start;
flex-wrap: wrap
}
#om-or {
color: var(--link-color);
margin: 0;
padding: 0 5px
}
#om-bl {
color: var(--alt-color);
margin: 0;
padding: 0 5px
}
.om-content .content-heading:nth-child(n+2) {
padding: 55px 0 0
}
.om-sidebar {
background-color: var(--content-color);
align-self: stretch;
align-content: start;
padding: 65px 0;
display: -ms-grid;
display: grid;
grid-template-columns: [full-start] minmax(1em, 0.5fr)[main-start] minmax(0, 320px)[main-end] minmax(1em, 1fr)[full-end]
}
.om-sidebar>* {
grid-column: main
}
.sup-content {
display: -ms-grid;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 25px;
}
.sup-compute, .sup-storage, .sup-backup {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
height: 100%;
}
.sup-top {
background-color: var(--content-color);
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 25px 25px 0;
border-radius: 5px 5px 0 0;
}
.sup-top img {
width: 95px
}
.sup-heading {
display: -ms-grid;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
padding: 0 24px 24px;
}
.sup-bottom {
background-color: var(--main-color);
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 25px;
min-height: 220px;
border-radius: 0 0 5px 5px;
}
.sup-heading h2 {
font: var(--heavy-weight) 24px var(--hind-font);
color: var(--main-color)
}
.sup-heading h2:last-child {
color: var(--link-color)
}
.sup-bottom a {
font: var(--heavy-weight) 17px var(--hind-font);
color: var(--text-color);
text-decoration: none
}
.sup-bottom a:hover {
color: var(--link-color)
}
#sb-title {
color: var(--button-color);
margin-top: 1px;
}
.s-main {
min-height: 61%;
background-color: var(--content-color);
display: -ms-grid;
display: grid;
grid-template-columns: 1.3fr 0.7fr
}
.s-content {
min-height: 61%;
background-color: var(--text-color);
padding: 65px 0;
display: -ms-grid;
display: grid;
grid-template-columns: [full-start] minmax(2em, 1fr)[main-start] minmax(0, 30rem)[main-end] minmax(2em, 0.5fr)[full-end]
}
.s-content>* {
grid-column: main
}
.s-content .content-heading:nth-child(n+2) {
padding: 55px 0 0
}
.content-heading {
margin: 0;
padding: 0 0 10px;
font: var(--heavy-weight) 18px var(--hind-font);
color: var(--heading-color);
line-height: 18px
}
.sb-content-bottom .content-heading {
padding: 30px 0 20px
}
.sb-grid {
display: -ms-grid;
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: repeat(3, auto);
grid-gap: 15px
}
.sb-grid div {
background-color: var(--main-color)
}
.sb-top, .sb-bottom {
grid-column: 1 / 3;
padding: 20px
}
.sb-middle {
padding: 20px
}
.sb-heading {
margin: 5px 0px 5px 0px;
font: var(--heavy-weight) 15px var(--hind-font);
color: var(--web-green-color);
text-transform: uppercase;
}
.sb-body {
font: var(--medium-weight) 13px var(--mon-font);
color: var(--text-color)
}
.sb-bottom li {
color: var(--web-green-color)
}
.sb-bottom ul {
padding-left: 20px
}
.s-sidebar {
background-color: var(--content-color);
align-self: start;
padding: 65px 0;
display: -ms-grid;
display: grid;
grid-template-columns: [full-start] minmax(1em, 0.5fr)[main-start] minmax(0, 260px)[main-end] minmax(1em, 1fr)[full-end]
}
.s-sidebar>* {
grid-column: main
}
.s-sidebar img {
padding: 0 0 15px;
width: 95px
}
.ss-box:first-child {
margin-top: 20px;
}
.ss-box {
background-color: var(--main-color);
padding: 25px
}
.ss-heading, .ss-body {
font: var(--heavy-weight) 15px var(--mon-font)
}
.ss-heading {
color: var(--web-green-color);
text-transform: uppercase;
margin: 5px 0 5px 0;
}
.ss-body {
color: var(--text-color);
font: var(--regular-weight) 15px var(--mon-font);
}
.ss-grid, .s-middle, .s-bottom {
padding-top: 35px
}
.s-top p:last-child, .ss-grid p:last-child, .s-middle p:last-child, .s-bottom p:last-child {
margin-bottom: 0
}
.ss-grid h2 {
margin-top: 0
}
.tack-content {
padding: 95px;
text-align: center;
display: -ms-grid;
display: grid;
grid-template-rows: 1fr 0.5fr;
grid-row-gap: 35px
}
.tack-heading h1 {
font: var(--extra-light-weight) 42px var(--hind-font);
color: var(--alt-color);
margin: 0
}
.tack-heading p {
font: var(--heavy-weight) 20px var(--hind-font);
color: var(--alt-color);
margin: 0
}
.ts-content {
background-color: var(--text-color);
padding: 65px 0;
display: -ms-grid;
display: grid;
grid-template-columns: 0.7fr;
grid-template-rows: repeat(2, auto)
}
.tech-intro::before {
background: var(--clear-blue-color);
content: "TECH UPDATE";
border-radius: 50px;
color: white;
font-size: 13px;
padding: 5px 13px;
font-weight: 700;
}
.blog-intro::before {
background: var(--green-color);
content: "BLOGG";
border-radius: 50px;
color: white;
font-size: 13px;
padding: 5px 13px;
font-weight: 700;
}
.note {
max-width: 600px;
background: white;
margin: 1.5625em 0;
padding: 25px 20px 15px 40px;
border-left: 10px solid var(--green-color);
border-radius: 10px;
}
.note-title {
color: var(--green-color);
font: var(--heavy-weight) 15px var(--mon-font);
text-transform: uppercase;
}
.note-title::before {
margin-right: 10px;
background: #EAFAEA;
padding: 7px 14px;
color: var(--green-color);
border-radius: 50%;
content: "!";
}
.disclaimer {
max-width: 600px;
background: white;
margin: 1.5625em 0;
padding: 25px 20px 15px 40px;
border-left: 10px solid #eed700;
border-radius: 10px;
}
.disclaimer-title {
color: #dbc500;
font: var(--heavy-weight) 15px var(--mon-font);
text-transform: uppercase;
}
.disclaimer-title::before {
margin-right: 10px;
background: #eed60038;
padding: 7px 14px;
color: #dbc500;
border-radius: 50%;
content: "!";
}
.ts-content .s-top {
grid-column: 1 / 3;
padding-bottom: 30px
}
.ts-content .content-heading:nth-child(n+2) {
padding: 55px 0 0
}
.tj-content {
display: -ms-grid;
display: grid;
grid-gap: 0px;
grid-template-columns: [full-start] minmax(0px, 1fr) [main-start] minmax(0px, 45rem) [main-end] minmax(0px, 1fr) [full-end];
}
.tj-content>* {
grid-column: main;
}
.tj-content>.tj-offers {
grid-column: 100%
}
.tj-offers {
display: -ms-grid;
display: grid;
grid-template-columns: repeat(auto, 1fr);
grid-gap: 45px;
}
.tj-backup, .tj-storage, .tj-compute {
background-color: var(--content-color);
padding: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.tj-top {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.tj-secure ol {
padding-left: 20px;
}
.tj-secure ol li {
color: var(--web-green-color);
font: var(--heavy-weight) 15px var(--mon-font);
}
.tj-secure span {
padding-left: 10px;
}
.tj-offers img {
width: 95px;
}
.tj-heading {
display: -ms-grid;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
margin: 20px 0;
}
.tj-cloud h2, .tj-secure h2 {
font-size: 18px;
}
.tj-heading h2 {
font: var(--heavy-weight) 24px var(--hind-font);
color: var(--main-color);
margin: 0;
}
.tj-heading h2:last-child {
color: var(--link-color);
}
.tj-offers p {
margin: 0;
}
.tj-button {
margin: 10px 0;
padding-top: 40px;
}
.blog-feed {
border-top: 1px solid var(--content-color);
margin-top: 60px;
padding: 60px 0 0
}
pre {
background: #EAF0F4 !important;
max-width: 700px !important;
padding: 15px !important;
border-radius: 10px 0 10px 10px !important;
line-height: 1.5 !important;
overflow: scroll !important;
margin: 0 13px 13px 0 !important;
}
pre > code {
padding: 0;
}
.blog-feed .content-heading {
text-align: center;
}
.flex-container {
display: flex !important;
flex-wrap: wrap !important;
}
.flex-content {
width: 100% !important;
}
.flex-container > div {
flex: 50%; /* or - flex: 0 50% - or - flex-basis: 50% - */
/*demo*/
}
.content-container {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: flex-start;
}
.content-container-ipad {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: flex-start
flex: 0 0 auto;
}
.content-container ul, li, a {
padding: 0;
margin: 0px;
}
.content-container-post {
padding: 50px;
margin: 10px 0;
border-radius: 3px;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: flex-start;
max-width: 700px;
}
@media only screen and (max-width: 900px) {
.content-container-index {
margin: 0px 30px;
top: 15vh;
grid-column: span 10;
}
/*.heading-index:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 100vw;
height: 100%;
background-size: cover;
background-position: center;
z-index: -1;
}*/
.content-body {
padding-top: 20px;
}
.heading-content {
grid-column: span 10;
margin: 30px;;
align-self: end;
}
.heading-content:last-child {
margin: 30px;
}
/*.ch-content {
display: -ms-grid;
display: grid;
grid-template-columns: repeat(10, 1fr);
overflow: hidden;
}*/
.ch-body {
margin: 30px;
grid-column: 2/ span 10;
}
}
.content-item {
padding: 30px;
margin: 10px 0;
border-radius: 3px;
background: var(--content-color);
}
.content-item-whitepaper {
padding: 30px;
margin: 10px 0;
border-radius: 3px;
background-size: cover;
}
.content-item-whitepaper a {
color: var(--content-color);
}
.post-heading-post {
font: var(--heavy-weight) 35px var(--hind-font);
line-height: 1;
color: #FAFEFE;
padding-bottom: 10px
}
.blogg-heading {
font: var(--heavy-weight) 35px var(--hind-font);
line-height: 1;
color: var(--main-color);
padding-bottom: 10px
}
.post-heading-firstpage {
font: var(--extra-light-weight) 4vw var(--hind-font);
max-width: 90vw;
line-height: 1;
color: #FAFEFE;
}
.post-heading-firstpage-tech {
font: var(--extra-light-weight) 3vw var(--hind-font) !important;
line-height: 1 !important;
color: var(--middle-blue-color) !important;
}
.post-heading-black {
font: var(--extra-light-weight) 4vw var(--hind-font);
max-width: 90vw;
line-height: 1;
color: var(--alt-color) !important;
}
@media only screen and (max-width: 875px) {
.post-heading-firstpage-tech {
font: var(--extra-light-weight) 40px var(--hind-font) !important;
line-height: 1.2 !important;
color: var(--middle-blue-color) !important;
}
.heading-content h1 {
font: var(--extra-light-weight) 35px var(--hind-font);
line-height: 1;
color: #FAFEFE;
}
.post-heading-firstpage {
font: var(--extra-light-weight) 35px var(--hind-font);
line-height: 1;
color: #FAFEFE;
}
}
.post-heading-whitepaper:hover {
color: var(--link-color);
transition: color 0.2s ease-in-out
}
.post-heading {
font: var(--extra-light-weight) 20px var(--hind-font);
line-height: 1;
color: var(--main-color);
padding-bottom: 10px
}
.post-heading:hover {
color: var(--link-color);
transition: color 0.2s ease-in-out
}
.content-category-publikationer {
font: var(--extra-light-weight) 14px var(--hind-font);
color: var(--main-color);
padding: 10px 0 0;
text-transform: capitalize;
}
.content-category-post {
font: var(--heavy-weight) 18px var(--mon-font);
color: var(--text-color);
padding: 10px 0 0;
text-transform: capitalize;
}
.content-category-blogg {
font: var(--heavy-weight) 13px var(--mon-font);
color: var(--green-color);
padding: 10px 0 0;
text-transform: uppercase;
}
.content-category-blogg-light {
font: var(--heavy-weight) 13px var(--mon-font);
color: var(--clear-blue-color);
padding: 10px 0 0;
text-transform: uppercase;
}
.content-category-blogg-tech {
font: var(--heavy-weight) 13px var(--mon-font);
color: var(--clear-blue-color);
padding: 10px 0 0;
text-transform: uppercase;
}
.content-category-black {
font: var(--heavy-weight) 14px var(--mon-font);
color: #32323290;
padding: 10px 0 0;
text-transform: uppercase;
}
{
font: var(--medium-weight) 18px var(--mon-font);
color: var(--text-color);
padding: 20px 0 0;
text-transform: ;
max-width: 700px;
}
.content-summary-black {
font: var(--medium-weight) 17px var(--mon-font);
color: #32323290;
padding: 20px 0 0 0;
text-transform: ;
max-width: 700px;
line-height: 25px;
}
.content-category-dokument {
font: var(--heavy-weight) 17px var(--mon-font);
color: var(--clear-blue-color);
padding: 10px 0 0;
text-transform: capitalize;
}
.content-category-event {
font: var(--heavy-weight) 14px var(--mon-font);
color: var(--web-green-color);
padding: 10px 0 0;
}
.content-summary-event {
font: var(--medium-weight) 18px var(--mon-font);
color: var(--text-color);
padding: 10px 0 0;
text-transform: ;
}
.content-summary-blogg {
font: var(--medium-weight) 18px var(--mon-font);
color: var(--text-color);
padding: 10px 0 0;
text-transform: ;
max-width: 700px;
}
.content-category-whitepaper {
font: var(--heavy-weight) 14px var(--mon-font);
color: var(--link-color);
padding: 10px 0 0;
text-transform: uppercase;
}
.content-meta {
font: var(--heavy-weight) 14px var(--hind-font);
color: var(--main-color);
padding: 10px 0 0;
text-transform: capitalize
}
.content-meta-post {
font: var(--medium-weight) 13px var(--mon-font);
color: #FAFEFE;
padding: 10px 0 0;
letter-spacing: 2px;
text-transform: uppercase;
}
.content-meta-post-tech {
font: var(--medium-weight) 13px var(--mon-font);
color: #888888;
padding: 10px 0 0;
letter-spacing: 1px;
text-transform: uppercase;
}
.blogg-meta {
font: var(--heavy-weight) 14px var(--mon-font);
color: var(--web-green-color);
margin-bottom: 15px;
letter-spacing: 2px;
text-transform: uppercase;
}
.headless {
padding-top: 96px
}
.single-heading {
text-align: center;
font-size: 24px
}
.pris-container {
display: -ms-grid;
display: grid;
grid-template-columns: repeat(3, auto);
grid-gap: 20px
}
#toggle-sb, #toggle-ss, #toggle-sc {
grid-column: 1 / 4
}
.pris-main {
display: -ms-grid;
display: grid;
grid-template-rows: repeat(2, auto);
grid-gap: 30px
}
.pris-content #button {
max-height: 16px
}
.pris-content {
display: -ms-grid;
display: grid;
grid-template-columns: repeat(3, auto);
grid-template-rows: repeat(2, auto);
grid-gap: 20px;
padding: 20px;
background-color: var(--content-color);
margin: 0 0 25px
}
.pris-top, .pris-heading, .pris-column-cell, .pris-center-cell {
grid-column: 1 / 4
}
.pris-content h2 {
padding: 0
}
.pris-top span {
color: #3f81b3
}
.pris-heading {
font: var(--heavy-weight) 14px var(--hind-font);
color: var(--text-color);
background-color: var(--heading-color);
padding: 10px
}
.pris-meta {
font: var(--normal-weight) 12px var(--mon-font);
color: rgb(167, 164, 164)
}
.pris-data {
font: var(--normal-weight) 22px var(--hind-font);
color: var(--web-green-color);
text-transform: uppercase
}
.pris-column {
display: -ms-grid;
display: grid;
grid-template-rows: repeat(3, auto);
grid-gap: 5px
}
.pris-column>* {
text-align: center
}
.pris-column-cell {
padding: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-around
}
.pris-column-cell:last-child {
background-color: var(--main-color)
}
.toggle-sc-content {
display: -ms-grid;
display: grid;
grid-template-columns: repeat(6, auto);
grid-column-gap: 20px
}
#toggle-t, #toggle-s, #toggle-m, #toggle-l, #toggle-x, #toggle-xx {
grid-column: 1 / 7;
grid-gap: 30px
}
.pris-center-cell {
display: -ms-grid;
display: grid;
grid-template-columns: repeat(2, auto);
grid-gap: 20px
}
.pris-center-cell p {
background-color: var(--text-color);
text-align: center;
padding: 20px
}
label {
cursor: pointer;
}
#checkbox-sb, #checkbox-ss, #checkbox-sc, #checkbox-t, #checkbox-s, #checkbox-m, #checkbox-l, #checkbox-x, #checkbox-xx, #checkbox-t:not(:checked)~#toggle-t, #checkbox-s:not(:checked)~#toggle-s, #checkbox-m:not(:checked)~#toggle-m, #checkbox-l:not(:checked)~#toggle-l, #checkbox-x:not(:checked)~#toggle-x, #checkbox-xx:not(:checked)~#toggle-xx, #checkbox-sb:not(:checked)~#toggle-sb, #checkbox-ss:not(:checked)~#toggle-ss, #checkbox-sc:not(:checked)~#toggle-sc {
clip: rect(0 0 0 0);
position: absolute
}
#toggle-sc .desk-button {
display: block
}
#toggle-sc .mobile-button {
display: none
}
.h-container {
display: -ms-grid;
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-content: center;
}
.h-logo {
grid-column: 1;
padding: 8px 0 0 16px;
}
.hamburger {
grid-column: 2;
z-index: 120;
padding: 8px 16px 0 0;
justify-self: end
}
.h-logo img {
max-width: 155px;
color: var(--text-color);
}
.hamburger div {
position: relative;
width: 40px;
height: 3px;
border-radius: 4px;
background-color: var(--text-color);
margin-top: 7px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out
}
#toggle {
display: none
}
#toggle:checked+.hamburger .top {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
margin-top: 13.5px;
}
#toggle:checked+.hamburger .meat {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: -3px
}
#toggle:checked+.hamburger .bottom {
-webkit-transform: scale(0);
transform: scale(0)
}
.h-menu {
grid-column: 1 / span 10;
background: var(--alt-color);
margin: 10px 0px 0px -8px;
display: -ms-grid;
display: grid;
grid-row-gap: 15px;
padding: 15px 0;
list-style: none;
clear: both;
width: auto;
visibility: hidden;
z-index: 110;
}
.h-menu>li.menu-item {
padding: 0px 0px 0px 0px;
}
.h-menu ul {
padding: 0px 0px 0px 25px;
}
.sub-menu:last-child {
padding-bottom: 30px;
}
.sub-menu:first-child {
padding-top: 10px;
}
#toggle:checked~.h-menu {
visibility: visible;
transition: visibility 0.7s ease-in-out;
}
@media only screen and (max-device-width: 1024px) {
.kun-container {
display: -ms-grid;
display: grid;
grid-template-columns: minmax(auto, 680px);
grid-template-rows: repeat(3, auto);
grid-gap: 20px;
justify-items: center
}
.kun-img {
max-width: 680px;
height: 220px;
margin-bottom: 15px
}
.kun-side-img {
max-width: 680px;
height: 220px;
margin-bottom: 15px
}
}
@media only screen and (max-width: 1150px) {
.navbar {
display: none
}
form, input {
width: 90%;
margin: auto;
}
.form {
width: auto;
margin: 8px auto;
}
.tooltiptext {
visibility: visible;0
width: 100%;
position: relative;
margin: auto;
}
#h-bar {
font: var(--heavy-weight) 25px var(--hind-font);
display: -ms-grid;
display: grid;
grid-template-rows: [full-start] minmax(16px, 1fr)[main-start] minmax(0, 50px)[main-end] minmax(16px, 1fr)[full-end];
background: var(--main-color);
padding: 0;
top: 0;
transition: top 0.3s;
z-index: 100;
position: fixed;
box-shadow: var(--tran-shadow);
width: 100%;
}
#h-bar .sub-menu {
font: var(--normal-weight) 16px var(--mon-font);
padding-left: 0px;
}
#h-bar>* {
grid-row: main
}
#toggle-sc .desk-button {
display: none
}
#toggle-sc .mobile-button {
display: block
}
.sup-content {
display: -ms-grid;
display: grid;
grid-template-columns: auto;
grid-gap: 25px;
width: 100%
}
.sup-bottom {
align-items: center
}
.tack-content {
padding: 80px 0
}
.tj-offers {
display: -ms-grid;
display: grid;
grid-template-columns: auto;
grid-template-rows: repeat(3, auto);
grid-gap: 25px
}
.tj-backup, .tj-storage, .tj-compute {}
.tj-cloud, .tj-secure {
grid-column: full
}
}
@media only screen and (max-device-width: 750px) {
.footer {
display: -ms-grid;
display: grid;
grid-template-columns: auto;
grid-template-rows: repeat(3, auto);
grid-gap: 25px
}
.contact, .navigation, .copyright {
grid-column: unset;
justify-self: center;
}
.address {
padding-right: 24.5px
}
.about {
padding-right: 34px
}
.email {
margin-left: 0px
}
.content-om {
background-color: var(--text-color);
display: -ms-grid;
display: grid;
grid-template-columns: auto;
grid-template-rows: 1fr auto
}
.om-sidebar {
display: -ms-grid;
display: grid;
padding: 35px 0;
grid-template-columns: [full-start] minmax(1em, 1fr)[main-start] minmax(0, 320px)[main-end] minmax(1em, 1fr)[full-end]
}
}
@media only screen and (max-device-width: 650px) {
.kontakt {
display: -ms-grid;
display: grid;
grid-template-columns: auto;
grid-template-rows: repeat(2, 0.5fr) repeat(2, 1fr);
grid-gap: 2%
}
#kun-body {
display: none
}
.toggle-sc-content {
grid-column-gap: 10px
}
.pris-content {
display: -ms-grid;
display: grid;
grid-template-columns: auto;
grid-template-rows: repeat(5, auto)
}
.pris-top, .pris-heading, .pris-column-cell, .pris-center-cell {
grid-column: unset
}
.pris-center-cell {
grid-template-columns: auto
}
}
@media only screen and (max-width: 550px) {
/ .content-chalmers {
display: -ms-grid;
display: grid;
grid-template-columns: auto;
grid-template-rows: repeat(2, auto)
}
/*.ch-sidebar {
display: -ms-grid;
display: grid;
grid-template-columns: [full-start] minmax(1em, 1fr)[main-start] minmax(0, 300px)[main-end] minmax(1em, 1fr)[full-end]
}*/
.pris-container {
display: -ms-grid;
display: grid;
grid-template-columns: auto minmax(200px, 45rem) auto;
grid-gap: 20px
}
#toggle-sb, #toggle-ss, #toggle-sc {
grid-column: 1 / 4
}
.main-button {
grid-column: 2/2
}
.toggle-sc-content {
display: -ms-grid;
display: grid;
grid-template-columns: repeat(2, auto);
grid-template-rows: repeat(7, auto)
}
#toggle-t, #toggle-s, #toggle-m, #toggle-l, #toggle-x, #toggle-xx {
grid-column: 1/3;
grid-gap: 30px
}
.tj-heading {
display: -ms-grid;
display: grid;
grid-template-columns: auto;
grid-template-rows: repeat(2, auto);
grid-gap: 5px
}
.s-main {
background-color: var(--content-color);
display: -ms-grid;
display: grid;
grid-template-columns: auto;
grid-template-rows: repeat(2, auto);
width: 100%
}
.s-sidebar {
display: -ms-grid;
display: grid;
grid-template-columns: [full-start] minmax(1em, auto)[main-start] minmax(0, 260px)[main-end] minmax(1em, auto)[full-end]
}
.s-sidebar>* {
grid-column: main
}
.ts-content {
display: -ms-grid;
display: grid;
grid-template-columns: auto;
grid-template-rows: repeat(2, auto);
padding-bottom: 0
}
.ts-content .s-top {
grid-column: unset
}
#button {
font: var(--heavy-weight) 13px var(--mon-font)
}
.content-head {
font: var(--heavy-weight) 18px var(--mon-font)
}
.content-body {
font: var(--normal-weight) 14px var(--mon-font)
}
.content-heading {
font: var(--heavy-weight) 16px var(--hind-font)
}
.content-heading h2 {
font: var(--heavy-weight) 16px var(--hind-font)
}
.navbar {
font: var(--heavy-weight) 15px var(--hind-font) !important;
}
.footer-head {
font: var(--heavy-weight) 13px var(--hind-font)
}
.footer-text {
font: var(--normal-weight) 13px var(--mon-font)
}
.adr h3, .cont h3 {
font: var(--heavy-weight) 16px var(--hind-font)
}
.adr p, .cont a {
font: var(--normal-weight) 14px var(--mon-font)
}
.form-text, .form-message {
font: var(--heavy-weight) 16px var(--hind-font)
}
.sup-bottom a {
font: var(--heavy-weight) 15px var(--hind-font)
}
.sb-heading {
font: var(--heavy-weight) 14px var(--hind-font)
}
.ss-heading, .ss-body {
font: var(--normal-weight) 14px var(--mon-font)
}
.tack-heading h1 {
font: var(--extra-light-weight) 35px var(--hind-font)
}
.tack-heading p {
font: var(--heavy-weight) 18px var(--hind-font)
}
.tj-secure ol li {
font: var(--normal-weight) 14px var(--mon-font)
}
.pris-heading {
font: var(--heavy-weight) 14px var(--hind-font)
}
}
ol {
list-style: none;
counter-reset: safespring-list;
padding-left: 32px;
}
ol li {
counter-increment: safespring-list;
border-top: solid #CDDEE7 .25px;
padding: 10px 0 3px 0;
}
ol li:before {
content: counters(safespring-list, '.') ' ';
color: var(--clear-blue-color);
font-weight: 700;
display: inline-block;
width: 1em;
margin-left: -1.5em;
margin-right: 0.5em;
text-align: right;
direction: rtl;
}
/* CARD */
.body {
margin: 10px;
padding: 0;
font-size: 16px;
line-height: 1.5;
text-rendering: optimizeLegibility;
font-variant-ligatures: none;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
background-color: #FFFFFF;
overflow: hidden;
border-radius: 10px;
max-width: 350px;
}
.body * {
box-sizing: inherit;
}
@media only screen and (max-device-width: 750px) {
}
h1 {
margin: 0;
padding: 0;
}
.body, .text-light-black {
color: rgba(50, 50, 50, 0.8);
}
.text-black {
color: var(--main-color);
}
.text-muted {
color: #32CD32;
}
.text-uppercase {
text-transform: uppercase;
}
.ff-serif {
font-family: 'Hind', san-serif;
}
.font-weight-normal {
font-weight: 400;
}
.font-weight-medium {
font-weight: 600;
}
.font-weight-light {
font-weight: 300;
}
.lts-1px {
letter-spacing: 1px;
}
.lts-2px {
letter-spacing: 2px;
}
.w-full {
width: 100%;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.d-block {
display: block;
}
.d-inline-block {
display: inline-block;
}
.p-relative {
position: relative;
}
.p-absolute {
position: absolute
}
.bg-white {
background-color: #fff;
}
.extra-small {
font-size: .7rem;
padding-top: 4px;
}
.small {
font-size: 1rem;
}
.big {
font-weight: var(--extra-light-weight);
font-size: 1.5rem;
}
.blogg-card-title {
font-size: 30px;
}
.blogg-card-link {
padding: 0 50px 50px 50px;
}
.webinar-card-link {
margin: 0 50px 50px 50px;
background-color: var(--button-color);
border-radius: 50px;
padding: 10px 25px 8px 25px;
text-align: center;
font: var(--heavy-weight) 16px var(--hind-font);
color: var(--text-color);
text-transform: uppercase;
white-space: nowrap;
}
.blogg-card-image {
flex-shrink: 0;
min-width: 100%;
min-height: 100%
}
.-container {
height: 200px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden
}
.blogg-card-text-container {
padding: 50px 50px 10px 50px;
}
.blogg-card-text-container-no-image {
padding: 50px 50px 10px 50px;
margin-top: -150px
}
.blogg-card-section {
font-size: 13px;
margin-right: 5px;
margin-top: 3px;
font-weight: 600;
}
.blogg-card-section-tech {
color: #3C9BCD;
font-size: 13px;
margin-right: 5px;
margin-top: 3px;
font-weight: 600;
}
.blogg-card-section-webinar {
color: #FA690F;
font-size: 13px;
margin-right: 5px;
margin-top: 3px;
font-weight: 600;
}
.blogg-card-section-whitepaper {
color: #323232;
font-size: 13px;
margin-right: 5px;
margin-top: 3px;
font-weight: 600;
}
.blogg-card-date {
font-size: 13px;
margin-right: 5px;
margin-top: 3px;
font-weight: 400;
color: #888888;
}
.bg-blue-white-fade {
background-image: linear-gradient(200deg, #E8EFF3, #E8EFF300 80%)
}
.card-heading {
font-size: 2.25rem;
line-height: 1 !important;
hyphens: manual;
}
.styled-link {
text-decoration: none;
outline: none;
color: var(--link-color);
transition: all 0.25s ease-in;
}
.styled-link:hover, .styled-link:focus, .styled-link:active {
color: var(--main-color);
}
.shadow-1 {
/*box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);*/
box-shadow: 2px 3px 9px 0 rgba(0, 0, 0, 0.10)
}
.blue-hover {
transition: all 0.2s ease-in;
border-bottom: 5px solid transparent;
}
.blue-hover:hover {
transform: translateY(-5px);
mar border: none;
border-bottom: 5px solid #195F8C;
}
.blue-hover-tech {
transition: all 0.2s ease-in;
border-bottom: 5px solid white;
}
.blue-hover-tech:hover {
transform: translateY(-5px);
mar border: none;
border-bottom: 5px solid #3C9BCD;
}
.blue-hover-blogg:hover {
transform: translateY(-5px);
mar border: none;
border-bottom: 5px solid #32CD32;
}
.blue-hover-blogg {
transition: all 0.2s ease-in;
border-bottom: 5px solid white;
}
.blue-hover-webinar:hover {
transform: translateY(-5px);
mar border: none;
border-bottom: 5px solid #FA690F;
}
.blue-hover-webinar {
transition: all 0.2s ease-in;
border-bottom: 5px solid white;
}
.blue-hover-whitepaper:hover {
transform: translateY(-5px);
mar border: none;
border-bottom: 5px solid #323232;
}
.blue-hover-whitepaper {
transition: all 0.2s ease-in;
border-bottom: 5px solid white;
}
.clearfix::before, .clearfix::after {
content: "";
display: table;
clear: both;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
/**Margin and padding utilities*/
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.ml-auto {
margin-left: auto;
}
.mr-auto {
margin-right: auto;
}
.mx-0 {
margin-left: 0;
margin-right: 0;
}
.mx-1 {
margin-left: 1rem;
margin-right: 1rem;
}
.mx-2 {
margin-left: 2rem;
margin-right: 2rem;
}
.mx-3 {
margin-left: 3rem;
margin-right: 3rem;
}
.my-0 {
margin-top: 0;
margin-bottom: 0;
}
.my-10 {
margin-top: 10px !important;
margin-bottom: 10px !important;
}
.my-1 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.my-2 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.my-3 {
margin-top: 3rem;
margin-bottom: 3rem;
}
.justify-center {
justify-content: center;
}
.mt-0 {
margin-top: 0;
}
.mt-1 {
margin-top: 1rem;
}
.mt-2 {
margin-top: 2rem;
}
.mt-3 {
margin-top: 3rem;
}
.mb-0 {
margin-bottom: 0;
}
.mb-1 {
margin-bottom: 1rem;
}
.mb-2 {
margin-bottom: 2rem;
}
.mb-3 {
margin-bottom: 3rem;
}
.mb-4 {
margin-bottom: 4rem;
}
.ml-0 {
margin-left: 0;
}
.ml-1 {
margin-left: 1rem;
}
.ml-2 {
margin-left: 2rem;
}
.ml-3 {
margin-left: 3rem;
}
.px-0 {
padding-left: 0;
padding-right: 0;
}
.px-1 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-2 {
padding-left: 2rem;
padding-right: 2rem;
}
.px-3 {
padding-left: 3rem;
padding-right: 3rem;
}
.py-0 {
padding-top: 0;
padding-bottom: 0;
}
.py-1 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-2 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.py-3 {
padding-top: 3rem;
padding-bottom: 3rem;
}
.pt-0 {
padding-top: 0;
}
.pt-1 {
padding-top: 1rem;
}
.pt-2 {
padding-top: 2rem;
}
.pt-3 {
padding-top: 3rem;
}
.pb-0 {
padding-bottom: 0;
}
.pb-1 {
padding-bottom: 1rem;
}
.pb-2 {
padding-bottom: 2rem;
}
.pb-3 {
padding-bottom: 3rem;
}
.flexcontainer-start {
margin: 3% auto;
display: flex;
align-items: top;
justify-content: center;
flex-flow: row wrap;
align-content: space-between;
}
.flexcontainer {
margin: 5% auto;
display: flex;
justify-content: center;
flex-flow: row wrap;
}
.flexcontainer-shortcode {
margin: 5% auto;
display: flex;
align-items: top;
justify-content: right;
flex-flow: row wrap;
align-content: space-between;
}
/* END - CARD */
/* PRICE TABLE */
.container-table100 {
display: grid;
grid-column: 3 / span 6;
}
@media screen and (max-width: 1600px) {
.container-table100 {
display: grid;
grid-column: 2 / span 8;
}
}
@media screen and (max-width: 900px) {
.container-table100 {
display: grid;
grid-column: span 10;
margin: 0 16px 0 16px
}
}
.container-table-wp {
display: grid;
grid-column: 1 / span 7;
}
@media screen and (max-width: 1600px) {
.container-table-wp {
display: grid;
grid-column: 1 / span 8;
}
}
@media screen and (max-width: 900px) {
.container-table-wp {
display: grid;
grid-column: span 10;
margin: 0 16px 0 16px
}
}
.price-table {
border-radius: 5px;
overflow: hidden;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
}
.table {
width: 100%;
display: table;
border-radius: 5px;
margin: 0;
}
@media screen and (max-width: 600px) {
.table {
display: block;
}
}
.row {
display: table-row;
background: #fff;
}
.row.header {
color: #fafefe;
background: #195F8C;
}
.row.header:hover {
background-color: #417DA5;
}
@media screen and (max-width: 600px) {
.row {
display: block;
}
.row.header {
padding: 0;
height: 0px;
}
.row.header .cell {
display: none;
}
.row .cell:before {
font-family: var(--hind-font);
font-size: 13px;
color: #195F8C;
line-height: 1.2;
text-transform: uppercase;
font-weight: 600 !important;
margin-bottom: 13px;
content: attr(data-title);
min-width: 98px;
display: block;
}
}
.cell {
display: table-cell;
}
@media screen and (max-width: 600px) {
.cell {
display: block;
}
}
.row .cell {
font-family: var(--mon-font);
font-size: 15px;
color: #666666;
line-height: 1.2;
font-weight: unset !important;
padding-top: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #f2f2f2;
}
.row:last-of-type .cell {
border-bottom: 0px solid #fff;
padding-bottom: 16px;
}
.row.header .cell {
font-family: var(--hind-font);
font-size: 18px;
color: #fafefe;
background: #195F8C;
line-height: 1.2;
font-weight: unset !important;
padding-top: 21px;
padding-bottom: 17px;
}
.row .cell:nth-child(1) {
width: 150px;
padding-left: 40px;
}
.row .cell:nth-child(2) {
width: 150px;
padding-right: 10px;
}
.row .cell:nth-child(3) {
width: 150px;
margin-right: 10px;
}
.row .cell:nth-child(4) {
width: 80px;
}
.row .cell:nth-child(5) {
width: 150px;
}
.row .cell:nth-child(6) {
width: 150px;
}
.row .cell:nth-child(7) {
width: 150px;
}
.table, .row {
width: 100% !important;
}
.row:hover {
background-color: #E3EEF2;
}
@media (max-width: 600px) {
.row {
border-bottom: 1px solid #f2f2f2;
padding-bottom: 16px;
padding-top: 30px;
padding-right: 16px;
margin: 0;
}
.row .cell {
border: none;
padding: 16px 30px;
}
.row .cell:nth-child(1) {
padding-left: 30px;
}
.row .cell {
font-family: var(--mon-font);
font-size: 18px;
color: #555555;
line-height: 1.2;
font-weight: unset !important;
}
.table, .row, .cell {
width: 100% !important;
}
}
.hide{
display: none;
}
/* MOBILE CITAT */
.citatbody {
margin: 20px;
padding: 0;
font-size: 16px;
line-height: 1.5;
text-rendering: optimizeLegibility;
font-variant-ligatures: none;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
background-color: #fafafa;
overflow: hidden;
border-radius: 5px;
width: 340px;
}
.citattext p {
font: var(--light-weight) 25px var(--mon-font);
font-style: italic;
margin-bottom: 25px;
line-height: 1.25;
color: #323232;
}
.citatcompanylogo {
width: 70%;
margin-bottom: 20px;
}
.citatpersonbildperson {
height: 300px;
overflow: hidden;
}
.citatpersonbildperson img {
width: 100%;
}
.citatperson {
}
.citatperson p {
margin: 0;
}
/* END - MOBILE CITAT */
/* TOGGLE */
.toggle, .toggler {
display: inline-block;
vertical-align: middle;
}
.toggler {
color: #666;
transition: .2s;
font: var(--normal-weight) 17px var(--hind-font);
}
.toggler--is-active {
color: var(--link-color);
}
.b {
display: block;
}
.toggle {
position: relative;
width: 54px;
height: 25px;
border-radius: 100px;
background-color: var(--main-color);
overflow: hidden;
box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.05);
margin: 10px;
}
.check {
position: absolute;
display: block;
cursor: pointer;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 6;
}
.check:checked ~ .switch {
right: 2px;
left: 57.5%;
transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-property: left, right;
transition-delay: .08s, 0s;
}
.switch {
position: absolute;
left: 2px;
top: 2px;
bottom: 2px;
right: 57.5%;
background-color: #fff;
border-radius: 36px;
z-index: 1;
transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-property: left, right;
transition-delay: 0s, .08s;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/* END PRICE TABLE */
/* SUPPORT LIST */
.support-list ul {
margin-left: 10px;
padding-left: 20px;
border-left: 1px dashed #ddd;
}
.support-list li {
list-style: none;
color: #757575;
font-size: 16px;
font-weight: normal;
}
.support-list a {
border-bottom: 1px solid transparent;
color: #757575;
text-decoration: none;
transition: all 0.2s ease;
}
.support-list a:hover {
border-color: #FA690F;
color: #FA690F;
}
.support-list .folder,
.support-list .folder > a {
color: #757575;
font: var(--heavy-weight) 17px var(--hind-font);
}
/* The icons
-------------------------------------------------------------- */
.support-list li:before {
margin-right: 10px;
content: "";
height: 20px;
vertical-align: middle;
width: 20px;
background-repeat: no-repeat;
display: inline-block;
/* file icon by default */
background-image: url("data:image/svg+xml;utf8,");
background-position: center 2px;
background-size: 60% auto;
}
.support-list li.folder:before {
/* folder icon if folder class is specified */
background-image: url("data:image/svg+xml;utf8,");
background-position: center top;
background-size: 75% auto;
}
/* END - SUPPORT LIST */
/* FORM TOOL TIP */
.tooltip {
position: relative;
display: inline-block;
float: right;
color: #FA690F;
font-size: 21px;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: #FFF;
color: #195F8C;
text-align: left;
border-radius: 6px;
padding: 16px;
position: absolute;
z-index: 1;
top: -16px;
left: 160%;
font-family: var(--mon-font);
font-size: 16px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent #FFF transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
/* END - FORM TOOL TIP */
.ipad-form-tack {
width: 100vw;
display: flex;
position: absolute;
justify-content: center;
align-items: center;
z-index: 10;
}
.ipad-form-start {
/*height: 100vh;
width: 100vw;*/
display: flex;
/*position: absolute;*/
justify-content: center;
align-items: center;
-webkit-overflow-scrolling: touch;
z-index: 10;
}
.ipad-form-start:first-child {
padding-top: 15%;
}
.ipad-form {
float: left;
width: 40vw;
padding: 10vw;
margin-left: 40vw;
}
.ipad-form .form {
padding: 5px 24px;
}
.ipad-form-tack h1 {
font: 300 65px/70px var(--hind-font);
color: var(--text-color);
text-align: center;
position: absolute;
top: 40vh;
}
.ipad-form-start h1 {
position: absolute;
font: 300 55px/70px var(--hind-font);
color: var(--text-color);
text-align: center;
max-width: 100vw;
top: 16vw;
}
.ipad-form h1 {
font: 300 35px/40px var(--hind-font);
color: var(--clear-blue-color);
margin: 0;
}
.ipad-form h2 {
font: 300 25px/40px var(--hind-font);
color: var(--clear-blue-color);
margin: 0;
}
.ipad-section-tack {
position: absolute;
font: var(--heavy-weight) 30px/20px var(--mon-font);
color: var(--web-green-color);
text-transform: uppercase;
text-align: center;
top: 33vh;
}
.ipad-section {
font: var(--heavy-weight) 16px/5px var(--mon-font);
color: var(--web-green-color);
text-transform: uppercase;
}
.ipad-image-tack {
height: 100vh;
width: 100vw;
float: left;
display: flex;
position: absolute;
justify-content: center;
align-items: center;
position: fixed;
}
.ipad-image-start {
height: 100%;
width: 100%;
float: left;
display: flex;
position: absolute;
justify-content: center;
align-items: center;
position: fixed;
}
.ipad-image {
height: 110vh;
width: 40vw;
float: left;
display: flex;
position: fixed;
justify-content: center;
align-items: center;
}
.ipad-image-tack img {
position: absolute;
margin: 0 auto 0 auto;
width: 20vw;
top: 10vh;
}
.ipad-image img {
position: absolute;
margin: 0 auto 0 auto;
width: 20vw;
top: 10vw;
}
.ipad-image-start img {
position: absolute;
margin: 0 auto 0 auto;
width: 20vw;
top: 6vw;
}
.button-white-border {
position: absolute;
text-align: center;
border-radius: 50px;
background-color: transparent;
border: 2.5px solid #FAFEFE;
padding: 15px 30px 13px 30px;
bottom: 10vw;
text-align: center;
font: var(--heavy-weight) 18px var(--hind-font);
color: var(--text-color);
text-transform: uppercase;
white-space: nowrap;
}
.orange {
color: var(--link-color);
}
.ipad-button {
position: absolute;
text-align: center;
border-radius: 50px;
background-color: var(--link-color);
padding: 15px 30px 13px 30px;
text-align: center;
font: var(--heavy-weight) 18px var(--hind-font);
color: var(--text-color);
text-transform: uppercase;
bottom: 10vh;
}
.flexcontainer-ipad {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
&::-webkit-scrollbar {
display: none;
}
}
.flexcontainer-ipad h3 {
font: 300 28px/1.2 var(--hind-font) !important;
color: var(--blue-color);
margin: 0;
}
/* UTBILDNING */
.accordion-box {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
max-width: 700px;
width: 99%;
margin-bottom: 10px;
border-radius: 10px;
}
.accordion {
background-color: #E9F2F6;
color: #195f8c !important;
cursor: pointer !important;
padding: 18px 18px 14px 18px !important;
width: 100%;
height: 100%;
border: none !important;
text-align: left !important;
outline: none !important;
transition: 0.4s !important;
font: 300 16px/1.2 var(--hind-font) !important;
border-radius: 10px;
text-transform: none;
}
.active-utbildning {
border-radius: 5px 5px 0 0;
}
.accordion:after {
content: '\002B' !important;
color: #19F064 !important;
font-weight: bold !important;
float: left !important;
margin-right: 15px !important;
}
.active-utbildning:after {
content: "\2212" !important;
color: #FA690F !important;
border-radius: 5px 5px 0 0;
}
.panel {
padding: 0 46px !important;
background-color: white !important;
max-height: 0;
overflow: hidden !important;
transition: max-height 0.2s ease-out !important;
border-radius: 10px;
}
.panel p:first-child {
padding-top: 20px;
}
/* END - UTBILDNING */
.label-green {
float: left;
width: fit-content;
position: relative;
padding: 7px;
margin: 14px 10px 0 0;
background: var(--green-color);
border-radius: 5px;
color: var(--content-color);
font: 600 12px var(--mon-font);
}
.label-orange {
float: left;
width: fit-content;
position: relative;
padding: 7px;
margin: 14px 10px 0 0;
background: var(--link-color);
border-radius: 5px;
color: var(--content-color);
font: 600 12px var(--mon-font);
}
.label-blue {
float: left;
width: fit-content;
position: relative;
padding: 7px;
margin: 14px 10px 0 0;
background: var(--main-color);
border-radius: 5px;
color: var(--content-color);
font: 600 12px var(--mon-font);
}
/* START - LANGUAGE PICKER SITE */
.start-container {
display: flex;
height: 100vh;
width: 100vw;
}
.start-image {
float: left;
height: 90vh;
width: 30vw;
margin: 5vh 0 5vh 0;
overflow: hidden;
}
.start-image img {
width: auto;
height: 100%
}
.start-logo {
max-width: 300px;
min-width: 150px;
width: 15vw;
}
.start-content {
align-items: center;
margin: auto 0;
padding: 0 100px;
}
.start-content h1 {
font: 100 60px var(--mon-font);
color: #323232;
margin: 60px 0;
max-width: none; !important;
}
/* Citat */
.citatbody {
margin: 20px;
padding: 0;
font-size: 16px;
line-height: 1.5;
text-rendering: optimizeLegibility;
font-variant-ligatures: none;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
background-color: #fafafa;
overflow: hidden;
border-radius: 5px;
width: 100%;
}
.citattext p {
font: var(--light-weight) 25px var(--mon-font);
font-style: italic;
margin-bottom: 25px;
line-height: 1.25;
color: #323232;
}
.citatcompanylogo {
width: 30%;
margin-bottom: 20px;
}
.citatpersonbildperson {
height: 300px;
overflow: hidden;
}
.citatpersonbildperson img {
width: 100%;
}
.citatperson {
}
.citatperson p {
margin: 0;
}
.iframe-aspect-ratio {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* The height of the item will now be 56.25% of the width. */
}
.iframe-aspect-ratio iframe {
position: absolute;
border-radius: 10px;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.video-list {
height: 85px;
}
.video-list p {
font-family: var(--hind-font);
color: var(--clear-blue-color);
}
.video-list img {
float: left;
margin-right: 10px;
border-radius: 5px;
width: 100px;
}
.toplogo {
width: 200px
}
/* Photo roll */
/* Photo Banner */
.photo-roll--container {
max-width: 700px;
height: 150px;
overflow: hidden;
border-radius: 5px;
}
.photo-roll {
height: 150px;
width: 200%;
margin-bottom: 5px;
font-size: 0;
}
.photo-roll img {
margin-bottom: 10px;
margin-right: 5px;
height: 150px;
width: 300px;
transition: all 0.5s ease;
}
.photo-roll img:first-child {
-webkit-animation: bannermove 112s linear infinite;
animation: bannermove 112s linear infinite;
}
/* Keyframe animations*/
@-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -8520px;
}
}
@keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -8520px;
}
}
/* END Photo roll */
/* Photo roll2 */
/* Photo Banner */
.photo-roll--container2 {
width: 99.5vw;
height: 150px;
overflow: hidden;
margin: 5px auto 0 auto;
border-radius: 5px;
}
.photo-roll2 {
height: 150px;
width: 200%;
margin-bottom: 5px;
font-size: 0;
}
.photo-roll2 img {
border-radius: 5px;
margin-bottom: 10px;
margin-right: 5px;
height: 150px;
width: 300px;
transition: all 0.5s ease;
}
.photo-roll2 img:first-child {
-webkit-animation: bannermove2 120s linear infinite;
animation: bannermove2 120s linear infinite;
}
/* Keyframe animations*/
@-webkit-keyframes "bannermove2" {
0% {
margin-left: 0px;
}
100% {
margin-left: -8520px;
}
}
@keyframes "bannermove2" {
0% {
margin-left: 0px;
}
100% {
margin-left: -8520px;
}
}
/* END Photo roll2 */
/* HORISONTAL CARD */
@media screen and (min-width: 1500px) {
.safespring-horisontal-card-image {
max-width: 30% !important;
}
.safespring-horisontal-card-container {
width: 80%;
}
}
@media screen and (min-width: 900px) {
.safespring-horisontal-card-container {
border-radius: 5px;
width: 100%;
}
.safespring-horisontal-card-col {
flex: 1; /* additionally, equal width */
}
.safespring-horisontal-card-container {
width: 100% !important;
}
.safespring-horisontal-card-row {
display: flex; /* equal height of the children */
}
.safespring-horisontal-card-image {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
float: left;
max-width: 50%;
}
.safespring-horisontal-card-image img{
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
border-radius: 5px 0 0 5px;
object-fit: cover;
}
.safespring-horisontal-card-content {
padding: 1em 3em 3em 3em;
}
}
@media only screen and (max-width: 900px) {
.safespring-horisontal-card-container {
border-radius: 5px;
width: 100%;
}
.safespring-horisontal-card-row {
flex: none !important;
display: block !important;
}
.safespring-horisontal-card-image {
max-width: 100%;
float: none;
}
.safespring-horisontal-card-row {
display: flex; /* equal height of the children */
}
.safespring-horisontal-card-image {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
float: none;
max-width: 100%;
}
.safespring-horisontal-card-image img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
border-radius: 5px 5px 0 0 ;
object-fit: cover;
}
.safespring-horisontal-card-content {
padding: 1em 3em 3em 3em;
}
}
/*@media screen and (max-width: 900px) {
.row {
display: block;
}
.col {
flex: 0; /* additionally, equal width }/*
.safespring-horisontal-card-image {
display: block !important;
justify-content: center!important;
align-items: center;
overflow: hidden;
float: none;
max-width: 100%;
}
.safespring-horisontal-card-image img{
min-width: 100%;
min-height: 100%;
border-radius: 5px 5px 0 0;
object-fit: cover;
}
.safespring-horisontal-card-content {
padding: 1em 3em 3em 3em;
}
}*/
/* END - HORISONTAL CARD */
/* TOOLTIP */
.text-tooltip {
border-bottom: 1px dotted #323232;
}
.text-tooltiptext {
visibility: hidden;
max-width: 650px;
background-color: #EBF1F5;
color: #323232;
text-align: left;
border-radius: 5px;
margin-left: 10px;
margin-top: -20px;
padding: 20px;
font-weight: 300;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.text-tooltip:hover {
font-weight: bold;
color: var(--link-color);
}
.text-tooltip:hover .text-tooltiptext {
visibility: visible;
}
/* END - TOOLTIP */
.tf-filter-item {
display: none;
}
.filter-number {
font-size: 12px;
font-weight: 100;
}
.line {
border-top: solid 0.25px var(--main-color);
border-bottom: solid 0.25px var(--main-color);
margin-top: 15px;
}
button.active {
background-color: var(--button-color);
border-radius: 50px;
border: none;
padding: 10px 25px 8px 25px;
text-align: center;
font: var(--heavy-weight) 13px var(--hind-font);
color: var(--text-color);
text-transform: uppercase;
white-space: nowrap;
}
button.disable-button {
background-color: #FAFEFE;
border-radius: 50px;
border: solid 0.25px var(--main-color);
padding: 10px 25px 8px 25px;
text-align: center;
font: var(--heavy-weight) 13px var(--hind-font);
color: var(--main-color);
text-transform: uppercase;
white-space: nowrap;
}
button {
background-color: #FAFEFE;
border-radius: 50px;
border: solid 0.25px var(--main-color);
padding: 10px 25px 8px 25px;
text-align: center;
font: var(--heavy-weight) 13px var(--hind-font);
color: var(--main-color);
text-transform: uppercase;
white-space: nowrap;
letter-spacing: 0.2px;
}
button.text.active {
background-color: #fafefe;
border-radius: 0;
border: none;
padding: 5px 20px;
text-align: normal;
font: var(--heavy-weight) 13px var(--hind-font);
color: var(--link-color);
text-transform: none;
white-space: nowrap;
}
button.text.disable-button {
background-color: #fafefe;
border-radius: 0;
border: none;
padding: 5px 20px;
text-align: normal;
font: var(--heavy-weight) 13px var(--hind-font);
color: var(--main-color);
text-transform: none;
white-space: nowrap;
}
button.text {
background-color: #fafefe;
border-radius: 0;
border: none;
padding: 5px 20px;
text-align: normal;
font: var(--heavy-weight) 13px var(--hind-font);
color: var(--main-color);
text-transform: none;
white-space: nowrap;
}
.show-item {
display: inline-block;
}
@media screen and (max-width: 1300px) {
.tf-wrapper {
margin: 0 5%;
}
}
@media screen and (min-width: 1300px) {
.tf-wrapper {
margin: 0;
grid-column: 2 / span 6;
}
.copy-code-button {
width: 100px;
margin: 0 0 0 630px !important;
}
}
section {
margin-top: 18px !important;
}
.tf-items-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
/*
.tf-item {
width: 250px;
margin: 8px;
background: #fff;
padding: 2rem;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
border-radius: 2px;
margin-bottom: 2rem
}*/
.chroma {
overflow-x: auto;
padding: 4px;
}
.panel {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.acc:after {
content: '\02795';
color: #fff;
margin-left: 5px;
}
.acc.active:after {
content: "\2796";
}
.navbtn {
padding: 0.5rem!important;
font-size: 90%!important;
}
.nava {
text-transform: none;
font-size: 90%!important;
}
/* COPY CODE BUTTON */
.copy-code-button {
font-family: var(--hind-font);
color: #FA690F;
background-color: #EAF0F4;
border-radius: 10px 10px 0 0;
border: none;
/* right-align */
display: block;
margin-left: auto;
margin-right: 0;
padding: 6px 12px 0px 12px;
font-size: 0.8em;
}
.copy-code-button:hover {
cursor: pointer;
color: #32CD32;
}
.copy-code-button:focus {
/* Avoid an ugly focus outline on click in Chrome,
but darken the button for accessibility.
See https://stackoverflow.com/a/25298082/1481479 */
background-color: #E6E6E6;
outline: 0;
}
.copy-code-button:active {
background-color: #D9D9D9;
}
.highlight pre {
/* Avoid pushing up the copy buttons. */
margin: 0;
}