@CHARSET "ISO-8859-1";
/* Reset CSS
 * --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
a{
	text-decoration:none;
}
table {
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
strong{
	font-weight: bold;
}
ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption,th {
    text-align: left;

}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
    margin:0;
    padding:0;
    color:#444;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border: 0;
}


/* Custom CSS
 * --------------------------------------- */


/******************************
 01. Typography
******************************/

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff2') format('woff2'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body, p, a, h1, h2, h3, h4, h5 {
  font-family: 'Roboto', sans-serif;
  color: rgba(255,255,255,0.8);
  text-shadow: 0 0.3rem 0.9rem rgba(0,0,0,.4);
  -webkit-text-shadow: 0 .3rem .9rem rgba(0,0,0,.4);
}


	/* Style for our header texts
	* --------------------------------------- */
	h1{
		font-size: 2em;
		color: #fff;
		margin:0 0 3%;
		padding:0;
	}

	/* Centered texts in each section
	* --------------------------------------- */
	.section{
		text-align:center;
	}


	/* Backgrounds will cover all the section
	* --------------------------------------- */
	.section{
		background-size: cover;
	}
	.slide{
		background-size: cover;
	}

	/* Defining each section background and styles
	* --------------------------------------- */
	#bio,
	#contact {
		background-color: #8FA3A6;
	}

	#bio h1{
		top: 50%;
		transform: translateY(-50%);
		position: relative;
	}

	#unboxing-collection{
		background-image: url(../images/unboxing/sodimac_back.jpg);
		padding: 2% 0 0 0;
	}

	#unboxing-collection h1{
		color: #000;
	}

	#chevrolet-brandTVC{
		background-image: url(../images/brandTVC/TVC_back.jpg);
		padding: 2% 0 0 0;
	}

	#stain-free{
		background-image: url(../images/persil/persil_back.jpg);
		padding: 2% 0 0 0;
	}

	#beat-machine{
		background-image: url(../images/beatmachine/beatmachine_back.jpg);
		padding: 2% 0 0 0;
	}

	#donate-miles{
		background-image: url(../images/aeromexico/aeromexico_back.jpg);
		padding: 2% 0 0 0;
	}



	/*Adding background for the slides
	* --------------------------------------- */
	.slide1,
	.slide2,
	.slide3 {
		background-image: url(../images/driveanddraw/driveanddraw_back.jpg);
		padding: 2% 0 0 0;
	}

	.slide4 {
		background-image: url(../images/livingink/tintaviva_back.jpg);
		padding: 2% 0 0 0;
	}

	.slide5,
	.slide6 {
		background-image: url(../images/livingink/tintaviva_back-interna.jpg);
		padding: 2% 0 0 0;
	}

	.slide7 {
		background-image: url(../images/timefordad/timefordad_back.jpg);
		padding: 2% 0 0 0;
	}

	.slide8,
	.slide9 {
		background-image: url(../images/timefordad/timefordad_back-interna.jpg);
		padding: 2% 0 0 0;
	}

	.slide4,
	#stain-free {
		background-position: bottom;
	}

	.plyr {
		max-width: 50%;
		max-height: 80%;
	}




	/* - - - DRIVE AND DRAW - - - - */

	#drive-and-draw .logo {
		width: 30%;
		position: absolute;
		left: 6%;
		top: 5%;
	}

	#drive-and-draw .car {
		position: absolute;
		display: block;
		margin-left: 37%;
		bottom: 0;
		max-height: 65%;
		z-index: 0;
	}

	#drive-and-draw .plyr {
		top: 25%;
		left: 52%;
		width: 43%;
	}

	#drive-and-draw p {
		display: block;
		width: 31%;
		top: 45%;
		position: absolute;
		text-align: left;
		left: 6%;
	}

	#drive-and-draw #shortvids .plyr {
		width: 20%;
		float: left;
		left: 11%;
		margin: 0 3% 3%;
	}


	/* - - - LIVING INK - - - - */

	#living-ink .logo {
		width: 25%;
		position: absolute;
		right: 3%;
		bottom: 5%;
		z-index: 10;
	}

	#living-ink .plyr {
		top: 10%;
		left: 25%;
		width: 60%;
	}

	#living-ink #ink-stories .plyr {
		width: 26%;
		float: left;
		left: 3%;
		margin: 6% 2% 0;
	}

	#living-ink #ink-gifs {
		margin-left: 10%;
	}

	#living-ink #ink-gifs .gif {
		width: 20%;
		float: left;
		margin: 10% 1% 0;
	}

	/* - - - UNBOXING - - - - */

	#unboxing-collection .mag {
		max-height: 90%;
		position: absolute;
		left: 5%;
		bottom: 5%;
	}

	#unboxing-collection .logo {
		width: 200px;
		position: absolute;
		right: 2%;
		bottom: 2%;
	}

	#unboxing-collection p {
		display: block;
		width: 43%;
		top: 45%;
		position: absolute;
		text-align: left;
		right: 6%;
		color: #666;
	}

	/* - - - BRAND TVC - - - - */


	#chevrolet-brandTVC .plyr {
		top: 18%;
		left: 47%;
		width: 53%;
	}


	/* - - - BEAT MACHINE - - - - */

	#beat-machine .logo {
		width: 15%;
		position: absolute;
		left: 3%;
		top: 5%;
	}

	#beat-machine .plyr {
		top: 10%;
		left: 25%;
		width: 50%;
	}

	/* - - - BEAT MACHINE - - - - */

	#time-for-dad p {
		display: block;
		width: 33%;
		top: 15%;
		position: absolute;
		text-align: left;
		left: 6%;
	}

	#time-for-dad .direct {
		max-width: 40%;
	}

	#time-for-dad .prints {
		max-width: 30%;
	}