/* periwinkle color: #d4bef4, rgb(212,190,244) */
/* purple color: rgb(70,54,124) */

html {
	margin: 0;
	padding: 0;
}

.row {
	margin:0;
}

@media (min-width:250px){.container{max-width:700px}}
@media (min-width:768px){.container{max-width:900px}}
@media (min-width:992px){.container{max-width:1100px}}
@media(min-width:1200px){.container.openingpage{max-width:1300px}}


/* 
@media (min-width:500px){.headercontainer{max-width:100%}}
@media (min-width:768px){.headercontainer{max-width:100%}}
@media (min-width:992px){.headercontainer{max-width:100%}}
@media(min-width:1200px){.headercontainer.openingpage{max-width:100%}}
 */



.carousel {
	opacity: 60%;
}


a:link {
	text-decoration: none;
}

a:hover {
	color: rgba(70,54,124,.6);
	text-decoration: none;
}

.fa {
	color: gray;
}

.fa:hover {
	color: rgb(70,54,124);
}

.circle-icon {
    background-color: rgb(70,54,124);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    text-align: center;
    line-height: 35px;
    vertical-align: middle;
}

.circle-icon:hover{
	background-color: rgb(212,190,244);
}

.fa.fab.fa-linkedin{
	color: rgb(70,54,124);
}

.fa.fab.fa-linkedin:hover{
	color: rgb(212,190,244);
}


.fa.fab.fa-linkedin.circle-icon{
	color: #fff;
}

/* ------------------------------------- */
.fa.fab.fa-behance{
	color: rgb(70,54,124);
}

.fa.fab.fa-behance:hover{
	color: rgb(212,190,244);
}

.fa.fab.fa-behance.circle-icon{
	color: #fff;
}

/* ------------------------------------- */
.fa.fab.fa-envelope{
	color: rgb(70,54,124);
}

.fa.fab.fa-envelope:hover{
	color: rgb(212,190,244);
}

.fa.fab.fa-envelope.circle-icon{
	color: #fff;
}


.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
}

h2, h4, h5 {
	color: rgb(70,54,124);
}

header.masthead {
/* 	background-image: url(img/bheader7.jpg); */
/* 	background-image: url(img/yellowheader2.jpg); */
/* 	background-image: url(img/newheader.jpg);	 */
/* 	background-attachment: fixed; */
background-color:#d4bef4;
height: auto;
}

.headingtext {
	margin:0px;
	float:right;
}

@media (min-width: 400px){.headingtext {
	width:100%;
	margin-top: 70px;
}}

@media (min-width: 992px){.headingtext {
	width:45%;
	margin-top: 0px;
}}

@media (min-width: 1200px){.headingtext {
/* 	width:50%; */
	margin-top: 110px;
}}

#mainNav.navbar-shrink .navbar-brand {
	visibility: visible;
	margin-left:20px;
}

@media (min-width: 992px){.navbar-brand {
	visibility: hidden;
}}

#mainNav.navbar-shrink .navbar-brand .navsocial{
	visibility: visible;
}

@media (min-width: 992px){.navsocial{
	visibility: hidden;
	display: none;
}}


/* ------------------ logo -------------------------- */
.logo {
    height: 250px;
    position: absolute;
    margin: 0px;
    padding: 50px;
    opacity:90%;
    z-index:1;
}

@media (max-width: 1199px){.logo {
	visibility: hidden;
}}

@media (min-width:250px){.aboutlogo{width:15%;}}
@media (min-width:768px){.aboutlogo{width:20%;}}
@media (min-width:992px){.aboutlogo{width:90%;}}
@media(min-width:1200px){.aboutlogo{width:90%;}}


.bio {
	margin-top: 180px;
}

@media (max-width: 991px){.bio {
	margin-top:100px;
}}



@media (min-width: 400px){.headerbuttons {
    padding-left: 0px;
    text-align: left;
}}

@media (min-width: 992px){.headerbuttons {
    padding-left: 590px;
}}

@media (min-width: 1200px){.headerbuttons {
    padding-left: 645px;
}}

@media (min-width: 1300px){.headerbuttons {
    padding-left: 700px;
}}



.button1 {
	padding-right:45px;
}


/* amber lee nav */
#mainNav .navbar-brand {
	color: rgb(70,54,124);
}

/* nav regular state */


/* nav hover state */
@media (min-width: 992px){#mainNav .navbar-nav>li.nav-item>a.nav-link, #mainNav .navbar-nav>li.nav-item>a.nav-link:focus {
    color: white;
    border-bottom: 2px solid rgba(0,0,0,0);
    padding-top: 20px;
}}

@media (min-width: 992px){#mainNav .navbar-nav>li.nav-item>a.nav-link:hover {
    color: rgba(255,255,255,.5);
    border-bottom: 2px solid rgba(255,255,255,.5);
}}

/* nav regular state once scrolled */
#mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link, #mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:focus {
	color: gray;
    padding-top: 11px;
}
#mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link, #mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:focus{
	color: gray;
}

.navbar-light .navbar-toggler{
    border-color: rgba(70,54,124,1.0);
}

hr {
    max-width: 1200px;
    border-width: 2px;
    align-items: center;
    border-color: rgb(70,54,124);
}

.vct{
    color: white;
    font-weight: 400;
}

.vct:hover {
	color: rgba(255,255,255,.5);
}

.skills img{
    width: 100%;
}

.btn {
    border-radius: 0px;
}

.btn:hover{
	background-color:rgb(70,54,124);
}

.btn:hover{
	border: solid 2px rgb(70,54,124);
}

.btn-primary {
	background-color: rgba(70,54,124,.0);
    border: solid 2px #fff;
}

.btn-primary:not([disabled]):not(.disabled).active, .btn-primary:not([disabled]):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: rgb(70,54,124);
    border-color: rgb(70,54,124);
}

.recentwork {
    color: #fff;
    border: solid 2px #fff;
/*     margin-bottom:20px; */
}

.recentwork:hover {
    color: rgb(70,54,124);
    background-color: #fff;
}

.message {
    color: #fff;
    background-color: rgb(70,54,124);
    border: solid 2px #fff;
}

.message:hover {
    color: rgb(70,54,124);
    background-color: #fff;
}

.fullsite {
	color: rgb(70,54,124);
	border: solid 2px rgb(70,54,124);
}

.fullsite:hover {
    color: #fff;
    background-color: rgb(70,54,124);
}



#header-container{
width:100%;
height:900px;
border-left:none;
border-right:none;
position: relative;
padding:20px;
margin-bottom:500px;
}

.container my-auto openingpage{
width:100%;
height:900px;
border-left:none;
border-right:none;
position: relative;
padding:20px;
margin-bottom:500px;
}

/* hi i'm amber... */
.text-faded {
	color: white;
}

.project-name {
	font-weight: 500;
	letter-spacing: .5px;
}

.titles {
    width: 100%;
}

.websitetitles {
    width: 33%;
    float: left;
}

.websitetitles2 {
    width: 66%;
    float: right;
}

.titles2 {
    width: 50%;
    float: left;
}

.titles3 {
    width: 50%;
    float: right;
}



a.websitetitle {
    color: rgb(70,54,124);
    text-decoration: none;
    text-transform: uppercase;
    
}

a.websitetitle h5 {
    text-align: center;
}



/* portfolio */
@media (min-width: 1315px){ #portfolio {
/* 	background-color: rgb(240,240,240); */
/*     background-attachment: fixed; */
}}

#portfolio .portfolio-item {
  right: 0;
  margin: 0 0 15px;
}

#portfolio .portfolio-item .portfolio-link {
  position: relative;
  display: block;
  max-width: 400px;
  margin: 0 auto;
  cursor: pointer;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
  opacity: 0;
/*   background: rgba(70,54,124,0.9); */
  background: rgba(212,190,244,0.9);
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover {
  opacity: 1;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
  font-size: 20px;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 20px;
  margin-top: -12px;
  text-align: center;
  color: white;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
  margin-top: -12px;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
  margin: 0;
}

#portfolio .portfolio-item .portfolio-link {
  border-left: 2px solid rgba(70,54,124,.05);
  border-top: 2px solid rgba(70,54,124,.05);
  border-right: 2px solid rgba(70,54,124,.05);
}

#portfolio .portfolio-item .portfolio-caption {
  max-width: 400px;
  margin: 0 auto;
  padding: 25px;
  text-align: center;
  background-color: rgba(70,54,124,.05);/* 
  border: 2px solid rgba(70,54,124,.05);
  border-left: 2px solid rgba(70,54,124,.05);
  border-bottom: 2px solid rgba(70,54,124,.05);
  border-right: 2px solid rgba(70,54,124,.05);
 */
}

#portfolio .portfolio-item .portfolio-caption h4 {
  margin: 0;
  text-transform: none;
}

#portfolio .portfolio-item .portfolio-caption p {
  font-size: 14px;
/*   font-style: italic; */
  margin: 0;
}

#portfolio {
  z-index: 2;
}

@media (min-width: 767px) {
  #portfolio .portfolio-item {
    margin: 0 0 30px;
  }
}

.portfolio-modal {
  padding-right: 0px !important;
}

.portfolio-modal .modal-dialog {
  margin: .9rem;
  max-width: 100%;
}

.portfolio-modal .modal-content {
  padding: 30px 0;
/*   text-align: center; */
}

.portfolio-modal .modal-content h2 {
  font-size: 2em;
  margin-bottom: 15px;
  text-align: center;
}

.portfolio-modal .modal-content p {
  margin: 0 20px 30px !important;
}

.portfolio-modal .modal-content p.item-intro {
  font-size: 16px;
  font-style: italic;
  margin: 20px 0 30px;
  font-family: 'Droid Serif', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

.portfolio-modal .modal-content ul.list-inline {
  margin-top: 0;
  margin-bottom: 30px;
}

.portfolio-modal .modal-content img {
  margin-bottom: 30px;
}

.portfolio-modal .modal-content button {
  cursor: pointer;
}

.portfolio-modal .close-modal {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 55px;
  height: 75px;
  cursor: pointer;
  background-color: transparent;
}

/* 
@media (max-width: 767px) {.portfolio-modal .close-modal {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 60px;
  height: 75px;
  cursor: pointer;
  background-color: transparent;
}}

@media (max-width: 650px) {.portfolio-modal .close-modal {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 55px;
  height: 75px;
  cursor: pointer;
  background-color: transparent;
}}
 */

.portfolio-modal .close-modal:hover {
  opacity: 0.3;
}

.portfolio-modal .close-modal .lr {
  /* Safari and Chrome */
  z-index: 1051;
  width: 1px;
  height: 40px;
  margin-left: 35px;
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color: rgb(190,190,190);
}

.portfolio-modal .close-modal .lr .rl {
  /* Safari and Chrome */
  z-index: 1052;
  width: 1px;
  height: 40px;
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  background-color: rgb(190,190,190);
}

@media (min-width: 575px){.portfolio-caption {
	height:120px;
}}

@media (min-width: 1200px){.portfolio-caption {
	height:104px;
}}
/* portfolio */




/* design packages */
@media (max-width: 575px){.lastcard {
	margin-bottom: -130px;
}}

/* 
@media (min-width: 1295px){ .packages {
	background-image: url(img/splotches-whitebg.png);
    background-repeat: no-repeat;
}}

@media (min-width: 1500px){ .packages {
	background-image: none;
}}
 */

.packages {
/* 	background-color: rgb(240,240,240); */
/* 	background-image: url(img/splotches-whitebg.png); */
/*     background-repeat: no-repeat; */
    padding-bottom: 3rem;
/*     background-attachment: fixed; */
	background-color:rgb(255,255,255);
}

/* design packages */




/* skills */
section#about {	
	background-image: url(img/splotches.jpg);
/* 	background-attachment: fixed; */
}
/* skills */







/* footer */
.footer {
	background-color: rgb(70,54,124);
	color: #fff;
}

.footercopy {
	padding:33px 0;
}

@media (max-width: 991px){.footercopy {
	padding:20px 0;
}}


.social-buttons {
	padding:15px 0 0 0;
}

@media (max-width: 991px){.social-buttons {
	padding:5px 0 0 0;
}}

@media (max-width: 767px){.social-buttons {
	padding:25px 0 0 0;
}}


.footerresume {
	text-align:right;
	padding:10px 0;
}

@media (max-width: 767px){.footercopy {
	text-align:center;
}}

@media (max-width: 767px){.footerresume {
	text-align:center;
}}


.footeremail {
	color:#fff;
}
.footeremail:hover {
	color: rgba(255,255,255,0.5);
}
/* footer */




/* contact */
#contact {
	height:auto;
}

section#contact .form-group textarea.form-control {
/* 	height:158px; */
}

section#contact {
/* 	padding-bottom:30px; */
}

.form-control {
	padding: .5rem .75rem;
}