@charset "utf-8";
/* CSS Document */
/* --- Navigazione e Layout view_foto.php --- */

.nav-container {display: flex; align-items: center; justify-content: space-between;  margin-bottom: 20px; font-family: Arial;}
.nav-arrows {display: flex; align-items: center;}
.nav-arrows a {text-decoration: none; color: #ff0; padding: 5px; display: flex; align-items: center;}
.nav-arrows a:last-child {margin-left: 50px;}

/* Stile per le icone SVG di navigazione */
.nav-arrows svg {width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.5;}

/* Box per la selezione delle versioni dell'immagine */
.ver-box {display: inline-block; padding: 5px 12px; margin-right: 5px; text-decoration: none; border-radius: 3px; font-weight: bold;}

/* Eventuale stile per il box attivo o hover se previsto */
.ver-box:hover {background-color: #333; color: #fff;}

/* --- MEDIA QUERY --- */

@media only screen and (min-width: 0px) and (max-width: 480px){
    .centro {position:relative; width:100%; margin:0 auto;}
    .sx {position:relative; margin:0 auto; width:90%; text-align:left; float:none }
    .dx {position:relative; margin:30px auto; text-align:center; float:none }
    .dim_img1 {width:80%}
    .pos_index {position:relative; width:80%; height:auto; margin:20px auto}
    .sx_portfolio {position:relative; margin:0 auto; width:100%; margin-top:4%;}
    .sx_portfolio p {font-weight:normal; font-style:normal; font-size:1em; color:#888}
    .sx_portfolio ul li {font-weight:600; font-style:oblique; font-size:1em; color:#888}
    .dx_portfolio  {position:relative; margin:0 auto; width:100%; margin-bottom:30px;}
    .dim_img_portfolio {width:100%}
    .titolo_portfolio {font-size:1.2em; font-weight:bold; text-align:center}
    .dati {font-weight:normal; font-style:normal; line-height:1.5em;font-size:1em; color:#ccc}	
    .descr_portfolio {font-size:1.3em!important; font-style:oblique; color:#fff!important; margin-top:1.5em}	
}


@media only screen and (min-width: 481px) and (max-width: 800px) {
    .centro {width:100%; margin:0 auto;}
    .sx {position:relative;  margin:0 auto; width:50%; float:left}
    .dx {position:relative; margin:0 auto; width:38%; float:right }
    .dim_img1 {width:100%}
    .centra_tutto {position:relative; width:100%; height:auto; margin:0 auto; text-align: center}
    .pos_index {position:relative; width:80%; height:auto; margin:20px auto}	
    .sx_portfolio {position:relative; margin:0 auto; width:98%; margin-top:4%;}
    .sx_portfolio p {font-weight:normal; font-style:normal; font-size:1.2em; color:#888}
    .sx_portfolio ul li {font-weight:600; font-style:oblique; font-size:1em; color:#888}
    .dx_portfolio  {position:relative; margin:0 auto; width:100%; margin-bottom:30px;}
    .dim_img_portfolio {width:100%}
    .titolo_portfolio {font-size:1.5em; font-weight:bold; text-align:center}
    .dati {font-weight:normal; font-style:normal; line-height:1.5em;font-size:1em; color:#ccc}	
    .descr_portfolio {font-size:1.3em!important; font-style:oblique; color:#fff!important; margin-top:1.5em}	
}


@media only screen and (min-width: 801px) and (max-width: 1280px) {
    .centro {width:100%; margin:0 auto;}
    .sx {position:relative;  margin:0 auto; width:50%; text-align: left; float:left}
    .dx {position:relative; margin:0 auto; width:38%; float:right }
    .dim_img1 {width:90%}
    .sx_portfolio {position:relative; margin:0 auto; width:38%; margin-top:4%; float:left}
    .sx_portfolio p {font-weight:normal; font-style:normal; font-size:.9em; color:#888}
    .sx_portfolio ul li {font-weight:600; font-style:oblique; font-size:.9em; color:#888}
    .dx_portfolio  {position:relative; margin:0 auto; width:60%; margin-bottom:50px; float:right }
    .dim_img_portfolio {width:100%}
    .titolo_portfolio {font-size:1.5em; font-weight:bold; text-align:center}
    .dati {font-weight:normal; font-style:normal; font-size:.9em; color:#ccc}	
    .descr_portfolio {font-size:1.3em!important; font-style:oblique; color:#fff!important; margin-top:1.5em}	
}


@media only screen and (min-width: 1281px) { 
	.centro {width:100%; margin:0 auto;}
    .sx {position:relative;  margin:0 auto; width:50%; float:left}
    .dx {position:relative; margin:0 auto; width:38%; float:right }
    .dim_img1 {width:90%}
    .sx_portfolio {position:relative; margin:0 auto; width:28%; margin-top:4%; float:left}
    .sx_portfolio p {font-weight:normal; font-style:normal; font-size:1em; color:#888}
    .sx_portfolio ul li {font-weight:600; font-style:oblique; font-size:.9em; color:#888}
   	.dx_portfolio  {position:relative; margin:0 auto; width:70%; margin-bottom:50px; float:right }
    .dim_img_portfolio {width:100%}
    .titolo_portfolio {font-size:2em; font-weight:bold; text-align:center}
    .dati {font-weight:normal; font-style:normal; font-size:.9em; color:#ccc}	
    .descr_portfolio {font-size:1.3em!important; font-style:oblique; color:#fff!important; margin-top:1.5em}
}