/* Minimal grid utility layer - replaces the original "responsive" bower grid,
   whose source wasn't available to port (bower_components was never committed). */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
	box-sizing: border-box;
}

/* Utility classes dropped during the v7 CSS recompile (source wasn't committed). */
.visuallyhidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.hidden {
	display: none;
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
}

.row.no-gutter {
	margin: 0;
}

.row.no-gutter > [class^="col-"] {
	padding: 0;
}

.row > [class^="col-"] {
	padding: 0 15px;
	box-sizing: border-box;
}

.col-s-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
.col-s-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-s-3 { flex: 0 0 25%; max-width: 25%; }
.col-s-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-s-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
.col-s-6 { flex: 0 0 50%; max-width: 50%; }
.col-s-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-s-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-s-9 { flex: 0 0 75%; max-width: 75%; }
.col-s-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-s-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.col-s-12 { flex: 0 0 100%; max-width: 100%; }

.offset-s-1 { margin-left: 8.3333%; }
.offset-s-2 { margin-left: 16.6667%; }
.offset-s-3 { margin-left: 25%; }

.block-row-s-2 {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.block-row-s-2 > * {
	flex: 0 0 calc(50% - 15px);
	max-width: calc(50% - 15px);
}

@media (max-width: 640px) {
	.col-xxs-6 { flex: 0 0 50%; max-width: 50%; }

	.row > [class^="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.row > .col-xxs-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.block-row-s-2 > * {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

html, body {
  font-family: "Proxima N W01 Black";
}

h1, h2, h3, h4, h5 {
  font-weight: 400;
}

.uppercase {
  text-transform: uppercase;
}

h1 {
  font-size: 4vw;
}

h2 {
  text-align: center;
  text-transform: uppercase;
  border-bottom: 7px dashed;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  position: relative;
  font-size: 2.4em;
}
h2 + p {
  text-align: center;
}
@media (max-width: 640px) {
  h2 {
    font-size: 6vw;
  }
}

#nav-icon {
  width: 60px;
  height: 45px;
  position: absolute;
  right: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 640px) {
  #nav-icon {
    top: 65%;
  }
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 9px;
  width: 50%;
  background: #fff;
  opacity: 1;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
@media (max-width: 640px) {
  #nav-icon span {
    width: 40%;
    height: 7px;
  }
}

#nav-icon span:nth-child(even) {
  left: 50%;
  border-radius: 0 9px 9px 0;
}
@media (max-width: 640px) {
  #nav-icon span:nth-child(even) {
    left: 40%;
  }
}

#nav-icon span:nth-child(odd) {
  left: 0px;
  border-radius: 9px 0 0 9px;
}

#nav-icon span:nth-child(1), #nav-icon span:nth-child(2) {
  top: 0px;
}

#nav-icon span:nth-child(3), #nav-icon span:nth-child(4) {
  top: 18px;
}
@media (max-width: 640px) {
  #nav-icon span:nth-child(3), #nav-icon span:nth-child(4) {
    top: 14px;
  }
}

#nav-icon span:nth-child(5), #nav-icon span:nth-child(6) {
  top: 36px;
}
@media (max-width: 640px) {
  #nav-icon span:nth-child(5), #nav-icon span:nth-child(6) {
    top: 28px;
  }
}

#nav-icon.open span:nth-child(1), #nav-icon.open span:nth-child(6) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon.open span:nth-child(2), #nav-icon.open span:nth-child(5) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon.open span:nth-child(1) {
  left: 5px;
  top: 7px;
}
@media (max-width: 640px) {
  #nav-icon.open span:nth-child(1) {
    top: 11px;
    left: 7px;
  }
}

#nav-icon.open span:nth-child(2) {
  left: calc(50% - 5px);
  top: 7px;
}
@media (max-width: 640px) {
  #nav-icon.open span:nth-child(2) {
    top: 11px;
    left: calc(50% - 5px);
  }
}

#nav-icon.open span:nth-child(3) {
  left: -50%;
  opacity: 0;
}

#nav-icon.open span:nth-child(4) {
  left: 100%;
  opacity: 0;
}

#nav-icon.open span:nth-child(5) {
  left: 5px;
  top: 29px;
}
@media (max-width: 640px) {
  #nav-icon.open span:nth-child(5) {
    left: 9px;
    top: 28px;
  }
}

#nav-icon.open span:nth-child(6) {
  left: calc(50% - 5px);
  top: 29px;
}
@media (max-width: 640px) {
  #nav-icon.open span:nth-child(6) {
    top: 29px;
    left: calc(50% - 4px);
  }
}

.navigation__back {
  padding: 20px;
  line-height: 10px;
}
.navigation__back a {
  color: #fff;
  text-decoration: none;
}

html, body {
  color: #36a9e1;
}

.relative {
  position: relative;
}

body {
  padding-top: 200px;
  background-color: #662483;
}
@media (max-width: 640px) {
  body {
    padding-top: 140px;
    padding-top: 87px;
  }
}
main, footer {
  background-color: #fff;
}

[class^=section--]:not(header):not(.navigation__back) {
  padding: 80px 0;
}
@media (max-width: 640px) {
  [class^=section--]:not(header):not(.navigation__back) {
    padding: 30px 0;
  }
}

.section--purple {
  background-color: #662483;
  color: #fff;
}

.section--green {
  background-color: #95c11f;
  color: #fff;
}

.section--light-green {
  background-color: #aacd4c;
  color: #fff;
}

.section--blue {
  background-color: #36a9e1;
  color: #fff;
}

main > section:first-child {
  background-color: #36a9e1;
}
main > section:first-child a {
  overflow: hidden;
  width: 100%;
  display: block;
}
main > section:first-child img {
  display: block;
  margin: 0 auto;
}
@media (max-width: 640px) {
  main > section:first-child img {
    height: 60vh;
    max-width: inherit;
  }
}

header {
  position: fixed;
  width: 100%;
  padding: 50px 0;
  margin-top: -200px;
  z-index: 9;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: padding 0.2s ease;
}
header.active {
  padding: 15px;
}
@media (max-width: 640px) {
  header {
    margin-top: -146px;
    padding: 25px 0;
    margin-top: -87px;
  }
}
footer {
  border-top: 5px solid #36a9e1;
  padding: 40px 0;
}
footer p {
  display: inline-block;
  margin: 0;
  width: 50%;
}
footer ul {
  display: inline-block;
  width: 50%;
  float: right;
  text-align: right;
}
@media (max-width: 640px) {
  footer p {
    width: 100%;
    text-align: center;
  }
}
@media (max-width: 640px) {
  footer ul {
    text-align: center;
    float: none !important;
    margin-top: 30px !important;
  }
}

.hero-text {
  color: #fff;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}
@media (max-width: 1024px) {
  .hero-text {
    box-sizing: border-box;
    padding: 0 20px;
  }
}
.hero-text h1 {
  font-size: 128px;
  line-height: 1em;
  max-width: 50%;
  text-transform: uppercase;
}
@media (max-width: 1024px) {
  .hero-text h1 {
    font-size: 8vw;
  }
}
@media (max-width: 640px) {
  .hero-text h1 {
    font-size: 7vw;
    max-width: 100%;
  }
  .hero-text h1 + p {
    font-size: 12px;
  }
}

/* https://css-tricks.com/snippets/css/stitched-look/ */
.stitched {
  padding: 20px;
  margin: 10px;
  color: #fff;
  line-height: 1.3em;
  border: 10px dashed #ec6608;
  border-radius: 6px;
  font-weight: normal;
}
#dates .stitched {
  border-color: #fff;
}

.event {
  margin-top: 80px;
  margin-bottom: 80px;
}
@media (max-width: 640px) {
  .event {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}
.event ul {
  display: flex;
  margin: 0;
  padding: 0;
}
@media (max-width: 640px) {
  .event ul {
    display: block;
  }
}
.event li {
  display: flex;
  flex-direction: column;
  padding: 0 2.6em;
}
@media (max-width: 640px) {
  .event li {
    display: block;
    text-align: center;
    margin-bottom: 20px;
  }
}
.event li div {
  display: flex;
  flex-grow: 1;
}
@media (max-width: 640px) {
  .event li div img {
    display: block;
    text-align: center;
    margin: auto;
  }
}
.event span {
  color: #000;
  text-transform: uppercase;
  display: block;
  margin: 20px 0 0 0;
  text-align: center;
}
.event img {
  max-width: 160px;
  align-self: center;
  width: 100%;
}
.event a {
  text-align: center;
  font-size: 32px;
  display: block;
  margin: 60px 0 0 0;
}
.event a:after {
  content: url("/images/umbx-arrow.svg");
  display: inline-block;
  width: 40px;
  margin-left: 10px;
}

.event--next {
  color: #ec6608;
  border-color: #ec6608;
  text-transform: uppercase;
  font-size: 32px;
  position: relative;
}
@media (max-width: 640px) {
  .event--next {
    font-size: 6vw;
    margin-bottom: 20px;
  }
}
.event--next p {
  margin: 0;
}
.event--next p + p {
  font-size: 24px;
  display: inline-block;
}
@media (max-width: 640px) {
  .event--next p + p {
    font-size: 6vw;
  }
}
.event--next p + p:before {
  content: "";
  border-top: 3px solid #ec6608;
  display: block;
  margin-bottom: 10px;
}
.event--next img {
  position: absolute;
  bottom: -130px;
  right: 105px;
  max-width: 100px;
}
@media (max-width: 640px) {
  .event--next img {
    position: relative;
    right: 0;
    left: auto;
    bottom: 0;
    float: right;
  }
}
.event--next:after {
  content: "";
  display: table;
  clear: both;
}

.workshops {
  margin-top: 80px;
  margin-bottom: 80px;
}
@media (max-width: 640px) {
  .workshops {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}
.workshops ul {
  display: block;
  text-align: center;
}
@media (max-width: 640px) {
  .workshops ul {
    display: flex;
    margin: auto;
    padding-left: 0;
  }
  .workshops ul li {
    min-width: 50%;
  }
  .table-scrollable .workshops ul {
    display: table;
  }
}
.workshops li {
  display: inline-block;
  padding: 0 2.6em;
}
@media (max-width: 640px) {
  .workshops li {
    padding: 0 0.6em;
    display: table-cell;
    margin: 0 auto;
  }
}
.workshops li a:not(:first-child):after {
  content: url("/images/umbx-arrow.svg");
  display: inline-block;
  width: 20px;
  margin-left: 10px;
}
.workshops h3 {
  color: #000;
  text-transform: uppercase;
}

.workshops__gallery figure {
  margin: 0;
  padding: 0;
}

a {
  color: #36a9e1;
  text-transform: uppercase;
}

.dates table thead {
  border-bottom: 5px solid #fff;
  font-size: 24px;
}
@media (max-width: 640px) {
  .dates table thead {
    border-bottom: none;
  }
}
.dates table thead tr {
  border-top: 0;
}
.dates table tbody {
  font-size: 22px;
}
.dates table td, .dates table th {
  border-left: 1px solid #fff;
}
@media (max-width: 640px) {
  .dates table td, .dates table th {
    border-left: none;
  }
}
.dates table td:first-child, .dates table th:first-child {
  border-left: 0;
  width: 160px;
}
.dates table tr {
  border-top: 1px solid #fff;
}
@media (max-width: 640px) {
  .dates table tr {
    border-top: 10px dashed #fff;
  }
  .dates table tr:first-child {
    border-top: none;
  }
}
.dates table button {
  background-color: #fff;
  color: #95c11f;
  border: none;
  text-transform: uppercase;
  float: right;
  text-align: left;
  padding: 10px;
  width: 100%;
}
@media (max-width: 640px) {
  .dates table button {
    margin-bottom: 16px;
  }
}
.dates table a {
  background-color: #fff;
  color: #95c11f;
  border: none;
  text-transform: uppercase;
  float: right;
  text-align: left;
  padding: 10px;
}
@media (max-width: 640px) {
  .dates table a {
    margin-bottom: 16px;
  }
}

.crumpled {
  color: #e62a32;
  text-decoration: none;
}
.crumpled img {
  max-width: 40px;
  margin: 0 10px;
}

.list__horizontal {
  margin: 0;
  padding: 0;
  list-style: none;
}
.list__horizontal li {
  display: inline-block;
  margin-left: 1em;
}
.list__horizontal li:first-child {
  margin-left: 0;
}

.haircut {
  margin-top: 0;
}

#RegCloseBtn {
  position: absolute;
  top: 0;
  right: 0;
  color: #fff;
}

.center {
  text-align: center;
}

.workshop__header {
  padding: 20px 0;
}
.workshop__header img {
  max-width: 150px;
}
.workshop__header h1 {
  line-height: 95%;
}

.workshop__copy {
  padding: 40px 0;
}
.workshop__copy p.intro {
  color: #662483;
  text-transform: uppercase;
}
.workshop__copy img {
  margin-top: 20px;
}
@media (max-width: 640px) {
  .workshop__copy img {
    margin: 0 auto;
    display: block;
    margin-top: 20px;
  }
}
.workshop__copy img:first-child {
  margin-top: 0;
}

.workshop__copy + .workshops {
  color: #662483;
}

#register {
  display: none;
}

.flex {
  display: flex;
}
.flex img {
  align-self: center;
}

.workshop__sepakers p {
  text-align: center;
}
@media (max-width: 640px) {
  .workshop__sepakers div {
    max-width: 50%;
    float: left;
    padding: 0 1.3%;
    box-sizing: border-box;
  }
}

.container, .modal-ajax.container, .modal-iframe {
  max-width: 1140px;
}
@media (max-width: 640px) {
  .container, .modal-ajax.container, .modal-iframe {
    width: calc(100% - 50px);
  }
}

.logo--header {
  max-width: 500px;
}
.active .logo--header {
  max-width: 70px;
}
@media (max-width: 640px) {
  .active .logo--header {
    margin-top: 20px;
  }
}
@media (max-width: 480px) {
  .active .logo--header {
    max-width: 50px;
    margin-top: 10px;
  }
}
@media (max-width: 640px) {
  .logo--header {
    max-width: 265px;
  }
}
@media (max-width: 480px) {
  .logo--header {
    max-width: 180px;
  }
}

.img-circle {
  border-radius: 50%;
}

th {
  text-transform: uppercase;
}

#umbxDates table th {
  color: #36a9e1;
  font-size: 48px;
}
@media (max-width: 640px) {
  #umbxDates table th {
    font-size: 7vw;
  }
}
#umbxDates table td {
  text-transform: uppercase;
  font-size: 28px;
  margin: 0;
  line-height: 0.8em;
}
@media (max-width: 640px) {
  #umbxDates table td {
    font-size: 5vw;
  }
}

td a {
  color: #fff;
  text-decoration: none;
}
td a:hover {
  text-decoration: underline;
}

.section--blue form {
  margin-top: 40px;
}
.section--blue form input {
  background-color: #36a9e1;
  color: #fff;
  border: 5px solid #fff;
  padding: 15px;
  /*text-transform: uppercase;*/
}
.section--blue form ::-webkit-input-placeholder {
  color: #fff;
  text-transform: uppercase;
}
.section--blue form :-moz-placeholder { /* Firefox 18- */
  color: #fff;
  text-transform: uppercase;
}
.section--blue form ::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
  text-transform: uppercase;
}
.section--blue form :-ms-input-placeholder {
  color: #fff;
  text-transform: uppercase;
}
.section--blue form input[type=radio], .section--blue form input[type=checkbox] {
  color: #fff;
}
.section--blue form input[type=submit] {
  background-color: #fff;
  color: #36a9e1;
  line-height: 0.2em;
  font-size: 18px;
  text-transform: uppercase;
}
.section--blue form .input-validation-error {
  margin-bottom: 0;
}
.section--blue form .field-validation-error {
  color: #FCDC3B;
  display: block;
  margin-bottom: 0.5em;
}

.section--light-green form {
  margin-top: 40px;
}
.section--light-green form input {
  background-color: #aacd4c;
  color: #fff;
  border: 5px solid #fff;
  padding: 15px;
  /*text-transform: uppercase;*/
}
.section--light-green form ::-webkit-input-placeholder {
  color: #fff;
  text-transform: uppercase;
}
.section--light-green form :-moz-placeholder { /* Firefox 18- */
  color: #fff;
  text-transform: uppercase;
}
.section--light-green form ::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
  text-transform: uppercase;
}
.section--light-green form :-ms-input-placeholder {
  color: #fff;
  text-transform: uppercase;
}
.section--light-green form input[type=radio] {
  color: #fff;
}
.section--light-green form input[type=submit] {
  background-color: #fff;
  color: #aacd4c;
  line-height: 0.2em;
  font-size: 18px;
  text-transform: uppercase;
}
.section--light-green form .input-validation-error {
  margin-bottom: 0;
}
.section--light-green form .field-validation-error {
  color: #E04006;
  display: block;
  margin-bottom: 0.5em;
}

#host form {
  margin-top: 40px;
  margin-bottom: 80px;
}
#host input {
  background-color: #fff;
  color: #36a9e1;
  border: 5px solid #36a9e1;
  padding: 15px;
  /*text-transform: uppercase;*/
}
#host textarea {
  resize: none;
  color: #36a9e1;
  border: 5px solid #36a9e1;
  padding: 15px;
  /*text-transform: uppercase;*/
}
#host ::-webkit-input-placeholder {
  color: #36a9e1;
  text-transform: uppercase;
}
#host :-moz-placeholder { /* Firefox 18- */
  color: #36a9e1;
  text-transform: uppercase;
}
#host ::-moz-placeholder { /* Firefox 19+ */
  color: #36a9e1;
  text-transform: uppercase;
}
#host :-ms-input-placeholder {
  color: #36a9e1;
  text-transform: uppercase;
}
#host input[type=submit] {
  background-color: #36a9e1;
  color: #fff;
  line-height: 0.2em;
  font-size: 18px;
  text-align: center;
  text-transform: uppercase;
}
#host .input-validation-error {
  margin-bottom: 0;
}
#host .field-validation-error {
  color: #FF3030;
  display: block;
  margin-bottom: 0.5em;
}

.checkboxlist label {
  margin-bottom: 0;
}

form label {
  margin: 0;
}

.bottom {
  margin-bottom: 1em;
}