<?xml version="1.0" encoding="utf-8"?>
body {
  margin: 0;
}

/* ---------------------- START NAV HEADER  ---------------------*/
header {
  display: flex;
  margin: 0 auto;
  background: linear-gradient(-90deg,#667588, #41536b);
}

header > * {
/*   flex-grow: 1; */
}

header h1 {
  margin: 1rem 2rem 1rem 2rem;
}

header a {
  text-decoration: none;
  font-family: 'Anek Odia', sans-serif;
	font-weight: 400;
	font-size: 1.15rem;
	letter-spacing: 0.2ch;
	text-transform: uppercase;
	color:white !important;
	white-space: nowrap;
}
header a:hover {
  text-decoration: none;
  font-family: 'Anek Odia', sans-serif;
	font-weight: 400;
	font-size: 1.15rem;
	letter-spacing: 0.2ch;
	text-transform: uppercase;
	color: #e2e2e2 !important;
	white-space: nowrap;
}

/* header img {
		width: 75%;
		height: auto;
}*/

/* "Hide" checkbox -- moves it off screen*/
#menu-btn {
  position: absolute;
  top: -100%;
  left: -100%;
}

/* Hide hamburger for bigger screens */
.menu-icon {
  visibility: hidden;
}

nav {
	margin:0;
}
.menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 2em;
  width: 100%;
}
/* ---------------------- END NAV HEADER  ---------   ------------*/

/* ---------------------- START PAGE HEADER  ---------------------*/
.header2 {
	display: flex;
	width: 100%;
	background: linear-gradient(130deg,#41536b, #41536b);
}
.header2 h1 {
	margin: 0;
  font-family: 'Anek Odia', sans-serif;
	font-weight: 300;
	font-size: 1.85em;
	text-transform: uppercase;
	letter-spacing: .2ch;
	color: #fff;
	text-align: center;
}
.header2 h2 {
  	font-family: 'Anek Odia', sans-serif;
		font-weight: 100;
		font-size: 1.15em;
		text-transform: uppercase;
		letter-spacing: .2ch;
		color:#fff;
		text-align: center;
}

	.responsive {
		width: 100%;
		height: auto;
}
	 .gallery {
		 margin: 0em;
		 float: left;
		 width: 100%;
}
	 .gallery img {
		width: 100%;
		height: auto;
}
/* ------------   ---------- END PAGE HEADER  ---------------------*/


	p.desc {
		margin: 1.5em 2em 0 1.75em;
		font-family: 'Anek Odia', sans-serif;
		font-size: 1.25em;
		font-weight: 300;
		color: #262626;
		line-height: 140%;
		text-align: left;
}
	a {
  	font-family: 'Anek Odia', sans-serif;
		font-weight: 500;
		color: #41536b;
		text-decoration: none;
}
	a:hover {
  	font-family: 'Anek Odia', sans-serif;
		font-weight: 500;
		color: #E59400;
		text-decoration: none;
}
/*	a:visited {
  	font-family: 'Anek Odia', sans-serif;
		font-weight: 500;
		color: #8c4ea3;
		text-decoration: none;
}*/
	.footer {
		font-family: 'Lato', sans-serif;
		font-size: 1em;
		font-weight: 600;
		letter-spacing: .05rem;
		color: #262626;
		line-height: 175%;
		text-align: center;
}
	 .caption {
		font-family: 'Anek Odia', sans-serif;
		 font-size: .90rem;
		 font-weight: 400;
		 font-style:italic;
		 color: #262626;
		 text-align: center;
}
/*  ----------------------------------   START FLIP-CARD STYLES   ------------------   */
	h3.flipcard {
		margin: .75em .5em 0 .5em;
		font-family: 'Anek Odia', sans-serif;
		font-weight: 700;
		font-size: 15px;
		letter-spacing: .1ch;
		text-transform: uppercase;
		text-align: center;
		line-height: 120%;
		color:#FFF;
	}
	p.flipcard {
		padding:0 1.5em;
		font-family: 'Anek Odia', sans-serif;
		font-size: 1em;
		font-weight: 300;
		letter-spacing: .1ch;
		text-align: left;
		color: #FFF;
		padding: 20px 20px;
	}
	.flip-card {
		text-align: center;
		width: 220px;
		height: 200px;
		margin: 0em auto;
		padding: 0.5em 0 0.5em 0;
	}
	.flip-card-inner {
		width: 100%;
		height: 100%;
		margin: .75em .25em;
		position: relative;
		transition: transform 1.0s;
		transform-style: preserve-3d;
		perspective: 1000px;
	}
	.flip-card-inner img {
		vertical-align: middle;
		width: 100%;
		height: 100%;
		border: 0;
	}
	.flip-card-back {
		transform: rotateY(180deg);
		z-index: 1;
	}
	.flip-card-back,
	.flip-card-front {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #667588;
		border:1px solid #262626;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		-o-backface-visibility: hidden;
		backface-visibility: hidden;
	}
	.flip-card:hover .flip-card-inner {
		transform: rotateY(180deg);
	}
	.box {
		display:flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		flex-wrap:wrap;
		margin: 0 auto;
		max-width: 775px;
	}
/*  ----------------------------------   END FLIP-CARD STYLES   ------------------   */

/*  __________________________________   START CONTACT FORM STYLES   -------------   */ 

		form {
		width: 80%;
		margin: 0 auto;
		display: inline-block;
		}

		form * {
			font-family: 'Lato', sans-serif;
			font-size: 20px;
			letter-spacing: 0.075em;
			font-weight: 300;
			cursor: pointer;
			text-decoration: none;
		}

		form .field {
			width: 80%;
			position: relative;
			margin-bottom: 15px;
		}

		form .field label {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 64px;
			text-align: center;
			padding: 18px 0;
		}

		form .field input[type="text"] {
			border: 1px solid #484848;
			width: 100%;
			height: 64px;
			margin: 0;
			padding-left: 19.5%;
			color: #262626;
		}
		form .field textarea {
			border: 1px solid #484848;
			width: 100%;
			height: 64px;
			margin: 0;
			padding-left: 19.5%;
			color: #262626;
		}
		form #message {
			height: 64px;
			resize: none;
			padding-top: 18px;
		}
		form textarea:focus#msg,
		form textarea:not(:placeholder-shown)#msg {
			height: 200px;
		}
		form input[type="text"]:focus + label,
		form input[type="text"]:not(:placeholder-shown) + label,
		form textarea:focus + label,
		form textarea:not(:placeholder-shown) + label,
		form .field:hover label {
			width: 18%;
		}
		form input[type="submit"] {
			-webkit-appearance: none;
			-moz-appearance: none;
			-ms-appearance: none;
			-o-appearance: none;
			appearance: none;
			
			border: none;
			position: relative;
			padding: 13px 50px;
		}
		form input[type="submit"]:hover,
		form input[type="submit"]:focus {
			background: #fff;  
		}

/*  __________________________________   END CONTACT FORM STYLES   -------------   */   
  
/*  ----------------------------------   END LAPTOP LAYOUT   ------------------   */


/* ----------------------   MOBILE  MOBILE  MOBILE  MOBILE  ----------------------- */

/* -----------------   Set width for mobile/smaller screen size. ----------------   */
/* I set it big here so I don't have to shrink the screen so much */
/* for testing purposes */
@media screen and (max-width: 1000px) {
  
/* ---------------------- START MOBILE NAV HEADER  ---------------------*/
  header {
    display: grid;
    grid-template-areas:
       "title   title   hamburger"
       "nav     nav     nav";
  }
  
	header h1 {
  	margin: 1rem 2rem 1rem 2rem;
}

header a {
  text-decoration: none;
  font-family: 'Anek Odia', sans-serif;
	font-weight: 400;
	font-size: 1.15rem;
	letter-spacing: 0.2ch;
	text-transform: uppercase;
	color:white !important;
	white-space: nowrap;
}
header a:hover {
  text-decoration: none;
  font-family: 'Anek Odia', sans-serif;
	font-weight: 400;
	font-size: 1.15rem;
	letter-spacing: 0.2ch;
	text-transform: uppercase;
	color: #e2e2e2 !important;
	white-space: nowrap;
}
/* header img {
		width: auto;
		height: auto;
} */
  h1 {
    grid-area: title;
    margin: 0 0 0 0.5em;
  }
  
  .menu-btn {
    display: block;
  }

  .menu-icon {
    grid-area: hamburger;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    padding: 35px 40px 30px 0;
    position: relative;
    user-select: none;
    visibility: visible;
  }

  .navicon {
    background: white;
    display: block;
    height: 2px;
    width: 22px;
    position: relative;
  }

  .navicon:before {
    top: 10px;
  }

  .navicon:after {
    top: -10px;
  }

  .navicon:before, .navicon:after {
    background: white;
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    position: absolute;
    transition: all 0.2s ease-out;
}

  .menu {
    grid-area: nav;
    max-width: unset;
    max-height: 0;
    transition: max-height 0.2s ease-out;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
  .menu a:link {
    padding: 20px;
    width: 100%;
    border-top: 1px dotted white;
    font-size: 1.1rem;
    text-align: center;
}
  .menu a:hover {
    padding: 20px;
    width: 100%;
    border-bottom: 1px dotted white;
    font-size: 1.1rem;
    text-align: center;
}
  .menu-btn:checked ~ .menu {
    max-height: 450px;
}

  .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
  }

  .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
  }

  .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
  }

  .menu-btn:checked ~ .menu-icon .navicon:before,
  .menu-btn:checked ~ .menu-icon .navicon:after {
    top: 0;
  }
/* ---------------------- END MOBILE NAV HEADER  ---------------------*/
	.header2 h1 {
		margin: 0;
		padding: 0.15em 0em;
		font-family: 'Anek Odia', sans-serif;
		font-weight: 300;
		text-transform: uppercase;
		letter-spacing: 0.1ch;
		color: #fff;
		text-align: center;
}
	.header2 h2 {
			font-family: 'Anek Odia', sans-serif;
			font-weight: 300;
			font-size: 1.15em;
			text-transform: uppercase;
			letter-spacing: .2ch;
			color:#fff;
			text-align: center;
	}
	
/*  -------------------------   START MOBILE FLIP-CARD STYLES   ------------------   */
	h3.flipcard {
		margin: .75em .5em 0 .5em;
		font-family: 'Anek Odia', sans-serif;
		font-weight: 700;
		font-size: 17px;
		letter-spacing: .1ch;
		text-transform: uppercase;
		text-align: center;
		line-height: 120%;
		color:#FFA500;
	}
	p.flipcard {
		padding:1.5em 1.5em;
		font-family: 'Lato', sans-serif;
		font-size: 14px;
		font-weight: 400;
		letter-spacing: .1ch;
		text-align: left;
		color: #fff;
		line-height: 120%;
	}
	
	.box {
	display:flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	flex-wrap:wrap;
	margin: 0 auto;
}
	
	.flip-card {
	text-align: center;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
/*  -------------------------------   END FLIP-CARD STYLES   ------------------   */

	
	p.desc {
		font-family: 'Lato', sans-serif;
		font-size: 1em;
		font-weight: 300;
		color: #262626;
		text-align: left;
		line-height: 140%;
	}
	.footer {
		font-family: 'Lato', sans-serif;
		font-size: .89em;
		font-weight: 600;
		letter-spacing: .05rem;
		color: #262626;
		line-height: 175%;
		text-align: center;
}

  
  /*  ------------------------------- GRID LAYOUT STARTS   -----------------------   */


.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(3, minmax(75px, auto));
}

.grid-container > div {
  text-align: center;
  padding: 0;
}

/* intro text  */
.item1 {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start:2;
  grid-row-end:3;
}
/* flip cards  */
.item2 {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start:6;
  grid-row-end:7;
}
/* text  */
.item3 {
	grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start:7;
  grid-row-end:8;
}
/* footer  */
.item4 {
	grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start:8;
  grid-row-end:9;
}

/*  ---------------------------------- GRID LAYOUT ENDS   -----------------------   */

}