@charset "utf-8";
/* CSS Document */

html {
   font-family: "bc-alphapipe",sans-serif;
	padding: 0;
	margin:0;
  }

body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    margin-right: 0%;
    line-height: 1.2em;
    overflow: auto;
	overflow-x:hidden;
	height:100%;
	margin:0;
	max-width:100%;
	padding: 0;
         }

#background11 h1 {
	text-align: center;
	font-size: 3vw
}
#tapt {
	display: none;
}

#hovert {
	font-sie: 2vw;
}


.container2 {
    display: flex;
    align-items: center;
    justify-content: center;
margin: 5% 0% 0% 0%;
	padding: 0;
	order:99;
	max-width:100%;
}

.container3 .aside-section {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  margin: 0px;
}

.container3 .aside-section2 {
	display: flex;
	display: -webkit-flex;
  	justify-content: center;
  	align-items: center;
  	margin: 20px;
}

section {
	display: flex;
	display: -webkit-flex;
	width: 100%;
	position: relative;
	height: auto;
}



#semitransparentbackground {
	background-color:rgba(255,255,255,.9);
	margin:0% 5% 0% 5%;
	padding-top:5%;
}

#semitransparentbackground img {cursor: zoom-in;}

#semitransparentbackground #overlayImage {cursor:default;}
#semitransparentbackground #overlayImagesitemap {cursor:default;}

.section6 {
	margin-bottom:5%;
}

a {
	color:black;
}

.section1 {
	padding:0% 0% 0% 0%;
}
.section1 .column2 {
	background-color: rgba(253,182,20,.8);
	border-radius:7px;
	padding-left: 20px;
	margin:5% 5% 0% 5%;
	box-shadow:5px 5px 15px 0px rgba(80,40,30);
}

.column:last-child {
  margin-right: 0;
}

.column {
  	flex: 1;
	-webkit-flex: 1;
	margin-left: 10%;
	max-width:50%;
	margin-top: 2.5%;
}

.column p {
	font-size: 1.5vw;
}

.column .title {
	font-size:2.5vw;
	line-height:1;
	letter-spacing: 2px;
	margin-bottom:0%;
		
}
#businessplan .title {
	font-size:2vw;
	line-height:1;
	letter-spacing: 2px;
	margin-bottom:0%;
	margin-left: 10%;
}

.column .subtitle {
	font-size:1.6vw;
	font-weight:300;
	line-height: 1.1;
	letter-spacing: 1.5px;
}

#businessplan .subtitle {
	font-size:1.6vw;
	font-weight:300;
	line-height: 1.1;
	letter-spacing: 1.5px;
	margin-left: 10%;
}

.column2 {
  	flex: 1;
	-webkit-flex: 1;
	margin-right: 10%;
	max-width:50%;
}

.column2 h1 {
	line-height:1;
	letter-spacing: 4px;
	margin-bottom:0%;

}

.column2 h2, p {
	font-size:1.5vw;
	font-weight:300;
	letter-spacing: 1.1px;
	line-height: 1.2;
font-family: "museo-sans-rounded", sans-serif;
}

.column2 h3 {
	color: black;
	font-size:1.5vw;
	margin-bottom: 0;
	font-weight: 600;
}

.column2 p {
	margin-top: 1%;
}

.column3 {
  	flex: 1;
	-webkit-flex: 1;
	margin-left: 0%;
	max-width:50%;
}
  

h2 {
	font-size:1.8vw;
	font-weight:300;
	line-height: 1;
	text-align: left;
	letter-spacing: 1.5px
}

h3 {
	color: rgb(80,41,32);
	font-size:1.4vw;
	letter-spacing: 1px;
}

.steps {
	margin:0% 2% 0% 10%;
	text-align: left;
	font-weight: 600;
}

.steps2 {
	margin:6% 0% 0% 10%;
	font-weight:600;
	text-align: left;
}

.steps3 {
	margin:0% 2% 2% 0%;
	font-weight:600;
	text-align: left;
}

.steps4 {
	margin:3% 0% 2% 0%;
	font-weight:600;
	text-align: left;
}

.steps5 {
	margin:1% 0% 2% 5%;
	font-weight:600;
	text-align: left;
	width:100%;
}

.steps6 {
	margin:2% 2% 0% 10%;
	font-weight:600;
	text-align: left;
}
.steps7 {
	margin:10% 5% 3% 0%;
	font-weight:600;
	text-align: left;
}

.section2 {
	flex-direction: column;
}
#discoverycol1 {
  	flex: 1;
	-webkit-flex: 1;
	margin-top: 1%;
	text-align: left;
	margin-bottom: 4%;
	margin-right: 0%;
}

#businessplan {
  	flex: 1;
	-webkit-flex: 1;
	margin-top: 0%;
	text-align: left;
	margin-bottom: 4%;
	margin-right: 0%;
}
#businessplan p {
	margin-right: 10%;
	margin-left: 10%;
	margin-bottom: 2%;
	
}

#section2 h5 {
	margin-top: 5%;
}

#myVideo {
	max-width: 80%;
}


#video {
	width: 60%;
}

.tablecenter {
	display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
}





table {
      border-collapse: collapse;
      max-width: 70%;
	margin-left: 0%;
    }

    th, td {
      text-align: left;
		width: 50%;
		vertical-align: top;
    }



figure {
        position: relative;
        display: inline-block;
	margin-left: 25%;
    }

    figcaption {
		font-family: museo-sans;
        position: absolute;
        top: 50%;
        left: -15%;
        transform: translate(0, -50%);
        background-color: rgba(255, 255, 255, 0.7);
        padding: 0px;
		width:40%;
		font-size: 1.5vw;
		line-height: 1.5;
    }

   figure img {
        max-width: 100%; /* Ensure the image doesn't exceed its container */
	   width:30%;
    }
h6 {
	text-align: center;
	margin-bottom: 1%;
	margin-top: 0;
	font-size: 1.5vw;
}



    .background-image {
     position:absolute;
		right:0%;
		top:1.5%;
      width: 30%;
      z-index: -1; /* Place the image behind other content */
		margin:0;
    }

#graphic2 {
	 position:absolute;
		left:-6%;
	top:0%;
      width: 30%;
	 z-index: -1;
}

#graphic3 {
	 position:absolute;
		right:-6%;
	top:48%;
      width: 40%;
	 z-index: -1;
}



.center {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	
}







#design {
	margin-top: 10%;
	text-align: center;
	margin-left: 0;
	margin-bottom: 5%;
}

#design h2 {
	text-align: center;
	font-weight: 600;
	font-size: 2vw;
}

#design h9 {
	text-align: center;
	font-weight: 500;
	font-size: 2.2vw;
}
#design .content {
	text-align: center;
	margin-left: 30%;
	font-family: "museo-sans-rounded", sans-serif;
	margin-right:1%;
}

.section6  p {
	margin-right: 10%;
	margin-left: 10%;
}

.section5 p {
	margin-left: 5%;
	margin-top:0%;
	margin-right: 10%;
}

#stylesheet {
   width: 70%;
	margin-right: 10%;
	margin-bottom: 5%;
}
.section7 h5 {
		font-size:2vw;
	font-weight:300;
	line-height: 1;
	text-align: center;
	letter-spacing: 1.5px;
	margin:0 auto;
	}
#logo {
    width: 50%;
    height: auto;
    margin-top: 1%;
cursor:zoom-in;
}

.section4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.section5 {
  display: flex;
	margin-top:4%;
	margin-left:5%;
}
.section7 {
	display: flex;
  justify-content: center;
  align-items: center;
	text-align: center;
	margin-bottom:10%;
	margin-top:10%;
}



#image-container {
    text-align: center;
}



/* Container 1  */





#marketingsection {
  	background-color: #eee;
  	padding: 20px;
  	margin: 0%;
	text-align: center;
	line-height:1;
	clear:both;
	order:98;
}



.show-section {
    opacity: 1 !important;
    pointer-events: auto;
}

footer {
	z-index:5000;
}

.thumbnail {
    position: relative;
    width: 12%; /* Adjust the width of each thumbnail */
    height: 12%; /* Adjust the height of each thumbnail */
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out; /* Add a smooth transition effect */
    z-index: 1; /* Adjust the z-index value */
	filter: drop-shadow(rgba(0,0,0,.5) 6px 6px 4px);
	cursor: pointer;
}


.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure the image covers the entire thumbnail */
}

.thumbnail > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: black; /* You may want to adjust the text color based on your design */
    z-index: 2; /* Adjust the z-index value to be higher than the thumbnail's z-index */
}


.thumbnail h3 {
background-color:rgba(255,255,255,.7);
	z-index: 100;
	border-radius: 5px;	color: black;
	font-size:1em;
	padding: 10px 10px 10px 10px;
	margin-left: 0;
	white-space: nowrap;
}

 .overlay {
      display: none;
      position: fixed;
      top: 0;
      right: 2%;
      width: 97%;
      height: 97%;
      background-color: rgba(255,255,255,1); 
      justify-content: center;
      align-items: center;
      z-index: 2000;
	 margin-top: 1%;
    }

.overlay img {
  max-width: 96%;
  max-height: 96%;
  display: block;
  position: relative; /* Add this line to make the position relative */
	 z-index: 2001;
	margin-top: 1%;
}

.close-button {
  position: absolute;
  top: 5%;
  right: 2%;
  color: black;
	background-color: white;
	border-radius: 5px;
  font-size: 50px;
  cursor: pointer;
	z-index: 3000;
	padding: 5px;
}

/* Show overlay when active class is present */
.overlay.active {
  display: flex;
}
.overlaysitemap.active {
  display: flex;
}

#overlayImage {
	z-index: 7002;
}
#overlayImagesitemap {
	z-index: 2002;
}


.footertext {margin-left: 2%;}
	#resume {
	color: rgb(198,104,101); 
	font-family: "bc-alphapipe",sans-serif;
	font-weight: 300;
	font-size:2vw;
	padding: 0 0 0 35px;
	text-align: center;
	display: block;
	text-indent:-40px;
}
	
	.bottomnav {
		margin: 0px 0px 0px 35px;
	}

.gallery {
    display: grid; /* Enables grid layout */
	gap: 15px; /* Creates space between items */
	grid-template-columns: repeat(auto-fill, minmax(400px, auto)); /* Dynamically fills the row */
    margin: 0 auto; /* Centers the gallery horizontally */
    max-width: 80%; /* Limits the maximum width */
    width: 80%; /* Sets the responsive width */
}

.gallery-item img {
    width: 100%;
    height: auto;
	 background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    text-align: center;
	max-width: 100%;
	display:inline-block;
	cursor: zoom-in;
}
.gallery-item iframe {
    width: 100%;
    height: 30em;
	 background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    text-align: center;
	max-width: 100%;
	display:inline-block;
}
#background11 {background-color:#b5c6d7;margin:5% 5% 5% 5%;border: solid rgba(80,40,30,0.3) 2px;}

@media only screen and (max-width : 600px){
	 /* top nav - show navicon image in mobile view */
	
	body,html {
		overflow-x:hidden;
	}
#background11 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Space between elements */
    padding: 0px 20px 0px 20px;
    max-width: 100%;
		margin-top: 1%;
}


#background11 img {
    max-width: 100%;
    height: auto;
    flex: 1 1 calc(80% - 40px); /* Adjusts to container's width minus padding/gaps */
    border-radius: 8px; /* Optional: rounded corners */
}
	#background11 iframe{
    max-width: 100%;
    height: 30em;
    flex: 1 1 calc(80% - 40px); /* Adjusts to container's width minus padding/gaps */
    border-radius: 8px; /* Optional: rounded corners */
		margin-top:0px;
}

#background11 .gallery-item {
    flex: 1 1 calc(80% - 0px); /* Example: Two items per row, adjust as needed */
    max-width: calc(80% - 0px);
	margin-top: 0px;
}

#background11 iframe {
    border: none; /* Remove iframe border for a clean look */
}
#deliverables {
	border-collapse: collapse;
	width: 70%;
	font-size: 2vw;
	margin-left:10%;
}
	
	  figcaption {
        position: absolute;
        top: 55%;
        left: -65%;
        transform: translate(0, -50%);
		width:85%;
		  font-size:2.4vw;
    }
	
	#section2 p {
		font-size:2.8vw;
	}
	
#businessplan .title {
		font-size: 3.5vw;
	}
	
	#businessplan .subtitle {
		font-size: 3vw;
	}
	
	#section1 .subtitle {
		font-size: 3vw;
	}
	
	#section1 .title {
		font-size: 3.5vw;
	}
	#section3 p {
		font-size:2.8vw;
	}
	
	#section4 p {
		font-size:2.8vw;
	}
	
	#section5 p {
		font-size:2.8vw;
	}
	
	#section6 p {
		font-size:2.8vw;
	}



.section4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


	
	#resume h8 {
		font-size: 3vw;
	}
	
	a#navicon {
      			display: block;
   			}
   			/* top nav - hide main nav bar in mobile view */
		   nav.top_nav ul {
			  display: none;
		   }
	
	#tableOfContents {
		display: none;
	}
   
   		/* top nav - display nav bar when hovering or tapping only mobile view */

		   a#navicon:hover+ul, nav.top_nav ul:hover {
			  display: block;
			  position:absolute;
			  right:7px;
		   }
	
		/* top nav - upon hover submenu opens to the left over other content */


			.mainmenu {
				background-color: rgb(235,217,199);
				border-radius: 10px;
				font-size: 1em;
				padding: 5px 5px 5px 5px;
				z-index: 2000;
			}
	
	.mainmenu li a {
		font-size: 1em;
		line-height: 2;
	}		
	
	
	.submenu {
				position: relative;
    			left: -100%;
			}
			
			.submenu li {
				white-space: nowrap;
			}

			
			/* header */
			header > img {
				width:48%;
			}
	
	img {
    max-width: 100%;
    height: auto;
}

	.thumbnail {
    position: relative;
    width: 20%; /* Adjust the width of each thumbnail */
    height: 20%; /* Adjust the height of each thumbnail */
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out; /* Add a smooth transition effect */
    z-index: 1; /* Adjust the z-index value */
	filter: drop-shadow(rgba(0,0,0,.5) 6px 6px 4px);
	cursor: pointer;
}
	

	.thumbnail h3 {
background-color:rgba(255,255,255,.7);
	z-index: 100;
	border-radius: 5px;	color: black;
	font-size:2vw;
	padding: 5px;
	margin-right: 5%;
	margin-left: 0;
	white-space: nowrap;
}
	#section1 {
		margin-top:2%;
	}
	
	#section1 .column {
		margin-top:5%;
	}
	#section1 .column2 {
		margin-left: 3%;
		margin-right: 6%;
		box-shadow:3px 3px 10px 0px rgba(80,40,30);
		padding-left: 4%;
	}
	.column p {
	font-size: 3vw;
		width:100%
}
	.column h1 {
	font-size: 6vw;
		width:100%
}
		.column h2 {
	font-size: 3vw;
		width:100%
}
	
	.column2 h2, .column2 p {
	font-size:2.6vw;
	font-weight:400;
	letter-spacing: 1.1px;
	line-height: 1.2;
font-family: "museo-sans-rounded", sans-serif;
}
	
	.column2 h3 {
	font-size:2.8vw;
	font-weight:600;
	
}
	.section1 {
		padding-bottom: 0%;
	}
	.steps {
		font-size: 3vw;
		font-weight: 700;
	}
	
	
	
	
	.steps2 {
		font-size: 3vw;
		font-weight: 700;
	}
	
	#hovert {
	display: none;
}
	
	#tapt {
		display: block;
		font-size: 2vw;
	}
	
	#sitemap p {
		width:50%
	}
	
	#sitemapimg {
		margin-top: 40%;
		margin-right: -5%;
	}
	
	.steps3 {
		font-size: 3vw;
		margin-left:10%;
		font-weight: 700;
	}
	
		.steps5 {
		font-size: 3vw;	
			margin-top:5%;
			font-weight: 700;
	}
	
			.steps6 {
		font-size: 3vw;	
				margin-top:5%;
				font-weight: 700;
	}
	
	
	#graphic9 {
		top:5%;
		width: 120%;
		left: 5%;
	}
	#design h2 {
		font-size:3vw;
		margin-top:10%;
		
	}
	#design h9 {
		font-size:3.5vw;
	}
	#design {
		margin-bottom: 10%;
	}
	
	.overlay {
      display: none;
      position: fixed;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255,255,255,1); 
      justify-content: center;
      align-items: center;
      z-index: 7001;
		right:0;
		margin:0;
    }

.overlay img {
  max-width: 90%;
  max-height: 90%;
  display: block;
  position: relative; /* Add this line to make the position relative */
	 z-index: 7002;
}
	
	.overlaysitemap {
      display: none;
      position: fixed;
      top: 0;
		right:0;
      width: 100%;
      height: 100%;
      background-color: rgba(255,255,255,1); 
      justify-content: center;
      align-items: center;
      z-index: 2000;
	 margin: 0%;
    }

.overlaysitemap img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  position: relative; /* Add this line to make the position relative */
	 z-index: 2001;
	margin-top: 1%;
	margin-right:15%;
}
	.footertext {margin-left: 7%;}
	

	
	.sitemapsubp {
	float: right;
	position:relative;
	left:5%;
	bottom:-50%;
}
	
	.sitemapli {
	font-family: museo-sans;
	margin-left: 3%;
		font-size: 3vw;
}
	
	#section4 p {
		margin-left:10%;
		margin-right: 10%;
	}
	#section7 h2 {
		font-size: 4vw;
	}
	
	.usersurvey h5 {
		font-size: 2.8vw;
	}
	.usersurvey h6 {
		font-size: 2.6vw;
	}
	
	figure {
        position: relative;
        display: inline-block;
	margin-left: 45%;
    }
   figure img {
        max-width: 100%; /* Ensure the image doesn't exceed its container */
	   width:50%;
	   
    }
	
	#usersubtype {
	font-size:1.5vw;
}
}

@media only screen and (min-width: 601px) {
		a#navicon {
      			display: none;
   			}
	
}

@media only screen and (min-width: 1700px)	{
	#graphic6 {
	 position:absolute;
		left:25%;
	top:-20%;
      width: 60%;
	 z-index: -1;
	transform: rotate(30deg)
}
	a#navicon {
      			display: none;
   			}
}
@media (max-width: 375px) {
    #background11 iframe,
    #background11 img {
        flex: 1 1 100%; /* Ensure full width for smaller screens */
        max-width: 100%; /* Ensure no horizontal overflow */
    }

    #background11 .gallery-item {
        flex: 1 1 70%; /* Ensure single column layout for small screens */
        max-width: 70%; /* Prevent any overflow */
        margin-left: 5%; /* Center the item horizontally and add vertical spacing */
    }
}