/* CSS Document */ 
*,
*::before,
*::after {max
box-sizing: border-box;
Margin: 0px;
Padding: 0px;
}

/* Set brand colours and root font-size */

:root{
    --turquoise: rgba(22,255,225,1.00);
	--green: rgba(195,212,158,1.00);
	--toggle: rgba(168, 14, 14,0.00);
    font-size: 11.5pt;
	--box-shadow: 5.5px 5.5px 10px 0 rgba(0,0,0,0.2);
}

 /*Load the brand fonts 
Montserrat corresponding weights:
Regular=400
SemiBold=600
SemiBoldItalic=600


*/

@font-face {
	font-family:"Montserrat_Variable"; 
	font-weight: 400. 600;
	src:url("web-files/fonts/Montserrat-VariableFont_wght.ttf") format('truetype');
}



body{
/* background-color:rgba(245,245,245,0.25) */
	/* background-color:rgba(241,241,241,0.50) */
	/* background-color:rgba(233,238,238,0.40) */

}


b{
	font-weight:600;
}

p{
	font-family:"Montserrat_Variable";
	font-weight:400;
	font-size:1rem;
	color:black
}	
		
p2{
	font-family:"Montserrat_Variable";
	font-weight:400;
	font-size:1rem; 
	color:var(--turquoise);			
}
		
p3{
	font-family:"Montserrat_Variable";
	font-weight:600;
	font-size:1rem;
	color:black
}		
		
h1 {
	font-family:"Montserrat_Variable";
	font-weight:400;
	font-size: 3.236rem;
	color: black;
}	
		
h2{
	font-family:"Montserrat_Variable";
	font-weight:500;
	font-size: 1.618rem;
	color: black;
	line-height: 37px;
	
}	
	
/*First create the container that will be nested inside of every section where applicable. This is to create a consistent width a way to toggle a border on/off to better understand the page's content layout as I build */


/*This is the original container from which all containers will start their version:	

.container{
	
	width:90vw;
	height: max(400px,25vh);
	margin:auto;
	border:2px var(--toggle) black;
	align-content: center;
}	
		
end */			
		
		
/* NAV TO DO */
/* nav is sticky to maintain its visibility while scrolling*/
	
container-all {
	max-width=1977px;
}

nav{
	border: dashed 1px var(--toggle);
	position:sticky;
	top:0px;
	background-color:white;
	box-shadow:var(--box-shadow);
	/* This number is set high to attempt to maintain top position while building */	
	z-index:10;
	
}
		
.nav-container{
	
	width:90vw;
	min-width:349px;
	height: 81.406px;
	margin:auto;
	border: 1px dashed var(--toggle);
	padding-top:10px;
	
}	

		
.nav-container_m{
	
	width:90vw;
	height: 81.406px;
	margin:auto;
	border: 1px dashed var(--toggle);
	padding-top:10px;
	
}	

#homelink {
	float:left;
	height:148px;
	width: 138px;
	background-color:red;
	position:absolute;
	left: 15px;

		
}
			
		
#nav-logo{
	float:left;
	height:100%;
	width: 100px;
	/* border:dotted pink 1px; */
	background-image:url("web-files/images_2/ms-monogram-with-name-encircled_black.svg");
	background-size: 70%;
	background-repeat:no-repeat;
	position:relative;
	
	
	}

#nav-logo-mobile{
	float:none;
	height:100%;
	width: 70px;
	background-image:url("web-files/images_2/ms-monogram-with-name-encircled_black.svg");
	background-size: 100%;
	background-repeat:no-repeat;
	position:relative;
	left:43px;
	bottom: 17px;
}
	
/* HERE is "a" being styled for its first time */	
		
#myLinks,  a{
	color:black;
	text-decoration:none;
	font-family:"Montserrat_Variable";
	font-weight: 400;
	font-size: 10.63pt;
	/*margin-inline:10px;*/
	
}

		
#myLinks a:hover{
	cursor:pointer;
	color:var(--turquoise);
	text-style:none;
	
}
		
#myLinks a:active{
	color: var(--turquoise);
	text-style:none;
}	
		
		
		
	

.link1, .link2, .link3, .link4, .link5{
	padding-top:8px;


}

		
		
/*Tablet navbar show-hide menu dropdown*/
/*Add the styles for the hide/reveal drop down menu for tablet media screens */ 	
		
	
#myLinks, #myLinks2{
	display:flex;
	list-style:none;
	justify-content: space-evenly; 
	
}	
	

#QUOTE{
	COLOR:RED;
	display:flex;
	list-style:none;
	justify-content: space-evenly; 
	padding: 12px 0px 0px 50px;
}	

#myLinks_B,{
	display:flex;
	list-style:none;
	justify-content: space-evenly;
	padding: 12px 0px 0px 50px;
}	

#myLinks_C,{
	display:flex;
	list-style:none;
	justify-content: space-evenly;
	padding: 12px 0px 0px 50px;
}	



.linkA, .linkB, a2{
	padding-top:7px;
}

.nav-countdown1-tablet{

	width: 40ch;
	font-family: "Montserrat_Variable";
	font-weight:400;
	font-size: 15.33pt;
	color: var(--turquoise);
	letter-spacing: 1.7px;
	text-align:center;
	position:relative;
	left:9px;
	flex-basis: 150px;
}



a2 {
	position: absolute;
	color:black;
	text-decoration:none;
	font-family:"Montserrat_Variable";
	font-weight: 400;
	font-size: 10.63pt;
	margin-inline:10px;
	
}	
		
a2:hover {
	cursor:pointer;
	color:var(--turquoise);
	text-style:none;
}

		
.container ul{
		list-style:none;
	}		
	
.container ul li{
		list-style:none;
		width: 10px;
		height: 30px;
		background: none;
		margin: 10px;
		cursor: pointer;
		border-radius: 5px;
		box-shadow: 0 0 5px rgba (0,0,0,.9);
		transform: translate(-50%, -50%);
		font-size: 20px;
		display:inline-block;
	}				

ul a2:hover .content{
		width: 200px;
		transition: all 0.5s ease;
}			
		
		
ul a2:hover .content p{
		opacity:1;
	
}
		


a3{
	color:red;
	text-decoration:none;
	font-family:"Montserrat_Variable";
	font-weight: 400;
	font-size: 10.63pt;
	margin-inline:10px;
}

		
a3:hover{
	cursor:pointer;
	color:var(--turquoise);
	text-style:none;
	
}
		
a3:active{
	color: var(--turquoise);
	text-style:none;
}	
	





		
.content {
	
	position:absolute;
	top: 30px;
	left: -9vw;
	width: 0;
	height: 20vw;
	border: dashed 1px var(--toggle);
	transition: all 0.8s 0.2s ease;
	
}
	
		
.content p{
		padding: 10px 65px 10px 65px;
		text-transform:	uppercase;
		font-family: "Montserrat_Variable";
		font-size: 10.63pt;
		font-weight: 400;
		line-height: 20px;
		text-align:left;
		align-items:center;
		transition: all 0.8s ease;
		opacity: 0;
		/* background-color: rgba(0,0,22,.8); */
		white-space:nowrap;
		
		
}	
		

.content p:hover {
			background-color:var(--turquoise);
}	

.content a:hover {
			color:white;
}		
				
			

nav{
	
}
		
.nav-countdown1{
	opacity:0;
	width: 40ch;
	font-family: "Montserrat_Variable";
	font-weight:400;
	font-size: 15.33pt;
	color: var(--turquoise);
	letter-spacing: 1.7px;
	text-align:center;
	position:relative;
	left:9px;
	flex-basis: 150px;
}

.countdown-container {
	border:1px dashed var(--toggle);
	width:20px;
	height:300px;
	position:fixed;
	bottom:0vh;
	right:2vw;
	z-index:200;
}	
		


		
.nav-countdown2{
	font-family:"Montserrat_Variable";
	font-weight:400;
	font-size: 1rem;
	color: var(--turquoise);
}			

		
#MS-vertical{
	opacity:0%;
	font-family:"Montserrat_Variable";
	font-weight:400;
	font-size: 15.96pt;
	color: var(--turquoise);
}
		
.nav-countdown2, #MS-vertical{
	
	writing-mode:vertical-lr;	
	width:25px;
	height: 300px;
	}

		
/* Mobile navbar - hamburger show/hide menu display */

/* style the navigation menu */
.mobilenav {
	overflow:hidden;
	background-color: #white;
	position: relative;
	height: 2000px;
	width:120vw;
	left: -10vw;
	top: -19vh;
	padding-top:50px;
}
	
	

/* Hide the links inside the navigation menu (except for logo/home) */
.mobilenav #myLinks3 {
	display:none;
}
		
		
/* Style navigation menu links */
.mobilenav a {
	color:white;
	background-color:black;
	height:22vh;
	padding-top:6vh;
	text-decoration: none;
	font-size: 10.63pt;
	font-weight: 400;
	font-family:"Montserrat_Variable";
	display: block;
	cursor:pointer;
	transition: all 0.5s ease;
	padding-left:45vw;
}
		


/* Style the hamburger menu */
.mobilenav a.icon {
	background: none;
	display: inline-block;
	position: fixed;
	top:15px;
	right: -95px;
	width:20px;
	height: 40px;
	text-style:none;
	cursor: pointer;
}
		
.ham-menu span{
	height:5px;
	width:55px;
	background-color: var(--turquoise);
	border-radius:25px;
	position:absolute;
	top:10px;
	right: 40%;
	transform:translate(-50%,-50%);
	transition: .3 ease;
}

.ham-menu span:nth-child(2){
	top:25px
}

.ham-menu span:nth-child(3){
	top:40px;
}
	
	
	
	
}

/* Add a enlarged background color on mobile hamburger menu */
		
.mobilenav a:hover{
	color:black;
	background-color:var(--turquoise);
	font-weight: 400;
}		
		
	
		
a:hover {
	color:var(--turquoise);	
	transition: all 0.5s ease;
	
}

/* Style the active link (or home/logo) */

.active {
	color: white;
	transition: all 0.5s 0.3s ease;
	height: 1vh;
	}
	
	
/*This concludes the 3 dynamic nav sections */
		
	
		
/*The header section CSS */		
header {
	
}	

	
.header-container {
	/*padding:150px 0px 100px 0px;*/
	
	width:100vw;
	max-width: 2034px;
	height: auto;
	margin:auto;
/*Toggle this border,on and off as a guide*/
	border:1px dashed var(--toggle);
	align-content: center;	
	
}
	
.header-tile-container {
	display: flex;
	flex-wrap:  wrap-reverse;
	justify-content: center;
	padding: 0px;
	margin: 0px;
	list-style: none;
}
	
.header-item1, .header-item2, .header-item3 {
	height: 360px;
	border:dashed var(--toggle) 1px;
	background-size:cover;
	align-content:center;
	align-items:center;
	line-height: 31px;
}
		
.header-item1-b {	
	flex: 0 0 67ch;
	padding:0px 50px 0px 50px;
	height: 360px;
	border:dashed var(--toggle) 1px;
	background-size:cover;
	align-content:center;
	align-items:center;
	line-height: 31px;
	text-justify: justify;
	text-align:center;
	text-wrap:wrap;
		
}		

.header-item1{
	flex: 0 .3 73ch;
	padding-right:6ch
}	
	
.header-item2 {
	flex:0 1 60px;
	
}			
		
.header-item3 {
	flex: 0 .2 360px;
}	


/*This concludes the header section CSS */		
		

		
		
		
/*hello section CSS*/
		
		
		
hello {
}	
	
.hello-container {
	width:90vw;
	height: auto;
	margin:auto;
/*Toggle this border on and off as a guide*/
	border:1px var(--toggle) dashed;
	
	
}
	
.hello-tile-container, .hello-tile-container2 {
	display: flex;
	justify-content: center;
	align-items:center;
	margin: 0px 10px 0px 10px;
	list-style: none;
	border:dashed var(--toggle) 1px;
}
		
.hello-tile-container2 {
	margin-top:10px;
	margin: auto;
	width:96%;
	border: var(--toggle);
	
}
		
		
		
	

.hello-item1, .hello-item2{
	width: 844px;
	margin-top:50px;
	height:auto;
	border:dashed var(--toggle) 1px;
	Text-align: left;
	column-count: 2;
	column-gap: 50px;
}	
		
	
.hello-item1{
	margin-top:50px;
	
}	
		
.hello-item2{
	margin-top:0px;
}

		
/*mobile version*/
		
.hello-item1_m, .hello-item2_m{
	width: 340px;
	margin-top:50px;
	height:auto;
	border: var(--toggle);
	Text-align: left;
	column-count: 1;
	column-gap: 0px;
	list-style:none;
}	
		
.hello-item1_m{
	margin-top:50px;
	
}	
		
.hello-item2_m{
	margin-top:0px;
}	
		
/*end mobile version*/		
		

		
.hello-item3{
	height:100%;
	margin-top:10px;
	border: black 2px solid;
	border-radius: 10px;
	display:grid;
	grid-template-rows: 23px auto 23px auto 23px auto 23px auto 23px;
	grid-template-columns: 23px 23px 1fr 20px 1fr  20px 1fr 23px;
	grid-auto-rows:auto; 
	flex: 0 1 844px;
	
	
}	

/* mobile version */		
.hello-item3_m{
	height:100%;
	margin-top:10px;
	border: black 2px solid;
	border-radius: 10px;
	display:grid;
	grid-template-rows: 23px minmax(23px, auto) 23px auto 23px auto 23px auto 23px;
	grid-template-columns: 23px 23px 1fr 23px;
	grid-auto-rows:auto; 
	flex: 0 1 370px;
	
	
}		
		
		
hello h2{
	font-family:"Montserrat_Variable";
	font-weight:500;
	font-size: 15.007pt;
	column-span: all;
	line-height: 37px;
}	


		

/*This concludes the hello section */				
		
		
		
		
		
		
/*HERO SECTION */
		

/*OPTION All containers to could have a -main and -mobile x2 versions for responsive purposes;
container -Main width=90vw
container -Mobile width=98vw or 100vw		
		*/

		

.hero-container	{
	width:90vw;
	height: auto;
	margin:auto;
	border:1px dashed var(--toggle);
	align-content: center;		
}
	

		
.title {
		text-align:center;
		text-wrap: wrap;
		font-weight:700;
		font-size:4rem;
		text-align:center;
		position:relative;
		text-wrap:wrap;
		font-family:"Montserrat_Variable";
		color:white;
	}		
		
.hero-img{
	padding-top:100px;
	width:clamp(360px, 800px, 30vw);
	
			
}		

.hero-feature-container, .hero-feature-container2{
	display: flex;
	
	flex-flow: row wrap;
	justify-content: center;
	list-style: none;
}
		
.hero-feature-container h2{
	text-align:LEFT;
	font-family:"Montserrat_Variable";
	font-weight: 500;
	font-size:1rem;
	line-height: 10pt;
	color: white;
	padding-top:40px;
}
		
.hero-feature-container h1{
	font-family:"Montserrat_Variable";
	font-weight:600;
	font-size: 3.236 rem;
	color: white;
	z-index:1;
	
}		
	
.hero-feature-container h3{
	
	font-family:"Montserrat_Variable";
	font-weight:500;
	font-size: 1.618rem;
	color: black;
	line-height: 37px;
}	


.feature-item1 {
	
	border:1px var(--toggle) dashed;
	margin: 50px 2.5px 0px 2.5px;
	display: grid;
	width: 360px;
	height: 652px;
	/* now to add the grid to align the items as a set*/
	grid-template-rows:50px 100px 42px 55px 7px 96.2px 105px 25px 52px 42px;
	grid-template-areas:"1" "a" "b" "c" "d" "e" "f" "g" "h" "i";
	/* This specifies the unique heights of each row*/
	/* box-shadow: var(--box-shadow); */
	
	
}		
	
.PS-background{
			/*background-color:#151415;*/
			background-color:#79cece;
			height:198px;
			width:100%;
			grid-area:a;
			position:relative;
			z-index:-1;
			opacity:100%;
		}		


.feature-item1 button{
	color: black;
	font-family:"Montserrat_Variable";
	font-weight:400;
	font-size: 11.68pt;
	background-color: white;
	padding: 10px 23px 10px 23px;
	text-decoration: none;	
	box-shadow: 5px 5px 10px rgba(0,0,0,.2);
	border: none;
	cursor:pointer;
	grid-area:h;
	margin-inline: 10px 10px;
	width:300px;

}
		


.feature-item1 button:hover{
	border: 1px solid white;
	padding: 10px 23px 10px 23px;
	border: none;
	background-color: white;
	box-shadow: 5px 5px 10px rgba(0,0,0,.4);	
	cursor:pointer;
	font-weight:500;
}



.hero-feature-container2{
	border:1px dashed var(--toggle);
	margin-top:50px;
	height:150px;
}
		
.feature-title-item {
	padding-top:64.5px;	
}		

		
/* SignUp Form  Section */
/*Previously known as sectionC*/
		
.SignUpForm-container{

	width:90vw;
	margin:auto;
	border:1px dashed var(--toggle);
	align-content: center;	
	
}	
		
.SignUpForm-item-container{
	
	height: auto;
	margin: auto;
	border:1px dashed var(--toggle);
	width:500px;
}	
		
		
	

.SignUpForm-Item {
	
	
	display: grid;
	height: auto;
	box-shadow: 12px 12px 12px rgba(0,0,0,.05), -12px -12px 12px rgba(0,0,0,.02);
	border:1px solid rgba(237,237,237,0.30);
	grid-template-rows:120px 86px 18px 30px 29px 66px 97px 57px 80px 47px 120px ;
	grid-template-columns: auto, 360px, auto;  
	grid-template-areas: "a" "b" "c" "d" "e" "f" "g" "h" "i" "j" "k";
	margin: 50px auto 50px auto;
	color:white;
	text-align: center;
	justify-content: center;
	align-content:center;
	border:solid 2px var(--turquoise);
	border-radius:10px;
		
}


/*mobile version */
.SignUpForm-item-container2{

	height: auto;
	margin: auto;
	border:1px dashed var(--toggle);
	width:380px;
}	
		
		
.SignUpForm-Item2 {
	
	display: grid;
	height: auto;
	box-shadow: 12px 12px 12px rgba(0,0,0,.05), -12px -12px 12px rgba(0,0,0,.02);
	border:1px solid rgba(237,237,237,0.30);
	grid-template-rows:100px 86px 18px 30px 29px 66px 97px 57px 80px 47px 60px ;
	grid-template-columns: auto, 360px, auto;  
	grid-template-areas: "a" "b" "c" "d" "e" "f" "g" "h" "i" "j" "k";
	margin: 50px auto 50px auto;
	color:white;
	text-align: center;
	justify-content: center;
	align-content:center;
	border:solid 2px var(--turquoise);
	border-radius:10px;
}
	
/*mobile-verion*/		
		
.SignUpForm-Item h1, .SignUpForm-Item2 h1{
	font-family:"Montserrat_Variable";
	font-weight: 400;
	font-size: 17.19953pt;

}	
		
.SignUpForm-Item h2, .SignUpForm-Item2 h2{
	font-family:"Montserrat_Variable";
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: 0.3px;
	grid-area:f;
	line-height: 1.3;
	padding: 0px 15px 0px 15px;

}		
		
.SignUpForm-Item p, .SignUpForm-Item2 p{
	font-family:"Montserrat-Italic_Variable";
	font-weight:600;
	font-size: 1rem;
	grid-area:d;
	text-wrap:wrap;
	
}		
		
	
		
.form-input, .form-message-input{	
	font-family:"Montserrat_Variable";
	font-weight:400;
	font-size: 11.68pt;
	box-shadow: 5px 5px 10px rgba(0,0,0,.2);
	width: 280px;
	padding: 10px 0px 10px 10px;
	margin-bottom: 5px;
	background-color: white;
	border: 2px solid var(--turquoise);
	cursor:text;	
}	
		
.form-message-input{
	height:130px;
	overflow-x:scroll;
}	

.form-input:focus, .form-message-input:focus{
outline:none;
}

.button3{
	color: white;
	font-family:"Montserrat_Variable";
	font-weight: 500;
	font-size: 11.68pt;
	background-color: var(--turquoise);
	text-decoration: none;	
	box-shadow: 5px 5px 10px rgba(0,0,0,.2);
	border: none;
	display:flex;
	flex: 1 1 320px;
	width: 280px;
	padding: 10px 23px 10px 23px;
	text-align:center;
	
	
	
}


.button3:hover{
	
	padding: 10px  10px;
	background-color: rgba(22,255,225,1.00);
	box-shadow: 5px 5px 10px rgba(0,0,0,.4);	
	cursor:pointer;
	color:white;
	display:flex;
	flex: 1 1 320px;
	width: 280px;
}	


		
		

		
		
		
/*More Section	*/
.More{
			
}		
		
.More-container{
	width: 90vw;
	height: auto;
	margin:auto;
	border:1px dashed var(--toggle);
	align-content: center;	
	padding-top:50px;
	justify-content:center;
	padding-bottom:37.5px;			
}		
		
.More-item-containerA{
	display: flex;
	flex-flow:row wrap;
	justify-content:center;
	max-width:600px;
	min-width:360px;
	margin:auto;
	border:dashed 1px var(--toggle);
	
		}

.More-item1{
	flex: 0 0 200px;
	width:200px;
	border:1px var(--toggle) dashed;
	margin: auto;
	height:auto;
	
}
		
.More-item2{
	flex: 0.2 0.2 300px;
	border:1px var(--toggle) dashed;
	margin: auto;
	height:auto;
	padding:20px 20px 20px 20px;
	
	
}		

		
	
/* SLIDER section */
		
.slider-container{

	width: 100vw;
	height: auto;
	margin:auto;
	border:1px dashed var(--toggle);
	align-content: center;	
	padding:30px 0px 30px 0px;
	justify-content:center;
	background-color:rgba(244,244,244,1.00)
				
}				
				
.slider{
		width:100%;
		height:auto;
		border: 1px dashed var(--toggle);
		/* height:var(--height); */
		overflow:hidden;
	    mask-image:linear-gradient(to right, transparent, black 10% 90%, transparent);
		padding:20px 0px 20px 0px;
}
	

	
.slider .list {
		display:flex;
		width: 100%;
		min-width: calc(var(--width) * var(--quantity));
		position:relative;
}
		
	
		
	
.slider .list .item{
		width:var(--width);
		height:var(--height);
		position:absolute;
		left:100%;
		animation: autoRun var(--duration) linear infinite;
		transition: all 0.5s;
}

.slider .list .item img{
		width:100%;
}	
		
@keyframes autoRun{
	from{
		left:100%;
	}
	to{
		left: calc(var(--width) * -1); 
	}
}	
	
.slider:hover .item{
		animation-play-state:paused!important;
		filter:blur(3px);
		cursor:pointer;
}		

.slider .item:hover{
	filter:blur(0px);	
	transform:scale(1.1);
}	

.slider [reverse="true"] .item{
	animation: reversePlay 10s linear infinite;
}	
	
	@keyframes reversePlay{
		from{
		left: calc(var(--width) * -1); 	
		}to{
		left:100%;	
		}
	}		
		
		
		
		
		
/*This concludes the SLIDER section*/		
		
		
		

/*Footer Section*/

		
.footer {
	background-color: rgba(23,23,23,1.00); 
}	
		
		
		
.footer-container 	{
	width:90vw;
	height: auto;
	margin:auto;
	border:1px dashed var(--toggle);
	align-content: center;	
	padding-top:100px;
	
	
}
	
.footer-tile-container {
	list-style: none;
}
		
		
.footer-container p{
		padding: 30px 0px 30px 0px;
		text-align: center;
		font-family: "Montserrat_Variable";
		font-size: 1rem;
		font-weight: 400;
		align-items:center;
		transition: all 0.8s ease;
		color:white;
}			
		

.footer-container h1{
	color: white;
	font-family: "Montserrat_Variable";
	font-size: 3.236rem;
	font-weight: 400;
	align-items:center;
	transition: all 0.8s ease;
	color:white;
}	
		
		
.footer-container h2{
	color: white;
	font-family: "Montserrat_Variable";
	font-size: 1.618rem;
	font-weight: 400;
	align-items:center;
	transition: all 0.8s ease;
	color:white;
}	
		
.footer-item {
	width: 340px;
	height: 200px;
	overflow: hidden;
	/* box-shadow: 5.5px 5.5px 10px 0 rgba(0,0,0,0.46); */
	border:dashed var(--toggle) 1px;
	background-size:cover;
	align-content:center;
	justify-content:center;
	align-items:center;
	line-height: 31px;
	display: flex;
	flex-wrap: nowrap;
	
}	
		
.footer-item2 {
	width: 340px;
	height: 258px;
	overflow: hidden;
	/* now to add the grid to align the items as a set*/
	display: grid;
	/* This specifies the unique heights of each row*/
	grid-template-rows: 114px, 300px;
	grid-template-areas:"a" "b";
	/* box-shadow: 5.5px 5.5px 10px 0 rgba(0,0,0,0.46); */
	border:dashed var(--toggle) 1px;
	background-size:cover;
	align-content:center;
	align-items:center;
}


.footer-item2 h2 {
	font-family:"Montserrat_Variable";
	font-weight:500;
	font-size: 1.2rem;
	color: white;
	line-height:1.6
}			
		
button{
	color: black;
	font-family:"Montserrat_Variable";
	font-weight:540;
	font-size: 11.68pt;
	background-color: white;
	padding: 10px 23px 10px 23px;
	text-decoration: none;	
	box-shadow: 5px 5px 10px rgba(0,0,0,.2);
	border: none;
	cursor:pointer;
	grid-area:c;
	margin-inline: 10px 10px;
	z-index:1;
}
		


button:hover{
	color: black;
	border: white;
	padding: 10px 23px 10px 23px;
	font-weight:600;
	background-color: white;
	box-shadow: 5px 5px 10px rgba(0,0,0,.4);	
	cursor:pointer;
	
}


button2{
	color: var(--turquoise);
	font-family:"Montserrat_Variable";
	font-weight:400;
	font-size: 11.68pt;
	background-color: white;
	border: 2px solid var(--turquoise);
	padding: 10px 30px 10px 30px;
	text-decoration: none;	
	box-shadow: 5px 5px 10px rgba(0,0,0,.2);
	cursor:pointer;
	margin-top:90px;
	margin: 90px 10px 0px 10px;
	z-index:1;
}



button2:hover{
	
	border: none;
	padding: 10px 30px 10px 30px;
	background-color: white;
	box-shadow: 5px 5px 10px rgba(0,0,0,.4);	
	cursor:pointer;
	font-weight:500;
	color:var(--turquoise);
}


button4{
	color: white;
	font-family:"Montserrat_Variable";
	font-weight:500;
	font-size: 11.68pt;
	background-color: black;
	padding: 10px 23px 10px 23px;
	width: 100vw;
	text-decoration: none;	
	box-shadow: 5px 5px 10px rgba(0,0,0,.2);
	border: none;
	cursor:pointer;
	grid-area:h;
	margin-inline: 10px 10px;
	width:300px;

}
		


button4:hover{
	border: 1px solid black;
	width: 100vw;
	padding: 10px 23px 10px 23px;
	border: none;
	background-color: black;
	box-shadow: 5px 5px 10px rgba(0,0,0,.4);	
	cursor:pointer;
	font-weight:550;
}



		
		
		
	
/* Breakpoints	*/
		/* Extra small devices (phones, 600px and down) */
@media screen and (max-width: 600px) {


#QUOTE{
		display:content;
}
	

	
/*
	
.nav-container_m{	
	display:content;	
}
*/
	
.nav-container{	
	display:content;	
}	
	
	
.mobilenav{
	display:content;		
}

.header-item2{
	display:none;
}	

.header-item1{
	display:none;
}
	
.header-item1-b{
	display:content;
}	
	
.hello-item1, .hello-item2{
	display:none;
}	

.hello-item1_m, .hello-item2_m{
	display:content;
}	
	
.hello-item3{
	display:none;
}	
	
.hello-item3_m{
	display:content;
}	

.SignUpForm-item-container, .SignUpForm-Item {
	display:none;
}

.SignUpForm-item-container2, .SignUpForm-Item2{
	display:content;
}	
	

	
	
	

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media screen and (min-width: 601px) and (max-width: 767px)  {
	
/*
#myLinks{
		display:none;
}
	
#myLinks2{
		display:none;
}
*/
	
.nav-container_m{	
	display:none;	
}
	
.nav-container{	
	display:content;	
}	

.mobilenav{
	display:content;		
}	

.header-item2{
	display:none;
}

.header-tile-container{
	justify-content: space-around;
}	

.header-item1{
	display:none;
}

.header-item1-b{
	display:content;
}
	


.hello-item1_m, .hello-item2_m{
	display:none;
}

.hello-item3_m{
	display:none;
}	
	
.SignUpForm-item-container2, .SignUpForm-Item2{
	display:none;
}	
	

	
	
	
}

/*Medium devices (landscape tablets, 768px and up) */
@media screen and (min-width: 768px) and (max-width: 991px) {

/*
#myLinks{
display:none;
}
	
#myLinks2{
display:content;
}
*/
	
.nav-container_m{	
	display:none;	
}
	
.nav-container{	
	display:content;	
}	
	
.mobilenav{
	display:none;		
}		

.header-item2{
	display:none;
}		
	
.header-tile-container{
		justify-content: space-around;
}		
	
.header-item1{
	display:none;
}
	
.header-item1-b{
	display:content;
}	
	
.hello-item1_m, .hello-item2_m{
	display:none;
}		

.hello-item3_m{
	display:none;
}
	
.SignUpForm-item-container2, .SignUpForm-Item2{
	display:none;
}
	

	
}

/* Large devices (laptops/desktops, 992px and up) */
@media screen and (min-width: 992px) {
#myLinks2{
display:none;
}

.nav-container_m{	
	display:none;	
}
	
.nav-container{	
	display:content;	
}	
	
.mobilenav{
	display:none;		
}
	
.header-item1-b{
	display:none;
}	

.hello-item1_m, .hello-item2_m{
	display:none;
}

.hello-item3_m{
	display:none;
}
	
.SignUpForm-item-container2, .SignUpForm-Item2{
	display:none;
}		
		


}

/* Exra large devices (large laptops and desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
	#myLinks2{
		display:none;
	}

.nav-container_m{	
	display:none;	
}
	
.nav-container{	
	display:content;	
}		
	
.mobilenav{
	display:none;		
}	
	
.header-item1-b{
	display:none;
}
	
.hello-item1_m, .hello-item2_m{
	display:none;
}
	
.hello-item3_m{
	display:none;
}

.SignUpForm-item-container2, .SignUpForm-Item2{
	display:none;
}	
	

	
}