@media all and (max-width : 1055px) {


	nav a .active-page{
	 color: #6BD6DE !important;}  
   
   
   
   
	 /* THE NAVIGATION CONTROLS */
   
	 #menu-toggle {
	 right: 15px;
   }
   
	 #menu-toggle {
	 position: absolute;
	 right: 30px;
	 top: 50%;
	 margin-top: -11px;
	 height: 22px;
	 width: 28px;
	 cursor: pointer;
	 z-index: 100;
	 -webkit-transition: opacity .25s ease;
	 -o-transition: opacity .25s ease;
	 transition: opacity .25s ease;
   }
   
   #menu-toggle span {
	 background: #048485;
	 border: none;
	 height: 2px;
	 width: 100%;
	 position: absolute;
	 left: 0;
	 -webkit-transition: all .35s ease;
	 -o-transition: all .35s ease;
	 transition: all .35s ease;
	 cursor: pointer;
	 border-radius: 1px;
   }
   
   #menu-toggle span.top {
	 top: 0px;}
   
   #menu-toggle.active .top {
	 transform: translateY(10px) translateX(0) rotate(45deg);
	 -ms-transform: translateY(10px) translateX(0) rotate(45deg);
	 -webkit-transform: translateY(10px) translateX(0) rotate(45deg);}
   
   #menu-toggle span.middle {
	 top: 10px;
   }
   
   #menu-toggle span.bottom {
	 bottom: 0px;}
   #menu-toggle.active .bottom {
	 transform: translateY(-10px) translateX(0) rotate(-45deg);
	 -ms-transform: translateY(-10px) translateX(0) rotate(-45deg);
	 -webkit-transform: translateY(-10px) translateX(0) rotate(-45deg);
   }
   
   
   
   
   
   header{
	 width: 100%;  
	 padding: 14px 0;
	 overflow: hidden;
	 box-sizing: border-box;
	 display: block;
	 position: fixed;
	 top: 0;
	 left: 0;
	 right: 0;
	 margin:0;
	 background-color: #FFF;
	 z-index: 9999999999999999999;
	 border-bottom: 1px solid #e5e7f1;  
	 font-family: "SofiaProRegular",sans-serif;
	 -webkit-animation: fade-in-header 4s .2s ease-in forwards;
		-moz-animation: fade-in-header 4s .2s ease-in forwards;
			 animation: fade-in-header 4s .2s ease-in forwards;
	 /*box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);*/}
   
   header #logo{
	 box-sizing: border-box;
	 float: left;}
   
   header #logo img{
	 width: 200px;
	 margin: 0 0 0 20px;
	 overflow: hidden;}
   
   header #logo a{
	 display: block;
	 cursor: pointer;
	 text-decoration: none;
	 color: none;
	 padding: 0;
	 overflow: hidden;}
   
   header #logo a:hover {
	 background-color: none;
	 text-decoration: none;
	 color: none;}
   
	 
   
	 /*MINE*/
	 /* Hide the navigation menu by default */
	 /* Also hide the  */
	 .openMenu + a,
	 .menu {
	   display: none;
	 }
   
	 /* Styling the openMenu lable */
	 body header {
	   position: absolute;
	   margin: 0 20px 0 0;
	   top: 20px;
	   right: 0px;
	   background-color: #FDBA2B;
	   padding: 6px 10px;  
	   font-family: "SofiaProRegular",sans-serif;
	   text-transform: uppercase;
	   font-size: 12px;
	   color: #fff;
	   text-decoration:none;
	   border:none;
	   border-radius: 50px;
	   z-index: 999999999999999999999999999999999;}

	   .openMenu {
		position: absolute;
		margin: 0 20px 0 0;		
		padding: 10px 20px;  
		top: 20px;
		right: 0px;
		background: #000000;
		text-decoration: none;
		border: solid 2px #FFF;
		text-align: center;
		font-family: "FFDINWebLight", sans-serif !important;
		letter-spacing: 1px;
		text-transform: uppercase;
		font-size: 12px;
		color: #fff;
		text-decoration:none;
		border-radius: 50px;
		z-index: 999999999999999999999999999999999;		
	}
   
	 .openMenu:hover {
	   background-color: #1A1A1A;}
   
   
	 .toggle,
	   [id^=drop] {
	   display: none;}
   
   
	 .toggle,
	   [id^=drop-2] {
	   display: none;}

	   .toggle,
	   [id^=drop-3] {
	   display: none;}
   
   
	 /* Hide the navigation menu by default */
	 /* Also hide the  */
	 .toggle + a,
	 .menu {
	   display: none;}
   
	 nav ul li ul li .toggle{
	   padding: 14px 20px;
	   color: #808080;
	 }
	 
   
	 /* Styling the toggle lable */
	 .toggle {
	   display: block;
	   color: #fff;
	   font-family: "Stratum2WebBlack", sans-serif;
	   font-size: 20px !important;
	   text-transform: uppercase;
	   /*background-color: #EDFAF9;*/	   
	   padding:14px 20px;  
	   font-size:16px;
	   text-decoration:none;
	   border:none;}  
   
	 .toggle::after{    
	 content: "";
	 display: inline-block;
	 width: 10px;
	 height: 10px;
	 position: absolute;
	 right: 20px;
	 margin: 10px 0 0 0;  
	 background-image: url("../images/svg/nav-arrows.svg");
	 background-size: contain;
	 background-repeat: no-repeat;
	 background-position: center center;}
   
	 .toggle:hover {
	   background-color: ;}
   
	 /* Display Dropdown when clicked on Parent Lable */
	 [id^=drop]:checked + ul {
	   display: block;}
	
	   /* Display Dropdown when clicked on Parent Lable */
	 [id^=drop-2]:checked + ul ul {
		display: block;}

	  /* Giving a background-color to the nav container. */
   nav { 
	 letter-spacing: 0.6px;
	 position: relative;
	 top: 15px;
	 } 
   
   
   /* Since we'll have the "ul li" "float:left"
	* we need to add a clear after the container. */
   
   nav:after {
	 content:"";
	 display:table;
	 clear:both;
   }
   
   
   
   /* Removing padding, margin and "list-style" from the "ul",
	* and adding "position:reltive" */
   nav ul {
	 padding:0;
	 list-style: none;
	 z-index: 99999999999;}
	 
   
   .active {
	 color: #6BD6DE;}
   
   /* Styling the links */
   nav a {
	font-family: "Stratum2WebBlack", sans-serif;
	 letter-spacing: 0.6px;
	 display:block;
	 padding:10px 20px;  
	 color: #FFF;
	/*background-color: #FFF;*/
	 font-size:20px;
	 text-decoration:none;
	 text-transform: uppercase;
   }
   
   
   
   .no-border-line{
	 border-bottom: none !important;
   
   }
   
   /* this hover covers the  */
   nav ul li ul li:hover { 
	 background: #333;
	 color: #FFF; 
	}
   
   /* Background color change on Hover */
   nav a:hover { 
	 background-color: #333;
	 color: #FFF; 
   }
   
   
	 
   /* The MAJOR KEY Displays Dropdowns on Hover 
   nav ul li:hover > ul {
	 display:block;
	 position: absolute;
	 -webkit-transition: visibility 0.3s ease 0s, top 0.3s linear 0s;
	 -o-transition: visibility 0.3s ease 0s, top 0.3s linear 0s;
	 transition: visibility 0.3s ease 0s, top 0.3s linear 0s
   }
	*/
	
   
   
   
   
   
   
   /* MY ODERED STYLE STARTS*/
   
   /* Positioning the navigation items inline */
   nav ul li {
	 margin: 0px;
	 display:block;
   /*border-bottom: 1px solid #e5e5e5;*/}
   
   
   /* Hide Dropdowns by Default
	* and giving it a position of absolute */
   nav ul ul {
	 width: 100%;
	 display: none;
	 box-sizing: border-box;
	 overflow: hidden;  
	 /*background-color: #FFF /*#6BD6DE #04AE38*/;
	 /*padding: 0 20px;*/}
   
   nav ul ul a{
	font-size: 16px;
	 width: 100%;;}
   
   /* Hide Dropdowns by Default
	* and giving it a position of absolute */
   nav ul li ul {
	 width: 100%;
	 margin: 0px;
	 display: none;
	 box-sizing: border-box;
	 overflow: hidden;  
	 /*background-color: #FFF /*#6BD6DE #04AE38*/;
	 /*padding: 0 20px;*/
   }
   
   /* First Tier Dropdown */
   nav ul li ul li {
	 display:list-item;
	 width: 100%; 
	 float: left; 
	 padding: 0;
	 /*border-bottom: 1px solid #1A1A1A;*/}
   
   nav ul li ul li a{
	font-family: "Stratum2WebBlack", sans-serif;	 
	 font-size: 20px;
	 width: 100%;
	 padding: 10px 20px}
   
   nav ul li ul li > ul{
	 border-bottom: none;
	 box-sizing: border-box;
	 overflow: hidden;  
	 width: 100%;
	 padding: 0 20px !important;}

	 /* First Tier Dropdown */
	 nav ul li ul li {
		float: left;
		width: 100%;  
		/*border-bottom: 1px solid #aeaeae;*/
		z-index:99999999999999999999999999;
		/*background-color: #ccc;*/
		float:left;
		margin: 0 10px 0 0;
		display:list-item;
		position: relative;
		padding: 10px 0;}
	  
	  
	  /*nav ul li ul li:hover { 
		border-bottom: 1px solid #e5e5e5;}*/
	  
	  nav ul ul li:hover > ul {
		display: block;
		position: relative;
		padding: 20px;
		background-color: #333;
		left: 0;
		right: 0;
		bottom: 0;
	  }
   
   
   nav ul li ul li ul{}
   
   .menu{
   margin: 0;
   padding: 100px 0 40px 0;
   animation: 300ms cubic-bezier(0.6, 0, 0.15, 1) 0s 1 normal forwards running judzXK;
   box-sizing: border-box;
   width: 100%;
   /*height: calc(-58px + 100vh);*/
   height: 100vh;
   overflow-y: scroll;
   background: #000}
   
   /* MINE STYLE ENDS*/
   nav ul ul li:hover > ul {
	 display:block;
	 position: relative;
	 -webkit-transition: visibility 0.3s ease 0s, top 0.3s linear 0s;
	 -o-transition: visibility 0.3s ease 0s, top 0.3s linear 0s;
	 transition: visibility 0.3s ease 0s, top 0.3s linear 0s
   }
   
   /*Controls the hover state of the ul ul li a of "Who We Are" */
   nav ul li ul li a:hover {
	 color: #FFF;
	 border-bottom: none;
	 text-decoration: none;
   }
   
   
   nav li ul h2{
   display: none;}
   
   nav li ul p{
	 display: none;}
   
   
   
   
   /*nav ul ul li a:hover{  
	 color: #6BD6DE;
   }*/
   
   
   
   
   nav ul li ul a{
	 font-family: "SofiaProBold",sans-serif;
	 font-size: 16px;
   }
   
   
   
   
   /* Second, Third and more Tiers 
	* We move the 2nd and 3rd etc tier dropdowns to the left
	* by the amount of the width of the first tier.
   */
   nav ul li ul li ul li {
	 float: left;
	 width: 100%;  
	 /*border-bottom: 1px solid #e5e5e5;*/
	 z-index:99999999999999999999999999;
	 
	 float:left;
	 display:list-item;
	 position: relative;
	 
	 /* has to be the same number as the "width" of "nav ul ul li" */ 
	  
   }
   
   nav ul li ul li ul li a{
	font-family: "Stratum2WebBlack", sans-serif;
	color: #FFF;
	 font-size: 16px;
	 /*background-color: #333;*/
	 margin: 0;
   }

   nav ul li ul li ul li a:hover{
	font-family: "Stratum2WebBlack", sans-serif;
	color: #FFF;
	 font-size: 16px;
	 /*background-color: #333;*/
	 margin: 0;
   }
   
   
   nav ul ul ul li a{
	 width: 100%;
	 padding: 0;
	 margin: 0;
   }
   
   nav ul ul ul li a:hover{
	 border-bottom: none;
   }
   
	 
   /* Change ' +' in order to change the Dropdown symbol 
   li > a:after { 
   content:  ' +';
	}
   
   li > a::after {
	 content: "";
	 display: inline-block;
	 width: 10px;
	 height: 10px;
	 position: absolute;
	 margin: 10px 0 0 0;
	 background-image: url("../images/svg/nav-arrows.svg");
	 background-size: contain;
	 background-repeat: no-repeat;
	 background-position: center center;
   }
   */
   
   li > a:only-child:after { content: ''; }
	 
   
   
}
   
   
    
   
   
@media screen and (min-width: 1056px) and (max-width: 4000px) {
	nav ul li a.active-page{
	 color: #6BD6DE !important;} 
   
   header{  
	 position: fixed !important;
	 top: 0;
	 right: 0;
	 left: 0;
	 width: 100%;  
	 padding: 15px 0;
	 box-sizing: border-box;
	 display: block;
	 margin:0;
	 background-color: #FFF;
	 z-index: 9999999999999999999;
	 border-bottom: 1px solid #e5e7f1;  
	 font-family: "SofiaProRegular",sans-serif;
	 -webkit-animation: fade-in-header 4s .2s ease-in forwards;
		-moz-animation: fade-in-header 4s .2s ease-in forwards;
			 animation: fade-in-header 4s .2s ease-in forwards;
	 /*box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);*/}
   
   header #logo{
	 /*display: block;
	 padding: 0 30px;
	 float: left;
	 font-size:20px;
	 line-height: 60px;*/
	 position: absolute;
	 left: 20px;
	 box-sizing: border-box;
	 float: left;
	 display:inline-block;
	 z-index: 99999999999999999999999999999;
	 /*margin: 0 0 0 40px;
	 overflow: hidden;*/}
   
   header #logo img{
	 width: 250px;
	 margin: 5px 0 0 0;}
   
   header #logo a{
	 display: block;
	 cursor: pointer;
	 text-decoration: none;
	 color: none;
	 padding: 0;
	 overflow: hidden;}
   
   header #logo a:hover {
	 cursor: pointer;
	 background-color: none;
	 text-decoration: none;
	 color: none;}
   
   .toggle,
   [id^=drop] {
	 display: none;} 
   
   
	 .openMenu,
   [id^=drop] {
	 display: none;
   }
   
   
   /* Giving a background-color to the nav container. */
   nav { 
	/*width: 50%;*/
	 position: absolute;
	 display: flex;
	 right: 0;
	 top: 55px;
	 right: 75px;
	 justify-content: right;
	 /*line-height: 42px;
   
	 position: absolute;
	 box-sizing: border-box;
	 display:inline-block;
	 float: left;
	 margin: auto;*/} 
   
   
   /* Since we'll have the "ul li" "float:left"
	* we need to add a clear after the container. */
   
   nav:after {
	 content:"";
	 display:table;
	 clear:both;
   }
   
   
   
   /* Removing padding, margin and "list-style" from the "ul",
	* and adding "position:reltive" */
   nav ul {
	 padding:20px;
	 margin:0;
	 list-style: none;
	 z-index: 99999999999;
	 background-color: #FFF;
	 border-radius: 20px;

	}
	 
   /* Positioning the navigation items inline */
   nav ul li {
	 margin: 0px;
	 display:inline-block;
	 float: left;}
   
   .active {
	 color: #333;}
   
   /* Styling the links */
   nav a {
	 letter-spacing: 0.6px;
	 display: block;
	 padding: 15px;  
	 color: #000;
	 text-transform: uppercase;
	/*background-color: #FFF;*/
	 font-size: 20px;
	 font-family: "Stratum2WebBlack", sans-serif;
	 text-decoration:none;
   }
   
   nav ul li:hover{
	/*border-bottom: 2px solid #6BD6DE !important;*/  
   }
   
   .no-border-line{
	 border-bottom: none !important;
   
   }
   
   /* this hover covers the
   nav ul li ul li:hover { 
	 background: transparent;}  */
   
   /* Background color change on Hover */
   nav a:hover { 
	 background-color: transparent;
	 color: #808080; 
   }
   
   /* Hide Dropdowns by Default
	* and giving it a position of absolute */
   nav ul ul {
	 width: 100%;
	 display: none;
	 box-sizing: border-box;
	 position: left; 
	 overflow: hidden;
	 top: 60px;
	 left: 0;
	 right: 0;	
	 background-color: #FFF /*#6BD6DE #04AE38*/;
	 padding: 40px;
	 z-index: 9999999999999999999999999999;
	 border-bottom: 6px solid #808080;
	 -webkit-transition: visibility 0.3s ease 0s, top 0.3s linear 0s;
	 -o-transition: visibility 0.3s ease 0s, top 0.3s linear 0s;
	 transition: visibility 0.3s ease 0s, top 0.3s linear 0s
   }
   
	 
   /* The MAJOR KEY Displays Dropdowns on Hover */
   nav ul li:hover > ul {
	 display:block;
	 position: absolute;
	 -webkit-transition: visibility 0.3s ease 0s, top 0.3s linear 0s;
	 -o-transition: visibility 0.3s ease 0s, top 0.3s linear 0s;
	 transition: visibility 0.3s ease 0s, top 0.3s linear 0s
   }
	 
   /* First Tier Dropdown */
   nav ul li ul li {
	 float: left;
	 width: 100%;  
	 /border-bottom: 1px solid #aeaeae;
	 z-index:99999999999999999999999999;
	 /*background-color: #ccc;*/
	 float:left;
	 padding: 0;
	 display:list-item;
	 position: relative;
	 margin: 0 0 10px 0;}
   
   
   /*nav ul li ul li:hover { 
	 border-bottom: 1px solid #e5e5e5;}*/
   
   nav ul ul li:hover > ul {
	 display: block;
	 position: relative;
	 padding: 40px;
	 background-color: #FFF;
	 left: 0;
	 right: 0;
	 bottom: 0;
   }
   
   nav ul li ul li a{}
   
   
   nav ul li ul li a:hover {
	 color: #808080;
	 border-bottom: none;
	 text-decoration: none;
   }
   
   
   nav li ul h2{
   overflow-wrap: break-word;
   font-size: 1.45rem;
   line-height: 1.1;
   font-family: "SofiaProBold",sans-serif;
   text-align: left;
   color: #3d4250;
   margin: 0 0 20px 0;
   }
   
   nav li ul p{
	 margin: 0 ;
	 font-size: 16px;
	 line-height: 16px;
	 color: #333;
	 font-family: "FFDINWebLight", sans-serif !important;
	 text-align: left;
	 padding: 10px 0;
	}
   
   
   nav ul ul li a{
	 padding: 0 !important;
   }
   
   
   /*nav ul ul li a:hover{  
	 color: #6BD6DE;
   }*/
   
   
   
   
   nav ul li ul a{
	font-family: "Stratum2WebBlack", sans-serif;
	 font-size: 18px;
   }
   
   /* VERY IMPORTANT */
   nav ul li ul li ul{
	 display: block;	 
	 box-sizing: border-box;
	 width: 100%;
	 height: auto;
	 border-bottom: none;
	 overflow: hidden;	 
	 position: relative;
	 top:5px;
	 left: 0px;
	 right: 0px;
	 z-index: 999999999999999999999;	 
	 background-color: #000;
	 /*background-color: red;*/	 
	 /*padding: 0 0 20px 0 !important;*/
	 border-radius: 10px;
	 
	 }

	 nav ul li ul li ul:hover{
		background-color: #333;
		display: block;	 
		box-sizing: border-box;
		width: 100%;
		height: auto;
		border-bottom: none;
		overflow: hidden;	 
		position: relative;
		top:5px;
		left: 0px;
		right: 0px;
		z-index: 999999999999999999999;
		border-radius: 10px;
	 }
   
   
   /* Second, Third and more Tiers 
	* We move the 2nd and 3rd etc tier dropdowns to the left
	* by the amount of the width of the first tier.
   */
   nav ul li ul li ul li {
	 float: left;
	 width: 100%;  
	 /*background-color: green;*/
	 /*border-bottom: 1px solid #e5e5e5;*/
	 z-index:99999999999999999999999999;
	 float:left;
	 display:list-item;
	 position: relative;
	 /* has to be the same number as the "width" of "nav ul ul li" */ 
	  
   }
   
   
	nav ul li ul li ul li a{
		font-family: "Stratum2WebBlack", sans-serif;
		font-size: 16px;
		color: #FFF;
	}

	nav ul li ul li ul li a:hover{
		font-family: "Stratum2WebBlack", sans-serif;
		font-size: 16px;
		color: #000;
	}
	
	nav ul ul ul li a{
		width: 100%;
		padding: 0;
		margin: 0;
	}
	
	nav ul ul ul li a:hover{
		border-bottom: none;
	}
	
		
	/* Change ' +' in order to change the Dropdown symbol
	li > a:after { 
	content:  ' +';
		}
	
	li > a::after {
		content: "";
		display: inline-block;
		width: 10px;
		height: 10px;
		position: absolute;
		margin: 10px 0 0 0;
		background-image: url("../images/svg/nav-arrows.svg");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
	} */
	
	
	li > a:only-child:after { content: ''; }	
   
   
   }