/*===========================================================

    Project:    	Portfolio Prototype
    Client:     	The Internet
    Company:    	IlionX Team BettyBlocks
    Developers: 	Jeroen Meij / jmeij@ilionx.com
					Jasper Zuidhof / jzuidhof@ilionx.com
					Yana Houben / yhouben@ilionx.com
    DOB:        	November 2020

===========================================================*/

@media (max-width: 1199.98px) {
    :root {
       
    }
}

@media (max-width: 991.98px) {
    :root {
        
    }
}

@media (max-width: 767.98px) {
    :root {
        
    }
    html {
    	font-size: 14px;  
   }
}

@media (max-width: 575.98px) {
    :root {
        
    }
    html {
    	font-size: 12px;  
    }
     h1 {
      font-size: 3rem;  
    }
    h2 {
      font-size: 1.8rem; 
    }
}

/*===============================================
 
    Generic
    
==============================================*/


/*
	Arrows
*/

@media (max-width: 767.98px) {
  .image-block.arrow-right:after, 
  .image-block.arrow-left:after {
   	top: auto;
    bottom: -.75rem;
    left: calc(50% - .75rem);
  }
}

/*===============================================
 
    Header
    
==============================================*/

@media (max-width: 991.98px) {
  .ilx-navbar-wrapper {
   	position: sticky;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999;
    background-color: white;
  }
  .navbar {
  	height: auto;   
  }
  .navbar-toggler {

	right: 2rem;
    top: 2rem;
  }
  .navbar-collapse {
   	z-index: 100; 
  }
  .navbar-toggler[aria-expanded="true"] {
   	z-index: 200;
    position: fixed;
  }
}

/*===============================================
 
    Footer
    
==============================================*/

@media (max-width: 767.98px) {
  #footer .row {
    flex-direction: column; 
  }
  #footer .social-media {
   	flex-direction: row; 
  }
  #footer .social-media > * {
   	margin-right: 1rem; 
  }
  #footer .footer-title {
   	order: 10;
    margin-top: 4rem;
  }
}

/*===============================================
 
    Home
    
==============================================*/


@media (max-width: 767.98px) {
  #landingspage .content {
	align-items: center;
    text-align: center;
  }
  #landingspage .content h1 {
   	font-size: 2rem; 
  }
  /*
  		Showcase
  */
  #showcases .showcase-block {
   	flex-basis: 100%; 
  }
  /*
  		Fundamental
  */
  .fundamental {
    flex-direction: column;
    overflow: hidden;
  }
  .fundamental:nth-child(even) .image-block,
  .fundamental:nth-child(odd) .image-block {
    border-right: 0;
    border-left: 0;
    border-bottom: 4rem solid transparent;
  }
  .fundamental:nth-child(even) .image-block {
    order: -1;
  }
  .fundamental .text-block h2 {
	text-align: center;
    word-break: break-word;
    font-size: 2rem;
  }
  /*
  		Quote
  */
  .jslider-nav {
   	padding: 1rem; 
  }
  q {
   	font-size: 1.5rem; 
  }
  /*
  		CTA
  */
  #call-to-action {
   	margin-bottom: 3rem; 
  }
  #call-to-action h3 {
   	font-size: 2rem;
    margin-top: 2rem;
  }
  #call-to-action .side-right {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
  .btn-tellmemore {
   	width: 100%; 
  }
  /*
  	Scroller
  */
  [data-scroll-to-top] {
    left: calc(50% - 15px) !important;
  }
}

/*===============================================
 
    Projectoverview
    
==============================================*/

@media (max-width: 1400px) {
  .project-showcases .showcase-block {
     flex-basis: calc((100% / 2) - 2rem);
    max-width: none;
  }
}

@media (max-width: 767.98px) {
  .project-showcases .showcase-block {
     flex-basis: 100%;
  }
}

/*
	Filters
*/

@media (max-width: 1330px) {
  #project-filters .row > :last-child {
	flex-basis: 100%;
    max-width: 58rem;
  }
}

@media (max-width: 885px) {
  #project-filters {
   	padding-top: 0; 
  }
  #project-filters .row > * {
	flex-basis: 100%;
    max-width: 58rem;
  }
  #project-filters .row > * .dropdown,
  #project-filters .row > * .dropbtn {
    width: 100%;
  }
}



/*===============================================
 
    Project
    
==============================================*/

@media (max-width: 991.98px) {
   #project-detail-page-details {
     flex-direction: column;
     padding-top: 1rem;
  }
  #project-detail-page-details .main-1 {
    margin-right: 2rem;
  }
  #project-detail-page-details .side-right {
	flex-basis: 100%;
    flex-grow: 1;
    width: 100%;
    padding: 2rem;
    padding-top: 0;
    padding-bottom: 0;
  }
  #project-detail-page-details .main-left {
   padding-right: 2rem; 
  }
  #project-detail-page-details #employees {
   	padding: 2rem; 
  }
}

/*===============================================
 
	About us
    
==============================================*/

@media (max-width: 767.98px) {
  #about-us .content {
      padding-top: 2rem;
      padding-bottom: 0;
	}
}

/*===============================================
 
	About Me
    
==============================================*/

@media (max-width: 991.98px) {
  #employee-page .employee-context .content-header {
      flex-direction: column;
	}
  
  #employee-page .employee-box {
    margin-left: 0;
  }
}

/*===============================================
 
    Q&A
    
==============================================*/

@media (max-width: 991.98px) {
  #questionandanswerpage .showcase-block {
   	max-width: none; 
  }
}

/*===============================================
 
    Showcases
    
==============================================*/

@media (max-width: 991.98px) {
  #showcases-page .content-body {
    margin-top: 0; 
  }
  #showcases-page .showcase-block {
   	max-width: none;
    flex-basis: 100%;
  }
}

/*===============================================
 
    Clients
    
==============================================*/

@media (max-width: 1199.98px) {
   #customerspage .showcase-block {
       flex-basis: calc((100% / 2) - 2rem);
       max-width: none;
   }
}


@media (max-width: 575.98px) {
   #customerspage .showcase-block {
       flex-basis: 100%;
   }
}