/*
Theme Name: UAP Live v3
Theme URI:
Author: Astir Agency
Author URI: http://weareastir.com
Description: Universal Access Project
Version: 3.0.3
License: GNU General Public License
License URI: see license.txt
Twitter Bootstrap
*/
/*
Introduction of proper CSS imports per modified section.
- CF
*/
/* Import the Fonts from TypeKit - on Futuremans Account Currently */
@import url("https://use.typekit.net/yqx3ilw.css");
/*
Pages influences by this template are:
- What We Do
- The Facts
*/
@import "css/pages/page-template-full.css";
/* Import page specific styles */
@import "css/pages/our-partners.css";
@import "css/pages/global-voices.css";
@import "css/pages/our-team.css";
@import "css/pages/news-updates.css";
@import "css/pages/locations.css";
/* Import partial specific styles */
@import "css/partials/footer.css";
@import "css/partials/bottom-links.css";
/* FACT LIST */
.factslist li {width: 33.3333%; float: left;}
.factslist li:nth-child(3n+1) {clear: both;}
.factslist.twocol li {width: 50%; float: left;}
.factslist.twocol li:nth-child(3n+1) {clear: none;}
.factslist.twocol li:nth-child(2n+1) {clear: both;}
.factslist.twocol .top a , .factslist.twocol .top, .factslist.twocol .top .overlay {height: 300px;}
.partners-home {
color: #388089;
font-size: 56px;
}
.partners .wwm_socialshare_imagewrapper {
pointer-events: none;
}
.single-logo-container .wwm_social_share.wwm_bottom_left {
opacity: 0;
pointer-events: none;
}
.rt-wpls .single-logo img {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.rt-wpls .slick-next {
right: 0;
z-index: 100;
}
.rt-wpls .slick-prev {
left: 0;
z-index: 100;
}
/* My Minimal WordPress Styling comes here */
/* This is a small security for too long strings titles */
body {
word-wrap: break-word;
font-family: "proxima-nova";
font-size: 14px;
max-width: 100vw;
overflow-x: hidden
}
body.home {background-color: #fff;}
a {color: #388089;}
.main-content > .container {padding-bottom: 0; max-width: 100vw;
overflow-x: hidden}
/* Alignment */
.alignleft {
display: inline;
float: left;
margin-right: 1.5em;
}
.alignright {
display: inline;
float: right;
margin-left: 1.5em;
}
.aligncenter {
clear: both;
display: block;
margin: 0 auto;
text-align:center;
}
h1, h2, h3 {font-family: "garamond-premier-pro-display"; letter-spacing: 0.0625em; font-style: normal; font-weight:600; margin-top: 0px;}
h1.big {font-size: 36px; margin-bottom:0;}
/* Images and wp-captions should always fit and be responsive */
img {
display: inline-block;
height: auto;
max-width: 100%;
}
img[class*="wp-image-"] {
margin-top: 10px;
margin-bottom: 10px;
}
.wp-caption {
border: 1px solid #ccc;
margin-bottom: 10px;
max-width: 100%;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0 10px;
}
.wp-caption.aligncenter {
margin-bottom: 10px;
}
.wp-caption img[class*="wp-image-"] {
display: block;
}
.wp-caption .wp-caption-text {
text-align: center;
margin-top: 10px;
}
/* WP Gallery */
.gallery {
margin-bottom: 1.5em;
}
.gallery a img {
border: none;
height: auto;
max-width: 90%;
}
.gallery dd {
margin: 0;
}
/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
max-width: 100%;
}
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden
}
.embed-responsive .embed-responsive-item, .embed-responsive embed,
.embed-responsive iframe, .embed-responsive object, .embed-responsive video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0
}
.embed-responsive-16by9 {
padding-bottom: 56.25%
}
.embed-responsive-4by3 {
padding-bottom: 75%
}
/* Text meant only for screen readers */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
}
.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #21759b;
display: block;
font-size: 14px;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; /* Above WP toolbar */
}
/* Content */
.main-content-inner {
padding-bottom: 1.5em;
margin-bottom: -1px;
overflow: hidden;
}
.home .main-content-inner {
padding-bottom: 7em;
padding-top: 8em;
text-align: center;
}
.home .main-content-inner h1 {font-size: 38px; margin-bottom : 1em;}
.hentry {
margin: 0 0 1.5em;
}
/* Clearing */
.clear {
clear: both;
}
/* Here some needed widget styles
* Most widgets are adapted in the file bootstrap-wp.js - and REALLY easy to modify! ;) */
.widget { margin-bottom: 2em; }
.widget_nav_menu ul.sub-menu li, .widget_pages ul.children li { padding-left: 15px; }
/* Hiding the search widget's button in widgets. thats just too old-skool. :) but if you want it back, just delete the next line.
* Note: you can change the whole appearance of the search_form() function in our searchform.php */
.widget_search .search-form input[type="submit"] { display: none; }
/* Make sure select elements fit in widgets */
.widget select {
max-width: 100%;
}
/* Nested comments? They are threaded and nested already, you just need to add your own styling to finalize!
* For example with some margin, like the line below ;) Delete, modify, change classes in HTML if you desire another style */
.comment .children { margin-left: 1.5em; }
/*GENERAL */
.light {font-weight: 300;}
.normal {font-weight: 400;}
.semibold {font-weight: 600;}
.italic {font-style: italic;}
.margintop {margin-top: 30px !important;}
.marginbottom {margin-bottom: 30px !important;}
.marginleft {margin-left: 30px !important;}
.marginright {margin-right: 30px !important;}
.margintophalf {margin-top: 15px !important;}
.marginbottomhalf {margin-bottom: 15px !important;}
.marginlefthalf {margin-left: 15px !important;}
.marginrighthalf {margin-right: 15px !important;}
.nomargin {margin: 0;}
.padding {padding: 30px;}
.paddinghalf {padding: 15px;}
.paddingtop {padding-top: 30px !important;}
.paddingtop2x {padding-top: 60px !important;}
.paddingbottom {padding-bottom: 30px !important;}
.paddingbottom2x {padding-bottom: 60px !important;}
.paddingbottom0 {padding-bottom: 0 !important;}
.paddingleft {padding-left: 30px !important;}
.paddingright {padding-right: 30px !important;}
.paddingtophalf {padding-top: 15px !important;}
.paddingbottomhalf {padding-bottom: 15px !important;}
.paddinglefthalf {padding-left: 15px !important;}
.paddingrighthalf {margin-right: 15px !important;}
.nopadding {padding: 0 !important;}
.auto {width: auto !important;}
.row30 {margin-right: -30px; margin-left:-30px;}
.centered {margin-left: auto; margin-right: auto}
.onepoint2em {font-size: 1.2em;}
.onepoint4em {font-size: 1.4em;}
.bordertop {border-top: 1px solid #ccc;}
.borderbottom {border-bottom: 1px solid #ccc;}
.underline {text-decoration:underline;}
.uppercase {text-transform:uppercase;}
.serif{ font-family: "garamond-premier-pro-display";}
.sansserif{font-family: "proxima-nova";}
.fullwidth {width: 100% !important;}
.colorblock {padding: 30px 30px 2030px 30px; margin-bottom:-2000px;}
.colorblock.nopadding {padding: 0 0 2000px 0 !important;}
.inner {padding: 20px;z-index: 20;
position: relative }
.white {color: #fff;}
.whitebg {background-color: #fff;}
.whitebg {background-size: 80%;}
a.white:hover {color: rgba(255,255,255,.8)}
.btn {border-radius: 0;}
.btn-outline {border: 1px solid #fff; text-transform:uppercase; color: #fff; background:none; font-family: "proxima-nova"; }
.btn-outline:hover{color: rgba(255,255,255,.8)}
.pageheader {font-family: "garamond-premier-pro-display";}
.pageheader > div {width: 100%; }
.pageheader h1 {font-size: 2em; line-height:.8;}
.single-partners .pageheader h1,.single-steering .pageheader h1 {font-size: 2em !important;line-height: 1; margin: 0;}
h1.sm {font-size: 3em !important;line-height: 1; margin: 0;}
.lineheight18, .lineheight18 h2, .lineheight18 h3, .lineheight18 h4 , .lineheight18 h5 {line-height: 1.8}
.taxonomytop h1.dobt {
padding: 20px;
font-size: 56px;
font-weight: bold;
color: white;
margin-top: -30px;
background: #006868;
}
.taxonomytop li:hover .overlay {background-color: rgba(255,255,255,0) !important}
.taxonomybottom {border-top: 15px solid #ccc; font-size: 1.2em;}
.taxonomybottom ul {list-style: none; padding: 0}
.taxonomybottom li {line-height: 1.1; margin-bottom:.75em}
.flex {
display: -webkit-box !important; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box !important; /* OLD: Firefox (buggy) */
display: -ms-flexbox !important; /* MID: IE 10 */
display: -webkit-flex !important; /* NEW, Chrome 21+ */
display: flex !important; /* NEW: Opera 12.1, Firefox 22+ */
-webkit-box-align: center !important; -moz-box-align: center; /* OLD… */
-ms-flex-align: center !important; /* You know the drill now… */
-webkit-align-items: center !important;
align-items: center !important;
}
.vid {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px; height: 0; overflow: hidden;
}
.vid iframe,
.vid object,
.vid embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.videoplay a{width: 100%; padding: 25% 0; text-align:center; font-size: 50px; background-size:cover; background-position:center; display: block;}
.videoplay.sunita a{ background-image:url(includes/images/sunita.jpg); }
.videoplay.contest a {padding: 25% 0;}
/*COLORS */
.red {color: #db0820;}
.redbg {background-color:#db0820; color: #fff;}
.yellow {color: #F6CE00;}
.yellowbg {background-color:#F6CE00; color: #fff;}
.dkteal {color: #106973;}
.dktealbg {background-color:#106973; color: #fff;}
.mdteal {color: #1797a6;}
.mdtealbg {background-color:#1797a6; color: #fff;}
.ltteal {color: #29c7d9;}
.lttealbg {background-color:#29c7d9; color: #fff;}
a.greenboxlink {text-transform: uppercase;
border: 1px solid #388089;
padding: 10px 66px 8px 8px;
font-size: 16px;
background-image: url("data:image/svg+xml;utf8,") ;
background-position: right 6px;
background-repeat: no-repeat;
background-size: auto 60%;}
.homebox .innerbox{ overflow:hidden}
.arrowover {
position: absolute;
top: 0px;
right: 15px;
left: 15px;
bottom: 0;
background-repeat: no-repeat; mix-blend-mode: multiply;
z-index:2;
background-size: cover;
background-position:center;
transition: all .5s;
}
.whoWeAre .innerbox .arrowover:before {z-index: 2; content:'';position: absolute;
top: 0px;
right: 15px;
left: 15px;
bottom: 0;}
.arrowover:hover {background-size: 200% !important; transition: all .5s;}
.whoWeAre .innerbox .arrowover {background-image: url("data:image/svg+xml;utf8,");
background-size: 100% auto;
background-position: top left;
}
.whoWeAre:hover .innerbox .arrowover {background-size: 720% !important; }
.ourMission .innerbox .arrowover {background-image: url("data:image/svg+xml;utf8,");
background-size: 100% auto;
background-position: top center ;
}
.ourMission:hover .innerbox .arrowover {background-size: 400% auto !important; }
.ourVision .innerbox .arrowover {background-image: url("data:image/svg+xml;utf8,"); background-size: 100% auto; background-position:top center}
.ourVision:hover .innerbox .arrowover {background-size:850% auto !important}
.boxcontent {position: relative; z-index:3; padding: 20px;
height: 260px;
color: #fff;
}
.box1 .arrowover{ left: 0; right:0; z-index: 5; background-image: url("data:image/svg+xml;utf8,");background-size: 100% auto;
background-position:top right;}
.box1:hover .arrowover {background-size: 250% auto !important; }
.box2 .arrowover{left: 0; right:0; z-index: 5; background-image: url("data:image/svg+xml;utf8,");background-size: auto 100%;
background-position: bottom right; }
.box2:hover .arrowover {background-size: auto 800% !important; }
.whoWeAre .innerbox {background-color:#116A73;}
.ourMission .innerbox {background-color:#2BB9C9;}
.ourVision .innerbox {background-color: #008896}
.boxcontent h3, .box1 .inner h3,.box2 .inner h3 {text-align: center; margin-bottom:1em}
.innerbox .linkbox {background-color: #00444B;text-align: center ;padding: 20px; z-index: 10;
position: relative ;}
.home .overlay{position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 11;}
.whitelinkarrow {color: #fff;
text-transform: uppercase;
padding-right: 45px;
background-image: url("data:image/svg+xml;utf8,") ;
background-position: right 1px;
background-repeat: no-repeat;
background-size: auto 80%;}
.whitelinkarrow:hover {color: #fff; opacity:.8}
.innerbox .linkbox a{font-size: 16px;padding-right: 60px;}
@media (max-width: 767px) {
.innerbox img{width: 70%; margin-left: -20%; float: left;}
.innerbox .boxcontent {height: auto; width: 50%;
float: left;
font-size: 2.8vw;}
.innerbox .arrowover {left: 0; right: 0;}
.innerbox .boxcontent h3 , .box1 .inner h3,.box2 .inner h3{font-size: 6vw; text-align:left; margin-bottom: .5em}
.innerbox .linkbox {clear: both;position: relative; z-index: 4;}
}
@media (min-width: 768px) {
.boxcontent {padding: 30px 20px;}
.whoWeAre .innerbox .arrowover { }
.ourMission .innerbox .arrowover {background-image: url("data:image/svg+xml;utf8,");
background-size: 100% auto;
background-position:center ;
}
.ourMission:hover .innerbox .arrowover {background-size: 600% !important; background-position:center}
.ourVision .innerbox .arrowover {background-image: url("data:image/svg+xml;utf8,"); background-size: auto 100%; background-position: center;}
.ourVision:hover .innerbox .arrowover {background-size:auto 500% !important}
}
@media (min-width: 992px) {
.boxcontent {padding: 40px;}
.whoWeAre .innerbox .arrowover {}
.ourMission .innerbox .arrowover {}
.ourVision .innerbox .arrowover {}
.box1 .arrowover {}
.box2 .arrowover{}
}
@media (min-width: 1200px) {
.whoWeAre .innerbox .arrowover { }
.ourMission .innerbox .arrowover {}
.ourVision .innerbox .arrowover {}
.box2 .arrowover{}
}
.lowerboxlink{position: absolute;
bottom: 0;
left: 50%;
right: 0;
background-color: #801113;
color: #fff;
text-transform: uppercase ; z-index: 6;}
.box2 .lowerboxlink{background-color: #AD9127}
.box1 .inner,.box2 .inner {padding-top: 2em;}
@media (max-width: 767px) {
.boxcontent,
.box1 .inner,.box2 .inner {padding-top: 10vw; font-size: 2.8vw;}
.box1 .inner h2,.box2 .inner h2 {font-size: 4.8vw; margin:0;}
}
@media (max-width: 467px) {
.boxcontent, .box1 .inner,.box2 .inner {padding-top: 20px; }
}
.lowerboxlink:hover {opacity: .9; color: #fff;}
ul.ruled {list-style: none; padding: 0; margin: 0;}
ul.ruled li {padding: 10px 20px; border-bottom: 1px solid rgba(255,255,255,.8); width: 100%}
.centertext {text-align: center; margin:auto;}
.colorblocks {list-style: none; padding: 0;}
.colorblocks li, .colorblocks .colorblock {background-color:#106973; color: #fff; margin: 0;}
.colorblocks li a {color: #fff;}
.colorblocks li a:hover {color:rgba(255,255,255,.8);}
.colorblocks li:nth-child(5n+1), .colorblocks li:nth-child(5n+1) .colorblock, .resourcelists div:nth-child(5n+1){background-color:#29c7d9;}
.colorblocks li:nth-child(5n+2), .colorblocks li:nth-child(5n+2) .colorblock, .resourcelists div:nth-child(5n+2) {background-color:#F6CE00;}
.colorblocks li:nth-child(5n+3), .colorblocks li:nth-child(5n+3) .colorblock, .resourcelists div:nth-child(5n+3) {background-color:#db0820;}
.colorblocks li:nth-child(5n+4), .colorblocks li:nth-child(5n+4) .colorblock, .resourcelists div:nth-child(5n+4) {background-color:#1797a6;}
.colorblocks li:nth-child(5n), .colorblocks li:nth-child(5n) .colorblock, .resourcelists div {background-color:#106973;}
.resourcelists {overflow: hidden;}
.resourcelists div {padding: 0 0 2000px 0; margin-bottom: -2000px;border-top: 1px solid rgba(255,255,255,.8); margin-top: -1px}
.resourcelists ul {padding: 0; margin: 0;}
.resourcelists li {list-style: none; padding: 10px 20px; border-bottom: 1px solid rgba(255,255,255,.8); font-size: 18px}
.resourcelists div:nth-child(odd) {clear:both;}
.resourcelists .small {font-size: 10px; font-weight:600;}
/* FACTS */
/* PARTNERS LIST */
.partnerslist .top {height: 100px; text-align:center; background-size:contain; background-position:center; background-repeat: no-repeat; }
.partnerslist .top a {display: block; width: 100%; height: 100px;}
.partnerslist .imgbox{height: 150px; text-align:center; background-size:contain; background-position:center;background-repeat: no-repeat; margin-bottom:10px;}
.partnerslist .imgbox a {display: block; width: 100%; height: 150px;}
/*Events List /*
/*mission */
.mission .inner {max-width: 800px; margin: auto;}
.mission .inner h2 {margin-top:1em;}
.mission .inner h2:first-child {margin-top: 0;}
/* Bottom Links */
.bottomlinks {display: block; overflow:hidden}
.bottomlinks .overlay a {display: block; width: 100%; height: 100%;}
.bottomlinks li .overlay:hover {background-color:rgba(0,152,178,.0) !important;}
/* NAVIGATION */
#masthead { background-color: #ebebeb;}
.navbar-toggle {margin-right: 0; color: #1797a6}
.navbar-nav > li > a { text-transform:uppercase; font-family: "proxima-nova";}
.navbar {margin-bottom: 0px;}
.pager {padding: 30px; margin: 0}
.pager li > a, .pager li > span {border-radius: 0px;}
/* new slideshow with arrows */
div {display: block; }
#slideshow {position:relative;height:110vw;}
.white {color: #fff}
.slide {width: 100vw;height:110vw; position:absolute; overflow:hidden; opacity: 0; transition: opacity 1s; transition-delay:1s; z-index:1}
.slide.wasActive { z-index:20; opacity: 0; transition: opacity 1s; transition-delay:1s; }
.slide.active { opacity:1; transition: opacity .1s; z-index:40}
.slide img {width: 240%; max-width: 240%; height:auto; margin: 0 0 0 -190%;transition: margin 1s; transition-delay: 1.5s;}
.slide.active img {margin: 0 0 0 -50%; transition: margin 1s; }
.slide .arrowoverlay{position: absolute; top: 0; right: 0; left: 0; bottom:-1.2%; background-size:160%; }
.innerarrowoverlay {position: absolute; bottom: 0;left: -30%; right: -30%;}
.slide .arrowoverlay img {width: 100%; height: auto;}
.slide .slidecontent {position: absolute; left: -15%; right: 30%; bottom: 28%; top: 11%; opacity: 0;}
.slide.active .slidecontent {left: 15%; right: 15%; opacity: 1; transition: all .75s; transition-delay: .25s;}
.slide .slidecontent h2 {font-size: 7vw}
.slide .slidecontent p {font-family: "garamond-premier-pro-display";}
.slide .slidelink {margin-top: .5em; }
.slide .slidelink a{ font-size: 3vw; color: #fff; text-transform:uppercase; text-decoration:underline !important; padding-right:8.5vw; background-image:url("data:image/svg+xml;utf8,") ;background-position: right; background-repeat:no-repeat; background-size: auto 80%;}
.slide-nav-right, .slide-nav-left {position: absolute; top: 40%; z-index:100; height:auto; width:40px;border: 0; background-color:transparent; }
.slide-nav-left { left: 25px;}
.slide-nav-left:before {content: "\f104"; font-family:FontAwesome;font-size: 8vw; color:#fff;}
.slide-nav-right { right: 25px;}
.slide-nav-right:before {content: "\f105"; font-family:FontAwesome; font-size: 8vw;color:#fff;}
.onlyBigger {fill: transparent;}
.onlySmaller {fill: black;}
@media (min-width: 768px) {
#slideshow,.slide { height: 63vw}
.slide .arrowoverlay{ }
.innerarrowoverlay {left: -5%; right: -5%;}
.slide img {width: 130%; margin: 0 0 0 -115% }
.slide.active img {margin: 0 0 0 -15% ; transition: margin 1s; }
.slide .slidecontent { left: 41%; right: 27%; bottom: 42%; top: 3%; }
.slide.active .slidecontent { left: 61%; right: 7%; bottom: 52%; top: 3%; }
.slide .slidecontent h2 {font-size: 3.7vw}
.slide .slidecontent p {font-size: 1.9vw}
.slide .slidelink a {font-size: 1.9vw; padding-right:6.5vw; }
.slide-nav-right, .slide-nav-left { top: 40%; }
.slide-nav-right:before , .slide-nav-left:before {font-size: 6vw;}
.onlyBigger {fill: black;}
.onlySmaller {fill: transparent;}
}
@media (min-width: 992px) {
#slideshow, .slide { height: 48.5vw }
.slide img {width: 100%; height:auto; margin: 0 0 0 -100%; transition: margin 1s; transition-delay: 1.5s;}
.slide.active img {margin: 0 0 0 0 ; transition: margin 1s; }
.slide .slidecontent { left: 41%; right: 27%; bottom: 52%; top: 3%; }
.slide.active .slidecontent { left: 61%; right: 7%; bottom: 52%; top: 3%; }
.slide .slidecontent h2 {font-size: 2.7vw}
.slide .slidecontent p {font-size: 1.5vw}
.slide .slidelink a {font-size: 1.5vw; padding-right:4.5vw; }
.slide-nav-right, .slide-nav-left { top: 35%; }
.slide-nav-right:before , .slide-nav-left:before {font-size: 4vw;}
}
/*slideshow */
.carousel-control.left, .carousel-control.right {
background-image:none;width: 5%;
z-index:100;
}
#myCarousel .item {background-color: #106973;}
#myCarousel h1{font-size: 48px; line-height: .85em; padding: 0;}
#myCarousel h1 small{font-size:40px; color: #fff; margin-top: -15px; display: block;}
#myCarousel p{font-size:22px;}
#myCarousel .col-sm-6 {padding-left: 0px; padding-right: 0px;}
#myCarousel .textover { color: #fff; font-size:22px; padding: 30px;}
#myCarousel .leftside img {width: 100%}
#myCarousel.v2, #myCarousel.v2 .slideinner{ height: 80vh;}
#myCarousel.v2 .overlay {position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#myCarousel.v2 .carousel-caption {background-color: rgba(0, 0, 0, .4); left: 10%; right:50%; padding: 20px; text-align:left}
.homelowerbox { overflow:hidden;}
.homelowerbox img{
width: 120%;
max-width:120%
}
a.navbar-brand{ display: block; height: 32px; width: 257px;float: left; background-position: 0 -100px; margin-top: 15px;
padding: 0;
font-size: 18px;
line-height: 20px;}
.sprite{
background-image:url(includes/images/spriteX2.png);
display:inline-block;
text-indent:-3000px;
text-align:left;
background-size:600px 400px;
}
.carousel-caption.photo-credit {font-size: 9px; color: rgba(255,255,255,.8); bottom: 10p; right: 10px; padding:0; text-align:right}
.panel-group{
margin:0;
}
.resource-group .panel{
border:none !important;
box-shadow:none !important;
-webkit-box-shadow: none !important;
font-size: 18px
}
.resource-group .panel-heading {text-transform: uppercase; background: none !important; border: none; border-color: transparent;}
.resource-group .panel-heading h4 {font-size: 28px; font-weight:bold; letter-spacing: .1em}
.resource-group .panel:nth-child(5n+1) .panel-heading h4, .resource-group .panel:nth-child(5n+1) .panel-body a:hover {color: #29c7d9;}
.resource-group .panel:nth-child(5n+2) .panel-heading h4, .resource-group .panel:nth-child(5n+2) .panel-body a:hover {color: #F6CE00;}
.resource-group .panel:nth-child(5n+3) .panel-heading h4, .resource-group .panel:nth-child(5n+3) .panel-body a:hover {color: #db0820;}
.resource-group .panel:nth-child(5n+4) .panel-heading h4, .resource-group .panel:nth-child(5n+4) .panel-body a:hover {color:#1797a6;}
.resource-group .panel:nth-child(5n) .panel-heading h4, .resource-group .panel:nth-child(5n) .panel-body a:hover {color: #106973;}
.resource-group .panel-body {border-top: none !important; padding-left: 3em !important}
.resource-group .panel-body ul {list-style: none; padding: 0}
.resource-group .panel-body li {margin-bottom: .5em;}
.resource-group .panel-body a {color: #444;}
.resource-group .panel-body a:hover {font-weight: bold; text-decoration:none}
.resource-group .panel-heading .accordion-toggle:before {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
content: "\e252"; /* adjust as needed, taken from bootstrap.css */
float: left; /* adjust as needed */
color: grey; /* adjust as needed */
padding-right: .5em;
font-size: 16px;
margin-top: .45em
}
.resource-group .panel-heading .accordion-toggle.collapsed:before {
/* symbol for "collapsed" panels */
content: "\e072"; /* adjust as needed, taken from bootstrap.css */
}
/*contest entry */
#faqs .panel {border: none; background-color:transparent; box-shadow:none; padding: 0;}
#faqs .panel-default > .panel-heading {border: none; background-color:transparent; color: #fff; padding: 10px 0px 5px 0;}
#faqs .panel-default > .panel-heading h4 {font-weight: normal; text-transform:uppercase; font-size: 14px;}
#faqs .panel-default > .panel-heading:hover {color: rgba(255,255,255,.8);}
#faqs.panel-group .panel-heading + .panel-collapse .panel-body {border-top: 0;}
a.big i {font-size: 80px}
.gform_wrapper .gform_heading h3.gform_title, .gform_confirmation_message h3 {font-size: 50px; margin: 0;}
.gform_heading .gform_description h4, .gform_confirmation_message h4 {font-size: 24px; text-transform:uppercase}
.gfield_label, .field_sublabel_below label {display: none !important;}
.field_sublabel_below .gfield_checkbox label {display: inline-block!important;}
input#input_1_2_1, input#input_2_2_1,input#input_3_2_1 {margin-bottom: .5em;}
#field_1_5 ,#field_2_5 ,#field_3_5 {margin-top: 1em;}
.modal-title, .modal-body {color: #333;}
#input_2_8 {height: 5.25em;}
#input_2_12{height: 5.25em;}
#input_2_13 {height: 5.25em;}
body .gform_wrapper div.validation_error {color: #db0820; border-top: 2px solid #db0820;
border-bottom: 2px solid #db0820;}
body .gform_wrapper .validation_message {color: #db0820;}
body .gform_wrapper li.gfield.gfield_error, body .gform_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning {border-top: 1px solid #db0820;border-bottom: 1px solid #db0820; background-color: rgba(255,255,255,.5)}
body .gform_wrapper input { font-family: "proxima-nova" !important;}
body .gform_button {display: inline-block;
background-color: transparent !important;
text-transform: uppercase;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid #fff;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
border-radius: 0px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
color: #fff;}
/* STAFFLIST */
.seriousbackground {background-size: cover;}
.seriousbackground img{opacity: 0;}
.seriousbackground img:hover{opacity: 1; transition: opacity .5s;}
.red {color: #db0820;}
.redbg {background-color:#db0820; color: #fff;}
.yellow {color: #F6CE00;}
.yellowbg {background-color:#F6CE00; color: #fff;}
.dkteal {color: #106973;}
.dktealbg {background-color:#106973; color: #fff;}
.mdteal {color: #1797a6;}
.mdtealbg {background-color:#1797a6; color: #fff;}
.ltteal {color: #29c7d9;}
.lttealbg {background-color:#29c7d9; color: #fff;}
/* STORIES */
.single-stories {font-size: 16px}
.single-stories h1.storiesname {margin-top: -30px;}
.single-stories h1.storiesname span {background-color:#29c7d9; color: #fff; border: 4px solid white; margin: auto; width: auto; letter-spacing:.1em; font-family: "proxima-nova"; font-weight: 500;
padding: 10px 15px}
.single-stories h1{margin: 0 auto .5em; text-align: center; font-size: 30px;}
.storiesimage {margin: 0 -15px 15px -15px;}
.storiesimage img{ width: 100%;}
.mouseoverblocks {list-style: none; padding: 0; margin: 0 auto; width: 100%; position:relative}
.mouseoverblocks li {display: inline-block; width: 100%; margin:0; padding: 0; position:relative;}
.mouseoverblocks .textblock {position: absolute; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,0); color: rgba(255,255,255,0); padding: 25px 15px; font-size: 1.6em;
transition: background-color .75s ease-in-out,color .95s ease-in-out ;
-moz-transition: background-color .75s ease-in-out,color .95s ease-in-out;
-webkit-transition: background-color .75s ease-in-out,color .95s ease-in-out;}
.mouseoverblocks li:hover .textblock {background-color: rgba(0,0,0,.9); color: rgba(255,255,255,1);
transition: background-color .75s ease-in-out,color .95s ease-in-out ;
-moz-transition: background-color .75s ease-in-out,color .95s ease-in-out;
-webkit-transition: background-color .75s ease-in-out,color .95s ease-in-out;}
.quote.text {font-size: 26px; padding: 1em; font-style: italic; border: 4px solid #db0820; margin: 10px 0 }
.quote.text.count1 { border: 4px solid #F6CE00; }
.quote.text.count2 { border: 4px solid #106973; }
/* FOOTER */
#colophon {color: #388089; font-family: "proxima-nova"; padding-bottom:30px; }
#social {}
.socialicons {
padding: 0}
.socialicons a{padding: 0 10px; font-size: 20px}
.socialtext {float: right; font-size: 30px; font-family:"garamond-premier-pro-display"; text-transform:uppercase; padding: 15px; }
#social a {color: #fff;}
#social a.facebook {color: #3460a1;}
#social a.twitter {color: #28aae1;}
#social a.youtube {color: #ee3138;}
#social a.instagram {color: #125688;}
#social a.pinterest {color: #CF1C1F;}
.unflogo {width: 133px; height: 32px; float:right; background-position: -450px 0}
div.site-footer-inner { border-bottom: 1px solid #ccc; margin-bottom:1em; padding-bottom: .5em}
.site-footer-inner a{display: block; width: 100%;}
#footernav {border-top: 3px solid #e1e1e1; line-height:1.2;margin-top: .5em; padding-top: 1em}
#footernav ul {list-style: none; padding-left:0}
#footernav li {width: 20%; float: left; display:block; margin-bottom:.5em}
#footernav li a {font-size: 14px; font-weight:600; color:#116A73 ; text-transform:uppercase;}
#footernav li a:hover {text-decoration: none !important}
#footernav li:last-child a:hover {text-decoration: underline !important}
#footernav ul ul {margin-top: .75em; padding-top: 1em; position:relative}
#footernav ul ul:before {content: ''; position:absolute; width: 20px; border-bottom:1px solid #116A73; top: 0 }
#footernav li li {width: 100%; }
#footernav li li a {font-size: 12px; font-weight:normal; color: #777; text-transform:none}
#footernav li li a:hover {text-decoration: underline !important}
.inset_right {float: right; width: 350px; margin-right: -15px; border-left: 1px solid #fff; padding: 30px; margin-left: 15px; font-size: 1.5em; background-color: rgba(255,255,255,.2); font-style:italic; margin-bottom:1.5em}
.inset_right td, .inset_left td {padding: 30px;}
.inset_left {float: left; width: 350px; margin-left: -15px; border-right: 1px solid #fff;padding: 30px; margin-right: 15px; font-size: 1.5em; background-color: rgba(255,255,255,.2); font-style:italic; margin-bottom:1.5em}
.page-id-667 .lttealbg a, .single-stories .dktealbg p a {color: white;}
.single-stories .dktealbg p a {color: white; text-decoration: underline}
.page-id-667 .lttealbg a:hover, .single-stories .dktealbg p a:hover { color: rgba (255,255,255,.8);}
.page-id-667 .lttealbg li {margin-bottom:1.25em;}
/* new twitter */
.twitterfeed {background-image:url(includes/images/twitterbg.png); background-size: 120% auto; background-position:top; background-repeat:no-repeat;}
.twitterhead {min-height:29vw;}
.twitterhead h3 {white-space: nowrap; margin-bottom:0; padding-top: 5px;}
div.timeline-Viewport{background-color: #E1E2E2;}
.timeline-TweetList-tweet {margin: 30px;background-color: #fff;}
/* old twitter */
.twitterfeed .twitterlink,.twitterfeed .twitter .fa {line-height: .8 !important}
.twitterfeed .fa {font-size: 56px !important;float: left; margin-right: 20px}
.twitterfeed .twitterlink {font-size: 18px !important}
.twitterfeed .bigpadding > p:first-child {line-height: 1; font-family:'lato'}
.latest-tweets { height: 24em; overflow:scroll; margin: 2em 0;}
.latest-tweets ul {list-style: none; padding: 2em 0 ; max-width: 850px; margin: auto;}
.latest-tweets li {padding: 1.5em; margin-bottom: 1.5em; border-bottom: 1px solid #fff; }
.latest-tweets a {color: #fff;}
.twitterfeed .tweet-details { display: none;line-height:12px !important}
.twitterfeed .tweet-details a {font-size: 12px; color:#fff; line-height:12px !important}
.tweet-text {font-family: "garamond-premier-pro-display"; font-size: 36px;}
@media (max-width: 767px) {
.carousel-control {top: 80%;}
#myCarousel .item .slideinner { }
#myCarousel.v2 .carousel-caption {
left: 0;
right: 0;
bottom: 0;
text-align: left;
padding: 20px 45px;
/* top: 70% */}
#myCarousel.v2 .carousel-caption h1 { font-size: 3vw;}
#myCarousel.v2 .carousel-caption p { font-size: 2vw;}
}
@media (max-width: 467px) {
a.navbar-brand{ height: 30px; width: 200px; background-position: 0 -145px;}
#myCarousel h1{font-size: 48px; }
h1.big {font-size: 48px;}
#myCarousel h1 small{font-size:20px; margin-top:-10px;}
#colophon {}
.socialicons , .socialtext, .unflogo {float: none;}
.unflogo {}
.carousel-control {top: 0;}
#myCarousel .item .slideinner { background-position: top center;
background-repeat: no-repeat;
background-size: auto 70%;}
#myCarousel.v2 .carousel-caption {background-color: #106973;
left: 0;
right: 0%;
bottom: 0;
padding: 20px ;
text-align: left;
/* top: 70% */
min-height: 32vw;}
#myCarousel.v2 .carousel-caption h1 { font-size: 5vw !important;}
#myCarousel.v2 .carousel-caption p { font-size: 3vw !important;}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {
.sprite{
background-image:url(includes/images/spriteX2.png);
background-size:600px 400px; /* This replicates the original standard sprite dimensions, and assumes the actual dimensions of sprite@2x.png are 1000x1000px */
}
}
@media (min-width: 768px) {
.fadein {animation: fadein 5s;
-moz-animation: fadein 5s; /* Firefox */
-webkit-animation: fadein 5s; /* Safari and Chrome */
-o-animation: fadein 5s; /* Opera */
}
.fadeinslow {animation: fadein 16s;
-moz-animation: fadein 16s; /* Firefox */
-webkit-animation: fadein 16s; /* Safari and Chrome */
-o-animation: fadein 16s; /* Opera */
}
.quote.text {font-size: 16px; }
@keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
.videoplay a{ padding: 50% 0; }
.navbar {margin-bottom: 10px; font-size:12px}
#menu-item-15 .dropdown-menu {left: auto; right: 0px;}
.inner {padding: 30px;}
header .container {padding: 0;}
.navbar-collapse { float: right; margin-right:-30px;margin-top: 5px;}
#myCarousel .textover { top: 10%; }
#myCarousel .textbox {position: relative;}
#myCarousel h1{font-size: 26px; }
#myCarousel h1 small{font-size:22px;}
#myCarousel p{font-size:16px;}
#myCarousel .textover { position: absolute; top: 0px; left: 0px; right: 5%; color: #fff; font-size:22px; ;}
.homelowerbox img{
opacity: 1;
cursor: pointer;
-webkit-transition:.5s; /* Safari */
transition: .5s;
width: 100%;
}
.homelowerbox img:hover {
opacity: .65;
filter: none;
filter: none;
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
-o-filter: none;
-webkit-transition:1s; /* Safari */
transition: 1s;
}
.box1 .inner,.box2 .inner {padding-top: 6em;}
.pageheader h1 {font-size: 2.6em;}
.pageheader {font-size: 1.2em; }
.pageheader > div {width: 66%; float: left;}
.pageheader > div:first-child {width: 44%}
/* partners LIST */
.partnerslist li {width: 33.3333%; float: left;}
.partnerslist li:nth-child(3n+1) {clear: both;}
.partnerslist li image { max-height: 200px;}
/* Steering LIST */
.steeringlist li {width: 33.3333%; float: left;}
.partnerslist.steeringlist li:nth-child(3n+1) {clear: none;}
.steeringlist li:nth-child(4n+1) {clear:both;}
.steeringlist li image { max-height: 200px;}
/* events LIST */
.eventslist li {width: 25%; float: left;}
.eventslist .top {height: 200px; text-align:center;}
.eventslist .top div {text-align: center; width: 100%;}
.eventslist li:nth-child(4n+1) {clear: both;}
/* STAFFLIST */
.stafflist li .imgbox {width: 33%; padding-bottom:33%; float: left; }
.individualstaff .happy {width: 33%; padding-bottom:33%;}
.mouseoverblocks li {width: 50%;}
.twitterfeed { background-size: 110% }
.twitterhead {min-height:200px;}
/* FLEX, BUT NOT ON XS */
.flex-sm {
display: -webkit-box !important; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box !important; /* OLD: Firefox (buggy) */
display: -ms-flexbox !important; /* MID: IE 10 */
display: -webkit-flex !important; /* NEW, Chrome 21+ */
display: flex !important; /* NEW: Opera 12.1, Firefox 22+ */
-webkit-box-align: center; !important -moz-box-align: center; /* OLD… */
-ms-flex-align: center !important; /* You know the drill now… */
-webkit-align-items: center !important;
align-items: center !important;
}
div.site-footer-inner { border-bottom: 0;margin-bottom: 0; padding-bottom:0}
.socialicons {float:right;
}
}
@media (min-width: 992px) {
.videoplay a{ padding: 40% 0; }
a.navbar-brand{height: 50px; width: 401px; background-position: 0 0;
}
.navbar {margin-bottom: 20px; font-size:14px}
.navbar-collapse { margin-top: 15px;}
#myCarousel .textover { top: 50px; }
#myCarousel h1{font-size: 60px; padding: 0;}
h1.big {font-size: 66px; }
#myCarousel h1 small{font-size:34px; color: #fff; margin-top: -15px;}
#myCarousel h1{font-size: 36px; }
#myCarousel p{font-size:18px;}
.home .main-content-inner h1 {font-size: 48px}
.homelowerbox img{ width: 120%;}
.single-stories h1{ font-size: 38px;}
.quote.text {font-size: 26px; }
/* STAFFLIST */
.stafflist li:first-child {width: 100%; float: none;}
.stafflist li:first-child .imgbox {width: 50%; padding-bottom:25%; float: right; }
.stafflist li:first-child .happy {width: 50%; padding-bottom:25%; left: auto; right: 0;}
.stafflist li:first-child .stafftext h3 {font-size: 50px;}
.stafflist li {width: 50%; float: left;}
.stafflist li .imgbox {width: 50%; padding-bottom:55%; float: right; }
.stafflist li .happy {width: 50%; padding-bottom:55%; left: 1; right: 0;}
.stafflist li:nth-child(4n+3) .imgbox,.stafflist li:nth-child(4n+2) .imgbox { float: left; }
.stafflist li:nth-child(4n+3) .happy,.stafflist li:nth-child(4n+2) .happy {left: 0; right: 1;}
.stafftext {padding: 50px 30px 0 ;}
.pageheader h1 {font-size: 3.4em;}
.pageheader {font-size: 1.4em; }
.pageheader > div {width: 50%; float: left;}
.box1 .inner,.box2 .inner {padding-top: 2em;}
.mouseoverblocks li {width: 33.333333%;}
.twitterfeed { background-size: 100% }
.twitterhead {min-height:250px;}
.site-footer-inner a{display: inline; width: auto; margin-left: 1em; padding-left: 1em; border-left: 1px solid #116A73;}
}
@media (min-width: 1200px) {
.single-stories h1{ font-size: 48px;}
.videoplay a{ padding: 28% 0; }
#myCarousel .textover { top: 70px; }
#myCarousel h1{font-size: 5vw;}
#myCarousel.v2 h1{font-size: 2.5vw;}
#myCarousel.v2 p{font-size:1.8vw;}
#myCarousel h1 small{font-size:3vw; color: #fff;}
#myCarousel p{font-size:1.8vw;}
.pageheader h1 {font-size: 3.8em;}
homelowerbox img{ width: 100%;}
.stafftext {padding: 80px 30px 0 ;}
.quote.text {font-size: 36px; }
.twitterhead {text-align: center; min-height:300px;}
.box1 .inner,.box2 .inner {padding-top: 6em;}
}
/* ============================================================
SECTIONS
============================================================ */
section.module:last-child {
margin-bottom: 0;
}
section.module h1, .taxonomytop h1 {
font-family: "garamond-premier-pro-display";
font-size: 30px;
width: auto;
font-weight:400;
padding: 10px 50px;
text-align:center;
margin: 0 auto 40px auto;
}
.taxonomytop h1 small {color: #fff; display: block;}
section.module p {
margin-bottom: 40px;
}
section.module p:last-child {
margin-bottom: 0;
}
section.module.content {
padding: 40px 0;
}
section.module.parallax {
height: 80vh;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-left: -15px; margin-right:-15px;
}
section.module.parallax h1 {
color: rgba(255, 255, 255, 0.8);
font-size: 48px;
line-height: 600px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
@media all and (min-width: 600px) {
section.module h2 {
font-size: 42px;
}
section.module p {
font-size: 20px;
}
section.module.parallax h1 {
font-size: 96px;
}
}
@media all and (min-width: 960px) {
section.module.parallax h1 {
font-size: 160px;
}
}
@media (min-width: 768px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
}