/* Main Stylesheet for WWD */
/* 29 Sep 2023 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    font-size: 100%; /* 100% = 16px = 1rem, then scale everything with rem */
    line-height: 1.6;
}

/*
 * Remove text-shadow in selection highlight.
 * Customize the background color to match design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule.
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    max-width: 75%;
	margin: 1.25em auto;
    padding: 0;
}

/*
 * Remove the gap between images, videos, etc. and the bottom of their containers.
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}


/* ==========================================================================
   Custom styles
   ========================================================================== */

/* Styles for Main Menu */

* {
	box-sizing: border-box; /* include margins and padding in size widths */
}

nav ul li a:visited, nav ul li a:active {
    color: #646464;
    position: relative;
    text-decoration: none;
}

nav ul li a:hover {
    color: #522398;
}

/* New header */

.header-new {
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 2;
overflow: hidden;
/*padding-top: 20px;*/
/*padding-bottom: 0;*/
background-color: rgba(255,255,255,1.0);
}

.header-container-new {
position: relative;
overflow: hidden;
	/*max-width: 1200px;*/
    max-width: 1600px;
margin: 0 auto;
    margin-bottom: 0 !important;
}

.header-container-new.row {
    align-items: center;
}

#main-logo-new {
	/*float: left;*/
	width: 50%;
	padding-left: 20px;
    /*padding-bottom: 20px;*/
}

#main-logo-new > a {
	display: inline-block;
}

#main-menu-new {
	/*float: left;*/
	width: 50%;
	text-align: right; /* change to align center on small screens */
}

#menu-new {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0; /* needed to remove spaces between li tags */
	transition: all 0.25s ease-in-out;
	transition-property: max-height, margin-top;
}

#menu-new > li {
	display: inline-block;
	padding: 0 1em;
	font-size: 16px;
}

#menu-new > li > a {
	/*display: block;*/
	/*line-height: 1.75em;*/ /* 2em */
}

.nav-mobile-new {
	position: absolute;
	overflow: hidden;
	right: 18px;
	/*top: 0;*/
    top: 1rem;
	visibility: hidden;
}

@media screen and (max-width: 799px) {
	
	#main-logo-new {
		float: none;
		width: auto;
	}
	#main-menu-new {
		float: none;
		width: auto;
		text-align: center;
	}

	.nav-mobile-new {
		visibility: visible;
	}

	.no-height {
		max-height: 0;
	}

	.max-height {
		max-height: 140px;
		/*margin-top: 20px;*/
	}
	
	#menu-new > li {
		display: block;
		border-bottom: 1px solid #e0e0e0;
	}
	
	#menu-new > li:first-child {
		/*margin-top: 20px;*/
		border-top: 1px solid #e0e0e0;
	}
	
	#menu-new > li > a {
		display: block;
		line-height: 2.5em;
}
	
}

#nav-toggle-new {
  /*position: absolute;
  right: 18px;
  top: 22px;*/
  cursor: pointer;
  padding: 5px;
}

/* End new header */


/* Page Layout Styles */

.content-container {
    margin: 80px auto 0; /* apx. match height of header */
    min-height: 600px;
	background-color: #FFFFFF;
	overflow: auto;
}

/* Containers for Images */

.img-container-sm > img {
    max-width: 480px;
}

.img-container-mobile > img {
    max-width: 430px;
}


/* Styles for hero section */

/* Note: See page for all hero styles */

/* End styles for hero */


/* Typography styles */


body {
	color: #333;	
}

h1 {
	font-family: 'source_sans_prolight', Arial, sans-serif;
	text-align: center;
	/*font-weight: normal;*/
	text-transform: uppercase;
	/*letter-spacing: 0.1em;*/
	margin: 0.5em 0;
	/*text-shadow: 0 2px 1px #FFFFFF;*/
	/*border-bottom: 1px solid #D3D3D3;*/
    /*border-top: 1px solid #D3D3D3;*/
}

h2 {
	font-family: 'source_sans_proregular', Arial, sans-serif;
	/*text-transform: uppercase;*/
	text-align: center;
    font-weight: 400;
    margin: 0.5em 0;
}

h3 {
	font-family: 'source_sans_proregular', Arial, sans-serif;
	text-align: center;
    margin: 0.5em 0;
}

p {
    margin-top: .5rem;
    font-size: 1.125rem;
}

p, a {
	font-family: 'source_sans_proregular', Arial, sans-serif;
	line-height: 1.6em;
}

a {
	outline: none !important;
	color: #646464;
	text-decoration: none;
}

a:hover {
	color: #522398; /* brand purple */
}

a:active {
	color: #646464;
}


/* Footer styles */
footer {
	height: 160px;
	text-align: center;	
	background-color: #000;
	color: #ccc;
	overflow: hidden;
}

footer p {
	font-size: .85em;
}


/* Styles for project items in gallery */
/* js loaded from xml */

.project-item {
    padding: 1rem;
}

.project-item > a.project-link {
    display: inline-block;
}

.project-item > a.project-link > img {
    max-width: 480px;
    /* Responsive images next 2 lines */
    width: 100%;
    height: auto;
}

/* Styles for portfolio item images */
/* js loaded from xml */

.main img {
	/*max-width: 100%;*/
    /* Responsive images next 2 lines */
    width: 100%;
	height: auto;
}


/* Styles for fade animation used for page load */

.fadein,
#portfolio,
#projects > * {
    animation: fadein 2s;
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}


/* Styles for portfolio items */

/* Note: See page for all portfolio item styles */

/* End styles for portfolio items */


/* Containers for content */


.container-xs {
    max-width: 480px;
    margin: 0 auto;
}


.container-sm {
    max-width: 800px;
    margin: 0 auto;
}

.container-md {
    max-width: 960px;
    margin: 0 auto;
}

.container-lg {
    max-width: 1200px;
    margin: 0 auto;
}

.container-xl {
    max-width: 1600px;
    margin: 0 auto;
}

.container-full {
    max-width: 100%;
    margin: 0 auto;
}

/* Margins and Padding */

.padding {
    padding: 1rem;
}


/* Rows and columns */

.row, .gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
    margin: 0 auto;
    /*margin-bottom: 40px;*/
}

.col,
.col-3-4,
.col-1-2,
.col-1-3,
.col-2-3,
.col-1-4 {
    flex: 0 1 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
}


/* Large Screens */
@media (min-width: 800px) {
    .col {
        flex-basis: 75%;
        max-width: 75%;
    }
    .side {
        flex-basis: 25%;
        max-width: 25%;
    }
    .col-3-4 {
        flex-basis: 75%;
        max-width: 75%;
    }
    .col-1-2 {
        flex-basis: 50%;
        max-width: 50%;
    }
    .col-1-3 {
        flex-basis: calc(100% / 3);
        max-width: calc(100% / 3);            
    }
    .col-2-3 {
        flex-basis: calc((100% / 3) * 2);
        max-width: calc((100% / 3) * 2);            
    }
    .col-1-4 {
        flex-basis: 25%;
        max-width: 25%;
    }    
}

/* Small Screens */
@media (max-width: 800px) {

    .row, .gallery {
        margin-bottom: .5rem;
    }

    .padding {
        padding: 1rem;
    }

}


/* Misc. typography styles */

.center {
	text-align: center;
    margin: 0 auto;
}


/* Scrolltop link at bottom of pages */

.back-to-top, .back-to-top:focus, .back-to-top:active, .back-to-top:visited {
    display: none;
	padding: .5rem;
	/*border-radius: .25rem;*/
	background: rgba(245,99,37,.9);
	color: #fff !important;
	text-decoration: none !important;
	font-weight: bold;
    z-index: 99;
    position: fixed;
    right: 20px;
    bottom: 20px; 
    border-radius: 50%;
    height: 3rem;
    width: 3rem;
    line-height: 2rem;
    text-align: center;
}

.back-to-top:hover {
    background: rgba(245,99,37,1) !important; /* Custom color */
}


/* ==========================================================================
   Helper classes
   ========================================================================== */


.hidden {
    display: none !important;
    visibility: hidden;
}