/* Style Sheet */
/* Here is the link(s) for importing my google fonts */
@import url('https://fonts.googleapis.com/css?family=Hind+Vadodara:700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Cabin&family=Hanuman:wght@700&family=Rubik+Mono+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@900&display=swap');

body {
	font-family: helvetica, arial, sans-serif;
	margin: 0;
}


/*SLIDESHOW CSS - interchanging images*/
#slideshow {
  position: relative;
	width: 900px;
	height: 450px;
}

#slideshow div{
  position: absolute;
}

.scroll-area{
	position: absolute;
	height:100%;
	
}


.img{
	border-radius: 5%;
	box-shadow: 5px 5px 5px black;
} 

/*CODE FOR TEXT - styling for the text of my website*/

h1{ 
	color: #b32400;
	font-family: 'Raleway';
	font-size: 24px;

	/*padding-left: 10px;/
	letter-spacing: 0.2em
	text-shadow: 2px 2px 2px grey;*/
	/*text-shadow: 2px 2px 2px black;*/
}

h2{
	font-style: italic;
	color: #3333cc;
	font-size: 22px;
	font-family: Archivo Black;
}

p{
	font-family: Cabin;
	color: #ffffff;
	font-size: 16px;
	/*line-height: 1.5em --> this is the space between line text*/
}

/*SPAN CLASSES - seperate colours for text*/

.blue{
  color: #002db3;
}

.purple{
  color:#b300b3;
}

.green{
  color:#00ff00;
}

/*CONTAINER CODE*/

.container{
height:900px;
width: 100%;
position: absolute;
background-color: red;
}

/*.header{
height:200px;
width: 100%;
position: absolute;
}*/


/*  CSS for the style of my navigation */
.nav{
	box-sizing: border-box;
	background-color: #ffffff;
	opacity: 0.2;
	margin-top: none;
}



/* all unordered lists */
ul {
  display: inline;
  padding: 15px 0px 0px 0px;
  list-style: none;
}
ul li {
  font-family: Arial;
  font-size: 16px;
  color: #000000;
  font-weight: bold; 
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px 17px; /* padding for main block menu buttons */
}

li{
  color: #000000;
}


ul li:hover {
  background: #9999ff;
 }
  
/* Hover Colours*/
a:link {color:#000000;} /* unvisited link */
a:visited {color:#660066;} /* visited link */
a:hover {color:#1c1a54;} /* mouse over link */
a:active {color:#ff1a1a;}  /* selected link */

a {
text-decoration: none;
}

ul li ul {
  padding: 0;
  position: absolute;
  top: 48px; /* space between each drop-down menu list */
  left: 0;
  width: 175px; /* width of drop-down menu list */
  display: none;
  visibility: hidden; /* this hides the drop-down menu list */
  z-index: 1; /* for overlapping divs, bringing to the front like a drop down menu */
}

ul li ul li { 
  background: #85b7ec; /* this is the drop-down menu background color */
  display: block; 
}
ul li ul li:hover { background: #85b7ec;} /* this is the drop-down menu hover on blocks */

ul li:hover ul {
  display: block;
  visibility: visible; /* this makes the drop-down menu visable*/
}
/* Style for Navigation ends here*/
/*

/*CODE FOR THE CONTENT (BODY) OF MY SITE*/
.content{
	box-sizing: border-box;
	background-color: #000000;
	position: absolute;
	padding-right: 10px;
	width: 100%;
	height: 2400px;
	
}

/*HR CODE*/

hr{
  border-top: 1px dotted black;
  width: 100%;
}

/*CODE FOR THE WRAPS (spacing text from side of the site for better accessability*/

.wrap{
  padding-left: 10px;
}

.wrap2{
  padding-right: 10px;
  padding-left: 10px;
}


/*CODE FOR THE FIRST DIV SECTION AND EVERYTHING INSIDE*/
.section1{ height:250px; width:96%; background-color: #1a1a1a; position: relative; padding:20px; padding-bottom: 7px;}
.image1{ height:235px; width:310px; background-color: #fbfbfb; margin-left:0px; }
.textbox1{ height:235px; width:68%; background-color: #1a1a1a; margin-top:-260px; margin-left:350px; margin-bottom: 430px; }

/*CODE FOR THE SECOND DIV SECTION AND EVERYTHING INSIDE*/

.section2{
    height: 250px;
    background-color: #1a1a1a;
    width: 96%;
    margin-top:40px;
    position:relative; 
    padding:20px;
    padding-bottom: 7px;
}

.image2{ height:235px; width:310px; background-color: #1a1a1a; margin-left:0px; }
.textbox2{ height:235px; width:68%; background-color: #1a1a1a; margin-top:-260px; margin-left:350px; margin-bottom: 430px; }

/*CODE FOR THE SECOND DIV SECTION AND EVERYTHING INSIDE*/

.section3{
    height: 250px;
    background-color: #1a1a1a;
    width: 96%;
    margin-top:40px;
    position:relative; 
    padding:20px;
    padding-bottom: 7px;
}

.image3{ height:235px; width:310px; background-color: #fbfbfb; margin-left:0px; }
.textbox3{ height:235px; width:68%; background-color: #1a1a1a; margin-top:-260px; margin-left:350px; margin-bottom: 430px; }

.img1 {
  margin-left: 13%
}

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* 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);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* 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;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}



/*FOOTER CODE*/

.footer{
	background-color: #0d0d0d;
	grid-column-end: span 2;
	width: 100%;
	height: 50px;
	position: absolute;
	margin-top: 0px;
}