/*
Theme Name:     Story Child
Author:         Pexeto
Author URI:     http://pexetothemes.com
Template:       thestory
*/

@import url("../thestory/style.css");

h1,
h2,
h3,
h4,
h5,
h6,
p {
  
  font-weight: 200;
  
}

.woocommerce .woocommerce-message, .woocommerce-page .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce-page .woocommerce-info, .woocommerce #content-container button.button.alt, .woocommerce-page #content-container button.button.alt{background:#5f9ab1;}

.woocommerce .woocommerce-info a, .woocommerce-page .woocommerce-info a, .woocommerce .woocommerce-info, .woocommerce-page .woocommerce-info, .woocommerce .woocommerce-message, .woocommerce-page .woocommerce-message{color:white;}

#menu .mobileItem{display:none;}
@media only screen
and (max-width : 1000px) {
.mob-nav-menu ul#menu-main-temp li#menu-item-4846{display:none!important;}

}

#ourcause{padding-top: 10%;}

@media only screen and (max-width: 750px) { 
	#ourcause{padding-top: 0;}
}


/*BUTTON STYLE*/
.myButton {
	background-color:#599bb3;
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:28px;
	border:1px solid #29668f;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
}
.myButton:hover {
	background-color:#408c99;
}
.myButton:active {
	position:relative;
	top:1px;
}


/*Custom shipping message stle*/
#customShippingMSG{
    text-transform:capitalize;
}


/*Shop Page Grid Styling*/
.rowShop {
  display: inline-table !important;
  padding: 0 4px;
  width:100% !important;
}

.rowShopGrid {
  display: inline-grid !important;
  grid-template-columns: auto auto auto auto auto;
  padding: 0 4px;
  width:100% !important;
}

@media only screen and (max-width: 800px) {
	.rowShopGrid {grid-template-columns: auto auto auto;}
}

@media only screen and (max-width: 500px) {
	.rowShopGrid {grid-template-columns: auto auto;}
	.columnFifth.lastItem{grid-column-start: 1; grid-column-end: 3;}
}
/* Create two equal columns that sits next to each other */
.columnHalf {
  display: table-cell !important;	
  width: 50%!important;
  padding: 0 4px;
}
.columnThird{
  display: table-cell !important;	
  width:33%!important;
  padding: 0 4px;		
}

.columnFourth{
  display: table-cell !important;
  /*width:25%!important;*/
  padding: 0 4px;		
}

.columnFifth{
  /*display: table-cell !important;	
  width:20%;*/
  padding: 0 4px;	
}


.columnHalf a img,
.columnThird a img,
.columnFourth a img,
.columnFifth a img{
  margin: 4px 0;
  vertical-align: middle;
  width:100%!important;
}