@font-face {
   font-family: pop;
   src: url(../fonts/Poppins-Regular.ttf);
}

@font-face {
   font-family: pop-black;
   src: url(../fonts/Poppins-Black.ttf);
}

@font-face {
   font-family: pop-bold;
   src: url(../fonts/Poppins-Bold.ttf);
}

@font-face {
   font-family: formsymbols;
   src: url(../fonts/presslayouts-font.ttf);
}

@font-face {
   font-family: pop-light;
   src: url(../fonts/Poppins-Light.ttf);
}

* {
   font-family: pop;
}


@media all and (max-width: 1366px) {
	
	.wrapper-white {
	overflow: auto;
	padding-left: 10%;
	padding-right: 10%;
	background-color: white;
	}

	.wrapper-grey {
	overflow: auto;
	padding-left: 10%;
	padding-right: 10%;
	background-color: #F8F8F8;
	}
	
	.bannermessage {
	text-align: right;
	color: white;
	font-size: 30px;
	padding-top: 25px;
}

}
@media all and (min-width: 1367px) {
	
	.wrapper-white {
	overflow: auto;
	padding-left: 20%;
	padding-right: 20%;
	background-color: white;
	}

	.wrapper-grey {
	overflow: auto;
	padding-left: 20%;
	padding-right: 20%;
	background-color: #F8F8F8;
	}
	
	.bannermessage {
	text-align: right;
	color: white;
	font-size: 36px;
	padding-top: 36px;
}
}

.grid-top {
	display: grid;
	grid-template-columns: 40% 40% 20%;
}
	
.grid-login-cart {
	display: grid;
	grid-template-columns: 80% 20%;	
}

.cart {
	text-align: right;
}
	
.login {
	text-align: right;
}
	
.logo {
	background-image: url("../images/logo220.png");
	background-repeat: no-repeat;
	background-position: left center;
}

.logo_sthil {
	background-image: url("../images/logo_sthil.png");
	background-repeat: no-repeat;
	background-position: left center;
}

.search-form {
	display: grid;
	grid-template-columns: 80% 20%;
}

.search-form-left {
	border-radius: 25px 0 0 25px;
	background-color: white;
	border-style: solid;
	border-width: 1px;
	border-color: grey;
	padding-top: 6px;
	padding-left: 12px;
}
	
.search-form-right {
	border-radius: 0 25px 25px 0;
	background-color: #0c394c;
	text-align: center;
    padding-top: 5px;
}

input {
	border: none;
}

textarea:focus, input:focus{/*evita que haga recuadro en el formulario*/
    outline: none;
}

.wrapper-menu {
	overflow: auto;
	padding-top: 20px;
	padding-bottom: 0px;
}
	
.grid-container-menu {
	position: relative;
	display: grid;
	padding-left: 20%;
	padding-right: 20%;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #0c394c;
}

.dropdown {
	position: relative;
	display: grid;
	grid-template-columns: 100%;
	align-items: start;
}

.dropbtn {
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	background-color: transparent;
	font-size: 16px;
	color: white;
	border: none;
	text-align: left;
}

.dropdown-content {
	display: none;
	position: absolute;
	min-width: 150px;
	z-index: 1;
}
	
.dropdown:hover .dropdown-content {
	overflow: display;
	position: relative;
	display: inline-block;
}

.dropdown:hover .dropbtn {
	color: grey;
}


.dropdown-content a {
	color: white;
	padding: 0;
	text-decoration: none;
	display: block;
}

.dropdown-content a:visited {
	color: white;
}

.dropdown-content a:hover {
	font-family: pop-black;
	color: #d68b20;
}

.bannercontainer {
	overflow: auto;
	padding-left: 20%;
	padding-right: 20%;
	/*background-image: url("../images/bannermetalurgica.jpg");*/
	/*background-image: url("../images/banner_metalurgica_1.png");*/
	height: 250px;
}
	
.grid-container-banner {
	display: grid;
	grid-template-columns: 5% 95%;
}
/*	
.bannermessage {
	text-align: right;
	color: white;
	font-size: 36px;
	padding-top: 36px;
}
*/
.grid-container-title {
	overflow: auto;
	padding-top: 30px;
	display: grid;
	grid-template-columns: 50% 50%;
}
	
.grid-container-title-left {
	border-style: solid;
	border-width: 0 0 4px 0;
}

.grid-container-title-right {
	border-style: solid;
	border-width: 0 0 1px 0;
}

.grid-container-boxes {
	overflow: auto;
	padding-top: 15px;
	display: grid;
}
.tiles-1 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tiles-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tiles-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tiles-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tiles-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}
.tiles-6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}
.tiles-7 {
	grid-template-columns: repeat(7, minmax(0, 1fr));
}
.tiles-8 {
	grid-template-columns: repeat(8, minmax(0, 1fr));
}

.product-holder-tile {
	display: grid;
	grid-template-columns: auto;
	padding: 5px;
}
	
.product-holder-tile:hover {
	background-color: #d9d9d9;
	transition-duration: 0.2s;
}
	
.product-image {
	width: 100%;
	object-fit: contain;
}
	
.product-text {
	display: grid;
	grid-template-columns: auto;
	color: black;
}
	
.grid-product {
	overflow: auto;
	padding-top: 20px;
	display: grid;
	grid-template-columns: 26% 74%;
}
.product-data {
	display: grid;
	grid-template-columns: 70% 30%;		
}
	
.product-description {
	margin-left: 10px;
	margin-right: 10px;
}	
	
.product-buyable {
	display: grid;
	grid-template-columns: auto;
	row-gap: 5px;
}
	
.product-buyable-title {
	display: inline-block;
	background-color: grey;
	color: white;
	padding-top: 7px;
	padding-left: 10px;
	max-height: 32px;
}

.selector_area {
}
	
.div-selector {
	border-style: solid;
	border-width: 0 0 1px 0;
	padding-left: 10px;
}
	
.selector-attribute {
	font-size: 14px;
	padding-left: 10px;
}
	
.product-buyable-skuholder {
	display: grid;
	grid-template-columns: 30% 70%;
	color: grey;
	font-size: 12px;
}
	
#resetbutton {
	font-family: formsymbols;
}

#resetbutton:hover {
	cursor: pointer;
	color: black;
	transition-duration: 0.2s;
}
	
#product-button {
	color: white;
	background-color: #0c394c;
	text-align: center;
	border-radius: 5px 5px 5px 5px;
	padding-top: 5px;
	display: none;
}
	
#product-button:hover {
	font-family: pop-bold;
}

#cart_submit {
	color: white;
	margin-top: 10px;
	background-color: #0c394c;
	text-align: center;
	border-radius: 5px 5px 5px 5px;
	padding-top: 5px;
	display: none;
}
	
#cart_submit:hover {
	font-family: pop-bold;
}

#pricediv {
	display: grid;
	grid-template-columns: auto auto auto auto;	
}

#pricecurrency {
	text-align: center;	
}

#pricevalue {
	text-align: right;	
}

#quantitydiv {
	display: none;
	grid-template-columns: 33% 34% 33%;
	text-align: center;
}

#lessbutton-div {
	background-color: #0c394c;
	border-radius: 12px 12px 12px 12px;
}

#morebutton-div {
	background-color: #0c394c;
	border-radius: 12px 12px 12px 12px;
}

.order_list {
	display: grid;
	grid-template-columns: 10% 40% 12% 12% 12% 14%;		
	font-size: 10px;
}

body {
	overflow: auto;
}

.search-button {
	font-family: formsymbols;
	border: none;
	font-size: 25px;
	color: white;
	background-color: transparent;
}

.search-button:hover {
	cursor: pointer;
	color: #d68b20;
	transform: translateY(-1px);
	transition-duration: 0.1s;
}

.greenfont {
	color:green;
}

.transparentbutton {
	background-color: transparent;
	color: white;
	border: none;
	font-size: 25px;
}

.transparentbutton:hover {
	color: #d68b20;
	cursor: pointer;
	transition-duration: 0.1s;
}

.login-button {
	color: white;
	background-color: #0c394c;
	font-size: 16px;
	border: 1px solid transparent;
	border-radius: .25rem;
	padding-left: 10px;
	padding-right: 10px;
}

.login-button:hover,
.login-button:focus {
	cursor: pointer;
	color: #d68b20;
	transform: translateY(-1px);
}

.largefont {
	font-size: 36px;
}

.mediumfont {
	font-size: 26px;
}

.smallfont {
	font-size: 14px;
}
.verysmallfont {
	font-size: 10px;
}
.symbol {
	font-family: formsymbols;
}
.alignright {
	text-align: right;
}
.aligncenter {
	text-align: center;
}

.height250{
	height: 250px;
}

.margin-top-10 {
	margin-top: 10px;
}
a {
	text-decoration: none;
}
a:hover {
	font-weight: bold;
}
a:visited {
	text-decoration: none;
}
a:link {
	text-decoration: none;
}

.symbolinkgrey:link {
	font-family: formsymbols;
	color: grey;
	text-decoration: none;
}
.symbolinkgrey:visited {
	color: grey;
}
.symbolinkgrey:hover {
	color: black;
	transform: translateY(-1px);
}

.symbolinkgreen:link {
	font-family: formsymbols;
	color: green;
	text-decoration: none;
}
.symbolinkgreen:visited {
	color: green;
}
.symbolinkgreen:hover {
	color: black;
	transform: translateY(-1px);
}

.delete-item {
	font-family: formsymbols;
	color: grey;
}

.delete-item:hover {
	color: black;
	cursor: pointer;
	transform: translateY(-1px);
}

.background-white {
	background-color: white;
}

.padright10 {
	padding-left: 10px;
}

.product-description-table {
	width: 100%;
}

.bottom-border {
	padding-top: 10px;
	border-style: solid;
	border-width: 0 0 1px 0;
}

.marginauto {
	margin-top: auto;
	margin-bottom: auto;
}
.background-grey {
	background-color: grey;
}
.font-green{
	color: #188200;
}
.font-darkgreen{
	color: #188200;
}

.font-bluegreen{
	color: #31553e;
}

.font-grey{
	color: grey;
}
.font-black{
	color: black;
}
.font-blue{
	color: #000085;
}
.line-through{
	text-decoration: line-through;
}
.table-border-5 {
	border-spacing: 30px;
}

.font-pop-light {
	font-family: pop-light;
}

.family-description {
	font-family: pop-light;
}
.white-link {
	color: white;
}
.white-link:visited {
	color: white;
}
.black-link {
	color: black;
}
.black-link:visited {
	color: black;
}
.black-link:hover {
	color: grey;
}
.grid2575 {
	display: grid;
	grid-template-columns: 25% 50%;
}
.topmargin10 {
	margin-top: 10px;
}
.padding10 {
	padding-top: 10px;
}