@charset "utf-8";
/*!
 * CSS3
 * FRAMEBASE v1 (http://www.dudacaletti.com.br)
 * Copyright 2014
 * No Licensed
 * Developer: Eduardo Petry Caletti
 * E-mail: contato@dudacaletti.com.br
 */

 
/* ==========================================================================
   //// OBSERVAÇÕES GERAIS
   
   - OBS 1: #000 será a cor padrão para todos os seletores.
   - OBS 2: O posicionamento padrão dos objetos será left.
   - OBS 3: Esse CSS será derivado para templates.
   
   
   //// OBSERVAÇÕES HTML 5 E CSS3
      
   - HEADER: define o cabeçalho.
   
   - NAV: define o menu ou a navegação do site.
   
   - ARTICLE: define uma parte da página que tem uma composição de formulários, 
   textos etc. Por exemplo, pode ser um post de forum, blog, comentários etc.
   
   - SECTION: define uma seção do layout em um determinado element. Ele pode
   conter um header e também um footer se preciso.
   
   - ASIDE: consiste em envolver informações que tem algo a ver com o conteúdo
   principal do site. Pode ser um menu lateral, um sidebar padrão com menu, 
   banner, busca etc.
   
   - FOOTER: define o rodapé do elemento ou do layout.
   ========================================================================== */


/* ==========================================================================
   *
   ========================================================================== */
	*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
/* ==========================================================================
   end *
   ========================================================================== */





   
/* ==========================================================================
   HTML
   ========================================================================== */
	html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
/* ==========================================================================
   end HTML
   ========================================================================== */






/* ==========================================================================
   BODY
   ========================================================================== */
	body { margin: 0; padding: 0; font: Arial; }
	html, body { height:100%; }
/* ==========================================================================
   end BODY
   ========================================================================== */






/* ==========================================================================
   SELETORES
   ========================================================================== */

    h1, h2, h3, h4, h5, h6, p, span { margin: 0; padding: 0; font-weight: normal; }  
   
	/* === CABEÇALHO H1 === */
	h1			{ color: #000; }
	h1.amarelo 	{ color: #FC0; }
	h1.azul		{ color: #09C; }
	h1.branco	{ color: #FFF; }
	h1.laranja	{ color: #F90; }
	h1.roxo		{ color: #936; }
	h1.verde	{ color: #690; }
	h1.vermelho	{ color: #C00; }
	/* === end CABEÇALHO H1 === */


	/* === CABEÇALHO H2 === */
	h2			{ color: #000; }
	h2.amarelo 	{ color: #FC0; }
	h2.azul		{ color: #09C; }
	h2.branco	{ color: #FFF; }
	h2.laranja	{ color: #F90; }
	h2.roxo		{ color: #936; }
	h2.verde	{ color: #690; }
	h2.vermelho	{ color: #C00; }
	/* === end CABEÇALHO H2 === */


	/* === CABEÇALHO H3 === */
	h3			{ color: #000; }
	h3.amarelo 	{ color: #FC0; }
	h3.azul		{ color: #09C; }
	h3.branco	{ color: #FFF; }
	h3.laranja	{ color: #F90; }
	h3.roxo		{ color: #936; }
	h3.verde	{ color: #690; }
	h3.vermelho	{ color: #C00; }
	/* === end CABEÇALHO H3 === */


	/* === CABEÇALHO H4 === */
	h4			{ color: #000; }
	h4.amarelo 	{ color: #FC0; }
	h4.azul		{ color: #09C; }
	h4.branco	{ color: #FFF; }
	h4.laranja	{ color: #F90; }
	h4.roxo		{ color: #936; }
	h4.verde	{ color: #690; }
	h4.vermelho	{ color: #C00; }
	/* === end CABEÇALHO H4 === */


	/* === CABEÇALHO H5 === */
	h5			{ color: #000; }
	h5.amarelo 	{ color: #FC0; }
	h5.azul		{ color: #09C; }
	h5.branco	{ color: #FFF; }
	h5.laranja	{ color: #F90; }
	h5.roxo		{ color: #936; }
	h5.verde	{ color: #690; }
	h5.vermelho	{ color: #C00; }
	/* === end CABEÇALHO H5 === */


	/* === CABEÇALHO H6 === */
	h6			{ color: #000; }
	h6.amarelo 	{ color: #FC0; }
	h6.azul		{ color: #09C; }
	h6.branco	{ color: #FFF; }
	h6.laranja	{ color: #F90; }
	h6.roxo		{ color: #936; }
	h6.verde	{ color: #690; }
	h6.vermelho	{ color: #C00; }
	/* === end CABEÇALHO H6 === */


	/* === SPAN === */
	span		{ color: #000; }
	span.amarelo { color: #FC0; }
	span.azul	{ color: #09C; }
	span.branco	{ color: #FFF; }
	span.laranja{ color: #F90; }
	span.roxo	{ color: #936; }
	span.verde	{ color: #690; }
	span.vermelho{ color: #fff; }
	/* === end SPAN === */


	/* === PARÁGRAFO === */
	p			{ color: #000; }
	p.amarelo 	{ color: #FC0; }
	p.azul		{ color: #09C; }
	p.branco	{ color: #FFF; }
	p.laranja	{ color: #F90; }
	p.roxo		{ color: #936; }
	p.verde		{ color: #690; }
	p.vermelho	{ color: #C00; }
	/* === end PARÁGRAFO === */


	/* === SELETOR DE TIPO === */
	i			{ color: #000; }
	i.amarelo 	{ color: #FC0; }
	i.azul		{ color: #09C; }
	i.branco		{ color: #FFF; }
	i.laranja	{ color: #F90; }
	i.roxo		{ color: #936; }
	i.verde		{ color: #690; }
	i.vermelho	{ color: #C00; }
	/* === end SELETOR DE TIPO === */


	/* === NEGRITO === */
	strong { font-weight: bold; }
	/* === end NEGRITO === */

	/* === MARCADOR === */
	mark { color: #000; background: #ff0; }
	/* === end MARCADOR === */

	/* === SMALL === */
	small { font-size: 80%; }
	/* === end SMALL === */

	/* === HR === */
	hr { color: #ccc; height: 0; -moz-box-sizing: content-box; box-sizing: content-box; }
	/* === end HR === */

	/* === TABLE === */
	table { border-spacing: 0; border-collapse: collapse; }
	/* === end TABLE === */

	/* === DESTACAR TEXTO === */
	blockquote { color: #fff; background-color: #000; padding: 5px; margin: 10px 0 10px 0; } 
	/* === end DESTACAR TEXTO === */

	/* === ADDRESS === */
	address { margin-bottom: 20px; font-style: normal; line-height: 1.42857143; } 
	/* === end ADDRESS === */

	
	.link-extra-footer 	{ color: #ccc; font-family: 'Raleway', sans-serif; font-size: 0.95em; text-decoration: none; transition: all ease 0.5s; }
	.link-extra-footer:hover 	{ color: #fff; }	
	
	
	.link-branco 	{ color: #666; font-family: 'Ubuntu', sans-serif; font-size: 0.95em; text-decoration: none; transition: all ease 0.5s; font-weight: bold; }
	.link-branco:hover 	{ color: #d92128; }		
	
	
	.link-rota { width: 100%; height: auto; position: relative; float: left; margin: 25px 0 0 0; }		
	.link-rota { font-family: 'Ubuntu', sans-serif; font-size: 0.95em; color: #da2128; font-weight: bold; border: 1px solid #da2128; padding: 10px; text-align: center; text-decoration: none; transition: all ease 0.5s; }	
	.link-rota:hover 	{ color: #fff; background-color:#da2128; }		
	
	
	.link-copy { width: 100%; height: auto; position: relative; float: left; margin: 5px 0 10px 0; }		
	.link-copy { font-family: 'Ubuntu', sans-serif; font-size: 0.95em; color: #361e0e; text-decoration: none; transition: all ease 0.5s; }	
	.link-copy:hover 	{ color: #d92128; }		
	
	
	.link-duda { width: 100%; height: auto; position: relative; float: left; margin: 30px 0 0 0; }		
	.link-duda { font-family: 'Ubuntu', sans-serif; font-size: 0.95em; color: #361e0e; text-decoration: none; transition: all ease 0.5s; }	
	.link-duda:hover 	{ color: #d92128; }		
	
	
	.link-magodrive { width: 100%; height: auto; position: relative; float: left; margin: 0 0 40px 0;text-decoration: none; }		
	.link-magodrive h1 { width: 350px; font-family: 'Ubuntu', sans-serif; font-size: 1.1em; color: #ededec; font-weight: bold; text-align: center; text-decoration: none; transition: all ease 0.5s; margin: 0 auto; padding: 15px; border-bottom: 2px solid #d92128; background-color:#d92128; }	
	.link-magodrive h1:hover 	{ border-bottom: 2px solid #361e0e; background-color:#361e0e;text-decoration: none; }		
	
	
	img.titulo-page { height: 130px; margin-bottom: 30px; }
	img.titulo-page1 { height: 150px; margin-bottom: 30px; }

	
	
.accordion__panel a 	{ color: #666; font-family: 'Ubuntu', sans-serif; font-size: 0.95em; text-decoration: none; transition: all ease 0.5s; font-weight: bold; }
.accordion__panel a:hover 	{ color: #d92128; }		
	
	
/* ==========================================================================
   end SELETORES
   ========================================================================== */





   
/* ==========================================================================
   NAV MENU
   ========================================================================== */
   .menu-footer-block ul { margin: 0; padding: 0; font-family: 'Raleway', sans-serif; font-size: 0.95em; text-align: left; font-weight: normal; }
   .menu-footer-block ul li { display: block; width: 50%; float: left; }
   .menu-footer-block ul li a { color: #ccc; text-decoration: none; transition: all ease 0.5s; -webkit-transition: all ease 0.5s;  }
   .menu-footer-block ul li a:hover { color: #fff; text-decoration: none; }
   
   
   .menu-footer-inline ul { margin: 0; padding: 0; font-family: 'Raleway', sans-serif; font-size: 0.95em; text-align: center; font-weight: normal; }
   .menu-footer-inline ul li { display: inline; margin: 0 10px 0 10px; }
   .menu-footer-inline ul li a { color: #ccc; text-decoration: none; transition: all ease 0.5s; -webkit-transition: all ease 0.5s;  }
   .menu-footer-inline ul li a:hover { color: #fff; text-decoration: none; }
   
   
   .bread ul { margin: 0; padding: 0; font-family: 'Oswald', sans-serif;  font-size: 0.95em; text-align: left; font-weight: normal;  }
   .bread ul li { display: inline-block; text-transform: uppercase; }
   .bread ul li a { color: #fff; text-decoration: none; transition: all ease 0.5s; background-color:#000; -webkit-transition: all ease 0.5s; padding: 10px; }
   .bread ul li a:hover { color: #fff; -webkit-transition: all ease 0.5s; background-color:#00FFFF; }
   .bread li.active { color:#fff; background-color:#00FFFF; padding: 10px; }  
/* ==========================================================================
   end NAV MENU
   ========================================================================== */ 
   


   
   

/* ==========================================================================
   IMG
   ========================================================================== */
	img.logosite		{ height: 65px; margin: 0 0 0 0; }	
	img.circle		{ border-radius: 50%; }
	img.padrao		{ margin: 0 0 20px 0; }
	img.flutuante	{ max-width: 100%; margin: 0 20px 20px 0; float: left; }
	img.seta-menu { height: 7px; float: right; margin: 8px 0 0 5px; }
	img.icon-telefone { width: 17px; float: left; margin: 7px 7px 0 0; }
	img.icon-redes-sociais		{ width: 42px; height: 42px; margin: 0 2px 10px 2px; border: 2px solid #e5e4e9; transition: all ease 0.5s; }
	img.icon-redes-sociais:hover	{ border: 2px solid #361e0e; }
	img.back1 { width: 100%; margin: 0 0 -5px 0; }
	img.app { height: 60px; margin: 20px 10px 0 10px; transition: all ease 0.5s; }
	img.people { width: 50px; margin: 40px 0 10px 0; }
	img.mago1 { width: 120px; height: auto; position: absolute; margin-top: -10px; margin-left: -290px; }
	img.mago2 { width: 100px; height: auto; position: absolute; margin-top: -15px; margin-left: 170px; float: right; }
	img.logomagodrive { width: auto; margin: 0 0 10px 0; }
	img.icon-map { height: 20px; position: relative; float: left; }
	img.colorir { width: 16%; border: 3px solid #ededec; padding: 5px; transition: all ease 0.5s; margin: 0; }
	img.colorir:hover { border: 3px solid #d92128; }
	img.icones-secoes { width: 150px; margin: 0 0 10px 0; }
	img.sacola { width: 400px; height: auto; position: absolute; z-index: 1; margin: -40px 0 0 40px; }
	img.barra { width: 100%; margin: 0 0 -5px 0; }
	img.barra1 { width: 100%; margin: -5px 0 0 0; }
	img.backvermelho { width: 100%; margin: 0 0 -5px 0; }
	img.carrinho { height: 20px; position: absolute; margin: 0 0 0 -30px; }
	img.logorh { width: auto; margin-bottom: 25px; }
	img.cartoes { width: auto; }
	img.flutuante-mago { width: 300px; margin: 0 20px 0 0; float: left; }
	img.titulo-page { height: 130px; margin-bottom: 30px; }
	img.titulo-page1 { height: 130px; margin-bottom: 30px; }
	img.titulo-page2 { height: 100px; margin-bottom: 30px; }

	img.yes { width: 50px; margin: 2px 7px 0 0; }
	img.icones { width: 200px; margin: 0 0 10px 0; }
	img.mago { width: 200px; margin: 0 15px 0 0; float: left; }
	img.recorte1 { width: 100%; margin: 0 0 -5px 0;  }
	img.recorte2 { width: 100%; margin: -5px 0 0 0;  }
	img.people1 { width: 35px; float: left; margin: 7px 10px 0 0; }
	img.separador { width: 100px; margin: 10px 0 0 0; }
	img.magodrive { width: 60%; margin: 50px 0 -10px 0; }
	img.bannerapp { width: 100%; }
/* ==========================================================================
   end IMG
   ========================================================================== */







/* ==========================================================================
   FORMULÁRIOS PADRÃO
   ========================================================================== */
   .campocontato2 { width: 100%; padding: 15px; margin: 0 0 5px 0; border: 4px solid #dadad9; background-color:#ededeb; font-size: 0.95em; color:#666; font-family: 'Ubuntu', sans-serif; outline: 0; -webkit-transition: all ease 0.5s; }
   .campocontato2:hover { border: 4px solid #d92128; }
   .campocontato3:hover { border: 4px solid #d92128; }
   .campocontato3 { width: 49.8%; padding: 15px; margin: 0 0 5px 0; border: 4px solid #dadad9; background-color:#ededeb; font-size: 0.95em; color:#666; font-family: 'Ubuntu', sans-serif; outline: 0; -webkit-transition: all ease 0.5s; }
   .botaocontato { width: auto; height: auto; padding: 12px; border: 1px solid #ededeb; background-color:#ededeb; font-size: 0.95em; font-family: 'Ubuntu', sans-serif; outline: 0; color:#361e0e; font-weight: bold; }
   .box-form { width: 100%; height: auto; float: left; position: relative; margin: 5px 0 0 0; text-align: center; }
   .box-form-site { width: 100%; height: auto; float: left; position: relative; margin: 45px 0 0 0; }

   
  	input { color:#666; }
	::-webkit-input-placeholder { color: #666; }
	:-moz-placeholder { color: #666; }
	::-moz-placeholder { color: #666; }
	:-ms-input-placeholder { color: #666; }
	
	
   .camporh1 { width: 100%; padding: 15px; margin: 0 0 5px 0; border: 2px solid #ededec; background-color:#fff; font-size: 0.95em; color:#000; font-family: 'Ubuntu', sans-serif; outline: 0; }
   .camporh2 { width: 49.8%; padding: 15px; margin: 0 0 5px 0; border: 2px solid #ededec; background-color:#fff; font-size: 0.95em; color:#000; font-family: 'Ubuntu', sans-serif; outline: 0; }
   .botaorh { width: auto; height: auto; padding: 12px; border: 1px solid #d92128; background-color:#d92128; font-size: 0.95em; font-family: 'Ubuntu', sans-serif; outline: 0; color:#fff; font-weight: bold; }
   .box-form-botao-rh { width: 100%; height: auto; float: left; position: relative; margin: 15px 0 0 0; text-align: right; }
	
	
  	.camporh1 input { color:#666; }
	.camporh1::-webkit-input-placeholder { color: #666; }
	.camporh1:-moz-placeholder { color: #666; }
	.camporh1::-moz-placeholder { color: #666; }
	.camporh1:-ms-input-placeholder { color: #666; }	
	
	
  	.camporh2 input { color:#666; }
	.camporh2::-webkit-input-placeholder { color: #666; }
	.camporh2:-moz-placeholder { color: #666; }
	.camporh2::-moz-placeholder { color: #666; }
	.camporh2:-ms-input-placeholder { color: #666; }		
	
	
/* ==========================================================================
   end FORMULÁRIOS PADRÃO
   ========================================================================== */







/* ==========================================================================
   DIVS ID e CLASSES ESTRUTURAIS HTML5
   ========================================================================== */
	#main, #top, #header, #menu, #slide, #content, #rodape, #footer, #copyright { width: 100%; height: auto; position: relative; float: left;	}
	#box1, #box2, #box3, #box4, #box5, #box6, #box7, #box8, #box9, #box10, #box11, #box12, #box13, #box14, #box15 { width: 100%; height: auto; position: relative; float: left;	}
	.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10, .box11, .box12, .box13, .box14, .box15 { width: 100%; height: auto; position: relative; float: left;	}
	header, content, footer { width: 100%; height: auto; position: relative; float: left;	}
	
	
	.text-left { text-align: left; }
	.text-right { text-align: right; }
	.text-center { text-align: center; }		
	
	.box1 { margin: 40px 0 0 0; }
	header { z-index: 9999999999; }
	#inicio, #supermago, #atendimento, #namidia, #magodrive, #magodrive-acesso, #nossas-lojas { width: 100%; height: auto; position: relative; float: left; }
	content { padding: 50px 0 100px 0; }
	#supermago { padding: 80px 0 80px 0; background-color:#fff;  }
	#namidia { padding: 80px 0 0 0; z-index: 1; }
	#magodrive { padding: 80px 0 80px 0; background-color:#ededeb; }
	#nossas-lojas { padding: 80px 0 80px 0; background-color:#fff; }
	#atendimento { padding: 80px 0 80px 0; background-color:#ededeb; background:url(../jpg/backcinza.jpg) center top no-repeat; }
	#cabecalho-rh { padding: 80px 0 80px 0; background:url(../jpg/rh.jpg) center top no-repeat;  }
	footer { clear: both; padding: 100px 0 150px 0; background-color:#fff; background:url(../jpg/rodape.jpg) center top no-repeat; }
	.box-mobile { width: 100%; height: 100%; float: left; position: relative; display: none; }
	.box-slider-home { width: 80%; height: auto; position: relative; float: left; text-align: center; top: 50%; transform: translateY(-50%); left: 10%; right: 10%; }
	.box-slider-home h1	{ font-family: 'Ubuntu', sans-serif; font-size: 2.6em; color: #FFF; font-weight: bold; }
	.box-slider-home h2	{ font-family: 'Ubuntu', sans-serif; font-size: 1.1em; color: #FFF; font-weight: bold; border: 2px solid #fff; padding: 10px; border-radius: 10px; }
	.box-slider-home h3	{ font-family: 'Ubuntu', sans-serif; font-size: 1.5em; color: #FFF; font-weight: bold; margin: 20px 0 20px 0; }
	
	
	.mago-galeria { width: 25%; height: auto; float: left; position: relative; margin-bottom: 40px; }	
	.box-mago-responsivo { width: 100%; float: left; overflow: hidden; height: 250px; z-index: 1; }
	.box-mago-responsivo img { width: 100%; clip:rect(550px,550px,550px,550px); min-height: 250px; transition: all ease 0.5s; z-index: 1; }		
	
	.bannerapp { width: 100%; height: auto; position: relative; float: left;	}
	.bannerapp img { width: 100%; }
	
	.box-app { width: 100%; height: auto; position: relative; float: left; margin-top: -100px; z-index: 1;	}
	.box-app img { width: 200px; border-radius: 10px; margin-right: 50px; }
	.box-app h1	{ display: none; }
	
	iframe { margin: 0 auto; }
	
	.box-conteudo-claro { width: 100%; height: auto; position: relative; float: left;	}
	.box-conteudo-claro h1	{ font-family: 'Ubuntu', sans-serif; font-size: 2.2em; color: #da2128; font-weight: bold; }
	.box-conteudo-claro h2	{ font-family: 'Ubuntu', sans-serif; font-size: 1.2em; color: #361e0e; font-weight: bold; }
	.box-conteudo-claro h3	{ font-family: 'Ubuntu', sans-serif; font-size: 1.2em; color: #da2128; font-weight: bold; margin: 0 0 10px 0; }
	.box-conteudo-claro h4	{ font-family: 'Ubuntu', sans-serif; font-size: 1.5em; color: #231f20; }
	.box-conteudo-claro h5	{ font-family: 'Ubuntu', sans-serif; font-size: 1.4em; color: #231f20; }
	.box-conteudo-claro h6	{ font-family: 'Ubuntu', sans-serif; font-size: 1.1em; color: #d92128; text-align: center; margin: 40px 0 -10px 0; font-weight: bold; }
	.box-conteudo-claro p	{ font-family: 'Ubuntu', sans-serif; font-size: 0.95em; color: #666; line-height: 23px; }		
	
	
	.box-conteudo-amarelo       { width: 100%; height: auto; position: relative; float: left;	}
	.box-conteudo-amarelo h1	{ font-family: 'Ubuntu', sans-serif; font-size: 2.2em; color: #da2128; font-weight: bold; }
	.box-conteudo-amarelo h2	{ font-family: 'Ubuntu', sans-serif; font-size: 1.2em; color: #361e0e; font-weight: bold; }
	.box-conteudo-amarelo h3	{ font-family: 'Ubuntu', sans-serif; font-size: 1.1em; color: #231f20; font-weight: bold; margin-bottom: 10px; }
	.box-conteudo-amarelo h4	{ font-family: 'Ubuntu', sans-serif; font-size: 0.9em; color: #da2128; }
	.box-conteudo-amarelo h5	{ font-family: 'Ubuntu', sans-serif; font-size: 1.4em; color: #231f20; }
	.box-conteudo-amarelo h6	{ font-family: 'Ubuntu', sans-serif; font-size: 1.3em; color: #231f20; }
	.box-conteudo-amarelo p	{ font-family: 'Ubuntu', sans-serif; font-size: 0.95em; color: #231f20; line-height: 23px; }
	.box-conteudo-amarelo img { height: 150px; margin-bottom: 10px; }
	
	
	.box-conteudo-escuro       { width: 100%; height: auto; position: relative; float: left;	}
	.box-conteudo-escuro h1	{ font-family: 'Ubuntu', sans-serif; font-size: 2.2em; color: #c72024; font-weight: bold; }
	.box-conteudo-escuro h2	{ font-family: 'Ubuntu', sans-serif; font-size: 1.2em; color: #361e0e; font-weight: bold; }
	.box-conteudo-escuro h3	{ font-family: 'Ubuntu', sans-serif; font-size: 1.1em; color: #c72024; font-weight: bold; margin-bottom: 10px; }
	.box-conteudo-escuro h4	{ font-family: 'Ubuntu', sans-serif; font-size: 0.95em; color: #666; }
	.box-conteudo-escuro h5	{ font-family: 'Ubuntu', sans-serif; font-size: 1.4em; color: #666; }
	.box-conteudo-escuro h6	{ font-family: 'Ubuntu', sans-serif; font-size: 1.3em; color: #666; }
	.box-conteudo-escuro p	{ font-family: 'Ubuntu', sans-serif; font-size: 0.95em; color: #666; line-height: 23px; }
	.box-conteudo-escuro img.icone { height: 150px; margin-bottom: 10px; }

	.box-facaparte       { width: 100%; height: auto; position: relative; float: left;	}
	.box-facaparte h1	{ font-family: 'Ubuntu', sans-serif; font-size: 1.5em; color: #fff; font-weight: bold; }
	
	.box-conteudo-escuro1       { width: 100%; height: auto; position: relative; float: left;	}
	.box-conteudo-escuro1 h3	{ font-family: 'Ubuntu', sans-serif; font-size: 1.1em; color: #000; font-weight: bold; margin-bottom: 10px; }
	.box-conteudo-escuro1 h4	{ font-family: 'Ubuntu', sans-serif; font-size: 0.95em; color: #c72024; }
	.box-conteudo-escuro1 img.icone { height: 150px; margin-bottom: 10px; }	
	
	
	.box-footer         { width: 100%; height: auto; position: relative; float: left;	}
	.box-footer h1	{ font-family: 'Ubuntu', sans-serif; font-size: 1.1em; color: #361e0e; margin: 0 0 5px 0; font-weight: bold; }
	.box-footer p	{ font-family: 'Ubuntu', sans-serif; font-size: 0.95em; color: #361e0e; line-height: 23px; }

	
	.box-resposta         { width: 100%; height: auto; position: relative; float: left;	margin: 30px 0 0 0; }
	.box-resposta h4	{ font-family: 'Ubuntu', sans-serif; font-size: 0.95em; color: #361e0e; font-weight: bold; border-top: 1px solid #361e0e; padding: 15px; }
	
.box-accordion-padding { width: 100%; height: auto; position: relative; float: left; }
.box-accordion-padding p	{ font-family: 'Ubuntu', sans-serif; font-size: 0.95em; color: #666; line-height: 22px;  }	
.box-accordion-padding  ul { margin: 0; padding: 0; font-family: Avenir-Next; font-size: 0.95em; text-align: left; color:#666; font-weight: normal; margin: 20px 0 20px 0; }
.box-accordion-padding  ul li { display: block; }	
	
	.box-conteudo-colorir         { width: 100%; height: auto; position: relative; float: left;	margin: 50px 0 40px 0; text-align: center; }
	.box-conteudo-colorir h1	{ font-family: 'Ubuntu', sans-serif; font-size: 1.5em; color: #d92128; font-weight: bold; margin: 0 0 10px 0; }
	
	
	
	.margin-box { width: 100%; height: auto; position: relative; float: left; margin-bottom: 50px; }
	
	.box-icones         { width: 100%; height: auto; position: relative; float: left; margin: 50px 0 50px 0; padding: 40px 0 40px 0; }	

	.box-mapa         { width: 70%; height: auto; position: relative; float: left; }	
	.box-endereco         { width: 30%; height: auto; position: relative; float: left; padding: 0 20px 0 0; }
	.box-endereco h1	{ font-family: 'Ubuntu', sans-serif; font-size: 1em; color: #da2128; font-weight: bold; margin: 0 0 5px 0; }	
	.box-endereco h3	{ font-family: 'Ubuntu', sans-serif; font-size: 0.95em; color: #231f20; font-weight: bold; margin: 5px 0 0 0; }
	.box-endereco p	{ font-family: 'Ubuntu', sans-serif; font-size: 0.95em; color: #666; line-height: 23px; text-align: justify; }
	
	
	.box-principios { width: 100%; height: auto; position: relative; float: left; border-top: 5px solid #ededec; padding: 20px 0 20px 0; }
	.box-principios h1	{ font-family: 'Ubuntu', sans-serif; font-size: 0.95em; color: #da2128; font-weight: bold; margin: 0 0 10px 0; }	
	.box-principios p	{ font-family: 'Ubuntu', sans-serif; font-size: 0.95em; color: #666; line-height: 23px; }
	

   .principios ul { margin: 0; padding: 0; font-family: 'Ubuntu', sans-serif; font-size: 0.95em; text-align: left; font-weight: normal; }
   .principios ul li { display: block; float: left; width: 100%; color:#666; line-height: 23px; border-bottom:  }
	span.vermelho { color:#d92128; font-weight: bold; }
	
	
	.box-supermago-responsivo { width: 100%; float: left; overflow: hidden; height: 220px; z-index: 1; margin-bottom: 25px; }
	.box-supermago-responsivo img { width: 100%; clip:rect(550px,550px,550px,550px); min-height: 220px; transition: all ease 0.5s; z-index: 1; }		
	
	
	.box-supermago-inst { width: 25%; float: left; overflow: hidden; height: 220px; z-index: 1; margin-bottom: 40px; padding: 5px; }
	.box-supermago-inst img { width: 100%; clip:rect(550px,550px,550px,550px); min-height: 220px; transition: all ease 0.5s; z-index: 1; }		
	
	
	.box-acesse { width: 100%; height: auto; position: relative; float: left; }
	.box-acesse h1	{ font-family: 'Pacifico', cursive; font-size: 2.8em; color: #fff; line-height:65px; margin: 55px 0 30px 0; }	
	
	
	#box-rh { width: 100%; height: auto; position: relative; float: right; padding: 40px 80px 40px 80px; background-color:#fff; }
	.box-rh { width: 100%; height: auto; position: relative; float: left; margin: 40px 0 0 0; border-top: 5px solid #dadad9; padding: 40px 0 0 0; }
	.box-rh h1	{ font-family: 'Ubuntu', sans-serif; font-size: 1.2em; color: #361e0e; font-weight: bold; transition: all ease 0.5s; margin-bottom: 10px; }
	.box-rh-site { width: 100%; height: auto; position: relative; float: left; }
	.box-rh-site h1	{ font-family: 'Ubuntu', sans-serif; font-size: 2.2em; color: #d92128; margin: 0 0 10px 0; font-weight: bold; text-transform: uppercase; }
	.box-rh-site p	{ font-family: 'Ubuntu', sans-serif; font-size: 0.95em; color: #666; line-height: 23px; }		
	.box-form-rh { width: 100%; height: auto; position: relative; float: left; }
	.box-form-rh h1	{ font-family: 'Ubuntu', sans-serif; font-size: 0.9em; color: #231f20; margin: 25px 0 15px 0; padding: 15px 0 15px 0; font-weight: bold; border-bottom: 5px solid #ededec; }

	
	
	.box-post { width: 100%; height: auto; position: relative; float: left;	}
	.box-post h1	{ font-family: 'Ubuntu', sans-serif; font-size: 1.5em; color: #000; font-weight: bold; margin: 5px 0 10px 0; }
	.box-post h2	{ font-family: 'Ubuntu', sans-serif; font-size: 0.95em; color: #666; font-weight: bold; }
	.box-post h3:hover	{ color: #da2128; font-weight: bold; margin: 0 0 10px 0; }
	
	
	.box-supermago-post { width: 100%; float: left; overflow: hidden; height: 200px; z-index: 1; margin-bottom: 10px; }
	.box-supermago-post img { width: 100%; clip:rect(550px,550px,550px,550px); min-height: 200px; transition: all ease 0.5s; z-index: 1; }		
	
	
/* ==========================================================================
   end DIVS ID e CLASSES ESTRUTURAIS
   ========================================================================== */






/* ==========================================================================
   GRID SYSTEM
   ========================================================================== */
	[class*='col-'] { float: left; padding-right: 20px; }
	[class*='col-']:last-of-type { padding-right: 0px; }
	.grid { width: 100%; max-width: 1250px; min-width: 755px; margin: 0 auto; }
	.grid:after { content: ""; display: table; clear: both; }
	.grid-pad { padding: 0 0 0 20px; }
	.grid-pad > [class*='col-']:last-of-type { padding-right: 20px; }
	.push-right { float: right; }
/* ==========================================================================
   end GRID SYSTEM
   ========================================================================== */






/* ==========================================================================
   CONTENT COLUNAS
   ========================================================================== */
	.col-1-1				{ width: 100%; }
	.col-2-3, .col-8-12		{ width: 66.66%; }
	.col-1-2, .col-6-12		{ width: 50%; }
	.col-1-3, .col-4-12		{ width: 33.33%; }
	.col-1-4, .col-3-12		{ width: 25%; }
	.col-1-5				{ width: 20%; }
	.col-1-6, .col-2-12		{ width: 16.667%; }
	.col-1-7				{ width: 14.28%; }
	.col-1-8				{ width: 12.5%; }
	.col-1-9				{ width: 11.1%; }
	.col-1-10				{ width: 10%; }
	.col-1-11				{ width: 9.09%; }
	.col-1-12				{ width: 8.33%; }
/* ==========================================================================
   end CONTENT COLUNAS
   ========================================================================== */






/* ==========================================================================
   LAYOUT COLUNAS
   ========================================================================== */
	.col-11-12		{ width: 91.66%; }
	.col-10-12		{ width: 83.333%; }
	.col-9-12		{ width: 75%; }
	.col-5-12		{ width: 41.66%; }
	.col-7-12		{ width: 58.33%; }
/* ==========================================================================
   end LAYOUT COLUNAS
   ========================================================================== */


   



   
/* ==========================================================================
   MEDIA QUERIES 767px
   ========================================================================== */
	@media handheld, only screen and (max-width: 767px) {
	.grid { width: 100%; min-width: 0; margin:0; }
	[class*='col-'] { width: auto; float: none; margin: 0; }

	.text-left { text-align: center; }
	.text-right { text-align: center; }
	.text-center { text-align: center; }			
	
	header { padding: 20px 0 20px 0; }
	img.logosite		{ height: 40px; margin: 10px 0 0 0; float: left; position: relative; }		
	.box-slide { display: none; }
	.box-mobile { width: 100%; height: 100%; float: left; position: relative; background:url(../jpg/backrh.jpg) center top no-repeat; display: block; }	
	#magodrive { padding: 70px 0 70px 0; background:none;  background-color:#ededeb; }
	#atendimento { padding: 70px 0 70px 0; background:none;  background-color:#ededeb; }
	img.titulo-page { width: 100%; height: auto; margin-bottom: 30px; }
	img.titulo-page1 { width: 100%; height: auto; margin-bottom: 30px; }	
	img.titulo-page2 { width: 100%; height: auto; margin-bottom: 30px; }	
	img.flutuante-mago { width: 100%; margin: 0 0 20px 0; float: left; }
	.margin-box-mobile { float: left; margin-bottom: 30px; }
	.margin-box { float: left; margin-bottom: 30px; }	
	
	
	
	.box-supermago-inst { width: 50%; float: left; overflow: hidden; height: 120px; z-index: 1; margin-bottom: 5px; padding: 5px; }
	.box-supermago-inst img { width: 100%; clip:rect(550px,550px,550px,550px); min-height: 120px; transition: all ease 0.5s; z-index: 1; }		
	.box-conteudo-colorir { display: none; }
	.cd-top { display: none; }
	.link-magodrive h1 { width: 100%; font-family: 'Ubuntu', sans-serif; font-size: 1.1em; color: #ededec; font-weight: bold; text-align: center; text-decoration: none; transition: all ease 0.5s; margin: 0 auto; padding: 15px; border-bottom: 2px solid #d92128; background-color:#d92128; }	
	.box-icones         { width: 100%; height: auto; position: relative; float: left; background: none; background-color:#f9de5c; margin: 50px 0 50px 0; padding: 40px 0 40px 0; }	
	.box-endereco         { width: 100%; height: auto; position: relative; float: left; padding: 0 0 0 0; margin: 0 0 30px 0; }
	.box-mapa         { width: 100%; height: auto; position: relative; float: left; padding: 0 0 0 0; }
   .campocontato3 { width: 100%; }

   .camporh2 { width: 100%; padding: 15px; margin: 0 0 5px 0; border: 2px solid #ededec; background-color:#fff; font-size: 0.85em; color:#000; font-family: 'Ubuntu', sans-serif; outline: 0; }
   .botaorh { width: 100%; height: auto; padding: 12px; border: 1px solid #d92128; background-color:#d92128; font-size: 0.95em; font-family: 'Ubuntu', sans-serif; outline: 0; color:#fff; font-weight: bold; }
	#box-rh { width: 100%; height: auto; position: relative; float: right; padding: 40px; background-color:#fff; }	
	footer { padding: 70px 0 70px 0; background: none; background-color:#f4f4f4; }
	img.icon-redes-sociais		{ width: 35px; height: 35px; margin: 0 2px 10px 2px; border: 2px solid #f4f4f4; transition: all ease 0.5s; }
	img.icon-redes-sociais:hover	{ border: 2px solid #d92128; }	
	.bannerapp { display: none; }
	#magodrive-acesso { padding: 80px 0 80px 0; background-color:#d92128; }
	img.cartoes { display: none; }
	.box-app { width: 100%; height: auto; position: relative; float: left; margin-top: 0; z-index: 1;	}
	.box-app img { width:40%; border-radius: 10px; margin-right: 0; }	
	.box-app h1	{ font-family: 'Ubuntu', sans-serif; font-size: 1.3em; color: #FFF; margin: 0 0 25px 0; font-weight: bold; text-transform: uppercase; display: block; }	
	
	
	
	
	
	
	#supermago { padding: 70px 0 50px 0; background-color:#fff; }
	#magodrive { padding: 70px 0 70px 0;  background: none; background-color:#ededec; }
	#nossas-lojas { padding: 70px 0 70px 0; background-color:#fff; }
	#atendimento { padding: 70px 0 70px 0; background: none; background-color:#ededec; }
	#magodrive-acesso { padding: 40px 0 40px 0; background: none; background-color:#361e0e; }
	footer { padding: 70px 0 70px 0; background: none; background-color:#f4f4f4; }
	img.mago1 { display: none; }
	img.mago2 { display: none; }
	.box-conteudo-colorir { display: none; }
	#cabecalho-rh { padding: 80px 0 80px 0; background:none; background-color:#361e0e;  }
	
	#inicio { height: 95%; z-index: 1; margin: 5% 0 0 0; }
	
	
	}
/* ==========================================================================
   end MEDIA QUERIES 767px
   ========================================================================== */