body {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #818181;
    line-height: 22px;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
}
* {
    outline: 0!important;
    -webkit-touch-callout: none;
    transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
}
a {text-decoration: none}
h1,h2,h3,h4 { font-family: 'Roboto', sans-serif; }
h2 { color: #3d3d3d; font-size: 30px; line-height: 35px; font-weight: 700; text-align: center; margin: 0 0 108px 0}
h2 span { font-weight: 300; display: block;}
h3 { font-weight: 300; text-align: center; color: #fff; font-size: 30px; line-height: 36px; margin: 0px;}
h1{ font-size: 27px; text-transform: uppercase; font-weight: 100; line-height: 34px; }
h4 { text-transform: uppercase; font-size: 14px; color: #3d3d3d; font-weight: 700; line-height: 20px; margin: 0 0 9px 0;}
p { font-size: 14px; line-height: 21px; font-weight: 400; color: #3d3d3d;}
section{ width: 100%; clear: both; display: table; }
.gray-bg { padding: 129px 0 117px 0; background-color: #f7f7f7;}
.home { background-color: #fff; text-align: center; padding: 10px 0; }
.divider-gray { height: 4px; width: 150px; background-color: #444444; margin: 45px auto; }
.design-part { width: 25%; float: left; }
.bg-gray { background-color: #000; }
.bg-dark-gray { background-color: #000; }
.bg-black { background-color: #000; }
.bg-violet { background-color: #000; }
.container { margin: 0 auto; width: 1903px;}
.container-center { width: 960px; margin: 0 auto;}
.container-width { width: 1076px; margin: 0 auto;}
.design .container img { max-width: 100%;  }
.bg-gray:hover img { opacity: 1;}
.bg-dark-gray:hover img { opacity: 1;}
.bg-black:hover img { opacity: 1;}
.bg-violet:hover img { opacity: 1;}
.design-part { position: relative; top:0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
.text-area { z-index: 2; position: absolute; bottom: 126px; width: 100%; font-weight: 400; text-align: center; color: #fff; font-size: 20px; text-transform: uppercase;}
.text-area a { color: #fff;}
.text-area span { width: 100%; float: left;}
.text-area a.btn { background-color: #000; color: #fff; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; font-size: 15px; padding: 12px 30px 11px; display: inline-block; text-transform: uppercase; text-decoration: none; clear: both; margin: 34px 0 0 0;}
.design-part:hover a.btn { background-color: #fff; color: #000;}
.design-part .bg-color { background-color: #000; opacity: 0.5; position: absolute; height: 100%; width: 100%; z-index: 99;}
.design-part:hover .bg-color { opacity: 0; z-index: 1;}
.design-part:hover { top:-40px; -moz-transform: scale(0.97); -webkit-transform: scale(0.97); -o-transform: scale(0.97); -ms-transform: scale(0.97); transform: scale(0.97); }
.text-box { padding: 148px 0 152px; background:url(../images/graphics-bg.jpg) no-repeat;}
.blog-area { padding: 118px 0; }
.col-6 { width: 45%; float: left; margin-bottom: 30px; min-height: 150px;}
.col-6:nth-child(2n) { float: right;}
.col-6.last { min-height: inherit; margin-bottom: 0px;}
.col-1 { width: 19%; float: left; margin-top: 40px;}
.col-2 { width: 81%; float: left;}
.col-box { float: left; clear: both; width: 100%; text-align: center;}
.col-3 { width:30.7%; margin: 0 3.4% 0 0; display: inline-block; vertical-align: top;   }
.col-3 img { border: 1px solid #d9d9d9; width:99.8%; margin: 0 0 18px 0; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; background-color: #000}
.col-3:hover img { border: 1px solid #727272; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; opacity: 0.6 }
.col-3:hover a.btn { background-color: #fff; border: 1px solid #000; color: #000; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;}
.col-3.last { margin-right: 0px;}
.col-3 .title { display: block; margin-bottom: 17px;}
.col-3 .title a { color: #000000; font-size: 14px; font-weight: 500; text-decoration: none; text-transform: uppercase; }
.col-3 .title a:hover { text-decoration: underline;}
.col-3 a.btn { background-color: #000; border: 1px solid #000; color: #fff; text-transform: uppercase; font-size: 12px; font-weight: 700; padding: 7px 21px 6px; text-decoration: none; display: inline-block; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;}
.col-3 a.btn:hover { background-color: #fff; border: 1px solid #000; color: #000;}
.graphics { text-align: center; width: 100%; display: block; margin-bottom: 32px;}
.footer { text-align: center; padding: 104px 0 95px;}
.highlight-button-white-border{ border: 4px solid #fff; background-color: #fff; font-size: 22px; padding: 20px 30px; color: #000; font-weight: 600; text-transform: uppercase; letter-spacing: 2px}
.highlight-button-white-border:hover { border: 4px solid #fff; background-color: transparent; color: #fff}
.buy { padding: 130px 0; background: #000; text-align: center}
.buy h2 { margin: 0 0 70px; text-transform: uppercase; color: #fff; letter-spacing: 2px}

@media (max-width: 1902px) {
    .container { width: 100%;}
}
@media (max-width: 1400px) {
    .text-area { bottom: 20px; }
    .text-area a.btn { margin: 20px 0 0 0; }
}
@media (max-width: 1100px) {
    .home { padding: 70px 0; }
    .design-part:hover { top:-40px;}
    .container-width { width: 96%; }
    .text-area { bottom: 15px; }
    .text-area a.btn { margin: 15px 0 0 0; }
}
@media (max-width: 997px) {
    .design-part { width: 50%; }
    .container-center { width: 94%;}
    .design-part:hover { top:0; -moz-transform: none; -webkit-transform: none; -o-transform: none; -ms-transform: none; transform: none;  transition-duration: 2s;}
    .blog-area { padding: 70px 0; }
    h2 { margin: 0 0 70px 0; }
    .text-box { padding: 88px 0 92px; }
    .gray-bg { padding: 79px 0 67px 0; }
    .footer { padding: 70px 0 75px; }
    .text-area { bottom: 56px; }
    .text-area a.btn { margin: 34px 0 0 0; }

}
@media (max-width: 900px) {
    .col-6 br { display: none;}
    .container-width { width: 98%; }
    .col-3 { margin: 0 3% 0 0; }
}
@media (max-width: 800px) {
    h4 { font-size: 13px; }
    p { font-size: 13px; line-height: 18px;}
    .col-6 { width: 47%; min-height: 135px;  }
    .col-6 p { width: 99%;}
    .col-1 { margin-top: 38px; }
    .text-area a.btn { margin: 24px 0 0 0; }
    .text-area { bottom: 46px; }
}
@media (max-width: 767px) {
    .col-6 { width: 100%; min-height: inherit;}
    .col-1 { width: 14%; }
    .col-2 { width: 85%; }
    .col-6.last { margin-bottom: 30px;}
    .col-6:last-child { margin-bottom: 0px;}
    .text-box { padding: 45px 0 50px; }
    .home { padding: 40px 0; }
    .col-3 { width: 100%; margin: 0 0 50px 0;}
    .container-width { width: 96%; }
    .blog-area { padding: 40px 0; }
    h2 { margin: 0 0 40px 0; }
    .col-3.last { margin-bottom: 0px;}
    .gray-bg { padding: 49px 0 37px 0; }
    .footer { padding: 40px 0 45px; }
    .text-area { bottom: 25px; }
    .text-area a.btn { margin: 25px 0 0; }
    .container-center { width: 86%;}
    .xs-display-none {display: none}
}
@media (max-width: 600px) {
    .col-1 { width: 20%; }
    .col-2 { width: 80%; }
    .col-6 p { width: 100%; }
}
@media (max-width: 480px) {
    .logo { width: 42%; margin: 0 auto;}
    .logo img { width: 100%;}
    .design-part { width: 100%; }
    .footer img { width: 30%;}
}
@media (max-width: 420px) {
    .col-1 { margin-top: 6px; }
    h3 { font-size: 22px; line-height: 30px; }
    .text-box { padding: 25px 0; }
    .gray-bg { padding: 30px 0; }
    .home { padding: 20px 0; }
    h2 { font-size: 24px; line-height: 30px; }
    .blog-area { padding: 30px 0; }
    .graphics { margin:0 auto 15px; width: 30%; }
    .graphics img { width: 100%;}
    h2 { margin: 0 0 25px 0; }
    .col-3 img { margin: 0 0 10px 0; }
    .col-3 .title { margin-bottom: 11px; }
    .col-6 { margin-bottom: 20px; }
    .footer { padding: 20px 0 20px; }
    .text-area { bottom: 25px; }
    .text-area a.btn { margin: 20px 0 0 0; }

}

@media (max-width: 360px) {
    .col-1 { width: 22%; }
    .col-2 { width: 78%; }
}

.buy-theme {position:fixed; top:120px; right: -156px; background: url("../../default/images/buy-theme.png") no-repeat 14px center rgba(50,50,50,.8); z-index: 10; transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-duration: .2s; -moz-transition-duration: .2s; -webkit-transition-duration: .2s; -o-transition-duration: .2s;}
.buy-theme:hover, .quick-question:hover {right: -26px}
.buy-theme span, .quick-question span {padding:0 28px; position: relative; top:0; opacity: 0}
.buy-theme:hover span, .quick-question:hover span {opacity: 1}
.buy-theme a, .quick-question a { color: #fff; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; padding:8px 15px; display: block }
.quick-question {position:fixed; top:170px; right: -153px; background: url("../../default/images/quick-question.png") no-repeat 14px center rgba(50,50,50,.8); z-index: 10; transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-duration: .2s; -moz-transition-duration: .2s; -webkit-transition-duration: .2s; -o-transition-duration: .2s;}