/*above is for box alignment, it should be used for every element*/
*{
    box-sizing: border-box; 
}
/*h1 and h2 for title and subtitle*/
h1 {
    font-weight: 300;
    font-size: 1.2rem;
}
h2 {
    font-size: 0.6rem;
    font-weight: 300;
}

h3 {
    margin: 0cm;
}

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

li{
    padding: 1.25rem;
}



/*take out all margins*/
body {
    margin: 0cm;
    font-family: 'Raleway', sans-serif;
}

.backdrop{
    display: none;
    position: fixed;
    z-index: 100;
    top: 0cm;
    left: 0;
    width: 100vw;
    height: 100%;
    background-color:rgb(0, 0, 0, 0.5);
}

/*Define the main header*/
.main-header {
    padding: 2.5rem 0.6rem 0rem 1.9rem; 
    width: 100vw;
    color: white;
    background-color: #3f3f3f;
    font-family: 'Comfortaa', cursive;
    font-weight: 300;
    height: 5.6rem;
    position: fixed;
    top: 0px;
    z-index: +2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}




 .social-network-links-header{
     display: flex;
     flex-flow: row-reverse;
	     position: absolute;
    top: 5px;
    right:10px;
	margin: 0px;
 

 }
 .main-header-sn__links{
     list-style: none;
     margin: 0rem 1rem 0rem 1rem;
     padding: 0rem;
     display: flex;  
     
 }

 .main-header-sn__link{
     margin: 8px 8px;
     
 }
 
 .main-header-sn__link a{
    color: white;
    
 }

.english{
	color: white;
	font-family: 'Comfortaa', cursive;
    font-weight: bold;
	font-size: 0.6rem;
	padding:0.2rem 1.2rem 0.2rem 0.5rem;

}


.spanish{
	color: white;
	font-family: 'Comfortaa', cursive;
    font-weight: 300;
	font-size: 0.6rem;
	padding:0.2rem 1.2rem 0.2rem 0.5rem;

}







.main-footer{
    width: 100vw;
    padding: 1rem 0rem 1rem 3rem; 
    color: white;
    background-color: #4F4F4F;
    font-family: 'Comfortaa', cursive;
    font-weight: 300;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
 }
 

 .social-network-links{
    display: flex;
	 margin: 1rem;
}

 .main-footer__links{
     list-style: none;
     margin: 0px;
     padding: 0rem;
     
        
 }

 .main-footer__link{
    margin: 0px 8px; 
}
 
 .main-footer__link a{
    color: white;
	margin: 0px;
 
 }




/*Pseudo elements grouped to change the state when you hover and click over the buttoms*/
.main-footer__link a:hover,
.main-footer__link a:active {
    color: rgb(158, 158, 158);
}

/*

@media(max-width: 40rem){
    .main-footer{
        padding: 2rem 0rem 0.5rem;
        
    }
    .copyright{
        font-size: 0.5rem;
        text-align: left;
       
    }

}
*/





/*Navigation buttoms without bullet points and spacing*/
.main-nav__items {   
    margin: 0mm;
    padding: 0mm;
    list-style: none; 
    display: flex;
    
  
}
/*spacing Navigation buttoms*/
.main-nav__item{
    
    margin: 0rem 0.3rem;
}


.mobile-nav__item-lang{
	padding: 0.6rem;
    margin: 0rem 0.3rem;
	transition: 0.3s;
	display: flex;
}

.mobile-nav__item-sn{
	padding: 0.6rem;
    margin: 0rem 0.3rem;
	transition: 0.3s;
	display: flex;
}




/*combinator to overwrite the browser specifity style over the buttoms*/
.main-nav__item a,
.mobile-nav__item a {
    text-decoration: none;
    color: white;
}
/*Pseudo elements grouped to change the state when you hover and click over the buttoms*/
.main-nav__item a:hover,
.main-nav__item a:active,
.mobile-nav__item a:hover,
.mobile-nav__item a:active {
    color:rgb(158, 158, 158) ;
}

/*title page*/
.page-title {
    color: white;
    margin:0mm
}
/*subtitle*/
.page-subtitle {
    color: #ffffff;
    font-weight: 300;
    font-size: 0.5rem;
    padding: 0.3rem 0px;
    margin: 0px;
}

 /* burger menu*/
 
.toggle-button {
    width: 3rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: middle;
    display: none;
  }
  
  .toggle-button:focus {
    outline: none;
  }
  
  .toggle-button__bar {
    width: 100%;
    height: 0.2rem;
    background: rgb(255, 255, 255);
    display: block;
    margin: 0.6rem 0;
  }

  /*hiding burger*/
  @media(max-width: 40rem){
    .toggle-button{
        display: list-item;
       
        
          
  }
}
  
/*hide main nav items*/
@media(max-width: 40rem){
    .main-nav__items{
        display: none;
    }
	.social-network-links-header{
		display: none;
	}
	
	
	
}

/*navigation mobile*/

.mobile-nav {
	width:80vw;
    display: none;
    position: fixed;
    z-index: 101;
    top: 0;
    left: 0;
    background: rgb(61, 61, 61);
    
    height: 100vh;
  }
  
  .mobile-nav__items {
    
    height: 100%;
    list-style: none;
    margin: 10vw;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  }
  
  .mobile-nav__item {
    margin: 1rem 0;
  }
  
  .mobile-nav__item a {
    font-size: 1.5rem;
  }

/*end of mobile*/

.Story{
    height: 300px;
    margin: 0cm;
}



.story-settings{
    
    background-size: cover;
    background-repeat: no-repeat;
    width: 20%;
    height: 300px;
    margin: 0rem 0rem 0rem 0rem;
    display: inline-block;
}





.section2{
    background-image: url("0_images/ignittion-team.jpg");
    background-size: contain;
    background-repeat: repeat;
    background-position: center;
    width: 30vw;
    height: 2vw;
    margin: 3rem 0rem 3rem 3rem;
    display: inline-block;
}

.Text {
    font-family: 'Raleway', sans-serif;
    font-size: 1rem;
    
    padding: 2.5rem 0.3rem 0px 0px;
    color: rgb(0, 0, 0);
    vertical-align: top; 
    margin: 0rem 4rem 0rem 3rem ;
    text-align: left;
    display: inline-block;
    vertical-align: top;
}


.title {
    font-family: 'Raleway', sans-serif;
    font-size: 2rem;
    font-weight: bold;
    margin-left: 3rem;

}

.subtitle{
    font-family: 'Raleway', sans-serif;
    font-size: 1.5rem;
    font-weight: lighter;
    margin-left: 3rem;

}


.subtitle2{
    font-family: 'Raleway', sans-serif;
    font-size: 1rem;
    font-weight: lighter;
    margin-left: 3rem;

}



.website-links{
    text-decoration: none;
    color: white;
}

@media(max-width: 40rem){
	.subtitle2{
      font-size: 1rem;
    }
}