@font-face { font-family: 'CenturyGothic'; src: url('/uploads/services/assets/fonts/bc6b976ba2da.woff') format('woff'), url('/uploads/services/assets/fonts/bc6b976ba2da.woff2') format('woff2'); font-weight: 400; font-style: normal; }
.introWrap { position: relative; min-height: 480px; }
.introWrap.promo { background: #000; }
.introBox { font-family: 'CenturyGothic',sans-serif; background-size:cover; width:20%; display:inline-block; min-height: 240px; max-height: 240px; position: relative; padding: 8px; overflow: hidden; float: left; cursor: pointer; -webkit-transition: 0.5s transform; transition: 0.5s transform; }
.introBox::after { content: ''; position: absolute; height: 100%; width: 100%; left: 0; top: 0; background: rgba(0,0,0,0.35); opacity: 1; -webkit-transition: 0.5s opacity; transition: 0.5s opacity; }
.introBox h3 { font-size: 14px; line-height: 20px; text-align: left; color: #fff; position: relative; top: 0; left: 0; width: 100%; height: 30%; background: rgba(0,0,0,0.6); padding: 4px; margin-top: 0; margin-bottom: 0; }
.introBox:hover::after { opacity: 0; }
.introBox p { font-size: 12px; line-height: 16px; color: #fff; padding: 8px 3px 3px; }
.introWrap .introBox h3 { background: transparent; font-family: 'CenturyGothic',sans-serif; font-size: 12px; line-height: 18px; letter-spacing: 0.01rem; border-bottom: 1px solid rgba(255,255,255,0.5); overflow: hidden; position: relative; }
.introWrap .introBox span { position: absolute; bottom: 0; left: 0; width: 100%; font-size: 10px; font-style: italic; color: #fff; padding: 8px 15px; text-decoration: underline; text-align: left; }
.introPromo { color: #fff; text-align:center; }
.introPromo h2, .introPromo h3 { background:#000; margin:0px; position:absolute; top: 90px; vertical-align:middle; z-index: 100; }
.introPromo h2 { height:auto; line-height:50px; left:30%; width:40%; padding: 15px; text-transform: uppercase; font-weight: normal; font-size: 34px; }
.introPromo h3 { line-height: 1.5em; height: auto; width: 56%; left: 22%; top: 200px; padding: 24px 20px; }
.introWrap.promo .introBox .introBoxWrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); }
.introWrap.promo .introBox .introBoxWrap { opacity: 0; -webkit-transition: 0.5s opacity,margin,width,height; transition: 0.5s opacity,margin,width,height; padding: 8px 12px; }
.introWrap.promo .introBox:hover { -webkit-transform: scale(1.15); -ms-transform: scale(1.15); transform: scale(1.15); z-index: 50; }
.introWrap.promo .introBox:hover .introBoxWrap { opacity: 1; margin: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
.introWrap.promo .introBox h3 { height: auto; }
.introWrap.articles .introBox { border: 3px solid #fff; width: 33%; }
.introWrap.articles .introBox::after { display: none; }
.introWrap.articles .introBox h3 { top: -5px; bottom: 0; background: transparent; font-weight: normal; /*line-height: 21px;*/ padding: 0; }
.introWrap.articles .introBoxWrap { position: absolute; top: 70%; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); -webkit-transition: 0.5s top; transition: 0.5s top; padding: 12px; }
.introWrap.articles .introBox:hover .introBoxWrap, .introWrap.articles a.hover .introBoxWrap { top: 0%; }
/* .introWrap.articles .introBox:hover h3 { font-weight: bold; } */
.introWrap.articles .introBox span { text-align: right; /*width: calc(100% - 24px);*/ display: none; }
.introWrap.articles .introBoxWrap p a { color: #fff; }
.introWrap.articles .introBoxWrap p a.more-link { text-decoration: underline; display: block; }
@media (min-width: 1200px) {
   .introWrap .introBox h3 { font-size: 13px; }
   .introBox p { font-size: 13px; line-height: 17px; }
}
@media (min-width: 1340px) {
   .introWrap .introBox h3 { font-size: 14px; line-height: 20px; }
   .introBox p { font-size: 14px; line-height: 18px; }
}
@media (min-width: 1440px) {
   .introWrap .introBox h3 { font-size: 15px; }
}
@media (min-width: 1640px) {
   .introWrap .introBox h3 { font-size: 16px; line-height: 22px; }
   .introBox p { font-size: 15px; line-height: 20px; }
}
@media (max-width: 900px) {
   .introWrap.articles .introBox { width: 33.3%; }
}
@media (max-width: 800px) {
   .introWrap.articles .introBox { width: 50%; }
}
@media (max-width: 550px) {
   .introWrap.articles .introBox { width: 100%; }
}