/* Reset CSS */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; margin: 0;}

.slicknav_menu {display:none;}

form {height:100%}

.breadcrumb {margin:20px 0px;}
.breadcrumb a{color:#000; text-decoration:none;}
.breadcrumb a:hover{color:#000; text-decoration:underline;}

.loginarea {margin-left:10px;padding:10px 5px 15px 5px;font-size:14px;}	
.loginarea ul { margin: 0; padding: 0;}
.loginarea ul li { list-style-type: none; display: inline;}
.loginarea li a { display: block; margin-left:8px;margin-right:8px;float: left;color:#333; text-decoration: none;}
.loginarea li a:hover{text-decoration:underline;}
.basket {width:220px; margin-top:5px; margin-bottom:12px; padding-left:10px; float:right; height:80px; }

.basketinfo {float:left; }

#viewBasketButton {cursor:pointer;padding: 5px 0px 0px 0px; float:right; position:relative; top:-15px;right:20px;}

.baskethead {padding: 6px 0px 0px 70px;font-size: 20px; color:#666;}
.basketitems {padding: 5px 5px 0px 0px; float:right; font-size: 18px; color:#666;}
.baskettotal {padding: 5px 0px 0px 0px; float:right; font-size: 18px; color:#666;}

.basketcheckout {padding: 0px 40px 0px 0px; float:right; font-size: 15px; color:#666;}

.inlinesearch {background-color: #fff;width:200px;height:30px;padding:2px 0 2px 2px;float:right; clear:right; font-size:16px; color:#fff;border: 1px solid #999; }
.inlinesearchbox {padding-left:10px;width:150px; height:30px; border:none;}
.search {width:29px; height:30px; padding-right:5px; display:block; float:right; text-decoration:none; background: #fff url(../layoutimages/searchnew.png) no-repeat;}

/*#menu {padding:20px 0px 0px 0px;}
#menu > li{ float:left; margin:0px 50px 0px 0px;}
#menu > li > ul{  display:none;background:lightblue; padding:5px; }
#menu > li > ul li{padding:5px 20px 5px 10px; display:block}
#menu > li:hover > ul{ display:block; position:absolute;font-size:12pt;z-index:99999;}
#menu > li > ul li > ul{display:none; background:#fff;padding:5px;}
#menu > li > ul li > ul li{padding:5px 20px 5px 10px; }
#menu > li > ul li:hover > ul{  display:block;  position:absolute;  left:96%;   top:0;  width:auto;z-index:99999;}
#menu > li > ul > li ul > li{  display:block;  border-top:solid 3px #fff;  white-space:nowrap;}*/

.gallery-image {width:30%; margin:0px 1% 0px 0px; float:left}
.gallery-image img {width:100%}

.album {float:left; margin:0px 10px 0px 0px; text-align:center}

.tag-img {width:200px;}
.tag-img img {width:100%}


/****************  MY CSS ********************/


* {margin:0;padding:0;-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;} 
html, body {height: 100%;font-family: 'Open Sans', sans-serif;color:#565656;background:#fff;}
#wrap {min-height: 100%; margin: 0 auto;  }
#main {overflow:hidden;	padding-bottom: 0px; height:100%; margin:0 auto 0px;font-family: 'Open Sans', sans-serif; position: relative; z-index:10; font-size:14pt; font-weight:300; line-height:26pt; letter-spacing:0.7px}  /* must be same height as the footer */

a {outline: 0;}
body:before {content:"";height:100%;float:left;width:0;margin-top:-32767px;}

/* IMPORTANT

<!--[if !IE 7]>
	<style type="text/css">
		#wrap {display:table;height:100%}
	</style>
<![endif]-->

*/
.slicknav_menu {display:none;}

.middle {width:96%;padding:0px 2% 0px 2%; position:relative; margin:0 auto; }

.header {display:flex; display: -ms-flexbox;
    -ms-flex-pack: center; padding-top:100px}

.menu-btn {position:absolute; z-index:10000; width:95px; right:30px; top:20px; background:none}
.menu-btn:hover {cursor: pointer}
.menu-btn img {width:100%;}
.menu {position:fixed; z-index:1000; width:500px; background-color:#005d80; padding:50px; right:-500px; transition:ease-in, 1s; background-image:url('../layoutimages/8-bg.png'); background-repeat: no-repeat; background-position:bottom left;}
.menu ul li {margin:30px 0px; text-transform: uppercase; font-family: Nexa, sans-serif; font-weight:700; list-style-type:none; display:block!important}

.menu-right {right:0px!important;}

.fixed-button {position:fixed!important}

.c-hamburger {
    opacity:1;
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 86px;
  height: 96px;
  font-size: 0;
  text-indent: -9999px;
  box-shadow: none;
  border-radius: none;
  background: none;
  border:none;
  cursor: pointer;
  transition: background 0.3s;
}

.c-hamburger:focus {
  outline: none;
}


.c-hamburger span {
  display: block;
  position: absolute;
  top: 44px;
  left: 18px;
  right: 18px;
  height: 6px;
  background: white;
}

.c-hamburger span::before,
.c-hamburger span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 6px;
  background-color: #fff;
  content: "";
}

.c-hamburger span::before {
  top: -16px;
}

.c-hamburger span::after {
  bottom: -16px;
}

.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  transition-duration: 0.3s, 0.3s;
  transition-delay: 0.3s, 0s;
}

.c-hamburger--htx span::before {
  transition-property: top, transform;
}

.c-hamburger--htx span::after {
  transition-property: bottom, transform;
}

/* active state, i.e. menu open */

.c-hamburger--htx.is-active span {
  background: none;
}

.c-hamburger--htx.is-active span::before {
  top: 0;
  transform: rotate(45deg);
}

.c-hamburger--htx.is-active span::after {
  bottom: 0;
  transform: rotate(-45deg);
}

.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
  transition-delay: 0s, 0.3s;
}

.menu-btn-close {position:absolute; z-index:10; width:50px; right:30px; top:30px;}
.menu-btn-close:hover {cursor: pointer}
.menu-btn-close img {width:100%;}

.menu a:link {font-family: Nexa, sans-serif!important; font-weight:700!important; font-size:16pt!important; letter-spacing:2px; line-height:50pt; cursor:pointer}
.menu a:visited {}
.menu a:hover {}

.fixed-menu {position:fixed; width:100%; padding:25px 0px; text-align:center; z-index:100; background-color:#005d80; border-bottom:1px solid #2fafd4;-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.4);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.4);}
.fixed-menu ul li {list-style-type:none; display:inline-block; margin:0px 15px; font-family: 'Work Sans', sans-serif; font-weight: 300; letter-spacing:1px; font-size:11pt; text-transform:uppercase}
.fixed-menu ul li:last-child {text-transform:lowercase}
.fixed-menu a:hover {font-size:12pt!important; color:white; text-decoration:none}
.fixed-menu a:link {font-size:12pt!important; line-height:26pt; color:white; text-decoration:none}
.fixed-menu a:visited {font-size:12pt!important; color:white; text-decoration:none}

.fixed-linked {width:25px; float:right; margin-right:30px; position:absolute; right:0}
.fixed-linked img {width:100%}

.content {position:relative; z-index:3; text-align: center; width:100%; }
.logo {width:450px; margin:30px auto}
.logo img {width:100%}

@font-face { font-family: Nexa; src: url('../css/Nexa-Bold.otf'); } 
@font-face { font-family: Nexa; font-weight: bold; src: url('../css/Nexa-Bold.otf');}
.strap { font-family: Nexa, sans-serif; color:white; font-size:12pt; letter-spacing:2px; margin:30px 0px}
.strap ul li:nth-child(1) {background-image:none;}
.strap ul li {background-image:url('../layoutimages/bullet.png'); background-repeat: no-repeat; background-position: left center; background-size:auto 100%; display: inline-block; padding:0px 33px 0px 60px; *display: inline;}

.about {color:white; font-family: 'Work Sans', sans-serif; font-weight: 300; letter-spacing:1px; font-size:18pt; margin:40px 40px 25px 40px; line-height:26pt}
.about:nth-child(4) {margin:6% 0px; font-size:18pt}

.diagonal-background {background:url('../layoutimages/diagonal-bg.png'); background:-webkit-linear-gradient(-201deg, #006a92, 50%, rgba(255,255,255,0) 50%); background:linear-gradient(-201deg, #006a92, 50%, rgba(255,255,255,0) 50%); width:100%; height:100%; position:absolute; z-index:2; top:0px; left:0px; background-position:top left; background-repeat:no-repeat; background-size:100% 100%}
.home-blue-container { z-index:1; height:1400px; width:96%; margin:0px 2% 0px 2%; position:absolute; top:0px; left:0px}
.blue-background {background-color:#2fafd4; height:800px; position:relative;}
.home-middle8 {height:400px; width:100%; background-repeat:no-repeat; background-position:top center; background-size:cover}
.middle8content {width:49%; float:right; color:white; padding-right:2%; padding-top:50px; font-family: 'Open Sans', sans-serif; font-size:14pt; font-weight:300; line-height:26pt; letter-spacing:0.7px}

.header a:link {color:white; text-decoration: none;font-family: 'Work Sans', sans-serif; font-weight: 300; letter-spacing:1px; font-size:20pt;}
.header a:visited {color:white; text-decoration: none}
.header a:hover {color:white; text-decoration: none}
.home-header a:link {color:white; text-decoration: none;font-family: 'Work Sans', sans-serif; font-weight: 300; letter-spacing:1px; font-size:18pt;}
.home-header a:visited {color:white; text-decoration: none}
.home-header a:hover {color:white; text-decoration: none}

.home-tag {color:white; text-align:center; font-family: 'Work Sans', sans-serif; font-weight: 300; letter-spacing:1px; font-size:14pt; padding:0px 0px 80px 0px}

.home-header {position:relative; z-index:10; padding:40px 0px 0px 0px}
.iam {color:white; font-family: 'Work Sans', sans-serif; font-weight: 300; letter-spacing:1px; font-size:20pt; width:100%; float:none}
.iam p {width:100%; text-align: center; padding:0px 0px 30px 0px}
.iam img {width:20px}
/*.user-types {width:49%; float:right}
.user-types ul {margin:0px 0px 0px 0px; padding:0px; width:100%; float:right;}
.user-types ul li {list-style-type:none; color:white; font-weight:700;font-family: Nexa, sans-serif; letter-spacing:2px; margin:0px 0px 40px 0px; line-height:30pt}
.user-types ul li a:link {color:white; font-weight:700; font-family: Nexa, sans-serif; letter-spacing:2px; cursor: pointer; padding-bottom:10px;}
.user-types ul li a:visited {color:white;}
.user-types ul li a:hover {color:white;}*/

.user-types {width:100%; float:none}
.user-types ul {margin:0px auto 0px auto; padding:0px; width:100%; text-align:center}
.user-types ul li {list-style-type:none; color:white; font-weight:700;font-family: Nexa, sans-serif; letter-spacing:2px; margin:0px 17px; line-height:30pt; display:inline-block;}
.user-types ul li a:link {color:white; font-weight:700; font-family: Nexa, sans-serif; letter-spacing:2px; cursor: pointer; padding-bottom:10px;}
.user-types ul li a:visited {color:white;}
.user-types ul li a:hover {color:white;}

.section-one {width:100%;}
.section-three {width:100%;}
.section-two {width:100%;}
.section-four {width:100%;}

.section-content {background-color:#f7f6f6; border-right:10px solid #eae9e9; float:right; width:80%; margin:80px 0px 0px 0px}
.section-inner {border-right:3px solid #eae9e9; margin-right:6px; padding:50px}
.section-image {background-repeat: no-repeat; background-size:cover; background-position: center center; width:80%; height:400px; float:right}
.section-title {float:left; height:342px; position:relative; width:20%; text-transform: uppercase; color:#006a92; font-weight:300; letter-spacing: 2px; font-size:20pt; margin:80px 0px 0px 0px}
.section-title div{transform-origin: top left 0; position:absolute; bottom:-25px; }
.section-title h2 {font-weight:300; letter-spacing: 2px; font-size:20pt;}
.section-title div img {width:20px}

.section-inner-title h2 {font-weight:300; letter-spacing: 2px; font-size:20pt; text-transform: uppercase; color:#565656; margin:0px 0px 20px 0px;}

.section-content .strap {color:#006a92; text-transform:uppercase; font-family: 'Open Sans', sans-serif; font-weight:300; letter-spacing:normal!important; margin:30px 0px}
.section-content .strap ul li:nth-child(1) {background-image:none; padding:0px}
.section-content .strap ul li {background-image:url('../layoutimages/bullet-blue-centre.png');background-repeat: no-repeat; background-position: left center; background-size:auto 15px; padding:0px 0px 0px 20px; font-size:11pt; }

#main a:link {color:#006a92; text-decoration: none; font-weight:700 }
#main a:visited {color:#006a92; text-decoration: none}
#main a:hover {color:#006a92; text-decoration: none}

#main h1 {color:#565656; margin:0px 0px 30px 0px; font-weight:300; font-size:20pt; text-transform: uppercase;}

#footer {min-height:300px; width:96%; margin:80px 2% 0px 2%; background-color:#006a92; text-align: center; position:relative; z-index:100;}
#footer .middle {width:98%; margin:0px 1%}
.footer-nav ul li {list-style-type:none; display:inline-block; margin:0px 2%; font-family: 'Work Sans', sans-serif; font-weight: 300; letter-spacing:1px; font-size:14pt}
.footer-nav ul {margin:0px; padding:30px 0px; text-transform: uppercase; width:100%; text-align: center}
.footer-nav ul li a:link {color:white; text-decoration: none;}
.footer-nav ul li a:visited {color:white; text-decoration: none;}
.footer-nav ul li a:hover {color:white; text-decoration: underline;}
.footer-nav li ul {display:none}

.footer-logo {width:300px; margin:30px auto 0px auto}
.footer-logo img {width:100%}
#footer .strap {font-size:12pt; float:left; width:100%; margin:0px 0px 20px 0px;}
.footer-bottom {padding:50px 0px 20px 0px}
.copy {color:white; text-decoration: none;float:left; width:40%; text-align: left; letter-spacing: 1px; font-family: 'Work Sans', sans-serif; font-weight: 300;}
.ojo {color:white; text-decoration: none;float:right; width:40%; text-align: right;letter-spacing: 1px; font-family: 'Work Sans', sans-serif; font-weight: 300;}
.ojo a:link {color:white;font-weight:500;}
.ojo a:visited {color:white}
.ojo a:hover {color:white;text-decoration: underline}


.contact-form {width:50%; float:left}
.contact-text {width:50%; float:left}
.contact-text-inner {margin:24px 0px 20px 0px;}

input[type="text"] {width:90%; background-color:white; border:none;  padding:20px; margin:0px 0px 20px 0px;;font-family: 'Open Sans', sans-serif; font-size:12pt; letter-spacing:1px; outline:0} 
.SStop {background:none!important; padding:0px!important; margin:0px!important; width:90%; outline:0}
textarea {width:90%; background-color:white; border:0; padding:20px;font-family: 'Open Sans', sans-serif;font-size:12pt; letter-spacing:1px; outline:0}
select {width:90%; background-color:white; border:0; padding:20px; margin:0px 0px 20px 0px; ;font-family: 'Open Sans', sans-serif;font-size:12pt; letter-spacing:1px; outline:0; background-image:url(../layoutimages/drop-down-arrow.png); background-repeat:no-repeat; background-position:center right 10px; background-size:auto; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
.asterix {color:#006a92; padding:0px 0px 0px 5px; font-size:11pt; vertical-align:top}

.blcc-send {background-color:white; border:1px solid #006a92; padding:20px 40px; color:#006a92; cursor:pointer; font-weight:700; font-family: 'Open Sans', sans-serif; font-size:12pt; float:right; margin:10px 10% 20px 0px; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.4);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.4); -webkit-appearance:none; -moz-appearance:none; }


.mobile-only {display:none}


/****************  TABLET VIEW - SMALLER VERSION OF DESKTOP ********************/

@media (min-width: 769px) and (max-width: 1023px){

    .slicknav_menu {display:block;}

    .fixed-menu {display:none;}
    .header {padding-top:0px;}
    .fixed-linked {display:none}

    .menu-btn {right:5px; top:3px;}
    .strap {font-size:14pt; }
    .strap ul li {padding:0px 17px 0px 43px}
    .strap ul li:nth-child(1) {padding:0px 17px 0px 10px;}
    .home-header {padding:50px 0px 0px 0px;}
    .iam p {width:100%; text-align:center; padding:0px;}
    .user-types {}
    .user-types ul {width:100%; text-align:left; margin:0px 0px 30px 0px;}
    .user-types ul li {margin:0px 0px 30px 0px}

    #footer {min-height:300px}
    .footer-nav ul li {margin:0px 4% 40px 0px; font-size:12pt}
    .footer-nav ul {padding:30px 0px 0px 0px}
    .footer-logo {margin-top:20px}

    .footer-bottom {padding:40px 0px 20px 0px;}
    #footer .strap {width:100%; float:none; margin:0px 0px 30px 0px;}
    .copy {width:50%}
    .ojo {width:50%}

    .section-content .strap {margin:30px 0px 20px 0px}
    .section-content .strap ul li{padding:0px 0px 0px 30px; display:block}
    .section-content .strap ul li:nth-child(1) {padding:0px 0px 0px 30px; background-image:url('../layoutimages/bullet-blue-centre.png');}
    .section-image {height:300px}

    .contact-form {width:100%; float:none;}
    .contact-text {width:100%; float:none;}

}

/****************  MOBILE VIEW WITH RESPONSIVE MENU ********************/

@media screen and (max-width: 768px) {

    .slicknav_menu {display:block;}
    .slicknav_menu {position:fixed!important; width:100%;}
    .fixed-linked {display:none}

    .fixed-menu {display:none;}
    .header {padding-top:60px;}
       
    .logo {width:80%; margin:0px 10%; clear:both;}
    .strap ul li {background:none; display:block; padding:0px; margin:0px 0px 10px 0px; font-size:11pt}
    .about {line-height:24pt; margin:20px auto 20px auto; width:90%;}
    .menu-btn {position:relative; right:auto; top:auto; width:100%; clear:both; height:96px}
    .c-hamburger {float:right; margin:0px 10px 0px 0px; right:0;}
    .header {display:block}

    .menu {top:0px}
    .menu a:link {line-height:26pt; font-size:14pt!important}
    .menu-inner {padding-top:20px}

    .home-tag {padding:0px 0px 20px 0px;}

    .home-header {padding:20px 0px 0px 0px}
    .diagonal-background {background:-webkit-linear-gradient(-201deg, #006a92, 65%, rgba(255,255,255,0) 65%); background:linear-gradient(-201deg, #006a92, 65%, rgba(255,255,255,0) 65%);}
    .home-middle8 {display:flex;}
    .home-middle8 .middle {margin:auto auto}
    .middle8content {width:100%; margin:auto auto; text-align:center; padding:0px}

    .iam {width:100%; float:none}
    .iam p {width:100%; text-align:center; padding:0px;}
    .user-types {width:100%; float:none;}
    .user-types ul {width:100%; text-align:center; margin:10px 0px 10px 0px;}
    .user-types ul li {margin:20px 0px}

    #footer {min-height:660px}
    .footer-nav ul li {margin:0px 0px 40px 0px; font-size:14pt; display:block}
    .footer-nav ul {padding:40px 0px 0px 0px}
    .footer-logo {margin-top:20px; width:90%}

    .footer-bottom {padding:40px 0px 20px 0px;}
    #footer .strap {width:100%; float:none; margin:0px 0px 50px 0px;}
    .copy {width:100%; float:none; text-align:center; margin:0px 0px 20px 0px}
    .ojo {width:100%; float:none; text-align:center}

    .section-content {width:100%;}
    .section-title {display:none;}
    .section-image {width:100%; height:150px;}
    .section-inner {padding:30px}

    .section-content .strap {margin:30px 0px 20px 0px}
    .section-content .strap ul li{padding:0px 0px 0px 30px; display:block; background-size:auto 20px; line-height:20pt;}
    .section-content .strap ul li:nth-child(1) {padding:0px 0px 0px 30px; background-image:url('../layoutimages/bullet-blue-centre.png');}

    .contact-form {width:100%; float:none;}
    .contact-text {width:100%; float:none; overflow-wrap: break-word;
  word-wrap: break-word;}
    input[type="text"] {width:92%}
    .blcc-send {float:left}

    .mobile-only {display:block}





}

.AddBasketError{display:block;color:red;text-align:left;margin-bottom:10px;font-size:10px!important;}