html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  background:#fff;
  overflow-x:hidden;
  position: relative;
  padding-bottom: 6rem;
  min-height: 100%;

}

.main{
   position:fixed;
   width:100%;
   height:130px;
   top:0px;
   left:0px;
   background-color:transparent;
   z-index:999;
}

.tint{
   position:fixed;
   width:100%;
   height:130px;
   top:0px;
   left:0px;
   background:rgb(118,91,97);
   opacity:0.9;
   z-index:999;
}



.logo{
   position:absolute;
   top:10px;
   width:220px;
   height:80px;
   background-image:url("../_img/logo.png");
   background-size:cover;
}
.strip{
   position:fixed;
   left:0px;
   top:100px;
   width:100%;
   height:30px;
   background:rgb(213,200,204);
   z-index:999;

}

.header{
   position:relative;
   top:0px;
   left:0px;
   width:80%;
   height:130px;
   text-align:center;
}

.nav{
   position: relative;
   top:100px;
   left:0px;
   width:100%;
   height:30px;
   background:rgb(213,200,204);
}



.left{
   width:200px;
   height:100px;
   border:2px solid red;
   float:left;
}

/*Strip the ul of padding and list styling*/
.menu {
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;
}
/*Create a horizontal list with spacing*/
li {
    display:inline-block;
    float: left;
    margin-right: 0px;
}
/*Style for menu links*/
li a {
    display:block;
    min-width:70px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:12pt;
    color: rgb(118,91,97);
    background: rgb(213,200,204);
    text-decoration: none;
    padding-left:10px;
    padding-right:10px;
}
/*Hover state for top level links*/
li:hover a {
    background: rgb(118,91,97);
    color:rgb(255,255,255);
}
/*Style for dropdown links*/
li:hover ul a {
    background: rgb(118,91,97);
    color: rgb(213,200,204);
    height: 40px;
    line-height: 40px;
    text-align:left;
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
    color: rgb(255,255,255);
}
/*Hide dropdown links until they are needed*/
li .menu {
    display: none;
}
/*Make dropdown links vertical*/
li .menu li {
    display: block;
    float: none;
}
/*Prevent text wrapping*/
li .menu li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
    margin-bottom: -2px !important;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden,.hidden:hover {
    display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
    position:absolute;
    top:-170px;
    left:85vw;
    width:100px;
    height:100px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:40pt;
    text-decoration: none;
    color: rgb(118,91,97);
    background: url("../_img/menu-icon.png") no-repeat;
    background-size: contain;
    text-align: center;
    padding: 10px 0;
    display: none;
    /*height:20px;*/
    outline:1px solid rgb(118,91,97);
    z-index:200000;
}
/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}
input[type=checkbox]:checked ~ .show-menu{
    background-image: url("menu-icon-hl.png")
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}

.first{
   margin-left:15px;
}
.hidden .last{
      padding-bottom:10px;
}
/*Responsive Styles*/
@media screen and (max-width : 1000px){
    /*Make dropdown links appear inline*/
    .menu {
        position: static;
        display: none;
    }
    /*Create vertical spacing*/
    .menu li {
        margin-bottom: -2px !important;
    }
    .menu li a{

       height: 100px !important;
       line-height: 100px !important;
       font-size:40pt !important;
       margin-bottom: -2px !important;
       opacity:0.9;

    }
    /*Make all menu links full width*/
    .menu li, .menu li a {
        width: 100%;
        text-align:center !important;
        padding:-1px !important;
    }
    .main,.tint{
        height:240px;
    }
    .nav{
        top:240px;
        height:0px;
    }
    .header{
        width:100%;
    }
    .first{
      margin-left:0px;
    }
    .last{
      padding-bottom:25px !important;
    }

    /*Display 'show menu' link*/
    .show-menu {
        display:block;
    }
    .strip{
        display:none;
    }
    .logo{
        top:40px;
        left:70px;
        height:160px;
        width:440px;
    }
    .content{
      top:260px !important;
      font-size:3em !important;
      width:100vw !important;
    }
    .content-home{
      font-size:3em !important;
      width:100vw !important;
    }
    .footer{
      width:100vw !important;
    }
    .homecycle,.cycle-slideshow,.cycle-slideshow li{
       width:100vw !important;
       marin-left:20px;
    }

    .cycle-pager span {
       font-size: 120px !important;
       width: 40px !important;
       height: 40px !important;;
    }

    .newsfeed,.photos{
       display:block !important;
       margin-bottom:0px !important;
    }

    .nfic1{
       display:block !important;
    }

    .nfic2{
       display:block !important;
    }

    .nfic3{
       display:block !important;
    }

    .nfi1,.nfi2,.nfi3{
       float:none !important;
    }

    .newsfeeditemcontainer{
      width:84vw !important;
      height:50vw !important;
      margin-bottom:7vw !important;
    }

    .photocontainer{
      width:84vw !important;
      height:84vw !important;
      margin-bottom:7vw !important;;
    }

    .newsfeeditem,.photo{
      width:100% !important;
      height:100% !important;
      /*transform: scale(0.5,0.5);*/
    }


    .newsitemtextcontainer{
       padding:35px !important;
    }

    .newsfeedtext{
      font-size:0.75 !important;
    }

    .footercontainer{
      height:100px !important;
    }
    .copy{
      line-height:100px !important;
      font-size:20px !important;
    }
    .social img{
       width:60px !important;
       height:60px !important;
       margin-left:20px !important;
       margin-top:18px;
    }
    .image-left{
       height:auto !important;
       width:100% !important;
       margin-bottom:2em !important;
       padding-right:0 !important;
       max-height:none !important;
       max-width:none !important;
    }

    .contact-form{
       width:85vw !important;
       min-height: 50vw;
    }

    .contact-form form{
       width:100%;
    }

    .contact input,.contact textarea{
       font-size:1.2em !important;
    }

    .contact textarea{
       height:250px;
    }

    .captcha{
       font-size:1.2em !important;
    }

    .captcha input{
       font-size:1.2em;
       display:block;
       width:80px !important;
       height:80px !important;
       padding:15px;
    }

    .contact-buttons input{
      width:125px !important;
      font-size:1.2em;

    }

    .contact-buttons input:hover{
      color:rgb(255,255,255);
    }

}

.homecycle{
  width:100%;
  height:85vh;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  margin:0;
  padding:0;
}

/* pager */
.cycle-pager {
    text-align: center; width: 100%; z-index: 500; position: absolute; top: 10px; overflow: hidden;
}
.cycle-pager span {
    font-family: arial; font-size: 60px; width: 20px; height: 20px;
    display: inline-block; color: rgb(213,200,204); cursor: pointer;
}
.cycle-pager span.cycle-pager-active { color: rgb(118,91,97)}
.pager > * { cursor: pointer;}

.cycle-pager{
   position:absolute;
   top:85vh;
}

.content{
   position:absolute;
   top:10%;
   width:100vw;
   margin-top:8%;
   font-size:1.5em;
   min-height:79.5%;
}

.content-home{
   position:absolute;
   top:90vh;
   width:100vw;
   margin-top:3vh;
   font-size:1.5em;
   /*min-height:100%;*/
}

.description-home{
   width:80%;
   text-align:center;
   color: rgb(118,91,97);
   font-family:georgia, serif;
   font-weight:lighter;
   margin-bottom:4vh;
   border-bottom:1px solid rgb(118,91,97);
}

.description{
   width:80%;
   text-align:left;
   color: rgb(118,91,97);
   font-family:georgia, serif;
   font-weight:lighter;
   margin-bottom:4vh;
   /*border-bottom:1px solid rgb(118,91,97);*/
}

.headline{
   text-align:left;
   color: rgb(118,91,97);
   font-family:georgia, serif;
   font-weight:lighter;
   margin-bottom:4vh;
   font-size:1em;
   font-style:italic;
   /*border-bottom:1px solid rgb(118,91,97);*/
}

.news-image{
   width:100%;
   height:25vw;
   /*width:100%;
   height:auto;*/
   background-repeat:no-repeat;
   background-position:center left;
   background-size:contain;
   float:left;
}

.bodytext,.newsbody{
   font-family:arial,sans serif;
   font-weight:10;
   font-style:normal;
   font-size:0.6em;
   color:#444;
}

.newsfeedcontainer,.photoscontainer{
   width:80%;
   height:auto;

}

.latestnews{
   font-family:arial,sans serif;
   font-weight:10;
   font-size:0.5em;
   color:#444;
   text-align:left;
   margin-bottom:3vh;
}

.older{
   font-family:arial,sans serif;
   font-weight:10;
   font-size:0.5em;
   color:#444;
   text-align:right;
   margin-bottom:3vh;
}

.older a{
   text-decoration:none;
}

.newsfeed,.photos{
   width:100%;
   height:100%;
   display:table;
   margin-bottom:3vw;
}

.newsfeeditemcontainer,.photocontainer{
  width:24vw;
  height:24vw;
  display:table-cell;
  vertical-align:middle;
  text-decoration:none;

}

.newsfeeditem{
  width:24vw;
  height:24vw;
  border:1px solid rgb(118,91,97) !important;
  text-align:left;
}

.photo{
  width:24vw;
  height:24vw;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  outline:0;
}

.photo:hover{
  /*outline:1px solid rgb(118,91,97);*/
}

.newsfeeditem a{
  text-decoration:none;
}

.newsfeedimage{
  width:100%;
  height:45%;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;

}

.newsitemtextcontainer{
   padding:10px;

}

.newsitemtitle{
  color:rgb(118,91,97);
  font-weight:bold;
  text-align:left;
  font-size:1em;
  margin-bottom:5px;
}

.newsitemdate{
  font-size:0.75em;
  margin-bottom:15px;
}

.newsfeedtext{
  visibility:hidden;
  font-size:60%;

}

.newsfeedtext span:last-child{
  /*width:100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;*/
}


.nfi1{
  float:left;
}

.nfi2{
  clear:all;
  float:none;
  margin-left:auto;
  margin-right:auto;
}

.nfi3{
  float:right;
}


.footer{
   position:absolute;
   left:0px;
   bottom:-8vh;
   width:100%;
   height:auto;
   background:rgb(118,91,97);
   margin:0;
   padding:0;
   padding-right:15px;
}

.footercontainer{
   width:80%;
   height:60px;
}

.copy{
   font-family:arial,sans serif;
   font-weight:10;
   font-size:0.5em;
   line-height:60px;
   color:#fff;
   float:left;
}

.social{
   font-family:arial,sans serif;
   font-weight:10;
   font-size:0.5em;
   line-height:60px;
   color:#fff;
   float:right;
   /*margin-top:10px;
   margin-bottom:10px;*/
}

.social img{
   width:30px;
   height:30px;
   vertical-align:middle;
   margin-left:15px;
}

.image-left{
   float:left;
   padding-right:1em;
   margin-bottom:0.75em;
   height:auto;
   width:auto;
   max-height:60vh;
   max-width:50%;
}

.ellip {
  display: block;
  height: 100%;
}

.ellip-line {
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  max-width: 100%;
}

.ellip,
.ellip-line {
  position: relative;
  overflow: hidden;
}

.film{
   float:left;
   padding-bottom:2em;
}

.contact-form{
   width:80%;
   padding:20px;
   border-radius:5px;
   background:rgba(213,200,204,0.7) !important;
}

.contact-form form{
   width:100%;
}

.contact input,.contact textarea{
   margin:10px;
   font-size:1em;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
   background:rgba(255,255,255,1) !important;
   color:rgb(118,91,97) !important ;
   width:95% !important;
   border:0 !important;
   resize:none;
}

.captcha{
   color:rgb(118,91,97);
   width:90%;
   min-height:40px !important;
   margin:10px;
}

.captcha input{
   font-size:1em;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
   color:rgb(118,91,97) !important ;
   margin-top:5px;
   height:30px;
   width:40px;
   background:#fff;
   border:0;
}

.contact-buttons input{
  background:rgb(118,91,97);
  border:1px solid rgb(118,91,97);
  color:rgb(213,200,204);
  width:75px;
  padding:5px;
  font-size:1em;
  border-radius:2px;

}

.contact-buttons input:hover{
  color:rgb(255,255,255);
}