/* Snowcastle Valley version 2.0.1 - 2020-04-23 */


/* -------- BODY -------- */

html {
	scroll-behavior: smooth;
}

body {
	margin:0;
	padding:0;
	overflow-x: hidden;
	overflow-y: auto;
	background-color:transparent;
}

body:after {
	content:"";
	position:fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:-11;
	display:block;
}

body.show-upper-image:after {
	background:url(../img/sv_trivandrum-small.jpg) no-repeat 10% 10%;
	background-size:cover;
}

body.show-lower-image:after {
	background:url(../img/sv_beading-small.jpg) no-repeat 10% 10%;
	background-size:cover;
}


/* -------- MAIN STRUCTURAL ELEMENTS -------- */

/* BODY has 1 child element: WRAPPER. This has 2 children: HEADER and MAIN */
#wrapper {
}

header {
	position: fixed;
	top: 0;
	z-index: 100;
	width: 100%;
}

main {
}


/* -------- THE LOGO ELEMENT -------- */

.logo {
	width: 100%;
	background-color: var(--color-brand-light);
}

.logo-image {
	display: block;
	margin: auto;
	padding: 0.5% 0;
}


/* -------- THE NAV ELEMENT -------- */

nav {
	text-align: center;
	width:100%;
	text-transform:uppercase;
	font-weight:400;
	font-size:2.1rem;
	padding:0;
	background-color: var(--color-brand-medium); 
	z-index:100;
}

nav ul {
	padding:0;
	margin:0;
}

nav li {
	display:inline-block;
	padding: 0.6rem 1.2rem;
}

nav a, nav a:active, nav a:visited {
	color: var(--color-general-light);
	text-decoration:none;
	font-family: var(--font-menu),sans-serif;
}

nav a:hover {
	border-bottom:0.3rem solid var(--color-general-light);
}

nav label, #hamburger {
  display: none;
}


/* -------- PARALLAX BOXES --------*/

.parallax{
	width:100%;
	height: 60vh; 
}


/* -------- SECTIONS -------- */

#intro, #problem, #solutions, #program, #team, #partners {
	min-height:40vh;
	padding-bottom:2rem;
	/* offset-x | offset-y | blur-radius | color */
	box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

#team {
	min-height:0;
	padding-bottom:0;
}

.vspacer-section-top, .vspacer-section-bottom {
	height: var(--vspacer_0pt5_of_body);
}


/* -------- HEADINGS --------*/

h1 {
	font-family: var(--font-heading), sans-serif;
	font-weight:bold;
	font-variant: small-caps;
	text-align: center;
	color: var(--color-heading);
	margin: 1.2rem;
}

h1.team-heading {
	color: var(--color-general-light);
	background-color: var(--color-brand-dark);
}

h1.team-name {
	font-family: var(--font-decoration), san-serif;
	color: var(--color-general-light);
	margin-bottom: 0;
}


/* -------- TEXT STYLES --------*/

p {
	font-family: var(--font-text), sans-serif;
	font-weight:bold;
	text-align: center;
	color: var(--font-text);
	margin-top: 0;
}

p.small {
	font-size: 1.6rem;
}

a, a:visited {
	font-weight: bold;
	text-decoration:none;
	color:var(--color-anchor);
}

.odd-number-section a, .odd-number-section a:visited {
	color:var(--color-anchor-light);
}

li {
	list-style-type: none;
}


/* -------- FACEBOOK LOGO -------- */

.fb-logo {
	font-size: 2.4rem;
	color: var(--color-anchor-light);
}

 
/* -------- IMAGES --------*/

img {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
  -ms-interpolation-mode: bicubic;
}

.imgcontainer {
	width: 24rem;
	height: 24rem;
	overflow: hidden;
	border-radius: 50%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1rem;
}

.imgcontainer img {
	display: block;
	min-width: 100%;
	min-height: 100%;
	margin:auto;
}


/* -------- MODAL POP-UPS -------- */

.modal {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1200; /* the menus have a z-index of 1000, and this has to stay in front */
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transform: scale(1.1);
	transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
	position: fixed;
	top: 20%;
	left: 50%;
	transform: translate(-50%, -20%);
	background-color: PapayaWhip;
	padding: 1rem 1.5rem;
	width: 33.33vw;
	height:90vh;
	border-radius: 0.5rem;
	overflow-y: auto;
}

.modal-text p{
	color:DimGray;
	font-size: 1.6rem;
	line-height: 2.4rem;
}

.close-button {
	float: right;
	width: 1.5rem;
	line-height: 1.5rem;
	text-align: center;
	cursor: pointer;
	border-radius: 0.25rem;
	background-color: lightgray;
}
.close-button:hover {
	background-color: darkgray;
}
.show-modal {
	opacity: 1;
	visibility: visible;
	transform: scale(1.0);
	transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}