/*   
	Theme Name:        Souled out
	Theme URI:         https://digwp.com/clubhouse/
	Description:       A simple basic theme template for WordPress.
	Author:            Mathias Montini
	Author URI:        https://digwp.com/
	Donate link:       http://m0n.co/donate
	Version:           2.0
	Stable tag:        2.0
	Requires at least: 4.5
	Tested up to:      4.7
	License:           GNU General Public License v3 or later
	License URI:       http://www.gnu.org/licenses/gpl-3.0.html
	Tags:              one-column, two-columns, right-sidebar
	Text Domain:       blank-theme
*/

@media screen {
	
	.wrap { box-sizing: border-box; max-width: 960px; margin: 20px auto; padding: 20px; color: #333; background-color: #fff; }
	
	a {}
	a:hover {} 
	
	h1, h2, h3, h4, h5, h6 { font-weight: normal; }
	h1 {}
	h2 {}
	h3 {}
	h4 {}
	h5 {}
	h6 {}
	
	p {}
	ul, ol {}
	
	pre {}
	code, tt, var {}
	
	abbr, acronym {}
	
	blockquote {}
	blockquote p {}
	
	.post {}
	.entry {}
	.entry a {}
	.entry a:hover {}
	.meta {}
	.postmetadata {}
	
	.nav {}
	.nav-prev {}
	.nav-next {}
	
	.searchform {}
	.search-submit {}
		
	ol.commentlist { padding: 0; list-style: none; }
	ol.commentlist li {}
	ol.commentlist li.alt {}
	ol.commentlist li.bypostauthor {}
	ol.commentlist li.byuser {}
	ol.commentlist li.comment-author-admin {}
	ol.commentlist li.comment { padding: 20px; border-bottom: 1px dotted #999; }
	ol.commentlist li.comment div.comment-author {}
	ol.commentlist li.comment div.vcard {}
	ol.commentlist li.comment div.vcard cite.fn { font-style: normal; }
	ol.commentlist li.comment div.vcard cite.fn a.url {}
	ol.commentlist li.comment div.vcard img.avatar { float:right; margin: 0 0 20px 20px; }
	ol.commentlist li.comment div.vcard img.photo {}
	ol.commentlist li.comment div.vcard span.says {}
	ol.commentlist li.comment div.commentmetadata {}
	ol.commentlist li.comment div.comment-meta { margin: 10px 0; font-size: 12px; }
	ol.commentlist li.comment div.comment-meta a { color: #999; }
	ol.commentlist li.comment p {}
	ol.commentlist li.comment ul {}
	ol.commentlist li.comment div.reply { font-size: 12px; font-weight: bold; }
	ol.commentlist li.comment div.reply a {}
	ol.commentlist li.comment ul.children { margin: 20px 0 0 0; padding: 0; list-style: none; }
	ol.commentlist li.comment ul.children li {}
	ol.commentlist li.comment ul.children li.alt {}
	ol.commentlist li.comment ul.children li.bypostauthor {}
	ol.commentlist li.comment ul.children li.byuser {}
	ol.commentlist li.comment ul.children li.comment {}
	ol.commentlist li.comment ul.children li.comment-author-admin {}
	ol.commentlist li.comment ul.children li.depth-2 { margin: 0; border-left: 5px solid #555; }
	ol.commentlist li.comment ul.children li.depth-3 { margin: 0; border-left: 5px solid #999; }
	ol.commentlist li.comment ul.children li.depth-4 { margin: 0; border-left: 5px solid #bbb; }
	ol.commentlist li.comment ul.children li.depth-5 {}
	ol.commentlist li.comment ul.children li.odd {}
	ol.commentlist li.even { background-color: #fff; }
	ol.commentlist li.odd { background-color: #f6f6f6; }
	ol.commentlist li.parent { border-left: 5px solid #111; }
	ol.commentlist li.thread-alt {}
	ol.commentlist li.thread-even {}
	ol.commentlist li.thread-odd {}
	
	form {}
	label { display: block; }
	input { display: block; }
	input[type=text] {}
	textarea {}
	
	.screen-reader-text { position: absolute; left: -9999em; }
	
	/* WP Default Styles */
	
	.wp-caption {}
	.wp-caption-text {}
	.sticky {}
	.gallery-caption {}
	.alignright {}
	.alignleft {}
	.aligncenter {}
	
} /* END screen media */

@media print {
	
	body { 
		width: 100% !important; margin: 0 !important; padding: 0 !important; 
		line-height: 1.4; word-spacing: 1.1pt; letter-spacing: 0.2pt; 
		font-family: Garamond, 'Times New Roman', serif; 
		color: #000; background: none; font-size: 12pt; 
		}
	h1,h2,h3,h4,h5,h6 { font-family: Helvetica, Arial, sans-serif; }
	h1 { font-size: 19pt; }
	h2 { font-size: 17pt; }
	h3 { font-size: 15pt; }
	h4,h5,h6 { font-size:12pt; }
	code { font: 10pt Courier, monospace; } 
	blockquote { margin: 1.3em; padding: 1em; }
	img { display: block; margin: 1em 0; }
	a img { border: none; }
	table { margin: 1px; text-align:left; }
	th { border-bottom: 1px solid #333;  font-weight: bold; }
	td { border-bottom: 1px solid #333; }
	th, td { padding: 4px 10px 4px 0; }
	caption { background-color: #fff; margin-bottom: 2em; text-align: left; }
	thead { display: table-header-group; }
	tr { page-break-inside: avoid; } 
	a { text-decoration: none; color: #000; }
	#comments { page-break-before: always; }
	.do-not-print { display: none; }
	
} /* END print media */

/* NAVIGATION */

/* -------------------------------- 

Primary style

-------------------------------- */
html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background-color: #000;
  font-size: 100%;
  font-family: "Open sans", sans-serif;
}

a {
  text-decoration: none;
  font-family: "Open sans", sans-serif; 
}

img {
  max-width: 100%;
}

/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */
.cd-container {
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
  width: 90%;
  max-width: 1170px;
  margin: 0 auto;
}
.cd-container::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}

/* -------------------------------- 

Main components 

-------------------------------- */
header {
  position: relative;
  background: white;
  text-align: center;
  margin-bottom: 1em;
  padding-top: 3em;
  z-index: 1;
}
header #cd-logo {
  margin-bottom: 3em;
}
header h1 {
  font-size: 20px;
  font-size: 1.25rem;
}
@media only screen and (min-width: 768px) {
  header {
    margin-bottom: 4em;
  }
}
@media only screen and (min-width: 1170px) {
  header {
    padding-top: 11em;
  }
  header #cd-logo {
    position: absolute;
    top: 40px;
    left: 5%;
  }
  header h1 {
    font-size: 40px;
    font-size: 2.5rem;
    font-weight: 300;
  }
}

.b-lazy {
    -webkit-transition: all 800ms ease-in-out;
    -moz-transition: all 800ms ease-in-out;
    -o-transition: all 800ms ease-in-out;
    transition: all 800ms ease-in-out;
    max-width: 100%;
    opacity: 0;
}

.b-lazy.b-loaded {
  opacity: 1;
}

.info-overlay.b-loaded {
  top:-220px;
}


main .hero-image {
  height: 100vh;
  z-index: -1;
}

main .hero-image {
  background-size: cover;
  width:100%;
  position: relative;
}

main .hero-image:after {
  content:"";
  position: absolute;
  z-index: 1;
  width:100%;
  bottom:0;
  height: 250px;
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%);
    /*bottom: -50px;
    left: 0;
    background: #000;
    -webkit-transform: skewY(2deg);
    -ms-transform: skewY(2deg);
    transform: skewY(2deg);*/
}

main .row {
  position: relative;
  height:500px;
}

main .row.moodblocks {
  display: flex;
  justify-content: space-around;
}

main .row.moodblocks .img-block {
  background-color: #111;
  width: 300px;
  height: 300px;
  margin:auto;
}

main .info-overlay {
  background-color:#EE3857;
  position: absolute;
  top:0px;
  right:200px;
  width:600px;
  height:700px;
  display: flex;
  background-size: cover;
  padding: 0px 0px 90px 55px;
}

main .info-overlay .info-overlay-inner {
  align-self: flex-end;
}


 main .info-overlay .info-overlay-inner h1 {

 }

main .info-overlay .info-overlay-inner a {
  color: #fff;
  font-weight: bold;
  font-family: sans-serif;
  text-transform: uppercase;
  background-color:#f0f0f0;
  padding:10px 15px;
}

main .info-overlay .info-overlay-border {
 width:600px;
 height:700px;
 background: url('img/subtle-green-ptrn.jpg') repeat #03EADA;
 position: absolute;
 left:-70px;
 bottom:-70px;
 z-index: -1;
 display: flex;
 padding: 25px;
 text-transform: uppercase;
}

main .info-overlay .info-overlay-border p {
  color: #fff;
  font-weight: bold;
  font-family: sans-serif;
  align-self: flex-end;
}

main .marvin-row {
 height: 90vh;
  overflow: hidden;
  position: relative;
}

main .marvin-row .layer {  
  background-position: bottom center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 90vh;
  position: absolute;
  z-index: -1;
}

.layer-bg {
  background-image: url('img/marvin-bg-layer.jpg');
}

.layer-1 {
  background-image: url('img/marvin-layer-1.png');
}

.layer-2 {
  background-image: url('img/marvin-layer-2.png');
  background-position: left bottom;
}

/*.layer-3 {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/272781/ilu_man.png');
  background-position: right bottom;
}

.layer-4 {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/272781/ilu_01.png');
}

.layer-overlay {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/272781/ilu_overlay.png');
}*/

/* AUDIO */

.sound_wrapper {
  height: 20px;
  position: fixed;
  z-index: 10;
  bottom:40px;
  left:40px;
}

.bar {
  margin-left: 4px;
  float: left;
  width: 2px;
  height: 30%;
  background: white;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.bar:nth-child(even)  {
  animation: listen 1.3s ease .3s infinite;
}

.bar:nth-child(odd) {
  animation: listen 1.3s ease .6s infinite;
}

.bar:nth-child(3) {
  animation: listen 1.3s ease infinite;
}

@keyframes listen {
  0% {height: 30%;}
  20% {height: 100%;}
  40% {height: 70%;}
  50% {height: 100%;}
  100% {height: 30%;}
}

/* END AUDIO */

#cd-nav ul {
  /* mobile first */
  position: fixed;
  width: 90%;
  max-width: 400px;
  right: 5%;
  bottom: 20px;
  border-radius: 0.25em;
  box-shadow: 0 0 10px rgba(232, 74, 100, 0.4);
  background: white;
  visibility: hidden;
  /* remove overflow:hidden if you want to create a drop-down menu - but then remember to fix/eliminate the list items animation */
  overflow: hidden;
  z-index: 1;
  /* Force Hardware Acceleration in WebKit */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
  -moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
  transition: transform 0.3s, visibility 0s 0.3s;
}
#cd-nav ul li {
  /* Force Hardware Acceleration in WebKit */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
#cd-nav ul.is-visible {
  visibility: visible;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
  -moz-transition: -moz-transform 0.3s, visibility 0s 0s;
  transition: transform 0.3s, visibility 0s 0s;
}
#cd-nav ul.is-visible li:nth-child(1) {
  /* list items animation */
  -webkit-animation: cd-slide-in 0.2s;
  -moz-animation: cd-slide-in 0.2s;
  animation: cd-slide-in 0.2s;
}
#cd-nav ul.is-visible li:nth-child(2) {
  -webkit-animation: cd-slide-in 0.3s;
  -moz-animation: cd-slide-in 0.3s;
  animation: cd-slide-in 0.3s;
}
#cd-nav ul.is-visible li:nth-child(3) {
  -webkit-animation: cd-slide-in 0.4s;
  -moz-animation: cd-slide-in 0.4s;
  animation: cd-slide-in 0.4s;
}
#cd-nav ul.is-visible li:nth-child(4) {
  -webkit-animation: cd-slide-in 0.5s;
  -moz-animation: cd-slide-in 0.5s;
  animation: cd-slide-in 0.5s;
}
#cd-nav ul.is-visible li:nth-child(5) {
  -webkit-animation: cd-slide-in 0.6s;
  -moz-animation: cd-slide-in 0.6s;
  animation: cd-slide-in 0.6s;
}
#cd-nav li a {
  font-family: "Open sans", sans-serif;
  color:#fff;
  display: block;
  padding: 1.6em;
  border-bottom: 1px solid #eff2f6;
}
#cd-nav li:last-child a {
  border-bottom: none;
}
@media only screen and (min-width: 1170px) {
  #cd-nav ul {
    /* the navigation moves to the top */
    position: absolute;
    width: auto;
    max-width: none;
    bottom: auto;
    top: 36px;
    background: transparent;
    visibility: visible;
    box-shadow: none;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0s;
    -moz-transition: all 0s;
    transition: all 0s;
  }
  #cd-nav li {
    display: inline-block;
  }
  #cd-nav li a {
    opacity: 1;
    padding: .4em;
    margin-left: 1.6em;
    border-bottom: none;
  }
  #cd-nav li a:hover {
    color: #00bd9b;
  }
  #cd-nav.is-fixed ul {
    /* when the user scrolls down, the navigation moves to the bottom right in Fixed position - as on touch devices */
    position: fixed;
    width: 90%;
    max-width: 400px;
    bottom: 20px;
    top: auto;
    background: white;
    visibility: hidden;
    box-shadow: 0 0 10px rgba(232, 74, 100, 0.4);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
  }
  #cd-nav.is-fixed ul li {
    display: block;
  }
  #cd-nav.is-fixed ul li a {
    padding: 1.6em;
    margin-left: 0;
    border-bottom: 1px solid #eff2f6;
  }
  #cd-nav ul.has-transitions {
    /* this class is used to bring back transitions when the navigation moves at the bottom right */
    -webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
    -moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
    transition: transform 0.3s, visibility 0s 0.3s;
  }
  #cd-nav ul.is-visible {
    /* this class is used to bring back the navigation animation - as on touch devices */
    visibility: visible;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
    -moz-transition: -moz-transform 0.3s, visibility 0s 0s;
    transition: transform 0.3s, visibility 0s 0s;
  }
  #cd-nav ul.is-hidden {
    /* this class is used to animate the scale down the navigation when the user scrolls down with the navigation still open */
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
  }
}

.cd-nav-trigger {
  position: fixed;
  bottom: 20px;
  right: 5%;
  width: 44px;
  height: 44px;
  background: white;
  border-radius: 0.25em;
  box-shadow: 0 0 10px rgba(232, 74, 100, 0.4);
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  z-index: 2;
}
.cd-nav-trigger span {
  /* the span element is used to create the menu icon */
  position: absolute;
  display: block;
  width: 20px;
  height: 2px;
  background: #e84a64;
  top: 50%;
  margin-top: -1px;
  left: 50%;
  margin-left: -10px;
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
}
.cd-nav-trigger span::before, .cd-nav-trigger span::after {
  content: '';
  position: absolute;
  left: 0;
  background: inherit;
  width: 100%;
  height: 100%;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.3s, background 0s;
  -moz-transition: -moz-transform 0.3s, background 0s;
  transition: transform 0.3s, background 0s;
}
.cd-nav-trigger span::before {
  top: -6px;
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);
}
.cd-nav-trigger span::after {
  bottom: -6px;
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);
}
.cd-nav-trigger.menu-is-open {
  box-shadow: none;
}
.cd-nav-trigger.menu-is-open span {
  background: rgba(232, 74, 100, 0);
}
.cd-nav-trigger.menu-is-open span::before, .cd-nav-trigger.menu-is-open span::after {
  background: #e84a64;
}
.cd-nav-trigger.menu-is-open span::before {
  top: 0;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.cd-nav-trigger.menu-is-open span::after {
  bottom: 0;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  transform: rotate(225deg);
}
@media only screen and (min-width: 1170px) {
  .cd-nav-trigger {
    /* the the menu triger is hidden by default on desktop devices */
    visibility: hidden;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
    -moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
    transition: transform 0.3s, visibility 0s 0.3s;
  }
  .is-fixed .cd-nav-trigger {
    visibility: visible;
    -webkit-transition: all 0s;
    -moz-transition: all 0s;
    transition: all 0s;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-animation: cd-bounce-in 0.3s linear;
    -moz-animation: cd-bounce-in 0.3s linear;
    animation: cd-bounce-in 0.3s linear;
  }
}

#cd-gallery-items li {
  margin-bottom: 1.5em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 0.25em;
}
#cd-gallery-items li img {
  width: 100%;
  display: block;
  border-radius: 0.25em;
}
@media only screen and (min-width: 768px) {
  #cd-gallery-items li {
    width: 48%;
    float: left;
    margin-bottom: 2em;
    margin-right: 4%;
  }
  #cd-gallery-items li:nth-child(2n) {
    margin-right: 0;
  }
}
@media only screen and (min-width: 1170px) {
  #cd-gallery-items li {
    width: 31%;
    float: left;
    margin-bottom: 2.5em;
    margin-right: 3.5%;
  }
  #cd-gallery-items li:nth-child(2n) {
    margin-right: 3.5%;
  }
  #cd-gallery-items li:nth-child(3n) {
    margin-right: 0;
  }
}

@-webkit-keyframes cd-slide-in {
  0% {
    -webkit-transform: translateX(100px);
  }

  100% {
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes cd-slide-in {
  0% {
    -moz-transform: translateX(100px);
  }

  100% {
    -moz-transform: translateY(0);
  }
}
@keyframes cd-slide-in {
  0% {
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    -ms-transform: translateX(100px);
    -o-transform: translateX(100px);
    transform: translateX(100px);
  }

  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes cd-bounce-in {
  0% {
    -webkit-transform: scale(0);
  }

  60% {
    -webkit-transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes cd-bounce-in {
  0% {
    -moz-transform: scale(0);
  }

  60% {
    -moz-transform: scale(1.2);
  }

  100% {
    -moz-transform: scale(1);
  }
}
@keyframes cd-bounce-in {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
  }

  60% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

/* END NAVIGATION */


/* FOOTER */

footer {
  width:100%;
  height:600px;
  background-color:#000;
}

.footer-content {
  width:600px;
  margin:40px auto;
}

.footer-content h2 {
  color:#fff;
  text-align: center;

}

/* END FOOTER */