/* EMAIL */
.guideFilmOneEmail{height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0); position: absolute; top: 0; left: 0; display: flex; opacity: 1; transition: 0.3s all; z-index: 9999999;}
.guideFilmOne-DivText-span1{font-size: 1.4rem; margin: 1rem auto 1rem auto; text-align: center; line-height: 2.5rem;}
.popup-alert-buttonGuide{width: 70%; margin: 0 auto;}

.hole{position: absolute; border-radius: 1rem; width: 24.5rem; height: 37rem; left: 16.5rem; top: 8rem; box-shadow: 0px 0px 0px 10000px rgba(0, 0, 0 , 0.2);}

.madalWindowEmailGuide{display: flex; flex-direction: column;  position: fixed; left: 50%; top: 30%; padding: 1rem 2rem 2rem 2rem; border-radius: 0.428rem;
   background-color: #ffffff; width: 30%; min-height: 10%; height: auto; transition: 0.3s all; z-index: 1; }

.guideFilmOneEmail .fa-arrow-alt-right{
   position: absolute; font-size: 3rem; color: #fff; z-index: 999999;
   animation-name: floatingThree;
   -webkit-animation-name: floatingThree;

   animation-duration: 0.8s;   
   -webkit-animation-duration: 0.8s;

   animation-iteration-count: infinite;
   -webkit-animation-iteration-count: infinite;
}

.guideFilmOneEmail .fa-arrow-alt-left{
   position: absolute; font-size: 3rem; color: #fff; z-index: 999999;
   animation-name: floatingTwo;
   -webkit-animation-name: floatingTwo;

   animation-duration: 0.8s;   
   -webkit-animation-duration: 0.8s;

   animation-iteration-count: infinite;
   -webkit-animation-iteration-count: infinite;
}

.guideFilmOneEmail .fa-arrow-alt-down{
   position: absolute; font-size: 3rem; color: #fff; z-index: 999999;
   animation-name: floatingOne;
   -webkit-animation-name: floatingOne;

   animation-duration: 0.8s;   
   -webkit-animation-duration: 0.8s;

   animation-iteration-count: infinite;
   -webkit-animation-iteration-count: infinite;
}

/* MAIN GUIDE */
.guideFilmOne-DivText-span{font-size: 1.4rem; margin: 1rem auto 1rem auto; text-align: center; line-height: 2.5rem;}
.guideFilmOne-DivText-Button{display: flex; flex-direction: row;}
.guideFilmOne-DivText-Button button{margin: 0.2rem auto 0 auto; width: 50%; padding: 0.6rem 0.3rem;}
.guideFilmTwo{display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; 
   background-color: rgba(255, 255, 255, 0); position: fixed; top: 0; left: 0; opacity: 1; pointer-events: none; 
   transition: 0.3s all;
}

.guideFilmOneMain{height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.2); position: fixed; top: 0; left: 0; display: flex; opacity: 1; z-index: 9999999;}
.holeMainGuide{position: absolute; border-radius: 1rem; width: 15rem; height: 3rem; left: -0.6rem; top: 29.4rem; box-shadow: 0px 0px 0px 10000px rgba(0, 0, 0 , 0.2); cursor: pointer;}
.madalWindowMainGuide{display: flex; flex-direction: column; position: fixed; left: 35%; top: 25%; padding: 1rem 2rem 2rem 2rem; border-radius: 0.428rem; 
   background-color: #ffffff; width: 30%; min-height: 10%; height: auto; transition: 0.3s all; z-index: 1; 
}

.guideFilmOneMain .fa-arrow-alt-left{
   position: fixed; top: 29.3rem; left: 10rem; font-size: 3rem; color: #29B28F;
   animation-name: floatingTwo;
   -webkit-animation-name: floatingTwo;

   animation-duration: 0.8s;   
   -webkit-animation-duration: 0.8s;

   animation-iteration-count: infinite;
   -webkit-animation-iteration-count: infinite;
}
.guideFilmTwo .fa-arrow-alt-right{
   position: fixed; top: 8.2rem; right: 14rem; font-size: 3rem; color: #29B28F;
   animation-name: floatingTwo;
   -webkit-animation-name: floatingTwo;

   animation-duration: 0.8s;   
   -webkit-animation-duration: 0.8s;

   animation-iteration-count: infinite;
   -webkit-animation-iteration-count: infinite;
}

@media (min-width: 1701px) and (max-width: 1900px){
   .hole{width: 19.5rem;}
}
@media (min-width: 1401px) and (max-width: 1700px){
   .hole{width: calc( 100% - 253px); left: 14.5rem; top: 7.5rem; height: 37.5rem;}
   .madalWindowEmailGuide{right: auto; bottom: 0; left: 0; top: auto; background-color: #ffffff; width: 40%; box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.219);}
   .guideFilmOne-DivText-span1{font-size: 1.1rem; margin: 1rem auto 1refm auto; text-align: center; line-height: 2.5rem;}
   .madalWindowEmailGuide{padding: 0.5rem 1.5rem 1.5rem 1.5rem;}

   .guideFilmOneEmail .fa-arrow-alt-right{color: #29B28F;}
   .guideFilmOneEmail .fa-arrow-alt-left{color: #29B28F;}

   .madalWindowMainGuide{width: 40%; left: 30%; min-height: 5%;}
   .holeMainGuide{width: 13.5rem;}
   .guideFilmTwo .fa-arrow-alt-right{top: 7.7rem; right: 13rem;}
   .guideFilmOneMain .fa-arrow-alt-left{top: 29.6rem; left: 8.5rem; font-size: 2.5rem;}
}
@media (min-width: 1001px) and (max-width: 1400px){
   .hole{width: calc( 100% - 253px); left: 14.5rem; top: 8rem; height: 33.5rem;}
   .guideFilmOne-DivText-span1{font-size: 1.1rem; margin: 1rem auto 1rem auto; text-align: center; line-height: 2.5rem;}
   .madalWindowEmailGuide{right: auto; bottom: 0; left: 0; top: auto; background-color: #ffffff; width: 50%; box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.219); padding: 0.5rem 1.5rem 1.5rem 1.5rem;}
   .popup-alert-buttonGuide{width: 70%; margin: 0 auto; height: 2rem;}

   .guideFilmOneEmail .fa-arrow-alt-right{color: #29B28F;}
   .guideFilmOneEmail .fa-arrow-alt-left{color: #29B28F;}

   .madalWindowMainGuide{width: 50%; left: 25%; min-height: 5%;}
   .holeMainGuide{width: 13.2rem;}
   .guideFilmTwo .fa-arrow-alt-right{top: 7.7rem; right: 13rem;}
   .guideFilmOneMain .fa-arrow-alt-left{top: 29.6rem; left: 8.5rem; font-size: 2.5rem;}
}

@keyframes floatingOne {
   0%{transform: translateY(0%);}
   50%{-webkit-transform: translateY(20%);}   
   100%{transform: translateY(0%);}           
}

@-webkit-keyframes floatingOne {
   0%{-webkit-transform: translateY(0%);}
   50%{-webkit-transform: translateY(20%);}   
   100%{-webkit-transform: translateY(0%);}           
}

@keyframes floatingTwo {
   0%{transform: translateX(0%);}
   50%{-webkit-transform: translateX(20%);}   
   100%{transform: translateX(0%);}           
}

@-webkit-keyframes floatingTwo {
   0%{-webkit-transform: translateX(0%);}
   50%{-webkit-transform: translateX(20%);}   
   100%{-webkit-transform: translateX(0%);}           
}

@keyframes floatingThree {
   0%{transform: translateX(20%);}
   50%{-webkit-transform: translateX(0%);}   
   100%{transform: translateX(20%);}           
}

@-webkit-keyframes floatingThree {
   0%{-webkit-transform: translateX(20%);}
   50%{-webkit-transform: translateX(0%);}   
   100%{-webkit-transform: translateX(20%);}           
}