/*
 * Web Fonts from colophon-foundry.org
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased
 * from Colophon Foundry. The fonts are protected under domestic and international trademark and
 * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
 * distributing this font software.
 *
 * (c) 2021 Colophon Foundry
 *
 * Licenced to Johan Wisén Samtal AB
 */

@font-face {
    font-family: 'basis-grotesque-regular-pro';
    src: url('../fonts/basis-grotesque-regular-pro.eot');
    src: url('../fonts/basis-grotesque-regular-pro.eot?#iefix') format('embedded-opentype'),
         url('../fonts/basis-grotesque-regular-pro.woff2') format('woff2'),
         url('../fonts/basis-grotesque-regular-pro.woff') format('woff'),
         url('../fonts/basis-grotesque-regular-pro.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html {
  height: 100%;
}

body {
	font-family: "basis-grotesque-regular-pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #DA8529;
  font-size: 17px;
  height: 100%
}

h1 {
  font-size: 34px;
}

h3 {
  font-size: 22px;
}

a {
  color: #fff;
  text-decoration: underline;
}

a:hover {
  color: #fff;
  opacity: 0.6;
}

.bulletList {
  margin-top: -4px;
}

.bulletList li {
  margin-bottom: 10px;
}

.fullWidthWrapper {
  padding: 15px 0 40px 0;
}

.container {
  padding-left: 30px;
  padding-right: 30px;
}

.firstParagraph {
  padding-top: 0px;
}


#navigationBar {
  position: absolute;
  width: 100%;
  height: 100px;
  padding: 24px 0px;
  top: 0px;
  left: 0;
  z-index: 100;
}

#navigationBar #logo {
  /* border: 3px solid white; */
  height: 33px;
  width: 35px;
  float: left;

}

#navigationBar #logo svg {
  /* border: 3px solid white; */
  height: 33px;
  width: 35px;
  fill: #fff;
}

#navigationBar ul {
  text-align: right;
}
#navigationBar ul > li {
  display: inline-block;
  margin-left: 10px;
  zoom:1;
  *display:inline;
  position: relative;
}

#navigationBar ul > li > a {
  font-size: 15px;
  text-decoration: none;
  padding: 4px 26px;
  display: block;
  height: 100%;
  width: 100%;
}

.borderedLink {
  border: 2px solid white;
}
.borderedLink:hover {
  opacity: 0.8;
}
.borderedLink a:hover {
  opacity: 1;
}

.background-svg {
 position: absolute;
 height: 100%;
 width: 100%;
 top: 0;
 left: 0;
}

#pageHeader {
  height: 95%;
  position: relative;
  min-height: 500px;
}

#pageHeader .background-svg {
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

#pageHeader .background-svg svg {
  position: absolute;
  height: 80%;
  width: 200%;
  top: -10;
  left: -20%;
}

#developing-circles {
  shape-rendering: crispEdges;
  fill: url(#developing-circles-gradient);
}

#pageHeader div {
  position: relative;
  height: 100%;
}
#pageHeader h1 {
  position: absolute;
  bottom: 00px;
  left:0;
  padding-left: 15px;
  padding-right: 15px;
}
#services {
  background-color: #810813;
}

#portraitSection {
  padding-top: 40px;
  padding-bottom: 0px;
}

#portraitSection .background-svg svg {
  position: absolute;
  height: 85%;
  width: 500%;
  top: 5%;
  left: -317%;
}

#portraitSection .background-svg svg #domino-stop {
  shape-rendering: crispEdges;
  fill: url(#domino-stop-gradient);
}

#portraitSection #portrait {
  width: 100%;
  box-shadow: 15px 15px 0 #5E0309;;
}


.service {
    margin-top: 80px;
}

.service .serviceFigure {
    width: 60%;
    height: 120px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left 0 bottom 0;
}

#theoryAndMethod {
  background-color: #000F5C;
  position: relative;
}

#theoryAndMethod .background-svg {
  overflow: hidden;
}

#theoryAndMethod .background-svg svg {
  position: absolute;
  height: 80%;
  width: 160%;
  top: 10%;
  left: -20%;
}

#theoryAndMethod .background-svg svg #floating-rects {
  shape-rendering: crispEdges;
  fill: url(#floating-rects-gradient);
}

#contact {
  position: relative;
}

#contact .background-svg {
  overflow: hidden;
}

#contact .background-svg svg {
  opacity: .7;
  position: absolute;
  height: 400%;
  width: 250%;
  top: -150%;
  left: -75%;
}

#contact .background-svg svg #left-circle {
  shape-rendering: crispEdges;
  fill: url(#developing-circles-flipped-gradient);
}
#contact .background-svg svg #right-circle {
  shape-rendering: crispEdges;
  fill: url(#developing-circles-gradient);
}


h3.pullQuote {
  margin: 30px 0 40px 0;
  padding-top: 20px;
  border-top: 2px solid white;
  line-height: 1.2em;
}

@media (min-width: 576px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  #navigationBar {
    position: fixed;
    top: 0px;
  }

  #navigationBar #logo {
    height: 52px;
    width: 52px;
  }

  #navigationBar #logo svg {
    height: 52px;
    width: 56px;
  }
  #pageHeader h1 {
    bottom: 50px;
    left: 15px;
  }
  #navigationBar ul > li {
    margin-left: 15px;
  }
  .borderedLink {
    border: 2.5px solid white;
  }
}

@media (min-width: 768px) {
  body {
    font-size: 20px;
  }
  h1 {
    font-size: 48px;
  }
  h3 {
    font-size: 26px;
  }
  #pageHeader {
    height: auto;
    position: relative;
  }
  #pageHeader .background-svg svg {
    height: 100%;
    width: 140%;
    top: 0;
    left: -10%;
  }

  #developing-circles {
    fill: url(#developing-circles-flipped-gradient);
  }

  #pageHeader h1 {
    position: relative;
    left: 0;
    bottom: auto;
    padding: 200px 0;
  }
  .fullWidthWrapper {
    padding: 30px 0 50px 0;
  }
  .firstParagraph {
    padding-top: 36px;
  }
  #navigationBar ul > li {
    margin-left: 18px;
  }
  #navigationBar ul > li > a {
    font-size: 20px;
    padding: 8px 22px;
  }
  #portraitSection #portrait {
    box-shadow: 0px 0px 0px;
  }
  .service .serviceFigure {
    background-size: contain;
    background-position: center;
    margin-top: 32%;
    margin-left: 10%;
    height: 36%;
    width: 80%;
  }
  h3.pullQuote {
    margin: 8px 0 0 0;
  }
  #contact .background-svg svg {
    height: 300%;
    width: 200%;
    top: -80%;
    left: -50%;
  }
}

@media (min-width: 992px) {
  .fullWidthWrapper {
    padding: 50px 0 70px 0;
  }
  #navigationBar ul > li {
    margin-left: 22px;
  }
  #portraitSection .background-svg svg {
    height: 85%;
    width: 300%;
    top: 7.5%;
    left: -175%;
  }
  .service .serviceFigure {
    background-size: auto;
    margin-top: 0;
    margin-left: 0;
    height: 100%;
    width: 100%;
  }
  #theoryAndMethod .background-svg svg {
    height: 80%;
    width: 80%;
    top: 10%;
    left: 10%;
  }
  #contact .background-svg svg {
    height: 300%;
    width: 180%;
    top: -110%;
    left: -45%;
  }
}

@media (min-width: 1200px) {
  body {
    font-size: 22px;
  }
  h1 {
    font-size: 60px;
  }
  h3 {
    font-size: 34px;
  }
  .fullWidthWrapper {
    padding: 60px 0 80px 0;
  }
  #pageHeader .background-svg svg {
    height: 100%;
    width: 120%;
    top: 0;
    left: -5%;
  }
  #pageHeader h1 {
    padding: 240px 0;
  }
  #navigationBar ul > li {
    margin-left: 44px;
  }
}

@media (min-width: 1400px) {
  #navigationBar ul > li {
    margin-left: 50px;
  }
  #pageHeader h1 {
    padding: 280px 0;
  }
}