@charset "utf-8";

/* CSS Document */



body, html {

  height: 100%;

}



* {

  box-sizing: border-box;

}



@font-face {

   font-family: intervogue;

   src: url(fonts/IntervogueSoftRegular.otf);

}





body {

	font-size: 100%;

	font-family: intervogue;

	font-size: 15.8px;

	color:#2e2e2e;

	text-decoration:none;

	line-height: 22px;

	background-color:#fff;

	margin:0px;

	padding:0px;

	width:100%;

	height:100%;

	-webkit-font-smoothing: antialiased;

}



#workarea, #workarea_small {

	width:100%; 

	display:block; 

	float:left;

	padding-right:10%; 

	padding-left:10%;

	padding-top:32px;

	padding-bottom:32px;

}



#logo {

	width:19%; 

	height:auto; 

	margin-right:auto; 

	margin-left:auto;

	padding-bottom: 36px;

	padding-top: 32px;

}



.flex-container > one {

  width:100%;

}



.flex-container > two {

  width:48%;

  text-align:left;

}



.flex-container > three {

  width:31.3%;

  text-align:left;

}



.flex-container > four {

  width:22.1%;

  text-align:left;

}



.flex-container > five {

  width:18.1%;

  text-align:left;

}



.flex-container > five_beta {

  width:18.1%;

  text-align:left;

}



.flex-container > divbig {

  width:63%;

  background-color: #fff;

  margin: 1%;

  text-align: center;

  border:1px solid #333;

 float: right;

}



.flex-container > diveight {

  width:12%;

  margin: 0.5%;

}



.flex-container > feedback {

  width:31.3%;

  text-align: left;

  padding:8px;

  padding-left:24px;

  padding-top:12px;

  padding-bottom:12px;

  margin-bottom:5%;

  background-image:url(images/quote.png);

  background-repeat:no-repeat;

}



#right {

	float:right;

}



#left {

	float:left;

}



#desktop {

	display:block;

}



#mobile {

	display:none;

}



.desktop {

	display:block;

}



.mobile {

	display:none;

}



#pagename {

	margin-top:160px; 

	width:20%; 

	text-align:right;

}



.topnow {

	writing-mode:vertical-rl; 

	transform:rotate(180deg); 

	right: 35px; bottom: 35px; 

	position: fixed; 

	color: #1fb3a4; 

	font-size: 60px; 

	cursor: pointer; 

	display: none;

}



#profileimage {

	width: 31%;

	height: auto;

	padding: 12px;

	padding-right: 0px;

	padding-left: 22px;

	float: right;

}



.scrollflx {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}



.scrollfour {

  width: 22.5%;  

}



.scrollfourtwo {

  width: 22.5%;  

}



#scrollproducts {

	width:100%;

	left:0px;

	padding-top:3%;

	padding-bottom:3%;

}



.prdname {

	top:-75px; 

	position:relative; 

	background-color:#666; 

	padding:3px; 

	border-radius:5px; 

	color:#fff; 

	text-align:center; 

	max-width:80%;

	margin-left:12.5%;

	background-color: rgba(0,0,0,0.7);

}



#prdimage {

	padding-top: 15px;

	padding-bottom: 15px;

	border-radius: 5px;

	width:100%; 

	height:auto; 

	pointer-events: none;

	background-color:#fff;

	position:inherit;

	border: #1fb3a4 solid 1px;

}


#whatsapp_side {
	  display:block;
	  position: fixed;
	  top: 45%;
	  left: 12px;
	  z-index: 99;
	  border: none;
	  outline: none;
	  cursor: pointer;
	  width:12%;
	  max-width: 57px;
	  height:auto;
	  border-radius:50%;
	  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {



#scr {

	overflow:scroll;

}	

	

#workarea {

	padding-right:5%; 

	padding-left:5%;

}



#workarea_small {

	padding-right:2%; 

	padding-left:2%;

}



#logo {

	width:72%; 

}



.flex-container > two {

  width:100%;

  text-align: left;

}



.flex-container > three {

  width:100%;

  text-align: left;

}

	

.flex-container > four {

  width:100%;

  text-align: left;

}

	

.flex-container > five {

  width:100%;

  text-align: left;

}

	

.flex-container > five_beta {

  width:48%;

  text-align:left;

}

	

.flex-container > divbig {

  width:98%;

  margin: 1%;

  margin-bottom: 2%;

  margin-top:2%;

}



.flex-container > diveight {

  width:48%;

  margin: 1%;

}



.flex-container > feedback {

  width:100%;

  text-align: left;

}



#right {

	float:right;

	width:100%;

	text-align:center;

}



#left {

	float:left;

	width:100%;

	text-align:center;

}



#desktop {

	display:none;

}



#mobile {

	display:block;

}

	

.desktop {

	display:none;

}



.mobile {

	display:block;

}



#pagename {

	opacity:0.7; 

	text-align:center;

	width:100%;

}

	

.topnow {

	right: 25px; bottom: 25px; 

	font-size: 42px; 

}

	

#profileimage {

	width: 100%;

	height: auto; 

	padding: 12px;

	padding-bottom: 36px;

	padding-right: 0px;

	padding-left: 0px;

	float: left;

}



#scrollproducts {

	width:376%;

}



.scrollfourtwo {

	width:20%;

	margin-right:1.7%;

}

#whatsapp_side {
	  display:block;
	  position: fixed;
	  top: 86%;
	  left: 12px;
	  z-index: 99;
	  border: none;
	  outline: none;
	  cursor: pointer;
	  width:12%;
	  max-width: 57px;
	  height:auto;
	  border-radius:50%;
	  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


}



.inner {

  display: inline-block;

  vertical-align: middle;

  margin-right:15px;

}



#coverimage {

  	width: 100%;

	left:0px;

  	height: 380px;

	background-size:cover;

  	float:left;

	background-attachment: fixed;

	background-position:center;

	background-repeat:repeat-y;

	position:relative;

	z-index:-9999;

}



.flex-container {

  display: flex;

  flex-wrap: wrap;

  align-items: stretch;

  background:none;

  text-align:center;

  justify-content: space-between;

  padding-top:25px;

  padding-bottom:25px;

}



#productimg {

	outline: 1px dashed #f5f5f5;

    outline-offset: -10px;

	width:100%; 

	height:auto; 

	pointer-events: none;

}





/* WhatsApp */



.botao-wpp {

  text-decoration: none;

  color: #fff;

  display: inline-block;

  background-color: #25d366;

  padding: 1rem 1.2rem;

  border-radius: 3px;

}



.botao-wpp:hover {

  background-color: darken(#25d366, 5%);

  color: #fff;

}



.botao-wpp:focus {

  background-color: darken(#25d366, 15%);

  color: #fff;

}





.botao-amm {

  text-decoration: none;

  color: #fff;

  display: inline-block;

  background-color: #ea971d;

  padding: 1rem 1.2rem;

  border-radius: 3px;

}



.botao-amm:hover {

  background-color: darken(#ea971d, 5%);

}



.botao-amm:focus {

  background-color: darken(#ea971d, 15%);

}





/* Fonts */



h1 {font-size: 24px; font-weight: 400; color:#2e2e2e; padding:25px; background-color:#fff; opacity: 0.9;}

h2 {font-size: 22px; font-weight: 200; color:#2e2e2e; margin-top:15px; margin-bottom:15px;}

h3 {font-size: 18px; color:#595959; margin-top:9px; margin-bottom:9px; font-weight: 250; display: flex; flex-direction: row; }

h4 {font-size: 16px; color:#2e2e2e; margin-top:9px; margin-bottom:9px; font-weight: 250;}

h5 {font-size: 14px; color:#595959; margin-top:12px; margin-bottom:12px; font-weight: 250;}

h6 {font-size: 12px; color:#2e2e2e; margin-top:2px; margin-bottom:2px; line-height:16px;}



h3:before, 

h3:after { 

   content: ""; 

   flex: 1 1; 

   border-bottom: 2px solid #595959; 

   margin: auto; 

}



a {outline: 0;}

a img {text-decoration: none;}

a:link {text-decoration: none; color: #2e2e2e;}

a:visited {text-decoration: none; color: #2e2e2e;}

a:active {text-decoration: none; color: #2e2e2e;}

a:hover, a:visited {text-decoration: none; color: #1fb3a4;}



.white a:link {text-decoration: none; color: #fff;}

.white a:hover{text-decoration: none; color: #2e2e2e;}

.white a:visited {text-decoration: none; color: #fff;}

.white a:active {text-decoration: none; color: #fff;}



h5 a img {text-decoration: none;}

h5 a:link {text-decoration: none; color: #2e2e2e;}

h5 a:visited {text-decoration: none; color: #2e2e2e;}

h5 a:active {text-decoration: none; color: #2e2e2e;}

h5 a:hover, a:visited {text-decoration: none; color: #1fb3a4;}



.name {

	top:-75px; 

	position:relative; 

	background-color:#666; 

	padding:3px; 

	border-radius:5px; 

	color:#fff; 

	text-align:center; 

	max-width:80%;

	margin-left:12.5%;

	background-color: rgba(0,0,0,0.7);

}





.gold {

	color:#d9bd5c;

}



.pink {

	color:#e237b7;

}



/* Menu */

.rc_nav {

  overflow: hidden;

  text-align: center;

  z-index: 6;

}



.rc_nav a {

	 display: inline-block;

	 margin-right: -4px;  /* inline-block gap fix */

	 color: #1fb3a4;

	 padding: 1px 22px;

	 text-decoration: none;

	 font-size: 18px;

	 font-weight:780;

	 -webkit-transition: background 0.3s linear;

	 -moz-transition: background 0.3s linear;

	 -ms-transition: background 0.3s linear;

	 -o-transition: background 0.3s linear;

	 transition: background 0.3s linear;

	 border-right: 1px solid #1fb3a4;

}



.rc_nav a:hover {

  	color: #EB0003;

}



.rc_nav a.active  {

  	color: #EB0003;

}



.rc_nav .icon {

    display: none;

}



.rc_content {

  text-align: center; 

  padding-left:14px; 

  font-family: Poppins; 

  margin-top: 100px;  

  color: #8e909b;

}



/* Mob Menu */



.topnav {

  overflow: hidden;

  background:none;

}



.topnav a {

  float: left;

  display: block;

  color: #1fb3a4;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

  font-size: 16px;

  font-weight: bold;

}



.topnav a:hover {

  background-color: #EB0003;

  color: black;

}



.topnav a.active {

}



.topnav .icon {

  display: none;

}



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

  .topnav a:not(:first-child) {display: none;}

  .topnav a.icon {

    float: right;

    display: block;

  }

}



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

  .topnav.responsive {position: relative;}

  .topnav.responsive .icon {

    position: absolute;

    right: 0;

    top: 0;

  }

  .topnav.responsive a {

    float: none;

    display: block;

    text-align: left;

  }

}



/* Form */



.form-box {

  position: relative;

}



.form-box input {

  width: 96%;

  margin-left: 2%;

  margin-right: 2%;

  padding: 10px 0px;

  color: #0d0d0d;

	 margin-top: 5px;	
	
  margin-bottom: 30px;

  border: none;

  border-bottom: 1px solid #0d0d0d;

  outline: none;

  background: transparent;

}



.form-box textarea {

  width: 96%;

  margin-left: 2%;

  margin-right: 2%;

  padding: 10px 0px;

  color: #0d0d0d;

	margin-top: 5px;	
	

  margin-bottom: 30px;

  border: none;

  border-bottom: 1px solid #0d0d0d;

  outline: none;

  background: transparent;

}



.form-box label {

  position: absolute;

  top:0;

  left: 2%;

  padding: 10px 0;

  color: #0d0d0d;

  pointer-events: none;

  transition: .5s;

}



.form-box button {

  border-radius: 4px;

  background-color: #1fb3a4;

  border: none;

  color: #FFFFFF;

  text-align: center;

  padding: 15px;

  transition: all 0.5s;

  cursor: pointer;

  margin: 5px;

}



.form-box button:hover {

  color: #000;

}



.form-box input:focus ~ label,

.form-box input:valid ~ label,

.form-box textarea:focus ~ label,

.form-box textarea:valid ~ label {

  top: -20px;

  left: 2%;

  color: #ccc;

  font-size: 12px;
	
 margin-bottom: 24px;

}



.btn:hover {

  background: transparent;

  box-shadow: 0 0 20px 10px rgba(51, 152, 219, 0.5);

}



/* Hide scrollbar for IE, Edge and Firefox */

html {

  -ms-overflow-style: none;  /* IE and Edge */

  scrollbar-width: none;  /* Firefox */

}



.progress {

  background: linear-gradient(to right, #1fb3a4 var(--scroll), transparent 0);

  background-repeat: no-repeat;

  position: fixed;

  width: 100%;

  height: 4px;

  z-index: 999;

}



.scrllcover {width:100%;}

.flx-products {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
	overflow: hidden;
}

#products {
	width:100%;
	left:0px;
	overflow: hidden;
}

.fourscroll {
  width: 22.5%;
}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {

	.scrllcover {width:100%; overflow: scroll; padding: 0  5% }
	
	#products {
		width:376%;
	}
	.fourscroll {
		 width:22.5%;
	}
	
}