body { background-color: #0a0e27; color: #00ff88; margin: 0px; padding: 0px; font-family: 'Helvetica Neue', 'Roboto', 'Segoe UI', 'Helvetica', 'Open Sans', 'Tahoma', sans-serif; font-weight: 200; padding-bottom: 50px; }
body.page-landing { padding-bottom: 0px; }
body.page-landing .block, body.page-landing .foot-end { display: none }
body.page-landing .visit-top { display: block }
body.page-all .visit-top { display: block }
h1, h2, h3, h4, h5 { font-family: 'Helvetica Neue', 'Roboto', 'Segoe UI', 'Helvetica', 'Open Sans', 'Tahoma', sans-serif; font-weight: 200; font-size: 100px; margin: 20px; padding: 0px; }
h1 { padding-bottom: 30px; line-height: 100px; }
h2 { font-size: 35px; line-height: 47px; }
h3 { font-size: 43px; text-transform: uppercase; color: #00ff88; }
h4 { font-size: 24px; }
h5 { font-size: inherit; color: #ff00ff; margin: 0px; }

a { border-bottom: 1px solid #00ff88; transition: all 0.3s; text-decoration: none; color: #00ff88; }
a:hover { border-bottom: 2px solid #00ff88; transition: none; }
a:active { background-color: rgba(0, 255, 136, 0.1) }
a:focus { transition: all 0.3s }

.button { padding: 10px 20px; border: 2px solid #00ff88; border-radius: 0px; transition: all 0.3s; font-size: 130%; color: #00ff88; background-color: transparent; }
.button:hover { border: 2px solid #ff00ff; color: #ff00ff; transition: none; }
.button-container { display: inline-block; vertical-align: top; text-align: center; }

.block { padding: 20px; min-height: 350px; float: left; box-sizing: border-box; padding-bottom: 0px; transform: TranslateY(100px); opacity: 0; transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); }
.block-33 { width: 33% }
.block-34 { width: 34% }
.block-50 { width: 50% }
.block-67 { width: 67% }
.block-100 { width: 100%; -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1 }
.block ul { margin: 0px; margin-bottom: -20px; padding: 0px; padding-left: 30px; top: 50%; position: absolute; transform: translateY(-50%); -webkit-transform: translateY(-50%); }
.block li { font-size: 24px; margin-bottom: 25px; list-style-type: none; border-left: 3px solid #ff00ff; padding-left: 15px; padding-right: 20px; color: #00ff88; }
.block li:last-child { margin-bottom: 0px }
.block-detail .button { border-color: #00ff88; color: #00ff88; margin: 20px; margin-bottom: 10px; display: inline-block; }
.block-detail .button:hover { border-color: #ff00ff; color: #ff00ff; }
.block-anon .button { border-color: #00ff88; color: #00ff88; margin: 20px; margin-bottom: 10px; display: inline-block; }
.block-anon .button:hover { border-color: #ff00ff; color: #ff00ff; }

.arrow-left:before { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-right-color: #0a0e27; border-width: 16px; margin-top: 53px; margin-left: -52px; }
.arrow-right:before { border: solid transparent; content: " "; height: 0; width: 0; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-left-color: #0a0e27; border-width: 16px; float: right; left: 50px; position: relative; margin-top: 28px; }

.visit-top {
	transform: none; opacity: 1; min-height: 100vh;  color: white; text-transform: uppercase; padding-bottom: 20px;
	background: #310d90 url("../img/visit-bg.svg") no-repeat top right; display: none;
}
.visit-top h1 { padding-bottom: 0px; max-width: 900px; color: white; }
.visit-top h4 { font-size: 17px; margin-top: 20px; }
.visit-top h4 small { opacity: 0.5; }
.visit-top a { color: white; }
.visit-top .visit-local-install {
	background-color: #c6be7e7d; padding: 10px 10px; font-size: 75%; border-left: 5px solid #e4d50ddb;
	font-weight: bold; letter-spacing: 0.5px; opacity: 0; pointer-events: none; transition: all 0.3s; transform: translateY(-5px);
}
.visit-top .no-local .visit-local-install { opacity: 1; pointer-events: all; transform: translateY(0px); }
.visit-top .no-local .visit-link.local { opacity: 0.5; filter: grayscale(1); }
.visit-top .visit-link {
	display: block; box-sizing: border-box; padding: 20px; padding-left: 65px; padding-right: 40px;
    overflow: hidden; text-overflow: ellipsis; border: 0px; text-transform: none;
    background-color: white; color: #713fc8; position: relative; margin-bottom: 1px;
}
.visit-top .visit-link:active { transform: translateY(2px); }
.visit-top .visit-link span { transition: all 0.3s; border-bottom: 1px solid rgba(255, 255, 255, 0); }
.visit-top .visit-link:hover span { border-bottom-color: inherit; transition: none; }
.visit-top .visit-link:before {
	content: ""; display: block; width: 40px; height: 40px; position: absolute; border-radius: 30px; margin-left: -49px; margin-top: -9px;
    background: #ffe6bc url("../img/cloud.svg") no-repeat; background-size: 20px; background-position: 50% 50%;
    filter: hue-rotate(172deg);
}
.visit-top .visit-link:hover:after {
	padding-right: 18px;
}
.visit-top .visit-link:after {
	display: block; content: "›"; right: 0px; position: absolute; top: 0px;
    padding: 0px 20px; font-size: 42px; transition: all 0.3s;
}
.visit-top .visit-link.local:before {
    background: #fae3ff url("../img/logo.svg") no-repeat; background-size: 20px; background-position: 50% 50%; filter: none;
}
.visit-top .link-what-is { text-align: center; margin-top: 50px; }

.head-top { background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8)), url('../img/EpixBG.png') no-repeat center/cover; background-color: #0a0e27; color: #00ff88; text-align: center; padding: 70px 10px; min-height: 556px; border-bottom: 3px solid #ff00ff; }
.head-top h1 { font-family: 'Text Me One', sans-serif; display: inline-block; border: 3px solid #00ff88; height: 97px; padding: 10px; line-height: 100px; color: #00ff88; }
.head-top a { color: #00ff88; }
.head-top .download { margin-top: 44px; line-height: 44px; }
.head-top .download-windows, .head-top .download-mac, .head-top .download-oldmac, .head-top .download-linux, .head-top .download-android { display: none }
.platform-windows .head-top .download-windows { display: block }
.platform-mac .head-top .download-mac { display: block }
.platform-oldmac .head-top .download-oldmac { display: block }
.platform-linux .head-top .download-linux { display: block }
.platform-android .head-top .download-android { display: block }
.platform-windows .head-top .download-other, .platform-mac .head-top .download-other, .platform-oldmac .head-top .download-other, .platform-linux .head-top .download-other, .platform-android .head-top .download-other { display: none }

/*.block-p2p { background-color: #E6E9ED; color: #555; }*/
.block-p2p {
    background-color: #0f1a2e !important;
    background-image: url('../img/p2p-3.png') !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    color: #00ff88;
    border-left: 4px solid #ff00ff;
}
.block-p2p-detail { padding-top: 0px; position: relative }
.block-simple { background-color: #1a1a2e; color: #00ff88; border-left: 4px solid #00ff88; }
.block-epixns { background: #0f1a2e url('../img/blog.png') top left no-repeat; color: #00ff88; border-left: 4px solid #ff00ff; }
.block-epixns-detail h3 { color: #ff00ff; text-shadow: 0 0 10px #ff00ff; }
.block-password { background-color: #0f1a2e; color: #00ff88; background: #0f1a2e url('../img/password.png') bottom right no-repeat; border-left: 4px solid #00ff88; }
.block-fast { background-color: #0f1a2e; color: #00ff88; background: #0f1a2e url('../img/fast.png') bottom left no-repeat; border-left: 4px solid #ff00ff; }
.block-dynamic { background: #0f1a2e url('../img/epixtalk.png') 30% 0% no-repeat; color: #00ff88; border-left: 4px solid #00ff88; }
.block-dynamic-detail h3 { color: #00ff88; text-shadow: 0 0 10px #00ff88; }
.block-everywhere { background-color: #0f1a2e; color: #00ff88; background: #0f1a2e url('../img/browsers.png') bottom center no-repeat; border-left: 4px solid #ff00ff; }
.block-anon { background-color: #0f1a2e; color: #00ff88; background: #0f1a2e url('../img/anon.png') bottom right no-repeat; border-left: 4px solid #00ff88; }
.block-offline { background-color: #0f1a2e; color: #00ff88; background: #0f1a2e url('../img/offline.png') bottom left repeat-x; border-left: 4px solid #ff00ff; }
.block-opensource { min-height: 290px; text-align: center; background-color: #150a45!important; color: #00ff88; background: #0f1a2e url('../img/opensource.png') center left no-repeat; border-left: 4px solid #00ff88; }
.block-opensource h4 { padding-bottom: 20px }
.block-opensource .button { color: white }

.block-foot h2 span { display: inline-block; background-color: transparent; color: #ff00ff; padding: 6px 10px; margin: 1px; border: 2px solid #ff00ff; }
.block-foot, .block-follow { min-height: 240px; }
.block-follow { text-align: right; padding: 40px; padding-bottom: 0px }
.block-follow .icon { margin: 10px; fill: #00ff88; transition: all 0.3s; }
.block-follow .icon:hover { fill: #ff00ff; transition: none; }
.block-follow .icon:active { fill: #00ff88; transition: none; }

.foot-end { font-size: 15px; position: absolute; right: 10px; opacity: 0.7; height: 0px; margin-top: 10px; }
.foot-end a:hover { text-decoration: underline; }

.locale-fa .block { direction: rtl; }

/* Language menu */
.icon-lang { height: 16px; width: 16px; fill: #00ff88; vertical-align: middle; margin-right: 5px; }
#language_changer { position: fixed; left: 0px; top: 0px; z-index: 1000; }
#language { color: #00ff88; text-transform: uppercase; font-size: 11px; text-align: left; padding: 15px; background-color: rgba(15, 26, 46, 0.9); cursor: pointer; }
#language:hover { color: #ff00ff; }
#language_menu {
	visibility: hidden; opacity: 0; clear: both; text-align: left; background-color: #0f1a2e; border-radius: 0px; pointer-events: none; max-height: 0px;
	margin-top: 27px; transition: all 0.3s; margin-left: 0px; transform: translateY(-10px);
}
.opened #language_menu { visibility: visible; opacity: 1; pointer-events: all; transform: translateY(0); max-height: 1000px; }
#language_menu a { display: block; padding: 10px 20px; border: none; color: #00ff88; background-color: transparent; }
#language_menu a:hover { background-color: rgba(0, 255, 136, 0.1); color: #ff00ff; }

/* Lots of height space */
@media only screen and (min-height: 700px) {
	.visit-top h1 { margin-bottom: 100px; }
}

/* Medium screen */
@media only screen and (max-width: 1200px) {
	.block li { font-size: 20px }
	.block-foot, .block-follow { width: 100%; }
	.block-follow svg { height: 50px }
	.block-follow { min-height: 50px }
}

/* Small screen */
@media only screen and (max-width: 960px) {
	.visit-top h1 { font-size: 60px }
	.block li { font-size: 20px }
	.block-33, .block-34, .block-50, .block-67, .block-100 { width: 100%; }
	.arrow-right:before, .arrow-left:before { display: none; }
}

/* Mini screen */
@media only screen and (max-width: 470px) {
	.visit-top h1 { font-size: 29px; line-height: 50px; }
	.head-top h1 { font-size: 60px; height: 67px; line-height: 70px; width: 196px; }
	h2 { font-size: 20px; font-size: 16px; line-height: 30px; }
	h3 { font-size: 35px; }
	.block-password { background: #999; }
	.block-fast { background: #9B59B6 url('../img/fast.png') 10% -30% no-repeat; }
	.block-opensource .button { font-size: 13px; }
	.block-follow svg { width: 25px; height: 25px }
	.block-follow { min-height: 25px }
	.download-android .button-outline { font-size: 15px }
}