/* General Style */ 
body {
	/* background:#DCDCDC; */
	background: #FFFFFF
	font-size:100%;
	margin:0em;
	padding:0em;
	overflow-y:scroll;
}

h1 {
	line-height:1.65em;
	font-size:1.1em;
	/* font-family:Helvetica; */
  	/* font-family: 'Roboto', sans-serif; */
  	font-family: 'Oxygen', sans-serif;
	font-weight: 750;
	color:rgb(87, 87, 87);
	margin:0em;
	padding:0.0em;
	/* text-align:justify; */
	text-align:left
}

h12 {
	font-size:2.5em;
	line-height:3.8em;
	/* font-family:Helvetica; */
  	/* font-family: 'Roboto', sans-serif; */
  	font-family: 'Oxygen', sans-serif;
	
	font-weight:100;
	color:#E2DBDB;
	margin:0em;
}

h2 {
	/* font-size:1.563em; */
	font-size:1em;
	line-height:1.8em;
	/* font-family:Helvetica; */
  	/* font-family: 'Roboto', sans-serif; */
  	font-family: 'Oxygen', sans-serif;
	font-weight:100;
	color:#2F2D2C;
	margin:0em;
	padding:1.25em;
	/* text-align:left; */
	text-align:center;
}

h3 {
	/* font-size:1.563em; */
	font-size:1em;
	line-height:1.8em;
	/* font-family:Helvetica; */
  	/* font-family: 'Roboto', sans-serif; */
  	font-family: 'Oxygen', sans-serif;
	font-weight:100;
	color:#2F2D2C;
	margin:0em;
	padding:1.25em;
	/* text-align:left; */
	text-align:center;
}


p {
	line-height:1.25em;
	font-size:1em;
	/* font-family:Helvetica; */
  	/* font-family: 'Roboto', sans-serif; */
  	font-family: 'Oxygen', sans-serif;
	font-weight:100;
	color:#2F2D2C;
	margin:0em;
	/* padding:1.25em; */
	padding:0em;
	/* text-align:justify; */
	text-align:left;
}

p2 {
	line-height:1.25em;
	font-size:1em;
	/* font-family:Helvetica; */
  	/* font-family: 'Roboto', sans-serif; */
  	font-family: 'Oxygen', sans-serif;
	/* font-weight:100; */
	font-weight:bold;
	color:#006400;
	margin:0em;
	padding:1.25em;
	/* text-align:justify; */
	text-align:center;
}

p3 {
	line-height:1.25em;
	font-size:1em;
	/* font-family:Helvetica; */
  	/* font-family: 'Roboto', sans-serif; */
  	font-family: 'Oxygen', sans-serif;
	/* font-weight:100; */
	font-weight:bold;
	color:black;
	margin:0em;
	padding:1.25em;
	/* text-align:justify; */
	text-align:center;
}

p4 {
	line-height:1.25em;
	font-size:0.85em;
	/* font-family:Helvetica; */
  	/* font-family: 'Roboto', sans-serif; */
  	font-family: 'Oxygen', sans-serif;
	/* font-weight:100; */
	font-weight:100;
	color:#A4A4A4;
	/* color:black; /*
	margin:0em;
	padding:1.25em;
	/* text-align:justify; */
	text-align:center;
}

p5 {
	line-height:1.25em;
	font-size:0.95em;
	/* font-family:Helvetica; */
  	/* font-family: 'Roboto', sans-serif; */
  	font-family: 'Oxygen', sans-serif;
	/* font-weight:100; */
	font-weight:bold;
	/* font-weight:100; */
	color:#A4A4A4;
	/* color:black; */
	margin:0em;
	padding:1.25em;
	/* text-align:justify; */
	text-align:center;
}

p6 {
	line-height:1.25em;
	font-size:0.85em;
	/* font-family:Helvetica; */
  	/* font-family: 'Roboto', sans-serif; */
  	font-family: 'Oxygen', sans-serif;
	/* font-weight:100; */
	font-weight:100;
	/* color:#A4A4A4; */
	color:black;
	margin:0em;
	padding:1.25em;
	/* text-align:justify; */
	text-align:center;
}

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

li {
	list-style:square;
	/* font-family:Helvetica; */
  	font-family: 'Oxygen', sans-serif;
	font-weight:100;
	color:#2F2D2C;
	line-height:1.25em;
	margin:0em;
	padding:0em;
	margin:0.313em 0em 0.313em 0em;
}

img {
	width:80%;
	height:auto;
	max-width:100%;
}


a {
	text-decoration: none;
	color: black;
}

a:hover {
	text-decoration: underline;
	/* color: black; */
}

hr {
	border-top: 1px solid rgb(212, 212, 212);
	}

/* On Top Bar */
#menubar {
	display:block;
	background:#FFFFFF;
} 
#menubar ul {
	display:block;
	width:2em;
	padding:0.9em;
}
#menubar ul li {
	display:inline;
}
#menubar ul li a.menubutton {
	display:none;
}
/* Header */ 
header {
	display:block;
	background:#2F2C2C;
	/* text-align:center; */
	text-align:left;
}
/* Navigation */ 
nav {
	display:block;
	height:2.5em;
	background:#FFFFFF;
	/* text-align:center; */
	text-align:center;
}

nav ul {
	display:block;
}
nav ul li {
	display:inline;
	margin:0em 0.188em 0em 0.188em;
}
nav ul li a {
	/* color:#254340; */
	color:#A4A4A4;
	font-size: 0.85em;
	line-height:2.5em;
	padding:0.563em 0.938em 0.375em 0.983em;
	/* transition:background 0.2s; 
	-webkit-transition:background 0.2s; */
}

nav ul li a:hover {
	color:black;
	text-decoration: none;
	/* background:#DBD9D8; */
	/* border-bottom: 0.188em solid #E7590B; */
	/* border-bottom: 0.188em solid #FFFFFF; */
}
nav ul li a.active {
	/* border-bottom: 0.188em solid #FFFFFF; */
	text-decoration: none;
	/* text-decoration: underline; */
	/* border-bottom: 0.188em solid #E7590B; */
}
/* Content Area */ 
#main {
	display:block;
	width:96%;
	max-width:980px;
	margin:2em auto;
	/* margin:1.25em auto; */
	padding:0em;
}

#main article {
	display:inline-block; 
	/* width:65.3%; */
	width:100%; 
	background:#FFFFFF;
	vertical-align: top;
	margin:0em;
	padding:0em;
	text-align:left;
}

#main article img {
	/* max-width:560px; */
	max-width:360px;
	/* box-shadow:0px 0px 10px -5px #4c4948; */
	/* border-radius: 5px; */
}

#main contact img {
	/* max-width:560px; */
	/* max-width:210px; */
	width:50%;
	max-width:210px;
	/* box-shadow:0px 0px 10px -5px #4c4948; */
	/* border-radius: 5px; */
}

#main aside {
	display:inline-block;
	width:30.6%;
	margin-left:3%; 
	padding:0em;
	vertical-align:top;
}

#main aside section {
	margin-bottom:1.563em;
	background:#FFFFFF;
	border-bottom: 0.188em solid #E7590B;
}

#main article h2 {
	padding:0em 0em 5em 0em;
}

#main article h3 {
	padding:0em 0em 1em 0em;
	/* padding:1em 1.8em 1em 1.8em; */
	/* padding:1em 1.8em 1em 1.8em; */
}

#main aside section ul {
	padding:0em 1.875em 1.25em 2.5em;
}
/* Footer */ 
footer {
	display:block;
	/* background:#2F2C2C; */
	text-align:center;
}

footer ul {
	display:block;
	width:100%;
	max-width:980px;
	text-align:left;
	margin:0px auto;
}

footer ul li {
	display:inline;
	font-size:0.8em;
	line-height:2.8em;
	color:#E2DBDB;
	padding:0em 0.625em 0em 0.625em;
}
footer ul li a {
	color:#E2DBDB;
}
/* Mobile Style */
@media screen and (max-width:800px) {
	body {
		font-size:90%;
		overflow-y:scroll;
	}
}
@media screen and (max-width:600px) {
	#main aside, #main article {
		width:100%;
		display:block;
		margin:0.625em 0em 0.625em 0em;
	}
}
@media screen and (min-width:550px) {
	nav.nav {
		display:block !important;
	}	
}
@media screen and (max-width:550px) {
	body {
		font-size:86%;
		overflow-y:scroll;
	}
	#menubar ul li a.menubutton {
		display:block;
	}	
	nav {
		display:none;
		height:auto;
	}
	nav ul li {
		display:block;
		margin:0.3em 0em 0.3em 0em;
	}

p2 {
	line-height:1.25em;
	font-size:1em;
	/* font-family:Helvetica; */
  	/* font-family: 'Roboto', sans-serif; */
  	font-family: 'Oxygen', sans-serif;
	/* font-weight:100; */
	font-weight:bold;
	color:#006400;
	margin:0em;
	padding:1.25em;
	/* text-align:justify; */
	text-align:center;
}

p3 {
	line-height:1.25em;
	font-size:1em;
	/* font-family:Helvetica; */
  	/* font-family: 'Roboto', sans-serif; */
  	font-family: 'Oxygen', sans-serif;
	/* font-weight:100; */
	font-weight:bold;
	color:black;
	margin:0em;
	padding:1.25em;
	/* text-align:justify; */
	text-align:center;
}

p4 {
	line-height:1.25em;
	font-size:0.85em;
	/* font-family:Helvetica; */
  	/* font-family: 'Roboto', sans-serif; */
  	font-family: 'Oxygen', sans-serif;
	/* font-weight:100; */
	font-weight:100;
	color:#A4A4A4;
	/* color:black; /*
	margin:0em;
	padding:1.25em;
	/* text-align:justify; */
	text-align:center;
}

}



@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);


* {
/*
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  */

  /*
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  */
}

	/*
body {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 100;
  font-size: 12px;
  line-height: 30px;
  color: #777;
  background: #4CAF50;
}
  */

.container {
  max-width: 400px;
  width: 80%;
  margin: 0 left;
  position: relative;
 /* added  */
  /* margin: 0; */
  padding: 0;
  box-sizing: border-box;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
  font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
 /* added  */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#contact {
  /* background: #F9F9F9; */
  /* background: #ffffff; */
  padding: 0px;
  /* margin: 150px 0; */
  /* box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); */
 
  /* added  */
  /* margin: 0; */
  /* padding: 0; */
  box-sizing: border-box;
}

#contact h3 {
  display: block;
  font-size: 30px;
  font-weight: 300;
  margin-bottom: 10px;
}

#contact h4 {
  margin: 5px 0 15px;
  display: block;
  font-size: 13px;
  font-weight: 400;
}

#contact h5 {
  margin: 5px 0 15px;
  display: center;
  font-size: 13px;
  font-weight: 400;
}

#contact h6 {
  /* margin: 5px 0 15px; */
  display: center;
  /* font-size: 13px; */
  font-size:1em;
  /* line-height:1.3em; */
  line-height:0.5em;
  font-weight: 400;
}

fieldset {
  border: medium none !important;
  margin: 0 0 10px;
  min-width: 100%;
  padding: 0;
  width: 100%;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
  width: 100%;
  border: 1px solid #ccc;
  background: #FFF;
  margin: 0 0 5px;
  padding: 10px;
}

#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
  -webkit-transition: border-color 0.3s ease-in-out;
  -moz-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
  border: 1px solid #aaa;
}

#contact textarea {
  height: 200px;
  max-width: 100%;
  resize: none;
}

#contact button[type="submit"] {
  cursor: pointer;
  width: 50%;
  /* border: none; */
  /* border: 1px solid #aaa; */
  border: 1px solid #ccc;
  /* background: #4CAF50; */
  /* background: #f4f4f4; */
  background: #ffffff;
  /* color: #FFF; */
  /* color: #4CAF50; */
  /* font-family: "Roboto", Helvetica, Arial, sans-serif; */
  color:#A4A4A4;
  /* color: #000000; */
  /* font-weight: bold; */
  margin: 0 0 5px;
  padding: 10px;
  /* font-size: 15px; */
  font-size: 12px;
}

#contact button[type="submit"]:hover {
  background: #f4f4f4;
  /* background: #43A047; */
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

/*
.copyright {
  text-align: center;
}
*/

#contact input:focus,
#contact textarea:focus {
  outline: 0;
  border: 1px solid #aaa;
}

::-webkit-input-placeholder {
  color: #888;
}

:-moz-placeholder {
  color: #888;
}

::-moz-placeholder {
  color: #888;
}

:-ms-input-placeholder {
  color: #888;
}












.wrapper{
  display:grid;
  grid-template-columns: auto;
  grid-template-rows: auto 30% 40% auto auto;
  grid-template-areas:
  "hd"
  "hero  "
  "casestudies"
  "contact"
  "ft";
}
/* case studies */
.casestudies {
  align-items: stretch;
  display:grid;
  grid-area: casestudies;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  justify-self: stretch;
  margin:0;
}
.work{
	background-color:#F4FAFF;
  grid-column: span 3;
	height: auto;
  padding: 1rem;
  margin:0;
}
.work h2{
	color: #333745;
	font-size: 3rem;
	font-weight:300;
	text-align: center;
}
.content{
  position:relative;
}
.content .content-overlay {
  background: rgba(0,0,0,0.7);
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  margin:0;
  padding:0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.content:hover .content-overlay{
  opacity: 1;
}

.content-image{
  width: 98%;
  height: 98%;
  /* margin: 5px; */
}
.content-details {
  position: absolute;
  text-align: center;
  padding: 0 1rem;
  width: 100%;
  top: 40%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details{
  top: 50%;
  left: 50%;
  opacity: 1;
}

.content-details h2{
  color: #F4FAFF;
  font-weight: 100;
  font-size: 0.8rem;
  text-align: left;
  /* margin: 10%; */
}

.content-details p{
  color: #F4FAFF;
  font-size: 0.8rem;
  /*margin-bottom: 1rem; */
  /* margin-left: 10%; */
  /*text-align: left; */
}

.fadeIn-bottom{
  top: 80%;
}











.imgbutton {
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 1;
  width: 100%;
  height: 100%;
  border: 1px solid white;
  color: white;
  padding: 15px 15px 15px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.0rem;
  /* margin: 78px 8px; */
  cursor: pointer;
}


.loginBtn {
    background-color: rgba(0, 0, 0, 0.5);
    width:100%;
    height:100%;
    color: white;
    margin:20px auto;
    border-radius:0px;
    -webkit-border-radius:0px;
    /* box-shadow:0 1px 2px #5e5d5b; */
}

.loginBtn span {
    display: block;
    padding-top: 22px;
    text-align: center;
    /* line-height: 1.25em; */
	font-size:0.8em;
	/* font-family:Helvetica; */
  	/* font-family: 'Roboto', sans-serif; */
  	font-family: 'Oxygen', sans-serif;
	font-weight:100;
    
}


.myvid {
	width: 90%;
	max-width: 40em;
	height: auto;
}
@media screen and (max-width: 601px) {
	.myvid {
		width: 90%;
	height: auto;
	}
}