html,
body {
  background-color: #ffffff;
}

.articleHeaderSection {
  height: 26.563vw;
  margin-top: -5.208vw;
  margin-bottom: 4.167vw;
}

.articleHeaderImage {
  width: 100vw;
  position: absolute;
  display: block;
}

.articleHeaderImageMobile,
.articleHeaderArrowMobile {
  display: none;
}

.articleHeaderTextWrapper {
  position: relative;
  width: 50.521vw;
  padding-top: 7.01vw;
}

.articleHeaderText {
  font-weight: 700;
  font-size: 2.188vw;
  line-height: 3.281vw;
  text-transform: capitalize;
  color: #ffffff;
}

.articleHeaderAutor {
  display: flex;
  align-items: center;
  margin-top: 2.865vw;
}

.articlePostAuthorImg {
  width: 2.083vw;
  image-rendering: -webkit-optimize-contrast;
  margin-right: 0.99vw;
}

.articlePostAuthorName {
  font-size: 0.833vw;
  line-height: 1.354vw;
  text-align: center;
  color: #ffffff;
  font-weight: 500;
}

/*------------ARTICLE MAIN TEXT SECTION--------*/
.articleMainTextSection {
  margin-bottom: 13.177vw;
}

.articleMainTextGrid {
  display: flex;
}

.articleMainTextLinkWrapper {
  display: flex;
  flex-direction: column;
  position: fixed;
  transition: all 0.3s ease;
}

.articleLinkImg {
  image-rendering: -webkit-optimize-contrast;
  width: 1.667vw;
}

.articleLink {
  margin-bottom: 1.563vw;
}

.articleLinksFinalPosition {
  position: absolute;
  top: 120vw;
}

.articleMainTextContent {
  margin-left: 9.706vw;
  width: 44.792vw;
}

.articleMainTextPar {
  font-weight: 400;
  font-size: 0.833vw;
  line-height: 1.375vw;

  margin-bottom: 1.375vw;
}

.articleMainTextHeader {
  font-weight: 600;
  font-size: 1.25vw;
  line-height: 1.375vw;
  margin-top: 1.375vw;
  margin-bottom: 1.375vw;
}

.articleMainTextEmj {
  width: 1.25vw;
  margin-top: -0.4vw;
  margin-left: 0.5vw;
}

.articleMainPostViews {
  display: flex;
  align-items: center;
}

.articleMainPostViewsImg {
  width: 0.99vw;
  image-rendering: -webkit-optimize-contrast;
  margin-right: 0.527vw;
}

.articleMainPostViewsText {
  font-size: 0.833vw;
}

.articleUpArrow {
  position: fixed;
  left: 84.573vw;
  top: 89vh;
  transition: all 0.3s ease;
}

.articleUpArrowImg {
  width: 4.479vw;
  image-rendering: -webkit-optimize-contrast;
}

.articleArrowFinalPosition {
  position: relative;
  top: auto;
}

/*---------ARTICLE BOTTOM SECTION--------*/
.articleBottomSection {
  background-image: url("../images/articlesImages/grayBackground.svg");
  background-size: cover;
}

/*-----------ARRICLE FORM---------*/
.articleFormWrapper {
  position: absolute;
  width: 75.598vw;
  margin-top: -7.211vw;
}

/*--------ARTICLE FORM IMAGE----------*/

.articleFormBackground {
  width: 70.972vw;
  position: absolute;
}

.articleFormImgMobileBG {
  display: none;
}

.articleFormImageLines {
  position: absolute;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  width: 3.369vw;
  margin-left: -2.513vw;
  margin-top: 7.934vw;
  image-rendering: -webkit-optimize-contrast;
}

.articleFormImgPlus {
  position: absolute;
  image-rendering: -webkit-optimize-contrast;
  width: 1.198vw;
  margin-top: 12.115vw;
  margin-left: 4.496vw;
}

.articleFormImgRectangle {
  position: absolute;
  image-rendering: -webkit-optimize-contrast;
  width: 1.406vw;
  margin-left: 71.513vw;
  margin-top: 10.938vw;
}
/*--------------------------------*/

.articleFormContentWrapper {
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 47.865vw;
  margin-left: 12.986vw;
  margin-top: 5.571vw;
}

.articleFormHeaderWrapper {
  display: flex;
}

.articleFormTextHeader {
  font-weight: 600;
  font-size: 2.188vw;
  line-height: 3.281vw;
  color: #ffffff;
  margin-bottom: 2.267vw;
}
.articleFormHeaderImg {
  width: 2.188vw;
  height: 2.188vw;
  image-rendering: -webkit-optimize-contrast;
  margin-left: 0.635vw;
  margin-top: 0.521vw;
}

.articleForm {
  margin-bottom: 2.264vw;
}

.articleEmailInput {
  border: 0vw;
  padding: 0vw;
  padding-left: 1.25vw;
  width: 27.783vw;
  height: 2.396vw;
  border-radius: 2.708vw;
}

.articleEmailInput::placeholder {
  color: #bcc0cc;
  font-size: 0.833vw;
}

.articleFormSubmitButton {
  position: absolute;
  width: 8.906vw;
  height: 2.396vw;
  background-color: #ef0a5f;
  border: 0vw;
  padding: 0.625vw 2.24vw;
  border-radius: 2.5vw;
  margin-left: -8.891vw;
  transition: all 0.2s ease;
  font-size: 0.729vw;
  line-height: 1.094vw;
  image-rendering: -webkit-optimize-contrast;
}

.articleFormSubmitButton:hover {
  background-color: #ff3366;
}

.articleFormSubmitButton:active {
  background-color: #cc084f;
}

.articleFormBelowText {
  color: #edeff7;
  font-size: 0.833vw;
  line-height: 1.354vw;
}

/*----ARTICLE BOTTOM SECTION---------*/

.articleBottomHeaderText {
  font-size: 0.99vw;
  line-height: 1.458vw;
}

.articleBottomSection {
  padding-top: 21.875vw;
}

.articleBottomPosts {
  display: flex;
  margin-top: 2.464vw;
}

.blogPostItem {
  width: 21.146vw;
  margin-right: 2.083vw;
  margin-bottom: 9.707vw;
}

.mobileBreak {
  display: none;
}

footer {
  padding-top: 5vw;
}
/*--------------------MOBILE VERSION------------*/
@media screen and (max-width: 1023px) {
  footer {
    padding-top: 22.222vw;
  }

  .mobileBreak {
    display: block;
  }

  .articleHeaderSection {
    height: 125.556vw;
    margin-top: 5.556vw;
    margin-bottom: 11.667vw;
  }

  .articleHeaderImageMobile {
    display: block;
    width: 100vw;
    position: absolute;
  }

  .articleHeaderArrowMobileWrapper {
    margin-left: 5vw;
    height: 5vw;
    margin-top: -60vw;
    position: absolute;
  }

  .articleHeaderArrowMobile {
    display: block;
    image-rendering: -webkit-optimize-contrast;
    width: 5vw;
  }

  .articleHeaderImage {
    display: none;
  }

  .articleHeaderTextWrapper {
    position: relative;
    width: 90.858vw;
    padding-top: 24.444vw;
  }

  .articleHeaderText {
    font-size: 6.667vw;
    line-height: 10vw;
  }

  .articleHeaderAutor {
    margin-top: 14.444vw;
  }

  .articleHeaderAutorLine {
    display: none;
  }

  .articlePostAuthorImg {
    width: 11.389vw;
    margin-right: 2.222vw;
  }

  .articlePostAutorNameSpan {
    margin-left: -8.333vw;
    font-weight: 600;
  }

  .articlePostAuthorName {
    font-size: 3.333vw;
    line-height: 5.556vw;
    font-weight: 500;
  }

  /*------------ARTICLE MAIN TEXT SECTION MOBILE--------*/
  .articleMainTextSection {
    margin-bottom: 108.333vw;
  }

  .articleMainTextGrid {
    display: flex;
    flex-direction: column;
  }

  .articleMainTextLinkWrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 11.667vw;
  }

  .articleLinksFinalPosition {
    position: relative;
    top: 0px;
  }

  .articleLinkImg {
    image-rendering: -webkit-optimize-contrast;
    width: 11.667vw;
  }

  .articleLink {
    margin-bottom: 0vw;
    margin-right: 8.333vw;
  }

  .articleMainTextContent {
    margin-left: 0vw;
    width: 91.111vw;
  }

  .articleMainTextPar {
    font-weight: 400;
    font-size: 3.889vw;
    line-height: 6.389vw;
    margin-bottom: 6.389vw;
  }

  .articleMainTextHeader {
    font-size: 6.667vw;
    line-height: 10.667vw;
    margin-top: 10.667vw;
    margin-bottom: 10.667vw;
  }

  .articleMainTextEmj {
    width: 6.667vw;
    margin-top: -1vw;
    margin-left: 0.5vw;
  }

  .articleMainPostViews {
    display: flex;
    align-items: center;
    margin-top: 11.111vw;
  }

  .articleMainPostViewsImg {
    width: 5.278vw;
    image-rendering: -webkit-optimize-contrast;
    margin-right: 2.814vw;
  }

  .articleMainPostViewsText {
    font-size: 4.444vw;
    margin-top: 0.556vw;
  }

  .articleUpArrow {
    display: none;
    position: absolute;
    left: 84.573vw;
  }

  /*-----------ARRICLE FORM MOBILE---------*/
  .articleBottomSection {
    background-image: url("../images/articlesImages/grayBackgroundMobile.svg");
    background-size: cover;
  }

  .articleFormWrapper {
    position: absolute;
    width: 91.111vw;
    margin-top: -80.556vw;
  }

  /*--------ARTICLE FORM IMAGE MOBILE----------*/

  .articleFormBackground {
    display: none;
  }

  .articleFormImgMobileBG {
    display: block;
    position: absolute;
    width: 91.111vw;
  }

  .articleFormImageLines {
    display: none;
  }

  .articleFormImgPlus {
    display: none;
  }

  .articleFormImgRectangle {
    width: 5vw;
    image-rendering: -webkit-optimize-contrast;
    margin-left: 75.833vw;
    margin-top: -4.167vw;
  }

  /*---------------------------------*/
  .articleFormContentWrapper {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 82.222vw;
    margin-left: 4.444vw;
    margin-top: 22.778vw;
  }

  .articleFormHeaderWrapper {
    display: block;
    text-align: left;
    margin-bottom: 13.333vw;
  }

  .articleFormTextHeader {
    font-size: 8.889vw;
    line-height: 13.333vw;
    display: inline;
  }

  .articleFormHeaderImg {
    display: inline;
    width: 8.889vw;
    height: 8.889vw;
    image-rendering: -webkit-optimize-contrast;
    margin-left: 0vw;
    margin-top: -5.278vw;
  }

  .articleForm {
    margin-bottom: 6.667vw;
  }

  .articleEmailInput {
    display: block;
    border: 0vw;
    padding: 0vw;
    padding-left: 6.667vw;
    width: 74.722vw;
    height: 13.333vw;
    border-radius: 14.444vw;
    margin-bottom: 4.444vw;
  }

  .articleEmailInput::placeholder {
    color: #bcc0cc;
    font-size: 3.889vw;
  }

  .articleFormSubmitButton {
    display: block;
    position: relative;
    width: 81.389vw;
    height: 13.333vw;
    border-radius: 14.444vw;
    padding: 3.333vw 11.944vw;
    border-radius: 13.333vw;
    margin-left: 0vw;
    font-size: 3.889vw;
    line-height: 5.833vw;
  }

  .articleFormBelowText {
    font-size: 3.333vw;
    line-height: 5.556vw;
  }

  /*---ARTICLE BOTTOM SECTION MOBILE---*/

  .articleBottomSection {
    padding-top: 98.333vw;
  }

  .articleBottomHeaderText {
    font-size: 5.278vw;
    line-height: 7.778vw;
  }

  .articleBottomPosts {
    display: flex;
    flex-direction: column;
    margin-top: 13.142vw;
  }

  .blogPostItem {
    width: 91.111vw;
    margin-right: 0vw;
    margin-bottom: 4.444vw;
  }

  .articleLastBlogItem {
    margin-bottom: 28.056vw;
  }
}

/*-------ANIMATIONS---------*/
.hiddenObject {
  display: none;
}

.invisibleClass {
  opacity: 0;
}

.blackTextColor {
  color: #242424;
}

@keyframes showArticleLines {
  0% {
    margin-left: 1vw;
  }

  100% {
    margin-left: -2.513vw;
  }
}

.animationShowArticleLines {
  animation: showArticleLines 2s ease;
}

.artcileGradientButtonClass {
  background: #4b2d7c;
  border: 0vw solid #4b2d7c;
  animation: buttonGradient 1s 1;
}

.artcileGradientButtonClass:hover {
  background: #361f5a;
}