@charset "UTF-8";
/* CSS Document */

body { background-color: #000;
}

#wrapper {
	position: relative;
	width: 95%;
	height: auto;
	margin:0 auto;
	padding: 0;
	[disabled]border: solid 1px yellow;
	z-index:5;
} 
.header {
	position:fixed;
	top:10px;
 	width:25%;
    height:35px;
    padding: 0 5% 0 0;
    margin-left: 70%;
    margin-right: auto;
    line-height:35px;
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size:2em;
    font-weight: lighter;
 	color: #FFF;
    letter-spacing:1px;
    z-index: 999;
} 
.header a {
	color: #FFF;
}
.header.scrolling {
	height:auto;
	background: rgba(0,0,0,0.8);
	color: #FFF !important;
}
.container {
       position:relative;
     [disabled]  width:auto;
      [disabled] height:auto;
       padding:20px;
       margin-top:35px;
       margin-left:auto;
       margin-right:auto;
       [disabled]border: solid 1px white;
   }

#content {
    position:relative;
    font-family: 'Quicksand', verdana, sans-serif;
	font-size: 0.9em;
	color: #FFF;
	text-align: left;
	z-index:5;
   }
   
 .background {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	padding-right:2%;
	background-color: #000;
	z-index:1;
	/* These three lines are for transparency in all browsers. */
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	opacity:.5;
   }
   .nav {
	width: 1170px;
	height: 35px;
	margin-left: auto;
	margin-right: auto;
 	padding-left: 10px;
 	padding-top: 0px;
 	padding-right: 10px;
 	padding-bottom: 0px;
	background-color: white;
}


#page-bg {
    background-image: url("../images/colour.jpg");
    background-repeat: no-repeat; 
	background-attachment: fixed; 
    background-position: center;
   -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  	z-index: -10;	
}

#about-bg {
    background-image: url("../images/6_2.jpg");
    background-repeat: no-repeat; 
	background-attachment: fixed; 
    background-position: center;
   -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  	z-index: -10;	
}
/*

When using the shorthand property the order of the property values is:

background-color
background-image
background-repeat
background-attachment
background-position

	width: 100%;
	height: 100%;
    overflow: auto;
    background: url("../images/cat.jpg");
	background-color: #000;
	background-size: 50% 50%;
	background-position: 50% 50%;
    background-repeat: no-repeat;
    z-index: 0;
}*/

.menu {
 	position:fixed;
 	top:10px;
 	width: 75%;
    height:35px;
    margin-left: 0;
    margin-right: auto;
    line-height:35px;
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size:1em;
    font-weight: normal;
    [disabled]border: solid 1px white;
    letter-spacing:2px;
    z-index:990;
}

.menu ul
{
    padding:0px;
    margin:0;
    list-style:none;
}
.menu ul li
{
    padding:0;
    margin:0;
   x-border-right:1px solid #FFFFFF;
    float:left;
    background:none; /*#333;*/
}
.menu ul li a
{
    color:white;
    display:block;
    text-decoration:none;
    padding:0 25px;
}
.menu ul li a:hover
{
    color:orange;
}
.menu ul li ul
{
     display: none; 
     width: auto;
     position:absolute;
     top:35px;
     padding:0px;
     margin:0px;
}
.menu ul li:hover ul
{
     display: block;
     position: absolute;
     margin: 0;
     padding: 0; 
}
.menu ul li:hover li
{
    float: none;
    list-style:none;
    margin:0px;
}
.menu ul li:hover li
{
    background:#666;
   [disabled]border-top:1px solid #FFFFFF;
}
.menu ul li:hover li a
{
    color: orange;
    padding:0 20px;
    display:block;
    width:auto;
}
.menu ul li li a:hover
{
    color:blue;
}

.menu #active a {
	color: blue;
	font-weight: bold;
}
.menu.scrolling {
	height: auto;
	background: rgba(0,0,0,0.8);
	color #777 !important;
}
/*
#footer {
	height: 100px;
	width: 1100px;
	position:relative;
	border: solid 1px black;
	margin-left: auto;
	margin-right: auto;
}
*/

#footer {
	display: block;
   	position:relative;
    bottom:0;
    right: 0;
    left: 0;
    margin: 2% auto 0 auto;
    width: 98%;
	padding: 1%;
   	height:5%;   /* Height of the footer */
    /* Fallback for web browsers that doesn't support RGBA */
    background: rgb(0, 0, 0);
    /* RGBa with 0.5 opacity */
    background: rgba(0, 0, 0, 0.5);
    font: 500 0.9em 'Quicksand', verdana, Geneva, sans-serif;
    color: #FFF;
    text-align: center;
}

#footer a{
	padding: 0px 10px;
	letter-spacing: 1px;
	color: #CCC;
}
#footer a:hover{
	color: orange;
}
/*-------- Misc classes-------*/
.horizontal {
	border: solid 1px #666;
	background-color: #FFFFFF;
	margin-right:10px;
	margin-left: 10px;
	padding: 15px;
	height: 500px;
	width: 500px;
	z-index:4;
}

.social-box {
	width: 320px;
	height: 100px;
	margin: 2% auto;
	[disabled]border: solid 1px red;
}
.slidingFacebook {
	float: left;
	width:100px;
	height:100px;
	/*Applying the Background Images*/
	background-image: url('../images/facebook.png'), url('../images/facebook_dk.png'); 
	background-repeat: no-repeat;
	margin-right: 2%;
	
	/*Positioning the Background Images*/
	background-position: 0px 200px, 0px 0px;
	
	/*Transition Parameters*/
	-webkit-transition: all 0.7s ease-in-out;
	-moz-transition: all 0.7s ease-in-out;
	-o-transition: all 0.7s ease-in-out;
	-ms-transition: all 0.7s ease-in-out;
	transition: all 0.7s ease-in-out;
}

.slidingFacebook:hover {
	background-position: 0px 0px, 0px 0px;
}
.slidingLinkedin {
	float: left;
	width:100px;
	height:100px;
	/*Applying the Background Images*/
	background-image: url('../images/linkedin.png'), url('../images/linkedin_dk.png'); 
	background-repeat: no-repeat;
	margin-right: 2%;
	
	/*Positioning the Background Images*/
	background-position: 0px 200px, 0px 0px;
	
	/*Transition Parameters*/
	-webkit-transition: all 0.7s ease-in-out;
	-moz-transition: all 0.7s ease-in-out;
	-o-transition: all 0.7s ease-in-out;
	-ms-transition: all 0.7s ease-in-out;
	transition: all 0.7s ease-in-out;
}

.slidingLinkedin:hover {
	background-position: 0px 0px, 0px 0px;
}
.slidingGoogle {
	float: left;
	width:100px;
	height:100px;
	/*Applying the Background Images*/
	background-image: url('../images/googlePlus_dk.png'), url('../images/googlePlus.png'); 
	background-repeat: no-repeat;
	margin-right: 2%;
	
	/*Positioning the Background Images*/
	background-position: 0px 200px, 0px 0px;
	
	/*Transition Parameters*/
	-webkit-transition: all 0.7s ease-in-out;
	-moz-transition: all 0.7s ease-in-out;
	-o-transition: all 0.7s ease-in-out;
	-ms-transition: all 0.7s ease-in-out;
	transition: all 0.7s ease-in-out;
}

.slidingGoogle:hover {
	background-position: 0px 0px, 0px 0px;
}
/* Start Sprite */
.social1 {
float: left;
width: 23%;
height: 0;
padding-bottom: 24%;
margin:0 1%;
background-image: url('../images/facebook_dk.png'), url('../images/facebook.png');
background-size: 100%;
background-repeat: no-repeat;
display:block;


	/*Positioning the Background Images*/
	background-position: 0px 0px, 0px 0px;

/*Transition Parameters*/
	-webkit-transition: all 0.7s ease-in-out;
	-moz-transition: all 0.7s ease-in-out;
	-o-transition: all 0.7s ease-in-out;
	-ms-transition: all 0.7s ease-in-out;
	transition: all 0.7s ease-in-out;
}
.social1:hover {
 width: 23%;
height: 0;
padding-bottom: 24%;
background-size: 100%;
background-repeat: no-repeat;
display:block;
	background-position: 0 -3000%, 0 0;
}

.social2 {
float: left;
width: 23%;
height: 0;
padding-bottom: 24%;
margin:0 1%;
background-image:  url('../images/googlePlus_dk.png'), url('../images/googlePlus.png'); 
background-size: 100%;
background-repeat: no-repeat;
display:block;


	/*Positioning the Background Images*/
	background-position: 0px 0px, 0px 0px;

/*Transition Parameters*/
	-webkit-transition: all 0.7s ease-in-out;
	-moz-transition: all 0.7s ease-in-out;
	-o-transition: all 0.7s ease-in-out;
	-ms-transition: all 0.7s ease-in-out;
	transition: all 0.7s ease-in-out;
}
.social2:hover {
 width: 23%;
height: 0;
padding-bottom: 24%;
background-size: 100%;
background-repeat: no-repeat;
display:block;
 /* Use ONLY percents here */
	background-position: 0 -3000%, 0 0;
}

.social3 {
float: left;
width: 23%;
height: 0;
padding-bottom: 24%;
margin:0 1%;
background-image: url('../images/linkedin_dk.png'), url('../images/linkedin.png');
background-size: 100%;
background-repeat: no-repeat;
display:block;


	/*Positioning the Background Images*/
	background-position: 0px 0px, 0px 0px;

/*Transition Parameters*/
	-webkit-transition: all 0.7s ease-in-out;
	-moz-transition: all 0.7s ease-in-out;
	-o-transition: all 0.7s ease-in-out;
	-ms-transition: all 0.7s ease-in-out;
	transition: all 0.7s ease-in-out;
}
.social3:hover {
 width: 23%;
height: 0;
padding-bottom: 24%;
background-size: 100%;
background-repeat: no-repeat;
display:block;
background-position: 0 -3000%, 0 0; /* Use ONLY percents here */
}

/* @end */

.left {
	position: relative;
	[disabled]float: left;
	height: auto;
	width: 55%;      /*45%;*/
	margin: 5% 2% 2% 2%;
	padding: 2%;
	[disabled]border: 1px solid #F30;
	background-color: none;
}
.left p {
	font-weight: 600;
}
.left h2 {
	padding:10px 0; 
}
.right {
	position: relative;
	[disabled]float: right;
	height: auto;
	width: 45%;
	margin: 5% 2% 2% 50%;
	padding: 2%;
	border: 1px solid #F30;
	background-color: none;
	
}
.light {
	position: relative;
	[disabled]float: left;
	height: auto;
	width: 95%;
	margin: 0 2%;
	padding: 2%;
	[disabled]border: 1px solid #F30;
	background-color: #FFF;
	color: #333;
	text-align: center;
}
.light p {
	font-weight: 600;
	color: #333;
	text-align: center;
}
.light h1 {
	 
	color: #333;
}
.light h2 {
	padding:10px 0; 
	color: #333;
}
.dark {
	position: relative;
	[disabled]float: left;
	height: auto;
	width: 95%;
	margin: 0 2%;
	padding: 2%;
	[disabled]border: 1px solid #F30;
	background-color: #000;
	color: #FFF;
	text-align: center;
}
.dark p {
	font-weight: 600;
	color: #FFF;
	text-align: center;
}
.dark h1 {
	color: #FFF;
}
.dark h2 {
	padding:10px 0; 
	color: #FFF;
}
.align-center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.clr {clear: both;}

/*--- Let's throw in some variation ---*/

.main-textDk {
	width: 96%;
	padding: 2%;
	margin: 0 auto;
	background:#000;
	text-align: center;
}

.main-textLt {
	width: 96%;
	padding: 2%;
	margin: 0 auto;
	background:#FFF;
	text-align: center;
}




/*---- tags------*/
p {
	margin: 2% 3%;
 	font-family: 'Quicksand', verdana, Geneva, sans-serif;
    font-size:1.2em;
    color: #FFF;
}
h1 {
 	font-family: 'Quicksand', verdana, Geneva, sans-serif;
    font-size:2.2em;
    font-weight: 500;
    color: #FFF;
    margin: 0;
}
h2 {
	font-family: 'Quicksand', verdana, Geneva, sans-serif;
    font-size:1.5em;
    font-weight: 600;
}
hr {
	[disabled]border-style: dotted;
	border: dotted 1px #666;
	}
/* Hyperlinks ------*/
a:link { color: #FFF;}
a:visited { color: #FFF;}
a:hover { color: orange;}
a:active { color: #FFF;}

@media screen and (max-width: 600px) { 

	.header {font-size:150%; height: auto; line-height:auto; background-color: #000;}
	.header a {font-size:100%;}
	.menu { height: auto; background-color: #000;}
    .left { width: 95%;
    		padding: 8% 4%;
    		background: black; }
    		
   .left h2 {font-weight: 600;}
   .left p { font-weight: 600;}
   .social-box {width:90%;}
	.social-box a {font-size:100% !important;}

}
@media screen and (max-width: 320px) {
   .social-box a {font-size:100% !important;}
}