/* ------------------------------ */
/* BASIC SETUP */
/* ------------------------------ */



html {

  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    
}

body {
  font-family: 'Chivo', 'Arial', sans-serif !important;    
  margin: 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  text-align: left;
  background-color: #fff;
}


@media (min-width: 1440px) {
  .container {
    max-width: 1300px;
  }
}


@media (max-width: 768px) {
    .container {
    max-width: 768px !important;
    
}

  .block-none {
    display: none;
  }
}

@media (min-width: 769px) {

.block-lg-none {
  display: none;
}
}



/* ------------------------------ */
/* REUSABLE COMPONENETS */
/* ------------------------------ */

.navbar-toggler {
    padding: 0;
}

.navbar-light .navbar-toggler {
    color: #900C3F !important;
    border: none;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-bottom: 0.5rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
}

h1, .h1 {
  font-size: 2.5rem !important;
  font-weight: 300;
  margin-top: 0 !important;    
}


@media (max-width: 400px) {
  h1, .h1 {
  font-size: 1.8rem !important;
  font-weight: 300;
  margin-top: 0 !important;    
}
}

h2, .h2 {
  font-size: 1.75rem;
}

h3, .h3 {
  font-size: 1.5rem;
}

h4, .h4 {
  font-size: 1rem;
}

h5, .h5 {
  font-size: 0.75rem;
}

h6, .h6 {
  font-size: 0.5rem;
}


p {
  font-size: 1rem; 
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 2rem;
  font-weight: 400;
  color: #171717;     
}


a {
    margin: 0;
    color: #D95525;
}

a:hover {
    text-decoration: none;
    color: #900C3F;
}

.orange {
    color: #900C3F;
}


.btn {
    
    border-radius: 0;
}

.btn-outline-danger {
    
    color: #900C3F;
    border-color: #900C3F;
}

.btn-outline-danger:hover {
  color: #fff;
  background-color: #900C3F;
  border-color: #900C3F;
}


@media (min-width: 1024px) {
   .mt-5 {
    margin-top: 120px !important;
}
}

.paragraph-devider {
  border-bottom: solid lavenderblush 1px;
}


/* ------------------------------ */
/* HEADER */
/* ------------------------------ */

.bg-light {
  background-color: #fff !important;
}


.navbar {
  padding: 0.5rem 1rem;
}


@media (min-width: 992px) {
  .navbar-expand-lg {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}


.navbar-light .navbar-brand {
  font-size: 2.5rem;    
  color: #900C3F;
  font-family: literata; 
  letter-spacing: 0.3rem;  
}

@media (max-width: 415px) {
  .navbar-light .navbar-brand {
  font-size: 1.3rem;    
  color: #900C3F;
  font-family: literata; 
  letter-spacing: 0.1rem;  
}
    
.navbar-toggler-icon {
    display: inline-block;
    width: 1.3em;
    height: 1.3em;   
}
}

@media (max-width: 375px) {
  .navbar-light .navbar-brand {
  font-size: 1.2rem;    
  color: #900C3F;
  font-family: literata; 
  letter-spacing: 0.07rem;  
}
    
.navbar-toggler-icon {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;   
}
}

@media (max-width: 320px) {
  .navbar-light .navbar-brand {
  font-size: 1rem;    
  color: #900C3F;
  font-family: literata; 
  letter-spacing: 0.05rem;  
}
    
.navbar-toggler-icon {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;   
}
}
    

.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
 color: #900C3F;
}
    
.navbar-light .navbar-nav .active> .nav-link{
    color: #900C3F !important;
}

.navbar-light .navbar-nav .nav-link {
    color: #D95525;
    font-weight: 400;
    transition: color 0.5s;
}  

.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
    color: #900C3F;
}      
        
.menu {
     font-size: 0.9rem;   
        
    }  


/*-- D95525 --*/
    
/* ------------------------------ */
/* INDEX.HTML */
/* ------------------------------ */


/* Headshot section */


.headshot {
    background-image: url(img/profile.jpg);
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 90vh;
    background-attachment: static;
}

@media (max-width: 576px) {
   .headshot{
    background-image: url(img/profile.jpg);
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 50vh;
    background-attachment: static;
} 
}


/* About section */

.about {
    margin-top: 80px;
}

@media (max-width: 576px) {
   .about{
    margin-top: 45px;
    margin-bottom: 45px;
} 
}

.homepagetitles {
       color: #900C3F;
       font-size: 1.1rem;
       font-weight: 400;
    }
    
.projectlinks a {
        line-height: 1.5rem;
        color: #D95525;
        text-decoration: none;
        font-size: 1rem;
        transition: font-size 0.5s, color 0.5s;
        
    }   
    
.projectlinks a:hover,
.projectlinks a:focus    {

        color: #900C3F;
        font-size: 1.05rem;
        
    }      

.arrow {
    color: #D95525;
    font-size: 1.2rem;
}



/* ------------------------------ */
/* WORK.HTML */
/* ------------------------------ */

.tiles {
    margin-bottom: 45px !important;
    
}



.tile {
    height: 441px;
}

@media (max-width: 576px) {
   .tile {
    max-height: 550px !important;
    max-width: 550px !important;
    margin: 0 auto !important;
} 
}

@media (max-width: 321px) {
   .tile {
    max-height: 300px !important;
    max-width: 300px !important;
    margin: 0 auto !important;
} 
}






.tile h1 {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}




.storyteller {
    background-color: rgba(255, 255, 255, 0.5);
    background-image: url(img/storytelling.jpg);
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 100%;
}

.workshops {
    background-image: url(img/workshops.jpg);
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 100%;
}

.research {
    background-image: url(img/research.jpg);
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 100%;
}

.publications {
  background-image: url(img/publications.jpg);
  background-size: cover;
  background-position: center;
  height: 100%;
  width: 100%;
}

  .whiteback {
    background: rgba(255, 255, 255, 0);
    color: rgba(255, 255, 255, 0);
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 100%;
    transition: background-color 0.5s, color 0.8s;  
  }
    
    
  .whiteback:hover,
  .whiteback:focus {
    background: rgba(255, 255, 255, 1);
    color: #900C3F;
    display: block;
} 

@media (max-width: 1024px) {
   .whiteback {
    background: rgba(255, 255, 255, 0.5);
    color: #900C3F;
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 100%; 
  }
}






/* ------------------------------ */
/* STORYTELLER.HTML */
/* ------------------------------ */
.subtitle {
    color: #D95525;
    line-height: 1.5;
}


.themothers {
        line-height: 1.5rem;
        color: #D95525;
        text-decoration: none;
        font-size: 1rem;
        transition: font-size 0.5s, color 0.5s;
        font-weight: 400;
        
    }   
    
.themothers:hover,
.themothers:focus    {

        color: #900C3F;
        font-size: 1.05rem;
        text-decoration: none;
        
    }  


.btmpagelinks {
        line-height: 2rem;
        color: #D95525;
        text-decoration: none;
        font-size: 1.1rem;
        font-weight: 400;
        transition: color 0.5s;
        
    }   
    
.btmpagelinks:hover,
.btmpagelinks:focus    {

        color: #900C3F;
        text-decoration: none;
        
    }  

/* ------------------------------ */
/* PUBLICATIONS.HTML */
/* ------------------------------ */