@charset "UTF-8";
/**
 * Main CSS
 *
 * @project Aluprof - prezentacja
 * @since 2015-02
 * @author Magdalena Figurska / Lizard Media
 *
 *
 */


/* ------------------------------------------------ *\

  @Globals

\* ------------------------------------------------ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body { height: 100vh; }
html, button, input, select, textarea { color: #000; }
body { width: 100vw; height: 100vh; background: #fff; font: normal 14px/1.5 Ubuntu, sans-serif; color: #000; margin: 0; padding: 0; box-sizing: border-box; overflow: hidden;
    position: relative; }

hr { display: block; height: 1px; border: 0; border-top: 1px dashed #5e5e5e; margin: 1.5em 0; padding: 0; }
img { vertical-align: middle; max-width: 100% }
fieldset { border: 0; margin: 0; padding: 0; }
a { color: #000; text-decoration: none; }
a:hover { text-decoration: none; color: #000; }
p, ul, ol, h1, h2, h3, h4, h5, h6, blockquote, table, .inflow { margin: 0 0 1em 0 }


/* @Helpers
--------------------------------------------------- */
.align-center { text-align: center }
.align-right { text-align: right }
.align-left { text-align: left }
.align-justify { text-align: justify }

th.align-left,
td.align-left { text-align: left !important; }

.float-right { float: right}
.float-left { float: left }

.clear { clear: both}
.clear-left { clear: left }

.hidden,
.hide { display: none }

.nowrap { white-space: nowrap }

.bold,
.strong,
.loud { font-weight: bold; }

.italic { font-style: italic; }
.small,
small { font-size: .9em }


/*
*   main styles
*/

.header { background: url("../img/logo.png")center no-repeat; background-size: contain; text-align: right; height: 75px; padding: 30px; margin: 10px 0 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;}
    .nav-box { width: auto; display:flex; flex-direction: row; justify-content: flex-end; font-size: 24px; align-items: center; }
        .language-change { list-style: none; margin: 0 20px; padding: 0; }
            .language-change .__item { display: inline-block; vertical-align: middle; }
            .language-change .__item a { color: #f07c00; width: 35px; height: 35px; padding: 4px 0; box-sizing: border-box; }
            .language-change .__item a img { max-width: 35px;}
            .language-change .__item.active { display: none; }

.main-body-content {  width: 100vw; height: calc(100vh - 75px); margin: 0; padding: 0; box-sizing: border-box;}
/*.main-content { width: 100vw; height: calc(100vh - 75px); margin: 0; padding: 0; box-sizing: border-box; }*/
.homepage__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; }
.homepage__list .__item { width: 20%; box-sizing: border-box; }
.homepage__list .__item a { width: 100%; height: 100%; }

/*
*   SLIDER
 */
.prezentations-content-box,
.prezentation-content {width: 100%; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
    text-align: center; /* border-top: 1px solid #353739;*/ position:relative }
    .wrapper { width: 100%; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
        text-align: center; }
    .wrapper ul#tabs,
    .wrapper ul.nav-list{ width: 100%; list-style: none; margin: 0; padding: 0;}
        .wrapper ul#tabs li.__item { width: 100%; height: calc(100vh - 200px);}
.wrapper ul#tabs li.__item .system-name-top { position: absolute; top: 0; left: 0; margin: -80px 0 0 0px; background: #fff; padding: 0 10px 20px 20px; text-align: left;
    z-index: 1000;}
.wrapper ul#tabs li.__item .system-name-top:after { content: ''; border-top: 1px solid #353739; content: ''; position: absolute; width: 980px; bottom: 0; margin-bottom: 0px; z-index: -10; left: 0; margin-left: 20px; }
.wrapper ul#tabs li.__item .system-name-top h3 { font-size: 16px; margin-bottom: 0; font-weight: normal; }
.wrapper ul#tabs li.__item .system-name-top h1 { font-size: 24px; margin-bottom: 0; font-weight: normal; }

.wrapper ul#tabs li.__item img { max-height: 550px; }

.wrapper ul#tabs li.__item#tabs-1  { background-size: contain; background-position: right; padding: 70px 0 0; box-sizing: border-box; }
.wrapper ul#tabs li.__item#tabs-1 img.backgrounded { z-index: 0; max-height: 400px; margin-top: 45px; float:right;  }
.wrapper ul#tabs li.__item#tabs-1 img.logo { position:absolute; top: 0; left: 0; margin-left: 100px;  max-height: 500px; width: auto; z-index: 10; margin-top: 100px; }
.wrapper ul#tabs li.__item#tabs-1 .system-name-top { position: absolute; top: 0; left: 0; margin: -25px 0 0 0px; background: #fff; padding: 0 10px 20px 20px; text-align: left;
    z-index: 1000;}
.wrapper ul#tabs li.__item#tabs-1 .system-name-top:after { content: ''; border-top: 1px solid #353739; content: ''; position: absolute; width: 300%; bottom: 0; margin-bottom: 43px; z-index: -10; left: 0; margin-left: 250px; }
.wrapper ul#tabs li.__item#tabs-1 .system-name-top h3 { font-size: 24px; margin-bottom: 0;}
.wrapper ul#tabs li.__item#tabs-1 .system-name-top h1 { font-size: 40px; margin-bottom: 0;}

.wrapper ul.nav-list { position: absolute; bottom: 0; left: 0; display: flex; height: 30px; margin: 0 10px 50px;}
.wrapper ul.nav-list li { color: #fff; border-right: 1px solid;  color: #fff;  background: #4b4b4b}
.wrapper ul.nav-list li a { padding: 10px 9px; font-size: 12px; text-transform: uppercase; color: #fff; height: 30px; background: #4b4b4b;}
.wrapper ul.nav-list li.ui-state-hover.ui-tabs-active.ui-state-active  a,
.wrapper ul.nav-list li.ui-state-default.ui-corner-top.ui-tabs-active.ui-state-active a{ background: #fff; color: #4b4b4b; outline: 0; border-bottom: 2px solid #fff;}
button { font-size: 150%; position: absolute; bottom: 0; right: 0; border: 0; background-color: transparent; color:#4b4b4b; padding:0; cursor:pointer; width: 40px; height: 40px; margin: 0 10px 50px; }
button img { max-width: 40px; }
button.prev { margin: 0 60px 50px 0;}

button.next { right: 0px;  margin: 0 10px 50px;}

.inside-gallery-box { display: block; margin: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.inside-gallery-box #gallery { padding: 80px 0; display: flex; flex-wrap: wrap; }
.inside-gallery-box #gallery div { display: inline-block; width: 30%;  height: 180px; margin: 10px auto; }
.inside-gallery-box #gallery img { width: 100%; height: 100%; }

video { max-height: 500px; margin: auto; }



.pres-content { width: 980px; padding-top: 20px; margin: 0 auto; }