/*
Theme Name:   	Storefront Child - Loud Designs
Theme URI:    	https://github.com/stuartduff/storefront-child-theme
Author:       	Stuart Duff
Author URI:     http://stuartduff.com
Template:     	storefront
Description:  	This is a blank child theme for WooThemes StoreFront theme
Version:      	1.0.0
License:      	GNU General Public License v2 or later
License URI:  	http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  	storefront
Tags:         	black, white, light, two-columns, left-sidebar, right-sidebar, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments, accessibility-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
Storefront is based on Underscores http://underscores.me/, (C) 2012-2014 Automattic, Inc.
Resetting and rebuilding styles have been helped along thanks to the fine work of
Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
FontAwesome License: SIL Open Font License - http://scripts.sil.org/OFL
Images License: GNU General Public License v2 or later
*/
/*
 * Add your own custom css below this text.
 */
/*
/*
Header background image
Suggested image dimensions: 1950 by 500 pixels.
Logo
Suggested image dimensions: 470 by 110 pixels.
*/
html {
  scroll-behavior: smooth;
}
.ufos-footer-info{
	border-top:1px solid #FFFFFF;
	font-size:1em;
	line-height:1.5em;
	padding:25px 0;
	background:#333333;
	color:#FFFFFF;
	text-align:center;
}
.ufos-footer-info a, .ufos-footer-info a:hover, .ufos-footer-info a:visited{
	text-decoration:underline;
	color:#FFFFFF;
}
body{
	background: #333333;
}
.site-header{
	background: #333333;
    border-bottom-color: #333333;
}
.entry-content{
	margin:10px 0;
    padding:10px;
    border-radius: 10px;
    box-shadow: 0 0 2px 2px #FF9F0F;
}

.entry-content p, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6{    
	margin: 10px 0px;
    padding: 0 80px 0 30px;
    text-align: left;
}

#site-navigation ul li a {
	background: #333333;
    color: #0099CC;
}
#site-navigation ul .current_page_item > a, #site-navigation ul .current-menu-item > a, #site-navigation ul .current_page_ancestor > a {
    background: #333333;
    color: #FF9F0F;
}
h1, h2{
    color: #0099CC;
}
h3, h4, h5, h6, .wc-block-grid__product-title {
    color: #FF9F0F;
}

.readmore{
	display:block;
	color: #0099CC;
	
}
/*#######################################################################################################*/
/* content */
/*#######################################################################################################*/
.padding-top-20{
	padding:20px;
}
.border-radius{
	border-radius: 10px;
}
.border-top{
	border-top: 2px solid #696969;
}
.box-shadow-orange{
    box-shadow: 0 0 2px 2px #FF9F0F;
}	
/*#######################################################################################################*/
/* footer */
/*#######################################################################################################*/
.site-footer{
	background: #333333;
}
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6, .site-footer .widget .widget-title, .site-footer .widget .widgettitle {
	color:#ED7B01;
}
.site-footer {
    color:#777777;
}
.site-footer a:not(.button):not(.components-button) {
   color:#777777;
}

/*#######################################################################################################*/
/* shop */
/*#######################################################################################################*/
.storefront-full-width-content.single-product div.product .woocommerce-tabs {
    clear: both;
    padding: 10px;
}



.site-header .site-branding img{
	max-width:470px;
}
.site-header .site-logo-anchor img, .site-header .site-logo-link img, .site-header .custom-logo-link img {
    max-width: 470px;
	display: block;
    margin-left: auto;
    margin-right: auto;
}
#site-navigation{
	width:100%;
	text-align:center;
}

button.menu-toggle {
	float:none;
}
.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header {
    margin-bottom:0;
}
.page-template-template-homepage .type-page {
    display: none;
}




#myBtn {
    display:none;
    position:fixed;
    bottom:100px;
    right:5px;
    z-index:9000;
    border:none;
    outline:none;
    background-color:red; 
    color:#FFFFFF;
    cursor:pointer;
	padding:10px;
	height:2.5em;
	width:2.5em;
    border-radius:50%;
	text-align:center;
}
#myBtn p{
	font-size:1.5em;
	line-height:1.5em;	
	margin:0;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}
#myBtn:hover {
    background-color:blue;
	border:2px solid red;
}
/*  custom */
img.scale-with-grid{
	max-width:100%;
	height:auto;
	display:block;
	margin-bottom:0;
	margin-left:auto;
	margin-right:auto;
	
}
/* blog feed */
.article{
    margin: 10px 0;
	padding:10px 0;
    padding-left: 0;
}
.alpha{
    font-size: inherit;
    line-height: inherit;
    letter-spacing:0;	
}
.row-odd{
    box-shadow: 0 0 2px 2px #696969;	
}
.row-even{
    box-shadow: 0 0 2px 2px #696969;	
}
.featured-thumb{
	background:transparent;
}
.postedon, .postedby{
	font-size:1.15em;
	color: #0099CC;
	padding:0 0 10px 0;
	margin:0;
}
.post-title a{
	font-weight:normal;
	color: #0099CC;

}
.entry-excerpt{}

/* tag cloud */
a.tag-cloud-link{
	display:block;
	padding:5px;
	font-size:16px;
	font-weight:normal;
}



@media only screen and (max-width: 479px) {	
    
.site-content {
    margin-top:50px;
}
	
}

.columns, 
.column { 	
	-webkit-transition: all 0.2s ease;
	  -moz-transition: all 0.2s ease;
	  -moz-transition: all 0.2s ease;
	  -ms-transition: all 0.2s ease;
	  -o-transition: all 0.2s ease;
	  transition: all 0.2s ease;
}
.container{
	position:relative;
	width:1200px;
	margin:0 auto;
	padding:0;
}
.container .column,
.container .columns{
	float:left;
	display:inline;
	margin-left:10px;
	margin-right:10px;
}
.row{
	margin-bottom:0;
}
.column.alpha, .columns.alpha{
	margin-left:0;
}
.column.omega, .columns.omega{
	margin-right:0;
}
.container .one.column,
.container .one.columns{
	width:55px;
}
.container .two.columns, .container .two-quarter-mobile.columns{
	width:130px;
}
.container .three.columns, .container .three-half-mobile.columns{
	width:205px;
}
.container .four.columns, .container .four-half-mobile.columns{
	width:280px;
}
.container .five.columns{
	width:355px;
}
.container .six.columns, .container .six-three-quarter-mobile.columns{
	width:430px;
}
.container .seven.columns{
	width:505px;
}
.container .eight.columns, .container .eight-half-mobile.columns{
	width:580px;
}
.container .nine.columns{
	width:655px;
}
.container .ten.columns{
	width:730px;
}
.container .eleven.columns{
	width:805px;
}
.container .twelve.columns{
	width:880px;
}
.container .thirteen.columns{
	width:955px;
}
.container .fourteen.columns{
	width:1030px;
}
.container .fifteen.columns{
	width:1105px;
}
.container .sixteen.columns{
	width:1180px;
}
.container .one-third.column{
	width:380px;
}
.container .two-thirds.column{
	width:780px;
}


@media only screen and (min-width: 960px) and (max-width: 1199px){
	.container{
		position:relative;
		width:960px;
		margin:0 auto;
		padding:0;
	}
	.container .column,
	.container .columns{
		float:left;
		display:inline;
		margin-left:10px;
		margin-right:10px;
	}
	.row{
		margin-bottom:0;
	}
	.column.alpha,
	.columns.alpha{
		margin-left:0;
	}
	.column.omega,
	.columns.omega{
		margin-right:0;
	}
	.container .one.column,
	.container .one.columns{
		width:40px;
	}
	.container .two.columns, .container .two-quarter-mobile.columns,  .container .eight-quarter-mobile.columns{
		width:100px;
	}
	.container .three.columns, .container .three-half-mobile.columns{
		width:160px;
	}
	.container .four.columns, .container .four-half-mobile.columns{
		width:220px;
	}
	.container .five.columns{
		width:280px;
	}
	.container .six.columns, .container .six-three-quarter-mobile.columns{
		width:340px;
	}
	.container .seven.columns{
		width:400px;
	}
	.container .eight.columns, .container .eight-half-mobile.columns{
		width:460px;
	}
	.container .nine.columns{
		width:520px;
	}
	.container .ten.columns{
		width:580px;
	}
	.container .eleven.columns{
		width:640px;
	}
	.container .twelve.columns{
		width:700px;
	}
	.container .thirteen.columns{
		width:760px;
	}
	.container .fourteen.columns, .container .fourteen-three-quarter-mobile.columns{
		width:820px;
	}
	.container .fifteen.columns{
		width:880px;
	}
	.container .sixteen.columns{
		width:940px;
	}
	.container .one-third.column{
		width:300px;
	}
	.container .two-thirds.column{
		width:620px;
	}

}

@media only screen and (min-width: 768px) and (max-width: 959px){
    .container{
		width:768px;
	}
    .container .column,
    .container .columns{
		margin-left:10px;
		margin-right:10px;
	}
    .column.alpha, .columns.alpha{
		margin-left:0;
		margin-right:10px;
	}
    .column.omega, .columns.omega{
		margin-right:0;
		margin-left:10px;
	}
    .alpha.omega{
		margin-left:0;
		margin-right:0;
	}
    .container .one.column,
    .container .one.columns{
		width:28px;
	}
    .container .two.columns, .container .two-quarter-mobile.columns{
		width:76px;
	}
    .container .three.columns, .container .three-half-mobile.columns{
		width:124px;
	}
    .container .four.columns, .container .four-half-mobile.columns{
		width:172px;
	}
    .container .five.columns{
		width:220px;
	}
    .container .six.columns, .container .six-three-quarter-mobile.columns{
		width:268px;
	}
    .container .seven.columns{
		width:316px;
	}
    .container .eight.columns, .container .eight-half-mobile.columns{
		width:364px;
	}
    .container .nine.columns{
		width:412px;
	}
    .container .ten.columns{
		width:460px;
	}
    .container .eleven.columns{
		width:508px;
	}
    .container .twelve.columns{
		width:556px;
	}
    .container .thirteen.columns{
		width:604px;
		}
    .container .fourteen.columns, .container .fourteen-three-quarter-mobile.columns{
		width:652px;
	}
    .container .fifteen.columns{
		width:700px;
	}
    .container .sixteen.columns{
		width:748px;
	}
    .container .one-third.column{
		width:236px;
	}
    .container .two-thirds.column{
		width:492px;
	}
}
@media only screen and (max-width: 767px){
	.container{
		width:100%;
	}
	.container .columns,
	.container .column{
		margin:0;
	}
	.container .one.column,
	.container .one.columns,
	.container .two.columns,
	.container .three.columns,
	.container .four.columns,
	.container .five.columns,
	.container .six.columns,
	.container .seven.columns,
	.container .eight.columns,
	.container .nine.columns,
	.container .ten.columns,
	.container .eleven.columns,
	.container .twelve.columns,
	.container .thirteen.columns,
	.container .fourteen.columns,
	.container .fifteen.columns,
	.container .sixteen.columns,
	.container .one-third.column,
	.container .two-thirds.column {
		width:100%;
	}
	
	.container .two-quarter-mobile.columns{
		width:25%;
	}
	.container .three-half-mobile.columns{
		width:50%;
	}	
	.container .four-half-mobile.columns, .container .eight-half-mobile.columns{
		width:50%;
	}
	.container .six-three-quarter-mobile.columns, .container .fourteen-three-quarter-mobile.columns{
		width:75%;
	}	

}
@media only screen and (min-width: 480px) and (max-width: 767px){
	.container{
		width:100%;
	}
	.container .columns,
	.container .column{
		margin:0;
	}
	.container .one.column,
	.container .one.columns,
	.container .two.columns,
	.container .three.columns,
	.container .four.columns,
	.container .five.columns,
	.container .six.columns,
	.container .seven.columns,
	.container .eight.columns,
	.container .nine.columns,
	.container .ten.columns,
	.container .eleven.columns,
	.container .twelve.columns,
	.container .thirteen.columns,
	.container .fourteen.columns,
	.container .fifteen.columns,
	.container .sixteen.columns,
	.container .one-third.column,
	.container .two-thirds.column {
		width:100%;
	}
}
.container:after{
	content:"\0020";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix:before,
.clearfix:after,
.row:before,
.row:after{
    content:'\0020';
    display:block;
	overflow:hidden;
	visibility:hidden;
	width:0;
    height:0;
}
.row:after,
.clearfix:after{
	clear:both;
}
.row,
.clearfix{
    zoom:1;
}
.clear{
    clear:both;
    display:block;
    overflow:hidden;
    visibility:hidden;
    width:0;
    height:0;
}