/* global */
body {font-family: 'Montserrat', sans-serif;}
img {max-width:100%;height:auto;}

/* text */
.btn,h1,h2,h3,h4,h5,h6 {font-family: 'Oswald', sans-serif;}
h2 {color:#C77A05;font-size:24px;margin:0 auto 20px;}
h3 {color:#565656;font-size:x-large;}
h4 {color:white;font-size:50px;text-transform: uppercase;}
h4 span {color:#F8EB9A;}
h5 {text-transform: uppercase;font-size:large;letter-spacing: 4px;}
h6 {font-size:x-large;}
.list h3 {font-size:26px;margin-bottom:15px;}
.list h4 {color:#51838F;font-size:21px;text-transform: none;}
.list p {padding:0 5px;}
hgroup h2 {font-size:30px;width:82%;margin-bottom:20px;}
.strike {text-decoration:line-through;color:#aaa;font-size:smaller;}
.main-footer h4 {margin-top:16px;}

/* header */
.main-header,
.main-footer {text-transform: uppercase;background-color:#C77A05;background-image:url('../img/background.gif');background-position:right center;background-repeat:no-repeat;background-size:cover;height:208px;border-bottom:8px solid #AC5100;color:#7D2808;font-family: 'Oswald', sans-serif;font-size:x-large;}
.main-header img {height:195px;margin-top:5px;}
.main-header h1 {color:#FDEA84;font-size:40px;font-weight: bold;font-size:90px;margin-top:30px;margin-bottom:-5px;}
.main-header h1 span {display:block;color:white;font-size:xx-large;font-weight:normal;line-height:.5;}

/* main */
main {position:relative;z-index:10;overflow:hidden;padding-bottom:50px;padding-top:50px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#dfdfdf+0,b1b1b1+51,dfdfdf+100 */
background: #ffffff;background: -moz-linear-gradient(top, #ffffff 0%, #b1b1b1 51%, #ffffff 100%);background: -webkit-linear-gradient(top, #ffffff 0%,#b1b1b1 51%,#ffffff 100%);background: linear-gradient(to bottom, #ffffff 0%,#b1b1b1 51%,#ffffff 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );}
article {border:1px solid #D8D8D8;-webkit-box-shadow: 0px 0px 4px 0px #aaa;box-shadow: 0px 0px 4px 0px #aaa;min-height:400px;background:white;color:#333;font-size:15px;}
article p:last-child {margin-bottom:0;}
.popout {background:white;margin:0 auto;position:relative;z-index:10;color:#666;font-size:12px;}
.hero {color:#754600;padding:30px 0;background-color:#C77A05;background-image:url('../img/background.gif');background-position:right center;background-repeat:no-repeat;background-size:cover;position:relative;z-index:10;}
.hero img {width:600px;margin:0 auto;left:50%;margin-left:-300px;position:absolute;bottom:-70px;}
.popout .list {margin-top:100px;}
.video {height: 86px;width:86px;font-family: 'Oswald', sans-serif;text-align: center;padding: 30px;background: #51838F;color: white;font-weight: bold;display: inline-block;border-radius: 50px;margin: 20px;position: relative;font-size: 50px;line-height: .8;}
.video::before {content: 'Video';top: 10px;left: 24px;text-transform: uppercase;position: absolute;font-size: medium;font-weight: normal;}
.intro p {color:#666;font-weight:bold;}
.offer {text-align:center;}
.offer img {width:300px;margin-bottom:20px;}
.pricing {font-family: 'Oswald', sans-serif;font-size:large;color:#666;margin-top:25px;}
.pricing strong {font-family: 'Montserrat', sans-serif;font-size:23px;margin-top:15px;}
.the-prices {font-size:50px;color:#508D4E;}
.the-prices b {font-size:60px;}
.btn-primary {background: #51838F;color:white;font-size:50px;border:1px solid #51838F;text-transform: uppercase;font-weight:bold;border-radius:0 0 0 0;padding:3px 16px 6px;margin-top:15px;}
.btn-primary:hover {background:#34646F;}

/* footer */
.main-footer {position:relative;z-index:20;background-image:url('../img/background.gif');background-position:right center;background-repeat:no-repeat;background-size:cover;border-top:8px solid #AC5100;border-bottom:none;min-height:0;height:inherit;}
.main-footer img {height:140px;padding-top:8px;}

/* thank-you */
.thank-you article {width:100%;}
.thank-you .list h4 {margin-bottom:30px;}
.thank-you .list a {display:block;text-align:center;}
.thank-you .list a:hover {text-decoration:none;}
.thank-you .list a:hover h4 {color:#34646F;}
.thank-you .list a:hover .video {background:#34646F;}

@media (min-width: 768px) {
    /* desktop */
    h2 {width:65%;}
    article {padding:60px 90px;margin:0 50px;}
    .intro p {width:70%;margin:0 auto 50px;}
    .popout {-webkit-box-shadow: 0px 0px 50px 35px #bdbdbd;box-shadow:0px 0px 50px 35px #bdbdbd;width:85%;}
    .hero {min-height:480px;}
    .popout{padding-bottom:50px;}
}

@media (max-width: 1024px) {
    /* tablets */
    .main-header {font-size:large;position:relative;}
    .main-header img {height:140px;position:absolute;bottom:-8px;}
    .main-footer {font-size:large;position:relative;}
    .main-footer img {position:absolute;bottom:0;}
    article {padding:15px;}
    .bottom-article {padding-top:35px;}
    .btn-primary {font-size:xx-large;}
}

@media (max-width: 768px) {
    /* phones */
    h3 {font-size:large;}
    .main-header {font-size:large;height:inherit;}
    .main-footer img,
    .main-header img {display:none;}
    article {padding:15px;}
    main {padding-top:15px;padding-bottom:15px;}
    .hero img {display:none;}
    .popout .list {margin-top: 15px;padding:15px;}
    .main-footer {font-size:large;}
    .bottom-article {padding:15px 0;}
    .bottom-article > p {padding:0 15px;}
    .btn-primary {margin-bottom:15px;}
}