/* Custom Fonts (forces them to download) */
@import url('https://fonts.googleapis.com/css2?family=Palanquin');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro');
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible');

.herofull {
   display: none;
}
.heromobile {
   display: inline;
}
@media(min-width: 1000px) {
   .heromobile {
       display: none;
   }
   .herofull {
      display: inline;
   }
}

.fellowslandingcarouselbuttonleft {
   position: absolute;
   top: 50%;
   left: 30px;
}
.fellowslandingcarouselbuttonright {
   position: absolute;
   top: 50%;
   right: 30px;
}
@media(max-width: 1065px) {
   .fellowslandingcarouselbuttonleft {
      top: 100%;
      left: 25%;
   }
   .fellowslandingcarouselbuttonright {
      top: 100%;
      right: 25%;
   }
}

.fellowcarouselbutton {
   background: #FFFFFF 0% 0% no-repeat padding-box;
   box-shadow: 0px 2px 4px #00000080;
   border-radius: 25px;
   opacity: 1;
   width: 50px !important;
}

.fellowheading {
   font-family: Palanquin;
   font-weight: bold;
   letter-spacing: 0px;
   line-height: 34px;
   font-size: 30px;
   color: var(--fontcolor);
}
.fellowtext {
   font-family: "Crimson Pro";
   font-size: 23px;
   line-height: 30px;
   color: var(--fontcolor);
}
.fellowtextbold {
   font-family: "Crimson Pro";
   font-weight: bold;
   font-size: 23px;
   line-height: 30px;
   color: var(--fontcolor);
}
.fellowlink {
   font-family: "Crimson Pro";
   font-weight: 600;
   font-size: 23px;
   line-height: 30px;
   text-decoration: underline;
   color: var(--bluelink);
}
.fellowhexheading {
   font-family: Palanquin;
   font-weight: bold;
   line-height: 28px;
   font-size: 24px;
   color: var(--fontcolor);
}

.fellowsearchheading {
   font-family: Palanquin;
   font-weight: bold;
   font-size: 28px;
   color: var(--white);
}
.fellowsearchtext {
   font-family: "Crimson Pro";
   font-weight: regular;
   font-size: 20px;
   color: var(--white);
}
.fellowsearchsectiondownload {
   width: 305px;
   margin-right: auto;
   display: inline-block;
   vertical-align: top;
   text-align: left;
   margin-top: -90px;
   margin-left: 50px;
}

@media(max-width: 1255px) {
   .fellowsearchsectiondownload {
      margin-top: 0px;
      margin-left: auto;
      width: 355px;
   }
}


.fellowssearchdiv {
   background: url(/static/images/fellows/fbg.png);
   padding-top: 45px;
   padding-bottom: 45px;
   margin-left: auto;
   margin-right: auto;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   width: 100%;
}

.fellowsearchsectiondiv {
   width: 275px;
   margin-left: auto;
   margin-right: auto;
   display: inline-block;
   vertical-align: top;
   text-align: left;
   font-family: "Atkinson Hyperlegible";
   font-weight: bold;
   text-transform: uppercase;
   font-size: 12px;
   line-height: 7px;
   color: var(--white);
}
.fellowsearchsectiondiv select, .fellowsearchsectiondiv input {
   margin-bottom: 35px;
}


.fellowinput {
   width: 90%;
   height: 34px;
   padding: 8px 8px;
   margin: 8px 0;
   display: inline-block;
   border: 1px solid #ccc;
   border-radius: 3px;
   color: var(--darkgrey);
   font-size: 14px;
   box-sizing: border-box;
}
.fellowinput::placeholder {
   color: var(--darkgrey);
}
.fellowinput::disabled {
   color: var(--darkgrey);
}

.filterdef {
   font-family: "Palanquin";
   font-size: 16px;
   cursor: pointer;
}
.filterdefbr {
   display: inline;
}
@media(min-width: 900px) {
   .filterdef {
       margin-left: 200px;
   }
   .filterdefbr {
      display: none;
   }
}

.filterdef:after {
   font-family: "Atkinson Hyperlegible";
   font-weight: bold;
   color: var(--white);
   content: '?';
   display: inline-block;
   text-align: center;
   width: 1.8ex;
   height: 1.8ex;
   font-size: 2ex;
   line-height: 2.1ex;
   border-radius: 2ex;
   padding: 4px;
   border: 1px solid white;
}
.fellowssearchreset {
   font-family: "Palanquin";
   font-size: 16px;
   font-weight: normal;       /* semi-bold;*/
   text-transform: none;
   cursor: pointer;
   color: white;
   line-height: 40px;
}

.fellowhex {
   stroke: var(--violet);
   stroke-width: 4;
   fill: var(--lightgrey);
}
.fellowhexnofill {
   stroke: var(--violet);
   stroke-width: 5;
   cursor: pointer;
}
.fellowhexnofillhover {
   stroke: var(--fontred);
   stroke-width: 5;
   filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
   cursor: pointer;
}
.fellowhexnovalue {
   stroke: var(--lavender);
   fill: var(--lavender);
   stroke-width: 5;
}

.fellowhexnofill2 {
   stroke: var(--violet);
   stroke-width: 4;
}
.fellowhexnofill2red {
   stroke: var(--fontred);
   stroke-width: 4;
}
.fellowhexnofill2light {
   stroke: var(--lavender);
   stroke-width: 4;
}



.fellowhexnofillhover2 {
   stroke: var(--fontred);
   stroke-width: 4;
   filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
   cursor: pointer;
}

.fellowsearchresultsheading {
   font-family: Palanquin;
   font-weight: bold;
   font-size: 28px;
   line-height: 34px;
   color: var(--fontcolor);
}
.fellowsearchresultstext {
   font-family: "Crimson Pro";
   font-weight: regular;
   font-size: 21px;
   line-height: 28px;
   color: var(--fontcolor);
}


/* List and Grid Results */
.fellowsresultlisttable {
   font-family: Palanquin;
   width: 100%;
   background-color: var(--pebble);
   border-left: 15px white solid;
   border-right: 15px white solid;
}
.fellowsresultlisttable td {
   border-bottom: 1px white solid;
   vertical-align: middle;
   padding-left: 15px;
   cursor: pointer;
   font-size: 18px;
   line-height: 22px;
}

.fellowsresulticondivtable {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   align-items: stretch;
   margin-left: auto;
   margin-right: auto;
   max-width: 1200px;
   padding-left: 15px;
   justify-content: center;
}
.fellowsresulticondivtext {
   background-color: var(--pebble);
   color: var(--fontcolor);
   padding-left: 15px;
   padding-top: 15px;
   padding-bottom: 15px;
   font-family: Palanquin;
   font-size: 16px;
   line-height: 20px;
   width: 255px !important;
   text-decoration: none;
   box-sizing: content-box !important;    /* NOTE: This is required order else the global media changes screw things up */
}
.fellowsresulticondivtable img {
   width: 270px;
   height: 270px;
}

.gridtextinitials {
   font-family: Palanquin;
   font-weight: bold;
   background-color: #E0D0CAA6;
   color: var(--gridinitials);
   font-size: 21px;
   line-height: 38px;
}

.gridtextname {
   font-family: Palanquin;
   font-weight: 600;
   font-size: 18px;
   line-height: 22px;
}
.gridtextawarded {
   font-family: Palanquin;
   font-weight: 500;
   font-size: 16px;
   line-height: 20px;
}

.fellowsresulticondivtable a {
   margin-top: 15px;
   margin-right: 15px;
   text-decoration: none;
}
.gridicondivinitials {
   font-family: Palanquin;
   font-weight: bold;
   font-size: 28px;
   background-color: var(--tan);
   color: var(--gridinitials);
   width: 270px;
   height: 150px;
   text-align: center;
   padding-top: 120px;
   box-sizing: content-box !important; /* NOTE: This is required order else the global media changes screw things up */
}
.gridicondivimage {
   width: 270px;
   height: 270px;
}


/* Modals */
/* The Modal (background) */
.macmodal {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 9999; /* Sit on top */
   padding-top: 150px; /* Location of the box */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */
   background-color: rgb(0,0,0); /* Fallback color */
   background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
 }

 /* Modal Content */
 .macmodal-hexagon-div {
   margin: auto;
   width: 400px;
   padding-left: 200px;
   box-sizing: content-box !important; /* NOTE: This is required order else the global media changes screw things up */
 }
 .macmodal-hexagon {
   width: 200px;
   height: 200px;
   stroke: 10px white;
 }
 .macmodal-content {
   background-color: white;
   margin: auto;
   margin-top: -90px;
   padding: 20px;
   border: 5px solid white;
   border-radius: 5px;
   width: 400px;
   height: 380px;
   box-sizing: content-box !important; /* NOTE: This is required order else the global media changes screw things up */
   font-size: 13px !important;
 }
 .closemodal {
   color: var(--btn_bo_dark);
   float: right;
   font-size: 50px;
   margin-top: -20px;
 }
 .closemodal:hover,
 .closemodal:focus {
   color: #000;
   text-decoration: none;
   cursor: pointer;
 }
 .macmodalname {
   font-family: Palanquin;
   font-weight: bold;
   font-size: 21px;
   line-height: 28px;
}
.macmodalyearlabel {
   font-family: Palanquin;
   font-weight: 600;
   font-size: 16px;
   line-height: 20px;
}
.macmodalyear {
   font-family: Palanquin;
   font-weight: 500;
   font-size: 16px;
   line-height: 20px;
}
.macmodaltext {
   font-family: "Crimson Pro";
   font-size: 20px;
   line-height: 28px;
}
.macmodalfilterdeftitle {
   font-family: Palanquin;
   font-weight: bold;
   font-size: 21px;
   line-height: 28px;
}
.macmodalfilterdefheading {
   font-family: Palanquin;
   font-weight: bold;
   font-size: 18px;
   line-height: 24px;
}
.macmodalfiltertext {
   font-family: "Crimson Pro";
   font-size: 20px;
   line-height: 24px;
}


/* Hexagons */
.hexnamelabel {
   font-family: Palanquin;
   font-weight: 600;
   font-size: 16px;
}
.hexnamelabel12 {
   font-family: Palanquin;
   font-weight: 600;
   font-size: 12px;
}
.hexinitials {
   font-family: Palanquin;
   font-weight: bold;
   font-size: 21px;
   stroke: #0F0F0F;
   text-align: center;
   cursor: pointer;
}

/* Buttons */
button {
   font-family: "Atkinson Hyperlegible";
   font-weight: bold;
   font-size: 14px;
   text-decoration: none;
   text-transform: uppercase;
   background: #FFFFFF 0% 0% no-repeat padding-box;
   border: 2px solid #0468B1;
   opacity: 1;
   height: 40px;
   line-height: 16px;
   letter-spacing: 1px;
}
/* Attempting animation * /
https://codepen.io/tyberiu88/pen/YgJGMX
https://codepen.io/kjbrum/pen/wBBLXx
button:after {
   content: "";
   position: absolute;
   width: 0px;
   height: 0px;
   top: 50%;
   left: 50%;
   top: var(--mouse-y);
   left: var(--mouse-x);
   transform-style: flat;
   transform: translate3d(-50%,-50%,0);
   background: rgba(white,.1);
   border-radius: 100%;
   transition: width .3s ease, height .3s ease;
 }
 button:focus, button:hover {
     background: darken(#FC6E51,7%);
 }
 button:active:after {
     width: 200px;
     height: 200px;
   }
/*

/* Blue Buttons
   bf = Blue Fill
   bo = Blue Outlined */
   .bf {
      color: var(--white);
      border-color: var(--btn_bf_light);
      background-color: var(--btn_bf_light);
      height: 40px;
      padding-left: 20px;
      padding-right: 20px;
      margin-left: 1px;
      margin-right: 1px;
      align-items: center;
      border-radius: 21px;
   }
   .bf:hover {
      background-color: var(--btn_bf_dark);
   }
   .bf:focus {
      border-color: var(--btn_bf_dark);
      outline: none !important;
   }
   .bf:active {
      background-color: var(--btn_bf_dark);
   }
   .bf:disabled {
      border-color: var(--btn_bf_disabled);
      background-color: var(--btn_bf_disabled);
   }
/*
   .bo {
      color: var(--btn_bo_dark);
      border-color: var(--btn_bo_dark);
      background-color: var(--white);
      height: 40px;
      padding-left: 20px;
      padding-right: 20px;
      margin-left: 1px;
      margin-right: 1px;
      margin-top: 2px;
   }
   .bo:hover {
      background-color: var(--btn_bo_light);
   }
   .bo:focus {
      border: 3px solid;      /* TODO: This border change 'moves' the button * /
      margin-left: 0px;
      margin-right: 0px;
      margin-top: 0px;
      background-color: var(--btn_bo_light);
   }
   .bo:active {
      /* TODO: Fill effect * /
      background-color: var(--btn_bo_light);
   }
   .bo:disabled {
      border-color: var(--btn_bo_disabled);
      color: var(--btn_bo_disabled);
      background-color: var(--white);
   }
*/

   .boleft, .boright {
      background-repeat: no-repeat;
      color: var(--btn_bo_dark);
      border-color: var(--btn_bo_dark);
      background-color: var(--white);
      border-radius: 21px;
   }
   .boleft {
      background-image: url(/static/images/fellows/ic_left_arrow_blue.svg);
      background-position: left 10px center;
      padding-left: 40px;
      padding-right: 20px;
   }
   .boright {
      background-image: url(/static/images/fellows/ic_right_arrow_blue.svg);
      background-position: right 10px center;
      padding-left: 15px;
      padding-right: 35px;
   }
   .boleft:hover, .boright:hover {
      background-color: var(--btn_bo_dark);
      color: var(--white);
   }
   .boleft:hover {
      background-image: url(/static/images/fellows/ic_left_arrow_white.svg);
   }
   .boright:hover {
      background-image: url(/static/images/fellows/ic_right_arrow_white.svg);
   }
   /*
   .boleft:focus, .boright:focus {
      border: 2px solid;      /* TODO: This border change 'moves' the button * /
      margin-left: 0px;
      margin-right: 0px;
      margin-top: 0px;
      background-color: var(--btn_bo_light);
   }
   .boleft:active, .boright:active {
      /* TODO: Fill effect * /
      background-color: var(--btn_bo_light);
   }
   */


/* White Buttons
   wf = Green Fill
   wo = White Outlined * /
.wf {
   color: var(--black);
   border-color: var(--white);
   background-color: var(--white);
}
.wf:hover {
   border-color: var(--btn_wf_light);
   background-color: var(--btn_wf_light);
}
.wf:focus {
   border-color: var(--btn_wf_dark);
   outline: none !important;
}
.wf:active {
   /* TODO: Fill effect * /
   background-color: var(--btn_wf_light);
}
.wf:disabled {
   opacity: 0.3;
   background-color: var(--white);
}

.wo {
   color: var(--white);
   border-color: var(--white);
   background-color: transparent;
}
.wo:hover {
   background-color: var(--white);
   color: var(--black);
   border-color: var(--black);
   opacity: 0.4;
}
.wo:focus {
   outline: none !important;
   border: 0.22em solid;      /* TODO: This border change 'moves' the button * /
}
.wo:active {
   /* TODO: Fill effect * /
   background-color: var(--shell);
}
.wo:disabled {
   background-color: transparent;
   opacity: 0.3;
   color: var(--white);
   border-color: var(--white);
}
*/
.woright {
   background-image: url(/static/images/fellows/ic_right_arrow_white.svg);
   background-repeat: no-repeat;
   background-position: right 10px center;
   color: var(--white);
   border-color: var(--white);
   background-color: transparent;
   padding-left: 15px;
   padding-right: 35px;
   border-radius: 21px;
}
.woright:hover {
   background-color: rgba(255, 255, 255, 0.3);
}


/* Input Controls */
.radio {
   color: #FFFFFF;
   font-family: Palanquin;
   font-size: 16px;
   font-weight: 500;
   letter-spacing: 0;
   padding-top: 20px;
   padding-bottom: 20px;
 }
 .radio input[type=radio] {
   position: absolute;
   opacity: 0;
 }
 .radio input[type=radio] + .fellowsrb:before {
   content: "";
   margin-right: 10px;
   background: transparent;
   border-radius: 100%;
   border: 3px solid white;
   display: inline-block;
   width: 16px;
   height: 16px;
   position: relative;
   vertical-align: top;
   cursor: pointer;
   text-align: center;
 }
 .radio input[type=radio]:checked + .fellowsrb:before {
   background: white;
   box-shadow: inset 0 0 0 2px var(--deeppurple);
 }
 .radio input[type=radio]:checked + .fellowsrb {
    font-weight: bold;
 }
 .fellowsrb:hover {
   text-decoration: underline;
 }






/* Color Variables */
/* TODO: Create variables for things like buttons, etc... */
:root {
   /* Fellows Specific from v1 */
   --white: #ffffff;
   --headerbackground: #f2eceb;
   --fontcolor: #161413;
   --fontred: #c12b61;
   --grayline: #ada7a5;
   --bluelink: #0468b1;
   --greenlink: #6dd400;
   --hexpurple: #571c79;
   --gridinitials: #654e49;

   /* Primary */
   --macblue: #0468b1;
   --sea: #1f7ea3;
   --wave: #005592;
   --macgreen: #048543;
   --spring: #299b5b;
   --forest: #007a6a;

   /* Just */
   --black: #161413;
   --darkgrey: #3f3c3c;
   --middlegrey: #777372;
   --lightgrey: #ada7a5;
   --pebble: #f2eceb;
   --white: #ffffff;
   --deepbrown: #24100b;
   --warmbrown: #39231d;
   --lightbrown: #6d5247;
   --sand: #a78f88;
   --tan: #e0d0cb;
   --shell: #eee8ed;

   /* Peaceful */
   --deeppurple: #39214d;
   --violet: #571c79;
   --lavender: #896eba;
   --sky: #85c8de;
   --lake: #337fa0;
   --twilight: #0f2b4c;

   /* Verdant */
   --deepteal: #004447;
   --mediumteal: #296663;
   --teal: #49a59c;
   --sweetpea: #91be5b;
   --emerald: #126037;
   --moss: #003d1a;

   /* Visionary */
   --magenta: #720c3f;
   --deeppink: #aa0e54;
   --brightpink: #c12b61;
   --orange: #d9583e;
   --deeporange: #b22f0e;
   --red: #aa0e20;

   /* Button Colors */
   --btn_bf_light: var(--macblue);
   --btn_bf_dark: var(--wave);
   --btn_bf_disabled: #CCCCCC;
   --btn_bo_light: var(--#E5EFF7);  /* TODO: This seems light... Revalidate */
   --btn_bo_dark: var(--macblue);
   --btn_bo_disabled: #CCCCCC;

   --btn_gf_light: var(--macgreen);
   --btn_gf_dark: var(--emerald);
   --btn_gf_disabled: #CCCCCC;
   --btn_go_light: var(--#E5F2EC);  /* TODO: This seems light... Revalidate */
   --btn_go_dark: var(--macgreen);
   --btn_go_disabled: #CCCCCC;

   --btn_wf_light: #F2F2F2;         /* TODO: This seems light... Revalidate */
   --btn_wf_dark: #CCCCCC;          /* TODO: This seems light... Revalidate */
   --btn_wo_light: var(--#E5F2EC);
   --btn_wo_dark: var(--macgreen);
}

@media(max-width: 1100px) {
   .fellows3x2break {
      display: none;
   }
}