#hero {
   width: 100%;
   height: 830px;
   padding: 0;
   color: #fff;
   /* background: var(--main-bg-color); */
	background: #aaa;
	position: relative;
   text-align: center;
   border-bottom: 10px var(--main-highlight) solid; }


.slide {
   background-repeat: no-repeat;
   background-position: center top;
   position: relative; 
   background-size: cover;
   width: 100%;
   max-width: 2000px;
   height: 820px;
   opacity: 0.5; }   
   



/* --- Peition --- */
#intro {
   background: none;
   color: white;
   padding: 0;
   position: absolute;
   z-index: 1000;
   width: 100%;
   bottom: 40px;
   height: auto;
   text-align: left; }
   
   #intro .text {
      padding: 0;
      font-size: 100%;
      line-height: 1.5;
      text-align: center;
      width: 1000px;
      text-shadow: 0 0 40px rgba(0,0,0,.2); }
      
      #intro .text h1 { font-size: 320%; color: white; margin-bottom: 10px; }
      #intro .text span { font-size: 160%; font-family: var(--headline-font); }

      
   #intro .actions {
      padding: 30px 40px; 
      background: white;
      position: relative;
      top: initial;
      color: white; }
      
   

.action {
    background: white;
    max-width: 600px;
    padding: 30px;
    margin-top: 3.5rem;
    text-align: center;
    -webkit-border-radius: 4px 4px 4px 4px;
   border-radius: 4px 4px 4px 4px;
-webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,.2);
box-shadow: 0 0 30px 0 rgba(0,0,0,.2);}
   
   .action h2 { 
      font-size: 250%; margin: 0 0 .25em 0; }
      
   .action form { margin: 0; padding: 0; }
   
    
.home-section {
   width: 100%;
   padding: 4em 0; 
   text-align: center;
   font-size: 130%; }
      
.title {
   position:relative;
   width: 60%; 
	margin: 0 auto;
   text-align: center;
}
.title h1 { 
	font-family: var(--headline-font);
	color: var(--main-title-color);
	font-size: 250%;
	line-height:1;
	width: auto;
   display: inline-block;
	text-align:center;
	position:relative;
	z-index: 100; 
}
.title.alt h1 { color: white; }
.title h1::after { 
	content: "";
	width:120%;
	height: 10px;
	position:absolute;
	bottom: -15px;
	left: -10%;
	z-index:-1;
	background: var(--sec-hightlight);
	/*transform: skewX(-15deg);*/ }
.title.alt h1::after { background: var(--main-highlight); }

.flex_block {
   flex: 0 0 auto;
   padding: 0;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: flex-start;
   align-content: flex-start; }
   
   .flex_block a {
      width: 25%;
      text-align: center;
      vertical-align: top; 
      -webkit-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out;
      -ms-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out;}
      
   .flex_block a span.icon {
      height: 150px;
      display: block;
      position: relative; }
      
   .flex_block a span.icon img {
      vertical-align: middle;
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%, -50%);}
      
   .flex_block a span.title2 {
      display: block;
      color: #fff;
      font-weight: 600;
      font-size: 120%; 
      font-family: var(--headline-font); }
    
   .flex_block a:hover {
      -moz-transform: scale(1.15);
      -webkit-transform: scale(1.15);
      -o-transform: scale(1.15);
      -ms-transform: scale(1.15);
      transform: scale(1.15); }
    
    .flex_block a:hover span.title2 {
      color: var(--link-color); }