@charset "UTF-8";

.header-montage{
 position: relative
}
.header-montage>video{
 position: absolute;
 width: 100%;
 height: auto;
 z-index: 0
}
.header-montage>.overlay{
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
.header-montage>.overlay{
 background-color: rgba( 23, 29, 110, 0.75 );
 z-index: 2;
 pointer-events: none
}
.header-montage>.cover{
 position: relative;
 z-index: 3
}
.header-montage>.cover>div.caption{
 display: flex;
 padding: 20px 20px 50px 20px;
 color: #fff;
 text-align: center
}
.header-montage>.cover>div.caption h1{
 margin: 0 0 26px 0 
}
.header-montage>.cover>div.caption p{
 margin: 0 0 40px 0
}
.header-montage>.cover>div.caption .buttons{
 max-width: 300px;
 margin-left: auto;
 margin-right: auto
}
.header-montage>.cover>div.caption a.btn{
 width: 100%;
 max-width: 180px;
 min-width: 0;
 padding-left: 20px;
 padding-right: 20px;
}
.header-montage>.cover>div.caption a.btn+a.btn{
 margin-top: 20px;
 margin-left: 0  
}
.header-montage>.cover>div.caption+div.side{
 padding-bottom: 40px
}
.header-montage>.cover a[href].comingsoon{
 display: flex;
 align-items: center;
 text-align: center;
 width: 238px;
 height: 238px;
 border-radius: 119px;
 background-color: #1ba1e8;
 color: #171d6e;
 margin-left: auto;
 margin-right: auto;
 padding: 0 30px;
 text-transform: uppercase;
 text-decoration: none;
 font-weight: 700;
 transform: rotate( 0deg );
 transition: ease transform 300ms
}
.header-montage>.cover a[href].comingsoon b{
 display: block;
 color: #fff;
 font-size: 1.75rem;
 line-height: 1em;
 margin-top: 1px;
 margin-bottom: 3px
}
 
@media ( min-width: 576px ){
	
 .header-montage>.cover>div.caption .buttons{
  max-width: 100%
 }
 .header-montage>.cover>div.caption a.btn+a.btn{
  margin-top: 0;
  margin-left: 20px
 }
 
}
 
@media ( min-width: 768px ){

 .header-montage>.cover>div.caption{
  padding: 40px 40px 50px 40px
 }
	
}
 
@media ( min-width: 992px ){

 .header-montage{
  height: calc( 100vh - 80px ); 
  overflow: hidden
 }
 .header-montage>video{
  position: relative
 }
 .header-montage>.cover{
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100%;
 }
 .header-montage>.cover>div.side{
  flex: 1 1 100%
 }
 .header-montage>.cover>div.caption{
  flex: 0 0 auto;
  align-items: center;
  max-width: 680px;
  padding: 0
 }
 .header-montage>.cover>div.caption+div.side{
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding-right: 20px;
  padding-bottom: 122px
 }
 .header-montage>.cover a[href].comingsoon{
  transform: rotate( 30deg )
 }
 .header-montage>.cover a[href].comingsoon:hover{
  transform: rotate( 0deg )
 }
 
}
 
@media ( min-width: 1200px ){

 .header-montage{
  height: 100vh
 }
 .header-montage>.cover>div.caption+div.side{
  padding-right: 69px
 }
 .header-montage>.cover a[href].comingsoon{
  margin-left: 0;
  margin-right: 0
 }
 
}
 
@media ( min-width: 1800px ){
	
 .header-montage>.cover>div.caption{
  max-width: 900px
 }
 h1.alternative, 
 p.h1.alternative,
 .h1.alternative{
  font-size: 42px
 }
 
}