/*
####################################################
F O N T S M E D I A  Q U E R I E S
####################################################
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/
 
/* 
Extra small devices (portrait phones, less than 576px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/


@media (max-width: 576px) {  


  
} 

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  

 
  
} 
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
 
} 
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 

   
 
}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
    
    
} 
 
@media (min-width: 1201px)  {
  /* step 4 */
 
 
}

@media (min-width: 993px) and (max-width: 1200px) {
  /* step 3 */
 

  .Menu-Bell-Font { font-size: 18px!important; }
 
  .Menu-Bell-Font-Selected  { font-size: 18px!important; }


}


@media (min-width: 769px) and (max-width: 992px) {
  /* step 2 */
  

}

/* todo when finalizing responsive steps redistribute these ones in others steps above */
@media only screen and (max-width: 768px) {
  /* step 1  */
  
  h1 
  {
      font-family: 'BellSlim-Black'!important;
      color: #111111!important;	
      font-size: 30px!important;	
      font-weight: 900!important;	
      letter-spacing: -1px;	
      line-height: 36px;	
  } 	
  
  h1.big-price 
  {
      font-family: 'BellSlim-Bold'!important;
      font-size: 45px!important;	
      font-weight: 600!important;	
      letter-spacing: normal;	
      line-height: 36px;
  } 	
 

  h2 
  {
      font-family: 'BellSlim-Black'!important;
      color: #111111!important;	
      font-size: 22px!important;	
      font-weight: 900!important;	
      letter-spacing: -0.8px;	
      line-height: 28px;	
  }


  p.big {
    font-family: 'Arial-Regular'!important;	
    color: #111111!important;	
    font-size: 14px!important;	
    font-weight: 200!important;	
    letter-spacing: -0.6px;	
    line-height: 16px;
  }

  p.big-white {
    font-family: 'Arial-Regular'!important;	
    color: #ffffff!important;	
    font-size: 14px!important;	
    font-weight: normal!important;	
    letter-spacing: -0.6px;	
    line-height: 16px;
  }

  .plan-icon-2
  {
      width: 35px;
      height: 35px;
      margin-left: 9px;
      margin-top: 9px;
  }

  h3 {

      font-family: 'BellSlim-Black'!important;	
      text-transform: none !important;
      color: #111111;
      font-size: 16px;
      font-weight: 900;	
      letter-spacing: -0.6px;	
      line-height: 18px;	
      text-align: center;

  }

  p.thin-white {

    font-family: 'Arial-Regular'!important;	
    color: #FFFFFF!important;	
    font-size: 13px!important;	
    letter-spacing: -0.3px;	
    font-weight: normal!important;	
    line-height: 14px;
    text-align: center!important;

}

p.very-thin-white {
    font-family: 'Arial-Regular'!important;	
    color: #FFFFFF!important;	
    font-size: 9px!important;	
    letter-spacing: -0.3px;	
    font-weight: normal!important;	
    line-height: 11px;
    text-align: center!important;
}

p.small {
  font-family: 'Arial-Regular'!important;	
  color: #111111!important;	
  font-size: 10px!important;	
  font-weight: 200!important;	
  letter-spacing: -0.6px;	
  line-height: 12px;
}

h4 {

    font-family: 'BellSlim-SemBold'!important;	
    text-transform: none !important;
    color: #FFFFFF!important;	
    font-size: 20px!important;	
    font-weight: 600!important;	
    letter-spacing: -0.6px;	
    line-height: 21px;
    text-align: center!important;
}

p {
  font-family: 'Arial-Regular'!important;	
  color: #111111!important;	
  font-size: 12px!important;	
  letter-spacing: -0.3px;	
  line-height: 14px;
}

.logo-cnq {
 
   width: 60%!important;
   height: 60%!important;
     
}



}