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

/* font property*/
@font-face {
    font-family: 'yanone_kaffeesatz_regularRg';
    src: url('../fonts/yanonekaffeesatz-regular-webfont.eot');
    src: url('../fonts/yanonekaffeesatz-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/yanonekaffeesatz-regular-webfont.woff2') format('woff2'),
         url('../fonts/yanonekaffeesatz-regular-webfont.woff') format('woff'),
         url('../fonts/yanonekaffeesatz-regular-webfont.ttf') format('truetype'),
         url('../fonts/yanonekaffeesatz-regular-webfont.svg#yanone_kaffeesatz_regularRg') format('svg');
    font-weight: normal;
    font-style: normal;

}

h1, h2, h3, h4 {font-family: 'yanone_kaffeesatz_regularRg'}

h1{
	font-size: 2.66666666666667em; /*48px / 18px*/
	text-align: center;
}


a.link {
    display: block;
	width: 20px;
    height: 30px;
    width: auto;
	color: #ffffff;
	text-decoration: none;
	background-color: #01B2D1;
	text-align: center;
}

a:hover.link { 
    background-color: #53d6ed;
}


h2{
	color: #01B2D1;
}

h3{
	color: #ffffff;
}

html, body{
	font-family: Tahoma, Calibri, sans-serif;
	color: #2b2b2b
	font-size: 112.5%; /*18px*/
	line-height: 2em;
}
/* end of font property*/

#scale:hover img{
 transform: scale(0.8);
 -webkit-transform: scale(0.8); /* Safari */
 }
li{
	list-style-type:none;
}
/* headings */
/* end of headings */

/* body */
/* end of body */

/* header */
/* end of header */

/* nav */
nav ul{
	list-style-type: none;
}

nav ul li{
	display: inline;
}

nav ul li a{
	color: white;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0 2.5%;
	
}

nav ul li a:hover{
	color: #364C65;
}
/*Collapse navigation*/	
.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
		text-align: center;
		background-color: #468dcb;
    *zoom: 1;
}
	
nav a#pull {
	display: none;
}
header #logo {
	padding: 1% 0;
}
/****** Global */
*{
	margin: 01; padding: 0;
}

header, nav, section, footer {display: block;}
/* end of nav */

/* index page styling */
header, nav, section, footer {display: block;}

header {
	width: 80%;
	text-align: center;
	margin: 0% auto;
	/*background-color:#C99AEF;*/
}

section.row{
	clear: both;
	width: 80%;
	padding-top: 2%;
	margin: 0% auto;
	text-align: center;
	
	/*background-color:red;*/
}

.column{
	/*background-color: blue;*/
	display: block;
	width: 32.203389830508%; /* 380px / 1180px*/
	float: left;
	padding: 0 1.694915254237% 1.694915254237% 0;
}

.column:last-child{
	padding: 0 0 1.694915254237% 0;
}

img {max-width:100%; border: 0px;}

span {display: block;}

footer{
	clear: both;
	padding-top: .5%;
	text-align: center;
	color: #D7D7D7;
	background-color: #3F3F3F;
	clear: both;
	text-align: center;
}

.sub_footer{
	padding-top: 1%;
	clear: both;
	text-align: center;
	background-color:#dcdcdc;
	clear: both;
	text-align: center;
}

a img{
	border: 0px;
}
/*border boxes for header*/
div.background {
	background-image: url(../images/header_homepage.jpg);
	background-size:100% 100%;
		width: 100%;
		height: 450px;
		background-repeat: no-repeat;
}

div.transbox {
	width: 55%;
	height: 10%;
	font-size:24px;
  margin: 30px;
  background-color: #fff;
  opacity: 0.6;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox h2 h3 {
  margin: 5%;
  font-size:60px;
  font-weight: bold;
  color: black;
}
/* end of index page styling */

/*support page styling*/
.column_resources{
	display: block;
	width: 20%; /* 380px / 1180px*/
	float: left;
	padding: 0 1.694915254237% 1.694915254237% 0;
}
.column_supports1{
	text-align: left;
	display: block;
	width: 80%; /* 380px / 1180px*/
	float: left;
	padding: 0 1.694915254237% 1.694915254237% 0;
}

.column_member{
	text-align: left;
	display: block;
	width: 38%; /* 380px / 1180px*/
	float: left;
	padding: 2%;
}

.column_jobnet{
	text-align: left;
	display: block;
	width: 38%; /* 380px / 1180px*/
	float: left;
	padding: 2%;
}

.column_organisation{
	background-color: #e9e3e3;
	border-style: solid;
	border-color: #ffffff;
	border-bottom: thick solid #01B2D1;
	border-width: 5%;
	display: block;
	width: 30%; /* 380px / 1180px*/
	float: left;
	padding: 0 1.694915254237% 1.694915254237% 0;
}





@media (min-width:320px) and (max-width: 736px){ 
div.background {
	background-image: url(../images/header_homepage.jpg);
	background-size:100% 100%;
	width: 100%;
	height:100%;
	background-repeat: no-repeat;
}

div.transbox {
	width: 80%;
  margin: 30px;
  background-color: #ffffff;
  opacity: 0.6;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}

header, .row{
	/*background-color: blue;*/
	width: 90%;
}
#logo{
	width: 120px;
	margin: 0% auto;
}
.column{
	width: 100%;
	padding: 0 0 0 0;
	float: none;
}
.column_organisation{
	width: 100%;
	padding: 0 0 0 0;
	float: none;
}
.column_resources{
	width: 100%;
	padding: 0 0 0 0;
	float: none;
	background-color: blue;
}
.column_supports1{
	width: 100%;
	padding: 0 0 0 0;
	float: none;
}
.column_member{
	width: 100%;
	padding: 0 0 0 0;
	float: none;
}
.column_supports2{
	width: 100%;
	padding: 0 0 0 0;
	float: none;
}

.column_jobnet{
	width: 100%;
	padding: 0 0 0 0;
	float: none;
}
.column img{
	width: 50%;
	height: 50%;
}

nav ul {
		display: none;
		height: auto;
	}
	
	nav ul li {
		display: block;
		padding: 5px 0;
		border-top: dotted 1px #2b2b2b;
	}
	
	nav a#pull {
		display: block;
		color: #2b2b2b;
		text-decoration: none;
		text-transform: uppercase;
		background-color: #f1f1f1;
		border-top: dotted 1px #2b2b2b;
		border-bottom: dotted 1px #2b2b2b;
		height: 20px;
		padding: 10px;
		text-align: left;
		position: relative;
		margin: 0 0 10px 0;
	}
	
	nav a#pull:after {
		content:"";
		background: url(../images/nav-icon.png) no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 25px;
		top: 10px;
	}
}


/* Tablet */
@media (min-width:768px) and (max-width: 1024px){ 
header, .row{
	/*background-color: yellow;*/
	width: 90%;	
}

.column img{
	width: 220px;
	height: 220px;
	border-radius: 120px;
	/* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 120px; 

  /* Firefox 1-3.6 */
  -moz-border-radius: 120px; 
  
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 120px; 
}
	
}