@charset "UTF-8";
/** web fonts **/

@import url('https://fonts.googleapis.com/css?family=Titillium+Web');
@import url('https://fonts.googleapis.com/css?family=Abel');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

@font-face {
    font-family: 'metropolis_1920regular';
    src: url('../metropolis_1920.woff2') format('woff2'),
         url('../metropolis_1920.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

* {
	color: #555555 !important;
}
a {
	outline: 0px;
}
a:hover {
	text-decoration: none;
}
a:focus {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
.primary-btn {
	padding: 6px 10px;
	border: solid 2px #444;
	text-align: center;
}
.primary-btn:hover {
	background: #444;
	color: #fff !important;
	text-decoration: none
}
p {
  color: #333333;
  font: 1.2em/2em 'Oswald', sans-serif;
  font-weight: 300;
}
p.style2 {
	font: 14px/18px 'Oswald', sans-serif;
}
.textbox p {
	margin-top:0;
}
.pies h3 {
    font-family: 'Open Sans', sans-serif;
    font-size: 22px;
    margin: 12px 0 0;
}
.pieList p {
    font-size: 0.9em;
    padding: 40px 0 0;
    text-align: center;
}
h1 {
  color: #555555;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0px;
  line-height: 0;
  margin: 16px 0 0;
  text-align: left;
  font-weight: 300;
  font-size: 36px;
}
h2 {
  color: #555555;
  font-family: 'Oswald', sans-serif;
  font-size: 1.3em;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 18px;
  margin-bottom: 6px;
  margin-top: 12px;
  text-align: left;
}
h4 {
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: normal;
  margin: 0;
}
sup {
	vertical-align: 0;
}
.nav a {
	font: lighter 16px/18px 'Oswald', sans-serif;
	letter-spacing: 1px;
	padding-top: 2px;
	text-shadow: 1px 1px 1px #FFFFFF;
	color:#333333;
	outline: 0;
	font-weight: 300;
}
.nav a:hover {
	border-top:solid 2px #dddddd;
}
.nav .active:link, .active:hover, .active:visited {
	border-top:solid 2px #555555 !important;
}
.nav a.ignore:hover, .nav a.ignore:active, .nav a.ignore:link {
	border-top:solid 0px #555555;
}
.backBtn a {
	font: 14px/22px 'Open Sans', sans-serif;
}
.backBtn {
	margin-bottom: 6px;
	margin-top: 15px;
}

html {
    background-color: #FFFFFF;
    height: 100%;
    margin: 0;
    width: 100%;
}
body {
	margin:0px;
}
#goToTop {
	bottom: 60px;
	color: #333;
	font-family: "Abel",Helvetica,sans-serif;
	font-size: 30px;
	font-weight: lighter;
	opacity: 0;
	position: fixed;
	right: -40px;
	z-index: 1;
}
#contenedor-slides {
  height: 100%;
  display: block;
}
.slide {
  background-size: cover !important;
  color: #555555;
  height: 1400px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  width: 100%;
}
.stripesIndex {
  height: 300px;
  margin: 0 auto;
  position: absolute;
  top: 66px;
  width: 100%;
  z-index: 200;
}
.stripesCommercial {
  height: 300px;
  margin: 0 auto;
  opacity: 0.9;
  position: absolute;
  top: 66px;
  width: 100%;
  z-index: 200;
}
.stripesResidences {
	height: 761px;
	margin: 12px auto;
	opacity: 0.9;
	position: absolute;
	top: 66px;
	width: 100%;
	z-index: 200;
}
.stripesLocation {
	height: 790px;
	margin: 0 auto;
	opacity: 0.9;
	position: absolute;
	top: 66px;
	width: 100%;
	z-index: 200;
	background-image: url(../images/locationTextbox.png);
	background-repeat: no-repeat;
	background-position: center top;
}
.stripesContact {
	height: 761px;
	margin: 0 auto;
	opacity: 0.9;
	position: absolute;
	top: 66px;
	width: 100%;
	z-index: 200;
	background-image: url(../images/contactTextbox.png);
	background-repeat: no-repeat;
	background-position: center top;
}
.arrows {
	background-image: url(../images/scroll.png);
	background-position: center top;
    background-repeat: no-repeat;
    min-height: 60px !important;
    position: relative;
    top: 474px;
    width: 100%;
    z-index: 200;
}
.navwrapper {
	width:840px; 
	margin:0px auto;
	display: block !important;
}
.nav ul {
  display: inline-block;
  font-family: "Abel",arial,sans-serif;
  letter-spacing: 2px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.nav ul li {
  display: inline-block;
  float: left;
  width: auto;
}
.nav {
  background: none repeat scroll 0 0 #FFFFFF;
  /**box-shadow: 0 1px 3px #cacaca;**/
  height: 48px;
  padding: 20px 0 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 500;
}
.navlink {
  margin-left: 20px;
  margin-top: 15px;
}
.nav a {
	text-decoration: none;
	cursor: pointer;
}
.contentWrapper {
  height: auto;
  margin: 0 auto;
  position: relative;
  max-width: 840px;
}
.textbox {
  float: left;
  height: auto;
  left: 0;
}
.textbox ul {
	display: inline-flex;
  font-family: "Abel",arial,sans-serif;
  font-size: 14px;
  list-style: none outside none;
  padding: 0;
}
.textbox a {
  color: #555555;
  font-family: 'Open Sans', sans-serif;
  text-decoration: none;
  font-size: 14px;
  font-weight: 300;
}
.textboxRes {
	border-left: 2px solid #815B4B;
	border-right: 2px solid #815B4B;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: 25px;
	padding: 168px 20px 1px;
	width: 310px;
}

.pies {
    color: #333;
    float: left;
    font-family: "Abel",arial,sans-serif;
    height: auto;
    margin: 0 20px 10px;
    position: relative;
}
.piesLower {
    color: #333;
    float: left;
    font-family: "Abel",arial,sans-serif;
    height: auto;
    margin: 10px 20px;
    position: relative;
    width: 360px;
}
.inner {
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #ffffff;
    border-radius: 50px;
    box-sizing: unset;
    font-size: 10px;
    font-weight: bold;
    height: 50px;
    left: 5px;
    line-height: 12px;
    padding: 4px;
    position: absolute;
    text-align: center;
    text-shadow: 1px 1px 0 #ffffff;
    top: 5px;
    width: 50px;
    z-index: 100;
}
.inner p {
	padding:0px auto 5px;
	margin:0px;
	font-size: 12px;
	line-height: 14px;
}
h3 {
	font-size: 22px;
	font-family: 'Oswald', sans-serif;
	margin: 8px 0px 8px;
}
.html, .css, .js, .design, .cs, .dev {
  margin: 0 10px;
}
.html {
    float: left;
    position: relative;
    width: 70px;
    height: 70px;
    /** overflow: hidden; **/
    transition: height 0s;
}
.html .outer {
	background: rgb(227,76,38); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIyMCUiIHN0b3AtY29sb3I9IiNlMzRjMjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZThlYTVkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
	background: -moz-linear-gradient(left,  rgba(227,76,38,1) 20%, rgba(232,234,93,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(20%,rgba(227,76,38,1)), color-stop(100%,rgba(232,234,93,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(227,76,38,1) 20%,rgba(232,234,93,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(227,76,38,1) 20%,rgba(232,234,93,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(227,76,38,1) 20%,rgba(232,234,93,1) 100%); /* IE10+ */
	background: linear-gradient(to right,  rgba(227,76,38,1) 20%,rgba(232,234,93,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e34c26', endColorstr='#e8ea5d',GradientType=1 ); /* IE6-8 */

    border-radius: 100px;
    clip: rect(0px, 100px, 100px, 50px);
    content: "";
    height: 100px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100px;
    z-index: 1;
    display: none;
}
.htmlhalf {
	background: rgb(232,234,93); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4ZWE1ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2UzNGMyNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background: -moz-linear-gradient(left,  rgba(232,234,93,1) 0%, rgba(227,76,38,1) 80%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(232,234,93,1)), color-stop(80%,rgba(227,76,38,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(232,234,93,1) 0%,rgba(227,76,38,1) 80%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(232,234,93,1) 0%,rgba(227,76,38,1) 80%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(232,234,93,1) 0%,rgba(227,76,38,1) 80%); /* IE10+ */
	background: linear-gradient(to right,  rgba(232,234,93,1) 0%,rgba(227,76,38,1) 80%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8ea5d', endColorstr='#e34c26',GradientType=1 ); /* IE6-8 */

    border-radius: 100px;
    /*clip: rect(0px, 100px, 100px, 50px);*/
    height: 70px;
    left: 0;
    position: absolute;
    top: 0;
    animation: html 5s;
    animation-fill-mode:forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation: html 5s;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    width: 70px;
    z-index: 4;
}
@keyframes html {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}
@-webkit-keyframes html {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(360deg);}
}
.css {
    float: left;
    position: relative;
    width: 70px;
    height: 70px;
    /** overflow: hidden;  **/
    transition: height 0s;
}
.css .outer {
	background: rgb(21,114,182); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIyMCUiIHN0b3AtY29sb3I9IiMxNTcyYjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNWVkY2VkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
	background: -moz-linear-gradient(left,  rgba(21,114,182,1) 20%, rgba(94,220,237,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(20%,rgba(21,114,182,1)), color-stop(100%,rgba(94,220,237,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(21,114,182,1) 20%,rgba(94,220,237,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(21,114,182,1) 20%,rgba(94,220,237,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(21,114,182,1) 20%,rgba(94,220,237,1) 100%); /* IE10+ */
	background: linear-gradient(to right,  rgba(21,114,182,1) 20%,rgba(94,220,237,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1572b6', endColorstr='#5edced',GradientType=1 ); /* IE6-8 */

    border-radius: 100px;
    clip: rect(0px, 100px, 100px, 50px);
    content: "";
    height: 110px;
    left: 0;
    position: absolute;
    top: 0;
    width: 110px;
    z-index: 5;
    display: none;
}
.csshalf {
	background: rgb(94,220,237); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlZGNlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iIzE1NzJiNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background: -moz-linear-gradient(left,  rgba(94,220,237,1) 0%, rgba(21,114,182,1) 80%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(94,220,237,1)), color-stop(80%,rgba(21,114,182,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(94,220,237,1) 0%,rgba(21,114,182,1) 80%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(94,220,237,1) 0%,rgba(21,114,182,1) 80%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(94,220,237,1) 0%,rgba(21,114,182,1) 80%); /* IE10+ */
	background: linear-gradient(to right,  rgba(94,220,237,1) 0%,rgba(21,114,182,1) 80%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5edced', endColorstr='#1572b6',GradientType=1 ); /* IE6-8 */

    border-radius: 100px;
    /*clip: rect(0px, 100px, 100px, 50px);*/
    content: "";
    height: 70px;
    left: 0;
    position: absolute;
    top: 0;
    animation: html 5s;
    animation-fill-mode:forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation: html 5s;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    width: 70px;
}
@keyframes css {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}
@-webkit-keyframes css {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(360deg);}
}
.js {
    display: inline-block;
    float: none;
    position: relative;
    width: 70px;
    height: 70px;
    /** overflow: hidden; **/
    transition: height 0s;
}
.js .outer {
	background: rgb(99,168,20); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIyMCUiIHN0b3AtY29sb3I9IiM2M2E4MTQiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNWI5MGU1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
	background: -moz-linear-gradient(left,  rgba(99,168,20,1) 20%, rgba(91,144,229,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(20%,rgba(99,168,20,1)), color-stop(100%,rgba(91,144,229,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(99,168,20,1) 20%,rgba(91,144,229,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(99,168,20,1) 20%,rgba(91,144,229,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(99,168,20,1) 20%,rgba(91,144,229,1) 100%); /* IE10+ */
	background: linear-gradient(to right,  rgba(99,168,20,1) 20%,rgba(91,144,229,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63a814', endColorstr='#5b90e5',GradientType=1 ); /* IE6-8 */

    border-radius: 100px;
    clip: rect(0px, 100px, 100px, 50px);
    content: "";
    height: 100px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100px;
    z-index: 5;
    display: none;
}
.jshalf {
	background: rgb(91,144,229); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzViOTBlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iIzYzYTgxNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background: -moz-linear-gradient(left,  rgba(91,144,229,1) 0%, rgba(99,168,20,1) 80%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(91,144,229,1)), color-stop(80%,rgba(99,168,20,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(91,144,229,1) 0%,rgba(99,168,20,1) 80%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(91,144,229,1) 0%,rgba(99,168,20,1) 80%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(91,144,229,1) 0%,rgba(99,168,20,1) 80%); /* IE10+ */
	background: linear-gradient(to right,  rgba(91,144,229,1) 0%,rgba(99,168,20,1) 80%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b90e5', endColorstr='#63a814',GradientType=1 ); /* IE6-8 */

    border-radius: 100px;
    /*clip: rect(0px, 100px, 100px, 50px);*/
    content: "";
    height: 70px;
    left: 0;
    position: absolute;
    top: 0;
    animation: js 5s;
    animation-fill-mode:forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation: js 5s;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    width: 70px;
}
@keyframes js {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}
@-webkit-keyframes js {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(360deg);}
}
.cs {
    float: left;
    height: 100px;
    position: relative;
    width: 100px;
}
.cs .outer {
	background: rgb(223,140,32); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIyMCUiIHN0b3AtY29sb3I9IiNkZjhjMjAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNWI5MGU1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
	background: -moz-linear-gradient(left,  rgba(223,140,32,1) 20%, rgba(91,144,229,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(20%,rgba(223,140,32,1)), color-stop(100%,rgba(91,144,229,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(223,140,32,1) 20%,rgba(91,144,229,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(223,140,32,1) 20%,rgba(91,144,229,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(223,140,32,1) 20%,rgba(91,144,229,1) 100%); /* IE10+ */
	background: linear-gradient(to right,  rgba(223,140,32,1) 20%,rgba(91,144,229,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#df8c20', endColorstr='#5b90e5',GradientType=1 ); /* IE6-8 */

    border-radius: 100px;
    clip: rect(0px, 100px, 100px, 50px);
    content: "";
    height: 100px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100px;
    z-index: 5;
    display: none;
}
.cshalf {
	background: rgb(91,144,229); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzViOTBlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2RmOGMyMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background: -moz-linear-gradient(left,  rgba(91,144,229,1) 0%, rgba(223,140,32,1) 80%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(91,144,229,1)), color-stop(80%,rgba(223,140,32,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(91,144,229,1) 0%,rgba(223,140,32,1) 80%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(91,144,229,1) 0%,rgba(223,140,32,1) 80%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(91,144,229,1) 0%,rgba(223,140,32,1) 80%); /* IE10+ */
	background: linear-gradient(to right,  rgba(91,144,229,1) 0%,rgba(223,140,32,1) 80%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b90e5', endColorstr='#df8c20',GradientType=1 ); /* IE6-8 */

    border-radius: 100px;
    /*clip: rect(0px, 100px, 100px, 50px);*/
    content: "";
    height: 70px;
    left: 0;
    position: absolute;
    top: 0;
    animation: cs 5s;
    animation-fill-mode:forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation: cs 5s;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    width: 70px;
}
@keyframes cs {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}
@-webkit-keyframes cs {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(360deg);}
}
.design {
    float: left;
    height: 100px;
    position: relative;
    width: 100px;
}
.design .outer {
	background: rgb(208,89,224); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QwNTllMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iIzQ0YTFjOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background: -moz-linear-gradient(left,  rgba(208,89,224,1) 0%, rgba(68,161,200,1) 80%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(208,89,224,1)), color-stop(80%,rgba(68,161,200,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(208,89,224,1) 0%,rgba(68,161,200,1) 80%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(208,89,224,1) 0%,rgba(68,161,200,1) 80%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(208,89,224,1) 0%,rgba(68,161,200,1) 80%); /* IE10+ */
	background: linear-gradient(to right,  rgba(208,89,224,1) 0%,rgba(68,161,200,1) 80%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d059e0', endColorstr='#44a1c8',GradientType=1 ); /* IE6-8 */

    border-radius: 100px;
    clip: rect(0px, 100px, 100px, 50px);
    content: "";
    height: 100px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100px;
    z-index: 5;
    display: none;
}
.designhalf {
	background: rgb(68,161,200); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIyMCUiIHN0b3AtY29sb3I9IiM0NGExYzgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZDA1OWUwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
	background: -moz-linear-gradient(left,  rgba(68,161,200,1) 20%, rgba(208,89,224,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(20%,rgba(68,161,200,1)), color-stop(100%,rgba(208,89,224,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(68,161,200,1) 20%,rgba(208,89,224,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(68,161,200,1) 20%,rgba(208,89,224,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(68,161,200,1) 20%,rgba(208,89,224,1) 100%); /* IE10+ */
	background: linear-gradient(to right,  rgba(68,161,200,1) 20%,rgba(208,89,224,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#44a1c8', endColorstr='#d059e0',GradientType=1 ); /* IE6-8 */

    border-radius: 100px;
    /*clip: rect(0px, 100px, 100px, 50px);*/
    content: "";
    height: 100px;
    left: 0;
    position: absolute;
    top: 0;
    animation: design 5s;
    animation-fill-mode:forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation: design 5s;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    width: 100px;
}
@keyframes design {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}
@-webkit-keyframes design {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(360deg);}
}
.dev {
    float: none;
    height: 100px;
    position: relative;
    width: 100px;
    display: inline-block;
}
.dev .outer {
	background: rgb(231,242,84); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIyMCUiIHN0b3AtY29sb3I9IiNlN2YyNTQiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZjQ2MWM4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
	background: -moz-linear-gradient(left,  rgba(231,242,84,1) 20%, rgba(244,97,200,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(20%,rgba(231,242,84,1)), color-stop(100%,rgba(244,97,200,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(231,242,84,1) 20%,rgba(244,97,200,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(231,242,84,1) 20%,rgba(244,97,200,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(231,242,84,1) 20%,rgba(244,97,200,1) 100%); /* IE10+ */
	background: linear-gradient(to right,  rgba(231,242,84,1) 20%,rgba(244,97,200,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7f254', endColorstr='#f461c8',GradientType=1 ); /* IE6-8 */

    border-radius: 100px;
    clip: rect(0px, 100px, 100px, 50px);
    content: "";
    height: 100px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100px;
    z-index: 5;
    display: none;
}
.devhalf {
	background: rgb(244,97,200); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y0NjFjOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2U3ZjI1NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background: -moz-linear-gradient(left,  rgba(244,97,200,1) 0%, rgba(231,242,84,1) 80%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(244,97,200,1)), color-stop(80%,rgba(231,242,84,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(244,97,200,1) 0%,rgba(231,242,84,1) 80%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(244,97,200,1) 0%,rgba(231,242,84,1) 80%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(244,97,200,1) 0%,rgba(231,242,84,1) 80%); /* IE10+ */
	background: linear-gradient(to right,  rgba(244,97,200,1) 0%,rgba(231,242,84,1) 80%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f461c8', endColorstr='#e7f254',GradientType=1 ); /* IE6-8 */

    border-radius: 100px;
    /*clip: rect(0px, 100px, 100px, 50px);*/
    content: "";
    height: 100px;
    left: 0;
    position: absolute;
    top: 0;
    animation: dev 5s;
    animation-fill-mode:forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation: dev 5s;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    width: 100px;
}
@keyframes dev {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}
@-webkit-keyframes dev {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(360deg);}
}
.footer {
	  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
	
	bottom: 0;
	height: 80px;
	left: 0;
	position: fixed;
	width: 100%;
	z-index: 800;
}

/** pie list and hideShow **/
.pieList {
    border-radius: 0 0 6px 6px;
    height: 128px;
    margin: 34px 0 0;
    padding: 0 5px;
}
.html, .css, .js, .design, .cs, .dev {
    margin: 0 10px;
}
/**
.html:hover {
	height: 200px;
}
.css:hover {
	height: 200px;
}
.js:hover {
	height: 200px;
}
**/

/** contact grid **/
.textbox li {
  float: left;
  margin: 0 5%;
  text-align: center;
}
/**#contact .stripesCommercial .contentWrapper .textbox ul li span, img {
  display: inline-block;
  margin-bottom: 10px;
}**/
.textbox li:first-child {
  margin: 0;
}
/** **/

/** portfolio grid **/
.portfolio-nav a:focus, .mainnav a:focus {
    outline: medium none;
}
.portfolio-nav {
    text-transform: uppercase;
}
.portfolio-nav {
    border: 1px dotted rgba(23, 23, 23, 0.5);
    list-style: outside none none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 9;
}
.lt-ie9 .portfolio-nav {
    border: 1px dotted #171717;
}
.portfolio-nav li {
    display: inline-block;
    margin: 1px;
}
.portfolio-nav li {
    display: inline-block;
    height: 48px;
    letter-spacing: 2px;
    line-height: 48px;
    padding: 0 25px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    top: 0;
}
.portfolio-nav li:hover {
    background: #2e2e2e none repeat scroll 0 0;
}
.portfolio-nav li {
    cursor: pointer;
}
#filters {
    line-height: 43px;
    margin: 0;
    padding: 0;
}
#portfolio-nav {
    border-bottom: 1px dotted rgba(23, 23, 23, 0.5);
    display: block;
    height: 43px;
    letter-spacing: 1px;
    margin-bottom: 30px;
    position: relative;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 9;
}
#portfolio-nav a {
    color: black;
    padding: 0;
    text-decoration: none;
    text-transform: uppercase;
}
#portfolio-nav ul {
    display: inline-block;
    padding: 0;
}
#portfolio-nav ul > li {
    float: left;
}
#portfolioinner .mix {
    opacity: 1;
}
.no-js #portfolioinner .mix {
    display: inline-block;
    opacity: 1;
}
#portfolioinner {
    margin: 0;
    padding: 8px 1px 0;
    text-align: left;
}
#portfolioinner li {
	float: left;
    height: 205px;
    list-style: outside none none;
    margin-right: 2px;
    margin-top: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 203px;
}
.rift {
    backface-visibility: hidden;
    height: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.rift img {
    height: 203px;
    object-fit: contain;
    opacity: 0.08;
    width: 100%;
}
.no-js .rift img {
    opacity: 1;
    position: relative;
    z-index: 99;
}
.no-js .rift:hover img {
    display: none;
}
.rift .caption a {
    color: #fff;
    display: block;
    font-family: 'Abel', helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    height: auto;
    letter-spacing: 1px;
    padding-bottom: 30%;
    padding-top: 48%;
    position: absolute;
    text-align: center;
    text-decoration: none;
    top: 0;
    width: 100%;
    z-index: 0;
}
.rift span[class*="span"] {
    display: block;
    height: 51%;
    left: 0;
    overflow: hidden;
    position: absolute;
    transition: transform 0.25s ease 0s;
    -webkit-transition: -webkit-transform 0.25s ease 0s;
    width: 100%;
    z-index: 1;
}
/*.rift span[class*="span"] {
    display: block;
    width: 100%;
    height: 51%;
    overflow: hidden;
    position: absolute;
    left: 0;
    z-index: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform .25s;
    -moz-transition: -moz-transform .25s;
    transition: transform .25s;
    -ms-transform: translate(0, 0);
    -ms-transition: -ms-transform .25s;
}*/

.rift span.top-span {
    top: 0;
}
.rift span.btm-span {
    bottom: 0;
}
.rift:hover span.top-span, .rift:active span.top-span, .rift:focus span.top-span {
    transform: translate(0px, -100%);
    -webkit-transform: translate(0px, -100%);
}
.rift:hover span.btm-span, .rift:active span.btm-span, .rift:focus span.btm-span {
    transform: translate(0px, 100%);
    -webkit-transform: translate(0px, 100%);
}
.no-csstransitions .rift:hover span.top-span, .no-csstransitions .rift:hover > span.btm-span, .no-csstransitions .rift:hover img {
    display: none;
}
.rift {
	background: #efefef;
    cursor: pointer;
    display: inline-block;
    margin: 0;
}
.portSpace div {
  background: #f3f3f3 none repeat scroll 0 0;
  border: 3px solid #fff;
  border-radius: 10px;
}
.blue, .green, .orange, .red, .pink, .navy, .kblib, .nike, .sluice {
	position: relative;
	z-index: 1;
}
.blue:hover::before {
  background: rgba(0, 0, 0, 0) url("../dell/dfsm-app-pres.png") no-repeat scroll center center / 60% auto;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.1;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.green:hover::before {
  background: rgba(0, 0, 0, 0) url("../ryan/ryan-mSite-pres.png") no-repeat scroll center center / 60% auto;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.1;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.orange:hover::before {
  background: rgba(0, 0, 0, 0) url("../dell/dell-comm-pres.png") no-repeat scroll center center / 60% auto;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.1;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.red:hover::before {
  background: rgba(0, 0, 0, 0) url("../rotundaSample/rotunda-brand-mockup.png") no-repeat scroll center center / 60% auto;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.1;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.pink:hover::before {
  background: rgba(0, 0, 0, 0) url("../repocar/repo-mini-site.png") no-repeat scroll center center / 60% auto;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.1;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.navy:hover::before {
  background: rgba(0, 0, 0, 0) url("../cuvsbb/cuvsbb-site.png") no-repeat scroll center center / 60% auto;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.1;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.kblib:hover::before {
  background: rgba(0, 0, 0, 0) url("../dell/dell-supplib-homepg.png") no-repeat scroll center center / 60% auto;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.1;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.nike:hover::before {
  background: rgba(0, 0, 0, 0) url("../nikeapp/nike-earl-app-pres.png") no-repeat scroll center center / 60% auto;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.1;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.sluice:hover::before {
  background: rgba(0, 0, 0, 0) url("../sluice/SluiceTriptych.png") no-repeat scroll center center / 60% auto;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.1;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.geico:hover::before {
  background: rgba(0, 0, 0, 0) url("../geico/GeicoTriptych.png") no-repeat scroll center center / 60% auto;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.1;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}


/** offset classes **/
.top-offset-10 {
	margin-top: 10px;
}
.top-offset-20 {
	margin-top: 20px;
}
.top-offset-30 {
	margin-top: 30px;
}
.top-offset-40 {
	margin-top: 40px;
}
.bottom-offset-10 {
	margin-bottom: 10px;
}
.bottom-offset-20 {
	margin-bottom: 20px;
}
.bottom-offset-30 {
	margin-bottom: 30px;
}
.bottom-offset-40 {
	margin-bottom: 40px;
}
.bottom-offset-50 {
	margin-bottom: 50px;
}
.bottom-offset-60 {
	margin-bottom: 60px;
}
.bottom-offset-70 {
	margin-bottom: 70px;
}
.bottom-padding-30 {
	padding-bottom: 30px;
}

/** over and analysis section classes **/
.overview, .anal {
	height: 50%;
}

/** sample backgrounds and styles **/
.dfsm {
	background-position: right center; 
	background-repeat: no-repeat; 
	padding: 30px 0px; 
	background-image: url("../dell/fieldTech.png"); 
	background-size: cover;
}

.dfsmAna {
	background-position: right top; 
	background-repeat: no-repeat; 
	padding: 20px 0px; 
	background-image: url("../dell/dfsmSketch.png"); 
	background-size: cover;
}

.dellCommOver {
	background-position: right top; 
	background-repeat: no-repeat; 
	padding: 30px 0px; 
	background-image: url("../dell/dell-comm-overview.png"); 
	background-size: cover;
}

.dellCommAna {
	background-position: right top; 
	background-repeat: no-repeat; 
	padding: 30px 0px; 
	background-image: url("../dell/dell-comm-ana.png"); 
	background-size: cover;
}

.dellSupOver {
	background-position: center bottom; 
	background-repeat: no-repeat; 
	padding: 30px 0px; 
	background-image: url("../dell/dell-suplib-overview.png"); 
	background-size: cover;
}

.ryanOverAna {
	background-position: right bottom; 
	background-repeat: no-repeat; 
	padding: 30px 0px; 
	background-image: url("../ryan/ryan-OverAna.png"); 
	background-size: cover;
	/**box-shadow: 0 21px 18px rgba(255, 255, 255, 0.9) inset;**/
}

.rotundaOverAna {
	background-position: center center; 
	background-repeat: no-repeat; 
	padding: 30px 0px; 
	background-image: url("../rotundaSample/rotunda-overview.png"); 
	background-size: cover;
	/**box-shadow: 0 21px 18px rgba(255, 255, 255, 0.9) inset;**/
}


/**  portfolio accordion **/
.Accordion {
    outline: 0 none;
    overflow: hidden;
}
.AccordionPanel {
    margin: 0;
    padding: 0;
}
.AccordionPanelTab {
    -moz-user-select: none;
    background-image: url("../images/navArrowClosed.jpg");
    background-repeat: no-repeat;
    color: #333333;
    cursor: pointer;
    font-family: "Abel",Arial,Helvetica,sans-serif;
    font-size: 14px;
    font-weight: lighter;
    margin: 0;
    padding: 2px;
    width: auto;
}
.AccordionPanelContent {
    color: #333333;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: lighter;
    height: 520px;
    line-height: 14px;
    margin: 0 auto;
    outline: 0 none;
    overflow: hidden;
    padding: 0;
    text-align: left;
    text-indent: 0;
    width: 768px;
}
.AccordionPanelOpen .AccordionPanelTab {
    background-color: #FFFFFF;
    background-image: url("../images/navArrowOpen.jpg");
    background-repeat: no-repeat;
    color: #333333;
}
.AccordionPanelTabHover {
    background-image: url("../images/navArrowClosed.jpg");
    background-repeat: no-repeat;
    color: #333333;
}
.AccordionPanelOpen .AccordionPanelTabHover {
    color: #333333;
}
.wrapper .container .portSpace #TabbedPanels1 .TabbedPanelsContentGroup .TabbedPanelsContent.TabbedPanelsContentVisible #Accordion1 .AccordionPanel.AccordionPanelOpen .AccordionPanelContent a {
    outline: 0 none;
}
.AccordionFocused .AccordionPanelTab {
}
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
}
@media print {
.Accordion {
    overflow: visible !important;
}
.AccordionPanelContent {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
}
}

.TabbedPanels {
    border-bottom: thin solid #CCCCCC;
    clear: none;
    float: left;
    height: auto;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 850px;
}
.TabbedPanelsTabGroup {
    height: auto;
    margin: 0 0 25px;
    padding: 0 0 0 3px;
    position: relative;
    top: 0;
    width: 600px;
}
.TabbedPanelsTab {
    -moz-user-select: none;
    border-bottom-color: #FFFFFF;
    border-bottom-style: solid;
    border-left-width: thin;
    cursor: pointer;
    float: left;
    font:14px "Abel", sans-serif;
    list-style: none outside none;
    margin: 0 15px 12px 0;
    outline: 0 none;
    padding: 4px 0 0;
    position: relative;
    top: 1px;
}
.TabbedPanelsTabHover {
    border-bottom: thin solid #CCCCCC;
}
.TabbedPanelsTabSelected {
    border-bottom: thin solid #CCCCCC;
}
.TabbedPanelsTab a {
    color: #000000;
    text-decoration: none;
}
.TabbedPanelsContentGroup {
    clear: both;
}
.TabbedPanelsContent {
    overflow: hidden;
}
.TabbedPanelsContentVisible {
    margin-top: 10px;
}
.VTabbedPanels {
    overflow: hidden;
}
.VTabbedPanels .TabbedPanelsTabGroup {
    background-color: #EEEEEE;
    border-color: #999999 #999999 #CCCCCC #CCCCCC;
    border-style: solid;
    border-width: 1px;
    float: left;
    height: 20em;
    position: relative;
    width: 10em;
}
.VTabbedPanels .TabbedPanelsTab {
    border-left: medium none;
    border-right: medium none;
    border-top: medium none;
    float: none;
    margin: 0;
}
.VTabbedPanels .TabbedPanelsTabSelected {
    background-color: #EEEEEE;
    border-bottom: 1px solid #999999;
}
.VTabbedPanels .TabbedPanelsContentGroup {
    clear: none;
    float: left;
    height: 20em;
    padding: 0;
    width: 30em;
}
@media print {
.TabbedPanels {
    overflow: visible !important;
}
.TabbedPanelsContentGroup {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
}
.TabbedPanelsContent {
    clear: both !important;
    display: block !important;
    overflow: visible !important;
}
.TabbedPanelsTab {
    clear: both !important;
    display: block !important;
    overflow: visible !important;
}
}
.container {
  display: inline-block;
  height: 690px;
  padding: 0px;
  position: relative;
  width: 100%;

}
.portNav {
	height: 16px;
	width: 249px;
	position: relative;
	left: 40px;
	top: 53px;
	float: left;
}
.portSpace {
  height: auto;
  left: 0;
  padding-left: 0px;
  position: relative;
  top: 0;
  z-index: 4;
}
.portSpace div a, small {
  color: ;
  font-family: 'Oswald', sans-serif;
}
.portSpace a {
  display: block;
  height: 120px;
  margin: 0;
  padding: 40px 0;
  font-size: 14px;
  font-weight: 300;
}
.portSpace h4 {
  color: ;
}
.scrollMAG {
	height: 450px;
	width: 784px;
	overflow-x: scroll;
	overflow-y:hidden;
	margin-top: 0px;
	padding-top: 10px;
}
.accornImg {
	outline: 0;
}
.navMobile {
	display: none;
}
.textboxMobile {
	display: none;
}
.rift span.top-span, .rift span.btm-span {
	display: none;
}

/* for 850px or less */
@media screen and (max-width: 850px) {
	.navwrapper ul {
		padding-left: 10px;
	}
	.textbox {
		padding-left: 10px;
		width: 98%;
	}
	.container {
		padding: 0px;
	}
	.pies, .piesLower {
		float: none;
		margin: 10px auto;
		width: 270px;
	}
	.html, .css, .js, .design, .cs, .dev {
		margin: ;
	}
	.touch {
		display: none !important;
	}
	.rift img {
		/** opacity: 1; **/
		transition: opacity 0.25s;
	    -webkit-transition: opacity 0.25s
	}
	.rift:hover img {
		opacity: 0.08;
	}
	.rift a {
		/** opacity: 0; **/
    	transition: opacity 0.25s;
	    -webkit-transition: opacity 0.25s;
    }
    .rift:hover a {
		opacity: 1;
	}
	.blue:hover::before {
	  background: rgba(0, 0, 0, 0) url("../dell/dfsm-app-pres.png") no-repeat scroll center center / 40% auto;
	  content: "";
	  height: 100%;
	  left: 0;
	  opacity: 0.1;
	  position: absolute;
	  top: 0;
	  width: 100%;
	  z-index: -1;
	  display: none;
	}
	.green:hover::before {
	  background: rgba(0, 0, 0, 0) url("../ryan/ryan-mSite-pres.png") no-repeat scroll center center / 40% auto;
	  content: "";
	  height: 100%;
	  left: 0;
	  opacity: 0.1;
	  position: absolute;
	  top: 0;
	  width: 100%;
	  z-index: -1;
	  display: none;
	}
	.orange:hover::before {
	  background: rgba(0, 0, 0, 0) url("../dell/dell-comm-pres.png") no-repeat scroll center center / 40% auto;
	  content: "";
	  height: 100%;
	  left: 0;
	  opacity: 0.1;
	  position: absolute;
	  top: 0;
	  width: 100%;
	  z-index: -1;
	  display: none;
	}
	.red:hover::before {
	  background: rgba(0, 0, 0, 0) url("../rotundaSample/rotunda-brand-mockup.png") no-repeat scroll center center / 40% auto;
	  content: "";
	  height: 100%;
	  left: 0;
	  opacity: 0.1;
	  position: absolute;
	  top: 0;
	  width: 100%;
	  z-index: -1;
	  display: none;
	}
	.pink:hover::before {
	  background: rgba(0, 0, 0, 0) url("../repocar/repo-mini-site.png") no-repeat scroll center center / 40% auto;
	  content: "";
	  height: 100%;
	  left: 0;
	  opacity: 0.1;
	  position: absolute;
	  top: 0;
	  width: 100%;
	  z-index: -1;
	  display: none;
	}
	.navy:hover::before {
	  background: rgba(0, 0, 0, 0) url("../cuvsbb/cuvsbb-site.png") no-repeat scroll center center / 40% auto;
	  content: "";
	  height: 100%;
	  left: 0;
	  opacity: 0.1;
	  position: absolute;
	  top: 0;
	  width: 100%;
	  z-index: -1;
	  display: none;
	}
	.kblib:hover::before {
		display: none;
	}
	.nike:hover::before {
		display: none;
	}
}
/* for 620px or less */
@media screen and (max-width: 620px) {
	.hidden-sm {
		display: none;
	}
	.nav {
		display: block;
	}
	.navMobile {
	  background: none repeat scroll 0 0 #fff;
	  box-shadow: 0 1px 3px #555;
	  display: none;
	  height: 48px;
	  padding-left: 5px; 
	  margin: 0 auto;
	  position: fixed;
	  top: 0;
	  width: 100%;
	  z-index: 500;
	}
	.navwrapper ul {
	    font-family: 'Abel',helvetica,arial,sans-serif;
	    margin: 0 auto;
	    padding-left: 10px;
	}
	.navwrapper li {
	    float: left;
	    list-style: none outside none;
	}
	.navwrapper {
	    width: 100%;
	}
	.navlink a {
	    color: #555;
	    text-decoration: none;
	}	
	.navlink {
	    margin-left: 15px;
	    margin-top: 15px;
	}
	.nav a:hover {
		border-top:solid 0px #555555;
	}
	.nav .active:link, .active:hover, .active:visited {
		border-top:solid 2px #555555;
	}
	.contentWrapper {
		height: auto;
		margin: 0 auto;
		position: relative;
		width: 100%;
	}
	.slide {
		background-size: cover !important;
		color: #555555;
		height: 1380px;
		margin: 0 auto;
		padding: 0;
		position: relative;
		width: 100%;
	}
	.textbox {
		display: block;
		/*padding: 4px 20px 8px 8px;*/
		width: 98%;
	}
	.textboxMobile {
		height: auto;
		left: 0;
		padding: 4px 8px 8px;
		width: 95%;
		display: none;
	}
	.textboxMobile ul {
	  font-family: "Abel",arial,sans-serif;
	  font-size: 14px;
	  list-style: none outside none;
	  margin: 0;
	  padding: 0;
	}
	.textboxMobile a {
	  color: #555555;
	  font-family: "Abel",arial,sans-serif;
	  text-decoration: none;
	}
	.pies {
	  border-top: 0px solid #ccc;
	  color: #555555;
	  font-family: "Abel",arial,sans-serif;
	  height: auto;
	  left: 0;
	  margin: 0px auto;
	  padding: 20px 0;
	  position: relative;
	  width: 270px;
	  float: none;
	}
	.piesLower {
		border-bottom: 0px solid #ccc;
		color: #555555;
		font-family: "Abel",arial,sans-serif;
		height: auto;
		left: 0;
		margin: 10px auto;
		padding: 0px 0px 20px;
		position: relative;
		width: 320px;
		float: none;
	}
	.html, .css, .js, .design, .cs, .dev {
		margin: ;
	}
	.html, .css, .js {
		margin-left: ;
	}	
	.rift span.top-span, .rift span.btm-span {
		display: none;
	}
	.rift img {
		opacity: 0.1;
	}
	.rift a {
		opacity: 1;
	}
	h1 {
		font-size: 1.9em;
		margin: 20px 0 0;
	}
}

/* for 390px or less */
@media screen and (max-width: 390px) {
	.nav {
		height: 70px;
		padding: 0;
	}
	.nav ul li:first-child 
	{
		display: block !important;
		float: none !important;
	}
	.nav ul li:nth-child(2) {
		margin-left: 0;
	}
	.nav ul li {
		margin-top: 0;
	}
	h1 {
		font-size: 26px;
		margin-bottom: 25px;
	}	
	.nav a {
		font-size: 14px;
	}
	#portfolio {
		height: 1800px;
	}
		
}