@import url("reset.css");

a {  
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

.clickable{
	cursor:		pointer;	
}

.flex{
	display:	flex;
} 

.flex-dir-row{
	flex-direction:	row;	
}

.flex-dir-column{
	flex-direction:	column;	
}

.italic{
	font-style: italic;
}


.bold{
	font-weight: bold;
}

.align-items-center{
	align-items:	center;
}

.justify-content-center{
	justify-content:	center;	
}
.margTop20{
	margin-top:		20px;	
}

.t1{
	width: 80%;
	position: relative;	
	border: var(--blue-ribbon);
	padding: 5px;	
}

.banner{
	position: fixed;
	z-index: 9999;
	bottom: 0px;
	width: 100%;
	height: 35px;
	background-color: #2aa0cb;
	color: white;
	font-size: 16px;
	font-family: poppins;
}

.banner_cont{
	width: 				100%;
	justify-content: 	center;
	align-items: 		center;
	height: 			100%;
}

.banner_anchor{
	color:				white !important;
	text-decoration:	underline;
}

.banner_accept{
	padding:			 5px;
	border: 			1px solid blue;
	margin-left: 		25px;
	background: 		white;
	color: 				black;
}

.th{	
	text-align: center;
}

td {
  padding: 15px !important;
  border: 1px solid var(--fiord) !important;  
}

a:visited, a:hover, a:active {
  color: var(--blue);
}

.relative{
	position: relative;
}

.max{
	width:	100%;
	height:	100%;
}

.maxW{
	width:	100%;
}

.halfW{
	width:	50%;
}

:root { 
  --black: #000000;
  --blue: #2b7ff5;
  --blue-charcoal: #040b13;
  --blue-ribbon: #0965e61a;
  --fiord: #475671;
  --mirage: #111d2d;
  --mirage-2: #0f1a27;
  --regent-gray: #8190ac;
  --regent-gray-2: #8290ac;
  --vulcan: #08121e;
  --white: #ffffff;
  --light-bg: #0c1622;
  --ourproducts: #0e1c2c; 
  --font-size-l: 16px;
  --font-size-m: 14px;
  --font-size-s: 12px;
  --font-size-xl: 18px;
  --font-size-xxl: 36px;
  --font-size-xxxl: 44px;
 
  --font-family-lato: "Lato", Helvetica;
  --font-family-poppins: "Poppins", Helvetica;
}

.sizexxxl{
	font-size: var(--font-size-xxxl);
}

.sizexxl{
	font-size: var(--font-size-xxl);
}

.sizexl{
	font-size: var(--font-size-xl);
}

.sizel{
	font-size: var(--font-size-l);
}

.sizem{
	font-size: var(--font-size-m);
}

.lato-bold-white {
  color: var(--white);
  font-family: var(--font-family-lato);
  font-style: normal;
  font-weight: 700;
}

.bluebutton{
    font-size: 16px;
    border: 0;
    cursor: pointer;
    display:   inline-block;
    padding:   0.3em 1.2em;
    margin:    0.3em 0.3em 0.3em 0.3em;
    border-radius: 3px;
    box-sizing: border-box;
    text-decoration:none;
    font-weight:500;
    color:#FFFFFF;    
    text-align:    center;
    transition: all 0.2s;
    font-family: poppins;
    border: 1px solid rgb(43, 127, 245);
    background-color:#0e1c2c;
}


.bluebutton:hover{
   	background-color:  var(--blue);
}
.poppins-normal-regent-gray{
  color: var(--regent-gray);
  font-family: var(--font-family-poppins); 
}

.poppins-normal-regent-gray-14px {
  color: var(--regent-gray);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.poppins-normal-regent-gray-16px {
  color: var(--regent-gray);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 400;
}


.poppins-normal-regent-gray-12px {
  color: var(--regent-gray);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-s);
  font-style: normal;
  font-weight: 400;
}

.poppins-normal-regent-gray-14px-2 {
  color: var(--regent-gray-2);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 400;
}

.poppins-bold-white-18px {
  color: var(--white);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 700;
}

.poppins-semi-bold-white{
  color: var(--white);
  font-family: var(--font-family-poppins);
  font-style: normal;
  font-weight: 600;	
}

.poppins-semi-bold-white-14px {
  color: var(--white);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-m);
  font-style: normal;
  font-weight: 600;
}

.lato-bold-white-36px {
  color: var(--white);
  font-family: var(--font-family-lato);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 700;
}

.lato-bold-white-H1{
  color: var(--white);
  font-family: var(--font-family-lato);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 700;
  margin-top: 20px;
}

.lato-bold-white-H2{
  text-align: center;
  color: var(--white);
  font-family: var(--font-family-lato);
  font-size: var(--font-size-xxl);
  font-style: normal;
  font-weight: 700;
  margin-top: 20px;	
}

.lato-bold-H3{  
  color: var(--regent-gray);
  font-family: var(--font-family-lato);
  font-size: var(--font-size-xl);
  font-style: normal;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 10px;	
}

.lato-bold-white-H1-2{
  color: var(--white);
  font-family: var(--font-family-lato);
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  margin-top: 20px;
}

.poppins-bold-white-16px {
  color: var(--white);
  font-family: var(--font-family-poppins);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 700;
}

.lato-bold-white-44px {
  color: var(--white);
  font-family: var(--font-family-lato);
  font-size: var(--font-size-xxxl);
  font-style: normal;
  font-weight: 700;
}

.border-1px-blue {
  border: 1px solid var(--blue);
}

.border-1px-fiord {
  border: 1px solid var(--fiord);
}

/* Mobile Nav*/
.top-nav {
  z-index:	10;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  color: var(--blue);
  padding: 1em;
  cursor: pointer;
}

.menu {
  display: flex;
  z-index:	200;
  flex-direction: row;
  list-style-type: none;
  margin: 0;
  padding: 0; 
}

.menu > li {
  margin: 0 1rem;  
}

.menu-button-container {
  display: none;
  height: 100%;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#menu-toggle {
  display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: #ffffff;
  position: absolute;
  height: 4px;
  width: 30px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}

.menu-button::before {
  content: '';
  margin-top: -8px;
}

.menu-button::after {
  content: '';
  margin-top: 8px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}

.unsubscribe_container{
	display:flex; 
	color: white;	
	width:	100%;
	min-height:	300px;
	text-align: center;
	justify-content: center;
	align-items: center;
}

@media (max-width: 700px) {
  .menu-button-container {
    display: flex;
  }
  .menu {
    position: absolute;
    top: 0;
    margin-top: 50px;
    left: 0;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;    
  }
  #menu-toggle ~ .menu li {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    visibility: hidden;
  }
    
  #menu-toggle:checked ~ .menu li {
  	visibility: visible;
    border: 1px solid #333;
    height: 3em;
    padding: 0.5em;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .menu > li:hover{
  	background: var(--blue) !important;
  }
  
  .menu > li {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0.5em 0;
    width: 100%;
    color: white;
    background-color: black;
    font-size: 22px;
  }
  .menu > li:not(:last-child) {
    border-bottom: 1px solid #444;
  }
}


@media (max-width: 700px) {
	.banner{
		position: fixed;
		z-index: 9999;
		bottom: 0px;
		width: 100%;
		height: 65px;
		background-color: #2aa0cb;
		color: white;
		font-size: 14px;
		font-family: poppins;
		padding-left:15px;
		padding-right:15px;
	}
	
	.banner_accept{
		padding:			 5px;
		border: 			1px solid blue;
		margin-left: 		15px;		
	}
	
	.unsubscribe_container{
		min-height:	200px;	
		padding:	30px;
	}
	
}