body { 
  margin:0;
  font-family: 'Work Sans', sans-serif;
}

h1{
	font-size: 5rem;
}

a{
	color: rgba(13,91,130,1);
}

a:hover{
	color: #169fc7;
}

.mb-30{
	margin-bottom: 30px;
}

.navbar-light.bg-light {
    background-color: #fff !important;
	border-bottom: 8px solid rgba(13,91,130,1);/*#169fc7*/
	padding: 0.5rem 0;
}

.lead{
	background-color: rgba(13,91,130,1);
	padding: 8px;
	margin: 0;
}

.mometal{
	border-bottom: 1px solid #f5f5f5;
}


.vid-cont{
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%; 
	overflow: hidden;
}

.vid{
	  min-width: 100%; 
	  min-height: 100%; 
	  width: auto;
	  height: auto;
	  position: fixed;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%,-50%);
	  background-size: cover;
	  background-position: 50% 50%;	  
}

.navbar-light .navbar-nav .nav-link {
	transition: letter-spacing 0.5s;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 0.2rem;
}

.navbar-light .navbar-nav  .nav-item {
	padding-left: 0.4rem;
	padding-right: 0.4rem;	
}

.navbar-light .navbar-nav   .nav-item  .nav-link{
	text-decoration: none;
	text-transform: uppercase;
	transition: color linear 0.3s, letter-spacing 0.5s;
	-webkit-transition: color linear 0.3s, letter-spacing 0.5s;
	font-weight: 600;
	color: rgba(0,0,0,0.7);
}

.navbar-light .navbar-nav .nav-item:last-child .nav-link{
	/*text-transform: lowercase;
	font-weight: 400;	*/
}

.navbar-light .navbar-nav .nav-link:hover{
	color: rgba(15,109,156,1);
	letter-spacing: 1px;	
	border-bottom: 3px solid rgba(15,109,156,1);
}

.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show>.nav-link{
	color: rgba(0,0,0,0.7);
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
    color: rgba(15,109,156,1);
}

.navbar-brand .fa-facebook{
	color: rgba(0,0,0,0.7);/*#169fc7;*/
	font-size: 1.8em;
	transition: color linear 0.3s;
	-webkit-transition: color linear 0.3s;
}

.navbar-brand .fa-facebook:hover{
	color: #aaa/*rgba(0,0,0,.7);*/
}
.navbar-face {
    font-size: 0.7rem;
}

.mometal-text{
	position: relative;
	top: 10%;
	font-size: 5rem;
	text-align: center;
}

.mometal-logo {
    position: absolute;
    width: 100%;
    text-align: center;
	font-size: 600%;
	z-index: 500;
	color: #fff;
	padding-top: 8%;
}

section{
	width: 100%;
	position: relative;
	padding-top: 5rem;
	padding-bottom: 5rem;
	text-align: center;
}

.sec-about{
	background-color: #f5f5f5;
	color: #777;
	box-shadow: -20px -20px 30px rgba(0, 0, 0, 0.2);
}

.sec-product,
.sec-gep{
	background-color: #f5f5f5;
	color: #777;
	box-shadow: -20px -20px 30px rgba(0, 0, 0, 0.2);
}

.sec-about  h1,
.sec-product h1,
.sec-gep h1,
.sec-tanu h1{	
	font-weight: 400;
	color: #222;
	
}

.sec-about  h1{
	padding-bottom: 3rem;
}

.sec-about  h1 > span,
.sec-product  h1 > span,
.sec-gep h1 > span,
.sec-tanu h1 > span{
    font-weight: 600;
    color: #169fc7;    
    font-size: 6rem;   
}

.sec-about p{
	text-align: justify;
}

.sec-product  h1 > span,
.sec-tanu h1 > span{
	margin-right: -10px;
}

.sec-mometal{
	background: rgba(15,109,156,1);	
}
.sec-mometal> img{
	max-width: 100%;
	opacity: 0.15;
}

.sec-tanu{
	background-color: #fff;
	color: #777;
}

.sec-tanu.tanus-hun{
	padding-top: 180px;

}

.sec-tanu.tanus-hun > figure{
	top: 150px;
}

.sec-map{
	padding-bottom: 0;
	background-color: rgba(15,109,156,1);
	position: relative;
}

.sec-map h1{
	color: white;
	padding-bottom: 2rem;
}

.sec-map h2{
	font-size: 3rem;
}

.sec-map h4, .sec-map h4 > a{
	font-weight: 600;
	color: white;
	margin-bottom: 1rem;
	text-decoration: none;
}

.sec-map h4 > a{
	transition: text-shadow linear 0.3s;
	-webkit-transition: text-shadow linear 0.3s;;
}

.sec-map h4 > a:hover{
	text-shadow: 1px 2px 2px rgba(0,0,0,0.4);
}

.sec-map h4:nth-of-type(1){
	font-weight: 900;
	color: #222;
	margin-bottom: 2rem;
	margin-top: 2rem;
}

.sec-map  h1 > span{
    font-weight: 600;
    color: #222;    
    font-size: 6rem;   
}

.sec-map h4:last-child{
	margin-bottom: 6rem;
}

.fixed-point{
	position: relative;
	height: 800px;
}
.fixed-product{
	background: url(../kepek/Tomi_387B6137_k.jpg) no-repeat 50% 50% fixed;
	background-size: cover;
}

.fixed-gep{
	background: url(../kepek/citizen_k.jpg) no-repeat 50% 50% fixed;
	background-size: cover;
}

.products{
	padding-top: 5rem;
	padding-bottom: 2rem;
}

	
.product{
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
	border: 1px solid #fff;
	position: relative;
	transition: box-shadow linear 0.5s;
	-webkit-transition: box-shadow linear 0.5s;
	height: 100%;
	background-color: #EEE;
}

.product:hover{
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
	-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
}

.product-icon{
	display: inline-block;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background-color: #F5F5F5;
	margin: 2rem auto 0;
	box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
	position: relative;
	transition: transform ease 0.4s;
	-webkit-transition: 0.5s transform ease 0.4s;
}


.rez-icon::before,
.acel-icon::before,
.alu-icon::before,
.mua-icon::before{
	content: "";
	display: inline-block;
	width: 120px;
	height: 120px;
	position: absolute;
	top: 0;
	left: 0;	
	background-repeat: no-repeat;
	background-position: 50% 50%;	
	transition: background-image ease-in-out 0.5s, transform linear 0.5s;
	-webkit-transition: background-image ease-in-out, 0.5s transform linear 0.5s;	
}


.rez-icon::before{
	background-image: url(../kepek/srez_termek.png);	
	background-size: 100% auto;
}

.acel-icon::before{
	background-image: url(../kepek/acel_termek.png);	
	background-size: 100% auto;
}

.alu-icon::before{
	background-image: url(../kepek/alu_termek.png);
	background-size: 100% auto;
}
.mua-icon::before{
	background-image: url(../kepek/mua_termek.png);
	background-size: 100% auto;
}

.product-gallery:hover .product-icon{
	transform: scale(1.3);
}

.product-gallery:hover{
	text-decoration: none;
}

.product > h3{
	text-transform: uppercase;
	color: #777;
	font-size: 1.2rem;
	padding: 2rem;
	font-weight: 600;
	margin-bottom: 3rem;
	text-decoration: none;
}

.product-more {
   
    background-color: rgba(15,109,156,1);
    position: absolute;
    bottom: 0;
    width: 100%;
    margin-bottom: 0;
	opacity: 0;
	transition: opacity ease-in-out 0.5s;
	-webkit-transition: opacity ease-in-out 0.5s;
	color: /*rgb(218,234,238)*/#222;
	font-size: 1.25rem;
	font-weight: 900;
	text-decoration: none;
	text-shadow: -1px -1px 1px rgba(255,255,255,0.5);
	display: block;
	 padding: 1rem 0;
}

.product-gallery:hover .product-more{
	opacity: 1;
}

.tanu-cont{
	border-radius: 50%;	
	background-color: #3a3a3a;
	width: 250px;
	height: 250px;
	position: relative;
	display: block;
	margin: 3rem auto auto;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
	transition: box-shadow 0.5s ease;
	-webkit-transition: -webkit-box-shadow ease-in-out 0.5s;
}
.tanu-link:hover .tanu-cont{
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
}

.tanu-ev{
	vertical-align: middle;
	display: table-cell;
	text-align: center;
	width: 250px;
	height: 250px;
}

.tanu-ev > h3{
	color: #169fc7;
	font-size: 4rem;
	font-weight: 900;
	text-decoration: none;	
}

.tanu-link{
	cursor: pointer;
}

.tanu-link,
.tanu-link:hover,
.tanu-link .tanu-cont .tanu-ev h3,
.tanu-link:hover .tanu-cont .tanu-ev h3{
	text-decoration: none;
}

.tanu-link .tanu-cont .tanu-ev > h3{
	transition: transform 1s ease;	
}

.tanu-link:hover .tanu-cont .tanu-ev > h3{
	transform: translateY(-50%);
}

.tanu-download{
	transform: translateY(-300%) rotate(180deg);
	font-size: 3rem;
	opacity: 0;
	color: white;
	transition: transform 1s linear, opacity 1s ease;
	-webkit-transition: transform 1s linear, opacity 1s ease;
}

.tanu-link:hover .tanu-cont .tanu-download{
	transform: translateY(-110%) rotate(180deg);
	opacity: 1;
}

[class*="tanus-cont"]{
	padding: 2rem 0 0 0;
}

[class*="tanus-cont"] a img{
	border: 5px solid #f5f5f5;
    outline: 2px solid #ddd;
    margin: 0.5rem;
	transition: border-color 1s ease;
	-webkit-transition:  border-color 1s ease;
}

[class*="tanus-cont"] a:hover img{
	border-color: #ccc;
}

.controls{
	position: absolute;
	bottom: 50px;
	right: 50px;	
}

.controls > div{
	display: inline-block;
	margin: 0 0.5rem;
	cursor: pointer;
}

.controls > div > i{
	background-color: rgba(255,255,255,0.7);
	border-radius: 50%;
	padding: 1rem;
	color: rgba(15,109,156,1);
	transition: color linear 0.3s, transform linear 0.3s;
	border: 1px solid rgba(15,109,156,0.7);
}

.controls > div:hover > i{
	background-color: rgba(255,255,255,1);
	-ms-transform: scale(1.2, 1.2); 
	-webkit-transform: scale(1.2, 1.2);
	transform: scale(1.2, 1.2);
}
.iso{
	float: left;
	margin: 0 1rem 0 0;
	border: 5px solid #ddd;
}

.iso img{
	border: 1px solid rgba(15,109,156,0.7);
	transition: border linear 0.3s;
	-webkit-transition: border linear 0.3s;
}

.iso a:hover img{
	border: 1px solid rgba(15,109,156,1);
}
.table-gep{
	margin-top: 4rem;
	text-align: left;
}

.table-gep td{
	vertical-align: middle;
	color: #555;
}

.table-gep > tbody > tr > td:nth-of-type(3){
	text-align: center;
}

.table .thead-dark th {
    color: #fff;
    background-color: rgba(15,109,156,1);
    border-color: rgba(13,91,130,1);
	width: 25%;
}



/*ikonok*/
@font-face {
  font-family: 'mm-icons';
  src: url('../font/mm-icons.eot?55533317');
  src: url('../font/mm-icons.eot?55533317#iefix') format('embedded-opentype'),
       url('../font/mm-icons.woff2?55533317') format('woff2'),
       url('../font/mm-icons.woff?55533317') format('woff'),
       url('../font/mm-icons.ttf?55533317') format('truetype'),
       url('../font/mm-icons.svg?55533317#mm-icons') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'mm-icons';
    src: url('../font/mm-icons.svg?55533317#mm-icons') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "mm-icons";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-location:before { content: '\e800'; } /* '' */
.icon-dropbox:before { content: '\e801'; } /* '' */
.icon-cog:before { content: '\e802'; } /* '' */
.icon-award:before { content: '\e803'; } /* '' */
.icon-home:before { content: '\e804'; } /* '' */
.icon-resize-full:before { content: '\e805'; } /* '' */
.icon-mobile:before { content: '\e806'; } /* '' */
.icon-phone:before { content: '\e807'; } /* '' */
.icon-up-open-1:before { content: '\f005'; } /* '' */
.icon-mic:before { content: '\f130'; } /* '' */
.icon-envelope-open:before { content: '\f2b6'; } /* '' */

.icon-mic,
.icon-dropbox,
.icon-cog,
.icon-award,
figure.icon-location{
	font-size: 10rem;
	position: absolute;
	top: 20px;
	left: 0;
	color: rgba(0,0,0,0.045);
	margin: 0;
}

figure.icon-location{
	color: rgba(255,255,255,0.15);
}

footer{
	background-color: #222;
	color: #777;
	padding: 100px 2rem;
	position: relative;
	/*z-index: 0;
	bottom: 0px;
	left: 0px;
	right: 0px;*/
	backface-visibility: hidden;
}



@media (min-width: 576px) and (max-width: 767.98px){
	/*[class^="icon-"], [class*=" icon-"]{
		font-size: 10rem;
		position: absolute;
		top: 3rem;
		left: 0;
		color: rgba(0,0,0,0.045);
		margin: 0;
	}*/
	section{
		padding-top: 2rem;
	}
	.sec-about  h1,
	.sec-product h1,
	.sec-gep h1,
	.sec-tanu h1,
	.sec-map h1{
		white-space: nowrap;
		font-size: 3rem;
	}
	.sec-about  h1 > span,
	.sec-product h1 > span,
	.sec-gep h1 > span,
	.sec-tanu h1 > span,
	.sec-map h1 > span{		
		font-size: 4rem;   
	}	
	.sec-map h2 {
		font-size: 2.5rem;
	}
	.sec-map h4{
		font-size: 2rem;
	}
	.product-more{
		opacity: 1;
		transition: none;
		-webkit-transition: none;
	}
	.header,
	.fixed{
		position: relative;
	}
	
}

@media (max-width: 577.98px){
	/*[class^="icon-"], [class*=" icon-"]{
		font-size: 10rem;
		position: absolute;
		top: 4rem;
		left: 0;
		color: rgba(0,0,0,0.045);
		margin: 0;
	}*/
	section{
		padding-top: 2rem;
	}
	.sec-about  h1,
	.sec-product h1,
	.sec-gep h1,
	.sec-tanu h1,
	.sec-map h1{
		white-space: nowrap;
		font-size: 2.2rem;
	}
	.sec-about  h1 > span,
	.sec-product h1 > span,
	.sec-gep h1 > span,
	.sec-tanu h1 > span,
	.sec-map h1 > span{		
		font-size: 3.5rem;   
	}	
	.sec-map h2 {
		font-size: 2rem;
	}
	.sec-map h4{
		font-size: 1.2rem;
	}
	
	.products{
		padding-top: 2rem;
	}
	.product-more{
		opacity: 1;
		transition: none;
		-webkit-transition: none;
	}
	.header,
	.fixed{
		position: relative;
	}
	.table-gep {
		margin-top: 2rem;
	}
	
	.sec-tanu .products{
		padding-top: 0;
	}
	.sec-gep{
		box-shadow: none;
		-webkit-box-shadow: none;
		border-top: 3px solid rgba(15,109,156,1); 
		background-color: #eee;
	}
}