html, body {
	height: 100%;
	font-family: 'Open Sans', sans-serif;
	 margin: 0 0 250px; 
	 color:#444;
}

.ui-widget {font-family: 'Open Sans', sans-serif;}
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -250px; /* the bottom margin is the negative value of the footer's height */
}

h1, h2, h3, h4{font-family: 'Roboto Slab', serif; font-weight:400;}

h1{color:#EC6438;}

h2,h3,h4{color:#444;}

h3{font-size:1.5em; color:#777;}

p,li,td{line-height:150%; letter-spacing: 0.03em;}


/* //////////////// NAV ////////////////// */

.nav-outer{
	width:100%;
	background:#ED6439;
}

.nav{
	max-width:1024px;
	height:80px;
	margin:auto;
}

.nav .logo{
	background:url(../images/learnamic-logo.png) no-repeat 0 20px;
	width:143px;
	height:40px;
	padding: 30px 5px 5px;
	float:left;
	cursor:pointer;
}

.nav ul{
	padding:0;
	margin:0;
	float:left;
}

.nav-inner{
	width:72%;
	float:right;
}

.nav-inner .list{float:right;}

.nav li{
	list-style-type:none;
	float:left;	
	padding-top: 25px;
}


.nav ul a{
	font-size:.9em;
	color:#fff;	
	padding:40px 15px 15px;
	text-decoration:none;
	text-shadow: 0px -1px 0px rgba(221, 84, 47, 1);
}

.nav ul a:hover{

}

.list{position:relative;}

.current-tri{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 15px 15px 15px;
	border-color: transparent transparent #ffffff transparent;
	position:absolute;
	top:80px;
}

.current-tri-inner{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 15px 0 15px;
	border-color: #ED6439 transparent transparent transparent;
	position:absolute;
	top:80px;
	left:-118%;
}

.current-tri-inner.ps{left:16%;}
.current-tri-inner.ow{left: 13%;}
.current-tri-inner.cu{left: 50%;}
.block.ps{width:15px; height:15px; position:absolute; left:16%;color:#ED6439;top:65px;}

/* //////////////// BODY ////////////////// */

.ui-widget-content {background:none; border:0; border-radius:none;}
.ui-widget-header {background:none; border:0;border-radius:none;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {background:none;}
.ui-tabs-panel{border-top:1px solid #999 !important; overflow:auto;}
.ui-tabs .ui-tabs-nav li {border:0; background:#fff;}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {border:1px solid #999; border-bottom:0;}
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {color:#333;}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {color:#ed6439;}
#tabs{margin-top:60px;}

.process{
	background:#f7f7f7;
	clear:both;
	margin-top:200px;	
	padding-top:20px;
}

.section{
	max-width:1024px;
	margin:0px auto;
	padding:40px 0;
}

/* Main Headings*/

.main-header h1{
	color:#ED6439;
	font-size:2.2em;
	width:55%;
	float:left;
	text-align:center;
}

.main-header.sub{
	clear:both;
}

.main-header.sub h2{
	color:#3b626b;
	font-size:2em;
	width:40%;
	float:left;
	text-align:center;
}

.main-header .header-line{
	border-bottom:1px solid #999;
	display:block;
	width:20%;
	margin:5% 1%;
	float:left;
}

.main-header.sub .header-line{
	border-bottom:1px solid #999;
	width:28%;
	margin:4% 1%;
}

/* End of Main Headings*/

/* Main Buttons*/

.main-btn-cont{
	width:28%;
	margin:2.6%;
	float:left;
	max-height:280px;
}
	
.main-btn-cont a{
	display:block;
	height:280px;
	position:relative;
}

.main-btn-cont img{
	position:absolute;	
	width:100%;
	max-width:286px;
	height:auto;
}

.main-btn-cont h4{text-align:center; font-size:1.1em;}

/* End of Main Buttons*/

.callout-text{
	text-align:center;
	font-size:1.1em;
	clear:both;
}

.section a, .moreBtn{
	color:#f29379;
	text-decoration:none;
	cursor:pointer;
}

.section a:hover, .moreBtn:hover{
	text-decoration:underline;	
}

.clear{clear:both;}

.p1, .p2, .p3, .p4, .p5, .p6{width:40%;padding:20px;clear:both;}

.p2, .p4, .p6{float:right;}

.pic{position:relative; height:290px;}
.pic img{position:absolute;}

.anim-pic{display:none;}

/*General buttons*/

a.btn,
.btn{
	background:#31676D;
	font-family: 'Roboto Slab', serif;
	border-radius:4px;
	border:0;
	padding:4px 10px; 
	color:#fff;
	text-shadow: 0px -1px 0px rgba(35, 84, 86, 1);
	font-size:1.1em;
	cursor:pointer;
	clear:both;
	
}

.btn:hover,
a.btn:hover{background:#205151;text-decoration:none;}

.btn.submit{float:right;margin-top:10px;}
a.btn.next{display:block; width:41px; margin-top:15px; text-align:center; }


/*End of General buttons*/


/*Services overview start*/

.overview,.process{
	
	min-height: 100vh; 
	clear:both;
	margin:0;
}

.intro{min-height: 100vh;}
/*.overview.overview-pm{background:#fbe0d7;}
.overview.overview-dd{background:#e1daec;}
.overview.overview-dt{background:#e9ecd1;}*/

.overview p{text-align:center;}
.overview img{
	margin:auto;
	display:block;
	padding:40px;
}
.overview ul{margin:0; padding:0;}
.overview ul li{
	margin:0 auto;
	text-align:center;
	list-style-type:square;
	color:#ed6438;
	width:25%;
	padding:5px;
}

.overview ul li span{color:#444;}

.overview-dt{padding-bottom:200px;}


/*Services overview end*/



/*Our work thumbs*/

.thumbs{
	overflow:auto;
	cursor:pointer;
	padding:5px;
	margin-top:50px;
}

.thumb{
	background:#efefef;
	width:32%;
	margin-right:2%;
	float:left;
	height:200px;
}

.pics{
	background:#fff;
	max-width:500px;
	width:60%;
	height:340px;
	float:left;
}

.main{
	display:none;
	max-width:1024px;
	margin:20px auto;
	overflow:auto;
	padding:5px;
}

.main .content{float:left;}

.project-details{
	display:none;
	width:100%;
	background:#ddd;
	height:390px;	
	padding:30px 0;
}

.content{padding: 0 20px 20px;}
.content h3{margin-top:0;}
.close{float:right; margin-top:-10px; margin-right:15px; cursor:pointer;}
/*Contact us form*/

form.contact{
	clear:both;
	max-width:650px;
	margin:20px auto;
	padding:20px 30px;
	border-radius:4px;
	overflow:auto;
	background:#f7f7f7;
	border:1px solid #efefef;
	border-bottom:2px solid #ddd;
	
}
form.contact ul {
	list-style-type:none;
	padding:0;
	margin:0;
}

form.contact ul li {
	position:relative;
}
 
form.contact label {
	position:absolute;
	top:8px;
	left:9px;
	color:#aaa;
}

form.contact,
form.contact input,
form.contact textarea {
	font-family: 'Roboto Slab', serif; 
	font-size:1.2em;
}

form.contact input {
	width:98%;
	padding:5px;
	margin-bottom:15px;
	border:1px solid #ddd;
	border-top:1px solid #aaa;
	border-radius:4px;
	 -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
	behavior: url(js/PIE.htc); /* remove if you don't care about IE8 */
}

form.contact textarea{
	width:97.5%;
	height:150px;
	clear:both;
	font-size:1em;
	padding:7px;
	border:1px solid #ddd;
	border-top:1px solid #aaa;
	max-width:632px;
	
}

.required{
	position:absolute;
	left:96%;
	top:5px;
	color:#C11414;	
}

#Message{
	color:#aaa;
}

#Message.focussed{
	color:#333;
	
}

textarea:focus, input:focus {
	border: 2px solid #ED6439;
}

/*End of contact us form*/


/* //////////////// FOOTER ////////////////// */


.footer {
	overflow:visible;
	background:#595757;
	clear:both;
	position:relative;
}

.top{padding:0;margin:0;height:0;}

.top{
	border-radius:50%;
	 -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
	behavior: url(js/PIE.htc); /* remove if you don't care about IE8 */
	display:block;
	width:60px;
	height:60px;
	position:absolute;
	left:50%;
	border:7px solid #fff;
	background:#595757;
	margin-left:-40px;
	top:-35px;
	text-align:center;
	color:#fff;
	text-decoration:none;
	font-size:2em;
	line-height:190%;
	position:relative;
	cursor:pointer;
}

.top .arrow{
	width: 0; 
	height: 0; 
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 15px solid #fff;
	position:absolute;
	left:15px; 
	top: 18px;	
}

.top .arrow-inner{
	width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #595757;
	position:absolute;
	left:20px; 
	top: 23px;
	z-index:1;
}

.footer .footer-inner{
	width:80%;
	max-width:1024px;
	margin:auto;
	overflow:auto;	
}

.footer .footer-inner h3{
	color:#AFAFAF;
	padding-top:0;
	margin-top:0;
	text-transform:uppercase;
}

.footer .section{
	float:left;
	width:31.1%;
	margin:0 1% 1%;
	color:#fff;	
	line-height:130%;
	font-size:.85em;
	padding:0 0 40px;
}

.footer .section.left{text-align:left;}
.footer .section.middle{text-align:center;}
.footer .section.right{text-align:right;}

.footer .section.right a{margin:5px;}

.footer ul.pages,
.footer .pages li{
	padding:0;
	margin:0;
	
	list-style-type:none;
	
}

.footer .pages li a{
	color:#fff;
}

.footer .pages li a:hover{
	text-decoration:underline;
}


/* //////////////// MEDIA QUERIES ////////////////// */

@media (max-width: 1020px) {
	.pics{display:none;}
	.thumbs img{height:auto; width:100%;}
	
.thumb {background:none;height:auto;}
}


@media (max-width: 600px) {
	.intro,
	.overview{padding:5px; height:auto;min-height:auto;}
.overview ul li {width:90%;font-size:.9em;}
.section {padding:10px 5px;}
.section p{font-size:.9em;}	
.overview img {width:100%; height:auto;padding:5px;}
  .nav{height:auto;}
  .nav li,.nav-inner, .nav-inner .list,.nav ul,.section .main-header h1{float:none;padding:0;}
  .section .main-header h1,
  .section .main-header h2{font-size:1.4em;width:100%;}
  .nav-inner{width:100%;}
  .nav li a{
	  display:block;
	  width:100%;
	  padding:10px 0;
	  text-align:center;
	  border-top:1px solid #F4704D;
	  border-bottom:1px solid #DD542F;}
  .main-btn-cont,
  .nav .l4,
  .current-tri, 
  .section .main-header .header-line.left,
  .circle-btns{display:none;}  
  .section .main-header .header-line.right{float:none;width:80%; margin:auto;}
  .nav .logo{float:none; display:block;}
  .mobile-btn{display:block; border-radius:50%; background:#111; width:80px; height:60px; margin:30px auto;color:#fff; line-height:130%;padding-top:20px;}
  .nav .logo{background: url(../images/learnamic-logo-mobile.png) 2px 6px no-repeat;width:34px;margin: auto; padding:5px;}
  .callout-text{font-size:.9em;} 
  .footer{margin-top:20px;}
  .footer .section {width:100%; float:none;}
  .footer .section h3,
  .footer .section p,
  .footer .section a{text-align:center; display:block;}
  .footer .section.right a {width:29%;float:left;}
  .footer .footer-inner {overflow:hidden; padding-bottom:20px;}
  .thumbs,
  .close,
  .current-tri-inner{display:none;}
.project-details,
.main {display:block;}
.project-details{background:#fff; height:auto; padding:0; display:block !important;}

.pics,
.content{float:none;}
.pics{width:100%; display:block; height:auto;}
.pics img{height:auto; width:100%; margin:auto; display:block;}
.project-details .content {
    padding: 15px 5px;
}
.thumbs{display:none;}
}