.desktop {display: block}
.mobile {display: none}

nav {
	position: fixed;
	width: 100%;
	background-color: rgba(248,248,248, 1) /*rgba(0,0,0,0.8) whitesmoke*/;
	z-index: 1;
	margin: 0 0 0 0;
}  

nav img{
	position: absolute;
	left:10px;
	top:10px;
	z-index: 1;
	/*width: 350px;/*190px 60px*/
}
.logo-desktop{
	display:block;
	width: 300px;
	height: auto;
	padding-top: 3px;
	padding-left: 15px;
}

.logo-mobile{
	display: none;
	width: 190px;
}

nav ul#menu-desktop {
	margin:0;
	padding:0;
	text-align: right;
}

nav ul#menu-desktop li {
	list-style-type:none;
	display: inline;
}

nav ul#menu-desktop li a {
	padding: 20px 40px; /** 30px 40px **/
	text-decoration: none;

	color:#333;
	display: inline-block;
	margin-right: -3px;
	font-family: Roboto, sans-serif;
	font-size: 90%;
	letter-spacing: 0.60;
  	border-bottom: 5px solid transparent;
}

nav ul#menu-desktop li a:hover {
	background-color: transparent;
	color:#333;
  	border-bottom: 5px solid #ffc600;
}		

nav ul#menu-desktop li  a.active {
  border-bottom: 5px solid #ffc600;
}

nav ul#menu-mobile, nav div#menu-btn {
	display: none;
}
.faixa{height: 100px; background-color: whitesmoke}

.z-index{
	z-index: 0;
}

.faixa-caroussel{
	background-color: #7d0b32;/* 00281e */
	height: auto;
	width: 100%;
	padding: 15px 10% 8px;
	border-bottom: 10px solid rgb(238, 232, 170);
	text-align: center;
	color: #fff;
	margin: 0 0 25px;
	float: left;
}

.faixa-divisa{
	background-color: #7d0b32;/* 00281e */
	height: auto;
	width: 100%;
	padding: 15px 10% 8px;
	border-bottom: 10px solid rgb(238, 232, 170);
	text-align: center;
	color: #fff;
	margin: 0px;
	float: left;
}

.txt-desktop{
	display: block;
}	
.txt-mobile{
	display: none;
}

.tel-line{
	display: block;
	
	font-size: 16px;
	text-align: right;
	color: #333;
	padding: 10px 35px 1px;
}

/**************** WHATS APP *****************/
.whats {display: none;}
 
.whats:hover {
	box-shadow: 0 0px 5px 0 #666;
	transform: scale(1.05);
}

/* Callout box - fixed position at the bottom of the page */
.callout {
  position: fixed;
  bottom: 5px;
  right: 10px;
  margin-left: 20px;
  width: 200px;
	height: auto;
  box-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 5px rgba(0, 0, 0, 0.19);
	
  z-index: 3;
  display: block;
}
.callout img{width: 20px;}

/* Callout header */
.callout-header {
  padding: 5px 50px 5px 10px;
  background-color: #000;
  font-size: 18px;
  color: white;
  border-radius: 7px 7px 0 0;
}
.img-popup img{
	width: 100%;
}

/* Callout container/body */
.callout-container {
  padding: 12px;
	padding-bottom: 5px;
  background-color: #fff;
  color: black;
  border-radius: 0px 0px 7px 7px;
  text-align: center;
  line-height: 1;
	height: auto;
}
.callout-container hr{height: 1px; border-radius: 5px; padding-top: 0; margin-top: 8px; margin-bottom: 3px; background-color: dimgrey}
.callout-container img{width: 130px}
/* Close button */
.closebtn {
  position: absolute;
  top: 0px;
  right: 5px;
  color: white;
  font-size: 30px;
  cursor: pointer;
}

/* Change color on mouse-over */
.closebtn:hover {
  color: lightgrey;
}

.callout-header a{color: #fff;}
.callout-header a:hover{color: #FFF; text-decoration: none}


/* ---------------------------------------------------------------- */

/** *************** NOTE VIEW *************** */
@media only screen and (min-width:769px /*568px*/) and (max-width:1024px) {
	nav {
		position: fixed;
		width: 100%;
		background-color: rgba(248,248,248, 1) /*rgba(0,0,0,0.8) whitesmoke*/;
		z-index: 1;
		margin: 0 0 0 0;
	}  
	
	nav img{
		position: absolute;
		left:10px;
		top:10px;
		z-index: 1;
		/*width: 350px;/*190px 60px*/
	}
	.logo-desktop{
		display:block;
		width: 300px;
		height: auto;
		padding-top: 3px;
		padding-left: 15px;
	}
	
	.logo-mobile{
		display: none;
		width: 190px;
	}
	
	nav ul#menu-desktop {
		margin:0;
		padding:0;
		text-align: right;
	}
	
	nav ul#menu-desktop li {
		list-style-type:none;
		display: inline;
	}
	
	nav ul#menu-desktop li a {
		padding: 20px 20px; /** 30px 40px **/
		text-decoration: none;
	
		color:#333;
		display: inline-block;
		margin-right: -3px;
		font-family: Roboto, sans-serif;
		font-size: 90%;
		letter-spacing: 0.60;
		  border-bottom: 5px solid transparent;
	}
	
	nav ul#menu-desktop li a:hover {
		background-color: transparent;
		color:#333;
		  border-bottom: 5px solid #ffc600;
	}		
	
	nav ul#menu-desktop li  a.active {
	  border-bottom: 5px solid #ffc600;
	}
	
	nav ul#menu-mobile, nav div#menu-btn {
		display: none;
	}
}

/* ---------------------------------------------------------------- */

/** *************** TABLET VIEW *************** */
@media only screen and (min-width:500px /*568px*/) and (max-width:770px) {
	.desktop {display: block}
	.mobile {display: none}

	nav {
		position: fixed;
		left: 0; top: 0;
		width: 100%;
		height: 80px;
		background-color: whitesmoke;
	}
	nav img {
		width: 220px;
		left: 5%;
		margin-left: 0px;/*-35*/
	}
	.logo-desktop{
		display:none;
	}
	
	.logo-mobile{
		display: block;
	}
	nav div#menu-btn{
		position: absolute;
		display: block;
		top: 30px;/**/
		right: 20px;
		height: 30px;
		width: 30px;
	
		/*opcional*/
		cursor: pointer;
	}
	nav ul#menu-desktop{
		display: none;
	}
	nav ul#menu-mobile {
		/*display: block;*/
		margin-top: 80px; /*70px*/
		padding: 0;
	}
	nav ul#menu-mobile li {
		display: block;
		width: 100%;
		list-style-type: none;
	}
	nav ul#menu-mobile li a {
		display: block;
		text-decoration: none;
		color: #FFF;
		text-align: center;
		background-color: #e2b13c;
		padding: 20px 0;
		border-bottom: 1px solid #111;
	
		font-family: Roboto, sans-serif;
		font-size: 80%;
		letter-spacing: 0.6;
	}
	
	.faixa{height: 80px;}

	.txt-desktop{
		display: none;
	}	
	.txt-mobile{
		display: block;
	}	
		
	.tel-line{
		display: none;
	}
		
	.whats {
		display: block;
		
		width: 50px;
		height: 50px;
		background-color: mediumseagreen;
		border-radius: 50%;
		box-shadow: 0 0px 5px 0px #666;
		transition: all 0.1s ease-in-out;
	
		font-size: 35px;
		color: white;
		text-align: center;
		padding-top: 0px;
		line-height: 55px;/*70*/
	
		position: fixed;
		right: 10px;
		bottom: 20px;
		
		z-index: 1;
	}
	.callout {display: none;}

}

/* ---------------------------------------------------------------- */
/** ************* CELLPHONE VIEW ************* */
@media only screen and (min-width:300px) and (max-width:499px) {
	.desktop {display: none}
	.mobile {display: block}

	nav {
		position: fixed;/*absolute*/
		left: 0; top: 0;
		width: 100%;
		height: 80px;
		background-color: whitesmoke;
	}
	nav img {
		width: 220px;
		left: 5%;
		margin-left: 0px;/*-35*/
	}
	.logo-desktop{
		display:none;
	}
	
	.logo-mobile{
		display: block;
	}
	nav div#menu-btn{
		position: absolute;
		display: block;
		top: 30px;/**/
		right: 20px;
		height: 30px;
		width: 30px;
	
		/*opcional*/
		cursor: pointer;
	}
	nav ul#menu-desktop{
		display: none;
	}
	nav ul#menu-mobile {
		/*display: block;*/
		margin-top: 80px; /*70px*/
		padding: 0;
	}
	nav ul#menu-mobile li {
		display: block;
		width: 100%;
		list-style-type: none;
	}
	nav ul#menu-mobile li a {
		display: block;
		text-decoration: none;
		color: #FFF;
		text-align: center;
		background-color: #e2b13c;
		padding: 18px 0;
		border-bottom: 1px solid #111;
	
		font-family: Roboto, sans-serif;
		font-size: 16px;
		letter-spacing: 5px;
	}	
	.faixa{height: 80px;}

	.txt-desktop{
		display: none;
	}	
	.txt-mobile{
		display: block;
	}	
	.tel-line{
		display: none;
	}	
		
	.whats {
		display: block;
		
		width: 50px;
		height: 50px;
		background-color: mediumseagreen;
		border-radius: 50%;
		box-shadow: 0 0px 5px 0px #666;
		transition: all 0.1s ease-in-out;
	
		font-size: 30px;
		color: white;
		text-align: center;
		padding-top: 10px;
		line-height: 10px;/*70*/
	
		position: fixed;
		right: 10px;
		bottom: 20px;
		
		z-index: 1;
	}
	.callout {display: none;}


}