* { margin: 0; padding: 0; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } eng{ font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 500; } .active{ color: #009bde; } #slider { text-align: center; } #slider h1{ font-size: 42px; margin: 20px 0; } .SliderLOGO{ margin-top: 120px; width: 100px; height: auto; } .HalfSection{ padding: 20px 0; max-width: 510px; } .HalfIMG{ background-position: center; background-size: cover; background-repeat: no-repeat; } .HalfSection h3 , .LeftHalfSection h3 , .EventTimetable h3 , .SponsorSupport h3{ margin:0; } .HalfSection hr , .LeftHalfSection hr , .EventTimetable hr , .SponsorSupport hr { margin: 2px 0 10px 0; width: 95px; height: 0; border: 0; border-top: 3px solid #009bde; } .EventTimetable hr, .SponsorSupport hr { margin: 2px auto 40px auto; } .HalfSection p , .LeftHalfSection p{ font-size: 14px; } .LeftHalfSection{ padding-top: 20px; width: 500px; float: right; } .EventTimetable{ width: 100%; height: auto; padding: 40px 10px; text-align: center; background-color: #f8f8f8; } .tableGrid{ float: left; width: 20%; padding: 0 10px; } .Timetable img{ margin-bottom: 10px; } .SponsorSupport{ width: 100%; height: auto; padding: 40px 10px; text-align: center; background-color: #fff; } .PageHeading{ width: 100%; height: auto; padding:40px 0; text-align: center; background-color: #f8f8f8; } .PageHeading h3{ margin: 0 0 5px 0; } .PageHeading hr { margin: 5px auto 0 auto; width: 60px; height: 0; border: 0; border-top: 3px solid #dd5112; } .HalfSection h4 , .LeftHalfSection h4{ margin: 0 0 10px 0; } .eventicon{ margin: -5px 5px 0 0; width: 25px; height: 25px; } .RadioChoice , .TShirt{ float: left; width: 100%; height: auto; } .RadioChoice .Question , .TShirt .Question { margin-top: 0px; } .RadioChoice input[type=radio], .RadioChoice input[type=checkbox] , .TShirt input[type=radio], .TShirt input[type=checkbox] { display:none; } .RadioChoice input[type=radio] + label, .RadioChoice input[type=checkbox] + label { font-size: 14px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 300; letter-spacing: -1px; text-align: center; width: 80px; background-color: #fff; color: #232323; border: 1px solid #cccccc; padding: 6px; margin-left: 5px; border-radius: 3px; } .TShirt input[type=radio] + label, .TShirt input[type=checkbox] + label { font-size: 12px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 300; letter-spacing: -1px; text-align: center; width: 40px; background-color: #fff; color: #232323; border: 1px solid #cccccc; padding: 6px; margin-left: 4px; border-radius: 3px; } .RadioChoice input[type=radio]:checked + label, .RadioChoice input[type=checkbox]:checked + label, .TShirt input[type=radio]:checked + label, .TShirt input[type=checkbox]:checked + label{ background-color: #dd5112; color: #fff; border: 1px solid #dd5112; } .registration{ padding: 40px 0; } .registration .container{ max-width: 1000px; } .registration h5 , .registration h4 , .PaymentTotalPrice h4 , .PaymentEach h5{ margin: 2px 0; } .registration .Input{ margin-bottom: 25px; } .dateofbirth{ margin-right: 10px; float: left; } .inBracket{ color: #dd5112; word-spacing: -1px; font-size: 11px; } .clear{ clear: both; } .tablehead{ padding: 10px; width: 100%; background-color: #dd5112; color: #fff; } .registration .TotalPrice , .PaymentTotalPrice .TotalPrice { position: relative; color: #dd5112; font-size: 24px; } .FamilyInput{ max-width: 120px; border-radius: 3px; border: 1px solid #cccccc; margin: 5px; padding: 4px; } .registration input, .registration input::-webkit-input-placeholder { font-size: 13px; font-weight: 400; word-spacing: -1px; } .goBackBTN{ border: 0; padding: 10px 40px; background-color:#b7b7b7; color: #fff; font-size: 16px; margin-right: 10px; } .submitBTN{ border: 0; padding: 10px 40px; background-color:#dd5112; color: #fff; font-size: 16px; } .searchDonate h4{ margin: 30px 0 10px 0; } .searchDonate hr { margin: 2px 0 0px 0; width: 100%; height: 0; border: 0; border-top: 3px solid #009bde; } .searchHolder{ text-align: center; background-color: #f9f9f9; padding: 20px; } .searchInputBox{ height: 48px; padding: 6px 12px; font-size: 16px; line-height: 1.5; width: 65%; line-height: 1.42857143; color: #555555; background-color: #ffffff; background-image: none; border: 1px solid #cccccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } .yearSelect{ padding: 4px 12px; font-size: 14px; width: 110px; line-height: 1.42857143; color: #555555; background-color: #ffffff; background-image: none; border: 1px solid #cccccc; border-radius: 4px; -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } .SearchSubmitBTN{ border: 0; padding: 10px 40px; background-color:#009bde; color: #fff; font-size: 16px; border-radius: 4px; height: 48px; margin-left: 5px; } .GroupContainer{ margin:30px 0 0 0; } .GroupContainer .col-md-2 , .GroupContainer .col-sm-3{ margin: 10px 0; } .GroupContainer img{ width: 100%; height: auto; } .eachGroup{ text-align: center; border: 1px solid #cccccc; background-color: #fff; } .GroupData{ padding: 10px 10px; } .eachGroup h4{ margin: 0 0 5px 0; font-weight: 300; } .GroupNo{ background-color: #009bde; color: #fff; padding: 5px 10px; border-radius: 15px; font-size: 13px; } .GroupDonateBTN{ margin: 10px 0; border: 0; background-color: #dd5112; color: #fff; padding: 7px 40px; } .More{ text-align: center; margin: 30px 0; } .MoreGroupBTN{ background-color: #aeaeae; color: #fff; padding: 7px 40px; border: 0; } .MoreGroupBTN:hover{ background-color: #009bde; } .ToPayment{ position: relative; width: 100%; text-align: center; margin-top: -15px; } .ToPayment a{ font-size: 16px; background-color: #dd5112; color: #fff; padding: 10px 50px; border-radius: 5px; } .GroupProgress{ margin: 40px 0; background-color: #f8f8f8; padding: 20px 20px 5px 20px; } .FundHead{ font-size: 18px; margin: 0 0 0 8px; } .ourTarget{ float: right; } .targetFund{ font-size: 20px; color: #dd5112; } .progress { position:relative; height:70px; margin-top: 5px; } .GroupProgress p { line-height: normal; } .raised { position:absolute; left:10px; top:7px; background-color: #b5b5b5; border-color: #b5b5b5; color: #fff; } .goal { position:absolute; right:10px; top:7px; background-color: #dd5112; border-color: #dd5112; color: #fff; } .GroupProgress table tr td{ padding:10px; vertical-align: middle; } #comment tbody tr td{ padding: 15px 10px; } .Money{ letter-spacing: -1px; color: #dd5112; font-size: 18px; } .statement{ margin-top: 40px; margin-bottom: 40px; float: left; background-color: #f8f8f8; padding: 20px 40px 0 40px; width: 100%; } .statementLOGO , .statementWord{ float: left; } .statementLOGO{ text-align: center; width: 20%; } .statementLOGO img{ max-width: 80px; height: auto; } .statementWord{ width: 100%; } .PageHeading img{ margin-top: -4px; width: auto; height: 15px; } .PageHeading .ToWho{ color: #dd5112; font-size: 18px; } .PaymentEach{ width: 100%; float: left; background-color:; padding: 20px; margin-bottom: 20px; } .PaymentEach input{ margin-bottom: 15px; } .PaymentEach input[type=radio], .PaymentEach input[type=checkbox] { display:none; } .PaymentEach input[type=radio] + label, .PaymentEach input[type=checkbox] + label { font-size: 20px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 300; letter-spacing: -1px; text-align: center; width: 100%; background-color: #fff; color: #232323; border: 1px solid #cccccc; padding: 20px; height: 75px; } .PaymentEach input[type=radio]:checked + label, .PaymentEach input[type=checkbox]:checked + label{ background-color: #fff; border: 2px solid #dd5112; } .FillPrice{ color: #232323; padding: 0px 4px; width: 70%; border:1px solid #cccccc; border-radius: 4px; } .PersonIMG{ margin-top: -5px; margin-right: 10px; width: 20px; height: auto; } .paypalIMG{ margin-top: -10px; width: 100%; height: auto; } .PaymentQuestion{ float: left; width: 25%; height: auto; padding: 0 10px 40px 10px; } .PaymentQuestion input[type=radio], .PaymentQuestion input[type=checkbox] { display:none; } .PaymentQuestion input[type=radio] + label, .PaymentQuestion input[type=checkbox] + label { font-size: 14px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 300; letter-spacing: -1px; text-align: center; width: 80px; background-color: #fff; color: #232323; border: 1px solid #cccccc; padding: 6px; margin-left: 5px; border-radius: 3px; } .PaymentQuestion input[type=radio]:checked + label, .PaymentQuestion input[type=checkbox]:checked + label{ background-color: #dd5112; color: #fff; border: 2px solid #dd5112; } .PaymentContact{ width: 100%; float: left; background-color:#fff; padding: 20px 20px 0 5px; } .Question , .Answer , .ContactQuestion , .ContactAnswer{ float: left; } .Question{ width: 100%; margin-top: 8px; } .PaymentTotalPrice { padding-left: 20px; } @media screen and (max-width: 1199px) { .LeftHalfSection{ width: 400px; float: right; } #logo { display: block; height: 55px; float: none; margin: 0 auto 0 !important; max-width: none; text-align: center; border: 0 !important; padding: 0 !important; } #slider h1{ font-size: 30px; margin: 20px 0; } .SliderLOGO{ margin-top: 100px; width: 100px; height: auto; } #header, #header-wrap, #logo img { height: 55px; -webkit-transition: height .4s ease, opacity .3s ease; -o-transition: height .4s ease, opacity .3s ease; transition: height .4s ease, opacity .3s ease; } .PaymentEach input[type=radio] + label, .PaymentEach input[type=checkbox] + label { font-size: 18px; height: 65px; } } @media screen and (max-width: 991px) { .LeftHalfSection , .HalfSection{ margin: 0 auto; max-width: 600px; width: 100%; float: none; } .HalfIMG{ max-height: 260px; background-position: center; background-size: cover; background-repeat: no-repeat; } .col-padding { padding: 20px 60px; } .tableGrid{ float: left; width: 33.33%; padding: 0 10px; } .TShirt input[type=radio] + label, .TShirt input[type=checkbox] + label { width: 32px; } .FamilyInput{ margin: 5px 0px; } .promo .container{ padding: 0 40px; } .registration .TotalPrice{ position: relative; color: #dd5112; font-size: 24px; margin: -12px 0 20px 0; } .statementLOGO img{ max-width: 50px; height: auto; } .eachPrice{ text-align: center; float: left; width: 90%; margin: 10px; background-color: #fff; padding: 15px; border: 1px solid #d5d5d5; font-size: 18px; } .PaymentQuestion{ width: 30%; } } @media screen and (max-width: 767px) { .tableGrid{ float: left; width: 50%; padding: 0 10px; } .statementLOGO{ display: none; } .statementWord{ padding: 0 10px; width:100%; } .PaymentQuestion input[type=radio] + label, .PaymentQuestion input[type=checkbox] + label , .RadioChoice input[type=radio] + label, .RadioChoice input[type=checkbox] + label { font-size: 14px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 300; letter-spacing: -1px; text-align: center; width: 100%; background-color: #fff; color: #232323; border: 1px solid #cccccc; padding: 5px; margin-left: 0px; } .Question{ width: 100%; } .Answer{ width: 100%; } .ContactAnswer , .PaymentQuestion{width: 100%;} .paypalIMG{ margin-top: -10px; width: 200px; height: auto; } #slider h1{ font-size: 16px; margin: 20px 0; } .SliderLOGO{ margin-top: 40px; width: 60px; height: auto; } } @media screen and (max-width: 600px) { .Timetable .col-md-1{ display: none; } .col-xs-4{ width: 50%; } .promo .container{ padding: 0 30px; } .searchHolder{ padding: 20px 10px; } .SearchSubmitBTN{ border: 0; padding: 10px 20px; background-color:#dd5112; color: #fff; font-size: 16px; border-radius: 4px; height: 48px; margin-left: 5px; } }