/* Toft style Sheet */
html {
 font-size: 14px;
 margin:    0 auto;
 max-width: 1920px;
}

body {
    font-family: 'Roboto', sans-serif;
}

nav {
  display: grid;
}

.headerBlock {
  background-color: #ccc55e; /* was #80d2ff */
  background-size: cover;
  padding: 0.2rem 0;

  /* Grid styles */
  display: grid;
  align-items: center;
  column-gap: 2%;
  grid-template-columns: 0.5fr 1fr 3fr;
  color:  #fff;

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

.headerBlock h1 {
  font-family: 'Carter One', cursive;
  font-size:  2.4rem;
}

.headerBlock p {
  font-size:  1.2rem;
}

.headerBlock img {
  width:  90%;
  padding:  0 0 6px 18px;
}

.headerBlock img.cafe {
  width:  90%;
  padding:  18px 0 0 0;
}



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

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


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

.itemArticle {
  padding: 6px;
  box-shadow: 6px 8px 6px #8a8645;
  margin:  6px 18px 12px 0;
  border:  1px solid #ccc55e; /* was 71848f */
}

.itemArticle.full img {
  width:  98%;
}

.itemArticle.help img {
  width:  98%;
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.itemArticle img {
  width:  30%;
  float:  left;
  margin-left:  12px;
  margin-right:  24px;
  margin-bottom:  12px;
  margin-top: 12px;
  box-shadow: 5px 10px 8px #333333;

}
.itemArticle.gallery img {
  width:  94%;
  box-shadow: 5px 10px 8px #333333;

}

.itemArticle h1, .itemArticle h2, .itemArticle h3 {
  color: #4f4c1c;
  font-weight: 900;
  font-size:  2rem;
  padding:  0 12px;
  margin: 0;
}

.itemArticle h2 {
  font-weight: 700;
  font-size:  1.6rem;
  margin: 14px 0 0 0 ;
}

.itemArticle h3 {
  font-size:  1.4rem;
  margin: 24px 0 0 0;

}

.itemArticle p, .itemArticle li {
  font-weight: 300;
  font-size:  1.4rem;
  padding:  0;
  margin:  12px 6px 0 6px ;
}

.itemArticle > p > span {
  font-weight: bold;
  color:  #4f4c1c;
  margin-left: 12px;
  margin-top:  12px;
}

.itemArticle li {
  margin: 4px 0;
  padding: 0;
}

.itemArticle a:hover {
  text-decoration: none;
  color: #805500 ;
}

.itemArticle a {
  color:  #000;
}

.singleBlock, .eventBlock, .homeEventBlock {
   background-size: cover;
   display: grid;
   grid-template-columns: 2fr 3fr;
}

.singleBlock p, .eventBlock p, .homeEventBlock p {
   margin-left: 10px;
}

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

.singleBlock.one {
   grid-template-columns: 1fr;
   margin-left: 0px;
   padding-left: 0;
}

.singleBlock img {
  width:  90%;
}

.eventBlock p {
  margin-top:  12px;
  margin-bottom:  12px;
}

.eventBlock span{
  font-weight:  bold;
  color:  #304a59;
  margin-left: 12px;
}


.contactblock {
  display: grid;
  grid-template-columns: 1fr 4fr;

}

.clearfix {
  clear:  both;
}

footer {
  background-color: #4f4c1c;
  display: grid;
  align-items: center;
  column-gap: 2%;
  grid-template-columns: 1fr 1fr;
  padding: .5rem;
  margin:  0;
  text-align: center;
  font-size: 1.2rem;
}

footer > p > a {
  color: #fff;
  text-decoration: none;
}

footer > p  {
  color: #fff;
  margin: 0;
  padding: 0;
  font-weight: 400;
}

footer > p > a:hover {
  color: #d2a679;
}


input[type="text"], input[type="email"], textarea, input[type="password"] {
 background-color: #f5f4dc; 
 font-size: 1.3rem;
 margin:  6px 10px;
}


input[type="number"] {
 background-color: #f5f4dc; 
 font-size: 1.2rem;
}

select {
 background-color: #f5f4dc; 
 font-size: 1rem;
 /*-webkit-appearance: menulist;*/
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 max-width:  90%;
}

.generalTable td, .generalTable thead td {  
  font-size: 1.4rem;
  font-weight: 300;
  padding: 0.6rem 1rem;
  margin: 0;
  border-bottom: 1px solid #EADEBD;
}

.generalTable thead td {  
  font-size: 1.1rem;
  font-style:  italic;
}

.toftButton {
  margin: 4px 3px;
  padding: 4px 12px;
  font-size: 1.3rem;
  background-color: #96935c;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 3px 3px 2px #AAAAAA;
}

.toftButton:hover {
  background-color: #ccc55e;
  color:  #000;  
}

.splitDiv {
  margin: 0;
  display: grid;
  grid-template-columns: 2fr 1fr;

}

/*
----------------------------------------------------------------------------------
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 : 1100px) {
  .splitDiv {
    margin: 0 1rem;
    display: grid;
    grid-template-columns: 1fr;

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

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

 }


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

}