@media screen and (min-width: 300px) and (max-width:600px) {
    /*mobile section*/
     
     /*mobile section*/
      /*section 1*/
      /*c1*/
      .barbot{display: none;}
      .casalcontent1 {width: 100%;
        height: 33vh;
        margin-left: 5%;}
      #boxcontent1 {width: 100%;
        height: 44vh;
        margin-top: 7vh;
        margin-left: 0%;}
      .content {font-size: 10px;
        width: 100%;
        margin-left: 1%;}
      .contentEN {font-size: 9px;margin-top: 14%;width: 100%; margin-left: 1%;}
      .subject {font-family: 'Prompt', sans-serif;
        /* margin-left: 8%; */
        /* margin-top: 5%; */
        font-size: 15px;
        font-weight: bold;}
      .subjectEN {font-family: 'Prompt', sans-serif;margin-left: 8%;margin-top: 8%;font-size: 14px;font-weight: bold;}
      .imgcamo{ height:32vh;}
      /*c1*/
      /*c2*/
      .subjectMA {margin-left: 37%;margin-top: 6%;font-size: 20px;}
      .subjectMAEN { margin-left: 30%;margin-top: 6%;font-size: 18px;}
      .boxTopkc {width: 100%;margin-top: 21%;margin-left: -2%;}
      .charMA {font-size:5px;width: 15%;height: 17%;margin-top: 23%;}
      .charMAE {font-size: 4px;width: 15%;text-align: center;height: 12%;margin-top: 22%;}
      .boxbotkc {width: 100%;margin-top: 60%;margin-left: -2%;}
    
      /*c2*/
       /*c3*/
       .HeOf{
        background: rgba(249, 249, 249, 0.5);
        height: 12vh;
        
       }
       .namesite {margin-top: 3%;font-size: 8px;margin-left: 2%;}
       .imgcontact {width: 25%;margin-top: 1%;height: 8vh;margin-left: 9%;}
       .boxfont {font-size: 9px;position: absolute;width: 58%;margin-top: -17%;margin-left: 38%;}
         #desktop{
           display: none;
       }
       #mobile{display:block;}
/*contact*/
       /*c3*/
        /*c4*/
        .scal1 {margin-left: 11%;margin-top: 21%;width: 117%;}
        .iconAd {width: 26%;margin-left: 22%;margin-top: 12%;}
        .stuc {width: 28%;}
        .stuc1 {margin-top: 8.5%;margin-left: 4%;}
        .stuc4 {margin-top: 29%;margin-left: 4%;}
        .stuc2 {margin-left: 39%;margin-top: 7.4%;}
        .stuc3 {margin-top: 29.5%;margin-left: 39%;}
        .fontAd {font-size: 8px;margin-top: 19%;}
        .fontstuc {font-size: 6px; width: 22%;}
        .Qulityfont {margin-left: -4%;margin-top: 46%;}
        
       
        .Natfont {margin-left: 4%;margin-top: 38%;}
        .green {margin-top: 22%;margin-left: 9%;width: 13%;}
        .iso {margin-top: 19%;margin-left: -3%;width: 13%;}
        .iso2 {margin-left: 51%;margin-top: 20%;width: 6%;}
        .osas {margin-top: 19.5%;margin-left: 62%;width: 6%;}
       /*c4*/
       /*c5*/
       .textsafe2EN {font-size: 10px;}
       .textsafe2 {width: 83%;font-size: 10px;}
       .imsafe3 { margin-top: 13%;}
       .imsafe2 {margin-top: 13%;}
       .imsafe1 {height: 24vh;}
       .textsafe {font-size: 20px;margin-top: 17%;}
       .sefe0 {font-size: 11px;}
       /*c5*/
       /*c6*/
       .subQuality {margin-top: 7%;font-size: 15px;}
       .textbottomQ {font-size: 8px;width: 94%;text-align: center;margin-top: 81%;margin-left: -5vh;}
       .textcontentQ { font-size: 8px; }
       .contentQ1 {margin-left: 4vh;width: 82%;border: none;height: 10vh;}
       .contentQ4 {margin-top: 21%;margin-left: -42.1vh;width: 82%;border: none;height: 11vh;}
       .contentQ2 {margin-top: 20%;margin-left: 4vh;width: 82%;border: none;height: 10vh;}
       .contentQ3 {margin-top: -1%;margin-left: 4vh;width: 82%;border: none;height: 11vh;}
       .barQuality {width: 40%;margin-top: 63%;margin-left: 19%;}
       .textQ1 {font-size: 10px;}
       .lcon{margin-top:0%}
        /*c6*/
        /*c7*/
        .lefe {width: 7%;}
        .SubNL {width: 100%;margin-top: 2px;margin-left: 0%;font-size: 17px;}
        .conNL {width: 100%;margin-top: 1px;margin-left: 0%;font-size: 9px;}
        .conNL2 {margin-top: 1%;width: 51%;margin-left: 2%;font-size: 6px;}
        .conNL3 {margin-top: 1%;width: 45%;margin-left: 54%;font-size: 6px;}
        /*c7*/
   /* .barbot {margin-top: 67vh;} */
   .fontOr {margin-top: 11.5%;margin-left: 11%;font-size: 8px;}.fontBU{margin-top: 11.5%;margin-left: 56%;font-size: 8px;}
   .fontCe {margin-top: 11.5%;margin-left: 105%;font-size: 8px;}.fontSf {margin-top: 26%;margin-left: 43.5%;font-size: 8px;}
   .fontOr2 {margin-top: 12.5%;margin-left: 2%;font-size: 9px;}.fontBU2{margin-top: 12.5%;margin-left: 51%;font-size: 9px;}
   .fontCe2 {margin-top: 12.5%;margin-left: 102.5%;font-size: 8px;}.fontSf2 {margin-top: 26%;margin-left: 46%;font-size: 9px;}
   .fontQr {margin-top: 26%;margin-left: 88%;font-size: 8px;} .fontQr2 {margin-top: 26%;margin-left: 88%;font-size: 9px;}
   .fontNL {margin-top: 26%;margin-left: 74%;font-size: 8px;}.fontNL2 {margin-top: 26%;margin-left: 73.7%;font-size: 9px;}
   .icon1{margin-left: 11%;width: 11%;margin-top: 2%;}
   .icon2{margin-left: 61%;width: 11%;margin-top: 2%;}
   .icon3 {margin-left: 108%;width: 11%;margin-top: 2%;}
   .icon4 {margin-left: 51%;width: 11%;margin-top: 15.5%;z-index: 1;}
   .icon5 {margin-left: 93%;width: 11%;margin-top: 15.5%;}
   .icon6 {margin-left: 79%;width: 11%;margin-top: 15.5%;}
   #hover1 {width: 13%;margin-top: 0.5%; margin-left: 7%;}
   #hover2 {width: 13%;margin-top: 1%; margin-left: 44%;}
   #hover3 { width: 13%;margin-top: 1%;margin-left: 79%;}
   #hover4 { width: 13%;margin-top: 14.5%;margin-left: 26%;}
   #hover5 {width: 13%;margin-top: 14.5%;margin-left: 63%;}
   #Or2,#CT2,#SER2,#SA2,#QL2{display: block;}#Or,#CT,#SER,#SA,#QL{display: block;}
      /*section 1*/
       /*section 2*/
   #boxPcon {margin-top: 130%;}
   #boxlogo {animation: sr 1s;position: absolute;width: 100%; margin-left: 50%;margin-top: 25%;}
   .barringth {position: absolute;float: right;width: 43%;margin-left: 31%;}
   .logoSU {position: absolute;width: 15%;margin-left: 34%;margin-top: 14%;}
   .logoP {position: absolute;width: 15%;margin-left: 34%;margin-top: 30%;}
   .logoE {position: absolute; width: 15%;margin-left: 34%;margin-top: 47%;}
   .logoD {position: absolute;width: 15%;margin-left: 34%;margin-top: 65%;}
   .logoSI { position: absolute;width: 15%;margin-left: 34%;margin-top: 81%;}
   #project {margin-top: 1%; margin-left: 5%; font-size: 17px;}
   #fontlong {font-size: 11px;}
   #Owner {margin-top: 16%;font-size: 10px;}
   #Activities {margin-top: 20%;}
   .fontBold {font-size: 8px;}
   #projectIP {width: 60%;margin-top: 29%;margin-left: 10%;}
   #boxIP,#boxStuc,#boxSupPi,#boxpain,#boxStaff {height: 7vh;}
   .subT{font-size: 8px;}.DataP{font-size:7px}
   #Projecttext {margin-top: 0%;}
    /*section 2*/
    .devcontent {background-position-x: 65%;background-position-y: -58vh;}
    .textgra { margin-top: 29%;margin-left: 5%;font-size: 17px;}
    .imgIT { width: 22%;margin-top: 7%;margin-left: 25%;}
    .textboxIT {    width: 28%;
       font-size: 8px;
       margin-left: 50%;
       margin-top: 10%;}
    .sceenhover {width: 21%;height: 29%;margin-top: 3%;margin-left: 23%;}
    .imgTE {width: 13%;margin-top: 11%;margin-left: 28%;}
    .imgTE1 {width: 7%;margin-left: 38%;margin-top: 4%;}
    .imgTE2 {width: 7%; margin-top: 24%;margin-left: 37%;}
    .textboxEN {width: 50%; font-size: 8px; margin-left: 46%; margin-top: 10%;}
    .BGIT {background-position: center center; background-position-x: 74%;}
    .textIT1 {margin-top: 19vh;font-size: 26px;margin-left: -85%;}
    .textIT2 {font-size: 20px;margin-top: 24vh;margin-left: -3vh;}
    .system1 {width: 42%;margin-top: 96%;margin-left: -1%;}
    .textDEPART {font-size: 14px;}
    .system2 {width: 42%;margin-top: 70%;margin-left: 0%;}
    .system3 {margin-top: 9%; margin-left: 3%;}
    .system4 {width: 45%; margin-top: 51.5%;margin-left: -1%;}
    .system5 {width: 35%; margin-top: 0%;margin-left: 20%;}
    .system6 { width: 35%;margin-top: 31%;margin-left: 8%;}
    .system7 {width: 45%;height: 30vh;margin-top: 96.5%;margin-left: 47%;}
    .system8 {margin-top: 26%; margin-left: 78%;}
    .iconIT4 {display: none}
    .textEN {margin-top: 324%;margin-left: -101%;width: 6%;}
    .scan {width: 77%;margin-top: 310%;margin-left: -28%;height: 28%;}
    #TEC {background-position-x: 28%;}
    .textTEC {font-size: 37px;}.ITEC7 {margin-left: -32%;margin-top: 54%;width: 46%;}
    .ITEC5 {margin-left: -30%;margin-top: 89%;width: 36%;}
    .ITEC2 {margin-top: 48%;margin-left: 23%;width: 43%;}
    .ITEC1 { margin-top: 81%;margin-left: 34%;width: 53%;}
    .ITEC4 {margin-top: 129%;margin-left: 62%;width: 27%;}
    .ITEC6 {margin-top: 47%;width: 26%;margin-left: 76%;}
    .ITEC3 {margin-top: 150%;margin-left: 26.5%;width: 31%;}
    .textgra2 {font-size: 16px;margin-top: 25%;margin-left: 17%; width: 100%;}
}
@media screen and (min-width: 500px) and (max-width:750px) {
    /*mobile section*/
     
     /*mobile section*/
      /*section 1*/
      /*c1*/
      .casalcontent1 {    width: 35%;height: 33%;margin-left: 33%;margin-top: 3%;}
      #boxcontent1 {width: 100%;height: 50vh;margin-top: 30vh;margin-left: 0%;}
      .content {font-size: 9px;margin-top: 8%;width: 100%; margin-left: 1%;}
      .contentEN {font-size: 7px;margin-top: 8%;width: 100%;margin-left: 1%;}
      .subject {  margin-left: 8%;margin-top: 4%;font-size: 20px;}
      .subjectEN {margin-left: 8%;margin-top: 5%;font-size: 14px;}
      .imgcamo{ height:32vh;}
      /*c1*/
      /*c2*/
      .subjectMA {width: 76%;margin-top: 1%;margin-left: 46%;font-size: 14px;}
      .subjectMAEN { margin-left: 30%;margin-top: 6%;font-size: 18px;}
      .boxTopkc {width: 76%;margin-top: 4%;margin-left: 11%;}
      .charMA {font-size: 5px;width: 15%;height: 30%;margin-top: 9%;}
      .charMAE {font-size: 4px;width: 15%;text-align: center;box-shadow: 2px 2px 2px rgba(0,0,0,0.5);height: 12%;margin-top: 22%;}
      .boxbotkc {width: 76%;margin-top: 15%;margin-left: 12%;}
      
       .barcontent2 {height: 66vh;}
      /*c2*/
       /*c3*/
       .barcontent3 {height: 67vh;}
       .boxOR {width: 54%;margin-top: -25%;margin-left: 33%;}
       .boxfont {margin-left: 27%;font-size: 15px;margin-top: 62%;}
       .maping {width: 59%;margin-left: 6%;margin-top: 46%;}
       .namesite {font-size: 10px;}.poco {font-size: 7px;}
       .Headoffice {margin-left: 17.5%;margin-top: 46%;width: 17%;height: 9.5vh;}
       .shoprayong {margin-left: 17.5%;margin-top: 84%;width: 17%;height: 9.5vh;}
       .training {margin-top: 84%;margin-left: 35.5%;width: 17%;height: 9.5vh;}
       .shoplaem {margin-left: 35.5%;margin-top: 46%;width: 17%;height: 9.5vh;}
       .laem2 {margin-left: 46%;margin-top: 54%;}
       .fontoffice2 {margin-left: 1%;margin-top: 54%;}
       .rayong2 {margin-left: 1%;margin-top: 71%;}
       .fontTraining2 {margin-top: 66%;margin-left: 46%;width: 30%;}
       .fontoffice {margin-left: -2%;margin-top: 47%;}
       .rayong {margin-left: -8%;margin-top: 86%;}
       .laem {margin-left: 54%;margin-top: 48%;width: 30%;}
       .fontTraining {margin-top: 85%;margin-left: 54%;}
       
       /*c3*/
        /*c4*/
        .scal1 {margin-left: 29%;margin-top: -5%;width: 67%;}
        .iconAd {width: 26%;margin-left: 22%;margin-top: 12%;}
        .stuc {width: 28%;}
        .stuc1 {margin-top: 8.5%;margin-left: 4%;}
        .stuc4 {margin-top: 29%;margin-left: 4%;}
        .stuc2 {margin-left: 39%;margin-top: 7.4%;}
        .stuc3 {margin-top: 29.5%;margin-left: 39%;}
        .fontAd {font-size: 8px;margin-top: 19%;margin-left: 36%;}
        .fontstuc {font-size: 7px; width: 16%;}
        .Qulityfont {margin-left: 4%;margin-top: 12%;}
       
        .Natfont {margin-left: 4%;margin-top: 33%;}
        .green {margin-top: 22%;margin-left: 9%;width: 13%;}
        .iso {margin-top: 19%;margin-left: -3%;width: 13%;}
        .iso2 {margin-left: 51%;margin-top: 20%;width: 6%;}
        .osas {margin-top: 19.5%;margin-left: 62%;width: 6%;}
       /*c4*/
       /*c5*/
       .textsafe2EN {font-size: 10px;}
       .textsafe2 {width: 83%;font-size: 10px;}
       .imsafe3 {margin-top: 3%;width: 14%;}
       .imsafe2 {margin-top: 3%;width: 15%;margin-left: 31%;}
       .imsafe1 {height: 153%;}
       .textsafe {font-size: 20px;margin-top: 1%;}
       .logosafe {width: 7%;margin-top: 0%;margin-left: 10%;}
       /*c5*/
       /*c6*/
       .textbottomQ {font-size: 8px;width: 94%;text-align: center;margin-top: 81%;margin-left: -5vh;}
       .textcontentQ { font-size: 8px; }
       .contentQ1 {margin-top: 69%;margin-left: -8vh;width: 29%;}
       .contentQ4 {margin-top: 67%;margin-left: 57%;width: 35%;}
       .contentQ2 {margin-top: 56%;margin-left: -3vh;width: 33%;}
       .contentQ3 {margin-top: 56%;margin-left: 51%;width: 35%;}
       .barQuality {width: 40%;margin-top: 63%;margin-left: 19%;}
       .textQ1 {width: 41vh;position: absolute;font-size: 9px;margin-top: 61vh;margin-left: -11.5vh;}
        /*c6*/
        .boxQR {width: 53%;margin-top: -26%;margin-left: 31%;}
   /* .barbot {margin-top: 29%; height: 19%;} */
   .fontOr {margin-top: 5%;margin-left: 7%;font-size: 11px;}.fontBU{margin-top: 5%;margin-left: 23%;font-size: 11px;}
   .fontCe {margin-top: 5%;margin-left: 46%;font-size: 11px;}.fontSf {margin-top: 5%;margin-left: 66%;font-size: 11px;}
   .fontOr2 {font-size: 9px;margin-top: 5.5%;width: 100%;margin-left: 5%;}.fontBU2{margin-top: 5.5%;margin-left: 23%;font-size: 9px;}
   .fontCe2 {margin-top: 5.5%;margin-left: 45.5%; font-size: 8px;}.fontSf2 {margin-top: 5.5%;margin-left: 70%;font-size: 9px;}
   .fontQr   {margin-top: 5%;margin-left: 85%;font-size: 11px;} .fontQr2 {margin-top: 5.5%;margin-left: 87%;font-size: 9px;}
   .icon1{margin-left: 18%;width: 11%;margin-top: 2%;}
   .icon2{margin-left: 59%;width: 11%;margin-top: 2.5%;}
   .icon3 {margin-left: 100%;width: 11%;margin-top: 2.5%;}
   .icon4 {margin-left: 58%;width: 11%;margin-top: 15.5%;z-index: 1;}
   .icon5 {margin-left: 91%;width: 11%;margin-top: 15.5%;}
   .icon6 {margin-left: 70%;width: 11%;margin-top: 15%;}
   #hover1 {width: 7%;margin-top: -0.5%;margin-left: 7.5%;}
   #hover2 {width: 7%;margin-top: -0.5%;margin-left: 26.5%;}
   #hover3 { width: 7%;margin-top: -0.5%;margin-left: 48.5%;}
   #hover4 {width: 7%;margin-top: -0.5%;margin-left: 70.5%;}
   #hover5 {width: 7%;margin-top: -0.5%;margin-left: 87.5%;}
   #Or2,#CT2,#SER2,#SA2,#QL2{display: block;}#Or,#CT,#SER,#SA,#QL{display: none;}
      /*section 1*/
       /*section 2*/
      #boxPcon {margin-top: 24%;}
      #boxlogo {animation: sr 1s;position: absolute;width: 28%;margin-left: 83%;margin-top: 4%;}
      @keyframes sr {
          form{
              margin-left: 100%
          }
          to{
             
          }
          
      }
   .barringth {position: absolute;float: right;width: 43%;margin-left: 31%;}
   .logoSU {position: absolute;width: 15%;margin-left: 34%;margin-top: 14%;}
   .logoP {position: absolute;width: 15%;margin-left: 26%;margin-top: 30%;}
   .logoE {position: absolute; width: 15%;margin-left: 23%;margin-top: 47%;}
   .logoD {position: absolute;width: 15%;margin-left: 26%;margin-top: 65%;}
   .logoSI { position: absolute;width: 15%;margin-left: 34%;margin-top: 81%;}
   #project {margin-top: -9%; margin-left: 5%; font-size: 20px;}
   #fontlong {font-size: 11px;}
   #Owner {margin-top: -5%;font-size: 10px;}
   #Activities {margin-top: -2%;}
   .fontBold {font-size: 8px;}
   #projectIP {width: 28%;margin-top: -7%;margin-left: 51%;}
   #boxIP,#boxStuc,#boxSupPi,#boxpain,#boxStaff {height: 7vh;}
   .subT{font-size: 8px;}.DataP{font-size:7px}
   #Projecttext {margin-top: -2%;}
    /*section 2*/
    .datacom {margin-top: 27%;}
    .datatec {margin-top: 27%;}
    .devcontent {background-position-x: 65%;background-position-y: -58vh;}
    .textgra { margin-top: 4%;margin-left: 28%;font-size: 17px;}
    .imgIT { width: 14%; margin-top: 0%;margin-left: 28%;}
    .textboxIT {width: 28%;font-size: 8px;margin-left: 44%; margin-top: 4%;;}
    .sceenhover {width: 21%;height: 29%;margin-top: 3%;margin-left: 23%;}
    .imgTE {width: 10%;margin-top: 4%;margin-left: 28%;}
    .imgTE1 {width: 5%;margin-left: 38%;margin-top: 4%;}
    .imgTE2 {width: 5%;margin-top: 10%; margin-left: 37%;}
    .textboxEN {width: 50%;font-size: 8px;margin-left: 47%;margin-top: 7%;}
    .BGIT {background-position: center center; background-position-x: 74%;}
    .textIT1 {margin-top: -15%;font-size: 19px;margin-left: 7%;}
    .textIT2 {font-size: 14px;margin-top: 4vh;margin-left: 20vh;}
    .system1 {width: 19%;margin-top: 13%;margin-left: 45%;}
    .textDEPART {font-size: 14px;}
    .system2 {width: 22%;margin-top: 12%;margin-left: 25%;}
    .system3 {margin-top: 14%;margin-left: 6%;width: 17%;}
    .system4 {width: 23%;margin-top: 3.5%;margin-left: 22%;}
    .system5 {width: 20%;margin-top: 8%; margin-left: 1%;}
    .system6 {width: 21%;margin-top: -1%;margin-left: 4%;}
    .system7 {width: 25%;height: 30vh;margin-top: 2.5%;margin-left: 40%;}
    .system8 { margin-top: 15%; margin-left: 86%;}
    .iconIT4 {margin-top: 337%;margin-left: -124%;}
    .textEN {margin-top: 13%;margin-left: 0;width: 6%;}
    .scan {width: 37%;margin-top: 0%;margin-left: 0%;height: 34%;}
    #TEC {background-position-x: 28%;}
    .textTEC {font-size: 16px;}.ITEC7 {margin-left: 44%;margin-top: 20%;width: 18%;}
    .ITEC5 {margin-left: -30%;margin-top: 73%;width: 31%;}
    .ITEC2 {margin-top: 18%;margin-left: 6%;width: 24%;}
    .ITEC1 {margin-top: 7%;margin-left: 41%;width: 26%;}
    .ITEC4 {margin-top: 54%;margin-left: 71%;width: 27%;}
    .ITEC6 {margin-top: 17%;width: 17%;margin-left: 85%;}
    .ITEC3 {margin-top: 4%;margin-left: 17.5%; width: 16%;}
}
@media screen and (min-width: 750px) and (max-width:800px) {
    /*mobile section*/
     
     /*mobile section*/
      /*section 1*/
      /*c1*/
      .casalcontent1 {width: 65%;height: 17%; margin-left: 18%; margin-top: 6%;}
      #boxcontent1 {position: absolute;width: 100%;height: 50vh;margin-top: 30vh;margin-left: 0%;}
      .content {font-size: 10px;margin-top: 14%;width: 100%; margin-left: 1%;}
      .contentEN {font-size: 9px;margin-top: 14%;width: 100%; margin-left: 1%;}
      .subject {
        
        margin-left: 8%;
        margin-top: 10%;
        font-size: 20px;
        font-weight: bold;
    }
      .subjectEN {font-family: 'Prompt', sans-serif;margin-left: 8%;margin-top: 8%;font-size: 14px;font-weight: bold;}
      .imgcamo{ height:32vh;}
      /*c1*/
      /*c2*/
      .subjectMA {margin-left: 44%;margin-top: 6%;font-size: 20px;}
      .subjectMAEN { margin-left: 40%;margin-top: 6%;font-size: 18px;}
      .boxTopkc {width: 71%;margin-top: 12%;margin-left: 13%;}
      .charMA {font-size: 9px;width: 15%;height: 17%;margin-top: 17%;}
      .charMAE {font-size: 7px;width: 15%;text-align: center;height: 12%;margin-top: 17%;background: none;color: #484600;}
      .boxbotkc {width: 71%;margin-top: 33%;margin-left: 13%;}
    
      /*c2*/
       /*c3*/
       .namesite { font-size: 11px;}
       .boxfont {font-size: 70%;}
    
       /*c3*/
        /*c4*/
        .scal1 { margin-top: 1%; width: 100%;}
        .iconAd {width: 17%;margin-left: 28%;margin-top: 12%;}
        .stuc {width: 28%;}
        .stuc1 {margin-top: 8.5%;margin-left: 4%;}
        .stuc4 {margin-top: 29%;margin-left: 4%;}
        .stuc2 {margin-left: 39%;margin-top: 7.4%;}
        .stuc3 {margin-top: 29.5%;margin-left: 39%;}
        .fontAd {font-size: 15px;}
        .fontstuc {font-size: 7px; width: 16%;}
        .Qulityfont {margin-left: -5%;margin-top: 33%;}
       
        .Sefetyfont {margin-top: 33%;}
        .Natfont {margin-left: 17%;margin-top: 33%;}
        .green {margin-top: 22%;margin-left: 9%;width: 13%;}
        .iso {margin-top: 19%;margin-left: -3%;width: 13%;}
        .iso2 {margin-left: 51%;margin-top: 20%;width: 6%;}
        .osas {margin-top: 19.5%;margin-left: 62%;width: 6%;}
       /*c4*/
       /*c5*/
       .textsafe2EN {font-size: 10px;}
       .textsafe2 {width: 83%;font-size: 10px;}
       
       .imsafe1 {height: 53vh;}
       .textsafe {font-size: 20px;}
       .logosafe {width: 10%;margin-left: 0%;}
       /*c5*/
       /*c6*/
       .textbottomQ {font-size: 12px;width: 100%;text-align: center;margin-top: 0%;margin-left: 0vh;}
       .textcontentQ { font-size: 12px; }
       
       .barQuality {width: 40%;margin-top: 63%;margin-left: 19%;}
       .textQ1 {font-size: 11px;}
        /*c6*/
        .conNL { font-size: 10px;}
        .conNL2 {font-size: 10px;}.conNL3 {font-size: 10px;}
        .Tbarbot{
            position: absolute;
            width: 71%;
            margin-left: 16%;
        }
        .boxQR {
            position: absolute;
            width: 81%;
            margin-top: -15%;
            margin-left: 21%;
        }
   /* .barbot {margin-top: 67vh;} */
   .fontOr {margin-top: 15.5%;margin-left: -10%;font-size: 9px;}.fontBU{margin-top: 15.5%;margin-left: 19%;font-size: 9px;}
   .fontCe {margin-top: 15.5%;margin-left: 53.5%;font-size: 8px;}.fontSf {margin-top: 15.5%;margin-left: 77%;font-size: 9px;}
   .fontOr2 { margin-top: 15.5%;margin-left: -13%;font-size: 9px;}.fontBU2{margin-top: 15.5%;margin-left: 18%;font-size: 9px;}
   .fontCe2 {margin-top: 15.5%;margin-left: 51.5%;font-size: 8px;}.fontSf2 {margin-top: 15.5%;margin-left: 82%;font-size: 9px;}
    .fontNL { margin-top: 15.5%; margin-left: 91.7%;font-size: 9px;width: 24%;}.fontNL2 {margin-top: 15.5%;margin-left: 94.7%;font-size: 9px;}
   .fontQr {margin-top: 15.5%;margin-left: 105%;font-size: 9px;} .fontQr2 {margin-top: 15.5%;margin-left: 105%;font-size: 9px;}
   .icon1{margin-left: -10%;width: 10%;margin-top: 5%;}
   .icon2{margin-left: 22%;width: 10%;margin-top: 5%;}
   .icon3 {margin-left: 56%;width: 10%;margin-top: 5%;}
   .icon4 {margin-left: 82%;width: 10%;margin-top: 5%;z-index: 1;}
   .icon5 {margin-left: 106%;width: 10%;margin-top: 5%;}
   .icon6 {margin-left: 95%;width: 10%;cursor: pointer;margin-top: 5%;z-index: 1;}
   #hover1 {width: 13%;margin-top: 0.5%; margin-left: 7%;}
   #hover2 {width: 13%;margin-top: 1%; margin-left: 44%;}
   #hover3 { width: 13%;margin-top: 1%;margin-left: 79%;}
   #hover4 { width: 13%;margin-top: 14.5%;margin-left: 26%;}
   #hover5 {width: 13%;margin-top: 14.5%;margin-left: 63%;}
   #Or2,#CT2,#SER2,#SA2,#QL2{display: block;}#Or,#CT,#SER,#SA,#QL{display: block;}
      /*section 1*/
       /*section 2*/
      #boxPcon {margin-top: 64%;}
      #boxlogo {animation: sr 1s;position: absolute;width: 100%; margin-left: 50%;margin-top: -2%;}
   .barringth {position: absolute;float: right;width: 43%;margin-left: 31%;}
   .logoSU {width: 11%;margin-left: 35%;margin-top: 14%;}
   .logoP {width: 11%;margin-left: 35%;margin-top: 25%;}
   .logoE {width: 11%;margin-left: 35%;margin-top: 37%;}
   .logoD {width: 11%;margin-left: 35%;margin-top: 50%;}
   .logoSI {width: 11%;margin-left: 35%;margin-top: 62%;}
   #project {margin-left: 5%; font-size: 20px;}
   #fontlong {font-size: 11px;}
   #Owner {font-size: 10px;}
   #Activities {margin-top: 10%;}
   .fontBold {font-size: 8px;}
   #projectIP {width: 32%;margin-top: 10%;margin-left: 38%;}
   #boxIP,#boxStuc,#boxSupPi,#boxpain,#boxStaff {height: 7vh;}
   .subT{font-size: 8px;}.DataP{font-size:7px}
   
    /*section 2*/
    .devcontent {background-position-x: 65%;background-position-y: 0vh;}
    .textgra {margin-top: 8%;margin-left: 32%;font-size: 17px;}
    .imgIT { width: 22%;margin-top: 7%;margin-left: 25%;}
    .textboxIT {    width: 28%;
        font-size: 13px;
       margin-left: 50%;
       margin-top: 10%;}
    .sceenhover {width: 21%;height: 29%;margin-top: 3%;margin-left: 23%;}
    .imgTE {width: 13%;margin-top: 11%;margin-left: 28%;}
    .imgTE1 {width: 7%;margin-left: 38%;margin-top: 4%;}
    .imgTE2 {width: 7%; margin-top: 24%;margin-left: 37%;}
    .textboxEN {width: 50%; font-size: 13px; margin-left: 46%; margin-top: 10%;}
    .BGIT {background-position: center center; background-position-x: 74%;}
    .textIT1 {margin-top: 19vh;font-size: 26px;margin-left: -85%;}
    .textIT2 {font-size: 20px;margin-top: 24vh;margin-left: -3vh;}
    .system1 {width: 42%;margin-top: 20%;margin-left: 10%;}
    .textDEPART {font-size: 14px;}
    .system2 {width: 42%;margin-top: 70%;margin-left: 0%;}
    .system3 {margin-top: 9%; margin-left: 3%;}
    .system4 {width: 45%; margin-top: 51.5%;margin-left: -1%;}
    .system5 {width: 35%; margin-top: 0%;margin-left: 20%;}
    .system6 { width: 36%;margin-top: 38%;margin-left: -1%;}
    .system7 {width: 41%;height: 30vh;margin-top: 59.5%;margin-left: 25%;}
    .system8 {margin-top: -4%; margin-left: 78%;}
    .IT1 {
        margin-top: 8%;
        margin-left: 79%;
    }
    .iconIT4 {display: none}
    .textEN {margin-top: 324%;margin-left: -101%;width: 6%;}
    .scan {width: 77%;margin-top: 310%;margin-left: -28%;height: 28%;}
    #TEC {background-position-x: 28%;}
    .textTEC {font-size: 37px;}.ITEC7 {margin-left: -32%;margin-top: 34%;width: 46%;}
    .ITEC5 {margin-left: -30%;margin-top: 72%;width: 36%;}
    .ITEC2 {margin-top: -2%;margin-left: 2%; width: 44%;}
    .ITEC1 {margin-top: 22%;margin-left: 34%;width: 53%;}
    .ITEC4 {margin-top: 53%;margin-left: 62%;width: 27%;}
    .ITEC6 {margin-top: 2%;width: 26%;margin-left: 68%;}
    .ITEC3 {margin-top: 75%;margin-left: 26.5%;width: 31%;}
    .textgra2 {font-size: 31px;margin-top: 5%;margin-left: 21%;font-weight: bold;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.50);
}
}  
@media screen and (min-height: 750px) and (max-height:800px) {
    .barcontent3{height: 67vh;}
  /*   .barbot {margin-top: 37%;} */
    .textQ3{margin-left: 18vh;}
    .charMA{margin-top:12%; }
    
    .barcontent5{height: 67vh;}
 
 }
  @media screen and (min-width: 1300px) and (max-width:1400px) {
      /*content1*/
 
 .fontabout {margin-top:35%;}
 .fontOr {position:absolute; margin-left:9.2%;}
 .fontBU {position:absolute; margin-left:27.5%;}
 .fontCe {position:absolute; margin-left:49%;}
 .fontSf {position:absolute;  margin-left:66.5%;}
 .fontQr {position:absolute;  margin-left:84.5%;}
 .subject2 {font-family: 'Prompt', sans-serif;margin-left:80vh;margin-top: 5%;font-size:25px;color:#003890;font-weight:bold;}
/*  .barbot {margin-top:38%; height:19vh;} */
        /*contact*/
     
     .barcontent3{height:60vh;}
     
 
        /*contact*/
 /*ma*/
 
 .charKA {font-size:10.9px;}.charKKAT{font-size: 11px;}
 .stuc1{margin-top:8.5%;}.stuc2{margin-top:8.5%; margin-left:38%;}.stuc3{margin-top: 24.5%;margin-left: 38%;}.stuc4{margin-top: 24.5%;margin-left: 11%; }

 /*cer*/
 /*c5*/
 .fontScon{font-size:16px;}.textQcontent{margin-left:34%;}
 /*c5*/
 /*c6*/
 .barglod3{margin-top:35%;}
 .textQ3{font-size: 21px;margin-left: 18vh;}
 /*c6*/
 
       /*content1*/
        /*Pcontent*/
         #boxPcon {margin-top:35%;} 
          /*Pcontent*/
  /*dev*/
 .textby {margin-top:32%;}
 .part{margin-top:10.8%;}.textM{font-size:20px;}
 .TR2{margin-top:65%;}
 .textgra{font-size:30px;}
 #projectIP{margin-left: 45%;width: 31%;}.subT{font-size: 15px;}.DataP{font-size: 12px;}
  /*dev*/
 }
 @media screen and (min-width: 1000px) and (max-width:1100px) {
    /*content1*/

    .content {font-size: 12px;margin-top: 7%;}
.fontabout {margin-top:35%;}
.fontOr {margin-left: 9.5%;font-size: 12px;}
.fontBU {margin-left: 27.5%;font-size: 12px;}
.fontCe {margin-left: 48.5%;font-size: 12px;}
.fontSf {font-size: 12px;}
.fontQr {font-size: 12px;}.fontNL { margin-left: 83%;font-size: 12px;}
.fontOr2 {margin-top: 6%;margin-left: 6.5%;font-size: 14px;}
.fontBU2 {margin-top: 6%;margin-left: 25.5%;font-size: 14px;}
.fontCe2 {margin-top: 6%;margin-left: 47%;font-size: 14px;}
.fontSf2 {margin-top: 6%;margin-left: 69.5%;font-size: 14px;}
.fontQr2 {margin-top: 6%;margin-left: 85%;font-size: 14px;}
.fontNL2 {margin-top: 6%;margin-left: 82.7%;font-size: 14px;}
.subject2 {font-family: 'Prompt', sans-serif;margin-left:80vh;margin-top: 5%;font-size:25px;color:#003890;font-weight:bold;}
/* .barbot { margin-top: 52%;height: 19vh;} */
.boxTopkc {
    position: absolute;
    width: 75%;
    height: 28%;
    margin-top: 6%;
    margin-left: 16%;
    animation: MS 1s;
}
.boxbotkc {
    position: absolute;
    width: 77%;
    height: 28%;
    margin-top: 24%;
    margin-left: 14%;
    animation: MS 1s;
}
.boxOR {
 
    width: 137%;
    margin-left: 0%;
}
.fontstuc {font-size: 15px;}
.scal1 {
    position: absolute;
    width: 140%;
    margin-left: 5%;
    margin-top: -6%;
}
.boxQR {
    position: absolute;
    width: 137%;
    margin-top: -6%;
    margin-left: -4%;
}
      /*contact*/
   
   .barcontent3{height:60vh;}
 

      /*contact*/
/*ma*/

.charKA {font-size:10.9px;}.charKKAT{font-size: 11px;}

/*ma*/
/*cer*/

.stuc1{margin-top:8.5%;}.stuc2{margin-top:8.5%; margin-left:38%;}.stuc3{margin-top: 24.5%;margin-left: 38%;}.stuc4{margin-top: 24.5%;margin-left: 11%; }

/*cer*/
/*c5*/
.fontScon{font-size:16px;}.textQcontent{margin-left:34%;}
/*c5*/
/*c6*/
.barglod3{margin-top:35%;}
.textbottomQ {font-size: 13px;}.textQ1 {font-size: 13px;}
.textQ3{font-size: 21px;margin-left: 18vh;}
/*c6*/
.conNL2 {font-size: 12px;}.conNL3 {font-size: 12px;}
     /*content1*/
      /*Pcontent*/
       #boxPcon {margin-top: 47%;}#project{margin-top:2%;} #Activities{margin-top: 14%;}#Owner{margin-top: 8%;}
        /*Pcontent*/
/*dev*/
.textby {margin-top:32%;}
.part{margin-top:10.8%;}.textM{font-size:20px;}
.TR2{margin-top:65%;}
.textgra{font-size:30px;}
#Projecttext{margin-top: -2%;}#projectIP{margin-top: 12%;margin-left: 51%;width: 36%;}.subT{font-size: 15px;}.DataP{font-size: 12px;}
#boxlogo {animation: sr 1s;position: absolute;width: 100%;margin-left: 50%;margin-top: 18%;}
.system8 { width: 42%;height: 17vh;margin-top: 36%;margin-left: 66%;}#fontlong {
    font-size: 18px;
}
.system7 {
    position: absolute;
    width: 30%;
    height: 30vh;
    margin-top: 36.5%;
    margin-left: 48%;
}
.system1 {
    position: absolute;
    width: 30%;
    height: 40vh;
    margin-top: 23%;
    margin-left: 32%;
}
.system2 {
    position: absolute;
    width: 30%;
    height: 40vh;
    margin-top: 35%;
    margin-left: 0%;
}
.system3 {
    position: absolute;
    width: 30%;
    height: 50vh;
    margin-top: 8%;
    margin-left: 17%;
}
.system4 {
    position: absolute;
    width: 30%;
    height: 30vh;
    margin-top: 24.5%;
    margin-left: -6%;
}
.BGIT {
    background-image: url(img/imgtarin/IT3.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 77.7vh;
    background-position-x: 64%;
}
.ITEC5 {
    margin-left: 5%;
    margin-top: 44%;
    width: 25%;
}
.MapRY{margin-top: 93%;margin-top: 35%;margin-left: 4%;}  
.MapSL {margin-top: 11%;margin-left: 65%;}

/*dev*/
}