/* MODAL.CSS incorporated here 
This is for the Modal overlay that is used for showing videos
*/
/* defaults */
body {
  --light: hsl(220, 50%, 90%);
  --primary: hsl(255, 30%, 55%);
  --focus: hsl(210, 90%, 50%);
  /* --border-color: hsla(0, 0%, 100%, .2);*/
  --border-color: hsla(196, 20%, 80%, .2);
  --global-background: hsl(220, 25%, 10%);
  /* --background: linear-gradient(to right, hsl(210, 30%, 20%), hsl(255, 30%, 25%)); */
  --background: linear-gradient(to right, hsl(220, 30%, 10%), hsl(220, 30%, 25%));
  --shadow-1: hsla(236, 50%, 50%, .3);
  --shadow-2: hsla(236, 50%, 50%, .4);
}


a:link {
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}

a:focus {
  outline: none;
}

h1 {
	/* font-size: 1.5em;*/
	margin:0; 
	padding:0;
	/* padding-top: 8px;
	padding-bottom: 8px; */
}

.subHeader-basic, .subHeader {
  margin-right: 1.2em;
  margin-bottom: 0.5em;
  margin-left: 19px;
  font-size:1em;
}

.subHeader-basic h2, .subHeader h2 { 
  margin-top:0;
  padding-left:1em;
  padding-bottom:0.5em;
  padding-top:0.5em;
  border-width: 0.1em;
  border-style: solid;
  white-space: nowrap;
  overflow: hidden;
}



/* */
button::-moz-focus-inner {
  border: 0;
}

/* modal */ 
.vmodal-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;

  display: none;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 100%;

  /* --m-background is set as inline style */
  /* background: var(--m-background); 
  background-color: red; */
} 

  
/*when users will click/enter button(link) browser will add a #id in a url and when that happens we'll show our users the modal that contains that id.*/

.vmodal-container:target {
  display: flex;
}

 .vmodal {
  width: 100%;
  height: 100%;
  /* max-height: calc(100% - 80px); */
  padding: 0; /* 4rem 2rem; */
  border-radius: 0; /* .8rem; */

  color: var(--light);
  /* background: var(--background); */
  box-shadow: var(--m-shadow, .4rem .4rem 10.2rem .2rem) var(--shadow-1);
  position: relative;

  overflow: hidden;
  background-color: rgba(30, 30, 30, 0.85);
  cursor: default;
} 


.vmodal-content video{
  height: 85%;
  object-fit: scale-down;
}



.vmodal__title {
  font-size: 16px;
  margin-left: 20px;
}

.vmodal__text {
  padding: 0 4rem;
  margin-top: 4rem;

  font-size: 1.6rem;
  line-height: 2;
}

/* .vmodal__btn {
  margin-top: 4rem;
  padding: 1rem 1.6rem;
  border: 2px solid var(--border-color);
  border-radius: 100rem;

  color: inherit;
  background: transparent;
  font-size: 1.4rem;
  font-family: inherit;
  letter-spacing: .2rem;

  transition: .2s;
  cursor: pointer;
} */

/* .vmodal__btn:nth-of-type(1) {
  margin-right: 1rem;
}

.vmodal__btn:hover,
.vmodal__btn:focus {
  background: var(--focus);
  border-color: var(--focus);
  transform: translateY(-.2rem);
} */


/* link-... 
.link-1 {
  font-size: 1.8rem;

  color: var(--light);
  background: var(--background);
  box-shadow: .4rem .4rem 2.4rem .2rem var(--shadow-1);
  border-radius: 100rem;
  padding: 1.4rem 3.2rem;

  transition: .2s;
}

.link-1:hover,
.link-1:focus {
  transform: translateY(-.2rem);
  box-shadow: 0 0 4.4rem .2rem var(--shadow-2);
}

.link-1:focus {
  box-shadow:
    0 0 4.4rem .2rem var(--shadow-2),
    0 0 0 .4rem var(--global-background),
    0 0 0 .5rem var(--focus);
}*/

.link-2 {
  /* width: 3rem;
  height: 4rem; */
  /* border: 1px solid var(--border-color); */
  /* border-radius: 100rem; */

  color: inherit;
  font-size: 50px;
  font-weight: bold;
  /* font-size: 2.5rem; */

  position: absolute;
  top: 10px;
  /* top: 2rem; */
  right: 0;
  /* right: 2rem; */
  padding: 15px;

  display: flex;
  justify-content: center;
  align-items: center;

  /* transition: .2s; */
}

.link-2::before {
  content: '×';

  /* transform: translateY(-.1rem); */
}

.link-2:hover,
.link-2:focus {
  background-color: rgba(0,0,0,0.7);
  cursor: pointer;

  /* background: var(--focus); */
  /* border-color: var(--focus); */
  /* transform: translateY(-.2rem); */
}





/* LAYOUT STYLES */

* {
  box-sizing: border-box;
}

/* For mobile phones */
[class*="col-"] {
  float: left;
  width: 100%;
  min-height: 200px;
}

@media only screen and (max-width: 599.9px) {
	.col-1 {
		width: 100%;
		min-width: 250px;
  }
.header-n {
    font-family: Arial Rounded MT Bold, Arial, Helvetica;
    margin:12px 19px 0px 19px; /* t r b l */
    padding-left:16px;
	padding-top:4px;
	padding-bottom:4px;
	padding-right:16px;
    border:none;
    background: rgb(022,062,100); /*H1BackColour*/
    color: rgb(255, 140, 000); /*H1ForeColour*/
	max-height: 48px;
  }
  .header-n h1 { 
    font-size: 1.5em; 
    white-space: nowrap;
    overflow: hidden;
  } 
  .subHeader-n {
    margin-right: 19px;
    margin-bottom: 8px;
    margin-left: 19px;
	max-height: 82px;
  }
  .subHeader-n h2 { 
    font-size: 1.0em; 
    margin-top:0;
    padding-left:16px;
    padding-bottom:2px;
    padding-top:4px;
	padding-right:16px;
    border-width: 0.1em;
    border-style: solid;
    white-space: wrap;
    overflow: hidden;
	/* text-overflow: ellipsis; */
	line-height: 1.2em;
	max-height: 4em;
  }
}

@media only screen and (min-width: 600px) {
/* For tablets: */
  .col-s-1 {width:  25%;}
  .col-s-2 {width:  100%;}

  .header-s {
    font-family: Arial Rounded MT Bold, Arial, Helvetica;
    margin:12px 19px 0px 19px; /* t r b l */
    padding:4px 16px;
    border:none;
    background: rgb(022,062,100); /*H1BackColour*/
    color: rgb(255, 140, 000); /*H1ForeColour*/
  }		
  .header-s h1 { 
    font-size: 1.5em;
  } 

  .subHeader-s {
    margin-right: 1.2em;
    margin-bottom: 0.5em;
    margin-left: 1.2em;
    font-size:1em;
  }
  .subHeader-s h2 { 
    margin-top:0;
    padding-left:16px;
    padding-bottom:4px;
    padding-top:4px;
	padding-right:4px;
    border-width: 2px;
    border-style: solid;
    white-space: nowrap;
  }
}

@media only screen and (min-width: 850px) {
/* For desktop: */
  .col-1 {width:  25%;}
  .col-2 {width:  75%;}

  .header {
    /* font-family: Arial Rounded MT Bold, Arial, Helvetica; */
    margin:12px 19px 0px 19px; /* t r b l */
    padding:4px 16px;
    border:none;
    background: rgb(022,062,100); /*H1BackColour*/
    color: rgb(255, 140, 000); /*H1ForeColour*/
  }		

  .header h1 { 
    font-size: 1.5em; 
    white-space: nowrap;
    overflow: hidden;
  } 
  .subheader {
    margin-right: 19px;
    margin-bottom: 0.5em;
    margin-left: 19px;
    font-size:1em;
  }
  .subHeader h2 { 
    margin-top:0;
    padding-left:16px;
    padding-bottom:4px;
    padding-top:4px;
    border-width: 2px;
    border-style: solid;
    white-space: nowrap;
    overflow: hidden;
  }
}

@media only screen and (min-width: 1200px) {
/* For wide desktop: */
  .col-w-1 {width:  17.5%;}
  .col-w-2 {width:  82.5%;}

  .header-w {
    font-family: Arial Rounded MT Bold, Arial, Helvetica;
    margin:12px 19px 0px 19px; /* t r b l */
    padding:4px 16px;
    border:none;
    background: rgb(022,062,100); /*H1BackColour*/
    color: rgb(255, 140, 000); /*H1ForeColour*/
  }		

  .header-w h1 { 
    font-size: 1.5em;
    white-space: nowrap;
    overflow: hidden;
  } 
  .subHeader-w {
    margin-right: 19px;
    margin-bottom: 0.5em;
    margin-left: 19px;
    font-size:1em;
  }
  .subHeader-w h2 { 
    margin-top:0;
    padding-left:16px;
    padding-bottom:4px;
    padding-top:4px;
    border-width: 2px;
    border-style: solid;
    white-space: nowrap;
    overflow: hidden;
  }
}

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

/* #header-basic, #header {
  font-family: Arial Rounded MT Bold, Arial, Helvetica;
  margin: 1.5em 1.2em 0em 1.2em;
  padding: 1em 1.5em;
  border:none;
}	*/	

/* #header h1 { 
  margin:0; 
  padding:0;
  font-size: 1.5em;
  white-space: nowrap;
  overflow: hidden;
} */

#subHeader-basic, #subHeader {
  margin-right: 1.2em;
  margin-bottom: 0.5em;
  margin-left: 1.2em;
  font-size:1em;
}

#subHeader-basic h2, #subHeader h2 { 
  margin-top:0;
  padding-left:1em;
  padding-bottom:0.5em;
  padding-top:0.5em;
  border-width: 0.1em;
  border-style: solid;
  white-space: nowrap;
  overflow: hidden;
}





#instructions {
  margin-left: 15em; 
  margin-right:1em;
  padding: 0.5em;
  padding-left: 0em;
  height: 4em;
}

#footer-basic, #footer {
  position: fixed; /* relative; */
  /* top: 1em;*/
  bottom: 0;
  padding: 0.35em;
  clear: both; 
  /* margin-left: 1.2em;
  margin-right: 1.2em; */
  width: 100%;
}

#slideshow-basic, #slideshow {
  font-size: 10pt; 
  font-family: Arial; 
  cursor: hand; 
  width: 403; 
  height: 25;
}

body-basic, body {
  margin:0;
  padding:0;
  font-family: Arial, Helvetica;
}

a {
  text-decoration:none; color:rgb(000,000,000);
}

p {
   margin-left: 0.3em;
}

h1, h2, h3, h4, h5, h6
{
   font-family: Arial Rounded MT Bold, Arial, Helvetica;
}

.standard-basic, .standard {
   margin-top: 0;
   margin-bottom: 0.3em;
   font-size: 0.8em;
}

.LeftArrow {
  position: relative;
  top: 1.8em; 
  clear: both; 
  margin-left: 2em;
}

.LBPrev {
  position: absolute;
  top: 50%; 
  clear: both; 
  margin-left: 2em;
  cursor: pointer;
}


.LAText {
  position: relative;
  top: 0em; 
  left: 2em;
  clear: both; 
  margin-left: 2em;
}

.RightArrow {
  position: relative;
  float: right;
  top: -2.9em;
  margin-right: 3em;
  clear: both; 
}

.LBNext {
  position: relative;
  float: right;
  top: 50%;
  margin-right: 3em;
  clear: both; 
  cursor: pointer;
}


.RAText {
  position: relative;
  float: right;
  top:-1.2em;
  margin-right: 5em;
  clear: both; 
}

.Video {
  position: relative;
  top: 0em;
  clear: both; 
  margin-left: 1em;
}

.gallery {
  position: relative;
  padding-bottom: 0.4em;
  padding-top: 0.25em;
  margin: 0.33em;
  margin-left: 1.2em;
  margin-top: 0.75em;
  border: 0.1em solid RGB(150,150,150);
  float: left;
  width: 18em;
  height: 19em;
}

.gallery:hover {
  border: 0.2em solid RGB(255,255,255);
  cursor: pointer;
}

.gallery img {
  width: auto;
  max-width: 96%;  
  height: auto; 
  max-height: 92%;  
  display: block;
  margin: 0 auto;
}

.gallery video {
  /* width: auto;  */
  height: auto; 
  display: block;
  margin: 0 auto;
}


.caption {
  position: absolute; 
  padding: 0.45em; 
  text-align: left; 
  font-size: 0.85em; 
  bottom: 0;
}

.clearing {
  height: 0;
  clear: both;
}

.arrow-basic, .arrow {
   margin-top: 0;
   margin-bottom: 0em; 
   font-size: 1em;
}

.last-basic, .last {
   margin-top: 0;
   margin-bottom: 0;
   font-size: 0.8em;
}

/* --- menu styles ---
note:
   not all browsers render styles the same way so try out your style sheet
   on different browsers before publishing;
*/
/*****************/
/* level 0 inner */

.m0l0iout-basic, .m0l0iout {
   font-family: Calibri, Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
   font-size: 18px;
   text-decoration: none;
   padding: 6px;
   padding-top: 3px;
}

.m0l0iover-basic, .m0l0iover {
   font: bold 18px Calibri, Verdana, Tahoma, Geneva, Arial, Helvetica, sans-serif;
   text-decoration: none;
   padding: 5px;
   padding-top: 3px;
}

/*****************/
/* level 0 outer */

.m0l0oout-basic, .m0l0oout {
   text-decoration : none;
   border : 1px solid #aaaaaa;
}

.m0l0oover-basic, .m0l0oover {
   text-decoration : none;
   border : 1px solid #aaaaaa;
}

/*****************/
/*****************/

/* level 1 inner */
.m0l1iout-basic, .m0l1iout {
   font: 18px Calibri, Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
   text-decoration: none;
   padding: 4px;
}

.m0l1iover-basic, .m0l1iover {
   /******* level 1 menu text colour with mouse over *******/
   font: bold 18px Calibri, Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
   text-decoration : none;
   padding: 4px;
}

/*****************/

/* level 1 outer */

.m0l1oout-basic, .m0l1oout {
   text-decoration : none;
   border : 1px solid #000000;
}

.m0l1oover-basic, .m0l1oover {
   text-decoration : none;
   border : 1px solid #000000;
}

/*****************/
/*****************/

/* level 2 inner */

.m0l2iover-basic, .m0l2iover {
   font: bold 18px Calibri, Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
   text-decoration : none;
   padding: 4px;
}

/* level 2 outer */

.m0l2oout-basic, .m0l2oout {
   text-decoration : none;
   border : 1px solid #000000;
}

.m0l2oover-basic, .m0l2oover {
   text-decoration : none;
   border : 1px solid #000000;
}

/*****************/