/* --------- CONTACT US ------------------------ */

body {
	overflow-x:hidden;
	background-color: #f7e4b2;
	}
	
.socic {
	text-decoration: none;
}
	
.socic:hover {
	text-decoration: none;
}
	
@keyframes rsrclogofadein {
	0% {opacity: 0;}
	30% {opacity: 0;}
	100% {opacity: 0.05;}
}

.logobackcontact-container {
	z-index: -2;
	position: fixed;
	text-align: center;
	top: 100px;
	width: 80%;
	left: 10%;
	height: 80%;
	transition: top 2s ease, left 2s ease, height 2s ease;
}

.iconimage {
	position: fixed;
	display: block;
	z-index: 89;
	top: 15%;
	width: 500px;
	left: calc((100% - 500px) / 2);
	opacity: 0.05;
	animation: rsrclogofadein 6s linear;
}


	
.contact-intro {
	grid-area: contactIntro;
	place-self: center;
	font-size: 16px;
	text-align: justify;
}	


.description1 {
	grid-area: description1;
	place-self: center;
	text-align: justify;
}
	
.description2 {
	grid-area: description2;
	place-self: center;
	text-align: justify;
}

@keyframes rotation {
  from {
	transform: rotate(0deg);
  }
  to {
	transform: rotate(359deg);
  }
}

@keyframes imageFadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

.joe-caylee {
	grid-area: joeCaylee;
	place-self: center;
	animation: rotation 2s 1 ease-out, imageFadeIn 2s ease-out;
}

.joe-cayleepic {
  width: 90%;
  max-width: 500px;
  min-width: 200px;
  clip-path: ellipse();
  place-self: center;
}

	
.phone {
	grid-area: phone;
	place-self: center;
}	

.text {
	grid-area: text;
	place-self: center;
}	

.email {
	grid-area: email;
	place-self: center;
	text-align: center;
}	

.fbmessenger {
	grid-area: fbmessenger;
	place-self: center;
}	

.link {
  font-size: 20px;
  color: black; 
  text-decoration: none;
  transition: background-color 1s ease;
}

.link:hover {
  background-color: yellow;
  cursor: pointer;
  transition: background-color .5s ease;
}

.link2 {
  font-size: 16px;
  font-weight: 600;
  color: black; 
  text-decoration: underline;
  transition: background-color 1s ease;
}

.link2:hover {
  background-color: yellow;
  transition: background-color .5s ease;
}

.questions {
	grid-area: questions;
	place-self: center;
    font-family: Times, serif;
}


.iconpic {
	height: 35px;
	transform: translateY(10px);
	
}

.socialmedia-title {
	grid-area: socialTitle;
	place-self: center;
}

.social-media {
	grid-area: socialMedia;
	place-self: center;
}

.social-icons {
	height: 50px;
  transition: box-shadow .5s ease, background-color 1s ease;
}

.social-icons:hover {
	cursor: pointer;
  background-color: rgba(153, 186,221, .7);
  box-shadow: 1px 1px 15px 5px rgba(153, 186,221, 1);
  transition: box-shadow .5s ease, background-color .5s ease;
}


/* GRID SETUP AND LAYOUT ----------------------------------------------------------- */
.grid-container-contact {
  z-index: 90;
  display: grid;
  position: relative;
  overflow-x: hidden;
  grid-gap: 10px;
  background-color: rgba(0, 0, 0, 0);
  top: 85px;
  left: 0%;
  width: 95%;
  color: black;
  padding: 20px;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  grid-template-areas: 
  'contactIntro contactIntro '
  'joeCaylee  description1'
  'joeCaylee  description2'  
  'questions questions ' 
  'email text' 
  'phone fbmessenger'
  'socialTitle socialTitle'
  'socialMedia socialMedia';
}



/* ------------------------------------------------PORTRAIT ORIENTATION ------------------------------------------------------------------- */
 @media (orientation: portrait) {
.grid-container-contact {
  grid-template-areas: 
  'contactIntro'
  'joeCaylee'  
  'description1'
  'description2'  
  'questions' 
  'email'
  'text' 
  'phone'
  'fbmessenger'
  'socialTitle'
  'socialMedia';
}
	

	
	 
 }