/***************** 
- Owner: 	Ryan Jeffery
- Date:		November 23, 2023
- Section:	CSS Variables 
******************/
/* Variables colors to assist JS light/dark mode function */
:root {
	/* Color variables for light mode */
	--background-color-light: #f5f5f5;
	--header-background: #f5f5f5;
	--navbar-color: #2b3634;
	--h1-color: #41534f;
	--h2-color: #637e77;
	--h3-color: #7ea69c;
	--h4-color: #000;
	--p-color: #000;
	--dmode-button-text-color: #fff;
	--dmode-button-background: #2b3634;
	--submit-button-background: #2b3634;
	--reset-button-background: #2b3634;
	--text-one-color: #000;
	--text-two-color: #030202;
	--topic-color: #060303;
	--quote-color: #060303;
	--topic-text-color-dark: #fff;
	--contactcontainer-background-color: #fff;
	--pageintro-background-color: #fff;
	--textarea-background-color: #E4E6E6;
	--media-caldaysbkgd-light: #E4E6E6;
	--media-caldays-light: #43524d;
	--media-calweekdays-light: #fff;
	--media-calmonth-light: #7ea69c;
	--team-card-background-color: #d6d6d6;
	/* Color variables for dark mode */
	--background-color-dark: #39403d;
	--header-background-dark: #1f2726;
	--navbar-color-dark: #1f2726;
	--h1-color-dark: #7ea69c;
	--h2-color-dark: #7c9f96;
	--h3-color-dark: #82b0a5;
	--h4-color-dark: #f5f5f5;
	--p-color-dark: #f5f5f5;
	--dmode-button-text-color-dark: #ebee22;
	--dmode-button-background-dark: #0a0a0a;
	--text-one-color-dark: #fff;
	--text-two-color-dark: #fff;
	--topic-color-dark: #fff;
	--quote-color-dark: #fff;
	--topic-text-color-dark: #fff;
	--contactcontainer-background-color-dark: #1f2726;
	--pageintro-background-color-dark: #000;
	--textarea-background-color-dark: #000;
	--submit-background-color-dark: #0a0a0a;
	--reset-background-color-dark: #0a0a0a;
	--media-caldaysbkgd-dark: #637e77;
	--media-caldays-dark: #fff;
	--media-calmonth-dark: #43524d;
	--media-calweekdays-dark: #E4E6E6;
	--team-card-background-color-dark: #303633;

}
/* Ryan Variable Section End */

/***************** 
- Owner: 	Lilit Markarian
- Date:		November 23, 2023
- Section:	Header and Logo
******************/
/* Customization of the header at the top of the website */
header {
	background-color: var(--header-background);
	padding: 5px;
	justify-content: space-between;
}

/* Customization of the logo of the website */
.logo {
	width: 195px;
	height: 111px;
	margin: 0;
}
/* Lilit Header and Logo Section End */

/***************** 
- Owner: 	Ryan Jeffery
- Date:		November 23, 2023
- Section:	Body CSS 
******************/
/* Customization of the site as a whole */
body {
	background-color: var(--background-color-light);
	font-family: helvetica, arial, sans-serif;
	margin: 0;
}

* {
	box-sizing: border-box;
}
/* Ryan Body CSS Section End */

/***************** 
- Owner: 	Lori Lowy & Craig Jurkiewicz
- Date:		November 23, 2023
- Section:	NAVIGATION BAR CSS
- Inspired By: 	https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp
               	https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp
				https://www.w3schools.com/howto/howto_css_menu_icon.asp
				https://stackoverflow.com/questions/17510658/css3-transition-fadein-with-displaynone
******************/
/* Customization of the navigation bar */
.navbar {
	overflow: hidden;
	background-color: var(--navbar-color);
	transition: .3s ease-in-out;
}

/* Customization of the links in the navigation bar */
.navbar a {
	float: left;
	font-size: 16px;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	display: block;
}

/* Selects active class for current page */
.active {
	background-color: #637e77;
	color: white;
}

/* Customization of the navigation bar dropdown */
.dropdown {
	float: left;
	overflow: hidden;
}

/* Customization of the dropdown button */
.dropdown .dropbtn {
	font-size: 16px;  
	border: none;
	outline: none;
	color: white;
	padding: 14px 16px;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
}

/* Customization of the navigation bar links when mouse hovers over them */
.navbar a:hover, .dropdown:hover .dropbtn {
	background-color: #7ea69c;
	transition: 0.3s;
}

/* Customization of the navigation bar dropdown content */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

/* Customization of the links in the navigation bar dropdown */
.dropdown-content a {
	float: none;
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
	/* Fade in animation for the drop down menu for several different browsers */
	animation-duration: 0.5s;
    animation-name: fadeInFromNone;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-name: fadeInFromNone;
    -webkit-animation-fill-mode: forwards;
    -ms-animation-duration: 0.5s;
    -ms-animation-name: fadeInFromNoneIE;
    -ms-animation-fill-mode: forwards;
}

/* Key frames animation webkit for older versions of chrome and safari */
@-webkit-keyframes fadeInFromNone {
    0% {opacity: 0}
    1% {opacity: 0}
    100% {opacity: 1}
}
/* Key frames animation for internet explorer */
@keyframes fadeInFromNoneIE {
    0% {opacity: 0}
    1% {opacity: 0}
	100% {opacity: 1}
}
/* Key frames animation for modern browsers that follow standard CSS specifications */
@keyframes fadeInFromNone {
    0% {opacity: 0}
    1% {opacity: 0}
    100% {opacity: 1}
}

/* Customization of the navigation bar dropdown text when mouse hovers over them */
.dropdown-content a:hover {
	background-color: #e0e0e0;
}

/* Shows the dropdown menu on hover */
.dropdown:hover .dropdown-content {
	display: block;
	opacity: 1;
	visibility: visible; 
}

/* Responsive Design for the navigation bar, heighter max with threshold to prevent stacking */
@media screen and (max-width: 925px) {
	/* Selects navbar links and the drop btn class in dropdown class */
	.navbar a, .dropdown .dropbtn {display: none;}
	
	/* Selects all elements in the navbar and responsive class */
	.navbar.responsive {position: relative;}
	
	/* Selects links in both navbar and responsive class */
	.navbar.responsive a {
		float: none;
		display: block;
	  	text-align: left;
	}
	
	/* Selects dropdown in the navbar and responsive class */
	.navbar.responsive .dropdown {float: none;}
    	
	/* Selects dropdown content in the navbar and responsive class */
	.navbar.responsive .dropdown-content {
		position: relative;
		/* Dropdown stays open in responsive so user knows what page they are on - removing this line of code makes the dropdown work normally */
		display: block;
	}
	
	/* Selects dropdown button in the navbar and responsive class */
	.navbar.responsive .dropdown .dropbtn {
		display: block;
		width: 100%;
		text-align: left;
	}
	
	/* Selects hamburger class (menu icon) */
	.hamburger {
		cursor: pointer;
		float: right;
		transition: ease-in-out.3s;
		position: relative;
		padding-right: 5px;
		display: block;
	}
	
	/* CSS for the 3 bars, adding a transition effect as well so when the animation is run there is a smooth transition */
	.bar1, .bar2, .bar3 {
		width: 35px;
		height: 5px;
		background-color: white;
		margin: 6px 0;
		transition: 0.3s;
	}
	
	/* Animation, where bars 1 and 3 will move to a 45 degree angle and the middle bar will disappear */
	.change .bar1 {transform: translate(0, 11px) rotate(-45deg);}
	.change .bar2 {opacity: 0;}
	.change .bar3 {transform: translate(0, -11px) rotate(45deg);}
}
/* Lori & Craig Navigation Bar CSS Section End */

/***************** 
- Owner: 	Helen Plesko
- Date:		November 21, 2023
- Section:	CSS Heading Styles 
- Colour inspiration from: https://www.colorhexa.com/
******************/
/* Customization of Header 1 */
h1 {
	color: var(--h1-color);
	text-align: center;
	font-weight: bold;
	font-size: 30px;
	font-family: helvetica, arial, sans-serif;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 5px;
	padding-top: 20px;
}

/* Customization of Header 2 */
h2 {
	color: var(--h2-color);
	text-align: center;
	font-weight: bold;
	font-size: 25px;
	font-family: helvetica, arial, sans-serif;
	padding-left: 10px;
	padding-right: 10px;
}

/* Customization of Header 3 */
h3 {
	color: var(--h3-color);
	text-align: center;
	font-weight: normal;
	font-size: 20px;
	font-family: helvetica, arial, sans-serif;
	padding-left: 10px;
	padding-right: 10px;
}

/* Customization of Header 4 */
h4 {
	color: var(--h4-color);
	text-align: center;
	font-weight: bold;
	font-size: 17px;
	font-family: helvetica, arial, sans-serif;
	padding-left: 10px;
	padding-right: 10px;
}

/* Customization of paragraph text */
p, li {
	color: var(--p-color);
	text-align: left;
	font-weight: normal;
	font-size: 15px;
	font-family: helvetica, arial, sans-serif;
	padding-left: 10px;
	padding-right: 10px;
}
/* Helen Heading & Paragraph Styles Section End */

/***************** 
- Owner: 	Craig Jurkiewicz
- Date:		November 23, 2023
- Section:	Comment Box CSS (in progress)
- Inspired By: 	https://www.w3schools.com/howto/howto_css_contact_section.asp
				https://www.youtube.com/watch?v=eUMqJMkwOBY&t=9s
******************/
/* Container involved with the contact section and style the area outside the contact box*/
.flex-container {
	min-height: 100vh;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 10px;
	padding-bottom: 20px;
	background-color: var(--background-color-light);
}

/* Container to hold content on contact page */
.contactcontainer { 
	width: 85%;
	border-radius: 6px;
	padding: 20px 60px 30px 40px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	background-color: var(--contactcontainer-background-color);
}

/* Organinzing the content inside the container */
.contactcontainer .contactcontent {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Organizing the area on the left side of the content box */
.contactcontainer .contactcontent .bottom {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-top: 15px;
}

/* Creating a long | to stylize and separate boxes in the contact box */
.divider {
	border-top: 8px solid #bbb;
	border-radius: 5px;
	margin-bottom:14px;
}
 
/* Stylizing the text on the left-hand side */
.contactcontent .bottom .details .text-one,
.contactcontent .bottom .details .text-two {
	font-size: 16px;
	color: var(--text-one-color);
}

/* Creating a margin and centering the text and icons on the left side of the div */
.contactcontent .bottom .details {
	margin: 14px;
	text-align: center;	
}

/* Adding style to the topic section text on the left-hand side for the address phone number and email address */
.contactcontent .bottom .details .topic {
	font-size: 18px;
	font-weight:500;
	color:var(--topic-color);
}

/* Stylizing the icons on the left-hand side of the contact section */
.contactcontent .bottom .details i {
	font-size: 30px;
	color: rgb(139, 173, 140);
}
 
/* Creating a larger divide between the left and ride side of the contact box */
.contactcontainer .contactcontent .contactinput {
	width: 75%;
	margin-left:50px;
}
	
/* Adding style to the input boxes with specific height width and margin */
.contactinput .input-box {
	height: 50px;
	width: 100%;
	margin: 12px 0;
}

/* Adding Style to the bottom half topic text (Contact US) */
.contactcontent .contactinput .topic-text {
	font-size: 23px;
	font-weight: 600;
	color: var(--topic-text-color);
} 

/* Adding style to the select box container */
.select-box {
	display:flex;
	justify-content: center;
	position: relative;
	border-radius: 6px;
	margin-left: 6px;
	width: 250px;
	height: 25px;
	background-color: #F0F1F8;
}

/* Adding style to the input box areas where the user inputs their name, email address and message for Layer Larks as well as variables for dark mode */
.contactinput .input-box input,
.contactinput .input-box textarea {
	height: 100%;
	width: 100%;
	border: none;
	outline: none;
	font-size: 16px;
	background: #F0F1F8;
	border-radius: 6px;
	padding: 0 15px;
	resize: none;
	background-color:var(--textarea-background-color)
}

/* Adding in a minimum height for the Message box for the user to fill in */
.contactinput .message-box {
	min-height: 110px;
} 

/* Adding padding to the message box and changing font */
.contactinput .input-box textarea {
	padding-top: 12px;
	font-family: helvetica, arial, sans-serif;
}

/* Adding style to the contact button to create some distance between above divs */
.contactinput .contactbutton {
	display: inline-block;
	margin-top: 12px;
}


/* Adding style to the submit button */
#submit {
	color: #fff;
	font-size: 15px;
	outline:none;
	border:none;
	padding: 8px 16px;
	border-radius: 6px;
	background: var(--submit-button-background);
	cursor: pointer;
	transition: all 0.3s ease;
}

/* Adding color for the submit button when the user hovers over it */
#submit:hover {
	background: #044603;
}

/* Adding style to the reset button */
.contactinput .contactbutton input[type="reset"] {
	color: #fff;
	font-size: 15px;
	outline:none;
	border:none;
	padding: 8px 16px;
	border-radius: 6px;
	background: var(--reset-button-background);
	cursor: pointer;
	transition: all 0.3s ease;
}
 
/* Changing the color for the reset button when the user hovers over it */
.contactbutton input[type="reset"]:hover {
	background: #044603;
}

/* Adding responsive design to the contact box, designed in a way so that the icons/details will narrow from a 3x1 row to a triangle in appearance and then into a single column as the webpage narrows */
@media (max-width: 820px) {
	/* Setting up the margins and height to the div container holding the contact */
	.contactcontainer {
		margin: 40px 0;
		height: 100%;
	}

	/* Settomg the dimensions of the containers icons/bottom half, turning the direction into a column so it lines up better on a mobile device */
	.contactcontainer .contactcontent .bottom {
		width: 100%;
		flex-direction: column;
		margin-top: 40px;
		justify-content: center;
		flex-wrap: wrap;
	}
}
/* Craig Comment Box Section End */
  
  
/***************** 
- Owner: 	Craig Jurkiewicz 
- Date:		November 23, 2023
- Section:	Testimonials
- Inspired By:	https://www.youtube.com/watch?v=-XX6MgbzQa8 
******************/
/* Classes for the banner and header having a slightly opaque background for the header and ensuring no items overlap */ 
.testibanner {
	position: relative;
	width: 100%;
	height: 150px;
	display: inline-block;
	align-items: center;
	justify-content: center;
}
	 
/* Adding style to the h1 text inside the testibanner */
.testibanner h1 {
	position: relative;
	text-align: center;
	font-size: 40px;
	border-radius: 26px;
	padding: 20px;
	margin: 15px;
	background-color: rgb(233, 233, 233);
	opacity: 0.7;
}

/* First div that encompasses all the boxes on testimonial page */ 
.wrapper {
	max-width: 1200px;
	margin: auto;
	padding: 0 20px;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: space-around;
}

/* Grabbing all the content that's in the .box class that's wrapped inside the .wrapper class  */
.wrapper .box {
	width: calc(33% - 10px);
	padding: 25px;
	margin: 10px;
	border-radius: 20px;
	box-shadow: 0px 4px 8px rgba(0,0,0,0.15);
	background-color: #57595d;
	background-image: linear-gradient(-25deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
}

/* Adjusting the size of the quotes that are stacked inside the two divs */ 
.wrapper .box i.quote {
	font-size: 15px;
	color: var(--quote-color);
}

/* CSS to adjust and align items in the content inside the box and wrapper, having the content be centered and putting space between the content */
.wrapper .box .testicontent {
	align-items: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 25px;
	margin-bottom: 25px;
	background-color: #a6a6a6;
	border-radius: 20px;
	width:fit-content;
	padding-right: 10px;
	padding-left: 10px;
}

/* Having the name div inside the info and box have a font weight and size */
.box .info .name {
	font-weight: 600;
	font-size: 17px;
	text-align: center;
}

/* Having the font size of the job information inside the .info and .box divs */
.box .info .job {
	font-size: 16px;
	font-weight: 500;
	color: black;
	text-align: center;
}

/* Creaing a margin for the .stars class inside the .box .info */
.box .info .stars {
	margin-top: 2px;
	text-align: center;
}

/* Color for the stars on testimonial page */
.box .info .stars i {
	color: white;
	text-align: center;
}

/* Adjusting the div inside the client image class, with a border radius and different background color than the image itself */
.box .testicontent .clientimage {
	position: relative;
	height: 150px;
	width: 150px;
	padding: 4px;
	background: #2b3634;
	border-radius: 100%;
	margin-left: auto;
	margin-right: auto;
	display:block;
}

/* CSS for the image itself, having a smaller border around the image to create a layering effect */
.testicontent .clientimage img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	border-radius: 75%;
	border: 4px solid #362f2b;
}
	 
/* Changes the webpage to stack the boxes on top of each other when the screen size is 950 pixels wide and keeping all the divs cenetered */
@media screen and (max-width: 950px) {
	/* Center the divs surrounding the content of the testimonials when screen size is decreased */
	.wrapper .box {
		width: 100%;
		align-items: center;
		margin:70px;
	}

	/* setting a width of the testicontent div when screen size is reduced */
	.wrapper .box .testicontent {
		width:250px;

	}

	/* to center the image within the testicontent div when screen size is decreased */
	.box .testicontent .clientimage {
		align-items: center;
		margin-left: auto;
		margin-right: auto;
		display:block;
	}
}
/* Craig Testimonials Styles Section End */

/***************** 
- Owner: 	Helen Plesko
- Date:		November 23, 2023
- Section:	FOOTER CSS 
- Inspired By:	https://www.evarigisconsulting.com/
				https://www.w3schools.com/html/html_layout.asp
				https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_social_media_buttons
				https://programmersportal.com/how-to-center-social-media-icons-using-css/
******************/
/* Customization of footer background */
footer {
	position: static;
	background-color: var(--navbar-color);
	padding-top: 30px;
	padding-bottom: 30px;
}

/* Customization of footer p element */
.footertext p {
	color: #FFF;
	text-align: center;
	font-weight: normal;
	font-size: 13px;
	font-family: helvetica, arial, sans-serif;
}

/* Customization of footer address info */
address {
	color: #cfcfcf;
	text-align: center;
	font-weight: normal;
	font-size: 13px;
	font-family: helvetica, arial, sans-serif;
	margin-left: 10%;
	margin-right: 10%;
}

/* Customization of all footer social media icons */
.fab {
	padding: 15px;
	font-size: 20px;
	text-align: center;
	text-decoration: none;
	border-radius: 50%;
	transition: .3s ease-in-out;
}

/* Customization of footer social media icon hover - makes icon semi-transparent when user hovers over it */
.fab:hover {
    opacity: 0.5;
}

/* Customization of footer Facebook icon */
.fa-facebook {
	background: #637e77;
	color: #FFF;
}

/* Customization of footer Twitter icon */
.fa-twitter {
	background: #637e77;
	color: #FFF;
}

/* Customization of footer Instagram icon */
.fa-instagram {
	background: #637e77;
	color: #FFF;
}

/* Centers the icon on the webpage */
.centericon {
	display: flex;
    column-gap: 10px;
    justify-content: center;
}
/* Helen Footer Section End */

/***************** 
- Owner: 	Ryan and Lilit
- Date:		November 23, 2023
- Section:	Toggle Dark Mode
- Inspired By:	https://www.w3schools.com/howto/howto_js_toggle_dark_mode.asp
******************/
/* Customization of Dark Mode */
.dark-mode {
	--background-color-light: var(--background-color-dark);
	--header-background: var(--header-background-dark);
	--navbar-color: var(--navbar-color-dark);
	--h1-color: var(--h1-color-dark);
	--h2-color: var(--h2-color-dark);
	--h3-color: var(--h3-color-dark);
	--p-color: var(--p-color-dark);
	--dmode-button-text-color: var(--dmode-button-text-color-dark);
	--dmode-button-background: var(--dmode-button-background-dark);
	--text-one-color: var(--text-one-color-dark);
	--text-two-color: var(--text-two-color-dark);
	--topic-text-color: var(--topic-text-color-dark);
	--topic-color: var(--topic-color-dark);
	--quote-color: var(--quote-color-dark);
	--contactcontainer-background-color: var(--contactcontainer-background-color-dark);
	--pageintro-background-color: var(--pageintro-background-color-dark);
	--textarea-background-color: var(--textarea-background-color-dark);
	--media-caldaysbkgd-light: var(--media-caldaysbkgd-dark);
	--media-caldays-light: var(--media-caldays-dark);
	--media-calweekdays-light: var(--media-calweekdays-dark);
	--media-calmonth-light: var(--media-calmonth-dark);
	--team-card-background-color: var(--team-card-background-color-dark);

}

/* Customization of Dark Mode button */
#dark-mode-button {
	border: none;
	border-radius: 6px;
	height: 38px;
	width: 100px;
	background: var(--dmode-button-background);
	color: var(--dmode-button-text-color);
	float: right;
	margin-top: 5px;
	font-weight: 600;
}
/* Ryan and Lilit Dark Mode Section End */

/***************** 
- Owner: 	Helen Plesko
- Date:		November 21, 2023
- Section:	INDUSTRY PAGE CSS
- Inspired by:	Shawn Morgan, https://fleming.desire2learn.com/d2l/le/content/200606/Home
				https://www.w3schools.com/howto/howto_css_image_overlay.asp
				https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_two_columns_responsive
				https://www.w3schools.com/howto/howto_css_image_center.asp
******************/
/* Customization of paragraph text within content page, introduces the current industry page */
.pageintro p {
	color: var(--p-color);
	text-align: center;
	font-weight: normal;
	font-size: 16px;
	font-family: helvetica, arial, sans-serif;
	padding: 10px;
	border-radius: 6px;
	border: 2px solid var(--h1-color);
	background: var(--pageintro-background-color);
	margin-left: 10%;
	margin-right: 10%;
}

/* Container to hold projects */
.projectcontainer {
	position: relative;
	width: 100%;
}

/* Customization of project image, center to column, change opacity when user hovers over it */
.projectimage {
	opacity: 1;
	display: block;
	transition: .6s ease-in-out;
	backface-visibility: hidden;
	margin-left: auto;
	margin-right: auto;
}

/* Customization project image text box that displays text in the middle of the project image */
.projectmiddle {
	transition: .6s ease-in-out;
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

/* Customization of project image opacity when hovered over it */
.projectcontainer:hover .projectimage {opacity: 0.4;}

/* Customization of project text box opacity when hovered over the project image */
.projectcontainer:hover .projectmiddle {opacity: 1;}

/* Customization of text about the project that appears when hovered over the image */
.projecttext p {
	background-color: var(--h3-color);
	color: #FFF;
	font-weight: normal;
	font-size: 16px;
	font-family: helvetica, arial, sans-serif;
	padding: 16px 32px;
	border-radius: 6px;
	text-align: center;
}

/* Responsive Two Column Layout for Projects Page Begin */
/* Create two even columns */
.columnprojects {
	float: left;
	width: 50%; /* two columns */
	padding-left: 10px;
	padding-right: 10px;
}

/* Clear floats after columns to allow page to continue flow of other content */
.rowprojects:after {
	content: "";
	display: table;
	clear: both;
	padding-bottom: 25px;
	margin-bottom: 6px;
}
/* Display projects in one column if page size is too small */
@media screen and (max-width: 1500px) {
	.columnprojects {width: 100%;}
}
/* Responsive Two Column Layout for Projects Page End */

/* Helen Industry Page CSS End */

/***************** 
- Owner: 	Lori Lowy
- Date:		November 29, 2023
- Section:	INDEX PAGE CSS
- Inspired by:	https://blog.hubspot.com/website/video-background-css
******************/
/* Customization of banner class */
.home-banner {
	position: relative;
	width: 100%;
	height: 450px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* Customization of h1 element in banner class */
.home-banner h1 {
	text-align: center;
	font-size: 5rem;
	padding: 20px;
	margin: 15px;
	color: #fff;
	opacity: 0.7;
}

/* Customization of home-vidcontainer class */
.home-vidcontainer {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
}

/* Customization of dividing lines */
hr.rounded {
	border-radius: 6px;
	border-top: 3px solid var(--h3-color);
	margin: 25px;
}

/* Customization of home-aboutus ul and home-aboutus p elements */
.home-aboutus ul, .home-aboutus p {
	color: var(--p-color);
	text-align: center;
	font-weight: normal;
	font-size: 18px;
	font-family: helvetica, arial, sans-serif;
	padding-left: 40px;
	padding-right: 40px;
	list-style-type: none;
}

/* Customization of home-aboutus li element */
.home-aboutus li {
	color: var(--p-color);
	padding-bottom: 10px;
	text-align: center;
	font-size: 18px;
	font-family: helvetica, arial, sans-serif;
	padding-left: 40px;
	padding-right: 40px;
	list-style-type: none;
}

/* 3 column design for industries section on index */
/* src: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_two_columns_responsive */
.hcolumn1, .hcolumn2, .hcolumn3 {
    float: left;
    width: 33.33%;
    padding: 15px;
	text-align: center;
}

/* Clear floats after the columns using the row class */
.row::after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive design for resizing images */
img {
	max-width: 100%;   
	height: auto;
}	

/* Customization of home-industry class */
.home-industries {
	height: auto;
}

/* Customization of home-industry p element */
.home-industries p {
	text-align: center;
	font-size: 18px;
	padding: 0 30px;
}

/* Customization of testimonial section */
/* Inspiration: https://codepen.io/aimieisanxious/pen/XWxOeya */
/* Customization of home-testimonial-container class */
.home-testimonial-container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 40px;
	margin: 30px 0 50px;
	position: relative;
	flex-direction: column;
}

/* Customization of home-testimonials class */
.home-testimonials {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}

/* Customization of home-testimonial h1 element */
.home-testimonial-container h1 {
	padding: 10px 10px 15px;
	text-align: center;
	width: 100%;
	margin: 0 auto 30px;
}

/* Customization of home-testimonial class */
.home-testimonial {
	width: 25%;
	border-radius: 10px;
	background: var(--h3-color);
	padding: 20px;
	position: relative;
	margin-bottom: 20px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

/* Customization of after the content of home-testimonial class */
.home-testimonial::after {
	content: "";
	display: block;
	position: absolute;
	bottom: -15px;
	right: 50px;
	width: 0;
	border-width: 15px 20px 0;
	border-style: solid;
	border-color: var(--h3-color) transparent;
}

/* Customization of home-testimonial h4 element */
.home-testimonial h4 {
	margin-bottom: 10px;
}

/* Customization of home-testimonial-author class */
.home-testimonial-author {
	font-size: 15px;
	font-weight: bold;
	color: var(--p-color);
	position: absolute;
	bottom: -40px;
	right: 0;
}

/* Customization of home-contact class */
.home-contact {
	margin: 20px;
}

/* Responsive design if the browser window is 600px or smaller */
@media screen and (max-width: 600px) {
	/* Classes starting with home-column is set to 100% width */
    [class*="hcolumn"] {
        width: 100%;
	}

	/* Customization of home-testimonials class */
	.home-testimonials {
		flex-direction: column;
		align-items: center;
	}

	/* Customization of home-testimonial class */
	.home-testimonial {
		width: 90%;
		margin-bottom: 60px;
	}

	/* Customization of home-banner h1 element */
	.home-banner h1 {
		font-size: 3rem;
	}
}
/* Lori Index Page CSS End */

/***************** 
- Owner: 	Lilit Markarian
- Date:		December 2, 2023
- Section:	Career Page CSS
- Inspired by:	
- Content from: Canva
******************/

/* Customization of banner class */
/* For the banner video I used the same sizes and a similar code to Lori's to not have very different styles on each page */
.bannercareer {
	position: relative;
	max-width: 100%;
	width: 100%;
	height: 450px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* Customization of vidcontainer for careers page class */
.vidcontainerc {
	position: absolute;
	overflow: hidden;
	top: 0;
	right: 0;
	z-index: -1;
	width: 100%;
	height: auto;
	transform: translate(0%,-40%);
}

/* Customization of h1 for the banner of careers page */
.bannercareer h1 {
	text-align: center;
	font-size: 3rem;
	padding: 20px;
	margin: 15px;
	color: white;
	opacity: 0.8;
}

/* Customization of green mask over the video banner */
.mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	background-color: rgba(65, 83, 79, 0.2);
}

/* Customization of cards and containers of Career page */
/* Inspired by https://www.youtube.com/watch?v=TJe8fYs0PiI */
.career-container {
	background-color: transparent;
	max-width: 1500px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0px 100px;
}

/* Customization of each column in the career container */
.columncareers1, .columncareers2, .columncareers3 {
	margin: 0 20px 25px;
	background-color: transparent;
	flex-basis: 33%;
	justify-content: center;
	text-align: center;
}

/* Adding a padding on the Cards */
.card {
	padding: 15px 25px;
}

/* I got a little help from chatGPT to know how to do the responsive part of cards. used only 2 lines, the flex-direction and flex-basis */
@media (max-width: 600px) {
	/* Career Container to have a padding and center when the screen is smaller */
	.career-container {
	  padding: 0 20px; 
	  flex-direction: column;
	  align-items: center;
	}
	
	/* Customization of the career columns */
	.columncareers1, .columncareers2, .columncareers3 {
	  flex-basis: 100%; 
	  margin: 0 0 25px;
	}
}

/* Customization of the container that contains the county maps on the career page */
.countries-container {
	background-color: transparent;
	border: 20px solid rgba(120, 144, 140, 0.226);
	max-width: 1450px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	height: auto;
	padding: 0px 15px;
}

/* Customization of each country map */
.countries {
	margin: 0 5px 25px;
	background-color: transparent;
	flex-basis: 100%;
	justify-content: center;
	text-align: center;
}

/* Customization of each country card */
.countries-card {
	padding: 15px;
	align-items: center;
	flex-wrap: wrap;
}

/* Customization of the countries container to have a responsive design when the window is smaller than 600px */
@media (max-width: 600px) {
	/* Customization of the countries container */
	.countries-container {
	  padding: 0 50px; 
	}

	/* Customization of each country map */
	.countries {
	  flex-basis: 50%; 
	}
}

/* Customization of images and texts container of the Careers page */
.wrapped-content {
	margin: 25px auto;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 75vh;
	background-color: transparent;
	width: 70%;
	padding: 0%;
}

/* Customization of the images on the career page */
.careersimages {
	max-width: 100%;
	float: left;
	margin-left: 20px;
	margin-right: 25px;
}

/* Customization of the text on the career page */
.wrapped-text-box {
	justify-content: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Customization of the text h3 to have a different size than the main h3 */
.wrapped-text-box h2 {
	display: flex;
	font-size: 30px;
	margin: 0;
}

/* Customization of the text p to have a different size than the main p */
.wrapped-text-box p {
	display: flex;
	text-align: center;
	font-size: 20px;
	color:var(--p-color);
}

/* Customization of the second image and text container */
.wrapped-content-2 {
	margin: 25px auto;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 75vh;
	background-color: transparent;
	width: 70%;
	padding: 0%;
}

/* Customization of the second image for the careers */
.careersimages2 {
	max-width: 100%;
	float: left;
	display: flex;
	margin-left: 20px;
	margin-right: 20px;
}

/* Customization of the third image and text container */
.wrapped-content-3 {
	margin: 25px auto;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 75vh;
	background-color: transparent;
	width: 70%;
	padding: 0%;
}

/* Customization of the third image for the careers */
.careersimages3 {
	max-width: 100%;
	float: left;
	margin-left: 20px;
	margin-right: 20px;
}

/* Customization of the Open Application container */
.openapp {
	margin: 0 20px 25px;
	background-color: transparent;
	flex-basis: 100%;
	text-align: center;
	padding:0;
}

/* Customization of the h2 of "Open Application" */
.openapp h2 {
	display: flex;
	font-size: 35px;
	margin-top: 40px;
	justify-content: center;
	align-items: center;
}

/* Customization of the h3 of "Open Application" text */
.openapp h3 {
	justify-content: center;
	align-items: center;
	display: flex;
	font-size: 18px;
}

/* Customization of the responsive design when the window is smaller than 600px */
@media screen and (min-width:600px) {
	/* Customization of the openapp container */
	.openapp {
		flex-basis:48%;
		margin:0 1%;
	}
}

/* Customization of Career's Page Apply Now Button*/
/* inspiration: https://www.w3schools.com/css/css3_buttons.asp */
/* Customization of the button container */
.buttoncontainer {
	margin: 0 5px 25px;
	background-color: transparent;
	display: flex;
	text-align: center;
}

/* Customization on the applynow button */
.applynowbutton {
	background-color: #43524d;
	border: none;
	color: white;
	padding: 15px 10px;
	justify-content: center;
	text-decoration: none;
	display: flex;
	font-size: 18px;
	flex-basis: 100%;
	margin-left: 10%;
	margin-right: 10%;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
	border-radius: 6px;
}

/* Customization of the h3 of the applynow text */
.applynowbutton h3 {
	color: white;
}

/* Adding a hover on the applynow button */
.applynowbutton:hover {
	background-color: #7ea69c;
	transition: 0.3s;
}

/* Lilit Career Page CSS End */

/***************** 
- Owner: 	Helen Plesko
- Date:		December 3, 2023
- Section:	MEDIA PAGE CSS
- Inspired by:	Lori Lowy home page, https://codepen.io/aimieisanxious/pen/XWxOeya
******************/
/* Customization of how to display calendar month */
.calendarmonth {
	padding: 10px;
	width: 100%;
	background-color: var(--media-calmonth-light);
}

/* Customization of calendar month text */
.calendarmonth h3 {
	color: #FFF;
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-family: helvetica, arial, sans-serif;
	text-align: center;
	font-weight: bold;  
}

/* Customization of how to display calendar weekdays */
.calendarweekdays {
	margin: 0;
	padding: 10px 0;
	background-color: var(--media-calweekdays-light);
}

/* Customization of calendar weekday text */
.calendarweekdays li {
	display: inline-block;
	width: 13.6%;
	color: #666;
	text-align: center;
	font-family: helvetica, arial, sans-serif;
	font-weight: bold;
}

/* Customization of how to display calendar days */
.calendardays {
	padding: 10px 0;
	background-color: var(--media-caldaysbkgd-light);
	margin: 0;
}

/* Customization of calendar day text */
.calendardays li {
	list-style-type: none;
	display: inline-block;
	width: 13.6%;
	text-align: center;
	margin-bottom: 5px;
	font-size: 16px;
	color: var(--media-caldays-light);
}

/* Customization of calendar days that have an event occurring on that day */
.calendardays .mediaevent {
	color: #000;
	font-weight: bold;
}

/* Responsive layout for smaller screens, shrinking the calendar */
@media screen and (max-width:720px) {
  .calendarweekdays li, .calendardays li {width: 13.1%;}
}

@media screen and (max-width: 420px) {
  .calendarweekdays li, .calendardays li {width: 12.5%;}
  .calendardays li {padding: 2px;}
}

@media screen and (max-width: 290px) {
  .calendarweekdays li, .calendardays li {width: 12.2%;}
}

/* Customization of paragraph text on media page */
.mediapagetext p {
	text-align: center;
	margin: 0;
}

/* Customization of h4 text on media page */
.mediapagetext h4 {
	padding-top: 5px;
	margin-bottom:0;
}

/* Customization of container that holds the news article images and future events */
.mediacontainer {
	background-color: transparent;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Customization of columns to format news article images and future events */
.mediacolumn {
	margin: 0 20px 25px;
	background-color: transparent;
	flex-basis: 25%;
	text-align: center;
}

/* Adding a padding on the news images */
.newsarticle {
	padding: 15px 25px;
}

/* Making the columns on the media page responsive, they stack when the page gets too small */
@media (max-width: 700px) {
	.mediacontainer {
	  flex-direction: column;
	  align-items: center;
	}
}

/* Customization of container holding the future events section of the media page */
.media-futureevents-container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

/* Customization of future events display */
.media-futureevents {
	display: flex;
	justify-content: space-evenly;
}

/* Customization of h3 text in future events box */
.media-futureevents h3 {
	margin: 0;
	font-weight: bold;
}

/* Customization of home-testimonial class */
.media-futureevent {
	width: 50%;
	border-radius: 10px;
	background: var(--media-caldaysbkgd-light);
	padding: 20px;
	position: relative;
	margin: 20px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

/* Responsive design if the browser window is 600px or smaller */
@media screen and (max-width: 600px) {
	/* Customization of both future event boxes */
	.media-futureevents {
		flex-direction: column;
		align-items: center;
	}

	/* Customization of single future event box */
	.media-futureevent {
		width: 90%;
		margin-bottom: 60px;
	}
}
/* Helen Media Page CSS End */

/***************** 
- Owner: 	Ryan Jeffery
- Date:		December 5, 2023
- Section:	TEAM PAGE CSS
- Inspired by:	https://www.w3schools.com/howto/howto_css_flip_card.asp
				https://www.w3schools.com/csS/css3_flexbox_responsive.asp
				https://www.w3schools.com/howto/howto_css_profile_card.asp
******************/

/* Responsive Flexbox container that arranges cards */
.team-flex-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 50px;
	gap: 50px;
}


/* Container for a team card, sets size and 3D perspective with a background colour that makes sense */
.team-card-container {
	height: 350px;
	width: 250px;
	perspective: 500px;
	background-color: var(--team-card-background-color);
	/* border that goes within the container */
	border: 6px outset gray;
	box-shadow: 0 8px 16px 0 rgba(37, 34, 34, 0.2);
	border-radius: 25px;
	overflow: hidden;
	display: flex;
	flex-direction: row;
}

/* Inner container that manages the flip transition effect */
.team-card-container-inner {
	position: relative;
	height: 100%;
	width: 100%;
	text-align: center;
	transition: transform 0.8s;
	transform-style: preserve-3d;
	border-radius: 19px;
}

/* Back of the card styling */
.team-card-back {
	/* Flip the back to begin with so it can be flipped on hover */
	transform: rotateY(180deg);
}

/* The flip effect when the card is hovered over */
.team-card-container:hover .team-card-container-inner {
	transform: rotateY(180deg);
	box-shadow:	0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Styling that both sides have in common */
.team-card-front, .team-card-back {
	position: absolute;
	height: 100%;
	width: 100%;
	/* Hides the other side of the card so both aren't displayed */
	backface-visibility: hidden;
	/* This webkit property is necessary for Safari and older versions of Chrome*/
	-webkit-backface-visibility: hidden; 
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 10px;
	background-color: #7c9f96;
	border-radius: 19px;
}

/* Styling for the name of the team member on the contact card */
.team-card-front h2 {
	position: absolute;
	top: 68%;
	text-align: center;
	color: black;
	font-weight: normal;
	font-size: 20px;
	font-family: helvetica, arial, sans-serif;
}

/* Styling for the front card text */
.team-card-front p {
	position: absolute;
	top: 75%;
	text-align: center;
	color: black;
	font-weight: normal;
	font-size: 16px;
	font-family: helvetica, arial, sans-serif;
}

/* Styling for the back card text */
.team-card-back p {
	color: var(--p-color);
	text-align: center;
	font-weight: normal;
	font-size: 16px;
	font-family: helvetica, arial, sans-serif;
}

/* Image styling, made to fill the top of the card and only rounding the top 2 corners */
.team-card-front img {
	width: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	border-radius: 19px 19px 0 0;
}

/* Ryan Team Page CSS End */