/* MEDIA QUERIES  

Bootstrap 4 breakpoints
*/
 
/* 
Extra small devices (portrait phones, less than 576px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/
 
 
/* Small devices (landscape phones, 576px and up) 
@media (min-width: 576px) {  
}
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint 
@media (min-width: 768px) {  
}
 
/* Large devices (desktops, 992px and up) 
@media (min-width: 992px) { 
}
 
/* Extra large devices (large desktops, 1200px and up) 
@media (min-width: 1200px) {  
}
*/


@charset "utf-8";
 /* CSS Document */

 /* font */ 

@font-face {
font-family: 'sequel sans';
src: url("font/sequelsansroman.otf");
src: url("font/sequelsansroman.woff") format("woff"),
url("font/sequelsansroman.ttf") format("opentype");
}



.title {
font-family: sequel sans, Arial, sans-serif;
font-size:20px;
line-height:normal;
color: white;
text-align:center;
;    
}

@media (min-width: 576px) {
  .title  {
    font-size:40px;
  }
}


.menu-font {
font-family: sequel sans, Arial, sans-serif;
font-size:20px;
line-height:normal;
color: white;      
}


.nav-font {
font-family: sequel sans, Arial, sans-serif;
color:white;
text-align:center;
}




h2 {
font-family: sequel sans, Arial, sans-serif;
font-size:25px;
text-align:left;
color:white;   
}

.subtitle {
font-family: sequel sans, Arial, sans-serif;
font-size:30px;
text-align:center;
color:white;   
}




.font {
font-family: sequel sans, Arial, sans-serif;
font-size:16px;
line-height:normal;
color:white;
}

@media (min-width: 768px) {
  .font  {
    font-size:20px;
  }
}




.font a:link,
.font a:focus,
.font a:active,
.font a:visited {
text-decoration:none;
color:darkgrey;    
}

.font a:hover {
text-decoration:underline;
color:darkgrey;    
}



 /* CLASSES */ 

.container-fluid {
padding-left:0px!important;    
padding-right:0px!important;    
}


.section1 {
    width: 100%; 
    padding-top:20%;
    padding-bottom:25%; 
    padding-left:10%;
    padding-right:10%;;
}

.section{
    width: 100%; 
    background-color:black;
    justify-content: center;
    padding-top:2%;
    padding-right:2%;
    padding-bottom:40%; 
    
}






 /* navbar */ 

.smart-scroll{
	position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    background-color:black;
}
.scrolled-down{
	transform:translateY(-100%); transition: all 0.3s ease-in-out;
}
.scrolled-up{
	transform:translateY(0); transition: all 0.3s ease-in-out;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}


 /* carousel slideshow repository */ 

.carousel-control-prev-icon {
    background-image: url("img/arrow-prev.svg")!important;
}

.carousel-control-next-icon {
    background-image: url("img/arrow-next.svg")!important;
}


.imgcontainer {
    position: relative; 
    width: 100%; 
    height: 66.66vw;
}

 /*  imgcontainer (altezza a piacere in realtà) occuperà il posto delle immagini anche quando non ci sono, così il browser eviterà di dover ricalcolare le posizioni della pagina mentre la scorri */ 

.imgcontent {
    height: 100%; 
    width: 100%; 
    object-fit: cover; 
    object-position: center;
}




.repository-img {
    opacity: 80%;
    -khtml-opacity: 0.8;
}

.repository-img:hover {
  opacity: 100%;
    -khtml-opacity: 1;
}
