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,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,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{margin:0;padding:0;border:0;font-size:100%;font:inherit; font-family: 'Raleway', sans-serif; vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
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}

@font-face {
    font-family: 'bebas_neue';
    src: url('../bebasneue-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

a {text-decoration: none}
body {padding:0; margin: 0;min-width: 320px;font-family: 'Raleway', sans-serif;}
section .sectionHeader {font-family: 'bebas_neue';  font-size: 35px;color: #f00; text-align: center; margin: 20px 0}

.sgSite {height: 100%;}
.sgSite body {min-height: 100%;}

/* HEADER */
header {background: #000; display: flex; justify-content: space-between; align-items: center; position: fixed;top:0; width: 100%; z-index: 10; top:-150px; transition: top 0.5s }
.load header {top:0px}
header #logo {margin: 10px;}
header nav {font-family: 'bebas_neue', sans-serif; align-items: center;position: absolute; right: -100%; top:60px; background: #000;transition: right 0.5s ease}
header nav.show {right: 0px;}
header nav a {font-family: inherit; display: block; font-size: 24px; color:#fff;margin:15px;background:#000;position:relative; overflow:hidden;transition:color 0.3s}
header nav a::after {display:block; position:absolute;background:#f00;content:" "; width:10px;height:10px;border-radius:50%;top:-100px; margin:auto; left: 0; right: 0; transition: top 0.2s ease-out}
header nav a.selected {color:#f00}
header nav a:hover::after,header nav a.selected::after {top:-10px;}
header .burger {display: inline-block;margin-right: 10px; color: #fff; font-size: 45px;position: relative; transform: scale(1.4, 1.0); cursor:pointer}
.headspace {60px;width:100%;background: #000;transition: height 1.5s 1s}
.load .headspace {height:60px}

@media only screen and (min-width: 480px) {
}
@media only screen and (min-width: 768px) {
    header .burger {display: none}
    header nav {position: relative;top:0; right: 0px}
    header nav a {display: inline; font-size: 20px; margin:15px 6px}
    header #logo {margin: 30px;}
    .load .headspace {height:100px}
}
@media only screen and (min-width: 1280px) {
header nav a {font-size: 28px;margin:15px;}
}

/* FOOTER */
footer {background: rgba(0,0,0,0.7); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;position: relative}
footer h4 {font-family: 'bebas_neue', sans-serif; color:#fff; opacity: 0.5; font-size:25px }
footer .clientList {padding:40px  20px;max-width: 100%;box-sizing: border-box;}
footer .clientList h4 {display:inline-block;max-width: 70px; position: absolute;margin-top: 8px}
footer #clientList { width:calc(100% - 70px);margin-left: 70px;}
footer .clientList .item {margin:0 ; padding: 0px}
footer .clientList .item img {width: 80%}
footer .adressList {background: rgba(0,0,0,0.3); padding:3%; width: 100%; text-align: center}
footer .adressList li {display:inline-block;vertical-align: top; width: 100%; text-align: center;margin: 6% 2%; font-family: 'bebas_neue', sans-serif; color:#fff; font-size: 15px;line-height: 20px}
footer .adressList li h4 {margin-bottom:15px}

@media only screen and (min-width: 480px) {
    footer .adressList li {width:45%;text-align: left}
    footer .adressList li:nth-child(2) {width:45%;text-align: right}
}
@media only screen and (min-width: 768px) {
    footer {flex-wrap: nowrap;}
    footer h4 {font-size: 20px}
    footer .clientList {width:calc(100% - 470px); padding: 0 2%;}
    footer .clientList h4 {margin-top: 12px;}
    footer .adressList {padding: 0 2%; text-align: left;width: 460px;}
    footer .adressList li { font-size: 14px}
}
@media only screen and (min-width: 1280px) {
    footer h4 {font-size: 25px}
    footer .clientList {width:calc(100% - 560px); }
    footer .adressList {width: 560px;}
    footer .adressList li { font-size: 15px}
}

/* SG */
.sg_cloud {background: url(../img/bg_clear.jpg) #000 !important;}
.sg {background: url(../img/bg_logo.png) #000;width:100%; min-height:calc(100vh - 240px);padding-top: 10px;display: flex;vertical-align: middle;align-items: center; justify-content: center;}
.sg .sgCircle {max-width: 800px;padding: 20px 0 0; height:100%; margin:0 auto; display: flex; justify-content: space-around ;align-items: center; flex-wrap: wrap;}
.sg .item { max-width: 50%; flex: 1 0 50%; text-align: center; box-sizing: border-box; font-family: 'bebas_neue'; margin-bottom: 20px }
.sg .circle {font-family: inherit; cursor:pointer;transform:scale(0.1); display: inline-block;border-radius: 50%;width: 130px;height: 130px;padding: 5px;text-align: center;box-sizing: content-box;background:#000; font-family: 'bebas_neue'; font-size: 30px; text-align:center; color:#fff; border: 3px solid transparent; z-index: 2; position: relative;box-shadow:0px 0px 30px #333; transition:background 0.3s ease, transform 0.6s ease}
.sg video {position: fixed; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 0;top:0}
.sg .bgSG {position: fixed; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 0;top:0;opacity:0;transition: all 2s}
.sg .bgSG.show {opacity:1}
.sg .circle.circle1 {transition-delay: 0.2s;}
.sg .circle.circle2 {transition-delay: 0.4s;}
.sg .circle.circle3 {transition-delay: 0.6s;}
.sg .circle.circle4 {transition-delay: 0.8s;}
.sg .circle.circle5 {transition-delay: 1s;}
.load .sg .circle {transform:scale(1);}
.sg .circle.selected {background: #f00}
.sg .circle:hover {border: 3px solid #f00}
.sg .circle .container {font-family: 'bebas_neue'; display: flex;justify-content: center;height: 100%;flex-direction: column;}
.sg .circle img {align-self: center;margin-bottom: 5px}
.sg .circle h2 {font-family: 'bebas_neue'; height:2em;font-size: 16px}
.sg .circle .descSite {font-family: 'bebas_neue'; display: none}
.sg .container .description {display: none;transform: scale(0);transition: 1s; height:150px; width:300px; text-align: center; position: absolute; z-index: 5;margin-top:-70px;font-family: 'bebas_neue', sans-serif; color:#fff; font-size:20px}
.sg .container .description.selected {display: block;transform: scale(1);}
.sg .container .description .more {font-family: 'bebas_neue'; background: #000;color:#fff;display: block; margin:10px auto; line-height: 75px; vertical-align: middle; border-radius: 50%;width:75px;height:75px; border: 3px solid transparent; }
.sg .container .description .more:hover {border: 3px solid #f00;}
.sg .bgSG[data-num="0"] {background: url(../img/bgsg/0_1280.jpg) no-repeat #000 center center}
.sg .bgSG[data-num="1"] {background: url(../img/bgsg/1_1280.jpg) no-repeat #000 center center}
.sg .bgSG[data-num="2"] {background: url(../img/bgsg/2_1280.jpg) no-repeat #000 center center}
.sg .bgSG[data-num="3"] {background: url(../img/bgsg/3_1280.jpg) no-repeat #000 center center}
.sg .bgSG[data-num="4"] {background: url(../img/bgsg/4_1280.jpg) no-repeat #000 center center}

@media only screen and (min-width: 480px) {
    .sg .item { max-width: 50%;}
    .sg .circle {display: inline-block;border-radius: 50%;width: 180px;height: 180px;}
    .sg .circle img {margin-bottom: 10px}
    .sg .circle h2 {height:2em;font-size: 20px}
}
@media only screen and (min-width: 768px) {
    .sg .item:nth-child(1) {padding-left: 30px}
    .sg .item:nth-child(2) {padding-right: 50px}
    .sg .item:nth-child(3) {text-align: left; margin-top:120px}
    .sg .item:nth-child(4) {text-align: right; margin-top:100px;padding-right: 20px;}
    .sg .item:nth-child(5) { margin:-20px 0 30px 0}
    .sg .sgCircle::after {content:" "; display:block; height:600px; width:600px; max-width:600px; border:1px solid #555; position: absolute; z-index: 1; border-radius: 50%;margin-top: -50px;}
}
@media only screen and (min-width: 1024px) {
    .sg .item:nth-child(1) {padding-left: 30px}
    .sg .item:nth-child(2) {padding-right: 50px}
    .sg .item:nth-child(3) {text-align: left; margin-top:120px}
    .sg .item:nth-child(4) {text-align: right; margin-top:100px;padding-right: 20px;}
    .sg .item:nth-child(5) { margin:-20px 0 30px 0}
    .sg .container .description {display:block}

}


/* TEMPLATE */

/* SECTION TOP */
.top {background: url(../img/bg_tv.jpg) no-repeat center /cover; min-height: 400px;width: 100%;box-sizing: border-box;padding-top: 30px;text-align:center;color:#fff}
.top .container {font-family: 'bebas_neue', sans-serif;}
.top img {margin: z0}
.top h1 {font-size: 40px;font-family: inherit;padding: 10px 30px}
.top h2 {font-size: 20px;font-family: inherit;padding: 10px 30px;line-height: 24px;}
.top form {padding: 20px 30px;position: relative;width: 80%;margin: 0 auto;max-width: 530px}
.top input[type="text"] {width: 100%; padding:5px 50px 5px 5px;box-sizing: border-box;font-size: 18px}
.top input[type="submit"] {position: absolute; right: 32px; top: 20px;background: url(../img/ico.png) no-repeat right -147px;cursor:pointer;border:none;width: 30px;height:35px;text-indent: -100px}

.top_balony {background: url(../img/bgtemp/bg_balony_600.jpg) no-repeat center /cover;}


/* SECTION OFFER */
.offer {background: #181818; padding: 20px 0}
.offer .container {width: 100%;max-width: 940px; margin:0 auto; }
.offer .container ul {list-style-type: disc;list-style-position: inside; padding:0 25px;max-width: 90%;margin: 0 auto; -moz-column-count: 2; -webkit-column-count: 2; column-count: 2;}
.offer .container ul li {color:#d1d1d1;position: relative; padding-left: 10px; font-size: 14px;line-height: 22px;margin-bottom: 15px;-webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; display:table;    }
.offer .container ul li::before {content: " ";display: block;width: 5px;height: 5px;background: #d1d1d1;border-radius: 50%;position:absolute;margin: 8px 0 0 -10px}


/* DETAIL */
.detail {width: 210px}
.detail h2 {font-family: 'bebas_neue';  font-size: 35px;color: #f00; text-align: center; margin: 20px 0}
.detail img {width: 100%;display: block;}
.detail .price {font-family: 'Raleway', sans-serif;  font-size: 14px;color: #f00; text-align: center; margin: 5px 0; text-align: center}
.detail .price .big {font-size: 25px}
.detail .price .priceDesc {display:block;color:#000;padding: 10px 0 5px}
.detail .detailDesc {background: #181818;padding: 20px 0 30px;margin-bottom: -15px;color:#d1d1d1;text-align: center;font-size: 12px;line-height: 20px;}
.detail.detailSmall .detailDesc {min-height: 136px;}
.detail .availability {    position: relative;;display:inline-block; margin:0 auto;background: #f00; font-family: 'bebas_neue', sans-serif; color:#fff;text-align: center;font-size: 20px;padding:4px 8px}

.detail.detailMid {padding: 10px; width: 450px}
.detail.detailMid h2 {float: left; font-size: 25px;padding-left: 20px}
.detail.detailMid .price {float: right;margin-top: 7px;text-align: right;font-size:11px}
.detail.detailMid .price .priceDesc {padding-top: 3px;font-size: 12px}
.detail.detailMid .detailDesc {padding: 20px}
.detail.detailMid .detailDesc li {text-align: left;margin: 0 5px 12px;}

.detail.detailMid.detailBig {width: 700px}

/* SECTION DETAIL 4 COLUMN*/
.detail4column {background: #f5f5f5; padding: 20px 0 60px}
.detail4column .container {width: 100%;max-width: 940px; margin:0 auto; display: flex;justify-content: space-around}
.detail4column .detail {text-align: center;display: none;width: 210px}
.detail4column .detail:nth-of-type(1) {display: block}

/* SECTION DETAIL 3 COLUMN*/
.detail3column {background: #f5f5f5; padding: 20px 0}
.detail3column .container {width: 100%;max-width: 940px; margin:0 auto; display: flex;justify-content: space-around}
.detail3column .detail {text-align: center;display: none;width: 290px}
.detail3column .detail:nth-of-type(1) {display: block}

/* SECTION DETAIL 2 COLUMN*/
.detail2column {background: #fff; padding: 20px 0}
.detail2column .container {width: 100%;max-width: 940px; margin:0 auto; display: flex;justify-content: space-around}
.detail2column .detail {text-align: center;display: none;}
.detail2column .detail:nth-of-type(1) {display: block}

/* SECTION WITH BG */
.sectionWithBg {background: url(../img/bgsection.jpg) no-repeat top center; padding: 40px 0 20px; min-height: 400px}
.sectionWithBg .container {width: 100%;max-width: 800px; margin:0 auto;}
.sectionWithBg .container .column2 { display: flex;justify-content: space-around}
.sectionWithBg .container .column2  ul {color:#fff;  }
.sectionWithBg .container .column2  ul li{color:#fff; font-size: 14px;line-height: 24px}
.sectionWithBg .container .column2 p {color:#fff;  display: flex;justify-content: space-around; font-size: 14px;padding:15px;line-height: 24px}
.sectionWithBg .container .column2 p:nth-of-type(2) {display:none}
.sectionWithBgBalony {background: url(../img/bgsectionbalony.jpg) no-repeat top center; padding: 40px 0 20px; min-height: 400px}
/* SECTION DETAIL WHITE 3 COLUMN */
.detailWhite3column{padding: 20px;}
.detailWhite3column .container {width: 100%;max-width: 940px; margin:0 auto; display: flex;justify-content: space-between;flex-wrap: wrap}
.detailWhite3column .container .img {width:100%; }
.detailWhite3column .container img {text-align: left;max-width: 100%;width:100%; margin-bottom: 20px}
.detailWhite3column .container .title {text-align: center; order: -1;}
.detailWhite3column .container h3 {text-align: center;}
.detailWhite3column .container .desc {font-size: 12px;line-height: 22px}

/* SECTION GALLERY */
.gallery {padding: 20px;background: #f5f5f5;}
.gallery .container {width: 100%;max-width: 940px; margin:0 auto; }
.gallery .container #gallery img {height: 350px}
.gallery .container #gallery .film_roll_child {opacity:0.5;transform: scale(1);transition: 1s;margin-top:20px}
.gallery .container #gallery .film_roll_child.active {opacity:1;transform: scale(1.2);position: relative;z-index: 5;margin-top:0}
.gallery .container #gallery .active a {position: relative; display: block;}
.gallery .container #gallery .active a::after {content: " "; width: 80px;height: 80px;background: #f00 url(../img/gallery/search.png) no-repeat center center;position: absolute; z-index: 6;top:50%;left: 50%; margin-top: -40px;margin-left: -40px}






/* SECTION STATISTIC */
.statistic {background: #f5f5f5; padding: 20px 0}
.statistic .container {width: 100%;max-width: 940px; margin:30px auto; padding: 0 5px; box-sizing: border-box;}
.statistic .container .columns3 {box-sizing: border-box;display: flex; justify-content: space-between; flex-wrap:wrap ;}
.statistic .container .column1-3 {flex-basis: 100%}
.statistic p {font-size:14px; line-height: 24px; text-align: center;margin-bottom: 40px;padding: 0 20px;}
.statistic .circle {border: 2px solid #b2b2b2; border-radius: 50%;font-family: 'bebas_neue', sans-serif;font-size: 16px;text-align: center;color: #b2b2b2;width:135px;height:135px; margin: 0 auto 20px}
.statistic .circle .count {font-size: 44px;font-family:inherit;display: block;text-align: center; margin: 25px 0 10px;}
.statistic h4 {font-size: 24px;text-align: center; margin:30px auto 0}

/* SECTION MAP */
#map {height:480px}
#map .infoWindowMaps b {font-size: 20px;font-weight: bold;line-height: 22px;}


/* SECTION CONTACT */
.contact {width: 100%; background:#fff; }
.contact .container {width: 100%;max-width: 940px; margin:30px auto;}
.contact .columns3 {display: flex;justify-content: space-around;box-sizing: border-box;max-width: 830px;margin: 0 auto;padding:10px;flex-wrap:wrap}
.contact .columns3 .column1-3 { width: 70%;text-align: center; margin-bottom: 30px}
.contact .columns3 .column1-3 .g-recaptcha > div { margin: 0 auto}
.contact .columns3 .column1-3:last-of-type { width: 100%}
.contact input[type="text"] {width:100%;border: none;border-bottom:1px solid #555;color:#555; font-family: 'Raleway', sans-serif; font-size:14px; padding: 6px 0;margin-bottom: 13px;}
.contact textarea {width:100%;border: none;border-bottom:1px solid #555; color:#555; font-family: 'Raleway', sans-serif; font-size:14px; height:117px}
.contact input[type="submit"] {border:2px solid transparent; cursor:pointer; font-family: 'bebas_neue', sans-serif; color:#fff; background: #000; padding:5px 50px;font-size:20px; margin-top: 5px}
.contact input[type="submit"]:hover {border-color: #f00}

/* SECTION CONTACT PERSON */
.contactPerson {width: 100%; background:#fff; }
.contactPerson .container {width: 100%;max-width: 810px; margin:30px auto;}
.contactPerson .column2 {display: flex; justify-content: space-between;flex-wrap: wrap;text-align: center}
.contactPerson .column2 .column1-2 {box-sizing: border-box; padding: 10px 25px;width: 100%;margin-bottom:20px}
.contactPerson .column2 h3 {font-size:22px; margin:5px 0;font-weight: bold}
.contactPerson .column2 h4 {font-size:16px; margin:20px 0 5px;font-weight: bold}
.contactPerson .column2 span {font-size:13px; line-height: 18px}
.contactPerson .column2 a {font-size:14px; color:#000 }


/* SECTION SOCIAL */
.social {width: 100%; background: rgba(0, 0, 0, 0.3);position:relative}
.social .container {width: 100%;max-width: 500px;margin:0 auto;display: flex;justify-content: space-around;padding: 35px 0}
.social .container a {display: inline-block;width: 45px; height: 45px;background: url(../img/ico.png) no-repeat}
.social .container a.tw {background-position: 0 -50px}
.social .container a.pin {background-position: 0 -100px}
.social .container a.goToTop {background-position: 0 -210px; position: absolute;right: 50px;top:-25px}

@media only screen and (min-width: 480px) {
    .top h2 {padding:30px}
    .detail4column .detail:nth-of-type(2),.detail3column .detail:nth-of-type(2) {display: block}
    .detail.detailMid .detailDesc {-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;}
    .detail.detailMid .price {font-size: 14px}
    .statistic .container .columns3 {flex-wrap:nowrap;}
    .contact .columns3 .column1-3 { width: 40%;}
}
@media only screen and (min-width: 600px) {
    .sectionWithBg .container .column2 p:nth-of-type(2) {display:block}
    .detailWhite3column .container h3 {text-align: left; padding: 5px 5px 0 40px}
    .detailWhite3column .container .img {width: 60%}
    .detailWhite3column .container .title {text-align: left; order: 0; width: 40%}
    .statistic .circle {width: 160px;height: 160px}
}
@media only screen and (min-width: 768px) {
    .detail4column .detail:nth-of-type(3),.detail3column .detail:nth-of-type(3) {display: block}
    .detail2column .detail:nth-of-type(2) {display: block}
    .detail2column.bigSmall .detail:nth-of-type(2) {display: none}
    .detail.detailMid .detailDesc {-moz-column-count: 1; -webkit-column-count: 1; column-count: 1;}
    .detail.detailMid.detailBig .detailDesc {-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;}
    .statistic .circle {width: 195px;height: 195px;font-size: 22px;}
    .statistic .circle .count {font-size: 64px; margin: 35px 0 10px;}
    .contact .columns3 .column1-3 { width: 24%;}
    .contact .columns3 .column1-3:last-of-type { width: 39%}
    .top {padding-top: 70px;}
    .contactPerson .column2 {flex-wrap: nowrap; text-align: left; }
}
@media only screen and (min-width: 768px) and (max-height: 940px) {
    .sg > .container { transform: scale(0.7);position: relative; z-index: 4; margin: -120px;}
}
@media only screen and (min-width: 1024px) {
    .top h1 {padding: 30px 30px 10px;}
    .detail4column {justify-content: space-between}
    .detail4column .detail{display: block}
    .detail.detailMid .detailDesc {-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;}
    .detail.detailMid.detailBig .detailDesc {-moz-column-count: 3; -webkit-column-count: 3; column-count: 3; padding: 22px;}
    .detail2column.bigSmall .detail:nth-of-type(2) {display: block}
    .detailWhite3column .container .img,.detailWhite3column .container .title {width: 33%}
    .detailWhite3column .container > div {width: 33%}
    .statistic .circle {width: 250px;height: 250px; font-size: 28px;}
    .statistic .circle .count {font-size: 80px; margin: 50px 0 10px;}
    .contact .columns3 { flex-wrap:nowrap}
    .contact .columns3 .column1-3 { width: 25%;}
    .contact .columns3 .column1-3:last-of-type { width: 37%}
}

.tables {width:100%}
.tables  tr:nth-child(even) {background: #CCC}
.tables  tr:nth-child(even) td {border-left:1px solid #fff}
.tables tr:nth-child(odd) {background: #FFF}
.tables tr:nth-child(odd) td {border-left:1px solid #CCC}
.tables col:first-child {background: #FF0}
.tables th {height:2em;line-height:2em;text-align:center}
.tables td {height:2em;line-height:2em;text-align:center;}