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

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

:root{
    /* --turquoise: rgba(22,255,225,1.00); */
	--lightgreen: rgba(176,191,142,1.00);
	--darkgreen: rgba(96,115,89,1.00);
	--red: rgba(204,33,40,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);
	--drop-shadow: 5.5px 5.5px 10px  rgba(0,0,0,0.2);
	--box-shadow-reverse: 0 10px 5.5px 5.5px 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{
	border: 1px dashed var(--toggle);
	/* max-width:1977px; */
	width:100vw;
	margin:auto;
	overflow-x:hidden;
	opacity:0;
	animation: fadeIn 0.5s forwards;
	/*This is to offset the nav 90px high now set to position:fixed so this space was sucked up underneath it; and now it can make a margin allowance for it so that it sits back in place - it is according to nav height */
	margin-top:90px;
}

@keyframes fadeIn {
	to {
		opacity: 1;
	}
}


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;
}	

p4{
	font-family:"Montserrat_Variable";
	font-weight:400;
	font-size:1rem;
	color:white;
}

p5{
	font-family:"Montserrat_Variable";
	font-weight:500;
	font-size: 1.618rem;
	color: black;
	line-height: 37px;
	text-decoration:none;
}

p6{
	font-family:"Montserrat_Variable";
	font-weight:500;
	font-size: 1.618rem;
	color: white;
	line-height: 37px;
}

/* DYNAMIC SCALING TEXT min size p and max size according to vw */
p7{
	font-family:"Montserrat_Variable";
	font-weight:500;
	/* clamp(min-size, preferred-size, max-size) */
	font-size: clamp(1rem,1.618vw, 1.618vh);
	color: white;
	line-height: auto;
}

p8{
	font-family:"Montserrat_Variable";
	font-weight:300;
	/* clamp(min-size, preferred-size, max-size) */
	font-size: 0.8rem;
	color: black;
	line-height: auto;
	text-align:left;
}

p9{
	font-family:"Montserrat_Variable";
	font-weight:300;
	/* clamp(min-size, preferred-size, max-size) */
	font-size: 0.8rem;
	color: white;
	line-height: auto;
	text-align:left;
}


/* THIS IS TRUE DYNAMIC TEXT! 
DETAILS:

*font-size - the 10 stands for 10%
*cqw stands for the parents container width

THEREFORE - TO USE THIS DYNAMIC FONT SIZE:
1. create a parent container and add style:
	container-type: inline-size;
2. Add the font-size: 10cqw; to the child 
	NOTE to prevent under and oversized text you can also add a second style: 
	 font-size:clamp(min-size, preferred-size, max-size);
		eg font-size:clamp(0.8rem, 1rem, 1.5rem); however I've yet to make the clamp work
*/


p10{
	font-family:"Montserrat_Variable";
	font-weight:300;
	/* clamp(min-size, preferred-size, max-size) */
	/* font-size: clamp(10cqw, 10px, 10px); */
	font-size:9cqw;
	color: white;
	line-height: auto;
	text-align:left;
	
}

p11{
	font-family:"Montserrat_Variable";
	font-weight:300;
	/* clamp(min-size, preferred-size, max-size) */
	/* font-size: clamp(10cqw, 10px, 10px); */
	font-size:9cqw;
	color: black;
	line-height: auto;
	text-align:left;
	
}


		
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;
	
}

h3{
	font-family:"Montserrat_Variable";
	font-weight:500;
	font-size: 1.618rem;
	color: white;
	line-height: 37px;
	
}

h4{
	font-family:"Montserrat_Variable";
	font-weight:500;
	font-size: 3.236rem;
	color: white;
	line-height: 37px;
	
}

h5{
	font-family:"Montserrat_Variable";
	font-weight:500;
	font-size: 3.236rem;
	color: black;
	line-height: 37px;
	text-decoration:none !important;
	
	
}



h6{
	font-family:"Montserrat_Variable";
	font-weight:540;
	font-size: 4.854em;
	color:white;	
	line-height: 200px;
	text-decoration:none !important;
	

	
}

h7 {
	font-family:"Montserrat_Variable";
	font-weight:200;
	font-size: 3.236rem;
	color: black;
}	

h8{
	font-family:"Montserrat_Variable";
	font-weight:500;
	font-size: 3.236rem;
	color: black;
	line-height: 50px;
	text-decoration:none !important;
}

h9{
	font-family:"Montserrat_Variable";
	font-weight:450;
	font-size: 1.618rem;
	color: green;
	line-height: 37px;
	
}

h10{
	font-family:"Montserrat_Variable";
	font-weight:450;
	font-size: 1rem;
	color: green;
	line-height: 37px;
	
}


/* THIS IS TRUE DYNAMIC TEXT! 
DETAILS:

*font-size - the 10 stands for 10%
*cqw stands for the parents container width

THEREFORE - TO USE THIS DYNAMIC FONT SIZE:
1. create a parent container and add style:
	container-type: inline-size;
2. Add the font-size: 10cqw; to the child 
	NOTE to prevent under and oversized text you can also add a second style: 
	 font-size:clamp(min-size, preferred-size, max-size);
		eg font-size:clamp(0.8rem, 1rem, 1.5rem); however I've yet to make the clamp work
*/

h11{
	font-family:"Montserrat_Variable";
	font-weight:300;
	/* clamp(min-size, preferred-size, max-size) */
	/* font-size: clamp(10cqw, 10px, 10px); */
	font-size:5cqw;
	color: green;
	line-height: auto;
	text-align:left;
	
}
	
/*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 */			
	

/*About this website*/
.about-this-website-wrapper{
	
	/*border:1px dashed yellow; */
	position:fixed;
	left:10px;
	top:140px;
	width:80px;
	height:80px;
	z-index:-6;
	
	
}

.reveal-test{
	width:200px;
	height:200px;
	background-color:aquamarine;
	display:none;
}



.info_dropdown{
	display:none;
	animation: infoAnimate .5s ease-in-out;
}

@keyframes infoAnimate {

from{opacity:.5;}
	to{opacity:1;}

}


.WEBSITEinfo-icons-wrapper{
	border:1px dashed var(--toggle);
	padding:20px 0px 20px 0px;
	display:flex;
	flex-wrap:wrap;
	gap:20px;
	justify-content:center;
	align-items:center;
}

.WEBSITEinfo-icons{
	border:1px dashed var(--toggle);
	width:50px; 
	height:50px; 
	box-shadow: var(--box-shadow);
	object-fit:contain;
	border-radius:20px;
	column-gap:20px;
	
}


.about-this-website{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	align-content:center;
	text-align:center;
	background-color:white;
	/* width:50vw; */
	width:415px;
	height:auto;
	border-radius:50px;
	box-shadow:var(--box-shadow);
	padding:30px 20px 10px 20px;
	position:fixed;
	top:150px;
	left:125px;

}

.thinkingDot1{
	height:10px;
	width:10px;
	border-radius:50%;
	background-color:white;
	box-shadow:var(--box-shadow);
	top:145px;
	left: 75px; 
	position:fixed;
		
	
}

.thinkingDot2{
	height:15px;
	width:15px;
	border-radius:50%;
	background-color:white;
	box-shadow:var(--box-shadow);
	top:150px;
	left:90px; 

	position:fixed;
		
	
}

.thinkingDot3{
	height:20px;
	width:20px;
	border-radius:50%;
	background-color:white;
	box-shadow:var(--box-shadow);
	top:155px;
	left:110px; 
	position:fixed;
		
	
}


.infobtn{
	width:100px;
	height:100px;
	object-fit:contain; 
	position:fixed; 
	left:-10px; 
	top:80px; 
	margin-right:50px; 
}



/*ABOUT THIS WEBSITE MOBILE*/
/*MOBILE*/
.about-this-website-wrapper_mobile{
	
	/* border:1px dashed yellow; */
	position:fixed;
	left:0px;
	top:90vh;
	width:80px;
	height:80px;
	
}
.infobtn_mobile{
	
	/*ON HOLD NOW I AM MAKING A MOBILE FOOTER
	object-fit:contain;
	position:relative;
	left:-10px;
	bottom:18px;
	margin-right:50px;	
	*/
	
	
	/*OLDER*/
	/*top:197px;*/
	/* top:89vh; */
		/*positions to the bottom, however there is no current way for the mobile display in web developer tools to have it sit in the same spot for all mobile phone displays ie at times it is at the bottom and other times it is half way up the page even if i choose bottom:0
	however this is the closest so far - now reverting back to another option*/
	
	
}


.reveal-test_mobile{
	width:200px;
	height:200px;
	background-color:aquamarine;
	display:none;
}



/* SHOW/HIDE INFO CONTENT*/
.info_dropdown_mobile{
	display:none;
	animation: infoAnimate .5s ease-in-out;
}

@keyframes infoAnimate {

from{opacity:.5;}
	to{opacity:1;}

}


.WEBSITEinfo-icons-wrapper_mobile{
	border:1px dashed var(--toggle);
	padding:20px 0px 20px 0px;
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	justify-content:center;
	align-items:center;
	width:100vw;
	height:auto;
}

.WEBSITEinfo-icons_mobile{
	border:1px dashed var(--toggle);
	width:30px; 
	height:30px; 
	box-shadow: var(--box-shadow);
	object-fit:contain;
	border-radius:20px;
	column-gap:10px;
	
}

/*HOLD
.centering-wrapper_mobile{
	border: 1px dashed purple;
	width:50vw;
	height:30vh;
	position:absolute;
	bottom:0px;
	justify-content:center;
}
*/

.about_mobile_wrapper{
	/* border:1px dashed yellow; */
	display:flex;
	width:100vw;
	bottom:173px; 
	position:relative;
	justify-content: center;
	align-content:center;
	align-items:center;
	position:absolute;
	
	
}

.about-this-website_mobile{
	/* border:1px dashed green; */
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	align-content:center;
	text-align:center;
	background-color:white;
	/* width:50vw; */
	/* width:230px; */
	width:260px; 
	/* height:320px; */
	height:335px;	
	border-radius:30px;
	box-shadow:var(--box-shadow);
	padding:55px 20px 40px 20px;
	
	
/*ALignment trial inside of dot3*/

	
	
	
	/*HOLD while new layout
	padding:30px 20px 10px 20px;
	position:fixed;
	top:150px;
	left:125px;
	*/
}

.dot-wrapper{
	/*border:1px dashed yellow;*/
	height: auto;
	bottom:80px;
	position:absolute;
	width:100vw;
	display:flex; 
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:20px;
}

.thinkingDot1_mobile{
	height:10px;
	width:10px;
	border-radius:50%;
	background-color:white;
	box-shadow:var(--box-shadow);
	
	/*
	top:605px; 
	left: 70px; 
	
	
	position:fixed;
	*/	
	
}

.thinkingDot2_mobile{
	height:15px;
	width:15px;
	border-radius:50%;
	background-color:white;
	box-shadow:var(--box-shadow);
	/*
	top:600px;
	left:85px;
	position:fixed;
	*/	
	
}

.thinkingDot3_mobile{
	height:20px;
	width:20px;
	border-radius:50%;
	background-color:white;
	box-shadow:var(--box-shadow);
	
	/*
	top:605px;
	left:105px;
	position:fixed;
	*/	
	
}


.footerAnimation{
	position:absolute; 
	z-index:1000; 
	left:-10px;
	opacity:.8;
	display:none;
	animation: footerAnimation 3s forwards; 
	cursor:pointer;

}


@keyframes footerAnimation{
	0%{opacity:.8; transform:translateY(90vh);}
	30%{opacity:.8;translateY(25vh);}
	80%{translateY(-25vh);}
	100%{opacity:0; transform:translateY(-90vh);}
}









/* NAV */
/* nav is sticky to maintain its visibility while scrolling*/
	
contain-me {
	background-color:lightblue;
	max-width:95vw;
	border:1px dashed pink;
	
	
}

nav{
	
	display:flex;
	margin:auto;
	border: dashed 1px var(--toggle);
	position:fixed;
	top:0px;
	background-color:white;
	box-shadow:var(--box-shadow);
	/* This number is set high to attempt to maintain top position while building */	
	justify-content:center;
	z-index:10;
	width:100vw;
}
		
.nav-container{
	width:100vw;
	/* width:90vw; */
	min-width:349px;
	height: 90px;
	padding:5px 0 3px 0;
	margin:auto;
	border: 1px dashed var(--toggle);
	display:inline-flex; 
	justify-content:center;
	/* column-gap:20px; */
}	

		
.nav-container_m{
	top:0;
	width:90vw;
	height: auto;
	margin:auto;
	border: 1px dashed var (--toggle);
	padding:0px 30px 10px 0px;
	overflow:hidden;
	display:flex;
	align-items:center;
}

.nav-mobile-logo{
	left:5px;
	top:5px; 
	position:relative;
	height:75px;
}

.nav-mobile-hamburger{
	display:flex;
	flex-wrap:wrap;
	width:40px;
	height:18px;
	gap:5px;
	align-content:space-around;
	right:0px;
	top: 47px;
	position:fixed;
	
	margin-right:12px;
	
	
}

.hamburger-line{
	width:100%;
	height: 3px;
	background-color:var(--red);
	border-radius: 3px;
}


.nav-click-me{
	position:absolute;
	left: 330px;
	top:40px;
	/* position:relative;
	padding:30px 0 0 500px;
	width:auto;
	top:-80px;
	z-index:100; */
	width:120px;
	/* border:1px dashed purple; */
	
}

.float-links{
	margin: 17px 0px 10px 0px; 
	
}

#homelink {
	float:left;
	height:148px;
	width: 138px;
	background-color:red;
	position:absolute;
	left: 15px;
}
			
		
#nav-logo{
	float:left;
	height:100%;
	width:130px;
	margin-top:28px;
	/* width: 100px;*/
	/* border:dotted pink 1px; */
	/* background-image:url("web-files/images_2/ms-monogram-with-name-encircled_black.svg"); */
	background-image:url("mds/files/images/MDS_Black+RED_Thicker-red-outline-stroke_.75-to-1_final.svg");
	/* background-size: 70%; */
	background-size: auto;
	background-repeat:no-repeat;
	position:absolute;
	
	
	
}


#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:underline;
	font-family:"Montserrat_Variable";
	font-weight: 600;
	font-size: 10.63pt;
	/*margin-inline:10px;*/
}

		
#myLinks, a:hover{
	cursor:pointer;
}

		
#myLinks, a:active{
}	
	
		
		
	

.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;
}	
	


a4 {
	font-family:"Montserrat_Variable";
	font-weight:500;
	font-size: 3.236;
	color:var(--red);	
	line-height: 37px;
	text-decoration: underline;
	/* text-decoration:none !important; */
}


a4:hover{
	cursor: pointer;
	color: white;
}


a5 {
	cursor:pointer;
	color:white;
	text-decoration:underline;
}



		
.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; 
	
	
	
}		
		
		
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;
}
	




.list {
	--width:400px; --height:400px; --quantity:12; --duration:30s; margin-top:0px; z-index:2;
}







.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%;
}	










	
/* SLIDER2 section */
		
.slider-container2{

	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);
				
}				
				
.slider2{
		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;
}
	




.list2 {
	--width:200px; --height:200px; --quantity:14; --duration:30s; margin-top:0px; z-index:2;
}



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

.slider2 .list2 .item2 img{
		width:100%;
}	

















		
@keyframes autoRun{
	from{
		left:100%;
	}
	to{
		left: calc(var(--width) * -1); 
	}
}	
	

/* HOLD
.slider:hover .item{
		animation-play-state:paused!important;
		filter:blur(3px);
		/* cursor:pointer; */
}		


/*HOLD
.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*/		







@keyframes autoRun{
	from{
		left:100%;
	}
	to{
		left: calc(var(--width) * -1); 
	}
}	
	

/* HOLD
.slider2:hover .item2{
		animation-play-state:paused!important;
		filter:blur(3px);
		/* cursor:pointer; */
}		


/* HOLD
.slider2 .item2:hover{
	filter:blur(0px);	
	transform:scale(1.1);
}	

*/


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












		
		

/*View project option */
.view-project-option{
	display:flex;
	text-decoration: underline;
	cursor: pointer;
	width:40px;
	margin-bottom:10px;
	border-right:2px solid black;
	justify-content:center;
	align-content:center;
	
}


.view-project-option:hover{

	font-size:4rem;

}






/*SDG Featured Design */
.homeSAFE{
	/* border:3px solid rgba(247,189,219,1.00); */
	border:3px solid rgba(72,107,216,1.00);
	box-shadow:var(--box-shadow);
	max-width:95vw; 
	width:900px; 
	height:auto; 
	border-radius: 20px; 
	display:flex; 
	justify-content:center; 
	align-content:center; 
	align-items:center; 
	flex-direction: column; 
	padding: 5vh 0 5vh 0;
	margin:auto;
}






/*SDG Featured Design */
.SDG-motion-design{
	/* border:3px solid rgba(247,189,219,1.00); */
	border:3px solid rgba(227,122,179,1.00);
	box-shadow:var(--box-shadow);
	max-width:95vw; 
	width:900px; 
	height:auto; 
	border-radius: 20px; 
	display:flex; 
	justify-content:center; 
	align-content:center; 
	align-items:center; 
	flex-direction: column; 
	padding: 5vh 0 5vh 0;
	margin:auto;
}





/*Pet&Family Featured Design*/

.PetANDFamilyWrapper{
	/* border:3px solid rgba(247,189,219,1.00); */
	border:3px solid rgba(23,39,54,1.00);
	box-shadow:var(--box-shadow);
	max-width:95vw; 
	width:900px; 
	height:auto; 
	border-radius: 20px; 
	display:flex; 
	justify-content:center; 
	align-content:center; 
	align-items:center; 
	flex-direction: column; 
	padding: 5vh 0 5vh 0;
}






/*Footer Section*/

		
.footer {
	background-color: rgba(23,23,23,1.00); 
}	
		
		
		
.footer-container 	{
	width:90vw;
	max-width:800px;
	height: auto;
	margin:auto;
	border:1px dashed var(--toggle);
	align-content: center;	
	padding-top:50px;
	
}


.footer-slider-grid{
	margin-right:50px;
	display:grid;
	grid-template-columns: 27px 1fr 27px;
	grid-template-rows: auto;
	grid-template-areas: 
		'a b c';
	width:90vw;
	max-width:800px;
	height:auto;
	border: 1px dashed var(--toggle);
	/* height:var(--height); */
	/* overflow:hidden; */
	/*Overflow:auto;
	mask-image:linear-gradient(to right, transparent, black 10% 90%, transparent);
	scroll-behavior:smooth;
	*/	
}


	
.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
}	

.footer-webpage-links-container{
	
	height:auto;
	column-width: 150px;
	padding:0 80px 0 80px;
	padding:20px;
	column-gap:80px;
	/* display:flex;
	flex-wrap:wrap;
	*/
	/* justify-content: space-around;*/
}


.footer-webpage-links {
	line-height:60px;
	overflow:hidden;
	/* width:200px; */
}


.footer-webpage-links-dividers{
	height:1px; 
	background-color:black;
	width:90%;
}


.footer-webpage-links a{
text-decoration:none !important;

}


.footer-links-area{
	border:1px solid white;
	border-radius:20px;
	padding-top:30px;
}
	

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;
}



/* Dropdown Menu */
.dropbtn {
/* 	border:1px dashed blue; */
	color: black;
	position:fixed;	
	;
	font-family:"Montserrat_Variable";
	font-weight: 600;
	font-size: 10.63pt;
	text-decoration:none!important;
	top:-2px;
	width:auto;
	height:auto;
}



/* The container <div> - needed to position the dropdown content */

.dropdown {
	/* border:1px dashed green; */
	position: relative;
	display: inline-block;
	/* width:auto; */
	width:451px;
	
	justify-content:center;

}

#nav-logo-activator{
		cursor:pointer;
}


/* Dropdown content (Hidden by Default) */
.dropdown-content {
	top:113px;
	left:0;
	max-height:60vh;
	min-height:30vh; 
	height:auto;
	
	margin-top:-20px;
	display: none;
	position: fixed;
	align-content:center;
	/*background-color: rgba(238,238,238,1.00); */
	overflow-y:scroll;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index:-5;
	animation:Desktop-wait-for-mouse 3s;
	
	padding:20px 4%;
	justify-content:center;
	background-color:white;
	/* background-color:rgba(4,4,7,1.00); */
	width: 100vw;

	
	/* background-color:rgba(245,245,245,1.0); */
	background-color:rgba(28,28,28,1.00);
	
		/* column-gap:80px; */
	 /* column-width: 180px; */


	/* max-width:800px; */

}

.dropdown-links-container{

	max-width:826px;
	column-width:210px;
	height:auto;
	/* padding:0px 80px 0px 80px;
	padding:20px; */
	padding: 20px 0 20px 0;	
}


@keyframes Desktop-wait-for-mouse {
	from: {opacity:.95}
	to: {opacity:1}
	}


/* Links inside the dropdown */
.dropdown-content a{
	color: white;
	padding: 15px 18px;
	/* font-size: 18px; */
	font-size:1rem;
	font-weight:500;
	text-decoration: none;
	text-align:left;
	display: block;
}



.dropdown-link{
	display:none;
	/* line-height:15px; */
	line-height:15px;
	height:62px;
	align-content:center;
}


.dropdown-link a{
	height:58px; 
	align-content:center;
}


.dropdown-link-divider{
	height: 1px; 
	background-color: var(--red);
}
	

/* Change color of dropdown links on hover */
.dropdown-link a:hover {
	/*
	/* background-color: white; */
	color: var(--red);
	background-color: var(--red);
	color:white;
	box-shadow:var(--box-shadow);
}


/* Show the dropdown menu on hover */
.dropdown:hover  .dropdown-content {
	display: block;
}




/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover  .dropbtn {
	/* background-color:white; */
}


.dropdown:hover .dropdown-link{
	display:block;
}



/* MOBILE Dropdown Menu */
.dropbtn_mobile {
	/*all:unset;*/
	color: black;
	text-decoration:underline;
	font-family:"Montserrat_Variable";
	font-weight: 600;
	font-size: 10.63pt;
	/* padding: 16px; */
	border:none;
	text-decoration:underline;
	margin:auto;

}

.dropbtn_mobile:hover{
}

/* The container <div> - needed to position the dropdown content */

.dropdown_mobile {
	position: relative;
	display: inline-block;
	margin:auto;
}

/* Dropdown content (Hidden by Default) */
#dropdown_mobile-content {
	display: none;
	position: absolute;
	max-height:60vh;
	/* background-color:rgba(238,238,238,1.00); */
	background-color:white;
	width: 100%;
	overflow-y:scroll;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index:7;
}

/* Links inside the dropdown */
#dropdown_mobile-content a{
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}
	

/* Change color of dropdown links on hover */
#dropdown_mobile-content a:hover {
	background-color:white;
}



/* Show the dropdown menu on hover */

#dropdown_mobile:hover .dropdown_mobile-content{
	display: block;
}

/* Show the dropdown menu on hover */
.dropdown_mobile:active .dropdown_mobile-content{
	display: block;
}
















/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown_mobile:hover  .dropbtn_mobile {
}




/* SHOW MORE */


.preview {
	/* background-color: antiquewhite; 
	color: white;
	font-size:16px;*/
	text-decoration:underline;
}


/* The container <div> - needed to position the dropdown content */

.show-more {
	display: block;
}

/* Dropdown content (Hidden by Default) */
.show-more-content {
	display: none;
}

/* Links inside the dropdown */
.show-more-content a{
	display: block;
}

/* Show the dropdown menu on hover */
.show-more:active .show-more-content{
	display: block;
}








/*Socials - Ads - animated button dropdown content*/

#socialsADvideoMobile{
}

#socialsADvideoMain{
}

#temporary-fullscreen-backdrop{
	width:100vw;
	height:100vh;
	background-color:rgba(0,0,0,0.7);
	display:none;
	position:fixed;
	z-index:4;
	cursor:pointer;
}


/*Test duplicate for testing a fix to display overlay background when the menu is displayed */

#temporary-fullscreen-backdrop2{
	width:100vw;
	height:100vh;
	background-color:rgba(0,0,0,0.7);
	display:none;
	position:fixed;
	z-index:4;
	cursor:pointer;
}



/*FOR THE FOOTER NAV BUTTON WEBSITE INFO REVEAL*/

#temporary-fullscreen-backdrop3{
	width:150vw;
	height:100vh;
	left:-5vw;
	background-color:rgba(0,0,0,0.8);
	display:none;
	position:absolute;
	z-index:9;
	cursor:pointer;
}





/* Dropdown Menu */
#socials-dropbtn {
	color: black;
	text-decoration:underline;
	font-family:"Montserrat_Variable";
	font-weight: 600;
	font-size: 10.63pt;
	border:none;

}

.socials-button-click-revealer{
	/* border: 1px dashed orange; */
	width:64px; 
	height:64px; 
	padding-top:10px;
	position:absolute;
	top:33px; 
	left:272px; 
	z-index:100; 

}



.socials-ads{
	width:44px; height:44px;
}

.socials-ads-text{
	animation: socialsRotate 10s infinite linear
}

.socials-red-cross{
	position: relative; 
	width:44px; 
	height:44px;
	z-index:6; 
	top:-41px;
}



/* The container <div> - needed to position the dropdown content */

#socials-dropdown {
	/* display: inline-block; */
}




/*wrapper for socials-dropdown-content*/
#wrapper-socials{
	/* border:1px dashed blue; */
	display:flex;
	justify-content: center;
	position:relative;
	/* left: -165px; */
	left:-10px;
	top: 150px;
	/* top: 90px; */
	/* top:200px; */
	text-decoration: none !important;
}



/* Dropdown content (Hidden by Default) */
#socials-dropdown-content {
	/* border: 1px dashed pink; */
	position:relative;
	top: -110px;
	display:none;
	/* max-height:1200px; */
	aspect-ratio:1148/1440;
	background-color:red;
	height:85vh;
	width:95vw;
	/* width: 72.03vw; */
	max-height: 750px;
	max-width:480px;
	/* max-width: 1175px; */
	padding-top:0px;
	margin-top:65px;
	display: none;
	align-content:center;
	justify-content:center;
	/* background:url("mds/files/images/MDS-heart-star-like_pattern.png")repeat center / 1133px 376px; */
	background-color:white;
	overflow-y:scroll;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index:5;
	border-radius:20px;
	box-shadow:var(--box-shadow);
	/* mask-image:linear-gradient(to right, transparent, black 10% 90%, transparent); */
	animation: socials-wait-for-mouse 2s, ContentReveal2 .5s cubic-bezier(.65,.5,.07,.99);
	text-decoration: none !important;
}


@keyframes ContentReveal2 {
0%{top:-310px; opacity:0; clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 0% );}
	
100%{top:-110px; opacity:1; clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 100% 100%);}
}



@keyframes ContentReveal {
0%{opacity:0; top: -1600px; clip-path: polygon(100% 100%, 100% 100%, 0% 100%, 0% 100% );}
	80% {top:0px; }	
100%{opacity:1; clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%);}
}



/* Links inside the dropdown */
#socials-dropdown-content a{
	color: black;
	padding: 15px 18px;
	font-size: 20px;
	text-decoration: none;
	text-align:left;
	display: block;
}
	

#socials-dropdown:hover  #socials-dropdown-content{
	
		/*I'm using js to click instead for UX purposes ie to provide cleaner access to the menu hover atm
	
	/* display: block; */
}


.MAINsocials-icons-wrapper{
	border:1px dashed var(--toggle);
	padding:20px 0px 20px 0px;
	display:flex;
	flex-wrap:wrap;
	gap:20px;
	justify-content:center;
	align-items:center;
}

.MAINsocials-icons{
	border:1px dashed var(--toggle);
	width:50px; 
	height:50px; 
	box-shadow: var(--box-shadow);
	object-fit:contain;
	border-radius:20px;
	column-gap:20px;
	
}








/* Socials mobile */
/*Socials - Ads - animated button dropdown content*/

/* Dropdown Menu */
#socials-dropbtn_mobile {

	color: black;
	text-decoration:underline;
	font-family:"Montserrat_Variable";
	font-weight: 600;
	font-size: 10.63pt;
	border:none;
	text-decoration:underline;
}


/* The container <div> - needed to position the dropdown content */

#socials-dropdown_mobile {
	
	position: fixed;
	top:60px;
	z-index:5;
	left:16px;
	height:1px;
	/* display: inline-block; */
}


.socials-button-click-revealer_mobile{
	position:Relative; 
	width:44px; 
	height:44px; 
	top:45px;
}


.socials-ads_mobile{
	width:100%; 
	height:100%;
}

.socials-ads-text_mobile{
	animation: socialsRotate 10s infinite linear;
}

.socials-red-cross_mobile{
	position: relative; 
	width:100%; 
	height:100%;
	z-index:6; 
	top:-41px;
}





/*wrapper for socials-dropdown-content*/
#wrapper-socials_mobile{
	height:35vh;
	display:flex;
	justify-content: center;
	/* border:1px dashed blue; */
	position:relative;
	right:0px;
	object-position:top;	
}

/* Dropdown content (Hidden by Default) */
#socials-dropdown-content_mobile {

	aspect-ratio:282/504;
	height:75vh;
	width:80vw;
	padding-top:0px;
	margin-top:0px;
	display: none;
	background-color:white;
	overflow-y:scroll;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index:1;
	border-radius:20px;
	box-shadow:var(--box-shadow);
	animation: growTest .3s cubic-bezier(.95, .01, .07, .99);

	
}

.socials-icons-wrapper{
	border:1px dashed var(--toggle);
	padding:20px 0px 20px 0px;
	display:flex;
	flex-wrap:wrap;
	flex-direction:column;
	gap:20px;
	justify-content:center;
	align-items:center;
}

.socials-icons{
	border:1px dashed var(--toggle);
	width:50px; 
	height:50px; 
	box-shadow: var(--box-shadow);
	object-fit:contain;
	border-radius:20px;
	column-gap:20px;
	
}

@keyframes growTest{
	from{transform: translateX(-500px); opacity:.5;}
	to{transform: translateX(0px); opacity:1;}
}

@keyframes socialsRotate{
	0%{rotate:0deg;}
	100% {rotate:360deg;}
}

@keyframes slideRight{
	from{transform: translateX(0)}
	to {transform: translateX(100px)};
}



	


/*This has now moved to js onclick function

/* Show the dropdown menu on hover 
#socials-dropdown_mobile:hover  #socials-dropdown-content_mobile{
	display: block;
	
	
}

*/
















/* MAIN Content section */


.main-content{
	
	border: 1px dashed var(--toggle);
	
}


.main-content-container {

	width:95vw;
	height: auto;
	margin:auto;
/*Toggle this border on and off as a guide*/
	border:1px dashed var(--toggle);
	align-content: center;	
	
		
}

.main-content-tile-container {
	display: flex;
	flex-flow:  row wrap;
	/* flex-wrap:  wrap-reverse; */
	justify-content: center;
	padding: 0px;
	margin: auto;
	list-style: none;
	border:1px dashed var(--toggle);
	height:auto;
	
}

.main-content-item1, .main-content-item2 {
	
	border:1px dashed var(--toggle);	

	
}

/*column of dynamic text */	
	
.main-content-item1{
	/* min-width: 320px;  
	width:400px; */
	column-width:auto;
	height: auto;
	/* flex-grow:0.4;*/
	padding-right: 20px;

	
}






.main-content-item2{
	width:auto;

	
}

/* 100% width item */
.main-content-item3{
	width:90vw;	
	}


.main-divider{
	background-color: var(--toggle);
	height:5vh;
	width: 100vw;
}



.main-content-item4{
	width:660px;
	
	height:auto;
	border: var(--toggle);
	Text-align: left;
	column-count: 2;
	column-gap: 15px;
	
	list-style:none;
	border: 1px solid black;
	padding: 20px;
	
}



	
	.main-content-item4_m {
	width:660px;
	height:auto;
	border: var(--toggle);
	Text-align: left;
	column-count: 1;
	column-gap: 15px;
	list-style:none;
	border: 1px solid black;
	padding: 20px;
	
}



.main-content-item5{
	width:100%;
	
}



.main-content-item-6{

	width:400px;
	height:400px;
	background-color:mediumpurple;
	border:1px solid pink;
	
	
}





.main-description {
	margin-top:20px;
	TEXT-JUSTIFY:LEFT;
}





/* END OF MAIN-CONTENT SECTION







/*SLIDESHOW CONTAINER */
.slideshow-container {
	max-width: 60%;
	position: relative;
	margin:auto;
}


/* Hide images by default */
.mySlidesFade {
	display:inline;	
}


/* Next & previous buttone */
.prev, .next {
	cursor: pointer;
	position: absolute;
	z-index:1;
	top 50%;
	width: auto;
	margin-top: -22px;
	padding: 16px; 
	color:white;
	text-decoration:none;
	font-weight: 400;
	font-size: 50px;
	transition: 0.6s ease;
	border-radius: 5px 5px 5px 5px;
	user-select: none;
}


/* Position the "next button" to the right */
.next {
	right: 0;
	border-radius: 5px 5px 5px 5px;
	padding-right:100px;
}





/* On hover, add a red background */
.prev:hover, .next:hover {
	background-color:var(--red);
}


/* Caption text */
.text {
	color: white;
	font-size: 20px;
	padding: 8px 12px;
	position: absolute;
	bottom: 8px;
	width: 100%;
	text-align: center;
}


/* Number text (1/3 etc) */
.numbertext {
	color: #f2f2f2;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
}


/* The dots/bullets/indicators */
.dot{
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius:50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}


.active, .dot:hover {
	background-color: #717171;
}


/* Fading animation */
.fade {
	animation-name: fade;
	animation-duration: 1.5s;
}


@keyframes fade {
	from{opacity: .4}
	to{opacity: 1}
}








/* SHOW-HIDE-IMAGE GALLERY SECTION */

#Image1{
	display:block;
}

#Image2{
	display:none;
	z-index:100;

	
	
}














/* Thumbnail section */
		
.thumbnail-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:black; */
		
				
}				
				
.thumbnail-slider{
		width:100%;
		height:auto;
		border: 1px dashed var(--toggle);
		/* height:var(--height); */
		/* overflow:hidden; */
		Overflow:auto;
	    mask-image:linear-gradient(to right, transparent, black 10% 90%, transparent);
		scroll-behavior:smooth;
		
}
	
.thumbnail-item {
	padding: 0 20px 0 20px;
	align-content:center;
	
	
}
	
.thumbnail-slider .thumbnail-list {
		display:flex;
		width: 100%;
		position:relative;
}
		
	
		
	
.thumbnail-slider .thumbnail-list .thumbnail-item{
		
		height:200px;
		/*position:absolute;
		/* left:100%;
		/* animation: autoRun var(--duration) linear infinite;
		transition: all 0.5s;
	*/
}

.thumbnail-slider .thumbnail-list .thumbnail-item {
		/* width:100%; */
}	


		




/* MY DESIGNS */
		
.my-designs{
	display:inline-block;
	/* display:flex;
	flex-flow:  row wrap;
	flex-wrap:  wrap-reverse; */
	width: 100%;
	height: auto;
	margin:auto;
	border:1px dashed var(--toggle);
	align-content: center;	
	/*padding:30px 0px 30px 0px;*/
	justify-content:center;
	background-color:black;
	
				
}	









/* View side panel*/


.view-side-panel-container{
	background-color:red;
	height:900px;
}

.side-view{
	color:var(--red);
	background-color:red;
}









.home-icon-list{
	max-width:100%;
	padding:10px;
	border:1.5px solid #b61f2f;
	border-radius:20px;
	display:flex;
	flex-wrap:wrap;
	height:auto;
	justify-content: center;
	gap:10PX;
	margin-bottom:20px;
	filter:sepia(100%);
}


.home-icons{
	display:flex;
	border-radius:30%;
	width:10%;
	min-width:47px;
}





.home-designs{
	display:block;
	
	
	
}



.home-designs-mobile{
	display:block;

	
}



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


#QUOTE{
		display:content;
}
	

	
/*
	
.nav-container_m{	
	display:content;	
}
*/
	
	
.dropdown_mobile{
		display:content;
}	
	
	
	
.nav-container{	
	display:none;	
}	
	
	
.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;
}	
	
.home-designs{
	display:none;
}
	
	
.home-designs-mobile{
	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;
}
*/
	
.dropdown_mobile{
		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;
}	
	

.home-designs{
	display:none;
}
	
	
.home-designs-mobile{
	display:content;
}	
	

	.This-is-a-new-title{
		
	}	
	
	
}

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

/*
#myLinks{
display:none;
}
	
#myLinks2{
display:content;
}
*/
	
.dropdown_mobile{
		display:none;
}	
	
.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;
}
	

.home-designs{
	display:content;
}
	
	
.home-designs-mobile{
	display:none
}	
	
	
	
}

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

.dropdown_mobile{
		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;
}		
		
.home-designs{
	display:content;
}
	
	
.home-designs-mobile{
	display:none
}	
	

}

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

.dropdown_mobile{
		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;
}	
	
.home-designs{
	display:content;
}
	
	
.home-designs-mobile{
	display:none
}	
	
	
}