* {
  margin:0px;
  padding:0px;
}

body {
  font-family: 'Lato', sans-serif;  
  color: black;
}

.show-menu {
	text-decoration: none;
	color: #fff;
	background: #58585a;
	text-align: center;
	padding: 10px 0;
	display: none;
	width:100%;
	margin-bottom:1px;
}

input[type=checkbox]{
  display: none;
  -webkit-appearance: none;
}

p, h1, h2, h3 {
  margin-bottom: 20px;
}

h1 {
  font-size:18pt;
}


@media (min-width: 1100px) {

  .container {
    width: 1100px;
    margin:0 auto;
    position: relative;
    z-index: 1;
  }

  #header {
    background: #2a7082;
    color: white;
    height: 50px;
    padding:20px 0px;
  }

  #nav {
    float: right;
    width:500px;
    padding-top: 10px;
    margin-top:10px;
    padding-bottom:10px;
    padding-right: 10px;
    text-align: right;
    border-right: solid 1px #cdcdcd;
  }

  #nav a {
    color: white;
    text-decoration: none;
    padding:0px 20px;
  }

  #nav a:hover {
    color: #cdcdcd;
  }

  #header-right {
    float: right;
    width:230px;
    text-align: right;
    padding-top: 10px;
  }

  #header-right a {
    color: white;
    text-decoration: none;
  }

  #header-right a:hover {
    color: #cdcdcd;
  }

  #slide {
    background-image: url('../images/slide-bg.jpg');
    background-position: top center;
    background-size: cover;
    height: 485px;
    position: relative;
  }

  #slide-text {
    padding-top:140px;
    color: white;
    float: left;
    width:500px;
    font-size: 14pt;
  }

  #slide-text h1 {
    font-size: 22pt;
    font-weight: 700;
    margin-bottom: 20px;
  }

  #slide-text p  {
    margin-bottom: 40px;
    width:300px;
  }

  #slide-text img {
    margin-right: 20px;
  }

  #screenshots {
    float: right;
    margin-top: 241px;
  }

  #callout {
    text-align: right;
    background: #9f9f9f;
    padding:20px 0px;
    color: black;
    height: 30px;
  }

  #callout h2 {
    font-size: 14pt;
  }

  #content {
    padding:60px 0px;
    color: black;
    background: white;
  }

  #footer {
    background: #2a7082;
    padding:20px 0px;
    text-align: center;
    color: #e4e4e4;
    font-size: 10pt;
    /*font-weight: 100;*/
  }

  #footer a {
    color: white;
  }

  #footer a:hover {
    color: #cdcdcd;
    text-decoration: none;
  }

  .client {
    width:200px;
    height: 200px;
    float: left;
    margin:0px 20px 20px;
  }

}



@media screen and (max-width : 1099px){
  
  .container {
    width:100%;
  }

  .container img {
    max-width: 90%;
    height: auto;
    margin:0 auto;
    display: block;
  }

  #header {
    background: #2a7082;
    color: white;
    padding:20px 0px;
  }

  #header img {
    display: block;
    width:38px;
    height: 50px;
    margin:10px auto;
  }

  #header-right {
    text-align: center;
    padding-top: 20px;
  }

  #header-right a {
    color: white;
    text-decoration: none;
  }

  #header-right a:hover {
    color: #cdcdcd;
  }

  #nav {
    padding-top: 20px;
    text-align: center;
  }

  #nav a {
    color: white;
    text-decoration: none;
    padding:0px 20px;
  }

  #nav a:hover {
    color: #cdcdcd;
  }

  #slide {
    background-image: url('../images/slide-bg.jpg');
    background-position: top center;
    background-size: cover;
    position: relative;
    padding-bottom: 30px;
  }

  #slide-text {
    padding-top:60px;
    font-size: 14pt;
    text-align: center;
    color: white;
  }

  #slide-text h1 {
    font-size: 22pt;
    font-weight: 700;
    margin-bottom: 20px;
  }

  #slide-text p  {
    margin-bottom: 40px;
    width:90%;
    margin-left: 5%;
  }

  #slide-text img {
    display: block;
    margin:0px auto 10px;
  }

  #screenshots {
    display: none;
  }

  #callout {
    text-align: center;
    background: #9f9f9f;
    padding:20px 5%;
    color: black;
    width:90%;
  }

  #callout h2 {
    font-size: 15pt;
  }

  #content {
    width:90%;
    padding:60px 5%;
    color: black;
    background: white;
  }

  #footer {
    background: #2a7082;
    padding:20px 0px;
    text-align: center;
    color: #e4e4e4;
    font-size: 10pt;
    /*font-weight: 100;*/
  }

  #footer a {
    color: white;
  }

  #footer a:hover {
    color: #cdcdcd;
    text-decoration: none;
  }

  .client {
    max-width:200px !important;
    height: 200px !important;
    display: block !important;
    margin:10px auto !important;
  }
}