/*
Author: Piotr Nowak aka ziccoss | webideas.pl
*/

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700&subset=latin,latin-ext);
@import url('font-awesome.css');

/************************************** Globalne Ustawienia ***************************************/
* {
    box-sizing: border-box;
}

html, body
{
    height: 100%;
}

body
{
    background: #2B3362 url('../images/bg.jpg') no-repeat top center;
    font-family: "Open Sans", sans-serif;
    font-size: 12.5px;
    color: #444;
}

section
{
    margin-bottom: 2%;
}

h1, h2, h3, h4
{
    color: #2b3362;
    text-transform: uppercase;
}

h1
{
    margin: 40px 0;
    font-size: 30px;
}

h2
{
    margin-top: 20px;
    font-size: 24px;
}

h3
{
    margin: 10px 0;
    font-size: 22px;
}

h4
{
    margin-bottom: 10px;
    font-size: 17px;
}

p
{
    line-height: 20px;
    color: #444;
    margin-bottom: 0;
}

a
{
    color: #474950;
}

a:hover, a:active, a:focus
{
    color: #3F9FD6;
    text-decoration: none;
}

input[type="text"],
textarea
{
    width: 100%;
    min-height: 40px;
    padding: 10px 10px;
    border: 2px #aeaeae solid;
    font-family: "Open Sans";
    font-size: 12.5px;
}

input[type="text"]:focus,
textarea:focus
{
    border-color: #3F9FD6;
}

button
{
    padding: 7.5px 12.5px;
    border: 2px #000 solid;
    background: none;
    font-weight: 600;
    cursor: pointer;
}

label
{
    display: inline-block;
    margin-bottom: 5px;
}

/************************************** Struktura ***************************************/

.wrapper
{
    width: 100%;
}

.container
{
    margin: 0 auto;
    padding-right: 15px;
    padding-left: 15px;
}

.row
{
    margin-right: -15px;
    margin-left: -15px;
    overflow: hidden;
}

.col
{
    float: left;
    padding-right: 15px;
    padding-left: 15px;
}

.l1{width: 8.33%;}
.l2{width: 16.66%;}
.l3{width: 25%;}
.l4 {width: 33.33%;}
.l5 {width: 41.66%}
.l6{width: 50%;}
.l7{width: 58.33%;}
.l8{width: 66.66%;}
.l9{width: 75%;}
.l10{width: 83.33%;}
.l11{width: 91.66%;}
.l12{width: 100%;}

.md-offset-1
{
    margin-left: 8.33%;
}

.md-top
{
    margin-top: 6%;
}

#logo
{
    width: 380px;
    height: 159px;
    margin: 60px auto;
}

#menu 
{
    height: 30px;
    margin-top: 100px;
    text-align: right;
}
#menu li 
{
    position: relative;
    display: inline-block;
    padding: 0 20px;
    list-style: none;
    text-transform: uppercase;
}

#menu li ul 
{
    visibility: hidden;
    position: absolute; 
    top: 100%; 
    left: 0;
    padding:0;
}

#menu li ul li 
{
    float: none; 
    padding-top: 1px;
    margin-left: 0px;
    text-transform: lowercase;
}

#menu li:hover ul 
{	
    visibility: visible;
}

#menu li a, #menu li:hover li a 
{
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-shadow: 2px 2px 1px #000;
    text-decoration: none;

}
#menu li li a 
{
    width: 100px;
    margin:0;
    padding:0;
}

#menu li:hover a
{
    font-size: 16px;
    color: #fff;
    text-shadow: 2px 2px 1px #000;
    text-decoration: underline; 
}

#menu li:hover li:hover a 
{
    text-decoration: underline; 
}

.menu-toggle
{
    display: none;
    float: right;
    margin-top: 60px;
}

.menu-toggle button
{
    border: 2px #fff solid;
    color: #fff; 
}

.mobile-menu
{
    display: none;
}

.main h2
{
    color: #fff;
    text-shadow: 2px 2px #000;
}

.main p
{
    margin: 30px 0;
    font-size: 16px;
    color: #fff;
    text-align: justify;
}

.box
{
    width: 100%;
}

.box a
{
    position: relative;
    display: inline-block;
}

.box a:hover span
{
    position: absolute;
    left: 0;
    top: 0;	
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
}

.box img
{
    border: 2px #ccc solid;
}

.pricing
{
    width: 100%;
    border: 1px #6a6a6a solid;
    border-right: none;
    border-bottom: none;
    border-spacing: 0px;
    background: #eaeaea;
    line-height: 20px;
}

.pricing td
{
    padding: 10px 0;
    border-bottom: 1px #6a6a6a solid;
    border-right: 1px #6a6a6a solid;
    background: #eaeaea;
    text-align: center;
    vertical-align: middle;
}

hr
{
    height: 1px;
    margin: 40px 0;
    border: 0 none;
    background-image: linear-gradient(to right, rgba(43, 51, 98, 0), rgba(43, 51, 98, 0.75), rgba(43, 51, 98, 0));
}

.info-data
{
    font-size: 18px;
}

.info-data p
{
    position: relative;
    width: 500px;
    height: 35px;
    margin: 15px auto;
}

.info-data p span
{
    position: absolute;
    top: 10px;
    left: 50px;
    display: inline-block;
}

.form-wrapper
{
    padding: 20px 0;
    overflow: hidden;
}

.form-wrapper h3
{
    margin: 0 0 25px 0;
}

.form-group
{
    margin-bottom: 20px;
}

.form-inline .form-group
{
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

.form-control
{
    position: relative;
    width: 100%;
}

.form input,
.form textarea
{
    border: 2px #fff solid;
    background: none;
    color: #fff;
}

.form textarea
{
    height: 150px;
    resize: none;
}

.form textarea
{
    height: 160px;
    resize: none;
}

.form input::-webkit-input-placeholder,
.form textarea::-webkit-input-placeholder
{
    color: #fff;
    opacity: 1;
}
.form input::-moz-placeholder,
.form textarea::-moz-placeholder
{
    color: #fff;
    opacity: 1;
}
.form input:-ms-input-placeholder,
.form textarea:-ms-input-placeholder
{
    color: #fff;
    opacity: 1;
}
.form input:-moz-placeholder,
.form textarea:-moz-placeholder
{
    color: #fff;
    opacity: 1;
}

.form .btn
{
    border: 2px #fff solid;
    color: #fff;
    text-shadow: 2px 2px #000;
}

.field
{
    position: relative;
}

.field .error-msg
{
    position: absolute;
    top: 3px;
    right: 20px;
    display: none;
    font-size: 0.7em;
    color: red;
}

.field .field-error
{
    border: 2px red solid !important;
}

.slide-title
{
    position: absolute;
    width: 250px;
    height: 40px;
    margin-top: 210px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
}

.bordered-shadow
{
    padding: 10px;
    border: 2px #eaeaea solid;
    box-shadow: 2px 2px 3px #aaaaaa;    
}

.message {width: 99.8%; min-height: 20px; margin: 0px 0 20px 0; color: #666452;}
.message div, .message ul {padding: 10px 10px; line-height: 1.5em;}
.success {border: 1px #078f07 solid; border-radius: 4px; background: #e7fbdb;}
.information {border: 1px #a2b4ee solid; border-radius: 4px; background: #dbe3ff;}
.attention {background: #fffbcc; border: 1px #e6db55 solid; border-radius: 4px;}
.error {border: 1px #C31B00 solid; border-radius: 4px; background: #ffcccc; color: #c31b00;}

footer
{
    clear: both;
    width: 100%;
    min-height: 100px;
    padding: 20px 0;
    background: #2b3362;
    color: #fff;	
}

footer p
{
    color: #fff;
}

footer ul
{
    list-style: none;
}

footer ul li
{
    display: inline-block;
    margin-right: 10px;
}

footer a
{
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
}

footer a:hover
{
    color: #FF991E;
}

.contact-info
{
    font-size: 18px;
}

.designer-brand
{
    text-transform: lowercase;
}

.error-404
{
    color: red;
    text-align: center;
}

.disc
{
    padding-left: 20px;
    list-style-type: disc;
}

.sub-page
{
    background: url('../images/sub-page-bg.png') top center no-repeat;
}

.sub-page header
{
    height: 330px;
    /*border-bottom: 3px solid transparent;
border-image: linear-gradient(to right, #2b3362 0%, #f39b10 100%);
border-image-slice: 1;*/
}

.sub-page section
{
    min-height: 400px;
    padding-bottom: 40px;
}

.sub-page section h3
{
    margin-bottom: 30px;
    text-align: center;
}

.sub-page #logo
{
    margin: 60px 0;
}

.sub-page .field .error
{
    border: 2px red solid;
}

.sub-page .form input,
.sub-page .form textarea
{
    border: 2px #2b3362 solid;
    background: none;
    color: #2b3362;
}

.sub-page .form textarea
{
    height: 150px;
    resize: none;
}

.sub-page .form textarea
{
    height: 160px;
    resize: none;
}

.sub-page .form input::-webkit-input-placeholder,
.sub-page .form textarea::-webkit-input-placeholder
{
    color: #2b3362;
    opacity: 1;
}
.sub-page .form input::-moz-placeholder,
.sub-page .form textarea::-moz-placeholder
{
    color: #2b3362;
    opacity: 1;
}
.sub-page .form input:-ms-input-placeholder,
.sub-page .form textarea:-ms-input-placeholder
{
    color: #2b3362;
    opacity: 1;
}
.sub-page .form input:-moz-placeholder,
.sub-page .form textarea:-moz-placeholder
{
    color: #2b3362;
    opacity: 1;
}

.sub-page .form .btn
{
    border: 2px #2b3362 solid;
    color: #2b3362;
    text-shadow: 0 0;
}

/*************************************** JS Communication ***************************************/
#scrollup
{
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: none;
    width: 32px;
    height: 32px;
    border-radius: 50px;
    background: #F29A10;
    text-align: center;
    outline: 0;
}

#scrollup i
{
    margin-top: 10px;
    color: #2b3362;
}

.ajax-preloader
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: rgba(0,0,0,0.5);
}

.ajax-preloader .loader
{
    position: fixed; 
    top: 30%;
    left: 45%;
}

.bx-wrapper
{
    margin: 0 !important;
}

.bx-wrapper .bx-viewport
{
    box-shadow: none !important;
}

#flexisel-gallery a
{
    position: relative;
    display: inline-block;
}

.nbs-flexisel-inner
{
    background: none;
    border: 0 none;
}

.nbs-flexisel-item img
{
    max-width: 250px;
    max-height: 250px;  
    margin-top: 0px;
    margin-bottom: 1px;
    cursor: pointer;
}

.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right
{
    width: 32px;
    height: 32px;
}

.nbs-flexisel-nav-left
{
    background: url('../images/previous.png') no-repeat;
}

.nbs-flexisel-nav-right
{
    right: 10px;
    background: url('../images/next.png') no-repeat;    
}

.nbs-flexisel-nav-left:hover,
.nbs-flexisel-nav-right:hover
{
    opacity: 0.75;
}

@media (min-width: 770px) {
    .container
    {
        width: 750px;
    }
    /*
    .s1{width: 8.33%;}
    .s2{width: 16.66%;}
    .s3{width: 25%;}
    .s4 {width: 33.33%;}
    .s5 {width: 41.66%}
    .s6{width: 50%;}
    .s7{width: 58.33%;}
    .s8{width: 66.66%;}
    .s9{width: 75%;}
    .s10{width: 83.33%;}
    .s11{width: 91.66%;}
    .s12{width: 100%;}
    */
}

@media (min-width: 992px) {
    .container
    {
        width: 970px;
    }
    /*
    .m1{width: 8.33%;}
    .m2{width: 16.66%;}
    .m3{width: 25%;}
    .m4 {width: 33.33%;}
    .m5 {width: 41.66%}
    .m6{width: 50%;}
    .m7{width: 58.33%;}
    .m8{width: 66.66%;}
    .m9{width: 75%;}
    .m10{width: 83.33%;}
    .m11{width: 91.66%;}
    .m12{width: 100%;}
    */
}

@media (min-width: 995px) {
    .mobile-menu #menu
    {
        display: none;    
    }    
}

@media (min-width: 1200px) {
    .container
    {
        width: 1170px;
    }
    /*
    .l1{width: 8.33%;}
    .l2{width: 16.66%;}
    .l3{width: 25%;}
    .l4 {width: 33.33%;}
    .l5 {width: 41.66%}
    .l6{width: 50%;}
    .l7{width: 58.33%;}
    .l8{width: 66.66%;}
    .l9{width: 75%;}
    .l10{width: 83.33%;}
    .l11{width: 91.66%;}
    .l12{width: 100%;}
    */
}

@media (max-width: 994px) {
    #menu
    {
        display: none;
    }
    .menu-toggle
    {
        display: block;
    }
    .mobile-menu #menu
    {
        display: block;    
    }
    .mobile-menu #menu li
    {
        display: block;
        padding: 10px 0;
    }
    .box
    {
        margin-bottom: 30px;
    }
    .box h2
    {
        margin-top: 0;
    }
    .xs12
    {
        width: 100%;
    }
}

/************************************** * Helpers ***************************************/
.left
{
    float: left;
}

.right
{
    float: right;
}

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

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

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

.justify
{
    text-align: justify;
}

.v-align-top
{
    vertical-align: top;
}

.v-align-middle
{
    vertical-align: middle;
}

.vcenter
{
    display: flex;
    align-items: center;
}

.hidden
{
    display: none;
}

.hidetext
{
    text-indent: -9999px;
    font-size: 0;
    line-height: 0;
}

.center
{
    margin: 0 auto;
}

.clear
{
    clear: both;
}