@charset "UTF-8";
/* CSS document */

/* GLOBAL SETTINGS*/

hr{
  background-color: #BDF005;
height: 3px;

}

body {
    background-color: #fefcf6;
    color: rgb(0, 0, 0);
}

.P-one {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 400;

}

.P-two {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 400;

}




.logo {
  width: 15%;
  margin: 2px;
  margin-top: 20px;

}
.containerlist {
 display: flex;
 align-items: center;
   justify-content: center;
    height: 100px;
    width: 100%;

}
.danger{
  width:3%;
  display: inline;
  padding-bottom: 6px;
  padding-left: 3px;
  margin-bottom: 3px;
}







/*FOOTER */

.footer {

  padding: 10px;
  justify-content: center;

}


.bgfooter {

 width: 100%; 
 height: 26vh;
 margin-bottom: 5px;
 margin-top: 60px;
 background-repeat: no-repeat; 
 background-size: cover;
 border-top: #fa4fad;

}

.color-overlay {
position: absolute;
width: 100%;
height: 100%;

}



.contact-resume {

}

.Link_Icon {

width: 7%;
padding-top: 125px;

}

.footercontent{

font-family: 'Open Sans', sans-serif;
font-size: .75rem;
  font-weight: 200
}

.footertext {
  font-size: 1rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 200;
  padding-top: 99px;

}

.withlove{
  font-size: .75rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 200;

}

/* This the goal header text on the individual project pages*/
.goaltxt {
  font-size: 1.1rem;
  font-family:'Comfortaa', cursive; ;
  
}

.checkmark{
  width: 40px;
}


/* These describe my attributes with green checkmarks on the contact page*/
.descriptions{
  font-size: 1.2rem;
  font-family:'Comfortaa', cursive; 
}

/* These describe goals on each project page with green checkmarks*/
.projectdescriptions{
  font-size: 1rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}

/* This is the body copy that goes under headings h3's like Summary etc*/
p {
  font-size: 1.1rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
} 




/*.summarytext{
  font-size: 1rem;
font-weight: 200;

}*/

.summarytextsm {
  font-size: .83rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 200;
  color: rgb(0, 0, 0);
}


h1,h2,h3,h4,h5 {

font-family: 'Comfortaa', cursive;
  color: rgb(0, 0, 0);
  font-weight: 300;
 

}

.photographer{
  font-family: 'Comfortaa', cursive;
  color: rgb(0, 0, 0);
  font-weight: 300;
  font-size: 1.25rem;

}

 
  
/* HOMEPAGE */
.backgroundcircle {
  background-image: url("../img/homeicon-green.png");
 background-repeat: no-repeat;
 background-position: center;

}
.welcome {
  font-size: 1rem;
  font-family: 'Comfortaa', cursive;
  text-align: end;
}
.saying {
  font-size: 1.5rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 100;
  text-align: end;
 
}


/* THIS IS THE LINE ABOVE VIDEO SECTION ADDED TO CREATE SPACE ON MOBILE */
.aboveworkingon{

  height: 0px;
  background-color:#ffffff;
}

.workingonbutton{
  color: #ffffff;
  padding: 10px;
  padding-left: 14px;
  padding-right:  14px;
  font-size: 1.5rem;
  font-family: 'Open Sans', sans-serif;
  border-radius: 30px;
}


.videopic{  
  
  max-width: 50%
  max-height: 50%;
  text-decoration: none;     
  
}

/* BUTTONS 
.more_btn {
  font-weight: 400;
  font-size: .85rem;
  background-color: #BDF005;
  color: #0D1D29;
  font-family: 'Open Sans', sans-serif;

}
*/

/* PROJECT DETAIL SECTIONS */

/* Modals*/

.ModalLabel {
  color: #ffffff;
}


.projectTitle_center {
  
  font-family: 'Comfortaa', cursive;
  text-align: center;


}


/*
.projectTitle_left {
 
  font-family: 'Comfortaa', cursive;
  text-align: left;

}*/

.titlepic {
  block-size: 10%;
  text-align: left;
  
}
/* >>>>>>>>HOMEPAGE icons for about me /photo section */
.brag {
  border-color: white;
  border-radius: 20px;
}

.ptext{
color: #BDF005;
}


.insight_icon{

max-height: 50px;
}


.photoicons {

  max-height: 60%;
  margin: 10px

}


.arrowicons {
  width: 100%;
  height: 100%;

}

.setrowheight {

 min-height: 500px;
}

/* >>>>>>>>HOMEPAGE CARDS */

.heidi{
  text-align:center;
  font-size: 1rem;
  font-family: 'Comfortaa', cursive;
  font-weight: 100;
  margin-top: 10px;
}

.tagline {
  text-align: center;
  font-size: 1.25rem;
  letter-spacing: .1rem;
  font-family: 'Comfortaa', cursive;
  font-weight: 100;

}




.proj_casestudy{
  font-size: .7rem;
  font-weight: 100;

}


.uxdesign{
  margin-top: 10px;
  text-align: center;
  font-size: 2.0rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
   color: #003835;
}
.card-title {
  color: rgb(0, 0, 0);
  font-size: 1.4rem;
  font-family: 'Comfortaa', cursive;
  font-weight: 600;
  margin-top: 3px;
  
}
.card-text {
  font-size: 1rem;
  font-family: 'Open Sans', sans-serif
}

.card {
  background-color: #ffffff ;
  border-radius: 15px;
  border-color: #000000;
  border-width: .5px;
  padding: 4px;
 
}

.btn-primary {

  color: #000000;
  background-color: #B0E440;
 border-color: #000000;
  padding: 8px;
  padding-left: 20px;
  padding-right: 20px;
  min-width: 100px;
  
}


.btn-video {
padding: 6px;
color: #B0E440;
background-color: #0D1D29;
font-family: 'Open Sans', sans-serif;
font-weight: 100;
font-size: 1rem;
text-decoration: none;
border-color: white;
position:absolute;

}





.btn-secondary {

  color: #0D1D29;
  background-color: #B0E440;
  
  border-width: 1px;
  padding: 10px;
  font-size: 1rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600; 
  min-width: 110px;

} 
.btn-primary:hover
{
  background-color: #fa4fad;
  color: #b4ff13;
  
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
}

.btn-secondary:hover  {
  background-color: #fa4fad;
  color: #b4ff13;
  
  
}




.nav-link{
  color: #000000;
  font-family: 'Comfortaa', cursive;
  font-size: 1rem; 
}





.nav-link:hover{
  color: #B0E440;
  font-family: 'Comfortaa', cursive;
  font-size: 1rem; 
  font-weight: bold;
 
}

.nav-link:hover{
  color: #B0E440;
  font-family: 'Comfortaa', cursive;
  font-size: 1rem; 
  font-weight: bold;
 
}

/*>>>>>>>>>CONTACT PAGE */
.checkmarkitem {

text-align: start;
font-size: 1.2rem;
font-family:'Comfortaa', cursive;
}

.
/*>>>>>>>>>PHOTO/ABOUT ME PAGE */

.commonlang {
  font-size: 1.4rem;
  font-family: 'Comfortaa', cursive;
  text-align: left;
  color: #B0E440;
  font-weight: 400;
  
  }

  .commonlang-sm {
    font-size: .9rem;
    font-family: 'Comfortaa', cursive;
    text-align: left;
    color: #B0E440;
    font-weight: 400;

  }

.hjbwebsiteimages {
  max-height: 90%;
}

.photobodytext {
  font-size: 1.5rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}

.irelandphotoleft {
  size: 20%;
}




/*>>>>>>>>This styles the Photo/About Me*/

.rounded{
  border-radius: 20px;
}
.largerimage {
  max-width: 100%;
}

.reduce55H {

max-width: 55vh;
  border-radius: 20px;
}
.reduce50 {
  max-height: 28vh;
  border-radius: 20px;
}

.reduce33vh {
  max-height: 33vh;
  border-radius: 20px;
}
.reduceNMMain {
  max-height: 50vh;
  border-radius: 20px;
}

.reduce20 {
  max-height: 52vh;
  border-radius: 20px;
}

.reduce38vh {
  max-height: 38vh;
  border-radius: 20px;
}

.reducexs {
  max-width: 80vh;
  border-radius: 20px;
}


/*PROJECT CASE STUDIES DETAIL PAGES ----RAISING VOICES*/
/* 
.pagination {
background-color: #BDF005;
}
 */

 /*below is the text underneath numbers for process and methods section*/
 .processdescsmall{
  font-size: .95rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  color: rgb(0, 0, 0);
 }


 .proj_co_name{

  font-size: 1.2rem;
  font-weight: 200;

  
 }

 .proj_title {

  font-size: 1.8rem;
  font-weight: 400;
 

 }



 .cardsortphotos {
max-width: 75%;
 }

 figcaption {
  font-size: .9rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 200;
  text-align: center;

 }

.h4borders {

color: #BDF005;

}

/*these are the previous next buttons on top right*/
.btn-nextproject {
  text-decoration: none;

  font-size: .8rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  border-radius: 10px;
  border: solid #000000;
  border-width: .8px;
}

.btn-nextproject:hover {
  text-decoration: none;
  font-size: .8rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  border-radius: 10px;
  border: solid #000000;
  background-color: #fa4fad;
  border-width: .8px;
}


.summaryphoto{
  max-width: 70%;
}
.footer{
border-color: #B0E440;
  color: #ffffff;
}

.quote{
  color: #B0E440;
  font-family: 'Comfortaa', cursive;
  font-size: 1.1rem; 
  font-weight: 200;
}

.quoteb {
  font-size: .65rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 200;
  color: #ffffff;
}
.resume{
  max-width: 10%;
 float: right;
}
.persona{
  max-width: 95%;
  text-align: center;
}

.reducesize {
  max-height: 175px;
}

.cardsortpic{
  max-width: 80%;
}
.cardsortprocesspic{
  max-width: 50%;
  justify-content: right;
}

/*This styles the accordions for the PROJECT NM*/
/*top of projects showing my role etc*/

.numbers{
  background-color: #989a99;
 
  
}

/*This styles the homepage illustration*/
.targetill{

  width: 30%;
  margin-left: 3px;
  padding-top:  20px;
}






.role{
  font-family: 'Open Sans', sans-serif;
  font: weight 200px;
  color: white;
  font-size: 1rem;
}
.role2{
  font-family: 'Open Sans', sans-serif;
  font: weight lighter;
  color: white;
  font-size: .85rem; 
}
.greenline{
  width: .3%;
  display: inline;
  
}

.greenline2{
  object-fit: contain;
max-height: 75px;
}

.greenline3{
display: inline;
min-width: 10px;
max-height: 60px;
padding-top: 7px;
margin-right: 10px;
}


.vchallenges {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  
}
.calloutrow {
  background-color: rgb(0, 0, 0);
  border-radius: 12px;

}
.setdivsize {
width: 40px;
height: 40px;
}

/*This styles the indented text under the summary statement*/

.greencallout {
  font-family: 'Cormorant', serif;
  font-weight: 600;
  color: #000000;
  font-size: 1.6rem;
  display: inline;
  background-color: #dfffbe;

}
.questions {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
}

.quotename{
  font-family: 'Cormorant', serif;
  font-weight: 100;
  color: #006b5b;
  font-size: 1.1rem;
}

.challenges{
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  
  color: rgb(0, 0, 0);
}
/*below styles the black and white icons on the how we identified the problem section*/
.problemicons {
  width: 10vh;

}

/*This styles the accordions for the PROJECT RAISING VOICES*/

.accordion-body {
  font-size: 1rem;
  font-family: 'Open Sans', sans-serif;
  font: weight 400px;
  background-color:  #252535;
  color: white;
}
/*This refers to the accordion heading*/

.accordionpic {

  max-width: 75%;
}

.accordion-button {
background-color: #ffffff; 
color: #252535;
}

.myVideo {
  width: 250px;
  height: 250px;
  border-radius: 200px
}
.underheadingtext{
  font-size: 1rem;
  font-family: 'Open Sans', sans-serif;
  font: weight 400px;
  color: weight;
}
.greenarrow{
  max-width: 30%;
  justify-content: right;
}






/* MEDIA QUERIES - Cell*/
  @media (max-width: 576px) 
{
  h1,h3 {
 
    font-family: 'Comfortaa', cursive;
    font-weight: 200;
  }

  .more_btn {
    margin-bottom: 20px; 
  }

  .btn-nextproject {
    text-decoration: none;
    border: #ffffff;
    font-size: .55rem;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    border-radius: 10px;
    border: solid #ffffff;
    border-width: .75px;
    
  }


  .casestudies{
    text-align: center;
  }
  .logo {
    width: 50%;
    margin: 2px;
    margin-top: 10px;
    margin-left: 10;
  }
  .problemicons {
    width: 10vh;
    justify-content: center;
    display: block;
  
  }

  .Link_Icon {

    width: 15%;
    padding-left: 30px;
    padding-top: 40px;
    }

  .welcome {
    font-size: 100px;
    font-family: 'Comfortaa', cursive;
    text-align: end;
  }
  .targetill{

    width: 30%;
    padding-bottom: 5px;
  }


  .ill {
    text-align: center;
  }
  
  .heidi{
    text-align: center;
  }
  .uxdesign{
    text-align: center;

  }


  p {

    font-size: 1rem;
    font-family: 'Open Sans', sans-serif;
     font-weight: light 300;   
  }

  .contact-resume {
    margin: 0 auto;
    }

    .contact-info {
    text-align: center; 
    }


  /* cell phone settings for video and welcome text on home*/
  
  .tagline {
    text-align: Center;
    font-size: 1.2rem;
    letter-spacing: .1rem;
  }


  


  .btn-video {

    color: #B0E440;
    background-color: #0D1D29;
    font-family: 'Open Sans', sans-serif;
    font-weight: 100;
    font-size: .8rem;
    text-decoration: none;
    border-color: white;
    
    }

    .photoicons {
      max-width: 40%;
      margin: 30px;
      padding: 30px;

    }

    .arrowicons {
      width: 10%;
      -webkit-transform:rotate(90deg);
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      transform: rotate(90deg);
    }

.footertext{

  font-size: 1.1rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 200;
  padding-top: 5px;
  padding-left: 75px;
  text-align: center;

}


.bgfooter {


 width: 100%; 
 height: 20vh;
 margin-bottom: 5px;
 margin-top: 50px;
 background-repeat: no-repeat; 
 background-size: cover;

  }





.fname {
  text-align: center;
  font-size: 1.1rem;
}
.resume{
  max-width: 10%;
 float: right;
}


.checkmarkitem {

  text-align: center;
  }

  .greencallout {
    font-family: 'Cormorant', serif;
    font-weight: 600;
    color: #B0E440;
    font-size: 1.5rem;
    display: inline;
  
  }
  .greenline3{
    display: inline;
    min-width: 8px;
    max-height: 50px;
    padding-top: 7px;
    margin-right: 10px;
    }
  

}


@media (min-width: 577px) and (max-width: 991px){
  .footertext{

    font-size: 1.1rem;
    font-family: 'Open Sans', sans-serif;
    font-weight: 200;
    padding-top: 5px;
    padding-left: 75px;
    text-align: center;
  
  }
  
  
  .bgfooter {
  
   width: 100%; 
   height: 20vh;
   margin-bottom: 5px;
   margin-top: 50px;
   background-repeat: no-repeat; 
   background-size: cover;
  
    }
    .Link_Icon {

      width: 15%;
      padding-left: 30px;
      padding-top: 55px;
      }
  
  
  .more_btn {

    margin-bottom: 25px;
  }
 
  .targetill {
    text-align: center;
      width: 30%;
      padding-bottom: 5px;

  }

  .contact-resume {
    text-align: center;
    }

    .contact-info {
    text-align: center; 
    }


  .ill {
    text-align: center;
  }


  .photoicons {
    max-width: 50%;
    margin: 20px

    

  }

  .arrowicons {
    width: 40%;
  
  }



}



@media (min-width: 992px) {
  

  .photoicons {
    max-width: 100%;
    margin: 20px;
    margin-top: 20px;

  }


  .arrowicons {
    width: 40%;
    -webkit-transform:rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  
}