@charset "UTF-8";

/* Layout (global rules for all sizes) */

/* all pages */

#wrapper {
    margin:auto;
    max-width: 1024px;
}

header {
    border-bottom: 1px solid black;
}

#header-of-header {
    position: relative;
    text-align: center;
    width: 100%;
    display: block;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

.header-of-header-blocks {
    display: inline-block;
    width: 25%;
    height: 20px;
    margin: 0px;
    padding: 0px;
    padding-top: 2px;
    border: 0px;
    color: white;
}
#h-o-h-one {
    background-color: #268815;
}

#h-o-h-two {
    background-color: #006666;
}

#h-o-h-three {
    background-color: #990000;
}
#h-o-h-four {
    background-color: #ff6600;
}

#fayart_logo {
    position: relative;
    display: block;
    width: 100%;
    height: 115px;
    text-align: justify;
    margin:0px;
    padding:0px;
}
.fayart_logo_letters {
    position: relative;
    display:inline-block;
    height: 115px;
    line-height:110px;
    font-size: 120px;
    margin:0px;
    padding: 0px;
}

#fayart_logo:after {
    content: '';
    width: 100%;
    display: inline-block;
}

#fayart_compname {
    position: relative;
    display: block;
    width: calc(100% - 30px);
    height: 33px;
    text-align: justify;
    margin: 0px;
    padding: 0px;
    margin-left: 10px;
}

.fayart_compname_letters {
    position: relative;
    display:inline-block;
    height: 25px;
    font-size: 25px;
    line-height: 25px;
    margin:0px;
    padding: 0px;
}

#fayart_compname:after {
    content: '';
    width: 100%;
    display: inline-block;
}

nav {
    position: relative;
    width: calc(100% - 20px);
    height: 30px; 
    text-align: justify;
    display: block;
    margin:0px;
    margin-top:3px;
    padding-left: 10px;
    padding-right: 10px;
}

nav a {
    width: 25px;
    color: #000000;
    display: inline-box;
    text-decoration: none;
    margin:0px;
    padding:0px; 
}

.nav-line {
    display: inline;
}

nav:after {
    content: '';
    width: 100%;
    display: inline-block;
}

nav a:hover {
    color: #00773C;
}

/* individual pages*/

/* main page */

#mainpagepic {
    position:relative;
    width: 100%;
    height: calc(100vh - 250px);
    background-image: url(../images/mainpage_large.jpg); 
    background-size: 1024px auto;
    background-repeat: no-repeat; 
}

/* elérhetőségek */

#contactOuterWrapper {
    width: 100%;
    display:block;
    margin:0;
    padding:0;
    border:0;
}
#contactTextBox {
    position: relative;
    height: calc(100vh - 250px);
    width: 170px;  
    display:inline-block; 
    float: left;
}
#contactWrapper {
    width:calc( 100% - 10px);
    height: 100%;
    position: relative;
    margin-left: 10px;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
}

#fayartMaps {
    height: calc(100vh - 250px);
    width: calc(100% - 170px);  
    display:inline-block;
}
#terenymap {
    position: relative;
    height: calc(100vh - 250px);
    width: calc(100% * 0.55);  
    display:inline-block;
}
#tereny {
    position: absolute;
    height: calc(100vh - 250px);
    width: 100%;  
    z-index: 0;
}
#terenyLabel {
    position: absolute;
    margin-top:20px;
    right: 20px;
    color: white;
    z-index: 1;   
}
#budapestmap {
    position: relative;
    height: calc(100vh - 250px);
    width: calc(100% * 0.44); 
    display:inline-block;
}
#budapest {
    position: absolute;
    height: calc(100vh - 250px);
    width: 100% ; 
    z-index: 0;
}
#budapestLabel {
    position: absolute;
    margin-top:20px;
    margin-left:20px;
    color: black;
    z-index: 1;   
}

/* bemutatkozás */

#whoweareWrapper {
    position: relative;
    width: 100%;
    height: 230px;
    display: block;
    margin: 0;
    padding: 0;
}

#whoweare-pic1 {
    position:relative;
    width: calc(100% * 0.33 - 310px * 0.33);
    height: 100%;
    display: block;
    float: left;
    background-image: url(../images/bemutatkozas_kep1_large.jpg);
    background-repeat: no-repeat;
    background-size: 236px auto;
    background-position: center;
}

#whoweare-text {
    position: relative;
    width: 250px;
    height: 100%;
    padding: 0px 30px 0px 30px;
    //background-color: #ff6600;
    display: block;
    float: left;
}

#whoweare-pic2 {
    position:relative;
    width: calc(100% * 0.67 - 310px * 0.67);
    height: 100%;
    display: block;
    float: left;
    background-image: url(../images/bemutatkozas_kep2_large.jpg);
    background-repeat: no-repeat;
    background-size: 465px auto;
    background-position: center;
}

/* munkatarsak */

#munkatarsak_bigpic {
    position: relative;
    display: block;
    float:left;
    width: 180px;
    height: 330px;
    background-image: url(../images/munkatarsak_haz_large.jpg);
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin:0px;
    padding:0px;
    margin-left: 10px;
    margin-right: 10px;
}

#munkatarsak_terviroda_wrapper {
    position: relative;
    display: block;
    margin: 0px;
    padding: 0px;
    float: left;
    width: calc(100% - 210px - 155px);
}

#munkatarsak_terviroda_title {
    position: relative;
    width: 100%;
    height: 20px;
    display: block;
}

#munkatarsak_fd_wrapper {
    position: relative;
    max-width: calc(100% - 320px);
    min-width: 175px;
    width: calc(40% - 10px);
    height: 310px;
    display:block;
    float: left;
    margin-right: 10px;
}

#munkatarsak_fd_text {
    position: relative;
    display: block;
    width: 100%;
    height: calc(100% - 160px);
    margin: 0;
    padding: 0;
    line-height: 1.25em;
}

#munkatarsak_fd_pic {
    position: absolute;
    bottom: 0px;
    display: block;
    width: 100%;
    height: 150px;
    background-image: url(../images/munkatarsak_fd_large.jpg);
    background-repeat: no-repeat;
    background-position-y: center;
    background-size: auto 100%;
}

#munkatarsak_fp_wrapper {
    position: relative;
    width: 55%;
    min-width: 280px;
    height: 310px;
    display:block;
    float: left;
}
#munkatarsak_fp_pic {
    position: relative;
    display:block;
    float: right;
    width: calc(100% - 180px);
    height: 120px;
    margin-right:20px;
    background-image: url(../images/munkatarsak_fp_large.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
}

#munkatarsak_fp_name{
    position: relative;
    display: block;
    float: left;
    width: 160px;
    margin: 0;
    padding: 0;
    line-height: 1.25em;
}

#munkatarsak_fp_licences {
    position: absolute;
    display: block;
    float: left;
    width: 285px;
    margin: 0;
    padding: 0;
    line-height: 1.25em;
    top: 80px;
}

#munkatarsak_fj_wrapper {
    position: relative;
    display: block;
    margin: 0px;
    padding: 0px;
    float: left;
    width: 155px;
    height: 330px;
}

#munkatarsak_title {
    height: 20px;
}

#munkatarsak_fj_pic {
    position: absolute;
    right: 0px;
    bottom: 0px;
    height: 200px;
    width: 100%;
    background-image: url(../images/munkatarsak_fj_large.jpg);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: right bottom;
}

/* tevekenysegek */

#tevekenysegekWrapper {
    position: relative;
    width: 100%;
    height: 200px;
    display: block;
    margin: 0;
    padding: 0;
}

#tevekenysegek-pic1 {
    position:relative;
    width: calc(100% * 0.65 - 410px * 0.65);
    height: 100%;
    display: block;
    float: left;
    background-image: url(../images/tevekenysegek_kep1_large.jpg);
    background-repeat: no-repeat;
    background-size: auto 120%;
    background-position: center left;
}

.tevekenysegk_title {
    height: 2em;
    padding:0;
    margin:0;
}

#tevekenysegek-text {
    position: relative;
    width: 350px;
    height: 100%;
    padding: 0px 30px 0px 30px;
    //background-color: #ff6600;
    display: block;
    float: left;
}

#tevekenysegek-pic2 {
    position:relative;
    width: calc(100% * 0.35 - 410px * 0.35);
    height: 100%;
    display: block;
    float: left;
    background-image: url(../images/tevekenysegek_kep2_large.jpg);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: right;
}

/* referenciák */

#ref-picsidebar {
    position: relative;
    display: block;
    float: left;
    width: calc(35% - 15px);
    background-color: #aaaaaa;
}

.refpics {
    position: relative;
    display: block;
    float:left;
    width: 100%;
    background-repeat: no-repeat;
}
#ref-pic01 {
    height: 200px;
    background-image: url(../images/referenciak-pic1_large.jpg);
    background-size: 100% auto;
    background-position: center center;
}

#ref-pic02 {
    height: 200px;
    background-image: url(../images/referenciak-pic2_large.jpg);
    background-size: 100% auto;
    background-position: center center;
}

#ref-pic03 {
    height: 200px;
    background-image: url(../images/referenciak-pic3_large.jpg);
    background-size: 100% auto;
    background-position: center center;
}

#ref-pic04 {
    height: 200px;
    background-image: url(../images/referenciak-pic4_large.jpg);
    background-size: 100% auto;
    background-position: center center;
}

#ref-pic05 {
    height: 200px;
    background-image: url(../images/referenciak-pic5_large.jpg);
    background-size: 100% auto;
    background-position: center center;
}

#ref-pic06 {
    height: 200px;
    background-image: url(../images/referenciak-pic6_large.jpg);
    background-size: 100% auto;
    background-position: center center;
}

#ref-pic07 {
    height: 200px;
    background-image: url(../images/referenciak-pic7-8-9-10_large.jpg);
    background-size: 100% auto;
    background-position: center center;
}

#ref-pic08 {
    height: 200px;
    background-image: url(../images/referenciak-pic11_large.jpg);
    background-size: 100% auto;
    background-position: center center;
}

#ref-pic09 {
    height: 200px;
    background-image: url(../images/referenciak-pic12_large.jpg);
    background-size: 100% auto;
    background-position: center center;
}

#ref-pic10 {
    height: 200px;
    background-image: url(../images/referenciak-pic13_large.jpg);
    background-size: 100% auto;
    background-position: center center;
}

#ref-pic11 {
    height: 200px;
    background-image: url(../images/referenciak-pic14_large.jpg);
    background-size: 100% auto;
    background-position: center center;
}

#reftext.refpics{
  display: none;
  height: 0px;
}

#reftext {
    position: relative;
    display: block;
    float: right;
    width: 65%;
    font-size: 12px;
}

.refyear {
    position: relative;
    margin: 0px;
    margin-bottom: 1em;
    width: 100%;
    float: left;
}

/* fejlesztes alatt */

#uc_fjpic {
    position: relative;
    display: block;
    float: left;
    width: 50%;
    height: 384px;
    background-image: url(../images/fejlesztesalatt_pic1_large.jpg);
    background-position: center top;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

#uc_text {
    position: absolute;
    display: block;
    text-align: right;
    color: #ffffff;
    top: calc(384 / 512 * 50vw - 40px);
    right: 10px;
}

#uc_gyikpic {
    position: relative;
    display: block;
    float: right;
    width: 50%;
    height: 384px;
    background-image: url(../images/fejlesztesalatt_pic2_large.jpg);
    background-position: center top;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

/* impresszum */

#imprWrapper {
    position: relative;
    width: 100%;
    height: 230px;
    display: block;
    margin: 0;
    padding: 0;
}

#imprWrapper a {
    text-decoration: none;
    color: #000000;
    background-color: #ffffff;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}

#impr-pic1 {
    position:relative;
    width: calc(100% * 0.33 - 450px * 0.33);
    height: 100%;
    display: block;
    float: left;
    background-image: url(../images/bemutatkozas_kep1_large.jpg);
    background-repeat: no-repeat;
    background-size: 236px auto;
    background-position: center;
}

#impr-text {
    position: relative;
    width: 390px;
    height: 100%;
    padding: 0px 30px 0px 30px;
    //background-color: #ff6600;
    display: block;
    float: left;
}

#impr-pic2 {
    position:relative;
    width: calc(100% * 0.67 - 450px * 0.67);
    height: 100%;
    display: block;
    float: left;
    background-image: url(../images/bemutatkozas_kep2_large.jpg);
    background-repeat: no-repeat;
    background-size: 465px auto;
    background-position: center;
}


.impr-tbl {
    display: table;
    border-spacing: 4px;
    border-collapse: separate;
    line-height: 1.25em;
}
.impr-row {
    display: table-row;
}
.impr-col1 {
    display: table-cell;
    width: 150px;

}
.impr-col2 {
    display: table-cell;
}