body{
  font: 15px/1.5 Arial, Helvetica, Sans-serif;
  background-color:#C0CBBB;
}

/*Global*/
.container{
  width:80%;
  max-width:1000px;
  margin:auto;
  overflow:hidden;
}

.rounded-corners{
  border-radius: 5px;
  background:#ED4545;
  margin:5px
}





/*header**/
header{
  background:url('../img/headbg.jpg') no-repeat 0 -100px;
  background-size: 1400px;
  margin: auto;
  padding-top:15px;
  min-height: 90px;
  border-radius: 15px;
}


header a{
  color: #ffffff;
  text-decoration:none;
  text-transform: uppercase;
  font-weight: bold;
}

header a:hover{
  color:#D3DC1B;
}

header ul{
  margin:0;
  padding:0;
}

header li{
  float:left;
  display:inline;
  padding: 0 20px 0 20px;
}

header nav{
  float:right;
  margin-top: 55px;
}

header #branding{
  float:left;
}



.logo {
  margin-left:35px;
  height:75px;
}


/*section*/
.landing{
  border-radius: 20px;
  width:400px;
}

.showcase {
    margin: auto;
    margin-top: 20px;
    text-align: center;
}

.box1 {
  margin: auto;
  padding: 10px;
  width:400px;
  background:#1A2119;
  color:#ffffff;
  border-radius: 10px;
}

.box2 {
  margin: auto;
  margin-top:0;
  padding: 0px;
  width:400px;
  text-align:right;
}

.box3 {
  margin: auto;
  margin-top:10px;
  padding: 10px;
  width:550px;
  background:#1A2119;
  color:#ffffff;
  border-radius: 10px;
}


.box4 {
  margin: auto;
  margin-top:0;
  padding: 0px;
  width:550px;
  text-align:right;
}

.box5 {
  margin: auto;
  margin-top:10px;
  padding: 10px;
  width:400px;
  background:#1A2119;
  color:#ffffff;
  border-radius: 10px;
}

.thumbs {
  list-style-type: none;
  margin:auto;
  text-align: left;
}

.thumbs li{
  display:inline;
}

.thumbpic {
  width:90px;
}

.thumbpic:hover {
  box-shadow: 0px 0px 7px #BDFBF2;
}



/*Gallery Main*/
.gallery {
  position: relative;
}

.gallery a{
  color: #cccccc;
  text-decoration:none;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 50px
}

.gallery a:hover{
  color:#ffffff;
}

.image1 {
  position: relative;
  top: 0;
  left: 0;
  width:100%
}
.leftarrow {
  position: absolute;
  top: 40%;
  left: 5px;
}

.rightarrow {
  position: absolute;
  top: 40%;
  right: 5px;
}

.landscape{
  width:80%;
  margin:auto;
  margin-top: 10px;
  overflow:hidden;
}

.portrait{
  width:40%;
  margin:auto;
  margin-top: 10px;
  overflow:hidden;
}

.square{
  width:60%;
  margin:auto;
  margin-top: 10px;
  overflow:hidden;
}

.thumbpic {
  width:90px;
}



/*footer*/
footer {
  color:#A76A15;
  font-weight: bold;
}



/*Media Queries*/
@media(max-width: 768px){
    .container
    {
      width:100%;
      min-width: 345px;
    }

    .box1, .box2, .box5
    {
      width:90%;
    }

    .box3, .box4{
      width:320px;
    }

    .thumbpic {
      width:74px;
    }

    .landing{
      width:60%;
    }

    .logo {
      margin-left:0px;
    }

    .landscape {
      width:100%;
      max-width:500px;
    }

    .square
    {
      width:100%;
      max-width:360px;
    }

    .portrait
    {
      width:100%;
      max-width:300px;
    }

    .gallery a{
      font-size: 35px;
    }



    header #branding
    {
    float: none;
    display:block;
    text-align:center;
    margin-bottom:5px;
    }

    header nav, header ul, header li
    {
      float: none;
      margin-top:10px;
      margin-bottom: 5px;
      text-align:center;
    }

    header
    {
      background:url('../img/headbg.jpg') no-repeat -120px -15px;
      background-size: 150%;
    }


}