body{

  font: 15px/1.5 Arial, Helvetica,sans-serif;

  padding:0;

  margin:0;

  background-color:#f4f4f4;

}

/*global*/

.container{

  width: 80%;

  margin: auto;

  overflow:hidden;

  }
  .container2{

    width: 100%;

    margin: auto;

    overflow:hidden;

    }

/*header*/

header{

  background:#35424a;

  color:#ffffff;

  padding-top:50px;

  min-height:70px;

  border-bottom:#e8491d 3px solid;

  position:fixed ;

  width: 100%;

  top: 0;

  padding-bottom: 35px;

}

header a{

  color:#ffffff;

  text-decoration:none;

  text-transform: uppercase;

  font-size:17px;

}

header button{

  color:#ffffff;

  text-decoration:none;

  text-transform: uppercase;

  font-size:17px;

}

.spacer{

  height: 148px;

  background-color: :#ffffff;

}

header #marca{

  float:left;

}

header #marca h2{

  margin:0;

  padding: 0px;

  line-height: 45px;

  font-size: 40px;

  }

header #marca h3{

  margin:0;

  padding: 0px;

  line-height: 25px;

  margin-left: 163px;

  font-size: 22px;

}

header .highlight {

  color: #e8491d;

  font-weight: bold;

}

header  .current {

  font-weight: bold;

}

/*menu*/

.topnav {

  overflow: hidden;

  background-color: #35424a;

  width: auto;

  float: right;

}

.topnav a {

  float: left;

  display: block;

  color: #f2f2f2;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

}

.topnav .icon {

  display: none;

}

.dropdown {

  float: left;

  overflow: hidden;

}

.dropdown .dropbtn {

  border: none;

  outline: none;

  color: white;

  padding: 17px 16px;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

}

.dropdown-content {

  display: none;

  position: absolute;

  background-color: #555;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1;

}

.dropdown-content a {

  float: none;

  font-size: 14px;

  color: white;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

  text-align: left;

}

.topnav a:hover, .dropdown:hover .dropbtn {

  background-color: #555;

  color: #e8491d;

  font-weight: bold;

}

.dropdown-content a:hover {

  background-color: #ddd;

  color: black;

}

.show {

  display: block;

}



/*SHOWCASE*/

#showcase{

  min-height:50px;
  margin-top:25px;
  margin-bottom: 25px;


  text-align:center;

  color: black;

  background-position:center;

}

#showcase h2{

  margin-top:100px;

  font-size:55px;

  margin-bottom:10px;
  color: black;

}

#showcase p{

  font-size:20px;
  color: black;

}

/*NEWSLETTER*/

#newsletter{

  padding:15px;

  color:#ffffff;

  background:#35424a;

  border-bottom:#e8491d 3px solid;

}

#newsletter h2{

  float:right;

  font-size: 20px;

  padding-right: 30px;

}

.left{

  float: left;

  width:50%;

  margin: 0;

}

.right{

  margin-top:10px;

  float: left;

  width:160px;

  background:#e8491d;

  text-align: center;

  padding-top: 10px;

  padding-bottom: 10px;

}

.right a {

 color: white;

 text-decoration: none;

}

/*BREADCRUMPS*/

#breadcrumps {

  background-color: #35424a;

  padding:10px;

  margin:0;

}

#breadcrumps h1, #breadcrumps h2{

 color: #ffffff;

 display: inline;

 font-size: 18px;

}

#breadcrumps p {

  padding-top: 10px;

  font-size: 18px;

  display: inline;

}

/*ARTICLE*/

#article {

  margin-top: 30px;

}



/*BOXES*/

#boxes{

margin-top: 30px;



}

#boxes .box {

float:left;

text-align: center;

width:30%;

padding:10px;

margin: 0 auto;

}

#boxes span {

  font-size: 12px;

  font-weight: normal;

}

#boxes .box img{

  width:200px;

}

#boxes .box_text{

  padding-left: 15px;

  text-align: left;

}

#boxes .box_text a{

  text-align: left;

  text-decoration: none;

  color: black;

  }

  #boxes .box_text h3{

    text-align: left;

    text-decoration: none;

    color: black;

    }

/*FOOTER*/

footer{

  padding:20px;

  margin-top:20px;

  color:#ffffff;

  background-color:#e8491d;

  text-align: center;

}


footer p {

    margin-bottom: 0;

    margin-top: 0;

}


/*different screen sizes*/

@media(max-width: 850px){

  header #marca,

  #newsletter h1,

  #newsletter h2,

  #newsletter h3,

  #boxes .box,

  #boxes .box_text a,

  #boxes .box_text h3,

  article#main-col,

  aside#sidebar,

  #breadcrumps,

  #breadcrumps h1,

  #breadcrumps h2,

  #breadcrumps p,

  .left,

  .right{

    float:none;

    text-align:center;

    width:100%;

  }

  #boxes .box_text{

    float:none;

    text-align:center;

    width:90%;

  }

  #boxes .box_text a{

    text-decoration: none;

  }

  #boxes .box_text h3{

    text-decoration: none;

  }

  header{

    padding-bottom:20px;

    position: relative;

  }

  header #marca h2{

    margin:0;

    padding: 0px;

    line-height: 25px;

    font-size: 25px;

    }

  header #marca h3{

    margin: 0;

  }

  .spacer{

    display: none;

  }


  #showcase {

    display:none;

    margin-top:0px;

  }

  #showcase h3{

    margin-top:40px;

    font-size: 30px;

  }

  #breadcrumps{

    padding: 0px;

  }



  #newsletter button, .quote button{

    display:block;

    width:100%;

  }

  @media(min-width: 851px) {

    .container2{
      width: 50%;
}

  }



@media screen and (max-width: 850px) {

  .topnav a:not(:first-child), .dropdown .dropbtn {

    display: none;

  }

  .topnav a.icon {

    float:right  ;

    display: block;

  }

}





@media screen and (max-width: 850px) {

  .topnav.responsive {position: relative;}

  .topnav.responsive .icon {

    position: absolute;

    right: 0;

    top: 0;

  }

  .topnav.responsive a {

    float: none;

    display: block;

    text-align: left;

  }

  .topnav.responsive .dropdown {float: none;}

  .topnav.responsive .dropdown-content {position: relative;}

  .topnav.responsive .dropdown .dropbtn {

    display: block;

    width: 100%;

    text-align: left;

  }

}