/* ==========================================================================
CUSTOM CSS
========================================================================== */

body {

    padding-top: 70px;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;


}

section {
    padding-top: 80px;
    padding-bottom: 80px;
}

.alert#cookie-consent {margin-bottom: 0px;background:#0d77bd;border:none;border-radius:0px;}


.full-size-background {
    background-image: linear-gradient(to bottom right, #fff, #003772);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    
}


.btn{
    
    padding: 12px 12px;
    background: #0d77bd;
    border:none;
    color:#fff !important;
    width:230px;
    background:#003772;
    border-radius:4px;
    font-size:20px;
}

.btn:hover{

  color: #fff !important;
}

/* ==========================================================================
COLOURS
========================================================================== */

.bg-light-grey {
    background-color: #eeeeee;
}

.bg-dark{
    
    background-color: #003772 !important
}

.text-light-grey {
    color: #eeeeee;
}

.text-regular-grey {
    color: #cccccc;
}


.text-white{

  color:#ffffff
}

.text-blue{
    
    color:#003772;
}

.text-light-blue{
    
    color:#0d77bd !important
}

a{
    color:#0d77bd 
}

a:hover{
    color:#003772 
}

a:visited{
    color:#003772 
}




/* ==========================================================================
SPAM TRAP
========================================================================== */

.st {
  position: absolute;
  left: -3000px;
  z-index: -100;
}



/* ==========================================================================
TEXT STYLES
========================================================================== */
.strong{
    
    font-weight:700;
}


.text-left{
    
    text-align:left
}


.light{
    
    font-weight:300
}



/* ==========================================================================
LOADING SCREEN STYLES
========================================================================== */
    

#loader-container{
    
    width:150px;
    margin:auto;
    left:0;
    right:0;
    position: absolute;
    top:45%;
    text-align:center;
    
}


#loading {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: fixed;
  display: block;
  z-index: 9999999999999999999;
  color: #333333;
  background-color:#ffffff
}
    
    

  .loader {
    margin:auto;
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid #0d77bd;
  border-right: 10px solid #003772;
  width: 60px;
  height: 60px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
} 





/* ==========================================================================
VIDEOS
========================================================================== */

.play-icon-container {
    position: absolute;
    display: inline-block;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.video-thumbnail {
    position: relative;
}

.video-thumbnail:hover .play-icon-container {
    background-color: rgba(255, 255, 255, 0.1);
}

.play-icon-container i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.video-modal {
    max-width: 1110px;
}

.video-item {
    margin-bottom: .6rem;
}

.video-item:before {
    content: "";
    background: #0d77bd;
    width: 15px;
    height: 15px;
    display: inline-block;
    padding-right: 10px;
    margin-right: 10px;
    border-radius: 50%;
      
}

/* ==========================================================================
NAV
========================================================================== */

.bg-dark {

    background-color:#003772 !important;
}


.fixed-top{

    padding-top:0 !important;
    padding-bottom:0 !important;
}

.navbar-dark .navbar-nav .nav-link, .navbar-dark .navbar-nav .nav-link{
    
    color:#ffffff !important;
    font-size:14px;
    padding:26px;
    -webkit-transition: all .4s ease-in-out;
    transition:all .4s ease-in-out;
    
    }


.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:hover{
    
    color:#d3d3d3 !important;

    
    }
 

/*make reg button in header stand out */
 .head-reg{

      
    background-color:#0d77bd;
 }

 

.navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link{
   
    color:#003772 !important;
    background-color:#f8f9fa !important;
    
}


@media all and (max-width:768px){

.fixed-top{
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}
}

 


/* ==========================================================================
SECTIONS
========================================================================== */
.section-white{
background-color:#ffffff;
}


.section-light{
background-color:#f8f9fa;
}

.section-light h2, .section-light h3, .section-light h4{
    
    color:#003772;
}

.section-light h2{
    
    margin:20px auto;
}



.section-blue{
    
    background-color:#0d77bd;
    color:#fff;
}

.section-blue hr {
    border-top: 1px solid #fff;
}


.pad-top{

  padding-top:40px;
}


/* ==========================================================================
TABLE
========================================================================== */

.table tbody tr td:last-child {
    text-align: center;
}

#agenda-table td {
  padding: 2rem;

}

/* ==========================================================================
HEADER SECTION
========================================================================== */

#header{
    
    position: relative;
    background-position: center 0;
    background-size:cover;
    overflow:hidden;
    
   }


#header ul{
    
    font-weight:600;
}

#title-container{

    position:relative;
    padding:160px 0;
    max-width:700px;
    float:right;
}

#header h1{
    
    color:#003772;
    line-height:65px;
}

#header h2 {
    font-size: 2.5rem;
}

.head-text{

  margin-bottom:0px;
  font-size:20px;
}


@media all and (max-width:1500px){


#title-container{

    max-width:500px;
}


}


@media all and (max-width:900px){


#title-container{  

    float:none;
}

}


@media all and (max-width:765px){


#title-container{

    padding:80px 0;
    float:none;
}


#accred-logo{
    
    display:block !1mportant;
    text-align:center;
    margin:40px auto;
}


#header h1{
    
    font-size:3em;
    line-height:45px;
}

}



@media all and (max-width:500px){


#title-container{

    padding:40px 0;
}

}


/* ==========================================================================
SVG
========================================================================== */


#svg-container{

    position: absolute;
    top: -100px;
	height: 125%;
    opacity:0.4;
}


/*FADE IN LIGHT SWIRLS ON BACKGROUND LOGO */

.swirl-light{

  fill:#147ec1;
  opacity:0;

  -webkit-animation: fadeInFromNone 1.7s ease-out;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: fadeInFromNone 1.7s ease-out;
    -moz-animation-fill-mode: forwards;
    -o-animation: fadeInFromNone 1.7s ease-out;
    -o-animation-fill-mode: forwards;
    animation: fadeInFromNone 1.7s ease-out;
    animation-fill-mode: forwards;
}

#light-swirl-1{

   -webkit-animation-delay:1s;
  -moz-animation-delay:1s;
  -o-animation-delay:1s;
  animation-delay:1s;
}

#light-swirl-2{

   -webkit-animation-delay:1.2s;
  -moz-animation-delay:1.2s;
  -o-animation-delay:1.2s;
  animation-delay:1.2s;
}

#light-swirl-3{

   -webkit-animation-delay:1.4s;
  -moz-animation-delay:1.4s;
  -o-animation-delay:1.4s;
  animation-delay:1.4s;
}

#light-swirl-4{

   -webkit-animation-delay:1.6s;
  -moz-animation-delay:1.6s;
  -o-animation-delay:1.6s;
  animation-delay:1.6s;
}



/*FADE IN DARK SWIRLS ON BACKGROUND LOGO */
.swirl-dark{

    fill:#003561;
    opacity:0;

    -webkit-animation: fadeInFromNone 1.7s ease-out;
    -webkit-animation-fill-mode: forwards;
    -moz-animation: fadeInFromNone 1.7s ease-out;
    -moz-animation-fill-mode: forwards;
    -o-animation: fadeInFromNone 1.7s ease-out;
    -o-animation-fill-mode: forwards;
    animation: fadeInFromNone 1.7s ease-out;
    animation-fill-mode: forwards;
}

#dark-swirl-1{

   -webkit-animation-delay:1.8s;
  -moz-animation-delay:1.8s;
  -o-animation-delay:1.8s;
  animation-delay:1.8s;
}

#dark-swirl-2{

   -webkit-animation-delay:2s;
  -moz-animation-delay:2s;
  -o-animation-delay:2s;
  animation-delay:2s;
}

#dark-swirl-3{

   -webkit-animation-delay:2.2s;
  -moz-animation-delay:2.2s;
  -o-animation-delay:2.2s;
  animation-delay:2.2s;
}

#dark-swirl-4{

   -webkit-animation-delay:2.4s;
  -moz-animation-delay:2.4s;
  -o-animation-delay:2.4s;
  animation-delay:2.4s;
}

#dark-swirl-5{

   -webkit-animation-delay:2.6s;
  -moz-animation-delay:2.6s;
  -o-animation-delay:2.6s;
  animation-delay:2.6s;
}

@-webkit-keyframes fadeInFromNone {
    0% {
       
        opacity: 0;
    }

    1% {
        
        opacity: 0;
    }

    100% {
        
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
       
        opacity: 0;
    }

    1% {
        
        opacity: 0;
    }

    100% {
        
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        
        opacity: 0;
    }

    1% {
        
        opacity: 0;
    }

    100% {
       
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        
        opacity: 0;
    }

    1% {
       
        opacity: 0;
    }

    100% {
        
        opacity: 1;
    }
}



/* ==========================================================================
LOGOS SECTIONS
========================================================================== */
#header-logos, #footer-logos{
    
    padding: 0px;
    text-align:center;
    background:#f8f9fa 
}


.logos-container img{
    
    display: inline-block;
    width:140px;
    margin:10px 25px
}

.large-30{
    
 
    width:150px !important;
   
}

.large-40{
    
   
    width:170px !important;
    
}


@media all and (max-width:700px){

.logos-container img{
    
    display: block;
    width:120px;
    margin:10px auto
}

.head-logos{

  padding-top:20px;
}

}



/* ==========================================================================
PRESENTATIONS
========================================================================== */
#presentations hr{

    border-top: 2px solid #0d77bd;
}

#mod-text{
  padding-top:42px;
}

.mod-img{

  border-radius:50%;
  width:100%;
  max-width:200px;
  margin:20px auto;
  border:4px solid #ffffff;
}


#pres-accordion{
    
    margin-top:60px;
    margin-bottom:60px;
    cursor:default;
}


#pres-accordion h4{
    color:#003772;
    font-size:1.3em;
    font-weight:300;
    line-height:1.4em;
}

#pres-accordion small{
    
    font-weight:300;
    color:#212529
}


.accordion-logo{
    
    margin: 10px auto;
    width:120px;
    float:left
}

.card{

    border-radius:0px;
    margin-top:20px;
    
}

.card-header{
    
    padding:10px 20px;
    border-top:0px;
    background-color:#f8f9fa !important;
    border-bottom:0px;
    text-align:left;
    
}



.card-body{
    
    text-align:left;
    padding:40px 60px;
    position:relative;
    background:#fff
    
}

.card-body:before {
    content: "";
    position: absolute;
   top: 0;
   border-top: 20px solid #f8f9fa !important;
   border-top-color: inherit; 
   border-left: 20px solid transparent;
   border-right: 20px solid transparent; 
    color:#f8f9fa ;
    left:0;
    right:0;
    margin:auto;
    width:20px;
}


.card-title{
    
    margin-top:-98px;
    padding-left:30px;
   
}


.speaker-link{

  cursor:pointer;
  border-bottom:2px solid #003772;
  -webkit-transition:all .3s ease;
  transition:all .3s ease;
}


.speaker-link:hover{

border-bottom:2px solid #61b5ed;

}


.add-margin{

  margin-top:22px;
}

.lower{
  margin-top:10px;
}


.info{

    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    right:0px;
    font-size:40px;
    color:#444 !important;
    float:right;
    -ms-transition:all .2s ease;
    -webkit-transition:all .2s ease;
    transition:all .2s ease;

}



.expand{

   -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari 3-8 */
    transform: rotate(90deg);
}


@media all and (max-width:1000px){
    
    .card-title{
    
    margin-top:20px
}
    
    .accordion-logo{
    
    width:100px;
    
}

.info{


    position:static; ;
    top: ;
    transform: ;
    right:;
    padding-top:20px;
    color:#444 !important;
    float:none;
    font-size:38px;
    margin-top:20px;
}

.card-title{

  margin-top:-10px;
}

#add-margin{

  margin-top:0px;
}

    
}






@media all and (max-width:800px){

.accordion-logo{
    
    width:80px;
    
}

.display-4{

    font-size:2.5em;
}


#pres-accordion h4{

  font-size:1em;
}


#mod-text{
  padding-top:40px;
}

    
}


@media all and (max-width:600px){

.accordion-logo{
    
    width:80px;
    
}

.display-4{

    font-size:2em;

}


#pres-accordion h4{

  font-size:1em;
  line-height:30px;
  line-height:1.4em;
}

.card-title{

  margin-top:-10px;
  text-align:left;
}

.mod-img{

  
  max-width:200px;
  margin:20px auto;
}
    
}


/* ==========================================================================
VENUES
========================================================================== */

.venue-container{
   padding: 0px;
   margin: 30px auto 0px auto;
   background-size:100%
   background-position:center;
   background-size:cover;
   cursor:pointer;
    min-height:170px;
  
}



.venue-text{
    
    padding:40px 30px
}


.venue-overlay{
    
    height:100%;
    width:100%;
    min-height:170px;
    background-color:rgba(0, 0, 0, 0.7);
    -webkit-transition: background-color .3s ease-in-out;
    -moz-transition: background-color .3s ease-in-out;
    -o-transition: background-color .3s ease-in-out;
    transition: background-color .3s ease-in-out;
}


.venue-container:hover .venue-overlay {
    
    background-color:rgba(0, 0, 0, .4);
}



.get-here{
    
    position: absolute;
    left:0;
    right:0;
    margin:auto;
    font-size:18px;
     -webkit-transition: font-size .4s ease-in-out;
    -moz-transition: font-size  .4s ease-in-out;
    -o-transition: font-size  .4s ease-in-out;
    transition: font-size  .4s ease-in-out;
}


.venue-container:hover .get-here{
    
    font-size:28px
}

.popup-venue{

  margin-bottom:40px;
}

.modal-image{
    
    width:100%;
    margin-top:10px;
}

.modal-venue{
    
    font-weight:700;
    margin-bottom:0;
}

.modal-dialog{
    
    max-width:900px;
}

.map{
    
    width:100%;
    height:395px;
}

.btn{
    padding: 12px 12px;
    background: #0d77bd;
    border:none;
    color:#fff !important;
    width:230px;
    background:#003772;
    border-radius:4px;
    font-size:20px;
}

.btn-small 
{margin: 0 .2rem;
    padding: .3rem 1rem;
    width: auto;
    font-size: 1rem;
    transition: all .3s ease
}


.btn:hover{

  color: #fff !important;
}

.btn-small:hover {
    color:#003772 !important;
    background:#fff;

}

.agenda-text{

  margin-top:20px;
}


.align-btn{

    margin-top:40px;
 
}


.modal-register{
    
    
    width:100%;
    margin-top:15px
    
        
}

.modal-close{
  width:100px;
}


.modal-header h4{
    
    line-height:1.2em;
    
}

.modal-header h4 small{
    
    color: #888 !important
    
}



@media all and (max-width:800px){


.align-btn{

    margin-top:40px;
    text-align: center;
}
}

/* ==========================================================================
ORGANISERS
========================================================================== */
.person-holder{
    
   height:180px;
    margin: 40px auto
}


.rounded{
    
    border-bottom: 5px solid #999;
    padding-bottom: 20px
}


#contact p{
    
    margin:0
}

/* ==========================================================================
contacts
========================================================================== */
.contacts{
    
    text-align:center;
    height:180px;
    margin: 40px auto;
    background:#0d77bd;
    padding:20px;
    color:white;
}

.contacts h4{
    
    font-size:20px
}

.make-table{
    
    display:table;
    margin-top:30px
}

.make-cell{
    
    display:table-cell;
    vertical-align: middle;
}

.contacts-web a{
    
    color:#61b5ed !important;
}

/* ==========================================================================
FOOTER
========================================================================== */

footer {
    padding-top: 80px;
    padding-bottom: 80px;
    color:#fff
}


footer p{
    
    color: #fff;
    font-weight:300;
}

footer a{

  color:#61b5ed !important;
  font-weight:400;
}



/* ==========================================================================
SPEAKER MODALS
========================================================================== */

.speaker-img{

  border-radius:50%;
  width:100%;
  max-width:240px;
  margin:20px auto;
}

.presentation-synopsis {
    min-height: 49px;
}

.presentation-synopsis.collapse:not(.show) {
    height: 49px !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
