/* Place your CSS styles in this file */

html {overflow-x:hidden;}

body {
    background-color:whitesmoke;
    font-size:100%;
    overflow-x:hidden;
}

h1 {
    text-align: center;
    font-family: "Garamond", "Times New Roman", sans-serif;
    font-weight: normal;
    font-size:4vw;
    margin-bottom:0;
}

h2 {
    text-align:center;
    font-family:"Garamond", sans-serif;
    font-size:23px;
}

#toptext {
	text-align:center;
    max-width:100%;
    background-image:linear-gradient(to right, rgba(171, 240, 171,1), rgba(171,220,171,0.5), rgba(171,240,171,1));
}


.navbar {
    max-width:100%;
    background-color:#b2c9b2;
    overflow:hidden;
	display:grid;
	grid-template-columns:25% 25% 25% 25%;
	justify-content:space-evenly;
	padding:2px;
}

#homenav1 {
	grid-area: 1 / 1 / span 1 / span 1;
}

#homenav2 {
	grid-area: 1 / 2 / span 1 / span 1;
}

#homenav3 {
	grid-area: 1 / 3 / span 1 / span 1;
}

#homenav4 {
	grid-area: 1 / 4 / span 1 / span 1;
}

.navbar li {
    font-family:"Garamond", "Times New Roman", sans-serif;
    font-size:4.5vw;
    text-align:center;
    align-content:center;
    background-color:whitesmoke;
	list-style-type:none;
}

.navbar li a {
    display:block;
    color:black;
    text-decoration:none;
}

.navbar li:hover{
    background-color:#b2c9b2;
}


#cpa_text {
    text-align:center;
    max-width:100%;
    position:absolute;
    font-size:22px;
    margin-right:12%;
    margin-left:12%;
    margin-top:10%;
    margin-bottom:10%;
    top:12%;
}


#contact_text {
    text-align:center;
    max-width:100%;
    position:absolute;
    font-size:18px;
    font-family:Cambria;
    margin:8%;
}



/* Repeat code for navbar_why */




.navbar_why {
    max-width:100%;
    background-color:#010101;
    overflow:hidden;
	display:grid;
	grid-template-columns:25% 25% 25% 25%;
	justify-content:space-evenly;
	padding:2px;
}

#nav1 {
	grid-area: 1 / 1 / span 1 / span 1;
	background-color:#010101;
}

#nav1:hover {
	background-color:#abb0b9;
}

#nav2 {
	grid-area: 1 / 2 / span 1 / span 1;
	background-color:#111111;
}

#nav3 {
	grid-area: 1 / 3 / span 1 / span 1;
	background-color:#111111;
}

#nav4 {
	grid-area: 1 / 4 / span 1 / span 1;
	background-color:#111111;
}

.navbar_why li {
    font-family:"Garamond", "Times New Roman", sans-serif;
    font-size:3.8vw;
    text-align:center;
    background-color:#010101;
	list-style-type:none;
}

.navbar_why li a {
    display:block;
    color:black;
    text-decoration:none;
}

.navbar_why li:hover{
    background-color:#212133;
}

#first_wrapper {
    width:100%;
	height:500px;
    margin-top:2%;
    max-width:100%;
	position:relative;
}

#first_wrapper_img {
	width:100%;
	height:500px;
	object-fit:cover;
	position:absolute;
    z-index: -1;
	top:0px;
	left:0px;
	bottom:0px;
	right:0px;
	opacity:0.3;
}

#second_wrapper_img {
	width:100%;
	height:300px;
	object-fit:contain;
	position:absolute;
	top:50px;
	left:0px;
	bottom:0px;
	right:0px;
	opacity:0.2;
}


.intro_text {
	position:absolute;
	top:30%;
	left:15%;
    width:100%;
    font-size:24px;
    font-family:Cambria, "Times New Roman", sans-serif;
	text-align:left;
	line-height:1.4;	
}

.intro_text ul {list-style-type:none;}

.page_divider{
    clear:both;
	display:block;
    margin-top:120px;
    margin-bottom:20px;
    width:100%;
    max-width:100%;
    height:auto;
    text-align:center;
    background-color:whitesmoke;
}


/* End of header and intro section */


.about_section {
    width:100%;
    background-color:lightsteelblue;
    background-image:"caddy.jpg";
    height:450px;
    text-align:center;
    -webkit-transition: background-color .5s ease-in-out;
    -moz-transition: background-color .5s ease-in-out;
    transition: background-color .5s ease-in-out;
    position:relative;
    border-radius: 25px 25px 25px 25px;
    display:grid;
    grid-template-columns:45% 45%;
    grid-template-rows:200px;
    justify-content:space-evenly;
    align-content:center;
}

.about_section_focused {
    width:100%;
    background-color:#88b2e7;
    height:450px;
    text-align:center;
    -webkit-transition: background-color .5s ease-in-out;
    -moz-transition: background-color .5s ease-in-out;
    transition: background-color .5s ease-in-out;
    position:relative;
    border-radius: 25px 25px 25px 25px;
    display:grid;
    grid-template-columns:45% 45%;
    grid-template-rows:300px;
    justify-content:space-evenly;
    align-content:center;
}

.about_section > div {padding:2.5%}
.about_section_focused > div {padding:2.5%}

#about_div_one {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    object-fit:scale-down;
}

#about_div_two {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    object-fit:scale-down;
}

.about_text {
    position:absolute;
    top:34%;
    width:100%;
    text-align:center;
    font-family:"Georgia";
}

.about_image {
    opacity:0.3;
    overflow:hidden;
    object-fit:contain;
}







.reviews_section {
    width:100%;
    background-color:lightsteelblue;
    height:450px;
    text-align:center;
    -webkit-transition: background-color .5s ease-in-out;
    -moz-transition: background-color .5s ease-in-out;
    transition: background-color .5s ease-in-out;
    position:relative;
    border-radius: 25px 25px 25px 25px;
    /*justify-content:space-evenly;
    align-content:center;*/
}

.reviews_section_focused {
    width:100%;
    background-color:#88b2e7;
    height:450px;
    text-align:center;
    -webkit-transition: background-color .5s ease-in-out;
    -moz-transition: background-color .5s ease-in-out;
    transition: background-color .5s ease-in-out;
    position:relative;
    border-radius: 25px 25px 25px 25px;
    /*justify-content:space-evenly;
    align-content:center;*/
}

.reviews_section > div {padding:2.5%}
.reviews_section_focused > div {padding:2.5%}


#reviews_holder {
    width:100%;
    max-width:100%;
    height:450px;
}




.services_section {
    width:100%;
    background-color:lightsteelblue;
    height:450px;
    text-align:center;
    -webkit-transition: background-color .5s ease-in-out;
    -moz-transition: background-color .5s ease-in-out;
    transition: background-color .5s ease-in-out;
    border-radius: 25px 25px 25px 25px;
    display:grid;
    grid-template-columns:30% 30% 30%;
    grid-template-rows:200px;
    justify-content:space-evenly;
    align-content:center;
}

.services_section_focused {
    width:100%;
    background-color:#88b2e7;
    height:450px;
    text-align:center;
    -webkit-transition: background-color .5s ease-in-out;
    -moz-transition: background-color .5s ease-in-out;
    transition: background-color .5s ease-in-out;
    border-radius: 25px 25px 25px 25px;
    display:grid;
    grid-template-columns:30% 30% 30%;
    grid-template-rows:200px;
    justify-content:space-evenly;
    align-content:center;
}





.services_section > div {padding:2%}
.services_section_focused > div {padding:2%}

#service_one {
    border-radius:20px 20px 20px 20px;
    display:grid;
    grid-template-columns:auto;
    grid-template-rows:80px 60px;
    row-gap:10px;
    justify-content:space-around;
    align-content:center;
}

#service_one img {
    height:70px;
    width:70px;
    object-fit:scale-down;
	border-width:5px;
    border-style:inset;
    border-color:green;
}

#service_two {
    border-radius:20px 20px 20px 20px;
    display:grid;
    grid-template-columns:auto;
    grid-template-rows:80px 60px;
    row-gap:10px;
    justify-content:space-around;
    align-content:center;
}

#service_two img {
    height:70px;
    width:70px;
    object-fit:scale-down;
	border-width:5px;
    border-style:inset;
    border-color:green;
}

#service_three {
    border-radius:20px 20px 20px 20px;
    display:grid;
    grid-template-columns:auto;
    grid-template-rows:80px 60px;
    row-gap:10px;
    justify-content:space-around;
    align-content:center;
}

#service_three img {
    height:70px;
    width:70px;
    object-fit:scale-down;
	border-width:5px;
    border-style:inset;
    border-color:green;
}












/*
.contact_section {
    width:100%;
    background-color:lightsteelblue;
    height:450px;
    text-align:center;
    -webkit-transition: background-color .5s ease-in-out;
    -moz-transition: background-color .5s ease-in-out;
    transition: background-color .5s ease-in-out;
    border-radius: 25px 25px 25px 25px;
    position:relative;
}

.contact_section_focused {
    width:100%;
    background-color:#88b2e7;
    height:450px;
    text-align:center;
    -webkit-transition: background-color .5s ease-in-out;
    -moz-transition: background-color .5s ease-in-out;
    transition: background-color .5s ease-in-out;
    border-radius: 25px 25px 25px 25px;
    position:relative;
}
*/




.contact_section {
    width:100%;
    background-color:lightsteelblue;
    height:450px;
    text-align:center;
    -webkit-transition: background-color .5s ease-in-out;
    -moz-transition: background-color .5s ease-in-out;
    transition: background-color .5s ease-in-out;
    border-radius: 25px 25px 25px 25px;
    display:grid;
    grid-template-columns:20% 20% 20% 20%;
    grid-template-rows:200px;
    justify-content:space-evenly;
    align-content:center;
}

.contact_section_focused {
    width:100%;
    background-color:#88b2e7;
    height:450px;
    text-align:center;
    -webkit-transition: background-color .5s ease-in-out;
    -moz-transition: background-color .5s ease-in-out;
    transition: background-color .5s ease-in-out;
    border-radius: 25px 25px 25px 25px;
    display:grid;
    grid-template-columns:20% 20% 20% 20%;
    grid-template-rows:200px;
    justify-content:space-evenly;
    align-content:center;
}


.contact_section > div {padding:2%}
.contact_section_focused > div {padding:2%}




#contact_one {
    border-radius:20px 20px 20px 20px;
    display:grid;
    grid-template-columns:auto;
    grid-template-rows:80px 60px;
    row-gap:10px;
    justify-content:space-around;
    align-content:center;
}

#contact_one img {
    height:40px;
    width:40px;
    object-fit:scale-down;
	border-width:5px;
    border-style:inset;
    border-color:gray;
}

#contact_two {
    border-radius:20px 20px 20px 20px;
    display:grid;
    grid-template-columns:auto;
    grid-template-rows:80px 60px;
    row-gap:10px;
    justify-content:space-around;
    align-content:center;
}

#contact_two img {
    height:40px;
    width:40px;
    object-fit:scale-down;
	border-width:5px;
    border-style:inset;
    border-color:gray;
}

#contact_three {
    border-radius:20px 20px 20px 20px;
    display:grid;
    grid-template-columns:auto;
    grid-template-rows:80px 60px;
    row-gap:10px;
    justify-content:space-around;
    align-content:center;
}

#contact_three img {
    height:40px;
    width:40px;
    object-fit:scale-down;
	border-width:5px;
    border-style:inset;
    border-color:gray;
}

#contact_four {
    border-radius:20px 20px 20px 20px;
    display:grid;
    grid-template-columns:auto;
    grid-template-rows:80px 60px;
    row-gap:10px;
    justify-content:space-around;
    align-content:center;
}

#contact_four img {
    height:40px;
    width:40px;
    object-fit:scale-down;
	border-width:5px;
    border-style:inset;
    border-color:gray;
}





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

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

textarea {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: slategray;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color:mediumseagreen;
	color:whitesmoke;
    border-width:2px;
    border-color:slategrey;
}

#business_name {
    height:10%;
    width:50%;
    font-family:"Garamond", sans-serif;
    font-size:18px;
    position:absolute;
    top:8%;
}

#email_address {
    height:10%;
    width:50%;
    font-family:"Garamond", sans-serif;
    font-size:18px;
    position:absolute;
    top:20%;
}

#phone_number {
    height:10%;
    width:50%;
    font-family:"Garamond", sans-serif;
    font-size:18px;
    position:absolute;
    top:32%;
}

#comments {
    height:200px;
    width:50%;
    font-family:"Garamond", sans-serif;
    font-size:18px;
    position:absolute;
    top:44%;
    overflow:clip;
    text-overflow:ellipsis;
    padding-top:20px;
}

#submit_button {
    font-family:"Garamond", sans-serif;
    position:absolute;
    top:82%;
    height:12%;
    width:20%;
    font-size:25px;
    text-align:center;
    font-style:italic;
    -webkit-appearance:none;
    -moz-appearance:none;
}

#endtext {
    text-align:center;
    font-size:14px;
    width:100%;
    max-width:100%;
    padding-top:4%;
    margin-top:40px;
}

/* End of home page PC styling, now beginning why_us page PC styling*/

#why_first_container {
    margin-top:20px;
	margin-bottom:10px;
	width:100%;
	max-width:100%;
	height:auto;
	position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    object-fit:contain;
}

#why_inner_pic_bg {
    opacity:0.35;
    overflow:hidden;
    object-fit:contain;
}

#why_text_one {
	position:absolute;
    top:45%;
    width:100%;
	max-width:100%;
    text-align:center;
    font-family:"Georgia";
	color:#e8e8e8;
}

#why_parent {
	width:100%;
	max-width:100%;
	display:flex;
	justify-content:center;
}

#why_second_container {
	width:80%;
	max-width:100%;
	font-size:18px;
	font-family:"Verdana";
	color:#e8e8e8;
	text-indent:20px;
	line-height:1.4;
}

#why_second_container ul {
	text-indent:5px;
	margin-left:15px;
}

#why_second_container li {
	list-style-type:square;
}








/* Slideshow */

/* Slideshow container */







/*.slideshow-container {
  max-width: 560px;
  max-height:450px;
  position: absolute;
  left:30%;
  top:10%;
  align-content:center;
  justify-content:space-evenly;
}





/* Hide the images by default */




/*.mySlides{
  display: none;
}

#dots {
    position:absolute;
    bottom:5%;
    left:45%;
}






/* The dots/bullets/indicators */





/*.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}






/* Fading animation */




/*.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

*/






@media screen and (max-width:600px){
    
    #cpa_text {
        top:22%;
        left:2%;
        font-size:3vw;
        margin:8%;
        overflow-x:hidden;
    }
    
    #contact_text {
        top:12%;
        left:2%;
        font-size:3vw;
        margin:8%;
        overflow-x:hidden;
    }
    
    h1 {font-size:4.5vw;}
    .navbar {max-width:100%; margin-top:2%; margin-right:0px; margin-left:0px; margin-bottom:auto;}
    .navbar li {float:none; text-align:center; width:100%; font-size:3.5vw;}
    .navbar li a {float:none; width:100%; padding-top:4%; padding-bottom:4%;}
    .navbar li a:hover{background-color:lightsteelblue;}

    .navbar_why {max-width:100%; margin-top:2%; margin-right:0px; margin-left:0px; margin-bottom:auto;}
    .navbar_why li {float:none; text-align:center; width:100%; font-size:3.5vw;}
    .navbar_why li a {float:none; width:100%; padding-top:4%; padding-bottom:4%;}
    #nav1 > a {background-color:whitesmoke;}
	#nav1 > a:hover {background-color:lightsteelblue;}
	#nav2 > a {background-color:whitesmoke;}
	#nav3 > a {background-color:whitesmoke;}
	#nav4 > a {background-color:whitesmoke;}	
	
	.intro_text {font-size:16px; top:40%; left:5%;}

    .about_section {clear:both; display:block; position:relative; width:100%; background-color:lightsteelblue; height:450px; margin-top:4%;}
    .about_section_focused {clear:both; display:block; position:relative; width:100%; background-color:#88b2e7; height:450px; margin-top:4%;}
    .about_section > div {padding:0;}
    .about_section_focused > div {padding:0;}
    #about_div_one {position:absolute; top:1%; left:1%; height:250px; width:250px; margin:0; padding:5px;}
    #about_div_two {position:absolute; bottom:1%; right:1%; height:250px; width:250px; margin:0; padding:5px;}
    
    .about_text {top:30%;}
    
    .reviews_section {clear:both; display:block; position:relative; width:100%; background-color:lightsteelblue; height:450px; margin-top:4%;}
    .reviews_section_focused {clear:both; display:block; position:relative; width:100%; background-color:#88b2e7; height:450px; margin-top:4%;}
    .reviews_section > div {padding:0;}
    .reviews_section_focused > div {padding:0;}

    /*.slideshow-container{right:20%; top:16%;}*/

    .services_section {display:grid; grid-template-columns:90%; grid-template-rows:120px 120px 120px; background-color:lightsteelblue;}
    .services_section_focused {display:grid; grid-template-columns:90%; grid-template-rows:120px 120px 120px; background-color:#88b2e7;}
    #service_one {background-color:lightsteelblue; border-radius:0%; display:grid; grid-template-columns:auto auto; column-gap:10px; grid-template-rows:100px; justify-content:start; align-content:center;}
    #service_two {background-color:lightsteelblue; border-radius:0%; display:grid; grid-template-columns:auto auto; column-gap:10px; grid-template-rows:100px; justify-content:start; align-content:center;}
    #service_three {background-color:lightsteelblue; border-radius:0%; display:grid; grid-template-columns:auto auto; column-gap:10px; grid-template-rows:100px; justify-content:start; align-content:center;}
    .service_text {padding-top:7%; text-align:left;}
    
    
    
    .contact_section {display:grid; grid-template-columns:90%; grid-template-rows:90px 90px 90px 90px; background-color:lightsteelblue;}
    .contact_section_focused {display:grid; grid-template-columns:90%; grid-template-rows:90px 90px 90px 90px; background-color:lightsteelblue;}
    #contact_one {background-color:lightsteelblue; border-radius:0%; display:grid; grid-template-columns:auto auto; column-gap:10px; grid-template-rows:100px; justify-content:start; align-content:center;}
    #contact_two {background-color:lightsteelblue; border-radius:0%; display:grid; grid-template-columns:auto auto; column-gap:10px; grid-template-rows:100px; justify-content:start; align-content:center;}
    #contact_three {background-color:lightsteelblue; border-radius:0%; display:grid; grid-template-columns:auto auto; column-gap:10px; grid-template-rows:100px; justify-content:start; align-content:center;}
    #contact_four {background-color:lightsteelblue; border-radius:0%; display:grid; grid-template-columns:auto auto; column-gap:10px; grid-template-rows:100px; justify-content:start; align-content:center;}
    .service_text {padding-top:7%; text-align:left;}

    /*
    .contact_section {background-color:lightsteelblue;}
    .contact_section_focused {background-color:#88b2e7;}
    */
    
    #business_name {width:65%;}
    #email_address {width:65%;}
    #phone_number {width:65%;}
    #comments {width:65%;}
    #submit_button {font-size:15px; width:26%; border-radius:20px 20px 20px 20px;}

}

@media screen and (max-width:1400px) {

    /*.slideshow-container{left:22%; right:16%; top:10%;}*/

}


@media screen and (min-width:1501px) {

   #contact_text { left:10%; top:2%;}

}

@media screen and (min-width:1201px) and (max-width:1500px) {

   #contact_text { left:7%; top:4%;}

}

@media screen and (min-width:601px) and (max-width:1200px) {

   #contact_text { left:4%; top:6%;}

}