@font-face{
    font-family:'Open Sans';
    src:url(fonts/OpenSans-BoldItalic.eot);
    src:url('fonts/OpenSans-BoldItalic.eot?#iefix') format('embedded-opentype'),url(fonts/OpenSans-BoldItalic.woff) format('woff'),url(fonts/OpenSans-BoldItalic.ttf) format('truetype');
    font-weight:700;
    font-style:italic
}
@font-face{
    font-family:'Open Sans';
    src:url(fonts/OpenSans-Italic.eot);
    src:url('fonts/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),url(fonts/OpenSans-Italic.woff) format('woff'),url(fonts/OpenSans-Italic.ttf) format('truetype');
    font-weight:400;
    font-style:italic
}
@font-face{
    font-family:'Open Sans';
    src:url(fonts/OpenSans.eot);
    src:url('fonts/OpenSans.eot?#iefix') format('embedded-opentype'),url(fonts/OpenSans.woff) format('woff'),url(fonts/OpenSans.ttf) format('truetype');
    font-weight:400;
    font-style:normal
}
@font-face{
    font-family:'Open Sans';
    src:url(fonts/OpenSans-Bold.eot);
    src:url('fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),url(fonts/OpenSans-Bold.woff) format('woff'),url(fonts/OpenSans-Bold.ttf) format('truetype');
    font-weight:700;
    font-style:normal
}
@font-face{
    font-family:'denseregular';
    src:url(fonts/dense-regular-webfont.eot);
    src:url('fonts/dense-regular-webfont.eot?#iefix') format('embedded-opentype'),url(fonts/dense-regular-webfont.woff) format('woff'),url(fonts/dense-regular-webfont.ttf) format('truetype'),url('fonts/dense-regular-webfont.svg#denseregular') format('svg');
    font-weight:400;
    font-style:normal
}
*{
    margin:0;
    padding:0
}
img{
    border:0
}
html,body{
    height:100%
}
body{
    font-family:'Open Sans',sans-serif;
    font-size:15px;
    color:#444;
    background:#dcdcdc
}
p{
    margin-bottom:20px;
    line-height:23px
}
a{
    color:#444;
    text-decoration:none;
    outline:none
}
a:hover{
    color:#f60;
    text-decoration:none
}
.center{
    text-align:center
}
sm{
    font-size:11px
}
.fontface{
    font-family:'denseregular',sans-serif;
    font-weight:400;
    text-transform:uppercase
}

/* HTML5 Elements */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main, section figure, article figure, ul figure { display: block; padding: 0; margin: 0; }

.loader{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    display:block;
    background:url(images/loader.gif) no-repeat center #000;
    text-indent:-9000px;
    z-index:999999
}
#loader{
    position:fixed;
    left:60px;
    right:0;
    bottom:0;
    background:url(images/loader-main.gif) no-repeat center #dcdcdc;
    z-index:9999
}
.box{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
#container{
    width:100%;
    height:100%;
    float:left;
    display:block;
    position:relative
}
#header{
    width:120px;
    height:100%;
    display:block;
    position:fixed;
    top:0;
    left:0;
    background:#f60;
    z-index:99999
}
#header h1#logo{
    width:60px;
    height:86px;
    float:left;
    margin:30px 30px 20px;
    background:url(images/logo.png) no-repeat center;
    text-indent:-9000px;
    position:relative
}
#header h1#logo a{
    display:block;
    width:60px;
    height:86px
}
#nav_btn{
    display:none
}
#header .toggle{
    display:block
}
#header #nav{
    width:auto;
    float:left;
    margin:0
}
#header #nav ul.main_nav{
    display:block;
    list-style:none
}
#header #nav ul.main_nav li{
    display:block;
    padding:0 0 2px
}
#header #nav ul.main_nav li a{
    display:inline-block;
    font-size:24px;
    color:#fff;
    padding:0 2px 0 30px
}
#header #nav ul.main_nav li a:hover{
    color:#f60;
    background:#fff;
    text-decoration:none
}
#header #nav ul#social{
    width:102px;
    position:absolute;
    bottom:60px;
    left:0;
    margin:0 9px;
    list-style:none;
    overflow:hidden
}
#header #nav ul#social li{
    width:30px;
    height:30px;
    float:left;
    margin:2px;
    text-indent:-9000px
}
#header #nav ul#social li a{
    width:28px;
    height:28px;
    display:block;
    background-position:top center;
    background-repeat:no-repeat;
    border:1px solid #fff;
    background-image:url(images/social-media.png)
}
#header #nav ul#social li a:hover{
    background-color:#fff
}
#header #nav ul#social li.rss a{
    background-position:-109px 0
}
#header #nav ul#social li.rss a:hover{
    background-position:-109px -28px
}
#header #nav ul#social li.facebook a{
    background-position:0 0
}
#header #nav ul#social li.facebook a:hover{
    background-position:0 -28px
}
#header #nav ul#social li.twitter a{
    background-position:-137px 0
}
#header #nav ul#social li.twitter a:hover{
    background-position:-137px -28px
}
#header #nav ul#social li.instagram a{
    background-position:-53px 0
}
#header #nav ul#social li.instagram a:hover{
    background-position:-53px -28px
}
#header #nav ul#social li.google a{
    background-position:-25px 0
}
#header #nav ul#social li.google a:hover{
    background-position:-25px -28px
}
#header #nav ul#social li.linkedin a{
    background-position:-82px 0
}
#header #nav ul#social li.linkedin a:hover{
    background-position:-82px -28px
}
#header a#quote{
    width:98px;
    height:40px;
    display:block;
    position:absolute;
    bottom:0;
    left:0;
    font-size:24px;
    color:#f60;
    line-height:40px;
    text-align:center;
    margin:11px;
    background:#fff
}
#header a:hover#quote{
    color:#fff;
    background:none;
    border:1px solid #fff;
    text-decoration:none
}
#main{
    width:100%;
    float:left;
    padding:6px 0 0 126px
}
.section{
    width:100%;
    float:left
}
.section.top,.section.bottom{
    width:66.6666%;
    clear:left
}
.section .header.main.title{
    width:100%;
    float:left;
    padding:0 6px 0 0;
    margin:0 0 6px;
    position:relative
}
.section .header.main.title .wrapper{
    width:100%;
    float:left;
    background:#fff
}
.section .header.main.title h1{
    float:left;
    font-size:36px;
    color:#f60;
    line-height:40px;
    padding:14px 18px
}
.section .header.main.title h2{
    display:block;
    clear:both;
    font-size:28px;
    color:#f60;
    line-height:30px;
    padding:14px 18px;
    border-top:6px solid #dcdcdc
}
.section .header.main.title .nav{
    width:auto;
    float:right;
    padding:12px
}
.section .header.main.title .nav .btn{
    float:left;
    font-size:22px;
    padding:10px 15px;
    margin:0 0 0 5px;
    border:1px solid #ddd
}
.section .header.main.title .nav .btn:hover{
    border:1px solid #f60
}
.section .header.main.title .nav .btn.active{
    color:#f60;
    border:1px solid #f60
}
.section .header.main.title .nav ul{
    width:auto;
    float:left;
    list-style:none
}
.section .header.main.title .nav ul li{
    width:auto;
    float:left;
    margin:0 0 0 5px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
.section .header.main.title .nav ul li a{
    display:block;
    font-size:22px;
    padding:10px 15px;
    border:1px solid #ddd
}
.section .header.main.title .nav ul li.selected a{
    color:#f60
}
.section .header.main.title .nav ul li a:hover{
    border:1px solid #f60
}
#work.archive #sort_btn{
    display:none
}
.blog .section .header.main.title .nav{
    display:block;
    float:none;
    position:relative;
    text-align:right;
    padding:0;
    z-index:9
}
.blog .section .header.main.title .nav .btn{
    float:none;
    display:inline-block;
    margin:12px -4px 12px 5px
}
.blog .section .header.main.title .nav .btn.tuts{
    color:#f60;
    margin-right:12px
}
.blog .section .header.main.title .nav .btn.rss_subscribe{
    padding:10px
}
.blog .section .header.main.title .nav .btn.rss_subscribe span{
    width:22px;
    height:22px;
    display:block;
    text-align:left;
    background:url(images/rss_subscribe.png) no-repeat center;
    text-indent:-9000px;
    position:relative
}
.blog .section .header.main.title .nav .dropdown{
    width:100%;
    border-top:6px solid #dcdcdc;
    padding:18px 13px 13px 18px
}
.blog .section .header.main.title .nav ul.dropdown li{
    margin:0 5px 5px 0
}
.blog .section .header.main.title .nav ul.dropdown li a{
    font-size:13px!important;
    padding:10px 13px
}
.blog .section .header.main.title .nav .dropdown.subscribe{
    float:left;
    padding:18px;
    background:#fff
}
.blog .section .header.main.title .nav .dropdown.subscribe form{
    width:100%;
    float:left
}
.blog .section .header.main.title .nav .dropdown.subscribe .wrap{
    display:block;
    margin-right:113px
}
.blog .section .header.main.title .nav .dropdown.subscribe .field{
    width:100%;
    height:50px;
    display:block;
    font-size:16px;
    padding:0 18px;
    background:#f8f8f8;
    border:1px solid #ddd;
    outline:none;
    -webkit-appearance:none;
    -webkit-border-radius:0;
    border-radius:0
}
.blog .section .header.main.title .nav .dropdown.subscribe .submit{
    width:108px;
    height:50px;
    float:right;
    font-family:'denseregular',sans-serif;
    font-size:26px;
    color:#fff;
    text-transform:uppercase;
    text-decoration:none;
    padding:0;
    margin:-50px 0 0;
    background:#f60;
    border:1px solid #f60;
    position:relative;
    cursor:pointer;
    outline:none;
    -webkit-appearance:none;
    -webkit-border-radius:0;
    border-radius:0
}
.blog .section .header.main.title .nav .dropdown.subscribe .submit:hover{
    color:#f60;
    background:#fff
}
.aside{
    width:33.3333%;
    float:right;
    clear:right
}
.aside .image{
    width:100%;
    float:left;
    padding:0 6px 0 0;
    margin:0 0 6px;
    position:relative
}
.aside .image .wrapper{
    display:block;
    padding:15px;
    background:#fff
}
.aside .image img{
    display:block;
    width:auto;
    max-width:100%;
    height:auto;
    margin:0 auto
}
.aside .meta{
    width:100%;
    float:left;
    padding:0 6px 0 0;
    margin:0 0 6px;
    position:relative
}
.aside .meta .wrapper{
    display:block;
    padding:30px;
    background:#fff
}
.aside .meta .date{
    display:block;
    font-size:16px;
    font-weight:700;
    padding:14px 8px;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd
}
.aside .meta .postedin{
    display:block;
    font-size:14px;
    line-height:20px;
    padding:14px 8px;
    border-bottom:1px solid #ddd
}
.aside .nav_item{
    width:100%;
    float:left;
    padding:0 6px 0 0;
    margin:0 0 6px;
    position:relative
}
.aside .nav_item a,.aside .nav_item .disabled{
    display:block;
    padding:25px 30px 30px;
    background:#fff
}
.aside .nav_item .disabled{
    color:#bbb
}
.aside .nav_item h2{
    font-size:18px;
    line-height:24px
}
.aside .nav_item h2 span{
    display:block;
    font-size:14px;
    font-weight:400;
    font-style:italic
}
.aside .nav_item h2 span span.arrow{
    display:inline;
    color:#f60
}
.aside .nav_item.share{
    width:100%!important
}
.aside .nav_item.share a{
    font-size:30px;
    color:#f60;
    line-height:normal;
    padding:25px 30px;
    background:url(images/share.png) no-repeat right 30px center #fff
}
.aside .nav_item.share a:hover{
    color:#444
}
.aside .nav_item.share .a2a_kit{
    display:block
}
.aside .nav_item.share .a2a_kit span{
    display:none
}
.article{
    width:100%;
    float:left;
    padding:0 6px 0 0;
    margin:0 0 6px;
    position:relative
}
.article.preview{
    width:33.3333%
}
.article .wrapper{
    width:100%;
    float:left;
    padding:40px;
    background:#fff
}
.article.preview .wrapper{
    margin-bottom:15px
}
.article.preview .thumb{
    width:100%;
    float:left;
    text-align:center;
    margin:0 0 20px
}
.article.preview .thumb img{
    display:block;
    width:auto;
    max-width:100%;
    height:auto;
    margin:0 auto
}
.article .header{
    width:100%;
    float:left;
    margin:0 0 8px
}
.article .header h1.title{
    font-size:32px;
    font-weight:400;
    line-height:40px
}
.article .header h1.main.title{
    font-size:36px;
    color:#f60;
    line-height:40px
}
.article .content{
    width:100%;
    float:left
}
.article.preview .more.btn{
    position:absolute;
    bottom:0;
    right:6px;
    display:block;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    padding:10px 14px;
    border-top:1px solid #ddd;
    border-left:1px solid #ddd
}
.aside .article .wrapper{
    padding:30px
}
.article.list ul{
    display:block;
    list-style:none
}
.article.list ul li{
    display:block;
    padding:10px 8px;
    margin-bottom:-1px;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd
}
.equal:after{
    content:'';
    display:block;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    right:6px;
    bottom:0;
    z-index:-1;
    background:#fff
}
#hero{
    width:50%;
    float:left;
    padding:0 6px 0 0;
    margin:0 0 6px;
    position:relative
}
#hero.equal:after{
    background-color:#f60
}
#hero .wrapper{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    float:left;
    text-align:center;
    padding:0;
    background-color:#f60;
    border-right:6px solid #dcdcdc;
    overflow:hidden
}
body.touch #hero .wrapper{
    background-image:none
}
#hero .wrapper .header{
    width:100%;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    position:absolute;
    z-index:999
}
#hero .wrapper .header h1{
    max-width:600px;
    font-size:54px;
    color:#fff;
    line-height:52px;
    margin:0 auto 16px
}
#hero .wrapper .header h1 span{
    display:block
}
#hero .wrapper .header a.btn{
    display:inline-block;
    font-size:26px;
    color:#fff;
    padding:16px 22px;
    margin-right:-4px;
    border:1px solid #fff;
    -webkit-transition:background 0.2s ease-in-out;
    -moz-transition:background 0.2s ease-in-out;
    -ms-transition:background 0.2s ease-in-out;
    -o-transition:background 0.2s ease-in-out;
    transition:background 0.2s ease-in-out
}
#hero .wrapper .header a:hover.btn{
    color:#f60;
    background:#fff
}
#hero .wrapper .header span{
     display: block;
     font-size: 26px;
     color: #fff;
     padding-top: 12px;
}
#hero .wrapper .header span a{
     color: #fff;
}
#hero .wrapper .header span a:hover{
     text-decoration: underline;
}
#hero .wrapper video{
    display:block;
    object-fit:cover
}
.project.preview{
    width:33.3333%;
    float:left;
    padding:0 6px 0 0;
    margin:0 0 6px;
    position:relative
}
.project.featured.preview{
    width:50%
}
.aside .project.preview{
    width:100%
}
.project.preview a{
    width:100%;
    float:left;
    text-align:center;
    position:relative
}
.project.preview a:before{
    content:'';
    display:block;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background:#f60;
    -webkit-opacity:0;
    -moz-opacity:0;
    opacity:0;
    -webkit-transition:all 0.8s ease-out 0.3s;
    -moz-transition:all 0.8s ease-out 0.3s;
    -ms-transition:all 0.8s ease-out 0.3s;
    -o-transition:all 0.8s ease-out 0.3s;
    transition:all 0.8s ease-out 0.3s;
    z-index:9
}
.project.preview:hover a:before{
    -webkit-opacity:.8;
    -moz-opacity:.8;
    opacity:.8;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -ms-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
    transition:all 0.5s ease;
    rule:properties
}
.project.preview .thumb{
    width:100%;
    float:left;
    position:relative
}
.project.preview .thumb:before{
    content:'';
    display:block;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background:#000;
    -webkit-opacity:.2;
    -moz-opacity:.2;
    opacity:.2;
    -webkit-transition:all 0.8s ease-out 0.3s;
    -moz-transition:all 0.8s ease-out 0.3s;
    -ms-transition:all 0.8s ease-out 0.3s;
    -o-transition:all 0.8s ease-out 0.3s;
    transition:all 0.8s ease-out 0.3s;
    z-index:9
}
.project.preview:hover .thumb:before{
    -webkit-opacity:0;
    -moz-opacity:0;
    opacity:0;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -ms-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
    transition:all 0.5s ease;
    rule:properties
}
.project.preview .thumb img{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    margin:0 auto
}
.project.preview .header{
    width:100%;
    height:100%;
    display:block;
    color:#fff;
    -webkit-opacity:1;
    -moz-opacity:1;
    opacity:1;
    -webkit-transition:all 0.5s ease 0.3s;
    -moz-transition:all 0.5s ease 0.3s;
    -ms-transition:all 0.5s ease 0.3s;
    -o-transition:all 0.5s ease 0.3s;
    transition:all 0.5s ease 0.3s;
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    backface-visibility:hidden;
    position:absolute;
    z-index:999
}
.project.preview:hover .header{
    -webkit-opacity:0;
    -moz-opacity:0;
    opacity:0;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -ms-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
    transition:all 0.5s ease;
    rule:properties
}
.project.preview .header h1{
    width:100%;
    height:100%;
    display:table;
    font-size:46px;
    line-height:42px
}
.project.preview .header h1 span{
    display:table-cell;
    vertical-align:middle;
    padding:20px
}
.project.preview .header span.services{
    position:absolute;
    bottom:18px;
    left:0;
    right:0;
    display:block;
    font-size:10px;
    text-transform:uppercase;
    text-align:center
}
.project.preview .cta{
    width:150px;
    height:50px;
    font-size:24px;
    color:#fff;
    line-height:50px;
    border:1px solid #fff;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    -webkit-opacity:0;
    -moz-opacity:0;
    opacity:0;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -ms-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
    transition:all 0.5s ease;
    position:absolute;
    z-index:999
}
.project.preview:hover .cta{
    -webkit-opacity:1;
    -moz-opacity:1;
    opacity:1;
    -webkit-transition:all 0.5s ease 0.3s;
    -moz-transition:all 0.5s ease 0.3s;
    -ms-transition:all 0.5s ease 0.3s;
    -o-transition:all 0.5s ease 0.3s;
    transition:all 0.5s ease 0.3s;
    rule:properties
}
#case_study{
    width:33.3333%;
    float:right
}
#case_study .article{
    margin-bottom:0
}
#case_study .article .wrapper{
    padding-bottom:0
}
#case_study .article .header{
    margin:0 0 4px
}
#case_study .article .header h1.title{
    font-size:38px;
    font-weight:700;
    line-height:38px;
    color:#f60;
    text-transform:uppercase;
    letter-spacing:-2px
}
#case_study .article .content h2.sub_title{
    font-size:24px;
    font-weight:400;
    line-height:32px;
    margin:0 0 6px
}
#case_study .article .content p:last-child{
    margin:0
}
#case_study_info .wrapper{
    padding:30px 40px 40px
}
#case_study_info ul.details{
    width:100%;
    float:left;
    margin:0 0 30px;
    list-style:none;
    border-top:1px solid #ddd
}
#case_study_info ul.details li{
    display:block;
    padding:10px 8px;
    border-bottom:1px solid #ddd
}
#case_study_info ul.details li span{
    font-size:13px;
    font-weight:700;
    color:#666;
    text-transform:uppercase;
    margin-right:2px
}
#case_study_info ul.services{
    width:100%;
    float:left;
    margin-bottom:-4px;
    list-style:none
}
#case_study_info ul.services li{
    width:auto;
    float:left;
    margin:0 4px 4px 0
}
#case_study_info ul.services li span{
    display:block;
    font-size:13px;
    padding:10px 13px;
    border:1px solid #ddd
}
#case_study_info ul.services li a{
    display:block;
    font-size:13px;
    color:#f60;
    padding:10px 13px;
    border:1px solid #ddd
}
#case_study_info ul.services li a:hover{
    border:1px solid #f60
}
#case_study_info .btns{
    width:100%;
    float:left;
    padding-top:20px
}
#case_study_info .btns a.btn{
    display:block;
    clear:both;
    font-size:25px;
    color:#fff;
    padding:16px 20px;
    margin-top:10px;
    background:url(images/launch.png) no-repeat right 20px center #f60;
    border:1px solid #f60
}
#case_study_info .btns a:hover.btn{
    color:#f60;
    background-color:#fff!important
}
#case_study_info .btns a.btn.facebook{
    background-color:#3b5998;
    border:1px solid #3b5998
}
#case_study_info .btns a:hover.btn.facebook{
    color:#3b5998
}
#case_study_info .btns a.btn.twitter{
    background-color:#00b0ed;
    border:1px solid #00b0ed
}
#case_study_info .btns a:hover.btn.twitter{
    color:#00b0ed
}
#work #visual .article .wrapper{
    padding:40px 25px 10px
}
#work #visual img{
    display:block;
    width:auto;
    max-width:100%;
    height:auto;
    position:relative;
    margin:0 auto
}
#work #visual blockquote{
    width:100%;
    float:left
}
#work #visual blockquote h3{
    font-size:14px;
    text-transform:uppercase;
    padding-top:22px;
    margin:0 15px 10px;
    border-top:1px dotted #ddd
}
#work #visual .web{
    width:100%;
    float:left;
    text-align:center;
    padding:0 15px;
    margin:0 0 30px
}
#work #visual .web span{
    display:block;
    background:#878787;
    border:6px solid #ddd;
    border-top:30px solid #ddd;
    border-radius:12px 12px 6px 6px;
    -moz-border-radius:12px 12px 6px 6px;
    -webkit-border-radius:12px 12px 6px 6px;
    position:relative
}
#work #visual .web span:before{
    content: '•••';
    position:absolute;
    top:-23px;
    left:7px;
    color:#aaa;
    z-index:110;
    font-size:36px;
    letter-spacing:-1px;
    line-height:16px
}
#work #visual .tablet{
    width:50%;
    float:left;
    padding:0 15px;
    margin:0 0 30px
}
#work #visual .tablet span{
    display:block;
    padding:34px;
    background:#ddd;
    border-radius:20px;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    position:relative
}
#work #visual .tablet span:before{
    content:'';
    width:20px;
    height:20px;
    display:block;
    position:absolute;
    bottom:7px;
    left:50%;
    margin:0 0 0 -10px;
    background:#aaa;
    border-radius:20px;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    z-index:110
}
#work #visual .mobile{
    width:25%;
    float:left;
    padding:0 15px;
    margin:0 0 30px
}
#work #visual .mobile span{
    display:block;
    padding:34px 10px;
    background:#ddd;
    border-radius:20px;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    position:relative
}
#work #visual .mobile span:before{
    content:'';
    width:30px;
    height:8px;
    display:block;
    position:absolute;
    top:13px;
    left:50%;
    margin:0 0 0 -15px;
    background:#aaa;
    border-radius:8px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    z-index:110
}
#work #visual .mobile span:after{
    content:'';
    width:20px;
    height:20px;
    display:block;
    position:absolute;
    bottom:7px;
    left:50%;
    margin:0 0 0 -10px;
    background:#aaa;
    border-radius:20px;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    z-index:110
}
#work #visual .facebook{
    width:100%;
    float:left;
    text-align:center;
    padding:0 15px;
    margin:0 0 30px
}
#work #visual .facebook span{
    display:block;
    background:#878787;
    border:6px solid #ddd;
    border-top:30px solid #ddd;
    border-radius:12px 12px 6px 6px;
    -moz-border-radius:12px 12px 6px 6px;
    -webkit-border-radius:12px 12px 6px 6px;
    position:relative
}
#work #visual .facebook span:before{
    content: '•••';
    position:absolute;
    top:-23px;
    left:7px;
    color:#aaa;
    z-index:110;
    font-size:36px;
    letter-spacing:-1px;
    line-height:16px
}
#work #visual .facebook span:after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:50px;
    display:block;
    background:url(images/facebook_design.png) no-repeat 10px 10px #3b5998;
    z-index:110
}
#work #visual .facebook span img{
    margin-top:50px
}
#work #visual .twitter{
    width:100%;
    float:left;
    text-align:center;
    padding:0 15px;
    margin:0 0 30px
}
#work #visual .twitter span{
    display:block;
    background:#878787;
    border:6px solid #ddd;
    border-top:30px solid #ddd;
    border-radius:12px 12px 6px 6px;
    -moz-border-radius:12px 12px 6px 6px;
    -webkit-border-radius:12px 12px 6px 6px;
    position:relative
}
#work #visual .twitter span:before{
    content: '•••';
    position:absolute;
    top:-23px;
    left:7px;
    color:#aaa;
    z-index:110;
    font-size:36px;
    letter-spacing:-1px;
    line-height:16px
}
#work #visual .twitter span:after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:50px;
    display:block;
    background:url(images/twitter_design.png) no-repeat 10px 10px #55acee;
    z-index:110
}
#work #visual .twitter span img{
    margin-top:50px
}
#work #visual .logo,#work #visual .logo_white{
    width:100%;
    float:left;
    padding:0 15px;
    margin:0 0 30px
}
#work #visual .logo.alignleft,#work #visual .logo.alignright,#work #visual .logo_white.alignleft,#work #visual .logo_white.alignright{
    width:50%
}
#work #visual .logo span,#work #visual .logo_white span{
    display:block
}
#work #visual .print,#work #visual .print_white{
    width:100%;
    float:left;
    padding:0 15px;
    margin:0 0 30px
}
#work #visual .print.alignleft,#work #visual .print.alignright,#work #visual .print_white.alignleft,#work #visual .print_white.alignright{
    width:50%
}
#work #visual .print span,#work #visual .print_white span{
    display:block
}
#work #visual .print_white span{
    border:1px solid #ddd
}
#work .section.top,#work .section.bottom{
    width:66.6666%
}
#work .aside{
    width:33.3333%
}
#work .testimonial{
    width:100%
}
#work .testimonial:before{
    display:none
}
#work .testimonial .wrapper{
    padding:40px 40px 40px 74px
}
#work .testimonial .content{
    position:relative
}
#work .testimonial .content:before{
    content:'\0201C';
    position:absolute;
    top:-6px;
    left:-40px;
    font-family:'denseregular',sans-serif;
    font-size:160px;
    font-style:normal;
    line-height:130px;
    color:#ccc;
    z-index:9
}
#work .aside .nav .nav_item{
    width:50%;
    text-align:center
}
#work .aside .nav .nav_item a,#work .aside .nav_item .disabled{
    font-size:100px;
    line-height:52px;
    padding-top:18px
}
#work .aside .nav .nav_item a{
    color:#f60
}
#work .aside .nav .nav_item a:hover{
    color:#fff;
    background:#f60
}
.post.preview{
    width:25%
}
.post.preview .thumb{
    width:100%;
    float:left;
    padding:15px 15px 0;
    margin:0;
    background:#fff
}
.post.preview .wrapper{
    padding:22px 30px 30px;
    margin:0
}
.post.preview .header h1.title{
    font-size:22px;
    font-weight:700;
    line-height:30px
}
.post.single .header h1.title{
    font-size:40px;
    font-weight:700;
    line-height:48px
}
#comments{
    width:100%;
    float:left;
    padding:0 6px 0 0;
    margin:0 0 6px;
    position:relative
}
#comments .wrapper{
    width:100%;
    float:left;
    padding:40px;
    background:#fff
}
#comments .header{
    width:100%;
    float:left;
    margin:0 0 10px
}
#comments .header h3.title{
    font-size:36px;
    color:#f60;
    line-height:40px
}
#home .service.preview{
    width:25%
}
#home .service.preview.extra{
    display:none
}
.service.preview .thumb img{
    max-width:30%
}
.service.preview .header h2.title{
    font-size:20px;
    line-height:25px;
    text-align:center;
    padding:0 0 18px;
    margin:0 0 6px;
    position:relative
}
.service.preview .header h2.title:after{
    content:"";
    width:60px;
    height:1px;
    position:absolute;
    left:50%;
    bottom:0;
    margin-left:-30px;
    border-top:1px solid #ddd
}
ul.clients{
    width:100%;
    float:left;
    list-style:none
}
ul.clients li.client{
    width:16.6666%;
    float:left;
    padding:0 6px 0 0;
    margin:0 0 6px;
    position:relative
}
ul.clients li.client .logo{
    width:100%;
    float:left;
    text-align:center;
    padding:60px;
    background:#fff
}
ul.clients li.client .logo img{
    display:block;
    width:auto;
    max-width:100%;
    height:auto;
    margin:0 auto
}
.testimonial{
    width:25%
}
.testimonial:before{
    content:'\0201C';
    position:absolute;
    top:10px;
    left:12px;
    font-family:'denseregular',sans-serif;
    font-size:160px;
    line-height:130px;
    color:#ccc;
    z-index:9
}
.testimonial .logo{
    width:100%;
    float:left;
    text-align:center;
    padding:0 0 25px;
    margin:0 0 20px;
    position:relative
}
.testimonial .logo img{
    display:block;
    width:auto;
    max-width:50%;
    height:auto;
    margin:0 auto
}
.testimonial .logo:after{
    content:"";
    width:60px;
    height:1px;
    position:absolute;
    left:50%;
    bottom:0;
    margin-left:-30px;
    border-top:1px solid #ddd
}
.testimonial .content{
    font-style:italic
}
.testimonial .content h3.name{
    width:auto;
    float:right;
    clear:right;
    font-size:14px;
    font-style:normal;
    color:#666;
    padding-top:4px
}
.testimonial .content h3.name span{
    font-weight:400
}
#direct_contact .map,#direct_contact .map iframe{
    display:block
}
#direct_contact h4{
    font-size:18px;
    line-height:22px;
    margin:0 0 4px
}
#direct_contact span.address{
    display:block;
    line-height:21px;
    margin:0 0 8px
}
#direct_contact span.phone{
    display:block;
    font-size:18px
}
.instagram_feed span{
    width:16.6666%;
    float:left;
    padding:0 6px 0 0;
    margin:0 0 6px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
.aside .instagram_feed span{
    width:50%
}
.instagram_feed span a{
    display:block;
    position:relative
}
.instagram_feed span a:after{
    content:'';
    width:24px;
    height:24px;
    position:absolute;
    bottom:10px;
    right:10px;
    background:url(images/icon_instagram.png) no-repeat center;
    z-index:9
}
.instagram_feed span img{
    display:block;
    width:auto;
    max-width:100%;
    height:auto;
    margin:0 auto
}
.tweets .tweet{
    width:25%;
    font-size:19px;
    line-height:27px
}
.tweets .tweet:before{
    content:'';
    width:24px;
    height:18px;
    position:absolute;
    bottom:12px;
    right:18px;
    background:url(images/icon_twitter.png) no-repeat center;
    z-index:9
}
.aside .tweets .tweet{
    width:100%
}
.aside .tweets .tweet:last-child{
    display:none
}
.tweets .tweet .wrapper{
    padding-bottom:50px
}
.tweets .tweet a{
    color:#f60
}
.tweets .tweet a:hover{
    text-decoration:underline
}
.pagination{
    width:100%;
    float:left;
    padding:0 6px 0 0;
    margin:0 0 6px;
    position:relative
}
.pagination .wrapper{
    width:100%;
    float:left;
    padding:16px;
    background:#fff
}
.load_more{
    display:none
}
#infscr-loading{
    clear:both
}
#infscr-loading img{
    display:none
}
#infscr-loading span{
    display:block;
    height:60px;
    margin:0 6px 6px 0;
    background:url(images/loader-scroll.gif) no-repeat center #fff;
    text-indent:-9000px
}
#footer{
    width:100%;
    float:left;
    padding:0 6px 6px 126px
}
#footer .wrapper{
    width:100%;
    float:left;
    color:#fff;
    padding:40px 20px;
    background:#f60
}
#footer a{
    color:#fff
}
#footer a:hover{
    color:#fcddbc
}
#footer .section{
    padding:0 20px
}
#footer .main{
    text-align:center;
    margin:0 0 50px
}
#footer .main h1{
    font-size:30px;
    line-height:34px;
    margin:0 0 6px;
    position:relative
}
#footer .main h1 a{
    display:inline-block;
    padding:2px 10px;
    background:#f60;
    position:relative;
    z-index:1
}
#footer .main h1:after{
    content:'';
    width:280px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-1px 0 0 -140px;
    border-top:1px solid #f8a56d;
    z-index:0
}
#footer .main h1 a:hover{
    color:#fff
}
#footer .main h2{
    font-size:32px;
    line-height:37px;
    text-transform:uppercase;
    letter-spacing:-1px;
    margin:0 0 14px
}
#footer .main h3{
    font-size:26px;
    line-height:30px
}
#footer .main h3 a.quote_btn{
    display:inline-block;
    padding:6px 10px;
    margin:0 6px;
    border:1px solid #fff
}
#footer .main h3 a.quote_btn:hover{
    color:#f60;
    background:#fff
}
#footer .navigation{
    padding:0!important;
    margin:0 0 40px
}
#footer .nav{
    width:25%;
    float:left;
    padding:0 20px
}
#footer .nav h4{
    font-size:24px;
    line-height:28px;
    padding:7px 3px;
    border-top:3px solid #f8a56d;
    border-bottom:1px solid #f8a56d
}
#footer .nav ul{
    display:block;
    list-style:none
}
#footer .nav ul li{
    display:block;
    font-size:14px;
    border-bottom:1px solid #f8a56d
}
#footer .nav ul li a{
    display:block;
    padding:9px 3px
}
#mc_embed_signup form{
    text-align:center;
    margin:0 0 30px
}
.mc-field-group{
    display:inline-block
}
#mc_embed_signup input.email{
    font-family:inherit;
    font-size:15px;
    border:1px solid #fff;
    color:#fff;
    background-color:transparent;
    height:44px;
    padding:0 18px;
    display:inline-block;
    margin:0;
    width:350px;
    vertical-align:top;
    outline:none;
    -webkit-appearance:none;
    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
#mc_embed_signup input.email::-webkit-input-placeholder{
    color:#fff
}
#mc_embed_signup input.email:-moz-placeholder{
    color:#fff
}
#mc_embed_signup input.email::-moz-placeholder{
    color:#fff
}
#mc_embed_signup input.email:-ms-input-placeholder{
    color:#fff
}
#mc_embed_signup .clear{
    display:inline-block
}
#mc_embed_signup .button{
    font-family:'denseregular',sans-serif;
    font-size:24px;
    border:1px solid #fff;
    color:#f60;
    background-color:#fff;
    height:44px;
    line-height:44px;
    padding:0 18px;
    display:inline-block;
    margin:0;
    text-transform:uppercase;
    cursor:pointer;
    outline:none;
    -webkit-appearance:none;
    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
#mc_embed_signup .button:hover{
    color:#fff;
    background-color:transparent;
    cursor:pointer
}
#mc_embed_signup div#mce-responses{
    float:left;
    top:-1.4em;
    padding:0em .5em 0em .5em;
    overflow:hidden;
    width:90%;
    margin:0 5%;
    clear:both
}
#mc_embed_signup div.response{
    margin:1em 0;
    padding:1em .5em .5em 0;
    font-weight:700;
    float:left;
    top:-1.5em;
    z-index:1;
    width:80%
}
#mc_embed_signup #mce-error-response{
    display:none
}
#mc_embed_signup #mce-success-response{
    color:#529214;
    display:none
}
#mc_embed_signup label.error{
    display:block;
    float:none;
    width:auto;
    margin-left:1.05em;
    text-align:left;
    padding:.5em 0
}
#footer .meta{
    font-size:11px;
    font-style:italic;
    text-align:center
}
#footer .meta.social{
    margin:0 0 8px
}
#footer .meta.social a.fb-msg-btn{
    height:20px;
    display:inline-block;
    font-family:inherit;
    font-size:11px;
    font-weight:700;
    font-style:normal;
    color:#fff;
    text-align:center;
    line-height:20px;
    padding:0 6px;
    margin:0 2px;
    background-color:#4267b2;
    border:0;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    cursor:pointer;
    outline:none;
    vertical-align:top
}
#footer .meta.social a:hover.fb-msg-btn{
    background-color:#365899
}
#footer .meta span{
    display:inline-block;
    vertical-align:top;
    position:relative
}
#footer .meta span.copyright:after{
    content:'/';
    display:inline-block;
    padding:0 4px
}
.wpcf7{
    display:block
}
.wpcf7-form{
    width:100%;
    display:block;
    padding:20px 0 0;
    overflow:hidden;
    position:relative
}
.wpcf7-form fieldset{
    width:100%;
    float:left;
    display:block;
    border:0;
    border-bottom:1px dotted #ccc;
    padding:0 0 20px;
    margin:0 0 30px
}
.wpcf7-form div.form_field{
    width:100%;
    float:left;
    margin:0 0 20px;
    position:relative
}
.wpcf7-form div.form_field.odd{
    width:48%
}
.wpcf7-form div.form_field.even{
    width:48%;
    float:right
}
.wpcf7-form div.form_field label{
    display:block;
    font-size:17px;
    line-height:22px;
    margin:0 0 8px
}
.wpcf7-form div.form_field span{
    display:block;
    padding:10px 12px;
    background:#F8F8F8;
    border:1px solid #ddd
}
.wpcf7-form div.form_field.select span{
    padding:8px
}
.wpcf7-form div.form_field input,.wpcf7-form div.form_field select,.wpcf7-form div.form_field textarea{
    width:100%;
    display:block;
    font-family:inherit;
    color:inherit;
    font-size:13px;
    background:#F8F8F8;
    border:0;
    outline:none
}
.wpcf7-form div.form_field textarea{
    height:140px
}
.touch .wpcf7-form div.form_field select{
    -webkit-appearance:none;
    -webkit-border-radius:0;
    border-radius:0
}
.wpcf7-form div.submit{
    width:100%;
    float:left;
    clear:both;
    margin:5px 0 20px;
    position:relative
}
div.wpcf7 img.ajax-loader{
    position:absolute;
    top:50%;
    right:0;
    margin-top:-8px
}
.wpcf7-form div.submit input{
    float:left;
    clear:both;
    font-family:'denseregular',sans-serif;
    font-size:26px;
    color:#f60;
    text-transform:uppercase;
    text-decoration:none;
    padding:15px 20px;
    background:#fff;
    border:1px solid #f60;
    position:relative;
    cursor:pointer;
    outline:none;
    -webkit-appearance:none;
    -webkit-border-radius:0;
    border-radius:0
}
.wpcf7-form div.submit input:hover{
    color:#fff;
    background:#f60
}
div.wpcf7-response-output{
    clear:both;
    color:#fff!important;
    line-height:22px;
    border:1px solid #ff6600!important;
    background:#f60;
    margin:0 0 20px!important;
    padding:25px 20px!important;
    color:inherit;
    text-align:center
}
div.wpcf7-validation-errors{
    color:#fff;
    border:1px solid #ff0000!important;
    background:red
}
span.wpcf7-not-valid-tip{
    width:100%!important;
    height:1px;
    max-width:100%;
    position:absolute;
    overflow:hidden;
    background:transparent!important;
    border:0!important;
    border-top:1px solid #ff0000!important;
    text-indent:-9000px;
    top:-1px!important;
    left:0!important;
    right:0!important;
    bottom:inherit!important;
    padding:0!important
}
.content-block img{
    display:block;
    width:auto;
    max-width:100%;
    height:auto
}
.content-block p img{
    padding:0;
    max-width:100%
}
.content-block .aligncenter{
    display:block;
    margin:0 auto
}
.content-block .alignleft{
    display:inline;
    float:left;
    margin:0 25px 25px 0
}
.content-block .alignright{
    display:inline;
    float:right;
    margin:0 0 25px 25px
}
.content-block .wp-caption{
    width:auto!important;
    max-width:100%;
    color:#fff;
    text-align:center;
    background-color:#f60;
    margin-bottom:20px
}
.content-block .wp-caption p.wp-caption-text{
    display:block;
    font-size:11px;
    line-height:14px;
    padding:10px 12px;
    margin:0
}
.content-block .gallery{
    display:block;
    padding:5px 0;
    margin:0 0 25px -5px;
    overflow:hidden
}
.content-block .gallery .gallery_item{
    width:12.5%;
    float:left
}
.content-block .gallery .gallery_item a{
    display:block;
    margin:5px;
    border:3px solid #ddd
}
.content-block .gallery .gallery_item a img{
    display:block;
    width:auto;
    max-width:100%;
    height:auto
}
.content-block embed,.content-block iframe,.content-block object{
    max-width:100%
}
.content-block video{
    max-width:100%;
    height:auto
}
.post .content-block a{
    color:#f60
}
.post .content-block a:hover{
    text-decoration:underline
}
.content-block a.btn,.content-block a.ddownload-link{
    display:inline-block;
    font-weight:700;
    color:#f60;
    text-transform:uppercase;
    text-decoration:none;
    padding:12px 18px;
    margin:0 8px 12px 0;
    background:#fff;
    border:1px solid #f60
}
.content-block a:hover.btn,.content-block a:hover.ddownload-link{
    color:#fff;
    background:#f60;
    text-decoration:none
}
.content-block blockquote{
    display:block;
    padding:15px 0
}
.content-block blockquote h1:first-child,.content-block blockquote h2:first-child,.content-block blockquote h3:first-child,.content-block blockquote h4:first-child,.content-block blockquote h5:first-child{
    padding-top:0
}
.content-block blockquote:last-child{
    padding-bottom:0
}
.content-block h1,.content-block h2,.content-block h3,.content-block h4,.content-block h5{
    font-size:100%;
    padding:10px 0
}
.content-block h1.bold,.content-block h2.bold,.content-block h3.bold,.content-block h4.bold,.content-block h5.bold{
     font-weight: bold !important;
}
.content-block h1{
    font-size:30px;
    line-height:38px
}
.content-block h2{
    font-size:26px;
    line-height:34px
}
.post .content-block h2{
    margin-bottom:15px;
    border-bottom:2px dotted #ddd
}
.content-block h3{
    font-size:20px;
    line-height:28px
}
.content-block h4{
    font-size:18px;
    line-height:26px
}
.content-block h5{
    font-size:15px;
    line-height:23px
}
.entry .content-block h1,.entry .content-block h2,.entry .content-block h3,.entry .content-block h4,.entry .content-block h5{
    font-size:100%;
    font-weight:400;
    padding:0;
    margin:0 0 10px
}
.entry .content-block h1{
    font-size:34px;
    line-height:42px
}
.entry .content-block h2{
    font-size:30px;
    line-height:38px
}
.entry .content-block h3{
    font-size:24px;
    line-height:30px
}
.entry .content-block h4{
    font-size:21px;
    line-height:29px
}
.entry .content-block h5{
    font-size:18px;
    line-height:24px
}
.content-block ul,.content-block ol{
    padding:0 0 20px 30px
}
.content-block ul ul,.content-block ol ol{
    padding: 10px 0 0 20px
}
.content-block ul{
    list-style:disc
}
.content-block ul li,.content-block ol li{
    padding:0 0 5px;
    line-height:18px
}
.content-block ul li p,.content-block ol li p{
    margin:0 0 12px
}
#modal,#mask{
    display:none;
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:9999999
}
#mask{
    background:#000
}
.modal_window{
    display:none;
    position:absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    margin:0 0 45px;
    z-index:99999999
}
.controls{
    display:none;
    width:100%;
    height:100%;
    position:relative;
    z-index:99999999
}
.controls .wrap{
    width:100%;
    display:block;
    position:absolute;
    bottom:-45px;
    text-align:center
}
.controls .btns{
    width:auto;
    display:inline-block;
    margin:0 auto
}
.controls .btns span{
    width:auto;
    height:30px;
    display:inline-block;
    font-size:16px;
    color:#999;
    line-height:30px;
    background:#fff;
    border-right:1px solid #000;
    vertical-align:top
}
.controls .btns span.prev_btn,.controls .btns span.next_btn{
    font-size:21px;
    line-height:28px
}
.controls .btns span.next_btn{
    border-right:0
}
.controls .btns .disabled{
    color:#aaa;
    padding:0 12px
}
.controls .btns span a{
    display:block;
    color:#333;
    padding:0 12px;
    cursor:pointer
}
.controls .btns span a:hover{
    color:#f60;
    text-decoration:none
}
.syntaxhighlighter .lines.no-wrap{
    border:1px solid #ddd!important
}
.syntaxhighlighter .line .content{
    border-left:3px solid #ff6600!important
}
.syntaxhighlighter .line.alt2{
    background:#f2f2f2!important
}
.syntaxhighlighter .line .number{
    font-weight:bold!important;
    color:#ff6600!important
}
.display-on-mobile-only{ display:none; }