@charset "UTF-8";

/* Body */

body {
	font-family: sans-serif "Arial";
	background-color: #FFFFFF;
	margin: 0;
}

/* Navigation */

li a {
  display: block;
  color: black; 
}

.nav-link-logo {
    padding-bottom: 40px;
    padding-left: 40px;
}
.nav-link {
    padding: 40px;
    margin-left: 20px;
    overflow: hidden;
}

.nav-link:hover {
    color: darkcyan;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: black;
  padding: 40px;
  margin-left: 20px; 
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

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

.dropbtn:hover {
  color: darkcyan;
}

.dropdown-content a:hover {
    color: darkcyan;
}


/* Header */

header {
	width: 100%;
	height: 8%;
	background-color: #FFFFFF;
	border-bottom: 20px solid #FFF;
}

/* About Section */

@font-face {
    font-family:"honeycomb";
    src: url(font/Honeycomb.ttf);
    font-style: normal;
    font-weight: 100
}

@font-face {
    font-family:"ohdarling";
    src: url(font/"ohdarling.ttf);
    font-style: normal;
    font-weight
}

.intro {
	display: inline-block;
	background-color: #3FA09B;
    background-image:url(spot_1.png);
    padding-bottom: 30px;
    padding-top: 35px;
    width: 100%;
    margin-bottom: 20px
}
.column {
	width: 50%;
    background-color: #3FA09B;
	text-align: center;
	padding-top: 30px;
	float: left;
}
.intro .column img {
    margin-top: -7px;
    padding-bottom: 30px;
}
.intro .column h3 {
	color: #FFFFFF;
	text-align: justify;
    font-family: ohdarling;
    font-weight: 100;
    font-size: 40pt;
    padding-top: 4px;
    margin:inherit; 
    padding-bottom: -5px;

}
.intro .column p {
	text-align: justify;
	line-height: 25px;
	font-weight: lighter;
    margin: 20px;
	width: 80%;
    color: #FFF;
    padding: 7px;
}

/* Image Cards Homepage */

.card {
    background-color: #FFF;
    float:left; 
    margin: 24px;
}

.btn-primary {
    background-color: #3FA09B;
}
.btn-primary:hover {
    background-color:darkcyan;
}

/* Copyright */

.footer {
   float: left;
   width: 100%;
   background-color: #717070;
   padding-top: 20px;
}

.copyright {
   text-align: center;
   font-weight: lighter;
   color: white;
   padding-right: 90px; 
}

.fa-linkedin-in {
    float: left;
    color: white;
    font-size: 30px;
    padding-left: 100px
}

/* Logo Design Page */

.lil-guppies .img-fluid {
    width: 50%;
    padding: 20px;
}

.logodesign-text {
    float: right;
}

/* Print Ready Page */

.pasta-amore .img-fluid {
    width: 50%;
    padding: 20px;
}

.printready-text {
    float: right;
}

.amethyst-bay .img-fluid {
    width: 50%;
    padding: 20px;
}

/* Photography Page */

.baking-story .img-fluid {
    width: 50%;
    padding: 20px;
}

.bakingstory-text {
    float: right;
}

/* Digital Resume Page */

.digital-resume {
    margin: auto;
    width: 50%;
    padding-top: 40px;
    padding-left: 35px;
    padding-bottom: 40px;
    
}

.resume-button {
  background-color: #3FA09B;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: block;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
  border-radius: 16px;
  margin-top: 50px;
  margin-bottom: 30px;
}

.resume-button:hover{
    background-color: darkcyan;
}

/* Branding Suite */

.brand-suite {
    margin: auto;
    width: auto;
    padding-left: 225px;
    padding-top: 40px;
    
}

.mini-portfolio-outside {
    padding-left: 145px;
    padding-top: 50px;
    
}

.mini-portfolio-inside {
    padding-left: 145px;
    padding-top: 50px;
    padding-bottom: 50px;
}

/* Contact Page */



/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

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

input[type=submit]:hover {
  background-color: darkcyan;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  margin-bottom: 30px;
  margin-left: 105px;
  width: 40%;
  float: left;
}

.contact h4 {
    text-align: justify;
    font-family: ohdarling;
    font-size: 40px;
    font-weight: bolder;
    padding-top: 50px;
    padding-bottom: 10px;
    padding-left: 105px
}

.card-column {
    float: right;
    padding-right: 40px;
}

/* Mobile */

@media (max-width: 575.98px) {
.logo {
	width: 100%;
	text-align: center;
	margin-top: 13px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

.intro .column p {
	width: 80%;
	margin-left: 50px
}

    .intro .column h3 {
    margin-left: 30px
    }

.column {
	width: 100%;
	margin-top: 0px;
}
.hero_header {
	padding-left: 10px;
	padding-right: 10px;
	line-height: 22px;
	text-align: center;
}
    
    
    
.nav justify-content-center ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #FFF;
}

.nav justify-content-center li {
    float: left;
}

li a {
  display: inline-block;
  color: black;
}

.nav-link {
    padding: 65px
}

/* Small Tablets */
    
@media (min-width: 576px)and (max-width: 991.98px) {
.logo {
	width: 100%;
	text-align: center;
	margin-top: 13px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

.column {
	width: 100%;
	margin-top: 0px;
}

.column {
	width: 100%;
	margin-left: 0px;
	margin-right: 0px;
}
.profile {
	width: 100%;
}
.intro .column p {
	width: 90%;
	text-align: center;
	padding-left: 0px;
}
}

/* Small Desktops */
    
@media (min-width: 992px) and (max-width: 1199.98px) {

.intro .column p {
	width: 80%;
}