/*	mobile first grid
_______________________________________________________*/

/*  reset all margins etc.
_______________________________________________________*/

head, body, div, span, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, button, textarea, p, th, td, a
{
  margin: 0px;
  padding: 0px;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
}



/*	reset border box
_______________________________________________________*/

html {
  box-sizing: border-box;
  position: relative;
  min-height: 100%;
}
*, *:before, *:after {
  box-sizing: inherit;
}



/*	breakpoints
_______________________________________________________*/

/* Mobile first styles go here */

@media screen and (min-width: 800px) {
  /* Desktop styles go here */
}



/*	grid system
_______________________________________________________*/

.container {
  margin: 0 auto;
  padding: 0;
  max-width: 1000px;
}

.row::after {
  display: table;
  content: " ";
  clear: both;
}

.one,
.half,
.one-third,
.two-thirds,
.one-fourth{
  width: 100%;
}

.one-tenth {
  width: calc(100% /10 * 1);
}

.two-tenths {
  width: calc(100% /10 * 2);
}

.nine-tenths {
  width: calc(100% / 10 * 9);
}

.column {
    float: left;
  }

@media only screen and (min-width: 800px) {
  .one {
    width: 100%;
  }
  .half {
    width: calc(100% / 2);
  }
  .one-third {
    width: calc(100% / 3);
  }
  .one-fourth {
    width: calc(100% / 4);
  }
  .two-thirds {
    width: calc(100% / 3 * 2);
  }
}



/*  body
_______________________________________________________*/

body{
  color:#363636;
  font-family: 'Orkney',Arial,Helvetica,Verdana;
  letter-spacing: 2px;
  margin:0 0 80px 0;
}



/*  navbar
_______________________________________________________*/

.navbar{
  max-width: 100%;
}

@media screen and (min-width: 800px) {
  .container.navbar{

  }
}


.navbar{
  background-color:#e36222; 
}

@media screen and (min-width: 800px) {
  .navbar{
  }
}


.banner{
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:25px 0;
  text-align:center;
}

@media screen and (min-width: 800px) {
  .banner{

  }
}

.logo{
  display:inline-block;
  padding:0 15px;
  float:left;
}

@media screen and (min-width: 800px) {
  .logo{

  }
}

.menu{
  background-color:#363636;
  color:white;
}

@media screen and (min-width: 800px) {
  .menu{
    background-color: transparent;
    display:table;
    list-style:none;
    text-align:initial;
    position:relative;
    left: 10%;
    padding:0;
    font-size: 0.9rem;
  }
}



.menuitem{
  padding:35px 0 15px 0;
  display: inline-block;
  width:33.333%;
  float:left;
  text-align:center;
}

@media screen and (min-width: 800px) {
  .menuitem{
    border-radius: 10px 10px 0 0;
    background-color: #363636;
    padding:12px 30px 0 30px;
    display: table-cell;
    text-align: center;
    display:inline-block;
  }
}

a {
  color:inherit;
  text-decoration: none;
}

/*  spacer
_______________________________________________________*/

.spacer:before {
    content: "\200D";
    display:inline;
 }  

.spacer{
  background-color: white;
  height:80px;
}

@media screen and (min-width: 800px) {
  .spacer{
    height:100px;
  }
}



/*  infobox
_______________________________________________________*/

.infobox{
  width:80%;
  background-color:#e36222;

}

@media screen and (min-width: 800px) {
  .infobox.two-thirds{
    width: calc(100% / 3 * 2);
  }
}

#infologo{
  margin:12px;
  font-size: 2rem;
}

@media screen and (min-width: 800px) {
  #infologo{

  }
}

.line:before {
    content: "\200D";
    display:inline;
 }  

.line{
  margin:0 5%;
  border-width: 1px;
  border-color:#363636;
  border-style: solid none none none;
}

@media screen and (min-width: 800px) {
  .line{

  }
}

.content{
  margin:15px 5%;
  padding:10px;
  background:white;
}

@media screen and (min-width: 800px) {
  .content{

  }
}



/*  footer
_______________________________________________________*/

footer{
width:100%;
background-color: #363636;
position: fixed; 
bottom: 0;
display: -webkit-flex;
display: flex;
align-items: center;
text-align: center;
height:80px;
}

/*footer{
    background-color: #363636;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    overflow: hidden;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}
*/
@media screen and (min-width: 800px) {
  footer{
    background-color: #363636;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    overflow: hidden;
    display: -webkit-flex;
    display: flex;
    align-items: center;
  }
}
/*
@media screen and (min-height: .navbar.height) {
  .content{

  }
}*/

footer .container{
  text-align: center;
  font-size:4rem;
}

.footerlogo{
  color:white;
}

.footerlogo:hover{
  color:#e36222;
}



/*  transformations
_______________________________________________________*/

.initial{
  text-align:initial;
}

.home{
  color:black;
  background-color: white;
}

/*  background change white
_______________________________________________________*/

.logo:hover{
  color:white;
}

@media screen and (min-width: 800px) {
  .logo:hover{

  }
}

/*.menuitem:hover{
  color:#363636;
  background-color: white;
}*/

@media screen and (min-width: 800px) {
  .menuitem:hover{

  }
}




/*  properties
_______________________________________________________*/

.center {
  display:flex;
  justify-content: center;
}

.limitedcenter{
  max-width: 1000px;
  margin: 0 auto;
}