* { box-sizing: border-box; margin: 0; padding: 0 }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

body { min-height: 100vh; font-family: 'KabrioSoft-Regular', sans-serif; position:relative }
p { margin: 0 0 14px }
h1,h2,h3,h4,h5,h6 { font-family: 'KabrioSoft-Bold', sans-serif; font-weight: normal; margin-bottom:28px }
a { color:inherit }

#back-top{ bottom:5vh; position:fixed; right:5vw; z-index:99; display:none; color:#c5c6c6 }
#back-top a { text-decoration:none }
#back-top a:before{ content:"\f077"; font-size:34px }

.site-brand {text-align:center; margin: 28px 0 }
.site-brand a { position:relative; display:inline-block; max-width: 100%; width: 400px; height: 104px; overflow:hidden; color:transparent; vertical-align:middle }
.site-brand a span { position:absolute; left:0; right:0; top:0; bottom:0; background: url('/files/morcinko-logo.svg') center center no-repeat; background-size: contain; font-size:0 }

.site-slogan { text-align:center; margin:28px 0; padding:0 15px }

.site-menu { text-align:center }
.site-menu a { text-decoration:none }
.site-menu a:hover { text-decoration:underline }

.sep { font-style:normal; color:#ef7f1a; margin: 0 8px; margin-left: 10px }

.container { max-width: 1600px }

.links { text-align:center; padding:0 0 15px }
.links .button { width:41px; height: 42px; vertical-align:middle; overflow:hidden; color: transparent; display: inline-block; margin: 0 5px; text-decoration: none; position: relative; font-size:0 }
.links .button span { position: absolute; left:0; right:0; top:0; bottom:0; background-image: url('/images/12.png') }
.links .button:hover span { background-image: url('/images/11.png') }
.links .button-rege span { background-position: -3px -2px }
.links .button-pf span { background-position: -65px -2px }
.links .button-laser span { background-position: -126px -2px }

.article { margin:0 auto; max-width:1200px; min-height: 40vh; padding:0 20px; text-align: center }
.article .excerpt { color:#c5c6c6; margin-bottom:48px; text-transform:uppercase }
.article img { max-width:100% }
.article h3 { margin-top:28px }

h2.grid-head { margin-top:48px; margin-bottom:0px; text-align:center }

.article .ilustrace-text { margin-bottom: 28px; margin-top: 14px }

.grid { margin: 0 10px 10px }
.grid:after { content:''; display:block; clear:both }
.grid-sizer,
.grid-item { width:100% }
.grid-item { height:200px; float:left; border:10px solid #fff }
.grid-item--double { height:200px }

.grid-item-inside { width:100%; height:100%; position:relative; overflow:hidden }

.grid-item-link, .grid-item-label, .grid-item-background { position:absolute; left:0; right:0; top:0; bottom:0 }
.grid-item-label { padding:15px; color: #fff; text-transform:uppercase; font-size:16px }

.grid-item-background img { object-fit: cover; width:100%; height:100% }
.grid-item-overlay { position:absolute; left:15px; right:15px; top:15px; bottom:15px; opacity:0; background: rgba(255,255,255,0.85); transition: all 0.2s ease-in; color: #000; padding: 15px }
.grid-item-link:hover .grid-item-overlay { opacity:1 }

.grid-item-icon { position:absolute; right:5px; bottom:5px; color:#c5c6c6 }

.grid-item h3 {font-size:28px }
.grid-item p { margin:0; margin-top:-14px }

.copy { text-align:center; padding:0 15px }
.container { margin:0 auto }

@media (min-width:576px) {
  .grid-sizer,
  .grid-item { width: 50% }
  .grid-item--double { width: 100%; height: 400px }

}

@media (min-width: 768px) {
  body { border: 30px solid #efefef }
  
  .grid-item {opacity: 0; animation-name: fadeIn; animation-duration: 0.5s; animation-iteration-count: 1; animation-fill-mode: forwards }
  .article { padding: 40px }
}

/*  .footer { position:absolute; left:0; right:0; bottom:0 }  */
}

@media (min-width: 992px) {

}

@media (min-width: 1200px) {
  
  .grid-sizer,
  .grid-item { width: 25% }
  .grid-item--double { width: 50%; height: 400px }
}

/** rege **/
body { border: none }

img { max-width: 100% !important }

.overlay { display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba( 128, 128, 128, 0.5 ) }
.side-menu { box-sizing: content-box; transition: left 2s; position: fixed; left: -300px; top: 0; bottom: 0; overflow-x: hidden; width: 225px; background: #fff; padding: 5px 15px 0 60px }
.side-menu.visible { left: 0px }

.rege { box-sizing: content-box; height: 60px; line-height: 60px; color: #898989; background: #efefef }
.toggle-menu { color: #898989; text-decoration: none; text-transform: lowercase; font-size: 12px; line-height: 18px; display: inline-block; padding: 15px 0 15px 25px; }
.rege a { text-decoration: none }

.toggle-menu i { font-size: 20px; display: inline-block; margin-left: 15px; vertical-align: middle }

.rege .toggle-menu i { margin: -24px 20px 0 0px; font-size: 24px }
.rege .toggle-menu img { margin-top: -1px } 
.rege-in { float: left }
.rege-project { float: right; font-size: 12pt; padding-right: 50px; text-transform: lowercase }
.rege-slogan:before { content: '... ' } 
.rege-slogan:after { content: ' ... ' }

.rege-site, .rege-slogan { display: none }

.menu-logo { margin: 40px 0; margin-top: 28px }

.menu-x { list-style: none; margin-top: -20px }
.menu-x > li { margin-top: 2px }
.menu-x > li > a { display: block; position: relative; text-decoration: none; line-height: 38px; font-size: 18px }
.menu-x > li > a:after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; background: #ef7f1a; transition: width 5s }
.menu-x .active > a { font-weight: 700; color: #ef7f1a }
.menu-x .active > a:after { width: 58px }
.menu-x li:not(.active) > a:hover:after { animation-name: menu-hover; animation-duration: 0.4s; width: 58px }

.menu-x .sub { list-style: none; margin: 8px 0; margin-left: 15px }
.menu-x .sub > li { font-size: 14px; line-height: 22px }
.menu-x .sub a:hover { text-decoration: underline }

.social { font-size: 28px; color: #898989; margin: 54px 0px }
.social a { margin: 0 8px }

.text-right { text-align: right !important }

@media only screen and (min-width: 576px) {

}
@media only screen and (min-width: 768px) {
  body { border: 10px solid #efefef; border-top: none !important }
  .rege-site { display: inline }
}
@media only screen and (min-width: 992px) {
  body { border: 15px solid #efefef; border-top: none !important }
  .rege-slogan { display: inline }
}
@media only screen and (min-width: 1200px) {
  body { border: 30px solid #efefef; border-top: none !important }
}