todos-contra-el-fuego-web/imports/ui/pages/Index/Index-custom.scss
2017-11-29 13:38:24 +01:00

142 lines
2.3 KiB
SCSS

@import '../../stylesheets/colors';
.carousel-item {
height: 65vh;
min-height: 300px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.carousel-control-next-icon, .carousel-control-prev-icon {
width: 40px;
height: 40px;
}
.carousel-indicators li {
height: 5px;
border-radius: 2px;
cursor: pointer;
}
.carousel-caption > h3 {
> i {
display: none;
}
font-size: 2.2rem;
text-shadow: 2px 2px 1px #280B0B;
}
.py-5 > .container > {
div > h1 {
color: #280B0B;
font-weight: bold;
text-transform: uppercase;
font-size: 10px;
}
p {
padding-top: 10px;
font-size: 1.1em;
}
}
.slide-2-icon {
border-radius: 50%;
position: relative;
width: 30%;
top: 25%;
left: 35%;
border: 14px solid #FFF;
opacity: .5;
&:after {
content: "";
display: block;
padding-bottom: 100%;
}
}
.slide-1-icon, .slide-2-icon, .slide-3-icon, .slide-4-icon {
position: relative;
top: 35%;
}
.slide-1-icon:before, .slide-2-icon:before, .slide-3-icon:before, .slide-4-icon:before {
font-family: FontAwesome;
position: absolute;
font-size: 140px;
color: white;
opacity: .7;
right: 35%;
text-shadow: 1px 1px #280B0B;
}
.slide-1-icon:before {
content: "";
}
.slide-2-icon {
top: 20%;
}
.slide-2-iconDISABLED:before {
content: "";
font-size: 320px;
top: -10%;
}
.slide-3-icon:before {
content: "";
}
.slide-4-icon:before {
content: "";
}
.scale__container--js {
text-align: center;
}
.scale--js {
display: inline-block;
transform-origin: 50% 0;
-webkit-font-smoothing: antialiased;
transform: translate3d(0, 0, 0);
}
.carousel-item-1 {
background-image: url('/home-slide1.jpg')
}
.carousel-item-2 {
background-image: url('/home-slide2.jpg')
}
.carousel-item-3 {
background-image: url('/home-slide3.jpg')
}
.carousel-item-4 {
background-image: url('/home-slide4.jpg')
}
.full-width {
position: relative;
width: 100vw;
margin-left: calc(-50vw + 50% - 8px);
position: relative;
/*
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;*/
}
.participe-btn {
background-color: $todos-palette1;
color: white;
text-transform: uppercase;
}