@charset "UTF-8";
/* CSS Document */
@font-face {
    font-family: 'admisi_display_ssiregular';
    src: url('fonts/admisi_display_ssi-webfont.eot');
    src: url('fonts/admisi_display_ssi-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/admisi_display_ssi-webfont.woff2') format('woff2'),
         url('fonts/admisi_display_ssi-webfont.woff') format('woff'),
         url('fonts/admisi_display_ssi-webfont.ttf') format('truetype'),
         url('fonts/admisi_display_ssi-webfont.svg#admisi_display_ssiregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'futon-bold';
    src: url('fonts/futon-bold-webfont.eot');
    src: url('fonts/futon-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/futon-bold-webfont.woff2') format('woff2'),
         url('fonts/futon-bold-webfont.woff') format('woff'),
         url('fonts/futon-bold-webfont.ttf') format('truetype'),
         url('fonts/futon-bold-webfont.svg#futon-boldbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'futon-mediumregular';
    src: url('fonts/futon-medium-webfont.eot');
    src: url('fonts/futon-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/futon-medium-webfont.woff2') format('woff2'),
         url('fonts/futon-medium-webfont.woff') format('woff'),
         url('fonts/futon-medium-webfont.ttf') format('truetype'),
         url('fonts/futon-medium-webfont.svg#futon-mediumregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'korolevw01-lightregular';
    src: url('fonts/korolev_w01_light-webfont.eot');
    src: url('fonts/korolev_w01_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/korolev_w01_light-webfont.woff2') format('woff2'),
         url('fonts/korolev_w01_light-webfont.woff') format('woff'),
         url('fonts/korolev_w01_light-webfont.ttf') format('truetype'),
         url('fonts/korolev_w01_light-webfont.svg#korolevw01-lightregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
#hero-image-map { height:100%;width:auto;max-height:720px;}
video {
  width:100%;
  height:100%;
}
html, body {
  height:100%;
  color:#fff;
}
.social-container {
	position:absolute;
	top:64px;
	right:40px;
}
.social-container a:link,.social-container a:visited {font-size: 1.5em;color:#fff;margin:0 0 0 5px;}
.social-container a:hover,.social-container a:active { color:#0d74ad;}
.social-container a.non-icon:link,.social-container a.non-icon:visited {font-size: 1em;text-decoration: none;color:#fff;}
.social-container a.non-icon:hover,.social-container a.non-icon:active {color:#0d74ad;}
.video-container {position: relative;padding-bottom: 56.25%;padding-top: 30px; height: 0; overflow: hidden;margin:0 0 25px 0;}
.video-container iframe,.video-container object,.video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
a.downloadbtn:link,a.downloadbtn:visited { background:#3877AB;padding:5px 15px;display:inline-block;color:#fff;text-decoration:none;font-size:1em;}
a.downloadbtn:hover,a.downloadbtn:active { background:#F4E532;}
.visually-hidden {
  height:0;
  overflow:hidden;
}

.site-contain {
  float:left;
  width:100%;
  height:auto;
  position:relative;
  min-height:100%;
}

body {
  margin:0;
  padding:0;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 21px;
  float:left;
  width:100%;
  position:relative;
  background-image: -webkit-gradient(
	linear,
	left top,
	right top,
	color-stop(0, #E44E71),
	color-stop(1, #D7A25C)
  );
  background-image: -o-linear-gradient(right, #E44E71 0%, #D7A25C 100%);
  background-image: -moz-linear-gradient(right, #E44E71 0%, #D7A25C 100%);
  background-image: -webkit-linear-gradient(right, #E44E71 0%, #D7A25C 100%);
  background-image: -ms-linear-gradient(right, #E44E71 0%, #D7A25C 100%);
  background-image: linear-gradient(to right, #E44E71 0%, #D7A25C 100%);
  background-attachment: fixed;
}

*, *:before, *:after {
  box-sizing: border-box;
}

.row {
  float:left;
  width:100%;
}

.marg {
  margin:0 -10px;
}

.half {
  float:left;
  width:50%;
  padding:0 10px;
  margin:0 0 20px;
}

.half img {
  max-width:100%;
  float:left;alignment-baseline: 
}

.inner {
  margin:0 auto;
  width:1400px;
  max-width:100%;
}

.top-bar {
  padding:30px 20px;
  position:relative;
  z-index:2000;
}

.logo, .logo img {
  float:left;
	-webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.menu {
  float:left;
  margin:30px 0 0 100px;
}

.menu ul, .cats-nav ul {
  list-style:none;
  margin:0;
  padding:0;
}

.menu ul li, .cats-nav ul li {
  float:left;
  margin:0 30px 0 0;
}

.cats-nav ul li {
  float:left;
  margin:0 30px 10px 0;
}

.menu ul li a, .cats-nav ul li a {
  color:#fff;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height:18px;
  letter-spacing: 2px;
  float:left;
  position:relative;
  overflow-y:hidden;
  padding:0 10px 0 0;
	-webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.menu ul li a span, .cats-nav ul li a span {
  position:relative;
  z-index:2;
  padding:7px 3px 7px 7px;
  display:inline-block;
	-webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.menu ul li a:hover span, .menu ul li a.current span, .cats-nav ul li a:hover span, .cats-nav ul li a.current span {
  background-image: -webkit-gradient(
	linear,
	left top,
	right top,
	color-stop(0, #336EA5),
	color-stop(1, #3877AB)
  );
  background-image: -o-linear-gradient(right, #336EA5 0%, #3877AB 100%);
  background-image: -moz-linear-gradient(right, #336EA5 0%, #3877AB 100%);
  background-image: -webkit-linear-gradient(right, #336EA5 0%, #3877AB 100%);
  background-image: -ms-linear-gradient(right, #336EA5 0%, #3877AB 100%);
  background-image: linear-gradient(to right, #336EA5 0%, #3877AB 100%);
	-webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.menu ul li a:hover:after, .menu ul li a.current:after, .cats-nav ul li a:hover:after, .cats-nav ul li a.current:after {
  content: '';
    position: absolute;
    left: 100%;
    margin-left: -17px;
    top: -5%;
    height: 110%;
    width: 9px;
    background-color: #3877AB;
    transform: rotate(8deg);
    z-index: 1;
	-webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

h1 {
  font-family: 'admisi_display_ssiregular';
  color:#F4E532;
  font-size:45px;
  line-height:47px;
  letter-spacing:3px;
  margin:0 0 20px;
}

#mobile-menu {
  position:fixed;
  top:0;
  left:0;
  float:left;
  width:100%;
  z-index:-1;
  height:0;
  overflow:hidden;
  display:none;
  background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, #0D6EAA),
	color-stop(0.98, #186C96)
  );
  background-image: -o-linear-gradient(180deg, #0D6EAA 0%, #186C96 98.65%);
  background-image: -moz-linear-gradient(180deg, #0D6EAA 0%, #186C96 98.65%);
  background-image: -webkit-linear-gradient(180deg, #0D6EAA 0%, #186C96 98.65%);
  background-image: -ms-linear-gradient(180deg, #0D6EAA 0%, #186C96 98.65%);
  background-image: linear-gradient(180deg, #0D6EAA 0%, #186C96 98.65%);
}

#mobile-menu-inner {
  width:100%;
  display:table;
  height:100%;
  vertical-align: middle;
}

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

#mobile-menu ul {
  margin:0;
  padding:0;
  list-style: none;
}

#mobile-menu ul li {
  float:left;
  width:100%;
  text-align: center;
  margin:15px 0;
}

#mobile-menu ul li a {
  color:#fff;
  text-decoration: none;
  font-size:28px;
  font-weight:500;
}

.main-content {
  padding:70px 0 40px; 
  position:relative;
  z-index:2000;
}

.resource, .faq {
  float:left;
  width:calc(100% + 20px);
  height:auto;
  padding:20px;
  border-bottom:1px solid rgba(255, 255, 255, 0.4);
  color:#fff;
  text-align: left;
  margin:0 -20px;
}

.faq {
  padding:0;
}

.shares {
  margin:70px 0 0;
}
/*input.blockquote {background:#fff;border-radius: 15px;border:2px solid #f2f2f2;font-size:18px;padding:20px;margin:0 0 5px 0;width:100%;opacity:0;height:2px;}
*/
input.blockquote {background:#fff;border:none;font-size:2px;padding:0px;margin:0;width:10px;opacity:0;height:2px;}
button.copytextbtn {border:none;padding:5px 15px;background:#6795b7;color:#fff;border-radius: 5px;float:left;}
.captionarea {background:#f2f2f2;padding:10px 10px 30px 10px;margin:0 0 25px 0;border-radius: 15px;max-width: 906px;}
.captionarea p {color:#000;}
.captionarea a:link, .captionarea a:visited {color:#000;}
.copiedfeedback {font-size:12px; color:#555;float:left;margin:0 0 0 10px;padding:8px;}

.resource h2, .faq h2 {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 21px;
  color:#F4E532;
}

.resource h2 a {
  color:#F4E532;
  text-decoration:none;
}

.contain-half {
  width:50%;
  float: left;
  clear: both;
}

.img-dls a:hover img {
  opacity:0.8;
}

.bx-viewport, .bx-wrapper {
    position: relative;
    width: 100%;
    height: 100% !important;
    top: 0;
    left: 0;
}

.splash-inner, .splash, #splash {
  position:absolute;
  bottom:0;
  right:0;
  float:left;
  height:100%;
  width:100% !important;
}

#splash {
  position:fixed;
}

.splash-inner {
  position:fixed;
}

.splash-slide {
  height:100% !important;
  width:100% !important;
  float:left;
}

.bx-pager {
  position:absolute;
  bottom:100px;
  width:auto;
  float:left;
  left:50%;
  text-align: center;
  z-index:2001;
  transform: translateX(-50%);
}

.bx-pager-item {
  display:inline-block;
  margin:0 7px;
  vertical-align: middle;
}

.bx-pager a {
  font-size:0;
  display:inline-block;
  width:15px;
  height:15px;
  background-color: #fff;
  border-radius:50%;
  vertical-align: middle;
}

.bx-pager a.active {
  background-color: transparent;
  border:2px solid #fff;
}

.splash-inner img, .splash img {
  max-width:50%;
  float:right;
  max-height:90%;
  position:absolute;
  right:0;
  bottom:0;
}

.faq .chev {
  float:right;
  position:absolute;
  right:0px;
  top:15px;
}

.faq-title {
  position:relative;
  float:left;
  width:100%;
  cursor:pointer;
  padding:5px 20px;
}

.faq-answer {
  padding:0 20px 15px;
  float:left;
  width:100%;
  display:none;
  text-align: left;
}

.faq-answer ul {
  margin-left:0;
  padding-left:17px;
}

.faq-answer a {
  color:#fff;
}

.faq-title i {
  float:left;
  width:9px;
  height:2px;
  background-color:#F4E532;
}

.faq-title i.chev-line-right {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg); 
  position:relative;
  left:-1.5px;
	-webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.faq-title.active i.chev-line-right {
  position:relative;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg); 
	-webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.faq-title i.chev-line-left {
  position:relative;
  left:1.5px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg); 
	-webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.faq-title.active i.chev-line-left {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg); 
	-webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

#cats2 {
  display:none;
}

.cats-nav {
  margin:0 0 70px 0;
}

#model2, #model4, #model3 {
  opacity:0;
	-webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

#model2.active, #model4.active {
  opacity:1;
	-webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

#model3 {
	-webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

#model3.active {
  opacity:1;
	-webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.home-area {
  position:absolute;
  top:0;
  left:0;
  float:left;
  width:100%;
  height:100%;
  padding-top:180px;
  z-index:1999;
}

.home-area .inner, .home-area .contain-half {
  position:relative;
  height:100%;
}

.home-area .contain-half {
  width:100%;
}

.hiv-today {    
  max-width: 100%;
  float: left;
  width: auto !important;
  max-height: 85%;
}

.contain-half p a, h2 a {
  text-decoration: underline;
  color:#fff;
}

.home h2 {
  float:left;
  width:100%;
  color:#F4E532;
  font-size:45px;
  letter-spacing:1px;
  font-family: 'korolevw01-lightregular';
  font-weight:400;
}

h2 {
  line-height:1.225;
}

.resources h2, .share h2 {
  margin:0 0 30px;  
}

.home-content {
  width: 430px;
  float: left;
  padding: 0px 135px 0px 0px;
  position:relative;
  overflow-y:hidden;
  margin:0 0 20px;
}

.home-content span  {
  padding:40px 10px 40px 40px;
  float:left;
  background-image: -webkit-gradient(
	linear,
	left top,
	right top,
	color-stop(0, #336EA5),
	color-stop(1, #3877AB)
  );
  background-image: -o-linear-gradient(right, #336EA5 0%, #3877AB 100%);
  background-image: -moz-linear-gradient(right, #336EA5 0%, #3877AB 100%);
  background-image: -webkit-linear-gradient(right, #336EA5 0%, #3877AB 100%);
  background-image: -ms-linear-gradient(right, #336EA5 0%, #3877AB 100%);
  background-image: linear-gradient(to right, #336EA5 0%, #3877AB 100%);
  position:relative;
  z-index: 2;
  font-size:20px;
  line-height:27px;
}

.home-content:after {
    content: '';
    position: absolute;
    left: 100%;
    margin-left: -215px;
    top: -50%;
    height: 200%;
    width: 140px;
    background-color: #3877AB;
    transform: rotate(28deg);
    z-index: 1;
}

.home-content i {
 font-style:normal; 
 font-family: 'futon-bold';
  color:#F4E532;
  font-size:30px;
  letter-spacing:3px;
}

.home-content .clear {
  position:relative;
  float:left;
  height:25px;
  width:100%;
}

.home-content .clear:after { 
  content:'';
  float:left;
  top:50%;
  left:15%;
  height:1px;
  width:40%;
  background-color: #fff;
  transform:translate(0, -50%);
  position:absolute;
}
  
.yellow-button {
  float:left;
  background-color: #F4E532;
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 16px;
  color: #0D7AB0;
  text-decoration: none;
  padding: 13px 38px;
}

.yellow-border-button {
    float: left;
    padding-right: 10px;
    position: relative;
    overflow-y: hidden;
    text-decoration: none;
  margin:0 0 0 15px;
}

.yellow-border-button span:before {
  position:absolute;
  top:0;
  left:20px;
  width:2px;
  height:100%;
  background-color: #F4E532;
  content:'';
  transform: skew(26deg);
   -webkit-transform: skew(26deg);
   -moz-transform: skew(26deg);
   -o-transform: skew(26deg);
}

.yellow-border-button span i {
 font-style: normal; 
  transform: skew(26deg);
   -webkit-transform: skew(26deg);
   -moz-transform: skew(26deg);
   -o-transform: skew(26deg);
  display:inline-block;
}

.yellow-border-button span {
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    color: #F4E532;
    text-decoration: none;
    padding: 11px 42px 11px 60px;
    float: left;
   position:relative;
   z-index:2;
  color:#F4E532;
    margin-left:-20px;
  transform: skew(-26deg);
   -webkit-transform: skew(-26deg);
   -moz-transform: skew(-26deg);
   -o-transform: skew(-26deg);
   border-top:2px solid #F4E532;
   border-bottom:2px solid #F4E532;
   border-right:2.5px solid #F4E532;
}

.yellow-border-button:hover span {
  background-color: #F4E532;
  color:#0D7AB0;
}

.buttons {
 margin:25px 0 0; 
}

#mobile-menu-icon {
  display:none;
  width: 35px;
  height: 15px;
  position: absolute;
  z-index:100001;
  top:40px;
  right:20px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#mobile-menu-icon span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #0D7AB0;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#mobile-menu-icon span:nth-child(1) {
  top: 0px;
}

#mobile-menu-icon span:nth-child(2),#mobile-menu-icon span:nth-child(3) {
  top: 6px;
}

#mobile-menu-icon span:nth-child(4) {
  top: 12px;
}

#mobile-menu-icon.open span:nth-child(1) {
  top: 6px;
  width: 0%;
  left: 50%;
}

#mobile-menu-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color: #fff;
}

#mobile-menu-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  background-color: #fff;
}

#mobile-menu-icon.open span:nth-child(4) {
  top: 6px;
  width: 0%;
  left: 50%;
}

@media(max-width:1440px) {
.inner {
  padding:0 20px;
}
.resource {
  float:left;
  width:100%;
  margin:0;
  padding:20px 0;
}
.top-bar {
  padding:30px 0px;
}
.faq {
  margin:0 0;
  width:100%;
}
}
@media(max-width:720px) {
#hero-image-map { width:80%;height:auto;}
.social-container {
	position:absolute;
	top:34px;
	right:70px;
}
	
}

@media(max-width:720px) {
.hiv-today {    
  max-width: 80%;
}
.main-content {
  padding: 27.3px 0 40px;
}
.splash-inner img, .splash img {
  max-width:85%;
}
.home-area {
  padding-top:120px;
}
.yellow-border-button {
  clear:both;
  margin:15px 0 0;
}
.bx-pager {
  position:absolute;
  bottom:auto;
  top:50%;
  width:21px;
  float:left;
  left:auto;
  right:15px;
  transform: translateY(-50%);
  text-align: center;
  z-index:2001;
}
#mobile-menu {
  z-index:10000;
  height:100%;
  overflow:auto;
}
#mobile-menu-icon {
  display:block;
}
.home-content {
  width:90%;
  padding-right:200px;
}
.home-content:after {
  margin-left: -295px;
}
.home-content i {
  font-size:22px;
}
.home-content span {
  font-size: 16px;
  line-height: 19px;
  padding:40px 0 40px 20px;
}
.menu {
  display:none;
}
.top-bar {
  padding:15px 0px;
}
.contain-half {
  width:100%;
}
.splash-inner, .splash-inner img {
  position:static;
}
#model2 {
  position:absolute;
}
.splash-inner img {
  max-width:80%;
}
.logo img {
  width:75px;
}
}