/*
* 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
***********************************************/

/***** Mobile Nav button *****/
.mobile_nav                                     { margin:0; padding:10px; display:inline-block; height:50px; width:50px; text-align:center; color:var(--color-snow); background-color:rgba(80,17,103,.8); cursor:pointer; -webkit-appearance:none; border-radius:50px 50px 50px 0; position:fixed; top:16px; right:16px; z-index:70; }
.mobile_nav .icon                               { transition:opacity .2s linear 0s; -moz-transition:opacity .2s linear 0s; -webkit-transition:opacity .2s linear 0s; -o-transition:opacity .2s linear 0s; }
.mobile_nav .line                               { opacity:1; transition:opacity .2s linear 0s; -moz-transition:opacity .2s linear 0s; -webkit-transition:opacity .2s linear 0s; -o-transition:opacity .2s linear 0s; }
.mobile_nav .cross                              { opacity:0; transition:opacity .2s linear 0s; -moz-transition:opacity .2s linear 0s; -webkit-transition:opacity .2s linear 0s; -o-transition:opacity .2s linear 0s; }

/***** Nav *****/
.nav                                            { padding:20px; position:absolute; }
.logo--mobile 									{ margin-bottom:50px; }
.logo--mobile img 								{ width:200px; }

/***** Menu *****/
.menu											{ padding:50px; display:none; background-color:#FFF; flex-direction:column; position:fixed; top:40px; left:40px; position:fixed; top:0; right:0; bottom:0; left:0; z-index:30; }
.menu_open 										{ height:100vh; overflow:hidden; }
.menu_open .menu                     			{ display:flex; } 
.menu_open .mobile_nav .line 					{ opacity:0; transition:opacity .2s linear 0s; -moz-transition:opacity .2s linear 0s; -webkit-transition:opacity .2s linear 0s; -o-transition:opacity .2s linear 0s; }
.menu_open .mobile_nav .cross 					{ opacity:1; transition:opacity .2s linear 0s; -moz-transition:opacity .2s linear 0s; -webkit-transition:opacity .2s linear 0s; -o-transition:opacity .2s linear 0s; }

/***** Menu - Rainbow *****/
.rainbow                                    	{ margin:auto 0; padding:0; display:flex; flex-direction:column; list-style:none; width:100%; }
.rainbow > li                               	{ margin:0; padding:0; display:flex; flex-direction:column; position:relative; }
.rainbow a                                  	{ padding:20px 0; display:flex; text-decoration:none; position:relative; }

.dropdown 										{ display:none; }

/***** Logo *****/
.logo                                           { margin-right:auto; padding:0; position:relative; z-index:15; }
.logo img                                       { width:auto; height:50px; fill:#443979; }
.logo:after                                     { display:none; }

/***********************************************
Tablet - This applies from 750px onwards
***********************************************/
@media (min-width:750px)                        {
	/***** Mobile Nav button *****/
	.mobile_nav                                 { display:none; }

	/***** Nav *****/
	.nav                                        { padding:25px 50px; width:100%; font-weight:bold; color:#444; fill:#444;  background-color:transparent; display:flex; position:fixed; top:0; left:0; z-index:90; transition:all 0.33s cubic-bezier(0.33, 0, 0.2, 1) 0s; }
	.logo--mobile 								{ display:none; }

	/***** Menu *****/
	.menu                                		{ padding:0; align-items:center; background-color:transparent; flex-direction:row; position:relative; top:0; right:auto; bottom:auto; left:0; }
	.menu,
	.menu_open .menu                     		{ display:flex; }

	/***** Menu - Rainbow *****/
	.rainbow                                    { flex-direction:row; }
	.rainbow > li                               { flex-direction:row; align-items:center; }
	.rainbow > li+*                             { margin-left:20px; border:none; }

	.rainbow a                                  { margin:0 0 0 30px; padding:0; display:inline-block; text-decoration:none; position:relative; }
	.rainbow a.btn                              { padding:10px 20px; display:flex; }
	.rainbow a:before                          	{ content:''; position:absolute; left:-30px; top:50%; width:6px; height:6px; border-radius:3px; transform:translateY(-3px); }
	.rainbow a:after                            { content:''; position:absolute; left:50%; bottom:-3px; transform:translateX(-50%) scaleX(0); transform-origin:50% 50%; width:100%; height:3px; background-color:#443979; transition:transform 250ms; border-radius:3px; }
	.rainbow a:hover:after,
	.rainbow .current a:after                   { transform:translateX(-50%) scaleX(1); }

	.rainbow > li a:after                       { content:''; position:absolute; left:50%; bottom:-3px; transform:translateX(-50%) scaleX(0); transform-origin:50% 50%; width:100%; height:3px; background-color:#443979; transition:transform 250ms; border-radius:3px; }
	.rainbow > li:hover a:after,
	.rainbow > li.current a:after               { transform:translateX(-50%) scaleX(1); }

	.rainbow > li:nth-child(1) a:before         { display:none; }

	.rainbow > li:nth-child(2):hover,
	.rainbow > li:nth-child(2).current          { color:#EF0E03; }
	.rainbow > li:nth-child(2) a:after,
	.rainbow > li:nth-child(2) a:before         { background-color:#EF0E03; }
	.rainbow > li:nth-child(2) .dropdown li.current a,
	.rainbow > li:nth-child(2) .dropdown li a:hover     { color:#EF0E03; }

	.rainbow > li:nth-child(3):hover,
	.rainbow > li:nth-child(3).current          { color:#F09216; }
	.rainbow > li:nth-child(3) a:after,
	.rainbow > li:nth-child(3) a:before         { background-color:#F09216; }
	.rainbow > li:nth-child(3) .dropdown li.current a,
	.rainbow > li:nth-child(3) .dropdown li a:hover     { color:#F09216; }

	.rainbow > li:nth-child(4):hover,
	.rainbow > li:nth-child(4).current          { color:#00B149; }
	.rainbow > li:nth-child(4) a:after,
	.rainbow > li:nth-child(4) a:before         { background-color:#00B149; }

	.rainbow > li:nth-child(5):hover,
	.rainbow > li:nth-child(5).current          { color:#373CF8; }
	.rainbow > li:nth-child(5) a:after,
	.rainbow > li:nth-child(5) a:before         { background-color:#373CF8; }

	.rainbow > li:nth-child(6):hover,
	.rainbow > li:nth-child(6).current          { color:#740FF0; }
	.rainbow > li:nth-child(6) a:after,
	.rainbow > li:nth-child(6) a:before         { background-color:#740FF0; }

	.rainbow > li:nth-child(7):hover,
	.rainbow > li:nth-child(7).current          { color:#E600CF; }
	.rainbow > li:nth-child(7) a:after,
	.rainbow > li:nth-child(7) a:before         { background-color:#E600CF; }

	.rainbow > li:last-child a:after            { display:none; }    

	.dropdown                               	{ margin:0; padding:0; display:none; flex-direction:column; position:absolute; left:0; top:40px; width:300px; background-color:#FFF; list-style:none; border-radius:var(--radius); box-shadow:0px 0px 17px -5px rgba(0,0,0,0.3); }
	.dropdown li                            	{ margin:0; align-items:flex-start; }
	.dropdown li a                          	{ margin:0; padding:20px 30px; display:block; color:#444; }
	.dropdown li a:before                   	{ display:none; }
	.dropdown li a:after                    	{ bottom:-1px; height:1px; width:calc(100% - 60px); background-color:#EEEEEE !important; }
	.dropdown li:last-child a:after         	{ display:none; }
	.rainbow > li:hover .dropdown           	{ display:flex; }

	.nav-up                                 	{ background-color:var(--color-snow); transition:all 0.33s cubic-bezier(0.33, 0, 0.2, 1) 0s; border-bottom:1px solid var(--color-brand50); }
}

/***********************************************
Mobile ONLY - This applies from 0px to 749px
***********************************************/
@media only screen and (max-width:749px)        {
	.rainbow > li:last-child 					{ margin-top:20px; }
}