html {
background:url("background.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-size:16px; 
  margin: 0;
 padding: 0;
}
* {
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}

body {
font-family:'open_sansregular';
font-size:62.5%; /* 1em = 10px */
margin: 0;
padding: 0;
}


 
 #wrapper {
 max-width:90%;
 margin: 0 auto;
 padding:0;
 }
 
 

header {
font-family:"Octin Spraypaint Free", Arial, Helvetica, sans-serif;
text-align:center;
color:#FFFFFF;
width:100%;
margin: 4% 0 0 0; 
padding:0;
}



header h1  {
font-size:4.5em;
text-shadow: 1px 2px 2px #000;
}

h3.blue {
color:#98BDD8;
}

nav{
width: 60%;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	font-size:2em;
	text-align:center;

	}

	nav li {
	list-style:none;
	display:inline;
	padding:2%;
	border-radius:5px;
	background-color:#9accfb;

}

nav li a:link {
text-decoration:none;
color: #fcfcfc;
}

/* visited link */
nav li a:visited {
    color: #fcfcfc;
}

/* mouse over link */
nav li a:hover {
    color: #c49118;
}


/* selected link */
na li a:active {
    color: #c49118;
}

img.pos{
float:right;
margin-left:2px;
margin-bottom:1px;
}

img.left{
float:left;
margin: 0 10px 2px 1px;
}



aside{
color:#FFFFFF;
font-size:1.5em;
float:left;
width:20%;
margin-top:2.5%;
text-align:center;
border-radius:15px;
padding:0.5%;
}

ul.aside {
	font-size:1em;
	text-align:left;
	width:100%;
	margin:0;
	padding:0;
	list-style:none;
}

	
li.sideblue{
	padding:2%;
	margin-top:5px;
	border-radius:10px;
	background-color:#9accfb;
	}
	
li.sideyellow{
	border:1px solid #c49118;
	padding:2%;
	margin-top:5px;
	border-radius:10px;
	background-color:#c49118;
	}

li.home{
	width:25%;
	border:1px solid #c49118;
	padding:3%;
	margin-top:5px;
	border-radius:25px;
	background-color:#c49118;
	}	
	
li a:link {
text-decoration:none;
color: #fcfcfc;
}

/* visited link */
li a:visited {
    color: #fcfcfc;
}

/* mouse over link */
li a:hover {
    color: #fcfcfc;
}


/* selected link */
li a:active {
    color: #fcfcfc;
}

/*check if below being used*/

.center {
	text-align:center;
	}
	
section {
box-shadow: 1px 1px 4px #000;
background-color:#ffffff;
color:#696D70;
font-size:1.5em;
width:68%;
padding:1%;
margin-left:22%;
margin-right:5%
border:1px solid;
border-radius: 15px;
margin-top:5%;
}

section.margin {
width:68%;
padding:1%;
margin: 22% 5% 0 22%;

}

section.top {
width:96%;
margin-top:3%;
margin-left:2%;
margin-right:2%;
}

.circular {
	width: 250px;
	height: 250px;
	border-radius: 237.5px;
	-webkit-border-radius: 237.5px;
	-moz-border-radius: 237.5px;
	background:url(littleme.jpg)no-repeat;
	box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	position: absolute;
    left: 100px;
    top: 100px;
    z-index: -1;
	}

	
footer {
width:60%;
float:right;
clear:both;

}


/*media queries--------------------------------------------------------------------*/

/* Smartphones (portrait) ----------- */
@media only screen 
and (min-width: 0px)
and (min-device-width:0px)
 {
/* Styles */
html {
font-size:14px;
}

header {
margin:0;
}

header h1  {
font-size:3em;
}

nav{
font-size:2em;
	}
	
nav li {
	padding:1%;
}
		
aside{
font-size:1em;
width:25%;
}

li.sideblue{
	padding:5%;
}
	
li.sideyellow{
	padding:5%;
}

section {

width:72%;
padding:1%;
margin-left:26%;
margin-right:1%;
margin-top:10%; /*to check ajust landscape px?*/
}

section.margin {
width:96%;
margin-top:3%;
margin-left:2%;
margin-right:2%;
}

section.top {
width:96%;
margin-top:25%;

}



/*to be adjusted etc*/
#wrapper {
 max-width:100%;
 margin: 0 auto;
 padding:0;
 }
 
	
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-device-width:320px)
and (min-width : 320px)
 {
/* Styles */
html {
font-size:16px;
}

header {
margin:0;
}


header h1  {
font-size:3em;
}

nav{
font-size:2em;
width:100%;
border:none;
	}
	
nav li {
	padding:1%;
	
}
		
aside{
font-size:1em;
width:25%;
}

section {

width:72%;
padding:1%;
margin-left:26%;
margin-right:1%;
margin-top:7.5%;
}

section.margin {
width:96%;
margin-top:3%;
margin-left:2%;
margin-right:2%;
clear:left;

}

li.sideblue{
	padding:5%;
}
	
li.sideyellow{
	padding:5%;
}

/*to be adjusted etc*/
#wrapper {
 max-width:100%;
 margin: 0 auto;
 padding:0;
 }
 
 	
}


/* iPads (portrait and landscape) ----------- */ /*orientation for ipad only*/
@media only screen

and (min-width : 768px)

 {
/* Styles */
html {
font-size:16px;
}

header{
margin: 4% 0 0 0;
}

header h1  {
font-size:4em;
}

nav{
font-size:2em;
width: 60%;
	}
	
aside{
font-size:1.4em;
width:23%;
}

li.sideblue{
	padding:3%;
}
	
li.sideyellow{
	padding:3%;
}


#wrapper {
 max-width:90%;
 }

 
section {
margin-top:5%;
margin-left:25%;

}

section.margin {
margin-top:3%;
clear:left;
}

}





/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* STYLES GO HERE */
html {
font-size:16px;
}

header{
margin: 4% 0 0 0;
}

header h1  {
font-size:4.5em;
}

nav{
font-size:2em;
width: 60%;
	}
	
aside{
font-size:1.3em;
width:20%;
}

li.sideblue{
	padding:2%;
}
	
li.sideyellow{
	padding:2%;
}


section {

width:68%;
padding:1%;
margin-left:21%;
margin-right:5%
margin-top:5%;
}

section.margin {
width:68%;
padding:1%;
margin-left:21%;
margin-right:5%
margin-top:3%;
clear:none;
}
	
#wrapper {
 max-width:90%;
 margin: 0 auto;
 padding:0;
 }
 

}