@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon/icomoon.eot?srf3rx");
  src: url("../fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"), url("../fonts/icomoon/icomoon.woff?srf3rx") format("woff"), url("../fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* =======================================================
*
* 	Template Style
*
* ======================================================= */
body {
  font-family: "Merriweather", serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  color: #777;
  background: #fff;
}

#page {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
.offcanvas #page {
  overflow: hidden;
  position: absolute;
}
.offcanvas #page:after {
  -webkit-transition: 2s;
  -o-transition: 2s;
  transition: 2s;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 101;
  background: rgba(0, 0, 0, 0.7);
  content: "";
}

a {
  color: #52D681;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
a:hover, a:active, a:focus {
  color: #52D681;
  outline: none;
  text-decoration: none;
}

p {
  margin-bottom: 20px;
}

h1, h2, h3, h4, h5, h6, figure {
  color: #000;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  margin: 0 0 20px 0;
}

::-webkit-selection {
  color: #fff;
  background: #52D681;
}

::-moz-selection {
  color: #fff;
  background: #52D681;
}

::selection {
  color: #fff;
  background: #52D681;
}

.gtco-container {
  max-width: 1140px;
  width: 100vw;
  position: relative;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

.gtco-nav {
  position: relative;
  top: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  padding: 30px 0;
  z-index: 1001;
  font-family: "Montserrat", sans-serif;
}
@media screen and (max-width: 768px　 width: 100vw; ) {
  .gtco-nav {
    padding: 10px 0;
    border-bottom: 1px solid #666666;
  }
}
.gtco-nav #gtco-logo {
  font-size: 20px;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-weight: bold;
}
.gtco-nav #gtco-logo a {
  color: #000;
}
.gtco-nav #gtco-logo em {
  color: #fff;
}
@media screen and (max-width: 768px) {
  .gtco-nav .menu-1, .gtco-nav .menu-2 {
    display: none;
  }
}
.gtco-nav ul {
  padding: 0;
  margin: .4em 0 0 0;
}
.gtco-nav ul li {
  padding: 0;
  margin: 0;
  list-style: none;
  display: inline;
  line-height: 1.5;
  font-family: "Montserrat", sans-serif;
}
.gtco-nav ul li > a {
  text-transform: uppercase;
  font-size: 13px !important;
  letter-spacing: .05em;
}
.gtco-nav ul li a {
  font-size: 16px;
  padding: 30px 10px;
  color: #cccccc;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
.gtco-nav ul li a:hover, .gtco-nav ul li a:focus, .gtco-nav ul li a:active {
  color: #000;
}
.gtco-nav ul li.has-dropdown {
  position: relative;
}
.gtco-nav ul li.has-dropdown > a {
  position: relative;
  padding-right: 20px !important;
}
.gtco-nav ul li.has-dropdown > a:after {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e921";
  font-style: 10px;
  position: absolute;
  top: 50%;
  margin-top: -7px;
  right: 0;
  color: #ccc;
}
.gtco-nav ul li.has-dropdown .dropdown {
  width: 130px;
  -webkit-box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.15);
  z-index: 1002;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 40px;
  left: 0;
  text-align: left;
  background: #000;
  padding: 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: 0s;
  -o-transition: 0s;
  transition: 0s;
}
.gtco-nav ul li.has-dropdown .dropdown:before {
  bottom: 100%;
  left: 40px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-bottom-color: #000;
  border-width: 8px;
  margin-left: -8px;
}
.gtco-nav ul li.has-dropdown .dropdown li {
  display: block;
  margin-bottom: 7px;
}
.gtco-nav ul li.has-dropdown .dropdown li:last-child {
  margin-bottom: 0;
}
.gtco-nav ul li.has-dropdown .dropdown li a {
  padding: 2px 0;
  display: block;
  color: #999999;
  line-height: 1.2;
  text-transform: none;
  font-size: 15px;
}
.gtco-nav ul li.has-dropdown .dropdown li a:hover {
  color: #fff;
}
.gtco-nav ul li.has-dropdown .dropdown li.active > a {
  color: #000 !important;
}
.gtco-nav ul li.has-dropdown:hover a, .gtco-nav ul li.has-dropdown:focus a {
  color: #000;
}
.gtco-nav ul li.btn-cta a {
  color: #52D681;
}
.gtco-nav ul li.btn-cta a span {
  background: #fff;
  padding: 4px 20px;
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -ms-border-radius: 100px;
  border-radius: 100px;
}
.gtco-nav ul li.btn-cta a:hover span {
  -webkit-box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75);
}
.gtco-nav ul li.active > a {
  color: #000 !important;
}

@media screen and (max-width: 480px) {
  #gtco-header .text-left {
    text-align: center !important;
  }
}
@media screen and (max-width: 480px) {
  #gtco-header .btn {
    display: block;
    width: 100%;
  }
}

#gtco-header,
#gtco-counter,
.gtco-bg {
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  position: relative;
}

.gtco-bg {
  background-position: center center;
  width: 100%;
  float: left;
  position: relative;
}

.gtco-cover {
  height: 900px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  float: left;
  width: 100%;
}
.gtco-cover.gtco-inner h1 {
  margin-bottom: 0 !important;
}
.gtco-cover a {
  color: #52D681;
}
.gtco-cover a:hover {
  color: white;
}
.gtco-cover .overlay {
  z-index: 1;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(29, 43, 83, 0.89);
}
.gtco-cover > .gtco-container {
  position: relative;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .gtco-cover {
    height: 600px;
    height: inherit !important;
    padding: 3em 0;
  }
}
.gtco-cover .display-t,
.gtco-cover .display-tc {
  height: 900px;
  display: table;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .gtco-cover .display-t,
  .gtco-cover .display-tc {
    height: 600px;
    height: inherit !important;
    padding: 3em 0;
  }
}
.gtco-cover.gtco-cover-sm {
  height: 600px;
}
@media screen and (max-width: 768px) {
  .gtco-cover.gtco-cover-sm {
    height: 400px;
    height: inherit !important;
  }
}
.gtco-cover.gtco-cover-sm .display-t,
.gtco-cover.gtco-cover-sm .display-tc {
  height: 600px;
  display: table;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .gtco-cover.gtco-cover-sm .display-t,
  .gtco-cover.gtco-cover-sm .display-tc {
    height: 400px;
    height: inherit !important;
    padding: 3em 0;
  }
}
.gtco-cover.gtco-cover-xs {
  height: 500px;
}
@media screen and (max-width: 768px) {
  .gtco-cover.gtco-cover-xs {
    height: inherit !important;
    padding: 3em 0;
  }
}
.gtco-cover.gtco-cover-xs .display-t,
.gtco-cover.gtco-cover-xs .display-tc {
  height: 500px;
  display: table;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .gtco-cover.gtco-cover-xs .display-t,
  .gtco-cover.gtco-cover-xs .display-tc {
    padding: 3em 0;
    height: inherit !important;
  }
}

.gtco-client {
  float: left;
  width: 100%;
  padding: 3em 0;
  background: #f6f6f6;
}
.gtco-client .client img {
  margin-top: 10px;
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
}

.gtco-testimonial .gtco-testimony {
  float: left;
  width: 100%;
  margin-bottom: 30px;
}
.gtco-testimonial .gtco-left > div {
  display: table-cell;
  float: left;
  width: 80px;
}
.gtco-testimonial .gtco-left > div img {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  max-width: 100% !important;
}
.gtco-testimonial .gtco-left > blockquote {
  padding-left: 20px;
  display: table-cell;
  border-left: none;
  margin: 0;
  padding: 0 0 0 30px;
}
.gtco-testimonial .gtco-left > blockquote p {
  font-style: 16px;
  font-style: italic;
}
.gtco-testimonial .gtco-left > blockquote .author {
  color: #666666;
  display: block;
  margin-top: 20px;
  font-size: 12px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
}

#gtco-footer {
  background: #262626;
  padding: 7em 0 0 0 !important;
  margin-bottom: 0 !important;
  width: 100%;
  float: left;
}
#gtco-footer a:hover {
  color: #fff !important;
}
#gtco-footer .gtco-cta {
  margin-bottom: 30px;
}
#gtco-footer .gtco-cta h3 {
  color: #fff;
  font-size: 30px;
  font-weight: 300;
}
#gtco-footer .gtco-cta .btn-white {
  padding: 15px 20px !important;
}
#gtco-footer .gtco-cta .btn-white.btn-outline:hover {
  color: #000 !important;
}
#gtco-footer .gtco-footer-paragraph h3 {
  color: #fff;
  margin-bottom: 10px;
}
#gtco-footer .gtco-footer-link {
  padding-left: 30px;
}
#gtco-footer .gtco-footer-link h3 {
  color: #fff;
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  #gtco-footer .gtco-footer-link {
    padding-left: 15px;
  }
}
#gtco-footer .gtco-footer-link .gtco-list-link {
  padding: 0;
  margin: 0;
}
#gtco-footer .gtco-footer-link .gtco-list-link li {
  padding: 0;
  margin: 0;
  list-style: none;
}
#gtco-footer .gtco-footer-link .gtco-list-link li a {
  text-transform: uppercase;
  font-size: 13px !important;
  font-family: "Montserrat", sans-serif;
}
#gtco-footer .gtco-footer-subscribe {
  padding-left: 30px;
}
@media screen and (max-width: 768px) {
  #gtco-footer .gtco-footer-subscribe {
    padding-left: 15px;
  }
}
#gtco-footer .gtco-footer-subscribe .form-control {
  background: #fff !important;
  border: none !important;
}
#gtco-footer .gtco-footer-subscribe .btn {
  margin-top: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  height: 54px !important;
  line-height: 1.5;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px !important;
  padding-right: 10px !important;
}
#gtco-footer .gtco-copyright {
  background: #1a1a1a;
  padding: 30px 0;
  float: left;
  width: 100%;
}
#gtco-footer .gtco-copyright p {
  font-family: "Montserrat", sans-serif;
}
#gtco-footer .gtco-copyright p:last-child {
  margin-bottom: 0;
}

.bg-img {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.gtco-staff, .gtco-item {
  margin-bottom: 4em;
  float: left;
  width: 100%;
  display: block;
}
@media screen and (max-width: 768px) {
  .gtco-staff, .gtco-item {
    margin-bottom: 3em;
  }
}
.gtco-staff img, .gtco-item img {
  margin-bottom: 40px !important;
}
.gtco-staff h2, .gtco-item h2 {
  font-size: 24px;
  margin-bottom: 5px;
}
.gtco-staff h2 a, .gtco-item h2 a {
  color: #000 !important;
}
.gtco-staff p, .gtco-item p {
  margin-bottom: 30px;
  color: #777;
}
.gtco-staff .role, .gtco-item .role {
  color: #bfbfbf;
  margin-bottom: 20px;
  font-weight: normal;
  display: block;
}
.gtco-staff .fh5co-social, .gtco-item .fh5co-social {
  padding: 0;
  margin: 0;
}
.gtco-staff .fh5co-social li, .gtco-item .fh5co-social li {
  padding: 0;
  margin: 0 10px 0 0;
  list-style: none;
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.gtco-staff .fh5co-social li a, .gtco-item .fh5co-social li a {
  font-size: 20px;
  color: #52d681;
}
.gtco-staff .fh5co-social li a:hover, .gtco-item .fh5co-social li a:hover {
  color: #000;
}

.gtco-news ul {
  padding: 0;
  margin: 0;
}
.gtco-news ul li {
  margin: 0 0 20px 0;
  list-style: none;
  display: block;
  border-bottom: 1px solid #f2f2f2;
}
.gtco-news ul li a {
  display: block;
  padding: 0 0 20px 0;
}
.gtco-news ul li a h3 {
  margin-bottom: 15px;
  font-weight: 100;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  color: #52D681;
}
.gtco-news ul li a .post-date {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #b3b3b3;
  font-family: "Montserrat", sans-serif;
  margin-bottom: 10px;
  display: block;
  font-size: 12px;
  font-weight: 100;
}
.gtco-news ul li a p {
  color: gray;
}
.gtco-news ul li a p:last-child {
  margin-bottom: 0;
}
.gtco-news ul li a:hover h3 {
  color: #000;
}

.gtco-social-icons {
  margin: 0;
  padding: 0;
}
.gtco-social-icons li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.gtco-social-icons li a {
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
  color: #52D681;
  padding-left: 10px;
  padding-right: 10px;
}
.gtco-social-icons li a i {
  font-size: 20px;
}

.gtco-contact-info {
  margin-bottom: 30px;
  float: left;
  width: 100%;
  position: relative;
}
.gtco-contact-info ul {
  padding: 0;
  margin: 0;
}
.gtco-contact-info ul li {
  padding: 0 0 0 50px;
  margin: 0 0 30px 0;
  list-style: none;
  position: relative;
}
.gtco-contact-info ul li:before {
  color: #cccccc;
  position: absolute;
  left: 0;
  top: .05em;
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.gtco-contact-info ul li.address:before {
  font-size: 30px;
  content: "\e9d1";
}
.gtco-contact-info ul li.phone:before {
  font-size: 23px;
  content: "\e9f4";
}
.gtco-contact-info ul li.email:before {
  font-size: 23px;
  content: "\e9da";
}
.gtco-contact-info ul li.url:before {
  font-size: 23px;
  content: "\e9af";
}

#map {
  width: 100%;
  height: 500px;
  position: relative;
}
@media screen and (max-width: 768px) {
  #map {
    height: 200px;
  }
}

form label {
  font-weight: normal !important;
}

#gtco-header {
  background-repeat: no-repeat;
  background-size: cover;
}
#gtco-header p {
  color: #d3f1ed;
  font-size: 20px;
  margin-bottom: 40px !important;
}
#gtco-header h1 {
  font-size: 50px;
  line-height: 1.2 !important;
  margin-bottom: 30px !important;
  color: #d3f1ed;
  font-weight: 100;
}
@media screen and (max-width: 768px) {
  #gtco-header h1 {
    line-height: 1.2 !important;
  }
}
#gtco-header h1.no-margin {
  margin-bottom: 0 !important;
}
#gtco-header .copy {
  margin-top: 0em;
}
#gtco-header .btn {
  color: #34a7bd !important;
  text-shadow: none !important;
}
#gtco-header .header-img {
  margin-bottom: 30px;
}

#gtco-header .display-tc,
#gtco-counter .display-tc,
.gtco-cover .display-tc {
  display: table-cell !important;
  vertical-align: middle;
}
#gtco-header .display-tc h1, #gtco-header .display-tc h2,
#gtco-counter .display-tc h1,
#gtco-counter .display-tc h2,
.gtco-cover .display-tc h1,
.gtco-cover .display-tc h2 {
  margin: 0;
  padding: 0;
  color: white;
}
#gtco-header .display-tc h1,
#gtco-counter .display-tc h1,
.gtco-cover .display-tc h1 {
  margin-bottom: 0px;
  font-size: 59px;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  #gtco-header .display-tc h1,
  #gtco-counter .display-tc h1,
  .gtco-cover .display-tc h1 {
    font-size: 34px;
    line-height: 1.2;
    margin-bottom: 10px;
  }
}
#gtco-header .display-tc h2,
#gtco-counter .display-tc h2,
.gtco-cover .display-tc h2 {
  font-size: 22px;
  line-height: 1.5;
  margin-bottom: 30px;
}

#gtco-counter {
  text-align: center;
}
#gtco-counter .counter {
  font-size: 50px;
  margin-bottom: 10px;
  color: #52D681;
  font-weight: 100;
  display: block;
}
#gtco-counter .counter-label {
  margin-bottom: 0;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
  letter-spacing: .1em;
}
@media screen and (max-width: 768px) {
  #gtco-counter .feature-center {
    margin-bottom: 50px;
  }
}
#gtco-counter .icon {
  width: 70px;
  height: 70px;
  text-align: center;
  margin-bottom: 20px;
  background: none !important;
  border: none !important;
}
#gtco-counter .icon i {
  height: 70px;
}
#gtco-counter .icon i:before {
  color: #cccccc;
  display: block;
  text-align: center;
  margin-left: 3px;
}

.gtco-section {
  padding: 3em 0;
  clear: both;
  position: relative;
}
@media screen and (max-width: 768px) {
  .gtco-section {
    padding: 3em 0;
  }
}
.gtco-section.border-bottom {
  border-bottom: 1px solid #d9d9d9;
}
.gtco-section.gtco-gray {
  background: #f6f6f6;
}

.gtco-heading {
  margin-bottom: 5em;
}
.gtco-heading.gtco-heading-sm {
  margin-bottom: 2em;
}
.gtco-heading h2 {
  font-size: 40px;
  margin-bottom: 10px;
  line-height: 1.5;
  color: #4d4d4d;
  font-weight: 300;
}
.gtco-heading p {
  font-size: 18px;
  line-height: 1.7;
  color: #898989;
}

blockquote {
  padding-left: 0;
  border-left: none;
}
blockquote p {
  font-style: italic;
  color: #000;
}
blockquote p > cite {
  font-size: 14px;
  color: #b3b3b3;
}

#gtco-offcanvas {
  position: absolute;
  z-index: 1901;
  width: 270px;
  background: black;
  top: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 45px 40px 40px 40px;
  overflow-y: auto;
  display: none;
  -moz-transform: translateX(270px);
  -webkit-transform: translateX(270px);
  -ms-transform: translateX(270px);
  -o-transform: translateX(270px);
  transform: translateX(270px);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
@media screen and (max-width: 768px) {
  #gtco-offcanvas {
    display: block;
  }
}
.offcanvas #gtco-offcanvas {
  -moz-transform: translateX(0px);
  -webkit-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -o-transform: translateX(0px);
  transform: translateX(0px);
}
#gtco-offcanvas a {
  color: rgba(255, 255, 255, 0.5);
  font-family: "Montserrat", sans-serif;
}
#gtco-offcanvas a:hover {
  color: rgba(255, 255, 255, 0.8);
}
#gtco-offcanvas ul {
  padding: 0;
  margin: 0;
}
#gtco-offcanvas ul li {
  padding: 0;
  margin: 0;
  display: block;
  list-style: none;
  float: left;
  width: 100%;
  margin-bottom: 5px;
}
#gtco-offcanvas ul li > ul {
  padding-left: 20px;
  display: none;
}
#gtco-offcanvas ul li > a {
  display: block;
}
#gtco-offcanvas ul li.offcanvas-has-dropdown > a {
  display: block;
  position: relative;
}
#gtco-offcanvas ul li.offcanvas-has-dropdown > a:after {
  position: absolute;
  right: 0px;
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e921";
  font-size: 20px;
  color: rgba(255, 255, 255, 0.2);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
#gtco-offcanvas ul li.offcanvas-has-dropdown.active a:after {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.uppercase {
  font-size: 14px;
  color: #000;
  margin-bottom: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.gototop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
.gototop.active {
  opacity: 1;
  visibility: visible;
}
.gototop a {
  width: 50px;
  height: 50px;
  display: table;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: center;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
.gototop a i {
  height: 50px;
  display: table-cell;
  vertical-align: middle;
}
.gototop a:hover, .gototop a:active, .gototop a:focus {
  text-decoration: none;
  outline: none;
}

.gtco-nav-toggle {
  width: 25px;
  height: 25px;
  cursor: pointer;
  text-decoration: none;
}
.gtco-nav-toggle.active i::before, .gtco-nav-toggle.active i::after {
  background: #444;
}
.gtco-nav-toggle:hover, .gtco-nav-toggle:focus, .gtco-nav-toggle:active {
  outline: none;
  border-bottom: none !important;
}
.gtco-nav-toggle i {
  position: relative;
  display: inline-block;
  width: 25px;
  height: 2px;
  color: #252525;
  font: bold 14px/.4 Helvetica;
  text-transform: uppercase;
  text-indent: -55px;
  background: #252525;
  transition: all .2s ease-out;
}
.gtco-nav-toggle i::before, .gtco-nav-toggle i::after {
  content: '';
  width: 25px;
  height: 2px;
  background: #252525;
  position: absolute;
  left: 0;
  transition: all .2s ease-out;
}
.gtco-nav-toggle.gtco-nav-white > i {
  color: #fff;
  background: #fff;
}
.gtco-nav-toggle.gtco-nav-white > i::before, .gtco-nav-toggle.gtco-nav-white > i::after {
  background: #fff;
}

.gtco-nav-toggle i::before {
  top: -7px;
}

.gtco-nav-toggle i::after {
  bottom: -7px;
}

.gtco-nav-toggle:hover i::before {
  top: -10px;
}

.gtco-nav-toggle:hover i::after {
  bottom: -10px;
}

.gtco-nav-toggle.active i {
  background: transparent;
}

.gtco-nav-toggle.active i::before {
  top: 0;
  -webkit-transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  -ms-transform: rotateZ(45deg);
  -o-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.gtco-nav-toggle.active i::after {
  bottom: 0;
  -webkit-transform: rotateZ(-45deg);
  -moz-transform: rotateZ(-45deg);
  -ms-transform: rotateZ(-45deg);
  -o-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
}

.gtco-nav-toggle {
  position: absolute;
  right: 0px;
  top: 8px;
  z-index: 21;
  padding: 6px 0 0 0;
  display: block;
  margin: 0 auto;
  display: none;
  height: 44px;
  width: 44px;
  z-index: 2001;
  border-bottom: none !important;
}
@media screen and (max-width: 768px) {
  .gtco-nav-toggle {
    display: block;
  }
}

.btn {
  margin-right: 4px;
  margin-bottom: 4px;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 700 !important;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  border-radius: 0px;
  letter-spacing: 2px;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  padding: 20px 30px;
  text-transform: uppercase;
  text-shadow: none !important;
  -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.15);
}
.btn.btn-sm {
  padding: 10px 20px !important;
}
.btn:hover, .btn:active, .btn:focus {
  outline: none !important;
  -webkit-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.1);
}

.btn-primary {
  background: #52D681;
  color: #fff;
  border: 2px solid #52D681 !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: #67db90 !important;
  border-color: #67db90 !important;
}
.btn-primary.btn-outline {
  background: transparent;
  color: #52D681;
  border: 2px solid #52D681;
}
.btn-primary.btn-outline:hover, .btn-primary.btn-outline:focus, .btn-primary.btn-outline:active {
  background: #52D681;
  color: #fff;
}

.btn-success {
  background: #5cb85c;
  color: #fff;
  border: 2px solid #5cb85c;
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
  background: #4cae4c !important;
  border-color: #4cae4c !important;
}
.btn-success.btn-outline {
  background: transparent;
  color: #5cb85c;
  border: 2px solid #5cb85c;
}
.btn-success.btn-outline:hover, .btn-success.btn-outline:focus, .btn-success.btn-outline:active {
  background: #5cb85c;
  color: #fff;
}

.btn-info {
  background: #5bc0de;
  color: #fff;
  border: 2px solid #5bc0de;
}
.btn-info:hover, .btn-info:focus, .btn-info:active {
  background: #46b8da !important;
  border-color: #46b8da !important;
}
.btn-info.btn-outline {
  background: transparent;
  color: #5bc0de;
  border: 2px solid #5bc0de;
}
.btn-info.btn-outline:hover, .btn-info.btn-outline:focus, .btn-info.btn-outline:active {
  background: #5bc0de;
  color: #fff;
}

.btn-warning {
  background: #f0ad4e;
  color: #fff;
  border: 2px solid #f0ad4e;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
  background: #eea236 !important;
  border-color: #eea236 !important;
}
.btn-warning.btn-outline {
  background: transparent;
  color: #f0ad4e;
  border: 2px solid #f0ad4e;
}
.btn-warning.btn-outline:hover, .btn-warning.btn-outline:focus, .btn-warning.btn-outline:active {
  background: #f0ad4e;
  color: #fff;
}

.btn-danger {
  background: #d9534f;
  color: #fff;
  border: 2px solid #d9534f;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
  background: #d43f3a !important;
  border-color: #d43f3a !important;
}
.btn-danger.btn-outline {
  background: transparent;
  color: #d9534f;
  border: 2px solid #d9534f;
}
.btn-danger.btn-outline:hover, .btn-danger.btn-outline:focus, .btn-danger.btn-outline:active {
  background: #d9534f;
  color: #fff;
}

.btn-white {
  background: #fff;
  color: #000;
  border: 2px solid #fff;
}
.btn-white:hover, .btn-white:focus, .btn-white:active {
  color: #000;
  background: #fff;
  border-color: #fff;
}
.btn-white.btn-outline {
  color: #fff;
  border: 2px solid #fff;
}
.btn-white.btn-outline:hover, .btn-white.btn-outline:focus, .btn-white.btn-outline:active {
  background: #fff;
  color: #000 !important;
  border: 2px solid #fff;
}

.btn-special {
  background: #52D681;
  color: #2f9051;
  border: 2px solid #52D681;
}
.btn-special:hover, .btn-special:focus, .btn-special:active {
  color: #fff;
  background: #52D681;
  border-color: #52D681;
}
.btn-special.btn-outline {
  color: #fff;
  border: 2px solid #52D681;
}
.btn-special.btn-outline:hover, .btn-special.btn-outline:focus, .btn-special.btn-outline:active {
  background: #fff;
  color: #2f9051;
  border: 2px solid #52D681;
}

.btn-outline {
  background: none;
  border: 2px solid gray;
  font-size: 16px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.btn-outline:hover, .btn-outline:focus, .btn-outline:active {
  box-shadow: none;
}

.btn.with-arrow {
  position: relative;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.btn.with-arrow i {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  right: 0px;
  top: 50%;
  margin-top: -8px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}
.btn.with-arrow:hover {
  padding-right: 50px;
}
.btn.with-arrow:hover i {
  color: #fff;
  right: 18px;
  visibility: visible;
  opacity: 1;
}

.form-control {
  box-shadow: none;
  background: transparent;
  border: 2px solid rgba(0, 0, 0, 0.1);
  height: 54px;
  font-size: 18px;
  font-weight: 300;
}
.form-control:active, .form-control:focus {
  outline: none;
  box-shadow: none;
  border-color: #52D681;
}

.row-pb-md {
  padding-bottom: 4em !important;
}

.row-pb-sm {
  padding-bottom: 2em !important;
}

.mt-md {
  margin-top: 70px;
}
@media screen and (max-width: 768px) {
  .mt-md {
    margin-top: 10px;
  }
}

.gtco-loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url(../images/loader.gif) center no-repeat #fff;
}

.js .animate-box {
  opacity: 0;
}

@media screen and (max-width: 768px) {
  .gtco-nav .gtco-contact {
    text-align: left !important;
  }
}
.gtco-nav .gtco-contact ul {
  padding: 0;
  margin: 0 0 20px 0;
}
.gtco-nav .gtco-contact ul li {
  padding: 0;
  margin: 0;
}
.gtco-nav .gtco-contact ul li a {
  font-size: 14px;
  font-weight: bold !important;
  margin-left: 0px;
}
.gtco-nav .gtco-contact ul li a i {
  color: #52D681;
}
.gtco-nav .gtco-contact ul li a:hover i {
  color: #fff;
}

.gtco-flex {
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  position: relative;
  float: left;
}

#gtco-portfolio {
  padding: 7em 0;
  background: #303841;
  min-height: 500px;
}
@media screen and (max-width: 768px) {
  #gtco-portfolio {
    padding: 3em 0;
  }
}
#gtco-portfolio .gtco-heading h2 {
  color: #fff;
}
#gtco-portfolio .gtco-heading p {
  color: rgba(255, 255, 255, 0.7);
}

/* Owl Override Style */
.owl-carousel-carousel.owl-theme .owl-controls .owl-nav .owl-next,
.owl-carousel-carousel.owl-theme .owl-controls .owl-nav .owl-prev {
  top: 25%;
  z-index: 1001;
  position: absolute;
}

.owl-carousel-fullwidth.owl-theme .owl-controls .owl-nav .owl-next,
.owl-carousel-fullwidth.owl-theme .owl-controls .owl-nav .owl-prev {
  top: 44%;
  z-index: 1001;
  position: absolute;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.owl-carousel-carousel.owl-theme .owl-controls .owl-nav .owl-next {
  right: -170px;
}
@media screen and (max-width: 992px) {
  .owl-carousel-carousel.owl-theme .owl-controls .owl-nav .owl-next {
    right: -50px;
  }
}

.owl-carousel-carousel.owl-theme .owl-controls .owl-nav .owl-prev {
  left: -170px;
}
@media screen and (max-width: 992px) {
  .owl-carousel-carousel.owl-theme .owl-controls .owl-nav .owl-prev {
    left: -50px;
  }
}

.owl-carousel-fullwidth.owl-theme .owl-controls .owl-nav .owl-next {
  right: 0px;
}

.owl-carousel-fullwidth.owl-theme .owl-controls .owl-nav .owl-prev {
  left: 0px;
}

.owl-carousel-fullwidth.owl-theme .owl-controls .owl-nav .owl-next i,
.owl-carousel-fullwidth.owl-theme .owl-controls .owl-nav .owl-prev i {
  color: #000;
}
.owl-carousel-fullwidth.owl-theme .owl-controls .owl-nav .owl-next:hover i,
.owl-carousel-fullwidth.owl-theme .owl-controls .owl-nav .owl-prev:hover i {
  color: #000;
}

@media screen and (max-width: 768px) {
  .owl-theme .owl-controls .owl-nav {
    display: none;
  }
}

.owl-carousel-fullwidth.owl-theme .owl-controls .owl-nav [class*="owl-"] {
  background: none !important;
}
.owl-carousel-fullwidth.owl-theme .owl-controls .owl-nav [class*="owl-"] i {
  color: #fff;
  font-size: 24px;
  background: rgba(0, 0, 0, 0.7) !important;
  z-index: 1002;
  padding: 12px;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}
.owl-carousel-fullwidth.owl-theme .owl-controls .owl-nav [class*="owl-"]:hover i, .owl-carousel-fullwidth.owl-theme .owl-controls .owl-nav [class*="owl-"]:focus i {
  color: #fff;
}

.owl-carousel-carousel.owl-theme .owl-controls .owl-nav [class*="owl-"] {
  background: none !important;
}
.owl-carousel-carousel.owl-theme .owl-controls .owl-nav [class*="owl-"] i {
  color:#e3e3e3;
  font-size: 30px;
  background: transparent !important;
  z-index: 1002;
  padding: 12px;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
.owl-carousel-carousel.owl-theme .owl-controls .owl-nav [class*="owl-"]:hover i, .owl-carousel-carousel.owl-theme .owl-controls .owl-nav [class*="owl-"]:focus i {
  color: #000;
}

.gtco-more {
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .05em;
}
.gtco-more:hover {
  color: #000;
}

.gto-features {
  border-top: 1px solid #e6e6e6;
}

.feature-left {
  margin-bottom: 0px;
}
@media screen and (max-width: 768px) {
  .feature-left {
    margin-bottom: 20px;
  }
}
.feature-left > .icon {
  float: left;
  font-size: 34px;
  color: #cccccc;
}
.feature-left > .copy {
  padding-left: 30px;
}
.feature-left > .copy h3 {
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.feature-left > .copy p {
  font-size: 14px !important;
  line-height: 26px;
}
.feature-left > .copy p:last-child {
  margin-bottom: 0;
}
.feature-left > .icon, .feature-left > .copy {
  display: table-cell;
}

.gtco-services .feature-left {
  float: left;
  width: 100%;
  margin-bottom: 50px !important;
}
.gtco-services .feature-left p {
  margin-bottom: 10px !important;
}

.owl-theme .owl-dots {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}

.owl-carousel-fullwidth.owl-theme .owl-dots {
  bottom: 0;
  margin-bottom: 2.5em;
}

.owl-carousel-fullwidth .item > a {
  display: block;
  position: relative;
  z-index: 10;
}
.owl-carousel-fullwidth .item > a:after {
  z-index: 1;
  content: "";
  position: absolute;
  width: 100%;
  height: 20%;
  bottom: 0;
  -webkit-box-shadow: inset 0px -177px 230px -121px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0px -177px 230px -121px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0px -177px 230px -121px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset -27px -181px 151px -121px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset -27px -181px 151px -121px rgba(0, 0, 0, 0.3);
  box-shadow: inset -27px -181px 151px -121px rgba(0, 0, 0, 0.3);
}
.owl-carousel-fullwidth .item > a .slider-copy {
  position: absolute;
  bottom: 5px;
  left: 20px;
  right: 20px;
  z-index: 10;
}
.owl-carousel-fullwidth .item > a .slider-copy h2 {
  color: #fff;
  font-size: 16px;
  font-weight: 100;
  position: absolute;
  bottom: -12px;
  left: -8px;
}
.owl-carousel-fullwidth .item > a .slider-copy h3 {
  color:  #52D681;
  font-size: 9px;
  font-weight: 100;
  position: absolute;
  bottom: -20px;
  right: -8px;
}

.owl-theme .owl-dots .owl-dot span {
  width: 10px;
  height: 10px;
  background: #cccccc;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}
.owl-theme .owl-dots .owl-dot span:hover {
  background: none;
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
  background: none;
  background: #4d4d4d;
}
.resizeimage {
   max-width: 548px; /* 548px*/
   min-width: 231px; /* 231px*/
　　width : 90vw ; /* 画面幅の90％ */
}
.resizeimage img {width : 90vw ; margin-left : auto , margin-right : auto }
/*# sourceMappingURL=style.css.map */

.ribbon16-wrapper {
  display: block;
  position: relative;
  margin: 15px auto;
  padding: 5px 0;
  width: 300px;
  background: #ffffff;
  box-sizing: border-box;
  }

.ribbon16 {
  display: inline-block;
  position: absolute;
  top: 0px;
  right: 10px;
  margin: 0;
  padding: 10px 0 7px;
  z-index: 2;
  width: 40px;
  text-align: center;
  color: white;
  font-size: 13px;
  background: #FF54D4;
  border-radius: 2px 0 0 0;
  }

.ribbon16:before {
  position: absolute;
  content: '';
  top: 0;
  right: -5px;
  border: none;
  border-bottom: solid 6px #FF14C4;
  border-right: solid 5px transparent;
}

.ribbon16:after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  height: 0;
  width: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 10px solid #FF54D4;
}

.parent {
  text-align: center;
}


.ribbon18-wrapper {
  display: block;
  position: relative;
  margin: 15px auto;
  padding: 10px 0;
  width: 300px;
  height: 150px;
  background: #f1f1f1;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.14);
  box-sizing: border-box;
}

.ribbon18-content {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 89px;
  height: 91px;
  overflow: hidden;
  }

.ribbon18 {
  display: inline-block;
  position: absolute;
  padding: 7px 0;
  left: -23px;
  top: 22px;
  width: 160px;
  text-align: center;
  font-size: 18px;
  line-height: 16px;
  background: linear-gradient(to right, #4298fa 0%,#8fcdff 100%);
  color: #fff;
  text-shadow: 0 2px 2px #56a1f3;
  letter-spacing: 0.05em;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.ribbon18:before, .ribbon18:after {
  position: absolute;
  content: "";
  border-top: 4px solid #3672b6;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  bottom: -4px;
}

.ribbon18:before {
  left: 14px;
}

.ribbon18:after {
  right: 18px;
}


.ribbon20-wrapper {
  display: block;
  position: absolute;
  margin: 0 auto;
  padding: 0px 0;
  width: auto;
  background: #ffffff;

  }
.ribbon20 {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0px;
  box-sizing: border-box;
  padding: 0 0px;
  margin: 0;
  height: 30px;
  line-height: 30px;
  font-size: 18px;
  letter-spacing: 0.1em;
  color: white;
  background: #70c7ff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
}
.ribbon20:before {
  position: absolute;
  content: '';
  top: 0;
  left: -10px;
  border: none;
  height: 38px;
  width: 7px;
  background: #70c7ff;
  border-radius: 5px 0 0 5px;
}
.ribbon20:after {
  position: absolute;
  content: '';
  bottom: px;
  left: px;
  border: none;
  height: px;
  width: px;
  background: #4d99ca;
  border-radius: 5px 0 0 5px;
}
.text {
text-align:left;
}

.ribbon13-wrapper {
  display: block;
  position: relative;
  margin: 15px auto;
  padding: 10px 0;
  width: 300px;
  background: #f1f1f1;
  }

.ribbon13 {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  padding: 5px 0;
  margin: 0 0 0 -20px;
  width: calc(100% + 20px);
  color: white;
  background: #70a6ff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

.ribbon13 h3{
  margin: 0;
  padding: 0 30px 0 15px;
  border-top: dashed 1px #FFF;
  border-bottom: dashed 1px #FFF;
  font-size: 20px;
  line-height: 46px;
}

.ribbon13:after {
  position: absolute;
  content: '';
  z-index: 1;
  top: 0;
  right: 0;
  width: 0px;
  height: 0px;
  border-width: 30px 15px 30px 0px;
  border-color: transparent #f1f1f1 transparent transparent;
  border-style: solid;
}

.ribbon13:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px #6081b7;
}
.

/* リボン */
/* 共通CSS */
.box {
	position: relative;
	color: #fff;
	display: inline-block;
	overflow: hidden;
	font-weight: bold;
}
.box p {
	display: inline;
}
/* 1(MORNING) */
.box-sub1{
	padding: 5px;
}

.box-sub1 p span {
	position: absolute;
	display: inline-block;
	right: -25px;
	box-shadow: 0px 2px 5px rgba(0,0,0,0.6), inset 0px 5px 20px rgba(255,255,255,0.2);
	text-align: center;
	text-transform: uppercase;
	top: 22px;
	background: #53bbf1;
	width: 100px;
	padding: 3px 10px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-0-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.box-sub1 p:before {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	top: -17px;
	right: 69px;
	z-index: -1;
	border: 17px solid;
	border-color: transparent transparent #136996 transparent;
}
.box-sub1 p:after {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	top: 75px;
	z-index: -1;
	right: -10px;
	border: 17px solid;
	border-color: #136996 transparent transparent transparent;
}


/* 3(CAFE) */
.box-sub3{
	padding: 5px;
}

.box-sub3 p span {
	position: absolute;
	display: inline-block;
	left: -28px;
	box-shadow: 0px -2px 10px rgba(0,0,0,0.2),
  inset 0px 5px 20px rgba(255,255,255,0.2);
	text-align: center;
	text-transform: uppercase;
	bottom: 18px;
	background: #d29001;
	width: 100px;
	padding: 3px 10px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
}
.box-sub3 p:before {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	bottom: 72px;
	left: -10px;
	z-index: -1;
	border: 17px solid;
	border-color: transparent transparent #3e2a00 transparent;
}
.box-sub3 p:after {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	bottom: -24px;
	z-index: -1;
	left: 56px;
	border: 17px solid;
	border-color: #3e2a00 transparent transparent transparent;
}


.side-corner-tag {
    position: relative;
    color: #fff;
    display: inline-block;
    padding: 5px;
    overflow: hidden;
    font-family: Arial, sans-serif;
    font-weight: 900;
}

.side-corner-tag p {
    display: inline;
}

.side-corner-tag p span {
    position: absolute;
    display: inline-block;
    right: -25px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2), inset 0px 5px 30px rgba(255,255,255,0.2);
    text-align: center;
    text-transform: uppercase;
    top: 22px;
    background: #d93131;
    width: 100px;
    padding: 3px 10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

.side-corner-tag p:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -17px;
    right: 69px;
    z-index: -1;
    border: 17px solid;
    border-color: transparent transparent #662121 transparent;
}

.side-corner-tag p:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 74px;
    z-index: -1;
    right: -10px;
    border: 17px solid;
    border-color: #662121 transparent transparent transparent;
}


/* ribbon style */

 .ribbon-wrapper {
	position: relative;
	border-bottom: 10px solid #ccc;
	border-top: 0px solid #ccc;
	-moz-border-bottom-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
	-webkit-border-bottom-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
	-moz-border-top-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
	-webkit-border-top-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
}
  .ribbon-front {
	background-color: #F6FF07;	height: 80px;
	width: 40px;
	position: relative;
	left:-20px;
	z-index: 2;
}

  .ribbon-front,
  .ribbon-back-left,
  .ribbon-back-right
{
	-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	-o-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
}

  .ribbon-edge-topleft,
  .ribbon-edge-topright,
  .ribbon-edge-bottomleft,
  .ribbon-edge-bottomright {
	position: absolute;
	z-index: 1;
	border-style:solid;
	height:0px;
	width:0px;
}

  .ribbon-edge-topleft,
  .ribbon-edge-topright {
}

  .ribbon-edge-bottomleft,
  .ribbon-edge-bottomright {
	top: 80px;
}

  .ribbon-edge-topleft,
  .ribbon-edge-bottomleft {
	left: -20px;
	border-color: transparent #CBCD9A transparent transparent;
}

  .ribbon-edge-topleft {
	top: 0px;
	border-width: 0px 20px 0 0;
}
  .ribbon-edge-bottomleft {
	border-width: 0 20px 10px 0;
}

  .ribbon-edge-topright,
  .ribbon-edge-bottomright {
	left: 20px;
	border-color: transparent transparent transparent #CBCD9A;
}

  .ribbon-edge-topright {
	top: 0px;
	border-width: 0px 0 0 0px;
}
  .ribbon-edge-bottomright {
	border-width: 0 0 0px 0px;
}

  .ribbon-back-left {
	position: absolute;
	top: 10px;
	left: -10px;
	width: 10px;
	height: 80px;
	background-color: #E4EC01;	z-index: 0;
}

  .ribbon-back-right {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 0px;
	height: 80px;
		z-index: 0;
}


.cp_card {
	width: 380px;
	height: 414px;
	position: relative;
	background: #ffffff;
	overflow: visible;
	margin: 2em auto;
	padding: 0.5em;
	border: 2px solid #52D681;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.cp_ribbon10 {
	position: absolute;
	top: -6px;
	left: -6px;
	padding: 5px 10px;
	padding-right: 40px;
	letter-spacing: 0.1px;
	color: #ffffff;
	background: linear-gradient(-45deg,transparent,transparent 25%,#07f25b 0%,#07f25b);
}
.cp_ribbon10::before {
	position: absolute;
	z-index: 10;
	top: 100%;
	left: 0;
	content: ' ';
	border: 3px solid transparent;
	border-top: 3px solid #01732a;
	border-right: 3px solid #01732a;
}


.cp_card2 {
	width: 380px;
	height: 380px;
	position: relative;
	background: #ffffff;
	overflow: visible;
	margin: 2em auto;
	padding: 0.5em;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.cp_ribbon05 {
	position: absolute;
	top: -6px;
	right: -6px;
	overflow: hidden;
	width: 108px;
	height: 108px;
}
.cp_ribbon05 .cp_ribbon {
	font-size: 1em;
	line-height: 1.2em;
	position: relative;
	top: 26px;
	left: -4px;
	width: 150px;
	padding: 7px 0;
	-webkit-transform: rotate(45deg);
	        transform: rotate(45deg);
	text-align: center;
	letter-spacing: 0.5px;
	color: #333333;
	color: #ffffff;
	border: 1px dashed #ffffff;
	box-shadow: 0px 0px 0px 3px #52D681;
	background-color: #52D681;
}
.cp_ribbon05 .cp_ribbon:before, .cp_ribbon05 .cp_ribbon:after {
	position: absolute;
	bottom: -8px;
	content: '';
	border-width: 4px 4px 0 4px;
	border-style: solid;
	border-color: #369156 transparent transparent transparent;
}
.cp_ribbon05 .cp_ribbon:before {
	left: -4px;
}
.cp_ribbon05 .cp_ribbon:after {
	right: 3px;
}


.type-shine {
  font-size: 40px;
  position: relative;
  overflow: hidden;
}
.type-shine:before {
  -webkit-animation: shine .8s  infinite;　

  animation-direction:alternate;
  content:"";
  position: absolute;
  top: 0;
  left: -250px;
  width: 100%;
  height: 100%;
  transform: rotate3d(0,0,1,-45deg) translate3d(0,-120%,0);
}
@-webkit-keyframes shine {
  0% {transform: rotate3d(0,0,1,-45deg) translate3d(0,-120%,0);background: rgba(255,255,255,0.5);}
  100% {transform: rotate3d(0,0,1,-25deg) translate3d(0,150%,0);background: rgba(255,255,255,0.5);}
}


p2{
  text-align: center;
  margin-top: 50px;
  animation-name: fade;
  animation-duration: 1s;
  animation-iteration-count: 5;
}

@keyframes fade{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
Copy

/* ----------パターン2：下からふわっと---------- */
/* 画面外 */
.fade-block2 {
  transform: translateY(100px);
  transition: all .5s ease-in;
}
/* 画面に入った時の動き */
.fade-block2.blockIn {
  transform: translateY(0);
}


img {
    max-width: 100%;
}
.photo-list {
    padding: 150px 0;
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}
.photo-list ul li {
    width: 49%;
    margin-right: 2%;
    margin-bottom: 2%;
}
@media screen and (max-width: 768px) {
    .photo-list ul li:nth-child(2n) {
        margin-right: 0;
    }
}
@media screen and (min-width: 769px) {
    .photo-list ul li {
        width: 32%;
        margin-right: 2%;
        margin-bottom: 2%;
    }
    .photo-list ul li:nth-child(3n) {
        margin-right: 0;
    }
}
/* アニメーション設定 */
.scr-target {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
}
.scr-target.is-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: 1s;
}


/* ------------- スクロールフェードインDown用 ------------- */
.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
/* ------------- スクロールフェードインDown用 END ------------- */


.class1 {
  text-align: center;
}


.anim-box.kiran {
  opacity: 1;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.anim-box.kiran::before {
  background-color: #fff;
  content: "";
  display: block;
  position: absolute;
  top: -100px;
  left: 0;
  width: 30px;
  height: 100%;
  opacity: 0;
  transition: cubic-bezier(0.32, 0, 0.67, 0);
}
.anim-box.kiran:hover::before {
  animation: kiran 0.5s linear 1;
}

@keyframes kiran {
  0% {
    transform: scale(2) rotate(45deg);
    opacity: 0;
  }
  20% {
    transform: scale(20) rotate(45deg);
    opacity: 0.6;
  }
  40% {
    transform: scale(30) rotate(45deg);
    opacity: 0.4;
  }
  80% {
    transform: scale(45) rotate(45deg);
    opacity: 0.2;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}


.anim-box.zoomin.is-animated {
 animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes zoomIn {
 0% {
   transform: scale(0.8);
   opacity: 0;
 }
 100% {
   opacity: 1;
   transform: scale(1);
 }
}



/* fh5co- */

#fh5co-header {
  position: relative;
  margin-bottom: 0;
  z-index: 9999999; }

.stuck {
  position: fixed !important;
  top: 0 !important;
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
  -ms-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
  -o-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05); }

.header-top {
  padding: 10px 0;
  background: #44C662; }
.header-top .fh5co-link a {
  margin-left: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7); }
.header-top .fh5co-link a:first-child {
  margin-left: 0; }
.header-top .fh5co-link a:hover {
  color: white !important; }
@media screen and (max-width: 768px) {
  .header-top .fh5co-link {
    text-align: center; } }
.header-top .fh5co-social a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-right: 15px;
  position: relative;
  -webkit-transition: 0.5s, ease-in-out;
  -o-transition: 0.5s, ease-in-out;
  transition: 0.5s, ease-in-out; }
.header-top .fh5co-social a:last-child {
  margin-right: 0; }
.header-top .fh5co-social a:hover, .header-top .fh5co-social a:focus, .header-top .fh5co-social a:active {
  text-decoration: none;
  color: white !important; }
.header-top .fh5co-social a:hover i, .header-top .fh5co-social a:focus i, .header-top .fh5co-social a:active i {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2); }
@media screen and (max-width: 768px) {
  .header-top .fh5co-social {
    text-align: center !important; } }

#fh5co-hero {
  min-height: 700px;
  background: #fff url(../images/loader.gif) no-repeat center center;
  position: relative; }
#fh5co-hero .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.4); }
#fh5co-hero .btn {
  font-size: 24px; }
#fh5co-hero .btn.btn-primary {
  padding: 14px 30px !important; }
#fh5co-hero .flexslider {
  border: none;
  z-index: 1;
  margin-bottom: 0; }
#fh5co-hero .flexslider .slides {
  position: relative;
  overflow: hidden; }
#fh5co-hero .flexslider .slides li {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  min-height: 700px;
  position: relative; }
#fh5co-hero .flexslider .flex-control-nav {
  bottom: 40px;
  z-index: 1000; }
@media screen and (max-width: 768px) {
  #fh5co-hero .flexslider .flex-control-nav {
    bottom: 10px; } }
#fh5co-hero .flexslider .flex-control-nav li a {
  background: rgba(255, 255, 255, 0.4);
  box-shadow: none;
  width: 12px;
  height: 12px;
  cursor: pointer; }
#fh5co-hero .flexslider .flex-control-nav li a.flex-active {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.9); }
#fh5co-hero .flexslider .flex-direction-nav {
  display: none; }
#fh5co-hero .flexslider .slider-text {
  display: table;
  opacity: 0;
  min-height: 400px;
  z-index: 9; }
#fh5co-hero .flexslider .slider-text > .slider-text-inner {
  display: table-cell;
  vertical-align: middle;
  min-height: 700px; }
#fh5co-hero .flexslider .slider-text > .slider-text-inner h1, #fh5co-hero .flexslider .slider-text > .slider-text-inner h2 {
  margin: 0;
  padding: 0;
  color: white; }
#fh5co-hero .flexslider .slider-text > .slider-text-inner h1 {
  margin-bottom: 20px;
  font-size: 40px;
  line-height: 1.3;
  font-weight: 300; }
@media screen and (max-width: 768px) {
  #fh5co-hero .flexslider .slider-text > .slider-text-inner h1 {
    font-size: 30px; } }
#fh5co-hero .flexslider .slider-text > .slider-text-inner h2 {
  font-size: 40px;
  line-height: 1.5;
  margin-bottom: 30px;
  font-weight: 300; }
#fh5co-hero .flexslider .slider-text > .slider-text-inner .status {
  padding: 5px 12px;
  display: inline-block;
  margin-bottom: 20px;
  background: #44C662;
  color: #fff;
  font-weight: 400; }
#fh5co-hero .flexslider .slider-text > .slider-text-inner .price {
  color: #44C662; }
#fh5co-hero .flexslider .slider-text > .slider-text-inner p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9); }
#fh5co-hero .flexslider .slider-text > .slider-text-inner .heading-section {
  font-size: 50px; }
#fh5co-hero .flexslider .slider-text > .slider-text-inner .btn {
  padding: 15px 30px;
  color: #fff;
  border: none !important;
  font-size: 18px; }
#fh5co-hero .flexslider .slider-text > .slider-text-inner .btn:hover {
  background: #44C662 !important;
  -webkit-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75) !important;
  -moz-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75) !important;
  box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75) !important; }
#fh5co-hero .flexslider .slider-text > .slider-text-inner .form-inline .form-group {
  width: 100% !important;
  margin-bottom: 10px; }
#fh5co-hero .flexslider .slider-text > .slider-text-inner .form-inline .form-group .form-control {
  width: 100%;
  background: #fff;
  border: none; }
#fh5co-hero .flexslider .slider-text > .slider-text-inner .fh5co-lead {
  font-size: 20px;
  color: #fff; }
#fh5co-hero .flexslider .slider-text > .slider-text-inner .fh5co-lead .icon-heart {
  color: #d9534f; }
#fh5co-hero .flexslider .slider-text > .slider-text-inner .desc {
  width: 100%;
  padding: 2.5em;
  background: rgba(0, 0, 0, 0.7);
  margin-left: 1em; }
@media screen and (max-width: 768px) {
  #fh5co-hero .flexslider .slider-text > .slider-text-inner .desc {
    margin-left: 0; } }
#fh5co-hero .flexslider .slider-text > .slider-text-inner .desc .details {
  background: none;
  font-weight: 700; }
#fh5co-hero .flexslider .slider-text > .slider-text-inner .desc .details span {
  display: block; }
#fh5co-hero .flexslider .slider-text > .slider-text-inner .heading-title {
  font-size: 60px; }

/* Superfish Override Menu */
.sf-menu {
  margin: 7px 0 0 0 !important; }

.sf-menu {
  float: right; }

.sf-menu ul {
  box-shadow: none;
  border: transparent;
  min-width: 12em;
  *width: 12em; }

.sf-menu a {
  color: rgba(0, 0, 0, 0.5);
  padding: 0.75em 1em !important;
  font-weight: normal;
  border-left: none;
  border-top: none;
  border-top: none;
  text-decoration: none;
  zoom: 1;
  font-size: 16px;
  border-bottom: none !important;
  font-weight: bold; }
.sf-menu a:hover, .sf-menu a:focus {
  color: #44C662 !important; }

.sf-menu li.active a:hover, .sf-menu li.active a:focus {
  color: #44C662; }

.sf-menu li, .sf-menu ul li, .sf-menu ul ul li, .sf-menu li:hover, .sf-menu li.sfHover {
  background: transparent; }

.sf-menu ul li a, .sf-menu ul ul li a {
  text-transform: none;
  padding: 0.2em 1em !important;
  letter-spacing: 1px;
  font-size: 14px !important; }

.sf-menu li:hover a, .sf-menu li.sfHover a, .sf-menu ul li:hover a, .sf-menu ul li.sfHover a, .sf-menu li.active a {
  color: #44C662; }

.sf-menu ul li:hover, .sf-menu ul li.sfHover {
  background: transparent; }

.sf-menu ul li {
  background: transparent; }

.sf-arrows .sf-with-ul {
  padding-right: 2.5em;
  *padding-right: 1em; }

.sf-arrows .sf-with-ul:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 1em;
  margin-top: -3px;
  height: 0;
  width: 0;
  border: 5px solid transparent;
  border-top-color: #ccc; }

.sf-arrows > li > .sf-with-ul:focus:after, .sf-arrows > li:hover > .sf-with-ul:after, .sf-arrows > .sfHover > .sf-with-ul:after {
  border-top-color: #ccc; }

.sf-arrows ul .sf-with-ul:after {
  margin-top: -5px;
  margin-right: -3px;
  border-color: transparent;
  border-left-color: #ccc; }

.sf-arrows ul li > .sf-with-ul:focus:after, .sf-arrows ul li:hover > .sf-with-ul:after, .sf-arrows ul .sfHover > .sf-with-ul:after {
  border-left-color: #ccc; }

#fh5co-header-section {
  padding: 0;
  position: relative;
  left: 0;
  width: 100%;
  z-index: 1022;
  background: #fff; }

.nav-header {
  position: relative;
  float: left;
  width: 100%; }

#fh5co-logo {
  position: relative;
  z-index: 2;
  font-size: 28px;
  text-transform: uppercase;
  margin-top: 35px;
  font-weight: 700;
  float: left;
  padding-left: 40px; }
#fh5co-logo i {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 16px;
  color: #44C662;
  background: rgba(0, 0, 0, 0.06);
  padding: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%; }
#fh5co-logo a {
  color: #44C662; }
#fh5co-logo a:hover, #fh5co-logo a:focus {
  color: #44C662 !important; }
#fh5co-logo span {
  font-weight: 300; }

#fh5co-menu-wrap {
  position: relative;
  z-index: 2;
  display: block;
  float: right;
  margin-top: 15px; }
#fh5co-menu-wrap .sf-menu a {
  padding: 1em .75em; }

#fh5co-primary-menu > li > ul li.active > a {
  color: #44C662 !important; }
#fh5co-primary-menu > li > .sf-with-ul:after {
  border: none !important;
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  float: right;
  margin-right: -0px;
  top: 50%;
  font-size: 12px;
  margin-top: -7px;
  content: "\e922";
  color: rgba(0, 0, 0, 0.5); }
#fh5co-primary-menu > li > ul li {
  position: relative; }
#fh5co-primary-menu > li > ul li > .sf-with-ul:after {
  border: none !important;
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  float: right;
  margin-right: 10px;
  top: 20px;
  font-size: 12px;
  content: "\e924";
  color: rgba(0, 0, 0, 0.5); }

#fh5co-primary-menu .fh5co-sub-menu {
  padding: 10px 7px 10px;
  background: #fff;
  left: 0;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  -ms-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  -o-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); }
#fh5co-primary-menu .fh5co-sub-menu > li > .fh5co-sub-menu {
  left: 100%; }

#fh5co-primary-menu .fh5co-sub-menu:before {
  position: absolute;
  top: -9px;
  left: 20px;
  width: 0;
  height: 0;
  content: ''; }

#fh5co-primary-menu .fh5co-sub-menu:after {
  position: absolute;
  top: -8px;
  left: 21px;
  width: 0;
  height: 0;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #fff;
  border-bottom: 8px solid white;
  border-left: 8px solid transparent;
  content: ''; }

#fh5co-primary-menu .fh5co-sub-menu .fh5co-sub-menu:before {
  top: 6px;
  left: 100%; }

#fh5co-primary-menu .fh5co-sub-menu .fh5co-sub-menu:after {
  top: 7px;
  right: 100%;
  border: none !important; }

.site-header.has-image #primary-menu .sub-menu {
  border-color: #ebebeb;
  -webkit-box-shadow: 0 5px 15px 4px rgba(0, 0, 0, 0.09);
  -moz-box-shadow: 0 5px 15px 4px rgba(0, 0, 0, 0.09);
  -ms-box-shadow: 0 5px 15px 4px rgba(0, 0, 0, 0.09);
  -o-box-shadow: 0 5px 15px 4px rgba(0, 0, 0, 0.09);
  box-shadow: 0 5px 15px 4px rgba(0, 0, 0, 0.09); }
.site-header.has-image #primary-menu .sub-menu:before {
  display: none; }

#fh5co-primary-menu .fh5co-sub-menu a {
  letter-spacing: 0;
  padding: 0 15px;
  font-size: 18px;
  line-height: 34px;
  color: #575757 !important;
  text-transform: none;
  background: none; }
#fh5co-primary-menu .fh5co-sub-menu a:hover {
  color: #44C662 !important; }

#fh5co-search-map {
  width: 100%;
  float: left;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; }
#fh5co-search-map .search-property {
  width: 33.5%;
  float: right;
  background: #44C662; }
@media screen and (max-width: 768px) {
  #fh5co-search-map .search-property {
    width: 100%;
    float: left; } }
#fh5co-search-map .s-holder {
  width: 90%;
  margin: 0 auto;
  padding: 2em 0; }
#fh5co-search-map .s-holder h2 {
  color: #fff; }
#fh5co-search-map .s-holder .input-field, #fh5co-search-map .s-holder section {
  width: 100%;
  float: left;
  margin-bottom: 20px; }
#fh5co-search-map .s-holder label {
  width: 40%;
  float: left;
  color: #fff;
  margin-top: 10px; }
@media screen and (max-width: 768px) {
  #fh5co-search-map .s-holder label {
    font-size: 13px;
    margin-top: 13px; } }
#fh5co-search-map .s-holder input[type="text"] {
  padding: 24px 10px !important;
  font-weight: 700;
  font-size: 12px; }
#fh5co-search-map .s-holder input[type="text"]::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #44C662 !important; }
#fh5co-search-map .s-holder input[type="text"]::-moz-placeholder {
  /* Firefox 19+ */
  color: #44C662 !important; }
#fh5co-search-map .s-holder input[type="text"]:-ms-input-placeholder {
  /* IE 10+ */
  color: #44C662 !important; }
#fh5co-search-map .s-holder input[type="text"]:-moz-placeholder {
  /* Firefox 18- */
  color: #44C662 !important; }
#fh5co-search-map .s-holder input[type="text"], #fh5co-search-map .s-holder .cs-select {
  width: 60% !important;
  float: right;
  background: #fff !important;
  border: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  border-radius: 0; }
#fh5co-search-map .s-holder .wide {
  width: 60% !important;
  float: right; }
#fh5co-search-map .s-holder .wide .cs-select-half {
  width: 48% !important;
  float: left; }
#fh5co-search-map .s-holder .wide .cs-select-half:last-child {
  float: right; }
#fh5co-search-map .s-holder .btn {
  width: 60%;
  float: right;
  background: #000;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  border-radius: 2px; }
#fh5co-search-map .map {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  width: 66.5%;
  float: right; }
  div.cs-select span {
    padding: 10px 10px; }

  .cs-skin-border {
    font-size: 16px;
    color: #fff; }
  @media screen and (max-width: 829px) {
    .cs-skin-border {
      max-width: 829px !important; } }
  @media screen and (max-width: 30em) {
    .cs-skin-border {
      font-size: 16px; } }
  .cs-skin-border span {
    font-size: 13px; }
  .cs-skin-border span:hover {
    background: rgba(0, 0, 0, 0.05) !important; }
  .cs-skin-border > span {
    border: transparent;
    background: white;
    color: #44C662;
    padding: 14px 10px !important; }
  .cs-skin-border > span::after {
    font-size: 14px !important;
    content: '\e94d' !important;
    font-family: "icomoon"; }
  .cs-skin-border .cs-selected > span::after {
    font-size: 14px !important; }

  .cs-skin-border.cs-active > span {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #44C662; }

  .cs-select .cs-options {
    -webkit-box-shadow: 0px 10px 20px -12px rgba(0, 0, 0, 0.18);
    -moz-box-shadow: 0px 10px 20px -12px rgba(0, 0, 0, 0.18);
    -ms-box-shadow: 0px 10px 20px -12px rgba(0, 0, 0, 0.18);
    -o-box-shadow: 0px 10px 20px -12px rgba(0, 0, 0, 0.18);
    box-shadow: 0px 10px 20px -12px rgba(0, 0, 0, 0.18); }

  #fh5co-blog-section, #fh5co-features, #fh5co-popular-properties, #fh5co-properties, #fh5co-testimonial, #fh5co-about, #fh5co-contact, .fh5co-content-section {
    clear: both;
    padding: 7em 0; }
  @media screen and (max-width: 100vw;) {
    #fh5co-blog-section, #fh5co-features, #fh5co-popular-properties, #fh5co-properties, #fh5co-testimonial, #fh5co-about, #fh5co-contact, .fh5co-content-section {
      padding: 4em 0; } }


  .fh5co-section-gray {
    background: rgba(0, 0, 0, 0.04); }

  .heading-section {
    padding-bottom: 1em;
    margin-bottom: 4em; }
  .heading-section h3 {
    font-size: 40px;
    font-weight: 400;
    position: relative;
    color: #44C662; }
  .heading-section p {
    font-size: 20px; }

  .heading-title {
    font-size: 40px;
    margin-bottom: 1.5em; }

  .fh5co-property {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    height: 400px;
    width: 100%;
    float: left;
    margin-bottom: 2em;
    -webkit-box-shadow: inset 0px -96px 115px -23px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: inset 0px -96px 115px -23px rgba(0, 0, 0, 0.75);
    box-shadow: inset 0px -96px 115px -23px rgba(0, 0, 0, 0.75);
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s; }
  .fh5co-property:hover, .fh5co-property:focus {
    -webkit-box-shadow: inset 0px -120px 115px -23px rgba(0, 0, 0, 0.85);
    -moz-box-shadow: inset 0px -120px 115px -23px rgba(0, 0, 0, 0.85);
    box-shadow: inset 0px -120px 115px -23px rgba(0, 0, 0, 0.85); }
  .fh5co-property .status {
    position: absolute;
    top: 12px;
    left: -7px;
    color: #fff;
    background: #44C662;
    padding: 10px 12px;
    font-weight: bold;
    font-size: 12px; }
  .fh5co-property .status:before {
    position: absolute;
    top: -5px;
    left: 0;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 0px 5px 7px;
    border-color: transparent transparent #44C662 transparent; }
  .fh5co-property .prop-details {
    width: 100vw;
    margin: 0 auto;
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px; }
  .fh5co-property .prop-details h3 {
    color: #fff;
    font-size: 24px;
    line-height: 30px; }
  .fh5co-property .prop-details .price {
    font-size: 20px;
    display: inline-block;
    font-weight: 400;
    color: #fff;
    background: #44c662;
    padding: 5px 10px;
    margin-bottom: 10px; }

  .property {
    width: 100%;
    float: left;
    margin-bottom: 3em; }
  .property .property-details h3 {
    margin-bottom: 10px; }
  .property .property-details .price {
    font-size: 24px;
    display: inline-block;
    font-weight: 400;
    margin-bottom: 10px;
    color: #44C662; }
  .property .property-details .address {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    display: block;
    font-size: 13px;
    padding-top: 10px; }
  .property .property-details .address i {
    margin-right: 10px; }
  .property .list-details {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 10px;
    background: rgba(0, 0, 0, 0.7); }
  .property .list-details li {
    font-size: 12px;
    font-weight: 700;
    list-style: none;
    display: inline-block;
    color: rgba(255, 255, 255, 0.9);
    margin-left: 10px; }

  #fh5co-about .fh5co-staff {
    margin-bottom: 3em; }
  #fh5co-about .fh5co-staff img {
    width: 230px;
    height: 230px;
    margin: 0 auto;
    margin-bottom: 20px;
    background: #fff;
    -webkit-box-shadow: 0px 10px 30px -13px rgba(0, 0, 0, 0.21);
    -moz-box-shadow: 0px 10px 30px -13px rgba(0, 0, 0, 0.21);
    box-shadow: 0px 10px 30px -13px rgba(0, 0, 0, 0.21);
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%; }
  #fh5co-about .fh5co-staff h3 {
    font-size: 24px; }
  #fh5co-about .fh5co-staff p {
    margin-bottom: 30px; }
  #fh5co-about .fh5co-staff:hover img {
    background: rgba(68, 198, 98, 0.2); }
  #fh5co-about .fh5co-staff .list-prop {
    display: block;
    margin-bottom: 20px;
    color: #44C662;
    font-weight: 400; }

  .fh5co-agent {
    background: #44C662; }
  .fh5co-agent h3, .fh5co-agent p {
    color: #fff !important; }
  .fh5co-agent .fh5co-staff {
    margin-bottom: 30px; }
  .fh5co-agent .fh5co-staff img {
    margin-bottom: 20px;
    background: #fff !important;
    -webkit-box-shadow: 0px 10px 30px -13px rgba(0, 0, 0, 0.21);
    -moz-box-shadow: 0px 10px 30px -13px rgba(0, 0, 0, 0.21);
    box-shadow: 0px 10px 30px -13px rgba(0, 0, 0, 0.21);
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s; }
  .fh5co-agent .fh5co-staff h3 {
    font-size: 24px;
    color: #fff !important; }
  .fh5co-agent .fh5co-staff p {
    margin-bottom: 30px;
    color: #fff !important; }
  .fh5co-agent .fh5co-staff p a {
    color: #fff !important; }
  .fh5co-agent .fh5co-staff:hover img {
    background: rgba(68, 198, 98, 0.2); }

  .feature-left {
    float: left;
    width: 100%;
    margin-bottom: 40px;
    position: relative; }
  .feature-left .icon {
    float: left;
    text-align: center;
    width: 15%; }
  @media screen and (max-width: 992px) {
    .feature-left .icon {
      width: 10%; } }
  @media screen and (max-width: 768px) {
    .feature-left .icon {
      width: 15%; } }
  .feature-left .icon i {
    display: table-cell;
    vertical-align: middle;
    font-size: 40px;
    color: #44C662; }
  .feature-left .feature-copy {
    float: right;
    width: 80%; }
  @media screen and (max-width: 992px) {
    .feature-left .feature-copy {
      width: 90%; } }
  @media screen and (max-width: 768px) {
    .feature-left .feature-copy {
      width: 85%; } }
  @media screen and (max-width: 480px) {
    .feature-left .feature-copy {
      width: 80%; } }
  .feature-left .feature-copy h3 {
    font-size: 18px;
    color: #1a1a1a;
    margin-bottom: 10px; }
  .feature-left .feature-copy p {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 10px; }

  #fh5co-testimonial {
    position: relative;
    background: #44C662; }
  #fh5co-testimonial .fh5co-heading {
    margin-bottom: 4em; }
  #fh5co-testimonial .fh5co-heading h2 {
    color: white;
    font-size: 40px; }
  #fh5co-testimonial .box-testimony {
    margin-bottom: 2em;
    float: left; }
  #fh5co-testimonial .box-testimony a {
    color: rgba(255, 255, 255, 0.5); }
  #fh5co-testimonial .box-testimony a:hover, #fh5co-testimonial .box-testimony a:focus, #fh5co-testimonial .box-testimony a:active {
    color: white;
    text-decoration: none; }
  #fh5co-testimonial .box-testimony blockquote {
    padding-left: 0;
    border-left: none;
    padding: 40px;
    background: #fff;
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px; }
  #fh5co-testimonial .box-testimony blockquote:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 40px;
    border-top: 15px solid black;
    border-top-color: #fff;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent; }
  #fh5co-testimonial .box-testimony blockquote .quote {
    position: absolute;
    top: 0;
    left: 10px;
    text-align: center;
    font-size: 30px;
    line-height: 0;
    display: table;
    color: #fff;
    width: 56px;
    height: 56px;
    margin-top: -30px;
    background: #44C662;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%; }
  #fh5co-testimonial .box-testimony blockquote .quote > span {
    display: table-cell;
    vertical-align: middle; }
  #fh5co-testimonial .box-testimony blockquote p {
    letter-spacing: 1px; }
  #fh5co-testimonial .box-testimony .author {
    line-height: 20px;
    color: white;
    font-size: 20px;
    margin-left: 20px; }
  #fh5co-testimonial .box-testimony .author .subtext {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px; }

  #fh5co-features {
    padding: 7em 0; }
  #fh5co-features .feature-left {
    margin-bottom: 40px; }
  @media screen and (max-width: 992px) {
    #fh5co-features .feature-left {
      margin-bottom: 30px; } }
  #fh5co-features .feature-left .icon i {
    color: #d9d9d9 !important; }
  #fh5co-features .feature-left .icon {
    float: left;
    text-align: center;
    width: 15%; }
  @media screen and (max-width: 992px) {
    #fh5co-features .feature-left .icon {
      width: 10%; } }
  @media screen and (max-width: 768px) {
    #fh5co-features .feature-left .icon {
      width: 15%; } }
  #fh5co-features .feature-left .feature-copy {
    float: right;
    width: 80%; }
  @media screen and (max-width: 992px) {
    #fh5co-features .feature-left .feature-copy {
      width: 90%; } }
  @media screen and (max-width: 768px) {
    #fh5co-features .feature-left .feature-copy {
      width: 85%; } }
  @media screen and (max-width: 480px) {
    #fh5co-features .feature-left .feature-copy {
      width: 80%; } }
  #fh5co-features .feature-left h3 {
    font-size: 16px;
    font-weight: 700; }
  #fh5co-features .feature-left p {
    font-size: 15px; }
  #fh5co-features .feature-left p:last-child {
    margin-bottom: 0; }

  #fh5co-contact {
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; }
  #fh5co-contact .contact-info {
    margin: 0;
    padding: 0; }
  #fh5co-contact .contact-info li {
    list-style: none;
    margin: 0 0 20px 0;
    position: relative;
    padding-left: 40px; }
  #fh5co-contact .contact-info li i {
    position: absolute;
    top: .3em;
    left: 0;
    font-size: 22px;
    color: rgba(0, 0, 0, 0.3); }
  #fh5co-contact .contact-info li a {
    font-weight: 400 !important;
    color: rgba(0, 0, 0, 0.3); }
  #fh5co-contact .form-control {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    border: none;
    border: 2px solid rgba(0, 0, 0, 0.1);
    font-size: 16px;
    font-weight: 400;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    border-radius: 0px; }
  #fh5co-contact .form-control:focus, #fh5co-contact .form-control:active {
    border-bottom: 1px solid rgba(0, 0, 0, 0.5); }
  #fh5co-contact input[type="text"] {
    height: 50px; }
  #fh5co-contact .form-group {
    margin-bottom: 30px; }

  .fh5co-contact {
    padding: 0 !important; }

  .half-contact, .half-bg {
    width: 50%; }

  .half-contact {
    padding: 7em; }
  @media screen and (max-width: 768px) {
    .half-contact {
      width: 100%;
      padding: 5em 0; } }

  .half-bg {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat; }

  .fh5co-testimonial, .fh5co-team {
    position: relative;
    background: #fff;
    padding: 30px;
    border-radius: 5px;
    margin-bottom: 30px; }
  @media screen and (max-width: 768px) {
    .fh5co-testimonial, .fh5co-team {
      border-right: 0;
      margin-bottom: 80px; } }
  .fh5co-testimonial h2, .fh5co-team h2 {
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 50px; }
  .fh5co-testimonial figure, .fh5co-team figure {
    position: relative;
    top: 0px;
    background-size: cover;
    margin-bottom: 20px; }
  .fh5co-testimonial figure img, .fh5co-team figure img {
    width: 130px;
    height: 130px;
    border: 10px solid #fff;
    background-size: cover;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%; }
  .fh5co-testimonial > div, .fh5co-team > div {
    padding: 30px 30px 0 30px; }
  .fh5co-testimonial > div h3, .fh5co-team > div h3 {
    margin-bottom: 0;
    font-size: 20px;
    color: #44C662; }
  .fh5co-testimonial > div .position, .fh5co-team > div .position {
    color: #d9d9d9;
    margin-bottom: 30px; }
  .fh5co-testimonial > div, .fh5co-testimonial blockquote, .fh5co-team > div, .fh5co-team blockquote {
    border: none;
    padding: 0;
    margin-bottom: 20px; }
  .fh5co-testimonial > div p, .fh5co-testimonial blockquote p, .fh5co-team > div p, .fh5co-team blockquote p {
    font-size: 16px;
    line-height: 1.5;
    color: #555555; }
  .fh5co-testimonial span, .fh5co-team span {
    font-style: italic;
    color: #b3b3b3; }

  .fh5co-testimonial p .text-mute {
    color: #ccc !important; }

  .fh5co-blog {
    margin-bottom: 60px; }
  .fh5co-blog a img {
    width: 100%; }
  @media screen and (max-width: 768px) {
    .fh5co-blog {
      width: 100%; } }
  .fh5co-blog .blog-text {
    margin-bottom: 30px;
    position: relative;
    background: #fff;
    width: 100%;
    padding: 30px;
    float: right;
    -webkit-box-shadow: 0px 10px 20px -12px rgba(0, 0, 0, 0.18);
    -moz-box-shadow: 0px 10px 20px -12px rgba(0, 0, 0, 0.18);
    box-shadow: 0px 10px 20px -12px rgba(0, 0, 0, 0.18); }
  .fh5co-blog .blog-text span {
    display: inline-block;
    margin-bottom: 20px; }
  .fh5co-blog .blog-text span.posted_by {
    color: rgba(0, 0, 0, 0.3); }
  .fh5co-blog .blog-text span.comment {
    float: right; }
  .fh5co-blog .blog-text span.comment a {
    color: rgba(0, 0, 0, 0.3); }
  .fh5co-blog .blog-text span.comment a i {
    color: #44C662;
    padding-left: 7px; }
  .fh5co-blog .blog-text h3 {
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: 400;
    line-height: 1.5; }
  .fh5co-blog .blog-text h3 a {
    color: rgba(0, 0, 0, 0.6); }

  #map {
    width: 100%;
    height: 500px;
    position: relative; }
  @media screen and (max-width: 768px) {
    #map {
      height: 200px; } }

  .fh5co-social-icons > a {
    padding: 4px 10px;
    color: #44C662; }
  .fh5co-social-icons > a i {
    font-size: 20px; }
  .fh5co-social-icons > a:hover, .fh5co-social-icons > a:focus, .fh5co-social-icons > a:active {
    text-decoration: none;
    color: #5a5a5a; }
    #footer #fh5co-header-subscribe #email {
      padding-right: 3em;
      border: none;
      background: rgba(0, 0, 0, 0.2); }
    #footer #fh5co-header-subscribe button {
      position: absolute;
      top: 0;
      right: 10px;
      border-top-left-radius: 0px !important;
      border-bottom-left-radius: 0px !important;
      background: #44C662;
      border: none; }
    #footer #fh5co-header-subscribe button i {
      color: #fff;
      font-size: 19px; }
      .js .animate-box {
        opacity: 0; }

      #fh5co-wrapper {
        overflow-x: hidden;
        position: relative; }

      .fh5co-offcanvas {
        overflow: hidden; }
      .fh5co-offcanvas #fh5co-wrapper {
        overflow: hidden !important; }

      #fh5co-page {
        position: relative;
        -webkit-transition: 0.5s;
        -o-transition: 0.5s;
        transition: 0.5s; }
      .fh5co-offcanvas #fh5co-page {
        -moz-transform: translateX(-240px);
        -webkit-transform: translateX(-240px);
        -ms-transform: translateX(-240px);
        -o-transform: translateX(-240px);
        transform: translateX(-240px); }

      @media screen and (max-width: 768px) {
        #fh5co-menu-wrap {
          display: none; } }

      #offcanvas-menu {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 99;
        background: #222;
        right: -240px;
        width: 240px;
        padding: 20px;
        overflow-y: scroll !important;
        display: none; }
      @media screen and (max-width: 768px) {
        #offcanvas-menu {
          display: block; } }
      #offcanvas-menu ul {
        padding: 0;
        margin: 0; }
      #offcanvas-menu ul li {
        padding: 0;
        margin: 0 0 10px 0;
        list-style: none; }
      #offcanvas-menu ul li a {
        font-size: 18px;
        color: rgba(255, 255, 255, 0.4); }
      #offcanvas-menu ul li a:hover {
        color: #44C662; }
      #offcanvas-menu ul li > .fh5co-sub-menu {
        margin-top: 9px;
        padding-left: 20px; }
      #offcanvas-menu ul li.active > a {
        color: #44C662; }
      #offcanvas-menu ul .fh5co-sub-menu {
        display: block !important; }

      .fh5co-nav-toggle {
        cursor: pointer;
        text-decoration: none; }
      .fh5co-nav-toggle.active i::before, .fh5co-nav-toggle.active i::after {
        background: #fff; }
      .fh5co-nav-toggle.dark.active i::before, .fh5co-nav-toggle.dark.active i::after {
        background: #fff; }
      .fh5co-nav-toggle:hover, .fh5co-nav-toggle:focus, .fh5co-nav-toggle:active {
        outline: none;
        border-bottom: none !important; }
      .fh5co-nav-toggle i {
        position: relative;
        display: -moz-inline-stack;
        display: inline-block;
        zoom: 1;
        *display: inline;
        width: 30px;
        height: 2px;
        color: #fff;
        font: bold 14px/.4 Helvetica;
        text-transform: uppercase;
        text-indent: -55px;
        background: #fff;
        transition: all .2s ease-out; }
      .fh5co-nav-toggle i::before, .fh5co-nav-toggle i::after {
        content: '';
        width: 30px;
        height: 2px;
        background: #fff;
        position: absolute;
        left: 0;
        -webkit-transition: 0.2s;
        -o-transition: 0.2s;
        transition: 0.2s; }
      .fh5co-nav-toggle.dark i {
        position: relative;
        color: #000;
        background: #000;
        transition: all .2s ease-out; }
      .fh5co-nav-toggle.dark i::before, .fh5co-nav-toggle.dark i::after {
        background: #000;
        -webkit-transition: 0.2s;
        -o-transition: 0.2s;
        transition: 0.2s; }

      .fh5co-nav-toggle i::before {
        top: -7px; }

      .fh5co-nav-toggle i::after {
        bottom: -7px; }

      .fh5co-nav-toggle:hover i::before {
        top: -10px; }

      .fh5co-nav-toggle:hover i::after {
        bottom: -10px; }

      .fh5co-nav-toggle.active i {
        background: transparent; }

      .fh5co-nav-toggle.active i::before {
        top: 0;
        -webkit-transform: rotateZ(45deg);
        -moz-transform: rotateZ(45deg);
        -ms-transform: rotateZ(45deg);
        -o-transform: rotateZ(45deg);
        transform: rotateZ(45deg); }

      .fh5co-nav-toggle.active i::after {
        bottom: 0;
        -webkit-transform: rotateZ(-45deg);
        -moz-transform: rotateZ(-45deg);
        -ms-transform: rotateZ(-45deg);
        -o-transform: rotateZ(-45deg);
        transform: rotateZ(-45deg); }

      .fh5co-nav-toggle {
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 9999;
        display: block;
        margin: 0 auto;
        display: none;
        cursor: pointer; }
      @media screen and (max-width: 768px) {
        .fh5co-nav-toggle {
          display: block;
          top: 0px;
          margin-top: 2em; } }

      @media screen and (max-width: 480px) {
        .col-xxs-12 {
          float: none;
          width: 100%; } }

      .row-bottom-padded-lg {
        padding-bottom: 7em; }
      @media screen and (max-width: 768px) {
        .row-bottom-padded-lg {
          padding-bottom: 2em; } }

      .row-top-padded-lg {
        padding-top: 7em; }
      @media screen and (max-width: 768px) {
        .row-top-padded-lg {
          padding-top: 2em; } }

      .row-bottom-padded-md {
        padding-bottom: 4em; }
      @media screen and (max-width: 768px) {
        .row-bottom-padded-md {
          padding-bottom: 2em; } }

      .row-top-padded-md {
        padding-top: 4em; }
      @media screen and (max-width: 768px) {
        .row-top-padded-md {
          padding-top: 2em; } }

      .row-bottom-padded-sm {
        padding-bottom: 2em; }
      @media screen and (max-width: 768px) {
        .row-bottom-padded-sm {
          padding-bottom: 2em; } }

      .row-top-padded-sm {
        padding-top: 2em; }
      @media screen and (max-width: 768px) {
        .row-top-padded-sm {
          padding-top: 2em; } }

      .border-bottom {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06); }

      .lead {
        line-height: 1.8; }

      .no-js #loader {
        display: none; }

      .js #loader {
        display: block;
        position: absolute;
        left: 100px;
        top: 0; }

      .fh5co-loader {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: url(../images/hourglass.svg) center no-repeat #222222; }

      /*# sourceMappingURL=style.css.map */


      bg-fixed {
        background-size: cover; }

      .bg-grey {
        background-color: #f7f8f9; }

      .fs-40 {
        font-size: 40px; }

      section {
        position: relative; }

      .section-content {
        padding-top: 80px;
        padding-bottom: 80px; }

      .title-wrap,
      .section-title {
        text-align: center; }

      .shadow {
        box-shadow: 0 10px 30px 0 rgba(67, 80, 98, 0.24), 0 2px 4px 0 rgba(67, 80, 98, 0.1) !important; }

      #header-navbar {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 11;
        transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); }

      .navbar-brand {
        font-size: 40px;
        color: #000; }

      .navbar-nav .nav-link {
        color: #fff;
        transition: .3s ease; }

      .navbar-nav:hover li a {
        opacity: 0.5; }
        .navbar-nav:hover li a:hover {
          opacity: 1; }

      .navbar-toggler {
        font-size: 2rem;
        color: #fff; }

      .jumbotron {
        color: #fff;
        padding-top: 80px;
        padding-bottom: 80px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
        position: relative;
        border-radius: 0;
        margin-bottom: 0;
        overflow: hidden;
        min-height: 100vh; }
        @media (max-width: 767px) and (orientation: landscape) {
          .jumbotron {
            min-height: 500px; } }
        .jumbotron .container {
          position: relative;
          z-index: 1; }
        .jumbotron:before {
          position: absolute;
          display: block;
          content: "";
          opacity: 0.8;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          background: #52d681;
          /* fallback for old browsers */
          background: -webkit-linear-gradient(to right, #333399, #52d681);
          /* Chrome 10-25, Safari 5.1-6 */
          background: linear-gradient(to right, #333399, #52d681);
          /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ }
        .jumbotron h1 {
          line-height: .9;
          font-weight: bold;
          display: inline-block;
          border: 15px solid #fff;
          padding: 30px;
          font-size: 9rem;
          opacity: 0;
          animation: 1s fadeInFromTop cubic-bezier(0.785, 0.135, 0.15, 0.86) 1s forwards;
          animation-delay: .8s; }

      .jumbotron-single h1 {
        font-size: 3rem !important; }

      .overlay {
        color: #fff; }
        .overlay:before {
          position: absolute;
          display: block;
          content: "";
          opacity: 0.9;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          background: #52d681;
          /* fallback for old browsers */
          background: -webkit-linear-gradient(to right, #333399, #52d681);
          /* Chrome 10-25, Safari 5.1-6 */
          background: linear-gradient(to right, #333399, #52d681);
          /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ }
        .overlay.bg-white {
          color: #000; }
          .overlay.bg-white:before {
            background: #fff;
            opacity: .7; }

      .text-white {
        color: #fff; }


        /*==========================================
        =            FORM RECTANGLE ETC            =
        ==========================================*/
        .rectangle-1 {
          width: 2000px;
          height: 400px;
          background: #8E2DE2;
          background: -webkit-linear-gradient(to right, #4A00E0, #8E2DE2);
          background: linear-gradient(to right, #4A00E0, #8E2DE2);
          transform-origin: 50% 150% 0;
          position: absolute;
          left: 0;
          z-index: 0;
          transform: scale(1) rotate(-10deg); }

        .rectangle-2 {
          width: 2000px;
          height: 400px;
          background: #8E2DE2;
          background: -webkit-linear-gradient(to right, #4A00E0, #8E2DE2);
          background: linear-gradient(to right, #4A00E0, #8E2DE2);
          transform-origin: 65% 100% 0;
          position: absolute;
          right: 0;
          z-index: 0;
          transform: scale(1) rotate(50deg); }

        @keyframes fade-in-right {
          from {
            opacity: 0;
            transform: translateX(-100vw) rotate(-15deg); }
          to {
            opacity: 1;
            transform: translateX(0) rotate(-15deg); } }

        @keyframes grow1 {
          from {
            opacity: 0;
            transform: scale(2) rotate(-10deg); }
          to {
            opacity: 1;
            transform: scale(1) rotate(-10deg); } }

        @keyframes grow2 {
          from {
            opacity: 0;
            transform: scale(2) rotate(50deg); }
          to {
            opacity: 1;
            transform: scale(1) rotate(50deg); } }

        @keyframes fadeInFromTop {
          from {
            opacity: 0;
            transform: translateY(-20px); }
          to {
            opacity: 1;
            transform: translateY(0); } }

        .rectangle-1 {
          opacity: 0;
          animation: grow1 ease 1s forwards;
          box-shadow: 0px 20px 30px 0px rgba(9, 21, 54, 0.25) !important; }

        .rectangle-2 {
          opacity: 0;
          animation: grow2 ease 1s forwards;
          box-shadow: 0px 20px 30px 0px rgba(9, 21, 54, 0.25) !important; }

        .rectangle-transparent-1 {
          width: 500px;
          height: 500px;
          border: 15px solid rgba(255, 255, 255, 0.08);
          position: absolute;
          left: -5%;
          bottom: -10%;
          display: block;
          animation: floating-slow ease-in-out 12s infinite; }

        .rectangle-transparent-2 {
          width: 600px;
          height: 600px;
          border: 15px solid rgba(255, 255, 255, 0.08);
          position: absolute;
          right: -10%;
          top: 5%;
          display: block;
          animation: floating-slow ease-in-out 12s infinite; }

        .circle-1 {
          width: 50px;
          height: 50px;
          border: 2px solid #fff;
          position: absolute;
          display: block;
          border-radius: 50%;
          transform-origin: 50% 50%;
          left: 5%;
          top: 50%;
          animation: fadeInFromTop .5s linear forwards, floating ease 4s infinite; }

        .circle-2 {
          width: 70px;
          height: 70px;
          top: 20%;
          left: 83%;
          border: 2px solid #fff;
          position: absolute;
          display: block;
          border-radius: 50%;
          transform-origin: 50% 50%;
          animation: fadeInFromTop .5s linear forwards, floating ease-in-out 4s infinite; }

        .circle-3 {
          top: 80%;
          right: 25%;
          width: 40px;
          height: 40px;
          border: 2px solid #fff;
          position: absolute;
          display: block;
          border-radius: 50%;
          animation: fadeInFromTop .5s linear forwards, floating ease-in-out 4s infinite; }

        @keyframes floating {
          0% {
            transform: translate(0%, 0%) rotate(25deg); }
          25% {
            transform: translate(5%, 15%) rotate(25deg); }
          50% {
            transform: translate(10%, 5%) rotate(25deg); }
          75% {
            transform: translate(0%, 15%) rotate(25deg); }
          100% {
            transform: translate(0%, 0%) rotate(25deg); } }

        @keyframes floating-slow {
          0% {
            transform: translate(0%, 0%) rotate(25deg); }
          25% {
            transform: translate(1%, 3%) rotate(25deg); }
          50% {
            transform: translate(2%, 1%) rotate(25deg); }
          75% {
            transform: translate(0%, 3%) rotate(25deg); }
          100% {
            transform: translate(0%, 0%) rotate(25deg); } }

        .triangle {
          position: absolute; }

        .triangle-1 {
          right: 0;
          animation: fadeInFromTop .5s linear forwards, floating ease-in-out 6s infinite; }
          .triangle-1 img {
            height: 50px;
            width: 50px;
            transform: rotate(30deg); }

        .triangle-2 {
          top: 30%;
          left: 20%;
          animation: fadeInFromTop .5s linear forwards, floating ease-in-out 8s infinite; }
          .triangle-2 img {
            width: 75px;
            height: 75px;
            transform: rotate(15deg); }

        .triangle-3 {
          top: 80%;
          left: 15%;
          animation: fadeInFromTop .5s linear forwards, floating ease-in-out 10s infinite; }
          .triangle-3 img {
            width: 45px;
            height: 45px;
            transform: rotate(40deg); }

        .triangle-4 {
          top: 60%;
          right: 15%;
          animation: fadeInFromTop .5s linear forwards, floating ease-in-out 5s infinite; }
          .triangle-4 img {
            width: 45px;
            height: 45px;
            transform: rotate(-40deg); }

        /*=====  End of FORM RECTANGLE ETC  ======*/
        /*================================
        =            FEATURES            =
        ================================*/
        .feature-item {
          transition: all .2s ease-in-out 0s !important; }
          .feature-item:hover {
            transform: translateY(-13px); }

        .progress-bar {
          background-color: #52d681; }

        /*=====  End of FEATURES  ======*/
        /*=============================
        =            TESTI            =
        =============================*/
        .testi-img img {
          height: 60px;
          width: 60px !important;
          border-radius: 50%;
          display: inline-block !important; }

        .testi-details {
          text-align: left; }

        .testi-text {
          font-weight: 300;
          padding-top: 50px;
          padding-bottom: 50px; }

        .testi-icon {
          color: #52d681; }

        .testi-content {
          margin-top: 80px;
          padding-bottom: 80px; }

        .testi-item {
          margin-left: 15px;
          margin-right: 15px; }

        .owl-dot {
          position: relative;
          display: inline-block;
          margin: 0 5px;
          width: 12px;
          height: 12px;
          cursor: pointer; }
          .owl-dot span {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            outline: none;
            border-radius: 50%;
            background-color: rgba(255, 0, 204, 0.3);
            text-indent: -999em;
            cursor: pointer;
            position: absolute;
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0);
            -webkit-transition: box-shadow 0.3s ease, background-color 0.3s ease;
            transition: box-shadow 0.3s ease, background-color 0.3s ease; }
          .owl-dot.active > span {
            background-color: transparent;
            box-shadow: 0 0 0 2px #52d681; }

        .owl-dots {
          position: absolute;
          bottom: 0;
          display: block;
          text-align: center;
          left: 0;
          right: 0;
          clear: both;
          padding: 0;
          list-style: none;
          cursor: default;
          -webkit-touch-callout: none;
          -webkit-user-select: none;
          -khtml-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none; }

        .heading-section {
          position: relative; }

        /*=====  End of TESTI  ======*/
        /*=================================
        =            PORTFOLIO            =
        =================================*/
        .filter-button-group {
          margin-bottom: 15px; }
          .filter-button-group a {
            margin: 5px;
            cursor: pointer; }

        .grid-link a {
          margin: 5px;
          font-size: 20px;
          color: #000; }

        .grid-portfolio {
          overflow: hidden; }

        .gutter-sizer {
          width: 2%; }

        .grid-sizer,
        .grid-item {
          width: 32%; }

        .grid-item {
          margin-bottom: 20px;
          border-radius: 5px;
          overflow: hidden; }
          .grid-item:hover .grid-info {
            top: 50%;
            opacity: 1; }

        .grid-item-wrapper:before {
          content: '';
          display: block;
          background: rgba(255, 255, 255, 0.7);
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          transition: all .3s ease;
          opacity: 0; }

        .grid-item-wrapper:hover:before {
          opacity: 1; }

        .grid-info {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translate(-50%, -50%);
          opacity: 0;
          transition: all .3s ease; }

        .lightcase-icon-close:before {
          content: '\e870';
          font-family: "Linearicons-Free"; }

        .grid-title {
          text-align: center; }

        /*=====  End of PORTFOLIO  ======*/
        /*===============================
        =            SideNav            =
        ===============================*/
        .sidenav {
          height: 100%;
          width: 0;
          position: fixed;
          z-index: 1002;
          top: 0;
          left: 0;
          background-color: #000;
          overflow-x: hidden;
          transition: 0.5s;
          padding-top: 60px;
          color: #fff; }

        .sidenav-content {
          padding: 8px 32px;
          transform: translateY(20px);
          opacity: 0;
          transition: transform 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86); }

        .in .sidenav-content {
          transform: translateY(0);
          opacity: 1;
          transition: transform 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.5s, opacity 0.5s 0.5s; }

        .sidenav a {
          text-decoration: none;
          font-size: 25px;
          color: #818181;
          display: block;
          transition: 0.3s; }

        .sidenav a:hover {
          color: #f1f1f1; }

        .sidenav #side-nav-close,
        .sidenav #side-search-close {
          position: absolute;
          top: 0;
          right: 25px;
          font-size: 36px;
          margin-left: 50px; }

        @media screen and (max-height: 450px) {
          .sidenav {
            padding-top: 15px; }
          .sidenav a {
            font-size: 18px; } }

        #side-search .form-control {
          background-color: transparent; }

        #side-search .input-group-text {
          background: transparent;
          color: #fff; }

        /*==============================
        =            SKILLS            =
        ==============================*/
        .skill-item {
          width: 100%;
          position: relative;
          padding: 10px 0; }
          .skill-item p {
            font-size: 16px;
            text-transform: uppercase;
            display: inline-block;
            font-weight: 500; }
          .skill-item .text-muted {
            color: #939393; }

        .progress-bar, .progress {
          transition: all 4s; }

        /*=====  End of SKILLS  ======*/
        /*============================
        =            BLOG            =
        ============================*/
        .blog-item {
          transition: all 0.3s ease-in-out;
          background-color: #f7f8f9;
          border-radius: 3px;
          overflow: hidden; }
          .blog-item:hover {
            box-shadow: 0 5px 15px -5px #333;
            transform: translateY(-6px);
            -webkit-transform: translateY(-6px);
            -moz-transform: translateY(-6px);
            transform: translateY(-6px);
            box-shadow: 0 7px 10px rgba(0, 0, 0, 0.15);
            -moz-box-shadow: 0 7px 10px rgba(0, 0, 0, 0.15);
            -webkit-box-shadow: 0 7px 10px rgba(0, 0, 0, 0.15); }

        .bg-grey .blog-item {
          background-color: #fff; }

        .blog-item-wrapper {
          margin-bottom: 30px; }

        .blog-img img {
          width: 100%;
          height: 250px;
          object-fit: cover; }

        .blog-title h4 {
          color: #000; }

        .blog-text {
          padding: 15px; }

        .blog-tag {
          color: #000;
          letter-spacing: 1.1px;
          text-transform: uppercase; }

        .blog-meta {
          color: #939393; }
          .blog-meta p {
            display: inline-block;
            font-size: 14px; }
          .blog-meta a {
            color: #939393; }

        .blog-author {
          display: inline-block;
          color: #939393; }
          .blog-author p {
            font-size: 14px;
            margin-bottom: 0; }

        .blog-share-wrapper {
          float: right;
          display: inline-block;
          margin: 0 -5px; }
          .blog-share-wrapper .blog-share {
            padding: 0 5px;
            cursor: pointer; }

        .blog-content img.float-left {
          margin: 15px 15px 15px 0; }

        .blog-content .img.float-right {
          margin: 15px 0 15px 15px; }

        /*=====  End of BLOG  ======*/
        /*====================================
        =            FORM CONTROL            =
        ====================================*/
        .form-control:focus {
          border-color: #52d681;
          box-shadow: 0 0 0 0.2rem rgba(253, 101, 90, 0.25); }

        .form-control::-webkit-input-placeholder {
          opacity: .5; }

        .form-control::-moz-placeholder {
          opacity: .5; }

        .form-control:-ms-input-placeholder {
          opacity: .5; }

        .form-control::-ms-input-placeholder {
          opacity: .5; }

        .form-control::placeholder {
          opacity: .5; }

        /*=====  End of FORM CONTROL  ======*/
        /*==============================
        =            CLIENT            =
        ==============================*/
        .client-slider .owl-nav {
          display: none; }

        .client-slider .client-item {
          padding: 0 40px; }

        /*=====  End of CLIENT  ======*/
        /*==================================
        =            RESPONSIVE            =
        ==================================*/
        @media (max-width: 992px) {
          .not-on-top #header-navbar {
            position: fixed;
            top: 0;
            height: auto;
            width: 100%;
            background: #52d681;
            /* fallback for old browsers */
            background: -webkit-linear-gradient(to right, #333399, #52d681);
            /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to right, #333399, #52d681);
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            z-index: 11; }
          #header-navbar {
            padding-top: 15px !important;
            padding-bottom: 15px !important; }
          .navbar-transparent .navbar-collapse {
            background: #52d681;
            /* fallback for old browsers */
            background: -webkit-linear-gradient(to right, #333399, #52d681);
            /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to right, #333399, #52d681);
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            padding: 10px; } }

        @media (max-width: 767px) {
          .jumbotron h1 {
            font-size: 6rem; }
          .grid-item {
            width: 100%; }
          .progress {
            height: 30px;
            font-size: 16px; } }

        /*=====  End of RESPONSIVE  ======*/

/*=====  card ======*/
        .light-bg {
          background: #f7f7f7; }

        .vr-gallery p {
          font-size: 15px;
          color: #444444; }
          .vr-gallery p small {
            font-size: 11px;
            color: #03133a;
            text-transform: uppercase;
            font-weight: 700;
            letter-spacing: 2px; }
        .vr-gallery .pd-md {
          padding-left: 0 !important;
          padding-right: 0 !important;
          margin-left: 0 !important;
          margin-right: 0 !important; }
          .vr-gallery .pd-md img {
            width: 100%; }
        @media (max-width: 767px) {
          .vr-gallery .col-md-4 {
            padding-left: 0 !important;
            padding-right: 0 !important;
            margin-left: 0 !important;
            margin-right: 0 !important; } }
        .vr-gallery h3 {
          font-size: 18px;
          color: #333333;
          margin-top: 5px;
          margin-bottom: 20px; }
        .vr-gallery .cus-pd {
          padding: 50px 55px 10px 55px; }
        .vr-gallery .cus-pd2 {
          padding: 40px 45px 10px 45px; }
        .vr-gallery .card {
          height: 100%; }
          .vr-gallery .card img {
            width: 100%; }
          .vr-gallery .card .card-img-overlay h5 {
            font-size: 22px;
            color: #ffffff; }
          .vr-gallery .card .card-img-overlay.opacity {
            background-color: rgba(0, 0, 0, 0.459); }
        .vr-gallery .cus-arrow-left::before, .vr-gallery .cus-arrow-up::before {
          position: absolute;
          content: "";
          border: 20px solid transparent; }
        .vr-gallery .cus-arrow-left::before {
          border-color: transparent #f7f7f7 transparent transparent;
          left: 0;
          margin-left: -40px;
          top: 20px; }
        @media (max-width: 991px) {
          .vr-gallery .cus-arrow-left {
            padding-left: 15px;
            padding-right: 15px; }
            .vr-gallery .cus-arrow-left::before {
              border-width: 15px;
              border-color: transparent transparent #f7f7f7 transparent;
              margin-top: -50px;
              left: 50px; } }
        .vr-gallery .cus-arrow-up::before {
          border-width: 15px;
          border-color: transparent transparent #f7f7f7 transparent;
          margin-top: -70px;
          left: 20px; }
        .vr-gallery .contact-box {
          background: #f7f7f7;
          display: inline-block;
          max-width: 382px;
          padding: 40px 55px 40px 55px;
          position: absolute;
          left: 0;
          bottom: 0; }
          .vr-gallery .contact-box::after {
            position: absolute;
            content: "";
            border: 15px solid transparent;
            border-color: #03133a;
            right: 0;
            top: 0; }
        .vr-gallery a.btn {
          width: 225px; }
          .vr-gallery a.btn:hover {
            background: #f7f7f7; }
        .vr-gallery .play-1 {
          position: absolute;
          left: 50%;
          top: 40%;
          transform: translate(-50%, -40%); }
          .vr-gallery .play-1 + h5 {
            position: absolute;
            left: 0;
            right: 0;
            top: 55%;
            transform: translateY(-55%); }

        .bg-gray {
          background: #f7f7f7; }

        .yu2fvl {
          z-index: 9999;
          top: 0; }

        .yu2fvl-iframe {
          display: block;
          height: 100%;
          width: 100%;
          border: 0; }

        .yu2fvl-overlay {
          z-index: 9998;
          background: #000;
          opacity: 0.8; }

        .yu2fvl-close {
          position: absolute;
          top: -20px;
          right: -20px;
          color: #fff;
          border: 0;
          background: none;
          cursor: pointer; }

        .fh5co-recent-news h2 {
          font-size: 30px;
          color: #03133a; }
        .fh5co-recent-news hr {
          background: #03133a;
          margin: 10px auto;
          width: 60px;
          height: 3px; }
        .fh5co-recent-news .card-img-overlay {
          background-color: rgba(0, 0, 0, 0.67);
          transition: all 0.5s;
          -webkit-transition: all 0.5s;
          -ms-transition: all 0.5s;
          -moz-transition: all 0.5s; }
          .fh5co-recent-news .card-img-overlay .top-area, .fh5co-recent-news .card-img-overlay .bottom-area {
            display: none; }
          .fh5co-recent-news .card-img-overlay:hover {
            background-color: rgba(0, 0, 0, 0); }
            .fh5co-recent-news .card-img-overlay:hover .top-area, .fh5co-recent-news .card-img-overlay:hover .bottom-area {
              display: block; }
        .fh5co-recent-news .top-area {
          background-color: rgba(0, 0, 0, 0.612);
          position: absolute;
          display: block;
          padding: 15px;
          left: 0;
          right: 0;
          top: 0; }
          .fh5co-recent-news .top-area .fa-heart {
            color: #777777; }
        .fh5co-recent-news .bottom-area {
          position: absolute;
          display: block;
          padding: 15px;
          left: 0;
          right: 0;
          bottom: 0;
          font-size: 14px;
          font-family: "Roboto-Italic";
          background-color: rgba(0, 0, 0, 0.612); }
          .fh5co-recent-news .bottom-area h4 {
            font-size: 16px; }

        .stay {
          background: url(../images/stay-bg.png);
          background-repeat: repeat; }
          .stay h2 {
            font-size: 48px;
            color: #03133a; }
          .stay p {
            font-family: "Roboto-Italic";
            font-size: 15px;
            color: #131313; }
          .stay input {
            border: none;
            font-size: 16px;
            font-family: "Roboto-Regular";
            padding: 15px;
            border-radius: 0;
            height: auto; }
          .stay ::placeholder {
            font-family: "Roboto-Regular";
            color: rgba(19, 19, 19, 0.2); }
          .stay button {
            width: 139px;
            font-family: "Montserrat-Bold";
            font-size: 16px;
            padding: 15px 0;
            margin-top: -2px;
            border-radius: 0;
            background: #03133a;
            border-color: #03133a; }
            .stay button:hover {
              background: #06236a;
              border-color: #06236a; }
/*=====  End card ======*/

.container{
  width: 100vw;
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap:wrap;

}

.container .card{
  position: relative;
}

.container .card .face{
  width:300px;
  height: 200px;
  transition:.4s;

}

.container .card .face.face1{
  position: relative;
  background: #333;
  display: flex;
  justify-content: center;
  align-content:center;
  align-items: center;
  z-index: 1;
  transform: translateY(100px);
}

.container .card:hover .face.face1{
  transform: translateY(0);
  box-shadow:
    inset 0 0 60px whitesmoke,
    inset 20px 0 80px #f0f,
    inset -20px 0 80px #0ff,
    inset 20px 0 300px #f0f,
    inset -20px 0 300px #0ff,
    0 0 50px #fff,
    -10px 0 80px #f0f,
    10px 0 80px #0ff;

}


.container .card .face.face1 .content{
  opacity: .2;
  transition:  0.5s;
  text-align: center;






}

.container .card:hover .face.face1 .content{
  opacity: 1;

}

.container .card .face.face1 .content i{
  font-size: 3em;
  color: white;
  display: inline-block;

}

.container .card .face.face1 .content h3{
  font-size: 1em;
  color: white;
  text-align: center;


}

.container .card .face.face1 .content a{
   transition: .5s;
}

.container .card .face.face2{
   position: relative;
   background: whitesmoke;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 20px 50px rgba(0,0,0,.8);
  transform: translateY(-100px);
}

.container .card:hover .face.face2{
    transform: translateY(0);


}

.container .card .face.face2 .content p, a{
  font-size: 10pt;
  margin: 0 ;
  padding: 0;
  color:#333;
}

.container .card .face.face2 .content a{
  text-decoration:none;
  color: black;
  box-sizing: border-box;
  outline : 1px dashed #333;
  padding: 10px;
  margin: 15px 0 0;
  display: inline-block;
}

.container .card .face.face2 .content a:hover{
  background: #333 ;
  color: whitesmoke;
  box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
}
.img_wrap{
  border: 0px solid #ddd;
  width: ;
  height:;
  margin: 0 auto;
  overflow: hidden;
}
.img_wrap img{
  width: 100%;
  cursor: pointer;
  transition-duration: 0.3s;
}
.img_wrap:hover img{
  opacity: 0.3;
  transition-duration: 0.3s;
}


.hover {
  position: relative;
  width: 320px;
  height:224px;
  overflow: hidden;
}
.hover .hover-img {
  margin: 0;
  padding: 0;
}
.hover-img img {
  width: 100%;
  height: 100%;
}
.hover .hover-text {
  position:    absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: #fff;
  background-color:    rgba(0,0,0,0.65);
  /*透明にして表示させない*/
  opacity: 0;
  /*ホバーの動き方*/
  transition: .3s ease-in-out;
}
.hover .hover-text .text1 {
  font-size: 22px;
  padding: 0 20px 10px;
}
.hover .hover-text .text2 {
  font-size: 16px;
  padding: 0 20px;
}
/*ホバーエフェクト*/
.hover:hover .hover-text {
  /*不透明にして表示*/
  opacity: 1;
  /*padding-topで上からスライド*/
  padding-top: 10px;
}

.example10 {
  position: relative;
  }

.example10 a {/*aタグを画像の真ん中に*/
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  /*以下装飾*/
  margin:0;/*余計な隙間を除く*/
  font-size: 20px;/*文字サイズ*/
  border: solid mediumspringgreen 2px; /*線で囲う*/
  padding: 7px;/*文字と線の間の余白*/
  color: gray;/*文字色*/
  text-decoration: none;/*下線を表示させない*/
  }

.example10 a:hover{/*カーソルを当てたとき*/
  background: rgba(255, 255, 255,0.4);/*背景を半透明に*/
  }

.example10 img {
  width: 100%;
  }

  .slide-container {
    width: 700px;
    display: flex;
    align-items: center;
    height: 340px;
    overflow: hidden;
    flex-direction: column;
  }
  .slide-wrapper {
    display: flex;
    flex-direction: column;
    animation: slide-flow 20s infinite linear 1s both;
  }
  .slide{
    width: 300px;
    object-fit: cover;
    border: 1px solid #ddd;
  }
  @keyframes slide-flow {
       0% {transform: translateY(0);}
   100% {transform: translateY(-100%);}
  }



  .hoge {
  animation: bounce;
  animation-duration: 0.8s;
}

/* スライダー全体 */
.slider-wrapper {
  display: flex; /* スライドのグループを横並び */
  overflow: hidden; /* はみ出たスライドを隠す */
}
/* スライド3枚のグループ */
.slider {
  animation: scroll-left 20s infinite linear .5s both;
  display: flex; /* スライド3枚を横並び */
}
ul {
  list-style-type: none;
  }
ul {
  padding-left: 0px;
}

/* スライド */
.slide {
  width: calc(100vw / 3); /* 3はスライドの枚数 */
}
/* スライドの画像 */
.slide img {
  display: block;
  width: 100%;
}

/* CSSアニメーション */
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
/* hover(マウスオーバー)で一時停止 */
.slider-wrapper:hover .slider {
  animation-play-state: paused;
}

.slide-in {
  font-size: px;
  font-weight: bold;
  animation: slideIn 1s ease-out;
}

@keyframes slideIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.fade-in01{
  font-size:20px;
  opacity:0;
  animation-name: sample01;
  animation-duration: 7s;
  animation-iteration-count:2;
  animation-fill-mode: forwards;
}
@keyframes sample01 {
0% {
  opacity: 0;
  color:#555555;
}
90% {
 opacity: 1;
 color:#888888;
}
 100% {
  opacity: 1;
  color:#07f25b;
}
}

@charset "utf-8";

.oneArea {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;

}

.f-01 { flex-basis: 40%; }
.f-02 { flex-basis: 30%; }
.f-03 { flex-basis: 20%; }
.f-04 { flex-basis: 30%; }



.test {
    background-image: url(http://www.sankohouse.jp/reform/images/mado.jpg);
    width: 140px;
    height: 70px;
  }

.test1 {
  position: relative;
}

.test2 {
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translate(-50%,-50%);
  margin: 0;font-size: 15px;/*文字サイズ*/
  border: solid white 1px; /*線で囲う*/
  padding: 5px;/*文字と線の間の余白*/
  color:white
;/*文字色*/
  text-decoration: none;/*下線を表示させない*/

}
.test2 img:hover {
   opacity: 0.6; /* 40％ほど透過させる */
}

.sample1oya{
  background  : #ffffff;
  padding     : 20px;
}
.sample1{
  display     : inline-block;
  font-size   : 160%;
  font-weight : ;
  color       : #ffffff;
  text-shadow:  2px  2px 10px #777 ,
               -2px  2px 10px #777 ,
                2px -2px 10px #777 ,
               -2px -2px 10px #777;
}