/* color palette


floral wite:#FFF8F0
indigo: #140949
red (remediation): FF7575;
gray: #F3F5F7
dark gray: #76818E
payne gra: #5D606F
orange
light pink: #E2C3BE
rose pink: #CC7E85
green
purple
yellow


*/

html{
  scroll-padding-top: 90px;  /*height of sticky header */
  scroll-behavior: smooth;
}

html, body {
  margin:0;
   

  
}

p{
  margin:.5em 0;
}

body{
	margin:0;
	/*font-family: 'Source Sans Pro', sans-serif;*/
    /*font-family: 'Fira Sans', sans-serif;*/
  /*font-family: 'Inter', sans-serif;
  font-family: 'Urbanist', sans-seri

  font-family: 'Quicksand', sans-serif;*/

  font-family: 'Sarabun', sans-serif;
	background-color:#FFFFFF;/*#F9F9F9*/
   padding-bottom:40px;   /* Height of the footer */
   height:100%;
    font-size:1em;
    line-height:1.75;
}


.body-text {
  text-align: left;
 
}


/*Overall body stuff*/
a{
  text-decoration:none;
  font-size:1em;
  color: #465775;
  font-weight: bold;
}



#body-content{
  text-align:center;
  /*margin:2% 16%;*/
  padding:2% 12%;;
  position:relative;
  min-height:100%;
  background-color:#FFFFFF;
  border-top:1px solid #EBEBEB;

 /* background-image:url("gridbg.png");*/
  
}
/*colored one*/
#index-body-content{
  text-align:center;
  /*margin:2% 16%;*/
  padding:2% 12%;;
  position:relative;
  min-height:100%;
 background-color:#dfdfff;
/*border-top:1px solid #E1DEE3;*/

 /* background-image:url("gridbg.png");*/
  
}

#work-content{
  text-align:left;
  position:relative;
  min-height:100%;
  margin:1% 4%;
  
}

#colored-work-content{
  text-align:left;
  position:relative;
  min-height:100%;
  margin:1% 4%;
  background-color:#F2F6F8;
 /* border-top:1px solid #C9DBE3;;*/


  
}

.sub-section-header {
  font-size: .9em;
  color:#656565;
  padding-bottom:6px;
  font-weight:light;
  text-transform: uppercase;

}

.sub-section-body {
  font-size: 1em;
  padding-bottom:4px;

}

.page-title{
    font-size: 2.1em;
    /*text-transform: lowercase;*/
    color: #1e1048;
    /*border-left: solid 2px;
    border-right: solid 2px;*/
    /* background-color: white; */
    padding: 2px 17px;
    font-family: 'Merriweather', serif;
    margin:1% 10% 1.5% 10%;
    font-weight:500;
    text-align:center;
    line-height:1.4;
}

.

h4{
  /*font-family: 'Merriweather', serif;*/
  color: #087CA7;
  font-size: 1.1em;
}


/*colors of the headers for each apge*/
.section-header-all {
    color: #232323;
    font-size: 1.3em;
    font-weight: bold;
    text-transform: uppercase;
    /* font-family: 'Merriweather', serif; */
    padding-top: 1em;
}

.section-header1{ /*expenses*/
  color:rgb(49, 49, 49);
  font-size:1.1em;
  text-transform: uppercase;
  font-family: 'Merriweather', serif;
  padding-top:1em;
}

.section-header2{  /*mobile ts*/
  color:#b3550e;
  font-size:1.1em;
  text-transform: uppercase;
  font-family: 'Merriweather', serif;
  padding-top:1em;
}

.section-header3{ /*gt lib*/
  color:rgb(37, 42, 76);
  font-size:1.1em;
  text-transform: uppercase;
  font-family: 'Merriweather', serif;
  padding-top:1em;
}

.section-header4{   /*expenses*/
  color:rgb(30, 62, 15);
  font-size:1.1em;
  text-transform: uppercase;
  font-family: 'Merriweather', serif;
  padding-top:1em;
}

.section-header5{  /*trip eval*/
  color:rgb(34, 110, 189);
  font-size:1.1em;
  text-transform: uppercase;
  font-family: 'Merriweather', serif;
  padding-top:1em;
}

.section-header6{ /*graphic design*/
  color:#3c0523;
  font-size:1.1em;
  text-transform: uppercase;
  font-family: 'Merriweather', serif;
  padding-top:1em;
}

.section-header7{ /*more work*/
  color:#1c4c35;
  font-size:1.1em;
  text-transform: uppercase;
  font-family: 'Merriweather', serif;
  padding-top:1em;
}

.caption{
  font-size:.8em;

}

/*Footer stuff*/

.footer {

  
  padding-top: 20px;
  text-align: center;
  background: transparent;
  font-size: 12px;
  height: 25px;
  position: relative;
   
}

.footer p{
  font-size:.8em;
  letter-spacing:1px;
  color:#232323;
}


/* see more work links*/
.more-work{

}
.left{
  text-align:left;
  box-shadow: 0px 8px 6px -6px rgba(0, 0, 0, 0.45);
  border-radius:5px;
  border:solid #232323 1px;
  padding:3px 10px;
  color:#5a07ff;
};

}
.right{
  text-align:right;
  margin-left:50%;
  box-shadow: 0px 8px 6px -6px rgba(0, 0, 0, 0.45);
  border-radius:5px;
  border:solid #232323 1px;
  padding:3px 10px;
   color:#5a07ff;

}



/*end of body stuff*/
/*sticky portfolio menu stuff*/
/*#portfolio-menu {
  box-shadow: 0px 8px 6px -6px rgba(0, 0, 0, 0.45);
  left: 0;
  background-color: gray;
  width: 100%;
}*/


/*menu stuff*/

#entire-nav {
    width: 100%;
    background-color: #ffffff;
    transition: 0.4s;
   /* position:fixed;*/

}

#entire-nav #nav {
   transition: 0.4s;
     padding:20px;

}


#scroll-entire-nav {
    position: fixed;
    width: 100%;
    background-color: #ffffff;
    transition: all 500ms ease;
}


#nav {
  display:table;
  width:100%;
  z-index: 100;
 transition: 0.4s;
   /*border-bottom:solid .5px #38188054;*/
   position:fixed;
   background-color: #ffffff;
 

}

#nav a{
  color:#827998;
  font-weight:400;
  padding:0 2px;
}


#nav a li.current {
  opacity: 1;
  color:#381880;
  background-color:white;
  font-weight: 900;
 

}

#nav a  li:hover{
  -webkit-transition: all 0.3s, 
  -webkit-transform 0.3s;
  /*color: #232323;*/
  font-weight:800;

  color:#381880;

 /* border-bottom: 5px double #5f5d6b;*/
      -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
  transition-duration: 0.15s;
}




#sarah-div {
  display:table-cell;
  text-align:left;
    transition: all 500ms ease;
}


#nav-links-div {
   display:table-cell;
   text-align:right;
    transition: all 500ms ease;

}


.sarah {
  display:block;
  float:left;
  vertical-align: middle;
  padding: 8px 80px 4px 72px;
  margin: 0;
}

.sarah li {
  display:inline-block;
}


.nav-links {
  display:block;
  float:right;
  vertical-align: middle;
  padding: 8px 80px 4px 80px;
  margin: 0;
}

.nav-links {
  padding-inline-end: 80px;
}

.nav-links li {
  display:inline-block;
  margin:0 12px;
}




#portfolio-menu {
  /*box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.1);*/
  width:100%;
  display:table;
 position:fixed;
  z-index: 99;
  background-color: #ffffff;
 /* position:top;*/
  font-size:.9em;
  transition: top 0.4s;
  box-shadow:rgb(155 127 178 / 30%) 0px 4px 19px 0px;
 
}


#portfolio-links-div {
  display:table-cell;
  text-align:left;
  vertical-align:middle;
    transition: all 500ms ease;

}


#backHome-div {
   display:table-cell;
   text-align:right;
   vertical-align:middle;
   transition: all 500ms ease;
}




#nav-separator {
  color: #3a444e;
  padding:0 3px;
}

#portfolio-menu ul a {
  font-weight:normal;
}


.portfolio-links li {
  display:inline-block;
}

.portfolio-links {
    padding: 0px 80px;
    margin:8px 0;
}

.backHome {
  padding-inline-end: 80px;
    padding: 0px 80px;
    margin:8px 0;
}

.backHome li {
  display:inline-block;
  margin: 0 12px;
}



#portfolio-menu ul li.active {
  /*background-color: #3b49df;*/
  border-radius:10px;
  transition:color 0.3s ease-in-out;
  font-weight:900;
}

#portfolio-menu ul li.active a {
  color: #381880;
   font-weight:900;
}



a.anchor {
    top: -350px;
}
/*
.nav-links a li{
  position: relative;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  /*text-transform: uppercase;*/
 /* font-size:1em;
  letter-spacing: 0.1em;
  color: #5f5d6b; /*gray color*/
  /*line-height: 1;
  -webkit-transition: all 0.3s, 
  -webkit-transform 0.3s;

}



nav li a:hover{
  color:red;
  border-bottom: 1px solid #232323;
  -webkit-transition: all 0.3s, 
  -webkit-transform 0.3s;
}*/
/*
.backgroundScroll {
    height: 20%; 
  background-color:red;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
*/

.nav-links li.current {
  opacity: 1;
  color: #232323; /*new blue color*/
  font-weight: 800;
 /* border-bottom: 5px solid #232323;*/
}
.SarahMusa {
  opacity: 1;
  color: #381880; /*new blue color*/
  font-weight:bold;
  font-size:1em;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
  font-weight:800;
  -webkit-transition: all 0.3s, 
  -webkit-transform 0.3s;
}

.navline {

}


.nav-links li:hover{
  -webkit-transition: all 0.3s, 
  -webkit-transform 0.3s;
  /*color: #232323;*/
  font-weight:bold;
  text-decoration: none;
  color:red;
 /* border-bottom: 5px double #5f5d6b;*/
      -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
  transition-duration: 0.15s;
}



/*end of menu stuff*/



/*2019 and 2023Intro on Workpage stuff*/


.intro-row{
    margin: 1% 1%;
    text-align: left;
    max-width: 850px;

}

.index-image {
  border-radius:100%;
  width:65%;
  padding:5px 20px;
}

.intro-header-text {
  font-size:4em;
  font-weight: bold;
}

#intro-text{
    text-align: left;
    font-size:2em;
  /*  color:#3F8EFC;
    color: #233659;
    color:#b30e57;
    color: #152b53;*/
    color: #261e35;
    letter-spacing:.8px;
    font-weight: 500;
   /* border-bottom: 6px solid #fff;*/
    text-align: left;
    font-family: 'Lora', serif;
}

#intro-details-text{
    text-align: left;
    font-size:1.4em;
    color:black;
    font-weight:300;
    letter-spacing:.1px;
    line-height:1.8;
    font-family: 'Lora', serif;
  
    
}

.breadcrumbs {
  font-size:.9em;
   font-family: 'Sarabun', sans-serif;
   text-align:left;
   padding-top: 100px;
   padding-left:100px;
}


.index-breadcrumbs {
  font-size:.9em;
   font-family: 'Sarabun', sans-serif;
   text-align:left;
}

@media only screen and (max-width: 770px) {
   .intro-row{
    margin: 4% 1%;
   
  }

    .intro-header-text {
      font-size:2em;

    }

    #intro-text{
        font-size:2em;
        letter-spacing:.8px;
  

        
    }

    #intro-details-text{
        font-size:1.2em;
        /*color:#465775;*/
        font-weight:300;
        letter-spacing:.2px;
        line-height:1.6;
        
    }


nav ul {

  padding: 0 2%;
}
}

@media only screen and (max-width: 1180px) {


   .intro-row{
    margin: 4% 1%;
   
  }



    .intro-header-text {
      font-size:2em;

    }


    #intro-text{
        font-size:2em;
        letter-spacing:.8px;
    
        
    }

    #intro-details-text{
        font-size:1.2em;
        /*color:#465775;*/
        font-weight:300;
        letter-spacing:.2px;
      
        
    }
}


@media only screen and (max-width: 400px) {
   .intro-row{
    margin: 6% 0%;
   
  }


    .intro-header-text {
      font-size:1.5em;

    }

    #intro-text{
        font-size:1.2em;
        letter-spacing:.8px;
        color: #152b53;

        
    }

    #intro-details-text{
        font-size:1.1em;
        color:#152b53;
        font-weight:300;
        letter-spacing:.2px;
     
        
    }

   

}




/*end of 2019 Intro on Workpage stuff*/




/*Index/home stuff*/
#name-text{
	font-size:4em;
	color:#232323;
	letter-spacing:1px;
	font-weight: bold;
  border-bottom: 6px solid #fff;

}

#ux-text{
	font-size:1.5em;
	text-transform:lowercase;
	color:#444554;
	letter-spacing:2px;
	font-weight: bold;
}


/*end of index/home stuff*/



/*about me page stuff*/
#about-image{
	border-radius:1%;
	width:100%;
	
}

#about-action a:hover{

  border-bottom: 1px dotted #232323;
}

#about-action a{
  font-weight:bold;
  color:#5a07ff;
}

#about-action p{
  font-weight:bold;
  color:#5a07ff;
}

#about-action img{
  width:25px;
  padding-right:5px;
  padding-top:5px;
}

#about-action a:hover{
  border-bottom:none;

}


/*end of about me apge stufF*/


/*my portfolio page stuff*/
.port-image{
  width:90%;
  height:50%;

}
/*end of my portfolio page stuff*/


/*Responsive menu stuff*/
/*
@media only screen 
and (min-width : 1025px) {
  input[type=checkbox]#toggle,
  label[for=toggle] {
    display: none;
  }
}
@media only screen 
and (max-width : 679px) {
  #nav {
    width: 100%;
  }
  input[type=checkbox]#toggle {
    position: absolute;
    z-index: -9999px;
    top: -9999px;
    left: -9999px;
  }
  i.icon-menu-1 {
    margin: 0 10px 0 0;
  }
  label[for=toggle] {
    width: 100%;
    padding-bottom: 3%;
    padding-top: 3%;
  }
  #menu {
    display: none;
  }
  input[type=checkbox]#toggle:checked ~ #menu {
    display: block;
  }
  input[type=checkbox]#toggle:checked ~ #menu li {
    display: block;
  }
}
@media only screen 
and (min-width : 680px) 
and (max-width : 702px) {
  #nav {
    width: 100%;
    font-size: 12px;
  }
  input[type=checkbox]#toggle,
  label[for=toggle] {
    display: none;
  }  
}
@media only screen 
and (min-width : 703px) 
and (max-width : 728px) {
  #nav {
    width: 100%;
    font-size: 12px;
  }
  input[type=checkbox]#toggle,
  label[for=toggle] {
    display: none;
  } 
}
@media only screen 
and (min-width : 728px) 
and (max-width : 1024px) {
  #nav {
    width: 100%;
    font-size: 14px;
  }

  
  input[type=checkbox]#toggle,
  label[for=toggle] {
    display: none;
  }  
}

@media only screen and (max-width: 680px) {
	#nav ul li{
		padding: 0 16px;
	}
    #nav ul li {
        /* padding: 17px 50px; */
      /*  margin: 0 0 0 0;
    }
    nav{
        box-shadow: 0px 8px 6px -6px rgba(0, 0, 0, 0.45);
    }

}*/

/*end of responsive menu*/

/*Single column image for responsive*/
.single-image {
    width:100%;
    margin:auto;
   
}

.image-caption {
    margin: 1em 4em;
}

/*end of single column image for responsive*/



 #updated-body-content {
      padding: 2% 22%;
      text-align:left;
  }

.updated-port-row{
  margin-bottom: 1%;
  margin-top: 0%;
  display:table;
}







/*button css*/
#content-button{   
	display: block;
  margin-left: auto;
  margin-right: auto;
	padding:15px 15px;
	background-color:#FFFFFF;
	width:20%;
	border:solid #232323 1px;
  letter-spacing:1px;
  float:left;
  text-align:left;

}

#content-button a{
	color:#232323;
	text-decoration:none;
	font-weight:bold;
	font-size:1.2em;
  text-align:center;
}

#content-button:hover{
    box-shadow: 1px 1px 20px 2px rgba(0, 0, 0, 0.72);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}


.button-gd{
  background-color:#FFFFFF;
  border:solid #474165 1px;
  color:#474165;
  width:20%;
  border-radius:5px;
  padding:2%;
}

}
/*end of button css*/

/*Image hover stuff*/
.container{
  padding: 5% 2%;
  float: left;
  width: 100%;
  margin-bottom:8px;
  background-color: white;
  border-radius: 12px;

}

.container .title{
  /*color: #333;*/
  text-align: center;
    padding: 1% 2%;
}

.content {
  background-color: #dfdfff;
  /*border: 6px solid #fff;
  box-shadow: 0 0 3px #ccc;*/
  position: relative;
  /*width: 100%;*/
  /*max-width: 400px;*/
  margin: 0px 12px 0px 0px;
  overflow: hidden;
  /*background-color: rgba(71, 65, 101, 0.88);*/
  border-radius: 1px;
   
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.content .content-overlay {
  background: rgba(0,0,0,0.7);
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.content:hover .content-overlay{
  opacity: 1;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.content-image{
  width: 100%;
}

/*#content-image-image {
    border: 6px solid #fff;
    box-shadow: 0 0 3px #ccc;
}*/

.content-details {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details{
  top: 50%;
  left: 50%;
  opacity: 1;
}

.content-details h3{
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.content-details p{
  color: #fff;
  font-size: 0.8em;
}



.fadeIn-top{
  top: 20%;
}

.content p{
    padding: 7px 20px 12px 20px;
    letter-spacing: 1px;
    font-size: 1em;
}
/*end of image hover stuff*/


/*2019 - Work Project Name styling on My Work Page*/
.work-project-name {
    font-size: 1.5em;
    font-weight:bold;
    letter-spacing: .6px;
    padding-top: 1%;
    padding-bottom: 1%;
    color: #223454;
    line-height: 1.1;
}

@media only screen and (max-width: 770px) {
   .work-project-name {
    font-size: 1.1em;

}
}


.work-project-details {
    font-size: 1em;
    letter-spacing: .5px;
    padding-bottom: 1%;
    color: #223454;
    line-height: 1.1;
}





.work-project-link {
    font-size: 1em;
    margin:8% 0;
    color:#5a07ff;
    line-height: 1;
    padding-bottom:12px;
}
/*End of 2019 - Work Project Name styling on My Work Page*/

/*new css 2023*/

.body2 {
  padding-top:80px;
}


.intro-colored {
  left: 0;
  right: 0;
  overflow: auto;
  background:#E2C3BE;
  padding: 2% 8%;
  text-align: center;

}

.body-colored{
  left: 0;
  right: 0;
  overflow: auto;
  background:#f3f3f3; /*E9EBED;*/
  text-align: center;
  /*padding: 100px 22% 2% 22%;*/


}

.index-body{
  left: 0;
  right: 0;
  overflow: auto;
  background:#F2F6F8; /*E9EBED;*/
  text-align: center;
   padding:100px 12% 60px 12%;

}

@media only screen and (max-width:1180px) {

  /*.body-colored {
    padding:2% 8%;
   }*/

    #updated-body-content {
      padding:2% 8%;
    }

}


@media only screen and (max-width:885px) {

  /*.body-colored {
    padding:2% 4%;
   }*/

    #updated-body-content {
      padding:2% 4%;
    }
    .sarah {
       padding: 4px 80px 4px 24px;

    }
    .portfolio-links {
      padding:0px 26px;
    }

    .nav-links {
     padding-inline-end: 20px;
    }
    .backHome {
        padding: 0 20px 0 4px;

    }

    .breadcrumbs {
        padding-left:52px;
        padding-top:130px;
    }


}




@media only screen and (max-width: 780px) {

  /*.body-colored {
    padding:3% 6%;
   }*/

    #updated-body-content {
      padding:3% 6%;
    }


}

@media only screen and (max-width: 400px) {

 /* .body-colored {
    padding:3% 6%;
   }*/

    .index-body{
       padding:32% 4% 4% 4%;
    }

}


.section-title-bold{
  font-weight:800;
  /*border-bottom-style: solid;
  border-color:#CBD2D0;*/
  text-align:left;
  color: #c736a1;
  font-size:1.7em;
  padding-bottom:2px;

}

.results-title{
  font-weight:600;
  /*border-bottom-style: solid;
  border-color:#CBD2D0;*/
  text-align:left;
  font-color:#140949;
  font-size:1.1em;
  padding-top:6px;
  padding-bottom:6px;

}



.more-work-header {
  font-size:1.2em;
  font-weight:bold;
  padding-bottom:4px;
  color:  #232323;
}


.img-result {
  margin-top:16px; 
  margin-left: auto; 
  margin-right: auto; 
  display:block; 
  width:55%;

}

/*End of new 2023 css*/


/*Responsive grid*/
/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0 0 12px 0;
}

/*  COLUMN SETUP  */
.two-thirds img{
  width:63.66%;
  float:left;
  padding:20px 0;
}

.one-thirds{
  width:30.33%;
  float:right;

}


.one-thirds2{
  width:30.33%;
  float:left;

}

/*NEW stuff FOR A 2 COLUMN GRID*/

.first-col{
    width:48%;
    padding:20px 0;
    float:left;
}

.sec-col img{
    width:48%;
    float:right;
    
}

/*end of new stuff 2 column grid*/


/*new stuff for 3 column grid*/

.span_3_of_3 {
    width: 100%;
}

.span_2_of_3 {
    width: 66.13%;
}

.span_2_of_3_index {
    width: 55.13%;
    margin: 0 4%;
}


.span_2_of_3_about{
    width: 55.13%;
    padding:4%;
    background-color:#f5f6f7;
}



.span_1_of_3 {
    width: 32.26%;
}

.card_1_of_3 {
    width: 32%;
    background-color:#F3F5F7;
    padding:24px;
    /* border-radius:5px;
   border-color:#B5B7CF;
    border-style:sold;*/
    margin:0 8px 8px 0;
     box-sizing: border-box;

}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .span_3_of_3 {
        width: 100%;
    }
    .span_2_of_3 {
        width: 100%;
    }
 

    .span_1_of_3 {
        width: 100%;
    }
}
/*end of new stuff for 3 column grid*/

/*beginning 2023 update*/
/*new stuff for 8 column grid. The span means how much space it takes up, so for example, span 2 of 5 takes up 2 columns in a 5 column row*/

.left_span_1_of_2 {
  width:11%;
}

.right_span_1_of_2 {
  width:85%;
}

.span_8_of_8 {
    width: 100%;
}

.span_7_of_8 {
    width: 85%;
}

.span_6_of_8 {
    width: 73%;
}

.span_5_of_8 {
    width: 60%;
}


.span_4_of_8 {
    width: 48%;
}

.span_3_of_8 {
    width: 35%;
}


.span_2_of_8 {
    width: 21%;
}

.span_1_of_8 {
    width: 10%;
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 900px) {

    .img-result{
      width:90%;
    }

  


  .left_span_1_of_2 {
      width:100%;
      margin-top:1%;
      margin-bottom:1%;
  }

    .right_span_1_of_2 {
      width:100%;
      margin-top:1%;
        margin-bottom:1%;
    }

    .span_8_of_8 {
      width: 100%;
      margin-top:1%;
      maring-bottom:1%;
    }

    .span_7_of_8 {
        width: 100%;
        margin-top:1%;
        margin-bottom:1%;
    }

    .span_6_of_8 {
        width: 100%;
        margin-top:1%;
        margin-bottom:1%;
    }

    .span_5_of_8 {
       width: 100%;
       margin-top:1%;
      margin-bottom:1%;
    }


    .span_4_of_8 {
        width: 100%;
        margin-top:1%;
        margin-bottom:1%;
    }

    .span_3_of_8 {
        width: 100%;
        margin-top:1%;
        margin-bottom:1%;
      }


    .span_2_of_8 {
        width: 100%;
        margin-top:1%;
        margin-bottom:1%;
    }

    .span_1_of_8 {
        width: 100%;
        margin-top:1%;
        margin-bottom:1%;
    }

}
/*end of new stuff for 5 column grid*/
/*end of 2023 update*/

.two-thirds2 img{
  width:63.66%;
  float:right;
  padding:20px 0;
}


.landing-row{
  width:100%;
  margin-bottom: 20px;
  margin-top: 15%;
  margin-bottom: 0;
  display:table;
}


.landing-left{
    width:30.33%;
  float:left;
}

.landing-left img{
  float:right;
}

.landing-right{
  width:63.66%;
  float:right;
  padding:20px 0;
  text-align:left;
}

.landing-right p{
    margin-top:0;
}



.port-row{
  margin-bottom: 2%;
  margin-top: 2%;
  display:table;
  margin-left:auto;
  margin-right:auto;
}

.col {
	display: block;
	float:left;
	/*margin: 2% 0px;*/
	text-align:left;
}

.col-about {
  display: block;
  float:left;
  margin: 2% 0% 2% 0%;
  text-align:left;
 
}

.col-index {
  display: block;
  float:left;

  text-align:left;
 
}



/*new colymn 2023*/
.col-new {
  display: block;
  float:left;
  text-align:left;
  padding:0% 2% 0% 0%;

}/*end new column 2023*/
/*.col:first-child { margin-left: 0; }*/

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }


/*  GRID OF TWO  */
.span_2_of_2 {
	width: 100%;
}
.span_1_of_2 {
	width: 48%;
   padding: 1%;
}

/*onethirds grid*/
.span_1_of_3{
	width:30.26%;
}

.span_2_of_3{
	width:65.13%;
}


@media only screen and (max-width: 670px){
  .span_1_of_3{
      width: 100%;
      display: block;
      margin-left: auto;
      margin-right: auto;
  }
  .span_2_of_3{
      width: 100%;
  }

   .span_1_of_2{
      width: 100%;
      margin-top: 2%;
      margin-bottom:2%;
  }

  .updated-port-row{
  margin-bottom: 4%;

}

   .span_2_of_3_about{
    width: 98%;
    padding:2%;
    background-color:#f5f6f7;
}

.img-result {
  width:85%;

}

  .col{
    
    width:100%;
  }



}

@media only screen and (max-width: 520px){
	.span_1_of_3{
	    width: 100%;
	    display: block;
	    margin-left: auto;
	    margin-right: auto;
	}
	.span_2_of_3{
	    width: 100%;
	}

	#about-image{
		display: block;
	    margin-left: auto;
	    margin-right: auto;
	    width:60%;
	}

	.col{
		text-align:left;
    width:100%;
	}
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */



@media only screen and (max-width: 780px) {
	/*.span_2_of_2, .span_1_of_2,.span_3_of_3, .span_2_of_3, .span_1_of_3  {
        width: 100%;
    }*/


  .one-thirds{
      width: 98%;
      float:left;
  }

  .two-thirds{
    width: 98%;
    float:left;
  }

  .one-thirds2{
    width: 98%;
    float:left;
  }

  .two-thirds2{
    width: 98%;
    float:left;
  }
  .two-thirds img{
    width: 98%;
  }

  .two-thirds2 img{
    width: 98%;
  }
  
  /*NEW stuff FOR A 2 COLUMN GRID*/
  
  .first-col{
      width:90%;
  }
  
  .sec-col img{
      width:90%;
      float:none;
  }
  
  /*end of 2 column grid*/
  
  
  
}

/*End of responsive grid*/


/*Overall responsive stuff*/


@media only screen and (max-width: 1240px) {

    .img-result{
      width:90%;
    }


  .right{
    text-align:right;
    margin-left:46%;

  }

  #content-button{  
      width:40%;
  }
  
  /*Single column image for responsive*/
  .single-image {
      width:95%;
      padding:0 2%;
  }

  .image-caption {
      margin: 1em 4em;
  }
  /*end of single column image for responsive*/


}


@media only screen and (max-width: 1400px) {
    #body-content {
        margin: 2% 4%;
        padding:2% 8%;;
    }

    #index-body-content {
        padding:4% 12%;;
    }

    .index-body{
       padding:6.5% 12% 4% 12%;
    }
    nav ul {
        margin: 2% 2%;
    }

}


@media only screen and (max-width: 1100px) {
  .right{
    text-align:right;
    margin-left:41%;

  }
}

@media only screen and (max-width: 1015px) {
  .right{
    text-align:right;
    margin-left:38%;

  }
}



@media only screen and (max-width: 990px) {
  .right{
    text-align:right;
    margin-left:37%;

  }
}

@media only screen and (max-width: 955px) {
  .right{
    text-align:right;
    margin-left:34%;

  }
}

@media only screen and (max-width: 945px) {
  .right{
    margin-left:48%;

  }

  #work-content{
    margin:2% 1%;
    
  }

  #colored-work-content{
    margin:2% 1%;
    
  }


}

@media only screen and (max-width: 909px) {
  .right{
    text-align:right;
    margin-left:46%;

  }

  #work-content{
    margin:2% 5%;
    
  }

  #colored-work-content{
    margin:2% 5%;
    
  }


  .work-project-name {
      font-size: 1.3em;

  }
  

}


@media only screen and (max-width: 1180px) {
  .page-title{
    font-size: 1.8em;
    padding: 2px 10px;
    margin: 3% 10%;
  }

  #body-content {
    margin: 2% 4%;
    padding:2% 4%;;
  }

   #index-body-content {
 
    padding:4% 8%;
  }

   .index-body{
       padding:7% 8% 4% 8%;
    }


  nav ul {
      margin: .5% 1%;
  }

   .sarah {
       padding: 4px 80px 4px 24px;

    }
    .portfolio-links {
      padding:0px 18px;
    }

    .nav-links {
     padding-inline-end: 20px;
     padding-right:20px;
    }
    .backHome {
        padding: 0 18px 0 4px;

    }

    .breadcrumbs {
        padding-left:44px;
        padding-top:130px;
    }





}


@media only screen and (max-width: 883px) {
    #body-content {
        padding: 2% 4%;

    }

    #index-body-content {
        padding: 2% 4%;

    }


 .index-body{
       padding:8% 4% 2% 4%;
    }


    nav ul {
        margin: .5% 2%;
    }

    #nav ul li{
      margin:0 1em 0 0;
  }


    
    #content-button{
		width:70%;
	}

  .page-title{
    padding: 2px 16px;
    margin: 3% 10%;
  }
  
  /*#nav ul li{
     margin: 1% 3% 1% 0%;

  }*/

  .right{
    text-align:right;
    margin-left:44%;

  }
	
}

@media only screen and (max-width: 835px) {
  .right{
    margin-left:40%;

  }
  
  /*Single column image for responsive*/
  .single-image {
      width:90%
  }
  .image-caption {
      margin: 1em 1em;
  }
  

  /*end of single column image for responsive*/


}

@media only screen and (max-width: 790px) {
  #about-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }

  

}


@media only screen and (max-width: 775px) {
  .right{
    margin-left:36%;
  }

  #about-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }


  .landing-left{
    width:99.33%;
  }

  .landing-left img{
    float:none;
  }

  .landing-right{
    width:99.66%;
    padding:20px 0;
    text-align:center;
  }

  .landing-right p{
      margin-top:0;
  }

    #content-button{  
      float:none;
      text-align:center;
  }



}


@media only screen and (max-width: 745px) {
  .right{
    margin-left:33%;
  }
  .index-body{
       padding:16% 4% 4% 4%;
    }
}


@media only screen and (max-width: 700px) {
  #nav ul li{
     /*padding: 23px 30px;*/
     padding: 20px 8px;
      margin:0 1em 0 0;
  }
   .right{
    margin-left:30%;
  }

  .page-title{
    font-size: 1.7em;
    padding: 2px 10px;
  }
  #nav {
      border-bottom:solid 1px #3818803b;
    }

  #portfolio-menu {
  display:none !important;
 
}
  
  
  
}

@media only screen and (max-width: 660px) {
  .left{
     text-align: center;
  }

   .right{
    text-align: center;
    margin-left:0;
  }

    #work-content{
      margin:3%;
  }

  #colored-work-content{
      margin:3%;
  }

    #body-content{
        margin:1%;
    }

    #index-body-content{
        margin:1%;
    }

     .index-body{
       margin:1%;
    }

    nav ul {
        margin: 1%;
    }
    #nav ul li{
      margin:0 .5em 0 0;
  }


  
}


@media only screen and (max-width: 580px) {

  .page-title{
    font-size: 1.5em;
    padding: 8px 16px;
    margin: 3% 5%;
  }
  #nav ul li:last-child {
     padding: 20px 50px;

  }
  
  #work-content{
      margin:3%;
  }

  #colored-work-content{
      margin:3%;
  }


  .nav-links li {
      padding:0 30px;
}
  

    .sarah {
       padding: 4px 10px 4px 0px;

    }

    .sarah li:last-child {
      padding-left:0px !important;
    }

    .nav-links {
     padding-right:20px;
     padding-top:4px;
     padding-bottom:4px;
     float:none;
     padding-left:0px;
    }
 

    .breadcrumbs {
        padding-left:28px;
        padding-top:100px;
    }

    #sarah-div {
      display:inline-block;
    }

    #nav-links-div {
      display:inline-block;
      float:center;
    }

    #nav {
      display:block;
    }

    #nav ul li:last-child {
        padding: 0px 16px;
    }

    .sarah {
      vertical-align:middle;
      float:none;
    }





  
}


@media only screen and (max-width: 520px) {
    #body-content{
		text-align:center;
		margin:1%;
	}

  #index-body-content{
    text-align:center;
    margin:1%;
  }
    nav ul {
        margin: 1%;
    }

  #nav ul li:last-child {
     padding: 0px 20px;

  }

  #nav ul li{
     margin: 0px 0px;

  }

  .sarah {
    vertical-align:middle;
    float:none;
  }

   .sarah li:last-child {
      padding-left:2px !important;
    }


    #work-content{
    text-align:left;
    margin:3%;
    }

    #colored-work-content{
    text-align:left;
    margin:3%;
    }


    .work-project-name {
        font-size: 1.6em;
        padding-top: 1%;
        padding-bottom: 1%;
    }
  
  .span_2_of_2, .span_1_of_2,.span_3_of_3, .span_2_of_3, .span_1_of_3  {
      width: 100%;
      padding-bottom: 4%;
  }

      .index-body{
       padding:24% 4% 4% 4%;
    }




	
}




@media only screen and (max-width: 400px) {

      .index-body{
       padding:28% 4% 4% 4%;
    }


@media only screen and (max-width: 345px) {

      .index-body{
       padding:42% 4% 4% 4%;
    }


  
}




/*end of overall responsive stufF*/