body{
		width: 100vw;
	 	overflow-x: hidden;
	}

	h3{
		font-size: 22px;
		text-overflow: ellipsis;
		white-space: nowrap;
	 }

	a{
		font-size: 12px;
  	}
	p{
		font-size: 12px;
	}
	.navbar {
		display: none;
	}
	h4 {
		font-size: 20px;
	}
	.responsive-grid 
	{
		width: 100%;
		grid-template-columns: 30px repeat(5, minmax(0, 1fr)) 30px;
    grid-template-rows: repeat(6, minmax(0, 1fr)) 30px;
	}

/*LAND PAGE & LOGO-------------------------------------------------------------------------------------------------*/
	/*HEADER GRID PARENT*/
	.parent 
	{
	width: 100%;
	grid-template-columns: 8vw repeat(6, minmax(0, 1fr)) 8vw;
	grid-template-rows: 10vw repeat(7, minmax(0, 1fr)) 10vw;
	margin-left: auto;
	margin-right: auto;
	}

	/*LOGO------------------------------------*/
	.div1 
	{
	grid-area: 2 / 2 / 2 / 8;
	display: flex;
	align-self: stretch;
	justify-content: center;
	flex-direction: column;
	align-content: center;
	flex-wrap: wrap;
	align-items: center;
	}
	.div1 img 
	{
	height: 100%;
	object-fit: contain;
	}
	/*LOGO------------------------------------*/

	/*NICE PEOPLE GOOD STUFF------------------------------------*/
	.div7 
	{
		grid-area: 3 / 2 / 4 / 8;
    display: flex;
    align-self: stretch;
    justify-content: center;
    flex-direction: column;  
    flex-wrap: nowrap;
    align-items: center;

    /*OFFSETS CHANCHOS*/
    margin-top: 10%;
	 }
	.div7 h5 {
		width: 93%;
		align-self: center;
		margin-block: 0px;
	 }
	.div7 p 
	{
	 	width: 93%;
    margin-top: 3%;
    align-self: center;
	 }
	 /*NICE PEOPLE GOOD STUFF------------------------------------*/

	 /*MUCHO PHOTO------*/
	.div2 
	{
		grid-area: 4 / 2 / 8 / 8;
    display: flex;
    align-self: stretch;	
  }
	.div2 img {
		margin-top: 2%;
		object-fit: contain;
	}
	 /*MUCHO PHOTO------*/

	 /*ARROW -------------------*/
	.div3 {
		grid-area: 8 / 4 / 9 / 6;
    display: flex;
    align-self: stretch;
    justify-content: center;
    margin-top: 0px;
	}
	.div3 img {
		width: 10%;
		margin-top: 50%;
		height: auto;
		align-self: flex-start;
	}
	/*ARROW -------------------*/

	#orange1 
	{
		margin-top: 50%;
    margin-left: 60%;
    width: 120%;
	}
	#green1 
	{
    margin-top: 1000%;
    margin-left: 380%;
    transform: rotate(146deg);
    width: 150%;        
	}
	#purpledot 
	{
	width: 123%;
	margin-top: 1197%;
  margin-left: -71%;
  transform: rotate(324deg);
	}
	#purple1 
	{
  width: 90%;
	margin-top: 1225%;
	margin-left: -159%;  
  z-index: 1;
  transform: rotate(341deg);
	}
	#orange3 
	{
    position: absolute;
		transform: scale(1);
		margin-top: 220%;
		margin-left: 54%;
		width: 20%;
	}

/* toast */
	.isotipo {
  		position: fixed;
  		left: -20%;
  		top: 6%;
  		transform: scale(0.5);
  		z-index: 1000;
  		transition: left 0.5s;
  		cursor: pointer;
	}

/*TOAST IT UP-------------------------------------------------------------------------------------------------*/
	
	/*GRID----------*/
	.toast {
				width: 100%;
        grid-template-columns: 8vw repeat(6, minmax(0, 1fr)) 8vw;
        grid-template-rows: repeat(5, minmax(0, 1fr)) 10vw;
        margin-top: 50px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20vw;
	}

	/*DOODLES-------------*/
	#orange2 
	{
		margin-top: -26%;
    margin-left: 65%;
    width: 20%;
	}
	#green2 
	{
		margin-top: 68%;
    margin-left: 71%;
    width: 25%;
	}
	#purple2 
	{
		margin-top: 153%;
    margin-left: 10%;
    width: 17%;
	}

	/*TOAST LOGO----------*/
	.toast1 
	{ 
		grid-area: 1 / 2 / 2 / 5;
        display: flex;
        align-self: stretch;
        justify-content: center;
        justify-self: auto;
        width: auto;
        height: auto;
        padding: 0px;
	}

	.toast1 img
	{ 
		align-self: center;
    width: 85%;
    height: auto;
    margin: 0px;
	}

	/*TOAST VERTICAL TRAILER----------*/
	.toast2 
	{ 
		grid-area: 1 / 5 / 3 / 8;
        display: flex;
        align-self: stretch;
        justify-content: center;
        height: auto;
	}

	.toast2 video
	{ 
		object-fit: cover;
	}

	/*TOAST DESCRIPTION----------*/
	.mobile-text
	{
		grid-area: 2 / 2 / 3 / 5;
        display: flex;
        align-self: stretch;
        justify-content: center;
        flex-wrap: wrap;
        align-content: end;
  	}

  	.mobile-text p 
  	{
  		width: 85%;
      font-size: var(--body-font-size);
      margin-bottom: 0px;
      text-align: right;
  	}

  	/*TOAST BANNER ART----------*/
	.toast3 
	{ 
		grid-area: 3 / 2 / 4 / 8;
        display: flex;
        align-self: stretch;
        align-items: center;

        height: auto;
        width: 100%;
        margin: 0px;
	}

	.toast3 img 
	{
		height: 80%;
        display: flex;
        object-fit: cover;
	}

	/*TOAST SKIN VIDEO----------*/
	.toast5 
	{ 
		grid-area: 4 / 2 / 5 / 5;
        display: flex;
        align-self: stretch;
        justify-content: center;

        width: auto;
        height: auto;
        margin: 0px;
        justify-self: auto;
	}

	.toast5 video
	{ 
		width: 100%;
		height: auto;
        object-fit: cover;	
    }

    /*TOAST GAME OF THE DAY----------*/
	.toast4 { 
		grid-area: 4 / 5 / 6 / 8;
    display: flex;
    align-self: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-content: center;
    flex-direction: column;
    height: auto;
    width: auto;
    padding: 0px;
	}

	.toast4 p
	{ 
		padding-left: 6%;
		margin: 0px;
		width: 90%;

		font-size: var(--body-font-size);
	}

	.toast4 h3 /*GAME OF THE DAY*/
	{
		margin-top: 11%;
    margin-bottom: 11%;
    padding: 0px;
    padding-left: 6%;

    font-size: calc(var(--header-font-size) * 1.5);
	}

	.toast6 
	{ 
		grid-area: 5 / 2 / 6 / 3;
		width: 80%;
		justify-self: start;
		margin-top: -26%;
		margin-left: 15%;
	}

	.toast7
	{
		display: none;
	}

	.viewmore
	{
		font-size: var(--body-font-size);
    padding-left: 0px;
    width: 90%;
	}	

	.arrow-viewmore
	{
		height: calc(var(--body-font-size) * 1.5);
		margin-left: 15%;
		transform: scale(0.5);
	}

	.arrow-viewmore svg 
	{
		object-fit: contain;
		height: 100%;
		width: auto;
	}

	


/*CONTRACT WORKS AND OTHER PROJECTS-------------------------------------------------------------------------------------------------*/
	
	
	#prototypes 
	{
		margin-bottom: 30vw;
	}
	.parent3 
	{
		display:none;
	}
	.mobile-proto img
	{
		width: 100%;
	}


	/*GRID----------*/
	.mobile-proto
	{
				display: grid;
        grid-template-columns: 8vw repeat(5, minmax(0, 1fr)) 8vw;
        grid-template-rows: repeat(6, minmax(0, 1fr)) 10vw;
        margin-top: 0px;
        margin-left: auto;
        margin-right: auto;		
	}

	/*DOODLES-------------*/
	#purple3 
	{
		margin-top: -11%;
    margin-left: 67%;
    width: 23%;
	}
	#green3 
	{
		margin-top: 152%;
    margin-left: 35%;
    width: 17%;
	}
	
	.mobile-proto h3 
	{	
		font-size: var(--header-font-size);
    padding: 0px;
    margin: 0px;
    margin-top: 10px;
    text-align: right;
    margin-right: 8%;
	}
	.mobile-proto p 
	{
		font-size: var(--body-font-size);

		padding: 0px;
    margin-top: 3%;
    margin-left: 1%;
    margin-right: 8%;
    text-align: right;
	}

	/*PROJECTS TEXT----------*/
	.mobile-proto #projects-text
	{
		grid-area: 1 / 2 / 2 / 5;
    display: flex;
    align-self: stretch;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
	}

	/*PROJECTS VIDEOS----------*/
	.projectPreview 
	{
		display: flex;
    align-self: stretch;
    justify-content: center;
    height: auto;
    object-fit: cover;
	}
	.projectPreview img 
	{
		object-fit: cover;
	}
	#project00 
	{
		grid-area: 1 / 5 / 3 / 7;
	}
	#project01 
	{
		grid-area: 4 / 2 / 5 / 4;
	}
	#project02 
	{
		grid-area: 3 / 2 / 4 / 5;
	}
	#project03 
	{
		grid-area: 5 / 2 / 7 / 4;
	}
	#project04 
	{
		grid-area: 3 / 5 / 4 / 7;
	}
	#project05 
	{
		grid-area: 4 / 4 / 6 / 7;
	}

	/*WORK WITH US----------*/
	.mobile-proto #workTogether-text
	{
		grid-area: 6 / 4 / 7 / 7;
    display: flex;
    align-self: stretch;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    margin-top: 20px;
    text-align: right;
	}
	.mobile-proto #workTogether-text p
	{
		width: 85%;

		padding: 0px;
    text-align: right;
    margin-right: 0%;
	}
	.mobile-proto #workTogether-text h3
	{
		text-align: right;
		margin-right: 0%;
		margin-top: 10%;
	}
	/*MOBILE CONTACT US ----------------------------------------------------------------------------------------------------------------------*/
	.mobile-contacts
  {
    display: grid;
    width: 100%;
    grid-template-columns: 8vw repeat(8, minmax(0, 1fr)) 8vw;
    grid-template-rows: 10% repeat(4, minmax(0, 1fr)) 10%;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    /*background: black;*/
  }
  .mobile-contacts div 
  {
    display: flex;
    align-self: stretch;       
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
 		align-content: center;
    align-items: center;
  }
  .mobile-contacts p 
  {
  	font-size: var(--body-font-size);

    display: flex;
    height: 100%;
    margin: 0px;
    font-size: var(--body-font-size);
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    margin-top: 2%;
  }
  .mobile-contacts a 
  {
		width: 60%;
    margin: 0%;
    object-fit: contain;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .mobile-contacts a img 
  {
  	width: 100%;
    object-fit: contain;
  }
  .mobile-contacts #facebook 
  {
    grid-area: 4 / 4 / 6 / 4;
    justify-content: flex-end;
  }
  .mobile-contacts #instagram 
  {
  	grid-area: 4 / 5 / 6 / 5;
  	justify-content: flex-end;
  }
  .mobile-contacts #linkedin 
  {
  	grid-area: 4 / 6 / 6 / 6;
  	justify-content: flex-end;
  }
  .mobile-contacts #twitter 
  {
  	grid-area: 4 / 7 / 6 / 7;
  	justify-content: flex-end;
  }
  .mobile-contacts #email 
  {
  	grid-area: 2 / 4 / 4 / 8;

    -webkit-box-shadow: inset 0px 0px 0px 1px #000000;
    -moz-box-shadow: inset 0px 0px 0px 1px #f00;
    box-shadow: inset 0px 0px 0px 1px #000000;
  }
/*FOOTER------------------------------------------------------------------------------------------------------------------------------------*/
.mobile-footer .slider 
  {
    height: 100%;
    width: 90%;
    margin: 0px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }
.mobile-footer #footer-header 
  {
    display: flex;
    align-self: stretch;
    justify-content: center;
    height: auto;
    object-fit: cover;
    align-items: center;
    grid-area: 2 / 3 / 3 / 6;
  }

  .mobile-footer h5 {
  	font-size: calc(var(--body-font-size)* 0.8);
    font-weight: 200;
    text-align: center;
    color: white;
  }