@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap');

body {padding: 0; margin: 0; font-family: 'Source Sans Pro', sans-serif;}
img {max-width: 100%;}
.top-part {background: url(../images/top-bg.jpg) #191453; background-position: top center; background-repeat: no-repeat;}
.middle-part {background: url(../images/page-bg.png) #fff; background-position: top left; background-repeat: no-repeat; padding: 60px 0;}
.main-hed {font-size: 60px; color: #e42c46; font-weight: 900; text-align: center; margin-top: 0;}
.main-hed span {color: #27449f;}
.sub-hed {font-size: 30px; color: #243360; font-weight: 600; text-align: center; margin-bottom: 40px;}
.sub-hed span {color: #e42c46; font-weight: 600; font-style: italic;}
.blue-box {background: linear-gradient(to left, #f0f7ff, #fff); padding: 30px; box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.1); margin-top: 40px;}
.blue-box.red {background: linear-gradient(to right, #fff1ff, #fff);}
.box-text {font-size: 20px; color: #2d3244; font-weight: 400; line-height: 30px; margin: 0;}
.blue-box .box-text span{color: #27449f; font-weight: 700;}
.blue-box.red .box-text span{color: #e42c46; font-weight: 700;}
.popover{min-width: 250px;}
.timer-bg{background-color: #191453; padding: 20px; border-radius: 6px;}
.timer-title{color: #fff; margin-top: 0; text-align: center; font-weight: 700;}
.grow { transition: all .2s ease-in-out;}
.grow:hover { transform: scale(1.02);}
.outer:hover{-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;}
.outer{float:left; font-size:16px; text-align:center; height:150px; background:#eb4c63; color:#fff; width:100%; border:5px solid rgba(0,0,0,0.2); padding-top:25px; border-radius:5px; text-shadow:1pt 1pt #000; cursor:default; -webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.5); -moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.5); box-shadow:0 0 10px rgba(0, 0, 0, 0.5); transition:all 0.2s ease-in-out;}
.outer.yellow{background:#f08d1c;}
textarea{
    height: 84px;
}
.outer.blue{background:#2d8ef9;}
.outer.green{background:#4ada72;}
.countdown{font-size:44px; font-weight:bold;}
.howtoenter {font-size: 50px; color: #e42c46; font-weight: 700; text-align: center; margin-top: 50px; margin-bottom: 0px;}
.form-part{background: url(../images/form-bg-left.png) left bottom no-repeat, url(../images/form-bg-right.png) right bottom no-repeat; padding: 60px 0; background-color: #ffc94a; text-align: center;}
.form-box{background: url(../images/form-left.png) left bottom no-repeat, url(../images/form-right.png) right top no-repeat; padding: 60px 90px; background-color: #fff; box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.1); border-radius: 5px;}
.form-title{font-size: 40px; color: #243360; font-weight: 700; text-align: center; margin: 0 0 20px 0;}
.form-part .form .form-control{ margin:auto; width: 80%; height: 50px; border-radius: 50px; border: 1px solid #d7d9df; padding-left: 45px; box-shadow: none; font-size: 18px; color: #606468; }
.form-part .join-btn {background: linear-gradient(to left, #e96429, #f89216); border-radius: 50px; font-size: 18px; color: #fff; padding: 11px 40px;}
.form-part .join-btn:hover {background: linear-gradient(to right, #e96429, #f89216); color: #fff;}
.form-part .join-btn:focus {outline: none;}
.form-part .form-group i{position: absolute; right:24%;padding: 15px; color: #243360; min-width: 50px; text-align: center; font-size: 20px;}


@media screen and (max-width: 1199px) {
  .form-part .form .form-control {width: 80%;}
}
@media screen and (max-width: 991px) {
  .main-hed {font-size: 50px;}
  .form-box {padding: 50px;}
  .form-part .form .form-control {width: 220px;}
}
@media screen and (max-width: 767px) {
  .main-hed {font-size: 36px;}
  .sub-hed {font-size: 20px;}
  .box-text {font-size: 18px; line-height: normal;}
  .howtoenter {font-size: 36px;}
  .form-box {padding: 40px;}
  .form-title {font-size: 24px;}
  .form-part .form .form-control {width: 100%;}
  .form-part  .form-group{text-align: left;}
  .outer{height: auto; padding: 0 0 10px 0; margin-bottom: 10px; border: 3px solid rgba(0,0,0,0.2);}
  .countdown {font-size: 30px;}
}