/************ SMART PHONE NAVIGATION ***************** */

#mobile-nav-container {
  display: none;
}

@media screen and (min-width: 320px) and (max-width: 768px) {
 header nav{
    display: none;
 }

 #mobile-nav-container {
   display: block;
   z-index: 99;
   position: fixed /*relative*/;
 }
}

@media screen and (min-width: 651px) {

}

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

}

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

}

@media (max-width: 736px) {

}

@media (max-width: 375px) {

}

@media (max-width: 768px) {

}

@media screen and (min-width: 320px) and (max-width: 768px) {

}

@media (max-width: 768px) {

}

@media (min-width: 769px) {

}

@media (max-width: 768px) {

}

@media (max-width: 768px) {

}

@media (max-width: 768px) {

}

/***** MOBILE MENU STARTS HERE *****/

#mobile-nav-container a {
  text-decoration: none;
  color: #1E1E23;
  opacity:1;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9em;
  font-weight: 400;
  transition: 200ms;
}
#mobile-nav-container a:hover {
  opacity:0.5;
}
#mobile-nav-container ul {
  padding: 0;
  list-style-type: none;
}

#mobile-nav-container nav {
  background-color: #1E1E23;
  height: 65px;
  width: 80px;
}


#mobile-nav-container #menuToggle {
  display: flex;
  flex-direction: column;
  position: relative;
  top: 25px;
  left: 25px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#mobile-nav-container #menuToggle input
{
  display: flex;
  width: 40px;
  height: 32px;
  position: absolute;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
}

#mobile-nav-container #menuToggle span
{
  display: flex;
  width: 29px;
  height: 2px;
  margin-bottom: 5px;
  position: relative;
  background: #ffffff;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 5px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#mobile-nav-container #menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#mobile-nav-container #menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#mobile-nav-container #menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-3px, -1px);
  background: #36383F;
}
#mobile-nav-container #menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#mobile-nav-container #menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

#mobile-nav-container .menu > ul
{
  position: absolute;
  width: 180px;
  height: 500px;
  overflow: scroll;
  box-shadow: 0 0 10px #85888C;
  margin: -93px 0 0 -50px;
  padding: 50px;
  padding-top: 110px;
  background-color: #F5F6FA;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#mobile-nav-container .menu ul li
{
  padding: 3px 0;
  text-transform: uppercase;
  transition-delay: 2s;
}

#mobile-nav-container .menu ul li a {
    font-weight: bold
}
#mobile-nav-container .menu ul li .children a {
    font-weight: 100;
    margin-left: 9px;
    position: relative
}

#mobile-nav-container .menu ul li .children a::after {
    display: block;
    content: "";
    position: absolute;
    left: -8px;
    top: 10px;
    width: 3px;
    border-top: 1px solid black; 
}

#mobile-nav-container #menuToggle input:checked ~ .menu ul
{
  transform: none;
}

#mobile-nav-container .menu ul .children {
	position: relative !important;
	box-shadow: 0 0 0px #85888C;
    margin: 0px 0 0 0px;
    padding: 0px;
    padding-top: 0px;
}


/****************************************************** */



/* ----------- Windows Phone ----------- */

/* Portrait and Landscape */
@media screen
  and (device-width: 480px)
  and (device-height: 800px) {
     
}

/* Portrait */
@media screen
  and (device-width: 480px)
  and (device-height: 800px)
  and (orientation: portrait) {
	 
}

/* Landscape */
@media screen
  and (device-width: 480px)
  and (device-height: 800px)
  and (orientation: landscape) {

}

/* ----------- HTC One ----------- */

/* Portrait and Landscape */
@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3) {
     
}

/* Portrait */
@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3)
  and (orientation: portrait) {
	 
}

/* Landscape */
@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3)
  and (orientation: landscape) {

}

/* ----------- Google Pixel ----------- */

/* Portrait and Landscape */
@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3) {
     
}

/* Portrait */
@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3)
  and (orientation: portrait) {
	
}

/* Landscape */
@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3)
  and (orientation: landscape) {

}

/* ----------- Google Pixel XL ----------- */

/* Portrait and Landscape */
@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 4) {
     
}

/* Portrait */
@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 4)
  and (orientation: portrait) {
	 
}

/* Landscape */
@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 4)
  and (orientation: landscape) {

}

/* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */
@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 2) {
     
}

/* Portrait */
@media screen
  and (device-width: 320px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 2)
  and (orientation: portrait) {
	 
}

/* Landscape */
@media screen
  and (device-width: 320px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- Galaxy S4, S5 and Note 3 ----------- */

/* Portrait and Landscape */
@media screen
  and (device-width: 320px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3) {
     
}

/* Portrait */
@media screen
  and (device-width: 320px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3)
  and (orientation: portrait) {
	 
}

/* Landscape */
@media screen
  and (device-width: 320px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3)
  and (orientation: landscape) {

}

/* ----------- Galaxy S6 ----------- */

/* Portrait and Landscape */
@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 4) {
     
}

/* Portrait */
@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 4)
  and (orientation: portrait) {
	 
}

/* Landscape */
@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 4)
  and (orientation: landscape) {

}

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
     
}

/* Portrait */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	 
}

/* Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
      
}

/* Portrait */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	 
}

/* Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2) {
      
}

/* Portrait */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
        
}

/* Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {    

}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3) {
      
}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3) {
      

}

/* PORTRAIT */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px)
	and (-webkit-min-device-pixel-ratio: 3) 
  	and (orientation: portrait){
	
}

/** NEW DEVICES HERE ***/

/* IPHONE 12 MINI 2340x1080 pixels at 476ppi */
@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3) { }


@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3)
    and (orientation : portrait) {
        
    }

@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3)
    and (orientation : landscape) {
        
    }

/* IPHONE 12 Pro Max 778x1284 pixels at 458ppi */
@media only screen 
    and (device-width: 428px) 
    and (device-height: 926px) 
    and (-webkit-device-pixel-ratio: 3) {   
    
    }   

@media only screen 
    and (device-width: 428px) 
    and (device-height: 926px) 
    and (orientation : portrait) {
    
    }

@media only screen 
    and (device-width: 428px) 
    and (device-height: 926px) 
    and (orientation : landscape) {
        
    }

/* IPHONE 11 & XR 1792x828px at 326ppi */
@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 2) {   
    
    }

@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 2)
    and (orientation : portrait) {
    
    }

@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 2)
    and (orientation : landscape) {
        
    }


/* IPHONE 11 Pro 2436x1125px at 458ppi */
@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3) { 
    
    }

@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (orientation : portrait) {
    
    }

@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (orientation : landscape) {
        
    }


/* I{HONE 11 Pro MAX 2688x1242px at 458ppi */
@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 3) { 

    }

@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (orientation : portrait) {
    
    }

@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (orientation : landscape) {
             
    }