@import url('https://fonts.googleapis.com/css?family=Fjalla+One&display=swap');
html,body{
background-color: #fFF;
margin: 0;
scroll-behavior: smooth;
overflow-x: hidden;
}
.navbar > .navbar-toggler {
margin:0 !important;
padding: 10px !important;
outline: none;
}
.navbar-nav li{
padding-left:20px;
padding-right:20px;
}
img{
width: 100%;
}
.display-1{
font-family: 'Fjalla One', sans-serif;
color: #F39C12;
}
.btn{
width: 25%;
margin-top: 10px;
border-radius: 50px;
}
#wrapper{
background-image: url('../images/bg-misson-vision.png');
background-repeat: no-repeat;
background-size: 100%;
height: 600px;
width: 100%;
}
hr{
background-color: 	#F39C12;
width: 20%;
}
#mv{
margin-top: 5vw;
}
#volunteer-frame{
background-image: url('../images/volunteer-bg.png');
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 650px;
}
.btn{
width: 25%;
border-radius: 50px;
}
#event-frame{
background-image: url(../images/event-date-bg.png);
background-size: cover;
background-repeat: no-repeat;
height: 600px;
width: 100%
}
#col-row{
margin-left: 5vw;
}
#meet-our-pets{
background-image: url(../images/meet-our-animals.png);
background-size: cover;
background-repeat: no-repeat;
height: 500px;
width: 100%;
}
#support-frame{
height: 600px;
width: 100%;
}
.img-support{
width: 20vw;
height: 25vw;
}
.img-thumbnail{
width: 22vw;
height: 22vw;
background-color: red;
}
.footer{
background-color: #D23838;
width: 100%;
height:20vw;
margin-top: 5vw;
}
#fb-plugin{
padding-left: 6vw;
}
#container-banner{
margin: 5vw;
}
.fa{
font-size: 36px !important;
margin:5px 5px;
color: #EC7063 ;
}
.fa:hover{
color: #FFF !important;
transition: 0.3s;
}
h1{
font-size: 10vw;
}
.footer-fixed{
background-color: #B03A2E;
width: 100%;
height:4vw;
margin-top: 0px;
}
@media (max-width: 991.98px) {
#wrapper{
background-image: url('../images/bg-misson-vision.png');
background-repeat: repeat;
background-size: 100%;
height: auto;
width: 100%;
}
hr{
background-color: 	#F39C12;
width: 35%;
}
#volunteer-frame{
background-image: url('../images/volunteer-bg.png');
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: auto;
}
#event-frame{
background-image: url(../images/event-date-bg.png);
background-size: cover;
background-repeat: no-repeat;
height: auto;
width: 100%
}
#meet-our-pets{
background-image: url(../images/meet-our-animals.png);
background-size: cover;
background-repeat: no-repeat;
height: auto;
width: 100%;
}
.display-1{
font-family: 'Fjalla One', sans-serif;
font-size:7px;
}
.img-carousel{
width: 100%;
height: 80vw;
}
h3{
font-size: 3rem;
}
.img-pets-support{
width: 100%;
height: 40vw;
}
.btn{
width: 80%;
margin-bottom: 5vw;
}
.img-support{
width: 80%;
height: 100vw;
margin-left: 10vw;
}
#support-frame{
height: auto;
width: 100%;
}
.footer{
background-color: #D23838;
width: 100%;
height: auto;
margin-top: 2vw;
}
p{
font-size: 3vw;
}
.display-4{
font-size: 5vw;
}
#fb-plugin{
padding-left: -3vw;
}
.banner-img{
width: 180%;
height: 50vw;
}
.h1{
font-size: 1vw;
}
.col-md-10{
text-align: center;
margin-left: 9vw;
margin-top: 5vw;
}
.footer-fixed{
background-color: #B03A2E;
width: 100%;
height:auto;
margin-top: 0px;
}
@media (max-width: 767.98px) {
#wrapper{
background-image: url('../images/bg-misson-vision.png');
background-repeat: repeat;
background-size: 100%;
height: auto;
width: 100%;
}
hr{
background-color: 	#F39C12;
width: 35%;
}
#volunteer-frame{
background-image: url('../images/volunteer-bg.png');
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: auto;
}
#event-frame{
background-image: url(../images/event-date-bg.png);
background-size: cover;
background-repeat: no-repeat;
height: auto;
width: 100%
}
#meet-our-pets{
background-image: url(../images/meet-our-animals.png);
background-size: cover;
background-repeat: no-repeat;
height: auto;
width: 100%;
}
.display-1{
font-family: 'Fjalla One', sans-serif;
font-size:7px;
}
.img-carousel{
width: 100%;
height: 80vw;
}
h3{
font-size: 3rem;
}
.img-pets-support{
width: 100%;
height: 40vw;
}
.btn{
width: 80%;
margin-bottom: 5vw;
}
.img-support{
width: 80%;
height: 100vw;
margin-left: -5vw;
}
#support-frame{
height: auto;
width: 100%;
}
.footer{
background-color: #D23838;
width: 100%;
height: auto;
margin-top: 2vw;
}
p{
font-size: 3vw;
}
.display-4{
font-size: 5vw;
}
#fb-plugin{
margin-left: -15vw;
}
.banner-img{
width: 100%;
height: 50vw;
}
.h1{
font-size: 1vw;
}
.col-sm-6{
text-align: left;
}
#frontrow-frame{
margin-left: -5vw;
}
.footer-fixed{
background-color: #B03A2E;
width: 100%;
height:auto;
margin-top: 0px;
}
h4{
text-align: center !important;
}
a >.text-white{
text-align: center !important;
}
.col-sm-3{
text-align: center !important;
}