@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

*, *:before, *:after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ADDITION FROM ELODIE */
.about-style{
	    font-size: 24.3px;
    letter-spacing: 0.54px;
    line-height: 29.16px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-bottom: 24.3px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 24.3px;
    font-weight: bold;
}

body {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.125em;
	line-height: 1.5em;
	letter-spacing: 0.03em;
	padding: 0 10px 10px;
	color: #141414;
	opacity: 0;	
	transition: opacity 1s;
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
}

.fontz {
	font-family: 'Conv_icons', arial;
	font-style: normal;
}

a {
	text-decoration: none;
	color: inherit;
}

ul {
	list-style: none;
}

.link {
	cursor: pointer;
}

.fix {
	clear: both;
}

/*HEADER*/

header {
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	z-index: 500;
	font-weight: 700;
	background-color: #fff;
}

header > div {	
	float: left;
	width: 50%;	
	background-color: #fff;
}

header nav {	
	padding: 0 10px 0 5px;
	float: left;
	width: 50%;	
}

header h1 {
	display: inline-block;
}

.logo {
	padding: 1.5em 2em;
	box-shadow: 5px 0 #fff;
}

.menu-title {
	font-size: 1.5em;	
	background-color: #fff;
	padding: 1em;
	cursor: pointer;
}

#mobile-logo {
	display: none;
}

.menu-title i {
	float: right;
	font-size: 1.5em;
	position: relative;
}

.menu-list {	
	background-color: #fff;
	/*padding: 1.5em;	*/
	background-color: #141414;
	color: #fff;
	display: none;
	box-shadow: -10px 0 #fff;
	position: relative;
}

.menu-title.li-open {
	background-color: #141414;
	color: #fff;
	box-shadow: 0 3px #141414;
}

.menu-title:hover {
	color: #ed145b;
}


.menu-list ul {
	font-size: 4em;
	line-height: 1.2em;
	margin-left: .3em;
	padding-top: .3em;
}

.menu-list i {
	font-size: 2em;
	line-height: 1em;
	margin: 2em 1em 1em 0;
}

.menu-list .email {
	font-size: 2em;
}

.menu-list ul li:nth-child(1):hover {
	color: #eab905
}

.menu-list ul li:nth-child(2):hover {
	color: #ed145b;
}
.menu-list ul li:nth-child(3):hover {
	color: #01b0f3;
}
.menu-list ul li:nth-child(4):hover {
	color: #00cc99;
}

#nav-btm {
	position: absolute;
	left: 1.5em;
	bottom: 1.5em;
	width: 100%;
}



/*SLIDER SECTION*/
#slider {
	margin-top: 5em;
	position: relative;
}

#slider .slide {
	position: absolute;
	left:0; top:0;
	width: 100%;
	height: 100%;
}


#slider img {
	width: 100%;
}

#slide-nav {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 5%;
	color: #fff;
	text-align: center;
	z-index: 100;
}

#slide-nav li {
	display: inline-block;
	font-size: 1.5em;
	margin-right: 1em;
	cursor: pointer;
}

.nav-active {
	color: #141414;
}

.slide {
	opacity: 0;
	transition: opacity 1s;
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
}

.slide.sl-active {
	opacity: 1;
}

.slide h1 {
	font-size: 7.5em;
	line-height: 1em;
	margin: .25em .4em;
	color: #fff;
}

#slide2 {
	background-color: #00cc99;
}

#slide4 {
	background-color: #01b0f3;
}



/*BOXES GENERAL*/

.boxes li {
	margin-top: 10px;
	position: relative;
	float: left;
	width: 50%;
	overflow: hidden;
}

.boxes li > img {
	width: 100%;
}

.b-left {
	padding-right: 5px;
}

.b-right {
	padding-left: 5px;
}

.b-left .b-inner, .b-right .b-inner {
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	height: 100%;
	margin-right: 5px;
}

.b-right .b-inner {
	margin-right: 0;
	margin-left: 5px;
}

.b-text.b-left .b-inner {
	margin-right: 10px;
}

.b-text h1, .b-img h1 {
	font-size: 6.5em;
	z-index: 10;
	position: absolute;
	left: 20px;
	bottom: 20px;
	line-height: 1.2em;
	color: #000;	
}


/*B-IMG*/
.b-img .b-inner {
	padding: 20px;
	color: #fff;
	transition: all .5s;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
}

.b-img .b-inner:hover {
	background: -moz-linear-gradient(top, rgba(0,0,0,0.3) 0%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.7)), color-stop(100%,rgba(255,255,255,0)));
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(255,255,255,0) 100%);
	background: -ms-linear-gradient(top, rgba(0,0,0,0.3) 0%,rgba(255,255,255,0) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(255,255,255,0) 100%);
}

.b-img h2 {
	font-size: 1.8em;
	margin-bottom: 10px;
}

.b-img h3 {
	font-size: 1.3em;
	font-weight: 400;
}

.b-img i {
	font-size: 3em;
	position: absolute;
	right: 0;
	top: 0;
	margin-right: 20px;
	margin-top: 20px;
}


/*BACK COLORS*/
.b-yellow {
	background-color: #eab905;
}

.b-pink {
	background-color: #ed145b;
}

.b-blue {
	background-color: #01b0f3;
}

.b-black {
	background-color: #141414;
}

.b-green {
	background-color: #00cc99;
}

.t-white {
	color: #fff !important;
}

/*BRANDS*/

.brands {
	padding: 3em 6em 3em 0;
	text-align: center;
}

.br-box {
	float: left;
	width: 16.66%;
}

.br-box img {
	max-width: 90%;
}

.br-last img {
	float: right;
}

.br-box.pad-up {
	padding-top: 1.2em;
}

/*ABOUT*/

.about-li {
	background-color: #141414;
	color: #fff;
}

.about-inner {
	padding: 2em;
}

#about-btm {
	position: absolute;
	width: 100%;
	left: 2em; bottom: 0;
}

.about-li h1 {
	font-size: 2.5em;
	line-height: 1em;
}

.about-li p {
	font-size: 1.5em;
	line-height: 1.2em;
	margin: 1em 0;
}

.about-li i {
	font-size: 1.5em;
	line-height: 1em;
	margin-right: 1em;
}

.fa-instagram:hover {
	color: #eab905;
}

.fa-linkedin:hover {
	color: #ed145b;
}

.fa-facebook:hover {
	color: #01b0f3;
}

.fa-twitter:hover {
	color: #00cc99;
}

.email:hover {
	color: #eab905;
}


/*OVERLAYS*/

.overlay {
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 700;
	display: none;
}

.overlay .over-img {
	float: left;
	width: 60%;
	padding: 8% 5% 0;	
}

.over-img img {
	width: 100%;
}

.overlay .over-text {
	float: left;
	width: 40%;
	font-size: 1.5em;
	line-height: 1.8em;
	padding: 8% 5% 0 0;
}

.over-text a {
	color: #eab905;
}

.over-text h1 {
	margin-bottom: .5em;
}

.jff {
	background-color: rgba(0,0,0,0.85);
}

.ng-over {
	background-color: rgba(0,0,0,0.85);
}

.overlay i {
	position: absolute;
	font-size: 3em;
	right: 1em;
	bottom: 1em;
	cursor: pointer;
}

.videowrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videowrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}




/*OTHER PAGES*/


.b-cont h1, .b-cont span, .b-cont p {
	z-index: 10;
}

.b-cont h1 {
	float: left;
	width: 80%;
	padding:.5em .5em .1em;
	font-size: 2.5em;
	line-height: 1em;
	font-weight: bold;
}

.b-cont span {
	font-size: 1.5em;
	position: absolute;
	top: 2.5em; right: 1em;
}

.b-cont p {
	font-size: 1.5em;
	line-height: 1.2em;
	padding: 0 1em;
	margin-top: .5em;
}

.b-cont i {
	margin: .3em;
	font-size: 2em;
}


.o-page {
	padding-top: 5em;
}

.b-nav nav {
	position: absolute;
	right: 5%;
	bottom: 5%;
}



.b-nav a:nth-child(1) {
	padding-right: 4em;
}

.b-nav a:nth-child(1):hover {
	color: #eab905;
}

.b-nav a:nth-child(2) {
	padding-left: 3.8em;
}

.b-nav a:nth-child(2):hover {
	color: #00cc99;
}




.b-nav i {
	font-size: 3em;
}

.b-nav a {
	display: block;
	margin-bottom: 1em;
}

.b-nav span {
	font-size: 3em;
	position: relative;	
	top: 0; right: 0;
}




@media screen and (max-width:1500px) {
	.about {
		font-size: 0.9em;
	}

	.slide h1 {
		font-size: 7em;
	}
}



@media screen and (max-width:1300px) {
	body {
		font-size: 1em;
	}

	.slide h1 {
		font-size: 6em;
	}

	.b-cont {
		font-size: .9em;
	}
}

@media screen and (max-width:1140px) {
	body {
		font-size: .9em;
	}

	.slide h1 {
		font-size: 5em;
	}

	.about {
		font-size: 0.8em;
	}
}

@media screen and (max-width:996px) {
	body {
		font-size: .8em;
		padding: .5em 0 10px;
	}
	.slide h1 {
		font-size: 4em;
	}

	.boxes li {
		width: 100%;
		padding: 0;
	}

	.b-inner {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.about {
		font-size: 1.2em;
	}

	header nav {
		width: 100%;
		position: absolute;
		left: 0; top: 0;
		padding: 0;
	}

	#desk-menu {
		display: none;
	}

	#mobile-logo {
		display: inline-block;
	}

	.logo {
		display: none;
	}

	.br-box {
		width: 33.33%
	}

	.br-box:nth-child(1) img {
		max-width: 80%;
	}

	.br-box:nth-child(2) img {
		max-width: 70%;
	}

	.br-box:nth-child(4) {
		clear: both;
	}

	
	.over-img, .over-text {
		width: 100% !important;
	}

	.over-img {
		padding-top: 20% !important;
	}

	.over-text {
		margin-top: 1em;
		padding: 0 5% !important;
	}

	#about-btm {
		position: relative;
		width: 100%;
		left: 0; bottom: 0;
		margin-top: 4em;
	}

	.menu-title:hover {
		color: #141414;
	}

	.li-open:hover {
		color: #fff;
	}

	.menu-title:active {
		color: #ed145b;
	}
}

@media screen and (max-width:660px) {
	body {
		font-size: .7em;
	}

	.br-rock, .br-last {
		padding-top: 2em !important;
	}

	.about {
		font-size: 1.1em;
	}

	.brands {
		padding: 3em 4em 3em 2em;
	}
}

@media screen and (max-width:480px) {
	body {
		font-size: .6em;
		padding: 1.5em 0 10px;
	}

	.slide h1 {
		font-size: 3em;
	}

	.about {
		font-size: 1.2em;
	}

	.menu-title {
		font-size: 2em;
	}

	.menu-list ul {
		margin-left: .5em;
	}

	#nav-btm {
		left: 2.5em;
	}

}

@media screen and (max-width:370px) {
	body {
		font-size: .55em;
	}

	.about {
		font-size: 1.3em;
	}

	.menu-list ul {
		font-size: 3em;
		margin-left: .7em;
	}

	

}