@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;900&display=swap');


body{
  overflow-x: hidden;
}


.scroll{
  justify-content: center;
  align-items: center;
}


.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#wrapper {
  margin-top: 762px;
}
#wrapper .mask__container {
  display: none;
  width: 1080px;
  height: 1080px;
  will-change: transform;
  transform: scale(1) translateZ(0);
  transition: transform 500ms;
}
#wrapper .mask__container.fixed {
  display: block;
  z-index: 12;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
#wrapper .mask__container #clipX {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(1.01) translateZ(0);
}
#wrapper #videoBg {
  margin: 0 auto;
  overflow: hidden;
  width: 1080px;
  height: 1080px;
  transform-origin: center center;
  will-change: transform;
  transform: scale(1) translateZ(0);
  transition: transform 500ms;
}
#wrapper #videoBg.fixed {
  display: block;
  z-index: 10;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
#wrapper #videoBg .iphone_model {
  width: 648px;
  height: 1296px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -648px 0 0 -324px;
  will-change: transform;
  transform: scale(1.4) translateZ(0);
  transition: transform 300ms;
}
#wrapper #videoBg .iphone_model #video,
#wrapper #videoBg .iphone_model #canvas {
  z-index: 10;
  width: 99%;
  height: 99%;
  padding: 0.5%;
}
#wrapper #videoBg .iphone_model #canvas {
  display: none;
}
#wrapper #videoBg .iphone_model:after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 11;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/iphonej.png");
}

#centrado {
  display: flex;
  justify-content: center;
  align-items: center;
}




#segunda__pantalla {
  height: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#textContent {
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

#textContent .content__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 5em;
  font-weight: 900;
  letter-spacing: -6.5px;
  margin: 0px auto -30px auto;
  }
#textContent .content__slogan {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5em;
  font-weight: 400;
  letter-spacing: 6.5px;
  margin: 0px auto 30px auto;
 }


 body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
 body, html {

   color: #777;
   line-height: 1.8;
 }
 
 /* Create a Parallax Effect */
 .bgimg-1, .bgimg-2, .bgimg-3 {
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
 }
 
 /* First image (Logo. Full height) */
 .bgimg-1 {
   background-image: url('../img/parallax1.jpg');
   min-height: 100%;
 }
 
 /* Second image (Portfolio) */
 .bgimg-2 {
   background-image: url("../img/parallax2.jpg");
   min-height: 400px;
 }
 
 /* Third image (Contact) */
 .bgimg-3 {
   background-image: url("../img/parallax3.jpg");
   min-height: 400px;
 }
 
 .w3-wide {letter-spacing: 10px;}
 .w3-hover-opacity {cursor: pointer;}
 
 /* Turn off parallax scrolling for tablets and phones */
 @media only screen and (max-device-width: 1600px) {
   .bgimg-1, .bgimg-2, .bgimg-3 {
     background-attachment: scroll;
     min-height: 400px;
   }
 }