/* Add to Responsive Stylesheets */

@-ms-viewport {
	width: device-width;
}

/* Offer Expired Defaults */

.offer-expired {
	margin: 0 auto 1em;
	max-width: 500px;
	width: auto;
}

/* ===== General Rules ===== */

body {
    font-size: 100%;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    letter-spacing: .3px;
}

.content {
	margin: 0;
	padding: 0;
}

main {
    display: block;
}

img {
	height:auto;
	max-width: 100%;
}

.wrap {
    margin: 0 auto;
    max-width: 35em;
    padding: .4em 1.4em;
}

.content .wrap {
	padding: 0 1.4em;
}

ul.fa-ul li { list-style-image: none; }

.fa-ul .fa-li {
    color: #F60;
}

h1, h2, h3  {
    font-family: 'Montserrat', "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    margin: .5em auto;
    text-align: center;
    color: #111;
}

h1 {
    font-size: 2.2rem;
}

h2 {
    font-size: 1.8rem;
    color: #4B7F52;
}

h3 {
    font-size: 1.6rem;
    color: #D87D3C;
}

/* ===== Header =====*/

header {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .7))) ,url(/_img/toolbox/p/kcs/kcs_writing.jpeg) no-repeat center;
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)) ,url(/_img/toolbox/p/kcs/kcs_writing.jpeg) no-repeat center;
    background-size: cover;
	padding-bottom: 1px;
	padding-top: 1px;
}

header h1, header h2, header h3 {
    color: #fff;
    text-shadow: 1px 1px #222;
}

header .wrap {
    max-width: 75em;
}

/* ===== Misc =====*/

.image-box, .portrait-box {
    text-align: center;
}

.image-box__center img {
    display: block;
    margin: 0 auto;
}

.image-box__left, .image-box__right{
    display: inline-block;
    background: linear-gradient(77deg, #96E8DD, #96dfe8);
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: .1em;
}

.portrait-box__right, .portrait-box__left {
    display: inline-block;
    border-radius: .1em;
}

.image-box span {
    display: block;
    text-align: center;
    font-size: .9em
}

.resolute__image {
    text-align: center;
}

.resolute__image img {
    border-radius: 50%;
    border: 2px solid #eee;
    margin: 1em auto;
}

/* ===== Testimonials/Quotes ===== */

.testimonial {
    background: linear-gradient(89deg, #FFFFE0, #fffce0);     
    padding: .1em .6em;
    border-radius: 1rem;
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.testimonial p {
    font-family: 'Raleway', "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

#quotes {
    background: linear-gradient(109deg, rgba(229, 255, 241, .6), rgba(229, 255, 248, .6)), url(/_img/toolbox/p/kcs/round.png);
}

#quotes .wrap {
    max-width: 70em;
}

.quotes {
    margin: 0 auto;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.quote {
    min-height: 100%;
    background: linear-gradient(89deg, #fff, #feffff);     
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.1);     
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex: 1 1 20em;
    -ms-flex: 1 1 20em;
    flex: 1 1 20em;
	text-decoration: none;
    position: relative;
    top: 0;
    margin: 1.4em auto;
    -webkit-transition: all .1s ease-in;
    transition: all .1s ease-in;
    max-width: 20em;
    font-family: 'Raleway', "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

#thumb-1.quote__thumb  {
    padding-bottom: 60%;
    background: url(/_img/toolbox/p/kcs/kcs_writer.jpg) center center;
    background-size: cover;
}

#thumb-2.quote__thumb  {
    padding-bottom: 60%;
    background: url(/_img/toolbox/p/kcs/kcs_writer-2.jpg) center center;
    background-size: cover;
}

#thumb-3.quote__thumb  {
    padding-bottom: 60%;
    background: url(/_img/toolbox/p/kcs/kcs_writer-3.jpg) center center;
    background-size: cover;
}

#thumb-4.quote__thumb  {
    padding-bottom: 60%;
    background: url(/_img/toolbox/p/kcs/kcs_writer-4.jpg) center center;
    background-size: cover;
}

#thumb-5.quote__thumb  {
    padding-bottom: 60%;
    background: url(/_img/toolbox/p/kcs/kcs_writer-5.jpg) center center;
    background-size: cover;
}

#thumb-6.quote__thumb  {
    padding-bottom: 60%;
    background: url(/_img/toolbox/p/kcs/kcs_writer-6.jpg) center center;
    background-size: cover;
}

.quote__inner {
    padding: 20px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.quote:hover {
    top: -2px;
    -webkit-box-shadow: 0 4px 5px rgba(0,0,0,0.2);
            box-shadow: 0 4px 5px rgba(0,0,0,0.2);
}

.quote__person {
    position: relative;
    bottom: -1%;
}

/* ===== Presentations ===== */

#master-presentations .wrap {
    max-width: 55em;
}

.presentation__pre-head h3 {
    background: #099610;
    color: #fff;
    border: 1px solid #0BC615;
    padding: .4em .2em;
    border-radius: .3em;
    -webkit-box-shadow: 0 4px 7px rgba(0,0,0,0.2);
            box-shadow: 0 4px 7px rgba(0,0,0,0.2);
}

.presentation__subhead h2 {
    color: #219BD3;
}

.presentation__content {
    max-width: 35em;
    margin: 0 auto;
}

/* ===== Media Queries ===== */

@media(min-width: 30em) {
    h1 {
        font-size: 2.4rem;
    }

    h2 {
        font-size: 1.9rem;
    }

    h3 {
        font-size: 1.7rem;
    }   

    .image-box__right, .portrait-box__right {
        float: right;
        margin: 1em 0 1em 1.2em;
        clear: both;
    }

    .image-box__left, .portrait-box__left {
        float: left;
        margin: 1em 1.2em 1em 0;
        clear: both;
    }

    .quote__message p, .testimonial p {
        font-size: 1.2rem;
    }
}

@media(min-width: 60em) {
    h1 {
        font-size: 2.6rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.8rem;
    }

    body {
        font-size: 115%;
    }
}

@media(min-width: 75em) {
    h1 {
        font-size: 2.8rem;
    }

    h2 {
        font-size: 2.1rem;
    }

    h3 {
        font-size: 1.9rem;
    }
}

/* ===== Buttons ===== */

a.order:link,
a.order:visited {
	background: #fb8f47;
	color: #fff;
	font-weight: bold;
	height: auto;
	max-width: 20em;
	padding: 0.5em;
    width:auto;
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    border-radius: .3em;
    position: relative;
    top: 0;
}

a.order:hover,
a.order:active {
    -webkit-box-shadow: 0 4px 7px rgba(0,0,0,0.4);
            box-shadow: 0 4px 7px rgba(0,0,0,0.4);
    top: -2px;
}

/* ===== Artificial Breaks ===== */

#fastest {max-width: 18em;}
#unique-writing {max-width: 19em;}
#solid-grasp {max-width: 15em;}
#most-extraordinary {max-width: 18em;}
#barefoot-writer {max-width: 15em;}
#copywriting-samples {max-width: 16em;}
#presentation-1 {max-width: 19em;}
#freelancing-rocks {max-width: 29em;}
#presentation-2 {max-width: 20em;}
#five-marketing-tools {max-width: 19em;}
#presentation-3 {max-width: 20em;}
#top-secrets {max-width: 18em;}
#presentation-4 {max-width: 20em;}
#headline-ideas {max-width: 19em;}