body {margin: 0px; padding; 0px; border-top: 8px solid #D7DF23; background-color: #fff; font-family: 'Montserrat',sans-serif; font-weight: normal; font-size: 1em;}

#container {width: 90%; margin-left: auto; margin-right: auto;}

/* --------- BRAND & HEADER ----------- */
#header {width: 100%; margin-top: 5%; position: relative;}
#logo {width: 65px; height: 65px; background: url('images/logo_tart.png') left top no-repeat; background-size: 100%; margin-left: auto; margin-right: auto;}
#wordmark {width: 100%; text-align: center;}
	#wordmark .the {margin-right: 5px; letter-spacing: -1px;}
	#wordmark .laughing {margin-right: 5px;}
	#wordmark .tart {color: #D7DF23;}
#tagline {font-size: 30%; color: #ccc; text-align: center;}

/* ------- NAVIGATION ------- */
.page_header {margin-top: 5%; background-color: #00A79D; color: #fff; font-size: 120%; padding; 5px 0px; text-align: center;}
.nav_bar {width: 100%; position: relative;}
.nav_bar_left {position: absolute; left: 0px; width: 100%; background: url('images/header_ribbon_end.png') left -30px no-repeat; min-height: 63px;}
.nav_bar_right {width: 100%; position: absolute; right: 0px; background: url('images/header_ribbon_end_right.png') right -30px no-repeat; min-height: 63px;}
.nav_inner {position: absolute; width: 90%; z-index: 9999; height: 30px; margin-left: 5%; margin-right: 5%; overflow: hidden;}
	/* .nav_inner:hover {height: 180px;} */

ul {margin: 0; padding: 0; width: 100%;}
li {list-style: none; margin: 0; padding: 0;}

li.nav_item {z-index: inherit; text-align: center; width: 100%; margin-left: 1px; margin-right: 1px; font-size: 80%; padding: 7px 0px;}
li.nav_item.interact {height: 16px; background-color: #000; color: #fff; transition: height .25s; -webkit-transition: height .25s; cursor: pointer;}
li.nav_item.selected {position: relative; height: 16px; color: #000; background-color: #D7DF23;}
li.nav_item.first {position: relative; height: 16px; color: #000; background-color: #D7DF23;}

li.nav_item.interact:hover {height: 16px; background-color: #00A79D; color: #fff; cursor: pointer;}

#navSelected {background: #D7DF23 url('images/menu_arrow.png') 96% 50% no-repeat; color: #000; cursor: pointer;}

/* ------- PORTFOLIO ITEMS ------- */
.portfolio_container {width: 100%; clear: both; height: 1%; overflow: hidden; margin-right: auto; margin-left: auto; margin-top: 60px;}
.portfolio_outer {background-color: #ccc; border-radius: 15px; width: 220px; height: 220px; margin-left: auto; margin-right: auto; margin-bottom: 5%; padding: 10px;}
.portfolio_inner {background-color: #fff; border-radius: 10px; width: 100%; height: 100%; opacity: 0.3; transition: .3s;}

.portfolio_inner:hover {opacity: 1.0;}

#item1 {background: url('images/thumbs/pt_dash.png') 50% 50% no-repeat;}
#item2 {background: url('images/thumbs/fh_home_country.png') 50% 50% no-repeat;}
#item3 {background: url('images/thumbs/src_home.png') 50% 50% no-repeat;}
#item4 {background: url('images/thumbs/snap_home.png') 50% 50% no-repeat;}
#item5 {background: url('images/thumbs/ug_home.png') 50% 50% no-repeat;}
#item6 {background: url('images/thumbs/pend_home.png') 50% 50% no-repeat;}




/* __________________________________ ABOVE 420 PIX ___________________________________ */
/* o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o- */

@media screen and (min-width: 420px) {

#container {width: 95%; margin-left: auto; margin-right: auto;}

/* --------- BRAND & HEADER ----------- */
#header {margin-top: 2%;}
#logo {width: 82px; height: 82px;}
#tagline {font-size: 25%; color: #ccc; text-align: center;}


}




/* __________________________________ ABOVE 687 PIX ___________________________________ */
/* o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o- */

@media screen and (min-width: 687px) {

.portfolio_container {width: 80%;}
.portfolio_outer {float: left; margin-right: 3%;}


}


/* __________________________________ ABOVE 768 PIX ___________________________________ */
/* o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o- */

@media screen and (min-width: 687px) {

.portfolio_container {width: 70%;}


}



/* __________________________________ ABOVE 820 PIX ___________________________________ */
/* o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o- */

@media screen and (min-width: 820px) {

#container {width: 85%; margin-left: auto; margin-right: auto;}

/* --------- BRAND & HEADER ----------- */
#header {margin-top: 1%;}
#logo {width: 82px; height: 82px; position: absolute; right: 10%;}
#tagline {font-size: 20%; color: #ccc; text-align: center;}


.nav_inner {position: relative; width: 91%; z-index: 9999; margin-left: auto; margin-right: auto; min-height: 55px; overflow: visible;}
.nav_inner:hover {height: 55px;}

li.nav_item {text-align: center; width: auto; float: left; font-size: 70%; margin: 0px 1px 0px 0px; padding: 6px 0;}
li.nav_item.interact {height: 16px; background-color: #000; color: #fff; transition: height .25s; -webkit-transition: height .25s;}
li.nav_item.selected {height: 28px; color: #000; background: url('images/nav_item_on.png') 50% bottom no-repeat;}
#navSelected {display: none;}

li.nav_item.interact:hover {background: url('images/nav_item_interact.png') 50% bottom no-repeat; height: 28px;}

li#all {width: 9%;}
li#uxs {width: 29%;}
li#inf {width: 29%;}
li#vdz {width: 16%;}
li#eng {width: 16%;}

.portfolio_container {margin-top: 0px;}


}



/* __________________________________ ABOVE 860 PIX ___________________________________ */
/* o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o- */

@media screen and (min-width: 860px) {


}



/* __________________________________ ABOVE 1024 PIX ___________________________________ */
/* o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o- */

@media screen and (min-width: 1024px) {

.portfolio_container {width: 93%;}

}