/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/312c72");
@font-face {font-family: 'SofiaProMedium';src: url('fonts/312C72_A_0.eot');src: url('fonts/312C72_A_0.eot?#iefix') format('embedded-opentype'),url('fonts/312C72_A_0.woff2') format('woff2'),url('fonts/312C72_A_0.woff') format('woff'),url('fonts/312C72_A_0.ttf') format('truetype');}

/* Fonts */
.SofiaProMedium { 
	font-family: SofiaProMedium;
	font-weight: normal;
	font-style: normal;
  }
  body {
    margin: 0;
    font-family: SofiaProMedium;
    font-size: 16px;
  }
/* Typography */
h1, h2, h3, h4, h5, h6, p { 
    font-family: SofiaProMedium; 
    font-weight: normal; 
    font-style: normal; 
  }

a,
a:focus,
a:hover {
    color: #fff;
    text-decoration: none;
}
ul {
  list-style: none;
}
/* Typewritter effect */

.intro {
  font-size: 1.2rem;
  text-align: center;
  margin-top: 2rem;
  margin-left: 1rem;
  /* border: 2px dotted yellow; */
}
.tekst {
  font-size: 1rem;
  text-align: center;
  margin-top: 2rem;
  line-height: 1.1;
  margin-top: 1.6rem;
}
  #video_bg {
    position: fixed;
    right: -847px;
    bottom: -85px;
    min-width: 100%;
    min-height: 100%;
    height: 900px;
  }
/* Layout */ 
  .content {
    position: fixed;
    top: 0;
    color: #f1f1f1;
    /* border: 2px dotted yellow; */
    margin: 4.7rem 0;
  }
/* images */
  img {
    width: 100%;
    height: auto;    
  }
 .logo {
    width: 100%;
    height: auto; 
    /* border: 2px dotted yellow;   */
} 
  /* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
    position: fixed;
    bottom: 0;
    margin-bottom: 0.8rem;
  }
.page-footer, .col {
  min-width: 140px;
} 
.page-footer ul {
  display: flex;
  font-size: 1.5rem;
  padding-left: 0;
  justify-content: center;
} 
.page-footer ul li:not(:last-child) {
  margin-right: 20px;
}
address p {
  font-size: 0.6rem;
  margin-bottom: 0.4rem;
}
address {
  font-size: 0.6rem;
  margin-bottom: 0.4rem;
}
 /* Media queries Responsive breakpoints
–––––––––––––––––––––––––––––––––––––––––––––––––– */
 /* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 375.98px) { 
  .content {
    margin: 1rem 0;
  }
  .logo {
    width: 90%;
    }
  .page-footer {
    margin-bottom: 0rem;
  }
  .page-footer ul {
    margin-bottom: 0rem;
  } 
 }
 @media (min-width: 376px) and (max-width: 567.98px) { 
  .logo {
    width: 82%;   
    }
    .content {
      margin: 2rem 0;
    }
    .page-footer ul {
      margin-bottom: 0.6rem;
    } 
 }
   /* Small devices (landscape phones, 568px and up) */
   @media (min-width: 568px) and (max-width: 767.98px) {
  #video_bg {
    position: fixed;
    right: -847px;
    bottom: 0px;
    min-width: 100%; 
    min-height: 100%;
  }
  .logo {
    width: 100%;
    }
  address p {
    font-size: 0.7rem;
  } 
  .content {
    margin: 2rem 0;
  } 
 }

  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) and (max-width: 991.98px) { 
    #video_bg {
    right: -464px;
    bottom: 0;
  }
  .logo {
    width: 82%;
    }
    .content {
      margin: 2.3rem 0;
    }
    .tekst {
      font-size: 1.4rem;
      margin-top: 2rem;
      line-height: 1.6;
      margin-top: 1rem;
    }
  address p {
    font-size: 1rem;
  }  
 }
 /* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    #video_bg {
    position: fixed;
    right: -366px;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
  }  
  .logo {
    width: 35%;
    }
    .content {
      margin: 2rem 0;
    }
    .tekst {
      font-size: 1.1rem;
      margin-top: 0.7rem;
      line-height: 1.2;
      margin-top: 0.9rem;
    }
 }
 /* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  #video_bg {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 102%; 
    min-height: 102%;
    height:auto; 
  }
  .logo {
    width: 35%;
    }
}
/* iMac 23-inch and up */
@media (min-width: 1440px) {
.logo {
  width: 36%;
  }
  .content {
    margin: 2.5rem 0;
  }
}
/* iMac 27-inch and up */
@media (min-width: 2000px) {
  .logo {
    width: 29%;
    }
    .content {
      margin: 3.8rem 0;
    }
  }
  
  @media (min-width: 2300px) {
    .logo {
      width: 27%;
      }
      .content {
        margin: 3.9rem 0;
      }
    }
    @media (min-width: 2780px) {
      .logo {
        width: 36%;
        }
        .content {
          margin: 7rem 0;
        }
      }
    @media (min-width: 3800px) {
      .logo {
        width: 33%;
        }
        .content {
          margin: 6rem 0;
        }
      }