*, *::before, *::after{
  box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body{
  position: relative;
  max-width: 100vw;
  margin: 0; padding: 0;
  background-color: #15305c;
}

main, header, section, footer{
  display: block;
}

main{
  position: relative;
  background-color: #fff;
  width: 100%;
  left: 0px;
  overflow: hidden;
  transition: all .3s;
  margin: 0;
  z-index: 0;
}

main>header{
  position: relative;
  padding: 5rem 1rem 2rem;
  background-color: transparent;
  margin-bottom: -1px;
}
body.post main>header{
  padding-bottom: 1rem; 
}

section, footer{
  position: relative;
  padding: 3rem 1rem;
  margin-bottom: -1px;
}
section.thin{ padding: 2rem 1rem; }








@keyframes header-bg{
  0%{background-color: rgba(21, 48, 92, 1);}
  100%{background-color: rgba(21, 48, 92, 0);}
}
@keyframes header-stripes{
  0%{height: 0%;}
  100%{height: 300%;}
}



main>header.dark{
  background-color: transparent;
}

.background{
  position: absolute;
  top: 0px; right: 0px; bottom: 0px; left: 0px;
  background-size: cover;
  background-position: center;
  z-index: -1;
  overflow: hidden;  
}

.background video{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 100%;
  width: 177.77777778vh;
  min-width: 100%;
  min-height: 56.25vw;
}

main>header .background, section.dark .background, footer .background{
  background-color: #15305c;
}

main>header .background::after{
  display: block;
  content: '';
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left:0;
  
  background-color: rgba(21, 48, 92, 1);
  
  animation-name: header-bg;
  animation-delay: .5s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}



section.intro{
  position: relative;
  z-index: 1;
}

section.intro div.column:first-child{
  min-height: 25vw;
}

body.post section:first-of-type, section.blog-listing{
  padding-top: 3rem; 
}

section.reverse{
  flex-direction: row-reverse;
}

.column{
  position: relative;
  margin: 0;
  padding: 1rem;
  width: 100%;
  max-width: 100%;
  z-index: 1;
}
.column.empty{
  padding: 0;
}

section .column.column-blog, aside.column.sidebar{
  padding-top: 0;
}
aside.column.sidebar{
  border-top: #cccccc 1px solid;
}
.blog-listing aside.column-full{
  margin: 0;
}
.blog-listing aside.column-full>*:first-child{
  margin-top: 0;
}

.column.align-center, .column.column-headline-centered {text-align: center;}

.column>ul:first-child{
  margin-top: 0;
}

.column>*:last-child{
  margin-bottom: 0;
}


section.striped .background{
  background-image: linear-gradient(135deg,rgba(32, 73, 140,.2) 25%,transparent 25%, transparent 50%, rgba(32, 73, 140,.2) 50%, rgba(32, 73, 140,.2) 75%, transparent 75%);
  background-size: 3rem 3rem;
  background-position: top left;
  background-attachment: scroll;
}

.hs_cos_wrapper_widget{
  position: relative; 
}

main>header .column.push-bottom{
  margin-bottom: -3rem;
}

main>header .column>.mockup{
  display: block;
  position: relative;
  max-width: 500px;
  line-height: 0;
  margin-left: auto;
}

.column>.mockup-01 img:first-child{
  margin-bottom: -7.8%;
  width: 100%;
}


main>header .column>.mockup img{
  
}

main>header .column>.mockup img:first-child{
  position: relative;
  z-index: 3;
}
main>header .column>.mockup img:nth-child(2){
  position: absolute;
  top: 0px; left: 0px; height: 100%;
  z-index: 2;
}
main>header .column>.mockup-01 img:nth-child(2){
  height: 107.8%; 
}

form>iframe{max-width: 100%;}

.mobile-hide{
  display: none;
}
.desktop-hide{
  display: block;
}





@media (min-width:768px) {
  mina>header {padding: 6rem 1rem 3rem;}
  section, footer {padding: 4rem 1rem;}

  main>header .column.push-bottom{margin-bottom: -4rem;}
  main>header form{margin-bottom: -6rem;}
  
  @supports (-webkit-flex-wrap: wrap) or (flex-wrap: wrap){  
    main>header, section, footer{
      display: -webkit-flex;
      -webkit-flex-wrap: wrap;
      display: flex;   
      flex-wrap: wrap;
      justify-content: center;
    }
    .column-quarter{
      flex-basis: 50%;
      width: 50%;
    }


}

@media (min-width:992px){
  
  main>header {padding: 6rem 2rem 3rem;}
  section, footer {padding: 4rem 2rem;}
  section.thin{ padding: 2rem; }
  main form {padding: 2rem;}
  
  
  @supports (-webkit-flex-wrap: wrap) or (flex-wrap: wrap){  

    
	 
    section.valign-top{align-items: flex-start;}
    section.valign-center{align-items: center;}
    section.valign-bottom{align-items: flex-end;}
		section.valign-stretch{align-items: stretch;}

    .column{
      flex-basis: 50%;
      width: 50%;
      padding: 1rem;
      overflow-x: visible;
    }
    .column-third, .column-quarter{
      flex-basis: 50%;
      width: 50%;
    }
    .column-blog, .column-two-thirds{
      flex-basis: 67%;
      width: 67%;
    }
    section .column.column-blog, aside.column.sidebar{
      padding-bottom: 0;
    }
    aside.column.sidebar, main>header .column.sidebar{
      flex-basis: 33%;
      width: 33%;
    }
    aside.column.sidebar{
      border-top: none;
      border-left: #cccccc 1px solid;
    }
    .column-full{
      flex-basis: 100%;
      width: 100%;
    }
    .reverse>.column.column-headline-first, .column.column-headline-second{
      padding-right: 1rem;
      padding-left: calc(50% + 1rem); 
    }
    .column.column-headline-first{
      padding-right: calc(50% + 1rem); 
    }
    .column.column-headline-centered{
      padding-left: 25%;
      padding-right: 25%;
    }
    .column.align-left{text-align: left;}
    .column.align-right{text-align: right;}
    .column.valign-top{align-self: flex-start;}
    .column.valign-center{align-self: center;}
    .column.valign-bottom{align-self: flex-end;}
    


  }
  
  main>header .column.push-bottom{margin-bottom: -4rem;}
  main>header .column>.mockup{max-width: 75%;}
  
  .mobile-hide{
    display: block;
  }
  .desktop-hide{
    display: none;
  }
  
  section.intro{
    min-height: 25vw;
  }

  section.intro div.column:first-child{
    min-height: 0;
  }
 
}


@media (min-width:1200px) {
  main>header {padding: 8vw 5vw 3vw;}
  section, footer {padding: 5vw 5vw;}
  section.thin { padding: 2vw 5vw;}
  section.intro {padding: 3vw 5vw;}
  .column {padding: 1vw;}
  main>header .column.push-bottom{margin-bottom: -4vw;}
  main>header form{margin-bottom: -6vw;}
  body.post .column-blog{padding-right: 3vw;}
  
  
  .column-third{
    flex-basis: 33%;
    width: 33%;
  }
}
  
@media (min-width:1440px) {
  .column-quarter{
    flex-basis: 25%;
    width: 25%;
  }
}

@media (min-width:1600px) {
  main>header {padding: 10vw 8.5vw 5vw;}
  section, footer {padding: 8vw 8.5vw;}
  section.thin { padding: 3vw 8.5vw;}
  section.intro {padding: 5vw 8.5vw;}
  .column {padding: 1.5vw;}
  main>header .column.push-bottom{margin-bottom: -6.5vw;}
  main>header form{margin-bottom: -9vw;}
  body.post .column-blog{padding-right: 6vw;}
  
}