@charset "UTF-8";
@import url(https://storage-asset.msi.com/frontend/custom_css/common/product-feature.css);
@import url(https://use.typekit.net/lgv1xst.css);

.heroButton{
    /* border: 1px solid #dba34e; */
    /* border-radius: 10px; */
    /* display: inline-block; */
    
}
/* .heroButton:hover{
    border-left: 5px solid #dba34e
} */

 .hero_nav_border{
    border-left: 5px solid #dba34e
}

.theme-gradient {
  background: #54565a;
  background: -webkit-gradient(linear, right top, left top, from(#54565a), to(white));
  background: linear-gradient(to left, #54565a 0%, white 100%);
}

.theme-mpg .theme-txt-color {
  color: #E81F76;
}

.theme-mpg .theme-border {
  border: 2px solid #E81F76;
}

.theme-mpg .theme-box-border {
  background-color: rgba(232, 31, 118, 0.4);
  border: 2px solid #E81F76;
}

.theme-mpg .highlighColor {
  color: #E81F76;
}

.theme-mpg .imgBorder {
  border: 1px solid;
  border-image-slice: 1;
  border-width: 1px;
}

.theme-mpg .border-gradient {
  border-image-source: linear-gradient(to left, #0057B7 0%, #440099 50%, #E81F76 100%);
}

.theme-mpg .theme-gradient {
  background: #E81F76;
  background: -webkit-gradient(linear, left top, right top, from(#54565a), to(white));
  background: linear-gradient(90deg, #54565a 0%, white 100%);
}

.theme-mpg .theme-link {
  color: #E81F76;
  text-decoration: underline;
}

.theme-mpg .theme-link:hover, .theme-mpg .theme-link:focus {
  -webkit-transition: all ease-in .3s;
  transition: all ease-in .3s;
  color: #ba195d;
  text-decoration: none;
}

.theme-mpg .theme-link--active {
  color: #a21653;
}

.theme-mpg .theme-button {
  display: block;
  max-width: 300px;
  border: 2px solid #999;
  color: #FFF;
  background-color: #000;
  border-image-slice: 2;
  border-width: 2px;
  padding: 15px 5px;
  text-align: center;
  cursor: pointer;
}

.theme-mpg .theme-button:hover, .theme-mpg .theme-button:focus {
  -webkit-transition: all ease-in .3s;
  transition: all ease-in .3s;
  display: block;
  border: 2px solid;
  border-image-slice: 2;
  border-width: 2px;
  background-color: #000;
  border-image-source: linear-gradient(to left, #0057B7 0%, #440099 50%, #E81F76 100%);
  color: #ba195d;
}

.theme-mpg .theme-button--active {
  display: block;
  border: 2px solid;
  border-image-slice: 2;
  background-color: #000;
  border-width: 2px;
  border-image-source: linear-gradient(to left, #0057B7 0%, #440099 50%, #E81F76 100%);
  color: #E81F76;
}

.theme-mpg ul.theme-dots li {
  list-style: none;
}

.theme-mpg ul.theme-dots li::before {
  content: "·";
  color: #E81F76;
  font-size: var(--block-text-lg);
  padding-right: 10px;
}

.theme-meg .theme-txt-color {
  color: #f2d8a7;
}

.theme-meg .theme-border {
  border: 2px solid #f2d8a7;
}

.theme-meg .theme-box-border {
  background-color: rgba(225, 146, 27, 0.4);
  border: 2px solid #f2d8a7;
}

.theme-meg .highlighColor {
  color: #f2d8a7;
}

.theme-meg .imgBorder {
  border: 1px solid;
  border-image-slice: 1;
  border-width: 1px;
}

.theme-meg .border-gradient {
  border-image-source: linear-gradient(to left, #E9C582 0%, #F1D8A7 33%, #E9C582 66%, #FAF5E6 100%);
}

.theme-meg .theme-link {
  color: #f2d8a7;
  text-decoration: underline;
}

.theme-meg .theme-link:hover, .theme-meg .theme-link:focus {
  -webkit-transition: all ease-in .3s;
  transition: all ease-in .3s;
  color: #e0b873;
  text-decoration: none;
}

.theme-meg .theme-link--active {
  color: #dba34e;
}

.theme-meg .theme-button {
  display: block;
  max-width: 300px;
  border: 2px solid #999;
  color: #FFF;
  background-color: #000;
  border-image-slice: 2;
  border-width: 2px;
  padding: 15px 5px;
  text-align: center;
  cursor: pointer;
}

.theme-meg .theme-button:hover, .theme-meg .theme-button:focus {
  -webkit-transition: all ease-in .3s;
  transition: all ease-in .3s;
  display: block;
  border: 2px solid;
  border-image-slice: 2;
  background-color: #000;
  border-image-source: linear-gradient(to left, #E9C582 0%, #F1D8A7 33%, #E9C582 66%, #FAF5E6 100%);
  color: #e0b873;
}

.theme-meg .theme-button--active {
  display: block;
  border: 2px solid;
  border-image-slice: 2;
  background-color: #000;
  border-image-source: linear-gradient(to left, #E9C582 0%, #F1D8A7 33%, #E9C582 66%, #FAF5E6 100%);
  color: #dba34e;
}

.theme-meg ul.theme-dots li {
  list-style: none;
}

.theme-meg ul.theme-dots li::before {
  content: "·";
  color: #f2d8a7;
  font-size: var(--block-text-lg);
  padding-right: 10px;
}

.theme-mag .theme-border {
  border: 2px solid #D3E736;
  text-align: center;
}

.theme-mag .theme-border {
  border: 2px solid #D3E736;
}

.theme-mag .theme-box-border {
  background-color: rgba(127, 138, 33, 0.4);
  border: 2px solid #D3E736;
}

.theme-mag .highlighColor {
  color: #D3E736;
}

.theme-mag .imgBorder {
  border: 1px solid;
  border-image-slice: 1;
  border-width: 1px;
}

.theme-mag .border-gradient {
  border-image-source: linear-gradient(90deg, white 0%, #D3E736 40%, #E3E890 50%, white 100%);
}

.theme-mag .theme-link {
  color: #D3E736;
  text-decoration: underline;
}

.theme-mag .theme-link:hover, .theme-mag .theme-link:focus {
  -webkit-transition: all ease-in .3s;
  transition: all ease-in .3s;
  color: #aab92c;
  text-decoration: none;
}

.theme-mag .theme-link--active {
  color: #7f8a21;
}

.theme-mag .theme-button {
  display: block;
  max-width: 300px;
  border: 2px solid #999;
  color: #FFF;
  background-color: #000;
  border-image-slice: 2;
  border-width: 2px;
  padding: 15px 5px;
  text-align: center;
  cursor: pointer;
}

.theme-mag .theme-button:hover, .theme-mag .theme-button:focus {
  -webkit-transition: all ease-in .3s;
  transition: all ease-in .3s;
  display: block;
  border: 2px solid;
  border-image-slice: 2;
  background-color: #000;
  border-image-source: linear-gradient(90deg, white 0%, #D3E736 40%, #E3E890 50%, white 100%);
  color: #aab92c;
}

.theme-mag .theme-button--active {
  display: block;
  border: 1px solid;
  border-image-slice: 2;
  background-color: #000;
  border-image-source: linear-gradient(90deg, white 0%, #D3E736 40%, #E3E890 50%, white 100%);
  color: #D3E736;
}

.theme-mag ul.theme-dots li {
  list-style: none;
}

.theme-mag ul.theme-dots li::before {
  content: "·";
  color: #D3E736;
  font-size: var(--block-text-lg);
  padding-right: 10px;
}

.hero {
  background: url("https://storage-asset.msi.com/global/picture/image/feature/mb/X870EGODLIKE/images/hero-mpg-bg.jpg") center no-repeat;
  background-size: cover;
  padding: 3% 0;
}

@media (min-width: 996px) {
  .hero__main-block1 .iconblock__1, .hero__main-block1 .iconblock__2,.hero__main-block1 .iconblock__3,.hero__main-block1 .iconblock__4, .hero__main-block1 .iconblock__5 {
    text-align: right !important;
    left: 8%;
  }
   .hero__main-block1 .iconblock__6,  .hero__main-block1 .iconblock__7 ,  .hero__main-block1 .iconblock__8 ,  .hero__main-block1 .iconblock__9 ,  .hero__main-block1 .iconblock__10 ,  .hero__main-block1 .iconblock__11  {
    text-align: left !important;
    right: 8%;
  }
  .hero__main-block1 .iconblock__1 {
    top: 22.5%;
  }
  .hero__main-block1 .iconblock__2 {
    top: 29.5%;
  }
  .hero__main-block1 .iconblock__3 {
    top: 41%;
  }
  .hero__main-block1 .iconblock__4 {
    top: 53%;
  }
  .hero__main-block1 .iconblock__5 {
    top: 72%;
  }
  .hero__main-block1 .iconblock__6 {
    top: 29%;
  }
  .hero__main-block1 .iconblock__7 {
    top: 38.5%;
  }

  .hero__main-block1 .iconblock__8 {
    top: 48.5%;
  }

  .hero__main-block1 .iconblock__9 {
    top: 62%;
  }

  .hero__main-block1 .iconblock__10 {
    top: 76%;
  }
  .hero__main-block1 .iconblock__11 {
    top: 86%;
  }
  .hero__main-block2 .iconblock__1, .hero__main-block2 .iconblock__2,  .hero__main-block2 .iconblock__3, .hero__main-block2 .iconblock__4,.hero__main-block2 .iconblock__5 {
    text-align: right !important;
    left: 8%;
  }
   .hero__main-block2 .iconblock__6,  .hero__main-block2 .iconblock__7, .hero__main-block2 .iconblock__8,  .hero__main-block2 .iconblock__9{
    text-align: left !important;
    right: 10%;
  }
  .hero__main-block2 .iconblock__1 {
    top: 21.5%;
  }
  .hero__main-block2 .iconblock__2 {
    top: 31.5%;
  }
  .hero__main-block2 .iconblock__3 {
    top: 40.5%;
  }
  .hero__main-block2 .iconblock__4 {
    top: 48.5%;
  }
  .hero__main-block2 .iconblock__5 {
    top: 66.5%;
  }
  .hero__main-block2 .iconblock__6 {
    
    top: 34.5%;
  }

  .hero__main-block2 .iconblock__7 {
    top: 43%;
  }

  .hero__main-block2 .iconblock__8 {
    top: 62%;
  }
  .hero__main-block2 .iconblock__9 {
    top: 79%;
  }
  .hero__main-block3 .iconblock__1, .hero__main-block3 .iconblock__2,.hero__main-block3 .iconblock__3, .hero__main-block3 .iconblock__4,.hero__main-block3 .iconblock__5,.hero__main-block3 .iconblock__6 {
    text-align: right !important;
    left: 12%;
  }
   .hero__main-block3 .iconblock__7,.hero__main-block3 .iconblock__8, .hero__main-block3 .iconblock__9,.hero__main-block3 .iconblock__10,.hero__main-block3 .iconblock__11,.hero__main-block3 .iconblock__12,.hero__main-block3 .iconblock__13{
    text-align: left !important;
    right: 8%;
  }
  .hero__main-block3 .iconblock__1 {
    top: 28.5%;
  }
  .hero__main-block3 .iconblock__2 {
    top: 39%;
    left: 7%;
  }
  .hero__main-block3 .iconblock__3 {
    top: 50%;
  }
  .hero__main-block3 .iconblock__4 {
    top: 58.5%;
  }

  .hero__main-block3 .iconblock__5 {
    top: 71.5%;
  }

  .hero__main-block3 .iconblock__6 {
    top: 80.5%;
  }
  .hero__main-block3 .iconblock__7 {
    top: 25%;
  }
  .hero__main-block3 .iconblock__8 {
    top: 34%;
  }
  .hero__main-block3 .iconblock__9 {
    top: 43%;
  }
  .hero__main-block3 .iconblock__10 {
    top: 53%;
  }
  .hero__main-block3 .iconblock__11 {
    top: 61%;
  }
  .hero__main-block3 .iconblock__12 {
    top: 69.5%;
  }
  .hero__main-block3 .iconblock__13 {
    top: 81%;
  }
}

@media (min-width: 1600px) {
  .hero__main-block1 .iconblock__1, .hero__main-block1 .iconblock__2,.hero__main-block1 .iconblock__3,.hero__main-block1 .iconblock__4, .hero__main-block1 .iconblock__5  {
    left: -1%;
  }
  .hero__main-block1 .iconblock__6, .hero__main-block1 .iconblock__7 ,  .hero__main-block1 .iconblock__8 ,  .hero__main-block1 .iconblock__9 ,  .hero__main-block1 .iconblock__10 ,  .hero__main-block1 .iconblock__11 {
    right: -1%;
  }
  .hero__main-block1 .iconblock__1 {
    top: 19%;
  }
  .hero__main-block1 .iconblock__2 {
    top: 28%;
  }
  .hero__main-block1 .iconblock__3 {
    top: 40%;
  }
  .hero__main-block1 .iconblock__4 {
    top: 53%;
  }
  .hero__main-block1 .iconblock__5 {
    top: 73%;
  }
  .hero__main-block1 .iconblock__6 {
    top: 27%;
  }
  .hero__main-block1 .iconblock__7 {
    top: 37%;
  }
  .hero__main-block1 .iconblock__8 {
    top: 48%;
  }
  .hero__main-block1 .iconblock__9 {
    top: 61%;
  }
  .hero__main-block1 .iconblock__10 {
    top: 76%;
  }
  .hero__main-block1 .iconblock__11 {
    top: 87%;
  }
  .hero__main-block2 .iconblock__1, .hero__main-block2 .iconblock__2,  .hero__main-block2 .iconblock__3,  .hero__main-block2 .iconblock__4,.hero__main-block2 .iconblock__5{
    left: -2%;
  }
 .hero__main-block2 .iconblock__6,  .hero__main-block2 .iconblock__7, .hero__main-block2 .iconblock__8,  .hero__main-block2 .iconblock__9  {
    right: 2%;
  }
  .hero__main-block2 .iconblock__1 {
    top: 18.5%;
  }
  .hero__main-block2 .iconblock__2 {
    top: 29%;
  }
  .hero__main-block2 .iconblock__3 {
    top: 38%;
  }
  .hero__main-block2 .iconblock__4 {
    top: 47%;
  }

  .hero__main-block2 .iconblock__5 {
    top: 66.5%;
  }

  .hero__main-block2 .iconblock__6 {
    top: 31.5%;
  }

  .hero__main-block2 .iconblock__7 {
    top: 43%;
  }

  .hero__main-block2 .iconblock__8 {
    top: 62%;
  }
  .hero__main-block2 .iconblock__9 {
    top: 80%;
  }
  .hero__main-block3 .iconblock__1, .hero__main-block3 .iconblock__2,.hero__main-block3 .iconblock__3, .hero__main-block3 .iconblock__4,.hero__main-block3 .iconblock__5 ,.hero__main-block3 .iconblock__6{
    left: 5%;
  }
   .hero__main-block3 .iconblock__7,.hero__main-block3 .iconblock__8, .hero__main-block3 .iconblock__9,.hero__main-block3 .iconblock__10,.hero__main-block3 .iconblock__11,.hero__main-block3 .iconblock__12,.hero__main-block3 .iconblock__13 {
    right: -1%;
  }
  .hero__main-block3 .iconblock__1 {
    top: 27%;
  }
  .hero__main-block3 .iconblock__2 {
    top: 38%;
    left: -2%;
  }
  .hero__main-block3 .iconblock__3 {
    top: 49%;
  }

  .hero__main-block3 .iconblock__4 {
    top: 58%;
  }

  .hero__main-block3 .iconblock__5 {
    top: 70.5%;
  }

  .hero__main-block3 .iconblock__6 {
    top: 80%;
  }

  .hero__main-block3 .iconblock__7 {
    top: 22%;
  }
  .hero__main-block3 .iconblock__8 {
    top: 32%;
  }
  .hero__main-block3 .iconblock__9 {
    top: 41%;
  }
  .hero__main-block3 .iconblock__10 {
    top: 52%;
  }

  .hero__main-block3 .iconblock__11 {
    top: 60%;
  }

  .hero__main-block3 .iconblock__12 {
    top: 68%;
  }

  .hero__main-block3 .iconblock__13 {
    top: 81%;
  }
}
/*# sourceMappingURL=hero.css.map */