/* Cucco Business  -  Menu responsivo 
    24/03/2017
    ver na url: https://tableless.com.br/header-responsivo-somente-com-css/
Formatei o “label .control-nav” para ser o botão responsivo, o “label .control-nav-close” para ser a cortina bloqueando o fundo e o ‘nav’ para ficar fixo e redimensionável.
Agora o pulo do gato
Utilizando seletores do CSS3 que são os ‘:checked’ e ‘~’, conseguimos formatar elementos de acordo com a necessidade, veja a documentação.https://www.w3.org/TR/css3-selectors/#selectors
Sendo mais claro, com o seletor ‘~’ você consegue selecionar elemento do mesmo pai declarado depois dele.
Ao marcar o input, no css usando o transform vamos exibir suavemente o menu, 
*/
/* 
    Created on : 22/05/2017, 08:48:19
    Author     : AtoCarlos
*/

div.holderBusiness {
	background: #f2f2f2;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	padding: 10px 10px 20px 10px;        /*10px 20px 20px top right bottom left*/
    max-width: 1024px;
}
div.clBusiness {                /* dentro da .holderBusiness*/
    max-width: 1024px;
}

div.divContentAdm {             /* opção: Administração */
    max-width: 940px;                 /*920px; dentro da .clBusiness */
}

div.divContentInfoCal {         /*opçoes: Informaçoes e Agendamentos*/
    width: 100%;                 /*920px; dentro da .clBusiness */
}

div.divContentMo {              /* AccordionContainer para Informações ou Agendamento*/
    width: 100%;                 /*920px; dentro da .clBusiness */
    border: dotted 2px red;
}

div.wrapperAccordion {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-left: solid 4px black;
    border-bottom: solid 4px black;
    color: red;
    width: 260px;
    height: 180px;
    margin: 10px;
}

/* menu list horizontal */
ul.businessLista, ul.businessLista li { 
    float: left; 
    position: relative; 
    width: auto;
}

div.businessNav {
    	height: 28px;
	margin-top: -32px;
	float: right;
}

div.businessMenu {
    	height: 28px;
	margin-top: 10px;
}
div.businessItem{
    float: left;
    padding: 5px;
    margin-right: 5px;
}
a.businessLink{
    font-size: 1.0em;
    font-style: italic;
    color: black;
}
div.businessItem a.businessLink:hover {
	background: #E0E0E0;
        color: #F79C33;
}
div.businessItem a.active {    /* cor de fundo  degrade */
	background: black;         /*#70B5D3; azul*/
	color: #FFF;
	text-decoration: none!important;
    font-weight: bolder;
    padding: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

div.businessNav ul li {
	float: left;
	list-style-type: none;
	margin-right: 5px;
}

ul.businessLista li a {
	text-decoration: none;
	font-size: 1.0em;
	font-weight: bold;
	color: #6d6d6d;
	display: block;
	padding: 6px 15px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
        
}
input#bus-nav {                                          /* 24/03/2017*/
  visibility: hidden;
  position: absolute;
  left: -9999px;
  opacity: 0;
}

ul.businessLista li a:hover {
	background: #E0E0E0;
        color: #F79C33;
}

@keyframes blinking {
  from,
  49.9% {opacity: 1;}
  50%,
  to {opacity: 0;}
}

@-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; } 
}

@-webkit-keyframes blinker { 
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; } 
} 

@keyframes blinker { 
    0% { opacity: 1.0; } 
    50% { opacity: 0.3; } 
    100% { opacity: 1.0; } 
}

ul.businessLista li a.active {    /* cor de fundo  degrade */
	color: #FFF;
	background: -moz-linear-gradient(top, #3B4256 0%, #505a75 24%, #505a75 71%, #3B4256 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3B4256), color-stop(24%,#505a75), color-stop(71%,#505a75), color-stop(100%,#3B4256)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #3B4256 0%,#505a75 24%,#505a75 71%,#3B4256 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #3B4256 0%,#505a75 24%,#505a75 71%,#3B4256 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #3B4256 0%,#505a75 24%,#505a75 71%,#3B4256 100%); /* IE10+ */
	background: linear-gradient(top, #3B4256 0%,#505a75 24%,#505a75 71%,#3B4256 100%); /* W3C must be last */	
}
fieldset.boxTooltip {
    background:    #E6EFC2; 
    border:        solid 1px #DDDDDD;
    border-radius: 15px; 
    -webkit-border-radius: 15px; 
    -moz-border-radius:    15px; 
    color:       #000;
    font-family: 'Courier new',Arial, sans-serif;
    font-size:   0.8em;                      
    margin-left: 30px; 
    padding:     5px;
}
fieldset.boxGreen {
    border: 1px solid #CCC;
	           padding: 10px;
	         background: #E6EFC2;
	  -moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	       border-radius: 5px;
	         margin-top: 10px;
	     margin-bottom: 10px;
            overflow: scroll;
}
fieldset.boxRoxaClaro {
	         background: #fee;
}
fieldset.boxFormat {
    border: 1px solid #CCC;
	           padding: 10px;
	  -moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	       border-radius: 5px;
	         margin-top: 10px;
	     margin-bottom: 10px;
            overflow: scroll;
}
/* ----------------------------------------------------------------------------------------------------*/ 
/* Colocar comentários(tooltip) no Header.html bottom de Login)*/
div.clTooltip {
  position: relative;
  display: inline-block;
}

span.clTooltipText {
  visibility: hidden;
  width: 240px;
  background-color: greenyellow;
  border: solid 1px black;
  color: #000;
  text-align: center;
  font-size: 0.9em;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
  border-radius: 25px;
  padding: 5px 0;
  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 1s;


  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 120%;                     /* bottom tooltip - comentário fica abaixo do campo*/
  left: 50%;
  margin-left: -210px;      /* Use half of the width (240/2 = 120), to center the tooltip */
}
div.clTooltip:hover .clTooltipText {
      opacity: 1;
    visibility: visible;
}


    /* definiçao da Arrow */
div.clTooltip .clTooltipText::after {                  /*bottom Tooltip with top Arrow*/
  content: "";
  position: absolute;
  bottom: 100%;                    /* bottom: 100% will place the arrow at the top of the tooltip */
  left: 85%;                    /* left: 50% will center the arrow no comentário.*/
  border-style: solid;
  margin-left: -10px;           /* border-width specifies size of the arrow. If you change this, also change the margin-left value to the same. This will keep the arrow centered.*/
  border-width: 10px;
  border-color: transparent transparent greenyellow transparent;
/*The 'border-color' can have from one to four values, and the values are set on the different sides as for 'border-width'.*/
                            /*The border-color is used to transform the content into an arrow. We set the top border to black, and the rest to transparent. If all sides were black, you would end up with a black square box.*/
}

/* ----------------------------------------------------------------------------------------------------*/ 
/* Colocar comentários(tooltip) na navegaçao do business.html: Informações  Agendamento Administracao )*/
ul.businessLista li.clTooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

ul.businessLista li.clTooltip .clTooltipText {
  visibility: hidden;
  width: 240px;
  background-color: greenyellow;
  border: solid 0.5px black;
  color: #000;
  text-align: center;
  font-size: 0.8em;
	-moz-border-radius: 35px;
	-webkit-border-radius: 35px;
  border-radius: 35px;
  padding: 5px 0;
  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 1s;


  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 120%;                     /*bottom:  tooltip  fica acima do campo*/
  left: 50%;
  margin-left: -169px;      /* Use half of the width (240/2 = 120), to center the tooltip */
}
    /* definiçao da Arrow */
ul.businessLista li.clTooltip .clTooltipText:after {                  /*Top Tooltip with Bottom Arrow*/
  content: "";
  position: absolute;
  top: 100%;                    /* top: 100% will place the arrow at the bottom of the tooltip */
  left: 50%;                    /* left: 50% will center the arrow.*/
  border-style: solid;
  margin-left: -10px;           /* border-width specifies size of the arrow. If you change this, also change the margin-left value to the same. This will keep the arrow centered.*/
  border-width: 10px;
  border-color: black transparent transparent transparent;
/*The 'border-color' can have from one to four values, and the values are set on the different sides as for 'border-width'.*/
                            /*The border-color is used to transform the content into an arrow. We set the top border to black, and the rest to transparent. If all sides were black, you would end up with a black square box.*/
}
ul.businessLista li.clTooltip:hover .clTooltipText {
      opacity: 1;
    visibility: visible;
}
ul.businessLista li.clTooltip span.clTooltipText:hover {
    visibility: hidden;
}
img.imgIconInfo{
     width: 16px;
    height: 16px;

}
/* ----------------------------------------------------------------------------------------------------*/ 
/* Colocar comentários(tooltip) no slot de agendamento - conteudo: detalhes do agendamento)*/

.appointTooltipText {
  visibility: hidden;
  width: 240px;
  background-color: greenyellow;
  border: solid 1px black;
  color: #000;
  font-size: 0.9em;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
  border-radius: 25px;
  padding: 5px 0;
  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 1s;


  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 120%;                     /* bottom tooltip - comentário fica abaixo do campo*/
  left: 50%;
  margin-left: -120px;      /* Use half of the width (240/2 = 120), to center the tooltip */
}
div.clTooltip:hover .appointTooltipText {
      opacity: 1;
    visibility: visible;
    z-index: 99;
    padding: 5px;
}


    /* definiçao da Arrow */
div.clTooltip .appointTooltipText::after {                  /*bottom Tooltip with top Arrow*/
  content: "";
  position: absolute;
  bottom: 100%;                    /* bottom: 100% will place the arrow at the top of the tooltip */
  left: 50%;                    /* left: 50% will center the arrow no comentário.*/
  border-style: solid;
  margin-left: -10px;          
  border-width: 10px;    /* border-width specifies size of the arrow. If you change this, also change the margin-left value to the same. This will keep the arrow centered.*/
  border-color: transparent transparent greenyellow transparent;
/*The 'border-color' can have from one to four values, and the values are set on the different sides as for 'border-width'.*/
                            /*The border-color is used to transform the content into an arrow. We set the top border to black, and the rest to transparent. If all sides were black, you would end up with a black square box.*/
}
/* Final... - conteudo: detalhes do agendamento)*/
/* ----------------------------------------------------------------------------------------------------*/ 


@media screen and (max-width: 767px) {
    a.businessLink{
        font-size: 0.9em;
    }
    ul.businessLista li.clTooltip .clTooltipText {
        height: 90px;
        width: 180px;
        /* Position the tooltip */
        top: 100%;                          /* top: tooltip fica abaixo do campo*/
        margin-left: -90px;                 /* Use half of the width (180/2 = 90), to center the tooltip */
    }    
        /*component da Arrow - seta*/
    ul.businessLista li.clTooltip .clTooltipText:after {                  /*bottom Tooltip with top Arrow*/
        bottom: 100%;                    /* bottom: 100% will place the arrow at the top of the tooltip */
        border-color: transparent transparent transparent transparent;
    }
    div.clTooltip .clTooltipText {
        margin-left: -216px;
    }
    div.busHeader h1{
        font-size: 1.0em;
    }  

    div.busHeader h2{
        font-size: 0.8em;
    }  
    
    div.businessImage {
        width: calc(100% - 20px);
    }
    div.businessNav nav {
    position: fixed;
    top: 0px;
    right: 0;
    bottom: 0;
    width: 200px;
    border-left: 1px solid #ccc;
    background: #fff;
    overflow-x: auto;
    z-index: 2;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    -moz-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
div.businessNav ul.businessLista {
    padding: 0;
  }

  div.businessNav ul.businessLista li {
    width: 100%;
    border: solid #ccc;
    border-width: 0 0 1px;
  }

  div.businessNav li a {            /* mostra menu descriptivo apos click nos 3 traços*/
        padding: 15px 10px;
	text-decoration: none;
	font-size: 1.0em;
        font-weight: normal;
	color: #6d6d6d;
    
  }

  div.businessNav li a:hover {
    background-color: #ccc;
  }
label.bus-nav {                                     /* label icon  3 traços*/
    position: absolute;
    left: calc(100% - 68px);
    display: block;
    width: 30px;
    padding: 5px 0;
    border: solid black; /*#FFFFFF; 2 traços superior e inferior*/
    border-width: 3px 0;
    z-index: 2;
    cursor: pointer;
  }

  .bus-nav:before {
    content: "";
    display: block;
    height: 3px;
    background: black;  /*#FFFFFF;  traço do meio*/      
  }

  .bus-nav-close {
    position: fixed; /* label layer */
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    z-index: 1;
    background: rgba(0,0,0,0.4);
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    -moz-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
    /*<!--
    Utilizando dos seletores do CSS3 que são os ‘:checked’ e ‘~’, conseguimos formatar elementos de acordo com a necessidade, veja a documentação em:https://www.w3.org/TR/css3-selectors/#selectors.
    -->*/
    /*Selects every <nav> element that are preceded by a <input#bus-nav:checked> element */
  input#bus-nav:checked ~ nav,
  input#bus-nav:checked ~ .bus-nav-close {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    transform: translate(0, 0);
  }   
}           /* Final @media screen and (max-width: 767px) */

@media screen and (max-width: 520px) {
    div.businessMenu{
        margin-bottom: 15px;
    }
    a.businessLink{
        font-size: 0.8em;
    }
}

@media screen and (max-width: 480px) {
    div.businessImage h1{
        max-width: calc(100% - 40px);
        font-size: 0.7em;
    }
    
    div.businessImage h2{
        max-width: calc(100% - 40px);
    }
}