/*
Theme Name: Invent Together
*/
html, body {
height: 100%;
margin: 0;
}
body {
margin: 0;
padding: 0;
border: none;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
}
h1 {
font-size:42px;
font-weight: 800;
margin:0 0 30px 0;
}
h2 {
font-size:30px;
font-weight: 800;
margin:0 0 30px 0;
}
h3 {
font-size:24px;
font-weight: 800;
margin:0 0 30px 0;
}
h4 {
font-size:22px;
font-weight: 800;
}
p {
font-size:16px;
line-height: 2;
color:#6C818C;
}
a {
color:#4298DC;
font-size:16px;
line-height: 2;
color:#6C818C;
}
.news-content ul li {
font-size:16px;
line-height: 2;
color:#6C818C;
}
.news-content img {
max-width: 100%;
display: block;
margin:0 auto;
}
@media only screen and (max-width : 767px) {
h1 { font-size:30px; }
h2 { font-size:22px; }
h3 { font-size:17px; }
h4 { font-size:16px; }
p {
font-size:13px !important;
line-height: 1.6 !important;
}
}
@media only screen and (max-width : 1199px) {
p {
font-size:14px;
}
}
.center { text-align: center; }
@media only screen and (max-width : 991px) {
.center-m { text-align: center; }
}
.white { color:#FFF; }
.container {
max-width: 1400px;
margin:0 auto;
box-sizing: border-box;
position: relative;
}
@media only screen and (max-width : 1440px) {
.container {
padding-left:20px;
padding-right:20px;
}
}
@media only screen and (max-width : 991px) {
.container {
width:auto;
}
}
#header {
background-color: #333333;
text-align: right;
height:90px;
padding:0;
box-sizing: border-box;
position: fixed;
top:0;
left:0;
right:0;
z-index:10;
}
#header .container {
padding-top:30px;
}
#space {
height:90px;
z-index: 0;
position: relative;
}
#logo {
width:107px;
display: block;
position: absolute;
top:3px;
}
#logo img { width:100%; }
@media only screen and (min-width : 992px) {
#nav {
margin:0 230px 0 0;
padding:0;
}
#nav li {
margin:0 0 0 35px;
padding:0 0 35px 0;
list-style: none;
display: inline;
position: relative;
}
#nav li a {
margin:0;
padding:0;
color:#FFF;
font-size:16px;
text-decoration: none;
font-weight: bold;
}
#nav .sub-menu {
position: absolute;
top:100%;
left:-20px;
background-color:#DE6580;
width:300px;
margin:0;
padding:0;
display: none;
-webkit-box-shadow: 0px 10px 20px -9px #999;
-moz-box-shadow: 0px 10px 20px -9px #999;
box-shadow: 0px 10px 20px -9px #999;
}
#nav .sub-menu li {
margin:0;
padding:0;
list-style: none;
color:#FFF;
position:relative;
border-bottom:1px solid #000000 !important;
}
#nav .sub-menu li:last-child {
border:none;
}
#nav .sub-menu li a {
color:#FFF;
text-decoration: none;
display: block;
padding:10px 20px;
box-sizing: border-box;
font-weight: 600;
text-align: left;
}
#nav .sub-menu li .fa-chevron-right {
position:absolute;
right:15px;
top:12px;
}
#nav li:hover > ul {
display:block;
z-index:100;
}
#nav > li .nav-up,
#nav > li .nav-down
{ display: none; }
#mobile-button { display: none; }
}
@media only screen and (max-width : 991px) {
#mobile-button {
display: flex;
width:50px;
height:50px;
cursor: pointer;
align-items: center;
justify-content: center;
position: absolute;
top:20px;
right:15px;
}
#mobile-button .clicker {
position:absolute;
z-index: 1;
top:0;
left:0;
right:0;
bottom:0;
display: block;
}
#mobile-button #m-lines {
width:25px;
}
#mobile-button #m-lines .m-line {
display: block;
width:100%;
height:3px;
background-color:#FFF;
margin-bottom:4px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
-khtml-border-radius: 30px;
position: relative;
}
#mobile-button.mobile-button-on #m-lines .m-line:first-child { transform: rotate(45deg); top:4px; }
#mobile-button.mobile-button-on #m-lines .m-line:nth-child(2) { transform: rotate(-45deg); top:-3px; }
#mobile-button.mobile-button-on #m-lines .m-line:last-child { display: none; }
#nav-scroll {
position: fixed;
top:90px;
left:0;
right:0;
bottom:0;
overflow:auto;
background-color:#333333;
display: none;
}
#nav-scroll.mobile-nav-on { display: block; }
#nav {
margin:0;
padding:0;
position: absolute;
top:0;
left:0;
right:0;
border-top:1px solid #DE6580;
text-align: left;
}
#nav > li {
display: block;
margin:0;
padding:0;
list-style: none;
border-bottom:1px solid #DE6580;
position: relative;
}
#nav > li .clicker {
position:absolute;
z-index: 1;
top:0;
left:0;
right:0;
bottom:0;
display: block;
}
#nav > li .sub-nav-toggle
{
position: absolute;
right:0px;
top:0px;
color:#FFF;
width:56px;
height:56px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
#nav > li .sub-nav-toggle svg { z-index: 0; }
#nav > li .nav-up { display: none; }
#nav > li.sub-menu-on .nav-up { display: flex; }
#nav > li.sub-menu-on .nav-down { display: none; }
#nav > li > a {
color:#FFF;
display: block;
padding:20px 30px;
text-decoration: none;
box-sizing: border-box;
font-weight: bold;
}
#nav .sub-menu {
margin:0;
padding:0;
height:0;
overflow: hidden;
}
#nav > li.sub-menu-on .sub-menu {
height: auto;
}
#nav .sub-menu li {
background-color:#DE6580;
border-bottom:1px solid #333333;
}
#nav .sub-menu li:last-child {
border:none;
}
#nav .sub-menu li a {
color:#FFF;
display: block;
padding:20px 45px;
text-decoration: none;
box-sizing: border-box;
font-weight: 500;
position: relative;
}
#nav .sub-menu li svg {
position: absolute;
right:30px;
top:22px;
}
}
#p-link {
background: #DE6580;
color:#FFF;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-khtml-border-radius: 20px;
padding: 5px 20px;
display: inline-block;
font-size:16px;
font-weight: bold;
text-decoration: none;
position: absolute;
right:20px;
top:25px;
}
@media only screen and (max-width : 991px) {
#p-link {
position: absolute;
bottom:30px;
top:auto;
right:20px;
left:20px;
padding:25px 0;
box-sizing: border-box;
text-align: center;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
-khtml-border-radius: 40px;
}
}
#hero-home {
background: #DE6580;
/*background: linear-gradient(270deg, #FDB601,#DE6580);
background: linear-gradient(-45deg, #FDB601, #DE6580,#DE6580, #FDB601);*/
background: linear-gradient(-45deg, #FDB601, #DE6580, #FDB601,#DE6580);
color:#FFF;
padding:0;
background-size: 400% 400%;
-webkit-animation: gradient 15s ease 2;
-moz-animation: gradient 15s ease 2;
animation: gradient 15s ease 2;
}
@-webkit-keyframes gradient {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes gradient {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes gradient {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
#hero-grid {
display:flex;
justify-content: space-between;
}
#hero-text {
flex-basis: 50%;
padding:30px 0;
}
#hero-img {
flex-basis: 50%;
position: relative;
}
#hero-img img {
max-width: 100%;
max-height: 95%;
position: absolute;
bottom:0;
right:0;
}
#hero-home h1 {
font-size:38px;
font-weight: 800;
margin:0;
}
#hero-home p {
font-size:16px;
line-height: 2;
color:#FFF;
}
@media only screen and (max-width : 1399px) {
#hero-text { padding-left:25px; }
}
@media only screen and (max-width : 1299px) {
#hero-text { flex-basis: 50%; }
#hero-img { flex-basis: 45%; }
}
@media only screen and (max-width : 1199px) {
#hero-text { flex-basis: 45%; }
#hero-img { flex-basis: 50%; }
#hero-home h1 { font-size:36px; }
#hero-home p { font-size:14px; }
}
@media only screen and (max-width : 991px) {
#hero-grid { display:block; }
#hero-text { padding:20px 0 0 0; }
#hero-img img {
position: relative;
display: block;
}
}
@media only screen and (max-width : 767px) {
#hero-home h1 { font-size:22px; }
#hero-home p {
font-size:13px;
line-height: 1.5;
}
}
#home-stats-outer {
padding:40px 0;
}
#home-stats {
width: 1100px;
margin:0 auto;
height:400px;
}
.home-stat {
cursor: pointer;
}
#home-stats .slick-track {
height:400px;
margin-top:50px;
}
.hs {
width:305px;
height:305px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
background-color:#4298DC;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin:0 auto;
position: relative;
}
.hs .hs-title {
color:#FFF;
font-size:40px;
font-weight: 800;
}
.hs .hs-summary {
display: flex;
align-items: center;
justify-content: center;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
background-color:#FFF;
position: absolute;
width:100%;
height:100%;
border:10px solid #4298DC;
box-sizing: border-box;
color:#6C818C;
font-size:12px;
line-height:1.8;
display: none;
}
/*.hs.slick-off .hs-summary { display: none; } */
.hs.slick-on .hs-summary { display: flex; }
.hs.slick-on .hs-title { display: none; }
/*.hs.slick-on .hs-summary.slick-no { transform: scale(0); } */
.hs.slick-on .hs-summary { transform: scale(1.2); }
.hs .hs-percentage {
display: block;
color:#323232;
font-size:71px;
line-height: 1;
font-weight:bold;
margin-bottom:15px;
}
.hs-text {
display: block;
padding:0 30px;
}
.slick-arrow { display:none !important; }
.c-arrow {
position: absolute;
color: #C4C4C4;
top:252px;
left:20px;
font-size:50px;
cursor: pointer;
display: block;
width:50px;
height:50px;
}
.c-right {
position: absolute;
color: #C4C4C4;
left:auto;
right:0;
}
.c-arrow i {
position: relative;
z-index: 0;
}
.c-arrow img {
position: absolute;
width:100%;
height:100%;
z-index: 1;
}
#stats-bottom {
margin:30px 0;
}
#stats-bottom p {
color:#6C818C;
margin-bottom:25px;
}
@media only screen and (max-width : 991px) {
#home-stats { width:auto; }
}
@media only screen and (max-width : 767px) {
.hs {
width:230px;
height:230px;
}
.hs .hs-percentage { font-size:40px; }
.hs-text {
line-height: 1.3;
}
.c-arrow {
top:auto;
left:50%;
bottom:0;
margin-left:-25px;
}
.c-right {
left:auto;
right:50%;
margin-right:-60px;
}
#stats-bottom {
padding:0 20px;
}
}
.button {
color:#DE6580;
font-size:16px;
line-height: 1;
border:2px solid #DE6580;
font-size:16px;
padding:10px 30px;
display:inline-block;
text-decoration: none;
font-weight: bold;
}
.button.bg-button { background-color:rgba(0, 0, 0, 0.4); }
.button.b-white { border:2px solid #FFF; color:#FFF; }
#home-event-outer {
min-height:300px;
background-image:url(images/bg-hours.png);
background-repeat: no-repeat;
background-position: center top;
background-size:cover;
padding:40px 0;
box-sizing: border-box;
}
#home-event {
display: flex;
justify-content: space-between;
align-content: center;
}
.home-event {
flex-basis: 60%;
}
.home-event h2 {
color:#FFF;
}
.home-event p {
color:#FFF;
margin:0 0 10px 0;
}
#home-event .flip-clock-wrapper {
margin:30px 0 0 0 !important;
font-family: 'Montserrat', sans-serif;
}
#home-event .flip-clock-divider .flip-clock-label {color:#FFF; text-transform: uppercase;}
#home-event .flip-clock-wrapper ul { height:70px; }
.flip-clock-wrapper ul li { line-height: 50px; }
#home-event .flip-clock-wrapper ul li a div div.inn {
font-size:40px;
font-weight: 800;
color:#FFF;
}
#home-event .flip-clock-dot {
background: #FFF;
width: 7px;
height: 7px;
}
#home-event .flip-clock-dot.top {
top: 20px;
}
#home-event .flip-clock-dot.bottom {
top: 35px;
}
.home-register {
flex-basis: 30%;
}
.home-register .button {
margin-top:80px;
}
@media only screen and (max-width : 991px) {
#home-event { display: block; }
#home-event .c-holder { display:none; }
#home-event .home-register {text-align: center;}
#home-event .home-register .button { margin:30px 0 0 0; }
}
#ipa-outer {
background-image:url(images/bg-ipa.png);
background-repeat: no-repeat;
background-position: center;
background-size:cover;
padding:40px 0;
}
#ipa {
display: grid;
grid-template-columns: 50% 45%;
grid-gap: 5%;
color:#FFF;
}
#ipa #person {
max-width: 90%;
display: block;
margin:0 auto;
opacity: 0;
position: relative;
bottom: -50px;
}
#ipa h2 { margin:0 0 7px 0; }
#ipa p { color:#FFF; }
.ipa { position: relative; }
@media only screen and (min-width : 1399px) {
#ipa-text {
position: absolute;
height:100%;
display: flex;
align-items: center;
}
}
#ipa-text .button {
margin-top:20px;
}
@media only screen and (max-width : 1299px) {
#ipa {
grid-template-columns: 50% 47%;
grid-gap: 3%;
}
}
@media only screen and (max-width : 991px) {
#ipa {
display: block;
}
#ipa #person {
max-width: 100%;
position: relative;
bottom: 0;
margin-bottom:20px;
}
#ipa-button {
text-align: center;
}
}
#home-news-outer{ padding:40px 0; }
#home-news {
display: grid;
grid-template-columns: 30% 30% 30%;
grid-gap: 5%;
margin-top:40px;
color:#FFF;
line-height: 1.3;
}
#home-news h3 {
color:#FFF;
}
#home-news .home-news {
background: #DE6580;
background: linear-gradient(110deg, #FDB601,#DE6580);
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
-khtml-border-radius: 12px;
padding: 30px;
}
#home-news .home-news p, #home-news .home-news a {
font-size:24px;
line-height: 1.5;
color:#FFF;
font-weight: 800;
text-decoration: none;
}
#home-news .home-news a { font-size:19px; }
#more-news { margin-top:40px; }
@media only screen and (max-width : 991px) {
#home-news { display: block; }
#home-news .home-news { margin-bottom:20px; }
}
@media only screen and (max-width : 767px) {
#home-news .home-news,
#home-news .home-news p {
font-size:13px;
line-height: 1.5;
}
#home-news .home-news a {
font-size:15px;
}
}
#join-outer {
background: #4298DC;
background: linear-gradient(110deg, #4298DC,#DE6580);
padding:50px 0;
}
#join {
background-color:#FFF;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
-khtml-border-radius: 12px;
padding: 40px 80px;
}
#join-top {
width:640px;
margin:0 auto 40px auto;
}
.j {
height:80px;
overflow: hidden;
border-bottom:3px solid #e2e6e8;
position: relative;
padding-bottom:20px;
box-sizing: border-box;
}
.j:nth-child(1) { border-top:3px solid #e2e6e8; }
.j.active { height:auto; }
.j h3 {
font-size:24px;
font-weight: 800;
margin:25px 0 30px 0;
}
.j-table {
position: relative;
padding-left:200px;
}
.j-table img {
position: absolute;
left:0;
top:0;
}
.j-fa {
width:114px;
height:114px;
background-color:#f2f2f2;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
position: absolute;
left:0;
top:0;
display: flex;
align-items: center;
justify-content: center;
}
.j-fa svg {
color:#000000;
font-size:65px;
}
.j .j-icon {
position: absolute;
right:0;
top:-18px;
font-size:30px;
cursor: pointer;
width:30px;
height:30px;
color:#DE6580;
}
.j .j-minus { display: none; }
.j.active .j-plus { display: none; }
.j.active .j-minus { display: block; }
@media only screen and (max-width : 991px) {
#join-top { width:auto; }
}
@media only screen and (max-width : 767px) {
#join { padding: 30px 40px; }
.j {
height:80px;
overflow: hidden;
border-bottom:3px solid #e2e6e8;
position: relative;
padding-bottom:20px;
box-sizing: border-box;
}
.j-table img { width:60px; }
.j-fa {
width:60px;
height:60px;
}
.j-fa svg {
font-size:30px;
}
.j h3 { font-size:17px; }
.j-table {
position: relative;
padding-left:80px;
}
.j-text .button { font-size: 13px; text-align: center; }
.j .j-icon {
width:20px;
height:20px;
}
.j .j-icon svg {
width:100%;
}
}
#wrapper { min-height: calc(100vh - 440px); /* Account for Fixed Nav Space/Height */ }
#footer {
background-color:#333333;
padding:40px 0 80px 0;
color:#FFF;
height:350px;
box-sizing: border-box;
}
#footer p {
color:#FFF;
}
#footer hr {
border:none;
height:1px;
background-color:#FFF;
position: relative;
top:-12px;
}
#logo-footer {
width:125px;
display: block;
}
#logo-footer img { width:100%; }
#footer-nav {
margin:0;
padding:0;
}
#footer-nav li {
margin:0 35px 0 0;
padding:0;
list-style: none;
display: inline;
}
#footer-nav li a {
margin:0;
padding:0;
color:#FFF;
font-size:16px;
text-decoration: none;
font-weight: bold;
}
#footer .legal {
font-size:15px;
margin:30px 0 0 0;
}
#footer .legal a {
color:#FDB601;
}
#legal-nav {
margin:0;
padding:0;
}
#legal-nav li {
margin:0;
padding:0 12px 0 9px;
list-style: none;
display: inline;
border-right:1px solid #FFF;
}
#legal-nav li:first-child { padding-left:0; }
#legal-nav li:last-child { border:none; }
#legal-nav li a {
color:#FDB601;
font-size:15px;
}
#social-links {
color:#FFF;
margin:0;
padding:0;
position: absolute;
right:20px;
top:135px;
}
#social-links li {
color:#FFF;
margin:0 0 0 20px;
padding:0;
list-style: none;
display: inline;
font-size:25px;
}
#social-links li a { color:#FFF; }
@media only screen and (max-width : 991px) {
#footer {
text-align: center;
padding: 20px 0 0 0;
}
#logo-footer { margin:0 auto; }
#footer-nav { text-align: center; }
#footer-nav li {
margin: 0 15px 40px 15px;
line-height: 2;
}
#footer-nav li a {
white-space: nowrap;
}
#social-links {
position: static;
margin-top:20px;
width: 100%;
}
#footer .legal {
margin-top:15px;
}
#legal-nav li {
margin:0;
padding:0 12px 0 9px;
list-style: none;
display: inline;
line-height: 1;
}
}
@media only screen and (max-width : 767px) {
#wrapper { min-height: calc(100vh - 520px); /* Account for Fixed Nav Space */ }
#footer {
text-align: center;
padding: 30px 0 0 0;
height:430px;
}
#footer-nav li {
line-height: 1.5;
}
#footer-nav li a {
font-size:14px;
}
#legal-nav li a {
font-size:13px;
}
}
.hero {
background-repeat: no-repeat;
background-position: center;
background-size:cover;
height:325px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
}
.hero h1 {
color:#FFF;
font-size:41px;
font-weight: 800;
line-height: 1.2;
}
.hero h2 {
color:#FFF;
font-size:24px;
font-weight: 800;
line-height: 1.2;
}
.hero .hero-bg {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color:rgba(0, 0, 0, 0.5);
z-index: 0;
}
.hero .hero-text {
position: relative;
z-index: 1;
}
@media only screen and (max-width : 767px) {
.hero h1 { font-size:30px; }
.hero h2 { font-size:22px; }
.hero h3 { font-size:17px; }
.hero p {
font-size:13px !important;
line-height: 1.6 !important;
}
.hero-text {
padding:0 20px;
}
}
#discover {
background-image:url(images/bg-facts-discover.svg);
background-position: center top;
background-size:65px auto;
text-align: center;
height:325px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding:30px 20px;
box-sizing: border-box;
}
#discover-text {
width:900px;
margin:0 auto;
color:#FFF;
background-color:#4298DC;
padding:30px;
box-sizing: border-box;
}
@media only screen and (max-width : 991px) {
#discover { height:auto; }
#discover-text { width:auto; }
}
#discover-text p { color:#FFF; }
#gender-gap {
padding:50px 0;
background: #DE6580;
background: linear-gradient(135deg, #4298DC,#DE6580);
color:#FFF;
}
#gender-gap p {
color:#FFF;
font-size:16px;
}
#gender-columns {
display: grid;
grid-template-columns: repeat(4, 25%);
margin:80px 0;
border-left:1px solid #FFF;
min-height: 350px;
}
.g-column {
border-right:1px solid #FFF;
}
.gc {
max-width: 200px;
margin:0 auto;
padding:30px 0;
position: relative;
height:100%;
}
.gc p {
font-weight: 800;
font-size:18px;
line-height: 1.4;
}
#people {
max-width: 200px;
}
#icon-people {
margin-top:40px;
display: block;
}
.person {
position: absolute;
top:115px;
width:19px;
display: none;
}
#person-1 { left:122px; }
#person-2 { left:143px; }
#person-3 { left:163px; }
#person-4 { left:183px; }
.two-p {
width:160px;
height:160px;
display: flex;
align-items: center;
justify-content: center;
background-image:url(images/bg-circle.svg);
background-repeat: no-repeat;
background-position: center;
background-size:100% auto;
font-size:42px;
line-height: 1;
font-weight: 800;
position: relative;
top:0px;
margin:0 auto;
}
.two-p .p-2 {
opacity: 0;
position: relative;
bottom: -10px;
}
#num-70 {
text-align: center;
}
#p-70 {
opacity: 0;
position: relative;
left: -25px;
}
#num-70 p {
text-align: center;
font-size:40px;
font-weight: 800;
line-height: 1.1;
text-transform: uppercase;
}
#num-70 #p-70 {
font-size:150px;
font-weight: 800;
line-height: 0;
}
.g-bottom {
position:absolute;
bottom:90px;
left:0;
right:0;
height:100px;
}
@media only screen and (max-width : 991px) {
#gender-gap { padding:40px 0; }
#gender-gap h2 { margin:0; }
#gender-columns {
margin:0;
display: block;
border:none;
}
.g-column {
border:none;
border-bottom:1px solid #FFF;
}
.gc {
height:auto;
padding:30px 0;
}
.g-bottom {
position:static;
height:auto;
}
#num-70 {
height:210px;
overflow: hidden;
}
#icon-people { margin-top:0; }
#two-p { top:0; }
#people {
max-width: 100%;
}
}
@media only screen and (max-width : 767px) {
#p-70 { bottom:-60px; }
#year-span {
position:relative;
bottom:-80px;
font-size:30px;
}
}
#support {
margin:80px auto;
padding:60px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-khtml-border-radius: 20px;
-webkit-box-shadow: 3px 3px 20px 10px #f5f5f5;
-moz-box-shadow: 3px 3px 20px 10px #f5f5f5;
box-shadow: 3px 3px 20px 10px #f5f5f5;
}
#support #support-text {
max-width: 90%;
margin:0 auto;
}
#support #support-pipes {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-khtml-border-radius: 20px;
margin-top:50px;
}
#support #support-pipes .s-pipe {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-khtml-border-radius: 20px;
background-color:#F4F4F4;
font-size:19px;
font-weight: 800;
color:#FFF;
height:33px;
margin-bottom:20px;
position: relative;
overflow: hidden;
}
#support #support-pipes .s-pipe .p-grow {
background-color: #4298DC;
display: block;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-khtml-border-radius: 20px;
width: 0;
box-sizing: border-box;
}
#support #support-pipes .s-pipe .p-grow .p-label {
position: absolute;
top:5px;
left:20px;
display: none;
}
#support #support-pipes .s-pipe .p-grow .p-percent {
position: absolute;
top:5px;
right:20px;
display: none;
}
#not-better {
width:580px;
display: grid;
grid-template-columns: 45% 45%;
grid-gap: 10%;
margin:40px auto 0 auto;
}
#not-circle {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
background-color:#F4F4F4;
width:240px;
height:240px;
/*
background-image:url(images/icon-arrrow-down.svg);
background-repeat: no-repeat;
background-position: center 70px;
background-size:70% auto;
*/
text-align: center;
padding:20px 0 0 0;
box-sizing: border-box;
}
#not-circle p {
color:#323232;
font-size:32px;
line-height: 1;
margin:0;
font-weight: bold;
}
#not-circle #down-arrow {
opacity: 0;
position: relative;
top:0;
}
.s-label { display: none; }
@media only screen and (max-width : 767px) {
#support {
margin:40px auto;
padding:30px;
}
#support-pipes {
margin-top:25px !important;
}
.p-label { display: none !important; }
.s-label {
display: block;
font-weight: bold;
margin-bottom:10px;
}
#not-better {
width:auto;
display: block;
margin:20px auto 0 auto;
}
#not-circle { margin:0 auto; }
#not-circle p { font-size:20px !important; }
}
#remove {
display: grid;
grid-template-columns: 50% 50%;
}
#remove-1 {
background-color:#C4C4C4;
}
#remove-2 {
background-color:#6C818C;
padding:100px 30px;
}
#remove-text {
max-width: 470px;
margin:0 auto;
color:#323232;
padding:100px 0;
}
#remove-text p {
color:#323232;
}
#remove-2 #r-stat {
font-weight: 700;
font-size:12px;
color:#FFF;
font-size:114px;
line-height: 1.2;
margin-left:75px;
}
.r-row {
margin-bottom:20px;
}
.r-row .r-label {
font-weight: 700;
font-size:12px;
color:#FFF;
text-align: center;
margin-right:10px;
position: relative;
top:-15px;
display: inline-block;
width:45px;
}
.r-row .r-bubble {
background-color:#C4C4C4;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
width:38px;
height:38px;
display: inline-block;
margin-right:5px;
opacity: 0;
}
.r-row .r-two {
position: relative;
top:-9px;
}
.r-row .r-bubble.ro {
background-color:#FDB601;
}
@media only screen and (max-width : 991px) {
#remove { display: block; }
}
@media only screen and (max-width : 767px) {
#remove-text { padding:40px 20px; }
#remove-2 { padding:40px 20px; }
#remove-2 #r-stat {
font-size:80px;
margin:0 auto 20px auto;
display: block;
width:135px;
}
.r-row .r-label {
display: block;
width:150px;
text-align: left;
}
.r-row .r-label.r-two br {
display: none;
}
}
@media only screen and (max-width : 529px) {
#remove-stat {
width:246px;
margin:0 auto;
}
.r-row .r-bubble {
width:15px;
height:15px;
}
}
#imagine {
padding:100px 0 80px 0;
}
#imagine.p-imagine {
background-color:#F4F4F4;
}
#i-slider {
max-width: 900px;
margin:0 auto;
}
.i-slide {
display: grid;
grid-template-columns: 45% 50%;
grid-gap: 5%;
}
.i-img img {
display: block;
max-width: 100%;
}
.i-text {
display: flex;
align-items: center;
}
.i-arrow {
position: absolute;
color: #C4C4C4;
top:350px;
left:50px;
font-size:50px;
cursor: pointer;
display: block;
width:50px;
height:50px;
}
.i-right {
position: absolute;
color: #C4C4C4;
left:auto;
right:50px;
}
.i-arrow i {
position: relative;
z-index: 0;
}
.i-arrow img {
position: absolute;
width:100%;
height:100%;
z-index: 1;
}
.p-imagine .i-arrow {
top:250px;
}
@media only screen and (max-width : 991px) {
.i-arrow {
top:auto;
left:50%;
bottom:-40px;
margin-left:-25px;
}
.i-right {
left:auto;
right:50%;
margin-right:-60px;
}
.p-imagine .i-arrow {
top:auto;
bottom:60px;
}
}
@media only screen and (max-width : 767px) {
#imagine { padding:50px 0 60px 0; }
.i-slide { display:block; }
.i-img img { margin:0 auto; }
}
.wide-video {
max-width: 800px;
margin: 0 auto 30px auto;
}
#videos-outer {
background: #DE6580;
background: linear-gradient(65deg,#DE6580,#FDB601);
padding:60px 0 80px 0;
}
#videos-outer h2 {
margin-bottom:40px;
color:#FFF;
}
.video {
cursor: pointer;
width: 33.33333%;
display: inline-block;
margin: 0 0 30px -4px;
text-align: left;
vertical-align: top;
}
.v {
margin:0 10px;
}
.v-img {
position: relative;
}
.v img {
width: 100%;
position: relative;
z-index: 0;
}
.v svg {
color:#FFF;
font-size:80px;
z-index: 1;
position: absolute;
left:50%;
top:50%;
margin:-40px 0 0 -40px;
opacity: .70;
}
.video .vd {display: none;}
.video h3 {
color:#FFF;
font-size:16px;
}
#video-pop {
max-width: 800px;
margin:0 auto 30px auto;
position: relative;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#video-pop p { color:#FFF; }
.past-event-videos #video-pop p { color: #6C818C; }
.past-event-videos h3 { color: #6C818C; }
#video-pop .v-close {
color:#FFF;
position: absolute;
top:-5px;
right:-30px;
font-size:30px;
cursor: pointer;
}
#video-pop .v-close .svg-inline--fa {
color:#FFF;
font-size:30px;
position:relative;
z-index: 0;
}
#video-pop .v-close .clicker {
position:absolute;
z-index: 1;
top:0;
left:0;
right:0;
bottom:0;
}
@media only screen and (max-width : 991px) {
#video-pop { max-width: 85%; }
}
@media only screen and (max-width : 799px) {
#videos-outer {
padding:30px 0 10px 0;
}
.video {
width: 50%;
}
}
@media only screen and (max-width : 499px) {
.video {
width: 100%;
margin-bottom:0;
}
}
.left-right {
display:flex;
align-items: center;
justify-content: center;
}
.lr-image { flex-basis: 50%; }
.lr-image img {
width:100%;
display: block;
}
.lr-content {
flex-basis: 50%;
}
.lr-text {
max-width: 415px;
margin:0 auto;
}
.lr-text .button { margin-top:30px; }
@media only screen and (min-width : 992px) {
.lr-reverse .lr-image { order:2; }
}
@media only screen and (max-width : 991px) {
.left-right {
display: block;
}
.lr-text {
max-width:none;
padding:30px 20px;
}
}
.callout {
min-height:300px;
background-repeat: no-repeat;
background-position: center top;
background-size:cover;
color:#FFF;
display:flex;
align-items: center;
justify-content: center;
position: relative;
}
.callout .c-bg {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color:rgba(0, 0, 0, 0.5);
z-index: 0;
}
.callout .c-gradient {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index: 0;
background: linear-gradient(-45deg,#DE6580,#4298DC);
opacity: .8;
}
.callout .c-text {
position:relative;
z-index: 1;
text-align: center;
}
.callout .c-text h2 {
margin:0;
}
.callout .c-text p {
color:#FFF;
margin:15px 0 20px 0;
}
@media only screen and (max-width : 767px) {
.callout .c-text {
padding:0 20px;
}
}
#news-outer {
max-width: 1140px;
margin:0 auto;
}
#news-text {
text-align: center;
padding:80px 0;
}
.news {
background-color:#f2f2f2;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
-khtml-border-radius: 15px;
padding:40px 60px 40px 175px;
margin-bottom:30px;
position: relative;
line-height: 1.5;
}
.news a {
color:#DE6580;
font-weight: 800;
font-size:19px;
text-decoration: none;
}
.news h3 { line-height: 1.3; }
.news h3 a { color:#000; }
.news-date {
background-color:#232222;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-khtml-border-radius: 8px;
width:105px;
height:80px;
position: absolute;
left:25px;
top:40px;
text-align: center;
color:#FFF;
font-weight: bold;
}
.news-date .news-month {
font-size:20px;
line-height: .8;
text-transform: uppercase;
margin-top:17px;
}
.news-date .news-year {
font-size:30px;
}
.news-icon {
position: absolute;
left:25px;
top:150px;
font-size:50px;
text-align: center;
width:105px;
color:#DE6580;
}
.news-post {
padding:80px 0;
}
.news-single-date {
margin-bottom:20px;
}
@media only screen and (max-width : 991px) {
.news { padding:30px 30px 20px 165px; }
}
@media only screen and (max-width : 767px) {
#news-text {padding:40px 0;}
.news { padding:100px 30px 20px 30px; }
.excerpt {font-size:13px; line-height:1.4;}
.news-date {
width: 70px;
height: 60px;
left: 15px;
top: 20px;
}
.news-date .news-month { font-size:12px; }
.news-date .news-year { font-size:15px; }
.news-icon {
left:auto;
right:-10px;
top:10px;
font-size:35px;
}
.news h3 { margin-bottom:10px; }
.news a { font-size:15px; }
}
#event-cols { display: flex; }
.event-col { flex:1; position: relative; }
.event-col:first-child { background-color: #F4F4F4; }
.event-col:last-child img { max-width: 100%; }
#event-text {
margin:50px 100px;
}
@media only screen and (max-width : 991px) {
#event-cols { flex-wrap: wrap; }
.event-col { flex: 0 0 100%; }
.event-col:first-child { }
.event-col:last-child { }
#event-text { margin:35px 20px; }
}
#tweets {
background-color:#FFF;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
-khtml-border-radius: 15px;
padding:30px 20px;
margin-bottom:30px;
}
.tweet {
position: relative;
padding:40px 0 0 120px;
height:80px;
}
.tweet .tweet-name {
display: block;
font-weight: bold;
}
.tweet .tweet-img{
position: absolute;
top:0;
left:0;
}
#event-time {
background-image:url(images/event.png);
background-repeat: no-repeat;
background-position: center;
background-size:cover;
position: relative;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#event-timer {
background-color:#FDB601;
width:100%;
height:175px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
#event-timer .flip-clock-wrapper {
width:540px;
margin:40px auto 0 auto !important;
}
#event-timer .flip-clock-divider .flip-clock-label {color:#FFF; text-transform: uppercase;}
#event-timer .flip-clock-wrapper ul { height:60px; width:50px; }
#event-timer .flip-clock-wrapper ul li { line-height: 50px; }
#event-timer .flip-clock-wrapper ul li a div div.inn {
font-size:30px;
font-weight: 800;
color:#FFF;
}
#event-timer .flip-clock-dot {
background: #FFF;
width: 7px;
height: 7px;
}
#event-timer .flip-clock-dot.top {
top: 20px;
}
#event-timer .flip-clock-dot.bottom {
top: 35px;
}
@media only screen and (max-width : 991px) {
#event-timer {
display: none;
}
}
#past-events { padding:60px 0; }
#upcoming-events { padding:60px 0; }
#img-events img {
display: block;
margin:30px auto;
max-width: 100%;
}
.events-grid {
display: grid;
grid-template-columns: 31% 31% 31%;
grid-gap: 3.5%;
margin:60px 0;
}
.event-grid img {
width: 100%;
}
@media only screen and (max-width : 767px) {
#past-events { padding:30px 0; }
}
/* About */
#dedicated {
display: grid;
grid-template-columns: 50% 50%;
padding:80px 0;
}
#dedicated #d-callout {
font-size:30px;
line-height: 1.5;
color:#323232;
font-weight: 800;
max-width: 70%;
margin:0 auto;
padding:50px 40px;
-webkit-box-shadow: 0px 3px 5px 6px #f5f5f5;
-moz-box-shadow: 0px 3px 5px 6px #f5f5f5;
box-shadow: 0px 3px 5px 6px #f5f5f5;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-khtml-border-radius: 20px;
}
@media only screen and (max-width : 991px) {
#dedicated {
display: block;
padding:40px 0;
}
#dedicated #d-callout {
font-size:22px;
padding:25px 30px;
margin:40px auto 0 auto;
}
}
@media only screen and (max-width : 767px) {
#dedicated #d-callout { font-size:18px; }
}
#members-outer {
background: rgb(225,63,103);
background: linear-gradient(180deg, rgba(90,157,213,1) 0%, rgba(225,63,103,1) 60%);
padding:80px 0 20px 0;
}
#members-outer h2 {
color:#FFF;
}
#members {
margin-top:80px;
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
}
.members {
margin-bottom:60px;
display: flex;
align-items: center;
justify-content: center;
}
.members img {
display: block;
max-width: 90%;
margin:0 auto;
}
@media only screen and (max-width : 991px) {
#members-outer { padding:40px 0 10px 0; }
#members {
margin-top:30px;
grid-template-columns: 25% 25% 25% 25%;
}
}
@media only screen and (max-width : 767px) {
#members { grid-template-columns: 50% 50%; }
}
#belief-outer {
background-repeat: no-repeat;
background-position: center top;
background-size:cover;
color:#FFF;
padding:20px 0 60px 0;
}
#belief-top {
text-align: center;
padding:40px 0 30px 0;
color:#FFF;
}
#belief-top h3 {
font-size:20px;
text-transform: uppercase;
margin:0 0 10px 0;
font-weight: 700;
}
#belief {
background-color:#FFF;
display: grid;
grid-template-columns: 50% 50%;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-khtml-border-radius: 20px;
overflow: hidden;
}
#belief #b-img {
background-image:url(images/about-belief.png);
background-repeat: no-repeat;
background-position: center;
background-size:cover;
}
#b-toggle {
padding:60px 60px 60px 100px;
position: relative;
}
.b-toggles {
height:300px;
}
.b-toggle { display: none; }
.b-toggle.active { display: block; }
#belief h4 {
color:#323232;
line-height: 1.5;
}
#belief p {
line-height: 2.5;
}
#belief-nav {
margin:-87px 0 0 0;
padding:0;
position: absolute;
left:0;
top:50%;
height:174px;
}
#belief-nav li {
margin:0 0 30px 0;
padding:0 0 0 10px;
list-style:none;
color:#E3E3E3;
font-size:30px;
font-weight: 800;
border-left:18px solid #FFF;
cursor: pointer;
}
#belief-nav li.active {
color:#FDB601;
border-left:18px solid #FDB601;
}
@media only screen and (max-width : 767px) {
#belief-outer { padding:0px 0 30px 0; }
#belief-outer h2 { margin-bottom:0px; }
#belief { display: block; }
#belief #b-img { height:300px; }
#b-toggle { padding: 30px 30px 30px 100px;}
.b-toggles {
height:320px;
display: flex;
align-items: center;
justify-content: center;
}
#belief h4 { margin-top:10px; }
}
#doing {
padding:50px 0 100px 0;
}
#doing-top {
text-align: center;
}
#doing-top h2 {
margin:0;
}
#doing-top h3 {
font-size:20px;
text-transform: uppercase;
margin:0 0 10px 0;
font-weight: 700;
}
#doing h4 {
color:#323232;
line-height: 1.5;
margin:20px 0 10px 0;
}
#doing p {
line-height: 2;
}
@media only screen and (max-width : 991px) {
#doing {
padding:25px 0 50px 0;
}
}
.tile-slide {
padding:30px 0;
}
.tile {
-webkit-box-shadow: 0px 3px 5px 6px #f5f5f5;
-moz-box-shadow: 0px 3px 5px 6px #f5f5f5;
box-shadow: 0px 3px 5px 6px #f5f5f5;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-khtml-border-radius: 20px;
text-align: center;
margin:0 15px;
}
.tile .tile-pad {
height:375px;
padding:60px 30px 40px 30px;
}
.t-round {
width:80px;
height:80px;
background-color:rgba(255, 62, 103, 0.2);
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
position: relative;
margin:0 auto;
}
.t-round img {
position: absolute;
top:-15px;
right:-15px;
width:65px;
color:#DE6580;
}
.t-round svg {
position: absolute;
top:-15px;
right:-15px;
font-size:65px;
color:#DE6580;
}
@media only screen and (max-width : 991px) {
.tile .tile-pad { height:250px; }
}
@media only screen and (max-width : 767px) {
.tile .tile-pad { height:340px; }
}
#doing .slick-dots {
margin:15px 0 0 0;
padding:0;
width:100%;
text-align: center;
}
#doing .slick-dots li {
margin:0 3px;
padding:0;
list-style: none;
display: inline-block;
background-color:#E3E3E3;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
width:16px;
height:16px;
cursor: pointer;
}
#doing .slick-dots li.slick-active {
background-color:#DE6580;
}
#doing .slick-dots li button {
display: none;
}
#united {
background-color:#f3f3f3;
padding:50px 0 50px 0;
}
#united-top {
text-align: center;
}
@media only screen and (max-width : 991px) {
#united {
padding:25px 20px;
}
}
#policy {
padding:80px 0;
position: relative;
}
.bg-yellow {
background-color:#FDB601;
opacity: .80;
position: absolute;
top:0;
right:0;
left:0;
bottom:0;
z-index: 0;
}
#policy .container {
z-index: 1;
}
#policy #policy-text {
background-color:#FFF;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-khtml-border-radius: 20px;
text-align: center;
padding:50px 100px;
}
#learn-policies { text-align: center; }
@media only screen and (max-width : 991px) {
#policy { padding:40px 0; }
#policy #policy-text { padding:25px; }
#learn-policies {
text-align: center;
margin-top:40px;
}
}
@media only screen and (max-width : 991px) {
#learn-policies {
position: relative;
top:30px;
}
}
/* Take Action */
#take-action {
background: linear-gradient(-45deg, #FDB601, #DE6580);
padding:80px 0;
}
#take-action h2 {
color:#FFF;
margin-bottom:40px;
}
@media only screen and (max-width : 767px) {
#take-action { padding:40px 0; }
}
.action {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-khtml-border-radius: 20px;
background-color:#FFF;
margin-bottom:40px;
padding-bottom:40px;
}
.action-padding {
padding:40px 60px 40px 350px;
position: relative;
}
.action-img {
position: absolute;
left:55px;
top:35px
}
.action-img img {
width:240px;
}
.action-fa {
width:240px;
height:240px;
background-color:#f2f2f2;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
position: absolute;
left:55px;
top:35px;
display: flex;
align-items: center;
justify-content: center;
}
.action-fa svg {
color:#000000;
font-size:114px;
}
.action .button {
margin-top:20px;
}
.action-toggle {
display: none;
position: relative;
padding:0 40px;
}
.action-toggle.a-toggle-on { display:block; }
.action-toggle .close-action {
position: absolute;
width:50px;
height:50px;
right:30px;
top:0px;
font-size:30px;
text-align: center;
padding-top:7px;
box-sizing: border-box;
cursor: pointer;
}
.action-toggle .close-action .clicker {
position:absolute;
z-index: 1;
top:0;
left:0;
right:0;
bottom:0;
}
#letter iframe {
width:100%;
height:1200px;
margin-top:40px;
}
.a-tweet {
position: relative;
background-color:#1d9bf0;
color:#FFF;
padding:30px 160px 30px 90px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-khtml-border-radius: 20px;
}
.a-tweet p {
background-color:#1d9bf0;
color:#FFF;
}
.a-tweet svg {
font-size:50px;
position: absolute;
left:30px;
top:30px;
}
.a-tweet .button {
position: absolute;
right:30px;
top:50%;
margin-top:-15px;
border:1px solid #FFF;
color:#FFF;
}
@media only screen and (max-width : 991px) {
.action-img { left: 35px; }
.action-img img { width:175px; }
.action-fa { left: 35px; width:175px; height:175px; }
.action-fa svg { font-size:90px; }
.action-padding { padding: 40px 60px 40px 250px; }
#letter iframe { height:1500px; }
}
@media only screen and (max-width : 767px) {
.action-img {
position: static;
max-width: 250px;
margin:0 auto 20px auto;
}
.action-img img { width:100%; }
.action-fa {
position: static;
width:240px;
height:240px;
margin:0 auto 20px auto;
}
.action-fa svg { font-size:114px; }
.action-padding { padding: 20px; }
.a-tweet { padding:30px; }
.a-tweet .button {
position:static;
margin-top:10px;
}
.a-tweet svg {
font-size:30px;
position: absolute;
left:20px;
top:10px;
}
.action-toggle .close-action { top:-15px; }
}
#default {
padding:80px 0;
line-height: 1.5;
}
#default h2 {
margin-top:40px;
}
#default ul li {
margin-bottom:12px;
}
.gender-chart {
opacity: 0;
width:160px;
height:160px;
margin:0 auto;
position: relative;
}
#support-chart {
opacity: 0;
width:300px;
height:300px;
margin:0 auto;
position: relative;
}
.flex-percentage {
display: flex;
align-items: center;
justify-content: center;
font-size: 4em;
position: absolute;
z-index: 0;
width:100%;
height:100%;
font-weight: bold;
opacity: 0;
bottom: -25px;
}
.gender-chart .flex-percentage {
font-size: 3em;
}
@media only screen and (max-width : 449px) {
#support-chart {
width:200px;
height:200px;
}
.flex-percentage {
font-size: 3em;
}
}
/***********Celebration********/
.celebration_header{
background-image: url("/wp-content/uploads/celebration_header-1.jpg");
background-repeat: no-repeat;
background-position:center;
background-size: cover;
text-align: center;
padding: 230px 0px 0px 0px;
position: relative;
height: 505px;
box-sizing: border-box;
}
.celebration_header h1{ max-width:800px; margin:auto; color:#ffffff; font-size:40px; }
.celebration .container{ max-width: 1200px; }
.celebration .container .content{ display: grid; grid-template-columns: 50% 50%; padding: 0; margin-top: -50px; }
.celebration .container .content .inner-content{ padding:120px 60px 40px 40px ; line-height:40px; }
.workshop .container .content .inner-content .intro{ font-size:20px; font-weight:bold; margin-bottom:40px; line-height:30px; }
.celebration .container .content .inner-content h2{ font-size:1.8em;; color:#4298DC; margin-bottom:20px;}
.workshop .container .content .inner-content .when, .workshop .container .content .inner-content .where{ font-size:24px; font-weight:bold; margin-bottom:40px; line-height: 34px; }
.workshop p {
color:#FFF;
}
.italic p {
font-style: italic;
line-height: 30px;
}
@media only screen and (max-width : 767px) {
.italic p br {
display: none;
}
}
.celebration .container .content .form{
background-color:#4298DC;
font-size: 30px;
line-height: 1.5;
color: #ffffff;
padding: 50px 40px;
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-moz-border-radius: 20px 20px 0px 0px ;
-webkit-border-radius: 20px 20px 0px 0px ;
border-radius: 20px 20px 0px 0px ;
-khtml-border-radius: 20px 20px 0px 0px ;
}
.celebration .container .content .form h2{ font-size:1.8em; margin-bottom:20px; }
.celebration .container .content .form .label{ font-weight:bold; font-size:18px; display:block; margin-bottom:10px;}
.celebration .container .content .form input[type=text] {
font-size:16px;
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #ffffff;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
border-radius:10px;
color:#ffffff;
background:none;
}
.celebration .container .content .form input::placeholder{ color: #A1CCEE; }
.celebration .container .content .form input[type=text]:focus { border: 3px solid #ffffff; }
.celebration .container .content .form .option{
display: grid;
grid-template-columns: auto auto;
padding: 0;
column-gap: 20px;
margin-bottom: 8px;
}
.celebration .container .content .form .cta{ text-align:center; }
.celebration .container .content .form input[type=submit]{
background-color: #ffffff; /* Green */
border: none;
color: #A1CCEE;
padding: 12px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-weight:bold;
border-radius:10px;
text-transform:uppercase;
}
.celebration .container .content .form input[type=submit].inactive{
background: none; /* Green */
border: 3px solid #ffffff;
color: #A1CCEE;
}
@media only screen and (max-width : 950px) { .
.celebration_header { padding: 120px 0px 120px 0px; }
}
@media only screen and (max-width : 767px) {
.celebration_header h1{ font-size:24px; line-height: 1.5; }
.workshop .container .content .inner-content .when, .workshop .container .content .inner-content .where {
font-size:16px;
}
}
@media only screen and (max-width : 449px) {
.celebration_header{ padding: 250px 0px 120px 0px; position: relative; }
.celebration .container .content { display: block; margin-top: 0px;}
.celebration .container .content .inner-content{ padding:40px; }
}
/***********workshop********/
.workshop_header{
background: rgb(2,0,36);
background: -moz-linear-gradient(58deg, rgba(2,0,36,1) 0%, rgba(253,182,1,1) 0%, rgba(223,101,127,1) 100%);
background: -webkit-linear-gradient(58deg, rgba(2,0,36,1) 0%, rgba(253,182,1,1) 0%, rgba(223,101,127,1) 100%);
background: linear-gradient(58deg, rgba(2,0,36,1) 0%, rgba(253,182,1,1) 0%, rgba(223,101,127,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#df657f",GradientType=1);
height:505px;
}
.workshop_header .workshop_header_container{ max-width: 1200px; display: grid; grid-template-columns: 50% 50%; padding: 0; margin: 0 auto;
box-sizing: border-box;
position: relative; }
/*
.header-girl {
display: flex;
justify-content: center;
}
*/
.workshop_header .workshop_header_container img{ max-width:100%; margin:0 auto; height:505px; display:block; }
.workshop_header .workshop_header_container h1{ color:#ffffff; font-size: 44px; margin-top:80px }
.workshop_header .workshop_header_container h3{ color:#ffffff; font-size: 1.2em; text-transform:uppercase; margin:0; }
.workshop_header .workshop_header_container h4{ color:#ffffff; font-size: 1.2em; line-height:1.5em; margin-top:7px; }
@media only screen and (max-width : 900px) {
.workshop_header .workshop_header_container h4{ font-size: 14px; }
}
.mobile-description { display: none; }
@media only screen and (max-width : 767px) {
.workshop_header { height: auto; }
.workshop_header .workshop_header_container { display: block; }
.workshop_header .workshop_header_container .description { display: none; }
.mobile-description { display: block; margin:0 20px; padding-top:30px; }
.workshop_header .workshop_header_container h1 { margin:0 0 10px 0; }
}
@media only screen and (max-width : 599px) {
.workshop_header .workshop_header_container img{ height:auto; }
}
.workshop .container{ max-width: 1200px; }
.workshop .container .content{ display: grid; grid-template-columns: 50% 50%; padding: 0; margin-top: -50px; }
.workshop .container .content .inner-content{ padding:120px 60px 40px 40px ; }
.workshop .container .content .inner-content .block{ margin-bottom:40px; }
.workshop .container .content .inner-content h2{ color:#4298DC; margin-bottom:7px; font-size:40px; }
.workshop .container .content .inner-content h3{ font-size:24px; margin-bottom:0px; line-height:35px; }
.fontbold{ font-weight:bold; }
.mb20{ margin-bottom:20px; font-size:20px; line-height: 28px; }
@media only screen and (max-width : 900px) {
.workshop .container .content{
display: block;
}
.workshop .container .content .inner-content h2{
font-size:30px;
}
.workshop .container .content .inner-content h3{
font-size:18px;
}
.mb20 {
font-size:14px !important;
}
}
.workshop .container .content .form{
background-color:#4298DC;
font-size: 30px;
line-height: 1.5;
color: #ffffff;
padding: 50px 40px;
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-moz-border-radius: 20px 20px 0px 0px ;
-webkit-border-radius: 20px 20px 0px 0px ;
border-radius: 20px 20px 0px 0px ;
-khtml-border-radius: 20px 20px 0px 0px ;
}
.workshop .container .content .form h2{ font-size:40px; margin-bottom:20px; }
.workshop .container .content .form .label{
font-weight:bold; font-size:18px; display:block; margin-bottom:10px;
}
.workshop .container .content .form input[type=text],
.workshop .container .content .form input[type=email] {
font-size:16px;
width: 100%;
padding: 12px 20px !important;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #ffffff;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
border-radius:10px;
color: #A1CCEE; font-weight: bold;
background:none;
}
.workshop .container .content .form input::placeholder{ color: #A1CCEE; font-weight: bold; }
.workshop .container .content .form input[type=text]:focus { border: 3px solid #ffffff; }
.workshop .container .content .form .option{ display: grid; grid-template-columns: auto auto; padding: 0; column-gap: 20px; margin-bottom: 8px;}
.workshop .container .content .form .cta{ text-align:center; }
.workshop .container .content .form .small{ padding:10px 0; font-size:12px; text-align:center; }
.workshop .container .content .form input.yn-button {
background: none; /* Green */
border: 3px solid #ffffff;
color: #A1CCEE;
padding: 5px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
font-weight:bold;
border-radius:10px;
text-transform:uppercase;
cursor: pointer;
caret-color: transparent;
}
.workshop .container .content .form .yn-button.active{
background-color: #ffffff; /* Green */
color: #A1CCEE;
border: 3px solid #ffffff;
}
.workshop .container .content .form input[type=submit] {
background-color: #ffffff; /* Green */
border: none;
color: #A1CCEE;
padding: 12px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-weight:bold;
border-radius:10px;
text-transform:uppercase;
margin:0 auto;
cursor: pointer;
}
@media only screen and (max-width : 900px) {
.workshop .container .content .form input.yn-button {
font-size: 20px;
}
}
@media only screen and (max-width : 850px) {
.workshop_header .workshop_header_container h1{ color:#ffffff; font-size: 2.5em; }
}
@media only screen and (max-width : 449px) {
.workshop_header .workshop_header_container{ display: block; }
.workshop_header .workshop_header_container .description{ padding:30px; }
.workshop_header .workshop_header_container h1{ color:#ffffff; font-size: 2em; margin-top:10px }
.workshop_header .workshop_header_container h3{ color:#ffffff; font-size: 1em; text-transform:uppercase; }
.workshop_header .workshop_header_container h4 br { display: none; }
.workshop .container .content { display: block; margin-top:0 }
.workshop .container .content .inner-content { padding: 40px; }
.workshop .container .content .form input.yn-button { font-size: 12px; }
}
.at-inner { background: none !important; }
.at-row { display: block !important; }
.at .at-fieldset { padding:0; }
label.at-text {
font-weight:bold !important;
font-size:18px !important;
display:block !important;
margin-bottom:10px !important;
color:#FFF !important;
}
.at-row>[class^=at-] { margin:0 !important; }
.at .at-fieldset { padding:0 !important; }
.at-form-submit .at-submit { float: none !important; display: block !important; margin:o auto !important; }
label.at-text.PersonalUrl { display: none !important; }
.CustomFormFieldQuestion_3953917499265117_MappedCustomFormFieldQuestion_2761,
.CustomFormFieldQuestion_6723662430372593_MappedCustomFormFieldQuestion_2762 {
display: none !important;
}
.form { position: relative; }
#loading, .loading {
position:absolute;
z-index:1;
width:100%;
height:100%;
background-color:#FFF;
background-image:url(images/loading-icon.gif);
background-repeat:no-repeat;
background-position:center center;
opacity:0.4;
filter:alpha(opacity=40);
left:0;
top:0;
display:none;
}
#agenda-link {
background: #DE6580;
color:#FFF;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
-khtml-border-radius: 30px;
padding: 15px 20px;
display: inline-block;
font-size:16px;
font-weight: bold;
text-decoration: none;
width:300px;
margin:0 auto 30px 0;
text-align: center;
}
/********Workshop After****************/
.workshop-after .workshop_header{
background: rgb(2,0,36);
background: -moz-linear-gradient(58deg, rgba(2,0,36,1) 0%, rgba(253,182,1,1) 0%, rgba(223,101,127,1) 100%);
background: -webkit-linear-gradient(58deg, rgba(2,0,36,1) 0%, rgba(253,182,1,1) 0%, rgba(223,101,127,1) 100%);
background: linear-gradient(58deg, rgba(2,0,36,1) 0%, rgba(253,182,1,1) 0%, rgba(223,101,127,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#df657f",GradientType=1);
height:505px;
}
.workshop-after .workshop_header .workshop_header_container{ max-width: 1200px; display: grid; grid-template-columns: 50% 50%; padding: 0; margin: 0 auto;
box-sizing: border-box;
position: relative; }
.workshop-after .workshop_header .workshop_header_container img{ max-width:100%; margin:0 auto; height:505px; display:block; }
.workshop-after .workshop_header .workshop_header_container h1{ color:#ffffff; font-size: 44px; margin-top:80px }
.workshop-after .workshop_header .workshop_header_container h3{ color:#ffffff; font-size: 1.2em; text-transform:uppercase; margin:0; }
.workshop-after .workshop_header .workshop_header_container h4{ color:#ffffff; font-size: 1.2em; line-height:1.5em; margin-top:7px; }
.workshop-after .container{ max-width: 1200px; }
.workshop-after .container .content{ display: grid; grid-template-columns: 50% 40%; padding-top: 60px; }
.workshop-after .container .content .inner-content{ padding: 40px 60px; margin-bottom:50px; }
.workshop-after .container .content .inner-content .block{ }
.workshop-after .container .content .inner-content h2{ color:#DE6580; margin-bottom:7px; font-size:35px; }
.workshop-after .container .content .inner-content h3{ font-size:35px; margin-bottom:30px; line-height:50px; }
.fontbold{ font-weight:bold; }
.mb16{ margin-bottom:20px; font-size:16px; line-height: 26px; }
.mb5{ margin-bottom:5px;}
.workshop-after-speakers-block{ background-color: #4298DC; padding-top:50px; padding-bottom:50px; }
.workshop-after-speakers-block-title h2{ font-size:100px; color: #4298DC; margin:0; text-transform:uppercase; line-height:70px; }
.speaker_list {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
padding: 0;
margin: 0;
list-style: none;
}
.speaker {
width: 30%;
color: white;
}
.speaker h4{ font-size: 22px; margin:10px 0 10px 0; }
.speaker .speaker-profile{ margin-bottom: 70px;}
.speaker div.designation{ font-size: 14px; line-height:22px; font-weight:bold; font-style:italic; margin-bottom:10px; min-height:70px; }
.speaker a{ font-size: 14px; text-transform:uppercase; display:inline-block; background-color:#ffffff; color:#4298DC; text-align:center; padding:5px 15px ; border-radius:30px; text-decoration:none; font-weight:bold; }
.speaker img{ width:100%; }
.speakerModal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.speaker-modal-content {
background-color: #4298DC;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px 30px;
width: 80%; /* Could be more or less, depending on screen size */
border-radius:25px;
color:#ffffff;
}
/* The Close Button */
.close {
color: #ffffff;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.speaker-modal-content h3{ font-size:22px; margin:10px 0 10px 0; }
.speaker-modal-content .model_description{ font-size:14px; font-weight:bold; margin-bottom:10px; }
.speaker-modal-content .speaker_bio p{ font-size:14px; color:#ffffff; line-height:19px; }
#speaker_pic{ margin-right:15px; margin-bottom:15px; width:250px; height:auto; }
@media only screen and (max-width : 900px) {
.workshop-after .workshop_header_container h1{ color:#ffffff; font-size: 2.5em; }
.workshop-after .workshop_header_container h4{ font-size: 14px; line-height: 28px; }
.workshop-after .workshop_header .workshop_header_container h4 { font-size: 1em; }
.workshop-after .container .content { display: block; }
.workshop-after .container .content .inner-content { padding: 0px 60px; margin-bottom: 20px; }
}
@media only screen and (max-width : 767px) {
.workshop-after .workshop_header { height: auto; }
.workshop-after .workshop_header .workshop_header_container { display: block; }
.workshop-after .workshop_header .workshop_header_container .description { display: none; }
.mobile-description { display: block; margin:0 20px; padding-top:30px; }
.workshop-after .workshop_header .workshop_header_container h1 { margin:0 0 10px 0; }
.workshop-after .container .content .inner-content { padding: 0px 30px; margin-bottom: 20px; }
.speaker { width: 45%; color: white; }
}
@media only screen and (max-width : 599px) {
.workshop-after .workshop_header_container img{ height:auto; }
.workshop-after .container .content {
padding-top: 20px;
}
.workshop-after .container .content .inner-content {
padding: 0px ;
margin-bottom: 20px;
}
.workshop-after .container .content .inner-content h3 {
font-size: 25px;
margin-bottom: 30px;
line-height: 35px;
}
#agenda-link {
padding: 15px 10px;
font-size: 14px;
width: 250px;
}
.speaker { display:block; width: 90%; margin:0px auto; color: white; }
.workshop-after-speakers-block-title h2 {
font-size: 64px;
color: #4298DC;
margin: 0;
text-transform: uppercase;
line-height: 46px;
}
}
@media only screen and (max-width: 449px){
.workshop-after .workshop_header .workshop_header_container h1 {
color: #ffffff;
font-size: 2em;
margin-top: 10px;
}
}