/* TABLETS */

@media screen and (min-width: 768px) {
    /* SIDEBAR */
    .with-sidebar {
        float: left;
        width: 61%;
    }
    .sidebar {
        float: left;
        width: 34%;
        margin-left: 5%;
        margin-top: 0.4em;
    }
    /* ALIGNMENTS */
    .alignnone {
        margin: 3em 0;
    }
    .aligncenter {
        margin: 2.2em auto;
    }
    .alignleft,
    .alignright {
        max-width: 50%;
    }
    .alignright {
        float: right;
        margin: 0.4em 0 1em 2em;
    }
    .alignleft {
        float: left;
        margin: 0.4em 2em 1em 0;
    }
    /* TOP10 Popular Posts Widget */
    .tptn_posts_widget img {
        max-height: 94px;
    }
    .tptn_title {
        margin-top: 0.3em;
    }
    /* Forms */
    input:not([type="submit"]):not([type="button"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]),
    select {
        max-width: 360px;
    }
    /* HEADER */
    .nav-menu a {
        margin: 0 12px;
    }
    /* SINGLE PAGE MENU WITH ICONS */
    .menu-with-icons a:before {
        margin-right: 10px;
        font-size: 20px;
        margin-top: -4px;
    }
    /* PAGES */
    .entry-header {
        padding-top: 3em;
    }
    .entry-content {
        margin-top: 2.4em;
    }
    /* PROCESS */
    .row [class^="col-"]:nth-child(n) .process:after,
    .elementor-column:nth-child(n) .process:after {
        display: inline-block;
    }
    .row [class^="col-"]:last-child .process:after,
    .elementor-column:last-child .process:after {
        display: none;
    }
    /* CONTACT FORM */
    .contact-form p {
        width: 50%;
        float: left;
    }
    .contact-form p:nth-of-type(1) {
        padding-right: 32px;
    }
    .contact-form p:nth-of-type(n + 3) {
        width: 100%;
    }
    /* MEDIA GRID */
    .media-grid .media-cell {
        float: left;
        width: 25%;
        padding: 0 18px;
        margin-bottom: 20px;
    }
    /* MEDIA BOX */
    .media-grid .media-cell {
        float: left;
        width: 50%;
    }
    /* TIMELINE */
    .event {
        padding: 0 1em 3em 4em;
    }
    .event h3 {
        margin-left: -2.6em;
    }
    .event h2+p i,
    .event h2+p img {
        font-size: 28px;
        width: 72px;
        line-height: 72px;
        left: -20px;
        top: -26px;
    }
    /* PORTFOLIO SINGLE */
    .portfolio-single .entry-content img,
    .portfolio-single .entry-content .fluid-width-video-wrapper,
    .portfolio-single .entry-content iframe,
    .portfolio-single .entry-content video {
        margin-bottom: 3em;
    }
    /* BLOG */
    /* format chat */
    .chat-row>div {
        display: inline-block;
    }
    .chat-author {
        text-align: right;
        width: 100px;
        margin-top: 5px;
        font-size: 14px;
        text-transform: uppercase;
    }
    /* BLOG SINGLE */
    .related-posts .media-grid .media-cell {
        float: left;
        width: 33.33%;
    }
    /* COMMENTS */
    .comments-area {
        padding: 2em 0 1em;
    }
    .comments-area .commentlist {
        padding-bottom: 2em;
    }
    .comments-area article {
        padding: 0.8em 0;
        margin-top: 1em;
    }
    .comment-meta img {
        max-width: 66px;
        position: absolute;
        top: 14px;
        left: 0;
    }
    .comment-meta,
    .comment-content {
        margin-left: 84px;
    }
    .comments-area ol ol {
        margin-left: 8%;
    }
    /* Comment Form */
    #respond form p {
        margin-bottom: 0;
    }
    .comment-form-author,
    .comment-form-email,
    .comment-form-url {
        float: left;
        width: 30%;
        margin-right: 3%;
    }
    .comment-form-url {
        width: 34%;
        margin-right: 0;
    }
    .form-allowed-tags,
    .form-submit {
        clear: left;
    }
    .form-submit {
        padding-top: 2em;
    }
    /* FOOTER WIDGETS */
    .site-footer .widget-area .widget {
        width: 33.3%;
        float: left;
        padding: 0 1.5em 1em 1em;
    }
    .site-footer .widget-area .widget:first-child {
        padding-left: 0;
    }
    .site-footer .widget-area .widget:nth-child(3n) {
        padding-right: 0;
    }
    /* Social Feed */
    .social-feed ul li {
        width: 50%;
    }
    .social-feed ul li img {
        max-width: 100%;
        width: 100%;
    }
}


/* DESKTOPS */

@media screen and (min-width: 992px) {
    body {
        font-size: 18px;
    }
    .site-middle {
        padding-bottom: 60px;
    }
    /* custom scrollbars for webkit browsers */
    *::-webkit-scrollbar {
        width: 6px;
    }
    *::-webkit-scrollbar-thumb {
        /* background-color: rgba(28, 38, 43, 0.25); */
    }
    *::-webkit-scrollbar:horizontal {
        height: 8px;
    }
    /* HOME PAGE */
    .play-music {
        top: 54px;
        left: 34px;
        bottom: auto;
    }
    /* HOME PAGE */
    .language {
        top: 20px;
        left: 34px;
        bottom: auto;
    }
    .classic-page-layout.ready .home-heading {
        transform: translateX(-12%);
    }
    /* SIDEBAR */
    .with-sidebar {
        width: 68%;
    }
    .sidebar {
        width: 25.8%;
        margin-left: 6%;
    }
    .sidebar .inner-wrapper-sticky {
        padding-bottom: 46px;
    }
    /* SECTION TITLE */
    .section-title,
    .elementor-widget-wrap>.elementor-widget:not(:first-child):not(:only-of-type) .section-title {
        margin: 5em 0 3em;
    }
    .elementor .section-title {
        margin: 3em 0 1em;
    }
    /* MEDIA GRID */
    .media-grid {
        margin-left: -20px;
        margin-right: -20px;
    }
    .related-posts .media-grid {
        margin-left: -10px;
        margin-right: -10px;
    }
    /* CLIENTS */
    html .client img {
        max-height: 40px;
        max-width: 94px;
    }
    /* FUN FACT */
    .fun-fact {
        margin-bottom: 0;
    }
    /* BLOG SINGLE */
    /* .content-area:not(.with-sidebar) .blog-single .featured-image,
	.content-area:not(.with-sidebar) .blog-single .related-posts {
		width: 122%; margin-left: -11%;
		} */
    .blog-single .entry-content {
        max-width: 600px;
    }
    /* Social Feed Widget */
    .social-feed ul li {
        width: 33.3%;
    }
    /* BUTTONS */
    .button.huge {
        font-size: 13px;
        padding: 24px 44px;
    }
    /* portfolio single nav  */
    .portfolio-nav {
        margin-bottom: 3em;
    }
    /* COMMENTS */
    .comment-content p {
        font-size: 16px;
    }
}


/* HIGH RES DESKTOPS */

@media screen and (min-width: 1300px) {
    /* increase column gutter on large screens */
    .row {
        margin-left: -30px;
        margin-right: -30px;
    }
    .col-xs-1,
    .col-sm-1,
    .col-md-1,
    .col-lg-1,
    .col-xs-2,
    .col-sm-2,
    .col-md-2,
    .col-lg-2,
    .col-xs-3,
    .col-sm-3,
    .col-md-3,
    .col-lg-3,
    .col-xs-4,
    .col-sm-4,
    .col-md-4,
    .col-lg-4,
    .col-xs-5,
    .col-sm-5,
    .col-md-5,
    .col-lg-5,
    .col-xs-6,
    .col-sm-6,
    .col-md-6,
    .col-lg-6,
    .col-xs-7,
    .col-sm-7,
    .col-md-7,
    .col-lg-7,
    .col-xs-8,
    .col-sm-8,
    .col-md-8,
    .col-lg-8,
    .col-xs-9,
    .col-sm-9,
    .col-md-9,
    .col-lg-9,
    .col-xs-10,
    .col-sm-10,
    .col-md-10,
    .col-lg-10,
    .col-xs-11,
    .col-sm-11,
    .col-md-11,
    .col-lg-11,
    .col-xs-12,
    .col-sm-12,
    .col-md-12,
    .col-lg-12 {
        padding-left: 30px;
        padding-right: 30px;
    }
    /* BLOG */
    .content-area:not(.with-sidebar) .post .entry-content>p img:not(.alignleft):not(.alignright),
    .content-area:not(.with-sidebar) .blog-single .entry-content .gallery,
    .entry-content>.gallery,
    .entry-content .wp-block-embed,
    .entry-content .wp-block-gallery {
        width: 134%;
        max-width: none;
        margin-left: -17%;
    }
    /* ALLIGNMENTS */
    .post .alignright,
    .post .wp-caption.alignright {
        max-width: 66%;
        margin-right: -101px;
        margin-left: 2em;
    }
    .post .alignleft,
    .post .wp-caption.alignleft {
        max-width: 66%;
        margin-left: -101px;
        margin-right: 2em;
    }
}

@media (max-width: 321px) {
    .head-image,
    .home-bg-logo {
        height: 216px;
    }
    .eye-container {
        position: absolute;
        top: 70px;
        left: 35px;
    }
    .eye-container lottie-player {
        width: 45px;
        height: 45px;
    }
}

.home-bg-logo {
    margin-top: 5vh;
}

@media (min-width: 322px) and (max-width: 425px) {
    .home-bg-logo {
        margin-top: 100px;
    }
    .head-image,
    .home-bg-logo {
        height: 216px;
    }
    .eye-container {
        position: absolute;
        top: 70px;
        left: 35px;
    }
    .eye-container lottie-player {
        width: 45px;
        height: 45px;
    }
}

@media (min-width: 426px) and (max-width: 600px) {
    .home-bg-logo {
        margin-top: 15vh;
    }
    .head-image,
    .home-bg-logo {
        height: 300px;
    }
    .eye-container {
        position: absolute;
        top: 100px;
        left: 50px;
    }
    .eye-container lottie-player {
        width: 50px;
        height: 50px;
    }
}

@media (min-width: 601px) and (max-width: 1439px) {
    .head-image,
    .home-bg-logo {
        height: 500px;
    }
    .eye-container {
        position: absolute;
        top: 160px;
        left: 75px;
    }
    .eye-container lottie-player {
        width: 80px;
        height: 80px;
    }
}

@media (min-width: 1440px) and (max-width: 2559px) {
    .head-image,
    .home-bg-logo {
        height: 660px;
    }
    .eye-container {
        position: absolute;
        top: 209px;
        left: 99px;
    }
    .eye-container lottie-player {
        width: 105px;
        height: 105px;
    }
}

@media (min-width: 2560px) {
    .eye-container {
        position: absolute;
        top: 33%;
        left: 6%;
        width: 50px;
    }
}

@keyframes fadeIn {
    0% {
        height: 0;
    }
    100% {
        height: 100px;
    }
}

.squares-container {
    width: 200px;
    margin: auto;
}