/*!
 * global stylesheet v1.0.0
 * http://www.youmeusdesign.com/
 *
 * Date: 2020-01-20
 *
 * The .carousel height is 748px so if we want to calculate the
 * percentage a 60px element e.g
 * 60px / 748px = 0.080213903743316 x 100 = 8.021390374331551 %
 *
 * ---- CSS RESET
 * ---- MENU
 * ---- LOGO
 * ---- BACKGROUNDS
 * ---- CAPTION FADE
 * ---- ABSOLUTE
 * ---- DESCRIPTION
 * ---- TILE DESCRIPTION
 * ---- AWARD
 * ---- CONTACT
 * ---- NEWSLETTER, BROCHUREREQUEST, BUY FORM
 * ---- FOOTER
 * ---- BUY BUTTON 2
 * ---- DEVELOPER COLOURS
 *
 */

/* ---- CSS RESET ---- */

/* remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd,
strong {
	margin: 0;
	font:inherit;
}

/* ---- MENU ---- */

#menu .menu-block {
	z-index:200;
	position:absolute;
	display:block;
	width:100%;
	height:125px;
	margin:0;
	padding:10px 0 0 0;
	pointer-events:none;
}

#menu .menu-block li {
	display:block;
	cursor:pointer;
	width:86px;
	height:90px;
	margin:10px 5px 25px 40px;
	padding:0;
	background-image:url(../media/menu/menu_icon_youmeus_logo.svg);
	pointer-events:auto;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}

#menu .menu-main {
	display:none;
	position:absolute;
	width:100%;
	left:0;
	top:0;
	margin:0;
	padding:10px 0 10px 0;
	background-color:#f2f2f2;
}

#menu .menu-main .wrapper {
	width:100%;
}

#menu .menu-main li {
	background-image:none;
}

#menu .menu-main .icon-square {
	display:block;
	float:left;
	cursor:pointer;
	width:86px;
	height:106px;
	margin:10px 33px 25px 40px;
	padding:0;
	font-family:"HelveticaNeueW01-Thin";
	font-size:12px;
	text-align:center;
	line-height:15px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}

#menu .menu-main .icon-rectangle {
	display:block;
	float:left;
	cursor:pointer;
	width:126px;
	height:106px;
	margin:10px 13px 25px 20px;
	padding:0;
	font-family:"HelveticaNeueW01-Thin";
	font-size:12px;
	text-align:center;
	line-height:15px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}

#menu .menu-main .icon-square a,
#menu .menu-main .icon-rectangle a {
	text-decoration:none;
	color:#f6f6f6;
}

#menu .menu-main .icon-square a:hover,
#menu .menu-main .icon-rectangle a:hover {
	color:#959595;
}

#menu .menu-main .text {
	display:block;
	float:left;
	cursor:pointer;
	width:82px;
	height:106px;
	margin:10px 33px 25px 40px;
	padding:0 0 0 4px;
	font-family:"HelveticaNeueW01-Thin";
	font-size:16px;
	text-align:left;
	line-height:22px;
}

#menu .menu-main .text a {
	text-decoration:none;
	color:#343434;
}

#menu .menu-main .text a:hover {
	color:#999999;
}

/* ---- LOGO ---- */

.logo {
	position:absolute;
	z-index:200;
	display:block;
	width:86px;
	height:90px;
	margin:20px 5px 25px 40px;
	padding:0;
}

/* ---- BACKGROUNDS ---- */

.background-grey {
	background-color:#f6f6f6;
}

.background-grey2 {
	background-color:#fdfdfd;
}

/* ---- CAPTION FADE ---- */

.caption-fade {
	position:relative;
	float:left;
	padding:0;
	margin:0;
}

.caption-fade .fade-in {
	position:absolute;
	display:none;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background-color:#f6f6f6;
}

.caption-fade .fade-out,
.caption-fade .fade-none {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background-color:#f6f6f6;
}

.caption-fade .no-background {
	background-color:transparent;
}

.caption-fade .fade-in img,
.caption-fade .fade-out img,
.caption-fade .fade-none img {
	position:absolute;
	display:block;
	float:right;
}

.caption-fade img,
.caption-fade img,
.caption-fade img {
	color:#f6f6f6;
}

.caption-fade .fade-in .caption-text,
.caption-fade .fade-out .caption-text,
.caption-fade .fade-none .caption-text,
.caption-ticker .caption-text {
	position:absolute;
	bottom:0px; /* 5% of carousel height % */
	left:0;
}

.caption-fade .fade-in .caption-text h2,
.caption-fade .fade-out .caption-text h2,
.caption-fade .fade-none .caption-text h2,
.caption-ticker .caption-text h2 {
	font-family:"HelveticaNeueW01-Thin";
	font-size:0px; /* 2.2% of carousel height % */
	line-height:125%;
	padding-right:0px; /* 5% of carousel height % */
	padding-bottom:0px; /* 0.8% of carousel height % */
	padding-left:0px; /* 5% of carousel height % */
	text-transform:uppercase;
	color:#333333;
}

.caption-fade .fade-in .caption-text p,
.caption-fade .fade-out .caption-text p,
.caption-fade .fade-none .caption-text p,
.caption-ticker .caption-text p {
	font-family:"HelveticaNeueW01-Thin";
	font-size:0px; /* 2.2% of carousel height % */
	line-height:140%;
	padding-right:0px; /* 5% of carousel height % */
	padding-bottom:0px; /* 0.8% of carousel height % */
	padding-left:0px; /* 5% of carousel height % */
	color:#333333;
}

.caption-fade .fade-in .caption-text time,
.caption-fade .fade-out .caption-text time,
.caption-fade .fade-none .caption-text time,
.caption-ticker .caption-text time {
	font-family:"HelveticaNeueW01-Thin";
	font-size:0px; /* 0.8% of carousel height % */
	line-height:125%;
	padding-left:0px; /* 5% of carousel height % */
	color:#969696;
}

.caption-fade .fade-in .caption-text a,
.caption-fade .fade-out .caption-text a,
.caption-fade .fade-none .caption-text a,
.caption-ticker .caption-text a {
	text-decoration:none;
	color:#969696;
}

.caption-fade .fade-in .caption-text a:hover,
.caption-fade .fade-out .caption-text a:hover,
.caption-fade .fade-none .caption-text a:hover,
.caption-ticker .caption-text a:hover {
	text-decoration:underline;
}

/* ---- ABSOLUTE ---- */

.absolute {
	position:absolute;
	top:0;
	left:0;
}

/* ---- DESCRIPTION ---- */

.project-description-title {
	position:absolute;
	bottom: 0px; /* 7.5% of carousel height % */
	left:0;
}

.project-description-title h1 {
	font-family:"HelveticaNeueW01-Thin";
	font-size:0px; /* 1.8% of carousel height % */
	line-height:140%;
	padding-bottom:0px; /* .7% of carousel height % */
	color:#333333;
}

.about-description p,
.services-description p,
.project-description p,
.clients-description p {
	font-family:"HelveticaNeueW01-Thin";
	font-size:0px; /* 2.6% of carousel height % */
	line-height:140%;
	padding-bottom:0px; /* 1.2% of carousel height % */
	color:#333333;
}

.about-poem p {
	font-family:"HelveticaNeueW01-Thin";
	font-size:0px; /* 2.6% of carousel height % */
	line-height:140%;
	padding-bottom:0px; /* 1.2% of carousel height % */
	color:#333333;
}

.about-description-small p,
.services-description-small p,
.project-description-small p,
.clients-description p {
	font-family:"HelveticaNeueW01-Thin";
	font-size:0px; /* 1.8% of carousel height % */
	line-height:140%;
	padding-bottom:0px; /* .7% of carousel height % */
	color:#333333;
}

.about-poem p strong,
.about-description p strong,
.services-description p strong,
.project-description p strong,
.clients-description p strong,
.about-description-small p strong,
.services-description-small p strong,
.project-description-small p strong,
.clients-description p strong {
	font-family:"HelveticaNeueW01-45Ligh";
}

.about-poem p u,
.about-description p u,
.services-description p u,
.project-description p u,
.clients-description p u,
.about-description-small p u,
.services-description-small p u,
.project-description-small p u,
.clients-description p u {
	text-decoration: none;
	color:#C3C3C3;
}

.about-poem p i,
.about-description p i,
.services-description p i,
.project-description p i,
.clients-description p i,
.about-description-small p i,
.services-description-small p i,
.project-description-small p i,
.clients-description-small p i {
	font-style: normal;
	color:#C3C3C3;
}

.about-poem p a,
.about-description p a,
.services-description p a,
.project-description p a,
.clients-description p a,
.about-description-small p a,
.services-description-small p a,
.project-description-small p a,
.clients-description p a {
	text-decoration:none;
	color:#969696;
}

.about-poem p a:hover,
.about-description p a:hover,
.services-description p a:hover,
.project-description p a:hover,
.clients-description p a:hover,
.about-description-small p a:hover,
.services-description-small p a:hover,
.project-description-small p a:hover,
.clients-description-small p a:hover {
	text-decoration:underline;
}

.justify {
	text-align: justify;
	text-justify: inter-character;
	/*text-justify: inter-word;*/
}

/* ---- TILE DESCRIPTION ---- */

.tile-description p {
	font-family:"HelveticaNeueW01-Thin";
	font-size:0px; /* 1% of carousel height % */
	line-height:135%;
	margin-top: 0px; /* 1.8% of carousel height % */
	padding-bottom:0px; /* .5% of carousel height % */
	color:#969696;
}

.tile-description p strong {
	font-family:"HelveticaNeueW01-45Ligh";
}

/* ---- AWARD ---- */

.award-icon {
}

.award-logo {
	display:block;
	width:40px!important;
	height:15px!important;
	margin:0;
	padding:6px 0 2px 0;
}

/* ---- CONTACT ---- */

.contact p {
	font-family:"HelveticaNeueW01-Thin";
	font-size:0px; /* 2.2% of carousel height % */
	line-height:140%;
	padding-bottom:0px; /* 1.2% of carousel height % */
	color:#333333;
}

.contact p strong {
	font-family:"HelveticaNeueW01-45Ligh";
}

.contact p i {
	font-style: normal;
	color:#C3C3C3;
}

.contact p a {
	text-decoration:none;
	color:#969696;
}

.contact p a:hover {
	text-decoration:underline;
}

/* ---- NEWSLETTER, BROCHUREREQUEST, BUY FORM ---- */

.newsletter-form {
	position:absolute;
	display:block;
	width:302px;
	height:380px;
	margin:-250px 0 0 -150px;
	padding:0;
	left:50%;
	top:50%;
}

.brochurerequest-form {
	position:absolute;
	display:block;
	width:302px;
	height:620px;
	margin:-400px 0 0 -150px;
	padding:0;
	left:50%;
	top:50%;
}

.buy-form {
	display:block;
	width:302px;
	height:380px;
	padding:0;
	left:0;
	top:0;
}

.newsletter-form input[type=text],
.newsletter-form input[type=password],
.newsletter-form textarea[type=description],
.brochurerequest-form input[type=text],
.brochurerequest-form input[type=password],
.brochurerequest-form textarea[type=description],
.buy-form input[type=text],
.buy-form input[type=password],
.buy-form textarea[type=description] {
	width:280px;
	height:40px;
	margin:4px 10px 4px 10px;
	padding:0;
	border:1px solid #CCCCCC;
	border-radius:0;
	background-color:#f8f7f7;
	font-family:"HelveticaNeueW01-45Ligh";
	font-size:16px;
	text-align:center;
	color:#333333;
	-moz-appearance:none; 
	-webkit-appearance:none; 
	appearance:none;
}

.newsletter-form textarea[type=description],
.brochurerequest-form textarea[type=description],
.buy-form textarea[type=description] {
	height:80px;
}

.newsletter-form .newsletter-select,
.brochurerequest-form .newsletter-select,
.buy-form .buy-select {
	width:280px;
	height:40px;
	margin:4px 10px 4px 10px;
	padding:0 0 0 10px;
	border: 1px solid #CCCCCC;
	border-radius:0;
	font-family:"HelveticaNeueW01-45Ligh";
	font-size:16px;
	text-align:center;
	color:#333333;
	background:url(../media/interface/select_arrows.svg) no-repeat 95% 50%;
	background-color:#F7F7F7;
	-moz-appearance:none; 
	-webkit-appearance:none; 
	appearance:none;
}

.newsletter-button,
.brochurerequest-button,
.buy-button {
	width:282px;
	height:42px;
	margin:4px 10px 4px 10px;
	padding:0;
	border:1px solid #333333;
	background-color:#333333;
	font-family:"HelveticaNeueW01-45Ligh";
	font-size:16px;
	color:#FFFFFF;
	cursor:pointer;
	-moz-appearance:none; 
	-webkit-appearance:none; 
	appearance:none;
}

.newsletter-form .newsletter-button:hover,
.brochurerequest-form .brochurerequest-button:hover,
.buy-form .buy-button:hover {
	background-color:#474747;
}

.newsletter-form .description,
.brochurerequest-form .description {
	display:block;
	width:260px;
	margin:0 20px 10px 20px;
	font-family:"HelveticaNeueW01-Thin";
	font-size:18px;
	line-height:130%;
	text-align:center;
	color:#333333;
}

.buy-form .description {
	display:block;
	width:260px;
	margin:0 20px 10px 20px;
	font-family:"HelveticaNeueW01-Thin";
	font-size:18px;
	line-height:130%;
	text-align:left;
	color:#333333;
}

.newsletter-form .description strong,
.brochurerequest-form .description strong,
.buy-form .description strong {
	font-family:"HelveticaNeueW01-45Ligh";
}

.newsletter-form .footer,
.brochurerequest-form .footer,
.buy-form .footer {
	display:block;
	width:260px;
	margin:10px 20px 0 20px;
	font-family:"HelveticaNeueW01-Thin";
	font-size:12px;
	line-height:130%;
	text-align:center;
	padding:0;
	color:#969696;
}

.H63TEKUERC863F73MBX8 {
	position:absolute;
	top:-1000px;
}

/* ---- BUY BUTTON ---- */

.button {
	width:auto;
	height:36px;
	margin:4px 0 4px 0;
	padding:0 40px 0 40px;
	border:1px solid #CCCCCC;
	background-color:#ffffff;
	font-family:"HelveticaNeueW01-45Ligh";
	font-size:16px;
	color:#969696;
	cursor:pointer;
	-moz-appearance:none; 
	-webkit-appearance:none; 
	appearance:none;
}

.button:hover {
	background-color:#f8f7f7;
}

/* ---- KICKSTARTER BUTTON ---- */

.kickstarter-button {
	width:180px; /* 20% of carousel height % */
	height:36px; /* 4% of carousel height % */
	margin-top:10px;
	background-image:url('../media/interface/kickstarter_logo_grey.svg');
	background-position: center;
	background-size:cover;
	border:2px solid #343434;
	background-color:#ffffff;
	border-radius:4px;
	cursor:pointer;
	-moz-appearance:none; 
	-webkit-appearance:none; 
	appearance:none;
}

.kickstarter-button:hover {
	background-image:url('../media/interface/kickstarter_logo_green.svg');
	border:2px solid #05ce78;
}

/* ---- FOOTER ---- */

#footer,
#footer-homepage,
#footer-form {
	z-index:3;
	position:absolute;
	display:block;
	overflow:hidden;
	white-space:nowrap;
	pointer-events:none;
	bottom:17px;
	right:0;
	height:20px;
}

#footer ul,
#footer-homepage ul,
#footer-form ul {
	float:left; 
	margin:0 25px 0 40px;
	
	display:block;
	overflow:hidden;
	white-space:nowrap;
	pointer-events:none;
}

#footer ul li,
#footer-homepage ul li,
#footer-form ul li {
	display:inline;
	padding:0 5px 0 0;
	font-family:"HelveticaNeueW01-45Ligh";
	font-size:12px;
	color:#969696;
}

#footer a,
#footer-homepage a,
#footer-form a {
	text-decoration:none;
	color:#969696;
}

#footer a:hover,
#footer-homepage a:hover,
#footer-form a:hover {
	color:#333333;
}


/* ---- DEVELOPER COLOURS---- */
/*
.carousel-item {	
	border-right:dotted;
	border-right-width:2pt;
	border-color:#d1d3d4;
}

.project-description,
.project-description-small {
	border-right:solid;
	border-bottom:solid;
	border-right-width:1pt;
	border-bottom-width:1pt;
	border-color:#e6e7e8;

}
*/
