/*
Theme Name: Offshore Trawl Supply
Theme URI: http://www.osberget.no/
Author: Maxim Kukulinsky & Andrejs Fokins at RASAMAX SIA
Author URI: http://www.osberget.no/
Description: ots Wordpress theme
Version: 1.0.4
Tags: ots osberget rasamax
Text Domain: ots
*/
/**
 * Reset CSS instead of Normalize inside of Bootstrap
*/
/* Page commons */
#primary-desktop-menu li {
  position: relative;
}

#primary-desktop-menu .sub-menu {
  display: none;
  position: absolute;
  background: white;
  list-style: none;
  padding: 20px 30px;
}

#primary-desktop-menu li:hover > .sub-menu {
  display: block;
}

#primary-desktop-menu li li:hover > .sub-menu {
  left: 100%;
  top: -20px;
}

.menu-button {
  position: relative;
  width: 30px;
  height: 30px;
}

.menu-open {
  transform: rotate(0);
  opacity: 1;
  transition: transform .5s, opacity .5s;
  position: absolute;
  top: 0;
  left: 0;
}

.menu-button.open img.menu-open {
  transform: rotate(-300deg);
  opacity: 0;
}

.menu-close {
  opacity: 0;
  transform: rotate(300deg);
  transition: transform .5s, opacity .5s;
  position: absolute;
  top: 0;
  left: 0;
}

.menu-button.open img.menu-close {
  opacity: 1;
  transform: rotate(0);
}

#main-navigation-container {
  position: absolute;
  right: 0;
  top: 147px;
  max-height: 0px;
  transition: max-height .7s, visibility 0s .7s;
  width: 400px;
  overflow: hidden;
  visibility: hidden;
}

#main-navigation-container.expanded {
  max-height: 100vh;
  visibility: visible;
  transition: visibility 0s, max-height .7s;
}

#main-navigation-container .menu-wrapper {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--bs-secondary);
}

#main-navigation-container li.menu-item {
  padding: 15px 25px;
  background-color: var(--bs-primary);
}

#main-navigation-container li.menu-item.expanded .sub-menu {
  max-height: 500px;
  visibility: visible;
  transition: max-height .7s ease-in-out, visibility;
}

#main-navigation-container .sub-menu {
  max-height: 0px;
  transition: max-height .7s ease-in-out, visibility .7s;
  visibility: hidden;
  list-style-type: none;
}

#main-navigation-container .sub-menu a {
  font-size: 16px !important;
}

#main-navigation-container .sub-menu li:last-child {
  padding-bottom: 0;
}

#main-navigation-container a {
  color: white;
  text-decoration: none;
  text-transform: uppercase;
}

.sub-menu-button {
  width: 12px;
  height: 12px;
  margin-left: 5px;
  float: right;
  transform: translateY(10px);
  cursor: pointer;
  transform-origin: center;
  transition: transform 0.25s;
  background: none;
  border: none;
}

.sub-menu-button::before, .sub-menu-button::after {
  content: "";
  transition: 0.5s;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.sub-menu-button::before {
  width: 2px;
  height: 12px;
  transition: height 0.5s;
}

.sub-menu-button::after {
  width: 12px;
  height: 2px;
}

li.expanded .sub-menu-button::before {
  height: 0px;
}

@media screen and (max-width: 400px) {
  #main-navigation-container {
    width: 100%;
  }
  #main-navigation-container :not(.sub-menu) a {
    font-size: 16px !important;
  }
  #main-navigation-container .sub-menu {
    padding: 0;
  }
  #main-navigation-container .sub-menu a {
    font-size: 14px !important;
  }
}

.header .menu-wrapper li:not(.header-button) a {
  color: var(--bs-dark);
  text-decoration: none;
  transition: color .4s;
  font-size: 25px;
  text-transform: uppercase;
  font-weight: 600;
  font-family: 'Titillium Web', sans-serif;
}

.header .menu-wrapper li:not(.header-button) a:hover {
  color: var(--bs-primary) !important;
}

.header .menu-wrapper li:not(.header-button).current-menu-item a {
  color: var(--bs-primary);
  border-bottom: 1px solid var(--bs-primary);
}

:root {
  --wp-edit-button-primary: var(--bs-primary);
}

p:first-child {
  margin-top: 0;
}

p:last-child {
  margin-bottom: 0;
}

p + p {
  margin-top: 40px;
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  font-weight: 700;
  letter-spacing: 2%;
  font-size: 28px;
  margin-bottom: 12px;
  margin-top: 32px;
}

.post-content p, .post-content ul, .post-content ol {
  font-size: 20px;
}

.post-content figure {
  width: 100% !important;
  margin-top: 90px;
  margin-bottom: 40px;
}

.post-content figure img {
  width: 100%;
  height: auto;
}

.post-content figure figcaption {
  font-size: 17px;
  margin-top: 20px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: .1rem;
}

@media screen and (max-width: 1200px) {
  .post-content h1,
  .post-content h2,
  .post-content h3,
  .post-content h4,
  .post-content h5,
  .post-content h6 {
    font-size: 25px;
    margin-bottom: 10px;
    margin-top: 25px;
  }
  .post-content p, .post-content ul, .post-content ol {
    font-size: 18px;
  }
}

@media screen and (max-width: 767px) {
  p + p {
    margin-top: 30px;
  }
  .post-content h1,
  .post-content h2,
  .post-content h3,
  .post-content h4,
  .post-content h5,
  .post-content h6 {
    font-size: 22px;
    margin-bottom: 7px;
    margin-top: 20px;
  }
  .post-content p, .post-content ul, .post-content ol {
    font-size: 18px;
  }
}

a:not(.text-decoration-none):hover {
  text-decoration: none;
}

ul {
  font-size: 20px;
}

ul li {
  font-size: 20px;
}

header {
  border-bottom: 2px solid rgba(0, 146, 159, 0.3);
  box-shadow: 3px 1px 10px var(--bs-dark);
}

.alignleft {
  float: left;
}

.alignright {
  float: right;
}

.aligncenter {
  margin: auto;
  display: block;
}

.position-cover {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.font-roboto {
  font-family: 'Roboto', sans-serif;
}

.font-tit {
  font-family: 'Titillium Web', sans-serif;
}

.h-100vh {
  height: 100vh;
}

.ls-5 {
  letter-spacing: 0.1rem;
}

.ls-2 {
  letter-spacing: 0.04rem;
}

.text-404 {
  font-size: 300px;
  letter-spacing: 10px;
  line-height: 0.57;
}

#a404-2 {
  transform-origin: bottom;
  animation-name: rotate2;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-delay: 3s;
  animation-iteration-count: 1;
  z-index: -1;
}

@keyframes rotate2 {
  0% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.77, 0.24, 0.26, 1);
  }
  60% {
    transform: rotate(220deg);
    animation-timing-function: cubic-bezier(0.77, 0.24, 0.26, 1.81);
  }
  100% {
    transform: rotate(180deg);
  }
}

@media (max-width: 991px) {
  .text-404 {
    font-size: 200px;
  }
}

@media (max-width: 767px) {
  .text-404 {
    font-size: 100px;
  }
}

/* Hide Google reCaptcha after 1s */
@keyframes hide_after_1s {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

.grecaptcha-badge {
  animation-name: hide_after_1s;
  animation-delay: 3s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.front-page-slider-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(46, 43, 43, 0.73) 0%, rgba(255, 255, 255, 0.62) 40%, rgba(255, 255, 255, 0.62) 100%);
  mix-blend-mode: multiply;
}

.front-page-slider-link {
  max-width: 600px;
  text-decoration: none;
}

.front-page-slider-link::after {
  content: "";
  background-image: url("https://ots.osbergetcms.no/wp-content/themes/ots/images/link-arrow-white.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 35px;
  height: 35px;
  display: inline-block;
  margin-left: 20px;
}

.promo-content h2, .promo-content h3, .promo-content h4, .promo-content h5, .promo-content h6 {
  font-size: 30px;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 700;
}

.block-links-link {
  transition: background-color .4s;
}

.block-links-link:hover {
  background-color: var(--bs-dark) !important;
}

.splide__arrow svg {
  fill: var(--bs-primary) !important;
}

.archive-link-to-post img {
  transform: scale(1);
  transition: transform .5s;
}

.archive-link-to-post:hover img {
  transform: scale(1.2);
}

.lang-switcher {
  list-style-type: none;
  padding: 0;
}

.lang-switcher li {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

.lang-switcher::before {
  content: "|";
  margin-right: 20px;
  color: var(--bs-dark);
  font-size: 25px;
}

.lang-switcher a img {
  height: 25px !important;
  width: 25px !important;
  border-radius: 50%;
}

@media screen and (max-width: 1024px) {
  body #CybotCookiebotDialog {
    bottom: 10px;
    top: auto;
    transform: translate(-50%, 0%);
  }
}

@media screen and (min-height: 700px) {
  body .CybotCookiebotDialogContentWrapper {
    max-height: 60vh;
  }
}

body #CybotCookiebotDialogTabContent {
  flex-grow: 1;
}

body #CybotCookiebotDialog #CybotCookiebotDialogBody .CybotCookiebotScrollContainer {
  flex-grow: 1;
}

body #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton {
  font-weight: 500;
  padding: .5em;
  text-align: center;
  width: 100%;
}

@media screen and (min-width: 1280px) {
  body #CybotCookiebotDialogPoweredByText {
    display: block;
  }
}

body #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonAccept,
body #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonAccept,
body #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
body #CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-change {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: var(--bs-secondary);
}

body #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton,
body #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonCustomize,
body #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection {
  background-color: transparent;
  border-color: var(--bs-primary);
  color: var(--bs-primary);
}

body #CookiebotWidget .CookiebotWidget-body .CookiebotWidget-consents-list li.CookiebotWidget-approved svg {
  fill: var(--bs-primary);
}

body #CookiebotWidget .CookiebotWidget-logo svg path {
  fill: var(--bs-secondary);
}

body #CookiebotWidget .CookiebotWidget-consent-details button {
  color: var(--bs-primary);
}

body #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
  border-bottom: 1px solid var(--bs-primary);
  color: var(--bs-primary);
}

body #CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-withdraw {
  border-color: var(--bs-secondary);
}

body #CybotCookiebotDialog input:checked + .CybotCookiebotDialogBodyLevelButtonSlider {
  background-color: var(--bs-primary);
}

body #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink:hover {
  color: var(--bs-primary);
}

body #CookiebotWidget .CookiebotWidget-logo svg circle {
  fill: var(--bs-primary);
}

body #CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentCookieContainerButton:hover,
body #CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentIABv2Tab:hover,
body #CybotCookiebotDialogDetailBodyContentCookieContainerTypes .CybotCookiebotDialogDetailBodyContentCookieProvider:not(.CybotCookiebotDialogDetailBodyContentCookieInfoCount):hover {
  color: var(--bs-primary);
}
