Cookies


Our Cookie Policy

To provide a safer experience, the best content and great communication, we use cookies.

PHP
<div class="cookies">
	<?= svg('iconCookieC','cookies_img') ?>
	<h3>Our Cookie Policy</h3>
	<p>To provide a safer experience, the best content and great communication, we use cookies.</p>
	<button class="button || cookies_button">Okay, got it</button>
</div>

<!-- Icon -->
<symbol id="iconCookieC" viewBox="0 0 33 32">
    <path fill="#de814b" style="fill: var(--color1, #de814b)" d="M20.043 16.571c-1.791-1.931-3.513-3.928-4.933-6.147-1.024-1.6-1.924-3.386-3.005-4.513-0.888-0.901-1.543-2.004-1.908-3.215-2.181 0.617-3.67 1.156-5.634 3.184-13.592 14.046 6.077 35.706 21.203 21.458 1.108-1.043 0.709-2.297 1.365-3.446-2.092-2.448-4.878-4.946-7.087-7.321z"></path>
    <path fill="#f6b059" style="fill: var(--color2, #f6b059)" d="M25.727 27.381c-13.972 11.364-33.409-6.701-21.143-21.448 0.194-0.222 0.413-0.443 0.636-0.665 2.8-2.82 5.921-4.124 8.968-4.31 0.071-0.004 0.143 0.005 0.21 0.029s0.129 0.061 0.182 0.11c0.053 0.048 0.095 0.107 0.125 0.172s0.046 0.136 0.048 0.208c0.033 1.809 1.224 3.033 2.944 3.284 0.060 0.010 0.118 0.033 0.169 0.067s0.095 0.078 0.128 0.129 0.055 0.109 0.065 0.17c0.010 0.061 0.007 0.122-0.008 0.182-0.309 1.061-0.324 2.186-0.044 3.255s0.845 2.041 1.633 2.812c0.789 0.771 1.772 1.313 2.844 1.566s2.193 0.209 3.242-0.128c0.058-0.019 0.119-0.026 0.179-0.019s0.119 0.026 0.171 0.057 0.097 0.073 0.132 0.122c0.035 0.050 0.059 0.106 0.070 0.166 0.404 2.18 2.376 1.774 3.284 1.459 0.062-0.021 0.127-0.030 0.192-0.025s0.128 0.023 0.186 0.053c0.058 0.030 0.109 0.072 0.15 0.123s0.072 0.109 0.090 0.172c1.848 6.645-4.455 12.459-4.455 12.459z"></path>
    <path fill="#6d420d" style="fill: var(--color3, #6d420d)" d="M16.26 13.329c0 1.648-1.338 2.758-3 2.758s-2.998-1.11-2.998-2.758c-0.011-0.399 0.059-0.796 0.204-1.168s0.365-0.711 0.644-0.997c0.28-0.286 0.614-0.513 0.983-0.669s0.766-0.235 1.167-0.235 0.798 0.080 1.167 0.235c0.369 0.155 0.704 0.383 0.983 0.669s0.499 0.625 0.644 0.997c0.146 0.372 0.215 0.769 0.204 1.168z"></path>
    <path fill="#6d420d" style="fill: var(--color3, #6d420d)" d="M25.565 20.478c0 0.303-0.059 0.602-0.174 0.882s-0.284 0.534-0.497 0.748c-0.213 0.214-0.466 0.384-0.744 0.499s-0.576 0.175-0.877 0.175c-1.265 0-2.143-0.753-2.143-2.027s0.878-2.581 2.143-2.581c0.301 0 0.599 0.060 0.877 0.175s0.531 0.286 0.743 0.5c0.213 0.214 0.382 0.468 0.497 0.748s0.174 0.579 0.174 0.882z"></path>
    <path fill="#6d420d" style="fill: var(--color3, #6d420d)" d="M8.522 17.679c0 0.975-0.72 1.538-1.706 1.538s-1.859-0.563-1.859-1.538c0-0.232 0.046-0.462 0.136-0.676s0.221-0.409 0.386-0.573 0.362-0.294 0.578-0.383c0.216-0.089 0.448-0.134 0.682-0.134s0.466 0.046 0.682 0.134c0.216 0.089 0.413 0.219 0.578 0.383s0.297 0.359 0.386 0.573c0.090 0.214 0.136 0.444 0.136 0.676z"></path>
    <path fill="#6d420d" style="fill: var(--color3, #6d420d)" d="M13.826 23.694c0 0.146-0.045 0.29-0.131 0.411s-0.208 0.217-0.351 0.273c-0.143 0.056-0.301 0.071-0.453 0.043s-0.292-0.099-0.401-0.202c-0.11-0.103-0.184-0.235-0.214-0.379s-0.014-0.292 0.045-0.427 0.16-0.251 0.289-0.332c0.129-0.081 0.281-0.124 0.436-0.124 0.207 0 0.405 0.078 0.552 0.216s0.229 0.326 0.229 0.521z"></path>
    <path fill="#6d420d" style="fill: var(--color3, #6d420d)" d="M8.435 8.435c0.48 0 0.87-0.409 0.87-0.913s-0.389-0.913-0.87-0.913c-0.48 0-0.87 0.409-0.87 0.913s0.389 0.913 0.87 0.913z"></path>
    <path fill="#f6b059" style="fill: var(--color2, #f6b059)" d="M24.515 2.094c0.094 1.052-0.847 1.906-2.101 1.906s-2.215-0.934-2.15-2.085 1.007-2.006 2.101-1.908c0.547 0.063 1.057 0.303 1.447 0.682s0.638 0.873 0.703 1.405z"></path>
    <path fill="#de814b" style="fill: var(--color1, #de814b)" d="M22.877 3.583c0.46 0.010 0.912-0.115 1.297-0.358-0.213 0.25-0.483 0.449-0.789 0.583s-0.64 0.199-0.976 0.191c-1.247 0-2.21-0.923-2.145-2.058 0.015-0.315 0.105-0.623 0.263-0.899s0.381-0.514 0.65-0.694c-0.273 0.338-0.43 0.749-0.449 1.177-0.007 0.273 0.045 0.544 0.151 0.797s0.264 0.483 0.465 0.675 0.441 0.344 0.704 0.445c0.264 0.101 0.546 0.149 0.829 0.142z"></path>
    <path fill="#f6b059" style="fill: var(--color2, #f6b059)" d="M24.344 8.174c-0.028 0.353-0.175 0.684-0.415 0.937s-0.557 0.413-0.899 0.452c-0.674 0.045-1.215-0.537-1.204-1.303-0-0.362 0.137-0.71 0.383-0.97s0.58-0.41 0.931-0.419c0.165-0.005 0.329 0.026 0.481 0.090s0.29 0.162 0.403 0.285 0.201 0.269 0.256 0.429c0.055 0.16 0.077 0.33 0.064 0.499z"></path>
    <path fill="#de814b" style="fill: var(--color1, #de814b)" d="M23.329 9.258c0.277-0.019 0.541-0.123 0.758-0.298-0.121 0.169-0.276 0.311-0.455 0.415s-0.378 0.168-0.583 0.188c-0.685 0.045-1.234-0.539-1.223-1.304 0.002-0.218 0.052-0.433 0.147-0.628s0.233-0.366 0.402-0.5c-0.169 0.239-0.262 0.525-0.269 0.819-0.011 0.767 0.536 1.352 1.223 1.309z"></path>
    <path fill="#f6b059" style="fill: var(--color2, #f6b059)" d="M33.387 8.69c-0.036 0.398-0.209 0.772-0.49 1.057s-0.653 0.466-1.053 0.51c-0.791 0.052-1.423-0.606-1.41-1.472-0-0.41 0.161-0.803 0.45-1.096s0.681-0.462 1.093-0.471c0.193-0.005 0.385 0.029 0.563 0.103s0.339 0.183 0.472 0.321 0.235 0.304 0.3 0.485c0.065 0.181 0.090 0.373 0.075 0.564z"></path>
    <path fill="#de814b" style="fill: var(--color1, #de814b)" d="M32.171 9.92c0.319-0.021 0.623-0.137 0.872-0.332-0.139 0.189-0.318 0.347-0.524 0.462s-0.436 0.187-0.673 0.208c-0.79 0.051-1.422-0.598-1.411-1.448 0.003-0.241 0.061-0.478 0.171-0.694s0.269-0.404 0.464-0.552c-0.197 0.264-0.306 0.582-0.312 0.909-0.017 0.849 0.615 1.488 1.413 1.445z"></path>
</symbol>

<script>
	$(document).ready(function () {
		var date = new Date(Date.now() + 60 * 60 * 24 * 1000 * 365);
		date = date.toUTCString();
		
		$('body').on('click', '.cookies_button', function () {
			if ($('.cookies').hasClass('visible')) {
				document.cookie = "user=Policy; path=/; expires=" + date;
				$('.cookies').removeClass('visible');
			}
		});
		
		<?php if(!isset($_COOKIE['user'])):?>
		setTimeout(function () {
			$('.cookies').addClass('visible');
		}, 2000);
		<?php endif;?>
	});
</script>
CSS
.cookies{position:fixed;bottom:1.5rem;right:-10rem;opacity:0;visibility:hidden;z-index:9999;width:46rem;-webkit-border-radius:1rem;-moz-border-radius:1rem;border-radius:1rem;padding:2rem 2.5rem 2.5rem 7.3rem;background-color:#f6efe7;-webkit-box-shadow:0 0 1.3rem .1rem rgba(0,0,0,.2);-moz-box-shadow:0 0 1.3rem .1rem rgba(0,0,0,.2);box-shadow:0 0 1.3rem .1rem rgba(0,0,0,.2)}
.cookies.visible{-webkit-transition:opacity .5s ease-out,right .5s ease-out,bottom .5s ease-out;-o-transition:opacity .5s ease-out,right .5s ease-out,bottom .5s ease-out;-moz-transition:opacity .5s ease-out,right .5s ease-out,bottom .5s ease-out;transition:opacity .5s ease-out,right .5s ease-out,bottom .5s ease-out;will-change:opacity,right,bottom;right:1.5rem;opacity:1;visibility:visible}
.cookies .cookies_img{width:11.6rem;height:11rem;position:absolute;left:-5.2rem;top:50%;-webkit-transform:translate(0,-50%);-moz-transform:translate(0,-50%);-ms-transform:translate(0,-50%);-o-transform:translate(0,-50%);transform:translate(0,-50%)}
.cookies h3{font-size:3rem;font-weight:700;line-height:1.2;text-transform:capitalize;margin:0;color:#6d420d}
.cookies p{font-size:1.6rem;line-height:1.5;margin:.5rem 0 1.5rem;color:#9e7f5a}
.cookies .button{color:#fff;border-color:#df814b;background-color:#df814b;text-transform:initial}

@media (-ms-high-contrast: none),(-ms-high-contrast: active),(-moz-touch-enabled: 0),(hover: hover) {
	.cookies .button:hover{color:#fff;border-color:#c9713f;background-color:#c9713f}
}

@media only screen and (max-width: 550px) {
	.cookies{width:-webkit-calc(100% - 3rem);width:-moz-calc(100% - 3rem);width:calc(100% - 3rem);text-align:center;padding:2rem 2.5rem 2.5rem}
	.cookies .cookies_img{display:none}
	.cookies p{max-width:35rem;margin:.5rem auto 1.5rem}
}

@media only screen and (max-width: 350px) {
	.cookies h3{font-size:2.9rem}
}
SCSS
.cookies {
	position: fixed;
	bottom: 1.5rem;
	right: -10rem;
	opacity: 0;
	visibility: hidden;
	z-index: 9999;
	width: 46rem;
	border-radius: 1rem;
	padding: 2rem 2.5rem 2.5rem 7.3rem;
	background-color: #f6efe7;
	box-shadow: 0 0 1.3rem .1rem rgba(0, 0, 0, .2);
	
	
	&.visible {
		transition: opacity 0.5s ease-out, right 0.5s ease-out, bottom 0.5s ease-out;
		will-change: opacity, right, bottom;
		right: 1.5rem;
		opacity: 1;
		visibility: visible;
	}
	
	.cookies_img {
		width: 11.6rem;
		height: 11rem;
		position: absolute;
		left: -5.2rem;
		top: 50%;
		transform: translate(0, -50%);
	}
	
	h3 {
		font-size: 3rem;
		font-weight: 700;
		line-height: 1.2;
		text-transform: capitalize;
		margin: 0;
		color: #6d420d;
	}
	
	p {
		font-size: 1.6rem;
		line-height: 1.5;
		margin: .5rem 0 1.5rem;
		color: #9e7f5a;
	}
	
	.button {
		color: #ffffff;
		border-color: #df814b;
		background-color: #df814b;
		text-transform: initial;
	}
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.cookies .button:hover {color: #ffffff;border-color: #c9713f;background-color: #c9713f;}
}

@media only screen and (max-width: 550px) {
	.cookies {width: calc(100% - 3rem);text-align: center;padding: 2rem 2.5rem 2.5rem;}
	.cookies .cookies_img {display: none;}
	.cookies p {max-width: 35rem;margin: 0.5rem auto 1.5rem;}
}

@media only screen and (max-width: 350px) {
	.cookies h3 {font-size: 2.9rem;}
}