@font-face {
    font-family: 'stumpone';
    src: url('fonts/stump_one.eot');
    src: url('fonts/stump_one.eot?#iefix') format('embedded-opentype'),
         url('fonts/stump_one.woff2') format('woff2'),
         url('fonts/stump_one.woff') format('woff'),
         url('fonts/stump_one.ttf') format('truetype'),
         url('fonts/stump_one.svg#stumpone') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'amatic_scregular';
    src: url('fonts/amaticsc-regular.eot');
    src: url('fonts/amaticsc-regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/amaticsc-regular.woff2') format('woff2'),
         url('fonts/amaticsc-regular.woff') format('woff'),
         url('fonts/amaticsc-regular.ttf') format('truetype'),
         url('fonts/amaticsc-regular.svg#amatic_scregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

p, body { font-family:roboto, sans-serif; font-size:16px; line-height:24px; }

h1, h2, h3, h4 { font-family: stumpone, sans-serif; }

h1 { font-size:26px; }

h2 { font-size:38px; }

h4 { font-size:28px; }

h5 { font-size:32px; font-family:amatic_scregular, sans-serif; }
.code h4 { font-size:28px; }

#logo img { max-width:100%; }
a.github-banner { position:fixed; top:0; right:0; z-index:200;}

a.github-bar { position:fixed; top:0; z-index:200; padding:10px 0; width:100%; display:block; font-family:courier, monaco, monospace; box-shadow:0 2px 8px rgba(0,0,0,0.5); text-align:center; }

.header-wrapper { position:relative; }

.wrap-my-slide { height: 520px; position:relative; }
.slide-a-long { height:100%; }
.slide-a-long div { height:100%; }
.slide { background-size:cover; background-position:center center; padding-top:200px; }

#slide1 { background-image:url(img/sell.jpg); }
#slide2 { background-image:url(img/wheat.jpg); }
#slide3 { background-image:url(img/goat.jpg); }
#slide4 { background-image:url(img/freedom.jpg); }

.slide h3 { font-family: amatic_scregular, sans-serif; font-size:35px; line-height:35px; margin-bottom:30px; text-transform:uppercase; letter-spacing:3px;  }
.slide p { font-family: amatic_scregular, sans-serif; font-size:57px; line-height:57px; margin-bottom:30px; text-transform:uppercase; letter-spacing:3px; }

.slide.big p {font-size:120px; line-height:140px; margin-bottom:40px; }

header { position:absolute; top:60px; width:100%; }

.anchor { position:absolute; bottom:-55px; width:100%; }
.anchor a { text-decoration:none; }
.anchor .circle { border-radius:200px; height:110px; width:110px; text-align:center; display:table-cell; vertical-align:middle; font-size:80px; }
.anchor .circle span { position:relative; bottom: 10px;  }

.what-is-it { padding:40px 0; }

.example { padding:80px 15px; }

.code pre { background:none; border:none; font-weight:bold; }
.code pre code { background:none; }
.code pre .hljs-attribute { font-weight:normal; }

.demo { padding:80px 0; }
.demo .container { display:table; }
.demo .text { text-align:right; vertical-align:middle; display:table-cell; height:100%; float:none; }
.demo .pic { text-align:center; vertical-align:middle; display:table-cell; height:100%; float:none; }
.demo .pic img { max-width:100%; }
.demo .batton { text-align:left; vertical-align:middle; display:table-cell; height:100%; float:none; }

.demo a.btn {
    display:inline-block;
    padding: 10px 60px 2px;
    border-radius:3px;
    font-family:stumpone, sans-serif;
    font-size:38px;
    letter-spacing:2px;
    box-shadow:0px 6px #f0c000;
}

.docs { margin-top: 80px }



.features { padding:80px 15px; }
.features ul { list-style:none; padding-left:0; }
.features li { background:url(img/bullet-heart.png) left top 11px no-repeat; padding: 4px 0 4px 20px; }

div.add-ons { padding:80px 15px; }
.input-group-addon.glyphicon { position: static; }

ul.add-ons li { border:none; margin-bottom: 8px; }
ul.add-ons a:hover { text-decoration:none; }
ul.add-ons h3 { margin: 0; }
ul.add-ons p { margin-bottom: 1px; }
ul.add-ons p span { font-size:13px; text-transform:uppercase; }
ul.add-ons span.date { text-transform:none; font-size: 11px;  }
ul.add-ons .badge { border-radius:3px; padding:10px 15px; }
ul.add-ons a.stealth { text-decoration: underline; }
ul.add-ons .nodesc { font-style: italic}

footer { padding:240px 0 100px; margin-top:80px;  }
footer h5 { font-size:74px; margin-bottom:60px; text-transform:uppercase; letter-spacing:2px; }
footer p { font-family:amatic_scregular, sans-serif; font-size:32px; text-transform:uppercase; letter-spacing:2px; }
footer img { display:inline-block;  }
footer a { text-decoration:underline; }
footer small { display: inline-block; margin-top: 20px; font-family:roboto, sans-serif; font-size: 11px; text-transform: none; }

@media screen and (max-width: 1199px) {

    .slide { padding-top:170px; }
    .slide h3 { margin-bottom:20px; }
    .slide p { font-size:62px; line-height:72px; margin-bottom:20px; }
    .slide.big p {font-size:80px; line-height:100px; margin-bottom:25px; }

}

@media screen and (max-width: 991px) {

    .slide h3 { font-size:32px; line-height:32px; margin-bottom:20px;  }
    .slide p { font-size:48px; line-height:54px; margin-bottom:20px; }
    .big p { font-size:58px; line-height:68px; margin-bottom:25px; }

}

@media screen and (max-width: 767px) {

    .wrap-my-slide { height: auto; }
    header { position:static; margin-top:80px;  }
    h2 { font-size:34px; }
    h4 { margin:30px 0 10px; }

    h5 { font-size: 24px; }
    .demo, .what-is-it { padding: 40px 0; }
    .example, .features, div.add-ons { padding:40px 15px; }

    body, p { font-size:14px; }
    pre { font-size:12px !important; }

    .demo a.btn {
        padding: 10px 30px 2px;
        font-size:28px;
    }

}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}