@charset "UTF-8";

@font-face {
	font-family: Museo300;
	src: url('../assets/fonts/museo300-regular-webfont.eot');
	src: url('../assets/fonts/museo300-regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('../assets/fonts/museo300-regular-webfont.woff') format('woff'), /* Modern Browsers */
	url('../assets/fonts/museo300-regular-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	url('../assets/fonts/museo300-regular-webfont.svg#svgBebasNeue') format('svg'); /* Legacy iOS */
}

@font-face {
	font-family: Museo500;
	src: url('../assets/fonts/museo500-regular-webfont.eot');
	src: url('../assets/fonts/museo500-regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('../assets/fonts/museo500-regular-webfont.woff') format('woff'), /* Modern Browsers */
	url('../assets/fonts/museo500-regular-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	url('../assets/fonts/museo500-regular-webfont.svg#svgBebasNeue') format('svg'); /* Legacy iOS */
}

/*////////////////////////////////////////
//	GENERAL								//
////////////////////////////////////////*/

* { margin: 0px; padding: 0px; }
img { border: 0px; vertical-align: bottom; }
body { background-color: #fff; font-size: 14px; font-family: Monaco, Courier, monospace; }
.clear { clear: both; }

/*////////////////////////////////////////
//	PARALLAXER							//
////////////////////////////////////////*/

/*ul#panelControl { position: fixed; top: 13px; left: 70px; z-index: 999; }
ul#panelControl li { float: left; display: block; padding-right: 3px; }
ul#panelControl li a { display: block; border-radius: 20px; background-color: #000; color: #fff; width: 26px; height: 26px; text-align: center; font-size: 20px; line-height: 22px; text-decoration: none;}
ul#panelControl li a.clicked { opacity: 0.3; filter:alpha(opacity=30); }
ul#panelControl li a:hover { text-decoration: none; opacity: 1; filter:alpha(opacity=100); background-color: #fff; color: #000; box-shadow: 0px 5px 5px #000; }
ul#panelControl li a span { display: block; padding-top: 2px; }*/

#overflowControl { overflow: hidden; position: relative; height: 1100px; background: url('../images/decorations/bg_body.png') 0 0 repeat; }
#layerSling {}
#layerSling>div { display: block; position: absolute; top: 0px; left: 0;  }

#layerSling .p { height: 400px; float: left; position: relative; overflow: visible; text-align: center; }
/*#layerSling .p img { display: block; position: absolute; top: 0; left: 0; }*/
#layerB .p { width: 1800px; }
#layerB .p .narrative { position: absolute; top: 400px; left: 0; width: 360px; padding: 20px 220px; text-align: left; }

/* FLAIR */
/*
#layerA .p { box-shadow: inset 5px -50px 40px rgba(218, 74, 141, 0.9); color: #942a5c; }
#layerB .p { box-shadow: inset 5px -40px 40px rgba(187, 135, 197, 0.9); color: #86578f; }
#layerC .p { box-shadow: inset 5px -30px 40px rgba(165, 166, 216, 0.9); color: #696aae; }
#layerD .p { box-shadow: inset 5px -20px 40px rgba(154, 206, 241, 0.9); color: #4ca1d9; }
#layerE .p { box-shadow: inset 5px -10px 40px rgba(153, 227, 255, 0.9); color: #3dc3f5; }

#layerA .p { background: url('../png/Bonecollector.png') 50% 50% no-repeat; color: #942a5c; }
#layerB .p { background: url('../png/Butcher.png') 50% 50% no-repeat; color: #86578f; }
#layerC .p { background: url('../png/Catlover.png') 50% 50% no-repeat; color: #696aae; }
#layerD .p { background: url('../png/Freak.png') 50% 50% no-repeat; color: #4ca1d9; }
#layerE .p { background: url('../png/Hunter.png') 50% 50% no-repeat; color: #3dc3f5; }
*/

/*////////////////////////////////////////
//	Images								//
////////////////////////////////////////*/

/*#background_1 { background: url('../images/decorations/skybg.png') 0 0 repeat-x; width: 1800px; min-height: 1100px; }*/
//.background_1 { background: url('../images/decorations/SenjaWebV20_1.jpg') 0 0 no-repeat; width: 1800px; min-height: 1100px; }
#background_1 { background: url('../images/decorations/bg_body.png') 0 0 repeat; width: 1800px; min-height: 1100px; }

//.background_2 { background: url('../images/decorations/NEW_SenjaWebV20_2x.jpg') 0 0 repeat-x; width: 1800px; min-height: 1100px; }
#background_2 { background: url('../images/decorations/bg_body.png') 0 0 repeat; width: 1800px; min-height: 1100px; }

//.background_3 { background: url('../images/decorations/SenjaWebV20_3.jpg') 0 0 repeat-x; width: 1800px; min-height: 1100px; }
#background_3 { background: url('../images/decorations/bg_body.png') 0 0 repeat; width: 1800px; min-height: 1100px; }

//.background_4 { background: url('../images/decorations/SenjaWebV20_4.jpg') 0 0 repeat-x; width: 1800px; min-height: 1100px; }
//#background_4 { background: #000 url('../images/decorations/bg_body.png') 0 0 repeat; width: 1800px; min-height: 1100px; }
//#background_4 { background: #000 url('../images/decorations/bg_body.png') 0 0 repeat-x; width: 1663px; min-height: 1100px; }

//.background_4 { background: url('../images/decorations/SenjaWebV20_4.jpg') 0 0 repeat-x; width: 1800px; min-height: 1100px; }
//.background_4 { background: #000 url('../images/decorations/bg_pattern.png') 0 0 repeat; width: 1800px; min-height: 1100px; }
//#background_4 { background: #000 url('../images/decorations/bg_body.png') 0 0 repeat-x; width: 1663px; min-height: 1100px; }

/*////////////////////////////////////////
//	Twitter Slideshow					//
////////////////////////////////////////*/
	
#tweet_container { position:relative; height:350px; }
#tweet_container li {	display: none;}
#tweet_container li.active { display: block; }
#tweet_container li.last-active {	 }
#tweet_container a:link, #tweet_container a:visited, #tweet_container a:active { color: #FFF; }
#tweet_container a:hover { color: #3B5998; }
#tweet_container .tweet_time { position: absolute; top: 75px; left: 300px; width: 145px; font-weight: bold; }

/*////////////////////////////////////////
//	Navigations							//
////////////////////////////////////////*/

#bottomPanelControl.panelControl { position: absolute; top: 961px; left: 291px; z-index: 60; }
#bottomPanelControl.panelControl li { float: left; display: block; padding-right: 7px; }
/*ul#panelControl li a { display: block; border-radius: 20px; background-color: #000; color: #fff; width: 26px; height: 26px; text-align: center; font-size: 20px; line-height: 22px; text-decoration: none;}
ul#panelControl li a.clicked { opacity: 0.3; filter:alpha(opacity=30); }
ul#panelControl li a:hover { text-decoration: none; opacity: 1; filter:alpha(opacity=100); background-color: #fff; color: #000; box-shadow: 0px 5px 5px #000; }
ul#panelControl li a span { display: block; padding-top: 2px; }*/

#bottomPanelControl #navigation_shortcuts_container { position: absolute; left: 100px; width: 240px; }
#bottomPanelControl .navigation_shortcut { width: 53px; height: 53px; }
#bottomPanelControl #navigation_home { background: transparent url('../images/decorations/home_sprite.png') 0 bottom no-repeat; }
#bottomPanelControl #navigation_about { background: transparent url('../images/decorations/about_sprite.png') 0 bottom no-repeat; }
#bottomPanelControl #navigation_porto { background: transparent url('../images/decorations/porto_sprite.png') 0 bottom no-repeat; }
#bottomPanelControl #navigation_contact { background: transparent url('../images/decorations/contact_sprite.png') 0 bottom no-repeat; }

#bottomPanelControl #navigation_home:hover, #bottomPanelControl #navigation_about:hover, #bottomPanelControl #navigation_porto:hover, #bottomPanelControl #navigation_contact:hover { background-position: 0 0; }

#bottomPanelControl #navigation_arrow_container { position: relative; }
#bottomPanelControl #navigation_arrow_container .navigation_arrow { position: absolute; width: 25px; height: 26px; }
#bottomPanelControl #navigation_arrow_container .navigation_arrow_left { background: transparent url('../images/decorations/navigation_left.png') 0 0 no-repeat; }
#bottomPanelControl #navigation_arrow_container .navigation_arrow_right { background: transparent url('../images/decorations/navigation_right.png') 0 0 no-repeat; }
#bottomPanelControl #navigation_arrow_container .navigation_arrow_top_bottom { background: transparent url('../images/decorations/navigation_updown.png') 0 0 no-repeat; }
#bottomPanelControl .navigation_arrow_subtitle { top: 60px; left: 1px; position: absolute; color: #FFF; font-family: Helvetica, Arial, sans-serif; letter-spacing: 1px; }

/*////////////////////////////////////////
//	Top Navigations						//
////////////////////////////////////////*/

#topPanelControl.panelControl { position: absolute; top: 20px; left: 29px; z-index: 110; }
#topPanelControl.panelControl li { float: left; display: block; padding-right: 10px; }

#topPanelControl.panelControl #navigation_shortcuts_container { position: absolute; left:0; width: 240px; }
#topPanelControl.panelControl .navigation_shortcut { width: 37px; height: 37px; }
#topPanelControl.panelControl #navigation_home { background: transparent url('../images/decorations/home_top_nav.png') 0 top no-repeat; }
#topPanelControl.panelControl #navigation_about { background: transparent url('../images/decorations/about_top_nav.png') 0 top no-repeat; }
#topPanelControl.panelControl #navigation_porto { background: transparent url('../images/decorations/portfolio_top_nav.png') 0 top no-repeat; }
#topPanelControl.panelControl #navigation_contact { background: transparent url('../images/decorations/contact_top_nav.png') 0 top no-repeat; }

#topPanelControl.panelControl #navigation_home:hover, #topPanelControl.panelControl #navigation_about:hover, #topPanelControl.panelControl #navigation_porto:hover, #topPanelControl.panelControl #navigation_contact:hover { background-position: 0 bottom; }

/*////////////////////////////////////////
//	About Us Services					//
////////////////////////////////////////*/

/*#service_overlay { display: none; height: 1100px; width: 300%; position: absolute; top: 0; left: 0; z-index: 70; background: transparent url('../images/decorations/black_transBg.png') 0 0 repeat; }*/
#service_overlay { height: 1100px; width: 300%; position: absolute; top: 0; left: 0; z-index: 70; background: transparent url('../images/decorations/black_transBg.png') 0 0 repeat; }

.obj-centered {
		display: block;
		height: 400px;
		width: 400px;
		left: 38%;
		top: 12%;
		position:fixed;
}


.service_popup_container { display: none; position:fixed; top: 200px; left: 26%; width: 745px; height: 422px; background: #FFF; z-index: 75; }
.service_popup_leftBox {	float: left; display: block; position: relative; width: 183px; height: 422px; }
#interactiveDevelopment .service_popup_leftBox { background: #FF7200 url('../images/decorations/interactive_icon.png') 50% 50% no-repeat; }
#websiteDevelopment .service_popup_leftBox { background: #FF7200 url('../images/decorations/web_icon.png') 50% 50% no-repeat; }
#mobileDevelopment .service_popup_leftBox { background: #FF7200 url('../images/decorations/mobile_icon.png') 50% 50% no-repeat; }
#seoAnalyticsDevelopment .service_popup_leftBox { background: #FF7200 url('../images/decorations/analytic_icon.png') 50% 50% no-repeat; }
.service_popup_rightBox { width: 512px; height: 362px; float: left; position: relative; text-align: left; padding: 0 25px 0; font-family: Arial, sans-serif; color: #444; line-height: 1.4; }
.service_popup_doneButton { background: transparent url('../images/decorations/done_btn.png') 0 0 no-repeat; border: none; position: absolute; top: 370px; left: 465px; width: 83px; height: 38px; cursor: pointer; }
.service_popup_doneButton:hover { background: transparent url('../images/decorations/done_btn.png') 0 bottom no-repeat; }

/*////////////////////////////////////////
//	Portfolio & Client					//
////////////////////////////////////////*/

.portfolio_popup_container { display: none; position: absolute; top: 200px; left: 1100px; background: none; z-index: 75; }

.portfolio_popup_leftBox { float: left; display: block; position: relative; width: 271px; height: 390px; text-align: left; font-size: 14px; font-family: "Museo300", Arial, sans-serif; color: #FFF; line-height: 1.4; background-color: #FF7200; padding: 15px;  -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; }

.portfolio_popup_rightBox { display: block; width: 649px; height: 463px; float: left; position: relative; background-color: #FFF;  -webkit-border-radius: 10px; -webkit-border-top-left-radius: 0; -moz-border-radius: 10px; -moz-border-radius-topleft: 0; border-radius: 10px; border-top-left-radius: 0; }

.portfolio_thumb { cursor: pointer; }
.portfolio_thumb_bwoverlay {  }

.portfolio_popup_doneButton { background: transparent url('../images/decorations/done_btn.png') 0 0 no-repeat; border: none; position: absolute; top: 370px; left: 465px; width: 83px; height: 38px; cursor: pointer; }

.portfolio_popup_doneButton:hover { background: transparent url('../images/decorations/done_btn.png') 0 bottom no-repeat; }

.portofolio_title { font-size: 18px; letter-spacing: 1px; font-weight: bold; }

.portofolio_subtitle { font-size: 16px; margin-top: 20px; }

.portofolio_subtitle_content { font-size: 18px; margin-top: 0; font-weight: bold; letter-spacing: 1px; }

.portofolio_mainImage { margin: 12px 7px; width: 635px; height: 397px; overflow: hidden; }

.portofolio_mainImage img#portfolio_image { position: relative; width: 635px; }

.portofolio_prevArrow { background: transparent url('../images/decorations/portfolio_slider_arrow_leftt.png') 0 0 no-repeat; width: 67px; height: 174px; z-index: 1; position: absolute; left: 7px; top: 112px; cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; filter: alpha(opacity=20); -moz-opacity: 0.2; -khtml-opacity: 0.2; opacity: 0.2; }

.portofolio_nextArrow { background: transparent url('../images/decorations/portfolio_slider_arrow_right.png') 0 0 no-repeat; width: 67px; height: 174px; z-index: 1; position: absolute; left: 575px; top: 112px; cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; filter: alpha(opacity=20); -moz-opacity: 0.2; -khtml-opacity: 0.2; opacity: 0.2; }

/*.portofolio_prevArrow:hover, .portofolio_nextArrow:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}*/

.portofolio_closeButton { background: transparent url('../images/decorations/close_btn.png') 0 0 no-repeat; width: 83px; height: 38px; z-index: 1; position: absolute; left: 575px; top: -10px; cursor: pointer; }

.portofolio_visitButton { display: block; border: none; background: transparent url('../images/decorations/visitweb_btn.png') 0 0 no-repeat; width: 136px; height: 35px; z-index: 1; position: absolute; left: 506px; top: 420px; cursor: pointer; }

/*////////////////////////////////////////
//	slideViewer							//
////////////////////////////////////////*/

/*preload classes*/
.svw {width: 50px; height: 20px; background: #fff;}
.svw ul {position: relative; left: -999em;}

/*core classes*/
.stripViewer { 
position: relative;
overflow: hidden; 
/*border: 5px solid #FFF;  
margin: 0 0 1px 0;*/
}
.stripViewer ul { /* this is your UL of images */
margin: 0;
padding: 0;
position: relative;
left: 0;
top: 0;
width: 1%;
list-style-type: none;
}
.stripViewer ul li { 
float:left;
width:640px;
}
.stripTransmitter {
overflow: auto;
width: 1%;
margin-left: 20px;
margin-top: 22px;
}
.stripTransmitter ul {
margin: 0;
padding: 0;
position: relative;
list-style-type: none;
}
.stripTransmitter ul li{
width: 15px;
float:left;
margin: 0 1px 1px 0;
}
.stripTransmitter a{
font: bold 10px Verdana, Arial;
text-align: center;
line-height: 22px;
background: #818181;
text-decoration: none;
display: block;
height: 10px;
width: 10px;
}
.stripTransmitter a:hover, a.current{
background: #FF7202;
}

/*tooltips formatting*/
.tooltip
{
padding: 0.5em;
background: #fff;
color: #000;
border: 5px solid #dedede;
}

/*////////////////////////////////////////
//	Contact Form						//
////////////////////////////////////////*/

.contact_info_container { position: absolute; top: 291px; color: white; left: 1326px; text-align: left; font-size: 14px; font-family: Arial, sans-serif; z-index: 50; }
.contact_infotitle_container { position: absolute; top: 287px; color: white; left: 1241px; text-align: right; font-family: Arial, sans-serif; font-size: 24px; font-weight: bold; z-index: 50; }

.contact_input_container { position: absolute; width: 320px; height: 320px; top: 485px; left: 1325px; text-align: left; z-index: 50; }
.contact_input_container2 { position: absolute; width: 390px; height: 320px; top: 485px; left: 1660px; text-align: left; z-index: 50; }
/*.contact_input_small { margin: 6px 0 12px 0; padding: 11px; background-color: #FFF; border: none; color: #333; border-radius: 8px; font-size: 16px; width: 292px; }*/
.contact_input_small { margin: 6px 0 12px 0; padding: 11px; background: transparent url("../images/decorations/text_field_bordered.png") 0 0 no-repeat; border: none; color: #333; border-radius: 8px; font-size: 16px; width: 292px; }
.contact_textarea { width: 353px; height: 186px; margin: 0 0 6px 0; padding: 3px; background-color: #FFF; border: 1px solid orange; color: #333; resize: none; border-radius: 8px; position: absolute; left: 10px; top: 41px; }
.contact_submitButton { position: absolute; top: 246px; left: 248px; padding: 10px 40px; background-color: #ff811d; border: none; font-family: Arial, sans-serif; color: #FFF; border-radius: 8px; cursor: pointer;
font-weight: bold;
font-size: 18px; }
.contact_submitButton:hover { background-color: #BBB; color: #FFF; }
.contact_label { font-family: Arial, sans-serif; color: white; font-weight: bold; font-size: 20px; }

/*////////////////////////////////////////
//	Header								//
////////////////////////////////////////*/

div#header_container {
z-index: 100;
}
div#header_side {
/*position: absolute;
left: 0;
width: 100%;
height: 78px;
background: transparent url("../images/decorations/header2_pattern.png") 0 0 repeat-x;
margin: 0;
z-index: 100;*/
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 78px;
background: transparent url("../images/decorations/header2_pattern.png") 0 0 repeat-x;
margin: 0;
z-index: 100;
}
div#header_center {
position: absolute;
left: 50%;
width: 980px;
height: 81px;
background: transparent url("../images/decorations/header_pattern.png") 0 0 repeat-x;
margin-left: -490px;
z-index: 100;
}

/*////////////////////////////////////////
//	Footer								//
////////////////////////////////////////*/

.footer_container { position: absolute; bottom: 0; left: 1414px; top: 1057px; color: #FFF; font-family: Helvetica, Arial, sans-serif; font-size: 16px }

/*////////////////////////////////////////
//	Hack								//
////////////////////////////////////////*/

#ultrawide_hack { height: 1100px; position: absolute; right: 0; top: 0; background: #000 url('../images/decorations/bg_pattern.png') 0 0 repeat; width: 1000px; }

/*////////////////////////////////////////
//	Notification						//
////////////////////////////////////////*/

/*#notification_container {
display: none;
position: absolute;
left: 6075px;
top: 150px;
width: 980px;
height: 81px;
margin-left: -490px;
z-index: 100;
color: white;
text-align: center;
}*/
.notif_popup_container { display: none; position: absolute; top: 550px; left: 5815px; width: 512px; height: 220px; background: #FFF; z-index: 100; }
.notif_popup_leftBox {	float: left; display: block; position: relative; width: 183px; height: 220px; }
#notification_container .notif_popup_leftBox { background: #FF7200 url('../images/decorations/info_icon.png') 50% 50% no-repeat; }
.notif_popup_rightBox { width: 275px; height: 220px; float: left; position: relative; text-align: left; padding: 35px 25px 0; font-family: Arial, sans-serif; color: #444; line-height: 1.5; }
.notif_popup_doneButton { background: transparent url('../images/decorations/done_btn.png') 0 0 no-repeat; border: none; position: absolute; top: 190px; left: 255px; width: 83px; height: 38px; cursor: pointer; }
.notif_popup_doneButton:hover { background: transparent url('../images/decorations/done_btn.png') 0 bottom no-repeat; }


.popup_service_box {
     -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    border-radius: 8px;	
}

.service_popup_leftBox{
     -moz-border-radius-topleft: 8px;
		 -moz-border-radius-bottomleft: 8px;
    -webkit-border-top-left-radius: 8px;
		-webkit-border-bottom-left-radius: 8px;
    -khtml-border-radius: 8px;
    border-top-left-radius: 8px;		
		border-bottom-left-radius: 8px;		
}

.popup_service_box h1 {
	color: #FF7200;
	font-size:22pt;
	padding:40px 0 40px 0;
	font-family:arial;
	font-weight:normal;
}

.popup_service_box p{
	font-size:10pt;
	font-family:arial;
	font-weight:bold;	
}

.service_popup_rightBox{

}

.close_button_on_popup { 
	z-index: 99;
	cursor:pointer;
	border: none; 
	position: absolute; 
	width: 53px; 
	left:690px;
	height: 58px; 
	cursor: pointer; 
}

.close_button_on_popup_portfolio { 
	z-index: 99;
	cursor:pointer;
	border: none; 
	position: absolute; 
	top: -20px;
	width: 53px;
	left: 621px;
	height: 58px; 
	cursor: pointer; 
}



/*@media only screen and (max-width : 800px),only screen and (max-device-width : 800px){
	.relscreen{
		left:0;left:80px;
	}
}

@media only screen and (max-height : 700px),only screen and (max-device-height : 700px){
	
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
	#overflowControl{ height:1200px; }
	.service_overlay{
		height:400px;
	}
}*/
	
@media only screen and (device-width: 768px) and (orientation:portrait) {
	.relscreen{
		left:0;left:120px;
	}
	#overflowControl{ margin-top:101px;}
	body{background: url('../images/addedtop.png') 0 0 ;}
	#service_overlay{
		height:1200px;
	}
	
	/*
	#overflowControl{ height:1200px; }
	.scattered_image{ height:1200px;}
	.bg_square_pattern2{height:1200px;}	*/

}


@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}