@charset "utf-8";

/*  BASIC PAGE SETUP ============================================================================= */
body {
margin:0px;
background-color: #FFFFFF;
color: #656565;
font-family: 'Quicksand', Verdana, Arial, sans-serif;
font-weight: 400;
font-size: 15px;
}
div, ul, li, img, form {
margin:0px;
padding:0px;
}
iframe, object, embed {
display:block;
margin:0px;
}
h1 {
font-family: 'Quicksand', sans-serif;
font-weight: 700;
font-size:30px;
text-align:left;
color: #476F8C;
margin:10px 0px 10px 0px;
}
h2 {
font-family: 'Quicksand', sans-serif;
font-weight: 700;
font-size:20px;
text-align:left;
color: #000000;
margin:5px 0px 5px 0px;
}
h3 {
font-family: 'Quicksand', sans-serif;
font-weight: 700;
font-size:20px;
text-align:left;
color: #476F8C;
margin:5px 0px 5px 0px;
}
a:active {
text-decoration:none;
color:#1896BA;
}
a:link {
text-decoration:none;
color:#1896BA;
}
a:visited {
text-decoration:none;
color:#1896BA;
}
a:hover {
color:#999999;
text-decoration:none;
}
select {
font-size:12px;
}

/*  IMAGES ============================================================================= */
img {
margin:0px;
display:block;
border :0px;
max-width:100%;
height:auto;
}
img a:hover {
opacity:0.5;
}
img.float-left {
float:left;margin:0px 10px 0px 0px;
}
img.float-right {
float:right;margin:0px 0px 0px 10px;
}
table img {
display:inline;
max-width:100%;
height:auto;
}

/* IFRAMES============================================================================= */
.framework-iframe {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.framework-iframe iframe,   
.framework-iframe object,  
.framework-iframe embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

/* FRAMEWORK============================================================================= */
#framework {
width:100%;
position:relative;
margin:0px;
text-align:left;
}
#framework-header {
width:100%;
background-color: #FFFFFF;
border-bottom:2px solid #476F8C;
}
#header {
width:auto;
min-width:320px;
max-width:1200px;
min-height:35px;
line-height:35px;
position:relative;
margin-right:auto;
margin-left:auto;
vertical-align:bottom;
color:#FFFFFF;
font-size:16px;
font-weight:bold;
}
#header-logo {
margin-top:2%;
margin-bottom:2%;
}
#header-social {
text-align:right;
margin-top:2%;
margin-bottom:2%;
}
#header-social img {
display:inline;
vertical-align:middle;
}
#framework-buttons {
width:100%;
background-color: #476F8C;
}
#buttons {
width:auto;
min-width:320px;
max-width:1200px;
min-height:35px;
position:relative;
margin-right:auto;
margin-left:auto;
font-family: 'Quicksand', sans-serif;
color:#FFFFFF;
}
#framework-animation {
width:100%;
background-color: #FFFFFF;
}
#animation {
width:auto;
min-width:320px;
max-width:1200px;
position:relative;
margin:0px;
margin-right:auto;
margin-left:auto;
}
#animation img{
width:100%;
height:auto;
max-width:1200px;
display:block;
}
#framework-content {
width:100%;
background-color:#FFFFFF;
background-image:url(images/bg.png);
background-repeat:repeat-x;
background-position:center top;
}
#content {
width:auto;
min-width:320px;
max-width:1200px;
position:relative;
margin:0px;
padding:0px;
margin-right:auto;
margin-left:auto;
padding-bottom:15px;
}
#content img {
max-width:100%;
margin-left:1%;
margin-right:1%;
margin-bottom:1%;
}
#content ul {
margin-left:5%;
}
.content-main {
width:74.6%;
background-color: #FFFFFF;
}
.content-menu {
width:23.8%; 
background-color: #FFFFFF;
}
#framework-footer {
width:100%;
background-color: #476F8C;
}
#footer {
width:auto;
min-width:320px;
max-width:1200px;
position:relative;
margin-right:auto;
margin-left:auto;
padding:0px;
text-align:left;
font-size: 12px;
color: #DAE2E8;
}
#footer p {
margin:0.5%;
line-height:20px;
}
#footer ul {
list-style:none;
}
#footer li {
height:25px;
}
#footer a:active, #footer a:link, #footer a:visited {
text-decoration: none;
color: #FFFFFF;
}
#footer a:hover {
color: #DAE2E8;
text-decoration: none;
}
#footer-menu{
padding-left:2%;
padding-right:2%;
padding-bottom:2%;
}
#framework-copyright {
width:100%;
background-color: #FFFFFF;
border-top:1px solid #F0F3F5;
}
#copyright {
width:auto;
min-width:320px;
max-width:1200px;
height: 35px;
line-height: 35px;
position:relative;
margin-right:auto;
margin-left:auto;
text-align: left;
font-size: 12px;
}

/* MENUS============================================================================= */
#header-buttons {
position:relative;
font-family: 'Quicksand', sans-serif;
font-size:16px;
color:#FFFFFF;
}
#header-buttons ul {
width:auto;
height: 35px;
margin-left:1%;
margin-right:1%;
bottom:0px;
left:0px;
list-style:none;
vertical-align:bottom;
}
#header-buttons li {
height: 35px;
line-height: 35px;
margin-right:1%;
float:left;
text-align:center;
}
#header-buttons li:first-child {
margin-left:0px;
}
#header-buttons li a {
padding:0px 5px 0px 5px;
}
#header-buttons li a:active, #header-buttons li a:link, #header-buttons li a:visited {
display:block;
text-decoration:none;
height: 35px;
line-height: 35px;
color: #FFFFFF;
}
#header-buttons li .selected a {
color: #F6D017;
}
#header-buttons li a:hover {
background-color:#F6F6F5;
color: #476F8C;
}

/* FORMS============================================================================= */
input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]):not([type=image]):not([type=submit]) {
width:95%;
height:25px;
border:1px solid #C5C5C5;
background:#DAE2E8;
}
input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]):not([type=image]):not([type=submit]):hover {
border:1px solid #C5C5C5;
background:#F0F3F5;
}
textarea {
width:90%;
border:1px solid #C5C5C5;
background:#DAE2E8;
}
textarea:hover {
border:1px solid #C5C5C5;
background:#F0F3F5;
}
select {
width:95%;
height:25px;
border:1px solid #C5C5C5;
background:#DAE2E8;
}
select:hover {
border:1px solid #C5C5C5;
background:#FFFFFF;
}
.form-details {
padding-left:5%;
height:30px;
line-height:30px;
background-color:#476F8C;
color:#FFFFFF;
font-family: 'Quicksand', sans-serif;
font-size:18px;
}
.form-labels {
width:23%;
max-width:250px;
background-color:#DAE2E8;
padding:1%;
}
.form-fields {
width:73%;
background-color:#FFFFFF;
padding:1%;
}
.form-fields ul {
padding-left:5%;
}
.form-fields img {
width:auto;
max-width:auto;
padding:1%;
}
.form-button {
max-width:100%;
height:29px;
line-height:17px;
padding-left:10px;
padding-right:10px;
background:#476F8C;
border:1px solid #FFFFFF;
font-family: 'Quicksand', sans-serif;
font-size:20px;
text-transform:capitalize;
color:#FFFFFF;
text-align:center;
float:right
}
.form-button:hover {
border:1px solid #476F8C;
background:#FFFFFF;
color:#476F8C;
}

/* CONTENT ============================================================================= */
.box-features {
padding:1.5%;
background-color:#FFFFFF;
border:1px solid #F0F3F5;
border-radius:5px 5px 5px 5px ;
-moz-border-radius:5px 5px 5px 5px ;
-webkit-border-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
}
.box-features h2 {
height:35px;
line-height:35px;
background-color:#476F8C;
color:#FFFFFF;
font-size:15px;
text-align:center;
overflow:hidden;
}
.box-features a:active, .box-features a:link, .box-features a:visited {
color:#FFFFFF;
}
.box-features a:hover {
color:#D7D7D7;
}
.box-features img {
width:98%;
margin-left:auto;
margin-right:auto;
}
.box-content {
width:auto;
padding-left:2%;
padding-right:2%;
background-color:#FFFFFF;
border:1px solid #476F8C;
}
.box-navigation {
width:auto;
padding-top:3%;
padding-bottom:3%;
background-color:#FFFFFF;
border:1px solid #476F8C;
}
.box-navigation h2 {
padding-left:2%;
}
.box-navigation ul {
list-style:none;
margin:0px;
padding:0px;
padding-right:5%;
}
.box-navigation li {
margin-top:3%;
margin-bottom:3%;
padding:0px;
text-align:left;
font-size:15px;
}
.box-navigation li a {
width:auto;
height:30px;
line-height:30px;
display:block;
padding:0px 5px 0px 5px;
background-color:#DAE2E8;	
}
.box-navigation li a:active, .box-navigation li a:link, .box-navigation li a:visited {
color:#476F8C;
}
.box-navigation li a:hover {
background-color:#476F8C;
color:#FFFFFF;
}
.box-quote {
padding:3%;
background-color:#FFFFFF;
border:1px solid #DAE2E8;
border-radius:5px 5px 5px 5px ;
-moz-border-radius:5px 5px 5px 5px ;
-webkit-border-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;	
}
.copyright {
padding-left:1%;
padding-right:1%;
}
.navigation {
font-weight:bold;
font-size:11px;
}
.photo {
border:#BAC6DC 1px solid;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
padding-top:5px;
text-align:center;
}
.photo img {
border:1px solid #F45B19;
margin-left:auto;
margin-right:auto;
margin-top:2%;
margin-bottom:2%;
}
.video {
border:#BAC6DC 1px solid;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
text-align:center;
}
#lightbox {
width:100%;
height:100%;
z-index:1200;
position:fixed;
padding:0px;
top:0px;
left:0px
}
#lightbox #light {
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
background:#476F8C;
text-align:center;
z-index:-1;
filter:alpha(opacity=50);
opacity:0.5;
}
#lightbox #box {
width:96%;
max-width:650px;
position:relative;
margin:0px auto;
padding:2%;
background:#FFFFFF;
overflow:hidden;
}
#lightbox img {
border:1px solid #F45B19;
margin-left:auto;
margin-right:auto;
}
.title {
color:#FFFFFF;
font-size:12px;
font-weight:bold;
}
.heading {
font-size:12px;
font-weight:bold;
color:#FF9933
}
.textsmall {
font-size:10px;
font-weight:bold;
}
.textcolour {
font-size:12px;
color:#476F8C;
}
.texttiny {
font-size:10px;
color:#FFFFFF
}
.quote {
font-size:18px;
}
.hide-mini {
display:inline;
}
.hide-midi {
display:inline;
}
.hide-maxi {
display:none;
}

@media only screen and (min-width:481px) {
/*   MAKE LAYOUT RESPONSIVE at 768px FOR IPAD PLUS ================================================================ */
#animation {
background-image: url(images/header.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size:100%;
}
}

@media only screen and (max-width:768px) {
/*   MAKE LAYOUT RESPONSIVE at 768px FOR IPAD PORTRAIT ================================================================ */

#header {
min-height:80px;
}
#header .column { 
margin:0px;
}
#header .bg {
height:35px;
line-height:35px;
background-color:#000000;
text-align:center;
}
#header-social {
text-align:center;
}
#header-buttons {
font-size:14px;
}
#content img {
width:250px;
max-width:100%;
margin-left:1%;
margin-right:1%;
margin-bottom:1%;
}
.content-main {
width:100%;
}
.content-menu {
width:100%;
margin-left:0px;
}
.box-content {
border:0px solid #476F8C;
}
.box-navigation {
border:0px solid #476F8C;
}
#content .box-navigation ul {
margin-left:2%;
}
.box-navigation ul {
padding-right:2%;
}
.hide-mini {
display:inline;
}
.hide-maxi {
display:inline;
}
.hide-midi {
display:none;
}

/* GRID OF THREE TURNS INTO A GRID OF TWO */
#footer .stretch {
width:100%;
}

}

@media only screen and (max-width:480px) {
/* MAKE LAYOUT RESPONSIVE at 480px FOR IPHONE LANDSCAPE ============================================ */

/* CONTENT ============================================================================= */
#framework-search {
height:39px;
position:relative;
background-color:#EFE7DE;
border-bottom:1px solid #FFFFFF;
}
#animation {
width:100%;
min-height:120px;
background-image: url(images/header-mini.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size:100%;
}
#header {
font-size:14px;
}
#header-buttons {
width:100%;
margin:0px;
padding-top:5px;
position:relative;
background-color:#476F8C;
}
#header-buttons ul {
height: 70px;
}
#header-buttons li {
width:32.2%;
max-width:32.2%;
margin-left:0.5%;
margin-right:0.5%;
font-size:14px;
float:left;
}
#header-buttons li:first-child {
margin-left:0.5%;
margin-right:0.5%;
}
#header-buttons li:nth-child(3n+1) { 
clear:both;
}
#content .padding2h {
padding-left:3%;
padding-right:3%;
padding-bottom:3%;
}
#content img {
width:100%;
max-width:100%;
margin-left:0px;
margin-right:0px;
margin-bottom:1%;
}
#footer {
font-size:14px;
}
#footer li {
width:32.2%;
margin:0.5%;
float:left;
}
.box-features {
padding:5%;
}
.copyright {
text-align:center;
}
input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]):not([type=image]):not([type=submit]) {
width:90%;
max-width:90%;
}
textarea {
width:90%;
}
.hide-maxi {
display:inline;
}
.hide-midi {
display:inline;
}
.hide-mini {
display:none;
}
}