@media (max-width: 1100px) {
  #wrapper {
    padding-top: 120px;
  }
  body.front #wrapper {
    flex-direction: column-reverse;
  }
  body.front #wrapper #comp_wrapper {
    width: 100%;
  }
  body.front #wrapper #mod_wrapper {
    width: 100%;
  }
  body.front #wrapper .mod_startitem {
    min-height: 470px;
  }
  body.front #wrapper .mod_startitem .overlay {
    height: 470px;
  }
  body.potami .blog .category-desc,
  body.votsalakia .blog .category-desc {
    width: 40%;
  }
  body.potami .blog .blog-items,
  body.votsalakia .blog .blog-items {
    width: 60%;
    display: grid;
    grid-template-columns: 100%;
    column-gap: 2%;
    row-gap: 30px;
    align-items: start;
  }
  .speasyimagegallery-col-sm-4 {
    width: 50% !important;
  }
  #navi {
    display: inline-flex;
    align-content: center;
    align-items: center;
    padding: 10px;
    height: 80px;
  }
  #navi ul.nav {
    position: fixed;
    width: 100%;
    padding: 0;
    flex-direction: column;
    background: #FFF;
    top: 80px;
    left: 0;
    height: 0px;
    overflow: hidden;
  }
  #navi ul.nav li {
    width: 100%;
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #eee;
  }
  #navi ul.nav li a {
    font-size: 1.4rem;
  }
  #navi .custom {
    width: initial;
  }
  #navi .custom img {
    width: 220px;
    height: auto;
  }
  #navi .mod-languages li.lang-active {
    display: none;
  }
  #navi #mt {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%233E92CC'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5' /%3E%3C/svg%3E%0A");
    width: 36px;
    height: 36px;
    padding: 5px;
    display: block;
    cursor: pointer;
    transition: ease-in-out .2s height;
  }
  #navi.small {
    height: 80px;
  }
  #navi ul.nav.active {
    height: 100vh;
  }
  .mod_startitem .intro_content {
    right: 15px;
  }
}
@media (max-width: 720px) {
  #wrapper {
    padding-top: 100px;
  }
  body.front #wrapper {
    flex-direction: column-reverse;
  }
  body.front #wrapper #comp_wrapper {
    width: 100%;
  }
  body.front #wrapper #mod_wrapper {
    width: 100%;
  }
  .speasyimagegallery-image {
    width: 100% !important;
  }
  .speasyimagegallery-col-sm-4 {
    width: 100% !important;
  }
  .mod_startitem {
    width: 100%;
    min-height: 750px !important;
    background-size: auto 62%;
  }
  .mod_startitem .intro_content {
    width: auto;
    height: auto;
    min-height: auto;
    position: absolute;
    padding: 15px;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0px;
  }
  .mod_startitem .intro_content h2,
  .mod_startitem .intro_content p,
  .mod_startitem .intro_content a {
    color: #FFF;
  }
  .mod_startitem .intro_content a.btn {
    color: #FFF;
    border: 2px solid #FFF;
    text-decoration: none;
    padding: 15px 30px;
    font-weight: 600;
    display: inline-block;
    padding: 10px 60px;
    border-radius: 3px;
    transition: color ease-in-out 0.2s, background ease-in-out 0.2s;
  }
  .mod_startitem .intro_content a.btn:hover {
    color: #61a0b9;
    background: #FFF;
  }
  .mod_startitem .overlay {
    position: relative;
    width: 100%;
    height: 550px;
    pointer-events: none;
    top: 143px;
    left: -64px;
  }
  .mod_startitem .overlay svg {
    top: 0;
    transform: scale(200%);
    transition: ease-in-out .2s transform, ease-in-out .2s margin-left;
  }
  .mod_startitem:hover .intro_content,
  .mod_startitem_votsalakia:hover .intro_content {
    right: 0%;
  }
  .mod_startitem:hover .overlay,
  .mod_startitem_votsalakia:hover .overlay {
    top: 143px;
    left: -64px;
  }
  .mod_startitem:hover .overlay svg,
  .mod_startitem_votsalakia:hover .overlay svg {
    transform: scale(200%);
    margin: 0;
  }
  .mod_startitem_potami .overlay {
    top: 139px;
    left: 234px;
  }
  .mod_startitem_potami .overlay svg {
    margin: 0;
  }
  .mod_startitem_potami:hover .intro_content {
    right: 0%;
  }
  .mod_startitem_potami:hover .overlay {
    top: 139px;
    left: 234px;
  }
  .mod_startitem_potami:hover .overlay svg {
    transform: scale(200%);
    margin: 0;
  }
  .mod_startitem_votsalakia .intro_content {
    background: #61a0b9;
  }
  .mod_startitem_potami .intro_content {
    background: #7a8c68;
  }
  #footer {
    flex-direction: column;
    padding: 30px 0;
  }
  #footer ul.nav {
    padding: 0;
    flex-direction: column;
  }
  #footer ul.nav li {
    margin-bottom: 15px;
  }
  body.potami .blog,
  body.votsalakia .blog {
    flex-direction: column;
  }
  body.potami .blog .category-desc,
  body.votsalakia .blog .category-desc {
    width: 100%;
  }
  body.potami .blog .blog-items,
  body.votsalakia .blog .blog-items {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    column-gap: 2%;
    row-gap: 30px;
    align-items: start;
  }
  body.votsalakia.view-article .com-content-article__body,
  body.potami.view-article .com-content-article__body {
    flex-direction: column-reverse;
  }
  body.votsalakia.view-article .com-content-article__body .content_left,
  body.potami.view-article .com-content-article__body .content_left {
    width: 100%;
  }
  body.votsalakia.view-article .com-content-article__body .content_right,
  body.potami.view-article .com-content-article__body .content_right {
    width: 100%;
    margin-left: 0;
  }
}