@import url(http://fonts.googleapis.com/css?family=Ovo);

@font-face {
	font-family: 'Franchise';
	src: url('../fonts/Franchise.eot');
	src: local('☺'), url('../fonts/Franchise.woff') format('woff'), url('../fonts/Franchise.ttf') format('truetype'), url('../fonts/Franchise.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'OLD';
	src: url('../fonts/OLD.eot');
	src: local('☺'), url('../fonts/OLD.woff') format('woff'), url('../fonts/OLD.ttf') format('truetype'), url('../fonts/OLD.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
/*----------------------------------------  BLOCKS */
@media screen and (max-device-width: 480px){
body{
  -webkit-text-size-adjust:none;

}
}
#intro-text h1{
display:inline;
font-size:1em;
color: #969696;
font-family: "OLD",Georgia,serif;
font-size: 0.96em;
letter-spacing: -0.5px;
text-decoration: none;
font-weight:normal;
}
#intro-text p{
display:inline;
}
.fb-like{
margin-top:4%;
} 
.scroll-down{
    position:absolute;
	bottom:100px; 
	left:50%; 
	margin-left:-165px; 
	z-index:600;  
	text-align:center;
    opacity: 0;
    height:161px;
    width:277px;
	
}
#page{
width:100%;
    overflow-y:hidden;
}
#fullscren, #fullscren_content, #fullscreen_prev,#fullscreen_next, #fullscreen_close, #fullscreen img{
        -moz-user-select: none; 
        -khtml-user-select: none; 
        -webkit-user-select: none; 
        -o-user-select: none; 
}

#preloader{
	
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-16px;
	margin-top:-16px;
	
	}


#fullscreen{
position:absolute;
height:100%;
width:100%;
opacity:0;
z-index: 10000;
background-color:#ffffff;
text-align:center;
overflow:hidden;
display:none;
}
.fbFeedbackContent .composer {
background-color:#ffffff;
}
#fullscreen_content{
	margin:auto;
	position:absolute;
	left:50%;
	top:50%;
}
#fullscreen img{
	margin:auto;
	position:absolute;
	left:50%;
	top:50%;
}
#fullscreen_prev{
	position:absolute;
	width:50%;
	top:0;
	left:0;
	height:100%;
	z-index: 10001;
}
#fullscreen_next{
	position:absolute;
	width:50%;
	top:0;
	right:0;
	height:100%;
	z-index: 10001;
}

#fullscreen_close{
	position:absolute;
	left:50%;
	top:50%;
		z-index: 10002;
}
html, 
html, body{
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}
#facebookLikeButton{

display:block;
}
.box_right{
float:left;
margin: 7% 0 0 0;
}
.box_left{
margin-right:10%;
float:left;
overflow:hidden;
}

.soundcld{
	
	margin-top:0%;
	
	}

	
#container{
width:100%;
margin: 0 auto;
}
#container .photo {
 	
  width: 32.4%;
  margin: 10px;
  float: left;
}

.photo{
	cursor: pointer;
	
	}


#fullscreen_outside{
	
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	
	
	}


#container .photo img {
  display: block;
  width: 100%;
}


          #background-container{
               left: 0;
               top: 0;
               position:absolute;
               overflow:hidden;
               z-Index: -9999
          }
          #background{
               position:absolute
          }


#logo {
	position: absolute;

	top: 50%;
	left: 50%;
	display:none;

}
#submit a,.button a{
margin:20px auto;
background-color:#e44430; 
font-size:0.8em;
width:100px;
white-space: nowrap;
color: #fff;
padding: 4px 12px 6px 12px;
text-decoration: none;
-moz-border-radius: 3px;
border-radius: 3px;
font-family: "OLD", Georgia, serif; 
letter-spacing:-0.5px;
text-decoration:none;
}
.nlError{
color:#e44430;
border: 1px solid #e44430;
}
#submit a:hover, .button a:hover{
color:#e44430;

background-color: #fff;
}
.read-more a,.read-less a{
margin:20px auto;
display:block;
background-color:#e44430; font-size:0.8em;
width:100px;
white-space: nowrap;
color: #fff;
padding: 1px 6px 3px 6px;
text-decoration: none;
-moz-border-radius: 3px;
border-radius: 3px;
font-family: "OLD", Georgia, serif; 
letter-spacing:-0.5px;
text-decoration:none;
}
.read-less a{
background-color:#ffffff;
color:#e44430;
}
body{
	background-color:#fff;
	height:100%;
	 font: 12px/1.8 sans-serif;
}

.sample-button a{
margin:20px auto;
display:block;
background-color:#00B9CA; font-size:0.8em;
width:100px;
white-space: nowrap;
color: #fff;
padding: 1px 6px 3px 6px;
text-decoration: none;
-moz-border-radius: 3px;
border-radius: 3px;
font-family: "OLD", Georgia, serif; 
letter-spacing:-0.5px;
text-decoration:none;
}

.item-2button {
position: relative;
left: 33px;
}

.sample-buttonS {
float: left;
position: relative;
padding-right: 10px;
}

.sample-buttonS a{
margin:20px auto;
display:block;
background-color:#00B9CA; font-size:0.8em;
width:60px;
white-space: nowrap;
color: #fff;
padding: 1px 6px 3px 6px;
text-decoration: none;
-moz-border-radius: 3px;
border-radius: 3px;
font-family: "OLD", Georgia, serif; 
letter-spacing:-0.5px;
text-decoration:none;
}



#maincontent {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	width: 100%;
	font-family: "Times New Roman", Times, serif;
	

	
	/*
	
	background: rgb(255,255,255);

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZWVlZWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(238,238,238,1)));

background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);

background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);

background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);

background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );

*/
	font-size:18px;
	
	}
#mainbg-content{
	margin-top:17%;
}
	
#mainbg{
	
	background-image:url('../images/grey_jean.png');
position: absolute;
    top: 0;
    width: 100%;
    z-index: -10;
	opacity:0;

	}	
#mainbg-content{
	
	z-index:10;
	
	}		

.box{
	width: 70%;
	margin-left:15%;
	position:relative;
	
	
	
	
	
	}
	
/* DEFAULTS */

::selection {
	background: #00B9CA;
	color:#FFF; 
	}
::-moz-selection {
	background: #00B9CA; 
	color:#FFF;
}

hr {
	
  border:0;	
  width:100%; 
  height:1px; 
  color:#e6e6e6;
  background-color:#e6e6e6;

}

.franchise{
	
	font-family: "Franchise", Georgia, serif;
	font-size: 2em;
	font-weight:lighter;
	line-height: 1em;
	color: #767676;
	text-transform:uppercase;
	margin-top: 0;
	
	}
	
.Ovo{
	
	font-size: 2.3em;
	font-weight:100;
	line-height: 1em;
	color: #333;
	text-transform:uppercase;
	margin-top: 0;
/*	font-family: 'Ovo', serif;
*/	}
	
	
.old, input{
	
	font-family: "OLD", Georgia, serif; 
	font-size: 0.77em;
	letter-spacing:-0.5px;
	color: #333; 
	text-decoration:none;
	
	}
	
a.redlink:link{
	
	text-decoration:none;
	color:#e44430;
	
	}	
	
a.redlink:visited{
	
	text-decoration:none;
	color:#e44430;
	
	}	
	
a.redlink:hover{
	
	text-decoration:underline;
	}
	
a.whitelink:link{
	
	text-decoration:none;
	color:#fff;
	
	}	
	
a.whitelink:visited{
	
	text-decoration:none;
	color:#fff;
	
	}	
	
a.whitelink:hover{
	
	text-decoration:underline;
	}
	
	
.floatleft{
	
	float:left;
	}

.clearfix:after {
    display: block;
    clear: both;
    height: 0px;
    line-height: 0px;
    visibility: hidden;
    content: ".";
}
.clearfix {
    display: block; /* for IE8 */
}
.clear {
    clear: both;
}

	
/* THE "F%!K YEAH, WHITESPACES" INTRO */
	
	
.intro{
	 
	
	
	}
	
.start{
	
	margin-top:5.4%;
	margin-bottom:15%;
	width:70%;
	text-align:justify;

	}
	
	
/* DAMN, THAT'S WHAT I CALL A PHOTOGALLERY */

ul#navlist
{
	
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

#fullscreen_close 
{
display: inline;
list-style-type: none;
	text-transform:uppercase;

}

}

.active{
width:100%;
white-space: nowrap;
	color: #fff;
	padding: 1px 6px 3px 6px;
background-color: #e44430;
text-decoration: none;

-moz-border-radius: 3px;
border-radius: 3px;
	}

	
.list_carousel{
position:relative;
}
.gallery{
margin-top:18%;
}
	
span.roll {

/*background-image:url(../images/imagehover.png);
background-repeat:repeat;*/
   width:100%;
   height:100%;

    position: absolute;

 text-align:center;


    z-index: 100;   

}

.roll .button{
position:relative;top:50%;
 font-size:1.6em;
 font-weight:100;


}
.roll .button a{
	
	padding: 0px 12px 6px 12px;
	
	}

.box #work {
margin-bottom: 50px;
display: block;
}

#daybusiness, #nightbusiness {
	margin: 0;
	padding: 30px 0 30px;
}

#nightbusiness .twitter-headline, #nightbusiness p {
	color: #FFF;
}


#rangers {
	min-height: 380px;
	width: 925px;
	margin: 50px 0 0px;
	padding: 0;
}
#rangers li {
	display: block;
	float: left;
	width: auto;
	height: 380px;
}
/*
#rangers .rangerR {
	width: 180px;
}

#rangers .rangerA {
	width: 175px;
}

#rangers .rangerN {
	width: 210px;
}

#rangers .rangerG {
	width: 180px;
}

#rangers .rangerE {
	width: 180px;
}
*/
#rangers li img {
	height: 100%;
}


#businessprocess {
	width: 860px;
}	
#businessprocess li {
	float: left;
}
#businessprocess .arrowR {
	padding-top: 140px;
	width: 50px;
	height: 230px;
}

.ourbusiness .iconimg {
width: 10%;
float: left;
padding: 2% 0 0 3%;
}
.ourbusiness h1 {
border-bottom: 2px dotted #00B9D2;
text-transform: uppercase;
font-family: "Times New Roman", Times, serif;
font-size: 2.5em;
line-height: 1.3em;
font-weight: normal;
width: 82%;
margin: 4% 3% 5% 0;
float: right;

}
.ourbusiness h1 .jpn {
font-family: serif;
font-size: 0.9em;
padding-left: 0.7em;
}
.ourbusiness h2 {
padding: 0 0 0 15%;
margin-bottom: 0;
}
.ourbusiness p {
padding: 0 0 0 15%;
margin: 0 auto 1.5em;
}
.ourbusiness .caption {
padding: 0 0 0 15%;
font-size: 0.9em;
}
.ourbusiness .left_bussiness {
float: left;
width: 55%;
margin-right: 2%;
}
.ourbusiness .right_pics {
float: right;
width: 40%;
margin-right: 3%;
}
.ourbusiness .right_pics img {
width: 100%;
}



.selectedproject h1 {
border-bottom: 2px dotted #00B9D2;
font-family: "Times New Roman", Times, serif;
font-size: 2.2em;
line-height: 1.3em;
font-weight: normal;
width: 82%;
margin: 10% 3% 5% 10%;
}
.selectedproject h1 .jpn {
font-family: serif;
font-size: 0.9em;
padding-left: 0.7em;
}
.selectedproject h2 {
padding: 0 0 0 10%;
margin-bottom: 0;
font-size: 1.3em;
}
.selectedproject p {
padding: 0 0 0 10%;
margin: 0 auto 1.5em;
}
.selectedproject p img {
width: 30%;
padding: 0 2% 1.5% 0;
}
.selectedproject p a {
	text-decoration: none;
	color: #00B9CA;
}
.selectedproject p a:hover {
	text-decoration: underline;
}
.selectedproject .caption {
padding: 0 0 0 10%;
font-size: 0.9em;
}
.selectedproject .left_bussiness {
float: left;
width: 55%;
margin-right: 2%;
}
.selectedproject .right_pics {
float: right;
width: 40%;
margin:  5% 3% 0 0;
}
.selectedproject .right_pics img {
width: 100%;
margin-bottom: 10px;
}


.items{
list-style-type:none;
cursor:default;
background:#DBDBDB;
text-align:center;
width: 220px;
height: 320px;
margin-bottom: 50px;
}
.items .items-description {
text-align: left;
padding: 2px 0 0 10px;
margin: 0;
}

.items p{
position:relative;
display:block;
font-size: 0.7em;
margin: 0;
color: #222;
}

.items img.hearing {
position: relative;
top: 15px;
}
.items .hearing {
position: relative;
top: -125px;
}
.items .hearingbelow {
position: relative;
top: -31px;
}

	
.items-title{
color:#4a4a4a; 
margin: 20px 0 0;
font-size:1.5em;
	
}

.items .item-subtitle{
	margin-top: -5px;
	font-size: 0.6em;
}
.items-description, twitter-tweet{
	font-size:0.8em;
}
.items .read-more a, .items .sample-button a, .items .sample-buttonS a {
	margin-top: 8px;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
}
.items .invisible {
	visibility: hidden;
}
	
.product{
	cursor:default;
	padding-left:20px;
	padding-right:20px;

	height:280px;
	background-color:#4a4a4a;
	float:left;
	margin:40px 0 0 0;
	text-align:center;
	font-family: "Franchinise", Georgia, serif;
	font-size:24px;
	color:#fff;
	border-right:1px dashed #666;

	}
	
.product{
	 list-style-type:none;
}	
.product{
	 list-style-type:none;
}	
.list_carousel ul{
	padding:0;
}
.product:hover{
}
	
.product_info{
	margin-top:0;
}

.grey{
	width:100%;
/*	background-image:url('../images/grey_jean.png');
*/	background-color:#f2f2f2;;
	padding-bottom:6%;
	
	}
	
.dark{
	width:100%;
	background-color:#414141;;
	padding-bottom:100px;
	
	}	

.whitecol{
	width: 320px;
	margin-right:20px;
	float:left;
	background-color:#FFF;
	height:400px;
	
	}	




	
.photogallery { 

	text-align:center;
	
	
	}
	

	
.photogallery-text{
	
	text-align:center;
	width:700px;
	margin: 20px auto 80px;
	
	}	



/* CONTACT US */

#contactus{
	width: 80%;
	margin: 0 auto;
}
#contactus p{
	color: #FFF;
}
input{
	
	background-color:#EEE;
	border: 1px solid #FFF;
	padding:0.7%;
	height:15px;
	width:77%;
	font-size:0.8em;
	
	}
#textarea{
	width: 100%;
	margin: 0 auto;
	background-color:#EEE;
	border: 1px solid #FFF;
	font-size:0.7em;
	color:#969696;
}


/* ---------------------- */

/* ISSUE #1 */

/* ---------------------- */


.issue{
	
	text-align:center;
	color:#FFF;
	font-size: 0.76em;

	
	}
	
.issue-left{
	
	text-align:left;
	color:#FFF;
	font-size: 0.76em;

	
	}
	
.seperator{
	
	margin-top:-2.3%;
	letter-spacing:0.01em;
	
	
	}
	
.headline{
	
	font-size: 1.9em;
	
	}
	
.titleimage{

	border:10px solid white;
	width:97%;
	padding:1.5%;
	/*background:url(../images/issue01.jpg) no-repeat;*/
  background-size: 100%;
	
	}
	
.left{
	text-align:left;
	
	}
	
	
	
.share{
	
color:#4a4a4a; 
font-size:1.2em;
text-align:center;
	
}



/* ---- TWITTER ---- */

.twitter-size{padding-top:5%; padding-bottom:5%;}

.twitter-intro{color:#838383;}
.twitter-headline{color:#333;font-size: 2.7em;}
.reportWriter {
	color: #999;
	font-size: 0.5em;
}
#twitter{margin-top:-3%;margin-bottom:5%;}

.tweet-container{float:left; width:30%; margin-right:5%;}
.tweet-last{margin-right:0% !important; }
.tweet-profile{float:left; margin-left:4%; margin-top:-2%;}

.tweet-time{color:#4a4a4a; font-size:0.7em; margin-top:-3%;}
.tweet-time a{color:#969696; text-decoration:none;}
.tweet{color:#848484; margin-top:1%; text-align:justify;}

.tweet-mail{color:#848484; margin-top:5%; text-align:center;}
.tweet-mail a{text-decoration:none;color:#e44430;}
.tweet-mail a:hover{text-decoration:underline;}
.tweet a{text-decoration:none;color:#e44430;}
.tweet a:hover{text-decoration:underline;}
	
twitter-user{
	
	color:#5f5f5f;
	}
.address{
	
	font-size:0.9em;
	text-align:center; 
	color:#FFF;
	
	
	}	

.footer{
	
	padding-bottom:3%;
	
	}
	
.companyprofile {
	text-align:center;
	font-size: 0.77em;
	margin: 0;
	}

.companytitle {
	font-weight: bold;
	color: #333;
	margin-top: 3em;
	}

h1.companytitle {
	font-weight: bold;
	color: #333;
	padding-top: 5%;
	font-size: 0.9em;
	margin-top: 0;
	}
	
h2.companytitle {
	font-weight: bold;
	color: #333;
	margin-top: 0;
	font-size: 0.77em
	}

#campanyInfo {
width: 600px;
font-size: 0.77em;
font-family: sans-serif;
}

#campanyInfo tr {
display: block;
margin: 2em 0 2em 2em;
}

#campanyInfo th {
width: 160px;
text-align: left;
vertical-align: top;
color: #00B9CA;
font-size: 0.9em;
}

#campanyInfo td {
line-height: 2em;
}

#campanyInfo td .eng {
font-weight: normal;
font-size: 0.9em;
line-height: 1.4em;
color: #666;
}

#campanyInfo td .worldlogo {
width: 60px;
padding: 5px 20px 0 0;
vertical-align: middle;
}

#campanyInfo td .owllogo {
width: 100px;
padding: 5px 20px 0 0;
vertical-align: middle;
}

#campanyInfo td .tryhardlogo {
width: 150px;
padding: 5px 20px 0 0;
vertical-align: middle;
}

#campanyInfo td .omotenashilogo {
width: 220px;
padding: 5px 20px 0 0;
vertical-align: middle;
}

#reportContents {
margin: 0;
padding: 0;
list-style: none;
color: #fff;
max-width: 900px;
margin-left: -5%;
}

#reportContents li {
margin-top: 12%;
}

#reportContents .numbering {
float: left;
border-bottom: 3px solid #FFF;
margin: -0.4em 5% 0 0;
}

#reportContents .extractTxt {
width: 200px;
float: left;
text-align: left;
width: 25%;
margin: -0.3em 0 0;
}

#reportContents .extractTxt p {
font-size: 0.77em;
margin: 0;
padding: 0;
}

#reportContents .extractTxt .readMore a {
color: #E44430;
line-height: 2.8em;
font-weight: bold;
}

#reportContents .extractTxt .readMore a:hover {
text-decoration: underline;
}

#reportContents .extractTxt .tags {
color: #999;
font-size: 0.7em;
line-height: 5em;
}

#reportContents .extractImg {
float: right;
width: 60%;
}

#reportContents .extractImg img {
width: 100%;
}


#inspirationEye {
min-height: 213px;
}

#inspirationEye .Ovo{
padding-top: 86px;
text-shadow: 2px 2px 2px #FFF;
}

/* ---- instagram ---- */
#instagram{margin-top:3%;margin-bottom:5%;}

.instaimg {
width: 200px;
padding: 10px;
}


/*  Tycoon Logo*/
.topleftdown {
position: absolute;
bottom: 0;
right: 2%;
color: #707070;
font-size: 1.3em;
font-family: 'Pathway Gothic One', sans-serif;
}

.topleftdown a {
	color: #FFF;
}


/* =============================================================================
   PAGE: CONCEPT
   ========================================================================== */
.concept{color:#848484; text-align:center;}
.concept a{text-decoration:none;color:#00B9CA;}
.concept a:hover{text-decoration:underline;}

#concept {
	padding: 0 0 40px;
}
#concept img {
	width: 100%;
	max-width: 500px;
}
.concepttxt {
font-size: 0.77em;
width: 77%;
text-align: justify;
color: #333;
padding: 5% 0 10%;
line-height: 2.2em;
}

/* =============================================================================
   PAGE: PROJECT
   ========================================================================== */

	#workwrap{
		overflow: auto;
	}
	
	.workcontainer{
		margin-right: 15px; margin-bottom: 15px;
		float: left;
		width: 284px; height: 340px;
		cursor: pointer;
		overflow: hidden;
		opacity: 0.7;
	
		-webkit-transition: all 0.4s ease-out; 
		-moz-transition: all 0.4s ease-out;
		-o-transition: all 0.4s ease-out;
	}
	
	.workcontainer img{
		width: 100%;
	}
	
	.workcontainer xmp{
		display: none;
	}
	
	.workcontainer:hover{
		opacity: 1;
		-webkit-transition: all 0.4s ease-out; 
		-moz-transition: all 0.4s ease-out;
		-o-transition: all 0.4s ease-out;
	}
	
	.workcontainer a{
		color: #000; text-decoration: none;
	}
	
	.workcontainer-info{
		font-size: 13px;
		font-family: Georgia, "Times New Roman", Times, serif;
		line-height: 1.3em;
		margin-top: 5px;
	}
	
	.workname{
		font-size:13px;
	
	}
	
	.worktags {
		font-size:12px;
		color: #666;
	}
	
	.workcontent{
		visibility: hidden;
	}
	
	.eachpage{
		max-width: 900px;
		margin:3em auto;
	}
	
	

/* =============================================================================
   COMPANY PROFILE : MAP
   ========================================================================== */
#map_wrapper {
width: 100%;
height: auto;
border-top: solid #ADABA9 2px;
-webkit-box-shadow: 0 2px 22px #FFF;
-moz-box-shadow: 0 2px 22px #FFF;
box-shadow: 0 2px 22px #FFF;
margin: 0 auto;
}
#map_container {
position: relative;
padding-bottom: 20%;
height: 100px;
}

/* =============================================================================
   NAVIGATION
   ========================================================================== */
   
   #navigation{
	   position:fixed;
	   top:0;
	   width:100%;
	   background: #22535D;
   	   color: #00B9CA;
	   height: 30px;
	   z-index: 9999;
	   filter:alpha(opacity=85);
     -moz-opacity:0.85;
     -khtml-opacity: 0.85;
     opacity:0.85;
   }
   #totop{
	   position:fixed;
	   top:0;
	   width: 50%;
	   line-height: 30px;
	   padding: 0.2% 0 0 2%;
   }
   #totop a img {
   height: 25px;
   }

   #menu{
	   margin: 0 auto;
	   padding: 0;
	   position: relative;
		left: 50%;
		float: left;
   }
   #menu li{
	   float: left;
	   height: 30px;
	   line-height: 30px;
	   padding: 0 1em;
	   font-family:"Times New Roman", Times, serif;
	   font-size: 14px;
	   position: relative;
	   left: -50%;
   }
   #menu li a{
	   text-decoration:none;
	   color: #00B9CA;
   }
   #menuright{
	   position:fixed;
	   top:0;
	   right:0;
	   list-style: none;
	   margin: 0;
   }
   #menuright li{
	   float: right;
   }

	
	
	@media only screen and (max-width: 1500px) {
		.activetext-page-work{
			font-size: 50px; line-height: 60px;
			font-weight: bold; letter-spacing: -1px;
			white-space: nowrap; pointer-events: none;
		}
	}
	@media only screen and (max-width: 1500px) {
		.activetext-page-work{
			font-size: 50px; line-height: 60px;
			font-weight: bold; letter-spacing: -1px;
			white-space: nowrap; pointer-events: none;
		}
	}
	@media only screen and (max-width: 1499px) {
	.activetext-page-work{
			font-size: 70px; line-height: 80px;
			font-weight: bold; letter-spacing: -1px;
			white-space: nowrap; pointer-events: none;
		}
	}
	
	@media only screen and (max-width: 1024px) {
		.activetext-page-work{
			font-size: 50px; line-height: 60px;
			font-weight: bold; letter-spacing: -1px;
			white-space: nowrap; pointer-events: none;
		}
		.eachpage{
			
		}
		.pagepadding{
			padding: 100px 55px 55px 55px;	
		}
		.page-color{
			display: none;
		}

		.pagepadding-work{
			padding: 0px 0px 55px 0px;	
		}
		#workwrap{
			padding-top: 0px;
			overflow: auto;
		}
		.workcontainer{
			margin-right: 0px; margin-bottom: 0px;
			float: left; height: auto;
			width: 25%;
			cursor: pointer;
			overflow: hidden;
			opacity: 0.7;
		
			-webkit-transition: all 0.4s ease-out; 
			-moz-transition: all 0.4s ease-out;
			-o-transition: all 0.4s ease-out;
		}
		
		.workcontainer-info{
			display: none;
			margin-top: 12px;
			font-size: 11px;
		}
		
		
		#rangers {
			min-height: 300px;
			width: 730px;
			margin: 50px 0 0px;
			padding: 0;
		}

		#rangers li {
			display: block;
			float: left;
			width: auto;
			height: 300px;
		}
		
		
		#businessprocess {
			width: 760px;
		}

		#businessprocess .arrowR {
			padding-top: 140px;
			width: 25px;
			height: 230px;
		}
		
		
		#campanyInfo {
			width: 480px;
		}
		
		
		#menu{
			display: none;
		}
	}

	
	@media only screen and (max-width: 799px) {
		.eachpage{
			
		}
		.pagepadding{
			padding: 100px 55px 55px 55px;	
		}
		
		.activetext-content{
			display: none;
		}
		
		.page-color{
			display: none;
		}

		.pagepadding-work{
			padding: 0px 0px 55px 0px;	
		}
		#workwrap{
			padding-top: 0px;
			overflow: auto;
		}
		
		.workcontainer{
			margin-right: 0px; margin-bottom: 0px;
			float: left; height: auto;
			width: 50%;
			cursor: pointer;
			overflow: hidden;
			opacity: 0.7;
		
			-webkit-transition: all 0.4s ease-out; 
			-moz-transition: all 0.4s ease-out;
			-o-transition: all 0.4s ease-out;
		}
		
		.workcontainer-info{
			display: none;
			margin-top: 12px;
			font-size: 11px;
		}
		
		#rangers {
			min-height: 600px;
			width: 446px;
			margin: 50px 0 0px;
			padding: 0;
		}

		#rangers li {
			display: block;
			float: left;
			width: auto;
			height: 300px;
		}
		
		#businessprocess {
			width: 675px;
			margin-left: -5px;
		}

		#businessprocess .arrowR {
			display: none;
		}
		
		.items {
			margin-bottom: 5px;
			margin-right: 5px;
		}
		
	}
	
	@media only screen and (max-width: 709px) {
		#businessprocess {
			width: 450px;
			margin-left: -5px;
		}

		#businessprocess .arrowR {
			display: none;
		}
		
		.items {
			margin-bottom: 5px;
			margin-right: 5px;
		}
		
		#reportContents .extractImg {
			width: 60%;
		}
	}
	
	@media only screen and (max-width: 629px) {
		
		#reportContents {
			margin-left: 0;
		}
		#reportContents .extractTxt {
			float: none;
			text-align: left;
			width: 90%;
			margin: 0;
		}
		#reportContents .extractImg {
			float: none;
			width: 90%;
		}
		
		campanyInfo {
			width: 100%;
		}
		#campanyInfo th {
			width: 120px;
		}
	}

	@media only screen and (max-width: 480px) {
		.activetext-page-work{
			font-size: 60px; line-height: 70px;
			font-weight: bold; letter-spacing: -1px;
			white-space: nowrap; pointer-events: none;
		}
		.activeline{
			vertical-align: middle;
			width: 80px;
		}
		#workwrap{
		/*	padding-top: 100px;	*/
			overflow: auto;
		}
		
		.workcontainer{
			margin-right: 0px; margin-bottom: 0px;
			float: left; height: auto;
			width: 25%;
			cursor: pointer;
			overflow: hidden;
			opacity: 0.7;
		
			-webkit-transition: all 0.4s ease-out; 
			-moz-transition: all 0.4s ease-out;
			-o-transition: all 0.4s ease-out;
		}
		
		.workcontainer-info{
			display: none;
			margin-top: 12px;
			font-size: 11px;
		}
		
		.pagepadding-work{
			padding: 0;
		}
		
		#rangers {
			min-height: 500px;
			width: 371px;
			margin: 50px 0 0px;
			padding: 0;
		}

		#rangers li {
			display: block;
			float: left;
			width: auto;
			height: 250px;
		}
		
		#businessprocess {
			width: 370px;
			margin-left: 5px;
		}

		#businessprocess .arrowR {
			display: none;
		}
		
		.items {
			width: 180px;
			height: 280px;
			margin-bottom: 5px;
			margin-right: 5px;
		}
		
		
		#campanyInfo {
			width: 100%;
		}
		
		#campanyInfo tr {
			margin: 2em 0;
		}
		#campanyInfo th {
			width: 100px;
		}
	}

	@media only screen and (max-width: 320px) {
		#workwrap{
			padding-top: 100px;
			overflow: auto;
		}
		
		.workcontainer{
			margin-right: 0px; margin-bottom: 0px;
			float: left; height: auto;
			width: 50%;
			cursor: pointer;
			overflow: hidden;
			opacity: 0.7;
		
			-webkit-transition: all 0.4s ease-out; 
			-moz-transition: all 0.4s ease-out;
			-o-transition: all 0.4s ease-out;
		}
		
		.workcontainer-info{
			display: none;
			margin-top: 12px;
			font-size: 11px;
		}
		
		.pagepadding-work{
			padding: 0;
		}
		
		
		#rangers {
			min-height: 388px;
			width: 288px;
			margin: 50px 0 0px;
			padding: 0;
		}

		#rangers li {
			display: block;
			float: left;
			width: auto;
			height: 194px;
		}
		
		#businessprocess {
			width: 220px;
			margin-left: 5px;
		}

		#businessprocess .arrowR {
			display: none;
		}
		
		.items {
			width: 220px;
			height: 320px;
			margin-bottom: 5px;
			margin-right: 0;
		}
		
		
		#campanyInfo {
			width: 100%;
		}
		
		#campanyInfo tr {
			margin: 2em 0;
		}
		#campanyInfo th {
			width: 100px;
		}
		

.selectedproject h1 {
border-bottom: 2px dotted #00B9D2;
font-family: "Times New Roman", Times, serif;
font-size: 2.2em;
line-height: 1.3em;
font-weight: normal;
width: 100%;
margin: 10% 3% 5% 10%;
}
	}