/*
 * artstudio.gr: the look of the old site (Bootstrap 3 "Modern Business" theme + the artstudio styles),
 * on top of Bootstrap 3.4.1. The old site's own files (logo, icon sprite, "25+ years", the cf_helvetica-light font)
 * are copied by the deploy script to /userfiles/brand/.
 */

@font-face {
  font-family: 'cf_helvetica-light';
  src: url('../userfiles/brand/fonts/cfhelvetica-light-webfont.woff') format('woff'),
       url('../userfiles/brand/fonts/cfhelvetica-light-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---- global (modern-business.css, styles.css) */
html, body { height: 100%; }
body {
  padding-top: 118px; /* fixed top nav */
  font-family: "cf_helvetica-light", Helvetica, Arial, sans-serif;
  line-height: 1.60em;
  font-size: 17px;
  color: #333;
  background: #fff;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: "cf_helvetica-light", Helvetica, Arial, sans-serif; }
a { text-decoration: none; color: #CC212A; }
a:hover, a:active, a:focus { outline: 0 !important; border: none; text-decoration: none; color: #333; }
a.plain { color: inherit; }
img { max-width: 100%; height: auto; }
picture { display: block; }
.btn:active, .btn.active { box-shadow: none; }
.btn-art { border-radius: 0; color: #fff; background: #CC212A; border: none; }
.btn-art:hover, .btn-art:active, .btn-art:focus { color: #fff; background: #CC212A; }
.btn-art-inverse, .btn-art.btn-art-inverse { background: none; color: #CC212A; }
.btn-art-inverse:hover, .btn-art-inverse:active, .btn-art-inverse:focus { background: none; color: #333; }
.btn-square { border-radius: 0; }
.thumbnail { padding: 0; border: none; border-radius: 0; box-shadow: 0 2px 3px rgba(0,0,0,.2); }
.mtop10 { margin-top: 10px; } .mtop20 { margin-top: 20px; } .mtop30 { margin-top: 30px; } .mtop49 { margin-top: 49px; }
.mbottom10 { margin-bottom: 10px; } .mbottom15 { margin-bottom: 15px; } .mbottom20 { margin-bottom: 20px; }
.fontsize20 { font-size: 20px; } .fontsize18 { font-size: 18px; } .fontsize15 { font-size: 15px; }
.section, .section-colored { padding: 50px 0; }
.img-home-portfolio, .img-customer, .portfolio-item { margin-bottom: 30px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- header (the old customised navbar-inverse: white, red line) */
.navbar-inverse { background-color: #fff; border-color: #D9212D; border-width: 0 0 1px; }
.navbar-fixed-top { border-radius: 0; }
#main-nav { min-height: 118px; margin-bottom: 20px; }
.navbar-inverse .navbar-nav > li > a { color: #999; }
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus { color: #D3252E; background-color: transparent; }
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus { color: #D3252E; background-color: transparent; }
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border-color: #CE1D27; }
.navbar-toggle, .navbar-inverse .navbar-toggle { background-color: #D9212D; border-color: transparent; }
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { background-color: #333; }
.navbar-inverse .navbar-toggle .icon-bar { background-color: #fff; }
.navbar-nav > li > a { padding: 15px 0; margin: 0 0 0 6px; font-size: 16px; line-height: 28px; }
.navbar-ex1-collapse { position: relative; }
.nav-lang { position: absolute; top: 0; right: 0; margin-top: 5px; }
.nav-lang > li > a, .nav-lang > li > span {
  font-size: 12px; line-height: 20px; padding: 0; margin: 0 0 0 4px; border: none; float: left; text-transform: uppercase;
}
.navbar-inverse .nav-lang > li > a { color: #999; }
.navbar-inverse .nav-lang > li > a:hover { color: #D3252E; }
.nav-lang .active-lang { color: #333; }

/* logo: the old image; without it the same words in text */
a#logo_top {
  display: block; height: 55px; overflow: hidden; margin: 31px 0; width: 365px; padding: 0; position: relative; z-index: 10;
  color: #D9212D; font-size: 44px; line-height: 44px; letter-spacing: -1px; white-space: nowrap;
}
a#logo_top b { font-weight: 700; }
a#logo_top small { display: inline-block; margin-left: 8px; font-size: 11px; line-height: 13px; letter-spacing: 1px; color: #8A8C8F; vertical-align: middle; text-transform: none; }
a#logo_top.has-img { background: url("../userfiles/brand/logo_365x55.jpg") no-repeat 0 0; text-indent: -9999em; }

.slogan_home {
  display: block; width: 295px; height: 21px; position: absolute; right: 0; top: 46px;
  font-size: 24px; line-height: 28px; font-weight: normal; color: #333; text-align: left;
}
.slogan_home.has-img { text-indent: -9999em; background: url("../userfiles/brand/25-years.png") no-repeat 0 0 transparent; }
.slogan_home.no-img { font-size: 16px; text-align: right; top: 40px; color: #8A8C8F; }
.slogan_home span { font-size: 14px; line-height: 18px; margin-bottom: 10px; vertical-align: text-top; }

/* ---- home page */
.carousel { height: 450px; }
.carousel .item, .carousel .carousel-inner { height: 100%; }
#myCarousel { box-shadow: 0 2px 3px rgba(0,0,0,.2); background: #000; }
#myCarousel .item img { width: 100%; height: 450px; object-fit: cover; }
#myCarousel .carousel-control { width: 4%; height: 65px; top: auto; bottom: 0; background: none !important; }
#myCarousel .carousel-indicators { margin-bottom: 0; bottom: 6px; }
.carousel-control .icon-prev, .carousel-control .icon-next { margin-left: 0; font-size: 24px; }
#index .section { padding: 20px 0 30px 0; }
#intro_home h1, #intro_home .h2 { margin-bottom: 10px; margin-top: 15px; font-size: 30px; font-weight: 500; }
#intro_home h2.h3 { margin-top: 0; color: #8A8C8F; font-size: 24px; font-weight: 500; }
#intro_home p { padding: 0 40px; font-size: 17px; }
.text-label { font-size: 24px; line-height: 30px; border-top: 1px solid #D22426; position: relative; padding-top: 30px; margin: 0 0 30px; }
#services_home_items h3 { margin-top: 0; line-height: 1; text-transform: uppercase; font-size: 16px; font-weight: 700; }
#services_home_items h3 i.icon-sprite { margin: 0 auto 10px; display: block; width: 64px; height: 64px; background: url("../userfiles/brand/icon-sprite.png") no-repeat 0 0 transparent; }
#services_home_items h3 i.icon-id { background-position: 0 -256px; }
#services_home_items h3 i.icon-pack { background-position: 0 -320px; }
#services_home_items h3 i.icon-print { background-position: 0 -384px; }
#services_home_items h3 i.icon-web { background-position: 0 -448px; }
#services_home_items h3 i.icon-stand { background-position: 0 -512px; }
#services_home_items h3 i.icon-support { background-position: 0 -576px; }
#services_home_items p { font-size: 15px; line-height: 1.4em; }
#method .lead { font-size: 18px; margin: 40px auto 10px auto; }
#method ul li { line-height: 64px; padding: 0 10px; font-size: 18px; font-weight: 700; }
#method ul li i.icon-sprite { margin: 0; display: inline-block; width: 64px; height: 64px; vertical-align: bottom; background: url("../userfiles/brand/icon-sprite.png") no-repeat 0 0 transparent; }
#method ul li i.icon-step1 { background-position: 0 0; }
#method ul li i.icon-step2 { background-position: 0 -64px; }
#method ul li i.icon-step3 { background-position: 0 -128px; }
#method ul li i.icon-step4 { background-position: 0 -192px; }
#testimonials_home #quote-carousel { margin-top: 0; }
#quote_home blockquote { border-top: 1px solid #D22426; border-bottom: 1px solid #D22426; border-left: none; border-right: none; padding: 40px 0; text-align: center; }
#quote_home blockquote p { font-size: 24px; margin-bottom: 10px; font-weight: 300; }
#quote_home blockquote p .fa { font-size: 16px; line-height: 30px; vertical-align: bottom; }
#quote_home blockquote small:before { content: none; }
#quote_home blockquote small { color: #333; font-weight: 700; }

/* tiles: rows line up even when the photos are not all the same height */
.tiles { display: flex; flex-wrap: wrap; }
.tiles:before, .tiles:after { display: none; }
#portfolio_home_items .portfolio-item img, .portfolio-images .first-item img, .portfolio-images .all-items img, #products .portfolio-item img {
  box-shadow: 0 2px 3px rgba(0,0,0,.2);
}
#products .portfolio-item a { display: block; }

/* ---- testimonials carousel */
#quote-carousel { padding: 0 10px 30px 10px; min-height: 165px; height: auto; margin-top: 40px; }
#quote-carousel .carousel-inner, #quote-carousel .item { height: auto; }
#quote-carousel .carousel-control { background: none; color: #222; font-size: 24px; text-shadow: none; margin-top: 30px; width: 40px; opacity: .5; }
#quote-carousel .carousel-control:hover { opacity: .9; }
#quote-carousel .carousel-control.left { left: -80px; }
#quote-carousel .carousel-control.right { right: -80px !important; }
#quote-carousel .carousel-indicators { right: 50%; top: auto; bottom: 0; margin-right: -19px; }
#quote-carousel .carousel-indicators li { background: #fff; border-color: #777; }
#quote-carousel .carousel-indicators .active { background: #777; }
#quote-carousel .item { padding: 0 50px; margin: 0; }
#quote-carousel .item blockquote { border-left: none; margin: 0; padding: 0; }
#quote-carousel .item blockquote p { margin-bottom: 0; padding-bottom: 10px; font-size: 17.5px; line-height: 1.25; font-weight: 300; }
#quote-carousel .item blockquote p:before { content: "\f10d"; font-family: 'FontAwesome'; float: left; margin-right: 6px; }
#quote-carousel .item blockquote p:after { content: "\f10e"; font-family: 'FontAwesome'; display: inline-block; margin-left: 6px; }
#quote-carousel blockquote small:before { content: none; }
#quote-carousel blockquote small { font-size: 16px; font-weight: 700; color: #333; }

/* ---- portfolio */
#catnav { padding: 15px 0; }
#catnav li { display: inline-block; float: none; }
#catnav li a { color: #999; border-radius: 0; font-size: 15px; }
#catnav li a:hover, #catnav li.active a { color: #D3252E; background: #eee; }
#single-product { font-size: 12pt; }
#single-product ul, #single-product ol { padding-left: 15px; }
.portfolio-title { font-size: 36px; font-weight: normal; margin-top: 45px; margin-bottom: 30px; color: #111; line-height: 1.1; }
.portfolio-title small { color: #333; }
.company, .scope { margin-bottom: 15px; font-size: 17px; }
.company strong, .scope strong { font-size: 14px; }
.scope p { line-height: 1.4em; }
.pager.portfolio-pager { margin-top: 0; text-align: left; font-size: 12px; padding: 0 !important; }
.pager.portfolio-pager li > a { background: #fff; border: none; border-radius: 0; padding: 5px 20px 5px 0; text-transform: uppercase; color: #666; font-weight: 700; }
.pager.portfolio-pager li > a:hover { background: #fff; color: #333; }
.portfolio-images { padding: 0; }
.portfolio-images .first-item, .portfolio-images .all-items { padding-bottom: 30px; }

/* ---- blog */
.article { clear: both; margin-bottom: 30px; }
.article h2, .article h3 { margin-top: 0; font-size: 26px; }
.article h2 a, .article h3 a { color: #333; }
.article .meta { font-size: 14px; }
.article .excerpt { margin-top: 10px; font-size: 17px; line-height: 1.2em; }
.share { margin-top: 40px; }
.share strong { font-size: 14px; }
.share a { color: #333; }
.share #mail-share:hover { color: #D0222B; }
.share #facebook-share:hover { color: #3B5998; }
.share #twitter-share:hover { color: #39A9E0; }
.share #linkedin-share:hover { color: #007fb1; }
.share #pinterest-share:hover { color: #CB2028; }
.sidebar { margin-top: 0; margin-bottom: 0; }
.sidebar .sidebar-block { margin-bottom: 30px; }
.sidebar h3 { font-size: 22px; margin-top: 0; margin-bottom: 0; padding-bottom: 10px; line-height: 30px; border-bottom: 1px solid #eee; }
.sidebar ul { padding: 10px 0; }
#single-article .meta { margin-top: 0; margin-bottom: 20px; font-size: 14px; }
#single-article .share { margin-top: 0; margin-bottom: 20px; }

/* ---- page content blocks (parts.css) */
.page-cont .page-title { margin-top: 0; margin-bottom: 20px; font-size: 30px; line-height: 1.1; }
.page-cont h1, .page-cont h2, .page-cont h3 { margin-top: 0; margin-bottom: 20px; }
.page-cont h2 { font-size: 26px; }
.page-cont .meta { font-size: 14px; }
.page-cont p { margin-top: 0; margin-bottom: 20px; font-size: 17px; }
.page-cont .gallery .image { margin-bottom: 20px; }
.page-cont .part { margin-bottom: 10px; }
.image-left .image { max-width: 40%; padding: 0 20px 10px 0; position: relative; z-index: 2; }
.image-right .image { max-width: 40%; padding: 0 0 10px 20px; position: relative; z-index: 2; }
.image-left .image a, .image-right .image a { display: block; }
.not-found { padding: 60px 0; }

/* ---- footer */
footer { background: #eee; padding: 50px 0; margin: 30px 0 0 0; color: #666; text-align: center; }
.footer_links { padding-bottom: 50px; }
.footer_links h3 { font-size: 20px; }
.copyright { padding-top: 50px; border-top: 1px solid #fff; }
.copyright p { margin-bottom: 0; }
.list-social-icons { margin-bottom: 45px; }
.tooltip-social a { text-decoration: none; color: inherit; }
.facebook-link a:hover { color: #3b5998; }
.linkedin-link a:hover { color: #007fb1; }
.instagram-link a:hover { color: #c13584; }
.pinterest-link a:hover { color: #cb2027; }

/* ---- contact (forms.css) */
#contact { padding-bottom: 0; }
#contact .form-group { margin-bottom: 20px; }
#contact textarea { resize: vertical; min-height: 173px; }
#contact iframe { display: block; margin-bottom: 20px; }
.message p { padding: 20px; }
.message .bg-success { background-color: #dff0d8; }
.message .bg-danger { background-color: #f2dede; }
#submit { margin-top: 15px; }
.captcha-box { margin-top: 15px; }
.grecaptcha-badge { visibility: hidden; }

/* ---- lightbox (the old ekko-lightbox "dark" theme: white veil) */
.lb { position: fixed; inset: 0; z-index: 2000; background: rgba(255,255,255,.92); display: none; align-items: center; justify-content: center; }
.lb.open { display: flex; }
.lb figure { margin: 0; max-width: 92vw; max-height: 88vh; text-align: center; }
.lb img { max-width: 92vw; max-height: 82vh; box-shadow: 0 0 20px rgba(0,0,0,.2); }
.lb figcaption { color: #333; font-size: 15px; margin-top: 8px; }
.lb button { position: absolute; background: none; border: 0; color: #333; opacity: .6; font-size: 36px; line-height: 1; padding: 10px 16px; cursor: pointer; }
.lb button:hover, .lb button:focus { opacity: 1; outline: none; }
.lb .lb-close { top: 10px; right: 10px; font-size: 40px; }
.lb .lb-prev { left: 10px; top: 50%; margin-top: -30px; }
.lb .lb-next { right: 10px; top: 50%; margin-top: -30px; }
body.lb-on { overflow: hidden; }

/* ---- responsive (the old breakpoints) */
@media (min-width: 768px) {
  #quote-carousel { margin-bottom: 0; padding: 0 40px 30px 40px; margin-top: 30px; }
}
@media (max-width: 767px) {
  .slogan_home { display: none; }
  .carousel, #myCarousel .item img { height: auto; }
  #myCarousel .item img { aspect-ratio: 1140 / 450; }
  #quote-carousel .carousel-indicators { bottom: -20px !important; }
  #quote-carousel .carousel-indicators li { display: inline-block; }
  #quote-carousel .carousel-control.left { left: -10px; }
  #quote-carousel .carousel-control.right { right: -10px !important; }
  #quote-carousel .item { padding: 0 30px; }
  .nav-lang { position: static; margin: 0 0 10px; padding-left: 15px; }
  .navbar-nav > li > a { padding: 8px 15px; margin: 0; }
  .mtop49 { margin-top: 0; }
  #intro_home p { padding: 0; }
  .image-left .image, .image-right .image { max-width: 100%; float: none !important; padding: 0 0 10px; }
  #services_home_items > div { min-height: 230px; }
  #method ul li { display: block; line-height: 48px; }
}
@media (max-width: 479px) {
  a#logo_top { height: 40px; margin: 5px 15px; width: 180px; font-size: 30px; line-height: 40px; }
  a#logo_top.has-img { background: url("../userfiles/brand/logo_300x40.jpg") no-repeat 0 0; }
  a#logo_top small { display: none; }
  body { padding-top: 65px; }
  #main-nav { min-height: 50px; }
  #services_home_items > div { width: 50%; }
}
@media (min-width: 480px) and (max-width: 767px) {
  a#logo_top { height: 40px; margin: 5px 15px; width: 300px; font-size: 30px; line-height: 40px; }
  a#logo_top.has-img { background: url("../userfiles/brand/logo_300x40.jpg") no-repeat 0 0; }
  a#logo_top small { font-size: 9px; line-height: 11px; }
  body { padding-top: 65px; }
  #main-nav { min-height: 50px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  a#logo_top { height: 40px; margin: 5px 0; width: 300px; font-size: 30px; line-height: 40px; }
  a#logo_top.has-img { background: url("../userfiles/brand/logo_300x40.jpg") no-repeat 0 0; }
  a#logo_top small { font-size: 9px; line-height: 11px; }
  body { padding-top: 50px; }
  #main-nav { min-height: 50px; }
  .mtop49 { margin-top: 10px; }
}

/* coloured text from the admin editor */
span.color { color: var(--color); }

/* cookie bar (only with Google Analytics) */
.cookie-bar { position: fixed; left: 15px; right: 15px; bottom: 15px; z-index: 1500; max-width: 560px; background: #fff; color: #333; padding: 15px 20px 5px; box-shadow: 0 2px 12px rgba(0,0,0,.25); border-top: 3px solid #D9212D; font-size: 15px; line-height: 1.4; }
.cookie-bar[hidden] { display: none; }