@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Indie+Flower|Luckiest+Guy&display=swap');
/*Desktop view ------------------------------------------------------------------*/
@media (min-width: 1024px) and (max-width: 1280px) {
.secondary_header {
	overflow: auto;
	padding-top: 30px;
	padding-bottom: 30px;
}
.secondary_header ul li {
	margin-top: 10px;
	margin-right: 7%;
	margin-bottom: 10px;
	margin-left: 7%;
}
.left_article {
	height: auto;
}
.right_article {
	height: auto;
	padding-bottom: 27px;
}
.placeholder {
	width: 100%;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 0px;
	padding-right: 0px;
}
.columns {
	width: 50%;
	float: left;
	padding-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}
.container .columns p {
	padding-left: 25px;
	padding-right: 25px;
}
}

/* All pages Desktop Pages - This set of CSS applies to each page, for the CSS specific to each page find the comment for that page -----------------------------------------------------------*/
html *{
	border: 0;
	margin: 0;
}
.wrapper{
  width:90%;
  margin-right:auto;
  margin-left:auto;
  background-color:#f9faeb;
}
img{
  width:100%;
  height:100%;
	background-color:lightgray;
}
header{
	grid-area: header;
  background-color:#1D4273;
  padding:25px 0px 10px 0px;
}
header a{
  text-decoration:none;
}
header h1{
  margin-left:25px;
  color:white;
  padding-bottom:25px;
  font-size:3em;
  font-family:'Luckiest Guy', cursive;
  font-weight:800;
}
nav{
	text-align: left;
	padding: 25px;
  background-color:#8CA653;
  border-top:solid thin #96B3D9;
  border-bottom:solid thick #96B3D9;
}

nav a{
	margin-right: 25px;
	padding-right: 10px;
	border-right: thin solid #F1F2CE;
  text-decoration:none;
  color:#F1F2CE;
  font-weight:bold;
  font-size:18pt;
  font-family:'Indie Flower', cursive;
   -webkit-transition: color 1s border-right 1s; /* Safari prior 6.1 */
  transition: color 1s border-right 1s;
}
nav a:hover{
  color:#3E5902;
  border-right: solid thin #3E5902;
}

p{
   font-size: 16pt;
  line-height: 125%;
}
h1, h2, h3{
  margin-bottom: 8px;
}

.socialMedia svg{
 margin-right: 50px;
}
.socialMedia{
  margin-top:10px;
  padding:5px 0px;
  text-align:center;
  margin-bottom: 20px;
  background-color:#96B309;
  border-top:solid thin #3E5902;
  border-bottom:solid thin #3E5902;
}

footer{
  grid-area:footer;
  background-color:#1D4273;
  padding-top:0px;
  color:white;
}

footer p{
	margin-top: 15px;
  margin-left:25px;
}
/*Index CSS for Desktop View--------------------------------------------------------*/
.indexContainer{
    display:grid;
    grid-gap:25px;
    grid-template-areas:
    'header header'
    'text1 image1'
    'image2 image3'
    'text2 text3'
    'footer footer';
    overflow:hidden;
    align-content:center;
    justify-content:center;
    
}

.giftmessage{
    grid-area:text1;
    margin-left:25px;
}
.familypet{
    grid-area:image1;
    margin:0px 25px;
}
.adoptimage{
    grid-area:image2;
    margin-left:25px;
}
.adoptpet{
    grid-area:text2;
    margin-left:25px;
}
.wishlist{
    grid-area:text3;
    margin-right:25px;
}
.wishimage{
    grid-area:image3;
    margin-right:25px;
}
    .giftmessage p{
        line-height:150%;
    }
   
/*Adopt Page CSS Desktop View ----------------------------------*/
.adoptcontainer{
    grid-gap:50px;
    grid-template-areas:
    'header header'
    'text1 text2'
    'image1 image2'
    'footer footer'
    'overflow:hidden';
}
.adoptablemessage{
  grid-area:text1;
  padding:0px 25px;
}
.image1{
    grid-area:image1;
    padding:0px 25px;
}
.image2{
    grid-area:image2;
    padding:0px 25px;
}
.image3{
    grid-area:image3;
    padding:0px 25px;
}
.image4{
    grid-area:image4;
    padding:0px 25px;
}
.adoptcontainerh3{
    font-size:2.5em;
    margin:-17% 0% 0% 2%;
    color:white;
    text-shadow:1px 1px 1px black;
}
/*Wish List Page Desktop View -------------------*/
.wishcontainer{
    display:grid;
    grid-gap:25px;
    grid-template-areas:
    'header header'
    'text image'
    'lists lists'
    'footer footer'
    'overflow:hidden';
    justify-content:center;
    align-content:center;
    width:100%;
}
 .wishmessage{
  grid-area:text;
  margin:0px 25px 0px 25px;
}
 .donateimage{
     grid-area:image;
     clip-path:inset(70px 0px 10px 0px);
     margin-top:-20%;
     margin-right:25px;
     overflow:hidden;
 }
    .lists{
        grid-area:lists;
        display:grid;
        grid-template-columns:'.15fr .35fr .35fr .15fr';
        grid-gap:20px;
    }
    .list1{
        grid-column:2;
        line-height:150px;
    }
    .list2{
        grid-column:3;
        line-height:150px;
    }
     .wishmessage p{
        line-height:150%;
    }

/*Donate Page Desktop View CSS -------------------------------*/
.donateContainer{
    display:grid;
    grid-gap:25px;
    grid-template-areas:
    'header header'
    'text image'
    'form form'
    'footer footer';
    overflow:hidden;
    justify-content:center;
    align-content:center;
}
     .donations{
  grid-area:text;
  margin-left:25px;
}
       .familydog{
        grid-area:image;
        display:grid;
        margin-top:-150px;
        margin-right:25px;
        clip-path:inset(150px 0px 0px 0px);
        
    }
    .donateform{
        grid-area:form;
        margin:0px 25px 0px 0px;
    }
    #form1{
        display:grid;
        grid-template-areas:
        'ammount type name'
        'address address address'
        'address2 address2 address2'
        'email email email'
        'payment payment payment'
        'buttons buttons buttons'
        line-height:200%;
        font-size:14%;
    }
    .ammount{
        grid-area:ammount;
        margin-right:50px;
    }
       .type{
        grid-area:type;
    }
       .name{
        grid-area:name;
    }
       .email{
        grid-area:email;
    }
       .address{
        grid-area:address;
    }
       .address2{
        grid-area:address2;
    }
       .payment{
        grid-area:payment;
    }
       .buttons{
        grid-area:buttons;
    }
    #textfield, #textfield2, #textfield3, #textfield6{
        width:100%;
        height:30px;
        margin-bottom:25px;
        margin-right:25px;
    }
    #email{
        width:70%;
        height:30px;
        margin-bottom:25px;
        margin-right:25px;
    }
    #testfield4{
        width:10%;
        height:30px;
        margin-bottom:25px;
        margin-right:25px;
    }
    #textfield5{
        width:27%;
        height:30px;
        margin-bottom:25px;
        margin-right:25px;
    }
    #textfield7{
        width:30%;
        height:30px;
        margin-bottom:25px;
        margin-right:25px;
    }
    #textfield8{
        width:27%;
        height:30px;
        margin-bottom:25px;
    }
    #submit{
        width:150%;
        height:30px;
        background-color:#8CA653;
        color:#F1F2CE;
        border-radius:5px;
        border:solid thin #728844;
        margin-left:25px;
    }
   #submit:hover{
        background-color:#728844;
        border:solid thin #8CA653;
   }
   #reset{
        width:150%;
        height:30px;
        background-color:#96B3D9;
        color:#F1F2CE;
        border-radius:5px;
        border:solid thin #7CA0D0;  
   }
   #reset:hover{
        background-color:#7CA0D0;
        border:solid thin #96B3D9;
   }
/*Tablets View ---------------------------------------------------------------------*/
/* Medium devices (landscape tablets, 768px and less) */
@media (min-width: 768px) and (max-width: 1023px) {
.secondary_header {
	overflow: auto;
	padding-top: 30px;
	padding-bottom: 30px;
}
.secondary_header ul li {
	margin-top: 10px;
	margin-right: 7%;
	margin-bottom: 10px;
	margin-left: 7%;
}
.left_article {
	height: auto;
}
.right_article {
	height: auto;
	padding-bottom: 27px;
}
.placeholder {
	width: 100%;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 0px;
	padding-right: 0px;
}
.columns {
	width: 50%;
	float: left;
	padding-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}
.container .columns p {
	padding-left: 25px;
	padding-right: 25px;
}
}
    
  /*Index CSS Tablet View ----------------------*/
  
/*Adopt Page CSS Tablet View ----------------------*/
 .adoptcontainerh3{
     margin-top:-23%;
 }
  /*Wish List page Tablet View -------------*/
  .donateimage{
      clip-path:inset(60px 0px 10px 0px);
  }
  /*Donate Page Tablet View CSS -----------------*/
  #form1{
      display:grid;
    grid-template-areas:
    'ammount type'
    'name name'
    'address address'
    'address2 address2'
    'email email'
    'payment payment'
    'buttons buttons';
  }
}
/* Mobile View (phones, 600px and down) ---------------------------------------------- */

  @media (min-width: 321px) and (max-width: 768px) {
.secondary_header ul li {
	float: none;
	margin-top: 28px;
	margin-left: 0px;
	width: 100%;
}
.container .secondary_header ul {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	height: auto;
	width: 100%;
	text-align: center;
}
.secondary_header {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 1px;
	padding-bottom: 40px;
}
.left_article {
	width: 100%;
	height: auto;
}
.right_article {
	width: 100%;
	height: auto;
	padding-bottom: 25px;
}
.columns {
	width: 100%;
	margin-top: 6px;
	margin-right: 0px;
	margin-bottom: 6px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.columns p {
	padding-left: 14px;
	padding-right: 14px;
}
.thumbnail {
	width: 100px;
	border-radius: 200px;
	height: 100px;
	margin-left: auto;
}
.thumbnail_align {
	text-align: center;
}
.social {
	text-align: center;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100%;
	background-color: #414141;
	clear: both;
	overflow: auto;
}
.social_icon {
	width: 25%;
	text-align: center;
	float: left;
	transition: all 0.3s linear;
	line-height: 0px;
	padding-top: 7px;
}
.container .social .social_icon:hover {
	cursor: pointer;
	opacity: 0.5;
}
}
 /*All pages CSS Mobile View ----------------------*/
 
  /*Index Page Mobile View ---------------------------*/
.indexcontainer{
    grid-template-areas:
    'header'
    'text1'
    'image2'
    'text2'
    'image3'
    'text3'
    'footer'
    }
    .familypet{
        display:none;
    }
    .giftmessage{
        margin:0px 15px;
    }
    .giftmessage p{
        line-height:130%;
    }
     .adoptimage{
        width:100%;
        margin:0px;
    }
    .adoptpet{
        margin:0px 15px;
    }
    .wishimage{
        width:100%;
        margin:0px;
    }
    .wishlist{
       margin:0px 15px; 
    }
    
/*Adopt Page CSS Mobile View --------------------------*/
 .adoptcontainer{
     grid-template-areas:
     'header'
     'text1'
     'image1'
     'image2'
     'image3'
     'image4'
     'footer'
     'grid-gap:25px';
 }
 .adoptcontainerh3{
     margin:-25% 0% 0% 0%;
     text-align:center;
 }
  /*Wish List Page Mobile View CSS ---------------------*/
  .wishcontainer{
      display:grid;
    grid-template-areas:
    'header'
    'text'
    'lists'
    'lists'
    'footer';
  }
    .wishmessage{
     margin:0px 15px 0px 15px;
    }
    .donateimage{
        display:none;
    }
    .lists{
        display:grid;
        grid-template-columns:'1fr';
        grid-template-rows:'.25fr .25fr';
    }
     .list1{
        grid-area:1/1;
        margin-left:10%;
    }
     .list2{
        grid-area:2/1;
        margin-left:10%;
    }
    
  /*Donate Page Mobile View -----------------------*/
  .donatecontainer{
      display:grid;
    grid-template-areas:
    'header'
    'text'
    'form'
    'footer';
  }
  }