/******************************************************
**************** FONT DIRECTIVES  *********************
******************************************************/

@font-face {
    font-family: 'open_sansextrabold_italic';
    src: url('./fonts/opensans-extrabolditalic-webfont.woff') format('woff2'),
       url('./fonts/opensans-extrabolditalic-webfont.woff2') format('woff');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'open_sansextrabold';
    src: url('./fonts/opensans-extrabold-webfont.woff') format('woff2'),
       url('./fonts/opensans-extrabold-webfont.woff2') format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansbold_italic';
    src: url('./fonts/opensans-bolditalic-webfont.woff') format('woff2'),
       url('./fonts/opensans-bolditalic-webfont.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'open_sansbold';
    src: url('./fonts/opensans/opensans-bold-webfont.woff') format('woff2'),
       url('./fonts/opensans/opensans-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'open_sanssemibold';
    src: url('./fonts/opensans/opensans-semibold-webfont.woff2') format('woff2'),
       url('./fonts/opensans/opensans-semibold-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'open_sanssemibold_italic';
    src: url('./fonts/opensans/opensans-semibolditalic-webfont.woff2') format('woff2'),
       url('./fonts/opensans/opensans-semibolditalic-webfont.woff') format('woff');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'open_sansregular';
    src: url('./fonts/opensans/opensans-regular-webfont.woff2') format('woff2'),
       url('./fonts/opensans/opensans-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansitalic';
    src: url('./fonts/opensans/opensans-regular-webfont.woff2') format('woff2'),
       url('./fonts/opensans/opensans-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'open_sanslight_italic';
    src: url('./fonts/opensans/opensans-lightitalic-webfont.woff2') format('woff2'),
       url('./fonts/opensans/opensans-lightitalic-webfont.woff') format('woff');
    font-weight: 300;
    font-style: italic
}

@font-face {
    font-family: 'open_sanslight';
    src: url('./fonts/opensans/opensans-light-webfont.woff2') format('woff2'),
       url('./fonts/opensans/opensans-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}




@font-face {
    font-family: 'robotoblack';
    src: url('./fonts/roboto/roboto-black-webfont.woff2') format('woff2'),
         url('./fonts/roboto/roboto-black-webfont.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'robotoblack_italic';
    src: url('./fonts/roboto/roboto-blackitalic-webfont.woff2') format('woff2'),
         url('./fonts/roboto/roboto-blackitalic-webfont.woff') format('woff');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'robotobold';
    src: url('./fonts/roboto/roboto-bold-webfont.woff2') format('woff2'),
         url('./fonts/roboto/roboto-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'robotobold_italic';
    src: url('./fonts/roboto/roboto-bolditalic-webfont.woff2') format('woff2'),
         url('./fonts/roboto/roboto-bolditalic-webfont.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'robotomedium';
    src: url('./fonts/roboto/roboto-medium-webfont.woff2') format('woff2'),
         url('./fonts/roboto/roboto-medium-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'robotomedium_italic';
    src: url('./fonts/roboto/roboto-mediumitalic-webfont.woff2') format('woff2'),
         url('./fonts/roboto/roboto-mediumitalic-webfont.woff') format('woff');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'robotoregular';
    src: url('./fonts/roboto/roboto-regular-webfont.woff2') format('woff2'),
         url('./fonts/roboto/roboto-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'robotoitalic';
    src: url('./fonts/roboto/roboto-italic-webfont.woff2') format('woff2'),
         url('./fonts/roboto/roboto-italic-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'robotolight';
    src: url('./fonts/roboto/roboto-light-webfont.woff2') format('woff2'),
         url('./fonts/roboto/roboto-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'robotolight_italic';
    src: url('./fonts/roboto/roboto-lightitalic-webfont.woff2') format('woff2'),
         url('./fonts/roboto/roboto-lightitalic-webfont.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'robotothin';
    src: url('./fonts/roboto/roboto-thin-webfont.woff2') format('woff2'),
         url('./fonts/roboto/roboto-thin-webfont.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'robotothin_italic';
    src: url('./fonts/roboto/roboto-thinitalic-webfont.woff2') format('woff2'),
         url('./fonts/roboto/roboto-thinitalic-webfont.woff') format('woff');
    font-weight: 200;
    font-style: italic;
}

/* Some custom variables applied globally through the site. */
:root{
  --burgundy: #AD1938;  /* Major site color. */
  --blue: #0000FF;    /* Minor site color. */
  --navy: #000080;    /* Minor site color. */
  --gold: #FFB048;    /* Minor site color. */
  --greytext: #292F33;  /* Default text color */
  --straw: #FFFF99;   /* Hover glow */
  --lilac: #C8A2C8;   /* Lilac */
  --turq: #1AACF4;    /* Heavy turquoise */
}

::placeholder {
   text-align: left;
   color: white;
   font-size: 1.5rem;
}

html {
  box-sizing: border-box;   /* Keeps borders inside the element bounds. */
  font-size: 62.5%;     /* Allows 1 rem = 10px in child and nested elements */
}

*, *:before, *:after {
  box-sizing: inherit;
}

:placeholder {
  color:  white;
}

h1{
  font-size: 2.0rem;
}

body{
  background-position: center center;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  color: var(--greytext);
  font-family: Open Sans;
  font-size: 1.4rem;
  background-color: white;
  height: 100vh;
}

.page-cont {
  display:  block;
}

/* Container class for header, article, footer - infinite width, content centered. */
.cont{
  margin: 0 2.5%;
  text-align: center;
  width: 95%;
  height: auto;
  background-color: #FFFFFF;
}

header{
  display: inline-block;
  margin: 0% 2.5%;
  width: 95%;
  height: auto;
  text-align: left;
}

.logodiv{
  display: block;
  width: 15%;
  float: left;
  height: auto;
}

.logo{
  float: left;
  width: 100%;
  height: auto;
}

nav{
  float: right; /****** WATCH ******/
  overflow: hidden;
  width: 85%;
  margin-top: 30px;
  height: 90px;
}

.navbar {
  display: flex;
  width: 100%;
  height: 30px;
  margin-left: 15%;
  padding: 0%;
  list-style-type: none;
  flex-flow: row wrap;
  flex: 0 1 auto;
  justify-content: space-between;
  align-content: flex-start;
  align-items: flex-start;
}

nav li{
  position: relative;
  height: 30px;
  width: auto;
  margin: 0;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
  color: var(--navy);
  cursor: pointer;
  font-size: 1.6rem;
}

nav li:hover::after{
    width: 100%;
    height: 2px;
    opacity: 1;
    transform: translateY(0px);
}

nav li::after{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
    content: '';
    height: 0px;
    width: 0;
    background-color: var(--navy);
    opacity: 0;
    transition: height 0.9s, opacity 0.9s, width 0.9s, transform 0.9s;
    transform: translateY(-10px);
}

nav a{
    outline: 0;
  text-decoration: none;
}

nav a:link {
  /** Closes registration/login modal */
  color: var(--blue);
  text-decoration: none;
}
nav a:visited {
  color: var(--blue);
  text-decoration: none;
}
nav a:hover {
  color: var(--blue);
  text-decoration: none;
}
nav a:active {
  color: var(--blue);
  text-decoration: none;
}

.point:not(.logodiv){
  border-bottom: solid 2.0px var(--navy);
}

section{
  margin-top: 30px;
}

.home-cont {
  display: inline-block;
  margin: 0% auto;
  width: 95%;
  height: auto;
  text-align: center;
}

.reg-login-modal {
  display: none;
  width: 100%;
  height: 100vh;
  text-align: center;
  background: #FFFFFF; 
  margin: 15% auto;
  /*! margin-top: 200px; */
}

/* Modal Content */
.modal-content {
  display: inline-block;
  background-color: #7D1AF4;
  margin: 0 2.5% 0 2.5%;
  padding: 20px 20px 20px 20px;
  border-radius: 20px;
  height: auto;
  width: 40%;
}

.modal-head {
  color: white;
  margin-bottom: 30px;
  font-family: Roboto;
  font-weight: 800;
  letter-spacing: 1px;
  font-size: 3rem;
}

.modal-entries {
  display: block;
  float: left;
  width: 90%;
  padding: 0 10px;
  text-align: center;
  margin-bottom: 15px;
}

.modal-input-span {
  width: 100%;
  display: inline-block;
  text-align: left;
}

.label {
  color: white;
  font-size: 1.3rem;
  display: inline-block;
  width: 100%;
}

.modal-input-span:hover > .label {
  color: cyan;
}

.modal-input-span:hover > input:not(.submit, .err) {
  border-bottom: 1px solid cyan;
}

.modal-close {
  color: #FFFFFF;
  width: 5%;
  margin: 0;
  padding: 0;
  font-size: 4rem;
  font-weight: bold;
  background-color: transparent;
  outline: none;
  border: none;
}

.modal-close:hover,
.modal-close:focus {
  color: #e8d5d5;
  text-decoration: none;
  cursor: default;
}

input {
  margin: 0;
  padding: 0;
  width: 70%;
  height: 40px;
  border: none;
  background-color: #7D1AF4;
  outline: none;
  text-align: center;
  border-bottom: 1px solid white;
  float: left;
  color: white;
  font-size: 1.6rem;
}


.err {
  border: none;
  background-color: #7D1AF4;
  color: #FF0000;
}

.err:hover {
  background-color: #7D1AF4;
}

.errchk {
  float: right;
  background-color: white;
  width: 10%;
  height: 40px;
  margin: 0 5px;
  padding: 0;
  border-radius: 8px;
  font-size: 2.2rem;
  font-weight:  800;
  outline: none;
  border: none;
}

button {
  outline: none;
  background-color: white;
  border-radius: 3px;
}

.show-hide-pw {
  position: relative;
  width: 12%;
  margin-left: 7px;
  height: 36px;
  border: none;
  background-color: transparent;
  color: #FFFFFF;
  font-size: 2em;
  outline: none;
}

.show-hide-pw:hover {
  color: #e8d5d5;
}

.submit-span {
  margin: 20px auto 0 auto;
  width: 100%;
  height: auto;
}


.submit {
  margin: auto;
  height: 45px;
  width: 25%;
  color: white;
  font-size: 2.0rem;
  font-weight: 600;
  background-color: #a538f0;
  letter-spacing: 1.25px;
  font-family: Roboto;
  border-radius: 22px;
  outline: none;
  border: none;
  font-weight: 800;
}

.submit:hover {
    background-color: #CA56FF;
}

.submiterr {
    margin: 1em auto;
    height: auto;
    font-size: 1.3rem;
    width: 100%;
    background-color: #7d1af4;
    border: none;
    resize: none;
}

.home-blurb {
  float: left;
  text-align: left;
  margin-left: 0%;
  width: 48%;
  line-height: 2.0;
}

.image-section {
  float: right;
  width: 48%;
  margin-right: 0%;
  height: auto;
}

.coder-img {
  width: 100%;
  height: auto;
}