/*
==============================================================================
	MOBILE MEDIA QUERIES
==============================================================================
*/


/*---------------------------------------------------------------------------*/
/*	Tablets - for 1035px or less
/*---------------------------------------------------------------------------*/

@media screen and (max-width: 1035px) {

	#comments { width: auto; }

	#logo { min-height: 132px; margin-top:20px }

	#load-more { width: 620px !important; }

	.home #home-intro { margin-right: 0; }

	.home #sidebar { display: none; }

	.search #masonry { padding: 0 }

	#main {
	    width: auto;
	    margin: 0;
	}
.archive .post-header {  height: 160px; background:#fff; width:620px; margin-bottom: 20px;}

	#header-inner {
	    width: auto;
	    max-width: 620px;
	}

	.page #container,
	.single #container { width: 620px }

	.single.single-showcase #main {
	    width: 620px;
	    max-width: 620px;
	    margin: 0 auto;
	}

	#primary-menu { top: 20px }

	#primary-menu .split-menu { width: 160px }

	#primary-menu ul li { display: block; }

	#primary-menu ul ul { padding: 0; margin-top: -30px; }

	#primary-menu ul ul li:first-child { border-top: 10px solid #ddd; }

	#primary-menu .right-menu ul ul { margin-left: -190px !important; }

	#primary-menu .left-menu ul ul { margin-left: 150px !important; }

	#bottom,
	#page { overflow: hidden }

	#sidebar {
	    width: 620px;
	    margin: 0;
	}

	.page #sidebar,
	.single #sidebar { margin-bottom: 30px }

	.single #container,
	.page #container {
	    float: none;
	    margin: 0 auto 10px;
	    width: 620px;
	}

	.page #content,
	.single #content {
	    width: 620px;
	    max-width: 620px;
	}

	.single #content,
	.page #content { max-width: 620px }

	#content { width: 640px }

	#container {
	    float: none;
	    overflow: hidden;
	    margin: 0 auto 30px;
	    padding: 0;
	    width: 620px;
	}

	.archive #sidebar {
	    position: relative;
	    float: left;
	    width: 620px;
	}

	.archive #masonry { padding: 0 }

	.tax-group #content,
	.page.page-template-template-showcase-php #content {
	    width: 640px;
	    max-width: 640px;
	}

	.tax-group #container,
	.page.page-template-template-showcase-php #container {
	    width: 620px;
	    float: none;
	}

	.single.single-showcase #content {
	    width: 620px;
	    max-width: 640px;
	}

	.single.single-showcase #container {
	    width: 620px;
	    float: none;
	}

	.single.single-showcase #content .post-content {
	    padding-bottom: 10px;
	}

	.single.single-showcase #content .showcase.format-gallery .post-content {
	    padding-top: 20px;
	    margin: 0;
	}

	.single.single-showcase .featured-image {
	    float: none;
	    width: 620px;
	}

	#single-slides .slides_container .caption { display: none; }

	.featured-image div .da-wrap {
		position: absolute;
		width: 260px;
	}

	#related .featured-image div .da-wrap { width: 220px; }

	#related { margin: 0 0 30px; }

	.archive #sidebar,
	.archive-title-item { display: none !important }

	.archive #masonry {
	    padding: 0;
	    margin-left: 0;
	}

	.tax-group #masonry { margin-left: 0 }

	.page-template-template-fullwidth-php #comments { max-width: 620px }

	.page-template-template-fullwidth-php #comments #respond {
	    width: 560px;
	    max-width: 560px;
	}

	.footer-widget .search-wrap input, .footer-widget .DT_Search input { max-width: 148px !important; }

	#footer-widgets { width: 640px; }

	#footer-widgets .footer-widget { width: 180px; }
	#header-inner {
    left: 50%;
    margin: 80px 0 0 -270px;
    position: absolute;
    width: 940px;
    z-index: 20;
}

}



@media screenand (max-width: 1035px) and (min-width: 681px) {

	#related { width: 580px; }

	#related li {
		display: inline-block;
		padding: 0 10px;
	}

	#footer-menu,
	#credits {
	    float: none;
	    text-align: center;
	}

	#footer-menu li {
	    float: none !important;
	    display: inline-block;
	    margin: 10px 0;
	}

}




/*---------------------------------------------------------------------------*/
/*	Mobiles - for 680px or less
/*---------------------------------------------------------------------------*/

@media screen and (max-width: 680px) {
	.archive .post-header {  height: 160px!important; background:#fff; width:100%; margin-bottom: 20px;}
#logo {margin-top:4px !important}
	.page h1 {margin-bottom:0px;}
.post-header .post-title {font-size:30px; padding-left:100px; line-height:24px; text-align:left;}
h1#site-title {
    background: rgba(0, 0, 0, 0) url("/wp-content/uploads/2015/05/logo-mobile.jpg") no-repeat scroll center top!important;
    color: #ec008c;
    display: block;
    font-size: 12px;
    padding-bottom: 20px;
    padding-top: auto;
    width: 100%;
}
div#site-title {
    background: rgba(0, 0, 0, 0) url("/wp-content/uploads/2015/05/logo-mobile.jpg") no-repeat scroll center top / cover ;
    display: block;
    padding-top: 105%;
    width: 100%;
}
#header-inner {
    width: 110px;
    left: 50%;
    margin-left: -130px;
}
.home #logo {
    margin: 0 auto;
    min-height:240px;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: auto;
    z-index: 20;
}

h1#site-title {
    background: rgba(0, 0, 0, 0) url("/wp-content/uploads/2015/05/logo-lrg_mobile.jpg") no-repeat scroll center top;
    color: #ec008c;
    display: block;
    font-size: 15px;
    padding-top: 48%;
    width: 100%;
}
.page #logo{width:80px; margin-top:-32px;}
	#logo {
	    width: auto;
	    padding: 0;
		position: relative;
	}

	#mobile-menu {
	    display: block;
	    padding: 20px 0;
	    background: #333;
	}

	#mobile-menu select { border: 2px solid #222; }

	#mobile-menu ul { display: none; }

	.home #home-intro { display: none; }

	#load-more { width: 300px !important; }

	.one-half,
	.one-third,
	.two-third,
	.three-fourth,
	.one-fourth {
	    width: auto !important;
	    float: none !important;
	}

	#primary-menu,
	#secondary-menu { display: none }

	#sidebar { width: 100% }

	#container {
	    width: 300px;
	    padding: 0;
	}

	.single.single-showcase #main { width: auto }

	.page #content,
	.single #content,
	.page #container,
	.single #container { width: 300px }

	.page-template-default #content .post-header,
	.page-template-template-fullwidth-php #content .post-header,
	.single #content .post-header { padding: 20px 20px 25px; }

	.page-template-default #content .post-content,
	.page-template-template-fullwidth-php #content .post-content,
	.single #content .post-content,
	#comments .inner  { padding: 20px 20px 10px; }

	#content { width: 100% }

	#header { padding: 0  }

	.page #container,
	.single #container { width: 300px }

	.page #content,
	.single #content { max-width: 300px }

	#home-title {
	    float: none;
	    margin: 0 auto 20px;
	    width: 300px;
	    text-align: center;
	}

	.page .hentry,
	.single .hentry {
	    width: 300px;
	    max-width: 300px;
	}

	#single-slides,
	#single-slides .slides_container {
	    width: 300px;
	    height: auto;
	}

	#single-slides .slides_container img {
	    display: block;
	    width: 300px;
	    height: auto;
	}

	.tax-group #content,
	.page.page-template-template-showcase-php #content {
	    width: 100%;
	    max-width: 100%;
	}

	.tax-group #container,
	.page.page-template-template-showcase-php #container { width: 300px }

	.single.single-showcase #content {
	    width: 100%;
	    max-width: 100%;
	}

	.single.single-showcase #container { width: 300px }

	.single.single-showcase #content .post-content {
	    width: 260px;
	    float: none;
	}

	.single.single-showcase .featured-image { width: 300px }

	.single.single-showcase .featured-image img { width: 100% }

	.featured .featured-image img { margin: -50px 0 0 -50px }

	#slides .post-title a { color: #fff }

	.archive-title-item,
	#primary-menu ul ul,
	.item .featured-details .post-content,
	.item .featured-details a.read-more { display: none !important }
#sidebar {margin-top:20px}
	th { padding: 5px }

	td { padding: 5px }

	#hentry-wrap { width: 300px }

	#archive-title { margin-right: 0; }

	#archive-title .inner { padding: 14px 20px }

	#filter li {
	    margin: 4px 0;
	    display: block;
	}

	.page-template-template-fullwidth-php #comments { max-width: 300px }

	.page-template-template-fullwidth-php #comments #respond {
	    width: 240px;
	    max-width: 240px;
	}

	.featured .featured-details .post-content { display: none }

	.featured .post-title a { font-size: 24px }

	.featured .featured-details .inner {
	    padding: 0;
	    width: 100%;
	    bottom: 40%;
	}

	#footer-widgets  { width: 280px; }

	#footer-widgets .footer-widget {
		float: none;
		margin: 0 auto !important;
		width: 280px;
	}

	.footer-widget .search-wrap input, .footer-widget .DT_Search input { max-width: 90% !important; }

/* =============================================================================
  MENU TOGGLE SWITCHES
============================================================================= */
/**
 * Toggle Switch Globals
 *
 * All switches should take on the class `cmn-toggle-switch` as well as their
 * variant that will give them unique properties. This class is an overview
 * class that acts as a reset for all versions of the icon.
 */
.cmn-toggle-switch {
  display: block;
  position: absolute;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 54px;
  height: 48px;
  font-size: 0;
  text-indent: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  -webkit-transition: background 0.3s;
          transition: background 0.3s;
float:right;
right:10px;
top:10px;
z-index:50
}

.cmn-toggle-switch:focus {
  outline: none;
}

.cmn-toggle-switch span {
  display: block;
  position: absolute;
  top: 22px;
  left: 9px;
  right: 9px;
  height: 1px;
  background: white;
}

.cmn-toggle-switch span::before,
.cmn-toggle-switch span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
  content: "";
}

.cmn-toggle-switch span::before {
  top: -13px;
}

.cmn-toggle-switch span::after {
  bottom: -13px;
}


/**
 * Style 2
 * 
 * Hamburger to "x" (htx). Takes on a hamburger shape, bars slide
 * down to center and transform into an "x".
 */
.cmn-toggle-switch__htx {
  background-color: #ec008c;
}

.cmn-toggle-switch__htx span {
  -webkit-transition: background 0s 0.3s;
          transition: background 0s 0.3s;
}

.cmn-toggle-switch__htx span::before,
.cmn-toggle-switch__htx span::after {
  -webkit-transition-duration: 0.3s, 0.3s;
          transition-duration: 0.3s, 0.3s;
  -webkit-transition-delay: 0.3s, 0s;
          transition-delay: 0.3s, 0s;
}

.cmn-toggle-switch__htx span::before {
  -webkit-transition-property: top, -webkit-transform;
          transition-property: top, transform;
}

.cmn-toggle-switch__htx span::after {
  -webkit-transition-property: bottom, -webkit-transform;
          transition-property: bottom, transform;
}

/* active state, i.e. menu open */
.cmn-toggle-switch__htx.active {
}

.cmn-toggle-switch__htx.active span {
  background: none;
}

.cmn-toggle-switch__htx.active span::before {
  top: 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.cmn-toggle-switch__htx.active span::after {
  bottom: 0;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.cmn-toggle-switch__htx.active span::before,
.cmn-toggle-switch__htx.active span::after {
  -webkit-transition-delay: 0s, 0.3s;
          transition-delay: 0s, 0.3s;
}


.select-menu {display:none;}
.menu {display:block}
.menu li a {font-size:6vw;padding:10px;}
#mobile-menu {padding:0px;}
.page h1 {width:150px;}
.post-header {
  /* set the height of the element which contains what you want to center */
  height: 40px;
  /* these styles are optional, to set width horizontally center the page */
}
.post-header:before, .inner {
  /* these are the important styles for the centered element: */
  display: inline-block;
  vertical-align: middle;
}
.post-header:before {
  /* this is the important part */
  content: '';
  display: inline-block;
  width: 0;
  height: 40px;
  vertical-align: middle;
  /* this just takes care of whitespace added by having display:inline-block (there are other methods) */
  margin-left: -0.25em;
}

.archive .post-header {
  /* set the height of the element which contains what you want to center */
  height: 160px;
  /* these styles are optional, to set width horizontally center the page */
}
.archive .post-header:before {
  /* this is the important part */
  content: '';
  display: inline-block;
  width: 0;
  height: 160px;
  vertical-align: middle;
  /* this just takes care of whitespace added by having display:inline-block (there are other methods) */
  margin-left: -0.25em;
}
.archive .post-header .post-title {
    padding-left: 70px !important;
}
}