@charset "utf-8";

/*----------------------------fonts----------------------------*/
#title {font-family: "Nerko One", cursive; font-size:60px; float: rightleft;}

p {font-family: "Cabin", sans-serif;}
h2 {font-family: "Cabin", sans-serif;}
h3 {font-family: "Cabin", sans-serif;}

/* ----------------------home page---------------------------- */

/*wild card element that allows boxes on webpage to sit flush with each other even with borders*/
*{box-sizing: border-box;}
img {max-width: 100%;}

.title-content {background-color: rgb(140, 198, 118); border: solid 10px rgba(0, 100, 0, 0.64);}
button {min-width: 80px; border: none; padding: 10px; border-radius: 50px; background-color: #263406;}
button a {color: #fff;}
/* ----------------------layout--------------------- -----------*/

body {width: 100%; background-color:  #d9d5d5;}
#sitelogo {height: 200px; width: 200px;}
.socialicon {height: 50px; width: 50px;float: left; padding-top: 40px;}
/*creates an organised layout for the webpage in boxes*/

.full-width-col {float: left; width: 98%; margin: 1%; padding: 2%; background-color: #f1f0f0;}
.half-width-col {float: left; width: 48%; margin: 1%; padding: 2%; background-color: #f1f0f0;}
.third-width-col {float: left; width: 31.33%; margin: 1%; padding: 2%; background-color: #f1f0f0;}
.quart-width-col {float: left; width: 23%; margin: 1%; padding: 2%; background-color: #f1f0f0;}

.half-width-col2 {float: left; width: 48%; margin: 1%; padding: 2%; background-color: #d9d5d5;}
.quart-width-col2 {float: left; width: 23%; margin: 1%; padding: 2%; background-color: #d9d5d5;}
section {float: left; width: 100%;}

/*-----------------------Navigation-------- --------------------*/

nav ul {
    list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333; font-family: "Cabin", sans-serif;}
  
    nav li {float: left;}
  
    nav li a {display: block;color: white;text-align: center;padding: 20px 25px;text-decoration:none;}
  
    nav li a:hover:not(.active) {background-color: #111;}
  
  .active {background-color: #139e51;}

/*-----------------------BREAKPOINTS----------------------------*/
/*responsive css for different size screens*/
@media only screen and (max-width: 1200px) {

}

@media only screen and (max-width: 1080px) {
    .quart-width-col {width: 48%;}
    .responsive {width: 49.99999%;margin: 6px 0;}
}

@media only screen and (max-width: 576px) {
    .half-width-col  {width: 98%;}
    .third-width-col {width: 98%;}
    .quart-width-col {width: 98%;}
    .responsive {width: 100%;}
}
/*------------------IMAGE GALLERY--------------------------*/
div.gallery {border: 1px solid #ccc;}
  div.gallery:hover {border: 1px solid #777;} 
  div.gallery img {width: 100%;height: auto;}
  div.desc {padding: 15px;text-align: center;}
  .responsive {padding: 0 6px;float: left;width: 24.99999%;}
  .clearfix:after {content: "";display: table;clear: both;}

  #menu {width: 50%; margin-left:390px;}

/*-----------------------TEST-----------------------------------*/

.centered {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: #000000; background-color:rgba(203, 199, 199, 0.5);}
.container {position: relative;text-align: center;}