@font-face {
  font-family: 'Dom Casual Std';
  src: local(''),
    url('../font/DomCasualStd.woff2') format('woff2'),
    url('../font/DomCasualStd.woff') format('woff'),
    font-weight: 500;
  font-style: normal;
  font-display: swap
}

h1 {font-size: 3rem}
h2 {font-size: 2rem}
h3 {font-size: 1,5rem}

:root {
  --main-color: #ea556f;
  --main-headings-font: 'Dom Casual Std'
}

.mr-grid {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  max-width: initial
}

header, footer {
  background: #ff5f6d;
  background: -webkit-linear-gradient(to right, #ea556f, #ffc371);
  background: linear-gradient(to right, #ea556f, #ffc371);
  flex: 0 !important
}

.nav {
  background-color: transparent
}

.top-card {
  position: relative;
  margin: 0 auto!important;
  background: #fff;
  padding: var(--main-padding)
}

.top-logo {
  height: 300px
}

.social {
  display: flex;
  justify-content: space-around
}

.social-item {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  padding: 2px;
  -webkit-perspective: 50em;
  perspective: 50em
}

.mobile-hidden {
  display: none!important
}

.mainmenu a {
  color: #2b2a29
}

.nav li:not(:first-child)::before {
  background-color: #2b2a29
}

.content h1 {
  text-align: center
}

/*mozilo*/
.aligncenter {
  text-align: center
}

.alignright {
  text-align: right
}

.leftcontentimage {
  float: left
}

.rightcontentimage {
  float: right
}

@media only screen and (min-width: 36rem) {}

@media only screen and (min-width: 48rem) {
  .mobile-hidden {
    display: initial!important
  }

  .nav-wrapper {
    display: none
  }

  .top {
    height: 350px
  }

  .social-item img {
    width: 50%;
    display: block;
    position: absolute;
    left: 25%;
    right: 50%;
    bottom: 10%
  }

  .nav li a {
    font-weight: 700
  }

  .social {
    justify-content: flex-start
  }

  main {
    padding-left: 10rem;
    padding-right: 10rem;
    margin-top: 80px
  }

  .social-item a:hover {
    opacity: 1
  }

  .social-item {
    width: 2rem;
    margin-right: calc(var(--main-margin)*2);
    height: 2rem
  }

  .social-item:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 2px solid #2b2a29;
    content: '';
    z-index: -1;
    border-radius: 50%;
  }

  .social-item:after {
    -webkit-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out
  }

  .social-item:hover:after, .social-item:active:after {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }

  .social-item:nth-child(1):hover:after, .social-item:nth-child(1):active:after {
    border-color: #ef7f1a transparent #ef7f1a transparent
  }

  .social-item:nth-child(2):hover:after, .social-item:nth-child(2):active:after {
    border-color: #ffed00 transparent #ffed00 transparent
  }

  .social-item:nth-child(3):hover:after, .social-item:nth-child(3):active:after {
    border-color: #a79ecd transparent #a79ecd transparent
  }

  .social-item:nth-child(4):hover:after, .social-item:nth-child(4):active:after {
    border-color: #a2d9f7 transparent #a2d9f7 transparent
  }

  .social-item:nth-child(5):hover:after, .social-item:nth-child(5):active:after {
    border-color: #009846 transparent #009846 transparent
  }

  .social-item:nth-child(6):hover:after, .social-item:nth-child(6):active:after {
    border-color: #b2b3b3 transparent #b2b3b3 transparent
  }
}

@media only screen and (min-width: 62rem) {}

@media only screen and (min-width: 75rem) {
  main {
    padding-left: 15rem;
    padding-right: 15rem
  }
}

/*mozilo*/
.aligncenter {
  text-align: center;
}

.alignright {
  text-align: right;
}

.alignleft {
  text-align: left;
}

.alignjustify {
  text-align: justify;
}

.leftcontentimage {
  float: left
}

.rightcontentimage {
  float: right;
}

table.contenttable {
  width: 100%;
  text-align: center;
  padding: .625em 0
}

th.contenttable {
  background: var(--main-color);
  color: var(--main-bg-color);
  border-right: 1px solid;
  padding: 7px
}

th.contenttable:last-child {
  border-right: none
}

td {
  padding: 7px;
  border-bottom: 1px solid var(--main-color)
}