:root {
  /* imported on 2020-06-10 */
  /*------------------------------------------------------
  // Brand colors */

  /* Brand color: sky */
  --blue-lightest: hsl(193, 100%, 75%);
  --blue-lighter: hsl(193, 100%, 65%);
  --blue-light: hsl(193, 100%, 55%);
  --blue: hsl(193, 100%, 45%);
  --blue-dark: hsl(193, 100%, 32%);
  --blue-darker: hsl(193, 100%, 25%);
  --blue-darkest: hsl(193, 100%, 12%);

  /*------------------------------------------------------
  // Additional standard colors */

  --black: #000000;
  --white: #ffffff;

  --grey-light: #d8d8d8;
  --grey-lighter: #e0dedf;
  --grey-lightest: #f2f2f2;
  --grey-medium: #bbbbbb;
  --grey: #9b9b9b;
  --grey-dark: #767676;
  --grey-darker: #4a4a4a;
  --grey-darkest: #3e3e3e;

  /*------------------------------------------------------
  // Use case colours for common cases */

  /* Body text */
  --color-text: #000000;

  /* Links */
  --color-link: var(--blue-dark);
  --color-link-hover: var(--blue-darkest);

  /* Highlighing words or word fragments that match search terms */
  --color-highlight: var(--white);

  /* HTTP methods color scheme */
  --color-http-get: #118911;
  --color-http-post: #bf5900;
  --color-http-put: #3177c9;
  --color-http-patch: #767676;
  --color-http-purge: #db3936;
  --color-http-delete: #db3936;

  /* Message context color scheme */
  --color-context-hint: rgb(255, 209, 3);
  --color-context-hint-bg: #fff4dd;
  --color-context-warn: rgb(255, 83, 3);
  --color-context-warn-bg: #ffddd3;
  --color-context-important: rgb(3, 70, 255);
  --color-context-important-bg: #cedeff;

  --text-title1: bold 38px "Inter", serif;
  --text-title2: bold 32px "Inter", serif;
  --text-title3: bold 24px "Inter", serif;
  --text-title4: bold 18px "Inter", serif;
  --text-title5: bold 16px "Inter", serif;
  --text-title6: bold bold 14px "Inter", sans-serif;
}

@media (min-width: 992px) {

:root {
    --text-title1: bold 42px "Inter", serif;
    --text-title2: bold 38px "Inter", serif;
    --text-title3: bold 32px "Inter", serif;
    --text-title4: bold 24px "Inter", serif;
    --text-title5: bold 18px "Inter", serif;
    --text-title6: bold 14px "Inter", sans-serif;
}
  }

:root {

  --text-xl: 20px "Inter", sans-serif;
  --text-lg: 18px "Inter", sans-serif;
  --text-standard: 14px "Inter", sans-serif;
  --text-small: 11px "Inter", sans-serif;
}

@media (min-width: 992px) {

:root {
    --text-xl: 25px "Inter", sans-serif;
    --text-lg: 20px "Inter", sans-serif;
    --text-standard: 14px "Inter", sans-serif;
    --text-small: 11px "Inter", sans-serif;
}
  }

:root {

  /* page width */
  --max-page-width: 1200px;
}

/* Fonts */

@font-face {

	font-family: "Inter";

	src: url("https://learn.fastly.com/rs/025-XKO-469/images/Inter-Regular.ttf") format("truetype");

	font-weight: normal;

	font-style: normal;

	font-display: swap;

}



@font-face {

	font-family: "Inter";

	src: url("https://learn.fastly.com/rs/025-XKO-469/images/Inter-VariableFont_slnt%2Cwght.ttf") format("truetype");

	font-weight: normal;

	font-style: italic;

	font-display: swap;

}



@font-face {

	font-family: "Inter";

	src: url("https://learn.fastly.com/rs/025-XKO-469/images/Inter-Bold.ttf") format("truetype");

	font-weight: bold;

	font-style: normal;

	font-display: swap;

}

@font-face {
  font-family: "Lexia";
  src: url("https://learn.fastly.com/rs/025-XKO-469/images/Lexia_XBd.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}


/* Base styles */

body {
  color: #000000;
  color: var(--color-text);
  margin: 0;
  font: 12px/1.5 "Inter", sans-serif;
  font: var(--text-standard);
	font-family: "Inter", serif;

	font-weight: 300;

	color: #130d1f;

	font-size: 2rem;

	line-height: 1.625;

	margin: 0;
}

h1,
.h1 {
  font: bold 45.8px "Lexia", serif;
  color: #ffffff;
  color: var(--white);
}
h3,
.h3 {
  font: bold 29px "Inter", serif;
  font: var(--text-title3);
  color: #000000;
}

h2,
.h2 {
  font: bold 29px "Inter", serif;
  font: var(--text-title3);
  color: #000000;
}

h4 {
    margin-bottom: 7px;
}

h5,
.h5 {
  font: bold 20.2px "Inter", serif;
  font: var(--text-title5);
}

p {
  font: 16px/1.5 "Inter", sans-serif;
  /*font: var(--text-standard);*/
}

a {
  color: hsl(193, 100%, 32%);
  color: var(--color-link);
  text-decoration: none;
}

a:hover,
a:focus {
  color: hsl(193, 100%, 12%);
  color: var(--color-link-hover);
  text-decoration: underline;
}

img {
  max-width: 100%;
}

fieldset {
  border: none;
}

.u-no-leading-and-trailing-margins :first-child {
    margin-top: 0;
  }

.u-no-leading-and-trailing-margins :last-child {
    margin-bottom: 0;
  }

.hidden {
  display: none !important;
}

/* Buttons */

.button {
  display: inline-block;
  padding: 12px 25px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  background: var(--color-background);
  color: #000000;
  color: var(--color-text);
  text-align: center;
  cursor: pointer;
  border: none
}
.resourcebutton {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  background: #FFEBEB;
  color: #000000;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  border: none
}

.button:hover,
  .button:active {
    background: var(--color-background-hover);
    color: var(--color-text-hover);
    text-decoration: none;
  }

.button:focus {
    outline: none;
    box-shadow: 0 0 0 4px hsl(193, 100%, 45%);
    box-shadow: 0 0 0 4px var(--blue);
    color: #000000;
    color: var(--color-text);
    background: var(--color-background);
    text-decoration: none;
  }

.button--main {
  --color-background: var(--color-link);
  --color-text: var(--white);
  --color-background-hover: var(--blue);
  --color-text-hover: var(--white);
}
.button--white {
  --color-background: #ffffff;
  --color-text: #00759C;
  --color-background-hover: #ffffff;
  --color-text-hover: #00759C;
}

.button--blue {
  --color-background: #71D3EC;
  --color-text: #000000;
  --color-background-hover: #71D3EC;
  --color-text-hover: #000000;
}
.resourcebutton--main {
  --color-background: #FFEBEB;
  --color-text: #000000;
  --color-background-hover: #FFEBEB;
  --color-text-hover: #000000;
}

.button--secondary {
  --color-background: var(--white);
  --color-text: var(--color-link);
  --color-text-hover: var(--white);
  --color-background-hover: var(--blue);
}

.button--tertiary {
  --color-text: var(--color-link);
  --color-text-hover: var(--white);
  --color-background-hover: var(--blue);
  border: 1px solid hsl(193, 100%, 32%);
  border: 1px solid var(--color-link);
}

.button--lg {
  font: 14px "Inter", sans-serif;
  font: var(--text-lg);
}

.button--sm {
  font: 12px "Inter", sans-serif;
}

#optionalbutton {
  text-align:right;
}
#blueoptionalbutton {
  text-align:right;
}
#additionalresourcebutton,
#additionalresource2button,
#additionalresource3button
 {
  text-align:right;
}

#highlightresourcebutton {
  text-align:left;
}

#Quote {
    background-color:#E6F8FC;
    bgcolor:#E6F8FC;
}

.text-link::after {
    content: "";
    display: inline-block;
    width: 13px;
    height: 12px;
    -webkit-mask: url("https://learn.fastly.com/rs/025-XKO-469/images/arrow-icon.svg");
            mask: url("https://learn.fastly.com/rs/025-XKO-469/images/arrow-icon.svg");
    background-color: #00759C;
    background-color: #00759C;
    margin-left: 8px;
  }

.text-link--alt::after {
  background-color: #00759C;
}

.check-list {
  font-weight: standard;
  list-style: none;
  padding: 0
}

.check-list li {
    margin-bottom: 18px;
    padding-left: 48px;
    background: url("https://learn.fastly.com/rs/025-XKO-469/images/checkmark-icon.svg") no-repeat left top;
    background-size: 17px;
    font: 14px "Inter", serif;
  }

.check-list--alt {
  color: #ffffff;
}

.check-list--alt li {
    background: url("https://learn.fastly.com/rs/025-XKO-469/images/alt-checkmark-icon.svg") no-repeat left top;
  }

.header-intro .alt-img-responsive {
    width: 50%;
    float: left;
    margin-top: 12px;
}
.header-intro .alt-txt-responsive {
    width: 50%;
    float: right;
}
.header-introblue .alt-img-responsive {
    width: 50%;
    float: left;
    margin-top: 12px;
}
.header-introblue .alt-txt-responsive {
    width: 50%;
    float: right;
}

.right-video-section {
    text-align: right;
}

/* Grid */

.grid {
  display: grid;
  grid-gap: var(--gap);
  gap: var(--gap)
}

@media (max-width: 767px) {
    .mobile-hide {
    display: none;
    }
    .right-video-section {
    text-align: center;
}
}
@media (max-width: 767px) {
    #header1 .gap-xl {
    --gap: 16px;
    }
    .resource-Highlight .resource-with-image-section .container {
    display: grid;
    grid-gap: 16px;
    gap: 16px;
    }
}


@media (min-width: 544px) {

    .grid {
    grid-template-columns: repeat(var(--sm), minmax(0, 1fr))
    }
}

@media (min-width: 768px) {

.grid {
    grid-template-columns: repeat(var(--md), minmax(0, 1fr))
}
  }

@media (min-width: 992px) {

.grid {
    grid-template-columns: repeat(var(--md), minmax(0, 1fr));
    grid-template-columns: repeat(var(--lg, var(--md)), minmax(0, 1fr))
}
  }

@media (min-width: 1200px) {

.grid {
    grid-template-columns: repeat(var(--lg), var(--md), minmax(0, 1fr));
    grid-template-columns: repeat(var(--xl, var(--lg), var(--md)), minmax(0, 1fr))
}
  }

.gap-xl {
  --gap: 96px;
}

.gap-l {
  --gap: 64px;
}

.gap-md {
  --gap: 48px;
}

.gap-sm {
  --gap: 32px;
}

.gap-xs {
  --gap: 24px;
}

/* sections */

main > section {
  padding: 48px 12px;
}

.center-section--alt {
  padding: 12px 12px;
}


#SpeakerHeadlineSection,
.speaker-details1,
.speaker-details2,
.speaker-details3,
#RelatedResourcesHeadline {
  padding: 24px 12px;
}

.container {
  max-width: 1200px;
  max-width: var(--max-page-width);
  margin: 0 auto;
}

/* header */
#AltHeaderNoForm .content-container {
  max-width: 1200px;
  max-width: var(--max-page-width);
  margin: 0 auto;
}
#altheader {
}
.altheader {
  background: url("https://learn.fastly.com/rs/025-XKO-469/images/Light-gray-nimbus2.png") no-repeat center bottom;
  background-color: #E5E5E5;
  background-size: contain;
  color: #000000;
  padding: 48px 16px 12px
}

#AltHeaderNoFormBlue .content-container {
  max-width: 1200px;
  max-width: var(--max-page-width);
  margin: 0 auto;
}
#altheaderblue {
}

.altheaderblue {
  background: url("https://learn.fastly.com/rs/025-XKO-469/images/Light-gray-nimbus2.png") no-repeat center bottom;
  background-color: #182931;
  background-size: cover;
  color: #ffffff;
  padding: 48px 16px 12px
}

.headerwithform {
  background: #182931;
  color: #ffffff;
  padding: 48px 16px 12px
}

.headerwithformgrey {
  background: #E5E5E5;
  color: #000000;
  padding: 48px 16px 12px
}

#bottomFormsection {
  background-color:#FFFFFF;
  bgcolor:#FFFFFF;
  color: #000000;
  padding: 48px 16px 48px;
  margin-bottom: 96p
}

#bottomFormsection .container {
    grid-template-columns: 5fr 7fr;
    background: #E6F8FC;
    color: #000000;
    border-radius: 24px;
    padding: 24px;
    align-self: start;
}

#bottomFormdate-time time {
    color: #000000;
}

@media (max-width: 544px) {

.header {
    background-size: 50%
}
.altheader {
  background: url("https://learn.fastly.com/rs/025-XKO-469/images/Light-gray-nimbus2.png") no-repeat right bottom;
  background-color: #E5E5E5;
  background-size: contain;
}
.altheaderblue {
  background: url("https://learn.fastly.com/rs/025-XKO-469/images/Light-gray-nimbus2.png") no-repeat right bottom;
  background-color: #182931;
  background-size: contain;
}
}

.header p {
    font: 14px "Inter", sans-serif;
    font: var(--text-lg);
    max-width: 700px;
  }

.cta .button {
  margin: 0 0 24px
}

@media (min-width: 768px) {

.cta .button {
    margin: 24px 24px 0 0
}
  }

.fastly-logo {
  display: block;
  margin-bottom: 48px;
  height: 50px;
}
#altheader1logo .fastly-logo {
    margin-bottom: 12px;
}

.header-introgrey h1 {
  font: bold 45.8px "Lexia", serif;
  color: #000000;
}

.header-intro h2 {
    font: bold 18px "Inter", serif;
    font: var(--text-title5);
    color: #ffffff;
  }
.header-introgrey h2 {
    font: bold 18px "Inter", serif;
    font: var(--text-title5);
    color: #000000;
  }
.altheader-introblue h3 {
  font: bold 29px "Inter", serif;
  font: var(--text-title3);
  color: #ffffff;
}
.bottom-form h1 {
    font: bold 45.8px "Lexia", serif;
    color: #000000;
  }

.header-intro > div:first-child {
    border-bottom: .5px solid #ffffff;
  }
.header-introgrey > div:first-child {
    border-bottom: .5px solid #000000;
  }
#altheader1logo {
    border-bottom: none !important;
}
.bottom-form > div:first-child {
    border-bottom: none;
  }

.header-intro time {
    color: #ffffff;
    margin-right: 32px;
    padding-left: 24px;
    max-height: 24px;
    display: inline-block;
    font: 14px "Inter", serif;
  }
.header-introgrey time {
    color: #000000;
    margin-right: 32px;
    padding-left: 24px;
    max-height: 24px;
    display: inline-block;
    font: 14px "Inter", serif;
  }
.altheader-intro time {
    color: #000000;
    margin-right: 32px;
    padding-left: 24px;
    max-height: 24px;
    display: inline-block;
    font: 14px "Inter", serif;
  }
.altheader-introblue time {
    color: #ffffff;
    margin-right: 32px;
    padding-left: 24px;
    max-height: 24px;
    display: inline-block;
    font: 14px "Inter", serif;
  }

.header-intro .date {
    background: url("https://learn.fastly.com/rs/025-XKO-469/images/calendar-icon.svg") no-repeat left center;
  }

.header-intro .time {
    background: url("https://learn.fastly.com/rs/025-XKO-469/images/clock-icon.svg") no-repeat left center;
  }

.header-introgrey .date {
    background: url("https://learn.fastly.com/rs/025-XKO-469/images/calendar-icon.svg") no-repeat left center;
  }

.header-introgrey .time {
    background: url("https://learn.fastly.com/rs/025-XKO-469/images/clock-icon.svg") no-repeat left center;
  }
.altheader-intro .date {
    background: url("https://learn.fastly.com/rs/025-XKO-469/images/calendar-icon.svg") no-repeat left center;
  }

.altheader-intro .time {
    background: url("https://learn.fastly.com/rs/025-XKO-469/images/clock-icon.svg") no-repeat left center;
  }
.altheader-introblue .date {
    background: url("https://learn.fastly.com/rs/025-XKO-469/images/calendar-icon.svg") no-repeat left center;
  }

.altheader-introblue .time {
    background: url("https://learn.fastly.com/rs/025-XKO-469/images/clock-icon.svg") no-repeat left center;
  }
#bottomFormdate-time .date {
    background: url("https://learn.fastly.com/rs/025-XKO-469/images/calendar_blue%402x.png") no-repeat left center;
    background-size: 20px;
  }

#bottomFormdate-time .time {
    background: url("https://learn.fastly.com/rs/025-XKO-469/images/clock_blue%402x.png") no-repeat left center;
    background-size: 20px;
  }

.main-reservation {
  background: #ffffff;
  color: #000000;
  border-radius: 24px;
  padding: 24px;
  align-self: start
}

@media (min-width: 992px) {

.main-reservation {
    padding: 48px
}
  }

.main-reservation h2 {
    font: bold 20.2px "Inter", serif;
    font: var(--text-title5);
    text-align: center;
    color: #000000;
    width: auto !important;
  }

.main-reservation .mktoForm {
    width: auto !important; /* this is for the marketo inline style */
    margin-bottom: 0 !important
  }

.main-reservation .mktoForm .mktoHtmlText {
      width: auto !important;
    }

.main-reservation .mktoForm .mktoFieldWrap {
      float: none;
      display: flex;
      flex-direction: column;
    }

.main-reservation .mktoForm {

    /* This seems to be spacing only? */
  }

.main-reservation .mktoForm .mktoGutter {
      display: none;
    }

.main-reservation .mktoForm .mktoFormCol {
      float: none;
    }

.main-reservation .mktoForm .mktoLabel {
      float: none;
      color: #000000;
      width: 100% !important;
      display: flex;
    }

.main-reservation .mktoForm .mktoAsterix {
      order: 1;
    }

.main-reservation .mktoForm select.mktoField,
    .main-reservation .mktoForm input[type="text"],
    .main-reservation .mktoForm input[type="email"],
    .main-reservation .mktoForm input[type="tel"],
    .main-reservation .mktoForm input[type="phone"] {
      float: none;
      width: 100% !important; /* this is for the marketo inline style */
      line-height: 1.2;
      padding: 8px 16px;
      font-size: var(--text-md);
      border-radius: 8px;
      border: 1px solid #9b9b9b;
      border: 1px solid var(--grey);
      margin-bottom: 8px;
      height: auto;
    }

.main-reservation .mktoForm select.mktoField {
      padding: 8px;
    }

.main-reservation .mktoForm .mktoButtonRow {
      display: block
    }

.main-reservation .mktoForm .mktoButtonRow > * {
        margin: 0 !important;
        display: block;
        width: 100%;
      }

.main-reservation .mktoForm button.mktoButton {
      --color-background: var(--color-link);
      --color-text: var(--white);
      --color-background-hover: var(--blue);
      --color-text-hover: var(--white);
      display: inline-block;
      padding: 12px 25px;
      border-radius: 6px;
      font-size: 16px;
      font-weight: bold;
      text-decoration: none;
      background: var(--color-background);
      color: #000000;
      color: var(--color-text);
      text-align: center;
      cursor: pointer;
      border: none;
      width: 100%
    }

.main-reservation .mktoForm button.mktoButton:hover,
      .main-reservation .mktoForm button.mktoButton:active {
        background: var(--color-background-hover);
        color: var(--color-text-hover);
        text-decoration: none;
      }

.main-reservation .mktoForm button.mktoButton:focus {
        outline: none;
        box-shadow: 0 0 0 4px hsl(193, 100%, 45%);
        box-shadow: 0 0 0 4px var(--blue);
        color: #000000;
        color: var(--color-text);
        background: var(--color-background);
        text-decoration: none;
      }

.main-reservation {

  /* & form { */
  /*   display: flex; */
  /*   flex-direction: column; */
  /* } */

  /* & label:not(.checkbox-label) { */
  /*   clip: rect(1px, 1px, 1px, 1px); */
  /*   clip-path: inset(50%); */
  /*   height: 1px; */
  /*   width: 1px; */
  /*   margin: -1px; */
  /*   overflow: hidden; */
  /*   padding: 0; */
  /*   position: absolute; */
  /* } */

  /* & input[type="text"], */
  /* & input[type="email"], */
  /* & input[type="phone"] { */
  /*   line-height: 1.5; */
  /*   padding: 8px 16px; */
  /*   font-size: 20px; */
  /*   border-radius: 8px; */
  /*   border: 1px solid var(--grey); */
  /*   margin-bottom: 24px; */
  /* } */

  /* & input::placeholder { */
  /*   color: var(--grey); */
  /* } */
}

.main-reservation .optin {
    color: #767676;
    color: var(--grey-dark);
  }

.second-reservation {
  /*
  background: #ffffff;
  color: #000000;
  border-radius: 24px;
  padding: 24px;
  align-self: start
  */
}

@media (min-width: 992px) {

.second-reservation {
    padding: 48px
}
  }

.second-reservation h2 {
    font: bold 20.2px "Inter", serif;
    font: var(--text-title5);
    text-align: center;
    color: #000000;
    width: auto !important;
  }

.second-reservation .mktoForm {
    width: auto !important; /* this is for the marketo inline style */
    margin-bottom: 0 !important
  }

.second-reservation .mktoForm .mktoHtmlText {
      width: auto !important;
    }

.second-reservation .mktoForm .mktoFieldWrap {
      float: none;
      display: flex;
      flex-direction: column;
    }

.second-reservation .mktoForm {

    /* This seems to be spacing only? */
  }

.second-reservation .mktoForm .mktoGutter {
      display: none;
    }

.second-reservation .mktoForm .mktoFormCol {
      float: none;
    }

.second-reservation .mktoForm .mktoLabel {
      float: none;
      color: #000000;
      width: 100% !important;
      display: flex;
    }

.second-reservation .mktoForm .mktoAsterix {
      order: 1;
    }

.second-reservation .mktoForm select.mktoField,
    .main-reservation .mktoForm input[type="text"],
    .main-reservation .mktoForm input[type="email"],
    .main-reservation .mktoForm input[type="tel"],
    .main-reservation .mktoForm input[type="phone"] {
      float: none;
      width: 100% !important; /* this is for the marketo inline style */
      line-height: 1.2;
      padding: 8px 16px;
      font-size: var(--text-md);
      border-radius: 8px;
      border: 1px solid #9b9b9b;
      border: 1px solid var(--grey);
      margin-bottom: 8px;
      height: auto;
    }

.second-reservation .mktoForm select.mktoField {
      padding: 8px;
    }

.second-reservation .mktoForm .mktoButtonRow {
      display: block
    }

.second-reservation .mktoForm .mktoButtonRow > * {
        margin: 0 !important;
        display: block;
        width: 100%;
      }

.second-reservation .mktoForm button.mktoButton {
      --color-background: var(--color-link);
      --color-text: var(--white);
      --color-background-hover: var(--blue);
      --color-text-hover: var(--white);
      display: inline-block;
      padding: 12px 25px;
      border-radius: 6px;
      font-size: 16px;
      font-weight: bold;
      text-decoration: none;
      background: var(--color-background);
      color: #000000;
      color: var(--color-text);
      text-align: center;
      cursor: pointer;
      border: none;
      width: 100%
    }

.second-reservation .mktoForm button.mktoButton:hover,
      .main-reservation .mktoForm button.mktoButton:active {
        background: var(--color-background-hover);
        color: var(--color-text-hover);
        text-decoration: none;
      }

.second-reservation .mktoForm button.mktoButton:focus {
        outline: none;
        box-shadow: 0 0 0 4px hsl(193, 100%, 45%);
        box-shadow: 0 0 0 4px var(--blue);
        color: #000000;
        color: var(--color-text);
        background: var(--color-background);
        text-decoration: none;
      }

.second-reservation {

  /* & form { */
  /*   display: flex; */
  /*   flex-direction: column; */
  /* } */

  /* & label:not(.checkbox-label) { */
  /*   clip: rect(1px, 1px, 1px, 1px); */
  /*   clip-path: inset(50%); */
  /*   height: 1px; */
  /*   width: 1px; */
  /*   margin: -1px; */
  /*   overflow: hidden; */
  /*   padding: 0; */
  /*   position: absolute; */
  /* } */

  /* & input[type="text"], */
  /* & input[type="email"], */
  /* & input[type="phone"] { */
  /*   line-height: 1.5; */
  /*   padding: 8px 16px; */
  /*   font-size: 20px; */
  /*   border-radius: 8px; */
  /*   border: 1px solid var(--grey); */
  /*   margin-bottom: 24px; */
  /* } */

  /* & input::placeholder { */
  /*   color: var(--grey); */
  /* } */
}

.second-reservation .optin {
    color: #767676;
    color: var(--grey-dark);
  }

.event-details {
  background: #ffffff;
}
#SpeakerHeadlineSection.event-details,
#RelatedResourcesHeadline.related-resources,
#resourceHighlight.resource-with-image-section, 
#additionalresource1.resource-with-image-section {
  background: #ffffff;
}

#additionalresource1Headline p {
    line-height: 36px;
}

.event-intro {
  text-align: center;
  margin: 0 auto 24px;
  max-width: 800px
}
.resources-intro {
  text-align: center;
  margin: 32px auto 24px;
  max-width: 600px
}
.resources-intro h2 {
  font: 16.8px/1.5 "Inter", sans-serif;
  font-weight: bold;
}
.altheader-intro {
  text-align: center;
  margin: 0 auto 48px;
  max-width: 800px
}
.altheader-introblue {
  text-align: center;
  margin: 0 auto 48px;
  max-width: 800px
}


.altheader-intro .subhead {
    font: 18px "Inter", sans-serif;
    font: var(--text-xl);
    font-weight: bold;
  }
.altheader-introblue .subhead {
    font: 18px "Inter", sans-serif;
    font: var(--text-xl);
    font-weight: bold;
  }

.event-intro p {
    font: 14px "Inter", sans-serif;
    font: var(--text-lg);
  }
.altheader-intro p {
    font: 14px "Inter", sans-serif;
    font: var(--text-lg);
  }
.altheader-introblue p {
    font: 14px "Inter", sans-serif;
    font: var(--text-lg);
  }

.event-intro h2 {
    text-align: center;
    font: 24px "Inter", sans-serif;
  }

/* Speakers */

.speaker-list {
  list-style: none;
  padding: 0;
  /*text-align: center*/
}

.speaker-details3 .container {
  margin: 0 auto;
  max-width: 600px;
}

.speaker {
  background: #ffffff;
  background: var(--white);
  border-radius: 16px;
  padding: 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 24px;
  gap: 24px
}

.speaker :first-child {
    margin-top: 0;
  }

.speaker :last-child {
    margin-bottom: 0;
  }

.speaker__photo {
  max-width: 90px;
  max-height: 90px;
  border-radius: 90px;
}

.speaker-details p {
    color: #9b9b9b;
    text-align: left;
    margin-top: 5px;
    margin-bottom: 5px;
  }

.speaker__title {
  font: 16.8px/1.5 "Inter", sans-serif;
  font: var(--text-lg);
  font-weight: bold;
  text-align: left;
}

.speaker__logo {
  height: 30px;
  text-align: left;
}

/* Video section */

.video-section {
  max-width: 800px;
  margin: 0 auto;
  text-align: center
}

.video-section h2 {
    color: #000000;
    font: bold 24px "Inter", serif;
  }

.center-section .intro {
    margin: 32px auto 24px;
    max-width: 560px;
  }
.center-section .awards {
    margin: 32px auto 24px;
    max-width: 600px;
  }


.center-section .intro h2 {
  font: bold 22px "Inter", sans-serif;
  }

.header-logos {
    margin: 0 auto 20px;
    max-width: 600px;
  }
.altheader-logos {
    margin: 0 auto 20px;
    max-width: 300px;
  }


.center-section {

  background: #f2f2f2;
  text-align: center
}

.trusted-section {

  background: #ffffff;
  text-align: center
}

.center-section h3 {
    margin: 32px 0 16px;
  }

.center-section--alt {
  background: #e0dedf;
  color: #130d1f;
  /*color: var(--white)*/
}

.center-section--alt h2,
  .center-section--alt h3 {
    color: hsl(13, 78%, 86%);
    color: var(--pink);
  }

.center-section--alt a {
    color: #00759C;
 
  }

.resource-with-image-section {
  font: 20.2px/1.5 "Inter", sans-serif;
  padding-top: 48px;
  padding-bottom: 48px
}

.alt-form {
  font: 20.2px/1.5 "Inter", sans-serif;
  padding-top: 48px;
  padding-bottom: 48px
}

.resource-with-image-section h2 {
  font: bold 16.8px/1.5 "Inter", sans-serif;
  padding-top: 0;
  padding-bottom: 0
}
.alt-form h2 {
  font: bold 16.8px/1.5 "Inter", sans-serif;
  padding-top: 0;
  padding-bottom: 0
}

.resource-Highlight .container {
    background: #ffffff;
    color: #000000;
    border-radius: 12px;
    padding: 12px;
    align-self: start;
}
#resourcehighlightimage img {
    width: 100%;
    height: auto;
    max-height: none;
    margin: auto;
}

.alt-form .container {
    background: #E6F8FC;
    color: #000000;
    border-radius: 12px;
    padding: 12px;
    align-self: start;
}

.resource-with-image-section .container {
    display: grid;
    grid-gap: 48px;
    gap: 48px;
    grid-template-columns: 1fr;
    width: 800px;
  }
.alt-form .container {
    display: grid;
    grid-gap: 48px;
    gap: 48px;
    grid-template-columns: 1fr;
    width: 800px;
  }


@media (max-width: 767px){
.resource-with-image-section .container {
    width: auto;
  }
#additionalresource1.resource-with-image-section .container {
    gap: 12px;
}
#additionalresourcebutton {
  text-align:left;
}

.alt-form .container {
    width: auto;
  }
}

#additionalresource1 {
    padding-top: 5px;
    padding-bottom: 15px;
}

@media (min-width: 768px) {

.resource-with-image-section .container {
      grid-template-columns: 4fr 8fr;
}
#additionalresource1 .resource-with-image-section .container {
      grid-template-columns: 6fr 6fr;
}

.alt-form .container {
      grid-template-columns: 4fr 8fr;
  }
    
#fastlysigsci .container {
      grid-template-columns: 6fr 6fr;
  }
    
#fastlysigsciimage img {
    max-width: 100%;
    max-height: none;
    }

#fastlysigsci {
    margin: 96px auto 48px;
}

#additionalresource1 .container {
    grid-template-columns: 9fr 3fr;
    }

}

@media (max-width: 544px) {

.resource-with-image-section .image-section {
      margin: 0 -16px
  }
.header-logos {
    margin: 0 auto 20px;
    max-width: 100px;
  }
   }

.resource-with-image-section .image-section img {
      display: block;
      max-width: 250px;
      max-height: 150px;
      border-radius: 5px;
      margin: auto;
      }
}

.side-mounted-section > .container {
    display: grid;
    grid-gap: 96px;
    gap: 96px;
    grid-template-areas:
      "left"
      "right";
    grid-template-columns: 1fr
  }

@media (min-width: 992px) {

.side-mounted-section > .container {
      grid-template-areas: "left right";
      grid-template-columns: 5fr 7fr
  }
    }

@media (min-width: 992px) {

.side-mounted-section__left {
    padding-right: 96px;
    border-right: 1px solid #d8d8d8;
    border-right: 1px solid var(--grey-light)
}
  }

.side-mounted-section__left p {
    font: 16.8px/1.5 "Inter", sans-serif;
    font: var(--text-lg);
  }

/* Resources */

.resources-section {
  text-align: center;
  background: #f2f2f2;
}

.resources-section h2 {
  color: #000000;
  font-weight: bold;
  }

.resource {
  background: #ffffff;
  border-radius: 16px;
  padding: 32px;
}

.resource__title {
  font: 16.8px/1.5 "Inter", sans-serif;
  font: var(--text-lg);
  margin-top: 0;
}

.resource__download::after {
    content: "";
    display: inline-block;
    width: 13px;
    height: 12px;
    background: url("https://learn.fastly.com/rs/025-XKO-469/images/arrow-icon.svg") center no-repeat;
    transform: rotate(90deg);
    margin-left: 8px;
  }

.slim-text-section {
  text-align: center;
  margin: 0 auto;
  max-width: 600px
}

.slim-text-section p {
  font: 16px/1.5 "Inter", sans-serif;
    text-align: center;
  }
.slim-text-section p span {
  font: italic 16px "Arial", sans-serif;
  }

#QuoteName p {
    font-weight: bold;
}


#QuoteCopy.slim-text-section p {
    font-style: italic;
    font-size: 15px;
    text-align: center;
    margin: 0 auto 24px;
    max-width: 800px;
}

#QuoteName p,
#QuoteTitle p {
    font-style: italic;
    font-size: 15px;
    text-align: center;
    margin: 0 auto 6px;
    max-width: 800px;
}
#CenteredText2Headline p,
#CenteredText2Copy p,
#content3ctaheadline p {
    font-size: 16px;
    text-align: center;
    margin: 6px auto 6px;
    max-width: 800px;
}
#content3ctaaltimage1 .content p,
#content3ctaalt2b .content p,
#content3ctaalt3b .content p {
    margin-top: 0;
}

.slim-text-section li {
    margin-bottom: 24px;
  }

#contentVideo p {
    margin-bottom: 24px;
}
/* Alt form */

.alt-form {
  background: #000000;
  background: var(--purple);
  color: #ffffff;
  color: var(--white)
}

.alt-form h2 {
    font: bold bold 16.8px/1.3 "Inter", sans-serif;
    font: var(--text-title6);
    color: hsl(13, 78%, 86%);
    color: var(--pink);
    padding-bottom: 16px;
    border-bottom: 1px solid hsl(344, 56%, 45%);
    border-bottom: 1px solid var(--magenta);
    max-width: 390px;
    margin-left: auto;
    margin-right: auto;
  }

#fastlysigsciHeadline h2 {
    font-size: 15px;
}

#TrustedHeadline h5 {
    font-size: 10px;
    color: #7A848D;
}

.alt-form form {
    max-width: 390px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }

.alt-form .optin {
    color: #ffffff;
    color: var(--white);
  }

.alt-form input[type="text"],
  .alt-form input[type="email"],
  .alt-form input[type="phone"] {
    line-height: 1.5;
    padding: 8px 16px;
    font-size: 20px;
    border-radius: 8px;
    border: 1px solid #9b9b9b;
    border: 1px solid var(--grey);
    margin-bottom: 24px;
  }

.alt-form input::-moz-placeholder {
    color: #9b9b9b;
    color: var(--grey);
  }

.alt-form input:-ms-input-placeholder {
    color: #9b9b9b;
    color: var(--grey);
  }

.alt-form input::-ms-input-placeholder {
    color: #9b9b9b;
    color: var(--grey);
  }

.alt-form input::placeholder {
    color: #9b9b9b;
    color: var(--grey);
  }

.alt-form .mktoForm {
    width: auto !important; /* this is for the marketo inline style */
    margin-bottom: 0 !important
  }

.alt-form .mktoForm .mktoHtmlText {
      width: 100% !important;
    }

.alt-form .mktoForm .mktoFieldWrap {
      float: none;
      display: flex;
      flex-direction: column;
    }

.alt-form .mktoForm {

    /* This seems to be spacing only? */
  }

.alt-form .mktoForm .mktoGutter {
      display: none;
    }

.alt-form .mktoForm .mktoFormCol {
      float: none;
    }

.alt-form .mktoForm .mktoLabel {
      float: none;
      color: #ffffff;
      color: var(--white);
      width: 100% !important;
      display: flex;
    }

.alt-form .mktoForm .mktoAsterix {
      color: hsl(344, 56%, 45%);
      color: var(--magenta);
      order: 1;
    }

.alt-form .mktoForm select.mktoField,
    .alt-form .mktoForm input[type="text"],
    .alt-form .mktoForm input[type="email"],
    .alt-form .mktoForm input[type="tel"],
    .alt-form .mktoForm input[type="phone"] {
      float: none;
      width: 100% !important; /* this is for the marketo inline style */
      line-height: 1.2;
      padding: 8px 16px;
      font-size: var(--text-md);
      border-radius: 8px;
      border: 1px solid #9b9b9b;
      border: 1px solid var(--grey);
      margin-bottom: 8px;
      height: auto;
    }

.alt-form .mktoForm .mktoButtonRow {
      display: block
    }

.alt-form .mktoForm .mktoButtonRow > * {
        margin: 0 !important;
        display: block;
        width: 100%;
      }

.alt-form .mktoForm button.mktoButton {
      --color-background: var(--color-link);
      --color-text: var(--white);
      --color-background-hover: var(--blue);
      --color-text-hover: var(--white);
      display: inline-block;
      padding: 12px 25px;
      border-radius: 6px;
      font-size: 16px;
      font-weight: bold;
      text-decoration: none;
      background: var(--color-background);
      color: #000000;
      color: var(--color-text);
      text-align: center;
      cursor: pointer;
      border: none;
      width: 100%
    }

.alt-form .mktoForm button.mktoButton:hover,
      .alt-form .mktoForm button.mktoButton:active {
        background: var(--color-background-hover);
        color: var(--color-text-hover);
        text-decoration: none;
      }

.alt-form .mktoForm button.mktoButton:focus {
        outline: none;
        box-shadow: 0 0 0 4px hsl(193, 100%, 45%);
        box-shadow: 0 0 0 4px var(--blue);
        color: #000000;
        color: var(--color-text);
        background: var(--color-background);
        text-decoration: none;
      }

.footer {
  background: #F2F5F7;
  text-align: left;
  padding: 32px;
  font: 11.7px/1.5 "Inter", sans-serif;
  font: var(--text-small);
}

/* Cookie notice */

.notice--cookie,
.notice--cookie-ns {
  bottom: 0;
  position: fixed;
  width: 100%;
  z-index: 3;
  font-size: 14px;
  color: #ffffff;
  color: var(--white);
  background-color: #000000;
  padding: 10px 0
}

.notice--cookie p, .notice--cookie-ns p {
    margin: 0 10px 0 0;
    line-height: 1.6;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
  }

.notice--cookie a, .notice--cookie-ns a {
    color: #ffffff;
    color: var(--white);
    text-decoration: underline;
  }

.notice--cookie h5, .notice--cookie-ns h5 {
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    font-family: Inter, sans-serif;
    text-decoration: underline;
    margin: 4px 0 0
  }

.notice--cookie h5.expanded, .notice--cookie-ns h5.expanded {
      font: bold 20.2px "Inter", serif;
      font: var(--text-title5);
      margin-bottom: 16px;
    }

.notice--cookie .button, .notice--cookie-ns .button {
    border-radius: 8px;
    line-height: 2em;
    padding: 0 10px;
    text-align: center;
    text-decoration: none;
  }

.notice--cookie .row, .notice--cookie-ns .row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr minmax(120px, -webkit-max-content);
    grid-template-columns: 1fr minmax(120px, max-content);
    justify-content: center;
    align-content: center;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }

.notice--cookie.expanded .row, .notice--cookie-ns.expanded .row {
      grid-template-columns: 1fr
    }

.notice--cookie.expanded .row p, .notice--cookie-ns.expanded .row p {
        margin-bottom: 1em;
        font-size: 14px;
      }

.notice--cookie.expanded .row form h5, .notice--cookie-ns.expanded .row form h5 {
        position: relative;
        font-size: 1.25rem;
        margin-bottom: 1em;
        font-family: Inter, serif;
        font-weight: 700;
        left: 0;
      }

.notice--cookie.expanded .form-row, .notice--cookie-ns.expanded .form-row {
      display: grid;
      grid-template-columns: 20px 1fr
    }

.notice--cookie.expanded .form-row h5, .notice--cookie-ns.expanded .form-row h5 {
        margin-bottom: 1em;
      }

.notice--cookie.expanded .form-row h6, .notice--cookie-ns.expanded .form-row h6 {
        margin: 0;
        font: bold 20.2px "Inter", serif;
        font: var(--text-title5);
        font-size: 18px;
      }

.notice--cookie.expanded .form-row:first-of-type label, .notice--cookie-ns.expanded .form-row:first-of-type label {
        grid-column: 2;
      }

#notice--cookie p {
    font-size: 14px !important;
  }

#notice--cookie .section {
    position: relative;
    width: 100%;
  }

#notice--cookie .row {
    margin: 0 30px;
    max-width: 1140px
  }

@media (min-width: 992px) {

#notice--cookie .row {
      margin: 0 auto
  }
    }