.star-red{margin-left: 3px; color: red;}

.imgCircle{border-radius: 50%;}
/*.form-control{padding: 10px 50px;}*/
/*.form-input{height:50px;border-radius: 0px;margin-top: 20px;}*/
.Profile-input-file{
    height:180px;width:180px;left:33%;
    position: center;
    top: 0px;
    z-index: 999;
    opacity: 0 !important;
}
.card-detail {
    margin: -115% 30% 0% 5%;
    position: relative;
    position: relative;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
}
.textAlignVer{
    display:block;
    filter: flipv fliph;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
    position:relative;
    width:20px;
    white-space:nowrap;
    font-size:12px;
    margin-bottom:10px;
}

/********************** Fonts Profiles ********************/
@media screen and (max-width: 320px) {
 /* Add your styles for devices with a maximum width of 320 */
     .idcard-profile{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 150px;
    /*margin: 257px 0px 0px -47px;
    font-size: 20px;*/
    font-size: 27px;
    /*margin: 100% 0% 0% -5%;*/
    margin: 100% 0% 0% -17%;
    color: #777;
    z-index: 2;
    }
        .idcard-text{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 150px;
    /*margin: 257px 0px 0px 135px;
    font-size: 16px;*/
    margin: 100% 0% 0% 57%;
    font-size: 13px;
    color: #000;
    }
        .idcard-number{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 150px;
    /*margin: 257px 0px 0px 160px;
    font-size: 20px;*/
    font-size: 15px;
    margin: 100% 0% 0% 62%;
    letter-spacing: 7px;
    color: #000;
    font-weight: bold;
    }
        .idcard-name-th{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    font-size: 24px;
    margin: 33.5% 0% 0% -30%;
    color: #000;
    font-weight: bold;
    text-align: left;
    }
        .idcard-name-en{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
        position: absolute;
    width: 150px;
    font-size: 19px;
    margin: 52% 0% 0% 0%;
    color: #000;
    text-align: left;
    }
        .idcard-faculty{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
        position: absolute;
    width: 150px;
    font-size: 19px;
    margin: 51% 0% 0% 10%;
    color: #000;
    text-align: left;
    }
        .idcard-branch{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
        position: absolute;
    width: 250px;
    font-size: 19px;
    margin: 32.5% 0% 0% 1%;
    color: #000;
    text-align: left;
    }
            .idcard-tel{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
        position: absolute;
    width: 150px;
    font-size: 19px;
    margin: 51% 0% 0% 30%;
    color: #000;
    text-align: left;
    }
            .idcard-email{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
        position: absolute;
    /*width: 150px;
    margin: 100px 0px 0px 130px;
    font-size: 16px;*/
    font-size: 19px;
    margin: 39.5% 0% 0% 29%;
    color: #000;
    width: 210px;
    text-align: left;
    }
}
 
@media screen and (max-width: 480px) {
 /* Add your styles for devices with a maximum width of 480 */
     .idcard-profile{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 150px;
    /*margin: 257px 0px 0px -47px;
    font-size: 20px;*/
    font-size: 27px;
    /*margin: 100% 0% 0% -5%;*/
    margin: 100% 0% 0% -17%;
    color: #777;
    z-index: 2;
    }
        .idcard-text{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 150px;
    /*margin: 257px 0px 0px 135px;
    font-size: 16px;*/
    margin: 100% 0% 0% 57%;
    font-size: 13px;
    color: #000;
    }
        .idcard-number{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 150px;
    /*margin: 257px 0px 0px 160px;
    font-size: 20px;*/
    font-size: 15px;
    margin: 100% 0% 0% 62%;
    letter-spacing: 7px;
    color: #000;
    font-weight: bold;
    }
        .idcard-name-th{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    font-size: 24px;
    margin: 33.5% 0% 0% -30%;
    color: #000;
    font-weight: bold;
    text-align: left;
    }
        .idcard-name-en{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
        position: absolute;
    width: 150px;
    font-size: 19px;
    margin: 52% 0% 0% 0%;
    color: #000;
    text-align: left;
    }
        .idcard-faculty{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
        position: absolute;
    width: 150px;
    font-size: 19px;
    margin: 51% 0% 0% 10%;
    color: #000;
    text-align: left;
    }
        .idcard-branch{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
        position: absolute;
    width: 250px;
    font-size: 19px;
    margin: 32.5% 0% 0% 1%;
    color: #000;
    text-align: left;
    }
            .idcard-tel{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
        position: absolute;
    width: 150px;
    font-size: 19px;
    margin: 51% 0% 0% 30%;
    color: #000;
    text-align: left;
    }
            .idcard-email{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
        position: absolute;
    /*width: 150px;
    margin: 100px 0px 0px 130px;
    font-size: 16px;*/
    font-size: 19px;
    margin: 39.5% 0% 0% 29%;
    color: #000;
    width: 210px;
    text-align: left;
    }
}
 
@media screen and (max-width: 768px) {
 /* Add your styles for devices with a maximum width of 768 */
     .idcard-profile{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 150px;
    /*margin: 257px 0px 0px -47px;
    font-size: 20px;*/
    font-size: 27px;
    /*margin: 100% 0% 0% -5%;*/
    margin: 102% 0% 0% -9%;
    color: #777;
    z-index: 2;
    }
        .idcard-text{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 150px;
    /*margin: 257px 0px 0px 135px;
    font-size: 16px;*/
    margin: 100% 0% 0% 57%;
    font-size: 13px;
    color: #000;
    }
        .idcard-number{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 150px;
    /*margin: 257px 0px 0px 160px;
    font-size: 20px;*/
    font-size: 15px;
    margin: 99% 0% 0% 65%;
    letter-spacing: 7px;
    color: #000;
    font-weight: bold;
    }
        .idcard-name-th{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    font-size: 24px;
    margin: 33.5% 0% 0% -20%;
    color: #000;
    font-weight: bold;
    text-align: left;
    }
        .idcard-name-en{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
        position: absolute;
    width: 250px;
    font-size: 19px;
    margin: 33% 0% 0% -8%;
    color: #000;
    text-align: left;
    }
        .idcard-faculty{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
        position: absolute;
    width: 250px;
    font-size: 19px;
    margin: 33% 0% 0% 3%;
    color: #000;
    text-align: left;
    }
        .idcard-branch{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
        position: absolute;
    width: 205px;
    font-size: 19px;
    margin: 36.5% 0% 0% 20%;
    color: #000;
    text-align: left;
    }
            .idcard-tel{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
        position: absolute;
    width: 250px;
    font-size: 19px;
    margin: 33% 0% 0% 26%;
    color: #000;
    text-align: left;
    }
            .idcard-email{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
        position: absolute;
    /*width: 150px;
    margin: 100px 0px 0px 130px;
    font-size: 16px;*/
    font-size: 19px;
    margin: 33% 0% 0% 38%;
    color: #000;
    width: 250px;
    text-align: left;
    }
}

 
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (orientation : landscape) {
   /* Add your styles for devices with a maximum width of 1024 */
       .idcard-profile{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 150px;
    /*margin: 257px 0px 0px -47px;
    font-size: 20px;*/
    font-size: 27px;
    /*margin: 100% 0% 0% -5%;*/
    margin: 100% 0% 0% -17%;
    color: #777;
    z-index: 2;
    }
        .idcard-text{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 150px;
    /*margin: 257px 0px 0px 135px;
    font-size: 16px;*/
    margin: 100% 0% 0% 57%;
    font-size: 13px;
    color: #000;
    }
        .idcard-number{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 150px;
    /*margin: 257px 0px 0px 160px;
    font-size: 20px;*/
    font-size: 15px;
    margin: 100% 0% 0% 62%;
    letter-spacing: 7px;
    color: #000;
    font-weight: bold;
    }
        .idcard-name-th{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    font-size: 24px;
    margin: 33.5% 0% 0% -30%;
    color: #000;
    font-weight: bold;
    text-align: left;
    }
        .idcard-name-en{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
        position: absolute;
    width: 150px;
    font-size: 19px;
    margin: 52% 0% 0% 0%;
    color: #000;
    text-align: left;
    }
        .idcard-faculty{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
        position: absolute;
    width: 150px;
    font-size: 19px;
    margin: 51% 0% 0% 10%;
    color: #000;
    text-align: left;
    }
        .idcard-branch{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
        position: absolute;
    width: 250px;
    font-size: 19px;
    margin: 32.5% 0% 0% 1%;
    color: #000;
    text-align: left;
    }
            .idcard-tel{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
        position: absolute;
    width: 150px;
    font-size: 19px;
    margin: 51% 0% 0% 30%;
    color: #000;
    text-align: left;
    }
            .idcard-email{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
        position: absolute;
    /*width: 150px;
    margin: 100px 0px 0px 130px;
    font-size: 16px;*/
    font-size: 19px;
    margin: 39.5% 0% 0% 29%;
    color: #000;
    width: 210px;
    text-align: left;
    }
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (orientation : portrait) {
  /* Add your styles for devices with a maximum width of 768 */
      .idcard-profile{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 150px;
    /*margin: 257px 0px 0px -47px;
    font-size: 20px;*/
    font-size: 27px;
    /*margin: 100% 0% 0% -5%;*/
    margin: 100% 0% 0% -17%;
    color: #777;
    z-index: 2;
    }
        .idcard-text{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 150px;
    /*margin: 257px 0px 0px 135px;
    font-size: 16px;*/
    margin: 100% 0% 0% 57%;
    font-size: 13px;
    color: #000;
    }
        .idcard-number{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 150px;
    /*margin: 257px 0px 0px 160px;
    font-size: 20px;*/
    font-size: 15px;
    margin: 100% 0% 0% 62%;
    letter-spacing: 7px;
    color: #000;
    font-weight: bold;
    }
        .idcard-name-th{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    font-size: 24px;
    margin: 33.5% 0% 0% -30%;
    color: #000;
    font-weight: bold;
    text-align: left;
    }
        .idcard-name-en{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
        position: absolute;
    width: 150px;
    font-size: 19px;
    margin: 52% 0% 0% 0%;
    color: #000;
    text-align: left;
    }
        .idcard-faculty{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
        position: absolute;
    width: 150px;
    font-size: 19px;
    margin: 51% 0% 0% 10%;
    color: #000;
    text-align: left;
    }
        .idcard-branch{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
        position: absolute;
    width: 250px;
    font-size: 19px;
    margin: 32.5% 0% 0% 1%;
    color: #000;
    text-align: left;
    }
            .idcard-tel{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
        position: absolute;
    width: 150px;
    font-size: 19px;
    margin: 51% 0% 0% 30%;
    color: #000;
    text-align: left;
    }
            .idcard-email{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
        position: absolute;
    /*width: 150px;
    margin: 100px 0px 0px 130px;
    font-size: 16px;*/
    font-size: 19px;
    margin: 39.5% 0% 0% 29%;
    color: #000;
    width: 210px;
    text-align: left;
    }
}









/**********************Back Profiles ********************/
@media screen and (max-width: 320px) {
      .qrcode-profile{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    /* margin: 187px 0px 0px -54px; */
    margin: 69% 0% 0% -19%;
    text-align: center;
    font-size: 18px;
    color: #777;
    z-index: 2;
    }
        .qrcode-name{
    position: absolute;
    /*margin: -134px 0px 0px 32px;*/
    margin: -97% 0% 0% 26%;
    }
        .qrcode-faculty{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    margin: -40% 0% 0% 43%;
    text-align: right;
    font-size: 17px;
    color: #000;
    }
        .qrcode-branch{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    margin: -113% 0% 0% 43%;
    text-align: left;
    font-size: 17px;
    color: #000;
    }
            .qrcode-university{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    margin: -60% 0% 0% 55%;
    text-align: left;
    font-size: 19px;
    color: #000;
    font-weight: bold;
    }
            .qrcode-connect{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    margin: -155% 0% 0% 55%;
    text-align: left;
    font-size: 19px;
    color: #000;
    font-weight: bold;
    }
}
 
@media screen and (max-width: 480px) {
      .qrcode-profile{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    /* margin: 187px 0px 0px -54px; */
    margin: 69% 0% 0% -19%;
    text-align: center;
    font-size: 18px;
    color: #777;
    z-index: 2;
    }
        .qrcode-name{
    position: absolute;
    /*margin: -134px 0px 0px 32px;*/
    margin: -97% 0% 0% 26%;
    }
        .qrcode-faculty{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    margin: -40% 0% 0% 43%;
    text-align: right;
    font-size: 17px;
    color: #000;
    }
        .qrcode-branch{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    margin: -113% 0% 0% 43%;
    text-align: left;
    font-size: 17px;
    color: #000;
    }
            .qrcode-university{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    margin: -60% 0% 0% 55%;
    text-align: left;
    font-size: 19px;
    color: #000;
    font-weight: bold;
    }
            .qrcode-connect{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    margin: -155% 0% 0% 55%;
    text-align: left;
    font-size: 19px;
    color: #000;
    font-weight: bold;
    }
}
 
@media screen and (max-width: 768px) {
 /* Add your styles for devices with a maximum width of 768 */
     .qrcode-profile{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    /* margin: 187px 0px 0px -54px; */
    margin: 69% 0% 0% -19%;
    text-align: center;
    font-size: 18px;
    color: #777;
    z-index: 2;
    }
        .qrcode-name{
    position: absolute;
    /*margin: -134px 0px 0px 32px;*/
    margin: -97% 0% 0% 26%;
    }
        .qrcode-faculty{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    margin: -40% 0% 0% 43%;
    text-align: right;
    font-size: 17px;
    color: #000;
    }
        .qrcode-branch{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    margin: -113% 0% 0% 43%;
    text-align: left;
    font-size: 17px;
    color: #000;
    }
            .qrcode-university{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    margin: -60% 0% 0% 55%;
    text-align: left;
    font-size: 19px;
    color: #000;
    font-weight: bold;
    }
            .qrcode-connect{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    margin: -155% 0% 0% 55%;
    text-align: left;
    font-size: 19px;
    color: #000;
    font-weight: bold;
    }
}
 

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (orientation : landscape) {
        .qrcode-profile{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    /* margin: 187px 0px 0px -54px; */
    margin: 69% 0% 0% -19%;
    text-align: center;
    font-size: 18px;
    color: #777;
    z-index: 2;
    }
        .qrcode-name{
    position: absolute;
    /*margin: -134px 0px 0px 32px;*/
    margin: -97% 0% 0% 26%;
    }
        .qrcode-faculty{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    margin: -40% 0% 0% 43%;
    text-align: right;
    font-size: 17px;
    color: #000;
    }
        .qrcode-branch{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    margin: -113% 0% 0% 43%;
    text-align: left;
    font-size: 17px;
    color: #000;
    }
            .qrcode-university{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    margin: -60% 0% 0% 55%;
    text-align: left;
    font-size: 19px;
    color: #000;
    font-weight: bold;
    }
            .qrcode-connect{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    margin: -155% 0% 0% 55%;
    text-align: left;
    font-size: 19px;
    color: #000;
    font-weight: bold;
    }
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (orientation : portrait) {
       .qrcode-profile{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    /* margin: 187px 0px 0px -54px; */
    margin: 69% 0% 0% -19%;
    text-align: center;
    font-size: 18px;
    color: #777;
    z-index: 2;
    }
        .qrcode-name{
    position: absolute;
    /*margin: -134px 0px 0px 32px;*/
    margin: -97% 0% 0% 26%;
    }
        .qrcode-faculty{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    margin: -40% 0% 0% 43%;
    text-align: right;
    font-size: 17px;
    color: #000;
    }
        .qrcode-branch{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    margin: -113% 0% 0% 43%;
    text-align: left;
    font-size: 17px;
    color: #000;
    }
            .qrcode-university{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    margin: -60% 0% 0% 55%;
    text-align: left;
    font-size: 19px;
    color: #000;
    font-weight: bold;
    }
            .qrcode-connect{
-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
    position: absolute;
    width: 250px;
    margin: -155% 0% 0% 55%;
    text-align: left;
    font-size: 19px;
    color: #000;
    font-weight: bold;
    }
}
