@import url("font.css");
@import url("custom-styles.css");
*,*:after,*:before {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    padding:0;
    margin:0}
.clearfix:before,.clearfix:after {
    content:" ";
    display:table}
.clearfix:after {
    clear:both}
html {
    font-size:.625rem;
    height:101%}
body {
    font-family:Calibri,'Open Sans', sans-serif;
    background:#333;
    font-size:14px;
    font-size:1.4rem;
    font-weight:400;
    padding-bottom:60px}
a {
    text-decoration:none}
a:focus {
    outline:0}
h1,h2,h3,h4,h5,h6 {
    font-family:'Montserrat'}
::selection {
    background:#2ecc71;
    color:white}
::-moz-selection {
    background:#2ecc71;
    color:white}
#warning {
    background:#e74c3c;
    position:absolute;
    top:0;;
    width:100%;
    text-align:center;
    color:#fff;
    font-size:16px;
    font-weight:bold; 
    padding:10px;
    z-index:100;}
#warning a {
    color:#34495e;}
#warning a:hover {
    color:#2c3e50;
    text-decoration:underline;}
ul {
    margin:0;
    padding:0;
    list-style:none}
.container {
    position:relative;
    width:96%;
    max-width:940px;
    margin:0 auto;
    margin-top:60px}
.logo {
    display:none}
.nav {
    font-size:0;
    background:black}
.nav li {
    display:inline-block;
    vertical-align:top;
    width:20%;
    text-align:center}
.nav li:first-child {
    font-size:12px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:2px;
    color:white}
.nav li:first-child img {
    padding-top:64px}
.nav a {
    font-family:'entypo';
    display:block;
    color:white;
    padding:74px 0;
    font-size:4rem;
    -webkit-transition:all 275ms cubic-bezier(.68,.17,.62,1.24);
    -moz-transition:all 275ms cubic-bezier(.68,.17,.62,1.24);
    -ms-transition:all 275ms cubic-bezier(.68,.17,.62,1.24);
    -o-transition:all 275ms cubic-bezier(.68,.17,.62,1.24);
    transition:all 275ms cubic-bezier(.68,.17,.62,1.24)}
.nav span {
    font-family:'Montserrat';
    font-size:1.2rem;
    text-transform:uppercase;
    letter-spacing:3px;
    padding-top:20px;
    margin-bottom:-20px;
    display:none;
    line-height:0}
.nav a:hover span,.active span {
    display:block}
.nav a:hover,.active a {
    background:white!important;
    color:#16a085!important;
    padding-top:84px;
    margin-top:-10px}
.active a:hover {
    cursor:default}
.js #nav {
    position:relative}
.js #nav.closed {
    max-height:none}
#nav-toggle {
    display:none}
.content {
    background:#fff;
    padding:40px}
.content h2 {
    text-transform:uppercase;
    padding:0;
    line-height:1;
    margin:40px 0}
.content h2:first-child {
    margin-top:0}
.profile {
    width:100%;
    margin-bottom:10px;
    display:inline-block}
.p-image {
    max-height:376px;
    margin:-40px -40px 40px;
    overflow:hidden}
.p-image img {
    width:100%}
.p-details h2 {
    margin-bottom:0}
.p-details h4 {
    margin:5px 0 15px}
.p-details p {
    font-size:1.4rem;
    line-height:1.5}
.p-details p:last-of-type {
    margin-bottom:40px}
.p-details a {
    padding:0 5px;
    color:#2980b9;
    margin-right:10px;
    -webkit-transition:all 275ms ease-in-out;
    -moz-transition:all 275ms ease-in-out;
    -ms-transition:all 275ms ease-in-out;
    -o-transition:all 275ms ease-in-out;
    transition:all 275ms ease-in-out}
.error {
    font-family:'Montserrat';
    text-align:center}
.error span {
    display:block;
    width:100%;
    text-transform:uppercase}
.error span:nth-child(1),.error span:nth-child(3) {
    font-size:18px;
    line-height:36px}
.error span:nth-child(2) {
    font-size:120px;
    font-weight:bold;
    line-height:100px}
.career {
    width:65%;
    margin-right:4%;
    display:inline-block;
    vertical-align:top}
.ro-timeline {
    position:relative}
.ro-timeline>li .ro-time {
    position:absolute;
    display:block;
    margin-top:16px}
.ro-timeline>li .ro-time span {
    display:block;
    text-align:left;
    font-size:1.2rem;
    font-weight:700;
    line-height:1.5;
    color:black}
.ro-timeline:before {
    content:'';
    position:absolute;
    top:0;
    bottom:0;
    width:5px;
    background:#eee;
    left:19%;
    margin-left:-8px}
.ro-timeline>li .ro-icon {
    position:relative;
    width:40px;
    height:40px;
    font-family:'entypo';
    font-size:1.8rem;
    line-height:40px;
    color:black;
    -webkit-font-smoothing:antialiased;
    speak:none;
    float:left;
    background:white;
    border-radius:50%;
    box-shadow:0 0 0 5px #eee;
    text-align:center;
    left:19%;
    margin:5px 0 0 -25px}
.ro-timeline>li .ro-label {
    margin:0 0 18px 25%;
    background:#f6f6f6;
    color:black;
    padding:15px 15px 5px;
    font-size:1.2rem;
    line-height:1.8;
    position:relative;
    border-radius:4px}
.ro-timeline>li:nth-child(odd) .ro-label {
    background:#f2f2f2}
.ro-timeline>li .ro-label h3 {
    margin:0;
    margin-top:-8px;
    padding:0 0 5px 0;
    line-height:24px;
    border-bottom:1px solid rgba(0,0,0,0.1)}
.ro-timeline>li .ro-label span {
    float:right;
    font-weight:400;
    font-size:1.2rem;
    line-height:27px;
    color:#777}
.ro-timeline>li .ro-label:after {
    right:100%;
    border:solid transparent;
    content:" ";
    height:0;
    width:0;
    position:absolute;
    pointer-events:none;
    border-right-color:#f6f6f6;
    border-width:10px;
    top:14px}
.ro-timeline>li:nth-child(odd) .ro-label:after {
    border-right-color:#f2f2f2}
.sidebar {
    width:30%;
    display:inline-block;
    vertical-align:top}
.sidebar h3 {
    padding-bottom:10px;
    border-bottom:1px solid #2ecc71}
.sidebar h3 span {
    margin-right:5px}
.sidebar ul {
    margin-bottom:40px}
.skills li {
    width:100%;
    background:#fafafa;
    border-radius:4px;
    display:inline-block;
    margin-bottom:5px;
    color:#fff;
    line-height:30px;
    font-size:1.2rem}
.skills li:last-child {
    margin-bottom:0}
.skills span {
    padding-left:3%;
    border-radius:4px;
    display:block;
    background:#2ecc71;
    -webkit-transition:all 275ms cubic-bezier(.68,.17,.62,1.24);
    -moz-transition:all 275ms cubic-bezier(.68,.17,.62,1.24);
    -ms-transition:all 275ms cubic-bezier(.68,.17,.62,1.24);
    -o-transition:all 275ms cubic-bezier(.68,.17,.62,1.24);
    transition:all 275ms cubic-bezier(.68,.17,.62,1.24)}
.skills li:nth-child(even) span {
    background:#27ae60}
.skills span:hover {
    background:#000!important;
    cursor:not-allowed}
.ratings li {
    margin-bottom:10px;
    height:20px}
.ratings h5 {
    display:inline-block;
    vertical-align:top;
    width:45%;
    height:20px;
    line-height:20px;
    padding:0;
    margin:0}
.rating {
    display:inline-block;
    vertical-align:top;
    font-size:0;
    width:50%;
    height:20px}
.rating span {
    display:inline-block;
    width:12px;
    height:12px;
    border-radius:12px;
    margin:4px 4px 0 0;
    background:#f6f6f6}
.rt-spanbg {
    background:#2ecc71!important}
.social {
    position:absolute;
    right:0;
    margin-top:-60px;
    font-size:0}
.social a {
    display:inline-block;
    width:30px;
    height:30px;
    line-height:30px;
    text-align:center;
    background:white;
    font-size:1.4rem;
    color:black;
    -webkit-transition:all 275ms cubic-bezier(.68,.17,.62,1.24),height 275ms ease-in;
    -moz-transition:all 275ms cubic-bezier(.68,.17,.62,1.24),height 275ms ease-in;
    -ms-transition:all 275ms cubic-bezier(.68,.17,.62,1.24),height 275ms ease-in;
    -o-transition:all 275ms cubic-bezier(.68,.17,.62,1.24),height 275ms ease-in;
    transition:all 275ms cubic-bezier(.68,.17,.62,1.24),height 275ms ease-in}
.social a:hover {
    background:#2ecc71;
    color:white;
    height:35px}
.work-grid {
    font-size:0;
    margin:0 -40px -40px}
.work-grid li {
    display:inline-block;
    width:25%;
    height:145px;
    overflow:hidden}
.work-grid figure,.work-grid img {
    max-width:100%}
.work-grid a {
    display:block;
    height:145px;
    overflow:hidden}
.work-grid img,.work-grid div {
    -webkit-transition:all 275ms ease-in;
    -moz-transition:all 275ms ease-in;
    -ms-transition:all 275ms ease-in;
    -o-transition:all 275ms ease-in;
    transition:all 275ms ease-in}
.work-grid a:hover img,.work-grid div {
    -webkit-transform:scale(5);
    -moz-transform:scale(5);
    -ms-transform:scale(5);
    -o-transform:scale(5);
    transform:scale(5)}
.work-grid a {
    position:relative;
    overflow:hidden}
.work-grid div {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    opacity:0;
    text-align:center;
    overflow:hidden}
.work-grid a:hover div {
    background:rgba(0,0,0,0.5);
    opacity:1;
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1)}
.work-grid div span {
    padding:14px;
    border-radius:50px;
    background:black;
    color:white;
    font-size:2.1rem;
    line-height:145px}
.work-grid .mix {
    opacity:0;
    display:none}
.work a {
    padding:0 5px;
    color:#2980b9;
    margin-right:10px;
    -webkit-transition:all 275ms ease-in-out;
    -moz-transition:all 275ms ease-in-out;
    -ms-transition:all 275ms ease-in-out;
    -o-transition:all 275ms ease-in-out;
    transition:all 275ms ease-in-out}
.work a:hover {
    background: #2ecc71;
    color: white}
.fail {
    background:#f2f2f2;
    text-align:center;
    margin:0 auto;
    margin:0 -40px -40px;
    padding:80px 0}
.fail:after {
    content:'Custom fail message. Please try another category.';
    font-size:1.4rem;
    color:#f22}
.gridfilter {
    width:100%;
    padding-bottom:20px}
.gridfilter li {
    display:inline-block;
    padding:8px 16px;
    background:#f2f2f2;
    margin-right:4px;
    margin-bottom:8px;
    cursor:pointer;
    border-radius:2px;
    font-size:1.3rem;
    font-weight:300;
    -webkit-transition:all 275ms ease-in-out;
    -moz-transition:all 275ms ease-in-out;
    -ms-transition:all 275ms ease-in-out;
    -o-transition:all 275ms ease-in-out;
    transition:all 275ms ease-in-out}
.gridfilter li:hover {
    color:white!important;
    background:black}
.activefilter {
    background:#2ecc71!important;
    color:white}
.swipebox {
    overflow:hidden!important}
#swipebox-overlay img {
    border:none!important}
#swipebox-overlay {
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:99999!important;
    overflow:hidden;
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none}
#swipebox-slider {
    height:100%;
    left:0;
    top:0;
    width:100%;
    white-space:nowrap;
    position:absolute;
    display:none}
#swipebox-slider .slide {
    background:url("../img/work/loader.gif") no-repeat center center;
    height:100%;
    width:100%;
    line-height:1px;
    text-align:center;
    display:inline-block}
#swipebox-slider .slide:before {
    content:"";
    display:inline-block;
    height:50%;
    width:1px;
    margin-right:-1px}
#swipebox-slider .slide img {
    display:inline-block;
    max-height:100%;
    max-width:100%;
    margin:0;
    padding:0;
    width:auto;
    height:auto;
    vertical-align:middle}
#swipebox-action,#swipebox-caption {
    position:absolute;
    left:0;
    z-index:999;
    height:50px;
    width:100%}
#swipebox-action {
    bottom:-50px}
#swipebox-action.visible-bars {
    bottom:0}
#swipebox-action.force-visible-bars {
    bottom:0!important}
#swipebox-caption {
    top:-50px;
    text-align:center}
#swipebox-caption.visible-bars {
    top:0}
#swipebox-caption.force-visible-bars {
    top:0!important}
#swipebox-action #swipebox-prev,#swipebox-action #swipebox-next,#swipebox-action #swipebox-close {
    background-image:url("../img/work/icons.png");
    background-repeat:no-repeat;
    border:none!important;
    text-decoration:none!important;
    cursor:pointer;
    position:absolute;
    width:50px;
    height:50px;
    top:0}
#swipebox-action #swipebox-close {
    background-position:15px 12px;
    left:40px}
#swipebox-action #swipebox-prev {
    background-position:-32px 13px;
    right:100px}
#swipebox-action #swipebox-next {
    background-position:-78px 13px;
    right:40px}
#swipebox-action #swipebox-prev.disabled,#swipebox-action #swipebox-next.disabled {
    filter:alpha(opacity=30);
    opacity:.3}
#swipebox-slider.rightSpring {
    -moz-animation:rightSpring .3s;
    -webkit-animation:rightSpring .3s}
#swipebox-slider.leftSpring {
    -moz-animation:leftSpring .3s;
    -webkit-animation:leftSpring .3s}
@-moz-keyframes rightSpring {
    0% {
    margin-left:0}
50% {
    margin-left:-30px}
100% {
    margin-left:0}
}
@-moz-keyframes leftSpring {
    0% {
    margin-left:0}
50% {
    margin-left:30px}
100% {
    margin-left:0}
}
@-webkit-keyframes rightSpring {
    0% {
    margin-left:0}
50% {
    margin-left:-30px}
100% {
    margin-left:0}
}
@-webkit-keyframes leftSpring {
    0% {
    margin-left:0}
50% {
    margin-left:30px}
100% {
    margin-left:0}
}
#swipebox-overlay {
    background:black}
#swipebox-action,#swipebox-caption {
    background-color:black;
    filter:alpha(opacity=90);
    opacity:.9}
#swipebox-caption {
    color:white!important;
    font-size:1.4rem;
    line-height:43px}
.projects {
    font-size:0}
.projects li {
    display:inline-block;
    vertical-align:top;
    width:30%;
    margin-right:5%;
    margin-bottom:25px}
.projects li:nth-child(3n) {
    margin-right:0}
.projects figure,.projects img {
    max-width:100%}
.projects a {
    overflow:hidden}
.projects img,.projects div {
    -webkit-transition:all 275ms ease-in;
    -moz-transition:all 275ms ease-in;
    -ms-transition:all 275ms ease-in;
    -o-transition:all 275ms ease-in;
    transition:all 275ms ease-in}
.projects a:hover img,.projects div {
    -webkit-transform:scale(5);
    -moz-transform:scale(5);
    -ms-transform:scale(5);
    -o-transform:scale(5);
    transform:scale(5)}
.projects a {
    position:relative;
    overflow:hidden}
.projects div {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    opacity:0;
    text-align:center;
    overflow:hidden}
.projects a:hover div {
    background:rgba(0,0,0,0.5);
    opacity:1;
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1)}
.projects div span {
    padding:14px;
    border-radius:50px;
    background:black;
    color:white;
    font-size:2.1rem;
    line-height:145px}
.projects figcaption h4 {
    font-size:2rem;
    padding:15px 0 0 0;
    margin:0 0 5px 0;
    line-height:1.5}
.projects figcaption p {
    font-size:1.2rem}
.s-project h2 {
    display:inline-block;
    vertical-align:top;
    line-height:1.4}
.project-nav {
    float:right;
    margin-top:-4px}
.project-nav span {
    margin-right:10px}
.project-nav a {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    font-size:1.4rem;
    padding:8px;
    text-align:center;
    line-height:30px;
    background:#eee;
    color:black;
    border-radius:2px;
    -webkit-transition:all 275ms ease-in-out;
    -moz-transition:all 275ms ease-in-out;
    -ms-transition:all 275ms ease-in-out;
    -o-transition:all 275ms ease-in-out;
    transition:all 275ms ease-in-out}
.project-nav a:hover {
    background:black;
    color:white}
.details {
    margin-bottom:25px;
    font-size:0}
.details div {
    display:inline-block;
    vertical-align:top;
    width:60%;
    margin-right:10%;
    font-size:1.2rem;
    line-height:1.8}
.details ul {
    display:inline-block;
    vertical-align:top;
    width:30%}
.details li {
    display:inline-block;
    vertical-align:top;
    width:100%;
    margin-bottom:10px;
    font-size:1.2rem}
.details li:last-child {
    margin-right:0}
.details h4 {
    margin:5px 0;
    padding:0;
    text-transform:uppercase;
    letter-spacing:2px}
.details p {
    margin:0;
    padding:0}
.nivoSlider {
    position:relative;
    width:100%;
    height:auto;
    overflow:hidden}
.nivoSlider img {
    position:absolute;
    top:0;
    left:0;
    max-width:none}
.nivo-main-image {
    display:block!important;
    position:relative!important;
    width:100%!important}
.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:6;
    display:none;
    background:white;
    filter:alpha(opacity=0);
    opacity:0}
.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
    top:0}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
    overflow:hidden}
.nivo-box img {
    display:block}
.nivo-caption {
    position:absolute;
    left:0;
    bottom:0;
    background:#000;
    color:#fff;
    width:100%;
    z-index:8;
    padding:18px 12px;
    opacity:.8;
    overflow:hidden;
    display:none;
    -moz-opacity:.8;
    filter:alpha(opacity=8);
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box}
.nivo-caption p {
    padding:5px;
    margin:0}
.nivo-caption a {
    display:inline!important}
.nivo-html-caption {
    display:none}
.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:9;
    cursor:pointer}
.nivo-prevNav {
    left:0}
.nivo-nextNav {
    right:0}
.nivo-controlNav a {
    cursor:pointer}
.nivo-controlNav a.active {
    font-weight:bold}
.ro-gallery {
    font-size:0}
.ro-gallery li {
    display:inline-block;
    vertical-align:top;
    width:24%;
    margin:0 1% 1% 0}
.ro-gallery li:last-child {
    margin-right:0}
.ro-gallery img {
    width:100%;
    -webkit-transition:all 275ms ease-in-out;
    -moz-transition:all 275ms ease-in-out;
    -ms-transition:all 275ms ease-in-out;
    -o-transition:all 275ms ease-in-out;
    transition:all 275ms ease-in-out}
.ro-gallery img:hover {
    opacity:.6}
.contact {
    width:60%;
    margin-right:9%;
    display:inline-block;
    vertical-align:top}
#map {
    margin:-40px -40px 40px;
    height:376px;
    background:#eee}
.contact input:focus,.contact textarea:focus {
    outline:0}
.contact label {
    display:inline-block;
    margin-bottom:5px}
.contact form input[type="text"],.contact form input[type="email"],.contact form textarea {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width:100%;
    height:40px;
    padding:5px 10px;
    font-size:14px;
    color:#999;
    letter-spacing:1px;
    background-color:#fff;
    border:2px solid #eee;
    box-shadow:none;
    margin-bottom:25px;
    transition:all .3s;
    -moz-transition:all .3s;
    -webkit-transition:all .3s;
    -o-transition:all .3s}
.contact form input[type="text"]:focus,.contact form input[type="email"]:focus,.contact form textarea:focus {
    border:2px solid #2ecc71;
    color:#999}
.contact form input[type="text"]:required:valid,.contact form input[type="email"]:required:valid,.contact form textarea:required:valid {
    border:2px solid #2ecc71;
    color:#2ecc71;
    background:url('../img/valid-icon.svg') no-repeat;
    background-position:98%}
.contact form input[type="text"]:required:invalid,.contact form input[type="email"]:required:invalid,.contact form textarea:required:invalid {
    background:url('../img/invalid-icon.svg') no-repeat;
    background-position:98%}
.contact form textarea:required:valid,.contact form textarea:required:invalid {
    background-position:98% 8px}
.contact form textarea {
    font-family:'Open Sans';
    font-weight:normal;
    resize:vertical;
    height:100px}
.contact form label {
    color:black;
    font-size:14px;
    font-weight:normal;
    letter-spacing:1px}
.budgetrange {
    margin-bottom:25px}
.contact form input[type="radio"] {
    display:none!important}
.contact form .radio {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    font-size:11px;
    height:36px;
    line-height:20px;
    background:#eee;
    padding:8px 12px;
    margin:10px 10px 0 0;
    border-radius:2px;
    cursor:pointer;
    -webkit-transition:all .4s ease-in-out;
    -moz-transition:all .4s ease-in-out;
    -ms-transition:all .4s ease-in-out;
    -o-transition:all .4s ease-in-out;
    transition:all .4s ease-in-out}
.contact form .radio:hover {
    background:#000;
    color:white}
.contact form input[type="radio"]:checked+label {
    background:#2ecc71;
    color:white}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
    color:#909090}
input:-moz-placeholder,textarea:-moz-placeholder {
    color:#909090}
input::-moz-placeholder,textarea::-moz-placeholder {
    color:#909090}
input:-ms-input-placeholder,textarea:-ms-input-placeholder {
    color:#909090}
.contact form .required {
    color:#2ecc71;
    margin-left:4px}
.contact form input[type="submit"] {
    width:90px;
    background-color:black;
    height:40px;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:12px;
    color:#fff;
    border:0;
    border-radius:4px;
    box-shadow:none;
    transition:all .4s ease-in-out;
    -moz-transition:all .4s ease-in-out;
    -webkit-transition:all .4s ease-in-out;
    -o-transition:all .4s ease-in-out}
.contact form input[type="submit"]:hover {
    cursor:pointer}
.contactform {
    margin-bottom:40px}
.sidebar .c-data p {
    font-size:1.6rem;
    line-height:1.8}
.c-email {
    padding:8px 14px;
    font-size:1rem;
    border-radius:4px;
    background:black;
    color:white;
    -webkit-transition:all 275ms ease-in-out;
    -moz-transition:all 275ms ease-in-out;
    -ms-transition:all 275ms ease-in-out;
    -o-transition:all 275ms ease-in-out;
    transition:all 275ms ease-in-out}
.c-email:hover {
    background:#777}
.success-msg {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width:100%;
    text-align:center;
    padding:20px;
    color:white;
    font-size:1.6rem;
    line-height:1.5;
    background:#2ecc71;
    border-radius:4px}
.success-msg span {
    display:inline-block;
    width:100%;
    color:white;
    font-size:3rem;
    margin-bottom:12px}
@media screen and (max-width:1023px) {
    * {
    -webkit-transform:none!important;
    -moz-transform:none!important;
    -ms-transform:none!important;
    -o-transform:none!important;
    transform:none!important}
.settings,.badge {
    display:none}
.career,.contact,.s-project,.contact .radio,.sidebar {
    width:100%;
    margin-right:0}
.ratings h5 {
    width:30%}
.rating {
    width:65%}
.ro-timeline>li .ro-time span {
    font-size:1.6rem}
}
@media screen and (max-width:767px) {
    .logo {
    display:block;
    position:absolute;
    top:-70px;
    left:0;
    width:100%;
    text-align:center;
    z-index:-1}
.container {
    margin-top:120px}
.social {
    margin-top:-120px}
.nav li {
    width:100%;
    height:40px}
.nav li:first-child {
    height:auto;
    padding:30px 0;
    font-size:2.4rem;
    display:none}
.nav li:first-child img {
    padding:0}
.nav a {
    font-size:0;
    padding:0;
    margin:0;
    background:#16a085!important}
.nav span {
    line-height:40px;
    padding-top:0;
    margin-bottom:0;
    display:block}
.nav a:hover span,.active span {
    display:block}
.nav a:hover,.active a {
    padding:0;
    margin:0;
    background:white!important;
    color:black!important}
.active a:hover {
    cursor:default}
.js #nav {
    clip:rect(0 0 0 0);
    max-height:0;
    position:absolute;
    display:block;
    overflow:hidden}
#nav.opened {
    max-height:9999px}
#nav-toggle {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    display:block;
    width:44px;
    height:40px;
    text-indent:-9999px;
    overflow:hidden;
    background:black url("../img/hamburger.gif") no-repeat 50% 50%}
#nav,#nav * {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box}
#nav.opened,#nav.closed {
    width:100%;
    display:inline-block}
.projects li {
    width:47.5%}
.projects li:nth-child(3n) {
    margin-right:5%}
.projects li:nth-child(2n) {
    margin-right:0}
.work-grid li {
    width:50%}
.ratings h5 {
    width:40%}
.rating {
    width:55%}
.s-project h2,.project-nav {
    display:inline-block;
    vertical-align:top;
    width:100%;
    margin-bottom:15px}
.ro-timeline:before {
    display:none}
.ro-timeline>li .ro-time {
    width:100%;
    position:relative;
    padding-bottom:15px}
.ro-timeline>li .ro-time span {
    font-size:2rem;
    font-weight:400;
    text-align:left}
.ro-timeline>li .ro-label {
    margin:0 0 40px 0}
.ro-timeline>li .ro-label h3,.ro-timeline>li .ro-label span {
    display:inline-block;
    width:100%;
    vertical-align:top}
.ro-timeline>li .ro-label:after {
    right:auto;
    left:20px;
    border-right-color:transparent;
    border-bottom-color:#f6f6f6;
    top:-20px}
.ro-timeline>li:nth-child(odd) .ro-label:after {
    border-right-color:transparent;
    border-bottom-color:#f2f2f2}
.ro-timeline>li .ro-icon {
    position:relative;
    float:right;
    left:auto;
    margin:-55px 5px 0 0}
}

@media screen and (max-width:479px) {
    .projects li {
    width:100%;
    margin-right:0}
.work-grid li {
    width:100%}
}
@media screen and (-webkit-min-device-pixel-ratio:1.3),screen and (min--moz-device-pixel-ratio:1.3),screen and (-o-min-device-pixel-ratio:2 / 1),screen and (min-device-pixel-ratio:1.3),screen and (min-resolution:192dpi),screen and (min-resolution:2dppx) {
    #nav-toggle {
    background-image:url("../img/hamburger-retina.gif");
    -webkit-background-size:100px 100px;
    -moz-background-size:100px 100px;
    -o-background-size:100px 100px;
    background-size:100px 100px}
}