/*
Theme Name: QWS Química | Corantes e Pigmentos
Theme URI: https://www.qwsquimica.com.br
Author: Mokeka Publicidade
Version: 1.2
.
.
.
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
body {font-family: 'Montserrat', sans-serif;background-color: #fafafa !important;}html{transition: all 1s;width: 100vw;overflow-x: hidden;font-size:16px !important;}header{transition: all 1s;}a {color: #5DA5C1}a:hover {color: #f13429}#pagina{width: 100%}a{text-decoration:none!important}h1, h2, h3, h4, h5, h6, {font-family: 'Montserrat', sans-serif;color: #484c94 !important;} p,{font-family: 'Montserrat', sans-serif;color: #969696!important;font-size:1em} #menu {margin: 2% 0} #menu a{color:#f47521 !important;font-weight:bold;letter-spacing: 0.2em;} #logo {}.navbar {box-shadow: none !important}.card {box-shadow: none; -webkit-box-shadow:none} #contatos {margin:1rem 0 1rem 0}.espaco{margin:2em}.espacotop{margin-top:5em}.espacobottom{margin-bottom:5em}.social_square_icons ul {margin: 0;padding: 0;list-style: none;margin-top: 10%;}.social_square_icons ul li:first-child {margin-left: 0px}.social_square_icons ul li a {float: left;line-height: 40px;color: #e0e0e0;height: 40px;width: 40px;text-align: center;margin-bottom: 40px;border: 1px solid #e0e0e0}.gap {margin-right: 10px}.social_icons_rounded ul li a i {font-size: 16px}.f_facebook:hover {color: #fff;background: #2a66b3;border: 1px solid #2a66b3}.t_twitter:hover {color: #fff;background: #35bbec;border: 1px solid #35bbec}.pinterest:hover {color: #fff;background: #cb2027;border: 1px solid #cb2027}.linkedin:hover {color: #fff;background: #007bb5;border: 1px solid #007bb5}.g_google:hover {color: #fff;background: #e55644;border: 1px solid #e55644}.instagram:hover {color: #fff;background: #ea4c89;border: 1px solid #ea4c89}.skype:hover {color: #fff;background: #01aaf8;border: 1px solid #01aaf8}.flickr:hover {color: #fff;background: #ff0084;border: 1px solid #ff0084}
.azulbotao{background-color: #484c94 !important}.azulbotaofundo{background-color: #484c94 !important}.bg-escuro{background-color: #306475}.btn:focus, .btn:active, button:focus, button:active {outline: none !important;box-shadow: none !important;}#image-gallery .modal-footer{display: block;}.gallery-title{font-size: 36px;color: #5DA5C1;text-align: center;font-weight: 500;margin-bottom: 70px;}.gallery-title:after {content: "";position: absolute;width: 7.5%;left: 46.5%;height: 45px;}.filter-button{font-size: 18px;border-radius: 5px;text-align: center;color: #5DA5C1;}.filter-button:hover{font-size: 18px;border-radius: 5px;text-align: center;color: #ffffff;background-color: #5DA5C1;}.gallery_product {width: 20% !important}.port-image{width: 100%;}.gallery_product{margin-bottom: 30px;}.btn-default,#searchsubmit {background-color: #484c94 !important;color:white;border:0 !important}.btn-default:active .filter-button:active{background-color: #484c94 !important;color: white;}.display-1 {font-size: 5em;font-weight:800}.displaybold {font-size: 5em;font-weight: 800 !important}.display-2 {font-size: 4.5em;font-weight:800}.display-3 {font-size: 3.5em;font-weight:800}.display-4 {font-size: 3em;font-weight:800}.display-5 {font-size: 2em;font-weight:800}.display-6 {font-size: 1.5em !important;font-weight:800}.display-7 {font-size: 1.2em !important;margin:5%;;font-weight:800}
h2 {color: #484c94 !important;}
h6 {color: #f13429!important;}
hr {height: 0.5em;background-color: #484c94 !important;}
.inicio{position: relative;min-height: 100vh;}
.container-fluid{padding:0 !important}
.fundo-rodape{background-color: #000;} .fundo-rodape p{top:50%; color: #525252; text-align: center;min-height: 3em;}
#footer-gws{background-color: #333333;}
.footer-area h6 {color: #f13429!important;}
.footer-area p {color: #b3b3b3!important;}
.footer-area a {color: #b3b3b3!important; text-decoration: none; font-size: small;text-align: center;}
.footer-area ul { list-style-type: none;padding: 0;}
footer{bottom: 0; width:100%; left: 0;}
.caixa{border: solid 2px #b3b3b3;}
.sombratexto{background-color: #ffffff; padding: 5%; border: solid 2px #b3b3b3;}
figure{margin: 0 0 0.2rem}

.outter:before,
.outter:after,
.inner:before,
.inner:after { background: #B5334C; }
.inner { border-color: #B5334C }

.outter {
  position: relative;
  width: 310px;
  height: 310px;
  overflow: hidden;
  z-index: 10;
}

.outter:before,
.outter:after {
  content: "";
  position: absolute;
  left: 0;
  top: 44%;
  width: 10px;
  height: 120px;
  margin-top: -41px;
  z-index: 1;
}

.outter:after {
  left: auto;
  right: 0;
  margin-top: -45px;
  height: 124px;
}

.inner {
  position: absolute;
  top: 0px;
  width: 310px;
  height: 310px;
  background: rgba(255,255,255,.25);
  border-width: 10px;
  border-style: solid;
  -webkit-transform: rotate(45deg);
}

.inner:before,
.inner:after {
  -webkit-transform: rotate(45deg);
  content: "";
  position: absolute;
  width: 10px;
  height: 123px;
  margin-top: -150px;
  z-index: 1;
  right: auto;
  left: 35px;
  bottom: auto;
  top: 127px;
}

.inner:after {
  height: 117px;
  right: 34px;
  left: auto;
  bottom: -19px;
  top: auto;
}

.arrowleft {
	width: 10vmin;
	height: 10vmin;
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	transform: rotate(-135deg);
}
.arrowleft:before {
		content: '';
		width: 100%;
		height: 100%;
		border-width: .8vmin .8vmin 0 0;
		border-style: solid;
		border-color: #B5334C;
		transition: .2s ease;
		display: block;
		transform-origin: 100% 0;
	}
.arrowleft:after {
		content: '';
		float: left;
		position: relative;
		top: -100%;
		width: 100%;
		height: 100%;
		border-width: 0 .8vmin 0 0;
		border-style: solid;
		border-color: #B5334C;
		transform-origin: 100% 0;
		transition:.2s ease;
	}
.arrowleft:hover::after {
		transform: rotate(45deg);
		border-color: orange;
		height: 120%;
	}
.arrowleft:hover::before {
		border-color: orange;
		transform: scale(.8);
	}

.arrowright {
	width: 10vmin;
	height: 10vmin;
	box-sizing: border-box;
	position: absolute;
	top: 50%;
	left:70%;
	transform: rotate(45deg);
}
.arrowright:before {
		content: '';
		width: 100%;
		height: 100%;
		border-width: .8vmin .8vmin 0 0;
		border-style: solid;
		border-color: #B5334C;
		transition: .2s ease;
		display: block;
		transform-origin: 100% 0;
	}
.arrowright:after {
		content: '';
		float: left;
		position: relative;
		top: -100%;
		width: 100%;
		height: 100%;
		border-width: 0 .8vmin 0 0;
		border-style: solid;
		border-color: #B5334C;
		transform-origin: 100% 0;
		transition:.2s ease;
	}
.arrowright:hover::after {
		transform: rotate(45deg);
		border-color: orange;
		height: 120%;
	}
.arrowright:hover::before {
		border-color: orange;
		transform: scale(.8);
	}
	
.arrowup {
	width: 10vmin;
	height: 10vmin;
	box-sizing: border-box;
	position: absolute;
	left:50%;
	transform: rotate(-45deg);
}
.arrowup:before {
		content: '';
		width: 100%;
		height: 100%;
		border-width: .8vmin .8vmin 0 0;
		border-style: solid;
		border-color: #B5334C;
		transition: .2s ease;
		display: block;
		transform-origin: 100% 0;
	}
.arrowup:after {
		content: '';
		float: left;
		position: relative;
		top: -100%;
		width: 100%;
		height: 100%;
		border-width: 0 .8vmin 0 0;
		border-style: solid;
		border-color: #B5334C;
		transform-origin: 100% 0;
		transition:.2s ease;
	}
.arrowup:hover::after {
		transform: rotate(45deg);
		border-color: orange;
		height: 120%;
	}
.arrowup:hover::before {
		border-color: orange;
		transform: scale(.8);
	}

.arrowdown {
	width: 10vmin;
	height: 10vmin;
	box-sizing: border-box;
	position: absolute;
	left:50%;
	transform: rotate(135deg);
}
.arrowdown:before {
		content: '';
		width: 100%;
		height: 100%;
		border-width: .8vmin .8vmin 0 0;
		border-style: solid;
		border-color: #B5334C;
		transition: .2s ease;
		display: block;
		transform-origin: 100% 0;
	}
.arrowdown:after {
		content: '';
		float: left;
		position: relative;
		top: -100%;
		width: 100%;
		height: 100%;
		border-width: 0 .8vmin 0 0;
		border-style: solid;
		border-color: #B5334C;
		transform-origin: 100% 0;
		transition:.2s ease;
	}
.arrowdown:hover::after {
		transform: rotate(45deg);
		border-color: orange;
		height: 120%;
	}
.arrowdown:hover::before {
		border-color: orange;
		transform: scale(.8);
	}
	
#cookies .card {
  width: 350px;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #d2d2dc;
  border-radius: 6px;
  -webkit-box-shadow: 0px 0px 5px 0px rgb(249, 249, 250);
  -moz-box-shadow: 0px 0px 5px 0px rgba(212, 182, 212, 1);
  box-shadow: 0px 0px 5px 0px rgb(161, 163, 164);
}

.cookies a {
  text-decoration: none;
  color: #000;
  margin-top: 8px;
}

.cookies a:hover {
  text-decoration: none;
  color: blue;
  margin-top: 8px;
}

#loadMore {width: 200px;transition: .3s;}
#loadMore:hover {text-decoration: none;}

.noContent {color: #000 !important;background-color: transparent !important;pointer-events: none;}
@media (min-aspect-ratio: 16/9) {#videocontainer{width:100% !important;height: auto !important;}}
@media (max-aspect-ratio: 16/9) {#videocontainer{ width:auto !important;height: 100% !important;}}
@media (max-width: 48em) {h1 {font-size: 2.441em;}h2 {font-size: 1.953em;}h3 {font-size: 1.563em;}h4 {font-size: 1.25em;}.display-1 {font-size: 4em;}.display-2 {font-size: 3em;}.display-3 {font-size: 2.5em;}.display-4 {font-size: 2em;}}