John header - Background vs Text Header padding

Hello, I am trying to lower the text from the header by using the padding-top adjustments (which is probably not the best way).

Either way, each time I apply a modification, the background picture changes size, most often than not, "zooming in"!

That being said. I know that this template is responsive, but I need to lower my text and keep the background picture where it is.

Any clue?

This following setting (-35px) seems to put the header at full size, which is what I want. But yeah this is all relative; I am using a monitor resolution of 1440x990, but it seems to keep the background picture in full view for all device resolution.

My header size is the same as the demo size that came with the quick start up.

Any clues?

Regards

Hi, on mobile devices in a "portrait" orientation, the header text move to the middle of the header. Overlapping the persons portrait of the header ("john has the text on his face!").

Is there anyway to improve this responsive automation so the text would allign on left instead of middle?

Good job!
Regards

Hi

Please try with this code in css instead:

Code: Select all

.gk-header2 {
    padding: 265px 14% 335px;
}


Hi, this has no effect.

I am using header 1 (the one with the guy that has glasses).
Trying with the following made it worst.

Code: Select all

}
.gk-header1 {
    padding: 265px 14% 335px;
}

Here is my current code, the modifications are at line 1085-87-90-91

Code: Select all

/*
#------------------------------------------------------------------------
# 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: [email protected]
*/
 
/* Icons */
/* Just click to select the code */
 
@charset "UTF-8";
@font-face {
   font-family: "johns-icons";
   src: url("../fonts/johns-icons/johns-icons.eot");
   src: url("../fonts/johns-icons/johns-icons.eot?#iefix") format("embedded-opentype"), url("../fonts/johns-icons/johns-icons.ttf") format("truetype"), url("../fonts/johns-icons/johns-icons.svg#johns-icons") format("svg"), url("../fonts/johns-icons/johns-icons.woff") format("woff");
   font-weight: normal;
   font-style: normal;
}
[data-icon]:before {
   font-family: "johns-icons" !important;
   content: attr(data-icon);
   font-style: normal !important;
   font-weight: normal !important;
   font-variant: normal !important;
   text-transform: none !important;
   speak: none;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
[class^="gk-icon-"]:before,
[class*=" gk-icon-"]:before {
   font-family: "johns-icons" !important;
   font-style: normal !important;
   font-weight: normal !important;
   font-variant: normal !important;
   text-transform: none !important;
   speak: none;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
.gk-icon-arrow-bottom:before { content: "a"; }
.gk-icon-arrow-left:before { content: "b"; }
.gk-icon-arrow-right:before { content: "c"; }
.gk-icon-arrow-top:before { content: "d"; }
.gk-icon-flame:before { content: "e"; }
.gk-icon-heart:before { content: "f"; }
.gk-icon-mail:before { content: "g"; }
.gk-icon-pencil:before { content: "h"; }
.gk-icon-prize:before { content: "i"; }
.gk-icon-star:before { content: "j"; }
.gk-icon-cross:before { content: "k"; }
.gk-icon-plus:before { content: "l"; }

.big-title .header[data-scroll-reveal-complete="true"] .gk-icon-flame,
.big-title .header[data-scroll-reveal-complete="true"] .gk-icon-heart,
.big-title .header[data-scroll-reveal-complete="true"] .gk-icon-star {
   display: inline-block;
   -webkit-animation: iconscale 1.2s 1 linear;
   -moz-animation: iconscale 1.2s 1 linear;
   -o-animation: iconscale 1.2s 1 linear;
   animation: iconscale 1.2s 1 linear;
   -webkit-transform-origin: center 100%;
   -moz-transform-origin: center 100%;
   -ms-transform-origin: center 100%;
   -o-transform-origin: center 100%;
   transform-origin: center 100%;
}

.big-title .header[data-scroll-reveal-complete="true"] .gk-icon-heart,
.big-title .header[data-scroll-reveal-complete="true"] .gk-icon-star {
   -webkit-transform-origin: center center;
   -moz-transform-origin: center center;
   -ms-transform-origin: center center;
   -o-transform-origin: center center;
   transform-origin: center center;
}

.big-title .header .gk-icon-mail {
   display: inline-block;
   opacity: 0;
   position: relative;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -ms-transform: scale(0);
   -o-transform: scale(0);
   transform: scale(0);
   left: -60px;
   -webkit-transform-origin: center 100%;
   -moz-transform-origin: center 100%;
   -ms-transform-origin: center 100%;
   -o-transform-origin: center 100%;
   transform-origin: center 100%;   
   top: 80px;
   -webkit-transition: all .5s ease-out;
   -moz-transition: all .5s ease-out;
   -ms-transition: all .5s ease-out;
   -o-transition: all .5s ease-out;
   transition: all .5s ease-out;
   -webkit-transition-delay: .4s;
   -moz-transition-delay: .4s;
   -ms-transition-delay: .4s;
   -o-transition-delay: .4s;
   transition-delay: .4s;
}

.big-title .header[data-scroll-reveal-complete="true"] .gk-icon-mail {
   display: inline-block;
   opacity: 1;
   left: 0;
   top: 0;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
}

.big-title .header .gk-icon-pencil {
   display: inline-block;
   opacity: 0;
   position: relative;
   left: 80px;
   -webkit-transition: all .75s cubic-bezier(0,.54,.15,.98);
   -moz-transition: all .75s cubic-bezier(0,.54,.15,.98);
   -ms-transition: all .75s cubic-bezier(0,.54,.15,.98);
   -o-transition: all .75s cubic-bezier(0,.54,.15,.98);
   transition: all .75s cubic-bezier(0,.54,.15,.98);
   -webkit-transition-delay: .4s;
   -moz-transition-delay: .4s;
   -ms-transition-delay: .4s;
   -o-transition-delay: .4s;
   transition-delay: .4s;
}

.big-title .header[data-scroll-reveal-complete="true"] .gk-icon-pencil {
   display: inline-block;
   opacity: 1;
   left: 0;
}

.big-title .header .gk-icon-prize {
   display: inline-block;
   opacity: 0;
   -webkit-transform: rotateZ(-45deg);
   -moz-transform: rotateZ(-45deg);
   -ms-transform: rotateZ(-45deg);
   -o-transform: rotateZ(-45deg);
   transform: rotateZ(-45deg);
   -webkit-transform-origin: enter 100%;
   -moz-transform-origin: enter 100%;
   -ms-transform-origin: enter 100%;
   -o-transform-origin: enter 100%;
   transform-origin: enter 100%;
   -webkit-transition: all 1s cubic-bezier(0,1.52,.74,1.47);
   -moz-transition: all 1s cubic-bezier(0,1.52,.74,1.47);
   -ms-transition: all 1s cubic-bezier(0,1.52,.74,1.47);
   -o-transition: all 1s cubic-bezier(0,1.52,.74,1.47);
   transition: all 1s cubic-bezier(0,1.52,.74,1.47);
   -webkit-transition-delay: .4s;
   -moz-transition-delay: .4s;
   -ms-transition-delay: .4s;
   -o-transition-delay: .4s;
   transition-delay: .4s;
}

.big-title .header[data-scroll-reveal-complete="true"] .gk-icon-prize {
   display: inline-block;
   opacity: 1;
   -webkit-transform: rotateZ(0deg);
   -moz-transform: rotateZ(0deg);
   -ms-transform: rotateZ(0deg);
   -o-transform: rotateZ(0deg);
   transform: rotateZ(0deg);
}

@-webkit-keyframes iconscale {
   from, to { -webkit-transform: scale(1); }
   25% { -webkit-transform: scale(0.8); }
   50% { -webkit-transform: scale(0.95); }
   75% { -webkit-transform: scale(0.75); }
}

@-moz-keyframes iconscale {
   from, to { -moz-transform: scale(1); }
   25% { -moz-transform: scale(0.8); }
   50% { -moz-transform: scale(0.95); }
   75% { -moz-transform: scale(0.75); }
}

@keyframes iconscale {
   from, to {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
   }
   25% {
      -webkit-transform: scale(0.8);
      -moz-transform: scale(0.8);
      -ms-transform: scale(0.8);
      -o-transform: scale(0.8);
      transform: scale(0.8);
   }
   50% {
      -webkit-transform: scale(0.95);
      -moz-transform: scale(0.95);
      -ms-transform: scale(0.95);
      -o-transform: scale(0.95);
      transform: scale(0.95);
   }
   75% {
      -webkit-transform: scale(0.75);
      -moz-transform: scale(0.75);
      -ms-transform: scale(0.75);
      -o-transform: scale(0.75);
      transform: scale(0.75);
   }
}

/*
 * News Show Pro GK5
 */

.nspMain { position: relative; }
/* Pagination */
.nspBotInterface,
.nspTopInterface {
   clear: both;
   float: right;
   margin: 5px 0;
}
.nspTopInterface {
   position: absolute;
   right: 0;
   top: -40px;
}
.nspBotInterface .nspPagination { margin-top: 0; }
/*
   Interface - for different looking Top and Bottom interface use the following classes: 
   .nspTopInterface
   .nspBotInterface (e.g.: .nspTopInterface .nspPagination li ...)
*/
.nspPagination {
   float: left;
   list-style-type: none!important;
   margin: 3px 0 0 0!important;
   padding: 0!important;
}
.nspPagination li {
   background: #bbb;
   border: none!important;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   cursor: pointer;
   display: block;
   float: left;
   height: 8px;
   margin: 4px 4px 0 0!important;
   padding: 0;
   text-indent: -999em;
   width: 8px;
}
.nspPagination li:hover,
.nspPagination li.active { background-color: #1dbaf4; }
.nspNext,
.nspPrev {
   cursor: pointer;
   float: left;
   height: 16px;
   margin: 0 2px;
   text-indent: -9999px;
   width: 10px;
}
.nspNext:after,
.nspPrev:after {
   color: #000;
   display: block;
   float: left;
   font-family: FontAwesome;
   font-size: 22px;
   line-height: 22px;
   text-indent: 0;
}
.nspNext:after {
   color: #bbb;
   content: '\f105';
}
.nspPrev:after {
   color: #bbb;
   content: '\f104';
}
.nspNext:hover:after,
.nspPrev:hover:after { color: #1dbaf4; }
/* Articles layout */
.nspArts {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   overflow: hidden;
   padding: 0;
}
.nspArtPage { float: left; }
.nspArt {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   
   float: left;
}
.nspArt div { overflow: hidden; }
.nspArt h4.nspHeader {
   color: #292B31;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
    padding: 0 0 12px;
}
.nspArt h4.nspHeader a { color: #292b31; }
.nspArt h4.nspHeader a:hover { color: #1dbaf4; }
.nspArt img.nspImage {
   border: none;
   display: block;
}
.nspArt .nspImageWrapper {
   display: block;
   overflow: hidden;
}
.nspArt .nspImageWrapper img {
   -webkit-transition: all .18s linear;
   -moz-transition: all .18s linear;
   -ms-transition: all .18s linear;
   -o-transition: all .18s linear;
   transition: all .18s linear;
}
.nspArt .nspImageWrapper:hover img {
   -webkit-transform: scale(1.1);
   -moz-transform: scale(1.1);
   -ms-transform: scale(1.1);
   -o-transform: scale(1.1);
   transform: scale(1.1);
}
.nspArt p.nspText {
   display: block!important;
   font-size: 15px;
   line-height: 1.6;
   margin: 0;
   padding: 0!important;
}
.nspArt p.nspInfo {
   color: #aaa;
   display: block!important;
   font-size: 13px;
   margin: 5px 0;
   padding: 5px 0;
}
.nspArt p.nspInfo > * { padding-left: 10px; }
.nspArt p.nspInfo > *:first-child { padding-left: 0; }
.nspArt p.nspInfo img { vertical-align: middle; }
.nspArt .tleft { text-align: left; }
.nspArt .tright { text-align: right; }
.nspArt .tcenter { text-align: center; }
.nspArt .tjustify { text-align: justify; }
.nspArt .fleft { float: left; }
.nspArt .fright { float: right; }
.nspArt .fnone {
   clear: both;
   float: none;
   width: 100%;
}
.readon.left,
.readon.right,
.readon.center { clear: both; }
.readon.left { float: left; }
.readon.right { float: right; }
.readon.center {
   display: inline;
   float: none;
}
.nspAvatar { }
/* Links layout */
.nspLinks {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 3px;
}
.nspList { float: left; }
.nspLinks ul {
   list-style-type: none!important;
   padding: 0!important;
}
.nspLinks .nspLinkScroll1 ul li {
   
   margin: 0!important;
   padding: 10px 0;
}
.nspLinks ul li h4 {
   font-size: 18px;
   font-weight: 400;
   margin-bottom: 4px;
}
.nspLinks ul li h4 a { text-decoration: none; }
.nspLinks ul li p {
   font-size: 14px;
   margin: 0;
}
/* positioning */
.nspArts.left { float: right; }
.nspLinksWrap.left { float: left; }
.nspArts.right { float: left; }
.nspLinksWrap.right { float: right; }
/* make element unvisible */
.nspMain .unvisible {
   left: -9999px;
   position: absolute;
   top: auto;
}
/* Responsive layout */
.gkResponsive img.nspImage,
img.nspImage.gkResponsive {
   height: auto;
   width: 100%!important;
}
.nspArt img.nspImage {
   height: auto!important;
   max-width: 100%;
}
.nspArtScroll1,
.nspLinkScroll1 {
   overflow: hidden;
   width: 100%;
}
.nspPages1 { width: 100%; }
.nspPages2 { width: 200%; }
.nspPages3 { width: 300%; }
.nspPages4 { width: 400%; }
.nspPages5 { width: 500%; }
.nspPages6 { width: 600%; }
.nspPages7 { width: 700%; }
.nspPages8 { width: 800%; }
.nspPages9 { width: 900%; }
.nspPages10 { width: 1000%; }
.nspCol1 { width: 100%; }
.nspCol2 { width: 50%; }
.nspCol3 { width: 33.3%; }
.nspCol4 { width: 25%; }
.nspCol5 { width: 20%; }
.nspCol6 { width: 16.66%; }
.nspCol7 { width: 14.285%; }
.nspCol8 { width: 12.5%; }
.nspCol9 { width: 11.1%; }
.nspCol10 { width: 10%; }
.nspCol11 { width: 9.09%; }
.nspCol12 { width: 8.33%; }
.nspCol13 { width: 7.69%; }
.nspCol14 { width: 7.14%; }
.nspCol15 { width: 6.66%; }
.nspCol16 { width: 6.25%; }
.nspCol17 { width: 5.88%; }
.nspCol18 { width: 5.55%; }
.nspCol19 { width: 5.26%; }
.nspCol20 { width: 5%; }
/* Animation */
.nspList,
.nspArtPage {
   opacity: 0;
   -webkit-transition: opacity 0.5s ease-out;
   -moz-transition: opacity 0.5s ease-out;
   -ms-transition: opacity 0.5s ease-out;
   -o-transition: opacity 0.5s ease-out;
   transition: opacity 0.5s ease-out;
}
.nspList.active,
.nspArtPage.active { opacity: 1; }
/* Suffix big-nav */
.big-nav { padding: 25px 0 0 0; }
.big-nav .nspArts {
   overflow: visible;
   position: relative;
}
.big-nav .nspTopInterface { position: static; }
.big-nav .nspNext {
   position: absolute;
   right: -25px;
   top: 45%;
}
.big-nav .nspPrev {
   position: absolute;
   left: -50px;
   top: 45%;
}
.big-nav .nspNext:after {
   color: #fff;
   content: 'c';
   font-family: "johns-icons";
   font-size: 32px;
}
.big-nav .nspPrev:after {
   color: #fff;
   content: 'b';
   font-family: "johns-icons";
   font-size: 32px;
}
.big-nav .nspImageWrapper + .nspHeader {
   padding-top: 38px;
   position: relative;
}
.big-nav .nspImageWrapper + .nspHeader:before {
   color: #fff;
   content: "-";
   position: absolute;
   top: 12px;
}
.big-nav .nspHeader { font-size: 15px!important; }
/* Suffix dark */
.box.dark a.readon {
   border: 1px solid #fff;
   color: #fff;
}
.box.dark a.readon:hover {
   border-color: #1dbaf4;
   color: #1dbaf4;
}
/* Suffix color and color-bg */
.box.color .nspArt p.nspInfo,
.box.color-bg .nspArt p.nspInfo { color: #fff; }
.box.color .nspArt .readon,
.box.color-bg .nspArt .readon {
   border: 1px solid #fff;
   color: #fff;
}
.box.color .nspArt .readon:hover,
.box.color-bg .nspArt .readon:hover {
   border-color: 1px solid rgba(255, 255, 255, 0.75);
   color: rgba(255, 255, 255, 0.75);
}
.box.color .nspPagination li,
.box.color-bg .nspPagination li { background: rgba(255, 255, 255, 0.75); }
.box.color .nspPagination li:hover,
.box.color .nspPagination li.active,
.box.color-bg .nspPagination li:hover,
.box.color-bg .nspPagination li.active { background-color: #fff; }
.box.color .nspNext:after,
.box.color .nspPrev:after,
.box.color-bg .nspNext:after,
.box.color-bg .nspPrev:after { color: rgba(255, 255, 255, 0.75); }
.box.color .nspNext:hover:after,
.box.color .nspPrev:hover:after,
.box.color-bg .nspNext:hover:after,
.box.color-bg .nspPrev:hover:after { color: #fff; }

/*
 Portal Mode - Portfolio2
*/

.gkNspPM-Portfolio2 {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   overflow: hidden;
   padding: 0;
   position: relative;
   width: 100%;
}

.gkNspPM-Portfolio2 .gkImagesWrapper {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   margin: 0 -1%;
   overflow: hidden;
   -moz-transform: translate3d(0, 0, 0);
   padding: 45px;
   width: 100%;
}

.gkNspPM-Portfolio2 .gkImagesWrapper:after {
   clear: both;
   content: "";
   display: table;
}

.gkNspPM-Portfolio2[data-cols="1"] .gkImagesWrapper a { width: 100%; }
.gkNspPM-Portfolio2[data-cols="2"] .gkImagesWrapper a { width: 50%; }
.gkNspPM-Portfolio2[data-cols="3"] .gkImagesWrapper a { width: 33.333333%; }
.gkNspPM-Portfolio2[data-cols="4"] .gkImagesWrapper a { width: 25%; }
.gkNspPM-Portfolio2[data-cols="5"] .gkImagesWrapper a { width: 20%; }

.gkNspPM-Portfolio2 .gkImagesWrapper > a {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   cursor: -webkit-zoom-in;
   cursor: -moz-zoom-in;
   cursor: zoom-in;
   display: block;
   float: left;
   opacity: 0.25;
   padding: 15px;
   position: relative;
   -webkit-transform: scale(0.75);
   -moz-transform: scale(0.75);
   -ms-transform: scale(0.75);
   -o-transform: scale(0.75);
   transform: scale(0.75);
   -webkit-transition: -webkit-transform .3s cubic-bezier(.71,.23,.25,1.48);
   -moz-transition: -moz-transform .3s cubic-bezier(.71,.23,.25,1.48);
   -ms-transition: -ms-transform .3s cubic-bezier(.71,.23,.25,1.48);
   -o-transition: -o-transform .3s cubic-bezier(.71,.23,.25,1.48);
   transition: transform .3s cubic-bezier(.71,.23,.25,1.48);
}

.gkNspPM-Portfolio2 .gkImagesWrapper > a img {
   display: block;
}

.gkNspPM-Portfolio2 .gkImagesWrapper > a.active {
   opacity: 1;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
}

.gkNspPM-Portfolio2 .gkImagesWrapper > a:after {
   background: rgba(0, 0, 0, 0.5);
   background-clip: content-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   content: "";
   height: 100%;
   left: 0;
   opacity: 0;
   padding: 15px;
   position: absolute;
   top: 0;
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
   width: 100%;
   z-index: 1;
}

.gkNspPM-Portfolio2 .gkImagesWrapper > a:before {
   color: #fff;
   content: "l";   
   font-family: johns-icons;
   font-size: 42px;
   height: 42px;
   left: 50%;
   line-height: 42px;
   margin: -21px 0 0 -21px;
   opacity: 0;
   position: absolute;
   text-align: center;
   top: 60%;
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
   width: 42px;
   z-index: 2;
}
.gkNspPM-Portfolio2 .gkImagesWrapper > a:hover:after {
   opacity: 1;
}
.gkNspPM-Portfolio2 .gkImagesWrapper > a:hover:before {
   opacity: 1;
   top: 50%;
}

.gkNspPM-Portfolio2 .gkPortfolioCategories {
   margin: 0;
   padding: 0;
}

.gkNspPM-Portfolio2 .gkPortfolioCategories li {
   border: none;
   color: #3a3636;
   cursor: pointer;
   float: left;
   font-size: 13px;
   height: 24px;
   line-height: 25px;
   margin: 0 4px 0 0;
   padding: 0 6px;
   text-transform: uppercase;
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
}

.gkNspPM-Portfolio2 .gkPortfolioCategories li.active,
.gkNspPM-Portfolio2 .gkPortfolioCategories li.active:hover {
   background: #3a3636;
   border-radius: 2px;
   color: #fff;
}

.gkNspPM-Portfolio2 .gkPortfolioCategories li:hover {
   background: #aaa;
   border-radius: 2px;
   color: #fff;
}

/* Popup */
.gkNspPM-Portfolio2 .gkPortfolioPopup {
   background: #f1f0f0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   display: none;
   height: 100%;
   opacity: 0;
   padding: 20px;
   position: absolute;
   top: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -ms-transform: scale(0);
   -o-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all .25s ease-out;
   -moz-transition: all .25s ease-out;
   -ms-transition: all .25s ease-out;
   -o-transition: all .25s ease-out;
   transition: all .25s ease-out;
   width: 100%;
   z-index: 5;
}

.gkNspPM-Portfolio2 .gkPortfolioPopup.activated {
   display: block;
}

.gkNspPM-Portfolio2 .gkPortfolioPopup.active {
   opacity: 1;
   top: 50px;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
}

.gkNspPM-Portfolio2 .gkPortfolioPopup img {
   display: block;
   max-width: 100%;
}

.gkNspPM-Portfolio2 .gkPortfolioPopup > div {
   clear: both;
}

.gkNspPM-Portfolio2 .gkPortfolioImage {
   background: url('../images/loader.gif') no-repeat center center;
   float: left;
   width: 66%;
}

.gkNspPM-Portfolio2 .gkPortfolioDesc {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   float: left;
   padding-left: 32px;
   width: 33%;
}

.gkNspPM-Portfolio2 .gkPortfolioPopup img {
   opacity: 0;
   -webkit-transform: scale(0.3);
   -moz-transform: scale(0.3);
   -ms-transform: scale(0.3);
   -o-transform: scale(0.3);
   transform: scale(0.3);
   -webkit-transition: all .25s ease-out;
   -moz-transition: all .25s ease-out;
   -ms-transition: all .25s ease-out;
   -o-transition: all .25s ease-out;
   transition: all .25s ease-out;
   width: 100%;
}

.gkNspPM-Portfolio2 .gkPortfolioImage.active img {
   opacity: 1;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
}

.gkNspPM-Portfolio2 .gkPortfolioPrev,
.gkNspPM-Portfolio2 .gkPortfolioNext,
.gkNspPM-Portfolio2 .gkPortfolioClose {
   color: #f1c40f;
   display: block;
   float: left;
   font-size: 32px;
   height: 32px;
   line-height: 32px;
   margin: 0 0 32px 0;
   overflow: hidden;
   width: 32px;
}

.gkNspPM-Portfolio2 .gkPortfolioPrev:hover,
.gkNspPM-Portfolio2 .gkPortfolioNext:hover,
.gkNspPM-Portfolio2 .gkPortfolioClose:hover,
.gkNspPM-Portfolio2 .gkPortfolioPrev:hover:before,
.gkNspPM-Portfolio2 .gkPortfolioNext:hover:before,
.gkNspPM-Portfolio2 .gkPortfolioClose:hover:before {
   color: #333;
}

.gkNspPM-Portfolio2 .gkPortfolioPrev:before,
.gkNspPM-Portfolio2 .gkPortfolioNext:before,
.gkNspPM-Portfolio2 .gkPortfolioClose:before {
   color: #f1c40f;
   content: "k";
   font-family: johns-icons;
   font-size: 32px;
   line-height: 32px;
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
}

.gkNspPM-Portfolio2 .gkPortfolioPrev:before {
   content: "b";   
   width: 32px;
}

.gkNspPM-Portfolio2 .gkPortfolioNext:before {
   content: "c";
   width: 32px;
}

.gkNspPM-Portfolio2 .gkPortfolioPrev {
   margin-right: 10px;
}

.gkNspPM-Portfolio2 .gkPortfolioClose {
   float: right;
}

.gkNspPM-Portfolio2 .gkPortfolioTitle,
.gkNspPM-Portfolio2 .gkPortfolioCategory,
.gkNspPM-Portfolio2 .gkPortfolioAuthor,
.gkNspPM-Portfolio2 .gkPortfolioDate {
   display: block;
   margin: 0;
   opacity: 0;
   top: 50px;
   position: relative;
   -webkit-transition: all .25s ease-out;
   -moz-transition: all .25s ease-out;
   -ms-transition: all .25s ease-out;
   -o-transition: all .25s ease-out;
   transition: all .25s ease-out;
}

.gkNspPM-Portfolio2 .gkPortfolioTitle {
   font-size: 24px;
   margin-bottom: 32px;
}

.gkNspPM-Portfolio2 .gkPortfolioCategory,
.gkNspPM-Portfolio2 .gkPortfolioAuthor,
.gkNspPM-Portfolio2 .gkPortfolioDate {
   border-top: 1px solid #ddd;
   font-size: 15px;
   padding: 16px 0;
}

.gkNspPM-Portfolio2 .gkPortfolioCategory span,
.gkNspPM-Portfolio2 .gkPortfolioAuthor span,
.gkNspPM-Portfolio2 .gkPortfolioDate span {
   color: #aaa;
   display: block;
   font-size: 12px;
   line-height: 1;
   margin: 0 0 3px 0;
}

.gkNspPM-Portfolio2 .gkPortfolioTitle.active,
.gkNspPM-Portfolio2 .gkPortfolioCategory.active,
.gkNspPM-Portfolio2 .gkPortfolioAuthor.active,
.gkNspPM-Portfolio2 .gkPortfolioDate.active {
   opacity: 1;
   top: 0;
}

/*
 * Tabs GK5 Module
 */
.gkTabsGK5 {
   position: relative;
   overflow: hidden;
}
.gkTabsWrap ol li {
   background: #fff;
   border: none;
   border-radius: 2px;
   color: #383838;
   cursor: pointer;
   float: left;
   font-size: 13px;
   font-weight: 400;
   height: 28px;
   line-height: 28px;
   list-style-type: none;
   margin-right: 5px;
   padding: 0 6px!important;
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
   text-transform: uppercase
}
.gkTabsWrap ol li.active,
.gkTabsWrap ol li.active:hover,
.gkTabsWrap ol li:hover {
   background: #1DBAF4;
   color: #fff;
}
.gkTabsContainer {
   clear: both;
   overflow: hidden;
   position: relative;
}
.gkTabsItem {
   background: transparent;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   -o-box-sizing: border-box;
   box-sizing: border-box;
   left: -9999px;
   padding: 0 0 10px 0;
   position: absolute;
   top: 0;
   width: 100%;
   z-index: 1;
}
.gkTabsItem.active {
   left: 0;
   position: relative;
   z-index: 2;
}
.gkTabsNav {
   background: transparent;
   margin: 0 0 20px;
}
.gkTabsNav:after {
   clear: both;
   content: "";
   display: table;
}
.gkTabsButtonNext,
.gkTabsButtonPrev { display: none; }
.gkTabsGK5 .nspArt { border-bottom: 1px solid rgba(0, 0, 0, 0.075) }

/* Header common parts */
.gkHeaderBg {
   background-size: cover;
   height: 100%;
   left: 0;
   opacity: 0;
   position: absolute;
   -webkit-transition: opacity .75s ease-out;
   -moz-transition: opacity .75s ease-out;
   -ms-transition: opacity .75s ease-out;
   -o-transition: opacity .75s ease-out;
   transition: opacity .75s ease-out;
   top: 0;
   width: 100%;
}
.gkHeaderBg.active {
   opacity: 1;
}
.gkScrollDown {
   bottom: 60px;
   color: #c9c9c9;
   font-size: 15px;
   left: 50%;
   margin: 0 0 0 -50px;
   position: absolute;
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
   width: 100px;
   z-index: 1;
}
.gkScrollDown:active,
.gkScrollDown:focus,
.gkScrollDown:hover {
   bottom: 66px;
   color: #fff;
}
.gkScrollDown:after {
   color: #c9c9c9;
   content: "a";
   font-family: "johns-icons";
   font-size: 32px;
   left: 50%;
   margin: 0 0 0 -24px;
   position: absolute;
   top: 18px;
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
}
.gkScrollDown:active:after,
.gkScrollDown:focus:after,
.gkScrollDown:hover:after {
   color: #fff;
   top: 30px;
}
.gkAnimate {
   opacity: 0;
   -webkit-transform: translateY(50px);
   -moz-transform: translateY(50px);
   -ms-transform: translateY(50px);
   -o-transform: translateY(50px);
   transform: translateY(50px);
   -webkit-transition: all 1s cubic-bezier(.17,.67,.35,1);
   -moz-transition: all 1s cubic-bezier(.17,.67,.35,1);
   -ms-transition: all 1s cubic-bezier(.17,.67,.35,1);
   -o-transition: all 1s cubic-bezier(.17,.67,.35,1);
   transition: all 1s cubic-bezier(.17,.67,.35,1);
}
.gkAnimate.reverse {
   -webkit-transform: translateY(-30px);
   -moz-transform: translateY(-30px);
   -ms-transform: translateY(-30px);
   -o-transform: translateY(-30px);
   transform: translateY(-30px);
}
.gkAnimate.active {
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -ms-transform: translateY(0px);
   -o-transform: translateY(0px);
   transform: translateY(0px);
}

/* Header I */
.gk-header1 {
   background-repeat: no-repeat;
   background-size: cover;
   overflow: hidden;
   padding: 230px 14% 200px 14%;
}

.gk-header1 h1 {
   color: #c9c9c9;
   font-size: 82px;
   font-weight: bold;
   letter-spacing: -5px;
   line-height: 0.95;
   margin: 0 0 -35px 0;
   position: relative;
   text-transform: uppercase;
   z-index: 1;
}
.gk-header1 p {
   color: #c9c9c9;
   font-size: 18px;
   line-height: 1.8;
   margin: 0;
   max-width: 400px;
   position: relative;
   z-index: 1;



/* Header II */
.gk-header2 {
   background-repeat: no-repeat;
   background-size: cover;
   overflow: hidden;
   padding: 300px 14%;
}
.gk-header2 h1 {
   color: #fff;
   font-size: 72px;
   font-weight: bold;
   letter-spacing: -5px;
   line-height: 0.85;
   margin: 0 0 55px 0;
   position: relative;
   text-shadow: 0 0 2px #000;
   text-transform: uppercase;
   z-index: 1;
}
.gk-header2 p {
   color: #fff;
   display: inline-block;
   font-size: 18px;
   line-height: 1.2;
   margin: 0;
   position: relative;
   z-index: 1;
}
.gk-header2 p span {
   background: #222020;
   clear: both;
   display: block;
   float: left;
   margin: 1px 0;
   padding: 1px;
}

.gk-header2 .gkScrollDown,
.gk-header2 .gkScrollDown:after {
   color: #222;
}

/* Header III */
.gk-header3 {
   background-repeat: no-repeat;
   background-size: cover;
   overflow: hidden;
   padding: 230px 14%;
   text-align: center;
}
.gk-header3 img.gkAnimate {
   margin-bottom: 50px;
   position: relative;
   z-index: 1;
}
.gk-header3 p {
   clear: both;
   color: #c9c9c9;
   display: block;
   font-size: 18px;
   line-height: 1.8;
   margin: 0;
   position: relative;
   z-index: 1;
}
.gk-header3 p span {
   clear: both;
   display: block;
   text-align: center;
}

/*
   Frontpage blocks
*/

/* Map */
.gkMap {
   background: #f1f0f0 url('../images/loader.gif') no-repeat center center;
   bottom: 0;
   height: 100%;
   left: 0;
   opacity: 0.65;
   position: absolute;
   -webkit-transition: all .6s ease-out;
   -moz-transition: all .6s ease-out;
   -ms-transition: all .6s ease-out;
   -o-transition: all .6s ease-out;
   transition: all .6s ease-out;
   width: 100%;
   z-index: 0;
}
.gkMap.beforeload {
   opacity: 0;
}
.gkMap.active {
   bottom: 0;
   height: auto;
   left: 0;
   opacity: 0.65;
   position: absolute;
   width: 100%;
   z-index: 0;
}
/* GK Contact Plugin */
.gkContactForm {
   background: #fff;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   float: right;
   padding: 20px;
   position: relative;
   width: 320px;
   z-index: 1;
}
.gkContactForm address {
   color: #3a3636;
   font-size: 18px;
   font-style: normal;
   font-weight: 500;
   line-height: 1.4;
}
.gkContactFooter {
   color: #3a3636;
   font-size: 13px;
   line-height: 1.2;
   margin: 16px 0 12px 0!important;
}
.gkContactForm form p {
   margin: 0 0 18px 0;
   overflow: hidden;
}
.gkContactForm input,
.gkContactForm textarea {
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   box-shadow: none;
   border: 1px solid #c6d0d2;
   height: 42px;
   padding: 0 12px;
   width: 100%;
}
.gkContactForm textarea {
   height: 140px;
   padding: 12px;
}
.gkContactForm input[type="submit"] {
   background: #333131;
   border: none;
   color: #fff;
   margin: 0;
}
.gkContactForm input[type="submit"]:active,
.gkContactForm input[type="submit"]:focus,
.gkContactForm input[type="submit"]:hover {
   background: #1dbaf4;
   color: #fff!important;
}
.gkContactSocialIcons {
   margin: 0;
   padding: 20px 0;
   text-align: center;
}
.gkContactSocialIcons a {
   border: 1px solid #ddd;
   border-radius: 50%;
   display: inline-block;
   font-size: 16px;
   height: 28px;
   line-height: 29px;
   margin: 0 5px;
   text-align: center;
   width: 28px;
}
.gkContactSocialIcons a i {
   padding-left: 1px;
   padding-right: 0;
}
.gkContactSocialIcons a:hover {
   background: #333131;
   border: 1px solid #333131;
}
.gkContactSocialIcons a:hover i { color: #fff; }

/* reCAPTCHA adjustments */
.gkContactForm .recaptchatable {
   border: none!important;
}
.gkContactForm .recaptchatable .recaptcha_image_cell center img {
   height: auto;
   padding: 8px 0 0 0;
   width: 216px;
}
.gkContactForm .recaptchatable #recaptcha_image {
   border: none!important;
   width: 200px!important;
}
.gkContactForm .recaptchatable #recaptcha_response_field {
   width: 200px!important;
}
.gkContactForm .recaptchatable td {
   padding: 0!important;
}
.gkContactForm .recaptcha_image_cell {
   width: 200px;
}

/* Clients */
.gkClients {
   margin: 20px -2%!important;
   overflow: hidden;
}
.gkClients li {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   float: left;
   list-style-type: none;
   margin: 0 2%;
   padding: 12px 0;
   position: relative;
   top: -1px;
   width: 21%;
}
.gkClients li:before { display: none; }
.gkClients li.double { width: 46%; }
.gkClients li.double .header {
   position: relative;
   top: -12px;
}
.gkClients li a {
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
}
.gkClients li a:active,
.gkClients li a:focus,
.gkClients li a:hover {
   opacity: 0.65;
}

/* Awards */
.gkColumnLeft,
.gkColumnRight { padding: 70px 0; }
.gkColumnLeft {
   float: left;
   width: 40%;
}
.gkColumnLeft p {
   color: #636363;
   font-size: 18px;
   line-height: 1.6;
   margin-top: 48px;
}
.gkColumnRight {
   float: right;
   width: 55%;
}
.gkColumnRight figure {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   float: left;
   padding: 2%;
   text-align: center;
   width: 46%;
}
.gkColumnRight figure h4 {
   color: #c9c9c9;
   font-size: 18px;
   margin: 32px 0 10px 0;
   text-transform: uppercase;
}
.gkColumnRight figure p {
   color: #c9c9c9;
   font-size: 13px;
   margin: 20px 0;
}
/* Columns in the content */
.gkCols {
   margin: 0 -45px;
   width: auto;
}
.gkCols.testimonials { margin: 0 -12px; }
.gkCols:after {
   clear: both;
   content: "";
   display: table;
}
.gkCols.margin-top,
.gkCols.testimonials { margin-top: 100px!important; }
.gkCols > div,
.gkCols > blockquote {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   float: left;
   padding: 0 45px;
}
.gkCols[data-cols="4"],
.gkCols[data-cols="5"] { margin: 0 -15px; }
.gkCols[data-cols="2"] > div,
.gkCols[data-cols="2"] > blockquote { width: 50%; }
.gkCols[data-cols="3"] > div,
.gkCols[data-cols="3"] > blockquote { width: 33.333333%; }
.gkCols[data-cols="4"] > div,
.gkCols[data-cols="4"] > blockquote {
   padding: 0 15px;
   width: 25%;
}
.gkCols[data-cols="5"] > div,
.gkCols[data-cols="5"] > blockquote {
   padding: 0 15px;
   width: 20%;
}
.gkCols h4 {
   font-size: 18px;
   font-weight: 400;
   margin-bottom: 24px;
}
.gkCols p { font-size: 14px; }
.gkCols + .button {
   background: #1dbaf4;
   margin-top: 50px;
}
.gkCols + .button:hover { background: #333; }

/* Team */
.gkTeam {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   margin: 0 40px;
   overflow: hidden;
   position: relative;
   top: -35px;
   z-index: 1;
}
.gkTeam > div {
   -webkit-transition: all .5s ease-out;
   -moz-transition: all .5s ease-out;
   -ms-transition: all .5s ease-out;
   -o-transition: all .5s ease-out;
   transition: all .5s ease-out;
}
.gkTeam > div > div {
   opacity: 0;
   float: left;
   -webkit-transition: all .5s ease-out;
   -moz-transition: all .5s ease-out;
   -ms-transition: all .5s ease-out;
   -o-transition: all .5s ease-out;
   transition: all .5s ease-out;
}
.gkTeam > div > div.active {
   opacity: 1;
}
.gkTeam[data-pages="1"] > div { width: 100%; }
.gkTeam[data-pages="2"] > div { width: 200%; }
.gkTeam[data-pages="3"] > div { width: 300%; }
.gkTeam[data-pages="4"] > div { width: 400%; }
.gkTeam[data-pages="5"] > div { width: 500%; }
.gkTeam[data-pages="1"] > div > div { width: 100%; }
.gkTeam[data-pages="2"] > div > div { width: 50%; }
.gkTeam[data-pages="3"] > div > div { width: 33.333333%; }
.gkTeam[data-pages="4"] > div > div { width: 25%; }
.gkTeam[data-pages="5"] > div > div { width: 20%; }
.gkTeam[data-cols="1"] figure { width: 100%; }
.gkTeam[data-cols="2"] figure { width: 50%; }
.gkTeam[data-cols="3"] figure { width: 33.333333%; }
.gkTeam[data-cols="4"] figure { width: 25%; }
.gkTeam figure {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   float: left;
   padding: 0 21px;
   position: relative;
   text-align: center;
}
.gkTeam figure img {
   display: block;
}
.gkTeam figure span {
   display: inline-block;
   position: relative;
}
.gkTeam h3 {
   color: #3a3636;
   font-size: 18px;
   font-weight: bold;
   margin: 40px 0 10px 0;
   position: relative;
   text-align: center;
   text-transform: uppercase;
}
.gkTeam h3:before {
   content: "-";
   font-size: 14px;
   font-weight: normal;
   left: 0;
   position: absolute;
   text-align: center;
   top: -24px;
   width: 100%;
}
.gkTeam small {
   color: #3a3636;
   display: block;
   font-size: 13px;
   text-align: center;
}

/* Team pagination */
.gkTeamPrev {
   left: -50px;
   position: absolute;
   top: 50%;
}
.gkTeamNext {
   position: absolute;
   right: -50px;
   top: 50%;
}
.gkTeamPrev,
.gkTeamNext {
   color: #333;
   font-size: 32px;
   line-height: 32px;
   margin-top: -100px;
}
.gkTeamPrev i,
.gkTeamNext i {
   font-size: 32px;
   line-height: 32px;
}
.gkTeamPrev:hover,
.gkTeamNext:hover {
   color: #1dbaf4;
}

/* Team overlays */

.gkTeamOverlay {
   background: #1dbaf4;
   height: 100%;
   left: 0;
   opacity: 0; filter: alpha(opacity=0);
   position: absolute;
   top: 0;
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
   width: 100%;
   z-index: 1;
}

figure.hover .gkTeamOverlay {
   opacity: 1; filter: alpha(opacity=100);
}

.gkTeamOverlay > a {
   border: 2px solid #fff;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   display: block;
   height: 50px;
   left: 50%;
   margin-left: -25px;
   opacity: 0; filter: alpha(opacity=0);
   overflow: hidden;
   position: absolute;
   text-indent: -9999px;
   top: 64%;
   -webkit-transition: all .2s ease-out;
   -moz-transition: all .2s ease-out;
   -ms-transition: all .2s ease-out;
   -o-transition: all .2s ease-out;
   transition: all .2s ease-out;
   width: 50px;
}

.gkTeamOverlay a.active {
   opacity: 1.0; filter: alpha(opacity=100);
   top: 50%;
}

.gkTeamOverlay a:hover {
   background: #f1c40f;
}

/* Icons amount */
.gkTeamOverlay.gkIcons1 a {
   margin-top: -25px;
}

.gkTeamOverlay.gkIcons2 a {
   margin-top: -57px;   
}

.gkTeamOverlay.gkIcons2 a + a {
   margin-top: 3px;
}

.gkTeamOverlay.gkIcons3 a {
   margin-top: -87px!important;   
}

.gkTeamOverlay.gkIcons3 a + a {
   margin-top: -25px!important;
}

.gkTeamOverlay.gkIcons3 a + a + a {
   margin-top: 36px!important;
}

.gkTeamOverlay > a:before {
   color: #fff;
   display: block;
   font-family: FontAwesome;
   font-size: 28px;
   height: 50px;
   line-height: 50px;
   text-align: center;
   text-indent: 0!important;
   width: 50px;
}

.gkTeamOverlay a[data-type="fb"]:before {
   content: '\f09A';
}

.gkTeamOverlay a[data-type="twitter"]:before {
   content: '\f099';
}

.gkTeamOverlay a[data-type="gplus"]:before {
   content: '\f0d5';
}

/*
 * Price table
 */

.gkPriceTable { padding: 60px 0 48px 0; }
.gkPriceTable::after {
   clear: both;
   content: "";
   display: table;
}
.gkPriceTable.col1 dl { width: 100%; }
.gkPriceTable.col2 dl {
   float: left;
   width: 50%;
}
.gkPriceTable.col3 dl {
   float: left;
   width: 33.3%;
}
.gkPriceTable.col4 dl {
   float: left;
   width: 25%;
}
.gkPriceTable.col5 dl {
   float: left;
   width: 20%;
}
.gkPriceTable dl {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   border: 1px solid #e5e5e5;
   margin-left: -1px;
   padding: 20px 32px;
   position: relative;
   z-index: 1
}
.gkPriceTable dl.gkPremium {
   background: #f5f5f5;
   margin: 0 0 0 -1px;
   padding: 32px;
   z-index: 2
}

.gkPriceTable dt {
   border-bottom: 1px solid #e5e5e5;
   color: #000;
   font-size: 22px;
   font-weight: 400;
   line-height: 65px;
   margin-top: -20px;
   text-align: center;
}
.gkPriceTable dd {
   font-weight: 36px;
   padding: 6px 0;
   text-align: center;
}
.gkPriceTable dd a {
   margin: 23px 0 15px;
}
.gkPriceTable dd a:hover { background: #292b31 }
.gkPriceTable dd.gkPrice {
   color: #555;
   font-size: 60px;
   
}
.gkPriceTable dd.gkPrice small {
   color: #999;
   font-size: 16px;
   font-weight: 300;
}
.gkPriceTable { padding: 60px 0 90px; }
#gkMobileMenu > label { display: none; }

.gkNspPM-Portfolio2 .gkPortfolioDescText {
   display: block;
   margin: 0;
   opacity: 0;
   top: 50px;
   position: relative;
   -webkit-transition: all .25s ease-out;
   -moz-transition: all .25s ease-out;
   -ms-transition: all .25s ease-out;
   -o-transition: all .25s ease-out;
   transition: all .25s ease-out;
}
.gkNspPM-Portfolio2 .gkPortfolioDescText {
   border-top: 1px solid #ddd;
   font-size: 15px;
   padding: 16px 0;
}
.gkNspPM-Portfolio2 .gkPortfolioDescText span {
   color: #aaa;
   display: block;
   font-size: 12px;
   line-height: 1;
   margin: 0 0 3px 0;
}
.gkNspPM-Portfolio2 .gkPortfolioDescText.active {
   opacity: 1;
   top: 0;
}



I could start fresh from the original css if that is easier for you.

Thanks

Hi

I cannot access Your site, but I've checked with header1 and code works great:

Code: Select all

.gk-header1 {
    padding: 130px 14% 300px;
}


OK I got it all sorted out! I didn't know there was several CSS files depending on the size of the browser.

I got one more question with regards to the loading of the header. During loading there is a first gradiant on black background that comes up AND THEN the actual header comes up.

My header is rather blue now and I would like to change that "first loading gradient on black" background image.

Where is the file located?
It is not /images/demo/header/header1.jpg. (This is the end result AFTER the loading.).

Thank you.
Regards

Hi

I'm not sure, but please try change this code to a different color:

Code: Select all

#gkHeader {
    background: none repeat scroll 0 0 / cover #333;
}


Thank you Teitbite, you are wonderful! The Background color works great with the gradient.

I got another question for the Text Logo.

I notice there isn't as much css for the responsive system with the text logo. For the text header there was mobile, small tablet, tablet and small desktop. That being said there is less options to move around that text logo and make it visible without overlapping on other header elements for all types of resolution.

I've used the template.css file to compensate but maybe my code is not clean. I notice sometimes it takes longer to load the header text. I am not too good with these things; can it slow things down if there is multiple css commands at the same time for padding? For example one command on the template.css and one on the tablet.css?

Having less responsive file the text logo I find it harder to get directly the position that I want for all options!

My second question is with regards to the logo type control in the "feature tab" of the template menu on the backend. I am having trouble understanding how it works because there is several controls and possibilities.

I am using the logo type "FROM CSS" I found worked better. I've uploaded, png and svg for each logo, on the backend and in the images/ folder. Everything seems to work well on the desktop (with the exception of the gkLogoSmall which I am not sure is retreiving what (svg or png, backend or images/logo_dark.svg or images/logo_dark.png) I see there is two possibilites png and svg. What is being used and why there is a svg and a png?

Thirdly I also notice that on mobile device, the logo doesn't apprear, only a substitution with an ugly font do appear. It seems that a mobile device should be able to read svg and png. I don't know why that is..

Thank you for your help!
Regards

Hi

Both logos are loaded and this is not neccessary. I would remove the svg one. Png will work better here.

Also I do not think You need the logo on slider in mobile so I would just remove it with this code:

Code: Select all

#gkHeader #gkLogo {
    display: none;
}


Hi,

I decided to keep the slider from the template. I wanted to keep both dark logo and light logo so I used CSS and svg. The problem I had with the font is the way it was exported from illustrator. Using the a special hand writting font for the John's logo, the export options are important. I also converted the outline of the logo instead of exporting it as font.

I made CSS adjustment in template, tablet, small tablet and everything is fine now.

Regards.

Hi

Great to hear that. I do not use Illustrator often so I would be of much help in this case I'm afraid.