Pouze tento týden sleva až 80 % na e-learning týkající se Javy. A zároveň využij akce až 30 % zdarma při nákupu e-learningu - Více informací.
Hledáme koordinátorku kurzů a programátora, 100% home office, 100% flexibilní. Prozkoumej aktuální pozice
discount week 30 - hiring
Avatar
tbartolen
Člen
Avatar
tbartolen:17.7.2015 19:43

Ahoj, upravuju si jednu staženou šablonu, a jelikož nejsem zase tak dobrej v HTML a CSS , potřeboval bych poradit. Jde mi o to, že chci hlavní nadpis hodit spolu s logem (ktere tam jeste neni) doprostřed, a pod to udělat klasické menu s několika položkama, a to vyjížděcí na straně zrušit uplně. To by asi pro začatek stačilo, mam s tim pak jeste další plany, ale první musím udělat tohle...Přiložim CSS a HTML indexu. Osobně bych to řešil asi tak, že bych smazal uplně navigaci která tam je, a napsal novou, ale nejsem si jistý, jestli tom že to smažu, něco nepodělam (Hlavně responzivitu)

/---code html

<!DOCTYPE HTML>
<!--
Retrospect by TEMPLATED
templated.co @templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/li­cense)
-->
<html>
<head>
<title>Retrospect by TEMPLATED</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=de­vice-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/i­e/html5shiv.js"></scrip­t><![endif]-->
<link rel="stylesheet" href="assets/css/ma­in.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/i­e8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/i­e9.css" /><![endif]-->
</head>
<body class="landing">

<!-- Header -->
<header id="header" class="alt">
<h1><a href="index.html">Staň se Keltem</a></h1>
<a href="#nav">M­enu</a>
</header>

<!-- Nav -->
<nav id="nav">
<ul class="links">
<li><a href="index.html">Ho­me</a></li>
<li><a href="generic­.html">Generic</a></li>
<li><a href="elements­.html">Elemen­ts</a></li>
</ul>
</nav>

<!-- Banner
<section id="banner">

<h2>Staň se Keltem</h2>
<p>Přijď i ty mezi nás!</p>
<ul class="actions">
<li><a href="#" class="button big special">Learn More</a></li>
</ul>
</section>-->

<!-- One -->
<section id="one" class="wrapper style1">
<div class="inner">
<article class="feature left">
<span class="image"><img src="images/kel­ti.jpg" alt="" /></span>
<div class="content">
<h2>Kdo jsme?</h2>
<p>Hokejbalový klub SK Kelti 2008 (bývalý SK Kelti Nižbor) je jediným zástupcem berounského okresu ve svazových soutěžích Českomoravského svazu hokejbalu.</p>
<ul class="actions">
<li>
<a href="http://­skkelti.cz/kon­takt/" class="button alt">Další informace</a>
</li>
</ul>
</div>
</article>
<article class="feature right">
<span class="image"><img src="images/kel­tihriste.jpg" alt="" /></span>
<div class="content">
<h2>Kde nás najdete?</h2>
<p>Adresa hřiště, kterou neznám</p>
<ul class="actions">
<!--<li>
<a href="#" class="button alt">More</a>
</li>-->
</ul>
</div>
</article>
</div>
</section>

<!-- Two -->
<section id="two" class="wrapper special">
<div class="inner">
<header class="major narrow">
<h2>Věkové kategorie</h2>
<p>Mikropřípravka, Mini přípravka, Přípravka, Mladší žáci, Starší žáci, Mladší Dorost, Starší dorost</p>
</header>
<div class="image-grid">

<a href="#" class="image"><img src="images/mi­nipripravka.jpg" alt="" /></a>
<a href="#" class="image"><img src="images/pri­pravka.jpg" alt="" /></a>
<a href="#" class="image"><img src="images/mlad­sizaci.jpg" alt="" /></a>
<a href="#" class="image"><img src="images/star­sizaci.jpg" alt="" /></a>
<a href="#" class="image"><img src="images/mlad­sidorost.jpg" alt="" /></a>

</div>
<ul class="actions">
<li><a href="#" class="button big alt">Tempus Aliquam</a></li>
</ul>
</div>
</section>

<!-- Three -->
<section id="three" class="wrapper style3 special">
<div class="inner">
<header class="major narrow ">
<h2>Magna sed consequat tempus</h2>
<p>Ipsum dolor tempus commodo turpis adipiscing Tempor placerat sed amet accumsan</p>
</header>
<ul class="actions">
<li><a href="#" class="button big alt">Magna feugiat</a></li>
</ul>
</div>
</section>

<!-- Four -->
<section id="four" class="wrapper style2 special">
<div class="inner">
<header class="major narrow">
<h2>Get in touch</h2>
<p>Ipsum dolor tempus commodo adipiscing</p>
</header>
<form action="#" method="POST">
<div class="container 75%">
<div class="row uniform 50%">
<div class="6u 12u$(xsmall)">
<input name="name" placeholder="Name" type="text" />
</div>
<div class="6u$ 12u$(xsmall)">
<input name="email" placeholder="Email" type="email" />
</div>
<div class="12u$">
<textarea name="message" placeholder="Mes­sage" rows="4"></tex­tarea>
</div>
</div>
</div>
<ul class="actions">
<li><input type="submit" class="special" value="Submit" /></li>
<li><input type="reset" class="alt" value="Reset" /></li>
</ul>
</form>
</div>
</section>

<!-- Footer -->
<footer id="footer">
<div class="inner">
<ul class="icons">
<li><a href="#" class="icon fa-facebook">
<span class="label">Fa­cebook</span>
</a></li>
<li><a href="#" class="icon fa-twitter">
<span class="label">Twit­ter</span>
</a></li>
<li><a href="#" class="icon fa-instagram">
<span class="label">In­stagram</span>
</a></li>
<li><a href="#" class="icon fa-linkedin">
<span class="label">Lin­kedIn</span>
</a></li>
</ul>
<ul class="copyright">
<li>© Untitled.</li>
<li>Images: <a href="http://­unsplash.com">Un­splash</a>.</li>
<li>Design: <a href="http://­templated.co">TEM­PLATED</a>.</li>
</ul>
</div>
</footer>

<!-- Scripts -->
<script src="assets/js/jqu­ery.min.js"></scrip­t>
<script src="assets/js/skel­.min.js"></scrip­t>
<script src="assets/js/u­til.js"></scrip­t>
<!--[if lte IE 8]><script src="assets/js/i­e/respond.min­.js"></script><![en­dif]-->
<script src="assets/js/ma­in.js"></scrip­t>

</body>
</html>

\--

A tady je CSS

/---code html

@charset "UTF-8";
@import url(font-awesome.min.css);
@import url("https://f­onts.googleapis­.com/css?fami­ly=Raleway:400,500,70­0");

/*
Retrospect by TEMPLATED
templated.co @templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/li­cense)
*/

/* Reset */

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;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

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: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

body {
-webkit-text-size-adjust: none;
}

/* Box Model */

*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

/* Containers */

.container {
margin-left: auto;
margin-right: auto;
}

.container.\31 25\25 {
width: 100%;
max-width: 100em;
min-width: 80em;
}

.container.\37 5\25 {
width: 60em;
}

.container.\35 0\25 {
width: 40em;
}

.container.\32 5\25 {
width: 20em;
}

.container {
width: 80em;
}

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

.container.\31 25\25 {
width: 100%;
max-width: 100em;
min-width: 80em;
}

.container.\37 5\25 {
width: 60em;
}

.container.\35 0\25 {
width: 40em;
}

.container.\32 5\25 {
width: 20em;
}

.container {
width: 80em;
}

}

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

.container.\31 25\25 {
width: 100%;
max-width: 81.25em;
min-width: 65em;
}

.container.\37 5\25 {
width: 48.75em;
}

.container.\35 0\25 {
width: 32.5em;
}

.container.\32 5\25 {
width: 16.25em;
}

.container {
width: 65em;
}

}

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

.container.\31 25\25 {
width: 100%;
max-width: 112.5%;
min-width: 90%;
}

.container.\37 5\25 {
width: 67.5%;
}

.container.\35 0\25 {
width: 45%;
}

.container.\32 5\25 {
width: 22.5%;
}

.container {
width: 90% !important;
}

}

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

.container.\31 25\25 {
width: 100%;
max-width: 112.5%;
min-width: 90%;
}

.container.\37 5\25 {
width: 67.5%;
}

.container.\35 0\25 {
width: 45%;
}

.container.\32 5\25 {
width: 22.5%;
}

.container {
width: 90% !important;
}

}

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

.container.\31 25\25 {
width: 100%;
max-width: 112.5%;
min-width: 90%;
}

.container.\37 5\25 {
width: 67.5%;
}

.container.\35 0\25 {
width: 45%;
}

.container.\32 5\25 {
width: 22.5%;
}

.container {
width: 90% !important;
}

}

/* Grid */

.row {
border-bottom: solid 1px transparent;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.row > * {
float: left;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.row:after, .row:before {
content: '';
display: block;
clear: both;
height: 0;
}

.row.uniform > * > :first-child {
margin-top: 0;
}

.row.uniform > * > :last-child {
margin-bottom: 0;
}

.row.\30 \25 > * {
padding: 0 0 0 0em;
}

.row.\30 \25 {
margin: 0 0 -1px 0em;
}

.row.uniform.\30 \25 > * {
padding: 0em 0 0 0em;
}

.row.uniform.\30 \25 {
margin: 0em 0 -1px 0em;
}

.row > * {
padding: 0 0 0 2em;
}

.row {
margin: 0 0 -1px -2em;
}

.row.uniform > * {
padding: 2em 0 0 2em;
}

.row.uniform {
margin: -2em 0 -1px -2em;
}

.row.\32 00\25 > * {
padding: 0 0 0 4em;
}

.row.\32 00\25 {
margin: 0 0 -1px -4em;
}

.row.uniform.\32 00\25 > * {
padding: 4em 0 0 4em;
}

.row.uniform.\32 00\25 {
margin: -4em 0 -1px -4em;
}

.row.\31 50\25 > * {
padding: 0 0 0 3em;
}

.row.\31 50\25 {
margin: 0 0 -1px -3em;
}

.row.uniform.\31 50\25 > * {
padding: 3em 0 0 3em;
}

.row.uniform.\31 50\25 {
margin: -3em 0 -1px -3em;
}

.row.\35 0\25 > * {
padding: 0 0 0 1em;
}

.row.\35 0\25 {
margin: 0 0 -1px -1em;
}

.row.uniform.\35 0\25 > * {
padding: 1em 0 0 1em;
}

.row.uniform.\35 0\25 {
margin: -1em 0 -1px -1em;
}

.row.\32 5\25 > * {
padding: 0 0 0 0.5em;
}

.row.\32 5\25 {
margin: 0 0 -1px -0.5em;
}

.row.uniform.\32 5\25 > * {
padding: 0.5em 0 0 0.5em;
}

.row.uniform.\32 5\25 {
margin: -0.5em 0 -1px -0.5em;
}

.\31 2u, .\31 2u\24 {
width: 100%;
clear: none;
margin-left: 0;
}

.\31 1u, .\31 1u\24 {
width: 91.6666666667%;
clear: none;
margin-left: 0;
}

.\31 0u, .\31 0u\24 {
width: 83.3333333333%;
clear: none;
margin-left: 0;
}

.\39 u, .\39 u\24 {
width: 75%;
clear: none;
margin-left: 0;
}

.\38 u, .\38 u\24 {
width: 66.6666666667%;
clear: none;
margin-left: 0;
}

.\37 u, .\37 u\24 {
width: 58.3333333333%;
clear: none;
margin-left: 0;
}

.\36 u, .\36 u\24 {
width: 50%;
clear: none;
margin-left: 0;
}

.\35 u, .\35 u\24 {
width: 41.6666666667%;
clear: none;
margin-left: 0;
}

.\34 u, .\34 u\24 {
width: 33.3333333333%;
clear: none;
margin-left: 0;
}

.\33 u, .\33 u\24 {
width: 25%;
clear: none;
margin-left: 0;
}

.\32 u, .\32 u\24 {
width: 16.6666666667%;
clear: none;
margin-left: 0;
}

.\31 u, .\31 u\24 {
width: 8.3333333333%;
clear: none;
margin-left: 0;
}

.\31 2u\24 + *,
.\31 1u\24 + *,
.\31 0u\24 + *,
.\39 u\24 + *,
.\38 u\24 + *,
.\37 u\24 + *,
.\36 u\24 + *,
.\35 u\24 + *,
.\34 u\24 + *,
.\33 u\24 + *,
.\32 u\24 + *,
.\31 u\24 + * {
clear: left;
}

.\-11u {
margin-left: 91.66667%;
}

.\-10u {
margin-left: 83.33333%;
}

.\-9u {
margin-left: 75%;
}

.\-8u {
margin-left: 66.66667%;
}

.\-7u {
margin-left: 58.33333%;
}

.\-6u {
margin-left: 50%;
}

.\-5u {
margin-left: 41.66667%;
}

.\-4u {
margin-left: 33.33333%;
}

.\-3u {
margin-left: 25%;
}

.\-2u {
margin-left: 16.66667%;
}

.\-1u {
margin-left: 8.33333%;
}

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

.row > * {
padding: 0 0 0 2em;
}

.row {
margin: 0 0 -1px -2em;
}

.row.uniform > * {
padding: 2em 0 0 2em;
}

.row.uniform {
margin: -2em 0 -1px -2em;
}

.row.\32 00\25 > * {
padding: 0 0 0 4em;
}

.row.\32 00\25 {
margin: 0 0 -1px -4em;
}

.row.uniform.\32 00\25 > * {
padding: 4em 0 0 4em;
}

.row.uniform.\32 00\25 {
margin: -4em 0 -1px -4em;
}

.row.\31 50\25 > * {
padding: 0 0 0 3em;
}

.row.\31 50\25 {
margin: 0 0 -1px -3em;
}

.row.uniform.\31 50\25 > * {
padding: 3em 0 0 3em;
}

.row.uniform.\31 50\25 {
margin: -3em 0 -1px -3em;
}

.row.\35 0\25 > * {
padding: 0 0 0 1em;
}

.row.\35 0\25 {
margin: 0 0 -1px -1em;
}

.row.uniform.\35 0\25 > * {
padding: 1em 0 0 1em;
}

.row.uniform.\35 0\25 {
margin: -1em 0 -1px -1em;
}

.row.\32 5\25 > * {
padding: 0 0 0 0.5em;
}

.row.\32 5\25 {
margin: 0 0 -1px -0.5em;
}

.row.uniform.\32 5\25 > * {
padding: 0.5em 0 0 0.5em;
}

.row.uniform.\32 5\25 {
margin: -0.5em 0 -1px -0.5em;
}

.\31 2u\28xlarge\29, .\31 2u\24\28xlarge\29 {
width: 100%;
clear: none;
margin-left: 0;
}

.\31 1u\28xlarge\29, .\31 1u\24\28xlarge\29 {
width: 91.6666666667%;
clear: none;
margin-left: 0;
}

.\31 0u\28xlarge\29, .\31 0u\24\28xlarge\29 {
width: 83.3333333333%;
clear: none;
margin-left: 0;
}

.\39 u\28xlarge\29, .\39 u\24\28xlarge\29 {
width: 75%;
clear: none;
margin-left: 0;
}

.\38 u\28xlarge\29, .\38 u\24\28xlarge\29 {
width: 66.6666666667%;
clear: none;
margin-left: 0;
}

.\37 u\28xlarge\29, .\37 u\24\28xlarge\29 {
width: 58.3333333333%;
clear: none;
margin-left: 0;
}

.\36 u\28xlarge\29, .\36 u\24\28xlarge\29 {
width: 50%;
clear: none;
margin-left: 0;
}

.\35 u\28xlarge\29, .\35 u\24\28xlarge\29 {
width: 41.6666666667%;
clear: none;
margin-left: 0;
}

.\34 u\28xlarge\29, .\34 u\24\28xlarge\29 {
width: 33.3333333333%;
clear: none;
margin-left: 0;
}

.\33 u\28xlarge\29, .\33 u\24\28xlarge\29 {
width: 25%;
clear: none;
margin-left: 0;
}

.\32 u\28xlarge\29, .\32 u\24\28xlarge\29 {
width: 16.6666666667%;
clear: none;
margin-left: 0;
}

.\31 u\28xlarge\29, .\31 u\24\28xlarge\29 {
width: 8.3333333333%;
clear: none;
margin-left: 0;
}

.\31 2u\24\28xlarge\29 + *,
.\31 1u\24\28xlarge\29 + *,
.\31 0u\24\28xlarge\29 + *,
.\39 u\24\28xlarge\29 + *,
.\38 u\24\28xlarge\29 + *,
.\37 u\24\28xlarge\29 + *,
.\36 u\24\28xlarge\29 + *,
.\35 u\24\28xlarge\29 + *,
.\34 u\24\28xlarge\29 + *,
.\33 u\24\28xlarge\29 + *,
.\32 u\24\28xlarge\29 + *,
.\31 u\24\28xlarge\29 + * {
clear: left;
}

.\-11u\28xlarge\29 {
margin-left: 91.66667%;
}

.\-10u\28xlarge\29 {
margin-left: 83.33333%;
}

.\-9u\28xlarge\29 {
margin-left: 75%;
}

.\-8u\28xlarge\29 {
margin-left: 66.66667%;
}

.\-7u\28xlarge\29 {
margin-left: 58.33333%;
}

.\-6u\28xlarge\29 {
margin-left: 50%;
}

.\-5u\28xlarge\29 {
margin-left: 41.66667%;
}

.\-4u\28xlarge\29 {
margin-left: 33.33333%;
}

.\-3u\28xlarge\29 {
margin-left: 25%;
}

.\-2u\28xlarge\29 {
margin-left: 16.66667%;
}

.\-1u\28xlarge\29 {
margin-left: 8.33333%;
}

}

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

.row > * {
padding: 0 0 0 1.5em;
}

.row {
margin: 0 0 -1px -1.5em;
}

.row.uniform > * {
padding: 1.5em 0 0 1.5em;
}

.row.uniform {
margin: -1.5em 0 -1px -1.5em;
}

.row.\32 00\25 > * {
padding: 0 0 0 3em;
}

.row.\32 00\25 {
margin: 0 0 -1px -3em;
}

.row.uniform.\32 00\25 > * {
padding: 3em 0 0 3em;
}

.row.uniform.\32 00\25 {
margin: -3em 0 -1px -3em;
}

.row.\31 50\25 > * {
padding: 0 0 0 2.25em;
}

.row.\31 50\25 {
margin: 0 0 -1px -2.25em;
}

.row.uniform.\31 50\25 > * {
padding: 2.25em 0 0 2.25em;
}

.row.uniform.\31 50\25 {
margin: -2.25em 0 -1px -2.25em;
}

.row.\35 0\25 > * {
padding: 0 0 0 0.75em;
}

.row.\35 0\25 {
margin: 0 0 -1px -0.75em;
}

.row.uniform.\35 0\25 > * {
padding: 0.75em 0 0 0.75em;
}

.row.uniform.\35 0\25 {
margin: -0.75em 0 -1px -0.75em;
}

.row.\32 5\25 > * {
padding: 0 0 0 0.375em;
}

.row.\32 5\25 {
margin: 0 0 -1px -0.375em;
}

.row.uniform.\32 5\25 > * {
padding: 0.375em 0 0 0.375em;
}

.row.uniform.\32 5\25 {
margin: -0.375em 0 -1px -0.375em;
}

.\31 2u\28large\29, .\31 2u\24\28large\29 {
width: 100%;
clear: none;
margin-left: 0;
}

.\31 1u\28large\29, .\31 1u\24\28large\29 {
width: 91.6666666667%;
clear: none;
margin-left: 0;
}

.\31 0u\28large\29, .\31 0u\24\28large\29 {
width: 83.3333333333%;
clear: none;
margin-left: 0;
}

.\39 u\28large\29, .\39 u\24\28large\29 {
width: 75%;
clear: none;
margin-left: 0;
}

.\38 u\28large\29, .\38 u\24\28large\29 {
width: 66.6666666667%;
clear: none;
margin-left: 0;
}

.\37 u\28large\29, .\37 u\24\28large\29 {
width: 58.3333333333%;
clear: none;
margin-left: 0;
}

.\36 u\28large\29, .\36 u\24\28large\29 {
width: 50%;
clear: none;
margin-left: 0;
}

.\35 u\28large\29, .\35 u\24\28large\29 {
width: 41.6666666667%;
clear: none;
margin-left: 0;
}

.\34 u\28large\29, .\34 u\24\28large\29 {
width: 33.3333333333%;
clear: none;
margin-left: 0;
}

.\33 u\28large\29, .\33 u\24\28large\29 {
width: 25%;
clear: none;
margin-left: 0;
}

.\32 u\28large\29, .\32 u\24\28large\29 {
width: 16.6666666667%;
clear: none;
margin-left: 0;
}

.\31 u\28large\29, .\31 u\24\28large\29 {
width: 8.3333333333%;
clear: none;
margin-left: 0;
}

.\31 2u\24\28large\29 + *,
.\31 1u\24\28large\29 + *,
.\31 0u\24\28large\29 + *,
.\39 u\24\28large\29 + *,
.\38 u\24\28large\29 + *,
.\37 u\24\28large\29 + *,
.\36 u\24\28large\29 + *,
.\35 u\24\28large\29 + *,
.\34 u\24\28large\29 + *,
.\33 u\24\28large\29 + *,
.\32 u\24\28large\29 + *,
.\31 u\24\28large\29 + * {
clear: left;
}

.\-11u\28large\29 {
margin-left: 91.66667%;
}

.\-10u\28large\29 {
margin-left: 83.33333%;
}

.\-9u\28large\29 {
margin-left: 75%;
}

.\-8u\28large\29 {
margin-left: 66.66667%;
}

.\-7u\28large\29 {
margin-left: 58.33333%;
}

.\-6u\28large\29 {
margin-left: 50%;
}

.\-5u\28large\29 {
margin-left: 41.66667%;
}

.\-4u\28large\29 {
margin-left: 33.33333%;
}

.\-3u\28large\29 {
margin-left: 25%;
}

.\-2u\28large\29 {
margin-left: 16.66667%;
}

.\-1u\28large\29 {
margin-left: 8.33333%;
}

}

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

.row > * {
padding: 0 0 0 1.5em;
}

.row {
margin: 0 0 -1px -1.5em;
}

.row.uniform > * {
padding: 1.5em 0 0 1.5em;
}

.row.uniform {
margin: -1.5em 0 -1px -1.5em;
}

.row.\32 00\25 > * {
padding: 0 0 0 3em;
}

.row.\32 00\25 {
margin: 0 0 -1px -3em;
}

.row.uniform.\32 00\25 > * {
padding: 3em 0 0 3em;
}

.row.uniform.\32 00\25 {
margin: -3em 0 -1px -3em;
}

.row.\31 50\25 > * {
padding: 0 0 0 2.25em;
}

.row.\31 50\25 {
margin: 0 0 -1px -2.25em;
}

.row.uniform.\31 50\25 > * {
padding: 2.25em 0 0 2.25em;
}

.row.uniform.\31 50\25 {
margin: -2.25em 0 -1px -2.25em;
}

.row.\35 0\25 > * {
padding: 0 0 0 0.75em;
}

.row.\35 0\25 {
margin: 0 0 -1px -0.75em;
}

.row.uniform.\35 0\25 > * {
padding: 0.75em 0 0 0.75em;
}

.row.uniform.\35 0\25 {
margin: -0.75em 0 -1px -0.75em;
}

.row.\32 5\25 > * {
padding: 0 0 0 0.375em;
}

.row.\32 5\25 {
margin: 0 0 -1px -0.375em;
}

.row.uniform.\32 5\25 > * {
padding: 0.375em 0 0 0.375em;
}

.row.uniform.\32 5\25 {
margin: -0.375em 0 -1px -0.375em;
}

.\31 2u\28medium\29, .\31 2u\24\28medium\29 {
width: 100%;
clear: none;
margin-left: 0;
}

.\31 1u\28medium\29, .\31 1u\24\28medium\29 {
width: 91.6666666667%;
clear: none;
margin-left: 0;
}

.\31 0u\28medium\29, .\31 0u\24\28medium\29 {
width: 83.3333333333%;
clear: none;
margin-left: 0;
}

.\39 u\28medium\29, .\39 u\24\28medium\29 {
width: 75%;
clear: none;
margin-left: 0;
}

.\38 u\28medium\29, .\38 u\24\28medium\29 {
width: 66.6666666667%;
clear: none;
margin-left: 0;
}

.\37 u\28medium\29, .\37 u\24\28medium\29 {
width: 58.3333333333%;
clear: none;
margin-left: 0;
}

.\36 u\28medium\29, .\36 u\24\28medium\29 {
width: 50%;
clear: none;
margin-left: 0;
}

.\35 u\28medium\29, .\35 u\24\28medium\29 {
width: 41.6666666667%;
clear: none;
margin-left: 0;
}

.\34 u\28medium\29, .\34 u\24\28medium\29 {
width: 33.3333333333%;
clear: none;
margin-left: 0;
}

.\33 u\28medium\29, .\33 u\24\28medium\29 {
width: 25%;
clear: none;
margin-left: 0;
}

.\32 u\28medium\29, .\32 u\24\28medium\29 {
width: 16.6666666667%;
clear: none;
margin-left: 0;
}

.\31 u\28medium\29, .\31 u\24\28medium\29 {
width: 8.3333333333%;
clear: none;
margin-left: 0;
}

.\31 2u\24\28medium\29 + *,
.\31 1u\24\28medium\29 + *,
.\31 0u\24\28medium\29 + *,
.\39 u\24\28medium\29 + *,
.\38 u\24\28medium\29 + *,
.\37 u\24\28medium\29 + *,
.\36 u\24\28medium\29 + *,
.\35 u\24\28medium\29 + *,
.\34 u\24\28medium\29 + *,
.\33 u\24\28medium\29 + *,
.\32 u\24\28medium\29 + *,
.\31 u\24\28medium\29 + * {
clear: left;
}

.\-11u\28medium\29 {
margin-left: 91.66667%;
}

.\-10u\28medium\29 {
margin-left: 83.33333%;
}

.\-9u\28medium\29 {
margin-left: 75%;
}

.\-8u\28medium\29 {
margin-left: 66.66667%;
}

.\-7u\28medium\29 {
margin-left: 58.33333%;
}

.\-6u\28medium\29 {
margin-left: 50%;
}

.\-5u\28medium\29 {
margin-left: 41.66667%;
}

.\-4u\28medium\29 {
margin-left: 33.33333%;
}

.\-3u\28medium\29 {
margin-left: 25%;
}

.\-2u\28medium\29 {
margin-left: 16.66667%;
}

.\-1u\28medium\29 {
margin-left: 8.33333%;
}

}

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

.row > * {
padding: 0 0 0 1.25em;
}

.row {
margin: 0 0 -1px -1.25em;
}

.row.uniform > * {
padding: 1.25em 0 0 1.25em;
}

.row.uniform {
margin: -1.25em 0 -1px -1.25em;
}

.row.\32 00\25 > * {
padding: 0 0 0 2.5em;
}

.row.\32 00\25 {
margin: 0 0 -1px -2.5em;
}

.row.uniform.\32 00\25 > * {
padding: 2.5em 0 0 2.5em;
}

.row.uniform.\32 00\25 {
margin: -2.5em 0 -1px -2.5em;
}

.row.\31 50\25 > * {
padding: 0 0 0 1.875em;
}

.row.\31 50\25 {
margin: 0 0 -1px -1.875em;
}

.row.uniform.\31 50\25 > * {
padding: 1.875em 0 0 1.875em;
}

.row.uniform.\31 50\25 {
margin: -1.875em 0 -1px -1.875em;
}

.row.\35 0\25 > * {
padding: 0 0 0 0.625em;
}

.row.\35 0\25 {
margin: 0 0 -1px -0.625em;
}

.row.uniform.\35 0\25 > * {
padding: 0.625em 0 0 0.625em;
}

.row.uniform.\35 0\25 {
margin: -0.625em 0 -1px -0.625em;
}

.row.\32 5\25 > * {
padding: 0 0 0 0.3125em;
}

.row.\32 5\25 {
margin: 0 0 -1px -0.3125em;
}

.row.uniform.\32 5\25 > * {
padding: 0.3125em 0 0 0.3125em;
}

.row.uniform.\32 5\25 {
margin: -0.3125em 0 -1px -0.3125em;
}

.\31 2u\28small\29, .\31 2u\24\28small\29 {
width: 100%;
clear: none;
margin-left: 0;
}

.\31 1u\28small\29, .\31 1u\24\28small\29 {
width: 91.6666666667%;
clear: none;
margin-left: 0;
}

.\31 0u\28small\29, .\31 0u\24\28small\29 {
width: 83.3333333333%;
clear: none;
margin-left: 0;
}

.\39 u\28small\29, .\39 u\24\28small\29 {
width: 75%;
clear: none;
margin-left: 0;
}

.\38 u\28small\29, .\38 u\24\28small\29 {
width: 66.6666666667%;
clear: none;
margin-left: 0;
}

.\37 u\28small\29, .\37 u\24\28small\29 {
width: 58.3333333333%;
clear: none;
margin-left: 0;
}

.\36 u\28small\29, .\36 u\24\28small\29 {
width: 50%;
clear: none;
margin-left: 0;
}

.\35 u\28small\29, .\35 u\24\28small\29 {
width: 41.6666666667%;
clear: none;
margin-left: 0;
}

.\34 u\28small\29, .\34 u\24\28small\29 {
width: 33.3333333333%;
clear: none;
margin-left: 0;
}

.\33 u\28small\29, .\33 u\24\28small\29 {
width: 25%;
clear: none;
margin-left: 0;
}

.\32 u\28small\29, .\32 u\24\28small\29 {
width: 16.6666666667%;
clear: none;
margin-left: 0;
}

.\31 u\28small\29, .\31 u\24\28small\29 {
width: 8.3333333333%;
clear: none;
margin-left: 0;
}

.\31 2u\24\28small\29 + *,
.\31 1u\24\28small\29 + *,
.\31 0u\24\28small\29 + *,
.\39 u\24\28small\29 + *,
.\38 u\24\28small\29 + *,
.\37 u\24\28small\29 + *,
.\36 u\24\28small\29 + *,
.\35 u\24\28small\29 + *,
.\34 u\24\28small\29 + *,
.\33 u\24\28small\29 + *,
.\32 u\24\28small\29 + *,
.\31 u\24\28small\29 + * {
clear: left;
}

.\-11u\28small\29 {
margin-left: 91.66667%;
}

.\-10u\28small\29 {
margin-left: 83.33333%;
}

.\-9u\28small\29 {
margin-left: 75%;
}

.\-8u\28small\29 {
margin-left: 66.66667%;
}

.\-7u\28small\29 {
margin-left: 58.33333%;
}

.\-6u\28small\29 {
margin-left: 50%;
}

.\-5u\28small\29 {
margin-left: 41.66667%;
}

.\-4u\28small\29 {
margin-left: 33.33333%;
}

.\-3u\28small\29 {
margin-left: 25%;
}

.\-2u\28small\29 {
margin-left: 16.66667%;
}

.\-1u\28small\29 {
margin-left: 8.33333%;
}

}

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

.row > * {
padding: 0 0 0 1.25em;
}

.row {
margin: 0 0 -1px -1.25em;
}

.row.uniform > * {
padding: 1.25em 0 0 1.25em;
}

.row.uniform {
margin: -1.25em 0 -1px -1.25em;
}

.row.\32 00\25 > * {
padding: 0 0 0 2.5em;
}

.row.\32 00\25 {
margin: 0 0 -1px -2.5em;
}

.row.uniform.\32 00\25 > * {
padding: 2.5em 0 0 2.5em;
}

.row.uniform.\32 00\25 {
margin: -2.5em 0 -1px -2.5em;
}

.row.\31 50\25 > * {
padding: 0 0 0 1.875em;
}

.row.\31 50\25 {
margin: 0 0 -1px -1.875em;
}

.row.uniform.\31 50\25 > * {
padding: 1.875em 0 0 1.875em;
}

.row.uniform.\31 50\25 {
margin: -1.875em 0 -1px -1.875em;
}

.row.\35 0\25 > * {
padding: 0 0 0 0.625em;
}

.row.\35 0\25 {
margin: 0 0 -1px -0.625em;
}

.row.uniform.\35 0\25 > * {
padding: 0.625em 0 0 0.625em;
}

.row.uniform.\35 0\25 {
margin: -0.625em 0 -1px -0.625em;
}

.row.\32 5\25 > * {
padding: 0 0 0 0.3125em;
}

.row.\32 5\25 {
margin: 0 0 -1px -0.3125em;
}

.row.uniform.\32 5\25 > * {
padding: 0.3125em 0 0 0.3125em;
}

.row.uniform.\32 5\25 {
margin: -0.3125em 0 -1px -0.3125em;
}

.\31 2u\28xsmall\29, .\31 2u\24\28xsmall\29 {
width: 100%;
clear: none;
margin-left: 0;
}

.\31 1u\28xsmall\29, .\31 1u\24\28xsmall\29 {
width: 91.6666666667%;
clear: none;
margin-left: 0;
}

.\31 0u\28xsmall\29, .\31 0u\24\28xsmall\29 {
width: 83.3333333333%;
clear: none;
margin-left: 0;
}

.\39 u\28xsmall\29, .\39 u\24\28xsmall\29 {
width: 75%;
clear: none;
margin-left: 0;
}

.\38 u\28xsmall\29, .\38 u\24\28xsmall\29 {
width: 66.6666666667%;
clear: none;
margin-left: 0;
}

.\37 u\28xsmall\29, .\37 u\24\28xsmall\29 {
width: 58.3333333333%;
clear: none;
margin-left: 0;
}

.\36 u\28xsmall\29, .\36 u\24\28xsmall\29 {
width: 50%;
clear: none;
margin-left: 0;
}

.\35 u\28xsmall\29, .\35 u\24\28xsmall\29 {
width: 41.6666666667%;
clear: none;
margin-left: 0;
}

.\34 u\28xsmall\29, .\34 u\24\28xsmall\29 {
width: 33.3333333333%;
clear: none;
margin-left: 0;
}

.\33 u\28xsmall\29, .\33 u\24\28xsmall\29 {
width: 25%;
clear: none;
margin-left: 0;
}

.\32 u\28xsmall\29, .\32 u\24\28xsmall\29 {
width: 16.6666666667%;
clear: none;
margin-left: 0;
}

.\31 u\28xsmall\29, .\31 u\24\28xsmall\29 {
width: 8.3333333333%;
clear: none;
margin-left: 0;
}

.\31 2u\24\28xsmall\29 + *,
.\31 1u\24\28xsmall\29 + *,
.\31 0u\24\28xsmall\29 + *,
.\39 u\24\28xsmall\29 + *,
.\38 u\24\28xsmall\29 + *,
.\37 u\24\28xsmall\29 + *,
.\36 u\24\28xsmall\29 + *,
.\35 u\24\28xsmall\29 + *,
.\34 u\24\28xsmall\29 + *,
.\33 u\24\28xsmall\29 + *,
.\32 u\24\28xsmall\29 + *,
.\31 u\24\28xsmall\29 + * {
clear: left;
}

.\-11u\28xsmall\29 {
margin-left: 91.66667%;
}

.\-10u\28xsmall\29 {
margin-left: 83.33333%;
}

.\-9u\28xsmall\29 {
margin-left: 75%;
}

.\-8u\28xsmall\29 {
margin-left: 66.66667%;
}

.\-7u\28xsmall\29 {
margin-left: 58.33333%;
}

.\-6u\28xsmall\29 {
margin-left: 50%;
}

.\-5u\28xsmall\29 {
margin-left: 41.66667%;
}

.\-4u\28xsmall\29 {
margin-left: 33.33333%;
}

.\-3u\28xsmall\29 {
margin-left: 25%;
}

.\-2u\28xsmall\29 {
margin-left: 16.66667%;
}

.\-1u\28xsmall\29 {
margin-left: 8.33333%;
}

}

/* Basic */

@-ms-viewport {
width: device-width;
}

body {
-ms-overflow-style: scrollbar;
}

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

html, body {
min-width: 320px;
}

}

body {
background: #fff;
}

body.is-loading *, body.is-loading *:before, body.is-loading *:after {
-moz-animation: none !important;
-webkit-animation: none !important;
-ms-animation: none !important;
animation: none !important;
-moz-transition: none !important;
-webkit-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}

/* Type */

body {
background-color: #fff;
color: #777;
}

body, input, select, textarea {
font-family: "Raleway", Helvetica, sans-serif;
font-size: 13pt;
font-weight: 400;
line-height: 2em;
}

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

body, input, select, textarea {
font-size: 11pt;
}

}

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

body, input, select, textarea {
font-size: 11pt;
}

}

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

body, input, select, textarea {
font-size: 12pt;
}

}

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

body, input, select, textarea {
font-size: 12pt;
}

}

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

body, input, select, textarea {
font-size: 12pt;
}

}

a {
text-decoration: underline;
}

a:hover {
text-decoration: none;
}

strong, b {
font-weight: 700;
}

em, i {
font-style: italic;
}

p {
margin: 0 0 2em 0;
}

h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1em;
margin: 0 0 1em 0;
text-transform: uppercase;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
text-decoration: none;
}

h2 {
font-size: 1.5em;
line-height: 1.5em;
}

h3 {
font-size: 1.3em;
line-height: 1.5em;
}

h4 {
font-size: 1.1em;
line-height: 1.5em;
}

h5 {
font-size: 0.9em;
line-height: 1.5em;
}

h6 {
font-size: 0.7em;
line-height: 1.5em;
}

sub {
font-size: 0.8em;
position: relative;
top: 0.5em;
}

sup {
font-size: 0.8em;
position: relative;
top: -0.5em;
}

blockquote {
border-left-style: solid;
border-left-width: 4px;
font-style: italic;
margin: 0 0 2em 0;
padding: 0.5em 0 0.5em 2em;
}

code {
border-radius: 4px;
border-style: solid;
border-width: 1px;
font-family: "Courier New", monospace;
font-size: 0.9em;
margin: 0 0.25em;
padding: 0.25em 0.65em;
}

pre {
-webkit-overflow-scrolling: touch;
font-family: "Courier New", monospace;
font-size: 0.9em;
margin: 0 0 2em 0;
}

pre code {
display: block;
line-height: 1.75em;
padding: 1em 1.5em;
overflow-x: auto;
}

hr {
border: 0;
border-bottom-style: solid;
border-bottom-width: 1px;
margin: 2em 0;
}

hr.major {
margin: 3em 0;
}

.align-left {
text-align: left;
}

.align-center {
text-align: center;
}

.align-right {
text-align: right;
}

input, select, textarea {
color: #25383B;
}

a {
color: #51BAA4;
}

strong, b {
color: #25383B;
}

h1, h2, h3, h4, h5, h6 {
color: #25383B;
}

blockquote {
border-left-color: rgba(144, 144, 144, 0.25);
}

code {
background: rgba(144, 144, 144, 0.075);
border-color: rgba(144, 144, 144, 0.25);
}

hr {
border-bottom-color: rgba(144, 144, 144, 0.25);
}

/* Section/Article */

section.special, article.special, header.special {
text-align: center;
}

header p {
margin: 0 0 1.5em 0;
position: relative;
text-transform: uppercase;
}

header h2 + p {
font-size: 1.25em;
margin-top: -1em;
line-height: 1.85em;
}

header h3 + p {
font-size: 1.1em;
margin-top: -0.8em;
line-height: 1.5em;
}

header h4 + p,
header h5 + p,
header h6 + p {
font-size: 0.9em;
margin-top: -0.6em;
line-height: 1.5em;
}

header.major {
margin-bottom: 4em;
}

header.major h2 {
font-size: 2.5em;
}

header.narrow {
max-width: 60%;
margin-left: auto;
margin-right: auto;
}

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

header.narrow {
max-width: 75%;
}

}

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

header.narrow {
max-width: 100%;
}

header.major {
margin-bottom: 2em;
}

header.major h2 {
font-size: 2em;
}

}

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

header.major h2 {
font-size: 1.5em;
}

header.major p {
font-size: 1em;
}

}

header p {
color: #25383B;
}

/* Form */

form {
margin: 0 0 2em 0;
}

form ul.actions {
margin-top: 4em;
}

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

form ul.actions {
margin-top: 2em;
}

}

label {
display: block;
font-size: 0.9em;
font-weight: 700;
margin: 0 0 1em 0;
}

input[type="text"],
input[type="pas­sword"],
input[type="e­mail"],
select,
textarea {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
border-radius: 4px;
border-style: solid;
border-width: 1px;
display: block;
outline: 0;
padding: 0 1em;
text-decoration: none;
width: 100%;
}

input[type="tex­t"]:invalid,
input[type="pas­sword"]:invalid,
input[type="e­mail"]:invalid,
select:invalid,
textarea:invalid {
box-shadow: none;
}

.select-wrapper {
text-decoration: none;
display: block;
position: relative;
}

.select-wrapper:before {
content: "";
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}

.select-wrapper:before {
display: block;
height: 3.5em;
line-height: 3.5em;
pointer-events: none;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 3.5em;
}

.select-wrapper select::-ms-expand {
display: none;
}

input[type="text"],
input[type="pas­sword"],
input[type="e­mail"],
select {
height: 3.5em;
}

textarea {
padding: 0.75em 1em;
}

input[type="chec­kbox"],
input[type="radio"] {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
display: block;
float: left;
margin-right: -2em;
opacity: 0;
width: 1em;
z-index: -1;
}

input[type="chec­kbox"] + label,
input[type="radio"] + label {
text-decoration: none;
cursor: pointer;
display: inline-block;
font-size: 1em;
font-weight: 400;
padding-left: 2.85em;
padding-right: 0.75em;
position: relative;
}

input[type="chec­kbox"] + label:before,
input[type="radio"] + label:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}

input[type="chec­kbox"] + label:before,
input[type="radio"] + label:before {
border-radius: 4px;
border-style: solid;
border-width: 1px;
content: '';
display: inline-block;
height: 2.1em;
left: 0;
line-height: 2.0125em;
position: absolute;
text-align: center;
top: 0;
width: 2.1em;
}

input[type="chec­kbox"]:checked + label:before,
input[type="ra­dio"]:checked + label:before {
content: '\f00c';
}

input[type="chec­kbox"] + label:before {
border-radius: 4px;
}

input[type="radio"] + label:before {
border-radius: 100%;
}

::-webkit-input-placeholder {
opacity: 1.0;
}

:-moz-placeholder {
opacity: 1.0;
}

::-moz-placeholder {
opacity: 1.0;
}

:-ms-input-placeholder {
opacity: 1.0;
}

.formerize-placeholder {
opacity: 1.0;
}

label {
color: #25383B;
}

input[type="text"],
input[type="pas­sword"],
input[type="e­mail"],
select,
textarea {
background-color: rgba(144, 144, 144, 0.075);
border-color: rgba(144, 144, 144, 0.25);
color: inherit;
}

input[type="tex­t"]:focus,
input[type="pas­sword"]:focus,
input[type="e­mail"]:focus,
select:focus,
textarea:focus {
border-color: #51BAA4;
box-shadow: 0 0 0 1px #51BAA4;
}

.select-wrapper:before {
color: rgba(144, 144, 144, 0.25);
}

input[type="chec­kbox"] + label,
input[type="radio"] + label {
color: #777;
}

input[type="chec­kbox"] + label:before,
input[type="radio"] + label:before {
background-color: rgba(144, 144, 144, 0.075);
border-color: rgba(144, 144, 144, 0.25);
}

input[type="chec­kbox"]:checked + label:before,
input[type="ra­dio"]:checked + label:before {
background-color: rgba(144, 144, 144, 0.075);
border-color: #51BAA4;
color: #25383B;
}

input[type="chec­kbox"]:focus + label:before,
input[type="ra­dio"]:focus + label:before {
border-color: #51BAA4;
box-shadow: 0 0 0 1px #51BAA4;
}

::-webkit-input-placeholder {
color: #999 !important;
}

:-moz-placeholder {
color: #999 !important;
}

::-moz-placeholder {
color: #999 !important;
}

:-ms-input-placeholder {
color: #999 !important;
}

.formerize-placeholder {
color: #999 !important;
}

form.alt input[type="text"],
form.alt input[type="pas­sword"],
form.alt input[type="e­mail"],
form.alt select,
form.alt textarea {
background-color: transparent;
}

/* Box */

.box {
border-radius: 4px;
border-style: solid;
border-width: 1px;
margin-bottom: 2em;
padding: 1.5em;
}

.box > :last-child,
.box > :last-child > :last-child,
.box > :last-child > :last-child > :last-child {
margin-bottom: 0;
}

.box.alt {
border: 0;
border-radius: 0;
padding: 0;
}

.box {
border-color: rgba(144, 144, 144, 0.25);
}

/* Icon */

.icon {
text-decoration: none;
border-bottom: none;
position: relative;
}

.icon:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}

.icon > .label {
display: none;
}

/* Image */

.image {
border-radius: 0;
border: 0;
display: inline-block;
position: relative;
}

.image img {
border-radius: 0;
display: block;
}

.image.left, .image.right {
max-width: 40%;
}

.image.left img, .image.right img {
width: 100%;
}

.image.left {
float: left;
padding: 0 1.5em 1em 0;
top: 0.25em;
}

.image.right {
float: right;
padding: 0 0 1em 1.5em;
top: 0.25em;
}

.image.fit {
display: block;
margin: 0 0 2em 0;
width: 100%;
}

.image.fit img {
width: 100%;
}

.image.main {
display: block;
margin: 0 0 3em 0;
width: 100%;
}

.image.main img {
width: 100%;
}

/* List */

ol {
list-style: decimal;
margin: 0 0 2em 0;
padding-left: 1.25em;
}

ol li {
padding-left: 0.25em;
}

ul {
list-style: disc;
margin: 0 0 2em 0;
padding-left: 1em;
}

ul li {
padding-left: 0.5em;
}

ul.alt {
list-style: none;
padding-left: 0;
}

ul.alt > li {
border-top-style: solid;
border-top-width: 1px;
padding: 0.5em 0;
}

ul.alt > li:first-child {
border-top: 0;
padding-top: 0;
}

ul.icons {
cursor: default;
list-style: none;
padding-left: 0;
}

ul.icons > li {
display: inline-block;
padding: 0 1em 0 0;
}

ul.icons > li:last-child {
padding-right: 0;
}

ul.icons > li .icon:before {
font-size: 2em;
}

ul.actions {
cursor: default;
list-style: none;
padding-left: 0;
}

ul.actions > li {
display: inline-block;
padding: 0 1em 0 0;
vertical-align: middle;
}

ul.actions > li:last-child {
padding-right: 0;
}

ul.actions.small > li {
padding: 0 0.5em 0 0;
}

ul.actions.vertical > li {
display: block;
padding: 1em 0 0 0;
}

ul.actions.vertical > li:first-child {
padding-top: 0;
}

ul.actions.vertical > li > * {
margin-bottom: 0;
}

ul.actions.ver­tical.small > li {
padding: 0.5em 0 0 0;
}

ul.actions.ver­tical.small > li:first-child {
padding-top: 0;
}

ul.actions.fit {
display: table;
margin-left: -1em;
padding: 0;
table-layout: fixed;
width: calc(100% + 1em);
}

ul.actions.fit > li {
display: table-cell;
padding: 0 0 0 1em;
}

ul.actions.fit > li > * {
margin-bottom: 0;
}

ul.actions.fit­.small {
margin-left: -0.5em;
width: calc(100% + 0.5em);
}

ul.actions.fit­.small > li {
padding: 0 0 0 0.5em;
}

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

ul.actions {
margin: 0 0 2em 0;
}

ul.actions > li {
padding: 1em 0 0 0;
display: block;
text-align: center;
width: 100%;
}

ul.actions > li:first-child {
padding-top: 0;
}

ul.actions > li > * {
width: 100%;
margin: 0 !important;
}

ul.actions > li > *.icon:before {
margin-left: -2em;
}

ul.actions.small > li {
padding: 0.5em 0 0 0;
}

ul.actions.small > li:first-child {
padding-top: 0;
}

}

dl {
margin: 0 0 2em 0;
}

dl > dt {
display: block;
font-weight: 700;
margin: 0 0 1em 0;
}

dl > dd {
margin-left: 2em;
}

ul.alt > li {
border-top-color: rgba(144, 144, 144, 0.25);
}

/* Table */

.table-wrapper {
-webkit-overflow-scrolling: touch;
overflow-x: auto;
}

table {
margin: 0 0 2em 0;
width: 100%;
}

table tbody tr {
border-style: solid;
border-width: 1px;
border-left: 0;
border-right: 0;
}

table td {
padding: 0.75em 0.75em;
}

table th {
font-size: 0.9em;
font-weight: 700;
padding: 0 0.75em 0.75em 0.75em;
text-align: left;
}

table thead {
border-bottom-style: solid;
border-bottom-width: 2px;
}

table tfoot {
border-top-style: solid;
border-top-width: 2px;
}

table.alt {
border-collapse: separate;
}

table.alt tbody tr td {
border-style: solid;
border-width: 1px;
border-left-width: 0;
border-top-width: 0;
}

table.alt tbody tr td:first-child {
border-left-width: 1px;
}

table.alt tbody tr:first-child td {
border-top-width: 1px;
}

table.alt thead {
border-bottom: 0;
}

table.alt tfoot {
border-top: 0;
}

table tbody tr {
border-color: rgba(144, 144, 144, 0.25);
}

table tbody tr:nth-child(2n + 1) {
background-color: rgba(144, 144, 144, 0.075);
}

table th {
color: #25383B;
}

table thead {
border-bottom-color: rgba(144, 144, 144, 0.25);
}

table tfoot {
border-top-color: rgba(144, 144, 144, 0.25);
}

table.alt tbody tr td {
border-color: rgba(144, 144, 144, 0.25);
}

/* Button */

input[type="sub­mit"],
input[type="re­set"],
input[type="but­ton"],
button,
.button {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
border-radius: 2.5em;
border: 0;
cursor: pointer;
display: inline-block;
font-weight: 700;
height: 2.85em;
line-height: 2.95em;
min-width: 10em;
padding: 0 1.5em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
}

input[type="sub­mit"].icon,
input[type="re­set"].icon,
input[type="but­ton"].icon,
button.icon,
.button.icon {
padding-left: 1.35em;
}

input[type="sub­mit"].icon:be­fore,
input[type="re­set"].icon:be­fore,
input[type="but­ton"].icon:be­fore,
button.icon:before,
.button.icon:before {
margin-right: 0.5em;
}

input[type="sub­mit"].fit,
input[type="re­set"].fit,
input[type="but­ton"].fit,
button.fit,
.button.fit {
display: block;
margin: 0 0 1em 0;
width: 100%;
}

input[type="sub­mit"].small,
input[type="re­set"].small,
input[type="but­ton"].small,
button.small,
.button.small {
font-size: 0.8em;
}

input[type="sub­mit"].big,
input[type="re­set"].big,
input[type="but­ton"].big,
button.big,
.button.big {
font-size: 1.2em;
height: 3.25em;
line-height: 3.25em;
padding: 0 2.5em;
}

input[type="sub­mit"].disabled, input[type="sub­mit"]:disabled,
input[type="re­set"].disabled,
input[type="re­set"]:disabled,
input[type="but­ton"].disabled,
input[type="but­ton"]:disabled,
button.disabled,
button:disabled,
.button.disabled,
.button:disabled {
cursor: default;
opacity: 0.25;
}

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

input[type="sub­mit"].big,
input[type="re­set"].big,
input[type="but­ton"].big,
button.big,
.button.big {
font-size: 1em;
}

}

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

input[type="sub­mit"],
input[type="re­set"],
input[type="but­ton"],
button,
.button {
padding: 0;
}

}

input[type="sub­mit"],
input[type="re­set"],
input[type="but­ton"],
button,
.button {
background-color: #25383B;
box-shadow: none;
color: #fff !important;
}

input[type="sub­mit"].icon:be­fore,
input[type="re­set"].icon:be­fore,
input[type="but­ton"].icon:be­fore,
button.icon:before,
.button.icon:before {
color: #999;
}

input[type="sub­mit"]:hover,
input[type="re­set"]:hover,
input[type="but­ton"]:hover,
button:hover,
.button:hover {
background-color: #2f474b;
}

input[type="sub­mit"]:active,
input[type="re­set"]:active,
input[type="but­ton"]:active,
button:active,
.button:active {
background-color: #1b292b;
}

input[type="sub­mit"].special,
input[type="re­set"].special,
input[type="but­ton"].special,
button.special,
.button.special {
background-color: #51BAA4;
box-shadow: none;
color: #fff !important;
}

input[type="sub­mit"].special:ho­ver,
input[type="re­set"].special:ho­ver,
input[type="but­ton"].special:ho­ver,
button.special:ho­ver,
.button.speci­al:hover {
background-color: #63c1ae;
}

input[type="sub­mit"].special:ac­tive,
input[type="re­set"].special:ac­tive,
input[type="but­ton"].special:ac­tive,
button.special:ac­tive,
.button.speci­al:active {
background-color: #45ad97;
}

input[type="sub­mit"].alt,
input[type="re­set"].alt,
input[type="but­ton"].alt,
button.alt,
.button.alt {
background-color: transparent;
box-shadow: inset 0 0 0 2px #51BAA4;
color: #51BAA4 !important;
}

input[type="sub­mit"].alt:hover,
input[type="re­set"].alt:hover,
input[type="but­ton"].alt:hover,
button.alt:hover,
.button.alt:hover {
background-color: rgba(144, 144, 144, 0.075);
}

input[type="sub­mit"].alt:acti­ve,
input[type="re­set"].alt:acti­ve,
input[type="but­ton"].alt:acti­ve,
button.alt:active,
.button.alt:active {
background-color: rgba(144, 144, 144, 0.2);
}

/* Feature */

.feature {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
margin-bottom: 6em;
}

.feature:last-child {
margin-bottom: 2em;
}

.feature.left {
-moz-flex-direction: row;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}

.feature.right {
-moz-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}

.feature .image {
width: 48%;
}

.feature .image img {
max-width: 100%;
}

.feature .content {
padding: 2em 3em 0.1em 3em;
width: 52%;
}

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

.feature {
margin-bottom: 4em;
}

.feature .content {
padding: 1em 2em 0.1em 2em;
}

}

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

.feature.left, .feature.right {
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}

.feature .image {
width: 100%;
}

.feature .image img {
width: 100%;
}

.feature .content {
padding: 2em 2em 0.1em 2em;
width: 100%;
}

}

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

.feature {
margin-bottom: 2em;
}

.feature .content {
padding: 2em 1em 0.1em 1em;
}

}

.feature {
background-color: rgba(144, 144, 144, 0.075);
}

/* Image Grid */

.image-grid {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 4em;
}

.image-grid .image {
margin: 0;
width: 25%;
}

.image-grid .image img {
width: 100%;
}

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

.image-grid {
margin-bottom: 3em;
}

.image-grid .image {
width: 50%;
}

}

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

.image-grid {
margin-bottom: 2em;
}

.image-grid .image {
width: 100%;
}

}

/* Wrapper */

.wrapper {
padding: 8em 0 6em 0;
position: relative;
}

.wrapper > .inner {
margin: 0 auto;
width: 70em;
}

.wrapper.style1 {
background-color: #EEE;
color: #777;
}

.wrapper.style1 input, .wrapper.style1 select, .wrapper.style1 textarea {
color: #555;
}

.wrapper.style1 a {
color: #51BAA4;
}

.wrapper.style1 strong, .wrapper.style1 b {
color: #555;
}

.wrapper.style1 h1, .wrapper.style1 h2, .wrapper.style1 h3, .wrapper.style1 h4, .wrapper.style1 h5, .wrapper.style1 h6 {
color: #0057b8;
}

.wrapper.style1 blockquote {
border-left-color: rgba(144, 144, 144, 0.25);
}

.wrapper.style1 code {
background: #fff;
border-color: rgba(144, 144, 144, 0.25);
}

.wrapper.style1 hr {
border-bottom-color: rgba(144, 144, 144, 0.25);
}

.wrapper.style1 header p {
color: #555;
}

.wrapper.style1 .feature {
background-color: #fff;
}

.wrapper.style1 label {
color: #555;
}

.wrapper.style1 input[type="text"],
.wrapper.style1 input[type="pas­sword"],
.wrapper.style1 input[type="e­mail"],
.wrapper.style1 select,
.wrapper.style1 textarea {
background-color: #fff;
border-color: rgba(144, 144, 144, 0.25);
color: inherit;
}

.wrapper.style1 input[type="tex­t"]:focus,
.wrapper.style1 input[type="pas­sword"]:focus,
.wrapper.style1 input[type="e­mail"]:focus,
.wrapper.style1 select:focus,
.wrapper.style1 textarea:focus {
border-color: #51BAA4;
box-shadow: 0 0 0 1px #51BAA4;
}

.wrapper.style1 .select-wrapper:before {
color: rgba(144, 144, 144, 0.25);
}

.wrapper.style1 input[type="chec­kbox"] + label,
.wrapper.style1 input[type="radio"] + label {
color: #777;
}

.wrapper.style1 input[type="chec­kbox"] + label:before,
.wrapper.style1 input[type="radio"] + label:before {
background-color: #fff;
border-color: rgba(144, 144, 144, 0.25);
}

.wrapper.style1 input[type="chec­kbox"]:checked + label:before,
.wrapper.style1 input[type="ra­dio"]:checked + label:before {
background-color: #fff;
border-color: #51BAA4;
color: #555;
}

.wrapper.style1 input[type="chec­kbox"]:focus + label:before,
.wrapper.style1 input[type="ra­dio"]:focus + label:before {
border-color: #51BAA4;
box-shadow: 0 0 0 1px #51BAA4;
}

.wrapper.style1 ::-webkit-input-placeholder {
color: #bbb !important;
}

.wrapper.style1 :-moz-placeholder {
color: #bbb !important;
}

.wrapper.style1 ::-moz-placeholder {
color: #bbb !important;
}

.wrapper.style1 :-ms-input-placeholder {
color: #bbb !important;
}

.wrapper.style1 .formerize-placeholder {
color: #bbb !important;
}

.wrapper.style1 form.alt input[type="text"],
.wrapper.style1 form.alt input[type="pas­sword"],
.wrapper.style1 form.alt input[type="e­mail"],
.wrapper.style1 form.alt select,
.wrapper.style1 form.alt textarea {
background-color: transparent;
}

.wrapper.style1 ul.alt > li {
border-top-color: rgba(144, 144, 144, 0.25);
}

.wrapper.style1 table tbody tr {
border-color: rgba(144, 144, 144, 0.25);
}

.wrapper.style1 table tbody tr:nth-child(2n + 1) {
background-color: #fff;
}

.wrapper.style1 table th {
color: #555;
}

.wrapper.style1 table thead {
border-bottom-color: rgba(144, 144, 144, 0.25);
}

.wrapper.style1 table tfoot {
border-top-color: rgba(144, 144, 144, 0.25);
}

.wrapper.style1 table.alt tbody tr td {
border-color: rgba(144, 144, 144, 0.25);
}

.wrapper.style1 input[type="sub­mit"],
.wrapper.style1 input[type="re­set"],
.wrapper.style1 input[type="but­ton"],
.wrapper.style1 button,
.wrapper.style1 .button {
background-color: #555;
box-shadow: none;
color: #EEE !important;
}

.wrapper.style1 input[type="sub­mit"].icon:be­fore,
.wrapper.style1 input[type="re­set"].icon:be­fore,
.wrapper.style1 input[type="but­ton"].icon:be­fore,
.wrapper.style1 button.icon:before,
.wrapper.style1 .button.icon:before {
color: #bbb;
}

.wrapper.style1 input[type="sub­mit"]:hover,
.wrapper.style1 input[type="re­set"]:hover,
.wrapper.style1 input[type="but­ton"]:hover,
.wrapper.style1 button:hover,
.wrapper.style1 .button:hover {
background-color: #626262;
}

.wrapper.style1 input[type="sub­mit"]:active,
.wrapper.style1 input[type="re­set"]:active,
.wrapper.style1 input[type="but­ton"]:active,
.wrapper.style1 button:active,
.wrapper.style1 .button:active {
background-color: #484848;
}

.wrapper.style1 input[type="sub­mit"].special,
.wrapper.style1 input[type="re­set"].special,
.wrapper.style1 input[type="but­ton"].special,
.wrapper.style1 button.special,
.wrapper.style1 .button.special {
background-color: #51BAA4;
box-shadow: none;
color: #fff !important;
}

.wrapper.style1 input[type="sub­mit"].special:ho­ver,
.wrapper.style1 input[type="re­set"].special:ho­ver,
.wrapper.style1 input[type="but­ton"].special:ho­ver,
.wrapper.style1 button.special:ho­ver,
.wrapper.style1 .button.speci­al:hover {
background-color: #63c1ae;
}

.wrapper.style1 input[type="sub­mit"].special:ac­tive,
.wrapper.style1 input[type="re­set"].special:ac­tive,
.wrapper.style1 input[type="but­ton"].special:ac­tive,
.wrapper.style1 button.special:ac­tive,
.wrapper.style1 .button.speci­al:active {
background-color: #45ad97;
}

.wrapper.style1 input[type="sub­mit"].alt,
.wrapper.style1 input[type="re­set"].alt,
.wrapper.style1 input[type="but­ton"].alt,
.wrapper.style1 button.alt,
.wrapper.style1 .button.alt {
background-color: transparent;
box-shadow: inset 0 0 0 2px #000000;
color: #0057b8 !important;
}

.wrapper.style1 input[type="sub­mit"].alt:hover,
.wrapper.style1 input[type="re­set"].alt:hover,
.wrapper.style1 input[type="but­ton"].alt:hover,
.wrapper.style1 button.alt:hover,
.wrapper.style1 .button.alt:hover {
background-color: #fff;
}

.wrapper.style1 input[type="sub­mit"].alt:acti­ve,
.wrapper.style1 input[type="re­set"].alt:acti­ve,
.wrapper.style1 input[type="but­ton"].alt:acti­ve,
.wrapper.style1 button.alt:active,
.wrapper.style1 .button.alt:active {
background-color: rgba(144, 144, 144, 0.2);
}

.wrapper.style2 {
background-color: #1E2832;
color: rgba(255, 255, 255, 0.75);
}

.wrapper.style2 input, .wrapper.style2 select, .wrapper.style2 textarea {
color: #fff;
}

.wrapper.style2 a {
color: #51BAA4;
}

.wrapper.style2 strong, .wrapper.style2 b {
color: #fff;
}

.wrapper.style2 h1, .wrapper.style2 h2, .wrapper.style2 h3, .wrapper.style2 h4, .wrapper.style2 h5, .wrapper.style2 h6 {
color: #fff;
}

.wrapper.style2 blockquote {
border-left-color: transparent;
}

.wrapper.style2 code {
background: rgba(255, 255, 255, 0.05);
border-color: transparent;
}

.wrapper.style2 hr {
border-bottom-color: transparent;
}

.wrapper.style2 header p {
color: #fff;
}

.wrapper.style2 .feature {
background-color: rgba(255, 255, 255, 0.05);
}

.wrapper.style2 label {
color: #fff;
}

.wrapper.style2 input[type="text"],
.wrapper.style2 input[type="pas­sword"],
.wrapper.style2 input[type="e­mail"],
.wrapper.style2 select,
.wrapper.style2 textarea {
background-color: rgba(255, 255, 255, 0.05);
border-color: transparent;
color: inherit;
}

.wrapper.style2 input[type="tex­t"]:focus,
.wrapper.style2 input[type="pas­sword"]:focus,
.wrapper.style2 input[type="e­mail"]:focus,
.wrapper.style2 select:focus,
.wrapper.style2 textarea:focus {
border-color: #51BAA4;
box-shadow: 0 0 0 1px #51BAA4;
}

.wrapper.style2 .select-wrapper:before {
color: transparent;
}

.wrapper.style2 input[type="chec­kbox"] + label,
.wrapper.style2 input[type="radio"] + label {
color: rgba(255, 255, 255, 0.75);
}

.wrapper.style2 input[type="chec­kbox"] + label:before,
.wrapper.style2 input[type="radio"] + label:before {
background-color: rgba(255, 255, 255, 0.05);
border-color: transparent;
}

.wrapper.style2 input[type="chec­kbox"]:checked + label:before,
.wrapper.style2 input[type="ra­dio"]:checked + label:before {
background-color: rgba(255, 255, 255, 0.05);
border-color: #51BAA4;
color: #fff;
}

.wrapper.style2 input[type="chec­kbox"]:focus + label:before,
.wrapper.style2 input[type="ra­dio"]:focus + label:before {
border-color: #51BAA4;
box-shadow: 0 0 0 1px #51BAA4;
}

.wrapper.style2 ::-webkit-input-placeholder {
color: #a5a9ad !important;
}

.wrapper.style2 :-moz-placeholder {
color: #a5a9ad !important;
}

.wrapper.style2 ::-moz-placeholder {
color: #a5a9ad !important;
}

.wrapper.style2 :-ms-input-placeholder {
color: #a5a9ad !important;
}

.wrapper.style2 .formerize-placeholder {
color: #a5a9ad !important;
}

.wrapper.style2 form.alt input[type="text"],
.wrapper.style2 form.alt input[type="pas­sword"],
.wrapper.style2 form.alt input[type="e­mail"],
.wrapper.style2 form.alt select,
.wrapper.style2 form.alt textarea {
background-color: transparent;
}

.wrapper.style2 ul.alt > li {
border-top-color: transparent;
}

.wrapper.style2 table tbody tr {
border-color: transparent;
}

.wrapper.style2 table tbody tr:nth-child(2n + 1) {
background-color: rgba(255, 255, 255, 0.05);
}

.wrapper.style2 table th {
color: #fff;
}

.wrapper.style2 table thead {
border-bottom-color: transparent;
}

.wrapper.style2 table tfoot {
border-top-color: transparent;
}

.wrapper.style2 table.alt tbody tr td {
border-color: transparent;
}

.wrapper.style2 input[type="sub­mit"],
.wrapper.style2 input[type="re­set"],
.wrapper.style2 input[type="but­ton"],
.wrapper.style2 button,
.wrapper.style2 .button {
background-color: #fff;
box-shadow: none;
color: #1E2832 !important;
}

.wrapper.style2 input[type="sub­mit"].icon:be­fore,
.wrapper.style2 input[type="re­set"].icon:be­fore,
.wrapper.style2 input[type="but­ton"].icon:be­fore,
.wrapper.style2 button.icon:before,
.wrapper.style2 .button.icon:before {
color: #a5a9ad;
}

.wrapper.style2 input[type="sub­mit"]:hover,
.wrapper.style2 input[type="re­set"]:hover,
.wrapper.style2 input[type="but­ton"]:hover,
.wrapper.style2 button:hover,
.wrapper.style2 .button:hover {
background-color: white;
}

.wrapper.style2 input[type="sub­mit"]:active,
.wrapper.style2 input[type="re­set"]:active,
.wrapper.style2 input[type="but­ton"]:active,
.wrapper.style2 button:active,
.wrapper.style2 .button:active {
background-color: #f2f2f2;
}

.wrapper.style2 input[type="sub­mit"].special,
.wrapper.style2 input[type=

Editováno 17.7.2015 19:45
Odpovědět
17.7.2015 19:43
Navštiv www.fb.com/skkelticz
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na tbartolen
Tomáš Maňhal:17.7.2015 20:31

To chceš abychom Ti napsali všechno? Ukaž nám nějakou tvojí práci, kterou jsi začal, nebo kde jsi se zasekl, konkrétní problém.

Nejlíp uděláš, když se vyprdneš na cizí šablonu, ale napíšeš si vlastní od píky. Z cizí šablony se nic nenaučíš.

Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
 
Nahoru Odpovědět
17.7.2015 20:31
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.