/*
fec22c		>>	#5fa7d9
fb9202		>>	#21408a
*/

section[data-cattype="248"]{
    min-height: 50vh;
    padding: 0;
    /* overflow: hidden; */
    position: relative;
    background: linear-gradient(to bottom, #fff 50%, #121922 70%, #000 90%);
}


section[data-cattype="248"] > .container{
    position: sticky;
    top: 0;
    padding: 9vh 0;
    width: 100%;
    max-width: 100%;
}


[data-cattype="248"] .section-title{
    color: #121922;
    /* text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.604); */
}
[data-cattype="248"] .section-title .yellow{
    color: #fec21c;
    /* text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.6);  */
}


[data-cattype="248"] .list-step{
    text-align: left;
    transition-timing-function: cubic-bezier(.23,1,.32,1);
    transition-duration: .5s;
}
[data-cattype="248"] .list-step li{
    width: 66vh;
    height: 66vh;
    background: #e7e7e7;
    border-radius: 20px;
    margin: 18px;
    position: relative;
    padding: 2.1em 2.4em;

    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
}
[data-cattype="248"] .list-step li:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 50%;
    border-radius: 20px;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, 
        rgba(231,231,231,1) 0%,
        rgba(231,231,231,1) 60%,
        rgba(255,255,255,0) 100%); 
}



[data-cattype="248"] .list-step li > span{
    position: absolute;
    top: -0.21em;
    right: -0.12em;
    font-size: 12em;
    font-weight: 800;
    padding: 0px 20px;
    opacity: 0.06;
}
[data-cattype="248"] .list-step li .content{
    position: relative;
    z-index: 10;
    font-size: 1.2em;
}
[data-cattype="248"] .list-step li h3{
    font-size: 1.8em;
    font-weight: 600;
    margin: 0.9em 0;
    color: #000;
}
[data-cattype="248"] .list-step li h3:first-letter{
    color: #5fa7d9;
    font-size: 2.4em;
    font-weight: 700;
    text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.6); 
}






/* Typical laptop screen size*/
@media (max-width: 1400px) {
	
	[data-cattype="248"] .list-step li::before {
    	height: 100%;
    }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 980px) {
	
}

/* Portrait tablet to landscape and desktop */
@media (max-width: 980px) {
    
   

    section[data-cattype="248"].wrapper_middle[data-screen="on"]{
        overflow-x: visible;
        max-width: 100vw;
    }

	section[data-cattype="248"] > .container{
        padding: 6vh 0;
    }

}

/* Mobile screen size - landscape view */
@media (max-width: 767px) {

}

/* Mobile screen size */
@media (max-width: 480px) {
    
    section[data-cattype="248"] > .container{
        padding: 0 0 6vh 0;
    }

    [data-cattype="248"] .list-step li{
        width: 90vw;
        padding-top: 0;
    }

    [data-cattype="248"] .list-step li::before {
        height: 100%;
    }

    [data-cattype="248"] .list-step li > span{
        font-size: 6em;
        top: 0em;
        right: 0em;
    }

    [data-cattype="248"] .list-step li h3 {
        font-size: 1.2em;
    }
    [data-cattype="248"] .list-step li h3:first-letter{
        color: #5fa7d9;
        font-size: 2.1em;
        font-weight: 700;
        text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.6); 
    }
}