diff --git a/css/base.css b/css/base.css
deleted file mode 100644
index f93ecdd..0000000
--- a/css/base.css
+++ /dev/null
@@ -1,102 +0,0 @@
-@font-face {
-        font-family: 'comfortaa';
-        src:url('../fonts/comfortaa.ttf');
-}
-
-.textblock {
-        background-color:#1f2833;
-        border-radius:2px;
-        border: 1px solid #667;
-        display:inline-block;
-        width: auto;
-        color: #c5c6c7;
-        padding: 1% 1% 1% 1%;
-        margin: 1% 1% 1% 1%;
-
-}
-
-.imgblock {
-        background-color:#1e2832;
-        border-radius:2px;
-        border:1px solid #667;
-        display:inline-block;
-        width: 96%;
-        height: 99%;
-        color: #c5c6c7;
-        padding: 1% 1% 1% 1%;
-        margin: 15% 1% 1% 1%;
-}
-
-.imgblock img {
-        margin: 1% 1% 1% 1%;
-	float: left;
-}
-
-body {
-        font: 100%/150% comfortaa;
-        width: 60%;
-        max-width: 80%;
-        margin: 0 auto;
-        background-color:#0b0c10;
-}
-p {
-        margin: 0 0 20px;
-}
-a {
-        color: #45a29e;
-        text-decoration: none;
-}
-a:hover {
-        color: #66fcf1;
-}
-
-
-h1, h2, h3 {
-        color: #eee;
-        margin: 20px 0 10px;
-}
-h1 {
-        font-size: 1.7em;
-        color: #bbb;
-}
-h2 {
-        font-size: 1.4em;
-}
-h3 {
-        font-size: 1.1em;
-}
-
-h1, h2, h3 {
-    color: #999;
-    margin: 20px 0 10px;
-    font-family: "comfortaa";
- }
-
-
-.zoom {
-  transition: transform .2s;
-  margin: 0 auto;
-}
-
-.zoom:hover {
-  -ms-transform: scale(2); /* IE 9 */
-  -webkit-transform: scale(2); /* Safari 3-8 */
-  transform: scale(2); 
-}
-
-@media screen and (max-width: 900px) {
-	body {
-		max-width: 90%;
-		width: 80%;
-	}
-}
-
-
-@media screen and (max-width: 716px) {
-	body {
-		max-width: 98%;
-		width: 96%;
-	}
-}
-
-
diff --git a/css/btn.css b/css/btn.css
deleted file mode 100644
index 61f8a1c..0000000
--- a/css/btn.css
+++ /dev/null
@@ -1,47 +0,0 @@
-.Button {
-	box-shadow: 0px 10px 14px -7px #3e7327;
-	background:linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
-	background-color:#77b55a;
-	border-radius:4px;
-	border:1px solid #4b8f29;
-	display:flex;
-	cursor:pointer;
-	color:#ffffff;
-	font-size:13px;
-	font-weight:bold;
-	padding:1% 2%;
-	text-decoration:none;
-	text-shadow:0px 1px 0px #5b8a3c;
-}
-.Button:hover {
-	background:linear-gradient(to bottom, #72b352 5%, #77b55a 100%);
-	background-color:#72b352;
-}
-.Button:active {
-	position:relative;
-	top:1px;
-}
-
-.Button2 {
-	box-shadow:inset 0px -3px 7px 0px #29bbff;
-	background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
-	background-color:#2dabf9;
-	border-radius:3px;
-	border:1px solid #0b0e07;
-	display:flex;
-	cursor:pointer;
-	color:#ffffff;
-	font-size:15px;
-	padding:1% 2%;
-	text-decoration:none;
-	text-shadow:0px 1px 0px #263666;
-}
-.Button2:hover {
-	background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
-	background-color:#0688fa;
-}
-.Button2:active {
-	position:relative;
-	top:1px;
-}
-
diff --git a/css/menu.css b/css/menu.css
deleted file mode 100644
index e72c559..0000000
--- a/css/menu.css
+++ /dev/null
@@ -1,174 +0,0 @@
-* {
-  box-sizing: border-box;
-}
-
-
-/* custom scrollbar */
-::-webkit-scrollbar {
-  width: .95em;
-}
-/* dummy content */
-.content {
-  float: left;
-  margin: .75em 0 0 0;
-  transition: margin .3s ease-in-out;
-}
-.content > p {
-  margin: .25em 0 .75em 0;
-}
-
-/* Advanced Checkbox Hack */
-body {
-  -webkit-animation: bugfix infinite 1s;
-}
-
-@-webkit-keyframes bugfix {
-  from {
-    padding: 0;
-  }
-  to {
-    padding: 0;
-  }
-}
-input[type=checkbox] {
-  position: absolute;
-  top: -9999px;
-  left: -9999px;
-}
-
-label {
-  position: fixed;
-  left: 0;
-  display: none;
-  width: 2em;
-  height: .5em;
-  padding: 20px;
-  font-size: 1.1em;
-  color: #fff;
-  transition: color .3s ease-in-out;
-  cursor: pointer;
-  user-select: none;
-  margin: 0;
-#  background-color:blue;
-}
-
-/* big screens */
-nav[role="off-canvas"] {
-  position: relative;
-  width: 50em;
-  margin: 0 auto;
-  transition-duration: .3s, .5s;
-  transition-timing-function: ease-in-out;
-  transition-property: left, opacity, box-shadow;
-}
-nav[role="off-canvas"] a {
-  color: #fff;
-  text-decoration: none;
-  transition: color .3s ease-in-out;
-  display: table-cell;
-  vertical-align: middle;
-}
-nav[role="off-canvas"] ul {
-  padding: 0;
-  margin: 0 auto;
-  width: 100%;
-}
-nav[role="off-canvas"] ul > li {
-  float: left;
-  padding: .55em .55em;
-  width: 8em;
-  margin: .5em;
-  opacity: .8;
-  text-transform: uppercase;
-  display: table;
-  cursor: pointer;
-  text-align: center;
-  transition-duration: .3s;
-  transition-timing-function: ease-in-out;
-  transition-property: box-shadow, color, opacity, padding-left;
-  cursor: pointer;
-}
-nav[role="off-canvas"] ul > li:hover {
-  color: #fff;
-  opacity: 1;
-  box-shadow: 0 0 0 0.5em rgba(255, 255, 255, 0.95);
-}
-nav[role="off-canvas"] ul > li
-	.active
-	{
-  color: #fff;
-  opacity: 1;
-  box-shadow: 0 0 0 0.5em rgba(255, 255, 255, 0.95);
-}
-
-/* small screens */
-@media screen and (max-width: 44em) {
-  html,
-  body {
-    margin: 0;
-    overflow-x: hidden;
-  }
-
-  .content {
-    margin: 2.5em .5em 0 .5em;
-  }
-
-  nav[role="off-canvas"] {
-    position: absolute;
-    top: 3em;
-    left: -20em;
-    width: 20em;
-    opacity: 0;
-  }
-  nav[role="off-canvas"] ul > li {
-    height: 100%;
-    width: 100%;
-    text-align: left;
-    margin: 0;
-    background: black;
-  }
-  nav[role="off-canvas"] ul > li:hover {
-    box-shadow: inset 0 0 0 0.15em rgba(255, 255, 255, 0.45);
-  }
-
-  label {
-    display: block;
-  }
-
-  label:after {
-    position: absolute;
-    right: .25em;
-    top: 0;
-    content: "\2261";
-    font-size: 1.8em;
-  }
-
-  label:hover,
-  input:checked ~ label {
-    color: #000;
-  }
-
-  input:checked ~ nav[role="off-canvas"] {
-    opacity: 1;
-    left: 0;
-    box-shadow: -30em 0 0 30em rgba(0, 0, 0, 0.3);
-  }
-  input:checked ~ nav[role="off-canvas"] ul > li {
-    padding: .55em .55em .55em 1.5em;
-  }
-  input:checked ~ nav[role="off-canvas"] ul > li:hover {
-    padding-left: 3.5em;
-  }
-  input:checked ~ nav[role="off-canvas"] ul > li:after {
-    position: absolute;
-    right: .25em;
-    content: "\203A";
-    color: inherit;
-  }
-
-  input:checked ~ .content {
-    margin-left: 20.5em;
-    margin-right: -20.5em;
-  }
-}
-
diff --git a/css/picnic.min.css b/css/picnic.min.css
new file mode 100644
index 0000000..0cda01a
--- /dev/null
+++ b/css/picnic.min.css
@@ -0,0 +1 @@
+html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#fff;color:#111}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:0;padding:0}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*{box-sizing:inherit}html,body{font-family:Arial, Helvetica, sans-serif;box-sizing:border-box;height:100%}body{color:#111;font-size:1.1em;line-height:1.5;background:#fff}main{display:block}h1,h2,h3,h4,h5,h6{margin:0;padding:.6em 0}li{margin:0 0 .3em}a{color:#0074d9;text-decoration:none;box-shadow:none;transition:all 0.3s}code{padding:.3em .6em;font-size:.8em;background:#f5f5f5}pre{text-align:left;padding:.3em .6em;background:#f5f5f5;border-radius:.2em}pre code{padding:0}blockquote{padding:0 0 0 1em;margin:0 0 0 .1em;box-shadow:inset 5px 0 rgba(17,17,17,0.3)}label{cursor:pointer}[class^="icon-"]:before,[class*=" icon-"]:before{margin:0 .6em 0 0}i[class^="icon-"]:before,i[class*=" icon-"]:before{margin:0}.label,[data-tooltip]:after,button,.button,[type=submit],.dropimage{display:inline-block;text-align:center;letter-spacing:inherit;margin:0;padding:.3em .9em;vertical-align:middle;background:#0074d9;color:#fff;border:0;border-radius:.2em;width:auto;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.success.label,.success[data-tooltip]:after,button.success,.success.button,.success[type=submit],.success.dropimage{background:#2ecc40}.warning.label,.warning[data-tooltip]:after,button.warning,.warning.button,.warning[type=submit],.warning.dropimage{background:#ff851b}.error.label,.error[data-tooltip]:after,button.error,.error.button,.error[type=submit],.error.dropimage{background:#ff4136}.pseudo.label,.pseudo[data-tooltip]:after,button.pseudo,.pseudo.button,.pseudo[type=submit],.pseudo.dropimage{background-color:transparent;color:inherit}.label,[data-tooltip]:after{font-size:.6em;padding:.4em .6em;margin-left:1em;line-height:1}button,.button,[type=submit],.dropimage{margin:.3em 0;cursor:pointer;transition:all 0.3s;border-radius:.2em;height:auto;vertical-align:baseline;box-shadow:0 0 rgba(17,17,17,0) inset}button:hover,.button:hover,:hover[type=submit],.dropimage:hover,button:focus,.button:focus,:focus[type=submit],.dropimage:focus{box-shadow:inset 0 0 0 99em rgba(255,255,255,0.2);border:0}button.pseudo:hover,.pseudo.button:hover,.pseudo:hover[type=submit],.pseudo.dropimage:hover,button.pseudo:focus,.pseudo.button:focus,.pseudo:focus[type=submit],.pseudo.dropimage:focus{box-shadow:inset 0 0 0 99em rgba(17,17,17,0.1)}button.active,.active.button,.active[type=submit],.active.dropimage,button:active,.button:active,:active[type=submit],.dropimage:active,button.pseudo:active,.pseudo.button:active,.pseudo:active[type=submit],.pseudo.dropimage:active{box-shadow:inset 0 0 0 99em rgba(17,17,17,0.2)}button[disabled],.button[disabled],[disabled][type=submit],.dropimage[disabled]{cursor:default;box-shadow:none;background:#aaa}:checked+.toggle,:checked+.toggle:hover{box-shadow:inset 0 0 0 99em rgba(17,17,17,0.2)}[type]+.toggle{padding:.3em .9em;margin-right:0}[type]+.toggle:after,[type]+.toggle:before{display:none}input,textarea,.select select{line-height:1.5;margin:0;height:2.1em;padding:.3em .6em;border:1px solid #aaa;background-color:#fff;border-radius:.2em;transition:all 0.3s;width:100%}input:focus,textarea:focus,.select select:focus{border:1px solid #0074d9;outline:0}textarea{height:auto}[type=file],[type=color]{cursor:pointer}[type=file]{height:auto}select{background:#fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyIiBoZWlnaHQ9IjMiPjxwYXRoIGQ9Im0gMCwxIDEsMiAxLC0yIHoiLz48L3N2Zz4=) no-repeat scroll 95% center/10px 15px;background-position:calc(100% - 15px) center;border:1px solid #aaa;border-radius:.2em;cursor:pointer;width:100%;height:2.2em;box-sizing:border-box;padding:.3em .45em;transition:all 0.3s;-moz-appearance:none;-webkit-appearance:none;appearance:none}select::-ms-expand{display:none}select:focus,select:active{border:1px solid #0074d9;transition:outline 0s}select:-moz-focusring{color:transparent;text-shadow:0 0 0 #111}select option{font-size:inherit;padding:.45em}select[multiple]{height:auto;background:none;padding:0}[type=radio],[type=checkbox]{opacity:0;width:0;position:absolute;display:inline-block}[type=radio]+.checkable:hover:before,[type=checkbox]+.checkable:hover:before,:focus[type=radio]+.checkable:before,:focus[type=checkbox]+.checkable:before{border:1px solid #0074d9}[type=radio]+.checkable,[type=checkbox]+.checkable{position:relative;cursor:pointer;padding-left:1.5em;margin-right:.6em}[type=radio]+.checkable:before,[type=checkbox]+.checkable:before,[type=radio]+.checkable:after,[type=checkbox]+.checkable:after{content:'';position:absolute;display:inline-block;left:0;top:50%;transform:translateY(-50%);font-size:1em;line-height:1em;color:transparent;font-family:sans;text-align:center;box-sizing:border-box;width:1em;height:1em;border-radius:50%;transition:all 0.3s}[type=radio]+.checkable:before,[type=checkbox]+.checkable:before{border:1px solid #aaa}:checked[type=radio]+.checkable:after,:checked[type=checkbox]+.checkable:after{background:#111;transform:scale(0.5) translateY(-100%)}[type=checkbox]+.checkable:before{border-radius:.2em}[type=checkbox]+.checkable:after{content:"✔";background:none;transform:scale(2) translateY(-25%);visibility:hidden;opacity:0}:checked[type=checkbox]+.checkable:after{color:#111;background:none;transform:translateY(-50%);transition:all 0.3s;visibility:visible;opacity:1}table{text-align:left}td,th{padding:.3em 2.4em .3em .6em}th{text-align:left;font-weight:900;color:#fff;background-color:#0074d9}.success th{background-color:#2ecc40}.warning th{background-color:#ff851b}.error th{background-color:#ff4136}.dull th{background-color:#aaa}tr:nth-child(even){background:rgba(17,17,17,0.05)}.flex{display:-ms-flexbox;display:flex;margin-left:-.6em;width:calc(100% + .6em);flex-wrap:wrap;transition:all .3s ease}.flex>*{box-sizing:border-box;flex:1 1 auto;padding-left:.6em;padding-bottom:.6em}.flex[class*="one"]>*,.flex[class*="two"]>*,.flex[class*="three"]>*,.flex[class*="four"]>*,.flex[class*="five"]>*,.flex[class*="six"]>*,.flex[class*="seven"]>*,.flex[class*="eight"]>*,.flex[class*="nine"]>*,.flex[class*="ten"]>*,.flex[class*="eleven"]>*,.flex[class*="twelve"]>*{flex-grow:0}.flex.grow>*{flex-grow:1}.center{justify-content:center}.one>*{width:100%}.two>*{width:50%}.three>*{width:33.33333%}.four>*{width:25%}.five>*{width:20%}.six>*{width:16.66666%}.seven>*{width:14.28571%}.eight>*{width:12.5%}.nine>*{width:11.11111%}.ten>*{width:10%}.eleven>*{width:9.09091%}.twelve>*{width:8.33333%}@media all and (min-width: 500px){.one-500>*{width:100%}.two-500>*{width:50%}.three-500>*{width:33.33333%}.four-500>*{width:25%}.five-500>*{width:20%}.six-500>*{width:16.66666%}.seven-500>*{width:14.28571%}.eight-500>*{width:12.5%}.nine-500>*{width:11.11111%}.ten-500>*{width:10%}.eleven-500>*{width:9.09091%}.twelve-500>*{width:8.33333%}}@media all and (min-width: 600px){.one-600>*{width:100%}.two-600>*{width:50%}.three-600>*{width:33.33333%}.four-600>*{width:25%}.five-600>*{width:20%}.six-600>*{width:16.66666%}.seven-600>*{width:14.28571%}.eight-600>*{width:12.5%}.nine-600>*{width:11.11111%}.ten-600>*{width:10%}.eleven-600>*{width:9.09091%}.twelve-600>*{width:8.33333%}}@media all and (min-width: 700px){.one-700>*{width:100%}.two-700>*{width:50%}.three-700>*{width:33.33333%}.four-700>*{width:25%}.five-700>*{width:20%}.six-700>*{width:16.66666%}.seven-700>*{width:14.28571%}.eight-700>*{width:12.5%}.nine-700>*{width:11.11111%}.ten-700>*{width:10%}.eleven-700>*{width:9.09091%}.twelve-700>*{width:8.33333%}}@media all and (min-width: 800px){.one-800>*{width:100%}.two-800>*{width:50%}.three-800>*{width:33.33333%}.four-800>*{width:25%}.five-800>*{width:20%}.six-800>*{width:16.66666%}.seven-800>*{width:14.28571%}.eight-800>*{width:12.5%}.nine-800>*{width:11.11111%}.ten-800>*{width:10%}.eleven-800>*{width:9.09091%}.twelve-800>*{width:8.33333%}}@media all and (min-width: 900px){.one-900>*{width:100%}.two-900>*{width:50%}.three-900>*{width:33.33333%}.four-900>*{width:25%}.five-900>*{width:20%}.six-900>*{width:16.66666%}.seven-900>*{width:14.28571%}.eight-900>*{width:12.5%}.nine-900>*{width:11.11111%}.ten-900>*{width:10%}.eleven-900>*{width:9.09091%}.twelve-900>*{width:8.33333%}}@media all and (min-width: 1000px){.one-1000>*{width:100%}.two-1000>*{width:50%}.three-1000>*{width:33.33333%}.four-1000>*{width:25%}.five-1000>*{width:20%}.six-1000>*{width:16.66666%}.seven-1000>*{width:14.28571%}.eight-1000>*{width:12.5%}.nine-1000>*{width:11.11111%}.ten-1000>*{width:10%}.eleven-1000>*{width:9.09091%}.twelve-1000>*{width:8.33333%}}@media all and (min-width: 1100px){.one-1100>*{width:100%}.two-1100>*{width:50%}.three-1100>*{width:33.33333%}.four-1100>*{width:25%}.five-1100>*{width:20%}.six-1100>*{width:16.66666%}.seven-1100>*{width:14.28571%}.eight-1100>*{width:12.5%}.nine-1100>*{width:11.11111%}.ten-1100>*{width:10%}.eleven-1100>*{width:9.09091%}.twelve-1100>*{width:8.33333%}}@media all and (min-width: 1200px){.one-1200>*{width:100%}.two-1200>*{width:50%}.three-1200>*{width:33.33333%}.four-1200>*{width:25%}.five-1200>*{width:20%}.six-1200>*{width:16.66666%}.seven-1200>*{width:14.28571%}.eight-1200>*{width:12.5%}.nine-1200>*{width:11.11111%}.ten-1200>*{width:10%}.eleven-1200>*{width:9.09091%}.twelve-1200>*{width:8.33333%}}@media all and (min-width: 1300px){.one-1300>*{width:100%}.two-1300>*{width:50%}.three-1300>*{width:33.33333%}.four-1300>*{width:25%}.five-1300>*{width:20%}.six-1300>*{width:16.66666%}.seven-1300>*{width:14.28571%}.eight-1300>*{width:12.5%}.nine-1300>*{width:11.11111%}.ten-1300>*{width:10%}.eleven-1300>*{width:9.09091%}.twelve-1300>*{width:8.33333%}}@media all and (min-width: 1400px){.one-1400>*{width:100%}.two-1400>*{width:50%}.three-1400>*{width:33.33333%}.four-1400>*{width:25%}.five-1400>*{width:20%}.six-1400>*{width:16.66666%}.seven-1400>*{width:14.28571%}.eight-1400>*{width:12.5%}.nine-1400>*{width:11.11111%}.ten-1400>*{width:10%}.eleven-1400>*{width:9.09091%}.twelve-1400>*{width:8.33333%}}@media all and (min-width: 1500px){.one-1500>*{width:100%}.two-1500>*{width:50%}.three-1500>*{width:33.33333%}.four-1500>*{width:25%}.five-1500>*{width:20%}.six-1500>*{width:16.66666%}.seven-1500>*{width:14.28571%}.eight-1500>*{width:12.5%}.nine-1500>*{width:11.11111%}.ten-1500>*{width:10%}.eleven-1500>*{width:9.09091%}.twelve-1500>*{width:8.33333%}}@media all and (min-width: 1600px){.one-1600>*{width:100%}.two-1600>*{width:50%}.three-1600>*{width:33.33333%}.four-1600>*{width:25%}.five-1600>*{width:20%}.six-1600>*{width:16.66666%}.seven-1600>*{width:14.28571%}.eight-1600>*{width:12.5%}.nine-1600>*{width:11.11111%}.ten-1600>*{width:10%}.eleven-1600>*{width:9.09091%}.twelve-1600>*{width:8.33333%}}@media all and (min-width: 1700px){.one-1700>*{width:100%}.two-1700>*{width:50%}.three-1700>*{width:33.33333%}.four-1700>*{width:25%}.five-1700>*{width:20%}.six-1700>*{width:16.66666%}.seven-1700>*{width:14.28571%}.eight-1700>*{width:12.5%}.nine-1700>*{width:11.11111%}.ten-1700>*{width:10%}.eleven-1700>*{width:9.09091%}.twelve-1700>*{width:8.33333%}}@media all and (min-width: 1800px){.one-1800>*{width:100%}.two-1800>*{width:50%}.three-1800>*{width:33.33333%}.four-1800>*{width:25%}.five-1800>*{width:20%}.six-1800>*{width:16.66666%}.seven-1800>*{width:14.28571%}.eight-1800>*{width:12.5%}.nine-1800>*{width:11.11111%}.ten-1800>*{width:10%}.eleven-1800>*{width:9.09091%}.twelve-1800>*{width:8.33333%}}@media all and (min-width: 1900px){.one-1900>*{width:100%}.two-1900>*{width:50%}.three-1900>*{width:33.33333%}.four-1900>*{width:25%}.five-1900>*{width:20%}.six-1900>*{width:16.66666%}.seven-1900>*{width:14.28571%}.eight-1900>*{width:12.5%}.nine-1900>*{width:11.11111%}.ten-1900>*{width:10%}.eleven-1900>*{width:9.09091%}.twelve-1900>*{width:8.33333%}}@media all and (min-width: 2000px){.one-2000>*{width:100%}.two-2000>*{width:50%}.three-2000>*{width:33.33333%}.four-2000>*{width:25%}.five-2000>*{width:20%}.six-2000>*{width:16.66666%}.seven-2000>*{width:14.28571%}.eight-2000>*{width:12.5%}.nine-2000>*{width:11.11111%}.ten-2000>*{width:10%}.eleven-2000>*{width:9.09091%}.twelve-2000>*{width:8.33333%}}.full{width:100%}.half{width:50%}.third{width:33.33333%}.two-third{width:66.66666%}.fourth{width:25%}.three-fourth{width:75%}.fifth{width:20%}.two-fifth{width:40%}.three-fifth{width:60%}.four-fifth{width:80%}.sixth{width:16.66666%}.none{display:none}@media all and (min-width: 500px){.full-500{width:100%;display:block}.half-500{width:50%;display:block}.third-500{width:33.33333%;display:block}.two-third-500{width:66.66666%;display:block}.fourth-500{width:25%;display:block}.three-fourth-500{width:75%;display:block}.fifth-500{width:20%;display:block}.two-fifth-500{width:40%;display:block}.three-fifth-500{width:60%;display:block}.four-fifth-500{width:80%;display:block}.sixth-500{width:16.66666%;display:block}}@media all and (min-width: 600px){.full-600{width:100%;display:block}.half-600{width:50%;display:block}.third-600{width:33.33333%;display:block}.two-third-600{width:66.66666%;display:block}.fourth-600{width:25%;display:block}.three-fourth-600{width:75%;display:block}.fifth-600{width:20%;display:block}.two-fifth-600{width:40%;display:block}.three-fifth-600{width:60%;display:block}.four-fifth-600{width:80%;display:block}.sixth-600{width:16.66666%;display:block}}@media all and (min-width: 700px){.full-700{width:100%;display:block}.half-700{width:50%;display:block}.third-700{width:33.33333%;display:block}.two-third-700{width:66.66666%;display:block}.fourth-700{width:25%;display:block}.three-fourth-700{width:75%;display:block}.fifth-700{width:20%;display:block}.two-fifth-700{width:40%;display:block}.three-fifth-700{width:60%;display:block}.four-fifth-700{width:80%;display:block}.sixth-700{width:16.66666%;display:block}}@media all and (min-width: 800px){.full-800{width:100%;display:block}.half-800{width:50%;display:block}.third-800{width:33.33333%;display:block}.two-third-800{width:66.66666%;display:block}.fourth-800{width:25%;display:block}.three-fourth-800{width:75%;display:block}.fifth-800{width:20%;display:block}.two-fifth-800{width:40%;display:block}.three-fifth-800{width:60%;display:block}.four-fifth-800{width:80%;display:block}.sixth-800{width:16.66666%;display:block}}@media all and (min-width: 900px){.full-900{width:100%;display:block}.half-900{width:50%;display:block}.third-900{width:33.33333%;display:block}.two-third-900{width:66.66666%;display:block}.fourth-900{width:25%;display:block}.three-fourth-900{width:75%;display:block}.fifth-900{width:20%;display:block}.two-fifth-900{width:40%;display:block}.three-fifth-900{width:60%;display:block}.four-fifth-900{width:80%;display:block}.sixth-900{width:16.66666%;display:block}}@media all and (min-width: 1000px){.full-1000{width:100%;display:block}.half-1000{width:50%;display:block}.third-1000{width:33.33333%;display:block}.two-third-1000{width:66.66666%;display:block}.fourth-1000{width:25%;display:block}.three-fourth-1000{width:75%;display:block}.fifth-1000{width:20%;display:block}.two-fifth-1000{width:40%;display:block}.three-fifth-1000{width:60%;display:block}.four-fifth-1000{width:80%;display:block}.sixth-1000{width:16.66666%;display:block}}@media all and (min-width: 1100px){.full-1100{width:100%;display:block}.half-1100{width:50%;display:block}.third-1100{width:33.33333%;display:block}.two-third-1100{width:66.66666%;display:block}.fourth-1100{width:25%;display:block}.three-fourth-1100{width:75%;display:block}.fifth-1100{width:20%;display:block}.two-fifth-1100{width:40%;display:block}.three-fifth-1100{width:60%;display:block}.four-fifth-1100{width:80%;display:block}.sixth-1100{width:16.66666%;display:block}}@media all and (min-width: 1200px){.full-1200{width:100%;display:block}.half-1200{width:50%;display:block}.third-1200{width:33.33333%;display:block}.two-third-1200{width:66.66666%;display:block}.fourth-1200{width:25%;display:block}.three-fourth-1200{width:75%;display:block}.fifth-1200{width:20%;display:block}.two-fifth-1200{width:40%;display:block}.three-fifth-1200{width:60%;display:block}.four-fifth-1200{width:80%;display:block}.sixth-1200{width:16.66666%;display:block}}@media all and (min-width: 1300px){.full-1300{width:100%;display:block}.half-1300{width:50%;display:block}.third-1300{width:33.33333%;display:block}.two-third-1300{width:66.66666%;display:block}.fourth-1300{width:25%;display:block}.three-fourth-1300{width:75%;display:block}.fifth-1300{width:20%;display:block}.two-fifth-1300{width:40%;display:block}.three-fifth-1300{width:60%;display:block}.four-fifth-1300{width:80%;display:block}.sixth-1300{width:16.66666%;display:block}}@media all and (min-width: 1400px){.full-1400{width:100%;display:block}.half-1400{width:50%;display:block}.third-1400{width:33.33333%;display:block}.two-third-1400{width:66.66666%;display:block}.fourth-1400{width:25%;display:block}.three-fourth-1400{width:75%;display:block}.fifth-1400{width:20%;display:block}.two-fifth-1400{width:40%;display:block}.three-fifth-1400{width:60%;display:block}.four-fifth-1400{width:80%;display:block}.sixth-1400{width:16.66666%;display:block}}@media all and (min-width: 1500px){.full-1500{width:100%;display:block}.half-1500{width:50%;display:block}.third-1500{width:33.33333%;display:block}.two-third-1500{width:66.66666%;display:block}.fourth-1500{width:25%;display:block}.three-fourth-1500{width:75%;display:block}.fifth-1500{width:20%;display:block}.two-fifth-1500{width:40%;display:block}.three-fifth-1500{width:60%;display:block}.four-fifth-1500{width:80%;display:block}.sixth-1500{width:16.66666%;display:block}}@media all and (min-width: 1600px){.full-1600{width:100%;display:block}.half-1600{width:50%;display:block}.third-1600{width:33.33333%;display:block}.two-third-1600{width:66.66666%;display:block}.fourth-1600{width:25%;display:block}.three-fourth-1600{width:75%;display:block}.fifth-1600{width:20%;display:block}.two-fifth-1600{width:40%;display:block}.three-fifth-1600{width:60%;display:block}.four-fifth-1600{width:80%;display:block}.sixth-1600{width:16.66666%;display:block}}@media all and (min-width: 1700px){.full-1700{width:100%;display:block}.half-1700{width:50%;display:block}.third-1700{width:33.33333%;display:block}.two-third-1700{width:66.66666%;display:block}.fourth-1700{width:25%;display:block}.three-fourth-1700{width:75%;display:block}.fifth-1700{width:20%;display:block}.two-fifth-1700{width:40%;display:block}.three-fifth-1700{width:60%;display:block}.four-fifth-1700{width:80%;display:block}.sixth-1700{width:16.66666%;display:block}}@media all and (min-width: 1800px){.full-1800{width:100%;display:block}.half-1800{width:50%;display:block}.third-1800{width:33.33333%;display:block}.two-third-1800{width:66.66666%;display:block}.fourth-1800{width:25%;display:block}.three-fourth-1800{width:75%;display:block}.fifth-1800{width:20%;display:block}.two-fifth-1800{width:40%;display:block}.three-fifth-1800{width:60%;display:block}.four-fifth-1800{width:80%;display:block}.sixth-1800{width:16.66666%;display:block}}@media all and (min-width: 1900px){.full-1900{width:100%;display:block}.half-1900{width:50%;display:block}.third-1900{width:33.33333%;display:block}.two-third-1900{width:66.66666%;display:block}.fourth-1900{width:25%;display:block}.three-fourth-1900{width:75%;display:block}.fifth-1900{width:20%;display:block}.two-fifth-1900{width:40%;display:block}.three-fifth-1900{width:60%;display:block}.four-fifth-1900{width:80%;display:block}.sixth-1900{width:16.66666%;display:block}}@media all and (min-width: 2000px){.full-2000{width:100%;display:block}.half-2000{width:50%;display:block}.third-2000{width:33.33333%;display:block}.two-third-2000{width:66.66666%;display:block}.fourth-2000{width:25%;display:block}.three-fourth-2000{width:75%;display:block}.fifth-2000{width:20%;display:block}.two-fifth-2000{width:40%;display:block}.three-fifth-2000{width:60%;display:block}.four-fifth-2000{width:80%;display:block}.sixth-2000{width:16.66666%;display:block}}@media all and (min-width: 500px){.none-500{display:none}}@media all and (min-width: 600px){.none-600{display:none}}@media all and (min-width: 700px){.none-700{display:none}}@media all and (min-width: 800px){.none-800{display:none}}@media all and (min-width: 900px){.none-900{display:none}}@media all and (min-width: 1000px){.none-1000{display:none}}@media all and (min-width: 1100px){.none-1100{display:none}}@media all and (min-width: 1200px){.none-1200{display:none}}@media all and (min-width: 1300px){.none-1300{display:none}}@media all and (min-width: 1400px){.none-1400{display:none}}@media all and (min-width: 1500px){.none-1500{display:none}}@media all and (min-width: 1600px){.none-1600{display:none}}@media all and (min-width: 1700px){.none-1700{display:none}}@media all and (min-width: 1800px){.none-1800{display:none}}@media all and (min-width: 1900px){.none-1900{display:none}}@media all and (min-width: 2000px){.none-2000{display:none}}.off-none{margin-left:0}.off-half{margin-left:50%}.off-third{margin-left:33.33333%}.off-two-third{margin-left:66.66666%}.off-fourth{margin-left:25%}.off-three-fourth{margin-left:75%}.off-fifth{margin-left:20%}.off-two-fifth{margin-left:40%}.off-three-fifth{margin-left:60%}.off-four-fifth{margin-left:80%}.off-sixth{margin-left:16.66666%}@media all and (min-width: 500px){.off-none-500{margin-left:0}.off-half-500{margin-left:50%}.off-third-500{margin-left:33.33333%}.off-two-third-500{margin-left:66.66666%}.off-fourth-500{margin-left:25%}.off-three-fourth-500{margin-left:75%}.off-fifth-500{margin-left:20%}.off-two-fifth-500{margin-left:40%}.off-three-fifth-500{margin-left:60%}.off-four-fifth-500{margin-left:80%}.off-sixth-500{margin-left:16.66666%}}@media all and (min-width: 600px){.off-none-600{margin-left:0}.off-half-600{margin-left:50%}.off-third-600{margin-left:33.33333%}.off-two-third-600{margin-left:66.66666%}.off-fourth-600{margin-left:25%}.off-three-fourth-600{margin-left:75%}.off-fifth-600{margin-left:20%}.off-two-fifth-600{margin-left:40%}.off-three-fifth-600{margin-left:60%}.off-four-fifth-600{margin-left:80%}.off-sixth-600{margin-left:16.66666%}}@media all and (min-width: 700px){.off-none-700{margin-left:0}.off-half-700{margin-left:50%}.off-third-700{margin-left:33.33333%}.off-two-third-700{margin-left:66.66666%}.off-fourth-700{margin-left:25%}.off-three-fourth-700{margin-left:75%}.off-fifth-700{margin-left:20%}.off-two-fifth-700{margin-left:40%}.off-three-fifth-700{margin-left:60%}.off-four-fifth-700{margin-left:80%}.off-sixth-700{margin-left:16.66666%}}@media all and (min-width: 800px){.off-none-800{margin-left:0}.off-half-800{margin-left:50%}.off-third-800{margin-left:33.33333%}.off-two-third-800{margin-left:66.66666%}.off-fourth-800{margin-left:25%}.off-three-fourth-800{margin-left:75%}.off-fifth-800{margin-left:20%}.off-two-fifth-800{margin-left:40%}.off-three-fifth-800{margin-left:60%}.off-four-fifth-800{margin-left:80%}.off-sixth-800{margin-left:16.66666%}}@media all and (min-width: 900px){.off-none-900{margin-left:0}.off-half-900{margin-left:50%}.off-third-900{margin-left:33.33333%}.off-two-third-900{margin-left:66.66666%}.off-fourth-900{margin-left:25%}.off-three-fourth-900{margin-left:75%}.off-fifth-900{margin-left:20%}.off-two-fifth-900{margin-left:40%}.off-three-fifth-900{margin-left:60%}.off-four-fifth-900{margin-left:80%}.off-sixth-900{margin-left:16.66666%}}@media all and (min-width: 1000px){.off-none-1000{margin-left:0}.off-half-1000{margin-left:50%}.off-third-1000{margin-left:33.33333%}.off-two-third-1000{margin-left:66.66666%}.off-fourth-1000{margin-left:25%}.off-three-fourth-1000{margin-left:75%}.off-fifth-1000{margin-left:20%}.off-two-fifth-1000{margin-left:40%}.off-three-fifth-1000{margin-left:60%}.off-four-fifth-1000{margin-left:80%}.off-sixth-1000{margin-left:16.66666%}}@media all and (min-width: 1100px){.off-none-1100{margin-left:0}.off-half-1100{margin-left:50%}.off-third-1100{margin-left:33.33333%}.off-two-third-1100{margin-left:66.66666%}.off-fourth-1100{margin-left:25%}.off-three-fourth-1100{margin-left:75%}.off-fifth-1100{margin-left:20%}.off-two-fifth-1100{margin-left:40%}.off-three-fifth-1100{margin-left:60%}.off-four-fifth-1100{margin-left:80%}.off-sixth-1100{margin-left:16.66666%}}@media all and (min-width: 1200px){.off-none-1200{margin-left:0}.off-half-1200{margin-left:50%}.off-third-1200{margin-left:33.33333%}.off-two-third-1200{margin-left:66.66666%}.off-fourth-1200{margin-left:25%}.off-three-fourth-1200{margin-left:75%}.off-fifth-1200{margin-left:20%}.off-two-fifth-1200{margin-left:40%}.off-three-fifth-1200{margin-left:60%}.off-four-fifth-1200{margin-left:80%}.off-sixth-1200{margin-left:16.66666%}}@media all and (min-width: 1300px){.off-none-1300{margin-left:0}.off-half-1300{margin-left:50%}.off-third-1300{margin-left:33.33333%}.off-two-third-1300{margin-left:66.66666%}.off-fourth-1300{margin-left:25%}.off-three-fourth-1300{margin-left:75%}.off-fifth-1300{margin-left:20%}.off-two-fifth-1300{margin-left:40%}.off-three-fifth-1300{margin-left:60%}.off-four-fifth-1300{margin-left:80%}.off-sixth-1300{margin-left:16.66666%}}@media all and (min-width: 1400px){.off-none-1400{margin-left:0}.off-half-1400{margin-left:50%}.off-third-1400{margin-left:33.33333%}.off-two-third-1400{margin-left:66.66666%}.off-fourth-1400{margin-left:25%}.off-three-fourth-1400{margin-left:75%}.off-fifth-1400{margin-left:20%}.off-two-fifth-1400{margin-left:40%}.off-three-fifth-1400{margin-left:60%}.off-four-fifth-1400{margin-left:80%}.off-sixth-1400{margin-left:16.66666%}}@media all and (min-width: 1500px){.off-none-1500{margin-left:0}.off-half-1500{margin-left:50%}.off-third-1500{margin-left:33.33333%}.off-two-third-1500{margin-left:66.66666%}.off-fourth-1500{margin-left:25%}.off-three-fourth-1500{margin-left:75%}.off-fifth-1500{margin-left:20%}.off-two-fifth-1500{margin-left:40%}.off-three-fifth-1500{margin-left:60%}.off-four-fifth-1500{margin-left:80%}.off-sixth-1500{margin-left:16.66666%}}@media all and (min-width: 1600px){.off-none-1600{margin-left:0}.off-half-1600{margin-left:50%}.off-third-1600{margin-left:33.33333%}.off-two-third-1600{margin-left:66.66666%}.off-fourth-1600{margin-left:25%}.off-three-fourth-1600{margin-left:75%}.off-fifth-1600{margin-left:20%}.off-two-fifth-1600{margin-left:40%}.off-three-fifth-1600{margin-left:60%}.off-four-fifth-1600{margin-left:80%}.off-sixth-1600{margin-left:16.66666%}}@media all and (min-width: 1700px){.off-none-1700{margin-left:0}.off-half-1700{margin-left:50%}.off-third-1700{margin-left:33.33333%}.off-two-third-1700{margin-left:66.66666%}.off-fourth-1700{margin-left:25%}.off-three-fourth-1700{margin-left:75%}.off-fifth-1700{margin-left:20%}.off-two-fifth-1700{margin-left:40%}.off-three-fifth-1700{margin-left:60%}.off-four-fifth-1700{margin-left:80%}.off-sixth-1700{margin-left:16.66666%}}@media all and (min-width: 1800px){.off-none-1800{margin-left:0}.off-half-1800{margin-left:50%}.off-third-1800{margin-left:33.33333%}.off-two-third-1800{margin-left:66.66666%}.off-fourth-1800{margin-left:25%}.off-three-fourth-1800{margin-left:75%}.off-fifth-1800{margin-left:20%}.off-two-fifth-1800{margin-left:40%}.off-three-fifth-1800{margin-left:60%}.off-four-fifth-1800{margin-left:80%}.off-sixth-1800{margin-left:16.66666%}}@media all and (min-width: 1900px){.off-none-1900{margin-left:0}.off-half-1900{margin-left:50%}.off-third-1900{margin-left:33.33333%}.off-two-third-1900{margin-left:66.66666%}.off-fourth-1900{margin-left:25%}.off-three-fourth-1900{margin-left:75%}.off-fifth-1900{margin-left:20%}.off-two-fifth-1900{margin-left:40%}.off-three-fifth-1900{margin-left:60%}.off-four-fifth-1900{margin-left:80%}.off-sixth-1900{margin-left:16.66666%}}@media all and (min-width: 2000px){.off-none-2000{margin-left:0}.off-half-2000{margin-left:50%}.off-third-2000{margin-left:33.33333%}.off-two-third-2000{margin-left:66.66666%}.off-fourth-2000{margin-left:25%}.off-three-fourth-2000{margin-left:75%}.off-fifth-2000{margin-left:20%}.off-two-fifth-2000{margin-left:40%}.off-three-fifth-2000{margin-left:60%}.off-four-fifth-2000{margin-left:80%}.off-sixth-2000{margin-left:16.66666%}}nav{position:fixed;top:0;left:0;right:0;height:3em;padding:0 .6em;background:#fff;box-shadow:0 0 0.2em rgba(170,170,170,0.2);z-index:10000;transition:all .3s;transform-style:preserve-3d}nav .brand,nav .menu,nav .burger{float:right;position:relative;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}nav .brand{font-weight:700;float:left;padding:0 .6em;max-width:50%;white-space:nowrap;color:inherit}nav .brand *{vertical-align:middle}nav .logo{height:2em;margin-right:.3em}nav .select::after{height:calc(100% - 1px);padding:0;line-height:2.4em}nav .menu>*{margin-right:.6em}nav .burger{display:none}@media all and (max-width: 60em){nav .burger{display:inline-block;cursor:pointer;bottom:-1000em;margin:0}nav .burger ~ .menu,nav .show:checked ~ .burger{position:fixed;min-height:100%;top:0;right:0;bottom:-1000em;margin:0;background:#fff;transition:all .5s ease;transform:none}nav .burger ~ .menu{z-index:11}nav .show:checked ~ .burger{color:transparent;width:100%;border-radius:0;background:rgba(17,17,17,0.2);transition:all .5s ease}nav .show ~ .menu{width:70%;max-width:300px;transform-origin:center right;transition:all .25s ease;transform:scaleX(0)}nav .show ~ .menu>*{transform:translateX(100%);transition:all 0s ease .5s}nav .show:checked ~ .menu>*:nth-child(1){transition:all .5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s}nav .show:checked ~ .menu>*:nth-child(2){transition:all .5s cubic-bezier(0.645, 0.045, 0.355, 1) .1s}nav .show:checked ~ .menu>*:nth-child(3){transition:all .5s cubic-bezier(0.645, 0.045, 0.355, 1) .2s}nav .show:checked ~ .menu>*:nth-child(4){transition:all .5s cubic-bezier(0.645, 0.045, 0.355, 1) .3s}nav .show:checked ~ .menu>*:nth-child(5){transition:all .5s cubic-bezier(0.645, 0.045, 0.355, 1) .4s}nav .show:checked ~ .menu>*:nth-child(6){transition:all .5s cubic-bezier(0.645, 0.045, 0.355, 1) .5s}nav .show:checked ~ .menu{transform:scaleX(1)}nav .show:checked ~ .menu>*{transform:translateX(0);transition:all .5s ease-in-out .6s}nav .burger ~ .menu>*{display:block;margin:.3em;text-align:left;max-width:calc(100% - .6em)}nav .burger ~ .menu>a{padding:.3em .9em}}.stack,.stack .toggle{margin-top:0;margin-bottom:0;display:block;width:100%;text-align:left;border-radius:0}.stack:first-child,.stack:first-child .toggle{border-top-left-radius:.2em;border-top-right-radius:.2em}.stack:last-child,.stack:last-child .toggle{border-bottom-left-radius:.2em;border-bottom-right-radius:.2em}input.stack,textarea.stack,select.stack{transition:border-bottom 0 ease 0;border-bottom-width:0}input.stack:last-child,textarea.stack:last-child,select.stack:last-child{border-bottom-width:1px}input.stack:focus+input,input.stack:focus+textarea,input.stack:focus+select,textarea.stack:focus+input,textarea.stack:focus+textarea,textarea.stack:focus+select,select.stack:focus+input,select.stack:focus+textarea,select.stack:focus+select{border-top-color:#0074d9}.card,.modal .overlay ~ *{position:relative;box-shadow:0;border-radius:.2em;border:1px solid #aaa;overflow:hidden;text-align:left;background:#fff;margin-bottom:.6em;padding:0;transition:all .3s ease}.hidden.card,.modal .overlay ~ .hidden,:checked+.card,.modal .overlay ~ :checked+*,.modal .overlay:checked+*{font-size:0;padding:0;margin:0;border:0}.card>*,.modal .overlay ~ *>*{max-width:100%;display:block}.card>*:last-child,.modal .overlay ~ *>*:last-child{margin-bottom:0}.card header,.modal .overlay ~ * header,.card section,.modal .overlay ~ * section,.card>p,.modal .overlay ~ *>p{padding:.6em .8em}.card section,.modal .overlay ~ * section{padding:.6em .8em 0}.card hr,.modal .overlay ~ * hr{border:none;height:1px;background-color:#aaa}.card header,.modal .overlay ~ * header{font-weight:bold;position:relative;border-bottom:1px solid #aaa}.card header h1,.modal .overlay ~ * header h1,.card header h2,.modal .overlay ~ * header h2,.card header h3,.modal .overlay ~ * header h3,.card header h4,.modal .overlay ~ * header h4,.card header h5,.modal .overlay ~ * header h5,.card header h6,.modal .overlay ~ * header h6{padding:0;margin:0 2em 0 0;line-height:1;display:inline-block;vertical-align:text-bottom}.card header:last-child,.modal .overlay ~ * header:last-child{border-bottom:0}.card footer,.modal .overlay ~ * footer{padding:.8em}.card p,.modal .overlay ~ * p{margin:.3em 0}.card p:first-child,.modal .overlay ~ * p:first-child{margin-top:0}.card p:last-child,.modal .overlay ~ * p:last-child{margin-bottom:0}.card>p,.modal .overlay ~ *>p{margin:0;padding-right:2.5em}.card .close,.modal .overlay ~ * .close{position:absolute;top:.4em;right:.3em;font-size:1.2em;padding:0 .5em;cursor:pointer;width:auto}.card .close:hover,.modal .overlay ~ * .close:hover{color:#ff4136}.card h1+.close,.modal .overlay ~ * h1+.close{margin:.2em}.card h2+.close,.modal .overlay ~ * h2+.close{margin:.1em}.card .dangerous,.modal .overlay ~ * .dangerous{background:#ff4136;float:right}.modal{text-align:center}.modal>input{display:none}.modal>input ~ *{opacity:0;max-height:0;overflow:hidden}.modal .overlay{top:0;left:0;bottom:0;right:0;position:fixed;margin:0;border-radius:0;background:rgba(17,17,17,0.2);transition:all 0.3s;z-index:100000}.modal .overlay:before,.modal .overlay:after{display:none}.modal .overlay ~ *{border:0;position:fixed;top:50%;left:50%;transform:translateX(-50%) translateY(-50%) scale(0.2, 0.2);z-index:1000000;transition:all 0.3s}.modal>input:checked ~ *{display:block;opacity:1;max-height:10000px;transition:all 0.3s}.modal>input:checked ~ .overlay ~ *{max-height:90%;overflow:auto;-webkit-transform:translateX(-50%) translateY(-50%) scale(1, 1);transform:translateX(-50%) translateY(-50%) scale(1, 1)}@media (max-width: 60em){.modal .overlay ~ *{min-width:90%}}.dropimage{position:relative;display:block;padding:0;padding-bottom:56.25%;overflow:hidden;cursor:pointer;border:0;margin:.3em 0;border-radius:.2em;background-color:#ddd;background-size:cover;background-position:center center;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NDAiIGhlaWdodD0iNjQwIiB2ZXJzaW9uPSIxLjEiPjxnIHN0eWxlPSJmaWxsOiMzMzMiPjxwYXRoIGQ9Ik0gMTg3IDIzMCBDIDE3NSAyMzAgMTY1IDI0MCAxNjUgMjUyIEwgMTY1IDMwMCBMIDE2NSA0MDggQyAxNjUgNDIwIDE3NSA0MzAgMTg3IDQzMCBMIDQ2MyA0MzAgQyA0NzUgNDMwIDQ4NSA0MjAgNDg1IDQwOCBMIDQ4NSAzMDAgTCA0ODUgMjUyIEMgNDg1IDI0MCA0NzUgMjMwIDQ2MyAyMzAgTCAxODcgMjMwIHogTSAzNjAgMjU2IEEgNzAgNzIgMCAwIDEgNDMwIDMyOCBBIDcwIDcyIDAgMCAxIDM2MCA0MDAgQSA3MCA3MiAwIDAgMSAyOTAgMzI4IEEgNzAgNzIgMCAwIDEgMzYwIDI1NiB6Ii8+PGNpcmNsZSBjeD0iMzYwIiBjeT0iMzMwIiByPSI0MSIvPjxwYXRoIGQ9Im0yMDUgMjI1IDUtMTAgMjAgMCA1IDEwLTMwIDAiLz48cGF0aCBkPSJNMjg1IDIwMEwyNzAgMjI1IDM3NiAyMjUgMzYxIDIwMCAyODUgMjAwek0zMTAgMjA1TDMzNyAyMDUgMzM3IDIxOCAzMTAgMjE4IDMxMCAyMDV6Ii8+PHBhdGggZD0ibTQwNSAyMjUgNS0xMCAyMCAwIDUgMTAtMzAgMCIvPjwvZz48L3N2Zz4=)}.dropimage input{left:0;width:100%;height:100%;border:0;margin:0;padding:0;opacity:0;cursor:pointer;position:absolute}.tabs{position:relative;overflow:hidden}.tabs>label img{float:left;margin-left:.6em}.tabs>.row{width:calc(100% + 2 * .6em);display:table;table-layout:fixed;position:relative;padding-left:0;transition:all .3s;border-spacing:0;margin:0}.tabs>.row:before,.tabs>.row:after{display:none}.tabs>.row>*,.tabs>.row img{display:table-cell;vertical-align:top;margin:0;width:100%}.tabs>input{display:none}.tabs>input+*{width:100%}.tabs>input+label{width:auto}.two.tabs>.row{width:200%;left:-100%}.two.tabs>input:nth-of-type(1):checked ~ .row{margin-left:100%}.two.tabs>label img{width:48%;margin:4% 0 4% 4%}.three.tabs>.row{width:300%;left:-200%}.three.tabs>input:nth-of-type(1):checked ~ .row{margin-left:200%}.three.tabs>input:nth-of-type(2):checked ~ .row{margin-left:100%}.three.tabs>label img{width:30%;margin:5% 0 5% 5%}.four.tabs>.row{width:400%;left:-300%}.four.tabs>input:nth-of-type(1):checked ~ .row{margin-left:300%}.four.tabs>input:nth-of-type(2):checked ~ .row{margin-left:200%}.four.tabs>input:nth-of-type(3):checked ~ .row{margin-left:100%}.four.tabs>label img{width:22%;margin:4% 0 4% 4%}.tabs>label:first-of-type img{margin-left:0}[data-tooltip]{position:relative}[data-tooltip]:after,[data-tooltip]:before{position:absolute;z-index:10;opacity:0;border-width:0;height:0;padding:0;overflow:hidden;transition:opacity .6s ease, height 0s ease .6s;top:calc(100% - 6px);left:0;margin-top:12px}[data-tooltip]:after{margin-left:0;font-size:.8em;background:#111;content:attr(data-tooltip);white-space:nowrap}[data-tooltip]:before{content:'';width:0;height:0;border-width:0;border-style:solid;border-color:transparent transparent #111;margin-top:0;left:10px}[data-tooltip]:hover:after,[data-tooltip]:focus:after,[data-tooltip]:hover:before,[data-tooltip]:focus:before{opacity:1;border-width:6px;height:auto}[data-tooltip]:hover:after,[data-tooltip]:focus:after{padding:.45em .9em}.tooltip-top:after,.tooltip-top:before{top:auto;bottom:calc(100% - 6px);left:0;margin-bottom:12px}.tooltip-top:before{border-color:#111 transparent transparent;margin-bottom:0;left:10px}.tooltip-right:after,.tooltip-right:before{left:100%;margin-left:6px;margin-top:0;top:0}.tooltip-right:before{border-color:transparent #111 transparent transparent;margin-left:-6px;left:100%;top:7px}.tooltip-left:after,.tooltip-left:before{right:100%;margin-right:6px;left:auto;margin-top:0;top:0}.tooltip-left:before{border-color:transparent transparent transparent #111;margin-right:-6px;right:100%;top:7px}
diff --git a/favicon.png b/favicon.png
index 54ce11b..c06ff01 100644
Binary files a/favicon.png and b/favicon.png differ
diff --git a/images/logo-big.png b/images/logo-big.png
new file mode 100644
index 0000000..54ce11b
Binary files /dev/null and b/images/logo-big.png differ
diff --git a/images/logo.png b/images/logo.png
new file mode 100644
index 0000000..c06ff01
Binary files /dev/null and b/images/logo.png differ
diff --git a/index.html b/index.html
index e1e9de5..820de92 100644
--- a/index.html
+++ b/index.html
@@ -9,98 +9,220 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <title>У вас всегда есть выбор!</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
-	<link rel="stylesheet" href="css/base.css">
-        <link rel="stylesheet" href="css/menu.css">
-        <link rel="stylesheet" href="css/popup.css">
+	<link rel="stylesheet" href="css/picnic.min.css">
+	<style>
+	 aside a.top {
+         font-size: 0;
+         position: fixed;
+         bottom: 0;
+         font-weight: bold;
+         width: 180px;
+         padding: .6em 0;
+         margin-bottom: 0;
+         border-radius: .3em .3em 0 0;
+         transition: all .3s ease;
+         }
+         aside a.top.visible {
+         font-size: 1em;
+         }
+         aside .links a.button {
+         text-align: left;
+         }
+         @media all and (max-width: 1000px) {
+         aside a.pseudo.top {
+         background: rgba(255, 255, 255, .8);
+         width: 100%;
+         left: 0;
+         text-align: center;
+         z-index: 100;
+         }
+         }
+         .documentation article > h2 {
+         margin: -2em 0 .6em;
+         padding: 3em 0 0;
+         line-height: 1;
+         }
+         .documentation article > h3 {
+         margin-bottom: .6em;
+         }
+         .documentation aside h2 {
+         margin-top: 0;
+         padding: 1.25em 0;
+         line-height: 1;
+         }
+         .documentation aside a.pseudo {
+         color: #0074D9;
+         margin: 0;
+         }
+         .documentation > section {
+         background: #fff;
+         text-align: left;
+         width: 90%;
+         max-width: 960px;
+         margin: 0 auto;
+         padding: 80px 0 0;
+         }
+         .documentation article > h1 {
+         margin: 0;
+         padding: 0.6em 0;
+         font-size: 2em;
+         line-height: 1.5;
+         }
+         .documentation aside a.button {
+         display: block;
+         }
+         .documentation pre[class*="language-"] {
+         margin-top: 10px;
+         margin-bottom: 40px;
+         }
+         .documentation .index pre {
+         margin: 0;
+         font-size: .9em;
+         }
+      </style>
 	</head>
         <body>
-		<input type="checkbox" id="menu">
-		<label for="menu" onclick></label>
-		<nav role="off-canvas">
-			<ul>
-				<li><a href="index.html" class="active">Главная</a></li>
-				<li><a href="mail.html">Почта</a></li>
-				<li><a href="im.html">Мессенджеры</a></li>
-				<li><a href="social.html">Соцсети</a></li>
-				<li><a href="search.html">Поисковики</a></li>
-				<li><a href="extra.html">Документы и агитматериалы</a></li>
-				<li><a href="info.html">Подробнее</a></li>
-			</ul>
-		</nav>
-		<div class="textblock">
-			<h2>Где я? О чём речь?</h2>
+
+	<nav class="fedi">
+	  <a href="https://fedi.life" class="brand">
+	    <img class="logo" src="images/logo.png" />
+	    <span>Fedi.Life</span>
+	  </a>
+
+	  <!-- responsive-->
+	  <input id="bmenub" type="checkbox" class="show">
+	  <label for="bmenub" class="burger pseudo button">menu</label>
+
+	  <div class="menu">
+		<a href="mail.html" class="pseudo button">Почта</a>
+		<a href="im.html" class="pseudo button">Мессенджеры</a>
+		<a href="im.html" class="pseudo button">Соцсети</a>
+		<a href="search.html" class="pseudo button">Поисковики</a>
+		<a href="extra.html" class="pseudo button">Документы и агитматериалы</a>
+		<a href="info.html" class="pseudo button">Подробнее</a>
+	  </div>
+	</nav>
+
+	<main id="home" class="documentation">
+         <section class="flex">
+		 <article class="card four-fifth-1000">
+			<header>Где я? О чём речь?</header>
+			<img src="images/fedi-small.png" align="right">
 			<p>
-			<img src="images/fedi-small.png" align="right" style="margin: 0px 0px 0px 10px;">
 			Вы на странице русского ответвления Fediverse — глобальной сети взаимосвязанных соцсетей. Мы предлагаем свободные 
-			альтернативы популярным сервисам, сделанные людьми и для людей, а не корпорациями с целью извлечения прибыли. (Подробности - 
-			<a href="info.html">здесь</a>).
-			<br>
-			По сути, это —  <i>Сеть, как она была задумана.</i><br>
-			Огромное количество равноправных серверов, прозрачно взаимодействующих между собой. Пользователи и администраторы взаимодействуют 
+			альтернативы популярным сервисам, сделанные людьми и для людей, а не корпорациями с целью извлечения прибыли. (Подробности - <a href="info.html">здесь</a>).
+			По сути, это —  <i>Сеть, как она была задумана.</i> Огромное количество равноправных серверов, прозрачно взаимодействующих между собой. Пользователи и администраторы взаимодействуют 
 			на равных и обладают равными правами.
-			</div>
-		
-		<div class="textblock">
-			<h2>Зачем это мне?</h2>
+			</p>
+				
+		 </article>
+		 <article class="card four-fifth-1000">	
+			<header>Зачем это мне?</header>
 			<p>
-			<img src="images/q.png" align="right" style="margin: 0px 0px 0px 10px;">
+			<img src="images/q.png" align="right">
 			<i>Неподцензурность пользователя, никакой рекламы и слежки.</i><br>
 			Представьте, что у вас возник конфликт с администрацией вашей любимой сети, ваши сообщения удаляют, аккаунт блокируют.
 			И заново зайти в привычный уже Вконтакте/Facebook — в лучшем случае через долгое унижение в чате техподдержки, фотографии 
 			паспорта и прочую дурь. Хотелось бы вам в этом случае просто по щелчку мышки зайти в "другой" ВК/FB и продолжить общение 
 			с теми же друзьями, обсуждать те же темы, но уже в недосягаемости от обозлённой администрации? У нас так можно. И даже больше
 			— никто не мешает самому стать полновластным админом (при наличии минимальной технической подготовки).
-			</p>
-		</div>
+			
+		</article>
+
 		
-		<div class="textblock">
-			<h2>Чем вы лучше?</h2>
+		<article class="card four-fifth-1000">
+	
+			<header>Чем вы лучше?</header>
 			<p>
-			<img src="images/globe.png" align="right" style="margin: 0px 0px 0px 10px;">
-			Всего два слова — <i>абсолютная взаимосвязанность.</i> <br>
+			<img src="images/globe.png" align="right">
+			Всего два слова — <i>абсолютная взаимосвязанность.</i>
 	
 			У каждого есть свой предпочтительный формат общения — кто-то любит потоки молниеносных сообщений Твиттера, кто-то —
 			сложный формат взаимодействия ВК и Facebook, кто-то предпочитает видео или фото... Теперь представьте, что из Твиттера 
 			вы можете комментировать/лайкать/репостить посты YouTube, Instagram, ВК, а авторы, вещающие в удобном для них формате, 
 			оттуда вам отвечают, поддерживая полноценное общение, и никуда не надо перелогиниваться. Удобно? <i>У нас так можно.</i>
 			</p>
-		</div>
+		</article>
 		
 
-		<div class="textblock">
+		<article class="card four-fifth-1000">
 
-			<h2>Ну ладно. Что дальше?</h2>
-			<p>
-			<h3>Просто попробуйте свободную альтернативу:</h3>
-
-			<div class="imgblock">
-				<a href="images/mastodon2.png" >
-					<img src="images/mastodon2.png" width=45% style="float:left; margin:1%;" class="zoom"></a> 
+			<header>Ну ладно. Что дальше?</header>
+			<p>Просто попробуйте свободную альтернативу</p>
+			<p>Все неэтичные сервисы, работющие против вас, можно легко заменить на свободные аналоги, которые зачастую намного удобнее и функциональнее. Ознакомьтесь с примерами ниже.</p>
+		</article>
+			<article class="card four-fifth-1000">
+			<header>Twitter</header>
+				<center><label for="modal_masto"><img src="images/mastodon2.png" width="80%"></label> </center>
+				<div class="modal">
+				  <input id="modal_masto" type="checkbox" />
+				  <label for="modal_masto" class="overlay"></label>
+				  <article>
+				    <header>
+					<h3>Mastodon</h3>
+					<label for="modal_masto" class="close">&times;</label>
+				    </header>
+					<section class="content">
+					<img src="images/mastodon2.png" width="100%">
+					</section>
+				   </article>
+				</div>
+				<p>	
 				Замените Twitter на <a href="social.html#mastodon">Mastodon</a> — он намного удобней. (На данный момент 
 				— самая популярная из этичных социальных сетей с миллионами пользователей. Больше всего напоминает Твиттер, 
-				только с большим лимитом символов и более гибким интерфейсом).
-			</div>
-			
-			<div class="imgblock">
-				<a href="images/friendica.png" >
-					<img src="images/friendica.png" width=45% style= "float:left; margin:1%;" class="zoom"></a> 
+				только с большим лимитом символов и более гибким интерфейсом).</p>
+			</article>
+			<br>
+			<article class="card four-fifth-1000">
+			<header>Facebook/Вконтакте</header>
+				<center><label for="modal_fr"><img src="images/friendica.png" width="80%"></label> </center>
+				<div class="modal">
+				  <input id="modal_fr" type="checkbox" />
+				  <label for="modal_fr" class="overlay"></label>
+				  <article>
+				    <header>
+					<h3>Friendica</h3>
+					<label for="modal_fr" class="close">&times;</label>
+				    </header>
+					<section class="content">
+					<img src="images/friendica.png" width="100%">
+					</section>
+				   </article>
+				</div>
+				<p>
+
 				Замените Facebook/ВК на <a href="social.html#friendica">Friendica</a>. Также, как и Мастодон, 
 				Friendica создана из множества мелких сайтов, связанных воедино посредством федерации. Мелкие сайты, составляющие Френдику, называются "нодами".
-				Френдика также связана с Мастодоном, Диаспорой, PixelFed, PeerTube и всеми остальными альтернативными соцсетями, так что завести друзей в этих сетях не составит труда.
-			</div>
-			<div class="imgblock">
-				<a href="images/pixelfed.png" >
-					<img src="images/pixelfed.png" width=45% style="float:left; margin:1%;" class="zoom"></a> 
-				А вместо Instagram есть прекрасный <a href="social.html#pixelfed">PixelFed</a> — работает в любом браузере, между прочим.
-			</div>
-				<p>И ведь на безопасные для вас альтернативы можно заменить очень многое... Пройдитесь по разделам сайта — вы будете приятно удивлены.
-		</p>
-		</div>
-		</div>
-		<hr>
-		<a href="https://tolstoevsky.ml"><img src="banner.gif"</a>
-
-
+				Френдика также связана с Мастодоном, Диаспорой, PixelFed, PeerTube и всеми остальными альтернативными соцсетями, так что завести друзей в этих сетях не составит труда. </p>
+			</article>
+			<article class="card four-fifth-1000">
+			<header>Instagram</header>
+				<center><label for="modal_pf"><img src="images/pixelfed.png" width="80%"></label> </center>
+				<div class="modal">
+				  <input id="modal_pf" type="checkbox" />
+				  <label for="modal_pf" class="overlay"></label>
+				  <article>
+				    <header>
+					<h3>PixelFed</h3>
+					<label for="modal_pf" class="close">&times;</label>
+				    </header>
+					<section class="content">
+					<img src="images/pixelfed.png" width="100%">
+					</section>
+				   </article>
+				</div>
+				<p>А вместо Instagram есть прекрасный <a href="social.html#pixelfed">PixelFed</a> — работает в любом браузере, между прочим.</p>
+			</article>
+				<p>И ведь на безопасные для вас альтернативы можно заменить очень многое... Пройдитесь по разделам сайта — вы будете приятно удивлены.</p>
+		</article>
+	</section>
+</main>	
+	<section>
+	<hr>
+	<center>
+		<a href="https://tolstoevsky.ml"><img src="banner.gif"></a>&nbsp;|&nbsp;Created with <a href="https://picnicss.com/">PicniCSS</a>
+	</center>
+	</section>
 	</body>
 </html>
 
diff --git a/mail.html b/mail.html
index 36bf85d..7a0a356 100644
--- a/mail.html
+++ b/mail.html
@@ -10,36 +10,124 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <title>У вас всегда есть выбор! — Электронная почта</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="stylesheet" href="css/base.css">
-        <link rel="stylesheet" href="css/menu.css">
-        <link rel="stylesheet" href="css/btn.css">
         </head>
+        <link rel="stylesheet" href="css/picnic.min.css">
+	<style>aside a.top {
+         font-size: 0;
+         position: fixed;
+         bottom: 0;
+         font-weight: bold;
+         width: 180px;
+         padding: .6em 0;
+         margin-bottom: 0;
+         border-radius: .3em .3em 0 0;
+         transition: all .3s ease;
+         }
+         aside a.top.visible {
+         font-size: 1em;
+         }
+         aside .links a.button {
+         text-align: left;
+         }
+         @media all and (max-width: 1000px) {
+         aside a.pseudo.top {
+         background: rgba(255, 255, 255, .8);
+         width: 100%;
+         left: 0;
+         text-align: center;
+         z-index: 100;
+         }
+         }
+         .documentation article > h2 {
+         margin: -2em 0 .6em;
+         padding: 3em 0 0;
+         line-height: 1;
+         }
+         .documentation article > h3 {
+         margin-bottom: .6em;
+         }
+         .documentation aside h2 {
+         margin-top: 0;
+         padding: 1.25em 0;
+         line-height: 1;
+         }
+         .documentation aside a.pseudo {
+         color: #0074D9;
+         margin: 0;
+         }
+         .documentation > section {
+         background: #fff;
+         text-align: left;
+         width: 90%;
+         max-width: 960px;
+         margin: 0 auto;
+         padding: 80px 0 0;
+         }
+         .documentation article > h1 {
+         margin: 0;
+         padding: 0.6em 0;
+         font-size: 2em;
+         line-height: 1.5;
+         }
+         .documentation aside a.button {
+         display: block;
+         }
+         .documentation pre[class*="language-"] {
+         margin-top: 10px;
+         margin-bottom: 40px;
+         }
+         .documentation .index pre {
+         margin: 0;
+         font-size: .9em;
+         }
+      </style>
+
         <body>
-               <input type="checkbox" id="menu">
-               <label for="menu" onclick></label>
-               <nav role="off-canvas">
-                      <ul>
-                                <li><a href="index.html">Главная</a></li>
-                                <li><a href="mail.html" class="active">Почта</a></li>
-                                <li><a href="im.html">Мессенджеры</a></li>
-                                <li><a href="social.html">Соцсети</a></li>
-                                <li><a href="search.html">Поисковики</a></li>
-                                <li><a href="extra.html">Документы и агитматериалы</a></li>
-                                <li><a href="info.html">Подробнее</a></li>
-                        </ul>
-                </nav>
+        <nav class="fedi">
+          <a href="https://fedi.life" class="brand">
+            <img class="logo" src="images/logo.png" />
+            <span>Fedi.Life</span>
+          </a>
 
+          <!-- responsive-->
+          <input id="bmenub" type="checkbox" class="show">
+          <label for="bmenub" class="burger pseudo button">menu</label>
 
+          <div class="menu">
+                <a href="mail.html" class="pseudo button">Почта</a>
+                <a href="im.html" class="pseudo button">Мессенджеры</a>
+                <a href="im.html" class="pseudo button">Соцсети</a>
+                <a href="search.html" class="pseudo button">Поисковики</a>
+                <a href="extra.html" class="pseudo button">Документы и агитматериалы</a>
+                <a href="info.html" class="pseudo button">Подробнее</a>
+          </div>
+        </nav>
 
+        <main id="home" class="documentation">
+         <section class="flex">
 
-                <div class="textblock">
-			<h2>Электронная почта</h2>
+	<article class="four-fifth-1000">			
+	<header><h3>Электронная почта<h3></header>
+			
+			<p>Старейший инструмент сетевого общения, распределённый по своей природе. Но даже его затронула монополизация. Куда же деваться человеку, не желающему быть товаром и не готовому мириться с копающимися в его переписке маркетологами? Есть варианты.</p>
+	</article>
+	 <article class="card four-fifth-1000">
+	<header>MailFence</header>
+	  <center><label for="modal_mf"><img src="images/mailfence.png" width="80%"></label> </center>
+                                <div class="modal">
+                                  <input id="modal_mf" type="checkbox" />
+                                  <label for="modal_mf" class="overlay"></label>
+                                  <article>
+                                    <header>
+                                        <h3>MailFence</h3>
+                                        <label for="modal_mf" class="close">&times;</label>
+                                    </header>
+                                        <section class="content">
+                                        <img src="images/mailfence.png" width="100%">
+                                        </section>
+                                   </article>
+                                </div>
 			
-			<p>Старейший инструмент сетевого общения, распределённый по своей природе. Но даже его затронула монополизация. </p>
-			<div class="imgblock">
-				<a href="images/mailfence.png" >
-					<img src="images/mailfence.png" width=43% max-width=100% style="float:left; margin:1%" alt="MailFence" class="zoom"></a>
-				<h3>MailFence</h3>
 				<span>
                                        Бельгийский сервис электронной почты без рекламы и отслеживания. Поддерживает GPG-шифрование, не выдаёт данные пользователей
 				       третьим лицам. Базовая учётная запись бесплатна, но можно докупить себе больше места и расширенную техподдержку.<br>
@@ -47,14 +135,21 @@
 				       <a href="https://edri.org/">Европейского фонда цифровых прав</a><br>
 
 				</span>
-				<div class="textblock">
-					<h4>Где зарегистрироваться</h4>
-					<a class="Button" href="https://mailfence.com/ru/index.jsp#register">MailFence</a>
-					<h4>Приложения</h4>
-					<a class="Button" href="https://mailfence.com/ru/">MailFence Web</a>
-					<br>Для пользователей платных аккаунтов доступна работа с любого почтового клиента, включая встроенные.
+				<center>
+				<div class="tabs two">
+				  <input id='tab-1' type='radio' name='tabgroupB' checked />
+				  <label class="pseudo button toggle" for="tab-1">Где зарегистрироваться</label>
+				  <input id='tab-2' type='radio' name='tabgroupB'>
+				  <label class="pseudo button toggle" for="tab-2">Приложения</label>
+					
+					<div class="row">
+    					<div><center><button class="pseudo"><a href="https://mailfence.com/ru/index.jsp#register">MailFence</a></button></center></div>
+					<div><center><button class="pseudo"><a href="https://mailfence.com/ru/">MailFence Web</a></button><br> (Для пользователей платных аккаунтов доступна работа с любого почтового клиента, включая встроенные.)</center></div>
+					</div>
 				</div>
-			</div>
+				</center>
+
+	</article>
 			<div class="imgblock">
 				<a href="images/tutanota_w.png" >
 				<picture>