/*

/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Image Rollovers

*/

/*!
 * Start Bootstrap - Stylish Portfolio Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

/* Global Styles */
body {
	font-family: 'Roboto', sans-serif;
}

h1, h2, h3, h4, h5 {
	font-family: 'Abril Fatface', cursive;
	letter-spacing: normal;
}


a:hover{
    text-decoration: none;
}

.about-section {
    padding-top: 3rem;
	background: -webkit-gradient(linear,left top,left bottom,from(#FFFFFF),color-stop(100%,rgba(255,255,255,1.0)),to(rgba(255,255,255,1.0)));
    background: linear-gradient(to bottom,#FFFFFF 0,rgba(255,255,255,1.0) 100%,rgba(255,255,255,1.0) 100%);
	padding-bottom:0;
}

.services-section {
	padding:0;
    padding-top: 2rem;
	padding-bottom:2rem;
}
.projects-section {
	padding:0;
	padding-top:2rem;
}

.gallery-section {
	padding:0;
    padding-top: 2rem;
}

.casestudy-section {
	padding:0;
    padding-top: 120px;
}

.text-black {
	width:100%;
}

/* Masthead */
.masthead {
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(220,220,220,.9)),color-stop(100%,rgba(220,220,220,.5)),to(#FFFFFF)),url(../img/bg-masthead.jpg);
    background: linear-gradient(to bottom,rgba(220,220,220,.9) 0,rgba(220,220,220,.5) 100%,#FFFFFF 100%),url(../img/bg-masthead.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}

/* PROJECTS PAGE */
.masthead-projectswork {
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(220,220,220,.9)),color-stop(100%,rgba(220,220,220,.5)),to(#FFFFFF)),url(../img/bg-projects.jpg);
    background: linear-gradient(to bottom,rgba(220,220,220,.9) 0,rgba(220,220,220,.5) 100%,#FFFFFF 100%),url(../img/bg-projects-work.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}

.masthead h1 {
    background: -webkit-linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,.7));
    /* -webkit-text-fill-color: transparent; */
    -webkit-background-clip: text;
}

.bg-light {
    background-color: #FFFFFF!important;
}

.bg-grey {
    background-color: #f2f2f2!important;
}


.btn {
    font-size: 400%;
}

#mainNav .nav-link {
    color: rgba(0,0,0,1.0);
}

/* Typography */


/* Links */


/* Custom Button Styles */
.btn-primary {
    color: #fff;
    background-color: rgba(50,50,50,.3);
    border-color: rgba(255,255,255,.3);
}


/* Custom Horizontal Rule */


/* Nav Bar */

.navbar-light .navbar-toggler {
    color: rgba(0,0,0,.5);
    border-color: rgba(255,255,255,1);
	padding-right:0;
}

.Logo_size {
	width: 80px;
}


/* Header */


/* Carousel */

.carousel-item {
	height:50vh;
}


/* About */

/* Services */

/* Callout */

/* Projects */
.text-lg-left {
padding:20px;
padding-left:0px;
}
.text-lg-right {
padding:20px;
padding-right:0px;
}

/* Carousel Captions */
.carousel-back {
position:absolute;
left:0;
bottom:0;
padding-bottom:4%;
width:100%;
padding-left:10%;
padding-right:10%;
text-align: left;
background: rgba(255, 255, 255, 0.4);
filter: alpha(opacity=40);
color: #000000;
}

/* Add an extra .carousel parent class to increase specifity
   avoiding the use of !important flag. */
.carousel .carousel-indicators li {
  background-color: #FFFFFF;
  background-color: rgba(255, 255, 255, 1.0);
}

.carousel .carousel-indicators .active {
  background-color: #000000;
}

/* Footer */

.fab {
    font-family: "Font Awesome 5 Brands";
}
.fa, .fab, .fal, .far, .fas {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
	text-align: center;
    height: 3rem;
    width: 3rem;
    background: rgba(50,50,50,.3);
    border-radius: 100%;
    line-height: 3rem;
    color: rgba(255,255,255,.9);
}

/* Image Rollovers
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.grid_cap {
	position: absolute;
    left: 0;
    bottom:0;
    z-index: 12;
    width: 101%!important;
	height: 101%!important;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.7+0,1+15,0.7+15,0+16,0+100 */
	background: -moz-linear-gradient(bottom, rgba(255,255,255,1.0) 0%, rgba(255,255,255,1.0) 10%, rgba(255,255,255,0) 10%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(bottom, rgba(255,255,255,1.0) 0%,rgba(255,255,255,1.0) 10%,rgba(255,255,255,0) 10%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to top, rgba(255,255,255,1.0) 0%,rgba(255,255,255,1.0) 10%,rgba(255,255,255,0) 10%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
	text-align: left;
	padding:10px;	
    opacity: 1.0;
    filter: alpha(opacity=100);
  	-webkit-transition: opacity 500ms;
  	-moz-transition: opacity 500ms;
  	-o-transition: opacity 500ms;
  	transition: opacity 500ms;
    overflow: hidden!important;
    line-height: 1.25;
	margin:0;
	}

.grid_cap:hover {
    opacity: 0;
    filter: alpha(opacity=0);
	}

.grid_text {
	position: absolute;
	top:510px;
    left:0;
    bottom: 0;
	width:100%;
    /* background: #fff!important; */
	text-align: left;
	padding:10px;
	padding-left:0;
	}
	
   .piccap {
	position:absolute;
	text-align:left;
	top:405px;
	left:0;
	height:20px;
	font-size:15px;
	color:#64a19d;
	z-index:0;
	}


/* Isotope Styling
–––––––––––––––––––––––––––––––––––––––––––––––––– */
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

#gallery {
	width:100%;
}

/* ---- grid ---- */
.container {
  padding:0;
  margin:0;
  margin-left:auto;
  margin-right:auto;
  width:100%
}

.padcontainer {
padding-left:3%;
padding-right:3%;
}

.grid {
text-align:center;
margin:0px auto;
padding:0;
width:100%;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .element-item ---- */

.grid-container {
  width:100%;
}

.grid-item {
  position: relative;
  float: left;
  width: 97%;
  max-width:97%;
  min-height:auto;
  height: 560px;
  margin: 0;
  margin-bottom:2%;
  margin-top:2%;
  padding: 10px;
  background: #ffffff;
  color: white;
  overflow:hidden;
  
}
.grid-item>img {
  text-align:center;
  height:100%;
  vertical-align:middle;  
}

.grid-item--text { height: 400px; }

.grid-item--width2 { 
  width:95%;
  height: auto;
  min-height:310px;
  max-width:97%; 
}

/* ---- portfolio-item ---- */
.portfolio-item {
  position: relative;
  float: left;
  width: 100%;
  min-height:auto;
  min-width:auto;
  height: 475px;
  text-align:center;
  margin: 0.5%;
  padding: 5px;
  background: #ffffff;
  color: white;
  font-size: 50px;
  overflow:hidden;
}

.portfolio-item>img {
  width: 100%;
  min-height:auto;
  text-align:center;  
}

.portfolio-item--width2 { 
  width: auto;
  height: auto;
  text-align:center;
  margin: 0.5%;
  padding: 5px;
  background: #ffffff;
  color: white;
  overflow:hidden;
}

.portfolio-item--width2>img {
  display: block;
  max-width:713px;
  max-height:475px;
  width: auto;
  height: auto;
  text-align:center;
}


@media (min-width: 320px) {

.mobtext {
display:none;
}

.text-lg-left {
padding:20px;
padding-left:20px;
}
.text-lg-right {
padding:20px;
padding-right:20px;
}

/* ---- .grid-item ---- */
.container {
  padding:0;
  margin:0;
  margin-left:auto;
  margin-right:auto;
}

.padcontainer {
padding-left:4%;
padding-right:4%;
}

.navbar>.container {
margin-left:auto;
margin-left:auto;
padding-right:4%;
}

.grid-item {
  position: relative;
  float: left;
  width: 100%;
  height:560px;
  max-width:100%;
  min-height:auto;
  min-width:auto;
  margin: 0;
  margin-bottom:2%;
  margin-top:2%;
  padding: 10px;
  background: #ffffff;
  color: white;
  overflow:hidden;
  
}

.grid-item>img {
  min-width:100%;
  height: auto;
  width: auto;  
}

.grid-item--text { height: 560px; }

.grid-item--width2 { width: 100%; }


/* ---- portfolio-item ---- */
.portfolio-item {
  position: relative;
  float: left;
  width: 100%;
  height: 475px;
  margin: 0;
  margin-top:0.5%;
  margin-bottom:0.5%;
  padding:0;
  padding-top: 5px;
  padding-bottom: 5px;
  background: #ffffff;
  color: white;
  font-size: 50px;
  overflow:hidden;
}

.portfolio-item--width2 { 
  width: 100%;
}
 
}


@media (min-width: 768px) {

.Logo_size {
	width: 145px;
}

.text-lg-left {
padding:20px;
padding-left:0px;
}
.text-lg-right {
padding:20px;
padding-right:0px;
}

.carousel-inner {
width:94%;
max-width:1080px;
margin-left:auto;
margin-right:auto;
}

/* ---- .grid-item ---- */
.container {
  padding:0;
  margin:0;
  margin-left:auto;
  margin-right:auto;
}

.padcontainer {
padding-left:auto;
padding-right:auto;
}

.navbar>.container {
margin:0;
margin-left:auto;
margin-right:auto;
}



.grid-container {
  width:95%;
  margin:0;
  margin-right:5%;
}

.grid-item {
  position: relative;
  float: left;
  width: 46.5%;
  max-width:46.5%;
  min-height:auto;
  min-width:auto;
  margin: 0;
  margin-right:2%;
  margin-bottom:2%;
  margin-top:5%;
  padding: 10px;
  background: #ffffff;
  color: white;
  overflow:hidden;
  
}

.grid-item>img {
  min-width:auto;
  height: 100%;
  width: auto;  
}

.grid-item--text { height: 400px; }

.grid-item--width2 { width: 90%; }

/* ---- portfolio-item ---- */
.portfolio-item {
  position: relative;
  float: left;
  width: 49%;
  min-height:auto;
  min-width:auto;
  max-height: 445px;  
  margin:0;
  margin-right:5px;
  margin-bottom:5px;
  margin-top:5px;
  padding:0;
  padding-right:5px;
  padding-bottom:5px;
  background: #ffffff;
  color: white;
  font-size: 50px;
  overflow:hidden;
}

.portfolio-item--width2 { 
  width: 98%;
  padding:0;
  padding-right:5px;
  padding-bottom:5px;
  margin:0;
  margin-right:5px;
  margin-bottom:5px;
  margin-top:5px;
}

.portfolio-item--width2>img {
    display: block;
    max-width: auto;
    max-height: auto;
}
 
}
@media (min-width:992px) {
/* ---- .grid-item ---- */
.container {
  padding:0;
  margin:0;
  margin-left:auto;
  margin-right:auto;
}

.padcontainer {
padding-left:auto;
padding-right:auto;
}

.navbar>.container {
margin:0;
margin-left:auto;
margin-right:auto;
}

.grid-container {
  width:992px;
  padding:0;
  margin:0;
  margin-right:5%;
  text-align:center;
}



.carousel-item {
	height:90vh;
}


.grid-item {
  position: relative;
  float: left;
  width: 31%;
  min-height: auto;
  min-width:auto;
  margin: 0;
  margin-right:2%;
  margin-bottom:2%;
  padding: 10px;
  background: #ffffff;
  color: white;
  overflow:hidden;
  
}

.grid-item>img {
  height: 100%;
  width: auto;  
}

.grid-item--text { height: 400px; }

.grid-item--width2 { width: 63%;max-width:63%; }

.portfolio-item {
  position: relative;
  float: left;
  width: 31.5%;
  height: 400px;
  min-height: auto;
  min-width:auto;  
  margin:0;
  margin-right:5px;
  margin-bottom:5px;
  margin-top:5px;
  margin-left:10px;
  padding:0;
  padding-right:5px;
  padding-bottom:5px;
  background: #ffffff;
  color: white;
  font-size: 50px;
  overflow:hidden;
}

.portfolio-item>img {
  width: 105%;
  height: auto;
  max-height:105%;
  overflow:hidden;  
}

.portfolio-item--width2 {
  width: 63%;
  max-width:63%;
  padding:0;
  padding-right:5px;
  padding-bottom:5px;
  margin:0;
  margin-bottom:5px;
  margin-left:5px;
  margin-top:5px;
  overflow:hidden;
}

.portfolio-item--width2>img {
  width:105%;
  height:auto;
  min-height:100%;
  max-width:100%;
  overflow:hidden;
}

.carousel-back {

padding-left:10%;
padding-right:10%;
}

}

@media (min-width: 1200px) {

.container {
padding:auto;
margin:auto;
}

.navbar>.container {
margin-left:auto;
margin-right:auto;
padding-right:0;
}

.padcontainer {
padding-left:inherit;
padding-right:inherit;
}

.carousel-inner {
width:90%;
max-width:1200px;
margin-left:auto;
margin-right:auto;
}

.grid-container {
  width:1200px;
  margin:0;
  padding:0;
  margin-right:7%;
  text-align:center;
}


.grid-item {
  position: relative;
  float: left;
  width: 336px;
  min-height: auto;
  min-width:auto;
  margin: 0;
  margin-right:2%;
  margin-bottom:2%;
  padding: 10px;
  background: #ffffff;
  color: white;
  overflow:hidden;
  
}

.grid-item>img {
  height: 100%;
  width: auto;  
}

.grid-item--text { height: 400px; }

.grid-item--width2 { width: 63%;max-width:63%; }

.portfolio-item {
  position: relative;
  float: left;
  width: 31.5%;
  height: 400px;
  min-height: auto;
  min-width:auto;  
  margin:0;
  margin-right:5px;
  margin-bottom:5px;
  margin-top:5px;
  margin-left:10px;
  padding:0;
  padding-right:5px;
  padding-bottom:5px;
  background: #ffffff;
  color: white;
  font-size: 50px;
  overflow:hidden;
}

.portfolio-item>img {
  width: 105%;
  height: auto;
  max-height:105%;
  overflow:hidden;  
}

.portfolio-item--width2 {
  width: 63%;
  max-width:63%;
  padding:0;
  padding-right:5px;
  padding-bottom:5px;
  margin:0;
  margin-bottom:5px;
  margin-left:5px;
  margin-top:5px;
  overflow:hidden;
}

.portfolio-item--width2>img {
  width:105%;
  height:auto;
  min-height:100%;
  max-width:100%;
  overflow:hidden;
}
}

@media (min-width: 1280px) {

.container {
padding:auto;
margin:auto;
}

.navbar>.container {
margin-left:auto;
margin-right:auto;
padding-right:0;
}

.padcontainer {
padding-left:inherit;
padding-right:inherit;
}

.carousel-inner {
width:90%;
max-width:1260px;
margin-left:auto;
margin-right:auto;
}

.grid-container {
  width:1260px;
  margin:0;
  padding:0;
  margin-right:7%;
  text-align:center;
}


.grid-item {
  position: relative;
  float: left;
  width: 29.5%;
  min-height: auto;
  min-width:auto;
  margin: 0;
  margin-right:2%;
  margin-bottom:2%;
  padding: 10px;
  background: #ffffff;
  color: white;
  overflow:hidden;
  
}

.grid-item>img {
  height: 100%;
  width: auto;  
}

.grid-item--text { height: 400px; }

.grid-item--width2 { width: 61%;max-width:61%; }

.grid-container {
max-width:1210px;
}

.portfolio-item {
  position: relative;
  float: left;
  width: 31.5%;
  min-height: auto;
  min-width:auto;
  height:829px;
  margin:0;
  margin-right:5px;
  margin-bottom:10px;
  padding:0;
  padding-right:5px;
  padding-bottom:5px;
  padding:top:5px;
  background: #ffffff;
  color: white;
  font-size: 50px;
  overflow:hidden;
}

.portfolio-item>img {
  width: 105%;
  height: auto;
  max-height:105%;
  overflow:hidden;  
}

.portfolio-item--width2 {
  width: 63%;
  max-width:63%;
  margin:0;
  margin-right:10px;
  margin-bottom:10px;
  padding:0;
  padding-right:5px;
  padding-bottom:5px;
  padding:top:5px;
  overflow:hidden;
}

.portfolio-item--width2>img {
  width: 105%;
  height:auto;
  min-height:105%;
  max-width:105%;
  overflow:hidden;
}

.carousel-back {
padding-left:10%;
padding-right:12%;
}
}




@media (min-width: 1420px) {

.container {
padding:auto;
margin:auto;
}

.navbar>.container {
margin-left:auto;
margin-right:auto;
padding-right:0;
}

.padcontainer {
padding-left:inherit;
padding-right:inherit;
}

.carousel-inner {
width:80%;
margin-left:auto;
margin-right:auto;
}

.grid-container {
  width:75%px;
  margin:0;
  padding:0;
  margin-right:5%;
}


.grid-item {
  position: relative;
  float: left;
  width: 29.5%;
  min-height: auto;
  min-width:auto;
  margin: 0;
  margin-right:2%;
  margin-bottom:2%;
  padding: 10px;
  background: #ffffff;
  color: white;
  overflow:hidden;
  
}

.grid-item>img {
  height: 100%;
  width: auto;  
}

.grid-item--text { height: 400px; }

.grid-item--width2 { width: 745px;max-width:745px; }

.grid-container {
max-width:1400px;
}

.portfolio-item {
  position: relative;
  float: left;
  width: 31.5%;
  min-height: auto;
  min-width:auto;
  height:829px;
  margin:0;
  margin-right:5px;
  margin-bottom:10px;
  padding:0;
  padding-right:5px;
  padding-bottom:5px;
  padding:top:5px;
  background: #ffffff;
  color: white;
  font-size: 50px;
  overflow:hidden;
}

.portfolio-item>img {
  width: 105%;
  height: auto;
  max-height:105%;
  overflow:hidden;  
}

.portfolio-item--width2 {
  width: 63%;
  max-width:63%;
  margin:0;
  margin-right:10px;
  margin-bottom:10px;
  padding:0;
  padding-right:5px;
  padding-bottom:5px;
  padding:top:5px;
  overflow:hidden;
}
.portfolio-item--width2>img {
  width: 105%;
  overflow:hidden;
}

.carousel-back {
padding-left:15%;
padding-right:15%;
}

}




@media (min-width: 1900px) {

.container {
padding:auto;
margin:auto;
}

.navbar>.container {
margin-left:auto;
margin-right:auto;
padding-right:0;
}

.padcontainer {
padding-left:inherit;
padding-right:inherit;
}

.carousel-inner {
width:80%;
margin-left:auto;
margin-right:auto;
}

.grid-container {
  width:75%px;
  margin:0;
  padding:0;
  margin-right:5%;
}


.grid-item {
  position: relative;
  float: left;
  width: 29.5%;
  min-height: auto;
  min-width:auto;
  margin: 0;
  margin-right:2%;
  margin-bottom:2%;
  padding: 10px;
  background: #ffffff;
  color: white;
  overflow:hidden;
  
}

.grid-item>img {
  height: 100%;
  width: auto;  
}

.grid-item--text { height: 400px; }

.grid-item--width2 { width: 745px;max-width:745px; }

.grid-container {
max-width:1400px;
}

.portfolio-item {
  position: relative;
  float: left;
  width: 31.5%;
  min-height: auto;
  min-width:auto;
  height:829px;
  margin:0;
  margin-right:5px;
  margin-bottom:10px;
  padding:0;
  padding-right:5px;
  padding-bottom:5px;
  padding:top:5px;
  background: #ffffff;
  color: white;
  font-size: 50px;
  overflow:hidden;
}

.portfolio-item>img {
  width: 105%;
  height: auto;
  max-height:105%;
  overflow:hidden;  
}

.portfolio-item--width2 {
  width: 63%;
  max-width:63%;
  margin:0;
  margin-right:10px;
  margin-bottom:10px;
  padding:0;
  padding-right:5px;
  padding-bottom:5px;
  padding:top:5px;
  overflow:hidden;
}
.portfolio-item--width2>img {
  width: 105%;
  overflow:hidden;
}

.carousel-back {
padding-left:20%;
padding-right:20%;
}

}
/* Call to Action */

/* Map */

/* Footer */