html {
height:100%;
}
body {
height: 100%;
position: relative;
}
.jumbotron-fluid-1 {
background: url("./background-image/background.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
overflow-y: hidden;
margin-bottom: 0;
border-radius: 0;
color: white;
font-family: 'Roboto Condensed', sans-serif;
}
.jumbotron-fluid-1 p {
font-family: 'Righteous', cursive;
}
.jumbotron-fluid-2 {
background-image: url("./background-image/background.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
overflow-y: hidden;
margin-bottom: 0;
border-radius: 0;
color: white;
}
.jumbotron-fluid-3 {
background-color: #FF384B;
overflow-y: hidden;
margin-bottom: 0;
border-radius: 0;
color: white;
padding-top:0;
font-family: 'Roboto Condensed', sans-serif;
}
.jumbotron-fluid-4 {
background-color: #FF9C00;
overflow-y: hidden;
margin-bottom: 0;
border-radius: 0;
color: white;
padding-top:0;
font-family: 'Roboto Condensed', sans-serif;
}
input[type=text] {
background-color: rgba(0,0,0,0);
width: 100%;
border-style: solid;
border-color: white;
padding: 5px;
border-width: thick;
color: white;
font-size: 1.2em;
font-family: 'Roboto Condensed', sans-serif;
}
input[type=text]::-webkit-input-placeholder {
color: white;
font-size: 1em;
font-family: 'Roboto Condensed', sans-serif;
}
#countdown {
margin-top: 0;
font-size: 8em;
}
.head {
margin-top: 10%;
}
.fa {
margin-right: 10px;
color:white;
}
.fa-facebook-official:hover {
color:#3B5998;
}
.fa-instagram:hover{
color:#cd486b;
}
.gall {
width:100%;
height:700px;
}
*, *::before, *::after {
box-sizing: border-box;
padding: 0;
margin: 0;
border: 0;
}
/* Slider style */
.cd-slider {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.cd-slider.ie9 slider-nav div span {
display: none;
}
.cd-slider ul li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
transition: visibility 0s .6s;
}
.cd-slider ul li::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
border-radius: 100%;
width: 135vh;
height: 135vh;
border: solid rgba(0,0,0,0.2);
border-width: 0;
transform: translate(-50%, -50%);
pointer-events: none;
transition: border-width .4s .6s;
}
.content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: 50% 100%;
background-size: auto 100%;
background-repeat: no-repeat;
mix-blend-mode: lighten;
opacity: 0;
transform: scale(1.2);
transition: opacity .4s .6s, transform .4s .6s;
}
.content .blockquote-1 {
margin-left: 23%;
margin-top: 15%;
position: relative;
z-index: 2;
max-width: 45%;
}
.content .blockquote-2 {
margin-left: 23%;
margin-top: 10%;
position: relative;
z-index: 2;
max-width: 45%;
}
.blockquote-1 p {
position: absolute;
font-family: 'Roboto Condensed', sans-serif;
margin-left: ;
font-size: 2rem;
margin-top: 20px;
margin-left: 27.5%;
margin-bottom: auto;
}
.blockquote-2 p {
position: absolute;
font-family: 'Roboto Condensed', sans-serif;
margin-left: ;
font-size: 2rem;
margin-top: 20px;
margin-left: 27.5%;
margin-bottom: auto;
}
/* current slide ---------------------------------*/
.cd-slider li.current_slide {
visibility: visible;
}
.cd-slider li.current_slide::before {
border-width: 16rem;
}
.cd-slider li.current_slide .content {
opacity: 1;
transform: scale(1);
}
/* nav ---------------------------------*/
.slider-nav div {
position: absolute;
top: 50%;
left: 4%;
width: 5rem;
height: 5rem;
margin-top: -2.5rem;
list-style: none;
}
.slider-nav div:last-of-type {
left: auto;
right: 4%;
}
.prev, .next {
position: relative;
z-index: 100;
width: 100%;
height: 100%;
display: block;
border-radius: 100%;
transition: box-shadow .3s;
}
.prev::before, .prev::after, .next::before, .next::after {
content: '';
position: absolute;
left: 43%;
background: #fff;
width: .4rem;
min-width: 3px;
border-radius: 3px;
height: 34%;
}
.prev::before {
transform: rotate(45deg);
top: 24%;
}
.prev::after {
transform: rotate(-45deg);
bottom: 24%;
}
.next::before, .next::after {
left: auto;
right: 43%;
}
.next::before {
transform: rotate(-45deg);
top: 24%;
}
.next::after {
transform: rotate(45deg);
bottom: 24%;
}
.prev:hover, .next:hover {
box-shadow: 0 0 0 1rem rgba(0, 0, 0, 0.15);
}
.slider-nav > div > span {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 100%;
z-index: 5;
pointer-events: none;
will-change: width, height;
transform: translate(-50%, -50%);
transition: width .6s, height .6s;
}
@media screen and (max-width: 568px) {
#countdown {
font-size:50px;
}
.head {
font-size: 4em;
}
.display-5 {
font-size: 1em;
}
#data {
text-align: center;
font-size: 14px;
}
.prev {
position: relative;
z-index: 100;
width: 50%;
height: 50%;
display: block;
border-radius: 100%;
transition: box-shadow .3s;
}
.next {
position: relative;
z-index: 100;
width: 50%;
height: 50%;
display: block;
border-radius: 100%;
transition: box-shadow .3s;
float: right;
}
.sponsor-square {
height: 200px;
width: 200px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
}
.sponsor-rectangle {
height: 200px;
width: 300px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
}
.gall {
width:100%;
height:300px;
}
.content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: 50% 100%;
background-size: auto 100%;
background-repeat: no-repeat;
mix-blend-mode: lighten;
opacity: 0;
transform: scale(1.2);
transition: opacity .4s .6s, transform .4s .6s;
}
.content .blockquote-1 {
margin-left: 23%;
margin-top: 50%;
position: relative;
z-index: 2;
max-width: 45%;
}
.content .blockquote-2 {
margin-left: 23%;
margin-top: 40%;
position: relative;
z-index: 2;
max-width: 45%;
}
.blockquote-1 p {
position: absolute;
font-family: 'Roboto Condensed', sans-serif;
margin-left: ;
font-size: 4em;
margin-top: 20px;
margin-left: 27.5%;
margin-bottom: auto;
}
.blockquote-2 p {
position: absolute;
font-family: 'Roboto Condensed', sans-serif;
margin-left: ;
font-size: 4em;
margin-top: 20px;
margin-left: 27.5%;
margin-bottom: auto;
}
}
.sponsor-square {
height: 200px;
width: 200px;
}
.sponsor-rectangle {
height: 200px;
width: 300px;
}