/*
* @Project ASSESP
* @author  FABIANO KUERTEN <fabiano@3fk.com.br>
*/

main { margin-top: 20px; }

.banner { width: 100%; padding: 0px 0px; background-color: transparent; }
.banner img { width: 100%; height: 100%; border: 10px solid #ffffff; box-shadow: 0px 1px 1px #aaaaaa;}

.session1 { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 10px; margin-top: 15px; }
.session1 .manchete { grid-column: span 6; padding: 10px; border: 1px solid #ffffff; box-shadow: 0px 1px 1px #aaaaaa; background-color: #ffffff; }
.session1 .manchete img { width: 100%; padding: 10px; border:1px solid #aaaaaa; }
.session1 .manchete h2 { font: bold 16px Arial, sans-serif; font-style: italic; color: #000000; }
.session1 .manchete p { margin-top: 10px; line-height: 1.2; font-size: 14px; color: #555555; }
.session1 .manchete a { text-decoration: none; color: #555555; }
.session1 .manchete a:hover { text-decoration: underline; }

.session1 .extra { grid-column: span 6; padding: 20px; border: 1px solid #ffffff; box-shadow: 0px 2px 2px #999999; background-color: #ffffff; }
.session1 .extra div { padding: 20px; border: 1px solid #999999; background-color: #e5e5e5; }
.session1 .extra div h3 { font: bolder normal normal 18px "Times New Roman", Times, serif; letter-spacing: 1.4px;  color: #000000; }
.session1 .extra div p { margin-top: 10px; font: bolder italic normal 14px "Times New Roman", Times, serif; letter-spacing: 1px; color: #555555; }
.session1 .extra div a { text-decoration: none; color: #555555; }
.session1 .extra div a:hover { text-decoration: underline; }
.session1 .extra div a:visited { text-decoration: none; }

.session2 { margin-top: 15px; display: grid; grid-template-columns: 1fr;  grid-auto-rows: auto; grid-gap: 10px; }
.session2 div { padding: 10px 10px; border: 1px solid #ffffff; box-shadow: 0px 1px 1px #aaaaaa; background-color: #ffffff; }
.session2 div img { padding: 0px 10px 5px 0px; vertical-align: middle; width: 100px; float: left; }
.session2 div h2 { font: bold 14px Arial, sans-serif; color: #666666; font-style: italic; }
.session2 div p { margin-top: 5px; font: normal 12px Arial, sans-serif; color: #555555; }
.session2 div a { text-decoration: none; color: #555555; }
.session2 div a:hover { text-decoration: underline; }

.session3 { display: none; }

@media only screen and (min-width: 320px) {
    
}

@media only screen and (min-width: 481px) {
    
}

@media only screen and (min-width: 768px) {
.session1 { margin-top: 30px; }
.session1 .manchete { padding: 20px; }
.session1 .manchete img { float: left; width: 200px; }
.session1 .manchete h2 { margin-left: 220px; font-size: 22px; }
.session1 .manchete p { margin-left: 220px; font-size: 18px; }

.session2 { display: grid; grid-template-columns:  repeat(3, 1fr); grid-gap: 10px; margin-top: 30px; }
.session2 div { grid-template-columns: 1fr; padding: 20px 20px 10px 20px; border: 1px solid #ffffff; box-shadow: 0px 1px 1px #aaaaaa; background-color: #ffffff; }
.session2 div img { margin-bottom: 10px; vertical-align: middle; width: 100%;}
.session2 div h2 { font: bold 14px Arial, sans-serif; color: #666666; font-style: italic; }
.session2 div p { margin-top: 10px; font-size: 14px; color: #555555; line-height: 1.2; }
.session2 div a { text-decoration: none; color: #555555; }
.session2 div a:hover { text-decoration: underline; }

.session3 { display: grid; grid-template-columns:  repeat(5, 1fr); grid-gap: 10px; margin-top: 30px; }
.session3 div { grid-template-columns: 1fr; padding: 15px 15px 10px 15px; border: 1px solid #ffffff; box-shadow: 0px 1px 1px #aaaaaa; background-color: #ffffff; }
.session3 div img { margin-bottom: 10px; vertical-align: middle; width: 100%;}
.session3 div h2 { font: bold 14px Arial, sans-serif; color: #666666; font-style: italic; }
.session3 div a { text-decoration: none; color: #555555; }
.session3 div a:hover { text-decoration: underline; }
}

@media only screen and (min-width: 1025px) {
.session1 { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 10px; margin-top: 30px; }
.session1 .manchete { grid-column: span 4; padding: 20px; border: 1px solid #ffffff; box-shadow: 0px 1px 1px #aaaaaa; background-color: #ffffff; }
.session1 .manchete img { float: left; width: 200px; padding: 10px; border:1px solid #aaaaaa; }
.session1 .manchete h2 { margin-left: 220px; font: bold 22px Arial, sans-serif; font-style: italic; color: #000000; }
.session1 .manchete p { margin-top: 10px; margin-left: 220px; line-height: 1.2; font-size: 18px; color: #555555; }
.session1 .manchete a { text-decoration: none; color: #555555; }
.session1 .manchete a:hover { text-decoration: underline; }

.session1 .extra { grid-column: span 2; padding: 20px; border: 1px solid #ffffff; box-shadow: 0px 2px 2px #999999; background-color: #ffffff; }
.session1 .extra div { padding: 20px; border: 1px solid #999999; background-color: #e5e5e5; }
.session1 .extra div h3 { font: bolder normal normal 18px "Times New Roman", Times, serif; letter-spacing: 1.4px;  color: #000000; }
.session1 .extra div p { margin-top: 10px; font: bolder italic normal 14px "Times New Roman", Times, serif; letter-spacing: 1px; color: #555555; }
.session1 .extra div a { text-decoration: none; color: #555555; }
.session1 .extra div a:hover { text-decoration: underline; }
.session1 .extra div a:visited { text-decoration: none; }

.session2 { display: grid; grid-template-columns:  repeat(5, 1fr); grid-gap: 10px; margin-top: 30px; }
.session2 div { grid-template-columns: 1fr; padding: 20px 20px 10px 20px; border: 1px solid #ffffff; box-shadow: 0px 1px 1px #aaaaaa; background-color: #ffffff; }
.session2 div img { margin-bottom: 10px; vertical-align: middle; width: 100%;}
.session2 div h2 { font: bold 14px Arial, sans-serif; color: #666666; font-style: italic; }
.session2 div p { margin-top: 10px; font-size: 14px; color: #555555; line-height: 1.2; }
.session2 div a { text-decoration: none; color: #555555; }
.session2 div a:hover { text-decoration: underline; }

.session3 { display: grid; grid-template-columns:  repeat(5, 1fr); grid-gap: 10px; margin-top: 30px; }
.session3 div { grid-template-columns: 1fr; padding: 20px 20px 10px 20px; border: 1px solid #ffffff; box-shadow: 0px 1px 1px #aaaaaa; background-color: #ffffff; }
.session3 div img { margin-bottom: 10px; vertical-align: middle; width: 100%;}
.session3 div h2 { font: bold 14px Arial, sans-serif; color: #666666; font-style: italic; }
.session3 div a { text-decoration: none; color: #555555; }
.session3 div a:hover { text-decoration: underline; }
}