/*
Theme Name: Cenote-perso
Description: Theme enfant de Benoit cenote
Author: Alexandre Grenier
Author URI: ttps://themegrill.com
Template: cenote
Version: 0.1
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: cenote
*/

/* 0-Basis rules */
.box {
  display: none;
}
/* end basis rules */

/* 1-Small screens rules */
@media screen and (max-width: 479px) {

}
/* --- End of 0 -> 479px --- */

/* 2-Commons rules (>=480px) */
@media screen and (min-width: 480px) {
  /*general box */
    .box--show {
  		display: block;
      transform: scale(0.6);
  	}
    .box:hover {
      transform: scale(1);
    }
    .box{
      bottom: 0;
      position: fixed;
      z-index: 1000;
      -webkit-perspective: 500px; /* Safari 4-8  */
      perspective: 500px;
    }
    .box:before {
      content: "";
      position: fixed;
      width: 100%;
      z-index: 999;
      background-image: url("../../images/desktop-navbar/wood-background1.jpg");
      -webkit-transform-style: preserve-3d; /* Safari 3-8  */
      -webkit-transform: rotateX(45deg); /* Safari 3-8  */
      transform-style: preserve-3d;
      transform: rotateX(45deg);
      box-shadow: 0px 15px 10px rgba(194, 190, 190, 0.9);
      margin-bottom: 25px;
    }
  /* navbar items */
    .desktop-navbar-menu-item1,
    .desktop-navbar-menu-item2,
    .desktop-navbar-menu-item3,
    #phone-img {
      position: relative;
      z-index: 1001;
    }
    #phone-img{
      float: right;
    }
    #homebox {
      display: inline-block;
      position: absolute;
      width: 100%;
      text-align: center;
    }
    #home {
      position: relative;
      margin-top: 0;
      z-index: 1000;
    }
  /* labels */
    /* Tooltip text */
    .tooltip .tooltiptext {
        visibility: hidden;
        width: auto;
        background-color: black;
        color: #fff;
        font-size: 2em;
        text-align: center;
        padding: 5px 10px;
        border-radius: 6px;
        /* Position the tooltip text */
        position: absolute;
        z-index: 1002;
    }
    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext {
        visibility: visible;
    }
    /* mobile nav not display */
    #cenote-sticky-header {
      display: none;
    }
}
/* end commons rules */

@media screen and (min-width: 480px) and (max-width: 959px) {
  /*general box */
    .box{
      height: calc(0.7*120px);
      width: 98%;
      margin-left: 1%;
      margin-right: 1%;
    }
    .box:before {
      height: calc(0.7*120px);
    }
  /* navbar items */
    .desktop-navbar-menu-item1,
    .desktop-navbar-menu-item2,
    .desktop-navbar-menu-item3 {
      height: calc(0.7*200px);
      bottom: calc(0.7*100px) ;
    }
    #phone-img {
      height: calc(0.5*200px);
      bottom: calc(0.5*80px);
    }
    #home {
      height: calc(0.7*150px);
      margin-top: -35px;
      margin-left: 150px;
    }
    .desktop-navbar-menu-item2,
    .desktop-navbar-menu-item3 {
      margin-left: calc(0.7*(-65px));
    }
  /* labels */
    .tooltip .tooltiptext {
        margin-top: calc(0.7*(-150px));
    }
    #desktop-navbar-menu-item1-label {
      margin-left: calc(0.7*(-200px));
    }
    #desktop-navbar-menu-item2-label {
      margin-left: calc(0.7*(-100px));
    }
    #desktop-navbar-menu-item3-label {
      margin-left: calc(0.7*(-120px));
    }
    #home_label {
      margin-left: calc(0.7*(-175px));
      margin-top: calc(0.7*(-150px));
    }
    #contact_label {
      right: 20px;
    }
}
/* --- End of 480 -> 959px --- */

/* common rules >=960*/
@media screen and (min-width: 960px) {
  .box {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
  }
}

@media screen and (min-width: 960px) and (max-width: 1280px) {
  /*general box */
    .box{
      height: 120px;
    }
    .box:before {
      height: 120px;
    }
  /* navbar items */
    .desktop-navbar-menu-item1,
    .desktop-navbar-menu-item2,
    .desktop-navbar-menu-item3 {
      height: 200px;
      bottom: 100px ;
    }
    #phone-img {
      height: 200px;
      bottom: 80px;
    }
    #home {
      height: 150px;
      margin-top: -35px;
    }
    .desktop-navbar-menu-item2,
    .desktop-navbar-menu-item3 {
      margin-left: -65px;
    }
  /* labels */
    .tooltip .tooltiptext {
        margin-top: -150px;
    }
    #desktop-navbar-menu-item1-label {
      margin-left: -200px;
    }
    #desktop-navbar-menu-item2-label {
      margin-left: -100px;
    }
    #desktop-navbar-menu-item3-label {
      margin-left: -120px;
    }
    #home_label {
      margin-left: -175px;
      margin-top: -150px;
    }
    #contact_label {
      right: 20px;
    }
}
/* --- End of 960 -> 1280px --- */

@media screen and (min-width: 1281px) {
  /*general box */
    .box{
      height: 120px;
    }
    .box:before {
      height: 120px;
    }
  /* navbar items */
    .desktop-navbar-menu-item1,
    .desktop-navbar-menu-item2,
    .desktop-navbar-menu-item3 {
      height: 200px;
      bottom: 100px ;
    }
    #phone-img {
      height: 200px;
      bottom: 80px;
    }
    #home {
      height: 150px;
      margin-top: -35px;
    }
    .desktop-navbar-menu-item2,
    .desktop-navbar-menu-item3 {
      margin-left: -65px;
    }
  /* labels */
    .tooltip .tooltiptext {
        margin-top: -150px;
    }
    #desktop-navbar-menu-item1-label {
      margin-left: -200px;
    }
    #desktop-navbar-menu-item2-label {
      margin-left: -100px;
    }
    #desktop-navbar-menu-item3-label {
      margin-left: -120px;
    }
    #home_label {
      margin-left: -175px;
      margin-top: -150px;
    }
    #contact_label {
      position: fixed;
      right: 20px;
    }
}
/* --- End of > 1281px --- */