html, body {
height:100%;
width: 100%;
}
html {
background-color: #280d3e;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
-webkit-padding-after: 0px;
-webkit-padding-before: 0px;
-webkit-padding-start: 0px;
-webkit-padding-end: 0px;
}
body {
-webkit-text-size-adjust: none;
}
a {
text-decoration: none;
color: inherit;
}
footer {
position: absolute;
width: 100%;
}
.as {
position: relative;
min-height: 100%;
}
.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
padding-bottom: 250px;
}
.wrapper > * {
flex: 1 100%;
}
.header {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
min-width: 400px;
margin: 50px auto;
text-align: center;
}
.header > img {
max-height: 100%;
max-width: 100%;
}
.center {
text-align: center;
}
.center .paragraph {
font-size: 18pt;
color: #ffea8c;
font-weight: bold;
line-height: 1.68;
margin: 0 auto;
width: 85%;
min-width: 400px;
margin-bottom: 50px;
}
.center .paragraph.third {
margin-bottom: 20px;
}
.center .paragraph.fourth {
width: 20%;
min-width: 120px;
padding-top: 30px;
}
.center .paragraph.fourth.details img {
max-width: 100%;
max-height: 100%;
}
.paragraph > img {
max-width: 100%;
max-height: 100%;
}
.left {
width: 75px;
text-align: left;
}
.left > img {
max-height: 100%;
max-width: 100%;
}
.right {
width: 75px;
text-align: right;
}
.right > img {
max-height: 100%;
max-width: 100%;
}
@media all and (min-width: 600px) {
.side { flex: 1 auto; }
.left { order: 3; }
.center { order: 1; }
.right { order: 2; }
}
@media all and (max-width: 600px) {
.right {display: none;}
.left {display: none;}
}
@media all and (min-width: 800px) {
.center { flex: 3 0px; }
.left { order: 1; }
.center { order: 2; }
.right { order: 3; }
}
.side img {
background-image: url('https://i.cdn.turner.com/adultswim/big/img/2016/10/20/offtheair_Thumbnail.gif');
/*animation: 10s thing infinite;*/
}
.side img.preload {
background-image: none;
}
@keyframes thing {
0% {
background:yellow;
}
10% {
background:red;
}
20% {
background:blue;
}
30% {
background:yellow
}
40% {
background:black
}
50% {
background:pink;
}
60% {
background:green;
}
70% {
background:brown;
}
80% {
background:red;
}
90% {
background:gray;
}
100% {
background:teal;
}
}
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
.side {
display: none;
}
/* Something */
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
/* Something */
}
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
.side {
display: none;
}
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
/* Something */
}
/* ----------- iPhone 6 ----------- */
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
.side {
display: none;
}
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
/* Something */
}
/* ----------- iPhone 6+ ----------- */
/* Portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
.side {
display: none;
}
}
/* Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
/* Something */
}
/* ----------- Galaxy S3 ----------- */
/* Portrait */
@media screen
and (device-width: 320px)
and (device-height: 533px) {
/* Something */
}
/* Landscape */
@media screen
and (device-height: 320px)
and (device-width: 533px) {
}
/* ----------- Nexus 7 ----------- */
/* Portrait */
@media screen
and (device-width: 600px)
and (device-height: 960px)
and (orientation: portrait) {
.side {
display: none;
}
}
/* Landscape */
@media screen
and (device-height: 600px)
and (device-width: 960px)
and (orientation: landscape) {
/* Something */
}
/* ----------- Galaxy S4, Galaxy S5, HTC One ----------- */
/* Portrait */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* ----------- Nokia N9 ----------- */
/* Portrait */
@media screen
and (min-device-width: 360px)
and (max-device-height: 640px)
and (orientation: portrait) {
.side {
display: none;
}
}
/* Landscape */
@media screen
and (min-device-width: 360px)
and (max-device-height: 640px)
and (orientation: landscape) {
/* Something */
}
/* ----------- iPad mini ----------- */
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- iPad 1, 2, 3, 4 ----------- */
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
.side {
display: none;
}
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
/*Something*/
}
/* ----------- iPad 3 and 4 ----------- */
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* ----------- Asus Nexus 7 ----------- */
/* Portrait */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: portrait) {
/*SOmething*/
}
/* Landscape */
@media screen
and (device-width: 601px)
and (device-height: 906px)
and (-webkit-min-device-pixel-ratio: 1.331)
and (-webkit-max-device-pixel-ratio: 1.332)
and (orientation: landscape) {
}
/* ----------- Kindle Fire HD 7" ----------- */
/* Portrait */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 800px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation: landscape) {
}