/**

 * Title: Mobile Stylesheet

 * Description: Mobile stylesheet for RR Seafoods.

 * Contents: [Mobile Navigation, Responsive]

 * Author: Raycille Dimla

 * Date Created: 2017-09-13

 *

 * # Navigation

 * # Front Page

 * # Pages

 * # Footer

 *

 */





/*====================================

=            # Navigation            =

====================================*/

/* mobile */

@media screen and ( max-width: 750px ) {

	.header-wrp {

		padding: 0;

		margin: 0;

	}

	.sitelogo ,

	header .header-wrp.sticky .sitelogo {

		position: absolute;

		float: none;

		background-size: contain;

		margin: 2.5% auto !important;

		left: 0;

		right: 0;

		top: 0;

		bottom: 0;

		height: 60px !important;

	}

	.mobile-navigation {

		display: block;

	}

	.desktop-navigation {

		display: none;

	}

	.mobile-navigation nav.navbar.navbar-default ,

	.mobile-navigation .navbar-header .navbar-toggle {

		background: transparent;

		border: none;

		box-shadow: none;

		margin: 0;

	}

	.mobile-navigation nav.navbar .navbar-header {

		border: none;

	}

	.mobile-navigation nav.navbar .navbar-header .navbar-toggle {

		padding: 5%;

	}

	.mobile-navigation nav.navbar .navbar-header .navbar-toggle .icon-bar {

		/*position: absolute;*/

		background-color: #FFF;

		width: 35px;

		height: 4px;

		margin: 7px 0;

	}

	/*.mobile-navigation nav.navbar .navbar-header .navbar-toggle.collapsed span.icon-bar:nth-child(2) {

		margin-top: -20px;

	}

	.mobile-navigation nav.navbar .navbar-header .navbar-toggle.collapsed span.icon-bar:nth-child(3) {

		margin-top: -10px;

	}

	.mobile-navigation nav.navbar .navbar-header .navbar-toggle.collapsed span.icon-bar:nth-child(4) {

		margin-bottom: -20px;

	}

	.mobile-navigation nav.navbar .navbar-header .navbar-toggle span.icon-bar:nth-child(2) {

		transform: rotate(-45deg);

		margin-top: -10px;

	}

	.mobile-navigation nav.navbar .navbar-header .navbar-toggle span.icon-bar:nth-child(3) {

		transform: rotate(45deg);

		margin-top: -10px;

	}

	.mobile-navigation nav.navbar .navbar-header .navbar-toggle span.icon-bar:nth-child(4) {

		display: none;

		margin-top: -10px;

	}*/

	.header-wrp.sticky .mobile-navigation nav.navbar .navbar-header .navbar-toggle .icon-bar {

		background-color: #333;

	}

	.mobile-navigation nav.navbar .navbar-collapse{

		padding: 0;

		background: rgba(255,255,255,1);

		border: none;

	}

	.mobile-navigation nav.navbar .navbar-collapse .navbar-nav {

		margin: 0;

	}

	.mobile-navigation nav.navbar .navbar-collapse .header-nav {

		padding: 0;

	}

	.mobile-navigation nav.navbar .header-nav ,

	.mobile-navigation nav.navbar .navbar-collapse .menu-item {

		display: block;

		padding: 0;

	}

	.mobile-navigation nav.navbar .navbar-collapse .menu-item:hover ,

	.mobile-navigation nav.navbar .navbar-collapse .current-menu-item {

		background: #265091;

	}

	.mobile-navigation nav.navbar .navbar-collapse .menu-item a {

		color: #333;

		width: 100%;

		display: block;

		padding: 20px 0;





	}

	.mobile-navigation nav.navbar .navbar-collapse .menu-item a:hover , 

	.mobile-navigation nav.navbar .navbar-collapse .current-menu-item a {

		border: none;

		color: #FFF;

	}

}



/* desktop */ 

@media screen and ( min-width: 750px ) {

	.desktop-navigation {

		display: block;

	}

	.mobile-navigation {

		display: none;

	}

}



/* tablet */

@media ( min-width: 750px ) and ( max-width: 840px ) {

	.sitelogo ,

	header .header-wrp.sticky .sitelogo {

		position: absolute;

		display: block !important;

		float: right !important; 

		background-size: contain;

		margin: auto 0 !important;

		left: 0;

		right: 0;

		top: 0;

		bottom: 0;

		height: 60px !important;

	}

	.leftnav ,

	.rightnav {

		margin: 20px auto;

	}

	.desktop-navigation nav.navbar .navbar-collapse .current-menu-item {

		padding: 0 10px;

	}

}

@media ( min-width: 840px ) and ( max-width: 1200px ) {

	.sitelogo ,

	header .header-wrp.sticky .sitelogo {

		display: none !important;

	}

	.leftnav ,

	.rightnav {

		margin: 20px auto;

	}

}



/*====================================

=            # Front Page            =

====================================*/

/* mobile */

@media screen and ( max-width: 1000px ) {

	.rr-title span.hr {

		width: 30px;

	}

	.rr-title h2 {

		font-size: 20px;

	}

	.row .feats {

		margin: 5% auto;

	}

	.panel-layout p {

		text-align: justify;

	}

	.p3-content .col-md-6 {

		text-align: center;

	}

	.panel-5 .recipe {

		height: 400px;

	}

}

@media screen and ( max-width: 1200px ) {

	.panel-5 .recipe ,

	.panel-5 .recipe-thumb{

		height: 400px;

	}

}



/*====================================

=              # Pages              =

====================================*/

/* mobile */

@media screen and ( max-width: 1000px ) {

	#subpages img {

		padding: 5% 0;

	}

	.row .col-md-12 .col-md-5{

		text-align: center;

	}

}



/*====================================

=              # Footer              =

====================================*/

/* mobile */

@media screen and ( max-width: 1200px ) {

	.footer-nav .menu-footer-menu-container {

		-webkit-column-count: 3; /* Chrome, Safari, Opera */

		-moz-column-count: 3; /* Firefox */

		column-count: 3;

	}

	.footer-nav .menu-footer-menu-container .menu-item {

		display: block;

	}

	.footer-nav .menu-footer-menu-container .menu-item a {

		line-height: 50px;

	}

	#footer-medialinks {

		margin: 5%;

	}

}