@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: pop-light;
   src: url(../fonts/Poppins-light.ttf);
}

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

* {
   font-family: pop;
}
@media all and (max-width: 1023px) {
	body {
		color: blue;
	}
	.grid-container {
		display: grid;
		grid-template-columns: auto;
	}
	
	#search-form {
	display: grid;
	grid-template-columns: 80% 20%;
	background-color: white;
	}
	
	#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;
	}
	
	input[type=text] {
	width: 90%;
	border: none;
	}
	
	textarea:focus, input:focus{
    outline: none;
	}
	
	#search-form-right {
	border-radius: 0 25px 25px 0;
	background-color: #0c394c;
	text-align: center;
    padding-top: 5px;
	}
	
	.submitbutton {
	font-family: formsymbols;
	background-color: transparent;
	border: none;
	font-size: 25px;
	color: white;
	transition-duration: 0.2s;
	}
	
	.submitbutton:hover {
	color: #d68b20;
	}	
	
	#logo {
	width: 150px;
	}
	#logo-div {
	text-align: center;
	}
	#loggedandcart {
		display: grid;
		grid-template-columns: 50% 50%;
		background-color: white;
		padding-top: 20px;
		padding-bottom: 20px;
		padding-left: 25%;
		padding-right: 25%;
	}
	
	#logged {
	
		text-align: left;
	}
	
	#cart {
		text-align: right;
	}
	.wrapper-blue {
	overflow: auto;
	padding-top: 20px;
	padding-bottom: 0px;
	}

	.grid-container-menu {
	display: grid;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 10px;
	padding-bottom: 10px;
	grid-template-columns: 32% 32% 32% 1% 2%;
	background-color: #0c394c;
	}
	
	.grid-container-menu > div {
	background-color: #0c394c;
	}

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

	.dropdown {
	position: relative;
	display: inline-block;
	text-align: left;
	z-index: 1;
	}
	
	.dropdown:hover .dropdown-content {display: inline-block;}

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

	.dropdown-content {
	display: none;
	position: relative;
	min-width: 160px;
	z-index: 1;
	}

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

	.dropdown-content a:hover {
	transition-duration: 0.5s;
	font-family: pop-black;
	color: #d68b20;
	}
	
	.menuitem {
	display: none;
	font-size: 16px;
	color: white;
	text-decoration: none;
	}
	
	.menuitem:hover {
	transition-duration: 0.2s;
	color: grey;
	}
}
@media all and (min-width: 1024px) {
	
	.wrapper-white {
	overflow: auto;
	padding-left: 25%;
	padding-right: 25%;
	background-color: white;
	}

	.grid-container-top {
	display: grid;
	grid-template-columns: 40% 40% 20%;
	}
	
	.grid-container-top > div {	
	}
	
	#logo-div {
	}
	
	#logo {
	}
	
	#search-form {
	display: grid;
	grid-template-columns: 80% 20%;
	background-color: white;
	}
	
	#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;
	}
	
	input[type=text] {
	width: 90%;
	border: none;
	}
	
	textarea:focus, input:focus{
    outline: none;
	}
	
	#search-form-right {
	border-radius: 0 25px 25px 0;
	background-color: #0c394c;
	text-align: center;
    padding-top: 5px;
	}
	
	.submitbutton {
	font-family: formsymbols;
	background-color: transparent;
	border: none;
	font-size: 25px;
	color: white;
	transition-duration: 0.2s;
	}
	
	.submitbutton:hover {
	color: #d68b20;
	}
	
	#loggedandcart {
	display: grid;
	grid-template-columns: 80% 20%;
	background-color: white;
	font-size: 25px;
	}
	
	#logged {
		text-align: right;
	}
	
	#cart {
		text-align: right;
	}
	
	.wrapper-blue {
	overflow: auto;
	padding-top: 20px;
	padding-bottom: 0px;
	}
	
	.grid-container-menu {
	display: grid;
	padding-left: 25%;
	padding-right: 25%;
	padding-top: 10px;
	padding-bottom: 10px;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	background-color: #0c394c;
	}
	
	.grid-container-menu > div {
	background-color: #0c394c;
	}

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

	.dropdown {
	position: relative;
	display: inline-block;
	z-index: 1;
	}
	
	.dropdown:hover .dropdown-content {display: inline-block;}

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

	.dropdown-content {
	display: none;
	position: relative;
	min-width: 160px;
	z-index: 1;
	}

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

	.dropdown-content a:hover {
	transition-duration: 0.5s;
	font-family: pop-black;
	color: #d68b20;
	}
	
	.menuitem {
	font-size: 16px;
	color: white;
	text-decoration: none;
	}
	
	.menuitem:hover {
	transition-duration: 0.2s;
	color: grey;
	}
	
	#menuright {
	text-align: right;
	}
	
	#menucenter {
	text-align: center;
	}
	
	#menuleft {
	text-align: left;
	}
	
	.bannercontainer {
	overflow: auto;
	padding-left: 25%;
	padding-right: 25%;
	background-image: url("../images/bannermetalurgica.jpg");
	height: 250px;
	}
	
	.grid-container-banner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	
	#bannermessage {
	text-align: right;
	color: white;
	font-size: 25px;
	padding-top: 15px;
	padding-right: 20px;
	}
	
	#bannermessage::before {content: "La clave para una superficie perfecta es la elección del abrasivo y proceso adecuado";}

	.grid-container-title {
	overflow: auto;
	padding-top: 15px;
	display: grid;
	grid-template-columns: 25% 75%;
	}
	
	.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-products {
	overflow: auto;
	padding-top: 15px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	
	.product-holder {
	display: grid;
	grid-template-columns: auto;
	padding: 5px;
	}
	
	.product-holder:hover {
	background-color: #d9d9d9;
	transition-duration: 0.2s;
	}
	
	.product-image {
	width: 100%;
	object-fit: contain;
	}
	
	.product-text {
	display: grid;
	grid-template-columns: auto;
	}

	}


body {
	overflow: auto;
}

.displaysymbolsearch {
	font-family: formsymbols;
	color: white;
}
.displaysymbolsearch::before {content: "\e910";}

.submitbutton::before {content: "\e910";}

.displaysymbollogged {
	font-family: formsymbols;
	color: black;
}
.displaysymbollogged::before {content: "\e900";}

.displaysymbolcart {
	font-family: formsymbols;
	color: black;
}
.displaysymbolcart::before {content: "\e90A";}
body {
	overflow: auto;
}