/* 

Style Sheet for Ponte di Archimede Produzioni 2025 - www.pontediarchimedeprodu<ioni.it

Design and Development by Svevo Romano for Mavo Studio (www.mavostudio.com) - ©2025 All Rights Reserved

NOTE

# Corporate Colors


Arancio Player: #F46747
Azzurro footer: #4399C8
Arancio chiaro: #FF8C57
Bianco avorio: #E8D8BA
Grigio testi: #333333



# Corporate Fonts
Sans: Helvetica Neue

*/



/* PX to EM table


1px - 0.0625em
2px - 0.125em
3px - 0.1875em
4px - 0.25em
5px - 0.3125em
6px - 0.375em
7px - 0.4375em
8px - 0.5em
9px - 0.5625em
10px - 0.625em
11px - 0.6875em
12px - 0.75em
13px - 0.8125em
14px - 0.875em
15px - 0.9375em
17px - 1.0625em	
18px - 1.125em	
19px - 1.1875em	
20px - 1.250em
21px - 1.3125em	
22px - 1.375em	
23px - 1.4375em	
24px - 1.5em	
25px - 1.5625em	
26px - 1.625em	
27px - 1.6875em	
28px - 1.75em	
29px - 1.8125em	
30px - 1.875em	
31px - 1.9375em
32px - 2em
33px - 2.0625em
34px - 2.125em
35px - 2.1875em
36px - 2.25em
37px - 2.3125em
38px - 2.375em
39px - 2.4375em
40px - 2.5em

	
*/



/***************/
/*** G-FONTS ***/
/***************/





/*****************/
/*** VARIABLES ***/
/*****************/


/* Tag colors */
:root {
  --tag-musica: #ffd580;         /* warm pastel yellow */
  --tag-teatro: #f5a3a3;         /* soft rose */
  --tag-agricoltura: #b8e986;    /* fresh green */
  --tag-graffiti: #a0c4ff;       /* light sky blue */
  --tag-pittura: #ffb5a7;        /* coral peach */
  --tag-letteratura: #cdb4db;    /* lilac */
  --tag-poesia: #ffe1a8;         /* light amber */
  --tag-digital-art: #9bf6ff;    /* aqua pastel */
  --tag-pinkcarpetstudio: #fbb1d0; /* pastel pink */
  --tag-film: #b2f7ef;           /* pastel teal */
}









/**
 *                                                      
 *     ▄▄▄▄▄▄                                           
 *     ██▀▀▀▀██                                  ██     
 *     ██    ██   ▄████▄   ▄▄█████▄   ▄████▄   ███████  
 *     ███████   ██▄▄▄▄██  ██▄▄▄▄ ▀  ██▄▄▄▄██    ██     
 *     ██  ▀██▄  ██▀▀▀▀▀▀   ▀▀▀▀██▄  ██▀▀▀▀▀▀    ██     
 *     ██    ██  ▀██▄▄▄▄█  █▄▄▄▄▄██  ▀██▄▄▄▄█    ██▄▄▄  
 *     ▀▀    ▀▀▀   ▀▀▀▀▀    ▀▀▀▀▀▀     ▀▀▀▀▀      ▀▀▀▀  
 *                                                      
 *                                                      
 */


/* === Modern CSS Reset (2025) === */

/* 1. Use a more intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
  padding: 0;
}

/* 3. Allow percentage-based heights */
html, body {
  height: 100%;
}

/* 4. Improve text rendering */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* 5. Balance line wrapping for headings and paragraphs */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 6. Remove list styles on ul, ol elements with a class */
ul[class],
ol[class] {
  list-style: none;
}

/* 7. Make images easier to work with */
img, picture, video, canvas, svg {
  display: block; /* Attenzione i reset moderni, per garantire maggiore affidabilità sui layout a griglia applicano display: block a tutte le immagini. In situazioni dove le immagini servono inline questa regola si deve sovrascrivere */
  max-width: 100%;
  height: auto;
}

/* 8. Inherit fonts for inputs and buttons */
input, button, textarea, select {
  font: inherit;
}

/* 9. Remove animations/transitions for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 10. Optional: Modern root defaults */
:root {
  scroll-behavior: smooth;
}











/**
 *                                                                          
 *        ▄▄▄▄                                                     ▄▄▄▄     
 *      ██▀▀▀▀█                                                    ▀▀██     
 *     ██         ▄████▄   ██▄████▄   ▄████▄    ██▄████   ▄█████▄    ██     
 *     ██  ▄▄▄▄  ██▄▄▄▄██  ██▀   ██  ██▄▄▄▄██   ██▀       ▀ ▄▄▄██    ██     
 *     ██  ▀▀██  ██▀▀▀▀▀▀  ██    ██  ██▀▀▀▀▀▀   ██       ▄██▀▀▀██    ██     
 *      ██▄▄▄██  ▀██▄▄▄▄█  ██    ██  ▀██▄▄▄▄█   ██       ██▄▄▄███    ██▄▄▄  
 *        ▀▀▀▀     ▀▀▀▀▀   ▀▀    ▀▀    ▀▀▀▀▀    ▀▀        ▀▀▀▀ ▀▀     ▀▀▀▀  
 *                                                                          
 *                                                                          
 */


/* Elements */

html {
    overflow-x: hidden;
}

body {
    margin: 0;
    background: url("../images/pdap25_background_texture.jpg") #e5d5b7 repeat;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

h1#single_page_title {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3em;
    text-align: center;
    margin: 0 auto 20px auto;
    padding: 0;
}

a:link, a:visited {
    color: #FF8C57;
}

a:hover {
    color: #e7a181;
    transition: color .18s ease;
}

p {
    margin-bottom: 20px;
   
}

h2 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(1.875em, calc(1.2em + 1vw), 2.5em);
    margin: 0 0 20px 0;
    padding: 0;
    text-align: left;
}


/* HeLpEr Classes */


/* Arrow before downloads links - N.B. ::before and ::after pseudo 
elements are *children* not siblings of the element:

<a class="download_link">
  ::before
  actual text/content
  ::after
</a>

*/
.download_link {
    /* font-weight: 700; */
    display: inline-flex;
    align-items: center; /* middle align text + icon */
    gap: 6px; /* space between icon and text */
    margin: 0 0 14px 0;
}

.download_link::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url('../images/download_link_icon.png') no-repeat center / contain;
}

.download_link.eng::after {
    content: "";
    display: inline-block;
    width: 24px;
    height: 18px;
    background: url('../images/flags/gb.svg') no-repeat center / contain;
    margin-left: 6px;
}

.download_link.ita::after {
    content: "";
    display: inline-block;
    width: 24px;
    height: 18px;
    background: url('../images/flags/it.svg') no-repeat center / contain;
    margin-left: 6px;
}












/**
 *                                                                
 *     ▄▄                                                         
 *     ██                                                  ██     
 *     ██         ▄█████▄  ▀██  ███   ▄████▄   ██    ██  ███████  
 *     ██         ▀ ▄▄▄██   ██▄ ██   ██▀  ▀██  ██    ██    ██     
 *     ██        ▄██▀▀▀██    ████▀   ██    ██  ██    ██    ██     
 *     ██▄▄▄▄▄▄  ██▄▄▄███     ███    ▀██▄▄██▀  ██▄▄▄███    ██▄▄▄  
 *     ▀▀▀▀▀▀▀▀   ▀▀▀▀ ▀▀     ██       ▀▀▀▀     ▀▀▀▀ ▀▀     ▀▀▀▀  
 *                          ███                                   
 *                                                                
 */

#site_wrapper {
    max-width: 1280px;
    /* Was 1200 */
    margin: 0 auto 0 auto;
    padding-bottom: 4%;
    /* background: #eee5d1; */ /* Debugging */
}

.wrapped_contents {
    margin: 0;
    padding: 0 20px;
    max-width: 960px;
    margin: 0 auto 0 auto;
    /* background: #f1fff0; */ /* Debugging */
}





/***** GENERAL HEADER *****/

header {
    position: relative;
    /* Height of the header */
    padding: 40px 0 0 0;
    margin: 0;
}

a#logo_header {
    display: block;
    margin: 0 0 0 27px;
    width: 11%;
    min-width: 70px;
}

a#logo_header img {
    width: 100%;
    height: auto;
}


/* Menu open & close icons */

a#hamburger_menu_icon {
    position: absolute;
    top: 40px;
    right: 30px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    width: 30px;
    height: auto;
}

a#hamburger_menu_icon img {
    width: 100%;
    height: auto;
}

a#close_menu_icon {
    position: absolute;
    top: 40px;
    right: 30px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    width: 30px;
    height: auto;
}

a#close_menu_icon img {
    width: 100%;
    height: auto;
}

a#close_menu_icon {
    display: none;
}


/* Header menu */
#header_menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    will-change: opacity, transform;
    pointer-events: none;
    background: #ff8c57;
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 9;
    padding: 50px 50px 30px 30px;
    color: #333333;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2em;
}

#header_menu.show {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
    pointer-events:auto;
}

#header_menu ul {
    margin: 0;
    padding: 0;
}

#header_menu ul li {
    list-style: none;
    margin: 0 0 6px 0;
    padding: 0;
    display: block;
}

#header_menu ul li a {
    color: #333333;
    text-decoration: none;
}

#header_menu ul li a:hover {
    color: #e8d8ba;
}




/***** HERO *****/

section#hero {
    padding: 10% 0 0 0;
}

#hero img#page_title {
    width: 50%;
    min-width: 280px;
    height: auto;
    display: block;
    margin: 0 auto 50px auto;
}

#hero img#page_banner {
    width: 60%;
    min-width: 370px;
    height: auto;
    display: block;
    margin: 0 auto 30px auto;
}



/* Gallery with Swiper */

#gallery_wrapper {
    margin: 4% calc(50% - 50vw) 50px calc(50% - 50vw);
    padding: 20px 0;
    
    text-align: center;
    background: #ff8c57;
}

/* Swiper specific stuff */

.swiper {
    width: 800px;
    max-width: 100%;
    height: 400px;
}

.swiper-slide {
    display:flex;
    align-items:center;
    justify-content:center;
}

.swiper-slide img {
    width:100%;
    height:100%;
    object-fit: contain;
    display:block;
}

/* change arrow color */
.swiper-button-prev,
.swiper-button-next {
  color: #4399c8;   /* any color you want */
  font-size: 24px;    /* adjust arrow size if needed */
}




/***** GRID STUFF *****/


/* container has a max-width; this breaks out to the viewport */
.full_bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* if your wrapper adds horizontal padding, neutralize it here */
  padding-inline: 0;
}



/* Page contents grids */

/* 1 column */
#page_contents_1col {
    font-size: 1.125em;
    margin: 20px auto 40px auto;
    padding: 0;
    max-width: 600px;
}

#page_contents_1col ul.links_list {
    margin: 0;
    padding: 0;
}

#page_contents_1col ul.links_list li {
    list-style: none;
    margin: 0 0 10px 0;
    padding: 0;
}

/* 2 columns */
#page_contents_2cols {
    font-size: 1.125em;
    margin: 20px auto 40px auto;
    padding: 0;
    /* width: 90%;
    max-width: 1080px; */
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}








/* Generic Projects Grid */

section#projects_grid {
    margin: 40px auto 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.project_item {
    background: #ff8c57;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    text-align: center;
    color: #333;
}

.project_item h3 {
    text-align: left;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2em;
    margin: 20px 0 10px 0;
}

.project_item p {
    text-align: left;
    font-size: 0.875em;
    margin-top: 0;
}

.project_item p.read_more a:link, .project_item p.read_more a:visited {
    color: #000000;
}

.project_item p.read_more a:hover {
    color: #414141;
}

.project_item img {
    display: block;
    width: 100%;
    height: auto
}



/**
 *                                                                                                        
 *        ▄▄▄▄                                                                                            
 *      ██▀▀▀▀█                                                                          ██               
 *     ██▀        ▄████▄   ████▄██▄  ██▄███▄    ▄████▄   ██▄████▄   ▄████▄   ██▄████▄  ███████   ▄▄█████▄ 
 *     ██        ██▀  ▀██  ██ ██ ██  ██▀  ▀██  ██▀  ▀██  ██▀   ██  ██▄▄▄▄██  ██▀   ██    ██      ██▄▄▄▄ ▀ 
 *     ██▄       ██    ██  ██ ██ ██  ██    ██  ██    ██  ██    ██  ██▀▀▀▀▀▀  ██    ██    ██       ▀▀▀▀██▄ 
 *      ██▄▄▄▄█  ▀██▄▄██▀  ██ ██ ██  ███▄▄██▀  ▀██▄▄██▀  ██    ██  ▀██▄▄▄▄█  ██    ██    ██▄▄▄   █▄▄▄▄▄██ 
 *        ▀▀▀▀     ▀▀▀▀    ▀▀ ▀▀ ▀▀  ██ ▀▀▀      ▀▀▀▀    ▀▀    ▀▀    ▀▀▀▀▀   ▀▀    ▀▀     ▀▀▀▀    ▀▀▀▀▀▀  
 *                                   ██                                                                   
 *                                                                                                        
 */



/* Contact form */ 

.contact_form {
    width: 100%;
}

.contact_form input,
.contact_form textarea {
  display: block;
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.75rem;
  border: 2px solid #ff8c57;
  border-radius: 4px;
  font-size: 1rem;
  color: #333;
  background-color: transparent;
}

.contact_form input::placeholder,
.contact_form textarea::placeholder {
  color: #aaa;
}

.contact_form textarea {
  min-height: 120px;
  resize: vertical;
}

.submit_btn {
  display: block;
  width: 100%;
  background-color: #ff8c57;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.9rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
}

.submit_btn:hover {
  opacity: 0.9;
}



/* Social icons list */ 

div#social_icons ul {
  display: flex;
  gap: 14px;
  justify-content: left;
  align-items: center;
  padding: 0;
  margin: 0 0 30px 0;
  list-style: none;
}

div#social_icons ul li img {
    width: auto;
    height: 38px;
}



/***** TAGS *****/

ul.tags {
    font-size: 0.875em;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 40px 0;
    padding: 0;
}

ul.tags li {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background: #eee;
    border-radius: 4px;
    white-space: normal; /* allows multi-word wrapping */
}

/* Assign background colors */
.tags li.musica { background: var(--tag-musica); }
.tags li.teatro { background: var(--tag-teatro); }
.tags li.agricoltura { background: var(--tag-agricoltura); }
.tags li.graffiti { background: var(--tag-graffiti); }
.tags li.pittura { background: var(--tag-pittura); }
.tags li.letteratura { background: var(--tag-letteratura); }
.tags li.poesia { background: var(--tag-poesia); }
.tags li.digital-art { background: var(--tag-digital-art); }
.tags li.pinkcarpetstudio { background: var(--tag-pinkcarpetstudio); }
.tags li.film { background: var(--tag-film); }










/**
 *                                                      
 *     ▄▄▄▄▄▄                                           
 *     ██▀▀▀▀█▄                                         
 *     ██    ██   ▄█████▄   ▄███▄██   ▄████▄   ▄▄█████▄ 
 *     ██████▀    ▀ ▄▄▄██  ██▀  ▀██  ██▄▄▄▄██  ██▄▄▄▄ ▀ 
 *     ██        ▄██▀▀▀██  ██    ██  ██▀▀▀▀▀▀   ▀▀▀▀██▄ 
 *     ██        ██▄▄▄███  ▀██▄▄███  ▀██▄▄▄▄█  █▄▄▄▄▄██ 
 *     ▀▀         ▀▀▀▀ ▀▀   ▄▀▀▀ ██    ▀▀▀▀▀    ▀▀▀▀▀▀  
 *                          ▀████▀▀                     
 *                                                      
 */













/*****************/
/*** HOME PAGE ***/
/*****************/



/* HEADER LOGO NELLA HOME*/
div#logo_header_home {
    width: 100%;
}

div#logo_header_home a {
    margin: 6% auto 0 auto;
    display: block;
    width: 35%;
    height: auto;
    min-width: 270px;
    max-width: 600px;
}

div#logo_header_home img {
    margin: 0 auto 0 auto;
    display: block;
    width: 100%;
    height: auto;
}






img#fiume_monti {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.map {
    position: relative;
    width: 100%;
    aspect-ratio: 1084 / 1759;
    max-width: 1280px;
    margin: 0 auto 0 auto;
    /* your image’s W/H */
}

.map a {
    display: block;
    position: absolute;
    z-index: 3;
    cursor: pointer;
    line-height: 0;
}

.map a img {
    display: block;
    width: 100%;
    height: auto;
}

.overlay {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

a#disegno_collaborations {
    left: 5.6%;
    top: 15.37%;
    width: 40%;
}

a#scritta_collaborations {
    left: 5.6%;
    top: 30%;
    width: 34%;
}

a#disegno_radioeffetto48 {
    left: 51%;
    top: 18.3%;
    width: 40%;
}

a#scritta_radioeffetto48 {
    left: 56%;
    top: 39%;
    width: 32%;
}

a#disegno_pinkarpetstudio {
    left: 4.2%;
    top: 40%;
    width: 44%;
}

a#scritta_pinkarpetstudio {
    left: 5.6%;
    top: 54%;
    width: 31%;
}

a#disegno_productions {
    left: 50%;
    top: 50%;
    width: 47%;
}

a#scritta_productions {
    left: 62%;
    top: 65%;
    width: 32%;
}

a#disegno_effetto48 {
    left: 5%;
    top: 63%;
    width: 50%;
}

a#scritta_effetto48 {
    left: 10%;
    top: 77%;
    width: 25%;
}

a#scritta_archivio {
    display: none; 
    left: 50%;
    top: 93%;
    transform: translateX(-47%);
    width: 25%;
}




/***********************/
/*** RADIO EFFETTO48 ***/
/*******************é***/






/* Podcasts Grid */

section#podcasts_grid {
    margin: 40px auto 0 auto;
    padding: 0 20px;
    max-width: 960px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.podcast_item {
    background: #f46747;
    border: #000 solid 1px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    text-align: center;
    color: #333;
}

.podcast_item h3 {
    text-align: left;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2em;
    margin: 20px 0 10px 0;
}

.podcast_item p {
    text-align: left;
    font-size: 0.875em;
    margin-top: 0;
}



.podcast_item img {
    display: block;
    width: 100%;
    height: auto
}


/* ######## PER ADESSO USIALO IL PLAYER DI MIXCLOUD

div#controlli_player {
    text-align: right;
    margin-top: 10px;
}

div#controlli_player img {
    display: inline;
    width: 36px;
    height: auto;
    margin-right: 10px;
    cursor: pointer;

}
*/










/*****************/
/***** FOOTER ****/
/*****************/

footer {
    padding: 30px 0 30px 0;
    width: 100%;
    text-align: center;
    height: auto;
    /* Height of the footer */
    background: #4399c8;
}

footer a:link, footer a:visited  {
    color: #0d2a4a;
}
footer a:hover {
    color: #193d64;
    transition: color .18s ease;
}

footer p {
    margin: 0;
}

#inner_footer {
    position: relative;
    max-width: 1200px;
    min-height: 250px;
    margin: 0 auto 0 auto;
}

div#footer_contact_details {
    font-size: 0.750em;
    line-height: 1.250em;
    color: #fff;
}


nav#footer_nav {
    margin: 30px auto 20px auto;
    padding: 0;
}

nav#footer_nav ul {
    padding: 0px;
    margin: 0;
    font-size: 0.750em;
}

nav#footer_nav ul li {
    list-style: none;
    display: inline;
    margin: 10px;
    padding: 0px;
}

nav#footer_nav ul li a:link {
    text-decoration: none;
    color: #fff;
}

nav#footer_nav ul li a:visited {
    text-decoration: none;
    color: #fff;
}

nav#footer_nav ul li a:hover {
    text-decoration: none;
    color: #fff;
}













/**
 *                                                                                              
 *     ▄▄▄  ▄▄▄              ▄▄▄▄    ▄▄    ▄▄  ▄▄▄▄▄▄▄▄  ▄▄▄▄▄▄     ▄▄▄▄▄▄   ▄▄▄▄▄▄▄▄    ▄▄▄▄   
 *     ███  ███             ██▀▀██   ██    ██  ██▀▀▀▀▀▀  ██▀▀▀▀██   ▀▀██▀▀   ██▀▀▀▀▀▀  ▄█▀▀▀▀█  
 *     ████████            ██    ██  ██    ██  ██        ██    ██     ██     ██        ██▄      
 *     ██ ██ ██            ██    ██  ██    ██  ███████   ███████      ██     ███████    ▀████▄  
 *     ██ ▀▀ ██            ██    ██  ██    ██  ██        ██  ▀██▄     ██     ██             ▀██ 
 *     ██    ██     ██      ██▄▄██▀  ▀██▄▄██▀  ██▄▄▄▄▄▄  ██    ██   ▄▄██▄▄   ██▄▄▄▄▄▄  █▄▄▄▄▄█▀ 
 *     ▀▀    ▀▀     ▀▀       ▀▀▀██     ▀▀▀▀    ▀▀▀▀▀▀▀▀  ▀▀    ▀▀▀  ▀▀▀▀▀▀   ▀▀▀▀▀▀▀▀   ▀▀▀▀▀   
 *                               ▀                                                              
 *                                                                                              
 */



/**
 *                                  
 *       ▄▄▄▄      ▄▄▄▄      ▄▄▄▄   
 *      ██▀▀▀█    ██▀▀██    ██▀▀██  
 *     ██ ▄▄▄    ██    ██  ██    ██ 
 *     ███▀▀██▄  ██ ██ ██  ██ ██ ██ 
 *     ██    ██  ██    ██  ██    ██ 
 *     ▀██▄▄██▀   ██▄▄██    ██▄▄██  
 *       ▀▀▀▀      ▀▀▀▀      ▀▀▀▀   
 *                                  
 *                                  
 */
                              

@media (min-width: 600px) {

    a#logo_header {
    margin: 0 auto 0 auto;
    }





 

    #footer_contact_details {
    position: absolute;
    font-size: 0.8em;
    text-align: left;
    padding: 5px;
    color: white;
    bottom: 30px;
    left: 30px;
    }

    footer {
    width: 100%;
    height: auto;
    /* Height of the footer */
    background: #4399c8;
    }

    div#social_icons_footer {
    margin: 0;
    padding: 0;
    position: absolute;
    right: 30px;
    bottom: 90px;
    }

    nav#footer_nav {
    margin: 0;
    padding: 0;
    position: absolute;
    right: 22px;
    bottom: 30px;
    }

}






/**
 *                                  
 *     ▄▄▄▄▄▄▄▄    ▄▄▄▄      ▄▄▄▄   
 *     ▀▀▀▀▀███   ██▀▀▀█   ▄██▀▀██▄ 
 *         ▄██   ██ ▄▄▄    ██▄  ▄██ 
 *         ██    ███▀▀██▄   ██████  
 *        ██     ██    ██  ██▀  ▀██ 
 *       ██      ▀██▄▄██▀  ▀██▄▄██▀ 
 *      ▀▀         ▀▀▀▀      ▀▀▀▀   
 *                                  
 *                                  
 */


@media (min-width: 768px) {

    /* 2 columns */
    #page_contents_2cols {
        grid-template-columns: 0.66fr 0.34fr;
    }

    /*
    .wrapped_contents {
        padding: 0;
    }
    */

}




/**
 *                                            
 *       ▄▄▄       ▄▄▄▄      ▄▄▄       ▄▄▄▄   
 *      █▀██      ██▀▀██    █▀██      ██▀▀██  
 *        ██     ██    ██     ██     ██    ██ 
 *        ██     ██ ██ ██     ██     ██ ██ ██ 
 *        ██     ██    ██     ██     ██    ██ 
 *     ▄▄▄██▄▄▄   ██▄▄██   ▄▄▄██▄▄▄   ██▄▄██  
 *     ▀▀▀▀▀▀▀▀    ▀▀▀▀    ▀▀▀▀▀▀▀▀    ▀▀▀▀   
 *                                            
 *                                            
 */


@media (min-width: 1010px) {



    .wrapped_contents {
        padding: 0;
    }
}



/**
 *                                            
 *       ▄▄▄         ▄▄▄       ▄▄▄     ▄▄▄▄   
 *      █▀██        ▄███      ▄███    ██▀▀██  
 *        ██       █▀ ██     █▀ ██   ██    ██ 
 *        ██     ▄█▀  ██   ▄█▀  ██   ██ ██ ██ 
 *        ██     ████████  ████████  ██    ██ 
 *     ▄▄▄██▄▄▄       ██        ██    ██▄▄██  
 *     ▀▀▀▀▀▀▀▀       ▀▀        ▀▀     ▀▀▀▀   
 *                                            
 *                                            
 */








 /**
 *                                            
 *       ▄▄▄       ▄▄▄▄      ▄▄▄▄      ▄▄▄▄   
 *      █▀██      ██▀▀██   ▄██▀▀██▄   ██▀▀██  
 *        ██     ██    ██  ██▄  ▄██  ██    ██ 
 *        ██     ██ ██ ██   ██████   ██ ██ ██ 
 *        ██     ██    ██  ██▀  ▀██  ██    ██ 
 *     ▄▄▄██▄▄▄   ██▄▄██   ▀██▄▄██▀   ██▄▄██  
 *     ▀▀▀▀▀▀▀▀    ▀▀▀▀      ▀▀▀▀      ▀▀▀▀   
 *                                            
 *                                            
 */

@media (min-width: 1080px) {



}




/**
 *                                            
 *       ▄▄▄       ▄▄▄       ▄▄▄▄      ▄▄▄▄   
 *      █▀██      █▀██     ▄██▀▀██▄  ▄██▀▀██▄ 
 *        ██        ██     ██    ██  ██    ██ 
 *        ██        ██     ▀██▄▄███  ▀██▄▄███ 
 *        ██        ██       ▀▀▀ ██    ▀▀▀ ██ 
 *     ▄▄▄██▄▄▄  ▄▄▄██▄▄▄   █▄▄▄██    █▄▄▄██  
 *     ▀▀▀▀▀▀▀▀  ▀▀▀▀▀▀▀▀    ▀▀▀▀      ▀▀▀▀   
 *                                            
 *                                            
 */






/**
 *                                  
 *       ▄▄▄▄      ▄▄▄▄      ▄▄▄    
 *     ▄██▀▀██▄   ██▀▀▀█    █▀██    
 *     ██    ██  ██ ▄▄▄       ██    
 *     ▀██▄▄███  ███▀▀██▄     ██    
 *       ▀▀▀ ██  ██    ██     ██    
 *      █▄▄▄██   ▀██▄▄██▀  ▄▄▄██▄▄▄ 
 *       ▀▀▀▀      ▀▀▀▀    ▀▀▀▀▀▀▀▀ 
 *                                  
 *                                  
 */

















 /**
 *                                                                          
 *       ▄▄▄▄       ▄▄     ▄▄▄   ▄▄  ▄▄▄▄▄     ▄▄▄▄▄▄      ▄▄▄▄    ▄▄▄  ▄▄▄ 
 *     ▄█▀▀▀▀█     ████    ███   ██  ██▀▀▀██   ██▀▀▀▀██   ██▀▀██    ██▄▄██  
 *     ██▄         ████    ██▀█  ██  ██    ██  ██    ██  ██    ██    ████   
 *      ▀████▄    ██  ██   ██ ██ ██  ██    ██  ███████   ██    ██     ██    
 *          ▀██   ██████   ██  █▄██  ██    ██  ██    ██  ██    ██    ████   
 *     █▄▄▄▄▄█▀  ▄██  ██▄  ██   ███  ██▄▄▄██   ██▄▄▄▄██   ██▄▄██    ██  ██  
 *      ▀▀▀▀▀    ▀▀    ▀▀  ▀▀   ▀▀▀  ▀▀▀▀▀     ▀▀▀▀▀▀▀     ▀▀▀▀    ▀▀▀  ▀▀▀ 
 *                                                                          
 *                                                                          
 */

 /* Grid using flexbox instead of CSS grid

.row {
    display: flex;
    margin: 0 2% 4% 2%;
}

.col {
    margin: 0;
    padding: 0 2.083333%; /* To make it equivalent to the padding of the external container which is narrower because of the 2+2% left and right padding */ /*
    background: #b9e6c6;
}

.span8 {
    width: 65.6%;
}

.span4 {
    width: 31%;
}

*/