@font-face {font-family: "Futura Extra Bold";
  src: url("/fonts/futura-extra-bold/db7c22c7cd9995cd1cf628cbb83af43c.eot"); /* IE9*/
  src: url("/fonts/futura-extra-bold/db7c22c7cd9995cd1cf628cbb83af43c.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("/fonts/futura-extra-bold/db7c22c7cd9995cd1cf628cbb83af43c.woff2") format("woff2"), /* chrome、firefox */
  url("/fonts/futura-extra-bold/db7c22c7cd9995cd1cf628cbb83af43c.woff") format("woff"), /* chrome、firefox */
  url("/fonts/futura-extra-bold/db7c22c7cd9995cd1cf628cbb83af43c.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("/fonts/futura-extra-bold/db7c22c7cd9995cd1cf628cbb83af43c.svg#Futura Extra Bold") format("svg"); /* iOS 4.1- */
}

@font-face {font-family: "AG_Futura";
  src: url("/fonts/ag-futura-font/97bc69b04c428021614d3b50c24a43ed.eot"); /* IE9*/
  src: url("/fonts/ag-futura-font/97bc69b04c428021614d3b50c24a43ed.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("/fonts/ag-futura-font/97bc69b04c428021614d3b50c24a43ed.woff2") format("woff2"), /* chrome、firefox */
  url("/fonts/ag-futura-font/97bc69b04c428021614d3b50c24a43ed.woff") format("woff"), /* chrome、firefox */
  url("/fonts/ag-futura-font/97bc69b04c428021614d3b50c24a43ed.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("/fonts/ag-futura-font/97bc69b04c428021614d3b50c24a43ed.svg#AG_Futura") format("svg"); /* iOS 4.1- */
}

@font-face {font-family: "FuturaTEE Bold";
  src: url("/fonts/futura-tee-bold/d98cd7ada31a7901ec0e15a7af6bb396.eot"); /* IE9*/
  src: url("/fonts/futura-tee-bold/d98cd7ada31a7901ec0e15a7af6bb396.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("/fonts/futura-tee-bold/d98cd7ada31a7901ec0e15a7af6bb396.woff2") format("woff2"), /* chrome、firefox */
  url("/fonts/futura-tee-bold/d98cd7ada31a7901ec0e15a7af6bb396.woff") format("woff"), /* chrome、firefox */
  url("/fonts/futura-tee-bold/d98cd7ada31a7901ec0e15a7af6bb396.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("/fonts/futura-tee-bold/d98cd7ada31a7901ec0e15a7af6bb396.svg#FuturaTEE Bold") format("svg"); /* iOS 4.1- */
}

@font-face {font-family: "Alternate Gothic No1 D";
  src: url("/fonts/Alternate Gothic No1 D/@font-face/173aa2c75698b66f4ebbd3b63f4b8030.eot"); /* IE9*/
  src: url("/fonts/Alternate Gothic No1 D/@font-face/173aa2c75698b66f4ebbd3b63f4b8030.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("/fonts/Alternate Gothic No1 D/@font-face/173aa2c75698b66f4ebbd3b63f4b8030.woff2") format("woff2"), /* chrome、firefox */
  url("/fonts/Alternate Gothic No1 D/@font-face/173aa2c75698b66f4ebbd3b63f4b8030.woff") format("woff"), /* chrome、firefox */
  url("/fonts/Alternate Gothic No1 D/@font-face/173aa2c75698b66f4ebbd3b63f4b8030.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("/fonts/Alternate Gothic No1 D/@font-face/173aa2c75698b66f4ebbd3b63f4b8030.svg#Alternate Gothic No1 D") format("svg"); /* iOS 4.1- */
}

@font-face {font-family: "Alternate Gothic No2 D";
  src: url("/fonts/Alternate Gothic No2 D/@font-face/f241b798d1212fcb4f200ec30a3a89d6.eot"); /* IE9*/
  src: url("/fonts/Alternate Gothic No2 D/@font-face/f241b798d1212fcb4f200ec30a3a89d6.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("/fonts/Alternate Gothic No2 D/@font-face/f241b798d1212fcb4f200ec30a3a89d6.woff2") format("woff2"), /* chrome、firefox */
  url("/fonts/Alternate Gothic No2 D/@font-face/f241b798d1212fcb4f200ec30a3a89d6.woff") format("woff"), /* chrome、firefox */
  url("/fonts/Alternate Gothic No2 D/@font-face/f241b798d1212fcb4f200ec30a3a89d6.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("/fonts/Alternate Gothic No2 D/@font-face/f241b798d1212fcb4f200ec30a3a89d6.svg#Alternate Gothic No2 D") format("svg"); /* iOS 4.1- */
}

@font-face {font-family: "Alternate Gothic No3 D";
  src: url("/fonts/Alternate Gothic No3 D/@font-face/1ab27b1a02a7fb1c4ebe805cff2694c3.eot"); /* IE9*/
  src: url("/fonts/Alternate Gothic No3 D/@font-face/1ab27b1a02a7fb1c4ebe805cff2694c3.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("/fonts/Alternate Gothic No3 D/@font-face/1ab27b1a02a7fb1c4ebe805cff2694c3.woff2") format("woff2"), /* chrome、firefox */
  url("/fonts/Alternate Gothic No3 D/@font-face/1ab27b1a02a7fb1c4ebe805cff2694c3.woff") format("woff"), /* chrome、firefox */
  url("/fonts/Alternate Gothic No3 D/@font-face/1ab27b1a02a7fb1c4ebe805cff2694c3.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("/fonts/Alternate Gothic No3 D/@font-face/1ab27b1a02a7fb1c4ebe805cff2694c3.svg#Alternate Gothic No3 D") format("svg"); /* iOS 4.1- */
}





/* --- Lookup --- */

.lookup{
	/* Always use these definitions, search and replace for changes. */
	
	color: #ffffffff; /* -White */
	color: #ffffff16; /* -White 10% */
	color: #ffffff66; /* -White 40% */
	color: #ffffff99; /* -White 60% */
	color: #ffffffcc; /* -White 80% */
	
	
	color: #000000; /* -Black */
	color: #ff7e00; /* -Orange */
	
	color: #ffffffff; /* -White */ /* White */
	color: #ff477d; /* Pink */
	
	font-family: "AG_Futura";
	font-family: "Alternate Gothic No3 D"; 
}

/* --- Html --- */

html{
	/* Define general font size here, rem is based on this */
    font-size: 19px;
    -moz-osx-font-smoothing: grayscale;
    font-family: "Alternate Gothic No3 D";
    font-weight: 400;
    letter-spacing: 1px;
    
    background-color: #ffffffcc; /* -White 80% */
	color: #ffffffff; /* -White */
	
	/*background-image: url("../../ref-images/images.jpeg");*/
    background-size: 960px auto;
	background-color:black;
}

body{

}

.ingress{
    font-family: "FuturaTEE Bold";
    color: #ffffffff; /* -White */
    font-size: 32px;
}

.small-phone .ingress{
    font-size: 20px;
}

.small-phone{
    font-size: 15px;
}

.fill-browser{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
}

.page{
	display: table;
	width:100%;
	height:100%;
}

.fixed-top{
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:1000;
}
.fixed-bottom{
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	z-index:1000;
}

.fixed-top-left{
	position:fixed;
	top:0;
	left:0;
	z-index:1001;
}
.fixed-top-right{
	position:fixed;
	top:0;
	right:0;
	z-index:1001;
}
.fixed-bottom-left{
	position:fixed;
	bottom:0;
	left:0;
	z-index:1001;
}
.fixed-bottom-right{
	position:fixed;
	bottom:0;
	right:0;
	z-index:1001;
}

.top,
.middle,
.bottom{
	display: table-row;
}
.top,
.bottom
{
	height: 0;
}
.middle{
	height: auto;
}

.max-width{
    display: block;
    margin: 0 53px;
	position:relative;
}

/* --- Html --- */

a,
a:active,
a:hover,
a:visited
{
    color: #ffffffcc; /* -White 80% */
    text-decoration: none;
}

/* --- Headline --- */

h1,
h2,
h3,
h4,
h5
{
    display: block;
    font-family: "Alternate Gothic No3 D";
    font-weight: 400;
}

h1
{
    width: 1028px; 
    height:232px;
    margin: 0px auto 0 auto;
    background-image: url("/images/magneticlake_big-logo_white-transparent.png");
    background-size: contain;
     -webkit-text-fill-color: transparent;
	
}

h2
{
    width: 512px; 
    height:116px;
    margin: 0px auto 0 auto;
    background-image: url("/images/magneticlake_big-logo_white-transparent.png");
    background-size: contain;
     -webkit-text-fill-color: transparent;
	
}

body.one h1,
body.one h2
{
    font-size: 95px;
    -webkit-text-fill-color: transparent;
	
}

h3,
h4,
h5
{
    font-size: 24px;
}

.small-phone h1,
.small-phone h2
{
    font-size: 32px;
}

.small-phone h3,
.small-phone h4,
.small-phone h5
{
    font-size: 15px;
}

h5
{
    text-align: inherit;
}


/* --- Header --- */

.header
{
	padding-top: 45px;
	line-height: 24px;
	
}


.navigation,
.small-phone .navigation
{
    /*text-align: center;*/
    padding: 0;
    margin: 0;
}


.navigation li
{
    display: inline;
    margin: 0;
    padding: 0;
	text-transform: uppercase;
}

.navigation li a
{
    display: inline-block;
    font-size: 10px;
    text-align: center;
    padding: 5px 15px;
    margin-right: 13px;
    
    font-family: "FuturaTEE Bold";
    font-weight: 400;
	border-style:solid;
	border-width:1px;
	
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	
	background-color: #ffffff16; /* -White 10% */
	color: #ffffffff; /* -White */
	backdrop-filter: blur(20px);
}

.navigation li a,
.navigation li a:active,
.navigation li a:hover,
.navigation li a:visited
{
	color: #ffffffcc; /* -White 80% */
	border-color: #ffffff66; /* -White 40% */
	
	
}

.small-phone .navigation li a
{
    padding: 0px 9px;
}

.navigation li a.selected
{
    background-color: #ffffffff; /* -White */
	color: #000000; /* -Black */
}


/* --- Body --- */

.body{
	padding: 0 0 110px 0;
}

body.phone .body{
	padding-bottom: 60px;
}

.small-phone .body{
	padding-bottom: 50px;
}

/* --- Footer --- */



.footer
{
   	padding-bottom: 45px;
    border-style: solid;
	line-height: 24px;
}

.footer a,
.footer a:active,
.footer a:hover,
.footer a:visited
{
    color: #ffffffcc; /* -White 80% */
}


.footer-logo
{
    width: 60px;
    display: inline;
    cursor: pointer;
}

.footer-navigation
{
    margin: 15px auto 0 auto;
}

.footer-navigation li
{
    display: inline-block;
    list-style-type: none;
    letter-spacing: 4px;
    position: relative;
    margin: 0 10px 0 10px;
	text-align:center;
	font-family: "FuturaTEE Bold";
}




/* --- Body --- */


.paragraph,
.subh,
.youtube-video-iframe,
h1,
h2,
h3,
h4,
h5,
img,
p,
ul
{
    margin-top: 14px;
}



.text-block-odd{
	padding-top: 30px;
	overflow:hidden;
	padding-bottom: 54px;
}

.text-block-odd .paragraph,
.text-block-odd .subh,
.text-block-odd .youtube-video-iframe,
.text-block-odd h2,
.text-block-odd h3,
.text-block-odd h4,
.text-block-odd h5,
.text-block-odd img,
.text-block-odd p,
.text-block-odd ul
{
	line-height:23px;
    margin-left: 150px;
    margin-right: 150px;
    text-align: center;

}

.text-block-odd a{
	line-height:23px;
}
   

.small-phone .paragraph,
.small-phone .subh,
.small-phone .youtube-video-iframe,
.small-phone h1,
.small-phone h2,
.small-phone h3,
.small-phone h4,
.small-phone h5,
.small-phone img,
.small-phone p,
.small-phone ul
{
    margin-top: 25px;
}

ul li
{
    margin-top: 15px;
    text-align: left;
    list-style-type: none;
}

.block
{
    padding: 80px 0 0;
	overflow: hidden;
}

.phone .block{
    padding: 30px 0 0;
}

.small-phone .block{
    padding: 20px 0 0;
}



.content
{
    padding: 0 45px 0 0;
}

.small-phone .content
{
    padding: 0 20px 0 0;
}

.row
{
    display: table;
    table-layout: fixed;
    width: 100%;
}

.column
{
    padding: 0 0 0 45px;
	display:table-cell;
	vertical-align:top;
}

.small-phone .column
{
    padding: 0 0 0 20px;

}

.small-phone .column,
body.phone .column
{
	display:block;
}



.part
{
    display: table;
    width: 100%;
}


/* --- Part Children --- */

.column>.column
{
    padding: 0;
}

.image-area,
.text-area
{
    margin: 40px 0 0;
    text-align: center;
    display: table-cell;
    vertical-align: top;
}

.text-area.align-center
{
    text-align: center;
}

.text-area.align-right
{
    text-align: right;
}

img
{
    min-height: 20px;
    display: block;
}

.youtube-video-iframe,
img
{
    width: 100%;
}

.long-text
{
    text-align: justify;
    font-family: "AG_Futura";
    font-size: 17px;
    text-transform: none;
	letter-spacing:0px;
	line-height:25px;
}




/* --- Specials --- */

.big-logo
{

    

}

.small-logo
{
	width: 200px;
	margin: 55px auto -71px auto;
}

.pictogram {
    width: 100px;
    margin: 72px auto -75px auto;
    border-radius: 10px;
}

.phone .pictogram {
    width: 100px;
    margin: 58px auto -17px auto;
    border-radius: 10px;
}

.small-phone .pictogram {
    width: 60px;
	margin: 53px auto -11px auto;
    border-radius: 10px;
}

/* --- Store Link --- */

a.store-link,
a:active.store-link,
a:hover.store-link,
a:visited.store-link
{
    display: inline-block;
    text-align: center;
    margin: 15px 8px 0 8px;
    
    font-family: "Futura Extra Bold";
    font-weight: 400;
    overflow: hidden;
    padding: 0;
    width: 100%;
	max-width: 215px;
    height: 114px;
    background-color: #ffffffff; /* -White */ /* White */
    font-size: 12px;
    cursor: pointer;
    color: #ffffffcc; /* -White 80% */
	border-radius:6px;
}

.small-phone a.store-link,
.small-phone a:active.store-link,
.small-phone a:hover.store-link,
.small-phone a:visited.store-link {
    width: 100%;
	max-width: 215px;
    height: 75px;
}

.store-link .logo
{
    display: block;
    clear: both;
    background-size: 100%;
    width: 44px;
    height: 44px;
    background-image: url(/images/apple-black-128x128.png);
    margin: 20px auto 11px auto;
}

.small-phone .store-link .logo
{
    background-size: 100%;
    width: 20px;
    height: 20px;
    background-image: url(/images/apple-black-128x128.png);
    margin: 15px auto 7px auto;
}

.store-link.google-play-link .logo
{
    background-image: url(/images/android-black-128x128.png);
}

/* --- Page index --- */

.page-index{
	display:table;
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	max-width:700px;
	margin: 0 auto;
	vertical-align:top;
}

.page-index-left-side,
.page-index-right-side
{
	margin:0;
	padding:0;
	display:table-cell;
	width:25%;
	overflow:hidden;
	vertical-align:top;
	
}

.page-index-center{
	margin:0;
	padding:0;
	display:table-cell;
	text-align:center;
	width:50%;
}

.page-index-center span{
	display:inline;
	cursor:default;
}

.small-phone .page-index-center{
	font-size:11px;
}

.page-index-left-side a,
.page-index-right-side a
{
	display:inline;
    font-size: 10px;
    padding: 11px 15px;
    margin: 0 8px;
    
    font-family: "Futura Extra Bold";
    font-weight: 400;
    background-color: #ff7e00; /* -Orange */
	color: #ffffffff; /* -White */ /* -White */
}

.small-phone .page-index-left-side a,
.small-phone .page-index-right-side a{
    padding: 2px 2px;
}

.page-index-right-side{
	text-align:right;
}
	
	



.button{
	display: inline-block;

	width: auto !important;
	padding: 14px 59px;
	margin-top: 23px;
	

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;

	background-color: #ffffff16; /* -White 10% */
	color: #ffffffff; /* -White */
	
	backdrop-filter: blur(14px);
}

.email-list{
	overflow:hidden;
	text-align: center;
}

.input{
	display: inline-block;

	width: 250px;
	height:51px;
	padding: 10px 20px;
	margin-top: 23px;
	font-family: "Alternate Gothic No3 D";
	font-size:19px;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;

	border-style: none;
	margin-right:20px;

}

.button,
.button:active,
.button:hover,
.button:visited
{
    color: #ffffffff; /* -White */
	position:relative;
}


.button::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius:50px; 
  padding:1px; 
  background:linear-gradient(
		330deg, 
		#4967ff,
		#5993ff,
		#7fe9ff,
		#f5f5ff,
		#eb94fe,
		#ea5dfb,
		#eb53ce,
		#f06097,
		#f39191,
		#f2c98d,
		#e1e087,
		#b3df8d,
		#71d3a6,
		#55b8df,
		#4987fb,
		#4367fd
		);
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out; 
  mask-composite: exclude; 
}




/* Background */


#container{
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
}

.wrapper{
  position:fixed;
  top:0px;
  left:0px;
  width: 100%;
  height:100%;
  text-align: center;
}

.grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, #152a8e, #b1376c); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, #152a8e, #b1376c); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #152a8e, #b1376c); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, #152a8e, #b1376c); /* Standard syntax */
}
.metaball-canvas{
  width:100%;
  height:100%;
  position: fixed;
  top:0;
  left:0;
}


.navigation-left{
	position: absolute;
	right: 0;
	top: 0;
	margin: 0;
}

.navigation-left li{
    display: inline;
}

.navigation-left li a{
    display: inline-block;
    font-size: 10px;
    text-align: center;
    padding: 11px 4px 5px 4px;
    margin-left: 8px;
}

.navigation-left li a svg{
	height:15px;
}

a{
	cursor:pointer;
}

.navigation .li{
	cursor:pointer;
}





.gradient-circle {
  height: 10rem;
  width: 10rem;
  --b: 5px; /* border width*/
  display: inline-block;
  margin: 10px;
  z-index: 0;
  position: relative;
}

.gradient-circle div,
.gradient-circle div:before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.gradient-circle div {
  -webkit-mask: linear-gradient(0deg, #fff, transparent 96%);
}

.gradient-circle div:before {
  content: "";
  background: var(--c, linear-gradient(to top, #5454d4, rgba(249, 116, 104)));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--b) - 1px), #fff calc(100% - var(--b))) content-box;
  border-radius: 50%;
  padding: 1px;
}




.email-list{

}

.email-list #mc_embed_signup{
	background:none;
	margin: 0 auto;
}

.email-list #mc_embed_signup h2{
	display:none;
}

.email-list #mc_embed_signup .brandingLogo{
	display:none;
}

.email-list #mc_embed_signup .indicates-required{
	display:none;
}

.asterisk{
	display:none;
}

.email-list #mc_embed_signup .helper_text {
	display:none;
}

.email-list #mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error{
	display:none !important;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.email-list #mc_embed_signup .mc-field-group{
	display:inline;
	width:auto;
}

.email-list #mc_embed_signup .mc-field-group label{
	display:none;
}

.email-list #mc_embed_signup .mc-field-group input.required.email{
	display:inline-block;
	width:300px;
}

.email-list #mc_embed_signup .button{
	display:inline;
	font-family: "Alternate Gothic No3 D";
    font-weight: 400;
    letter-spacing: 1px;
	font-size:19px;


}

.email-list #mc_embed_signup .foot{
	display:inline;
}

.email-list .optionalParent{
	display:inline;
}

.email-list #mc_embed_signup #mce-error-response,
.email-list #mc_embed_signup #mce-success-response{
    color: #ffffff;
    text-align: center;
    display: inline;
    width: 100%;
    font-family: "Alternate Gothic No3 D";
    font-weight: 400;
    letter-spacing: 1px;
    font-size:19px;
}

.email-list #mc_embed_signup form{
	text-align:center;
}