body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    padding: 0;
    margin: 0;
    background-color: #b3ffff;
}

/*Global*/

.container{
    width: 80%;
    margin: auto;
    overflow: hidden;
}

.containermedia{
    width: 60%;
    margin: auto;
    overflow: hidden;
}

ul{
    margin: 0;
    padding: 0;
}

.button_1{
    height: 35px;
    background: #e8491d;
    border: none;
    padding-left: 20px;
    padding-right: 20px;
    color: #ffffff;
}

.dark{
  padding:15px;
  background:#35424a;
  color:#ffffff;
  margin-top:0px; /*incialmente meti 10, mas não vale a pena*/
  margin-bottom:20px;
}

.product{
  padding:15px;
  background:#e8491d;
  color:#ffffff;
  margin-top:0px; /*incialmente meti 10, mas não vale a pena*/
  margin-bottom:20px;
}

.social{
    float:right;
    margin: auto;
    overflow: hidden;
}

/*Header*/

header{
    background-color: #132639;
    color: #ffffff;
    padding-top: 30px;
    padding-bottom: 20px;
    min-height: 70px;
    border-bottom: #e8491d 3px solid;
}

header a{
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
}

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

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

header #logo{
    float: left;
}

header #logocenter{
    
    text-align: center;
}

header #logo h1{
    margin: 0;
}

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

header .highlight, header .current a{
    color: #e8491d;
    font-weight: bold;
}

header a:hover{
    color: #0055ff;
    font-weight: bold;
}

/*Showcase*/

#showcase{
    min-height:500px;
    background:url('../images/showcase.jpg') no-repeat 0px -100px;
    text-align: center;
    color: #ffffff;
}

#showcase h1{
  margin-top:160px; /*defini 100 inicialmente, mas assim vê-se melhor*/
  font-size:55px;
  margin-bottom:10px;
}

#showcase p{
  font-size:20px;
  color: #ffffff;
}

/* Newsletter */
#newsletter{
  padding:15px;
  color:#ffffff;
  background:#132639
}

#newsletter h1{
  float:left;
}

#newsletter form {
  float:right;
  margin-top:20px;
}

#newsletter input[type="email"]{
  padding:4px;
  height:25px;
  width:250px;
}

/* Services */
ul#services li{
  list-style: none;
  padding:20px;
  border: #cccccc solid 1px;
  margin-bottom:5px;
  background:#e6e6e6;
}

ul#services p{
  color: #132639;
}

/* Boxes */

#boxes{
    margin-top: 20px;
}

#boxes .box{
    float: left;
    width: 30%;
    padding: 10px;
    text-align: center;
}

#boxes .box img{
    width: 200px;
}

#boxes .boxmedia{
    list-style: none;
    padding:20px;
    border: #cccccc solid 1px;
    margin-bottom:15px;
    background:#f2f2f2;
    text-align: center;
    /*ccffff*/
}

/* Footer */

footer{
    padding:20px;
    margin-top:20px;
    color:#ffffff;
    background:#e8491d;
    text-align: center;
}

/* Sidebar */

aside#sidebar{
  float:right;
  width:30%;
  margin-top:75px;
}

aside#sidebar .quote input, aside#sidebar .quote textarea{
  width:90%;
  padding:5px;
}

/* Main-col */

article#main-col{
  float:left;
  width:65%;
}

#main-col h1{
    color: #00001a;
    margin-top:20px;
    font-size:30px;
    margin-bottom:10px;
}

#main-col h2{
    color: #ffffff;
    margin-top:0px;
    font-size:20px;
    margin-bottom:0px;
}

/* Media */

video {
    max-width: 100%;
    height: auto;
}
img {
  max-width: 100%;
  height: auto;
}
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Media Queries */
@media(max-width: 768px){
  header #branding,
  header nav,
  header nav li,
  #newsletter h1,
  #newsletter form,
  #boxes .box,
  .social,
  article#main-col,
  aside#sidebar{
    float:none;
    text-align:center;
    width:100%;
  }

  header{
    padding-bottom:20px;
  }

  #showcase h1{
    margin-top:40px;
  }

  #newsletter button, .quote button{
    display:block;
    width:100%;
  }

  #newsletter form input[type="email"], .quote input, .quote textarea{
    width:100%;
    margin-bottom:5px;
  }
  header li{
    float: none;
    display: block;
    padding: 0 20px 0 0px;
  }
  header #logo{
    float: none;
    text-align:center;
    width:100%;
  }
.containermedia{
    width: 95%;
    margin: auto;
    overflow: hidden;
}
}