* {margin: 0; padding: 0; font-size: 100%; border: none; outline: none; font-weight: 300; box-sizing: border-box;
font-family: 'Arial', sans-serif;}
body {background:url(../img/bg_top.jpg)no-repeat;}
a {text-decoration: none;}
ul {list-style: none;}
img {max-width: 100%;}
/*=========== CONTAINER ==========*/
.container {width: 100%; float: left; padding: 3% 5%; text-align: center;}
.container-header {width: 100%; float: left; padding: 1% 5%; text-align: center;}
.container-one {width: 100%; float: left; padding: 12% 5%; text-align: center;}
.container-event {width: 100%; float: left; padding: 2% 5%; text-align: center;}
.container-footer {width: 100%; float: left; padding: 3% 5%; text-align: center;} 
.container-atendimento {width: 100%; float: left; padding: 3% 5%; text-align: center;}     
/*=========== BG COLORS ==========*/
.bg-gradient {background: linear-gradient(to right,#ce2e3c,#da6709);}
.bg-black {background-color: #130400; }
.bg-white {background-color: #fff;}
.bg-blue-min {background-color: #00AFEF;}
.bg-blue-max {background-color: #0098DA;}

.radius {border-radius: 7px;}

.logo {width: 150px; height: 120px; float: left; background: url(../img/logo.png) center center/150px no-repeat;
font-size: 0;}
.btn-menu {width: 56px; height: 56px; float: right; text-align: center; color: #555555;  cursor: pointer; background-color: rgba(0,0,0,0.0); margin:8% 5% 0 0;}

.menu-right {display: none;}
.menu-left {display: none;}
.menu-mobile {display:none; width: 100%; height: 100%; position: fixed; background-color: rgba(0,0,0,0.9); top: 0; left: 0;}
.btn-close {font-size: 1.5em; color: #fff; float: right; cursor: pointer; margin: 2% 3% 0 0;}
.menu-mobile ul {width: 100%; float: left; text-align: center;}
.menu-mobile li {padding: 1.5%;}
.menu-mobile li a {font-size: 2em; color: #FFF; padding: 1% 1%;}
.menu-mobile li a:hover {border:1px solid #0098DA;}

.title {width: 100%;}
.title h2{font-size: 2.5em; color: #555555; font-weight: 700;}
.title h3{font-size: 1.5em; color: #555555;}
.buttons {width: 100%; margin-top: 2%;}
.buttons i{float: right;}
.btn {width: 100%; font-size: 1.5em; text-align:left; cursor: pointer; padding: 5%;}
.btn-cadastrar { color: #fff;}
.btn-sobre {color:#fff ; margin-top: 2%;}

.servico {width: 100%;  text-align: left;  margin-bottom: 3%;}
.servico img {border-radius: 7px 7px 0 0;}
.inner {padding: 7%;}
.inner a {font-size: 1.5em; color: #130400; font-weight: 700; }
.inner h4 {font-size: 1.2em; color: #130400; margin-top: 2%; }
.inner p {margin-top: 6%; color: #130400; line-height: 1.5em;}

.eventos {width: 100%;  text-align: left;  margin-bottom: 2%;}
.eventos img {border-radius: 7px;}
.inner-event {padding: 7%;}
.inner-event a{font-size: 1.5em; color: #130400; font-weight: 700;}
.inner-event h4{font-size: 1.2em; color: #130400; margin-top: 2%;}
.inner-event p{margin-top: 6%; color: #130400; line-height: 1.5em;}

.event-title {width: 100%; float: left; padding: 3% 2% 1% 2%; text-align: center;}  
.event-title h1{font-size: 2.0em; color: #fff; font-weight: 700; text-align: left; margin-bottom: 0%;}    
.event-title h2{font-size: 1.4em; color: #fff; font-weight: 500; text-align: left; margin-bottom: 0%;padding-top: 1%;}    
.event-noticia{width: 100%; float: left; padding: 3% 15% 1% 15%; text-align: center;}  
.event-noticia h1{font-size: 2.5em; color: #000; font-weight: 700; text-align: left; margin-bottom: 0%;}   

.newsletter h1{font-size: 1.5em; color: #fff; font-weight: 700;}
.newsletter h2{font-size: 1.5em; color: #fff; font-weight: 700;}
.newsletter h3{color: #fff;}
.newsletter h4{font-size: 1.5em; color: #fff; font-weight: 700;}

.social-icons a{font-size: 1.5em; color: rgba(255,255,255,0.9); margin-right: 3%;}
.social-icons a:last-child {margin-right: 0;}
.social-icons a:hover {color: rgb(255,255,255);}
.copyright {color: rgba(255, 255, 255, 0.9); margin-top:2%;}
.copyright a{font-size: 1.2em; color: #fff; font-weight: 700;}

@media screen and (min-width: 480px) {
.logo {width: 280px;  height: 100px;background: url(../img/logo.png) center center/280px no-repeat;}
.btn {font-size: 2em;}  
}


@media screen and (min-width: 768px) {
    
.container {width: 100%; float: left; padding: 3% 4%; text-align: center;}
.container-header {width: 100%; float: left; padding: 1% 15%; text-align: center;}
.container-one {width: 100%; float: left; padding: 12% 15%; text-align: center;}
.container-atendimento {width: 100%; float: left; padding: 3% 15%; text-align: center;}   

.container-event {width: 100%; float: left; padding: 2% 15%; text-align: center;}
.container-footer {width: 100%; float: left; padding: 3% 15%; text-align: center;}        
.container-atendimento {width: 100%; float: left; padding: 3% 15%; text-align: center;}     
    
.servico {width: 49%; float: left; margin-right: 2%;}
.servico:nth-child(2){margin-right: 0;}
    
.eventos {width: 49%; float: left; margin-right: 2%;}
.eventos:nth-child(2){margin-right: 0;}
    
.event-title { width: 100%; float: left; padding: 3% 15% 1% 15%; text-align: center; }  
.event-title h1 {font-size: 2.5em; color: #fff; font-weight: 700; text-align: left; margin-bottom: 0%;}    
.event-title h2 {font-size: 1.4em; color: #fff; font-weight: 500; text-align: left; margin-bottom: 0%;padding-top: 1%;}    
  
.event-noticia{ width: 100%; float: left; padding: 3% 15% 1% 15%; text-align: center; }  
.event-noticia h1 {font-size: 2.5em; color: #000; font-weight: 700; text-align: left; margin-bottom: 0%;}       

.newsletter h1 {font-size: 2.8em;}    
.newsletter h2 {font-size: 2.5em;}
.newsletter h3 {font-size: 1.5em;}
.newsletter h4 {font-size: 1.5em;}
}


@media screen and (min-width: 960px) {
.title {width: 70%; float: left; text-align: left;}
.title h2 {font-size: 3em;}
.title h3 {font-size: 2em;}
.buttons {width: 30%; float: right; margin-top: 0; }
.servico {width: 32%; }
.servico:nth-child(2){margin-right: 2%;}
.servico:nth-child(3){margin-right: 0;}
    
.eventos {width: 32%; }
.eventos:nth-child(2){margin-right: 2%;}
.eventos:nth-child(3){margin-right: 0;}   
    
}
/* LARGE DEVICES - WIDE SCREENS*/
@media screen and (min-width: 1280px) {
.container-header {width: 100%; float: left; padding: 0% 15%; text-align: center;}    
.container-one {width: 100%; float: left; padding: 6% 15%; text-align: center;}  
.container {width: 100%; float: left; padding: 2% 15%; text-align: center;}
.container-event {width: 100%; float: left; padding: 2% 15%; text-align: center;}
.container-footer {width: 100%; float: left; padding: 3% 15%; text-align: center;}        
 .container-atendimento {width: 100%; float: left; padding: 3% 15%; text-align: center;}      
    
    .menu-mobile {display: none;}
.btn-menu {display: none;}
.btn-close {display: none;}
.menu-right {width: auto; height: 56px; line-height: 56px; float: right; 
display: block !important; position: static;}
.menu-right li {padding: 0; float: left;}
.menu-right li a {color:#130400; font-size: 1em; padding: 15px; }
.menu-right li a:hover {border: none; color:#da6709; }
    
 .menu-left {width: auto; height: 56px; line-height: 56px; float: right; 
display: block !important; position: static;}
.menu-left li {padding: 0; float: left;}
.menu-left li a {color:#130400; font-size: 1em; padding: 15px; }
.menu-left li a:hover {border: none; color:#da6709; }   
    
}

@media screen and (min-width: 1480px) {
.container-header {width: 100%; float: left; padding: 0% 15%; text-align: center;}    
.container-one {width: 100%; float: left; padding: 6% 15%; text-align: center;}  
.container {width: 100%; float: left; padding: 2% 15%; text-align: center;}
.container-event {width: 100%; float: left; padding: 2% 15%; text-align: center;}
.container-footer {width: 100%; float: left; padding: 3% 15%; text-align: center;}    
 .container-atendimento {width: 100%; float: left; padding: 3% 15%; text-align: center;}      

.logo {width: 40%;  height: 240px;background: url(../img/logo.png) center center/300px no-repeat; text-align: center;}
.menu-mobile {display: none;}
.btn-menu {display: none;}
.btn-close {display: none;}
    
.menu-left {width: 30%; height: 56px; line-height: 60px; float: left; 
display: block !important; position: static; margin-top: 8%; text-align: center;}
.menu-left li {padding: 0; float: left;}
.menu-left li a {color:#130400; font-size: 1.2em; padding: 15px; }
.menu-left li a:hover {border: none; color:#0098DA; }    
    
.menu-right {width: 30%; height: 56px; line-height: 60px; float: right; 
display: block !important; position: static; margin-top: 8%; text-align: center;}
.menu-right li {padding: 0; float: left;}
.menu-right li a {color:#130400; font-size: 1.2em; padding: 20px; }
.menu-right li a:hover {border: none; color:#0098DA; }

.newsletter h1 {font-size: 1.5em; color: #fff; font-weight: 700;}
.newsletter h2 {font-size: 1.5em; color: #fff; font-weight: 700;}
.newsletter h3 {color: #fff;}
.newsletter h4 {font-size: 1.5em; color: #fff; font-weight: 700;}

.social-icons a {font-size: 1.5em; color: rgba(255,255,255,0.9); margin-right: 3%;}
.social-icons a:last-child {margin-right: 0;}
.social-icons a:hover {color: rgb(255,255,255);}
.copyright {color: rgba(255, 255, 255, 0.9); margin-top:2%;}
.copyright a {font-size: 1.2em; color: #fff; font-weight: 700; }
       
}