/* ==========================================================================
   FONT
   ========================================================================== */
@font-face {
    font-family: 'Rubik', sans-serif;
    font-weight: normal;
    font-style: normal; }

/* ==========================================================================
   BASE STYLES
   ========================================================================== */
html, button, input, select, textarea { color: #333; }
html { font-size: 1em; line-height: 1.4; }
::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }
body { opacity: 0; visibility: hidden; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
audio,canvas,img,video { vertical-align: middle;}
textarea { resize: vertical; }
html, body { height: 100%; }
body { background: #f2f2f2; font-family: 'Rubik', sans-serif; }
li { list-style-type: none; }
a { text-decoration: none; }
.wrapper { width: 1080px; margin: 0 auto; }
.container { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -100px; }
footer, .push { height: 100px; clear: both; }
* { margin: 0;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box; }
h2 { color: #009999; text-align: center; font-weight: normal; margin-top: 0; font-size: 1.85em; }

iframe{
	width:640px;
	height:360px;
	}

/* ==========================================================================
   GRIDS
   ========================================================================== */
.row > .col-1-1 { width: 100%; }
.row > .col-1-2 { width: 50%; }
.row > .col-1-3 { width: 33.33%; }
.row > .col-2-3 { width: 66.66%; }
.row > .col-1-4 { width: 25%; }
.row > .col-3-4 { width: 75%; }
.row > .col-1-5 { width: 20%; }
.row > .col-2-5 { width: 40%; }
.row > .col-3-5 { width: 60%; }
.row > .col-4-5 { width: 80%; }
.row > .col-1-6 { width: 16.66%; }
.row > .col-5-6 { width: 83.33%; }
.row > .pull-1-2 { left: -50%; }
.row > .pull-1-3 { left: -33.33%; }
.row > .pull-2-3 { left: -66.66%; }
.row > .pull-1-4 { left: -25%; }
.row > .pull-3-4 { left: -75%; }
.row > .pull-1-5 { left: -20%; }
.row > .pull-2-5 { left: -40%; }
.row > .pull-3-5 { left: -60%; }
.row > .pull-4-5 { left: -80%; }
.row > .pull-1-6 { left: -16.66%; }
.row > .pull-5-6 { left: -83.33%; }
.row > .push-1-2 { left: 50%; }
.row > .push-1-3 { left: 33.33%; }
.row > .push-2-3 { left: 66.66%; }
.row > .push-1-4 { left: 25%; }
.row > .push-3-4 { left: 75%; }
.row > .push-1-5 { left: 20%; }
.row > .push-2-5 { left: 40%; }
.row > .push-3-5 { left: 60%; }
.row > .push-4-5 { left: 80%; }
.row > .push-1-6 { left: 16.66%; }
.row > .push-5-6 { left: 83.33%; }
.row > *[class *= "col-"] { position:relative; float:left; padding: 0 15px; }
.row > *[class *= "col-"].centered{ float:none; margin-right: auto; margin-left: auto; }
.row > *[class *= "col-"].last{ float:right; }
.row { display: block; clear:both; width: auto; margin: 0px -15px; }
.row:first-child { margin-top: 0; }
.row:last-child { margin-bottom: 0; }
.row:before, .row:after { content: ""; display: table; clear: both; }

/* ==========================================================================
   HEADER
   ========================================================================== */
header { padding: 1.5em 0; }
header figure { text-align: center;}
header .social { position: absolute; }
header .hello { text-align: right; }
header .hello a { color:#FFF; }
header .mainnav { text-align: center; margin-top: 1em; }
header .mainnav ul { border: 4px solid #dfdfdf; display: inline-block; padding: 1em; margin-bottom: 0; }
header .mainnav li { display: inline-block; }
header .mainnav li a { color: #666; border-left: 1px solid #dfdfdf; padding: 0 1.9em; }
header .mainnav li a.active { color: #88d6dd; }
header .mainnav li:first-child a { border-left: none; }
.social li { float: left; width: 25px; height: 24px; margin: 0 2px; text-align:center; }
.social .facebook a { background:  no-repeat center;}
.social .twitter a { background:  no-repeat center;}
.social .vimeo a { background:  no-repeat center;}
.social .youtube a { background:  no-repeat center;}
.social a { display: block; color:#FFF; overflow: hidden; height: 100%; width: 100%; border: 2px solid #dfdfdf; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;
 -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
      -o-transition: all .3s ease-out;
         transition: all .3s ease-out; }
.social a:hover { border: 2px solid #FC3; }

/* ==========================================================================
   WORK LIST
   ========================================================================== */
#mainPageWorks { padding-top: 2em; }
#workSec { background: #fff; border-top: 10px solid #009999; }
#workSec .work-heading { padding: 2em 0; text-align: center; }
#workSec .work-heading hr { height: 5px; background: #8ad5dd; width: 5%; margin: 1em auto 0; border: none; }
#workSec .work-heading span { font-size: 1.4em; line-height: 1.2em; }
#workSec .work-heading span:first-child { font-size: 1.8em; display: block; }
.work-list .row { padding-bottom: 2em; }
.work-list .col-1-3 { opacity: 0; }
.work-list .work-item { background: #fff; display: block;
-webkit-box-shadow: 0px 1px 3px 0px #ccc;
   -moz-box-shadow: 0px 1px 3px 0px #ccc;
        box-shadow: 0px 1px 3px 0px #ccc; }
.work-list .work-item figure { position: relative; overflow: hidden; }
.work-list .work-item .pattern { background: #d2d2d2;  top: 0; left: 0; width: 100%; display: block; height: 100%; opacity: 0.4;
 -webkit-transition: opacity .2s ease-out;
    -moz-transition: opacity .2s ease-out;
      -o-transition: opacity .2s ease-out;
         transition: opacity .2s ease-out; }
.work-list figure img { max-width: 100%; }
.work-list .work-info { padding: 0em; text-align: center; font-size: 1.1em; color: #333; border-bottom: 5px solid #dfdfdf; position: relative; margin-top: 0px;
-webkit-transition: border .2s ease-out;
   -moz-transition: border .2s ease-out;
     -o-transition: border .2s ease-out;
        transition: border .2s ease-out; }
.work-list .work-title { color: #88d6dd; }
.work-list .work-item:hover .pattern { opacity: 0; }
.work-list .work-item:hover .work-info { border-bottom: 5px solid #FC3; }

/* ==========================================================================
   DIRECTORS
   ========================================================================== */
.directors { margin-bottom: 5em; }
.mainTeam .directors { margin-bottom: 0em; }
#directorWorkSec { background: #fff; padding-top: 4em; }
#directorWorkSec h2 a { color: #333; text-transform: uppercase; padding: 0 0.8em;
-webkit-transition: color .2s ease-out;
   -moz-transition: color .2s ease-out;
     -o-transition: color .2s ease-out;
        transition: color .2s ease-out;}
#directorWorkSec h2 a.active { color: #8ad5dd; text-decoration: underline; }
#directorWorkSec h2 a:hover { color: #8ad5dd; }
#directorWorkSec h2 .filter-v2 { border-left: 1px solid #dfdfdf; }
.director-detail { background: #e9e9e9; }
.director-detail figure img { max-width: 100%; }
.director-detail .wrapper { position: relative; }
.director-detail .director-name { text-align: center; position: absolute; background: #009999; color: #fff; top: 0; right: 6%; width: 30%; height: 110%; padding-top: 10%; }
.director-detail .director-name span { display: block; font-size: 2.7em; }
.director-detail .director-name span:first-child { font-size: 2.2em; text-transform: uppercase;}

/* ==========================================================================
   WORK DETAIL
   ========================================================================== */
.project-detail { margin-bottom: 5em; margin-top: -15px; }
.project-detail > .wrapper { margin-bottom: 10px; }
.project-detail .back-button { color: #666; background: url(../img/back.png) no-repeat left center; padding-left: 15px; margin-bottom: 10px;
-webkit-transition: all .2s ease-out;
   -moz-transition: all .2s ease-out;
     -o-transition: all .2s ease-out;
        transition: all .2s ease-out;}
.project-detail .back-button:hover { color: #009999; padding-left: 20px; }
.project-detail .project-img { position: relative; width: 100%; }
.project-detail .project-img img { width: 100%; }
.project-detail .project-img .img-title { position: absolute; width: 100%; top: 5%; left: 0; }
.project-detail .project-img .w-heading{ background: #009999; color: #fff; display: inline-block; font-size: 1.5em; padding: 0.6em 4.5em 0.45em 0.8em; line-height: 1.2em; }
.project-detail .project-info { background: #fff; padding: 2em 0; font-size: 1.1em; }
.project-detail .project-info .row { margin: 0 -25px; }
.project-detail .project-info .row > *[class *= "col-"] { padding: 0 25px; }
.project-detail .project-info li { margin-bottom: 0.7em; }
.project-detail .project-info li:last-child { margin-bottom: 0; }
.project-detail .project-info li p:first-child { color: #009999; font-size: 1.1em; text-transform: uppercase; }
.project-detail .project-info .links a { display: block; color: #111; padding: 1em 1.5em; font-size: 1em; line-height: 1em;
-webkit-transition: all .2s ease-out;
   -moz-transition: all .2s ease-out;
     -o-transition: all .2s ease-out;
        transition: all .2s ease-out;}
.project-detail .project-info .links p:nth-child(2) { color: #009999; font-size: 1.5em; line-height: 1.1em; }
.project-detail .project-info .links i { color: #999; }
.project-detail .project-info .p-video { background: url(../img/icon-v1.png) no-repeat 90% center #009999; }
.project-detail .project-info .b-video { background: url(../img/icon-v2.png) no-repeat 90% center #009999;}
.project-detail .project-info .p-photos { background: url(../img/icon-v3.png) no-repeat 90% center #009999; }
.project-detail .project-info .links a:hover { background-color: #028989; }
.photoNav { background: #009999; color: #fff; text-align: center; height:84px; }
.photoLightbox .mfp-counter { background: #009999; color: #fff; width: 100%; top: -2em; padding: 1em; }
.photoLightbox .mfp-title { padding-right: 0; line-height: 2.2em; }
.photoLightbox img.mfp-img { padding: 20px 0 40px; }
.photoLightbox .mfp-image-holder .mfp-close,
.photoLightbox .mfp-iframe-holder .mfp-close { cursor:pointer; background: #fff; text-align: center; padding-right: 0; width: 40px; line-height: 40px; height: 40px; opacity: 1; color: #666; top:20px; right: -40px; font-size:30px; font-family: 'Rubik', sans-serif; }

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ==========================================================================
   TEAM
   ========================================================================== */
.team-list a { background: #fff; display: block; text-align: center; border-bottom: 5px solid #dfdfdf;
-webkit-box-shadow: 0px 1px 3px 0px #ccc;
   -moz-box-shadow: 0px 1px 3px 0px #ccc;
        box-shadow: 0px 1px 3px 0px #ccc;
-webkit-transition: border .2s ease-out;
   -moz-transition: border .2s ease-out;
     -o-transition: border .2s ease-out;
        transition: border .2s ease-out; }
.team-list a:hover { border-bottom: 5px solid #8ad5dd; }
.team-list .row:first-child { margin-top: 0; }
.team-list .team-top { background: #fff; padding: 1.5em 0 3em; }
.team-list .team-top .col-1-4:first-child { /*margin-left: 12.5%;*/ }
.team-list .team-bottom { padding: 1.5em 0 3em; }
.team-list .team-bottom .row { margin-bottom: 2em; }
.team-list .team-top .row { margin-bottom: 2em; }
.team-list .team-bottom .row:last-child { margin-bottom: 0; }
.team-list h2 { color: #333; }
.team-list img { width: 100%; }
.team-info { padding: 1em; font-size: 1.1em; color: #333; height: 100px; line-height: 1.3em; text-align: center;}
.member-title { color: #88d6dd; text-transform: uppercase;}
.teamLbTitle { background: #009999; color: #fff; text-align: center; padding: 0.5em; font-size: 2em }
.teamLbTitle .title { font-size: 0.8em; }
.teamLightbox .mfp-bottom-bar { margin-top: -122px; }
.teamLightbox .mfp-title { padding-right: 0; line-height: 2.2em; }
.teamLightbox img.mfp-img { padding: 20px 0 120px; }
.teamLightbox .mfp-image-holder .mfp-close,
.teamLightbox .mfp-iframe-holder .mfp-close { cursor:pointer; background: #fff; text-align: center; padding-right: 0; width: 40px; line-height: 40px; height: 40px; opacity: 1; color: #666; top:20px; right: -40px; font-size:30px; font-family: 'Rubik', sans-serif; }
.teamLightbox .mfp-counter { display: none; }
.teamMember a{border-bottom: 0; background: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; color:#666;}
.teamMember a:hover{border-bottom: 0; color:#8ad5dd;}
.teamMember figure{border-bottom: 5px solid #dfdfdf ;}
.teamMember {text-align: center;}



/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact { padding-bottom: 5em; }
.contact .contactbg { min-height: 300px; position: relative; }
.contact .contactbg .pattern { background: url(../img/pattern.png); width: 100%; height: 100%; position: absolute; }
.contact .map { position: relative; }
.contact .contact-info { color: #222; background: #009999; position: absolute; left: 55%; top: 50%; width: 320px; margin-top: -65px; padding: 2em; font-size: 1.1em; }
.contact .contact-info h2 { margin-top: 0; color: #222; text-align: left; font-weight: normal; }
.contact .contact-info ul { margin-top: 1em; }
.contact .contact-info li { color: #fff; margin: 0.7em 0; }
.contact .contact-info li a { color: #fff;
-webkit-transition: all .2s ease-out;
   -moz-transition: all .2s ease-out;
     -o-transition: all .2s ease-out;
        transition: all .2s ease-out;}
.contact .contact-info li a:hover { color: #222; }
.contact #map-canvas { width: 100%; min-height: 400px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer { background: #fff; }
footer .wrapper { position: relative; }
footer .apollo { position: absolute; top: 2.4em; right: 0; width: 26px; height: 31px; padding: 0; }
footer img { padding : 0 1.5em 0 0 }
footer ol { text-align: center; padding: 2em; }
footer ol > li { display: inline-block; color: #b3b3b3; font-size: 14px; }
footer .social { padding: 0 2.5em; }
footer .social a { margin-top: 7px;  color:#000; }

/* ==========================================================================
   404
   ========================================================================== */
.errorPage { background: #fff; }
.e-in { margin-bottom: 5em; height: 400px; }
.e-in h1 { padding-top: 150px; line-height: 1.1em }
.e-in:after { display: block; content: ""; clear: both; }
.e-left { width: 65%; float: left; text-align: right; padding: 0 4em 0 2em; }
.e-left h1 { text-align: right; margin: 0; font-weight: normal; color: #333; font-size: 3em; }
.e-left h2 { text-align: right; color: #333; text-transform: uppercase; font-size: 1.5em; margin-bottom: 0; line-height: 1.2em  }
.e-right { width: 35%; float: left; background: url(../img/error.jpg) no-repeat left 158px #009999; height: 100%; padding: 0 2em 0 4em; }
.e-right a { color: #fff; font-size: 1.5em; line-height: 1.2em;
-webkit-transition: all .2s ease-out;
   -moz-transition: all .2s ease-out;
     -o-transition: all .2s ease-out;
        transition: all .2s ease-out;}
.e-right a:hover { color: #333; }
.e-right h1 { color: #fff; font-size: 3em; margin: 0; font-weight: normal; }


/* ==========================================================================
   FLEXSLIDER
   ========================================================================== */
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}
.slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}
/* No JavaScript Fallback */
.no-js .slides > li:first-child { display: block; }
.flexslider { position: relative; zoom: 1; overflow: hidden; }
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
.flex-caption { background: #009999; color: #fff; width: 40%; height: 100%; position: absolute; top: 0; right: 0; overflow: hidden; }
.flex-caption .table { display: table; opacity: 0; margin-left: 30px; width: 100%; height: 100%; }
.flex-caption .table > div { display: table-cell; vertical-align: middle; }
.flex-caption h1 { text-transform: uppercase; font-weight: normal; font-size: 3em; margin: 0; line-height: 0.8em; opacity: 0; position: relative; margin-bottom: 10px; margin-left: 25px; opacity: 0; }
.flex-caption h2 { text-transform: uppercase; font-weight: normal; font-size: 1.5em; color: #fff; text-align: left; margin: 0; opacity: 0; position: relative; line-height: 0.7em; margin-left: 25px; opacity: 0; }
.flex-caption .table > div:first-child { width: 72px; }
.flex-caption .table > div:first-child span { background: #fff; color: #009999; width: 72px; text-align: center; font-size: 1.5em; height: 66px; display: block; line-height: 66px; }
.flex-active-slide h1,
.flex-active-slide h2 { opacity: 1; }
.flex-caption a { color: #fff; }
.flex-container { min-height: 5px; position: relative; }
.flex-container > a { position: absolute; top: 0; left: 0; width: 70%; height: 100%; }

/* ==========================================================================
   PAGINATION
   ========================================================================== */
ul.simple-pagination { list-style: none; }
.simple-pagination { display: block; overflow: hidden; padding: 1.8em 0 1.2em 0; margin: 0;text-align: center; }
.simple-pagination ul { list-style: none; padding: 0; margin: 0; display: inline-block; }
.simple-pagination li { list-style: none; padding: 0; margin: 0; float: left; }
.light-theme a, .light-theme span { cursor: pointer; float: left; color: #333; line-height:24px; font-weight: normal; text-align: center; min-width: 14px; padding: 0 7px; margin: 0 5px 0 0; }
.light-theme a:hover { text-decoration: none; color: #009999; }
.light-theme .current { color: #89d4dc; cursor: default; font-size: 1.3em; }
.light-theme .ellipse { background: none; border: none; border-radius: 0; box-shadow: none; font-weight: bold; cursor: default; }
.light-theme .prev { overflow: hidden; text-indent: -99px; background: url(../img/prev.png) no-repeat center; }
.light-theme .next { overflow: hidden; text-indent: -99px; background: url(../img/next.png) no-repeat center; }
.light-theme .current.prev { display: none; }
.light-theme .current.next { display: none; }

/* ==========================================================================
   Helper classes
   ========================================================================== */
.ir { background-color: transparent; border: 0; overflow: hidden; /* IE 6/7 fallback */ *text-indent: -9999px; }
.ir:before { content: ""; display: block; width: 0; height: 150%; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before,
.clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
.push-up{margin-top:15px;}

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */
@media only screen and (max-width: 1125px) {
    .wrapper { width: 93%; }
    header .mainnav li a { padding: 0 1em; }
    .director-detail .director-name { font-size: 0.7em; }
    .team-info { padding: 1em 0.2em; font-size: 1em; height: 90px; }
    .flex-caption h1 { font-size: 2em; }
    .flex-caption h2 { font-size: 1.2em; }
    .flex-caption .table > div:first-child { width: 60px; }
    .flex-caption .table > div:first-child span { width: 60px; height: 60px; }
    .project-detail .project-info .links a { padding: 1em 2.5em 1em 1em; font-size: 0.9em; }
    .e-in { font-size: 0.8em; }
    .e-right { padding-left: 5em; }
    .e-left { padding-right: 5em; }

}

@media only screen and (min-width: 996px) {
    .rowfix{display: flex; justify-content: center;}
    .colfix{float:none; display:inline-block;}

}

@media only screen and (max-width: 740px) {
    header { padding: 1em 0; }
    header .wrapper > figure img { max-width: 100%; }
    header .social { position: relative; margin-bottom: 1em; }
    header .social:after { clear: both; content: ""; display: block; }
    .flex-caption { width: 100%; bottom: 0; height: inherit; top: inherit; right: inherit; left: 0; }
    .flex-container > a { width: 100%; }
    .project-detail > .wrapper { margin: 10px auto; }
    .row > *[class *= "col-"] { position:relative; float:left; padding: 0 7px; }
    .row { display: block; clear:both; width: auto; margin: 0px -7px; }
    .work-list .work-info { padding: 0.5em; font-size: 1em; margin-top: 0; }
    .team-top .col-1-4 { width: 33.3%; }
    .team-list .team-top .col-1-4:first-child { margin-left: 0; }
    .team-bottom { padding-bottom: 1em !important;}
    .team-bottom .row { margin-bottom: 0; }
    .team-bottom .row:last-child { margin-top: 0 !important; }
    .team-bottom .col-1-4 { width: 33.3%; margin-bottom: 2em; }
    .team-bottom .col-1-4:first-child,
    .team-bottom .col-1-4:nth-child(3) { margin-left: 15%; }
    .team-info { font-size: 1.05em; }
    .contact .map { width: 100%; }
    .contact .contact-info { right: 5%; left:inherit; padding: 1em; width: 250px; top: 68%; }
    .contact .contact-info h2 { margin: 0; font-size: 1.5em; }
    .contact .contact-info p { margin: 0; }
    .contact .contact-info li { margin: 0.2em 0; }
    .director-detail .director-name { width: 35%; right: 0%; height: 115%; }
    .director-detail .director-name span { font-size: 2em; }
    .project-detail .project-img .w-heading { font-size: 1.3em; }
    .project-detail .project-info .row { margin: 0 -15px; }
    .project-detail .project-info .row > *[class *= "col-"] { padding: 0 15px; }
    footer { height: 137px; }
    footer ol { padding: 0; }
    footer ol > li { display: block; padding: 0.6em 0; }
    footer ol > li:after { clear: both; content: ""; display: block; }
    footer .social { padding: 0em; text-align: center; }
    footer .social li { display: inline-block; float: none; }
    footer img { padding: 0; }
    footer .apollo { top: inherit; bottom: 0.8em; }
	iframe{
	width:100%;
	height:100%;
	}

}
@media only screen and (max-width: 660px) {
    header .mainnav li a { padding: 0 0.1em 0 0.4em; display: inline; }
    .project-detail .project-info .row > *[class *= "col-"] { width: 100%; }
    .project-detail .project-info { padding: 1.5em 10%; }
    .project-detail .project-info .links { margin-bottom: 1em; }
    .project-detail .project-info ul { text-align: center; }
    .project-detail .project-info ul:first-child { margin-bottom: 0.9em; }
    .project-detail .project-img .w-heading { padding: 0.4em 2em 0.4em 0.4em; }
    .e-right { width: 45%; }
    .e-left { width: 55%; }
	iframe{
	width:100%;
	height:100%;
	}
}
@media only screen and (max-width: 540px) {
    .flex-container { max-height: 5px; min-height: 5px; font-size: 0.85em; }
    .work-list .row { padding-bottom: 0; }
    .work-list .col-1-3 { width: 90%; float: none; margin: 0 auto 2em; }
    .work-list figure img { width: 100%; }
    .work-list .work-item .pattern { opacity: 0; }
    .work-list .work-info { padding: 0.5em; font-size: 1.1em; margin-top: 0; }
    .team-top .col-1-4,
    .team-bottom .col-1-4 { width: 80%; margin: 0 auto 2em !important; float: none; }
    .team-top .col-1-4:last-child { margin-bottom: 0 !important}
    .team-info { font-size: 1.2em; padding: 0.5em; height: inherit; line-height: inherit; }
    .mfp-arrow-left { left: -30px; }
    .mfp-arrow-right { right: -30px; }
    .teamLbTitle { font-size: 1.2em; }
    .teamLightbox .mfp-title { line-height: 1.5em; }
    #directorWorkSec h2 { font-size: 1.4em; }
    .director-detail .director-name { height: 125%; right: -3%; width: 40%; }
    .director-detail .director-name span:first-child { font-size: 1.8em; }
    .director-detail .director-name span { font-size: 1.45em; }
    .project-detail .project-img .w-heading { display: none; }
    .e-in { font-size: 0.7em; }
	iframe{
	width:100%;
	height:100%;
	}
}
@media only screen and (max-width: 450px) {
    .team-top .col-1-4,
    .team-bottom .col-1-4 { width: 90%; margin: 0 auto 2em !important; float: none; }
    .project-detail .project-info { padding: 1.5em 5%; }
    .e-right { width:100%; padding: 2em 6em; background: url(../img/error.jpg) no-repeat left 25px #009999; }
    .e-left { width: 100%; padding: 2em 6em; }
    .e-in h1 { padding-top: 0; text-align: left; }
    .e-in h2 { text-align: left; }
    .e-in { height: inherit; }
	iframe{
	width:100%;
	height:100%;
	}
}