/*
==============================================
	ALL ADVERTISE Classes
	3 Blocks:
	.ads, .ads_logo, ads_header
================================================
*/

/*
==============================================
	1. Main ADVERTISES within the content of pages
 	   Might content Images, Titles and Texts, with links
	Places: 
	- Top and Bottom of the aside column
 	- Within Text (for superior version)
 I================================================
*/
.ads {
    padding: 0;
    text-align: center;
}

.ads h5 {
    font-size: 0.8em;
    margin: 0;
    padding: 0 5px;
    text-align: right;
}

.ads .item,
.ads .common {
    border: 1px solid #e9e9e9;
    background: #fff;
    border-radius: 5px;
    padding: 0;
    margin: 2rem 0;
}

.ads ul,
.ads .common {
    margin: 1px 0;
}

.ads .item:first-of-type {
    margin-top: 0;
}

.ads h3 {
    margin: 0;
    padding: 0.5rem;
}

.ads img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.ads ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ads .text_normal {
    font-size: 0.95em !important;
    line-height: 1.4;
    padding: 0 4%
}

.ads>ul>li>a {
    position: relative;
    padding: 0 0 0 0.8em;
}

.ads>ul>li>a::before {
    content: "\2219";
    position: absolute;
    left: 0;
    top: 0.1em;
}

.ads ul li div {
    text-align: center;
}

.ads ul li div a {
    padding: 0;
}


/*
==============================================
	2. Logo ads
	Advertises on the right (left) of the site logo
	- Either an image or a Header with text, never both
================================================
*/

.ads_logo {
    padding: 0;
    text-align: right;
    color: var(--header-text-color);
    display: none;
}

/* remove default margin-bottom*/
.ads_logo .image_center {
    margin: 0 !important;
}

.ads_logo img {
    display: block;
    height: 2rem;
    width: auto;
    margin: 0;
}

.ads_logo h3,
.ads_logo h3 a {
    line-height: 110%;
    font-size: 1.1rem;
    font-weight: normal;
    margin: 0.4em 0;
    padding: 0;
    color: var(--header-link-color);
}

.ads_logo h3 a:hover {
    color: var(--header-link-hover);
}

.ads_logo div,
.ads_logo p {
    font-size: 0.9em;
    text-align: right;
    line-height: 1.25;
    padding: 0;
    margin: 0;
}

@media only screen and (min-width: 768px) {

    .ads_logo {
        display: block
    }
}

/*
==============================================
	3. Header ads
	Advertises on the top of page, above the content
	of the First Page
	- basicaly, one or two big images
================================================
*/
.ads_header {
    margin: 0;
}

/* Expands advertising card(s) to the width of window
*/
.ads_header .grid_cards {
    padding: 0 !important;
    margin: 0 !important;
    gap: 0.5rem;
}

.ads_header .grid_cards figure {
    flex: 1;
    margin-bottom: 0;
    overflow: hidden;
}

/*
    For a sole advertice on header
    - removes .grid_cards
    .ads_header
        DIV
            FIGURE.ads_header_wide
                IMG
*/
.ads_header_wide {
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.ads_header_wide img {
    width: 100%;
    height: auto;
}



/*
    In Footer Top advertises
*/


.in_footer_ads {
    padding-bottom: 3rem;
}

.in_footer_ads h4 {
    text-align: center;
}

.in_footer_ads img {
    display: block;
    max-width: auto;
    height: auto;
    margin: auto 0;
}

.in_footer_ads .text_notes {
    text-align: center;
    padding: 0.5rem 20%;
}

@media (min-width: 1440px) {
    .in_footer_ads img {
        margin: auto 6%;
    }
}

@media (min-width: 1600px) {
    .in_footer_ads img {
        margin: auto 12%;
    }
}


/*
    Circular scrolling using CSS and JavaScript
    Called by the PHP function get_Cycler_Advertises_Modern()
*/ 

.cycler-viewport {
    overflow: hidden;
    width: 100%;

    max-width: 1280px;
    border: 0 solid #ccc;
    padding: 0;
    margin: 0 auto;
}

.cycler-track {
    display: flex;
    align-items: stretch;
    will-change: transform;
    transition: transform 0.016s linear;
    --scroll-speed: 1.2;
}

.cycler-card {
    flex: 0 0 auto;
    width: 300px;
    margin: 0 .5rem;
    text-align: center;
    background: #f6f6f6;
    border: 1px solid #eee;
}

.cycler-card img {
    max-width: 100%;
    height: auto;
}

.cycler-card figcaption {
    padding: 0 0.75rem;
    font-style: normal;
    font-size: 0.8rem;
    line-height: 1.4;
}