@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: VAG Rounded Light;
    font-weight: 100;
    src: url(fonts/VAG-Rounded-Light.ttf);
}

@font-face {
    font-family: VAG Rounded Bold;
    font-weight: 100;
    src: url(fonts/VAG-Rounded-Bold.ttf);
}

@font-face {
    font-family: FuturaBT-Medium;
    font-weight: 100;
    src: url(fonts/FuturaBT-Medium.otf);
}

*,
*:before,
*:after,
*:hover,
*:active,
*:focus {
    outline: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    transition: 1s all ease-in-out;
}

button {
    outline: 0;
}


blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}

input,
button {
    background: transparent;
    border: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    cursor: pointer;
}

textarea,
input[type="text"],
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="search"],
input[type="password"] {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}

input[type="search"] {
    -webkit-appearance: textfield;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

small,
sup,
sub {
    font-size: 80%;
}

sup {
    vertical-align: super;
}

sub {
    vertical-align: sub;
}

del,
strike,
s {
    text-decoration: line-through;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

html {
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 0;
}

html, 
body {
	margin: 0;
	padding: 0;
	background: #abd3f6 url("images/background-main.jpg") no-repeat fixed center;
	background-size: cover;
	font-family: VAG Rounded Light;
	font-size: 24px;
	color: #002790;
	letter-spacing: 1px;
	-moz-text-size-adjust: inherit;
	-webkit-text-size-adjust: inherit;
	text-size-adjust: inherit;
	-webkit-overflow-scrolling: auto;
	overflow-x: hidden;
	overflow-y: scroll;
}

body {
	position: fixed;
	width: 100%;
	height: 100%;
}

body:before {
	content: "";
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -10;
	background: url("images/background-main.jpg") no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

b,
strong {
	font-family: VAG Rounded Bold;
}

a {
	color: #002790;
}

a:hover {
	text-decoration: none;
}

img {
	border: 0;
}

.alignleft {
	float: left;
	padding: 0 10px 10px 0;	
}

.alignright {
	float: right;
	padding: 0 0 10px 10px;	
}

.aligncenter {
	text-align: center;
	margin: 0 auto;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
 
.clearfix:after {
  clear: both;
}
 
.clearfix {
  zoom: 1; /* for IE 6 and 7 */
}

.anchor {
	margin-top: -100px !important;
}

#content {
	zoom: 1;
    -moz-transform: scale(1);
}

/*****************************************/
/* ANIMATIONS */
/*****************************************/

.to-animate.fade-in {
	opacity: 0;
}

.animate.fade-in {
	opacity: 1;
}

.to-animate.slide-left {
	left: -100px !important;
}

.animate.slide-left {
	left: 0 !important;
}

.to-animate.slide-right {
	right: -100px !important;
}

.animate.slide-right {
	right: 0 !important;
}

.to-animate.slide-up {
	margin-top: 100px !important;
}

.animate.slide-up {
	margin-top: 0 !important;
}

.to-animate.slide-down {
	margin-top: -100px !important;
}

.animate.slide-down {
	margin-top: 0 !important;
}

/*****************************************/
/* TO TOP */
/*****************************************/

#to-top {
    position: fixed;
    display: none;
    bottom: 5px;
    right: 5px;
    font-size: 50px;
    border: none;
    outline: none;
    background-color: #AE531D;
    color: #fff;
    cursor: pointer;
    padding: 10px 5px;
    border-radius: 4px;
    text-decoration: none;
    height: 40px;
    line-height: 1;
    z-index: 99;
}

#to-top:hover {
    background-color: #6A2805;
}

/*****************************************/
/* LOGO */
/*****************************************/

#logo {
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0 0 0 -256px;
}

/*****************************************/
/* COMMON */
/*****************************************/

.green-text {
	color: #339966;
}

.cutting-board-rectangle {
	width: 796px;
	height: 255px;
	background: url("images/cutting-board-rectangle.png") no-repeat;
	display: table;
}

.cutting-board-circle {
	width: 418px;
	height: 414px;
	background: url("images/cutting-board-circle.png") no-repeat;
	display: table;
}

.cutting-board-square {
	width: 321px;
	height: 340px;
	background: url("images/cutting-board-square.png") no-repeat;
	display: table;
}

.cutting-board-rectangle h2,
.cutting-board-circle h2,
.cutting-board-square h2 {
	font-family: VAG Rounded Bold;
	font-size: 90px;
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}

.cutting-board-square h2 {
	font-size: 77px;
}

/*****************************************/
/* DESKTOP NAVIGATION */
/*****************************************/

#desktop-navigation {
	position: absolute;
	top: 100px;
	right: 0;
	margin: 0 50px 0 0;
	z-index: 999999;
}

#desktop-navigation ul li {
	position: relative;
	display: inline-block;
}

#desktop-navigation ul li a {
	padding: 10px 15px;
	font-family: VAG Rounded Bold;
	font-size: 24px;
	color: #fff;
	background: #002790;
	border-radius: 30px;
	text-decoration: none;
}

#desktop-navigation li ul {
	position: absolute;
	top: -999em;
	margin-left: -1px;
	width: 103px;
	display: none;
	z-index: 9999999;
}

#desktop-navigation li:hover ul {
	top: 38px;
	left: 0;
	width: 224px;
	padding: 0px;
	display: block;
}

#desktop-navigation li ul li a {
	width: 224px;
	font-family: VAG Rounded Bold;
	font-size: 24px;
	color: #002790;
	background: transparent;
	border-radius: 0;
	border-bottom: 1px solid #002790;
	text-align: center;
	display: block;
}

#desktop-navigation li ul li a:hover {
	color: #000;
}

#desktop-navigation li ul li.no-border a {
	border: 0;
}

/*****************************************/
/* MOBILE NAVIGATION BUTTON */
/*****************************************/

#mobile-navigation-button {
    position: absolute;
    top: 140px;
    left: 80%;
    width: 80px;
    height: 80px;
    background: transparent;
    cursor: pointer;
    display: none;
}

#mobile-navigation-button span {
    position: relative;
    width: 80px;
    padding: 	5px 0;
    background-color: #002790;
    display: block;
}

#mobile-navigation-button span:before {
    position: absolute;
    top: -20px;
    width: 100%;
    padding: 	5px 0;
    content: "";
    background-color: #002790;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
    display: block;
}

#mobile-navigation-button span:after {
    position: absolute;
    top: 20px;
    padding: 	5px 0;
    width: 80px;
    content: "";
    background-color: #002790;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
    display: block;
}

#mobile-navigation-button.active span {
    background-color: transparent;
}

#mobile-navigation-button.active span:before {
    -webkit-transform: translateY(20px) rotate(-45deg);
    -moz-transform: translateY(20px) rotate(-45deg);
    transform: translateY(20px) rotate(-45deg);
    border-radius: 0;
    background-color: #002790;
}

#mobile-navigation-button.active span:after {
    -webkit-transform: translateY(-20px) rotate(45deg);
    -moz-transform: translateY(-20px) rotate(45deg);
    transform: translateY(-20px) rotate(45deg);
    border-radius: 0;
    background-color: #002790;
}

/*****************************************/
/* MOBILE NAVIGATION */
/*****************************************/

#mobile-navigation {
	position: fixed;
	margin: 0;
	padding: 0;
	top: 0;
	left: -400px;
	width: 400px;
	height: 100%;
	background: #002790;
	z-index: 100;
}

#mobile-navigation ul,
#mobile-navigation li,
#mobile-navigation li a {
	float: left;
	margin: 0;
	padding: 0;
	width: 100%;
}

#mobile-navigation,
#mobile-navigation li ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#mobile-navigation li {
	clear: both;
}

#mobile-navigation li a {
	padding: 10px 20px;
	text-align: left;
	font-family: VAG Rounded Bold;
	font-size: 36px;
	color: #ffffff;
	text-decoration: none;
	text-transform: uppercase;
	background: #002790;
	-webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

#mobile-navigation li a:hover {
	background: #000;
}

#mobile-navigation li ul li a {
	background: #AE531D;
	border-bottom: 1px solid #002790
}

#mobile-navigation li ul li a::before {
	content: " >  ";
}

#mobile-navigation li ul li a:hover {
	background: #6A2805;
}

/*****************************************/
/* WELCOME */
/*****************************************/

#carla-welcome {
	position: absolute;
	top: 280px;
	left: 0;
	margin: 0 0 0 150px;
}

#calvin-welcome {
	position: absolute;
	top: 280px;
	right: 0;
	margin: 0 150px 0 0;
}

#welcome-text {
	position: absolute;
	top: 400px;
	left: 50%;
	margin: 0 0 0 -200px;
	width: 400px;
	font-size: 33px;
	text-align: center;
}

#welcome-text .large-bold {
	font-family: VAG Rounded Bold;
	font-size: 47px;
}

#creemee-milk-packs {
	position: absolute;
	top: 600px;
	left: 50%;
	margin: 0 0 0 -297.5px;
	width: 595px;
}

#welcome-dark-leaves-top-left {
	position: absolute;
	top: 0;
	left: 0;
}

#welcome-big-leaves-left {
	position: absolute;
	top: 700px;
	left: 0;
	margin: 0 0 0 -50px;
	width: 272px;
}

#welcome-big-leaves-right {
	position: absolute;
	top: 450px;
	right: 0;
	margin: 0 0 0 0;
	width: 254px;
}

/*****************************************/
/* MORE FULFILLING */
/*****************************************/

#more-fulfilling-header {
	position: absolute;
	top: 1200px;
	left: 0;
	margin: 0 0 0 0;
}

#more-fulfilling-text {
	position: absolute;
	top: 1200px;
	right: 0;
	margin: 0 200px 0 0;
	font-family: VAG Rounded Bold;
	font-size: 46px;
	text-align: center;
}

#more-fulfilling-text .smaller-regular {
	font-family: VAG Rounded Light;
	font-size: 33px;
}

#more-fulfilling-left-leaves {
	position: absolute;
	top: 1100px;
	left: 0;
	margin: 0 0 0 0;
}


#more-fulfilling-right-leaves {
	position: absolute;
	top: 1100px;
	right: 0;
	margin: 0 0 0 0;
}

#more-fulfilling-flowers {
	position: absolute;
	top: 1650px;
	left: 0;
	margin: 0 0 0 150px;
}

#carla-more-fulfilling {
	position: absolute;
	top: 1500px;
	left: 0;
	margin: 0 0 0 350px;
}

#more-fulfilling-grass {
	position: absolute;
	top: 1950px;
	left: 0;
	margin: 0;
	width: 100%;
}

#more-fulfilling-grass img {
	width: 100%;
}

/*****************************************/
/* MORE GOODNESS */
/*****************************************/

#more-goodness-milk-droplets {
	position: absolute;
	top: 2400px;
	left: 0;
	margin: 0;
}

#more-goodness,
#more-goodness-header {
	position: absolute;
	top: 2500px;
	left: 0;
	margin: 0 0 0 200px;
}

#carla-more-goodness {
	position: absolute;
	top: 2350px;
	right: 0;
	margin: 0 50px 0 0;
}

#more-goodness-text {
	position: absolute;
	top: 2800px;
	left: 0;
	margin: 0 0 0 200px;
	width: 796px;
	font-family: VAG Rounded Bold;
	font-size: 41px;
	text-align: center;
	line-height: 1.5;
}

/*****************************************/
/* MORE VARIETY */
/*****************************************/

#more-variety-milk-droplets {
	position: absolute;
	top: 3600px;
	left: 50%;
	margin: 0 0 0 -455px;
}

#more-variety,
#more-variety-header {
	position: absolute;
	top: 3600px;
	left: 50%;
	margin: 0 0 0 -209px;
}

#full-cream-milk-nutrition-facts {
	position: absolute;
	top: 3800px;
	left: 0;
	margin: 0 0 0 100px;
}

#skimmed-milk-nutrition-facts {
	position: absolute;
	top: 3800px;
	right: 0;
	margin: 0 100px 0 0;
}

#more-variety-text {
	position: absolute;
	top: 4050px;
	left: 50%;
	margin: 0 0 0 -250px;
	width: 500px;
	font-family: VAG Rounded Bold;
	font-size: 35px;
	text-align: center;
	line-height: 1.5;
}

#milk-packs {
	position: absolute;
	top: 4300px;
	left: 50%;
	margin: 0 0 0 -430px;
	width: 860px;
}

/*****************************************/
/* MORE TASTE */
/*****************************************/

#more-taste-leaves {
	position: absolute;
	top: 5000px;
	left: 0;
	margin: 0;
}

#more-taste-milk-droplets {
	display: none;
}

#more-taste-header {
	position: absolute;
	top: 5200px;
	left: 0;
	margin: 0 0 0 -150px;
}

#more-taste,
#more-taste-text {
	position: absolute;
	top: 4800px;
	left: 50%;
	margin: 0 0 0 -200px;
	width: 400px;
	font-family: VAG Rounded Bold;
	font-size: 39px;
	text-align: center;
	line-height: 1.2;
}

.mix-text {
	font-family: FuturaBT-Medium;
	font-size: 36px;
	line-height: 1;
}

.mix-text img.logo {
	width: auto;
	height: 36px;
	display: inline-block;
}

.mix-text span {
	font-size: 29px;
}

#carla-mixing-creemee {
	position: absolute;
	top: 5250px;
	right: 0;
	margin: 0 0 0 0;
}

/*****************************************/
/* TASTEE RECIPES */
/*****************************************/

#more-recipes,
#tastee-recipes-header {
	position: absolute;
	top: 6100px;
	left: 0;
	margin: 0 0 0 200px;
}

#youtube-thumbnail {
	position: absolute;
	top: 6470px;
	left: 0;
	margin: 0 0 0 50px;
}

#youtube-text {
	position: absolute;
	top: 6870px;
	left: 0;
	margin: 0 0 0 50px;
	width: 592px;
	font-family: VAG Rounded Bold;
	font-size: 35px;
	text-align: center;
}

#calvin-and-carla-recipes {
	position: absolute;
	top: 6250px;
	left: 50%;
	margin: 0 0 0 -960px;
	width: 1920px;
}

/*****************************************/
/* MORE JOY */
/*****************************************/

#more-joy-starburst {
	position: absolute;
	top: 7250px;
	left: 50%;
	margin: 0 0 0 -840px;
	width: 100%;
}

#more-joy-starburst img {
	width: 100%;
}

#more-joy-stars-and-swirls {
	position: absolute;
	top: 7200px;
	left: 50%;
	margin: 0 0 0 -960px;
}

#jokes,
#more-joy-header {
	position: absolute;
	top: 7270px;
	right: 0;
	margin: 0 -100px 0 0;
}

#more-joy-text {
	position: absolute;
	top: 7200px;
	left: 0;
	margin: 0 0 0 100px;
	font-family: VAG Rounded Bold;
	font-size: 35px;
	text-align: center;
}

#more-joy-text h2 {
	font-size: 92px;
}

#calvin-more-joy {
	position: absolute;
	top: 7550px;
	right: 0;
	margin: 0 300px 0 0;
}

/*****************************************/
/* CREEMEE RAP */
/*****************************************/

#musical-notes-light {
	position: absolute;
	top: 8400px;
	left: 50%;
	margin: 0 0 0 -906px;
}

#musical-notes-dark {
	position: absolute;
	top: 8700px;
	left: 50%;
	margin: 0 0 0 -560px;
}

#rap,
#creemee-rap-header {
	position: absolute;
	top: 8400px;
	right: 0;
	margin: 0 100px 0 0;
}

#creemee-rap-text {
	position: absolute;
	top: 8500px;
	left: 50%;
	margin: 0 0 0 -400px;
	width: 600px;
	font-family: VAG Rounded Bold;
	font-size: 35px;
	text-align: center;
	line-height: 1.5;
}

#carla-creemee-rap {
	position: absolute;
	top: 8800px;
	left: 0;
	margin: 0 0 0 200px;
}

#calvin-creemee-rap {
	position: absolute;
	top: 8750px;
	right: 0;
	margin: 0 350px 0 0;
}

/*****************************************/
/* MILKY MAZE RUN */
/*****************************************/

#maze-leaves-left {
	position: absolute;
	top: 9700px;
	left: 0;
}

#maze-leaves-right {
	position: absolute;
	top: 9500px;
	right: 0;
}

#milk-and-maze-run-text {
	position: absolute;
	top: 9800px;
	right: 0;
	margin: 0 130px 0 0;
	font-family: VAG Rounded Bold;
	font-size: 26px;
	text-align: center;
	line-height: 1.2;
}

#milk-and-maze-run-text h2 {
	margin: 0;
	padding: 0;
	font-family: VAG Rounded Bold;
	font-size: 122px;
	line-height: .7;
}

#milk-and-maze-run-text h2 span {
	font-family: VAG Rounded Bold;
	font-size: 77px;
}

#maze,
#maze-illustration {
	position: absolute;
	top: 9600px;
	left: 50%;
	margin: 0 0 0 -645px;
}

#glasses-of-milk {
	position: absolute;
	top: 10240px;
	left: 50%;
	margin: 0 0 0 400px;
}

#maze-bottom-greenery {
	position: absolute;
	top: 10360px;
	left: 0;
	margin: 0;
	width: 100%;
}

#maze-bottom-greenery img {
	width: 100%;
}

#calvin-and-carla-maze {
	position: absolute;
	top: 10110px;
	left: 0;
	margin: 0 0 0 50px;
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}

/*****************************************/
/* CONTACT */
/*****************************************/

#contact-leaves-left {
	position: absolute;
	top: 11620px;
	left: 0;
}

#contact-leaves-right {
	position: absolute;
	top: 10900px;
	right: 0;
}

#contact-bottom-greenery {
	position: absolute;
	top: 11840px;
	left: 0;
	margin: 0;
	width: 100%;
}

#contact-bottom-greenery img {
	width: 100%;
}
#contact,
#logo-contact {
	position: absolute;
	top: 10700px;
	left: 50%;
	margin: 0 0 0 -170px;
	width: 340px;
}

#contact-form-result {
	padding: 100px 0;
	display: none;
}

#contact-form-result p {
	margin: 0 auto 0 auto;
	text-align: center;
	width: 100%;
	max-width: 600px;
}

#contact-form-result,
#contact-form {
	position: absolute;
	top: 10750px;
	left: 50%;
	margin: 0 0 0 -600px;
	width: 1200px;
}

#contact-form h2 {
	font-family: VAG Rounded Bold;
	font-size: 47px;
}

label {
	float: left;
	width: 100%;
	font-family: VAG Rounded Bold;
	font-size: 31px;
}

.field-description {
	font-family: VAG Rounded Light;
	font-size: 26px;
}

input[type=text],
input[type=email],
textarea {
	margin: 10px 0;
	padding: 20px;
	background: #fff;
	font-family: VAG Rounded Bold;
	font-size: 31px;
	width: 100%;
	color: #000 !important;
	border: 1px solid #ddd;
}

textarea {
	height: 300px;
}

input[type=submit] {
	padding: 10px 20px;
	font-family: VAG Rounded Bold;
	font-size: 31px;
	color: #fff;
	background: #002790;
}

.form-row {
	clear: both;
	float: left;
	width: 100%;
	margin-bottom: 50px;
}

.form-col {
	float: left;
	width: 50%;
}

.loading-animation {
    margin: 20px auto;
    border: 6px solid #ddd;
    border-radius: 50%;
    border-top: 6px solid #333;
    width: 60px;
    height: 60px;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/*****************************************/
/* MEDIA QUERIES */
/*****************************************/

@media all and (max-width: 1900px) {
    
    #content {
		zoom: .9;
	    -moz-transform: scale(.9);
	}
    
}

@media all and (max-width: 1800px) {
    
    #content {
		zoom: .85;
	    -moz-transform: scale(.85);
	}
    
}

@media all and (max-width: 1700px) {
    
    #content {
		zoom: .8;
	    -moz-transform: scale(.8);
	}
    
}

@media all and (max-width: 1600px) {
    
    #content {
		zoom: .75;
	    -moz-transform: scale(.75);
	}
    
}

@media all and (max-width: 1500px) {
    
    #content {
		zoom: .7;
	    -moz-transform: scale(.7);
	}
    
}

@media all and (max-width: 1400px) {
    
    #content {
		zoom: .65;
	    -moz-transform: scale(.65);
	}
    
}

@media all and (max-width: 1300px) {
    
    #content {
		zoom: .6;
	    -moz-transform: scale(.6);
	}
    
}

@media all and (max-width: 1200px) {
    
    #content {
		zoom: .55;
	    -moz-transform: scale(.55);
	}
    
}

@media all and (max-width: 1100px) {
    
    #content {
		zoom: .5;
	    -moz-transform: scale(.5);
	}
    
}

@media all and (max-width: 1000px) {
    
    #content {
		zoom: .45;
	    -moz-transform: scale(.45);
	}
    
}

/*****************************************/
/* MOBILE LAYOUT */
/*****************************************/

@media all and (max-width: 960px) {
    
	#desktop-navigation {
		display: none;
	}

	#mobile-navigation-button {
	    display: block;
	}

	#content {
		zoom: .7;
	    -moz-transform: scale(.7);
	}

	/* welcome */

    #carla-welcome {
		top: 400px;
		margin: 0 0 0 150px;
	}

	#calvin-welcome {
		top: 400px;
		margin: 0 150px 0 0;
	}

	#welcome-text {
		top: 900px;
	}

	#creemee-milk-packs {
		top: 800px;
		zoom: 1.5;
	    -moz-transform: scale(1.5);
	}

	#welcome-big-leaves-left {
		top: 1400px;
		left: 0;
		margin: 0 0 0 -50px;
		width: 272px;
	}

	#welcome-big-leaves-right {
		top: 1250px;
		right: 0;
		margin: 0 0 0 0;
		width: 254px;
	}

	/* more fulfilling */

	#more-fulfilling-header {
		top: 2100px;
		left: 50%;
		margin: 0 0 0 -398px;
		width: 796px;
	}

	#more-fulfilling-text {
		top: 2450px;
		left: 0;
		width: 100%;
	}

	#more-fulfilling-left-leaves {
		top: 3150px;
	}

	#more-fulfilling-right-leaves {
		top: 3100px;
	}

	#more-fulfilling-flowers {
		top: 3250px;
		margin: 0 0 0 650px;
	}

	#carla-more-fulfilling {
		top: 3300px;
		left: 0;
		margin: 0 0 0 200px;
	}

	#more-fulfilling-grass {
		top: 3700px;
	}	

	/* more goodness */

	#more-goodness-milk-droplets {
		top: 3950px;
	}

	#more-goodness,
	#more-goodness-header {
		top: 4000px;
		left: 50%;
		margin: 0 0 0 -398px;
		width: 796px;
	}

	#carla-more-goodness {
		top: 4200px;
		left: 50%;
		margin: 0 0 0 -374px;
	}

	#more-goodness-text {
		top: 5350px;
		left: 0;
		margin: 0;
		width: 100%;
	}

	/*	more variety */

	#more-variety-milk-droplets {
		top: 6000px;
	}

	#more-variety,
	#more-variety-header {
		top: 6000px;
	}

	#full-cream-milk-nutrition-facts {
		top: 5400px;
		margin-left: 150px;
		zoom: 1.2;
	    -moz-transform: scale(1.2);
	}

	#skimmed-milk-nutrition-facts {
		top: 5400px;
		margin-right: 150px;
		zoom: 1.2;
	    -moz-transform: scale(1.2);
	}

	.remove-on-mobile {
		display: none
	}

	#more-variety-text {
		position: absolute;
		top: 6250px;
		left: 0;
		margin: 0;
		width: 100%;
		zoom: 1.2;
	    -moz-transform: scale(1.2);
	}

	#milk-packs {
		top: 6400px;
		zoom: 1.2;
	    -moz-transform: scale(1.2);
	}

	/*	more taste */

	#more-taste-milk-droplets {
		position: absolute;
		top: 8800px;
		left: 0;
		margin: 0 0 0 25px;
		display: block;
	}

	#more-taste-leaves {
		top: 8800px;
		right: 0;
		margin: 0 -200px 0 0;
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
	}

	#more-taste,
	#more-taste-header {
		top: 8300px;
		left: 50%;
		margin: 0 0 0 -398px;
	}

	#more-taste-text {
		top: 8650px;
		left: 0;
		margin: 0;
		width: 100%;
	}

	#carla-mixing-creemee {
		top: 9800px;
		left: 50%;
		margin: 0 0 0 -568.5px;
	}

	/*	tastee recipes */
    
	#more-recipes,
	#tastee-recipes-header {
		top: 10600px;
		left: 50%;
		margin: 0 0 0 -160.5px;
	}

	#youtube-thumbnail {
		top: 7350px;
		left: 50%;
		margin: 0 0 0 -296px;
		width: 592px;
		zoom: 1.5;
	    -moz-transform: scale(1.5);
	}

	#youtube-text {
		top: 11650px;
		left: 0;
		margin: 0;
		width: 100%;
	}

	#calvin-and-carla-recipes {
		top: 11800px;
		margin-left: -1250px;
	}	

	/*	more joy */

	#more-joy-starburst {
		top: 13250px;
		margin: 0 0 0 -600px;
	}

	#more-joy-stars-and-swirls {
		top: 13200px;
	}

	#jokes,
	#more-joy-header {
		top: 12800px;
		left: 50%;
		margin: 0 0 0 -398px;
		width: 796px;
	}

	#more-joy-text {
		top: 13100px;
		left: 0;
		margin: 0 0 0 50px;
		width: 50%;
	}

	#calvin-more-joy {
		top: 13350px;
		right: 0;
		margin: 0 0 0 0;
	}

	/*	creemee rap */

	#musical-notes-light {
		top: 14700px;
		left: 0;
		margin: 0 0 0 200px;
	}

	#musical-notes-dark {
		top: 14400px;
		left: 0;
		margin: 0 0 0 200px;
	}

	#rap,
	#creemee-rap-header {
		top: 14300px;
		left: 50%;
		margin: 0 0 0 -209px;
	}

	#creemee-rap-text {
		top: 10000px;
		left: 0;
		margin: 0;
		width: 100%;
		zoom: 1.5;
	    -moz-transform: scale(1.5);
	}

	#carla-creemee-rap {
		top: 15500px;
		left: 0;
		margin: 0 0 0 150px;
	}

	#calvin-creemee-rap {
		top: 15500px;
		right: 0;
		margin: 0 150px 0 0;
	}

	/*	milk maze and run text */

	#maze-leaves-left {
		display: none;
	}

	#maze-leaves-right {
		display: none;
	}

	#maze,
	#milk-and-maze-run-text {
		top: 16300px;
		left: 0;
		margin: 0;
		width: 100%;
	}

	#maze-illustration {
		top: 16650px;
		left: 50%;
		margin: 0 0 0 -515.5px;
	}

	#glasses-of-milk {
		top: 17550px;
		left: auto;
		right: 0;
		margin: 0 150px 0 0;
	}

	#calvin-and-carla-maze {
		top: 17620px;
		left: 0;
		right: auto;
		margin: 0 0 0 100px;
		-webkit-transform: scaleX(-1);
		transform: scaleX(-1);
	}

	#maze-bottom-greenery {
		top: 9850px;
		zoom: 1.8;
	    -moz-transform: scale(1.8);
	}

	#maze-bottom-greenery img {
		width: auto;
	}

	/* contact	*/

	#contact-leaves-left,
	#contact-leaves-right {
		display: none;
	}

	#contact-bottom-greenery {
		top: 10750px;
		zoom: 1.8;
	    -moz-transform: scale(1.8);
	}

	#contact-bottom-greenery img {
		width: auto;
	}

	#contact,
	#logo-contact {
		top: 18300px;
	}

	#contact-form {
		position: absolute;
		top: 18300px;
		left: 50%;
		margin: 0 0 0 -600px;
		width: 1200px;
	}

}

@media all and (max-width: 860px) {

	#content {
		zoom: .6;
	    -moz-transform: scale(.6);
	}

}

@media all and (max-width: 760px) {

	#content {
		zoom: .55;
	    -moz-transform: scale(.55);
	}

}

@media all and (max-width: 700px) {

	#content {
		zoom: .5;
	    -moz-transform: scale(.5);
	}

	label {
		font-size: 62px;
	}

	.field-description {
		font-size: 52px;
	}

	input[type=text],
	input[type=email],
	textarea {
		padding: 20px;
		font-size: 62px;
	}

	input[type=submit] {
		padding: 20px;
		font-size: 62px;
	}

}

@media all and (max-width: 630px) {

	#content {
		zoom: .45;
	    -moz-transform: scale(.45);
	}

}

@media all and (max-width: 560px) {

	#content {
		zoom: .4;
	    -moz-transform: scale(.4);
	}

}

@media all and (max-width: 500px) {

	#content {
		zoom: .35;
	    -moz-transform: scale(.35);
	}

	#carla-welcome {
	    margin: 0 0 0 50px;
	}

	#calvin-welcome {
	    margin: 0 50px 0 0;
	}

	#welcome-big-leaves-left {
	    margin: 0 0 0 -100px;
	}

	#welcome-big-leaves-right {
	    margin: 0 -100px 0 0;
	}

	#more-fulfilling-left-leaves {
	    margin: 0 0 0 -50px;
	}

	#more-fulfilling-right-leaves {
	    margin: 0 -50px 0 0;
	}

	#more-fulfilling-text {
	    top: 2400px;
	}

	#more-fulfilling-grass {
		top: 3750px;
	}

	#full-cream-milk-nutrition-facts {
	    top: 4290px;
	    margin-left: 50px;
	    zoom: 1.5;
	    -moz-transform: scale(1.5);
	}

	#skimmed-milk-nutrition-facts {
		top: 4290px;
	    margin-right: 50px;
	    zoom: 1.5;
	    -moz-transform: scale(1.5);
	}

	#more-variety-text {
	    top: 6360px;
	}

	#milk-packs {
	    top: 6480px;
	}

	#contact-bottom-greenery {
		top: 11200px;
	}

	.form-col {
		width: 100%;
	}

	#contact-form-result,
	#contact-form {
		top: 20500px;
		zoom: .9;
	    -moz-transform: scale(.9);
	}

}

@media all and (max-width: 410px) {
    
	#more-joy-text {
	    top: 13000px;
	}

	#creemee-rap-header {
	    top: 14450px;
	}

    #contact-form-result,
	#contact-form {
		top: 21800px;
		zoom: .85;
	    -moz-transform: scale(.85);
	}
    
}

@media all and (max-width: 380px) {
    
    #contact-form-result,
	#contact-form {
		top: 24700px;
		zoom: .75;
	    -moz-transform: scale(.75);
	}
    
}

@media all and (max-width: 320px) {

	#content {
		zoom: .3;
	    -moz-transform: scale(.3);
	}

	/*	welcome */

	#carla-welcome {
		margin: 0;
	}

	#calvin-welcome {
		margin: 0;
	}

	/* more variety	*/

	#full-cream-milk-nutrition-facts {
	    margin: 0 0 0 50px;
	}

	#skimmed-milk-nutrition-facts {
	    margin: 0 50px 0 0;
	}

	#more-variety-text {
		top: 7500px;
	    zoom: 1;
	    -moz-transform: scale(1);
	}

	/* more joy	*/

	#more-joy-calvin {
		zoom: .8;
	    -moz-transform: scale(.8);
	}

}