html, body {margin: 0; padding: 0; font-family: 'GothamMedium'; font-size: 12px; width: 100%; height: 100%; color: #575757;}

.clear {clear: both;}

a {color: #000; text-decoration: none;}
a:hover {text-decoration: none; }
#wrap {max-width: 1600px; margin: 0 auto; position: relative; width: 100%;}
.inline-container {width: 80%; margin: 0 auto;}

#header {position: absolute; top: 0; left: 0; width: 100%; z-index: 4;}
.header-inner {padding: 40px 5% 40px 4%; position: relative;}
.logo {position: absolute; top: 40px; right: 40px;}
.logo img {max-width: 100%; height: auto;}

.back-to-top {display: none; cursor: pointer; z-index: 10; width: 40px; height: 40px; position: fixed; right: 5px; bottom: 5px; background: url('../img/back-to-top.png') no-repeat center center;}

.lang-container {position: absolute; top: -20px; left: 40px;}

#navigation {position: relative;}
#navigation ul {list-style: none;}
#navigation li {float: left; font-family: 'LatoBold'; font-size: 15px; margin-right: 10%; text-transform: uppercase;}
#mnavigation-button {background: url('../img/mobile-button-menu.png') no-repeat 0 0; width: 25px; height: 20px; margin-left: 20px; display: none; cursor: pointer;}
#mnavigation {width: 100%; height: 100%; background: url('../img/transparent-white-bg.png') repeat 0 0; position: fixed; z-index: 11; top: 0; left: 0; display: none;}
#mnavigation ul {list-style: none; padding: 15% 5%;}
#mnavigation li {border-bottom: 1px solid #000; font-size: 20px; padding: 10px 0; text-transform: uppercase;}
#close-menu-button {width: 25px; height: 25px; background: url('../img/close-menu-button.png') no-repeat 0 0; position: absolute; top: 20px; left: 20px; cursor: pointer;}

.section img {max-width: 100%; height: auto;}

#section-home-1 {position: relative; z-index: 2;}
#section-home-1 .text-container {position: absolute; left: 50%; width: 280px; text-align: left; top: 25%;}
#section-home-1 .text-container .title {color: #120aa6; font-family: 'LatoRegular'; font-size: 25px; margin-bottom: 15px; text-transform: uppercase;}
#section-home-1 .text-container .content {font-style: italic; color: #737c85;}
#section-home-1 .text-container .button {color: #FFF; background-color: #e36887; border: 1px solid #e36887; font-style: normal; padding: 10px 20px;}
#section-home-1 .text-container .button:hover {background: transparent; color: #e36887;}

#section-home-2 {background: url('../img/custom-bg-1.png') #fffaea repeat top center; margin-top: -110px; padding-top: 110px; position: relative;}
#section-home-2 .left {float: left; width: 40%; text-align: center; padding: 1%;}
#section-home-2 .right {float: left; width: 60%; padding: 1%;}
#section-home-2 .title {font-family: 'LatoRegular'; font-size: 32px; color: #89b535; letter-spacing: 10px; margin-bottom: 15px; text-transform: uppercase}
#section-home-2 .subtitle {font-family: 'GothamBold'; font-size: 15px; text-transform: uppercase; margin-bottom: 15px;}
#section-home-2 .title2 {font-family: 'LatoRegular'; font-size: 55px; letter-spacing: 5px; line-height: 1.1em; margin-bottom: 15px;}
#section-home-2 .title-container {margin-top: 115px; padding-bottom: 70px; width: 50%;}
#section-home-2 #home-img-1 {position: absolute; bottom: -180px; right: 5%;}

#section-home-3 {background: url('../img/window-purple-big.jpg') no-repeat top right; background-size: cover; padding-top: 120px; padding-bottom: 80px;}
#section-home-3 .left {float: left; width: 45%;}
#section-home-3 .right {float: left; width: 55%; padding-left: 30px;}
#section-home-3 .title {font-family: 'LatoRegular'; font-size: 32px; color: #FFF; margin-bottom: 15px;}
#section-home-3 .content {font-size: 17px; color: #FFF;}
#section-home-3 .content ul {padding-left: 20px;}
#section-home-3 .button {font-family: 'Arial'; color: #62659b; font-size: 14px; padding: 10px 20px; background-color: #FFF; border: 1px solid #FFF;}
#section-home-3 .button:hover {background-color: transparent; color: #FFF;}

#section-home-4 {background: url('../img/custom-bg-1.png') #eaffed repeat top center; margin-top: 0; padding-top: 110px; position: relative;}
#section-home-4 .inline-container {position: relative;}
#section-home-4 img {width: 75%;}
#section-home-4 .right {position: absolute; right: 0; top: 70px; width: 50%;}
#section-home-4 .title {font-family: 'LatoRegular'; font-size: 55px; letter-spacing: 5px; line-height: 1.1em; margin-bottom: 15px;}

#section-home-5 {background: url('../img/home-bg-3.jpg') no-repeat top right; background-size: cover; padding-top: 40px; color: #FFF;}
#section-home-5 .inline-container {position: relative;}
#section-home-5 .content {position: relative;}
#section-home-5 .doctor-pet {text-align: center; margin-bottom: 50px;}
#section-home-5 .cat-and-dog-milk {text-align: center; width: 90%;}
#section-home-5 .cat-and-dog-milk img {width: 75%;}
#section-home-5 .title {font-size: 26px;}
#section-home-5 .text-container-left {position: absolute; width: 25%; left: 0; top: 0; text-align: right;}
#section-home-5 .text-container-right {position: absolute; width: 25%; right: 0; top: 0;}
#section-home-5 .button {font-family: 'Arial'; color: #62659b; font-size: 14px; padding: 10px 20px; background-color: #FFF; border: 1px solid #FFF;}
#section-home-5 .button:hover {background-color: transparent; color: #FFF;}
#section-home-5 .features div {margin-bottom: 10px;}
#section-home-5 .text-container-left .digestive {background: url('../img/icon-digestive.png') no-repeat right top; background-size: contain;}
#section-home-5 .text-container-left .prebiotic {background: url('../img/icon-prebiotic.png') no-repeat right top; background-size: contain;}
#section-home-5 .text-container-left .lactose {background: url('../img/icon-lactose.png') no-repeat right top; background-size: contain;}
#section-home-5 .text-container-left .features div {padding-right: 20%;}
#section-home-5 .text-container-right .digestive {background: url('../img/icon-digestive.png') no-repeat left top; background-size: contain;}
#section-home-5 .text-container-right .prebiotic {background: url('../img/icon-prebiotic.png') no-repeat left top; background-size: contain;}
#section-home-5 .text-container-right .lactose {background: url('../img/icon-lactose.png') no-repeat left top; background-size: contain;}
#section-home-5 .text-container-right .features div {padding-left: 20%;}
#section-home-5 .cat-milk-image, #section-home-5 .dog-milk-image {display: none;}

#section-home-6 {background: url('../img/home-bg-4.jpg') no-repeat top right; background-size: cover; padding-top: 90px; color: #FFF; padding-bottom: 60px;}
.canned-food-left {float: left; width: 55%;}
.canned-food-right {float: left; width: 40%; padding-left: 5%;}
.canned-food-title {font-size: 29px; font-family: 'LatoRegular'; margin-bottom: 15px;}
.canned-food-desc ul {padding-left: 0;}
.canned-food-desc li {line-height: 2.0em;}

#section-home-7 {background: url('../img/home-bg-5.jpg') no-repeat top right; background-size: cover; padding-top: 90px; color: #FFF; padding-bottom: 60px;}
.cat-food-desc {text-align: center; width: 90%; max-width: 650px; margin: 0 auto; margin-bottom: 50px;}
.cat-food-left {float: left; width: 45%; padding-right: 5%;}
.cat-food-right {float: right; width: 50%;}
.cat-food-title {font-family: 'LatoRegular'; font-size: 27px; margin-bottom: 30px;}
.cat-food-benefit {list-style: none; padding-left: 0;}
.cat-food-benefit li {margin-bottom: 20px;}
.cat-food-benefit li img {width: 40px;}
.cat-food-benefit-icon {float: left; width: 60px;}
.cat-food-benefit-desc {overflow: hidden;}

#section-product-1 {padding-top: 20%; background: url('../img/custom-bg-1.png') #fffaea repeat top center; position: relative;}
#section-product-1 .title {font-family: 'LatoRegular'; font-size: 55px; letter-spacing: 5px; line-height: 1.1em; margin-bottom: 15px;}
#section-product-1 .title-container {padding-bottom: 70px; width: 50%;}
#section-product-1 #product-img-1 {position: absolute; bottom: -150px; right: 5%;}
#section-product-1 .content ul {padding-left: 20px;}
.section-product-item {color: #FFF; padding-top: 70px; padding-bottom: 70px;}
.section-product-item-milk {padding-bottom: 10px;}
.product-item-left {float: left; width: 55%; padding: 2%; text-align: center;}
.product-item-right {float: right; width: 45%; padding: 2%;}
.section-product-item.blue .product-item-left {float: right;}
.section-product-item.blue .product-item-right {float: left;}
.product-item-title {font-size: 32px; font-family: 'LatoRegular'; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 5px;}
.product-item-image-mobile {display: none; text-align: center; margin-bottom: 20px;}
.product-item-image-mobile img {width: 65%; max-width: 100%; height: auto;}
.product-item-desc {margin-bottom: 40px;}
.product-item-desc p {margin-bottom: 20px;}
.feature-item {float: left; width: 20%; text-align: center; padding: 1%;}
.feature-item-image {margin-bottom: 10px;}
.feature-item-image img {max-width: 100%; height: auto;}
.feature-item-desc {font-family: 'Arial'; font-size: 10px;}
.product-item-button {margin-bottom: 40px;}
.product-item-button a {background: #FFF; color: #62659b; padding: 10px 20px; text-align: center; text-transform: uppercase; border: 1px solid #FFF;}
.product-item-button a:hover {background: transparent; color: #FFF;}
.product-item-feature {margin-bottom: 40px;}

#section-product-2 {padding-top: 20%; background: url('../img/custom-bg-1.png') #fff repeat top center; position: relative;}
#section-product-2 .title {font-family: 'LatoRegular'; font-size: 55px; letter-spacing: 5px; line-height: 1.1em; margin-bottom: 15px;}
#section-product-2 .left {float: left; width: 45%;}
#section-product-2 .right {float: left; width: 55%;}

.section-product-item-milk .feature-item {text-align: left; padding-left: 45px; width: 33%; margin-bottom: 15px;}
.section-product-item-milk #feature-item-digestive {background: url('../img/icon-digestive.png') no-repeat left top; background-size: 30px;}
.section-product-item-milk #feature-item-prebiotic {background: url('../img/icon-prebiotic.png') no-repeat left top; background-size: 35px;}
.section-product-item-milk #feature-item-lactose {background: url('../img/icon-lactose.png') no-repeat left top; background-size: 40px;}

.how-to-use {margin-top: 20px;}
.how-to-use legend{font-family: 'LatoRegular'; font-size: 32px; color: #FFF; border: 0; text-transform: uppercase; letter-spacing: 4px;}
.step-item {float: left; width: 33%; padding: 2%;}
.step-item-image {margin-bottom: 15px;}
.step-item-title {font-family: 'LatoRegular'; font-size: 25px; margin-bottom: 10px;}

#section-event-1 {padding-top: 20%; background: url('../img/custom-bg-1.png') repeat top center; text-align: center;}
#section-event-1 .inline-container {position: relative; background: url('../img/cat-face.jpg') no-repeat top center; background-size: cover; padding: 5% 10%;}
/*#section-event-1-text-container {position: absolute; text-align: center; top: 20%; left: 0; width: 100%; padding: 0 30%;}*/
#section-event-1 .title {font-family: 'LatoRegular'; font-size: 28px; color: #FFF; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 30px;}
#section-event-1 .content {margin-bottom: 60px; color: #FFF;}
#section-event-1 .button {background: #FFF; padding: 10px 20px; text-transform: uppercase; font-family: 'Arial'; font-size: 15px; color: #62659b;}

.event-item {float: left; width:33.33333%; position: relative; height: 100%; padding: 5%;}
.event-item:before {content: ""; display: block; padding-top: 100%;}
.event-item-inner{position: absolute; top: 0; left: 0; bottom: 0;	right: 0;}
.event-item-image {overflow: hidden; height: 100%; padding: 10% 5%; margin-bottom: 20px;}
.event-item-name {color: #FFF; font-size: 14px; text-transform: uppercase;}

#section-event-2 {background: url('../img/custom-bg-1.png') repeat top center; text-align: center; padding: 20% 10% 0 10%; margin-bottom: 60px;}
#section-event-2 .title, #section-event-video .title {font-family: 'LatoRegular'; font-size: 28px; color: #89b535; letter-spacing: 5px; text-transform: uppercase; margin-bottom: 30px; text-align: center;}
.event-photo-container {width: 100%; overflow: hidden; position: relative;}
.event-photo-item {float: left; width:33.33333%; position: relative; height: 100%; padding: 5%;}
.event-photo-item:before {content: ""; display: block; padding-top: 100%;}
.event-photo-item-inner{position: absolute; top: 0; left: 0; bottom: 0;	right: 0;}
.event-photo-item-image {overflow: hidden; height: 100%; padding: 10% 5%;}

.event-video-item {float: left; width: 50%; padding: 2%; margin-bottom: 20px;}

#section-footer-1 {background: url('../img/custom-bg-1.png') repeat top center; padding-top: 10%; padding-bottom: 50px; position: relative;}
#section-footer-1 .left {float: left; width: 50%;}
#section-footer-1 .right {float: left; width: 50%;}
#section-footer-1 .title {font-family: 'LatoRegular'; font-size: 55px; margin-bottom: 15px; letter-spacing: 5px; line-height: 1.1em;}
.social-container {
	-webkit-border-radius: 10px; 
	-moz-border-radius: 10px; 
	border-radius: 10px; 
	background-color: #734287;
	background-image: -webkit-gradient(linear, top, bottom, from(#af86c1), to(#69387e));
	background-image: -webkit-linear-gradient(top, #af86c1, #69387e);
	background-image: -moz-linear-gradient(top, #af86c1, #69387e);
	background-image: -o-linear-gradient(top, #af86c1, #69387e);
	background-image: linear-gradient(#af86c1, #69387e);
	position: absolute; right: 5px; top: 25%; padding: 10px 0px 5px 5px;
}

#section-footer-3 {background: url('../img/custom-bg-1.png') #fff0ea repeat top center; position: relative; padding: 250px 0;}
#section-footer-3 #footer-img-3 {position: absolute; top: 20%; right: 5%;}
#section-footer-4 {position: relative; z-index: 2; margin-top: -150px; background: url('../img/footer-bg-big.png') no-repeat top right; background-size: cover; padding-top: 150px; padding-bottom: 50px; color: #737c85;}
#section-footer-4 .main-title {text-align: center; font-family: 'LatoRegular'; font-size: 28px; color: #1ec2da; text-transform: uppercase; letter-spacing: 7px; margin-bottom: 40px;}
#section-footer-4 .footer-col {float: left; width: 33%; padding: 0 5%;}
#section-footer-4 .footer-col .title {text-transform: uppercase; font-family: 'Arial'; font-size: 13px; letter-spacing: 3px; margin-bottom: 10px;}
#section-footer-4 .footer-col .line-decoration {height: 2px; background-color: #a2cfcc; width: 30px; margin-bottom: 10px;}
#section-footer-4 .info-container {margin-bottom: 40px;}
#section-footer-4 .bottom-line {height: 2px; background-color: #1ec2da; margin-bottom: 20px;}

#copyright {float: left; margin-left: 5%; text-transform: uppercase; font-size: 10px;}
#designby {float: right; margin-right: 5%; text-align: right; text-transform: uppercase; font-size: 10px;}