/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal}strong{font-weight: bold;}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}.clear{clear: both !important; float:none !important;display:block !important;width:100% !important;}
body {color: #fff; min-height: 100%; padding: 0; font-family: 'Roboto',sans-serif; font-size: 14px; background: linear-gradient(45deg,#000,#333);}
img {display: block; width: 100%; height: auto;}
.main h1 {display: block; width: 260px; margin: 0 auto; padding: 32px 0 16px;}
.orange {margin-top: 80px; display: block; background: #f26522; color: #fff; padding: 32px 16px 16px; text-align: center;}
.orange figure {width: 100%; max-width: 400px; margin: 0 auto; display: block; margin-top: -117px; position: relative;}
.orange h2 {color: #fff; font-style: italic; font-size: 24px; line-height: 1.8; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);}
.orange h2 a {color: #fff; text-decoration: underline; font-weight: bold;}
.orange p {color: #fff; font-size: 24px; line-height: 1.8; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); padding: 16px 0;}
.orange p a {color: #fff; text-decoration: underline; font-weight: bold;}

.btn {display: inline-block; text-transform: uppercase; padding: 16px 24px; color: #fff; background: #f26522; font-weight: bold; font-size: 15px; border-radius: 4px; text-decoration: none; letter-spacing: 1px;}
.btn:hover {background: #ff7633;}

.list--side {display: block; line-height: 0; padding: 0; margin: 0; letter-spacing: -0.31em; *letter-spacing: normal; *word-spacing: -0.43em; text-rendering: optimizespeed; box-sizing: border-box;}
.list--side > * {line-height: 1; padding: 0; margin: 0; display: inline-block; zoom: 1; *display: inline; letter-spacing: normal; word-spacing: normal; text-rendering: auto; box-sizing: border-box;}

.products {width: 100%; max-width: 1000px; margin: 0 auto; text-align: center; padding: 0 0 16px;}
.products figure {width: 33.33%; max-width: 400px; vertical-align: top; text-align: center; padding: 32px 16px 0; margin: 0;}
.products img {border-radius: 0 0 0 16px;}
.products figcaption,
.products h3
{display: block; font-size: 18px; font-weight: bold; padding: 16px 0 16px; margin: 0 0 16px; border-bottom: 1px solid #f26522;}
.products li {display: block; padding: 0 0 16px 16px; text-align: left; font-size: 13px; line-height: 1.6; position: relative;}
.products li::before {content: ''; position: absolute; top: 8px; left: 0px; width: 6px; height: 6px; display: inline-block; background: #f26522; border-radius: 50%;}

.videos {display: block; background: #f26522; color: #fff; padding: 32px 0;}
.videos h2 {color: #fff; font-size: 32px; font-weight: bold; line-height: 1.8; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); margin: 0 0 24px;}
.videos p {color: #fff; font-size: 24px; line-height: 1.8; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);}
.videos p a {color: #fff; text-decoration: underline;;}
.videos {text-align: center;}
.videos ul {width: 100%; max-width: 1000px; margin: 0 auto;}
.videos li {width: 50%; vertical-align: top; padding: 0 0 16px 16px;}
.video__single {position: relative; padding-bottom: 56%;}
.video__single iframe {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}

.document {background: linear-gradient(45deg,#f2f2f2,#ccc); padding: 32px; color: #444;}
.document h2 {color: #000; font-size: 32px; font-weight: bold; line-height: 1.8;  margin: 0 0 24px; text-align: center;}
.document--container {display: table; width: 100%; max-width: 1000px; margin: 0 auto;}
.document--container > div {display: table-cell; width: 50%; vertical-align: middle;}
.document--cover {text-align: center;}
.document--cover a {display: block;}
.document--cover figure {width: 100%; max-width: 300px; line-height: 0; display: block; margin: 0 auto;}
.document--cover figure img {width: 100%; height: auto; border-radius: 4px; box-shadow: 10px 10px 10px -8px rgba(0,0,0,.4);}
.document--text {text-align: center; padding: 32px 0 0;}
.document .list--side {text-align: center;}
.document .list--side > li {width: 50%; vertical-align: top; padding: 24px 32px;}
.document .this--cta {padding: 32px 0 0;}
.document p {font-size: 18px; line-height: 1.8; color: #444; font-weight: 300;}

footer {text-align: center; padding: 16px; font-size: 12px; color: #fff;}
footer a {color: #f26522; text-decoration: none;}
footer a:active,
footer a:hover
{color: #d00;}
@media (max-width:1000px){
    .products figure {width: 100%;}
    .main .orange h2 {font-size: 18px;}
    .main .orange figure {margin-top: -94px;}

    .document .list--side > li {display: block; width: 100%; max-width: 300px; margin: 0 auto; padding: 24px 0;}
    
    .videos li {display: block; width: 100%; padding: 16px 0;}
}