:root
{
   --cor1: rgb(238, 238, 238);
   --cor2: rgb(230, 222, 215);
   --textColor: black;
}
/*a{
   text-decoration: none;
}*/
html
{
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   color: var(--textColor);
   background-color:var(--cor1);
   scroll-behavior: smooth;
}
.content
{
   position: relative;
   float:left;
   width: 100%;
   top: 0;
   padding-top: 12vw;
   padding-bottom: 8vw;
   left: 0;  
   background-color: var(--cor1);  
}









/*barra topo*/
.header
{
   height: 8vw;
   background-color: var(--cor2);
   width: 100%;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 10;
}
.title
{
   text-align: center;
   color: var(--textColor);
   font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   font-size: 3.5vw;
   font-weight:bold;
   margin-top: 2vw;
}
.title p
{
   margin: 0;
   font-size: 1.2vw;
}
#logo
{
   height:7vw;
   top: 0.5vw;
   left: 0.5vw;
   position:absolute;
}






/* menu imagens*/
#menu
{
   position: relative;
   float: left;
   margin: auto;
   width:90%;
   padding-left: 5%;
   padding-right: 5%;
}
#prints
{
   position: relative;
   float: left;
   padding: 1vw;
}
#prints h3 
{
   position: relative;
   float: none;
   margin:0;
   font-size: 1.4vw;
   text-align: center;
}
#prints a
{
   text-decoration: none;
   color: var(--textColor);
}
#pots
{
   position: relative;
   float: left;
   padding: 1vw;
}
#pots h3
{
   position: relative;
   float: none;
   margin: 0;
   font-size: 1.4vw;  
   text-align: center;
}
#pots a{
   text-decoration: none;
   color: var(--textColor);
}
#faq
{
   position: relative;
   float: left;
   padding: 1vw;
}
#faq h3
{
   position: relative;
   float: none;
   margin: 0;
   font-size: 1.4vw;
   text-align: center;
}
#faq a
{
   text-decoration: none;
   color: var(--textColor);
}
#about
{
   position: relative;
   float: left;
   padding: 1vw;
}
#about h3
{
   position: relative;
   float: none;
   margin: 0;
   font-size: 1.4vw; 
   text-align: center;
}
#about a
{
   text-decoration: none;
   color: var(--textColor);
}
.menu_img
{
   position: relative;
   float: inherit; 
   height: 20vw;
}

#ultimas
{
   position: relative;
   width: 100%;
   margin:auto;

}
.ultimoproduto
{
   position: relative;
   float: left;
   
}






/*prints/pots/product?? css*/
.product
{
   position: relative;
   float: left;
   width: 90%;
   /*top: 5vw;*/
   left:5%;
   /*padding-bottom: 2vw;*/
   margin-bottom: 2vw;
   background-color: var(--cor2);
}
.product_img
{
   position: relative;
   float: left; 
   height: 20vw;
   /*left:3vw;*/
   z-index: 1;
}
.product_text
{
   position:relative;
   float: left;
   width:60vw;
   height: 100%;
   /*left:8vw;*/
   text-align: center;
   padding: 1vw;
   padding-left: 3vw;
  /* border: 0.2vw solid gray;
   border-radius: 1vw;*/
}
.product_text h1
{
   text-align: left;
   font-size: 2.5vw;
}
.product_text h3
{
   text-align:justify;
   font-size: 1.3vw;
   font-weight: normal;
}
.btnImgPrev
{
   position:absolute;
   float: left;
   top:9vw;
   left:0vw;
   background-color: #a7a7a7;
   border-radius: 50%;
   z-index: 2;
   opacity: 50%;
   
}
.btnImgPrev:hover
{
   opacity: 100%;
   transition-duration: 0.4s;
}
.btnImgNext
{
   position: relative;
   float: left;
   top:9vw;
   right:2vw;

   background-color: #a7a7a7;
   border-radius: 50%;
   z-index: 2;
   opacity: 50%;
   
}
.btnImgNext:hover
{
   opacity: 100%;
   transition-duration: 0.4s;
}





/*faq css*/
#faq_prints
{
   position: relative;
   width: 80%;
   left:10%;
   padding-top: 5vw;
}
#faq_prints h1
{
   font-size: 2vw;
}
#faq_text_prints h3
{
   font-size: 1vw;
}
#faq_text_prints h4
{
   font-weight: normal;
   font-size: 0.8vw;
}
#faq_pots
{
   position: relative;
   width: 80%;
   left:10%;
   padding-top: 3vw;
}
#faq_pots h1
{
   font-size: 2vw;
}
#faq_text_pots h3
{
   font-size: 1vw;
}
#faq_text_pots h4
{
   font-weight: normal;
   font-size: 0.8vw;
}
.expBtn
{
   position: relative; /* Fixed/sticky position */
   float: right;
   top:0vw;
   border: none; /* Remove borders */
   outline: none; /* Remove outline */
   color: var(--textColor); /* Text color */
   background-color: var(--cor2);
   cursor: pointer; /* Add a mouse pointer on hover */
   padding: 0.6vw,0.8vw,0.6vw,0.8vw; /* Some padding */
   border-radius: 50%; /* Rounded corners */
   font-size: 0.9vw; /* Increase font size */
}
.expBtn:hover
{
   background-color:gray; /* Set a background color */
}
.faqTopic
{
   background-color: var(--cor2);
   cursor: pointer;
}








/*about*/
#aboutText
{
   position: relative;
   float: left;
   width: 80%;
   height: auto;
   top:0;
   left:10%;
   padding-top: 5vw;
   font-size: 1vw;
}









/*politica de privacidade*/
#policy
{
   position: relative;
   width: 80%;
   top: 5vw;
   left:10%;
   padding-bottom: 4vw;
}
#policy h3
{
   font-weight: normal;
}
#policy_link
{
   position: absolute;
   float:left;
   left:1vw;
   bottom: 1vw;;
   font-size: 1vw;
   text-decoration: none;
   color: gray;
   text-decoration-line: underline;
}





/*rodapé*/
.footer
{
   position: fixed;
   float: left;
   width: 100%;
   height: 5vw;
   bottom: 0;
   left: 0;
   background-color: var(--cor2);     
   z-index: 10;
}

.footerText
{
   position: relative;
   margin-top: 1.5vw;
   margin-left: 25vw;
   float: left;
   font-size: 1.5vw;
}

.instaLogo
{
   position:relative;
   float: left;
   left:1vw;
   top:1vw;
   bottom:1vw;
  /* margin-top: 1vw;
   margin-left: 4vw;
   margin-bottom: 1vw;*/
   z-index: 2;
}

#instagram
{
   position: relative;
   height: 3vw;
   /*width: 3vw;*/
}

/*button darkmode*/
.switch {
   position: relative;
   display: inline-block;
   width: 4vw;
   height: 2vw;
 }
 
 .switch input { 
   opacity: 0;
   width: 0;
   height: 0;
 }
 
 .slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #ccc;
   -webkit-transition: .4s;
   transition: .4s;
   border-radius: 2vw;
 }
 
 .slider:before {
   position: absolute;
   content: "";
   height: 1.5vw;
   width: 1.5vw;
   left: 0.3vw;
   bottom: 0.25vw;
   background-color: white;
   -webkit-transition: .4s;
   transition: .4s;
   border-radius: 50%;
 }
 /*
 input:checked + .slider {
   background-color: #000000;
 }
 
 input:focus + .slider {
   box-shadow: 0 0 1px #000000;
 }
*/
 
 input:checked + .slider:before {
   -webkit-transform: translateX(2vw);
   -ms-transform: translateX(2vw);
   transform: translateX(2vw);
   background-color: black;
 }

 .darkMode
 {
   position: relative;
   float: right;
   top: 1.5vw;
   right:8vw;

 }
 

 /*topo da pagina butao*/
 #topbtn {
   display: none; /* Hidden by default */
   position: fixed; /* Fixed/sticky position */
   bottom: 5.5vw; /* Place the button at the bottom of the page */
   right: 1vw; /* Place the button 30px from the right */
   z-index: 99; /* Make sure it does not overlap */
   border: none; /* Remove borders */
   outline: none; /* Remove outline */
   background-color: rgb(151, 151, 151); /* Set a background color */

   color: white; /* Text color */
   cursor: pointer; /* Add a mouse pointer on hover */
   padding: 0.7vw,0.9vw,0.7vw,0.9vw; /* Some padding */
   border-radius: 50%; /* Rounded corners */
   font-size: 1.5vw; /* Increase font size */
   
 }
 
 #topbtn:hover {
   background-color: #555; /* Add a dark-grey background on hover */
 }



#copyright
{
   position: absolute;
   bottom:0;
   width: 100%;
   text-align: center;
   font-size: 1vw;
}