/* Core Styles */

body {
  font-family:  Helvetica, Arial,  sans-serif;
  color: #333;
  background: #fff;
  font-size: 1.1em;
  line-height: 1.5;
  text-align:left;
  width: 1357px;
  margin: 0 auto;
}

header {
  margin-bottom: 8em;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

h2,
h3 {
  margin: 0;
  padding: 1em 0;
}

p {
  margin: 0;
  padding:  0;
}


.btn {
  display: inline-block;
  font-size: 15px;
  background: #333;
  color: #fff;
  text-decoration: none;
  padding: 0.5em 2em;
  margin: 0.5em 0;
  border-radius: 10em;
}

.btn:hover {
  background:#0099FF;
  color: #fff;
}

/* Header Showcase */


#showcase {
  min-height: 300px;
  text-align: center;
}

#showcase .bg-image {
  background:linear-gradient(to right,#66DEFF 0%, #0099FF 70% );
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 300px;
  z-index: -1;
  display: inline-block;
}

#logo{
  grid-column: 2/3;
  grid-row: 1/3;
  width: 300px;
  height: auto;
  margin-top: 2em;
}

#showcase .content-wrap,
#section-a .content-wrap {
  padding: 0 1.5em;
}

#menu{
  grid-column: 1/3;
  grid-row: 3;
  justify-self: center;
}

#menu ul {
  padding: 0px;
}

#menu li{
  display: inline;
  text-decoration: none;
  font-size: 14px;
  margin:  0em 2em;
}

#menu a {
  text-decoration: inherit;
  color: #333;
}

#menu a:hover{
 color: #29ABE2;
}

.categorias {
grid-column:3;
grid-row: 3/4;
justify-self:start;
align-self: center;
}

.categorias p{
text-align: left;
color: #000;
font-weight: 500;
font-size: 4em;
line-height: normal;
}

/* Section A */
.section-a-title {
  z-index: -5;
}

.section-a-title p{
display: block;
font-size: 10em;
font-weight: bold;
line-height: 0.8em;
color: #29ABE2;
}

.barra{
  grid-column: 4/8;
  height: 40px;
  background-color: #29ABE2;
  align-self: center;
}

.img-left-a {
  grid-column: 2/5;
  grid-row: 3/5;
}

.img-left-a img {
  width: 500px;
  height: 400px;
}

.img-right-a {
  grid-column: 6;
  grid-row: 2/3;
  justify-self: right;
}

.img-right-a img{
  width: 350px;
  height: 320px;
}

#section-a-content {
  grid-column: 5;
  grid-row: 3/5;
  align-self: center;
  justify-self: end;
  z-index: 2;
}

.content-title {
font-weight: bold;
font-size: 30px;
}

.section-content {
  font-size: 21px;
  padding: 0.5em 0;
}

/* Section B */

#section-b {
  background:linear-gradient(to right,#00f2fe 0%, #4facfe 60% );
  padding-top: 2em;
  margin-top: -2em;
  margin-bottom: 2em;
}

.section-b-title{
grid-column: 8;
grid-row: 2;
justify-self:right;
z-index: 2;
}

.section-b-title p{
  display: block;
  text-align: right;
  font-size: 10em;
  font-weight: bold;
  line-height: 0.8em;
  color: #fff;
}

.barra2{
  grid-column: 2/6;
  grid-row: 2;
  height: 40px;
  background-color: #fff;
  align-self: center;
}

.img-left-b{
  grid-column: 3;
  grid-row: 1;
  z-index: 2;
}

.img-left-b iframe {
  width: 560px;
  height: 315px;
}

.img-right-b {
  grid-column:6;
  grid-row: 2/4;
  justify-self: right;
  margin-top: 0.5em;
  z-index: 1;
}

.img-right-b img {
  width: 400px;
  height: 500px;
}

#section-b-content {
  grid-column: 4/5;
  grid-row: 5;
  align-self: start;
  margin-top: 2em;
  z-index: 3;
}

.btn-wrap{
  text-align: center;
}

.btn-wrap a{
  display: inline-block;
}

/* Section C */

.section-c-title{
display: block;
font-size: 10em;
font-weight: bold;
line-height: 0.8em;
color: #29ABE2;
}

.barra3{
  grid-column: 4/7;
  grid-row: 3;
  height: 40px;
  background-color: #29ABE2;
  align-self: start;
}

.img-left-c {
  grid-column: 2/4;
  grid-row: 4/9;
  align-self: start;
}

.nested {
display:grid;
grid-template-columns:  repeat(4,1fr );
grid-template-rows: repeat(3,1fr);
grid-column-gap: 1em;
grid-row-gap: 1em;
}

.nested div {
  box-shadow: 2px 2px 10px #cfd0d0;
}


#section-c-content {
  grid-column: 5;
  grid-row: 3/6;
  align-self: center;
  z-index: 2;
}

/* Footer */

#footer {
  min-height: 400px;
  text-align: center;
  margin-top: 5em;
}

#footer .bg-image {
  background:linear-gradient(to right,#66DEFF 0%, #0099FF 70% );
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 400px;
  z-index: -1;
  display: inline-block;
}

.footer-title {
font-size: 3.5em;
color: #fff;
margin-top: 1em;
margin-bottom: 0.6em;
font-weight: bold;
}

.footer-content{
font-size: 23px;
color: #fff;
line-height: 36px;
}

#link {
  background: #333;
  color: #fff;
  padding: 0.5em 0;
}

#link a {
  text-decoration: none;
  color: #29ABE2;
}

/*Grids*/

.header-grid{
  display: grid;
  grid-template-columns: 10% 50% 30% 10%;
  grid-auto-rows: 150px;
}

.section-a-grid{
display: grid;
grid-template-columns: 10% 8% 14% 18% 26% 9.5% 7% 7.5% ;
grid-auto-rows: 170px;
}

.section-b-grid{
display: grid;
grid-template-columns: 7.5% 2.5% 6% 30% 36% 3.5% 7% 7.5% ;
grid-auto-rows: 150px;
}

.section-c-grid{
display: grid;
grid-template-columns: 10% 32% 10% 4% 27.5% 9% 7.5% ;
grid-auto-rows: 80px;
}