/*
 *
 * Canal da Moda Comunicação
 *
 * December - 2012
 *
 * Author: Fernando Porazzi
 *		   @fernandoporazzi
 *
*/

@font-face{
	font-family: 'helvetica-neue';
	src: url('../fontes/helvetica-neue-light.eot');
	src: url('../fontes/helvetica-neue-light.eot?#iefix') format('embedded-opentype'),
		 url('../fontes/helvetica-neue.otf') format('opentype'),
		 url('../fontes/helvetica-neue.ttf') format('truetype');
}

::-moz-selection { background: #E93977; text-shadow: none; color: #fff; }
::selection { background: #E93977; text-shadow: none; color: #fff; } 

a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; }
ul { margin: 0; padding: 0; list-style-type: none;}

body { background: #efefef url('../img/bg-site.png') no-repeat top center; width: 100%; margin: 0; font-family: 'helvetica-neue' }
#content { width: 1000px; margin: 0 auto; }

#first-menu { float: left; }
#first-menu ul { margin: 0 0 0 553px;}
#first-menu ul li { display: block; float: left; font-size: 18px; height: 41px; line-height: 40px; margin: 0; }
#first-menu ul li a { color: #1D2121; padding: 10px 20px; }
#top-1:hover { background-color: #E93977; }
#top-2:hover { background-color: #FFF100; }
#top-3:hover { background-color: #00ADEE; }
#first-menu ul li a:hover {color: #222;}

#logo { float: left; width: 100%; margin: 40px 0 0 0; }

#second-menu { float: left; width: 140px; margin: 55px 0 0 30px; }
#second-menu li { margin-bottom: 8px; }
#second-menu li a {color: #1D2121; }
#second-menu li a:hover {color: #fff; }

/* home */

#post-title { float: right; margin: -95px 140px 0 0; width: 340px; }
#post-title h2 {color: #333;font-size: 27px; height: 80px; text-align: right; margin-bottom: 15px; }
#post-title span {font-size: 18px; position: absolute; margin-bottom: 0; margin-left: 210px;}
#post-title a { color: #00ADEE;  }
#post-image { float: left; width: 540px; margin: 27px 0 0 155px;}
#post-image img { width: 540px; }

#section-title { color: #333; font-size: 48px; float: left; margin: -40px 0 0 390px ; }

#main { background-color: #F9F9F9; float: left; width: 830px; margin: 5px 0 65px 0;}
#main h2 { color: #E93977; font-size: 30px; float: left; margin: 65px 0 0 50px;}
.section { color: #666; float: left; margin-left: 50px; margin-bottom: 100px;  width: 730px; }
.transition {
	-webkit-transition:all .4s ease-in-out;
       -moz-transition:all .4s ease-in-out;
   		 -o-transition:all .4s ease-in-out;
   			transition:all .4s ease-in-out;
}
/* quem somos */

#black-mask { background-color: rgba(0, 0, 0, .8); display: none; height: 100%; width: 100%; position: fixed; left: 0; }
#black-mask-content { display: none; position: fixed; width: 900px; height: 595px; left: 50%; top: 50%; margin: -297px 0 0 -450px; }
#close-button { background-color: #E93977; border: 3px solid #fff; color: #fff; cursor: pointer; display: none; font-size: 35px; font-weight: bolder; position: fixed; width: 50px; height: 50px; border-radius: 100%; line-height: 50px; text-align: center; left: 50%; top: 50%; margin: -315px 0 0 420px; z-index: 99999;}
.ie8 #black-mask, .ie7 #black-mask { background: url('../img/IE-bg-black-mask.png'); }

#objetivo { margin-top: 20px; margin-bottom: 10px; }
#objetivo img { cursor: pointer; float: left; width: 369px; height: 244px;}
/* i've commented the following line because the picture was removed, just remove the commments when setting a new picture */
/*#objetivo p { float: left; font-size: 20px; width: 325px; margin: 18px 0 0 30px;}*/
#objetivo p { float: left; font-size: 20px; margin: 0px;}

#sobre { float: left;}
#sobre article { float: left; height: 109px; width: 100%; font-size: 17px; line-height: 17px; margin: 30px 0 0 0; }
#sobre article p { margin: 0; }
#sobre img { float: left; margin: 0 40px 0 0;}

#historico { float: left;   }
#historico h3 { font-size: 35px; }
#historico article { float: left; width: 100%; margin-top: 45px;}
#historico article p {float: left; font-size: 19px; width: 600px; margin: 0 0 0 20px;}
.date-circle { color: #fff; float: left; font-size: 36px; height: 106px; width: 106px; text-align: center; line-height: 106px; cursor: default; text-shadow: 1px 1px 2px #666;
	-webkit-border-radius: 100%;
	   -moz-border-radius: 100%;
		-ms-border-radius: 100%;
		 -o-border-radius: 100%;
			border-radius: 100%;
}

.date-circle:hover { 
	-webkit-box-shadow: inset 0 0 20px #333;
	   -moz-box-shadow: inset 0 0 20px #333;
		-ms-box-shadow: inset 0 0 20px #333;
		 -o-box-shadow: inset 0 0 20px #333;
			box-shadow: inset 0 0 20px #333;
}

.pink-circle { background-color: #E93977; }
.blue-circle { background-color: #00ADEE; }
.yellow-circle { background-color: #FFF100; }

/* serviços */

#servicos { float: left; margin-top: 0px; }
#servicos article { float: left; width: 100%;}
#servicos article p { float: left; font-size: 18px; width: 590px; margin: 0;}
#servicos article h3 { margin-top: 80px; }
#servicos img { float: left; margin-right: 30px; margin-top: 80px;}

/* clientes */
#clientes { float: left; width: 770px;}
.client-box { background-color: #fff; border: 4px solid #d4d4d4; float: left; width: 162px; height: 162px; margin: 30px 18px 0 0; }
.blue-box:hover { 
	-webkit-box-shadow: inset 0 0 80px #00ADEE;
	   -moz-box-shadow: inset 0 0 80px #00ADEE;
		-ms-box-shadow: inset 0 0 80px #00ADEE;
		 -o-box-shadow: inset 0 0 80px #00ADEE;
			box-shadow: inset 0 0 80px #00ADEE;
}
.pink-box:hover {
	-webkit-box-shadow: inset 0 0 80px #E93977;
	   -moz-box-shadow: inset 0 0 80px #E93977;
		-ms-box-shadow: inset 0 0 80px #E93977;
		 -o-box-shadow: inset 0 0 80px #E93977;
			box-shadow: inset 0 0 80px #E93977;
}
.yellow-box:hover {
	-webkit-box-shadow: inset 0 0 80px #FFF100;
	   -moz-box-shadow: inset 0 0 80px #FFF100;
		-ms-box-shadow: inset 0 0 80px #FFF100;
		 -o-box-shadow: inset 0 0 80px #FFF100;
			box-shadow: inset 0 0 80px #FFF100;
}
.black-box:hover {
	-webkit-box-shadow: inset 0 0 80px #666;
	   -moz-box-shadow: inset 0 0 80px #666;
		-ms-box-shadow: inset 0 0 80px #666;
		 -o-box-shadow: inset 0 0 80px #666;
			box-shadow: inset 0 0 80px #666;
}
.client-box img { float: left; margin: 12px 0 0 12px; }

/* contato */
#contato { margin-top: 50px; }
#contato p { margin: 8px 0 0 0; }
#contato label { float: left; font-size: 21px; width: 120px; margin-top: 8px; }
.inputs { background-color: #d4d4d4; border: 0; font-size: 20px; height: 36px; width: 330px; padding: 0 10px}
#mensagem { height: 185px; resize: none;}
.inputs:focus { outline: 0; }
#email:focus { 
	-webkit-box-shadow: inset 0 0 15px #E93977;
	   -moz-box-shadow: inset 0 0 15px #E93977;
		-ms-box-shadow: inset 0 0 15px #E93977;
		 -o-box-shadow: inset 0 0 15px #E93977;
			box-shadow: inset 0 0 15px #E93977;	
}
#nome:focus {
	-webkit-box-shadow: inset 0 0 15px #00ADEE;
	   -moz-box-shadow: inset 0 0 15px #00ADEE;
		-ms-box-shadow: inset 0 0 15px #00ADEE;
		 -o-box-shadow: inset 0 0 15px #00ADEE;
			box-shadow: inset 0 0 15px #00ADEE;
}
#telefone:focus {
	-webkit-box-shadow: inset 0 0 15px #FFF100;
	   -moz-box-shadow: inset 0 0 15px #FFF100;
		-ms-box-shadow: inset 0 0 15px #FFF100;
		 -o-box-shadow: inset 0 0 15px #FFF100;
			box-shadow: inset 0 0 15px #FFF100;
}
#mensagem:focus {
	-webkit-box-shadow: inset 0 0 15px #666;
	   -moz-box-shadow: inset 0 0 15px #666;
		-ms-box-shadow: inset 0 0 15px #666;
		 -o-box-shadow: inset 0 0 15px #666;
			box-shadow: inset 0 0 15px #666;	
}
#b { background-color: #E93977; border: 0; color: #fff; font-size: 20px; float: left; height: 25px; width: 96px; margin: 10px 0 0 375px;
	-webkit-border-radius: 10px 10px 0 10px;
	   -moz-border-radius: 10px 10px 0 10px;
		-ms-border-radius: 10px 10px 0 10px;
		 -o-border-radius: 10px 10px 0 10px;
			border-radius: 10px 10px 0 10px;
}

/* novidades */
#novidades { float: left; }
.news { float: left; margin-top: 80px; width: 730px;}
.news-title { border-bottom: 1px solid #666; color: #666; cursor: default; font-size: 25px; }
.news-title a:hover { color: #E93977; text-shadow: 0 0 2px #999; } 
.news-title a:active { background-color: #00ADEE; color: #fff; } 
.news-date { float: left; color: #00ADEE; font-size: 14px; width: 730px;}
.img-news { float: left; width: 300px; height: 300px; margin-top: 40px;}
.news-text { float: left; margin: 40px 0 0 20px; width: 405px;}
.news-text p:first-child { margin-top: 0 }
.news-text a { color: #E93977; }
.news-text a:hover { text-decoration: underline; }
#single-text { float: left; margin-top: 10px; }
.img-for-single { float: left; width: 730px; margin: 20px 0 20px; 
	-webkit-box-shadow: 0 0 20px #222; 
	   -moz-box-shadow: 0 0 20px #222; 
		-ms-box-shadow: 0 0 20px #222; 
		 -o-box-shadow: 0 0 20px #222; 
			box-shadow: 0 0 20px #222;
}
#pager { float: right; margin-top: 50px; }
#pager li { float: left; font-weight: bolder; height: 20px; width: 20px; margin-left: 10px; text-align: center; }
#pager li a { color: #E93977; }
.current-page { background-color: #E93977; border-radius: 100%; color: #fff; }
#voltar-para-novidades { float: right; margin-top: 50px; }
#voltar-para-novidades a { color: #E93977; }
#voltar-para-novidades a:hover { text-decoration: underline; }
#voltar-para-novidades a:active { background-color: #00ADEE; color: #fff; }

/* footer */

#footer { background-color: rgba(0, 173, 238, .7); float: left; height: 185px; width: 100%; margin: 20px 0 30px 0 ; }
.ie8 #footer, .ie7 #footer { background: url('../img/IE-bg-footer.png'); }
#networks { float: left; height: 45px; width: 1000px; margin: 25px 0 0 40px;}
.networks { float: left; height: 44px; width: 43px; margin-right: 10px;}
#bt-facebook { background: url('../img/bt-facebook.png'); }
#bt-facebook:hover { background-position: 0 44px; }
#bt-instagram { background: url('../img/bt-instagram.png'); }
#bt-instagram:hover { background-position: 0 44px; }
#bt-twitter { background: url('../img/bt-twitter.png'); }
#bt-twitter:hover { background-position: 0 44px; }
#bt-youtube { background: url('../img/bt-youtube.png'); }
#bt-youtube:hover { background-position: 0 44px; }
.p-footer { float: left; color: #000; font: 15px tahoma; line-height: 16px;}
#text-footer { width: 540px; margin: 10px 0 0 40px;}
#adress { width: 280px; margin: -7px 0 0 80px;}
.p-footer a:hover { color: #fff; }