/* CSS Document */
/*@import url('https://fonts.googleapis.com/css?family=Cormorant+Infant:400,700&display=swap&subset=cyrillic-ext');*/

/* ------------- clear ------------- */
html, body { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif;/*'Cormorant Infant', serif;*/ font-size: 14px; background: #fff; color: #333;}
ul, ol { list-style:none; margin: 0; padding: 0; }
:focus {outline: 0;}

/* ------------- default ------------- */
a{color: #000;text-decoration: none;}
a:hover{text-decoration: underline;}
a.box{display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 9;}
a.box:hover{text-decoration: none;}
h1, h2, h3, h4{margin: 10px 0; padding: 0;}
p{margin: 0 0 10px 0; padding: 0; font-size: 16px;line-height: 24px; text-align: justify;}
.hidden{display: none;}
.relative{position: relative;}
.inline-block{display: inline-block;}
img.responsive{max-width: 100% !important;}
.effect{opacity: 0;filter: alpha(opacity=0);}
.visible{opacity: 1;filter: alpha(opacity=1);}
.line-through{text-decoration: line-through;}
.clear{clear: both;width: 100%;height: 0px;}
.space-20px{width: 100%;height: 20px;}
.space-50px{width: 100%;height: 50px;}
.m20{margin: 20px;}
.center{text-align: center;}
img#preloader{position: absolute; top: 7px; left: 7px; z-index: 99999; display: none;}
.half{width: calc(50% - 40px); margin: 20px; float: left;}
.box1-3{width: calc(33.3% - 40px); margin: 20px; float: left;}

.youtube-holder{max-width: 100%; position: relative; margin: 0; height: 0px; overflow: hidden; padding-bottom: 56.25%;}
.youtube-holder iframe{position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%;}

/* ------------- outer ------------- */
div.outer{width: calc(100% - 24px); max-width: 1300px; padding: 0 10px; margin: 0 auto; position: relative;}
div.outer.p20{padding-top: 20px; padding-bottom: 20px;}
div.outer h1{font-size: 32px; margin-bottom: 20px;}
div.outer h2{font-size: 26px; margin-bottom: 20px;}
div.outer h3{font-size: 24px; margin-bottom: 20px;}
div.small-content{max-width: 800px; margin: 0 auto;}

div.section.gray{background: #f7f7f7 url('/global/images/bg/lines.png') left top repeat; border-top: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;}

/* ------------- header ------------- */
div.header-section{height: 141px; background: #3A4245 url('/global/images/bg/header_section.jpg') center top repeat-x; border-bottom: 1px solid #2D2D2D;}
div.header-section.home{height: 599px; background: #3A4245 url('/global/images/bg/header_section_home.jpg') center top repeat-x; border-bottom: 1px solid #2D2D2D;}
div.header-section div.header{height: 79px; background: transparent url('/global/images/bg/header_bg.png') center top repeat-x;}
div.header-section div.spec{height: 520px; width: 600px; margin-left: 80px; background: transparent url('/global/images/bg/header_spec_bg.png') center center no-repeat; position: relative;}
div.header-section div.spec div.s-w3d{position: absolute; top: 173px; left: 145px; width: 242px; height: 272px; background: transparent url('/global/images/spec/w3d.png') center center no-repeat;}
div.header-section div.spec div.s-html{position: absolute; top: 162px; left: 517px; width: 70px; height: 95px; background: transparent url('/global/images/spec/html.png') center center no-repeat;}
div.header-section div.spec div.s-css{position: absolute; top: 176px; left: 412px; width: 45px; height: 60px; background: transparent url('/global/images/spec/css.png') center center no-repeat;}
div.header-section div.spec div.s-mysql{position: absolute; top: 30px; left: 440px; width: 104px; height: 58px; background: transparent url('/global/images/spec/mysql.png') center center no-repeat;}
div.header-section div.spec div.s-php{position: absolute; top: 20px; left: 191px; width: 63px; height: 70px; background: transparent url('/global/images/spec/php.png') center center no-repeat;}
div.header-section div.spec div.s-jquery{position: absolute; top: 50px; left: 8px; width: 69px; height: 72px; background: transparent url('/global/images/spec/jquery.png') center center no-repeat;}
div.header-section div.spec div.s-js{position: absolute; top: 260px; left: 41px; width: 56px; height: 75px; background: transparent url('/global/images/spec/js.png') center center no-repeat;}
div.header-section div.header .mobile-mbtn{display: none;}
div.header-section div.header ul.menu{float: right; margin-top:28px}
div.header-section div.header ul.menu li{display:inline-block;}
div.header-section div.header ul.menu li a{color: #fff; padding: 0 20px; display: block; font-size: 18px; -webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;}
div.header-section div.header ul.menu li a:hover, div.header-section div.header ul.menu li a.active{text-decoration: none; color: #FC0000;}
div.header-section div.tech{padding: 10px 0; text-align: center;}
div.header-section div.tech span{display: inline-block; height: 40px; margin-right: 30px;}
div.header-section div.tech span.html{width: 30px; background: url('/global/images/spec/tech_sprite.png') left center no-repeat;}
div.header-section div.tech span.css{width: 30px; background: url('/global/images/spec/tech_sprite.png') left -34px center no-repeat;}
div.header-section div.tech span.js{width: 30px; background: url('/global/images/spec/tech_sprite.png') left -73px center no-repeat;}
div.header-section div.tech span.jquery{width: 40px; background: url('/global/images/spec/tech_sprite.png') left -110px center no-repeat;}
div.header-section div.tech span.php{width: 30px; background: url('/global/images/spec/tech_sprite.png') left -155px center no-repeat;}
div.header-section div.tech span.mysql{width: 71px; background: url('/global/images/spec/tech_sprite.png') left -195px center no-repeat;}
div.header-section div.tech span.w3d{width: 32px; background: url('/global/images/spec/tech_sprite.png') left -276px center no-repeat;}

/* ------------- home ------------- */
div.swipe-box{position: relative; margin: 40px 0; overflow: hidden;}
div.swipe-box span.detail{font-size: 18px; position: absolute; font-weight: bold;top: 60%;left: 280px;color: #46b421; width: 445px;}
div.swipe-box span.detail.front{color: #d00000;}
div.swipe-box div.box-overlay{position: absolute; top: 0px; left: 0px; width: 50%; overflow: hidden; display: none; z-index: 1; background: #fff;}
div.swipe-box div.box-overlay img{height: 100%; width: auto;}
div.swipe-box div.drag-handle{width: 56px; background: url('/global/images/drag_handle.png') center center no-repeat; position: absolute; top: 0; bottom: 0; left: calc(50% - 28px); display: none; z-index: 2;}

div.box4{margin: 30px; width: calc(25% - 60px); float: left; -webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;}
div.box4 i.hm-icon{font-size: 80px;}
div.box4 div.itext{padding-top: 10px; font-weight: bold; font-size: 16px;}
div.box4.hover-effect:hover{color: #d00000;}

div.resp-view{}
div.resp-view img{max-width: 100%;}
div.resp-thumbs{text-align: center; margin:30px 0 0 0;}
div.resp-thumbs a{font-size: 40px; display: inline-block; margin: 0 20px; -webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;}
div.resp-thumbs a.active, div.resp-thumbs a:hover{text-decoration: none; color: #d00000;}

/* ------------- pages ------------- */
div.page div.content img{float: left; margin: 0 30px 30px 0; max-width: 45%; -webkit-box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.49);-moz-box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.49);box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.49);}

/* ------------- portfolio ------------- */
div.page-portfolio{margin-top: 30px;}
div.page-portfolio div.half{text-align: center; padding: 30px; margin: 0; width: calc(50% - 60px);}
div.page-portfolio div.half.dark, div.page-portfolio div.half.dark2{background: #ededed url(/global/images/bg/footer.jpg) left top repeat;}
div.page-portfolio div.site{width: 300px; float: left;}
div.page-portfolio div.site div.front{-webkit-box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.49);-moz-box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.49);box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.49);}
div.page-portfolio div.site div.front img{width: 100%;}
div.page-portfolio div.site div.back{-webkit-box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.49);-moz-box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.49);box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.49);}
div.page-portfolio div.site div.back img{width: 100%;}
div.page-portfolio div.site-data{width: calc(100% - 330px); margin-left: 30px; float: left; text-align: justify;}
div.page-portfolio div.site-data p{font-size: 14px; margin: 0; line-height: 19px;}
div.page-portfolio h2{margin-top: 20px;}
div.page-portfolio a{display: inline-block; color: #333; margin: 15px 0 0 0;font-size: 16px; -webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;}
div.page-portfolio a:hover{text-decoration: none; color: #FC0000;}
div.page-portfolio div.tech{margin-top: 30px; text-align: center;}
div.page-portfolio div.tech div{font-size: 12px; color: #666;}
div.page-portfolio div.tech span{display: inline-block; height: 40px; margin-right: 10px;}
div.page-portfolio div.tech span.html{width: 30px; background: url('/global/images/spec/tech_sprite.png') left center no-repeat;}
div.page-portfolio div.tech span.css{width: 30px; background: url('/global/images/spec/tech_sprite.png') left -34px center no-repeat;}
div.page-portfolio div.tech span.js{width: 30px; background: url('/global/images/spec/tech_sprite.png') left -73px center no-repeat;}
div.page-portfolio div.tech span.jquery{width: 40px; background: url('/global/images/spec/tech_sprite.png') left -110px center no-repeat;}
div.page-portfolio div.tech span.php{width: 30px; background: url('/global/images/spec/tech_sprite.png') left -155px center no-repeat;}
div.page-portfolio div.tech span.mysql{width: 71px; background: url('/global/images/spec/tech_sprite.png') left -195px center no-repeat;}
div.page-portfolio div.tech span.w3d{width: 32px; background: url('/global/images/spec/tech_sprite.png') left -276px center no-repeat;}

/* ------------- faq ------------- */
div.faq{}
div.faq div.fmenu{width: 270px; margin-right: 40px; float: left;}
div.faq div.fmenu div.title{margin-bottom: 10px; font-size: 18px;}
div.faq div.fmenu ul{border-top: 1px solid #efefef;}
div.faq div.fmenu ul li{display: block; width: 100%; border-bottom: 1px solid #efefef;}
div.faq div.fmenu ul li a{display: block; padding: 5px 10px; color: #7b7b7b;}
div.faq div.fmenu ul li a i{color: #FC0000;}
div.faq div.fmenu ul li a:hover{text-decoration: none; color: #FC0000;}
div.faq div.fmenu ul li:hover, div.faq div.fmenu ul li.active{background: #f5f5f5;}
div.faq div.fmenu ul li.active a{background: #f5f5f5; color: #FC0000;}
div.faq div.fcontent{width: calc(100% - 310px); float: right;}
div.faq div.fcontent img{float: left; margin: 0 30px 30px 0; max-width: 45%; -webkit-box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.49);-moz-box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.49);box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.49);}

div.page div.fcontent ul{list-style: square;padding-left: 30px;}
div.page div.fcontent ul li{font-size: 16px; padding: 2px 0;}
div.page div.content ul{list-style: square;padding-left: 30px;}
div.page div.content ul li{font-size: 16px; padding: 2px 0;}

/* ------------- footer ------------- */
div.footer{background: #ededed url('/global/images/bg/footer.jpg') left top repeat; border-top: 1px solid #cecece;}
div.footer div.f-logo{width: 300px; margin-right: 40px; float: left;}
div.footer div.f-contacts{width: 185px; margin-right: 40px; float: left; color: #666;}
div.footer div.f-contacts div.title{font-size: 18px; font-weight: bold; margin-bottom: 10px;}
div.footer div.f-contacts ul{}
div.footer div.f-contacts ul li{margin: 10px 0;}
div.footer div.f-contacts ul li a{color: #666; -webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;}
div.footer div.f-contacts ul li a:hover{color: #FC0000; text-decoration: none;}
div.footer div.fbook{width: 300px; float: right;}
div.footer div.copyr{border-top: 1px solid #bdbdbd; padding: 5px 0;}
div.footer div.copy{height: 17px; line-height: 17px; color: #727374; background: url('/global/images/logo_copy.png') left center no-repeat; padding-left: 22px;}

/* ------------- breadcrumb ------------- */
div.breadcrumb{padding: 10px 0; font-size: 12px; color: #666; border-bottom: 1px solid #efefef;}
div.breadcrumb a{color: #666;}
div.breadcrumb a:last-child{color: #222;}
div.breadcrumb a:hover{color: #000; text-decoration: none;}

/* ------------- paginator ------------- */
div.paginator{text-align: center; margin: 15px 0;}
div.paginator a.pg-btn{display: inline-block;margin: 2px;padding: 4px 8px;font-size: 14px;background: #000000a8; color: #fff; text-decoration: none; border-radius: 4px;-moz-border-radius: 4px; font-family: arial; -webkit-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
div.paginator a.pg-btn.pg-current, div.paginator a.pg-btn:hover{background:#000000;}

/* ------------- forms ------------- */
div.contact-form{margin-top: 50px; background: url('/global/images/bg/cform-bg.jpg') left top no-repeat; padding-top: 10px;}
div.contact-form .box1-3, div.contact-form .m20, div.contact-form .half{margin-top: 5px; margin-bottom: 5px;}
div.form-separator{color: #000; font-size: 18px; border-bottom: 1px solid #000; margin-bottom: 20px;}
div.form-label{font-size: 14px; margin-bottom: 10px;}
div.form-field{width: 100%; margin-bottom: 20px; height: 27px; position: relative;}
div.form-field input{background: #fff; border: 1px solid #ccc; width: calc(100% - 2px); height: 25px; line-height: 25px; text-indent: 10px;}
div.form-field input.checkbox{width: 16px; height: 16px; margin-right: 10px;}
div.form-field select{background: #fff; border: 1px solid #ccc; width: 100%; height: 25px; line-height: 25px;}
div.form-field textarea{background: #fff; border: 1px solid #ccc; width: calc(100% - 4px); height: 80px; text-indent: 10px;}
div.slidercaptcha{max-width: 300px; height: 215px;}
div.slidercaptcha div.card-header{margin-bottom: 5px; font-size: 15px;}
div.save-ajax, .btn-sbm{padding: 10px 30px;background: #e60011; color: #fff; display: inline-block; cursor: pointer; border: none;}
div.save-ajax:hover, .btn-sbm:hover{background: #000;}
img.save-ajax-load{display:none;}

div.contact-more{background: #f7f7f7; border: 1px solid #dedede; padding: 20px; color: #666; margin-top: 22px;}
div.contact-more div.title{font-size: 16px; font-weight: bold; margin-bottom: 10px;}
div.contact-more ul{}
div.contact-more ul li{margin: 10px 0;}
div.contact-more ul li a{color: #666; -webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;}
div.contact-more ul li a:hover{color: #FC0000; text-decoration: none;}
/* ------------- form validation ------------- */
div.form-field.error input{border: 1px solid #e60011;}
div.err-text::after{position: absolute; bottom: -12px; left: 2px; font-size: 9px; color: #e60011; content: "задължително поле."}
div.err-text input{border: 1px solid #e60011;}
div.err-text textarea{border: 1px solid #e60011;}
div.err-mail::after{position: absolute; bottom: -12px; left: 2px; font-size: 9px; color: #e60011; content: "невалиден имейл."}
div.err-mail input{border: 1px solid #e60011;}
div.err-mail-exist::after{position: absolute; bottom: -12px; left: 2px; font-size: 9px; color: #e60011; content: "въведеният имейл вече съществува."}
div.err-mail-exist input{border: 1px solid #e60011;}
div.err-passwd::after{position: absolute; bottom: -12px; left: 2px; font-size: 9px; color: #e60011; content: "паролата трябва да има поне 4 символа."}
div.err-passwd input{border: 1px solid #e60011;}
div.err-passwd-diff::after{position: absolute; bottom: -12px; left: 2px; font-size: 9px; color: #e60011; content: "въведените пароли са различни."}
div.err-passwd-diff input{border: 1px solid #e60011;}

/* ------------- popup ------------- */
div.mfp-inline-holder div.mfp-content{width: calc(100% - 50px);max-width: 600px;background: #fff;padding: 20px;border: 1px solid #666;}
div.mfp-inline-holder div.mfp-content div.pp-ttl{font-size: 18px;margin-bottom: 10px;}
div.mfp-inline-holder div.mfp-content .success{color: #046b04;}
div.mfp-inline-holder div.mfp-content .warning{color: #ce6000;}
div.mfp-inline-holder div.mfp-content .error{color: #900;}

/* for 1150px or less */
@media screen and (max-width: 1150px) {
	div.page-portfolio div.site{width: 300px;float: none;margin: 0 auto;}
	div.page-portfolio div.site-data{width: 100%;margin-left: 0;float: none;margin-top: 20px;}
}

/* for 990px or less */
@media screen and (max-width: 990px) {
	div.header-section div.header ul.menu li a{padding: 0 10px;font-size: 16px;}
}

/* for 940px or less */
@media screen and (max-width: 940px) {
	div.resp-thumbs a{margin: 0 5px;}
	div.page-portfolio div.site div.back a{margin: 10px 0;}
	div.page-portfolio h2{font-size: 22px;margin-bottom: 10px;}
}

/* for 890px or less */
@media screen and (max-width: 890px) {
	div.footer div.f-logo{width: 245px;margin-right: 15px;}
	div.footer div.f-contacts{margin-right: 20px;}
}

/* for 840px or less */
@media screen and (max-width: 840px) {
	div.header-section.home{height: auto;}
	div.header-section.home div.spec{background: url('/global/images/mobile_home.png') left 50px center no-repeat;height: 300px;background-size: auto 100%;width: auto;margin: 0;}
	div.header-section.home div.spec div{display: none;}
	
	div.header-section div.header .mobile-mbtn{display: block; position: absolute; top: 30px; right: 40px; font-size: 23px; color: #fff; cursor: pointer;}
	div.header-section div.header ul.menu{display:none; float: none; top: 79px; left: 0px; margin-top: 0;position: absolute;z-index: 10;background: #131517;width: 100%;}
	div.header-section div.header ul.menu li{display: block;border-bottom: 1px solid #333;}
	div.header-section div.header ul.menu li a{padding: 8px 15px;font-size: 16px;}
	
	div.our-views div.box4{margin: 10px;width: calc(25% - 20px);}
	div.our-views div.box4 i{font-size: 50px;}
	div.our-views div.box4 div.itext{padding-top: 10px;font-weight: normal;font-size: 10px;}
	
	div.page-portfolio div.half{width: calc(100% - 60px);}
	div.page-portfolio div.site{width: 300px; float: left;}
	div.page-portfolio div.site-data{width: calc(100% - 330px); margin-left: 30px; float: left; text-align: justify;}
	div.page-portfolio div.half.light2{background: #ededed url(/global/images/bg/footer.jpg) left top repeat;}
	div.page-portfolio div.half.dark2{background: #fff;}
	
	div.faq div.fcontent img{float: none; margin: 0 auto; max-width: 100%; margin-bottom: 20px;}
}

/* for 790px or less */
@media screen and (max-width: 790px) {
	div.footer div.fbook{float: left;padding-top: 20px;}
}

/* for 710px or less */
@media screen and (max-width: 710px) {
	div.footer div.f-logo{margin-right: 10px;}
	div.footer div.f-contacts{width: 200px;margin-right: 10px;}
}

/* for 680px or less */
@media screen and (max-width: 680px) {
	div.half{width: calc(100% - 20px);margin: 20px 10px;}
	p{text-align: justify; font-size: 14px;}
	div.page div.fcontent ul li{font-size: 14px;}
	div.page div.content ul li{font-size: 14px;}
}

/* for 610px or less */
@media screen and (max-width: 610px) {
	div.swipe-box span.detail{font-size: 14px;top: 60%;left: 205px;}
	
	div.faq div.fmenu{width: 100%;}
	div.faq div.fcontent{width: 100%;margin-top: 20px;}
	
	div.page-portfolio div.site{width: 300px;float: none;margin: 0 auto;}
	div.page-portfolio div.site-data{width: 100%;margin-left: 0;float: none;margin-top: 20px;}
}

/* for 540px or less */
@media screen and (max-width: 540px) {
	div.footer div.f-logo{width: 100%;text-align: center;margin-bottom: 20px;}
	div.footer div.f-contacts{float: none;margin: 0 auto;}
	div.header-section div.tech span{margin-right: 10px;}
	div.page div.content img{float: none;margin: 0 0 20px 0;max-width: 100%;}
	
	div.contact-form .box1-3{width: calc(100% - 40px);}
	div.footer div.fbook{float: none;margin: 0 auto;}
}

/* for 480px or less */
@media screen and (max-width: 480px) {
	div.header-section.home div.spec{background: url('/global/images/mobile_home.png') left 20px center no-repeat;background-size: auto 100%;height: 200px;}
	div.our-views div.box4 div.itext{display: none;}
	div.swipe-box span.detail{font-size: 12px;top: 60%;left: 140px;}
	
	div.outer h1{font-size: 24px;}
	div.outer h2{font-size: 20px;}
	div.outer h3{font-size: 18px;}
}

/* for 420px or less */
@media screen and (max-width: 420px) {
	div.page-portfolio div.site div.back div.tech{display: none;}
}

/* for 380px or less */
@media screen and (max-width: 380px) {
	div.swipe-box span.detail{font-size: 10px;left: 100px;}
	div.header-section div.tech span{margin-right: 1px;}
	div.header-section div.header .mobile-mbtn{top: 15px;right: 10px;}
	
	div.page-portfolio div.half{padding: 20px 10px; width: calc(100% - 20px);}
}

/* for 350px or less */
@media screen and (max-width: 350px) {
	div.page-portfolio div.site{width: 270px;}
}

/* for 330px or less */
@media screen and (max-width: 330px) {
	div.slidercaptcha{margin-left: -10px;}
}