*,:before,:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
* {-webkit-font-smoothing: antialiased;}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {margin: 0; padding: 0; border: 0; vertical-align: baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display: block;}
ol,ul {list-style: none;}
blockquote,q {quotes: none;}
blockquote:before,blockquote:after,q:before,q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}

html,button,input,select,textarea {font-family: Helvetica, Arial, sans-serif; font-size: 15px; color: #000;}
body {height: 100%; margin: 0 auto; font-size: 15px; line-height: 1.8;}
.no-js body {display: block;}

::-moz-selection {background: #b3d4fc; text-shadow: none;}
::selection {background: #b3d4fc; text-shadow: none;}

h1, h2, h3, h4, h5 {font-weight: normal;}

strong {font-weight: 700;}
em {font-style: italic;}

sup {vertical-align: super; font-size: 8px;}

hr {display: block; height: 1px; margin: 1em 0; padding: 0; border: 0; border-top: 1px solid #ccc;}
audio,canvas,img,video {vertical-align: middle;}
fieldset {border: 0; margin: 0; padding: 0;}
textarea {resize: vertical;}

.browsehappy {margin: .2em 0; padding: .2em 0; background: #ccc; color: #000;}

.clear {clear: both;}

a {color: #000; text-decoration: none; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s;}
a:hover {color: #164CA2; text-decoration: none;}

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

header {background: #FFF; border-bottom: 1px solid #ECECEC; box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 3px 1px; position: fixed; top: 0; left: 0; right: 0; z-index: 999;}
header .wrapper {height: 110px;}
header .logo {width: 200px; margin-top: 10px; float: left;}
header form {position: absolute; top: 10px; right: 0;}

nav {position: absolute; bottom: 10px; right: 0;}
nav .menubutton {display: none;}
nav ul li {float: left; position: relative;}
nav ul li a {margin: 0 25px; font-size: 13px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; float: left;}
nav ul li a span {display: block; width: 10px; height: 10px; position: relative; float: right;}
nav ul li a span:before {content: "\f123"; margin: 2px 0 0 5px; font-family: 'Ionicons'; font-size: 10px; -webkit-transition: transform 0.2s ease 0s; -moz-transition: transform 0.2s ease 0s; -o-transition: transform 0.2s ease 0s; transition: transform 0.2s ease 0s; position: absolute;}
nav ul li a span.rotate:before {transition: transform 300ms; transform: rotate(-180deg);}
nav ul ul {display: none; border-top: 2px solid #164CA2; box-shadow: rgba(0, 0, 0, 0.07) 0px 2px 4px 1px; position: absolute; top: 33px; left: 0;}
nav ul ul li {float: none;}
nav ul ul a {width: 190px; margin: 0; padding: 15px 40px 15px 20px; background: #FFF; border-bottom: 1px solid #DDD; font-family: 'PT Sans', sans-serif; font-weight: normal; text-transform: none; letter-spacing: 0;}

.searchsite .w-input {display: inline-block; width: auto; height: 24px; margin: 0; padding: 8px 7px; font-size: 12px; box-shadow: none;}
.searchsite .button {display: inline-block; padding: 5px 12px; font-size: 12px; box-shadow: none;}


.wrapper {width: 1130px; margin: 0 auto; position: relative;}

/* ==========================================================================
   BANNER
   ========================================================================== */

.banner-primary, .banner-primary .slide {width: 100%; height: calc(100vh - 111px - 56px);}
.banner-primary {margin-top: 111px; overflow: hidden; position: relative;}
.banner-primary .slide {display: none; background-repeat: no-repeat;  background-position: center center; background-size: cover;}
.banner-primary .slide:first-child {display: block;}

.banner-primary .wrapper {position: relative; top: 50%; -webkit-transform: translate(0px, -50%); -ms-transform: translate(0px, -50%); transform: translate(0px, -50%); overflow: hidden;}
.banner-primary .content.right {float: right;}

.banner-primary .content h2 {font-size: 56px; font-weight: 600; color: #164CA2; letter-spacing: 2px; line-height: 60px;}
.banner-primary .content h2.white {color: #FFF;}

.banner-primary .content a {display: inline-block; margin-top: 20px; padding: 15px 13px; background-color: #164CA2; border-radius: 3px; font-family: 'PT Sans', sans-serif; font-weight: bold; color: #FFF; text-transform: uppercase; -webkit-transition: all 400ms ease; transition: all 400ms ease;}
.banner-primary .content a:hover {background-color: #FFF; color: #164CA2;}

.banner-primary .prev, .banner-primary .next {display: block; width: 40px; height: 100%; position: absolute; top: 0; z-index: 99999;}
.banner-primary .prev {left: 0;}
.banner-primary .next {right: 0;}

.banner-primary .prev:before, .banner-primary .next:before {display: block; width: 40px; height: 90px; background-color: rgba(255, 255, 255, 0.70); font-family: 'Ionicons'; font-size: 24px; font-weight: bold; color: #164CA2; text-align: center; line-height: 90px; position: relative; top: 50%; -webkit-transform: translate(0px, -50%); -ms-transform: translate(0px, -50%); transform: translate(0px, -50%);}
.banner-primary .prev:before {border-radius: 0px 4px 4px 0px; content: "\f3d2";}
.banner-primary .next:before {border-radius: 4px 0px 0px 4px; content: "\f3d3";}


/* ==========================================================================
   PAGE
   ========================================================================== */

section {width: 100%; min-height: calc(100vh - 111px - 56px); margin: 111px 0 56px; background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; overflow: hidden;}

.full iframe {min-height: calc(100vh - 111px - 56px); margin: 0 0 -7px;}

.opaque-background {margin: 30px 0; padding: 30px; background: rgba(0, 0, 0, 0.4); color: #FFF;}

.opaque-background h1 {margin-bottom: 20px; font-size: 24px; font-weight: bold; color: #FFF;}
.opaque-background p {font-family: 'PT Sans', sans-serif; color: #FFF;}



/* ==========================================================================
   PAGE
   ========================================================================== */

.text-field {height: 46px; margin-bottom: 15px; border: 1px solid #ddd; box-shadow: rgba(180, 180, 180, 0.2) 0px 1px 2px 1px;}
.w-input, .w-select {display: block; width: 100%; height: 38px; margin-bottom: 10px; padding: 8px 12px; background-color: #ffffff; border: 1px solid #cccccc; font-size: 14px; line-height: 1.428571429; color: #555555; vertical-align: middle;}
button, html input[type="button"], input[type="reset"], input[type="submit"] {cursor: pointer; -webkit-appearance: button;}
.button {display: inline-block; margin-right: 6px; padding: 14px 23px; background-color: #164CA2; border: none; border-radius: 3px; color: white; font-size: 13px; font-weight: 600; text-align: center; letter-spacing: 1px; text-decoration: none!important; text-transform: uppercase; position: relative; overflow-x: hidden; overflow-y: hidden; -webkit-transition: all 400ms ease; transition: all 400ms ease;}
.button:hover {background: #FFF; color: #164CA2;}
textarea.w-input, textarea.w-select {height: auto;}

.opaque-background ul {margin-bottom: 10px; padding-left: 20px; list-style: disc inside;}
.opaque-background p {margin-bottom: 10px;}
.opaque-background p:last-child {margin-bottom: 0;}
.opaque-background a {color: #FFF; text-decoration: underline;}


/* ==========================================================================
   CALENDAR
   ========================================================================== */

.calendar-search {margin: 30px 0 40px;}

.calendar-search label {font-weight: bold;}
.calendar-search input[type="date"] {height: 28px; margin: 0 20px 10px 10px; padding: 8px 12px; background-color: #ffffff; border: 1px solid #cccccc; font-size: 13px; line-height: 1.428571429; color: #555555; vertical-align: middle;}
.calendar-search select {width: 130px; height: 28px; margin: 0 20px 10px 10px; padding: 8px 12px; background-color: #ffffff; border: 1px solid #cccccc; border-radius: 0; font-size: 13px; line-height: 1.428571429; color: #555555; vertical-align: middle;}

.calendar-search input[type="submit"] {display: inline-block; margin-right: 6px; padding: 6px 16px; background-color: #164CA2; border: none; border-radius: 3px; color: white; font-size: 13px; font-weight: 600; text-align: center; letter-spacing: 1px; text-decoration: none; text-transform: uppercase; position: relative; top: -3px; overflow-x: hidden; overflow-y: hidden; -webkit-transition: all 400ms ease; transition: all 400ms ease;}
.calendar-search input[type="submit"]:hover {background: #FFF; color: #164CA2;}


.calendar {width: 100%; color: #FFF; text-align: left;}
.calendar th {padding: 10px 8px; border-bottom: 2px solid #FFF;}
.calendar td {padding: 10px 8px; border-bottom: 1px solid #D3D3D3;}
.calendar td:first-child {width: 140px; text-align: right;}
.calendar td:nth-child(2) {width: 90px; text-align: right;}
.calendar td.date {background-color: rgba(255, 255, 255, 0.4); text-align: left;}

.calendar th:focus {outline:none;}
.calendar th span {width: 10px; height: 10px; margin-left: 10px; position: relative;}
.calendar th span:before {content: "\f0dc"; margin: 2px 0 0 5px; font-family: 'FontAwesome'; font-size: 10px; -webkit-transition: transform 0.2s ease 0s; -moz-transition: transform 0.2s ease 0s; -o-transition: transform 0.2s ease 0s; transition: transform 0.2s ease 0s; position: absolute;}
.calendar th.tablesorter-headerDesc span:before {content: '\f0dd';}
.calendar th.tablesorter-headerAsc span:before {content: '\f0de';}
.calendar th span.rotate:before {transition: transform 300ms; transform: rotate(-180deg);}


/* ==========================================================================
   NEWS
   ========================================================================== */

.article {margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #FFF; overflow: hidden;}
.article:last-child {margin-bottom: 0; padding-bottom: 0; border: none;}
.article h3 {text-transform: uppercase;}
.article a {color: #FFF;}
.article .date {display: block; margin-bottom: 20px;}
.article .button {margin-top: 20px; padding: 6px 14px; font-size: 11px;}

.media {width: 350px; margin: 0 0 30px 30px; position: relative; float: right;}
.media img {width: 350px;}
.media .cycle-pager {font-size: 32px; line-height: 30px; text-align: center; position: absolute; right: 0; bottom: 0; left: 0; z-index: 9999;}
.media .cycle-pager .cycle-pager-active, .media .cycle-pager span:hover {color: #333; cursor: pointer;}


/* ==========================================================================
   FAQs
   ========================================================================== */

.accordion-item {margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #FFF;}
.accordion-item:last-child {margin-bottom: 0; padding-bottom: 0; border: none;}
.question {cursor: pointer;}
.answer {margin-top: 10px;}


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

.videos-wrapper {overflow: hidden;}

.col-1-3 {width: 336px; margin: 0 30px 30px 0; float: left;}
.col-1-3:nth-child(3n + 3) {margin-right: 0;}
.video a.various {display: block; width: 100%; height: 190px; background-position: center; background-size: cover;}


/* ==========================================================================
   BLUE TALKS
   ========================================================================== */

.bluetalks-wrapper {overflow: hidden;}
.bluetalk {margin-bottom: 30px; overflow: hidden;}
.bluetalk a.various {display: block; width: 50%; height: 300px; background-position: center; background-size: cover; float: left;}
.bluetalk h3 {margin-bottom: 10px;}
.bluetalk .content {width: 50%;  padding-left: 30px; float: left;}


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

footer {width: 100%; height: 56px; position: fixed; bottom: 0;}

.top-footer {height: 0; padding: 10px 0 20px; border-top: 15px solid #555; background-color: #666; color: #EBEBEB; -webkit-transition: all 600ms ease-in-out; -moz-transition: all 600ms ease-in-out; -ms-transition: all 600ms ease-in-out; -o-transition: all 600ms ease-in-out; transition: all 600ms ease-in-out; position: fixed; left: 0px; right: 0px; bottom: 56px; opacity: 0; z-index: -1; overflow: hidden;}

footer:hover .top-footer {height: 170px; opacity: 1; z-index: 999;}

.top-footer .col-1-4 {width: 25%; float: left;}
.top-footer h3 {margin-bottom: 10px; font-size: 14px; font-weight: bold;}
.top-footer ul li a {color: #EBEBEB;}
.top-footer ul li a:hover {border-bottom: 1px solid #EBEBEB;}

.bottom-footer {height: 56px; padding: 18px; background-color: #333; font-family: 'PT Sans', sans-serif; font-weight: bold; color: #8B8B8B;}

.langs {margin-top: -5px; float: right;}
.langs a {display: block; width: 35px; height: 35px; margin-left: 8px; background-color: #ABABAB; border-bottom: 2px solid #121212; border-radius: 100%; font-family: 'Ionicons'; color: #2D2D2D; text-align: center; transition: all 400ms ease; float: left;}
.langs a:hover {background-color: #164CA2; color: #FFF;}
.langs a.facebook:before {content: '\f231'; font-size: 19px;}
.langs a.youtube:before {content: '\f24d'; font-size: 16px; line-height: 35px;}

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

@media only screen and (max-width: 1170px) {
    .wrapper {width: 890px;}
}

@media only screen and (max-width: 480px) {

    .wrapper {width: 86%;}

    header .wrapper {height: 70px; position: static;}
    header .logo {width: 120px;}

    nav {position: static;}
    nav .menubutton {display: block; width: 40px; height: 40px; text-align: center; line-height: 40px; position: absolute; top: 16px; right: 7%;}
    nav .menubutton.open {background-color: #164CA2; border-radius: 4px; color: #FFF;}
    nav ul {display: none; width: 100%; background-color: #F1F1F1; position: absolute; top: 70px; left: 0;}
    nav ul li {float: none;}
    nav ul li a {display: block; width: 100%; margin: 0; padding: 10px 7%; float: none;}
    nav ul ul {position: static;}

    .banner-primary {margin-top: 71px;}
    .banner-primary, .banner-primary .slide {height: calc(100vh - 71px - 56px);}
    .banner-primary .content.right {float: none;}
    .banner-primary .content h2 {font-size: 36px; line-height: 42px;}
    .banner-primary .prev, .banner-primary .next {display: none;}

    footer:hover .top-footer {height: 340px;}
    .top-footer .col-1-4 {width: 50%; padding: 0 30px 30px 0;}
    .top-footer .col-1-4:nth-child(2n + 2) {padding-right: 0;}
    .top-footer .col-1-4:nth-child(2n + 1) {clear: left;}
    .bottom-footer {padding: 18px 0;}

    section {height: calc(100vh - 71px - 56px); margin-top: 71px; background-attachment: initial; overflow-y: scroll;}


    .full iframe {min-height: calc(100vh - 71px - 56px);}

    .bluetalk a.various {width: 100%; height: 150px; padding: 0; float: none;}
    .bluetalk .content {width: 100%; margin-top: 20px; padding: 0; float: none;}

    .button.btn-blue-color {width: 100%!important; padding-right: 10px; padding-left: 10px;}

    .w-input, .w-select {width: 100%!important;}

    .calendar-search {text-align: left;}
    .calendar-search label {display: inline-block; width: 70px;}
    .calendar-search input[type="date"], .calendar-search select {width: 178px; margin-right: 0;}
    .calendar-search input[type="submit"] {margin-left: 84px;}

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {display: block;}
    thead tr {position: absolute; top: -9999px; left: -9999px;}
    tr {margin-bottom: 20px; border: 1px solid #ccc; border-bottom: 0;}
    td {width: 100%!important; padding-left: 50%; border: none; border-bottom: 1px solid #eee; text-align: right; position: relative;}
    td:before {width: 45%; padding-right: 10px; text-align: left; position: absolute; top: 6px; left: 6px; white-space: nowrap;}
    .date-header {display: none;}

    /* Label the data */
    td:nth-of-type(1):before { content: "Start Date"; }
    td:nth-of-type(2):before { content: "End Date"; }
    td:nth-of-type(3):before { content: "Activity"; }
    td:nth-of-type(4):before { content: "Location"; }
    td:nth-of-type(5):before { content: "Country"; }
    td:nth-of-type(6):before { content: "Partners"; }
    
    .calendar td {padding: 10px 8px 10px 70px;}

}



@media only screen and (max-width: 320px) {

    .banner-primary, .banner-primary .slide {height: 400px;}
    .banner-primary .content h2 {font-size: 28px; line-height: 34px;}
    .banner-primary .content a {padding: 8px; font-size: 11px}

}


@media print {
    * {background: transparent!important; color: #000!important; box-shadow: none!important; text-shadow: none!important;}
    a,a:visited {text-decoration: underline;}
    a[href]:after {content: " (" attr(href) ")";}
    abbr[title]:after {content: " (" attr(title) ")";}
    .ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after {content: "";}
    pre,blockquote {border: 1px solid #999; page-break-inside: avoid;}
    thead {display: table-header-group;}
    tr,img {page-break-inside: avoid;}
    img {max-width: 100%!important;}@    page {margin: .5cm;}
    p,h2,h3 {orphans: 3; widows: 3;}
    h2,h3 {page-break-after: avoid;}
}