li {
      margin-bottom: 20px;
      list-style: none;
    }

.col img {
transition: all 250ms ease-in-out 0s;
}

.col img:hover {
transform: scale(1.05,1.05) rotate(0.5deg);
}

	
/* ---------------------- MENU ---------------------------------- */
	#menu ul {
    list-style-type: none;
    padding: 0;
    overflow: hidden;
    background-color: #000000;
    width: 98%;
margin-left: auto;
margin-right: auto;
display: block;
margin-top: 0;
margin-bottom: 0;
    }
    #menu li {
    float: left;
	margin-bottom: 5px;
    }
    #menu li a {
    display: block;
    color: black;
    text-align: center;
    padding: 5px 8px;
	margin: 5px 8px;
    text-decoration: none;
	font-size: 18px;
	background-color: #fff600;
	    }
    #menu li a:hover {
    background-color: #fff600;
    }
/* ------------------ END MENU ---------------------------------- */

  body {
    background-color: #fbfaeb;
background-image: url('grammi-provlepsewn-back.jpg');
    font-family: 'Trebuchet MS', sans-serif;
color: white;
  }
  a {
  text-decoration: underline dotted red;
  }
  img {
    background-color: #fff600;
    border: 1px solid yellow;
margin-left: auto;
margin-right: auto;
display: block;
width: 70%;
  }
  #header img {
  width: auto;
  }
  .noborder img {
    border: 0px solid yellow;
  }
.featured {
background-color: #fece50;
background: linear-gradient(#fece50, #fdeb89);
}
.featured img {
    width: 30%;
    float: left;
    margin: 10px 15px;
}
  .onecol {
  width:300px;
  margin-left:auto;
  margin-right:auto;
  }
  #header .colums-3, footer .colums-3 {
  background-color:#000000;
  }
  footer .colums-3 {
  color:white;
  }
  .colums-3 {
  width: 100%;
  float:left;
  }
  .container {
  margin-left: auto;
  margin-right: auto;
  width: 55%;
  }
  .mainbody .container {
background-color: rgba(0,0,0,0.9);
border-radius: 10px;
padding-top: 1px;
padding-bottom: 1px;
  }
  .container300 {
  margin-left: auto;
  margin-right: auto;
  width: 300px;
  }
  .onecol .container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  }
  .col {
  width: 100%;
  }
  .header {
  width: 95%;
  }
  .insidecol {
  width: 96%;
  margin: 5px 15px 30px 15px;
  }
  p, h1 {
  text-align: center;
  }
  h1 {
  font-size: 45px;
  }
  h2 {
  text-align: center;
  color: white;
font-size: 35px;
  }
  a h2 {
  color: red
  }
  .numbers {
  color: red;
  font-size: 45px;
  font-weight: bold;
  margin: 5px 0px;
  }
  .desktophide {
  display:none;
  }
  .headermargin {
  margin: 0 10px 0 15px;
  }
  .totop {
    background-color: yellow;
    border: 1px solid yellow;
  margin-left: auto;
  margin-right: auto;
  width: 10%;
  padding: 0 0 5px;
  }
  footer {
  margin-top: 10px;
  }

/* -------------------------------- MEDIA SCREENS -------------------- */

/* NEW MENU */
@media only screen and (max-width: 1119px) {
  #menu ul {
    width: 100% !important;
}
#menu li {
    width: 50% !important;
    float: left !important;
}
#menu li a {
    display: block;
    color: black;
    text-align: center;
    padding: 5px 8px;
    margin: 5px 8px;
    text-decoration: none;
    font-size: 18px;
    background-color: #fff600;
    min-height: 63px !important;
}
    
}



  @media only screen and (max-width: 389px) {
  .container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  }
  .container300 {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  }
  .col2 {
  float:left;
  width:auto;
  }
  .col3 {
  float:left;
  width:auto;
  }
  .numbers {
  color: red;
  font-size: 35px;
  font-weight: bold;
  margin: 5px 0px;
  }
  .header {
  width: auto;
  }
  .header p {
  padding: 0px 15px;
  margin: 0px 10px;
  }
  .mobilehide {
  display:none;
  }
  .desktophide {
  display:block;
  }
  #menu ul {
  width: 300px;
  }
  #menu li {
  width: 100%;
  }
  .headermargin {
  margin: 0 10px 0 15px;
  }
  img {
width: 90%;
  }
  .featured img {
    width: 90%;
    float: left;
    margin: 10px 15px;
}
h1 {
	font-size: 30px;
}
h2 {
	font-size: 26px;
}
  }
  @media (min-width: 390px) and (max-width: 619px) {
  .container {
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  }
  .container300 {
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  }
  .col2 {
  float:left;
  width:auto;
  }
  .col3 {
  float:left;
  width:auto;
  }
  .numbers {
  color: red;
  font-size: 40px;
  font-weight: bold;
  margin: 5px 0px;
  }
  .header {
  width: auto;
  }
  .header p {
  padding: 0px 15px;
  margin: 0px 10px;
  }
  .mobilehide {
  display:none;
  }
  .desktophide {
  display:block;
  }
  #menu ul {
  width: 300px;
  }
  #menu li {
  width: 100%;
  }
  .headermargin {
  margin: 0 10px 0 15px;
  }
  img {
width: 90%;
  }
  .featured img {
    width: 90%;
    float: left;
    margin: 10px 15px;
}
h1 {
	font-size: 30px;
}
h2 {
	font-size: 26px;
}
  }
  @media (min-width: 620px) and (max-width: 719px) {
  .container {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  }
  .container300 {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  }
  .numbers {
  color: red;
  font-size: 40px;
  font-weight: bold;
  margin: 5px 0px;
  }
  .header {
  width: auto;
  }
  .header p {
  padding: 0px 15px;
  margin: 0px 10px;
  }
  .mobilehide {
  display:none;
  }
  .desktophide {
  display:block;
  }
  #menu ul {
  width: 300px;
  }
  #menu li {
  width: 100%;
  }
  .headermargin {
  margin: 0 10px 0 15px;
  }
  img {
width: 90%;
  }
  .featured img {
    width: 90%;
    float: left;
    margin: 10px 15px;
}
h1 {
	font-size: 30px;
}
h2 {
	font-size: 26px;
}
  }
  @media (min-width: 720px) and (max-width: 1119px) {
  .container {
  margin-left: auto;
  margin-right: auto;
  width: 85%;
  }
  .container300 {
  margin-left: auto;
  margin-right: auto;
  width: 40%;
  }
  .numbers {
  color: red;
  font-size: 45px;
  font-weight: bold;
  margin: 5px 0px;
  }
  .header {
  width: auto;
  }
  .header p {
  padding: 0px 15px;
  margin: 0px 10px;
  }
  .mobilehide {
  display:none;
  }
  .desktophide {
  display:block;
  }
  #menu ul {
  width: 300px;
  }
  #menu li {
  width: 100%;
  }
  .headermargin {
  margin: 0 10px 0 15px;
  }
  img {
width: 90%;
  }
  .featured img {
    width: 45%;
    float: left;
    margin: 10px 15px;
}
  }
  @media (min-width: 1120px) and (max-width: 1254px) {
  .container {
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  }
  .numbers {
  color: red;
  font-size: 45px;
  font-weight: bold;
  margin: 5px 0px;
  }
  .desktophide {
  display:none;
  }
  #menu ul {
  width: 98%;
  }
  img {
width: 70%;
  }
  }
  @media (min-width: 1255px) and (max-width: 1542px) {
  .container {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  }
  .numbers {
  color: red;
  font-size: 45px;
  font-weight: bold;
  margin: 5px 0px;
  }
  .desktophide {
  display:none;
  }
  #menu ul {
  width: 98%;
  }
  img {
width: 70%;
  }
  }
  @media (min-width: 1543px) and (max-width: 1818px) {
  .container {
  margin-left: auto;
  margin-right: auto;
  width: 65%;
  }
  .numbers {
  color: red;
  font-size: 45px;
  font-weight: bold;
  margin: 5px 0px;
  }
  .desktophide {
  display:none;
  }
  #menu ul {
  width: 98%;
  }
  img {
width: 70%;
  }
  }