/*KnowledgePower knowledgepower.com styles hackology rev 2015 12 18*/
/*all CSS ugliness, lameness, and noncompliance are entirely deliberate and ironic and nothing at all to do with laziness obvs */

*, *:before, *:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}


body {position:relative;margin:0;padding:0;font-family:'Droid Sans', sans-serif;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

@media only screen and (min-width: 800px) {
body {padding-bottom:4rem;}
}


    #homepage {
    background-image: linear-gradient(45deg, #ff0000 0%, #f06d06 100%);
    background-color: #ff0000;
    }
 
    #display, #pricing {
    background-image: linear-gradient(45deg, rgba(217,217,217,1) 0%, rgba(57,124,150,1) 58%, rgba(3,92,128,1) 78%);
    background-color: #035c80;
    }    

    #socialmedia {
    background-image: linear-gradient(45deg, #5FC5E8 0%, #71ceef 100%);
    background-color: #5FC5E8;
    }

    #websiteimprovement {
    background-image: linear-gradient(45deg, #606c88 0%, #3f4c6b 100%);
    background-color: #606c88;
    }

    #about {
    background-image: linear-gradient(45deg, #ffaf4b 0%, #ff920a 100%);
    background-color: #ffaf4b;
    }

    #clients {
    background-image: linear-gradient(100deg, #ff7cd8 0%, #fd89d7 49%, #fba6e1 79%, #fcecfc 100%);
    background-color: #ff7cd8;
    }

    #consultancy {
    background-image: linear-gradient(45deg,  #9307ff 0%, #53cbf1 60%, #ca89ff 100%);
    background-color: #9307ff;
    }

    #cookieexamples {
    background-image: linear-gradient(top, #ca4866 0%, #cd5b76 56%, #d0667f 100%);
    background-color: #ca4866;
    }

/*    #pricing {
    background-image: linear-gradient(45deg, #19c181 0%, #61efbd 67%, #8bffdc 100%);
    background-color: #19c181;
    }
deprecated */

    #jargon {
    background-image: linear-gradient(-45deg, #0e0e0e 0%, #7d7e7d 100%);
    background-color: #0e0e0e;
    }

    #cookies {
    background-image: linear-gradient(left, rgba(234,225,209,1) 0%, rgba(175,154,121,1) 0%, rgba(222,210,191,1) 100%);
    background-color: rgba(234,225,209,1);
    }

    #launch {
    background-color: #085e91;       
    }


#thecontent{margin:0 auto;}
h1{text-align:center;color:white;margin:0;padding-top:8vw;font-size:15vw;text-transform:uppercase;clear:both; }
h2{text-align:center;color:white;margin:0;padding-top:3vw;font-size:2em;clear:both; font-weight:normal}
h2 a{color:white; text-decoration:none}

header {text-align:right; background: rgba(255, 255, 255, 0.1) none repeat scroll 0% 0%; border-radius: 1em;}
@media only screen and (min-width: 800px) {
    header {background:none;}
    }

#headerlogo{float:left;margin-left:1.5em;margin-top:1.05em;color:white;font-weight:bold}
#headerlogo a{text-decoration:none;color:white;font-weight:bold;font-size:1.5em}

#tagline {color: #FFF; font-size: small; padding: 1em; display: inline-block; 
margin: 1.55em 0.2em 0px 1.5em; text-align: right;}

@media only screen and (max-width: 800px) {
    #tagline-trunc {display:none;}
    }

#headerlinks {font-size: medium; margin: 0.5em; color:white }
@media only screen and (min-width: 800px) {
    #headerlinks {font-size: small; margin: 1.55em 0.2em 0 1.5em; float:right;} 
    }
#headerlinks a {text-decoration: none; color:white }
#headerlinks a:hover {text-decoration: underline}
#headerlinks ul {margin:0;padding:1em;list-style-type:none; white-space: nowrap;}
#headerlinks ul li{display:inline; margin-left:1em;}
@media only screen and (min-width: 800px) {
    #headerlinks ul li{margin-left:2em;}
    }

#footer{padding:3rem;text-align:center;}
@media only screen and (min-width: 800px) {
    #footer{padding:0.2rem;}
    }

#footer ul{margin:0;padding:0;list-style-type:none;}
#footer ul li{line-height:3em;}
@media only screen and (min-width: 800px) {
    #footer ul li{margin-left:2em; display:inline; line-height: 1em}
    }

#copyright {font-size: 90%}
#footer a{color:white;font-size:1.2em;}
#footer a:hover{text-decoration:none}
#footer a:visited{color:seashell;}

#footernote{margin:2rem 0 0 0; color:aliceblue; padding: 0 0.2rem 0.5rem 0;}
@media only screen and (min-width: 800px) {
    #footernote{margin-top:2em; font-size:small;}
    }

#footernote a {font-size:small}
#footernote ul li {font-size:small;}

#longcontent{background:rgba(255,255,255,0.75);margin:0.2em; text-align:center; padding-bottom:3em }
@media only screen and (min-width: 800px) {
#longcontent {margin-right:20vw;margin-left:20vw;margin-bottom:2em;  padding-bottom:0}
}
#longcontent a{text-decoration:none;color:teal}
#longcontent a:hover{text-decoration:underline}
#longcontent h2{font-size:2em; text-align:left;color:dimgray; padding: 1em 0.1em 0.2em 0.5em; margin:0.2em 0 0 0; text-transform:uppercase;}
@media only screen and (min-width: 800px) {
#longcontent h2 {padding: 1em 0 0 1.2em} 
}
#longcontent h3{font-size:2em; font-weight:normal; text-align:left; color:slategray; padding: 0.2em 0 0 1.5em; margin:0.2em 0 0 0}
@media only screen and (min-width: 800px) {
#longcontent h3 {font-size:1.2em; padding: 0.2em 0 0 2em;}
}
#longcontent p{text-align:left;font-size:1.2em;line-height:1.5em; margin: 0; padding: 0 0.5em 0.5em 1em;text-align:left}
@media only screen and (min-width: 800px) {
#longcontent p {font-size:1.1em; margin: 1em; padding: 0 2em 0 2.5em;}
}

#longcontent ul, #longcontent ol {text-align:left;font-size:1.4em;line-height:1.5em;padding-left:3em;padding-right:0.5em;padding-bottom:0.5em;text-align:left}
@media only screen and (min-width: 800px) {
#longcontent ul, #longcontent ol {font-size: 1.1em; padding-left:6em; margin-right:3em}
}

#longcontent ul li {padding: 0 0 0.5em 0.1em;}
@media only screen and (min-width: 800px) {
#longcontent ul li {padding: 0 0 1em 1em;}
}
#longcontent img{max-width:100%; margin-top:1em;border:none;}
@media only screen and (min-width: 800px) {
#longcontent img{padding:0.1em;}
}
#longcontent figure{}
@media only screen and (min-width: 800px) {
#longcontent figure{width:75%;margin:1em auto;}
}
#longcontent figcaption{width:80%;font-size:80%;font-weight:lighter;margin:auto;padding:0.2em}
#whitecentral{width:100%;margin:0;background-color:white;text-align:center}
#whitecentral p{width:80%;margin:auto;text-align:left;font-size:1.1em;line-height:1.5em;padding-left:2.5em;padding-right:0.5em;padding-bottom:0.5em;text-align:left}
#whitecentral img{margin-top:1em;padding:0.1em;border:none; max-width:100%}
#whitecentral figure{width:75%;margin:1em auto;background-color:aliceblue}
#whitecentral figcaption{width:80%;font-size:80%;font-weight:lighter;margin:auto;padding:0.2em}

hr{width:90%; margin:auto; color:aliceblue}

.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
@-webkit-keyframes rubberBand{0%{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1);}
30%{-webkit-transform:scale3d(1.25, 0.75, 1);transform:scale3d(1.25, 0.75, 1);}
40%{-webkit-transform:scale3d(0.75, 1.25, 1);transform:scale3d(0.75, 1.25, 1);}
50%{-webkit-transform:scale3d(1.15, 0.85, 1);transform:scale3d(1.15, 0.85, 1);}
65%{-webkit-transform:scale3d(.95, 1.05, 1);transform:scale3d(.95, 1.05, 1);}
75%{-webkit-transform:scale3d(1.05, .95, 1);transform:scale3d(1.05, .95, 1);}
100%{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1);}
}

.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand;}

@media only screen and (min-width: 800px) {
#googleplusbutton {margin: 1.5em}
}
#googlemap {margin: 1.5em; 

/* responsive via http://www.labnol.org/internet/embed-responsive-google-maps/28333/ */
        position: relative;
        padding-bottom: 50%; // This is the aspect ratio
        height: 0;
        overflow: hidden;

}
#googlemap iframe{
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
}

#wufoocontactform {font-size:large; margin: 2em; padding:0}
#wufoocontactform a {font-size: x-small; color:white}
#wuf-adv {font-family:inherit;font-size:x-small; color:#a7a7a7; text-align:center; display:block; margin-bottom:1em}

.johnsonbox {
  padding: 1rem 2rem 1.5rem 2rem;
  margin: .2rem;
  font-size: 110%;
  background: lemonchiffon;
  border: 1px solid khaki;
  border-radius: 4px; 
  display: block; }
.johnsonbox h4 {font-size: 120%; font-weight: bold;}
.johnsonbox p {margin-left:1rem; margin-bottom:1em;}
.johnsonblue {border: 1px solid #F0F8FF; background: #F5FFFA none repeat scroll 0% 0%;}


#contactform {text-align:left; margin-left:1em}
@media only screen and (min-width: 800px) {
#contactform {margin-left:5em}
}
#contactform label{font-weight:bold}
input#Email_Address{width:250px; }
@media only screen and (min-width: 800px) {
input#Email_Address{width:350px; height: 2.5em; padding:5px; font-size:1em}
}
textarea#Your_Message {width:250px; }
@media only screen and (min-width: 800px) {
textarea#Your_Message {width:350px; padding:5px; font-size:1em}
}
input#AntiSpam {width:30px; height: 1.5em}
input#contact-submit {width:200px;height:40px; font-weight:bold; font-size:1em}



#centralcontent a.ghostbutton  {display: inline-block; min-width: 300px; padding: 8px 10px 8px 10px; margin-top: 0.3em;  color: #fff; border: 1px solid #fff; text-align: center;outline: none; text-decoration: none; border-radius: 5px; transition: background-color 0.2s ease-out, color 0.2s ease-out;
}

#centralcontent a.ghostbutton:hover,
#centralcontent a.ghostbutton:active {background-color: #fff;color: #606c88; text-decoration: none;transition: background-color 0.3s ease-in, color 0.3s ease-in; font-weight: bold;
}

#longcontent a.ghostbutton, .longcontent a.ghostbutton {display: inline-block; min-width: 300px; padding: 8px 10px 8px 10px; margin-top: 0.3em;  border: 1px solid #606c88; text-align: center;outline: none; text-decoration: none; border-radius: 5px; transition: background-color 0.2s ease-out, color 0.2s ease-out; font-weight: bold;
}

#longcontent a.ghostbutton:hover, .longcontent a.ghostbutton:hover,
#centralcontent a.ghostbutton:active {background-color: #fff;color: #606c88; text-decoration: none;transition: background-color 0.3s ease-in, color 0.3s ease-in;
}

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* CSS Accordion credit  Paul Underwood  */
/**
 *  CSS3 Only Horizontal and Vertical Accordion
 *  Author: Paul Underwood for Hongkiat.com
 *  Website: www.paulund.co.uk
 *  Date: 27/11/11
 *  Version: 1.0
 * This version liberally hacked for @knowledgepowers
 * (For original please visit http://www.hongkiat.com/blog/css-content-accordion/  )
 */

 




/*Define Accordion box*/
.accordion { width:90%; overflow:hidden; margin:10px auto; color:black; background:white; padding:10px;}

/*General Accordion****************************************************************************/
/*Set style of open slide*/
.accordion section:target {background:white; padding:10px;}
.accordion section:target:hover { background:#FFF; }
.accordion section:target h4 {width:100%; margin: 10px 0 0 0;}
.accordion section:target h4 a{padding:0;}
.accordion section:target p {display:block;}
.accordion section h4 a{padding:6px 10px;display:block; text-decoration:none; font-size:140%; text-align:left; color: slategray; } 

/*set style of closed slide*/
.accordion section{ float:left; overflow:hidden; color: black; cursor:pointer; background: snow; margin:3px; }
.accordion section:hover {background:seashell;}
.accordion section p { display:none;  margin:0 10px 8px 10px; padding:0}
.accordion section:after{position:relative;font-size:24px;color:#000;font-weight:bold;}


/*End General Accordion****************************************************************************/


/*Vertical Accordion *************************************************************************/
.vertical section{ width:100%; height:50px;
    -webkit-transition:height 0.2s ease-out;
    -moz-transition:height 0.2s ease-out;
    -o-transition:height 0.2s ease-out;
    -ms-transition:height 0.2s ease-out;
    transition:height 0.2s ease-out;
}
/*Set height of the slide*/
.vertical :target{min-height:250px; height:auto; width:97%; }

.vertical section h4 { position:relative; left:0; top:-15px; }




.longcontent{background:rgba(255,255,255,0.75);margin:0.2em; text-align:center; padding-bottom:3em }
@media only screen and (min-width: 800px) {
.longcontent {margin-right:20vw;margin-left:20vw;margin-bottom:2em;  padding-bottom:0}
}
.longcontent a{text-decoration:none;color:teal}
.longcontent a:hover{text-decoration:underline}
.longcontent h2{font-size:2em; text-align:left;color:dimgray; padding: 1em 0.1em 0.2em 0.5em; margin:0.2em 0 0 0; text-transform:uppercase;}
@media only screen and (min-width: 800px) {
.longcontent h2 {padding: 1em 0 0 1.2em} 
}
.longcontent h3{font-size:2em; font-weight:normal; text-align:left; color:slategray; padding: 0.2em 0 0 0.2em; margin:0.2em 0 0 0}
@media only screen and (min-width: 800px) {
.longcontent h3 {font-size:1.2em; padding: 0.2em 0 0 2em;}
}
.longcontent p{text-align:left;font-size:1.2em;line-height:1.5em; margin: 0; padding: 0 0.5em 0.5em 1em;text-align:left}
@media only screen and (min-width: 800px) {
.longcontent p {font-size:1.1em; margin: 1em; padding: 0 2em 0 2.5em;}
}

.longcontent ul, .longcontent ol {text-align:left;font-size:1.2em;line-height:1.5em;padding-left:3em;padding-right:0.5em;padding-bottom:0.5em;text-align:left}
@media only screen and (min-width: 1100px) {
.longcontent ul, .longcontent ol {font-size: 1.1em; padding-left:6em; margin-right:3em}
}


.longcontent ul li {padding: 0 0 0.5em 0.1em; }
@media only screen and (min-width: 800px) {
.longcontent ul li {padding: 0 0 1em 1em; max-width: 70ch;}
}
.longcontent img{max-width:100%; margin-top:1em;border:none;}
@media only screen and (min-width: 800px) {
    .longcontent img{padding:0.1em;}
    }
.longcontent figure{}
@media only screen and (min-width: 800px) {
.longcontent figure{width:75%;margin:1em auto;}
}
.longcontent figcaption{width:80%;font-size:80%;font-weight:lighter;margin:auto;padding:0.2em}

.longcontent audio {margin:0; padding:0; float: right;}

.longcontent div+h3 {margin-top:2em;}

small {font-size:65%;}
.spacer {margin:1em 0;clear:both;}

.whitebg {background-color:white;}

p.ch45 {max-width: 45ch; margin:auto;}

#centralcontent {margin:auto;}
@media only screen and (min-width: 800px) {
#centralcontent{width:80%; padding:0.5em} 
    }
#centralcontent p{text-align:center;color:white;margin:0 0.1em;padding-top:0.5em;font-size:1.6em}
#centralcontent a{text-decoration:none;color:white}
#centralcontent a:hover{text-decoration:underline}
#centralcontent .whooping{font-size:200%;font-weight:bold; margin-bottom: 1em;}
#centralcontent .cough{font-size:90%;margin-top:3em;margin-bottom:2em; padding: 1em;}
#centralcontent figure {text-align:center; margin:auto; padding-bottom:2em}

.centralcontent {margin:auto;}
@media only screen and (min-width: 800px) {
.centralcontent{width:80%; padding:0.5em} 
    }
.centralcontent p{text-align:center;color:white; padding:0.5em 0.2em 0 0.2em;font-size:1.6em;margin-top:0em; margin-bottom:0.1em;}/*beware LR margins because of margin auto on others */
.centralcontent a{text-decoration:none;color:white}
.centralcontent a:hover{text-decoration:underline}
.centralcontent .whooping{font-size:200%;font-weight:bold;margin-top:1em; margin-bottom:0.1em;} /* also beware LR margin */
.centralcontent .cough{font-size:90%;margin-top:3em;margin-bottom:2em; padding: 1em;}
.centralcontent figure {text-align:center; margin:auto; padding-bottom:2em; }
.centralcontent figure img {max-width: 100%;}

a#contrast-load  {margin:0; padding-left:0.2em; float:left; color:black;}
a#contrast-load:hover {text-decoration: none;}

.maxch-short {max-width: 50ch; margin: auto;}


/* johnsonbox left and right margin if we have space*/
@media only screen and (min-width: 400px) {
.ninety-pc {margin: 1rem auto; width: 90%;}
.planbox {margin: 1rem auto; width: 80%;}
}

.planbox-blue-light {border: 1px solid #397C96; background-color: rgba(57, 124, 150, 0.1);}
.planbox-blue-mid {border: 1px solid #397C96; background-color: rgba(57, 124, 150, 0.2);}
.planbox-blue-dark  {border: 1px solid #397C96; background-color: rgba(57, 124, 150, 0.3);}


.paypalbutton {font-weight: bold; margin-bottom:1em; padding: 1em 1em 1em 2.5em; width: 350px; background: white; display: inline-block; line-height:150%}

/* hackily hide or compress stuff on the narrow screens */
@media only screen and (max-width: 400px) {
#toast-container,
.habla-desktop {display: none;}
}
@media only screen and (max-width: 500px) {
.paypalbutton {margin-left: -1.5em;}
}