/**
Theme Name: Web Ally Child Theme
Author: Webally
Author URI: http://webally.gr
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: web-ally-child-theme
Template: astra
*/




a {
    text-decoration: none !important;
}

@media only screen and (max-width: 768px){
    html,
    body{
    width:100%;
    overflow-x:hidden;
    }
}





/* gia to instagram styles */
.instagram-photo-fetcher {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between; /* Ensure even spacing */
}

.instagram-photo {
    flex: 1 1 calc(25% - 10px); /* Each item takes 25% of the container minus the gap */
    box-sizing: border-box;
    max-width: calc(25% - 10px); /* Ensure max-width to align items properly */
    position: relative; /* Needed for the hover effect */
    overflow: hidden; /* Ensure the scaling effect does not overflow */
}

.instagram-photo a {
    display: block;
    position: relative; /* Needed for the hover effect */
    overflow: hidden; /* Ensure the scaling effect does not overflow */
}

.instagram-photo img,
.instagram-photo video {
    max-width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease; /* Smooth transition for the hover effect */
}

.instagram-photo a:hover img,
.instagram-photo a:hover video {
    transform: scale(1.1); /* Scale effect on hover */
}

.instagram-photo a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0); /* Initially transparent */
    transition: background-color 0.4s ease; /* Smooth transition for the hover effect */
}



.instagram-photo .media-type-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2; /* Ensure it appears above the photo */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.4s ease; /* Smooth transition for the hover effect */
}

.instagram-photo a:hover .media-type-icon {
    opacity: 1; /* Show the icon on hover */
}

@media (max-width: 768px) {
    .instagram-photo {
        flex: 1 1 calc(50% - 10px); /* Each item takes 50% of the container minus the gap */
        max-width: calc(50% - 10px); /* Ensure max-width to align items properly */
    }

    .instagram-photo a:hover img,
    .instagram-photo a:hover video {
        transform: none; /* No scale effect on hover */
    }

    .instagram-photo a::after {
        background-color: rgba(0, 0, 0, 0); /* No dark overlay on hover */
    }

    .instagram-photo .media-type-icon {
        opacity: 1; /* Always visible on mobile devices */
    }
}



.instagram-photo-fetcher {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    justify-content: center; /* Ensure even spacing */
}

@media (max-width:600px) {
	.instagram-photo-fetcher {
		gap: 5px;
		justify-content: center;
	}
}

.instagram-photo {
    flex: 1 1 calc(25% - 10px); 
    box-sizing: border-box;
    max-width: calc(25% - 10px); 
}
@media (max-width:600px) {
	.instagram-photo {
    flex: 1 1 calc(50% - 10px); 
    box-sizing: border-box;
    max-width: calc(50% - 10px); 
 }
}

.instagram-photo img,
.instagram-photo video {
    max-width: 100%;
	width: 100%;
    height: 500px;
	object-fit:cover;
    display: block;
}

@media (max-width:600px) { 
   .instagram-photo img,
   .instagram-photo video {
	  width: 100%;
    height: 200px;
   }
}



/* end gia to instagram styles */