/* colours

DARK BLUE  rgb(22, 58, 83) or #003c56        // #003c56
YELLOW     rgb(202, 227, 30) #dcdc00         // #dcdc00
GREEN      rgb(128, 204, 41) or #95c11f      // #95c11f
TURQUOISE  rgb(77, 195, 186)                 // #3367bc
LIGHT BLUE rgb(67, 149, 215)                 // #0095db
???? #163A53
 */

/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: local('Nunito Light Italic'), local('Nunito-LightItalic'), url(https://fonts.gstatic.com/s/nunito/v14/XRXQ3I6Li01BKofIMN4oZNvEUT8_DQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: local('Nunito Light Italic'), local('Nunito-LightItalic'), url(https://fonts.gstatic.com/s/nunito/v14/XRXQ3I6Li01BKofIMN4oZNvKUT8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v14/XRXV3I6Li01BKofIO-aBXso.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v14/XRXV3I6Li01BKofINeaB.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Nunito SemiBold'), local('Nunito-SemiBold'), url(https://fonts.gstatic.com/s/nunito/v14/XRXW3I6Li01BKofA6sKUb-vISTs.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Nunito SemiBold'), local('Nunito-SemiBold'), url(https://fonts.gstatic.com/s/nunito/v14/XRXW3I6Li01BKofA6sKUYevI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Nunito Bold'), local('Nunito-Bold'), url(https://fonts.gstatic.com/s/nunito/v14/XRXW3I6Li01BKofAjsOUb-vISTs.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Nunito Bold'), local('Nunito-Bold'), url(https://fonts.gstatic.com/s/nunito/v14/XRXW3I6Li01BKofAjsOUYevI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.loading-wratellpper svg path {
   animation: .6s linear infinite rotate;
}
@keyframes rotate { from { transform: rotate(0); } to { transform: rotate(360deg); }  }



body, input, select {
    font-family: 'Nunito', Trebuchet MS, Verdana, Tahoma,arial,helvetica,sans-serif;
}
a:link {color:#003c56;}
a:visited {color:#003c56;}
a:hover {color:#0095db;}
a:active {color:#23614C;}

#menu dd a {color: rgb(22,58,83);}
#menu dd a:hover {background-color: #003c56; color: #dcdc00;}


/* body.ie div.tellmemore {background-color: #DE9046; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);} */


#moreinfo ul li.list-web {list-style-image: url(/icon/link.svg); list-style-type: circle;}
#moreinfo ul li.list-pdf {list-style-image: url(/icon/pdf.svg);list-style-type: circle;}
#moreinfo ul li.list-info {list-style-image: url(/icon/info.svg);list-style-type: circle;}



#buyarea {position:relative;margin-top: 10px;}
#addToCart {background-color:#95c11f; color:#003c56; width:150px; height:105px; text-align:center; border-radius:75px; font-size:50px;padding-top:45px;margin:auto; position:absolute; bottom:-80px; left:15px;}


.productBox h3 {background-color:#95c11f; color: #003c56;}

#menu dd:hover div.hovermenu {background-color:#95c11f; color: #003c56; border:0px}

/* product page */

#menu dt {font-weight: bold; margin:5px 2px;}

/*footer {background-color: #003c56;}*/
#buyarea input, #buyarea select {background-color:#95c11f; color:#003c56; border-color:#003c56}
@media (max-width: 976px) {
  #addToCart {left:unset;right:15px; bottom:unset; top:-75px;}
  main #rightbits #buyarea h2 {margin-top:40px;}
  header {height:70px;}
}


#grouptitle {
  border: 3px solid #636363;
  color: #636363;
}
 #itempics .mainimg {
   border-color: #636363;
 }


#subtitleinner {background-color: #636363; border-color: #636363;}
 #moreinfo h2 {background-color: #636363;}
#moreinfo {border-color: #636363; margin-top:130px;}

#dotmenu {width:inherit;background: url();}

#dotmenu button {background-color: #ee7500; border: 1px solid #636363; color: white; margin:5px; font-size:14px; cursor:pointer; animation-name: pulse_animation;
	animation-duration: 5000ms;
	transform-origin:70% 70%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;}
  #dotmenu a.please-login span {padding:5px;padding-top:25px;color:#0095db; float:left; }
  #user-icon {width:35px;margin:18px 0px 10px 20px;float:left;}
  #contact-icon {width:35px;margin-top:25px;margin-left:15px;float:right;}


div#popMenu {box-shadow: 0px 0px 3000px 3000px rgba(2,2,2,0.3);}




#s {border: 2px solid #95c11f; border-radius: 17px; background-color: transparent; width:330px; padding: 12px 0px 12px 40px; background-image: url('/icon/search.php'); background-position:-1px -1px; background-size:35px; color:#95c11f;margin-top:25px;}

#s::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #95c11f;
  opacity: 0.9; /* Firefox */
}
@keyframes pulse_animation {
	0% { transform: scale(1);}
	30% { transform: scale(1);}
	40% { transform: scale(1.08);}
	50% { transform: scale(1);}
	60% { transform: scale(1);}
	70% { transform: scale(1.05);}
	80% { transform: scale(1);}
	100% { transform: scale(1);}
}

body.ie #dotmenu button {background-color:#F49E4C; border: 1px solid #F49E4C; font-weight:bold; animation-name:none; box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
 }

/*#logo {background: url(/graphics/midsummer-logo-white.png)}*/

#logo-text {float:left; font-size:19px; color:#dcdc00; font-weight:700;letter-spacing: 5px; margin-top:33px;}
div.mobile #logo-text {margin-top:13px;}

#mobile-menu-button {background: url(/icon/menu-lines-yellow.svg) center no-repeat;
background-size: 32px;}
#mobile-account-button {background: url(/icon/user.svg) no-repeat center; background-size:32px}
#mobile-search-button {background: url(/icon/search.php) no-repeat center; background-size:32px}
#mobile-trolley-button {background: url(/icon/cart-circle.svg) center no-repeat;  background-size: 32px}

#contact {color: rgb(77, 195, 186); text-align:left; padding-top:25px;padding-left: 0px;}
header {height:85px;}

/*#trolleyLink {background: url(/graphics/svg/cart.svg) 10px 10px no-repeat;  background-size:80px; color: #003c56; height:40px; width:100px; padding:0px; padding-top:85px;background-color: #fff; text-align: center; position:relative; font-weight:bold;}*/

#cart-length {background-color:red; width:30px; height:25px; padding-top:5px;border-radius:15px; color:white; font-weight:bold; position:absolute; top:5px; right:10px; font-size:15px;}

footer .rxyd{
  display: flex;
  justify-content: center;
}
footer .footer-wrapper {
  display:inline-block;
}

#footer-message-form {
  margin-top: -10px;
}

#footer-message-form input[type=submit] {
    all: unset;
    padding: 3px;
    background-color: #95c11f;
    border-radius: 2px;
    color: #003c56;
    margin-right:4px;
    float:right;
}

footer ::-webkit-input-placeholder { /* Chrome */
  color: #f1edea;
  vertical-align: top;
}
footer :-ms-input-placeholder { /* IE 10+ */
  color: #f1edea;
  vertical-align: top;
}
footer ::-moz-placeholder { /* Firefox 19+ */
  color: #f1edea;
  opacity: 1;
  vertical-align: top;
}
footer :-moz-placeholder { /* Firefox 4 - 18 */
  color: #f1edea;
  opacity: 1;
  vertical-align: top;
}
footer textarea {background-color:#636363; border:0px; width:400px; height:30px; margin-bottom:15px;vertical-align: top; resize:none; color:#ffb;}
footer #footer-contact div {margin-top:-10px;float:left; margin-right:12px; padding:7px; border-radius:20px;}
footer #footer-contact img {width:20px; float:left; opacity:0.85}
footer #footer-contact li {height:45px; margin-top:10px;text-align:left; color:#f1edea; font-weight:normal;}

@media (max-width: 1300px) {
  #contact {display:none}
}




@media (max-width: 976px) {
  #addToCart {left:unset;right:15px; bottom:unset; top:-75px;}
  main #rightbits #buyarea h2 {margin-top:40px;}
  header {height:70px;}
  #s {margin-top: 18px; width:200px;}
}


@media all and (max-width: 905px){
  footer #footer-message-form{
    display: none;
  }
  #s {width:140px;}
}

@media all and (max-width: 432px){
  footer #footer-message-form{
    display: none;
  }
}

@media (max-width: 795px) {
  header #logo {display:none; width: 70px;}
}

/*div[modal='login'] {background: url("/graphics/logos/logo-animate.svg"); background-size:cover;}*/

div.user-info {background: transparent url(/icon/user.svg) 10px 10px no-repeat; color: #0095db; background-size:35px; margin-top:10px;}
div.user-info p {margin-top:6px;}
div.user-info p.user-status {margin-top:0px;}
div.user-info p.user-status a{color: #0095db; font-size:0.8em;}

a.linkbox, span.linkbox {
    background-color: #95c11f;
    color: #003c56;
    border-radius:24px;
    font-size:0.8em;
    padding:8px 20px;
  }

ul#products div.comment {background-color: #636363}

ul#products li[group] h2 {
    background-color:#636363;
}

#logo {width: 100px;}
#logo svg {width:100%}
/* logo animation */
g.sun-sweep {transform: translate(150px, 150px) rotate(-175deg); opacity:0;}

#suns-one {animation: sweep 8s cubic-bezier(0.17, 1, 0.36, 1) forwards; animation-delay: 1s}
#suns-two {animation: sweep 5.5s cubic-bezier(0.17, 1, 0.36, 1) forwards; animation-delay: 1s}
#suns-three {animation: sweep 5s cubic-bezier(0.17, 1, 0.36, 1) forwards; animation-delay: 1s}
#suns-four {animation: sweep 4s cubic-bezier(0.17, 1, 0.36, 1) forwards; animation-delay: 1s}
#suns-five {animation: sweep 3s cubic-bezier(0.17, 1, 0.36, 1) forwards; animation-delay: 1s}

@keyframes sweep {
  0%  {opacity:0; transform: translate(150px, 150px) rotate(-175deg);}
  30% {opacity:0; transform: translate(150px, 150px) rotate(-175deg);}
  100%{opacity:1; transform: translate(150px, 150px) rotate(0deg);}
}