@charset "utf-8";

@font-face {
    font-family: 'LatoRegular';
    src: url('../style/font/lato-regular.eot');
    src: url('../style/font/lato-regular.eot?#iefix') format('embedded-opentype'),
         url('../style/font/lato-regular.woff') format('woff'),
         url('../style/font/lato-regular.ttf') format('truetype'),
         url('../style/font/lato-regular.svg#LatoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatoBold';
    src: url('../style/font/lato-bold.eot');
    src: url('../style/font/lato-bold.eot?#iefix') format('embedded-opentype'),
         url('../style/font/lato-bold.woff') format('woff'),
         url('../style/font/lato-bold.ttf') format('truetype'),
         url('../style/font/lato-bold.svg#LatoBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LatoLight';
    src: url('../style/font/lato-light.eot');
    src: url('../style/font/lato-light.eot?#iefix') format('embedded-opentype'),
         url('../style/font/lato-light.woff') format('woff'),
         url('../style/font/lato-light.ttf') format('truetype'),
         url('../style/font/lato-light.svg#LatoLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

html {
    height: 100%;
}
.logo-img {
	max-width: 200px;
}

.logo-small-img {
	max-height: 30px;
}

.km {
	font-family: 'LatoBold';
	font-size: 35px;
    text-align: center;
    line-height: 1.7em;
}

.lp {
	font-family: 'LatoBold';
	font-size: 30px;
    text-align: center;
}

.user {
	font-family: 'LatoBold';
	font-size: 20px;
    text-align: center;
}
 
.green-border {
	/* border: 2px solid darkgreen; */
    padding-top: 1rem;
} 

a {
	color: #000000;
	text-decoration: underline;
}



body {
    background-color: beige;
    min-height: 100%;
    padding: 0;
    margin: 0;
}

.mainContener {
    background-color: #ffffff;
    margin-top: 6px; 
}

.cMainContainer {
    background-color: #ffffff;
    margin-top: 6px; 
}

.menuContainer {
    position: fixed;
    margin-left: 90%;
    z-index: 10;
    top: -6px;
    text-align: right;    
}

.menubtn {
    background-color: #2a2625;    
    height: 100px;
    width: 60px;
    position: absolute;
    right: 0;
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 24px;
    height: 3px;
    background-color: #ffffff;
    margin: 4px auto;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-5px, 6px);
    transform: rotate(-45deg) translate(-5px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-4px, -5px);
    transform: rotate(45deg) translate(-4px, -5px);
}

.menubtm {
    height: 57px;
}

.menu {
    background-color: #2a2625;
    top: 66px;
    padding: 35px;    
    display: none;
    font-family: 'LatoBold';
    position: absolute;
    right: 0;
    top: 100px;
    text-align: left;
    line-height: 2em;
    font-size: 1.2em;
}

.menuHref {
    color: #ffffff;
    text-decoration: none;
}

.redMenu {
    color: red;
    text-decoration: none;
}

.redMenu:hover {
    color: #000000;
    text-decoration: none;
}

.xlMenu1, .xlMenu2, .xlMenu3 {
    display: table; 
    height: 100%; 
    width: 100%;
}

.xlMenu1 {    
    text-align: right;
}

.xlMenu2 {
    text-align: center;
}

.xlMenu3 {    
    text-align: left;
}

.xlMenuSpan {
    display: table-cell; 
    vertical-align: bottom; 
    padding-bottom: 3em;
}

.xlMenuSpanLogo {
    display: table-cell; 
    vertical-align: bottom; 
    padding-bottom: 1.4em;
    text-align: left;
}

.header {
    background-image: url('../img/p_el.png');
    background-position: right 50px;
    background-repeat: no-repeat;
}

.portfolioContainer {
    width: 95%;
    background-color: lightblue;
    height: 500px;
    margin-bottom: 2em;
}

.portfolioTitle {
    background-color: #ffffff;
    font-family: 'LatoBold';
    font-size: 1.2em;
    line-height: 2.5em;
    margin: auto;
    text-align: center;
    margin-top: 8px;    
    max-width: 440px;
}

.portfolioTitle span {
    font-family: 'LatoLight';
}

.portfolioBottomBtn {
    background-color: #2a2625;
    border-radius: 25px;
    margin: auto;
    margin-top: 385px;
    color: #ffffff;
    font-family: 'LatoRegular';
    font-size: 1.1em;
    line-height: 2.4em;
    text-align: center;
    width: 14em;
    cursor: pointer;
}

.modal, .modal-backdrop {
    position: absolute !important;
}

.aboutTitle {
    font-family: 'LatoLight'; 
    font-size: 3em; 
    color: #c3c1c2;
    padding-left: 0.2em;
}

.aboutLeftLine {
    position: absolute; 
    height: 100%; 
    border-right: 2px solid #000000; 
    z-index: 100;
}

.aboutText {
    max-width: 23em;
    margin-left: 2em;
    color: #4a403f;
}

.aboutTextSpan1 {
    font-family: 'LatoBold';
    font-size: 1em;
}

.aboutTextSpan2 {
    font-family: 'LatoRegular'; 
    font-size: 0.8em;
}

.bgImgContainer {
    background-color: #ffffff;
/*    -webkit-box-shadow: 0px 13px 30px -1px rgba(0,0,0,0.91);
    -moz-box-shadow: 0px 13px 30px -1px rgba(0,0,0,0.91);
    box-shadow: 0px 13px 30px -1px rgba(0,0,0,0.91);*/
}

.aboutLudzieImg {
    height: 600px;
    position: absolute;
    right: 0;    
}

.inputlabel {
    color: #b3b3b3;
    font-family: 'LatoLight';
    font-size: 0.7em;  
    margin-bottom: 0;
    margin-top: 1em;
}

.forminput {
    border: 0;
    border-bottom: 1px solid #b3b3b3;
    background-color: #ffffff;
    margin-bottom: 0.4em;
    font-size: 1em;
    width: 25em;
}
.mforminput {
    border: 0;
    border-bottom: 1px solid #b3b3b3;
    background-color: #ffffff;
    font-family: 'LatoRegular';
    margin-bottom: 0.4em;
    width: 100%;
}

.formtextarea {
    border: 0;
    border-bottom: 1px solid #b3b3b3;
    border-top: 1px solid #b3b3b3;
    background-color: #ffffff;
    margin-top: 0.4em;
    width: 27em;
}
.mformtextarea {
    border: 0;
    border-bottom: 1px solid #b3b3b3;
    border-top: 1px solid #b3b3b3;
    background-color: #ffffff;
    font-family: 'LatoRegular';
    margin-top: 0.4em;
    width: 100%;
}

form label.error {
    font-family: 'LatoLight';
    margin-bottom: 1em;
    font-size: 12px;
    line-height: 12px;
    color: #c0392b;
    display: block;
}

.sendbutton {
    background-color: #030943;
    font-size: 1.2em;
    line-height: 2em;
    height: 2em;
    width: 10em;
    border-radius: 20px;
    color: #ffffff;
    text-align: center;
    font-family: 'LatoRegular';
    margin-top: 1em;
    cursor: pointer;
}
.msendbutton {
    background-color: #730000;
    font-size: 1em;
    line-height: 2.4em;
    height: 2.4em;
    width: 8em;
    border-radius: 30px;
    color: #ffffff;
    text-align: center;
    font-family: 'LatoRegular';
    margin-top: 2em;
    cursor: pointer;
}

#successm, #errorm {
    display:none;
}

#successm span {
    color:#006400;
    padding-left: 2em;
}

#errorm span {
    color:#c0392b;
    padding-left: 2em;
}

#success, #error {
    display:none;
}

#success span {
    color:#006400;
    padding-left: 2em;
}

#error span {
    color:#c0392b;
    padding-left: 2em;
}

input.error {
    border: 1px dotted red;
}

textarea.error {
    border: 1px dotted red;
}


table.redTable {
  border: 2px solid #A40808;
  background-color: #EEE7DB;
  text-align: center;
  border-collapse: collapse;
}
table.redTable td, table.redTable th {
  border: 1px solid #AAAAAA;
  padding: 3px 2px;
}
table.redTable tbody td {
  font-size: 13px;
}
table.redTable tr:nth-child(even) {
  background: #F5C8BF;
}
table.redTable thead {
    background: #E86868;
    font-size: 20px;
    font-weight: bold;
}
table.redTable thead th {
  font-size: 19px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  border-left: 2px solid #A40808;
}
table.redTable thead th:first-child {
  border-left: none;
}

table.redTable tfoot {
  font-size: 13px;
  font-weight: bold;
  color: #FFFFFF;
  background: #A40808;
}
table.redTable tfoot td {
  font-size: 13px;
}
table.redTable tfoot .links {
  text-align: right;
}
table.redTable tfoot .links a{
  display: inline-block;
  background: #FFFFFF;
  color: #A40808;
  padding: 2px 8px;
  border-radius: 5px;
}
.tableField {
    color: #000000;
    cursor: pointer;
    text-decoration: none;
}


@media only screen and (min-width: 768px) {
 
    .mainContener {
        background-image: url('../img/ludzie_white.jpg'); 
        background-position: right bottom; 
        background-repeat: no-repeat; 
        background-size: auto 90%;
    }
    
    .cMainContainer {
        background-image: url('../img/c_ludzie.jpg'); 
        background-position: right bottom; 
        background-repeat: no-repeat; 
        background-size: auto 80%;
    }
    
    .aboutTitle {
        padding-left: 2em;
        font-size: 4em;
    }
    
    .aboutLeftLine {
        height: 17.5em;
    }
    
    .aboutText {
        max-width: 40em;
    }
    
    .aboutTextSpan1 {
        font-size: 1.5em;
    }
    
    .aboutTextSpan2 {
        font-size: 1em;
    }
    
    .aboutUnderText {
        height: 3em;
    }
    
    .xlMenuSpanLogo {
        text-align: right;
    }
}

@media only screen and (min-width: 1367px) {
 
    .aboutLeftLine {
        height: 30em;
    }
    
    .aboutUnderText {
        height: 13em;
    }
    
    .kontaktUpMargin {
        height: 5em;
    }
    
    .kontaktBottomMargin {
        height: 3em;
    }
    
}