/* https://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

* {
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: top;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* Fonts */
.FFDINWebProLight {
	font-family: FFDINWebProLight;
	font-weight: normal;
	font-style: normal;
}

.FFDINWebProMedium {
	font-family: FFDINWebProMedium;
	font-weight: normal;
	font-style: normal;
}


/* Body Project Theme Styles */

body {
	font-family: FFDINWebProLight;
}

i {
	font-style: italic;
}

input[type="checkbox"]#togglebox {
	position: absolute;
	left: 0;
	top: 0;
	visibility: hidden;
}

input[type="checkbox"]#togglebox:checked ~ #offcanvas-menu {
    height: 275px;
    transition: height 0.2s ease-in-out, box-shadow0.1s linear;
}

#navtoggler {
  width: 2.5em;
  height: 1em;
  z-index: 9;
  display: none;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  float: right;
  right: 4.5%;
  top: 66px;
}

#navtoggler span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #5ac8c4;
  border-radius: 30px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#navtoggler span:nth-child(1) {
  top: 0px;
}

#navtoggler span:nth-child(2),#navtoggler span:nth-child(3) {
  top: 8px;
}

#navtoggler span:nth-child(4) {
  top: 16px;
}

input[type="checkbox"]#togglebox:checked ~ #navtoggler span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

input[type="checkbox"]#togglebox:checked ~ #navtoggler span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

input[type="checkbox"]#togglebox:checked ~ #navtoggler span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

input[type="checkbox"]#togglebox:checked ~ #navtoggler span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

h1 {
	font-size: 1.13em; /*18px*/
    letter-spacing: 0.02em;
    line-height: 21px;
    margin-top: 25px;
    font-family: FFDINWebProMedium;
}

h1 strong {
	font-family: FFDINWebProMedium;
}

#offcanvas-menu {
	position: absolute;
	float: left;
	width: 100%;
	height: 0px;
    z-index: 99;
    background-color: white;
    top: 100px;
	padding-top: 20px;
    transition: height 0.2s ease-in-out, box-shadow0.1s linear;
    overflow: hidden;
}

#offcanvas-menu ul {
	text-align: center;
}

#offcanvas-menu li {
	margin-bottom: 30px;
}

#offcanvas-menu a {
	font-size: 1em;
	margin-bottom: 10px;
	text-transform: uppercase;
	font-family: FFDINWebProMedium;
	text-decoration: none;
	color: #323e47;
}

#offcanvas-menu .selected {
	border: none;
}

#offcanvas-menu .selected a {
	color: #989ea3;
}

#top-header {
	width: 100%;
	height: 120px;
	position: fixed;
  	top: 0;
  	left: 0;
  	z-index: 9999;
	background: url('../images/logo.png') no-repeat 15.4% white;
	background-size: 20%;
	border-bottom: 6px solid #5ac8c4;
}

#menu-nav {
	width: 100%;
	max-width: 1080px;
	height: 50px;
	position: relative;
	margin: 50px auto;
	text-transform: uppercase;
	font-size: 0.75em; /*12px*/
	font-family: FFDINWebProMedium;
}

#menu-nav ul {
	width: 90%;
    margin-top: 65px;
    margin-left: 40.5%;
}

#menu-nav ul li {
	float: left;
	position: relative;
	padding: 0 2%;
	height: 25px;
}

#menu-nav a {
	text-decoration: none;
    color: #323e47;
    font-variant: small-caps;
}

#menu-nav .selected:before {
	content: "";
    position: absolute;
    width: 70px;
    height: 1px;
    bottom: 0;
    border-bottom: 1px solid #f64360;
    margin-left: 50%;
    left: -35px;
}

#menu-nav a:hover:before {
	content: "";
    position: absolute;
    width: 70px;
    height: 1px;
    bottom: 0;
    border-bottom: 1px solid #f27990;
    margin-left: 50%;
    left: -35px;
}

#container {
	width: 100%;
	max-width: 1080px;
	height: auto;
	position: relative;
	margin: 181px auto 0 auto;
}

#widgets-bar {
	width: 7.5%;
	max-width: 70px;
	height: 179px;
	position: relative;
	border-top: 2px solid #f64360;
	border-bottom: 2px solid #f64360;
	padding: 38px 0;
	float: left;
	text-align: center;
}

#widgets-bar a {
	text-decoration: none;
	text-transform: uppercase;
}

#widgets-bar ul li:not(:last-child) a {
	text-indent: -999999px;
	position: relative;
	float: left;
}

#widgets-bar ul li:last-child a {
	color: #f64360;
	font-size: 0.8em;
}

#widgets-bar .email {
	background-image: url('../images/widget-email.png');
	background-repeat: no-repeat;
	background-position: 45% top;
	background-size: 30%;
	width: 100%;
	height: 48px;
	-webkit-transition: background-image 0.3s ease-in-out;
  	-moz-transition: background-image 0.3s ease-in-out;
  	-o-transition: background-image 0.3s ease-in-out;
  	transition: background-image 0.3s ease-in-out;
}

#widgets-bar .email:hover {
	background-image: url('../images/widget-email-hover.png');
	background-repeat: no-repeat;
	background-position: 45% top;
	background-size: 30%;
}

#widgets-bar .map {
	background-image: url('../images/widget-map.png');
	background-repeat: no-repeat;
	background-position: 45% top;
	background-size: 24%;
	width: 100%;
	height: 54px;
	-webkit-transition: background-image 0.3s ease-in-out;
  	-moz-transition: background-image 0.3s ease-in-out;
  	-o-transition: background-image 0.3s ease-in-out;
  	transition: background-image 0.3s ease-in-out;
}

#widgets-bar .map:hover {
	background-image: url('../images/widget-map-hover.png');
	background-repeat: no-repeat;
	background-position: 45% top;
	background-size: 24%;
}

#widgets-bar .instagram {
	background-image: url('../images/widget-instagram.png');
	background-repeat: no-repeat;
	background-position: 45% top;
	background-size: 24%;
	width: 100%;
	height: 45px;
	-webkit-transition: background-image 0.3s ease-in-out;
  	-moz-transition: background-image 0.3s ease-in-out;
  	-o-transition: background-image 0.3s ease-in-out;
  	transition: background-image 0.3s ease-in-out;
}

#widgets-bar .instagram:hover {
	background-image: url('../images/widget-instagram-hover.png');
	background-repeat: no-repeat;
	background-position: 45% top;
	background-size: 24%;
}

#widgets-bar .phone {
	background-image: url('../images/widget-phone.png');
	background-repeat: no-repeat;
	background-position: 45% top;
	background-size: 30%;
	width: 100%;
	height: 48px;
	-webkit-transition: background-image 0.3s ease-in-out;
  	-moz-transition: background-image 0.3s ease-in-out;
  	-o-transition: background-image 0.3s ease-in-out;
  	transition: background-image 0.3s ease-in-out;
}

#widgets-bar .phone:hover {
	background: url('../images/widget-phone-hover.png');
	background-repeat: no-repeat;
	background-position: 45% top;
	background-size: 30%;
}

#content {
	width: 85%;
	max-width: 930px;
	height: auto;
	position: relative;
	margin-bottom: 140px;
}

#bottom-footer {
	width: 100%;
	height: 310px;
	position: relative;
	background-color: #323e47;
	border-top: 6px solid #5ac8c4;
	border-bottom: 6px solid #5ac8c4;
	font-size: 0.9em;
}

#footer-content {
	width: 100%;
	max-width: 1090px;
	height: 200px;
	margin: 50px auto;
	border-top: 2px solid #848b91;
}

#details {
	padding: 50px 0;
	width: 100%;
	height: 85px;
	position: relative;
	border-bottom: 2px solid #848b91;
}

#details a {
	text-decoration: none;
}

#details ul {
	width: 100%;
}

#details ul li {
	width: 33%;
	float: left;
	margin-bottom: 30px;
	color: #323e47;
	text-indent: 40px;
}

#details .two-thirds, #details .one-third {
	height: auto;
}

#details .one-third p:first-child {
	font-family: FFDINWebProMedium;
	margin-bottom: 30px;
}

#details .email {
	background: url('../images/footer-email.png') no-repeat left center;
	background-size: 8%;
	-webkit-transition: background-image 1s ease-in-out;
  	-moz-transition: background-image 1s ease-in-out;
  	-o-transition: background-image 1s ease-in-out;
  	transition: background-image 1s ease-in-out;
}

#details .phone {
	background: url('../images/footer-phone.png') no-repeat left center;
	background-size: 6%;
}

#details .instagram {
	background: url('../images/footer-instagram.png') no-repeat left center;
	background-size: 6%;
}

#details .map {
	background: url('../images/footer-map.png') no-repeat 1.5% center;
	background-size: 5.5%;
	height: 19px;
}

#details .facebook {
	background: url('../images/footer-facebook.png') no-repeat left center;
	background-size: 5%;
	height: 19px;
}

#details .twitter {
	background: url('../images/footer-twitter.png') no-repeat left center;
	background-size: 7%;
}

#credits {
	margin-top: 10px;
}

#map {
	height: 426px;
}

/* Links */
.anchors {
	display: block;
    height: 120px;
    margin-top: -120px;
    visibility: hidden;
    float: left;
    width: 100%;
}

.cube {
	width: 29.9%;
	height: 270px;
	position: relative;
	padding: 20px 2%;
}

.cube a {
	position: relative;
	top: 20px;
	font-size: 0.75em; /*12px*/
	font-family: FFDINWebProMedium;
	font-variant: small-caps;
	line-height: 14px; /*LEADING*/
	letter-spacing: 0.01em; /*10 TRACKING*/
	text-transform: uppercase;

}

.contact footer {
	display: none;
}
.body-bg {
	background-color: #d6d8da;
}

.light-green-bg {
	background-color: #90fff2;
}

.dark-green-bg {
	background-color: #5ac8c4;
}

.light-red-bg {
	background-color: #f64360;
}

.dark-grey-bg {
	background-color: #323e47;
}

.medium-grey-bg {
	background-color: #47525a;
}

.light-grey-bg {
	background-color: #5b656c;
}

.white-text {
	color: white;
}

.black-text {
	color: #323e47;
}

.grey-text {
	color: #848b91 !important;
}

.red-text {
	color: #f64360;
}

.light-green-text {
	color: #90fff2;
}

.green-text {
	color: #dbe95f;
}

.aqua-text {
	color: #16aab5;
}

.purple-text {
	color: #565e9b;
}

.orange-text {
	color: #f7931e;
}

.left {
	float: left;
}

.right {
	float: right;
}

.one-third {
	width: 33%;
	height: 155px;
	position: relative;
}

.home .one-third {
	width: 33.9%;
}

.two-thirds {
	width: 66.1%;
	height: 310px;
	position: relative;
}

.half {
	width: 50%;
	position: relative;
}

.full {
	width: 100%;
	position: relative;
}

.tight {
	height: 306px;
}

/*.selected {
	border-bottom: 2px solid #f64360;
}*/

.selected a {
	opacity: 0.7;
}

.text-box {
	border-top: 1px solid #323e47;
	border-bottom: 1px solid #323e47;
	padding: 35px 0;
}

.text-box-top {
	border-top: 1px solid #323e47;
	padding: 35px 0;
}

.text-box .half p, .text-box-top .half p {
	width: 80%;
	margin: 0 auto;
	line-height: 1.5em;
	text-align: center;
	font-size: 0.875em;
}

.about .cube p, .price .cube p, .studio .cube p {
	font-size: 1.3em;
	line-height: 1.2em;
}

.about .bold-box p {
	width: 80%;
	margin:  auto;
	font-size: 1.13em;
	text-align: center;
	line-height: 1.25em;
}

.about .bold-box a {
	font-size: 0.75em; /*12px*/
	font-family: FFDINWebProMedium;
	font-variant: small-caps;
	line-height: 14px; /*LEADING*/
	letter-spacing: 0.01em; /*10 TRACKING*/
	text-transform: uppercase;
}

.about .one-third {
	height: auto;
}

.about .text-box, .grey-text-box {
	background-color: rgba(50, 62, 71, 0.1);
	border: 0;
}

.about .text-box-top {
    padding: 35px 0 0 0;
}

.about .align-center {
	margin-left: auto;
	margin-right: auto;
}

.about .ourmeals:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: url('../images/01_about_our_meals_circle.png') no-repeat center center;
	background-size: 30%;
}

.about .ourtraining:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: url('../images/02_about_our_training_circle.png') no-repeat center center;
	background-size: 30%;
}

.about .ourphilosophy:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: url('../images/03_about_our_philosophy_circle.png') no-repeat center center;
	background-size: 30%;
}

.about .aboutgillian:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: url('../images/04_about_gillian_circle.png') no-repeat center center;
	background-size: 30%;
}

.price .one-third {
	width: 33.334%;
}

.price .title p {
	font-size: 1.25em;
	font-family: FFDINWebProMedium;
}

.price .title {
	padding-top: 25px;
	padding-bottom: 20px;
}

.bold-box {
	padding: 35px 0;
}

.bold-box ul li {
	margin-bottom: 5px;
	text-align: center;
}

.grey-text-box .one-third {
	height: auto;
}

.grey-text-box .one-third p {
	font-size: 0.875em;
	line-height: 1.5em;
}

.align-center {
	text-align: center;
}

.margin-35 {
	margin-top: 35px;
}

.margin-50 {
	margin-top: 50px;
}

.padding-35-top {
	padding-top: 35px;
}

.padding-35-bottom {
	padding-bottom: 35px;
}

.pink-border .one-third {
	height: auto;
}

.price ul li {
	width: 70%;
	margin: 0 auto;
}

.price ul li a {
	position: absolute;
    left: 0;
    bottom: 50px;
    font-size: 0.9em;
    width: 100%;
    color: #f64360;
    margin-left: 0;
}

.price .split-link a {
    font-size: 0.75em;
    width: 100%;
    text-align: center;
    float: left;
    margin-top: 20px;
    margin-left: 0;
}

.price a {
	color: #f64360;
	text-transform: uppercase;
	font-size: 0.75em;
	font-family: FFDINWebProMedium;
}

.price .sample strong {
	font-size: 0.75em;
	font-family: FFDINWebProMedium;
}

.price .final-text {
	font-size: 0.875em;
}

.price .final-text a {
	font-size: 1em;
}

.costs .two-thirds {
	width: 80%;
}

.costs .two-thirds, .map-details .two-thirds, .auto-margin {
	margin: 0 auto;
	height: auto;
}

.costs .two-thirds:first-child {
	margin: 0 auto 15px auto;
	height: auto;
}

.costs p strong {
	font-family: FFDINWebProMedium;
}

.costs p strong:first-child {
	margin-right: 2%;
}

.costs p strong:last-child {
	margin-left: 2%;
}

.map-details .two-thirds ul {
	width: 90%;
	margin: 0 auto;
}

.map-details .two-thirds ul li {
	padding: 15px 0 15px 15%;
	font-size: 0.88em;
	color: white;
	line-height: 1.2em;
}

.map-details a {
	text-decoration: none;
	color: #848b91;
}

.red-pin {
	background: url('../images/red-pin.png') no-repeat left center;
	background-size: 10%;
}

.red-pin span {
	color: #f64360;
}

.light-green-pin {
	background: url('../images/light-green-pin.png') no-repeat left center;
	background-size: 10%;
}

.light-green-pin span {
	color: #90fff2;
}

.aqua-pin {
	background: url('../images/aqua-pin.png') no-repeat left center;
	background-size: 10%;
}

.aqua-pin span {
	color: #1bd311;
}

.purple-pin {
	background: url('../images/purple-pin.png') no-repeat left center;
	background-size: 10%;
}

.purple-pin span {
	color: #772adb;
}

.stories .full .two-thirds:not(.auto-margin) h1 {
	width: 96%;
	margin: 50px 2%;
	font-size: 1.5em;
	line-height: 1.2em;
}

.stories a {
	color: #f64360;
}

.faq .light-green-text {
	font-family: FFDINWebProMedium;
	color: #5ac8c4;
}

.faq p {
	margin-bottom: 10px;
	width: 65%;
	line-height: 1.2em;
}

.form-container {
	position: relative;
	width: 60%;
	top: 126px;
}

.socials {
	position: fixed;
	top: 126px;
	width: 40%;
	height: 82%;
	right: 0;
}

.socials ul {
	width: 100%;
	height: 100%;
	float: left;
}

.socials ul li {
	width: 50%;
	float: left;
	height: 50%;
}

.socials ul li {
	background-color: #858c91;
}

.socials ul li:hover {
	background-color: #f64360;
}

.socials ul li:nth-child(2), .socials ul li:nth-child(3) {
	background-color: #adb2b6;
}

.socials ul li:nth-child(2):hover, .socials ul li:nth-child(3):hover {
	background-color: #f64360;
}

.form {
	width: 70%;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	border-top: 1px solid #848b91;
	color: #848b91;
}

.form .one-third {
	width: 31.5%;
	padding: 0 1.5% 0 0;
	height: 80px;
}

.form .two-thirds {
	height: 80px;
}

.form .full {
	width: 98.5%;
	padding: 0 1.5% 0 0;
}

.form h5 {
	margin-top: 35px;
	color: #f64360;
	font-family: FFDINWebProMedium;
	font-size: 1.25em;
	letter-spacing: 1px;
}

.form input, .form select {
	width: 100%;
	background: transparent;
	border-bottom: 2px solid #47525a;
	border-top: none;
	border-left: none;
	border-right: none;
	font-size: 0.875em;
	color: white;
	padding: 10px 0;
	font-family: FFDINWebProLight;
}

.form input[type="checkbox"] {
	width: 10%;
}

.form select {
	height: 36px;
}

.form button {
	width: 70%;
	background: transparent;
	border-bottom: 2px solid #47525a;
	border-top: 2px solid #47525a;
	border-left: none;
	border-right: none;
	font-size: 0.875em;
	color: #848b91;
	padding: 20px 0;
	font-family: FFDINWebProLight;
	cursor: pointer;
}

.form small {
	font-size: 0.75em;
}

.form p {
	width: 80%;
	margin-left: 5%;
}

.form .text-box-top {
	border-top: 1px solid #47525a;
	padding: 10px 0;
}

.form .text-box {
	border-top: 2px solid #47525a;
	border-bottom: 2px solid #47525a;
	padding: 17px 0;
}

.socials .email, .socials .twitter, .socials .instagram, .socials .facebook {
	width: 50%;
    height: 50%;
    text-indent: -99999px;
    position: absolute;
    overflow: hidden;
    -webkit-transition: background-position 0.4s ease-in-out;
    -moz-transition: background-position 0.4s ease-in-out;
    -o-transition: background-position 0.4s ease-in-out;
    transition: background-position 0.4s ease-in-out;
}

.socials .email:before {
	content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('../images/contact-email2.png') no-repeat center -30px;
    background-size: 55%;
    -webkit-transition: background-position 0.4s ease-in-out;
    -moz-transition: background-position 0.4s ease-in-out;
    -o-transition: background-position 0.4s ease-in-out;
    transition: background-position 0.4s ease-in-out;
}

.socials .email:hover:before {
	background-position: center center;
}

.socials .email:after {
	content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('../images/contact-email.png') no-repeat center center;
    background-size: 70%;
    -webkit-transition: background-position 0.4s ease-in-out;
    -moz-transition: background-position 0.4s ease-in-out;
    -o-transition: background-position 0.4s ease-in-out;
    transition: background-position 0.4s ease-in-out;
}

.socials .email:hover:after {
	background-position: center 120%;
}

.socials .twitter:before {
	content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('../images/contact-twitter2.png') no-repeat center -30px;
    background-size: 55%;
    -webkit-transition: background-position 0.4s ease-in-out;
    -moz-transition: background-position 0.4s ease-in-out;
    -o-transition: background-position 0.4s ease-in-out;
    transition: background-position 0.4s ease-in-out;
}

.socials .twitter:hover:before {
	background-position: center center;
}

.socials .twitter:after {
	content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('../images/contact-twitter.png') no-repeat center center;
    background-size: 70%;
    -webkit-transition: background-position 0.4s ease-in-out;
    -moz-transition: background-position 0.4s ease-in-out;
    -o-transition: background-position 0.4s ease-in-out;
    transition: background-position 0.4s ease-in-out;
}

.socials .twitter:hover:after {
	background-position: center 120%;
}

.socials .instagram:before {
	content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('../images/contact-instagram2.png') no-repeat center -30px;
    background-size: 55%;
    -webkit-transition: background-position 0.4s ease-in-out;
    -moz-transition: background-position 0.4s ease-in-out;
    -o-transition: background-position 0.4s ease-in-out;
    transition: background-position 0.4s ease-in-out;
}

.socials .instagram:hover:before {
	background-position: center center;
}

.socials .instagram:after {
	content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('../images/contact-instagram.png') no-repeat center center;
    background-size: 70%;
    -webkit-transition: background-position 0.4s ease-in-out;
    -moz-transition: background-position 0.4s ease-in-out;
    -o-transition: background-position 0.4s ease-in-out;
    transition: background-position 0.4s ease-in-out;
}

.socials .instagram:hover:after {
	background-position: center 120%;
}

.socials .facebook:before {
	content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('../images/contact-facebook2.png') no-repeat center -30px;
    background-size: 55%;
    -webkit-transition: background-position 0.4s ease-in-out;
    -moz-transition: background-position 0.4s ease-in-out;
    -o-transition: background-position 0.4s ease-in-out;
    transition: background-position 0.4s ease-in-out;
}

.socials .facebook:hover:before {
	background-position: center center;
}

.socials .facebook:after {
	content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('../images/contact-facebook.png') no-repeat center center;
    background-size: 70%;
    -webkit-transition: background-position 0.4s ease-in-out;
    -moz-transition: background-position 0.4s ease-in-out;
    -o-transition: background-position 0.4s ease-in-out;
    transition: background-position 0.4s ease-in-out;
}

.socials .facebook:hover:after {
	background-position: center 120%;
}

.contact-details .one-third a {
	width: 100%;
	background: url('../images/footer-phone.png') no-repeat left center;
	background-size: 9%;
	position: absolute;
	text-indent: 30px;
	color: #848b91;
	text-decoration: none;
}

.contact-details .two-thirds a {
	width: 100%;
	background: url('../images/footer-map.png') no-repeat left center;
	background-size: 3%;
	position: absolute;
	text-indent: 30px;
	color: #848b91;
	text-decoration: none;
}

.accordion {
	width: 70%;
	margin: 0 auto;
}

.accordion label {
	position: relative;
	z-index: 20;
	display: block;
	padding: 10px;
	color: #f64360;
	cursor: pointer;
}

.accordion label:after {
	content: '+';
	position: absolute;
	width: 24px;
	height: 24px;
	right: 0px;
	top: 7px;
}

.accordion input:checked + label:after {
	content: '-';
	position: absolute;
	width: 24px;
	height: 24px;
	right: -2px;
	top: 7px;
}

.accordion input {
	display: none;
}

.accordion article {
	margin-top: 10px;
	overflow: hidden;
	height: 0px;
	position: relative;
	z-index: 10;
	transition: height 0.2s ease-in-out, box-shadow 0.6s linear;
	padding-left: 10px;
}

.accordion input:checked ~ article {
	transition: height 0.2s ease-in-out, box-shadow0.1s linear;
	box-shadow:  0px 0px 0px 1px rgba (155, 155, 155, 0.3);
}

.accordion input:checked ~ article.ac {
	height: 160px;
}

.image {
	background-size: 102.5% !important;
    transition: all .2s ease-in-out;
}

.home .about-us:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: url('../images/01_home_about_us_circle.png') no-repeat center center;
	background-size: 30%;
	-webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

.home .about-us:hover:before {
	background-size: 35%;
}

.home .storiesfaq:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: url('../images/04_stories+faqs_circle.png') no-repeat center center;
	background-size: 30%;
	-webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

.home .storiesfaq:hover:before {
	background-size: 35%;
}

.home .studiolocation:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: url('../images/05_home_studio+location_circle.png') no-repeat center center;
	background-size: 30%;
	-webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

.home .studiolocation:hover:before {
	background-size: 35%;
}

.home .video:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: url('../images/06_home_video_play_circle.png') no-repeat center center;
	background-size: 17%;
	-webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

.home .video:hover:before {
	background-size: 22%;
}

.image-icon {
	background-size: 100% !important;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}

.videoWrapperHome {
	position: relative;
	padding-top: 25px;
	height: 0;
	padding-bottom: 31%; /* 16:9 */
}

.videoWrapper iframe, .videoWrapperHome iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.cd-container {
  width: 90%;
  max-width: 768px;
  margin: 2em auto;
}

.cd-container::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}

.cd-top {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 40px solid #f64360;
    position: relative;
    float: left;
    margin: -46px 50%;
    left: -25px;
    color: white !important;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 52px;
    font-size: 0.85em;
    -webkit-transition: border 0.3s ease-in-out;
    -moz-transition: border 0.3s ease-in-out;
    -o-transition: border 0.3s ease-in-out;
    transition: border 0.3s ease-in-out;
    font-family: 'FFDINWebProMedium';
}

.cd-top:hover {
	border-bottom: 40px solid #a0a3a5;
}

.cd-top span {
	width: 25px;
    margin: 0 -10px;
    position: relative;
    float: left;
}

.quotes {
	padding: 30px 0;
}

.quotes h1 {
	font-size: 1.13em;
	width: 60%;
	margin: 0 auto;
}

.stories .half p {
	width: 75%;
    margin: 30px 7%;
    line-height: 1.3em;
    font-size: 1.13em;
    height: auto;
    text-align: left;
}

.stories .half p a {
	position: relative;
    margin-top: 10px;
    float: left;
    font-size: 0.75em; /*12px*/
	font-family: FFDINWebProMedium;
	font-variant: small-caps;
	line-height: 14px; /*LEADING*/
	letter-spacing: 0.01em; /*10 TRACKING*/
	text-transform: uppercase;
	width: 100%;
	text-align: center;
}

.stories .text-box {
	border-top: 1px solid #323e47;
	border-bottom: 1px solid #323e47;
	padding: 35px 0;
}

.stories .image {
	height: 373px;
}

.stories .fixed-height {
	height: 175px;
}

.snap {
	height:340px;
	background-size: 100% !important;
}

.remodal span {
	padding: 15px 0;
	color: #90fff2;
    text-transform: uppercase;
    font-size: 1.13em;
    margin-bottom: 10px;
    float: left;
    text-align: center;
    width: 100%;
}

.remodal p {
	margin: 10px 0;
	float: left;
	text-align: left;
	line-height: 18px;
}

.remodal .half {
	width: 50% !important;
}

.beforeafter {
	height: 373px;
	background-size: 100% !important;
}

.pink-border .one-third:first-child:after {
    content: '+';
    position: absolute;
    top: 47%;
    right: -3%;
    color: #f64360;
    font-size: 2em;
    z-index: 999999;
    font-family: FFDINWebProMedium;
}

.pink-border .one-third:last-child:before {
	content: '+';
    position: absolute;
    top: 47%;
    left: -3%;
    color: #f64360;
    font-size: 2em;
    z-index: 999999;
    font-family: FFDINWebProMedium;
}

/* MEDIA QUERIES */
@media screen and (max-width: 1079px) {
	#container {
		width: 95%;
		padding-left: 5%;
	}
	#top-header {
		background-position: 6% 32px;
		background-size: 24%;
	}
	#menu-nav ul {
		margin-left: 30%;
		width: 100%;
	}
	#widgets-bar {
		width: 100%;
    	max-width: 310px;
    	position: relative;
    	margin-bottom: 35px;
    	height: 15px;
	}
	#widgets-bar ul li {
		width: 20%;
		float: left;
		text-align: center;
	}
	#content {
		float: left;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
	}
	#bottom-footer {
		margin-top: 100px;
	}
	#footer-content {
		max-width: 90%;
	}
	#details ul li {
		width: 26%;
		padding-left: 6%;
		text-indent: 0;
	}
	#details a {
		line-height: 20px;
	}
	.price .one-third {
		width: 33.33%;
	}
	.contact-details .two-thirds p {
		background-position: 4% center;
		background-size: 4%;
	}
	.cube {
		height: 270px;
	}
	.form {
		width: 80%;
	}
}
@media screen and (max-width: 964px) {
	label#navtoggler {
		display: block;
	}
	#content {
		width: 95%;
		margin-bottom: 40px;
	}
	#menu-nav {
		display: none;
	}
	.image {
		background-size: 121% !important;
	}
	.form {
		width: 90%;
	}
	.beforeafter {
		background-size: 117% !important;
	}
}
@media screen and (max-width: 838px) {
	#details .two-thirds {
		width: 67%;
	}
	.cube {
		width: 38.9%;
	}
	.two-thirds {
		width: 57.1%;
	}
	.image  {
		background-size: 147% !important;
	}
	.mobile-half .two-thirds {
		width: 66%;
	}
	.image-icon {
		background-size: 130% !important;
	}
	.beforeafter {
		height: 373px;
		max-height: 396px;
		background-size: 130% !important;
		background-color: #5ac8c4 !important;
	}
}

@media screen and (max-width: 800px) {
	#details .email {
		background-position: 5px center;
	}
	#details .phone {
		background-position: 13px center;
	}
	#details .instagram {
		background-position: 2px center;
	}
	#details .map {
		background-position: 7px center;
	}
	#details .facebook {
		background-position: 11px center;
	}
	#details .twitter {
		background-position: 2px center;
	}
	.image {
		background-size: 157% !important;
	}
	.costs .two-thirds, .map-details .two-thirds, .auto-margin {
		width: 80%;
	}
	.stories .cube {
		width: 42%;
	}
	.stories .two-thirds:not(.auto-margin) {
		width: 53.95%;
	}
	.map-details .two-thirds {
		width: 100%;
	}
	.form-container {
		width: 100%;
	}
	.socials {
		display: none;
	}
	.contact-details .two-thirds a {
		background-size: 3.4%;
	}
	.contact-details .one-third a {
		background-size: 8.3%;
	}
}
@media screen and (max-width: 750px) {
	h1 {
		width: 60%;
		margin: 0 auto;
	}
	#content {
		width: 100%;
	}
	#container {
		padding: 0;
		margin: 126px 0 0 0;
		max-width: 100%;
		width: 100%;
	}
	#top-header {
		background-position: 8% 40%;
		background-size: 40%;
	}
	#widgets-bar {
		border: 0;
		background-color: #d6d8da;
		max-width: 100%;
		padding: 25px 0;
		margin: 0;
	}
	#widgets-bar ul {
		width: 50%;
    	margin-left: 50%;
    	left: -20%;
    	position: relative;
	}
	#widgets-bar ul li:last-child {
		display: none;
	}
	#content {
		float: none;
	}
	#footer-content {
		border: none;
		margin: 0 auto;
	}
	#details {
		border: none;
	}
	#details ul {
		width: 80%;
    	margin: 0 auto;
	}
	#details .one-third {
		width: 100%;
		text-align: center;
	}
	#details .two-thirds {
		width: 100%;
    	margin: 35px auto;
	}
	#credits {
		display: none;
	}
	.body-bg {
		background-color: white;
	}
	.cube {
		width: 96%;
		text-align: center;
		height: 200px;
	}
	.cube a {
		width: 100%;
		left: 0;
		bottom: 40px;
	}
	.two-thirds {
		width: 100%;
	}
	.image {
		background-size: 100% !important;
	}
	.mobile-hide {
		display: none;
	}
	.mobile-half .two-thirds {
		width: 100%;
	}
	.image-icon {
		background-size: 100% !important;
	}
	.programs {
		height: 500px;
	}
	.programs .one-third {
		width: 50%;
		height: 190px;
	}
	.about .cube, .price .cube, .studio .cube {
		height: auto;
	}
	.price .one-third {
		width: 33.335%;
	}
	.stories .cube {
		text-align: left;
	}
	.stories .two-thirds:not(.auto-margin) {
		height: 240px;
	}
	.contact .two-thirds {
		width: 58%;
	}
	.cd-top {
    	right: 20px;
    	bottom: 20px;
  	}
  	.beforeafter {
    	height: 356px;
    	background-size: 100% !important;
	}
	.pink-border .one-third:first-child:after, .pink-border .one-third:last-child:before {
		display: none;
	}
}
@media screen and (max-width: 640px) {
	h1 {
		width: 95%;
		font-size: 0.875em;
		line-height: 18px;
	}
	#top-header {
		background-size: 55%;
		height: 80px;
	}
	#container {
		margin: 86px 0 0 0;
	}
	#navtoggler {
		top: 35px;
	}
	#widgets-bar {
		max-width: 100%;
		margin-bottom: 0;
	}
	#widgets-bar ul {
		width: 75%;
    	margin-left: -37.5%;
    	left: 50%;
	}
	#widgets-bar ul li {
		width: 25%;
	}
	#widgets-bar .email {
		background-position: 45% 3px;
	}
	#widgets-bar .map {
		background-position: 45% 0px;
	}
	#widgets-bar .instagram {
		background-position: 45% 3px;
	}
	#widgets-bar .phone {
		background-position: 45% 0px;
	}
	#content {
		margin-bottom: 86px;
	}
	#offcanvas-menu {
		top: 60px;
	}
	#bottom-footer {
		border-bottom: none;
	}
	.contact #bottom-footer {
		top: 86px;
	}
	#details {
		padding: 30px 0;
	}
	#details .one-third {
		text-align: left;
	}
	#details .one-third .grey-text {
		display: none;
	}
	#details .two-thirds {
		margin: 0;
		border-top: 1px solid #adb2b6;
		border-bottom: 1px solid #adb2b6;
		padding: 25px 0;
	}
	#details ul {
		width: 100%;
	}
	#details ul li {
		width: 100%;
		padding-left: 5%;
	}
	#details .instagram, #details .facebook, #details .twitter, #map, .studio .dark-grey-bg, .bold-box .one-third  {
		display: none;
	}
	#details .email, #details .phone, #details .map {
		background-position: 5px center;
    	text-indent: 15px;
	}
	#details .email {
		background-size: 20px;
	}
	#details .phone {
		background-size: 18px;
	}
	#details .map {
		background-size: 14px;
	}
	#details ul li:nth-child(5) {
		margin-bottom: 0;
		margin-top: -20px;
	}
	#details ul li:nth-child(6) {
		margin-bottom: 0;
		float: right;
		margin-top: -20px;
	}
	.anchors {
		height: 80px;
    	margin-top: -80px;
	}
	.contact footer {
		display: block;
	}
	.cube {
		height: auto;
	}
	.two-thirds {
		height: 155px;
	}
	.programs {
		height: 345px;
	}
	.half {
		width: 100%;
    	margin-bottom: 20px;
	}
	.bold-box .one-third {
		width: 100%;
	}
	.bold-box .one-third ul {
		width: 90%;
		margin: 10px auto;
	}
	.stories .cube {
		width: 96%;
	}
	.stories .two-thirds:not(.auto-margin) {
		width: 100%;
		height: auto;
	}
	.stories .half {
		width: 100%;
		margin-bottom: 0;
	}
	.accordion {
		width: 100%;
	}
	.accordion label {
		width: 80%;
	}
	.accordion label:after , .accordion input:checked + label:after {
		right: -30px;
	}
	.form-container {
		top: 86px;
	}
	.form {
		border: none;
	}
	.form h5 {
		text-align: center;
		font-size: 1.13em;
	}
	.form .one-third {
		width: 100%;
	}
	.form .full .one-third:nth-child(5), .form .full .one-third:nth-child(6) {
		width: 48%;
	}
	.form .text-box-top {
		margin-top: 20px;
	}
	.form .half .half {
		width: 50%;
	}
	.form .text-box {
		width: 100%;
		margin: 0;
	}
	.form .full.left.text-box-top {
		display: none;
	}
	.contact-details {
		margin-bottom: 50px;
	}
	.contact-details .one-third, .contact .two-thirds {
		width: 100%;
		height: 20px;
	}
	.contact-details .one-third a {
		background-size: 6.3%;
	}
	.contact-details .two-thirds a {
		background-size: 4.4%;
		background-position: 1% center;
	}
	.socials {
		display: block;
	    position: relative;
	    width: 100%;
	    top: 86px;
	    float: left;
	    left: 0;
	    height: auto;
	}
	.socials ul {
		height: auto;
	}
	.socials ul li {
		height: 187px;
		width: 100%;
	}
	.socials ul li:nth-child(2n) {
    	background-color: #adb2b6;
	}
	.socials ul li:nth-child(3) {
		background-color: #858c91;
	}
	.socials .email, .socials .twitter, .socials .facebook, .socials .instagram {
		width: 100%;
		height: 187px;
	}
	.socials .email:hover:after, .socials .twitter:hover:after, .socials .instagram:hover:after, .socials .facebook:hover:after {
    	background-position: center 125%;
	}
	.about .bold-box p {
		width: 90%;
	}
	.price .one-third {
		width: 100%;
	}
	.accordion input:checked ~ article.ac {
		height: 180px;
	}
	.tight {
		height: 106px;
		width: 50%;
	}
	.home .half {
		margin-bottom: 0;
	}
	.faq p {
		width: 90%;
	}
	.cd-top {
		margin: -26px 50%;
    	left: -50px;

	}
	.studio .margin-35, .stories .margin-35, .price .margin-35, .about .margin-35 {
		margin: 0;
	}
	.studio .text-box {
		border: none;
		padding: 0;
	}
	.quotes h1 {
		width: 95%;
		font-size: 0.875em;
		line-height: 18px;
	}
	.beforeafter {
		height: 356px;
	}
	.achors {
		height: 80px;
    	margin-top: -80px;
	}
	.stories .half p {
		width: 90%;
		font-size: 0.875em;
		text-align: center;
		line-height: 18px;
		margin: 30px 5%;
	}
	.stories .fixed-height {
		height: 165px;
	}
	.stories .half p span:nth-child(3) {
		float: left;
	}
	.stories .half p a {
		float: none;
		top: 10px;
	}
	.stories .text-box {
		border: 0;
	}
	.price a {
	    width: 100%;
	    float: left;
	    margin: 10px 0;
	}
	.price .title p {
		width: 85%;
    	margin: 0 auto;
    	font-size: 0.875em;
    	line-height: 20px;
	}
	.price .text-box {
		border: none;
	}
	.price .final-text {
		margin-top: 35px;
	}
	.price ul li {
		width: 80%;
	}
	.pink-border .one-third {
		height: 185px;
	}
	.pink-border .one-third img {
		width: 50%;
		margin: 0 24%;
	}
	.grey-text-box .one-third p {
		margin-bottom: 15px;
	}
	.costs {
		padding: 0;
	}
	.costs .two-thirds {
		width: 80%;
		padding: 50px 10%;
		line-height: 1.2em;
	}
	.costs .two-thirds:first-child {
		margin: 0;
	}
	/* .costs .two-thirds:last-child {
		background-color: #5ac7c3;
	} */
	.bold-box {
		padding: 0;
		background-color: #90fff2;
	}
	.bold-box .text-box {
		padding: 10px 0;
		background-color: transparent;
	}
	.bold-box .one-third:first-child {
    	display: block;
    	background-color: #323e47;
	}
	.bold-box .one-third:first-child p {
		font-size: 0.875em;
		line-height: 18px;
		margin: 10px auto;
	}
	.about .text-box-top {
		padding: 0;
		border: none;
	}
	.home .cube {
		padding: 20px 2% 40px 2%;
	}
	.rearrange {
		display: flex;
		flex-flow: column;
		width: 100%;
	}
	.home .rearrange div {
		order: 2;
	}
	.about .rearrange div:first-child, .price .rearrange div:first-child, .studio .rearrange div:first-child {
		order: 2;
	}
	.stories .rearrange div:nth-child(1) {
		order: 1;
	}
	.stories .rearrange div:nth-child(2) {
		order: 0;
	}
	.stories .rearrange div:nth-child(3) {
		order: 2;
	}
	.stories .rearrange div:nth-child(4) {
		order: 3;
	}
	.text-box .half p, .text-box-top .half p {
		width: 90%;
	}

}
@media screen and (max-width: 320px) {
	.beforeafter {
		height: 271px;
	}
}