/*

   mett.in

*/

@import url('reset.css');

html{/*5*/background: white;}

body {
   background: white;
   color: black;
   font-family: 'Spartan', sans-serif;
   font-size: 14px;
   font-weight: 400;
   /*-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;*/
}

a {
   color: black;
   -webkit-transition: 0.5s;
   -moz-transition: 0.5s;
   -o-transition: 0.5s;
   -ms-transition: 0.5s;
   transition: 0.5s;
}

strong {
   font-weight: 400;
}

i {
   font-style: italic;
}


.atmosphere {
   width: 100%;
   height: 100%;
   padding: 35px;
   float: left;
}

.container {
   width: 138px;
   height: 100%;
   float: left;
}

header {
   width: 100%;
   float: left;
   padding: 0 0 20px;

}

header .logo {
   width: 138px;
   height: 138px;
   float: left;
   -webkit-transition: 0.5s;
   -moz-transition: 0.5s;
   -o-transition: 0.5s;
   -ms-transition: 0.5s;
   transition: 0.5s;
   display: block;
}

header .logo a {
   width: 138px;
   height: 138px;
   float: left;
   background: #2a3035 url(../_img/blacklogo_metinkazan.jpg) no-repeat left top;
   background-size: 138px 138px;
    -webkit-transition: 0s;
   -moz-transition: 0s;
   -o-transition: 0s;
   -ms-transition: 0s;
   transition: 0s;
}

header .logo a:hover {
   width: 138px;
   height: 138px;
   float: left;
   background: #2a3035 url(../_img/logo-metin-hover.gif) no-repeat left top;
   background-size: 138px 138px;

}

header h1 {
   width: 100%;
   float: left;
   padding: 30px 0 5px 0;
   font-size: 16px;
   font-weight: 700;
   cursor: none;
}

header i {
   font-size: 11px;
   font-style: normal;
   cursor: none;
}

section.content {
   width: 100%;
   float: left;
   padding: 20px 0;
}

section.content a {
   width: 100%;
   float: left;
   padding: 6px 0;
}

section.content a:hover {
   opacity: 0.3;
}

footer {
   width: 100%;
   float: left;
   font-size: 8px;
   line-height: 14px;
   padding: 20px 0;
}

footer .copyright {
   width: 100%;
   float: left;
}

.none {
   display: none;
}


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

   .container {
      width: 100%;
      text-align: center;
      position: relative;
   }

   header .logo {
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -69px;
   }

   header h1 {
      margin-top: 140px;
   }

   .atmosphere {
      padding: 65px 0 0 0;
   }
   
   section.content a {
	   padding: 10px 0;
   }

}



/*  ==============      DarkMod      ==============  */

@media (prefers-color-scheme: dark) {

	html,
	body {
		background: black;
		color: white;
	}
	
	a {
		color: white;
	}

	header .logo a {
		background: white;
	}


}