*{
   border: 0;
   margin:0;
   padding:0;
}

.container{
   width:100%;
   padding-top: 2%;
}


 nav.NavigationBar a:link ,nav.NavigationBar a:visited {
    color:#000000;
    background-color: transparent;

}
/* determines the color and behaviour of the navigation bar links */


.bio,.bio2{

   width:294px;
   padding-left:37%;
margin-top:20px;
text-align: center;
 
 
}
/* adjustment of the images showing photographers faces */
nav.NavigationBar {
  

height:1.5em;
  
padding-bottom: 40px;
clear: left;
overflow: hidden;
border: 1px solid #000000;
padding-left: 230px;
background-color: #ccc
}
/* adjustment to the position,size and color of the navigation Bar */
nav.NavigationBar p{
   display: inline;
   padding:100px 2em;
   Font-size:1.7em;
   font-family: 'Pacifico', cursive;
 }
 /* adjustment and designing of text containing p tags */
 .home{
    font-family: 'Ranga', cursive!important; 
    font-size: 2.2em!important;
}
/* Adjustment of the logos font aand size */
 .NavigationBar p a:link{
    color:#000000;
    background-color: transparent;
    text-decoration: none;

} 
/* behaviour of the  Navigation link as it is*/
.NavigationBar p a:visited{

background-color: transparent;
text-decoration: none;
/* behaviour of the Navigation Link after it has been visited  */
}

.NavigationBar p a:hover{

background-color: transparent;
text-decoration: none;
opacity:0.5;
}/* behaviour of the Navigation Link when it is hovered above */

.NavigationBar p a:active {

background-color: transparent;
text-decoration:none;
} 
@keyframes slider{
   0%{
       left:0;
   }
   20%{
       left: 0;
   }
   25%{
       left:-100%;
   }
   45%{
       left:-100%;
   }
50%{
   left:-200%;

}
70%{
   left:-200%;
}
75%{
   left:-300%;
}
95%{
   left:-300%;
}
100%{
   
}
}
/* Determines how the percentage by which the images move */
#slider {
   overflow:hidden;
   max-height: 480px;

   width:60%;
   margin:0 auto;
   padding-top: 2%;
/* Adjustment of the container that contains the Slideshow */
   }
   #slider figure img{
       width:20%;
       float:left;
      background-size: cover;
      /* adjustment of the size of the image */
    }
    #slider figure{
        position: relative;
        width:500%;
        margin: 0;
        left: 0;
        text-align: left;
        font-size: 0;
        animation: 20s slider infinite;
        /* Determines how long each image will last before it is replaced by another */
    }
   h1,h2{
    font-family: 'Dancing Script', cursive;
    font-size:60px;
    text-align: center;
    padding-top: 20px;
   }
   /* Adjustment of the font-size and position */


.PhotographerInfo {
  max-width: 90%;
   height:220px;

  overflow: hidden;
   margin: 0 auto;
  padding-right:250px;
}
/* Determines the Size of the Photographer Infos Container */

.PhotographerInfo p {
   width:70%;

font-size:1.7em;
line-height:1.4em;
padding-left: 30%;
margin: 0 auto; 
font-family: 'Karla', sans-serif;
}
/* Determines the font type and size and also the positioning of the text */


 .FriendlyNote p{
     font-family:  'Pacifico', cursive;
     font-size: 30px;
     font-weight: bolder;
     border: 2px solid #000000;
     text-align: center;
/* Determines the font-type and font-size of the text */
 }
.FriendlyNote{
    width:560px;
    padding-top:40px;
    padding-left: 40px;
}
/* Adjustment of the container size and it's positioning */
.ContactUs{
    float:right;
    margin-right: 120px;
    font-family: 'Pacifico', cursive;
  }
  /* Determines the Positioning and font-type of the container */

.ContactUs p,.ContactUs h1,.ContactUs h2{
    line-height: 2.2em;
    font-size:1.5em;
}
/* Determins the size of the font and distance between each line */
.ContactUs  a:link{
     color:#000000 ;
    /* background-color: transparent; */
    text-decoration: none;

} 
.ContactUs a:visited{
    color: #000000;
background-color: transparent;
text-decoration: none;
}
.ContactUs a:hover{

background-color: transparent;
text-decoration: none;
opacity:0.5;
}
.ContactUs a:active {

background-color: transparent;
text-decoration:none;
} 


article.contactus {
    padding-top: 20px;
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 30px;
}
.contactinfo {
    font-size: 18px;
}
div.form {
    max-width: 600px;
    margin: 0;
    font-size: 18px;
}

div.form p {
    text-align: left;
    padding-left: 40px;
}

#name {
    width: 400px;
    height: 1.5em;
}
#email {
    width: 400px;
    height: 1.5em;
}
#contact {
    width: 400px;
    height: 1.5em;
}
#subject {
    width: 400px;
    height: 1.5em;
}
#message {
    width: 400px;
    height: 5em;
}
#message-placeholder {
    text-align: center;
}

input {
    border: 1px solid #aaa;
    border-radius: 4px;
}


footer{
 clear: both;
    position: relative;
    left: 0;
    bottom: 0;
    width: 60%;
    color:rgb(14, 13, 13);
/* Determines the positioing of the footer and color */
    text-align: right;
    height: 10%;
padding-left:30%;
padding-top:10px;


}
.fa {
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}

.fa:hover {
  opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color:#FFFFFF;
border-radius: 60px;
box-shadow: 0px 0px 2px #888;
padding: 0.5em 0.6em;

}
.fa-instagram {
background: #125688;
color: #FFFFFF;
 display: inline-block;
 border-radius: 60px;
box-shadow: 0px 0px 2px #888;
padding: 0.5em 0.6em;
}

#groupphoto {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    margin-top: 20px;
    padding-right: 290px;
}
/* Determines the positioning and size of the container that contains the group photo */
  
.middle  {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
  }
  /* Determines the position of the words embedded in the image */
  
#groupphoto:hover .image {
    opacity: 0.3;
  }
  /* Determines the opacity of the image when hovered */
  
  #groupphoto:hover .middle {
    opacity: 1;
  }
  /* Determines the Opacity of the text embedded in the Image when hovered */
  
  .text {
    color:#4b0082;
    font-family: 'Satisfy', cursive;
    font-size: 40px;
    padding: 16px 32px;
  }
  /* Color of the test ,it's size and font-family */

.Ourvision h1{
   text-align: center;
   padding-top:50px;
   font-family: 'Satisfy', cursive;
   /* Adjusting the position of the text and font-family  */

}
.Ourvision p {
width: 720px;
font-size: 25px;
margin-left:350px;
padding-top:12px;
border-radius:10px;
margin-top:20px;
height:200px;
font-family: 'Ranga', cursive;
font-size: 35px;
}
/* Adjusting the position of the text,its size and font-family */
.brand{
    
    width: 20%;
    height:auto;
}
/* Adjusting the image of the brands */
.brand2{
    width: 20%;
    height:auto;
    padding-top:30px;
}
.brand3{
    width: 20%;
    height:auto; 
}
.Brands{
text-align: center;
padding-top: 120px;
}
/* Adjust the position of the container that contains the Brands */
.Brands h2{
    margin-top:40px;
   font-family: 'Satisfy', cursive;
}
.Awards{
    text-align: center;
}
.Awards h1{
    font-family: 'Satisfy', cursive;
}
.Awards p{
 font-size: 25px;
 font-family: 'Dosis', sans-serif;
 color:#DAA520;
}
body{
    background: url("pexels-photo-1050308.jpeg"); 
   background-size:cover;
}
/* Determines the background image and its size of coverge over the webpage */
.Headerlayout{
 margin-top:30px;
  text-align: center;
 

}
#HeaderLayout{
    text-align: center;
    font-size:3em;
    font-family: 'Kaushan Script', cursive;
 
}
#r1c2, #r2c2, #r3c2{
    margin-left:30px;
    margin-right: 30px;
     
}


.row1,.row2{
     margin-left: 100px; 
 /* Determines the positioning of each image */

}

div.gallery {
    margin: 10px;
    border: 1px solid #ccc;
float: left;
    width: 360px;
   
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;

}

div.desc {
    padding: 15px;
    text-align: center;
    background-color: #125688;
  
}

.Panel1{
   text-align: center;
   margin-top:120px;

}
.Panel1 figcaption{
      transform: translate(-20px,-210px);
      font-family: 'Arapey', serif;
      font-size:4em;
      color:#000000;
} 
.Panel1 a:link{
        color:#000000;
        background-color: transparent;
        text-decoration: none;
    
} 
.Panel1 a:visited{
    
    background-color: transparent;
    text-decoration: none;
}
.Panel1 a:hover{
   
    background-color: transparent;
    text-decoration: none;
    opacity:0.5;
}
.Panel1 a:active {
   
    background-color: transparent;
    text-decoration:none;
}