@font-face {
    font-family: 'FuturaBkBTBook';
    src: url('../webfont/tt0140m/tt0140m-webfont-webfont.eot');
    src: url('../webfont/tt0140m/tt0140m-webfont-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfont/tt0140m/tt0140m-webfont-webfont.woff2') format('woff2'),
         url('../webfont/tt0140m/tt0140m-webfont-webfont.woff') format('woff'),
         url('../webfont/tt0140m/tt0140m-webfont-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FuturaMdBTMedium';
    src: url('../webfont/tt0142m/tt0142m-webfont-webfont.eot');
    src: url('../webfont/tt0142m/tt0142m-webfont-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfont/tt0142m/tt0142m-webfon-webfont.woff2') format('woff2'),
         url('../webfont/tt0142m/tt0142m-webfont-webfont.woff') format('woff'),
         url('../webfont/tt0142m/tt0142m-webfont-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FuturaTOTLigRegular';
    src: url('../webfont/FuturaTOT-Lig/futuratot-lig-webfont.eot');
    src: url('../webfont/FuturaTOT-Lig/futuratot-lig-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfont/FuturaTOT-Lig/futuratot-lig-webfont.woff2') format('woff2'),
         url('../webfont/FuturaTOT-Lig/futuratot-lig-webfont.woff') format('woff'),
         url('../webfont/FuturaTOT-Lig/futuratot-lig-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@media all and (min-width: 2500px) { /* screen size until 1200px */
    body {
        font-size: 2.9em; /* 1.5x default size */
    }
    .btn {
        font-size: 32px;
    }
}

@media all and (min-width: 1900px) { /* screen size until 1200px */
    body {
        font-size: 1.7em; /* 1.5x default size */
    }
}

@media all and (max-width: 1600px) { /* screen size until 1200px */
    body {
        font-size: 1.55em; /* 1.5x default size */
    }
}
@media all and (max-width: 1366px) { /* screen size until 1000px */
    body {
        font-size: 1.2em; /* 1.2x default size */
        }
    .service-item h4 {
        font-size: 1.7em;
    }
    .right-side h2 {
        font-size: 2.4em;
    }
    }

@media all and (max-width: 768px) { /* screen size until 500px */
    body {
        font-size: 1em; /* 0.8x default size */
        }
    .left_side {
        position: relative !important;
        height: 100%;
        z-index: 0;
    }
    .left_side img {
        width: 200px !important;
        margin: 0 auto;
        padding: 10% 0.3em 4em !important;
    }
    .left_side hr, .introduction hr, .text-center hr {
        width: 100px;
        margin-top: 0px;
    }
    .copyright {
        position: relative !important;
        bottom: 0; left: 0; right: 0; top: 15px;
        padding-bottom: 20px; 
    }
    p.adatvedelmi {
        position: relative !important;
        top:10px;
    }
    }

@media all and (max-width: 480px) { /* screen size until 500px */
    body {
        font-size: 1em; /* 0.8x default size */
        }
    .lobbi-bg,
    .design-bg,
    .kommunikacio-bg,
    .marketing-bg {
        width: 30em !important;
    }
    .left_side {
        position: relative !important;
        height: 100%;
        z-index: 0;
    }
    .left_side img {
        width: 200px !important;
        margin: 0 auto;
        padding: 10% 0.3em 4em !important;
    }
    .left_side hr, .introduction hr, .text-center hr {
        width: 100px;
        margin-top: 0px;
    }
    .copyright {
        position: relative !important;
        bottom: 0; left: 0; right: 0; top: 15px;
        padding-bottom: 20px; 
    }
    p.adatvedelmi {
        position: relative !important;
        top: 10px;
    }
}

h2 {
    font-size: 3em;
    font-family: 'FuturaBkBTBook';
    font-weight: 400;
    color: #818181;
}

h4 {
    font-size: 2em;
    font-family: 'FuturaBkBTBook';
    font-weight: 400;
    color: #515151;
    margin: 1em 0;
}

li {
    font-size: 1.143em;
    font-family: 'FuturaBkBTBook';
    color: #818181;
}

p {
    font-size: 1em;
    font-family: 'FuturaBkBTBook';
    color: #818181;
}

.service-item p {
    padding: 0 15px;
}

a {
    font-family: 'FuturaBkBTBook';
    color: #818181 !important;
}

a:visited {
    text-decoration:none;
    color: #818181 !important;
}

    

/* selection */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/* end selection */

/* loader */

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('../img/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}

/* end loader */

/* intro introduction */

.introduction {
    background: url(../img/wahed_left_side_bg.png) 0 0 repeat;
    text-align: center;
    vertical-align: middle;
    padding-bottom: 2em;
    -webkit-box-shadow: 3px 1px 10px -2px #818181;
            box-shadow: 3px 1px 10px -2px #818181;
    z-index: 1;
}

    .introduction img {
        width: 250px;
        margin: 0 auto;
        padding: 10% 0.3em 5em;
    }

        .left_side hr, .introduction hr, .text-center hr {
            width: 100px;
        }

/* end introduction */

/* left side*/

.uppercase {
    font-family: 'FuturaMdBTMedium';
    text-transform: uppercase;
    color: #6c6c6c;
}

.left_side {
    background: url(../img/wahed_left_side_bg.png) 0 0 repeat;
    position: fixed;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    -webkit-box-shadow: 3px 0 10px -2px #818181;
            box-shadow: 3px 0 10px -2px #818181;
    z-index: 10;
}

    .left_side img {
        width: 250px;
        margin: 0 auto;
        padding: 20% 0.3em 5em;
    }

    .welcome {
        padding: 0 2em 0 2em;
    }

    #contact {
        padding: 7% 0 0;
    }
        
    .copyright {
        position: absolute;
        bottom: 0; left: 0; right: 0;
    }
    p.adatvedelmi{
        position: relative !important;
        top: 10px !important;
        
    }

/* end left side */

/* parallax */

.stellar-header {
            background-size: 60%;
            background-attachment: fixed;
            background-position: 92% 68px;
            background-repeat: no-repeat;
        }

            .slogan {
                position: absolute;
                margin-left: auto;
                margin-right: auto;
                left: 0;
                right: 0; 
                top: 0;
                bottom: 0;
                background-image: url(../img/parallax/szlogen.svg);
            }

#intro { 
    background: url(../img/parallax/158.jpg) 50% 0 fixed; 
    height: auto;  
    margin: 0 auto; 
    width: 100%; 
    position: relative; 
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    padding: 100px 0;
    background-size: cover;
}

#sepBG1 { 
    background: url(../img/parallax/1.jpg) 50% 0 fixed; 
    height: auto;  
    margin: 0 auto; 
    width: 100%; 
    position: relative; 
    padding: 3.750em 0;
    background-size: cover;
}

#sepBG2 { 
    background: url(../img/parallax/2.jpg) 50% 0 fixed; 
    height: auto;  
    margin: 0 auto; 
    width: 100%; 
    position: relative; 
    padding: 3.750em 0;
    background-size: cover;
}

#sepBG3 { 
    background: url(../img/parallax/3.jpg) 50% 0 fixed; 
    height: auto;  
    margin: 0 auto; 
    width: 100%; 
    position: relative; 
    padding: 3.750em 0;
    background-size: cover;
}

#sepBG4 { 
    background: url(../img/parallax/4.jpg) 50% 0 fixed; 
    height: auto;  
    margin: 0 auto; 
    width: 100%; 
    position: relative; 
    padding: 3.750em 0;
    background-size: cover;
}

#sepBG5 { 
    background: url(../img/parallax/5.jpg) 50% 0 fixed; 
    height: auto;  
    margin: 0 auto; 
    width: 100%; 
    position: relative; 
    padding: 3.750em 0;
    background-size: cover;
}

#sepBG6 { 
    background: url(../img/parallax/6.jpg) 50% 0 fixed; 
    height: auto;  
    margin: 0 auto; 
    width: 100%; 
    position: relative; 
    padding: 3.750em 0;
    background-size: cover;
}

#footer { 
    background: url(../img/parallax/158.jpg) 50% 0 fixed; 
    height: auto;  
    margin: 0 auto; 
    width: 100%; 
    position: relative; 
    padding: 4.750em 0;
    background-size: cover;
}

/* end parallax */

/* navigation menu */

.tooltip.bottom { 
    margin-top: 20px;
}

.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-bottom-color: #bc8836;
  border-width: 0 5px 5px;
}

.tooltip-inner {
  color: #fff;
  background: #bc8836;
  font-size: 16px
}

ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 2.000em;
    list-style: none;
    z-index: 1000;
}

ul#navigation li {
    width: 3.375em;
    display:inline;
    float:left;    
}

ul#navigation li a {
    display: block;
    float: left;
    margin-top: -0.125em;
    width: 3.125em;
    height: 3.125em;
    background-color:#fff;
    background-repeat: no-repeat;
    background-position: 50% 1.750em;
    background-size: 1.875em;
    -moz-border-radius:0;
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -khtml-border-bottom-right-radius: 0;
    -khtml-border-bottom-left-radius: 0;
    text-decoration:none;
    text-align:center;
    padding-top: 4em;
    opacity: 0.5;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);  
    -webkit-box-shadow: 0px 1px 3px 0px #818181;
            box-shadow: 0px 1px 3px 0px #818181;
}

ul#navigation li a:hover{
     background-color:#fff;
     opacity: 1;
     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}

ul#navigation .top-menu a      {
    background-image: url(../img/top-menu.svg);
}

ul#navigation .marketing-menu a      {
    background-image: url(../img/marketing-menu.svg);
}

ul#navigation .kommunikacio-menu a      {
    background-image: url(../img/kommunikacio-menu.svg);
}

ul#navigation .design-menu a      {
    background-image: url(../img/design-menu.svg);
}

ul#navigation .lobbi-menu a   {
    background-image: url(../img/lobbi-menu.svg);
}

ul#navigation .partner-menu a     {
    background-image: url(../img/partner-menu.svg);
}

ul#navigation .kezdolap-menu a{
    background-image: url(../img/iroda-menu.svg);
}

/* end navigation menu */

/* right side */

.right-side {
    float: right;
    background-color: #fff;
    padding: 3em 0 4em;
}

.right-side-img {
    float: right;
    padding: 0;
}

hr {
    border: 0;
    height: 1px;
    margin-bottom: 0;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(108,108,108,0.4), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(108,108,108,0.4), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(108,108,108,0.4), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(108,108,108,0.4), rgba(0,0,0,0));
}

/* end right side */

/* services */

.service-item, .office {
    margin-top: 2em;
    padding-bottom: 2em;
    -webkit-transition: 0.25s all ease;
    -moz-transition: 0.25s all ease;
    transition: 0.25s all ease;
}

.service-item:hover, .office:hover {
-webkit-box-shadow: 1px 3px 8px 0px rgba(129, 129, 129, 0.75);
-moz-box-shadow:    1px 3px 8px 0px rgba(129, 129, 129, 0.75);
box-shadow:         1px 3px 8px 0px rgba(129, 129, 129, 0.75);
}

.intro {
    font-size: 1.125em;
    padding-top: 2em;
    padding-bottom: 1em;
}

.service-item p {
    padding-bottom: 1em;
}

    .service-item img, .office img {
      display: inline-block;
      margin-top: 20px;
      width: 3.571em;
      height: 3.571em;
      line-height: 136px;
      vertical-align: middle; 
      text-align: center;
    }

        .items img {
          display: inline-block;
          margin-top: 20px;
          margin-bottom: 20px;
          width: 50px;
          height: 50px;
        }

.service-list {
    padding-top: 3em;
    padding-bottom: 1em;
}

    .service-list p {
        padding-bottom: 1em;
    }

        .service-list img {
            width: 20px;
            padding-bottom: 1em;
        }

.service-list-bottom {
    padding-bottom: 1em;
}

    .service-list-bottom p {
        padding-bottom: 1em;
    }

        .service-list-bottom img {
            width: 20px;
            padding-bottom: 1em;
        }

#marketing-menu, #kommunikacio-menu, #design-menu, #lobbi-menu {
    position: relative;
}

.marketing-bg {
    position: absolute;
    max-width: 40em;
    overflow: auto;
    margin: auto;
    top: 0; bottom: 0; right: 0; left: 0;
    opacity: 0.1;
}

.kommunikacio-bg {
    position: absolute;
    max-width: 40em;
    overflow: auto;
    margin: auto;
    top: 0; bottom: 0; right: 0; left: 0;
    opacity: 0.1;
}

.design-bg {
    position: absolute;
    max-width: 40em;
    overflow: auto;
    margin: auto;
    top: 0; bottom: 0; right: 0; left: 0;
    opacity: 0.1;
}

.lobbi-bg {
    position: absolute;
    max-width: 40em;
    overflow: auto;
    margin: auto;
    top: 0; bottom: 0; right: 0; left: 0;
    opacity: 0.1;
}

.iroda-bg {
    position: absolute;
    max-width: 29em;
    overflow: auto;
    margin: auto;
    top: 0; bottom: 0; right: 0; left: 0;
    opacity: 0.1;
}

#marketing-menu h4,
#kommunikacio-menu h4,
#design-menu h4,
#lobbi-menu h4,
#partnerek-menu h4,
#irodak-menu h4 {
    margin-bottom: 0;
}

#marketing-menu hr,
#kommunikacio-menu hr,
#design-menu hr,
#lobbi-menu hr,
#partnerek-menu hr,
#irodak-menu hr {
    margin-top: 20px;
}

/* end services */

/* partners */

.portfolio-item img {
    width: 17.857em;
    margin: 30px 0 0;
    -webkit-transition: 0.25s all ease;
    -moz-transition: 0.25s all ease;
    transition: 0.25s all ease;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
}

.portfolio-item img:hover {
-webkit-box-shadow: 1px 3px 8px 0px rgba(129, 129, 129, 0.75);
-moz-box-shadow:    1px 3px 8px 0px rgba(129, 129, 129, 0.75);
box-shadow:         1px 3px 8px 0px rgba(129, 129, 129, 0.75);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-ms-filter: grayscale(0);
-o-filter: grayscale(0);
   filter: grayscale(0);
   filter: none;
}

/* end partners */