/* Carousel and grid css (the carousels and the feature grid, etc.)*/ .home-top-carousel{ height:300px; } .home-top-carousel .item, .home-top-carousel .item>a{ display:flex; background-color:var(--primary-color-3); color: var(--secondary-color); flex-direction:row; width:calc(100% - 40px); /* 260px */ padding: 0px 20px; } .home-top-carousel .item .text{ display:flex; flex-direction: column; flex:2 0; height:260px;/*100%*/ } .home-top-carousel .item .text .title{ min-height:10%; max-height:20%; vertical-align:middle; text-align:center; font-size:120%; } .home-top-carousel .item .text .description { flex: 2 0; overflow:auto; max-height:90%; display:flex; flex-direction:column; } .home-top-carousel .item .img { vertical-align:center; line-height:280px; display:flex; flex-direction:column; justify-content:center; align-content:center; height:280px; padding:10px 0px; } .home-top-carousel .item .img img { max-height:250px !important; max-width: calc(100vw /3); } /*Team carousel */ .employees-carousel{ margin:20px 0px; height:500px; } .employees-carousel .item{ display:flex; flex-direction:column; background-color:var(--secondary-color-darklight); border-radius:20px; margin: 0px 5px; height:500px; } .employees-carousel .item .text { height:400px; overflow:auto; padding-bottom:5px; } .employees-carousel .item .text .title{} .employees-carousel .item .text .description{} .employees-carousel .item .img { padding-top:5px; justify-self:center; align-self:center; } .employees-carousel .item .img img{ height:100px; border:2px solid var(--primary-color-darkest); border-radius:100%; } /* LAST NEWS CAROUSEL */ .last-news-carousel{ position:relative; height:300px; } .last-news-carousel .item, .last-news-carousel .item>a{ position:relative; display:flex; background-color:var(--primary-color-3); font-size:150%; -webkit-text-stroke: 1px var(--primary-color-darkest); -webkit-text-fill-color: var(--secondary-color); flex-direction:row; width:calc(100% - 40px); /* 260px */ padding: 0px 20px; } .last-news-carousel .item .text{ display:flex; z-index:2; flex-direction: column; justify-content:center; align-items:center; text-align:center; width:100%; height:260px;/*100%*/ } .last-news-carousel .item .text .title{ min-height:20%; max-height:20%; vertical-align:middle; text-align:center; font-size:120%; overflow:auto; line-break:break-word; word-break:break-all; } .last-news-carousel .item .text .description { overflow:auto; max-height:80%; display:flex; flex-direction:column; } @media (max-width:700px){ .last-news-carousel .item .text .description { display:none; } .last-news-carousel .item .text .title{ color: red; height:250px; max-height:250px; line-break:unset; word-break:unset; overflow:auto; } } .last-news-carousel .item .img { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:1; height:100%; max-width:80vw!important; overflow:hidden; } .last-news-carousel .item .img img { height:100%; z-index:3; max-width:80vw!important; } .features{ /*not a carousel but a grid */ display:flex; flex-wrap:wrap; flex-direction:row; justify-content:space-around; width:calc(100% - 20px); padding:10px; } .features .item, .features .item>a{ display:flex; flex-direction:column; width: 300px; height: 250px; color: var(--primary-color); } .features .item .icon { align-self:center; display:flex; align-items:center; justify-content:center; height: 90px; width:90px; align-self:center; border-radius:100%; border: var(--primary-color) solid 5px; } .features .item .text .title{ text-align:center; } .features .item .text .description { text-align:center; } .last-articles-grid-3{ /*not a carousel but a grid */ display:flex; flex-wrap:wrap; flex-direction:row; justify-content:space-around; width:calc(100% - 20px); padding:10px; } .last-articles-grid-3 .item, .last-articles-grid-3 .item>a{ display:flex; flex-direction:column; width: 300px; height: 250px; color: var(--primary-color); } .last-articles-grid-3 .item .baneer { align-self:center; display:flex; align-items:center; justify-content:center; height: 90px; width:90px; align-self:center; border-radius:100%; border: var(--primary-color) solid 5px; overflow:hidden; } .last-articles-grid-3 .item .baneer img{ max-height:90px!important; } .last-articles-grid-3 .item .text .title{ text-align:center; } .last-articles-grid-3 .item .text .description { text-align:center; }