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



/* reset */

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: baseline
}

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
}

/* core css */

html, body { overflow: hidden; }

.background {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  height: 130vh;
  position: fixed;
  width: 100%;
  -webkit-transform: translateY(20vh);
  -ms-transform: translateY(20vh);
  transform: translateY(20vh);
  -webkit-transition: all 1.4s cubic-bezier(0.22, 0.44, 0, 1);
  /*transition: all 1.4s cubic-bezier(0.22, 0.44, 0, 1);*/
  transition: transform 10ms linear;
}

.background:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
/*   background-color: rgba(0, 0, 0, 0.3); */
}

.background:first-child {
  background-image: url(../public/Slider/back_default.jpg);
  -webkit-transform: translateY(-10vh);
  -ms-transform: translateY(-10vh);
  transform: translateY(-10vh);
}

.background:first-child .content-wrapper {
  -webkit-transform: translateY(10vh);
  -ms-transform: translateY(10vh);
  transform: translateY(10vh);
}

.background:nth-child(2) { background-image: url(../public/Slider/background_product.jpg); background-size: cover; background-position: center center;}

.background:nth-child(3) { background-image: url(../public/Slider/abstract.jpg); background-size: cover; background-position: left center;}

.background:nth-child(4) { background-image: url(../public/Slider/background_footer.jpg); background-size: cover; background-position: center center;}

/* .background:nth-child(5) { background-image: url(../public/Slider/background_contact.jpg); }  */


/* Set stacking context of slides */

.background:nth-child(1) { z-index: 99995; }

.background:nth-child(2) { z-index: 99994; }

.background:nth-child(3) { z-index: 99993; }

.background:nth-child(4) { z-index: 99992; }

/* .background:nth-child(5) { z-index: 1; }  */

.content-wrapper 
{
  height: 100vh;
  width: 100vw;
  margin-left: 1vw;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  color: #FFFFFF;
  font-family: Montserrat;
  -webkit-transform: translateY(40vh);
  -ms-transform: translateY(40vh);
  transform: translateY(40vh);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all 1.9s cubic-bezier(0.22, 0.44, 0, 1);
  transition: all 1.9s cubic-bezier(0.22, 0.44, 0, 1);
}

.content-title {
  font-size: 18vh;
  line-height: 1.4vh;
  color: #FFC34F;
  height: 15%;
  display: block;
  text-transform: uppercase;
}

.content-subtitle {
  font-size: 5vh;
  font-weight: bold;
  line-height: 1vh;
  color: #000000;
  height: 6%;
  display: block;
  text-transform: uppercase;
}



@media (min-width: 980px) and (max-width: 1199px) {
	.content-title {
	  font-size: 16vh;
	  line-height: 1.4vh;
	  color: #FFC34F;
	  height: 15%;
	  display: block;
	  text-transform: uppercase;
	}

	.content-subtitle {
	  font-size: 4vh;
	  font-weight: bold;
	  line-height: 1vh;
	  color: #000000;
	  height: 6%;
	  display: block;
	  text-transform: uppercase;
	}

}


@media (min-width: 700px) and (max-width: 979px) {
	.content-title {
	  font-size: 13vh;
	  line-height: 1.4vh;
	  color: #FFC34F;
	  height: 15%;
	  display: block;
	  text-transform: uppercase;
	}

	.content-subtitle {
	  font-size: 3vh;
	  font-weight: bold;
	  line-height: 1vh;
	  color: #000000;
	  height: 6%;
	  display: block;
	  text-transform: uppercase;
	}

}


@media (min-width: 551px) and (max-width: 699px) {
	.content-title {
	  font-size: 9vh;
	  line-height: 1.4vh;
	  color: #FFC34F;
	  height: 15%;
	  display: block;
	  text-transform: uppercase;
	}

	.content-subtitle {
	  font-size: 2vh;
	  font-weight: bold;
	  line-height: 1vh;
	  color: #000000;
	  height: 6%;
	  display: block;
	  text-transform: uppercase;
	}

}

@media (min-width: 451px) and (max-width: 550px) {
	.content-title {
	  font-size: 8vh;
	  line-height: 1.4vh;
	  color: #FFC34F;
	  height: 15%;
	  display: block;
	  text-transform: uppercase;
	}

	.content-subtitle {
	  font-size: 2vh;
	  font-weight: bold;
	  line-height: 1vh;
	  color: #000000;
	  height: 6%;
	  display: block;
	  text-transform: uppercase;
	}

}


@media (max-width: 450px) {

	.content-title {
	  font-size: 6vh;
	  line-height: 1.4vh;
	  color: #FFC34F;
	  height: 15%;
	  display: block;
	  text-transform: uppercase;
	}

	.content-subtitle {
	  font-size: 1.7vh;
	  font-weight: bold;
	  line-height: 1vh;
	  color: #000000;
	  height: 6%;
	  display: block;
	  text-transform: uppercase;
	}
	
}