@charset "utf-8";

@font-face {
  font-family: 'Poppins Light';
   src: local('Poppins Light'),url('http://www.h2ostudios.co.uk/font/Poppins-Light.otf') format('opentype');
   src: local('Poppins Light'),url('http://www.h2ostudios.co.uk/font/Poppins-Light.ttf') format('truetype');
}

@font-face {
   font-family: 'Poppins Medium';
   src: local('Poppins Medium'),url('http://www.h2ostudios.co.uk/font/Poppins-Medium.otf') format('opentype');
   src: local('Poppins Medium'),url('http://www.h2ostudios.co.uk/font/Poppins-Medium.ttf')  format('truetype');
}

*,
*::before,
*::after {   margin: 0;  padding: 0;  box-sizing: border-box;}

body:before {  display: none;}

@media all and (max-width: 1024px) {
  body:before {
    content: 'tablet';
  }
}

@media all and (min-width: 640px) {
  body:before {
    content: 'mobile';
  }
}

a { text-decoration:none;}

body {  color:#fff;	font-family:Poppins Light;}

.menu__toggler {   position: absolute;  top: 50px;  left: 30px;  z-index: 999;  height: 35px;  width: 35px;  outline: none;  cursor: pointer;  display: flex;
  align-items: center;}
.menu__toggler span,
.menu__toggler span::before,
.menu__toggler span::after {   position: absolute;  content: "";  width: 28px;  height: 2.5px;  background: #000000;  border-radius: 20px;  transition: 500ms cubic-bezier(0.77, 0, 0.175, 1);}
.menu__toggler span::before {  top: -8px;}
.menu__toggler span::after {  top: 8px;}
.menu__toggler.active > span {  background: transparent;}
.menu__toggler.active > span::before, .menu__toggler.active > span::after {  background: #000;  top: 0px;}
.menu__toggler.active > span::before {  transform: rotate(-225deg);}
.menu__toggler.active > span::after {  transform: rotate(225deg);}

/*
 * SLIDING MENU PANEL
 */
.menu {  position: absolute;  top:0px;  left: -150%;  z-index: 900;  color: #005c9c;  background: rgba(255, 0, 0, 1);  -webkit-clip-path: circle(42% at -10% );  clip-path: circle(42% at -10% );
  width: 100%;  height: 100%;  padding: 20% 50px 50px 50px;  display: flex;  flex-direction: column;  justify-content: left;  transition: 800ms left cubic-bezier(0.50, 0, 0.14, 1);
  border: 10px #000 solid;font-family:Poppins Light;}

.menu:hover{	animation-name: mymenu;	animation-duration: 3s;	animation-delay:500ms;    animation-fill-mode: forwards;}

@keyframes mymenu {	
    from {     clip-path: circle(43% at -10%);}
    to   {      clip-path: circle(100% );} 
	}
	
.menu #mlogo{	display:none;	}	
.menu.active { left: 0;}
.menu p {  color:#ffffff;  font-size:16px; height:auto;  margin-bottom: 10px;  width:50%; line-height:16px; font-family:Poppins Light;}
.menu a:hover {	cursor:pointer;	color:#fff;	font-size:20px; line-height:26px;}
/*.menu a::after, a::before{  color:#fff;  font-size: 24px;	}*/
.logo img{position:relative;display:block; margin:auto;top:15px; padding-bottom:30px;	}
#mlogo img{width:15%; height:auto;margin:0;padding:0;}
.menu #marrow {	position:absolute;	Top:45%;	right:80px;	z-index: 910;   width:30px; height:30px;	 }
.menu #marrow:hover  {  cursor:pointer;	  }
.menu #mlogo{	position:absolute;	right:50px; bottom:10px;	z-index: 905;	display:block;	width:50%;}

/* screen 320 */
@media screen and (min-width: 320px) 
{
.menu__toggler {   top: 20px;  left: 10px; }
#logo {width:60px;height:auto; padding-bottom:10px;}
.menu{padding-left:5px; padding-top:55%;}
.menu p{line-height:10px; font-size:16px;width:90%;}
.menu a{width:90%; font-size:16px; line-height:10px; }
.menu a:hover {	font-weight:bold; }
#mlogo img{width:50%;left:62%;}
.menu #marrow {	Top:45%; margin-top:-10%; width:10px; height:10px;	 }
.menu #marrow img {width:100px; height:100px;}
}

@media screen and (min-width: 360px) 
{
.menu{padding-left:5px; padding-top:75%;}
}

@media screen and (min-width: 375px) 
{
.menu{padding-left:5px; padding-top:75%;}
}

@media screen and (min-width: 411px) 
{
.menu{padding-left:5px; padding-top:70%;}
}
@media screen and (min-width: 480px) and (min-height: 320px)
{
.menu{padding-left:5px; padding-top:20%;}
}
@media screen and (min-width: 540px) 
{
.menu__toggler {   top: 50px;  left: 30px; }
.menu{padding-left:5px; padding-top:18%; font-size:10px;line-height:14px}
#logo {width:100px;height:auto; padding-bottom:10px;}
.menu #marrow {	Top:50%; margin-top:-20%; width:10px; height:10px;	 }
.menu{padding-left:5px; padding-top:75%;}
.menu p{line-height:10px; font-size:16px;width:90%;}
.menu a{width:90%; font-size:16px; line-height:10px; }
.menu a:hover {	font-weight:bold; }
}

@media screen and (min-width: 640px) and (min-height: 360px)
{
.menu__toggler {   top: 50px;  left: 30px; }
.menu{padding-left:5px; padding-top:20%; font-size:10px;line-height:12px}
#logo {width:100px;height:auto; padding-bottom:10px;}
.menu #marrow {	Top:60%; margin-top:-25%; width:10px; height:10px;	 }
.menu p{line-height:10px; font-size:14px;width:90%;}
.menu a{width:90%; font-size:14px; line-height:10px; }
.menu a:hover {	font-weight:bold; }
}

@media screen and (min-width: 720px) and (min-height: 360px)
{
.menu{padding-left:5px; padding-top:20%;}
.menu #marrow {	Top:60%; margin-top:-10%; width:10px; height:10px;	 }
#mlogo img{width:100px;height:auto; padding-bottom:10px;}
}

@media screen and (min-width: 768px) and (min-height: 1024px)
{
.menu__toggler {   top: 30px;  left: 30px; }
.menu{padding-left:5px; padding-top:50%; font-size:10px;line-height:12px}
#logo {width:100px;height:auto; padding-bottom:10px;}
.menu #marrow {	Top:60%; margin-top:-25%; width:10px; height:10px;	 }
.menu p{line-height:10px; font-size:14px;width:90%;}
.menu a{width:90%; font-size:14px; line-height:10px; }
.menu a:hover {	font-weight:bold; }
}
@media screen and (min-width: 800px) 
{
.menu__toggler {   top: 50px;  left: 30px; }	
.menu{padding-left:5px; padding-top:50%; font-size:12px;line-height:16px}
#logo {width:120px;height:auto; padding-bottom:30px;}
.menu a{width:90%; font-size:18px; line-height:10px; }
.menu a:hover {	font-weight:bold; }
}

@media screen and (min-width: 896px) and (min-height: 360px)
{
.menu__toggler {   top: 50px;  left: 30px; }
.menu{padding-left:5px; padding-top:20%; font-size:16px;line-height:16px}
#logo {width:100px;height:auto; padding-bottom:10px;}
.menu #marrow {	Top:50%; margin-top:-5%; width:10px; height:10px;	 }
.menu p{line-height:10px; font-size:16px;width:90%;}
.menu a{width:90%; font-size:16px; line-height:10px; }
.menu a:hover {	font-weight:bold; }
}

@media screen and (min-width: 1024px) and (min-height: 768px)
{
.menu__toggler {   top: 30px;  left: 30px; }
.menu{padding-left:5px; padding-top:30%; font-size:16px;line-height:16px}
#logo {width:100px;height:auto; padding-bottom:10px;}
.menu #marrow {	Top:60%; margin-top:-15%; width:10px; height:10px;	 }
.menu p{line-height:10px; font-size:16px;width:90%;}
.menu a{width:90%; font-size:16px; line-height:10px; }
.menu a:hover {	font-weight:bold; }
}

@media screen and (min-width: 1024px) and (min-height: 1366px)
{
.menu__toggler {   top: 30px;  left: 30px; }
.menu{padding-left:15px; padding-top:50%; font-size:16px;line-height:16px}
#logo {width:100px;height:auto; padding-bottom:10px;}
.menu #marrow {	Top:60%; margin-top:-25%; width:10px; height:10px;	 }
.menu p{line-height:10px; font-size:16px;width:90%;}
.menu a{width:90%; font-size:16px; line-height:10px; }
.menu a:hover {	font-weight:bold; }
}

@media screen and (min-width: 1080px) and (min-height: 1920px)
{

/*
 * SLIDING MENU PANEL
 */
.menu { top:-20%;;  -webkit-clip-path: circle(50% at -40% );  clip-path: circle(50% at -40% );
  width: 100%;  height: 100%;  padding: 80% 50px 50px 50px; }

.menu:hover{	animation-name: mymenu;	animation-duration: 3s;	animation-delay:500ms;    animation-fill-mode: forwards;}

@keyframes mymenu {	
    from {     clip-path: circle(50% at -40%);}
    to   {      clip-path: circle(100% );} 
	}
	
.menu #mlogo{	display:none;	}	
.menu.active { left: 0;}
.menu p {  color:#ffffff;  font-size:22px; height:auto;  margin-bottom: 10px; width:50%;}
.menu a{width:90%; font-size:22px; line-height:22px; height:auto;}
.menu a:hover {	cursor:pointer;	color:#fff;	font-size:26px;	font-weight:bold; }
/*.menu a::after, a::before{  color:#fff;  font-size: 24px;	}*/
.logo img{position:relative;display:block; margin:auto;top:15px; padding-bottom:30px;	}
#mlogo img{width:15%; height:auto;margin:0;padding:0;}
.menu #marrow {	position:absolute;	Top:60%; margin-top:-7%;	right:30px;	z-index: 910;   width:100px; height:100px;	 }
.menu #marrow img {width:100%; height:auto;}
.menu #marrow:hover  {  cursor:pointer;	  }
.menu #mlogo{	position:absolute;	right:50px; bottom:10px;	z-index: 905;	display:block;	width:50%;}
}

@media screen and (min-width: 1080px) 
{

/*
 * SLIDING MENU PANEL
 */
.menu { top:1%;;  -webkit-clip-path: circle(42% at -10% );  clip-path: circle(42% at -10% );
  width: 100%;  height: 100%;  padding: 20% 50px 50px 50px; }

.menu:hover{	animation-name: mymenu;	animation-duration: 3s;	animation-delay:500ms;    animation-fill-mode: forwards;}

@keyframes mymenu {	
    from {     clip-path: circle(42% at -10%);}
    to   {      clip-path: circle(100% );} 
	}
	
.menu #mlogo{	display:none;	}	
.menu.active { left: 0;}
.menu p {  color:#ffffff;  font-size:22px; height:auto;  margin-bottom: 10px; width:50%;}
.menu a{width:90%; font-size:22px; line-height:22px; height:auto;}
.menu a:hover {	cursor:pointer;	color:#fff;	font-size:26px;	font-weight:bold; }
/*.menu a::after, a::before{  color:#fff;  font-size: 24px;	}*/
.logo img{position:relative;display:block; margin:auto;top:15px; padding-bottom:30px;	}
#mlogo img{width:15%; height:auto;margin:0;padding:0;}
.menu #marrow {	position:absolute;	Top:60%; margin-top:-7%;	right:30px;	z-index: 910;   width:100px; height:100px;	 }
.menu #marrow img {width:100%; height:auto;}
.menu #marrow:hover  {  cursor:pointer;	  }
.menu #mlogo{	position:absolute;	right:50px; bottom:10px;	z-index: 905;	display:block;	width:50%;}
}

@media screen and (min-width: 1366px) and (min-height: 1024px)
{
.menu__toggler {   top: 30px;  left: 30px; }
.menu{padding-left:15px; padding-top:30%; font-size:16px;line-height:16px}
#logo {width:100px;height:auto; padding-bottom:10px;}
.menu #marrow {	Top:50%; margin-top:-10%; width:10px; height:10px;	 }
.menu p{line-height:10px; font-size:16px;width:90%;}
.menu a{width:90%; font-size:16px; line-height:10px; }
.menu a:hover {	font-weight:bold; }
}