/**************************
 * device.css
 * Stylesheet for device
 * @package: Dadiflat 1.0
 * @date 19.06.2016
 *************************/

/************************************************************************************
smaller than 980
*************************************************************************************/
@media screen and (max-width: 980px) {

	html * {
		border-radius: 0;
	}

	#wrap {
		width: 100%;
		margin: 0;
		border-radius: 0;
    }

    #menu {
		display: none;
		visibility: hidden;
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

    #menu-device-bar, #sidenav {
		display: block;
		visibility: visible;
	}

	#menu-device-bar {
		position: static;
		top: inherit;
		left: inherit;
	}

	#menu-device-bar {
		padding: 10px;
		color: #D0CDCD;
		font-weight: bold;
    }

    .deep-sea #menu-device-bar {
		background-color: rgba(49, 71, 88, 0.75);;
	}

	.fire-brick #menu-device-bar {
		background-color: rgba(88, 63, 49, 0.75);
	}

	.green-field #menu-device-bar {
		background-color: rgba(50, 88, 49, 0.75);
	}

	.camel-pelt #menu-device-bar {
		background-color: rgba(58, 43, 16, 0.55);
	}

	.black-stone #menu-device-bar {
		background-color: rgba(37, 37, 37, 0.75);
	}

	.dark-night #menu-device-bar {
		background-color: rgba(25, 25, 25, 0.75);
	}

	.light-day #menu-device-bar {
		background-color: rgba(177, 177, 177, 0.74);
	}

	#menu-device-bar .genericon-menu {
		font-size: 1.4rem;
		text-shadow: 0 0px 1px #000000;
	}

	.deep-sea #menu-device-bar .genericon-menu {
		color: #467F7F;
	}

	.fire-brick #menu-device-bar .genericon-menu {
		color: #7F6D46;
	}

	.green-field #menu-device-bar .genericon-menu {
		color: #4A7F46;
	}

	.camel-pelt #menu-device-bar .genericon-menu {
		color: #7F6D46;
	}

	.black-stone #menu-device-bar .genericon-menu {
		color: #808082;
	}

	.dark-night #menu-device-bar .genericon-menu {
		color: #7D7D7D;
	}

	.light-day #menu-device-bar .genericon-menu {
		color: #A09F9F;
	}

	#sidenav {
		height: 100%;
		width: 0;
		position: fixed;
		z-index: 999999;
		top: 0;
		left: 0;
		background-color: rgb(17, 17, 17);
		overflow-x: hidden;
		padding-top: 60px;
	}

	#sidenav a {
		padding: 8px 0 8px 25px;
		text-decoration: none;
		color: #818181;
		display: block;
		transition: 0.3s;
		text-align: left;
	}

	#sidenav a:hover, .offcanvas a:focus{
		color: #f1f1f1;
	}

	#sidenav a.closebtn {
		position: absolute;
		top: 7px;
		right: 13px;
		font-size: 1.2rem;
		border-bottom: 0 none;
		width: 100%;
		height: 25px;
		padding: 2px 0;
		color: #D6D6D6;
		font-weight: bold;
		text-align: right;
	}

	#sidenav .closebtn .genericon-close {
		font-size: 1.8rem;
	}

	#sidenav ul {
		margin: 0;
		padding: 0;
	}

	#sidenav ul li {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}

	#sidenav ul li a {
		border-bottom: 1px solid rgba(68, 68, 68, 0.32);
	}

	#sidenav ul.children,
	#sidenav ul.sub-menu {
		border-left: 1em solid rgba(68, 68, 68, 0.32);
	}

    #footer {
		border-radius: 0;
	}

}

/************************************************************************************
smaller than 960
*************************************************************************************/
@media screen and (max-width: 960px) {

}

/************************************************************************************
smaller than 768
*************************************************************************************/
@media screen and (max-width: 768px) {

	#searchform input[type="search"] {
		border-radius: 4px;
		width: 100%;
	}

	#searchform button {
		display: none;
		visibility: hidden;
	}
  

}

/************************************************************************************
smaller than 732
*************************************************************************************/
@media screen and (max-width: 732px) {
  
}

/************************************************************************************
smaller than 667
*************************************************************************************/
@media screen and (max-width: 667px) {

	.post-header {
		box-shadow: none;
	}

	#nav-post, .display-info {
		position: static;
		top: inherit;
		left: inherit;
		overflow: hidden;
		height: auto;
	}

	.deep-sea #nav-post {
		background-color: rgba(49, 71, 88, 0.75);
	}

	.fire-brick #nav-post {
		background-color: rgba(88, 63, 49, 0.75);
	}

	.green-field #nav-post {
		background-color: rgba(50, 88, 49, 0.75);
	}

	.camel-pelt #nav-post {
		background-color: rgba(58, 43, 16, 0.55);
	}

	.black-stone #nav-post {
		background-color: rgba(37, 37, 37, 0.75);
	}

	.dark-night #nav-post {
		background-color: rgba(25, 25, 25, 0.75);
	}

	.light-day #nav-post {
		background-color: rgba(177, 177, 177, 0.74);
	}

	.display-info .avatar {
		width: auto;
		height: auto;
	}

	body.archive .attachment-header-thumbnail,
	body.archive .header-image,
	body.search .attachment-header-thumbnail,
	body.search .header-image {
		display: none;
		visibility: hidden;
	}

	.article .entry-header time {
		position: static;
		top: inherit;
		left: inherit;
		border-radius: 0;
		margin: 20px 0 15px;
		padding: 0 0 10px;
		width: auto;
		height: auto;
		background-color: transparent !important;
		text-align: left;
		font-style: italic;
		color: inherit;
		border: 0 none;
		border-bottom: #F5F5F5 2px solid;
	}

	.article .entry-header time span {
		display: inline;
		font-size: 1em !important;
		padding: 0 5px 0 0;
	}

	.article .entry-header .entry-title {
		padding-top: 0;
		margin-top: 0;
	}

	.article .entry-meta {
		font-size: .9em;
		line-height: 3.8;
    }

    .comment-form label {
		width: 100%;
		border-radius: 4px 4px 0 0;
		margin-left: 0;
	}

	.comment-form input {
		width: 100%;
		border-radius: 0 0 4px 4px;
    }

    .comment-form input[type="submit"] {
		border-radius: 4px;
	}

}

/************************************************************************************
smaller than 640
*************************************************************************************/
@media screen and (max-width: 640px) {

}

/************************************************************************************
smaller than 600
*************************************************************************************/
@media screen and (max-width: 600px) {
  
}

/************************************************************************************
smaller than 568
*************************************************************************************/
@media screen and (max-width: 568px) {
  
}

/************************************************************************************
smaller than 533
*************************************************************************************/
@media screen and (max-width: 533px) {
  
}

/************************************************************************************
smaller than 480
*************************************************************************************/
@media screen and (max-width: 480px) {

	
	#header hgroup, #header form {
		float: none;
		width: 100%;
	}

	#header form button {
		margin-right: 4%;
	}

	.content, #sidebar-right {
		width: 100%;
		float: none;
	}		

	.widget h3 {
		width: 100%;
		border-radius: 4px;
	}

}

/************************************************************************************
smaller than 320
*************************************************************************************/
@media screen and (max-width: 320px) {

	#header form button {
		margin-right: 2.5%;
	}

}