html, body { margin: 0; padding: 0; font-family: Roboto; font-weight: 300; min-height: 100%; color: #515151; font-size: 14px;
}

body {
	background-color: #1a140b;
	background-image: url('../img/background.jpg');
	background-repeat: no-repeat;
	background-position: center 20%;
	background-size: cover;
}

#container {
	margin: 0 auto;
	width: 75%;
	min-height: 100vh;
	box-shadow: 0 0 1vw rgba(0,0,0, 0.5);
}

#header {
	background-color: rgba(36,36,36, 0.8);
	width: 100%;
	height: 20vh;
	max-height: 20vw;
}

#certificate {
	position: absolute;
	margin: 2vh 3vh;
	width: 28vh;
	height: 22vh;
	max-height: 22vw;
	background-image: url('../img/certificate.png');
	background-repeat: no-repeat;
	background-size: contain;
	transform: rotate(-10deg);
	z-index: 1000;
}

#slider_content {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

#counter {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	font-weight: 300;
	font-size: 1.6vw;
}

.counter-item  {
	font-weight: normal;
	display: inline-block;
	padding: 0.2vw;
	height: 2vw;
	width: 1.3vw;
	text-align: center;
	background-color: #3e3e3e;
	color: #d1861c;
	font-size: 1.8vw;
	line-height: 2vw;
	margin-right: 0.3vw;
	box-shadow: inset 0 0 1vw #1e1e1e;
}

#counter span  {
	display: inline-block;
	color: #e7e4e4;
}

#main {
	padding-top: 30px;
	background-color: rgba(250,250,250, 0.92);
	width: 100%;
	min-height: 78vh;
}

#main h2 {
	margin: 0;
	padding: 0.8em;
	font-size: 2.2em;
	font-weight: 100;
	color: #212121;
	text-align: center;
}

#main h3 {
	margin: 0;
	padding: 1vw 5vw;
	font-size: 1.8em;
	font-weight: 100;
	color: #111111;
	text-align: left;
}

#main h3 span.step {
	height: 1.1em;
	width: 1.1em;
	line-height: 1.1em;
	display: inline-block;
	padding: 0.2em;
	margin-right: 1em;
	border: 1px solid #515151;
	border-radius: 50%;
	text-align: center;
	font-weight: 300;
}

#main p {
	padding: 0 5vw 1vw 5vw;
	font-size: 1.2vw;
	text-align: justify;
	line-height: 1.5;
}

#form {
	text-align: left;
	padding-bottom: 4vw;
}

#providers {
	margin: 0 auto;
	width: 90%;
}

#providers .provider {
	width: 23.3%;
	margin: 2% 5%;
	height: 7vw;
	float: left;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	cursor: pointer;
}

#providers .telekom {
	background-image: url('../img/telekom.png');
}

#providers .telekom-active {
	background-image: url('../img/telekom-hover.png');
}

#providers .telekom:hover {
	background-image: url('../img/telekom-hover.png');
}

#providers .telenor {
	background-image: url('../img/telenor.png');
}

#providers .telenor-active {
	background-image: url('../img/telenor-hover.png');
}

#providers .telenor:hover {
	background-image: url('../img/telenor-hover.png');
}

#providers .yettel {
	background-image: url('../img/yettel.png');
}

#providers .yettel-active {
	background-image: url('../img/yettel-hover.png');
}

#providers .yettel:hover {
	background-image: url('../img/yettel-hover.png');
}

#providers .one {
	background-image: url('../img/one.png');
}

#providers .one-active {
	background-image: url('../img/one-hover.png');
}

#providers .one:hover {
	background-image: url('../img/one-hover.png');
}

#products {
	width: 80%;
	margin: 2vw auto;
}

#blank_product {
	font-size: 1.5vw;
	padding: calc(0.5vw + 1px) 1.5vw;
}

.product {
	display: none;
}

.value {
	margin: 0 0.3vw;
	cursor: pointer;
	font-size: 1.5vw;
	padding: 0.5vw 1.5vw;
	border: 1px solid #ddd;
	background-color: #fff;
	box-shadow: 0 0 4vw rgba(0,0,0, 0.15);
	float: left;
}

.value:hover {
	border: 1px solid #d1861c;
	color: #fff;
	background-color: #d1861c;
}

.value-active {
    border: 1px solid #d1861c;
	color: #fff;
	background-color: #d1861c;
}

#contact {
	display: none;
	width: 85%;
	margin: 2vw auto;
}

#contact input[type=text], #contact input[type=tel] {
	border: 1px solid #ddd;
	font-family: Roboto;
	font-size: 1.5vw;
	padding: 0.5vw 1.5vw;
	margin: 0 2vw;
	margin-bottom: 1vw;
	font-weight: 300;
	color: #444;
	width: 29%;
}

#contact p {
	text-align: left;
	font-size: 1.2vw;
}

#order {
	display: none;
	width: 85%;
	margin: 0 auto;
}

button {
	position: relative;
	cursor: pointer;
	padding: 0.5vw 5vw;
	margin: 0 2vw;
	border: 1px solid #fff;
	background-color: #d1861c;
	font-size: 2vw;
	font-family: Roboto;
	font-weight: 300;
	letter-spacing: 1px;
	color: #fff;
	box-shadow: 0 0 4vw rgba(0,0,0, 0.15);
}

button::after {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

button::after {
  background: rgba(0, 0, 0, 0.09) none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  z-index: 1;
}

#contact p.emailinfo {
	text-align: left;
	padding-left: 2.2vw;
	margin-top: 0vw;
}

button:hover::after { width: 100% }

#order p {
	text-align: center;
	font-size: 1.2vw;
}

#order .link, #order a {
	color: #353535;
	font-weight: 400;
}

::-webkit-input-placeholder { /* Edge */
	font-weight: 300;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
	font-weight: 300;
}

::placeholder {
	font-weight: 300;
}

#showLbl {
	font-size: 1.2vw;
}

#showChk {
	margin-top: 1vw;
	margin-left: 2.2vw;
	margin-right: 1vw;
}

#footer {
	position: relative;
	background-color: rgba(36,36,36, 0.8);
	width: 100%;
	min-height: 22vh;
	max-height: 16vw;
	box-sizing: border-box;
	padding: 2vw 3vw;
	color: #eee;
}

#footer a {
	color: #eee;
}

#footer .column {
	width: 30%;
	float: left;
	font-size: 1.2vw;
	line-height: 1.8;
}

#footer .center img {
	width: 90%;
	margin: 0 auto;
}

#footer .copyright {
	font-size: 1vw;
	bottom: 1vw;
}

#footer .copyright p {
	margin: 0;
	text-align: center;
}

#footer .left {
	text-align: left;
}

#footer .center {
	text-align: center;
}

#footer .right {
	text-align: right;
}

.fs2 {
	font-size: 1.8vw;
}

.clear {
	clear: both;
}

.showcss{ display: block; }
.hidecss{ display: none !important; }

@media only screen and (max-width: 1150px) {
	#header {
		height: 22vh;
	}
	
	#main h2 {
		padding: 0.2em 0.6em;
	}
	
	#counter {
		font-size: 2.2vw;
		text-align: right;
		padding-right: 3%;
	}

	#main p {
		font-size: 2vw;
	}
	
	#contact input[type="text"], #contact input[type="tel"] {
		width: 50%;
		margin: 1vw 2vw;
	}

	#showLbl {
		font-size: 2vw;
	}
	
	.value {
		text-align: center;
		width: 20%;
		margin: 1.2vw 1vw;
	}
	
	#contact p.emailinfo {
		text-align: left;
		padding-left: 2.2vw;
	}

	#footer .column {
		font-size: 1.8vw;
	}
	
	#footer {
		min-height: 20vh;
		
	}
	
	.fs2 {
		font-size: 2.5vw;
	}
}

/*** MOBILE VIEW ***/
@media only screen and (max-width: 680px) {
	body {
		font-size: 12px;
	}

	#certificate {
		margin: 1.5vw 3vw;
	}

	#counter {
		font-size: 2.8vw;
	}
	
	#counter .counter-item {
		height: 3.2vw;
		width: 2vw;
		font-size: 2.8vw;
		line-height: 3.2vw;
		margin-right: 0.4vw;
	}
	
	#counter span {
		padding-left: 0.8vw;
	}

	#container {
		width: 100%;
		min-height: 100vh;
		box-shadow: none;
	}
	
	#main p {
		font-size: 2.8vw;
	}

	#main h3 {
		font-weight: 300;
		color: #717171;
	}

	#providers {
		width: 100%;
	}
	
	#providers .provider {
		width: 29.3%;
		margin: 2% 2%;
		height: 15vw;
	}
	
	#contact p.emailinfo {
		padding-left: 3.8vw;
	}

	#showLbl {
		font-size: 3.2vw;
	}
	
	#showChk {
		margin-top: 3vw;
		margin-left: 3.8vw;
		margin-right: 1.5vw;
	}
	
	.value {
		text-align: center;
		width: 25%;
		font-size: 3.2vw;
		margin: 1.5vw 1vw;
		padding: 1vw 1.5vw;
	}
	
	#contact input[type="text"], #contact input[type="tel"] {
		margin: 1.5vw 3.6vw;
		font-size: 3.2vw;
		padding: 1vw 1.5vw;
	}
	
	#order button {
		font-size: 3.4vw;
		padding: 1vw 6vw;
	}
	
	#footer .column {
		font-size: 2.5vw;
	}
	
	#footer .center img {
		width: 90%;
		margin: 0 auto;
	}
	
	#footer .copyright {
		font-size: 2vw;
	}
	
	.fs2 {
		font-size: 3vw;
	}
}