@charset "UTF-8";

/*--------------------------------------------------------------
>>> CSS STANDARDS
----------------------------------------------------------------
1. Place in appropriate section
2. Add new sections to the Table of Contents as needed
3. Order properties consistently inside each declaration i.e. alphabetically or by function 
4. Declaration selectors should each occupy a new line
5. Enter one new line between rules
6. Enter more than one new line between categories 
--------------------------------------------------------------*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 - Settings: used with preprocessors and contain font, colors definitions, etc.
2.0 - Tools: globally used mixins and functions. Use for preprocessor only.
3.0 - Generic: reset and/or normalize styles, box-sizing definition, etc. 
4.0 - Elements: styling for bare/generic HTML elements 
        - Forms
        - Lists
        - Media
        - Tables
        - Typography: Headings, Paragraphs, Blockquotes, Anchors
5.0 - Objects: class-based selectors which define undecorated design patterns, building blocks
        - Framework
6.0 - Components: specific designed components
        - Buttons
        - Header
        - Navigation 
7.0 - Utilities: utilities and helper classes with ability to override anything which goes before in the triangle, eg. hide helper class
        - Alignment	    
        - Color
        - Size

--------------------------------------------------------------*/


*{
    font-family: 'Montserrat', sans-serif; 
    font-size: 1rem;
    color:#4d4d4d;
    line-height: 1.5em;
}
body{
    background-image: url(../img/bg-pattern@4x-100.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    
}
/*.scrollable-element {
  scrollbar-color: #018589 #88724a;
}*/
/* width */
::-webkit-scrollbar {
  width: .5rem;
}

/* Track */
::-webkit-scrollbar-track {
  background: #DBEAE7;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #8872a4;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #018589;
}
/*--------------------------------------------------------------
1.0 - SETTINGS
-------------------------------------------------------------- */
/*colors
 #018589 - teal ; 
#8872A4 - purple ; 
#DBEAE7 - light blue;
#707070 - grey*/
/*--------------------------------------------------------------
4.0 - ELEMENTS 
-------------------------------------------------------------- */
/*FORMS*/

.contact-form,.social{
  display: none;
}



#contact-area {
	width: 1px;
    margin-bottom: 3rem;
    clear: both;
    width: 100%;
}

#contact-area input, #contact-area textarea {
	padding: 5px;
	width: 100%;
  font-family: 'Montserrat', sans-serif; 
	font-size: 1em;
	margin: 0px 0px 10px 0px;
    border: none;
    color: #015859;
  background-color: #DBEAE7;
}

#contact-area textarea {
	height: 90px;
}

#contact-area textarea:focus, #contact-area input:focus {
	border: 1px solid #018589;
}

#contact-area input.submit-button {
    float: left;
    padding: .7rem;
    background-color: #018589;
    color: #FFF;
   
}
@media only screen and (min-width: 740px){
  #contact-area input.submit-button {
width: 30%;
  }
}
  #contact-area input.submit-button:hover{
    background-color: #8872a4;
}
#message{
  margin-top: .2rem;
}
input::placeholder, textarea::placeholder, .submit-button{
  text-transform: uppercase;
  color: #808080;
  font-weight: 500;
}



/* TYPOGRAPHY */

h1, h2, h3{
  font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    text-transform: uppercase ;
    padding: 0;
    margin-top: 2rem;
    color:  #018589; 
    margin-bottom: 0;
}
h2{
  font-weight: 500;
  font-size: 1.25rem;
  color:  #8872a4;
  margin-top: 0;
}
h3{
  font-size: 1.2rem;
  margin-top: 0;
}
.txt-center{
    text-align: center;
}

p {
	font-size: 1em;
	margin-bottom: 1rem;
}
.navigation{
    margin-bottom: 1rem;
}
nav{
    text-align: right;
}
#email{
  color: #018589;
  font-weight: 700;
}
#email:hover{
  color: #8872a4;
}
footer p{
  margin-bottom: 0;
  color: #DBEAE7;
  text-transform: uppercase;
  font-weight: 500;
}

.next-previous{
  margin-top: 2rem;
  text-transform: uppercase;
  
}
.next-previous a{
  font-weight: 800;
  font-size: .75rem;
}

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

  .next-previous{
    margin-top: 4rem;
  }
  
}
@media only screen and (min-width: 641px){
  .next-previous a{
    font-size: 1rem;
  }
}
/* Lists */
li{
    display: inline-block;
    list-style: none;
    margin-right: .8rem;
}
header nav li{
  text-align: right;
}

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

  header nav li{
    margin-left: .5rem;
  }
}
@media only screen and (min-width: 947px){

  header nav li{
    margin-left: 3rem;
  }
}

ul{
    margin: 0;
}
span{
  display: none;
}
a{
  color:#707070;
  font-weight: 500;
}
.pdf-link{
  color: #018589;
  font-weight: 800;
  text-decoration: underline;
}
a, .pdf-link:active{
  color: #707070;
}
.pdf-link:hover{
  color: #8872a4;
}


/* Media */



.hero{
    background-image: url(../img/bg-squiggle.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-bottom: 3rem;
    
   
}
@media only screen and (min-width: 768px){
   .hero{
       height: 40vh;
       margin-bottom: 4rem;
    }
}
@media only screen and (min-width: 1053px){
  .hero{
      height: 60vh;
      margin-bottom: 2rem;
   }
}
@media only screen and (min-width: 1900px){
  .hero{
      height: 45vh;
      margin-bottom: 2rem;
   }
}
img[src="img/heading-hiwaydiner.svg"]{
  width: 90%
}


.svg {
	width: 70%;
	height: auto;
}

.svg:hover{
	cursor: pointer;
  filter: invert(51%) sepia(10%) saturate(1377%) hue-rotate(224deg) brightness(92%) contrast(83%);
}

img[src="img/hello.svg"]{
    width: 50%;
    
}
@media only screen and (min-width: 640px){
    img[src="img/hello.svg"]{
        width: 20%;
        margin-top: 1rem;
    }
    img[src="img/kaylee.logo.svg"]{
      width: 20%;
    }
  } 
@media only screen and (min-width: 641px){
      img[src="img/kaylee.logo.svg"]{
        width: 15%;
  }
}
img[src="img/about-me.svg"]{
    margin-bottom: 2rem;
}

img[src="img/lets-work-together.svg"]{
  margin-bottom: .8rem;
}

img[src="img/about-me.svg"]{
    width: 90%;
}
img[src="img/lets-work-together.svg"]{
    width: 100%;
}
.project-titles{
    width: 90%;
}
img[src="img/project-titles-PaintYourselfSilly.svg"]{
  width: 70%;
}
img[src="img/project-titles-Steiner&Kovarik.svg"],img[src="img/title-message-sent.svg"]{
  width: 70%;
}
@media only screen and (min-width: 640px){

   img[src="img/about-me.svg"], .project-titles{
        width: 60%;
    }
    .project-titles{
      width: 50%;
    }
    img[src="img/lets-work-together.svg"]{
      width: 50%;
    }
}



/*img overlay*/
@media only screen and (min-width: 60em){ 
.container {
  position: relative;
  width: 50%;
}
.img-hover{
  display: block;
  width: 100%;
  height: auto;
}
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0%;
  transition: .5s ease;
  background-color: #018589;  /*background-image: url(../img/home-img-overlay.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;*/
}

.container:hover .overlay {
  opacity: 95%;
 
}
.text p {
  font-family: 'Montserrat', sans-serif; 
  font-weight: 900;
  font-size: 1.2rem;
  line-height: 1.5rem;
  text-align: center !important;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
/*.home-description p{
  color: #FFF;
  font-family: 'Montserrat', sans-serif; 
  font-weight: 700;
  font-style: italic;
  font-size: .8rem;
  text-align: left !important;
  color: white;
  position: absolute;
  top: 70%;
  left: 40%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}*/


}

/*@media (hover: hover) and (pointer: fine) {
  .option.hover:hover{
    transform: translate(-6px, -6px) !important;
  }
}*/

  

/*--------------------------------------------------------------
5.0 - OBJECTS 
-------------------------------------------------------------- */



/* FRAMEWORK */
#about{ 
   margin-top: 7rem;
   margin-bottom: 4rem;
}

.grid-container{
  max-width: 30rem;
}

@media only screen and (min-width: 641px){
    .grid-container{
    max-width: 80rem;
}
}
@media only screen and (min-width: 1900px){
    .grid-container{
    max-width: 100rem;
    }
}
/*--------------------------------------------------------------
6.0 - COMPONENTS 
-------------------------------------------------------------- */

/*-- HEADER --*/


/* BUTTONS */
#social{
  margin-top: .5rem;
}



/*-- NAVIGATION --*/

nav li a{
  font-weight: 700;
  text-transform: uppercase;
}


.fa-angle-left, .fa-angle-right, .fa-angle-up{
  color: #018589;
}
a:hover, .fa-brands:hover, .fab:hover, .fa-square-envelope:hover, .fa-square-facebook:hover, .fa-square-instagram:hover, .fa-linkedin:hover, .fa-square-behance:hover, .fa-angle-left:hover, .fa-angle-right:hover, .fa-angle-up:hover{
  color: #8872a4;
}
.button-back-to-top{
  text-align: center;
}

footer{
  background-color: #018589;
  padding: 1rem;
  margin-top: 1rem;
  }


i.fas.fa-angle-right.fa-3x,i.fas.fa-angle-left.fa-3x{
  vertical-align: middle !important;
 
}

/*-- sprites --*/




/*--------------------------------------------------------------
7.0 - UTILITIES 
-------------------------------------------------------------- */

/*-- COLOR --*/


/*-- ALIGNMENT --*/