/* @override 
        http://musikteatretholstebro.billetten.dev/resources/musikteatretholstebro/css/responsive.css */

/* Extra small devices (phones, less than 768px) */
@media only screen and (max-width: 767px){ 
    body, html {
        width: 100%;
    }
    .cols4 {
        display: none;
    }

    .cols12 {
        padding: 0 20px;
    }

    .footer-content .cols4 {
        display: block !important;
        width: 97%;
    }

    .footer-content .arrow-down {
        display: none;
    }
    
    .loginbox .content .formcontainer input[type=submit] {
    	position: absolute;
    	top:135px;
    	left:211px;
    }
    
    .loginbox .content .formcontainer table tbody tr:nth-child(3) td:nth-child(2) {
    	padding-top: 40px;
    	text-align: right;
    	padding-right: 10px;
    }

    #changePriceContainer {
        width:  87%;
        left: 0 !important;
        margin-left: 4px;
    }

    .showlist-container table tr {
        border-bottom: 1px solid rgba(0,0,0,.2) !important;
        display: inline-table;
        margin-bottom: 10px;
        width: 100%;
    }

    .showlist-container table td {
        vertical-align: baseline;
        font-size: .9em;
    }   

    .showlist-container table td:not(:first-child){
        display: block !important;
    }

    .showlist-container tr td.center {
        text-align: left;
        margin-top: 10px;
    }

    .showlist-container tr td.right {
        margin-top: 10px;
        float: left;
    }
    
    .ticketInfoContainer:nth-child(1) {
    	width: 190px !important;    	
    	min-width: 190px !important;
    	float: left;
    }

    #ticketContainer:nth-child(2) a.button.button1 {
        width: 100px !important;
        font-size: 10px !important;
        text-align: center;
    }
    
    .orderconfirm td {
    	width: 195px;
    }

    .redname select {
        width: 100%;
    }
    
    div#selectReductions.box {
    	left: 2.5%;
    }
    
    #selectReductions {
    	width: 95% !important;
    }

    .redname#tixNo_2{
        width: 25%;
        padding-right: 5px;
    }
    
    .redSelect {
    	width: 40px !important;
    }

    .cols12 {
        width: 100%;
        margin: 0;
        margin-top: 20px;
    }

    .profile-menu-container {
        float: left !important;
    }

    .wrapper {
        width: 100% ;
    }

    .top-content {
        margin: 0;
        padding: 0;
        width: 100%;			
    }

    #top-bar-background {
        max-width: 100%;
        border-top: none;
        height: auto;
    }

    #topmenu {
    }

    #topmenu .mobile-nav-button img{
        margin-left: 0px;
    }

    .front-featured-container {
    	font-size: 8px;
        width: 100%;
        margin-bottom: 20px;
        height: 100%;
    }

    .front-tiles-container {
        width: 100%;
    }

    .front-featured-container .details-container {
        height: 97%;
        width: 100%;
    }

    .front-featured-container .details-container .details {
    margin-bottom: -20px !important;
    }

    #searchform .venue, #searchform .category {
        display: none;
    }

    .main-menu {
        width: 100%;
    }
    .main-menu li {
        float: none;
    }
    
    .main-menu li a {
      text-align: right;
      padding: 15px 0px !important;
      width: auto;
      margin-left: 0;
      color: #000;
    }

    .mobile-nav-button, .mobile-cart-button{
    }

    .top-content {
    }

    .main-menu {
        background: #8c2222;
        width: 100%;
    }

    .main-menu ul {
        text-align: right;
        background: #8c2222;
        width: 100%;
        margin-right: 0px;		
    }

    .main-menu ul li, .mobile-nav {

    }

    .mobile-nav-button, .mobile-cart-button{
        float: right;
        margin-bottom: 20px;
        font-size: 25px;
        margin-bottom: 10px;
        cursor: pointer;
        position: relative;
        margin-top: 15px;
    }

    .mobile-nav-button {
        margin-right: 20px;
    }
    
    .mobile-cart-button {
    	margin-right: 15px;
    }

    .toplogo{
        max-height: 80px ;
        max-width: 150px ;
        margin: 20px 0 0px 20px ;
        overflow: hidden;
        display: inline-block;
    }
    
    .toplogo img {
        max-height: 100%;
        max-width: 100% ;
        display: block;
    }

    .main-menu a {
        font-size: 20px;
    }

    .main-menu li.first {
        margin-top: 0;
    }

    .nav {
        width: 100% !important;
    }

    .front-tiles-container .item {
        width: 100%;
        height: auto;
        margin: 0 !important;
        margin-bottom: 20px !important;
    }

    .front-tiles-container .item img, .front-tiles-container .item a{
        width: 100%;
        height: auto;
    }

    .front-tiles-container .item .description-container {
        width: 100%;
        background-size: 100%;
    }

    .front-tiles-container .item .description .eventname, .front-tiles-container .item .description .location {
        width: 250px;
    }
    
    .searchpanel-container {
        width: 100%;
    }

    .searchpanel-container form input[id=searchfor]{
        width: 100%;
        background: white;
        padding: 10px;
        font-size: 17px;
    }

    /*.basketcontent-container .content {
    	overflow-x: scroll;
    } */
    
    /* Force table to not be like tables anymore */
		.basketcontent-container table, .basketcontent-container thead, .basketcontent-container tbody, .basketcontent-container td, .basketcontent-container tr { 
			display: block;
		}
		
		.basketcontent-container tr {
			float: left;
		}
		
		.basketcontent-container tr th {
			width: 100%;
		}
		
		.basketcontent-container tr.item { 
			width: 100%;
			float: left;
			margin-bottom: 2px;
		 }
		 
		 .basketcontent-container tr.item td:nth-child(1) {
		 	display: none;
		 }
		 
		 .basketcontent-container tr.item td:nth-child(2), .basketcontent-container tr.item td:nth-child(4), .basketcontent-container tr.item td:nth-child(6) {
		 	float: left;
		 	width: 50%;
		 }
		 
		 .basket-address-container {
		 	background: none !important;
		 	padding: 0;
		 	margin-bottom: 10px;
		 }
		 
		 .basketcontent-container tr.item td:nth-child(7) {
		 	display: none;
		 }
		 
		.basketcontent-container .item td {
			padding: 5px 10px !important;
		}	 
		
		.basketcontent-container td { 
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid rgba(0,0,0,.03); 
			position: relative;
			padding-left: 50%;
		}
		
		.basketcontent-container td:last-child {
			text-align: left !important;
		}
    
    .basketcontent-container .content .smallbutton {
    	margin-bottom: 5px;
    }
    
    .basket-viewbasket div:nth-child(4).floatright {
    	float: left !important;
    	width: 100%;
    }
    
    .basket-viewbasket div:nth-child(4).floatright #redeemVoucherBtn {
    	float: left;
    }
    
    .basket-viewbasket div:nth-child(4).floatright a:nth-child(2) {
    	float: left;
        margin-left: 5px;
    }

    .searchpanel-container form input[id=searchFromDate], .searchpanel-container form input[id=searchToDate]{
        background: white;
        padding: 10px;
        font-size: 17px;
        width: 90px;
    }
    
    .search-results-container .item .eventinfo, .search-results-container .item .dateinfo {
    	width: 153px;
    	float: left;
    	margin-left: 20px;
    	line-height: 1.5em;
    }
		
		
    #terms {
        width: 100%;
        height: 100% !important;
        overflow: visible !important;
    }
	
		.modalBox {
			width: 95% !important;
			position: absolute !important;
			top: 646px !important;
		}
		
    #terms table, .terms-container table{
        width: 100% !important;
    }

    #loginform input[type=text], #loginform input[type=password]{
        background: white;
        padding: 10px;
        font-size: 17px;
        width: 100%;
    }
    
    #addressform input[type=text], #addressform select[id=country] {
    	width: 90%;
    }
    
    #addressform .floatright {
    	float: right !important;
    	padding-right: 15px;
    }

    .shippingbox .head2, .totalbox .head2, .shippingbox .content, .totalbox .content {
        margin: 0 15px;
    }

    .shippingbox, .totalbox {
        width: 100% !important;
        margin: 0 0 5px 0!important;
        padding: 15px 0px !important;

    }

    #body div.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable {
        width: 95% !important;
    }

    .ui-resizable-se {
        display: none !important;
    }


    .ui-datepicker-trigger {
        margin-top: 6px;
    }

    .search-submit-container .button {
        text-align: center;
        padding: 13px 13px 14px 13px !important;
        width: 55px;
    }


    .search-submit-container {
    	float: right;
    	margin-left: 0;
    }


    #cookie-notice {
        width: 100%;
    }

    .footer-container {
        width: 100%;
    }

    .eventheader {
        width: 100%;
    }

    #searchform > div:first-of-type {
        width: 80%;
    }
    
    .search-input-container {
    	width: 100%;
		  padding-right: 20px !important;    	
    }

    #searchform {

    }

    .leftcol {
        width: 100% !important;
    }

    .event-image {
        width: 100% !important;
        height: auto !important;
    }

    .content .floatright {
        float: left !important;
        margin-bottom: 20px;
    }

    .content .floatright .button {
        font-size: 15px !important;
        padding: 10px;
    }

    .basketcontent-container .content .floatright .button{
        float: left;
    }
   	
   	.basketcontent-container .content table tbody tr:not(.item) {
   		position: relative;
   	}
   	
   	.basketcontent-container .content table tbody tr:not(.item) th:nth-child(1) {
		width: 45%;
		height: 100px;
   	}
   	
   	.basketcontent-container .content table tbody tr:not(.item) th:nth-child(2) {
   		position: absolute;
   		top: 40px;
   		border-bottom: none;
   	}
   	
   	.basketcontent-container .content table tbody tr:not(.item) th:nth-child(2) .smallbutton:not(.changeprice-button) {
   		margin-right: 8px;
   	}

    #calenderContainer div.details {
        width: 100% !important;
    }

    .calendar-container .image-container img {
        height: auto;
        width: 100%;
    }

    .calendar-container .showdivider {
        margin-bottom: 10px;
    }

    .calendar-top-container .calendarMonth {
        width: 22%;
        margin-right: 4%;
        margin-bottom: 12px;
    }

    .calendarMonth:nth-child(4n) {
        margin-right: 0;
    }

    .eventdetails-container .rightcol {
        padding-left: 0;
        padding-top: 10px;
        margin-left: 0;
    }

    .head2.elipsis {
        width: 100%;
    }
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 992px) {

    .searchpanel-container form input[id=searchfor]{
        width: 100%;
        background: white;
        padding: 10px;
        font-size: 17px;
    }
    
    .loginbox .content .formcontainer input[type=submit] {
    	position: relative;
    }

    .searchpanel-container form input[id=searchFromDate], .searchpanel-container form input[id=searchToDate]{
        background: white;
        padding: 10px;
        font-size: 17px;
        width: 90px;
    }

    #topmenu {
    }

    #topmenu .mobile-nav-button img {
        margin-left: 0px;
    }


    .cols4 {
        display: none;
    }

    .footer-content .cols4 {
        display: block !important;
        width: 23% !important;		
    }

    .footer-container {
        width: 100% !important;
    }

    .cols12 {
        width: 100%;
        margin: 0;
		  	padding: 0 20px;        
    }

    .wrapper {
        width: 100% ;
        margin-left: 0;
        box-shadow: none;	
    }

    .top-content {
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .front-featured-container {
        width: 100%;
        margin-bottom: 20px;
        height: 100%;
    }
    
    .front-featured-container .details-container {
        height: 100%;
        width: 100%;
    }

    .front-featured-container .featured-image{
        width: 100%;
        height: 100%;
    }

    #searchform .venue, #searchform .category {
        display: none;
    }

    #searchform .floatleft {
    	width: 85%;
    }

    .search-input-container {
        width: 100%;
    }
    
    .front-tiles-container {
    	width: 100%;
    }

    .front-tiles-container .item {
        width: calc(33.33% - 13.33px);
        height: auto;
        box-sizing: border-box;
        margin: 0 !important;
        margin-bottom: 20px !important;
    }

    .item.lastinrow {
    }
    
    .front-tiles-container .item:nth-child(3n+1), .front-tiles-container .item:nth-child(3n+2) {
    	margin-right: 20px !important;
    }

    .basket-viewbasket div:nth-child(4).floatright a:nth-child(2) {
        margin-left: 5px;
    }

    .item:first-child, .lastinrow + .item {
    }

    .front-tiles-container .item img, .front-tiles-container .item a{
        width: 100%;
        height: auto;
    }

    .front-tiles-container .item .description-container {
        width: 100%;
        background-size: 100% 160px;
    }

    #top-bar-background {
        width: 100%;
        border-top: none;
        height: auto;
    }

    .search-date-container .to-date {
        clear: none;
    }

    .search-date-container {
        margin-left: 11px;
    }

    .front-tiles-container .item .description .eventname, .front-tiles-container .item .description .location {
        width: 200px;
    }

    .reductions input[class=antal] ,#loginform input[type=text] {
        background: white;
        padding: 10px;
        font-size: 17px;
    }

    .basketoptions-container .totalbox {
        float: right;
    }
    


    #terms {
        overflow: visible !important;
        height: 100% !important;
    }

    .basketoptions-container .shippingbox, .basketoptions-container .totalbox {
        width: 46%;
        margin-left: 0;
    }

    .searchpanel-container {
        margin-bottom: 20px;
    }


    .main-menu li {
        float: none;
    }

    .main-menu {
        background: #8c2222;
        margin: 0;
        width: 100%;
    }

    .main-menu li.first {
        margin-top: 0;
    }

    .main-menu ul {
        margin-right: 0px;
        background: #8c2222 !important;
        width: 100%;		
    }

    .main-menu ul li {
        width: 100%;
        text-align: right;
    }	
    .main-menu ul li a{

    }
    
    #add_products_button {
        margin-left: 10px;
    }

    .search-submit-container {
		text-align: center;
		float: right;
		margin-right: 9px;
		margin-left: 0;			
    }

    .search-submit-container .button {
        margin-left: 10% !important;
        padding: 16px !important;
        line-height: 1;
        width: 95px;
    }

    .search-submit-container input[type="submit"] {

    }


    .mobile-nav-button, .mobile-cart-button{
        float: right;
        margin-bottom: 20px;
        font-size: 40px;
        margin-bottom: 10px;
        margin-right: 9px;
        cursor: pointer;
        position: relative;
    }

    .toplogo {
        width: 303px;
        margin: -5px 0 0 20px;
        float: left;
    }

    .top-content {
        padding: 15px 0 0 0;
        margin-bottom: 20px;
    }

    .search-results-container .item:first-child{
        margin-right: 0 !important;
    }

    .main-menu {
        padding-bottom: 0px;
    }

    .main-menu a {
        font-size: 20px;
    }

    .nav {
        width: 100%;
        height: 65px;
    }

}



/* Large devices (large desktops, 992px and up) */
@media (min-width: 992px) {
    .cols4 {
        display: block;
    }
    span.icon-user {
    	display: none;
    }
    .mobile-nav-button, .mobile-cart-button {
        display: none;
    }
}

/* Everything up to desktops */
@media (max-width: 992px) {
    .mobile-nav-button, .mobile-cart-button {
        display: block;
    }

    .main-menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height .5s ease-out;
    }
    
    .main-menu.open_menu {
        max-height: 500px;
        transition: max-height .3s ease-in;   
    }

    .main-menu ul, .main-menu {
        background: none !important;
    }
    
    #redeemVoucherBtn {
  		margin-right: 0;
    }
    
    li.last {
    	width: 100% !important;
    	text-align: right !important;
    }

    .main-menu li {
        margin: 0;
        background: #fff !important;
        border-bottom: 1px solid rgba(0,0,0,.1);
        padding-right: 20px;
    }

    .main-menu li:hover{
        background: rgba(0,0,0,.1) !important;
    }

    .main-menu li:hover a {
        background: none;
    }

    .main-menu li a {
        text-align: right;
        padding: 15px 10px;
        width: auto;
        margin-left: 0;
        color: #000;
    }

    .main-menu .mobile-nav li span {
        font-size: 20px !important;	
    }

    .main-menu .mobile-nav:hover {
        background: rgba(0,0,0,.07);
    }
    
    #topmenu .main-menu a {
    	color: #000;
    	padding-right: 20px !important;
    }
    
    #topmenu .nav {
    	
    }
    
    #ticketContainer {
    	float: left !important;
    }
		
		.product_dialog {
			width: 100% !important;
			left: 0 !important;
		}
		
		.products, .products .product-tile {
			width:  99% !important;
		}
		
		.products .product-tile {
			padding: 0 !important;
		}
		
		.products .product-tile .product-image, .products .product-tile .product-image img {
			margin-right: 0px !important;
			width: 99%;
		}
		
		.product-button-container .floatright {
			margin-right: 0 !important;
		}
		
}