@charset "utf-8";
/* CSS Document */
@font-face {
  font-family: 'Mate SC';
  font-style: normal;
  font-weight: 400;
  src: local('Mate SC Regular'), local('MateSC-Regular'), url(https://fonts.gstatic.com/s/matesc/v6/-nF8OGQ1-uoVr2wK-iLT9g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jura';
  font-style: normal;
  font-weight: 600;
  src: local('Jura SemiBold'), local('Jura-SemiBold'), url(https://fonts.gstatic.com/s/jura/v9/z7NUdRfiaC4VVRttRCVi0aTV.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jura';
  font-style: normal;
  font-weight: 600;
  src: local('Jura SemiBold'), local('Jura-SemiBold'), url(https://fonts.gstatic.com/s/jura/v9/z7NUdRfiaC4VVRttRCti0Q.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.name {
	background-color: aliceblue;
	display: inline-block;
	width: 100%;
}


.name h1{
	text-align: center;
	font-family:"mate sc", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	font-weight: 400;
	text-transform: capitalize;
	font-size: 3.75rem;
	color: black;
	display: block;
	
}

 .name h3{
	text-align: center;
	font-family: "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	font-weight: 400;
	font-size: 1.375rem;
	color: black;
	
}

.topnav {
  overflow: hidden;
  background-color: aliceblue;;
}

.topnav a {
  float: left;
  color: black;
  text-align: center;
  padding: 0.80% 1%;
 text-decoration: none;
  font-size: 1.0625rem;
	font-family: Jura, Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
	font-weight: 600;
}

.topnav a:hover {
  background-color:#B8B9BC;
  color: black;
	
}

.topnav a.active {
  background-color:cornflowerblue;
  color: black;
}

.title,
.cv-title {
	font-family: "Jura", Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
	text-transform: uppercase;
   text-align:left;
	font-size: 1.25rem;
	padding-left: 7%;
	padding-top: 5%;
}

.notes {
padding-bottom: 40px;
}

 .notes p {
	 width: 70%;
	 padding-left: 12%;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	 font-size: 1.2rem;
}
.gallery{
display: flex;
	flex-wrap: wrap;
justify-content: space-around;
	width:80%;
	padding-left: 9%;
}

div.desc {
    padding: 15px;
    text-align: center;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	 font-size: 1.1rem;
	padding-bottom: 50px;
}

.works {
display: flex;

	justify-content: space-around;
}

.works img,
.gallery img {
    border: 1px solid #ddd;
    border-radius: 4px; 
    padding: 3%;
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
	margin: 0px;
}

.projects {
	display: flex;
	padding-bottom: 5%;
	justify-content: space-around;
}

.projects img,
#studio img
{
	max-width: 100%;
	height: auto;
	
	box-sizing: border-box;
}

 .projects p
{
	
text-align: center;
background: #C3C3C3;
	 color: white;
	 font-size: 1.5rem;
	 font-family: "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	 padding: 1%;
	
    }
.projects a {
	text-decoration: none;
}

.projects a:hover {
  background-color:#B8B9BC;
  color: black;
}


.hero {
	background-image: url(images/background.jpg);
	background-repeat: no-repeat;
	height: 600px;
	width:100%;
	background-size: 100% auto;
}

.button {
  border-radius: 10px;
  background-color: #333;
  color: white;
  text-align: center;
  font-size: 1.75rem;
  padding: 2% 4%;
  transition: all 0.5s;
  cursor: pointer;
  margin: 15% 40%;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

.snakes {
	padding-bottom: 70px;
}

#studio{
	float: left;
	padding: 0% 6% 0% 12%;
	
}

figcaption{
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
}

.cv{
	overflow: auto;
}

.cv-title{
	padding-top: 0;
}

.fb {
	background-color: #333;
	padding: 15px;
	  display: flex;
  justify-content: space-around;
  align-items: center;
	clear: left;
}

.fb p {
	
	color: white;
	
	font-size: 1.5rem;
	
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
}


#copyright p{
	text-align: center;	
	color: grey;
		font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
}
			
.facebook-btn a:hover{
	 opacity: 0.5;
}


@media (max-width: 800px){
	.works{
		flex-wrap: wrap;
	}
}


@media (max-width: 1600px){	
	.projects img {
		border: 4px solid white;
	}
	
	.projects p{
		border: 4px solid white;
	}
	

}

@media (max-width: 600px){
	html{
		font-size: 11px
	}
	.topnav a{
		font-size: 1.5rem;
		padding: 2% 2%;
	}
}
@media (max-width : 375px ){
	.projects{
		flex-wrap: wrap;
}
	.notes p{
		width: 80%;
		padding-left: 7%;
	}
}

@media (max-width: 1100px){
	#studio{
		float: none;
	}
	

}