/**

 * @author ( Mark Pilon )
 */
 
 @font-face {
    font-family: 'poppins bold';
    src: url('../fonts/Poppins-Bold.woff2') format('woff2'),
         url('../fonts/Poppins-Bold.woff') format('woff');

}
@font-face {
    font-family: 'poppins bold italic';
    src: url('../fonts/Poppins-BoldItalic.woff2') format('woff2'),
         url('../fonts/Poppins-BoldItalic.woff') format('woff');

}
@font-face {
    font-family: 'Poppins Regular';
    src: url('../fonts/Poppins-Regular.woff2') format('woff2'),
         url('../fonts/Poppins-Regular.woff') format('woff');

}
@font-face {
    font-family: 'poppins regular italic';
    src: url('../fonts/Poppins-Italic.woff2') format('woff2'),
         url('../fonts/Poppins-Italic.woff') format('woff');

}
 
 body {
   background-image: url("../../../images/slideshow/empowered_bg.jpg")
 }

/* GLOBAL STYLES */

/* 
This is where the colour is set for the mobile menue -
The hamburger menu
*/

.container-banner {
/*  background-color: red; */
}

ul.dj-mobile-dark li.dj-mobileitem > a {
   background-image: linear-gradient(#454545, #2b2b2b) !important;
}
ul.dj-mobile-dark li.dj-mobileitem.active > a {
   background-image: linear-gradient(#38ace7, #1681d1) !important;

}
/*****************************
NOTE: GRID LAYOUTS

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

/* The following grid is for the footer which gives contact info a map */
/* and the ASC thankyou                                                */
.footer1 {
  grid-area: cntct;
}
.footer2 {
  grid-area: asc;
}
.footer3 {
  grid-area: loctn;
}

/* The following grid is for the footer which gives contact info a map */
/* and the ASC thankyou                                                */

.about-empowered {
    display: grid;
    grid-column-gap: 10px;
/*  grid-template-columns: 25% 41% 33%;
    grid-column: 1 / 2;
    grid-column: 2 / 4;
    grid-column: 4 / 5; */
    grid-template-columns: .60fr 1fr .80fr ;
    grid-template-areas:
     "cntct asc loctn";
}
.empowered-item {
    font-size: 14pt;
}
.bottom-a {
    background-color: rgba(253, 141, 5, 0.7);
}
/* The following grid is for the home page which intros the speakers */
/* and various other information - part 1                            */

.home-header1 {
  grid-area: hd1;
}
.image1 {
  grid-area: img1;
}
.image2 {
  grid-area: img2;
}
.image3 {
  grid-area: img3;
}
.home-pageinfo-pt1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
   "hd1 hd1 hd1"
   "img1 img2 img3";
}
.home-header2 {
  grid-area: hd2;
}
.image21 {
  grid-area: img21;
}
.image22 {
  grid-area: img22;
}
.home-pageinfo-pt2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
   "hd2 img21 img22";
}
/* The following grid is for the bios page which describes the speakers */
/* and various other information                                        */
.speaker1 {
  grid-area: spkr1;
}
.speaker2 {
  grid-area: spkr2;
}
.speaker3 {
  grid-area: spkr3;
}
.speaker4 {
  grid-area: spkr4;
}
.speaker5 {
  grid-area: spkr5;
}
.speaker6 {
  grid-area: spkr6;
}
.speaker7 {
  grid-area: spkr7;
}

.speaker-bios {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 15px;
  background-color: #d9d9d9;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
  padding-bottom: 15px;
  grid-template-areas:
   "spkr1 spkr2"
   "spkr3 spkr4"
   "spkr5 spkr6"
   "spkr7 spkr7";
}




figure {
/*  float: right; */
/*  width: 30%; */
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
img.scaled {
  width: 100%;
}

/*
here we are making the text more readable by increasing line spacing
and adding more space between paragraphs.
*/
p {
	margin-bottom: 1.5em;
	line-height: 1.65em;
}

.container-component {
	margin-bottom: 2em;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    font-family: 'Poppins Regular';
}

/* create a responsive Google Maps location display */


  .google-maps {
    position: relative;
    padding-bottom: 75%; // This is the aspect ratio
    height: 0;
    overflow: hidden;
  }
  .google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
  }

/* 
Generic Styling, for Desktops/Laptops for conference schedule table
*/


table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}

.column-one {
  width: 14%;
}
.column-two {
  width: 27%;
}
.column-three {
  width: 59%;
}

/***************************
 RESPONSIVE DESIGN FOR THE WEB SITE
 max-width: 429 to 767px
 ***************************/
 
 @media (min-width: 429px) and (max-width: 767px) {
 
   .textsize {
     font-size: 10pt !important;
     font-family: arial, helvetica, sans-serif;
   }
   .textemph {
     font-size: 11pt;
     font-family: arial, helvetica, sans-serif;
   }
  /* The following grid is for the footer which gives contact info a map */
  /* and the ASC thankyou                                                */

  .about-empowered {
      display: grid;
  /*  grid-template-columns: 25% 41% 33%;
      grid-column: 1 / 2;
      grid-column: 2 / 4;
      grid-column: 4 / 5; */
      grid-template-columns: 1fr;
      grid-template-areas:
       "cntct"
       "asc"
       "loctn"
  }
  .empowered-item {
      font-size: 10pt;
  }
  /* The following grid is for the home page which intros the speakers */
  /* and various other information - part 1                            */

  .home-pageinfo-pt1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas:
     "hd1"
     "img1"
     "img2"
     "img3";
  }
  .home-pageinfo-pt2 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas:
     "hd2"
     "img21"
     "img22";
  }
  .speaker-bios {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas:
     "spkr1"
     "spkr2"
     "spkr3"
     "spkr4"
     "spkr5"
     "spkr6"
     "spkr7";
  }
/* This section designates the text layout of the frame just below the masthead */
   
.description-header {
  grid-area: hd1;
}
.list1 {
  grid-area: lst1;
}
.list2 {
  grid-area: lst2;
}
.description-closer {
  grid-area: cl1;
}

.home-pageinfo-gen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 15px;
  grid-template-areas:
   "hd1 hd1"
   "lst2 lst2"
   "lst1 lst1"
  "cl1 cl1";

}   

/* This section designates the text layout of the frame just below the masthead */


    p {
	margin-bottom: 1.2em;
	line-height: 1.2em;
	font-size: 12pt;
    }

   .twentynineteen-header {
	background-image: url('/images/banners/EmpoweredCCFM2019Header.jpg');
        background-size: 100%;
	height:230px;
	padding-left: 15px;
	padding-right: 15px;
	color: black;
	font-size: 12pt;
   }
   .twentynineteen-header p {
	background-color: #ffffff40;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 1.0em;
	line-height: 1.2em;

   }

   .twentynineteen-header h1 {
	font-size: 20pt;
	font-family: 'poppins bold' !important;

   }
   
   .main-header {
	background-image: url('/images/banners/EmpoweredHomePageBanner-mobile.jpg');
    background-size: 100%;
	height:190px;
	padding-left: 15px;
	padding-right: 15px;
	color: black;
   }
   .main-header p {
	background-color: #ffffff40;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 10pt;
	margin-bottom: 1.0em;
	line-height: 1.2em;
   }

   .main-header h1 {
	font-size: 20pt;
	font-family: 'poppins bold' !important;

   }


   
}


/***************************
 RESPONSIVE DESIGN FOR THE WEB SITE
 max-width: 768px TO 979px
 ***************************/

.column-one {
  width: 19%;
}
.column-two {
  width: 27%;
}
.column-three {
  width: 54%;
}


 @media (min-width: 768px) and (max-width: 979px) {
    .table-textsize {
     font-size: 11.5pt !important;
     line-height: 1.4em;
   }

  .textsize {
    font-size: 12pt !important;
    font-family: arial, helvetica, sans-serif;
  }
  .textemph {
    font-size: 13pt;
    font-family: arial, helvetica, sans-serif;
  }
  
  /* The following grid is for the footer which gives contact info a map */
  /* and the ASC thankyou                                                */

  .about-empowered {
      display: grid;
      grid-column-gap: 5px;
  /*  grid-template-columns: 25% 41% 33%;
      grid-column: 1 / 2;
      grid-column: 2 / 4;
      grid-column: 4 / 5; */
      grid-template-columns: repeat(2, 1fr);
      grid-template-areas:
       "cntct loctn"
       "asc asc"
  }

  
  .empowered-item {
      font-size: 12pt;
  }
  .bottom-a {
      background-color: rgba(253, 141, 5, 0.7);
  }
  /* The following grid is for the home page which intros the speakers */
  /* and various other information - part 1                            */

  .home-pageinfo-pt1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
     "hd1 img1"
     "img2 img3";
  }
  .home-pageinfo-pt2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
     "hd2 hd2"
     "img21 img22";
  }

/* This section designates the text layout of the frame just below the masthead */

.description-header {
  grid-area: hd1;
}
.list1 {
  grid-area: lst1;
}
.list2 {
  grid-area: lst2;
}
.description-closer {
  grid-area: cl1;
}

.home-pageinfo-gen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 15px;
  grid-template-areas:
   "hd1 hd1"
   "lst1 lst2"
   "cl1 cl1";

}
/* The following css code has to do with the banners for the home page and the previous conference page*/   
 
    p {
	margin-bottom: 1.2em;
	line-height: 1.2em;
	font-size: 12pt;
    }

   .twentynineteen-header {
	background-image: url('/images/banners/EmpoweredCCFM2019Header.jpg');
        background-size: 100%;
	height:170px;
	padding-left: 15px;
	padding-right: 15px;
	color: black;
	font-size: 12pt;
   }
   .twentynineteen-header p {
	background-color: #ffffff40;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 1.0em;
	line-height: 1.2em;

   }

   .twentynineteen-header h1 {
	font-size: 22pt;
	font-family: 'poppins bold' !important;

   }
   
   .main-header {
	background-image: url('/images/banners/EmpoweredHomePageBanner-mobile.jpg');
    background-size: 100%;
	height:240px;
	padding-left: 15px;
	padding-right: 15px;
	color: black;
	font-size: 12pt;
   }
   .main-header p {
	background-color: #ffffff40;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 1.0em;
	line-height: 1.2em;

   }

   .main-header h1 {
	font-size: 25pt;
	font-family: 'poppins bold';

   }
  
  
 }
 
 /***************************
 RESPONSIVE DESIGN FOR THE WEB SITE
 max-width: 980px TO 1399px
 ***************************/

@media (min-width: 980px) and (max-width: 1399px) {
   .table-textsize {
     font-size: 11.5pt !important;
     line-height: 1.4em;
   }
   
   .textsize {
     font-size: 14pt !important;
     line-height: 1.65em;
     /* margin-bottom: 1.5em; */
     font-family: arial, helvetica, sans-serif;
   }
   .textsize p {
     line-height: 1.65em;
   }
   .textemph {
     font-size: 15pt;
     font-family: arial, helvetica, sans-serif;
   }
   
/* This section designates the text layout of the frame just below the masthead */
   
.description-header {
     grid-area: hd1;
}
.list1 {
  grid-area: lst1;
}
.list2 {
  grid-area: lst2;
}
.description-closer {
  grid-area: cl1;
}

.home-pageinfo-gen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 15px;
  grid-template-areas:
   "hd1 hd1"
   "lst1 lst2"
   "cl1 cl1";

}

/* The following css code has to do with the banners for the home page and the previous conference page*/   

.twentynineteen-header {
	background-image: url('/images/banners/EmpoweredCCFM2019Header.jpg');
        background-size: 100%;
	height:310px;
	padding-left: 50px;
	padding-right: 50px;
	color: black;
	font-size: 16pt;

}

.twentynineteen-header h1 {
	font-size: 29pt;
	font-family: 'poppins bold' !important;

}
.twentynineteen-header p {
	background-color: #ffffff40;
	padding-left: 10px;
	padding-right: 10px;

}
   .main-header {
	background-image: url('/images/banners/EmpoweredHomePageBanner.jpg');
        background-size: 100%;
	height:310px;
	padding-left: 50px;
	padding-right: 50px;
	color: black;
	font-size: 16pt;
   }
   .main-header p {
	background-color: #ffffff40;
	padding-left: 10px;
	padding-right: 10px;
	line-height: 1.2em;


   }

   .main-header h1 {
	font-size: 29pt;
	font-family: 'poppins bold' !important;

   }
/* this controls the size of the slider header. There is a tab to control slider caption via css
 in the Joomla slideshow CK template. However, unfortunately it does not work. 
 */  
  
  .camera_caption_title {
    font-size: 1.9em;
    font-weight: bold;
    line-height: 1em;
    font-family: 'Poppins Regular' !important;
  }

  .camera_caption_title {
    font-size: 1.3em !important;
    font-family: 'poppins bold' !important;
  }
  .camera_caption_desc {
    font-size: 1.0em !important;
    font-family: 'Poppins Regular' !important;
  }



}
 
  /***************************
 RESPONSIVE DESIGN FOR THE WEB SITE
 max-width: 1400px
 ***************************/

 
 @media (min-width: 1400px) {
   .textemph {
     font-size: 15pt;
     font-family: arial, helvetica, sans-serif;
   }
   .table-textsize {
     font-size: 14pt !important;
     line-height: 1.4em;
   }
   .textsize {
     font-size: 16pt !important;
     font-family: arial, helvetica, sans-serif;
     /* margin-bottom: 1.5em; 
     line-height: 1.2em !important; */
   }
   .textsize p {
     line-height: 1.65em;
   }
 /* This section designates the text layout of the frame just below the masthead */
   
.description-header {
     grid-area: hd1;
}
.list1 {
  grid-area: lst1;
}
.list2 {
  grid-area: lst2;
}
.description-closer {
  grid-area: cl1;
}

.home-pageinfo-gen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 15px;
  grid-template-areas:
   "hd1 hd1"
   "lst1 lst2"
   "cl1 cl1";

}
  
/* The following css code has to do with the banners for the home page and the previous conference page*/   

.twentynineteen-header {
	background-image: url('/images/banners/EmpoweredCCFM2019Header.jpg');
        background-size: 100%;
	height:350px;
	padding-left: 50px;
	padding-right: 50px;
	color: black;
	font-size: 16pt;

}

.twentynineteen-header h1 {
	font-size: 40pt;
	font-family: 'poppins bold' !important;
}
.twentynineteen-header p {
	background-color: #ffffff40;
	padding-left: 10px;
	padding-right: 10px;

}
   .main-header {
	background-image: url('/images/banners/EmpoweredHomePageBanner.jpg');
        background-size: 100%;
	height:377px;
	padding-left: 50px;
	padding-right: 50px;
	color: black;
	font-size: 16pt;
   }
   .main-header p {
	background-color: #ffffff40;
	padding-left: 10px;
	padding-right: 10px;
	line-height: 1.2em;


   }

   .main-header h1 {
	font-size: 40pt;
	font-family: 'poppins bold' !important;

   }

 /* this controls the size of the slider header. There is a tab to control slider caption via css
 in the Joomla slideshow CK template. However, unfortunately it does not work. 
 */  
  
  
  .camera_caption_title {
    font-size: 1.9em !important;
    font-family: 'poppins bold' !important;
  }
  .camera_caption_desc {
    font-size: 1.3em !important;
    font-family: 'Poppins Regular' !important;
  }

   
 }
 

 /***************************
 RESPONSIVE DESIGN FOR THE WEB SITE
 max-width: 428px
 ***************************/


@media (max-width: 428px) {

    p {
	margin-bottom: 1.0em;
	line-height: 1.2em;
	font-size: 10pt;
    }


   .twentynineteen-header {
	background-image: url('/images/banners/EmpoweredCCFM2019HeaderSmall.jpg');
        background-size: 100%;
	height: 150px;
	padding-left: 10px;
	padding-right: 10px;
	color: black;
   }
   .twentynineteen-header p {
	background-color: #ffffff40;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	line-height: 1.0em;
	font-size: 8pt;
   }
   .twentynineteen-header h1 {
	font-size: 15pt;
	font-family: 'poppins bold' !important;
   }
   
     .main-header h2 {
	font-size: 15pt;
   }
 
      .main-header {
	background-image: url('/images/banners/EmpoweredHomePageBannerSmall-mobile.jpg');
        background-size: 100%;
	height:200px;
	padding-left: 15px;
	padding-right: 15px;
	color: black;
   }
   .main-header p {
	background-color: #ffffff40;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 10pt;
	margin-bottom: 1.0em;
	line-height: 1.2em;
   }

   .main-header h1 {
	font-size: 20pt;
	font-family: 'poppins bold' !important;

   }
/* This section designates the text layout of the frame just below the masthead */
   
.description-header {
  grid-area: hd1;
}
.list1 {
  grid-area: lst1;
}
.list2 {
  grid-area: lst2;
}
.description-closer {
  grid-area: cl1;
}

.home-pageinfo-gen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 15px;
  grid-template-areas:
   "hd1 hd1"
   "lst2 lst2"
   "lst1 lst1"
  "cl1 cl1";

}   

/* The following grid is for the footer which gives contact info a map */
/* and the ASC thankyou                                                */

.about-empowered {
    display: grid;
    grid-column-gap: 10px;
/*  grid-template-columns: 25% 41% 33%;
    grid-column: 1 / 2;
    grid-column: 2 / 4;
    grid-column: 4 / 5; */
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas:
     "cntct"
     "asc"
     "loctn";
}



.empowered-item {
    font-size: 8pt;
}
.bottom-a {
    background-color: rgba(253, 141, 5, 0.7);
}
  .speaker-bios {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas:
     "spkr1"
     "spkr2"
     "spkr3"
     "spkr4"
     "spkr5"
     "spkr6"
     "spkr7";
  }

  .home-pageinfo-pt2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
     "hd2 hd2"
     "img21 img22";
  }

}

   
 /***************************
 RESPONSIVE DESIGN FOR THE Table
 
 ***************************/

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/

/****
 @media
  only screen 
  and (max-width: 760px), (min-device-width: 768px) 
  and (max-device-width: 1024px)  {
****/
	/* Force table to not be like tables anymore */
/****
  table, thead, tbody, th, td, tr {
	display: block;
  }
****/
	/* Hide table headers (but not display: none;, for accessibility) */
/****
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    margin: 0 0 1rem 0;
  }
      
  tr:nth-child(odd) {
    background: #ccc;
  }

  td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 35%;
  }

  td:before {
    position: absolute;
    top: 0;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
  }
****/

    /*
    Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
    */
/****

  td:nth-of-type(1):before { content: "Session Time"; }
  td:nth-of-type(2):before { content: "Event"; }
  td:nth-of-type(3):before { content: "Description"; }
  td:nth-of-type(4):before { content: "Favorite Color"; }
  td:nth-of-type(5):before { content: "Wars of Trek?"; }
  td:nth-of-type(6):before { content: "Secret Alias"; }
  td:nth-of-type(7):before { content: "Date of Birth"; }
  td:nth-of-type(8):before { content: "Dream Vacation City"; }
  td:nth-of-type(9):before { content: "GPA"; }
  td:nth-of-type(10):before { content: "Arbitrary Data"; }
} 

****/

/****
Use this for promotional video
*/
.banner-header {
  grid-area: hdb1;
}
.banner1 {
  grid-area: bnr1;
}
.banner2 {
  grid-area: bnr2;
}
.banner-closer {
  grid-area: clb1;
}
@media (min-width: 768px) {


.bannerinfo-pt1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: column;
  grid-column-gap: 15px;
  grid-template-areas:
   "hdb1 hdb1"
   "bnr1 bnr2"
   "clb1 clb1";

}
.bannerinfo-pt1 iframe {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  padding-bottom: 10px;
  padding-left: 10px;
}
}
@media (max-width: 767px) {
  .bannerinfo-pt1 iframe {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  padding-bottom: 10px;
  padding-left: 8px;
  }


.bannerinfo-pt1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 15px;
  grid-template-areas:
   "hdb1 hdb1"
   "bnr1 bnr1"
   "bnr2 bnr2"
   "clb1 clb1";

}
@media (max-width: 668px) {
  .bannerinfo-pt1 iframe {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  padding-bottom: 10px;
  padding-left: 5px;
  }


.bannerinfo-pt1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 15px;
  grid-template-areas:
   "hdb1 hdb1"
   "bnr1 bnr1"
   "bnr2 bnr2"
   "clb1 clb1";

}
/*
iframe.video-container {
  height: 250px;
 
}
*/
}