/*!
Theme Name: Nadia
Theme URI: http://www.mattboehmdesign.com
Author: Matt Boehm
Author URI: http://www.mattboehmdesign.com
Description: A theme for Nadia Vasrani's portfolio.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: nadia
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Nadia is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
## Custom Styles
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Custom fonts
--------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Acme|Bentham|Lobster|Montserrat|Palanquin+Dark|Sanchez|Satisfy|Zilla+Slab');

*{
	margin: 0;
	padding: 0;
}
#wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.menu-toggle {
  display: none;
}

.header {
  width: 100vw;
  height: 80px;
  padding: 0 25px;
  background-color: white;
  position: fixed;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  z-index: 500;
}
section p {
  font-family: 'Source Serif Pro', serif;
  font-size: 2vh;
  margin-bottom: 20px;
}
section a {
  color: grey;
}
section a:hover {
  color: red;
}

/* MENU STYLES */
.menus {
  margin: 0; display: flex; height: 80px; justify-content: space-between; align-items: center;
}

#primary-menu{;
  margin: 0; padding: 0; display: flex;
}

#primary-menu .menu-item{
 	list-style: none;
	margin-bottom: 0;
	margin-left: 25px;
}

#primary-menu .menu-item a{
  font-family: 'PT Sans', sans-serif;
  font-size: 2.5vh;
  font-weight: 700;
  cursor: pointer;
  color: grey;
  border-left: solid 0.5vw white;
  text-decoration: none;
}

#primary-menu .menu-item a:hover {
  color: black;
}

/* Home menu styles */
#home-menu ul{
  margin: 0; padding: 0; display: flex
}

#home-menu .menu-item{
 	list-style: none;
	margin-bottom: 0;
	margin-left: 25px;
}

#home-menu .menu-item a{
  font-family: 'PT Sans', sans-serif;
  font-size: 2.5vh;
  font-weight: 700;
  cursor: pointer;
  color: grey;
  border-left: solid 0.5vw white;
  text-decoration: none;
}

#home-menu .menu-item a:hover {
  color: black;
}

/* Social Menu Styles */
#social-menu {
  display: flex;
  list-style: none;
}
#social-menu li a{
  font-family: 'PT Sans', sans-serif;
  font-size: 3.5vh;
  cursor: pointer;
  color: grey;
  padding-left: 30px;
}
#social-menu li a:hover {
  color: black;
}

/* HERO STYLES */
#main-content-area {
  width: 100vw;
  overflow: hidden;
}
.head-image{
  width: 100vw;
  height: 100vh;
  position: absolute;
  top:0;
  left:0;
  display: flex;
  justify-content: center;
  align-items:center;
  z-index: 0;
  overflow: hidden;	
}
@media only screen and (orientation: portrait) {
	.head-image{
		top:80px;
		height: inherit;
	}
	.clear{
		top:80px;
		margin-top: 80px;
	}
	.background{
		margin-top: 80px;
	}
}
.head-img{
  width: 100%;
}
.background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 5;
}
.clear{
	width: 100vw;
	height: 100vh;
}
section {
  background-color: white;
  padding: 5% 10%;
}

.background h1{
  font-family: 'PT Sans', sans-serif;
  font-size: 5vw;
  text-shadow: 0 0 50px black;
}

.background h1 a{
  color: white;
  text-decoration: none;
}

.background p{
  color: white;
  font-weight: 300;
  font-family: 'PT Sans', sans-serif;
  font-size: 2.5vw;
  text-shadow: 0 0 50px black;
}

.about blockquote {
  margin: 60px 0 30px 0;
  padding: 2vh 2vh 4vh 2vh;
  font-size: 2.5vh;
  border-left: solid 3px black;
}
.about blockquote p {
  margin-top: 20px;
}

.tabbed-menu {
  display: flex;
  justify-content: space-between;
}
.gal-head {
  font-family: 'PT Sans', sans-serif;
  font-size: 2.3vh;
  font-weight: 700;
  margin-bottom: 3vh;
  cursor: pointer;
  color: black;
  list-style: none;
}

.gal-head:hover {
  text-decoration: underline;
}

.tabbed-menu .selected {
  text-decoration: underline;
}

#gallery {
  margin-top: 50px;
}
.gal-description{
	width: 100%;
	margin-bottom: 5vh;
}
.gal-items{display: none;}

#gallery .gallery-items {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#gallery .gallery-items li {
  list-style: none;
  flex: 48%;
  max-width: 48%;
  margin-bottom: 5vh;
}
#gallery .gallery-items li img {
  max-width: 100%;
}
#gallery .gallery-items li h3 {
  font-family: 'PT Sans', sans-serif;
  font-size: 3.5vh;
  margin-top: 2vh;
  margin-left: 1vw;
}
#gallery .gallery-items li p {
  font-family: 'PT Sans', sans-serif;
  font-size: 1.5vh;
  font-weight: 400;
  color: grey;
  margin-left: 1vw;
}

.hide {
  display: none;
}
/* Contact files */
h1{
	font-family: 'PT Sans', sans-serif;
	font-size: 5.5vh;
	margin-bottom: 30px;
}
form{z-index: 0;}

.textfield{
	font-family: 'Source Serif Pro', serif;
	font-size: 2vh;
	border: solid 3px black;
	box-sizing: border-box;
	padding: 20px;
	width: 100%;
	z-index: -5;
}
textarea{
	resize: vertical;
}

#send-btn{
	font-family: 'PT Sans', sans-serif;
	font-size: 2vh;
	color: white;
	background-color: black;
	padding: 20px;
	width: 100%;
	cursor: pointer;
}

#send-btn:hover{
	background-color: red;
}



/*Blog Styles*/
.flex-wrap{
	display: flex;
	background-color: white;
	justify-content: center;
}
.post-column{
    padding-top: 100px;
}
#blog-head{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 50vh;
  padding-top: 100px;
  box-sizing: border-box;
  background-size: cover;
}
#blog-head h1{
  text-shadow: 0 0 50px black;
  font-size: 6vh;
}
.page-title{
  font-family: 'PT Sans', sans-serif;
  font-size: 5vw;
  color: white;
}
.blogposts{
	border-bottom: solid 1px black;
	margin: 0 10% 10% 10%;
	padding: 0;
	max-width: 50vw;
}
.blogposts:last-of-type{
	border-bottom: none;
}
.blogposts img{
	max-width: 100%;
}
figure .alignleft .alignright{
    max-width: 40%;
}

figure .aligncenter{
    width: 100%;
}
.entry-title{
  font-family: 'PT Sans', sans-serif;
  font-size: 3.5vh;
  margin-top: 3vh;
}
.entry-title a{
	text-decoration: none;
	color: black;
}
.entry-meta{
  font-family: 'PT Sans', sans-serif;
  font-size: 1.8vh;
  font-weight: 400;
  color: grey;
  margin-top: 2vh;
}
.entry-meta a{
  text-decoration: none;
}
.entry-content{
  margin-top: 3vh;
}
.entry-content button{
	margin-top: 50px;
	margin-bottom: 50px;
    padding: 15px;
    background-color: black;
    -webkit-appearance: none;
}
.entry-content button:hover{
    background-color: red;
}
.entry-content button a{
	color: white;
	text-decoration: none;
	background-color: black;
    font-family: 'PT Sans', sans-serif;
    font-weight: 700;
    font-size: 2.3vh;
    padding: 15px;
    cursor: pointer;
}
.entry-content button a:hover{
	background-color: red;
}

/* SINGLE POST */
.single-header{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 80px;
    height: 25vh;
}
.single-header h1{
  font-family: 'PT Sans', sans-serif;
  font-size: 5vw;
  color: white;
  text-shadow: 0 0 50px black;
}

/* BLOG IMAGES */
.alignleft{
    float: left;
    padding-right: 20px;
}
.alignright{
    float: right;
    padding-left: 20px;
}
.aligncenter{
    margin: 0 auto;
    padding: 20px;;
}



/* SIDEBAR */
aside{
	width: 300px;
	height: 100%;
	padding-top: 5vh;
	margin-right: 80px;
	overflow: hidden;
}
aside h2{
	font-family: 'PT Sans', sans-serif;
  	font-size: 5vh;
	margin-bottom: 5vh;
	padding-right: 90px;
}
#featured_post_widget-3{
	margin-bottom: solid 1px black;
}
#rpwwt-recent-posts-widget-with-thumbnails-3 a{
	color: black;
	text-decoration: none;
    font-family: 'PT Sans', sans-serif;
    font-weight: 700;
    font-size: 1.9vh;
}
#rpwwt-recent-posts-widget-with-thumbnails-3 a:hover{
	color: red;
}
.featured-headline{
	margin-top: 15px;
}
.featured-headline a{
	color: black;
	text-decoration: none;
    font-family: 'PT Sans', sans-serif;
    font-weight: 700;
    font-size: 2.9vh;
}
.featured-date{
	margin-top: 15px;
    color: grey;
    font-family: 'PT Sans', sans-serif;
    font-weight: 400;
    font-size: 1.8vh;
}
.widget-area img{
	width: 100%;
}
body.custom-background{
  background-position: center;
  background-size: 150%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@media screen and (max-width: 1800px) {
    .blogposts{
        max-width: 80vw;
    }
}
/* Gallery menu media queries */
@media screen and (max-width: 1200px) {
  .tabbed-menu li {
    font-size: 1.8vh;
  }
  body.custom-background{
	background-size: 150% !important;
	background-attachment: scroll !important;
  }
}
/* Small Screen media queries */
@media screen and (max-width: 1024px) {
  .menu-toggle {
    width: 100%;
    height: 80px;
    font-size: 32px;
    background-color: white;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
	z-index: 100;
  }

  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 80px;
    width: 100vw;
	height: 0px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0);
    overflow: hidden;
	z-index: 10;
  }
	
  /* Main Menu Styles */
  .header .menus {
    width: 100%;
    height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
  }
  #primary-menu{
    flex-direction: column;
  }
  #primary-menu .menu-item{
    font-family: 'PT Sans', sans-serif;
    margin: 3vh 0;
    text-align: center;
    padding: 0;
  }
  #primary-menu .menu-item a{
    font-size: 4vh;
    text-align: center;
    padding: 0;
  }
  #primary-menu .menu-item a:hover {
    border: none;
  }

  /* Home Menu Styles */
  #home-menu .menu-item{
    font-family: 'PT Sans', sans-serif;
    margin: 5vh 0;
    text-align: center;
    padding: 0;
  }
  #home-menu .menu-item a{
    font-size: 5.5vh;
    text-align: center;
    padding: 0;
  }
  #home-menu .menu-item a:hover {
    border: none;
  }
	
  /* Social Menu Styles */
  .menu-social-menu-container{
  	width: 100%;
  }
  #social-menu {
    width: 100%;
    justify-content: space-around;
    padding-bottom: 5vh;
  }
  #social-menu li a{
    font-size: 5vh;
    padding-left: 0px;
  }

  .background {
    display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
	padding: 0px;
	box-sizing: border-box;
  }
  .background h1 {
    text-align: center;
    font-size: 5vh;
    margin: 0;
    padding: 0;
  }
  .background p {
    text-align: center;
    font-size: 3vh;
    margin: 0;
    padding: 0%;
  }
  #main-content-area {
    margin-left: 0vw;
    width: 100vw;
    overflow: hidden;
  }
  #main-content-area section {
    background-color: white;
    padding: 10%;
  }
}

/* Footer Styles */
.site-footer{
	height: 400px;
	background-color: black;
	color: white;
	padding: 40px;
}

#social-footer {
  	display: flex;
	justify-content: flex-end;
  	list-style: none;
  	font-size: 7vh;
}
#social-footer li {
  	margin-left: 30px;
}
#social-footer li a {
  	color: white;
}
#social-footer li a:hover {
  	color: red;
}

@media screen and (max-width: 1024px) {
  .single-header h1{
      font-family: 'PT Sans', sans-serif;
      font-size: 8vw;
      color: white;
      text-shadow: 0 0 50px black;
    }
  .site-footer {
    justify-content: center;
    padding: 10%;
  }

  #social-footer {
    width: 100%;
    justify-content: space-around;
  }
  #social-footer li {
  	margin-left: 0px;
  }
	
  /*Blog Styles*/
  .page-title{
    text-align: center;
	font-size: 9vh;
	margin: 25vh 0 0 0;
	padding: 0 20px;
    width: 100vw;
	height: 45vh;
	box-sizing: border-box;
  }
  .flex-wrap{	
	  flex-direction: column;
  }
  .blogposts{
    max-width: 100vw;
    border-bottom: none;
  	margin: 0%;
  	padding: 0;
  }

  
  /* SIDEBAR */
  aside{
  	width: 100%;
  	height: 100%;
  	padding-top: 5vh;
    padding-bottom: 100px;
  	margin-right: 0px;
  }
  #rpwwt-recent-posts-widget-with-thumbnails-3 span{
  	font-size: 3.5vh;
  }
}


/* Extra-Small Screen media queries */
@media screen and (max-width: 700px) {
  body.custom-background{
	background-size: 280% !important;
	background-attachment: scroll !important;
  }
	
  section p {
    font-size: 3vh;
 	text-align: justify;
  }
  .tabbed-menu {
    display: flex;
    flex-direction: column;
  }
  .gal-head {
    font-size: 3vh;
    margin-bottom: 3vh;
    color: black;
    background-color: #E2E2E2;
    padding: 5%;
    cursor: pointer;
  }
  .tabbed-menu .selected {
    text-decoration: none;
    color: white;
    background-color: black;
  }

  #gallery .gallery-items {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  #gallery .gallery-items .gallery-item {
    flex: 100%;
    max-width: 100%;
  }
  #gallery .gallery-items .gallery-item img {
    max-width: 100%;
  }
  #gallery .gallery-items .gallery-item h3 {
    font-family: 'PT Sans', sans-serif;
    font-size: 3vh;
    margin-top: 2vh;
    margin-left: 1vw;
  }
  #gallery .gallery-items .gallery-item p {
    font-family: 'PT Sans', sans-serif;
    font-size: 2vh;
    font-weight: 400;
    color: grey;
    margin-left: 1vw;
  }
  .textfield{
	font-size: 3vh;
	z-index: -5;
  }
    
  /* BLOG STYLES */
  .entry-title{
      text-align: center;
  }
  .entry-meta{
      text-align: center;
  }
  .alignleft{
    width: 100%;
    float: none;
    padding: 20px 0;
  }
  .alignright{
      width: 100%;
      float: none;
      padding: 20px 0;
  }
  .aligncenter{
      width: 100%;
      margin: 0;
      padding: 20px 0;;
  }
  #send-btn{
	-webkit-appearance: none;
	-webkit-border-radius: 0;
  }
}


/*-------------------------------
SELECT FONTS
-------------------------------*/

.default{font-family: 'PT Sans', sans-serif;}
.lobster{font-family: 'Lobster', cursive;}
.montserrat{font-family: 'Montserrat', sans-serif;}
.satisfy{font-family: 'Satisfy', cursive;}
.acme{font-family: 'Acme', sans-serif}
.bentham{font-family: 'Bentham', serif;}
.zilla-slab{font-family: 'Zilla Slab', serif;}
.sanchez{font-family: 'Sanchez', serif;}
.palanquin-dark{font-family: 'Palanquin Dark', sans-serif;}

#site-options{
	display: none;
}