#profile{

    background: whitesmoke; 

    padding: 90px 0px 250px;

    color: black;

    font-size: 16px;

   }

.profile-img{

  margin-bottom: 80px;

}

#profile-title {

  margin-bottom: 60px;

}

#profile-title h4{

  text-align: center;

  font-size: 40px;

  color: #FF4500;

  font-weight: bold;

}

#bg-profil {

    position: absolute;

    margin-top: -3.3%;

    height: 60%;

    width: 22%;

    margin-left: -19.7%;

}

#right-profile{

  position: absolute;

  margin-top: 80px;

  height: 290px;

  width: 290px;

  margin-right: 0px;

  margin-left: 1000px;

}

#left-profile{

  position: absolute;

  margin-top: 80px;

  height: 290px;

  width: 290px;

  margin-left: 100px;

}





#awan-right{

  position: absolute;

  margin-top: 0px;

  height: 290px;

  width: 290px;

  margin-right: 0px;

  margin-left: 1000px;

}



#awan-left{

  position: absolute;

  margin-top: 0px;

  height: 290px;

  width: 290px;

  margin-right: 0px;

  margin-left: 90px;

}



#profile-thumb{

  margin-bottom: 10px;

  text-align: center;

  width: 26.667%;

  margin-left: 36.667%;

}

#profile-thumb img{

  border-radius: 50%;

  width: 100%;

  height: 100%;

  border:15px double #efbd69;

}



.profile-rows{

  margin-bottom: 10px;

  margin-right: 0px;

  margin-left: 0px;

}

.profile-isi {

    width: 25%;

    float: left;

}

   .profile-isi > input[type=text]{

    background: transparent;

    border: 2px solid;

    margin-bottom: 10px;

    padding:5px;

    padding-left: 10px;

    width: 95%;

   }

   .profile-isi > input[type=text]:focus{

    border: 2px solid #FF4500;

    box-shadow: 0 5px 10px rgba(0,0,0,0.30), 0 5px 10px rgba(0,0,0,0.22);

    }

    .profile-isi > textarea:focus{

      border: 2px solid #FF4500;

      box-shadow: 0 5px 10px rgba(0,0,0,0.30), 0 5px 10px rgba(0,0,0,0.22);

   }

   .profile-isi > textarea{



    background: transparent;

    border: 2px solid;

    padding: 5px 10px;

    width: 95%;



   }



   #cat_profile{

    color: red;

    margin: 60px 0 20px 0;

    font-weight: bold;

   }

   #cat_profile p {

    text-transform: uppercase;

    font-size: 18px;

    font-weight: bold;

   }



    

    .button-profile{

      margin-top: 40px;

      text-align: center;

      margin-right: 0px;

      margin-left: 0px;

    }



    .button-profile .btn {

        padding: 10px 20px;

        margin-bottom: 0;

        font-size: 15px;

        font-weight: 600;

        line-height: 1.42857143;

        border-radius: 4px;

    }



/*MODAL*/



.close{

  font-size:  45px;

  color: #1e1e1e;

  transition: all .2s ease;

}

.close{

  opacity: 0.4;

}



.close:focus, .close:hover {

    color: #000;

    filter: alpha(opacity=50);

    opacity: .8;

}



.modal-content{

  background-color: #ECECEC;

}

.modal-title {

    color: #FF4500;

    font-size: 28px;

    font-weight: bold;

    /*padding: 10px 15px 10px 20px;*/

    border-bottom: 5px solid #FF4500;

    margin: -15px -20px 0px;

    padding: 15px 22px;

}



.modal-header {

    border-bottom: 1px solid #e5e5e5;

    margin-top: 0px;

    padding-left: 20px;

    padding-right: 20px; 

}



.modal-body {

    padding: 10px 20px 20px;

}



.modal-body p {

    line-height: 1.4;

    font-weight: 500;

    font-size: 18px;

    color: black;

    text-align: center;

}

.button-modal{

  text-align:center;

  margin-bottom: 10px;

  margin-top: 10px;

}

.button-modal .btn{

    display: inline-block;

    padding: 8px 50px;

    margin-bottom: 0;

    font-size: 14px;

    font-weight: bold;

    line-height: 1.42857143;

    text-align: center;

    margin-right: 20px;

}

.button-modal .btn-success{

    color: #fff;

    margin-right: 80px;

}



.modal-footer{

  text-align:center;

  margin-bottom: 10px;

  margin-top: 10px;

}

.modal-footer .btn{

    display: inline-block;

    padding: 8px 50px;

    margin-bottom: 0;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.42857143;

    text-align: center;

    margin-right: 20px;

    font-weight: bold;

}

.modal-footer .btn-success{

    color: #fff;

    margin-right: 80px;

}



#form-update-profile p {

    color: red;

    font-size: 12px;

    font-weight: 500;

    float: left;

    text-align: left;

}



/*MODAL UPDATE PASS*/

#updatePass .modal-dialog {

    width: 65%;

    margin: 30px auto;

    font-size: 16px;

    color: black;

}

 .box-pass{

    margin-bottom: 10px;

 }



.note-pass {

  margin-top: 20px;

  text-align: left;

  color: red;

  font-weight: bold;

}

 .note-pass p{

  color: red;

  text-align: left;

  font-weight: bold;

  text-transform: uppercase;

  font-size: 16px;

 }



 .note-pass i{

  font-size: 14px;

 }



  .pass-isi > input[type=password]{

    background: transparent;

    border: 2px solid;

    border-radius: 10px;

    margin-bottom: 10px;

    padding:5px;

    padding-left: 10px;

    width: 100%;

  }

  .pass-isi > input[type=password]:focus{

    border: 2px solid #FF4500;

    box-shadow: 0 10px 10px rgba(0,0,0,0.30), 0 10px 10px rgba(0,0,0,0.22);

  }



  .pas-ket{

    font-weight: bold;

  }



#pass-confirm{

  padding: 0px;

  margin-left: -10px;

  margin-top: 5px;

}

#pass-confirm p{

  margin: 3px 0 0px;

}

#pass-old{

  padding: 0px;

  margin-left: -10px;

  margin-top: 5px;

}

#pass-old p{

  margin: 3px 0 0px;

}



#pass-confirm #wrong{

  font-size: 12px;

  text-align: left;

  color: red;

  float: left;

}



#pass-confirm #korek{

  font-size: 12px;

  text-align: left;

  color: green;

  float: left;

}



#pass-old #wrong{

  font-size: 12px;

  text-align: left;

  color: red;

  float: left;

}



#pass-old #korek{

  font-size: 12px;

  text-align: left;

  color: green;

  float: left;

}



#pass-old img{

  float: left;

  height: 20px;

  width: 20px;

  margin-right: 5px;

}



#pass-confirm img{

  float: left;

  height: 20px;

  width: 20px;

  margin-right: 5px;

}

/*MODAL UPDATE PASS*/

/* MODAL SEND EMAIL*/
    #modalEmail{
      padding-right: 0px;
    }
    .message-rows{

      font-size: 16px;
      margin-bottom: 10px;

      margin-right: 0px;

      margin-left: 0px;

    }

    .message-isi {

      /*width: 25%;*/

      float: left;

    }
    .message-ket{
     /* width: 35%;*/

      float: left;

    }
   .message-isi > input[type=email]{
    background: transparent;
    border: 2px solid;
    margin-bottom: 10px;
    padding:5px;
    padding-left: 10px;
    width: 95%;

   }

   .message-isi > input[type=email]:focus{
    border: 2px solid #FF4500;
    box-shadow: 0 5px 10px rgba(0,0,0,0.30), 0 5px 10px rgba(0,0,0,0.22);
    }

    .message-isi > textarea:focus{
      border: 2px solid #FF4500;
      box-shadow: 0 5px 10px rgba(0,0,0,0.30), 0 5px 10px rgba(0,0,0,0.22);

   }

   .message-isi > textarea{
    background: transparent;
    border: 2px solid;
    padding: 5px 10px;
    width: 95%;
   }
/* MODAL SEND EMAIL*/

    /*MODAL*/





 /*[ Responsive ]*/



@media (max-width: 576px) {



} 







/* lg */ 

@media (min-width: 1200px) {

  



}



@media (min-width: 1115px) and (max-width: 1223px) {

 

}



@media (min-width: 991px) and (max-width: 1114px) {

 

 



}





/* md */

/*

@media (min-width: 992px) and (max-width: 1199px) {

  #dekor-left-about{

    width:400px;

    height:293px;

    left:0px;

    margin-top: -95px;

    position: absolute;

  }



  #dekor-right-about{

    position: absolute; 

    width:400px;

    height:293px;

    right: 0;

    margin-top: -97px;

  }



  #dekor-atas-program{

    position: absolute;

    margin-top: -90px;

    height: 1136px;

    width: 1350px;

  }

}*/



/* sm */

@media (min-width: 768px) and (max-width: 991px) {

 

}



@media (min-width: 768px) and (max-width: 887px) {

 

}

/* xs */

@media (max-width: 767px) {

 

}



  /* XS Portrait */

  @media (max-width: 479px) {

    #profile {

      background: whitesmoke;

      padding: 50px 0px 100px;

      color: black;

      font-size: 16px;

    }

    #awan-right {

      position: absolute;

      margin-top: -30px;

      height: 18%;

      width: 26%;

      margin-right: 0px;

      margin-left: 73%;

    }  

    #awan-left {

        position: absolute;

        margin-top: -30px;

        height: 18%;

        width: 26%;

        margin-right: 0px;

        margin-left: 1%;

    } 

    #profile-title {

     margin-bottom: 50px;

    }

    #profile-title h4 {

      text-align: center;

      font-size: 30px;

      color: #FF4500;

      font-weight: bold;

    }

    .profile-img {

      margin-bottom: 60px;

    }

    #profile-thumb img {

      width: 150px;

    }

    #bg-profil {

      position: absolute;

      margin-top: -7%;

      height: 32.2%;

      width: 47%;

      margin-left: 33.1%;

      

    }

    #box-profile{

      margin-left: 1%; 

    }

    .profile-ket{

      width: 35%;

      float: left;

    }

    .profile-isi{

      width: 60%;

      float: left;

    }

    #btn-perubahan{

      width: 45%;

      float: left;

    }

    #btn-ubahsandi{

      width: 50%;

      float: left;

    }



    #right-profile {

      position: absolute;

      margin-top: -27%;

      height: 15%;

      width: 22%;

      margin-right: 0px;

      margin-left: 75%;

    }

    #left-profile {

      position: absolute;

      margin-top: -27%;

      height: 15%;

      width: 22%;

      margin-left: 5%;

    }

    #cat_profile {

        color: red;

        margin: 10% 0px 5% 3%;

        font-weight: bold;

    }

    .box-pass {

      margin-bottom: 10px;

      margin-left: 1%;

      margin-right: 1%;

    }

    #updatePass .modal-dialog {

        width: 95%;

        margin: 30px auto;

        font-size: 16px;

        color: black;

    }

    #pass-old {

        padding: 0px;

        margin-left: 5%;

        margin-top: 5px;

    }

    #pass-confirm {

        padding: 0px;

        margin-left: 5%;

        margin-top: 5px;

    }

    .button-modal .btn-success {

        margin-right: 1%;

    }

    .button-modal .btn {

        display: inline-block;

        padding: 8px 50px;

        margin-bottom: 0;

        font-size: 14px;

        font-weight: bold;

        line-height: 1.42857143;

        text-align: center;

        margin-right: 1%;

    }

    .message-isi {

     width: 70%;

      float: left;

    }
    .message-ket{

    width: 30%;
      float: left;

    }

    
}












   @media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1530px){

        

      

   }



   @media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1366px){

       

      

 }





 @media screen and (-webkit-min-device-pixel-ratio:0) and (height: 702px) and (max-width: 1366px){

 

}



/* tanvir */

 @media screen and (-webkit-min-device-pixel-ratio:0) and ( max-width: 1350px ) { 

           

           

        }  





 @media screen and (-webkit-min-device-pixel-ratio:0)  and ( max-width: 1350px ) and (max-height: 650px){ 



    



 }





/* mukul 1295 722*/

   @media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1300px){ 

       

     

        }

 }       

    



@media (min-width: 1050px) and (max-width: 1200px){

 



}



  

/* ipad landscape */

  @media (max-width: 1024px){





        

        }





        @media (max-width: 991px) {

            

        }



    

   

/* ipad */

    @media (min-width: 768px) and (max-width: 770px){





        }





            /* ipad */

@media (max-width: 770px){





        }



        @media (min-width: 720px) and (max-width: 735px){





        }





    /* iphone 6+ landscape */

        @media screen and (min-device-width : 414px) 

            and (-webkit-device-pixel-ratio: 3){



           

       

    }





    /* iphone 6 landscape */

        @media only screen and (max-device-width: 667px) 

            and (-webkit-device-pixel-ratio: 2) {



       

       

         }









        @media (max-width: 640px){

  

        

      

       

        }



/*

@media (min-width: 552px) and (max-width: 552px){



.global_bx .global_overlay_cont h2 {

    padding: 0 14px;

    font-size: 36px !important;

}





}*/







    /* iphone 5 landscape */

        @media (min-width: 568px) and (max-width: 568px){

       

  

        



        }



            /* iphone 4 landscape */

        @media (min-width: 480px) and (max-width: 480px){



        }





            /* resposnive mobiles */

        @media (max-width: 479px){



        

        }





           /* iphone 6+ */

        @media (max-width: 420px){

        #profile {

          background: whitesmoke;

          padding: 50px 0px 100px;

          color: black;

          font-size: 14px;

        }

        #awan-right {

          position: absolute;

          margin-top: -30px;

          height: 18%;

          width: 26%;

          margin-right: 0px;

          margin-left: 73%;

        }  

        #awan-left {

            position: absolute;

            margin-top: -30px;

            height: 18%;

            width: 26%;

            margin-right: 0px;

            margin-left: 1%;

        } 

        #profile-title {

         margin-bottom: 50px;

        }

        #profile-title h4 {

          text-align: center;

          font-size: 30px;

          color: #FF4500;

          font-weight: bold;

        }

        .profile-img {

          margin-bottom: 60px;

        }

        #profile-thumb img {

          width: 100%;

        }

        #bg-profil {

          position: absolute;

          margin-top: -7.3%;

          height: 31.3%;

          width: 50%;

          margin-left: 32.3%;

        }

        #box-profile{

          margin-left: 1%; 

        }

        .profile-ket{

          width: 35%;

          float: left;

        }

        .profile-isi{

          width: 60%;

          float: left;

        }

        #btn-perubahan{

          width: 40%;

          float: left;

        }

        #btn-ubahsandi{

          width: 60%;

          float: left;

        }



        #right-profile {

          position: absolute;

          margin-top: -30%;

          height: 15%;

          width: 22%;

          margin-right: 0px;

          margin-left: 75%;

        }

        #left-profile {

          position: absolute;

          margin-top: -30%;

          height: 15%;

          width: 22%;

          margin-left: 5%;

        }

        .button-profile .btn {

          padding: 10px 20px;

          margin-bottom: 0;

          font-size: 14px;

        }

        #cat_profile {

            color: red;

            margin: 10% 0px 5% 3%;

            font-weight: bold;



        }

        #cat_profile p {

          font-size: 16px;

        }



        .modal-title {

          font-size: 26px;

        }



        .modal-footer .btn-success {

          margin-right: 0px;

          margin-left: 5%;

        }

        .modal-footer .btn + .btn {

          margin-bottom: 0;

          margin-left: 1%;

        }
        #but  .btn-success {

              color: #fff;
              margin-right: 0px;

          }
          #but  .btn {
              display: inline-block;
              padding: 8px 30px;
        }

      }



        /* iphone 6 */

        @media (max-width: 375px){

          #profile {

            background: whitesmoke;

            padding: 50px 0px 100px;

            color: black;

            font-size: 14px;

          }

          #awan-right {

            position: absolute;

            margin-top: -30px;

            height: 18%;

            width: 26%;

            margin-right: 0px;

            margin-left: 73%;

          }  

          #awan-left {

              position: absolute;

              margin-top: -30px;

              height: 18%;

              width: 26%;

              margin-right: 0px;

              margin-left: 1%;

          } 

          #profile-title {

           margin-bottom: 50px;

          }

          #profile-title h4 {

            text-align: center;

            font-size: 25px;

            color: #FF4500;

            font-weight: bold;

          }

          .profile-img {

            margin-bottom: 60px;

          }

          #profile-thumb img {

            width: 29%;

          }

          #bg-profil {

            position: absolute;

            margin-top: -6.7%;

            height: 25%;

            width: 45%;

            margin-left: 35.5%;

          }

          #box-profile{

            margin-left: 1%; 

          }

          .profile-ket{

            width: 30%;

            float: left;

          }

          .profile-isi{

            width: 65%;

            float: left;

          }

          #btn-perubahan{

            width: 43%;

            float: left;

          }

          #btn-ubahsandi{

            width: 55%;

            float: left;

          }



          #right-profile {

            position: absolute;

            margin-top: -35%;

            height: 13%;

            width: 20%;

            margin-right: 0px;

            margin-left: 75%;

          }

          #left-profile {

            position: absolute;

            margin-top: -35%;

            height: 13%;

            width: 20%;

            margin-left: 5%;

          }

          .button-profile .btn {

            padding: 5px 10px;

            margin-bottom: 0;

            font-size: 14px;

          }

          #cat_profile {

              color: red;

              margin: 10% 0px 5% 3%;

              font-weight: bold;



          }

          #cat_profile p {

            font-size: 16px;

          }

          .modal-title {

            font-size: 22px;

          }

          .modal-body p {

            line-height: 1.4;

            font-weight: 500;

            font-size: 16px;

          }

        }



        /* android phones */

        @media (max-width: 360px){

          #profile {

            background: whitesmoke;

            padding: 50px 0px 100px;

            color: black;

            font-size: 14px;

          }

          #awan-right {

            position: absolute;

            margin-top: -40px;

            height: 20%;

            width: 35%;

            margin-right: 0px;

            margin-left: 64%;

          }  

          #awan-left {

              position: absolute;

              margin-top: -40px;

              height: 20%;

              width: 35%;

              margin-right: 0px;

              margin-left: 1%;

          } 

          #profile-title {

           margin-bottom: 50px;

          }

          #profile-title h4 {

            text-align: center;

            font-size: 26px;

            color: #FF4500;

            font-weight: bold;

          }

          .profile-img {

            margin-bottom: 60px;

          }

          #profile-thumb img {

            width: 55%;

          }

          #bg-profil {

            position: absolute;

            margin-top: -7.2%;

            height: 24%;

            width: 45%;

            margin-left: 35.9%;

          }

          #box-profile{

            margin-left: 1%; 

          }

          .profile-ket{

            width: 40%;

            float: left;

          }

          .profile-isi{

            width: 60%;

            float: left;

          }

          #btn-perubahan{

            width: 45%;

            float: left;

          }

          #btn-ubahsandi{

            width: 55%;

            float: left;

          }



          #right-profile {

            position: absolute;

            margin-top: -30%;

            height: 10%;

            width: 20%;

            margin-right: 0px;

            margin-left: 75%;

          }

          #left-profile {

            position: absolute;

            margin-top: -30%;

            height: 10%;

            width: 20%;

            margin-left: 5%;

          }

          .button-profile .btn {

            padding: 5px 10px;

            margin-bottom: 0;

            font-size: 14px;

          }

          #cat_profile {

              color: red;

              margin: 10% 0px 5% 3%;

              font-weight: bold;



          }

          #cat_profile p {

            font-size: 16px;

          }

          .modal-title {

            font-size: 20px;

          }

          .modal-footer .btn {

            margin-right: 0;

            margin-left: 1%;

          }

        }







    /* iphone 5 */

        @media (max-width: 320px){

       

        

        }