/*
 * Breakpointes for Media Queries for Standard Devices
 * a Part of Piipe
 * 
 * Overview
 * * Default not displayed parts for Viewpoints
 * * Smartphones
 * * Big Smartphones
 * * Tablets 
 * * Laptop & Tablets
 * * Desktop
 * 
*/


/* Defaults for all Viewpoints */
.navbar-user-small,
.navigationbar-small,
.collapse .form-search,
.collapse .form-search .icon,
.magazine-name-small {
	display: none;
}


@media(max-width: 992px) {
	.page-content > .row {
		margin: 0 -3px;
	}
	
	.front article + .additional-info, .front article + .additional-info .additional-info,
	.page-category article + .additional-info, .page-category article + .additional-info .additional-info {
		padding-top: 0;
		margin-bottom: 0;
	}
	
	.front article + .additional-info,
	.page-category article + .additional-info {
		margin-bottom: 24px;
		padding-bottom: 24px;
		border-bottom: 1px dotted rgb(200,200,200) !important;
	}
	
	.node-promobox .node-dachzeile, .node-promobox .field-name-body, .node-promobox .field-name-field-titel {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* Should be inline the structure */
@media(max-width: 768px) {
	#admin-menu {
		display:none;
	}
	h2.title, .page-node .node-title { 
		font-size: 24px; 
		line-height: 30px !important;
	}
	.lead, .lead p, .page-node .field-name-body p {
		font-size: 14px !important;
		line-height: 24px !important;
	}
	#subscribe-taxonomy-term-button > span {
		font-size: 12px;
		line-height: 24px;
	
	}
	.page-content > .row {
		margin: 0 0px;
	}
	.additional-info {
		padding-top: 18px;
		margin-bottom: 18px;
	}
	.page-node .additional-info.links > span + a {
    margin-top: 12px;
	}
	.page-node .additional-info.links > a {
		font-size: 14px;
		line-height: 24px;
	}
	.stats-social {
		margin-right: 4px !important;
		margin-bottom: 12px;
	}
}
@media(min-width: 768px) and (max-width: 1024px) {
.page-node .node-title { font-size: 32px; }
	
	}
@media(min-width: 1025px) and (max-width: 1199px) {
	.page-node .node-title { font-size: 40px; }
}

.taxonomy-caption > h1 {
		font-size: 24px;
		top: -45%;
		top: calc(-50% - 64px/2);
		top: -webkit-calc(-50% - 64px/2);
		top: -moz-calc(-50% - 64px/2);
		
		line-height: 32px;
		text-transform: uppercase;
		font-weight: 900;
	}

/* end */


/* for more than one device */
@media only screen 
  and (max-width: 1023px) {
  
  /* the following should be invisible */
	.carousel-control, 
	.collapse .navbar-nav,
	.collapse ul.categories,
	/*.collapse .form-search,*/
	ul.categories > li > sub,
	.navigationbar-full, .logobar
	{
		display:none;
	}
	
	body.frontend {
		padding-top:42px;
	}
	
	.navigationbar-small {
		border: 0;
	}

	/* display or float different */
	.navigationbar-small, 
	.navigationbar-small .navbar-user, .navbar-user-small, /* navbar-user-small ?? */
	.navbar-toggle, .navbar-toggle-right,  .navbar-toggle-left {
		display: block;
	}
	
	.collapse .form-search {
		display: block;
	}
	.navigationbar-element.magazine-name {
		display: none;
	}
	.navigationbar .magazine-name-small {
		display: flex;
		padding: 0px;
		border: 0;
	}
	
	.page-content {
		position: relative;
		margin-bottom: 6px;
	}
	
	.footer {
		margin-right: -6px;
		
	}
	
	.navbar-default .navbar-nav .open .dropdown-menu > li > a {
		color: #ffffff;
	}
	.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
		color: #4e9ec6;
	}
	.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
		color: #89f0ff;
		background-color: #000;
	}
	
	.navigationbar .magazine-name-small > div{
		float: none;
		text-align: center;
		display: flex;
		width:100%;
		white-space: nowrap;
	}
	.navigationbar .magazine-name-small > div > span{
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
	}
	.navigationbar .magazine-name-small > div > span > a{	
		font-size: 14px;
		font-weight: 600;
		line-height: 12px;
		/*text-transform: uppercase;*/
		color: #FFF;
	}	
	
		/* Burgermenu */
	.navbar-collapse { 
		/*display: block;*/
		margin-left: -9px;
		margin-right: -9px;
		padding: 0;
	}
	.navbar-collapse.in {
		overflow: auto !important;
		height: calc(100vh - 21px) !important;
	}
	.navbar-collapse .categories li {
		padding: 0px 18px 0;
	}

	.navigationbar-small-toggle {
		display:inline;
	}
	
	.navigationbar-small a {
		font-size: 16px;
		font-weight: 400;
		color: #fff;
	}
	
	.navigationbar-small .subcategory a {
		margin-left :12px;
	}
	
	.navigationbar-small .subcategory {
		padding-top: 6px !important;
		padding-bottom: 6px !important;
	}
	/*change the button on open collapse */
	ul.navbar-right .leaf a{
		color: #c0c0c0;
	}
	
	ul.categories, ul.navbar-right {
		clear: both;
		float: none;
	}
	
	.dropdown .category {
		float: none;
	}
	#mainmenu {
		border: 0;
	}
	
	.navbar-toggle {
		height: 12px;
		padding-left: 9px;
		padding-top: 2px;
		margin: 0;
	}
	
	.navbar-toggle-left {
		padding-left: 9px;
	}
	
	.responsive-padding {
		padding: 0px 9px;
	}

	.navbar-fixed-top {
		margin: 0;
		max-height: 12px;
	}
	
	/* Dropdown for sub-categories */
	.navigationbar-small li.dropdown > div {
		margin: 0 -18px;
	}
	ul.categories-list-wrapper-mobile {
		padding-top: 12px;
		padding-bottom: 12px;
		background-color: #717171;
		
		font-size: 14px;
		line-height: 18px;
		text-transform: uppercase;
		font-weight: 900;
	}
	
	.navbar-collapse.collapsing ul.navbar-right a, .navbar-collapse.in ul.navbar-right a {
		padding-left: 18px;
	}
	
	li.subcategory {
		margin-left: -36px;
	}

}

/* Smartphones */

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

	/* Carousel */
	
	.carousel-inner > .item > div img {
		position: absolute;
		top: 0;
		left: 0;
		/*margin-left: -334px;
		margin: auto;
		height: 100vh;
		width: auto;*/
 	}
 	
	.carousel-inner  > .item {
		/*min-height: 100%;*/
		width: auto;
	}
	.region-carousel, .carousel-inner{
		/*height: 100vh;*/
	}
	
	.region.region-carousel {
		margin-right: -6px;
	}
	
	/* Articles */
	
	.region-content {
		margin-top: 12px;
	}

}

/* Smartphones portrait */
@media /*only screen 
  and (min-device-width: 320px) 
  and*/ (max-width: 768px) {	
  
  	.sidebar-toggle { display: block; }
	.sidebar-toggle-user {display: block; }
}

.dropdown-menu.user-menu {
	border: none;
	top: 48px;
	position: absolute;
	right: 0px;
	left: initial;
}

	
	.carousel-inner > .item > div img {
		position: absolute;
		top: 0;
		left: 0;
 	}
 	
	.carousel-inner  > .item {
		/*min-height: 100%;*/
		width: auto;
	}
	
	.carousel-caption {
		top: 0;
		left: 0;
		right:0;
		bottom: auto;
		width: 75%; 
		padding: 24px 24px;
	}
	
	.carousel-caption .node-title, .carousel-caption .node-title a{
		font-size: 24px;
		line-height: 32px;
		text-transform: uppercase;
		font-weight: 900;
	}
	
	.carousel-caption .node-origin {
		font-size: 10px;
		line-height: 24px;
	}
	

}


/* Smartphones Landscape */
@media only screen 
  and (max-width: 768px)
  and (orientation: landscape) {
  
	.carousel-inner > .item > div img {
		position: absolute;
		top: 0;
		left: 0;
 	}
 	
	.carousel-inner  > .item {
		min-height: 100%;
		width: auto;
	}

	.navbar-collapse { 
		/*display: block;*/
		width: 100%;
		padding: 18px; 
		margin-left: -9px;
	}
	
	.carousel-caption {
		top: 0;
		left: 0;
		right:0;
		bottom: auto;
		width: 75%; 
		padding: 24px 24px;
	}
	
	.carousel-caption .node-title, .carousel-caption .node-title a{
		font-size: 24px;
		line-height: 32px;
		text-transform: uppercase;
		font-weight: 900;
	}
	
	.carousel-caption .node-origin {
		font-size: 10px;
		line-height: 24px;
	}
}

/* Tablets */
@media only screen 
  and (min-width: 768px) 
  and (max-width: 1024px)
  and (orientation: portrait) {

	
	.navbar .magazine-name-small > div{
		float: none;
		text-align: center;
		display: flex;
		width:100%;
		white-space: nowrap;
	}
	.navbar .magazine-name-small > div > span{
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
	}
	.navbar .magazine-name-small > div > span > a{	
		font-size: 12px;
		font-weight: 600;
		line-height: 12px;
		text-transform: uppercase;
		color: #FFF;
	}	
	


	
	/* Burgermenu */
	.navbar-collapse { 
		/*display: block;*/
		margin-left: -9px;
	}

	/*change the button on open collapse */
	ul.navbar-right .leaf a{
		color: #c0c0c0;
	}
	
	#mainmenu {
		border: 0;
	}
	

	.navbar-toggle {
		height: 12px;
		padding-left: 9px;
		padding-top: 2px;
		margin: 0;
	}
	
	.navbar-toggle-left {
		padding-left: 9px;
	}
	
	.responsive-padding {
		padding: 0px 9px;
	}
	

	.navbar-fixed-top {
		margin: 0;
		max-height: 12px;
	}
	

	
	.navbar-default .navbar-nav .open .dropdown-menu > li > a {
		color: #ffffff;
	}
	.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
		color: #4e9ec6;
	}
	.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
		color: #89f0ff;
		background-color: #000;
	}
	
	/* Carousel */
	
	/* not yet done... */
	/*.region-carousel, .carousel-inner{
		height: 100vh;
	}*/
	
	.region.region-carousel {
		margin-right: -6px;
	}
	
	
	
	.carousel-inner > .item > div img {
		position: absolute;
		top: 0;
		left: 0;
 	}
 	
	.carousel-inner  > .item {
		min-height: 100%;
		width: auto;
	}
	
	.carousel-caption {
		top: 0;
		left: 0;
		right:0;
		bottom: auto;
		width: 75%; 
		padding: 24px 24px;
	}
	
	.carousel-caption .node-title, .carousel-caption .node-title a{
		font-size: 48px;
		line-height: 56px;
		text-transform: uppercase;
		font-weight: 900;
	}
	
	.carousel-caption .node-origin {
		font-size: 18px;
		line-height: 24px;
	}
	
	/* Articles */
	
	.region-content {
		margin-top: 12px;
	}
}

/* Laptop & Tablets */

/* Laptop & Tablets portrait */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1279px) {
}

/* Desktop */
@media only screen 
  and (min-device-width: 1280px) {
}