.hamburger {
height:25px;
width:40px;
position:relative;
display:none;
}
.hamburger .cross2,
.hamburger .cross1,
.hamburger .line2,
.hamburger .line1 {
position:absolute;
width:100%;
background-color:#464646;
height:2px;
opacity:1;
transition:.2s ease-in-out
}
.hamburger .line1 {
left:0;
top:0
}
.hamburger .line2 {
right:0;
bottom:0
}
.hamburger .cross2,
.hamburger .cross1 {
background:none;
top:50%;
width:100%;
margin-top:-1px;
height:2px
}
.hamburger .cross1:before,
.hamburger .cross2:before,
.hamburger .cross1:after,
.hamburger .cross2:after {
content:"";
height:100%;
float:left;
background-color:#464646;
width:50%;
left:0;
transition:.2s ease-in-out
}
.hamburger .cross1:before,
.hamburger .cross2:before {
right:0;
left:unset
}
.hamburger:hover {
cursor:pointer
}
.hamburger:hover .line2,
.hamburger:hover .line1 {
width:50%
}
.hamburger.open .line1,
.hamburger.open .line2 {
opacity:0
}
.hamburger.open .cross2 {
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg)
}
.hamburger.open .cross1 {
-webkit-transform:rotate(45deg);
transform:rotate(45deg)
}
.hamburger.open:hover .cross2:before,
.hamburger.open:hover .cross1:before {
-webkit-transform:translate(-30%,0);
transform:translate(-30%,0)
}
.hamburger.open:hover .cross2:after,
.hamburger.open:hover .cross1:after {
-webkit-transform:translate(30%,0);
transform:translate(30%,0)
}
    
/*0 up to 479*/
@media only screen and (min-width:0px) and (max-width : 479px) {
.main { width: 95%; }

body{
    padding-top: 83px;
}
.hamburger{display: block;}
header{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
}
header .main{
    position: relative;
}
header .main .header__top-lang{
    height: 29px;
}
header .main .header__bottom{
    align-items: center;
}
header .main .header__bottom-logo{
    margin-right: auto;
}
header .main .header__bottom-navigation{
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    left: 0;
    z-index: 100;
    background: #fff;
    padding: 7px 10px;
}
header .main .header__bottom-navigation-list{
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
header .main .header__bottom-navigation-list > li{
    display: block;
    width: 100%;
    margin-bottom: 5px;
}
header .main .header__bottom-navigation-list > li > a{
    display: block;
}
.slider .swiper-slide > a .caption-slider{
    right: 27px;
    bottom: 5px;
    height: auto;
    padding: 4px 10px;
}
.slider .swiper-slide > a .caption-slider__left > strong , .slider .swiper-slide > a .caption-slider__left > span{
    font-size: 10px;
}
.slider .swiper-slide > a .caption-slider__right{
    width: 10px;
}
.pre_footer > h1{
    font-size: 13px;
}
.inside_master{
    padding: 22px 20px;
}
.pre_footer{
    height: 100%;
    flex-direction: column;
}
.breadcrumb{
    width: 100%;
}
.breadcrumb__list{
    display: inline-flex;
    overflow-x: auto;
    white-space: nowrap;
    width: 100%;
}
.pager{
    width: 100%;
    margin: 10px 0 0 0;
}
/* Hexaco Strat */
.hexaco .grid-list{
    grid-template-columns:repeat(auto-fill, minmax(100%, 1fr))
}
/* Hexaco Ends */
/* About Start */
.about{
    flex-direction: column;
}
.about__context{
    margin-right: unset;
}
.about__context *{
    font-size: 16px;
}
.about__image{
    width:100%;
    height: 100%;
    margin-bottom: 10px;
    order: -1;
}
.about__image > img{
    width: 100%;
    height: 100%;
}
/* About Ends */
/* OrganizationalChart Start */
.organizational-chart > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* OrganizationalChart Ends */
/* Contact Start */
.contact{
    flex-direction: column;
}
.contact__context > h3{
    font-size: 22px;
}
.contact__context{
    margin-right: unset;
    padding-right: 0px;   
}
.contact__form{
    width: 100%;
    margin-top: 20px;
}
.contact__form-map{
    width: 100%;
    margin-bottom: unset;
    z-index: 10;
}
.contact__form #form0{
    margin-top: 20px;
}
.contact__form #form0 #ContactDiv .item{
    flex-direction: column;
}
.contact__form #form0 #ContactDiv .item > label{
    width: 100%;
    margin-left: unset;
}
.contact__form #form0 #ContactDiv .item .txt{
    width: 100%;
    height: 40px;
    flex: unset;
}
.contact__form #form0 #ContactDiv .item .txt.textarea{
    height: 200px;
}

/* Contact Ends */
/* Services Start */
.services{
    flex-direction: column;
}
.services__images{
    margin: 0 0 20px 0;
    width: 100%;
    height: 100%;
    order: -2;
}
/* Services Ends */
/* Project Start */
.detail .detial-project{
    position:static;
    background-color: #fff;
    width: 100%;
    height: 100%;
}
.detail .detial-project .fixed{
    height: 100%;
}
/* Project Ends */
/* Career Start */
.career__form > form .form li.half-size{
    width: 100%;
}
/* Career Ends */
/* Catalog  Start */
.c-catalog-list{
    --column: 1;
    --gap-column: 2%;
    --gap-row: 10%;
}
/* Catalog Ends */
}
/*480 up to 719*/
@media only screen and (min-width : 480px) and (max-width : 719px) {
    .main { width: 95%; }

    body{
        padding-top: 83px;
    }
    .hamburger{display: block;}
    header{
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 100;
    }
    header .main{
        position: relative;
    }
    header .main .header__top-lang{
        height: 29px;
    }
    header .main .header__bottom{
        align-items: center;
    }
    header .main .header__bottom-logo{
        margin-right: auto;
    }
    header .main .header__bottom-navigation{
        display: none;
        position: absolute;
        right: 0;
        top: 100%;
        left: 0;
        z-index: 100;
        background: #fff;
        padding: 7px 10px;
    }
    header .main .header__bottom-navigation-list{
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    header .main .header__bottom-navigation-list > li{
        display: block;
        width: 100%;
        margin-bottom: 5px;
    }
    header .main .header__bottom-navigation-list > li > a{
        display: block;
    }
    .slider .swiper-slide > a .caption-slider{
        right: 27px;
        bottom: 5px;
        height: auto;
        padding: 4px 10px;
    }
    .slider .swiper-slide > a .caption-slider__left > strong , .slider .swiper-slide > a .caption-slider__left > span{
        font-size: 10px;
    }
    .slider .swiper-slide > a .caption-slider__right{
        width: 10px;
    }
    .pre_footer > h1{
        font-size: 13px;
    }
    .inside_master{
        padding: 22px 20px;
    }
    .pre_footer{
        height: 100%;
        flex-direction: column;
    }
    .breadcrumb{
        width: 100%;
    }
    .breadcrumb__list{
        display: inline-flex;
        overflow-x: auto;
        white-space: nowrap;
        width: 100%;
    }
    .pager{
        width: 100%;
        margin: 10px 0 0 0;
    }
    /* Hexaco Strat */
    .hexaco .grid-list{
        grid-template-columns:repeat(auto-fill, minmax(100%, 1fr))
    }
    /* Hexaco Ends */
    /* About Start */
    .about{
        flex-direction: column;
    }
    .about__context{
        margin-right: unset;
    }
    .about__context *{
        font-size: 16px;
    }
    .about__image{
        width:100%;
        height: 100%;
        margin-bottom: 10px;
        order: -1;
    }
    .about__image > img{
        width: 100%;
        height: 100%;
    }
    /* About Ends */
    /* OrganizationalChart Start */
    .organizational-chart > img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* OrganizationalChart Ends */
    /* Contact Start */
    .contact{
        flex-direction: column;
    }
    .contact__context > h3{
        font-size: 22px;
    }
    .contact__context{
        margin-right: unset;
        padding-right: 0px;   
    }
    .contact__form{
        width: 100%;
        margin-top: 20px;
    }
    .contact__form-map{
        width: 100%;
        margin-bottom: unset;
        z-index: 10;
    }
    .contact__form #form0{
        margin-top: 20px;
    }
    .contact__form #form0 #ContactDiv .item{
        flex-direction: column;
    }
    .contact__form #form0 #ContactDiv .item > label{
        width: 100%;
        margin-left: unset;
    }
    .contact__form #form0 #ContactDiv .item .txt{
        width: 100%;
        height: 40px;
        flex: unset;
    }
    .contact__form #form0 #ContactDiv .item .txt.textarea{
        height: 200px;
    }
    /* Contact Ends */
    /* Services Start */
    .services{
        flex-direction: column;
    }
    .services__images{
        margin: 0 0 20px 0;
        width: 100%;
        height: 100%;
        order: -2;
    }
    /* Services Ends */
    /* Project Start */
    .detail .detial-project{
        position:static;
        background-color: #fff;
        width: 100%;
        height: 100%;
    }
    .detail .detial-project .fixed{
        height: 100%;
    }
    /* Project Ends */
    /* Career Start */
    .career__form > form .form li.half-size{
        width: 100%;
    }
    /* Career Ends */
    /* Catalog  Start */
    .c-catalog-list{
        --column: 1;
        --gap-column: 2%;
        --gap-row: 10%;
    }
    /* Catalog Ends */
}
/*720 up to 1000*/
@media only screen and (min-width : 720px) and (max-width : 1000px) {
    .main { width: 95%; }

    header .main{
        position: relative;
    }
    header .main .header__top-lang{
        height: 29px;
    }
    /* About Start */
    .about{
        flex-direction: column;
    }
    .about__context{
        margin-right: unset;
    }
    .about__context *{
        font-size: 16px;
    }
    .about__image{
        width:100%;
        height: 100%;
        margin-bottom: 10px;
        order: -1;
    }
    .about__image > img{
        width: 100%;
        height: 100%;
    }
    /* About Ends */
    /* OrganizationalChart Start */
    .organizational-chart > img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* OrganizationalChart Ends */
    /* Contact Start */
    .contact{
        flex-direction: column;
    }
    .contact__context > h3{
        font-size: 22px;
    }
    .contact__context{
        margin-right: unset;
        padding-right: 0px;   
    }
    .contact__form{
        width: 100%;
        margin-top: 20px;
    }
    .contact__form-map{
        width: 100%;
        margin-bottom: unset;
        z-index: 10;
    }
    .contact__form #form0{
        margin-top: 20px;
    }
    .contact__form #form0 #ContactDiv .item{
        flex-direction: column;
    }
    .contact__form #form0 #ContactDiv .item > label{
        width: 100%;
        margin-left: unset;
    }
    .contact__form #form0 #ContactDiv .item .txt{
        width: 100%;
        height: 40px;
        flex: unset;
    }
    .contact__form #form0 #ContactDiv .item .txt.textarea{
        height: 200px;
    }
    /* Contact Ends */
    /* Services Start */
    .services{
        flex-direction: column;
    }
    .services__images{
        margin: 0 0 20px 0;
        width: 100%;
        height: 100%;
        order: -2;
    }
    /* Services Ends */
    /* Project Start */
    .detail .detial-project .fixed{
        height: 100%;
    }
    /* Project Ends */
}
/*1001 up to 1249*/
@media only screen and (min-width : 1001px) and (max-width : 1249px) {
    .main { width: 95%; }
    /* Hexaco Strat */
    .hexaco .grid-list {
        grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    }
    /* Hexaco Ends */
    /* Contact Start*/
    .contact__context{
        padding-right: 25px;
    }
    /* Contact Ends*/
    /* Project Start */
    .detail .detial-project .fixed{
        height: 100%;
    }
    /* Project Ends */
}
/*laptop*/
@media only screen and (min-width : 1250px) and (max-width : 1366px) {
    .main { width: 1200px; }
}
/*1250 up to 1400*/
@media only screen and (min-width : 1367px) and (max-width : 1450px) {
    .main { width: 1200px; }
}
@media only screen and (min-width : 1451px) and (max-width : 1600px) {
    .main { width: 1200px; }
}
/*1750 to up*/
@media only screen and (min-width : 1601px) {
    .main { width: 1400px; }
}