/* sender animation block lv4 home rent */



/*  DELETE THIS   */
/*
.final-wrapper{  display: none; }

.sending-block:hover .sending-wrapper{ display: none; }

.sending-block:hover .final-wrapper{ display: block; }
*/
/* / DELETE THIS   */







.home-rent-sender{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.95); 

z-index: 100; }



.sender-wrapper{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  width: 640px; height: 301px; }



.sending-block{ position: absolute; width: 96%; height: 100%;  z-index: 201;}

	.sending-title{ margin: 0px 0 0 0; position: relative; z-index: 3; text-align: center; color: #0b2a47; font-size: 15px; }

		.sending-title span{ font-weight: bold; }

.sending-immediate{margin: 205px 0 0 0; position: relative; z-index: 3; text-align: center; color: #0b2a47; font-size: 14px;}

	.sending-immediate span{font-weight: bold; }



.sending-container, .final-container{ position: absolute; top: 46px; left: 50%; right: 50%; width: 640px; height: 152px; margin: 0 0 0 -315px;  }



.sending-title br, .sending-immediate br{ display: none; }



.sending-close-button{ display: block; width: 120px;  padding: 6px 0 8px 0; margin: 30px auto 0;  background-color: #11509e; color: #fff;

 border-radius: 5px; text-align: center; text-decoration: none; text-transform: uppercase; }



/* hover*/







.final-wrapper{  display: none; }
/*
.sending-block:hover .sending-wrapper{ display: none; }

.sending-block:hover .final-wrapper{ display: block; }

*/


/*mobile*/

.sending-container-mob{ display: none; }

.final-container-mob{ display: none; }







/* STEP 1 ******************************************************************************************/

.anm-steps { position: relative; width: 640px; height: 152px;   text-align: center;}

	

.anm-step1{ position: absolute; top: 3px; left: 3px; }

.anm-1step-base{ position: absolute; top: 5px; left: 5px; width: 100px; height: 100px; background-image: url(../img/step-1-base.svg); 

 background-size: 100px 100px;}

.anm-1step-spin{ opacity: 0; position: absolute; top: 0px; left: 0px; width: 110px; height: 110px; 

	background-image: url(../img/spinning-stroke.svg);  background-size: 110px 110px;

animation: st1-spin 2s linear;}

.anm-1step-text{ opacity: 0; position: absolute; top: 110px; left: 23px; font-family: 'Arsenal'; color: #000; font-size: 15px; line-height: 18px; 

text-transform: uppercase; font-weight: bold; 

animation: st1-text1 2s 1 ;}

.anm-1step-text2{ opacity: 0; position: absolute; top: 110px; left: 23px; font-family: 'Arsenal'; color: #000; font-size: 15px; line-height: 18px; 

text-transform: uppercase; font-weight: bold;

animation: st1-text2 0.2s 1; animation-delay: 1.8s; animation-fill-mode: forwards;}

.anm-1step-check{opacity: 0; position: absolute; top: 43px; left: 56px; width: 37px; height: 37px; background-image: url(../img/check.svg);

 background-size: 37px 37px;

animation: st1-check 0.2s linear; animation-delay: 1.8s; animation-fill-mode: forwards;}



 /*  1  */

@keyframes st1-text1{

   0% {   opacity: 0;  }

   20%{ opacity: 1 }

   80%{opacity: 1}

   100% {    opacity: 0;  }

}



@keyframes st1-spin-wrap{

	0% { opacity: 0; }

	20%{ opacity: 1; }

	80%{opacity: 1;}

	100% {    opacity: 0;  }

}



@keyframes st1-spin{

	0% {transform: rotate(0deg);  opacity: 0; }  /* from {-webkit-transform: rotate(0deg);} */

	20%{ opacity: 1; }

	80%{opacity: 1;}

  100% {transform: rotate(180deg);  opacity: 0; }   /*  to {-webkit-transform: rotate(180deg);} */

}



@keyframes st1-check{

 from{opacity: 0;}

 to{opacity: 1;}

}



@keyframes st1-text2{

	0%{ opacity: 0; }

	100%{opacity: 1;}

}



.anm-arrow-1{opacity: 0; position: absolute; top: 38px; left: 180px; width: 26px; height: 49px; background-image: url(../img/arrow.svg);

background-size: 26px 49px; 

animation: anm-arrow-st1 0.4s linear ; animation-delay: 1.7s; animation-fill-mode: forwards;}



@keyframes anm-arrow-st1{

	0%{ opacity: 0; }

	100%{ opacity: 1; }

}



.anm-step2{position: absolute; top: 3px; left: 258px;}

.anm-2step-base{opacity: 0.5; position: absolute; top: 5px; left: 5px; width: 100px; height: 100px; background-image: url(../img/step-2-base.svg); 

 background-size: 100px 100px;

animation: st2-base 0.2s;  animation-delay: 1.9s; animation-fill-mode: forwards;}

.anm-2step-spin{opacity: 0; position: absolute; top: 0px; left: 0px; width: 110px; height: 110px; background-image: url(../img/spinning-stroke.svg);

  background-size: 110px 110px;

animation: st2-spin 20s linear; animation-delay: 2s;}

 .anm-2step-text{opacity: 0; position: absolute; top: 110px; left: 13px; font-family: 'Arsenal'; color: #000; font-size: 15px; line-height: 18px; 

text-transform: uppercase; font-weight: bold;

animation: st2-text 0.2s; animation-delay: 2s; animation-fill-mode: forwards;}





@keyframes st2-base {

	0%{ opacity: 0.5; }

	100%{ opacity: 1; }

}



@keyframes st2-spin{

	0% { opacity: 0; transform: rotate(0deg); }

	2%{ opacity: 1; }

	98%{opacity: 1;}

	100% {    opacity: 0;  transform: rotate(1800deg); }

}



@keyframes st2-text{

	0%{opacity: 0;}

	100%{opacity: 1;}

}





 .anm-arrow-2{opacity: 0; position: absolute; top: 38px; left: 421px; width: 26px; height: 49px; background-image: url(../img/arrow.svg);

background-size: 26px 49px;  }



.anm-step3{position: absolute; top: 3px; left: 511px;}

.anm-3step-base{ opacity: 0.5; position: absolute; top: 5px; left: 11px; width: 100px; height: 100px; background-image: url(../img/step-3-base.svg); 

 background-size: 100px 100px;}

/*  / STEP 1  */



/* FINAL */

.anm-final .anm-1step-text2{ opacity: 1; animation: none;}

.anm-final .anm-1step-check{opacity: 1;animation: none;}

.anm-final .anm-arrow-1{opacity: 1; animation: none;}

.anm-final .anm-2step-base{opacity: 1;animation: none;}

.anm-final .anm-2step-text2{opacity: 1; position: absolute; top: 110px; left: 16px; font-family: 'Arsenal'; color: #000; font-size: 15px; line-height: 18px; 

text-transform: uppercase; font-weight: bold; animation: none;}

.anm-final .anm-2step-check{opacity: 1; position: absolute; top: 43px; left: 56px; width: 37px; height: 37px; background-image: url(../img/check.svg);

 background-size: 37px 37px;}

.anm-final .anm-arrow-2{opacity: 1; position: absolute; top: 38px; left: 421px; width: 26px; height: 49px; background-image: url(../img/arrow.svg);

background-size: 26px 49px;  }

.anm-final .anm-3step-base{ opacity: 1;}

.anm-final .anm-3step-text{ opacity: 1; position: absolute; top: 110px; left: 0px; font-family: 'Arsenal'; color: #000; font-size: 15px; line-height: 18px; 

text-transform: uppercase; font-weight: bold; }











/****************************  MOBILE ANIMATION ******************************************************/

.anm-mob-steps{ position: relative; width: 100%; height: 100%; text-align: center; }

.anm-mob-step{ position: absolute; top: calc(50% - 64px); left: calc(50% - 71px); width: 128px; height: 142px;  }



.anm-mob-step1{}

.anm-mob-1step-base{ opacity: 0; position: absolute; top: 5px; left: 11px; width: 100px; height: 100px; background-image: url(../img/step-1-base.svg); 

 background-size: 100px 100px;

animation: an-mob-base1 3s 1;}

 .anm-mob-1step-spin{ opacity: 0; position: absolute; top: 0px; left: 6px; width: 110px; height: 110px; background-image: url(../img/spinning-stroke.svg);

  background-size: 110px 110px;

animation: an-mob-spin1 1.65s linear;}

.anm-mob-1step-check{ opacity: 0; position: absolute; top: 43px; left: 62px; width: 37px; height: 37px; background-image: url(../img/check.svg);

 background-size: 37px 37px;

animation: am-mob-check1 1.5s linear; animation-delay: 1.2s; /*animation-fill-mode: forwards;*/ }

.anm-mob-1step-text{ opacity: 0; position: absolute; top: 110px; left: 31px; font-family: 'Arsenal'; color: #000; font-size: 15px; line-height: 18px; 

text-transform: uppercase; font-weight: bold; 

animation: an-mob-text1 1.4s 1  linear;}

.anm-mob-1step-text2{ opacity: 0; position: absolute; top: 110px; left: 29px; font-family: 'Arsenal'; color: #000; font-size: 15px; line-height: 18px; 

text-transform: uppercase; font-weight: bold;

animation: an-mob-text2 1.2s 1; animation-delay: 1.4s; /*animation-fill-mode: forwards;*/}



@keyframes an-mob-base1{

	0%{ opacity: 0; }

	7%{opacity: 1;}

	93%{opacity: 1}

	100%{ opacity: 0; }

}



@keyframes an-mob-text1{

	0%{ opacity: 0; }

	14%{opacity: 1;}

	70%{opacity: 1}

	100%{ opacity: 0; }

}



@keyframes an-mob-spin1{

	0% {transform: rotate(0deg);  opacity: 0; }  /* from {-webkit-transform: rotate(0deg);} */

	14%{ opacity: 1; }

	75%{opacity: 1;}

  100% {transform: rotate(148deg);  opacity: 0; }   /*  to {-webkit-transform: rotate(180deg);} */

}



@keyframes am-mob-check1{

	0%{opacity: 0;}

	20%{opacity: 1;}

	80%{opacity: 1}

	100%{ opacity: 0; }

}



@keyframes an-mob-text2{

	0%{opacity: 0;}

	25%{opacity: 1;}

	85%{opacity: 1}

	100%{ opacity: 0; }

}



.anm-mob-step2{}

.anm-mob-2step-base{opacity: 0; position: absolute; top: 5px; left: 11px; width: 100px; height: 100px; background-image: url(../img/step-2-base.svg); 

 background-size: 100px 100px;

animation: an-mob-base2 20s;  animation-delay: 3s; animation-fill-mode: forwards;}

.anm-mob-2step-spin{opacity: 0; position: absolute; top: 0px; left: 6px; width: 110px; height: 110px; background-image: url(../img/spinning-stroke.svg);

  background-size: 110px 110px;

animation: an-mob-spin 20s linear; animation-delay: 3s;}

.anm-mob-2step-text{opacity: 0; position: absolute; top: 110px; left: 19px; font-family: 'Arsenal'; color: #000; font-size: 15px; line-height: 18px; 

text-transform: uppercase; font-weight: bold;

animation: an-mob-text2 20s; animation-delay: 3s; animation-fill-mode: forwards;}



@keyframes an-mob-base2{

	0%{ opacity: 0; }

	4%{opacity: 1;}

	100%{ opacity: 1; }

}



@keyframes an-mob-text2{

	0%{ opacity: 0; }

	4%{opacity: 1;}

	100%{ opacity: 1; }

}



@keyframes an-mob-spin{

	0% { opacity: 0; transform: rotate(0deg); }

	4%{ opacity: 1; }

	98%{opacity: 1;}

	100% { opacity: 0;  transform: rotate(1800deg); }

}





/* FINAL */

.anm-fin-2step-base{opacity: 0; position: absolute; top: 5px; left: 11px; width: 100px; height: 100px; background-image: url(../img/step-2-base.svg); 

 background-size: 100px 100px;

animation: an-fin-base2 1.4s;   animation-fill-mode: forwards;}

.anm-fin-2step-check{opacity: 0; position: absolute; top: 43px; left: 62px; width: 37px; height: 37px; background-image: url(../img/check.svg);

 background-size: 37px 37px;

animation: am-fin-check2 1.3s linear; }

.anm-fin-mob-2step-spin{opacity: 0; position: absolute; top: 0px; left: 6px; width: 110px; height: 110px; background-image: url(../img/spinning-stroke.svg);

  background-size: 110px 110px;

animation: an-fin-spin2 0.3s linear;}

.anm-fin-mob-2step-text{opacity: 0;  position: absolute; top: 110px; left: 19px; font-family: 'Arsenal'; color: #000; font-size: 15px; line-height: 18px; 

text-transform: uppercase; font-weight: bold;

animation: an-fin-text 0.3s;  animation-fill-mode: forwards;}

.anm-fin-mob-2step-text2{opacity: 0;  position: absolute; top: 110px; left: 20px; font-family: 'Arsenal'; color: #000; font-size: 15px; line-height: 18px; 

text-transform: uppercase; font-weight: bold;

animation: an-fin-text2 1.1s ; animation-delay: 0.3s;}



@keyframes an-fin-base2{

	0%{ opacity: 1; }

	75%{opacity: 1;}

	100%{ opacity: 0; }

}



@keyframes am-fin-check2{

	0%{opacity: 0;}

	22%{opacity: 1;}

	78%{opacity: 1;}

	100%{opacity: 0;}

}



@keyframes an-fin-text{

 0%{opacity: 1; }

 30%{opacity: 1;}

 100%{opacity: 0;}

}



@keyframes an-fin-text2{

	0%{ opacity: 0; }

	22%{opacity: 1;}

	78%{opacity: 1;}

	100%{ opacity: 0; }

}



@keyframes an-fin-spin2{

	0% { opacity: 1; transform: rotate(0deg); }

	50%{opacity: 1;}

	100% { opacity: 0;  transform: rotate(27deg); }

}



.anm-fin-3step-base{opacity: 0; position: absolute; top: 5px; left: 11px; width: 100px; height: 100px; background-image: url(../img/step-3-base.svg); 

 background-size: 100px 100px;

animation: an-fin-base3 0.3s ; animation-delay: 1.2s; animation-fill-mode: forwards;}

.anm-fin-3step-text{opacity: 0; position: absolute; top: 110px; left: 0px; font-family: 'Arsenal'; color: #000; font-size: 15px; line-height: 18px; 

text-transform: uppercase; font-weight: bold;

animation: an-fin-text3 0.3s; animation-delay: 1.2s; animation-fill-mode: forwards;}



@keyframes an-fin-base3 {

	0%{ opacity: 0; }

	100%{ opacity: 1; }

}



@keyframes an-fin-text3 {

	0%{ opacity: 0; }

	100%{ opacity: 1; }

}







































/* mediaqueries */



@media screen and (max-width: 1232px) {}

@media screen and (max-width: 1020px) {}







@media screen and (max-width: 767px) {



/*mobile*/

.sending-container-mob{ display: block; }

.final-container-mob{ display: block; }



.sending-container{ display: none; }

.final-container{display: none;}





.sender-wrapper{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  width: 90%; height: 380px; 

padding: 0 5% 0 5%; }

/*

.final-wrapper{ position: absolute; top: 50%; left: 50%;  transform: translate(-50%, -50%);  width: 90%; height: 380px;

 padding: 0 5% 0 5%; background-color: rgba(255,255,255,1); z-index: 1500;  }

 */



.sending-block{ position: absolute; width: 90%; height: 100%; z-index: 3; }

	.sending-title{ margin: 10px 0 0 0; position: relative; z-index: 3; text-align: center; color: #0b2a47; font-size: 15px; }

		.sending-title span{ font-weight: bold; }

.sending-immediate{margin: 215px 0 0 0; position: relative; z-index: 3; text-align: center; color: #0b2a47; font-size: 14px;}

	.sending-immediate span{font-weight: bold; }





/****************************  MOBILE ANIMATION ******************************************************/



.anm-mob-steps{ position: absolute;   top: 50%; left: 50%;  transform: translate(-48%, -62%); 

	/*top: calc(50% - 104px); left: calc(50% - 61px);*/ padding: 0px 0 0 0; width: 100%; height: 100%; text-align: center; }



.anm-mob-step{ position: absolute;  width: 128px; height: 142px;  }



.anm-mob-step1{}

.anm-mob-1step-base{ opacity: 0; position: absolute; top: 5px; left: 11px; width: 100px; height: 100px; background-image: url(../img/step-1-base.svg); 

 background-size: 100px 100px;

animation: an-mob-base1 3s 1;}

 .anm-mob-1step-spin{ opacity: 0; position: absolute; top: 0px; left: 6px; width: 110px; height: 110px; background-image: url(../img/spinning-stroke.svg);

  background-size: 110px 110px;

animation: an-mob-spin1 1.65s linear;}

.anm-mob-1step-check{ opacity: 0; position: absolute; top: 43px; left: 62px; width: 37px; height: 37px; background-image: url(../img/check.svg);

 background-size: 37px 37px;

animation: am-mob-check1 1.5s linear; animation-delay: 1.2s; /*animation-fill-mode: forwards;*/ }

.anm-mob-1step-text{ opacity: 0; position: absolute; top: 110px; left: 31px; font-family: 'Arsenal'; color: #000; font-size: 15px; line-height: 18px; 

text-transform: uppercase; font-weight: bold; 

animation: an-mob-text1 1.4s 1  linear;}

.anm-mob-1step-text2{ opacity: 0; position: absolute; top: 110px; left: 29px; font-family: 'Arsenal'; color: #000; font-size: 15px; line-height: 18px; 

text-transform: uppercase; font-weight: bold;

animation: an-mob-text2 1.2s 1; animation-delay: 1.4s; /*animation-fill-mode: forwards;*/}



@keyframes an-mob-base1{

	0%{ opacity: 0; }

	7%{opacity: 1;}

	93%{opacity: 1}

	100%{ opacity: 0; }

}



@keyframes an-mob-text1{

	0%{ opacity: 0; }

	14%{opacity: 1;}

	70%{opacity: 1}

	100%{ opacity: 0; }

}



@keyframes an-mob-spin1{

	0% {transform: rotate(0deg);  opacity: 0; }  /* from {-webkit-transform: rotate(0deg);} */

	14%{ opacity: 1; }

	75%{opacity: 1;}

  100% {transform: rotate(148deg);  opacity: 0; }   /*  to {-webkit-transform: rotate(180deg);} */

}



@keyframes am-mob-check1{

	0%{opacity: 0;}

	20%{opacity: 1;}

	80%{opacity: 1}

	100%{ opacity: 0; }

}



@keyframes an-mob-text2{

	0%{opacity: 0;}

	25%{opacity: 1;}

	85%{opacity: 1}

	100%{ opacity: 0; }

}



.anm-mob-step2{}

.anm-mob-2step-base{opacity: 0; position: absolute; top: 5px; left: 11px; width: 100px; height: 100px; background-image: url(../img/step-2-base.svg); 

 background-size: 100px 100px;

animation: an-mob-base2 20s;  animation-delay: 3s; animation-fill-mode: forwards;}

.anm-mob-2step-spin{opacity: 0; position: absolute; top: 0px; left: 6px; width: 110px; height: 110px; background-image: url(../img/spinning-stroke.svg);

  background-size: 110px 110px;

animation: an-mob-spin 20s linear; animation-delay: 3s;}

.anm-mob-2step-text{opacity: 0; position: absolute; top: 110px; left: 19px; font-family: 'Arsenal'; color: #000; font-size: 15px; line-height: 18px; 

text-transform: uppercase; font-weight: bold;

animation: an-mob-text2 20s; animation-delay: 3s; animation-fill-mode: forwards;}



@keyframes an-mob-base2{

	0%{ opacity: 0; }

	4%{opacity: 1;}

	100%{ opacity: 1; }

}



@keyframes an-mob-text2{

	0%{ opacity: 0; }

	4%{opacity: 1;}

	100%{ opacity: 1; }

}



@keyframes an-mob-spin{

	0% { opacity: 0; transform: rotate(0deg); }

	4%{ opacity: 1; }

	98%{opacity: 1;}

	100% { opacity: 0;  transform: rotate(1800deg); }

}





/* FINAL */

.anm-fin-2step-base{opacity: 0; position: absolute; top: 5px; left: 11px; width: 100px; height: 100px; background-image: url(../img/step-2-base.svg); 

 background-size: 100px 100px;

animation: an-fin-base2 1.4s;   animation-fill-mode: forwards;}

.anm-fin-2step-check{opacity: 0; position: absolute; top: 43px; left: 62px; width: 37px; height: 37px; background-image: url(../img/check.svg);

 background-size: 37px 37px;

animation: am-fin-check2 1.3s linear; }

.anm-fin-mob-2step-spin{opacity: 0; position: absolute; top: 0px; left: 6px; width: 110px; height: 110px; background-image: url(../img/spinning-stroke.svg);

  background-size: 110px 110px;

animation: an-fin-spin2 0.3s linear;}

.anm-fin-mob-2step-text{opacity: 0;  position: absolute; top: 110px; left: 19px; font-family: 'Arsenal'; color: #000; font-size: 15px; line-height: 18px; 

text-transform: uppercase; font-weight: bold;

animation: an-fin-text 0.3s;  animation-fill-mode: forwards;}

.anm-fin-mob-2step-text2{opacity: 0;  position: absolute; top: 110px; left: 20px; font-family: 'Arsenal'; color: #000; font-size: 15px; line-height: 18px; 

text-transform: uppercase; font-weight: bold;

animation: an-fin-text2 1.1s ; animation-delay: 0.3s;}



@keyframes an-fin-base2{

	0%{ opacity: 1; }

	75%{opacity: 1;}

	100%{ opacity: 0; }

}



@keyframes am-fin-check2{

	0%{opacity: 0;}

	22%{opacity: 1;}

	78%{opacity: 1;}

	100%{opacity: 0;}

}



@keyframes an-fin-text{

 0%{opacity: 1; }

 30%{opacity: 1;}

 100%{opacity: 0;}

}



@keyframes an-fin-text2{

	0%{ opacity: 0; }

	22%{opacity: 1;}

	78%{opacity: 1;}

	100%{ opacity: 0; }

}



@keyframes an-fin-spin2{

	0% { opacity: 1; transform: rotate(0deg); }

	50%{opacity: 1;}

	100% { opacity: 0;  transform: rotate(27deg); }

}



.anm-fin-3step-base{opacity: 0; position: absolute; top: 5px; left: 11px; width: 100px; height: 100px; background-image: url(../img/step-3-base.svg); 

 background-size: 100px 100px;

animation: an-fin-base3 0.3s ; animation-delay: 1.2s; animation-fill-mode: forwards;}

.anm-fin-3step-text{opacity: 0; position: absolute; top: 110px; left: 0px; font-family: 'Arsenal'; color: #000; font-size: 15px; line-height: 18px; 

text-transform: uppercase; font-weight: bold;

animation: an-fin-text3 0.3s; animation-delay: 1.2s; animation-fill-mode: forwards;}



@keyframes an-fin-base3 {

	0%{ opacity: 0; }

	100%{ opacity: 1; }

}



@keyframes an-fin-text3 {

	0%{ opacity: 0; }

	100%{ opacity: 1; }

}







}