<div id="privacy-bar">
    <div class="wrapper">
        <div class="container">
            <p>By continuing to use this site you agree to the use of cookies for personalised content and analytics. See our <a href="#">Privacy Policy</a> for more details.</p>

            <a href="javascript:void(0)" class="close"><span class="visuallyhidden">Close</span></a>
        </div>
    </div>
</div><!-- .privacy-bar -->

    // Set Cookie function
        function createCookie(name, value, days) {
            if (days) {
                var date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                var expires = "; expires=" + date.toGMTString();
            } else var expires = "";
            document.cookie = escape(name) + "=" + escape(value) + expires + "; path=/";
        }


    // Privacy Policy Cookies   
        function cookiesPolicyBar(){
            // Check cookie 
            if ($.cookie('theCookieName') != "accepted") $('#privacy-bar').fadeIn(); 

            //Assign cookie on click
            $('#privacy-bar a').on('click',function(){
                createCookie("theCookieName", "accepted", 90); // Cookie expires in 90 days
                $('#privacy-bar').fadeOut();
            });
        }     
        
    // Run cookie policy function
        cookiesPolicyBar();

// Breakpoints
$tab-start:         640px;
$lap-start:        	860px;
$desk-start: 		1024px;

// Colours
$dark-grey: 		#4c4c4a;
$light-grey:	    #e6e5dd;
$blue:				#003645;

$text-colour: 		$dark-grey;


// Privacy Bar
#privacy-bar {
	background: $light-grey;
	bottom: 0;
	display:none;
	position: fixed;
	width: 100%;
	z-index: 100;
	a {
		color: $text-colour !important;
		&:hover, &:focus {
			color: #000 !important;
		}
	}
	p {
		color: $text-colour;
		font-size: 0.875em;
		max-width: calc(100% - 40px);
		@media (min-width: $tab-start) {
			max-width: none;
		}
		@media (min-width: $lap-start) {
			text-align: center;
		}
		&:last-of-type {
			margin-bottom: 0;
		}
	}
    
    // Close icon
	.close {
		position: absolute;
		top: 16px;
		right: 16px;
		width: 19px;
		height: 19px;
		border-radius: 50%;
		border: 1px solid $blue;
		transition: border-color 0.25s ease-in-out;
		@media (min-width: $lap-start) {
			width: 25px;
			height: 25px;
		}
		&:before,
		&:after {
			content: '';
			height: 11px;
			width: 1px;
			position: absolute;
			background: $blue;
			left: 8px;
    		top: 3px;
    		transition: background-color 0.25s ease-in-out;
    		@media (min-width: $lap-start) {
				height: 15px;
				left: 11px;
    			top: 4px;
			}
		}
		&:before {
			transform: rotateZ(45deg);
		}
		&:after {
			transform: rotateZ(-45deg);
		}
		&:hover, &:focus {
			border-color: #000;
			&:after, &:before {
				background-color: #000;
			}
		}
	}
}