/******************************* resetting starter theme css *********************************/

.wrapper-header
.stack-preheader,
.stack-navigation,
.wrapper-content .stack-content-inner,
.wrapper-content .block + .block,
.wrapper-footer,
.page{
	border: 0;
	margin: 0;
	padding: 0;
}
.oembed-title{ /*** removing the asset title - as not necessasry ***/
	display: none;
}
.views-row{ /****** Rresetting the margins of views row elements **/
	margin: 0;
}
.block + .block{ /*** Rresetting block Margin ***/
	margin: 0;
}

/***** Standardising the code ****/

.empty-tag{ /*** Removes all empty tags (logic controled by js) *********/
	display: none;
}
img,
embed,
iframe,
object{ /* Eliminates the chances of image to get cut off when container is smaller than image*/
	max-width: 100%;
}
img{
	height: auto;
}
/***********************************************************************************************/

/***** Special grid layouts for views row elements (Don't Change the oreder of selectors) ******/

.four-grid-layout .view-content,
.three-grid-layout .view-content,
.two-grid-layout .view-content{
	display: inline-block; /*** To hold the structure of the container ***/ 
	width: 100% ;	/**** To make it behave as a block element **/
}
.four-grid-layout .views-row,
.three-grid-layout .views-row,
.two-grid-layout .views-row{ /*** Setting standard vertical spacing between each row element ***/
	margin-top: 10px;
	margin-bottom: 10px;
	float: left; /**** Stacking the cells ****/
}
.four-grid-layout .views-row{
	width: 22%; /****** Remaining width will be adjusted in margins ****/
	margin-right: 4%; /**** 22*4 + 4*3 = 100% *****/
}
.four-grid-layout .views-row:nth-child(4n){
	margin-right: 0; /**** Setting margin to every 4th child to 0 ****/
}
.three-grid-layout .views-row{
	width: 30%; /****** Remaining width will be adjusted in margins ****/
	margin-right: 5%; /**** 30*3 + 5*2 = 100% *****/
}
.three-grid-layout .views-row:nth-child(3n){
	margin-right: 0; /**** Setting margin to every 3rd child to 0 ****/
}
.two-grid-layout .views-row{
	width: 46%; /****** Remaining width will be adjusted in margins ****/
	margin-right: 8%; /**** 46*2 + 8 = 100% *****/
}
.two-grid-layout .views-row:nth-child(2n){
	margin-right: 0; /**** Setting margin to every 2nd child to 0 ****/
}
/************************************************************************************************/

/************************************* Layout specific css **************************************/

.page-width{ 
	width: 100%; /**** Spanning the main container to full width *******/
}
.wrapper-footer,
.wrapper-header{ 
	background: #999; /* Color to differntiate it from content */
}
.wrapper-header > .stack,
.wrapper-content,/* Setting the content layout */
.wrapper-footer > .stack{
	padding: 0;
	width: 100%;
	max-width: 960px;
	margin: auto;
}	
/***************************************** Media Queries ***************************************/

/* Desktops and laptops ---------- */
@media screen and (max-width: 1224px){	
}

/* iPads (landscape) ------------- */
@media screen and (max-width: 1024px){
	/********* Layout specific ****/ 
	.wrapper-footer > .stack,
	.wrapper-header > .stack,
	.wrapper-content{
		max-width: 760px;
	}
	.col-c{
		width: 65%; /*** Setting up the new layout ***/
		padding: 0;
		margin: 0;
		float: left;
	}
	.sidebar.right{
		width: 35%; /*** Setting up the new layout ***/
		padding: 0;
		margin : 0;
		float: left;
	}
	.col-c > .pane,
	.sidebar > .region{ /**** Setting internal padding to the regions ***/
		padding: 10px;
	}
	/***** Special grid layouts for views row elements ***** (Don't Change the oreder of selectors) **/
	.four-grid-layout .views-row{
		width: 30%; /****** Remaining width will be adjusted in margins ****/
		margin-right: 5%; /**** 22*4 + 4*3 = 100% *****/
	}
	.four-grid-layout .views-row:nth-child(4n){
		margin-right: 5%; /**** Resetting the margin from previous Code ****/
	}
	.four-grid-layout .views-row:nth-child(3n){ /*** Making 4 grid to 3 grid ***/
		margin-right: 0; /**** Setting margin to every 3rd child to 0 ****/
	}
	/* Hamburger Menu Logic */
	.stack-navigation .block-menu .middle > h2{ /****** Css fir hamburger Menu Button *******/
		display: block;
		font-size: 0;
		color : transparent;
		width: 48px;
		height: 32px;	
		background: #555 url(hamburger.png) no-repeat top left;
		background-size: 100% 100%;
		cursor: pointer;
		margin: 0 15px; 
	}
	.stack-navigation .block-menu li{
		float: none; /*** Stacking the menu items vertically ****/
	}
	.stack-navigation .block-menu li a{
		display: block; /******** Making the menu item links to span to 100% ********/
	}
	.stack-navigation .block-menu .content{
		display: none; /******** Hidding the dropdown initially *********/
	}
	/***************/
}

/* Devices having width greater than iPads (landscape) ------------- */
@media screen and (min-width: 1025px){
	.stack-navigation .block-menu .content{
		display: block !important; /***** Making menu to appear in desktop view no matter whatever the display of menu content **/
	}	                           /***** Reason - Css applied by Js in hamburger Menu ***********/		
}
/* iPads (potrait) --------------- */
@media screen and (max-width: 768px){
	.wrapper-footer > .stack,
	.wrapper-header > .stack,
	.wrapper-content{
		max-width: 460px; /********* Layout specific ****/
	}
	.col-c,
	.sidebar.right{
			width: 100%; /*** Spanning the whole layout to 100% ***/
			float: none;
			min-height: 0 !important; /** resetting the min height from starter js ****/
	}
	.stack-content-inner .box{ /****** Stacking the lower part of the DOM above the upper sidebar ****/
 		display: flex; /*** For chrome firefox and other advanced browser **/
		display: -webkit-flex; /*** for android and ios **/
		flex-direction : column-reverse; /*** For chrome firefox and other advanced browser **/
		-webkit-flex-direction : column-reverse; /*** for android and ios **/
	}
	/***** Special grid layouts for views row elements ***** (Don't Change the oreder of selectors) ****/
	.three-grid-layout .views-row,
	.four-grid-layout .views-row{
		width: 46%; /****** Remaining width will be adjusted in margins ****/
		margin-right: 8%; /**** 22*4 + 4*3 = 100% *****/
	}
	.three-grid-layout .views-row:nth-child(3n),
	.four-grid-layout .views-row:nth-child(3n),
	.four-grid-layout .views-row:nth-child(4n){
		margin-right: 8%; /**** Resetting the margin from previous Code ****/
	}
	.three-grid-layout .views-row:nth-child(2n), /**** Making 3 grid to 2 grid ***/
	.four-grid-layout .views-row:nth-child(2n){ /**** Making 4 grid to 2 grid ***/
		margin-right: 0; /**** Setting margin to every 2nd child to 0 ****/
	}
	/********************************/
}

/*************** Other Media Queries (Corner Case) **********/
@media screen and (max-width: 620px){	/**** For login & signup popup only ***/
	/******** Login and sign up pop up Theming ***/
	.user-pass-dialog,
	.user-login-dialog,
	.user-register-form-dialog{
		width: 100% !important; /*** Expanding the popup box to 100% and aligning it to left **/
		left: 0 !important;
		padding: 0 0 20px 0	!important;
	}
	.ui-dialog.user-pass-dialog > div,/*** High selector for overridding previously written css****/ 
	.ui-dialog.user-login-dialog > div,/*** High selector for overridding previously written css****/ 
	.ui-dialog.user-register-form-dialog > div/*** High selector for overridding previously written css****/ {
		padding: 0 20px;
	}
	.user-pass-dialog .user-fields,
	.user-login-dialog .user-fields,
	.user-register-form-dialog .user-fields{
		width: auto; /*** overridding the fix width applied on popup box ***/ 
	}
	.user-register-form-dialog .user-fields .form-item .date-month,
	.user-register-form-dialog .user-fields .form-item .date-day,
	.user-register-form-dialog .user-fields .form-item .date-year{
		width: 100%; /*** expanding date , month , year drop down to acquire max width ***/
	}
	.user-register-form-dialog .mollom-privacy,
	.user-register-form-dialog .tos-and-disclaimer{
		width: 80%;
		margin: 5px auto; /*** aliging the text to center and resetting the default css ***/
		font-size: 12px;
		font-style: italic;
		left: initial;
	}
}
/***************************************/
/* Smartphones (landscape) ------- */
@media screen and (max-width: 480px){
	.wrapper-footer > .stack,
	.wrapper-header > .stack,
	.wrapper-content{
		max-width: 100%; /********* Layout specific ****/
	}
	.wrapper-footer > .stack .stack-width,
	.wrapper-header > .stack .stack-width,
	.wrapper-content .wrapper-1{
		padding: 0 20px;  /********* Layout specific ****/
	}	
	/***** Special grid layouts for views row elements ***** (Don't Change the oreder of selectors) ****/
	.two-grid-layout .views-row,
	.three-grid-layout .views-row,
	.four-grid-layout .views-row{
		width: 100%; /****** Making every cell single grid ****/
		margin-right: 0;
	}
	.three-grid-layout .views-row:nth-child(3n), 
	.four-grid-layout .views-row:nth-child(3n),
	.four-grid-layout .views-row:nth-child(4n){
		margin-right: 0;  /**** Resetting the margin from previous Code ****/
	}

	/******** Login and sign up pop up Theming ***/
	.user-pass-dialog .user-fields .form-item,
	.user-login-dialog .user-fields .form-item,
	.user-register-form-dialog .user-fields .form-item,
	.user-register-form-dialog .user-fields .form-wrapper{
		text-align: center;
		margin: 5px 0; /** aligning the ineer content in center**/
		text-transform: uppercase;
	}
	.user-pass-dialog .user-fields .form-item input,
	.user-login-dialog .user-fields .form-item input,
	.user-register-form-dialog .user-fields .form-item input,
	.user-register-form-dialog .user-fields .form-item select{
		position: relative; /** Stacking user fields and inputs one upon another **/
		margin-top : 5px;
	}
	.user-register-form-dialog .user-fields .form-wrapper > .fieldset-wrapper{
		position: relative;
		margin: 0 auto 10px auto; /***** overridding the default css applied on input buttons in ui-dialog box ***/
	}
	 .user-register-form-dialog .user-fields .field-name-field-postal-code input{/***** overridding the default css applied on input buttons in ui-dialog box ***/
	 	right: initial;
	 	width: 68%;
	 }
	.user-pass-dialog .user-fields > .form-actions,
	.user-login-dialog .user-fields > .form-actions,
	.user-register-form-dialog .user-fields > .form-actions{
		text-align: center; /** Aligning inputs action button center **/
	}
	.user-login-dialog .user-fields .form-item  .description a,
	.user-pass-dialog .user-fields > .form-actions > .form-submit,
	.user-login-dialog .user-fields > .form-actions > .form-control,
	.user-register-form-dialog .user-fields > .form-actions > .form-control{
		left: initial;
		display: inline-block;
		float: none;
		width: auto;/***** overridding the default css applied on input buttons in ui-dialog box ***/
	}	
	.user-login-dialog .ui-dialog-titlebar .ui-dialog-title,
	.user-pass-dialog .ui-dialog-titlebar .ui-dialog-title,
	.user-register-form-dialog .ui-dialog-titlebar .ui-dialog-title{
		font-size: 18px; /*** decreasing dialog box title size for mobile ***/
	}
}

/* Smartphones (portrait ) ------- */
@media screen and (max-width: 320px){	
	.wrapper-footer > .stack .stack-width,
	.wrapper-header > .stack .stack-width,
	.wrapper-content .wrapper-1{
		padding: 0 10px;  /********* Layout specific ****/
	}	
}
/* iPhone 4 ---------------------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5) ,only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
/* Large screens ----------------- */
@media only screen and (min-width : 1824px) {
/* Styles */
}