body, html {
	width: 100%;
	height: 100%
}
.shadow {
text-shadow: 3px 0px #353535;
}

body {
	font-family: 'Helvetica Neue', Arial, sans-serif;
	/* color: #3030; */
}

.card-img {
    width: 100%;
    border-radius: 0px;
}


.card-img-top {
    width: 100%;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

.card {
	border-radius: 0px;
	margin-top: 2rem;
	margin-bottom: 2rem;
    min-width: 20rem;
}

ul {
    padding: 1rem;
    
}

.headline {
	padding-top: 3rem;
}




hr {
	max-width: 50px;
	border-width: 3px;
	border-color: #353535
}
hr.light {
	border-color: #fff
}
a {
	color: #353535;
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	transition: all .2s
}
a:hover {
	color: #353535
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
	text-transform: uppercase;
}
.bg-primary {
	background-color: #353535!important
}
.bg-dark {
	background-color: #212529!important
}
.text-faded {
	color: rgba(173, 173, 173, 0.7);
}
.section2 {
	padding: 0rem 0;
	margin-bottom: 2rem;
}

section3 {
	padding: 4rem 0;
}

section {
	padding: 8rem 0;
}
.section-heading {
	margin-top: 0
}
::-moz-selection {
color:#fff;
background:#212529;
text-shadow:none
}
::selection {
	/* color: #353535; */
	/* background: #212529; */
	text-shadow: none;
}
img::selection {
	color: #fff;
	background: 0 0
}
img::-moz-selection {
color:#fff;
background:0 0
}
#mainNav {
	border-bottom: 1px solid rgba(33,37,41,.1);
	background-color: #fff;
	font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	transition: all .2s;
	color: #353535;
}
#mainNav .navbar-brand {
	font-weight: 700;
	text-transform: uppercase;
	color: #353535;
	font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif
}
#mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
	color: #353535
}
#mainNav .navbar-nav>li.nav-item>a.nav-link, #mainNav .navbar-nav>li.nav-item>a.nav-link:focus {
	font-size: .9rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #212529
}
#mainNav .navbar-nav>li.nav-item>a.nav-link:focus:hover, #mainNav .navbar-nav>li.nav-item>a.nav-link:hover {
	color: #353535
}
#mainNav .navbar-nav>li.nav-item>a.nav-link.active, #mainNav .navbar-nav>li.nav-item>a.nav-link:focus.active {
	color: #353535!important;
	background-color: white;
}
#mainNav .navbar-nav>li.nav-item>a.nav-link.active:hover, #mainNav .navbar-nav>li.nav-item>a.nav-link:focus.active:hover {
	background-color: white;
}

.gray-background {
	background: linear-gradient(270deg, #686868, #ffffff, #b3b3b3);
background-size: 600% 600%;
}

.top-area {
	margin-top: 75px;
}

@media (min-width:992px) {
#mainNav {
	border-color: transparent;
	background-color: transparent
}
#mainNav .navbar-brand {
	color: rgba(255,255,255,.7)
}
#mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
	color: #fff
}
#mainNav .navbar-nav>li.nav-item>a.nav-link {
	padding: .5rem 1rem
}
#mainNav .navbar-nav>li.nav-item>a.nav-link, #mainNav .navbar-nav>li.nav-item>a.nav-link:focus {
	color: #353535;
}
#mainNav .navbar-nav>li.nav-item>a.nav-link:focus:hover, #mainNav .navbar-nav>li.nav-item>a.nav-link:hover {
	color: #35353599
}
#mainNav.navbar-shrink {
	border-bottom: 1px solid rgba(33,37,41,.1);
	background-color: #fff
}
#mainNav.navbar-shrink .navbar-brand {
	color: #353535
}
#mainNav.navbar-shrink .navbar-brand:focus, #mainNav.navbar-shrink .navbar-brand:hover {
	color: #353535
}
#mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link, #mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:focus {
	color: #212529
}
#mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:focus:hover, #mainNav.navbar-shrink .navbar-nav>li.nav-item>a.nav-link:hover {
	color: #353535
}
}

header.masthead-about {
	/* padding-top: 10rem; */
	/* padding-bottom: 10rem; */
	background-repeat: no-repeat;
	background-image: url('http://murphygraphicdesign.com/images/murphy-headshot2.JPG');
	height: 35rem;
}

#test {
	padding-top: 10rem;
	padding-bottom: calc(10rem - 56px);
    background-image:  url("https://media.giphy.com/media/Ph0oIVQeuvh0k/giphy.gif");
    background-size: cover;


}

#myBtn {
  font-family: 'Press Start 2P', cursive;
  color: #ffffff;
  background-color: #92CD41;

}

#myBtn:hover {

  font-family: 'Press Start 2P', cursive;
  color: #ffffff;
  background-color: #4AA52E;

}
#myBtn:active {

  font-family: 'Press Start 2P', cursive;
  color: #ffffff;
  background-color: #92ce40;
   box-shadow: inset 0px 0px 10px rgb(70 121 0);

}

header.masthead hr {
	margin-top: 30px;
	margin-bottom: 30px
}
header.masthead h1 {
	font-size: 2rem
}
header.masthead p {
	font-weight: 300
}

@media (min-width:768px) {
header.masthead p {
	font-size: 1.15rem
}
}

@media (min-width:992px) {
header.masthead {
	height: 100vh;
	height: 700px;
	padding-top: 0;
	padding-bottom: 0;
}
header.masthead h1 {
	font-size: 3rem
}
}

@media (min-width:1200px) {
header.masthead h1 {
	font-size: 4rem
}
	
	
}
.service-box {
	max-width: 400px
}
.portfolio-box {
	position: relative;
	display: block;
	max-width: 650px;
	margin: 0 auto
}
.portfolio-box .portfolio-box-caption {
	position: absolute;
	bottom: 0;
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
	opacity: 0;
	color: #fff;
	background: rgba(52, 54, 53, 0.49);
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	transition: all .2s;
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
	position: absolute;
	top: 50%;
	width: 100%;
	transform: translateY(-50%);
	text-align: center
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category, .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
	padding: 0 15px;
	font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
	font-size: 18px
}
.portfolio-box:hover .portfolio-box-caption {
	opacity: 1
}
.portfolio-box:focus {
	outline: 0
}

@media (min-width:768px) {
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
	font-size: 16px
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
	font-size: 22px
}
}
.text-primary {
	color: #353535!important
}
.btn {
	font-weight: 700;
	text-transform: uppercase;
	border: #FFFFFF;
	border-radius: 0px;
	font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif
}
.btn-xl {
	padding: 1rem 2rem
}
.btn-primary {
	background-color: transparent;
	border-color: #ffffff
}
.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
	color: #ffffff;
	background-color: #transparent!important
}
.btn-primary:active, .btn-primary:focus {
	box-shadow: 0 0 0 .2rem rgba(240,95,64,.5)!important
}


.who-i-am{

background-color: white;
padding-top: 5rem !important;
	}

.no-bullet li{

	text-decoration: none;
	list-style-position: inside;
    list-style-type: none;


}

#contact {
	background-color:white;
}


#head-shot
{

  border-radius: 15%;}

#about {
	background-image: url("http://murphygraphicdesign.com/images/murphy-headshot4.JPG") !important;
    background-size: cover;
	background-attachment: fixed;
    background-position:left;
    background-repeat: no-repeat;
  
	
}


.philosophy {
	background-color: #0000006e;
	padding: 25px;
}


.special-view {
	
	width: 100%;
	margin-top: 2rem;
}


.card-blockquote {
	padding: 2rem;
	height: 455px;

}



.slideRight{
	animation-name: slideRight;
	-webkit-animation-name: slideRight;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes slideRight {
	0% {
		transform: translateX(-150%);
	}
	50%{
		transform: translateX(8%);
	}
	65%{
		transform: translateX(-4%);
	}
	80%{
		transform: translateX(4%);
	}
	95%{
		transform: translateX(-2%);
	}			
	100% {
		transform: translateX(0%);
	}	
}

@-webkit-keyframes slideRight {
	0% {
		-webkit-transform: translateX(-150%);
	}
	50%{
		-webkit-transform: translateX(8%);
	}
	65%{
		-webkit-transform: translateX(-4%);
	}
	80%{
		-webkit-transform: translateX(4%);
	}
	95%{
		-webkit-transform: translateX(-2%);
	}			
	100% {
		-webkit-transform: translateX(0%);
	}
}