/*new animationanimation  new */
 
 #AnimationDiv {
     display: flex;
     max-width: 1230px;
     margin: 0 auto;
     height: 615px;
 }
 /* Div image 1 + 2 */
 
 .aniDiv1,
 .aniDiv2 {
     width: 50%;
     height: 100%;
     position: relative;
     overflow: hidden;
     z-index: 0;
 }
 
 .aniDiv1 {
     background: #ffbf00;
 }
 
 .aniDiv2 {
     background: #f83e00;
     color: white;
 }
 /* Bage */
 
 .aniDiv1 .badge,
 .aniDiv2 .badge {
     width: 95px;
     height: 95px;
     position: absolute;
     top: 34px;
     left: calc(50% + 48px);
     width: 120px;
     height: 120px;
     transition: left 0.3s ease-in-out;
     z-index: 11;
 }
 /* Image */
 
 .aniDiv2 .img,
 .aniDiv1 .img {
     background-size: contain;
     height: 80%;
     top: 50%;
     transform: translateY(-50%);
     width: 100%;
     left: 0px;
     background-repeat: no-repeat;
     background-position: 50% 50%;
     position: relative;
     z-index: 10;
     transition: left 0.2s linear 0.2s, width 0.2s linear 0.2s;
 }
 
 .aniDiv1 .img {
     background-image: url('/wp-content/uploads/2019/05/TUDUY_1 cybersoft.png');
 }
 
 .aniDiv2 .img {
     background-image: url('/wp-content/uploads/2019/05/fe_1.png');
 }
 /* Text */
 
 .aniDiv1 .title,
 .aniDiv2 .title {
     position: absolute;
     left: 95px;
     top: 20px;
     opacity: 0;
     transition: all 0.2s linear 0.2s;
     font-size: 15px;
     line-height: 15px;
     font-weight: 700;
     color: white;
 }
 
 .aniDiv1 .content,
 .aniDiv2 .content {
     position: absolute;
     top: calc(20px + 25px);
     left: 50%;
     transform: translateX(-50%);
     z-index: 9;
     font-weight: 600;
     line-height: 39px;
     font-size: 28px;
     opacity: 0;
     transition: all 0.2s linear 0.2s;
     color: white;
 }
 
 .aniDiv1 .details,
 .aniDiv2 .details {
     opacity: 0;
     position: absolute;
     top: calc(45px + 240px);
     left: 40px;
     line-height: 35px;
     font-size: 18px;
     font-weight: 400;
     transition: top 0.2s linear 0.3s, opacity 0.2s linear 0.2s;
     display: flex;
     color: white;
 }
 
 .aniDiv1 .details .iconAr,
 .aniDiv2 .details .iconAr {
     border: 1px solid black;
     border-radius: 50%;
     width: 30px;
     height: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .aniDiv1 .title,
 .aniDiv1 .content,
 .aniDiv1 .details {
     color: black;
 }
 
 .aniDiv1 .details .iconAr i,
 .aniDiv2 .details .iconAr i {
     position: absolute;
     font-size: 14px;
 }
 
 .aniDiv1 button,
 .aniDiv2 button {
     position: absolute;
     top: calc(350px + 120px);
     left: 40px;
     font-size: 18px;
     font-weight: 400;
     padding: 15px 25px;
     color: #fff;
     background: #000;
     border: none;
     border-radius: 30px;
     opacity: 0;
     transition: top 0.2s linear 0.4s, opacity 0.2s linear 0.4s;
 }
 /* icon */
 
 .iconAr {
     margin-left: 15px;
 }
 
 .iconDow {
     padding-right: 10px;
 }
 /* Hover */
 
 .aniDiv1:hover .img,
 .aniDiv2:hover .img {
     width: 50%;
     left: 50%;
 }
 
 .aniDiv1:hover .badge,
 .aniDiv2:hover .badge {
     left: 100%;
 }
 
 .aniDiv1:hover .title,
 .aniDiv2:hover .title {
     left: 40px;
     opacity: 1;
 }
 
 .aniDiv1:hover .content,
 .aniDiv2:hover .content {
     left: 40px;
     opacity: 1;
     transform: translateX(0);
 }
 
 .aniDiv1:hover .details,
 .aniDiv2:hover .details {
     top: calc(45px + 210px);
     opacity: 1;
 }
 
 .aniDiv1:hover button,
 .aniDiv2:hover button {
     top: calc(320px + 90px);
     opacity: 1;
 }
 
 .div3:hover button,
 .div4:hover button {
     top: calc(360px + 90px);
     opacity: 1;
 }
 /* 
 */
 
 #H1_1 {
     box-sizing: border-box;
     color: rgb(255, 255, 255);
     height: 82px;
     scroll-behavior: smooth;
     text-align: center;
     text-decoration: none solid rgb(255, 255, 255);
     text-shadow: rgb(255, 14, 131) -5px -10px 7px;
     width: 645.562px;
     word-spacing: -2px;
     column-rule-color: rgb(255, 255, 255);
     perspective-origin: 322.781px 41px;
     transform-origin: 322.781px 41px;
     caret-color: rgb(255, 255, 255);
     border: 0px none rgb(255, 255, 255);
     font: normal normal 600 normal 60px / normal;
     list-style: none outside none;
     margin: 0px 0px 20px;
     outline: rgb(255, 255, 255) none 0px;
 }
 /*#H1_1*/
 
 #H1_1:after {
     color: rgb(255, 255, 255);
     content: '"' '!"';
     text-align: center;
     text-decoration: none solid rgb(255, 255, 255);
     text-shadow: rgb(255, 14, 131) -5px -10px 7px;
     word-spacing: -2px;
     column-rule-color: rgb(255, 255, 255);
     perspective-origin: 0px 0px;
     transform-origin: 0px 0px;
     caret-color: rgb(255, 255, 255);
     border: 0px none rgb(255, 255, 255);
     font: normal normal 600 normal 60px / normal;
     list-style: none outside none;
     outline: rgb(255, 255, 255) none 0px;
 }
 /*#H1_1:after*/
 
 #H1_1:before {
     color: rgb(255, 255, 255);
     content: '"THE' '"';
     text-align: center;
     text-decoration: none solid rgb(255, 255, 255);
     text-shadow: rgb(255, 14, 131) -5px -10px 7px;
     word-spacing: -2px;
     column-rule-color: rgb(255, 255, 255);
     perspective-origin: 0px 0px;
     transform-origin: 0px 0px;
     caret-color: rgb(255, 255, 255);
     border: 0px none rgb(255, 255, 255);
     font: normal normal 600 normal 60px / normal;
     list-style: none outside none;
     outline: rgb(255, 255, 255) none 0px;
 }
 /*#H1_1:before*/
 
 .animationDiv__link {
     display: block;
     height: 100%;
     width: 100%
 }
 
 .div3 {
     background: rgba(68, 68, 68, 1.00);
 }
 
 .div4 {
     background: rgba(88, 99, 117, 1.00)
 }
 
 .div3 .img {
     background-image: url('/wp-content/uploads/2019/05/fs_2.png');
 }
 
 .div4 .img {
     background-image: url('/wp-content/uploads/2019/05/java_2.png');
 }
 
.div5 .img {
     background-image: url('/wp-content/uploads/2019/11/React_Native.png');
 }
 
 .div6 .img {
     background-image: url('/wp-content/uploads/2019/11/learning_path-new.png');
 }
 .div3 button,
 .div4 button {
     background: #FFBE01;
 }
 /* responsive */
 /* Ipad Pro */
 
 @media (max-width:1024px) {
     #AnimationDiv {
         height: 471px;
     }
     /* content */
     .aniDiv1 .content,
     .aniDiv2 .content {
         width: 100px;
     }
 }
 /* Iphone X  horizontal */
 
 @media (max-width:812px) {
     #AnimationDiv {
         height: 387px;
     }
     .aniDiv1 .title,
     .aniDiv2 .title,
     .aniDiv1 button,
     .aniDiv2 button,
     .aniDiv1 .details,
     .aniDiv2 .details {
         display: none;
     }
     .aniDiv1 .content,
     .aniDiv2 .content {
         font-size: 30px;
         line-height: 35px;
         margin-top: 0;
     }
 }
 /* Ipad */
 
 @media (max-width:768px) {
     #AnimationDiv {
         height: 363px;
     }
     .aniDiv1 .title,
     .aniDiv2 .title {
         display: none;
     }
     .aniDiv1 .details,
     .aniDiv2 .details {
         display: none;
     }
     .aniDiv1 button,
     .aniDiv2 button {
         display: none;
     }
     /* content */
     .aniDiv1 .content,
     .aniDiv2 .content {
         width: 100px;
         font-size: 23px;
         line-height: 30px;
         top: 1px;
         margin-top: 30px;
     }
 }
 /* Iphone 6 plus */
 
 @media (max-width:414px) {
     #AnimationDiv {
         height: 186px;
     }
     /* content */
     .aniDiv1 .content,
     .aniDiv2 .content {
         display: none;
     }
     .aniDiv1 .details,
     .aniDiv2 .details {
         display: flex;
         top: 15px;
         left: 20px;
         transition: left 0.2s linear 0.3s, opacity 0.2s linear 0.2s;
     }
     .aniDiv1:hover .details,
     .aniDiv2:hover .details {
         top: 15px;
         left: 0;
     }
     .aniDiv1 .details span,
     .aniDiv2 .details span {
         display: none;
     }
     /* bage */
     .aniDiv1 .badge,
     .aniDiv2 .badge {
         top: 10px;
         left: 50%;
         width: 70px;
     }
     .aniDiv1 .badge>img,
     .aniDiv2 .badge>img {
         width: 100%;
     }
 }