/* Reset Css */

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  /* font-size: 100%;
  font: inherit;
  vertical-align: baseline; */
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  text-decoration: none;
}

/*End Reset Css */

@font-face {
  src: url(../fonts/Lato-Regular.ttf);
  font-family: lato-r;
}

@font-face {
  src: url(../fonts/Lato-Light.ttf);
  font-family: lato-l;
}

@font-face {
  src: url(../fonts/Lato-Bold.ttf);
  font-family: lato-b;
}

@font-face {
  src: url(../fonts/Lato-Black.ttf);
  font-family: lato-black;
}

/* Css Top header */

.container {
  max-width: 1170px !important
}

.topheader {
  border-top: #0787d4 solid 5px;
  background-color: #21c2f8;
  height: 50px;
  padding-top: 13px;
  height: 55px;
}

.iconsocial a {
  color: white;
  display: inline-block;
  padding: 0px 9px;
}

.topheader .topheader__register.float-right {
  margin-top: -3px;
}

.topheader__register .btn-outline-secondary, .topheader__register .btn-secondary {
  font-family: lato-b;
  font-size: 14px;
  color: white;
  border: 1px solid white;
  height: 30px;
  padding-top: 4px;
}

.topheader__register .btn-secondary {
  color: #a1b1bc;
  background-color: white;
  margin-left: 5px;
}

/* End Css Top header  */

/* Css Menu Top */

.menutop {
  background-color: white;
}

.menutop .navbar {
  padding: 0px;
  height: 110px;
  box-shadow: 0px 7px 6px -6px rgba(0, 0, 0, 0.5);
}

.menutop .logo {
  padding: 28px 50px 27px 0px;
}

.menutop .menutop__right li.nav-item {
  height: 110px;
  margin-right: 40px;
}

.menutop .menutop__right li.nav-item a.nav-link {
  font-family: lato-r;
  font-size: 14px;
  text-transform: uppercase;
  color: #2c3e50;
  border-top: 5px solid transparent;
  padding: 45px 0px 0px 0px;
}

.menutop .menutop__right li.nav-item.active a.nav-link {
  color: #1abc9c;
  border-color: #1abc9c;
  transition: 0.7s;
}

.menutop .menutop__right li.nav-item.iconmenu {
  margin: -8px 0px 0px 0px;
}

.menutop .menutop__right li.nav-item.iconmenu a.nav-link {
  font-size: 28px;
  color: #a3b1ba;
  border: none;
}

.menutop .menutop__right li.nav-item.iconmenu:hover a.nav-link {
  color: #1abc9c;
}

.menutop .menutop__right li.nav-item.iconmenu:last-child a.nav-link {
  margin-left: 15px;
}

/* End Css Menu Top */

/* Slide Banner */

.slidebanner img {
  width: 100%;
  height: 100%;
}

#slide01 .carousel-item {
  transition: transform 1.5s ease;
}

#slide01 .carousel-item .carousel-caption {
  text-align: left;
  bottom: 30%;
}

#slide01 .carousel-item .carousel-caption h4 {
  font-size: 26px;
  font-family: lato-r;
}

#slide01 .carousel-item .carousel-caption p {
  font-family: lato-b;
  font-size: 40px;
  text-transform: uppercase;
  margin-bottom: 30px;
}

#slide01 .carousel-item .carousel-caption .list1 {
  font-size: 24px;
  font-family: lato-r;
}

#slide01 .carousel-item .carousel-caption .list1 li {
  margin-bottom: 18px;
}

#slide01 .carousel-item .carousel-caption .list1 span {
  margin-left: 18px;
}

#slide01 .carousel-item .carousel-caption .btnbuy {
  height: 60px;
  width: 200px;
  line-height: 47px;
  font-family: lato=b;
}

#slide01 .carousel-indicators li {
  width: 12px;
  height: 12px;
  border-radius: 8px;
  border: 2px solid white;
}

#slide01 .carousel-indicators li.active {
  background-color: #2c3e50;
}

#slide01 .carousel-indicators {
  bottom: 30px;
}

.btnslide__prev, .btnslide__next {
  width: 50px;
  height: 50px;
  top: 50%;
  background-color: transparent;
  border: 1px solid white;
  margin: 0px 28px;
}

.btnslide__prev:hover, .btnslide__next:hover {
  background-color: #222534;
}

/* End Slide Banner */

/* Introduce */

.introduce {
  padding-bottom: 100px;
}

.introduce .introduce__left {
  padding: 0;
}

.introduce .introduce__right {
  padding: 0 0 0 30px;
}

.introduce .introduce__left h1 {
  color: #2c3e50;
  font-family: lato-l;
  font-size: 36px;
  line-height: 50px;
  margin-right: 30px;
}

.introduce .introduce__left h4 {
  font-family: lato-b;
  font-size: 15px;
}

.introduce .introduce__left p {
  font-family: lato-b;
  font-size: 14px;
  color: #aebcc5;
  line-height: 24px;
}

.introduce .introduce__left .btn__detail, .simplework__bottom .btn__detail {
  text-transform: uppercase;
  font-family: lato-b;
  font-size: 16px;
  padding: 12px 25px;
  background-color: #a1b1bc;
  border-color: #a1b1bc;
  box-shadow: 0px 3px 0px #80919b;
}

.introduce .introduce__right .accordion .card-header {
  background-color: white;
  padding: 6px 0px;
}

.introduce .introduce__right .accordion .card-header button {
  text-decoration: none;
  font-weight: bold;
  font-family: lato-r;
  font-size: 15px;
  color: #2c3e50;
}

.introduce .introduce__right .accordion .card-body p {
  color: #a1b1bc;
  line-height: 20px;
}

/* End introduce */

.simplework {
  background-color: #f9fafb;
}

.simplework .title p {
  font-family: lato-l;
  font-size: 36px;
  color: #2c3e50;
  margin: 100px 0px 50px 0px;
}

.simplework .content {
  padding-bottom: 100px;
}

.simplework .content .content__colum {
  border: 1px solid #e7eaee;
}

.simplework .content__title {
  padding: 18px 18px 17px 20px;
  width: 390px;
  transition: 0.5s;
}

.simplework .content__title a {
  font-size: 14px;
  font-family: lato-b;
  color: #2c3e50;
  text-decoration: none;
}

.simplework .content__title span {
  font-family: lato-r;
  font-size: 16px;
  color: #aebcc5;
  padding-top: 2px;
}

.simplework .content__title .content__icon {
  color: #aebcc5;
  font-size: 20px;
}

.simplework .container__img {
  position: relative;
}

.simplework .container__img .background {
  background-color: #222534;
  position: absolute;
  width: 388px;
  height: 199px;
  top: 0;
  left: 0;
  color: #a9a8ad;
  font-size: 50px;
  opacity: 0;
  transition: 0.5s;
}

.simplework .content__colum:hover .container__img .background {
  opacity: 1;
}

.simplework .content__colum:hover .content__title {
  background-color: #a1b2bc;
}

.simplework .content__colum:hover .content__title a, .simplework .content__colum:hover .content__title span {
  color: #fefefe;
}

.simplework .container__img .background .icon--fix {
  top: 40%;
  left: 45%;
  position: relative;
}

.simplework__bottom {
  padding: 100px 0px;
}

.simplework__bottom h3 {
  font-family: lato-l;
  font-size: 36px;
}

.simplework__bottom p {
  font-family: lato-r;
  font-size: 14px;
  color: #a1b1bc;
  line-height: 24px;
}

/* Fun Fact */

.funfact .col--width {
  width: 25%;
  padding: 78px 0;
  line-height: 24px;
}

.funfact .col--width span {
  font-family: lato-l;
  font-size: 30px;
  color: white;
}

.funfact .col--width p {
  font-family: lato-b;
  font-size: 14px;
  color: white;
}

.funfact .col--width:nth-of-type(odd) {
  background-color: #20c9a8;
}

.funfact .col--width:nth-of-type(even) {
  background-color: #1bd5b0;
}

.funfact .col--width:hover {
  background-color: #2c3e50;
  cursor: pointer;
}

/* End Fun Fact */

/* Review */

.review {
  border-bottom: 1px solid #e9e9e9;
}

.review h2 {
  font-family: lato-l;
  font-size: 36px;
  margin: 100px 0px 18px 0px;
}

.review .review--fix {
  background-color: white;
  padding: 26px 25px 0px 0px;
  border: 1px solid #e4e7e9;
  border-radius: 5px;
  width: 550px !important;
  margin-bottom: 30px;
  height: 210px !important;
  line-height: 24px;
}

.review--fix:hover {
  background-color: #f9fafb;
  cursor: pointer;
}

.review--fix:nth-of-type(odd) {
  margin-right: 30px;
  margin-left: 20px;
}

.review--fix .image {
  width: 94px;
  height: 94px;
  border-radius: 47px;
  overflow: hidden;
  padding: 4px;
  border: 1px solid #cccccc;
  margin: 28px 18px 79px 18px;
  float: left;
  clear: both;
}

.review--fix .content h4 {
  font-family: lato-b;
  font-size: 18px;
  color: #2c3e50;
}

.review--fix .content span, .review--fix .content p {
  font-family: lato-r;
  font-size: 14px;
  color: #b4c0c9;
}

#slidereview .carousel-item {
  transition: transform 1.5s ease;
}

#slidereview .slidereview__prev, #slidereview .slidereview__next {
  color: #2c3e50;
  z-index: 30;
  width: 110px;
  font-size: 14px;
  font-family: lato-b;
}

#slidereview .slidereview__prev i, #slidereview .slidereview__next i {
  color: #2c3e50;
}

#slidereview .slidereview__prev {
  border-right: 1px solid #d7dfe1;
}

.btn__slide {
  margin: auto;
  border: 1px solid #d7dfe1;
  border-radius: 5px;
  width: 230px;
  margin-bottom: 36px;
}

#slidereview .slidereview__prev:hover, #slidereview .slidereview__next:hover {
  background-color: #fbfafa;
}

#slidereview .slidereview__prev:active, #slidereview .slidereview__next:active {
  box-shadow: #2c3e50;
}

/* End Review */

/* Footer */

footer.footer {
  background-color: #1a1c27;
  padding: 100px 0px;
}

footer.footer .col--width {
  width: 250px !important;
}

.footer .footer__aboutus {
  color: #a1b1bc;
  line-height: 24px;
  font-family: labo-r;
  margin-right: 32px;
}

.footer .footer__recentpost .title, .footer .footer__tweets .title, .footer .footer__featuredwork .title {
  font-family: lato-black;
  color: white;
  font-size: 18px;
  border-left: 5px solid #1abc9c;
  padding-left: 20px;
  margin-bottom: 29px;
}

.footer .footer__recentpost .content a {
  font-family: lato-r;
  font-size: 14px;
  color: #a1b1bc;
  padding: 18px 0px;
  text-decoration: none;
}

.footer .footer__recentpost .content li, .footer .footer__tweets .content li {
  padding: 18px 0px;
  width: 270px !important;
  border-bottom: 1px solid #262837;
}

.footer .footer__recentpost .content span {
  float: right;
  font-family: lato-r;
  font-size: 12px;
  color: #788894;
}

.footer .footer__tweets {
  margin-left: 32px;
}

.footer .footer__recentpost .content {
  padding-right: 20px;
}

.footer .footer__tweets .content p {
  line-height: 24px;
}

.footer .footer__tweets .content li {
  margin: 0px;
  font-family: lato-r;
  color: #a1b1bc;
  font-size: 14px;
}

.footer .footer__tweets .content li:first-child {
  padding-top: 0px;
}

.footer .footer__tweets .content li span {
  font-size: 12px;
  color: #616f7a;
}

.footer .footer__featuredwork ul li {
  float: left;
  padding: 7px;
}

/* End footer */

/* Reposive 576px */

@media (max-width:576px) {
  * {}
  .iconsocial {
    text-align: center;
  }
  .topheader {
    height: 90px;
  }
  .topheader__register.float-sm-right {
    text-align: center;
    margin-top: 15px;
  }
  .menutop .logo {
    padding: 0px 15px;
  }
  .menutop .navbar-collapse {
    background-color: #F7F7F9;
    z-index: 100;
  }
  .menutop .navbar {
    position: relative;
    height: 48px;
    box-shadow: 0px 7px 6px -6px rgba(0, 0, 0, 0.5);
  }
  .menutop .menutop__right li.nav-item a.nav-link {
    padding: 10px 10px;
    border-bottom: 1px dashed #1ABC9C;
  }
  .menutop .menutop__right li.nav-item {
    height: 40px;
    margin-left: 40px;
  }
  .menutop .menutop__right li.nav-item.iconmenu {
    display: none;
  }
  .review--fix:nth-of-type(odd) {
    margin-right: 0px;
  }
}

/*End Reposive 576px */