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

*{
		margin:0px;
		padding:0px;
		text-size:0px;
  cursor: default;
	


	
	}




a:hover, button:hover, .clickable:hover {
  cursor: pointer;
}



nav{
position:absolute;
	top:10px;
right: 50px;



}



#logo{

  position: absolute;
    width: 40px;
    height: auto;
	z-index:2;
	left:50px;
	top:-5px;
	
	
}

#logo:active {
filter: drop-shadow(0.5px 0.5px 1px grey);
	
}



#navbar{
	
background-color: white;
padding:15px;

	
}

.nav-link {

color: #525252;
text-decoration:none;
font-size: 12px;
 font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  margin: 0px 30px;
  display: inline-block;

  position: relative;
  opacity: 0.75;
}

.nav-link:hover {
  opacity: 1;
}

.nav-link::before {
  transition: 300ms;
  height: 1px;
  content: "";
  position: absolute;
  background-color: grey;

}

.nav-link-ltr::before {
  width: 0%;
  bottom: 0px;
}

.nav-link-ltr:hover::before {
  width: 100%;

}


@media screen and (max-width: 1000px) {
  .nav-link { display: none; }  /* show it on large screens */
}

@media screen and (max-width: 1000px) {
  #navbar { background-color: none; }  /* show it on large screens */
}




/*dropdown menu*/



.dropbtn {

background: none;
width:75%;
  font-size: 15px;
border:none;
border-style: none;
border-color: none;


}



.dropdown {
border:none;
right:25px;
  position:absolute;
  display: inline-block;
width:135px;
top:0px;
z-index: 2;
border-style: none;
border-color: none;

}

button .dropdown {
background: none;
border:none;
border-style: none;
border-color: none;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color:lightgray;
  width: 100px;
 text-align:center;
}



.dropdown-content a {
color: #525252;
text-decoration:none;
font-size: 15px;
 font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  padding: 15px;
 right: 20px;
  display: block;

}

.dropdown-content a:hover { 
font-weight: 400;
transition: 0.3s all ease-in-out;

}

.dropdown:hover .dropdown-content {display: block;transition: .6s all ease-in-out;}

.dropdown:hover .dropbtn {filter: opacity(70%); transition: 0.2s all ease-in-out;	
 color:black;
}


@media screen and (min-width: 1000px) {
 .dropbtn { display: none; }  /* show it on large screens */
}



#welcome{
	
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
	
	
}

#natalie{
	
 font-family: "Lato";
  font-weight: 400;
  font-style: normal;
	color: #474747;
font-size:40px;
}






#title{
	
	
font-family: "Oswald";
font-size: 70px;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  -webkit-text-stroke: 1px white;
}





@keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}


@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#title {
  animation: fadeIn 3s ease forwards;
}

#natalie{
  animation: fadeIn 3s ease forwards;			
}


@media screen and (max-width: 1100px) {
  #natalie { font-size:30px; }  /* show it on large screens */
	#title{
line-height: 65px;
	}
}


/*Media Queries Home*/
@media (max-width: 1500px) {
  #title { font-size:50px; 
	}  
}


@media (min-width:2500px){

	#natalie{
font-size:60px;
	}
	#title{
	font-size:100px;
	}
}

/*End Media Queries Home*/


/*HEADERS*/

.header{
	
background-image: url("about_header.jpg");
background-size: cover;
opacity: 0.6;
width:100%;
padding:65px;
height:auto;

}
.headertitle{
position: absolute;
left:50%;
top:75px;
transform: translate(-50%);
  font-family: "Roboto", sans-serif;
  font-weight: 400;
color: #474747;
font-size: 40px;
text-align: center;


	
}

/*END HEADER*/

	.site-footer{
	font-family: "Figtree";
	font-size:10px;
	font-weight:200;
		
position:fixed;
bottom:0px;
right:15px;
	}

.site-footer-phone{
	font-family: "Figtree";
	font-size:10px;
	font-weight:200;
		
position:fixed;
bottom:0px;
right:15px;
	}




/*END ABOUT ME*/



/* Portfolio */



/*directly in HTML sheet */


/*END PORTFOLIO*/






/*CONTACT*/
#contactbox{
	
margin-bottom: 100px;
}
.contact-form-container {
position: relative;
left:50%;
transform: translate(-50%);
top:50px;
  width: 50%;
  background: #f4f4f4;
  border-radius: 8px;
text-align: center;
color:#474747;
font-family: "Figtree";
font-weight:200;
font-size:15px;
padding-bottom: 25px;


}

.contact-form-container a {
text-decoration: underline;
color: #474747
}
	
	#formp{
		
	padding:15px;
	text-align:left;
	}

.contact-form-container p {
  font-size: 1.1em;
}

.contact-form-container label {
  display: block;
  margin-top: 10px;
  color: #474747;
font-weight:500;
text-align: center;
line-height:30px;
font-size:15px;
}

.contact-form-container input[type="text"],
.contact-form-container input[type="email"],
.contact-form-container input[type="tel"],
.contact-form-container textarea {

  width: 80%;
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.contact-form-container button[type="submit"] {
  background: #EB9D81;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;

}

.contact-form-container button[type="submit"]:hover {
  background: grey;
transition: 0.2s all ease-in-out;
}	

	

/*Media Queries Contact Form */


	
	@media screen and (min-width: 1700px){
		.contact-form-container{
font-size: 20px;
		}
	}


@media (min-width:2500px){
	
.contact-form-container{
font-size: 30px;
top:100px;
	}
}
/* End Media Queries Contact Form */

/*END CONTACT*/



/*Begin  General Media Queries */

/*H1 title for each Page*/




@media (max-width:400px){
	.headertitle{
top:65px;
	}
}

@media screen and (max-width:700px){
	
.headertitle{
position: absolute;
left:50%;
top:85px;
transform: translate(-50%);
  font-family: "Roboto", sans-serif;
  font-weight: 400;
color: #474747;
font-size: 40px;	

}}

	
@media screen and (min-width:1950px){
		.headertitle{
	font-size:55px;
		}
	}
	

/* End General Media Queries*/