/* navigation menu */
nav{
  max-width: 1120px;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  margin: 10px auto;
  padding-left: 20px;
  padding-right: 20px;
}
/* ---- */
/* logo */
nav a.brand{
  width: 149px;
  height: 35px;
  display: block;
}
nav a.brand img#large{
  display: none;
}
nav a.brand img#small{
  max-height: 35px;
}
/* ------------- */
/* mobile-button */
nav a.mobile-button{
  width: 30px;
  height: 30px;
  position: relative;
  cursor: pointer;
}
nav a.mobile-button span{
  width: 30px;
  height: 3px;
  position: absolute;
  top: 50%;
  display: block;
  background-color: #000000;
  margin-top: -1.5px;
}
nav a.mobile-button span.line-top{
  -ms-transform: translateY(-10px) rotate(0deg);
  -webkit-transform: translateY(-10px) rotate(0deg);
  transform: translateY(-10px) rotate(0deg);
}
nav a.mobile-button span.line-bottom{
  -ms-transform: translateY(10px) rotate(0deg);
  -webkit-transform: translateY(10px) rotate(0deg);
  transform: translateY(10px) rotate(0deg);
}
nav a.mobile-button.active span.line-top{
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
nav a.mobile-button.active span.line-middle{
  opacity: 0;
}
nav a.mobile-button.active span.line-bottom{
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
/* ------------ */
/* menu primary */
nav .menu-primary{
  display: none;
}
/* ------------------- */
/* registration button */
nav a.button{
  display: none;
}
/* ----------- */
/* mobile menu */
.mobile-menu{
  width: 100%;
  height: calc(100% - 55px);
  position: absolute;
  top: 55px;
  display: none;
  background-color: #0B24FB;
  z-index: 100;
}
.mobile-menu ul,
.mobile-menu li{
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-menu li{
  padding: 0;
  border-bottom: 1px solid rgba(255,255,255, 0.3);
}
.mobile-menu li:last-child{
  border-bottom: 0;
}
.mobile-menu ul li a{
  position: relative;
  display: block;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #FFFFFF;
  padding: 15px 20px;
}
.mobile-menu ul li.menu-item-has-child > a:after{
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  top: calc(50% - 2px);
  right: 20px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #FFFFFF;
}
.mobile-menu ul li.menu-item-has-child:hover .sub-menu{
  display: block;
}
.mobile-menu ul .sub-menu{
  display: none;
  margin: 0;
  padding: 0;
}
.mobile-menu ul .sub-menu{
  background-color: #FFFFFF;
}
.mobile-menu ul .sub-menu li:first-child{
  border-bottom: 1px solid #0B24FB;
}
.mobile-menu ul .sub-menu li a{
  color: #0B24FB;
}
/* ------------------- */
/* section hero images */
section.hero{
  width: 100%;
  height: 300px;
  text-align: center;
}
section.hero h2{
  padding-top: 30px;
}
section.hero h2,
section.hero h3,
section.hero h4{
  font-weight: 700;
}
/* ------------ */
/* section main */
section.main{
  padding: 20px 0;
}
section.main h4{
  font-weight: 700;
  padding-bottom: 20px;
}
section.main p{
  line-height: 1.6;
  padding-bottom: 20px;
}
/* footer */
/* ------ */
footer{
  background: #F4F4F4;
}
footer ul,
footer li{
  list-style: none;
  padding: 0;
  margin: 0;
}
footer p{
  font-size: 12px;
  text-align: center;
  padding: 20px 30px;
}
footer .sponsors{
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 30px 0;
}
footer .sponsors img{
  max-width: 100%;
  padding: 20px 0;
}
/* ------------- */
/* media queries */
/* ------------- */
@media (min-width: 767px){
  nav{
    margin-top: 10px;
    margin-bottom: 10px;
  }
  /* ---- */
  /* logo */
  nav a.brand{
    width: 315px;
    height: 60px;
  }
  nav a.brand img#large{
    max-height: 60px;
    display: block;
  }
  nav a.brand img#small{
    display: none;
  }
  /* ------------- */
  /* mobile-button */
  nav .mobile-button{
    display: none;
  }
  /* ------------ */
  /* menu primary */
  nav .menu-primary{
    display: block;
    z-index: 100
  }
  nav .menu-primary ul{
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  nav .menu-primary ul li{
    position: relative;
    padding: 0 11px;
  }
  nav .menu-primary ul li.menu-item-has-child{
    padding-right: 21px;
  }
  nav .menu-primary ul li a{
    position: relative;
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #000000;
    padding: 10px 0;
  }
  nav .menu-primary ul li.menu-item-has-child > a:after{
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: calc(50% - 2px);
    right: -12px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #000000;
  }
  nav .menu-primary ul li .sub-menu{
    width: 210px;
    height: 0;
    position: absolute;
    top: 130%;
    display: block;
    overflow: hidden;
    opacity: 0;
    background-color: #FFFFFF;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 5px 2px rgba(0,0,0, .1);
    -moz-box-shadow: 0px 2px 5px 2px rgba(0,0,0, .1);
    box-shadow: 0px 2px 5px 2px rgba(0,0,0, .1);
    padding: 15px 20px;
  }
  nav .menu-primary ul li.menu-item-has-child:hover .sub-menu{
    height: auto;
    opacity: 1;
  }
  nav .menu-primary ul li .sub-menu li{
    padding: 8px 0;
  }
  nav .menu-primary ul li .sub-menu li a{
    width: 100%;
    padding: 0;
  }
  /* ------------------- */
  /* registration button */
  nav a.button{
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #000000;
    border: 3px solid #000000;
    cursor: pointer;
    padding: 8px 10px;
  }
  nav a.button:hover{
    font-weight: 400;
    background-color: #000000;
    color: #FFFFFF;
  }
  /* ------------------- */
  /* section hero images */
  section.hero{
    width: 100%;
    height: 400px;
  }
  section.hero h2{
    padding-top: 80px;
  }
  section.hero h3{
    padding: 30px 0;
  }
  section.hero h4{
    padding-top: 10px;
  }
  /* ------------ */
  /* section main */
  section.main{
    padding: 50px 0;
  }
  section.main .iframe{
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  section.main .iframe iframe{
    padding: 0 10px;
  }
  /* ------ */
  /* footer */
  footer .sponsors{
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
}