@font-face {
    font-family: "Montserrat";
    src: url('fonts/Montserrat-VariableFont_wght.ttf') format("truetype");
}
body {
    font-family: "Martel Sans",sans-serif;
    xletter-spacing: -0.03rem;
    color: #000;
    xline-height: 1.4rem;
    }
.login {
    background-color: #f1efe8;
    }
#logform {
    background-color: #000;
    x-background: url('../img/Black-fiber-abstract-background-wallpaper-325341-pixahive.jpg');
    x-background: url('../img/desktop-wallpaper-screen-black-red-black-background-bakcgrounds-red-core.jpg');
    max-width: 600px;
    overflow: hidden;
    background-position: center;
    background-size: cover;
    }
.logomaf {
    background: url("assets/logo.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    border-radius: 90px;
    width: 90px;
    height: 90px;
    top: -24px;
    left: 10px;
    x-animation: rotation 10s infinite linear;
    }
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
@keyframes rotatehalf {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
    }
  75% {
    transform: rotate(-90deg);
    }
  100% {
    transform: rotate(-1deg);
  }
}
.teraz {
    background-color: #f00;
    color: #fff;
    font-size: 13px;
    padding: 5px;
    margin: 5px;
    border-radius: 5px;
    }
.heart {
    position: absolute;
    box-sizing: border-box;
    bottom: 3px;
    left: 197px;
    }
.hamburger {
    background-color: #fff;
    border: 2px solid red;
    text-align: center;
    line-height: 90px;
    position: absolute;
    border-radius: 90px;
    width: 90px;
    height: 90px;
    top: -24px;
    right: 10px;
    x-animation: rotatehalf 7s ease infinite;
    }
.inside {
    background-color: #555;
//    background: url("../img/ckis_tlo.png") bottom left no-repeat;
    background: url("../img/Logo-CKiS-w-Kaliszu-01.jpg") top center no-repeat;
    background-size: 64%;
    background-position-y: top 0px;
    border: 0px solid #666;
    padding: 0px;
    position: absolute;
    box-sizing: border-box;
    top:0px;
    bottom:0px;
    width:100%;
    color: white;
    padding: 10px 10px 10px 10px;
    font-size: 32px;
    x-webkit-text-stroke: 3px black;
    x-background-position-x: 50%;
    x-animation: fotoShift 20s ease infinite;
    }
@keyframes fotoShift {
    0% { background-position-x: 50%; }
  33% { background-position-x: 30%; }
  66% { background-position-x: 70%; }
  100% { background-position-x: 50%; }
    }
.male {
    font-size: 16px;
    margin: 3px;
    float: right;
    line-height: 16px;
    }
.malel {
    font-size: 18px;
    text-align: right;
    display: inline-block;
    x-width: 100%;
    margin: 3px;
    float:right;
    margin-top:30px;
    line-height: 18px;
    }
.clineup {
    x-color: #f00;
    }
.menus {
    color: #eee;
    border: 0px solid #666;
    box-sizing: border-box;
    position: absolute;
    width:100%;
    height: 75px;
    bottom:0px;
    font-size: 22px;
    line-height: 75px;
    text-align:center;
    xanimation: colorChange 5s infinite;
    }
@keyframes colorChange {
    0% { color: red; }
  50% { color: blue; }
  100% { color: red; }
}
.shadowOutline {
  text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black;
}
.zapalniczka {
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    display: none;
    padding: 100px;
    xfilter: saturate(10);
    border-radius: 20px;
    background-color: #fff;
    position: absolute;
    }
.sponsorzy {
    top: 10px;
    bottom: 100px;
    left: 10px;
    right: 10px;
    display: none;
    position: absolute;
    padding: 10px;
    box-sizing: border-box;
    overflow-y: auto;
    }
.lineup {
    top: 10px;
    bottom: 100px;
    left: 10px;
    right: 10px;
    display: none;
    position: absolute;
    padding: 10px;
    box-sizing: border-box;
    overflow-y: auto;
    }
.linepos {
    box-sizing: border-box;
    min-height:210px;
    height: 210px;
    padding: 16px;
    text-align:left;
    border-radius: 3px;
    margin: 15px;
    font-size: 25px;
    background-color: #000000d0;
    color: #fff;
    border: 1px solid #888;
    x-box-shadow: 0px 0px 3px 3px red;
    overflow:hidden;
    xwhite-space: nowrap;
    position: relative;
    line-height: 25px;
    }
.linepostitle {
    max-height: 73px;
    display: inherit;
    overflow: hidden;
    }
.lu1 {
    background: url("img/1042753_1598644312.jpg") 100% no-repeat;
    }
.lu2 {
    background: url("img/1211183_1629890178.jpg") 100% no-repeat;
    }
.lu3 {
    background: url("img/15. Multi Art Festival_fot. Tomasz Bąk Fotografia_41.jpg") 100% no-repeat;
    }
.lu4 {
    background: url("img/61274f7d37b36_o_medium.jpg") 100% no-repeat;
    }
.lu5 {
    background: url("img/Multi Art Festival_fot. Jeszcze Nie Wiem.jpg") 100% no-repeat;
    }
.lu6 {
    background: url("img/fb post kopia.jpg") 100% no-repeat;
    }
.menu {
    top: 100px;
    bottom: 100px;
    left: 10px;
    right: 10px;
    display: none;
    position: absolute;
    padding: 10px;
    box-sizing: border-box;
    line-height: 85px;
    overflow-y: auto;
    }
.menupos {
    box-sizing: border-box;
    padding: 10px;
    text-align:center;
    border-radius: 3px;
    margin: 10px;
    font-size: 14px;
    background-color: #000000d0;
    color: #fff;
    border: 1px solid #888;
    x-box-shadow: 0px 0px 3px 3px red;
    float: left;
    width: 29%;
    height: 30%;
    line-height: 14px;
    overflow: hidden;
    max-height: 100px;
    }
.iconl {
    font-size: 32px;
    color: red;
    left: 30px;
    padding-top: 11%;
    padding-bottom: 10px;
    x-position: absolute;
    width: 100%;
    display: inline-block;
    }
.opislong {
    background-color: #000000d0;
    color: #b7b7b7;
    font-size:22px;
    padding: 20px;
    border-radius: 3px;
    top: 20px;
    position: absolute;
    box-sizing: border-box;
    bottom: 95px;
    overflow-y: auto;
    overflow-x: hidden;
    left: 15px;
    right: 15px;
    line-height: 25px;
    border: 1px solid #888;
    x-box-shadow: 0px 0px 3px 3px red;
    }
input,select {
    padding: 3px 7px 3px 7px;
    border-radius: 3px;
    border: 1px solid #555;
    font-size: 18px;
    background-color: #eee;
    color: #000;
    }
input[type = submit] {
    padding: 8px 31px 8px 31px;
    background-color: #ef233c;
    xopacity: 70%;
    color: #fff;
    border: 0px
    }
input[type= submit]:hover {
    background-color: #ff000090;
    color: #000;
    opacity: 100%;
    }
.opacityit {
    opacity: 0.44;
    transition: opacity 4s;
    }
.opacityit:hover {
    opacity: 0.95;
    transition: opacity 0.1s;
    }
.btnmenu {
    float:left;
    width:24%;
    font-size:12px;
    line-height: initial;
    }
.iconbm {
    font-size:38px;
    }
#logform {
    left: 0px;
    right: 0px;
    }
@media all and (max-width: 700px) {
    #logform {
    right: 0px;
    left: auto;
    }
    }
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}