/*limited reset*/
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video {
   margin: 0px;
   padding: 0px;
   border: 0px;
}

/*html5 display rule*/
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {
     display: block;
}

.hidden-title {
   display: none;
}

body {
font-family: arial, helvetica, sans-serif;
background: #146c9b;
color: #fff;
}

img {
   max-width: 100%;
}

/* ============ Content ============
====================================*/

.content {
   width: 100%;
   margin: 10px auto;
}

/* ======== Select Box Page ========
====================================*/

.barber-select-box {
   margin: 80px auto;
   text-align: center;
}

.barber-select-box .select-box-form {
   margin: 20px 0px 0px 0px;
}

.barber-select-box .barberOption {
   font-size: 20px;
   font-weight: bold;
   color: #146c9b;
   width: 250px;
   padding: 4px 1px 4px 1px;
   display: inline;
}

.barber-select-box .select-box-button {
   background: #0d6391;
   display: inline;
   padding: 5px 9px 5px 9px;
   margin: 0px;
   font-weight: bold;
   color: #fff;
   border: 1px solid #6dccff;
   border-radius: 5px;
   cursor: pointer;
   text-decoration: none;
}

.barber-select-box .select-box-button:hover {
   background: #025079;
}

/* ======== Thank You Page ========
====================================*/

.progress-box {
   text-align: center;
   border: 2px solid #6dccff;
   max-width: 600px;
   margin: 30px auto;
   padding: 30px 0px 30px 0px;
   border-radius: 10px;
   line-height: 45px;
}

.progress-box p {
   font-size: 25px;
   font-weight: normal;
   color: #fff;
}

.progress-box p span {
   font-weight: bold;
}

/* ========== Profile Page ===========
====================================*/

.time-hour {
   text-align: right;
   padding: 10px 10px 10px 0px;
   font-size: 16px;
   font-weight: normal;
   color: #fff;
}

.student-profile {
   max-width: 750px;
   margin: 0 auto;
}

.student-profile .left-side-profile {
   float: left;
   margin: 0px 20px 0px 0px;
   display: block;
   width: 260px;
}

.student-profile .left-side-profile img {
   width: 290px;
   height: 300px;
   border: 1px solid #fff;
}

.student-profile .right-side-profile .one-line {
   padding: 15px 0px 50px 0px;
}

.student-profile .right-side-profile p {
   font-size: 25px;
   font-weight: normal;
   color: #fff;
   display: inline;
   font-weight: bold;
   float: left;
   text-align: left;
}

.student-profile .right-side-profile span {
   font-size: 25px;
   font-weight: normal;
   color: #fff;
   display: inline;
   font-weight: normal;
   float: left;
   margin: 0px 0px 0px 20px;
}

.student-profile .right-side-profile span.hours-to-graduate {
   margin: 17px 0px 0px 20px;
}

.student-profile .clock-in {
   margin: 0 auto;
   line-height: 26px;
   font-size: 20px;
   width: 70%;
   display: block;
   background: #0d6391;
   padding: 8px 9px 8px 9px;
   font-weight: bold;
   color: #fff;
   border: 1px solid #6dccff;
   border-radius: 5px;
   text-decoration: none;
   text-align: center;
   margin: 20px auto;
}

.student-profile .clock-in:hover {
   background: #025079;
}

/* ============ Other ==============
====================================*/

.clear {
   clear: both;
}

/* ============ Mobile ==============
====================================*/

@media only screen and (max-width: 800px) {
   
/* -------- Profile Page ------- */
   
   .student-profile {
      width: 95%;
      margin: 0 auto;
      text-align: center;
   }
   
   .student-profile .right-side-profile .one-line {
      padding: 15px 0px 15px 0px;
   }
   
   .student-profile .left-side-profile {
      float: none;
      width: 100%;
   }
   
   .student-profile .right-side-profile p {
      float: none;
      display: block;
      text-align: center;
   }
   
   .student-profile .right-side-profile span {
      float: none;
      display: block;
      text-align: center;
      margin: 0px;
   }
   
   .student-profile .right-side-profile span.hours-to-graduate {
      margin: 0px;
   }
   
   .student-profile .clock-in {
      width: 90%;
   }

   .student-profile .left-side-profile img {
      max-width: 95%;
      height: auto;
      margin: 0 auto;
      text-align: center;
      
   }
   

}

@media only screen and (max-width: 600px) {

/* -------- Select Box Page ------- */
      
   .barberOption {
      width: 90%;
      padding: 7px 2px 7px 2px;
   }
   
   .select-box-button {
      display: block;
      margin: 15px auto;
      width: 90%;
      padding: 10px 0px 10px 0px;
   }

   .barber-select-box .barberOption {
         margin: 0px 0px 10px 0px;
   }
   
/* -------- Thank You Page ------- */
  
   .progress-box {
      width: 90%;
   }
   
   .progress-box p {
      font-size: 20px;
      line-height: 30px;
      padding: 5px 0px 5px 0px;
   }      
   
   .progress-box p span {
      display: block; 
      margin: 0px;
      padding: 0px;
      line-height: 20px;
   }      

}