/* GENERAL - RESET CSS */
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{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}textarea:focus,input[type="text"]:focus{outline: none}

/* FONTS 
@font-face {font-family: 'ubuntu';
    src: url('fonts/ubuntu-regular-webfont.eot');
    src: url('fonts/ubuntu-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ubuntu-regular-webfont.woff') format('woff'),
         url('fonts/ubuntu-regular-webfont.ttf') format('truetype'),
         url('fonts/ubuntu-regular-webfont.svg#ubunturegular') format('svg');
    font-weight: normal;
    font-style: normal;
}*/

/* GENEREAL */
html{font-size:20px;}
@media screen and (max-width:1300px) { html{font-size:18px;} }
@media screen and (max-width:1175px) { html{font-size:16px;} }
@media screen and (max-width:800px) { html{font-size:14px;} }
body{font-family: 'Ubuntu', sans-serif; width:100%; height:100%; color:#808080; font-size:1rem; line-height:1.2em; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; text-rendering:optimizeLegibility;}

header{position:fixed; left:0; top:0; width:100%; text-align:center; z-index:2; height:60px;}
header span{position:absolute; left:20px; top:50%; cursor:pointer; transform:translate(0, -50%); -webkit-transform:translate(0, -50%); transition:.2s all ease-in-out; -webkit-transition:.2s all ease-in-out;}
header span.hidden{opacity:0; visibility:hidden;}
header img{display:none; height:50px; padding:10px;}

main{position:relative; width:100%; height:100vh; z-index:1;}
main div{position:fixed; left:10%; top: 10vh; width:80%; height:80vh; background:url(images/logo.svg); background-position:center center; background-size:contain; background-repeat:no-repeat; opacity:.1;}
main section{position:relative; width:100%; height:100vh; overflow:hidden;}
main section article{position:absolute; width:100%; height:100vh; padding:80px 20%; text-align:center; display:flex; flex-direction:column; justify-content:center; align-items:center; box-sizing:border-box; border-left:10px solid rgba(150, 150, 150, 1); border-right:10px solid rgba(150, 150, 150, 1); transform:translate(100%, 0); -webkit-transform:translate(100%, 0); transition:.7s all ease-in-out; -webkit-transition:.7s all ease-in-out; opacity:1;}
main section article.current{transform:translate(0, 0); -webkit-transform:translate(0, 0); border-left:10px solid rgba(150, 150, 150, 0); border-right:10px solid rgba(150, 150, 150, 0);}
main section article.prev{transform:translate(0, 0) scale(.5); -webkit-transform:translate(0, 0) scale(.5); opacity:0; border-left:10px solid rgba(150, 150, 150, 0); border-right:10px solid rgba(150, 150, 150, 0);}
main section article h1{font-size:1.5rem; line-height:1.2em; padding:0 0 1.5rem 0; color:#00CCFF; font-weight:900;}
main section article h2{font-size:1.25rem; line-height:1.2em; padding:0 0 1.25rem 0;}
main section article p{padding:0 0 1rem 0;}
main section article p small{font-size:.6rem;}
main section article a{color:#00CCFF; text-decoration:underline;}
main section article ul{font-size:0; line-height:0; text-align:center;}
main section article ul li{display:inline-block; background:#00CCFF; border:2px solid #00CCFF; color:white; cursor:pointer; padding:.5rem 1rem; font-size:1rem; line-height:1.2em; margin:.5rem; transition:.2s all ease-in-out; -webkit-transition:.2s all ease-in-out;}
main section article ul li:hover{background:white; color:#00CCFF;}

@media screen and (max-width:800px) {
	main section article{padding:40px 20px;}
}