@import url(https://fonts.googleapis.com/css?family=Roboto&display=swap);
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;vertical-align:baseline}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}img,fieldset,a img{border:none}input[type="text"],input[type="email"],input[type="tel"],textarea{-webkit-appearance:none}input[type="submit"],button{cursor:pointer}input[type="submit"]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border:0}textarea{overflow:auto}input,button{margin:0;padding:0;border:0}div,input,textarea,select,button,h1,h2,h3,h4,h5,h6,a,span,a:focus{outline:none}ul,ol{list-style-type:none}table{border-spacing:0;border-collapse:collapse;width:100%}html{box-sizing:border-box}html *,html *:before,html *:after{box-sizing:inherit}@media (prefers-reduced-motion: reduce){*{transition:none !important}}.slider{background:#ccc;padding:20px 60px;width:100%;height:100%;position:relative}.slider.uninitialized *{transition:none !important}.slider__inner{height:100%;position:relative;overflow:hidden}.slider__track{display:flex;justify-content:flex-start;position:absolute;height:100%;min-width:100%;transform:translate3d(0, 0, 0);transition:transform .27s ease-out}.slider__item{width:50%;height:100%;position:relative;margin-right:15px;background-size:cover}.slider__item:after{content:'';border:5px solid #ff0;opacity:0;transition:opacity .08s ease-out;position:absolute;top:0;left:0;width:100%;height:100%}.slider__item.active:after{opacity:1}.slider__navigation button{width:60px;height:100%;position:absolute;top:50%;transform:translateY(-50%);z-index:1;background:transparent;opacity:1;transition:.27s}.slider__navigation button.disabled{opacity:0.2 !important;pointer-events:none}.slider__navigation button[data-direction="prev"]{left:0}.slider__navigation button[data-direction="prev"] i:before{transform:rotate(180deg)}.slider__navigation button[data-direction="next"]{right:0}.slider__navigation button i{position:relative;display:block;margin:0 auto;width:40px;height:40px}.slider__navigation button i:before{content:'';width:100%;height:100%;position:absolute;top:0;left:0;background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iNTEycHgiIGlkPSJMYXllcl8xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cG9seWdvbiBwb2ludHM9IjE2MCwxMjguNCAxOTIuMyw5NiAzNTIsMjU2IDM1MiwyNTYgMzUyLDI1NiAxOTIuMyw0MTYgMTYwLDM4My42IDI4Ny4zLDI1NiAiLz48L3N2Zz4=");background-size:cover}#app{background:#eee;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column}#gallery{width:75%;height:250px;margin:auto}