/* Effective stylesheet produced by snapshot save */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0px; padding: 0px; border: 0px none; font: inherit; vertical-align: baseline; }

body { line-height: 1; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }

body { font: 14px/22px Arial,Helvetica,sans-serif; color: rgb(51, 51, 51); background: none repeat scroll 0% 0% rgb(221, 221, 221); margin: 50px auto; overflow-x: hidden; }

h1, h2, h3, h4, h5, h6 { font-weight: bold; font-size: 16px; margin: 12px 0px; }

h1 { margin: 35px 0px 5px; font-size: 26px; font-weight: normal; }

#slider { text-align: center; }

h2 { margin: 40px 0px 25px; border-bottom: 1px solid rgb(187, 187, 187); padding: 0px 0px 10px; }

p { margin: 0px 0px 16px; }

strong { font-weight: bold; }

label, a { color: teal; cursor: pointer; text-decoration: none; }

label:hover, a:hover { color: rgb(0, 0, 0) ! important; }

* { box-sizing: border-box; }

label, #active, img { -moz-user-select: none; }

.catch { display: block; height: 0px; overflow: hidden; }

#slider { margin: 0px auto; }

#description { margin: 25px auto; text-align: left; max-width: 650px; padding: 0px 25px; }

.respond { margin: 0px auto; max-width: 370px; }

input { display: none; }

#slide1:checked ~ #slides .inner { margin-left: 0px; }

#slide2:checked ~ #slides .inner { margin-left: -100%; }

#slide3:checked ~ #slides .inner { margin-left: -200%; }

#slide4:checked ~ #slides .inner { margin-left: -300%; }

#slide5:checked ~ #slides .inner { margin-left: -400%; }

#overflow { width: 100%; overflow: hidden; }

article img { width: 100%; }

#slides .inner { width: 500%; line-height: 0; }

#slides article { width: 20%; float: left; }

#controls { margin: -25% 0px 0px; width: 100%; height: 50px; }

#controls label { display: none; width: 50px; height: 50px; opacity: 0.3; }

#active { margin: 23% 0px 0px; text-align: center; }

#active label { border-radius: 5px; display: inline-block; width: 10px; height: 10px; background: none repeat scroll 0% 0% rgb(187, 187, 187); }

#active label:hover { background: none repeat scroll 0% 0% rgb(204, 204, 204); border-color: rgb(119, 119, 119) ! important; }

#controls label:hover { opacity: 0.8; }

#slide1:checked ~ #controls label:nth-child(2), #slide2:checked ~ #controls label:nth-child(3), #slide3:checked ~ #controls label:nth-child(4), #slide4:checked ~ #controls label:nth-child(5), #slide5:checked ~ #controls label:nth-child(1) { background: url("next.png") no-repeat scroll 0% 0% transparent; float: right; margin: 0px -70px 0px 0px; display: block; }

#slide1:checked ~ #controls label:nth-child(5), #slide2:checked ~ #controls label:nth-child(1), #slide3:checked ~ #controls label:nth-child(2), #slide4:checked ~ #controls label:nth-child(3), #slide5:checked ~ #controls label:nth-child(4) { background: url("prev.png") no-repeat scroll 0% 0% transparent; float: left; margin: 0px 0px 0px -70px; display: block; }

#slide1:checked ~ #active label:nth-child(1), #slide2:checked ~ #active label:nth-child(2), #slide3:checked ~ #active label:nth-child(3), #slide4:checked ~ #active label:nth-child(4), #slide5:checked ~ #active label:nth-child(5) { background: none repeat scroll 0% 0% rgb(51, 51, 51); border-color: rgb(51, 51, 51) ! important; }

.info { line-height: 20px; margin: 0px 0px -150%; position: absolute; font-style: italic; padding: 30px; opacity: 0; color: rgb(0, 0, 0); text-align: left; }

.info h3 { color: rgb(51, 51, 51); margin: 0px 0px 5px; font-weight: normal; font-size: 22px; font-style: normal; }

#slides { margin: 45px 0px 0px; border-radius: 5px; box-shadow: 1px 1px 4px rgb(102, 102, 102); padding: 1%; background: -moz-linear-gradient(center top , rgb(252, 255, 244) 0%, rgb(219, 218, 201) 100%) repeat scroll 0% 0% transparent; }

#slides .inner { transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1) 0s; }

#slider { transition: all 0.5s ease-out 0s; }

#controls label { transition: opacity 0.2s ease-out 0s; }

#slide1:checked ~ #slides article:nth-child(1) .info, #slide2:checked ~ #slides article:nth-child(2) .info, #slide3:checked ~ #slides article:nth-child(3) .info, #slide4:checked ~ #slides article:nth-child(4) .info, #slide5:checked ~ #slides article:nth-child(5) .info { opacity: 1; transition: all 1s ease-out 0.6s; }

.info, #controls, #slides, #active, #active label, .info h3, .desktop, .tablet, .mobile { transition: all 0.5s ease-out 0s; }

#desktop:checked ~ #slider { max-width: 960px; }

#tablet:checked ~ #slider { max-width: 850px; }

#mobile:checked ~ #slider { max-width: 450px; }

#desktop:checked ~ #slider .desktop, #tablet:checked ~ #slider .tablet, #mobile:checked ~ #slider .mobile { color: rgb(119, 119, 119); opacity: 1; }

.desktop, .tablet, .mobile { display: inline-block; width: 60px; height: 60px; padding-top: 50px; opacity: 0.35; font-size: 12px; }

.desktop:hover, .tablet:hover, .mobile:hover { opacity: 0.2; }

.desktop { background: url("desktop.png") no-repeat scroll 0% 0% transparent; }

.tablet { background: url("tablet.png") no-repeat scroll 0% 0% transparent; }

.mobile { background: url("mobile.png") no-repeat scroll 0% 0% transparent; }

#tablet:checked ~ #slider #controls { margin: -25% 0px 0px 12%; width: 76%; height: 50px; }

#tablet:checked ~ #slider #controls label { transform: scale(0.8); }

#tablet:checked ~ #slider #slides, #mobile:checked ~ #slider #slides { padding: 1% 0px; border-radius: 0px; }

#tablet:checked ~ #slider #active { margin: 22% 0px 0px; }

@media only screen and (max-width: 850px) and (min-width: 450px) {

  #slider #controls { margin: -25% 0px 0px 15%; width: 70%; height: 50px; }

  #slider #controls label { transform: scale(0.8); }

  #slider #slides { padding: 1% 0px; border-radius: 0px; }

  #slider #active { margin: 22% 0px 0px; }

}

#mobile:checked ~ #slider #controls { margin: -28% 0px 0px 24%; width: 50%; height: 50px; }

#mobile:checked ~ #slider #active { margin: 23% 0px 0px; }

#mobile:checked ~ #slider #slides .info { opacity: 0 ! important; }

#mobile:checked ~ #slider #controls label { transform: scale(0.6); }

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

  #slider #controls { margin: -28% 0px 0px 24%; width: 50%; height: 50px; }

  #slider #active { margin: 23% 0px 0px; }

  #slider #slides { padding: 1% 0px; border-radius: 0px; }

  #slider #slides .info { opacity: 0 ! important; }

  #slider #controls label { transform: scale(0.6); }

}

@media only screen and (min-width: 850px) {

  body { padding: 0px 80px; }

}

