/*   MOBILE VIEW   */
@media screen and (max-width: 768px) {
    .flex{
        margin: 0 auto;
    }

    .width-20,.width-25, .width-30, .width-33, .width-40, .width-45, .width-50, .width-55, .width-60, .width-70, .width-80, .width-100{
        width: 100%;
        padding: 10px;
    }

    .hero-banner{
        width: 100%;
        white-space: nowrap;
        overflow-x: scroll;
        overflow-y: hidden;
    }

    .hero-banner .slides{
        display: inline-block;
        float: none;
        width: 100%;
        transform: skew(0deg);
        margin-right: -3px;
    }

    .hero-banner .slides .content {
        transform: skew(0deg);
        margin-left: 0;
        width: 100%;
    }

    .hero-banner .slides .content .title{
        right: 20px;
        left: auto;
    }

    h1{
        font-size: 32px;
        line-height: 48px;
        margin-bottom: 20px;
    }

    h2{
        font-size: 24px;
        line-height: 36px;
        color: #4E4E4E;
        margin-bottom: 20px;
    }

    h3{
        font-size: 18px;
        line-height: 42px;
    }
    footer {
        flex-wrap: wrap;
    }

    header .left,
    header .right, footer .left{
        flex-wrap: wrap;
        width: 100%;
    }
    footer .right{
        width: 100%;
        justify-content: flex-start;
    }

    footer .copyright{
        width: 100%;
        margin-bottom: 25px;
    }
    footer .navigation{
        width: 100%;
    }

    footer .navigation ul{
        flex-wrap: wrap;
    }

    footer .navigation ul li{
        width: 100%;
        border-right: 0;
    }

    footer .navigation ul li a{
        padding:0;
        margin: 0;
        margin-bottom: 20px;
    }
    footer .icons a:first-child{
        margin-left: 0;
    }

    .align-center{
        width: 100%;
        padding: 0 25px;
        box-sizing: border-box;
    }

    .align-center .width-50:last-child{
        height: 200px;
        overflow-y: scroll;
    }


    .sub-navigation{
        width: 100%;
    }

    .sub-navigation ul{
        width: 100%;
        overflow-x: scroll;
        white-space: nowrap;
    }

    .sub-navigation ul li{
        display: inline-block;
    }
    .container,.min-container{
        padding-left:20px !important;
        padding-right: 20px !important;
    }
    .dark-bg{
        padding: 80px 0;
    }
    .featured-news-wrapper, .swiper-pagination.progress,
    .featured-news-wrapper .inner {
        transform: skew(0deg);
        /* transform: skew(-24deg); */
    }
    .featured-news{
        padding: 0;
    }

    .swiper-container-vertical > .swiper-pagination-progressbar, .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
        left: 9px !important;
    }
    .swiper-button-prev {
         left: 15px !important;
    }
    .swiper-button-next {
        left: 60px !important;
    }

    .featured-news-wrapper {
         padding-left: 35px;
    }

    .news > .flex{
        flex-wrap:wrap;
    }

    .news > .flex > .image {
        width: 100%;
        margin-bottom: 25px;
    }

    .read-more a{
        display: inline-block;
    }

    .filter > .dropdown > .ui.selection.dropdown{
        display: block;
        margin-right: 0;
    }

    .dekstop.only{
        display: none;
        visibility: hidden;
    }

    .mobile.only{
        display: inherit;
        visibility: visible;
    }

    .header-navigation .mobile{
        position: relative;
        z-index: 99999;
    }

    .header-navigation .mobile li .title h4{
        font-size: 15px;
    }

    .header-navigation .mobile li .title{
        padding-left: 20px;
    }

    .header-navigation .mobile{
        flex-wrap: wrap;
    }

    .header-navigation > ul.mobile > li {
        padding-right: 0;
        padding-top: 0;
    }
    .header-navigation .mobile li a{
        display: block;
    }


    .header-navigation.mobile {
        white-space: normal;
        padding-bottom: 0;
        padding-top: 100px;
    }
    .ui.top.sidebar{
        display: block;
        align-items: flex-start;
    }

    header .language{
        padding-right: 0 ;
    }

    .filter-item{
        margin: 0 auto;
    }

    .header-navigation.mobile .icons a{
        display: inline-block;
        margin: 0 12px;
        padding: 5px;
    }
    .header-navigation > ul > li .submenu{
        display: block;
        height: auto;
    }
    .header-navigation > ul > li .submenu > li img{
        vertical-align: middle;
        height: 5px;
    }
    .header-navigation > ul > li .submenu > li{
        padding-left: 21px;
        font-size: 13px;
        margin: 5px 0;
    }

    .news > .flex > div:nth-child(2){
        padding: 0;
    }

    .news > .flex > .read-more img{
        height: 15px;
        right: auto;
        left: 0;
    }

    .news{
        padding: 30px 0;
    }

    .items .item{
        width: 100%;
    }

    .filter ul{
        white-space: nowrap;
        overflow-x: scroll;
        width: 100%;
        padding-bottom: 0;
        margin-bottom: 25px;
    }

    .filter ul li{
        display: inline-block;
        margin-right: 8px;
    }

    .filter ul li{
        font-size: 15px;
    }

    .filter ul li span{
        font-size: 10px;
    }

    .fullscreen-banner h1{
        padding-left: 0;
    }

    .map-context {
        position: absolute;
        left: 15px;
        top: 10px;
        z-index: 3;
    }

    .industry-map{
        width: 100%;
        overflow-x: scroll;
    }

    .industry-map ul li:last-child{
        padding-right: 25px;
    }

    .industry-map ul li .submenu-toggle{
        display: none;
    }

    #map{
        height: 85%;
        max-height: 500px;
    }

    #map .content,
    #map .content .image{
        position: relative;
        width: 100%;
        height: 500px;
    }

    #map .content{
        overflow: scroll;
    }

    #map .content::-webkit-scrollbar {
        display: none;
    }

    #map .content img{
        width: auto;
        max-width: none;
        min-height: 100%;
        /*height: 100%;*/
        height: 100%;
    }

    .clear-padding-mobile{
        padding: 0 !important;
    }


    .featured-modal .image-wrapper {
        width: 100%;
        height: 250px;
        transform: skew(0) translateX(0%);
        overflow: hidden;
        margin-bottom: 50px;
    }

    .featured-modal{
        display: block;
        flex-wrap: wrap;
    }

    .featured-modal .content-wrapper {
        width: 100%;
        padding: 0 60px;
        box-sizing: border-box;
    }

    .featured-modal .image-wrapper .image {
        cursor: pointer;
        display: block;
        background-position: center;
        background-size: auto 100%;
        background-repeat: no-repeat;
        position: relative;
        z-index: -1;
        height: 100%;
        width: 100%;
        transform: skew(0deg);
        margin-left: 0%;
    }

    .homepage-popup-wrapper .swiper-button-next{
        left: auto !important;
    }

    .ui.basic.modal > .close{
        border-radius: 500px;
        overflow: hidden;
        line-height: 2rem;
        background-color: rgba(0,0,0,0.7);
        padding-top: 0;
    }
}


/*   TABLET VIEW   */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
}

/* MOBILE VIEW IPHONE 5/SE */
@media screen and (max-width:320px){
}

/* ONLY DEKSTOP VIEW */
@media only screen and (min-width: 1023px){

}