@charset "UTF-8";
/* CSS Document */

html {scroll-behavior: smooth}
body {margin: 0}
body {background:url("images/ocean-background.jpg") no-repeat center; background-size:cover; background-attachment: fixed}

h2{font-family: beloved-script, sans-serif; font-style: normal; font-weight: 400; font-size:60px; color: #9a5058}
h3{font-family: olimpico, sans-serif; font-style: normal;font-weight: 400; font-size:30px; color: #4a3232}



/*Desktop Code*/

			@media (min-width: 1280px){
				div.mobile {display: none}


			/* Header */
			div.desktop div.header h2 {font-size: 55px}
			div.desktop div.header img {margin-top: 35px}
			div.desktop div.header .nav {display: inline-block; white-space: nowrap; padding: 15px; margin: 40px 0px 10px}
			div.desktop div.header .nav a{font-family: olimpico, sans-serif; font-style: normal;font-weight: 400; font-size:25px; color: #4a3232; text-decoration: none; padding-bottom: 5px;}
/*				div.desktop div.header .nav a:hover {background:url("images/fancy-underline.gif") bottom center no-repeat; background-size: contain}*/

	/* CTA/Main Page Content */
			div.desktop img.cta-left-image{max-width: 600px; width: 100%; border-radius: 100px 100px 100px 0px; border: 5px solid #f5c4c4; z-index: 15; margin-bottom: 30px}
			div.desktop img.cta-right-image{width: 600px; width: 100%; border-radius: 100px 100px 0px 100px; border: 5px solid #f5c4c4; margin-top: -80px; z-index: 1}
			div.desktop div.cta p {font-family: beloved-script, sans-serif; font-style: normal; font-weight: 400; font-size:30px; color: #2a444e}
			div.desktop div.cta h3 {font-size: 30px}
			div.desktop div.cta a{font-family: olimpico, sans-serif; font-style: normal;font-weight: 400; font-size:39px; color: #4a3232; text-decoration: none; padding-bottom: 25px}
			div.desktop div.cta a:hover {font-size:40px}

			}
/*Fancy Underline*/
a.fancyUnderline { background: bottom center no-repeat; background-size: 100%;}


/*About Page*/
img.headshot {max-width: 100%; border-radius: 100px 100px 0px 100px; border: 5px solid #f5c4c4; margin-top: 20px}
div.mobile img.headshot {max-width: 50%; border-radius: 100px 100px 0px 100px; border: 5px solid #f5c4c4;}
p {text-indent: 40px;}



/*Portfolio Page*/
img.portfolio-1 {max-width: 100%; border-radius: 60px 60px 0px 60px; border: 5px solid #f5c4c4;}
img.portfolio-2 {max-width: 100%; border-radius: 60px 60px 60px 0px; border: 5px solid #f5c4c4;}
img.portfolio-3 {max-width: 100%; border-radius: 60px 0px 60px 60px; border: 5px solid #f5c4c4;}
img.portfolio-4 {max-width: 100%; border-radius: 0px 60px 60px 60px; border: 5px solid #f5c4c4;}

/*Contact Page*/
img.contact-img {max-width: 100%; margin-top: 110px; border-radius: 60px 60px 0px 60px; border: 5px solid #f5c4c4;}
img.contact-img-mobile {max-width: 50%; margin-top: 20px; border-radius: 60px 60px 0px 60px; border: 5px solid #f5c4c4;}

label {font-family: olimpico, sans-serif; font-style: normal;font-weight: 400; font-size:20px; color: #4a3232}

* {
  box-sizing: border-box;
}

/* Style inputs */
input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #f5c4c4;
	border-radius: 25px 25px 0px 25px;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical
	  ;
}

input[type=submit] {
  background-color: #f5c4c4;
  color: white;
  padding: 12px 20px;
  border: none;
	border-radius: 15px 15px 15px 15px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #9b525a;
}




/* Tablet */

			@media (max-width: 1280px){
				div.desktop {display: none}



			div.mobile div.header h2 {font-size: 60px}
			div.mobile div.header img {max-width: 100px; max-width: 100%; margin-top: 55px}
			div.mobile div.header .nav {display: inline-block; white-space: nowrap; padding: 15px; margin: 40px 0px 10px}
			div.mobile div.header .nav a{font-family: olimpico, sans-serif; font-style: normal;font-weight: 400; font-size:3vh; color: #4a3232; text-decoration: none; padding-bottom: 5px}
				div.mobile div.header .nav a:hover {background:url("images/fancy-underline.gif") bottom center no-repeat; background-size: contain}

	/* CTA/Main Page Content */
			div.mobile img.cta-left-image{max-width: 700px; width: 100%; border-radius: 100px 100px 100px 0px; border: 5px solid #f5c4c4;}
			div.mobile img.cta-right-image{max-width: 700px; width: 100%; border-radius: 100px 100px 0px 100px; border: 5px solid #f5c4c4;margin-top: 30px}
			div.mobile div.cta p {font-family: beloved-script, sans-serif; font-style: normal; font-weight: 400; font-size:30px; color: #2a444e}
			div.mobile div.cta h3 {font-size: 30px; color: #f4eee1;}
			div.mobile div.cta a{font-family: olimpico, sans-serif; font-style: normal;font-weight: 400; font-size:39px; color: #4a3232; text-decoration: none; padding-bottom: 40px}
			div.mobile div.cta a:hover {font-size:40px}

			}
div.bottom {margin-bottom: 200px}

/* Mobile*/

			@media (max-width: 576px){
				div.desktop {display: none}



			div.mobile div.header h2 {font-size: 40px}
			div.mobile div.header img {max-width: 50px; max-width: 100%; margin-top: 45px}
			div.mobile div.header .nav {display: inline-block; white-space: nowrap; padding: 15px; margin: 40px 0px 10px}
			div.mobile div.header .nav a{font-family: olimpico, sans-serif; font-style: normal;font-weight: 400; font-size:2vh; color: #4a3232; text-decoration: none; padding-bottom: 5px}
			div.mobile div.header .nav a:hover {}



	/* CTA/Main Page Content */
			div.mobile img.cta-left-image{max-width: 700px; width: 100%; border-radius: 100px 100px 100px 0px; border: 5px solid #f5c4c4;}
			div.mobile img.cta-right-image{max-width: 700px; width: 100%; border-radius: 100px 100px 0px 100px; border: 5px solid #f5c4c4; }
			div.mobile div.cta p {font-family: beloved-script, sans-serif; font-style: normal; font-weight: 400; font-size:30px; color: #2a444e}
			div.mobile div.cta h3 {font-size: 30px; color: #f4eee1;}
			div.mobile div.cta a{font-family: olimpico, sans-serif; font-style: normal;font-weight: 400; font-size:39px; color: #4a3232; text-decoration: none; padding-bottom: 30px}
			div.mobile div.cta a:hover {font-size:40px}

			}