/*
* Amazium (http://www.amazium.co.uk)
* Copyright 2010 - 2019, Mike Ballan
* Licensed under MIT (https://github.com/OwlyStuff/Amazium/blob/master/LICENSE)
*/

/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- HERE
*/

/***********************************************
Mobile First - This applies from 0px to 749px
***********************************************/

.header                                         { padding:0; width:100%; display:flex; flex-direction:column; justify-content:center; background:rgb(243,230,231); background:linear-gradient(180deg, rgba(243,230,231,1) 0%, rgba(244,221,208,1) 100%); position:relative; top:0; left:0; overflow:hidden;  }
.header .section 								{ padding:100px 20px; background-image:url(../images/bg-01.png); background-position:top center; background-size:250px; }
.header .section--hero							{ background-size:420px; }
.header .grid__item 							{ position:relative; }
.header span 									{ display:none; background-position:center; background-repeat:no-repeat; background-size:100%; position:absolute; }
.header .txt--hero 								{ font-size:2.4rem; line-height:2.8rem; }

.hero h1 										{ font-size:4rem; line-height:4.4rem; }

.head-about-01 									{ width:315px; height:203px; background-image:url(../images/head-about-01.png); top:50%; right:-400px; transform:translateY(-50%); }
.head-about-02 									{ width:460px; height:400px; background-image:url(../images/head-about-02.png); top:50%; left:-520px; transform:translateY(-50%); }

.head-event-01 									{ width:300px; height:300px; background-image:url(../images/head-event-01.png); top:50%; right:-400px; transform:translateY(-50%); }
.head-event-02 									{ width:200px; height:330px; background-image:url(../images/head-event-02.png); top:50%; left:-280px; transform:translateY(-50%); }

.head-birthday-01 								{ width:270px; height:402px; background-image:url(../images/head-birthday-01.png); top:50%; right:-320px; transform:translateY(-50%); }
.head-birthday-02 								{ width:330px; height:200px; background-image:url(../images/head-birthday-02.png); top:50%; left:-380px; transform:translateY(-50%); }

.head-night-01 									{ width:297px; height:282px; background-image:url(../images/head-night-01.png); top:50%; right:-320px; transform:translateY(-50%); }
.head-night-02 									{ width:300px; height:300px; background-image:url(../images/head-night-02.png); top:50%; left:-380px; transform:translateY(-50%); }

.head-contact-01 								{ width:200px; height:330px; background-image:url(../images/head-contact-01.png); top:50%; right:-400px; transform:translateY(-50%); }
.head-contact-02 								{ width:300px; height:300px; background-image:url(../images/head-contact-02.png); top:50%; left:-350px; transform:translateY(-50%); }

.head-gallery-01								{ width:355px; height:288px; background-image:url(../images/head-gallery-01.png); top:50%; right:-400px; transform:translateY(-50%); }
.head-gallery-02								{ width:200px; height:330px; background-image:url(../images/head-gallery-02.png); top:50%; left:-270px; transform:translateY(-50%); }

.head-range-01									{ width:300px; height:300px; background-image:url(../images/head-range-01.png); top:50%; right:-400px; transform:translateY(-50%); }
.head-range-02									{ width:200px; height:333px; background-image:url(../images/head-range-02.png); top:50%; left:-300px; transform:translateY(-50%); }

.head-animal-01									{ width:433px; height:300px; background-image:url(../images/head-animal-01.png); top:50%; right:-500px; transform:translateY(-50%); }
.head-animal-02									{ width:263px; height:333px; background-image:url(../images/head-animal-02.png); top:50%; left:-300px; transform:translateY(-50%); }

.head-cup-01									{ width:433px; height:300px; background-image:url(../images/head-cup-01.png); top:50%; right:-500px; transform:translateY(-50%); }
.head-cup-02									{ width:263px; height:333px; background-image:url(../images/head-cup-02.png); top:50%; left:-300px; transform:translateY(-50%); }

.head-plate-01									{ width:433px; height:300px; background-image:url(../images/head-plate-01.png); top:50%; right:-500px; transform:translateY(-50%); }
.head-plate-02									{ width:263px; height:333px; background-image:url(../images/head-plate-02.png); top:50%; left:-300px; transform:translateY(-50%); }

.head-money-01									{ width:433px; height:300px; background-image:url(../images/head-money-01.png); top:50%; right:-500px; transform:translateY(-50%); }
.head-money-02									{ width:263px; height:333px; background-image:url(../images/head-money-02.png); top:50%; left:-300px; transform:translateY(-50%); }

.head-vase-01									{ width:433px; height:300px; background-image:url(../images/head-vase-01.png); top:50%; right:-500px; transform:translateY(-50%); }
.head-vase-02									{ width:263px; height:333px; background-image:url(../images/head-vase-02.png); top:50%; left:-300px; transform:translateY(-50%); }

.head-kitchen-01								{ width:433px; height:300px; background-image:url(../images/head-kitchen-01.png); top:50%; right:-500px; transform:translateY(-50%); }
.head-kitchen-02								{ width:263px; height:333px; background-image:url(../images/head-kitchen-02.png); top:50%; left:-300px; transform:translateY(-50%); }

.head-hang-01									{ width:433px; height:300px; background-image:url(../images/head-hang-01.png); top:50%; right:-500px; transform:translateY(-50%); }
.head-hang-02									{ width:263px; height:333px; background-image:url(../images/head-hang-02.png); top:50%; left:-300px; transform:translateY(-50%); }

.head-halloween-01								{ width:433px; height:300px; background-image:url(../images/head-halloween-01.png); top:50%; right:-500px; transform:translateY(-50%); }
.head-halloween-02								{ width:263px; height:333px; background-image:url(../images/head-halloween-02.png); top:50%; left:-300px; transform:translateY(-50%); }

.head-christmas-01								{ width:433px; height:300px; background-image:url(../images/head-christmas-01.png); top:50%; right:-500px; transform:translateY(-50%); }
.head-christmas-02								{ width:263px; height:333px; background-image:url(../images/head-christmas-02.png); top:50%; left:-300px; transform:translateY(-50%); }

.header-img-04 									{ width:200px; height:330px; background-image:url(../images/header-img-04.png); top:50%; right:-300px; transform:translateY(-50%); }
.header-img-05 									{ width:300px; height:300px; background-image:url(../images/header-img-05.png); top:50%; left:-350px; transform:translateY(-50%); }

.head-group-01 									{ width:449px; height:290px; background-image:url(../images/head-group-01.png); top:50%; right:-520px; transform:translateY(-50%); }
.head-group-02 									{ width:334px; height:330px; background-image:url(../images/head-group-02.png); top:50%; left:-400px; transform:translateY(-50%); }

.head-paint-01 									{ width:300px; height:300px; background-image:url(../images/head-paint-01.png); top:50%; right:-420px; transform:translateY(-50%); }
.head-paint-02 									{ width:333px; height:303px; background-image:url(../images/head-paint-02.png); top:50%; left:-440px; transform:translateY(-50%); }

.head-pumpkin-01 								{ width:297px; height:282px; background-image:url(../images/head-pumpkin-01.png); top:50%; right:-320px; transform:translateY(-50%); }
.head-pumpkin-02 								{ width:300px; height:300px; background-image:url(../images/head-pumpkin-02.png); top:50%; left:-380px; transform:translateY(-50%); }

.head-prints-01 								{ width:270px; height:402px; background-image:url(../images/head-prints-02.png); top:50%; right:-320px; transform:translateY(-50%); }
.head-prints-02 								{ width:330px; height:300px; background-image:url(../images/head-prints-01.png); top:50%; left:-400px; transform:translateY(-50%); }

.header-contact-01 								{ width:200px; height:330px; background-image:url(../images/header-img-04.png); bottom:-60px; right:-300px; }
.header-contact-02 								{ width:300px; height:300px; background-image:url(../images/header-img-05.png); top:50%; left:-350px; transform:translateY(-50%); }

/***********************************************
Tablet - This applies from 750px onwards
***********************************************/
@media (min-width:750px)                        {
	.header                                     { min-height:500px; }
	.header span 								{ display:inherit; }
	.header .section 							{ padding:160px 20px; min-height:500px; }
	.header .grid__item 						{ min-height:300px; }
	
	.icon-rainbow 								{ width:80px; }
	
	.header .card 								{ margin-top:50px; }
	.header .heroRange							{ min-height:430px; justify-content:center; }
	.header .hero 								{ min-height:640px; }

	.hero h1 									{ font-size:7rem; line-height:7.4rem; }

	.home-01 									{ width:700px; height:1030px; background-image:url(../images/head-home-01.png); top:0; left:-750px; }
	.home-02 									{ width:450px; height:290px; background-image:url(../images/head-home-02.png); top:150px; right:-500px; }
	.home-03 									{ width:490px; height:490px; background-image:url(../images/head-home-03.png); top:-60px; right:-300px; }
}