/* layout CWS beta v.0.0.1 */
/* author - Catarino Grosser Ferreira */

*{box-sizing: border-box; padding: 0; margin: 0;}

  @import url('https://fonts.googleapis.com/css2?family=Alumni+Sans+Collegiate+One&family=Quicksand:wght@700&display=swap');

a {text-decoration: none;}
body { font-size: xx-large;}
header { margin-top: 11vh;}
nav { position: fixed;  top: 0; left: 0;  right: 0;width: 100%; height: max-content; align-items: center; justify-content:center; padding: 0.6rem 0;}

footer { align-items: center; justify-content: center; height:25vh; margin: 3% auto 0 auto;}
.copyRightLinkCWS { width: max-content; margin: 1% auto; }

img { width: 100%;}

/* css reutilizável */
.conteudoPagina { display: flex; flex-direction: column;}
.linha { width: 100%; display: flex; flex-direction: row; align-items: center;}
.caixa-1 { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 92%;margin:2rem auto; padding: 2rem;}
.grid-2p1 { display: grid; grid-template-columns: 6fr 6fr; column-gap: 4rem; row-gap: 2; width: 100%; margin: auto;} 
.grid-4p1 { display: grid; grid-template-columns: auto auto auto auto; column-gap: 2rem; row-gap: 1rem; width: 100%; margin: auto;} 
.formulario { max-width: 100%;}
.padding-2 { padding: 2rem;}
.linkMenu { width: max-content; margin: auto; padding: 3px; text-decoration: none;}
.Border-radius-15 { border-radius: 15px; overflow: hidden;}
.logoCWS { width: 30%;}
.fotoProduto { width: 60%;}
.icone { width: 30%;}

.disable { display: none;}

/* css unico */

#btnOpenMenu
{ display: none; width: 10vw; height:auto; background: transparent;
border: none; font-size: xx-large;}
#logo { width: 60%; height: max-content; display: flex; justify-content: center;}
#logo h1 {width: max-content; margin: auto;}
#menu { width: 40%; transition: all 1.3s linear;}
#contMenu { width: 100%; display: flex;transition: all 1.6s linear;}
#btnCloseMenu
{ display: none; width: 10vw; height:auto;background: transparent; border: none; font-size:large;margin:2vh auto auto 2vw;}
#btnPageWhats{ position: fixed; bottom: 3px; right: 5px; width: 70px; height: 70px;}
.iconeBTN{width: 100%;}
#btnContatoWhats{ width: 70px; height: 70px; margin: auto;}
h2,h3{ margin: 1rem 0;}
/* estilo CWS */

body{ color:rgb(34, 34, 34);
  font-family: 'Alumni Sans Collegiate One', sans-serif; font-size: large;background-color: black; color:rgb(187, 186, 186);}
.ativo{ border-bottom: 2px solid rgb(152, 0, 253);}
nav{ color:rgb(128, 128, 128); background-color: rgba(0, 0, 0, 1.0);}
#btnCloseMenu,.linkMenu,#logo,a{color:rgb(160, 160, 160);}
.linkProduto { background-color: gray; color: gainsboro;width: max-content; padding: 1%;border-radius: 10px;text-decoration: none;}
p {margin: 2vh 0; font-size: xx-large;}
.bgCollor1 {background-image: linear-gradient(to right, rgb(64, 0, 120) , rgb(25, 0, 115));}
.bgCollor2{background-image: url("../imagens/backGroudSec\ -\ Copia.png");}
.borderCollor1 { border:2px solid rgb(138, 43, 226);}
.boxShadow { box-shadow: 0 4px 8px 0 rgba(138,43, 226, 0.2), 0 6px 20px 0 rgba(138,43, 226, 0.19);}
#btnOpenMenu,#btnCloseMenu {color: gainsboro;}

/* responsivo - consulta de mídias */

@media only screen and (max-width: 900px) {
 .linha {flex-wrap: wrap;}
 nav { flex-wrap: nowrap;}
 #logo { width: 90vw;}
 #menu { position: absolute;top: 0; z-index: 1; width: 100%; height: 0; overflow: hidden;
  background-image: linear-gradient(to right, rgb(64, 0, 120) , rgb(25, 0, 115));}
 #contMenu { display: block; width: 0; height: 100vh; overflow: hidden;}
 .linkMenu { display: block; margin-top: 8vh; font-size: x-large;}
 #btnOpenMenu, #btnCloseMenu { display:block;}
  
}

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

 
 #logo{font-size: small;}
  p { font-size: larger;}
  h2,h3 { font-size: larger;}
  .grid-4p1 { grid-template-columns: 12fr;}
  .grid-2p1 { grid-template-columns: 12fr;}
  
}


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

  h3 {font-size: medium;}

}