﻿html,head,body,div,p,span,br,h1,h2,h3,h4,h5,h6,a,img,li,input,textarea,select { margin: 0; padding: 0; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-size: 10pt }

.header { position: relative; min-width: 320px; max-width: 1000px; height: 100px; margin: auto }
    .header img { margin: 20px }

    .menu { position: absolute; top: 0px; right: 0px; display: none }    
    .menu ul { list-style: none; margin: 0; padding: 0 }
    .menu ul li { float: left; height: 100px; width: 70px }
    .menu ul li a { font-size: 7.5pt; font-weight: bold; text-align: center; text-decoration: none; color: #000; text-transform: uppercase; display: block; height: 40px; padding-top: 60px }
    .menu ul li a:hover { color: #fff; text-transform: uppercase; background: #369 }
    .menu ul li a.sel { background: #333; color: #fff }

    .mobile-menu { position: absolute; top: 0px; right: 0px; z-index: 2000; border: 1px solid #000; background: #fff }    
    .mobile-menu img { position: absolute; width: 40px; right: 0px; top: 10px }
    .mobile-menu ul { list-style: none; margin: 0; padding: 0; margin-top: 80px; display: none }
    .mobile-menu ul li { float: none; padding: 0; width: 100% }
    .mobile-menu ul li a { font-size: 9pt; text-align: left; text-decoration: none; color: #000; text-transform: uppercase; display: block; padding: 10px }
    .mobile-menu ul li a:hover { color: #fff; text-transform: uppercase; background: #369 }
    .mobile-menu ul li a.sel { background: #333; color: #fff }

    .m1 { background: #E5F1F8 }
    .m2 { background: #CCE3F2 }
    .m3 { background: #B2D4EB }
    .m4 { background: #99C7E4 }
    .m5 { background: #8CBFE1 }
    .m6 { background: #70B0D9 }
    .m7 { background: #54A0D2 }
    .m8 { background: #3891CB }

@media (min-width: 800px) {
    .menu { display: none }
    .mobile-menu { display: block }
    .details, .details-1 { float: left; margin-bottom: 50px; margin-right: 5px; width: 32%; min-width: 320px }
}

@media (min-width: 801px) {   
    .menu { display: block }
    .mobile-menu { display: none }
    .details { float: left; margin-bottom: 50px; width: 32%; min-width: 320px }
    .details-1 { float: left; margin-bottom: 50px; margin-right: 25px; width: 45%; min-width: 320px }    
    .details-1 img { width: 190px }
}


.content { position: relative; width: 100%; border-top: 10px solid #333; margin: auto }
    
    .content .data { position: absolute; background: #fff; opacity: 0.95; top: 0px; left: 0; margin: auto; z-index: 1999; padding: 30px; padding-bottom: 50px }
    .content .data h1 { font-size: 24pt; margin-bottom: 20px; color: #ff6a00 }
    .content .data h2 { font-size: 16pt; margin-bottom: 20px; width: 320px; color: #369 }
    .content .data p { line-height: 1.75em; font-size: 12pt; text-align: justify; margin-bottom: 20px }    

    
    .details table { width: 100% }
    .details table td { vertical-align: top; padding: 5px }
    .details-1 table { width: 100% }
    .details-1 table td { vertical-align: top; padding: 5px }
    table td img { width: 100% }

    h1.event { font-weight: normal }
    .table td { padding: 5px; border: 1px solid #999; font-size: 10pt }
    .table { width: 100%; border-collapse: collapse }
    .table .hdr { background: #369; color: #fff; text-align: center }
    .table img { min-width: 50px; max-width: 80px; border: 1px solid #000 }
    .table td b { color: tomato; font-size: 12pt }


.footer { position: fixed; bottom: 0; background: #000; width: 100%; color: #3891CB; text-align: center; padding: 0px; z-index: 9999 }
    .footer p { padding: 10px }
