@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative&family=Nanum+Myeongjo:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@800&display=swap');
@import url("hover-min.css");


/* -------------------------------------All fonts from Google Fonts----------------------------------------*/
body, html {
  height: 100%;
  margin: 0;
}

header {
    margin: 0;}

/* -------------------------------------HEADERS----------------------------------------*/

/* ---------------Copied from w3schools.com------------------*/
.parallax {
  background-image: url("../imgs/IMG_0890.JPG");
  height: 800px;
  width:  100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;}

  
    @media only screen and (max-width: 450px){
.parallax
{background-image: url("../imgs/IMG_0890.JPG");
margin-top: 1px;
padding-top:0;
background-position-y: 100px;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100%;
  background: cover;
}
}


/* ---------------Copied from w3schools.com------------------*/
.parallax1 {
  background-image: url("../imgs/friends.jpg");
  height: 600px;
  width:  100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;}

/* ---------------Copied from w3schools.com------------------*/
.parallax2 {
  background-image: url("../imgs/henry.jpg");
  height: 620px;
  width:  100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;}

@media only screen and (max-width: 450px){
.parallax2
{background-image: url("../imgs/henry.jpg");
  height: 920px;
  width:  100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
}

/* ---------------Copied from w3schools.com------------------*/
.img-fluid {
  max-width: 100%;
  height: 800px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;}


/* ---------------Copied from Code Institute Lessons------------------*/
#animalsheader {
  background-image: url("../imgs/jag..jpg");
  max-width: 100%;
  height: 480px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;}

/* ---------------Copied from Code Institute Lessons------------------*/
#contactheader {
  background-image: url("../imgs/camera.jpg");
  max-width: 100%;
  height: 480px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;}


/* ---------------Copied from Code Institute Lessons------------------*/
#personalheader {
  background-image: url("../imgs/babyseyes.jpg");
  max-width: 100%;
  height: 480px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;}

 @media only screen and (max-width: 450px){
#personalheader
{background-image: url("../imgs/babyseyes.jpg");
margin-top: 1px;
padding-top:0;
background-position-y: 100px;
  background-attachment: fixed;
  background-repeat: no-repeat;
 background-position: cover;
 background-size: 100%;
}
}

/* ---------------Copied from Code Institute Lessons------------------*/
#commheader {
  background-image: url("../imgs/electric%20guitar%20and%20plant.jpg");
  max-width: 100%;
  height: 480px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;}


/* ---------------Copied from Code Institute Lessons------------------*/
#printsheader {
  background-image: url("../imgs/j12.jpg");
  max-width: 100%;
  height: 480px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;}

/* ---------------Copied from Code Institute Lessons------------------*/
#peopleheader{
  background-image: url("../imgs/Amazonian%20Woman.jpg");
  max-width: 100%;
  height: 480px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;}

/* ---------------Copied from Code Institute Lessons------------------*/
#plantsheader {
  background-image: url("../imgs/tulips2.jpg");
  max-width: 100%;
  height: 480px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;}

/* ---------------Copied from Code Institute Lessons------------------*/
#galleryheader {
  background-image: url("../imgs/IMG_2389.JPG");
  max-width: 100%;
  height: 480px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;}

/* ---------------Copied from Code Institute Lessons------------------*/
#aboutusheader {
  background-image: url("../imgs/rayban.jpg");
  max-width: 100%;
  height: 480px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;}

/* ---------------Copied from Code Institute Lessons------------------*/
.headsdivaboutus {
  max-width: 100%;
  height: 480px;
  background-color: rgba(255, 145, 2, 0.315);
  text-align: left;}

/* ---------------Copied from Code Institute Lessons------------------*/
.headsdiv{
  max-width: 100%;
  height: 480px;
  background-color: rgba(0, 0, 0, 0.2);
  text-align: left;}

/* -------------------------------------HEADINGS----------------------------------------*/
/* ---------------Copied from Code Institute Lessons------------------*/
#headingpersonal {
font-family: 'Nanum Myeongjo', serif;
font-weight: 400;
font-size: 20px;
color: #777777;
padding: 5%;}

/* ---------------Copied from Tutorialspoint.com------------------*/
head1 {font-family: "cinzel decorative";
color: black;
animation-name: fadeInUp;
animation-delay: 1s;
animation-duration: 5s;
    transition-timing-function: ease-in;
    animation-fill-mode: both;
} 

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}


/* ---------------Copied from Tutorialspoint.com------------------*/
h1 {font-family: "cinzel decorative";
color: white;
animation-name: fadeInUp;
animation-delay: 1s;
animation-duration: 7s;
transition-timing-function: ease-in;
animation-fill-mode: both;
} 

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}


/* ---------------Copied from w3schools.com------------------*/
#overlay {
  position: absolute; 
  bottom: 0; 
  width: 100%;
  transition: .8s ease-in;
  opacity:1;
  color: white;
  font-size: 46px;
  padding: 20px;
  float: left;
  height: 500px;}

/* ---------------Copied from w3schools.com------------------*/
#overlayouraim {
  position: absolute;  
  width: 80%;
  transition: .8s ease-in;
  opacity:1;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateY(-150%);}

@media only screen and (max-width: 450px){
#overlayouraim
{position: absolute;  
  width: 80%;
  opacity:1;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateY(-150%);
  background-position-y: middle;
  vertical-align: middle;
  animation:none;
}
}

/* ---------------Copied from Code Institute Lessons------------------*/
@media screen and (max-width: 800px){
#overlayouraim {
 column-count: 1; 
 width: 35%;
 margin-top:10%;
 }

}



/* ---------------Copied from w3schools.com------------------*/
#overlay2 {
  position: absolute; 
  bottom: 0; 
  width: 100%;
  transition: .8s ease-in;
  opacity:1;
  color: white;
  font-size: 46px;
  padding: 20px;
  float: left;
  height: 400px;}


/* ---------------Copied from w3schools.com------------------*/
#overlayplants{
  position: absolute; 
  bottom: 0; 
  width: 100%;
  transition: .8s ease-in;
  opacity:1;
  color: white;
  font-size: 46px;
  padding: 20px;
  float: left;
  height: 400px;
  margin-left: 4px;}


/* ---------------Copied from w3schools.com------------------*/
#overlaycontactus{
  position: absolute; 
  bottom: 0; 
  width: 100%;
  transition: .8s ease-in;
  opacity:1;
  color: white;
  font-size: 46px;
  padding: 20px;
  float: left;
  height: 400px;
  margin-left: 6px;}

/* ---------------Copied from w3schools.com------------------*/
#overlaycommercial{
 position: absolute; 
  bottom: 0; 
  width: 100%;
  transition: .8s ease-in;
  opacity:1;
  color: white;
  font-size: 44px;
  padding: 20px;
  margin-left: 4px;
  float: left;
  height: 400px;}

/* ---------------Copied from w3schools.com------------------*/
#overlayprints {
 position: absolute; 
  bottom: 0; 
  width: 100%;
  transition: .8s ease-in;
  opacity:1;
  color: white;
  font-size: 44px;
  padding: 20px;
  margin-left: 4px;
  float: left;
  height: 400px;}


/* ---------------Copied from w3schools.com------------------*/
#overlay3 {
  position: absolute; 
  bottom: 0; 
  width: 100%;
  transition: .8s ease-in;
  opacity:1;
  color: white;
  font-size: 42px;
  float: left;
  height: 550px;
  margin-left: 1%;}

/* ---------------Copied from w3schools.com------------------*/
#overlay4 {
  position: absolute; 
  bottom: 0; 
  width: 100%;
  transition: .8s ease-in;
  opacity:1;
  color: white;
  font-size: 46px;
  padding: 20px;
  float: left;
  height: 658px;}


/* ---------------Copied from Code Institute Lessons------------------*/
.headsdiv1{
max-width: 100%;
height: 480px;
background-color: rgba(0, 0, 0, 0.3);
text-align: left;
background-size: cover;}

 @media only screen and (max-width: 450px){
.headsdiv1
{max-width: 100%;
height: 360px;
background-color: rgba(0, 0, 0, 0.3);
text-align: left;
background-size: cover;
}
}

/* ---------------Copied from Tutorialspoint.com------------------*/
head2 {font-family: "cinzel decorative";
    color: white;
    animation-name: fadeInUp;
    animation-delay: 1s;
    animation-duration: 5s;
    transition-timing-function: ease-in;
    animation-fill-mode: both;} 

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}


/* ---------------Copied from Tutorialspoint.com------------------*/
h {font-family: "cinzel decorative";
color: black;
margin-left: 3%;
animation-name: fadeInUp;
animation-delay: 1s;
animation-duration: 5s;
    transition-timing-function: ease-in;
    animation-fill-mode: both;
} 

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

/* ---------------Copied from Tutorialspoint.com------------------*/
h2 {font-family: "cinzel decorative";
color: black;
margin-left: 9%;
animation-name: fadeInUp;
animation-delay: 1s;
animation-duration: 5s;
    transition-timing-function: ease-in;
    animation-fill-mode: both;
} 

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}


/* ---------------Copied from Tutorialspoint.com------------------*/
h3 {font-family: "cinzel decorative";
color: black;
margin-left: 8%;
animation-name: fadeInUp;
animation-delay: 1s;
animation-duration: 5s;
    transition-timing-function: ease-in;
    animation-fill-mode: both;
} 

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}


/* ---------------Copied from Tutorialspoint.com------------------*/
h4 {font-family: "cinzel decorative";
color: black;
text-align: center;
animation-name: fadeInUp;
animation-delay: 1s;
animation-duration: 5s;
transition-timing-function: ease-in;
animation-fill-mode: both;
text-decoration: none;
} 

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}


/* ---------------Copied from Tutorialspoint.com------------------*/
.printsheading {
font-family: "cinzel decorative";
color: black;
text-align: center;
padding-top: 4%;
animation-name: fadeInUp;
animation-delay: 1s;
animation-duration: 5s;
transition-timing-function: ease-in;
animation-fill-mode: both;
text-decoration: none;
} 

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}


/* ---------------Copied from Tutorialspoint.com------------------*/
h42 {
font-family: 'Nanum Myeongjo', serif;
font-weight: 600;
font-style: italic;
font-size: 30px;
padding: 4%;
color: #777777;
text-align: center;
animation-name: fadeInUp;
animation-delay: 1s;
animation-duration: 5s;
transition-timing-function: ease-in;
animation-fill-mode: both;
text-decoration: none;
} 

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------------NAVBAR----------------------------------------*/

/* ---------------HTML Template from Bootstrap v4.5------------------*/
/* ---------------Styling idea from w3schools.com------------------*/
.navbar {
position: fixed;
z-index: 10;}

/* ---------------HTML Template from Bootstrap v4.5------------------*/
/* ---------------Styling idea from w3schools.com------------------*/
.navbar-expand-lg {
width: 100%;
position: fixed;
background-color: white;}

/* ---------------HTML Template from Bootstrap v4.5------------------*/
/* ---------------Styling idea from w3schools.com------------------*/
.nav-link {
font-family: 'Nanum Myeongjo', serif;
font-weight: 800;
text-decoration: none;
font-size: 15px;
letter-spacing: 3px;}



/* -------------------------------------PARAGRAPHS & CONTENT----------------------------------------*/


.containerpersonal {
width: 100%;
padding: 4%;
padding-bottom: 20%;}


.personalphotos{
width: 100%;
height: auto;
padding: 1%;}


.peoplephotos{
width: 100%;
height: auto;
padding: 4%;}

/* ---------------HTML Template from Bootstrap v4.5------------------*/
.carousel-caption {
font-family: 'Nanum Myeongjo', serif;
font-weight: 800;
color: white;
font-size: 28px;
text-align: center;}



.compara {
font-family: 'Nanum Myeongjo', serif;
font-weight: 400;
color: #777777;
font-size: 20px;
text-align: center;
padding: 10%;}

@media only screen and (max-width: 450px){
.compara
{font-family: 'Nanum Myeongjo', serif;
font-weight: 400;
color: #777777;
font-size: 30px;
text-align: center;
padding-left: 10%;
padding-right: 10%;
background-position-y: top;
}
}

.container-animals{
padding-top: 1%;
padding-bottom:1%;}



#ouraimbg {
background-image: url("../imgs/bamboo2.jpg");
width: 100%;}
 

#ouraimphoto {
background-image: url("../imgs/bamboo2.jpg") no-repeat center;
background-size: cover;
height: 100%;
position: relative;
}

/* ---------------Copied from Code Institute Lessons------------------*/
#aboutusbtmphoto{
height: 500px;
width: 100%;
background: url("../imgs/rainforestandme.jpg") no-repeat center center;
overflow: hidden;
position: relative;
}


@media only screen and (max-width: 450px){
#aboutusbtmphoto
{height: 500px;
width: 100%;
background: url("../imgs/rainforestandme.jpg") no-repeat center center;
overflow: hidden;
position: relative;
background-size: cover;
}
}

/* ---------------Copied from Code Institute Lessons------------------*/
#cover-text{
font-family: 'Nanum Myeongjo', serif;
font-weight: 200;
font-size: 18px;
text-align: center;
background-color:  rgba(0, 0, 0, 0.6);
bottom: 10px;
left: 60px;
height: 320px;
width: 420px;
padding-top:60px;
padding-left: 12px; 
padding-right: 12px;
}

@media only screen and (max-width: 450px){
#cover-text
{font-family: 'Nanum Myeongjo', serif;
font-weight: 200;
font-size: 36px;
text-align: center;
background-color:  rgba(0, 0, 0, 0.5);
bottom: 10px;
left: 60px;
height: 520px;
width: 420px;
padding-top:60px;
padding-left: 12px; 
padding-right: 12px;
}
}

/* ---------------Copied from Code Institute Lessons------------------*/
#cover-text, #cover-text p{
color: white;
padding: 3%;
}

/* ---------------Copied from Code Institute Lessons------------------*/
#overlayaboutusp {
  position: absolute;
  bottom: 40%;
  right: 50%;
  left: 7%;
  top: 8%;
  height: 320px;
  width: 480px;
  padding: 3%;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;}


.row justify-content-center {
    padding-bottom: 40%;}

/* ---------------Copied from Tutorialspoint.com------------------*/
.text-block {
    font-family: 'Nanum Myeongjo', serif;
    font-weight: 600;
    color: black;
    padding: 4%;
    width: 80%;
   text-align: center;
   background-color: rgba(177, 247, 190, 0.932); 
   max-height: 80%;
   animation-name: fadeInUp;
   animation-delay: 1s;
   animation-duration: 5s;
   transition-timing-function: ease-in;
   animation-fill-mode: both;
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}


.containerparaaboutus {
  position: relative;
  font-family: 'Nanum Myeongjo', serif;
  font-weight: 200;
  font-size: 26px;
  text-align: center;
  padding: 4%;}



.aboutusp{
font-family: 'Nanum Myeongjo', serif;
font-weight: 200;
font-size: 18px;
color: #777777;
text-align: center;
padding-left: 15%;
padding-right:15%;
padding-top:10%;
padding-bottom: 4%;}


/* ---------------Copied from Code Institute Lessons------------------*/
.aboutsusbottomdiv {
  max-width: 100%;
  height: 400px;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0.3);}



.container-aboutus {
width: 55%;
padding: 2%;}


.col-sm-aboutus{
width: 65%;
padding: 2%;}


.commpara {
font-family: 'Nanum Myeongjo', serif;
font-weight:200;
font-size: 30px;
color: white;
text-align: center;
padding: 20%;
padding-top: 10%;}


.personalpara {
font-family: 'Nanum Myeongjo', serif;
font-weight: 400;
color: #777777;
text-align: center;}




/* -------------------------------------HOME PAGE PARAGRAPHS & CONTENT----------------------------------------*/


#homecols1 {
padding: 4%;
padding-top: 6%;}

#homecols2 {
padding: 4%;
padding-top: 6%;}

#homecols3 {
padding: 4%;
padding-top: 6%;}


div h4{
padding-top: 5%;}



div p {
font-family: 'Nanum Myeongjo', serif;
color: black;
font-size: 18px;
text-align: center;
width: 100%;
padding-top: 10px;}


 @media only screen and (max-width: 450px){
.welcome-para
{font-family: 'Nanum Myeongjo', serif;
color: black;
font-size: 18px;
text-align: center;
width: 92%;
vertical-align: top;
}
}


/*Home page Gallery Navigation */

.container-fluid {
width: 100%;}


.container-fluid p {
font-family: 'Nanum Myeongjo', serif;
font-size: 16px;
padding: 4%;
text-align: center;}


.container-fluid h4 {
padding-top: 10%;}
    

.col-sm{
width: 100%;
padding: 5%;
margin: 0;}

/* ---------------HTML copied from Bootstrap v4.5------------------*/
.carousel-item active{
height: 700px; }

/* ---------------HTML copied from Bootstrap v4.5------------------*/
.carousel-item {
height: 700px;}


.container-fluid-commercial {
padding: 10%;}


.text-block42{
padding-left: 15%;
padding-right: 15%;
padding-top: 5%;
padding-bottom: 5%;}


#printscols1 {
padding-top:3%;
padding: 4%;}

#printscols2 {
padding-top:3%;
padding: 4%;}

#printscols3 {
padding-top:5%;
padding: 4%;}

#printscols4 {
padding-top:3%;
padding: 4%;}



/* Animation for photos on home page*/

/* ---------------Copied from Hover.css and GitHub------------------*/

.hvr-float-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1.5px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-duration: 3s;
  transition-duration: 3s;
  -webkit-transition-property: transform;
  transition-property: transform;}


/* ---------------Copied from Hover.css and GitHub------------------*/
.hvr-float-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 15px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  /* W3C */
  -webkit-transition-duration: 3s;
  transition-duration: 3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
/* ---------------Copied from Hover.css and GitHub------------------*/
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {
  -webkit-transform: translateY(-15px);
  transform: translateY(-15px);
  
}
/* ---------------Copied from Hover.css and GitHub------------------*/
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {
  opacity: 1;
  -webkit-transform: translateY(15px);
  transform: translateY(15px);
  
}


.contact-text {
font-family: 'Nanum Myeongjo', serif;
font-weight: 700;
padding-top: 5%;
color: #777777;
}

/*Form for Contact Page*/

/* ---------------HTML copied from Bootstrap v4.5------------------*/

form  {
font-family: 'Nanum Myeongjo', serif;
font-weight: 600;
padding-top: 6%;
padding-bottom: 10%;
padding-left: 10%;
padding-right: 10%;
color: #777777;}


/* ---------------HTML copied from Bootstrap v4.5------------------*/
.form-row {
padding-top: 5%;
padding-bottom: 5%;}


/* ---------------HTML copied from Bootstrap v4.5------------------*/
btn-primary {
font-family: 'Nanum Myeongjo', serif;
font-weight: 600;
padding: 2%;}


/* Complete Gallery Page */
/* ---------------Copied from w3schools.com------------------*/
* {
  box-sizing: border-box;}

/* ---------------Copied from w3schools.com------------------*/
body {
  margin: 0;
  font-family: 'Nanum Myeongjo', serif;}

/* ---------------Copied from w3schools.com------------------*/
.header {
  text-align: center;
  padding: 32px;}

/* ---------------Copied from w3schools.com------------------*/
.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;}


/* ---------------Copied from w3schools.com------------------*/
.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;}

/* ---------------Copied from w3schools.com------------------*/
.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;}

/* ---------------Copied from w3schools.com------------------*/
/* Responsive layout */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}
/* ---------------Copied from w3schools.com------------------*/
/* Responsive layout */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}


#p-1 {
font-family: 'Nanum Myeongjo', serif;
font-size: 18px;
color: #777777;
text-align: center;}


#p-2 {
font-family: 'Nanum Myeongjo', serif;
font-size: 18px;
color: #777777;
text-align: center;}

#p-3 {
font-family: 'Nanum Myeongjo', serif;
font-size: 18px;
color: #777777;
text-align: center;}

#p-4 {
font-family: 'Nanum Myeongjo', serif;
font-size: 18px;
color: #777777;
text-align: center;}

.printsp {
font-family: 'Nanum Myeongjo', serif;
font-size: 16px;
color: #777777;
text-align: center;}



/*-------------------------------------FOOTER--------------------------------------*/

/* ---------------Copied from Code Institute Lessons------------------*/
#footer a {
color: white;
font-family: 'Nanum Myeongjo', serif;
font-size: 18px;
text-decoration: none;}


/* ---------------Copied from Code Institute Lessons------------------*/
.container-fluid a{
color: #777777;
font-family: "cinzel decorative";
font-size: 32px;
text-decoration: none;}


/* ---------------Copied from Code Institute Lessons------------------*/
#footer {
        background-image: url("../imgs/cornwall.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        max-width: 100%;
        height: auto;
        overflow: hidden;
        margin: 0;}
       
/* ---------------Copied from Code Institute Lessons------------------*/
.col-sm{
max-width: 100%;
height: auto;
color: #fafafa;
margin: 2px;
text-align: center;
padding: 0;}



#footer h5 {
font-family: cinzel;
font-size: 28px;
padding-top: 20px;}

/* ---------------Copied from Code Institute Lessons------------------*/
#footer p {
font-family: 'Nanum Myeongjo', serif;
font-size: 18px;
color: white;
text-align: center;
text-decoration: none;}


/* ---------------Copied from Code Institute Lessons------------------*/
#footer div {
color: #fafafa;
background-color: rgba(0, 0, 0, 0.24);
text-decoration: none;}



/*----------------------------------------------SOCIAL MEDIA FOOTER--------------------------------------*/
/* ---------------Copied from Code Institute Lessons------------------*/
.social-networks {
text-align: center;}


/* ---------------Copied from Code Institute Lessons------------------*/
.social-networks li {
display: inline;}


/* ---------------Copied from Code Institute Lessons------------------*/
.social-networks i {
font-size: 120%;
margin: 1%;
padding: 3%;
color: #777777;}