/*
Theme Name: Joyce Hwang
Author: Hannah Small
Author URI: http://hannahsmall.com/
Description: Starter child theme for the required+ Foundation parent theme.
Template: required-foundation
Text Domain: requiredstarter
*/

/*
	Make the template work
*/
@import url(../required-foundation/style.css);
@import url(https://fonts.googleapis.com/css?family=Lato);

body {
position: relative;
overflow-x: hidden;
width: 100%;
}

#content {
	margin-top: 25px;
}

#logo {
margin-left: 70px;
margin-top: 10px;
}
form {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
form p {
text-align: left;
}

h1, h2, h3, h4, h5, h6 { font-family:  'Lato', san-serif;}

p {font-family: 'Lato', san-serif;}

#site-title { font-weight: 600; }

.required-header .inline-list {
	margin-top: 14px;
}
.title {
	font-size: 25px;
	text-transform: uppercase;
	font-family: 'Lato';
	font-weight: 700;
	letter-spacing: 3px;
	line-height: 1.2;
	margin-top: 0px;
	}

ul.prj_thumb {
	list-style-type: none;
 	margin: 0;
  	padding: 0;
	text-align: center;
}

ul.prj_thumb li {
	display: inline-block;
	width: 250px;
	margin: 1em;
    position: relative;
	height: 250px;
}

.bio {
	padding-right: 20px;
	}
	
.desc {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	margin-bottom: 20px;
}

span.prj_title {
  background: rgba(255,255,255,0.8);
  color: white;
  cursor: pointer;
  display: table;
  height: 250px;
  left: 0;
  position: absolute;
  top: 0;
  width: 250px;
  padding: 85px 25px;
  opacity: 0;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}

ul.prj_thumb li:hover span.prj_title {
  opacity: 1;
}
span.prj_title h3{
	font-size: 26px;
    	color: #444444;
   	margin: 0;
    	font-family: 'Lato';
    	font-weight: 400;
    	text-transform: uppercase;
	letter-spacing: 2.5px;
}

span.prj_title p{
	margin-top: -10px;
	font-family: 'Lato';
	font-weight: 400;
	font-style: italic; 
	color: #444444;
}


span.prj_title span{
  line-height: 1;
}

.prj_img_lrg {
	list-style: none;
	}

.prj_img_lrg li{
	margin-bottom: .79em;
	text-align: center;
	}

.prj_img_lrg img {
	border: 1px solid #f5f5f5;
	}

.prj_img_small {
	list-style: none;
	margin-left: auto;
	margin-right: auto;
	}
.prj_img_small li{
	float: left;
	display: inline-block;
    margin: 0px 1em;
	}

.prj_img_lead {
	margin-bottom: 20px;
	padding-left: 40px;
	}	
hr {
	width: 820px;
	margin-left: auto;
	margin-right: auto;
	}
.row { width: 1040px; max-width: 100%; min-width: 768px; margin: 0 auto; }

.social_media {
	list-style: none;
	width: 220px;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.social_media li {
	float: left;
	margin-right: 15px;
}
.wpcf7 p {
	font-size: 11px;
	font-family: 'Lato';
	text-transform: uppercase;
	}
.wpcf7-submit {
	text-align: center;
    cursor: default;
    color: white;
    background-color: #70748b;
    box-sizing: border-box;
    padding: 8px 15px;
    border: none;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
	}
.wpcf7-submit:hover {
    background-color: #444444;
	}

/*nav*/
.nav-bar {
  margin-left: auto;
  margin-right: 70px;
  margin-top: 75px;
  padding: 0;
  display: block;
  text-transform: uppercase;
  float: right;
}
.nav-bar > li { float: left; display: block; position: relative; padding: 0; margin: 0px; line-height: 38px; -webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset; -moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset; box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset; text-align: center; font-family: 'Lato'; font-weight: 400; letter-spacing: 1px;}
.nav-bar > li:first-child { -webkit-box-shadow: 0 0 0; -moz-box-shadow: 0 0 0; box-shadow: 0 0 0; }
.nav-bar > li:last-child { -webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset, 1px 0 0 rgba(255, 255, 255, 0.2); -moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset, 1px 0 0 rgba(255, 255, 255, 0.2); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset, 1px 0 0 rgba(255, 255, 255, 0.2); }
.nav-bar > li.active {
	color: #70748b;
}
.nav-bar > li.active > a {
	color: #70748b;
	cursor: default;
}
.nav-bar > li.active:hover {
	cursor: default;
	color: #70748b;
}
.nav-bar > li:hover {
	color: #70748b;
}
.nav-bar > li > a {
	color: #444444;
}
.nav-bar > li ul { margin-bottom: 0; }
.nav-bar > li .flyout { display: none; }
.nav-bar > li.has-flyout > a:first-child { padding-right: 40px; position: relative; }
.nav-bar > li.has-flyout > a:first-child:after { content: ""; display: block; width: 0; height: 0; border: solid 4px; border-color: #ffffff transparent transparent transparent; position: absolute; right: 20px; top: 17px; }
.nav-bar > li.has-flyout > a.flyout-toggle { border-left: 0 !important; position: absolute; right: 0; top: 0; padding: 20px; z-index: 2; display: block; }
.nav-bar > li.has-flyout.is-touch > a:first-child { padding-right: 55px; }
.nav-bar > li.has-flyout.is-touch > a.flyout-toggle { border-left: 1px dashed #ffffff; }
.nav-bar > li > a:first-child { position: relative; padding: 0 20px; display: block; text-decoration: none; font-size: 13px; }
.nav-bar > li > input { margin: 0 10px; }
.nav-bar.vertical { height: auto; margin-top: 0; }
.nav-bar.vertical > li { float: none; border-bottom: none; border-right: solid 1px #ffffff; }
.nav-bar.vertical > li.has-flyout > a:first-child:after { content: ""; display: block; width: 0; height: 0; border: solid 4px; border-color: transparent transparent transparent #ffffff; }
.nav-bar.vertical > li .flyout { left: 100%; top: -1px; }
.nav-bar.vertical > li .flyout.right { left: auto; right: 100%; }
.nav-bar.vertical > li.active { border-right: solid 1px #ffffff; }
.nav-bar.vertical > li:last-child { border-bottom: solid 1px #ffffff; }

.flyout { background: none; padding: 20px; margin: 0; border: 1px solid #ffffff; position: absolute; top: 39px; left: -1px; width: 250px; z-index: 40; /* remove margin on any first-child element */ /* remove margin on last element */ }
.flyout p { line-height: 1.2; font-size: 13px; }
.flyout *:first-child { margin-top: 0; }
.flyout *:last-child { margin-bottom: 0; }
.flyout.small { width: 166.66667px; }
.flyout.large { width: 437.5px; }
.flyout.right { left: auto; right: -2px; }
.flyout.left { right: auto; left: -2px; }
.flyout.up { top: auto; bottom: 39px; }

ul.flyout, .nav-bar li ul { padding: 0; list-style: none; }
ul.flyout li, .nav-bar li ul li { border-left: solid 3px #ffffff; }
ul.flyout li a, .nav-bar li ul li a { text-align: left; background: #ffffff; border: 1px solid #ffffff; border-width: 1px 1px 0 0; color: #444444; display: block; font-size: 14px; height: auto; line-height: 1; padding: 15px 20px; }
ul.flyout li a:hover, ul.flyout li a:focus, .nav-bar li ul li a:hover, .nav-bar li ul li a:focus { background: #ffffff; color: #0080db; }
ul.flyout li.active, .nav-bar li ul li.active { margin-top: 0; border-top: 1px solid #ffffff; border-left: 4px solid #ffffff; }
ul.flyout li.active a, .nav-bar li ul li.active a { background: #ffffff; border: none; color: #0080db; height: auto; margin: 0; position: static; top: 0; }

/*Mobile Styling*/
 
@media only screen and (max-device-width: 1280px) { /* NavBar --- */
  /*            */
  .touch .nav-bar li.has-flyout > a { padding-right: 36px !important; } }
/* Covering almost all ----- */
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) { .flex-video { padding-top: 0; } }
/* Between Medium and Small */
@media only screen and (max-width: 1279px) and (min-width: 768px) { /* NavBar --- */
  /*            */
  .touch .nav-bar li a { font-size: 13px; }
  .touch .nav-bar li.has-flyout > a.flyout-toggle { padding: 20px !important; }
  .touch .nav-bar li.has-flyout > a { padding-right: 36px !important; }
 }
  
 @media only screen and (max-width: 1200px) {
    .row {
width: 400px;
max-width: 100%;
min-width: 768px;
margin: 0 auto;
}
#logo {
margin-left: 50px;
margin-top: 10px;
}
    }

@media only screen and (max-width: 840px) {
    .desc {
max-width: 400px;
}
    .portrait { text-align: center;}
.logo {
    padding: 15px;
    margin-left: 70px;
    margin-top: 20px;
}
  hr {
	width: 600px;
	margin-left: auto;
	margin-right: auto;	
}
form {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
    }
     
@media only screen and (max-width: 768px) {
    .row {
width: 535px;
max-width: 100%;
min-width: 500px;
margin: 0 auto;
}
#logo {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 10px;
}
form {
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
  hr {
	width: 500px;
	margin-left: auto;
	margin-right: auto;	
}
    }
 
/* Small Devices ------------ */
@media only screen and (max-width: 768px) { 

/* Global Misc --- */
  /*                 */
  .left, .right { float: none; }
  body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  /* The Grid --- */
  /*              */
    .row {
width: 535px;
max-width: 100%;
min-width: 280px;
margin: 0 auto;
}
  .column, .columns { width: auto !important; float: none; }
  .column:last-child, .columns:last-child { float: none; }
  [class*="column"] + [class*="column"]:last-child { float: none; }
  .column:before, .columns:before, .column:after, .columns:after { content: ""; display: table; }
  .column:after, .columns:after { clear: both; }
  .offset-by-one, .offset-by-two, .offset-by-three, .offset-by-four, .offset-by-five, .offset-by-six, .offset-by-seven, .offset-by-eight, .offset-by-nine, .offset-by-ten { margin-left: 0 !important; }
  .push-two, .push-three, .push-four, .push-five, .push-six, .push-seven, .push-eight, .push-nine, .push-ten { left: auto; }
  .pull-two, .pull-three, .pull-four, .pull-five, .pull-six, .pull-seven, .pull-eight, .pull-nine, .pull-ten { right: auto; }
  /* Mobile 4-column Grid */
  .row .mobile-one { width: 25% !important; float: left; padding: 0 15px; }
  .row .mobile-one:last-child { float: right; }
  .row .mobile-one.end { float: left; }
  .row.collapse .mobile-one { padding: 0; }
  .row .mobile-two { width: 50% !important; float: left; padding: 0 15px; }
  .row .mobile-two:last-child { float: right; }
  .row .mobile-two.end { float: left; }
  .row.collapse .mobile-two { padding: 0; }
  .row .mobile-three { width: 75% !important; float: left; padding: 0 15px; }
  .row .mobile-three:last-child { float: right; }
  .row .mobile-three.end { float: left; }
  .row.collapse .mobile-three { padding: 0; }
  .row .mobile-four { width: 100% !important; float: left; padding: 0 15px; }
  .row .mobile-four:last-child { float: right; }
  .row .mobile-four.end { float: left; }
  .row.collapse .mobile-four { padding: 0; }
  .push-one-mobile { left: 25%; }
  .pull-one-mobile { right: 25%; }
  .push-two-mobile { left: 50%; }
  .pull-two-mobile { right: 50%; }
  .push-three-mobile { left: 75%; }
  .pull-three-mobile { right: 75%; }
 
  /* Navbar --- */
  /*            */
  .nav-bar {     height: auto;
    margin: 20px;
    padding: 0px;
   float: none;
}
  .nav-bar > li { float: none; display: block; border-right: none; }
  .nav-bar > li > a.main { text-align: left; border-top: 1px solid #ffffff; border-right: none; }
  .nav-bar > li:first-child > a.main { border-top: none; }
  .nav-bar > li.has-flyout > a.flyout-toggle { position: absolute; right: 0; top: 0; padding: 22px; z-index: 2; display: block; }
  .nav-bar > li.has-flyout.is-touch > a.flyout-toggle span { content: ""; width: 0; height: 0; display: block; }
  .nav-bar > li.has-flyout > a.flyout-toggle:hover span { border-top-color: #ffffff; }
  .nav-bar.vertical > li.has-flyout > .flyout { left: 0; }
  .flyout { position: relative; width: 100% !important; top: auto; margin-right: -2px; border-width: 1px 1px 0 1px; }
  .flyout.right { float: none; right: auto; left: -1px; }
  .flyout.small, .flyout.large { width: 100% !important; }
  .flyout p:last-child { margin-bottom: 18px; }
  }
   
  @media only screen and (max-width: 590px) {
        .row {
max-width: 100%;
min-width: 280px;
margin: 0 auto;
}
hr {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}
.social_media {
    list-style: none;
    width: 180px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
.prj_img_lead {
    margin-bottom: 20px;
    padding: 0px 40px;
}
#logo {
margin: 10px 0px;
}
.title {
    font-size: 25px;
    text-transform: uppercase;
    font-family: 'Lato';
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1.2;
    margin-top: 0px;
text-align: center;
}
p {
text-align: center;
}
form {
width: 320px;
margin-left: auto;
margin-right: auto;
}
}