@font-face{font-family:'Open Sans', sans-serif;font-display:swap;}
*{box-sizing:border-box;padding:0;margin:0;-webkit-transition: 0.3s;-moz-transition: 0.3s;transition: 0.3s}
html{opacity: 0; -ms-overflow-style:-ms-autohiding-scrollbar;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent; background: #3A3A3A; overflow: hidden; }body{font-family:'Open Sans',sans-serif;font-weight:600;margin:0;background:#fff;background-color:#fff;background-repeat:no-repeat;background-position:center top;-webkit-text-size-adjust:none;-webkit-transition:background-color .3s;-moz-transition:background-color .3s;transition:background-color .3s}a,article,h1,h2,h3,h4,p{font-family:'Open Sans',sans-serif;font-weight:600;margin-top:0;margin-bottom:0;-webkit-transition:color .6s;-moz-transition:color .6s;transition:color .6s}h1{font-size:32px;font-weight:700;letter-spacing:1.3px;text-align:center}h2{font-size:28px;font-weight:700;letter-spacing:0.5px}article{font-size:16px;color:#9c9c9c;text-align:center}p{font-size:12px}a{font-size:14px;color:#b2b2b2}a{text-decoration:none;text-decoration-line:none}a[href^=tel]{color:inherit;text-decoration:none;text-decoration-line:none}div::selection,img::selection, .photoGalary::selection{background:0 0;background-color:none;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}a,div,img{-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent;background:0 0;background-color:none;color:none}::selection,body::selection{background:0 0;color:none;background-color:none}.projects, header a, .photoGalary{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}article::selection,h1::selection,h2::selection,h3::selection,h4::selection,h5::selection,p::selection{background:#3a3a3a;background-color:#3a3a3a;color:#f8f8f8}h1,h2{color:#3a3a3a}img{font-size:12px;color:#3a3a3a;font-weight:600;letter-spacing:.3px}.dark img{color:#f8f8f8}.dark article::selection,.dark h1::selection,.dark h2::selection,.dark h3::selection,.dark h4::selection,.dark h5::selection,.dark p::selection{background:#f8f8f8;background-color:#f8f8f8;color:#1c1c1c}
html.loaded{opacity: 1;}
h2{ font-size: 18px; color: #626262; } h3{ color: #626262; } p, ul, li{ font-size: 12px; color: #6D6D6D; -webkit-transition: 0.3s;-moz-transition: 0.3s;transition: 0.3s} p.light{ color: #9C9C9C; } b, strong{ color: #6D6D6D; } header a::selection{ background:0 0;background-color:none;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent }
img::selection, div::selection, input::selection, textarea::selection{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
input:focus, textarea:focus, select:focus{outline: none;}
.linkBlock{margin-bottom:50px; }
/*- header -*/
main{ max-width: 1440px; max-width: 1440px; margin-left: auto; margin-right: auto; } .siteLogo a{ display: flex; }
.content{ position: relative; margin-left: auto; margin-right: auto; overflow-y: scroll; width: 100vw;height: 100vh;
	  overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; overflow:-moz-scrollbars-none;
	  -webkit-mask-image: -webkit-radial-gradient(white, black);
-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;}
.thnku{ position: absolute; left: 0; right: 0; bottom: 0px; z-index: -1; text-align: center; font-size: 12px; color: #6B6B6B; letter-spacing: 0.6px; }
.siteLogo.loaded{ background: url("../../imgs/arrow-button.svg"); background-repeat: no-repeat; border-radius: 7px;
/*padding-top: 7px; padding-left: 25px; padding-right: 10px;*/}
.siteLogo a p span{ max-width: 0; overflow: hidden; -webkit-transition: 0.3s;-moz-transition: 0.3s;transition: 0.3s} 
.siteLogo a p{ margin-top: 7px; display: flex; margin-left: 5px; font-size: 12px; color: #3A3A3A; -webkit-transition: 0.2s;-moz-transition: 0.2s;transition: 0.2s}
.siteLogo a:hover p{ margin-left: 5px; color: #6D6D6D; } 
.siteLogo a:hover p span{max-width: 100%; margin-right: 3px; }
header{ position: fixed; left: 0; top: 0; right: 0; padding: 22px; display: flex; max-width: 1440px; margin-left: auto; margin-right: auto; justify-content: space-between; z-index: 100; }
.siteLogo img{ width: 25px; }
.siteLogo.loaded img{ margin-left: 25px; margin-top: 6px; }
.siteLogo.loaded a p{ margin-left: 5px; margin-right: 10px; margin-top: 12px; }
.scrolled .siteLogo img{ width: 30px; }
.scrolled .siteLogo.loaded img{ margin-left: 0px; margin-top: 0px; }
div.flex{ display: inline-flex; margin-left: auto; margin-right: auto; }
.privacyForm h2, .termsForm h2{ margin-top: 20px; margin-bottom: 5px; }
ul{list-style: none; }
li::before {content: "•"; color: #6D6D6D; position: absolute; margin-left: -10px; margin-top: -2px;}
li{ margin-left: 10px; }
p.paddingBtn{padding-bottom: 40px;}
hr.verticalHR{margin-left: 10px; margin-right: 10px; opacity: 0.3;}
.privacyButton, .termsButton{ cursor: pointer; }
.privacyButton:hover, .termsButton:hover;{ color: black; }
.privacyForm h1, .termsForm h1{ text-align: left;color: #6D6D6D; margin: 0; font-size: 24px; margin-bottom: 5px; }
/*- btns header -*/
.btns p.btnsPmobile{ display: none; }
.btns{ display: flex; } .btns a{ display: block; border-radius: 20px; border: 1px solid red; width: 150px; text-align: center; padding-top: 8px; padding-bottom: 8px; -webkit-transition: 0.3s;-moz-transition: 0.3s;transition: 0.3s}
.btns a.darkBtn{ margin-left: 15px; border: 2px solid #3A3A3A; color: #F8F8F8; background: #5E5E5E;} .btns a.darkBtn:hover{ background: #3A3A3A; }
.btns a.lightBtn{ color: #3A3A3A; background: none; border: 2px solid #3A3A3A; } .btns a.lightBtn:hover{ background: #323232; color: #F8F8F8; }
.btns a p{ letter-spacing: 0.6px; font-size: 14px; color: #F8F8F8;}
.mobileBtns{display: none;} .mrLeft{ margin-left: 10px; } .mobileBtns a:hover{ opacity: 0.7; } .mobileBtns a{-webkit-transition: 0.3s;-moz-transition: 0.3s;transition: 0.3s;}
.scrolled .siteLogo a p{ margin-top: 0; opacity: 0; max-width: 0; overflow: hidden; } .scrolled .siteLogo.loaded{ background: none; padding: 0; border-radius: 0; }
.fixedMain{ position: relative; } .fixedMain .qrCode img{ max-width: 135px; }
.fixedMain .qrCode{ max-height: 0; position: absolute; right: 0px; padding: 0; padding: 2px; padding-bottom: 0; top: 20px; overflow: hidden;
border-radius: 7px; opacity: 0; border: 3px solid white; }
.fixedMain:hover .qrCode{ opacity: 1; top: 40px; max-height: 150px; border: 3px solid #F8F8F8; background: white; }
.scrolled a.darkBtn{ background: none; color: #3A3A3A; }
.scrolled a.darkBtn:hover{ color: #F8F8F8; } .scrolled a.darkBtn:hover p{ color: #F8F8F8; }
.scrolled a.darkBtn p{ color: #3A3A3A; }
/*- main -*/
.main{ max-width: 1420px; margin-left: auto; margin-right: auto; display: flex; margin-top: 60px; }
.appLogo img{ max-width: 180px; border-radius: 20px; }
.appDescription{ margin-left: 25px; margin-top: 5px; } .appDescriptionBtn{ margin-top: 20px; } .appDescription h2{ font-size: 24px; color: #3A3A3A; }
.appDescription p{ color: #9C9C9C; margin-top: 5px;} .appDescription p b{ margin-left: 5px; }
/*- skills -*/
.appSkills{ max-width: 200px; margin-top: 0px; overflow: hidden; position: absolute; right: 20px; text-align: right;} .mobskills{ display: none; margin-top: 15px; max-width: 400px; margin-left: -2px; }
.scrolled .appSkills{ }
.skillBlock{ display: inline-block; cursor: default; color: #6D6D6D; margin-bottom: 1px; background: #F8F8F8; border-radius: 7px; font-size: 12px; padding: 1px; padding-left: 9px; padding-right: 9px; margin-left: 2px; margin-right: 2px; }
.skillBlock.blue:hover{ background: #C3DEFF; } .skillBlock.red:hover{ background: #FFDBDB; } .skillBlock.orange:hover{ background: #C9C7FF; } .skillBlock.green:hover{ background: #D7FABA; } .skillBlock.yellow:hover{ background: #FFF0BB; } 
.skillBlock.pink:hover{background: #D55BF6;} .skillBlock.grenner:hover{background: #5BF6C3;} .skillBlock.lightYello:hover{background: #F5F65B;} .skillBlock.lightOrange:hover{background: #F6965B;} .skillBlock.lightBlue:hover{background: #5BA9F6;} .skillBlock.purpure:hover{background: #6A5BF6;}
.skillBlock:hover{color: black;}
.mobskills .skillBlock{ font-size: 14px; border-radius: 10px; }
/*- galary -*/
.photoGalary{ width: 100%; display: inline-flex; overflow-y: scroll; margin-top: 60px; margin-bottom: 60px; -webkit-overflow-scrolling:touch; -ms-overflow-style:none;overflow:-moz-scrollbars-none; position: relative; z-index: 1;} 
.galaryImage{ margin-right: 5px; margin-left: 5px; width: 540px; overflow: hidden; } 
.galaryImage.vertical{width: 450px;}
.galaryImage img{ width: 100%; }.galarySpace{ min-width: 40px; }
video{ max-width: 300px; }
.galaryImage{ cursor: url('../../imgs/zoom.svg'), auto;	 } .galary--jq .galaryImage{ cursor: default; }
/*- arrows -*/
.message div{margin:16px;}
.message{background:red; padding:16;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px; margin:16px; }
.message h1, .message p{color:white; text-align:left}
.message h1{font-size:14}
.arrowDiv{ width: 100%; height: 0px; position: relative; margin: 0; padding: 0; opacity: 0.1; }
.arrowDiv:hover{ opacity: 1; }
.arrow{position:absolute;width:35px;top:20px;cursor:pointer;}.arrow img{margin:0;}
.arrow-right{right:30px;}.arrow-left{right:140px;}
.arrow p{position:absolute;top:0px;opacity:0;color:#323232;-webkit-transition:padding 0.3s;-moz-transition:padding 0.3s;transition:padding 0.3s;}
.arrow-left p{left:35px;}.arrow-right p{right:35px;}.arrow-left:hover p{padding-left:10px;opacity:1;}.arrow-right:hover p{padding-right:10px;opacity:1;}.dark .arrow p{color:#F8F8F8;}
/*- about -*/
.about{ max-width: 1420px; margin-left: auto; margin-right: auto; margin-bottom: 60px; } .about p{ max-width: 600px; margin-top: 3px; font-size: 13px; line-height: 1.6;  } 
.about h3{ font-size: 16px; margin-top: 30px; color: #626262;} .about h2{font-size: 20px; margin-bottom: 5px; color: #626262;} .nonFxt{ text-align: center; justify-content: center; margin-bottom: 60px; }
.about h4{ margin-top: 15px; color: #626262; }
/*- footer -*/
.footer{ max-width: 1420px; padding: 30px; padding-right: 0; padding-left: 0; margin-right: auto; margin-left: auto; } footer{ background: #F8F8F8; } 
.footer.centered{text-align: center;}
/*- projects -*/
.projects{ display: flex; overflow-y: scroll; padding-top: 20px; padding-bottom: 15px; -webkit-overflow-scrolling:touch; -ms-overflow-style:none;overflow:-moz-scrollbars-none;}
.project{background:#FDFCFC;cursor:pointer;position:relative;text-align:left;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;width:280px;min-width:280px;height:180px;margin-right:15px;padding:15px;padding-top:10px;padding-bottom:25px;overflow:hidden;
-webkit-box-shadow:0px 3px 8px 0px rgba(28,28,28,0.1);-moz-box-shadow:0px 3px 8px 0px rgba(28,28,28,0.1);box-shadow:0px 3px 8px 0px rgba(28,28,28,0.1);}
.projects-logo-night{display:none;}.projects-logo-day{display:block;}.projects-logo-night--jq{display:block;}.projects-logo-day--jq{display:none;}
.project img{position:absolute; z-index: 1; bottom:25px;left:50%;max-width:100px;transform:perspective(1px) translateX(-50%); -webkit-transition:bottom 0.3s;-moz-transition:bottom 0.3s;transition:bottom 0.3s;}
.project h3{font-size:18px;margin-bottom:5px;text-align:left;-webkit-transition:opacity 0.2s;-moz-transition:opacity 0.2s;transition:opacity 0.2s;}
.project p{color:#585858;letter-spacing:0.4px;-webkit-transition:opacity 0.1s;-moz-transition:opacity 0.1s;transition:opacity 0.1s;}
.rp-hover{z-index:1;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-transition:opacity 0.3s;-moz-transition:opacity 0.3s;transition:opacity 0.3s;}
.rp-hover .websitemore, .rp-hover .websitelink{position:absolute;bottom:-10px;right:15px;font-size:12px;letter-spacing:0.6px;cursor:pointer;
width:110px;border:2px solid #1C1C1C;color:#1C1C1C;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;text-align:center;padding-top:5px;padding-bottom:5px;-webkit-transition: 0.3s;-moz-transition: 0.3s;transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.rp-hover .websitelink{left:15px; -webkit-transition: 0.2s;-moz-transition: 0.2s;transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.rp-hover .websitemore:hover, .rp-hover .websitelink:hover{background:#3A3A3A;color:#F8F8F8;}.dark .rp-hover .websitemore, .dark .rp-hover .websitelink{border-color:#3A3A3A;color:#F8F8F8;}.dark .project h3{color:#F8F8F8;}
.project:hover .rp-hover-bottom, .project:active .rp-hover-bottom{bottom:0;}
.project:hover .rp-hover, .project:active .rp-hover{opacity:1;}.project:hover img, .project:active img{bottom:100px;opacity:1;}
.project:hover h3, .project:hover p, .project:active h3, .project:active p{opacity:0;}
.project:hover .rp-hover .websitemore, .project:hover .rp-hover .websitelink{bottom:15px;}.project:active .rp-hover .websitemore, .project:active .rp-hover .websitelink{bottom:15px;}.projects .more-h{margin-top:60px;cursor:pointer;}.projectsheaderhelper{height:1px;margin-top:0px;}
.project.iosProject:hover img, .project-conteiner.iosProject:active img{ bottom: 85px;}
.project.iosProject img{ height: auto; width: auto; max-height: 60px; bottom: 15px; }
.ios-skill-conte{ position: absolute; bottom: -100px; padding-left: 10px; padding-right: 10px; -webkit-transition: bottom 0.4s;-moz-transition: bottom 0.4s;transition: bottom 0.4s; }
.project:hover .rp-hover .ios-skill-conte{ bottom: 10px; }
.skillBlocksmall{ display: inline-block; margin-bottom: 180px; background: white; border-radius: 7px; font-size: 11px; color: #3A3A3A; padding-left: 7px; padding-right: 7px; margin-left: 2px; margin-right: 2px;}
.skillBlocksmall.blue{ background: #C3DEFF; } .skillBlocksmall.red{ background: #FFDBDB; } .skillBlocksmall.orange{ background: #C9C7FF; } .skillBlocksmall.green{ background: #D7FABA; } .skillBlocksmall.yellow{ background: #FFF0BB;} 
.project:hover .skillBlocksmall{ margin-bottom: 2px; }
/*- code form -*/
.codeForm, .privacyForm, .termsForm{ background: #DDDDDD; position: fixed; z-index: 1000; left: -800px;border-radius: 6px; max-width: 400px; overflow-x: scroll;
-webkit-box-shadow: 0px 3px 8px 0px rgba(28,28,28,0.1);-moz-box-shadow: 0px 3px 8px 0px rgba(28,28,28,0.1);box-shadow: 0px 3px 8px 0px rgba(28,28,28,0.1);}
.privacyForm, .termsForm{ max-width: 500px; }
.closeForm{ text-align: right; padding: 15px; cursor: pointer; }
.codeForm-Block, .privacyForm-Block{ padding: 20px; padding-top: 0; } .codeForm-Block h2{ font-size: 24px; margin-top: -45px; margin-bottom: 50px; }
.codeForm.active, .privacyForm.active, .termsForm.active{ left: 10%; right: 10%; top: 10%; bottom: 10%; }
.codeForm-Block, .privacyForm-Block{ height: 400px }
form{ margin-top: 30px; }
input[type="text"], textarea{ width: 100%; background: none; background-color: none; border: none; font-size: 12px; height: 35px; max-width: 100%; min-width: auto; padding: 0px;color: #626262; font-weight: 400; letter-spacing: 0.6px;  
border-radius: 6.666666667px;font-size: 16px; line-height: 26.666666667px;padding: 6.666666667px; width: 133.333333333%;transform: scale(0.75);transform-origin: left top;font-weight: 600; 
margin-left: -4px; resize: none; -webkit-transition: 0.6s; -moz-transition: 0.6s; transition: 0.6s;}
textarea{ height: 42px; line-height: 1.4; margin-top: 6px; padding-top: 0; padding-bottom: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-transition: 0.6s; -moz-transition: 0.6s; transition: 0.6s;}
input[type="submit"]{ margin-top: 15px; margin-bottom: 50px; float: right; width: 150px; height: 35px; font-weight: 600; font-size: 12px; letter-spacing: 1.2px; background: none; text-decoration-color: #626262; color: #626262; text-align: center; border: 2px solid #626262; border-radius: 20px; 
-webkit-transition: background 0.6s; -moz-transition: background 0.6s; transition: background 0.6s; cursor: pointer;} input[type="submit"]:hover{background: #626262; color: white; transition-duration: 800ms;}
.codeForm-Block p{ margin-top: 10px; margin-bottom: 3px; }.codeForm-Block hr{ margin: 0; margin-top: -10px; background: #626262; border: none; height: 2px; }
/*- in button -*/
.btns.nonFxt .darkBtn{ background: #3A3A3A; color: white;} .btns.nonFxt a{cursor: pointer;}
.btns.nonFxt .darkBtn:hover{ border: 2px solid #3A3A3A; color: #3A3A3A; background: #F8F8F8; }
.main, .about{ padding-left: 40px; padding-right: 100px; } .footer h2{ margin-left: 40px; } 
.photoGalary::-webkit-scrollbar, .projects::-webkit-scrollbar, .galary--jq::-webkit-scrollbar{display:none;}
/*- screens -*/
.galary--jq{ display: flex; opacity: 0; position: fixed; top: 120vh; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh; z-index: 999; background: #3A3A3A;
overflow-y: scroll; -webkit-overflow-scrolling:touch; -ms-overflow-style:none;overflow:-moz-scrollbars-none; -webkit-transition: 0.2s;-moz-transition: 0.2s;transition: 0.2s}
.closeGalary{ position: fixed; right: 20px; cursor: pointer; }
.closeGalary p{ color: white; opacity: 0; padding-right: 0; right: 0px; position: absolute; top: 5px; font-size:11px;-webkit-transition: 0.3s;-moz-transition: 0.3s;transition: 0.3s}
.closeGalary:hover p{ padding-right: 10px; opacity: 1; right: 20px; }
.galary--jq .galaryImage{ margin-top: 50px; margin-bottom: 10px; box-sizing: border-box; min-width: 90vw; max-height: 800px; overflow: hidden; display: inline-flex; border-radius: 4px; 
-webkit-transition: padding-top 0.6s;-moz-transition: padding-top 0.6s;transition: padding-top 0.6s}
.galary--jq .galaryImage img{ width: auto; max-width: 100%; height: auto; max-height: 800px;  margin-top: auto; margin-bottom: auto; }
.galary--jq .galaryImage.one-big{padding-top: 100px;}.galary--jq .galaryImage.two-big{padding-top: 160px;}.galary--jq .galaryImage.three-big{padding-top: 240px;}.galary--jq .galaryImage.four-big{padding-top: 380px;}
.closeGalary{ top: -500px; -webkit-transition: top 0.6s;-moz-transition: top 0.6s;transition: top 0.6s }
.galary--jq.show .closeGalary{ top: 15px; }
.galary--jq.show{ top: 0; opacity: 1; }.noscroll{ overflow: hidden; }.galary--jq.show .galaryImage{ padding-top: 0; }.galaryImage img{ border-radius: 4px; }
.topSpace{ margin-top: 30px; }
@media screen and (max-width:850px){ .appSkills{ display: none; } .mobskills{ display: block; } .about{ margin-bottom: 30px; } }
@media screen and (max-width:737px){ 
header{ padding: 10px; }
.main{ margin-top: 20px; } .main, .about{ padding-left: 20px; padding-right: 20px; } .galarySpace{min-width: 20px;} .footer h2{ margin-left: 20px; } 
.galaryImage{ min-width: 300px; } .siteLogo.loaded{ background: none; padding: 0; border-radius: 0; } .siteLogo.loaded p { display: none; }
.siteLogo img{ width: 30px; } .scrolled .siteLogo img{ width: 20px; } .scrolled .siteLogo{ margin-top: -50px; }
.siteLogo.loaded img{ margin-left: 0px; margin-top: 0px; }.arrowDiv{display:none;} .appLogo img{ max-width: 130px; }
header .btns a{width: 100px; text-align: center; padding-top: 5px; padding-bottom: 5px;}
header .btns p{ font-size: 12px; }
}
@media screen and (max-width:580px){
header{ padding-left: 7px; padding-top: 8px; padding-right: 7px; }
.codeForm.active, .privacyForm.active, .termsForm.active{ left: 0; right: 0; top: 0; bottom: 0; border-radius: 0; max-width: 100%; }}
@media screen and (max-width:500px){
header .btns p{ font-size: 14px; }
header .btns a{width: 60px; padding-top: 4px; padding-bottom: 4px; } header .btns p.btnsPDesktpot{ display: none; } header .btns p.btnsPmobile{ display: block; }
.appLogo img{ max-width: 60px; } .galaryImage{ min-width: 200px; } .main{ margin-top: 40px; } .photoGalary{ margin-top: 30px; margin-bottom: 30px; }
.appDescription{ margin-top: 0px; margin-left: 15px; } .appDescriptionBtn{ margin-top: 5px; } .closeGalary p, .qrCode{ display: none; }
}
@media screen and (max-width:370px){
.main, .about{ padding-left: 15px; padding-right: 15px; } .galarySpace{min-width: 15px;} .appDescription p b{ margin-left: 0px; } .footer h2{ margin-left: 15px; } 
.nonFxt{ display: block; } .btns.nonFxt .darkBtn{ margin-bottom: 10px;} .nonFxt.btns a.darkBtn{ margin-left: auto; margin-top: 10px; } .nonFxt.btns a{ margin-left: auto; margin-right: auto; }
}