/* School Room Cafe style Sheet */
html {
 font-size: 14px;
}

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

nav {
  display: grid;
}

.overall {
  max-width: 1920px;
  margin: auto;
}

.headerBlock {
  background-color: #F3901D;
  background-size: cover;
  padding: 0.2rem 0;

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

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

.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.admin {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.itemArticle {
  padding: 6px;
}

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

}

.itemArticle h1 {
  color: #F3901D;
  font-weight: 900;
  font-size:  2.6rem;
  padding:  0 12px;
  margin: 0;
}

.itemArticle h2 {
  color: #F3901D;
  font-weight: 700;
  font-size:  1.6rem;
  padding:  0 12px;
  margin: 14px 0 0 0 ;
}

.itemArticle h3 {
  color: #F3901D;
  font-size:  1.6rem;
  margin: 0;
}

.itemArticle p, .itemArticle li {
  font-weight: 300;
  font-size:  1.3rem;
  padding:  0;
  margin:  1rem 0;
}

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

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

.itemArticle a {
  color:  #000;
}


.chalkboard {
	border:  12px solid #815612;
	border-radius:  10px;
	background-color: #000;
  background-image: url(/images/chalkboard.png);
	color:  #fff;
	padding:  8px 12px;
	margin:  18px;
  font-family: 'Kalam', cursive;
  box-shadow: 5px 10px 8px #333333;
}

.chalkboard p {
font-family: 'Kalam', cursive;
font-size:  1.6rem;
}

.chalkboard h1 {
	font-size:  2.8rem;
	color: #F3901D;
  text-align: center;
}

.chalkboard h2 {
	font-size:  2rem;
	color: #F3901D;
}

.chalkboard h3 {
	font-size:  1.8rem;
	color: #F3901D;
}

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

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

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

.singleBlock img {
  width:  90%;
}

.contactblock {
  display: grid;
  grid-template-columns: 1fr 4fr;
  margin-left: 2rem;

}

.contactblock input[type="text"], .contactblock input[type="email"], .contactblock textarea{
 width: 85% !important;

}


.clearfix {
  clear:  both;
}

footer {
  background-color: #F3901D;
  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: #000;
  text-decoration: none;
}

footer > p  {
  color: #000;
  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: #FDDBB4; 
 font-size: 1.3rem;
 margin:  6px 10px;
}


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

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

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

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

.cafeButton:hover {
  background-color: #FDDBB4;
  color:  #000;  
}

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

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

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

.itemArticle img {
	width:  50%;
}

.headItem img {
  width:  30%;
}

.contactblock {
  display: grid;
  grid-template-columns: 1fr;
  margin-left: 1rem;

}

.contactblock p {
  padding: 1rem 0 0 0;
  margin: 0;
}

}



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

}

/* Handle  large screens..... */

@media all and (min-width : 1200px) {
 .headerBlock {
  grid-template-columns: 1fr 1fr 3fr;
 }

}