@import './nav-style.css';

:root {
  --primary-blue: #263F6A;
  --red: #753B37;
  --dark-gray: #404040;
  --light-gray: #707070;
  --light-blue: #63B1E5;
  --purple: #614D7D;

  --new-blue: #3a7fff;

  --sec-blue-hover: rgba(90, 109, 132, 1);

  --orange: #ed8936; /* button */
  --dark-orange: #c15521; /* button hover */

  --white: #fff;
  --black: #000;
}


html,
body {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

a {
  color: var(--primary-blue);
  transition: all 150ms ease;
  text-decoration: underline;
}

a:focus,
a:hover {
  color: var(--light-blue);
}

p,
li {
  color: var(--dark-gray);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.5;
}

p {
  margin-bottom: 1rem;
}


@media (max-width: 840px) {
  .container {
    padding: 0 1.5rem;
  }
}



/* BUTTON */
.btn-primary,
.btn-primary-filled {
  /*
  --text-opacity: 1;
  background-color: var(--orange);
  color: var(--white);
  border-radius: .25rem;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
  
  font-size: 1.3rem;
  padding: .5rem 2rem;
  margin-top: 1rem;
  text-decoration: none; */
  display: inline-block;
  --text-opacity: 1;
  background-color: transparent;
  border: 2px solid var(--new-blue);
  border-radius: 50px;
  color: var(--primary-blue);
  font-size: 20px;
  font-weight: 400;
  transition: all .2s ease;
  padding: 1rem 3rem;
  margin-top: 1rem;
  text-decoration: none;
}

.btn-primary:focus,
.btn-primary:hover,
.btn-primary-filled:focus,
.btn-primary-filled:hover {
  /* background-color: var(--dark-orange);
  color: var(--white);
  text-decoration: none; */
  background-color: var(--new-blue) !important;
  color: var(--white);
  text-decoration: none;
}

.btn-banner.btn-primary {
  color: var(--white) !important;
}


.btn-primary-filled {
  background-color: var(--new-blue);
  color: var(--white);
}

.btn-primary-filled:focus,
.btn-primary-filled:hover {
  background-color: var(--light-blue) !important;
  border: 2px solid var(--light-blue) !important;
  color: var(--white) !important;
  text-decoration: none;
}

.registration-btn a {
  display: inline-block;
  --text-opacity: 1;
  background-color: transparent;
  border: 2px solid var(--new-blue) !important;
  border-radius: 50px !important;
  color: var(--white) !important;
  font-size: 18px;
  font-weight: 400;
  transition: all .2s ease !important;
  padding: 0.75rem 1rem !important;
  text-decoration: none !important;
}

.registration-btn a:focus,
.registration-btn a:hover {
  background-color: var(--new-blue) !important;
  color: var(--white) !important;
  text-decoration: none;
}

.active .registration-btn a {
  color: var(--primary-blue) !important;
}

.active .registration-btn a:focus,
.active .registration-btn a:hover {
  color: var(--white) !important;
}

.osicon-navigation-mobile .registration-btn a {
  margin: 1rem;
  text-align: center;
}




.btn-secondary {
  display: inline-block;
  --text-opacity: 1;
  background-color: var(--primary-blue);
  border: 2px solid var(--primary-blue);
  border-radius: 50px;
  color: var(--white);
  font-size: 20px;
  font-weight: 400;
  transition: all .2s ease;
  padding: 1rem 3rem;
  margin-top: 1rem;
  text-decoration: none;
}

.btn-secondary:focus,
.btn-secondary:hover {
  background-color: var(--sec-blue-hover);
  border: 2px solid var(--sec-blue-hover);
  color: var(--white);
}







/* .rle_header_simple {
  position: fixed;
  z-index: 10;
}

.rle_header_simple .rle_nav {}

.rle_header_simple .rle_nav .rle_nav_left {}

.rle_header_simple .rle_nav .rle_nav_left a {
  font-size: 1rem;
  text-decoration: none;
}

.rle_header_simple .rle_nav .rle_nav_left a:focus,
.rle_header_simple .rle_nav .rle_nav_left a:hover {
  color: var(--light-blue);
}

.rle_header_simple .rle_nav .fas.fa-angle-double-right {
  color: var(--white);
}

.rle_header_simple .rle_nav a:focus .fas.fa-angle-double-right,
.rle_header_simple .rle_nav a:hover .fas.fa-angle-double-right {
  color: var(--light-blue);
}


.rle_header_simple .btn-primary {
  font-size: 1rem;
}


.rle_header_simple .rle_nav a.header-logo {
  font-size: 1.4rem;
  font-weight: 400;
}

@media (max-width:1040px)  {
  .rle_header_simple .rle_nav .rle_nav_left {
    display: none;
  }
} */


.header-navigation {
  background-color: var(--dark-gray); 
  z-index: 10;
}

.header-navigation .header-logo {
  color: var(--white);
  display: block;
  font-size: 1.4rem;
  margin-right: 1rem;
  text-decoration: none;
}

.header-navigation .nav-links {}

.header-navigation .nav-links li {
  display: inline-block;
}

.header-navigation .nav-links .nav-link,
.header-navigation .nav-links .menu-item a {
  color: var(--white);
  display: block;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  text-decoration: none;
}

.header-navigation .nav-links .nav-link:focus,
.header-navigation .nav-links .nav-link:hover,
.header-navigation .nav-links .menu-item a:focus,
.header-navigation .nav-links .menu-item a:hover {
  color: var(--light-blue);
  font-size: 1rem;
  text-decoration: none;
}

.header-navigation .nav-links .nav-link .fas.fa-angle-double-right,
.header-navigation .nav-links .menu-item a .fas.fa-angle-double-right {
  color: var(--white);
}

.header-navigation .nav-links .nav-link:focus .fas.fa-angle-double-right,
.header-navigation .nav-links .nav-link:hover .fas.fa-angle-double-right,
.header-navigation .nav-links .menu-item a:focus .fas.fa-angle-double-right,
.header-navigation .nav-links .menu-item a:hover .fas.fa-angle-double-right {
  color: var(--light-blue);
}

.header-navigation .btn-primary {
  font-size: 1rem;
  align-self: center;
  margin-top: 0;
}


.menu-button {
  display: block;
  font-size: 2rem;
  cursor: pointer;
  color: var(--white);
  line-height: 0;
  margin-left: 1rem;
  /* padding: 0.5rem; */
  transition: all 150ms ease;
  
  height: 42px;
  width: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu-button:hover,
.menu-button:focus {
  color: var(--light-blue);
}

.menu-button {
  display: none;
}

.menu-button .fa-bars {
  display: block;
}

.menu-button .fa-times {
  display: none;
}

.menu-button.is-active .fa-bars {
  display: none;
}

.menu-button.is-active .fa-times {
  display: block;
}


@media (max-width:1040px)  {
  .header-navigation .nav-links {
    /* display: none; */
    background-color: var(--dark-gray);
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    
  }

  .header-navigation .nav-links {
    height: 0;
    opacity: 0;
    overflow: hidden;
    display: none;
    transition: all 250ms ease;
  }

  .header-navigation .nav-links.is-active {
    height: auto;
    
    opacity: 1;
    overflow: hidden;
    display: block;
  }


  .header-navigation .nav-links li {
    display: block;
    width: 100%;
  }

  .header-navigation .nav-link {
    padding: 1rem;
  }

  .header-navigation .nav-link:focus,
  .header-navigation .nav-link:hover {
    background-color: var(--light-blue);
    color: var(--dark-gray);
    font-weight: 600;
  }

  .header-navigation .nav-link:focus .fas.fa-angle-double-right,
  .header-navigation .nav-link:hover .fas.fa-angle-double-right {
    color: var(--dark-gray);
  }

  .menu-button {
    display: flex;
    justify-content: center;
    align-items: center;
  }

}



/* --------------------------------------------- 
  HERO BANNER 
 --------------------------------------------- */

.hero-container {
  /* background-image: url("/wp-content/uploads/2022/10/osicon-banner-2022.jpg"); */
  background-size: cover;
  background-position: 50% 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 65vh;
  min-height: 800px;
}

.logo-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 0;
}

.overlay-color {
  background: rgb(2,0,36);
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(104,5,177,1) 62%, rgba(156,0,255,1) 100%);
  opacity: 0.75;
  position: absolute;
  
  height: 100%;
  width: 100%;
  z-index: 0;
}

.logo-container {
  position: relative;
  z-index: 2;
}

.osicon-logo {
  font-family: "Open Sans", sans-serif;
  color: var(--white);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: start;
  align-items: center;
  position: relative;
  min-height: 95px;
}
.osicon-logo .text {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  max-width: 500px;
}
.osicon-logo .title {
  font-size: 124px;
  font-weight: 100;
  margin-right: 1.5rem;
  text-transform: uppercase;
  line-height: 0.65;
  width: 100%;
}
.osicon-logo .title strong {
  font-weight: 600;
}
.osicon-logo .subtitle {
  /* position: absolute; */
  /* bottom: 0; */
  /* left: 2px; */
  /* font-size: 17.25px; */
  font-size: 20.2px;
  text-transform: uppercase;
  margin-top: 1.4rem;
  margin-left: 0.4rem;
  line-height: 1.4;
  /* width: 100%; */
}
.osicon-logo .year {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  font-weight: 200;
}
.osicon-logo .year span {
  background: var(--white);
  box-sizing: border-box;
  color: var(--black);
  font-weight: 500;
  /* padding: 0.1rem 0.2rem; */
  padding: 0.1rem 0.4rem;
  /* font-size: 1.85rem; */
  font-size: 2.45rem;
  margin: 0 0.25rem 0.25rem 0;
  width: calc(50% - 0.25rem);
  text-align: center;
}





.banner-title,
.banner-subtitle {
  color: var(--white);
  font-family: "Open Sans", sans-serif;
  font-weight: 200;
  text-align: center;
  margin: 1rem 0;
  width: 100%;
}

.banner-title {
  font-size: 64px;
  margin-top: 2rem;
  text-transform: uppercase;
}

.banner-subtitle {
  font-size: 32px;
}


@media (max-width: 1000px) {

  .osicon-logo .text {
    /* max-width: 350px; */
    justify-content: center;
    text-align: center;
    margin-right: 0;
  }
  .osicon-logo .title {
    font-size: 88px;
  }
  .osicon-logo .subtitle {
    font-size: 14.2px;
    margin-left: 0;
  }
}




@media (max-width: 760px) {
  .banner-title {
    font-size: 7vw;
  }

  .banner-subtitle {
    font-size: 5vw;
  }
}


@media (max-width: 640px) {

  .hero-container {
    padding-top: 64px;
    padding-bottom: 64px;
    min-height: 800px;
  }

  .osicon-logo {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
    text-align: center;
  }

  .osicon-logo .title {
    font-size: calc(16vw - 10px);
    margin-right: 0;
  }

  .osicon-logo .text {
    padding: 1rem;
  }

  .osicon-logo .year {
    margin-top: 1rem;
    width: 100%;
    max-width: 300px;
  }

  .osicon-logo .year span {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    padding: 0.75rem;
    width: calc(25% - 0.25rem);
  }
}


/* --------------------------------------------- 
  JOIN US 
 --------------------------------------------- */



/* --------------------------------------------- 
  WHAT TO EXPECT 
 --------------------------------------------- */



/* --------------------------------------------- 
  AGENDA 
 --------------------------------------------- */
 .agenda-wrapper {}
  
 .agenda-item {
   background-color: rgba(0, 0, 0, 0);
   padding: 1rem;
   font-size: 1.15rem;
   font-weight: 400;
 }

 .agenda-item:nth-child(odd) {
   background-color: rgba(0, 0, 0, 0.4);
 }

 .agenda-item-date {}

 .agenda-item-description {}



/* --------------------------------------------- 
  FAQ 
 --------------------------------------------- */
.faq-wrapper {
  margin-bottom: 2rem;
}

.faq-question {
  color: var(--dark-gray);
  font-weight: 400;
  font-size: 1.8rem;
  cursor: pointer;
  position: relative;
  margin-bottom: 1rem;
  padding-right: 1rem;
}

.faq-hidden {
  display: none;
}

.faq-question:after {
  content: "\002B";
  font-size: 42px;
  line-height: 1;
  color: var(--primary-blue);
  /* float: right; */
  line-height: 0;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.faq-question.faq-open:after {
  content: "\2212";
}

.faq-answer {
  color: var(--light-gray);
  font-size: 24px;
  font-weight: 300;
  padding: 0 1rem;
  margin-bottom: 1rem;
}



/* --------------------------------------------- 
  TEXT 
 --------------------------------------------- */

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white li {
  color: var(--white);
}


/* TURN OFF ODD HOVER EVENT */
section {
  outline: none !important;
}



/* --------------------------------------------- 
  FOOTER 
 --------------------------------------------- */
.rle_footer {
background-color: var(--dark-gray);
}

.rle_footer_text_left,
.rle_footer_text_right {
	float: left;
	position: relative;
	width: 50%;
	top: 50%;
	transform: translateY(-50%);
	font-size: .8em;
}

@media (max-width: 640px) {
  .rle_footer_text_left,
  .rle_footer_text_right {
    margin-bottom: 1rem;
    width: 100%;
    text-align: center;
  }
}