grav-theme-disroot/css/media-queries.css

/*------------------------------------

Disroot Media Queries
29-01-2019
------------------------------------*/


/* screenwidth less than 1024px
------------------------------------*/
@media only screen and (max-width: 1024px) {

    /* header styles
   ------------------------------------*/
   header .banner-text h1 {
      font: 80px/1.1em 'opensans-bold', sans-serif;
      letter-spacing: -1px;
      margin: 0 auto 12px auto;
   }
}


/* screenwidth less than 900px
------------------------------------*/
@media only screen and (max-width: 900px) {

    /* header styles
   ------------------------------------*/
   header .banner { padding-bottom: 12px; }
   header .banner-text h1 {
      font: 78px/1.1em 'opensans-bold', sans-serif;
      letter-spacing: -1px;
   }
   header .banner-text h3 {
      font: 17px/1.9em 'librebaskerville-regular', serif;
      width: 80%;
   }
   header .banner-text hr {
      width: 65%;
      margin: 12px auto;
   }

   /* nav-wrap */

   #nav-logo {
       display: none;
       pointer-events: none;
   }

   #nav-wrap {
      font: 11px 'opensans-bold', sans-serif;
      letter-spacing: 1.5px;
   }
   .dropdown-content {
       display: none;
       z-index: 1;
   }
   .dropdown:hover .dropdown-content {
       display: none;
   }

   /* Contact Section
   ------------------------------------*/
   #contact .section-head { margin-bottom: 30px; }
   #contact .header-col h1:before {
      font-size: 66px;
      line-height: 66px;
   }
   #contact .section-head p.lead { font: 17px/33px opensans-light, sans-serif; }
}


/* mobile wide/smaller tablets
------------------------------------*/

@media only screen and (max-width: 767px) {

   /* mobile navigation
   ------------------------------------*/
   #nav-wrap {
      font: 12px 'opensans-bold', sans-serif;
      background: transparent !important;
      letter-spacing: 1.5px;
      width: auto;
      top: 0;
      right: 0;
      display: flex;
      justify-content: right;
   }
   #nav-wrap > a {
      width: 48px;
		  height: 48px;
	    background-color: #50162D;
		  position: absolute;
      border: none;
      float: right;
      font: 0/0 a;
      text-shadow: none;
      color: transparent;
      top: 0px;
      right: 30px;
   }

	#nav-wrap > a:before,
   #nav-wrap > a:after {
      position: absolute;
		  border: 2px solid #fff;
		  top: 35%;
		  left: 25%;
		  right: 25%;
		  content: '';
	}
   #nav-wrap > a:after { top: 60%; }

   /* toggle buttons */
	#nav-wrap:not( :target ) > a:first-of-type,
	#nav-wrap:target > a:last-of-type  {
	   display: block;
	}

   /* hide menu panel */
   #nav-wrap ul#nav {
      height: auto;
      display: none;
      clear: both;
      width: 30%;
      float: right;
      position: relative;
      top: 12px;
      right: 0;
   }

   /* display menu panels */
	#nav-wrap:target > ul#nav	{
      display: block;
      padding: 30px 20px 48px 20px;
      background: #1f2024;
      margin: 0 30px;
      clear: both;
      float:right;
   }

   ul#nav li {
      display: block;
      height: auto;
      margin: 0 auto;
      padding: 0 4%;
      border-bottom: 1px solid #2D2E34;
      border-bottom-style: dotted;
   }

   ul#nav li a {
      display: block;
      margin: 0;
      padding: 0;
      margin: 12px 0;
      line-height: 16px; /* reset line-height from 48px */
      border: none;
      text-align: center;

   }


   /* Header Styles
   ------------------------------------*/
   header .banner {
      padding-bottom: 12px;
      padding-top: 6px;
   }
   header .banner-text h1 { font: 68px/1.1em 'opensans-bold', sans-serif; }
   header .banner-text h3 {
      font: 16px/1.9em 'librebaskerville-regular', serif;
      width: 85%;
   }
   header .banner-text hr {
      width: 80%;
      margin: 18px auto;
   }


   /* Control Nav */
  /* .flex-control-nav {
      text-align: center;
      margin-left: -30px;
   }*/


   /* Form
   ------------------------------------*/

   #contact label {
      float: none;
      width: 100%;
   }
   #contact input,
   #contact textarea,
   #contact select {
     	margin-bottom: 6px;
      width: 100%;
   }
   #contact button.submit { margin: 30px 0 24px 0; }
   #message-warning, #message-success {
      width: 100%;
      margin-left: 0;
   }


   /* Footer
   ------------------------------------*/

   /* copyleft */
   footer  #copyleft { display: none; }

   /* Go To Top Button */
   #go-top { margin-left: -22px; }
   #go-top a {
   	width: 54px;
   	height: 54px;
      font-size: 18px;
      line-height: 54px;
   }

   /* fullbar */

   .fullbar h3, .fullbar h4, .fullbar h5 {
       line-height: 1.2;
       font-size: 90%;
   }

   /* clients
   ------------------------------------*/

   .clients .row {
     display: block;
   }

   .client-item {
     position: relative;
     max-width: 60%;
     min-width: 60%;
     margin-left: auto;
     margin-right: auto;
     margin: none;
   }

   .client-item br { display: none; }
   .client-item a { position: relative; display: block; width: 100%; }
   .client-item .platforms { float: right; }
   .clients i:first-of-type {
      margin: 0;
  }
   .clients img {
     height: 2em;
     width: 2em;
     margin: 2% 5%;
     filter: grayscale(40%);
   }
}

/* mobile narrow
  ------------------------------------*/

@media only screen and (max-width: 640px) {

   /* mobile navigation
   ------------------------------------*/
   #nav-wrap ul#nav { width: 80%; float: none; }

   /* header styles
   ------------------------------------*/
   header .banner { padding-top: 24px; }
   header .banner-text h1 {
      font: 40px/1.1em 'opensans-bold', sans-serif;
      margin: 0 auto 24px auto;
   }
   header .banner-text h3 {
      font: 14px/1.9em 'librebaskerville-regular', sans-serif;
      width: 90%;
   }
   .miniheader {
       height: 0px;
       min-height: 0px;
   }
   header {
       height: 0px;
       max-height: 1px;
   }

   /* clients
   ------------------------------------*/

   .client-item {
      position: relative;
      max-width: 80%;
   }

  }