{#


.shopcontainer {
    display: flex;
    flex-direction:row;
    grid-gap: 3px;
//    grid-template: 40px auto 40px / repeat(12, 1fr);  
    grid-template: auto auto auto / repeat(14, 1fr);  

    grid-template-areas: 
	"h h h h h h h h h h h h h h"
	". s s s s s s s s s c c c ."
	"f f f f f f f f f f f f f f";
}

.shoparea   {
    grid-area: s; 
    max-width:50%;
}

.cartarea {
    grid-area: c; 
    max-width:30%;
}

#}





.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;
  overflow:hidden;padding:3px 2px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;
  font-weight:normal;overflow:hidden;padding:3px 2px;word-break:normal;}
.tg .tg-0lax{text-align:left;vertical-align:top;width:50%;}


.list-inline{display:block;}
.list-inline li{display:inline-block;}
.list-inline li:after{content:'|'; margin:0 10px;}


.form-control { width: auto;display:inline;}
.box {  border: 2px solid black;  margin: 1em;}
/*Style the DIV*/.container .box{  width: 100px;  height: 125px;  float: left;  margin: 2px;  padding: 2px;  border: 4px solid #ccc;  text-align: center;}
/*Fade all the DIV when user hovers on any div
.container:hover .box{  zoom: 1;  filter: alpha(opacity=45);  opacity: 0.45;  -webkit-transition: opacity .5s ease-in-out;  -moz-transition: opacity .5s ease-in-out;  -ms-transition: opacity .5s ease-in-out;  -o-transition: opacity .5s ease-in-out;  transition: opacity .5s ease-in-out;}
*/
/*Fade out the particular DIV when user hover on that DIV*/.container .box:hover{  box-shadow: 3px 3px 15px #666;  border-color:#C76C0C;  background: #C76C0C;  color: #fff;  cursor: pointer;/*Opacity*/ zoom: 1;  filter: alpha(opacity=100);  opacity: 1;}
.button .box:hover{  box-shadow: 3px 3px 15px #666;  border-color:#C76C0C;  background: #C76C0C;  color: #fff;  cursor: pointer;/*Opacity*/ zoom: 1;  filter: alpha(opacity=100);  opacity: 1;}
.text2 {visibility:visible;}
.text2:hover {visibility:visible;}
/*
.jumbotron {background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%), url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Brooklyn_Bridge_panorama.jpg/1000px-Brooklyn_Bridge_panorama.jpg');height: 100px; background-size: cover;}
*/
.jumbotron {    padding: 3em 3em;}
.jumbotron h3 {color:red; font-weight: 900;}
.container {  margin: 0 auto  0 auto;}
.container { padding-bottom: 5px;};
.page-header h3 { margin-top: 0;}
.spongebob { margin-top: 0;}
div {   padding-top:0px;margin-top: 0px;}
.white {background:white;}
.red {background:red;}
.yellow {background:yellow;}
.green {background:green}

.nopadding { padding: 0 !important; margin: 0 !important; }

p { text-indent: 10px; }
.navbar { margin-bottom: 0px; }
.marginBottom-0 {margin-bottom:0;}

#xconnect, xabout { width:300px;}

.card-img-left {
  border-bottom-left-radius: calc(.25rem - 1px);
  border-top-left-radius: calc(.25rem - 1px);
  float: left;
  padding-right: 1em;
  padding-left: 1em;
  margin-bottom: -1.25em;
}

/* To Dropdown navbar dropdown on hover */
.navbar-nav > li:hover > .dropdown-menu { display: block; }

.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;
}

  //#content { height: 1000px; overflow-y: scroll; padding: 10% 10% !important; margin-30: 90px; !important; } 

  li {list-style-position: inside; }
  html, body { height: 100%; width: 100%; margin: 0;                       padding: 0; max-width:100%;}
  //header { width: 100%; height: 60px;                  position: fixed; top: 0; }
  //footer { width: 100%; height: 30px; background: yellow; position: fixed; bottom: 0; }

article p::first-letter {
    font-size: 125%;
    color: black;
    font-weight: bold;
}
  .navbar .navbar-default{ margin-bottom: 0px;     background-color: #eee; border-color: black;    }
		
  @media (max-width: 768px) {
               .nav-flat li { display: inline; }
               .nav-flat li a { display: inline; }
               .dropdown-menu li { display: block; }
	       .dropdown-menu li a { display: block; }
       }


	@media only screen                            (max-width: 399px){
                        article {
                                -webkit-column-count: 1; /* Chrome, Safari, Opera */
                                -moz-column-count: 1; /* Firefox */
                                column-count: 1;
                                -webkit-column-gap: 10px; /* Chrome, Safari, Opera */
                                -moz-column-gap: 10px; /* Firefox */
                                column-gap: 10px;
                                -webkit-column-rule-style: dotted; /* Chrome, Safari, Opera */
                                -moz-column-rule-style: dotted; /* Firefox */
                                column-rule-style: dotted;
                                column-rule-color: #ccc; }
  			#content { padding: 0% 2% 4% 2% !important;} 
                                }
	@media only screen and (min-width:400px)  and (max-width: 768){
                        article {
                                -webkit-column-count: 1; /* Chrome, Safari, Opera */
                                -moz-column-count: 1; /* Firefox */
                                column-count: 1;
                                -webkit-column-gap: 10px; /* Chrome, Safari, Opera */
                                -moz-column-gap: 10px; /* Firefox */
                                column-gap: 10px;
                                -webkit-column-rule-style: dotted; /* Chrome, Safari, Opera */
                                -moz-column-rule-style: dotted; /* Firefox */
                                column-rule-style: dotted;
                                column-rule-color: #ccc; }
  			#content { padding: 0% 2% 4% 2% !important;} 
                                }
	@media only screen and (min-width:769px)  and (max-width: 1279px){
                        article {
                                -webkit-column-count: 2; /* Chrome, Safari, Opera */
                                -moz-column-count: 2; /* Firefox */
                                column-count: 2;
                                -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
                                -moz-column-gap: 20px; /* Firefox */
                                column-gap: 20px;
                                -webkit-column-rule-style: dotted; /* Chrome, Safari, Opera */
                                -moz-column-rule-style: dotted; /* Firefox */
                                column-rule-style: dotted;
                                column-rule-color: #ccc; }
  			#content { padding: 0% 2% 4% 2% !important;} 
                                }
	@media only screen and (min-width:1280px)  and (max-width:1499px) {
                        article {
                                -webkit-column-count: 3; /* Chrome, Safari, Opera */
                                -moz-column-count: 3; /* Firefox */
                                column-count: 3;
                                -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
                                -moz-column-gap: 20px; /* Firefox */
                                column-gap: 20px;
                                -webkit-column-rule-style: dotted; /* Chrome, Safari, Opera */
                                -moz-column-rule-style: dotted; /* Firefox */
                                column-rule-style: dotted;
                                column-rule-color: #ccc; }
  			#content { padding: 0% 2% 4% 2% !important;} 
                                }
	@media only screen and (min-width:1501px)   {
                        article {
                                -webkit-column-count: 4; /* Chrome, Safari, Opera */
                                -moz-column-count: 4; /* Firefox */
                                column-count: 4;
                                -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
                                -moz-column-gap: 20px; /* Firefox */
                                column-gap: 20px;
                                -webkit-column-rule-style: dotted; /* Chrome, Safari, Opera */
                                -moz-column-rule-style: dotted; /* Firefox */
                                column-rule-style: dotted;
                                column-rule-color: #ccc; }
  			#content { padding: 0% 2% 4% 2% !important;} 
                                }
.scroll-left {
 height: 20px;	
 overflow: hidden;
 position: relative;
 background: yellow;
 color: orange;
 border: 1px solid orange;
}
.scroll-left p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: scroll-left 15s linear infinite;
 -webkit-animation: scroll-left 15s linear infinite;
 animation: scroll-left 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}


.navbar-nav { min-height:28px; height: 28px; }
#.navbar-xs .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; }
.navbar-nav .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 28px; }

#.navbar-header .navbar-toggle {
    margin-top:0px;
    margin-bottom:0px;
    padding-bottom:0px;
}