/*****************************************************************
STANDARD ITEMS 
*******************************************************************/
body { font-family: 'Lato', sans-serif; padding-top: 80px;}

h1, h2, h3, h4, h5, h6 { text-transform: uppercase;}


a:hover { text-decoration: none;}

.map-icon { padding-left: 20px;}
.map-icon img {padding-left: 10px;}
.top-buffer { margin-top:30px; }
.bottom-buffer { margin-bottom: 25px;}
.double-line {line-height: 2;}
.double-letter { letter-spacing: 4px;}

.about p { line-height: 2;}
.about h2 {letter-spacing: 4px;}
.about-hero {
    padding-top: 30px;
    padding-bottom: 250px;
    text-align: right;
    color: #fff;
    text-shadow: rgba(0, 0, 0, 0.9) 0px 0px 7px, rgba(0, 0, 0, 0.6) 0px -1px 1px;}

.navbar-default .navbar-nav li a {color: #fff;}
.navbar-default .navbar-nav li a:visited {color: #fff;}
.navbar-default .navbar-nav li a:hover {color: #b9b9b9;}
.navbar-default .navbar-nav li a:focus {color: #b9b9b9;}

.navbar-nav {width: 100%;text-align: center;}
.navbar { 
   background: rgba(0, 29, 68, 1);
    min-height: 80px;
  /*  background: #001d44 url('../img/gradnew.png') repeat-x bottom; */
    border-bottom: 0;
    text-transform: uppercase;}

.navbar-header {background: rgba(0, 29, 68, 1);}
.navbar-default .navbar-toggle {width: 90px; margin-top: 15px; margin-bottom: 15px; border-radius: 0;
    border: none;}
.navbar-default .navbar-toggle  h5 {margin: 0; color: #fff;}
.navbar-default .navbar-toggle .icon-bar {background-color: #fff;}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background-color: inherit;}

.navbar-brand {
    position: absolute;
    width: 100%;
    text-align: center;
    }

.navbar-brand img {
    max-width: 150px;
    }

.navbar-nav li {
    font-size: 20px;
    float: none;
    display: inline-block;
    width: 160px;
    /* background-color: red; */
}

.logo-spacer {
    margin-right: 280px;}

/*
.navbar-collapse {   background:#7f7f7f;
  background:rgba(255,255,255,0.5);} */

.navbar-nav li a {
    padding-top: 25px;
}

.backstretch {
	height: 700px;
	}

.hero-2 {
    z-index:5;
    
  
   
    color: #fff;
	text-shadow: rgba(0, 0, 0, 0.9) 0px 0px 7px, rgba(0, 0, 0, 0.6) 0px -1px 1px;
   /* background-color: green; */
    width: 100%;
    text-align: right;
 
 
}


.book-btn {
  -webkit-border-radius: 26;
  -moz-border-radius: 26;
  border-radius: 26px;


  
  color: #ffffff;
  font-size: 18px;
  background: #000000;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
    text-transform: uppercase;
	
}


.book-btn-med {
  -webkit-border-radius: 22;
  -moz-border-radius: 22;
  border-radius: 22px;
  border: 1.5px solid;
  border-color:#000;

  
  color: #000000;
  font-size: 18px;
  background: #ffffff;
  padding: 8px 15px 8px 15px;
  text-decoration: none;
    text-transform: uppercase;
	
}

.book-btn-sm {
  -webkit-border-radius: 14;
  -moz-border-radius: 14;
  border-radius: 14px;
  border: 1.5px solid;
  border-color:#000;

  
  color: #000000;
  font-size: 14px;
  background: #ffffff;
  padding: 2px 7px 2px 7px;
  text-decoration: none;
    text-transform: uppercase;
	
}

.books {text-align: center;
    line-height: 2;}
.books img {max-height: 400px;}

.book-btn:hover {
  background: #cccccc;
    color: #ffffff;
  text-decoration: none;
}


.book-btn-med:hover {
  background: #cccccc;
    color: #000000;
  text-decoration: none;
    border: 1.5px solid;
  border-color:#000;
}

.book-btn-sm:hover {
  background: #cccccc;
    color: #000000;
  text-decoration: none;
    border: 1.5px solid;
  border-color:#000;
}

.line::after {
    content: '';
    display: block;
    margin: 0 auto;
    margin-top: 20px;
    margin-top: 2rem;
    height: 1px;
    height: 0.1rem;
    width: 23px;
    width: 2.3rem;
    border-bottom: 2px solid #000;
    background-color: transparent !important;
    position: relative;
    left: -2px;
    left: -0.2rem;
}
    



.portfolio-bg {
    background-size: 100% auto;
    background-repeat: no-repeat;
    }

.portBox1 {
    float: left;
    position: relative;
    width: 50%; /*  20%  */
    padding-bottom: 50%; /*  20%  */
   
    }

.portBox1 a:hover {
    color: #b9b9b9;
    }

.portBox1 a {
    color: #fff;
   
    }
.portBox1 h1 {
     text-shadow: rgba(0, 0, 0, 0.9) 0px 0px 7px, rgba(0, 0, 0, 0.6) 0px -1px 1px;}
   
.portBox3 {
    float: left;
    position: relative;
    width: 100%; /*  20%  */
	padding-top: 10%; /*  5%  */
    padding-bottom: 34%; /*  20%  */
    }

.portBox4 {
    float: left;
    position: relative;
    width: 100%; /*  20%  */
		padding-top: 5%; /*  10%  */
	padding-bottom: 34%; /*  20%  */
    }

.portBoxInner {
   position: absolute;
   left: 10px; /* originally all 10px... does buffer around images */
   right: 10px;
   top: 10px;
   bottom: 10px;
   overflow: hidden;
}
      
.portBoxInner a { width: 100%; height: 100%; }
      

      
.portBoxInner h1 {
          position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   margin-bottom: 80px;
     padding: 10px;
   text-align: center;
    font-size: 4em;
          
}
 
      
.portBoxInner .portTitle {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;

   color: #FFF;
    background-color: #001d44;
  
   text-align: center;
 pading: 10px;
}
      
.portBoxInner .portTitleGray {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;

   color: #001d44;
    background-color: #e3e3e3;
  
   text-align: center;
 pading: 20px;
}


    .portBoxInner .portTitleWhite {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;

   color: #001d44;
    background-color: #FFF;
		border-bottom-color: 001d44;
		border-bottom-style:solid;
		border-bottom-width:thin; 
		
				
		border-left-color: 001d44;
		border-left-style:solid;
		border-left-width:thin; 
		
		border-right-color: 001d44;
		border-right-style:solid;
		border-right-width:thin; 
  
   text-align: center;
 pading: 10px;
} 

.port-button {
    list-style: inline;
    clear: both;
    margin: 0;
   
    float: right;
    margin-bottom: 20px; margin-top: -20px;
}

.port-button li {
   
    display: inline;
    list-style-type: none;
    padding-right: 20px;
    text-transform: uppercase;
    padding: 10px;
}

  .port-hello { 
      color: #fff;
        padding-top: 40px; 
        padding-bottom: 40px; 
        text-align: center; 
        text-shadow: rgba(0, 0, 0, 0.9) 0px 0px 7px, rgba(0, 0, 0, 0.6) 0px -1px 1px;
        letter-spacing: 4px;
        }

.port-hello-f { 
      color: #fff;
        padding-top: 40px; 
        padding-bottom: 40px; 
        text-align: center; 
                letter-spacing: 4px;
        }

 .port-hello-sm { 
      color: #000;
        padding-top: 20px; 
        padding-bottom: 20px; 
        text-align: center; 
        letter-spacing: 4px;
        }

.awards-circle {
      background: url('../img/awards-circle.png') no-repeat center;
    width: 90px;
    height: 90px;
    color: #fff;
    text-align: center;
    padding-top: 5px;
}

.awards img { 
    
   margin-top: -10px;
}



.news img { max-width: 300px; padding-bottom: 15px;} 

.news-btn {  margin-top: 20px;}
    
.news-covers {
    margin-top: -20px;
}

#news-bar { margin-top: 25px; width: 100%; text-align: right;}

.news h3 {margin-top: 0px;}

.footer-stripe {
    margin-top: 100px;
    height: 15px;
    background-color: #001d44;
    border-bottom: 1px solid #fff;
    }

.footer {
    padding-top: 30px;
    padding-bottom: 100px;
	color: #b9b9b9;
	background-color: #001d44;
	}

.footer img {
    width: 100px;
    margin-left: -5px;
    margin-bottom: 5px;
    }

.footer-menu {
   
    clear: both;
    margin: 0;
    padding: 0 0 25px 0;
    }

.footer-menu li {
    display: inline;
    list-style-type: none;
    padding-right: 20px;
    text-transform: uppercase;
    }


.link-white a {color: #fff;}
.link-white a:visited {color: #fff;}
.link-white a:hover {color: #b9b9b9;}
.link-white a:focus {color: #b9b9b9;}

 /*****************************************************************
PHOTO GALLERY 
*******************************************************************/
.gallery-note { margin-bottom: 20px; margin-top: -20px;}



.wrap {
    overflow: hidden;
    margin: 0px;
    }

.box {
    float: left;
    position: relative;
    width: 33%; /*  20%  */
    padding-bottom: 25%; /*  20%  */
    }

.box2 {
    float: left;
    position: relative;
    width: 100%; /*  20%  */
    padding-bottom: 100%; /*  20%  */
    }




.boxInner {
    position: absolute;
    left: 5px; /* originally all 10px... does buffer around images */
    right: 5px;
    top: 5px;
    bottom: 5px;
    overflow: hidden;
    cursor: pointer; 
    }

.boxInner:hover { 
    opacity: 0.8; 
    filter: alpha(opacity=30);
    } 

.boxInner img {
    width: 100%;
    }
.boxInner .titleBox {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   color: #FFF;
   padding: 10px;
   text-align: right;
    }




 /*****************************************************************
SMARTPHONE VIEW: 1 tile
*******************************************************************/
@media only screen and (max-width : 480px) {
     
    body {padding-top: 60px;}
    .navbar { background: rgba(0, 29, 68, 0.6); }
    .logo-spacer {margin-right: 0px;}
    .hero-box h1 {font-size: 20px;}
    .home-text h1, h3 {font-size: 20px;}
    .port-hello h1 {font-size: 20px;}
    .center-small {text-align: center;}
    .navbar {min-height: 60px;}
    
    .navbar-nav li { margin: 0; width: 100%;text-align: left;} /* controls the logo gap in full mode */
    .navbar-brand {width: 200px; text-align: left;}
    
    
    
    .backstretch {height: 300px;}
    .hero-box {height: 200px;}  
    .hero-2 {text-align: center;}
  
    .about-hero h3 {font-size: 14px;}
    .about-hero {height: 250px;}
    
    
    .navbar-brand img {
        max-width:120px; 
        margin-top: -3px;
        }
    
 
    
   .port-bg {
        background-size: auto auto;
        background-repeat: no-repeat;
        background-position: center top; 
        }
    
    .portBox1 {
        width: 100%; /*  20%  */
        padding-bottom: 100%; /*  20%  */
    }
    
 
    
    
    
    
    .box {
        width: 100%;
        padding-bottom: 100%;
    }
    
    
    #news-bar { text-align: left;}
    
    .footer-menu li {
        display: block;
        }
    
}
  

 /*****************************************************************
TABLET VIEW: 2 tiles 
*******************************************************************/
@media only screen and (max-width : 767px) and (min-width : 481px) {
  
    body {padding-top: 60px;}
     .navbar { background: rgba(0, 29, 68, 0.6); }
    .logo-spacer {margin-right: 0px;}
    .hero-box h1 {font-size: 20px;}
    .home-text h1, h3 {font-size: 20px;}
    .port-hello h1 {font-size: 20px;}
    .center-small {text-align: center;}
    .navbar {min-height: 60px;}
    .navbar-nav li { margin: 0; width: 100%; text-align: left;} /* controls the logo gap in full mode */
    .navbar-brand {width: 200px; text-align: left;}
    .backstretch {height: 300px;}
    .hero-box {height: 200px;}
    
    .about-hero h3 {font-size: 14px;}
    .about-hero {height: 250px;}
    
    
    .navbar-brand img {
        max-width:120px; 
        margin-top: -3px;
        }
    
   
    .port-bg {
        background-size: auto auto;
        background-repeat: no-repeat;
        background-position: center top; 
        }
    
    .portBox1 {
        width: 100%; /*  20%  */
        padding-bottom: 100%; /*  20%  */
        }
    
  
    
  
    .box {
        width: 100%; /* 50%  */
        padding-bottom: 50%;
        }
    
    #news-bar { text-align: left;}
}

 /*****************************************************************
SMALL DESKTOP VIEW: 3 tiles 
*******************************************************************/
@media only screen and (max-width : 1060px) and (min-width : 768px) {
    .navbar-nav li { font-size: 14px; width: 90px;}
    .backstretch { height: 500px;}
    .hero-box {height: 400px;}
    
    .port-bg {
        background-size: auto auto;
        background-repeat: no-repeat;
        background-position: center top; 
        }
    
    .box {
        width: 33.3%;
        padding-bottom: 45%;  /*  33.3  */
        }
    }

 /*****************************************************************
MEDIUM DESKTOP VIEW: 3 tiles 
*******************************************************************/
@media only screen and (max-width : 1199px) and (min-width : 1061px) {
    .backstretch {height: 500px;}
    .hero-box {height: 400px;}
    .box {
        width: 33%;  /* 25%  */
        padding-bottom: 33%;  /* 25%  */
        }
    }

 /*****************************************************************
LARGE DESKTOP VIEW: 3 tiles (noel and cam)
*******************************************************************/
@media only screen and (max-width : 1920px) and (min-width : 1200px) {
    .backstretch { height: 600px;}
    .hero-box {height: 475px;}
    }

 /*****************************************************************
EXTRA LARGE: 3 tiles (richard)
*******************************************************************/
@media only screen and (max-width : 10000px) and (min-width : 1921px) {
    .backstretch {height: 900px;}
    .hero-box {height: 775px;}
    }

<!--this is a problem area FIXXXXXXX -->
@media (min-width: 768px) {
    .navbar-brand
    {
        position: absolute;
        width: 100%;
        left: 0;
        text-align: center;
        margin: auto;
        height: 100px;
    }
    
    
}





.contact-hero {
        padding-top: 150px;
    padding-bottom: 150px;
    text-align: center;
    color: #fff;
    text-shadow: rgba(0, 0, 0, 0.9) 0px 0px 7px, rgba(0, 0, 0, 0.6) 0px -1px 1px;
    text-spacing: 4px;
}




.portfolio_b {
    margin-top: 20px;
    background-color: #b9b9b9;
    padding-bottom: 20px;
	letter-spacing: 4px;
    color: #fff;
    
    margin-bottom: -50px;
}

.hero {
	margin-top: 30px;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: #fff;
	text-shadow: rgba(0, 0, 0, 0.9) 0px 0px 7px, rgba(0, 0, 0, 0.6) 0px -1px 1px;
	}

.hero h5 {
    margin-top: 30px;
	letter-spacing: 4px;
	text-transform: uppercase;
}

.wp-post-image {width: 100%; margin-top:20px; margin-bottom: 20px;}

  /* .wp-post-image {max-width: 300px; max-height: 204px; margin-top:20px; margin-bottom: 20px;} */

.grey-bg {
     line-height: 2;
    background-image: url('../img/fabric_1.png');
    padding-bottom: 20px;
    }

.grey-bg img {
    width: 100%;
}



.team strong { 
    text-transform: uppercase; 
    display: block; 
    padding-top: 20px;
    }


.row-padding {
    padding-top: 20px;
}






.team {
    text-align: center;
  
}

.team p {
    line-height: 2;
    padding: 10px;
    }

.team img { 
    padding-top: 20px;
}

.pad-images img {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20px;
    padding-bottom: 10px;}


.contact h2 { letter-spacing: 4px;}


    
span.glyphicon {  
    padding-right: 15px;
    padding-top: 25px;
    border-radius: 6px;
}
 


.home-text { 
    padding-top: 30px;
    text-align: center;
    line-height: 2;
     background: #fff url('../img/grad-b.png') repeat-x top;
    padding-bottom: 20px;
    
}

.home-text img {
    width: 80px;    
}

.home-text h1 {
    line-height: 1.5;
}

.home-text h3 {
    border-top: 2px solid #b9b9b9;
    border-bottom: 2px solid #b9b9b9;
    padding: 10px;
    margin-left: 30px;
    margin-right: 30px;
}

.home-box {
    margin-left: 37px;
    margin-right: 37px;
    padding-top: 10px;
}

.home-stripe {
    margin-top: 20px;
    margin-bottom: -100px;
    text-align: center;
    padding: 20px;
    background-image: url('../img/fabric_1.png');
    }

.home-stripe p {
    font-face: 'Lato', sans-serif;
    font-size: 1.33em; 
}

.home-stripe h5 {
    text-align: right;   
}


<!-- custom CSS for google maps -->

    .google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

    .map {margin-top: 20px;}

.map-container {
   
    height: 200px;
}


<!-- light gallery code -->

.showThumbByDefault #lightGallery-Gallery.open .lightGallery-slide {
    padding-bottom: 120px;
}
.showThumbByDefault #lightGallery-Gallery .thumb_cont .thumb_info{
    display:none;
}
/*/ actions */
.showThumbByDefault #lightGallery-action {
    position: static;
}
.showThumbByDefault #lightGallery-action a {
    margin-top: -14px !important;
    position: absolute;
    top: 50%;
    z-index: 9999999;
    background-color: transparent;
    font-size: 28px;
}
.showThumbByDefault #lightGallery-action a#lightGallery-prev {
        left: 17px;
    }
    .showThumbByDefault #lightGallery-action a#lightGallery-next {
        right: 17px;
    }
    .localVideo #lightGallery-action {
    position: static;
}
 
 
 
/*/ remove zoom effect of image */
.showThumbByDefault #lightGallery-Gallery .lightGallery-slide .object{
    transform: scale3d(1, 1, 1) !important;
    -moz-transform: scale3d(1, 1, 1) !important;
    -ms-transform: scale3d(1, 1, 1) !important;
    -webkit-transform: scale3d(1, 1, 1) !important;
    -o-transform: scale3d(1, 1, 1) !important;
}
/*/ transparent background */
.showThumbByDefault#lightGallery-outer{
    background-color: rgba(0, 0, 0, 0.55);
}