*
{
  margin: 0px;
  padding: 0px;
}  


html
{
/*  background: #222222;*/
  background: #FFFFFF;
  height: 100%;
}

body
{
  text-align: center;
  color: #000;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 16px;
  min-width: 1024px;
  height: 100%;
}

a, a:hover, a:visited
{
  text-decoration: none;
  color: #91bae2;
}

a, img
{
    border:none;
    outline:none
}

p
{
  padding-top: 8px;
}


/* Page header and main menu */

#header
{
  position: fixed;
  z-index: 999;
/*  position: relative; */

  width: 100%;
  height: 60px;
  border-bottom: 1px solid grey;
  background: #FFFFFF;
/*  opacity: 0.9; */
  background-color: rgba(255, 255, 255, 0.95);
}

/*
#header:hover
{
  top: 0px;
}
*/

#header_content
{
  width: 1024px;
  height: 60px;
  margin: 0px auto;

  text-align: left;
}


.header_height_holder
{
  height: 60px;
  background: #ffffff;
}


#header_logo
{
  float: left;
  padding-right: 40px;
  padding-top: 7px;
}

#header_menu
{
  float: left;
  height: 60px;
  color: rgba(88, 88, 90, 150);
}

#header:hover #header_menu
{
  color: black;
}

#header_menu ul
{
  display: block;
  list-style-type: none; 
}

#header_menu ul li
{
  float: left;
}


#header_menu ul li a
{
  display: inline-block;
  height: 35px;
  padding-top: 25px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 18px;
  color: #000000;
}

#header_menu ul li a:hover
{
  background-color: #EFEFEF;
  color: black;
}



/* Page footer	*/

#footer
{
  padding-top: 10px;
  padding-bottom: 15px;
  
  background: #FFFFFF;
  border-top: 1px solid #000000;

  font-size: 13px;
  color: #999;
}

#footer h1
{
  color: #222222;
  font-size: 19px;
}

#footer a
{
  font-size: 19px;
}

.footer_logo
{
  float: left;
  padding-right: 10px;
  padding-top: 5px;
}


/* Page contents */

.content_column
{
  position: relative;

  width: 1004px;
  margin: 0px auto;
  
  padding-left: 10px;
  padding-right: 10px;

  text-align: left;
}


/* common page elements */

#page_title
{
  position: relative;
  width: 100%; 
}

#page_title .bg_image
{
  position: relative;
  width: 100%; 
  z-index: -1;
  line-height: 0px;
}

#page_title .bg_image img
{
  display: block;
  width: 100%;
}

#page_title .foreground
{
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  padding-top: 20px;
  color: #FFFFFF;
}

#page_title .foreground h1
{
  font-size: 64px;
  color: #FFFFFF;
}


.section_games
{
  padding-top: 60px;
  padding-bottom: 40px;

  background: #5084B6;
  
  color: #FFFFFF;
}

.section_business
{
  padding-top: 60px;
  padding-bottom: 20px;

  background: #416C97;
  color: #FFFFFF;
}

.section_industrial
{
  padding-top: 60px;
  padding-bottom: 30px;

  background: #31547C;
  color: #FFFFFF;
}

.section_partners
{
  padding-top: 60px;
  padding-bottom: 20px;

  background: #3976B7;
  color: #FFFFFF;
}

.section_contact
{
  padding-top: 60px;
  padding-bottom: 20px;

  background: #3976B7;
  color: #FFFFFF;
}

.partner_company
{
	float: left;
	margin: 8px;
}

.image_left
{
  float: left;
  padding-right: 30px;
}


.image_right
{
  float: right;
  padding-left: 30px;
}


.section_text
{
  padding-top: 40px;
  padding-bottom: 40px;
}


h1
{
  font-size: 48px;
  font-weight: 300;
}

h2
{
  font-size: 20px;
  font-weight: 300;
}

.clear
{
  clear: both;
}

.read_more
{
  display: inline-block;
  margin-bottom: 12px;
  background: #EFB200;
}

.read_more a
{
  color: navy;
}

/* home page */

#we_build_bridges
{
  position: relative;
  margin: 0px;
  width: 100%;
  min-width: 1024px;
}

#we_build_bridges .bg_image
{
  width: 100%; 
  z-index: -1;
  line-height: 0px;
}

#we_build_bridges .bg_image img
{
  display: block;
  width: 100%;
}

#we_build_bridges .foreground
{
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  padding-top: 20px;
}


.fadeable
{
  opacity: 0;
}

.fade_in
{
  opacity: 1;

  -webkit-transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  transition: opacity 1s linear;
}


#we_build_bridges h1
{
  font-size: 40px;
  color: #DDDDDD;
}

#we_build_bridges h2
{
  font-size: 60px;
  color: #FFFFFF;
}

/* home page hover effects */

#bridges_between
{
    position: relative;
	background: #31547C;
	width: 100%;
	min-width: 1024px;
	height: 160px;
	
	overflow: hidden;
}

#bridges_between .title
{
  padding-top: 10px;
  font-size: 22px;
  height: 40px;
}


#bridges_between .details
{
  display: none;
  
  opacity: 0;

  width: 100%;
  height: 160px;
  
  position: absolute;
  left: 0px;

  padding-top: 10px;
  text-align: left;
}

#bridges_between .details div
{
  padding-left: 10px;
}

#bridges_between .details .read_more
{
  opacity: 0;
  
  float: right;
  padding-right: 20px;
  padding-left: 0px;
  margin: 0px;
  background: none;
  font-weight: bold;
  text-shadow: 0px 0px 5px #FFFFFF;
}


#bridges_between #between_imagination_and_reality
{
  float: left;
  
  width: 33%;
  height: 160px;
  
  overflow: hidden;
  
  color: #FFFFFF;

  background-color: #5084B6;
}

#bridges_between #between_imagination_and_reality a,
#bridges_between #between_imagination_and_reality a:visited,
#bridges_between #between_imagination_and_reality a:hover
{
  display: block-inline;
  
  color: #FFFFFF;
  text-decoration: none;
}


#bridges_between #between_imagination_and_reality:hover
{
  z-index: 1;
}

#bridges_between #between_imagination_and_reality:hover .title
{
  text-shadow: 0px 0px 5px #FFFFFF;
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }


#bridges_between #between_imagination_and_reality:hover .details
{
  display: block;
  
  background-color: #5084B6;
  
	opacity:0;  /* make things invisible upon start */
	
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
	
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	
	-webkit-animation-duration: 250ms;
	-moz-animation-duration: 250ms;
	animation-duration: 250ms;
}

#bridges_between #between_imagination_and_reality:hover .read_more
{
	opacity:0;  /* make things invisible upon start */
	
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
	
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	
	-webkit-animation-duration: 250ms;
	-moz-animation-duration: 250ms;
	animation-duration: 250ms;

	-webkit-animation-delay: 500ms;
	-moz-animation-delay: 500ms;
	animation-delay: 500ms;
}


#bridges_between #between_companies_and_people
{
  float: left;

  width: 33%;
  height: 160px;
  
  color: #FFFFFF;

  overflow: hidden;

  background-color: #416C97;
}

#bridges_between #between_companies_and_people a,
#bridges_between #between_companies_and_people a:visited,
#bridges_between #between_companies_and_people a:hover
{
  display: block-inline;
  
  color: #FFFFFF;
  text-decoration: none;
}

#bridges_between #between_companies_and_people:hover
{
  z-index: 1;
}

#bridges_between #between_companies_and_people:hover .title
{
  text-shadow: 0px 0px 5px #FFFFFF;
}

#bridges_between #between_companies_and_people:hover .details
{
  display: block;

  background-color: #416C97;
  
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
	
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	
	-webkit-animation-duration: 250ms;
	-moz-animation-duration: 250ms;
	animation-duration: 250ms;
}

#bridges_between #between_companies_and_people:hover .read_more
{
	opacity: 0;  /* make things invisible upon start */
	
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
	
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	
	-webkit-animation-duration: 250ms;
	-moz-animation-duration: 250ms;
	animation-duration: 250ms;

	-webkit-animation-delay: 500ms;
	-moz-animation-delay: 500ms;
	animation-delay: 500ms;
}


#bridges_between #between_theory_and_visualisation
{
  float: left;
  
  width: 34%;
  height: 160px;

  overflow: hidden;
  
  color: #FFFFFF;

  background-color: #31547C;
}

#bridges_between #between_theory_and_visualisation a,
#bridges_between #between_theory_and_visualisation a:visited,
#bridges_between #between_theory_and_visualisation a:hover
{
  display: block-inline;
  
  color: #FFFFFF;
  text-decoration: none;
}

#bridges_between #between_theory_and_visualisation:hover
{
  z-index: 1;
}

#bridges_between #between_theory_and_visualisation:hover .title
{
  text-shadow: 0px 0px 5px #FFFFFF;
}

#bridges_between #between_theory_and_visualisation:hover .details
{
  display: block;

  background-color: #31547C;
  
	opacity: 0;  /* make things invisible upon start */
	
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
	
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	
	-webkit-animation-duration: 250ms;
	-moz-animation-duration: 250ms;
	animation-duration: 250ms;
}


#bridges_between #between_theory_and_visualisation:hover .read_more
{
	opacity: 0;  /* make things invisible upon start */
	
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
	
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	
	-webkit-animation-duration: 250ms;
	-moz-animation-duration: 250ms;
	animation-duration: 250ms;

	-webkit-animation-delay: 500ms;
	-moz-animation-delay: 500ms;
	animation-delay: 500ms;
}


/* the team */

#the_team
{
  background: #1B60A9;
  color: #0063BE;
}

#the_team #part_left
{
  float: left;
  width: 50%;
  background: #3976B7;
  text-align: right;
}

#the_team #part_left .content
{
  float: right;
  width: 472px;

  padding-right: 30px;
  padding-top: 40px;
  padding-bottom: 40px;

  color: #FFFFFF;
  text-align: left; 
}

#the_team #part_right
{
  float: left;
}

#the_team #part_right .content
{
  width: 472px;

  padding-left: 30px;
  padding-top: 40px;
  padding-bottom: 40px;

  color: #FFFFFF;
  text-align: left; 
}

#the_team h3
{
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
}

#the_team ul
{
  padding-left: 20px;
}

#the_team li
{
  font-size: 14px;
}

.the_team_part_bottom
{
  padding-top: 40px;
  padding-bottom: 40px;

  background: #31547C;
  color: #FFFFFF;
}


/* portfolio */

.portfolio_item 
{
  width: 100%;
  padding-top: 10px;
  padding-bottom: 25px;
}

.portfolio_item .title_image
{
  float: left;
  width: 145px;
}

.portfolio_item .item_text
{
  float: left;
  width: 850px;
}

.portfolio_item .title
{
   font-size: 19px;
   font-weight: bold;
   color: #FFFFFF;
}

.portfolio_item .annotation
{
  padding-top: 8px;
}


.rotator
{
  position: relative;
  
  height: 200px;
  
  overflow: hidden;
}

.rotator_item
{
  position: absolute;
  left: 100%;
  
  width: 100%;
  height: 100%;
  
  z-index: 0;
}

.rotator_item a
{
  color: #FFFFFF;
}

.rotator_item.current
{
  left: 0px;
  
  z-index: 1;
  
  -webkit-transition: left 500ms linear;
  -moz-transition: left 500ms linear;
  transition: left 500ms linear;
}

.rotator_item.prev
{
  left: 0px;
  
  z-index: 0;
}

.rotator_item .portfolio_item
{
  height: 100%;
}

.section_games .rotator_item .portfolio_item
{
  background: #5084B6;
}

.section_business .rotator_item .portfolio_item
{
  background: #416C97;
}

.section_industrial .rotator_item .portfolio_item
{
  background: #31547C;
}

.portfolio_stock_copyrights
{
  padding-bottom: 5px;
  background: #31547C;
  font-size: 13px;
  color: #999;
}

.portfolio_selector_button
{
	width: 324px;
	float: left;
	margin: 5px;
}

.portfolio_selector_between
{
	padding: 15px;
}

.portfolio_selector_title
{
	font-size: 28px;
	color: white;
}

.portfolio_selector_light
{
	background: #416C97;
}

.portfolio_selector_medium
{
	background: #31547C;
}

.portfolio_selector_dark
{
	background: #243F5D;
}

.portfolio_selector_very_dark
{
	background: #192A3E;
}