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

html {
     margin: 0;
     padding: 0;
   
     
}

body {margin:0;
	 padding:0;
	 height:100%;
     width:100%;
	font-size:1em;
	 overflow: hidden;
     cursor: crosshair;
     font-family: 'Poppins', serif;  
	 /*background-color: #E8E5D9;*/
	background-color:#e8e8e9;
	}
img{
	display:block;
	width:100%;
	height:auto
}
 span {letter-spacing:  normal}
/*a {text-decoration:none; color:#000}*/
h1,h2,h3 {margin:0; padding:0}
	.grid-12{
		display:grid;	
	    grid-template-columns: repeat(12, 1fr);
	    grid-column: 1/span 12;
	}
/*loader*/
.loader-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #E3E2CE;
  display:flex;
  justify-content: center;
  align-items: center;
}
.loader {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  border: 4px solid #242721;
  animation: loader 2s infinite ease;
}
.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #242721;
  animation: loader-inner 2s infinite ease-in;
}
@keyframes loader {
  0% { transform: rotate(0deg);}
  25% { transform: rotate(180deg);}
  50% { transform: rotate(180deg);}
  75% { transform: rotate(360deg);}
  100% { transform: rotate(360deg);}
}
@keyframes loader-inner {
  0% { height: 0%;}
  25% { height: 0%;}
  50% { height: 100%;}
  75% { height: 100%;}
  100% { height: 0%;}
}




/*content-index-*/
   .content_index {
     z-index: 0;
     position: absolute;
     width: 100%;
     height: 100vh; 
	
}
      #bkg_index{

		background-color: #041FA9;
	     position: fixed;
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto; 
  z-index: -100;
  background-size: cover;
     }
.video-background {
  position: fixed;
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto; 
  z-index: -100;
  background-size: cover;
}

.video-background video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

#myVideo {
		 right: 0;
		 bottom: 0;
		 min-width: 100vw; 
		 min-height: 100vh;
		 position:absolute;
		 z-index:-1;
		 opacity:.17;
       }

   .logoIndex {
			align-self: start;
			grid-column: 2/span 4;
			grid-row: 1/span 3;
			justify-self: start;
			margin-top: 50px;
			margin-bottom: 50px;
			width: 80%;

             }
.toggle {
    display: grid;
    grid-column: 11 /span 1;
    grid-row: 1/span 1;
    position: relative;
    margin-top: 40px;
    justify-self:end;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    color: #fff;
    cursor: pointer;
    z-index: 1200;
}
.toggle:before {
    content: '+';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    background: #242721;
    font-weight: bold;
    font-size: 28px;
    transition: .5s;
}
.toggle:before:hover {
    transform: rotate(405deg);
    background:#242721;
    color: #000;
}

    .menuIndex {
		grid-column: 9/span 3;
		grid-row: 1/span 3;
		justify-self: center;
		align-self: start;
		margin-top: 40px;
		margin-right: 50px;	   
		background: rgba(255,255,255,.3);		
		border-radius: 20px;		
		box-shadow: -1px -6px 37px 0px rgba(207,207,207,90);
}

		.menuIndex_test {
			display:none;
	    grid-column: 10/span 2;
		grid-row: 1/span 3;
		justify-self: start;
		align-self: start;
		margin-top: 40px;
		margin-right: 50px; 
		
		
}
	.content-generic .menuIndex {
		grid-column: 9 / span 3;
		grid-row: 1/span 3;   
		margin-top: 0;
		padding-top: 100px;
		/*margin-right: 50px;*/
		border-radius: 0;
		background: rgba(255,255,255,.9);
		box-shadow: -15px 10px 49px -23px rgba(207,207,207,90);
		
}
	
canvas { display:grid;
	    grid-column: 1/span 2;
        grid-row: 1/span 3;
        align-self: center;
	     z-index:0
}
   .infoData {
			width: 60%;
			display: grid;
			grid-column:1/span 2;
			grid-row:4/span 3;
			justify-self: center;
			align-items: end;
    }

  .infoData > a {	
	
		font-size: 1.4em;
		line-height: 1em;
		align-self: center;
		padding-left: 2vh;
}
.fa-cloud-download-alt{
	font-size:24px; z-index:10
}

.footerData {
	background: #000000;
	width:100%;
	right:0px;
	color:white;
	padding:1em;
	
	 position:fixed;
	 bottom:0vh;
	z-index:100;
	font-family:'Roboto'
}

/*.footerData {
		grid-column:10/span 2;
		grid-row:5/span 2;
		transform: rotate(90deg);
		justify-self: center;
		align-self: center;

}

.footerData::after {
		display: grid;
		content:"SOCIAL";
		width:20%;
		height: 21px;
		background-color: #DA1B5D;
		transition: all .6s;
  */

.footerData:hover::after {
	
		width:100%;
		height: 2px;
		background-color: #DA1B5D;
  
}


.myBtn {
    font-family: Poppins;
    position: absolute;
    
    /* left: 50%; */
   
}
.btnUp{
	color:white
}
button {
     border: none;
     display: block;
     padding: 12px 24px;
     font-family: Poppins;
     font-weight: 700;
     font-size: 12px;
     letter-spacing: 6px;
     color: #000;
     /* border: 1px solid #000; */
     /* text-transform: uppercase; */
     /* outline: none; */
     overflow: hidden;
     background: none;
     z-index: 1;
     cursor: crosshair;
     transition: 0.8s ease-out;
}
/*old stuff
button {
     display: block;
     padding: 12px 24px;
     font-family: Poppins;
     font-weight: 700;
     font-size: 12px;
     letter-spacing: 6px;
     color: #000;
     border: 1px solid #000;
     text-transform: uppercase;
     outline: none;
     overflow: hidden;
     background: none;
     z-index: 1;
     cursor: crosshair;
     transition: 0.8s ease-out;
}*/

.myBtn:hover {
     color: #101010;
     cursor: crosshair;
}

.myBtn:before {
     content: "";
     position: absolute;
     background: #fff;
     bottom: 0;
     left: 0;
     right: 0;
     top: 100%;
     z-index: -1;
     transition: top 0.8s ease-out;
}

.myBtn:hover:before {
     top: 0;
}


/*----- OVERLAY----------
=========================  */
.overlay {
     top:101%;
     position: absolute;
     width: 100%;
     height: 100%;
     background: #000;
}



/*----- CONTENT-MENU----------
=========================  */
	.content_menu {
		width: 100%;
		height: 100vh;  
		padding-left: 20px;   
		position: absolute;
		
}

	.content_menu h1 {
		font-family: 'Poppins', sans-serif;
	/*ont-weight: 800;*/
		font-size: 3em;
		position: relative;
		overflow: hidden;
		padding: 0;
		margin: 0;
		color: #222;
		height: 1.3em;		
		    letter-spacing: -1.599px;
		text-transform: lowercase;
		    font-weight: 500;

}




	.content_menu .hideText {
		position: absolute;
		    letter-spacing: -3px;

  
}

.greyTemp{
	color:rgba(70,70,70,0.60);
}
.content_menu sup{font-size:11px; text-transform: uppercase}
/*----- CONTENT-CONTACT ---------
=========================  */

    .content-contact{	
		width: 100%;
		height: 100vh;    
		position: absolute;   
		overflow: hidden;
		background-color:#222;
	
	}

.content-contact h1{
	         font-family: 'Poppins', sans-serif;
	         color:#E8E5D9;
	       	 font-weight: 600;
             font-size: 2.3em;
	         letter-spacing: -2.999px;
             overflow: hidden;
             padding: 0;
             margin: 0;  
             text-transform: lowercase;
	
}

 .content-contact p{	      
			font-family: 'Roboto';
			color: #fff;
			font-weight: 100;
			font-size: .7em;
			line-height: 1.3;
			overflow: hidden;
			padding: 0;
			margin: 0;            
	
}
 .textContactSocial {
   grid-column: 1/span 5;
    grid-row: 1/span 4;
    transform-origin: 20px 20px;
    transform: rotate(90deg);
    overflow: hidden;
    padding: 5px 0 0 15px;
    margin: 0;
    justify-self: end;
}

.contactLine {	        
	       background-color:#E8E5D9; 
	       grid-column:  4/6;         
	       grid-row: 1 / 4;
	       width: .169vw;	      
}

.textContact {
    grid-column: 4/span 7;
    grid-row: 1/span 1;
    overflow: hidden;
    padding: 0 0 0 6px;
    margin: 0;
}
.textContact a {color:#fff !important}

.backContact {
    color: white;
    border: 1px solid white !important;
    grid-column: 8/span 5;
    grid-row: 4/span 1;
    margin-left: 10px;
    border-radius: 20px;
}


/* PROJECTS FROM HERE 
======================== */

/*.menuIndex_proj {
	margin-top: 5vh;
    grid-column: 6/span 5;
    grid-row: 1/span 1;
}*/

.content-generic {
    width: 100%;
    height: 100%;
    position: absolute; 
    overflow:auto;
    display: grid;

	
}

.content-generic-animation {
    width: 100%;
    height: 100%;
    position: absolute; 
    overflow: auto;
    display: grid;

	
}
/*====CONTACT GOES TO THE TOP=====*/
.content-generic .footerData {
        grid-column: 12/span 2;
		grid-row:11/span 1;color:white;
		background-color: rgba(0,0,0,.9);
		padding:0 20px 0 20px;margin:0;
		align-self:start;
		text-align:right;
		justify-self: center;
	}

 .content-generic-animation .footerData {
        grid-column: 12/span 2;
		grid-row:12/span 1;color:white;
		background-color: rgba(0,0,0,.9);
		padding:0 20px 0 20px;margin:0;
		align-self:start;
		text-align:right;
		justify-self: center;
	}
	.content-generic .footerData a, .content-generic-animation .footerData a {
	color:white;
	}
	.content-generic .footerData::after, .content-generic-animation .footerData::after {
		display:none
	}

.project-left .box {
    grid-column: 2/span 10;
    grid-row: 3/span 3;
	margin-top: 30px;
    width: 100%;
	    margin: 10px 0 0;
}

.project-left .project-info{
	grid-column: 2/span 10;
    grid-row: 6/span 2;
	background-color:#fff;
}

.project-right .box{
	grid-column:2/span 10;
	 margin-top: 30px;
	grid-row:3/span 3;
	width:100%;
	    margin: 10px 0 0;
}

.project-right .project-info{
	grid-column: 2/span 10;	
    grid-row: 6/span 2;
	background-color:#fff;
}


.projectNew .box {
    grid-column: 2 /span 10;
    margin-top: -20px;
}

.projectNew .project-info{
	grid-column: 2/span 10;
    grid-row: 3/span 2;
}


.project{margin-bottom: 20vh;}


.box {position:relative}


.overlayProj {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	/*background-color:#E8E5D9;*/
	background-color:#e8e8e9;
}

.small-title {
	display:none;
	font-family: 'Oswald', sans-serif;
	letter-spacing: 0.00004rem;	
    font-weight: 100;
    font-size: 1.2em;	
    padding: 5px;
	text-transform: capitalize;
}
.main_text {
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 20px;
    text-transform: none;
    color: #151512;
    padding: 10px;
}


a.project-link{		
    color: #222222;
    font-size: 12px;
    text-transform: uppercase;
    font-style: italic;
	padding-left:10px
    }

.fa-arrow-right{
    font-size:24px;
	float: right;
    padding: 15px;
}


/*pages portfolio, creativity and animations*/


.topWords {
	    display: grid;
    grid-column: 2/ span 10;
    justify-self: end;
    align-self: end;
    margin: 0 5vw 70px 0;
    font-family: Poppins, sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 42px;
    text-transform: none;
    color: #353535;
    text-align: center;
}
.mobilePrototype{	
    display: grid;
    grid-column: 3/span 8;
    grid-row: 5/span 2;
    margin-top: 10px;
	
	}
	.numProject{
		font-family: 'Poppins', sans-serif;
		font-size: 20px;
		font-style: normal;
		font-weight: 300;
		letter-spacing: -.99px;
		line-height: 30px;
		text-transform: none;
		color: #151512;
		display:grid;
		grid-column:2/ span 8;
		/*grid-column:2/ span 8;*/
		grid-row: 1/span 1;
		padding-left: 10px
	}
	.nameProject{
		font-family: Poppins, sans-serif;
		font-size: 34px;
		font-style: normal;
		font-weight: 700;
		letter-spacing: -.056em;
		line-height: 32px;
		text-transform: lowercase;
		color: #151512;
		display:grid;
		grid-column:2/ span 6;
		grid-row: 2/span 1;
		padding-left: 10px
		
	}

.tagWrapper{
	display:none
}



@media only screen and (min-width:320px) and (orientation: landscape)
{
		.menuIndex{ 
			   grid-column: 10/span 2;
			   grid-row:1/span 3;
			   justify-self: start;
			   align-self: start;
			   margin-top: 40px;
			   margin-right: 40px;}
           
		  .logoIndex {
				align-self: start;
				grid-column: 2/span 4;
				grid-row: 1/span 3;
				
				margin-top: 40px;
				margin-bottom: 50px;
					  }
	/* Contact landscape iphone 6,7,8 */
	
	.textContactSocial {
		grid-column: 1/span 6;
		grid-row: 1/span 4; 
		padding: 0 0 0 15px;   
		justify-self: center;
}
	
   .backContact {
		color: white;
		border: 1px solid white !important;
		grid-column: 9/span 5;
		grid-row: 1/span 1;
		margin-top: 15px;
}
	/* PROJECTSSSSS  */
		.numProject {
        grid-column: 2 / span 1;
        /* margin-left: 10px; */
        justify-self: start;
        padding: 0;
 }
	.nameProject {
    grid-column: 2/ span 2;
    grid-row: 2/span 1;
    font-size: 30px;
    margin: 0;
    padding: 0;
  
}
	
	.main_text {
    font-family: Poppins, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 16px;
    text-transform: none;
    color: #101010;
    padding: 10px 0; 
    /* grid-column: 4/span 1; */
    /* display: grid; */
}
	
   .projectNew .project-info{
		grid-column: 2/span 5;
		grid-row: 3/span 2;
	}
	.projectNew .box {
          display:none
}
	
	.mobilePrototype {
		 grid-column: 9/span 3;
		 grid-row: 1/span 5;
 
}
	
 .project-left .box {
		   grid-column: 4/span 8;
		   grid-row: 1/span 3;
		   width: 100%;
}
	
 .project-right .project-info{		
    grid-column: 2/span 3;
    grid-row: 3/span 1;
    background: none;
}	
	
.project-left .project-info{	
    grid-column: 2/span 3;
    grid-row: 3/span 1;
    background: none;
}
	
.project-left .box, .project-right .box{
    grid-column: 5/span 7;
    grid-row: 1/span 3;
    width: 100%;

}


  .project{margin-bottom: 20vh;}
	
	.fa-arrow-right{  
	float: left;
	 padding: 15px 0;}
  


}






@media (min-width: 768px) and (max-width: 1024px) {
	.content_menu {
    top: 20px;
}
	.content_menu .hideText {
		position: absolute;
		margin-top: 10px;
		font-size: 90px;
		/* height: 90px; */
		line-height: 70px;
                   }
	
	.content_menu  h1 {   
        font-size: 4.7em;
		    line-height: .9;
          }

	.main_text {
        font-size: 1.4em !important;
        line-height: 1.25;
                 }
	
	.small-title {   
		font-size: 1.8em;}
	
	.nameProject{
		font-size: 4em;
		 line-height: .9;
	}
	button {
         font-size: 18px;
		 padding: 24px 48px;}
	

    .infoData > span {
		 font-size: 1em;}
 
	
   .footerData {
	     grid-column:10/span 3;
	     grid-row:4/span 3; 
               }


 .textContact {
		grid-column: 4/span 5;
		grid-row: 1/span 1;
		overflow: hidden;
		padding: 0 0 0 20px;
		justify-self: start;
		margin: 0;
}

.textContactSocial {
		grid-column: 4/span 3;
		grid-row: 1/span 4;
		transform: rotate(90deg);
		overflow: hidden;
		padding: 10px 0 0 40px;
		margin: 0;
}

 .content-contact h1{
        font-size: 100px;           
	        }
        

 .content-contact p {	         
		font-weight: 100;             
		font-size: 24px;
		line-height: 1.3;
	}             
	
.content-contact a{
	    color:white
	         }

.project-info {
	    padding:10px
	}
	
	
}








@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){
		.menuIndex {
		grid-column: 9 / span 3;
		grid-row: 1/span 3;   
		margin-top: 0;
		padding-top: 100px;
		margin-right: 50px;
		border-radius: 0;
		background: rgba(255,255,255,.3);
}
	
	.content-generic .logoIndex {  
    margin-bottom: 150px;
}
	.numProject {
		grid-column: 2 / span 1;
		align-self: center;
		font-size: 34px;
		    margin: 0 0 0 40px;
}
	.nameProject {	
    grid-column: 2/ span 1;
    grid-row: 2/span 1;
    justify-self: end;
    align-self: start;
    margin: 0 0 0 40px;
    font-size: 2.6em;
    line-height: .9;}

	

	.project-left .box, .project-right .box {
		grid-column: 5/span 7;
		grid-row: 1/span 3;
		width: 100%;
}
	.main_text {
        font-size: 1.2em !important;
		    grid-column: 1/span 2;
    margin: 0 0 0 30px;
    padding: 0;

       
                 }
}





@media only screen and (min-width:1025px){
	
.footerData {
    grid-column: 11/span 2;
	
	justify-self:center;
  
}
/*.menuIndex {
		grid-column: 9 / span 3;
		grid-row: 1/span 3;
		justify-self: center;
		align-self: start;
		margin-top: 40px;
		margin-right: 50px;
}*/
	.menuIndex {
		grid-column: 9 / span 3;
		grid-row: 1/span 3;   
		margin-top: 0;
		padding-top: 100px;
		/*margin-right: 50px;*/
		border-radius: 0;
		background: rgba(255,255,255,.3);
		
}
		.menuIndex_test {
			display:grid;
	    grid-column: 11/span 2;		
		justify-self: center;		
		margin-top: 40px;
		margin-right: 90px; 
}

	.toggle {
    display: grid;
    grid-column: 12 /span 1;
    grid-row: 1/span 1;
    position: relative;
    margin-top: 40px;
    justify-self:start;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    color: #fff;
    cursor: pointer;
    z-index: 1200;
}
		.content-generic .menuIndex {		
		background: rgba(255,255,255,.9);
				box-shadow: -15px 10px 49px -23px rgba(207,207,207,90);
}
/*button {  
    padding: 24px 48px;
	}*/
	
	.textContact {
			grid-column: 4/span 4;
			grid-row: 1/span 1;
			overflow: hidden;
			padding: 0 0 0 20px;
			justify-self: start;
			margin: 0;
}

    .textContactSocial {
			grid-column: 5/span 3;
			grid-row: 1/span 4;
			transform: rotate(90deg);
			overflow: hidden;
			padding: 10px 0 0 40px;
			margin: 0;
}

 .content-contact h1{	        
         font-size: 100px;           
	        }
        

 .content-contact p{	         
	    font-weight: 100;
        font-size: 18px;
        line-height: 1.3;}             
	
    .content-contact a{color:white}
	
	.logoIndex{
		grid-column: 1/span 1;
		/*grid-column: 1/span 3;*/
		margin-bottom: 80px;
		justify-self:end;
		padding-left:2vh
	}
	.menuIndex {
        grid-column: 11/span 1;
	}
	.textContactSocial {
        grid-column: 3/span 3;
	}
	.content-generic .footerData {
        grid-column: 12/span 2;
		grid-row:11/span 2;color:white;
		background-color: rgba(0,0,0,.9);
		padding:0 20px 0 30px;margin:0;
		align-self:start;
		text-align:right;
		justify-self: end;
	}
	.content-generic .footerData a {
	color:white;
	}
	.content-generic .footerData::after{
		display:none
	}
	.content_menu h1 {
        font-size: 6.4em;
	}
	a.project-link {    
    padding-left: 0px;
}
	/*projects*/
	.small-title {
	    font-size: 1.5em;
	    padding:0; margin:0}
	
	.main_text{	   
		font-size: .9em;
	    padding: 10px 0;}
	
	
	.project-right .box {
        grid-column: 5/span 7; 
		justify-self: start;
		}
	
   .project-left .box {
        grid-column: 5/span 7; 
		justify-self: start;
		}
	
	.project-left .project-info {   
		grid-column: 2/span 2;
        grid-row: 3/ span 4;}
	 
	.project-right .project-info {   
		grid-column: 2/span 2;
        grid-row: 3/ span 4;}
	
	.projectNew .project-info {
    grid-column: 2/span 2;
    grid-row: 3/span 2;}

	.fa-arrow-right {
    font-size: 24px;
    float: left;
    padding: 15px 0;}

	.tagWraper{display:block}
	
	p.tag {
		color:white;
		padding:5px;
		font-size:.7em;
		margin-right:5px;
		display: inline-block}
	
	.mobilePrototype{
		display:grid;
		grid-column: 10/span 2;
		grid-row: 1/span 4;
		z-index:1;
	}
	.projectNew .box {
		display: grid;
		grid-column: 5/span 7;
		grid-row: 2 / span 2;
}
	.numProject{
		font-family: 'Poppins', sans-serif;    
		font-size: 1.4em;
		color: #222;
		height: 1.22em;
		text-transform: uppercase;
		letter-spacing: .11095px;
		display: grid;
		grid-column: 2/ span 2;
		align-self: end;
		margin-left: 0;
	}
	.nameProject{
		font-family: 'Poppins', sans-serif;    
		font-size: 2.7em;
		color: #222;
		line-height: .962em;   
		letter-spacing: -1.9995px;
		display: grid;
		grid-column: 2/ span 2;
		align-self: center;
		justify-self: start;
         margin-left: 0;
		
	}

}