@charset "utf-8";

/*--------------------------------------------------------------------------------
 basic
--------------------------------------------------------------------------------*/
.flex-container {
  display: -webkit-flex; /* Safari */
  display: flex;
}

html,body{
	width: 100%;
	height: 100%;
	color:  #666;
	font-family: 'Noto Sans', sans-serif;
}
main{
	display: block;
}

body{
	padding-top: 50px;
}
a{
	color: #3385ad;
	text-decoration: none;
	-webkit-transition: 0.4s ease-in-out;
	   -moz-transition: 0.4s ease-in-out;
	     -o-transition: 0.4s ease-in-out;
	        transition: 0.4s ease-in-out;
}
a:hover{
	opacity: 0.6;
	filter: alpha(opacity=60);
}
img.loading {
	background-image: url(../images/loading.gif);
	background-repeat: no-repeat;
	background-position: center center;
}

#logo a:hover,
#navigation > ul > li a:hover{
	opacity: 1;
	filter: alpha(opacity=100);
}
#container{
	width: 1200px;
	margin: 0 auto;
	padding: 0 100px;

	-webkit-justify-content: space-between; /* Safari */
	justify-content:         space-between;
}
#main{
	width: 950px;
}
/*--------------------------------------------------------------------------------
header
--------------------------------------------------------------------------------*/
#header{
	width: 200px;
	text-align: center;
	position: relative;
}
#logo{
	margin-bottom: 40px;
}

#navigation > ul > li{
	margin-bottom: 10px;
}
#navigation > ul > li:first-of-type{
	margin-bottom: 26px;
}
#navigation > ul > .contact{
	margin-top: 26px;
	margin-bottom: 40px;
}
#navigation > ul > .twitter{
	margin-bottom: 20px;
}

#copyright{
	margin-top: 40px;
	font-size: 10px;
}
.fix-wrapper{
	position: fixed;
}

/*--------------------------------------------------------------------------------
footer
--------------------------------------------------------------------------------*/
#footer{
	margin-top: 40px;
	border-top: 1px solid #000;
	padding: 20px 30px 100px 0;
	text-align: right;
}



@media screen and (max-height: 760px) {

body{
	padding-top: 5vh;
}
	
#container{
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	padding: 0 1vw;
}
#main{
	max-width: 950px;
	width: 80%;
}
#header{
	max-width: 200px;
	width: 18%;
}
#logo{
	margin-bottom: 5vh;	
}
#logo img{
	max-width: 15vh;
}
#navigation > ul > li img{
	max-width: 12vh;
	max-height: 4vh;
}
#navigation > ul > .contact{
	margin-bottom: 4vh;
}
#navigation > ul > .twitter{
	margin-bottom: 3vh;
}
#navigation > ul > .twitter img{
	max-width: 8vh;
}
#copyright{
	margin-top: 4vh;
}
	
}