@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,400&display=swap');

html {
  background-color: #EEF7FE;
  font-family: "Lato", sans-serif;
  font-size: 16px;
}

#wrapper {
  padding: 4rem;
  max-width: 900px;
  margin: 4rem auto;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 1px 1px 68px 0px rgba(0, 0, 0, .2);
  color: #003366;
}

/* Define a fade-in animation keyframes */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* Apply the fade-in animation to the body */
body {
  opacity: 0;
  /* Set initial opacity to 0 */
  transition: opacity 1s ease-in;
  /* Set the transition property */
}

/* Fade in the body on page load */
.fade-in-page {
  animation: fadeIn 1s forwards;
}

.fadeIn {
  animation: fadeIn 1s forwards;
}

/* Set the initial animated items to not show */
.fadeIn {
  opacity: 0;
}

/* Define a fade-in animation keyframes */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Apply the fade-in animation to the body */
body {
  opacity: 0; /* Set initial opacity to 0 */
  transition: opacity 1s ease-in; /* Set the transition property */
}

/* Fade in the body on page load */
.fade-in-page {
  animation: fadeIn 1s forwards;
}

.fadeIn {
  animation: fadeIn 1s forwards ;
}

/* Set the initial animated items to not show */
.fadeIn {
  opacity: 0;
}

h1 {
  margin: 0;
}

p {
  color: #3F4A5A;
}

hr {
  border: none;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.2);
}

a {
  text-decoration: none;
  color: #1186FF;
}

header {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
}

footer {
  text-align: center;
  padding: 0 0 2rem 0;
  color: #888888;
}

header p {
  margin: 0;
}

hr {
  margin-bottom: 1.5rem;
}

.skills {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

#experience article h3 {
  padding-bottom: 0;
  margin-bottom: 0;
}

#experience article:not(:first-of-type) {
  padding: 1rem 0;
}

#experience article p {
  line-height: 1.25rem;
}

.date-range {
  margin-top: 0.25rem;
}

.print-control {
  display: none;
}

@media print {
  html {
    font-size: 11px;
  }

  body {
    opacity: 1;
  }

  #wrapper {
    box-shadow: none;
    margin: 0;
    padding: 0;

  }

  .fadeIn {
    opacity: 1;
  }

  .print-control {
    display: block;
  }

  .web-control {
    display: none;

  }
}

/* ***** *** * Portfolio Specific Section * *** ***** */

#portfolio {
  background-image: url("/media/Light.png");
  background-size: cover;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* portfolio grid setup */
.grid {
 
}

.row {
  display: flex;
  flex-flow: row wrap;
  margin-bottom: 2.5rem;
}

.portfolio-data-container {
  width:50%;
}

/* Portfolio heros */
.portfolio-hero{
  height: 100%;
  width: 33%;
  min-height:211px;
  margin-right:2rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.establish{
background-image: url("/media/ayin/careTypes/DMAP.png");
}
.callCenter{
background-image: url("/media/ayin/careManagement/careManagementMock.png");
}
.careManagement{
background-image: url("/media/ayin/careManagement/careManagementMock.png");
}
.careTypes{
background-image: url("/media/ayin/careTypes/CImCRT.png");
}
.survey {
background-image: url("/media/ayin/careManagement/Assessment.png")
}
.configuration {
background-image: url("/media/ayin/careManagement/careplanConfig.png")
}

.article-hero {
  height:100%;
  width:100%;
  background-size: contain;
  background-position: center center;
  background-repeat:no-repeat;
  min-height: 800px;
}
.text-article {
  max-width:600px;
  margin: 0 auto;
}
.text-article h3 {
  margin-top: 3rem;
}

.subtitled {
  margin-bottom: 0;
}

.subtitle {
 font-weight: 300;
}
.article-image {
  width: 100%;
}
q {
  font-weight:300;
  font-size:1.25rem;
}



@media screen and (max-width: 900px) {
#wrapper {
  padding: 1rem;
  max-width: 100%;
  margin: 0rem auto;
  border-radius: 0px;
  box-shadow: none;
}
.portfolio-hero {
    width:100%;
    height: 25vh;
  }
footer {
  padding-top: 2rem;
  }
  .portfolio-data-container {
  width:100%;
}
.article-hero {
  height:100%;
  width:100%;
  background-size: contain;
  background-position: center center;
  background-repeat:no-repeat;
  min-height: 300px;
 
}

}