@charset "utf-8";
/* CSS Document */

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

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

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

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 #213344;
}		

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

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

header{
	position: relative;
	width: 100%;
	height: 440px;/*460*/
	margin: 0px 0 0px;
	float: left;

    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

header img {
	width:  100%;
	height: 440px;

	object-fit: fill;/*contain*/
	object-position: center;
} 
.header{
    width: 100%;
    height: 475px;
    float: left;
    
    color: #FFF;
    font-size: 50px;
    text-shadow: 0 0px 18px #000, 0 0px 3px #000, 0 0px 0px #000;
    
    /** background-image: linear-gradient(rgba(255,10,1,100) 1%, rgba(255,0,0,0) 99%); **/
}
.header-t1{
    /** background-color: rgba(0,0,0,0.5); **/
    margin: 10% 2.5% 0%;

}
.header-t2{
    /** background-color: rgba(0,0,0,0.5); **/
    margin: 0.5% 2.5% 0%;
    font-size: 35px;
    width: 50%;
}

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

.grey{
	background-color: #FBFBFB;
	height: auto;
	width: 100%;
	padding: 2% 10% 1%;
	border-bottom: 10px solid rgb(2, 115, 36);
	text-align: center;
	color: #333;
	margin: 0;
}
.greeen{
	background-color: #213344;/* 00281e */
	height: auto;
	width: 100%;
	padding: 15px 10% 0;
	border-bottom: 10px solid rgb(33, 51, 68);
	text-align: center;
	color: #fff;
	margin: 0 0 25px;
	float: left;
}
.blue{background-color: #384d72}
.darkgrey{background-color: #222222}
.purple{background-color: #320C35}
.txt-desktop{
	display: block;
}	
.txt-mobile{
	display: none;
}

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

.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}


/** *************** TABLET VIEW *************** */
@media only screen and (min-width:500px) and (max-width:770px) {

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: #213344;
	padding: 20px 0;
	border-bottom: 1px solid #111;

	font-family: Roboto, sans-serif;
	font-size: 80%;
	letter-spacing: 0.6;
}

.faixa{height: 80px;}
header{
	background-color: dimgrey;
	width: 100%;
	height: 350px;
	margin: 0;
	padding: 0;
}

header img {
	height: 350PX;
	object-fit: fill;
	object-position: top center;
	margin: 0;
} 
.header-t1{
    /** background-color: rgba(0,0,0,0.5); **/
    margin: 20% 2.5% 0%;

}
.header-t2{
    /** background-color: rgba(0,0,0,0.5); **/
    margin: 0.5% 2.5% 0%;
    font-size: 30px;
    width: 80%;
}
.greeen{
	background-color: #213344;
	height: auto;
	width: 100%;
	padding: 5px 10% 5px;
	margin: 0 0 15px;
}
.blue{background-color: #384d72}
.darkgrey{background-color: #222222}
.purple{background-color: #320C35}
	
.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;
}
.callout {display: none;}
	
}

/** ************* CELLPHONE VIEW ************* */
@media only screen and (min-width:300px) and (max-width:499px) {

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: #213344;
	padding: 20px 0;
	border-bottom: 1px solid #111;

	font-family: Roboto, sans-serif;
	font-size: 80%;
	letter-spacing: 0.6;
}	
.faixa{height: 80px;}
header{
	background-color: gray;
	height: 250px;
	margin-bottom: 00px;
}

header img {
	height: 250PX;
	object-fit: fill;
	object-position: top center;
	margin: 0;
} 
.header-t1{
    /** background-color: rgba(0,0,0,0.5); **/
    margin: 5% 2.5% 0%;
    width: auto;
    font-size: 35px;
    text-align: center
}
.header-t2{
    /** background-color: rgba(0,0,0,0.5); **/
    margin: 0.5% 2.5% 5%;
    font-size: 25px;
    width: 95%;
    text-align: center;
}
.header{
    width: 100%;
    height: auto;
    float: left;
    
    color: #FFF;
    font-size: 50px;
    text-shadow: 0 0px 18px #000, 0 0px 3px #000, 0 0px 0px #000;
    
    /** background-image: linear-gradient(rgba(255,10,1,100) 1%, rgba(255,0,0,0) 99%); **/
}
.greeen{
	background-color: #213344;
	height: auto;
	width: 100%;
	padding: 5px 10% 5px;
	margin: 0 0 15px;
}
.blue{background-color: #384d72}
.darkgrey{background-color: #222222}
.purple{background-color: #320C35}
	

.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;}
	
}