/*
#------------------------------------------------------------------------
# John S. - March Joomla! template (for Joomla 2.5)
#
# Copyright (C) 2007-2014 Gavick.com. All Rights Reserved.
# License: Copyrighted Commercial Software
# Website: http://www.gavick.com
# Support: support@gavick.com 
*/



.frontpage #gkPageContentWrap {
    background: #fff url("") repeat 0 0;
}

/********** HEADER **********/

#gkHeader {
    height:100vh;
    margin-bottom:40px;
    }
    
/*** HEADER CONTACT ***/

#gkHeader p {
    font-family:"museo-slab";
    text-align:left;
    font-size:24px;
    color:#fff;
    opacity:1;
    position:absolute;
    top:5%;
    left:10%;
     }
    
#gkHeader a {
    color: #fff;
    }

#gkHeader a:active, #gkHeader a:focus, #gkHeader a:hover {
    color: #ddd;
    }
    
.gk-header1 p {
    max-width:1400px;
    }
    
    
/********** FOOTER **********/
    
    #gkFooter a:hover, #gkFooter a:focus, #gkFooter a:active, body.frontpage.dark_bg #gkFooter a:active, body.frontpage.dark_bg #gkFooter a:focus, body.frontpage.dark_bg #gkFooter a:hover {
    color: #999;
    }


  
  /********** STATEMENT PANELS **********/
  
.gkCols3 .box {
    padding: 0;
    margin right -1em;
    }

.gkTeam {
    margin:0;
    top:0;
    }

.gkTeam figcaption {
    height:400px;
    Background:#6aa3d3 url("/templates/gk_john_s/images/blue_panel_400px.jpg") left top;
    display: table-cell;
    vertical-align: middle;
    }
  
.gkTeam h2 {
    font-size:30px;
    color:white;
    padding: 1em;
    }
    
.gkTeam figure {
   padding: 0 2em 0 0 !important;
   }
   
.gkTeam figure.last {
    padding: 0;
    }
    
    



/********** TYPOGRAPHY **********/



html, body, p, blockquote {   
    font-family: "museo-sans";
    }

h1, h2, h3, h4, h5, h6  {   
    font-family: "museo-slab";
    }


p, h1, h2, h3, h4, h5, h6 {
    text-align:center;
    }
    
blockquote {
    text-align:center;
    font-style: normal;
    font-size:18px;
    margin: 60px 30px 20px;
    color: #000;
    display: block;
    padding: 0 55px;
    position: relative;
}

blockquote:before {
    color: #ccc;
    content: "\f10d";
    font-family: FontAwesome;
    font-size:48px;
    line-height: 0;
    position: relative;
    top:0px;
    left:-10px;
    
  }

blockquote:after {
    color: #ccc;
    content: "\f10e";
    font-family: FontAwesome;
    font-size:48px;
    line-height: 0;
    position: relative;
    top:25px;
    left:10px;
}

.testies p {
    font-style:italic;
    font-size:16px;
    }
    
/********** LAYOUT **********/

#gkTop1, #gkTop2, #gkMainbodyBottom, #gkBottom1 {
    padding-top:60px !important;
    }
    
#aside-menu-toggler {
    display:none !important;
    }
    
#gkTop.active {
    display:none;
}




/********** NSP **********/

.gkNspPM-PortfolioGrid {
    margin: 0;
}

.gkNspPM-PortfolioGrid.with-overlay .figure.loaded:hover .figcaption {
    opacity: .75;
    }
    
.gkNspPM-PortfolioGrid.with-overlay .figcaption:before, .gkNspPM-PortfolioGrid.without-overlay .figure.loaded > div > a:before {
    content:"";
    }
    

.gkNspPM-PortfolioGrid.with-overlay .figcaption > div {
    padding:0;
    height:50%;
    }
    
.gkNspPM-PortfolioGrid.with-overlay .figcaption h3 {
    font-family:"museo-sans";
    padding:0 .5em;
    opacity:1;
    }
    
.no-links {
    cursor:auto;
    }
    
    
    
    
/********** GK GRID **********/
    
#gk-grid-94 .gkGridElement h2, #gk-grid-94 .gkGridElement h3 {
   color:#fff;
   margin:.25em;
    }
    
#gk-grid-94 .gkGridElement h3 {
   font-size:16px;
   }

    
div.middling {
    height:100%;
    }
    
  
    
    


/********** TABLET **********/
   
@media only screen and (min-width: 821px) and (max-width: 1040px) {
    
      /*** HEADER ***/
    





    
.gkTeam figcaption {
    height:250px;
    }
    
/********** GK GRID **********/

    
#gk-grid-94 .gkGridElement h2 {  
    font-size:30px;
    }  
    
#gk-grid-94 .gkGridElement h3 {
    line-height:1.5;
    font-size:12px;
   } 

}

/********** SMALL TABLET **********/

@media only screen and (min-width: 581px) and (max-width: 820px) {
 
.gkHeaderBg {
        background-image: url('/templates/gk_john_s/images/hww-header-small-tab.jpg') !important;
        }
 
.gkTeam figure {
    width:100% !important;
    padding:0 !important;
    margin-bottom:25px;
    }
    
.gkTeam figcaption {
    height:200px;
    }
    
.gkTeam .last figcaption h2 {
    padding: 1em 3em !important;
    }
 }
 
 /********** MOBILE **********/
    @media only screen and (max-width: 580px) {
    
      /*** HEADER ***/
    
.gkHeaderBg {
        background-image: url('/templates/gk_john_s/images/hww-header-mob.jpg') !important;
        }

#gkHeader p {
    font-size:18px;
    top:5%;
    left:10%;
     }

    
.gkTeam figure {
    width:100% !important;
    padding:0 !important;
    margin-bottom:25px;
    }
    
.gkTeam figcaption {
    height:300px;
    }
    
/********** GK GRID **********/

div
    
#gk-grid-94 .gkGridElement h2 {
    line-height:1.15;
   }
   
#gk-grid-94 .gkGridElement h3 {
    line-height:1.5;
    font-size:12px;
   }
    
    
    
/********** Testimonials **********/

blockquote {
    font-size:14px;
    margin: 60px 10px 20px;
    padding:0 25px;
    }
    
blockquote:before {
    font-size: 24px;
    }
    
blockquote:after {
    font-size: 24px;
    top:10px;
    left:10px;
    }
    
.testies p {
    font-size:14px;
    }

}