/* Custom Stylesheet */
	/**
 * Use this file to override Materialize files so you can update
 * the core Materialize files in the future
 *
 * Made By MaterializeCSS.com
 */


/*-----HEADER------*/

	header {
		background-color: #4E76C4;
	}

/*-----TEXT TAGS------*/
	
	h1 {
		color: black;
		
	}
	
	p {
		font-size: 15px;
	}



	h1 {
		font-size: 50px;
		text-align: center;
		font-family: helvetica;
		color: black;
		margin-top: 230px;
	}
	
	h5 {
		font-size: 20px;
		text-align: center;
		font-family: roboto;
		color: black;
		padding: 20px;
	}


	h3 {
		text-align: center;
		font-family: roboto;
		color: black;
		padding: 20px;
	}



	h6 {
		text-align: center;
		font-family: roboto;
		color: black;
		padding: 20px;
	}


/*-----BUTTON------*/

	
	button {
		background-color: beige;
		width: 20%;
		padding: 5px;
		text-align: center;
	}


/*-----FIXED------*/
	
	#fixed {
		width: 100%;
		position: fixed;
		z-index: 1000;
		top: 0;
		marign-right: 50px;
	}
	
/*-----VIDEO------*/
	
	video {
		width: 150%;
		height: auto;
		margin-left: -15px;
		max-height: 110%;
		max-width: 110%;
	}


   .web {
		/*background-color: #4E76C4 !important;*/
		height: 100px;
		width: 100%;
		margin-top: 180px;
		text-align: center;
		font-family: roboto;
		color: black;
	}

   .videos{
	    height: 100px;
		width: 100%;
		margin-top: 180px;
		text-align: center;
		font-family: roboto;
		color: black;
	
}


   .column {
		line-height: 30px;
		text-align: center;
	}

  .column{
	padding: 8px;
	
}
	
   .row1 {
		bottom: 20px;
	}




	/*-------------SECTIONS-----------*/
	
   .section1 {
		/*background-color: #4E76C4 !important;*/
		height: 80px;
		width: 100%;
		margin-top: 230px;
		text-align: center;
		font-family: roboto;
		color: black;
	}
	
   .section2 {
		/*background-color: #4E76C4 !important;*/
		height: 80px;
		width: 100%;
		margin-top: 180px;
		text-align: center;
		font-family: roboto;
		color: black;
	}
	
  .sectionTwo {
		margin-top: 30px;
	}
	

  .sectionThree {
		margin-top: 20px;
	}
	
  .sectionThree2 {
		margin-top: 50px;
	}

    .section {
		margin-top: -100px;
	}
	
	
    .section4 {
		/*background-color: #4E76C4 !important;*/
		height: 80px;
		width: 100%;
		margin-top: 50px;
		text-align: center;
		font-family: roboto;
		color: black;
	}
	
    .section5 {
		/*background-color: #4E76C4 !important;*/
		height: 80px;
		width: 100%;
		margin-top: 20px;
		text-align: center;
		font-family: roboto;
		color: black;
	}


.section03 {
		margin-right: 1%;
	}






	/*-------------ABOUT ME SECTION----------- */

    .image {
		/*margin-left: -1000px;*/
		margin-top: 10px;
		max-width: 100%;
		padding-bottom: 20px;
	}
	
    .meText {
		text-align: left, justify;
		line-height: 30px;
		margin-left: -1px;

	}




	
	
	/*---------MY SKILLS SECTION--------*/
	
	.design {
		text-align: left,justify;
		max-width: 100%;
		padding-left: 10px;
		line-height: 30px;
	}
	
	.motion {
		text-align: left,justify;
		max-width: 100%;
		padding-left: 10px;
		line-height: 30px;
		
	}
	
	.photo {
		text-align: left, justify;
		max-width: 100%;
		padding-left: 15px;
		line-height: 30px;
		
	}
	
	.video {
		text-align: left, justify;
		max-width: 100%;
		padding-left: 10px;
		line-height: 30px;

	}
	
	.sound {
		text-align: left, justify;
		max-width: 100%;
		padding-left: 10px;
		line-height: 30px;
	}
	

	
	.paint {
		text-align: left, justify;
		max-width: 100%;
		left: 10px;
		line-height: 30px;
	}







/*--------------------WEB DESIGN-----------------*/


/* COUNTRY STAR TOURS TOUCHSCREEN APPLICATION*/

	
	
	.countryText {
		text-align: left, justify;
		max-width: 100%;
		line-height: 30px;
	}


	.touchscreen {
		margin-top: 12rem;
		width: 100%;
		text-align: center;
	}

    


/* THE FOX AND THE CROW APPLICATION*/
	
	.gesture {
		text-align: left, justify;
		max-width: 100%;
		line-height: 30px;
	}


/* RESTAURANT PHONE APPLICATION*/
	
	.resText {
		text-align: center;
		max-width: 100%;
		line-height: 30px;
	}
	
	.restaurantphoto {
		margin-left: 10px;
		max-width: 100%;
	}


	
/* THE HISTORY OF HOLIDAYS SCROLLING SITE */
	
	.scrollText {
		text-align: left, justify;
		max-width: 100%;
		padding-left: 10px;
		line-height: 30px;
	}
	
	.scrollphoto {
		margin-left: -15px, -10px;
		width: 130%;
		height: auto;
		max-height: 110%;
		max-width: 110%;
	}




/* COBOURG MUSEUM PROJECT*/
	
	.cobourgText {
		text-align: left, justify;
		max-width: 100%;
		line-height: 30px;
	}
	
	.cobphoto {
		margin-left: 5px;
		margin-top: 15px;
		max-width: 110%;
	}




/* MULTI SCREEN VIDEO PROJECT*/
	
	.multiText {
		text-align: left, justify;
		max-width: 100%;
		line-height: 30px;
	}



	




/*--------------------VIDEOS-----------------*/

/* Demo REEL VIDEO*/
	
	.demoText {
		text-align: left, justify;
		max-width: 100%;
		line-height: 30px;
	
	}



/*SUPERHERO MOVIE TRAILER VIDEO*/
	
	.trailerText {
		text-align: left, justify;
		max-width: 100%;
		line-height: 30px;
	}



/*ACADEMIE PROVIDENCE VIDEO*/
	
	.academiText {
		text-align: left, justify;
		max-width: 100%;
		line-height: 30px;

	}


/* COTTAGE COUNTRY INFOGRAPHIC*/
	
	.infoText {
		text-align: left, justify;
		max-width: 100%;
		line-height: 30px;
	}



/*MY GHOSTLY BEST FRIEND VIDEO*/
	
	.GhostText {
		text-align: left,justify;
		max-width: 100%;
		line-height: 30px;

	}


/*A WALK IN THE PAEK VIDEO*/
	
	.WalktText {
		text-align: left,justify;
		max-width: 100%;
		line-height: 30px;

	}

/*SOCIAL AND EMOTIONAL WELL-BEING VIDEO*/
	
	.socialText {
		text-align: left,justify;
		max-width: 100%;
		line-height: 30px;

	}



/*SINCE YOU'VE COME ALONG VIDEO*/
	
	.friendText {
		text-align: left,justify;
		max-width: 100%;
		line-height: 30px;

	}






/* ----------MY PHOTOGRAPHY--------*/

.photography{
	margin-top: 180px; 
}

.photographyText{
	margin-top: -40px;
	font-size: 100px;
	
}


/*PHOTOGRAPHY SLIDESHOW*/

/* Position the image container (needed to position the left and right arrows) */
.Photocontainer {
position: relative;
top: 20px;

}

/* Hide the images by default */
.mySlides {
 display: none;
text-align: center;
padding: 10px;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}


/* Number text (1/3 etc) */
.numbertext {
  color: black;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  top: -29px;
  left: 60px;
}


.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.columnThree {
  float: left;
  width: 16.66%;
  padding-bottom: 10px;
}


/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}


/* ----------MY GRAPHIC DESIGN--------*/

.Illustratortext{
   font-size: 13px;
   padding-top: 5px;
   
    
}

.Zeentext{
	margin-top: -40px;
	font-size: 100px;
	
}

/*ARROWS*/

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 20%;
  width: auto;
  padding: 90px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 35px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

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

.button1{
    font-size:20px;
    color: aqua;
}







/* Hide the images by default */
.mySlides {
 display: none;
text-align: center;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}


/* Number text (1/3 etc) */
.numbertext {
  color: black;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  top: -29px;
  left: 60px;
}


.row:after {
  content: "";
  display: table;
  clear: both;
    }


/* Six columns side by side */
.columnTwo {
 float: left;
  width: 16.66%;
 padding-bottom: 10px;
}


/* Six columns side by side */
.columnThree {
  float: left;
  width: 16.66%;
  padding-bottom: 10px;
}








/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}


/*------- FOOTER--------*/
	
	footer {
		background-color: #4E76C4;
		margin-bottom: -500px;
		height: auto;
	}



	

	/*------LINKS-------*/
	p a:link,
	p a:visited {
		color: black;
		font-size: 15px;	
	}
	
	
	a:focus,
	a:hover {
		color: black;
		text-decoration: none;
	}
	
	p a:hover,
	p a:focus,
	p a:active {
	color: white;
	}