/* temp tests */
/* body p, body h1, body h2, body h3, body h4 {
    text-align: left !important;
}
 */



/* So animations are cropped by their articles */
.article {
  overflow: hidden;
}





@keyframes HoverTopicLink {
    from {
        /* TODO: Figure out how to not define starting point */
        background-color: rgba(0,109,173,0);
    };
    to {
        background-color: rgba(0,109,173,.6);
    };
}

@keyframes LeaveTopicLink {
    from {
        /* TODO: Figure out how to not define starting point */
        background-color: rgba(0,109,173,.6);
    };
    to {
        background-color: rgba(0,109,173,0);
    };
}

.article-style-6 .links-item-container {
    animation-name: LeaveTopicLink;
    animation-timing-function: ease-in-out;
    animation-duration: 0.2s;
    background-color: rgba(0,109,173,0);
}
.article-style-6 .links-item-container:hover {
    animation-name: HoverTopicLink;
    animation-timing-function: ease-in-out;
    animation-duration: 0.2s;
    background-color: rgba(0,109,173,.6);
}
.article-style-6 .links-item-container:active {
    background-color: rgba(0,159,217,.6);
}



.article-is-locked {
  display: none;
}


.gif-inner {
  width: 50%;
  margin: 0 auto;
}

/* .component-left .graphic-widget, */
.article-style-6 .component-right .graphic-widget {
  width: 50%;
  margin: 0 auto;
}

/* shift left column icon component to hug the right component like a dot point */
.component-left.icon-component .icon-component-icon {
  /* push off from the left a little when on mobile 9 becuase text drops down and is left aligned */
    /* margin: 0 0 0 0; */
  }
@media (min-width: 761px) {
  /* .component-left.icon-component .icon-component-icon {
    margin: 0 0 0 auto;
  } */
}



/* media carousel styling - Should be doable in Evolve */
.media-carousel-item-title {
    font-size: 30px !important;
    /* font-family: 'Times New Roman'; */ !important;
    font-weight: 700 !important;
    /* text-align: center !important; */
    margin-bottom: 10px !important;
}
.media-carousel-item-body {
  font-size: 18px !important;
  line-height: 1.5em !important;
}

/* remove box shadow so lines don't show up - should be doable in Evolve */
.article {
  box-shadow: none !important;
}


/* add parallax to full width & spread articles */
.article-style-6 {
  /* background-attachment: fixed; */
}
/* turn off for tablets */
/* @media only screen and (max-device-width: 1366px) {
    .article-style-6 {
        background-attachment: scroll;
    }
} */




/* mobile specific changes */
@media (max-width: 760px) {
    /* Make graphic images smaller on mobile */
    .graphic-component .graphic-widget img {
        max-width: 200px;
    }
  
    /* exclude any in the narrow-big images allowed style */
    .article-style-1 .graphic-component .graphic-widget img,
  /* exclude any in the solid blue article style (as that's used for progress bar in footer) */
    .article-style-9 .graphic-component .graphic-widget img,
    .article-style-10 .graphic-component .graphic-widget img
    {
      /* REMOVE IF ABOVE EDIt ISN'T INCLUDED */
        max-width: 100%;/*auto;*/
    }
}


/* Improve text styles */
/***********************/

/* Block titles */
h3 {
  letter-spacing: -0.01em;
  line-height: 0.9em !important;
}


/* Media-grid manual first titles */
.media-grid-item-body p:first-child {
  line-height: 1.5em;
  letter-spacing: -0.02em;
  margin-bottom: 0.7em;
}



/* Element visual improvements */
/*******************************/

/* Remove button icon space */
.mcq-item .mcq-item-inner {
  margin-left: 20px;
  margin-right: 20px;
}
.mcq-item .mcq-item-state {
  display: none;
}
/* Show it again once the button is clicked */
.mcq-item .disabled .mcq-item-inner {
  margin-left: 0;
  margin-right: 0;
}
.mcq-item .disabled .mcq-item-state {
  display: block;
}

/* enlarge inline icons in buttons */
.button .icon {
  font-size: 1.5em;
}




/* graphic link spread (topic icons) */
.article-style-6 .links-widget .grid {
    text-align: center;
}
.article-style-6 .links-widget .grid-item {
    flex: none !important;
    margin: 20px auto !important;
}
/* shrink graphic link images */
.article-style-6 .links-widget .grid-item img {
    max-width: 256px;
}







/* Test for media grid boxes */
/*
.media-grid-item-body p:first-child {
  padding: 1em 0 1em 3em;
  padding-left: 5em;
  width: 150%;
  position: relative;
  left: -5em;
  top: -1em;
  line-height: 1.5em;
  background-color: #009fd9;
  color: #fff !important;
}


.media-grid-item {
  overflow: hidden
}
*/


/* Allow Links In Dynamic Columns - Centred */
/* Updated: 04/08/2020 */
.ev-links-widget .ev-grid {
	text-align: center;
justify-content: space-around;
    
}
.ev-links-widget .ev-grid-item {
 flex: none !important;
    

	
	/* Use the line below for left aligned links. */
	/*margin: 5px 5px !important;*/
	
	/* Use the line below for even spreading and centering of links. */
	margin: 5px auto !important; 
}