/*
COLOR PALETTE
https://coolors.co/f7fff7-343434-2f3061-ffe66d-a1c6d7
#183855 - dark blue
#56B5FB - light blue 
#FF5353 - red
#FCC518 - yellow
#FEFEFE - white
*/



/* Global styles
------------------------------------*/
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

body {
    background-color: #FEFEFE;
    color: #131B23; /*dark blue*/
    margin: 0;
    padding: 0;
    font-family: 'Roboto Slab', helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

@font-face {
    font-family: 'Roboto Slab';
    src: url(fonts/css/RobotoSlab-Light.ttf);
    font-weight: lighter;

    font-family: 'Roboto Slab';
    src: url(fonts/css/RobotoSlab-Regular.ttf);    
    font-weight: normal;
    
    font-family: 'Roboto Slab';
    src: url(fonts/css/RobotoSlab-Medium.ttf);    
    font-weight: medium;

    font-family: 'Roboto Slab';
    src: url(fonts/css/RobotoSlab-SemiBold.ttf);
    font-weight: 600;

    font-family: 'Roboto Slab';
    src: url(fonts/css/RobotoSlab-Bold.ttf);
    font-weight: bold;

    font-family: 'Roboto Slab';
    src: url(fonts/css/RobotoSlab-ExtraBold.ttf);
    font-weight: 800;

    font-family: 'Roboto Slab';
    src: url(fonts/css/RobotoSlab-Black.ttf);
    font-weight: 900;
}


h1 {
    
    color: #FEFEFE; /*white*/
    font-weight: 500;
    text-shadow: 5px 5px 20px #00000073;
}
h2 {
    font-size: 2.6em; /*46px*/
    line-height: 50px; /*50px*/
    font-weight: 200;
    color: #FEFEFE; /*white*/
}
h3 {
    font-size: 3.25em; /*52pt*/
    line-height: 3.75em; /*60px*/
}
h4 {
    font-size: 2em; /*32pt*/
    line-height: 2.25em; /*36px*/
}
.mainNav a {
    color: #FEFEFE; /*white*/
    font-weight: 400;
}

/* Header
------------------------------------*/
header {
    /* height: 80vh;
    max-height: 1000px; */
    max-width: 100%;
    background-image: url('../images/home-header.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top right;
    padding: 51px 90px 120px 90px;
}
header.about {
    /* height: 80vh;
    max-height: 1000px; */
    max-width: 100%;
    background-image: url('../images/about-header.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top right;
    padding: 51px 90px 120px 90px;
}
header.adoptions {
    /* height: 80vh;
    max-height: 1000px; */
    max-width: 100%;
    background-image: url('../images/adoptions-header.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 40% 90%;
    padding: 51px 90px 120px 90px;
}
.why-adoption {
    /* height: 80vh;
    max-height: 1000px; */
    max-width: 100%;
    background-image: url('../images/why-header.jpg') !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 40% 90%;
    padding: 51px 90px 120px 90px;
}

.header-home .main-header .contact-us-header {
    height: 53vh !important;
}

.header-home.main-header h1,
.header-home.main-header h2 {
    margin:10px;
    width: 40%;
}
.header-home.main-header h2 {
    margin-bottom: 4%;
}
.mainNav{
    background-color: #183855; /*dark blue*/
    height: 104px;
    list-style-type: none;
    display: flex;
    justify-content: space-between; /*space-between; space-around*/
    padding: 22px 50px 0 50px;
}
.mainNav a {
    padding: 15px;
    margin-right: 50px;
    text-decoration: none;
    display: inline-flex;
    justify-content: flex-end;
}
.mainNav a:hover {
    border-bottom: #FF5353 6px solid;
}
.logo{
    padding: 0 0 10px 0;
    max-width: 300px;
}
a#logo-top {
    border-bottom: 0;
}

/* Footer
------------------------------------*/
footer{
    background-color: #183855;
    border-bottom: #FEFEFE 30px solid;
}
.footer-wrapper {
    padding-right: 10%;
    padding-left: 10%;
    margin: 0 auto;
    padding-top: 4em;
} 
.footer-logo img{
    width: 320px;
    padding-right: 4em;
}
.footer-info1, .footer-info2{
    width: 330px;
    color:#FEFEFE;
    font-weight: 200;
    padding-left: 4em;
}
.footer-copyRight{
    max-width: 80%;
    padding-left: 3%;
    padding-bottom: 1em;
}


/* Interactions
------------------------------------*/

/* home header button = button-1 */
.button-1 {
    margin-top: 30px;
    padding:20px 20px;
    border-radius: 56px;
    background-color: #FCC518; /*yellow*/
    font-size: 19x;
    font-weight: 500;
    text-transform: uppercase;
    display: inline; 
    font-weight: 800;
}
.button-1:hover{
    background-color: #FF5353;
}
.button-1 a , .button-1 a:hover{
    text-decoration: none;
    color:#131B23;
    padding:30px;
}

.button-2 {
    margin-top: 30px;
    padding:20px 30px;
    border-radius: 56px;
    background-color: #FF5353;
    font-size: 19x;
    font-weight: 500;
    text-transform: uppercase;
    display: inline;
    font-weight: 800;

}
.button-2:hover{
    background-color: #FCC518; /*yellow*/
}

.button-3 {
    color: #FEFEFE;
    margin-top: 30px;
    padding:20px 30px;
    border-radius: 56px;
    background-color: #183855;
    font-size: 19x;
    font-weight: 500;
    text-transform: uppercase;
    display: inline;
}
.button-3:hover{
    background-color: #FF5353; /*yellow*/
}

.btn-scroll-up{
    position: relative;
    top: 0vh; 
    right: -15%;
    background-color: #FCC518;
    border-radius: 100%;
    width: 50px;
    height: 50px;
    background-image:url('../images/button-icon-scroll-up.svg');
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: 7px 10px;
}
.btn-scroll-up:hover{
    background-color: #FF5353;
}

/* menu button active */
.active{
    border-bottom: #FCC518 6px solid;
}






/* Services Bar
------------------------------------*/
.wrapper-services {
    /* max-width: 70%;
    margin: 0 auto;
    background-color: #183855; */

}
.services-bar {
    background-color: #183855; /*dark blue*/
    height: 150px;
	display: flex; /*flex*/ /*inline-flex makes the felx containers display inline, it doesn't change how the flex items are displayed, instead, it makes the flex container display in line.*/

}
.flex-container{
    display: flex; /*flex*/ /*inline-flex makes the felx containers display inline, it doesn't change how the flex items are displayed, instead, it makes the flex container display in line.*/
	flex-wrap: wrap; /*nowrap*/
	flex-direction: row; /*row OR column;*/
    color: #FEFEFE; /*white*/
    padding: 20px 150px;
    justify-content: space-evenly;
    align-items: center;
}
.flex-item{
    flex: 1 1 20px; /* flex: grow shrink basis; */
    justify-content: space-evenly;
    display: flex;
}
.flex-item img{
    max-height: 80px;
}
.flex-item h3, h3 a{
    font-size: 22px;
    line-height: 22px;
    font-weight: 600;
    color: #FCC518;
    padding-left: 10px;
    padding-bottom: 0; 
    margin: 5px 0; 
}
h3 a:hover{
    text-decoration: underline #FF5353;
    text-decoration-thickness: 3px;
}
.flex-item p{
    margin: 0;
    font-size: 14px;
    font-weight: 200;
    color: #FEFEFE;
    display: block;
    padding: 0 40px 10px 20px;
}


/* Section Adoption
------------------------------------*/

h3.adoption-heading{
    text-align: center;
    font-size: 42px;
    line-height: 50px;
    margin-top: 1em;
}
.adoption {
    display: flex;
    flex-direction: row; /*columns*/
    flex-wrap: wrap;
    margin: 2em 0;
    justify-content: space-between;
    

}
.adoption img {
    width: 200px;
    text-align: center;
    padding: 10px;
}



.wrapper-adoption.button-2{
    margin-bottom: 4em;
}


/* Section cta 1
------------------------------------*/
.cta {
    background-color: #56B5FB;
    max-height: auto;
    display: flex;

}
.cta-icon{
    margin: auto;
    float: left;
    padding-left: 15%;
    padding-top: 2%;
    text-align: center;
}
.cta-icon img{
    width: 7vw;
}
.cta-img img{
    margin: 0 auto;
    width: 100%;
    float: right;
}
.cta p {
    font-size: 1.8vw; /*1.8em / 28px;*/
    line-height: 2vw; /* 1.2em / 19.2px;*/
    font-weight: 800;
    color: #183855; /*dark blue*/
}

/* Section cta 2
------------------------------------*/
.cta2 {
    background-color: #FCC518;
    max-height: auto;
    display: flex;
}
.cta2-img img{
    display: flex;
    margin: 0;
    width: 120%;
    height:auto;
    order: 1;
}
.cta2-p{
    width: 60%;
    padding-left: 15%;
    padding-right: 15%;
    text-align: left;
    font-weight: 800;
    order: 2;
}
.cta2 p {
    font-size: 1.5em;;
    width: 60%;
    margin-top: 10%;
    margin-left: -50px;
    margin-bottom: 10% !important;
}


/*------------------------------------*/
/* About Us*/
/*------------------------------------*/

h3.ourValues-heading {
    text-align: none;
    font-size: 42px;
    line-height: 50px;
    display: block;
    text-align: center;
    margin: 0;
    padding: 40px 0 0;
}
.ourValues-container{
    padding-bottom: 5em;
}
.cta-about{
    background-color: #FCC518;
    padding: 4em 0;
}
.cta-about p{
    text-align: left;
    font-size: 1.5em !important;
    line-height: 1.2em !important;
    font-weight: 600 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.cta-about h4{
    text-align: left;
    font-size: 2em !important;
    font-weight: 800 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    color:#183855;
}
.cta.cta-about .cta-icon{
    margin-top: 0 !important;
}


.cta2.cta2-about .cta2-p{
    margin-top: 0 !important;
}
.cta2-about{
    background-color: #56B5FB;
    padding: 0;
}
.cta2-about h4{
    
    text-align: left;
    font-size: 2em !important;
    font-weight: 800 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    margin-left: -50px;
    color:#183855
}
.cta2-body{
    text-align: left;
    font-size: 1.7em !important;
    line-height: 1.5em !important;
    font-weight: 600 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* /////////////////////////////// */
/* Adoptions PAge */
/* ////////////////////////////// */
.wrapper-adoption.container {
    width: 50%;
    Height: auto;
    display: grid;
    grid-template-columns:  1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 20px;
    margin: 0 auto;
}
.pet-flex-item1 img, .pet-flex-item2 img, .pet-flex-item3 img,
.pet-flex-item4 img, .pet-flex-item5 img, .pet-flex-item6 img,
.pet-flex-item7 img, .pet-flex-item8 img, .pet-flex-item9 img {
    max-Width: 60%;
}


/* .pet-flex-item5 {
    background: PaleGreen;
    grid-column: 2/4;
} */

/* section body text and button */
.adoptions-body{
    height: auto;
    text-align: center;
    margin: 0 auto !important;
    margin-bottom: 4em !important;
    width: 50%;
}
.adoptions-body p.body {
    font-size: 1.1em;
    line-height: 1.3em;
    padding: 3em 0;

}

.adoption-heading.page-adoptions{
    margin-bottom: 2em;
}
.wrapper-adoption.container .button-2.adoptions-btn{
    margin: 0 auto !important;
    margin-top: 1em !important;
}

/* /////////////////////////////// */
/* Contact PAge */
/* ////////////////////////////// */
.wrapper-adoption.heading-contact {
    background: #56B5FB;
}

.form{
    margin-top: 3em;
    text-align: left;
}

input.form-submit-btn {
    padding:10px 20px;
    border-radius: 56px;
    background-color: #FCC518; /*yellow*/
    font-size: 19x;
    font-weight: 500;
    text-transform: uppercase;
    display: inline; 
    font-weight: 800;
    border-style: none;
}
input.form-submit-btn:hover{
    background-color: #FF5353;
}

.cta.contact-us{
    padding: 4em 0 !important;
}
.cta.contact-us h4{
    text-align: left;
    font-size: 1.2em;
    line-height: 1.5em;
    font-weight: 800;
    padding: 0;
    margin: 0;
}

.cta.contact-us p{
    text-align: left;
    font-size: 1.2em;
    line-height: 1.5em;
    font-weight: 400;
    padding: 0;
    margin: 0;
}