@import url("normalize.css");
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
@import url('https://fonts.googleapis.com/css?family=Lora:400,700');

body {
    font-family:"Montserrat", "Open Sans", 'Helvetica Neue', sans-serif;
}

section {
    
}

h1, h2, h3, h4 {
    margin:0;
    user-select: none;
}

a {
    text-decoration: none;
    user-select: none;
}

a:visited {
    color:black;
}

.header-content a {
    color:white;
}

.header-content a:visited {
    color:white;
}

header {
    background-image:url("../images/Kurt.png");
    background-size:100%;
}

.content {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items:center;
    width:75%;
    margin:0 auto;
    padding:1rem 0;   
}

.header-content {
    grid-template-rows:10vh 75vh;
}

.logo {
    grid-column:span 3;
    margin:1rem 0;
}

.menu {
    grid-column:span 9;
    justify-self: end;
    margin:1rem 0;
}

/*HAMBURGER */

#menuToggle
{
  display: block;
  position: relative;
  top: 0.25rem;
  left: 15rem;
  
  z-index: 1;
  user-select: none;
}

.menu-item {
  margin:1rem 0;
}

#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
}

#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: white;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: white;
}

#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

.menu-small
{
  display:flex;
  flex-direction:column;
  align-items:center;
  position: absolute;
  width: 100vw;
  margin: -100px 0 0 -25rem;
  padding: 50px;
  padding-top: 125px;
  
  background: rgba(0,0,0,0.8);
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menuToggle input:checked ~ .menu-small
{
  transform: none;
}

.header-title {
    grid-column: span 8;
    font-size:3rem;
    color:white;
    font-family:"Lora", sans-serif;
    font-weight:700;
}

.menu a {
    margin:0 0.25rem;
    text-transform:uppercase;
    padding-bottom:0.25rem;
}

.menu a:hover {
    border-bottom:4px solid rgba(255,255,255,0.5);
}

.audio-block {
    height:54px;
    
}

audio {
    width:100%;
}

.section-title {
    grid-column:span 12;
}

.section-title h3{
    font-size:2rem;
    margin:1rem 0;
}

.stations-content {
    grid-gap:1rem;
    
}

.slider {
    grid-column:span 12;
}

.stations {

}

.stations-block {
    grid-column:span 3;
    text-align:center;
    border-top: 1px solid rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    padding:1rem;
}

.slider:first-child {
    border:none;
}

.stations-block img {
    width:25%;
    margin:1rem auto;
}

.load-more {
    grid-column:span 12;
    justify-self:center;
}

.btn {
    color:rgba(181,11,30,1);
    text-transform:uppercase;
    font-weight:700;
    padding:0.5rem 2rem;
    background-color:white;
    border: 1px solid rgba(0,0,0,0.25);
    
}

.upcomming-events {
    background-image:url("../images/background-events.png");
    background-position: bottom;
    background-repeat:no-repeat;
    background-color:rgba(181,11,30,1);
}

.upcomming-events-block {
    margin:1rem 0;
}

.upcomming-events-block h3 {
    font-size:3rem;
    margin:2rem 0;
}

.upcomming-events-content {
    
    color:white;
    padding-bottom:2rem;
}

.upcomming-events-title {
    padding:1rem 0 1rem 12.5%;
    background-color:white;
}

.upcomming-events-content {
    display:grid;
    grid-template-columns:repeat(12,1fr);
    width:75%;
    margin:0 auto;
}

.vertical-center-4 .slick-prev {

    display: block;
    margin:1rem 0;
    top: 102.5%;
    transform: rotate(270deg);
    left: 20%;
}

.vertical-center-4 .slick-prev:before {
    color:white;
}

.vertical-center-4 .slick-next:before {
    opacity:0;
}

.slick-next {
    display:none;
}

.image-block, .event-slider, .copyright, .social-bar {
    grid-column:span 6;
    align-self:center;
}

.upcomming-events-content img {
    width:100%;
    margin-bottom:-4rem;
    position:relative;
}

.news-block {
    grid-column:span 4;
    padding:2rem;
    border: 1px solid rgba(0,0,0,0.25);
    min-height:20rem;
    display:grid;
    align-items:stretch;
}

.news-block p{
    font-size:0.8rem;
}

.news-block .btn {
    justify-self:center;
}

.latest-news-content {
    grid-gap:1rem;
}

.date {
    font-weight:700;
}

.join-us {
    background-color:rgba(40,50,60,1);

}

.joint-content {
    background-image:url("../images/background.png");
    background-size:contain;
    background-position: bottom;
    background-repeat:no-repeat;
}

.joint-title {

    font-size:3rem;
    color:white;
    font-family:"Lora", sans-serif;
    font-weight:700;
    grid-column:span 12;
}

.joint-content p {
    grid-column:span 12;
    color:white;
    width:50%;
}

.joint-content form {
    grid-column:span 6;
    
    display:grid;
    grid-template-columns:3fr 1fr;
    grid-gap:0.5rem;
    background-color:white;
    padding:1rem;
    border-radius:5px;
    margin:1rem 0;
}

input {
    border:0;
    
}

input[type="email"] {
    padding:0.5rem 1rem;
}

input[type="submit"] {
    padding:0.5rem 1rem;
    color:white;
    background-color:rgba(181,11,30,1);
    border-radius:5px;
    float:right;
}

.join-us-title {
    padding:1rem 0 1rem 12.5%;
    background-color:white;
}

.footer-content p {
    font-size:0.8rem;
}

.social-bar {
    display:grid;
    grid-gap:0.5rem;
    grid-template-columns:repeat(5,1fr);
    justify-items: stretch;
    padding:2rem;
}

.social-bar i {
    font-size:1.404rem;
}

@media screen and (max-width: 768px) {
    .joint-content form {
        grid-template-columns:auto;
    }

    .header-title, .news-block {
        grid-column:span 12;   
    }

    .news-block .btn {
        justify-self:center;
    }

    .section-title, .header-title {
        text-align:center;    
    }

    .upcomming-events-title, .join-us-title {
        padding:1rem 0;
    }

    .joint-content p {
        width:100%;
    }

    .menu a:first-child {
        display:none;
    }

    .header-content {
        grid-template-rows:10vh 70vh;
    }
}


@media screen and (max-width: 600px) {
    .menu a:nth-child(2) {
        display:none;
    }

}

@media screen and (max-width: 425px) {

    .logo {
        margin:0 1rem;
    }

    .joint-content form, .news-block, .event-slider {
        grid-column:span 12;
    }

    .upcomming-events-content {
        padding-bottom:4rem;
    }

    .image-block {
        display:none;
    }

    .upcomming-events-block, .section-title, .joint-title {
        text-align:center;
    }

    .vertical-center-4 .slick-prev {
        left:50%;
    }

    .content {
        width:95%;
    }

    .menu, .stations .slick-prev:before, .stations .slick-next:before {
        display:none;
    }

    .header-title h2 {
        font-size:3rem;
    }
}

@media screen and (max-width:375px) {
    #menuToggle {
        left:12.5rem;
    }
}

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

    .small-screen-menu {
        display:none;
    }

}