/*
This file belongs to P1922897,Teh Huan Xi Kester
The copying of code is strictly prohibited unless authorized.
*/
/* Reset */
article, aside, figcaption, figure, footer, header, Main, nav, section { display: block;}

address, article, aside, blockquote, body, cite, div, dl, dt, dd, em,
figcaption, figure, footer,h1,h2,h3,h4,h5,h6,header,html,img,li,main,nav,ol,p,section,span,ul {
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
nav ul {
   list-style: none;
   list-style-image: none;
}
nav a {
   text-decoration: none;
}
/* End of reset */

/* Fonts and backgrounds */
html {
   background-image: url(images/subtle_white_feathers_@2X.png);  
}
body {
   background-color: transparent;
}
h1 {
   display: block;
   text-decoration: underline;
   font-weight: bold;
   text-align: center; display: block;
   font-size: 280%;
   font-family: 'Nova Cut', cursive;
   margin-top: 5%;
   margin-bottom: 5%;
}
#content p {
   margin-left: 20%;
   margin-right: 20%;
   display: block;
   text-align: center;
   font-size: 180%;
   font-family: 'Raleway', sans-serif;
}

#link {
   text-decoration: underline;
   font-family: 'Nova Cut', cursive;
   font-size: 180%;
   font-weight: bold;
}

/* Clock */
.row #date {
   margin-top: 7%;
}

/* Nav Bar and Slider */
#navigationbar a {
   font-family: 'Nova Cut', cursive;
   font-weight: bold;
   font-size: 135%;
   display: block;
   text-decoration: none;
   color: black;
}
#navigationbar a,
#navigationbar a:after,
#navigationbar a:before {
   transition: all .5s;
}
#navigationbar a:hover,
#hreftext a:hover {
   color: orange;
}
#hreftext a {
   text-decoration: underline;
   color: white;
}
#navigationbar a{
   position: relative;
}
#navigationbar a:after {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
   width: 0%;
   content: '.';
   color: transparent;
   background:black;
   height: 10%;
}
#navigationbar a:hover:after {
   width: 100%;
}

/* Slideshow CSS */

#image{
   width: 100%;
   height: 500px;
}
#slider{
   width: auto;
   height: auto;
   position: relative;
}


/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: #f2f2f2;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
   background-color: rgba(0,0,0,0.8);
 }
.fa-chevron-right, .fa-chevron-left{
   color:white;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* Position the "prev button" to the left */
.prev {
   left: 0;
   border-radius: 3px 0 0 3px;
   }

/* Caption text */
.slideshow-container{
   position: relative;
}
#slider {
   opacity:1;
   transition: opacity 1s; 
}

#slider.fadeOut {
   opacity:0;
}



#text {
   position: absolute;
   font-family: 'Raleway', sans-serif;
   margin-left: 10%;
   bottom: 53%;
   color: white;
   font-weight: bold;
   font-size: 140%;
}
#hreftext {
   position: absolute;
   font-family: 'Raleway', sans-serif;
   text-decoration: underline;
   margin-left: 10%;
   bottom: 50%;
   color: black;
   font-weight: bold;
   font-size: 140%;
 }
 @media only screen and (max-width: 992px) {
   #text {
      position: absolute;
      font-family: 'Raleway', sans-serif;
      margin-left: 10%;
      bottom: 39%;
      color: white;
      font-weight: bold;
      font-size: 140%;
   }
   #hreftext {
      position: absolute;
      font-family: 'Raleway', sans-serif;
      text-decoration: underline;
      margin-left: 10%;
      bottom: 36%;
      color: black;
      font-weight: bold;
      font-size: 140%;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1170px){
   #text {
      position: absolute;
      font-family: 'Raleway', sans-serif;
      margin-left: 10%;
      bottom: 50%;
      color: white;
      font-weight: bold;
      font-size: 140%;
   }
   #hreftext {
      position: absolute;
      font-family: 'Raleway', sans-serif;
      text-decoration: underline;
      margin-left: 10%;
      bottom: 47%;
      color: black;
      font-weight: bold;
      font-size: 140%;
    }  
}
/* Number text (1/3 etc) */
.numbertext {
   color: white;
   background-color: black;
   padding: 8px 12px;
   position: absolute;
   top: 0;
   font-family: 'Raleway', sans-serif;
   font-weight: bold;
   font-size: 100%;
}
 
/* The dots/bullets/indicators */
.dot {
   cursor: pointer;
   height: 15px;
   width: 15px;
   margin: 0 2px;
   background-color: #bbb;
   border-radius: 50%;
   display: inline-block;
   transition: background-color 0.6s ease;
 }
 .active, .dot:hover {
   background-color: #717171;
 }

 /* Produces the translucent effect for the captions in carousel.*/
.drk:after {
   content:"";
   display:block;
   position:absolute;
   top:70%;
   bottom:0;
   left:0;
   right:0;
   background: black;
   opacity:0.55;
   height: 29%;
}


/* Link Animation(Inclusive of footer) */
.PageLink a:link, .PageLink a:visited,
footer a:link, footer a:visited,
#link:link, #link:visited {
   color: black;
}

.PageLink a:hover, .PageLink a:active,
#link:hover, #link:active {
   color:orange;
}

/* Picture Sizing */
.row #PictureNav img {
   height: 26%;
   width: 26%;
}
.ProfilePic img{
   margin-top: 6%;
   margin-bottom: 1%;
}

/* Social Media CSS */
.instagram-media{margin:0 auto !important;}

/* Footer Styles */
footer {
   position:fixed;
   bottom: 0;
   width: 100%;
   font-size: 110%;
   background-color: orange;
   color: white;
   display: block;
   text-align: center;
   font-family: 'Raleway', sans-serif;
 }
footer a:hover, footer a:active{
   color:white;
}