/* Styles for tablets */
@media only screen and (min-width: 670px) and (max-width: 850px) {
    .cv-page {
        background-image: url("../img/cv-tablet.jpg") !important;
        padding-top: 319.4% !important;
    }
    .menu-overlay {
        background-size: 414px 460px !important;
    }
    .menu-overlay a {
        line-height: 1.8 !important;
    }
    .menu-overlay .separator {
        margin-top: 45px !important;
    }
    .nav-btn {
        display: block !important;
    }
    .nav-full {
        display: none !important;
    }
    .about-me-wrapper {
        max-width: 620px !important;
    }
    .aboutMe-invitation {
        font-size: 1.125rem !important;
    }
    .description-overlay {
        padding-bottom: 71px !important;
    }
    .description-title {
        padding-left: 80px !important;
        padding-right: 80px !important;
        padding-top: 100px !important;
    }
    .description-text {
        padding-left: 80px !important;
        padding-right: 80px !important;
        padding-top: 16px !important;
    }
    .close-description-area {
        padding-bottom: 71px !important;
    }
    .image-container img {
        padding-bottom: 71px !important;
    }
    .bottom-bar {
        height: 71px !important;
        padding-top: 15px !important;
    }
    .return-btn,
    .prev-btn,
    .next-btn,
    .counter,
    .description-btn {
        background-size: 40px 40px !important;
        height: 40px !important;
        width: 40px !important;
    }
    .counter {
        font-size: 1.344rem !important;
        margin-top: -31px !important;
        padding-top: 10px !important;
    }
    .web-design {
        padding-bottom: 65px !important;
    }
    .web-design-title {
        padding-top: 100px !important;
    }
    .web-design-wide {
        display: none !important;
    }
    .web-design-separator {
        width: 90% !important;
    }
    .page_not_found {
        padding-top: 420px !important;
    }
    .banner-design-title {
        padding-top: 55px !important;
    }
    .banner {
        width: calc(33.33%) !important;
    }
    .logo-design-title {
        padding-top: 105px !important;
    }
    .logo-design {
        clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 96%) !important;
    }
    .logo {
        width: calc(33.33%) !important;
    }
    .contactMe-title {
        padding-top: 55px !important;
    }
    .contactMe-content {
        width: 65% !important;
    }
    .footer {
        height: 70px !important;
    }
    .back-to-top-float {
        bottom: 25px !important;
    }
    .back-to-top,
    .back-to-top-float {
        background-image: url("../img/back-to-top-hover.svg") !important;
        background-size: 40px 40px !important;
        height: 40px !important;
        transition: 0.2s !important;
        width: 40px !important;
    }
    .fb-icn,
    .ig-icn,
    .in-icn {
        background-size: 40px 40px !important;
        height: 40px !important;
        margin-left: 8px !important;
        margin-right: 8px !important;
        width: 40px !important;
    }
    .fb-icn {
        background-image: url("../img/fb-icn-hover.svg") !important;
    }
    .ig-icn {
        background-image: url("../img/ig-icn-hover.svg") !important;
    }
    .in-icn {
        background-image: url("../img/in-icn-hover.svg") !important;
    }
    .homepage-icn {
        background-image: url("../img/home-btn-hover.svg") !important;
        background-size: 40px 40px !important;
        height: 40px !important;
        width: 40px !important;
    }
}

/* Styles for medium to large screens */
@media only screen and (min-width: 851px) and (max-width: 1350px) {
    .nav-btn {
        display: none !important;
    }
    .nav-full {
        display: flex !important;
    }
    .close-menu,
    .close-CV,
    .close-img-zoom-overlay-mobile,
    .close-img-zoom-overlay-desktop,
    .close-overlay {
        background-image: url("../img/close-btn.svg") !important;
        cursor: pointer !important;
        transition: 0.2s !important;
    }
    .close-menu:hover,
    .close-CV:hover,
    .close-img-zoom-overlay-mobile:hover,
    .close-img-zoom-overlay-desktop:hover,
    .close-description:hover,
    .close-overlay:hover {
        background-image: url("../img/close-btn-hover.svg") !important;
    }
    .about-me-wrapper {
        margin: 30px auto 0px auto !important;
        max-width: 650px !important;
    }
    .top-logo img {
        width: 180px !important;
    }
    .aboutMe-title {
        font-size: 2rem !important;
    }
    .aboutMe-text {
        font-size: 1.25rem !important;
    }
    .aboutMe-invitation {
        font-size: 1.25rem !important;
    }
    .web-design {
        padding-bottom: 100px !important;
    }
    .web-design-title {
        font-size: 2rem !important;
        padding-top: 100px !important;
    }
    .website {
        display: inline-block !important;
        overflow: hidden !important;
        position: relative !important;
        text-align: center !important;
    }
    .website img {
        margin-bottom: 0 !important;
        transition: 1.4s transform !important;
    }
    .website:hover img {
        transform: scale(1.1) !important;
    }
    .website-name {
        background-color: rgba(92, 117, 152, 0.9) !important;
        font-size: 2.5rem !important;
        font-weight: 600 !important;
        opacity: 0 !important;
        padding-bottom: 15px !important;
        padding-top: 15px !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        transition: 0.2s !important;
        width: 100% !important;
    }
    .website:hover .website-name {
        opacity: 1 !important;
    }
    .web-design-wide {
        display: block !important;
    }
    .web-design-mob {
        display: none !important;
    }
    .web-design-separator {
        width: 90% !important;
    }
    .page_not_found {
        background-image: url("") !important;
        padding-bottom: 0 !important;
        padding-top: 0 !important;
        position: relative !important;
        top: 190px !important;
    }
    .banner-design-title {
        font-size: 2rem !important;
        padding-top: 45px !important;
    }
    .banner {
        width: calc(25%) !important;
    }
    .banner img {
        transition: 1.4s transform !important;
    }
    .banner img:hover {
        transform: rotate(-4deg) scale(1.2) !important;
    }
    .logo-design-title {
        font-size: 2rem !important;
        padding-top: 100px !important;
    }
    .logo-design {
        clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 93%) !important;
        padding-bottom: 100px !important;
    }
    .logo {
        display: none !important;
    }
    .logo_wide {
        border: 5px solid transparent !important;
        box-sizing: border-box !important;
        display: inline !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow: hidden !important;
        width: calc(25%) !important;
    }
    .logo_wide img {
        transition: 1.4s transform !important;
    }
    .logo_wide img:hover {
        transform: rotate(-4deg) scale(1.2) !important;
    }
    .contactMe-title {
        font-size: 2rem !important;
        padding-bottom: 65px !important;
        padding-top: 45px !important;
    }
    .contactMe-input,
    .contactMe-textarea {
        font-size: 1.25rem !important;
    }
    .contactMe-form-message {
        font-size: 1.25rem !important;
    }
    .contactMe-submit-button {
        background-color: #959595 !important;
        font-size: 1.25rem !important;
    }
    .contactMe-submit-button:hover {
        background-color: #5c7598 !important;
    }
    .contact-details,
    .contact-details a {
        font-size: 1.25rem !important;
    }
    .contactMe-content {
        flex-direction: row-reverse !important;
        width: 70% !important;
    }
    .content-form {
        margin-right: 170px !important;
        max-width: 450px !important;
    }
    .thank-you {
        color: #5c7598 !important;
        font-size: 2rem !important;
    }
    .footer {
        height: 70px !important;
    }
    .back-to-top-float {
        bottom: 25px !important;
    }
    .back-to-top,
    .back-to-top-float {
        background-image: url("../img/back-to-top.svg") !important;
        background-size: 40px 40px !important;
        cursor: pointer !important;
        height: 40px !important;
        transition: 0.2s !important;
        width: 40px !important;
    }
    .back-to-top:hover,
    .back-to-top-float:hover {
        background-image: url("../img/back-to-top-hover.svg") !important;
    }
    .fb-icn,
    .ig-icn,
    .in-icn {
        background-size: 40px 40px !important;
        height: 40px !important;
        margin-left: 8px !important;
        margin-right: 8px !important;
        width: 40px !important;
    }
    .fb-icn {
        background-image: url("../img/fb-icn.svg") !important;
    }
    .fb-icn:hover {
        background-image: url("../img/fb-icn-hover.svg") !important;
    }
    .ig-icn {
        background-image: url("../img/ig-icn.svg") !important;
    }
    .ig-icn:hover {
        background-image: url("../img/ig-icn-hover.svg") !important;
    }
    .in-icn {
        background-image: url("../img/in-icn.svg") !important;
    }
    .in-icn:hover {
        background-image: url("../img/in-icn-hover.svg") !important;
    }
    .homepage-icn {
        background-image: url("../img/home-btn.svg") !important;
        background-size: 40px 40px !important;
        height: 40px !important;
        width: 40px !important;
    }
    .homepage-icn:hover {
        background-image: url("../img/home-btn-hover.svg") !important;
    }
}

/* Styles for large to XL screens */
@media only screen and (min-width: 1351px) and (max-width: 1920px) {
    .nav-btn {
        display: none !important;
    }
    .nav-full {
        display: flex !important;
    }
    .close-menu,
    .close-CV,
    .close-img-zoom-overlay-mobile,
    .close-img-zoom-overlay-desktop,
    .close-overlay {
        background-image: url("../img/close-btn.svg") !important;
        cursor: pointer !important;
        transition: 0.2s !important;
    }
    .close-menu:hover,
    .close-CV:hover,
    .close-img-zoom-overlay-mobile:hover,
    .close-img-zoom-overlay-desktop:hover,
    .close-description:hover,
    .close-overlay:hover {
        background-image: url("../img/close-btn-hover.svg") !important;
    }
    .about-me-wrapper {
        margin: 30px auto 0px auto !important;
        max-width: 860px !important;
        width: 100% !important;
    }
    .top-logo img {
        width: 190px !important;
    }
    .aboutMe-title {
        font-size: 2rem !important;
    }
    .aboutMe-text {
        font-size: 1.25rem !important;
    }
    .aboutMe-invitation {
        font-size: 1.25rem !important;
    }
    .web-design {
        padding-bottom: 150px !important;
    }
    .web-design-title {
        font-size: 2rem !important;
        padding-top: 150px !important;
    }
    .website {
        display: inline-block !important;
        overflow: hidden !important;
        position: relative !important;
        text-align: center !important;
    }
    .website img {
        margin-bottom: 0 !important;
        transition: 1.4s transform !important;
    }
    .website:hover img {
        transform: scale(1.1) !important;
    }
    .website-name {
        background-color: rgba(92, 117, 152, 0.9) !important;
        font-size: 2.5rem !important;
        font-weight: 600 !important;
        opacity: 0 !important;
        padding-bottom: 15px !important;
        padding-top: 15px !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        transition: 0.2s !important;
        width: 100% !important;
    }
    .website:hover .website-name {
        opacity: 1 !important;
    }
    .web-design-wide {
        display: block !important;
    }
    .web-design-mob {
        display: none !important;
    }
    .page_not_found {
        background-image: url("") !important;
        padding-bottom: 0 !important;
        padding-top: 0 !important;
        position: relative !important;
        top: 190px !important;
    }
    .banner-design-title {
        font-size: 2rem !important;
        padding-top: 45px !important;
    }
    .banner {
        width: calc(25%) !important;
    }
    .banner img {
        transition: 1.4s transform !important;
    }
    .banner img:hover {
        transform: rotate(-4deg) scale(1.2) !important;
    }
    .logo-design-title {
        font-size: 2rem !important;
        padding-top: 155px !important;
    }
    .logo-design {
        clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 93%) !important;
        padding-bottom: 150px !important;
    }
    .logo {
        display: none !important;
    }
    .logo_wide {
        border: 5px solid transparent !important;
        box-sizing: border-box !important;
        display: inline !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow: hidden !important;
        width: calc(25%) !important;
    }
    .logo_wide img {
        transition: 1.4s transform !important;
    }
    .logo_wide img:hover {
        transform: rotate(-4deg) scale(1.2) !important;
    }
    .contactMe-title {
        font-size: 2rem !important;
        padding-bottom: 65px !important;
        padding-top: 35px !important;
    }
    .contactMe-input,
    .contactMe-textarea {
        font-size: 1.25rem !important;
    }
    .contactMe-form-message {
        font-size: 1.25rem !important;
    }
    .contactMe-submit-button {
        background-color: #959595 !important;
        font-size: 1.25rem !important;
    }
    .contactMe-submit-button:hover {
        background-color: #5c7598 !important;
    }
    .contact-details,
    .contact-details a {
        font-size: 1.25rem !important;
    }
    .contactMe-content {
        flex-direction: row-reverse !important;
        width: 70% !important;
    }
    .content-form {
        margin-right: 300px !important;
        max-width: 450px !important;
    }
    .thank-you {
        color: #5c7598 !important;
        font-size: 2rem !important;
    }
    .footer {
        height: 70px !important;
    }
    .back-to-top-float {
        bottom: 25px !important;
    }
    .back-to-top,
    .back-to-top-float {
        background-image: url("../img/back-to-top.svg") !important;
        background-size: 40px 40px !important;
        cursor: pointer !important;
        height: 40px !important;
        transition: 0.2s !important;
        width: 40px !important;
    }
    .back-to-top:hover,
    .back-to-top-float:hover {
        background-image: url("../img/back-to-top-hover.svg") !important;
    }
    .fb-icn,
    .ig-icn,
    .in-icn {
        background-size: 40px 40px !important;
        height: 40px !important;
        margin-left: 8px !important;
        margin-right: 8px !important;
        width: 40px !important;
    }
    .fb-icn {
        background-image: url("../img/fb-icn.svg") !important;
    }
    .fb-icn:hover {
        background-image: url("../img/fb-icn-hover.svg") !important;
    }
    .ig-icn {
        background-image: url("../img/ig-icn.svg") !important;
    }
    .ig-icn:hover {
        background-image: url("../img/ig-icn-hover.svg") !important;
    }
    .in-icn {
        background-image: url("../img/in-icn.svg") !important;
    }
    .in-icn:hover {
        background-image: url("../img/in-icn-hover.svg") !important;
    }
    .homepage-icn {
        background-image: url("../img/home-btn.svg") !important;
        background-size: 40px 40px !important;
        height: 40px !important;
        width: 40px !important;
    }
    .homepage-icn:hover {
        background-image: url("../img/home-btn-hover.svg") !important;
    }
}

/* Styles for XL and TV screens */
@media only screen and (min-width: 1921px) {
    .nav-btn {
        display: none !important;
    }
    .nav-full {
        display: flex !important;
    }
    .close-menu,
    .close-CV,
    .close-img-zoom-overlay-mobile,
    .close-img-zoom-overlay-desktop,
    .close-overlay {
        background-image: url("../img/close-btn.svg") !important;
        cursor: pointer !important;
        transition: 0.2s !important;
    }
    .close-menu:hover,
    .close-CV:hover,
    .close-img-zoom-overlay-mobile:hover,
    .close-img-zoom-overlay-desktop:hover,
    .close-description:hover,
    .close-overlay:hover {
        background-image: url("../img/close-btn-hover.svg") !important;
    }
    .about-me-wrapper {
        margin: 30px auto 0px auto !important;
        max-width: 860px !important;
        width: 100% !important;
    }
    .top-logo img {
        width: 190px !important;
    }
    .aboutMe-title {
        font-size: 2rem !important;
    }
    .aboutMe-text {
        font-size: 1.25rem !important;
    }
    .aboutMe-invitation {
        font-size: 1.25rem !important;
    }
    .web-design {
        padding-bottom: 150px !important;
    }
    .web-design-title {
        font-size: 2rem !important;
        padding-top: 150px !important;
    }
    .website {
        display: inline-block !important;
        overflow: hidden !important;
        position: relative !important;
        text-align: center !important;
    }
    .website img {
        margin-bottom: 0 !important;
        transition: 1.4s transform !important;
    }
    .website:hover img {
        transform: scale(1.1) !important;
    }
    .website-name {
        background-color: rgba(92, 117, 152, 0.9) !important;
        font-size: 2.5rem !important;
        font-weight: 600 !important;
        opacity: 0 !important;
        padding-bottom: 15px !important;
        padding-top: 15px !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        transition: 0.2s !important;
        width: 100% !important;
    }
    .website:hover .website-name {
        opacity: 1 !important;
    }
    .web-design-wide {
        display: block !important;
    }
    .web-design-mob {
        display: none !important;
    }
    .page_not_found {
        background-image: url("") !important;
        padding-bottom: 0 !important;
        padding-top: 0 !important;
        position: relative !important;
        top: 190px !important;
    }
    .banner-design-title {
        font-size: 2rem !important;
        padding-top: 45px !important;
    }
    .banner {
        width: calc(25%) !important;
    }
    .banner img {
        transition: 1.4s transform !important;
    }
    .banner img:hover {
        transform: rotate(-4deg) scale(1.2) !important;
    }
    .logo-design-title {
        font-size: 2rem !important;
        padding-top: 155px !important;
    }
    .logo-design {
        clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 93%) !important;
        padding-bottom: 150px !important;
    }
    .logo {
        display: none !important;
    }
    .logo_wide {
        border: 5px solid transparent !important;
        box-sizing: border-box !important;
        display: inline !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow: hidden !important;
        width: calc(25%) !important;
    }
    .logo_wide img {
        transition: 1.4s transform !important;
    }
    .logo_wide img:hover {
        transform: rotate(-4deg) scale(1.2) !important;
    }
    .contactMe-title {
        font-size: 2rem !important;
        padding-bottom: 65px !important;
        padding-top: 35px !important;
    }
    .contactMe-input,
    .contactMe-textarea {
        font-size: 1.25rem !important;
    }
    .contactMe-form-message {
        font-size: 1.25rem !important;
    }
    .contactMe-submit-button {
        background-color: #959595 !important;
        font-size: 1.25rem !important;
    }
    .contactMe-submit-button:hover {
        background-color: #5c7598 !important;
    }
    .contact-details,
    .contact-details a {
        font-size: 1.25rem !important;
    }
    .contactMe-content {
        flex-direction: row-reverse !important;
        width: 70% !important;
    }
    .content-form {
        margin-right: 300px !important;
        max-width: 450px !important;
    }
    .thank-you {
        color: #5c7598 !important;
        font-size: 2rem !important;
    }
    .footer {
        height: 70px !important;
    }
    .back-to-top-float {
        bottom: 25px !important;
    }
    .back-to-top,
    .back-to-top-float {
        background-image: url("../img/back-to-top.svg") !important;
        background-size: 40px 40px !important;
        cursor: pointer !important;
        height: 40px !important;
        transition: 0.2s !important;
        width: 40px !important;
    }
    .back-to-top:hover,
    .back-to-top-float:hover {
        background-image: url("../img/back-to-top-hover.svg") !important;
    }
    .fb-icn,
    .ig-icn,
    .in-icn {
        background-size: 40px 40px !important;
        height: 40px !important;
        margin-left: 8px !important;
        margin-right: 8px !important;
        width: 40px !important;
    }
    .fb-icn {
        background-image: url("../img/fb-icn.svg") !important;
    }
    .fb-icn:hover {
        background-image: url("../img/fb-icn-hover.svg") !important;
    }
    .ig-icn {
        background-image: url("../img/ig-icn.svg") !important;
    }
    .ig-icn:hover {
        background-image: url("../img/ig-icn-hover.svg") !important;
    }
    .in-icn {
        background-image: url("../img/in-icn.svg") !important;
    }
    .in-icn:hover {
        background-image: url("../img/in-icn-hover.svg") !important;
    }
    .homepage-icn {
        background-image: url("../img/home-btn.svg") !important;
        background-size: 40px 40px !important;
        height: 40px !important;
        width: 40px !important;
    }
    .homepage-icn:hover {
        background-image: url("../img/home-btn-hover.svg") !important;
    }
}