/* TOPAGE LAYOUT CSS TAMPLATE 1.0 */
/* SOURCE: topage-layout.css */
/* AUTHOR: Kamil Matula */
/* LICENCE: Public Domain */
/* DATE: 2018 */

/* CONTENT
   1.0.0 General declarations
   1.1.0 Fonts declarations
   1.2.0 Layout
   1.2.1 Lang
   1.2.2 Header
   1.2.3 Navigation
   1.2.4 Quotesfield
   1.2.5 Footer
   1.2.6 Textfield
   2.0.0 Mobile devices
*/

/* 1.0.0 GENERAL DECLARATIONS */

/* 1.1.0 Fonts declarations
   Used fonts: Roboto (Regular|Condensed|Slab)
   Add to your webpage > head: <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Roboto+Slab" rel="stylesheet">
   Roboto: sans-serif
   Roboto Condensed: sans-serif
   Roboto Slab: serif
*/

/* 1.2.0 Layout */

body { width: 100%; height: 100%; margin: 0px 0px; padding: 0px 0px; }
.wrapper { width: 100%; height: 100%; margin: 0px 0px; padding: 0px 0px; position: relative; left: 0px; top: 0px; }
  .pageleft { background: url("../images/backgrounds/photo-bg.jpg") no-repeat center top;  background-size: 175%; width: 50%; height: 100vh; margin: 0px 0px; padding: 0px 0px; position: fixed; left: 0px; top: 0xp; }
    .pageleft > .content-wrapper { background: rgba(40, 40, 40, 0.5); width: 90%; height: 100%; padding: 5% 5%; position: relative; }
      .content-wrapper > .lang { width: 100%; margin: 0px 0px; padding: 0px 0px; position: relative; display: block; }
      .content-wrapper > .header { width: 100%; margin: 0px 0px; padding: 0px 0px; position: relative; display: block; }
      .content-wrapper > .navigation { width: 40%; margin: 0px 0px; padding: 2.5% 0%; position: relative; float: left; display: inline-block; }
      .content-wrapper > .quotesfield { width: 52.5%; margin: 0px 0px; padding: 2.5% 2.5%; position: relative; float: right; display: inline-block; }
      .content-wrapper > .footer { width: 100%; margin: 0px 0px; padding: 0px 0px; position: relative; bottom: 0%; display: block; border-top: rgba(240, 240, 240, 1) 1px solid; clear: both; }
  .pageright { background: rgba(240, 240, 240, 1); width: 50%; min-height: 100vh; max-height: 100%; margin: 0px 0px; padding: 0px 0px; position: relative; float: right; clear: both; }
    .pageright > .content-wrapper { width: 90%; height: 90%; margin: 0px 0px; padding: 2.5% 2.5%; position: relative; }
      .content-wrapper > .textfield { width: 95%; margin: 0px 0px; padding: 2.5% 2.5%; position: relative; }

/* 1.2.1 Lang */

.lang > a > img { width: 100%; }
  .lang > a:link { width: 5%; margin: 0px 0px; padding: 0%; position: relative; border: 0px solid transparent; display: inline-block; }
  .lang > a:visited { width: 5%; margin: 0px 0px; padding: 0%; position: relative; border: 0px solid transparent; display: inline-block; }
  .lang > a:hover { width: 5%; margin: 0px 0px; padding: 0%; position: relative; border: 0px solid transparent; display: inline-block; }
  .lang > a:active { width: 5%; margin: 0px 0px; padding: 0%; position: relative; border: 0px solid transparent; display: inline-block; }

/* 1.2.2 Header */

.header > .heading { width: 52.5%; margin: 0px 0px; padding: 5% 2.5% 5% 45%; position: relative; }
  .header > .heading > h1 { margin: 0pt 0pt; padding: 0px 0px; text-indent: -17.5%; }
    .header > .heading > h1 > a:link { color: rgba(240, 240, 240, 1); font: bold 7.5vw 'Roboto', sans-serif; text-decoration: none; line-height: 1; }
    .header > .heading > h1 > a:visited { color: rgba(240, 240, 240, 1); font: bold 7.5vw 'Roboto', sans-serif; text-decoration: none; line-height: 1; }
    .header > .heading > h1 > a:hover { color: rgba(240, 240, 240, 1); font: bold 7.5vw 'Roboto', sans-serif; text-decoration: none; line-height: 1; }
    .header > .heading > h1 > a:active { color: rgba(240, 240, 240, 1); font: bold 7.5vw 'Roboto', sans-serif; text-decoration: none; line-height: 1; }

/* 1.2.3 Navigation */

.navigation > ul { width: 100%; margin: 0px 0px; padding: 0px 0px; list-style-type: none; }
  .navigation > ul > li { width: 100%; margin: 5% 0px; padding: 0px 0px; display: block; }
    .navigation > ul > li > a:link { margin: 0px 0px; color: rgba(240, 240, 240, 1); font: 1.6vw 'Roboto Condensed', sans-serif; text-decoration: none; transition: color 0.5s; }
    .navigation > ul > li > a:visited { margin: 0px 0px; color: rgba(240, 240, 240, 1); font: 1.6vw 'Roboto Condensed', sans-serif; text-decoration: none; transition: color 0.5s; }
    .navigation > ul > li > a:hover { margin: 0px 0px; color: rgba(0, 200, 240, 1); font: 1.6vw 'Roboto Condensed', sans-serif; text-decoration: none; }
    .navigation > ul > li > a:active { margin: 0px 0px; color: rgba(0, 200, 240, 1); font: 1.6vw 'Roboto Condensed', sans-serif; text-decoration: none; }

/* 1.2.4 Quotesfield */

.quotesfield > q { width: 100%; margin: 5% 0% 2.5% 0%; padding: 0px 0px; color: rgba(240, 240, 240, 1); font: 1.3vw 'Roboto', sans-serif; display: block; }
.quotesfield > p { width: 100%; margin: 2.5% 0px; padding: 0px 0px; color: rgba(240, 240, 240, 1); font: italic 1vw 'Roboto', sans-serif; text-align: right; display: block; }

/* 1.2.5 Footer */

.footer > .copyright { width: 58%; margin: 0px 0px; padding: 5% 1%; position: relative; float: left; display: inline-block; }
  .copyright > p { width: 100%; margin: 0px 0px; padding: 0px 0px; color: rgba(240, 240, 240, 1); font: 1.1vw 'Roboto', sans-serif; }
    .copyright > p > a:link { color: rgba(200, 200, 200, 1); font: 1.1vw 'Roboto', sans-serif; text-decoration: none; transition: color 0.5s; }
    .copyright > p > a:visited { color: rgba(200, 200, 200, 1); font: 1.1vw 'Roboto', sans-serif; text-decoration: none; transition: color 0.5s; }
    .copyright > p > a:hover { color: rgba(0, 200, 240, 1); font: 1.1vw 'Roboto', sans-serif; text-decoration: none; }
    .copyright > p > a:active { color: rgba(0, 200, 240, 1); font: 1.1vw 'Roboto', sans-serif; text-decoration: none; }
.footer > .social { width: 38%; margin: 0px 0px; padding: 2.5% 1%; text-align: right; position: relative; float: right; display: inline-block; }
  .social > a > img { width: 100%; }
    .social > a:link { width: 15%; margin: 0px 0.5%; padding: 0px 0px; position: relative; border: 0px solid transparent; display: inline-block; }
    .social > a:visited { width: 15%; margin: 0px 0.5%; padding: 0px 0px; position: relative; border: 0px solid transparent; display: inline-block; }
    .social > a:hover { width: 15%; margin: 0px 0.5%; padding: 0px 0px; position: relative; border: 0px solid transparent; display: inline-block; }
    .social > a:active { width: 15%; margin: 0px 0.5%; padding: 0px 0px; position: relative; border: 0px solid transparent; display: inline-block; }

/* 1.2.6 Textfield */

.textfield > article { width: 100%; margin: 0pt 0pt; padding: 10% 5%; position: relative; display: block; clear: both; }
  article > h1 { margin: 0pt 0pt 0.5em 0pt; padding: 0pt 0pt; color: rgba(10, 10, 10, 1); font: bold 2.4vw 'Roboto', sans-serif; transition: color 0.5s; }
  article > h1:hover { color: rgba(0, 200, 240, 1); }
  article > h2 { margin: 1em 0pt; padding: 0pt 0pt; color: rgba(10, 10, 10, 1); font: bold 1.4vw 'Roboto', sans-serif; transition: color 0.5s; }
  article > h2:hover { color: rgba(0, 200, 240, 1); }
  article > h3 { margin: 1em 0pt; padding: 0pt 0pt; color: rgba(10, 10, 10, 1); font: bold 1.2vw 'Roboto', sans-serif; transition: color 0.5s; }
  article > h3:hover { color: rgba(0, 200, 240, 1); }
  article > p { margin: 0.5em 0pt; padding: 0pt 0pt; color: rgba(10, 10, 10, 1); font: 1vw 'Roboto Slab', serif; line-height: 1.5; }
    article > p > a:link { color: rgba(50, 50, 50, 1); font: 1vw 'Roboto Slab', serif; text-decoration: underline; transition: color 0.5s; }
    article > p > a:visited { color: rgba(50, 50, 50, 1); font: 1vw 'Roboto Slab', serif; text-decoration: underline; transition: color 0.5s; }
    article > p > a:hover { color: rgba(0, 200, 240, 1); font: 1vw 'Roboto Slab', serif; text-decoration: underline; }
    article > p > a:active { color: rgba(0, 200, 240, 1); font: 1vw 'Roboto Slab', serif; text-decoration: underline; }
  article > .image-line { width: 100%; margin: 0px 0px; padding: 0px 0px; position: relative; display: block; }
  .image-line > figure { width: 15%; margin: 0% 1%; padding: 0px 0px; text-align: center; position: relative; display: inline-block; }
    .image-line > figure > a:link { color: rgba(50, 50, 50, 1); margin: 0.25em 0pt; padding: 0pt 0pt; font: 0.8vw 'Roboto Slab', serif; text-decoration: none; text-align: center; border: 0px solid transparent; transition: color 0.5s; }
    .image-line > figure > a:visited { color: rgba(50, 50, 50, 1); margin: 0.25em 0pt; padding: 0pt 0pt; font: 0.8vw 'Roboto Slab', serif; text-decoration: none;text-align: center; border: 0px solid transparent; transition: color 0.5s }
    .image-line > figure > a:hover { color: rgba(0, 200, 240, 1); margin: 0.25em 0pt; padding: 0pt 0pt; font: 0.8vw 'Roboto Slab', serif; text-decoration: none; text-align: center; border: 0px solid transparent; }
    .image-line > figure > a:active { color: rgba(0, 200, 240, 1); margin: 0.25em 0pt; padding: 0pt 0pt; font: 0.8vw 'Roboto Slab', serif; text-decoration: none; text-align: center; border: 0px solid transparent; }
      .image-line > figure > a > img  { width: 100%; }
      .image-line > figure > a > caption { width: 100%; }
  article > .image-link { width: 100%; margin: 0px 0px; padding: 0px 0px; position: relative; display: block; clear: both; }
    .image-link > figure { width: 5%; margin: 1%; padding: 0px 0px; text-align: center; position: relative; display: inline-block; }
      .image-link > figure > img { width: 100%; }
      .image-link > figure > a > img { width: 100%; }
    .image-link > p { margin: 0pt 0pt; padding: 0pt 0pt; vertical-align: 50%; color: rgba(10, 10, 10, 1); font: 1vw 'Roboto Slab', serif; line-height: 1.5; display: inline-block; }
      .image-link > p > a:link { color: rgba(50, 50, 50, 1); font: 1vw 'Roboto Slab', serif; text-decoration: none; transition: color 0.5s; }
      .image-link > p > a:visited { color: rgba(50, 50, 50, 1); font: 1vw 'Roboto Slab', serif; text-decoration: none; transition: color 0.5s; }
      .image-link > p > a:hover { color: rgba(0, 200, 240, 1); font: 1vw 'Roboto Slab', serif; text-decoration: none; }
      .image-link > p > a:active { color: rgba(0, 200, 240, 1); font: 1vw 'Roboto Slab', serif; text-decoration: none; }

/* 2.0.0 MOBILE DEVICES */

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

/* 2.1.0 Layout changes */

.pageleft { background: url("../images/backgrounds/photo-bg.jpg") no-repeat center top;  background-size: 175%; width: 100%; height: 100%; margin: 0px 0px; padding: 0px 0px; position: relative; left: 0px; top: 0xp; }
  .pageleft > .content-wrapper { background: rgba(40, 40, 40, 0.5); width: 90%; height: auto; padding: 15% 5%; position: relative; }
    .content-wrapper > .navigation { width: 90%; margin: 0px 0px; padding: 2.5% 0%; position: relative; float: left; display: block; }
    .content-wrapper > .quotesfield { width: 52.5%; margin: 0px 0px; padding: 2.5% 2.5%; position: relative; float: right; display: none; }
.pageright { background: rgba(240, 240, 240, 1); width: 100%; margin: 0px 0px; padding: 0px 0px; position: relative; clear: both; }

/* 2.1.2 Lang changes */

.lang > a:link { width: 12.5%; margin: 0px 0px; padding: 0%; position: relative; border: 0px solid transparent; display: inline-block; }
.lang > a:visited { width: 12.5%; margin: 0px 0px; padding: 0%; position: relative; border: 0px solid transparent; display: inline-block; }
.lang > a:hover { width: 12.5%; margin: 0px 0px; padding: 0%; position: relative; border: 0px solid transparent; display: inline-block; }
.lang > a:active { width: 12.5%; margin: 0px 0px; padding: 0%; position: relative; border: 0px solid transparent; display: inline-block; }

/* 2.1.3 Header changes */

.header > .heading > h1 > a:link { color: rgba(240, 240, 240, 1); font: bold 18vw 'Roboto', sans-serif; text-decoration: none; line-height: 1; }
.header > .heading > h1 > a:visited { color: rgba(240, 240, 240, 1); font: bold 18vw 'Roboto', sans-serif; text-decoration: none; line-height: 1; }
.header > .heading > h1 > a:hover { color: rgba(240, 240, 240, 1); font: bold 18vw 'Roboto', sans-serif; text-decoration: none; line-height: 1; }
.header > .heading > h1 > a:active { color: rgba(240, 240, 240, 1); font: bold 18vw 'Roboto', sans-serif; text-decoration: none; line-height: 1; }

/* 1.2.4 Navigation changes */

.navigation > ul > li { width: 25%; margin: 0% 0px; padding: 2% 2%; text-align: left; display: inline-block; }
  .navigation > ul > li > a:link { margin: 0px 0px; color: rgba(240, 240, 240, 1); font: 5vw 'Roboto Condensed', sans-serif; text-decoration: none; transition: color 0.5s; }
  .navigation > ul > li > a:visited { margin: 0px 0px; color: rgba(240, 240, 240, 1); font: 5vw 'Roboto Condensed', sans-serif; text-decoration: none; transition: color 0.5s; }
  .navigation > ul > li > a:hover { margin: 0px 0px; color: rgba(0, 200, 240, 1); font: 5vw 'Roboto Condensed', sans-serif; text-decoration: none; }
  .navigation > ul > li > a:active { margin: 0px 0px; color: rgba(0, 200, 240, 1); font: 5vw 'Roboto Condensed', sans-serif; text-decoration: none; }

/* 1.2.5 Footer changes */

.footer > .copyright { width: 58%; margin: 0px 0px; padding: 2.5% 1%; position: relative; float: left; display: inline-block; }
  .copyright > p { width: 100%; margin: 0px 0px; padding: 0px 0px; color: rgba(240, 240, 240, 1); font: 3vw 'Roboto', sans-serif; }
    .copyright > p > a:link { color: rgba(200, 200, 200, 1); font: 3vw 'Roboto', sans-serif; text-decoration: none; transition: color 0.5s; }
    .copyright > p > a:visited { color: rgba(200, 200, 200, 1); font: 3vw 'Roboto', sans-serif; text-decoration: none; transition: color 0.5s; }
    .copyright > p > a:hover { color: rgba(0, 200, 240, 1); font: 3vw 'Roboto', sans-serif; text-decoration: none; }
    .copyright > p > a:active { color: rgba(0, 200, 240, 1); font: 3vw 'Roboto', sans-serif; text-decoration: none; }
.footer > .social { width: 38%; margin: 0px 0px; padding: 2.5% 1%; text-align: right; position: relative; float: right; display: inline-block; }
    .social > a:link { width: 20%; margin: 0px 0.5%; padding: 0px 0px; position: relative; border: 0px solid transparent; display: inline-block; }
    .social > a:visited { width: 20%; margin: 0px 0.5%; padding: 0px 0px; position: relative; border: 0px solid transparent; display: inline-block; }
    .social > a:hover { width: 20%; margin: 0px 0.5%; padding: 0px 0px; position: relative; border: 0px solid transparent; display: inline-block; }
    .social > a:active { width: 20%; margin: 0px 0.5%; padding: 0px 0px; position: relative; border: 0px solid transparent; display: inline-block; }

/* 1.2.6 Textfield changes */

article > h1 { margin: 0pt 0pt 0.5em 0pt; padding: 0pt 0pt; color: rgba(10, 10, 10, 1); font: bold 8vw 'Roboto', sans-serif; transition: color 0.5s; }
article > h2 { margin: 0.5em 0pt; padding: 0pt 0pt; color: rgba(10, 10, 10, 1); font: bold 4vw 'Roboto', sans-serif; transition: color 0.5s; }
article > h3 { margin: 0.5em 0pt; padding: 0pt 0pt; color: rgba(10, 10, 10, 1); font: bold 3vw 'Roboto', sans-serif; transition: color 0.5s; }
article > p { margin: 0.25em 0pt; padding: 0pt 0pt; color: rgba(10, 10, 10, 1); font: 3vw 'Roboto Slab', serif; line-height: 1.5; }
  article > p > a:link { color: rgba(50, 50, 50, 1); font: 3vw 'Roboto Slab', serif; text-decoration: underline; transition: color 0.5s; }
  article > p > a:visited { color: rgba(50, 50, 50, 1); font: 3vw 'Roboto Slab', serif; text-decoration: underline; transition: color 0.5s; }
  article > p > a:hover { color: rgba(0, 200, 240, 1); font: 3vw 'Roboto Slab', serif; text-decoration: underline; }
  article > p > a:active { color: rgba(0, 200, 240, 1); font: 3vw 'Roboto Slab', serif; text-decoration: underline; }
article > .image-line { width: 100%; margin: 0px 0px; padding: 0px 0px; position: relative; display: block; }
.image-line > figure { width: 15%; margin: 0% 1%; padding: 0px 0px; text-align: center; position: relative; display: inline-block; }
  .image-line > figure > a:link { color: rgba(50, 50, 50, 1); margin: 0.15em 0pt; padding: 0pt 0pt; font: 1.5vw 'Roboto Slab', serif; text-decoration: none; text-align: center; border: 0px solid transparent; transition: color 0.5s; }
  .image-line > figure > a:visited { color: rgba(50, 50, 50, 1); margin: 0.15em 0pt; padding: 0pt 0pt; font: 1.5vw 'Roboto Slab', serif; text-decoration: none;text-align: center; border: 0px solid transparent; transition: color 0.5s }
  .image-line > figure > a:hover { color: rgba(0, 200, 240, 1); margin: 0.15em 0pt; padding: 0pt 0pt; font: 1.5vw 'Roboto Slab', serif; text-decoration: none; text-align: center; border: 0px solid transparent; }
  .image-line > figure > a:active { color: rgba(0, 200, 240, 1); margin: 0.15em 0pt; padding: 0pt 0pt; font: 1.5vw 'Roboto Slab', serif; text-decoration: none; text-align: center; border: 0px solid transparent; }
.image-link > figure { width: 10%; margin: 1%; padding: 0px 0px; text-align: center; position: relative; display: inline-block; }
.image-link > p { margin: 0pt 0pt; padding: 0pt 0pt; vertical-align: 50%; color: rgba(10, 10, 10, 1); font: 3vw 'Roboto Slab', serif; line-height: 1.5; display: inline-block; }
  .image-link > p > a:link { color: rgba(50, 50, 50, 1); font: 3vw 'Roboto Slab', serif; text-decoration: none; transition: color 0.5s; }
  .image-link > p > a:visited { color: rgba(50, 50, 50, 1); font: 3vw 'Roboto Slab', serif; text-decoration: none; transition: color 0.5s; }
  .image-link > p > a:hover { color: rgba(0, 200, 240, 1); font: 3vw 'Roboto Slab', serif; text-decoration: none; }
  .image-link > p > a:active { color: rgba(0, 200, 240, 1); font: 3vw 'Roboto Slab', serif; text-decoration: none; }

}