/* Source Pro San regular */

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
@font-face {
    font-family: 'Source Sans Pro', sans-serif;
    src: url("/fonts/SourceSansPro-Regular.eot");
    src: url("/fonts/SourceSansPro-Regular.eot?#iefix") format('embedded-opentype'),
         url("/fonts/SourceSansPro-Regular.woff2") format('woff2'),
         url("/fonts/SourceSansPro-Regular.woff") format('woff'),
         url("/fonts/SourceSansPro-Regular.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* Source Pro San italic */

@font-face {
    font-family: 'Source Sans Pro', sans-serif;
    src: url('/fonts/SourceSansPro-Italic.eot');
    src: url('/fonts/SourceSansPro-Italic.eot?#iefix') format('embedded-opentype'),
         url('/fonts/SourceSansPro-Italic.woff2') format('woff2'),
         url('/fonts/SourceSansPro-Italic.woff') format('woff'),
         url('/fonts/SourceSansPro-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

/* Source Pro San bold */

@font-face {
    font-family: 'Source Sans Pro', sans-serif;
    src: url('/fonts/SourceSansPro-Bold.eot');
    src: url('/fonts/SourceSansPro-Bold.eot?#iefix') format('embedded-opentype'),
         url('/fonts/SourceSansPro-Bold.woff2') format('woff2'),
         url('/fonts/SourceSansPro-Bold.woff') format('woff'),
         url('/fonts/SourceSansPro-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* Source Pro San bold */

@font-face {
    font-family: 'Source Sans Pro', sans-serif;
    src: url('/fonts/SourceSansPro-BoldItalic.eot');
    src: url('/fonts/SourceSansPro-BoldItalic.eot?#iefix') format('embedded-opentype'),
         url('/fonts/SourceSansPro-BoldItalic.woff2') format('woff2'),
         url('/fonts/SourceSansPro-BoldItalic.woff') format('woff'),
         url('/fonts/SourceSansPro-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

html{
  height: 100%;
}
body{
  overflow-x: hidden;
  margin: 0;
  height: 100%;
  background: #dcdcdc;
}
body#login{
  font-family: 'Source Sans Pro', sans-serif;
  background: #fff;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
}
#main .header{
  background-color: #fff;
  position: fixed;
  z-index: 3;
  width: 600px;
  top: 0;
  padding: 20px 30px;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
}
#main .menu {
    background-color: #ffffff;
    position: fixed;
    z-index: 2;
    width: 100%;
    bottom: 0;
    padding:0;
}
.menu h5{
  font-size: 14px;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
}
.menu .row{
  padding: 0;
  margin: 0;
}
.menu .row div{
  padding: 5px;
  border: 2px solid #6e6e6e;
  background: #585858;
  text-align: center;
}
.menu .row div h5{
  color: #909090;
}
.menu .row div i{
  color: #909090;
}
.menu .row div:hover{
  background: #fcb931;
  border: 2px solid #fcb931;  
}
.menu .row div:hover h5{
  color: #383838;
}
.menu .row div:hover i{
  color: #383838;
}
.menu .row div.active{
  background: #fcb931;
  border: 2px solid #fcb931;  
}
.menu .row div.active i{
  color: #383838;
}
.menu .row div.active h5{
  color: #383838;
}
.header{
  background-color: white;
  position: relative;
  z-index: 2;
  width: 100%;
}
.header h4{
  font-size: 16px;
  color: #000;    
  margin-top: 5px;
  font-weight: 600;
}
.header i{
  margin-right: 30px;
  margin-left: 0px;
}
.header h4 a, .header h4:hover{  
  color: #000;  
  text-decoration: none; 
}
ul.news{
  padding: 0;
  margin: 0;
}
ul.news li{
  list-style: none;
  border-radius: 15px;
  border: 1px solid #dedede;
  padding: 25px 25px 10px;
  width: 100%;
  margin-bottom: 15px;
  background:url('image/new_traingles_bar.jpg');
  background-size: cover;
}
ul.news li h4{
  font-size: 18px;
  color: white;
  text-transform: uppercase;
  margin: 0;
}
ul.news li p{
  font-size: 15px;
  color: white;
}
ul.news .quick-link a {
  font-size: 15px;
  color: #fff;
  font-weight: 300;
  background: url(image/arrow--default.png) no-repeat top right;
  padding-right: 25px;
  display: inline-block;
  margin-top: 20px;
  margin-bottom: 20px;
}
.banner img{ 
  border-radius: 15px;
    max-width: 100%;
}
.banner{
  margin-bottom: 15px;
}
#login .footer{
  background-color: #fff;
  padding: 20px 40px;
  margin: 0;
  width: 100%;
  bottom: 0;
}
.footer{
  background-color: #4c4c4c;
  padding: 20px 0;
  margin: 0;
  width: 100%;
  bottom: 0;
}
.footer p{
  color: #818181;
  margin: 0px;
  text-align: center;
  font-size: 15px;
  padding: 0 30px;
}
.footer p a{
  color: #ed1a2e;
}
.content{
  background: #fff;
  position: relative;
  z-index: 1;
  padding: 30px;
  margin-top: 20px;
}
.content-category{
  background: #fff;
  position: relative;
  z-index: 1;
  padding: 30px 20px;
  width: 600px;
  margin: 153px auto 0;
}
.news li {
  position: relative;
}
.news li .label{
  position: absolute;
  top: 25px;
  right: 40px;
  font-size: 12px;
  background: yellow;
  padding: 5px 10px;
  border-radius: 20px;
}
.news li .label2{
  position: absolute;
  bottom: 25px;
  right: 40px;
  font-size: 12px;
  background: #3e3e3e;
  color: white;
  padding: 5px 10px;
  border-radius: 20px;
}
.news li .label3{
  display: inline-block;
  margin-bottom: 10px;
  font-size: 12px;
  background: yellow;
  padding: 5px 10px;
  border-radius: 20px;
}
.image-event{
  width: 600px;
  margin: 70px auto 0;
}
.image-event img{
  max-width: 100%;
  width: 100%;
}
.content-event{  
  position: relative;
  z-index: 1;
  padding: 30px 30px;
  margin: 0px auto;
  background: white;
  width: 600px;
}
.card-body {
  color: #8d8d8d;
}
.badge-btn{
  padding: 15px 20px !important;
  cursor: pointer;
}
.badge-blue{
  background: #4b9fb5;
}
.detail-event2{
  background-repeat: repeat;
  background-size: contain;
  padding: 20px;
  margin: -160px auto 0;
  width: 600px;
}
.detail-event2 p{
  color: white;
  font-weight: 300;
  font-size: 14px;
  margin: 0;
}
.detail-event2 h2{
  color: white;
  font-size: 30px;
}
.content-event2 h3:after {
  content: '';
  position: relative;
  border-bottom: 3px solid #ed1b2e;
  width: 60px;
  display: block;
  top: 10px;
}
.detail-event{
  background-image: url('image/red-texture.jpg');
  background-repeat: repeat;
  background-size: contain;
  padding: 20px;
  width: 600px;
  margin: 0px auto;
}
.detail-event h4{
  color: white;
  font-weight: 300;
  font-size: 1rem;
  margin: 0;
}
.badge-pending{
  position: absolute;
  top: 18px;
  right: 25px;
}
.content-event hr, .content hr{  
  border-top: 2px dashed #dedede;
}
.menu-choose{
  width: 600px;
  margin: -8px auto 0;
}
.box-left{
  padding: 15px 20px 0;
  border-top: 1px solid #dedede;
  border-left: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  border-right: 1px solid #dedede;
}
.box-right{
  padding: 15px 20px 0;
  border-top: 1px solid #dedede;
  border-left: 0px solid #dedede;
  border-bottom: 1px solid #dedede;
  border-right: 1px solid #dedede;
}
.menu-choose .left{
  height: 75px;
  background: #dc8719;
  text-align: center;
  padding: 20px 0 0;
  font-weight: 700;
  text-transform: uppercase;
}
.menu-choose .right{
  height: 75px;
  background: #f5c344;
  text-align: center;
  padding: 20px 0 0;
  font-weight: 700;
  text-transform: uppercase;
}
.menu-choose .left a, .menu-choose .right a{
  color: black;
}
.label4{
  position: absolute;
  right: 15px;
  bottom: 5px;
}
.detail-event h2{
  color: white;
  font-size: 30px;
}
.content-event h3:after {
  content: '';
  position: relative;
  border-bottom: 3px solid #ed1b2e;
  width: 60px;
  display: block;
  top: 10px;
}
.detail-register{
  width: 100%;
  margin: 20px auto 0;
  padding: 80px 10px 0;
  overflow: hidden;
  background: #f2f2f2;
  width: 600px;
}
.detail-register h2{
  color: white;
  font-size: 30px;
  color: black;
}
.detail-register h2:after {
  content: '';
  position: relative;
  border-bottom: 3px solid #ed1b2e;
  width: 60px;
  display: block;
  top: 10px;
}
.detail-register h4{
  color: black;
  font-weight: 500;
  margin: 0;
  font-size: 20px;
  margin-bottom: 20px;
}
.detail-register .box-register {
  background:white;
  padding: 20px 20px 100px;
  margin:50px 0;
}
.detail-register .box-register label {
    display: block;
}
.detail-register .box-register .select-register{
  background: #f0f1f1;
  border: none;
  padding: 10px 0px;
  border-radius: 5px;
  font-size: 1.143em;
  color: #455560;
  outline: none;
  width: 100%;    
  border: 1px solid #dedede;
}
.detail-register .box-register .form-control {
  width: 100%;
}
.detail-register .box-register .input-group .form-control{
  width: 1%;
}
#login .content{
  background: #fff;
  padding: 30px 20px 40px;
}
#login .box-login{
  -webkit-box-shadow: 0px 2px 15px 5px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 2px 15px 5px rgba(0,0,0,0.1);
  box-shadow: 0px 2px 15px 5px rgba(0,0,0,0.1);
}
#login .logo{
  text-align: center;
  padding: 30px 0 0;
}
#login .logo img{
  max-width: 100%;
}
.logo-screen{
  margin-bottom: 10px;
}
.logo-screen img{
  width: 100%;
}
.nav-screen{
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 15px;
  padding-bottom: 15px;
}
.menu-screen{
  background: #fff;
  overflow: hidden;
}
.menu-screen ul{
  padding: 0;
  margin: 10px 0 20px;
}
.menu-screen ul li{
  float: right;
  display: inline-block;
  font-size: 16px;
  color: #000;
  margin-top: 5px;
  padding: 0 20px 10px;
}
.content .btn-secondary {
    color: #fff;
    text-transform: uppercase;
    background-color: #0a4695;
    border-color: #0a4695;
    letter-spacing: 2px;
}
.content .btn-secondary:hover {
    color: #fff;
    text-transform: uppercase;
    background-color: #002a61;
    border-color: #0a4695;
}
.content .btn-danger {
    text-transform: uppercase;
    letter-spacing: 2px;
}
.content .btn-danger:hover {
    text-transform: uppercase;
}
.content .type1, .modal .type1{
  border-radius: 10px;
  padding: 20px 20px;
}
.content img{
  max-width: 100%;
}
.content .form-control {
    height: calc(0.5em + 0.75rem + 1.25rem);
    border: 1px solid #dedede;
    width: 100%;
}
.content .login h2{
    font-size: 30px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 30px;
    color: white;
}
.bigpic img, .bigpic{
    width: 100%;
}
.content .detail{
    padding: 50px 0;
}
.content .detail h3{
    font-weight: 400;
    text-align: center;
}
.content.register{
  width: 1140px;
}
.content.register .detail h4{
    font-weight: 400;
    text-transform: uppercase;
}
.content.register .form-control, .content.register .custom-select {
    font-size: 0.7rem;
    text-transform: uppercase;
    border: 1px solid #dedede;
    color: #495057
}
.custom-select {
  background: url(image/icon-arrow-bottom.png) no-repeat right center;
}

.select-shirt{
  border-radius: 20px;
  background: white;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.11);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.11);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.11);
}
.survey{
  padding: 0 0 0 25px;
  margin: 0;
}
.survey li{
  padding-bottom: 20px;
}
.badge {
    padding: 5px 20px;
    font-weight: 400;
}
select option {
    font-size: 12px;
}
#accordionExample .card{
  border-radius: 0px;
  border: 0px;
  border-bottom: 1px solid #e58e1a;
}
#accordionExample> .card .card-header {
  background-color: #455560;
  padding: 5px 0;
  border-radius: 0px;
  color: white;
}
#accordionExample > .card .card-header .btn-link {
  width: 100%;
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  color: white;
  padding: 0 5%;
  text-align: left;
}
#accordionExample > .card .card-header .btn-link:hover {
    text-decoration: none;
}
#accordionExample > .card .card-header h2 button.collapsed:after {
    content: '\F067';
}
#accordionExample > .card .card-header .btn:after {
    content: '\F068';
    font-family: "FontAwesome";
    color: #e58e1a;
    float: right;
    font-weight: 900;
}
button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) {
    border-radius: 10px;
}
/** LIGHTBOX MARKUP **/
.lightbox {
  /** Default lightbox to hidden */
  display: none;

  /** Position and style */
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
}

.lightbox img {
  /** Pad the lightbox image */
  max-width: 90%;
  max-height: 80%;
  margin-top: 2%;
}

.lightbox:target {
  /** Remove default browser outline */
  outline: none;

  /** Unhide lightbox **/
  display: block;
}

/* MODAL */
.modal-footer, .modal-body, .modal-header{
  padding: 20px;
}
.menu{
  display: none;
}
/*RESPONSIVE INTRO PAGE*/
@media (max-width: 768px) {
  #main .header {
    background-color: #585858;
  }
  .header h4{  
    color: #fff;  
  }
  .header h4 a, .header h4:hover{  
    color: #fff;  
  }
  .content .form-control{
    width: 100%;
  }
  .content-category{
    width: 100%;
  }
  .content .input-group-append{
    width: 100%;
    display: grid;
  }
  .content{
    width: 100%;
  }  
  .content .type1{
    width: 100%;
    display: grid;
  }  
  .content.register{
    width: auto;
  }
  .detail img{
    width: 100%;
  }
  #main .container{
    padding: 0px;
    width: 100%;
  }  
  .menu-choose, .detail-event2, .detail-register{
    width: 100%;
  }
  .image-event{
    margin-top:70px;    
    width: 100%;
  }
  .detail-event{   
    width: 100%;
  }
  #main .header {
    width: 100%;
  }
  .menu{
    display: block;
  }
  .content {
    padding: 120px 10px 100px;
  }
  .nav-screen{
    display: none;
  }  
  .content-event{ 
    width: 100%;
    padding: 30px 20px;
  }  
  .box-left{
    border-top: 1px solid #dedede;
    border-left: 1px solid #dedede;
    border-bottom: 0px solid #dedede;
    border-right: 1px solid #dedede;
  }
  .box-right{
    padding: 15px 20px;
    border-top: 1px solid #dedede;
    border-left: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    border-right: 1px solid #dedede;
  }
  .box-right span{
    margin: 0 20px;
  }
  .content-category {
    margin-top: 70px;
    margin-bottom: 80px;
  }
  h3, .h3 {
    font-size: 1.3rem;
  }
  .detail-register {
    padding-left: 0px;
    padding-right: 0px;
  }
  detail-register .box-register {
    padding-left: 10px;
    padding-right: 10px;
  }
  .input-group > .input-group-append > .btn, .input-group > .input-group-append > .input-group-text, .input-group > .input-group-prepend:not(:first-child) > .btn, .input-group > .input-group-prepend:not(:first-child) > .input-group-text, .input-group > .input-group-prepend:first-child > .btn:not(:first-child), .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
    border-radius: 0;
  }
  .input-group-append {
    margin-left: 0rem;
  }
}

a {
  word-wrap: break-word;
  overflow-wrap: anywhere;
  display: inline-block;
  max-width: 100%;
}