/*======================================
Theme Name: Divi Hubud
Theme URI: https://hubud.org/
Description: Hubud child theme for the parent Divi theme
Version: 1.0.1
Author: Dave van Hoorn
Author URI: https://davevanhoorn.com/
Template: Divi
Text Domain: hubud
======================================*/

/*
** Header
*/

#main-header {
  background-color: transparent !important;
  background: rgba(120,81,49,1) !important;
}

#main-header.et-fixed-header {
  background: rgba(120,81,49,0.8) !important;
}

#main-header ul {
  list-style: none !important;
}

#main-header .container {
  width: 100%;
  padding: 0 15px;
}

#main-header div#et-top-navigation {
  position: initial;
}

body.page-id-4 #top-menu-nav>ul>li.current-menu-item.menu-item-111>a {
  color: white !important;
}

body.page-id-4 #top-menu-nav>ul>li.current-menu-item.menu-item-111>a:hover {
  color: #7fcaac !important;
}

body.home.page-id-109 #top-menu .home-button a {
  color: #7fcaac;
}

#top-menu li.current-menu-ancestor>a {
  color: #7fcaac !important;
}

#top-menu li.current-menu-ancestor .menu-item a {
  color: white;
}

#top-menu li.current-menu-ancestor .menu-item.current-menu-item a {
  color: #7fcaac !important;
}

#button_login {
  position: absolute;
  top: 15px;
  right: 24px;
  z-index: 99999;
  padding: 6px 10px;
  color: white;
  -webkit-transition: color .4s ease-in-out;
  transition: color .4s ease-in-out;
}

#button_login:hover {
  color: #7fcaac;
}

#top-menu {
  margin-top: 0;
  padding-left: 0;
}

#top-menu ul.sub-menu {
  margin: 0;
}

#top-menu li {
  padding-left: 8px;
  padding-right: 8px;
}

body.home .home-button a,
#top-menu-nav>ul>li>a:hover,
#top-menu-nav>ul>li.current-menu-item>a,
.et-fixed-header #top-menu li.current-menu-ancestor>a,
.et-fixed-header #top-menu li.current-menu-item>a,
.et-fixed-header #top-menu-nav>ul>li.current-menu-item>a{
  color: #7fcaac !important;
  opacity: 1 !important;
}

@media all and (max-width: 980px) {

  #button_login {
    position: absolute;
    top: 32px;
    font-size: smaller;
  }

}

/*
** Floating socials
*/

.floating-elements {
  position: relative;
  z-index: 1030;
  text-align: center;
  display: none;
}

.floating-elements,
.floating-elements a {
  color: #fff;
}

.floating-elements a:hover {
  text-decoration: none;
}

.floating-elements ul {
  padding-left: 0;
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}

.floating-elements ul li {
  display: inline-block;
  margin: 0;
}

.floating-elements ul a {
  padding: 1rem .75rem;
  font-weight: bold;
}

.floating-elements .social-links a {
  color: #fff;
  line-height: 1;
  padding: .5rem 1rem;
}

.floating-elements .social-links i {
  font-size: 1.6rem;
  font-weight: normal;
  border-radius: 3px;
}

@media (min-width: 768px) {

  .floating-elements .social-links i {
    font-size: 1.2rem;
  }

}

@media (min-width: 768px) {

  .floating-elements {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
  }

  .floating-elements .fix-top-right {
    position: absolute;
    pointer-events: auto;
    top: 50%;
    right: 0;
    background-color: #000;
    -webkit-box-shadow: inset -20px 0 50px rgba(0, 0, 0, 0.2);
            box-shadow: inset -20px 0 50px rgba(0, 0, 0, 0.2);
    border-radius: .75rem 0 0 .75rem;
    text-align: center;
    margin: -103px 0 0 0;
    padding: 1rem 0 !important;
  }

  .floating-elements .fix-top-right li {
    display: block;
  }

  .floating-elements .fix-top-right a {
    display: block;
    padding: .5rem 1rem;
  }

  .floating-elements .fix-top-right a,
  .floating-elements .fix-top-right a:hover {
    color: #fff;
  }
}

/*
** Hero
*/
/* overflow: hidden; */
@media (min-width: 980px) {
  .hubud-hero {
    min-height: 75vh;
  }
}
.hubud-hero:before {
  content: '-';
  color: transparent;
  background-image: url(img/hubud_detail_circle--white.svg);
  background-size: 44px;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  bottom: -22px;
  left: 50%;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  z-index: 98;
}

.hubud-hero:after {
  content: '-';
  color: white;
  background-image: url(img/hubud_detail_arrow.svg);
  background-size: 18px;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  bottom: -9px;
  left: 50%;
  width: 18px;
  height: 20px;
  margin-left: -9px;
  z-index: 99;
  transform: rotate(90deg);
}


/*
** Divi Customizations
*/

.page-container {
  box-shadow: none !important;
}

.btn-inline .et_pb_button_module_wrapper {
  display: inline-block;
  margin: 0 5px;
}

.btn-inline {
  text-align: center !important;
}

/*
** Footer
*/

.hubud-footer-socials {
  text-align: center;
}

.hubud-footer-socials__logo {
  fill: white;
  max-width: 150px;
  margin-bottom: 1rem;
}

.hubud-footer-socials__logo:hover {
  fill: #7fcaac;
}

.hubud-footer-socials-icons__link {
  position: relative;
  display: inline-block;
}

.hubud-footer-socials-icons__link:hover .hubud-footer-socials-icons__icon svg path {
  fill: #7fcaac;
}

.hubud-footer-socials-icons__link:hover .hubud-footer-socials-icons__shape svg path {
  stroke: #7fcaac;
}

.hubud-footer-socials-icons__shape {
  display: block;
}

.hubud-footer-socials-icons__icon {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hubud-footer-socials-icons__icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.hubud-footer-socials-icons__shape svg {
  width: 57px;
  height: 57px;
  display: block;
}

.hubud-footer-socials-icons__icon.facebook svg {
  position: relative;
  margin-top: -3px;
  margin-left: 1px;
}

.hubud-footer-socials-icons__icon.twitter svg {
  position: relative;
  margin-top: 3px;
  margin-left: 6px;
}

.hubud-footer-socials-icons__icon.instagram svg {
  position: relative;
  margin-top: -1px;
  margin-left: 5px;
}

.hubud-footer-socials-icons__icon.youtube svg {
  position: relative;
  margin-top: -4px;
  margin-left: 3px;
}

/* pricing table 5 columns */
.pricing-table-5cols .et_pb_pricing_table_wrap {
  align-items: stretch;
}

.pricing-table-5cols .et_pb_pricing_table {
  display: flex;
  flex-direction: column;
}
.pricing-table-5cols .et_pb_pricing_table .et_pb_button_wrapper {
  margin-top: auto;
}
@media only screen and (min-width: 980px) {
  .pricing-table-5cols .et_pb_pricing_table_wrap {
    margin-bottom: -50px;
  }
    .pricing-table-5cols .et_pb_pricing_table {
    margin-top: 0 !important;
    margin-bottom: 50px !important;
  }

}
@media only screen and (min-width: 980px) and (max-width: 1099px) {
  
  .pricing-table-5cols .et_pb_pricing_table_wrap>.et_pb_pricing_table:nth-child(4n+1) {
  }
  .pricing-table-5cols .et_pb_pricing_table {
    width: 50% !important;
    max-width: 50% !important;
  }
}


@media only screen and (min-width: 1100px) {
  .pricing-table-5cols .et_pb_pricing_table_wrap {
    flex-wrap: nowrap;
  }
  
  .pricing-table-5cols .et_pb_pricing_table_wrap>.et_pb_pricing_table:nth-child(4n+1) {
  }
  
}

/* Testing */
body {
  
}

.home-links-section {

}

.home-links-section h2 {
  font-size: 20px !important;
}


.home-links-row-2-1 {

}

.instagram-box {
  position: relative;
}

.instagram-box:before,
.instagram-box:after {
  position: absolute;
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='9' viewBox='0 0 10 9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.362 1.265l3.878.407.81 3.814-3.376 1.95-2.898-2.61z' stroke-width='0.35' stroke='%23fff' fill='transparent' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
  width: 66px;
  height: 66px;
  top: 0;
  left: 0;
  content: '';
  z-index: 1;
  background-size: 66px 66px;
}

.instagram-box:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23FFF' fill-rule='evenodd' d='M13.257 0H2.743C1.228 0 0 1.228 0 2.743v10.514C0 14.772 1.228 16 2.743 16h10.514C14.772 16 16 14.772 16 13.257V2.743C16 1.228 14.772 0 13.257 0zM5.503 6.613c0-.002.002-.004.004-.006.032-.057.066-.113.102-.168.02-.033.042-.064.064-.095l.076-.102c.022-.03.044-.057.068-.085.044-.053.09-.104.14-.153.022-.024.047-.047.072-.07.034-.034.07-.066.106-.097l.073-.063c.056-.045.114-.09.174-.13.022-.015.044-.03.066-.043.048-.03.096-.06.145-.088l.07-.04c.07-.036.14-.07.21-.1.017-.008.034-.014.05-.02.062-.025.124-.048.187-.07l.068-.02c.078-.024.158-.045.24-.062l.026-.004c.074-.015.15-.026.226-.035l.068-.007c.086-.008.172-.013.26-.013.087 0 .174.005.26.013l.067.007c.077.01.152.02.227.035.01 0 .018.002.027.004.082.017.16.038.24.062l.067.02c.064.022.126.045.187.07.017.006.034.012.05.02.07.03.14.064.21.1l.07.04c.05.027.1.057.146.088l.065.042c.06.042.12.086.176.132l.073.06c.037.033.073.066.108.1.025.022.05.044.072.068.048.05.095.1.14.154.023.027.044.056.066.084.027.034.053.07.078.104.022.03.044.06.065.093.294.448.466.983.466 1.56 0 1.578-1.28 2.857-2.857 2.857C6.42 10.857 5.14 9.577 5.14 8c0-.504.132-.976.36-1.387zm8.783 5.79c0 1.112-.9 2.013-2.012 2.013H3.726c-1.11 0-2.012-.9-2.012-2.012v-5.79h1.93c-.14.436-.215.902-.215 1.386 0 2.524 2.046 4.57 4.57 4.57 2.524 0 4.57-2.046 4.57-4.57 0-.484-.075-.95-.214-1.387h1.93v5.79zm0-8.113c0 .196-.16.355-.356.355h-1.955c-.197 0-.356-.16-.356-.355V2.335c0-.197.158-.356.355-.356h1.955c.196 0 .356.158.356.355V4.29z'%3E%3C/path%3E%3C/svg%3E");  
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: 26px 22px;
}

.article-box {

}

.article-box:before,
.article-box:after {
  position: absolute;
  display: block;
  width: 66px;
  height: 66px;
  bottom: -17px;
  right: -13px;
  content: '';
  z-index: 1;
  background-size: 66px 66px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Csvg width='10' height='9' viewBox='0 0 10 9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.362 1.265l3.878.407.81 3.814-3.376 1.95-2.898-2.61z' stroke-width='2' stroke='%23ffffff' fill='%23ffffff' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E%3C/svg%3E");  
  background-position: center center;
  background-repeat: no-repeat;
}
.article-box:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 10'%3E%3Cpath fill='%23774f31' fill-rule='evenodd' d='M14 4H0v2h14v4l5-5-5-5v4z'%3E%3C/path%3E%3C/svg%3E");
  background-size: 19px 10px;
  background-repeat: no-repeat;
  background-position: 11px 13px;
}

.article-box .et_pb_text_inner p:first-child {
  position: relative;
}
.article-box .et_pb_text_inner p:first-child:before {
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 23px;
  height: 6px;
  background: #fff;
  content: '';
}
.article-box-green .et_pb_text_inner p:first-child:before {
  background: #774f31;

}

.blog-link-box {
  transition: background 0.3s ease 0s;
}

.blog-link-box:hover {
  background-color: #dec9b9;
}


.blog-box {

}

.home-links-row-2-1 {
  
}

.blog-link-box .et_pb_text_inner, 
.article-box .et_pb_text_inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

@media (min-width: 601px) {
  .instagram-box a {
    display: block;
    position: relative;
    padding-top: 100%;
    height: 0;
  }
  
  .instagram-box .et_pb_image_wrap {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
  }
  
  .instagram-box a img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  .blog-link-box, .article-box {
    height: 100%;
  }
  .blog-link-box {
    min-height: 190px;
  }

}

/* ipad portrait optimization */
@media (min-width: 601px) and (max-width: 980px) {
  /* first row */
  .home-links-section .et_pb_row_1-4_1-4_1-4,
  .home-links-section .home-links-row-2-1 {
    display: flex;
    justify-content: space-between;
    padding-top: 0;
    padding-bottom: 0;
  }
  .home-links-section .et_pb_row_1-4_1-4_1-4:after,
  .home-links-section .home-links-row-2-1:after {
    display: none;
  }
  .home-links-section .et_pb_row_1-4_1-4_1-4 .et_pb_column.et_pb_column_inner {
    width: 30%;
  }
  .home-links-section .home-links-row-2-1 .et_pb_column.et_pb_column_inner {
    width: 30%;
  }
  .home-links-section .home-links-row-2-1 .et_pb_column.et_pb_column_inner:first-child {
    width: 65%;
    margin-bottom: 0;
  }
  .blog-link-box, .article-box {
    margin-bottom: 0;
  }
}

@media (min-width: 981px) {
  .home-links-row-2-1 {
    padding-top: 0 !important;
  }
  .home-links-row-2-1>div:first-child {
    width: 65.31946128% !important;
  }
  .home-links-row-2-1>div:nth-child(2) {
    width: 30.63973064% !important;
  }
  .article-box p {
    font-size: 14px;
    line-height: 1.5em;
  }

}

@media (min-width: 1101px) {
  .home-links-section h2 {
    font-size: 28px !important;
  }
  .article-box p {
    font-size: 16px;
    line-height: 1.8em;
  }

}

/* Events */
.news .item.type-event {
  /* position: relative; */
}

.news .item.type-event .txt {
  
}

.news .item.type-event .post-info .date {
  /* position: absolute;
  top: 0;
  left: 0; */
}
/*
** Event pages
*/
body.page-id-265 .news .item.show,
body.page-id-26545 .news .item.show {
  padding-bottom: 0;
}

body.single-event .menu-item-266 a,
body.single-event #breadcrumbs a {
  /* color: #774f31 !important; */
}

body.page-id-265 .pagination,
body.page-id-26545 .pagination {
  display: none;
}

body.page-id-265 .news,
body.page-id-26545 .news {
  padding-top: 30px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

body.single-event .article-hero {
  min-height: initial;
  padding-top: 0;
}

body.single-event .article-hero #article-hero-content,
body.single-event .article-hero .article-img {
  -webkit-transition: none;
  transition: none;
}

body.single-event .article-hero #article-hero-content h1 {
  margin-bottom: 0;
  font-size: 2.5rem;
  text-align: left;
}

body.single-event .article-hero #article-hero-content h1 span {
  display: block;
}

body.single-event .article-hero #article-hero-content.container {
  max-width: 1200px;
  padding-top: 50px;
  padding-bottom: 50px;
}

body.single-event section.main main {
  width: 75%;
}

body.single-event aside {
  width: 25%;
}

body.single-event aside .filterHeader {
  padding-top: 0;
}

@media screen and (min-width: 1400px) {

  body.single-event .article-hero #article-hero-content.container {
    max-width: 1200px;
  }

}

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

  body.single-event .article-hero #article-hero-content.container {
    max-width: 1140px;
  }

}

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

  body.single-event .article-hero #article-hero-content.container {
    max-width: 960px;
  }

}

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

  body.single-event .article-hero #article-hero-content.container {
    max-width: 720px;
  }

}

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

  body.single-event .article-hero #article-hero-content.container {
    max-width: 540px;
  }

}

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

  body.single-event .article-hero #article-hero-content.container {
    max-width: 540px;
  }

}

body.single-event article.type-event {
  padding-bottom: 0;
  margin-bottom: 30px;
}

body.single-event article.type-event ul{
  list-style: initial;
}

body.single-event article.type-event .meta {
  display: block;
  border-bottom: 1px solid rgba(0,0,0,.1);
  width: 100%;
  margin-bottom: 2px;
  padding-bottom: 20px;
  font-size: initial;
}

body.single-event article.type-event .meta ul {
  margin-top: 0;
}

body.single-event article #comment-wrap {
  padding-top: 0;
}

body.single-event article #respond {
  padding-top: 0;
}

body.single-event article #commentform {
  padding-bottom: 0;
}

body.single-event article .addeventatc {
  margin-bottom: 16px;
}

body.single-event #breadcrumbs {
  margin-bottom: 0;
  padding-bottom: 0;
}

article.type-event .txt {
  padding-top: 15px;
  padding-bottom: 15px;
}

article.type-event h3 {
  font-size: 25px;
}

article.type-event h3 a {
  /* color: #774f31; */
  color: #7fcaac;
}

article.type-event h3 a:hover {
  color: #176b83;
}

article.type-event .post-info {
  padding-bottom: 0;
  margin-bottom: 9px;
  padding-left: 0 !important;
}

article.type-event .post-info .date a {
  margin-left: 9px;
}

article.type-event hr {
  border-top: solid 1px #dedede;
}

.list-inline {
  list-style: none !important;
  padding-left: 0 !important;
}

.list-inline li {
  display: inline-block;
}

.list-inline li:first-child {
  margin-right: 5px;
}

.list-inline li .far {
  color: #373a3c;
}

.addeventatc {
    visibility: hidden;
    font-weight: normal !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 1rem !important;
    line-height: 1.25 !important;
    font-family: Wicked-Grit, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    border: 1px solid rgb(55, 58, 60) !important;
    padding: 0.65rem 1rem !important;
    top: 2px !important;
    position: relative !important;
    margin-left: 6px !important;
    z-index: 2 !important;
    outline: 0;
    max-height: 38px !important;
}

.addeventatc .addeventatc_icon {
  background: none !important;
}

.addeventatc_dropdown {
  width: 219px !important;
  padding-top: 0 !important;
  top: 48px !important;
}

.addeventatc_dropdown span {
  font-size: x-small !important;
  padding: 11px 10px 11px 40px !important;
}

.addeventatc_dropdown em {
  display: none !important;
}

.addeventatc_dropdown .copyx {
  display: none !important;
}

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

  .addeventatc {
    margin-left: 0 !important;
    margin-top: 8px !important;
  }

}

/* slider */
.et_pb_row.media-slider .et_pb_column .et_pb_image_wrap {
  /* max-width: 140px; */
  display: block;
    height: 100%;
}

@media (max-width: 768px) {
  .et_pb_row.media-slider {
    padding: 0;
    width: 100% !important;
  }  
}

@media (min-width:767px) {

.et_pb_row.media-slider .slick-slider {
  margin-left: -30px !important;
  margin-right: -30px !important;
  width: calc(100% + 60px) !important;
}
}

.et_pb_row.media-slider .et_pb_image {
  margin-top: 0 !important;
  padding: 30px;
  margin-bottom: 0;
  height: 140px;
  align-items: center;  
}

.et_pb_row.media-slider .et_pb_image a {
  display: block;
    height: 100%;
}


.et_pb_row.media-slider .et_pb_image img {
  width: 100%;
  height: 100%;
  object-fit: contain;

}

.et_pb_row.media-slider .slick-arrow {
  /* background-color: fuchsia; */
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJMYXllcl8xIiB2aWV3Qm94PSItMjcxIDM5NC45IDUzIDUyIj4NCiAgPHN0eWxlPg0KICAgIC5zdDB7ZmlsbDojRjhGNUYzO30gLnN0MXtlbmFibGUtYmFja2dyb3VuZDpuZXcgO30gLnN0MntmaWxsOiNCQkE3OTg7fQ0KICA8L3N0eWxlPg0KICA8cGF0aCBkPSJNLTIzMS4yIDM5NWwtMzIuMyAzLjQtNi44IDMxLjggMjguMSAxNi4yIDI0LjEtMjEuNyIgY2xhc3M9InN0MCIvPg0KICA8cGF0aCBkPSJNLTI0My4zIDQyNi44bC03LjUtNy41IDcuNS03LjUgMi4zIDIuMi01LjMgNS4zYy4zLjMuNi42IDEuMSAxbDQuMiA0LjItMi4zIDIuM3oiIGNsYXNzPSJzdDEgc3QyIi8+DQo8L3N2Zz4=") !important;
  background-size: 50px 50px;
    width: 50px;
    height: 50px;
    transform: none;
    top: 95%;
}

.et_pb_row.media-slider .slick-arrow:before {
  display: none;
}


.et_pb_row.media-slider .slick-prev {
  left: 20px;

}

.et_pb_row.media-slider .slick-next {

  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
  right: 20px;
}


@-webkit-keyframes rotate1 {

  from {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg); }

  to {

    -webkit-transform: rotate(360deg);

            transform: rotate(360deg); } }



@keyframes rotate1 {

  from {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg); }

  to {

    -webkit-transform: rotate(360deg);

            transform: rotate(360deg); } }

.row-hexagons {
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  margin: 0 !important;
  width: 100% !important;
  height: 100%;
}            

.row-hexagons .et_pb_column {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.module-hexagons {
  margin-bottom: 0 !important;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(-50%);
}

.module-hexagons .et_pb_code_inner {
  height: 100%;
}

.module-hexagons .hexagon {
  width: 60vw;
  height: 60vw;
  position: absolute;
  z-index: -1;
  top: -7vw;
  left: -13vw;
}
@media screen and (max-width: 667px) {
  .module-hexagons .hexagon {
    width: 400px;
    height: 400px;
    top: 30px;
  }
}

.module-hexagons.centered .hexagon {
  width: 60vw;
  height: 60vw;
  top: -7vw;
  left: 50%;
  margin-left: -30vw;
}

@media screen and (max-width: 667px) {
  .module-hexagons.centered .hexagon {
      width: 400px;
      height: 400px;
      margin-left: -200px;
      top: 30px;
  }
}

.hexagon {
  width: 50vw;
  height: 50vw;
  position: absolute;
  z-index: -1;
  top: -7vw;
  left: -13vw;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.hexagon .hex {
  position: absolute;
  opacity: 0.4;
  height: 100%;
  width: 100%;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
  -webkit-animation: rotate1 260s infinite linear;
  animation: rotate1 260s infinite linear;
}

.hexagon .hex svg {
  width: 100%;
  height: 100%;
}

.hexagon .hex svg path {
  fill: #774f31;
  stroke: #774f31;
}

.hexagon .hex.hex2 {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}

.centered .hexagon {
  width: 44vw;
  height: 44vw;
  top: -30px;
  left: 50%;
  margin-left: -22vw;
}

@media screen and (max-width: 667px) {
  .centered .hexagon {
      width: 400px;
      height: 400px;
      margin-left: -200px;
      top: 60px;
  }
}