/*

font-family: 'Josefin Sans', sans-serif;
font-family: 'Sorts Mill Goudy', serif;
font-family: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif;

<link href='http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy|Josefin+Sans' rel='stylesheet' type='text/css'>
https://www.google.com/fonts#UsePlace:use/Collection:Montserrat|Ubuntu|Droid+Serif|Poiret+One|Lobster|Josefin+Sans|Questrial|Covered+By+Your+Grace|Abril+Fatface|Josefin+Slab|Ropa+Sans

dark teal 1d767c
teal 	15a3ad
light green A5D0A8
dark pink DA4167
light blue 8EA8C3
pale green CBF7ED
bright pink #e9009d
light pink ff66a6

dark blue #242C6D
red/pink #f16463
whiteish #EFECEA
*/
 


/* Global rules */
html {
  scroll-behavior: smooth;
}

body {
	font-family: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif; 
	font-size: 18px;  
}



/* Headings */
h1 {
	font-family: 'Josefin Sans', sans-serif;
	color: #f16463 ; 
	text-align: center;
}
 
h2{
	color: #242C6D ; 
	text-align: center;
	font: italic 30px Baskerville, serif;
}

h2.about {
	color: #f16463 ; 
}

h3 {
	font-family: 'Josefin Sans', sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-align: center;
	font-size: .8em;
	margin: 10px;
	color:rgba(0,0,0,.5);
}

h4 { 
	font-family: 'Josefin Sans', sans-serif; 
	color: #242C6D;
}

h5 {
	font-family: 'Josefin Sans', sans-serif;
	text-transform: uppercase;
	display: inline;
	font-size: 1em;
	letter-spacing: 2px; 
	color:rgba(0,0,0,.5);
}

h6 {
	font-size: 1em;  
	text-align: center;
	font-family:Baskerville, serif;
}



/* Navigation */
.navbar {
	font-family: 'Josefin Sans', sans-serif;
	font-size: 18px; 
	text-transform: uppercase;    
}

.logo { 
	max-width: 60px;
}


/* Footer */
footer {
	background: #242C6D;
	padding: 30px 0 20px 0;
	color: #dddddd;
}
    
footer hr {
	border-color: #EFECEA;
	margin: 0 auto;
	width: 60%;
}
 

svg {
	fill: #ffffff;
	height:30px;
	width: 30px;
	display: inline;
	margin: 10px;
	transition: all 0.3s ease 0s;
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
	-ms-transition: all ease 0.5s;
}


.email svg { 
	height: 40px;
	padding: 4px; 
}

svg:hover {
  border-radius: 100%;
  color: #f16463;
  fill: #f16463;
  transform: scale(1.5);
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
     -moz-transform: scale(1..5);
	   -o-transform: scale(1.5);
	  -ms-transform: scale(1.5);
  -webkit-transition: background-color 0.5s, -webkit-transform 0.5s ease-out;
          transition: background-color 0.5s, transform 0.5s ease-out;
}

.space {
	margin: 60px;
}

.center { 
   margin: 0 auto;  
   text-align: center;
}
 

.img-rounded:hover {
	color: #FFFFFF;
	opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
}


.img-responsive  {
	border-radius: 5px; 
	width: 25vw;	
	margin: 0 auto; 
}

a {
	color: inherit;
	text-decoration: inherit;
	letter-spacing: 2px;
}

.portfolioContainer{
	align-items: center; 
}



.btn {
	font-weight: 600;
	color: #0b0b0b;
	background: transparent;
	border: 0;   
	text-align: center;
	margin: 20px auto;
} 
 

.btn:hover {
	color: #fff;
	background: #f16463;
	
} 

.about { 
	margin: 0 40px 0 40px;
}

.about .btn {
	border: 1px solid #0b0b0b;
	padding: 16px 20px;
	margin: 10px;
}

.about p{
	line-height: 2em;
	padding: 40px 40px 0 40px;
}


.about-img{
	background-image: url("/img/about/_headshot.png"); 
	height: 300px; 
	background-repeat: no-repeat;
	background-size: contain;  
	margin-left:80px;
	width: 30vw;
 
}

.about-img:hover{
	background-image: url("/img/about/_halfdome.png"); 
}
 

/* instagram widget */
.lightwidget-widget {
	border: 0px;
    overflow: hidden;
    height: 50px;
	width: 80%;
}


.insta{
	margin: 0 auto;
	width: 90%
}

.insta a{
	margin-left:100px;
}
 
.insta svg {
	width: 60px;
	height: 60px;
	fill: #f16463;
	transform: scale(1.5);
	-webkit-transform: scale(1.5);
			transform: scale(1.5);
		-moz-transform: scale(1..5);
		-o-transform: scale(1.5);
		-ms-transform: scale(1.5);
	-webkit-transition: background-color 0.5s, -webkit-transform 0.5s ease-out;
			transition: background-color 0.5s, transform 0.5s ease-out;
}

.insta svg:hover{
	border-radius: 100%; 
	fill: #f16463;
	transform: scale(1.5);
	-webkit-transform: scale(1.5);
			transform: scale(1.5);
		-moz-transform: scale(1..5);
		-o-transform: scale(1.5);
		-ms-transform: scale(1.5);
	-webkit-transition: background-color 0.5s, -webkit-transform 0.5s ease-out;
          transition: background-color 0.5s, transform 0.5s ease-out;
}

.portfolioContainer {
	margin: 0 auto;
	justify-content: space-around;
	
}
 
.grid a:hover{
	color: #fff;  
	text-decoration: none;
}

/*  
.modal-header {
      margin: 2px;
      padding-top: 10px;
      padding-bottom: 5px; 
      background: #fff;

}

.modal-body {
    max-height: 82vh;
    overflow-y: auto;
    margin-bottom: auto;
}

.modal-lg {
  width: 100%; 
  left: 5%;  
  margin-left:auto;
  margin-right:auto; 
}

.modal-footer {
 max-height: 40px;
}

.modal-footer .btn {
margin-top: -12px;
}


.modalrows {
	display: block;
	padding: 5px;
	padding-top: 100px;
	margin-top: -50px;
	margin-bottom: 10px;
}

*/
  

/*  
.fixed-menu-bar {
  position: fixed;
  top: 50px;
  left: 10px;
  width: 100%;
  z-index: 1050;
  background-color: #fff;
} 


.design-nav {
	margin: 10px;
	padding: 0px;
    text-align: justify;
    min-width: 500px;
}


.design-nav h4 {
	font-family: 'Josefin Sans', sans-serif;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.design-nav:after {
    content: '';
    display: inline-block;
    width: 100%;
}


.design-nav li {
	display: inline-block;
}



.methods h5 {
     font-size: 1em;
     letter-spacing: 1.5px;
     height: 50px;
     margin-top:50px;
}

.methods .btn {
	font-weight: 600;
	color: #0b0b0b;
	background: transparent;
	border: 0;
	border-radius: 0;
	text-transform: uppercase;
	text-align: center;
	margin: 2px auto;
	max-padding: 15px;
	
} 

.methods .btn:hover {
	color: #fff;
	background: #f16463;
}


.article {
	padding: 10 10 20 20;
	text-align: left;
}


.paragraph {
	padding: 40 40 40 40;
	text-align: center;
	}

img.paragraph {
	padding-bottom: 20px;

}


a.readmore {
	color: #f16463;
}

   
.portfolioFilter a { 
    margin: 10px; 
    color:#666;
    text-decoration:none;
}
 
.portfolioFilter a.current { 
    font-weight:bold;
}

 
.isotope-item {
    z-index: 2;
}
.isotope-hidden .isotope-item {
    pointer-events: none;
    z-index: 1;
}
.isotope,
.isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -o-transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -o-transition-property: transform, opacity;
}
   

.hero {
	position: relative;
	height: 475px;
	margin-bottom: 10px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.hero img {
	max-height: 500px;
	}

*/


/* 
.across3 {
  position: relative;
  float: left;
  width: 400px;
  height: 400px;
  margin: 5px;
  color: white;
  font-size: 50px;
}


.span3 {
	margin: 20px auto;
	display: inline-block;
	text-align: center;
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.span3:before, .span3:after
{
	content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.span3:after
{
	right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}



.boxes {
	margin: 20px auto;
	display: inline-block;
	text-align: center;
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.boxes:before, .boxes:after
{
	content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.boxes:after
{
	right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}


.across4 {
		padding: 2px;
		display: inline-block;
		text-align: center;

}

.span2 {
	padding: 2px;
	display: inline-block;
	text-align: center;
	margin: 0 auto;
}

.span6 {
	display: block;
	text-align: center;
}



.portfolioFilter a { 
    margin: 10px; 
	color:#666;
	text-decoration:none;
}

.portfolioFilter a.current { 
    font-weight:bold;
}


.isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
.isotope,
.isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}
 */



/*** Responsive styles ***/
/* X-Small breakpoint only */
@media (max-width: 767px) {

			section:before {
				height: 60px;
				content: "";
				display:block;
			}
			.space{
				margin:4px;
			}


			nav button{
				display: none;
			}

			h1,h2{
				font-size: 1em; 
			}
			
			h3,h4,h5,h6 {
				font-size: .7em;
			}
		 
			.logo {
					max-width: 40px; 
				}

			.img-rounded{
				border-radius: 5px; 
				display: block;
			}

			.btn {
				margin: 4px;
			}

			footer{
				padding:  0;
			}

			svg {
				height: 20px;
				margin: 6px;
			}
			
			#about *{
				margin: 0px; 
				padding: 4px;
			}

			.insta{
				display: none;
			}

			.img-responsive{
				width: 80vw;
			}

}
 


/* Small/medium breakpoints only */
@media (min-width: 768px) and (max-width: 1199px) {

		section:before {
			height: 100px;
			content: "";
			display:block;
		}
  
		.space {
				margin: 20px;
			}

		h3,h4,h5,h6 {
			font-size: .7em;
		}

		.about-img{
			margin-left:20px;
		}

		.insta a{
			margin-left: 4px;
		}

  

}
  


/* Large breakpoint only */
 @media (min-width: 1200px) {
	
 
			main {
				margin: 0 auto; 
				width: 90vw;
			}

			.logo {
				max-width: 140px;
			}

			.navbar { 
				padding: 20px;
			}

			section:before {
				height: 160px;
				content: "";
				display:block;
			}

				/* .hero {
					height: 600px;
				}

				.hero img {
					max-height: 600px;
				}

				.across3 {
				width: 30%;
				}

				.span3 {
					width: 30%;
				}

				.span2 {
					width: 32%;
				}

				.span6 {
					width: 50%;
				}

				.across4 {
					width: 25%;
				}

				.robin {
					padding: 20px 80px 80px 80px;
					margin-left: 5% ;
					margin-right: 5%; 
				} */

}