@charset "utf-8";
/* CSS Document */

/*-----------------------------------------*/

body {font-family: 'Walkway Expand bold', sans-serif; 
}

html, body {
  height: 100%;
}


.thumbnail:hover {
    position:absolute;
    top:5%;
    left:5%;
    width:400%;
    height:auto;
    display:block;
    z-index:9999999;
	
}

.large-text {font-size:3rem;}
.large-text-mobile {font-size:1.8rem;}

h1 {font-family: 'Walkway Expand', sans-serif;}
h2 {font-family: 'Walkway Expand', sans-serif;}
h3 {font-family: 'Walkway Expand', sans-serif;}
h4 {font-family: 'Walkway Expand bold', sans-serif;}
h5 {font-family: 'Walkway Expand bold', sans-serif;}
h6 {font-family: 'Walkway Expand bold', sans-serif;}

.linheight-big {line-height:3rem;}


/*VIDEO*/
.video-fluid {
  width: 100%;
  height: auto;
}
/*VIDEO*/




.purple-text-box {
	 
  max-width: 100%;
  position: relative;
  
}


.full-height {
  height: 100%;
}

.same-height {
    height: 100%;
    width: 100%;
}

 .sideways {

  transform: rotate(270deg)!important;
	 
}
.portfolio-text { line-height:20px!important; color: white!important;}	 
/* Force Hand Cursor Over Clickable Items */

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
    cursor: pointer!important;
}

.hand { cursor: pointer;}
a {cursor: pointer!important;
text-decoration: none;}
a:hover {text-decoration: none;}


.letterspace {letter-spacing: 1px;}


.close {
    opacity: 1;
}

.icon-30 {width:30px;}
.icon-40 {width:40px;}
.icon-50 {width:50px;}
.icon-60 {width:60px;}
.icon-70 {width:70px;}
.icon-90 {width:90px;}
.icon-100 {width:100px;}
.icon-110 {width:110px;}
.icon-120 {width:120px;}
.icon-130 {width:130px;}
.icon-140 {width:140px;}





.text-xs-left {
    text-align: left !important;
}

.text-xs-right {
    text-align: right !important;
}

.text-xs-center {
    text-align: center !important;
}

.text-xs-justify {
    text-align: justify !important;
}

@media (min-width: 768px) {
    .text-sm-left {
        text-align: left !important;
    }

    .text-sm-right {
        text-align: right !important;
    }

    .text-sm-center {
        text-align: center !important;
    }

    .text-sm-justify {
        text-align: justify !important;
    }
}

@media (min-width: 992px) {
    .text-md-left {
        text-align: left !important;
    }

    .text-md-right {
        text-align: right !important;
    }

    .text-md-center {
        text-align: center !important;
    }

    .text-md-justify {
        text-align: justify !important;
    }
}

@media (min-width: 1200px) {
    .text-lg-left {
        text-align: left !important;
    }

    .text-lg-right {
        text-align: right !important;
    }

    .text-lg-center {
        text-align: center !important;
    }

    .text-lg-justify {
        text-align: justify !important;
    }
}






/*
h1 { line-height:40px;
font-weight: 300!important;
font-size: 2.4rem!important;}
h2 { line-height:45px;
font-weight: 200!important;
font-size: 1.4rem!important;}
h3 { line-height:25px; 
font-weight: 200!important;
font-size: 1.2rem!important;}
h4 { line-height:28px;
font-weight: 400!important;
font-size: 1rem!important;}
h5 { line-height:16px;
font-weight: 200!important;
font-size: 0.8rem!important;}
h6 { line-height:14px;
font-weight: 200!important;
font-size: 0.6rem!important;}*/

/*::::::::::::::::::::::::::::::::::::::::::::::::::::

*/
/* Small devices (landscape phones, 544px and up) */
@media (min-width: 24px) {  
  h1 {font-size:2em; 
	  font-weight: 300!important;} /*1rem = 16px*/
  h2 {line-height:45px;
font-weight: 300!important;
font-size: 1.2em!important;} /*1rem = 16px*/
 h3 {line-height:45px;
font-weight: 300!important;
font-size: 1em!important;} /*1rem = 16px*/
	 h4 {line-height:26px;
font-weight: 300!important;
font-size: 0.9em!important;} /*1rem = 16px*/
		h5 {line-height:1em!important;
font-weight: 300!important;
font-size: 0.8em!important;
	text-transform: uppercase;} /*1rem = 16px*/
			
	.big-black-text {font-size:1.8rem!important;
font-weight: 500;
		color: #000;}
	.big-black-text-smaller {font-size:1.5rem!important;
font-weight: 300;
	color: #000;}
	
	
	.icon-80 {width:100px!important;}
	
	
	
svg.intro {
  background: linear-gradient(135deg, #aa3bb1, #582a7e);
  max-width: 800px;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 30px 50px -20px #2e0642;
}
	
	
.large-text {font-size:2.5rem;}

}
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
  h1 {font-size:2.3em;
	font-weight: 300!important;} /*1rem = 16px*/
  h2 {line-height:45px;
font-weight: 300!important;
font-size: 1.8em!important;} /*1rem = 16px*/
	h3 {line-height:35px;
font-weight: 300!important;
font-size: 1.3em!important;} /*1rem = 16px*/
 h4 {line-height:26px;
font-weight: 300!important;
font-size: 1em!important;} /*1rem = 16px*/	
	h5 {line-height:1.2em!important;;
font-weight: 300!important;
font-size: 0.4em!important;
	text-transform: uppercase;} /*1rem = 16px*/
	h6 {line-height:1em!important;;
font-weight: 300!important;
font-size: 0.3em!important;
		text-transform: uppercase;} /*1rem = 16px*/
	.big-black-text {font-size:2.2rem!important;
font-weight: 500}
	
	.icon-80 {width:70px!important;}
	
	
	
svg.intro {
  background: linear-gradient(135deg, #aa3bb1, #582a7e);
  max-width: 800px;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 30px 50px -20px #2e0642;
}
	
	
.large-text {font-size:3rem;}

}
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  h1 {font-size:2.5em;
	font-weight: 300!important;} /*1rem = 16px*/
  h2 {line-height:45px;
font-weight: 300!important;
font-size: 2.2em!important;} /*1rem = 16px*/
	  h3 {line-height:35px;
font-weight: 300!important;
font-size: 1.8em!important;} /*1rem = 16px*/
		 h4 {line-height:25px;
font-weight: 300!important;
font-size: 1em!important;} /*1rem = 16px*/
	
		h5 {line-height:1.2em!important;;
font-weight: 300!important;
font-size: 0.4em!important;} /*1rem = 16px*/

	h6 {line-height:1em!important;;
font-weight: 300!important;
font-size: 0.3em!important;
	text-transform: uppercase;} /*1rem = 16px*/
	
	
	.big-black-text {font-size:2.5rem!important;
font-weight: 500}
	
	.icon-80 {width:80px!important;}
	
	
	
svg.intro {
  background: linear-gradient(135deg, #aa3bb1, #582a7e);
  max-width: 800px;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 30px 50px -20px #2e0642;
}

}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
  h1 {font-size:2.7em;
	font-weight: 300!important;} /*1rem = 16px*/    
  h2 {line-height:45px;
font-weight: 300!important;
font-size: 2.4em!important;} /*1rem = 16px*/   
  h3 {line-height:35px;
font-weight: 300!important;
font-size: 2.6em!important;} /*1rem = 16px*/
		 h4 {line-height:25px;
font-weight: 300!important;
font-size: 1em!important;} /*1rem = 16px*/
	h5 {line-height:1.2em!important;
font-weight: 300!important;
font-size: 0.4em!important;
	text-transform: uppercase;} /*1rem = 16px*/
	h6 {line-height:1em!important;;
font-weight: 300!important;
font-size: 0.3em!important;
	text-transform: uppercase;} /*1rem = 16px*/	
	
	.big-black-text {font-size:2.5rem!important;
font-weight: 500}
	
	.icon-80 {width:80px;}
	
	
	
svg.intro {
  background: linear-gradient(135deg, #aa3bb1, #582a7e);
  max-width: 800px;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 30px 50px -20px #2e0642;
}

}
 
/*
::::::::::::::::::::::::::::::::::::::::::::::::::::*/

	 







/* Style the Image Used to Trigger the Modal */
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}



/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10000; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto!important; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
	  overflow-y: auto!important;
	
  display: flex;
  flex-direction: column;

}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 900px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #fff!important;
    font-size: 20px;
    font-weight: bold;
    transition: 0.3s;
	background-color: #af3db6!important;
	z-index: 10000000!important;
	padding:10px;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}






footer small  {font-size: 11px!important;}

.green-text-bigger {color:#000;
font-size: 1.3em;
font-weight: 500;
letter-spacing: 0.04em;}





	 
		  .line-height30 {line-height: 30px;}
		  .green-text {color:#000;}
		  .green-text a {color:#000!important;}
		  .green-text a:hover {color:#000000!important;}
		  .green-bg {background-color:#000;}
		  .black-bg {background-color: black;}




.nav-link  {line-height: 14px; text-align: center}
.nav-link small  {font-size: 12px!important;}


.nav-item::after{content:'';display:block;width:0px;height:5px;background:#000;transition: 0.2s; margin-top: 10px;}


.nav-item:hover::after{width:70%;}
@media (max-width: 767px) {
    .nav-item::after{content:'';display:block;width:0px;height:5px;background:#000;transition: 0.2s; margin-top: 0px;}
}
@media (max-width: 992px) {
    .nav-item:hover::after{width:100%;}
}

@media (min-width: 1224px) {
    .nav-item:hover::after{width:60%;}
	
	.container-fluid{
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: 0%;
  margin-left: 0%;
}
}

@media (min-width: 1500px) {
    .nav-item:hover::after{width:60%;}
	
	.container-fluid{
  width: 80%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: 0%;
  margin-left: 0%;
}
}
.navbar-expand-md .navbar-nav .nav-link {
    padding-right: 1px!important;
    padding-left: 1px!important;
  }




.navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover{color:#000;}

.nav-link{padding:15px 5px;
	transition:0.2s;
}

.nav-logo-mobile {height: 100px;}
.nav-logo {height: 130px;}



.navbar-brand {
  height: auto;
  padding: 15px 5px;
  -webkit-transition: padding 0.3s;
          transition: padding 0.3s;
}
.navbar-brand img {
	
	-webkit-transition: height 0.3s;
	transition: height 0.3s;
}
.navbar-nav > li > a {
   font-size: 13px;
  font-weight: 600;
	color: #000!important;

 
}
.navbar-nav > li > a:hover{

	color: #000!important;

 
}
.navbar-nav >li > a > small:hover{
	color: #000!important;

 
}.navbar-nav >li > a > small{
letter-spacing: 0px!important;
	color: #000!important;

 
}


.hover-change {
    display: inline-block;
    background-color: transparent; /* default color */

    /* "to left" / "to right" - affects initial color */
    background: linear-gradient(to left, white 50%, #000 50%) right;
    background-size: 200%;
    transition: .4s ease-out;
}
.hover-change:hover {
    background-position: left;
}











/*OUR TEAM
Copyright (c) 2013 Bootsnipp.com*/

.our-team {
  padding: 30px 20px 40px;
  margin-bottom: 30px;
  background-color: #fff;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.our-team .picture {
  display: inline-block;
  /*height: 230px;
  width: 230px;*/
  margin-bottom: 50px;
  z-index: 1;
  position: relative;
}

.our-team .picture::before {
  content: "";
  width: 100%;
  height: 0;
  border-radius: 50%;
  background-color: transparent;
  position: absolute;
  bottom: 135%;
  right: 0;
  left: 0;
  opacity: 0.9;
  transform: scale(3);
  transition: all 0.3s linear 0s;
}

.our-team:hover .picture::before {
  height: 100%;
}

.our-team .picture::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #af3db6;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.our-team .picture img {
  width: 100%;
  height: auto;
  border-radius: 0%;
  transform: scale(1);
  transition: all 0.9s ease 0s;
}

.our-team:hover .picture img {
  box-shadow: 0 0 0 14px #fff;
  transform: scale(0.7);
	  border-radius: 50%;

}

.our-team .name {
  display: block;
  font-size: 20px!important;
  color: #000;
  
	margin-bottom: -5px;
}
.our-team .title {
  display: block;
  font-size: 12px!important;
	line-height: 20px;
  color: #af3db6;

		margin-bottom: 10px;
}

.our-team small {
  display: block;
  font-size: 10px!important;
  color: #000;

}
.our-team .social {
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: #af3db6;
  position: absolute;
  bottom: -100px;
  left: 0;
  transition: all 0.5s ease 0s;
}

.our-team:hover .social {
  bottom: -10px;
}

.our-team .social li {
  display: inline-block;
}

.our-team .social li a {
  display: block;
  padding: 10px;
  font-size: 17px;
  color: white;
  transition: all 0.3s ease 0s;
  text-decoration: none;
}

.our-team .social li a:hover {
  color: #af3db6;
  background-color: #000;
}


/*END OUR TEAM*/

.link-underline a {text-decoration: none;
	line-height: 0.4em;
	color: #000;

}
.link-underline:after {
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0; /* This will center the border. */
    width: 7%; 
    padding-top: 2px; 
    border-bottom: 1px solid black; 
	transition: 0.2s;

}

.link-underline:hover::after{width:30%;
border-bottom: 4px solid #000;}


.end-line {content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0; /* This will center the border. */
    width: 100%; 
    padding-top: 2px; 
    border-bottom: 1px solid #000; }


/*EQL ROW*/
.row-eq{
    display: flex;
}
.col-eq{
  flex: 1;

  margin: 10px;
}

.col-eq p{
    padding-bottom: 50px;
}
.info-button {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 5px;
}
@media (max-width: 768px) {
    .row-eq{
        display: block;
    }
    .col-eq{
      flex: unset;
    }
}

tiny {font-size: 0.6rem;
line-height: 11px!important;}

.pull-up-10 {margin-top:-10px;}
.pull-up-20 {margin-top:-20px;}
.pull-up-30 {margin-top:-30px;}

.isd-logo-main {width: 300px; padding: 10px; }
.isd-logo-small {width: 200px; padding: 10px; }












button {border:
none!important;}




.pics-centre img {
   position: absolute;
   top: 50%;
   left: 50%;
  
}



.carousel-caption {
  position: absolute;
  right:40%;
  bottom: 0%;
  left: 10%;
  z-index: 10;
  padding-top: 50px;
  padding-bottom: 20px;

  text-align: left;
}


.carousel-caption h3 {
	font-size: 3em!important;
	line-height: 50px;
	margin-top: 10px;
	margin-bottom: 0px;
	  
	
}
.carousel-caption h4 {
	font-size: 1.3em !important;
	margin-top: -20px;
	
	font-weight: 100;
}

.carousel-caption p {
	font-size: 1em!important;
	background-color: #353535;
	padding: 6px;
	
	
}
.carousel-caption a {color: inherit; text-decoration: none;}
.carousel-caption btn {
	font-size: 1.2em!important;
	background-color: #f9b233;
	padding: 6px 25px;;
	margin-top: 20px;
	color: #353535;
	
	
}
.carousel-caption:hover btn {
	cursor: pointer;
	font-size: 1.2em!important;
	background-color: #f38e00;
	padding: 6px 25px;;
	margin-top: 20px;
	color: #fff;

transition: background-color 4s;
}

 


.banner-caption {
  position: absolute;
  right:50%;
  bottom: 5%;
  left: 10%;
  z-index: 10;
  padding-top: 50px;
  padding-bottom: 20px;
  text-align: left;
}


.banner-caption h3 {
	font-size: 3em!important;
	line-height: 50px;
	margin-top: 10px;
	margin-bottom: 20px;
color: #fff;
	
}
.banner-caption h4 {
	font-size: 1em !important;
	margin-top: 20px;
color: #fff;
	font-weight: 100;
	margin-bottom: 20px;
}

.banner-caption p {
	font-size: 0.9em!important;
	background-color: #f38e00;
	color: #fff;
	padding: 6px 25px;
	
	
}
.banner-caption p a {
	color: #fff;

	
	
}
.banner-caption p a:hover {
	text-decoration: none;
	

	
	
}


.angle-main {min-height:500px;}
.angle-caption {
  position: absolute;
  right:8%;
  bottom: 0%;
  left: 0%;
  z-index: 10;
  padding-top: 50px;
  text-align: left;
}




blockquote {
  font-size: 1.3em;
}

.padding--15 {
	margin-left:-15px; 
	margin-right:-15px;}

/*BOX HOVER*/
.hovereffect {
  width: 100%;
  height: 100%;
  float: right;
  overflow:hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  background-color: rgba(75,75,75,0.3);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.hovereffect:hover .overlay {
  background-color: rgba(0, 171, 157, 0.4);
}

.hovereffect img {
  display: block;
  position: relative;
	vertical-align: middle;
}

.hovereffect h2 {
  text-transform: uppercase;
  color: #af3db6;
	font-weight:bold;
  text-align: center;
  position: relative;
  font-size: 11px;
	line-height: 15px;
  padding: 8px;
  background: rgba(255, 188, 189, 0.8);
  -webkit-transform: translateY(145px);
  -ms-transform: translateY(145px);
  transform: translateY(145px);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.hovereffect:hover h2 {
  -webkit-transform: translateY(5px);
  -ms-transform: translateY(5px);
  transform: translateY(5px);
}

.hovereffect a.info {
  display: inline-block;
  text-decoration: none;
  padding: 7px 10px;
  text-transform: uppercase;
  color: #fff;
	line-height: 13px;
	font-size: 10px;
  border: 1px solid #f38e00;
  background-color: transparent;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  font-weight: normal;
  margin: 52px 0 0 0;
  padding: 12px 10px;
}

.hovereffect:hover a.info {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.hovereffect a.info:hover {
  box-shadow: 0 0 2px #af3db6;
}

/*END BOX HOVER*/

.tiny-numbers{width:30px;}

.green-button  {
	font-size: 1em;
	background-color: #af3db6;
	padding: 6px 25px;;
	margin-top: 20px;
	color: #fff!important;
	

}
.icon-size {width: 4em;}




.green-building {	 background: url("../images/building-bg2.jpg")  top center no-repeat;
	background-color: #000000;
  background-size: cover;}


/*
.green-building {	 background: url("../images/building-bg.png")  top center no-repeat;
	background-color: #fff;
  background-size: contain;}

.green-building2 {	 background: url("../images/building-bg-faded.png")  bottom center no-repeat;
	background-color: #fff;
  background-size: contain;}



.black-circles-left {	
	background: url("../images/blue-sq-left.png") 0px 100px  no-repeat;
background-size: 60px;}

.green-circles-left {background: url("../images/multi-sq-left.png") left center no-repeat;
background-size: 60px;}
*/
.green-border  {
	border: 1px solid #af3db6;
}



.green-border-left  {
	border-left: 1px solid #af3db6;
}
.green-border-right  {
	border-right: 1px solid #af3db6;
}

.green-border-left-right  {
	border-left: 1px solid #af3db6;
	border-right: 1px solid #af3db6;
}


small {font-size:1em!important;}

ul li {color: #181b1c; line-height: 1.8em!important; 
font-size: 0.8em!important;
	font-weight: 300;
margin-bottom: 15px;}

.small-title {color: #000; line-height: 2em!important; 
font-size: 0.7em!important;
font-weight: 600;
letter-spacing: 1px;}



p {
	color: #000; line-height: 1.8em!important; 
font-size: 0.8em!important;
font-weight: 300;
	
}

.menu-lineheight {line-height:16px;}

#yourElement {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}
.st-highlight {
  color: #af3db6;
}


.footer h4 {font-size:14px; color: #009cb2; font-weight: 200; }

.footer p {
	font-size: 14px;
	color: #181b1c;
}
footer a { font-size:10px;}

footer a { color: #000!important;}
footer a:hover{ color: #000!important;}



.border-right-white {border-right: thin solid #fff;}

.bullets li { color: #666;  background: url(../images/list.png) left center no-repeat; line-height: 25px; padding-bottom:20px;  }
.bullets-white li { color: #fff;  background: url(../images/list.png) left center no-repeat; line-height: 25px; padding-bottom:20px;  }


.teal-bg {	background-color: #009cb2;}
.teal-bg-light {	background-color: #4dd3e1;}
.teal-border { border: #009cb2 thin solid;}
.teal-border-medium { border: #009cb2 thick solid;}
.teal-text { color: #009cb2;}
.black-text { color: #000;}
.black-text a { color: #000!important;}
.black-text a:hover{ color: #000!important;}


.light-grey-bg {	background-color: #ccc;}
.light-grey-border { border: #ccc thin solid;}
.light-grey-border-medium { border: #ccc medium solid;}
.black-border-medium { border: #000 medium solid;}
.white-border-medium { border: #fff medium solid;}
.light-grey-text { color: #ccc;}

.white-border-medium { border: #fff medium solid;}
.green-border-medium { border: #009cb2 medium solid;}



.teal-button {  background-color: #009cb2;
	color: #fff;
  font-size: 16px;
  letter-spacing: 1px;
  border-radius: 0px;
  padding: 8px 30px;
  margin-bottom: 5px;
  -webkit-transition: color 0.3s, background-color 0.3s, border-color 0.3s;
          transition: color 0.3s, background-color 0.3s, border-color 0.3s;}

.teal-button a {color: #fff;}
.teal-button a:hover {color: #fff; background-color: #009cb2;}
.teal-button a:visited {color: #000;}


.icontext { line-height: 17px; 
padding-top: 10px;
padding-bottom: 10px;}


.border-top-white {border-top: white, thin, solid}
.blue-bg {	background-color: #09A1DC;}
.orange-bg {	background-color: #f38e00;}
.orange-bg-light {	background-color:#f9b233;}


.btn-white {
  color: #fff;
  background-color:transparent;
  border-color: #fff;
}



.white-background { background-color:#fff;}
.black-background { background-color:#000;}
.teal-background { background-color:#009cb2;}
.teal-background-light { background-color:#A4E6E3;}



.white-text { color:#fff;}
.white-text a { color:#fff;
text-decoration: none!important;}
.white-text a:hover  { color:#fff!important;}
.white-text a:active  { color:#fff!important;}





.multi-quotes {
 
  background-image: url("../images/green-quotes2.png");
  background-repeat:  no-repeat;
  
  background-position: bottom right;
     
}
.multi-quotes2 {
 
  background-image:url("../images/green-quotes.png"),url("../images/green-quotes2.png");
	background-size: 50px;
  background-repeat: 
      no-repeat;
  
  background-position:  top left, bottom right;
     
}






/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	


}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {



.tel-text {font-size: 35px; font-weight: 100; color:#fff; line-height: 39px;}
	
	
.multi-quotes {
 
  background-image: url("../images/quotes-white-tiny.png");
  background-repeat:  no-repeat;
  
  background-position: top left;
	
     
}
	
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {

}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {

	
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {



}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	
	
	
}

/* iPad 3 (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio : 2),
only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (min-resolution: 192dpi) { 

	
	
	

}





/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
	



	.green-building {	 background: url("../images/building-bg2.jpg")  top center no-repeat;
	background-color: #000000;
		
  background-size: contain;}
	
	
.carousel-caption {
  position: absolute;
  right: 50%;
  bottom: 0%;
  left: 10%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;

  text-align: left;
}


.carousel-caption h3 {
	font-size: 4em!important;
	line-height: 60px;
	margin-top: 20px;
	
	  
	
}
.carousel-caption h4 {
	font-size: 1.4em!important;
	margin-top: 20px;
	
	font-weight: 100;
}

.carousel-caption p {
	font-size: 1em!important;
	background-color: #353535;
	padding: 6px;
	
	
}
.carousel-caption btn {
	font-size: 1.2em;
	background-color: #f9b233;
	padding: 6px 25px;;
	margin-top: 20px;
	color: #353535!important;
	
	
}
	
	
	
	
.banner-caption {
  position: absolute;
  right:55%;
  bottom: 10%;
  left: 10%;
  z-index: 10;
  padding-top: 50px;
  padding-bottom: 20px;
  text-align: left;
}


.banner-caption h3 {
	font-size: 4em!important;
	line-height: 60px;
	margin-top: 10px;
	margin-bottom: 20px;
color: #fff;
	
}
.banner-caption h4 {
	font-size: 1.3em !important;
	margin-top: 20px;
color: #fff;
	font-weight: 100;
	margin-bottom: 20px;
}

.banner-caption p {
	font-size: 1em!important;
	background-color: #f38e00;
	color: #fff;
	padding: 6px 25px;
	
	
}
.banner-caption p a {
	color: #fff;

	
	
}
.banner-caption btn {
	font-size: 1.2em!important;
	background-color: #f38e00;
	padding: 6px 25px;
	margin-top: 40px;
	color: #fff;
	
	
}
	
.multi-quotes {
 
  background-image: url("../images/quotes-white.png");
  background-repeat:  no-repeat;
  
  background-position: top left;
	
     
}
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
	
	
.carousel-caption h3 {
	font-size: 5em!important;
	line-height: 60px;
	margin-top: 20px;
	
	  
	
}
	
	
	
	
	
	
	
	
}

/* Retina displays ----------- */
@media  only screen 
and (-webkit-min-device-pixel-ratio : 2), 
only screen 
and (min-resolution: 192dpi) {

}