@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800;900&display=swap');

@font-face {
    font-family: 'Palatino';
    src: url('../fonts/palatino.ttf') format('truetype');
}


/*==========  Mobile First Method  ==========*/

*{
    font-family: 'Raleway', sans-serif;
}

h1{
    font-weight:800;
    font-size:42px;
}

.intro-main-title{
    font-size:30px;    
    color: #4683ae;
    font-weight:bold;
    margin-top:50px;
}

h2{
    font-weight:300;
    font-size: 18px;
    margin-bottom: 30px;
}

h3{
    text-transform:uppercase;
}

h4{
    line-height:20px;
}

h6{
    margin-top:30px;
}

h5{
    margin-top:50px;
    margin-bottom:15px;
    font-weight:bold;
    font-size:24px;
}

.semibold{
    font-weight:600;
}

audio{
    width:100%;
}

.link{
    text-decoration: none;
    color: #212529;
}

.link:hover{
    color: #4683ae;
}

.cover-title{
    text-align:center;
    color:#4683ae;
}

.cover-wrapper{
    margin-top:50px;
    margin-bottom:50px;
}

.cover-ita{
    text-align:center;
}

.cover-ita img, .cover-deu img{
    transition: .2s ease all;
    width:100%;
    max-width: 300px;
    margin-top:50px;
    margin-bottom:50px;
}

.book{
  width:100%;
  max-width: 300px;
  margin: 0 auto;
  display: block;
}

.btn-primary{
  background-color: #4683ae;
  border-color: #4683ae;
  font-size:1.2rem;
}

.btn-primary:hover{
  background-color: #62bfe3;
  border-color: #62bfe3;
}

.buttons-wrapper .btn{
  margin-top:5px;
  margin-bottom:5px;
}

.btn-book{
  width:100%;
  margin-top:30px;
  margin-bottom:30px;
}

.background-blue{
  background-color: #dcf2fd;
  padding:30px;
}

.audio-lesson-wrapper{
    max-width: 500px;
    margin: 0 auto;
    margin-bottom: 50px;
}

.audio-lesson-titles{
    background-color:#e7e7e7 !important;      
    padding:30px !important; 
}

.audio-lesson-titles p{
  line-height:16px;
  text-transform:uppercase;
  font-size:18px;
  margin-bottom:0px;
}

.audio-lesson-titles span{
  line-height:16px;
  font-size:18px;
  margin-top:15px;
  margin-bottom:15px;
  display:inline-block;
}

i{
    font-weight:300 !important;
}

.interladina h4{
    color:#284786 !important;     
    border-left:50px solid #284786 !important;  
    margin-top: 50px;
    letter-spacing: 4px;
    font-weight: 400;
    font-size: 16px;
    padding-left: 20px;
}

.valbadia h4{
    color: #005421 !important;
    border-left: 50px solid #005421 !important;
    margin-top: 50px;
    letter-spacing: 4px;
    font-weight: 400;
    font-size: 16px;
    padding-left: 20px;
}

.gherdeina h4{
    color: #8d3c76 !important;
    border-left: 50px solid #8d3c76 !important;
    margin-top: 50px;
    letter-spacing: 4px;
    font-weight: 400;
    font-size: 16px;
    padding-left: 20px;
}

.fascia h4{
    color:#c42f2a !important;     
    border-left:50px solid #c42f2a !important;  
    margin-top: 50px;
    letter-spacing: 4px;
    font-weight: 400;
    font-size: 16px;
    padding-left: 20px;
}

.fodom h4{
    color:#1fa9e2 !important;     
    border-left:50px solid #1fa9e2 !important;  
    margin-top: 50px;
    letter-spacing: 4px;
    font-weight: 400;
    font-size: 16px;
    padding-left: 20px;
}

.santaluzia h4{
    color:#e86625 !important;     
    border-left:50px solid #e86625 !important;  
    margin-top: 50px;
    letter-spacing: 4px;
    font-weight: 400;
    font-size: 16px;
    padding-left: 20px;
}

.ampez h4{
    color:#e42e87 !important;     
    border-left:50px solid #e42e87 !important;  
    margin-top: 50px;
    letter-spacing: 4px;
    font-weight: 400;
    font-size: 16px;
    padding-left: 20px;
}

.valbadia .line-title, .interladina .line-title, .gherdeina .line-title, .fascia .line-title, .fodom .line-title, .santaluzia .line-title, .ampez .line-title{
    height:1px;
    background-color:black;
    margin-top:0px;
    margin-bottom:50px;
    margin-left:70px;
}

.registrazion-foto{
    height:250px;
    overflow:hidden;
}

.registrazion-foto img{
    width:100%;  
    margin-top:-150px;
}

.audio-lesson-number{
    background-color:white;
    border:5px solid #4683ae;
    font-size: 35px;
    width: 80px;
    height: 80px;
    padding: 5px;
    text-align: center;
    border-radius:100%;
    font-weight:bold;
    margin:0 auto;
    margin-bottom:15px;
}

.lesson-images{
    width:100%;
    max-width:960px;
    margin: 0 auto;
    margin-top:30px;
    margin-bottom:30px;
}

.logo{
    width:60px;    
}

.logo-orders{
    margin-top:15px;
    margin-bottom:30px;
}

footer{
    background-color: #f9f9f9;
    padding-top:100px;
    padding-right:50px;
    padding-bottom:100px;
    padding-left:50px;
    text-align:center;
    margin-top:100px;
}

footer .hr{
    margin-bottom:15px;
}

.logo-footer{
    margin-bottom:15px;
}

.footer-logos{
    margin-top:30px;
    margin-bottom:30px;
}

.footer-logos img{
    width:100%;
    max-width:147px;
}

footer h3{
    margin-bottom:30px;
    margin-top:30px;
    font-size:20px;
}

.hr{
    width: 100%;
    background-color: #eaeaea;
    height: 2px;
    margin-top:15px;
}

.underfooter{
    text-align:center;
    padding:30px;
}

.underfooter img{
    width:100%;
    max-width:150px;
}

#risposta{
    margin-top:30px;
    padding:15px;
}

.image-full-lesson{
    width:100%;
    max-width:190px;
    margin-bottom:30px;
}

.btn-interladina{
    background-color:#284786; 
    border-color:#284786;    
}

.btn-valbadia{
    background-color:#005421;     
    border-color:#005421;     
}

.btn-gherdeina{     
    background-color:#8d3c76;       
    border-color:#8d3c76;   
}

.btn-fascia{
    background-color:#c42f2a;      
    border-color:#c42f2a;    
}

.btn-fodom{
    background-color:#1fa9e2;   
    border-color:#1fa9e2;       
}

.btn-santaluzia{
    background-color:#e86625;    
    border-color:#e86625;      
}

.btn-ampez{
    background-color:#e42e87;       
    border-color:#e42e87;   
}

.btn-lessons{
    height:150px;
    width:100%;
    display:block;
    color:white;
    text-decoration:none;
    text-align:left;
    padding:15px;
    position:relative;
    margin-bottom:24px;
    z-index:1;

}

.container{
    padding-left:24px;
    padding-right:24px;
}

.btn-lessons:hover{
    color:white;
    text-decoration:none;
}

.btn-lessons-title {
    font-size: 18px;
    line-height: 20px;
}

.btn-lessons-subtitle{
    position:absolute;
    bottom:15px;
    right:15px;
    font-weight:300;
    font-size:18px;
}

.container-spacer{
    margin-top:115px;
}

#anchorvalbadia, #anchorinterladina, #anchorgherdeina, #anchorfascia, #anchorfodom, #anchorsantaluzia, #anchorampez {
    display: block;
    position: relative;
    top: -60px;
    visibility: hidden;
}

div.section1 > div:first-child {
    margin-bottom:50px;
}





  /* Custom, iPhone Retina */
  @media only screen and (min-width : 320px) {

  }

  /* Extra Small Devices, Phones */
  @media only screen and (min-width : 480px) {

  }

  /* Small Devices, Tablets */
  @media only screen and (min-width : 768px) {

    .container-spacer{
        margin-top:100px;
    }
    
    .book{
        margin:initial;
    }   
    
    .btn-book{
      max-width:384px;
    }     

  }

  /* Medium Devices, Desktops */
  @media only screen and (min-width : 992px) {
        
        
        
    .btn-primary{
      font-size:1.0rem;
    }        
        
    footer{
        padding-top:50px;
        padding-right:50px;
        padding-bottom:50px;
        padding-left:50px;
    }    
        
    .section1{
        display:flex;
    }  
    
    div.section1 > div:first-child {
        order: 2;
        width: 50%;
        padding:30px;
        margin-bottom:0px;
    }
    
    div.section1 > div:last-child {
        width: 50%;
        padding:30px;
    }    
        
    .registrazion-foto {
        height: auto;
        overflow: initial;
    }    
    
    .registrazion-foto img {
        width: 100%;
        margin-top: 0px;
    }    
    
    .audio-lesson-wrapper{
        max-width: initial;
        margin: initial;
        margin-bottom: 30px;
    }
    
    .btn-lessons{
        height:200px;
        padding:30px;
    }
    
    .valbadia h4 {
        border-left: 100px solid #005421 !important;
    }
    
    .valbadia .line-title, .interladina .line-title, .gherdeina .line-title, .fascia .line-title, .fodom .line-title, .santaluzia .line-title, .ampez .line-title {
        margin-left: 120px;
    }    
    
    .interladina h4 {
        border-left: 100px solid #284786 !important;
    }   
    
    .gherdeina h4 {
        border-left: 100px solid #8d3c76 !important;
    }   
    
    .fascia h4 {
        border-left: 100px solid #c42f2a !important;
    }
    
    .fodom h4 {
        border-left: 100px solid #1fa9e2 !important;
    }
    
    .santaluzia h4 {
        border-left: 100px solid #e86625 !important;
    }
    
    .ampez h4 {
        border-left: 100px solid #e42e87 !important;
    }

    .logo{
        width:80px;    
    }

    .audio-lesson-wrapper .col-lg-3, .audio-lesson-wrapper .col-lg-9{
        padding:0px;
    }
    
    .audio-lesson-wrapper{
        display:flex;
    }
    
    .audio-lesson-titles{
        order:2;
        width:100%;
    }
    
    .registrazion-foto img{
        width:auto;
        height:200px;
    }    

    .btn-lessons{
        display:inline-block;
    }
    
    footer{
      text-align: inherit;
    }
    
    .image-full-lesson{
        margin-bottom:0px;
    }   

    .intro-main-title{
        margin-top:0px;
    }
        
    .cover-ita{
      text-align:left;
    }    

    .cover-ita img:hover, .cover-deu img:hover{
      transform: scale(1.1);
      transition: .2s ease all;
    }

    .book{
      max-width:521px;
      margin:inherit;
    }

    .cover-ita img, .cover-deu img{
      max-width: 666px;
      padding-left:50px;
    }
    
    .registrazion-foto{
       margin: inherit;
    }
    
    h1{
        font-size:52px;
        margin-top:50px;
    }
    
    h2{
        font-size:25px;
    }    
    
    .cover-title{  
        display: flex;
        justify-content: right; /* Aligns horizontally */
        align-items: center;    /* Aligns vertically */
        height: 90%;  
    }

  }

  /* Large Devices, Wide Screens */
  @media only screen and (min-width : 1200px) {
    
    h2{
        font-size:30px;
    }     
    
    h4 {
        line-height: 32px;
    }

    .cover-wrapper{
        margin-top:100px;
        margin-bottom:100px;
    }
    
    .intro-main-title {
        font-size: 42px;
        margin-bottom:30px;
    }    

  }


  /* Large Devices, Wide Screens */
  @media only screen and (min-width : 1600px) {

    h1 {
        font-size: 65px;
        margin-top: 50px;
    }

    .audio-lesson-number{
      font-size:50px;
      width: 120px;
      height: 120px;
      padding: 12px;
    }
    
    .cover-ita img, .cover-deu img{
      padding-left:100px;
    }    

  }

  /* Large Devices, Wide Screens */
  @media only screen and (min-width : 1920px) {

    .container{
        max-width: 1750px;
    }
    
    .book{
      max-width:650px;
    }    

  }