/*-------------------- reset stylesheet --------------------- */
html, body, div, span, h1, h2, h3, p, a, ul, ol, li, img, article, aside, blockquote, figure, figcaption, footer, header, hgroup, menu, nav, section, time {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
    font-weight: normal;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, time {
	display: block;
}
a {
	outline: none;
}


/*-------------------- clearfix --------------------- */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}


/*-------------------- global styles & structure --------------------- */
body {
    /* font-family: Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace; */
    font-family: "prestige-elite-std",monospace;
    font-style: normal;
    font-weight: 400;
    text-align: center;
    background: #fff;
    font-size: 16px;
}
#wrapper {
    max-width: 1200px;
    margin: 0 auto;
}
.container {
    padding: 3% 5% 5% 5%;
}


/*-------------------- header, footer & navigation --------------------- */
/*--- header ---*/


/*--- main navigation ---*/


/*--- footer ---*/



/*-------------------- body content --------------------- */
#typed {
    color: #333;
    background: url(/images/xm/bg_main.jpg) #f6f2e9;
    font-size: 3.8em;
    font-weight: 700;
    height: 5.25em;
    padding: 3% 5%;
    margin-bottom: 20px;
}
#typed-strings {
    visibility: hidden;
}
#typed-strings ul {
    list-style-type: none;
}
.video-wrapper {
    padding: 0;
    margin-bottom: 15px;
}
.video-wrapper video, .video-wrapper img {
    max-width: 100%;
    width: 100%;
    height: auto;
}

/* connect button */
a.btn {
    position: relative;
    display: block;
    z-index: 9;
    background: #76adc1;
    background-image: -webkit-linear-gradient(top, #76adc1, #6290a1);
    background-image: -moz-linear-gradient(top, #76adc1, #6290a1);
    background-image: -ms-linear-gradient(top, #76adc1, #6290a1);
    background-image: -o-linear-gradient(top, #76adc1, #6290a1);
    background-image: linear-gradient(to bottom, #76adc1, #6290a1);
    -webkit-border-radius: 5;
    -moz-border-radius: 5;
    border-radius: 5px;
    color: #fff;
    font-size: 2em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 3% 5%;
    text-decoration: none;
    margin-bottom: 20px;
}

.btn-inner {
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: #8ccee6;
    background-image: -webkit-linear-gradient(top, #8ccee6, #76adc1);
    background-image: -moz-linear-gradient(top, #8ccee6, #76adc1);
    background-image: -ms-linear-gradient(top, #8ccee6, #76adc1);
    background-image: -o-linear-gradient(top, #8ccee6, #76adc1);
    background-image: linear-gradient(to bottom, #8ccee6, #76adc1);
    -webkit-border-radius: 5;
    -moz-border-radius: 5;
    border-radius: 5px;
    text-decoration: none;
    -webkit-transition: opacity 0.3s linear;
       -moz-transition: opacity 0.3s linear;
         -o-transition: opacity 0.3s linear;
            transition: opacity 0.3s linear;
}
a.btn:hover .btn-inner {
    opacity: 1;
}

/* chewyslist banner */
a.chewyslist {
    display: block;
    color: #333;
    font-weight: 700;
    background: url(/images/xm/bg_main.jpg) #f6f2e9;
    padding: 3% 5%;
    text-decoration: none;
    -webkit-border-radius: 5;
    -moz-border-radius: 5;
    border-radius: 5px;
}
.chewyslist p {
    font-size: 1em;
}
a.chewyslist img {
    max-width: 4em;
    height: auto;
    padding-bottom: 0.45em;
    opacity: 1;
    -webkit-transition: opacity 0.3s linear;
       -moz-transition: opacity 0.3s linear;
         -o-transition: opacity 0.3s linear;
            transition: opacity 0.3s linear;
}
a.chewyslist:hover img {
    opacity: 0.75;
}


/* footer */
footer {
    color: #808080;
    font-size: 0.9em;
    margin-top: 20px;
}
footer sup {
    font-size: 0.6em;
}


/*-------------------- media queries --------------------- */
/* tablets (landscape) ----------- */
@media only screen 
and (max-width : 1024px) 
and (orientation : landscape) {

}

/* tablets (portrait) ----------- */
@media only screen 
and (max-width : 768px) 
and (orientation : portrait) {
    body {
        font-size: 15px;
    }
    #typed {
        font-size: 3em;
    }    
}

/* smartphones (@ 568px breakpoint) ----------- */
@media only screen 
and (max-width : 568px) {
    .container {
        padding: 3%;
    }
    #typed {
        font-size: 1.75em;
        padding: 3%;
    }
    footer {
        font-size: 0.85em;
    }
    a.chewyslist img {
        max-width: 3.5em;
        padding-bottom: 0.35em;
    }
}

/* smartphones (landscape) ----------- */
@media only screen 
and (max-width : 481px) {
    #typed {
        height: 6.5em;
        margin-bottom: 15px;
    }
    .video-wrapper {
        margin-bottom: 10px;
    }
    a.btn {
        margin-bottom: 15px;
    }
    .chewyslist p {
        font-size: 0.85em;
    }
    a.chewyslist img {
        max-width: 3em;
        padding-bottom: 0.25em;
    }
    footer {
        margin-top: 15px;
    }
}

/* smartphones (portrait) ----------- */
@media only screen 
and (max-width : 321px) {
    body {
        font-size: 14px;
    }
    #typed {
        font-size: 1.5em;
    }
    a.btn {
        font-size: 1.75em;
        margin-bottom: 13px;
    }
    a.chewyslist img {
        max-width: 2.5em;
        padding-bottom: 0.15em;
    }
}