@charset "utf-8";
/* CSS Document */

/*
 * Keep my container the same size when I add a border or padding.
 * Push my content inwards, as opposed to expanding my container outwards.
 */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/*
*---------------
*FONTS
*---------------
*/

logo {
	color: #ffffff;
	font-family: 'Philosopher', sans-serif;
	font-size: 4.5vh;
	text-align: left;
	margin: 0;
	padding-bottom: 0;
}

.container.fluid p {
	color: #ffffff;
	font-family: 'Muli', sans-serif;
	font-size: 2vh;
	text-align: left;
	margin-top: 0;
	margin-bottom: 0;
}

.container h1 {
	color: #36454f;
	font-family: 'Philosopher', sans-serif;
	font-size: 3.5vh;
	text-align: left;
}

.container h2 {
	color: #36454f;
	font-family: 'Philosopher', sans-serif;
	font-size: 2vh;
	text-align: left;
}

.container h3 {
	color: #ffffff;
	font-family: 'Philosopher', sans-serif;
	font-size: 14px;
	text-align: left;
}

.container p {
	color: #36454f;
	font-family: 'Muli', sans-serif;
	font-size: 2vh;
	text-align: left;
}

.container ul {
	color: #36454f;
	font-family: 'Muli', sans-serif;
	font-size: 2vh;
	text-align: left;
}

/*
*__________________________
*****READ MORE LINKS******
*_________________________
*/


article {
	text-align: center;
	border: 1px solid #ddd;
  	border-radius: .25em;
	padding: 1em;
	margin: 0;

}


.fulltext p,
.less {
	display: none;

}

/*.fulltext ul,
.less {
	display: none;

}*/

.fulltext:target p,
.fulltext:target .less {
	display: block;

}

/*.fulltext:target ul,
.fulltext:target .less  {
display: block;
padding-left: 0;
font-size-adjust: 1vh;

}*/



.fulltext:target .more {
	display: none;

}

.visually-hidden {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

a.more {
	color: #36454f;
	font-family: 'Philosopher', sans-serif;
	font-size: 2vh;
	font-weight: bold;
	text-decoration: none;

}

a.less {
	color: #36454f;
	font-family: 'Philosopher', sans-serif;
	font-size: 2vh;
	font-weight: bold;
	text-decoration: none;
}

a:hover .visually-hidden,
a:focus .visually-hidden,
button:hover .visually-hidden,
button:focus .visually-hidden {
	position: relative;
	margin: 0;
	font-size: 12px;
}

img {
    width: 100%;
    height: auto;
}

/*
 * ----------------------
 * CONTAINER
 * ----------------------
 */

/*
 * A container holds all elements and controls the page’s maximum width.
 * Using a container will make designing for responsive easier!
 */
.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1140px;
  overflow: auto;
  padding: 1em 2em;
}

/* ...or use the .container-fluid class instead, to make the content always stretch to be full-width. */
.container.fluid {
  max-width: none;
  background-color: #288dda;
}

.container.fluid.header {
  max-width: none;
  background-color: #3c4f76;
  padding: 0;
}

.container.fluid.footer {
  max-width: none;
  background-color: #288dda;
  padding: 0;
}

/*
 * ----------------------
 * GRID - Visual Helper Styles
 * ----------------------
 */

/*.column,
.container,
.row {
  background-color: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.15);
  text-align: center;
}
*/

/*
 * ----------------------
 * COLUMN
 * ----------------------
 */

/*
 * Use float to line up our grid elements next to each other.
 * By default (i.e. mobile devices), make all columns 100% wide with some padding.
 */
.column {
  float: left;
  padding: 1em;
  width: 100%;
}

/* Add some vertical rhythm (space between each column) by default, only on mobile. */
.column + .column {
  margin-top: 1em;
}
@media (min-width: 769px) {
  .column + .column {
    margin-top: 0;
  }
}


/*
 * ----------------------
 * COLUMN LAYOUT
 * ----------------------
 */

/*
 * On all screens 769px and larger (landscape tablets + desktops), enable a grid layout with different width columns.
 */

 [class*="column."] {
    width: 100%;
}


@media (min-width: 769px) {

  .column.three-fourths { width: 75%; }
  .column.two-thirds    { width: 66.666%; }
  .column.one-half      { width: 50%; }
  .column.one-third     { width: 33.333%; }
  .column.one-fourth    { width: 25%; }
  .column.one-sixth     { width: 16.666%; }

}

.footer {
  float: left;
  padding: 1em;
  width: 100%;
}

/* Add some vertical rhythm (space between each column) by default, only on mobile. */

@media (max-width: 769px) {
  .footer + .footer {
    margin-top: 0;
  }
}


[class*="footer."] {
   width: 100%;
}


@media (max-width: 769px) {

 .footer.three-fourths { width: 75%; }
 .footer.two-thirds    { width: 66.666%; }
 .footer.one-half      { width: 50%; }
 .footer.one-third     { width: 33.333%; }
 .footer.one-fourth    { width: 50%; }
 .footer.one-sixth     { width: 16.666%; }

}

@media (min-width: 769px) {

 .footer.three-fourths { width: 75%; }
 .footer.two-thirds    { width: 66.666%; }
 .footer.one-half      { width: 50%; }
 .footer.one-third     { width: 33.333%; }
 .footer.one-fourth    { width: 25%; }
 .footer.one-sixth     { width: 16.666%; }

}


/*.topnav {
  float: left;
  padding: 1em;
  width: 100%;
}*/

/* Add some vertical rhythm (space between each column) by default, only on mobile. */





/*
 * ----------------------
 * ROW
 * ----------------------
 */

/*
 * We wrap our columns inside rows to prevent other elements from stacking next to them, i.e. clearing issues.
 * We fix these by applying a version of the popular "clearfix" (http://cssmojo.com/the-very-latest-clearfix-reloaded/)
 * to our row class, which will contain floated column elements.
 * We also use negative margins to make sure nested rows take up the full-width of their containers.
 */
.row {
  margin-left: -1em;
  margin-right: -1em;
}
.row:after {
  clear: both;
  content: " ";
  display: block;
}

/* Add some vertical rhythm (space between each row) by default */
.row + .row {
  margin-top: 1em;
}

/*
 * ----------------------
 * COLUMN OFFSET
 * ----------------------
 */

/*
 * Offset a grid element, by (virutally) creating an empty one.
 */
 @media (min-width: 769px) {

  .column.offset-three-fourths  { margin-left: 75%; }
  .column.offset-two-thirds     { margin-left: 66.666%; }
  .column.offset-one-half       { margin-left: 50%; }
  .column.offset-one-third      { margin-left: 33.333%; }
  .column.offset-one-fourth     { margin-left: 25%; }
  .column.offset-one-sixth      { margin-left: 16.666%; }

}

[class*="col-"] {
    width: 100%;
}




/*___________________
*Navigation
*____________________
*/




.topnavcolumn {
  float: left;
  padding: 1em;
  width: 100%;
}


@media (max-width: 769px) {
  .topnavcolumn + .topnavcolumn {
    margin-top: 0;
  }
}


[class*="topnavcolumn."] {
   width: 100%;
}


@media (max-width: 769px) {

 .topnavcolumn.one-fourth    { width: 25%; }


}

@media (min-width: 769px) {

 .topnavcolumn.one-fourth    { width: 25%; }


}
}

.topnav {
  overflow: hidden;
  background-color: #3c4f76;

}

.topnav a {
  float: left;
  display: inline-block;
  color: #fcfcfc;
  font-family: 'Philosopher', sans-serif;
  font-size: 2vh;
  text-align: center;
  text-decoration: none;
}

.topnav a:hover {
  background-color: #dddbf1;
  color: #3c4f76;
}

.topnav a.active {
    background-color: #dddbf1;
    color: #3c4f76;
}




/*
    .topnav2 {
      overflow: hidden;
      background-color: #3c4f76;
    }

    .topnav2 a {
      float: left;
      display: inline-block;
      color: #fcfcfc;
      font-family: 'Philosopher', sans-serif;
      font-size: 3vh;
      text-align: center;
      text-decoration: none;
      Padding: 10px;

    }

    .topnav2 a:hover {
      background-color: #dddbf1;
      color: #3c4f76;
    }

    .topnav2 a.active {
        background-color: #dddbf1;
        color: #3c4f76;
    }*/

/*___________________
Media queries navigation
____________________
*/

/*@media only screen and (min-width: 480px) {

.topnav2 a  {
        display: none;
    }

  }

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

      .topnav a  {
          display: none;
      }*/

    /*}*/




/*_______________
* Footer
*________________
*/

#footerimage {
height: 75px;
width: 100%;
background: url(../images/footer_border.jpg) repeat-x;
padding: 0;
}

.google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        max-height: 200px;
    }

.container.fluid.footer h1 {
	color: #ffffff;
	font-family: 'Philosopher', sans-serif;
	font-size: 3.5vh;
	text-align: left;
}

.container.fluid.footer h2 {
	color: #ffffff;
	font-family: 'Philosopher', sans-serif;
	font-size: 3.0vh;
	text-align: left;
}

.container.fluid.footer p {
	color: #ffffff;
	font-family: 'Muli', sans-serif;
	font-size: 2vh;
	text-align: left;
	line-height: 1.5em;
}
.container.fluid.footer a {
	color: #ffffff;
	font-family: 'Muli', sans-serif;
	font-size: 2vh;
	text-align: left;
	line-height: 1.5em;
  text-decoration: none;
}


/*
*__________________________
*****CONTACT FORM******
*_________________________
*/
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
    background-color: #3c4f76;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
    background-color: #45a049;
}