/*GRIDS*/

html, body{
	font-size: 100%; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    
	
}

body{
	width:100%;
	font-family: Arial, Verdana;
	background:white;
	letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
    text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
    /* IE10 uses display: flexbox */
    display: -ms-flexbox;
    -ms-flex-flow: row wrap;
    overflow-x:hidden;
    background: #F5F5F5;
}

.meio {
	position:relative;
	width:1000px;
	margin-left:auto;
	margin-right:auto;	
	
}

.esquerda{
	position:relative;
	float:left;	
}

.direita{
	position:relative;
	float:right;	
}

.centro{
  text-align:center;
}

div{
	
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
    
    
}


.coluna5{
	width: 17.5%;
    
}

.coluna3 {
    width: 31%;
}


.coluna4 {
    width: 22.5%;
    
}

.coluna2 {
    width: 47.7%;
}


.w40 {
    width: 37.5%;
}


.w60 {
    width: 58%;
}

.w100 {
    width: 100%;
}

.link{
  transition-duration:.3s;
}

.link:hover{
  text-decoration:underline;
}

.fotodiv{
	width:90%;
	margin:5%;
}

.iconmais{
  position: absolute;
  width: 100%;
  height: 100%;
  background:url(https://www.hemoclass.com.br/site/img/iconmais.png);
  background-position: center;
  background-repeat: no-repeat;
  transition-duration:.3s;
  opacity:0;
  top:0;
  z-index:10;
}

.iconmais:hover{
  opacity:.7;
}

.iconmaistexto{
  position: absolute;
    left:0;
    bottom:0;
    margin-bottom:-200px;
    width:100%;
    height:auto;
    color: white;
    text-align: center;
    padding:20px 0px;
    background: #1753CD;
    transition-duration: .3s;
}

.foto:hover .iconmaistexto{
  margin-bottom:0px;
}


/*Títutlo e texto padrão*/

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

.tamanhoh1{
    font-size: 2em;
}

h2 {
    font-size: 1.7em;
    margin: 0.83em 0;
}

.tamanhoh2{
  font-size: 1.7em;
}

h3 {
    font-size: 1.5em;
    margin: 1em 0;
}

h4{
  font-size: 1.33em;
    margin: 1em 0;
}

h5{
  font-size: 1.17em;
    margin: 1em 0;
}

p {
    font-size: 12pt;
    margin: 0.87em 0;
}

b,
strong, .bold {
    font-weight: 700;
}

blockquote {
    margin: 1em 40px;
}

em, .italico{
	font-style:italic;
}


/*Menus Topo base*/


ul.menutopo{
	position:relative;
	top:0px;
  float:right;
	height:57px;
	display: inline-block;
	
}

li.menutopo{
	display: inline-block;
	float:left;
	color:white;
  font-weight: normal;
	font-size:13pt;
	padding: 36px 22px;
	opacity:1;
	transition-duration: 0.3s;
}

li.menutopo:hover{
	background:white;
  color: #333333;
	text-decoration:none;
	transition-duration: 0.3s;
}


ul.menurodape{
  position:relative;
  top:0px;
  height:57px;
  display: inline-block;
  
}

li.menurodape{
  
  display: inline-block;
  float:left;
  color:white;
  font-size:12pt;
  padding: 10px 12px;
  opacity:1;
  transition-duration: 0.3s;
}

li.menurodape:hover{
  
  text-decoration:none;
  transition-duration: 0.3s;
}

/*CSS MENU*/

.cssmenu ul{
  position: absolute;
  width:170px;
  background: #7C1F1A;
  z-index:10;
  margin-top:25px;
  padding:7px 5px;
  margin-left:-59px;
  transition-duration:.3s;
  opacity:0;
  visibility:hidden;
}

.dottedtop{
  border-top:1px solid white;
}

.setlate2{
  margin-left:-24px !important;
}

.cssmenu:hover ul{
  opacity:1;
  visibility:visible;
}

.cssmenu a{
  color:inherit;
}

.pinocimacssmenu{
  position: absolute;
  width:170px;
  height:7px;
  background: url(https://www.hemoclass.com.br/site/img/pinocimacssmenu.png) top center no-repeat;
  top:-7px;
}

.cssmenu ul li {
  position: relative;
  float:left;
  text-align: center;
  color:white;
  width:160px;
  font-weight:bold;
  font-size:10pt;
  padding:5px;
  margin-right:3px;
  transition-duration:.3s;
}

.cssmenu ul li:hover {
  color:white;
  background: #444444;
}

li.submenu ul.sub2{
  position: absolute;
  width:172px;
  background: #FFC62B;
  z-index:10;
  margin-top:-33px;
  margin-left:152px;
  transition-duration:.3s;
  opacity:0;
  visibility:hidden;

}

li.submenu:hover ul.sub2{
  opacity:1;
  visibility:visible;
}

/*base das galerias */ 

.shellfoto100{
    position: relative;
    float:left;
    width:25%;
    height:242px;
    overflow:hidden;
    margin-left:0px;
    margin-bottom:0px;
}

.shellfoto100 .foto{
    width:100%;
    height:242px;
    overflow:hidden;
}


.shellfoto{
    position: relative;
    float:left;
    width:465px;
    height:328px;
    border-radius: 42px;
    border:10px solid white;
    margin-right:20px;
    margin-bottom:10px;
    transition-duration: .3s;
}

.shellfoto .foto{
    width:465px;
    border-radius: 30px;
    height:328px;
    overflow:hidden;
}

.shellfoto .sombra{
  position: absolute;
  width:100%;
  height: 35px;
  top:338px;
  background: url(https://www.hemoclass.com.br/site/img/sombrashellfoto.png) top center no-repeat;
}

.shellfoto:hover{
  border:10px solid #FDDDC0;
}

.foto img{
    width:100%;
}


.shellfotogaleria{
    position: relative;
    float:left;
    width:210px;
    height:147px;
    border:7px solid white;
    border-radius:30px;
    margin-left:21px;
    margin-bottom:25px;
    transition-duration: .3s;
}

.shellfotogaleria:hover{
  border:7px solid #FDDDC0;
}

.shellfotogaleria .foto{
    width:210px;
    height:147px;
    border-radius:23px;
    overflow:hidden;
}

.shellfotogaleria .sombra{
  position: absolute;
  width:100%;
  height: 16px;
  top:154px;
  background: url(https://www.hemoclass.com.br/site/img/sombrashellgaleria.png) top center no-repeat;
}

.shellfotoround{
    position: relative;
    display: inline-block;
    width:256px;
    height: 256px;
    border:15px solid #901913;
    background: white;
    border-radius: 100%;
    margin-right:60px;
    margin-left:60px;
    margin-bottom:20px;
    overflow: hidden;

}

.shellfotoround .foto{
    position: relative;
    float: left;
    width: 256px;
    height: 256px;
    background: #9B1B2B;
    border-radius: 100%;
    overflow: hidden;
}

.shellfotoround img{
  position: relative;
  top:20px;
    width:100%;
    transform: scale(1.5);
    -moz-transform: scale(1.5);
}

.shellvideo{
    position: relative;
    float:left;
    width: 673px;
    height: 390px;
    border: 10px solid #FDDDC0;
    border-radius:40px;
    margin-left:166px;

}

.shellvideo div.iframe{
  position: relative;
  border-radius:30px;
  overflow: hidden;
}

.shellvideo .sombra{
  position: absolute;
  width:100%;
  height: 47px;
  top:400px;
  background: url(https://www.hemoclass.com.br/site/img/sombrashellvideo.png) top center no-repeat;
}

/*base do contato */

input, textarea{
	outline: none;
}

input[type=text].contato,input[type=password].contato, input[type=email].contato{
	padding:10px;
  
	background: white;
  border:1px solid #000000;
  border-radius:12px;
  color:#444444;
	margin-bottom:15px;
}

input.contato{
  position: relative;
  float:left;
  width:448px;
}

input.contato2{
  position: relative;
  float:left;
  width:208px;
 padding:10px;
  background: white;
  border-radius:12px;
  color:#444444;
  border:1px solid #000000;
  
  margin-bottom:15px;
}

textarea.contato{
  position: relative;
  width:448px;
  min-width:448px;
  max-width:448px;
  border:1px solid #000000;
  background: white;
  border-radius:12px;
  color:#444444;
  height:120px;
  min-height:120px;
  max-height:120px;
	padding:10px;
	
}

select.contato2{
  position: relative;
  float:left;
  border-radius:12px;
  color:#5F4234;
  width:229px;
 padding:10px;
  border:1px inset #DADADA;
  margin-bottom:15px;
   -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
     background: url(https://www.hemoclass.com.br/site/'img/bulletselect.png') no-repeat 97% 50% #EBEBEB;
}


input#btenviar {
	width:471px;
	height:41px;
	padding:0px;
	background:#901913;
  border-radius:12px;
	border:0px;
	cursor: pointer;
	color:white;
	font-weight:bold;
  transition-duration:.3s;
  opacity: 1;
}

input#btenviar:hover {
	background:#444444;

	}


::-webkit-input-placeholder {
   color: #5F4234;
}

:-moz-placeholder { /* Firefox 18- */
   color: #5F4234;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #5F4234;  
}

:-ms-input-placeholder {  
   color: #5F4234;  
}

.needsfilled {
	background-color:red !important;
	color:white !important;
}


#map-canvas{
    width: 100%; height: 305px; float: left;
    position: relative;
     
    margin-top:0px;
    margin-bottom:0px;
    border-top:5px solid #444444;
    border-bottom:5px solid #444444;

}

.nomargin{
  margin:0px;
}

/*SETOR DO ORCAMENTO */

.shellorcamento {
    position: relative;
    width: 100%;
    
    min-height: 70px;
    margin: 20px 0px;
}

.shellorcamento input[type=checkbox] {
    position: relative;
    float: left;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 28px;
}

.imgorcamento {
    position: relative;
    float: left;
    width: 94px;
    height: 76px;
    overflow: hidden;
    margin-right: 20px;
}

.imgorcamento img{
  width:100%;
}

.tituloorcamento{
    float: left;
    width: 742px;
}

.divisorconteudo{
  width:100%;
  border-bottom:1px solid #D3D3D3;
}

.shellorcamento input[type=text] {
    position: relative;
    float: right;
    width: 50px;
    margin-right: 20px;
    margin-top: 18px;
    border:1px solid #555555;
    background:white;
    text-align:center;
    padding:0px;
    color:#545454;
}

.botaoexcluirorcamento {
    position: relative;
    float: left;
    width: 247px;
    height: 37px;
    background: url(https://www.hemoclass.com.br/site/img/botaoexcluirorcamento.png) top center no-repeat;
    transition-duration: .3s;
    border: 0px;
    cursor: pointer !important;
}

.botaoexcluirorcamento:hover{
  opacity: .8;
}

.botaoatualizarorcamento {
    position: relative;
    float: right;
    width: 246px;
    height: 37px;
    background: url(https://www.hemoclass.com.br/site/img/botaoatualizarorcamento.png) top center no-repeat;
    transition-duration: .3s;
    border: 0px;
    cursor: pointer !important;
}

.botaoatualizarorcamento:hover{
  opacity: .8;
}

.botaoproximaorcamento {
    position: relative;
    float: left;
    width: 610px;
    height: 44px;
    background: url(https://www.hemoclass.com.br/site/img/botaoproximaorcamento.png) top center no-repeat;
    transition-duration: .3s;
    margin-left: 200px;
}

.botaoproximaorcamento:hover{
  opacity: .8;
}

.contagemorcamento {
    position: relative;
    float: left;
    margin-left: 20px;
    margin-right: 20px;
    margin-top:15px;
    text-align: center;
    width: 50px;
    overflow: hidden;
}

.setorsolicitaorcamento {
    position: relative;
    width: 100%;
    min-height: 300px;
    background: #EBEBEB;
}

input#btenviarorcafinal {
    position: relative;
    width: 291px;
    height: 44px;
    background: url(https://www.hemoclass.com.br/site/img/botaosolicitarorcamento.png) top center no-repeat;
    border: 0px;
    transition-duration: .3s;
    cursor: pointer !important;
}

input#btenviarorcafinal:hover{
  opacity:.8;
}

input.orcafinal {
    position: relative;
    float: left;
    width: 280px;
    height: 21px;
    padding: 5px;
    margin-left: 31px;
    margin-bottom: 10px;
    border: 1px solid #666666;
    background: white;
}

textarea.orcafinal {
    position: relative;
    float: left;
    width: 926px;
    min-width: 926px;
    max-width: 926px;
    height: 120px;
    min-height: 120px;
    max-height: 120px;
    padding: 5px;
    margin-left: 31px;
    margin-bottom: 10px;
    border: 1px solid #666666;
    background: white;
}    

#mscs1{
    background: url(https://www.hemoclass.com.br/site/img/mainac1.png);
    background-size: 40px, 100%;
    background-repeat: no-repeat, repeat;
    background-position: right center, center;
}

.tangelo{
    position: relative;
    display: inline-block;
    width: 75px;
    height: 25px;
    overflow: hidden;
    background: url(https://www.hemoclass.com.br/site/img/tangelo.png) top center no-repeat;
    transition-duration: .3s;
    opacity: .3;   
}

.tangelo:hover{
    opacity: 1;
}

.italico{
  font-style: italic;
}