/***************** DESKTOP *****************/
@media only screen and (min-width:600px){

*{
    margin: 0;
    padding: 0;
}

header .webNav{ 
        background-color: #172533;
        display: flex; /*flex allows the text to come up right next to the logo*/
        padding: 15px;
        align-items:center; /*this centers the logo and text along the vertical axis*/
        height: 70px;
    }

    nav{
        width: 100%;
        display: flex;
        justify-content: space-between; /*space-between puts space between restaurants/service provider links and the other subpage links*/
    }

    .logo-noRoopairs{ /*this controls the sizing of the logo that's just the kangaroo head and acts also as a link*/
        height: 50px;
        margin-left: 15px;
        margin-right: 20px;
        margin-top: 3px; /*this specific margin keeps the logo in the exact same place as the initial page... SO if you were to click it to go to index.html the kangaroo head wouldn't shift up or down*/
    }

    ul:first-child{ /*this controls RESTAURANT and SERVICE PROVIDER links*/
        display: flex;
        flex-direction: row;
        justify-content: flex-start; /*this keeps these links at the left of the nav closest to the logo*/
        min-width: 319px;
        font-family: 'nunito-sans',sans-serif;
        font-style: normal;
        font-weight: 400;
    }

    ul:nth-child(2){
        display: flex;
        justify-content: flex-end; /*this keeps these subpage links at the right of the nav farthest from the logo*/
        min-width: 434px;
        font-family: 'nunito-sans', sans-serif;
        font-style: normal;
        font-weight: 300;
        font-size: 13px;
        margin-right: 10px;
    }

    nav li{
        flex-direction: row;
        list-style-type: none;
        margin: 4px;
    }

    nav a{
        text-decoration: none; /*this takes away the underline on the links*/
        margin: 10px;
        color: white;
    }

    nav .greenHover:hover{
         color: #27CDA3;
     }
    
    nav .yellowHover:hover{
         color: #febd2c;
    }

    nav a:hover{
         color: #27CDA3;
     }
    
    #currentPage{
        color: #27CDA3;
        font-weight: 600;
    }

    header .mobileNav{
        display: none;
    }

main{
    display: flex;
    min-height: 100vh;
    flex-direction:column;
    width: auto;
    }

#firstscreen { /* part of page you see when you open restaurant site */
    display: flex;
    min-height: 600px;
    height: 100vh;
    width: 100vw;
    flex-direction:row;
    background:linear-gradient(0deg,rgba(31,43,53,0.8),rgba(31,43,53,0.8)),url(images/restaurant-background.jpg); /* puts overlay over image */
    background-size: cover;
    }

#opening{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    }

#pic{
    display: flex;
    align-items: center;
    justify-content: left;
    }

.pic{
    max-height: 400px;
    margin-left: 10%;
    align-items: left;
    justify-content: center;
    flex-direction:row;
}

#titles{ /* text that goes next to app image */
    display: flex;
    flex-direction: column;
    min-width: 400px;
    max-width: 550px;
    margin: 10%;
    align-items: left;
    justify-content: left;
    flex-direction: column;
    }

.green{
    color: #27CDA3;
    font-weight: 900; 
}
    
    #titles h1{
        font-family: nunito-sans, sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: calc(2.2vw);
        color: white;
        }

    #titles h2{
        font-family: nunito, serif;
        font-weight: 200;
        font-style: normal;  
        font-size: calc(1.2vw);
        color: white;
        }

.chat{
    max-height: 100px;
    width: auto;
    position: fixed;
    right: 10px;
    bottom: 40px;
    z-index: 10;
    }


/* BEGINNING of "who we are" section */
#weare {
    background-color: #ECF0F1;
    width: 100vw;
    }

#whoweare {
    width: 80vw;
    display: flex;
    margin: auto;
    padding: 80px;
    flex-direction: row;
}

#whowe{
    display: flex;
    flex-direction: column;
    justify-content: center;
    }

    h3{
        font-family: nunito-sans, sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: calc(2.3vw);
        color: #2E333A;
        opacity: .56;
        padding: 1vw 0vw;
        }
    
    h4{
        color: #2E333A;
        font-family: nunito, serif;
        font-weight: 600;
        font-style: normal;
        font-size: calc(2.8vw);
        padding: 1vw 0vw;
        }

/* to get the "FREE" to be teal */    
  #free {
        color: #27CDA3;
        }

    p{
        color: #2E333A;
        font-family: nunito-sans, sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: calc(1.8vw);
        padding: 1vw 0vw;
        }
    
    /* this is the image in the "who we are" section */
    #whoweare img {
        width: auto;
        height: 25vw;
        background: transparent;
        float: right;
        padding: 7vw;
        }
/* END of "who we are" section */


/* BEGINNING of "our services" section */

#ourservices {
    display: flex;
    margin: auto;
    width: 80vw;  
    padding: 80px;
    flex-direction: column;
    align-content: flex-start;
    background-color: white;
    }
    

    #ourservices h5{
        color: #2E333A;
        font-family: nunito, serif;
        font-weight: 600;
        font-style: normal;
        font-size: calc(2.8vw);
        padding: 1vw 0vw;
        text-align: center;
        }

#sections{
    display: flex;
    flex-direction: row;
    text-align: center;
    }

#sections h5{
    font-size: calc(1.7vw);
    }

#sections p{
    font-size: calc(1.1vw);
    }

    .section1, .section2, .section3 {
        width: 12vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: #ECF0F1;
        padding: 4vw 4vw 1vw 4vw;
        margin: 60px auto 0px auto;
        }

    /* how do we make these aligned horizontally?? */
 #sections img {
        height: 12vw;
        margin-top: -160px;
        }

/* END of "our services" section */



/* BEGINNING of "how it works" section */
#howitworks{
    width: 100%;
    position: relative;
    background-color: #ECF0F1;
    }

#subtitle{
    display: flex;
    flex-direction: column;
    align-content: center;
}

    #subtitle h3, #subtitle h4{
        width: 80vw;
        margin: auto;
        margin-left: 22vh;
        }
        
    #subtitle h3{
            margin-top: 14vh;
            }
    #subtitle h4{
            padding: 0;
            }

/* BEGINNING of slider */
/* code adjusted from http://thecodeplayer.com/walkthrough/css3-image-slider-with-stylized-thumbnails */
.slider{
	width: 40vw; /*Same as width of the large image*/ /*Instead of height we will use padding */
	padding-top: 18vh; /*That helps bring the labels down */
	padding-bottom: 25vh;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    }

#step {
    display: flex;
    width: 50vw;
    margin-left: 10vmax;
    }

#step p{
    font-family: nunito-sans, sans-serif;
    font-weight: 300;
    padding: .75vw;
    color: #707070;
    }

#step p:first-child{
    color: #707070;
    font-size: 5.5vw;
    font-family: nunito-sans, sans-serif;
    font-weight: 700;
    font-style: normal;
    float: left;
    }

#second{
    font-size: 2.5vh;
    font-family: nunito-sans, sans-serif;
    font-weight: 600;
    font-style: normal;
    }


/* to add transitions */
.slider>img{
	position: absolute;
    margin-top: 10px;
    left: 0;
    padding-left: 15%;
    transition: all 0.5s;
    height: 50vw;
    max-height: 600px;
    min-height: 250px;
}

.slider input[name='slide_switch'] {
	display: none;
}

.slider label {
	/*Lets add some spacing for the thumbnails */
	cursor: pointer;
	transition: all 0.5s;
    margin-left: 0;
    align-content: center;
    font-size: 2px;;
}

.slider label img{
	display: block;
}

.slider input[name='slide_switch']:checked+ label p{
    color: #5ACB80;
    font-weight: 700;
    font-size: 3vh;
    }

.slider input[name='slide_switch']:checked+ label p:first-child{
    text-decoration: underline;
    text-decoration-color: #27CDA3;
    }


/*Clicking any thumbnail now should change its opacity(style)*/ 

/*Time to work on the main images */
.slider input[name='slide_switch'] ~ img {
	opacity: 0;
	transform: scale(1.1);
}
/*That hides all main images at a 110% size. On click the images will be displayed at normal size to complete the effect */

.slider input[name='slide_switch']:checked+label+img {
	opacity: 1;
	transform: scale(1);
}

/*Clicking on any thumbnail now should activate the image related to it*/
/* code adjusted from http://thecodeplayer.com/walkthrough/css3-image-slider-with-stylized-thumbnails */

/* END of slider */


/* END of "how it works" section */



/* BEGINNING of "our benefits" section */   
/* adjust code to center benefits with space in between and on the sides*/
#ourbenefits {
    display: flex;
    margin: auto;
    width: 100vw;
    height: 100vh;
    background-color: #ECF0F1;
    }
    
    .bottom { /* its actually the top part though */
        display: flex;
        flex-direction: column;
		background-color: white;
        width: 100%;
        height: 50vh;
        margin-bottom: 0px;
        position: relative;
        }

    #ourbenefits h3{
        width: 80vw;
        margin: auto;
        margin-top: 14vh;
        margin-left: 22vh;
        }

#benefits {
    height: 50vh;
    width: auto;
    margin: auto;
    position: relative;
    display: flex;
    flex-direction: row;
    text-align: center;
    margin-top: 28vh;
    padding-bottom: 30vh;
    min-height: 100px;
    overflow: visible;
    margin-bottom: 20px;
    }

 #benefits h5{
        color: #2E333A;
        font-family: nunito, serif;
        font-weight: 600;
        font-style: normal;
        font-size: calc(3vmin);
        text-align: center;
        }

#benefits p{
    font-size: calc(2vmin);
    }

    .benefit1, .benefit2, .benefit3 {
        width: 14vw;
        min-width: 150px;
        display: flex;
        flex-direction: column;
        padding: 4vw 5vw 1vw 5vw;
        margin: auto;
        }


 #benefits img {
        width: auto;
        height: 12vw;
        margin: auto;
        margin-top: -80%;
        margin-bottom: 0px;
        }
/* END of "our benefits" section */


/* BEGINNING of "connect with us" section */

#connectwithus {
    display: flex;
    margin: auto;
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to right, #5FCA83, #21CFA6);
    }

#connect{
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: none;
    text-align: center;
    margin-bottom: 10vh;
    margin-top: 10vh;
    }

    h1{
        font-family: nunito, serif;
        font-weight: 700;
        font-style: normal;
        font-size: calc(2.2vw);
        color: white;
        padding-bottom: 10px;
        }

#connect p{
    font-size: calc(1.1vw);
    padding: 0;
    color: white;
    }

#form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30vw;
    height: auto;
    margin: auto;
    border: none;
    border-radius: 5px;
    margin-top: 30px;
    margin-left: 0px;
    margin-bottom: 60px;
    padding: 0px;    
    color: white;
    box-sizing: content-box;
    }  

fieldset { /* styles boxes */
    border: none;
    padding-bottom: 10px;
    padding-top: 5px;
    border-radius: 5px;
    }

/* how do we make the text white?? */
 .name, .phone, .email {
    width: 100%;
    padding: 0px;
    margin-top: 10px;
    border: 1px solid white;
    background-color: transparent;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 5px;
    font-family: nunito-sans, sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: white;
    }
    
   ::placeholder {
        color: white;
        font-family: nunito-sans, sans-serif;
        font-weight: 300px;
        }

input[type=submit] {
    width: 10vw;
    height: 50px;
    margin: auto;
    margin-bottom: 50px;
    padding: 20px 0px;
    color: teal;
    }

/* END of "connect with us" section */



/* BEGINNING of "Reviews" section */

 .goodCompany{
        padding: 5% 8% 8% 8%;
    }
    
.goodCompany h3{
        padding-top: 40px;
    }

.goodCompany .review{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.goodCompany .review img{
    max-width: 60px;
    padding-bottom: 40px;
    
}

.goodCompany h3{
    font-family: 'Nunito', sans-serif;
    color: rgba(46, 51, 58, .59);
    font-size: 35px;
    padding-bottom: 75px;
    letter-spacing: 3px;
    padding-left: 
}

.goodCompany p{
    font-family: 'Nunito Sans', sans-serif;
    font-size: 22px; 
    padding-bottom: 20px;
    width: 800px;
}

.goodCompany .reviewer{
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #707070;
    font-style: italic;
}

/* END of "Reviews" section */


/* FOOTER SECTION */
    footer{
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 210px;
        background-color: #172533;

        /**** Code below taken from https://codepen.io/cbracco/pen/zekgx ****/
        position: relative;
        width: 100%;
    }
    
    .contact-info > p,a{ /*this only controls the contact information listed in the footer along with the links.. but right now it just makes sure any link after the .contact-info div has no text decoration*/
        color: white;
        font-family: nunito-sans;"sans-serif";
        font-weight: 200;
        text-decoration: none;
        padding: 0;
    }

    footer .contact-info p{
        font-size: 20px;
    }
    
    .logo-footer{ /*this is the logo/roopairs/catchphrase in footer*/
        height: 67px;
    }

    .additional-links{ /*this div wraps around the fb/insta logo and meet the team link*/
        width: 135px;
        text-align: center; /*centers "Meet the Team" link along horizontal axis*/
    }

    .fb-insta{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .fb-insta-link{ /*this class handles the sizing of the facebook and instagram logo*/
        height: 55px;
    }

    .meetTeam{
        color: #5ACB80; /*hex code = lime green color*/
        font-family: nunito-sans; "sans-serif";
        font-weight: 700;
        font-size: 16px;
        text-decoration: none;
    }

} /* END OF DESKTOP MEDIA QUERY */



/***************** MOBILE *****************/
@media only screen and (max-width:600px){
    *{
        margin: 0;
        padding: 0;
    }

    header .mainHomeNav{ 
    background-color: #172533;
    display: flex;
    padding: 16px 30px;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    display: none;
}
    
header .mobileNav{
    background-color: #172533;
    display: flex;
    padding: 16px 30px;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}
    
header .hiddenNav{
    display: none;
}

header .webNav{
    display: none;
}
    
.logo{ 
    display: none;
}
    
.mobileLogo{
    display: flex;
    width: 60px;
    align-content: flex-end 
}
    
.menu{
    display: block;
}

.dropdownMenu {
    background-color: #172533;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: flex;
    padding: 0px;
}

.dropdown-content {
    display: none;
    position: fixed;
    background-color: #172533;
    min-width: 90%;
    margin-top: 20px;
    z-index: 1;
    right: 0;
    height: 525px;
    padding: 20px;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
    
.dropdown-content .ddRest{
    color: white;
    padding: 10px 16px;
    font-size: 27px;
    text-decoration: none;
    display: block;
}
    
.dropdown-content .ddSPro{
    color: white;
    padding: 10px 16px 50px 16px;
    font-size: 27px;
    text-decoration: none;
    display: block;
}
    
.dropdown-content .menuItems{
    color: white;
    padding: 5px 16px;
    font-size: 20px;
    text-decoration: none;
    display: block;
}
    
.dropdown-content .ddSocialMedia{
    color: white;
    display: flex;
    padding: 0px;
    padding-top: 75px;
}

.dropdown-content a:hover {
    color: #27CDA3
}

.dropdown:hover .dropdown-content {
    display: block;
}

/***********START OF ACTUAL WEBSITE***********/
    
main{
        display: flex;
        min-height: 100vh;
        flex-direction:column;
        width: auto;
        }

/* part of page you see when you open restaurant site */
    
    #firstscreen { 
        display: flex;
        height: 78vh;
        flex-direction:column;
        background-size:cover;
        background:linear-gradient(0deg, rgba(31,43,53,0.8), rgba(31,43,53,0.8)), url(images/restaurant-background.jpg);
        }

    #opening{
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
        flex-direction: column;
        }

    .green{
        color: #48be9c;
        font-weight: 900; 
    }
    
    .pic{
        max-height: 400px;
        width: 80vw;
        justify-content: center;
    }

    #titles{ /* text that goes next to app image */
        display: flex;
        flex-direction: column;
        min-width: 300px;
        max-width: 550px;
        margin: 10%;
        align-items: left;
        justify-content: left;
        flex-direction: column;
        }

        #titles h1{
            font-family: nunito-sans, sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: calc(5vw);
            color: white;
            }

        #titles h2{
            font-family: nunito, serif;
            font-weight: 200;
            font-style: normal;  
            font-size: calc(3vw);
            color: white;
            }

    .chat{
        display: none;
    }
    
    /* BEGINNING of "who we are" section */
#weare {
    background-color: #ECF0F1;
    width: auto;
    
    }

#whoweare {
/*    background-color: pink;*/
    display: flex;
    margin: auto;
    padding: 12vw 10vw 14vw 10vw;
    flex-direction: column;
    justify-content: center;
    height: 750px
}

#whowe{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 80vw;
    }

    h3{
        font-family: nunito, sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: calc(6vw);
        color: #2E333A;
        opacity: .56;
        padding: 1vw 0vw;
        margin-bottom: 2vh;
        }
    
    h4{
        color: #2E333A;
        font-family: nunito-sans, serif;
        font-weight: 600;
        font-style: normal;
        font-size: calc(5vw);
        padding: 1vw 0vw;
        }

/* to get the "FREE" to be teal */    
  #free {
        color: #27CDA3;
        }

    p{
        color: #2E333A;
        font-family: nunito-sans, sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 17.2px;
/*        font-size: calc(4.3vw);*/
        padding-top: 1vw;
        padding-bottom: 4vw;
        }
    
    /* this is the image in the "who we are" section */
    #whoweare img {
        width: 45vw;
        background: transparent;
        margin: 6vw auto 0vw auto;
        }
/* END of "who we are" section */


/* BEGINNING of "our services" section */

#ourservices {
    display: flex;
/*    margin: auto;*/
    width: auto;  
    padding: 12vw 10vw 14vw 10vw;
    flex-direction: column;
/*    align-content: flex-start;*/
/*    background-color: #FAB;*/
    }
    
    #ourservices h3{
        margin-bottom: 5vh;
    }
    

    #ourservices h5{
        color: #2E333A;
        font-family: nunito, serif;
        font-weight: 600;
        font-style: normal;
        font-size: calc(2.8vw);
        padding: 1vw 0vw;
        text-align: center;
        width: 170px;
        margin: 0px auto 9px auto;
        }


#sections{
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;;
    text-align: center;
/*    background-color: lightblue;*/
    }

#sections h5{
/*    font-size: 24px;*/
    font-size: calc(5.7vw);
    text-align: center;
}
    
    .section1{
        width: 53vw;
        height: 32vh;
        display: flex;
        align-items: center;
        flex-direction: column;
        background-color: #ECF0F1;
        padding: 8vw 4vw 14vw 4vw;
        margin: 60px auto 43px auto;
    }
    .section2{
        width: 53vw;
        height: 35vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #ECF0F1;
        padding: 4vw 4vw 8vw 4vw;
        margin: 60px auto 43px auto;
    }
    .section3{
        width: 53vw;
        height: 37vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #ECF0F1;
        padding: 4vw 4vw 8vw 4vw;
        margin: 60px auto 43px auto;
    }

    /* how do we make these aligned horizontally?? */
.our-service-icons {
        height: 31vw;
        margin: auto;
        
        margin-top: -80px;
        margin-bottom: 0px;
        }

/* END of "our services" section */



/* BEGINNING of "how it works" section */
#howitworks{
    width: 100%;
    position: relative;
    background-color: #ECF0F1;
    }

#subtitle{
    display: flex;
    flex-direction: column;
    align-content: center;
}

    #subtitle h3, #subtitle h4{
        width: 80vw;
        margin: auto;
        }
        
    #subtitle h3{
            margin-top: 14vh;
            }
    #subtitle h4{
            padding: 0;
            }

/* BEGINNING of slider */
/* code adjusted from http://thecodeplayer.com/walkthrough/css3-image-slider-with-stylized-thumbnails */
.slider{
	width: 100%; /*Same as width of the large image*/ /*Instead of height we will use padding */
	padding-top: 18vh; /*That helps bring the labels down */
	padding-bottom: 30vh;
    margin: 270px auto 0 auto;
    display: flex;
    flex-direction: column;
    }

#step {
    display: flex;
    width: 80vw;
/*    margin-left: 10vmax;*/
    margin: 0 auto 0 auto;
    }

#step p{
    font-family: "nunito-sans", sans-serif;
    font-weight: 300;
    padding: 1vw;
    color: #707070;
    }

#step p:first-child{
    color: #707070;
    font-size: 5.5vw;
    font-family: "nunito-sans", sans-serif;
    font-weight: 700;
    font-style: normal;
    float: left;
    }

#second{
    font-size: 2.5vh;
    font-family: "nunito-sans", sans-serif;
    font-weight: 600;
    font-style: normal;
    }


/* to add transitions */
.slider>img{
	position: absolute;
    margin-top: 20px;
/*    left: 0;*/
    top: 250px;
    padding-left: 16%;
    transition: all 0.5s;
/*    height: 50vw;*/
    max-height: 400px;
    min-height: 150px;
}


#howitworks .sliderImg {
        width: auto;
        margin: auto;
        margin-top: 8vh;
        margin-left: 12vw;
        }


.slider input[name='slide_switch'] {
	display: none;
}

.slider label {
	/*Lets add some spacing for the thumbnails */
	cursor: pointer;
	transition: all 0.5s;
    margin-left: 0;
    align-content: center;
    font-size: 2px;
    padding-top: 10px;
}

.slider label .step1{
        padding-top: 90px;
    }
.slider label img{
	display: block;
}

.slider input[name='slide_switch']:checked+ label p{
    color: #5ACB80;
    font-weight: 700;
    font-size: 3vh;
    }

.slider input[name='slide_switch']:checked+ label p:first-child{
    text-decoration: underline;
    text-decoration-color: #27CDA3;
    }


/*Clicking any thumbnail now should change its opacity(style)*/ 

/*Time to work on the main images */
.slider input[name='slide_switch'] ~ img {
	opacity: 0;
	transform: scale(1.1);
}
/*That hides all main images at a 110% size. On click the images will be displayed at normal size to complete the effect */

.slider input[name='slide_switch']:checked+label+img {
	opacity: 1;
	transform: scale(1);
}

/*Clicking on any thumbnail now should activate the image related to it*/
/* code adjusted from http://thecodeplayer.com/walkthrough/css3-image-slider-with-stylized-thumbnails */

/* END of slider */

    
    .white-box{
        height: 260px;
        background-color: white;
        margin-bottom: -27.7vh;
        margin-top: -17vh;
    }

/* END of "how it works" section */

/* StTART OF OUR BENEFITS*/
#ourbenefits {
    display: flex;
    width: auto;  
    padding: 20vw 10vw 14vw 10vw;
    flex-direction: column;
    }
    
    #ourbenefits h3{ 
    padding-bottom: 12%;
    }

    #ourbenefits h5{
        color: #2E333A;
        font-family: "Nunito", serif;
        font-weight: 600;
        font-style: normal;
        font-size: calc(2.8vw);
        text-align: center;
        margin: -70px auto 9px auto;
        }


#benefits{
    display: flex;
    flex-direction: column;
    align-content: center;
    }

#benefits h5{
    font-size: calc(5.7vw);
    padding-top: 80px
    }

#benefits p{
    width: 33vh;
    text-align: center;
    width: 260px;
    }
    
    .benefit1, .benefit2, .benefit3{
        display: flex;
        flex-direction: column;
        padding: 0vw 4vw 8vw 4vw;
        margin: 0px auto 0px auto;
        align-items: center;
    }
    


/* END of "our benefits" section */


/* BEGINNING of "connect with us" section */

#connectwithus {
    display: flex;
    margin: auto;
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to right, #5FCA83, #21CFA6);
    }

#connect{
    margin: auto;
    display: flex;
    flex-direction: column;
    background-color: none;
    text-align: center;
    padding: 120px 10px 70px 10px;
    }

    h1{
        font-family: nunito, serif;
        font-weight: 700;
        font-style: normal;
        font-size: calc(7.2vw);
        color: white;
        padding-bottom: 10px;
        }

#connect p{
    font-size: calc(3.6vw);
    padding: 0;
    color: white;
    }

#form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30vw;
    height: auto;
    margin: auto;
    border: none;
    border-radius: 5px;
    margin-top: 20px;
    margin-bottom: 30px;
    padding: 0px;    
    color: white;
    box-sizing: content-box;
    }  

fieldset { /* styles boxes */
    border: none;
    padding-bottom: 10px;
    padding-top: 5px;
    border-radius: 5px;
    }

/* how do we make the text white?? */
 .name, .phone, .email {
    width: 240px;
    margin-top: 10px;
    border: 1px solid white;
    background-color: transparent;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 10px;
    font-family: nunito-sans, sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: white;
    }
    
   ::placeholder {
        color: white;
        font-family: nunito-sans, sans-serif;
        font-weight: 300px;
        }

input[type=submit] {
    width:20vw;
    height: 50px;
    margin: auto;
    margin-bottom: 50px;
    padding: 50px 0px;
    color: teal;
    }

/* END of "connect with us" section */



/* BEGINNING of "Reviews" section */

.goodCompany{
        padding: 13% 12% 30% 12%;
    }
    
.goodCompany h3{
        padding-top: 40px;
    }

.goodCompany .review{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.goodCompany .review img{
    max-width: 60px;
    padding-bottom: 40px;
    
}

.goodCompany h3{
    font-family: 'Nunito', sans-serif;
    color: rgba(46, 51, 58, .59);
    font-size: 35px;
    padding-bottom: 75px;
    letter-spacing: 3px;
    padding-left: 
}

.goodCompany p{
    font-family: 'Nunito Sans', sans-serif;
    font-size: 22px; 
    padding-bottom: 20px;
}

.goodCompany .reviewer{
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #707070;
    font-style: italic;
}

/* END of "Reviews" section */


/* FOOTER SECTION */
footer{
        height: 500px;
        background-color: #172533;
        display: flex;
        flex-direction: column;
        /**** Code below taken from https://codepen.io/cbracco/pen/zekgx ****/
        position: absolute;
        right: 0;
        left: 0;
    }
    
    .contact-info{
        padding-top: 10px;
        padding-bottom: 40px;
    }
    
    .contact-info > p,a{ /*this only controls the contact information listed in the footer along with the links.. but right now it just makes sure any link after the .contact-info div has no text decoration*/
        color: white;
        font-family: nunito-sans;"sans-serif";
        padding-bottom: 8px;
        text-decoration: none;
    }

    .logo-footer-container{
        padding: 0px;    
    }
    
    .logo-footer{ /*this is the logo/roopairs/catchphrase in footer*/
        height: 50px;
        padding-left: 38px;
    }

    .additional-links{ /*this div wraps around the fb/insta logo and meet the team link*/
        width: 150px;
        order: -2; /* moves the facebook links to the top (first div) of the flex container */
    }

    .fb-insta{
        display: flex;
        justify-content: space-between;
        padding-bottom: 4px;
        padding-left: 0px;
    }

    .fb-insta-link{ /*this class handles the sizing of the facebook and instagram logo*/
        height: 55px;
        padding-right: 20px;
    }

    .meetTeam{
        color: #5ACB80; /*hex code = lime green color*/
        font-family: nunito-sans; "sans-serif";
        font-weight: 700;
        font-size: 20px;
        text-decoration: none;
        margin-bottom: 0px;
    }
    
    footer div{
        padding: 38px 30px;
    }
}