/*   
Theme Name: sobora.5.0
Description: The theme have mobile version.
Author: sobora
Version: 5.0
*/


@font-face {
    font-family:"PTSansRegular";
    src:url("../fonts/PTSans/PTSansRegular/PTSansRegular.eot");
    src:url("../fonts/PTSans/PTSansRegular/PTSansRegular.eot?#iefix")format("embedded-opentype"),
    url("../fonts/PTSans/PTSansRegular/PTSansRegular.woff") format("woff"),
    url("../fonts/PTSans/PTSansRegular/PTSansRegular.ttf") format("truetype");
    font-style:normal;
    font-weight:normal;
    font-display:swap;
}
@font-face {
    font-family:"PTSansBold";
    src:url("../fonts/PTSans/PTSansBold/PTSansBold.eot");
    src:url("../fonts/PTSans/PTSansBold/PTSansBold.eot?#iefix")format("embedded-opentype"),
    url("../fonts/PTSans/PTSansBold/PTSansBold.woff") format("woff"),
    url("../fonts/PTSans/PTSansBold/PTSansBold.ttf") format("truetype");
    font-style:normal;
    font-weight:600;
    font-display:swap;
}
@font-face {
    font-family:"PTSansItalic";
    src:url("../fonts/PTSans/PTSansItalic/PTSansItalic.eot");
    src:url("../fonts/PTSans/PTSansItalic/PTSansItalic.eot?#iefix")format("embedded-opentype"),
    url("../fonts/PTSans/PTSansItalic/PTSansItalic.woff") format("woff"),
    url("../fonts/PTSans/PTSansItalic/PTSansItalic.ttf") format("truetype");
    font-style:normal;
    font-weight:normal;
    font-display:swap;
}
@font-face {
	font-family:"Colus";
	src:url("../fonts/Colus/Colus-Regular.eot");
	src:url("../fonts/Colus/Colus-Regular.eot?#iefix") format("embedded-opentype"),
	url("../fonts/Colus/Colus-Regular.woff") format("woff"),
	url("../fonts/Colus/Colus-Regular.ttf") format("truetype");
	font-style:normal;
	font-weight:normal;
	font-display:swap;
}


/* BASIC */
*, *:after, *:before {outline:none; padding:0; margin:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
html, body {width:100%; height:100%;}
body {background:url("../img/bg-portfolio.jpg") no-repeat 50% 50%; background-attachment:fixed; background-size:cover; font-family:"PTSansRegular"; font-size:16px; line-height:24px; color:#fff; position:relative; -webkit-font-smoothing:antialiased;}
html {scroll-behavior:smooth;}

a {color:#fff; text-decoration:none; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s;}
a:hover {color:#bbb; text-decoration:none; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s;}
a:active, .active {color:#ddd;}

b, strong {font-weight:600;}
img {display:block;}
ul {list-style-type:none;}
table {border-collapse:collapse;}

.alignright {float:right;}
.alignleft {float:left;}
.aligncenter {margin-left:auto; margin-right:auto;}

.empty {height:10px; width:100%; clear:both;}
.clear {clear:both;}

.w20 {width:20%;}
.w33 {width:33%;}
.w50 {width:50%;}
.w60 {width:60%;}
.w100 {width:100%;}
.h100 {height:100%;}

.pl1 {padding-left:1px;}
.pl2 {padding-left:2px;}
.pl3 {padding-left:3px;}
.pl4 {padding-left:4px;}
.pl5 {padding-left:5px;}
.pl6 {padding-left:6px;}
.pl7 {padding-left:7px;}
.pl8 {padding-left:8px;}
.pl9 {padding-left:9px;}

.container {width:100%; max-width:1280px; height:100%; margin:0 auto; position:relative;}

.line {clear:both; width:40%; height:2px; margin:0 auto; background:url("../img/divider.png") repeat-x;}
.line-white {clear:both; width:40%; height:2px; margin:16px auto; background:url("../img/divider-white-50.png") repeat-x;}

/* temporary */
.bg-red {background:#f00;}
.bg-gray {background:#c0c0c0;}
.bg-green {background:#080;}


/* fade top bar */
.top-bar {background:none; width:100%; height:104px; position:fixed; top:0; left:0; z-index:1; transition:all 1s ease;}
.top-bar.scrolling {position:fixed; background:rgba(0,0,0,.8); box-shadow:0 0 2px rgba(0,0,0,.2);}


/* HEADER */
header {position:fixed; top:0; width:100%; height:104px; z-index:2;}
header .container {padding:32px 0 0 0;}

/* LOGO */
#logo {float:left; width:164px; height:52px;}
#logo a:hover {color:rgba(255,255,255,.92);}
h1 {font-size:36px; text-shadow:0 0 4px #000; font-family:"Colus"; font-weight:normal;}
h2 {color:#ddd; font-weight:300; font-size:18px; letter-spacing:1.36px; text-shadow:0 0 1px #000;}

/* List Lang */
.list-lang {width:auto; float:right; margin:4px 12px 0 0;}
.list-lang li {display:inline-block;}
.list-lang li a, #menu .list-phone li a {font-size:18px; padding:0 12px; display:block;}
.list-lang li a:hover, #menu .list-phone li a:hover {color:#ddd;}
#menu .list-lang {width:100%; margin:84px 0; padding:0 0 0 84px;}
#menu .list-lang li {padding:0 24px 0 0;}
#menu .list-phone {width:100%; margin:84px 0; padding:0 0 0 84px;}
#menu .list-phone li {padding:0 24px 24px 0;}


/* MENU */
#menu {float:right; width:auto; border-left:1px solid #bbb; margin:4px 0 0 12px; padding-left:12px;}
#menu ul li {float:left; margin:0 4px; padding:0 16px;}
#menu ul li:last-child {margin-right:0;}

#menu ul li a {text-transform:uppercase; font-size:18px; color:#fff;}
#menu ul li a.active:after {content:""; display:block; width:100%; height:12px; background-color:#000; border-radius:2px; margin:-12px 0 0 -16px;}
#menu ul li a:hover, #menu ul li a.active {color:#ddd;}


/* SCROLL PAGES */
#wrapper {height:100%; width:100%;}
#main {width:100%; max-width:1280px; min-width:1280px; height:100%; margin:0 auto;}

#main section {overflow:hidden;}
#main section .page_container {position:relative; top:18%; margin:0 auto; width:100%; z-index:3;}
.box-price {width:100%; height:650px; min-height:650px; padding:70px 0;}

table.price {color:#fff; margin-top:24px;}
table.price span {font-family:"PTSansItalic";}
table.price .price-tdone {width:212px; padding-top:13px; padding-bottom:8px;}
h3, table.price span {color:#fff; text-shadow:1px 1px 1px #000; font-size:26px; line-height:48px; font-weight:300; letter-spacing:-1px; -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg); -ms-transform:rotate(-1deg); transform:rotate(-1deg); z-index:1;}
table.price p {font-size:18px; line-height:23px; font-family:"PTSansItalic"; font-weight:300; text-shadow:none; padding:24px 24px 0 0;}

.img-portfolio {}
.img-portfolio img {margin:0 auto;}

/* arrow down */
.arrow-down {margin:30px; position:absolute; bottom:16px; left:50%;}
.arrow-down span {display:block; width:24px; height:24px; border-bottom:2px solid #fff; border-right:2px solid #fff; transform:rotate(45deg); margin:-16px; animation:arrow-down 2s infinite;}
.arrow-down span:nth-child(2) {animation-delay:-0.2s;}
.arrow-down span:nth-child(3) {animation-delay:-0.4s;}
@keyframes arrow-down { 
0% {opacity:0; transform:rotate(45deg) translate(-20px,-20px); }
50% {opacity:1;}
100% {opacity:0; transform:rotate(45deg) translate(20px,20px);}
}


/* Basic PROJECTS */
.box-project-main {width:100%; height:650px; min-height:650px; padding:60px 0 70px 0;}
.box-project {width:100%; height:500px; min-height:500px; display:block; position:relative;}
.scrin-monitor img {margin:-38px auto 0 auto; width:100%; height:auto;}
.scrin-site img {width:100%; height:auto; object-fit:contain; position:relative;}
.project-logo {position:absolute; top:16px; left:16px; overflow:hidden; z-index:4;}


/* All PROJECTs */
#goodmorninguanews {background:#cd2122;}
#goodmorninguanews-scrin {background:url("../img/projects/goodmorninguanews-bg.jpg");}

#infotimekievua {background:#1f1207 url("../img/projects/infotimekievua-bg-1.png") no-repeat bottom right;}
#infotimekievua-scrin {background:#fff url("../img/projects/infotimekievua-bg.png");}

#sunbramacom {background:#fe8d24; /*ffa901*/}
#sunbramacom-scrin {background:#f9f9f9 url("../img/projects/sunbramacom-bg.jpg");}

#megakosmetologcomua {background:#db4278;}
#megakosmetologcomua-scrin {background:#f2f2f2 url("../img/projects/megakosmetologcomua-bg.jpg");}

#ambeautyae {background:#ff4c54;}
#ambeautyae-scrin {background:#fdfdfd;}
.project-logo-r {position:absolute; top:16px; left:474px; overflow:hidden; z-index:4;}

#autogazkievua {background:#010b17 url("../img/projects/autogazkievua-bg.jpg") no-repeat 50% 50%;}
#autogazkievua-scrin {}

#pravozahysnykukr {background:#f9efe1 url("../img/projects/pravozahysnykukr-bg.png") no-repeat bottom right;}
#pravozahysnykukr-scrin {}

#travelagencycomua {background:#db0e0d;}
#travelagencycomua-scrin {background:#e34544;}
/*#travelagencycomua-desc {background:url("../img/projects/travelagencycomua-bg.png") no-repeat left top;}*/

#gmassagecomua {background:url("../img/projects/gmassagecomua-bg.jpg") no-repeat 50% 50%;}
#gmassagecomua-desc {background:rgba(0,0,0,.5);}

#intecservicecomua {background:#619551;}
.project-logo-c {position:absolute; top:16px; left:170px; overflow:hidden; z-index:4;}

#sdamvarenduinua {background:rgba(0,0,0,.8);}

#enailscomua {background:#fc3c57;}
#enailscomua-scrin {background:#fff;}

#feruzakievua {background:#300922;}
#feruzakievua-scrin {background:#6c0a4c;}

#annacosmetkievua {background:#598957;}
#annacosmetkievua-scrin {background:#f2f2f2;}

#tattooandbeautycomua {background:#271b19 url("../img/projects/tattooandbeautycomua-bg.jpg");}
#tattooandbeautycomua-scrin {}
/* project video box */
.project-video-box {height:500px; background:#271b19; float:left; position:relative; overflow:hidden;}
/* VIDEO */
.project-video {position:relative; overflow:hidden;}

#shopgeektoyscomua {background:#202a3b url("../img/projects/shopgeektoyscomua-bg.jpg");}
#shopgeektoyscomua-scrin {background:#1b2435;}

#molokomacomua {background:#b9193b;}

#svarogdaycom {background:#222;}
#svarogdaycom-scrin {position:relative;}
#svarogdaycom .project-logo {left:32px;}
.project-slogan {position:absolute; width:42%; height:auto; top:120px; left:38px; color:#dcdcdc; font-size:20px; line-height:24px; font-family:"Times New Roman", Times, serif; text-align:justify;}

#astradesigncomua {background:rgba(0,0,0,.85);}

#vilartranscomua {background:#20436a url("../img/projects/vilartranscomua-auto.png") no-repeat right bottom;}
#vilartranscomua-scrin {background:#fff url("../img/projects/vilartranscomua-bg.png");}

#belkinastylescomua {background:url("../img/projects/belkinastylescomua-bg.jpg");}
#belkinastylescomua-desc {background:rgba(0,0,0,.3) url("../img/projects/belkinastylescomua-bg-logo.png") no-repeat right bottom;}

#fashionosvitacomua {background:#30231a;}

#kievtuningcomua {background:url("../img/projects/kievtuningcomua-bg.png");}

#kosmetkievua {background:#38ac39;}
#kosmetkievua-scrin {background:#78c552;}

#ambsaloncomua {background:#ba0023;}
#ambsaloncomua-scrin {background:#ff6836 url("../img/projects/ambsaloncomua-bg.jpg") repeat-x top;}

#soboracomua {background:rgba(221,221,221,.8);}
#soboracomua-desc {background:rgba(0,0,0,.8);}

/* projects description */
.project-desc {padding:64px;}
.project-desc h4 {color:#fff; font-size:28px; line-height:36px; text-transform:uppercase; font-weight:300; -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg); -ms-transform:rotate(-1deg); transform:rotate(-1deg); z-index:1; margin-bottom:32px;}
.project-desc h4:after {content:""; display:block; width:640px; height:2px; background:url("../img/divider-white-50.png") repeat-x; margin:16px 0 0 -64px;}

/* project table */
.project-experience-t {margin:0 0 24px 0; color:rgba(255,255,255,.6);}
.project-experience-t td {border:1px solid rgba(255,255,255,.6); padding:5px 14px; text-transform:uppercase;}
.mb-24 {margin-bottom:0;}
.mb-24 td {border-bottom:0;}
.mt-24 {margin-top:-24px;}
.mt-24 td {border-top:0;}
/* project type list */
ul.project-type {}
ul.project-type li {padding:4px 0; color:rgba(255,255,255,.8);}
ul.project-type li span {display:inline-block; font-family:"PTSansItalic";}

/* project link */
.project-link {width:640px; height:84px; position:absolute; bottom:0;}
.project-link:before {content:""; display:block; width:100%; height:2px; background:url("../img/divider-white-50.png") repeat-x; -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg); -ms-transform:rotate(-1deg); transform:rotate(-1deg);}

.project-link p {padding:24px 60px;}
.project-link p a {color:rgba(255,255,255,.8); padding:8px 164px 8px 0;}
.project-link p a:hover {color:#fff;}
.project-link a span, .project-link a i {margin-right:24px; transition:.5s linear;}
.project-link a:hover span, .project-link a:hover i {margin-right:4px; transition:.5s linear;}















/* portfolio page 0 */
section.pageO .page_container {/*background:rgba(0,0,0,.6);*/ width:100%; height:650px; min-height:650px;}

#included-price h3 {text-transform:uppercase; font-size:32px;}

#included-price ul {float:left; margin:48px 0;}
#included-price ul li {width:272px; height:148px; float:left; margin:24px 24px 0 24px; position:relative; overflow:hidden; /*background:rgba(0,0,0,.3);*/}

#included-price ul li span.number {position:absolute; bottom:24px; right:-52px; color:rgba(255,255,255,.2); font-size:216px; font-family:"PTSansBold"; z-index:-1;}

#included-price ul li span {display:block; font-size:18px; font-weight:300; color:#fff; padding:32px; text-align:center;}

#included-price ul li.brb:after {content:""; display:block; width:3px; height:80%; right:0; bottom:0; margin:24px 0; background:rgba(0,0,0,.4); position:absolute; border-radius:2px;}
#included-price ul li.brb1:before {content:""; display:block; width:80%; height:3px; bottom:0; margin:0 auto; background:rgba(0,0,0,.4); position:absolute;}














/* FOOTER */
footer {position:absolute; bottom:0; width:100%; height:64px; color:#ddd;}
footer .container {padding:18px 0;}
footer p {text-align:center;}
footer p a {color:#ddd; margin:0 18px;}
footer p a:hover {color:#888;}

ul.list-icons {float:right;}
.list-icons li {font-size:18px; display:inline-block; text-align:right; padding:0 2px 0 22px;}


/* BACK TO TOP */
#back-to-top {position:fixed; right:10px; bottom:64px; width:64px; height:64px; background:#111; text-align:center; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; display:block; box-shadow:0 0 4px 4px rgba(0,0,0,.2); z-index:2;}
#back-to-top:hover {background:#000;}
#back-to-top a {display:block; padding:16px 0 0 0; color:#fff; font-size:32px; font-weight:300;}
#back-to-top a:hover {text-decoration:none;}


/* clearfix hack */
.clearfix:after {content:"."; display:block; clear:both; height:0; visibility:hidden;}
.clearfix {display:inline-block;}
/* exlude MacIE5 \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* end MacIE5 */