@import url(http://fonts.googleapis.com/earlyaccess/opensanshebrew.css);
@import url(http://fonts.googleapis.com/earlyaccess/opensanshebrewcondensed.css);
@import url('/css/font-awesome.min.css');
/* layout */
body {

  color:#666666;
  background: #ffffff;
font-family: 'Open Sans Hebrew Condensed', Arial, sans-serif; 
direction: rtl;
text-align: right;
font-size: 18px;
line-height: 1.5;
overflow-y:scroll;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    line-height: 1.4;
	font-weight:500;
}

.title {font-size:47px;
color: #c01634;
text-align:justify;
}


.date {font-size:24px;
color:#c01634;
font-weight:700;
line-height:0;
}

.name {font-size:26px;
color:#666666;
font-weight:700;
margin-bottom: 0px;
}
.lable {font-size:40px;
text-align: center;
}

.red {color:#c01634;}

pre { margin: 0; padding: 10px 20px !important;}

footer {
  margin-top: 10px;
}

.container { width: auto; max-width: 1170px; direction: rtl; text-align: right;}

/* list styes */
.list-unstyled,
.list-unstyled ul { min-width: 120px }
ul {
    list-style-type: none;
    padding: 10px 0 0 0;
}
/* page styles */

a, a:focus, a:active, object, embed {color: #666666; outline: none; text-decoration: none; }
:-moz-any-link:focus { outline: none; }
input::-moz-focus-inner { border: 0; }
:focus { outline: 0; }

 a:hover {color: #da3203; outline: none; text-decoration: none; }

.navbar-default .navbar-nav>li>a {
    color: #666;
    font-size: 2.5rem;
}

.navbar-default {
    background: transparent;
	background-color: #ffffff;
	border: 0;
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.border-bottom {border-bottom: 1px solid #cccccc; padding: 10px 0 20px ;}
.cfa {background: #d93300; ; color: #ffffff; padding-right: 20px; margin-bottom: 2px;}
.cfa a {color: #ffffff;}
.eqCol h4,.eqColev h4,.eqColfam h4, .eqColshrine h4,.eqColjud h4,.eqColarch h4,.eqColart h4{font-size: 21px; margin-bottom: 0;}
/**************isotope*****************/


.isotopeWrapper article{
    margin-bottom: 5px;
}

#portfolio img  {
	width:100%;
}

#portfolio article p {
	margin-bottom:1.45em;/*set next row on the baseline*/
}
nav#filter {
	margin-bottom:1.5em;
}

nav#filter li {
	display:inline-block;
	margin:0 0 0 5px;
}
nav#filter a {
	padding: 4px 12px;
	line-height: 20px;
	text-decoration: none;
}


.portfolio-items article img {width:100%;} 

.portfolio-item {
	display: block;
	position: relative;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	cursor:default;
}
.portfolio-item img {
	-webkit-transition: all 300ms linear;
	-moz-transition: all 300ms linear;
	-o-transition: all 300ms linear;
	-ms-transition: all 300ms linear;
	transition: all 300ms linear;

}
.portfolio-item .portfolio-desc {
    display: block;
    opacity: 1;
    position: absolute;
    width: 100%;
	left: 0;
	bottom: 0;
	/*color: rgba(220, 220, 220);*/
}


.portfolio-item:hover .portfolio-desc {
	/*padding-top: 5%;*/
	height: 100%;
    transition: all 200ms ease-in-out 0s;
	opacity: 1;
	/*background: #7bb5de;*/
}

.portfolio-item .portfolio-desc a {
	color: #fff;
}
.portfolio-item .portfolio-desc a:hover {
	/*text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.7);*/
	text-decoration: none;
}
.portfolio-item .portfolio-desc .folio-info {
	/*top:-20px;*/
	padding:  0;
	height: 0;
    opacity: 1;
    position: relative;
	background: transparent;

}
/*
@-moz-document url-prefix() {
.portfolio-item .portfolio-desc .folio-info {
    opacity: 0!important;
}
}
*/
.portfolio-item:hover .folio-info {
	height: 100%;
    opacity: 1;
	 background-color: #666666;
    /*background-image: url(http://212.150.186.108/home/images/raster.png);*/
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
	top:0px;
}
/*
@-moz-document url-prefix() {
.portfolio-item:hover .folio-info {
    opacity: 1!important;
}
}
*/
.portfolio-item .portfolio-desc .folio-info h5 {
	text-transform: uppercase;
}
.portfolio-item .portfolio-desc .folio-info p {
	color: #ffffff;
	font-size: 12px;
}

.isotope h2 , .isotope h3 , .isotope h4  
{
/*text-shadow: 1px 2px 3px rgba(0,0,0,0.7);*/
margin-top: 5px;
margin-bottom: 5px;
}

.isotope h2 a, .isotope h3 a, .isotope h4 a, .isotope a
{
color: #ffffff; 
margin-top: 5px;
margin-bottom: 5px;
display: block;
cursor: pointer;
}


/* ---- isotope ---- */

.isotope {
border-top: 0px solid #888;
      background-color: rgba(255, 255, 255, 255);
  max-width: 1170px;
  height: 800px;
  margin: 0 auto;
  padding: 15px 0 0 0;
}

/* clear fix */
.isotope:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .item ---- */

.item {
  float: left;
  width: 292px;
  height: 200px;
  background: #ffffff;
  border: 2px solid #ffffff;
  /*border-color: hsla(255, 0%, 0%, 0.7);*/
  text-align: right;
  cursor:pointer;
  direction: rtl;
}

.item.width2 { width: 584px;   text-align: right;  direction: rtl;}
.item.height2 { height: 400px;   text-align: right;  direction: rtl;}
#left-top {background: url(http://www.imj.org.il/images/50/left-top.jpg) no-repeat;}
#middle-top {background: url(http://www.imj.org.il/images/50/middle-top.jpg) no-repeat;}
#right-top {background: url(http://www.imj.org.il/images/50/right-top.jpg) no-repeat;}
#left-bottom {background: url(http://www.imj.org.il/images/50/left-bottom.jpg) no-repeat;}
#right-middle {background: url(http://www.imj.org.il/images/50/right-middle.jpg) no-repeat;}
/*#middle-bottom {background: url(http://www.imj.org.il/images/50/middle-bottom.jpg) no-repeat;}*/
#right-bottom{background: url(http://www.imj.org.il/images/50/right-bottom.jpg) no-repeat;}

.w,.ww,.wwhh,.hh {
  text-align: right;
  /* May want to do this if there is risk the container may be narrower than the element inside */
  white-space: nowrap;
}
 
/* The ghost, nudged to maintain perfect centering */
.w:before ,.ww:before ,.wwhh:before ,.folio-info:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: bottom;
  width: 292px;
}

.centered2{
  display: inline-block;
  vertical-align: bottom;
  width: 584px;
}

.w,.ww
{
	height: 200px;

display: table;
}
.wwhh,.hh
{
	height: 400px;

display: table;
}
.centered, .centered2
{
	  display: table-cell;
  vertical-align: bottom;
  padding-bottom: 10px;
}


   
 .folio-info h2,.folio-info h3 {color: #ffffff;  margin-right: 15px; line-height: 1.1;}
.folio-info h3 {font-size: 2.1rem;}
.addthis_button_facebook_like {
overflow:hidden;
width: 60px !important;

}

	 
/* This only works with JavaScript, 
if it's not present, don't show loader */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(/imagine/ci/images/ajax-loader2.gif) center no-repeat #fff;
}
#bg {
       position:absolute;
       top:135px;
       left:0px;
       width:100%;
       height:100%;
       background: #ffffff;*/
       z-index:2;
       /* These three lines are for transparency in all browsers.*/
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
       filter: alpha(opacity=0);
       opacity:0; 
	   transition:.3s ease-in-out;
	   -webkit-backface-visibility: hidden;
   }
   


	 
	 .thumbnail {
    display: block;
    padding: 0;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 0px solid #ddd;
    border-radius: 0;
    -webkit-transition: border .2s ease-in-out;
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
	    -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0);
    box-shadow: 0 1px 0 rgba(0,0,0,0);

}

.col-sm-4 {
    padding-right: 0px;
    padding-left: 0px;
	border-right: 1px solid #cccccc;
	    border-top: 1px solid #cccccc;
}

.eqCol a, .eqColev a, .eqColfam a ,.eqColshrine a ,.eqColjud a, .eqColarch a ,.eqColart a{color: #666666; }

.eqCol a:hover, .eqColev a:hover, .eqColfam a:hover ,.eqColshrine a:hover ,.eqColjud a:hover, .eqColarch a:hover ,.eqColart a:hover {border-bottom: 1px dotted #999999;}
/*
.eqCol:nth-of-type(3) p, .eqCol table, .eqCol iframe{
margin-right: 15px;
}*/
.cfa {background: #d93300; ;color: #ffffff; padding:  10px 20px 5px 0;}
.cfa a {color: #ffffff;}
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    text-align:right;
    /* inline-block space fix */
    margin-right:-4px;
}
.col-centered-center {
    display:inline-block;
    float:none;
    text-align:center;
    /* inline-block space fix */
    margin: auto;
}	
#search
{
background: #abafb2;
color: #ffffff;
padding: 18px ;
float: left;
margin-left: 2px;
border: 0px solid #cccccc;

}

.fa-search {font-size: 2rem; color: #ffffff;}
.dropdown .fa-search {font-size: 2rem; color: #ffffff;}
#search-menu .fa-search {display:none;}
    .navbar-nav {
        margin: 0 auto;
        display: table;
        table-layout: auto;
        float: none;
        width: 100%;
    }
	
	.lang {
width: 300px!important;
    min-width: inherit;
    left: 0!important;
	right: auto;
    top: 70px;
	border-radius: 0;
	}
	.lang-menu {
    width: 900px;
	min-width: inherit;
    right: auto!important;
	left: 0;
}
	#languages {
    background-color: #abafb2;
    color: #ffffff;
    float: left;
	    margin-left: 1px;
}
.btn {
    text-shadow: none;
    background-image: none;
    border-color: none;
    border-bottom-color: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
	border-radius: 0;
	border: 0;
}

#fb-wrapper
{
position:absolute; 
left: 0.2%; 
top: 612px; 
margin:10px 10px 0 0;
}

#fb-wrapper-page
{
position:fixed; 
left: 0; 
bottom: 5%; 
margin:10px 10px 0 0;
}
.at4-hide-content, .at4-show-content {visibility: hidden;}
.at-share-close-control .at4-arrow.at-left {
    display: none;
}

/********tourguides form*************/

#register-form {direction: rtl; text-align: right;}
#register-form p {padding: 10px 0;}
.required-field, .error {
color: #ff0000;
font-size: 16px;
text-align: right;
font-weight: bold;
}
.error {
margin: 0 5px;
}
#tourguides th, #tourguides td {text-align: right; direction:rtl;}

/************register for mailchimp newsletter**************/

	#mc_embed_signup
	{
	background:#fff; 
	clear:left;   
	text-align: right;
  direction: rtl;
  }
#mc_embed_signup form 
{
  display: block;
  position: relative;
  text-align: right;
  direction: rtl;
  padding: 10px 0 10px 3%;
}

#mc_embed_signup .mc-field-group .asterisk {
  left: 10px!important;
  right:  initial;
}

#mc_embed_signup .indicates-required {
  margin: 10px 0;
}

#mc_embed_signup #mce-success-response {
  color: maroon;
}

/**************add links style to pages**************/

#content-container  #contact a, 
#content-container  #addlinks a, 
#content-container  a.addlink ,
.content-container  .contact a, 
.content-container  .addlinks a, 
.content-container  a.addlink 
{
	padding: 0 5px; color: #666666;
}
.imlabel
{
font-size: 1.5rem;
color: #666666;
  }
  .summer {font-size: 22px;}
  .hline {border-top: 1px #666666 solid; margin:40px 0;}
  .summer .redline{border-top: 2px #c01634 solid; margin:10px 0;}
  .summer .row:nth-child(2),   .summer .row:nth-child(3) {margin-bottom: 40px;}
.summer button {
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: buttontext;
    background-color: #d93300;
	color: #ffffff;
    box-sizing: border-box;
    padding: 2px 6px 3px;
    border: 0px outset buttonface;
}

.summer .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    border-radius: 0;
    margin: 20px auto;
}
.summer h2 {padding: 0; margin-top: 10px;}
.summer .cfa {padding: 10px; width: 90px;}
.wise td.active {background: #8e9ea7; text-align:center; color:#ffffff}
.wise td {padding:5px;}

@media ( min-width: 768px ) {
.popup {
    width: 50%;
	margin: auto;
	border-radius: 0;
}
}
/************galleries**************/
img[usemap] {
    border: none;
    height: auto;
    max-width: 100%;
    width: auto;
}

/************media query larger formats************/

@media ( min-width: 768px ) {
#top-container, #footer-container {
    max-width: 1200px;
	    margin-bottom: 0;
    padding-bottom: 0;
    height: 120px;
}
.footer .container {text-align: center;}
#search-lang {float: left; width: 200px;}
#search
{
height: 61px;
width: 61px;
}
	#languages {
    width: 134px;
    height: 61px;
    font-size: 24px;
}
#toggle-wrapper {display: none; }
.navbar-brand {float: right;}
.navbar-header {
    width: 100%;
}
	.navbar-nav {
    margin: 0 auto;
    display: table;
    table-layout: auto;
    float: none;
    width: 100%;
}
.navbar-nav>li {
    display: table-cell;
    float: none;
    text-align: center;
}

	.dropdown-cols {
border-right: 1px solid #cccccc;
border-top: 1px solid  #cccccc;
}
.dropdown-menu {
    width: 900px;
	    min-width: inherit;
    right: 100px;
    border-radius: 0;
}
	 /* menu on hover - with animation */
.dropdown.drop-collapsed .dropdown-menu, .dropdown.drop-collapsed .lang-menu {
  height: 0 !important;
  z-index: -1;

}
.dropdown .dropdown-menu , .dropdown  .lang-menu{
  overflow: hidden;
  -webkit-transition: height 0.65s ease;
  transition: height 0.65s ease;
}
.navbar-nav > li > .dropdown-menu, .navbar-nav > li > .lang-menu {
  display: block;
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0);
}
.navbar-nav > li.open .dropdown-menu, .navbar-nav > li.open .lang-menu {
  visibility: visible;
  opacity: 1;
  filter: alpha(opacity=100);
}
.eqCol:nth-of-type(1),.eqCol:nth-of-type(2),
.eqColev:nth-of-type(1),.eqColev:nth-of-type(2),
.eqColfam:nth-of-type(1),.eqColfam:nth-of-type(2),  
.eqColshrine:nth-of-type(1),.eqColshrine:nth-of-type(2),
.eqColjud:nth-of-type(1),.eqColjud:nth-of-type(2),
.eqColarch:nth-of-type(1),.eqColarch:nth-of-type(2) ,.eqColarch:nth-of-type(3),
.eqColart:nth-of-type(1),.eqColart:nth-of-type(2) ,.eqColart:nth-of-type(3)
{
border-right: 1px solid #cccccc;
min-height: 530px;
}
  .panel-group { width: 400px; }
  .thumbnail { margin: 0; }
}



@media (min-width: 992px){
.col-md-offset-right-1 {
     margin-right: 8.33333333%; 
}
.content-col img {
max-width: 100%; max-height: 410px;
}
}

@media (max-width: 991px){
.content-row
{
 /* Setup Flexbox */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  /* Reverse Column Order */

    -webkit-flex-direction: row;  /* Safari */
  flex-direction:  column-reverse;
}


.content-col img {
    display: block;
    max-width: 100%;
    height: auto;
	margin: auto;
}
}
@media (max-width: 767px){
.nomobile{display: none;}
#search-lang {margin: 10px auto; width: 135px; float: none; }
#search
	 {
		height: 1vh;
		width: 1vh;
	}
	
	.fa {
    display: block;
    float: none;
    line-height: 0.1;
    text-align: center;
	transform: translate(9px, -1px);
}
#languages {
    font-size: 1.65rem;
    height: inherit;
    width: inherit;
}
.navbar-brand {float: none;}
.navbar-brand img { margin: 20px auto;}
#toggle-wrapper {display: block; width: 70px; margin: auto; text-align: center;}
.yamm .yamm-content {
    padding: 0;
}
.isotope
 {  max-width: 100%;
  height: auto;
  margin: 5px auto 0;
  }
	.w,.ww,.wwhh,.hh {
  text-align: right;

  /* May want to do this if there is risk the container may be narrower than the element inside */
  white-space: nowrap;
}
   .portfolio-item:hover .portfolio-desc {
	/*padding-top: 5%;*/
	height: auto;
    transition: none;
	opacity: 1;
	/*background: #7bb5de;*/
}

.portfolio-item .portfolio-desc a {
	color: #fff;
}
.portfolio-item .portfolio-desc a:hover {
	/*text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.7);*/
	text-decoration: none;
}
.portfolio-item .portfolio-desc .folio-info {
	/*top:-20px;*/
	padding:  0;
	height: 0;
    opacity: 0;
    position: relative;
	background: transparent;

}

.portfolio-item:hover .folio-info{
	height: auto;
    opacity: 1;
	 background:transparent;

    -webkit-transition: none;
    -moz-transition: none;
    -o-transition:  none;
    -ms-transition: none;
    transition: none;
	top:0px;

}
#left-top {background: url(/images/50/left-top-bg.jpg) no-repeat;}
#middle-top {background: url(/images/50/middle-top-bg.jpg) no-repeat;}
#right-top {background: url(/images/50/right-top-bg.jpg) no-repeat;}
#left-bottom {background: url(/images/50/left-bottom-bg.jpg) no-repeat;}
#right-middle {background: url(/images/50/right-middle-bg.jpg) no-repeat;}
#right-bottom{background: url(/images/50/right-bottom-bg.jpg) no-repeat;}
  
   #left-top .folio-info,#middle-top .folio-info,#right-top .folio-info,#left-bottom  .folio-info,#right-middle  .folio-info,#right-bottom .folio-info{padding: 10px;}
   

	.item {
  float: none;
  width: 100%;
  height: 400px;
  background: #ffffff;
  border: 2px solid #ffffff;
  cursor: pointer;
  /*border-color: hsla(255, 0%, 0%, 0.7);*/
}

.item.width2 { width: 100%;}
.item.height2 { height: 400px; }
.item:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: bottom;
  margin-right: 0; /* Adjusts for spacing */
    
  /* For visualization 
  background: #808080; width: 5px;
  */
 }
 /*remove gray hoverlay and show text*/
 .portfolio-item .portfolio-desc {
    display: block;
    opacity: 1;
    position: absolute;
    width: 100%;
	left: 0;
bottom:0;
	/*color: rgba(220, 220, 220);*/
}



.portfolio-item:hover .portfolio-desc {

	height: initial;
    transition: none;
	opacity: 1;

}
  .portfolio-item .portfolio-desc .folio-info {
  position: initial;
	padding:  0;
	height: 0;
    opacity: 1;
	background: transparent;
}

.portfolio-item:hover .folio-info{
	height: initial;
    opacity: 1;
	 background:transparent;
    /*background-image: url(http://212.150.186.108/home/images/raster.png);*/
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none;
	top:0px;

}
.w, .ww, .wwhh, .hh {
  text-align: inherit;

}
#left-top .folio-info, #middle-top .folio-info, #right-top .folio-info, #left-bottom .folio-info, #right-middle .folio-info, #right-bottom .folio-info {
  width: 100%;
}
/***********************/


 #middle-bottom:before {
  content: '';
  display: inline;
  height: 100%; 
  vertical-align: bottom;
  margin-right: 0; /* Adjusts for spacing */
    
  /* For visualization 
  background: #808080; width: 5px;
  */
 }

 #middle-bottom{
	 height: 200px;
 }

.centered, .centered2 {

  position: absolute;
  display: inline-block;
  vertical-align: bottom;
  padding: 10px 15px;
  border: #a0a0a0 solid 0px;
  background: transparent;
  color: #ffffff;
  height: initial;
  width: 100%;
  text-align: center;
  bottom: 0;
 }
 #left-top .text .outer, #middle-top .textwide .outer, #right-top .text .outer, #right-bottom .textwide .outer, #left-bottom  .text .outer,#right-middle .text .outer {
   padding: 0;
}
#left-top .text .outer .inner, #middle-top .textwide .outer .inner, #right-top .text .outer .inner, #right-bottom .textwide .outer .inner, #left-bottom  .text .outer .inner,#right-middle .text .outer .inner {
   padding: 0;
}

		#left-top h2,#middle-top h2,#right-top h2,#left-bottom h2,#right-middle h2,#right-bottom h2
		{
			font-size: 1.8em;
			text-shadow: 1px 1px 2px #000000, 0 0 1em #333333, 0 0 0.2em #666666;
		}
		#left-top h3,#middle-top h3,#right-top h3,#left-bottom h3,#right-middle h3,#right-bottom h3 
		{ 
		font-size: 1.4em;
		text-shadow: 1px 1px 2px #000000, 0 0 1em #333333, 0 0 0.2em #666666;
		}

}




/***************media queries for isotope and fonts*********/
  
/*when isotope breaks into two  big columns*/
@media only screen and (min-width: 891px) and (max-width: 1184px) {	
	.isotope 
	{
		margin-left: 12%;

	}

}

/*when isotope breaks into two  small columns*/
@media only screen and (min-width: 767px) and (max-width: 890px) {	
	.isotope 
	{
		margin-left: 15%;

	}

}
@media only screen and (min-width: 767px) and (max-width: 993px) {	
	.navbar-default .navbar-nav>li>a {
    font-size: 1.9rem;
}
}

/*when isotope breaks into one column and there is space on the sides*/
@media only screen and (max-width: 767px) {		
	.isotope 
	{
		margin-left: 0;

	}
}
@media ( max-width: 584px ) {
/*this should be 400px
.item, .item.width2 {
  height: 200px!important;
}*/
#left-top {background: url(/images/50/left-top-bg.jpg) no-repeat 50% 50% / cover;}
#middle-top {background: url(/images/50/middle-top-bg.jpg) no-repeat 50% 50% / cover;}
#right-top {background: url(/images/50/right-top-bg.jpg) no-repeat 50% 50% / cover;}
#left-bottom {background: url(/images/50/left-bottom-bg.jpg) no-repeat 50% 50% / cover;}
#right-middle {background: url(/images/50/right-middle-bg.jpg) no-repeat 50% 50% / cover;}
#right-bottom{background: url(/images/50/right-bottom-bg.jpg) no-repeat 50% 50% / cover;}
  }
  
  /* Grid demo styles */
.grid-demo {
  padding: 10px 30px;
}

  .grid-demo [class*="col-"] {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 1em;
    text-align: center;
    line-height: 2;
    background-color: #e5e1ea;
    border: 1px solid #d1d1d1;
  }