/*Style the WebPage */

*{
	box-sizing:border-box;
	padding:0;
	margin:0;
	font-family: Arial, sans-serif;

	
}

.container  {
 

  background-image:url("../images/SJAback.jpg");
  background-size:cover;
  background-repeat:no-repeat;
  border:5px solid gold;
  
 
 	}



.main-header {

 /* padding: 0 1.5rem;
  background-color:#36454F ;     /*charcoal grey color */
  height: 4rem;
  display:flex;
  justify-content:space-around;
  position:sticky;
  position:-webkit-sticky;
  top:0;
background-color:black;

}

header nav{
	display:none;
	
}


#brand {
  margin-right:350px;
  font-weight: bold;
  font-size: 1.5rem;
  /*display: flex;
  /*align-items:center;
  padding-left:1rem; */
}

/* color for logo */

#brand a {
  color: gold;
}



.mobile-menu a{
	
	color:white;
	font-weight:bold;
  text-decoration:none;
}




 .mobile-menu #login a,
 .mobile-menu #signup a {
  border-radius: 5px;
  padding: 5px 8px;
  color:white;
  font-weight:bold;
}



#hamburger-icon {
  margin: 2rem;
/*  display:block;   */
  cursor: pointer;
}

#hamburger-icon div {
  width: 2.2rem;
    height: .22rem;
  background-color: gold;
  margin: .4rem 0;
  transition: .4s;
}

.open .bar1 {
  -webkit-transform: rotate(-45deg) translate(-6px, 6px);
  transform: rotate(-45deg) translate(-6px, 6px);
}

.open .bar2 {
  opacity: 0;
}

.open .bar3 {
  -webkit-transform: rotate(45deg) translate(-6px, -8px);
  transform: rotate(45deg) translate(-6px, -8px);
}

.open .mobile-menu{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}


.open main-content{
	display:block;
	opacity:0;
	
}

.mobile-menu {
  display: none;
  position:relative;
  font-size:1.3rem;
  top: 2rem;
  left: 0;
  height:auto;
  width: 100%;
 
 background-color:darkgray;
 border: 4px solid darkgreen; 
}

.mobile-menu li {
  margin-bottom: .5rem;
  list-style-type:none;
}


nav{
	position:sticky;
	left:0;
	right:0;
	top:0;
	max-width:100%;
	

	z-index:999;
/*	border:5px solid gold;   
	border-bottom:5px solid white;*/
	display:flex;
	flex-direction:column;
	
}


nav .navbar{
	display:flex;
	align-items:center;
	justify-content:space-evenly;
	/*height:100%;  */
	max-width:100%;
	color:#F1BE48;
}


nav .navbar .logo a{
	color:#F1BE48;
	font-weight:900;
	text-decoration:none;
	padding-left:1rem;
	text-shadow:2px 2px black;
	font-family:cursive;
	font-size:1.75rem;
}


nav .navbar .menu {
	display:flex;
	flex-wrap:wrap-reverse;
/*	padding:1rem 10vmin;
	margin: 0 1rem;
	*/
}


nav .navbar .menu li{
	list-style:none;
	margin: 0 2rem;
	align-items:center;
	
}


.navbar .menu li a {
	color:white;
	font-weight:900;
	text-decoration: none;
}


.hero1 {
    display: flex;
    flex-direction: column;
    background-image: url("https://free-images.com/sm/37d5/dog_animal_pets_puppy_1.jpg");
   height: 100%;
	max-width:100%;
	background-size:cover;
    align-self: center;
    background-repeat: no-repeat;
   
   /*   background-attachment: fixed;*/
   object-fit:contain;
   
    justify-content: center;
    color:white;

}	

/*
.end{
	
	background-color: lightyellow;
	margin:0 auto;
/*	padding-left:9rem;
	padding-bottom:7rem;   */
	




  
 .end .resp{
	 display:block;
	 max-width:100%;
     height:100%;
     margin:10px auto;
     border:7px solid gold;
	 }
 
 .end2{
	  /*display:block;
	 margin:0 auto;*/
	
	 display:flex;
	 flex-wrap:wrap;
	 text-align:center; 
	
 }
 
 
.resp{
	max-width:100%;
	box-shadow:
	 0 0 0 5px black,
  0 0 0 10px gold;
  /*
    border:3px solid black;
	border:11px solid gold;
	*/

}


p.left{
	
       padding: 1rem;
       margin: 1rem 0;
      transform: translateX(-50%); 
       transition: transform 1s linear;
      opacity:0;
}


.stdName{
	padding: 1rem;
       margin: 1rem 0;
      transform: translateX(-50%); 
       transition: transform 1s linear;
      opacity:0;
	
}


p.right{
       padding: 1rem;
       margin: 1rem 0;
       transform: translateX(-50%);
       transition: transform 1s linear;
       opacity:0;
}

p.text{
    padding-left:2rem;
	padding-right:2rem;
	
}


.container p.active{
 
    opacity:1;
    transform: translateX(0);
    
	
	}
	
	
	
.fade-up{
	
	opacity:0;
	position:relative;
	transform:translateY(5rem);
	
	transition:transform 2s cubic-bezier(0.64, 0.04, 0.26, 0.87),
	opacity 0.8s cubic-bezier(0.64, 0.04, 0.26, 0.87);
	transform:translateY(5rem);


&.loaded{
	opacity:1;
	transform:translateY(0);
	transition-delay:.9s;
	
}
	}
	
	.flex-container{
		background-color:#f1ba8a;
		display:flex;
		flex-direction:row;
		justify-content:space-between;
		
	}
	
	.card{

   width:350px;
   height:auto;
   padding:2.5rem 1.5rem 1.5rem 1.5rem;
   background:#ECEFF1;
   box-shadow: 10px 10px darkgreen;
   border-radius:100px;
   margin:1rem auto;	
   overflow:hidden;
	}
	
	.text{
		padding: 0 3rem;
	    color:#F1BE48;	
		text-shadow:2px 2px black;
	font-family:cursive;
	font-size:1.75rem;
	}
	

.hero {
    display: flex;
    flex-direction: column;
    background-image: url("https://images6.alphacoders.com/128/1280265.jpg");
    height: 100vh;
    align-self: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    align-items: center;
    justify-content: center;
    color:white;

}	

.hero_text{
	
	font-size:1.4rem;
	text-align:center;
	color:white;
	display:block;
	margin:0 auto;
}

.text {
   
    text-align: center;
    color: #F1BE48;
    text-shadow:3px 3px black;
	font-family:cursive;
	font-size:2.00rem;
}


	
	/*****************For large screens  ****************/
	
	
	/****************************************Large SCREEN Media Query ****************************************/
	
	@media screen and (min-width:720px) {
  
  .container{
	  
	  display:grid;
	  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	 
	  grid-gap:8px;
  }
     
	 .main-header{
		 height:7rem;
		 padding-top:1rem;
	 }
	 
	 
	 
header{
	display:flex;
	background-color: #1d1f1d;
  /*  padding: 0 1.5rem; */
    height:4rem;
    justify-content:space-between;

} 

header nav{
	display:flex;
}

nav{
	position:sticky;
	left:0;
	right:0;
	top:0;
	max-width:100%;
	

	z-index:999;
/*	border:5px solid gold;  
	border-bottom:5px solid white;
/*	display:flex;
	flex-direction:column;
*/	
}




#login {
  border: 2px solid #FFD700;
}

nav .navbar .menu {
	display:flex;
    flex-wrap:nowrap;  
	justify-content:space-evenly;
	align-items:center;
	height:100%;
	max-width:100%;
/*	padding:1rem 10vmin;
	margin: 0 1rem;
	*/
}

#signup {
  border: 2px solid #FFD700;
}

#signup a {
  color: #98817B;
}

#login a {
  color: #A57164;
}



ul {
  list-style: none;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}


ul a {
  color: white;
}

ul li {
  padding: 5px;
  margin-left: 10px;
}

ul li:hover {
  transform: scale(1.1);
  transition: 0.3s;
}


  #hamburger-icon {
    display: none;
  }

  
  span{
	   margin-top:90;
	   margin-left:265px;
	   font-style: italic;
	   font-weight: bold;
  }
  
  #para{
	  font-style:normal;
	  font-weight:normal;
	  margin-top:200px;
	  margin-left:-300px;
	  
	  
  }
  
  #intro{
	  
	  margin-left:150px;
  }
  
nav{
	 grid-column:1/9;
	 position:sticky;
 }
 
 
  #AA{
		  order:0;
	  }
	  
	  
  #A{
	  order:1;
  }
  
  #B{
	  order:2;
	 
  }
  
  #C{
	  order:3;
  }
  
  #D{
	  order:4;
  }
  
  #E{
	  order:5;
  }
  
  #F  {
	  order:6;
  }
  #G{
	  order:8;
  }
  #H{
	  order:7;
  }
  #I{
	  order:9;
  }
  #J{
	  order:10;
  }
  #K{
	  order:12;
  }
  
  #L{
	  order:11;
  }
  #M{
	  order:13;
  }
  #N{
	  order:14;
  }
  #O{
	  order:16;
  }
  #Q{
	  order:15;
  }
  #R{
	  order:17
  }
  #S{
	  order:18;
  }
  #T{
	  order:20;
  }
  #U{
	  order:19;
  }
  
  
  .hero2{
	   background-image: url("https://free-images.com/sm/37d5/dog_animal_pets_puppy_1.jpg");
        
	  grid-column:1/9;
	  height:400px;
	  text-align:center;
	  font-size:2.5rem;
	  background-size:cover;
    align-self: center;
    background-repeat: no-repeat;
   
   /*   background-attachment: fixed;*/
   object-fit:contain;
   
    justify-content: center;
    color:white;
  }
  
  
	

p.left{
	
      padding: 1rem;
       margin: 1rem 0; 
       transform: translateX(-34%); 
       transition: transform 1s linear;
       opacity:0;
	   display:grid;
	   grid-column:1/5;
	   display:flex;
} 

p.right{
       padding: 1rem;
       margin: 4rem 0;
       transform: translateX(34%);
	   
       transition: transform 1s linear;
       opacity:0;
	   display:grid;
	   grid-column:5/8;
	   display:flex;
	   overflow:hidden;
}


.stdName{
	padding: 1rem;
       margin: 1rem 0;
      transform: translateX(-50%); 
       transition: transform 1s linear;
      opacity:0;
	
}

/*   To undo pading from small screens  */
p.text{
      padding-left:0;
	  padding-right:0;
	  padding-top:0
}

.intro{
	margin-left:-450px;
	
}

      

/*
.fade-up{
	
	opacity:0;
	position:relative;
	transform:translateY(5rem);
	
	transition:transform 2s cubic-bezier(0.64, 0.04, 0.26, 0.87),
	opacity 0.8s cubic-bezier(0.64, 0.04, 0.26, 0.87);
	transform:translateY(5rem);


&.loaded{
	opacity:1;
	transform:translateY(0);
	transition-delay:.9s;
	
}
*/

	}