@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;400;700;800&display=swap");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

/* css reset */

abbr,article,aside,audio,blockquote,body,code,div,em,fieldset,footer,form,h1,h2,h3,h4,h5,h6,header,html,iframe,img,label,legend,li,nav,object,ol,p,pre,section,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,video{margin:0;padding:0;border:0;font-size:100%;font-weight:inherit;vertical-align:baseline;background:0 0}input[type=checkbox],th{vertical-align:middle}article,aside,figure,footer,header,nav,section{display:block}html{box-sizing:border-box;}*,:after,:before{box-sizing:inherit}img,object{max-width:100%}ul{list-style:none}table{border-collapse:collapse;border-spacing:0}th{font-weight:700}td{font-weight:400;vertical-align:top}input,select{vertical-align:middle}input[type=radio]{vertical-align:middle}strong{font-weight:700}button,input[type=file],label{cursor:pointer}button,input,select,textarea{margin:0;border:0}button::-moz-focus-inner{padding:0;border:0}


body {
	margin:0;
	font-family:Roboto, sans-serif;
	overflow-x:hidden;
}

a {
	text-decoration:none;
}

header {
	box-sizing:border-box;
	background-color:#fff;
	color:#fff;
	padding:0 calc(50% - 600px);
	display:flex;
	justify-content:space-between;
	width:100%;
	align-items:center;
	z-index:10;
}

.hLogo {
	width:300px;
}

.hMenu {
	display:block;
}

.hMenu > ul {
	display:flex;
	justify-content:space-between;
	padding:0;
}

.hMenu a:link, .hMenu a:visited {
	color:#777;
	font-size:1.2rem;
	padding:12px;
}

.hMenu a:hover, .hMenu a:active {
	background-color:#ddd;
}

.hContactNum {
	width:200px;
	background-color:#000;
	position:relative;
	padding:35px;
}

.hContactNum a {
	top: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	left: 50%;
	color: #fff;
	font-weight:bold;
	font-size:1.3rem;
}

.telicon {
	padding:20px;
	background-color:#53b4b8;
	color:#fff;
	display:none;
}

.carousel {
	position:relative;
	height:450px;
}

.carouselImage {
	height:100%;
	position:relative;
}

.carouselImage img {
	display:block;
	margin-left:auto;
	margin-right:auto;
	width:100%;
  height:100%; 
	object-fit:cover; 
}

section {
	padding:30px calc(50% - 600px);
}

section table {
	width:100%;
	margin:20px 0 20px 0;
}

section td {
	border:1px solid grey;
	padding:10px;
}

section th {
	border:1px solid grey;
	padding:10px;
	background-color:#f4f4f4;
	width:50%;
}

.explic {
	font-size:0.9rem;
	color:#777;
	display:block;
}

form {
	background-color:#4a4a4a;
	padding:20px;
	text-align:left;
	width:100%;
	margin:30px 0 30px 0;
}

section form p {
	font-size:1em;
	margin:0;
}

form button {
	padding:10px;
	background-color:#5fe3ea;
	text-transform:uppercase;
	font-size:0.9em;
	font-weight:bold;
	padding:10px 25px;
	display:block;
	margin:0 auto;
}

label {
	display:block;
	color:#5fe3ea;
	margin:10px 0 5px 0;
	font-weight:bold;
}

form h2 {
	margin:0 auto 20px auto;
	color:#5fe3ea;
}

input, select {
	-webkit-appearance: none;
	border:1px solid #ddd;
	padding:10px;
	display:block;
	margin:3px auto 20px auto;
	width:100%;
	font-size:1rem;
}

form span {
	font-weight:bold;
}

.alb {
	color:#fff;
}

.galben {
	color:#eadb5f;
}



.garantat {
	width:100px;
	margin-bottom:10px;
}

.cta {
	padding:10px 30px;
	background-color:#53b4b8;
	color:#fff;
	display:inline-block;
	margin:10px 0;
	border-radius:7px;
	font-weight:bold;
	font-size:1.2em;
}

.cta:hover {
	text-decoration:underline;
}

.pills {
	display:flex;
	flex-direction:row;
	justify-content:space-between;
}

.pills div {
	width:25%;
	box-sizing:border-box;
	display:flex;
	flex-flow:column;
	padding:10px;
}

.pills .material-icons {
	font-size:60px;
	color:#53b4b8;
}

.pills div span:nth-of-type(1) {
	font-weight:bold;
	text-transform:uppercase;
	margin:10px 0;
}

.pills div span:nth-of-type(2) {
	font-weight:normal;
	text-transform:none;
}

.hero-text {
	background-color:#53b4b8;
	color:#fff;
	padding:20px calc(50% - 600px);
	text-align:left;
}

.blight {
	background-color:#ececec;
}

.negru {
	color:#000;
}

figure {
	margin:20px;
}

blockquote {
	font-size:1.3em;
	color:#777;
	font-style:italic;
}

cite {
	margin-top:10px;
	display:inline-block;
	font-size:1rem;
}

.centru {
	text-align:center;
}

.stanga {
	text-align:left;
}

h1 {
	font-family:Manrope, Roboto, sans-serif;
	font-size:2.2rem;
	font-weight:700;
	line-height:1.1em;
}

h2 {
	font-family:Manrope, Roboto, sans-serif;
	font-size:1.7rem;
	font-weight:800;
	line-height:1.1em;
	color:#53b4b8;
	margin-top:10px;
}

h3 {
	font-family:Manrope, Roboto, sans-serif;
	font-size:1.5rem;
	font-weight:800;
	line-height:1.1em;
	color:#53b4b8;
	margin-top:10px;
}

.promo {
	padding:30px;
	background-color:#70bee4;
	color:#fff;
	margin:20px auto;
}

.price {
	font-size:2em;
	font-weight:bold;
}

.priceold {
	text-decoration: line-through;
	text-decoration-thickness:3px;
	opacity:0.5;
}


.titlu-margine-sus h2 {
	margin-top:30px;
}

.hero-text p {
	font-size:1.3em;
	margin-top:10px;
}

section p {
	font-size:1.1em;
	line-height:1.4em;
	margin-top:10px;
}

footer {
	text-align:left;
}

.foot {
	 background-color:#000; 
	 overflow:hidden; 
	 padding:30px calc(50% - 600px);
}

#hamburger {
	color:#777;
	padding:18px;
	display:none;
}

.dreapta {
	display:flex;
	justify-content:flex-end;
	position:relative;
}

.closebtn {
	display:none;
}

.jos {
	text-align:left;
	width:25%;
	float:left;
}

.jos a:link, .jos a:visited {
	text-decoration:none;
	color:#aaa;
	display:block;
	margin-bottom:12px;
}

.jos a:hover, .jos a:active {
	color:#fff;
}

.w33 {
	overflow:hidden;
	
}
.w33 div {
	padding:30px calc(50% - 600px);
	width:33%;
	float:left;
}

#logojos {
	width:250px;
}

/* Ecrane mici */

@media screen and (max-width:1200px) {
	section, .hero-text {
		padding-left:20px;
		padding-right:20px;
	}
}

@media screen and (max-width:800px) {
	
	.hMenu {
		display:none;
		position:fixed;
		height:100%;
		width:100%;
		top:0;
		left:0;
		overflow-x:hidden;
		background-color:#fff;
		z-index:1;
		padding-top:60px;
	}

	.hMenu ul {
		flex-direction:column;
	}
	
	.hMenu ul li {
		margin-top:25px;
	}
	
	.hMenu a:link, .hMenu a:visited {
		font-size:1.5rem;
	}
	
	.hMenu a.closebtn {
		display:block;
		position: absolute;
		top: 0;
		right:10px;
		font-size:35px;
	}
	
	.carousel {
		height:250px;
	}
	
	.hLogo {
		margin-top:5px;
	}
	
	.hero-text {
		padding:20px;
	}
	
	header {
		position:fixed;
		top:0;
	}
	
	main {
		margin-top:64px;
	}
	
	.pills {
		flex-wrap:wrap;
	}
	
	.pills div {
		width:50%;
	}
	
	section table {
		margin:20px auto;
	}
	
	.garantat {
		width:50%;
	}
	
	form {
		position:relative;
		margin:20px auto;
	}
	
	#comanda {
		display:block;
		position:relative;
		top:-100px;
		margin:0;
	}
	
	.hContactNum {
		display:none;
	}
	
	.telicon {
		display:block;
	}
	
	#hamburger {
		display:block;
	}
	
	.foot {
		padding:30px 20px;
	}
	
	#logojos {
		width:100px;
	}
}

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

.jos {
	width:50%;
}

.w33 div {
	width:100%;
}
}