/*   
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-home.jpg) no-repeat 50% 50%; background-size:cover; color:#fff; font-family:"PTSansRegular"; font-size:16px; line-height:24px; overflow:hidden;}

body#page-contacts {background:url(../img/bg-contacts.jpg) no-repeat 50% 50%;}
body#page-about {background:url(../img/bg-about.jpg) no-repeat 50% 50%;}

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%;}
.w40 {width:40%;}
.w50 {width:50%;}
.w60 {width:60%;}
.w100 {width:100%;}

.pl1 {padding-left:1px;}
.pl2 {padding-left:2px;}
.pl3 {padding-left:3px;}
.pl4 {padding-left:4px;}
.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;}


/* HEADER */
header {position:fixed; top:0; width:100%; height:104px;}
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;}


/* MAIN */
main {width:100%; height:100%; padding:104px 0; z-index:2;}

.wrapper {width:100%; height:100%; max-height:800px; vertical-align:middle; display:table; justify-content:center; align-items:center;}
.contents {vertical-align:middle; display:table-cell;}

h3 {color:#fff; text-shadow:1px 1px 1px #000; font-size:32px; line-height:52px; 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;}

.vertical-text {writing-mode:vertical-lr; transform:rotate(180deg); position:absolute; bottom:180px; right:0;}
.vertical-text:before {content:""; display:block; width:8px; height:264px; background-color:#000; border-radius:1px; margin:0 -10px 0 0;}
.vertical-text a h4 {color:#fff; text-shadow:1px 0 0 #444; font-size:21px; text-transform:uppercase; font-weight:300; padding:8px 0 0 0; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s;}
.vertical-text a:hover h4 {color:#bbb; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s;}


/* page Contacts */
/* CONTACTS */
#contacty-main {margin:84px 0 0 0; width:50%; float:left;}
#contacty-main table td.td-photo {width:264px;}
#contacty-main h3 {font-size:32px;}
#contacty-main .fs22 {font-size:22px;}
#contacty-main .fs20 {font-size:20px;}
#contacty-main .ls2px {letter-spacing:2px;}
#contacty-main .textt-none {text-transform:none;}
.photo {width:250px; height:250px; overflow:hidden; border-radius:50%; box-shadow:0 0 6px rgba(0,0,0,.8);}
.photo img {width:100%; height:100%;}

/* FORM */
#contacty-form {line-height:24px; font-family:"PTSansRegular"; width:50%; float:right;}

#contact-form {margin-bottom:16px;}
#contact-form input[type=text], #contact-form textarea {width:96%; margin:16px 0 0 16px; color:#fff; background:rgba(21,21,21,.8); border:1px solid #151515; border-radius:24px; height:60px; padding:12px 24px; box-shadow:0 0 6px rgba(0,0,0,.8); font-family:"PTSansRegular"; font-size:14px; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s;}
#contact-form textarea {padding:24px;}
#contact-form input:focus, #contact-form textarea:focus {border:1px solid #eee; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s;}
/* Button Send */
#contact-form input[type=submit] {background:#fff; width:26%; float:left; clear:both; color:#222; font-weight:600; margin:16px 0 0 16px; padding:24px 16px;  border:1px solid #222; border-radius:64px; cursor:pointer; text-transform:uppercase; box-shadow:0 0 6px rgba(0,0,0,.8); -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s; letter-spacing:1px;}
#contact-form input[type=submit]:hover {background:rgba(21,21,21,.8); border:1px solid #eee; color:#fff; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s;}

#contacty-form p {color:#ddd; font-size:15px; text-align:center; margin:16px 0 0 0;}


/* Page Portfolio */


/* Page About */
.aboutme {padding:0;}
.aboutme p {margin:16px 0; line-height:22px; font-size:18px; -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg); -ms-transform:rotate(-1deg); transform:rotate(-1deg); font-family:"PTSansItalic";}
.aboutme-img img {margin:0 auto;}
.page-aboutme {bottom:112px;}

.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;}

/* project link */
.aboutme-link {width:100%; height:84px; margin:32px auto 0 auto;}
.aboutme-link:before {content:""; display:block; width:90%; height:2px; margin:0 auto 24px auto; 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);}

.aboutme-link p {}
.aboutme-link a {color:#fff; width:100%; display:block; padding:8px 0 0 14px; text-transform:uppercase; font-size:18px;}
.aboutme-link a:hover {color:rgba(255,255,255,.8);}
.aboutme-link a span, .aboutme-link a i {margin-right:24px; transition:.5s linear;}
.aboutme-link a:hover span, .aboutme-link a:hover i {margin-right:4px; transition:.5s linear;}





/* 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);}
}








/* FOOTER */
footer {position:fixed; 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;}







/* clearfix hack */
header:after, #contents:after, .container:after, section:after, article:after, aside:after, #share:after, footer:after {content:""; display:table; clear:both;}
.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 */