/*
Mobile first design: ;

Extra small devices (phones, 600px and down) 
@media only screen and (max-width: 600px) {...}

Small devices (portrait tablets and large phones, 600px and up) 
@media only screen and (min-width: 600px) {...}

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

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

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

/*HEADER*/
#menu {
  width: 100%;
  z-index: 500;
  padding: 20px 0;
  background-color: #84b5b5;
  transition: all 0.3s ease;
}


/*Sticky class added by js script to fix header on top of screen*/
#menu.sticky {
  position: fixed;
  top: 0;
  padding: 10px 0;
}

/*checkbox to toggle sub-menus for phone*/
#menu input[type="checkbox"] {
  display: none;
}

/*main links part*/
#menu #main-menu {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*header that display menu on click for phones*/
#toggle-menu {
  display: block;
  position: relative;
  margin: 10px;
}

/*toggle-menu checkbox, displays menu if toggle-menu checked*/
#tm:checked+#main-menu {
  display: block;
  visibility: visible;
  opacity: 1;
}

#menu li {
  display: block;
  padding-left: 0;
  position: relative;
  float: none;
}

/*main nav links*/
#menu #main-menu .main-link {
  margin: 20px 15px;
}

#toggle-menu,
#menu a,
#appelez {
  color: white;
  border-bottom: 0;
}

/*ul that contains the logo for phones*/
#toggle-menu ul {
  margin: 0;
  padding: 0;
}

#toggle-menu#drop-icon-phone {
  top: 15%;
}

#menu a {
  display: block;
  color: #f2f2f2;
  text-align: center;
  text-decoration: none;
  font-size: 1em;
}

/*logo*/
#menu #nav-logo-phone {
  top: 0;
  width: 106px;
  margin-top: 0px;
}

#menu #nav-logo-laptop {
  display: none;
}

#nav-logo-laptop img {
  width: 100%;
}

/*icon for larger screen*/
#menu ul .drop-icon-laptop {
  display: none;
}

/*flex for laptop*/
#centered-links {
  display: block;
}

/*main links padding. > for only direct children*/
#menu #main-menu .main-link>a {
  padding: 5px 0;
  padding-left: 50px;
  margin-right: 50px;
  /*margin to avoid missclick on the button*/
}

/*display pone number*/
#menu #main-menu #appelez-box {
  width: 100%;
}

#appelez {
  margin: 0 auto;
  padding: 27px 0;
  box-sizing: border-box;
  width: 130px;
  height: 74px;
  text-align: center;
  text-decoration: none;
  border: 1px solid white;
  line-height: 1;
}

/*[Dropdown]*/
#menu .sub-menu {
  display: none;
  margin: 0;
  padding: 0;
  visibility: visible;
  position: static;
  width: 100%;
  background-color: #ddd;
  color: black;
  border-width: 0;
}

#menu .sub-menu li {
  float: none;
  margin: 0;
  background-color: #f9f9f9;
}

/*subnav link padding*/
#menu .sub-menu li a {
  padding: 10px 20px;
  color: rgb(153, 153, 153);
  text-align: left;
}

#menu .sub-menu a {
  text-align: center;
}

#menu .sub-menu a:hover {
  background-color: #ddd;
}

/*responsive icons*/
.drop-icon-phone {
  position: absolute;
  right: 1.5em;
  top: 0;
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  text-align: center;
  background-color: rgba(0, 0, 0, .125);
  text-shadow: 0 0 0 transparent;
  color: rgba(255, 255, 255, .75);
}

/*important : reset effects for larger screens*/
#menu li:hover input[type="checkbox"]:checked+.sub-menu,
#menu input[type="checkbox"]:checked+.sub-menu {
  display: block;
  visibility: visible;
  opacity: 1;
}

/*reset effects for larger screens*/
#menu li:hover .sub-menu {
  box-shadow: none;
  transform: none;
}

/*avoid conflicts between hover  and click for phones*/
#menu li:hover .sub-menu {
  display: none;
}

/*DESKTOP*/
@media all and (min-width: 980px) {
  #menu.sticky {
    padding: 20px 0;
  }

  #menu {
    padding: 30px 0;
  }

  /*important : many selector to override other styles*/
  #menu ul#main-menu.cf {
    display: flex;
    justify-content: space-between;
  }

  /*reset phone responsive*/
  #toggle-menu,
  #menu .drop-icon-phone {
    display: none;
  }

  /*reset phone style*/
  #nav-logo-phone {
    display: none;
  }

  /*display winRAR logo*/
  #menu #nav-logo-laptop {
    display: block;
    margin: 0 2%;
  }

  #nav-logo-laptop img {
    width: 100%;
  }

  /*display drop-icon for laptop*/
  #menu ul .drop-icon-laptop {
    display: inline-block;
  }

  /*effect on link hover*/
  #menu li:hover .drop-icon-laptop {
    transform: rotate(180deg);
  }

  /*phone number box*/
  #menu #main-menu #appelez-box {
    width: auto;
    margin: 0 2%;
  }

  #appelez {
    margin: 0;
  }

  /*set up the main links effect*/
  #menu #main-menu .main-link::after,
  #menu #main-menu .main-link::before {
    margin: 0;
    content: "";
    width: 0;
    height: 2px;
    display: block;
    background-color: white;
    transition-duration: 300ms;
  }

  /* > for only direct children reset phone's margins*/
  #menu #main-menu .main-link>a {
    padding: 5px 0;
    padding-left: 0;
    margin-right: 0;
  }

  /*arrow hover effect*/
  #menu a .drop-icon-laptop {
    transition: transform 0.3s;
  }

  /*link effect on hover*/
  #menu #main-menu .main-link:hover::after,
  #menu #main-menu .main-link:hover::before {
    width: 100%;
  }


  /*reset phones styles*/
  #menu .sub-menu,
  #menu li:hover .sub-menu {
    display: block;
  }

  /*center the main link container*/
  #main-menu #centered-links {
    display: flex;
    width: 75%;
    margin: 0 auto;
    justify-content: space-around;
  }

  /*display sub-menu while main link hover*/
  #menu li:hover .sub-menu {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 16px 0px;
    visibility: visible;
    opacity: 1;
    transform: translateY(20px);
  }

  /*reset phones styles*/
  #menu input[type="checkbox"]:checked+.sub-menu {
    display: none;
  }

  /*SubMenu*/
  #menu .sub-menu {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    top: 15px;
    min-width: 200px;
    z-index: 3000;
    transition-property: transform, visibility, opacity, position;
    transition-delay: 0.2s;
    transition-duration: 0.3s;
  }
}