body div#devskin12874096 .new-gallery { margin: 0 auto; text-align: center; }

body div#devskin12874096 .wrap.new-gallery div[class^="col-"] {
	float: none;
	vertical-align: top;
}

body div#devskin12874096 .new-gallery .image {
	padding: 30px 0 0;
}

body div#devskin12874096 .new-gallery .image img {
	width: 100%;
}

body div#devskin12874096 {font: 14px/22px Sans-Serif; background: #fff; color: #000; border: none; margin: 0; padding: 0 } body div#devskin12874096 span.ogpreview {display: none } body div#devskin12874096 div.gr-box {padding: 0 !important; margin: 0 !important; border: none !important; background: none !important } body div#devskin12874096 i.gr1, body div#devskin12874096 i.gr1 i, body div#devskin12874096 i.gr2, body div#devskin12874096 i.gr2 i, body div#devskin12874096 i.gr3, body div#devskin12874096 .gr-top {display: none !important } body div#devskin12874096 .gr-body {background: transparent; border: 0 !important; position: static; overflow: visible } body div#devskin12874096 .gr-body .grf-indent {background: transparent; margin: auto; text-align: center; padding: 0 } body div#devskin12874096 .gr-body .gr {border: 0 !important; position: static; background: none } body div#devskin12874096 .gr-box .text {padding: 0 !important; position: relative; text-align: left } body div#devskin12874096 .gr-box .text br {display: none !important } body div#devskin12874096 .gr-box .list {height: 0; width: 0; clear: both; visibility: hidden } body div#devskin12874096 .wrap {max-width: 1050px; margin: auto; padding: 0 15px; position: relative } body div#devskin12874096 .wrap .wrap {width: 100%; padding: 0 } body div#devskin12874096 .wrap.wide {max-width: 1500px } body div#devskin12874096 .wrap div[class^="col-"] {float: left; box-sizing: content-box; display: inline-block; margin: 0 1.4285714286% } body div#devskin12874096 .wrap div[class^="col-"] .alpha {margin-left: 0 !important } body div#devskin12874096 .wrap div[class^="col-"] .omega {margin-right: 0 !important } body div#devskin12874096 .col-1 {width: 5.4761904762% } body div#devskin12874096 .before-1 {padding-left: 8.3333333333% } body div#devskin12874096 .after-1 {padding-right: 8.3333333333% } body div#devskin12874096 .col-2 {width: 13.8095238095% } body div#devskin12874096 .before-2 {padding-left: 16.6666666667% } body div#devskin12874096 .after-2 {padding-right: 16.6666666667% } body div#devskin12874096 .col-3 {width: 22.1428571429% } body div#devskin12874096 .before-3 {padding-left: 25% } body div#devskin12874096 .after-3 {padding-right: 25% } body div#devskin12874096 .col-4 {width: 30.4761904762% } body div#devskin12874096 .before-4 {padding-left: 33.3333333333% } body div#devskin12874096 .after-4 {padding-right: 33.3333333333% } body div#devskin12874096 .col-5 {width: 38.8095238095% } body div#devskin12874096 .before-5 {padding-left: 41.6666666667% } body div#devskin12874096 .after-5 {padding-right: 41.6666666667% } body div#devskin12874096 .col-6 {width: 47.1428571429% } body div#devskin12874096 .before-6 {padding-left: 50% } body div#devskin12874096 .after-6 {padding-right: 50% } body div#devskin12874096 .col-7 {width: 55.4761904762% } body div#devskin12874096 .before-7 {padding-left: 58.3333333333% } body div#devskin12874096 .after-7 {padding-right: 58.3333333333% } body div#devskin12874096 .col-8 {width: 63.8095238095% } body div#devskin12874096 .before-8 {padding-left: 66.6666666667% } body div#devskin12874096 .after-8 {padding-right: 66.6666666667% } body div#devskin12874096 .col-9 {width: 72.1428571429% } body div#devskin12874096 .before-9 {padding-left: 75% } body div#devskin12874096 .after-9 {padding-right: 75% } body div#devskin12874096 .col-10 {width: 80.4761904762% } body div#devskin12874096 .before-10 {padding-left: 83.3333333333% } body div#devskin12874096 .after-10 {padding-right: 83.3333333333% } body div#devskin12874096 .col-11 {width: 88.8095238095% } body div#devskin12874096 .before-11 {padding-left: 91.6666666667% } body div#devskin12874096 .after-11 {padding-right: 91.6666666667% } body div#devskin12874096 .col-12 {width: 97.1428571429% } body div#devskin12874096 .before-12 {padding-left: 100% } body div#devskin12874096 .after-12 {padding-right: 100% } body div#devskin12874096 .col-1 .wrap .col-1 {width: 100% } body div#devskin12874096 .col-2 .wrap .col-2 {width: 100% } body div#devskin12874096 .col-2 .wrap .col-1 {width: 39.6551724138%; margin: 0 10.3448275862% } body div#devskin12874096 .col-3 .wrap .col-3 {width: 100% } body div#devskin12874096 .col-3 .wrap .col-2 {width: 62.3655913978%; margin: 0 6.4516129032% } body div#devskin12874096 .col-3 .wrap .col-1 {width: 24.7311827957%; margin: 0 6.4516129032% } body div#devskin12874096 .col-4 .wrap .col-4 {width: 100% } body div#devskin12874096 .col-4 .wrap .col-3 {width: 72.65625%; margin: 0 4.6875% } body div#devskin12874096 .col-4 .wrap .col-2 {width: 45.3125%; margin: 0 4.6875% } body div#devskin12874096 .col-4 .wrap .col-1 {width: 17.96875%; margin: 0 4.6875% } body div#devskin12874096 .col-5 .wrap .col-5 {width: 100% } body div#devskin12874096 .col-5 .wrap .col-4 {width: 78.527607362%; margin: 0 3.6809815951% } body div#devskin12874096 .col-5 .wrap .col-3 {width: 57.0552147239%; margin: 0 3.6809815951% } body div#devskin12874096 .col-5 .wrap .col-2 {width: 35.5828220859%; margin: 0 3.6809815951% } body div#devskin12874096 .col-5 .wrap .col-1 {width: 14.1104294479%; margin: 0 3.6809815951% } body div#devskin12874096 .col-6 .wrap .col-6 {width: 100% } body div#devskin12874096 .col-6 .wrap .col-5 {width: 82.3232323232%; margin: 0 3.0303030303% } body div#devskin12874096 .col-6 .wrap .col-4 {width: 64.6464646465%; margin: 0 3.0303030303% } body div#devskin12874096 .col-6 .wrap .col-3 {width: 46.9696969697%; margin: 0 3.0303030303% } body div#devskin12874096 .col-6 .wrap .col-2 {width: 29.2929292929%; margin: 0 3.0303030303% } body div#devskin12874096 .col-6 .wrap .col-1 {width: 11.6161616162%; margin: 0 3.0303030303% } body div#devskin12874096 .col-7 .wrap .col-7 {width: 100% } body div#devskin12874096 .col-7 .wrap .col-6 {width: 84.9785407725%; margin: 0 2.5751072961% } body div#devskin12874096 .col-7 .wrap .col-5 {width: 69.9570815451%; margin: 0 2.5751072961% } body div#devskin12874096 .col-7 .wrap .col-4 {width: 54.9356223176%; margin: 0 2.5751072961% } body div#devskin12874096 .col-7 .wrap .col-3 {width: 39.9141630901%; margin: 0 2.5751072961% } body div#devskin12874096 .col-7 .wrap .col-2 {width: 24.8927038627%; margin: 0 2.5751072961% } body div#devskin12874096 .col-7 .wrap .col-1 {width: 9.8712446352%; margin: 0 2.5751072961% } body div#devskin12874096 .col-8 .wrap .col-8 {width: 100% } body div#devskin12874096 .col-8 .wrap .col-7 {width: 86.9402985075%; margin: 0 2.2388059701% } body div#devskin12874096 .col-8 .wrap .col-6 {width: 73.8805970149%; margin: 0 2.2388059701% } body div#devskin12874096 .col-8 .wrap .col-5 {width: 60.8208955224%; margin: 0 2.2388059701% } body div#devskin12874096 .col-8 .wrap .col-4 {width: 47.7611940299%; margin: 0 2.2388059701% } body div#devskin12874096 .col-8 .wrap .col-3 {width: 34.7014925373%; margin: 0 2.2388059701% } body div#devskin12874096 .col-8 .wrap .col-2 {width: 21.6417910448%; margin: 0 2.2388059701% } body div#devskin12874096 .col-8 .wrap .col-1 {width: 8.5820895522%; margin: 0 2.2388059701% } body div#devskin12874096 .col-9 .wrap .col-9 {width: 100% } body div#devskin12874096 .col-9 .wrap .col-8 {width: 88.4488448845%; margin: 0 1.9801980198% } body div#devskin12874096 .col-9 .wrap .col-7 {width: 76.897689769%; margin: 0 1.9801980198% } body div#devskin12874096 .col-9 .wrap .col-6 {width: 65.3465346535%; margin: 0 1.9801980198% } body div#devskin12874096 .col-9 .wrap .col-5 {width: 53.795379538%; margin: 0 1.9801980198% } body div#devskin12874096 .col-9 .wrap .col-4 {width: 42.2442244224%; margin: 0 1.9801980198% } body div#devskin12874096 .col-9 .wrap .col-3 {width: 30.6930693069%; margin: 0 1.9801980198% } body div#devskin12874096 .col-9 .wrap .col-2 {width: 19.1419141914%; margin: 0 1.9801980198% } body div#devskin12874096 .col-9 .wrap .col-1 {width: 7.5907590759%; margin: 0 1.9801980198% } body div#devskin12874096 .col-10 .wrap .col-10 {width: 100% } body div#devskin12874096 .col-10 .wrap .col-9 {width: 89.6449704142%; margin: 0 1.775147929% } body div#devskin12874096 .col-10 .wrap .col-8 {width: 79.2899408284%; margin: 0 1.775147929% } body div#devskin12874096 .col-10 .wrap .col-7 {width: 68.9349112426%; margin: 0 1.775147929% } body div#devskin12874096 .col-10 .wrap .col-6 {width: 58.5798816568%; margin: 0 1.775147929% } body div#devskin12874096 .col-10 .wrap .col-5 {width: 48.224852071%; margin: 0 1.775147929% } body div#devskin12874096 .col-10 .wrap .col-4 {width: 37.8698224852%; margin: 0 1.775147929% } body div#devskin12874096 .col-10 .wrap .col-3 {width: 27.5147928994%; margin: 0 1.775147929% } body div#devskin12874096 .col-10 .wrap .col-2 {width: 17.1597633136%; margin: 0 1.775147929% } body div#devskin12874096 .col-10 .wrap .col-1 {width: 6.8047337278%; margin: 0 1.775147929% } body div#devskin12874096 .col-11 .wrap .col-11 {width: 100% } body div#devskin12874096 .col-11 .wrap .col-10 {width: 90.6166219839%; margin: 0 1.6085790885% } body div#devskin12874096 .col-11 .wrap .col-9 {width: 81.2332439678%; margin: 0 1.6085790885% } body div#devskin12874096 .col-11 .wrap .col-8 {width: 71.8498659517%; margin: 0 1.6085790885% } body div#devskin12874096 .col-11 .wrap .col-7 {width: 62.4664879357%; margin: 0 1.6085790885% } body div#devskin12874096 .col-11 .wrap .col-6 {width: 53.0831099196%; margin: 0 1.6085790885% } body div#devskin12874096 .col-11 .wrap .col-5 {width: 43.6997319035%; margin: 0 1.6085790885% } body div#devskin12874096 .col-11 .wrap .col-4 {width: 34.3163538874%; margin: 0 1.6085790885% } body div#devskin12874096 .col-11 .wrap .col-3 {width: 24.9329758713%; margin: 0 1.6085790885% } body div#devskin12874096 .col-11 .wrap .col-2 {width: 15.5495978552%; margin: 0 1.6085790885% } body div#devskin12874096 .col-11 .wrap .col-1 {width: 6.1662198391%; margin: 0 1.6085790885% } body div#devskin12874096 .col-12 .wrap .col-12 {width: 100% } body div#devskin12874096 .col-12 .wrap .col-11 {width: 91.4215686275%; margin: 0 1.4705882353% } body div#devskin12874096 .col-12 .wrap .col-10 {width: 82.8431372549%; margin: 0 1.4705882353% } body div#devskin12874096 .col-12 .wrap .col-9 {width: 74.2647058824%; margin: 0 1.4705882353% } body div#devskin12874096 .col-12 .wrap .col-8 {width: 65.6862745098%; margin: 0 1.4705882353% } body div#devskin12874096 .col-12 .wrap .col-7 {width: 57.1078431373%; margin: 0 1.4705882353% } body div#devskin12874096 .col-12 .wrap .col-6 {width: 48.5294117647%; margin: 0 1.4705882353% } body div#devskin12874096 .col-12 .wrap .col-5 {width: 39.9509803922%; margin: 0 1.4705882353% } body div#devskin12874096 .col-12 .wrap .col-4 {width: 31.3725490196%; margin: 0 1.4705882353% } body div#devskin12874096 .col-12 .wrap .col-3 {width: 22.7941176471%; margin: 0 1.4705882353% } body div#devskin12874096 .col-12 .wrap .col-2 {width: 14.2156862745%; margin: 0 1.4705882353% } body div#devskin12874096 .col-12 .wrap .col-1 {width: 5.637254902%; margin: 0 1.4705882353% } body div#devskin12874096 .col-2 .wrap .before-1 {padding-left: 60.3448275862% } body div#devskin12874096 .col-3 .wrap .before-2 {padding-left: 75.2688172043% } body div#devskin12874096 .col-3 .wrap .before-1 {padding-left: 37.6344086022% } body div#devskin12874096 .col-4 .wrap .before-3 {padding-left: 82.03125% } body div#devskin12874096 .col-4 .wrap .before-2 {padding-left: 54.6875% } body div#devskin12874096 .col-4 .wrap .before-1 {padding-left: 27.34375% } body div#devskin12874096 .col-5 .wrap .before-4 {padding-left: 85.8895705521% } body div#devskin12874096 .col-5 .wrap .before-3 {padding-left: 64.4171779141% } body div#devskin12874096 .col-5 .wrap .before-2 {padding-left: 42.9447852761% } body div#devskin12874096 .col-5 .wrap .before-1 {padding-left: 21.472392638% } body div#devskin12874096 .col-6 .wrap .before-5 {padding-left: 88.3838383838% } body div#devskin12874096 .col-6 .wrap .before-4 {padding-left: 70.7070707071% } body div#devskin12874096 .col-6 .wrap .before-3 {padding-left: 53.0303030303% } body div#devskin12874096 .col-6 .wrap .before-2 {padding-left: 35.3535353535% } body div#devskin12874096 .col-6 .wrap .before-1 {padding-left: 17.6767676768% } body div#devskin12874096 .col-7 .wrap .before-6 {padding-left: 90.1287553648% } body div#devskin12874096 .col-7 .wrap .before-5 {padding-left: 75.1072961373% } body div#devskin12874096 .col-7 .wrap .before-4 {padding-left: 60.0858369099% } body div#devskin12874096 .col-7 .wrap .before-3 {padding-left: 45.0643776824% } body div#devskin12874096 .col-7 .wrap .before-2 {padding-left: 30.0429184549% } body div#devskin12874096 .col-7 .wrap .before-1 {padding-left: 15.0214592275% } body div#devskin12874096 .col-8 .wrap .before-7 {padding-left: 91.4179104478% } body div#devskin12874096 .col-8 .wrap .before-6 {padding-left: 78.3582089552% } body div#devskin12874096 .col-8 .wrap .before-5 {padding-left: 65.2985074627% } body div#devskin12874096 .col-8 .wrap .before-4 {padding-left: 52.2388059701% } body div#devskin12874096 .col-8 .wrap .before-3 {padding-left: 39.1791044776% } body div#devskin12874096 .col-8 .wrap .before-2 {padding-left: 26.1194029851% } body div#devskin12874096 .col-8 .wrap .before-1 {padding-left: 13.0597014925% } body div#devskin12874096 .col-9 .wrap .before-8 {padding-left: 92.4092409241% } body div#devskin12874096 .col-9 .wrap .before-7 {padding-left: 80.8580858086% } body div#devskin12874096 .col-9 .wrap .before-6 {padding-left: 69.3069306931% } body div#devskin12874096 .col-9 .wrap .before-5 {padding-left: 57.7557755776% } body div#devskin12874096 .col-9 .wrap .before-4 {padding-left: 46.204620462% } body div#devskin12874096 .col-9 .wrap .before-3 {padding-left: 34.6534653465% } body div#devskin12874096 .col-9 .wrap .before-2 {padding-left: 23.102310231% } body div#devskin12874096 .col-9 .wrap .before-1 {padding-left: 11.5511551155% } body div#devskin12874096 .col-10 .wrap .before-9 {padding-left: 93.1952662722% } body div#devskin12874096 .col-10 .wrap .before-8 {padding-left: 82.8402366864% } body div#devskin12874096 .col-10 .wrap .before-7 {padding-left: 72.4852071006% } body div#devskin12874096 .col-10 .wrap .before-6 {padding-left: 62.1301775148% } body div#devskin12874096 .col-10 .wrap .before-5 {padding-left: 51.775147929% } body div#devskin12874096 .col-10 .wrap .before-4 {padding-left: 41.4201183432% } body div#devskin12874096 .col-10 .wrap .before-3 {padding-left: 31.0650887574% } body div#devskin12874096 .col-10 .wrap .before-2 {padding-left: 20.7100591716% } body div#devskin12874096 .col-10 .wrap .before-1 {padding-left: 10.3550295858% } body div#devskin12874096 .col-11 .wrap .before-10 {padding-left: 93.8337801609% } body div#devskin12874096 .col-11 .wrap .before-9 {padding-left: 84.4504021448% } body div#devskin12874096 .col-11 .wrap .before-8 {padding-left: 75.0670241287% } body div#devskin12874096 .col-11 .wrap .before-7 {padding-left: 65.6836461126% } body div#devskin12874096 .col-11 .wrap .before-6 {padding-left: 56.3002680965% } body div#devskin12874096 .col-11 .wrap .before-5 {padding-left: 46.9168900804% } body div#devskin12874096 .col-11 .wrap .before-4 {padding-left: 37.5335120643% } body div#devskin12874096 .col-11 .wrap .before-3 {padding-left: 28.1501340483% } body div#devskin12874096 .col-11 .wrap .before-2 {padding-left: 18.7667560322% } body div#devskin12874096 .col-11 .wrap .before-1 {padding-left: 9.3833780161% } body div#devskin12874096 .col-12 .wrap .before-11 {padding-left: 94.362745098% } body div#devskin12874096 .col-12 .wrap .before-10 {padding-left: 85.7843137255% } body div#devskin12874096 .col-12 .wrap .before-9 {padding-left: 77.2058823529% } body div#devskin12874096 .col-12 .wrap .before-8 {padding-left: 68.6274509804% } body div#devskin12874096 .col-12 .wrap .before-7 {padding-left: 60.0490196078% } body div#devskin12874096 .col-12 .wrap .before-6 {padding-left: 51.4705882353% } body div#devskin12874096 .col-12 .wrap .before-5 {padding-left: 42.8921568627% } body div#devskin12874096 .col-12 .wrap .before-4 {padding-left: 34.3137254902% } body div#devskin12874096 .col-12 .wrap .before-3 {padding-left: 25.7352941176% } body div#devskin12874096 .col-12 .wrap .before-2 {padding-left: 17.1568627451% } body div#devskin12874096 .col-12 .wrap .before-1 {padding-left: 8.5784313725% } body div#devskin12874096 .col-2 .wrap .after-1 {padding-right: 60.3448275862% } body div#devskin12874096 .col-3 .wrap .after-2 {padding-right: 75.2688172043% } body div#devskin12874096 .col-3 .wrap .after-1 {padding-right: 37.6344086022% } body div#devskin12874096 .col-4 .wrap .after-3 {padding-right: 82.03125% } body div#devskin12874096 .col-4 .wrap .after-2 {padding-right: 54.6875% } body div#devskin12874096 .col-4 .wrap .after-1 {padding-right: 27.34375% } body div#devskin12874096 .col-5 .wrap .after-4 {padding-right: 85.8895705521% } body div#devskin12874096 .col-5 .wrap .after-3 {padding-right: 64.4171779141% } body div#devskin12874096 .col-5 .wrap .after-2 {padding-right: 42.9447852761% } body div#devskin12874096 .col-5 .wrap .after-1 {padding-right: 21.472392638% } body div#devskin12874096 .col-6 .wrap .after-5 {padding-right: 88.3838383838% } body div#devskin12874096 .col-6 .wrap .after-4 {padding-right: 70.7070707071% } body div#devskin12874096 .col-6 .wrap .after-3 {padding-right: 53.0303030303% } body div#devskin12874096 .col-6 .wrap .after-2 {padding-right: 35.3535353535% } body div#devskin12874096 .col-6 .wrap .after-1 {padding-right: 17.6767676768% } body div#devskin12874096 .col-7 .wrap .after-6 {padding-right: 90.1287553648% } body div#devskin12874096 .col-7 .wrap .after-5 {padding-right: 75.1072961373% } body div#devskin12874096 .col-7 .wrap .after-4 {padding-right: 60.0858369099% } body div#devskin12874096 .col-7 .wrap .after-3 {padding-right: 45.0643776824% } body div#devskin12874096 .col-7 .wrap .after-2 {padding-right: 30.0429184549% } body div#devskin12874096 .col-7 .wrap .after-1 {padding-right: 15.0214592275% } body div#devskin12874096 .col-8 .wrap .after-7 {padding-right: 91.4179104478% } body div#devskin12874096 .col-8 .wrap .after-6 {padding-right: 78.3582089552% } body div#devskin12874096 .col-8 .wrap .after-5 {padding-right: 65.2985074627% } body div#devskin12874096 .col-8 .wrap .after-4 {padding-right: 52.2388059701% } body div#devskin12874096 .col-8 .wrap .after-3 {padding-right: 39.1791044776% } body div#devskin12874096 .col-8 .wrap .after-2 {padding-right: 26.1194029851% } body div#devskin12874096 .col-8 .wrap .after-1 {padding-right: 13.0597014925% } body div#devskin12874096 .col-9 .wrap .after-8 {padding-right: 92.4092409241% } body div#devskin12874096 .col-9 .wrap .after-7 {padding-right: 80.8580858086% } body div#devskin12874096 .col-9 .wrap .after-6 {padding-right: 69.3069306931% } body div#devskin12874096 .col-9 .wrap .after-5 {padding-right: 57.7557755776% } body div#devskin12874096 .col-9 .wrap .after-4 {padding-right: 46.204620462% } body div#devskin12874096 .col-9 .wrap .after-3 {padding-right: 34.6534653465% } body div#devskin12874096 .col-9 .wrap .after-2 {padding-right: 23.102310231% } body div#devskin12874096 .col-9 .wrap .after-1 {padding-right: 11.5511551155% } body div#devskin12874096 .col-10 .wrap .after-9 {padding-right: 93.1952662722% } body div#devskin12874096 .col-10 .wrap .after-8 {padding-right: 82.8402366864% } body div#devskin12874096 .col-10 .wrap .after-7 {padding-right: 72.4852071006% } body div#devskin12874096 .col-10 .wrap .after-6 {padding-right: 62.1301775148% } body div#devskin12874096 .col-10 .wrap .after-5 {padding-right: 51.775147929% } body div#devskin12874096 .col-10 .wrap .after-4 {padding-right: 41.4201183432% } body div#devskin12874096 .col-10 .wrap .after-3 {padding-right: 31.0650887574% } body div#devskin12874096 .col-10 .wrap .after-2 {padding-right: 20.7100591716% } body div#devskin12874096 .col-10 .wrap .after-1 {padding-right: 10.3550295858% } body div#devskin12874096 .col-11 .wrap .after-10 {padding-right: 93.8337801609% } body div#devskin12874096 .col-11 .wrap .after-9 {padding-right: 84.4504021448% } body div#devskin12874096 .col-11 .wrap .after-8 {padding-right: 75.0670241287% } body div#devskin12874096 .col-11 .wrap .after-7 {padding-right: 65.6836461126% } body div#devskin12874096 .col-11 .wrap .after-6 {padding-right: 56.3002680965% } body div#devskin12874096 .col-11 .wrap .after-5 {padding-right: 46.9168900804% } body div#devskin12874096 .col-11 .wrap .after-4 {padding-right: 37.5335120643% } body div#devskin12874096 .col-11 .wrap .after-3 {padding-right: 28.1501340483% } body div#devskin12874096 .col-11 .wrap .after-2 {padding-right: 18.7667560322% } body div#devskin12874096 .col-11 .wrap .after-1 {padding-right: 9.3833780161% } body div#devskin12874096 .col-12 .wrap .after-11 {padding-right: 94.362745098% } body div#devskin12874096 .col-12 .wrap .after-10 {padding-right: 85.7843137255% } body div#devskin12874096 .col-12 .wrap .after-9 {padding-right: 77.2058823529% } body div#devskin12874096 .col-12 .wrap .after-8 {padding-right: 68.6274509804% } body div#devskin12874096 .col-12 .wrap .after-7 {padding-right: 60.0490196078% } body div#devskin12874096 .col-12 .wrap .after-6 {padding-right: 51.4705882353% } body div#devskin12874096 .col-12 .wrap .after-5 {padding-right: 42.8921568627% } body div#devskin12874096 .col-12 .wrap .after-4 {padding-right: 34.3137254902% } body div#devskin12874096 .col-12 .wrap .after-3 {padding-right: 25.7352941176% } body div#devskin12874096 .col-12 .wrap .after-2 {padding-right: 17.1568627451% } body div#devskin12874096 .col-12 .wrap .after-1 {padding-right: 8.5784313725% } body div#devskin12874096 .col-1 iframe {height: 32px } body div#devskin12874096 .col-2 iframe {height: 81px } body div#devskin12874096 .col-3 iframe {height: 130px } body div#devskin12874096 .col-4 iframe {height: 180px } body div#devskin12874096 .col-5 iframe {height: 229px } body div#devskin12874096 .col-6 iframe {height: 278px } body div#devskin12874096 .col-7 iframe {height: 327px } body div#devskin12874096 .col-8 iframe {height: 376px } body div#devskin12874096 .col-9 iframe {height: 426px } body div#devskin12874096 .col-10 iframe {height: 475px } body div#devskin12874096 .col-11 iframe {height: 524px } body div#devskin12874096 .col-12 iframe {height: 573px } body div#devskin12874096 .clear {clear: both } body div#devskin12874096 .clear:before, body div#devskin12874096 .clear:after {content: ""; display: table } body div#devskin12874096 .clear:after {clear: both } body div#devskin12874096 iframe.daembed, body div#devskin12874096 iframe {display: block; width: 100% } body div#devskin12874096 .col-2 iframe {height: 084px } body div#devskin12874096 .col-3 iframe {height: 135px } body div#devskin12874096 .col-4 iframe {height: 186px } body div#devskin12874096 .col-5 iframe {height: 236px } body div#devskin12874096 .col-6 iframe {height: 287px } body div#devskin12874096 .col-7 iframe {height: 338px } body div#devskin12874096 .col-8 iframe {height: 388px } body div#devskin12874096 .col-9 iframe {height: 439px } body div#devskin12874096 .col-10 iframe {height: 489px } body div#devskin12874096 .col-11 iframe {height: 540px } body div#devskin12874096 .col-12 iframe {height: 591px } @media only screen and (max-width: 767px) {body div#devskin12874096 .wrap div[class^='col'] {float: none; width: auto; display: block; margin: 0; padding: 0 } } body div#devskin12874096 .color-white {color: #fff } body div#devskin12874096 .color-primary-white {color: #F2F2F2 } body div#devskin12874096 .color-black {color: #000 } body div#devskin12874096 .color-primary-black {color: #181A1B } body div#devskin12874096 .color-secondary-black {color: #242626 } body div#devskin12874096 .color-light-gray {color: #7D8080 } body div#devskin12874096 .color-dark-gray {color: #4F5254 } body div#devskin12874096 .color-teal-1 {color: #D4F5F2 } body div#devskin12874096 .color-teal-2 {color: #40CfC7 } body div#devskin12874096 .color-teal-3 {color: #34807A } body div#devskin12874096 .color-teal-4 {color: #1F3833 } body div#devskin12874096 .color-primary-green {color: #05CC47 } body div#devskin12874096 .color-green-1 {color: #D4F5DE } body div#devskin12874096 .color-green-2 {color: #4DC47D } body div#devskin12874096 .color-green-3 {color: #42794F } body div#devskin12874096 .color-green-4 {color: #1F3626 } body div#devskin12874096 .social-buttons {cursor: pointer; width: 360px; margin: auto; overflow: hidden; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; z-index: 9005 } body div#devskin12874096 .social-buttons .social {float: left; width: 120px; height: 60px; position: relative; line-height: 60px; text-align: center; overflow: hidden; cursor: pointer; display: inline-block; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out } body div#devskin12874096 .social-buttons .social * {line-height: 0 !important; opacity: 0; -webkit-transition: opacity 0.15s ease-out; transition: opacity 0.15s ease-out } body div#devskin12874096 .social-buttons .social iframe {padding: 0; width: 120px !important; position: absolute !important; height: 60px !important; display: inline-block !important } body div#devskin12874096 .social-buttons .social.fb iframe {top: 10px !important; left: 0 !important } body div#devskin12874096 .social-buttons .social.twitter iframe {top: 20px !important; left: 16px !important } body div#devskin12874096 .social-buttons .social.gp iframe {top: 18px !important; left: 32px !important } body div#devskin12874096 .social-buttons .social .slide {text-indent: -9999em; height: 60px; width: inherit; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; z-index: 2; text-align: center; opacity: 1; -webkit-transition: -webkit-transform 0.15s ease-out; transition: -webkit-transform 0.15s ease-out; transition: transform 0.15s ease-out; transition: transform 0.15s ease-out, -webkit-transform 0.15s ease-out } body div#devskin12874096 .social-buttons .social .slide:before {content: ''; position: absolute; top: 50%; left: 50%; margin: -8px 0 0 -8px; width: 16px; height: 16px; background: transparent url("https://www.da-files.com/contests/2016/blizzard-overwatch/ui-icons_social.svg?v=41662816116563") 50% 50%/50px auto no-repeat; z-index: -1 } body div#devskin12874096 .social-buttons .social.fb .slide:before {background-position: 50% 100% } body div#devskin12874096 .social-buttons .social.twitter .slide:before {background-position: 0% 100% } body div#devskin12874096 .social-buttons .social.gp .slide:before {background-position: 100% 100% } body div#devskin12874096 .social-buttons .social:hover .slide {-webkit-transform: translate(0, -100%); transform: translate(0, -100%); opacity: 0.5 } body div#devskin12874096 .social-buttons .social:hover * {opacity: 1 } .slide-core-content img[src*='bg-peek.jpg'], .slide-core-content img[src*='bg-peek-buy-now.jpg'] {display: block !important; width: 100% !important } .peek-container.taken-over .peek-slides .right-column {margin-top: 0 !important } .get-in-gallery .saved-faved-corner:after {-webkit-transform: skew(14.25deg); transform: skew(14.25deg) } .torpedo-container .thumb .artist .username {color: #fff !important; font-style: normal !important } .torpedo-container .thumb .artist .username:hover {text-decoration: none !important } body div#devskin12874096 div.main-gallery {background: #CBCEDD url("https://www.da-files.com/contests/2016/blizzard-overwatch/gallery-bg.jpg?v=41662816116563") 50% 0/cover no-repeat; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; -webkit-transform: scale(1); transform: scale(1); overflow: hidden; opacity: 1 } body div#devskin12874096 div.main-gallery img.kid {position: absolute; bottom: 0; left: 25%; z-index: 1337 } @media only screen and (max-width: 767px) {body div#devskin12874096 div.main-gallery img.kid {width: 20%; left: 15% } } @media only screen and (max-width: 1360px) {body div#devskin12874096 div.main-gallery img.kid {bottom: -20px } } @media only screen and (max-width: 1280px) {body div#devskin12874096 div.main-gallery img.kid {bottom: -20px } } body div#devskin12874096 div.main-gallery .scene {-webkit-perspective: 300px; perspective: 300px; position: absolute; top: 0; right: 0; bottom: 0; left: 0 } body div#devskin12874096 div.main-gallery .rail {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/gallery-rail.jpg?v=41662816116563") 50% 0/100% 100% no-repeat; min-height: 224px; box-sizing: border-box; position: absolute; bottom: 0; left: 0; right: 0; padding-bottom: 15%; z-index: 1 } body div#devskin12874096 div.main-gallery .rail:before {content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 30px; background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/gallery-rail-bottom.jpg?v=41662816116563") 50% 0/100% 100%; z-index: 0 } @media only screen and (max-width: 767px) {body div#devskin12874096 div.main-gallery .rail {min-height: 0 } body div#devskin12874096 div.main-gallery .rail:before {height: 10px } } body div#devskin12874096 div.main-gallery .art-screen {margin: auto; border-radius: 7px; box-shadow: 0 0 80px #9ca5d0; position: absolute; bottom: 0; left: 0; right: 0; z-index: 0; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: rotateX(6deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.95, 1) translate(0, -50%); transform: rotateX(6deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 0.95, 1) translate(0, -50%); width: 63% } @media only screen and (max-width: 1360px) {body div#devskin12874096 div.main-gallery .art-screen {width: 66%; bottom: 0 } } @media only screen and (max-width: 1280px) {body div#devskin12874096 div.main-gallery .art-screen {bottom: 20px } } @media only screen and (max-width: 1024px) {body div#devskin12874096 div.main-gallery .art-screen {bottom: 30px; width: 80% } } @media only screen and (min-device-width: 320px) and (max-device-width: 767px) {body div#devskin12874096 div.main-gallery .art-screen {bottom: 0; width: 60% } } body div#devskin12874096 div.main-gallery .art-screen .screen {border-radius: 7px; box-shadow: inset 0 0 60px rgba(255, 255, 255, 0.6); position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden } body div#devskin12874096 div.main-gallery .art-screen .screen .pattern {position: absolute; box-shadow: inset 0 0 60px rgba(255, 255, 255, 0.6); top: 0; right: 0; bottom: 0; left: 0; background-blend-mode: overlay; background: rgba(109, 106, 204, 0.8) url("https://www.da-files.com/contests/2016/blizzard-overwatch/gallery-screen-pattern.gif?v=41662816116563") 0 -1px repeat; opacity: 0.4; overflow: hidden } body div#devskin12874096 div.main-gallery .art-screen .platform {position: relative; width: 110%; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); padding-bottom: 7%; background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/gallery-platform.png?v=41662816116563") 50% 0/100% 100% no-repeat; z-index: 0 } body div#devskin12874096 div.main-gallery .thumbs {position: relative; top: 0; right: 0; bottom: 0; left: 0 } body div#devskin12874096 div.main-gallery .thumb {margin: 0.857%; float: left; position: relative; text-align: center } body div#devskin12874096 div.main-gallery .thumb a {display: block; position: relative; -webkit-transition: -webkit-transform 0.15s ease-in-out !important; transition: -webkit-transform 0.15s ease-in-out !important; transition: transform 0.15s ease-in-out !important; transition: transform 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out !important; box-shadow: inset 0 0 60px rgba(255, 255, 255, 0.6) } body div#devskin12874096 div.main-gallery .thumb a:before {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(109, 106, 204, 0.8) url("https://www.da-files.com/contests/2016/blizzard-overwatch/gallery-screen-pattern.gif?v=41662816116563") 0 -1px repeat; opacity: 0.15; background-blend-mode: overlay; -webkit-transition: background 0.15s ease-in-out; transition: background 0.15s ease-in-out } body div#devskin12874096 div.main-gallery .thumb a:after {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #6d6acc; opacity: 0; mix-blend-mode: overlay; -webkit-transition: opacity 0.1s ease-in-out; transition: opacity 0.1s ease-in-out } body div#devskin12874096 div.main-gallery .thumb a:hover {-webkit-transform: scale(1.025); transform: scale(1.025) } body div#devskin12874096 div.main-gallery .thumb a:hover:after {opacity: 1 } body div#devskin12874096 div.main-gallery .thumb img {width: 100%; display: block; vertical-align: bottom; box-shadow: 0 6px 3px rgba(40, 53, 79, 0.3); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out } body div#devskin12874096 div.main-gallery .thumb:nth-of-type(1) {width: 18.380% } body div#devskin12874096 div.main-gallery .thumb:nth-of-type(2) {width: 18.380% } body div#devskin12874096 div.main-gallery .thumb:nth-of-type(3) {width: 18.476% } body div#devskin12874096 div.main-gallery .thumb:nth-of-type(4) {width: 8.1904% } body div#devskin12874096 div.main-gallery .thumb:nth-of-type(5) {width: 8.1904% } body div#devskin12874096 div.main-gallery .thumb:nth-of-type(6) {width: 17.904% } body div#devskin12874096 div.main-gallery .thumb:nth-of-type(7) {width: 11.238%; clear: left } body div#devskin12874096 div.main-gallery .thumb:nth-of-type(8) {width: 7.5238% } body div#devskin12874096 div.main-gallery .thumb:nth-of-type(9) {width: 8.7619% } body div#devskin12874096 div.main-gallery .thumb:nth-of-type(10) {width: 8.6666% } body div#devskin12874096 div.main-gallery .thumb:nth-of-type(11) {width: 11.238% } body div#devskin12874096 div.main-gallery .thumb:nth-of-type(12) {width: 7.5238% } body div#devskin12874096 div.main-gallery .thumb:nth-of-type(13) {width: 16.857% } body div#devskin12874096 div.main-gallery .thumb:nth-of-type(14) {width: 14.285% } body div#devskin12874096 div.main-gallery .thumb:nth-of-type(15) {width: 7.333%; clear: left } body div#devskin12874096 div.main-gallery .thumb:nth-of-type(16) {width: 16.476% } body div#devskin12874096 div.main-gallery .thumb:nth-of-type(17) {width: 7.333% } body div#devskin12874096 div.main-gallery .thumb:nth-of-type(18) {width: 7.333% } body div#devskin12874096 div.main-gallery .thumb:nth-of-type(19) {width: 16.476% } body div#devskin12874096 div.main-gallery .thumb:nth-of-type(20) {width: 16.476% } body div#devskin12874096 div.main-gallery .thumb:nth-of-type(21) {width: 16.380% } body div#devskin12874096 input.main-gallery+label[for='main-gallery'] {text-indent: -9999em; top: 0; left: 50%; margin: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 100%; position: absolute; background: #4d5055; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; width: 10%; padding: 0 0 10%; height: 10%; box-sizing: border-box; z-index: 4 } body div#devskin12874096 input.main-gallery+label[for='main-gallery']:before {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0 } body div#devskin12874096 input.main-gallery+label[for='main-gallery']:after {content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } body div#devskin12874096 input.main-gallery:checked+label[for='main-gallery']:after {top: 50%; left: 50%; background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/text-show-all.svg") 50% 50%/85% auto no-repeat; border-radius: 7px; opacity: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: opacity 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; transition: opacity 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; transition: transform 0.15s ease-in-out, opacity 0.15s ease-in-out; transition: transform 0.15s ease-in-out, opacity 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; -webkit-transform: translate(-50%, -50%) scale(0) skew(14.25deg); transform: translate(-50%, -50%) scale(0) skew(14.25deg) } body div#devskin12874096 input.main-gallery:not(:checked)+label[for='main-gallery'] {height: 60px; border-radius: 7px; box-sizing: border-box; padding: 10px 50px; width: 210px; -webkit-transform: skew(-14.25deg) translate(-50%, -50%); transform: skew(-14.25deg) translate(-50%, -50%) } body div#devskin12874096 input.main-gallery:not(:checked)+label[for='main-gallery']:hover {background: #595d62; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3) } body div#devskin12874096 input.main-gallery:not(:checked)+label[for='main-gallery']:after {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/text-show-all.svg") 50% 50%/65% auto no-repeat; height: 60px; border-radius: 7px; opacity: 1; -webkit-transition: opacity 0.3s ease-in-out 0.3s, -webkit-transform 0.3s ease-in-out 0.3s; transition: opacity 0.3s ease-in-out 0.3s, -webkit-transform 0.3s ease-in-out 0.3s; transition: transform 0.3s ease-in-out 0.3s, opacity 0.3s ease-in-out 0.3s; transition: transform 0.3s ease-in-out 0.3s, opacity 0.3s ease-in-out 0.3s, -webkit-transform 0.3s ease-in-out 0.3s; -webkit-transform: translate(-50%, -50%) scale(1) skew(14.25deg); transform: translate(-50%, -50%) scale(1) skew(14.25deg) } body div#devskin12874096 input.main-gallery:checked+label[for='main-gallery'] {cursor: default } body div#devskin12874096 input.main-gallery:checked+label[for='main-gallery']:before {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/logo-overwatch-mark.png") 50% 50%/90% auto no-repeat; border-radius: 100%; opacity: 1; -webkit-transition: opacity 0.15s ease-in-out 0.3s, -webkit-transform 0.15s ease-in-out 0.3s; transition: opacity 0.15s ease-in-out 0.3s, -webkit-transform 0.15s ease-in-out 0.3s; transition: transform 0.15s ease-in-out 0.3s, opacity 0.15s ease-in-out 0.3s; transition: transform 0.15s ease-in-out 0.3s, opacity 0.15s ease-in-out 0.3s, -webkit-transform 0.15s ease-in-out 0.3s; -webkit-transform: scale(1) translate(0, 0); transform: scale(1) translate(0, 0) } body div#devskin12874096 input.main-gallery:not(:checked)+label[for='main-gallery']:before {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/logo-overwatch-mark.png") 50% 50%/90% auto no-repeat; border-radius: 100%; opacity: 0; -webkit-transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; -webkit-transform: scale(0) translate(0, 0); transform: scale(0) translate(0, 0) } body div#devskin12874096 input.main-gallery:checked+label ~ .heroes .main-gallery {-webkit-transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; -webkit-transform: scale(1); transform: scale(1); opacity: 1; z-index: 4 } @media only screen and (max-width: 1360px) {body div#devskin12874096 input.main-gallery:checked+label ~ .heroes ~ .title {width: 30% } } @media only screen and (max-width: 1280px) {body div#devskin12874096 input.main-gallery:checked+label ~ .heroes ~ .title {-webkit-transform: translate(-50%, 30px); transform: translate(-50%, 30px); width: 35% } } @media only screen and (max-width: 1024px) {body div#devskin12874096 input.main-gallery:checked+label ~ .heroes ~ .title {-webkit-transform: translate(-50%, 50px); transform: translate(-50%, 50px); width: 40% } } @media only screen and (min-device-width: 320px) and (max-device-width: 767px) {body div#devskin12874096 input.main-gallery:checked+label ~ .heroes ~ .title {-webkit-transform: translate(-50%, 30px); transform: translate(-50%, 30px); width: 40% } } body div#devskin12874096 input:not(.main-gallery):checked+label ~ .heroes .main-gallery {-webkit-transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; -webkit-transform: scale(0.97); transform: scale(0.97); opacity: 0; z-index: 0 } body div#devskin12874096 .header {background: #000; position: relative; margin-bottom: 50%; min-height: 746px; height: 92.7vh; box-sizing: border-box } @media only screen and (max-width: 767px) {body div#devskin12874096 .header {margin: 0; padding: 0; min-height: 0; height: auto } } body div#devskin12874096 .header .title {position: absolute; width: 29.16%; top: -100%; left: 50%; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; -webkit-transform: translate(-50%, 30px); transform: translate(-50%, 30px); z-index: 2 } body div#devskin12874096 .header .title img {max-width: 100%; vertical-align: bottom; display: inline-block } @media only screen and (max-width: 767px) {body div#devskin12874096 .header .title {top: 0 } } body div#devskin12874096 .header .logo-overwatch-mark {width: 9.5%; background: #4d5055; bottom: 0; left: 50%; -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); border-radius: 100%; position: relative; position: absolute; z-index: 2 } body div#devskin12874096 .header .logo-overwatch-mark:before {display: block; content: " "; width: 100%; padding-top: 100% } body div#devskin12874096 .header .logo-overwatch-mark>.content {position: absolute; top: 0; left: 0; right: 0; bottom: 0 } body div#devskin12874096 .header .logo-overwatch-mark img {position: absolute; width: 85%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } @media only screen and (max-width: 767px) {body div#devskin12874096 .header .logo-overwatch-mark {bottom: initial; top: 0; display: none; background: none } } body div#devskin12874096 .characters {width: 100%; height: 100%; position: absolute; top: 0; left: 0; margin: auto; box-sizing: border-box; z-index: 1 } @media only screen and (max-width: 767px) {body div#devskin12874096 .characters {position: relative; height: auto } } body div#devskin12874096 .characters>.controls {padding: 0; position: relative; height: inherit; margin: auto; text-align: center; -webkit-transform: translate(0, 100%); transform: translate(0, 100%); z-index: 2 } @media only screen and (max-width: 767px) {body div#devskin12874096 .characters>.controls {-webkit-transform: none !important; transform: none !important } } body div#devskin12874096 .characters>.controls:before {content: ''; position: absolute; top: 0; right: 0; bottom: -20%; left: 0; background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/bg-dark-pattern.jpg") 50% 0/cover no-repeat; box-shadow: inset 0 10px 0 #4d5055; z-index: -1 } body div#devskin12874096 .characters>.controls:after {content: ''; position: absolute; background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/text-21.svg?v=41662816116563") 5% 100%/auto 99% no-repeat; opacity: 0.35; top: 0; right: 0; bottom: 0; left: 0; z-index: -1 } @media only screen and (max-width: 767px) {body div#devskin12874096 .characters>.controls:after {background-size: auto 50% } } body div#devskin12874096 div.avatar {position: relative; float: left; width: 60px; height: 60px; -webkit-transform: scale(1.04, 0.94); transform: scale(1.04, 0.94) } body div#devskin12874096 div.avatar i.outline {display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/ui-avatar-outline.png?v=41662816116563") 50% 50%/contain no-repeat; z-index: 0 } body div#devskin12874096 div.avatar .hex {width: 45px; padding-bottom: 52px; list-style-type: none; float: left; overflow: hidden; visibility: hidden; outline: 1px solid transparent; -webkit-transform: rotate(-60deg) skew(0, 30deg); transform: rotate(-60deg) skew(0, 30deg); position: relative; left: 8px; top: 4px } body div#devskin12874096 div.avatar .hex>a {display: block; width: 100%; height: 100%; text-align: center; overflow: hidden; -webkit-transform: skew(0, -30deg) rotate(60deg); transform: skew(0, -30deg) rotate(60deg) } body div#devskin12874096 div.avatar .hex>a img {left: -100%; right: -100%; width: auto; height: 100%; margin: 0 auto } body div#devskin12874096 div.avatar .hex * {position: absolute; visibility: visible; outline: 1px solid transparent } body div#devskin12874096 input {display: none; position: absolute } body div#devskin12874096 input+label {cursor: pointer; position: relative; display: inline-block; box-sizing: border-box; z-index: 1; width: 7.0416%; margin: 8% 0.25% 0 0; padding-bottom: 7.8433663364% } @media only screen and (max-width: 767px) {body div#devskin12874096 input+label {display: none } } body div#devskin12874096 input+label[for='mercy'] {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-mercy.png?v=41662816116563") 50% 100%/100% auto no-repeat } body div#devskin12874096 input+label[for='mercy']:before {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-mercy.png?v=41662816116563") 50% 0/100% auto no-repeat } body div#devskin12874096 input+label[for='genji'] {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-genji.png?v=41662816116563") 50% 100%/100% auto no-repeat } body div#devskin12874096 input+label[for='genji']:before {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-genji.png?v=41662816116563") 50% 0/100% auto no-repeat } body div#devskin12874096 input+label[for='hanzo'] {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-hanzo.png?v=41662816116563") 50% 100%/100% auto no-repeat } body div#devskin12874096 input+label[for='hanzo']:before {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-hanzo.png?v=41662816116563") 50% 0/100% auto no-repeat } body div#devskin12874096 input+label[for='symmetra'] {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-symmetra.png?v=41662816116563") 50% 100%/100% auto no-repeat } body div#devskin12874096 input+label[for='symmetra']:before {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-symmetra.png?v=41662816116563") 50% 0/100% auto no-repeat } body div#devskin12874096 input+label[for='reaper'] {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-reaper.png?v=41662816116563") 50% 100%/100% auto no-repeat } body div#devskin12874096 input+label[for='reaper']:before {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-reaper.png?v=41662816116563") 50% 0/100% auto no-repeat } body div#devskin12874096 input+label[for='pharah'] {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-pharah.png?v=41662816116563") 50% 100%/100% auto no-repeat } body div#devskin12874096 input+label[for='pharah']:before {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-pharah.png?v=41662816116563") 50% 0/100% auto no-repeat } body div#devskin12874096 input+label[for='roadhog'] {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-roadhog.png?v=41662816116563") 50% 100%/100% auto no-repeat } body div#devskin12874096 input+label[for='roadhog']:before {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-roadhog.png?v=41662816116563") 50% 0/100% auto no-repeat } body div#devskin12874096 input+label[for='widowmaker'] {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-widowmaker.png?v=41662816116563") 50% 100%/100% auto no-repeat } body div#devskin12874096 input+label[for='widowmaker']:before {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-widowmaker.png?v=41662816116563") 50% 0/100% auto no-repeat } body div#devskin12874096 input+label[for='mccree'] {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-mccree.png?v=41662816116563") 50% 100%/100% auto no-repeat } body div#devskin12874096 input+label[for='mccree']:before {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-mccree.png?v=41662816116563") 50% 0/100% auto no-repeat } body div#devskin12874096 input+label[for='tracer'] {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-tracer.png?v=41662816116563") 50% 100%/100% auto no-repeat } body div#devskin12874096 input+label[for='tracer']:before {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-tracer.png?v=41662816116563") 50% 0/100% auto no-repeat } body div#devskin12874096 input+label[for='zenyatta'] {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-zenyatta.png?v=41662816116563") 50% 100%/100% auto no-repeat } body div#devskin12874096 input+label[for='zenyatta']:before {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-zenyatta.png?v=41662816116563") 50% 0/100% auto no-repeat } body div#devskin12874096 input+label[for='winston'] {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-winston.png?v=41662816116563") 50% 100%/100% auto no-repeat } body div#devskin12874096 input+label[for='winston']:before {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-winston.png?v=41662816116563") 50% 0/100% auto no-repeat } body div#devskin12874096 input+label[for='d-va'] {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-d-va.png?v=41662816116563") 50% 100%/100% auto no-repeat } body div#devskin12874096 input+label[for='d-va']:before {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-d-va.png?v=41662816116563") 50% 0/100% auto no-repeat } body div#devskin12874096 input+label[for='lucio'] {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-lucio.png?v=41662816116563") 50% 100%/100% auto no-repeat } body div#devskin12874096 input+label[for='lucio']:before {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-lucio.png?v=41662816116563") 50% 0/100% auto no-repeat } body div#devskin12874096 input+label[for='junkrat'] {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-junkrat.png?v=41662816116563") 50% 100%/100% auto no-repeat } body div#devskin12874096 input+label[for='junkrat']:before {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-junkrat.png?v=41662816116563") 50% 0/100% auto no-repeat } body div#devskin12874096 input+label[for='mei'] {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-mei.png?v=41662816116563") 50% 100%/100% auto no-repeat } body div#devskin12874096 input+label[for='mei']:before {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-mei.png?v=41662816116563") 50% 0/100% auto no-repeat } body div#devskin12874096 input+label[for='soldier-76'] {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-soldier-76.png?v=41662816116563") 50% 100%/100% auto no-repeat } body div#devskin12874096 input+label[for='soldier-76']:before {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-soldier-76.png?v=41662816116563") 50% 0/100% auto no-repeat } body div#devskin12874096 input+label[for='reinhardt'] {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-reinhardt.png?v=41662816116563") 50% 100%/100% auto no-repeat } body div#devskin12874096 input+label[for='reinhardt']:before {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-reinhardt.png?v=41662816116563") 50% 0/100% auto no-repeat } body div#devskin12874096 input+label[for='zarya'] {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-zarya.png?v=41662816116563") 50% 100%/100% auto no-repeat } body div#devskin12874096 input+label[for='zarya']:before {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-zarya.png?v=41662816116563") 50% 0/100% auto no-repeat } body div#devskin12874096 input+label[for='bastion'] {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-bastion.png?v=41662816116563") 50% 100%/100% auto no-repeat } body div#devskin12874096 input+label[for='bastion']:before {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-bastion.png?v=41662816116563") 50% 0/100% auto no-repeat } body div#devskin12874096 input+label[for='torbjorn'] {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-torbjorn.png?v=41662816116563") 50% 100%/100% auto no-repeat } body div#devskin12874096 input+label[for='torbjorn']:before {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/hex-reveal-torbjorn.png?v=41662816116563") 50% 0/100% auto no-repeat } body div#devskin12874096 input+label:before {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear } body div#devskin12874096 input+label:hover:before {opacity: 0.5 } body div#devskin12874096 input+label:nth-of-type(2):before {background-position: 5% 0 } body div#devskin12874096 input+label:nth-of-type(3):before {background-position: 10% 0 } body div#devskin12874096 input+label:nth-of-type(4):before {background-position: 15% 0 } body div#devskin12874096 input+label:nth-of-type(5):before {background-position: 20% 0 } body div#devskin12874096 input+label:nth-of-type(6):before {background-position: 25% 0 } body div#devskin12874096 input+label:nth-of-type(7):before {background-position: 30% 0 } body div#devskin12874096 input+label:nth-of-type(8):before {background-position: 35% 0 } body div#devskin12874096 input+label:nth-of-type(9):before {background-position: 40% 0 } body div#devskin12874096 input+label:nth-of-type(10):before {background-position: 45% 0 } body div#devskin12874096 input+label:nth-of-type(11):before {background-position: 50% 0 } body div#devskin12874096 input+label:nth-of-type(12):before {background-position: 55% 0 } body div#devskin12874096 input+label:nth-of-type(13):before {background-position: 60% 0 } body div#devskin12874096 input+label:nth-of-type(14):before {background-position: 65% 0 } body div#devskin12874096 input+label:nth-of-type(15):before {background-position: 70% 0 } body div#devskin12874096 input+label:nth-of-type(16):before {background-position: 75% 0 } body div#devskin12874096 input+label:nth-of-type(17):before {background-position: 80% 0 } body div#devskin12874096 input+label:nth-of-type(18):before {background-position: 85% 0 } body div#devskin12874096 input+label:nth-of-type(19):before {background-position: 90% 0 } body div#devskin12874096 input+label:nth-of-type(20):before {background-position: 95% 0 } body div#devskin12874096 input+label:nth-of-type(21):before {background-position: 100% 0 } body div#devskin12874096 input+label:nth-of-type(22):before {background-position: 105% 0 } body div#devskin12874096 input+label:nth-of-type(1) {margin-left: 6.8% } body div#devskin12874096 input+label:nth-of-type(11) {margin-right: 6.8% } body div#devskin12874096 input+label:nth-child(n+12) {margin-top: -1.2% } body div#devskin12874096 .artist-credits {position: absolute; top: 0; left: 0; right: 0; z-index: 0 } body div#devskin12874096 .artist-credit {position: relative; display: inline-block; box-sizing: border-box; z-index: 1; width: 7.0416%; margin: 8% 0.5% 0 0; padding-bottom: 7.8433663364%; position: relative } body div#devskin12874096 .artist-credit:nth-of-type(1) {margin-left: 6.8% } body div#devskin12874096 .artist-credit:nth-of-type(11) {margin-right: 6.8% } body div#devskin12874096 .artist-credit:nth-child(n+12) {margin-top: -1.2% } body div#devskin12874096 .artist-credit:nth-of-type(1), body div#devskin12874096 .artist-credit:nth-of-type(12) {left: 0.4% } body div#devskin12874096 .artist-credit:nth-of-type(2), body div#devskin12874096 .artist-credit:nth-of-type(12) {left: 0.3% } body div#devskin12874096 .artist-credit:nth-of-type(3), body div#devskin12874096 .artist-credit:nth-of-type(14) {left: 0.2% } body div#devskin12874096 .artist-credit:nth-of-type(4), body div#devskin12874096 .artist-credit:nth-of-type(15) {left: 0.1% } body div#devskin12874096 .artist-credit:nth-of-type(5), body div#devskin12874096 .artist-credit:nth-of-type(16) {left: 0.05% } body div#devskin12874096 .artist-credit:nth-of-type(7), body div#devskin12874096 .artist-credit:nth-of-type(18) {left: -0.05% } body div#devskin12874096 .artist-credit:nth-of-type(8), body div#devskin12874096 .artist-credit:nth-of-type(19) {left: -0.1% } body div#devskin12874096 .artist-credit:nth-of-type(9), body div#devskin12874096 .artist-credit:nth-of-type(20) {left: -0.2% } body div#devskin12874096 .artist-credit:nth-of-type(10), body div#devskin12874096 .artist-credit:nth-of-type(21) {left: -0.3% } body div#devskin12874096 .artist-credit:nth-of-type(11), body div#devskin12874096 .artist-credit:nth-of-type(21) {left: -0.4% } body div#devskin12874096 .artist-credit .details {position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; font-size: 0.85em; -webkit-transition: opacity 0.15s ease-in-out, margin 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; transition: opacity 0.15s ease-in-out, margin 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out; transition: transform 0.15s ease-in-out, opacity 0.15s ease-in-out, margin 0.15s ease-in-out; transition: transform 0.15s ease-in-out, opacity 0.15s ease-in-out, margin 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out } body div#devskin12874096 .artist-credit .details .inner {background: rgba(43, 44, 46, 0.9); border-radius: 7px; padding: 7px 15px 7px 5px; font-size: 0.85em; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3) } body div#devskin12874096 .artist-credit .details .inner:before {content: ''; position: absolute; border-radius: inherit; top: 0; bottom: 0; left: 0; right: 0; border-top: 3px solid #4d5055; border-bottom: 3px solid #4d5055 } body div#devskin12874096 .artist-credit .details .inner:after {content: ''; position: absolute; border-radius: 2px; width: 0; height: 0; -webkit-transform: translate(-50%, 0) rotate(0deg); transform: translate(-50%, 0) rotate(0deg); border-width: 10px; border-style: solid; left: 50% } body div#devskin12874096 .artist-credit .details .artist {position: relative; text-align: center; line-height: 1.5; padding-left: 40px; text-align: left } body div#devskin12874096 .artist-credit .details .artist .avatar {width: 32px; height: 32px; float: none; margin: 0; -webkit-transform: none; transform: none; position: absolute; top: 50%; left: 0; -webkit-transform: translate(0, -50%); transform: translate(0, -50%) } body div#devskin12874096 .artist-credit .details .artist .avatar a {display: block } body div#devskin12874096 .artist-credit .details .artist .avatar a img {width: 100%; height: auto; display: block } body div#devskin12874096 .artist-credit .details .artist .day {white-space: nowrap; display: block } body div#devskin12874096 .artist-credit .details .artist .name {white-space: nowrap; text-transform: none; display: block } body div#devskin12874096 .artist-credit .details .artist .name a {color: #fff } body div#devskin12874096 .artist-credit .details .artist .name a:hover {color: #0198ca } body div#devskin12874096 .artist-credit .details .artist .name .user-symbol {display: none !important } body div#devskin12874096 .artist-credit:nth-of-type(-n+11) .details {margin-top: 5px; -webkit-transform: translate(0, -80%); transform: translate(0, -80%) } body div#devskin12874096 .artist-credit:nth-of-type(-n+11) .details .inner:after {border-color: #4d5055 transparent transparent transparent; bottom: -19px } body div#devskin12874096 .artist-credit:nth-of-type(n+12) .details {-webkit-transform: translate(0, 75%); transform: translate(0, 75%); margin-bottom: -5px } body div#devskin12874096 .artist-credit:nth-of-type(n+12) .details .inner:after {border-color: transparent transparent #4d5055 transparent; top: -19px } body div#devskin12874096 input+label[for='mercy']:hover ~ .artist-credits .artist-credit.mercy .details {margin: 0; opacity: 1; z-index: 1337 } body div#devskin12874096 input+label[for='genji']:hover ~ .artist-credits .artist-credit.genji .details {margin: 0; opacity: 1; z-index: 1337 } body div#devskin12874096 input+label[for='hanzo']:hover ~ .artist-credits .artist-credit.hanzo .details {margin: 0; opacity: 1; z-index: 1337 } body div#devskin12874096 input+label[for='symmetra']:hover ~ .artist-credits .artist-credit.symmetra .details {margin: 0; opacity: 1; z-index: 1337 } body div#devskin12874096 input+label[for='reaper']:hover ~ .artist-credits .artist-credit.reaper .details {margin: 0; opacity: 1; z-index: 1337 } body div#devskin12874096 input+label[for='pharah']:hover ~ .artist-credits .artist-credit.pharah .details {margin: 0; opacity: 1; z-index: 1337 } body div#devskin12874096 input+label[for='roadhog']:hover ~ .artist-credits .artist-credit.roadhog .details {margin: 0; opacity: 1; z-index: 1337 } body div#devskin12874096 input+label[for='widowmaker']:hover ~ .artist-credits .artist-credit.widowmaker .details {margin: 0; opacity: 1; z-index: 1337 } body div#devskin12874096 input+label[for='mccree']:hover ~ .artist-credits .artist-credit.mccree .details {margin: 0; opacity: 1; z-index: 1337 } body div#devskin12874096 input+label[for='tracer']:hover ~ .artist-credits .artist-credit.tracer .details {margin: 0; opacity: 1; z-index: 1337 } body div#devskin12874096 input+label[for='zenyatta']:hover ~ .artist-credits .artist-credit.zenyatta .details {margin: 0; opacity: 1; z-index: 1337 } body div#devskin12874096 input+label[for='winston']:hover ~ .artist-credits .artist-credit.winston .details {margin: 0; opacity: 1; z-index: 1337 } body div#devskin12874096 input+label[for='d-va']:hover ~ .artist-credits .artist-credit.d-va .details {margin: 0; opacity: 1; z-index: 1337 } body div#devskin12874096 input+label[for='lucio']:hover ~ .artist-credits .artist-credit.lucio .details {margin: 0; opacity: 1; z-index: 1337 } body div#devskin12874096 input+label[for='junkrat']:hover ~ .artist-credits .artist-credit.junkrat .details {margin: 0; opacity: 1; z-index: 1337 } body div#devskin12874096 input+label[for='mei']:hover ~ .artist-credits .artist-credit.mei .details {margin: 0; opacity: 1; z-index: 1337 } body div#devskin12874096 input+label[for='soldier-76']:hover ~ .artist-credits .artist-credit.soldier-76 .details {margin: 0; opacity: 1; z-index: 1337 } body div#devskin12874096 input+label[for='reinhardt']:hover ~ .artist-credits .artist-credit.reinhardt .details {margin: 0; opacity: 1; z-index: 1337 } body div#devskin12874096 input+label[for='zarya']:hover ~ .artist-credits .artist-credit.zarya .details {margin: 0; opacity: 1; z-index: 1337 } body div#devskin12874096 input+label[for='bastion']:hover ~ .artist-credits .artist-credit.bastion .details {margin: 0; opacity: 1; z-index: 1337 } body div#devskin12874096 input+label[for='torbjorn']:hover ~ .artist-credits .artist-credit.torbjorn .details {margin: 0; opacity: 1; z-index: 1337 } body div#devskin12874096 .heroes {width: 100%; height: inherit; position: absolute; top: 0; left: 0; text-align: left; z-index: 1; -webkit-transform: translate(0, -100%); transform: translate(0, -100%) } @media only screen and (max-width: 767px) {body div#devskin12874096 .heroes {height: auto; width: 100%; padding-bottom: 66.666%; position: relative; -webkit-transform: none !important; transform: none !important; border-bottom: 3px solid #4d5055 } } body div#devskin12874096 .heroes>.hero {min-height: inherit; width: 100%; height: inherit; position: absolute; border-top: none; border-bottom: none; box-sizing: border-box; overflow: hidden; z-index: 1 } body div#devskin12874096 .heroes>.hero.current {z-index: 2 } @media only screen and (max-width: 767px) {body div#devskin12874096 .heroes>.hero {height: auto; width: 100%; -webkit-transform: none !important; transform: none !important; float: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0 } } body div#devskin12874096 .heroes>.hero .module {width: 35%; position: absolute; bottom: 0; padding: 0; box-sizing: border-box; left: 0; z-index: 1; min-height: 200px } body div#devskin12874096 .heroes>.hero .module:before {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: -25%; background: rgba(43, 44, 46, 0.8); border-radius: 0 14px 0 0; -webkit-transform: skew(28.5deg); transform: skew(28.5deg); z-index: 0 } body div#devskin12874096 .heroes>.hero .module:after {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: -25%; border-top: 4px solid #4d5055; border-right: 5px solid #4d5055; border-radius: 0 14px 0 0; -webkit-transform: skew(28.5deg); transform: skew(28.5deg); z-index: 0 } body div#devskin12874096 .heroes>.hero .module .day {position: absolute; left: 0; top: -53px; height: 54px; padding: 0 10% 0 30px; font: italic 36px/54px "BigNoodleTooOblique"; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.15) } body div#devskin12874096 .heroes>.hero .module .day:before {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: -25%; background: #4d5055; border-radius: 0 14px 0 0; -webkit-transform: skew(28.5deg); transform: skew(28.5deg); z-index: 0 } body div#devskin12874096 .heroes>.hero .module .day span {display: inline-block; position: relative; z-index: 1; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%) } body div#devskin12874096 .heroes>.hero .module .day span img {max-width: 100%; display: inline-block; vertical-align: middle; position: relative; top: 6px } body div#devskin12874096 .heroes>.hero .module .inner {position: relative; padding: 30px 15% 30px 30px; z-index: 1 } body div#devskin12874096 .heroes>.hero .module .inner .char-title {font: italic 72px "BigNoodleTooOblique"; color: #fff; margin: 0 0 10px; text-shadow: 0 4px 5px rgba(0, 0, 0, 0.3); position: relative } body div#devskin12874096 .heroes>.hero .module .inner .char-title img {max-width: 100%; display: inline-block; max-height: 80px } @media only screen and (max-width: 767px) {body div#devskin12874096 .heroes>.hero .module .inner .char-title img {max-height: 60px } } body div#devskin12874096 .heroes>.hero .module .inner .credit {position: relative; height: 60px } body div#devskin12874096 .heroes>.hero .module .inner .credit .name {margin: 10px 0 0 10px; float: left } body div#devskin12874096 .heroes>.hero .module .inner .credit .name em {display: block } body div#devskin12874096 .heroes>.hero .module .inner .credit .name em:first-of-type {font-weight: 100 } body div#devskin12874096 .heroes>.hero .module .inner .credit .name em:last-of-type {font-weight: 700 } body div#devskin12874096 .heroes>.hero .module .inner .credit .name a {color: #fff } body div#devskin12874096 .heroes>.hero .module .inner .credit .name a:hover {color: #f90 } body div#devskin12874096 .heroes>.hero .module:nth-of-type(2) {left: initial; right: 0 } body div#devskin12874096 .heroes>.hero .module:nth-of-type(2):before {right: -25%; left: 0; border-radius: 14px 0 0 0; -webkit-transform: skew(-28.5deg); transform: skew(-28.5deg) } body div#devskin12874096 .heroes>.hero .module:nth-of-type(2):after {top: 0; right: -25%; bottom: 0; left: 0; border-top: 4px solid #4d5055; border-left: 5px solid #4d5055; border-right: none; border-radius: 14px 0 0 0; -webkit-transform: skew(-28.5deg); transform: skew(-28.5deg) } body div#devskin12874096 .heroes>.hero .module:nth-of-type(2) .quote p {font: 100 italic 0.85em/1.5 "Open Sans", Sans-serif; margin-bottom: 15px } @media only screen and (max-width: 1023px) {body div#devskin12874096 .heroes>.hero .module:nth-of-type(2) .quote p {font: 100 italic 0.85em/1.5 "Open Sans", Sans-serif } } @media only screen and (max-width: 767px) {body div#devskin12874096 .heroes>.hero .module:nth-of-type(2) .quote p {font: 100 italic 0.65em/1.5 "Open Sans", Sans-serif } } body div#devskin12874096 .heroes>.hero .module:nth-of-type(2) .quote .author {font-size: 0.85em; position: relative; padding: 0 0 0 65px; font-weight: 600; font-style: italic } body div#devskin12874096 .heroes>.hero .module:nth-of-type(2) .quote .author:before {content: ''; height: 2px; width: 60px; position: absolute; background: #fff; top: 50%; left: 0; opacity: 0.3; -webkit-transform: translate(0, -50%); transform: translate(0, -50%) } body div#devskin12874096 .heroes>.hero .module:nth-of-type(2) .quote .author a {color: #fff } body div#devskin12874096 .heroes>.hero .module:nth-of-type(2) .quote .author a:hover {color: #f90 } body div#devskin12874096 input:checked+label ~ .heroes .hero {z-index: 3 } body div#devskin12874096 input:checked+label:before {opacity: 1 } body div#devskin12874096 .heroes .hero .background {position: absolute; overflow: hidden; top: 0; right: 0; bottom: 0; left: 0; background: #000 } body div#devskin12874096 .heroes .hero .background .artwork {position: inherit; background: #2b2c2e; top: inherit; right: inherit; bottom: inherit; left: inherit } body div#devskin12874096 .heroes .hero .background .artwork:before {content: ''; position: inherit; top: inherit; right: inherit; bottom: inherit; left: inherit; background: 50% 30%/cover no-repeat } body div#devskin12874096 .heroes .hero .background .artwork:after {content: ''; position: inherit; top: inherit; right: inherit; bottom: inherit; left: inherit; background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/ui-loading.gif") 50% 50% no-repeat; z-index: -1 } body div#devskin12874096 .heroes .hero .background .texture {position: inherit; top: inherit; right: inherit; bottom: inherit; left: inherit; background: transparent 50% 30%/cover no-repeat } body div#devskin12874096 .heroes .hero.vertical .background .artwork:after {-webkit-transform: skew(14.25deg); transform: skew(14.25deg) } body div#devskin12874096 input.horizontal+label ~ .heroes .hero.horizontal .module .inner {position: absolute; top: 50%; padding: 0; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); left: 0; right: 0 } body div#devskin12874096 input.horizontal+label ~ .heroes .hero.horizontal .module .inner .attrs {padding-left: 5% } body div#devskin12874096 input.horizontal+label ~ .heroes .hero.horizontal .module:nth-of-type(2) .quote {padding: 30px 30px 30px 15% } body div#devskin12874096 input.horizontal+label ~ .heroes .hero.horizontal .background .texture {display: none } body div#devskin12874096 input.vertical+label ~ .heroes .hero.vertical .module {box-sizing: border-box; width: 33%; position: absolute; top: 60%; right: 120px; bottom: initial; left: initial; z-index: 2 } body div#devskin12874096 input.vertical+label ~ .heroes .hero.vertical .module:before, body div#devskin12874096 input.vertical+label ~ .heroes .hero.vertical .module:after {display: none } body div#devskin12874096 input.vertical+label ~ .heroes .hero.vertical .module .day {position: relative; left: initial; top: initial; height: auto; padding: 0; line-height: normal; -webkit-transform: translate(-30px, 0) skew(14.25deg); transform: translate(-30px, 0) skew(14.25deg) } body div#devskin12874096 input.vertical+label ~ .heroes .hero.vertical .module .day:before {display: none } body div#devskin12874096 input.vertical+label ~ .heroes .hero.vertical .module .day span {top: 0; left: 29px } body div#devskin12874096 input.vertical+label ~ .heroes .hero.vertical .module .inner {padding: 0; -webkit-transform: translate(0, -50%) skew(-14.25deg); transform: translate(0, -50%) skew(-14.25deg) } body div#devskin12874096 input.vertical+label ~ .heroes .hero.vertical .module .inner .attrs {-webkit-transform: translate(0, 0) skew(14.25deg); transform: translate(0, 0) skew(14.25deg) } body div#devskin12874096 input.vertical+label ~ .heroes .hero.vertical .module .inner .char-title {position: relative; display: inline-block; padding: 20px 0 16px 0 } body div#devskin12874096 input.vertical+label ~ .heroes .hero.vertical .module .inner .char-title:before {content: ''; position: absolute; border-radius: 7px; top: 0; right: 0; bottom: 0; left: 0; border-top: 3px solid #fff; border-bottom: 3px solid #fff; -webkit-transform: translate(0, 0) skew(-14.25deg); transform: translate(0, 0) skew(-14.25deg); opacity: 0.3 } body div#devskin12874096 input.vertical+label ~ .heroes .hero.vertical .module .inner .char-title img {min-height: 80px } body div#devskin12874096 input.vertical+label ~ .heroes .hero.vertical .module .inner .credit {left: -20px } body div#devskin12874096 input.vertical+label ~ .heroes .hero.vertical .module .inner .quote {position: relative; -webkit-transform: translate(0, 0) skew(14.25deg); transform: translate(0, 0) skew(14.25deg) } body div#devskin12874096 input.vertical+label ~ .heroes .hero.vertical .module .inner .quote p {margin: 10px 0 0 10px } body div#devskin12874096 input.vertical+label ~ .heroes .hero.vertical .module .inner .quote .author {display: none } body div#devskin12874096 input.vertical+label ~ .heroes .hero.vertical .module .inner .credit span[class^='username'] a:hover, body div#devskin12874096 input.vertical+label ~ .heroes .hero.vertical .module .inner .quote span[class^='username'] a:hover {color: #0198ca } body div#devskin12874096 input.vertical+label ~ .heroes .hero.vertical .background .artwork {width: 62%; -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: skew(-14.25deg) translate(0, 0); transform: skew(-14.25deg) translate(0, 0); overflow: hidden; z-index: 1 } body div#devskin12874096 input.vertical+label ~ .heroes .hero.vertical .background .artwork:before {right: -2%; -webkit-transform: skew(14.25deg) translate(10%, 0%); transform: skew(14.25deg) translate(10%, 0%) } body div#devskin12874096 input.vertical+label ~ .heroes .hero.vertical .background .texture {display: block } body div#devskin12874096 input.horizontal:checked+label ~ .heroes ~ .title {-webkit-transform: translate(-50%, 30px); transform: translate(-50%, 30px) } body div#devskin12874096 input.vertical:checked+label ~ .heroes ~ .title {-webkit-transform: translate(-15%, 30px); transform: translate(-15%, 30px) } body div#devskin12874096 input+label ~ .heroes div.hero.mercy .background .artwork:before {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/artwork-mercy.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.mercy .background .texture {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/texture-hero-mercy.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.genji .background .artwork:before {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/artwork-genji.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.genji .background .texture {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/texture-hero-genji.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.hanzo .background .artwork:before {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/artwork-hanzo.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.hanzo .background .texture {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/texture-hero-hanzo.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.symmetra .background .artwork:before {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/artwork-symmetra.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.symmetra .background .texture {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/texture-hero-symmetra.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.reaper .background .artwork:before {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/artwork-reaper.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.reaper .background .texture {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/texture-hero-reaper.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.pharah .background .artwork:before {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/artwork-pharah.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.pharah .background .texture {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/texture-hero-pharah.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.roadhog .background .artwork:before {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/artwork-roadhog.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.roadhog .background .texture {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/texture-hero-roadhog.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.widowmaker .background .artwork:before {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/artwork-widowmaker.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.widowmaker .background .texture {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/texture-hero-widowmaker.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.mccree .background .artwork:before {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/artwork-mccree.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.mccree .background .texture {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/texture-hero-mccree.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.tracer .background .artwork:before {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/artwork-tracer.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.tracer .background .texture {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/texture-hero-tracer.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.zenyatta .background .artwork:before {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/artwork-zenyatta.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.zenyatta .background .texture {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/texture-hero-zenyatta.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.winston .background .artwork:before {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/artwork-winston.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.winston .background .texture {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/texture-hero-winston.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.d-va .background .artwork:before {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/artwork-d-va.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.d-va .background .texture {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/texture-hero-d-va.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.lucio .background .artwork:before {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/artwork-lucio.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.lucio .background .texture {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/texture-hero-lucio.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.junkrat .background .artwork:before {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/artwork-junkrat.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.junkrat .background .texture {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/texture-hero-junkrat.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.mei .background .artwork:before {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/artwork-mei.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.mei .background .texture {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/texture-hero-mei.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.soldier-76 .background .artwork:before {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/artwork-soldier-76.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.soldier-76 .background .texture {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/texture-hero-soldier-76.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.reinhardt .background .artwork:before {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/artwork-reinhardt.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.reinhardt .background .texture {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/texture-hero-reinhardt.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.zarya .background .artwork:before {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/artwork-zarya.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.zarya .background .texture {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/texture-hero-zarya.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.bastion .background .artwork:before {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/artwork-bastion.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.bastion .background .texture {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/texture-hero-bastion.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.torbjorn .background .artwork:before {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/artwork-torbjorn.jpg?v=41662816116563") } body div#devskin12874096 input+label ~ .heroes div.hero.torbjorn .background .texture {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/texture-hero-torbjorn.jpg?v=41662816116563") } body div#devskin12874096 input ~ .heroes {-webkit-transition: -webkit-transform 0s ease-out 0s; transition: -webkit-transform 0s ease-out 0s; transition: transform 0s ease-out 0s; transition: transform 0s ease-out 0s, -webkit-transform 0s ease-out 0s } body div#devskin12874096 input ~ .heroes .hero {opacity: 0; z-index: 0 } body div#devskin12874096 input.day-1:checked ~ .heroes {-webkit-transition: -webkit-transform 0.3s ease-in 0s; transition: -webkit-transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s, -webkit-transform 0.3s ease-in 0s } body div#devskin12874096 input.day-1:checked ~ .heroes .hero.day-1 {z-index: 4; opacity: 1; -webkit-transition: opacity 0.3s ease-in 0s; transition: opacity 0.3s ease-in 0s } body div#devskin12874096 input.day-2:checked ~ .heroes {-webkit-transition: -webkit-transform 0.3s ease-in 0s; transition: -webkit-transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s, -webkit-transform 0.3s ease-in 0s } body div#devskin12874096 input.day-2:checked ~ .heroes .hero.day-2 {z-index: 4; opacity: 1; -webkit-transition: opacity 0.3s ease-in 0s; transition: opacity 0.3s ease-in 0s } body div#devskin12874096 input.day-3:checked ~ .heroes {-webkit-transition: -webkit-transform 0.3s ease-in 0s; transition: -webkit-transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s, -webkit-transform 0.3s ease-in 0s } body div#devskin12874096 input.day-3:checked ~ .heroes .hero.day-3 {z-index: 4; opacity: 1; -webkit-transition: opacity 0.3s ease-in 0s; transition: opacity 0.3s ease-in 0s } body div#devskin12874096 input.day-4:checked ~ .heroes {-webkit-transition: -webkit-transform 0.3s ease-in 0s; transition: -webkit-transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s, -webkit-transform 0.3s ease-in 0s } body div#devskin12874096 input.day-4:checked ~ .heroes .hero.day-4 {z-index: 4; opacity: 1; -webkit-transition: opacity 0.3s ease-in 0s; transition: opacity 0.3s ease-in 0s } body div#devskin12874096 input.day-5:checked ~ .heroes {-webkit-transition: -webkit-transform 0.3s ease-in 0s; transition: -webkit-transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s, -webkit-transform 0.3s ease-in 0s } body div#devskin12874096 input.day-5:checked ~ .heroes .hero.day-5 {z-index: 4; opacity: 1; -webkit-transition: opacity 0.3s ease-in 0s; transition: opacity 0.3s ease-in 0s } body div#devskin12874096 input.day-6:checked ~ .heroes {-webkit-transition: -webkit-transform 0.3s ease-in 0s; transition: -webkit-transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s, -webkit-transform 0.3s ease-in 0s } body div#devskin12874096 input.day-6:checked ~ .heroes .hero.day-6 {z-index: 4; opacity: 1; -webkit-transition: opacity 0.3s ease-in 0s; transition: opacity 0.3s ease-in 0s } body div#devskin12874096 input.day-7:checked ~ .heroes {-webkit-transition: -webkit-transform 0.3s ease-in 0s; transition: -webkit-transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s, -webkit-transform 0.3s ease-in 0s } body div#devskin12874096 input.day-7:checked ~ .heroes .hero.day-7 {z-index: 4; opacity: 1; -webkit-transition: opacity 0.3s ease-in 0s; transition: opacity 0.3s ease-in 0s } body div#devskin12874096 input.day-8:checked ~ .heroes {-webkit-transition: -webkit-transform 0.3s ease-in 0s; transition: -webkit-transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s, -webkit-transform 0.3s ease-in 0s } body div#devskin12874096 input.day-8:checked ~ .heroes .hero.day-8 {z-index: 4; opacity: 1; -webkit-transition: opacity 0.3s ease-in 0s; transition: opacity 0.3s ease-in 0s } body div#devskin12874096 input.day-9:checked ~ .heroes {-webkit-transition: -webkit-transform 0.3s ease-in 0s; transition: -webkit-transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s, -webkit-transform 0.3s ease-in 0s } body div#devskin12874096 input.day-9:checked ~ .heroes .hero.day-9 {z-index: 4; opacity: 1; -webkit-transition: opacity 0.3s ease-in 0s; transition: opacity 0.3s ease-in 0s } body div#devskin12874096 input.day-10:checked ~ .heroes {-webkit-transition: -webkit-transform 0.3s ease-in 0s; transition: -webkit-transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s, -webkit-transform 0.3s ease-in 0s } body div#devskin12874096 input.day-10:checked ~ .heroes .hero.day-10 {z-index: 4; opacity: 1; -webkit-transition: opacity 0.3s ease-in 0s; transition: opacity 0.3s ease-in 0s } body div#devskin12874096 input.day-11:checked ~ .heroes {-webkit-transition: -webkit-transform 0.3s ease-in 0s; transition: -webkit-transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s, -webkit-transform 0.3s ease-in 0s } body div#devskin12874096 input.day-11:checked ~ .heroes .hero.day-11 {z-index: 4; opacity: 1; -webkit-transition: opacity 0.3s ease-in 0s; transition: opacity 0.3s ease-in 0s } body div#devskin12874096 input.day-12:checked ~ .heroes {-webkit-transition: -webkit-transform 0.3s ease-in 0s; transition: -webkit-transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s, -webkit-transform 0.3s ease-in 0s } body div#devskin12874096 input.day-12:checked ~ .heroes .hero.day-12 {z-index: 4; opacity: 1; -webkit-transition: opacity 0.3s ease-in 0s; transition: opacity 0.3s ease-in 0s } body div#devskin12874096 input.day-13:checked ~ .heroes {-webkit-transition: -webkit-transform 0.3s ease-in 0s; transition: -webkit-transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s, -webkit-transform 0.3s ease-in 0s } body div#devskin12874096 input.day-13:checked ~ .heroes .hero.day-13 {z-index: 4; opacity: 1; -webkit-transition: opacity 0.3s ease-in 0s; transition: opacity 0.3s ease-in 0s } body div#devskin12874096 input.day-14:checked ~ .heroes {-webkit-transition: -webkit-transform 0.3s ease-in 0s; transition: -webkit-transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s, -webkit-transform 0.3s ease-in 0s } body div#devskin12874096 input.day-14:checked ~ .heroes .hero.day-14 {z-index: 4; opacity: 1; -webkit-transition: opacity 0.3s ease-in 0s; transition: opacity 0.3s ease-in 0s } body div#devskin12874096 input.day-15:checked ~ .heroes {-webkit-transition: -webkit-transform 0.3s ease-in 0s; transition: -webkit-transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s, -webkit-transform 0.3s ease-in 0s } body div#devskin12874096 input.day-15:checked ~ .heroes .hero.day-15 {z-index: 4; opacity: 1; -webkit-transition: opacity 0.3s ease-in 0s; transition: opacity 0.3s ease-in 0s } body div#devskin12874096 input.day-16:checked ~ .heroes {-webkit-transition: -webkit-transform 0.3s ease-in 0s; transition: -webkit-transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s, -webkit-transform 0.3s ease-in 0s } body div#devskin12874096 input.day-16:checked ~ .heroes .hero.day-16 {z-index: 4; opacity: 1; -webkit-transition: opacity 0.3s ease-in 0s; transition: opacity 0.3s ease-in 0s } body div#devskin12874096 input.day-17:checked ~ .heroes {-webkit-transition: -webkit-transform 0.3s ease-in 0s; transition: -webkit-transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s, -webkit-transform 0.3s ease-in 0s } body div#devskin12874096 input.day-17:checked ~ .heroes .hero.day-17 {z-index: 4; opacity: 1; -webkit-transition: opacity 0.3s ease-in 0s; transition: opacity 0.3s ease-in 0s } body div#devskin12874096 input.day-18:checked ~ .heroes {-webkit-transition: -webkit-transform 0.3s ease-in 0s; transition: -webkit-transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s, -webkit-transform 0.3s ease-in 0s } body div#devskin12874096 input.day-18:checked ~ .heroes .hero.day-18 {z-index: 4; opacity: 1; -webkit-transition: opacity 0.3s ease-in 0s; transition: opacity 0.3s ease-in 0s } body div#devskin12874096 input.day-19:checked ~ .heroes {-webkit-transition: -webkit-transform 0.3s ease-in 0s; transition: -webkit-transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s, -webkit-transform 0.3s ease-in 0s } body div#devskin12874096 input.day-19:checked ~ .heroes .hero.day-19 {z-index: 4; opacity: 1; -webkit-transition: opacity 0.3s ease-in 0s; transition: opacity 0.3s ease-in 0s } body div#devskin12874096 input.day-20:checked ~ .heroes {-webkit-transition: -webkit-transform 0.3s ease-in 0s; transition: -webkit-transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s, -webkit-transform 0.3s ease-in 0s } body div#devskin12874096 input.day-20:checked ~ .heroes .hero.day-20 {z-index: 4; opacity: 1; -webkit-transition: opacity 0.3s ease-in 0s; transition: opacity 0.3s ease-in 0s } body div#devskin12874096 input.day-21:checked ~ .heroes {-webkit-transition: -webkit-transform 0.3s ease-in 0s; transition: -webkit-transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s, -webkit-transform 0.3s ease-in 0s } body div#devskin12874096 input.day-21:checked ~ .heroes .hero.day-21 {z-index: 4; opacity: 1; -webkit-transition: opacity 0.3s ease-in 0s; transition: opacity 0.3s ease-in 0s } body div#devskin12874096 input.vertical+label ~ .heroes>.hero.vertical .background {-webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); -webkit-transition: -webkit-transform 0.3s ease-in-out 0.6s; transition: -webkit-transform 0.3s ease-in-out 0.6s; transition: transform 0.3s ease-in-out 0.6s; transition: transform 0.3s ease-in-out 0.6s, -webkit-transform 0.3s ease-in-out 0.6s } body div#devskin12874096 input.vertical+label ~ .heroes>.hero.vertical .background .artwork {opacity: 0; -webkit-transform: skew(-14.25deg) translate(-25%, 0%); transform: skew(-14.25deg) translate(-25%, 0%); -webkit-transition: opacity 0s ease-in-out 0.6s, -webkit-transform 0s ease-in-out 0.6s; transition: opacity 0s ease-in-out 0.6s, -webkit-transform 0s ease-in-out 0.6s; transition: transform 0s ease-in-out 0.6s, opacity 0s ease-in-out 0.6s; transition: transform 0s ease-in-out 0.6s, opacity 0s ease-in-out 0.6s, -webkit-transform 0s ease-in-out 0.6s } body div#devskin12874096 input.vertical+label ~ .heroes>.hero.vertical .module {-webkit-transition: -webkit-transform 0s ease-in-out 0.6s; transition: -webkit-transform 0s ease-in-out 0.6s; transition: transform 0s ease-in-out 0.6s; transition: transform 0s ease-in-out 0.6s, -webkit-transform 0s ease-in-out 0.6s; -webkit-transform: translate(-215%, 0); transform: translate(-215%, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.vertical+label ~ .heroes>.hero.vertical .module {-webkit-transform: scale(0.4) translate(70%, 0); transform: scale(0.4) translate(70%, 0); -webkit-transform-origin: top right; transform-origin: top right; width: 100% } } body div#devskin12874096 input.vertical+label ~ .heroes>.hero.vertical .module .char-title {opacity: 0; -webkit-transition: opacity 0.3s ease-in-out 0s; transition: opacity 0.3s ease-in-out 0s } body div#devskin12874096 input.vertical+label ~ .heroes>.hero.vertical .module .day img, body div#devskin12874096 input.vertical+label ~ .heroes>.hero.vertical .module .char-title img, body div#devskin12874096 input.vertical+label ~ .heroes>.hero.vertical .module .credit, body div#devskin12874096 input.vertical+label ~ .heroes>.hero.vertical .module .quote {opacity: 0; position: relative; -webkit-transition: -webkit-transform 0s ease-in-out 0.6s; transition: -webkit-transform 0s ease-in-out 0.6s; transition: transform 0s ease-in-out 0.6s; transition: transform 0s ease-in-out 0.6s, -webkit-transform 0s ease-in-out 0.6s } body div#devskin12874096 input.vertical.day-1:checked+label ~ .heroes>.hero.vertical.day-1 .background {-webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s } body div#devskin12874096 input.vertical.day-1:checked+label ~ .heroes>.hero.vertical.day-1 .background .artwork {opacity: 1; -webkit-transform: skew(-14.25deg) translate(0, 0%); transform: skew(-14.25deg) translate(0, 0%); -webkit-transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-1:checked+label ~ .heroes>.hero.vertical.day-1 .module {-webkit-transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s, -webkit-transform 0.35s ease-in-out 0.3s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.vertical.day-1:checked+label ~ .heroes>.hero.vertical.day-1 .module {-webkit-transform: scale(0.4) translate(70%, 0); transform: scale(0.4) translate(70%, 0); -webkit-transform-origin: top right; transform-origin: top right; width: 100% } } body div#devskin12874096 input.vertical.day-1:checked+label ~ .heroes>.hero.vertical.day-1 .module .char-title {opacity: 1; -webkit-transition: opacity 0.3s ease-in-out 0.15s; transition: opacity 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-1:checked+label ~ .heroes>.hero.vertical.day-1 .module .day img, body div#devskin12874096 input.vertical.day-1:checked+label ~ .heroes>.hero.vertical.day-1 .module .char-title img, body div#devskin12874096 input.vertical.day-1:checked+label ~ .heroes>.hero.vertical.day-1 .module .credit, body div#devskin12874096 input.vertical.day-1:checked+label ~ .heroes>.hero.vertical.day-1 .module .quote {opacity: 1 } body div#devskin12874096 input.vertical.day-1:checked+label ~ .heroes>.hero.vertical.day-1 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.vertical.day-1:checked+label ~ .heroes>.hero.vertical.day-1 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.vertical.day-1:checked+label ~ .heroes>.hero.vertical.day-1 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.6s; transition: all 0.3s ease-in-out 0.6s } body div#devskin12874096 input.vertical.day-1:checked+label ~ .heroes>.hero.vertical.day-1 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.7s; transition: all 0.3s ease-in-out 0.7s } body div#devskin12874096 input.vertical.day-2:checked+label ~ .heroes>.hero.vertical.day-2 .background {-webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s } body div#devskin12874096 input.vertical.day-2:checked+label ~ .heroes>.hero.vertical.day-2 .background .artwork {opacity: 1; -webkit-transform: skew(-14.25deg) translate(0, 0%); transform: skew(-14.25deg) translate(0, 0%); -webkit-transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-2:checked+label ~ .heroes>.hero.vertical.day-2 .module {-webkit-transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s, -webkit-transform 0.35s ease-in-out 0.3s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.vertical.day-2:checked+label ~ .heroes>.hero.vertical.day-2 .module {-webkit-transform: scale(0.4) translate(70%, 0); transform: scale(0.4) translate(70%, 0); -webkit-transform-origin: top right; transform-origin: top right; width: 100% } } body div#devskin12874096 input.vertical.day-2:checked+label ~ .heroes>.hero.vertical.day-2 .module .char-title {opacity: 1; -webkit-transition: opacity 0.3s ease-in-out 0.15s; transition: opacity 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-2:checked+label ~ .heroes>.hero.vertical.day-2 .module .day img, body div#devskin12874096 input.vertical.day-2:checked+label ~ .heroes>.hero.vertical.day-2 .module .char-title img, body div#devskin12874096 input.vertical.day-2:checked+label ~ .heroes>.hero.vertical.day-2 .module .credit, body div#devskin12874096 input.vertical.day-2:checked+label ~ .heroes>.hero.vertical.day-2 .module .quote {opacity: 1 } body div#devskin12874096 input.vertical.day-2:checked+label ~ .heroes>.hero.vertical.day-2 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.vertical.day-2:checked+label ~ .heroes>.hero.vertical.day-2 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.vertical.day-2:checked+label ~ .heroes>.hero.vertical.day-2 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.6s; transition: all 0.3s ease-in-out 0.6s } body div#devskin12874096 input.vertical.day-2:checked+label ~ .heroes>.hero.vertical.day-2 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.7s; transition: all 0.3s ease-in-out 0.7s } body div#devskin12874096 input.vertical.day-3:checked+label ~ .heroes>.hero.vertical.day-3 .background {-webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s } body div#devskin12874096 input.vertical.day-3:checked+label ~ .heroes>.hero.vertical.day-3 .background .artwork {opacity: 1; -webkit-transform: skew(-14.25deg) translate(0, 0%); transform: skew(-14.25deg) translate(0, 0%); -webkit-transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-3:checked+label ~ .heroes>.hero.vertical.day-3 .module {-webkit-transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s, -webkit-transform 0.35s ease-in-out 0.3s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.vertical.day-3:checked+label ~ .heroes>.hero.vertical.day-3 .module {-webkit-transform: scale(0.4) translate(70%, 0); transform: scale(0.4) translate(70%, 0); -webkit-transform-origin: top right; transform-origin: top right; width: 100% } } body div#devskin12874096 input.vertical.day-3:checked+label ~ .heroes>.hero.vertical.day-3 .module .char-title {opacity: 1; -webkit-transition: opacity 0.3s ease-in-out 0.15s; transition: opacity 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-3:checked+label ~ .heroes>.hero.vertical.day-3 .module .day img, body div#devskin12874096 input.vertical.day-3:checked+label ~ .heroes>.hero.vertical.day-3 .module .char-title img, body div#devskin12874096 input.vertical.day-3:checked+label ~ .heroes>.hero.vertical.day-3 .module .credit, body div#devskin12874096 input.vertical.day-3:checked+label ~ .heroes>.hero.vertical.day-3 .module .quote {opacity: 1 } body div#devskin12874096 input.vertical.day-3:checked+label ~ .heroes>.hero.vertical.day-3 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.vertical.day-3:checked+label ~ .heroes>.hero.vertical.day-3 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.vertical.day-3:checked+label ~ .heroes>.hero.vertical.day-3 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.6s; transition: all 0.3s ease-in-out 0.6s } body div#devskin12874096 input.vertical.day-3:checked+label ~ .heroes>.hero.vertical.day-3 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.7s; transition: all 0.3s ease-in-out 0.7s } body div#devskin12874096 input.vertical.day-4:checked+label ~ .heroes>.hero.vertical.day-4 .background {-webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s } body div#devskin12874096 input.vertical.day-4:checked+label ~ .heroes>.hero.vertical.day-4 .background .artwork {opacity: 1; -webkit-transform: skew(-14.25deg) translate(0, 0%); transform: skew(-14.25deg) translate(0, 0%); -webkit-transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-4:checked+label ~ .heroes>.hero.vertical.day-4 .module {-webkit-transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s, -webkit-transform 0.35s ease-in-out 0.3s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.vertical.day-4:checked+label ~ .heroes>.hero.vertical.day-4 .module {-webkit-transform: scale(0.4) translate(70%, 0); transform: scale(0.4) translate(70%, 0); -webkit-transform-origin: top right; transform-origin: top right; width: 100% } } body div#devskin12874096 input.vertical.day-4:checked+label ~ .heroes>.hero.vertical.day-4 .module .char-title {opacity: 1; -webkit-transition: opacity 0.3s ease-in-out 0.15s; transition: opacity 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-4:checked+label ~ .heroes>.hero.vertical.day-4 .module .day img, body div#devskin12874096 input.vertical.day-4:checked+label ~ .heroes>.hero.vertical.day-4 .module .char-title img, body div#devskin12874096 input.vertical.day-4:checked+label ~ .heroes>.hero.vertical.day-4 .module .credit, body div#devskin12874096 input.vertical.day-4:checked+label ~ .heroes>.hero.vertical.day-4 .module .quote {opacity: 1 } body div#devskin12874096 input.vertical.day-4:checked+label ~ .heroes>.hero.vertical.day-4 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.vertical.day-4:checked+label ~ .heroes>.hero.vertical.day-4 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.vertical.day-4:checked+label ~ .heroes>.hero.vertical.day-4 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.6s; transition: all 0.3s ease-in-out 0.6s } body div#devskin12874096 input.vertical.day-4:checked+label ~ .heroes>.hero.vertical.day-4 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.7s; transition: all 0.3s ease-in-out 0.7s } body div#devskin12874096 input.vertical.day-5:checked+label ~ .heroes>.hero.vertical.day-5 .background {-webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s } body div#devskin12874096 input.vertical.day-5:checked+label ~ .heroes>.hero.vertical.day-5 .background .artwork {opacity: 1; -webkit-transform: skew(-14.25deg) translate(0, 0%); transform: skew(-14.25deg) translate(0, 0%); -webkit-transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-5:checked+label ~ .heroes>.hero.vertical.day-5 .module {-webkit-transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s, -webkit-transform 0.35s ease-in-out 0.3s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.vertical.day-5:checked+label ~ .heroes>.hero.vertical.day-5 .module {-webkit-transform: scale(0.4) translate(70%, 0); transform: scale(0.4) translate(70%, 0); -webkit-transform-origin: top right; transform-origin: top right; width: 100% } } body div#devskin12874096 input.vertical.day-5:checked+label ~ .heroes>.hero.vertical.day-5 .module .char-title {opacity: 1; -webkit-transition: opacity 0.3s ease-in-out 0.15s; transition: opacity 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-5:checked+label ~ .heroes>.hero.vertical.day-5 .module .day img, body div#devskin12874096 input.vertical.day-5:checked+label ~ .heroes>.hero.vertical.day-5 .module .char-title img, body div#devskin12874096 input.vertical.day-5:checked+label ~ .heroes>.hero.vertical.day-5 .module .credit, body div#devskin12874096 input.vertical.day-5:checked+label ~ .heroes>.hero.vertical.day-5 .module .quote {opacity: 1 } body div#devskin12874096 input.vertical.day-5:checked+label ~ .heroes>.hero.vertical.day-5 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.vertical.day-5:checked+label ~ .heroes>.hero.vertical.day-5 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.vertical.day-5:checked+label ~ .heroes>.hero.vertical.day-5 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.6s; transition: all 0.3s ease-in-out 0.6s } body div#devskin12874096 input.vertical.day-5:checked+label ~ .heroes>.hero.vertical.day-5 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.7s; transition: all 0.3s ease-in-out 0.7s } body div#devskin12874096 input.vertical.day-6:checked+label ~ .heroes>.hero.vertical.day-6 .background {-webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s } body div#devskin12874096 input.vertical.day-6:checked+label ~ .heroes>.hero.vertical.day-6 .background .artwork {opacity: 1; -webkit-transform: skew(-14.25deg) translate(0, 0%); transform: skew(-14.25deg) translate(0, 0%); -webkit-transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-6:checked+label ~ .heroes>.hero.vertical.day-6 .module {-webkit-transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s, -webkit-transform 0.35s ease-in-out 0.3s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.vertical.day-6:checked+label ~ .heroes>.hero.vertical.day-6 .module {-webkit-transform: scale(0.4) translate(70%, 0); transform: scale(0.4) translate(70%, 0); -webkit-transform-origin: top right; transform-origin: top right; width: 100% } } body div#devskin12874096 input.vertical.day-6:checked+label ~ .heroes>.hero.vertical.day-6 .module .char-title {opacity: 1; -webkit-transition: opacity 0.3s ease-in-out 0.15s; transition: opacity 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-6:checked+label ~ .heroes>.hero.vertical.day-6 .module .day img, body div#devskin12874096 input.vertical.day-6:checked+label ~ .heroes>.hero.vertical.day-6 .module .char-title img, body div#devskin12874096 input.vertical.day-6:checked+label ~ .heroes>.hero.vertical.day-6 .module .credit, body div#devskin12874096 input.vertical.day-6:checked+label ~ .heroes>.hero.vertical.day-6 .module .quote {opacity: 1 } body div#devskin12874096 input.vertical.day-6:checked+label ~ .heroes>.hero.vertical.day-6 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.vertical.day-6:checked+label ~ .heroes>.hero.vertical.day-6 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.vertical.day-6:checked+label ~ .heroes>.hero.vertical.day-6 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.6s; transition: all 0.3s ease-in-out 0.6s } body div#devskin12874096 input.vertical.day-6:checked+label ~ .heroes>.hero.vertical.day-6 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.7s; transition: all 0.3s ease-in-out 0.7s } body div#devskin12874096 input.vertical.day-7:checked+label ~ .heroes>.hero.vertical.day-7 .background {-webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s } body div#devskin12874096 input.vertical.day-7:checked+label ~ .heroes>.hero.vertical.day-7 .background .artwork {opacity: 1; -webkit-transform: skew(-14.25deg) translate(0, 0%); transform: skew(-14.25deg) translate(0, 0%); -webkit-transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-7:checked+label ~ .heroes>.hero.vertical.day-7 .module {-webkit-transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s, -webkit-transform 0.35s ease-in-out 0.3s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.vertical.day-7:checked+label ~ .heroes>.hero.vertical.day-7 .module {-webkit-transform: scale(0.4) translate(70%, 0); transform: scale(0.4) translate(70%, 0); -webkit-transform-origin: top right; transform-origin: top right; width: 100% } } body div#devskin12874096 input.vertical.day-7:checked+label ~ .heroes>.hero.vertical.day-7 .module .char-title {opacity: 1; -webkit-transition: opacity 0.3s ease-in-out 0.15s; transition: opacity 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-7:checked+label ~ .heroes>.hero.vertical.day-7 .module .day img, body div#devskin12874096 input.vertical.day-7:checked+label ~ .heroes>.hero.vertical.day-7 .module .char-title img, body div#devskin12874096 input.vertical.day-7:checked+label ~ .heroes>.hero.vertical.day-7 .module .credit, body div#devskin12874096 input.vertical.day-7:checked+label ~ .heroes>.hero.vertical.day-7 .module .quote {opacity: 1 } body div#devskin12874096 input.vertical.day-7:checked+label ~ .heroes>.hero.vertical.day-7 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.vertical.day-7:checked+label ~ .heroes>.hero.vertical.day-7 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.vertical.day-7:checked+label ~ .heroes>.hero.vertical.day-7 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.6s; transition: all 0.3s ease-in-out 0.6s } body div#devskin12874096 input.vertical.day-7:checked+label ~ .heroes>.hero.vertical.day-7 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.7s; transition: all 0.3s ease-in-out 0.7s } body div#devskin12874096 input.vertical.day-8:checked+label ~ .heroes>.hero.vertical.day-8 .background {-webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s } body div#devskin12874096 input.vertical.day-8:checked+label ~ .heroes>.hero.vertical.day-8 .background .artwork {opacity: 1; -webkit-transform: skew(-14.25deg) translate(0, 0%); transform: skew(-14.25deg) translate(0, 0%); -webkit-transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-8:checked+label ~ .heroes>.hero.vertical.day-8 .module {-webkit-transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s, -webkit-transform 0.35s ease-in-out 0.3s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.vertical.day-8:checked+label ~ .heroes>.hero.vertical.day-8 .module {-webkit-transform: scale(0.4) translate(70%, 0); transform: scale(0.4) translate(70%, 0); -webkit-transform-origin: top right; transform-origin: top right; width: 100% } } body div#devskin12874096 input.vertical.day-8:checked+label ~ .heroes>.hero.vertical.day-8 .module .char-title {opacity: 1; -webkit-transition: opacity 0.3s ease-in-out 0.15s; transition: opacity 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-8:checked+label ~ .heroes>.hero.vertical.day-8 .module .day img, body div#devskin12874096 input.vertical.day-8:checked+label ~ .heroes>.hero.vertical.day-8 .module .char-title img, body div#devskin12874096 input.vertical.day-8:checked+label ~ .heroes>.hero.vertical.day-8 .module .credit, body div#devskin12874096 input.vertical.day-8:checked+label ~ .heroes>.hero.vertical.day-8 .module .quote {opacity: 1 } body div#devskin12874096 input.vertical.day-8:checked+label ~ .heroes>.hero.vertical.day-8 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.vertical.day-8:checked+label ~ .heroes>.hero.vertical.day-8 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.vertical.day-8:checked+label ~ .heroes>.hero.vertical.day-8 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.6s; transition: all 0.3s ease-in-out 0.6s } body div#devskin12874096 input.vertical.day-8:checked+label ~ .heroes>.hero.vertical.day-8 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.7s; transition: all 0.3s ease-in-out 0.7s } body div#devskin12874096 input.vertical.day-9:checked+label ~ .heroes>.hero.vertical.day-9 .background {-webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s } body div#devskin12874096 input.vertical.day-9:checked+label ~ .heroes>.hero.vertical.day-9 .background .artwork {opacity: 1; -webkit-transform: skew(-14.25deg) translate(0, 0%); transform: skew(-14.25deg) translate(0, 0%); -webkit-transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-9:checked+label ~ .heroes>.hero.vertical.day-9 .module {-webkit-transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s, -webkit-transform 0.35s ease-in-out 0.3s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.vertical.day-9:checked+label ~ .heroes>.hero.vertical.day-9 .module {-webkit-transform: scale(0.4) translate(70%, 0); transform: scale(0.4) translate(70%, 0); -webkit-transform-origin: top right; transform-origin: top right; width: 100% } } body div#devskin12874096 input.vertical.day-9:checked+label ~ .heroes>.hero.vertical.day-9 .module .char-title {opacity: 1; -webkit-transition: opacity 0.3s ease-in-out 0.15s; transition: opacity 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-9:checked+label ~ .heroes>.hero.vertical.day-9 .module .day img, body div#devskin12874096 input.vertical.day-9:checked+label ~ .heroes>.hero.vertical.day-9 .module .char-title img, body div#devskin12874096 input.vertical.day-9:checked+label ~ .heroes>.hero.vertical.day-9 .module .credit, body div#devskin12874096 input.vertical.day-9:checked+label ~ .heroes>.hero.vertical.day-9 .module .quote {opacity: 1 } body div#devskin12874096 input.vertical.day-9:checked+label ~ .heroes>.hero.vertical.day-9 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.vertical.day-9:checked+label ~ .heroes>.hero.vertical.day-9 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.vertical.day-9:checked+label ~ .heroes>.hero.vertical.day-9 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.6s; transition: all 0.3s ease-in-out 0.6s } body div#devskin12874096 input.vertical.day-9:checked+label ~ .heroes>.hero.vertical.day-9 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.7s; transition: all 0.3s ease-in-out 0.7s } body div#devskin12874096 input.vertical.day-10:checked+label ~ .heroes>.hero.vertical.day-10 .background {-webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s } body div#devskin12874096 input.vertical.day-10:checked+label ~ .heroes>.hero.vertical.day-10 .background .artwork {opacity: 1; -webkit-transform: skew(-14.25deg) translate(0, 0%); transform: skew(-14.25deg) translate(0, 0%); -webkit-transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-10:checked+label ~ .heroes>.hero.vertical.day-10 .module {-webkit-transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s, -webkit-transform 0.35s ease-in-out 0.3s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.vertical.day-10:checked+label ~ .heroes>.hero.vertical.day-10 .module {-webkit-transform: scale(0.4) translate(70%, 0); transform: scale(0.4) translate(70%, 0); -webkit-transform-origin: top right; transform-origin: top right; width: 100% } } body div#devskin12874096 input.vertical.day-10:checked+label ~ .heroes>.hero.vertical.day-10 .module .char-title {opacity: 1; -webkit-transition: opacity 0.3s ease-in-out 0.15s; transition: opacity 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-10:checked+label ~ .heroes>.hero.vertical.day-10 .module .day img, body div#devskin12874096 input.vertical.day-10:checked+label ~ .heroes>.hero.vertical.day-10 .module .char-title img, body div#devskin12874096 input.vertical.day-10:checked+label ~ .heroes>.hero.vertical.day-10 .module .credit, body div#devskin12874096 input.vertical.day-10:checked+label ~ .heroes>.hero.vertical.day-10 .module .quote {opacity: 1 } body div#devskin12874096 input.vertical.day-10:checked+label ~ .heroes>.hero.vertical.day-10 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.vertical.day-10:checked+label ~ .heroes>.hero.vertical.day-10 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.vertical.day-10:checked+label ~ .heroes>.hero.vertical.day-10 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.6s; transition: all 0.3s ease-in-out 0.6s } body div#devskin12874096 input.vertical.day-10:checked+label ~ .heroes>.hero.vertical.day-10 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.7s; transition: all 0.3s ease-in-out 0.7s } body div#devskin12874096 input.vertical.day-11:checked+label ~ .heroes>.hero.vertical.day-11 .background {-webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s } body div#devskin12874096 input.vertical.day-11:checked+label ~ .heroes>.hero.vertical.day-11 .background .artwork {opacity: 1; -webkit-transform: skew(-14.25deg) translate(0, 0%); transform: skew(-14.25deg) translate(0, 0%); -webkit-transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-11:checked+label ~ .heroes>.hero.vertical.day-11 .module {-webkit-transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s, -webkit-transform 0.35s ease-in-out 0.3s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.vertical.day-11:checked+label ~ .heroes>.hero.vertical.day-11 .module {-webkit-transform: scale(0.4) translate(70%, 0); transform: scale(0.4) translate(70%, 0); -webkit-transform-origin: top right; transform-origin: top right; width: 100% } } body div#devskin12874096 input.vertical.day-11:checked+label ~ .heroes>.hero.vertical.day-11 .module .char-title {opacity: 1; -webkit-transition: opacity 0.3s ease-in-out 0.15s; transition: opacity 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-11:checked+label ~ .heroes>.hero.vertical.day-11 .module .day img, body div#devskin12874096 input.vertical.day-11:checked+label ~ .heroes>.hero.vertical.day-11 .module .char-title img, body div#devskin12874096 input.vertical.day-11:checked+label ~ .heroes>.hero.vertical.day-11 .module .credit, body div#devskin12874096 input.vertical.day-11:checked+label ~ .heroes>.hero.vertical.day-11 .module .quote {opacity: 1 } body div#devskin12874096 input.vertical.day-11:checked+label ~ .heroes>.hero.vertical.day-11 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.vertical.day-11:checked+label ~ .heroes>.hero.vertical.day-11 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.vertical.day-11:checked+label ~ .heroes>.hero.vertical.day-11 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.6s; transition: all 0.3s ease-in-out 0.6s } body div#devskin12874096 input.vertical.day-11:checked+label ~ .heroes>.hero.vertical.day-11 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.7s; transition: all 0.3s ease-in-out 0.7s } body div#devskin12874096 input.vertical.day-12:checked+label ~ .heroes>.hero.vertical.day-12 .background {-webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s } body div#devskin12874096 input.vertical.day-12:checked+label ~ .heroes>.hero.vertical.day-12 .background .artwork {opacity: 1; -webkit-transform: skew(-14.25deg) translate(0, 0%); transform: skew(-14.25deg) translate(0, 0%); -webkit-transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-12:checked+label ~ .heroes>.hero.vertical.day-12 .module {-webkit-transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s, -webkit-transform 0.35s ease-in-out 0.3s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.vertical.day-12:checked+label ~ .heroes>.hero.vertical.day-12 .module {-webkit-transform: scale(0.4) translate(70%, 0); transform: scale(0.4) translate(70%, 0); -webkit-transform-origin: top right; transform-origin: top right; width: 100% } } body div#devskin12874096 input.vertical.day-12:checked+label ~ .heroes>.hero.vertical.day-12 .module .char-title {opacity: 1; -webkit-transition: opacity 0.3s ease-in-out 0.15s; transition: opacity 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-12:checked+label ~ .heroes>.hero.vertical.day-12 .module .day img, body div#devskin12874096 input.vertical.day-12:checked+label ~ .heroes>.hero.vertical.day-12 .module .char-title img, body div#devskin12874096 input.vertical.day-12:checked+label ~ .heroes>.hero.vertical.day-12 .module .credit, body div#devskin12874096 input.vertical.day-12:checked+label ~ .heroes>.hero.vertical.day-12 .module .quote {opacity: 1 } body div#devskin12874096 input.vertical.day-12:checked+label ~ .heroes>.hero.vertical.day-12 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.vertical.day-12:checked+label ~ .heroes>.hero.vertical.day-12 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.vertical.day-12:checked+label ~ .heroes>.hero.vertical.day-12 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.6s; transition: all 0.3s ease-in-out 0.6s } body div#devskin12874096 input.vertical.day-12:checked+label ~ .heroes>.hero.vertical.day-12 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.7s; transition: all 0.3s ease-in-out 0.7s } body div#devskin12874096 input.vertical.day-13:checked+label ~ .heroes>.hero.vertical.day-13 .background {-webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s } body div#devskin12874096 input.vertical.day-13:checked+label ~ .heroes>.hero.vertical.day-13 .background .artwork {opacity: 1; -webkit-transform: skew(-14.25deg) translate(0, 0%); transform: skew(-14.25deg) translate(0, 0%); -webkit-transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-13:checked+label ~ .heroes>.hero.vertical.day-13 .module {-webkit-transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s, -webkit-transform 0.35s ease-in-out 0.3s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.vertical.day-13:checked+label ~ .heroes>.hero.vertical.day-13 .module {-webkit-transform: scale(0.4) translate(70%, 0); transform: scale(0.4) translate(70%, 0); -webkit-transform-origin: top right; transform-origin: top right; width: 100% } } body div#devskin12874096 input.vertical.day-13:checked+label ~ .heroes>.hero.vertical.day-13 .module .char-title {opacity: 1; -webkit-transition: opacity 0.3s ease-in-out 0.15s; transition: opacity 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-13:checked+label ~ .heroes>.hero.vertical.day-13 .module .day img, body div#devskin12874096 input.vertical.day-13:checked+label ~ .heroes>.hero.vertical.day-13 .module .char-title img, body div#devskin12874096 input.vertical.day-13:checked+label ~ .heroes>.hero.vertical.day-13 .module .credit, body div#devskin12874096 input.vertical.day-13:checked+label ~ .heroes>.hero.vertical.day-13 .module .quote {opacity: 1 } body div#devskin12874096 input.vertical.day-13:checked+label ~ .heroes>.hero.vertical.day-13 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.vertical.day-13:checked+label ~ .heroes>.hero.vertical.day-13 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.vertical.day-13:checked+label ~ .heroes>.hero.vertical.day-13 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.6s; transition: all 0.3s ease-in-out 0.6s } body div#devskin12874096 input.vertical.day-13:checked+label ~ .heroes>.hero.vertical.day-13 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.7s; transition: all 0.3s ease-in-out 0.7s } body div#devskin12874096 input.vertical.day-14:checked+label ~ .heroes>.hero.vertical.day-14 .background {-webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s } body div#devskin12874096 input.vertical.day-14:checked+label ~ .heroes>.hero.vertical.day-14 .background .artwork {opacity: 1; -webkit-transform: skew(-14.25deg) translate(0, 0%); transform: skew(-14.25deg) translate(0, 0%); -webkit-transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-14:checked+label ~ .heroes>.hero.vertical.day-14 .module {-webkit-transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s, -webkit-transform 0.35s ease-in-out 0.3s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.vertical.day-14:checked+label ~ .heroes>.hero.vertical.day-14 .module {-webkit-transform: scale(0.4) translate(70%, 0); transform: scale(0.4) translate(70%, 0); -webkit-transform-origin: top right; transform-origin: top right; width: 100% } } body div#devskin12874096 input.vertical.day-14:checked+label ~ .heroes>.hero.vertical.day-14 .module .char-title {opacity: 1; -webkit-transition: opacity 0.3s ease-in-out 0.15s; transition: opacity 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-14:checked+label ~ .heroes>.hero.vertical.day-14 .module .day img, body div#devskin12874096 input.vertical.day-14:checked+label ~ .heroes>.hero.vertical.day-14 .module .char-title img, body div#devskin12874096 input.vertical.day-14:checked+label ~ .heroes>.hero.vertical.day-14 .module .credit, body div#devskin12874096 input.vertical.day-14:checked+label ~ .heroes>.hero.vertical.day-14 .module .quote {opacity: 1 } body div#devskin12874096 input.vertical.day-14:checked+label ~ .heroes>.hero.vertical.day-14 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.vertical.day-14:checked+label ~ .heroes>.hero.vertical.day-14 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.vertical.day-14:checked+label ~ .heroes>.hero.vertical.day-14 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.6s; transition: all 0.3s ease-in-out 0.6s } body div#devskin12874096 input.vertical.day-14:checked+label ~ .heroes>.hero.vertical.day-14 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.7s; transition: all 0.3s ease-in-out 0.7s } body div#devskin12874096 input.vertical.day-15:checked+label ~ .heroes>.hero.vertical.day-15 .background {-webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s } body div#devskin12874096 input.vertical.day-15:checked+label ~ .heroes>.hero.vertical.day-15 .background .artwork {opacity: 1; -webkit-transform: skew(-14.25deg) translate(0, 0%); transform: skew(-14.25deg) translate(0, 0%); -webkit-transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-15:checked+label ~ .heroes>.hero.vertical.day-15 .module {-webkit-transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s, -webkit-transform 0.35s ease-in-out 0.3s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.vertical.day-15:checked+label ~ .heroes>.hero.vertical.day-15 .module {-webkit-transform: scale(0.4) translate(70%, 0); transform: scale(0.4) translate(70%, 0); -webkit-transform-origin: top right; transform-origin: top right; width: 100% } } body div#devskin12874096 input.vertical.day-15:checked+label ~ .heroes>.hero.vertical.day-15 .module .char-title {opacity: 1; -webkit-transition: opacity 0.3s ease-in-out 0.15s; transition: opacity 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-15:checked+label ~ .heroes>.hero.vertical.day-15 .module .day img, body div#devskin12874096 input.vertical.day-15:checked+label ~ .heroes>.hero.vertical.day-15 .module .char-title img, body div#devskin12874096 input.vertical.day-15:checked+label ~ .heroes>.hero.vertical.day-15 .module .credit, body div#devskin12874096 input.vertical.day-15:checked+label ~ .heroes>.hero.vertical.day-15 .module .quote {opacity: 1 } body div#devskin12874096 input.vertical.day-15:checked+label ~ .heroes>.hero.vertical.day-15 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.vertical.day-15:checked+label ~ .heroes>.hero.vertical.day-15 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.vertical.day-15:checked+label ~ .heroes>.hero.vertical.day-15 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.6s; transition: all 0.3s ease-in-out 0.6s } body div#devskin12874096 input.vertical.day-15:checked+label ~ .heroes>.hero.vertical.day-15 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.7s; transition: all 0.3s ease-in-out 0.7s } body div#devskin12874096 input.vertical.day-16:checked+label ~ .heroes>.hero.vertical.day-16 .background {-webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s } body div#devskin12874096 input.vertical.day-16:checked+label ~ .heroes>.hero.vertical.day-16 .background .artwork {opacity: 1; -webkit-transform: skew(-14.25deg) translate(0, 0%); transform: skew(-14.25deg) translate(0, 0%); -webkit-transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-16:checked+label ~ .heroes>.hero.vertical.day-16 .module {-webkit-transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s, -webkit-transform 0.35s ease-in-out 0.3s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.vertical.day-16:checked+label ~ .heroes>.hero.vertical.day-16 .module {-webkit-transform: scale(0.4) translate(70%, 0); transform: scale(0.4) translate(70%, 0); -webkit-transform-origin: top right; transform-origin: top right; width: 100% } } body div#devskin12874096 input.vertical.day-16:checked+label ~ .heroes>.hero.vertical.day-16 .module .char-title {opacity: 1; -webkit-transition: opacity 0.3s ease-in-out 0.15s; transition: opacity 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-16:checked+label ~ .heroes>.hero.vertical.day-16 .module .day img, body div#devskin12874096 input.vertical.day-16:checked+label ~ .heroes>.hero.vertical.day-16 .module .char-title img, body div#devskin12874096 input.vertical.day-16:checked+label ~ .heroes>.hero.vertical.day-16 .module .credit, body div#devskin12874096 input.vertical.day-16:checked+label ~ .heroes>.hero.vertical.day-16 .module .quote {opacity: 1 } body div#devskin12874096 input.vertical.day-16:checked+label ~ .heroes>.hero.vertical.day-16 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.vertical.day-16:checked+label ~ .heroes>.hero.vertical.day-16 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.vertical.day-16:checked+label ~ .heroes>.hero.vertical.day-16 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.6s; transition: all 0.3s ease-in-out 0.6s } body div#devskin12874096 input.vertical.day-16:checked+label ~ .heroes>.hero.vertical.day-16 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.7s; transition: all 0.3s ease-in-out 0.7s } body div#devskin12874096 input.vertical.day-17:checked+label ~ .heroes>.hero.vertical.day-17 .background {-webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s } body div#devskin12874096 input.vertical.day-17:checked+label ~ .heroes>.hero.vertical.day-17 .background .artwork {opacity: 1; -webkit-transform: skew(-14.25deg) translate(0, 0%); transform: skew(-14.25deg) translate(0, 0%); -webkit-transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-17:checked+label ~ .heroes>.hero.vertical.day-17 .module {-webkit-transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s, -webkit-transform 0.35s ease-in-out 0.3s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.vertical.day-17:checked+label ~ .heroes>.hero.vertical.day-17 .module {-webkit-transform: scale(0.4) translate(70%, 0); transform: scale(0.4) translate(70%, 0); -webkit-transform-origin: top right; transform-origin: top right; width: 100% } } body div#devskin12874096 input.vertical.day-17:checked+label ~ .heroes>.hero.vertical.day-17 .module .char-title {opacity: 1; -webkit-transition: opacity 0.3s ease-in-out 0.15s; transition: opacity 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-17:checked+label ~ .heroes>.hero.vertical.day-17 .module .day img, body div#devskin12874096 input.vertical.day-17:checked+label ~ .heroes>.hero.vertical.day-17 .module .char-title img, body div#devskin12874096 input.vertical.day-17:checked+label ~ .heroes>.hero.vertical.day-17 .module .credit, body div#devskin12874096 input.vertical.day-17:checked+label ~ .heroes>.hero.vertical.day-17 .module .quote {opacity: 1 } body div#devskin12874096 input.vertical.day-17:checked+label ~ .heroes>.hero.vertical.day-17 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.vertical.day-17:checked+label ~ .heroes>.hero.vertical.day-17 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.vertical.day-17:checked+label ~ .heroes>.hero.vertical.day-17 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.6s; transition: all 0.3s ease-in-out 0.6s } body div#devskin12874096 input.vertical.day-17:checked+label ~ .heroes>.hero.vertical.day-17 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.7s; transition: all 0.3s ease-in-out 0.7s } body div#devskin12874096 input.vertical.day-18:checked+label ~ .heroes>.hero.vertical.day-18 .background {-webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s } body div#devskin12874096 input.vertical.day-18:checked+label ~ .heroes>.hero.vertical.day-18 .background .artwork {opacity: 1; -webkit-transform: skew(-14.25deg) translate(0, 0%); transform: skew(-14.25deg) translate(0, 0%); -webkit-transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-18:checked+label ~ .heroes>.hero.vertical.day-18 .module {-webkit-transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s, -webkit-transform 0.35s ease-in-out 0.3s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.vertical.day-18:checked+label ~ .heroes>.hero.vertical.day-18 .module {-webkit-transform: scale(0.4) translate(70%, 0); transform: scale(0.4) translate(70%, 0); -webkit-transform-origin: top right; transform-origin: top right; width: 100% } } body div#devskin12874096 input.vertical.day-18:checked+label ~ .heroes>.hero.vertical.day-18 .module .char-title {opacity: 1; -webkit-transition: opacity 0.3s ease-in-out 0.15s; transition: opacity 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-18:checked+label ~ .heroes>.hero.vertical.day-18 .module .day img, body div#devskin12874096 input.vertical.day-18:checked+label ~ .heroes>.hero.vertical.day-18 .module .char-title img, body div#devskin12874096 input.vertical.day-18:checked+label ~ .heroes>.hero.vertical.day-18 .module .credit, body div#devskin12874096 input.vertical.day-18:checked+label ~ .heroes>.hero.vertical.day-18 .module .quote {opacity: 1 } body div#devskin12874096 input.vertical.day-18:checked+label ~ .heroes>.hero.vertical.day-18 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.vertical.day-18:checked+label ~ .heroes>.hero.vertical.day-18 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.vertical.day-18:checked+label ~ .heroes>.hero.vertical.day-18 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.6s; transition: all 0.3s ease-in-out 0.6s } body div#devskin12874096 input.vertical.day-18:checked+label ~ .heroes>.hero.vertical.day-18 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.7s; transition: all 0.3s ease-in-out 0.7s } body div#devskin12874096 input.vertical.day-19:checked+label ~ .heroes>.hero.vertical.day-19 .background {-webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s } body div#devskin12874096 input.vertical.day-19:checked+label ~ .heroes>.hero.vertical.day-19 .background .artwork {opacity: 1; -webkit-transform: skew(-14.25deg) translate(0, 0%); transform: skew(-14.25deg) translate(0, 0%); -webkit-transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-19:checked+label ~ .heroes>.hero.vertical.day-19 .module {-webkit-transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s, -webkit-transform 0.35s ease-in-out 0.3s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.vertical.day-19:checked+label ~ .heroes>.hero.vertical.day-19 .module {-webkit-transform: scale(0.4) translate(70%, 0); transform: scale(0.4) translate(70%, 0); -webkit-transform-origin: top right; transform-origin: top right; width: 100% } } body div#devskin12874096 input.vertical.day-19:checked+label ~ .heroes>.hero.vertical.day-19 .module .char-title {opacity: 1; -webkit-transition: opacity 0.3s ease-in-out 0.15s; transition: opacity 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-19:checked+label ~ .heroes>.hero.vertical.day-19 .module .day img, body div#devskin12874096 input.vertical.day-19:checked+label ~ .heroes>.hero.vertical.day-19 .module .char-title img, body div#devskin12874096 input.vertical.day-19:checked+label ~ .heroes>.hero.vertical.day-19 .module .credit, body div#devskin12874096 input.vertical.day-19:checked+label ~ .heroes>.hero.vertical.day-19 .module .quote {opacity: 1 } body div#devskin12874096 input.vertical.day-19:checked+label ~ .heroes>.hero.vertical.day-19 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.vertical.day-19:checked+label ~ .heroes>.hero.vertical.day-19 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.vertical.day-19:checked+label ~ .heroes>.hero.vertical.day-19 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.6s; transition: all 0.3s ease-in-out 0.6s } body div#devskin12874096 input.vertical.day-19:checked+label ~ .heroes>.hero.vertical.day-19 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.7s; transition: all 0.3s ease-in-out 0.7s } body div#devskin12874096 input.vertical.day-20:checked+label ~ .heroes>.hero.vertical.day-20 .background {-webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s } body div#devskin12874096 input.vertical.day-20:checked+label ~ .heroes>.hero.vertical.day-20 .background .artwork {opacity: 1; -webkit-transform: skew(-14.25deg) translate(0, 0%); transform: skew(-14.25deg) translate(0, 0%); -webkit-transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-20:checked+label ~ .heroes>.hero.vertical.day-20 .module {-webkit-transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s, -webkit-transform 0.35s ease-in-out 0.3s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.vertical.day-20:checked+label ~ .heroes>.hero.vertical.day-20 .module {-webkit-transform: scale(0.4) translate(70%, 0); transform: scale(0.4) translate(70%, 0); -webkit-transform-origin: top right; transform-origin: top right; width: 100% } } body div#devskin12874096 input.vertical.day-20:checked+label ~ .heroes>.hero.vertical.day-20 .module .char-title {opacity: 1; -webkit-transition: opacity 0.3s ease-in-out 0.15s; transition: opacity 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-20:checked+label ~ .heroes>.hero.vertical.day-20 .module .day img, body div#devskin12874096 input.vertical.day-20:checked+label ~ .heroes>.hero.vertical.day-20 .module .char-title img, body div#devskin12874096 input.vertical.day-20:checked+label ~ .heroes>.hero.vertical.day-20 .module .credit, body div#devskin12874096 input.vertical.day-20:checked+label ~ .heroes>.hero.vertical.day-20 .module .quote {opacity: 1 } body div#devskin12874096 input.vertical.day-20:checked+label ~ .heroes>.hero.vertical.day-20 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.vertical.day-20:checked+label ~ .heroes>.hero.vertical.day-20 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.vertical.day-20:checked+label ~ .heroes>.hero.vertical.day-20 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.6s; transition: all 0.3s ease-in-out 0.6s } body div#devskin12874096 input.vertical.day-20:checked+label ~ .heroes>.hero.vertical.day-20 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.7s; transition: all 0.3s ease-in-out 0.7s } body div#devskin12874096 input.vertical.day-21:checked+label ~ .heroes>.hero.vertical.day-21 .background {-webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s } body div#devskin12874096 input.vertical.day-21:checked+label ~ .heroes>.hero.vertical.day-21 .background .artwork {opacity: 1; -webkit-transform: skew(-14.25deg) translate(0, 0%); transform: skew(-14.25deg) translate(0, 0%); -webkit-transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s; transition: transform 0.3s ease-in-out 0.15s, opacity 0.35s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-21:checked+label ~ .heroes>.hero.vertical.day-21 .module {-webkit-transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: -webkit-transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s; transition: transform 0.35s ease-in-out 0.3s, -webkit-transform 0.35s ease-in-out 0.3s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.vertical.day-21:checked+label ~ .heroes>.hero.vertical.day-21 .module {-webkit-transform: scale(0.4) translate(70%, 0); transform: scale(0.4) translate(70%, 0); -webkit-transform-origin: top right; transform-origin: top right; width: 100% } } body div#devskin12874096 input.vertical.day-21:checked+label ~ .heroes>.hero.vertical.day-21 .module .char-title {opacity: 1; -webkit-transition: opacity 0.3s ease-in-out 0.15s; transition: opacity 0.3s ease-in-out 0.15s } body div#devskin12874096 input.vertical.day-21:checked+label ~ .heroes>.hero.vertical.day-21 .module .day img, body div#devskin12874096 input.vertical.day-21:checked+label ~ .heroes>.hero.vertical.day-21 .module .char-title img, body div#devskin12874096 input.vertical.day-21:checked+label ~ .heroes>.hero.vertical.day-21 .module .credit, body div#devskin12874096 input.vertical.day-21:checked+label ~ .heroes>.hero.vertical.day-21 .module .quote {opacity: 1 } body div#devskin12874096 input.vertical.day-21:checked+label ~ .heroes>.hero.vertical.day-21 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.vertical.day-21:checked+label ~ .heroes>.hero.vertical.day-21 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.vertical.day-21:checked+label ~ .heroes>.hero.vertical.day-21 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.6s; transition: all 0.3s ease-in-out 0.6s } body div#devskin12874096 input.vertical.day-21:checked+label ~ .heroes>.hero.vertical.day-21 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.7s; transition: all 0.3s ease-in-out 0.7s } body div#devskin12874096 input.horizontal+label ~ .heroes>.hero.horizontal .background {background: #000 } body div#devskin12874096 input.horizontal+label ~ .heroes>.hero.horizontal .background .artwork {opacity: 0; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0.6s; transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0.6s; transition: transform 0.6s ease-in-out 0.6s, opacity 0.3s ease-in-out 0s; transition: transform 0.6s ease-in-out 0.6s, opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0.6s } body div#devskin12874096 input.horizontal+label ~ .heroes>.hero.horizontal .module {opacity: 0; -webkit-transition: -webkit-transform 0s ease-in-out 0.6s; transition: -webkit-transform 0s ease-in-out 0.6s; transition: transform 0s ease-in-out 0.6s; transition: transform 0s ease-in-out 0.6s, -webkit-transform 0s ease-in-out 0.6s; -webkit-transform: translate(-115%, 0); transform: translate(-115%, 0); -webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal+label ~ .heroes>.hero.horizontal .module:nth-of-type(2) {-webkit-transform: translate(115%, 0); transform: translate(115%, 0) } body div#devskin12874096 input.horizontal+label ~ .heroes>.hero.horizontal .module .day img, body div#devskin12874096 input.horizontal+label ~ .heroes>.hero.horizontal .module .char-title img, body div#devskin12874096 input.horizontal+label ~ .heroes>.hero.horizontal .module .credit, body div#devskin12874096 input.horizontal+label ~ .heroes>.hero.horizontal .module .quote {opacity: 0; -webkit-transition: opacity 0s ease-in-out 0.3s; transition: opacity 0s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-1:checked+label ~ .heroes>.hero.horizontal.day-1 .background .artwork {opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s } body div#devskin12874096 input.horizontal.day-1:checked+label ~ .heroes>.hero.horizontal.day-1 .module {opacity: 1; -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-1:checked+label ~ .heroes>.hero.horizontal.day-1 .module {-webkit-transform: scale(0.4); transform: scale(0.4); width: 100%; -webkit-transform-origin: bottom left; transform-origin: bottom left } } body div#devskin12874096 input.horizontal.day-1:checked+label ~ .heroes>.hero.horizontal.day-1 .module .day img, body div#devskin12874096 input.horizontal.day-1:checked+label ~ .heroes>.hero.horizontal.day-1 .module .char-title img, body div#devskin12874096 input.horizontal.day-1:checked+label ~ .heroes>.hero.horizontal.day-1 .module .credit, body div#devskin12874096 input.horizontal.day-1:checked+label ~ .heroes>.hero.horizontal.day-1 .module .quote {opacity: 1 } body div#devskin12874096 input.horizontal.day-1:checked+label ~ .heroes>.hero.horizontal.day-1 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-1:checked+label ~ .heroes>.hero.horizontal.day-1 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-1:checked+label ~ .heroes>.hero.horizontal.day-1 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.horizontal.day-1:checked+label ~ .heroes>.hero.horizontal.day-1 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.horizontal.day-1:checked+label ~ .heroes>.hero.horizontal.day-1 .module:nth-of-type(2) {-webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-1:checked+label ~ .heroes>.hero.horizontal.day-1 .module:nth-of-type(2) {-webkit-transform: translate(0, 0) scale(0.4); transform: translate(0, 0) scale(0.4); width: 100%; -webkit-transform-origin: bottom right; transform-origin: bottom right } } body div#devskin12874096 input.horizontal.day-2:checked+label ~ .heroes>.hero.horizontal.day-2 .background .artwork {opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s } body div#devskin12874096 input.horizontal.day-2:checked+label ~ .heroes>.hero.horizontal.day-2 .module {opacity: 1; -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-2:checked+label ~ .heroes>.hero.horizontal.day-2 .module {-webkit-transform: scale(0.4); transform: scale(0.4); width: 100%; -webkit-transform-origin: bottom left; transform-origin: bottom left } } body div#devskin12874096 input.horizontal.day-2:checked+label ~ .heroes>.hero.horizontal.day-2 .module .day img, body div#devskin12874096 input.horizontal.day-2:checked+label ~ .heroes>.hero.horizontal.day-2 .module .char-title img, body div#devskin12874096 input.horizontal.day-2:checked+label ~ .heroes>.hero.horizontal.day-2 .module .credit, body div#devskin12874096 input.horizontal.day-2:checked+label ~ .heroes>.hero.horizontal.day-2 .module .quote {opacity: 1 } body div#devskin12874096 input.horizontal.day-2:checked+label ~ .heroes>.hero.horizontal.day-2 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-2:checked+label ~ .heroes>.hero.horizontal.day-2 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-2:checked+label ~ .heroes>.hero.horizontal.day-2 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.horizontal.day-2:checked+label ~ .heroes>.hero.horizontal.day-2 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.horizontal.day-2:checked+label ~ .heroes>.hero.horizontal.day-2 .module:nth-of-type(2) {-webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-2:checked+label ~ .heroes>.hero.horizontal.day-2 .module:nth-of-type(2) {-webkit-transform: translate(0, 0) scale(0.4); transform: translate(0, 0) scale(0.4); width: 100%; -webkit-transform-origin: bottom right; transform-origin: bottom right } } body div#devskin12874096 input.horizontal.day-3:checked+label ~ .heroes>.hero.horizontal.day-3 .background .artwork {opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s } body div#devskin12874096 input.horizontal.day-3:checked+label ~ .heroes>.hero.horizontal.day-3 .module {opacity: 1; -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-3:checked+label ~ .heroes>.hero.horizontal.day-3 .module {-webkit-transform: scale(0.4); transform: scale(0.4); width: 100%; -webkit-transform-origin: bottom left; transform-origin: bottom left } } body div#devskin12874096 input.horizontal.day-3:checked+label ~ .heroes>.hero.horizontal.day-3 .module .day img, body div#devskin12874096 input.horizontal.day-3:checked+label ~ .heroes>.hero.horizontal.day-3 .module .char-title img, body div#devskin12874096 input.horizontal.day-3:checked+label ~ .heroes>.hero.horizontal.day-3 .module .credit, body div#devskin12874096 input.horizontal.day-3:checked+label ~ .heroes>.hero.horizontal.day-3 .module .quote {opacity: 1 } body div#devskin12874096 input.horizontal.day-3:checked+label ~ .heroes>.hero.horizontal.day-3 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-3:checked+label ~ .heroes>.hero.horizontal.day-3 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-3:checked+label ~ .heroes>.hero.horizontal.day-3 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.horizontal.day-3:checked+label ~ .heroes>.hero.horizontal.day-3 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.horizontal.day-3:checked+label ~ .heroes>.hero.horizontal.day-3 .module:nth-of-type(2) {-webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-3:checked+label ~ .heroes>.hero.horizontal.day-3 .module:nth-of-type(2) {-webkit-transform: translate(0, 0) scale(0.4); transform: translate(0, 0) scale(0.4); width: 100%; -webkit-transform-origin: bottom right; transform-origin: bottom right } } body div#devskin12874096 input.horizontal.day-4:checked+label ~ .heroes>.hero.horizontal.day-4 .background .artwork {opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s } body div#devskin12874096 input.horizontal.day-4:checked+label ~ .heroes>.hero.horizontal.day-4 .module {opacity: 1; -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-4:checked+label ~ .heroes>.hero.horizontal.day-4 .module {-webkit-transform: scale(0.4); transform: scale(0.4); width: 100%; -webkit-transform-origin: bottom left; transform-origin: bottom left } } body div#devskin12874096 input.horizontal.day-4:checked+label ~ .heroes>.hero.horizontal.day-4 .module .day img, body div#devskin12874096 input.horizontal.day-4:checked+label ~ .heroes>.hero.horizontal.day-4 .module .char-title img, body div#devskin12874096 input.horizontal.day-4:checked+label ~ .heroes>.hero.horizontal.day-4 .module .credit, body div#devskin12874096 input.horizontal.day-4:checked+label ~ .heroes>.hero.horizontal.day-4 .module .quote {opacity: 1 } body div#devskin12874096 input.horizontal.day-4:checked+label ~ .heroes>.hero.horizontal.day-4 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-4:checked+label ~ .heroes>.hero.horizontal.day-4 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-4:checked+label ~ .heroes>.hero.horizontal.day-4 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.horizontal.day-4:checked+label ~ .heroes>.hero.horizontal.day-4 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.horizontal.day-4:checked+label ~ .heroes>.hero.horizontal.day-4 .module:nth-of-type(2) {-webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-4:checked+label ~ .heroes>.hero.horizontal.day-4 .module:nth-of-type(2) {-webkit-transform: translate(0, 0) scale(0.4); transform: translate(0, 0) scale(0.4); width: 100%; -webkit-transform-origin: bottom right; transform-origin: bottom right } } body div#devskin12874096 input.horizontal.day-5:checked+label ~ .heroes>.hero.horizontal.day-5 .background .artwork {opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s } body div#devskin12874096 input.horizontal.day-5:checked+label ~ .heroes>.hero.horizontal.day-5 .module {opacity: 1; -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-5:checked+label ~ .heroes>.hero.horizontal.day-5 .module {-webkit-transform: scale(0.4); transform: scale(0.4); width: 100%; -webkit-transform-origin: bottom left; transform-origin: bottom left } } body div#devskin12874096 input.horizontal.day-5:checked+label ~ .heroes>.hero.horizontal.day-5 .module .day img, body div#devskin12874096 input.horizontal.day-5:checked+label ~ .heroes>.hero.horizontal.day-5 .module .char-title img, body div#devskin12874096 input.horizontal.day-5:checked+label ~ .heroes>.hero.horizontal.day-5 .module .credit, body div#devskin12874096 input.horizontal.day-5:checked+label ~ .heroes>.hero.horizontal.day-5 .module .quote {opacity: 1 } body div#devskin12874096 input.horizontal.day-5:checked+label ~ .heroes>.hero.horizontal.day-5 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-5:checked+label ~ .heroes>.hero.horizontal.day-5 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-5:checked+label ~ .heroes>.hero.horizontal.day-5 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.horizontal.day-5:checked+label ~ .heroes>.hero.horizontal.day-5 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.horizontal.day-5:checked+label ~ .heroes>.hero.horizontal.day-5 .module:nth-of-type(2) {-webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-5:checked+label ~ .heroes>.hero.horizontal.day-5 .module:nth-of-type(2) {-webkit-transform: translate(0, 0) scale(0.4); transform: translate(0, 0) scale(0.4); width: 100%; -webkit-transform-origin: bottom right; transform-origin: bottom right } } body div#devskin12874096 input.horizontal.day-6:checked+label ~ .heroes>.hero.horizontal.day-6 .background .artwork {opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s } body div#devskin12874096 input.horizontal.day-6:checked+label ~ .heroes>.hero.horizontal.day-6 .module {opacity: 1; -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-6:checked+label ~ .heroes>.hero.horizontal.day-6 .module {-webkit-transform: scale(0.4); transform: scale(0.4); width: 100%; -webkit-transform-origin: bottom left; transform-origin: bottom left } } body div#devskin12874096 input.horizontal.day-6:checked+label ~ .heroes>.hero.horizontal.day-6 .module .day img, body div#devskin12874096 input.horizontal.day-6:checked+label ~ .heroes>.hero.horizontal.day-6 .module .char-title img, body div#devskin12874096 input.horizontal.day-6:checked+label ~ .heroes>.hero.horizontal.day-6 .module .credit, body div#devskin12874096 input.horizontal.day-6:checked+label ~ .heroes>.hero.horizontal.day-6 .module .quote {opacity: 1 } body div#devskin12874096 input.horizontal.day-6:checked+label ~ .heroes>.hero.horizontal.day-6 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-6:checked+label ~ .heroes>.hero.horizontal.day-6 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-6:checked+label ~ .heroes>.hero.horizontal.day-6 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.horizontal.day-6:checked+label ~ .heroes>.hero.horizontal.day-6 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.horizontal.day-6:checked+label ~ .heroes>.hero.horizontal.day-6 .module:nth-of-type(2) {-webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-6:checked+label ~ .heroes>.hero.horizontal.day-6 .module:nth-of-type(2) {-webkit-transform: translate(0, 0) scale(0.4); transform: translate(0, 0) scale(0.4); width: 100%; -webkit-transform-origin: bottom right; transform-origin: bottom right } } body div#devskin12874096 input.horizontal.day-7:checked+label ~ .heroes>.hero.horizontal.day-7 .background .artwork {opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s } body div#devskin12874096 input.horizontal.day-7:checked+label ~ .heroes>.hero.horizontal.day-7 .module {opacity: 1; -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-7:checked+label ~ .heroes>.hero.horizontal.day-7 .module {-webkit-transform: scale(0.4); transform: scale(0.4); width: 100%; -webkit-transform-origin: bottom left; transform-origin: bottom left } } body div#devskin12874096 input.horizontal.day-7:checked+label ~ .heroes>.hero.horizontal.day-7 .module .day img, body div#devskin12874096 input.horizontal.day-7:checked+label ~ .heroes>.hero.horizontal.day-7 .module .char-title img, body div#devskin12874096 input.horizontal.day-7:checked+label ~ .heroes>.hero.horizontal.day-7 .module .credit, body div#devskin12874096 input.horizontal.day-7:checked+label ~ .heroes>.hero.horizontal.day-7 .module .quote {opacity: 1 } body div#devskin12874096 input.horizontal.day-7:checked+label ~ .heroes>.hero.horizontal.day-7 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-7:checked+label ~ .heroes>.hero.horizontal.day-7 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-7:checked+label ~ .heroes>.hero.horizontal.day-7 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.horizontal.day-7:checked+label ~ .heroes>.hero.horizontal.day-7 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.horizontal.day-7:checked+label ~ .heroes>.hero.horizontal.day-7 .module:nth-of-type(2) {-webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-7:checked+label ~ .heroes>.hero.horizontal.day-7 .module:nth-of-type(2) {-webkit-transform: translate(0, 0) scale(0.4); transform: translate(0, 0) scale(0.4); width: 100%; -webkit-transform-origin: bottom right; transform-origin: bottom right } } body div#devskin12874096 input.horizontal.day-8:checked+label ~ .heroes>.hero.horizontal.day-8 .background .artwork {opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s } body div#devskin12874096 input.horizontal.day-8:checked+label ~ .heroes>.hero.horizontal.day-8 .module {opacity: 1; -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-8:checked+label ~ .heroes>.hero.horizontal.day-8 .module {-webkit-transform: scale(0.4); transform: scale(0.4); width: 100%; -webkit-transform-origin: bottom left; transform-origin: bottom left } } body div#devskin12874096 input.horizontal.day-8:checked+label ~ .heroes>.hero.horizontal.day-8 .module .day img, body div#devskin12874096 input.horizontal.day-8:checked+label ~ .heroes>.hero.horizontal.day-8 .module .char-title img, body div#devskin12874096 input.horizontal.day-8:checked+label ~ .heroes>.hero.horizontal.day-8 .module .credit, body div#devskin12874096 input.horizontal.day-8:checked+label ~ .heroes>.hero.horizontal.day-8 .module .quote {opacity: 1 } body div#devskin12874096 input.horizontal.day-8:checked+label ~ .heroes>.hero.horizontal.day-8 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-8:checked+label ~ .heroes>.hero.horizontal.day-8 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-8:checked+label ~ .heroes>.hero.horizontal.day-8 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.horizontal.day-8:checked+label ~ .heroes>.hero.horizontal.day-8 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.horizontal.day-8:checked+label ~ .heroes>.hero.horizontal.day-8 .module:nth-of-type(2) {-webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-8:checked+label ~ .heroes>.hero.horizontal.day-8 .module:nth-of-type(2) {-webkit-transform: translate(0, 0) scale(0.4); transform: translate(0, 0) scale(0.4); width: 100%; -webkit-transform-origin: bottom right; transform-origin: bottom right } } body div#devskin12874096 input.horizontal.day-9:checked+label ~ .heroes>.hero.horizontal.day-9 .background .artwork {opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s } body div#devskin12874096 input.horizontal.day-9:checked+label ~ .heroes>.hero.horizontal.day-9 .module {opacity: 1; -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-9:checked+label ~ .heroes>.hero.horizontal.day-9 .module {-webkit-transform: scale(0.4); transform: scale(0.4); width: 100%; -webkit-transform-origin: bottom left; transform-origin: bottom left } } body div#devskin12874096 input.horizontal.day-9:checked+label ~ .heroes>.hero.horizontal.day-9 .module .day img, body div#devskin12874096 input.horizontal.day-9:checked+label ~ .heroes>.hero.horizontal.day-9 .module .char-title img, body div#devskin12874096 input.horizontal.day-9:checked+label ~ .heroes>.hero.horizontal.day-9 .module .credit, body div#devskin12874096 input.horizontal.day-9:checked+label ~ .heroes>.hero.horizontal.day-9 .module .quote {opacity: 1 } body div#devskin12874096 input.horizontal.day-9:checked+label ~ .heroes>.hero.horizontal.day-9 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-9:checked+label ~ .heroes>.hero.horizontal.day-9 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-9:checked+label ~ .heroes>.hero.horizontal.day-9 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.horizontal.day-9:checked+label ~ .heroes>.hero.horizontal.day-9 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.horizontal.day-9:checked+label ~ .heroes>.hero.horizontal.day-9 .module:nth-of-type(2) {-webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-9:checked+label ~ .heroes>.hero.horizontal.day-9 .module:nth-of-type(2) {-webkit-transform: translate(0, 0) scale(0.4); transform: translate(0, 0) scale(0.4); width: 100%; -webkit-transform-origin: bottom right; transform-origin: bottom right } } body div#devskin12874096 input.horizontal.day-10:checked+label ~ .heroes>.hero.horizontal.day-10 .background .artwork {opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s } body div#devskin12874096 input.horizontal.day-10:checked+label ~ .heroes>.hero.horizontal.day-10 .module {opacity: 1; -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-10:checked+label ~ .heroes>.hero.horizontal.day-10 .module {-webkit-transform: scale(0.4); transform: scale(0.4); width: 100%; -webkit-transform-origin: bottom left; transform-origin: bottom left } } body div#devskin12874096 input.horizontal.day-10:checked+label ~ .heroes>.hero.horizontal.day-10 .module .day img, body div#devskin12874096 input.horizontal.day-10:checked+label ~ .heroes>.hero.horizontal.day-10 .module .char-title img, body div#devskin12874096 input.horizontal.day-10:checked+label ~ .heroes>.hero.horizontal.day-10 .module .credit, body div#devskin12874096 input.horizontal.day-10:checked+label ~ .heroes>.hero.horizontal.day-10 .module .quote {opacity: 1 } body div#devskin12874096 input.horizontal.day-10:checked+label ~ .heroes>.hero.horizontal.day-10 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-10:checked+label ~ .heroes>.hero.horizontal.day-10 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-10:checked+label ~ .heroes>.hero.horizontal.day-10 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.horizontal.day-10:checked+label ~ .heroes>.hero.horizontal.day-10 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.horizontal.day-10:checked+label ~ .heroes>.hero.horizontal.day-10 .module:nth-of-type(2) {-webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-10:checked+label ~ .heroes>.hero.horizontal.day-10 .module:nth-of-type(2) {-webkit-transform: translate(0, 0) scale(0.4); transform: translate(0, 0) scale(0.4); width: 100%; -webkit-transform-origin: bottom right; transform-origin: bottom right } } body div#devskin12874096 input.horizontal.day-11:checked+label ~ .heroes>.hero.horizontal.day-11 .background .artwork {opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s } body div#devskin12874096 input.horizontal.day-11:checked+label ~ .heroes>.hero.horizontal.day-11 .module {opacity: 1; -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-11:checked+label ~ .heroes>.hero.horizontal.day-11 .module {-webkit-transform: scale(0.4); transform: scale(0.4); width: 100%; -webkit-transform-origin: bottom left; transform-origin: bottom left } } body div#devskin12874096 input.horizontal.day-11:checked+label ~ .heroes>.hero.horizontal.day-11 .module .day img, body div#devskin12874096 input.horizontal.day-11:checked+label ~ .heroes>.hero.horizontal.day-11 .module .char-title img, body div#devskin12874096 input.horizontal.day-11:checked+label ~ .heroes>.hero.horizontal.day-11 .module .credit, body div#devskin12874096 input.horizontal.day-11:checked+label ~ .heroes>.hero.horizontal.day-11 .module .quote {opacity: 1 } body div#devskin12874096 input.horizontal.day-11:checked+label ~ .heroes>.hero.horizontal.day-11 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-11:checked+label ~ .heroes>.hero.horizontal.day-11 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-11:checked+label ~ .heroes>.hero.horizontal.day-11 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.horizontal.day-11:checked+label ~ .heroes>.hero.horizontal.day-11 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.horizontal.day-11:checked+label ~ .heroes>.hero.horizontal.day-11 .module:nth-of-type(2) {-webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-11:checked+label ~ .heroes>.hero.horizontal.day-11 .module:nth-of-type(2) {-webkit-transform: translate(0, 0) scale(0.4); transform: translate(0, 0) scale(0.4); width: 100%; -webkit-transform-origin: bottom right; transform-origin: bottom right } } body div#devskin12874096 input.horizontal.day-12:checked+label ~ .heroes>.hero.horizontal.day-12 .background .artwork {opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s } body div#devskin12874096 input.horizontal.day-12:checked+label ~ .heroes>.hero.horizontal.day-12 .module {opacity: 1; -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-12:checked+label ~ .heroes>.hero.horizontal.day-12 .module {-webkit-transform: scale(0.4); transform: scale(0.4); width: 100%; -webkit-transform-origin: bottom left; transform-origin: bottom left } } body div#devskin12874096 input.horizontal.day-12:checked+label ~ .heroes>.hero.horizontal.day-12 .module .day img, body div#devskin12874096 input.horizontal.day-12:checked+label ~ .heroes>.hero.horizontal.day-12 .module .char-title img, body div#devskin12874096 input.horizontal.day-12:checked+label ~ .heroes>.hero.horizontal.day-12 .module .credit, body div#devskin12874096 input.horizontal.day-12:checked+label ~ .heroes>.hero.horizontal.day-12 .module .quote {opacity: 1 } body div#devskin12874096 input.horizontal.day-12:checked+label ~ .heroes>.hero.horizontal.day-12 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-12:checked+label ~ .heroes>.hero.horizontal.day-12 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-12:checked+label ~ .heroes>.hero.horizontal.day-12 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.horizontal.day-12:checked+label ~ .heroes>.hero.horizontal.day-12 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.horizontal.day-12:checked+label ~ .heroes>.hero.horizontal.day-12 .module:nth-of-type(2) {-webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-12:checked+label ~ .heroes>.hero.horizontal.day-12 .module:nth-of-type(2) {-webkit-transform: translate(0, 0) scale(0.4); transform: translate(0, 0) scale(0.4); width: 100%; -webkit-transform-origin: bottom right; transform-origin: bottom right } } body div#devskin12874096 input.horizontal.day-13:checked+label ~ .heroes>.hero.horizontal.day-13 .background .artwork {opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s } body div#devskin12874096 input.horizontal.day-13:checked+label ~ .heroes>.hero.horizontal.day-13 .module {opacity: 1; -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-13:checked+label ~ .heroes>.hero.horizontal.day-13 .module {-webkit-transform: scale(0.4); transform: scale(0.4); width: 100%; -webkit-transform-origin: bottom left; transform-origin: bottom left } } body div#devskin12874096 input.horizontal.day-13:checked+label ~ .heroes>.hero.horizontal.day-13 .module .day img, body div#devskin12874096 input.horizontal.day-13:checked+label ~ .heroes>.hero.horizontal.day-13 .module .char-title img, body div#devskin12874096 input.horizontal.day-13:checked+label ~ .heroes>.hero.horizontal.day-13 .module .credit, body div#devskin12874096 input.horizontal.day-13:checked+label ~ .heroes>.hero.horizontal.day-13 .module .quote {opacity: 1 } body div#devskin12874096 input.horizontal.day-13:checked+label ~ .heroes>.hero.horizontal.day-13 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-13:checked+label ~ .heroes>.hero.horizontal.day-13 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-13:checked+label ~ .heroes>.hero.horizontal.day-13 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.horizontal.day-13:checked+label ~ .heroes>.hero.horizontal.day-13 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.horizontal.day-13:checked+label ~ .heroes>.hero.horizontal.day-13 .module:nth-of-type(2) {-webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-13:checked+label ~ .heroes>.hero.horizontal.day-13 .module:nth-of-type(2) {-webkit-transform: translate(0, 0) scale(0.4); transform: translate(0, 0) scale(0.4); width: 100%; -webkit-transform-origin: bottom right; transform-origin: bottom right } } body div#devskin12874096 input.horizontal.day-14:checked+label ~ .heroes>.hero.horizontal.day-14 .background .artwork {opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s } body div#devskin12874096 input.horizontal.day-14:checked+label ~ .heroes>.hero.horizontal.day-14 .module {opacity: 1; -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-14:checked+label ~ .heroes>.hero.horizontal.day-14 .module {-webkit-transform: scale(0.4); transform: scale(0.4); width: 100%; -webkit-transform-origin: bottom left; transform-origin: bottom left } } body div#devskin12874096 input.horizontal.day-14:checked+label ~ .heroes>.hero.horizontal.day-14 .module .day img, body div#devskin12874096 input.horizontal.day-14:checked+label ~ .heroes>.hero.horizontal.day-14 .module .char-title img, body div#devskin12874096 input.horizontal.day-14:checked+label ~ .heroes>.hero.horizontal.day-14 .module .credit, body div#devskin12874096 input.horizontal.day-14:checked+label ~ .heroes>.hero.horizontal.day-14 .module .quote {opacity: 1 } body div#devskin12874096 input.horizontal.day-14:checked+label ~ .heroes>.hero.horizontal.day-14 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-14:checked+label ~ .heroes>.hero.horizontal.day-14 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-14:checked+label ~ .heroes>.hero.horizontal.day-14 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.horizontal.day-14:checked+label ~ .heroes>.hero.horizontal.day-14 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.horizontal.day-14:checked+label ~ .heroes>.hero.horizontal.day-14 .module:nth-of-type(2) {-webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-14:checked+label ~ .heroes>.hero.horizontal.day-14 .module:nth-of-type(2) {-webkit-transform: translate(0, 0) scale(0.4); transform: translate(0, 0) scale(0.4); width: 100%; -webkit-transform-origin: bottom right; transform-origin: bottom right } } body div#devskin12874096 input.horizontal.day-15:checked+label ~ .heroes>.hero.horizontal.day-15 .background .artwork {opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s } body div#devskin12874096 input.horizontal.day-15:checked+label ~ .heroes>.hero.horizontal.day-15 .module {opacity: 1; -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-15:checked+label ~ .heroes>.hero.horizontal.day-15 .module {-webkit-transform: scale(0.4); transform: scale(0.4); width: 100%; -webkit-transform-origin: bottom left; transform-origin: bottom left } } body div#devskin12874096 input.horizontal.day-15:checked+label ~ .heroes>.hero.horizontal.day-15 .module .day img, body div#devskin12874096 input.horizontal.day-15:checked+label ~ .heroes>.hero.horizontal.day-15 .module .char-title img, body div#devskin12874096 input.horizontal.day-15:checked+label ~ .heroes>.hero.horizontal.day-15 .module .credit, body div#devskin12874096 input.horizontal.day-15:checked+label ~ .heroes>.hero.horizontal.day-15 .module .quote {opacity: 1 } body div#devskin12874096 input.horizontal.day-15:checked+label ~ .heroes>.hero.horizontal.day-15 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-15:checked+label ~ .heroes>.hero.horizontal.day-15 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-15:checked+label ~ .heroes>.hero.horizontal.day-15 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.horizontal.day-15:checked+label ~ .heroes>.hero.horizontal.day-15 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.horizontal.day-15:checked+label ~ .heroes>.hero.horizontal.day-15 .module:nth-of-type(2) {-webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-15:checked+label ~ .heroes>.hero.horizontal.day-15 .module:nth-of-type(2) {-webkit-transform: translate(0, 0) scale(0.4); transform: translate(0, 0) scale(0.4); width: 100%; -webkit-transform-origin: bottom right; transform-origin: bottom right } } body div#devskin12874096 input.horizontal.day-16:checked+label ~ .heroes>.hero.horizontal.day-16 .background .artwork {opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s } body div#devskin12874096 input.horizontal.day-16:checked+label ~ .heroes>.hero.horizontal.day-16 .module {opacity: 1; -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-16:checked+label ~ .heroes>.hero.horizontal.day-16 .module {-webkit-transform: scale(0.4); transform: scale(0.4); width: 100%; -webkit-transform-origin: bottom left; transform-origin: bottom left } } body div#devskin12874096 input.horizontal.day-16:checked+label ~ .heroes>.hero.horizontal.day-16 .module .day img, body div#devskin12874096 input.horizontal.day-16:checked+label ~ .heroes>.hero.horizontal.day-16 .module .char-title img, body div#devskin12874096 input.horizontal.day-16:checked+label ~ .heroes>.hero.horizontal.day-16 .module .credit, body div#devskin12874096 input.horizontal.day-16:checked+label ~ .heroes>.hero.horizontal.day-16 .module .quote {opacity: 1 } body div#devskin12874096 input.horizontal.day-16:checked+label ~ .heroes>.hero.horizontal.day-16 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-16:checked+label ~ .heroes>.hero.horizontal.day-16 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-16:checked+label ~ .heroes>.hero.horizontal.day-16 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.horizontal.day-16:checked+label ~ .heroes>.hero.horizontal.day-16 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.horizontal.day-16:checked+label ~ .heroes>.hero.horizontal.day-16 .module:nth-of-type(2) {-webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-16:checked+label ~ .heroes>.hero.horizontal.day-16 .module:nth-of-type(2) {-webkit-transform: translate(0, 0) scale(0.4); transform: translate(0, 0) scale(0.4); width: 100%; -webkit-transform-origin: bottom right; transform-origin: bottom right } } body div#devskin12874096 input.horizontal.day-17:checked+label ~ .heroes>.hero.horizontal.day-17 .background .artwork {opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s } body div#devskin12874096 input.horizontal.day-17:checked+label ~ .heroes>.hero.horizontal.day-17 .module {opacity: 1; -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-17:checked+label ~ .heroes>.hero.horizontal.day-17 .module {-webkit-transform: scale(0.4); transform: scale(0.4); width: 100%; -webkit-transform-origin: bottom left; transform-origin: bottom left } } body div#devskin12874096 input.horizontal.day-17:checked+label ~ .heroes>.hero.horizontal.day-17 .module .day img, body div#devskin12874096 input.horizontal.day-17:checked+label ~ .heroes>.hero.horizontal.day-17 .module .char-title img, body div#devskin12874096 input.horizontal.day-17:checked+label ~ .heroes>.hero.horizontal.day-17 .module .credit, body div#devskin12874096 input.horizontal.day-17:checked+label ~ .heroes>.hero.horizontal.day-17 .module .quote {opacity: 1 } body div#devskin12874096 input.horizontal.day-17:checked+label ~ .heroes>.hero.horizontal.day-17 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-17:checked+label ~ .heroes>.hero.horizontal.day-17 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-17:checked+label ~ .heroes>.hero.horizontal.day-17 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.horizontal.day-17:checked+label ~ .heroes>.hero.horizontal.day-17 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.horizontal.day-17:checked+label ~ .heroes>.hero.horizontal.day-17 .module:nth-of-type(2) {-webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-17:checked+label ~ .heroes>.hero.horizontal.day-17 .module:nth-of-type(2) {-webkit-transform: translate(0, 0) scale(0.4); transform: translate(0, 0) scale(0.4); width: 100%; -webkit-transform-origin: bottom right; transform-origin: bottom right } } body div#devskin12874096 input.horizontal.day-18:checked+label ~ .heroes>.hero.horizontal.day-18 .background .artwork {opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s } body div#devskin12874096 input.horizontal.day-18:checked+label ~ .heroes>.hero.horizontal.day-18 .module {opacity: 1; -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-18:checked+label ~ .heroes>.hero.horizontal.day-18 .module {-webkit-transform: scale(0.4); transform: scale(0.4); width: 100%; -webkit-transform-origin: bottom left; transform-origin: bottom left } } body div#devskin12874096 input.horizontal.day-18:checked+label ~ .heroes>.hero.horizontal.day-18 .module .day img, body div#devskin12874096 input.horizontal.day-18:checked+label ~ .heroes>.hero.horizontal.day-18 .module .char-title img, body div#devskin12874096 input.horizontal.day-18:checked+label ~ .heroes>.hero.horizontal.day-18 .module .credit, body div#devskin12874096 input.horizontal.day-18:checked+label ~ .heroes>.hero.horizontal.day-18 .module .quote {opacity: 1 } body div#devskin12874096 input.horizontal.day-18:checked+label ~ .heroes>.hero.horizontal.day-18 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-18:checked+label ~ .heroes>.hero.horizontal.day-18 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-18:checked+label ~ .heroes>.hero.horizontal.day-18 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.horizontal.day-18:checked+label ~ .heroes>.hero.horizontal.day-18 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.horizontal.day-18:checked+label ~ .heroes>.hero.horizontal.day-18 .module:nth-of-type(2) {-webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-18:checked+label ~ .heroes>.hero.horizontal.day-18 .module:nth-of-type(2) {-webkit-transform: translate(0, 0) scale(0.4); transform: translate(0, 0) scale(0.4); width: 100%; -webkit-transform-origin: bottom right; transform-origin: bottom right } } body div#devskin12874096 input.horizontal.day-19:checked+label ~ .heroes>.hero.horizontal.day-19 .background .artwork {opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s } body div#devskin12874096 input.horizontal.day-19:checked+label ~ .heroes>.hero.horizontal.day-19 .module {opacity: 1; -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-19:checked+label ~ .heroes>.hero.horizontal.day-19 .module {-webkit-transform: scale(0.4); transform: scale(0.4); width: 100%; -webkit-transform-origin: bottom left; transform-origin: bottom left } } body div#devskin12874096 input.horizontal.day-19:checked+label ~ .heroes>.hero.horizontal.day-19 .module .day img, body div#devskin12874096 input.horizontal.day-19:checked+label ~ .heroes>.hero.horizontal.day-19 .module .char-title img, body div#devskin12874096 input.horizontal.day-19:checked+label ~ .heroes>.hero.horizontal.day-19 .module .credit, body div#devskin12874096 input.horizontal.day-19:checked+label ~ .heroes>.hero.horizontal.day-19 .module .quote {opacity: 1 } body div#devskin12874096 input.horizontal.day-19:checked+label ~ .heroes>.hero.horizontal.day-19 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-19:checked+label ~ .heroes>.hero.horizontal.day-19 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-19:checked+label ~ .heroes>.hero.horizontal.day-19 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.horizontal.day-19:checked+label ~ .heroes>.hero.horizontal.day-19 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.horizontal.day-19:checked+label ~ .heroes>.hero.horizontal.day-19 .module:nth-of-type(2) {-webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-19:checked+label ~ .heroes>.hero.horizontal.day-19 .module:nth-of-type(2) {-webkit-transform: translate(0, 0) scale(0.4); transform: translate(0, 0) scale(0.4); width: 100%; -webkit-transform-origin: bottom right; transform-origin: bottom right } } body div#devskin12874096 input.horizontal.day-20:checked+label ~ .heroes>.hero.horizontal.day-20 .background .artwork {opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s } body div#devskin12874096 input.horizontal.day-20:checked+label ~ .heroes>.hero.horizontal.day-20 .module {opacity: 1; -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-20:checked+label ~ .heroes>.hero.horizontal.day-20 .module {-webkit-transform: scale(0.4); transform: scale(0.4); width: 100%; -webkit-transform-origin: bottom left; transform-origin: bottom left } } body div#devskin12874096 input.horizontal.day-20:checked+label ~ .heroes>.hero.horizontal.day-20 .module .day img, body div#devskin12874096 input.horizontal.day-20:checked+label ~ .heroes>.hero.horizontal.day-20 .module .char-title img, body div#devskin12874096 input.horizontal.day-20:checked+label ~ .heroes>.hero.horizontal.day-20 .module .credit, body div#devskin12874096 input.horizontal.day-20:checked+label ~ .heroes>.hero.horizontal.day-20 .module .quote {opacity: 1 } body div#devskin12874096 input.horizontal.day-20:checked+label ~ .heroes>.hero.horizontal.day-20 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-20:checked+label ~ .heroes>.hero.horizontal.day-20 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-20:checked+label ~ .heroes>.hero.horizontal.day-20 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.horizontal.day-20:checked+label ~ .heroes>.hero.horizontal.day-20 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.horizontal.day-20:checked+label ~ .heroes>.hero.horizontal.day-20 .module:nth-of-type(2) {-webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-20:checked+label ~ .heroes>.hero.horizontal.day-20 .module:nth-of-type(2) {-webkit-transform: translate(0, 0) scale(0.4); transform: translate(0, 0) scale(0.4); width: 100%; -webkit-transform-origin: bottom right; transform-origin: bottom right } } body div#devskin12874096 input.horizontal.day-21:checked+label ~ .heroes>.hero.horizontal.day-21 .background .artwork {opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s; transition: transform 0.6s ease-in-out 0s, opacity 0.3s ease-in-out 0s, -webkit-transform 0.6s ease-in-out 0s } body div#devskin12874096 input.horizontal.day-21:checked+label ~ .heroes>.hero.horizontal.day-21 .module {opacity: 1; -webkit-transition: -webkit-transform 0.3s ease-in-out 0s; transition: -webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, -webkit-transform 0.3s ease-in-out 0s; -webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-21:checked+label ~ .heroes>.hero.horizontal.day-21 .module {-webkit-transform: scale(0.4); transform: scale(0.4); width: 100%; -webkit-transform-origin: bottom left; transform-origin: bottom left } } body div#devskin12874096 input.horizontal.day-21:checked+label ~ .heroes>.hero.horizontal.day-21 .module .day img, body div#devskin12874096 input.horizontal.day-21:checked+label ~ .heroes>.hero.horizontal.day-21 .module .char-title img, body div#devskin12874096 input.horizontal.day-21:checked+label ~ .heroes>.hero.horizontal.day-21 .module .credit, body div#devskin12874096 input.horizontal.day-21:checked+label ~ .heroes>.hero.horizontal.day-21 .module .quote {opacity: 1 } body div#devskin12874096 input.horizontal.day-21:checked+label ~ .heroes>.hero.horizontal.day-21 .module .day img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-21:checked+label ~ .heroes>.hero.horizontal.day-21 .module .char-title img {-webkit-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s } body div#devskin12874096 input.horizontal.day-21:checked+label ~ .heroes>.hero.horizontal.day-21 .module .credit {-webkit-transition: all 0.3s ease-in-out 0.4s; transition: all 0.3s ease-in-out 0.4s } body div#devskin12874096 input.horizontal.day-21:checked+label ~ .heroes>.hero.horizontal.day-21 .module .quote {-webkit-transition: all 0.3s ease-in-out 0.5s; transition: all 0.3s ease-in-out 0.5s } body div#devskin12874096 input.horizontal.day-21:checked+label ~ .heroes>.hero.horizontal.day-21 .module:nth-of-type(2) {-webkit-transform: translate(0, 0); transform: translate(0, 0) } @media only screen and (max-width: 767px) {body div#devskin12874096 input.horizontal.day-21:checked+label ~ .heroes>.hero.horizontal.day-21 .module:nth-of-type(2) {-webkit-transform: translate(0, 0) scale(0.4); transform: translate(0, 0) scale(0.4); width: 100%; -webkit-transform-origin: bottom right; transform-origin: bottom right } } body div#devskin12874096 .hero.day-5.vertical .artwork:before {background-position: 0 5% !important } body div#devskin12874096 .hero.day-4.vertical .artwork {background-color: #08062D !important } body div#devskin12874096 .hero.day-7.vertical .artwork {background-color: #000 !important } body div#devskin12874096 .hero.day-8.vertical .artwork {background-color: #331E56 !important } body div#devskin12874096 .hero.day-9.vertical .artwork {background-color: #0D3050 !important } body div#devskin12874096 .hero.day-11.horizontal .artwork:before {background-position: 50% 45% } body div#devskin12874096 .hero.day-10.vertical .artwork {background-color: #583B69 !important } body div#devskin12874096 .hero.day-12.winston .artwork {background-color: #D9CBCA !important } body div#devskin12874096 .hero.day-12.winston .artwork:before {background-position: 50% 50% !important } body div#devskin12874096 .hero.day-15.junkrat .artwork {background-color: #131E3A !important } body div#devskin12874096 .hero.day-15.junkrat .artwork:before {background-position: 50% 40% !important } body div#devskin12874096 .hero.day-16.mei .module {width: 45%; min-height: 240px } body div#devskin12874096 .hero.day-16.mei .module .quote p {font-size: 0.8em } body div#devskin12874096 .hero.day-16.mei .background .artwork:before {background-position: 50% 0 !important } body div#devskin12874096 .hero.day-17.soldier-76 .background .artwork:before {background-position: 50% 50% !important } body div#devskin12874096 .hero.day-18.vertical .background .artwork:before {background-position: 50% 70% !important } body div#devskin12874096 .hero.day-19.horizontal .module {width: 42%; min-height: 220px } body div#devskin12874096 .arrows input {display: none } body div#devskin12874096 .arrows input+label {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/ui-arrows.svg?v=41662816116563") 50% 0/52px auto no-repeat; -webkit-transform: translate(0, 50%); transform: translate(0, 50%); position: absolute; margin: 0; padding: 0; top: -50%; width: 52px; height: 120px; z-index: 1; margin-top: -120px; display: none; font-size: 0; text-indent: -9999em } body div#devskin12874096 .arrows input+label:before {display: none } body div#devskin12874096 input.day-1:checked ~ .arrows input.day-21+label {display: block; left: 0; background-position: 0 0 } body div#devskin12874096 input.day-2:checked ~ .arrows input.day-1+label {display: block; left: 0; background-position: 0 0 } body div#devskin12874096 input.day-3:checked ~ .arrows input.day-2+label {display: block; left: 0; background-position: 0 0 } body div#devskin12874096 input.day-4:checked ~ .arrows input.day-3+label {display: block; left: 0; background-position: 0 0 } body div#devskin12874096 input.day-5:checked ~ .arrows input.day-4+label {display: block; left: 0; background-position: 0 0 } body div#devskin12874096 input.day-6:checked ~ .arrows input.day-5+label {display: block; left: 0; background-position: 0 0 } body div#devskin12874096 input.day-7:checked ~ .arrows input.day-6+label {display: block; left: 0; background-position: 0 0 } body div#devskin12874096 input.day-8:checked ~ .arrows input.day-7+label {display: block; left: 0; background-position: 0 0 } body div#devskin12874096 input.day-9:checked ~ .arrows input.day-8+label {display: block; left: 0; background-position: 0 0 } body div#devskin12874096 input.day-10:checked ~ .arrows input.day-9+label {display: block; left: 0; background-position: 0 0 } body div#devskin12874096 input.day-11:checked ~ .arrows input.day-10+label {display: block; left: 0; background-position: 0 0 } body div#devskin12874096 input.day-12:checked ~ .arrows input.day-11+label {display: block; left: 0; background-position: 0 0 } body div#devskin12874096 input.day-13:checked ~ .arrows input.day-12+label {display: block; left: 0; background-position: 0 0 } body div#devskin12874096 input.day-14:checked ~ .arrows input.day-13+label {display: block; left: 0; background-position: 0 0 } body div#devskin12874096 input.day-15:checked ~ .arrows input.day-14+label {display: block; left: 0; background-position: 0 0 } body div#devskin12874096 input.day-16:checked ~ .arrows input.day-15+label {display: block; left: 0; background-position: 0 0 } body div#devskin12874096 input.day-17:checked ~ .arrows input.day-16+label {display: block; left: 0; background-position: 0 0 } body div#devskin12874096 input.day-18:checked ~ .arrows input.day-17+label {display: block; left: 0; background-position: 0 0 } body div#devskin12874096 input.day-19:checked ~ .arrows input.day-18+label {display: block; left: 0; background-position: 0 0 } body div#devskin12874096 input.day-20:checked ~ .arrows input.day-19+label {display: block; left: 0; background-position: 0 0 } body div#devskin12874096 input.day-21:checked ~ .arrows input.day-20+label {display: block; left: 0; background-position: 0 0 } body div#devskin12874096 input.day-1:checked ~ .arrows input.day-2+label {display: block; right: 0; background-position: 0 0; -webkit-transform: rotate(180deg) translate(0, -50%); transform: rotate(180deg) translate(0, -50%) } body div#devskin12874096 input.day-2:checked ~ .arrows input.day-3+label {display: block; right: 0; background-position: 0 0; -webkit-transform: rotate(180deg) translate(0, -50%); transform: rotate(180deg) translate(0, -50%) } body div#devskin12874096 input.day-3:checked ~ .arrows input.day-4+label {display: block; right: 0; background-position: 0 0; -webkit-transform: rotate(180deg) translate(0, -50%); transform: rotate(180deg) translate(0, -50%) } body div#devskin12874096 input.day-4:checked ~ .arrows input.day-5+label {display: block; right: 0; background-position: 0 0; -webkit-transform: rotate(180deg) translate(0, -50%); transform: rotate(180deg) translate(0, -50%) } body div#devskin12874096 input.day-5:checked ~ .arrows input.day-6+label {display: block; right: 0; background-position: 0 0; -webkit-transform: rotate(180deg) translate(0, -50%); transform: rotate(180deg) translate(0, -50%) } body div#devskin12874096 input.day-6:checked ~ .arrows input.day-7+label {display: block; right: 0; background-position: 0 0; -webkit-transform: rotate(180deg) translate(0, -50%); transform: rotate(180deg) translate(0, -50%) } body div#devskin12874096 input.day-7:checked ~ .arrows input.day-8+label {display: block; right: 0; background-position: 0 0; -webkit-transform: rotate(180deg) translate(0, -50%); transform: rotate(180deg) translate(0, -50%) } body div#devskin12874096 input.day-8:checked ~ .arrows input.day-9+label {display: block; right: 0; background-position: 0 0; -webkit-transform: rotate(180deg) translate(0, -50%); transform: rotate(180deg) translate(0, -50%) } body div#devskin12874096 input.day-9:checked ~ .arrows input.day-10+label {display: block; right: 0; background-position: 0 0; -webkit-transform: rotate(180deg) translate(0, -50%); transform: rotate(180deg) translate(0, -50%) } body div#devskin12874096 input.day-10:checked ~ .arrows input.day-11+label {display: block; right: 0; background-position: 0 0; -webkit-transform: rotate(180deg) translate(0, -50%); transform: rotate(180deg) translate(0, -50%) } body div#devskin12874096 input.day-11:checked ~ .arrows input.day-12+label {display: block; right: 0; background-position: 0 0; -webkit-transform: rotate(180deg) translate(0, -50%); transform: rotate(180deg) translate(0, -50%) } body div#devskin12874096 input.day-12:checked ~ .arrows input.day-13+label {display: block; right: 0; background-position: 0 0; -webkit-transform: rotate(180deg) translate(0, -50%); transform: rotate(180deg) translate(0, -50%) } body div#devskin12874096 input.day-13:checked ~ .arrows input.day-14+label {display: block; right: 0; background-position: 0 0; -webkit-transform: rotate(180deg) translate(0, -50%); transform: rotate(180deg) translate(0, -50%) } body div#devskin12874096 input.day-14:checked ~ .arrows input.day-15+label {display: block; right: 0; background-position: 0 0; -webkit-transform: rotate(180deg) translate(0, -50%); transform: rotate(180deg) translate(0, -50%) } body div#devskin12874096 input.day-15:checked ~ .arrows input.day-16+label {display: block; right: 0; background-position: 0 0; -webkit-transform: rotate(180deg) translate(0, -50%); transform: rotate(180deg) translate(0, -50%) } body div#devskin12874096 input.day-16:checked ~ .arrows input.day-17+label {display: block; right: 0; background-position: 0 0; -webkit-transform: rotate(180deg) translate(0, -50%); transform: rotate(180deg) translate(0, -50%) } body div#devskin12874096 input.day-17:checked ~ .arrows input.day-18+label {display: block; right: 0; background-position: 0 0; -webkit-transform: rotate(180deg) translate(0, -50%); transform: rotate(180deg) translate(0, -50%) } body div#devskin12874096 input.day-18:checked ~ .arrows input.day-19+label {display: block; right: 0; background-position: 0 0; -webkit-transform: rotate(180deg) translate(0, -50%); transform: rotate(180deg) translate(0, -50%) } body div#devskin12874096 input.day-19:checked ~ .arrows input.day-20+label {display: block; right: 0; background-position: 0 0; -webkit-transform: rotate(180deg) translate(0, -50%); transform: rotate(180deg) translate(0, -50%) } body div#devskin12874096 input.day-20:checked ~ .arrows input.day-21+label {display: block; right: 0; background-position: 0 0; -webkit-transform: rotate(180deg) translate(0, -50%); transform: rotate(180deg) translate(0, -50%) } body div#devskin12874096 input.day-21:checked ~ .arrows input.day-1+label {display: block; right: 0; background-position: 0 0; -webkit-transform: rotate(180deg) translate(0, -50%); transform: rotate(180deg) translate(0, -50%) } body div#devskin12874096 div.info {position: relative; padding: 5% 0 0 0; z-index: 1 } @media only screen and (max-width: 767px) {body div#devskin12874096 div.info {padding: 5% 0 } body div#devskin12874096 div.info .wrap {max-width: 420px; margin: auto } body div#devskin12874096 div.info .text {text-align: left; margin: 30px 0 15px; border-bottom: 1px solid #f90; padding: 0 0 15px !important } body div#devskin12874096 div.info .text img[src*='text-21-days-of-overwatch'] {max-width: 50%; display: inline-block; margin: 0 } } body div#devskin12874096 div.info h1 {line-height: 0.95 } body div#devskin12874096 div.info h1 .no-wrap:nth-of-type(2) {text-indent: -10px } body div#devskin12874096 div.info h1 span {color: #f90 } body div#devskin12874096 div.info p {text-align: left } body div#devskin12874096 div.info .image.co-brand {width: 49.047% } @media only screen and (max-width: 767px) {body div#devskin12874096 div.info .image.co-brand {width: 100%; padding-top: 15px; text-align: left; border-top: 1px solid #f90 } body div#devskin12874096 div.info .image.co-brand img {max-width: 30%; margin-bottom: 30px } } body div#devskin12874096 .trailer {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/bg-pink-clouds.jpg?v=41662816116563") 50% 50%/cover no-repeat; position: relative; text-align: center; padding: 5% 0; z-index: 4 } @media only screen and (max-width: 767px) {body div#devskin12874096 .trailer {padding: 30px 0 60% } body div#devskin12874096 .trailer .wrap.clear {padding: 0; box-sizing: border-box } } body div#devskin12874096 .trailer:before {content: ''; position: absolute; top: 0; right: -20px; left: -20px; bottom: 0; background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/ui-trim.svg") 50% 0/100% auto no-repeat } body div#devskin12874096 .trailer .heroes-l {content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 60%; background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/ui-heroes-left-alt.png?v=41662816116563") 0 100%/contain no-repeat; z-index: 1 } body div#devskin12874096 .trailer .heroes-r {content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 60%; background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/ui-heroes-right-alt.png?v=41662816116563") 100% 100%/contain no-repeat; z-index: 1 } @media only screen and (max-width: 767px) {body div#devskin12874096 .trailer:before, body div#devskin12874096 .trailer:after {display: none } } body div#devskin12874096 .trailer .title {text-align: center; font-size: 36px; margin: 30px auto; display: block; position: relative; max-width: 268px } body div#devskin12874096 .trailer .title:after {content: ''; position: absolute; top: -20px; right: -8%; left: -8%; bottom: 0; border-top: 3px solid rgba(255, 255, 255, 0.3); opacity: 1; border-radius: 7px; -webkit-transform: skew(-14.25deg); transform: skew(-14.25deg) } @media only screen and (max-width: 767px) {body div#devskin12874096 .trailer .title:after {display: none } } body div#devskin12874096 .trailer .title img {display: inline-block; max-width: 100%; vertical-align: bottom !important } @media only screen and (max-width: 767px) {body div#devskin12874096 .trailer .title {display: block; text-align: center; margin: 15px auto } } @media only screen and (max-width: 767px) and (max-width: 767px) {body div#devskin12874096 .trailer .title {width: 60% } } body div#devskin12874096 .trailer a.button {z-index: 3 } body div#devskin12874096 .trailer a.button img {position: relative; display: inline-block; -webkit-transform: skew(14.25deg); transform: skew(14.25deg) } body div#devskin12874096 .trailer .video {position: relative; min-height: 397px; margin: 0 0 50px 0 } @media only screen and (max-width: 767px) {body div#devskin12874096 .trailer .video {min-height: 207px; margin: 0 0 50px } } body div#devskin12874096 .trailer .video i.play {display: block; width: 71px; height: 77px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/ui-play-button.png") 50% 100%/100% auto no-repeat; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; z-index: 1 } body div#devskin12874096 .trailer .video i.play:before {content: ''; position: inherit; top: 0; right: 0; bottom: 0; left: 0; background: inherit; -webkit-transition: inherit; transition: inherit; background-position: 50% 0; opacity: 0; -webkit-transform: scale(1.1); transform: scale(1.1) } body div#devskin12874096 .trailer .video a.jw-play-video-button {background: #000 url("https://www.da-files.com/contests/2016/blizzard-overwatch/bg-video.jpg") 50% 50%/cover no-repeat; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15); position: relative; text-indent: -9999em; display: block; font-size: 0; width: 100%; padding-bottom: 56% } body div#devskin12874096 .trailer .video a.jw-play-video-button:before {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2 } body div#devskin12874096 .trailer .video:hover i.play:before {-webkit-transform: scale(1); transform: scale(1); opacity: 1 } body div#devskin12874096 iframe.jw-video-content {position: absolute; top: 50%; left: 50%; margin: 0; width: 82%; height: 70%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 5; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out } @media only screen and (max-width: 767px) {body div#devskin12874096 iframe.jw-video-content {width: 100%; height: 180px } } body div#devskin12874096 .jw-close-video-button {background: rgba(0, 0, 0, 0.8); border: none; cursor: pointer; padding: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 4 } body div#devskin12874096 .jw-close-video-button:before {content: ''; position: absolute; top: 5%; right: 5%; height: 60px; width: 2px; background: #0198ca; -webkit-transform: rotate(45deg); transform: rotate(45deg) } body div#devskin12874096 .jw-close-video-button:after {content: ''; position: absolute; top: 5%; right: 5%; height: 60px; width: 2px; background: #0198ca; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } body div#devskin12874096 .get-in-gallery {padding: 8% 0; position: relative; background: -webkit-linear-gradient(top, #26324a 0%, #181f2e 100%); background: linear-gradient(to bottom, #26324a 0%, #181f2e 100%) } body div#devskin12874096 .get-in-gallery:before {content: ''; position: absolute; top: 0; right: -20px; left: -20px; bottom: 0; background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/ui-trim.svg") 50% 0/100% auto no-repeat } @media only screen and (max-width: 767px) {body div#devskin12874096 .get-in-gallery {padding: 15% 0 } body div#devskin12874096 .get-in-gallery .wrap {max-width: 420px; margin: auto; text-align: center } body div#devskin12874096 .get-in-gallery .title {text-align: right; margin: 0 15px 15px; border-bottom: 1px solid gray; padding-bottom: 15px } body div#devskin12874096 .get-in-gallery .title img[src*='text-get-in'] {max-width: 50% } body div#devskin12874096 .get-in-gallery .title img[src*='text-da-meets-ow'] {max-width: 70% } } body div#devskin12874096 .gallery-list-widget {background: none; margin: 60px auto; padding: 0; position: relative; width: 80%; max-width: 1500px } @media only screen and (max-width: 767px) {body div#devskin12874096 .gallery-list-widget {margin: 0 auto; width: 100% } } body div#devskin12874096 .gallery-list-widget .tab-list:not(.fixed) {position: relative } body div#devskin12874096 .gallery-list-widget .tab-list {background: transparent; margin: 0; line-height: 0; border: none; white-space: nowrap; -webkit-transform: skew(-14.25deg); transform: skew(-14.25deg); text-align: center; padding: 0 30px } @media only screen and (max-width: 767px) {body div#devskin12874096 .gallery-list-widget .tab-list {margin: 0; display: none } } body div#devskin12874096 .gallery-list-widget .tab-list.fixed {position: relative !important } @media only screen and (max-width: 767px) {body div#devskin12874096 .gallery-list-widget .tab-list.fixed {top: 0 } } body div#devskin12874096 .gallery-list-widget .tab-list.fixed ~ .tab-container {margin-top: 120px } body div#devskin12874096 .gallery-list-widget .tab-list.fixed.fixed-stop {bottom: -150px; top: initial; position: absolute } body div#devskin12874096 .gallery-list-widget .tab-list .tab-link {color: rgba(255, 255, 255, 0.3); height: inherit; margin: 0 10px 0 0; padding: 20px 30px; display: inline-block; text-align: center; line-height: inherit; text-transform: uppercase; font-family: "BigNoodleTooOblique"; font-size: 36px; text-decoration: none; background: #1f2a3e; border-radius: 7px 7px 0 0; border-bottom: none } body div#devskin12874096 .gallery-list-widget .tab-list .tab-link.active {background: #314060; color: #f90 } body div#devskin12874096 .gallery-list-widget .tab-list .tab-link.active:before {display: none } body div#devskin12874096 .gallery-list-widget .tab-list .tab-link.active .count {display: none } body div#devskin12874096 .gallery-list-widget .tab-list .tab-link span {margin: 0; display: block; position: relative; text-indent: -9999em; height: 25px; width: auto; display: block; position: relative; -webkit-transform: skew(14.25deg); transform: skew(14.25deg) } body div#devskin12874096 .gallery-list-widget .tab-list .tab-link:nth-of-type(1) span {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/text-tab-overview.svg?v=41662816116563") 50% 100%/auto 50px no-repeat; width: 106px } body div#devskin12874096 .gallery-list-widget .tab-list .tab-link:nth-of-type(2) span {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/text-tab-21-days-of-overwatch.svg?v=41662816116563") 50% 100%/auto 50px no-repeat; width: 244px } body div#devskin12874096 .gallery-list-widget .tab-list .tab-link:nth-of-type(3) span {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/text-tab-comm-fan-art.svg?v=41662816116563") 50% 100%/auto 50px no-repeat; width: 211px } body div#devskin12874096 .gallery-list-widget .tab-list .tab-link .count {display: none } body div#devskin12874096 .gallery-list-widget .tab-list .tab-link.active span {top: 2px; background-position: 50% 0 } body div#devskin12874096 .gallery-list-widget .tab-container-gallerywidget {margin: 0; padding: 10px; background: #314060; border-radius: 7px } @media only screen and (max-width: 767px) {body div#devskin12874096 .gallery-list-widget .tab-container-gallerywidget {background: none } } body div#devskin12874096 .gallery-list-widget .tab-container-gallerywidget .featured-deviation {display: none } body div#devskin12874096 .gallery-list-widget .tab-container-gallerywidget .featured-deviation-header {height: auto; padding: 15% 0; background-position: 50% 25% } body div#devskin12874096 .gallery-list-widget .tab-container-gallerywidget .featured-deviation-header .featured-deviation-copyright {color: #fff; text-shadow: none } body div#devskin12874096 .gallery-list-widget .tab-container-gallerywidget .featured-deviation-description {display: none } body div#devskin12874096 .gallery-list-widget .tab-container-gallerywidget [data-sigil='tab-content tab-gallery-0'] .featured-deviation-header {background-position: 50% 95% } body div#devskin12874096 .gallery-list-widget .tab-container-gallerywidget [data-sigil='tab-content tab-gallery-1'] .featured-deviation-header {background-position: 50% 45% } body div#devskin12874096 .torpedo-container {overflow: visible; text-align: center } body div#devskin12874096 .torpedo-container .thumb {background: #28354F; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15); margin: 10px } body div#devskin12874096 .torpedo-container .thumb.horizontal-crop>img {position: absolute !important } body div#devskin12874096 .torpedo-loader {background-image: url("https://www.da-files.com/contests/2016/blizzard-overwatch/ui-loading.svg?v=41662816116563") } body div#devskin12874096 .torpedo-end-of-results.visible {display: none } body div#devskin12874096 .footer {background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/bg-dark-pattern.jpg") 50% 0/cover no-repeat; position: relative; margin: auto; padding: 6% 0; z-index: 1 } body div#devskin12874096 .footer:before {content: ''; position: absolute; top: 0; right: -20px; left: -20px; bottom: 0; background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/ui-trim-dark.svg") 50% 0/100% auto no-repeat } @media only screen and (max-width: 767px) {body div#devskin12874096 .footer {padding: 60px 0 30px } body div#devskin12874096 .footer .wrap {max-width: 420px; margin: auto } } body div#devskin12874096 .footer .ow-border {margin: 30px auto; padding: 30px 0; max-width: 360px; -webkit-transform: skew(-14.25deg); transform: skew(-14.25deg); border-radius: 14px } @media only screen and (max-width: 767px) {body div#devskin12874096 .footer .ow-border {margin: 0 auto; border: none; -webkit-transform: none; transform: none } } body div#devskin12874096 .footer .social-buttons {padding: 2% 0; position: relative; -webkit-transform: skew(14.25deg); transform: skew(14.25deg) } @media only screen and (max-width: 767px) {body div#devskin12874096 .footer .social-buttons {-webkit-transform: none; transform: none } } body div#devskin12874096 .footer .social-buttons .social:after {background-position: 50% 100%; opacity: 1 } body div#devskin12874096 .footer .co-brand {max-width: 260px; margin: auto; text-align: center } body div#devskin12874096 .footer .legal {text-align: center; opacity: 0.7; font-size: 0.85em } body div#devskin12874096 .bottom {background: transparent; position: absolute; left: 0; right: 0; bottom: 0; text-align: center; padding: 3%; z-index: 20 } @media only screen and (max-width: 767px) {body div#devskin12874096 .bottom {display: none } } body div#devskin12874096 .bottom a.commentslink {font-weight: 400; color: #4d5055; font-size: 0.85em; text-decoration: none } body div#devskin12874096 .bottom a.commentslink:hover {color: #f90 } body div#devskin12874096 {font-size: 16px; font-family: "Open Sans", Sans-serif; font-style: italic; background: #000; color: #fff } body div#devskin12874096 h1, body div#devskin12874096 h2, body div#devskin12874096 h3, body div#devskin12874096 h4, body div#devskin12874096 h5 {font-family: "BigNoodleTooOblique"; line-height: 1.1; letter-spacing: normal; margin: 0 0 1.8rem; color: #fff; font-weight: normal; text-transform: uppercase } body div#devskin12874096 h1 {font-size: 6.0em } body div#devskin12874096 h2 {font-size: 3.8em } body div#devskin12874096 p, body div#devskin12874096 li {font: 300 italic 1em/24px "Open Sans", Sans-serif; margin: 0 0 30px } @media only screen and (max-width: 767px) {body div#devskin12874096 p, body div#devskin12874096 li {font-size: 13px; margin: 0 0 15px } } body div#devskin12874096 a, body div#devskin12874096 a.external, body div#devskin12874096 a.discoverytag {font: inherit; font-weight: 700; color: #f90; -webkit-transition: color 0.15s ease-out; transition: color 0.15s ease-out; cursor: pointer } body div#devskin12874096 a:hover, body div#devskin12874096 a.external:hover, body div#devskin12874096 a.discoverytag:hover {color: #fff } body div#devskin12874096 a.button, body div#devskin12874096 a.external.button, body div#devskin12874096 a.discoverytag.button {position: relative; background: #f90; color: #fff; font: italic 600 24px "Open Sans", Sans-serif; padding: 14px 40px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); text-align: center; border-radius: 6px; text-transform: uppercase; display: inline-block; text-decoration: none; -webkit-transform: skew(-14deg); transform: skew(-14deg); box-shadow: 0 30px 60px rgba(31, 31, 33, 0.3); -webkit-transition: box-shadow 0.15s ease-in-out, color 0.1s ease-in-out, background 0.1s ease-in-out, text-shadow 0.1s ease-in-out; transition: box-shadow 0.15s ease-in-out, color 0.1s ease-in-out, background 0.1s ease-in-out, text-shadow 0.1s ease-in-out; z-index: 4 } body div#devskin12874096 a.button:before, body div#devskin12874096 a.external.button:before, body div#devskin12874096 a.discoverytag.button:before {content: ''; position: absolute; border-radius: 10px; top: -4px; right: -4px; bottom: -4px; left: -4px; -webkit-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; border: 1px solid #f90 } body div#devskin12874096 a.button span, body div#devskin12874096 a.external.button span, body div#devskin12874096 a.discoverytag.button span {top: -2px; position: relative; display: block; -webkit-transform: skew(14deg); transform: skew(14deg); line-height: 1 } body div#devskin12874096 a.button small, body div#devskin12874096 a.external.button small, body div#devskin12874096 a.discoverytag.button small {display: block; -webkit-transform: skew(14deg); transform: skew(14deg); font-weight: normal; font-size: 14px; text-shadow: none; line-height: 1; color: #2b2c2e } body div#devskin12874096 a.button:hover, body div#devskin12874096 a.external.button:hover, body div#devskin12874096 a.discoverytag.button:hover {box-shadow: 0 15px 30px rgba(31, 42, 62, 0.3); text-shadow: none; background: #ffa31a; color: #2b2c2e } body div#devskin12874096 a.button:hover:before, body div#devskin12874096 a.external.button:hover:before, body div#devskin12874096 a.discoverytag.button:hover:before {border-color: #ffa31a } body div#devskin12874096 a.button img, body div#devskin12874096 a.external.button img, body div#devskin12874096 a.discoverytag.button img {vertical-align: bottom } body div#devskin12874096 a.external:after {font-size: 0.5em; display: none; opacity: 0.5; margin-right: 1px } body div#devskin12874096 .image, body div#devskin12874096 .title {position: relative; z-index: 0 } body div#devskin12874096 .image img, body div#devskin12874096 .title img {max-width: 100%; display: inline-block; vertical-align: bottom } body div#devskin12874096 .overwatch {overflow: hidden; background: #142d52 } body div#devskin12874096 .social-buttons .social:hover:after {opacity: 0; display: none } body div#devskin12874096 .social-buttons .social:hover .slide {-webkit-transform: scale(0); transform: scale(0); opacity: 0; visibility: hidden; display: none } body div#devskin12874096 .social-buttons .social:after {content: ''; width: 44px; height: 44px; position: absolute; top: 50%; left: 50%; overflow: hidden; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/ui-icon-ring.svg?v=41662816116563") 50% 0/44px auto no-repeat; opacity: 0.3 } body div#devskin12874096 .logo {height: 28px; width: 110px; display: block; display: none; float: left; position: relative; background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/logo-deviantart-mark.svg?v=41662816116563") 0 0/contain no-repeat; margin: 15px 30px 0 0 } body div#devskin12874096 .logo:before {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url("https://www.da-files.com/contests/2016/blizzard-overwatch/logo-deviantart-type.svg?v=41662816116563") 0 0/contain no-repeat; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out } body div#devskin12874096 .align-center {text-align: center } body div#devskin12874096 .align-left {text-align: left } body div#devskin12874096 .align-right {text-align: right } body div#devskin12874096 .no-wrap {white-space: nowrap } /*# sourceMappingURL=style.css.map */