/*--START: Media Queries (Breakpoints) ------------------------------ */

/* older browsers ignore the "only" keyword. This is what we want. */
@media only screen and (max-width: 1013px) {

/*--About Us Page--*/	
#content-box #content-about,
#content-box #content-royalty {
	width: 80%;	
}
	
#sidebar-vid {
	width: 100%;
	margin-left: 0 !important;
}

} /*--end @media---*/

/*--END: Media Queries----------------------------------------------- */


/*--START: Media Queries (Breakpoints) ------------------------------ */

/* older browsers ignore the "only" keyword. This is what we want.  (original max-width: 980px) */
@media only screen and (max-width: 1024px) {


/*--Containers-------------------------------*/
.container-outer-home {
/*background: url(../images/topmainnav_bg_m.png) repeat-x;*/
	background: url(../images/mobilebg/mobilenav_bg.png) repeat;
height: 141px;
	
}
.container-outer {
background: url(../images/mobilebg/mobilenav_bg.png) repeat-x;
height: 145px;
/*border: 1px solid red;*/
	
}

/*---Main Content---*/
.container .maincontent {
	padding: 0 !important;
	/*border: 1px solid green !important;*/
	
}

#locale-single-box {display: none;}

/*--Slideshow--------------------------------*/
#slideshow-box {
	display: none;	
}

/*--BXSlider Controls------------------------*/
.bx-wrapper .bx-prev {
	left: 10px !important;
}

.bx-wrapper .bx-next {
	right: 20px !important;
}

/*--Branding Area----------------------------*/
#logo-box {
	display: none;	
}
#logo-box-m {
	display: block;
	/*background: #A14420;*/
	/*border: 1px solid red;*/	
}
#logo-box-m #splogo-home-m {
	max-width: 194px;
	margin: 0 auto 0 auto;	
}
#logo-box-m #splogo-sub-m {
	max-width: 194px;
	margin: 0 auto 20px auto;	
}
/*--Top Navigation--------------------------*/
#header-box #topnav-box {
	display: none;	
}
/*--Main Navigation--------------------------*/
#header-box #mainnav-box {/*border: 1px solid black;*/ margin-top: 0 !important;}
#header-box #mainnav-box #mainnav {/*border: 1px solid red;*/ margin-top: 0 !important;}
#header-box #mainnav-box #mainnav .span_4_of_5 {
	width: 100%;
	/*border: 1px solid green;*/
	margin-top: 0 !important;	
}
#header-box #mainnav-box #mainnav .mn-inner {
	border: 1px solid #A29B80;
	margin-left: 0 !important;
	margin-top: 0 !important;
	margin-right: 25px !important;	
	
}
/*--Sub Navigation---------------------------*/
#header-box #subnav-box {
	display: none;	
}

/*---Features Area---*/
.maincontent #features-box {
	display: none;
}

/*---Extension Area---*/
.maincontent #extension-box {
	border: none !important;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	left: 50px;	
	
}

.maincontent #extension-box #eb-item-1 img {
	width:inherit !important;
}
.maincontent #extension-box #eb-item-2 img {
	width:inherit !important;
}
.maincontent #extension-box #eb-item-3 img {
	width:inherit !important;
}
.maincontent #extension-box #eb-item-4 img {
	width:inherit !important;
}



/*---Mobile Menu Button Area---------*/
.maincontent #menubtn-box {
	display: block;	
	/*border: 1px solid red;*/
}
.fade:hover {
    opacity: 0.75;
}
.fade {
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

/*--Footer Area---*/
#extra-box #social-mb4 {display: inline-block; /*border: 1px solid red;*/ position: relative; top: 15px;}
} /*--end @media---*/

/*--END: Media Queries----------------------------------------------- */


/* older browsers ignore the "only" keyword. This is what we want. */
@media only screen and (max-width: 978px) {

/*--Contact Page--*/
#content-box #content-contact-talk {width: 100%;}
#content-box #sidebar-contact-talk {width: 100%; display: none;} 

/*--Navigation Area: Mainnav-----------------*/
#header-box #mainnav .mn-inner {
	background: 000 !important;	
	
}
.link-m {
	display: block !important;	
}

	
} /*--end @media---*/

/*--END: Media Queries----------------------------------------------- */


/*--START: Media Queries (Breakpoints) ------------------------------ */

/* older browsers ignore the "only" keyword. This is what we want. */
@media only screen and (max-width: 901px) {

/*--Contact Page--*/
#content-box #content-contact-mad {width: 100%;}
#content-box #sidebar-contact-mad {width: 100%; display: none;}


} /*--end @media---*/

/*--END: Media Queries----------------------------------------------- */

/*--START: Media Queries (Breakpoints) ------------------------------ */

/* older browsers ignore the "only" keyword. This is what we want. */
@media only screen and (max-width: 819px) {

/*---4 Rectangles Area---*/
#fourrec-box {display: none;}

} /*--end @media---*/

/*--END: Media Queries----------------------------------------------- */

/*--START: Media Queries (Breakpoints) ------------------------------ */

/* older browsers ignore the "only" keyword. This is what we want. */
@media only screen and (max-width: 793px) {

/*--About Us Page--*/	
#content-box #content-about {
	width: 100%;	
}
#content-box #content-about-angelo {
	width: 100%;	
}
#content-box #sidebar-about {
	width: 100%;
	margin: 0;
	/*border: 1px solid red;*/
}
#content-box #sidebar-about #photo {
	margin: 0 auto;
}

/*---Extension Area---*/
.maincontent #extension-box{display: none;}
.maincontent #extension-box-2{
	border: 1px solid red;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	display: block;	
	
}
maincontent #extension-box-2 .span_1_of_4 {
	width: 100%;	
}




} /*--end @media---*/

/*--END: Media Queries----------------------------------------------- */


/*--START: Media Queries (Breakpoints) ------------------------------ */

/* older browsers ignore the "only" keyword. This is what we want. */
@media only screen and (max-width: 750px) {

/*---Typography Etc.---*/
#content-box {font-size: 0.875em;}
.extraNav {font-weight: bold; padding: 0 0 5px 0; margin: 0 0 15px 0; border-bottom: 1px solid #b0ab93; clear: both; text-align: left;}
.extraNav a:hover {text-decoration: none;}




} /*--end @media---*/

/*--END: Media Queries----------------------------------------------- */


/*--START: Media Queries (Breakpoints) ------------------------------ */

/* older browsers ignore the "only" keyword. This is what we want. */
@media only screen and (max-width: 698px) {

/*--Contact Page--*/
#content-box #content-contact {width: 100%;}
#content-box #sidebar-contact {width: 100%; display: none;}


} /*--end @media---*/

/*--END: Media Queries----------------------------------------------- */


/*--START: Media Queries (Breakpoints) ------------------------------ */

/* older browsers ignore the "only" keyword. This is what we want. */
@media only screen and (max-width: 681px) {

/*---Typography Etc.---*/
#c-hours-table {display: none;}
.c-hours-mobile,
.c-hours-mobile-last {display: block; text-align: left; margin: 10px 0 15px 0; padding-bottom: 10px; border-bottom: 1px dotted #b0ab93;}
.c-hours-mobile-last {border-bottom: none;}
.c-hours-mobile div,
.c-hours-mobile-last div {padding: 5px 0;}
.c-hours-mobile #ch-weekdays,
.c-hours-mobile-last #ch-weekdays {font-weight: bold;}





} /*--end @media---*/

/*--END: Media Queries----------------------------------------------- */

/*--START: Media Queries (Breakpoints) ------------------------------ */

/* older browsers ignore the "only" keyword. This is what we want. */
@media only screen and (max-width: 667px) {

/*---Typography Etc.---*/
.extraNav .en-selected {display: block; padding: 5px 0;}
.extraNav a {display: block; padding: 5px 0;}
.extraNav a:hover {text-decoration: none;}
.extraNav .thinwall {color: #ff0000; display: none;}




} /*--end @media---*/

/*--END: Media Queries----------------------------------------------- */

/*--START: Media Queries (Breakpoints) ------------------------------ */

/* older browsers ignore the "only" keyword. This is what we want. */
@media only screen and (max-width: 583px) {
	
/*--Contact Page--*/
#contact-area {display: none;}
#contact-area-mobile {display: block;}

} /*--end @media---*/

/*--END: Media Queries----------------------------------------------- */

/*--START: Media Queries (Breakpoints) ------------------------------ */

/* older browsers ignore the "only" keyword. This is what we want. */
@media only screen and (max-width: 503px) {

/*--Royalty Rewards Page--*/
#content-box #content-royalty {width: 100%;}
#content-box #royalty-card {clear: both;}
#content-box #royalty-card #c-imageR {display: block;}
#content-box #royalty-card .floatRight {float: none !important; clear: both !important;}
#content-box #general-image {width: 100%;}
#content-box #general-image img {border: 1px solid #b0ab93; width: 100%;}

} /*--end @media---*/

/*--END: Media Queries----------------------------------------------- */


/*--START: Media Queries (Breakpoints) ------------------------------ */

/* older browsers ignore the "only" keyword. This is what we want. */
@media only screen and (max-width: 480px) {
	
/*--Main Navigation--------------------------*/
#header-box #mainnav-box {/*border: 1px solid black;*/ margin-top: 15px !important; margin-bottom: 15px !important;/* border: 1px solid red;*/margin-left: auto; margin-right: auto;}
#header-box #mainnav-box #mainnav .span_4_of_5 {
	width: 100% !important;
	/*border: 1px solid green !important;*/
	margin-top: 0 !important;	
}
#header-box #mainnav-box #mainnav .mn-inner {
	margin-right: 0 !important;	
	
}

/*--Index Page--*/

/*---Mobile Menu Button Area---------*/
#menubtn-box,
#menubtn-box-small {/*border: 1px solid green;*/ margin-left: 8px;}
#menubtn-box .span_1_of_3,
#menubtn-box-small .span_1_of_3 {width: 31%; /*border: 1px solid red;*/ margin-left: 2px; margin-right: 2px;}
#menubtn-box img,
#menubtn-box-small img {width: 100%; border: 1px solid #b0ab93;}

.maincontent #menubtn-box {
	display: none;	
	/*border: 1px solid red;*/
}
.maincontent #menubtn-box-small {
	display: block;	
}

/*------------------------------*/

#extension-box {display: none;}
#extension-box-2 {display: none;}

#extra-box {
	border-top: 2px solid #b0ab93;
	padding-top: 15px;
	margin-top: 10px;
	margin-bottom: 10px;
}

	
} /*--end @media---*/

/*--END: Media Queries----------------------------------------------- */


/*--START: Media Queries (Breakpoints) ------------------------------ */

/* older browsers ignore the "only" keyword. This is what we want. */
@media only screen and (max-width: 443px) {

/*--Menu Page--*/
#content-box #sidebar-menu {display: none;}


} /*--end @media---*/

/*--END: Media Queries----------------------------------------------- */


/*--START: Media Queries (Breakpoints) ------------------------------ */

/* older browsers ignore the "only" keyword. This is what we want. */
@media only screen and (max-width: 413px) {

/*--Footer Area--*/
#extra-box {display: none;}
#extra-box-mobile {
	border-top: 2px solid #b0ab93;
	text-align: center;
	font-size: 0.75em !important;
	color: #6E6130;
	display: block;
	padding-top: 15px;
	margin-top: 10px;
	margin-bottom: 10px;
	position: relative;
}
#extra-box-mobile a {color: #6E6130; text-decoration: underline;}
#extra-box-mobile a:hover {text-decoration: none;}

#extra-box-mobile #copyright {text-size: 0.6875em !important;}
#extra-box-mobile #copyright a {text-size: 0.6875em !important;}

#extra-box-mobile #reachout {position: relative;}
#extra-box-mobile #social-m {position: absolute; top: 0; right: 35px; /*border: 1px solid red;*/}

} /*--end @media---*/

/*--END: Media Queries----------------------------------------------- */


/*--START: Media Queries (Breakpoints) ------------------------------ */

/* older browsers ignore the "only" keyword. This is what we want. */
@media only screen and (max-width: 320px) {

/*#content-box {margin-top: 75px; padding: 1em; border: 1px solid #fff;}*/
#content-box {padding-left: 0 !important; padding-right: 0 !important; /*border: 1px solid #fff;*/}




/*--About Page--*/
#content-box #baby-angelo {display: none;}
#content-box #italypic {display: none;}

#content-box #sidebar-menu,
#content-box #sidebar,
#content-box #sidebar-about {
	width: 100%;
	margin: 0;
	/*border: 1px solid red;*/
}
#content-box #sidebar-menu #photo,
#content-box #sidebar #photo,
#content-box #sidebar-about #photo {
	margin: 0;
}
#content-box #sidebar-menu #photo img,
#content-box #sidebar #photo img,
#content-box #sidebar-about #photo img {
	width: 80%;
}

/*--Contact Page--*/
#ch-openfor {font-size: 13px;}


} /*--end @media---*/

/*--END: Media Queries----------------------------------------------- */