@import url("https://use.typekit.net/dsc3ahm.css");

*{

	

}

body{

	overflow-x: hidden;

	background-color: white;

	font-family: obliqua,sans-serif;

	font-weight: 400;

	font-style: normal;

	font-size:1.2em;

	

}

footer{

	z-index: 5!important;

}

footer>a{

	color: white!important;

}

.marquee {

  height: 45px;

  width: 100%;



  overflow: hidden;

  position: relative;

}



.marquee div {

  display: block;

  width: 500%;

  height: 30px;



  position: absolute;

  overflow: hidden;



  animation: marquee 18s ease-in-out infinite;

}



.marquee span {

  float: left;

  width: 50%;

}



@keyframes marquee {

  0% { left: 0; }

  100% { left: -250%; }

}

.hero-banner{

	padding-top: 0px;

	min-height: 90vh;

	max-height: 100vh;

	overflow: hidden;

}

.hero-banner video {

    height: 100%;

	height: inherit;

    width: 177.77777778vh; /* 100 * 16 / 9 */

    min-width: 100%;

    min-height: 46.25vw; /* 100 * 9 / 16 */

	position: relative;

    left: 50%; /* % of surrounding element */

    top: 0%;

    transform: translate(-50%, 0%); /* % of current element */

	max-width: none;

}

.hero-banner img {

    height: 100%;  

    min-width: 100%;

	position: absolute;

    left: 50%; /* % of surrounding element */

    top: 50%;

    transform: translate(-50%, -50%); /* % of current element */

	max-width: none;

}

.hero-text{

	

	font-weight: 700;

	font-style: normal;

	text-transform: uppercase;

}

.opacity-black-lighter{

	background-color: rgba(0,0,0,0.40);

	height: inherit;

}

.script{

	font-family: nautica, sans-serif;

	font-weight: 700;

	font-style: normal;

}



.scroll{

	font-family: rufina-stencil-ornaments, sans-serif;

	font-weight: 400;

	font-style: normal;

	font-size: calc(18px + 9vw);

	color: white!important;

	margin-bottom: -8%;

	margin-top: -6%;

}

#avatar{

	z-index: 1;

	position: absolute;

	top:90vh;

	left:-420px;

}

.header{

	font-style: normal;

	font-size: 2em;

	text-transform: uppercase;

	color:#566e87!important;



}

.sub-header{

	font-family: bickham-script-pro-3, sans-serif!important;

	font-size: 1.2em;



}

#banner img{

	/*background-color: rgba(240,240,240,1.00)!important;*/

	z-index: -14!important;

	opacity: 1;

	border: 8px solid #C861C9;

}

.main{

	z-index: 3;

	min-height: 90vh;

}

.menu{

	font-family: garamond-premier-pro,serif;

	font-weight: 500;

	font-style: normal;

	font-size: larger;

	margin-top: 0.3em;

}

.font-hero{

	font-family: roboto, sans-serif;

	font-weight: 400;

	font-style: normal;

}

.background-white-opacity{

	background-color: rgba(255,255,255,0.80);

	backdrop-filter: blur(6px);

    -webkit-backdrop-filter: blur(6px);

}

.color-white{

	color: white!important;

}

.color-accent{

	color: #566e87!important;

}

.color-accent-bright{

	color: rgba(230,108,44,1);

}

.background-color-accent-bright{

	color: white;

	background-color: rgba(230,108,44,1);

}

.gb-btn{

	background-color: #566e87!important;

	color: white!important;

	border-radius: 16px;

	text-decoration: none;

}

.gb-btn:hover{

	background-color: #8092A5!important;

	text-decoration: none;

}

.background-color-accent{

	background-color: #566e87!important;

	color: white!important;

}

.color-gold{

	color: #fecc5b;

}

.content div{

	margin-top: 14px;

	color: black;

}

.icon {

	margin: 10%;

	color: white;

    background-color:rgba(86,110,135,0.80);

	padding: 15%;

	border-radius: 15%;

    position: relative;

	transition:0.3s ease-in-out;

}

.icon:hover {

	color: white;

    background-color:rgba(124,147,171,0.80);

}



.icon:after {

    content: "";

	border-radius: 15%;

    width: 100%;

    height: 100%;

    left: 10px;

    top: 10px;

    background-color: grey;

    box-shadow: 0px 0px 5px teal;

    position: absolute;

    z-index: -1;

    transition:0.3s ease-in-out;

}



.icon:hover:after {

    background-color: darkgrey;

    left: 5px;

    top: 5px;

}

.icon1 {

	margin: 10%;

	color: white;

    background-color:rgba(201,135,62,0.80);

	padding: 15%;

	border-radius: 15%;

    position: relative;

	transition:0.3s ease-in-out;

}

.icon1:hover {

	color: white;

    background-color:rgba(124,147,171,0.80);

}



.icon1:after {

    content: "";

	border-radius: 15%;

    width: 100%;

    height: 100%;

    left: 10px;

    top: 10px;

    background-color: grey;

    box-shadow: 0px 0px 5px teal;

    position: absolute;

    z-index: -1;

    transition:0.3s ease-in-out;

}



.icon1:hover:after {

    background-color: teal;

    left: 5px;

    top: 5px;

}

.icon2 {

	margin: 10%;

	color: white;

    background-color:rgba(128,128,128,0.80);

	padding: 15%;

	border-radius: 15%;

    position: relative;

	transition:0.3s ease-in-out;

}

.icon2:hover {

	color: white;

    background-color:rgba(124,147,171,0.80);

}



.icon2:after {

    content: "";

	border-radius: 15%;

    width: 100%;

    height: 100%;

    left: 10px;

    top: 10px;

    background-color: grey;

    box-shadow: 0px 0px 5px teal;

    position: absolute;

    z-index: -1;

    transition:0.3s ease-in-out;

}



.icon2:hover:after {

    background-color: teal;

    left: 5px;

    top: 5px;

}

.icon3 {

	margin: 10%;

	color: white;

    background-color:rgba(30, 62, 114,0.80);

	background-color:rgba(99, 200, 242,0.80);

	padding: 15%;

	border-radius: 15%;

    position: relative;

	transition:0.3s ease-in-out;

}

.icon3:hover {

	color: white;

    background-color:rgba(124,147,171,0.80);

}



.icon3:after {

    content: "";

	border-radius: 15%;

    width: 100%;

    height: 100%;

    left: 10px;

    top: 10px;

    background-color: grey;

    box-shadow: 0px 0px 5px teal;

    position: absolute;

    z-index: -1;

    transition:0.3s ease-in-out;

}



.icon3:hover:after {

    background-color: teal;

    left: 5px;

    top: 5px;

}

.icon4 {

	margin: 10%;

	color: white;

    background-color:rgba(233, 155, 72,0.80);

	background-color:rgba(30, 62, 114,0.80);

	padding: 15%;

	border-radius: 15%;

    position: relative;

	transition:0.3s ease-in-out;

}

.icon4:hover {

	color: white;

    background-color:rgba(124,147,171,0.80);

}



.icon4:after {

    content: "";

	border-radius: 15%;

    width: 100%;

    height: 100%;

    left: 10px;

    top: 10px;

    background-color: grey;

    box-shadow: 0px 0px 5px teal;

    position: absolute;

    z-index: -1;

    transition:0.3s ease-in-out;

}



.icon4:hover:after {

    background-color: teal;

    left: 5px;

    top: 5px;

}

.icon5 {

	margin: 10%;

	color: white;

    background-color:rgba(230,108,44,0.80);

	padding: 15%;

	border-radius: 15%;

    position: relative;

	transition:0.3s ease-in-out;

}

.icon5:hover {

	color: white;

    background-color:rgba(124,147,171,0.80);

}



.icon5:after {

    content: "";

	border-radius: 15%;

    width: 100%;

    height: 100%;

    left: 10px;

    top: 10px;

    background-color: grey;

    box-shadow: 0px 0px 5px teal;

    position: absolute;

    z-index: -1;

    transition:0.3s ease-in-out;

}



.icon5:hover:after {

    background-color: teal;

    left: 5px;

    top: 5px;

}

.dropdown:hover .dropdown-menu {

    display: block;

    margin-top: 0; // remove the gap so it doesn't close

 }

.divider{

	height: 1px;

	background-color: #566e87;

	width: 80%;

	margin: auto;

}

.divider-white{

	display: inline-block;

	height: 3px;

	background-color: #fff;

	width: 100%;

}



/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */

.flip-box {

  	background-color: transparent;

  	width: 139px;

  	height: 199px;

  border: 0px solid #f1f1f1;

  perspective: 1000px; /* Remove this if you don't want the 3D effect */

}



/* This container is needed to position the front and back side */

.flip-box-inner {

  position: relative;

  width: 100%;

  height: 100%;

  text-align: center;

  transition: transform 0.8s;

  transform-style: preserve-3d;

}



/* Do an horizontal flip when you move the mouse over the flip box container */

.flip-box:hover .flip-box-inner {

  transform: rotateY(180deg);

}



/* Position the front and back side */

.flip-box-front, .flip-box-back {

  position: absolute;

  width: 100%;

  height: 100%;

  -webkit-backface-visibility: hidden; /* Safari */

  backface-visibility: hidden;

}



/* Style the front side (fallback if image is missing) */

.flip-box-front {

  background-color: #fff;

  color: black;

}



/* Style the back side */

.flip-box-back {

  background-color: #FFFFFF;

  color: white;

  transform: rotateY(180deg);

}