/* Toft Brook style Sheet */

.headerBlock {
  background-color: #207731;
  display: grid;
  align-items: center;
  column-gap: 2%;
  grid-template-columns: 0.5fr 1.5fr 3fr;
  color:  #fff;

/*  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));*/
}

.headerBlock h1 a {
  color:  white;
  text-decoration: none;
}

.headerBlock h1 a:hover {
  color:  lightgreen;
}

.mainBlock {
  display: grid;
  grid-template-columns: 1fr;
  margin:  0 8%;
}

.mainBlock.dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 8%;
}

.itemArticle {
  padding: 6px;
  box-shadow: 6px 8px 6px #809985;
  margin:  6px 0 12px 0;
  border:  1px solid #809985;
}

.itemArticle h1, .itemArticle h2, .itemArticle h3 {
  color: #207731;
}


.menuheader {
  background-color: #207731;

}

.menuheader ul {
  background-color: #207731;
}

.menuheader li a {
  color:  white;
}

.menuheader li a:hover,
.menuheader .menu-btn:hover {
  background-color: #809985;
  color:  #d6fcde;
}

.toftButton {
  background-color:  #207731;
}

.toftButton:hover {
  background-color: #d6fcde;
  color:  black;  
}

input[type="text"], input[type="email"], textarea, input[type="password"] {
 background-color: #eaf2ec; 
}


input[type="number"] {
 background-color: #eaf2ec; 
}

select {
 background-color: #eaf2ec; 
}

footer {
  background-color: #207731;
}

.ytvid {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    margin-top:  12px;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.menuheader .menu-icon .navicon {
  background: #fff;
  height: 3px;
  width: 24px;
}

.menuheader .menu-icon .navicon:before,
.menuheader .menu-icon .navicon:after {
  background: #fff;
}

.menuheader .menu-icon .navicon:before {
  top: 8px;
}

.menuheader .menu-icon .navicon:after {
  top: -8px;
}



/*
----------------------------------------------------------------------------------
Responsive css here....... 
----------------------------------------------------------------------------------
*/
@media all and (max-width : 400px) {

  .headerBlock {
    grid-template-columns: 1fr;
  }

  footer {
    grid-template-columns: 1fr;
  }

 .mainBlock {
   display: grid;
   grid-template-columns: 1fr;
 }


.itemArticle img {
	width:  50%;
}

.headItem img {
  width:  30%;
}

}


@media all and (max-width : 900px) {
 .headerBlock {
  grid-template-columns: 1fr 1fr 2fr;
 }
 
 .mainBlock {
   margin:  0 2%;
   display: grid;
   grid-template-columns: 1fr;
 }

.itemArticle {
  padding: 6px;
  margin:  6px 0 12px 0;
}


}