/* CSS TopMenuBehaviors */

/* // Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap */

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

/* // Medium devices (tablets, 768px and up) */
@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) {

}

.TopHoverMenu {border-top:1px solid #dee2e6 !important;border-bottom:1px solid #dee2e6 !important;}
.TopHoverMenu-holder h3{width:100%;position:relative;color:#545454;text-transform:uppercase;text-align:left;font-weight:bold;font-size:12px;margin:0;padding:0 0 12px 0;}
.TopHoverMenu-holder h3 button {display:none;}
.TopHoverMenu-holder {margin:auto;position:relative;z-index:2;}
.TopHoverMenu-holder ul li.pad {float:left;width:20%;text-align:center;}
.TopHoverMenu-holder ul li {color:#838080;text-decoration:none;}
.TopHoverMenu-holder a{color:#838080;text-decoration:none;display:block;transition:0.1s;}
.TopHoverMenu-holder ul li.pad a {text-decoration:none;padding:8px 17px 8px 17px;font-family:'Manjari', sans-serif;}
.TopHoverMenu-holder ul li.pad a img {display:none;}
.TopHoverMenu-holder ul {margin:0;padding:0;list-style:none;width:100%;}
.TopHoverMenu-holder ul li span {padding: 7px 0;font-family:'Manjari', sans-serif;color:#000000;}
.TopHoverMenu-holder ul li.pad > a:hover, .using > li:hover > a {background:none;}

#watches ul li a:hover span, #watches .using > li:hover > a > span{color:#fa9c14;border-bottom:2px solid #fa9c14;transition:0.1s;}
.sub-wrapper-watches a:hover {color:#6159CC;transition:0.3s;}

#bezel ul li a:hover span, #bezel .using > li:hover > a > span{color:#fa9c14;border-bottom:2px solid #fa9c14;transition:0.1s;}
.sub-wrapper-bezel a:hover {color:purple;transition:0.3s;}

#SpecialItems ul li a:hover span, #SpecialItems .using > li:hover > a > span{color:#fa9c14;border-bottom:2px solid #fa9c14;transition:0.1s;}
.sub-wrapper-SpecialItems a:hover {color:#fa9c14;transition:0.3s;}

#Diamond ul li a:hover span, #Diamond .using > li:hover > a > span{color:#fa9c14;border-bottom:2px solid #fa9c14;transition:0.1s;}
.sub-wrapper-Diamond a:hover {color:#78ba42;transition:0.3s;}

#Jewelry ul li a:hover span, #Jewelry .using > li:hover > a > span{color:#fa9c14;border-bottom:2px solid #fa9c14;transition:0.1s;}
.sub-wrapper-Jewelry a:hover {color:#ca3723;transition:0.3s;}

.sub-wrapper-watches, .sub-wrapper-bezel, .sub-wrapper-SpecialItems, .sub-wrapper-Diamond, .sub-wrapper-Jewelry {width:100%;height:auto;background:#fafafa;background-repeat:no-repeat;background-size:cover;background-position:right;position:absolute;left:0;padding:40px 0;}
.sub-wrapper-watches, .sub-wrapper-bezel, .sub-wrapper-SpecialItems, .sub-wrapper-Diamond, .sub-wrapper-Jewelry ul {text-align:left;}
.TopHoverMenu-holder ul li > ul {position:absolute;left:-9000px;}
.TopHoverMenu-holder ul li:hover ul {left:0;}
.sub-con {width:95%;margin:0 auto;}
.sub-1, .sub-m {float:left;width:25%;}
.sub-r {float:right;width:25%;}

#Watch-activator-1 {color:#545454;text-decoration: none;}
#Watch-activator-2 {color:#545454;text-decoration: none;}
#Watch-activator-3 {color:#545454;text-decoration: none;}
#SandwichMenu {display:none;width:100%;margin:0;position:absolute;top:0;z-index:4;
animation-duration: 0.5s;animation-fill-mode: both;animation-name: btnEntrance;
}
/* fadeInUp */
@keyframes btnEntrance {
    from {opacity:0;}
    to   {opacity:1;}
}

.SandwichButton       {cursor:pointer;width:65px;height:65px;text-align:center;font-size:1.552em;color:#545454 !important;padding:10px 14px;border-radius:65px;margin:1em 0;}
.SandwichButton:hover {cursor:pointer;width:65px;height:65px;text-align:center;font-size:1.552em;color:#545454 !important;padding:10px 14px;border-radius:65px;margin:1em 0;}
.SandwichButton-Holder {margin:13px 1em 0 0;position:absolute;left:0;}



.LogonUser-Wrapper {height:auto;position:absolute;right:0px;top:0;width:320px;padding:0;display: block;}
.LogonUser-holder {width:auto;background:none;padding:0;position:absolute;right:0;display:block;}
.LogonUser-holder button {float:left;width:100%;margin:0;border:0;background:#fff;padding:1em;border-bottom: 2px solid #ccc;}
.LogonUser-holder button svg {margin: 3px 0 0;float:left;font-size:1.6em;color:#c92365;}
.LogonUser-holder button a       {color:#38364c;font-size:1.5em;width:80%;float:left;text-align:center;text-decoration:none;}
.LogonUser-holder button a:hover {color:#c92365;font-size:1.5em;width:80%;float:left;text-align:center;text-decoration:none;}
.LogonUser-holder button span {margin: 3px 0 0;}

.LogonUserMobile-Wrapper{display:none;}
.Topbar-MobileLogoHolder {display:none;width:45px;}
#Topbar-MobileMenuLogoHolder {display:block;width:220px;margin:1rem auto;}
#open-left {background:none;text-decoration:none;}
#open-left span{color:#534941;font-size:1.6em;}
#open-left p {color:#102e90;margin:0;font-family:helvetica;}
#Top_Menu-Mobilecontact       {display:none;float:left;width:100%;margin:10px 0 0;}
#Top_Menu-Mobilecontact span {float:left;width:60%;margin:0;font-size:0.9em;color:#545454;}
#Top_Menu-Mobilecontact p     {float:left;width:40%;margin:0;font-size:0.8em;color:#263271;font-weight:bold;}
#Top_Menu-Mobilecontact em    {float:left;width:60%;margin:0;font-size:0.9em;color:#545454;}


/* OLDER - Desktops and laptops small */
@media screen and (min-width: 768px){
/* Styles */
#Top_Menu-contact {display:block;float:left;width:25%;margin:10px 0 0;}
#Top_Menu-contact p {float:left;width:auto;margin:0 5% 0 0;font-size:0.8em;color:#263271;font-weight:bold;}
#Top_Menu-contact em {float:left;width:60%;margin:0;font-size:0.9em;color:#545454;}

#CurrentUserInfoMobile {position:absolute;color:#545454;font-size:0.9em;font-weight:lighter;margin:3px 3% 0px 0px;padding:0px 10px 5px 5px;text-align:right;width:auto;display:none;}
#CurrentUserInfoMobile div {cursor:pointer;text-align:center;height:50px;width:50px;margin: -4px auto 1px;border-radius:120px;box-shadow:0px 1px 6px -2px rgb(152, 152, 152); background:#ffffff;}
#CurrentUserInfoMobile div a {margin:0;}
#CurrentUserInfoMobile div a img {float:none;border-radius:120px;margin:0;}
#CurrentUserInfoMobile p {margin:0;}
#CurrentUserInfoMobile p em {font-weight:bold;color:#753E0B;}

#CurrentUserInfo div {float:left;cursor:pointer;text-align:center;height:50px;width:50px;margin: -4px auto 1px;border-radius:120px;box-shadow:0px 1px 6px -2px rgb(152, 152, 152); background:#ffffff;}
#CurrentUserInfo div a {margin:0;}
#CurrentUserInfo div a img {float:none;border-radius:120px;margin:0;}
#CurrentUserInfo p {float:left;margin:0 0 0 1em;}
}
/* OLDER - Desktops and laptops ----------- */
@media only screen and (min-device-width : 1024px) and (max-device-width : 1223px) {
/* Styles */
#Top_Menu-contact {display:block;float:left;width:20%;margin:10px 0 0;}
#Top_Menu-contact p {float:left;width:40%;margin:0;font-size:0.8em;color:#263271;font-weight:bold;}
#Top_Menu-contact em {float:left;width:60%;margin:0;font-size:0.9em;color:#545454;}

#CurrentUserInfoMobile {position:absolute;color:#545454;font-size:0.9em;font-weight:lighter;margin:3px 3% 0px 0px;padding:0px 10px 5px 5px;text-align:right;width:auto;display:none;}
#CurrentUserInfoMobile div {cursor:pointer;text-align:center;height:50px;width:50px;margin: -4px auto 1px;border-radius:120px;box-shadow:0px 1px 6px -2px rgb(152, 152, 152); background:#ffffff;}
#CurrentUserInfoMobile div a {margin:0;}
#CurrentUserInfoMobile div a img {float:none;border-radius:120px;margin:0;}
#CurrentUserInfoMobile p {margin:0;}
#CurrentUserInfoMobile p em {font-weight:bold;color:#753E0B;}

#CurrentUserInfo div {float:left;cursor:pointer;text-align:center;height:50px;width:50px;margin: -4px auto 1px;border-radius:120px;box-shadow:0px 1px 6px -2px rgb(152, 152, 152); background:#ffffff;}
#CurrentUserInfo div a {margin:0;}
#CurrentUserInfo div a img {float:none;border-radius:120px;margin:0;}
#CurrentUserInfo p {float:left;margin:0 0 0 1em;}
}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
#Top_Menu-contact {display:block;float:left;width:20%;margin:10px 0 0;}
#Top_Menu-contact p {float:left;width:40%;margin:0;font-size:0.8em;color:#263271;font-weight:bold;}
#Top_Menu-contact em {float:left;width:60%;margin:0;font-size:0.9em;color:#545454;}

#CurrentUserInfoMobile {position:absolute;color:#545454;font-size:0.9em;font-weight:lighter;margin:3px 3% 0px 0px;padding:0px 10px 5px 5px;text-align:right;width:auto;display:none;}
#CurrentUserInfoMobile div {cursor:pointer;text-align:center;height:50px;width:50px;margin: -4px auto 1px;border-radius:120px;box-shadow:0px 1px 6px -2px rgb(152, 152, 152); background:#ffffff;}
#CurrentUserInfoMobile div a {margin:0;}
#CurrentUserInfoMobile div a img {float:none;border-radius:120px;margin:0;}
#CurrentUserInfoMobile p {margin:0;}
#CurrentUserInfoMobile p em {font-weight:bold;color:#753E0B;}

#CurrentUserInfo div {float:left;cursor:pointer;text-align:center;height:50px;width:50px;margin: -4px auto 1px;border-radius:120px;box-shadow:0px 1px 6px -2px rgb(152, 152, 152); background:#ffffff;}
#CurrentUserInfo div a {margin:0;}
#CurrentUserInfo div a img {float:none;border-radius:120px;margin:0;}
#CurrentUserInfo p {float:left;margin:0 0 0 1em;}
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
#Top_Menu-contact {display:block;float:left;width:20%;margin:10px 0 0;}
#Top_Menu-contact p {float:left;width:30%;margin:0;font-size:0.8em;color:#263271;font-weight:bold;}
#Top_Menu-contact em {float:left;width:60%;margin:0;font-size:0.9em;color:#545454;}

#CurrentUserInfoMobile {position:absolute;color:#545454;font-size:0.9em;font-weight:lighter;margin:3px 3% 0px 0px;padding:0px 10px 5px 5px;text-align:right;width:auto;display:none;}
#CurrentUserInfoMobile div {cursor:pointer;text-align:center;height:50px;width:50px;margin: -4px auto 1px;border-radius:120px;box-shadow:0px 1px 6px -2px rgb(152, 152, 152); background:#ffffff;}
#CurrentUserInfoMobile div a {margin:0;}
#CurrentUserInfoMobile div a img {float:none;border-radius:120px;margin:0;}
#CurrentUserInfoMobile p {margin:0;}
#CurrentUserInfoMobile p em {font-weight:bold;color:#753E0B;}

#CurrentUserInfo div {float:left;cursor:pointer;text-align:center;height:50px;width:50px;margin: -4px auto 1px;border-radius:120px;box-shadow:0px 1px 6px -2px rgb(152, 152, 152); background:#ffffff;}
#CurrentUserInfo div a {margin:0;}
#CurrentUserInfo div a img {float:none;border-radius:120px;margin:0;}
#CurrentUserInfo p {float:left;margin:0 0 0 1em;}
}

@media (-webkit-min-device-pixel-ratio:1.5), (min-resolution: 144dpi) {
/* Styles */
#Top_Menu-contact {display:block;float:left;width:20%;margin:10px 0 0;}
#Top_Menu-contact p {float:left;width:30%;margin:0;font-size:0.8em;color:#263271;font-weight:bold;}
#Top_Menu-contact em {float:left;width:60%;margin:0;font-size:0.9em;color:#545454;}


#CurrentUserInfoMobile {position:absolute;color:#545454;font-size:0.9em;font-weight:lighter;margin:3px 3% 0px 0px;padding:0px 10px 5px 5px;text-align:right;width:auto;display:none;}
#CurrentUserInfoMobile div {cursor:pointer;text-align:center;height:50px;width:50px;margin: -4px auto 1px;border-radius:120px;box-shadow:0px 1px 6px -2px rgb(152, 152, 152); background:#ffffff;}
#CurrentUserInfoMobile div a {margin:0;}
#CurrentUserInfoMobile div a img {float:none;border-radius:120px;margin:0;}
#CurrentUserInfoMobile p {margin:0;}
#CurrentUserInfoMobile p em {font-weight:bold;color:#753E0B;}

#CurrentUserInfo div {float:left;cursor:pointer;text-align:center;height:50px;width:50px;margin: -4px auto 1px;border-radius:120px;box-shadow:0px 1px 6px -2px rgb(152, 152, 152); background:#ffffff;}
#CurrentUserInfo div a {margin:0;}
#CurrentUserInfo div a img {float:none;border-radius:120px;margin:0;}
#CurrentUserInfo p {float:left;margin:0 0 0 1em;}
}