/*
Partial UiKit CSS fancy-card code from https://demo.elementpack.pro/element/fancy-card
WordPress https://wordpress.org plugin Element Pack Pro addon for Elementor Pro https://elementor.com
*/

/* CascadiaMonoPL-Regular */
@font-face {
  font-family: 'CascadiaMonoPL';
  src: url(CascadiaMonoPL-Regular.ttf) format("truetype");
  font-style: normal;
  font-weight: normal;
}

/* Audiowide-Regular */
@font-face {
  font-family: 'Audiowide';
  src: url(Audiowide-Regular.ttf) format("truetype");
  font-style: normal;
  font-weight: normal;
}

/* Zarathustra-eDnl */
@font-face {
  font-family: "Zarathustra";
  src: url("Zarathustra-eDnl.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}

html {
  background-color: #026978;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* uikit-icons.min.js for svg types ie. rect path circle line polygon etc. */
.uk-icon[uk-icon="server"] svg rect {
  stroke: #E2101E;
  -webkit-transition-duration: .5s;
  -moz-transition-duration: .5s;
  transition-duration: .5s;  
  -webkit-transition-delay: .3s;
  -moz-transition-delay: .3s;
  transition-delay: .3s;
}

.uk-cover-container {
  /* height = UiKit short-hand {uk-height-viewport} html-tag attribute or long-hand {uk-height-viewport="expand: true"} */
  /* width = UiKit css class uk-background-cover for css {cover} */
  height: 100vh;
  background-image: url("pexels-joshua-plattner-706101074-18131681_1920x1369.jpg");
  /* Photo by Joshua Plattner: https://www.pexels.com/photo/lights-on-street-in-town-18131681/ */
}

.uk-container.maintenance {
  margin-top:25vh;
  width:40vw;
  -webkit-transition-duration: .35s;
  -moz-transition-duration: .35s;
  transition-duration: .35s;
  -webkit-transition-delay: .1s;
  -moz-transition-delay: .1s;
  transition-delay: .1s;
}

.uk-container.maintenance:hover {
  -webkit-transform: translateY(-1px);
  -moz-transform: translateY(-1px);
  transform: translateY(-1px);
}

.uk-container.maintenance .uk-card {
  background-color: rgba(255, 255, 255,0.25);
  -webkit-backdrop-filter: blur(7px) saturate(180%);
  backdrop-filter: blur(7px) saturate(180%);	
  -webkit-box-shadow:010px 25px 35px -25px #97A3b8;
  box-shadow:0 25px 35px -25px #97A3b8;
  -webkit-border-radius:10px;
  border-radius:10px;
  -webkit-transition:all .3s ease-in;
  -moz-transition:all .3s ease-in;
  transition:all .3s ease-in;
  border: 1px solid #0D488F; /* width style color */
}

.uk-container.maintenance .uk-card .uk-card-title {
  margin-top: 1.1em;
}

.uk-container.maintenance .uk-card .uk-card-title h4 {
  font-family: 'Audiowide', arial;
  color:#0D488F;
}

.uk-container.maintenance .uk-card .uk-card-title .cuneiform {
  font-family: 'Zarathustra', arial;
  color:#0D488F;
  padding: 0; /* top, right, bottom, left */
  margin: 0; /* bottom, left, right, top */
  margin-top: -1rem;
  font-size: 2em;
  font-weight: 500;
  -webkit-transition-duration: .5s;
  -moz-transition-duration: .5s;
  transition-duration: .5s;  
  -webkit-transition-delay: .25s;
  -moz-transition-delay: .25s;
  transition-delay: .25s;
}

.uk-container.maintenance .uk-card .uk-card-body p {
  font-family: 'CascadiaMonoPL', arial;
  color:#F8F8FF;
  -webkit-transition-duration: .35s;
  -moz-transition-duration: .35s;
  transition-duration: .35s;  
  -webkit-transition-delay: .2s;
  -moz-transition-delay: .2s;
  transition-delay: .2s;
}

.uk-container.maintenance .uk-card-footer {
    margin-top: -.6rem;
    margin-bottom: -.6rem;
}

.uk-container.maintenance .uk-card:hover {
  background-color: rgb(150, 162, 255, .35);
  -webkit-backdrop-filter: blur(2px) saturate(1.5) brightness(110%);
  backdrop-filter: blur(2px) saturate(1.5) brightness(110%);	
  -webkit-box-shadow:0 0 2px -1px #E91E63CC;
  box-shadow:0 0 2px -1px #E91E63CC;
  border-color: #BD0000;
  .uk-card-body p {
    color:#E2101E;
    text-shadow: #778899 1px 0 1px;
    -webkit-transition:color .3s ease-in;
    -moz-transition:color .3s ease-in;
    transition:color .3s ease-in;
  }
  .uk-card-title .uk-icon[uk-icon="server"] svg rect {
    stroke: #2fcb42; /* strokes twice as much */  
  }
  .uk-card-title .cuneiform {
    color:#E2101E;
    -webkit-transition:color .3s ease-in;
    -moz-transition:color .3s ease-in;
    transition:color .3s ease-in;
  }
  .uk-card-footer .uk-margin-xsmall-right, .uk-margin-xsmall-left img {
    /* css-color-filter-generator (Angel Rodríguez angel-rs https://angelrs.dev) https://github.com/angel-rs/css-color-filter-generator
    interactive tool https://angel-rs.github.io/css-color-filter-generator */
    filter: brightness(0) saturate(100%) invert(72%) sepia(21%) saturate(4590%) hue-rotate(75deg) brightness(97%) contrast(77%);
  }  
}

@media(max-width: 1280px) {
  .uk-container.maintenance {
    margin-top:20vh;
    width:55vw;
  }
}

@media(max-width: 1024px) {
  .uk-container.maintenance {
    margin-top:15vh;
    width:65vw;
  }
}

@media(max-width: 768px) {
  .uk-container.maintenance {
    margin-top:10vh;
    width:75vw;
  }
}

/* Portrait*/
@media (min-width: 300px) and (max-width: 450px) and (orientation: portrait) {
  .uk-container.maintenance {
    margin-top:10vh;
    width:85vw;
  }
  .uk-container.maintenance .uk-card .uk-card-title {
    margin-top: .8em!important;
  }
  .uk-container.maintenance .uk-card .uk-card-title h4 {
    font-size: .8em;
  }
  .uk-container.maintenance .uk-card:hover .uk-card-title h4 {
    color: white;
  }
  .uk-container.maintenance .uk-card .uk-card-title .cuneiform {
    font-size: 2em;
    margin-top: -1.2rem;
  }
  .uk-container.maintenance .uk-card .uk-card-title p {
    font-size: .8em;
  }
}

/* Landscape */
@media (min-width: 451px) and (max-width: 835px) and (orientation: landscape) {
  .uk-container.maintenance {
    margin-top:10vh;
    width:75vw;
  }
  .uk-container.maintenance .uk-card .uk-card-title {
    margin-top: .8em!important;
  }
  .uk-container.maintenance .uk-card .uk-card-title h4 {
    font-size: .8em;
  }
  .uk-container.maintenance .uk-card:hover .uk-card-title h4 {
    color: white;
  }  
  .uk-container.maintenance .uk-card .uk-card-title .cuneiform {
    font-size: 2em;
    margin-top: -1.7rem;
  }
  .uk-container.maintenance .uk-card .uk-card-title p {
    font-size: .8em;
  }
}