/* Page Heading*/ 
@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@600&display=swap');

#feature{background-color: #97D4E9;}

#feature_txt{ 

      text-align: left;
      color: #002145;

     
}

/*Styling meant only for UBC Okanagan Catalog for feature text*/ 
#feature_txt h1 { padding-top: 9%;}
#cont-proff{font-family: Arial; }

#feature_txt #cont-proff{ 

      padding-bottom: 9%;
      padding-top: 0.2%;
}

#feature_txt h1,#cont-proff{
padding-right: 2%; 
margin: 0;
}

/*Styling meant for all sub-catalogs for feature text*/ 
#feature_txt h3 {padding-bottom: 2%;}

#feature_txt h4 { padding-top: 2%;}

#feature_txt h3,#feature_txt h4 {
padding-right: 2%; 
margin: 0;
font-family: Arial; 

}


/* Main Menu Bar Buttons Customizations*/ 

/*Adjusts space between user navigation and Shopping Cart */
#user-nav{margin-right: 3%;}

#user-nav > a{

    padding-right: 2%; 
    padding-left: 2%; 

} 

/*Custom Dropdown Menu*/ 

.show-cus {display: block! important;}

.btndrop {
  background-color: transparent;
  font-family: Arial; 
  color: white;
  padding: 5px 10px;
  font-size: 20px;
  border: 1px solid transparent;
  cursor: pointer;
}

.cus-dropdown-content {

  padding-top: 6px; 
  padding-bottom: 6px; 
  display: none;
  position: absolute;
  background-color: whitesmoke;
  min-width:16px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border: 1px solid #c9c9c9;
  border-radius: 4px;

}

.cus-dropdown-content a {
  color: #343c44;
  padding: 12px 16px;
  text-decoration: none;
  display: block;

}

.cus-dropdown-content a:hover {background-color: #ddd;}

.border-under{ border-bottom: 1px solid #d3d3d3;}
 
/*Positions Custom Dropdowns */ 
.dropdownPosLeft{
 position: relative; 
 display: inline-block; 
}

.pullLeft{

 left:0; 
 margin-top: 5%; 

}

/* DropDown Customization to look/behave like Canvas Catalogue style (adds arrow, dotted line) */ 

.btndrop:hover, .btndrop:focus {
text-decoration: underline;

}

.btndrop:focus {
    outline: thin dotted;

}

.cus-icon-right:after{

    font-family: 'catalog';
    display: inline-block;
    speak: none;
    text-transform: none !important;
    vertical-align: middle;
    min-width: 1em;
    color: white;

}

.cus-icon-right-bef:after{

    font-size: 9px;
    content: "\e617";
    vertical-align: middle;
}

.cus-icon-right-af:after{ content: "\e618";}

/*Mobile Nav*/ 

/*Positions and styles hamburger icon in header-menu*/

.mobileNav { float:left;width:500px;}

#burger-icon{

  font-size: 1.5em;
  text-decoration: none;
  color: white; 
  margin-right: auto;
  margin-left: auto;
  padding-left: 7.5px;
  padding-right: 7.5px;
  border-radius: 0.25rem; 
  border:1px solid white
  
}

/*positions and adds styling to links in sub-menu*/

#mobMenLinks{
 
background-color: #97D4E9;
padding-top: 2.5%; 
margin-top: 1.5%; 

}

.topLinks { background-color: #002145;}

.deadSubLink, .deadSubLink:hover, .deadSubLink:active, .deadSubLink:visited, .deadSubLink:focus { text-decoration:none; outline: none;}

.topLinks a { color: white; font-size: 3.5vw;}

#CPE-main-menLink, #browse-menLink{
padding-left: 10px;
padding-top:3.5%;
padding-bottom: 3.5%; 
}

#browse-menLink{ border-top :1px solid #97D4E9;}

#cpeLinks a, #browseLinks a {

display: block; 
padding-left: 10px; 
padding-top: 2%;
padding-bottom: 2%; 
font-size: 3.1vw; 
}

.topLinks .activeSubLinks a:hover{

color: #002145; 
background-color:white; 
text-decoration: none; 
}

/*Adds padding above last sub-link in sub-menu*/
#cpeLinks, #browseLinks{ padding-bottom: 1%; } 
 
/*Keeps sub-menu divs hidden*/ 
#mobMenLinks, #cpeLinks, #browseLinks{
display: none;
} 

/* Dropdown Arrow Positioning*/
.cus-arrow-men{
 float: right; 
 width: 20px; 
 padding-right: 38px; 
}

/* Responsive Device Adjustments*/ 

/* Tiny devices (phones, 360px and down) */
@media only screen and (max-width: 360px) {

#feature_txt h1,#cont-proff, #feature_txt h3, #feature_txt h4 {padding-left: 4%; }

   #feature_txt h1{
    font-size: 1.7em;
    font-weight: 121;
   }

}

/* Extra small devices (phones, 512px and down) */
@media only screen and (max-width: 512px) and (min-width: 360px)  {

  #feature_txt h1{font-size: 2.2em; }
  #feature_txt #cont-proff{ font-size: 1.2em;}

  #feature_txt h1,#cont-proff, #feature_txt h3, #feature_txt h4 {padding-left: 4%; }
  #feature_txt h1, #feature_txt h3{ font-weight: 121;}

  #feature_txt h3{ font-size: 1.5em;}  

}

/* Small devices (portrait tablets and large phones) */
@media only screen and (min-width: 512px) {


 #feature_txt h1 { font-size: 3.0em; }
 #feature_txt #cont-proff{ font-size: 1.4em;}

 #feature_txt h1,#cont-proff, #feature_txt h3, #feature_txt h4{ padding-left: 3%; } 

 #feature_txt h3 { font-size: 1.7em; } 

}

/*Breakpoint to switch into Mobile Nav*/ 
@media only screen and (min-width: 600px) {

.cus-dropdown-content a {font-size: 1.85vw;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

#feature_txt h1 { font-size: 4em;}
#feature_txt #cont-proff{ font-size: 1.6em;}

.cus-dropdown-content a {font-size: 1.8vw;}

#feature_txt h3 { font-size: 1.8em;}

}


/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

#feature_txt h1 { font-size: 5em;}
#feature_txt #cont-proff{ font-size: 1.6em;}

.cus-dropdown-content a {font-size: 1.4vw;}

#feature_txt h3 { font-size: 2em;}


}


/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

#feature_txt h1 { font-size: 6em;}
#feature_txt #cont-proff { font-size: 2em;}

.cus-dropdown-content a {font-size: 1.03em;}

#user-nav, #cart {
margin-top: 3% !important;
}

#feature_txt h3 { font-size: 2.1em;}
#feature_txt h4 { font-size: 1.2em;}


}

/*Between Medium devices and Extra large devices*/ 
@media only screen and (max-width: 1200px) and (min-width: 768px)  {

   #user-nav, #cart{ margin-top: 10%; }
}