@font-face {
	font-family: 'kevbothandwrite';
	src: url('/assets/css/font/kevbothandwrite-regular-webfont.eot'); /* IE9 Compat Modes */
	src: url('/assets/css/font/kevbothandwrite-regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('/assets/css/font/kevbothandwrite-regular-webfont.woff') format('woff'), /* Modern Browsers */
	     url('/assets/css/font/kevbothandwrite-regular-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('/assets/css/font/kevbothandwrite-regular-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
	}

@font-face {
	font-family: 'moonhouse';
	src: url('/assets/css/font/moonhouse-ye5m-webfont.eot'); /* IE9 Compat Modes */
	src: url('/assets/css/font/moonhouse-ye5m-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('/assets/css/font/moonhouse-ye5m-webfont.woff') format('woff'), /* Modern Browsers */
	     url('/assets/css/font/moonhouse-ye5m-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('/assets/css/font/moonhouse-ye5m-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
	}

@font-face {
                font-family: 'edge_of_the_galaxyregular';
                src: url('/assets/css/font/edgeofthegalaxyregular-ovea6-webfont.eot');
                src: url('/assets/css/font/edgeofthegalaxyregular-ovea6-webfont.eot?#iefix') format('embedded-opentype'),
                     url('/assets/css/font/edgeofthegalaxyregular-ovea6-webfont.woff2') format('woff2'),
                     url('/assets/css/font/edgeofthegalaxyregular-ovea6-webfont.woff') format('woff'),
                     url('/assets/css/font/edgeofthegalaxyregular-ovea6-webfont.ttf') format('truetype'),
                     url('/assets/css/font/edgeofthegalaxyregular-ovea6-webfont.svg#edge_of_the_galaxyregular') format('svg');
                font-weight: normal;
                font-style: normal;
            
            }

@font-face {
font-family: 'jura';
src: url('/assets/css/font/Jura-VariableFont_wght.ttf');

}      

            
@font-face {
font-family: 'exo';
src: url('/assets/css/font/Exo-Regular.ttf');
font-weight: normal;
font-style: normal;

}  
            


body {
color: #86C7D1;
background-color: #86C7D1;
background-image: url('/assets/STONEGUARD_1.svg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center; 
  background-size: 100em 100em;

}
h1 {
	font-family: 'jura';
 font-weight: 600;
  font-style: normal;
	font-size: 6em;
        -webkit-text-stroke: 0.01em black;
}


h2 {
	font-family: 'jura';
        font-size: 4em;
	color: #7788ff;
 font-weight: normal;
font-style: normal;

}

h3 {
	font-family: 'jura';
        font-size: 2em;
color: #CC88FF;
}


p {
	font-family: 'exo';
        font-size: 1.2em;
        -webkit-text-stroke: .01em grey;
}


h5 {
        font-family: 'kevbothandwrite';
	font-size: 30px;
	-webkit-text-stroke: .01px azure;
}

a {
color: #86C7D1; 
}

 /* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: black;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: lightblue;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #203C6E;
} 

.title-aug
{
--aug-inlay-bg: radial-gradient(at center, #203C6E, black);
--aug-inlay-opacity: .9;
color: #ffffff;
--aug-border-bg: black;
margin: 0 auto;
width: 70%;
}

.list-aug ul {
  --aug-l: 0.5rem;
  --aug-r: 0.5rem;
  --aug-tl: 0.5rem;
  --aug-tr: 0.5rem;
  --aug-bl: 0.5rem;
  --aug-br: 0.5rem;

}

.dna-demo-mixins li {
width: 50%;
  --aug-l: 0.5rem;
  --aug-r: 0.5rem;
  --aug-tl: 0.5rem;
  --aug-tr: 0.5rem;
  --aug-bl: 0.5rem;
  --aug-br: 0.5rem;

}

.main-aug
{ 
        --aug-border-all: 2px;
	--aug-border-bg: radial-gradient(at center, transparent, lightblue);
        --aug-inlay-bg:radial-gradient(#203C6E, transparent 99%);
	--aug-inlay-all: 20px;

}


.aug-section {
width:66%;
margin: 0 auto; 
padding: 10px;
--aug-inlay-bg: radial-gradient(at center, #cc88ff, black);
}



.aug-list {
    padding: 60px;
    width: 80%;
    margin: 0 auto;
--aug-inlay-bg: black;
color: #cc77ff;
--aug-border-bg: linear-gradient( #86C7D1, #cc88ff);
}

.aug-column {
  
  float: left;
  width: 33.33%;
  --aug-inlay-all: 0px;
--aug-border-bg: #DCB599;
  --aug-inlay-bg: radial-gradient(at center, #203C6E, black);
  --aug-inlay-opacity: .9;
}

.aug-column:not(:hover) {
  --aug-tl-2-scoop-inset: initial;
  --aug-tr-2-round-x: initial;
  --aug-br-2-round-x: initial;
  --aug-bl-2-round-x: initial;

  }


  .aug-column:hover  {
--aug-clip-r1: initial;
--aug-clip-r2: initial;
--aug-clip-l2: initial;
--aug-clip-l1: initial;
--aug-r-inset1: 12%;
--aug-l-inset1: 12%;
--aug-l-extend1: 10%;
--aug-r-extend1: 10%;
  }
                                                                                                     │--aug-br-2-scoop-inset: initial;
                                                                                                     │
                                                                                                     │--aug-bl-2-scoop-inset: initial;


  }