@import "fonts.css";

:root {
  --default: #121212;
  --primary: #1B382E;
  --muted: #E2DACF;
  --secondary: #CEBBA3;
  --gold: #CA9B3C;
  --drop-shadow-600: 0 16px 32px -8px rgba(12,12,13,.4);
}

* {
    box-sizing: border-box;
}

@media(max-width: 640px){
    html {
        font-size: 12px;
    }    
    h2, .uk-h2 {
        font-size: 24px;
    }
    h3, .uk-h3 {
        font-size: 24px;
    }
    .h5, .uk-h5, h5 {
        font-size: 10px;
    }
}

/* MARGIN */
.uk-margin-medium-top\@m {
  margin-top: 20px;
}

@media(min-width: 960px){
  .uk-margin-medium-top\@m {
    margin-top: 40px;
  }
  .s-padding-xlarge-bottom {
      padding-bottom: 140px;
  }
}


/* HEADER */
.tm-header-mobile .uk-logo {
    width: 100px;
}

.tm-header-mobile .uk-navbar-item, 
.tm-header-mobile .uk-navbar-nav>li>a, 
.tm-header-mobile .uk-navbar-toggle {
    min-height: 70px;
}

.tm-header-mobile .uk-navbar-toggle-icon {
    padding: 0;
    border: none;
}
.tm-header-mobile .uk-navbar-toggle-icon rect {
    height: 1px;
}
/* CUSTOM */
.s-shadow {
    box-shadow: inset 0 16px 32px -8px rgba(12,12,13,.4);;
}
/*.uk-offcanvas-bar > div {
  margin-bottom: 0 !important;
  margin-top: auto !important;
  align-items: end;
}*/

.uk-navbar-toggle-icon {
  padding: 10px;
  border: 1px solid var(--gold);
}

@media(hover: hover) {
  .uk-navbar-toggle:hover .uk-navbar-toggle-icon {
    border-color: #A57F31;
  }
}

.uk-h2:before {
  content: "";
  display: inline-block;
  width: 70px;
  border-top: 1px solid var(--default);
  margin-right: 10px;
  font-size: 1.7rem;
  line-height: 1.3;
  vertical-align: middle;
}

@media (max-width: 640px) {
  .uk-h2:before {
    width: 30px;
  }
}

.uk-section-primary .uk-h2:before {
  border-top: 1px solid var(--gold);
}

.c-gallery-clip .el-item,
.c-img-shadow {
   filter: drop-shadow(0 16px 10px rgba(12, 12, 13, .4));
   overflow: visible;
   transform: translateZ(0);
}
.c-gallery-clip .el-item picture {
    display: block;
    padding: 1px;
    background: var(--gold);
    clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0% calc(100% - 20px), 0% 20px);
}

.c-gallery-clip .uk-position-center {
    position: relative;
    z-index: 1;
}

.c-gallery-clip .uk-position-cover {
    z-index: 1;
    top: 1px;
    bottom: 1px;
    left: 1px;
    right: 1px;
    z-index: 1;
    clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0% calc(100% - 20px), 0% 20px);
}

.c-gallery-clip .el-item .el-image {
    position: relative;
    z-index: 1;
    clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0% calc(100% - 20px), 0% 20px);
}

.c-img-clip img, .c-overlay-clip .uk-overlay-primary{
  clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0% calc(100% - 20px), 0% 20px);
}

.uk-button {
  clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
}

hr.uk-divider-icon {
  width: 240px;
  margin: auto;
}

.s-top-border {
  border-top: 1px solid rgba(255,255,255,.25)
}

@media(max-width: 640px){
    .c-img-clip img, .c-overlay-clip .uk-overlay-primary{
  clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
}
}



/* EVENTS */
.c-img-width-none img {
    max-width: none;
}
@media(min-width: 960px){
    .c-events-col {
        max-width: 960px;
        margin: 0 auto;
        position: relative;
        padding: 30px 30px 70px;
        /*border: 1px solid var(--gold);*/
        background: var(--gold);
        clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0% calc(100% - 20px), 0% 20px);
    }
    
    .c-events-col::before {
        content: '';
        position: absolute;
        top: 1px;
        right: 1px;
        bottom: 1px;
        left: 1px;
        background: var(--primary);
        clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0% calc(100% - 20px), 0% 20px);
    }
    .c-events-col > div:first-child {
        padding: 0;
    }
}

@media(max-width:960px) {
.s-club-gallery .el-item {
 max-width:370px;   
}
}



/*Contacts*/

.s-contacts .el-item { 
       background: var(--gold);
        clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0% calc(100% - 20px), 0% 20px);
    color:white
}
.s-contacts .el-item:before {
        content: '';
        position: absolute;
        top: 1px;
        right: 1px;
        bottom: 1px;
        left: 1px;
        background: var(--primary);
        clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0% calc(100% - 20px), 0% 20px);
}