body{
    
}
header,footer {
    height:100px;
    background:-webkit-linear-gradient(left,#529525 0%,#e8f710 130%);
    background-color:green;
    padding:5px;
    margin:5px;
    text-align:center;
}

.bigImage {
	margin: auto; 
	display: block;
	box-shadow: 7px 7px 7px -8px rgba(0,0,0,0.99);
border-radius: 8px;
border: 2px solid white;
padding:5px;
}

.choosetext {
font-size:20px; 
color:red;
}

.desctext {
	font-size:16px; 
	line-height:24px;
}


.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}


/* Change Homepage image depending on device */
.image_full{
   display:block !important;
  }

 .image_mobile{
  display:none!important;
 }


.modal-body {
  position: relative; /* Context for absolute positioning */
  padding: 0; /* Remove padding to allow the image to fill the body */
}

.modal-body .close {
  position: absolute;
  top: 15px; /* Adjust as needed */
  right: 15px; /* Adjust as needed */
  z-index: 1051; /* Ensures it's above the image */
  font-size: 30px; /* Increase the size of the close button */
  color: #fff; /* Ensure the button is visible on top of the image */
  opacity: 1;
  text-shadow: 0 1px 0 #000; /* Optional: adds a shadow for better visibility */
}

#fullSizeImage {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #ccc; /* Light gray border */
  /* Optional: add a slight border-radius if desired for rounded corners */
  border-radius: 4px;

}

.productImage {
cursor: zoom-in; 
margin-bottom:10px;
}

.container {
	padding-right: 0px;
	padding-left: 0px;
	
}

.oldprice {

	color:red !important;
	
}


.priceDisplay {
position:absolute; 
bottom:20px; 
right:30px; 
color:white; 
font-weight:bold; 
font-size:30px;
text-shadow: 2px 2px 8px #000000;

}

@media (min-width: 768px) {
  .modal-dialog {
    /* Override to auto to allow the modal to grow based on content, or set a specific max-width */
    width: auto;
    max-width: 1280px; /* or 1280px if you want to set a maximum */
    margin: 5px auto;
  }
}



@media only screen and (max-width: 468px) {
	h2{
		font-size:14px !important;
		line-height:18px !important;
	}
	h1 {
		line-height:22px !important;
	}
	h5 {

	 font-size:15px !important;
	 margin-top:2px !important;
	 
	}

	.choosetext {
	font-size:16px;
		margin-bottom:10px;
	}
	.navbar-fixed-bottom {
		margin-bottom:20px !important;
	}
	.homebody {
	font-size:15px;
	}
	.navbox {
		height:30px !important;
	}
	
	/* Change Homepage image depending on device */
	  .image_full{
   display:none !important;
  }
  
   .image_mobile{
   display:block !important;
  } 

.productImage {
margin-top:10px;
}
  
.priceDisplay {
bottom:10px; 
left:30px; 
font-size:30px;"
}

label {
margin-bottom: 10px;
}
  
}




/*
*   CSS file with Bootstrap grid classes for screens bigger than 1600px. Just add this file after the Bootstrap CSS file and you will be able to juse col-xl, col-xl-push, hidden-xl, etc.
*
*   Author: Marc van Nieuwenhuijzen
*   Company: WebVakman
*   Site: WebVakman.nl
*
*/

@media (min-width: 1200px) and (max-width: 1599px) {
    .hidden-lg {
        display: none !important;
    }
}


.visible-xl-block,
.visible-xl-inline,
.visible-xl-inline-block,
.visible-xl{
    display: none !important;
}



@media (min-width: 1600px) {
    .container {
        width: 1570px;
    }

    .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
        float: left;
    }

    .col-xl-12 {
        width: 100%;
    }

    .col-xl-11 {
        width: 91.66666667%;
    }

    .col-xl-10 {
        width: 83.33333333%;
    }

    .col-xl-9 {
        width: 75%;
    }

    .col-xl-8 {
        width: 66.66666667%;
    }

    .col-xl-7 {
        width: 58.33333333%;
    }

    .col-xl-6 {
        width: 50%;
    }

    .col-xl-5 {
        width: 41.66666667%;
    }

    .col-xl-4 {
        width: 33.33333333%;
    }

    .col-xl-3 {
        width: 25%;
    }

    .col-xl-2 {
        width: 16.66666667%;
    }

    .col-xl-1 {
        width: 8.33333333%;
    }

    .col-xl-pull-12 {
        right: 100%;
    }

    .col-xl-pull-11 {
        right: 91.66666667%;
    }

    .col-xl-pull-10 {
        right: 83.33333333%;
    }

    .col-xl-pull-9 {
        right: 75%;
    }

    .col-xl-pull-8 {
        right: 66.66666667%;
    }

    .col-xl-pull-7 {
        right: 58.33333333%;
    }

    .col-xl-pull-6 {
        right: 50%;
    }

    .col-xl-pull-5 {
        right: 41.66666667%;
    }

    .col-xl-pull-4 {
        right: 33.33333333%;
    }

    .col-xl-pull-3 {
        right: 25%;
    }

    .col-xl-pull-2 {
        right: 16.66666667%;
    }

    .col-xl-pull-1 {
        right: 8.33333333%;
    }

    .col-xl-pull-0 {
        right: auto;
    }

    .col-xl-push-12 {
        left: 100%;
    }

    .col-xl-push-11 {
        left: 91.66666667%;
    }

    .col-xl-push-10 {
        left: 83.33333333%;
    }

    .col-xl-push-9 {
        left: 75%;
    }

    .col-xl-push-8 {
        left: 66.66666667%;
    }

    .col-xl-push-7 {
        left: 58.33333333%;
    }

    .col-xl-push-6 {
        left: 50%;
    }

    .col-xl-push-5 {
        left: 41.66666667%;
    }

    .col-xl-push-4 {
        left: 33.33333333%;
    }

    .col-xl-push-3 {
        left: 25%;
    }

    .col-xl-push-2 {
        left: 16.66666667%;
    }

    .col-xl-push-1 {
        left: 8.33333333%;
    }

    .col-xl-push-0 {
        left: auto;
    }

    .col-xl-offset-12 {
        margin-left: 100%;
    }

    .col-xl-offset-11 {
        margin-left: 91.66666667%;
    }

    .col-xl-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-xl-offset-9 {
        margin-left: 75%;
    }

    .col-xl-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-xl-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-xl-offset-6 {
        margin-left: 50%;
    }

    .col-xl-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-xl-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-xl-offset-3 {
        margin-left: 25%;
    }

    .col-xl-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-xl-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-xl-offset-0 {
        margin-left: 0;
    }

    .visible-xl {
        display: block !important;
    }

    table.visible-xl {
        display: table;
    }

    tr.visible-xl {
        display: table-row !important;
    }

    th.visible-xl, td.visible-xl {
        display: table-cell !important;
    }

    .visible-xl-block {
        display: block !important;
    }

    .visible-xl-inline {
        display: inline !important;
    }

    .visible-xl-inline-block {
        display: inline-block !important;
    }

    .hidden-xl {
        display: none !important;
    }
}