@font-face {
    font-family: LibreFranklin;
    font-display: swap;
    font-weight: normal;
    font-style: normal;
    src: url('/assets/LibreFranklin-Light.woff') format('woff');
}

@font-face {
    font-family: LibreFranklin;
    font-display: swap;
    font-weight: bold;
    font-style: bold;
    src: url('/assets/LibreFranklin-Regular.woff') format('woff');
}


html {
    box-sizing: border-box;
    font-size: 10px;
    height: 100%
}

body
{
	width:100%;
    min-height: 100%;
	position:relative;
}


* {
    box-sizing: inherit;
	font-family: 'LibreFranklin', sans-serif;
    font-weight:300;
	margin:0;
	padding:0;
}

b, strong {
    font-weight: 700
}
p
{
	line-height:150%;
    font-weight: 300;
    padding-bottom: 1rem
}

ul, ol {
    margin: 5px 20px 20px 20px
}

ul ul {
    margin-left: 15px
}

li {
    line-height: 150%
}

li * {
    margin: 0;
    padding: 0;
    line-height: inherit
}

hr
{
	border:0;
	height:1px;
	background:#009BD4;
	margin:10px 0;
}

a
{
}


.layout
{
	width:800px;
	position:relative;
	margin:0 auto;
    max-width:100%;
    padding: 63px 20px 0 20px;
}

.layout img {
    max-width: 100%
}

.navigation
{
    width: 800px;
    max-width: 100%;
	position: relative;
	margin:0 auto;
    z-index: 31;
    padding: 21px 0 0 20px;

}

.nav a
{
	display:inline-block;
    color: #777777;
    font-weight: 700;
    padding: 3px 0 3px 21px;
    margin: 0 0 10px 10px;
	text-decoration:none;
    font-size:80%;
    text-transform: uppercase;
    border-bottom: 1px solid #eaeaea;
    border-right:0;
    border-top:0
}

.nav a:hover, a.active
{
border-bottom: 1px solid #777777;
}


.nav
{
    position: relative;
    padding: 10px 30px 0 0;
    text-align: right;
    float: right;
    max-width: 60%
}


.logo
{
	display: inline-block;
    position: relative;
    width: 150px;
    max-width: 30%;
    margin: 10px 0 20px;
    height: auto;
    transition: all ease .2s;

}

.fixed {
    position: fixed;
    z-index: 32;
    transition: all ease .2s;
}

.fixed .navigation {
    padding-bottom:10px
}


.banner {
    width: 100%;
    overflow: hidden;
    position: relative;
    top: 10px;
    height: 18vw;
    min-height:130px;
    z-index: 30;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.banner .inner {
    width: 800px;
    max-width:100%;
    margin: 0 auto;
    position: absolute;
    top: 20%;
    left: 0;
    right: 0;
    z-index: 150;
}

.banner h1 {
    padding: 1vw !important;
    text-align: right;
    position: relative;
    right: 20px;
    display: inline-block;
    float: right;
    background: #fff;
    color: #000;
    font-weight:300;
    font-size: 100%;
    min-width: 30%;
    width: 30%

}

h1
{
	font-weight:700;
	color: #777777;
	margin: 0 0 15px;
    font-size: 200%;
}

h2
{
	font-size:130%;
	color:#000;
	font-weight:700;
	margin:0 0 10px;
}

h3
{
	font-size:130%;
    color: #666;
    font-style: italic;
	font-weight:700;
	margin:0 0 10px;
}



.standard, .gallery, .product {
    margin-bottom: 15px;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 15px;
}

.standard img {
    max-width: 800px;
    display: inline-block;
}

.standard .image {
    float: left;
}

.standard .image img {
    display: inline-block;
    margin-right: 30px
}
.img_right {float: right}
.productbox {float: left;}

.galwrap {
	width: 109%;
	margin-left: -3%;
}
.gallery .gal{
    display: inline-block;
    margin: 0 0 2% 2%;
    width: 29%;
    cursor: pointer;

}
.gallery img {
    width: 100%;
    }


.clear
{
	clear:both;
    height: 0px;
}

blockquote{
  display:block;
  background: #fff;
  padding: 15px 20px 0px 45px;
  margin: 0 0 20px;
  position: relative;

  color: #666;
  font-weight: 700;
  text-align: justify;

  border-left: 15px solid #133C7E;
  border-right: 2px solid #133C7E;;

  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 15px #ccc;
}

blockquote * {
    font-weight: inherit
}

blockquote::before{
  content: "\201C";
  /*Font*/
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: #999;
  position: absolute;
  left: 10px;
  top:5px;
}

.shop .fa-shopping-cart {
    height: 30px;
    width: 30px;
    font-size: 14px;
    right: 0;
    margin-left: 15px;
    top: -3px;
    cursor:pointer;
    position: relative;
    background: #133c7e;
    color: white;
    text-align: center;
    border-radius: 30px;
    display: inline-block;
    line-height: 30px !important;
}

.pform .price {
    color: #133c7e;
    margin: 0px 15px 0 0;
    white-space: nowrap
}

.cartloader  {
    position: fixed;
    right: 0;
    height: 100%;
    width: 200px
}

.row {
    display: flex;
    margin-bottom: 5px
}

.total {font-weight: bold }

.row {
    border-bottom: 1px solid #eaeaea
}

.carttable {
    width: 98%
}

.carttable .cart_price, .carttable .cart_quantity, .carttable .subtotal {
    flex-basis: 70px;
    flex-grow: 0;
}
.carttable textarea {
    width: 100%;
    display: block;
    margin-bottom: 5px;
}

.right {
    text-align: right
}

.loginform {
    border: 1px solid #eaeaea;
    padding: 15px;
    margin-top:30px;
}

.loginform input:not([type='submit']), select {
    display: inline-block;
    width: 100%;
    font-size:120%;
    padding: 3px;
    margin-bottom: 10px
}


.row > div {
    padding: 5px 5px 5px 0;
    flex-grow: 1
}

.cartpreviewtable  {
    z-index: 10000
}
.cartpreview  {
    position: relative;
    margin: 10px 0 ;
   width: 300px;
    padding: 10px;

    border: 1px solid #eaeaea;
}

.cartpreview .items {
    font-weight:700;
    display: inline-block;
    padding-right: 10px
}

.boxright {
    margin-top: 1px;
}
.pform .price span {
    font-weight: 700;
    display: inline-block;
    font-size: 120%;
    color: #133c7e;
    white-space: nowrap;
    font-family: Campton, sans-serif;
}

.pricebox {
    flex-grow: 1
}
.pform {
    max-width: 100%;
    width: 300px;

    background: #eaeaea;
    padding: 10px 10px 2px 10px;
    display: flex;
    margin-bottom: 5px
}
input[name=quantity] {
    font-size: 100%;
    position: relative;
    width: 60px;
    text-align: right;
    border: 0;
    padding: 6px;
    font-weight: 700;
    background: #fff;
    display: inline-block;
    height: auto;
    margin-top: -6px;
}



.footer
{
	font-size:12px;
	color:#fff;
	line-height:140%;
	padding:40px 0;
    position: relative;
    width: 100%;
    overflow: hidden;
   }

.footer .inner {
    width: 800px;
    padding-left: 20px;
    margin: 0 auto;
    max-width: 100%;
    position: relative;
}


.footer *
{
	font-size:12px;
	color: #666;
    font-weight: 700;
}

.button {
	box-shadow:inset 0px -3px 7px 0px #29bbff;
	background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
	background-color:#2dabf9;
	border-radius:3px;
	border:0;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	padding:9px 23px;
	text-decoration:none;
	text-shadow:0px 1px 0px #263666;
}
.button:hover {
	background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
	background-color:#0688fa;
}
.button:active {
	position:relative;
	top:1px;
}





@media (min-width: 800px) {
    html {
        font-size: 14px;
    }
    .banner h1 {
        font-size: 140%;
    }

    .loginform {
        width: 48%;
        margin-right: 2%;
        float: left;
    }

}