diff --git a/public/template/asset/css/bootstrap-custom.css b/public/template/asset/css/bootstrap-custom.css
index 379565c87d087b4fa609a20250280c1fe1c632b9..664f6c726babb4a67940c8ae8ac629fe05c39070 100644
--- a/public/template/asset/css/bootstrap-custom.css
+++ b/public/template/asset/css/bootstrap-custom.css
@@ -8,6 +8,12 @@
     margin-left: 4%;
 }
 
+@media(min-width: 640px) {
+    .login {
+        margin-left: 2%;
+    }
+} 
+
 .dropdown-item {
     color: white;
     margin: 0 0 0 8%;
diff --git a/public/template/asset/css/bootstrap.css b/public/template/asset/css/bootstrap.css
index 1bf25a71467c39c5816871efa46d56f1c9c3afd2..3307f9a5a4249ee81de8ca3ef298b83146cddea7 100644
--- a/public/template/asset/css/bootstrap.css
+++ b/public/template/asset/css/bootstrap.css
@@ -1398,7 +1398,7 @@ p {
   font-weight: 300;
   line-height: 1.4;
 }
-@media (min-width: 768px) {
+@media (min-width: 824px) {
   .lead {
     font-size: 21px;
   }
@@ -1544,7 +1544,7 @@ dt {
 dd {
   margin-left: 0;
 }
-@media (min-width: 768px) {
+@media (min-width: 824px) {
   .dl-horizontal dt {
     float: left;
     width: 160px;
@@ -1680,7 +1680,7 @@ pre code {
   margin-right: auto;
   margin-left: auto;
 }
-@media (min-width: 768px) {
+@media (min-width: 824px) {
   .container {
     width: 750px;
   }
@@ -1878,7 +1878,7 @@ pre code {
 .col-xs-offset-0 {
   margin-left: 0;
 }
-@media (min-width: 768px) {
+@media (min-width: 824px) {
   .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
     float: left;
   }
@@ -2966,7 +2966,7 @@ select[multiple].form-group-lg .form-control {
   margin-bottom: 10px;
   color: #737373;
 }
-@media (min-width: 768px) {
+@media (min-width: 824px) {
   .form-inline .form-group {
     display: inline-block;
     margin-bottom: 0;
@@ -3032,7 +3032,7 @@ select[multiple].form-group-lg .form-control {
   margin-right: -15px;
   margin-left: -15px;
 }
-@media (min-width: 768px) {
+@media (min-width: 824px) {
   .form-horizontal .control-label {
     padding-top: 7px;
     margin-bottom: 0;
@@ -3042,12 +3042,12 @@ select[multiple].form-group-lg .form-control {
 .form-horizontal .has-feedback .form-control-feedback {
   right: 15px;
 }
-@media (min-width: 768px) {
+@media (min-width: 824px) {
   .form-horizontal .form-group-lg .control-label {
     padding-top: 14.3px;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 824px) {
   .form-horizontal .form-group-sm .control-label {
     padding-top: 6px;
   }
@@ -3605,7 +3605,7 @@ tbody.collapse.in {
   bottom: 100%;
   margin-bottom: 1px;
 }
-@media (min-width: 768px) {
+@media (min-width: 824px) {
   .navbar-right .dropdown-menu {
     right: 0;
     left: auto;
@@ -4021,7 +4021,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   top: auto;
   left: auto;
 }
-@media (min-width: 768px) {
+@media (min-width: 824px) {
   .nav-tabs.nav-justified > li {
     display: table-cell;
     width: 1%;
@@ -4039,7 +4039,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .nav-tabs.nav-justified > .active > a:focus {
   border: 1px solid #ddd;
 }
-@media (min-width: 768px) {
+@media (min-width: 824px) {
   .nav-tabs.nav-justified > li > a {
     border-bottom: 1px solid #ddd;
     border-radius: 4px 4px 0 0;
@@ -4086,7 +4086,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   top: auto;
   left: auto;
 }
-@media (min-width: 768px) {
+@media (min-width: 824px) {
   .nav-justified > li {
     display: table-cell;
     width: 1%;
@@ -4107,7 +4107,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .nav-tabs-justified > .active > a:focus {
   border: 1px solid #ddd;
 }
-@media (min-width: 768px) {
+@media (min-width: 824px) {
   .nav-tabs-justified > li > a {
     border-bottom: 1px solid #ddd;
     border-radius: 4px 4px 0 0;
@@ -4137,12 +4137,12 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   margin-bottom: 20px;
   border: 1px solid transparent;
 }
-@media (min-width: 768px) {
+@media (min-width: 824px) {
   .navbar {
     border-radius: 4px;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 824px) {
   .navbar-header {
     float: left;
   }
@@ -4159,7 +4159,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .navbar-collapse.in {
   overflow-y: auto;
 }
-@media (min-width: 768px) {
+@media (min-width: 824px) {
   .navbar-collapse {
     width: auto;
     border-top: 0;
@@ -4200,7 +4200,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   margin-right: -15px;
   margin-left: -15px;
 }
-@media (min-width: 768px) {
+@media (min-width: 824px) {
   .container > .navbar-header,
   .container-fluid > .navbar-header,
   .container > .navbar-collapse,
@@ -4213,7 +4213,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   z-index: 1000;
   border-width: 0 0 1px;
 }
-@media (min-width: 768px) {
+@media (min-width: 824px) {
   .navbar-static-top {
     border-radius: 0;
   }
@@ -4225,7 +4225,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   left: 0;
   z-index: 1030;
 }
-@media (min-width: 768px) {
+@media (min-width: 824px) {
   .navbar-fixed-top,
   .navbar-fixed-bottom {
     border-radius: 0;
@@ -4254,7 +4254,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .navbar-brand > img {
   display: block;
 }
-@media (min-width: 768px) {
+@media (min-width: 824px) {
   .navbar > .container .navbar-brand,
   .navbar > .container-fluid .navbar-brand {
     margin-left: -15px;
@@ -4284,7 +4284,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .navbar-toggle .icon-bar + .icon-bar {
   margin-top: 4px;
 }
-@media (min-width: 768px) {
+@media (min-width: 824px) {
   .navbar-toggle {
     display: none;
   }
@@ -4320,7 +4320,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
     background-image: none;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 824px) {
   .navbar-nav {
     float: left;
     margin: 0;
@@ -4344,7 +4344,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
 }
-@media (min-width: 768px) {
+@media (min-width: 824px) {
   .navbar-form .form-group {
     display: inline-block;
     margin-bottom: 0;
@@ -4402,7 +4402,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
     margin-bottom: 0;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 824px) {
   .navbar-form {
     width: auto;
     padding-top: 0;
@@ -4441,14 +4441,14 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   margin-top: 15px;
   margin-bottom: 15px;
 }
-@media (min-width: 768px) {
+@media (min-width: 824px) {
   .navbar-text {
     float: left;
     margin-right: 15px;
     margin-left: 15px;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 824px) {
   .navbar-left {
     float: left !important;
   }
@@ -4943,7 +4943,7 @@ a.badge:focus {
 .jumbotron .container {
   max-width: 100%;
 }
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 824px) {
   .jumbotron {
     padding: 48px 0;
   }
@@ -5868,7 +5868,7 @@ button.close {
   height: 50px;
   overflow: scroll;
 }
-@media (min-width: 768px) {
+@media (min-width: 824px) {
   .modal-dialog {
     width: 600px;
     margin: 30px auto;
@@ -6308,7 +6308,7 @@ button.close {
 .carousel-caption .btn {
   text-shadow: none;
 }
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 824px) {
   .carousel-control .glyphicon-chevron-left,
   .carousel-control .glyphicon-chevron-right,
   .carousel-control .icon-prev,
@@ -6472,7 +6472,7 @@ button.close {
     display: inline-block !important;
   }
 }
-@media (min-width: 768px) and (max-width: 991px) {
+@media (min-width: 824px) and (max-width: 991px) {
   .visible-sm {
     display: block !important;
   }
@@ -6487,17 +6487,17 @@ button.close {
     display: table-cell !important;
   }
 }
-@media (min-width: 768px) and (max-width: 991px) {
+@media (min-width: 824px) and (max-width: 991px) {
   .visible-sm-block {
     display: block !important;
   }
 }
-@media (min-width: 768px) and (max-width: 991px) {
+@media (min-width: 824px) and (max-width: 991px) {
   .visible-sm-inline {
     display: inline !important;
   }
 }
-@media (min-width: 768px) and (max-width: 991px) {
+@media (min-width: 824px) and (max-width: 991px) {
   .visible-sm-inline-block {
     display: inline-block !important;
   }
@@ -6567,7 +6567,7 @@ button.close {
     display: none !important;
   }
 }
-@media (min-width: 768px) and (max-width: 991px) {
+@media (min-width: 824px) and (max-width: 991px) {
   .hidden-sm {
     display: none !important;
   }
diff --git a/public/template/css/style.css b/public/template/css/style.css
index 529dea103425c51ab95779985fd5df9aadacafe6..9b463d5c71c2ec079bdb24806700db405e0091ff 100644
--- a/public/template/css/style.css
+++ b/public/template/css/style.css
@@ -157,7 +157,7 @@ li {
     color: #fff;
 }
 
-@media(min-width:768px) {
+@media(min-width:824px) {
     .navbar-default {
         padding: 25px 0;
         border: 0;
@@ -677,7 +677,7 @@ li {
 }
 
 
-@media (min-width : 768px) and (max-width: 991px) {
+@media (min-width : 824px) and (max-width: 991px) {
     
     #main-slide .slider-content h1{
 		font-size: 35px;
@@ -960,7 +960,7 @@ and (min-width : 551px){
   }
 }
 
-@media (min-width: 768px) {
+@media (min-width: 824px) {
   #portfolio-list li {
       width: 33.3%;
   }