/* CSS Document */

/*Spacewalk
Copyright Jonathan Massey 2020
jonathanmassey.com*/

/*
This used to use the B-E-M, Block, Element, Model naming convention.
block-name__element--modifier

Then it stopped. BEM is long and tedious for light weight frame works like this one. 

Now Space Walk uses this: 
sw-component
sw-component_subComponent
sw-component_subComponent-modifier
sw-component_subComponent-modifier-additionalModifier
Basic HTML and style additives have no pre-fixes and can be used interchangeably with different elements
*/


/*Document Styling*/
body {
    
    font-size: 16px;
    margin:0px;
    padding:0px;
    
    /*Customize Font*/
    font-family: Helvetica, Arial, sans-serif;
    
}

section{
  
  width:100%;
  height:auto;
  display: block;
  
}

div{
  
  display:block;
  
}

.overflow-hidden{
  
  overflow: hidden;
  
}

.overflow-scroll{
  
  overflow: scroll;
  
}


.overflow-scroll-x{
  
 overflow-x: scroll;
  
}

.overflow-scroll-y{
  
  overflow-y: scroll;
  
}


a{
  
  color: var(--color-emphasis-primary);
  text-decoration: none;
  
  cursor: pointer;
  
}

/*Type System*/

h1{
  font-size: 96px;
}

h2{
    font-size: 60px;
}
h3{
  font-size: 48px;
}
h4{
  font-size: 34px;
}

h5{
    font-size: 24px;
}
h6{
    font-size: 20px;
}
.subtitle{
  font-size: 16px;
}
.subtitle2{
  font-size: 14px;
}

.body{
  font-size: 16px;
}
.body2{
  font-size: 14px;
}
caption{	
  font-size: 12px;	
}
.caption{	
  font-size: 12px;	
}
.overline{
  text-transform: capitalize;
  font-size: 10px;
}


p{ font-size: 16px; }


/*Text*/
.text_dark{color:var(--color-text-dark);}
.text_dark-medium{color:var(--color-text-dark-medium);}

.text_light{color:var(--color-text-light);}
.text_light-medium{color:var(--color-text-light-medium);}

/*Colors*/

.color_emphasis-primary{color:var(--color-emphasis-primary);}
.color_emphasis-secondary{color:var(--color-emphasis-secondary);}

.color_neutral-10{color:var(--color-neutral-10);}
.color_neutral-15{color:var(--color-neutral-15);}
.color_neutral-20{color:var(--color-neutral-20);}
.color_neutral-30{color:var(--color-neutral-30);}
.color_neutral-63{color:var(--color-neutral-63);}
.color_neutral-88{color:var(--color-neutral-88);}
.color_neutral-95{color:var(--color-neutral-95);}
.color_neutral-100{color:var(--color-neutral-100);}

.color_denotive-success{color:var(--color-denotive-success);}
.color_denotive-error{color:var(--color-denotive-error);}



/*Backgrounds*/
.background_emphasis-primary{background-color:var(--color-emphasis-primary);}
.background_emphasis-secondary{background-color:var(--color-emphasis-secondary);}

.background_neutral-10{background-color:var(--color-neutral-10);}
.background_neutral-15{background-color:var(--color-neutral-15);}
.background_neutral-20{background-color:var(--color-neutral-20);}
.background_neutral-30{background-color:var(--color-neutral-30);}
.background_neutral-63{background-color:var(--color-neutral-63);}
.background_neutral-88{background-color:var(--color-neutral-88);}
.background_neutral-95{background-color:var(--color-neutral-95);}
.background_neutral-100{background-color:var(--color-neutral-100);}


.background_denotive-success{background-color:var(--color-denotive-success);}
.background_denotive-error{background-color:var(--color-denotive-error);}



/*Elevations*/
.elevation-light-1{};


/*Margins*/

.margin8px{ margin: 8px; }
.margin16px{ margin: 16px; }
.margin32px{ margin: 32px; }
.margin64px{ margin: 64px; }
.margin128px{ margin: 128px; }

.marginVertical8px { margin-top: 8px; margin-bottom: 8px; }
.marginVertical16px { margin-top: 16px; margin-bottom: 16px; }
.marginVertical32px { margin-top: 32px; margin-bottom: 32px; }
.marginVertical64px { margin-top: 64px; margin-bottom: 64px; }
.marginVertical128px { margin-top: 128px; margin-bottom: 128px; }

.marginHorizontal8px { margin-left: 8px; margin-right: 8px; }
.marginHorizontal16px { margin-left: 16px; margin-right: 16px; }
.marginHorizontal32px { margin-left: 32px; margin-right: 32px; }
.marginHorizontal64px { margin-left: 64px; margin-right: 64px; }
.marginHorizontal128px { margin-left: 128px; margin-right: 128px; }

/*Alignment*/

.alignTextLeft{ text-align: left; }
.alignTextRight{ text-align: right; }
.alignTextCenter{ text-align: center; }


.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.centered-fixed {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}



/*Lines*/
hr{
    border-top: 1px solid gray;
}


/*Button Styling*/
button{
  
    text-transform: capitalize;    
    border: none;
    color: white;
    padding: 16px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    /*margin: 0px;    Do we need a default margin*/
    cursor: pointer;
    background-color: Transparent; 
    
    /*Standardize Button Sizes (min-width, min-height)*/
  
}

.button{
  
  text-transform: capitalize;    
    border: none;
    color: white;
    padding: 16px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    /*margin: 0px;    Do we need a default margin*/
    cursor: pointer;
    /*background-color: Transparent;*/
  
}

.fill{
    
    background-color: var(--color-emphasis-primary);
    
}

.outline{
    
    outline: 2px solid var(--color-emphasis-primary);
    outline-offset: -2px;
    color: var(--color-primary);

}

.rounded{
    
    border-radius: 5px;
    
}

.circle{
    
    border-radius: 100%;
    min-width:50px;
    min-height:50px;
    
    padding: 0px;
    
}

.circle-outline{
    
    border-radius: 100%;
    border: 2px solid var(--color-emphasis-primary);
    color: var(--color-emphasis-primary);
    
    min-width:50px;
    min-height:50px;
    
    padding: 0px;
    
}

.pill{
    
    /*Use a very large border radius to keep the pill shape*/
    border-radius: 500px;    
    
}

.flat{
    
    border: none; 
    background-color: Transparent;
    color: var(--color-emphasis-primary);
    
}

/*Input Elements*/






/*Utility*/

.sw-hide{
	
	display:none; !important;
	
}



/* Dot Spinner */

.sw-spinner{
  margin: 100px auto 0;
  width: 70px;
  text-align: center;
}

.sw-spinner > div {
  width: 18px;
  height: 18px;
  background-color: #333;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sw-bouncedelay 1.4s infinite ease-in-out both;
  animation: sw-bouncedelay 1.4s infinite ease-in-out both;
}

.sw-spinner .sw-spinner-bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.sw-spinner .sw-spinner-bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sw-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sw-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}





/*Overlay*/
.sw-overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */    
  height: 100%;
  width: 100%;
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0); /* Black w/opacity */
    
-webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
    
  overflow: hidden; /* Disable scroll. Could enable it in one direction and style of scroll bars */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}



/* Add Animation to Modals */
/*
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}
*/



/*Curtain*/
.sw-curtain {
    z-index: 200; /* Sit on top */
    background-color: var(--color-neutral-100);
    overflow: hidden; /* Disable scroll. Could enable it in one direction and style of scroll bars */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

.sw-curtain--top {   
  height: 0%;
  width: 100%;
  position: fixed; /* Stay in place */
  left: 0;
  top: 0;
    
}

.sw-curtain--bottom {   
  height: 0%;
  width: 100%;
  position: fixed; /* Stay in place */
  left: 0;
  bottom: 0;
    
}

.sw-curtain--left {   
  height: 100%;
  width: 0%;
  position: fixed; /* Stay in place */
  left: 0;
  top: 0;
    
}

.sw-curtain--right {   
  height: 100%;
  width: 0%;
  position: fixed; /* Stay in place */
  right: 0;
  top: 0;
    
}


/*Heros*/

.sw-hero{
  
  /*If the BG isn't full width, center it*/
  display:block;
  
  /* Set a specific height */
  height: auto;
  width: 100%;
  
  margin:auto;
  
  overflow:auto;
  
}

.sw-hero_background {
	
  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  
  background-image: url("");
  
}

/*Full Container Image*/
.sw-hero-image{
  
  width:100%;
  height:auto;
  padding:0px;
  margin:0px;
  
}


/* Columns and Row Management */

.sw-column3 {
 box-sizing: border-box;
  float: left;
  width: 33.33%;
  /*padding: 10px;*/
}

.sw-column2 {
  box-sizing: border-box;
  float: left;
  width: 50%;
  /*padding: 20px;*/
}

.sw-column1 {
  box-sizing: border-box;
  float: left;
  width: 100%;
  /*padding: 20px;*/
}

.sw-row{
	
	/*apply a margin or width*/
  
}

/* Clearfix (clear floats) */
.sw-row::after {
  content: "";
  clear: both;
  display: table;
	 
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 736px) {
  .sw-column2 {
    width: 100%;
  }
}













/*Media Queries*/

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

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

	
}

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

	
}

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


}