/*----------------------------------------

[Table Of Contents]

1.Section Container
2.Single Section
3.Full Overlay
4.Section Title
5.Changing Font Color on Section Hover
6.Section Content
7.Section Backgrounds
8.Section Close & Section Scroll
9.Media Queries greater for width greater than 1170px


-----------------------------------------*/


/* Section Container */

.section-container {
                    height: 100vh;
                    width: 100%;
                    position: relative;
                    overflow-x: hidden;
                    -webkit-overflow-scrolling: touch;
                    }

.section-container::before {
                            /* never visible - this is used in jQuery to check the current MQ */
                            content: 'mobile';
                            display: none;
                            }

/* Section Container Ends */

/* Single Section */

.section-container .single-section {
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    width: 100%;
                                    height: 25%;
                                    overflow: hidden;
                                    cursor: pointer;
                                    -webkit-transition: -webkit-transform 0.4s;
                                    -moz-transition: -moz-transform 0.4s;
                                    -ms-transition: -moz-transform 0.4s;
                                    -o-transition: -moz-transform 0.4s;
                                    transition: transform 0.4s;
                                     /* on mobile -  move items outside the viewport */
                                    -webkit-transform: translateX(-100%);
                                    -moz-transform: translateX(-100%);
                                    -ms-transform: translateX(-100%);
                                    -o-transform: translateX(-100%);
                                    transform: translateX(-100%);
                                    }

.section-container .single-section::after {
                                           /* background image */
                                           content: '';
                                           position: absolute;
                                           top: 0;
                                           left: 0;
                                           height: 25vh;
                                           width: 100%;
                                           background-repeat: no-repeat;
                                           background-position: center center;
                                           background-size: cover;
                                           -webkit-transition: opacity 0.5s, height 0.4s;
                                           -ms-transition: opacity 0.5s, height 0.4s;
                                           -o-transition: opacity 0.5s, height 0.4s;
                                           -moz-transition: opacity 0.5s, height 0.4s;
                                           transition: opacity 0.5s, height 0.4s;
                                           }

.section-container .single-section::before {
                                           /* never visible - this is used in jQuery to detect if the background image has been loaded  */
                                           display: none;
                                           }


.section-container .single-section:nth-of-type(2){
                                                  top: 25%;
                                                  }



.section-container .single-section:nth-of-type(3){
                                                top: 50%;
                                                }


.section-container .single-section:nth-of-type(4){
                                                 top: 75%;
                                                 }

.section-container .single-section.is-loaded{
                                             /* move items in the viewport when background images have been loaded */
                                             -webkit-transform: translateX(0);
                                             -moz-transform: translateX(0);
                                             -ms-transform: translateX(0);
                                             -o-transform: translateX(0);
                                             transform: translateX(0);
                                             }

.section-container .single-section.is-full-width{
                                                 /* selected item */
                                                 top: 0;
                                                 height: auto;
                                                 z-index: 1;
                                                 cursor: auto;
                                                 -webkit-transition: z-index 0s 0s, top 0.4s 0s;
                                                 -moz-transition: z-index 0s 0s, top 0.4s 0s;
                                                 -ms-transition: z-index 0s 0s, top 0.4s 0s;
                                                 -o-transition: z-index 0s 0s, top 0.4s 0s;
                                                 transition: z-index 0s 0s, top 0.4s 0s;
                                                 }

.section-container .single-section.is-full-width::after{
                                                       height: 100vh;
                                                       }

.section-container .single-section.is-loaded::after{
                                                   opacity: 0;
                                                   }

.no-touch .section-container .single-section:hover::after, .section-container .single-section.is-full-width.is-loaded::after {
     opacity: 1;
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
     -ms-transform: scale(1);
     -o-transform: scale(1);
     transform: scale(1);
     }

/* Single Section Ends */

/* Full Overlay */

.project-is-open .single-section .full-overlay{
                                               display: block !important; 
                                               }

 .single-section .full-overlay{
                              display: none;    
                              }

.no-mobile .single-section:hover .full-overlay{
                                              display: block;          
                                              }     

/* Full Overlay Ends */

/* Section Title */

.section-title{
               position: absolute;
               z-index: 1;
               left: 0;
               top: 12.5vh;
               -webkit-transform: translateY(-50%);
               -moz-transform: translateY(-50%);
               -ms-transform: translateY(-50%);
               -o-transform: translateY(-50%);
               transform: translateY(-50%);
               width: 100%;
               text-align: center;
               }

.is-full-width .section-title{
                              top: 50vh;
                              -webkit-transition: opacity 0s, top 0.4s;
                              -ms-transition: opacity 0s, top 0.4s;
                              -o-transition: opacity 0s, top 0.4s;
                              -moz-transition: opacity 0s, top 0.4s;
                              transition: opacity 0s, top 0.4s;
                              }

.section-title{
              z-index:500;
              }                                             


/* Section Title Ends */

/* Changing Font color on Section Hover */

.project-is-open .section-title .black{
                                      color: #ffffff !important;
                                      }

.single-section:hover .section-title .black{
                                           color: #ffffff !important;
                                           }

.single-section:hover .section-title .black{
                                           color: #ffffff !important;
                                           }

.project-is-open .section-title .black{
                                      color: #ffffff !important;
                                      }

/* Changing Font color on Section Hover ENDS */


/* Section Content */

.section-content{
                 clear: both;
                 visibility: hidden;
                 opacity: 0;
                 margin-top: 100vh;
                 cursor: auto;
                 background-color: #ffffff;
                 -webkit-transition: opacity 0.4s 0s, visibility 0s 0.4s;
                 -ms-transition: opacity 0.4s 0s, visibility 0s 0.4s;
                 -o-transition: opacity 0.4s 0s, visibility 0s 0.4s;
                 -moz-transition: opacity 0.4s 0s, visibility 0s 0.4s;
                 transition: opacity 0.4s 0s, visibility 0s 0.4s;
                 
                 }

.is-full-width .section-content{
                               visibility: visible;
                               opacity: 1;
                               }

/* Section Content Ends */



/* Section Backgrounds */

.section-container .single-section:first-of-type::before{
                                                        content: url("../img/home1/prova1.jpg");
                                                        }

.section-container .single-section:first-of-type::after{
                                                       background-image: url("../img/home1/prova1.jpg");
                                                       }

.section-container .single-section:nth-of-type(2)::before{
                                                         content: url("../img/home1/prova2.jpg");
                                                         }

.section-container .single-section:nth-of-type(2)::after{
                                                        background-image: url("../img/home1/prova2.jpg");
                                                        }
.section-container .single-section:nth-of-type(3)::before{
                                                         content: url("../img/home1/prova3.jpg");
                                                         }

.section-container .single-section:nth-of-type(3)::after{
                                                        background-image: url("../img/home1/prova3.jpg");
                                                        }

.section-container .single-section:nth-of-type(4)::before{
                                                         content: url("../img/home1/prova4.jpg");
                                                         }

.section-container .single-section:nth-of-type(4)::after{
                                                        background-image: url("../img/home1/prova4.jpg");
                                                        }


/* Section Background Ends */



/* Section Close and Section Scroll */

.section-container .section-close,
.section-container .section-scroll{
                                   display: block;
                                   z-index: 1;
                                   width: 70px;
                                   height: 70px;
                                   cursor: pointer;
                                   /* image replacement */
                                   overflow: hidden;
                                   text-indent: 100%;
                                   white-space: nowrap;
                                   visibility: hidden;
                                   -webkit-transition: -webkit-transform 1s 0s, visibility 0s 1s;
                                   -ms-transition: -ms-transform 1s 0s, visibility 0s 1s;
                                   -o-transition: -o-transform 1s 0s, visibility 0s 1s;
                                   -moz-transition: -moz-transform 1s 0s, visibility 0s 1s;
                                   transition: transform 1s 0s, visibility 0s 1s;
                                   }

.section-container .section-close{
                                 position: fixed;
                                 top: 0px;
                                 right: 0px;
                                 -webkit-transform: scale(0);
                                 -moz-transform: scale(0);
                                 -ms-transform: scale(0);
                                 -o-transform: scale(0);
                                 transform: scale(0);
                                 background-color: #ffffff;
                                 }

.section-container .section-scroll{
                                   position: absolute;
                                   bottom: 30px;
                                   left: 50%;
                                   -webkit-transform: translateX(-50%) scale(0);
                                   -moz-transform: translateX(-50%) scale(0);
                                   -ms-transform: translateX(-50%) scale(0);
                                   -o-transform: translateX(-50%) scale(0);
                                   transform: translateX(-50%) scale(0);
                                   background: url("../img/png/mouse.png") no-repeat center center;
                                   }


.project-is-open .section-close,
.project-is-open .section-scroll{
                                 visibility: visible;
                                 -webkit-transform: scale(1);
                                 -moz-transform: scale(1);
                                 -ms-transform: scale(1);
                                 -o-transform: scale(1);
                                 transform: scale(1);
                                 -webkit-transition: -webkit-transform 0.4s 0s, visibility 0s 0s;
                                 -ms-transition: -ms-transform 0.4s 0s, visibility 0s 0s;
                                 -o-transition: -o-transform 0.4s 0s, visibility 0s 0s;
                                 -moz-transition: -moz-transform 0.4s 0s, visibility 0s 0s;
                                 transition: transform 0.4s 0s, visibility 0s 0s;
                                 }

.project-is-open .section-scroll{
                                 -webkit-transform: translateX(-50%) scale(1);
                                 -moz-transform: translateX(-50%) scale(1);
                                 -ms-transform: translateX(-50%) scale(1);
                                 -o-transform: translateX(-50%) scale(1);
                                 transform: translateX(-50%) scale(1);
                                 -webkit-animation: translate 1.2s 0.4s;
                                 -moz-animation: translate 1.2s 0.4s;
                                 -o-animation: translate 1.2s 0.4s;
                                 -ms-animation: translate 1.2s 0.4s;
                                 animation: translate 1.2s 0.4s;
                                 -webkit-animation-iteration-count: 2;
                                 -moz-animation-iteration-count: 2;
                                 -o-animation-iteration-count: 2;
                                 -ms-animation-iteration-count: 2;
                                 animation-iteration-count: 2;
                                 }

.no-touch .project-is-open .section-close:hover img{
                                                opacity: 0.5;
                                                }

.no-touch .project-is-open .section-scroll:hover{
                                                 -webkit-transform: translateX(-50%) scale(1.2);
                                                 -moz-transform: translateX(-50%) scale(1.2);
                                                 -ms-transform: translateX(-50%) scale(1.2);
                                                 -o-transform: translateX(-50%) scale(1.2);
                                                 transform: translateX(-50%) scale(1.2);
                                                 }



/* Section Close and Section Scroll Ends */



/*Media Queries greater for width greater than 1170px */


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



/* Section Container */
  
.section-container::before{
                          /* never visible - this is used in jQuery to check the current MQ */
                          content: 'desktop';
                          }

/* Section container Ends */

/* Single Section */

.section-container .single-section{
                                  width: 100%;
                                  height: 100%;
                                  opacity: 0;
                                  -webkit-transform: translateX(0);
                                  -moz-transform: translateX(0);
                                  -ms-transform: translateX(0);
                                  -o-transform: translateX(0);
                                  transform: translateX(0);
                                  -webkit-transition: width 0s;
                                  -ms-transition: width 0s;
                                  -o-transition: width 0s;
                                  -moz-transition: width 0s;
                                  transition: width 0s;
                                  }

.no-mobile .single-section:hover{
                                width:25%;
                                }

.project-is-open .single-section{
                                width: 100% !important;         
                                }

                                          

/* Single Section Ends */


/* Single Section */


.section-container .single-section:nth-of-type(2){
                                                 top: 0;
                                                 left: 25%;
                                                 }



.section-container .single-section:nth-of-type(3){
                                                top: 0;
                                                left: 50%;
                                                }



.section-container .single-section:nth-of-type(4){
                                                 top: 0;
                                                 left: 75%;
                                                 }


.section-container .single-section::after{
                                          height: 100%;
                                          width: 100%;
                                          opacity: 0;
                                          }

.section-container .single-section.is-loaded{
                                             /* show items when background images have been loaded */
                                             opacity: 1;
                                             }

.section-container .single-section.is-loaded::after{
                                                   opacity: 1;
                                                   }

.section-container .single-section.is-full-width{
                                                 /* selected item */
                                                 left: 0px;
                                                 width: 100%;
                                                 -webkit-transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s;
                                                 -moz-transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s;
                                                 -o-transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s;
                                                 -ms-transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s;
                                                 transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s;
                                                 }

.section-container .single-section::after{
                                         -webkit-transform: scale(1.1);
                                         -moz-transform: scale(1.1);
                                         -ms-transform: scale(1.1);
                                         -o-transform: scale(1.1);
                                         transform: scale(1.1);
                                         -webkit-transition: -webkit-transform 0.8s, opacity 0.5s;
                                         -ms-webkit-transition: -ms-transform 0.8s, opacity 0.5s;
                                         -o-webkit-transition: -o-transform 0.8s, opacity 0.5s;
                                         -moz-transition: -moz-transform 0.8s, opacity 0.5s;
                                         transition: transform 0.8s, opacity 0.5s;
                                         }

.section-container .single-section.is-loaded::after{
                                                   opacity: 0;
                                                   }

.no-touch .section-container .single-section:hover::after, .section-container .single-section.is-full-width.is-loaded::after{
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    }

.section-title{
              top: 50vh;
              width: 25vw;
              opacity: 0;
              -webkit-transform: translateY(-50%) translateX(-20px);
              -moz-transform: translateY(-50%) translateX(-20px);
              -ms-transform: translateY(-50%) translateX(-20px);
              -o-transform: translateY(-50%) translateX(-20px);
              transform: translateY(-50%) translateX(-20px);
              }

.is-loaded .section-title {
                          opacity: 1;
                          -webkit-transform: translateY(-50%);
                          -moz-transform: translateY(-50%);
                          -ms-transform: translateY(-50%);
                          -o-transform: translateY(-50%);
                          transform: translateY(-50%);
                          -webkit-transition: -webkit-transform 0.6s, opacity 0.6s, left 0.4s;
                          -ms-transition: -ms-transform 0.6s, opacity 0.6s, left 0.4s;
                          -o-transition: -o-transform 0.6s, opacity 0.6s, left 0.4s;
                          -moz-transition: -moz-transform 0.6s, opacity 0.6s, left 0.4s;
                          transition: transform 0.6s, opacity 0.6s, left 0.4s;
                          }

.is-loaded.is-full-width .section-title{
                                        left: 35.8vw;
                                        -webkit-transition: -webkit-transform 0.6s, opacity 0s, left 0.4s;
                                        -moz-transition: -moz-transform 0.6s, opacity 0s, left 0.4s;
                                        -o-transition: -o-transform 0.6s, opacity 0s, left 0.4s;
                                        -ms-transition: -ms-transform 0.6s, opacity 0s, left 0.4s;
                                        transition: transform 0.6s, opacity 0s, left 0.4s;
                                        }
.section-title p{
                display: block;
                }

.section-content{
                 position: relative;
                 z-index: 1;
                 }

}


/*Media Queries greater for width greater than 1170px Ends */

/*Media Queries greater for width greater than 1170px Ends */

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

  .single-section .section-title h1.intro-title-six{
    line-height: 40px !important;
  }

}



@-webkit-keyframes translate {
  0% {
    -webkit-transform: translateX(-50%) scale(1);
  }
  50% {
    -webkit-transform: translateY(10px) translateX(-50%) scale(1);
  }
  100% {
    -webkit-transform: translateX(-50%) scale(1);
  }
}


@-moz-keyframes translate {
  0% {
    -moz-transform: translateX(-50%) scale(1);
  }
  50% {
    -moz-transform: translateY(10px) translateX(-50%) scale(1);
  }
  100% {
    -moz-transform: translateX(-50%) scale(1);
  }
}



@-ms-keyframes translate {
  0% {
    -ms-transform: translateX(-50%) scale(1);
  }
  50% {
    -ms-transform: translateY(10px) translateX(-50%) scale(1);
  }
  100% {
    -ms-transform: translateX(-50%) scale(1);
  }
}


@-o-keyframes translate {
  0% {
    -o-transform: translateX(-50%) scale(1);
  }
  50% {
    -o-transform: translateY(10px) translateX(-50%) scale(1);
  }
  100% {
    -o-transform: translateX(-50%) scale(1);
  }
}


@keyframes translate {
  0% {
    -webkit-transform: translateX(-50%) scale(1);
    -moz-transform: translateX(-50%) scale(1);
    -ms-transform: translateX(-50%) scale(1);
    -o-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1);
  }
  50% {
    -webkit-transform: translateY(10px) translateX(-50%) scale(1);
    -moz-transform: translateY(10px) translateX(-50%) scale(1);
    -ms-transform: translateY(10px) translateX(-50%) scale(1);
    -o-transform: translateY(10px) translateX(-50%) scale(1);
    transform: translateY(10px) translateX(-50%) scale(1);
  }
  100% {
    -webkit-transform: translateX(-50%) scale(1);
    -moz-transform: translateX(-50%) scale(1);
    -ms-transform: translateX(-50%) scale(1);
    -o-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1);
  }
}