/* ==========================================================================
   Normatização CSS
   ========================================================================== */

body {
  background:            url("img/f99.jpg");
  background-size:       cover;
  background-repeat:     no-repeat;
  margin:                0;
}

* {
  box-sizing:            border-box;
}

h1,h2,a,p,small, label {
  color:                 #fff;
  text-shadow:           #000 1px 1px 1px, #000 -1px -1px 1px;
  line-height:           1.5em;
}

/* ==== classes ============================================================= */


#grid-container{
  display:               grid; 
  grid-template-columns: 20vw 20vw 20vw 20vw 18vw;
  grid-template-rows:    13vh 80vh 4vh;
  grid-gap:              0.4vh;
  margin-top:            0.5vh;
}

#header {
  grid-row:              1;
  grid-column:           2 / span 3;
  height:                100%;
}


#banner {
  grid-row:              2;
  grid-column:           2 / span 3;
  height:                100%;
}


#prd1 {
  grid-row:              2;
  grid-column:           2;
  height:                100%;
}

#prd2 {
  grid-row:              2;
  grid-column:           3;
  height:                100%;
}

#prd3 {
  grid-row:              2;
  grid-column:           4;
  height:                100%;
}

#footer {
  grid-row:              3;
  grid-column:           2 / span 3;
  height:                100%;
}


.format2 {
  border:                1px solid black;
  border-radius:         10px;
  font-size:             1.2em;
  font-weight:           bold;
  text-align:            center;
  height:                100%;
  background-color:      rgba(0, 0, 0, .5);
}


.format4 {
  text-align:            left;
  padding-top:           1%;
  padding-left:          2%;
}


.logo {
  float:        left;
  padding:      4%;
}

.prd{
  float:        center;
  padding:      2%;
}

.mens {
  color:        #FF8C00;
}


.menu {
  float:        right;
  margin-right: 2em;
  padding:      3%;
}

.menu ul {
  float:        right;
}

.menu li {
  font-size:        1.2em;
  margin-left:      2em;
  margin-top:       1em;
  display:          inline-block;
}

.menu li a {
  color:            white;
  text-decoration:  none
}


.menu a:hover {
  color:            #FF8C00;
}

.menu a.active {
  color: white;
}



#area {
  position:         relative;
  top:              8%;
  left:             20%;
  width:            60%;
  height:           80%;
  border-radius:    4px;
}


fieldset {
  border:           none;
}

label {
  position:         absolute;
  left:             20%;
}

.campo_nome {
  position:         absolute;
  left:             20%;
  width:            60%;
  border-radius:    4px;
  font-size:        1.1em;
}

.campo_email {
  position:         absolute;
  left:             20%;
  width:            60%;
  border-radius:    4px;
  font-size:        1.1em;
}

.msg {
  position:         absolute;
  left:             20%;
  border-radius:    4px;
  font-size:        1.3em;
  width:            60%;
}

.btn_submit {
  position:         absolute;
  border-radius:    4px;
  position:         absolute;
  bottom:           30%;
  font-size:        1.1em;
  left:             20%;
  width:            60%;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */




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

    .caixa {
        width: 65%;
    }

    .coluna {
        width: 48%;
        margin-bottom: 2.4em;
        margin-right: 2%;
    }

    .coluna:nth-child(even) {
       margin-right: 0;
    }

    .logo {
        margin-top: 1.2em;
    }

}


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

   .banner {
        position: relative;
        float: left;
        margin:0;
        height: 150px;
    }

    .caixa {
        position: relative;
        display: block;
        float: left;
        margin-top:100px;
        width: 100%;
        background: #000;
    }

    .caixa h1 {
        font-size: 2.5em;
    }

    .principal {
        margin-top: 450px;
    }

}

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

    .menu {
        width: 100%;
    }
    
    .menu ul {
        float: left;
        font-size: 0.8em;
    }

    .menu li:first-child {
        margin-left: 0;
    }

}


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

    .coluna {
        width: 100%;
        margin-right: 0;
    }

    .caixa {
         padding: 1.2em 2em 1.2em 2em;
    }

     .banner {
        height: 120px;
    }

    .caixa {
        position: relative;
        display: block;
        float: left;
        margin-top:80px;
        width: 100%;
        background: #000;
    }


}