/* Font sizes */
body{
  font-size: 14px;
  line-height: 16px;
  font-family: 'Open Sans', sans-serif;
}

h1{
	font-size: 230%;
	line-height: 100%;
	margin-bottom: 0.5em;
}

h2{
	font-size: 150%;
	line-height: 100%;
	margin-bottom: 1em;
}

h3{
	font-size: 180%;
	line-height: 100%;
}

h4{
	font-size: 160%;
	line-height: 100%;
}

h5{
	font-size: 125%;
	line-height: 100%;
}

p{
	line-height: 1.3em;
	margin-bottom: 0.5em;
}

footer p{
	font-size: 90%;
}
/* End of font sizes */

header{
	width: 85%;
	height: auto;
	margin: 10px 7.5% 30px;
	display: flex;
	flex-flow: row no-wrap;
}

#logo{
	width: auto;
	height: 110px;
}

nav{
	width: 88%;
	margin-left: 3%;
	display: flex;
	align-items: center;
}

nav ul{
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	list-style-type: none;
}

.active a{
	color: #79C8CC;
	border: 1px solid #79C8CC;
	padding: 5px 2px;
}

nav li{
	text-transform: uppercase;
	display: inline;
	padding: 5px 2px;
	margin-right: 12px;
	font-weight: bold;
}

nav li a{
	text-decoration: none;
	color: #000;
}

nav li a:hover{
	color: #79C8CC;
	border: 1px solid #79C8CC;
	padding: 5px 2px;
}

.content{
	width: 85%;
	margin: 0 7.5% 20px;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

.page-title{
	display: flex;
	width: 100%;
	height: 120px;
	background-color: #4B4A4A;
	margin-bottom: 30px;
	overflow: hidden;
}

.page-image{
	width: auto;
	height: 90px;
	padding: 40px 30px;
	background-color: #79C8CC;
	align-self: center;
}

.title-background{
	color: #79C8CC;
	padding: 20px 5px 0 20px;
}

.title-background h1{
	text-transform: uppercase;
	font-weight: bold;
	margin-bottom: 0;
}

.title-background h2{
	text-transform: uppercase;
	font-weight: bold;
	font-size: 125%;
}

.social .title-background h1{
	text-transform: none;
}

.left-column{
	width: 100%;
}

.right-column{
	width: 30%;
}

.section-image{
	width: 100%;
	margin-bottom: 30px;
}

.graph{
	width: 60%;
	margin: 0 20%;
	margin-bottom: 20px;
}

.left-column p{
	margin-bottom: 20px;
}

.content ul{
	list-style-type: disc;
}

.content li{
	margin: 0 0 15px 15px;
}

.home-page-image {
	float: right;
	margin: 0 0 5px 10px;
}

.flex{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	width: 100%;
	
}

.flex1, .flex2, .flex3, .flex4, .flex5, .flex6{
	background-color: #4B4A4A;
	width: 32%;
	display: table;
	height: 200px;
	overflow: hidden;
	margin-bottom: 20px;
}

.flex1:hover, .flex2:hover, .flex3:hover, .flex4:hover, .flex5:hover, .flex6:hover{
	background-color: #79C8CC;
}

.flex1:hover p, .flex2:hover p, .flex3:hover p, .flex4:hover p, .flex5:hover p, .flex6:hover p{
	display: none;
}

.flex1 p, .flex2 p, .flex3 p, .flex4 p, .flex5 p, .flex6 p{
	color: #79C8CC;
	line-height: 180%;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	padding: 0 20px;
}

.flex1 img, .flex2 img, .flex3 img, .flex4 img, .flex5 img, .flex6 img{
	display: none;
	width: 40%;
	padding: 26% 30%;
}

.flex1:hover img, .flex2:hover img, .flex3:hover img, .flex4:hover img, .flex5:hover img, .flex6:hover img{
	display: block;
	width: 40%;
	height: 23% 30%;
}

.dropdown1, .dropdown2, .dropdown3{
	position: relative;
	width: 98%;
	display: block;
	padding-left: 55px;
	margin-top: 30px;
	margin-bottom: 20px;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.dropdown1 h2:before, .dropdown2 h2:before, .dropdown3 h2:before{
	position: absolute;
	top: ;
	left: 0px;
    height: 20px;
	width: 35px;
	padding: 20px 10px;
	background-image: url(/media/design/bag.png);
	background-size: 30px 40px;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #79C8CC;
	content: " ";
}

.dropdown1 h2, .dropdown2 h2, .dropdown3 h2{
	width: calc(100% - 55px);
	padding-left: 20px;
	line-height: 260%;
	background-color: #4B4A4A;
	color: #79C8CC;
	height: 60px;
	cursor: pointer;
	overflow: hidden;
}

.dropdown1 h2 a, .dropdown2 h2 a, .dropdown3 h2 a{
	color: #79C8CC;
	text-decoration: none;
}

.dropdown1 p, .dropdown2 p, .dropdown3 p{
	display: none;
	width: calc(100% - 55px);
	background-color: #79C8CC;
	color: #000;
	padding: 15px 10px;
	margin-bottom: 2px;
	-moz-user-select: -moz-all;
	-khtml-user-select: all;
	-webkit-user-select: all;
	-ms-user-select: all;
	user-select: all;
}

.price-box{
	position: relative;
    width: 98%;
    display: block;
    padding-left: 50px;
    margin-top: 30px;
    margin-bottom: 20px;
    background-color: #4B4A4A;
}

.price-box p{
	height: 30px;
    line-height: 24px;
    padding-left: 20px;
    margin-bottom: 0;
    color: #79C8CC;
}

.price-box h3{
	padding-left: 20px;
	background-color: #4B4A4A;
	color: #fff;
	height: 30px;
}

#logistics2:before, #wholesale:before, #logistics3:before, #logistics4:before{
	position: absolute;
	left: 0px;
    height: 20px;
	width: 35px;
	padding: 20px 10px;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #79C8CC;
	content: " ";
}

#logistics2:before{
	background-size: 30px 30px;
	background-image: url(/media/design/logistics2.png);
}

#wholesale:before{
	background-size: 30px 30px;
	background-image: url(/media/design/logistics5.png);
}

#logistics3:before{
	background-size: 30px 30px;
	background-image: url(/media/design/logistics3.png);
}

#logistics4:before{
	background-size: 30px 30px;
	background-image: url(/media/design/logistics4.png);
}

.social{
	margin-bottom: 20px;
}

.social-title{
	display: flex;
	width: 100%;
	height: 30px;
	background-color: #4B4A4A;
	overflow: hidden;
}

.social .social-title h1{
	font-size: 150%;
	line-height: 18px;
}

#tag, #empty{
	align-self: center;
	width: 7%;
	padding: 30px 10px;
	background-color: #79C8CC;
}

form {
	max-width: 500px;
}

form p {
    clear: both;
}

form input, form textarea {
    float: right;
}

form input[type="text"] {
    width: 60%;
}

form textarea {
	font-family: 'Open Sans', sans-serif;
    font-size: 95%;
    margin-bottom: 1em;
    width: 75%;
}

footer{
	width: 85%;
	background-color: #4B4A4A;
	padding: 30px 7.5%;
	color: #fff;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}

footer .active{
	padding: 2px 1px;
}

footer li{
	margin-bottom: 10px;
}

footer li:last-child{
	margin-bottom: 0;
}

footer a{
	text-decoration: none;
	color: #fff;
}

.links{
	width: 30%;
}

.trademark{
	width: 40%;
	text-align: right;
}

.m-nav, #h-open, #h-close{
	display: none;
}

.w-para{
/*	width: 50%;*/
	line-height: 130%;
}

.clear{
	clear: both;
}