/*
Theme Name: DP Scanlations
Author: Scryren
Author URI: http://www.deathsvertigo.com
Version: 5.5
*/

@import url(js/foundation/css/foundation.css);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,400italic);

/* Foundation Grid Overrides
   ================================== */
.row.full-width {
  max-width: 100% !important; }

/* Layout
   ================================== */
body {
  background-color: #171717;
  color: #bbbbbb;
  font-family: "Open sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 100%;
  line-height: 1.25em; }

/* Small | Mobile (Max 640px)
   ================================== */
@media (max-width: 40em) {
  body {
    font-size: 90%; } }

/* Medium | Tablet (641px - 1024px)
   ================================== */
@media (min-width: 40.063em) and (max-width: 64em) {
  body {
    font-size: 95%; } }


/* Links
   ================================== */
a:link, a:visited {
color: #f5654c; /* f0af24 */ }

a:hover, a:focus {
color: #fc2c32; /* f1c463 */ }

footer a:link, footer a:visited {
  color: inherit; }

footer a:hover, footer a:focus {
  color: inherit; }

.button:link, .button:visited, .button:hover, .button:focus {
  color: #ffffff !important;
  border-color: none;
 }

.button:link, .button:visited, .button:focus {
  background-color: #4f49ab;
   }

.button:hover {
  background-color: #2c60af;
}

a:link,
a:visited,
a:hover,
a:focus {
  -webkit-transition: color 0.2s ease-out;
  -moz-transition: color 0.2s ease-out;
  -o-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
  text-decoration: none; }

.button:link,
.button:visited,
.button:hover,
.button:focus {
  -webkit-transition: background-color 0.2s ease-out;
  -moz-transition: background-color 0.2s ease-out;
  -o-transition: background-color 0.2s ease-out;
  transition: background-color 0.2s ease-out;
  text-decoration: none; }


/* .metadata-category a:link, .metadata-category a:visited, .metadata-category a:hover, .metadata-category a:focus {
  text-decoration: underline !important; } */


/* Hero
   ================================== */

#banner {
		background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("http://dpscanlations.deathsvertigo.com/images/v5/DP_Banner_SweetPool_1920x600.jpg");
    background-origin: padding-box;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: auto auto;
    height: 590px;
    padding-bottom: 0px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 100px;
    position: relative;
    text-align: left;

}



/* Buttons
   ================================== */

.button {
  font-weight: 600;
  font-family: "Open sans", Arial, sans-serif;
}


/* Fonts
   ================================== */

h1 {font-size: 2.441em;}

h2 {font-size: 1.953em;}

h3 {font-size: 1.563em;}

h4 {font-size: 1.25em;}

h5 {font-size: .83em;}

h6 {font-size: .75em;}


/* Small | Mobile (Max 640px)
   ================================== */
@media (max-width: 40em) {
  h1 {font-size: 1.75em !important; }

  h2 {font-size: 1.50em !important; }

  h3 {font-size: 1.30em !important; }

  h4 {font-size: 1.125em; }
}

h1, h2, h3, h4, h5, h6 {font-family: "Open Sans", Arial, sans-serif;}

h1 {color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
  }
h2 {color: #ffffff;}
h3 {color: #ffffff;}
h4 {color: #ffffff;
  margin-bottom: 0%;
  padding-top: 3%;
  padding-bottom: 0.5%;}
h5 {color: #ffffff; font-weight: 700;}

p {
	font-family: "Open Sans", Arial, sans-serif;
	font-weight: normal;
	font-size: inherit;
	color: #bbbbbb;
}

b {
  color: #f1f1f1;
}

small {font-size: 80%;}


/* List
   ================================== */


ul, li {
  font-size: inherit;
  font-family: 'proxima-nova', Arial, sans-serif; }

ul li {
  font-size: inherit;
  font-family: 'proxima-nova', Arial, sans-serif; }

ul.commentlist {margin-left: 0rem;}

/* Colors
   ================================== */

  .color-red {color: #ff4040; }
  .color-purple {color: #7637a1;}

/* Foundation Panel (for tutorials)
   ================================== */

  .tutorial .panel {
      background: none !important;
      border-color: transparent;
      border-style: dotted;
      border-width: 1px;
      margin-bottom: 1.25rem;
      padding: 1.25rem;
      margin-left: 10%;
      margin-right: 10%;
      color: #bbbbbb;
    }

  .tutorial-font.panel {
      background: none !important;
      border-color: transparent;
      border-style: dotted;
      border-width: 1px;
      margin-bottom: 1.25rem;
      padding: 1.25rem;
      margin-left: 3%;
      margin-right: 3%;
      color: #bbbbbb;
    }


.tutorial .panel p {color: #bbbbbb;}

.tutorial-font h4 {
  font-size: 1.25em;
  color: #ffffff;
  margin-bottom: 0%;
  padding-top: 0%;
  padding-bottom: 0.5%;
  font-family: "Open Sans", Arial, sans-serif;
  line-height: normal;
  font-weight: 700;
  text-transform: uppercase;
}

/* Foundation Top Bar Navigation
   ================================== */

nav {
	border-bottom: 1px solid #171717;
	background-color: #ff0000;
}

.menu ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	text-align: right;
}

.menu ul li {
	display: inline;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 14px;
	color: #d8dde2;
	font-weight: 700;
	margin: 0px;
	padding: 0px;
}

.menu ul li > a  {
	font-family: "Open Sans", Arial, sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #ffffff;
	padding: 0px 15px 0px 15px;
	display: inline-block;
}

.menu ul li a:hover  {
	color: #222222 !important;
}

nav, .menu,
.tab-bar,
.top-bar-section li a:not(.button),
.left-off-canvas-menu {
	background-color: #222222 !important;
}

nav li a:not(.button):hover {
	background-color: #ffffff !important;
}

.top-bar-section ul li.active > a {
	background-color: #5355ab !important;
}

.top-bar-section ul li.active > a:hover {
	background-color: #0E1010 !important;
}

.offcanvas-site-title {
	font-family: "Open Sans", Arial, sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #ffffff;
}



/*****************************************/
/* POSTS */
/*****************************************/


[id^="wp-content"] {
	padding-top: 40px;
	padding-bottom: 0px;
	border-top: 1px solid #171717;

}

#wp-content header,
#wp-content-single header {
	padding-bottom: 30px;
}

.loop {
	background-color: transparent;
	padding: 0px 15px 0px 15px;
}

.loop.columns {
	margin-bottom: 50px;
}

article {
	padding: 25px 35px 15px 30px;
	background-color: transparent;

    background-color: #222222;
    margin-bottom: 1%;
}

.loop article {
	overflow:hidden; /* For short pages */
}

/* Posts: Navigation */
#navigation {
	font-family: "Open Sans", Arial, sans-serif;
	font-weight: 300;
	padding: 15px 35px 15px 30px;
	background-color: rgba(0,0,0,0.3);
	border: 1px solid #ff0000;
}

#navigation a {
	font-family: "Open Sans", Arial, sans-serif;
	font-weight: 400;
}




/* Metadata
   ***************************************/


.metadata-icon img {
	box-sizing: border-box;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	display: inline;
	float: right;
	margin: 5px 0px 0px 10px;
}

.metadata-author {text-align: right; float: right; font-size: 90%;}


/* Footer
   ***************************************/

#footer {
  padding-top: 30px;
  border-top: 0px solid #000000;
  background-color: #222222;
  font-size: 90%;
}

#footer h4 {
  font-weight: 700;
  text-transform: uppercase;
}


/* Comments
   ****************************************/

#comment-wrapper h2 {text-align: center;}

#comment-wrapper ul {
	list-style-type: none;
}

#comment-wrapper li {
	padding: 25px 35px 15px 30px;
  background-color: #222222;
  margin-bottom: 1%;
}

.gravatar img {
	border-radius: 5px;
}

.paginate-comments {
	/*enter pagination */
	width: 100%;
	margin: 0 auto;
	text-align: center;

}

.prev page-numbers, .next page-numbers, .page-numbers, .page-numbers current {

}

.prev page-numbers, .next page-numbers {
	color: #bbbbbb;
}

.page-numbers {
	color: #bbbbbb;
}

.prev page-numbers:hover, .next page-numbers:hover, .page-numbers:hover {
	color: #bbbbbb;
}

.page-numbers.current, .page-numbers.current:hover{
	color: #bbbbbb;
}


input[type="submit"] {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  border-radius: 0px;
  -webkit-transition: background-color 0.2s ease-out;
  -moz-transition: background-color 0.2s ease-out;
  -o-transition: background-color 0.2s ease-out;
  transition: background-color 0.2s ease-out;
  background-color: #4f49ab;
  border-style: solid;
  border-width: 0px;
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  font-size: 100%;
  font-weight: 600;
  margin: 20px 0px;
  padding: 15px 10px;
  white-space: normal;
  width: 100%;
  word-break: normal;
  word-wrap: break-word; }

input[type=submit]:hover, input[type=submit]:focus {
  background-color: #2c60af;
  cursor: pointer; }



/*****************************************
/* FANCYBOX OVERRIDES */
/*****************************************/

.fancybox-lock body {
    overflow: visible !important;
}

.fancybox-skin {
	padding: 0px !important;

}



/*****************************************/
/* Small (Portrait) | Mobile (Max 480px */
/*****************************************/
@media (max-width: 30em) {
	#banner {
		background-image: url("/images/v5/DP_Banner_SweetPool_480x350.jpg");
		/*padding-top:1%;*/
		height:350px; /* start height */
		display:block;
		margin:0;
		background-size:cover;
		-moz-background-size:cover;
		background-position:right top;
	}

	.f-topbar-fixed  {
		padding: 0px;
	}

	#comment-wrapper ul {
		margin: 0px;
		padding: 0px
	}

	.gravatar {
		padding-top: 5px;
		padding-bottom: 3px;
		text-align: center;
	}

	.reply {
		margin-bottom: 3px;
	}

	.loop.columns {
		margin-bottom: 50px;
	}

	.metadata-icon img {
    float: left;
    margin-bottom: 0;
    margin-left: 0px;
    margin-right: 10px;
    margin-top: 0px;
	}


	h2.project-title  {
		line-height: normal;
	}

}


/*****************************************/
/* Small | Mobile (Max 640px */
/*****************************************/

@media (min-width: 30.001em) and (max-width: 40.062em) {
	#banner {
		background-image: url("/images/v5/DP_Banner_SweetPool_640x350.jpg");
		/*padding-top:1%;*/
		height:350px; /* start height */
		display:block;
		margin:0;
		background-size:cover;
		-moz-background-size:cover;
		background-position:center bottom;
	}

	.f-topbar-fixed  {
		padding: 0px;
	}

	#comment-wrapper ul {
		margin: 0px;
		padding: 0px
	}

	.gravatar {
		padding-top: 5px;
		padding-bottom: 3px;
		text-align: center;
	}

	.reply {
		margin-bottom: 3px;
	}

	.loop.columns {
		margin-bottom: 50px;
	}

	h2.project-title  {
		line-height: normal;
	}


}

/*****************************************/
/* Medium | Tablet (641px - 1024px) */
/*****************************************/

@media (min-width: 40.063em) and (max-width: 64em) {
	#banner {
		background-image: url("/images/v5/DP_Banner_SweetPool_1024x450.jpg");
		/*padding-top:1%;*/ /* slope */
		height:450px; /* start height */
		display:block;
		margin:0;
		background-size:cover;
		-moz-background-size:cover;
		background-position:center bottom;
	}

	.loop.columns {
		margin-bottom: 50px;
	}

}

/*****************************************/
/* Large | LQ Desktop (1025px - 1440px) */
/*****************************************/

@media only screen and (min-width: 90.063em) and (max-width: 120em) {

}

/*****************************************/
/* XLarge | HQ Desktop (1441px - 1920px) */
/*****************************************/

@media only screen and (min-width: 90.063em) and (max-width: 120em) {

}

/*****************************************/
/* XXLarge | Apple Thunderbolt (1921px+)*/
/*****************************************/

@media only screen and (min-width: 120.063em) {

}