/* HEADER
/////////////////////////////////////////////////////// */

.header { 
	width: 100%;
	height: auto;
    display: grid;
    grid-template-columns: repeat(25, 1fr);
    border-bottom: solid 1px #F1F1F1;
    background: #FFF;
	position: relative;
    float: left;
    z-index: 9999; }

/* LOGO
/////////////////////////////////////////////////////// */

.scot-header {
	width: 100%;
	height: auto;
    display: grid;
    align-self: center;
    grid-column: 3 / 19; 
    grid-template-columns: repeat(4, 1fr);
    column-gap: 10%;
	position: relative;
    float: left; }

.scot-header li {
    align-self: center; }

.scot-A {
    display: none; }

.scot-header li:nth-child(1){
    grid-column: 1 / 3; }

.scot-header li:nth-child(2){
    grid-column: 3 / 5; }

/* TOOGLE
/////////////////////////////////////////////////////// */

.toggle {
	width: 100%;
	height: 80px;
    grid-column: 21 / 25;
    align-self: center;
	position: relative;
    float: left;
    cursor: pointer; }

.toggle::before {
	width: 100%;
  	top: 50%;
  	right: 0;
  	font-family: "nav", sans-serif;
	font-weight: normal;
	font-size: 28px;
	line-height: 0;
  	text-align: center;
  	content: "≡";
	position: absolute;}

.toggle.active::before {
  	font-size: 24px;
  	content:"x";}

/* /////////////////////////////////////////////////////// 
RESPON 700 */
@media (min-width: 700px){
    
    .scot-header {
    grid-column: 4 / 14;
    grid-template-columns: repeat(5, 1fr); }
    
    .scot-A {
    display: block; }
    
    .scot-B {
    display: none; }
    
    .scot-header li:nth-child(1){
    grid-column: 1 / 4; }

    .scot-header li:nth-child(2){
    grid-column: 4 / 6; }
    
    .toggle {
    grid-column: 20 / 25; }
                       
} /* ////// FI */

/* /////////////////////////////////////////////////////// 
RESPON 1000 */
@media (min-width: 1000px){
    
    .scot-header {
    grid-column: 2 / 10; }
    
    .toggle {
    grid-column: 23 / 26; }
     
} /* ////// FI */

/* /////////////////////////////////////////////////////// 
RESPON 1200 */
@media (min-width: 1200px){
    
    .header {
    top: 0;
    left: 0;
    position: fixed; }
    
    .scot-header {
    grid-column: 3 / 8; }
    
    .toggle {
    display: none; }
     
} /* ////// FI */

/* STYLE
/////////////////////////////////////////////////////// */