/* Screens no smaller than a tablet */

/****************************************
* Typography
****************************************/

h1 {
  font-size: 65px;
}

h1 span {
  font-size: 22px;
}

.content h2 {
  font-size: 28px;
}

.content > div:first-of-type h2 {
  font-size: 35px;
}

.content > div:first-of-type h3,
.ribbon h3{
  font-size: 23px;
}

.ribbon h2 {
 font-size: 48px;
}

.card.accent-1 .details h2,
.accent-1 h2 {
  font-size: 35px;
  font-weight: 600;
}

.accent-1 p {
  font-size: 20px;
}

a.alt {
  color: var(--fni-color-1);
}

/****************************************
* Header
****************************************/

header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem 0;
}

header .logo {
  padding: 0;
}

/****************************************
* Navigation
****************************************/

nav {
  width: 448px;
}

/****************************************
* Home Billboard
****************************************/

.home-billboard .content h1 {
  font-size: 60px;
}

.home-billboard .content h2 {
  font-size: 24px;
}

.home-billboard img {
  max-width: 125px;
}

/****************************************
* Inside billboard
****************************************/

.inside-billboard .wrapper > * {
  max-width: 630px;
}

/****************************************
* Service billboard
****************************************/

.service-billboard {
  grid-template-columns: 1fr 1fr;
}

.order-1--tablet {
  order: 1;
}

.order-2--tablet {
  order: 2;
}

.service-billboard .wrapper:before {
  left: -99px;
}

.service-billboard .inner-box[data-animation="slideInRight"] {
  border-left: none;
}

.service-billboard .inner-box[data-animation="slideInLeft"] {
  border-right: none;
}

.service-billboard .inner-box:before {
  left: -101px;
}

.service-billboard .inner-box:after {
  left: -50px;
}

.service-billboard .wrapper:before,
.service-billboard .inner-box:before,
.service-billboard .inner-box:after {
  top: 0;
  width: 100px;
  height: 100%;
  clip-path: polygon(50% 50%, 100% 0, 100% 100%);
}

.service-billboard .wrapper[data-animation="slideInLeft"]:before {
  right: -99px;
}

.service-billboard .wrapper[data-animation="slideInLeft"] > div:before {
  right: -101px;
}

.service-billboard .wrapper[data-animation="slideInLeft"] > div:after {
  right: -150px;
}

.service-billboard .wrapper[data-animation="slideInLeft"]:before,
.service-billboard .wrapper[data-animation="slideInLeft"] > div:before,
.service-billboard .wrapper[data-animation="slideInLeft"] > div:after {
  left: auto;
  clip-path: polygon(0 0, 50% 50%, 0 100%);
}

.service-billboard .wrapper,
.service-billboard .inner-box {
  padding: 1rem;
}

.service-billboard .inner-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.service-billboard .inner-box > div {
  transform: translate(-48px, 0);
  z-index: 1;
  width: calc(100% + 50px);
  padding: 2rem;
}

.service-billboard .inner-box[data-animation="slideInLeft"] > div {
  transform: translate(-12px, 0);
}

/****************************************
* Image billboard
****************************************/

.image-billboard .content {
  width: 57%;
}

.image-billboard p {
  font-size: calc(40px + (65 - 40) * (100vw - 768px) / (1140 - 768));
}

/****************************************
* Content
****************************************/

.content {
  padding: 4rem;
}

/****************************************
* Intro
****************************************/

.intro > div:first-of-type  {
  height: calc(550px + (700 - 550) * (100vw - 768px) / (1140 - 768));
}

/****************************************
* Footer
****************************************/

footer {
  text-align: left;
  margin-bottom: 0; /* For bottom bar */
}

footer > .grid {
  grid-template-columns: repeat(2, 1fr);
}

footer .grid > div:nth-of-type(2) {
  order: 3;
}

footer .grid > div:nth-of-type(3) {
  order: 2;
}

footer .grid > div:nth-of-type(4) {
  order: 4;
}

footer .seal {
  display: flex;
  justify-content: center;
  align-items: center;
}

/****************************************
* Bottom Bar
****************************************/

.bottom-bar {
  position: static;
  left: unset;
  bottom: unset;
  background: transparent;
}

.bottom-bar a.button.primary {
  background-color: var(--fni-color-2);
  color: #fff;
}

.bottom-bar a.button svg {
  fill: #fff;
}