body{font-size: 14px; font-family: arial, verdana}
.wrapper{max-width:1200; min-width: 1080px; margin-left: 50px; margin-top: 50px}
.content{margin-left: 200px; float: left; width: 850px; font-size: 18px; line-height: 150%}
a{color: #000; text-decoration: none; font-weight: normal}
.navi {max-width: 120px; float: left; font-size: 14px; font-weight: bold; display:block; position: fixed;}
.navi ul{list-style:none; padding-left:0; line-height: 150%}
.navi-logo {font-size: 30px; line-height: 30px}
.the {font-size: 20px}
li.on{background-color: #000; color: #fff}

.content a{font-weight:bold}

li:hover{background-color: #000; color: #fff}
li a:hover{color: #fff}
li a{width:100%; display:block; padding:2px}
li.on a{color: #fff}

.c {font-size: 200px; font-weight: bold; padding-top: 390px; line-height: 100%} 
.t {font-size: 200px; font-weight: bold; padding-top: 390px; line-height: 100%} 
.w {font-size: 200px; font-weight: bold; padding-top: 390px; line-height: 100%} 

.leftwork {width: 380px; height:270px; float: left; margin-right: 40px; margin-bottom: 20px; font-size: 12px; font-weight: bold}
.rightwork {width: 380px; height:270px; float: left; margin-bottom: 20px; font-size: 12px; font-weight: bold}
.fullwork {width: 800px; height:450px; float: left; margin-bottom: 20px; font-size: 12px; font-weight: bold}


.leftwork img{width: 380px; height:214px; border: 1px solid #eee; margin-bottom:0px}
.rightwork img{width: 380px; height:214px; border: 1px solid #eee; margin-bottom:0px}
.fullwork img{width: 800px; height:405px; border: 1px solid #eee; margin-bottom:0px}

.navi-logo a{font-weight:bold}

.fullwork.half{width: 380px; height:270px; float: left; margin-right: 40px; margin-bottom: 20px; font-size: 12px; font-weight: bold}
.fullwork.half img{width: 380px; height:248px; border: 1px solid #eee; margin-bottom:10px}

#bar1{height:1px}
#bar2{height:1px}
#bar3{height:1px}

#bar1{background-color: black; height: 600px; width: 250px; color: #e7e700; float:left; margin-right: 20px; text-align: center; line-height: 100%; display:none}
#bar2{background-color: black; height: 600px; width: 250px; color: #bf00c1; float:left; margin-right: 20px; text-align: center; line-height: 100%; display:none}
#bar3{background-color: black; height: 600px; width: 250px; color: #fff; float:left; text-align: center; line-height: 100%; display:none}

#e1 {width: 28%; margin-right: 55px; float: left; margin-top: 65px; text-align: center; font-size: 16px}
#e2 {width: 28%; margin-right: 55px; float: left; margin-top: 65px; text-align: center; font-size: 16px}
#e3 {width: 28%; float: left; margin-top: 65px; text-align: center; font-size: 16px}

#e1 img{width: 90%; height: auto}
#e2 img{width: 90%; height: auto}
#e3 img{width: 90%; height: auto}

#mobmen{display:none}

.line{display:none}


@media screen and (max-width: 767px){
	
	.line{font-size: 18px; border-top: 3px solid #000; border-bottom: 3px solid #000; padding-top: 10px; padding-bottom: 10px; font-weight: bold; text-align: center; width: 100%; display: block; clear:both; margin-top: 0px; margin-bottom: 20px}	
.navi ul {display:none}	
.navi {margin-bottom: 20px; position: relative}
	.content{margin-left: 0px; float: left; width: 100%}
	.wrapper{max-width:1200; margin-left: 0px; margin-top: 20px; min-width: 200px; }
	.leftwork {width: 100%; float: left; height: auto;  margin-right: 40px; margin-bottom: 20px; font-size: 12px; font-weight: bold}
.rightwork {width: 100%; float: left; height: auto;  margin-bottom: 20px; font-size: 12px; font-weight: bold}
.fullwork {width: 100%; float: left; height: auto;  margin-bottom: 20px; font-size: 12px; font-weight: bold}

.leftwork img{width: 100%; height: auto; border: 1px solid #eee; margin-bottom:0px}
.rightwork img{width: 100%; height: auto; border: 1px solid #eee; margin-bottom:0px}
.fullwork img{width: 100%; height: auto; border: 1px solid #eee; margin-bottom:0px}

.fullwork.half{width: 100%; height: auto; border: 0px solid #eee; margin-bottom:0px}
.fullwork.half img{width: 100%; height: auto; border: 1px solid #eee; margin-bottom:0px}

#bar1{background-color: black; height: 450px; width: 31%; color: #e7e700; float:left; text-align: center; display:none; margin-right:3%}
#bar2{background-color: black; height: 450px; width: 31%; color: #bf00c1; float:left; text-align: center; display:none; margin-right:3%}
#bar3{background-color: black; height: 450px; width: 31%; color: #fff; float:left; text-align: center; display:none}

.c {font-size: 90px; font-weight: bold; padding-top: 350px} 
.t {font-size: 90px; font-weight: bold; padding-top: 350px} 
.w {font-size: 90px; font-weight: bold; padding-top: 350px} 

#e1 {width: 100%; margin-right: 55px; float: left; margin-top: 65px; text-align: center; font-size: 16px}
#e2 {width: 100%; margin-right: 55px; float: left; margin-top: 65px; text-align: center; font-size: 16px}
#e3 {width: 100%; float: left; margin-top: 65px; text-align: center; font-size: 16px; margin-bottom: 20px}

#e1 img{width: 60%; height: auto}
#e2 img{width: 60%; height: auto}
#e3 img{width: 60%; height: auto}

	#sidebar ul {display:none}
	#logo {margin-bottom: 0px; margin-left: -10px;}
	#content{display:block; height: auto !important; padding: 25px 0px 0px 0px !important; border: none !important}
	#mobmen{display:block;     margin-top: 5px;}
	
#mobilemen{display:block; margin-bottom: 20px; margin-top: 20px}
	#mobmen{float:right}

	
	h1{font-size: 22px; margin-top: 0px; line-height: 125%; font-weight: 900}

h2{font-size: 20px; line-height: 125%}

#actions{display:none}

#footer{text-align: center}

h5{font-size: 20px; line-height: 125%; text-transform:uppercase; margin:30px 0px 0px 0px}

	
	#menu-bar{display:none}
	
	#sidebar ul{padding-left:0px}
	
	ul {
		position: static;
		display: none;
	}
	/*Create vertical spacing*/
	li {
		margin-bottom: 1px;
	}
	/*Make all menu links full width*/
	ul li, li a {
		width: 100%;
	}
	/*Display 'show menu' link*/
	.show-menu {
		display:block;
	}
	
	
/*Strip the ul of padding and list styling*/
ul {
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
}

/*Create a horizontal list with spacing*/
li {
	display:inline-block;
	float: left;
	margin-right: 1px;
	margin-bottom: 0px;
}

/*Style for menu links*/
li a {
	display:block;
	min-width:140px;
	height: 50px;
	font-weight: bold;
	text-align: left;
	padding-left: 30px;
	line-height: 50px;
	font-family: Arial, sans-serif;
	color: #000;
	background: #fff;
	text-decoration: none;
	font-size: 16px;
}

/*Hover state for top level links*/
li:hover a {
	background: #000;
}

/*Style for dropdown links*/
li:hover ul a {
	background: #000;
	color: #fff;
	height: 40px;
	line-height: 40px;
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
	background: #000;
	color: #fff;
}

/*Hide dropdown links until they are needed*/
li ul {
	display: none;
}

/*Make dropdown links vertical*/
li ul li {
	display: block;
	float: none;
}

/*Prevent text wrapping*/
li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
	display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	font-family: Arial, sans-serif;
	text-decoration: none;
	font-weight: bold;
	color: #000;
	border: 3px solid #000;
	text-align: center;
	padding: 0px 0;
	padding-top: 5px;
    width: 40px;
    height: 30px;
    margin-top: 2px;
	z-index: 9999;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
    -webkit-appearance: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}

ul#menu {position: absolute; left:0px; background-color: #fff; border-top: 3px solid #000; margin-top: 35px; -webkit-box-shadow: 0px 11px 10px 0px rgba(0,0,0,0.38);
-moz-box-shadow: 0px 11px 10px 0px rgba(0,0,0,0.38);
box-shadow: 0px 11px 10px 0px rgba(0,0,0,0.38); z-index:9999}


/*Responsive Styles*/


	
}