/* mobile devices config */
@media only screen and (max-width: 767px) {
    body{
        position: relative;
        height: auto;
        /* overflow-y: hidden; */
        /* overflow-x: hidden; */
        /* touch-action: none; */
          
    }
    html{
        height: auto;
    }
    h1, h1 span, h2{
        font-size: 36px;
        font-family: 'Work Sans';
        letter-spacing: 0px;
        font-weight: 100;
        text-transform: none;
        opacity: 1;
    }
    h1 {
        margin: 30px 0;
    }
    #scrolling-area{
        display: none !important;
    }
    #fullpage{
        display: block !important;
        padding: 1px 0px 1px 40px;
    }
    .info-text,.title-text{
        font-size: 16px;
        font-family: 'Work Sans';
        letter-spacing: 4.8px;
        font-weight: normal;
    }
    .topic-4itfuture .topic-title, .about-us .topic-title, .topic-solutions .topic-title{
        position: relative;
        top: 10vh;
    }
    .topic-partnership .topic-title{
        position: relative;
        top: 5vh;
    }
    #info-titles{
        display: block;
        position: fixed;
        top: 23vh;
        padding: 0 0 0 40px;
        transition: visibility 0.3s ;
        z-index: 51;
    }
    #info-titles h2{
        margin: 10px 0 15px 0;
    }
    .clickLoad .mobile{
        display: block;
        font-size: 14px;
    }
    .portrait{
        display: none;
    }
    
    .clickLoad .desktop{
        display: none;
    }
    .about-us{
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 0 0 0 ;
        height: auto;
        position: relative;
        width: 80% !important;
    } 
    
    .services ul, .details ul{
        margin-top: 20vh;
        padding-top: 0px;
    }
    .partner-content{
        margin-top: 15vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 85%;
    }
    .partner-content .microsoft{
        align-self: center;
        padding-bottom: 65px;
    }
    .partner-content .assoft{
        align-self: center;
        margin-left: auto;
    }
    .clients ul{
        margin-top: 20vh;
        text-align: center;
        width: 85%;
        display: flex;
        flex-wrap: wrap;
    }
    .clients .client-desktop{
        display: none;
    }
    .clients .client-mobile{
        display: block;
        margin: auto;
    }
    .clients p , .details p, .services p {
        margin-bottom: 40px;
        margin-top: 40px;
        
    }
    .biz p  {
        position: absolute;
        top: 22vh;
    }
    .solutions{
        display: flex;
        flex-direction: column;
        margin-top: 25px;  
    }
    .topic-solutions{
        width: 85% !important;
    }
    .solutions{
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0;
        padding: 0;
        height: auto;
        position: relative;
    } 
    
    .solutions .img{
        text-align: left;
    }
    .services li{
        font-size: 20px;
        font-family: 'Work Sans';
        letter-spacing: 0px;
        font-weight: normal;
    }
    .details li{
        font-size: 54px;
        font-family: 'anodina';
        letter-spacing: 0px;
        margin: 0 0 20px 0;
        font-weight: normal;
        opacity: 0.9;
    }
    .details span{
        font-size: 15px;
        font-family: 'anodina';
        letter-spacing: 4.5px;
        font-weight: normal;
        opacity: 0.9;
    }
    
    .clients li{
        margin: 0 0 50px 0;
    }
    
    .clients .client-ctt, .clients .client-ericsson, .clients .client-rtp, .clients .client-unilever{
        flex: 2 0 50%;
        align-self: center;
    }
    .clients .client-rir{
        margin: 30px 0;
        flex: 1 0 100%;
    }
    .clients .client-ctt svg{
        width: 55px;
        height: 34px;
    }
    .clients .client-ericsson svg{
        width: 62px;
        height: 54px;
    }
    .clients .client-rir svg{
        width: 173px;
        height: 44px;    
    }
    .clients .client-rtp svg{
        width: 115px;
        height: 23px;
    }
    .about-us{
        width: 85%;
    }
    .solutions-content{
        margin-top: 20vh;
    }
    .solutions-content .img{
        padding: 0 0 6vh 0;
    }
    .solutions p{
        position: absolute;
        top: 20vh;
    }
    /* .solutions-content .biz{
        margin-top: 50px;
    } */
    .solutions-content .biz svg{
        height: 67.73px;
        width: 173.71px;
    }
    .solutions-content .ebiz svg{
        width: 193px;
        height: 68px;
    }
    .solutions-content .uxp svg{
        width: 206px;
        height: 68px;
    }
    .solutions h4{
        font-size: 22px;
        font-family: 'work sans';
        letter-spacing: 0px;
        font-weight: normal;
    }
    .solutions p{
        font-size: 18px;
        font-family: 'work sans';
        letter-spacing: 0px;
        font-weight: normal;
        padding: 0;
    }
    
    
    .topic-reach-us .topic-title, .info .topic-title{
        margin-top: 10vh;
    }
    
    #form-section {
        width: 90%;
        transition: opacity 0.15s, transform 0.15s;
        overflow: hidden;
        padding: 0;
    }
  
    #form-section .check-label a{
        font-weight: normal;
    }
    #form-section .check-submit {
        flex-direction: column;
    }
    #form-section .check-option {
        margin-bottom: 25px;
    }
    #form-section .button-submit {
        text-align: center;
    }
    #success-message{
        font-size: 52px;
        right: 0;
        width: 100%;
        text-transform: unset;
        top: 45vh;
    }
    .info{
        margin: 0;
        padding: 0;
        flex-direction: column;
        height: 100vh;
        position: relative;
        justify-content: unset;
    }
    .info .info-content{
        margin-top: 25vh;
    }
    .info .mobile a{
        font-size: 18px;
        font-family: 'work sans';
        letter-spacing: 0px;
        font-weight: 400;
        margin-bottom: 0;
    }
    .info .location span{
        font-weight: 400;
    }
    .info .mailto svg{
        height: 33.38px;
        width: 35.73px;
    }
    .info .mobile, .info .location{
        display: block;
        margin: 0 0 40px 0px;
        flex: unset;
        width: 70%;
    }
    .info .mobile{
        margin-top: 32px;
    }
    .info .mobile svg{
        height: 28.55px;
        width: 28.55px;
    }
    .info .location svg{
        height: 29.09px;
        width: 29.09px;
    }
    .info .contact-text{
        padding-left: 0px;
        padding-top: 10px;
    }
    .info .contact-text p{
        font-size: 16px;
    }
    .info .location span{
        font-size: 16px;
        /* text-transform: none; */
    }
    .header .logo-text {
        display: none;
    }
    .header .logo-mark {
        padding: 55px 0 0 37px;
    }
    .header .logo-mark svg{
        height: 50.48px;
        width: 164.96px;
    }
    .social-mobile{
        display: block;
    }
    .social-desktop{
        display: none;
    }
    .social {
        position: absolute;
        top: 90%;
        color: #fff;
        font-size: 16px;
        z-index: 9999;
        margin: 0 25px 0 0;
    }
    .social a{
        text-decoration: none;
    }
    .social li {
        float: left;
    }
    .social .share{
        display: none;
    }
    .social li.share:after {
        content: "";
    }
    .social li {
        margin: 0 0 0 5.5vw;
        transition: opacity 0.2s;
    }
    .social li.icon:hover {
        opacity: 0.7;
    }
    
    #pagination {
        display: none;
    }
    #mouse-wheel {
        display: none;
    }
    #mouse-indicator .mouse-mobile{
        display: block;
        position: fixed;
        left: 40px;
        top: 90%;
        animation-name: wheelBounce;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: linear; 
        animation-fill-mode: both; 
        cursor: pointer;

    }
    #mouse-indicator .mouse-text{
        display: none;
    }
    #mouse-indicator .img-mouse{
        display: flex;
        flex-direction: column;
        transition: transform 1s;
    }
    #mouse-indicator .img-mouse img:first-child{
        margin-bottom: 5px;
    }
    .content-reach-us{
        display: block;
        margin-top: 25vh;
    }
    .loading svg{
        height: 64.8px;
        width: 211.78px;
    } 
    #sound{
        display: none;
    }
    .privacy-content{
        height: 70%;
        margin: 5vw 7vw 0 7vw;
    }
    .privacy-policy .title-privacy{
        font-size: 48px;
    }
    .privacy-policy .text-privacy{
        width: 100%;
        font-size: 16px;
    }
    .privacy-policy .text-privacy span, .privacy-policy .text-privacy p{
        font-size: 16px;
    }
    
    .privacy-policy .close-btn{
        top: 10vw;
    }
}
/* tablet devices config */
@media only screen and (min-width: 767px) and (max-width: 1200px) {
    body{
        position: relative;
        height: auto;
    }
    html{
        height: auto;
    }
    h1, h1 span{
        font-size: 58px;
        font-family: 'Work Sans';
        letter-spacing: 0px;
        font-weight: 100;
        text-transform: none;
        opacity: 1;
    }
    h2{
        font-size: 35px;
        font-family: 'Work Sans';
        letter-spacing: 0px;
        font-weight: 100;
        text-transform: none;
        opacity: 1;
    }
    h1 {
        margin: 30px 0;
    }
    #scrolling-area, .about-us, .topic-solutions, .topic-partnership{
        display: none !important;
    }
    #fullpage{
        display: block !important;
        padding: 1px 62px 1px 62px;
    }
    .info-text,.title-text{
        font-size: 16px;
        font-family: 'Work Sans';
        letter-spacing: 4.8px;
        font-weight: normal;
    }
    .topic-4itfuture .topic-title{
        position: relative;
        top: 5vh;
    }
    #info-titles{
        display: block;
        position: fixed;
        top: 30vh;
        padding: 0 0 0 0;
        transition: visibility 0.3s ;
        z-index: 51;
        text-align: center;
        width: 100%;
    }
    #info-titles p {
        margin-bottom: 25px;

    }
    #info-titles h2{
        margin: 10px 0 15px 0;
    }
    .portrait{
        display: none;
    }
    .services ul{
        text-align: center;
        margin-top: 23vh;
        padding-top: 0px;
        columns: 2;
        -moz-columns: 2;
        -webkit-columns: 2;
        padding: 0 0 25px 0;
    }
    .services li{
        font-size: 22px;
        font-family: 'Work Sans';
        letter-spacing: 0px;
        font-weight: 100;
        margin: 0 0 25px 0;
    }
    .details ul{
        margin-top: 23vh;
        padding-top: 0px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        text-align: left;
    }
    .details li{
        font-size: 70px;
        font-family: 'anodina';
        letter-spacing: 0px;
        margin: 0 0 20px 0;
        font-weight: normal;
        opacity: 0.9;
    }
    .details span{
        font-size: 20px;
        font-family: 'anodina';
        letter-spacing: 6px;
        font-weight: normal;
        opacity: 0.9;
    }
    .clients ul{
        text-align: center;
        width: 85%;
        margin: auto;
        display: flex;
        justify-content: space-evenly;
        margin-top: 30vh;
        flex-wrap: wrap;
    }
    .clients .client-desktop{
        display: none;
    }
    .clients .client-mobile{
        display: block;
        margin: auto;
    }
    .clients li{
        margin: 0 0 85px 0;
        display: flex;
        justify-content: center;
    }
    
    .clients .client-ctt, .clients .client-rir, .clients .client-ericsson{
        flex: 1 0 33%;
        align-self: center;
    }
    
    .clients .client-ctt svg{
        width: 55px;
        height: 34px;
    }
    .clients .client-ericsson svg{
        width: 62px;
        height: 54px;
    }
    .clients .client-rir svg{
        width: 173px;
        height: 44px;    
    }
    .clients .client-rtp svg{
        width: 115px;
        height: 23px;
        align-self: center;

    }
    .solutions{
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0;
        padding: 0;
        height: auto;
        position: relative;
    } 
    
    .solutions .img{
        text-align: left;
        padding: 0 0 6vh 0;

    }
    .solutions-content{
        width: fit-content;
        margin: auto;
        margin-top: 38vh;
    }

    .solutions-content .ebiz{
        margin-top: 25px;
    }
    .solutions-content .biz svg{
        width: 195px;
        height: 76px;
    }
    .solutions-content .ebiz svg{
        width: 218px;
        height: 76px;
    }
    .solutions-content .uxp svg{
        width: 232px;
        height: 76px;
    }
   
    .partner-content{
        margin-top: 15vh;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        width: 100%;
    }
    .partner-content .microsoft{
        align-self: center;
        padding-bottom: 65px;
    }
    .partner-content .microsoft svg{
        width: 174px;
        height: 105px;
    }
    .partner-content .assoft{
        align-self: center;
        margin-left: 0;
    }
    .partner-content .assoft svg{
        width: 225px;
        height: 48px;
    }
    #form-section {
        width: 85%;
        margin: auto;
        transition: opacity 0.15s, transform 0.15s;
        overflow: hidden;
        padding: 0;
    }
    #form-section .check-submit {
        flex-direction: row;
    }
    #form-section .check-label a{
        font-weight: normal;
    }
    /* #form-section .check-submit {
        flex-direction: column;
    } */
    #form-section .check-option {
        margin-bottom: 25px;
    }
    #form-section .button-submit {
        text-align: center;
    }
    #form-section .input-text input {
        padding: 0 0 20px 0;
    }
    #success-message{
        font-size: 52px;
        right: 0;
        width: 100%;
        text-transform: unset;
        top: 45vh;
        opacity: 0;
    }
    .info{
        margin: 0;
        padding: 0;
        flex-direction: column;
        height: 100vh;
        position: relative;
        justify-content: unset;
    }
    .info .info-content{
        margin-top: 30vh;
    }
    .info .mobile a{
        font-size: 18px;
        font-family: 'work sans';
        letter-spacing: 0px;
        font-weight: 400;
        margin-bottom: 0;
    }
    .info .location span{
        font-weight: 400;
    }
    .info .mailto svg{
        height: 33.38px;
        width: 35.73px;
    }
    .info .mobile, .info .location{
        display: block;
        margin: 0 0 60px 0px;
        flex: unset;
        text-align: center;

    }
    .info .mobile{
        margin-top: 32px;
        text-align: center;
    }
    .info .mobile svg{
        width: 45px;
        height: 45px;
    }
    .info .location svg{
        width: 45px;
        height: 45px;
    }
    .info .contact-text{
        padding-left: 0px;
        padding-top: 10px;
        text-align: center;
    }
    .info .contact-text p{
        font-size: 16px;
    }
    .info .location span{
        font-size: 16px;
        /* text-transform: none; */
    }
    .header .logo-text {
        display: none;
    }
    .header .logo-mark {
        padding: 78px 0 0 62px;
    }
    .header .logo-mark svg{
        height: 50.48px;
        width: 164.96px;
    }
    .social-mobile{
        display: none;
    }
    .social-desktop{
        display: block;
    }
    .social {
        position: absolute;
        top: 93px;
        right: 60px;
        color: #fff;
        font-size: 16px;
        z-index: 9999;
    }
    .social a{
        text-decoration: none;
    }
    .social li {
        float: left;
    }
    .social .share{
        display: none;
    }
    .social li.share:after {
        content: "";
        width: 7.5vw;
    }
    .social li {
        margin: 0 0 0 3.5vw;
        transition: opacity 0.2s;
    }
    .social li.icon:hover {
        opacity: 0.7;
    }
    
    #pagination {
        display: none;
    }
    #mouse-wheel {
        display: none;
    }
    #mouse-indicator .mouse-mobile{
        display: flex;
        flex-direction: row;
        position: fixed;
        left: 60px;
        top: 90%;
        cursor: pointer;
    }
    #mouse-indicator .mouse-animation{
        animation-name: wheelBounce;
        animation-duration: 1s;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: linear; 
        animation-fill-mode: both; 
    }
    #mouse-indicator .img-mouse{
        display: flex;
        flex-direction: column;
        transition: transform 1s;
    }
    .mouse-text{
        font-size: 1rem;
        letter-spacing: 4.8px;
        color: #fff;
        margin: 5px 30px;
        text-transform: uppercase;
    }
    #mouse-indicator .img-mouse img:first-child{
        margin-bottom: 5px;
    }
    .content-reach-us{
        display: block;
        margin-top: 25vh;
    }
    .loading svg{
        height: 64.8px;
        width: 211.78px;
    } 
    #sound{
        display: block;
        right: 60px;
    }
    .privacy-content{
        height: 70%;
        margin: 5vw 7vw 0 7vw;
    }
    .privacy-policy .title-privacy{
        font-size: 48px;
    }
    .privacy-policy .text-privacy{
        width: 100%;
        font-size: 16px;
    }
    .privacy-policy .text-privacy span, .privacy-policy .text-privacy p{
        font-size: 16px;
    }
    
    .privacy-policy .close-btn{
        top: 10vw;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1200px) {
    .social .share {
        display: block;
    }
    #info-titles {
        top: 28vh;
    }
    .services ul {
        margin: auto;
        margin-top: 35vh;
        width: 70%;
    }
    .details ul {
        justify-content: space-evenly;
        margin-top: 25vh
    }
    .clients .client-ctt, .clients .client-rir, .clients .client-ericsson {
        flex: unset;
        align-self: center;
    }
    .solutions-content {
        margin: auto;
        width: unset;
        margin-top: 30vh;
        display: flex;
        justify-content: space-evenly;
    }
    .solutions-content .ebiz {
        margin-top: 0;
    }
    
    .partner-content {
        margin-top: 30vh;
        justify-content: space-evenly;
    }
    #form-section {
        width: 63%;
    
    }
    .info .info-content {
        display: flex;
        justify-content: space-evenly;
    }
    
    .info .mobile, .info .location {
        display: flex;
        margin: 0;
    }
    .info .contact-text {
        display: flex;
        flex-direction: column;
        text-align: left;
        padding-left: 30px;
        padding-top: 0;
    }
    
   
}
/* details config */
@media screen and (max-height: 806px) and (max-width: 767px) {
    #scrolling-area {
        padding: 1px 0px 1px 40px;
    }
}
/* iPhone 6 (height) */
@media screen and (max-height: 569px) and (max-width: 767px) {
    .header .logo-mark {
        padding: 35px 0 0 37px;
    }
    .about-us{
        width: 90% !important;
    } 
    .topic-about-us h2{
        margin-top: 30px;
    } 
    .services li{
        margin: 15px 0;
    }
    .clients li {
        margin: 0 0 50px 0;
    }
    .topic-solutions{
        width: 85% !important;
    }
    #form-section .input-text {
        margin: 0 0 20px 0;
        text-align: left;
    }
    #form-section .input-text label {
        font-size: 16px;
        font-family: "Work Sans";
    }
    #form-section .check-option {
        padding: 0px 0 0 25px;
    }
    #form-section .check-label {
        font-size: 12px;
        padding: 0 0 0 15px;
        font-family: "Work Sans";
    }
    #form-section .check-submit button {
        width: 218px;
        height: 52px;
    }
    #form-section .success-message{
        font-size: 52px;
        right: 32vw;
    }
    #error-message{
        font-size: 12px;
        font-weight: bold;
        letter-spacing: 0;
        padding: 0 0 5px 0;
      }
    .info{
        margin: 0;
        width: 60%;
    }
    
    .info .mobile{
        margin-top: 30px;
    }
    .info .location{
        margin: 0;
    }
    .info .contact-text {
        padding-top: 10px;
    }
    .info p {
        margin-bottom: 10px;
    }
} 
@media screen and (min-width: 445px) and (max-width: 475px) {
    h1{
        margin-right: 30px;
    }

}
/* iPhone 5 (width) */
@media screen and (max-width: 475px) {
    
     h1 span {
        margin-right: 100px;
    }
    .topic-4itfuture {
        padding: 0px 110px 0 0px;
    }
    .loading svg{
        left: 20vw;
    }
    .img-load{
        left: 20%;
    }
}
@media screen and (max-width: 400px) {
    
    .topic-4itfuture {
        padding: 0px 80px 0 0px;
    }
    
}

@media screen and (max-height: 767px) and (max-width: 768px) and (orientation: landscape) { 
    .clickLoad{
        display: none;
    }
    .portrait{
        transition: opacity 1s;
        display: block;
        opacity: 0;
    }
    .portrait p{
        margin-top: 40px;
    }

}
@media screen and (max-height: 550px) and (max-width: 768px){ 
    #form-section .input-text {
        margin: 0 0 15px 0;
    }
    #form-section .check-option {
        margin-bottom: 15px;
    }
    #info-titles h2 {
        margin: 0px 0 15px 0;
    }
    .services li {
        margin: 8px 0;
    }
    .details li {
        margin: 0 0 10px 0;
    }
    .clients li {
        margin: 0 0 30px 0;
    }
    .clients .client-rir {
        margin: 20px 0;
    }
    .solutions-content .img {
        padding: 0 0 3vh 0;
    }
    .info .mobile {
        margin: 0 0 15px 0px;
    }
}