:root {
  --main-radius: 18px;
  --main-padding: 24px;
}

body{ margin: 24px; padding: 24px; }


img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
}

.container {  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 24px 24px;
  grid-auto-flow: row;
  grid-template-areas:
    "left_top left_top center_top center_top center_top center_top right_top right_top"
    "left_top left_top center_center center_center center_center center_center right_top right_top"
    "left_top left_top center_center center_center center_center center_center right_top right_top"
    "left_top left_top center_center center_center center_center center_center right_bottom right_bottom"
    "left_bottom_1 left_bottom_1 center_center center_center center_center center_center right_bottom right_bottom"
    "left_bottom_2 left_bottom_2 center_bottom center_bottom center_bottom center_bottom right_bottom right_bottom";
}


.left_top { grid-area: left_top; 
 border-radius: 18px;   overflow: hidden;
}

.banner-background .img {
    transition: transform 1s;
}

.banner-background .img:hover {
     -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Safari 3-8 */
  transform: scale(1.2); 
}



.banner-background{
        width: 100%;
    height: 100%;
    background-size: cover;
}


.banner-text{
position: absolute !important;
    width: 80%;
    bottom: 8px;
    left: 16px;
    }

.left_bottom_1 { grid-area: left_bottom_1; background-color: lightgrey;  border-radius: 18px; padding: 24px;}

.left_bottom_1 a { 
    color: #333333;
    font-size: 1.2em;
    font-weight: 600;
    text-decoration: none;
}

.left_bottom_1 h1, .left_bottom_2 h1 {font-size: 1.2em;}

.left_bottom_2 { grid-area: left_bottom_2; background-color: lightgrey;  border-radius: 18px; padding: 24px;}

.left_bottom_2 a { 
    color: #333333;
    font-size: 1.2em;
    font-weight: 600;
    text-decoration: none;
}


.social-img {
 width: 50px;
height: 50px;
border-radius: 0px;
}

.center_top { grid-area: center_top; 
   flex-shrink: 0;
  width: 100%;
  flex: 1 0 0px;
  display: block;
  overflow: hidden;
  position: relative;
  border-radius: 18px;
background-image: linear-gradient( 110.1deg,  rgba(34,126,34,1) 2.9%, rgba(168,251,60,1) 90.3% );
color: white;
    padding: 20px;

}


.center_top img {
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
    width: auto;
    max-height: 100%;
    margin: 0;
    margin-right: 5%;
    object-fit: initial;
    height: auto;
}

.center_top h1 {
    display: inline-block;
  }



.center_center { grid-area: center_center; 
  flex-shrink: 0;
  width: 100%;
  flex: 1 0 0px;
  display: block;
  overflow: hidden;
  position: relative;
  border-radius: 18px;
background-color: aliceblue;
}

.center_bottom { 
display: grid;
    justify-content: center;
    grid-area: center_bottom;
    background-color: #0F0F0F;
    border-radius: 18px;
    background: url(img/videos.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.center_bottom a { 
    color: white;
    font-size: 25px;
    font-weight: 600;
    text-decoration: none;
}

.right_top { grid-area: right_top;    border-radius: 18px;   overflow: hidden;}

.right_top img {
    transition: transform 1s;
}

.right_top .img:hover {
     -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Safari 3-8 */
  transform: scale(1.2); 
}

.right_top h1 {   
 position: absolute;
 bottom: 8px;
 left: 16px;
 font-size: 35px;
 font-weight: 600;
 text-decoration: none;
 color: #333333;
    }

.logotrailforks {
    width: auto;
    top:5px;
}


.right_bottom { grid-area: right_bottom;     background-color: lightgray;  border-radius: 18px; padding:24px;}





.md-chip {
  display: inline-block;
  background-color: darkgreen;
  padding: 0 12px;
  border-radius: 32px;
  &.md-chip-hover:hover {
    background: #ccc;
  }
}

.md-chip a{
   color: white;
    font-size: 16px;
    font-weight: 300;
    text-decoration: none;
}

.md-chip-clickable {
 cursor: pointer;
}

.md-chip {
  height: 32px;
  line-height: 32px;
}




.md-chips {
  padding: 12px 0;
  .md-chip {
    margin: 0 24px 24px 0;
  } 
}






















html, body , .container {
  height: 100%;
  margin: 0;
}

/* For presentation only, no need to copy the code below */

.container * {
  /*border: 1px solid red;*/
  position: relative;
}

.container *:after {
  /*content:attr(class);*/
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  justify-content: center;
}









*{box-sizing: border-box; -webkit-box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 16px/1.3 sans-serif; }

/*
PURE RESPONSIVE CSS3 SLIDESHOW GALLERY by Roko C. buljan
http://stackoverflow.com/a/34696029/383904
*/

.CSSgal {
	position: relative;
	overflow: hidden;
	height: 100%; /* Or set a fixed height */
}

/* SLIDER */

.CSSgal .slider {
	height: 100%;
	white-space: nowrap;
	font-size: 0;
	transition: 0.8s;
    object-fit: cover;
  animation-name: example;
  animation-duration: 10s;
  animation-iteration-count: 1;
  animation-direction: alternate; 
}

.slider:hover {
  animation-play-state: paused;
}
/* SLIDES */

.CSSgal .slider > * {
	font-size: 1rem;
	display: inline-block;
	white-space: normal;
	vertical-align: top;
	height: 100%;
	width: 100%;
}

.CSSgal .slider img {
object-position: 50% 50%; /* default position */
object-position: right bottom;
object-position: 20px 95px;
object-position: center 20px; /* mix and match */
object-position: 60% top; /* mix and match */
}



/* NAVIGATION */

.CSSgal .bullets {
	position: absolute;
	z-index: 2;
	bottom: 0;
	padding: 10px 0;
	width: 100%;
	text-align: center;
}
.CSSgal .bullets > a {
	display: inline-block;
	width:       30px;
	height:      30px;
	line-height: 30px;
	text-decoration: none;
	text-align: center;
	background: rgba(255, 255, 255, 1);
	-webkit-transition: 0.3s;
	transition: 0.3s;
}
.CSSgal .bullets > a+a {
	background: rgba(255, 255, 255, 0.5); /* Dim all but first */
}
.CSSgal .bullets > a:hover {
	background: rgba(255, 255, 255, 0.7) !important;
}

/* NAVIGATION BUTTONS */
/* ALL: */
.CSSgal >s:target ~ .bullets >* {      background: rgba(255, 255, 255, 0.5);}
/* ACTIVE */
#s1:target ~ .bullets >*:nth-child(1) {background: rgba(255, 255, 255,   1);}
#s2:target ~ .bullets >*:nth-child(2) {background: rgba(255, 255, 255,   1);}
#s3:target ~ .bullets >*:nth-child(3) {background: rgba(255, 255, 255,   1);}
#s4:target ~ .bullets >*:nth-child(4) {background: rgba(255, 255, 255,   1);}
#s5:target ~ .bullets >*:nth-child(5) {background: rgba(255, 255, 255,   1);}
#s6:target ~ .bullets >*:nth-child(6) {background: rgba(255, 255, 255,   1);}
/* More slides? Add here more rules */


/* SLIDER ANIMATION POSITIONS */

#s1:target ~ .slider {transform: translateX(   0%); -webkit-transform: translateX(   0%);}
#s2:target ~ .slider {transform: translateX(-100%); -webkit-transform: translateX(-100%);}
#s3:target ~ .slider {transform: translateX(-200%); -webkit-transform: translateX(-200%);}
#s4:target ~ .slider {transform: translateX(-300%); -webkit-transform: translateX(-300%);}
#s5:target ~ .slider {transform: translateX(-400%); -webkit-transform: translateX(-400%);}
#s6:target ~ .slider {transform: translateX(-500%); -webkit-transform: translateX(-500%);}


@keyframes example {
  0%   {transform: translateX(   0%); -webkit-transform: translateX(   0%);}
  16.7%  {transform: translateX(-100%); -webkit-transform: translateX(-100%);}
  33.4%  {transform: translateX(-200%); -webkit-transform: translateX(-200%);}
  50.1%  {transform: translateX(-300%); -webkit-transform: translateX(-300%);}
  66.8%  {transform: translateX(-400%); -webkit-transform: translateX(-400%);}
  83.5%  {transform: translateX(-500%); -webkit-transform: translateX(-500%);}
  100%   {transform: translateX(   0%); -webkit-transform: translateX(   0%);}
}

/* More slides? Add here more rules */

/* YOU'RE THE DESIGNER! 
   ____________________
   All above was mainly to get it working :)
   CSSgal CUSTOM STYLES / OVERRIDES HERE: */


.CSSgal a {
	border-radius: 50%;
	margin: 0 3px;
	color: rgba(0,0,0,0.8);
	text-decoration: none;
}







@media only screen and (max-width: 950px) {
  .container {
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: 0.4fr 1fr 1.5fr 0.5fr 0.3fr 0.3fr 0.3fr 0.5fr; 
    grid-template-areas:
      "center_top"
      "center_center"
      "left_top"
      "right_top"
        "center_bottom"
      "left_bottom_1"
      "left_bottom_2"
      "right_bottom";
  }
}