@charset "utf-8";
/* CSS Document */
/*
font-family: 'Lora', serif;
font-family: 'Libre Baskerville', serif;
font-family: 'Domine', serif;
*/
body{margin:0px; padding:0px; font-size:100%; font-family: 'Domine', serif;}
.bg{background-image:url(images/bg.png); background-repeat:repeat;}

#banner{width:100%; height:auto; display:block; border-top:5px #000 solid;}
#banner1{width:80%;height:auto;display:block;position:absolute;margin-top:124px;}
#banner2{width:80%;height:auto; display:block; position:absolute;margin-top:124px; clear:both;}
#roller .title{color:#fff; font-size:1.8em; display: block; padding:3% 0 0 6%;}
#roller{width:100%; height:170px; display:block; background-color:#333333;}
main{clear:both;}
#roller p{color:#fff;}
.justify{text-align:justify;}

aside{width:30%; display:block; float:right;}
aside section{width:70%; display:block; float:left; margin-left:10%;}
aside .title{color:#000; font-family: 'Libre Baskerville', serif; font-size:1.2em; margin:0px; padding:4% 0 0 0;}
aside article{margin:15px 0 35px 0;}
aside .img{width:auto; height:200px; display:block; margin:15px 0 15px 0;}
aside .view a{color:#828282; text-transform:uppercase; font-size:0.750em; background-color:#cdc9c6; text-decoration:none; padding:10px;}

#container{width:70%; display:block; background-color:#31C9B9}
#container section{width:90%; margin:5% 0 5% 0; display:block; float:right;}
main{width:100%; display:block;}

section p{line-height:30px;}

.client{width:190px; height:150px; text-align:center; display:inline-block; background-color:#fff; vertical-align: text-top; border-radius:5px; margin:0; margin:15px 15px 0 0; box-shadow:2px 2px 2px 2px #ccc}

.thumbnail{width:188px; height:250px; display:inline-block; text-align:center; background-color:#fff; vertical-align: text-top; margin:auto; margin:20px 20px 0 0; box-shadow:2px 2px 2px 2px #ccc}
/*.thumbnail:nth-child(2){margin:0 17px 0 17px; margin-top:25px;}*/

.wrapper{max-width:1200px; display:block; margin:auto;}
.bullet li{line-height:30px; list-style:disc;}

h2{color:#fff; font-family: 'Libre Baskerville', serif; font-size:2em; margin:0px; padding:4% 0 0 0;}
h3{color:#000; font-family: 'Libre Baskerville', serif; font-size:1.3em; margin:0px; padding:4% 0 0 0;}
.center{text-align:center;}
#map{width:350px; height:350px; display:block; float:left; margin:15px 15px 15px 0;}
footer{background-image:url(images/footerbg.jpg); background-repeat:repeat-x; padding:15px 0 15px 0; display:block; clear:both; margin-top:20px;}
footer table td{margin:0px; padding:0px; width:25%;}
footer p{font-size:0.875em; line-height:20px; color:#78797c; margin:5px 0 5px 0; padding:0px;}
footer .social img{margin:0 5px 0 5px;}
footer .link{display:inline-block; margin:0px; padding:0px; vertical-align: text-top;}
footer .link li{list-style:none; margin:0px; padding:0px;}
footer .link a{color:#78797c; text-decoration:none; font-size:0.875em;}
footer .link a:hover{color:#000;}


header {
    background-color: #8fcae5;
}
header:after {
    content: " ";
    display: table;
    clear: both;
}


.main .dev-output pre {
    overflow: auto;
    max-height: 500px;
    background-color: #EBF4FD;
    padding: 0 1em 1em;
}
.brand {
    float: left;
    height: 80px;
}

.logo {
    line-height: 40px;
    width: auto;
    height: auto;
    letter-spacing: 2px;
    display: block;
    float: left;
    padding: 0;
}

.rm-nav {
    letter-spacing: 1px;
}

.rm-toggle.rm-button {
    margin-top: 25px;
}

.rm-css-animate.rm-menu-expanded {
    max-height: none;
    display: block;
}
.rm-container.rm-layout-expanded {
    float: right;
}
.rm-nav li a,
.rm-top-menu a {
    padding: .75rem 1rem;
    font-size: .9em;
    line-height: 1.5rem;
    text-transform: uppercase;
}
.rm-layout-expanded .rm-nav > ul > li > a,
.rm-layout-expanded .rm-top-menu > .rm-menu-item > a {
    height: 80px;
    line-height: 80px;
}

<!-- form-->
label {font-size: 1em;}
	
form {float: left; padding: 20px; margin: 20px;	width: 90%;}	
	
fieldset {border: none;}
	
#user-details { float: left; width: 30%;}
	
#user-message { float: right; width: 60%;}
	
input, textarea, select { padding: 10px; margin: 10px 0 15px 0; background: #fff; width: 90%; font-size: 1em; color: #555; border: 1px #ddd solid;
		-webkit-box-shadow: 0px 0px 4px #aaa; -moz-box-shadow: 0px 0px 4px #aaa; box-shadow: 0px 0px 4px #aaa;	-webkit-transition: background 0.3s linear;}
	
textarea {width: 90%; height: 200px;}
	
input:hover, textarea:hover {background: #eee;}
		
input.submit {width: 150px; color: #eee; text-transform: uppercase; margin-top: 10px;background-color: #18a5cc;	border: none;
		-webkit-transition: -webkit-box-shadow 0.3s linear;	-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#18a5cc), to(#0a85a8)); background: -moz-linear-gradient(25% 75% 90deg,#0a85a8, #18a5cc);		
	} 
	
input.submit:hover {-webkit-box-shadow: 0px 0px 20px #555;	-moz-box-shadow: 0px 0px 20px #aaa; box-shadow: 0px 0px 20px #555;	
		cursor:  pointer; } 

/* Media Queries (laptop, desktop view*/
@media screen and (max-width: 1280px){
.logo {width:100%; display:block; margin:auto;}
.logo img{width:80%; margin:auto;}
#banner1{width:70%; height:auto;}
#banner1 img{width:100%; height:auto;}
footer table td{margin:0px; padding:0px; width:25%; float:left; margin-bottom:15px;}
}

/* Media Queries (ipad landscape view)*/
@media screen and (max-width: 1024px) {
.logo {width:100%; height:auto; margin:auto; text-align:center;}
.logo img{width:90%; margin:auto;}
#roller{width:100%; height:auto;}
.wrapper{padding:5px;}
#banner1{width:100%; display:block; height:auto; clear:both;}
#banner1 img{width:100%;}
aside{width:100%; display:block; height:auto; clear:both; margin:300px 0 0 0; padding:0px;}
aside section{width:90%; display:block; margin:0px; padding:10px;}
#roller{padding:25px 0 25px 0; margin:0px; width:100%; display:block;}
footer table td{margin:0px; padding:0px; width:25%; float:left; margin-bottom:15px;}
#container{width:100%; display:block; background-color:#31C9B9}
#container section{width:97%; text-align:center; margin:5% 2% 5% 2%; padding:0px; display:block; float:right;}
h3,p {text-align:left;}
.bullet li{text-align:left;}
form{width:100%; margin:0px; padding:0px;}
#user-details { float: left; width: 100%; margin:0px; padding:0px;}	
#user-message { float: left; width: 100%; margin:0px; padding:0px;}
}


/* Media Queries (ipad landscape view)*/
@media screen and (max-width: 800px) {
.logo {width:100%; height:auto; margin:auto; text-align:center;}
.logo img{width:90%; margin:auto;}
#roller{width:100%; height:auto;}
.wrapper{padding:5px;}
#banner1{width:100%; display:block; height:auto; clear:both;}
#banner1 img{width:100%;}
aside{width:100%; display:block; height:auto; clear:both; margin:220px 0 0 0; padding:0px;}
aside section{width:90%; display:block; margin:0px; padding:10px;}
#roller{padding:25px 0 25px 0; margin:0px; width:100%; display:block;}
footer table td{margin:0px; padding:0px; width:25%; float:left; margin-bottom:15px;}
#container{width:100%; display:block; background-color:#31C9B9}
#container section{width:95%; text-align:center; margin:5% 2% 5% 2%; padding:0px; display:block; float:right;}
h3,p {text-align:left;}
.bullet li{text-align:left;}
form{width:100%; margin:0px; padding:0px;}
#user-details { float: left; width: 100%; margin:0px; padding:0px;}	
#user-message { float: left; width: 100%; margin:0px; padding:0px;}
}

/* Media Queries (ipad portrait view)*/
@media screen and (max-width: 640px) {
.logo {width:100%; height:auto; margin:auto; text-align:center;}
.logo img{width:90%; margin:auto;}
#roller{width:100%; height:auto;}
.wrapper{padding:5px;}
#banner1{width:100%; display:block; height:auto; clear:both;}
#banner1 img{width:100%;}
aside{width:100%; display:block; height:auto; clear:both; margin:190px 0 0 0; padding:0px;}
aside section{width:90%; display:block; margin:0px; padding:10px;}
#roller{padding:25px 0 25px 0; margin:0px; width:100%; display:block;}
footer table td{margin:0px; padding:0px; width:100%; float:left; margin-bottom:15px;}
#container{width:100%; display:block; background-color:#31C9B9}
#container section{width:95%; text-align:center; margin:5% 2% 5% 2%; padding:0px; display:block; float:right;}
h3,p {text-align:left;}
.bullet li{text-align:left;}
form{width:100%; margin:0px; padding:0px;}
#user-details { float: left; width: 100%; margin:0px; padding:0px;}	
#user-message { float: left; width: 100%; margin:0px; padding:0px;}
}

/* Media Queries (iphone landscape view)*/
@media screen and (max-width: 480px) {
.logo {width:100%; height:auto; margin:auto; text-align:center;}
.logo img{width:90%; margin:auto;}
#roller{width:100%; height:auto;}
.wrapper{padding:5px;}
#banner1{width:100%; display:block; height:auto; clear:both;}
#banner1 img{width:100%;}
aside{width:100%; display:block; height:auto; clear:both; margin:130px 0 0 0; padding:0px;}
aside section{width:90%; display:block; margin:0px; padding:10px;}
#roller{padding:25px 0 25px 0; margin:0px; width:100%; display:block;}
footer table td{margin:0px; padding:0px; width:100%; float:left; margin-bottom:15px;}
#container{width:100%; display:block; background-color:#31C9B9}
#container section{width:95%; text-align:center; margin:5% 2% 5% 2%; padding:0px; display:block; float:right;}
h3,p {text-align:left;}
.bullet li{text-align:left;}
form{width:100%; margin:0px; padding:0px;}
#user-details { float: left; width: 100%; margin:0px; padding:0px;}	
#user-message { float: left; width: 100%; margin:0px; padding:0px;}
}

/* Media Queries (iphone portrait view)*/
@media only screen and (max-width : 360px) {
.logo {width:100%; height:auto; margin:auto; text-align:center;}
.logo img{width:90%; margin:auto;}
#roller{width:100%; height:auto;}
.wrapper{padding:5px;}
#banner1{width:100%; display:block; height:auto; clear:both;}
#banner1 img{width:100%;}
#banner1 iframe{width:100%; height:auto;}
aside{width:100%; display:block; height:auto; clear:both; margin:130px 0 0 0; padding:0px;}
aside section{width:90%; display:block; margin:0px; padding:10px;}
#roller{padding:25px 0 25px 0; margin:0px; width:100%; display:block;}
footer table td{margin:0px; padding:0px; width:100%; float:left; margin-bottom:15px;}
#container{width:100%; display:block; background-color:#31C9B9}
#container section{width:95%; text-align:center; margin:5% 2% 5% 3%; padding:0px; display:block; float:right;}
#container section img{width:100%; float:left;}
h3,p {text-align:left;}
.bullet li{text-align:left;}
form{width:100%; margin:0px; padding:0px;}
#user-details { float: left; width: 100%; margin:0px; padding:0px;}	
#user-message { float: left; width: 100%; margin:0px; padding:0px;}
}