/* colors for meemu site
purple: 554482
blue: 09caf3

*/

/*Stylesheet by Charlotte Ansell*/

/*Main Block Layouts*/



body, html {
    height: auto;
    font-family:'BioRhyme';
    font-weight: 300;
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: 1px;
    color:#474849;
    margin:0;
}

h1{
    font-size: 26px;
    padding: 20px;
    padding-bottom: 0;
    font-weight: 300;
    color: #554482;

}

h1.special_header {font-size: 46px;
font-weight: bold;color: #f3d209;}

h2{ font-size: 22px;
  padding: 20px;
  padding-bottom:0;
  padding-top:0;
  font-family:;
  font-weight: bold;
  color: #90301b;}

h3 {
  font-size: 18px;
  padding: 20px;
  padding-bottom:0;
  padding-top:0;
  font-family:;
  font-weight: bold;
  color: #90301b;
}

h4, h5{
  font-size: 20px;
  padding: 10px;
  padding-bottom:0;
  font-weight: 300;
  color: #554482;
}


h2.head_divider{
  border-bottom: 1px solid gray;
  padding-bottom:10px;
}

/*footer*/

.footer {
  padding:10px;

}

/*Centering and Floating*/

.centered_content {
  max-width: 1200px;
    margin:0  auto;
    height: 100%;
	}

  .inner_centred_content {
    max-width: 950px;
      margin:0  auto;
      height: 100%;

  	}


/*Paragraphs and Lists*/

  p {
    font-size:16px;
    line-height: 20px;
    padding:0 20px;
  }
  p.highlight{
    font-size:22px;
    padding:0;
    text-align:center;

  }


  p.intro {
    padding-top:0;
    color:#554482;
          }
  p.tiny_text{font-size: 11px;
    text-align:center;
  color:#000000;}

  p.address a:link {color:white;}

  p.floatright{
    color:#000000;
    font-size: 15px;
    float:right;
  }

  p.footer_box{
    text-align:center;
    margin:0 auto;
  }


/*Extending Div Stuff*/

  #hiding_info {

    color:inherit;
     float: left;
     height: auto;
     display: block;

  }

  .extend_button {
    text-align:center;
    color:#6b87bd;
    padding:5px 7px;
    background-color: #fcfcec;
    border:1px solid #6b87bd;
    border-radius: 5px;
    margin:0 auto;
    display:none;
  }


/* all link stuff*/

a:link {
    text-decoration: none;
    color:#27c0c8;
}

a.port_head {
  font-size: 18px;
  padding: 20px;
  padding-bottom:0;
  padding-top:0;
  font-weight: bold;
  color: #90301b;
}


a:hover {color:#02bcd3;
}

a:visited {
    color: #02bcd3;
}

topnav a.active { color:#27c0c8;}

a.top_screen {color:black; float:right;}





/* all image styling */

img.port_main {
  max-width: 100%;
  display:block;
  padding:10px 0;
  }
img.socials {padding:5px;}

img.logo{
  max-width:100%;
  display:block;
  padding:10px;
}
img.head_divider{
  max-width:100%;
  display:block;
  padding:10px;
}

img.img_float{
  width: 250px;
  float: left;
  shape-outside: circle(50%);
}

/*TOP NAVIGATION*/

/* Add a black background color to the top navigation */
.topnav {
    background-color: none;
    overflow: hidden;
    float:right;
    font-family:'times new roman';

}

/* Styles the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #000000;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }

.topnav a.active {
    color: #27c0c8;
    }

/* Changes the color of links on hover */
.topnav a:hover {
    color: #4b4b4b;

}


/* Hide the link that should open and close the topnav on small screens */
.topnav a.icon {
    display: none;
}

.topnav.responsive a {
  float: none;
  display: block;
  text-align: left;
  padding-bottom: 5px;
}

/* MEDIA QUERIES FOR RESPONSIVE SCREENS*/


/* When the screen is less than 600 pixels wide, hides all links, except for the first one ("Home").
Shows the burger icon (.icon) */

@media screen and (max-width: 600px) {
.topnav a {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
    background-color: #fffffff;
  }

}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon.*/

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
    margin-right:0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    margin-right:20px;
  }

}

@media screen and (max-width: 800px) {

    p.address{
      font-size: 12px;
    }
    p { font-size: 16px;
    line-height: 20px;
    padding:0 20px;}

    h2 {font-size: 20px;
      padding:10px;
      padding-bottom:0;
    }

    h1.tidy_header {color:inherit; font-size: 18px;}
    h1.special_header {font-size: 32px;}

    .extend_button {display:block;}
    .hiding_info {display:none;}
    img.logo {}
    img.port_main {margin:0 auto; display:block;}
    img.img_float{
      width: 175px;}

  }

  * {
    box-sizing: border-box;
  }



  .row {
    margin: 8px -16px;
    background-image: url("crop_back.png");
  }

  /* Add padding BETWEEN each column */
  .row,
  .row > .column {
    padding: 8px;
  }

  /* Create four equal columns that floats next to each other */
  .column {
    float: left;
    width: 25%;
  }

  /* Clear floats after rows */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }

  /* Content */
  .content {
    background-color: #f7f8f9;
    padding: 10px;
  }

  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 900px) {
    .column {
      width: 50%;
    }
  }

  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .column {
      width: 100%;
    }
  }