/* nvstylesheet.css */

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

/* Style rule for the body element */
body
{
	background-color: #FFFFFF;
	font-family: "Raleway", Helvetica Neue, Sans-Serif;
	font-size: 16px;
	font-weight: 300;
	color: #000000;
	margin: 0 auto;
}


/* Make HTML5 layout elements block elements for older browsers */
header, nav, aside, article, footer, section, figure, figcaption {
	display: block;
}

/* Get rid of white border around browser window */
body {
	margin: 0;
	padding: 0;
}

/* Get rid of large margins on headings */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

#wrapper {
  /* Set your own widths, % for fluid, px for fixed */
  width: 100%;
  min-width: 780px;
  max-width: 2560px; 
  /* Center the layout */
  margin: 0 auto;
}

/*============ Style for responsive nav section */

/* Remove margins and padding from the list, and add a white background color */

ul.nav {
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #fff;
  box-sizing: border-box;
  /* Box sizing for older browsers */ 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box;	
}

/* Each list item inside horizontal menu bar */

ul.nav li {float: left;
	width: 14.2857143%;
	
}

/* Style the links inside the list items */
ul.nav li a {
  font-family: "Raleway", Helvetica Neue, Sans-Serif;
  font-size: 21px; 
  display: inline-block;
  text-align: center;
  text-decoration: none;
  outline: none;
  padding: 15px 0 15px 0;
  display: block;
}


/* Unvisited and visited link styling */
ul.nav li a:link {color: #CDCDCD;}
ul.nav li a:visited {color: #CDCDCD;}

/* Styling for hover and active links */
ul.nav li a:hover {color: #443E4C;}
ul.nav li a:active {color: #443E4C;}
ul.nav li a.currentpage {color: #443E4C;}

/* Hide the list item that contains the link that should open and close the nav on small screens */
ul.nav li.icon {display: none;}

/* /When the screen is less than 780 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the nav (li.icon) */
@media screen and (max-width:780px) {
  ul.nav li:not(:first-child) {display: none;}
  ul.nav li.icon {
    float: right;
    display: inline-block;
  }
}

/* The "responsive" class is added to the nav with JavaScript when the user clicks on the icon. This class makes the nav look good on small screens */
@media screen and (max-width:780px) {
  ul.nav.responsive {position: relative;}
  ul.nav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.nav.responsive li {
    float: none;
    display: inline;
  }
  ul.nav.responsive li a {
    display: block;
    text-align: left;
  }
}



/*==================== Styling for the article section */

/*=========== Links and link states in the article section */

a:link, a:visited {
	color:#A098AC;
	text-decoration: none;
}
 
a:hover, a:active {
	color:#443E4C;
	text-decoration: none;
}


/* Sample styles for 3-column layout */
/* Section containing multiple columns */

.columns {
display: table;
border-collapse: collapse;
width: 100%;
margin: 0 auto;
}

/* Aside columns in columns div */
.columns aside { 
display: table-cell;
/* Use any width and padding you like */
padding: 2%;
width: 18%;
}

/* Main article in the columns */
.columns article {
display: table-cell;
padding: 2%;
width: 18%;
}


/* Sample styles for 3-column layout */

.columnstitle {
display: table;
border-collapse: collapse;
width: 100%;
margin: 0 auto;
background-color: #f6fcfd;
text-align: center;
font-size: 23px;

}

/* Columns in columns div */

.columnstitle left { 
display: table-cell;
/* Use any width and padding you like */
padding: 5%;
width: 18%;
}

.columnstitle center{
display: table-cell;
/* Use any width and padding you like */
padding: 5%;
width: 18%;
}

.columnstitle right { 
display: table-cell;
/* Use any width and padding you like */
padding: 5%;
width: 18%;
}


/* Sample styles for 3-column layout */

.columnsc {
display: table;
border-collapse: collapse;
margin: 0 auto;
width: 100%;
background-color: #ffffff;
text-align: center;
font-size: 23px;
}

/* Columns in columns div */

.columnsc left { 
display: table-cell;
/* Use any width and padding you like */
padding: 1%;
width: 25%;
}

.columnsc center {
display: table-cell;
/* Use any width and padding you like */
padding: 1%;
width: 25%;
}

.columnsc right { 
display: table-cell;
/* Use any width and padding you like */
padding: 1%;
width: 25%;
}


/* Sample styles for 3-column layout */
/* Section containing multiple columns */

.columnsabout {
display: table;
border-collapse: collapse;
margin: 0 auto;
width: 100%;
background-color: #000000;
}

/* Columns in columns div */

.columnsabout left { 
display: table-cell;
/* Use any width and padding you like */
padding: 2%;
width: 18%;
}

.columnsabout center {
display: table-cell;
/* Use any width and padding you like */
padding: 2%;
width: 18%;
text-align: left;
}

.columnsabout right { 
display: table-cell;
/* Use any width and padding you like */
padding: 2%;
width: 18%;
}



/* Sample styles for 2-column layout */

.columnstwo {
display: table;
border-collapse: collapse;
margin: 0 auto;
width: 100%;
height: auto;
background-color: #f6fcfd;
text-align: center;
font-size: 23px;
}

/* Columns in columns div */

.columnstwo left { 
display: table-cell;
/* Use any width and padding you like */
padding: 5%;
width: 25%;
}

.columnstwo right { 
display: table-cell;
/* Use any width and padding you like */
padding: 5%;
width: 25%;
}

/* Sample styles for 2-column layout */

.columnsart {
display: table;
border-collapse: collapse;
width: 100%;
margin: 0 auto;
background-color: #FFFFFF;
font-size: 16px;
}

/* Aside columns in columns div */

.columnsart aside { 
display: table-cell;
/* Use any width and padding you like */
padding: 5px 170px;
width: 25%;
}


/* Style rules for formal, captioned figures */

figure {
width: 80%
max-width: 600px;
clear: both;
margin: 2em auto;
}
figure img {
width: 100%;
display: block;
}
figcaption {
font-family: "Raleway", Helvetica Neue, Sans-Serif;
padding: 8px 8px;
text-align: left;
}




/*=============== Styling for responsive iframe video */

.wrapper {
	width: 100%
	margin: 0 auto;
	background-color: #000000;
}

.main-wrapper {
	width: 80%;
	max-width: 780px;
	margin: 0 auto;
	background-color: #000000;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    padding-top: 50px; 
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}




/*==================== Styling for the footer section */


footer {
	width: 100%;
	background-color: #CCCCCC;
	height: auto;
	margin: 0 auto;
	text-align: center;
	font-size: 21px;
	color: #FFFFFF;
}

/* Get rid of large margins on footer */
	margin: 0;
}




/*=========== Alternate link styling for <a> tags that contain class "footer" in the footer section */


a.footer {
	font-size: 100%;
	text-align: center;
	
}

a.footer:link, a.footer:visited {
	color:#FFFFFF;
	text-decoration: none;
}
 
 a.footer:hover, a.footer:active {
	color:#000000;
	text-decoration: none;
}


/* Sample styles for 3-column layout */
/* Section containing multiple columns */

.columnsfooter {
display: table;
border-collapse: collapse;
width: 100%;
background-color: #CCCCCC;
font-size: 18px;
color: #FFFFFF;
margin: 0 auto;
}

/* Columns in columns div */

.columnsfooter left { 
display: table-cell;
/* Use any width and padding you like */
padding: 1%;
width: 15%;
text-align: left;
}

.columnsfooter center {
display: table-cell;
/* Use any width and padding you like */
padding: 1%;
width: 20%;
}

.columnsfooter right { 
display: table-cell;
/* Use any width and padding you like */
padding: 1%;
width: 15%;
}