/* CSS Document */

@font-face {
    font-family: 'intro_liptonblack_alt';
    src: url('introlipton-blackalt-webfont.woff2') format('woff2'),
         url('introlipton-blackalt-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'intro_liptonregular';
    src: url('introlipton-regular-webfont.woff2') format('woff2'),
         url('introlipton-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
    outline: none;
    box-sizing: border-box;
}

HTML {
    scroll-behavior: smooth;
    image-rendering: -webkit-optimize-contrast;
    /* scroll-padding-top: 110px; */
}

BODY {
    padding: 0;
    margin: 0;
	font-family: 'intro_liptonregular', sans-serif;
	background-color: #273874;
}

H1 {}
H2 { font-family: 'intro_liptonblack_alt', sans-serif; font-size: 36px; line-height: 1.2; color: #ffffff; font-weight: normal; text-shadow: 4px 4px #273874; margin: 25px 0; }
H3 { font-family: 'intro_liptonblack_alt', sans-serif; font-size: 36px; line-height: 1.2; color: #fdd800; font-weight: normal; margin: 25px 0; }
H4 { font-family: 'intro_liptonblack_alt', sans-serif; font-size: 22px; line-height: 1.2; color: #ffffff; font-weight: normal; margin: 10px 0; }
H5 { font-family: 'intro_liptonblack_alt', sans-serif; font-size: 20px; line-height: 1.2; color: #273874; font-weight: normal; margin: 10px 0; }
H6 {}

H1 A,
H2 A,
H3 A,
H4 A,
H5 A,
H6 A {
    text-decoration: none;
}

IMG {
    border: none;
}

HR {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

.clr {
    clear: both;
}

.width {
    position: relative;
    width: 880px;
    margin: 0 auto 0 auto;
}

.image-bg {
    background-image: url(../img/sample.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: auto;
}

.full-width-image {
	display: block;
	width: 100%;
	height: auto;
}

/* ********************************************************************* */
/*	COLUMNS
/* ********************************************************************* */

.row {
  padding: 0;
  position: relative;
  z-index: 997;
  min-height: 1px;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 -20px 0 -20px;
  min-height: 1px;
}

.item {
  box-sizing: border-box;
  padding: 0;
  margin: 0 20px;
  display: flex;
  flex-direction: column;
  min-height: 1px;
}

.row.no-gutter .item {
  margin: 0;
}

.item>DIV {
  min-height: 1px;
}

.item-vtop {
  justify-content: flex-start;
}

.item-vcenter {
  justify-content: center;
}

.item-vend {
  justify-content: flex-end;
}

.item-1-1 {
  width: calc(100% - 40px);
}

.no-gutter .item-1-1 {
  width: 100%;
}

.item-1-2 {
  width: calc(50% - 40px);
}

.no-gutter .item-1-2 {
  width: 50%;
}

.item-1-3 {
  width: calc(33.3333% - 40px);
}

.item-2-3 {
  width: calc(66.6666% - 40px);
}

.no-gutter .item-1-3 {
  width: 33.3333%;
}

.no-gutter .item-2-3 {
  width: 66.6666%;
}

.item-1-4 {
  width: calc(25% - 40px);
}

.item-3-4 {
  width: calc(75% - 40px);
}

.no-gutter .item-1-4 {
  width: 25%;
}

.no-gutter .item-3-4 {
  width: 75%;
}


/* ********************************************************************* */
/* ***** HEAD ********************************************************** */
/* ********************************************************************* */

#header {
	position: absolute;
	z-index: 999;
	width: 100%;
	padding: 30px 30px 0 0;
}

#header IMG.logo { display: block; margin: 0 0 0 auto; width: 150px; height: auto; }

/* ********************************************************************* */
/* ***** MAIN ********************************************************** */
/* ********************************************************************* */

#main { margin: 0; padding: 0; }

/* *********************************************************** */

#main .section-1 {
	padding: 0 0 100px 0;
	background-image: url(../img/sec1-sky.webp);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    height: auto;
}
#main .section-1 .container { text-align: center; }

#main .section-1 IMG.head { width: 100%; height: auto; }
#main .section-1 IMG.desk { display: block; }
#main .section-1 IMG.mobile { display: none; }

#main .section-1 P { font-size: 18px; }

#main .section-1 A { color: #273874; text-decoration: none; }
#main .section-1 A:HOVER { color: #000000; }

#main .section-1 A.button { display: inline-block; padding: 15px 25px 13px 25px; border-radius: 25px; background-color: #273874; border: solid 3px #ffffff; color: #ffffff; font-family: 'intro_liptonblack_alt', sans-serif; text-transform: uppercase; text-decoration: none; }
#main .section-1 A.button:HOVER { background-color: #000000; color: #ffffff; }

/* *********************************************************** */

#main .section-2 {
	margin: -70px 0 0 0;
	padding: 48px 0 100px 0;
	text-align: center;
}
#main .section-2:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transform: skewY(-3deg);
    transform-origin: 50% 0;
    background-image: url(../img/sec2-back.webp);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    backface-visibility: hidden;
  }
#main .section-2 P { font-size: 18px; line-height: 1.3; color: #ffffff; max-width: 700px; margin: 20px auto 20px auto; }
#main .section-2 H2 SUP { font-size: 12px; }

/* *********************************************************** */

#main .section-3 {
	margin: -70px 0 0 0;
	padding: 48px 0 100px 0;
	text-align: center;
}
#main .section-3:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transform: skewY(-2deg);
    transform-origin: 50% 0;
	background-color: #273874;
    backface-visibility: hidden;
  }
#main .section-3 P { font-size: 18px; line-height: 1.3; color: #ffffff; max-width: 700px; margin: 20px auto 20px auto; }

#main .section-3 A.button { display: inline-block; padding: 15px 25px 13px 25px; border-radius: 25px; background-color: #fdd800; border: solid 3px #ffffff; color: #273874; font-family: 'intro_liptonblack_alt', sans-serif; text-transform: uppercase; text-decoration: none; }
#main .section-3 A.button:HOVER { background-color: #273874; color: #ffffff; }

/* *********************************************************** */

#main .section-4 {
	margin: -70px 0 0 0;
	padding: 48px 0 100px 0;
	text-align: center;
}
#main .section-4:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transform: skewY(1deg);
    transform-origin: 50% 0;
    background-image: url(../img/sec2-back.webp);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    backface-visibility: hidden;
  }
#main .section-4 P { font-size: 18px; line-height: 1.3; color: #ffffff; max-width: 700px; margin: 20px auto 20px auto; }
#main .section-4 P SUP { font-size: 10px; }
#main .section-4 IMG { width: auto; height: 100%; max-height: 260px; margin: 0 auto 0 auto; }

/* *********************************************************** */

#main .section-5 {
	margin: -70px 0 0 0;
	padding: 48px 0 100px 0;
	text-align: center;
}
#main .section-5:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transform: skewY(1deg);
    transform-origin: 50% 0;
    background-image: url(../img/sec5-back.webp);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    backface-visibility: hidden;
  }

#main .section-5 H2 { color: #273874; text-shadow: 4px 4px #ffffff; max-width: 600px; margin: 20px auto; }

#main .section-5 P { font-size: 18px; line-height: 1.3; color: #273874; max-width: 700px; margin: 20px auto 20px auto; }

#main .section-5 A.button { display: inline-block; padding: 15px 25px 13px 25px; border-radius: 25px; background-color: #273874; border: solid 3px #ffffff; color: #ffffff; font-family: 'intro_liptonblack_alt', sans-serif; text-transform: uppercase; text-decoration: none; }
#main .section-5 A.button:HOVER { background-color: #000000; color: #ffffff; }

#main .section-5 IMG.title { width: 100%; height: auto; margin: 60px auto 0 auto; max-width: 964px; }
#main .section-5 IMG.goodsips { width: 100%; height: auto; margin: 0 auto 0 auto; max-width: 398px; }

#main .section-5 .quote {
	background-image: url(../img/quote-bg.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
	padding: 20px 25px;
	min-height: 300px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#main .section-5 .quote H5 { font-family: 'intro_liptonregular', sans-serif; }
#main .section-5 .quote H5 STRONG { font-family: 'intro_liptonblack_alt', sans-serif; }

/* *********************************************************** */

#main .section-6 {
	margin: -70px 0 0 0;
	padding: 48px 0 100px 0;
	text-align: center;
}
#main .section-6:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transform: skewY(1deg);
    transform-origin: 50% 0;
    background-image: url(../img/sec2-back.webp);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    backface-visibility: hidden;
}
#main .section-6 P { font-size: 13px; line-height: 1.3; color: #ffffff; max-width: 700px; margin: 20px auto 20px auto; }

#main .section-6 #freeform-success {
	background-color: #fdd800;
	color: #ffffff;
	margin: 30px 10px;
	padding: 25px 35px 20px 35px;
	border-radius: 10px;
	text-align: center;
}
#main .section-6 #freeform-success H3 { text-align: center; color: #273874; }
#main .section-6 #freeform-success P { text-align: center; color: #273874; }

/* *********************************************************** */

#main .section-20 {
	margin: -70px 0 0 0;
	padding: 48px 0 120px 0;
}
#main .section-20:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transform: skewY(-2deg);
    transform-origin: 50% 0;
	background-color: #ffffff;
    backface-visibility: hidden;
}
#main .section-20 IMG.britvic { display: block; width: 100%; height: auto; margin: 0 auto; max-width: 300px; }
#main .section-20 H3 { margin: 0 0 0.4em 0; color: #000000; font-weight: 400; font-family: sans-serif; font-size: 22px; text-transform: none; }
#main .section-20 P { margin: 0 0 1em 0; line-height: 1.3; color: #000000; font-weight: 400; font-family: sans-serif; font-size: 14px; }

/* *********************************************************** */

#main .section-21 {
	margin: -70px 0 0 0;
	padding: 48px 0 100px 0;
	text-align: center;
}
#main .section-21:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transform: skewY(2deg);
    transform-origin: 50% 0;
    background-image: url(../img/21-back.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    backface-visibility: hidden;
}
#main .section-21 IMG.logo { margin: 0 auto 0 auto; }

/* *********************************************************** */

#main .tns-outer { position: relative; }
#main .tns-ovh {}
#main .tns-nav { width: 250px; margin: 5px auto 0 auto; }
#main .tns-nav BUTTON { display: inline-block; border: none; width: 14px; height: 14px; border-radius: 50%; margin: 0 4px 0 4px; background-color: #273874; }
#main .tns-nav BUTTON.tns-nav-active { background-color: #fdd800; }
#main .tns-controls {}
#main .tns-controls BUTTON { position: absolute; top: 30%; display: block; width: 48px; height: 48px; border: none; font-size: 64px; font-weight: bold; line-height: 1; color: #ffffff; background-color: transparent; font-family: sans-serif; }
#main .tns-controls BUTTON:first-child { left: -65px; }
#main .tns-controls BUTTON:last-child { right: -65px; }

/* *********************************************************** */

:root {
    accent-color: #273874;
}

#main .freeform-row [class*="freeform-col-"] .freeform-errors>li {
	color: #ffffff;
}

#main .freeform-form .freeform-row .freeform-fieldtype-checkbox .freeform-input,
#main .freeform-form .freeform-row .freeform-fieldtype-radios .freeform-input{
	transform: scale(2) !important;
    margin-right: 15px !important;
    margin: 4px 0 0 5px;
}

#main .freeform-form .radio-center { text-align: center; }
#main .freeform-form .radio-center .input-group-one-line { justify-content: center; }

#main .freeform-row [class*="freeform-col-"] .freeform-label,
#main .freeform-row [class*="freeform-col-"] .input-group-one-line label { font-family: 'intro_liptonregular', sans-serif; color: #ffffff; font-weight: bold; font-size: 22px; }

#main .freeform-row .freeform-fieldtype-text label,
#main .freeform-row .freeform-fieldtype-email label,
#main .freeform-row .freeform-fieldtype-select label{ display: none; }

#main .freeform-row .freeform-fieldtype-checkbox { text-align: left; display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; }
#main .freeform-row .freeform-fieldtype-checkbox > * {}
#main .freeform-row .freeform-fieldtype-checkbox .freeform-label { font-family: 'intro_liptonregular', sans-serif; font-weight: normal; font-size: 13px; color: #ffffff; }

#main .freeform-row .freeform-fieldtype-text input,
#main .freeform-row .freeform-fieldtype-email input,
#main .freeform-row .freeform-fieldtype-select select option { text-align: center; }

#main .freeform-row .freeform-fieldtype-text input::placeholder,
#main .freeform-row .freeform-fieldtype-email input::placeholder { color: #000000; }

#main .freeform-form button { margin: 0 auto 0 auto; padding: 15px 25px 13px 25px; background-color: #273874; color: #ffffff; font-family: 'intro_liptonblack_alt', sans-serif; font-size: 18px; text-transform: uppercase; text-decoration: none; cursor: pointer; border: solid 3px #ffffff; border-radius: 25px; }


/* ********************************************************************* */
/* ***** FOOT ********************************************************** */
/* ********************************************************************* */

#footer {
	position: relative;
	z-index: 999;
	margin: -70px 0 0 0;
	padding: 48px 0 100px 0;
	text-align: center;
}
#footer:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

	background-color: #273874;
    backface-visibility: hidden;
}
#footer P { margin: 1em 0 1em 0; line-height: 1.2; color: #ffffff; font-weight: 400; font-size: 14px; }

/* ********************************************************************* */
/* ***** RESPONSIVE **************************************************** */
/* ********************************************************************* */

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

    .width {}

}

@media screen and (max-width: 1024px) {
	
	.width {
		width: 90vw;
	}
	.container { margin: 0 0 0 0; }

	.item-1-2 {
	  width: calc(50% - 40px);
	}

	.no-gutter .item-1-2 {
	  width: 50%;
	}

	.item-1-3 {
	  width: calc(50% - 40px);
	}

	.item-2-3 {
	  width: calc(50% - 40px);
	}

	.no-gutter .item-1-3 {
	  width: 50%;
	}

	.no-gutter .item-2-3 {
	  width: 50%;
	}

	.item-1-4 {
	  width: calc(50% - 40px);
	}

	.item-3-4 {
	  width: calc(100% - 40px);
	}

	.no-gutter .item-1-4 {
	  width: 50%;
	}

	.no-gutter .item-3-4 {
	  width: 100%;
	}
	
	#main .section-5 .quote {
		background-image: none;
		margin: 0 10px 0 10px;
		padding: 20px 0 20px 0;
		min-height: 300px;
		background-color: #ffffff;
		border-top-left-radius: 35px;
		border-bottom-right-radius: 35px;
		box-shadow: 8px 8px 0 #273874;
	}
	
	#main .tns-ovh .tns-item { padding: 0 25px 0 25px; }
	#main .tns-controls BUTTON:first-child { left: -40px; }
	#main .tns-controls BUTTON:last-child { right: -50px; }
	
}

@media screen and (max-width: 780px) {
	
	#header { padding: 15px 15px 0 0; }
	#header IMG.logo { width: 110px; }
	
	#main .section-1 {}
	#main .section-1 .container { text-align: center; }
	#main .section-1 IMG.head { width: 80%; height: auto; margin: 0 auto 0 0; }

	#main .section-20 { text-align: center; }
	#main .section-20 IMG.britvic { margin: 0 auto 30px auto; }
	
}

@media screen and (max-width: 680px) {
	
	.item-1-2 {
	  width: calc(100% - 40px);
	}

	.no-gutter .item-1-2 {
	  width: 100%;
	}

	.item-1-3 {
	  width: calc(100% - 40px);
	}

	.item-2-3 {
	  width: calc(100% - 40px);
	}

	.no-gutter .item-1-3 {
	  width: 100%;
	}

	.no-gutter .item-2-3 {
	  width: 100%;
	}

	.item-1-4 {
	  width: calc(50% - 40px);
	}

	.item-3-4 {
	  width: calc(100% - 40px);
	}

	.no-gutter .item-1-4 {
	  width: 50%;
	}

	.no-gutter .item-3-4 {
	  width: 100%;
	}
	
	#header IMG.logo { display: block; margin: 40vw 0 0 auto; width: 100px; height: auto; }
	
	#main .section-1 IMG.desk { display: none; }
	#main .section-1 IMG.mobile { display: block; }
	#main .section-1 IMG.head1 { width: 90%; height: auto; margin: 0 auto 0 auto; }
	#main .section-1 IMG.head2 { width: 90%; height: auto; margin: 0 auto 0 auto; }
	
}

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