@font-face {
  font-family: 'Qanelas-UltraLight';
  src: url('fonts/Qanelas-UltraLight.eot'); /* IE9 Compat Modes */
  src: url('fonts/Qanelas-UltraLight.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Qanelas-UltraLight.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/Qanelas-UltraLight.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/Qanelas-UltraLight.ttf')  format('truetype'); /* Safari, Android, iOS */
}

@font-face {
  font-family: 'Qanelas-Light';
  src: url('fonts/Qanelas-Light.eot'); /* IE9 Compat Modes */
  src: url('fonts/Qanelas-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Qanelas-Light.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/Qanelas-Light.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/Qanelas-Light.ttf')  format('truetype'); /* Safari, Android, iOS */
}

@font-face {
  font-family: 'Qanelas-Bold';
  src: url('fonts/Qanelas-Bold.eot'); /* IE9 Compat Modes */
  src: url('fonts/Qanelas-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Qanelas-Bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/Qanelas-Bold.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/Qanelas-Bold.ttf')  format('truetype'); /* Safari, Android, iOS */
}

body { margin: 0px; padding: 0px; background:#0c0a0a; color: #eeeeee; font-family: 'Qanelas-Light', sans-serif; overflow-y: scroll; position: relative; }
body.pic { background:#0c0a0a url(images/me3.jpg) no-repeat center top; background-size: 100%; }
.f-left { float: left; }
.f-right { float: right; }
a { text-decoration: none; color: #fff; }


.wrapper { overflow: hidden; width: 100%; }
.wrapper1 { background: #ffffff; }


/* Header */
.header { padding: 35px 40px; }
.logo { width: 40px; height: 32px; display: inline-block; }
.logo img { width: 100%; }


/* Main Nav */
#nav { float: right; padding: 0px; margin: 10px 0px 0px 0px; }
#nav li { display: inline-block; float: left; }
#nav li:first-child { margin-left: 0px; }
#nav li > span { font-size: 10px; font-weight: 300; color: #ffffff; opacity: 0.2; display: block; padding: 0px 15px; }
#nav li a { display: block; letter-spacing: 3px; opacity: 0.5; transition: all 0.2s ease 0s; text-transform: uppercase; font-size: 10px; font-family: 'Qanelas-Bold', sans-serif; padding-bottom: 10px; }
#nav li a:hover { opacity: 1; }
#nav li.selected a { border-bottom: 2px solid rgba(255,255,255,0.2); opacity: 1; cursor: default; }

#nav li.promo { margin: -8px 0px 0px 15px; }
#nav li.promo a { display: inline-block; background: #f93b2a; color: #ffffff; height: 30px; line-height: 28px; padding: 0px 15px; border-radius: 26px; font-family: 'Qanelas-Bold', sans-serif; font-size: 11px; cursor: pointer; letter-spacing: 1px; text-transform: uppercase; transition: all 0.2s ease 0s; text-shadow: 1px 1px 0px rgba(0,0,0,0.2); opacity: 1; }
#nav li.promo a:hover { background: #d12d26; } 


/* Homepage */
.hp-title { font-size: 3em; line-height: 1.3em; font-family: 'Qanelas-UltraLight', sans-serif; font-weight: normal; padding: 100px; margin: 0px; letter-spacing: 1px; text-align: center; }
.hp-arrow { text-align: center; display: block; font-size: 2em; line-height: 1.3em; font-family: 'Qanelas-UltraLight', sans-serif; padding-bottom: 50px; opacity: 0.25; }

.project-thumb { width: 80%; padding: 0px 10%; margin: 0px auto 80px; max-width: 1000px; text-align: center; display: block; overflow: hidden; letter-spacing: 0.5px; }
.project-thumb.last { margin-bottom: 120px; } 
.project-thumb h2 { font-family: 'Qanelas-Light', sans-serif; font-weight: normal; font-size: 16px; line-height: 18px; margin: 60px 0px 5px; padding: 0px 40px; }
.project-thumb h2 span { text-decoration: line-through; }
.project-thumb h2 span.reg-price { text-decoration: none; }
.project-thumb h2 b { font-weight: normal; color: #f93b2a; }
.project-thumb .info { font-size: 12px; line-height: 14px; color: #808080; display: block; overflow: hidden; padding: 0px 40px 30px; }
.project-thumb a { display: block; opacity: 100; transition: all 0.2s ease 0s; }
.project-thumb a:hover { opacity: 0.5; }
.project-thumb a img { width: 100%; }


/* About */
.about .hp-title { padding-bottom: 50px; }
.about-links { display: block; overflow: hidden; text-align: center; padding: 0px 100px 100px; }
.about-links > div { display: block; margin-bottom: 12px; }
.about-links a { display: inline-block; color: #ffffff; font-size: 18px; border-bottom: 1px solid #ffffff; transition: all 0.2s ease 0s; }
.about-links a:hover { border-bottom: 1px solid transparent; }


/* Cases */
.cases { background:#0c0a0a; }
.cases .hp-title { padding-bottom: 20px; padding-top: 50px; }
.cases .wrapper img.case { width: 100%; margin: 0px auto; max-width: 1000px; display: block; }
.cases .info { padding: 0px 20% 50px; text-align: center; }
.cases .info.two { padding: 20px 20% 10px; }
.cases .info > div { margin-bottom: 8px; font-size: 16px; line-height: 18px; }
.cases .info.bundle-text > div { margin-bottom: 14px; }
.cases .info > div > span { opacity: 1; letter-spacing: 0.5px; }
.cases .info > div > span:first-child { opacity: 0.5; margin-right: 5px; }
.cases .info .link { border-bottom: 1px solid rgba(255,255,255,0.2); transition: all 0.2s ease 0s; }
.cases .info .link:hover { border-bottom: 1px solid #ff5f00; }

.cases .info .buttons { margin-top: 30px; margin-bottom: -20px; }
.cases .info .buttons a { display: inline-block; margin: 0px 10px 15px; color: #000000; height: 50px; line-height: 48px; padding: 0px 35px; border-radius: 26px; font-family: 'Qanelas-Bold', sans-serif; font-size: 11px; cursor: pointer; letter-spacing: 1px; text-transform: uppercase; transition: all 0.2s ease 0s; background: #ffffff; border: 2px solid rgba(255,255,255,0); }
.cases .info .buttons a:hover { background: #000000; border: 2px solid rgba(255,255,255,0.15); color: #ffffff; }
.cases .info .buttons a > span { font-family: 'Qanelas-Light', sans-serif; opacity: 0.75; }
.cases .info .buttons a > b { font-weight: normal; color: #f93b2a; }

.cases .info .buttons a.buy { background: #000000; border: 2px solid rgba(255,255,255,0.15); color: #ffffff; margin: 0px 10px 15px; }
.cases .info .buttons a.buy:hover { display: inline-block; color: #ffffff; height: 50px; line-height: 48px; padding: 0px 35px; border-radius: 26px; font-family: 'Qanelas-Bold', sans-serif; font-size: 11px; cursor: pointer; letter-spacing: 1px; text-transform: uppercase; transition: all 0.2s ease 0s; background: #ffffff; color: #000000; border: 2px solid rgba(255,255,255,0); }

.cases .info .buttons a.promo-buy { background: #7448ff; border-color: #7448ff; }
.cases .info .buttons a.promo-buy:hover { color: #7448ff; }

.cases .info .buttons.bundle { margin-bottom: 0px; }
.cases .info .buttons.bundle a { background: #4285f4; border: none; margin-bottom: 0px; }
.cases .info .buttons.bundle a:hover { color: #4285f4; border: none; margin-bottom: 0px; }


/* Subscribe */
.subscribe .hp-title { padding: 100px 0px 50px; }
.subscribe .info .buttons { margin: 0px; }


/* Popup Form */
#subform { top: 0px; position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,0.85); display: none; }
#subform .signup-popup { width: 40%; min-width: 500px; margin: 20% auto 100px; padding: 30px; background: #ffffff; border-radius: 10px; position: relative; text-align: center; }
.signup-popup .sub-title { font-size: 27px; line-height: 29px; color: #333333; display: block; padding: 30px 0px 20px; }
.signup-popup .subs { display: inline-block; height: 50px; line-height: 48px; padding: 0px 35px; border-radius: 26px; font-family: 'Qanelas-Bold', sans-serif; font-size: 11px; cursor: pointer; letter-spacing: 1px; text-transform: uppercase; transition: all 0.2s ease 0s; background: #000000; color: #ffffff; border: 2px solid rgba(255,255,255,0); margin-bottom: 20px; }
.signup-popup .subs:hover { background: #ffffff; color: #000000; border-color: #000000; }

#close-popup { width: 40px; height: 40px; background: #ffffff url(images/close.png) no-repeat center center; position: absolute; top: -20px; right: -20px; cursor: pointer; border-radius: 20px; transition: all 0.2s ease 0s; box-shadow: 2px 4px 8px rgba(0,0,0,0.25); }
#close-popup:hover { background-color: #eeeeee; }


/* Footer */
.footer { display: block; overflow: hidden; padding: 40px 50px; text-align: center; font-size: 12px; background: #111; margin-top: 40px; }
.footer span { float: left; color: #ffffff; opacity: 0.5; }
.footer ul { list-style: none; margin: 0px; padding: 0px; float: right; }
.footer ul li { display: block; float: left; margin-left: 20px; }
.footer ul li:first-child { margin-left: 0px; } 
.footer ul li span { opacity: 0.25; }
.footer ul li a { font-size: 12px; display: block; color: #ffffff; opacity: 0.5; transition: all 0.2s ease 0s; }
.footer ul li a:hover { opacity: 1; }


/* Cookie Policy */
.banner-cp { z-index: 10; font-size: 10px; padding: 10px 70px 12px 35px; background: #eeeeee; overflow: hidden; color: #666666; letter-spacing: 0.5px; position: relative; }
.banner-cp a { text-decoration: underline; color: #000000; color: #000000; }
.banner-cp a:hover { text-decoration: none; }
.banner-cp .close { position: absolute; z-index: 20; right: 40px; top: 15px; display: block; width: 10px; height: 10px; background: url(images/close2.png) no-repeat center center; background-size: 100%; cursor: pointer; transition: all 0.3s ease 0s; }
.banner-cp .close:hover { transform: rotate(90deg); }

.wrapper1 .hp-title { color: #333333; }
.wrapper1 .text { color: #333333; display: block; overflow: hidden; text-align: left; padding: 0px 100px 100px; max-width: 800px; margin: 0px auto; }
.wrapper1 .text h2 { font-size: 24px; line-height: 27px; font-family: 'Qanelas-Bold', sans-serif; font-weight: normal; color: #333333; margin-top: 60px; letter-spacing: -0.5px; text-indent: -40px; }
.wrapper1 .text h3 { font-family: 'Qanelas-Bold', sans-serif; font-weight: normal; }
.wrapper1 .text p,
.wrapper1 .text ul li { letter-spacing: 0.5px; font-size: 16px; line-height: 22px; }
.wrapper1 .text p.date-up { font-size: 10px; color: #000000; margin-bottom: 30px; }
.wrapper1 .text p.inner { padding-left: 30px; }
.wrapper1 .text a { color: #000000; text-decoration: underline; }
.wrapper1 .text a:hover { text-decoration: none; }

.cookies-center { margin: 25px 0px; padding: 10px 35px 5px; background: #f5f5f5; border: 4px solid #333333; }
.cookies-center h3 { font-size: 21px; line-height: 24px; }
.wrapper1 .text .cookies-center p { font-size: 14px; line-height: 18px; }
.check-activate { margin: -10px 0px 10px; display: block; overflow: hidden; position: relative; }
.check-activate input { float: left; margin-top: 10px; }
.check-activate label, .check-activate .btn-active { font-size: 10px; letter-spacing: 1px; color: #000000; float: left; font-family: 'Qanelas-Bold', sans-serif; text-transform: uppercase; padding: 10px 15px 10px 5px; }


/*Terms and Policy*/
.wrapper1 .text .indent { padding-left: 20px; }
.wrapper1 .text i { font-style: normal; font-weight: normal; font-family: 'Qanelas-Bold', sans-serif; letter-spacing: 0px; }
.wrapper1 .text ul { padding-left: 0px; }
.wrapper1 .text ul li { margin-bottom: 5px; }

/* Fontacular banner */
/*.adbanner { display: block; width: 100%; height: 45px; background: url(images/fontacular.jpg) repeat center top; transition: all 0.5s ease 0s; }
.adbanner:hover { background-position: center bottom; }*/


/* Small Sizes ------------------------------------------------------------------------------------- */
@media screen and (max-width: 800px) {
  .header { padding: 25px; }
  .project-thumb { margin: 0px auto 0px; }
  .project-thumb .info { padding: 0px 40px 10px; }
	.hp-title { font-size: 2em; padding: 50px; }
	#mc_embed_signup { width: 70% }
  #nav li > span { padding: 0px 5px; }
  #subform #mc_embed_signup { min-width: 200px; }

  /* Cookie Policy */
  .banner-cp { padding: 10px 60px 12px 25px; }
  .banner-cp .close { right: 25px; }

  /* Cookies */
  .cc_container .cc_logo { left: auto !important; right: 70px !important; bottom: 12px !important; display: none !important; }
  .wrapper1 .text { padding: 0px 40px 40px; }
  .wrapper1 .text h2 { text-indent: 0px; }

  /* Footer */
  .footer span { float: none; margin-bottom: 10px; display: block; }
  .footer ul { text-align: center; float: none; }
  .footer ul li { float: none; display: inline-block; margin-left: 10px; }
}