226 lines
4.4 KiB
CSS
226 lines
4.4 KiB
CSS
/* 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;
|
|
}
|