/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale}

/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s,
samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0; padding: 0; border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; outline: 0; vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, nav, section {display: block}
ol, ul {list-style: none}
table {border-collapse: separate; border-spacing: 0}
caption, th, td {font-weight: 400; text-align: left}
blockquote:before, blockquote:after, q:before, q:after {content: ''}
blockquote, q {quotes: '' ''}
a:focus, a:hover, a:active {outline: 0}
a img {border: 0}
em {font-style: italic}
u {text-decoration: underline}
strong {font-family: inherit; font-weight: 700}
.clear {clear: both}

/* General */
* {margin: 0; padding: 0}
*, *:after, *:before {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box}

html {height: 100%!important; min-height: 100%!important; font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%}
body {
    background-color: #ffffff; width: 100%; min-height: 100%; margin: 0; padding: 0; color: #666666; font: 16px/24px 'Open Sans', sans-serif; font-weight: 400; text-rendering: auto;
    overflow-x: hidden; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-overflow-scrolling: touch
}
.wrapper {min-width: 200px; max-width: 1080px; margin: 0 auto; padding-right: 10px; padding-left: 10px}
.row {margin-right: -10px; margin-left: -10px}
.boxBeforeAfter:before, .boxBeforeAfter:after {content: ''; display: block; clear: both}

/* col */
.dNone {display: none} .dBlock {display: block} .dIBlock {display: inline-block}
.fRight {float: right} .fLeft {float: left} .clearLeft {clear: left}
.col-sm-1 {width: 8.333333333333332%} .col-sm-2 {width: 16.666666666666664%} .col-sm-3 {width: 25%} .col-sm-4 {width: 33.33333333333333%}
.col-sm-5 {width: 41.66666666666667%} .col-sm-6 {width: 50%} .col-sm-7 {width: 58.333333333333336%} .col-sm-8 {width: 66.66666666666666%}
.col-sm-9 {width: 75%} .col-sm-10 {width: 83.33333333333334%} .col-sm-11 {width: 91.66666666666666%} .col-sm-12 {width: 100%}
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {padding-right: 10px; padding-left: 10px}

/* headers */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {margin: 0 0 30px; padding: 0; color: #333333; font-family: 'Roboto Slab', sans-serif; font-style: normal; font-weight: 700; line-height: 1.2; text-transform: uppercase}
h1, .h1 {font-size: 28px} h2, .h2 {font-size: 24px} h3, .h3 {font-size: 20px} h4, .h4 {font-size: 16px} h5, .h5 {font-size: 12px} h6, .h6 {font-size: 8px}

/* color & links */
a {color: #379505; text-decoration: underline; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; transition: all 0.3s ease-in}
.device-notouch a:hover {color: #000000; text-decoration: none}
.colorGreen {color: #379505}

/* header */
#header {background-color: transparent; width: 100%; position: relative; top: 0; left: 0; z-index: 99}
    #dataBlock {background-color: #ffffff; background-color: rgba(255,255,255,0.95)}
        #dataBlock .wrapper {min-height: 120px}
            #logoBox {display: block; padding: 0 10px; line-height: 0; position: relative; top: 10px}
                #logoBox img {width: 182px; height: 100px}
            #contactBox {padding: 0 10px}
                #contactBox .box {float: left; display: block; margin: 30px 0 0 40px; padding-top: 7px}
                    #contactBox .fa {background-color: #ffffff; display: inline-block; width: 45px; height: 45px; margin-right: 10px; border: 1px solid #379505; color: #379505; overflow: hidden; position: relative; top: -7px; border-radius: 50%}
                    #contactBox .fb .fa {background-color: #3b5998; border-color: #3b5998; color: #ffffff}
                    .device-notouch #contactBox .fb:hover .fa {background-color: #8b9dc3; border-color: #8b9dc3; color: #ffffff}
                    #contactBox .menu .fa {background-color: #333333; border-color: #333333; color: #ffffff}
                    .device-notouch #contactBox .menu:hover .fa {background-color: #379505; border-color: #379505; color: #ffffff}
                        #contactBox .fa:before {display: block; width: 45px; height: 45px; font-size: 1.5em; line-height: 45px; text-align: center; cursor: pointer; position: relative}
                        #contactBox .phone .fa:before {content: '\f095'; top: 1px; left: -1px}
                        #contactBox .email .fa:before {content: '\f0e0'; left: -1px}
                        #contactBox .fb .fa:before {content: '\f09a'; left: -1px}
                        #contactBox .menu .fa:before {content: '\f0c9'; left: -1px}
                        .openMenu #contactBox .menu .fa:before {content: '\f00d'; top: -1px}
                    #contactBox .box span {display: inline-block; color: #666666; line-height: 1; vertical-align: top}
                    #contactBox .box span strong {display: block; margin-bottom: 5px; font-weight: 700}
    #navBlock {background-color: #1f5203; background-color: rgba(31,82,3,0.95)}
        #navBlock .wrapper {min-height: 60px; padding-right: 0; padding-left: 0}
            #navBlock ul {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; min-height: 60px; margin: 0 -10px; padding: 0; text-align: center}
                #navBlock ul li {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 10px; padding: 0; line-height: 1.2}
                    #navBlock ul li a {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 10px; color: rgba(255,255,255,0.6); text-decoration: none}
                    #navBlock ul li a.active {background-color: #379505; color: #ffffff; cursor: pointer}
                    .device-notouch #navBlock ul li a:not(.active):hover {color: #ffffff}
                #navBlock ul li.otthonvirag {margin-left: auto}
                    #navBlock ul li.otthonvirag a {background-color: #ffaa17; color: #ffffff; font-weight: 600; text-transform: uppercase}

/* fixed header pc */
@media (min-width: 993px){
    .device-notouch #header {position: fixed}
        .device-notouch #header * {-webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; transition: all 0.3s ease-in}
        .device-notouch .fixed-header #dataBlock {background-color: #ffffff}
            .device-notouch .fixed-header #dataBlock .wrapper {min-height: 60px}
                .device-notouch .fixed-header #logoBox {top: 10px}
                    .device-notouch .fixed-header #logoBox img {width: 72px; height: 40px}
        .device-notouch .fixed-header #contactBox .box {margin-top: 4px; line-height: 1}
            .device-notouch .fixed-header #contactBox .fa {top: -4px}
        .device-notouch .fixed-header #navBlock {background-color: #1f5203}
            .device-notouch .fixed-header #navBlock .wrapper, .device-notouch .fixed-header #navBlock ul {min-height: 40px}
}

/* slider */
#slider .box {background-color: #ffffff; background-position: center center; background-repeat: no-repeat; width: 100%; height: 640px}
@media (min-width: 993px){
    #slider .box {background-size: cover}
}

/* content */
#content {padding: 60px 0; position: relative; z-index: 5}
    #content p {margin: 0 0 20px; padding: 0; line-height: inherit}
    #content ul {list-style: outside disc none; margin: 0 0 30px; padding: 0 0 0 20px}
    /* slogen */
    #slogen {background-color: rgba(34,34,34,0.9); width: 100%; max-width: 560px; margin: -160px auto 45px; padding: 5px}
        #slogen h5 {margin: 0; padding: 20px; border: 1px solid #ffffff; border: 1px solid rgba(255,255,255,0.2); color: #ffffff; color: rgba(255,255,255,0.7); font-size: 16px; font-weight: 400; line-height: 26px; text-align: center}
    /* #breadcrumb */
    #breadcrumb {margin: -20px 0 20px; font-size: 12px}
        #breadcrumb a {text-decoration: none}
        #breadcrumb .sep:before {content: '\f105'; display: inline-block; padding: 0 10px; font: normal normal normal 14px/1 FontAwesome}
    /* about */
    .row.about .col-sm-5 img, .row.about .col-sm-7 img {max-width: 100%}
    /* listView */
    .listView {}
        .listView .dataOuter {margin-bottom: 20px}
        .listView .dataOuter.col-sm-6:nth-child(2n+1) {clear: left}
            .listView .dataInner {padding: 20px; border: 1px solid rgba(0,0,0,0.05); border-radius: 5px; -webkit-transition: box-shadow 0.3s ease-in; -moz-transition: box-shadow 0.3s ease-in; transition: box-shadow 0.3s ease-in}
            .device-notouch .listView .dataInner:hover {-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.1); box-shadow: 0 0 10px 0 rgba(0,0,0,0.1)}
                .listView .dataInner header {}
                    .listView .dataInner header h2 {margin-bottom: 15px}
                    .listView.references:not(.category) .dataInner header h2 {min-height: 40px}
                        .listView .dataInner header h2 a {color: #333333; text-decoration: none}
                        .device-notouch .listView .dataInner header h2 a:hover {color: #379505}
                    .listView .dataInner header .date, .listView .dataInner header .desc {display: block; margin: -10px 0 10px; font-size: 12px; font-style: italic}
                .listView .dataInner img {max-width: 100%; height: auto; margin-bottom: 15px}
                .listView .dataInner .dataDesc {margin-bottom: 20px}
                .listView .dataInner .dataDetails {text-align: right}
    /* fullView */
    .fullView .dataBlock {padding-bottom: 20px}
    .fullView.references .picBox {margin-bottom: 20px}
    .fullView.references .picBox:nth-child(4n+1) {clear: left}
        .fullView.references .picBox a {display: block; width: 100%; padding: 5px; border: 1px solid rgba(0,0,0,.05); line-height: 0; text-decoration: none; border-radius: 5px; -webkit-transition: box-shadow 0.3s ease-in; -moz-transition: box-shadow 0.3s ease-in; transition: box-shadow 0.3s ease-in}
        .device-notouch .fullView.references .picBox a:hover {-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.1); box-shadow: 0 0 10px 0 rgba(0,0,0,0.1)}
            .fullView.references .picBox a img {max-width: 100%; height: auto; -webkit-transition: opacity 0.3s ease-in; -moz-transition: opacity 0.3s ease-in; transition: opacity 0.3s ease-in}
            .device-notouch .fullView.references .picBox a:hover img {opacity: 0.85}
    /* pic */
    .pic {max-width: 100%; padding: 5px; border: 1px solid rgba(0,0,0,0.1); border-radius: 5px}
    .pic.fright {float: right; margin: 0 0 20px 20px}
    /* dataBack */
    .dataBack {padding-top: 20px; border-top: 1px solid rgba(0,0,0,0.1)}
        .dataBack .btn.small {background-color: #ffffff!important; color: #333333; text-transform: none; position: relative}
        .dataBack .btn.small:before {content: '\f100'; display: block; font: normal normal normal 14px/1 FontAwesome; position: absolute; top: 15px; left: 7px}
        .device-notouch .dataBack .btn.small:hover {color: #ff4444}

/* latestWork */
#latestWork {background: transparent url('../gfx/bg-latestwork.jpg') repeat 0 0; padding: 30px 0}
    #latestWork .h1 {text-align: center}
    #latestWork .row a {display: block; float: left; width: 100%; max-width: 115px; height: 95px; margin: 0 10px; padding: 0; text-decoration: none}
        #latestWork .row a img {width: 100%; height: auto}
    .device-notouch #latestWork .row a:hover {opacity: 0.75}
    #latestWork .btnBlock {padding-top: 10px; text-align: center}
    #latestWork .btnBlock .btn {}

/* footer */
#footer {background-color: #222222; color: #a2a2a2; font-size: 12px; line-height: 60px}
    #footer .wrapper {min-height: 60px}
        #footer .copyright {float: left}
        #footer .developed {float: right; color: #7a7a7a}
            #footer .developed a {color: #7a7a7a; text-decoration: none}
            .device-notouch #footer .developed a:hover {color: #ffffff}

/* form */
form {width: 100%; max-width: 770px; margin: 0 auto}
    /* input, textarea */
    input:not(.btn), textarea {
        background-color: #ffffff; min-width: 220px; height: 52px; margin: 0; padding: 0 10px; border: 1px solid rgba(0,0,0,.2); color: inherit; font-family: inherit; font-size: inherit; font-weight: 400; line-height: 52px;
        outline: none; resize: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 20px; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; transition: all 0.3s ease-in
    }
    textarea {height: 220px; padding: 10px; line-height: 1.2}
    .device-notouch input:not(.btn):focus, .device-notouch textarea:focus {border-color: rgba(0,0,0,.4); color: #333333}
    /* btn */
    .btn {
        background-color: #379505; display: inline-block; min-width: 220px; height: 52px; padding: 0 20px; border: none; color: #ffffff; font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: 0.05em; line-height: 54px;
        text-align: center; text-decoration: none; text-transform: uppercase; outline: none; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 20px;
        -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; transition: all 0.3s ease-in
    }
    .btn.small {min-width: inherit; height: 42px; font-size: 14px; font-weight: 400; line-height: 44px; border-radius: 10px}
    .device-notouch .btn:hover {background-color: #1f5203; color: #ffffff}
    /* formGroup */
    .formGroup {margin-bottom: 15px}
        .formGroup label {display: inline-block; width: 160px; line-height: 52px; vertical-align: top}
        .formGroup input:not(.btn), .formGroup textarea {width: -webkit-calc(100% - 165px); width: -moz-calc(100% - 165px); width: calc(100% - 165px)}
    .formGroup.btnBlock {padding-top: 15px; text-align: center}
    .formGroup .error {border-color: #ff4444}
/* alert */
.alert {margin-bottom: 30px; font-size: 14px; line-height: 20px}
.alert h2, .alert p {margin-bottom: 10px!important}
.alert *:last-child {margin-bottom: 0; padding-bottom: 0}
.alert.danger {color: #ff4444}
.alert.danger h2, .alert.danger p {color: #ff4444}
.alert.success {color: #47993f}
.alert.success h2, .alert.success p {color: #47993f}

@media (max-width: 992px){
    #dataBlock .wrapper {min-height: inherit}
        #dataBlock .wrapper > .row {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center}
            #logoBox {padding: 10px; top: 0}
                #logoBox img {width: 112px; height: 62px}
            #contactBox {margin-left: auto}
                #contactBox .box {display: inline-block; float: none; margin: 0 10px; padding: 0; line-height: 0; vertical-align: top}
                    #contactBox .box .fa {top: 0; margin: 0}
                    #contactBox .box span {display: none}
    #navBlock {width: 100vw; height: auto; opacity: 0; position: absolute; top: auto; bottom: 100%; left: 0; z-index: 111; -webkit-transition: all 0.5s cubic-bezier(0.4,0,0.2,1); -moz-transition: all 0.5s cubic-bezier(0.4,0,0.2,1); transition: all 0.5s cubic-bezier(0.4,0,0.2,1)}
    .openMenu #navBlock {opacity: 1; top: 100%; bottom: auto}
        #navBlock .wrapper {padding: 0}
            #navBlock ul li {width: 100%}
                #navBlock ul li a {-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; margin: 0; padding: 20px 10px; border-bottom: 1px solid rgba(255,255,255,0.15)}
                #navBlock ul li a.active {background-color: transparent; color: #ffffff; font-weight: 600}
                #navBlock ul li:last-child a {border: none}
    #slider {height: 440px; overflow: hidden}
        #slider .box {height: 440px}
    #content .row.about > div {width: 100%}
        .row.about img {display: block; max-width: 100%; margin: 0 auto 20px}
    #latestWork .row {display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center}
        #latestWork .row a {-webkit-box-flex: 0; -ms-flex: 0 0 calc(25% - 20px); flex: 0 0 calc(25% - 20px); width: calc(25% - 20px); max-width: calc(25% - 20px); height: auto; margin: 10px; line-height: 0; text-align: center}
            #latestWork .row a img {max-width: 115px}
    #footer .copyright {float: none; width: 100%; padding: 20px 0 17px; border-bottom: 1px solid rgba(255,255,255,0.15); line-height: 24px; text-align: center}
    #footer .developed {float: none; width: 100%; text-align: center}
    h1 {text-align: center}
}
@media (max-width: 768px){
    #slider {height: 340px}
        #slider .box {height: 340px}
}
@media (max-width: 576px){
    #logoBox {width: 100%; margin-bottom: 10px; text-align: center; border-bottom: 1px solid rgba(0,0,0,0.1)}
    #contactBox {margin-right: auto; margin-bottom: 10px}
    #latestWork .row a {-ms-flex: 0 0 calc(33.33334% - 20px); flex: 0 0 calc(33.33334% - 20px); width: calc(33.33334% - 20px); max-width: calc(33.33334% - 20px)}
    .listView .dataOuter {float: none; width: 100%}
    .listView .dataOuter.col-sm-6:nth-child(2n+1) {clear: inherit}
    .fullView.references .picBox {width: 50%}
    .fullView.references .picBox:nth-child(4n+1) {clear: inherit}
    .fullView.references .picBox:nth-child(2n+1) {clear: left}
    .btn.small {height: auto; min-height: 32px; padding: 11px 20px; line-height: 1.2}
}
@media (max-width: 414px){
    #latestWork .row a {-ms-flex: 0 0 calc(50% - 20px); flex: 0 0 calc(50% - 20px); width: calc(50% - 20px); max-width: calc(50% - 20px)}
    .fullView.references .picBox {width: 100%}
    .fullView.references .picBox:nth-child(2n+1) {clear: inherit}
    .fullView.references .picBox:nth-child(1n+1) {clear: left}
}