/*************************************************
BUIX - Brutalist User Interface Experience
**************************************************/

/* BUTTONS
**********************************/
button, .button, .btn, input[type="submit"] {
	text-align: center;
	display: inline-block; 
	border-radius: 5px;
	cursor: pointer;
	padding: 0.3em;
	line-height: 150%;
	margin: 0.3em;
}
.blocked:hover { 
	cursor: not-allowed !important; 
}

.large-btn { padding: 2em; line-height: 180%; }
.medium-btn { padding: 1.45em; line-height: 160%; }
.small-btn { padding: 0.75em; line-height: 140%; }
.full-btn { display: block; width: 100%; text-align: center; }
button.squared, .btn.squared, .button.squared, input[type="submit"].squared { border-radius: 0 !important; }

/* NAVIGATION
**********************************/
/* Default Nav */
nav a { display: block; }
nav a.active { text-decoration: underline; }
nav a:hover { text-decoration: underline; }
nav ul li ul li a { padding-left: 0.5em; }
nav ul li ul li ul li a { padding-left: 1em; }
nav ul li ul li ul li ul li a { padding-left: 1.5em; }

/* Simple Nav */
ul.simple-nav, nav.simple ul {
  display: block;
  font-size: 1.2em;
  width: 100%;
  margin: 0 auto; padding: 0 !important;
  list-style: none;
  background: transparent; /* transparent by default. Use flavors to add color! */
  border-bottom: 1px solid #fff;
  border-top: 1px solid #fff;
}
ul.simple-nav li, nav.simple li { 
	display: block; width: 100%;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	padding: 0.45em;
}
ul.simple-nav li a, nav.simple ul li a{
  display: block;
  text-decoration: none;
  width: 100%;
  padding: 0;
}
ul.simple-nav li span, nav.simple ul li span {
  display: none;
}

ul.simple-nav li a:hover span, nav.simple ul li a:hover span {
  display: block;
  font-size: 0.8em;
  padding: 10px 0;
}
ul.simple-nav li.active, nav.simple ul li.active {
	font-size: 140%; font-weight: 600;
}

ul.simple-nav li ul { list-style: none; padding: 0; margin: 0; }
ul.simple-nav li ul li { list-style: none; padding-left: 0.8em; margin: 0;  }
ul.simple-nav li ul li a { border: none; }
ul.simple-nav li ul li a:hover { border-top: none; border-right: 3px solid #fff; border-left: 3px solid #fff; }

.jagged nav { padding: 0; margin: 0; }

/* SCROLLTOP: Scroll back to top
**********************************/
a.scrolltop { display: block; width: 100%; padding: 0.6em; font-size: 1.6em; text-align: center; }
a.scrolltop:hover { text-decoration: line-through; }

/* STACKS: create layers
**********************************/
.stack-auto { display: flex; }
.stack-auto.draggable { position: absolute; }
.stack-auto.draggable, .stack-auto.brick { display: inline-block !important; }
.stack-base { z-index: 0 !important; }
.stack1 { z-index: 1 !important; }
.stack2 { z-index: 2 !important; }
.stack3 { z-index: 3 !important; }
.stack4 { z-index: 4 !important; }
.stack5 { z-index: 5 !important; }
.stack6 { z-index: 6 !important; }
.stack7 { z-index: 7 !important; }
.stack8 { z-index: 8 !important; }
.stack9 { z-index: 9 !important; }
.stack-middle { z-index: 29 !important; }
.stack-high { z-index: 49 !important; }
.stack-top { z-index: 99 !important; }

/* STICKIES: fixed positions 
**********************************/
.glued { position: -webkit-sticky; position: sticky; top: 0px; }
.sticky { position: fixed; }
.sticky-bottom { position: fixed; bottom: 0; }
.sticky-bottom-right { position: fixed; bottom: 0; right: 0; }
.sticky-bottom-left { position: fixed; bottom: 0; left: 0; }
.sticky-top { position: fixed; top: 0; }
.sticky-top-right { position: fixed; top: 0; right: 0; }
.sticky-top-left { position: fixed; top: 0; left: 0; }

/* TAGS 
**********************************/
ul.tags { list-style: none; padding: 0; margin: 0; }
ul.tags li { display: inline-block; list-style-type: none; padding: 0; margin: 0.4em; }


/* REVELATIONS
**********************************/
.revelation, .reveal { display: inline-block; transition: transform 2s; -webkit-transition: transform 2s; }
.revelation .secret, .reveal .secret { display: none; }
.revelation:hover, .revelation:active, .revelation:focus, .reveal:hover, .reveal:active, .reveal:focus { 
	cursor: pointer; 
	-ms-transform: scale(1.5,1.5); /* IE 9 */
	-webkit-transform: scale(1.5,1.5); /* Safari */
	transform: scale(1.5,1.5); /* Standard syntax */
}
.revelation:hover .secret, .revelation:active .secret, .revelation:focus .secret, .reveal:hover .secret, .reveal:active .secret, .reveal:focus .secret { display: block; }

/* THUMBNAILS
**********************************/
ul.thumbs-tiny, ul.thumbs-small, ul.thumbs-medium, ul.thumbs-large, ul.thumbs-xlarge {
	list-style: none; padding: 0; margin: 0; display: inline-block; width: 100%;
}
ul.thumbs-tiny li, ul.thumbs-small li, ul.thumbs-medium li, ul.thumbs-large li, ul.thumbs-xlarge li {
	display: inline-block; float: left;
}
ul.thumbs-tiny img, img.tiny-thumb { height: 60px; width: auto; }
ul.thumbs-small img, img.small-thumb { height: 90px; width: auto; }
ul.thumbs-medium img, img.medium-thumb { height: 120px; width: auto; }
ul.thumbs-large img, img.large-thumb { height: 150px; width: auto; }
ul.thumbs-xlarge img, img.xlarge-thumb { height: 180px; width: auto; }

/* MODALS
**********************************/
.modal {
  left: 50%;
  margin: -250px 0 0 -32%;
  opacity: 0;
  position: absolute;
  top: -50%;
  visibility: hidden;
  width: 65%;
  box-shadow: 0 3px 7px rgba(0,0,0,.25);
  box-sizing: border-box;
  transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition-property: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out
}
.modal.draggable:active { transition: none;
-webkit-transition-property: none; 
-moz-transition-property: none;
-o-transition-property: none;
transition-property: none;
}

.modal:target {
  opacity: 1;
  top: 50%;
  visibility: visible
}
.modal .modal-head, .modal .modal-footer { border-bottom: 1px solid #e7e7e7; }
.modal .modal-footer {
  border: none;
  border-top: 1px solid #e7e7e7;
}
.modal h2, .modal h3, .modal h4 { margin: 0; }
.modal .modal-content, .modal .modal-head, .modal .modal-footer { padding: 10px; }
.modal-content {
  position: relative;
  z-index: 9999;
}

.modal .overlay {
  background: rgba(0,0,0,0.8); /* Default color - this can be overridden by using a flavor! */
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9989;
}
.modal .overlay.opacity { opacity: 0.8; }
.modal-content a {
  text-decoration: none;
  display: inline-block;
  padding: 5px 10px;
}
.modal-content iframe { width: 98%; margin: 0 auto;  }

/* FORMS
**********************************/
form { display: block; }
form .form-group { display: block; margin-top: 0.75em; margin-bottom: 0.75em; }
form input[type="text"], form input[type="email"], form input[type="tel"], form input[type="url"], form input[type="number"] { 
	padding: 0.4em; margin: 0.25em; display: block; width: 98.5%; 
}
form input[type="checkbox"] { width: 1.5em; height: 1.5em; margin: 0.25em; }
form input[type="radio"] { width: 1.5em; height: 1.5em; margin: 0.25em; }
label.radio, label.checkbox { line-height: 1.5em; font-size: 1.1em; margin: 0.25em; }
form select { width: 98.5%; padding: 0.4em; margin: 0.25em; }
form select option { background: #ccc; color: #333; font-size: 1.35em;}
form textarea { width: 98.5%; min-height: 3em; padding: 0.4em; margin: 0.25em; }
form input[type="text"]:active, form input[type="email"]:active, form input[type="tel"]:active, form input[type="url"]:active, form input[type="number"]:active, form textarea:active, 
form input[type="text"]:focus, form input[type="email"]:focus, form input[type="tel"]:focus, form input[type="url"]:focus, form input[type="number"]:focus, form textarea:focus, form select:focus, form select:active { 
	border: 3px solid #333; outline: none !important; 
}
form input[type="submit"] { padding: 0.75em; margin: 0.25em; }

/* TABS
**********************************/
.tabs {
	display: flex;
	flex-wrap: wrap;
}
.tabs label {
	order: 1; // Put the labels first
	display: block;
	padding: 1rem 2rem;
	margin-right: 0.2rem;
	cursor: pointer;
  transition: background ease 0.2s;
}
.tabs .tab {
  order: 99; // Put the tabs last
  flex-grow: 1;
	width: 100%;
	display: none;
  padding: 1rem;
}
.tabs input[type="radio"] {
	display: none;
}
.tabs input[type="radio"]:checked + label { background: #fff; }
.tabs input[type="radio"]:checked + label::after { content:""; display: block; height: 4px; background: #000; }
.tabs input[type="radio"]:checked + label + .tab {
	display: block;
}
@media (max-width: 45em) {
  .tabs .tab,
  .tabs label {
    order: initial;
  }
  .tabs label {
    width: 100%;
    margin-right: 0;
    margin-top: 0.2rem;
  }
}

/* DRAGGABLE
**********************************/
.draggable { cursor: move; }

/* SCROLLER
**********************************/
.scroller-wrap { display: block;
	width: 100%; overflow: hidden;
}
.scroll-left, .scroll-right, .scroll-up, .scroll-down { 
	display: block; position: relative; overflow: hidden; 
}
.scroll-left { animation: scroll-left 10s linear infinite; width: 200%; }
.scroll-right { animation: scroll-right 10s linear infinite; width: 100%; }
.scroll-up { animation: scroll-up 10s linear infinite; }
.scroll-down { animation: scroll-down 10s linear infinite; }
.scroll-left .scroll-item, .scroll-right .scroll-item { display: block; }
.scroll-right .scroll-item { float: right; }
.scroll-left .scroll-item { float: left; }
.scroll-up .scroll-item, .scroll-down .scroll-item { display: block !important; }
.scroll-left:hover, .scroll-right:hover, .scroll-up:hover, .scroll-down:hover {
    animation-play-state: paused;
}
@keyframes scroll-left {
	0% {left:100%;}
	100% {left:-100%;}
}
@keyframes scroll-right {
	0% {right:100%}
	100% {right:-100%;}
}
@keyframes scroll-up {
	0% {top:100%;}
	100% {top:-250%;}
}
@keyframes scroll-down {
	0% {bottom:220%;}
	100% {bottom:-220%;}
}