/******
include root.css
**/
/*@import "root.css";*/

body{
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--bs-body-color);
}

.btn-primary{
  display: inline-block;
  border-radius: 42px;
  padding: 18px 50px 18px 70px;
  background: var(--bs-primary);
  color: var(--bs-white);
  font-weight: var(--vox-body-font-weight-extra-bold);
  border: none;
  position: relative;
  text-decoration: none;
  transition: .5s ease;
  font-size: 1.125rem;
  line-height: 1.5rem;
}

.btn-secondary{
  display: inline-block;
  margin-left: 20px;
  font-weight: var(--vox-body-font-weight-extra-bold);
  border: none;
  position: relative;
  transition: .5s ease;
  color: var(--bs-body-color);
  background: linear-gradient(to right, var(--bs-primary) 50%, var(--bs-primary) 50%);
  background-size: 100% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  padding-bottom: 3px;
  font-size: 1.125rem;
  line-height: 1.5rem;
}

.btn-external{
  display: inline-block;
  border-radius: 42px;
  padding: 18px 50px 18px 70px;
  background: var(--bs-primary);
  color: var(--bs-white);
  font-weight: var(--vox-body-font-weight-extra-bold);
  border: none;
  position: relative;
  text-decoration: none;
  transition: .5s ease;
  font-size: 1.125rem;
  line-height: 1.5rem;
}

.btn-external-secondary,
#main .btn-external-secondary{
  display: inline-block;
  margin-left: 25px;
  font-weight: var(--vox-body-font-weight-extra-bold);
  border: none;
  position: relative;
  transition: .5s ease;
  color: var(--bs-body-color);
  background: linear-gradient(to right, var(--bs-primary) 50%, var(--bs-primary) 50%);
  background-size: 100% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  padding: 0 0 3px 30px;
  font-size: 1.125rem;
  line-height: 1.5rem;
  text-decoration: none;
}

.link-external,
#main .link-external{
  padding-left: 25px;
  position: relative;
}

.link-external::before,
#main .link-external::before{
  display: block;
  content: '\f08e';
  font-family: 'Font Awesome 6 Pro';
  font-size: 1rem;
  line-height: 1rem;
  color: var(--bs-primary);
  position: absolute;
  top: 4px;
  left: 0;
  transition: .5s ease;
}

.caption{
	display: block;
	padding: 10px 40px 20px;
	border-bottom: 1px solid rgba(26, 24, 24, .09);
	font-size: var(--fs-caption);
	line-height: var(--lh-caption);
  color: var(--bs-black);
}

.quote{
  font-size: var(--fs-quote);
  line-height: var(--lh-quote); 
  font-weight: var(--vox-body-font-weight-semi-bold);
  font-style: italic;
  display: block;
  position: relative;
}

.subtitle1,
#main .subtitle1{
	display: block;
  margin: 0;
  font-weight: var(--vox-body-font-weight-extra-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);  
}

.subtitle2,
#main .subtitle2{
	display: block;
  margin: 0;	
  font-weight: var(--vox-body-font-weight-semi-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);  
}

.ut-btn-primary{
  display: inline-block;
  border-radius: 42px;
  padding: 18px 50px;
  background: var(--ut-primary);
  color: var(--bs-white);
  font-weight: var(--vox-body-font-weight-extra-bold);
  border: none;
  position: relative;
  text-decoration: none;
  transition: .5s ease;
  font-size: 1.125rem;
  line-height: 1.5rem;
}

.ut-btn-secondary{
   display: inline-block;
  margin-left: 20px;
  font-weight: var(--vox-body-font-weight-extra-bold);
  border: none;
  position: relative;
  transition: .5s ease;
  color: var(--bs-body-color);
  background: linear-gradient(to right, var(--ut-primary) 50%, var(--ut-primary) 50%);
  background-size: 100% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  padding: 3px 45px 3px 0;
  font-size: 1.125rem;
  line-height: 1.5rem; 
}

.ut-btn-external{}

.hightlight{
  background: var(--bs-pale-blue);
  padding: 60px;
  display: block;
}

@media(max-width:1000px){
  .hightlight{
    padding: 30px;
  }
}

.image-left{
    float: left;
    margin: 0 20px 20px 0;
}

.image-right{
    float: right;
    margin: 0 0 20px 20px;
}

@media(max-width:800px){
  .image-left,
  .image-right{
    float: none;
    margin: 0 0 20px 0;
    display: block;
  }
}