.homeLogo{
position: absolute;
z-index: 20;
top:50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
animation-duration: 4s;
animation-fill-mode: both;
animation-name: homeLogo;
opacity: 0;
}

@keyframes homeLogo {
0%{
opacity: 0;
top:50%;
}

50% {
opacity: 1;
top:50%;
}

100% {
opacity: 1;
top:15%;
}

}

.homeLogo img{
height: 100px;
width: auto;
filter: brightness(0) invert(100%);
}

.mod_offer{
height: 100vh;
position: relative;
display: flex;
top: 0px;
width: 100%;
border-bottom: 5px solid #FFFFFF;
box-sizing: border-box;
}

.mod_offer .arrowD{
display: block;
width: 80px;
height: 80px;
bottom: -40px;
left: 0px;
right: 0px;
margin: auto;
position: absolute;
z-index: 20;
background-color: rgba(255,255,255,0.9);
border-radius: 50%;
cursor: pointer;
}
.mod_offer .arrowD:after{
content: "";
display: block;
width: 20px;
height: 20px;
border-style: solid;
border-color: var(--g1-color);
border-width: 3px 0px 0px 3px;
transform: rotate(-135deg);
margin: auto;
transition: all 0.5s ease-out 0s;
z-index: 21;
bottom: 40px;
left: 0px;
right: 0px;
top:0px;
position: absolute;
}

.divOffer{
width: 100%;
height: 100%;
position: relative;
background-color: var(--g1-color);
display: flex;
align-items: flex-end;
}
.divOffer .divInOffer{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
position: relative;
}

@keyframes oText {
0%{
opacity: 0;
}

100% {
opacity: 1;
}

}

.divOffer .divInOffer a{
position: relative;
display: block;
}

.divOffer .divInOffer a:after{
content: "";
display: block;
position: absolute;
width: 100%;
height: 50%;
background: linear-gradient(to bottom, rgba(10,47,73,1) 0%,rgba(10,47,73,0) 100%);
z-index: 1;
top:0px;
left: 0px;
}

.divOffer .divInOffer a .oIng{
mix-blend-mode: luminosity;
display: block;
animation-duration: 4s;
animation-fill-mode: both;
animation-name: oIng;
animation-delay: 2s;

}
.divOffer .divInOffer a .oIng img{

}

.divOffer .divInOffer a .oIng img{
opacity: 0.2;
transition:opacity 0.5s ease-out 0s;
}

.divOffer .divInOffer a:hover .oIng img{
opacity: 0.5;
}

@keyframes oIng {
0%{
opacity: 0;
}

100% {
opacity: 1;
}

}

.divOffer .divInOffer a .oIng img{
width: 100%;
height: auto;
}

.divOffer .divInOffer a .oText{
position: absolute;
width: 100%;
height: 100%;
top:0px;
left: 0px;
display: flex;
flex-direction: column;
justify-content: flex-end;
z-index: 2;
animation-duration: 4s;
animation-fill-mode: both;
animation-name: oText;
animation-delay: 2s;
opacity: 0;
}

.divOffer .divInOffer a .icon{
margin-bottom: 30%;
display: block;
text-align: center;
filter: brightness(0) invert(100%);
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.divOffer .divInOffer a .title{
width: 100%;
bottom: 0px;
left: 0px;
z-index: 1;
font-size: 30px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
display: block;
position: relative;
transition:all 0.5s ease-out 0s;
padding: 0px 0px 45px 0px;
box-sizing: border-box;
color: #FFFFFF;
}

.divOffer .divInOffer a:hover .title{
padding: 45px 0px 45px 0px;
color: var(--g1-color);
}

.divOffer .divInOffer a .title:after{
content: "";
display: block;
position: absolute;
width: 100%;
min-height: 0px;
bottom: 0px;
transition:all 0.5s ease-out 0s;
background-color: #FFFFFF;
z-index: -1;
}

.divOffer .divInOffer a .bottomDiv{
min-height: 0px;
transition:all 0.5s ease-out 0s;
background-color: #FFFFFF;
display: block;
}
.divOffer .divInOffer a:hover .title:after{
min-height: 100%;
}

@media screen and (max-width:1400px){
.homeLogo img {height: 50px}
@keyframes homeLogo { 0%{opacity: 0;top:50%;} 50% {opacity: 1;top:50%;} 100% {opacity: 1;top:10%;} }

.divOffer{
height: 80%;
}
.mod_offer{
height: auto;
}


.divOffer .divInOffer a .icon{
height: 80px;
width: 50%;
margin: 0px auto 20% auto;
display: flex;
justify-content: center;
align-items: center;
min-height: unset;
}
.divOffer .divInOffer a .icon img{
object-fit: contain;
height: 100%;
width: 100%;
}
.divOffer .divInOffer a .title{
font-size: 22px;
}


}


@media screen and (max-width:1100px){
.boxScroll{display: block;background-color: var(--g1-color);}
div.menuTop > a.showMenu > span{background-color: #FFFFFF;}
div.menuTop > a.showMenu > span:before,div.menuTop > a.showMenu > span:after{background-color: #FFFFFF}
.hfix .top_page img {filter: brightness(0) invert(100%);}
.homeLogo{z-index: 200}
@keyframes homeLogo { 0%{opacity: 0;top:50%;} 50% {opacity: 1;top:50%;} 100% {opacity: 1;top:-30px;} }
}

@media screen and (max-width:950px){
.divOffer .divInOffer a .title{font-size: 17px}
}
@media screen and (max-width:750px){
.divOffer .divInOffer{
grid-template-columns: 1fr 1fr;
}
.divOffer .divInOffer a .oIng{
margin-top:-80%;
overflow: hidden;
}
.divOffer .divInOffer a{
overflow: hidden;
}

@keyframes homeLogo { 0%{opacity: 0;top:50%;} 50% {opacity: 1;top:50%;} 100% {opacity: 1;top:-30px;} }
/*@keyframes homeLogo2 { 0%{opacity: 0;top:50%;left:0px;right: 0px} 50% {opacity: 1;top:50%;left:0px;right: 0px} 100% {opacity: 1;top:-30px;left: 15px} }*/
@keyframes homeLogo2 {
0%{opacity: 0;top:50%;left:50%;transform: translateX(-50%) translateY(-50%);}
50% {opacity: 1;top:50%;left:50%;transform: translateX(-50%) translateY(-50%);}
100% {opacity: 1;top:-35px;left:97px;transform: translateX(-50%) translateY(-50%);}
}

.divOffer .divInOffer a .title{
padding: 0px 0px 20px 0px;
}
.divOffer .divInOffer a:hover .title {
padding: 20px 0px 20px 0px;
}

}
@media screen and (max-width:500px){
.divOffer .divInOffer a .icon{
height: 60px;
margin: 0px auto 10% auto;
}
.divOffer .divInOffer a .title{
font-size: 15px;
}
}

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

.homeLogo {
animation-name: homeLogo2;
}
}