/*
Theme Name: Loudcanvas PT
Theme URI: https://loudcanvas.com
Author: Loudcanvas (AP)
Author URI: https://loudcanvas.com
Description: This is a generic starter theme, that incorporates Bootstrap, Fontawesome.
*/

@import url('https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i|Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i');

/* #Misc
/***********************************************************/
body { padding-top: 0; font-size: 18px; line-height: 33px; color: #000; font-family: 'Source Sans Pro', sans-serif;}
iframe, object, embed{ max-width:100%; }
sup{ vertical-align: super; font-size: smaller; }
sub{ vertical-align: sub; font-size: smaller; }
code{ font-family: Monaco, "Andale Mono", "Courier New", Courier, monospace; }
.navbar-fixed-top {top: auto;}
.alignleft { float: left; margin: 1% 2% 2% 0}
.alignright { float: right; margin: 1% 0 2% 2%}
.aligncenter { clear: both; text-align: center; margin: 1%}
.alignnone { float: none; margin: 1% } 
.text-center {text-align: center;}
.text-right {text-align: right;}
.padding-left {padding-left: 0;}
.padding-right {padding-right: 0;}
.padding-none {padding: 0;}
.row {margin-left: 0; margin-right: 0;}
.container {width: 1300px;}

/* #Images
/***********************************************************/
img, a img { border:none; padding: 0; margin:0; display:inline-block; max-width: 100%; height:auto; width:auto; image-rendering: optimizeQuality; }

/* #Links
/***********************************************************/
	a { text-decoration: none; outline: 0; max-width:100%; max-width:none\9; }
	a:hover, a:focus, a:visited { outline: 0; text-decoration: none;}
	p a, p a:visited { line-height: inherit; }
	a img { border: 0}
	#navbar li.dropdown:hover .dropdown-menu {display: block;}
	
/***********************************************************/
/***** HEADINGS / Typography  ******************************/
/***********************************************************/

h1,h2,h3,h4,h5 { margin-top: 0; font-family: 'Source Sans Pro', sans-serif;}
	h1 { font-size: 34px; line-height: 1.1em; margin-bottom: 20px; color: #73b745; font-weight: 300;}
	h2 { font-size: 34px; line-height: 1.1em; margin-bottom: 20px; color: #73b745; font-weight: 300; }
	h3 { font-size: 34px; line-height: 1.1em; margin-bottom: 8px; color: #878787; font-weight: 300;} 
	h4 { font-size: 18px; line-height: 1.1em; margin-bottom: 4px; } 
	h5 { font-size: 16px; line-height: 1.1em; }						
	h6 { font-size: 14px; line-height: 1.1em; }
	
hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }

p + h1, p + h2, p + h3, p + h4, p + h5, p + h6{ margin-top:1.4em; }
p { margin: 1.5em 0; }
p img { margin: 0; }
em, i { font-style: italic; }
strong, b{ font-weight: bold;  }
small { font-size: 80%; }
blockquote{ border-left-style:solid; border-left-width:7px; padding-left:20px; margin-bottom:1em; margin-right:1em; font-size: 16px; line-height: 1.5em; }
blockquote small, blockquote cite, blockquote small a, blockquote cite a, blockquote a small, blockquote a cite{font-size: 12px;}

#social_links {padding: 0; margin-left: 0; margin-top: 30px; text-align: center}
#social_links > li:first-child {margin-left: 0}
#social_links > li {list-style: none; display: inline-block; margin-left: 15px; }
#social_links > li > a {font-size: 20px; color: inherit}

 
/* #Header
/***********************************************************/
.tagline {font-size: 28px; line-height: 32px; color: #666; font-weight: 300; display: inline-block; padding-left: 20px; top: 6px; position: relative;}
.callto {padding-top: 45px; font-size: 16px; font-weight: 700; color: #74b745;}
.callto a {color: #000;}
.callto a:hover {color: #74b745;}

/* #Banner
/***********************************************************/
#banner {background: #74b745 url(images/top-bg.jpg) no-repeat top center; min-height: 460px; margin-bottom: 100px;}
#banner .caption h2 {font-size: 52px; font-weight: 300; line-height: 63px; color: #fff; max-width: 600px; position: absolute; top: 130px; right: 0; }
.featured img {position: relative; bottom: -170px;}
.page-callto {
    min-width: 500px;
    right: 0;
    position: absolute;
    text-align: center;
    font-size: 20px;
    color: #fff;
    line-height: 26px;
    top: 40px;
}

.page-callto a {font-weight: 700; color: #fff}

/* #Main
/***********************************************************/
#main {padding-top: 15px; padding-bottom: 30px;}
#main a {font-weight: 700; color: inherit;}
.flex {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */	
}

/* #Projects
/***********************************************************/
.project-list {background-color: #f4f4f4; border-top: 1px solid #ccc; padding: 55px 0;}
.project-list h2 {margin-bottom: 55px;}
.btn { padding: 8px 40px; border-radius: 0;}
.btn-green {color: #74b745; border: 1px solid; font-size: 18px; font-weight: 400; background-color: transparent;}
.project-list .item {margin: 50px 0; background-color: #fff; padding: 30px 20px; -webkit-box-shadow: 0px 0px 6px 6px rgba(0,0,0,.1); box-shadow: 0px 0px 6px 6px rgba(0,0,0,.1);}
.item .item-description {padding: 60px 20px 0;} 
.item .item-address {font-weight: 300; color: #878787}
.item .item-address span {padding: 0 15px;}
.item .item-address a {color: inherit;}
.item .thumb-featured {padding: 15px 15px 30px;}
.item .item-description h3 {margin-bottom: 0;}
.item .pimg a {font-size: 14px; font-weight: 300; color: #878787; text-align: center; display: block;}
.item .pimg img {border: 1px solid #ddd;}

/* #CallTo
/***********************************************************/
#callto {
    padding: 30px 0 0;
    background: rgb(113,191,29);
    background: -moz-linear-gradient(top, rgba(113,191,29,1) 0%, rgba(99,166,26,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(113,191,29,1)), color-stop(100%,rgba(99,166,26,1)));
    background: -webkit-linear-gradient(top, rgba(113,191,29,1) 0%,rgba(99,166,26,1) 100%);
    background: -o-linear-gradient(top, rgba(113,191,29,1) 0%,rgba(99,166,26,1) 100%);
    background: -ms-linear-gradient(top, rgba(113,191,29,1) 0%,rgba(99,166,26,1) 100%);
    background: linear-gradient(to bottom, rgba(113,191,29,1) 0%,rgba(99,166,26,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#71bf1d', endColorstr='#63a61a',GradientType=0 );
}

#callto .col-sm-8 { background: transparent url(images/callto-img.png) no-repeat left bottom; padding: 0 0 165px 325px; }
#mainform input[type="text"], #mainform input[type="tel"], #mainform input[type="email"] {  width: 100%; margin-top: 15px; border: 1px solid #5b9a16; border-radius: 5px; padding: 5px 10px; font-size: 16px; color: #666; }
textarea { width: 100%; height: 100px; margin-top: 15px; border-radius: 5px; padding: 5px 10px; resize: none; border: 1px solid #5b9a16; }
input[type="submit"], #submit, .button { margin-top: 15px; background-color: #666; border: 0; border-radius: 5px; color: white; font-weight: bold; font-size: 18px; width: 100%;}
input[type="submit"]:hover, #submit:hover, .button:hover {background-color: #333;}
#callto .container h2 { padding-top: 15px; margin-bottom: 0; font-weight: 700; font-size: 60px; color: #fff; text-transform: uppercase; letter-spacing: -2px; line-height: 60px; }
#callto .container span { font-weight: bold; color: #333; font-size: 26px; text-transform: uppercase; }
#callto .container h3 {text-align: left; margin-top: 35px; font-size: 34px; color: #fff; text-transform: uppercase; letter-spacing: 0.8px; font-weight: bold;}
#callto .container h4 { font-size: 28px; color: #fff; text-align: center; color: #333; font-weight: normal; }


/* #Footer
/***********************************************************/
footer { background-color: #222; padding: 0 0 1px; color: #fff; }
footer p {line-height: 25px; font-weight: 600; margin: 1em 0;}
footer p a {color: inherit}
footer p a:hover {color: #65a91a;}
#footer-content .footer-logo { margin: 45px 0 20px; }
.copyright {font-size: 14px;  margin-top: 50px;} 
.services li {list-style: none; float: left; width: 50%; padding: 15px 10px 10px;}
.services li img {margin-right: 10px;}
.services {padding: 0; }

/***********************************************************/
/* #MEDIA QUERIES ******************************************/
/***********************************************************/
.mobile, .mobile1 {display: none;}

@media only screen and ( max-width: 1300px ) {
	.container {width: auto;}
	#callto .container h3 {font-size: 30px;}
	#callto .container h2 {font-size: 55px;}
	#callto .container span {font-size: 23px;}	
}
@media only screen and ( max-width: 1280px ) {
	.container {width: auto;}
	.featured img {width: 60%;  bottom: -190px;}
	.page-callto {top: 85px;}
}

@media only screen and ( max-width: 1210px ) {
	.page-callto {top: 100px;}
	.featured img {bottom: -220px;}
	.logo img {width: 60%;}
	.callto {padding-top: 40px;}
	#callto .container h3 {font-size: 26px;}
}

@media only screen and ( max-width: 1160px ) {
	.page-callto {top: 110px;}
	.featured img {bottom: -240px;}
	#callto .container h3 {font-size: 26px;}
	#callto .container h2 {font-size: 50px;}
	#callto .container span {font-size: 20px;}		
	.services li {padding: 15px 0 10px}
	.item .item-description {padding-top: 30px;}
}

@media only screen and ( max-width: 1090px ) {
	.page-callto {top: 130px;}
	.featured img {bottom: -250px;}
	#callto .container h3 {font-size: 22px; }
	#callto .container h2 {font-size: 40px; letter-spacing: 0; line-height: 40px;}
	#callto .container span {font-size: 18px;}	
	#callto .container h4 {font-size: 24px;}
	#callto .col-sm-8 {padding: 0 0 205px 325px}
}

@media only screen and ( max-width: 1030px ) {
	.callto {padding-top: 30px;}
	.page-callto {top: 145px;}
	.featured img {bottom: -260px;}
	.item .item-description {padding-top: 0;}
	#callto .col-sm-8 {background-size: 80% auto; padding: 0 0 130px 230px; text-align: center;}
	#callto .container h3 {text-align: center; }
	textarea {height: 80px;}
	textarea, #mainform input[type="text"], #mainform input[type="tel"], #mainform input[type="email"] {margin-top: 8px;}
	.footer {padding: 0 10%;}
	footer .first {width: 50%; padding: 0 15px; float: left}
	footer .second {width: 80%;}
	#footer-content .footer-logo {padding-left: 10%;}
}

@media only screen and ( max-width: 1023px ) {
	.callto {padding-left: 0; padding-right: 0;}
	.featured img {width: 55%; bottom: -170px;}
	.page-callto {top: 70px;}
	#banner {min-height: 360px; border-bottom: 80px solid #74b745; margin-bottom: 50px;}
	#banner .caption h2 {top: 110px; max-width: 500px; font-size: 46px; line-height: 52px;}
	h3 {font-size: 26px;}
	.item .item-address span {padding: 0 5px;}
}

@media only screen and ( max-width: 900px ) {
	.tagline {font-size: 22px; top: 4px;}
	.callto {padding-top: 24px;}
	#banner .caption h2 {position: relative; }
	.featured img {width: 55%; bottom: -120px;}
	.page-callto {top: 15px; min-width: 400px;}
	#callto .col-sm-8 {background-image: none; padding: 0; width: 100%; padding-bottom: 20px;}
	#callto  .col-sm-4 {width: 100%; padding-bottom: 40px;}
	#callto .container h3 {margin-top: 20px;}
	.footer {padding: 0;}
}

@media only screen and ( max-width: 768px ) {
	.callto {display: none;}
	.logo {width: 100%;}
	.desktop {display: none;}
	.mobile {display: block;}
	.featured  {text-align: center;}
	.featured img {width: auto; bottom: 0;}
	#banner {padding: 30px;}
	#banner, .featured {margin-bottom: 30px; }
	#banner .caption h2 {top: auto; margin-top: 50px; position: relative; max-width: 100%; text-align: center;}
	.page-callto {top: 95px; min-width: auto; position: relative;}
	.pimg {padding: 0 2px;}
	body {font-size: 16px; line-height: 26px;}
	.item .item-description {padding: 0;}
	.footer {padding: 0 10%;}
	footer .second {width: 100%; padding: 0 15px;}
	footer .last {width: 100%; text-align: center; margin-top: 15px;}
	.services li { display: block; height: 50px; }
}

@media only screen and ( max-width: 767px ) {
	.pimg {float: left; width: 33.33333333%; text-align: center; padding: 0 15px;}
	.pimg img { display: block; width: 100%; }
	.desktop1 {display: none;}
	.mobile1 {display: block;}
	h3 {font-size: 34px;}
	body {font-size: 18px; line-height: 32px;}
	.read-more {margin-bottom: 30px;}
	.pimg img {margin-bottom: 5px; }
	.pimg a {line-height: 18px;}	
	.item-images {padding: 0;}
}

@media only screen and ( max-width: 600px ) {
	.footer, #footer-content .footer-logo {padding: 0;}
	.logo img {width: 50%;}
}

@media only screen and ( max-width: 475px ) {
	.logo img {width: auto;}
	.logo  {text-align: center;}
	.tagline {  top: auto; position: absolute; bottom: 0; left: 0; right: 0; font-size: 16px; line-height: 26px;}
	#banner {padding: 0;}
	.page-callto {top: 65px;}
	footer .first, .services li {width: 100%; float: none;}
	#banner .caption h2 {font-size: 34px; line-height: 1.2em}
	.pimg {padding: 0 5px;}
}

@media only screen and ( max-width: 414px ) {
	#banner .caption h2 {margin-top: 90px;}
}

@media only screen and ( max-width: 375px ) {
	#banner .caption h2 {margin-top: 70px;}
	.page-callto {top: 100px; font-size: 17px;}
	h3 {font-size: 30px;}
	.page-callto {top: 85px;}
}