@import url('https://fonts.googleapis.com/css?family=Cabin');

.Graphic img{
	width:100%;
    max-width: 1000px;
    height: auto;
    display:block;
    margin:auto;
}/*Makes graphics large but the max-width stops from being over 1000px*/

li {
  float: left;
  width: 25%;
}
/*Makes nav bar left-right*/
ul {
  list-style: none;
  background: Crimson;
  font-family: 'Cabin', sans-serif;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
/*Initial design for nav bar*/
li a {
  font-family: 'Cabin', sans-serif;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background: black;
  color: white;
}/*Changes colour when nav bar hovered*/


.About_Katrina {
	color: black;
	background: white;
	float:left;
	font-family: 'Cabin', sans-serif;
	list-style-position: inside;
	width:100%;
}
/*Ensures the list within the About Katrina page fits the aesthetic and the width of the list fits the 60% column*/

img.Graphic {
  display: block;
   margin-left: auto;
   margin-right: auto;
}/*Centers Graphics*/

footer {	
  background: Crimson;
  font-family: 'Cabin', sans-serif;
  color: white;
  text-align: center;

}
/*ensures footer colors fit with the rest of the pages theme*/
.column {
  font-family: 'Cabin', sans-serif;
  float: left;
  width: 25%;
}
/*column width for text on index page, 4 columns at 25% each*/


.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Clear floats after the columns */

div.ws_images {
  width: 40%;
  display: block;
  margin: auto;
}/*Wow slider image sizes*/

iframe{
	width:95%;
}/*ensures some space beside iframe*/
.column2 {
	font-family: 'Cabin', sans-serif;
	font-size:large;
    float: left;
    width: 45%;
    margin:2.5%;

}/*these columns take up 50% of the page each*/

.column2 img {
	width:95%;
}


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

/* Clear floats after the columns */
.column3 {
	font-family: 'Cabin', sans-serif;
	font-size:large;
    float: left;
}/*Uneven column fonts and float*/
 
.column3 img {
	display:block;
	margin: auto;
	max-width:300px;
	
}/* Ensuring image doesnt scale higher than 300px and are centered within the column*/

.column4 {
    float: left;
    width: 18%;
    margin:2% 7.2% 2% 7.2%;
}/*Pictorial hyperlinks scaling and margins, all are liquid scaling with percentage scale*/

.column4 img{
	display:block;
	width:100%;
	max-width:200px;
}/*Hyperlinks dont scale above 200px and have liquid scaling */

.column4 img:hover{
	opacity: 0.5;
}/*Hover effects for pictorial hyperlinks, the opacity changes to 0.5 when the cursor hovers them*/

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

 
 
.left{
	width: 55%;
	margin: 2.5%;
}/*class for Uneven left column of the About Katrina page, takes up 60% width of page*/

.right{
	width: 35%;
	margin: 2.5%;
}/*class for Uneven right column of the About Katrina page, takes up 40% width of page*/

.highlight {
	color: crimson;
	font-weight:bold;
		}/*Font colour changes to crimson and size changes to bold for pricing*/

.ws_images img{
	width:40%;
}

@media screen and (max-width: 600px) {
    .column {
        width: 100%;
    }
   	.column2 {
        width: 100%;
    }
    .column3 {
        width: 100%;


} /*Columns scale to the full width of a phone screen*/