@charset "UTF-8";
*{scroll-behavior:smooth;}
.orange {color:#e35336;}
h2.intro {text-align: center;color:#351e14;}
.Container .three .col-2 img{background: none;}
.submit-form {text-align: center;}
.full-width .submit-btn {background-color:#06402B;color:white;border:none;}
.reset-btn:hover {color:white;background-color:#06402B;border:none;}
.full-width .submit-btn:hover {background-color: #94b395;color:white;border:1px solid brown;}

.wrapper .form {background-color: #94b395;border-radius: 50px;}
.form h4 {font-size:50px;margin-left: -20px;}
.wrapper .form h2.form-headline {text-align: left;margin-top: -20px;margin-bottom: 20px;}
.me  {font-size:40px;align-content: center;color:#e35336;}
.meinfo {color: #351e14;}
.goodbye {width:100%;margin-top: 100px;margin-left: 2px;}
.goodbye:hover {transform: rotate(180deg);}
.grid-container img{border-radius: 10px;}
.Firstrow img{width:200px;border:5px solid orange;}
.secondrow img{width:200px;border:5px solid green;}

.Firstrow img:hover{border:3px solid green;}
.secondrow img:hover{border:3px solid orange;}


.container .designpics{margin-bottom: 100px;}

/* practice*/
/* color:  red#ec1c24, black#212d31, grey#343a40, white#eee  */
* {
  box-sizing: border-box;
}





.form {border-top:20px solid darkgreen;padding-top: 20px;border-radius: 20px;margin-right: -100px;}
.form .col-6 h4{font-size:80px;margin-left: 80px;color:#e35336;}
h2.messageme {font-size:40px;color:darkgreen;margin-right: 150px;}

.form a {text-decoration: none;padding:10px;border-radius: 20px;color:darkgreen;border:4px solid darkgreen ;}
.form a:hover {cursor: pointer;color:white;border:4px solid white; }

.topBefore {margin-right:-90px; border-bottom:20px solid darkgreen;padding-bottom: 150px;border-radius: 20px;background-color: #94b395;padding-left: 10px;padding-top: 10px;border:5px solid darkgreen;}



.container .designpics .lap:hover {transform: rotate(20deg);}
	
.lineargrad { background-attachment: fixed; border-right: 30px solid #e35336; border-left: 30px solid #e35336;background:url("../AdobeStock_592179919.jpeg" )top center repeat-y;background-size: 100%;}


.Hpcontent .left {margin-left:-20px;}
a.one  {  padding:5px;border-radius: 20px;color:#94b395;}
a.one:hover  {  padding-bottom:20px;  border-radius: 20px;}
.nav a:hover {color: #94b395; font-style: italic;font-size:25px;}
.nav a {  display: inline-block;height: 30px; text-align: center;  color: #e35336;font-size: 20px; text-decoration: none; font-family: "chabplan", sans-serif;
font-weight: 400;
font-style: normal;}
h1 {font-family: "mynerve", sans-serif;
font-weight: 500;
font-style: normal;}
h2 {font-family: "studio-mn", sans-serif;
font-weight: 400;
font-style: normal;}
p {font-family: "mynerve", sans-serif;
font-weight: 500;
font-style: normal;}
img {width: 100%;}
.nav {padding: 10px;margin-right: 30px;}







/* Nav*/
.nav .logo img {width:5%;position: fixed;}
.nav  .logo img:Hover {width: 6%; }

/* homepage*/
.Hpcontent .col-4 h1 {color:tomato;}
.Hpcontent a {font-size: 20px; margin-left: 20px;padding: 8px; background: #94b395;border-radius: 20px;text-decoration: none;color:white;font-family: "chabplan", sans-serif;
font-weight: 400;
font-style: normal;}
.green {color:#5C4033}
.Hpcontent a:hover {background-color: tomato;font-style: italic;}
.Hpcontent h1 {  text-shadow: 2px 2px 4px #351e14;font-family: "chabplan", sans-serif;
font-weight: 400;
font-style: normal;text-align: left;font-size: 60px;}
.Hpcontent h1:hover {color:tomato;font-style: italic;}
.Hpcontent h2 {font-family: "kit-rounded", sans-serif;
font-weight: 700;
font-style: normal;color: #5c372c;margin-bottom: 30px; text-align: left; font-size: 15px;margin-top: 40px;}
.text {margin-bottom: 30px;}
.hpimg .arrow {width: 100%;margin-top: 30px;margin-left: 50px;}
.hpimg .arrow:hover {transform: rotate(10deg);}
.hpimg img {width: 150%;margin-top: 30px;}
.hpimg img:hover {transform: rotate(10deg);}
.col-2 .hand {width: 300%; margin-top: 590px;}

/* Photo*/

.container .pics p {font-size: 60px;color: #94b395;text-align: right;}
.container .pics p:hover {color:tomato;font-style: italic;}

.container .pics  h2 {font-size:25px;text-align: left;margin-left: 30px;}
.col-12 .cam  {width: 90%;transform: rotate(10deg);margin-bottom: 50px;}
 .cam:hover  {transform: rotate(-10deg);}

/* Photo
.container .pics img {border-radius: 10px;}
.container .pics .adry img{width:234px; height: 350px;}
.container .pics .choc img{width:120px; height:350px}
.container .pics .skate img{ width:150px; height: 350px;}
.container .pics .duck img{width:180px; height:350px}
.container .pics .train img {width:327px; height: 350px}
.container .pics .bird img{width:130px; height: 311px}
.container .pics .bayl img{width:377px; height: 311px}

/* Photo
.container .pics img {border-radius: 10px;}
.container .pics .adry img{width:350px; height: 377px;}
.container .pics .choc img{width:172px; height:377px}
.container .pics .skate img{ width:162px; height: 377px;}
.container .pics .duck img{width:280px; height: 423px}
.container .pics .train img {width:405px; height: 423px}
.container .pics .bird img{width:130px; height: 311px}
.container .pics .bayl img{width:536px; height: 311px}
*/
/* Reset CSS */
.container .pics p {font-size: 80px; border-top: 50px dotted  #e35336;}
.container .pics {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: sans-serif;
}
.container .pics h1 {
  color: coral;
}
 .container .pics .grid-container { border-bottom: 50px dotted  #e35336;padding-top: 20px;
  columns: 3 160px;
  column-gap: 1.5rem;
  width: 100%;
  margin: 0 auto;
  div {
    width: 10px;
    margin: 0 1.5rem 1.5rem 0;
    display: inline-block;
    width: 100%;
    border: solid 2px black;
    padding: 5px;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
    border-radius: 5px;
    transition: all .25s ease-in-out;
    &:hover img {
      filter: grayscale(0);
    }
    &:hover {
      border-color: coral;
    }
    img {
      width: 100%;
      filter: grayscale(100%);
      border-radius: 5px;
      transition: all .25s ease-in-out;
    }
    p {
      margin: 5px 0;
      padding: 0;
      text-align: center;
      font-style: italic;
    }
  }
}

.container .designpics .grid-container { border-bottom: 50px dotted  #e35336;padding-top: 20px;
  columns: 3 200px;
  column-gap: 1.5rem;
  width: 100%;
  margin: 0 auto;
  div {
    width: 10px;
    margin: 0 1.5rem 1.5rem 0;
    display: inline-block;
    width: 100%;
    border: solid 2px black;
    padding: 5px;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
    border-radius: 5px;
    transition: all .25s ease-in-out;
    &:hover img {
      filter: grayscale(0);
    }
    &:hover {
      border-color: coral;
    }
    img {
      width: 100%;
      filter: grayscale(100%);
      border-radius: 5px;
      transition: all .25s ease-in-out;
    }
    p {
      margin: 5px 0;
      padding: 0;
      text-align: center;
      font-style: italic;
    }
  }
}








/* Design*/
.designpics .grid-container { columns: 5 200px;}
.container .designpics .col-6 {margin-top: 20px;}
.container .designpics .col-6 p{font-size:30px;}


/* .container .designpics .col-6 body {
  display: flex;
  justify-content: center;	
  align-items: center;
  flex-direction: column;
  font-family: sans-serif;
}*/
.container .designpics .col-4 p {font-size: 100px;margin-left: 20px;color: #94b395;}
.container .designpics p:hover {color:tomato;font-style: italic;}
.container .designpics .col-4 h1 {text-align: center; margin-top: 200px;}
.container .designpics .col-4 h2 {margin-bottom: 40px;}
/* About Me
.container .designpics img {width: 400px;border-radius: 10px}*/
.container .designpics h1 {margin-left: 10px;text-align: right;}
.container .designpics h1:hover {color:tomato;font-style: italic;}

.container .designpics h2 {   padding: 10px;border-radius: 5px; border: solid 2px black;
text-align: right;font-size: 25px;padding-bottom: 20px;	}

.container .designpics .lap {width: 100%;margin-right: 50px;margin-top: 20px;}
.container .designpics .lap:hover {background: url("../imgs/ogsplat.png")top center no-repeat; background-size:100%;}




/* About Me*/
.me .col-6 .button a {margin-bottom: 10px;}
.me .col-6 img {margin-top: -40px; margin-bottom: 40px;}
.me  .button{border-bottom:  50px dotted  #e35336;padding-bottom: 40px;}
.me .bio h2 {color:#5C4033;border: solid 2px black; padding-left: 10px; padding-right: 10px; text-align: left; font-size:27px;}
.me .bio p{text-align:left;  color: #94b395;font-size: 50px;}
.me .bio p:hover {color: #e35336; font-style: italic;}
.bio {column-count:2;}
.me .col-5 img {margin-bottom: 50px;width: 20%;margin-top: 50px;}
.me .button a{ margin-top: 100px;text-align: right;font-family: "mynerve", sans-serif;
font-weight: 500;
font-style: normal;margin-left: 100px; font-size: 30px;text-decoration: none;background-color: #94b395;border-radius: 20px;padding:10px;color:white;}
.me a:hover {font-style: italic; background-color: tomato;}
.three img {width: 150%;}
.me h2 {font-size:25px;text-align: right;}
.col-10 h2 {font-size:25px;text-align: right;}
.me p {text-align: right;}

/* Contact*/
.three img {width: 80%;}
.three {margin-top: 40px;padding-bottom: 30px;}
.three p {font-size: 25px;font-weight: 800;text-align: center;color: tomato;}
.three .col-2 img:hover {transform: rotate(20deg)}




@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400);

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: white;
  font-size: 0.875em;
}

input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {
  color: #bbb5af;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #aca49c;
  font-size: 0.875em;
}

input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {
  color: #bbb5af;
}

input::placeholder, textarea::placeholder {
  color: darkgreen;
  font-size: 0.875em;
}

input:focus::placeholder, textarea::focus:placeholder {
  color: #bbb5af;
}

input::-ms-placeholder, textarea::-ms-placeholder {
  color: #aca49c;
  font-size: 0.875em;
}

input:focus::-ms-placeholder, textarea:focus::-ms-placeholder {
  color: #bbb5af;
}

/* on hover placeholder */

input:hover::-webkit-input-placeholder, textarea:hover::-webkit-input-placeholder {
  color: #e2dedb;
  font-size: 0.875em;
}

input:hover:focus::-webkit-input-placeholder, textarea:hover:focus::-webkit-input-placeholder {
  color: #cbc6c1;
}

input:hover::-moz-placeholder, textarea:hover::-moz-placeholder {
  color: #e2dedb;
  font-size: 0.875em;
}

input:hover:focus::-moz-placeholder, textarea:hover:focus::-moz-placeholder {
  color: #cbc6c1;
}

input:hover::placeholder, textarea:hover::placeholder {
  color: #e2dedb;
  font-size: 0.875em;
}

input:hover:focus::placeholder, textarea:hover:focus::placeholder {
  color: #cbc6c1;
}

input:hover::placeholder, textarea:hover::placeholder {
  color: #e2dedb;
  font-size: 0.875em;
}

input:hover:focus::-ms-placeholder, textarea:hover::focus:-ms-placeholder {
  color: #cbc6c1;
}

body {
  font-family: 'Lato', sans-serif;
  background: #e2dedb;
  color: #b3aca7;
}

header {
  position: relative;
  margin: 100px 0 25px 0;
  font-size: 2.3em;
  text-align: center;
  letter-spacing: 7px;
}

#form {
  position: relative;
  width: 500px;
  margin: 50px auto 100px auto;
}

input {
  font-family: 'Lato', sans-serif;
  font-size: 0.875em;
  width: 470px;
  height: 50px;
  padding: 0px 15px 0px 15px;
  
  background: transparent;
  outline: none;
  color: #726659;
  
  border: solid 1px darkgreen;
  border-bottom: none;
  
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}

input:hover {
  background: #b3aca7;
  color: #e2dedb;
}

textarea {
  width: 470px;
  max-width: 470px;
  height: 110px;
  max-height: 110px;
  padding: 15px;
  
  background: transparent;
  outline: none;
  
  color: #726659;
  font-family: 'Lato', sans-serif;
  font-size: 0.875em;
  
  border: solid 1px darkgreen;
  
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}

textarea:hover {
  background: #b3aca7;
  color: #e2dedb;
}

#submit {
  width: 502px;
  
  padding: 0;
  margin: -5px 0px 0px 0px;
  
  font-family: 'Lato', sans-serif;
  font-size: 0.875em;
  color: #b3aca7;
  
  outline:none;
  cursor: pointer;
  
  border: solid 1px #b3aca7;
  border-top: none;
}

#submit:hover {
  color: #e2dedb;
}









@media only screen and (max-width: 767px) {  /* 540px */
	 /* nav */
	
	.lineargrad {background-size:500%;}
	.container .pics h2  {margin-left: 30px;}
 .container .pics .grid-container { border-bottom: 50px dotted  #e35336;padding-top: 20px;
  columns: 2 100px;
  column-gap: 1.5rem;
  width: 100%;
  margin: 0 auto;
  div {
    width: 10px;
    margin: 0 1.5rem 1.5rem 0;
    display: inline-block;
    width: 100%;
    border: solid 2px black;
    padding: 5px;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
    border-radius: 5px;
    transition: all .25s ease-in-out;
    &:hover img {
      filter: grayscale(0);
    }
    &:hover {
      border-color: coral;
    }
    img {
      width: 100%;
      filter: grayscale(100%);
      border-radius: 5px;
      transition: all .25s ease-in-out;
    }
    p {
      margin: 5px 0;
      padding: 0;
      text-align: center;
      font-style: italic;
    }
  }
}

	.nav .col-2 .logo{background: none; }
	.container .pics p {font-size: 60px;margin-top: 30px}
.designpics .col-4 h1 {text-align: center;}
.nam .col-2 img {background: none;}
	.nav a { text-shadow:  3px 3px 3px #94b395 ; display:inline-block;margin-left: 140px;padding: 30px;font-size: 30px;}
	.nav .logo img{width: 13%;margin-top: -25px;}
	/* hp */
	.Hpcontent {display: inline-block;}
	.Hpcontent h2 {font-size: 10px;text-align: center;}
	.Hpcontent h1 {font-size: 60px;text-align: left;background-image: url("../imgs/arrow.png"); background-size: 20%;background-repeat:no-repeat;background-position: right;}
	.Hpcontent a {margin-left: 70px;}
.Hpcontent .col-2 img{display: none;}
	.Hpcontent .col-4 img {width: 10%;padding-bottom: 100px;} 
.hpimg img {display: none;}

.designpics .p {font-size:10px;}

	.three img {width: 30%;margin-left:  130px;}
}