/* Table of Contents
==================================================
01. RETINA STYLES
02. BASE STYLES (1140px)
03. #DESKTOP (960px)
04. #Tablet (Portrait)
05. #Mobile (Portrait)
*/



/*
=============================================== 01. RETINA STYLES ===============================================
*/
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
	body nav select {background-image: url(../images/hamburger-retina.png); background-size:100px 100px;}
	.flex-direction-nav a {background-image: url(../images/slider/arrows@2x.png); background-size:80px 60px;}
	.flex-control-paging li a {background-image:url(../images/slider/slider-bullets@2x.png); background-size:20px 85px;}
}

/* IE7-IE8 Fixes*/
.lt-ie9	nav select {background-image: url(../images/hamburger.png);}
.lt-ie9 .flex-direction-nav a {background-image: url(../images/slider/arrows.png); background-size:68px 69px;}
.lt-ie9 .flex-control-paging li a {background-image:url(../images/slider/slider-bullets.png); background-size:20px 85px;}


/*
=============================================== 02. BASE STYLES (1140px) ===============================================
*/
/* Note: Design for a width of 1040px */
html {-webkit-text-size-adjust: none;}	/* Removes webkit font resizing */ 
body {max-width:100%; width:100%;}
img {max-width:100%; height: auto; }
.width-container, .flex-caption .slider-container {-moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; }


/*
=============================================== 03. #DESKTOP (960px) ===============================================
*/
/* Note: Design for a width of 960px */
@media only screen and (min-width: 959px) and (max-width: 1190px) {
	
.flex-caption .slider-container, .width-container {width:92%;} /* Default Width */
body #carousel-pro {padding-left:2%; padding-right:2%; width:88%;}

nav {margin-left:10px;}
.sf-menu a {padding-right:16px; padding-left:16px; margin-right:4px;}

#pro_slider {
	line-height:500px;
	height:500px;
}
#pro_slider li img { 
	max-height:500px;
}


}


/*
=============================================== 04. #Tablet (Portrait) ===============================================
*/
/* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 959px) {

/* Default Width */
.flex-caption .slider-container, .width-container { width:92%; }
body #carousel-pro {padding-left:3%; padding-right:3%; width:86%;}

body {font-size:14px;}


#pro_slider {
	line-height:400px;
	height:400px;
}
#pro_slider li img { 
	max-height:400px;
}


.social-ico a i {
	margin-left:2px;
}


.commentlist {width:68%;}

.caption-progression {
	padding-bottom:50px;
	line-height:19px;
	font-size:15px;
}
body .caption-progression h2 {
	line-height:27px;
	font-size:20px;
}

nav {margin-left:7px;}
.sf-menu a {padding-right:10px; padding-left:10px; margin-right:2px;}

}


/*
=============================================== 05. #Mobile (Portrait) ===============================================
*/
/* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {
	
body, footer {font-size:13px;}

/* Default Width */
.width-container, .flex-caption .slider-container { width:90%; }
body #carousel-pro {padding-left:5%; padding-right:5%; width:80%;}

/* Default Grid */
#sidebar, #content-container, footer .footer-2-column .widget, footer .footer-3-column .widget, footer .footer-4-column .widget,
.grid2column-progression, .grid3column-progression, .grid3columnbig-progression, .grid4column-progression, .grid4columnbig-progression,
#sidebar, #content-container {
	width:100%; margin-bottom:10px;
}

body #main .width-container li.product.column-2, body #main .width-container li.product.column-3, body #main .width-container li.product.column-4, .lt-ie8 body #main .width-container li.product.column-2, .lt-ie8 body #main .width-container li.product.column-3, .lt-ie8 body #main .width-container li.product.column-4 
{
	width:100%;
	margin-bottom:10px;
}

h1#logo {float:none; margin:0 auto;}
header .social-ico {text-align:center; float:none; margin-bottom:15px;}
footer .social-ico, footer #copyright {text-align:center;}


#pro_slider {
	line-height:300px;
	height:300px;
}
#pro_slider li img { 
	max-height:300px;
}


.width-container.fix-margin-pro #mason-layout {margin-left:0px; margin-right:0px;}

.caption-progression {
	padding-bottom:40px;
	line-height:13px;
	font-size:11px;
}
body .caption-progression h2 {
	line-height:20px;
	font-size:15px;
}

#page-title h1, #page-title #bread-crumb {float:none; text-align:center; }
#page-title #bread-crumb { padding:24px 0px 26px 0px;}

/* Comment Adjustments */
.commentlist {width:95%; left:-10px;}
.commentlist .children li.comment .comment-meta {margin-left:0px;}
.commentlist .avatar, .commentlist > li:before {display:none;}


/* Select Menu */
nav {float:none; margin:0 auto;  background:none;}
nav ul { display: none;  }  
nav select option { background:#fff; color:#888;}
nav select { 
	text-align:center; 
	margin:0 auto;
	display:block; padding:0px;  border:none; 
	-webkit-appearance: none; -moz-appearance: normal; appearance: normal;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	width:70px; height:70px;
	text-indent:-99999px;
	cursor:pointer;
	background-color:#aaa ;
	background-image: url(../images/hamburger.png);
	background-position: center center;
	background-repeat:no-repeat;
	border:1px solid #e9e9e9;
	font-family:"Helvetica Neue", Helvetica, Arial, Sans-Serif !important;
	font-weight:normal !important;
}

/* WooCommerce Styles */
.product-thumbnail {display:none;}


}