/* ==========================================================================
  Wide Screen Layout: From 1200px.
========================================================================== */
@media (max-width: 1100px) {
#topheaderinner, #page, #supplementaryinner, .pagebannerinner {
    padding:0 20px;
}

.smallerprojectinnerdetails .colorbutton {
    position: initial;
}
.homefeature h3 {
    font-size: 3.5vw;
}
.homefeature ul {
    font-size: 1.7vw;
    line-height: 1.5;
}
.homefeature .colorbutton a {
    font-size: 1.5vw;
}
.smallerprojects{
  grid-template-columns: 1fr 1fr;
}
}
/* ========= end of Wide Screen Layout: From 1200px. ========= */

/* ==========================================================================
  Mobile Layout: From 320px.
========================================================================== */
@media (max-width: 780px) {

.single-post #primary {
    width: 100%;
}
#main #secondary {
    margin: 0;
}
	
	#topheaderinner {
    max-width:96%;
	display: block;
		padding-top: 40px;
}

#topheaderinnerleft {
    max-width:100%;
	    width: 100%;
	text-align: center;
}


#topheaderinnerright {
    max-width:100%;
	width: 100%;
}
	
	#access {
    position: absolute;
    left: 0;
    top: 0;
}
	
	.homeslider h2 {
    font-size: 40px !important;
		        margin: 0 !important;
}
	
	.overlap h2 {
    line-height: 1 !important;
    margin: 0 !important;
}
	
	.overlap h2:nth-of-type(2) {
    margin-top: 0px;
		line-height: 40px !important;
}
	
	.overlap h3 {
    line-height: 1 !important;
    margin: 0 !important;
}
	
	.overlap h3:nth-of-type(2) {
    margin-top: 0px;
		line-height: 30px !important;
}
	
	
	.leftpadding {
    padding: 4%;
}
	
	.largelatestproject {
    display: block !important;
}
	
	.latestcarousel .largelatestproject {
    margin-left: 0px;
}
	
	.largelatestprojectright {
	margin-left: 0px;
	border-radius: 0px;
		border-left:1px solid #ccc;
		border-right:1px solid #ccc;
		border-bottom:1px solid #ccc;
		box-shadow: none;
}
	
.largelatestprojectleft, .largelatestprojectright {
	width: 99%;
}
	
	.alignright {
    text-align: center;
}
	
	.pagebanner.overlap h2 {
    font-size: 40px;
}
	
	.pagebanner {
    font-size: 16px;
}
	
	.overlapservicesright {
    margin-left: 0px;
}
	
	.overlapservicesleft{
	margin-right: 0px;
}
	
	.blackpanel.darkcta, .gradientcta {
    padding: 60px 2% !important;
    text-align: center;
}
	
	.blackpanel.darkcta .colorbutton, .gradientcta .colorbutton{
 text-align: center;
}
	
	.rightpadding {
    padding: 4%;
}
	
.smallerprojects {
    grid-template-columns: 1fr;
}

}


/* ==========================================================================
  Normal Desktop Layout: From 980px.
========================================================================== */
@media (min-width: 1000px) and (max-width: 1050px) {




}
/* ========= end of Normal Desktop Layout: From 980px. ========= */


/* ==========================================================================
  Tablet Device Layout: From 768px.
========================================================================== */
@media (min-width: 768px) and (max-width: 999px) {

.pagebanner.smaller h1 {
    font-size: 4vw !important;
}
.rightpadding ul,
.leftpadding ul
{
	column-count: 1;
}


}
/* ========= end of Tablet Device Layout: From 768px. ========= */

@media (min-width: 768px) and (max-width: 800px) {

.page-id-16 .largelatestprojectright {
  width: 100%;
}

}


/* ========= end of Mobile Layout: From 320px. ========= */


/* ==========================================================================
  Wide Mobile Layout: 480px.
========================================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {

.pagebanner.overlap h1, .pagebanner.overlap h2 {
	font-size: 9vw;
}
.pagebanner.smaller h1 {
    font-size: 9vw !important;
}
.homeslider h1, .homeslider h2{
	font-size: 9vw !important;
}
.homeslider.overlap h1, .homeslider.overlap h2 {
	font-size: 9vw !important;
	margin: 30px 0 0 0 !important;
}
.largertext p {
    font-size: 20px;
}
.entry-content h3, .comment-content h3 {
    font-size: 7vw !important;
}
.smallerprojectinnerdetails .colorbutton {
    position: initial;
}
.smallerprojectinnerdetails h3{
	font-size: 5vw !important;
}
.overlap h2 {
    font-size: 9vw !important;
}
.overlap h2:nth-of-type(2) {
    padding: 10px 10px 20px;
    margin-top: -30px !important;
}
.homefeature .colorbutton a {
    font-size: initial !important;
}
.homefeature ul {
    font-size:initial;
}
.overlap h3:nth-of-type(2) {
    padding: 10px 10px 20px;
    margin-top: -25px !important;
}
.dotspanel {
	background-size: 210vw;
}
.smallerprojects{
  grid-template-columns: 1fr;
}
.entry-content h1, .comment-content h1 {
    font-size: 8vw;
}
.smallprojectdescription {
	margin-bottom: 30px;
}
.slick-dotted.slick-slider {
    margin: 0 auto 30px !important;
	max-width: 80% !important;
}
.twocolumns {
	column-count: 1;
}
.pagebannerproject{
	font-size: 3vw;
}
.rightpadding ul,
.leftpadding ul
{
	column-count: 1;
}
.slick-next, .slick-prev {
    display: none !important;
}
.page-id-16 .largelatestprojectright {
  width: 100%;
}
}
/* ========= end of Wide Mobile Layout: 480px. ========= */



/* ==========================================================================
  Small Mobile Layout
========================================================================== */
@media (max-width: 479px) {

.pagebanner.overlap h1, .pagebanner.overlap h2 {
	font-size: 11vw;
}
.entry-content h1, .comment-content h1 {
    font-size: 8vw;
}
.pagebanner.smaller h1 {
    font-size: 9vw !important;
}
.homeslider h1, .homeslider h2{
	font-size: 9vw !important;
}
.homeslider.overlap h1, .homeslider.overlap h2 {
	font-size: 9vw !important;
	margin: 30px 0 0 0 !important;
}
.largertext p {
    font-size: 20px;
}
.entry-content h3, .comment-content h3 {
    font-size: 7vw !important;
}
.smallerprojectinnerdetails .colorbutton {
    position: initial;
}
.page-id-12 .greygradientbg img{
	max-width: 90% !important;
}
.overlap h2 {
    font-size: 13vw !important;
}
.overlap h2:nth-of-type(2) {
    padding-left: 20px;
}
.homefeature h3 {
    font-size: 10vw;
}
.homefeature .colorbutton a {
    font-size: initial !important;
}
.homefeature ul {
    font-size:initial;
}
.overlap h2:nth-of-type(2) {
    padding-left: 20px;
    margin-top: -20px !important;
}
.overlap h3:nth-of-type(2) {
    padding-left: 20px;
    margin-top: -15px !important;
}
.dotspanel {
	background-size: 300vw;
}
.smallerprojects{
  grid-template-columns: 1fr;
}
.smallprojectdescription {
	margin-bottom: 20px;
}
.slick-dotted.slick-slider {
    margin: 0 auto 30px !important;
	max-width: 80% !important;
}
.twocolumns {
	column-count: 1;
}
.pagebannerproject{
	font-size: 3.5vw;
}
.rightpadding ul,
.leftpadding ul
{
	column-count: 1;
}
.slick-next, .slick-prev {
    display: none !important;
}
.page-id-16 .largelatestprojectright {
  width: 100%;
}
}
/* ========= end of small Mobile Layout ========= */