/* doctype css */



/* ..........................................  */
/* ...header.................................  */

header {

	--title-font-size:       1rem;
	--title-font-size-h1:    3rem;
	--title-width:            55%;
	--title-margin-top:      45px;
	--title-margin-bottom:   45px;
	--title-max-width:      650px;

	--img-scale: 1;

	/* phone 652x468 */
	--img-phone-left:         calc( 100% + 60px );
	--img-phone-width:       425px;
	--img-phone-height:       calc( var(--img-phone-width) * 0.717 );
	--img-phone-bottom:       calc( var(--img-phone-height) * -.36 );

	background-color: var(--adobe-red);
	color: #fff;
	margin-bottom: var(--section-spacing);
	overflow: hidden;
	position: relative;
}
header .content {
	position: relative;
}
header .title {
	font-size: var(--title-font-size);
	margin-top: var(--title-margin-top);
	margin-bottom: var(--title-margin-bottom);
	max-width: var(--title-max-width);
	position: relative;
	width: var(--title-width);
}
header .title h1 {
	font-size: var(--title-font-size-h1);
	line-height: 1.1;
	margin-bottom: 10px;
}
header .title h2 {
	color: #fff;
	font-size: 1.8em;
	line-height: 1;
	margin: 0 0 1em 0;
}
header .title p {
	font-weight: 400;
	font-size: 1.1em;
	line-height: 1.3;
}
header img {
	position: absolute;
}
header img.phone {
	left: var(--img-phone-left);
	bottom: var(--img-phone-bottom);
	transform-origin: left center;
	width: calc( var(--img-phone-width) * var(--img-scale) );
}

@media screen and (max-width: 1100px){
	header {
		--img-phone-left: calc( 100% + 20px );
	}
}
@media screen and (max-width: 960px){
	header {
		--title-max-width: 450px;
		--img-phone-left: 102%;
	}
}
@media screen and (max-width: 900px){
	header {
		--title-font-size-h1: 2.7em;
		--img-scale: .85;
	}
}
@media screen and (max-width: 800px){
	header {
		--title-font-size: .9rem;
		--title-margin-top: 35px;
		--title-margin-bottom: 35px;
		--img-scale: .75;
		--img-phone-bottom: calc( var(--img-phone-height) * -.28 );
	}
}
@media screen and (max-width: 725px){
	header {
		--title-font-size: .85rem;
		--img-scale: .6;
		--img-phone-bottom: calc( var(--img-phone-height) * -.32 );
	}
	header .title h1 {
		margin-right: calc( (100% + var(--title-width)) * -.57 );
		font-size: 2.6em;
	}
	header .title h1 br {
		display: none;
	}
}
@media screen and (max-width: 580px){
	header {
		--title-width: 45%;
		--title-margin-top: 25px;
		--title-margin-bottom: 25px;
		--img-phone-bottom: calc( var(--img-phone-height) * -.26 );
	}
	header .title h1 {
		font-size: 2.3em;
		margin-right: calc( (100% + var(--title-width)) * -.92 );
	}
}
@media screen and (max-width: 475px){
	header {
		--img-scale: .5;
		--img-phone-bottom: calc( var(--img-phone-height) * -.18 );
	}
	header .title h2 {
		margin-right: -90%;
	}
}









/* ..........................................  */
/* ...sections...............................  */


section.bg_color {
	background-color: var(--adobe-red);
	padding-top: var(--section-spacing);
	margin-bottom: var(--section-spacing);
}
section.bg_color .content > h2 {
	color: #fff;
	margin-top: 0;
}
section.bg_color .content section > h3 {
	color: #fff;
}






























/* ..........................................  */
/* ...admin guide............................  */

.admin_guide_container {
	display: flex;
	flex-wrap: wrap;
}
.admin_guide_container .admin_guide {
	background-color: #fff;
	border-left: #9ddfeb solid 40px;
	box-shadow: 0 0 10px rgba(0,0,0,.25);
	flex: 1;
	display: flex;
	flex-direction: column;
	margin: 1%;
	padding: 20px;
	text-align: left;
}
.admin_guide_container .admin_guide h4 {
	margin-bottom: 12px;
}
.admin_guide_container .admin_guide p {
	flex: 1;
	margin-bottom: 16px;
}

@media screen and (max-width: 1000px) {
	.admin_guide_container .admin_guide { border-left-width: 20px; }
}

@media screen and (max-width: 800px) {
	.admin_guide_container { display: block; }
	.admin_guide_container .admin_guide { width: auto; border-left-width: 25px; margin-bottom: 20px; padding-top: 15px; }
	.admin_guide_container .admin_guide h4 { margin-bottom: 6px; }
}





























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

	/*h2 { font-size: 2.1rem; margin: 30px 0 20px 0; }*/
	/*h3 { font-size: 1.8rem; margin-bottom: 12px; }*/





}





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

	.section_subgroup { margin-top: 35px; }

	.recipe_container { display: block; }

}



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

	h2 { font-size: 1.6rem }
	h3 { font-size: 1.4rem; }

}