#philosophy {
    h1.center {
        color: #FFF;
        font-size: 65px;
        font-weight: 600;
        line-height: 80px;
        text-align: center;
        word-break: keep-all;
        display: block;
        width: 100%;
        float: left;
        margin-bottom: 50px;
    }
    h2.center {
        color: #FFF;
        font-size: 40px;
        font-weight: 600;
        line-height: 80px;
        text-align: center;
        word-break: keep-all;
        display: block;
        width: 100%;
        float: left;
        margin-top: 150px;
    }
    .foot-info {
        padding-top: 100px !important;
        padding-bottom: 180px !important;
        text-align: center;
        h1 {
            color: #FFF;
            font-size: 65px;
            font-weight: 600;
            margin: 0;
        }
        h2 {
            color: #FFF;
            font-size: 32px;
            font-weight: 300;
            margin: 0;
            margin-top: 20px;
        }
    }
}

.card-philosophy {
    width: 100%;
    min-height: 650px;
    max-width: 1068px;
    margin: 50px 0px;
    margin-bottom: 100px;
    float: left;
    color: #FFF;   
    border-radius: 20px;
    background-color: #041725;    
    transition: 0.3s;
    .text {
        position: relative;
        width: 50%;
        min-height: 650px;
        float: left;
        padding-top: 50px;
        h1 {
            font-size: 45px;
            font-weight: 600;
            line-height: 60px;
            margin: 60px 50px;
            word-break: keep-all;
            cursor: default;
        }
        h2 {
            position: absolute;
            font-weight: 600;
            bottom: 60px;
            left: 60px;
            color: #DDD;
            cursor: pointer;
            width: 150px;
            height: 30px;
            img {
                width: 30px;
                margin-right: 15px;
                position: absolute;
                top: 0px;
                left: 0px;
                transition: 0.3s;
            }            
            span {
                position: absolute;
                top: 7px;
                left: 45px;
                transition: 0.3s;
            }
        }
        h2:hover {
            img {
//                transform: rotate(45deg);
                opacity: 0.7;                
            }
            .st0 {
//                fill : red;
            }
        }
    }
    .video {
        width: 50%;
        min-height: 650px;
        float: left;
        border-radius: 0px 20px 20px 0px;
        background-size: 80%;
        background-position: center;
        background-repeat: no-repeat;
        transition: 0.3s;
    }
    .video:hover {
        background-size: 100%;
    }
    .description {
        display: none;
        padding: 70px 30px;
        transition: 0.3s;
        h1 {
            font-size: 24px;
            margin: 40px 0px 20px 0px;
            font-weight: 600;
            line-height: 30px;
        }
        p {
            line-height: 2em;
            word-break: keep-all;
            padding: 10px 20px;
            font-size: 16px;
        }
    }
}
.card-philosophy-0 {background-color: #041725;}
.card-philosophy-1 {background-color: #231802;}
.card-philosophy-2 {background-color: #231e09;}
.card-philosophy-3 {background-color: #231e09;}
.card-philosophy-4 {background-color: #11101a;}

#card-philosophy-0 {
    .video {
         transition: 0.3s;
         background-color: #17acf8;   
         background-image: url(../../assets/images/philosophy/philosophy-0.png);
    }     
}
#card-philosophy-1 {
    .video {
         transition: 0.3s;
         background-color: #ffa109;   
         background-image: url(../../assets/images/philosophy/philosophy-1.png);
    }     
}
#card-philosophy-2 {
    .video {
         transition: 0.3s;
         background-color: #ffda2f;   
         background-image: url(../../assets/images/philosophy/philosophy-2.png);
    }     
}
#card-philosophy-3 {
     .video {
         transition: 0.3s;
         background-color: #00ca61;   
         background-image: url(../../assets/images/philosophy/philosophy-3.png);
    }     
}
#card-philosophy-4 {
     .video {
         transition: 0.3s;
         background-color: #8c85e4;   
         background-image: url(../../assets/images/philosophy/philosophy-4.png);
    }     
}


.card-philosophy-active-0 {
    background-color: #041725;   
    .text {
         h2 {
             img {
                 transform: rotate(45deg);
             }
             span {
                 opacity: 0 !important;
             }
         }
    }
    .video {
        display: none;        
    }
    .description {
        display: block;
    }
}

.card-philosophy-active-1 {
     background-color: #231802;   
     .text {
         h2 {
             img {
                 transform: rotate(45deg);
             }
             span {
                 opacity: 0 !important;
             }
         }
     }
     .video {
        display: none;
     }
     .description {
        display: block;
     }
}
.card-philosophy-active-2 {
     background-color: #231e09;
     .text {
         h2 {
             img {
                 transform: rotate(45deg);
             }
             span {
                 opacity: 0 !important;
             }
         }
     }
     .video {
        display: none;
     }
     .description {
        display: block;
     }    
}
.card-philosophy-active-3 {
     background-color: #001d11;
     .text {
         h2 {
             img {
                 transform: rotate(45deg);
             }
             span {
                 opacity: 0 !important;
             }
         }
     }
     .video {
        display: none;
     }
     .description {
        display: block;
     }    
}
.card-philosophy-active-4 {
     background-color: #11101a;
     .text {
         h2 {
             img {
                 transform: rotate(45deg);
             }
             span {
                 opacity: 0 !important;
             }
         }
     }
     .video {
        display: none;
     }
     .description {
        display: block;
     }    
}

@media (max-width: 1024px) {
    .card-philosophy {
        .text {
            width: 100%;
            h1 {
                font-size: 35px;
                line-height: 50px;
            }
        }
        .video {
            width: 100%;
            border-radius: 0px 0px 20px 20px;
        }
        .description {            
            transition: 0.3s;
            h1 {
                margin: 40px 0px 20px 60px;
            }
            p {
                padding: 40px 60px;
            }
        }
    }
}