/* Layout STYLES reffer to layout_refference.css
--------------------------------------------------------------------*/
@media screen {
	#wrapper {
		margin: 0 auto;
	}

	.container,
	body.layout2col #container {
		margin-right: auto;
		margin-left: auto;
		position : relative;
		box-sizing: border-box;
	}

	.container:before,
	.container:after {
		display: table;
		content: " ";
	}

	.container:after {
		clear: both;
	}

	.container {
		padding-left: 0.25rem;
		padding-right: 0.25rem;
		/* background: pink; */
	}

    .ce_multicolumnStart:after {
        display: block;
        content: "";
        position: relative;
        width: 100%;
        clear: both;
    }

	.ce_multicolumnStart.con_mediumWidth,
	.inside_ce {
		margin: auto;
	}


	#main,#left,#right {
		position: relative;
	}

	#left {
		display: none;
	}

	#header,
	#footer {
		clear: both;
	}


	#footer {
		position: relative;
	}

	#footer > .container,
	body.layout2col #container,
	.art_fullWidth > .container,
	.art_normalWidth > .container,
	.art_narrowWidth > .container {
		width: 100%;
	}

	#footer_extra {
		padding-top: 0;
	}

	.block
	{
		padding-left: calc(var(--block-padding) * 1rem);
		padding-right: calc(var(--block-padding) * 1rem);
		box-sizing: border-box;
	}

    .block .block {
        padding: 0;
    }

	/* included articles */
	.mod_article:not(.art_fullWidth) .container .mod_article .container,
	.mod_article.art_fullWidth > .container  {
		width: 100%;
	}


	body.layout2col #container  .container {
		width: auto !important;
	}


	#main .mod_article {
        padding-top: 1rem;
        padding-bottom: 1rem !important;
	}

	.art_fullWidth .con_mediumWidth > .inside_ce {
		box-sizing: border-box;
		padding-left:  1rem ;
		padding-right:  1rem;
	}

}
/*@media ends*/


/* display with min width 414 iphone plus */
@media only screen and (min-width: 414px) {
}


/* display with min width 480 iphone landscape */
@media only screen and (min-width: 480px) {
}

/* display with min width 736 iphone plus landscape */
@media only screen and (min-width: 736px) {
	#main .mod_article {
        padding-top: 3rem;
        padding-bottom: 3rem !important;
	}

	#main .block {
		margin-bottom: 1.5rem;
	}
}

/* min-width:768px ipad portrait*/
@media only screen and (min-width: 768px) {
	.container {
		padding: 0;
	}

	/* 2 Column Layout */
	body.layout2col {}

	body.layout2col #right{
		width: 30%;
		float: right;
	}
	body.layout2col #main{
		width: 70%;
		float: left;
	}
	/* 2 Column Layout ends */



	/* .art_fullWidth > .container, */
	.art_normalWidth > .container,
	.art_fullWidth .con_mediumWidth > .inside_ce {
		width: 100%;
	}

    .art_fullWidth .inside_art {
        margin: 0 !important;
    }

	.art_narrowWidth > .container,
	.art_normalWidth .con_mediumWidth > .inside_ce,
	.art_narrowWidth .con_normalWidth > .inside_ce {
		width: 700px;
	}

	.art_fullWidth .con_narrowWidth > .inside_ce{
		width: calc(700px - var(--block-padding) * 2rem);
	}

	.art_normalWidth .con_narrowWidth > .inside_ce,
	.art_narrowWidth .con_mediumWidth > .inside_ce{
		width: 500px;
	}

	.art_narrowWidth .con_narrowWidth > .inside_ce {
		width: 400px;
	}

	.art_fullWidth .con_mediumWidth > .inside_ce {
		box-sizing: border-box;
		padding-left: calc((var(--block-padding) + 1) * 1rem);
		padding-right: calc((var(--block-padding) + 1) * 1rem);
	}
}

/* min-width:1024 ipad landscape*/
@media only screen and (min-width: 1024px) {
	#main .mod_article {
        padding-top: 3rem;
        padding-bottom: 3rem !important;
	}


	#container {

	}


	#footer > .container,
	body.layout2col #container,
	.mod_article.art_fullWidth > .container,
	.art_normalWidth > .container,
	.art_fullWidth .con_mediumWidth > .inside_ce {
		width: 1000px;
	}

	/* .art_fullWidth > .container {
		width: 100%;
	} */

	.ce_multicolumnStart.con_mediumWidth,
	.art_narrowWidth > .container,
	.art_normalWidth .con_mediumWidth > .inside_ce,
	.art_narrowWidth .con_normalWidth > .inside_ce
	{
		--mwidth: 800px;
		width: var(--mwidth); /* at smaller width, make all same wide */
	}

	.art_fullWidth .con_narrowWidth > .inside_ce {
		width: calc(var(--mwidth) - var(--block-padding) * 2rem);
	}

	.art_normalWidth .con_narrowWidth > .inside_ce,
	.art_narrowWidth .con_mediumWidth > .inside_ce {
		width: 600px;
	}

	.art_narrowWidth .con_narrowWidth > .inside_ce {
		width: 500px;
	}

	.ce_multicolumnStart_ {
		margin-left: calc(var(--block-padding) * -1rem);
		margin-right: calc(var(--block-padding) * -1rem);
    }
}

/* min-width:1200 Laptops (and larger) for width 1200px */
@media only screen and (min-width:1200px) {

	body.layout2col #container,
	#footer > .container,
	.art_normalWidth > .container,
	.mod_article.art_fullWidth > .container,
	.art_fullWidth .con_mediumWidth > .inside_ce {
		width: calc(1060px + var(--block-padding) * 2rem + 2rem);
		/* background: yellow; */
	}
	.ce_multicolumnStart.con_mediumWidth,
	.art_narrowWidth > .container,
	.art_normalWidth .con_mediumWidth > .inside_ce,
	.art_narrowWidth .con_normalWidth > .inside_ce
	{

	}

	.art_fullWidth .con_narrowWidth > .inside_ce{
		width: calc(1060px - var(--block-padding) * 2rem);
	}



}

/* min-width:1300 Laptops (and larger) for width 1300px */
@media only screen and (min-width:130000px) {
	body.layout2col #container,
	#footer > .container,
	.art_normalWidth > .container,
	.mod_article.art_fullWidth > .container,
	.art_fullWidth .con_mediumWidth > .inside_ce {
		width: calc(1225px + var(--block-padding) * 2rem + 2rem);
		/* background: yellow; */
	}
}
/* Layout Query ends
--------------------*/


/* Mood_content Query
--------------------*/
@media screen {
	#mood_content {
		clear: both;
		text-align: center;
	}
	
	#mood_content .container,
	#mood_content .container > .inside_art{
		display: block;
		height: 100%;
	}
	
	.nonmood #mood_content {
		height: 110px;
	}	

}

/* Mobile-landscape (and larger) lansacape */
@media only screen and (min-width: 480px) {
}


/* min-width:768px Tablet-portrait (and larger) */
@media only screen and (min-width: 768px) {
}


/* Tablet-landscape (and larger) for width 992px */
@media only screen and (min-width: 992px) {

	#mood_content,
	#mood_content .artbg {
		height: 480px;
	}
	
	.nonmood #mood_content {
		height: 180px;
	}	
}

/* min-width:1100 */
@media only screen and (min-width:1100px) {
}

/* min-width:1300 Laptops (and larger) for width 1300px */
@media only screen and (min-width:1300px) {

	#mood_content,
	#mood_content .artbg {
		height: 500px;
	}
	.nonmood #mood_content {
		height: 180px;
	}
}
/* Mood_content ends
--------------------*/