/**
*
* General
*
*/
body{
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
height: 100%;
font-family:Arial,Helvetica,sans-serif;
}

.below{
width:400px;
height:200px;
position:absolute;
left:52%;
top:67%;
margin:0 0 0 0;
position: absolute;
font-family:Arial,Helvetica,sans-serif;
font-size:smaller;
}
.below_left{
width:400px;
height:200px;
position:absolute;
left:33.5%;
top:67%;
margin:0 0 0 0;
position: absolute;
font-family:Arial,Helvetica,sans-serif;
font-size:smaller;
}
.below_left{
width:300px;
height:200px;
position:absolute;
left:50%;
top:67%;
margin:0 0 0 -320px;
position: absolute;
font-family:Arial,Helvetica,sans-serif;
font-size:smaller;
}


A:link {text-decoration: none; color:black}
A:visited {text-decoration: none; color:black}
A:active {text-decoration: none; color:black}
A:hover {text-decoration: underline; color: black;}

.smalli{
font-style:italic;
margin-top: 0px;}

.nomargin{
margin-bottom: 0px;
}

img
{
border:0px
}

.header {
	background-color: white;
	position: absolute;
	top: 0%;
    right: 0%;
    text-align:right;
    margin:5px;
}
/**
*
* Hover Logo
*
*/

.imagepluscontainer{
width:640px;
height:114px;
position:absolute;
left:50%;
top:50%;
margin:-57px 0 0 -320px;
position: absolute;
}


.imagepluscontainer img{ /* CSS for image within container */
position: absolute;
z-index: 2;
top:0;
-moz-transition: all 0.5s ease; /* Enable CSS3 transition on all props */
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}


.imagepluscontainer:hover img{ /* CSS for image when mouse hovers over main container */
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
-moz-transform: scale(1.02, 1.02);
-webkit-transform: scale(1.02, 1.02);
-ms-transform: scale(1.02, 1.02);
-o-transform: scale(1.02, 1.02);
transform: scale(1.02, 1.02);
}

.imagepluscontainer div.desco{ /* CSS for desc div of each image. */
position: absolute;
z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */
bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */
/*-ms-top:50px;*/
top: 18px;
/*left: -640px;*/   /* Offset Box */
/*padding: 8px;*/
background: rgba(255, 255, 255, 0.8); /* black bg with 80% opacity */
color: black;
-moz-border-radius: 8px 8px 0 0; /* CSS3 rounded borders */
-webkit-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
opacity: 0; /* Set initial opacity to 0 */
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}

.imagepluscontainer #miramo{
left: 15px;
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
-moz-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}

.imagepluscontainer:hover div.desco{ /* CSS for desc div when mouse hovers over main container */
-moz-transform: translatey(-50%);
-webkit-transform: translatey(-50%);
-ms-transform: translatey(-50%);
-o-transform: translatey(-50%);
transform: translatey(-50%);
opacity:1; /* Reveal desc DIV fully */
}

.imagepluscontainer div.desc{ /* CSS for desc div of each image. */
position: absolute;
z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */
bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */
/*-ms-top:50px;*/
top: 18px;
/*left: -640px;*/   /* Offset Box */
/*padding: 8px;*/
background: rgba(255, 255, 255, 0.8); /* black bg with 80% opacity */
color: black;
-moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0; /* Set initial opacity to 0 */
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}


.imagepluscontainer:hover div.desc{ /* CSS for desc div when mouse hovers over main container */
-moz-transform: translatey(40%);
-webkit-transform: translatey(40%);
-ms-transform: translatey(40%);
-o-transform: translatey(40%);
transform: translatey(40%);
opacity:1; /* Reveal desc DIV fully */
}

.imagepluscontainer div.footer{
	background-color: white;
	position: absolute;
	bottom: 0%;
	font-size:small;
	padding: 3px;
}

.left{
position:absolute;
left:15px;
/*width:45%;
height:90%;*/
text-align:left;
bottom:5px;
    font-size:small;
}

.right{
position:absolute;
right:15px;
/*width:45%;
height:90%;*/
text-align:right;
bottom:5px;
    font-size:small;
}

.lefto{
position:absolute;
left:3px;
/*width:45%;
height:90%;*/
text-align:left;
top:5px;
font-size:small;
}
    

.righto{
position:absolute;
right:3px;
/*width:45%;
height:90%;*/
text-align:right;
top:5px;
font-size:small;
}

/**
*
* Logo's
*
*/



.logo{
display: none;
width:232px;
height:42px;
position:absolute;
left:18%;
top:88%;
margin:-21px 0 0 -116px;
z-index: 1;
}

#l_real{
left:23%;
}

.logo2{
width:201px;
height:42px;
position:absolute;
left:41%;
top:88%;
margin:-21px 0 0 -100px;
z-index: 1;
}

.logo3{
width:120px;
height:120px;
position:absolute;
left: 62%;
top:88%;
margin:-60px 0 0 -60px;
z-index: 1;
}

.logo4 {
width:160px;
height:85px;
position:absolute;
left:82%;
top:88%;
margin:-21px 0 0 -80px;
z-index: 1;

}

/**
*
* Overlay
*
*/
.overlayContainer {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba( 0, 0, 0, 0.3 );
	z-index: 10;
}

.overlayContainer .overlay {
	background-color: white;
	padding: 30px;
	position: absolute;
	margin-bottom: 48px;
	left: 15%;
	right: 15%;
	height: 400px;
	bottom: 12%;
	z-index:2;
	}

.overlayContainer .header {
	background-color: white;
	position: absolute;
	top: 0%;
}

.overlayContainer .footer{
	background-color: white;
	position: absolute;
	bottom: 0%;
	font-size:small;
	padding: 3px;
}


.overlayContainer .arrow1 {
	position: absolute;
	left: 20%;
	margin-left: -10px;
	height: 0;
	width: 0;
	border-color: transparent transparent transparent white;
	border-width: 30px;
	border-style: solid;
	bottom: 12%;
	margin-bottom: 25px;
	z-index:1;
}

.overlayContainer .close {
	background-color: white;
	position: absolute;
	right: 1%;
	top: 2%;
}

.overlayContainer .left{
	background-color: white;
	position: absolute;
	left: 5%;
	right: 50%;
	top: 4%;
	bottom: 35px;
}

.overlayContainer .right{
	background-color: white;
	position: absolute;
	left: 50%;
	right: 5%;
	top: 4%;
	bottom: 35px;
}

.inner {
    display: table;
    margin: 0 auto;
	max-width:100%;
	max-height:100%;
}


/**
*
* Twitter Bird
*
*/

a.ttip{
display: inline-block;
    margin: 2px;
position: relative;
color: #444;
text-decoration: none;
-webkit-transition: all ease-in-out 0.2s;
-moz-transition: all ease-in-out 0.2s;
-o-transition: all ease-in-out 0.2s;
transition: all ease-in-out 0.2s;
}

#twitter{
    width=20px;
}