body {
     font-family: 'Source Sans Pro', sans-serif;
     background-color: #f2f2f2;
     color: #191919;
 }

#menu {
    background-image: url("assets/images/szigetibackground.jpg");
    height: 100%;
    width: 100%;
    color: white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#smart-menu{
    display: none;
}
.logo{
    width: 9%;
    min-width: 80px;
    padding-left: 7%;

}
.responsive-menu{
    display: none;
}
.mobile-nav .logo{
    display: none;
}

a:link {
    color: white;
}

a:visited {
    color: white;
}

a:active {
    color: white;
}
a {
    text-decoration: none;
}

.navigation {
    width: 95%;
    padding-top: 50px;
    position: relative;
   }

.menu-items {
    display:inline-block;
    float: right;
    padding-top: 15px;
 }

.menu-item {
    padding: 8px 8px 8px 8px;
}

.other {
    display: inline-block;
    animation-duration: 3s;
    animation-delay: 0.15s;
    animation-iteration-count: 1;
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: 0.15s;
    -webkit-animation-iteration-count: 1;
    width: 100%;
    padding-top: 10%;
}

.animated {
    display: inline-block;
    padding-top: 170px;
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: 0.15s;
    -webkit-animation-iteration-count: 1;
}
#decoration-vertical-line-orange{
    width: 4px;
    height: 25px;
    background-color: red;
    float: left;
    display: inline-block;
    margin-right: 20px;
    }

#decoration-parallel-line-white{
    float: right;
    width: 18%;
    height: 2px;
    background-color: white;
    margin: 190px 0 0 0;
    display: inline-block;
}

.cnc-title {
    font-size: 40px;
    padding: 0 0 30px 300px;
    font-family: 'Oxygen', sans-serif;
    font-weight: 300;
    text-transform: uppercase;

    }

#orange-cnc-text2 {
    padding: 0 0 0 280px;
}
.cnc-text {
    padding: 0 0 7px 0;
    font-style: italic;
    font-size: 25px;
}
#test {
    display: none;
}
/*----------------------------------mouse-animation---------------------*/


#down{
    position: absolute;
    right: 50%;
    bottom: 5%;
}

span
{
    display: block;
    width: 2vh;
    height: 2vh;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);

    border-right: 2px solid red;
    border-bottom: 2px solid red;
    margin: 0 0 3px 6px;
}

.one
{
    margin-top: 6px;
}

.one, .two, .three
{
    -webkit-animation: mouse-scroll 1s infinite;
    -moz-animation: mouse-scroll 1s infinite;
}

.one
{
    -webkit-animation-delay: .1s;
    -moz-animation-delay: .1s;
    -webkit-animation-direction: alternate;
}

.two
{
    -webkit-animation-delay: .2s;
    -moz-animation-delay: .2s;
    -webkit-animation-direction: alternate;
}

.three
{
    -webkit-animation-delay: .3s;
    -moz-animation-delay: .3s;
    -webkit-animation-direction: alternate;
}




@-webkit-keyframes mouse-scroll {

    0%   { opacity: 0;}
    50%  { opacity: .5;}
    100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {

    0%   { opacity: 0; }
    50%  { opacity: .5; }
    100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {

    0%   { opacity: 0; }
    50%  { opacity: .5; }
    100% { opacity: 1; }
}
@keyframes mouse-scroll {

    0%   { opacity: 0; }
    50%  { opacity: .5; }
    100% { opacity: 1; }
}


/*-----------------------------------------------*/
/*-----------------------------------------------------mini-menu--------------------------------------*/
@media only screen and (max-width: 767px) and (min-width: 210px) {
    .mobile-nav {
        background-color: #191919;
        z-index: 1000;
        width: 100%;
    }

    .menu-btn {
        display: inline-block;
        position: fixed;
        top: 20px;
        right: 15px;
    }

    .menu-btn div {
        padding-right: 8px;
        vertical-align: middle;
        z-index: 99;
        position: relative;
        background-color: #ffffff;
    }

    .menu-btn .hamburger {
        display: block;
        width: 19px;
        height: 3px;
        margin: 4px 0;
        background: #ffffff;
        z-index: 99;
    }

    .responsive-menu {
        display: none;
        position: fixed;
        background-color: #191919;
        z-index: 100;
        width: 100%;
        text-align: center;
        line-height: 2.2;
        padding: 20vh 0 20vh 0;
        text-transform: uppercase;
    }

    .gray-menu {
        width: 100%;
        height: 70px;
        background-color: #191919;
        position: fixed;
        z-index: 1000;
    }

    .expand {
        display: block !important;
    }
}
/*-----------------------------------------------------------------------------*/

#home-contact {
    float: right;
    padding: 200px 60px 0 0;

}

.header-contact {
    padding: 7px 0 0 0;
}
#circles-section{
     width: 1010px;
    margin: 0 auto;
    padding-bottom: 100px;
}
.circlegroup{
    display: inline-block;
    text-align: center;
    font-weight: 600;
    font-style: italic;
    font-size: 1em;
    text-transform: uppercase;
    }
.icon{
    width: 130px;
    float: left;
    padding: 60px 60px 20px 60px;
    cursor: pointer;
}
.orangeline-icontitle{
    width: auto;
}
.witheline-icontext{
    max-width: 1200px;
}
.decoration-parallel-line-orange{
    width: 10%;
    height: 2px;
    background-color: red;
    float: left;
    display: inline-block;
    margin: 12px 20px 0 0;
    }

.same-icon-texts {
    text-align: center;
    display: inline-block;
}
h5 {
    font-weight: 500;
}

.same-icon-text{
    font-family: 'Oxygen', sans-serif;
    font-size: 1.7em;
    font-weight: 500;
    text-transform: uppercase;
    padding-bottom: 15px;

}

#same-icon-text-under{
    font-family: 'Oxygen', sans-serif;
    font-size: 1.1em;
    font-weight: 500;
    text-transform: uppercase;
    padding:0 0 30px 0;
}

.text-left-right-listing{
    width: 90%;
}

.listing{
    width: auto;
    padding-left: 150px;
    line-height: 1.3;
}
p{
    line-height: 1.3;
    padding-top: 15px;
}
.foot{
    display: inline-block;
}


.text-left-listing{
    margin-left: 25px;
}

.text-listing{
    padding: 10px 0 50px 0;
    font-weight: 600;
}
.responsive-text{
}

.left-listing{
    font-style: italic;
    display: inline-block;
    margin: 20px 0 200px 30px;
}

.right-listing{
    display: inline-block;
    width: 550px;
    text-align: justify;
    float: right;

}
.right-listing-title{
    text-transform: uppercase;
    font-size: medium;
    font-style: oblique;
    font-weight: 700;
}

.right-listing-text{
    padding: 10px 0 20px 30px;
    font-style: italic;
    width: 80%;
}
.left-listing-title{
    text-transform: uppercase;
    font-size: medium;
    font-style: oblique;
    font-weight: 700;
}

#footer-container{
    margin: 120px 0 0 0;
    background-color: lightgray;
    height: 60px;
}
#footer-main{
    padding-top: 10px;
    font-size: small;
    font-weight: 500;
    text-align: center;



    /*-------------------------------COMPANY---------------------------*/
}

h3{
    font-weight: 600;
}


#company-main{
    position: relative;
    height: 100vh;
}

#company-menu {
    background-image: url("assets/images/company.jpg");
    height: 100%;
    width: 100%;
    color: white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.stamp{
    display: inline-block;
}

#about{
    width: 100%;
}
#company-text{
    width: 85%;
    padding: 40px 40px;
}
#company-listing{
    padding: 10px 0 20px 30px;
    font-style: italic;
    width: 80%;

    line-height: 1.3em;
}
#company-listing ul li{
    padding-top: 20px;
    max-width: 1315px;
}
#company-decor-line{
    width: 20%;
    background: red;
    height: 2px;
    margin-bottom: 30px;
}


/*---------------------------------------   CSS    ----------------------------------------------------*/

#stamps{
    margin: 20px;
}

.grid {
    position: relative;
    margin: 0 auto;
    padding: 1em 0 4em;
    max-width: 1100px;
    list-style: none;
    text-align: center;
}

/* Common style */
.grid figure {
    position: relative;
    float: left;
    overflow: hidden;
    margin: 15px 1.5%;
    width: 330px;
    height: 230px;
    text-align: center;
    cursor: default;
}

.grid figure img {
    position: relative;
    display: block;
    min-height: 230px;
    max-width: 330px;
}

.grid figure figcaption {
    padding: 2em;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
    pointer-events: none;
}




.grid figure p {
    letter-spacing: 1px;
    font-size: 90%;
}

figure.effect-sadie figcaption::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(top, rgba(229,0,0,0) 0%, rgba(229,0,0,0.8) 100%);
    background: linear-gradient(to bottom, rgba(229,0,0,0) 0%, rgba(229,0,0,0.8) 100%);
    content: '';
    opacity: 0;
    -webkit-transform: translate3d(0,50%,0);
    transform: translate3d(0,50%,0);
}



figure.effect-sadie figcaption::before,
figure.effect-sadie p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-sadie p {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2em;
    width: 260px;
    opacity: 0;
    -webkit-transform: translate3d(0,10px,0);
    transform: translate3d(0,10px,0);
}

figure.effect-sadie:hover h2 {
    color: #fff;
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
    transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
}

figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}























/*-------------------------DEVELOPMENT----------------------------*/

#development-container{
    position: relative;
    height: 100vh;
}

#develpoment-main{
    position: relative;
    height: 100vh;
}

#dev-menu {
    background-image: url("assets/images/dev.jpg");
    height: 100%;
    width: 100%;
    color: white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.dev-main-container {
    display: inline-block;

}
.dev-menu-items {
    display:inline-block;
    float: right;
    padding-top: 15px;
}

.dev-menu-items a:link {
    color: red;
}

.dev-menu-items a:visited {
    color: red;
}

.dev-menu-items a:active {
    color: red;
}
.dev-menu-items a {
    text-decoration: none;
}

.dev-menu-items .dev-menu-item {
    padding: 8px 8px 8px 8px;
   }

.dev-parallel-line-gray{
    background-color:rgba(31,31,31,0.5);
    width: 55%;
    height: 200px;
    display: inline-block;
    float: left;
    max-width: 900px;
}

.dev-decoration-and-text{
    display: inline-block;
    }

.dev-title {
    font-size: 40px;
    font-family: 'Oxygen', sans-serif;
    font-weight: 300;
    margin: 30px 0 30px 150px;
    text-transform: uppercase;
}

.dev-text{
    margin: 0 25px 0 150px;
    line-height: 1.3;
    font-weight: 300;
    }

.decoration-parallel-line-red{
    width: 100px;
    height: 2px;
    background-color: red;
    display: inline-block;
    margin-top: 50px;
    float: left;
}

.float-fix:after {
    content: '';
    display: block;
    clear: both;
}
#dev-listing{
    margin: 0 auto;
    width: 1120px;
}

.checkbox{
    width: 330px;
    font-size: medium;
    display: inline-block;
    line-height: 1.3;
    padding-left: 20px;
    float: left;
    margin: 30px 20px 50px 0;
}

.number{
    width: 40px;
    float: left;
}
.numbers-title{
    font-size: 15px;
    padding: 10px 0 0 20px;
    display: inline-block;
    color: #191919;
}

.white-text-decoration{
    width: 5px;
    height: 110px;
    background-color: white;
    float: left;
    margin: 30px 10px 0 0;
   }
.numbers-content{
    padding-top: 30px;
    text-align: justify;
    color: #191919;
 }
.line-and-text{
    margin-top: 15px;
    width: 90%;
}

#hope{
    margin-top: 5%;
}

hr {
    margin: 50px 0;
}

.card {
    -webkit-transition: all .4s ease-out;
    transition: all .4s ease-out;
    width: 350px;
    height: 195px;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 600px;
    perspective: 600px;
}

.checkbox:hover .card {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.front,
.back {

    position: absolute;
    top: 0;
    left: 0;
    width: 350px;
    height: 195px;
    color: white;
    font-weight: bold;
    float: none;
    z-index: 900;
    -webkit-transform: rotateX(0) rotateY(0);
    transform: rotateX(0) rotateY(0);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}


.front {
    background-color: #f2f2f2;
    z-index: 2;
}

.back {
    z-index: 1;
    background-color: #7f8c8d;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}


#mobile-dev{
    display: none;
}


/*----------------------CONTACT---------------------------*/





#contact-menu {
    background-image: url("assets/images/contact.jpg");
     height: 100%;
    width: 100%;
    color: white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.full-main {
    display: inline-block;
    width:100%;
}
.contact-parallel-line-gray{
    background-color:rgba(31,31,31,0.5);
    width: 55%;
    height: 270px;
    display: inline-block;
    float: left;
    max-width: 900px;
}


#contact-title {
    font-size: 40px;
    font-family: 'Oxygen', sans-serif;
    font-weight: 300;
    margin: 30px 0 20px 150px;
    text-transform: uppercase;
}
#join{
    font-size: 25px;
    margin: 0 25px 0 150px;
    line-height: 1.3;
    font-weight: 500;
}

#contact-text{
    margin: 10px 25px 0 150px;
    line-height: 1.3;
    font-weight: 300;
   }
#contact-contact{
    font-style: oblique;
    margin: 10px 25px 0 150px;
    line-height: 2em;
    font-weight: 400;
    font-size: 19px;
}

#contact-parallel-line-red{
    width: 100px;
    height: 2px;
    background-color: red;
    display: inline-block;
    margin-top: 50px;
    float: left;
}

#contact-content{
    line-height: 2;
    display: inline-block;
    margin: 0 auto;
    position: relative;
    width: 100%;
}
#information {
    display: inline-block;
    position: relative;
    width: 300px;
    padding: 6% 15% 0 10%;
    float: left;
}

#map{
    display: inline-block;
    width: 40%;
    height: 400px;
    padding-top: 5%;
}

.menu-items .menu-item{
    text-decoration: none;
    position: relative;
}
.menu-items .menu-item:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    border-bottom: 2px solid red;
    transition: 0.4s;
}
.menu-items .menu-item:hover:after {
    width: 100%;
}

.dev-menu-items .dev-menu-item{
    text-decoration: none;
    position: relative;
}
.dev-menu-items .dev-menu-item:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    border-bottom: 2px solid white;
    transition: 0.4s;
}
.dev-menu-items .dev-menu-item:hover:after {
    width: 100%;
}

h4{
    line-height: 1.3;
    font-weight: 400;
}

.plant-site{
    font-weight: bold;
}




/*------------------------------RESZPONZÍV----------------------------*/





@media only screen and (max-width: 1150px) and (min-width: 940px) {

    #test {
        display: none;
    }
.mobile-nav{
    display: none;
}
    .cnc-title {
        font-size: 35px;
        padding: 0 0 30px 200px;
        font-family: 'Oxygen', sans-serif;
        font-weight: 300;
    }
    .animated {
        display: inline-block;
        padding-top: 140px;
        -webkit-animation-duration: 3s;
        -webkit-animation-delay: 0.15s;
        -webkit-animation-iteration-count: 1;
    }
    #decoration-parallel-line-white {
        float: right;
        width: 18%;
        height: 2px;
        background-color: white;
        margin: 160px 0 0 0;
        display: inline-block;
    }

    #orange-cnc-text2 {
        padding: 0 0 0 200px;
    }

    .cnc-text {
        font-size: 20px;
    }

    #decoration-parallel-line-white {
        width: 18%;
    }

    #circles-section {
        width: 890px;
        margin: 0 auto;
        padding-bottom: 100px;
    }

    .icon {
        width: 100px;
        float: left;
        padding: 60px 60px 20px 60px;
        cursor: pointer;
    }

    .circlegroup {
        display: inline-block;
        text-align: center;
        font-weight: 600;
        font-style: italic;
        font-size: 1em;
        text-transform: uppercase;
    }

    .left-listing {
        font-style: italic;
        display: inline-block;
        margin: 20px 0 20px 30px;
    }

    .right-listing {
        display: inline-block;
        width: auto;
        text-align: justify;
        float: none;
    }

    /*--------------------------- company reszponzív ------------------*/

    .grid {
        position: relative;
        margin: 0 auto;
        padding: 1em 0 4em;
        max-width: 745px;
        list-style: none;
        text-align: center;
    }

    .grid figure {
        position: relative;
        float: left;
        overflow: hidden;
        margin: 15px 1.5%;
        width: 350px;
        height: 250px;
        text-align: center;
        cursor: default;
    }
    .grid figure img {
        position: relative;
        display: block;
        min-height: 250px;
        max-width: 350px;
    }
    figure.effect-sadie p {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 2em;
        width: 260px;
        opacity: 0;
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    /* ---------------- development-reszponzív -----------------------*/
    .dev-parallel-line-gray{
        width: 65%;
    }
    .dev-title {
        font-size: 25px;
        font-family: 'Oxygen', sans-serif;
        font-weight: 300;
        margin: 30px 0 30px 150px;
        text-transform: uppercase;
    }

    .dev-text {
        margin: 0 25px 0 150px;
        line-height: 1.3;
        font-weight: 300;
    }
    #dev-listing {
        margin: 0 auto;
        width: 900px;
    }
    .checkbox {
        width: 270px;
        font-size: medium;
        display: inline-block;
        line-height: 1.1;
        padding-left: 20px;
        float: left;
        margin: 25px 10px 50px 0;
    }
    .card {
        -webkit-transition: all .4s ease-out;
        transition: all .4s ease-out;
        width: 270px;
        height: 150px;
        position: relative;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;}

    .front {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 270px;
        height: 150px;
        color: white;
        font-weight: bold;
    }
    .back {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 270px;
        height: 150px;
        color: white;
        font-weight: bold;
    }
    .number {
        width: 30px;
        float: left;
    }
    .numbers-title {
        width: 200px;
        font-size: 14px;
        padding: 10px 0 0 15px;
        display: inline-block;
        color: #191919;
    }

    .line-and-text {
        margin-top: 15px;
        font-size: 80%;
    }
    .white-text-decoration {
        width: 5px;
        height: 90px;
        background-color: white;
        float: left;
        margin: 10px 10px 0 0;
    }
    .numbers-content {
        padding-top: 10px;
        text-align: justify;
        color: #191919;
    }
.pictures{
    width:270px;
}

    #mobile-dev{
        display: none;
    }

/*----------------- contact  reszponzív  ---------------------*/

    #contact-title{
        font-size: 25px;
        margin: 38px 0 20px 150px;
    }
    .contact-parallel-line-gray{
       width: 65%;
    }
}














/*--------------------reszponzív kicsi-----------------------*/






@media only screen and (max-width: 939px) and (min-width: 768px) {
    #test {
        display: none;
    }
.mobile-nav{
    display: none;
}
    .cnc-title {
        font-size: 25px;
        padding: 0 0 30px 200px;
        font-family: 'Oxygen', sans-serif;
        font-weight: 300;
    }
    .animated {
        display: inline-block;
        padding-top: 150px;
        -webkit-animation-duration: 3s;
        -webkit-animation-delay: 0.15s;
        -webkit-animation-iteration-count: 1;
    }
    #decoration-parallel-line-white {
        float: right;
        width: 18%;
        height: 2px;
        background-color: white;
        margin: 160px 0 0 0;
        display: inline-block;
    }

    #orange-cnc-text2 {
        padding: 0 0 0 200px;
    }

    .cnc-text {
        font-size: 15px;
    }
#decoration-vertical-line-orange{
    height: 15px;
}

    #circles-section {
        width: 750px;
        margin: 0 auto;
        padding-bottom: 100px;
    }

    .icon {
        width: 80px;
        float: left;
        padding: 60px 50px 20px 50px;
        cursor: pointer;
    }

    .circlegroup {
        display: inline-block;
        text-align: center;
        font-weight: 600;
        font-style: italic;
        text-transform: uppercase;
        font-size: 0.9em;
    }
    #same-icon-text-under{
        font-size: 1em;
    }
    .same-icon-text{
        font-size: 1.2em;
    }

    .left-listing {
        font-style: italic;
        display: inline-block;
        margin: 20px 0 20px 30px;
    }

    .right-listing {
        display: inline-block;
        width: auto;
        text-align: justify;
        float: none;
    }

    /*------------------- company kicsi -----------------------------*/


#stamps{
    margin: 20px;
}
    .grid {
        position: relative;
        margin: 0 auto;
        padding: 1em 0 4em;
        max-width: 705px;
        list-style: none;
        text-align: center;
    }

    /* Common style */
    .grid figure {
        position: relative;
        float: left;
        overflow: hidden;
        margin: 10px 1.5%;
        width: 330px;
        height: 230px;
        text-align: center;
        cursor: default;
    }
    .grid figure img {
        position: relative;
        display: block;
        min-height: 230px;
        max-width: 330px;
    }
    figure.effect-sadie p {
        font-size: medium;
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 2em;
        width: 260px;
        opacity: 0;
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }


    /* ---------------- development-kicsi-----------------------*/
    .dev-parallel-line-gray{
        width: 70%;
    }
    .dev-title {
        font-size: 25px;
        font-family: 'Oxygen', sans-serif;
        font-weight: 300;
        margin: 30px 0 30px 150px;
        text-transform: uppercase;
    }

    .dev-text {
        margin: 0 25px 0 150px;
        line-height: 1.3;
        font-weight: 300;
    }
    #dev-listing {
        margin: 0 auto;
        width: 800px;
    }

    .checkbox{
        width: 430px;
        font-size: medium;
        display: inline-block;
        line-height: 1.3;
        float: left;
        margin: 0 auto;
        padding: 30px 200px;
    }
    .card {
        -webkit-transition: all .4s ease-out;
        transition: all .4s ease-out;
        width: 430px;
        height: 240px;
        position: relative;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        }
.pictures{
    width: 430px;
    height: 240px;
}
    .front{
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 430px;
        height: 240px;
        color: white;
        font-weight: bold;
    }
    .back{
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 430px;
        height: 240px;
        color: white;
        font-weight: bold;
    }
    #footer-container {
        margin: 100px 0 0 0;}


    #mobile-dev{
        display: none;
    }

    /*----------------- contact kicsi ---------------------*/

    #contact-title {
        font-size: 25px;
        font-family: 'Oxygen', sans-serif;
        font-weight: 300;
        margin: 38px 0 20px 150px;
        text-transform: uppercase;
    }
    .contact-parallel-line-gray{
        width: 70%;
    }
    #contact-text{
        width: 50%;
    }

    #contact-content{
        line-height: 2;
        display: inline-block;
        margin: 0 auto;
        position: relative;
        width: 100%;
    }
    #information{
        display: inline-block;
        position: relative;
        width: 100%;
        padding: 5% 0 5% 0;
        text-align: center;
    }
    #map{
        margin: 0 auto;
        width: 80%;
        height: 400px;
        padding-left: 10%;
    }
    #contact-contact{
        font-size: 17px;
    }
}








/*----------------reszponzív       NAGY--------------------*/

@media only screen and (max-width: 2000px) and (min-width: 1500px) {

    #test {
        display: none;
    }
    .mobile-nav{
        display: none;
    }
    .logo {
        width: 9%;
        padding-left: 7%;

    }
    .menu-items{
        font-size: large;
    }
    .dev-menu-items{
        font-size: large;
    }
    .cnc-title {
        font-size: 45px;
        padding: 0 0 30px 400px;
        font-family: 'Oxygen', sans-serif;
        font-weight: 300;
    }

    .animated {
        display: inline-block;
        padding-top: 250px;
        -webkit-animation-duration: 3s;
        -webkit-animation-delay: 0.15s;
        -webkit-animation-iteration-count: 1;
    }

    #decoration-parallel-line-white {
        float: right;
        width: 18%;
        height: 2px;
        background-color: white;
        margin: 270px 0 0 0;
        display: inline-block;
    }

    #orange-cnc-text2 {
        padding: 0 0 0 400px;
        font-size: 25px;
    }
    #decoration-vertical-line-orange{
        height: 25px;
    }
    #circles-section{
        width: 1350px;
    }
    .icon{
        padding: 60px 115px 20px 90px;
    }
    .witheline-icontext {
        max-width: 1400px;
    }
    .left-listing-title{
        padding-left: 100px;
    }
    .left-listing{
        margin: 20px 0 200px 130px;
    }



    /*-------------    company  NAGY -------------*/
    #comapy-images {
        width: 1500px;
        margin: 0 auto;

   }
    #stamps{
        margin: 20px;
    }

    .grid {
        position: relative;
        margin: 0 auto;
        padding: 1em 0 4em;
        max-width: 1420px;
        list-style: none;
        text-align: center;
    }

    /* Common style */
    .grid figure {
        position: relative;
        float: left;
        overflow: hidden;
        margin: 15px 1.5%;
        width: 430px;
        height: 330px;
        text-align: center;
        cursor: default;
    }

    .grid figure img {
        position: relative;
        display: block;
        min-height: 330px;
        max-width: 430px;
    }

    .grid figure figcaption {
        padding: 2em;
        color: #fff;
        text-transform: uppercase;
        font-size: 1.25em;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .grid figure figcaption::before,
    .grid figure figcaption::after {
        pointer-events: none;
    }




    .grid figure p {
        letter-spacing: 1px;
        font-size: 90%;
    }

    figure.effect-sadie figcaption::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: -webkit-linear-gradient(top, rgba(229,0,0,0) 0%, rgba(229,0,0,0.8) 100%);
        background: linear-gradient(to bottom, rgba(229,0,0,0) 0%, rgba(229,0,0,0.8) 100%);
        content: '';
        opacity: 0;
        -webkit-transform: translate3d(0,50%,0);
        transform: translate3d(0,50%,0);
    }



    figure.effect-sadie figcaption::before,
    figure.effect-sadie p {
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
    }

    figure.effect-sadie p {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 2em;
        width: 350px;
        opacity: 0;
        -webkit-transform: translate3d(0,10px,0);
        transform: translate3d(0,10px,0);
    }

    figure.effect-sadie:hover h2 {
        color: #fff;
        -webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
        transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
    }

    figure.effect-sadie:hover figcaption::before ,
    figure.effect-sadie:hover p {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    /*------------- development NAGY -----------------*/
    #dev-listing {
        margin: 0 auto;
        width: 1440px;
    }

    .checkbox{
        width: 430px;
        font-size: medium;
        display: inline-block;
        line-height: 1.3;
        float: left;
        margin: 0 auto;
        padding: 30px 25px 50px 25px
    }
    .card {
        -webkit-transition: all .4s ease-out;
        transition: all .4s ease-out;
        width: 430px;
        height: 240px;
        position: relative;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    .pictures{
        width: 430px;
        height: 240px;
    }
    .front{
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 430px;
        height: 240px;
        color: white;
        font-weight: bold;
    }
    .back{
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 430px;
        height: 240px;
        color: white;
        font-weight: bold;
    }
    .white-text-decoration{
        width: 5px;
        height: 90px;
        background-color: white;
        float: left;
        margin: 30px 10px 0 0;
    }
    .numbers-title{
        font-size: large;
    }
    #mobile-dev{
        display: none;
    }

    /*------------------------- Contact NAGY ----------------- */

}
















/*-----------------------------   TABLET ---------------------------- */


@media only screen and (max-width:767px) and (min-width: 540px){

    #test {
        display: none;
    }


.other{
    padding-top: 30vh;
}

    .mobile-nav .logo{
        display: inline-block;
        width: 9%;
        min-width: 70px;
        padding: 15px 0 0 6%;
        max-width: 30px;
        position: fixed;
        z-index: 1001;
    }

.navigation{
    display: none;
}





    .top-animate {
        background: red !important;
        top: 13px !important;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .mid-animate {
        opacity: 0;
    }

    .bottom-animate {
        background: red !important;
        top: 13px !important;
        -webkit-transform: rotate(-225deg);
        transform: rotate(-225deg);

    }

    .top-menu {
        top: 5px;
        width: 25px;
        height: 2px;
        border-radius: 10px;
        background-color: red;

    }

    .mid-menu {
        top: 13px;
        width: 25px;
        height: 2px;
        border-radius: 10px;
        background-color: red;

    }

    .bottom-menu {
        top: 21px;
        width: 25px;
        height: 2px;
        border-radius: 10px;
        background-color:  red;

    }

    .menui {
        background:  red;
        transition: 0.6s ease;
        transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
        margin-top: 10px;
        position: absolute;

    }

    .mini {
        z-index: 999;
        position: fixed;
        display: block;

        height: 32px;
        width: 32px;
        margin: 20px;
        margin-left: 90%;
        top: 0;
        left: 0;


    }


    /*--------------------------  HOME TABLET ------------------------------*/

    .cnc-title {
        font-size: 30px;
        font-family: 'Oxygen', sans-serif;
        font-weight: 300;
        margin: 0 auto;
        padding: 0 0;
        text-align: center;
    }
    .animated {
        display: inline-block;
        padding-top: 35vh;
        -webkit-animation-duration: 3s;
        -webkit-animation-delay: 0.15s;
        -webkit-animation-iteration-count: 1;
        width: 100%;
        margin: 0 auto;
    }
    #decoration-parallel-line-white {
    display: none;
    }

    #orange-cnc-text2 {
padding: 2% 0 0 22%;
    }

    .cnc-text {
        font-size: 15px;

    }
    #decoration-vertical-line-orange{
        width: 5px;
        height: 15px;
    }


    #circles-section {
        width: 405px;
        margin: 0 auto;
        padding-bottom: 100px;
    }

    .icon {
        width: 100px;
        float: left;
        padding: 60px 50px 20px 50px;
        cursor: pointer;
    }

    .circlegroup {
        display: inline-block;
        text-align: center;
        font-weight: 600;
        font-style: italic;
        font-size: 0.9em;
        text-transform: uppercase;
    }
    #same-icon-text-under{
        font-size: 1em;
    }
    .same-icon-text{
        font-size: 1.2em;
    }

    .left-listing {
        font-style: italic;
        display: inline-block;
        margin: 20px 0 20px 30px;
    }

    .right-listing {
        display: inline-block;
        width: auto;
        text-align: justify;
        float: none;
    }

    /*------------------- company TABLET -----------------------------*/
.dev-text{
    font-size: 14px;
}
.dev-title{
    margin: 30px 0 15px 150px;
}
    #stamps{
        margin: 20px;
    }
    .grid {
        position: relative;
        margin: 0 auto;
        padding: 1em 0 4em;
        max-width: 470px;
        list-style: none;
        text-align: center;
    }

    /* Common style */
    .grid figure {
        position: relative;
        float: left;
        overflow: hidden;
        margin: 10px 1.5%;
        width: 220px;
        height: 120px;
        text-align: center;
        cursor: default;
    }
    .grid figure img {
        position: relative;
        display: block;
        min-height: 120px;
        max-width: 220px;
    }
    figure.effect-sadie p {
        font-size: small;
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 2em;
        width: 180px;
        opacity: 0;
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }


    /* ---------------- development-TABLET-----------------------*/
    .dev-parallel-line-gray{
        width: 70%;
    }
    .dev-title {
        font-size: 25px;
        font-family: 'Oxygen', sans-serif;
        font-weight: 300;
        margin: 30px 0 30px 150px;
        text-transform: uppercase;
    }

    .dev-text {
        margin: 0 25px 0 150px;
        line-height: 1.3;
        font-weight: 300;
    }
    #dev-listing {
        margin: 0 auto;
        width: 400px;
    }

    .checkbox{
        width: 400px;
        font-size: medium;
        display: inline-block;
        line-height: 1.3;
        float: left;
        margin: 0 auto;
        padding: 4%;
    }
    .card {
        -webkit-transition: all .4s ease-out;
        transition: all .4s ease-out;
        width: 400px;
        height: 210px;
        position: relative;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    .pictures{
        width: 400px;
        height: 210px;
    }
    .front{
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 400px;
        height: 210px;
        color: white;
        font-weight: bold;
    }
    .back{
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 400px;
        height: 210px;
        color: white;
        font-weight: bold;
    }
    #footer-container {
        margin: 100px 0 0 0;}


    #mobile-dev{
        display: none;
    }

    /*----------------- contact tablet ---------------------*/

    #contact-title {
        font-size: 25px;
        font-family: 'Oxygen', sans-serif;
        font-weight: 300;
        margin: 27px 0 20px 150px;
        text-transform: uppercase;
    }
    .contact-parallel-line-gray{
        width: 70%;
    }
    #contact-text{
        width: 50%;
    }

    #contact-content{
        line-height: 2;
        display: inline-block;
        margin: 0 auto;
        position: relative;
        width: 100%;
    }
    #information{
        display: inline-block;
        position: relative;
        width: 100%;
        padding: 5% 0 5% 0;
        text-align: center;
    }
    #map{
        margin: 0 auto;
        width: 80%;
        height: 400px;
        padding-left: 10%;
    }
    #contact-contact{
        font-size: 14px;
        line-height: 1.5;
    }
}

/*itt*/


/*----------------------- MOBILE  -------------------- */


@media only screen and (max-width:540px) and (min-width: 210px) {

    .float-fix{
        width: 100%;
    }

    .mobile-nav .logo{
        display: inline-block;
        width: 9%;
        min-width: 70px;
        padding: 15px 0 0 6%;
        max-width: 30px;
        margin: 0 auto;
        position: fixed;
        z-index: 1001;
    }

    .logo{
        display: inline-block;
        width: 9%;
        min-width: 70px;
        padding: 5% 0 0% 3%;
        max-width: 30px;
        margin: 0 auto;
    }
    .navigation{
        display: none;
    }


    .top-animate {
        background: red !important;
        top: 13px !important;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .mid-animate {
        opacity: 0;
    }

    .bottom-animate {
        background: red !important;
        top: 13px !important;
        -webkit-transform: rotate(-225deg);
        transform: rotate(-225deg);

    }

    .top-menu {
        top: 5px;
        width: 20px;
        height: 2px;
        left: -5px;
        border-radius: 10px;
        background-color: red;

    }

    .mid-menu {
        top: 13px;
        width: 20px;
        height: 2px;
        left: -5px;
        border-radius: 10px;
        background-color: red;

    }

    .bottom-menu {
        top: 21px;
        width: 20px;
        height: 2px;
        left: -5px;
        border-radius: 10px;
        background-color:  red;

    }

    .menui {
        background:  red;
        transition: 0.6s ease;
        transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);
        margin-top: 10px;
        position: absolute;

    }

    .mini {
        z-index: 999;
        position: fixed;
        display: block;

        height: 32px;
        width: 32px;
        margin: 20px;
        margin-left: 90%;
        top: 0;
        left: 0;

        }

.other{
    padding-top: 30vh;
}
    #footer-container{
        margin: 30px 0 0 0;
        padding-bottom: 15px;
    }
    #footer-main{
        font-size: 10px;
        margin: 0 auto;
        max-width: 85%;
    }
    /*----------------------------- Home MOBILE  ------------------------------- */
    .cnc-title {
        font-size: 25px;
        font-family: 'Oxygen', sans-serif;
        font-weight: 300;
        margin: 0 auto;
        padding: 0 0;
        text-align: center;
        line-height: 30px;
    }
    .animated {
        display: inline-block;
        -webkit-animation-duration: 0s;
        -webkit-animation-delay: 0s;
        -webkit-animation-iteration-count: 1;
        width: 100%;
        margin: 0 auto;
        padding-top: 35vh;
    }
    #decoration-parallel-line-white {
        display: none;
    }
    #decoration-vertical-line-orange {
        display: none;
    }
    #orange-cnc-text2 {
        width: 100%;
        padding: 0;
        text-align: center;
        padding-top: 10px;
    }

    .cnc-text {
        font-size: 12px;
        width: 50%;
        margin: 0 auto;

    }
#home-content {
    display: none;
}
#test {
    width: 90%;
    margin: 0 auto;
}
.test-main-title {
    font-size: larger;
    text-transform: uppercase;
    font-weight: 800;
    padding: 50px 0 10px 0;
    text-align: center;
}
.white{
    width: 60%;
    height: 1px;
    background-color: red;
    margin: 0 auto;
}
#test {
    display: block;
}
.test-title {
    font-size: medium;
    text-transform: uppercase;
    font-weight: 700;
    font-style: italic;
    padding: 20px 0 5px 0;
}
.test-text{
    font-size: smaller;
    padding-top: 15px;
    line-height: normal;
}
    /*-------------------------------- Company MOBILE  --------------------------------*/
    .dev-text{
        font-size: 14px;
        text-align: left;
        margin: 10px 10px;
    }
    .dev-title{
        margin: 30px 0;
        font-size: medium;
        text-align: center;
    }
    .decoration-parallel-line-red{
        display: none;
    }
    #stamps{
        margin: 20px;
    }
    .grid {
        position: relative;
        margin: 0 auto;
        padding: 1em 0 4em;
        max-width: 470px;
        list-style: none;
        text-align: center;
    }
    .dev-parallel-line-gray{
        width: 100%;
    }

    /* Common style */
    .grid figure {
        position: relative;
        float: left;
        overflow: hidden;
        margin: 10px 1.5%;
        width: 168px;
        height: 120px;
        text-align: center;
        cursor: default;
    }
    .grid figure img {
        position: relative;
        display: block;
        min-height: 120px;
        max-width: 168px;
    }
    figure.effect-sadie p {
        font-size: small;
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 2em;
        width: 116px;
        opacity: 0;
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }
#about{
    width: 75%;
}
    #company-listing{
        padding: 10px 0 0 0;
        width: 100%;
    }
    #company-text{
        font-size: small;
        width: 115%;
        padding: 10px 5px 20px 15px;
    }

/*------------------------------------------------Development MObILE  ------------------------*/
    #dev-listing{
        display: none;
    }
    #mobile-dev{
        position: relative;
        width: 100%;
        display: block;
    }
    .mini-number{
        width: 10%;
        padding-top: 5px;
    }
    .m-checkbox{
        width: 85%;
        margin: 0 auto;
        padding: 2%;
        text-align: center;
    }
    .mini-title{
        font-size: small;
        padding-bottom: 10px;
        padding-top: 5px;
    }
    .mini-content{
        font-size: smaller;
        padding-bottom: 10px;
    }
    .line{
        width: 70%;
        height: 1px;
        margin: 0 auto;
        background-color: darkgray;
    }
/*-----------------------------------------Contact MOBILE  --------------------------*/
    .contact-parallel-line-gray{
        width: 100%;
        max-height: 150px;
    }
    #contact-title{
        font-size: medium;
        text-align: center;
        margin: 30px 0 20px 0;
    }
    #contact-contact{
        margin: 0 auto;
        font-size: smaller;
        text-align: center;
        max-width: 140px;
    }
    #information {
        font-size: smaller;
        width: 70%;
        text-align: center;
        padding: 6% 15% 0 13%;
    }
    #map {
        margin: 0 auto;
        width: 100%;
        height: 300px;
    }

    }