/*
Original:

Red: #e74c3c
Blue: #3498db
Purple: #9b59b6
Yellow: #e67e22
Teal: #1abc9c

SRL:

Red: #e9212e
Teal: #39bec1
Grey: #323232
*/

/* 0. Reset and Clearfix */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,and,address,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,input,textarea,select{margin:0;padding:0;outline:0;border:0;background:transparent;vertical-align:baseline;font-size:100%;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}del{text-decoration:line-through;}hr{clear:both;margin:0;padding:0;height:1px;border:0;background:transparent;color:transparent;}mark{background-color:#ffffb3;font-style:italic;}input,select{vertical-align:middle;}ins{background-color:red;color:white;text-decoration:none;}ol,ul{list-style:none;}table{border-spacing:0;border-collapse:collapse;}

.clear{display:block;visibility:hidden;clear:both;overflow:hidden;width:0;height:0;}.clearfix:after{display:block;visibility:hidden;clear:both;width:0;height:0;content:' ';font-size:0;line-height:0;line-line-line-line-line-line-;}* html .clearfix,:first-child+html .clearfix{zoom:1;}

/* 1. Document Setup */
html {
    overflow-x: hidden;
    width: 100%;
    height: 100%;
}

.bg-cover {
    background-attachment: fixed;
    background-position: 50% 50%;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-repeat: no-repeat;
}

body {
    overflow-x: hidden;
    overflow-y: auto;
    color: #333;
    font: 14px/1.7 "Open Sans", sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    background: url("../images/background.png");
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

code {
    padding: 3px 6px;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    background: #fcfcfc;
    border: 1px solid #e4e4e4;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #3f8faf;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 2. Typography */
h1, h2, h3, h4, h5, h6 {
    color: #333;
    font-weight: 400;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 38px; line-height: 60px; }
h2 { font-size: 32px; line-height: 50px; }
h3 { font-size: 28px; line-height: 40px; font-weight: 300; }
h4 { font-size: 14px; line-height: 31px; font-weight: 700; }
h5 { font-size: 12px; line-height: 24px; font-weight: 700; }
h6 { font-size: 10px; line-height: 23px; }

h1.headline, h2.headline, h3.headline {
    margin-bottom: 25px;
}
h4.headline, h5.headline, h6.headline {
    margin-bottom: 15px;
}

p { margin: 0 0 15px 0; line-height: 20px;}
p img { margin: 0; }
p.lead { font-size: 21px; line-height: 27px; color: #777;  }

em { font-style: italic; }
strong { font-weight: bold; }
small { font-size: 80%; }

hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }

.bold {
    font-weight: bold;
}

/* 3. Links */
a, a:visited {
    color: #333;
    text-decoration: none;
    outline: 0; -webkit-transition: color 0.1s ease-in-out; -moz-transition: color 0.1s ease-in-out; -o-transition: color 0.1s ease-in-out; -transition: color 0.1s ease-in-out;
}

a:hover, a:focus {
    color: #ff5533;
}

p a, p a:visited {
    line-height: inherit;
}

/* 4. Forms */
input[type="text"], input[type="password"], input[type="email"], textarea, select {
    border: 1px solid #d8d8d8;
    padding: 9px;
    outline: none;
    font: 12px;
    color: #888;
    margin: 0;
    max-width: 100%;
    display: block;
    background: #fff;
    -webkit-box-shadow: 0px 1px 1px 0px rgba(180, 180, 180, 0.1);
    box-shadow: 0px 1px 1px 0px rgba(180, 180, 180, 0.1);
}
input[type=text],textarea {
    border-radius:0;
    color:#959595;
    display:block;
    font:11px/1.7 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    margin-bottom:10px;
    padding:5px 9px;
    width:100%;
    box-sizing: border-box;
}
textarea {
    resize:none;
    width:100%;
}
input[type="submit"], input[type="reset"], input[type="button"], button, .button {
    display: inline-block;
    padding: 5px 20px 5px;
    margin-left: 1px;
    border-radius: 3px;
    border: none;
    color: #fff;
    opasity:0,5;
    font-weight: 600;
    font-size: 12px;
    font-family: 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    line-height: 1.5;
    cursor: pointer;
    text-align: center;
    -webkit-font-smoothing: antialiased;

    -webkit-transition: background .2s ease-out;
    -moz-transition: background .2s ease-out;
    -o-transition: background .2s ease-out;
    -ms-transition: background .2s ease-out;
    transition: background .2s ease-out;
}
input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, button:hover, .button:hover {
    color: #fff;
}
#contact-form {
    margin-bottom:20px;
}

/* 5. Wrapping */
.vcard-container {
    margin: 64px auto 0;
    width: 896px;
}

/* 6. Columns */
.one-half       { width: 49%; }
.one-third      { width: 31.9%; }
.two-third      { width: 64%; }
.one-fourth     { width: 23.5%; }
.three-fourth   { width: 74.5%; }
.one-fifth      { width: 18.4%; }
.two-fifth      { width: 38.8%; }
.three-fifth    { width: 59.2%; }
.four-fifth     { width: 79.6%; }

.one-half,
.one-third,
.two-third,
.three-fourth,
.one-fourth,
.one-fifth,
.two-fifth,
.three-fifth,
.four-fifth {
    position: relative;
    float: left;
    margin-right: 2%;
}

.column-last {
    clear: right;
    margin-right: 0!important;
}

hr {
    display: block;
}

.sep10   { height: 10px; }
.sep20   { height: 20px; }
.sep30   { height: 30px; }
.sep40   { height: 40px; }
.sep50   { height: 50px; }
.sep60   { height: 60px; }
.sep70   { height: 70px; }
.sep80   { height: 80px; }
.sep90   { height: 90px; }
.sep100  { height: 100px; }

/* 7. Social column */
.social-buttons {
    float: left;
}
.social-buttons i {
    font-size: 21px;
    color: #fff;
}
.social-buttons div {
    height: 64px;
    width: 64px;
    text-align: center;
    line-height: 68px;
    vertical-align: middle;
}

.facebook {
    background-color: #d2d2d2;
    background-color: rgba(255, 255, 255, 0.4);
}
.facebook:hover {
    background-color: #e9212e;
    -webkit-transition: color ease .2s, background ease .2s;
    -moz-transition: color ease .2s, background ease .2s;
    -ms-transition: color ease .2s, background ease .2s;
    -o-transition: color ease .2s, background ease .2s;
    transition: color ease .2s, background ease .2s;    
}

.twitter {
    background-color: #d2d2d2;
    background-color: rgba(255, 255, 255, 0.3);
}
.twitter:hover {
    background-color: #39bec1;
    -webkit-transition: color ease .2s, background ease .2s;
    -moz-transition: color ease .2s, background ease .2s;
    -ms-transition: color ease .2s, background ease .2s;
    -o-transition: color ease .2s, background ease .2s;
    transition: color ease .2s, background ease .2s;
}

.linkedin {
    background-color: #dcdcdc;
    background-color: rgba(255, 255, 255, 0.25);
}
.linkedin:hover {
    background-color: #323232;
    -webkit-transition: color ease .2s, background ease .2s;
    -moz-transition: color ease .2s, background ease .2s;
    -ms-transition: color ease .2s, background ease .2s;
    -o-transition: color ease .2s, background ease .2s;
    transition: color ease .2s, background ease .2s;
}

.github {
    background-color: #e6e6e6;
    background-color: rgba(255, 255, 255, 0.2);
}
.github:hover {
    background-color: #e9212e;
    -webkit-transition: color ease .2s, background ease .2s;
    -moz-transition: color ease .2s, background ease .2s;
    -ms-transition: color ease .2s, background ease .2s;
    -o-transition: color ease .2s, background ease .2s;
    transition: color ease .2s, background ease .2s;
}

.skype {
    background-color: #f0f0f0;
    background-color: rgba(255, 255, 255, 0.15);
}
.skype:hover {
    background-color: #39bec1;
    -webkit-transition: color ease .2s, background ease .2s;
    -moz-transition: color ease .2s, background ease .2s;
    -ms-transition: color ease .2s, background ease .2s;
    -o-transition: color ease .2s, background ease .2s;
    transition: color ease .2s, background ease .2s;
}

.main-column {
    overflow: hidden;
}

/* 8. Header */
.top-row {
    overflow: hidden;
    zoom: 1;
}
.photo {
    float: left;
}
.attributes {
    max-height: 192px;
    min-height: 96px;
    width: 640px;
    display: inline-block;
    vertical-align: top;
    margin-right: -4px;
}
.name {
    display: inline-block;
    vertical-align: top;
    margin-right: -4px;
    background-color: #696969;
    width: 60%;
    height: 96px;
    line-height: 96px;
    color: #fff;
    text-align: center;
    font-size: 1.8em;
    font-weight: 600;
}
.position {
    display: inline-block;
    vertical-align: top;
    /*      margin-right: -4px;   */
    background-color: #555555;
    width: 40%;
    height: 96px;
    line-height: 96px;
    color: #fff;    
    text-align: center; 
}
#main-nav {
    display: inline-block;
    width: 640px;
    height: 96px;
    vertical-align: top;
}

/* 9. Navigation */
.tabs {
    padding: 0;
}
.tabs i {
    font-size: 28px;
}
.tabs li {  
    height: 96px;
    line-height: 107px;
    text-align: center;
    width: 20%;
    float: left;
    list-style: none;
}
.tabs li.def {
    width: 192px;
    height: 192px;
}
.tabs li a {
    display: block;
    position: relative;
    -webkit-transition: color ease .4s, background ease .4s;
    -moz-transition: color ease .4s, background ease .4s;
    -ms-transition: color ease .4s, background ease .4s;
    -o-transition: color ease .4s, background ease .4s;
    transition: color ease .4s, background ease .4s;
    color: #fff;
    text-decoration: none;  
}

.tabs li.home a {
    background: #39bec1;
}
.tabs li.home.active a,
.tabs li.home a:hover {
    color: #39bec1;
}

.tabs li.cv a {
    background: #39bec1;
}
.tabs li.cv.active a,
.tabs li.cv a:hover {
    color: #39bec1;
}

.tabs li.gaming a {
    background: #323232;
}
.tabs li.gaming.active a,
.tabs li.gaming a:hover {
    color: #323232;
}

.tabs li.about a {
    background: #e9212e;
}
.tabs li.about.active a,
.tabs li.about a:hover {
    color: #e9212e;
}

.tabs li.contact a {
    background: #e9212e;
}
.tabs li.contact.active a,
.tabs li.contact a:hover {
    color: #e9212e;
}

.tabs li a:hover,
.tabs li.active a {
    background: #fff !important;
}

/* 10. Content*/
.content {
    min-height: 200px;
    max-width: 100%;
    background: #fff;
    padding-bottom: 50px;
    overflow: hidden;
}
.plain-content {
    padding: 40px 64px 40px 64px;
}
.wopadd {
    padding: 0 64px 0 64px;
}
.grey-content {
    padding: 40px 64px 40px 64px;
    background: #eeeeee;
}
.grey-content-inline {
    padding: 40px 64px 40px 64px;
    background: #eeeeee;
    display: inline-block;
}
.skills span {
    background: #e1e1e1;
    padding: 4px 10px 5px 10px;
    width: 100%;
}
.skills span:hover {
    background: #e9212e;
}
.skills a span {
    font-size: 11px;
}
.services a:hover span {
    color:#fff;
}
.skills-title {
    margin-bottom:12px;
}
.skills-title h3 {
    display: inline;
    font-size: 18px;
    color: #333;
    line-height: 12px;
}
.square-icon {
    color: #666;
    font-size: 16px;
    font-weight: bold;
}
.square-icon i {
    color: #fff;
    font-size: 21px;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    display:inline-block;
    background: #e9212e;
    width:48px;
    height:48px;
    line-height: 48px;
    text-align: center;
    margin-right: 10px;
}
.development {
    background-color: #e9212e !important;
}
.architecture {
    background-color: #323232 !important;
}
.grey {
    color: #999;
}

/* 11. CV */
.job {
    padding-top: 30px;
}
.date {
    display: inline;
    float: left;
    width: 64px;
    text-align: right;
    margin-right: 20px;
}
.jobtitle {
    display: inline;
    float: left;
    width: 80%;
    padding: 0 0 0 0;
    zoom: 1;
}
.datefrom {
    background: #323232;
    padding: 6px 2px 6px 2px;
    color: #fff;
    font-size: 10px;
    text-align: center;
}
.datetill {
    background: #39bec1;
    padding: 6px 2px 6px 2px;
    color: #fff;
    font-size: 10px;
    text-align: center;
}
.datetill-f {
    background: #e9212e;
    padding: 6px 2px 6px 2px;
    color: #fff;
    font-size: 10px;
    text-align: center;
}
.jobdescription {
    padding-top: 24px;
}
.trianglewrap {
    width: 64px;
}
.datetriangle {
    float: right;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent #39bec1 transparent transparent;
}
.datetriangle-f {
    float: right;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent #e9212e transparent transparent;
}

/* 12. Dividers */
.dividewhite2 {
    height: 20px;
}
.dividewhite3 {
    height: 30px;
}
.dividewhite4 {
    height: 40px;
}
.dividewhite6 {
    height: 60px;
}
.dividewhite8 {
    height: 80px;
}

/* 13. Buttons */
.input-button {
    color: #fff !important;
}
.button-red {
    background: #e9212e !important;
}
.button-red:hover {
    background: #ee5c4d !important;
}
.button-blue {
    background: #3498db !important;
}
.button-blue:hover {
    background: #42a4e5 !important;
}
.button-green {
    background: #93b336 !important;
}
.button-green:hover {
    background: #9fc041 !important;
}
.button-yellow {
    background: #ffbb00 !important;
}
.button-yellow:hover {
    background: #ffc526 !important;
}
.button-grey {
    background: #959595 !important;
}
.button-grey:hover {
    background: #a0a0a0 !important;
}
.button-light-grey {
    background: #cccccc !important;
}
.button-light-grey:hover {
    background: #dbdbdb !important;
}
.button.small {
    padding: 5px 8px 6px;
    font-size: 11px;
    line-height: 11px;
}
.big {
    padding: 10px 30px 10px !important;
}

/* 14. Sidebar */
#sidebar {
    max-width: 100%;
    background-color: #eeeeee;
    padding: 30px 0 35px 0;
    display: inline-block;
    margin-bottom: -6px; 
}
#sidebar .plain-content {
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
}

/* 14. Footer */
#footer {
    max-width: 100%;
    background-color: #d2d2d2;
    background-color: rgba(255, 255, 255, 0.3);
    height: 64px;
}
.triangle {
    display: inline;
    float: left;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 64px 64px 0 0;
    border-color: #ffffff transparent transparent transparent;
}
.tagline {
    display: inline;
    float: left;
    line-height: 64px;
    font-size: 11px;
    text-transform: uppercase;
    color: #fff;
}

/* 15. Color Fills */
.blue {
    color: #39bec1 !important;
}
.orange {
    color: #e9212e !important;
}

/*  17. Alert Boxes */
.alert,
label.error {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #fff;
    display: block;
    margin-bottom: 10px;
    padding: 6px 10px 6px 10px;
    width: 100%;
    box-sizing: border-box;
}
.alert.success {
    background: #93b336;
}
.alert.notice {
    background: #39bec1;
}
.alert.warning {
    background: #ffbb00;
}
.alert.error,
label.error {
    background: #e9212e;
}
.alert.neutral {
    background: #959595;
}

/*  23. Back to Top */
#back-top a {
    background: #ccc url(../images/chrome/back_top.png) no-repeat 50% 50%;
    bottom: 60px;
    display: block;
    height: 40px;
    position: fixed;
    right: 30px;
    width: 40px;
}
#back-top a:hover {
    background: #d73300 url(../images/chrome/back_top.png) no-repeat 50% 50%;
}

/*  26. List item  */
.list-item-container {
    width: 100%;
    margin-top: 25px;
    margin-bottom: 25px;
}
.list-item-image {
    display: inline-block;
    margin-right: 25px;
}
.list-item-details {
    display: inline-block;
    vertical-align: top;
}
.reveal-modal img {
    width: 250px;
    height: auto;
}

/*  27. Media Queries */

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .vcard-container {
        width: 716px;
    }
    .one-third { 
        width: 100% !important;
        margin-right: 0!important;
        margin-bottom: 32px !important;
    }
    .plain-content {
        padding: 30px 64px 30px 64px;
    }

    .attributes {
        width: 460px;
    }
    .name {
        width: 60%;
        font-size: 1.6em;
        line-height: 92px;
    }
    .position {
        width: 40%;
    }
    #main-nav {
        width: 460px;
    }
    .tabs li {  
        height: 96px;
        line-height: 107px;
        text-align: center;
        width: 92px;
        float: left;
        list-style: none;
    }
    .project-item {
        height: 524px; 
    }

    .job-title, .post-title {
        max-width: 83%;
    }

    .comment .children {
        padding-left: 0px;
    }

    .comment .comment-entry, .comment .comment-meta, 
    .comment .children .comment-entry, .comment .children .comment-meta, 
    .comment .children .children .comment-entry, .comment .children .children .comment-meta, 
    .comment .children .children .children .comment-entry, .comment .children .children .children .comment-meta, 
    .comment .children .children .children .children .comment-entry, .comment .children .children .children .children .comment-meta, 
    .comment .children .children .children .children .children .comment-entry, .comment .children .children .children .children .children .comment-meta,
    .comment .children .children .children .children .children .children .comment-entry, .comment .children .children .children .children .children .children .comment-meta, 
    .comment .children .children .children .children .children .children .children .comment-entry, .comment .children .children .children .children .children .children .children .comment-meta   
    {
        width: 86%;
    }

    .button-red, .button-blue, .button-green, .button-yellow, .button-grey, .button-light-grey {
        margin-bottom: 10px;
    }
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .bg-cover {
        background-size: 100% 100%; 
    }

    .vcard-container {
        width: 480px;
        margin-top: 40px;
    }
    .social-buttons {
        display: block;
        float: none;
        width: 100%;
    }
    .social-buttons i {
        font-size: 21px;
        color: #fff;
    }
    .social-buttons div {
        display: inline-block;
        margin-right: -4px;
        height: 64px;
        width: 20%;
        text-align: center;
        line-height: 68px;
        vertical-align: middle;
    }
    .attributes {
        width: 288px;
    }
    .name {
        width: 288px;
        font-size: 1.6em;
        line-height: 92px;
    }
    .position {
        width: 288px;
    }
    #main-nav {
        width: 480px;
    }
    .tabs li {
        height: 90px;
        line-height: 96px;
        text-align: center;
        width: 20%;
        float: left;
        list-style: none;
    }
    .tabs i {
        font-size: 21px;
    }
    .one-half {
        width: 100% !important;
    }
    h3 {
        font-size: 21px;
    }
    .date, .post-date {
        margin-right: 15px;
        display: inline-block;
        width: 100%;
    }
    .trianglewrap, .trianglewrap-blog {
        width: 100%;
    }
    .plain-content {
        padding: 30px 40px 30px 40px;
    }
    .wopadd {
        padding: 0 40px 0 40px;
    }
    .grey-content {
        padding: 30px 40px 30px 40px;
    }
    .jobtitle, .post-title {
        width: 100%;
    }
    .one-third { 
        width: 100% !important;
        margin-right: 0!important;
        margin-bottom: 24px !important;
    }
    .project-item {
        height: 400px; 
    }

    .comment .children {
        padding-left: 0px;
    }

    .comment .comment-entry, .comment .comment-meta, 
    .comment .children .comment-entry, .comment .children .comment-meta, 
    .comment .children .children .comment-entry, .comment .children .children .comment-meta, 
    .comment .children .children .children .comment-entry, .comment .children .children .children .comment-meta, 
    .comment .children .children .children .children .comment-entry, .comment .children .children .children .children .comment-meta, 
    .comment .children .children .children .children .children .comment-entry, .comment .children .children .children .children .children .comment-meta,
    .comment .children .children .children .children .children .children .comment-entry, .comment .children .children .children .children .children .children .comment-meta, 
    .comment .children .children .children .children .children .children .children .comment-entry, .comment .children .children .children .children .children .children .children .comment-meta   
    {
        width: 86%;
    }

    .button-red, .button-blue, .button-green, .button-yellow, .button-grey, .button-light-grey {
        width: 100%;
        margin-bottom: 10px;
    } 
    .reveal-modal {
        top: 10px;
    }
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

    .bg-cover {
        background-size: 100% 100%; 
    }

    .vcard-container {
        width: 300px;
        margin-top: 30px;
    }
    .social-buttons {
        display: block;
        float: none;
        width: 100%;
    }
    .social-buttons i {
        font-size: 21px;
        color: #fff;
    }
    .social-buttons div {
        display: inline-block;
        margin-right: -4px;
        height: 64px;
        width: 20%;
        text-align: center;
        line-height: 68px;
        vertical-align: middle;
    }
    #main-nav {
        width: 100%;
        height: 60px;
    }   

    .tabs li {
        height: 60px;
        line-height: 60px;
        text-align: center;
        width: 20%;
        float: left;
        list-style: none;
    }
    .tabs i {
        font-size: 15px;
    }
    .photo {
        display: block;
        float: none;
    }
    .tabs li.def {
        width: 300px;
        height: 300px;
    }
    .attributes {
        width: 100%;
    }
    .name {
        display: block;
        float: none;
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-size: 1.6em;
    }
    .position {
        display: block;
        float: none;
        width: 100%;
        height: 60px;
        line-height: 60px;
    }
    .copyright {
        display: inline;
        float: left;
        line-height: 64px;
        font-size: 9px;
        text-transform: uppercase;
        color: #fff;
    }
    .one-third { 
        width: 100% !important;
        margin-right: 0!important;
        margin-bottom: 24px !important;
    }
    .plain-content {
        padding: 24px 32px 24px 32px;
    }
    .wopadd {
        padding: 0 32px 0 32px;
    }
    .grey-content {
        padding: 24px 32px 24px 32px;
    }

    .one-half {
        width: 100% !important;
    }

    .date, .post-date {
        margin-right: 15px;
        display: inline-block;
        width: 100%;
    }
    .trianglewrap, .trianglewrap-blog {
        width: 100%;
    }

    h3 {
        font-size: 18px;
        line-height: 18px;
    }
    .jobtitle, .post-title {
        width: 100%;
    }
    h1 {
        font-size: 32px;
        line-height: 43px;
    }
    .project-item {
        height: 236px; 
    }

    .comments-links {
        display: block;
        width: 100%;
    }
    .comments-older {
        float: none;
    }

    .comments-newer {
        float: none;
    }

    .comment .comment-entry, .comment .comment-meta, 
    .comment .children .comment-entry, .comment .children .comment-meta, 
    .comment .children .children .comment-entry, .comment .children .children .comment-meta, 
    .comment .children .children .children .comment-entry, .comment .children .children .children .comment-meta, 
    .comment .children .children .children .children .comment-entry, .comment .children .children .children .children .comment-meta, 
    .comment .children .children .children .children .children .comment-entry, .comment .children .children .children .children .children .comment-meta,
    .comment .children .children .children .children .children .children .comment-entry, .comment .children .children .children .children .children .children .comment-meta, 
    .comment .children .children .children .children .children .children .children .comment-entry, .comment .children .children .children .children .children .children .children .comment-meta   
    {
        width: 100%;
    }
    .comment-meta {
        padding-top: 15px;
    }
    .children {
        padding-left: 0px !important;
    }
    .post-details {
        margin-top: 15px;: 
    }

    .button-red, .button-blue, .button-green, .button-yellow, .button-grey, .button-light-grey {
        width: 100%;
        margin-bottom: 10px;
    } 
    .reveal-modal {
        top: 10px;
    }
}

/*  28. WP */

/*.wp-caption {
    max-width: 100%;
}

.wp-caption-text {
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
    font-size: 12px;
    font-style: italic;
    line-height: 1.5;
    margin: 9px 0;
    padding-right: 10px;
}

.sticky .entry-date {
    display: none;
}

.gallery-caption {
    background-color: rgba(0, 0, 0, 0.7);
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
    max-height: 50%;
    opacity: 0;
    padding: 6px 8px;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: left;
    width: 100%;
}

.bypostauthor > article .fn:before {
    content: "\f408";
    margin: 0 2px 0 -2px;
    position: relative;
    top: -1px;
}

.alignright {
    float: right;
}

.alignleft {
    float: left;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}*/


/*  29. Shortcodes */
.shortcodes {
    margin-bottom: 50px;
}
.shortcodes .check {
    margin-top: -10px;
}
ul.compressed li {
    padding-bottom: 4px;
    padding-top: 4px;
}
ul.compressed li:first-child {
    margin-top: -5px;
}
.check li, .check-bold li, .arrow li, .arrow-bold li, .square li, .circle li {
    list-style: none;
    margin: 0;
    padding: 5px 0 5px 18px;
}
.check li {
    background: url(../images/chrome/list_check.png) no-repeat 2px 53%;
}
.check-bold li {
    background: url(../images/chrome/list_check_bold.png) no-repeat 1px 53%;
}
.arrow li {
    background: url(../images/chrome/list_arrow.png) no-repeat 4px 53%;
}
.arrow-bold li {
    background: url(../images/chrome/list_arrow_bold.png) no-repeat 3px 53%;
}
.square li {
    background: url(../images/chrome/list_square.png) no-repeat 4px 53%;
}
.circle li {
    background: url(../images/chrome/list_circle.png) no-repeat 4px 53%;
}