#banpage {
  position: relative;
  padding: 100px 0px;
}
/* 

#banpage:before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #ffffff, rgb(15 44 73 / 25%));
} */


#page-section h1 {
  color: #004490;
}

#page-section h2 {
  font-size: 31px;
}

.dot {
  height: 50px;
  width: 50px;
  /* border: 0.5px solid #000; */
  border-radius: 50%;
  display: inline-block;
}

.certificate {
  width: 100px;
  height: 100px;
}

.but-page {
  background: #1b3b88;
  color: #ffffff;
  display: inline-block;
  padding: 10px 30px;
}

.but-page:hover {
  background: #000;
  color: #ffffff;
}

#page-section .col-pro {
  display: block;
  border: 1px solid #00000000;
  -webkit-transition: all .25s ease-in-out;
  -khtml-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

#page-section .col-pro:hover {
  border: 1px solid #004490;
  -webkit-transition: all .25s ease-in-out;
  -khtml-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}





@import url(http://fonts.googleapis.com/css?family=Raleway:400,200);

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  padding-left: 0px;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#cssmenu {
  width: 100%;
  color: #ffffff;
  /* border-left: 1px solid #e9e9e9; */
}

#cssmenu ul ul {
  display: none;

}

#cssmenu>ul>li.active>ul {
  display: block;
  /* border-bottom: 1px solid #e9e9e9; */
  /* padding-bottom: 30px; */
}

.align-right {
  float: right;
}

#cssmenu>ul>li>a {
  padding: 16px 30px;
  margin-bottom: 1px;
  cursor: pointer;
  z-index: 2;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  color: #fff;
  background: #1b3b88;
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

#cssmenu>ul>li>a:hover {
  color: #ffffff;
  background: #242424;
}

#cssmenu ul>li.has-sub>a:after {
  position: absolute;
  right: 26px;
  top: 19px;
  z-index: 5;
  display: block;
  height: 10px;
  width: 2px;
  background: #fff;
  content: "";
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}

#cssmenu ul>li.has-sub>a:before {
  position: absolute;
  right: 22px;
  top: 23px;
  display: block;
  width: 10px;
  height: 2px;
  background: #fff;
  content: "";
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}




#cssmenu ul li.has-sub a:hover:after {
  background: #56a9de;
}

#cssmenu ul li.has-sub a:hover:before {
  background: #56a9de;
}






#cssmenu ul>li.has-sub.open>a:after,
#cssmenu ul>li.has-sub.open>a:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#cssmenu ul ul li a {
  padding: 14px 22px;
  cursor: pointer;
  z-index: 2;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  color: #000;
  background: #f5f5f5;
  margin-bottom: 1px;
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

#cssmenu ul ul ul li a {
  padding-left: 32px;
}

#cssmenu ul ul li a:hover {
  color: #ffffff;
  background: #56a9de;
}

#cssmenu ul ul>li.has-sub>a:after {
  top: 16px;
  right: 26px;
  background: #999;
}

#cssmenu ul ul>li.has-sub>a:before {
  top: 20px;
  background: #999;
}

.col-type {
  position: relative;
}

.col-type .type-project {
  position: relative;
  overflow: hidden;
  display: block;
}

.col-type .type-project .type-img {
  position: relative;
  overflow: hidden;
}

.col-type .type-project .type-text{
  position: relative;
  overflow: hidden;
}

.col-type .type-project .type-img img {
  filter: none;
  /* IE5+ */
  -webkit-filter: none;
  /* Webkit Nightlies & Chrome Canary */
  -webkit-transition: all .5s ease-in-out;
  -khtml-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

.col-type .type-project .type-text {
  opacity: 1;
  position: absolute;
  color: rgb(255, 255, 255);
  text-shadow: 1px 4px 0px rgba(0,0,0,0.57);
  top: 180px;
  left: 0;
    right: 0;
  -webkit-transition: all .5s ease-in-out;
  -khtml-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}


@media(min-width:992px) {

  #banpage {
    position: relative;
    padding: 200px 0px;
  }

  #page-section h2 {
    font-size: 48px;
  }


 .detail-app {
    width: 55%;
  }


  #banpage {
    position: relative;
    padding: 200px 0px;
  }

  /* #banpage:before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #ffffff70, rgb(15 44 73 / 25%));
  } */

  .col-type .type-project .type-img img {
    -webkit-transition: all .5s ease-in-out;
    -khtml-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
  }
  
  .col-type .type-project:hover .type-img img {
    -webkit-transform: scale(1.25);
  }
  
  .col-type .type-project .type-text {
    opacity: 0;
    position: absolute;
    color: rgb(255, 255, 255);
    text-shadow: 1px 4px 0px rgba(0,0,0,0.57);
    top: 180px;
    left: 0;
    right: 0;
    -webkit-transition: all .5s ease-in-out;
    -khtml-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
  }
  
  .col-type .type-project:hover .type-text {
    opacity: 1;
    -webkit-transition: all .5s ease-in-out;
    -khtml-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
  }
  


}