html {
scroll-behavior: smooth;
}
html, body {
max-width: 100%;
overflow-x: hidden;
}
html, body, #page {
background-color: #090909 !important;
}
.tqow {
font-family: Boycott;
font-style: normal;
}
.lmabf {
font-family: Tsukushi;
font-style: normal;
}
.rs-layer {
font-family: Avenir !important;
font-weight: bold !important;
color: #eee !important;
}
.ms-completed-message {
color: #eee !important;
} #site-navigation {
margin: 0 auto !important;
}
.site-branding, .social-links, .expander {
visibility: hidden !important;
display: none !important;
}
.menu-item a, .main-navigation-container li {
border: none !important;
border-radius: 0;
}
.menu-item a:hover {
background-color: #444;
}
.main-navigation-container .menu-item-has-children > a, .main-navigation-container .menu > ul > .menu-item-has-children > a {
padding-right: 1.1em !important;
}
#menu-primary {
padding-top: 20px;
}
.mobile-search-form {
display: none;
} h1, h2, h3, h4, h5, h6, h7, h8, h9, #slider-9-slide-21-layer-6, #slider-12-slide-24-layer-6, .menu a {
font-family: Avenir;
font-style: normal;
}
.sectionHeaderContainer {
display: block;
clear: both;
margin: 10px 0;
width: 100%;
}
.sectionHeader {
size: 2.4em !important;
font-family: Avenir !important;
color: #fff !important;
display: inline-block;
}
h1, h2, h3 {
text-transform: lowercase;
}
h2 {
font-size: 2.62em !important;
margin-bottom: 0.7165em !important;
} .header-icon {
display: none;
}
.gradient {
opacity: .7 !important;
}
.verticalGradient {
background: rgb(9,9,9);
background: linear-gradient(0deg, rgba(9,9,9,1) 0%, rgba(9,9,9,0) 100%);
}
.verticalGradientInverse {
background: rgb(9,9,9);
background: linear-gradient(180deg, rgba(9,9,9,1) 0%, rgba(9,9,9,0) 100%);
}
.horizontalGradient {
background: rgb(9,9,9);
background: linear-gradient(90deg, rgba(9,9,9,1) 0%, rgba(9,9,9,0) 100%);
}
.openingText {
top: -380px;
position: relative;
z-index: 98;
height: 0px;
margin-bottom: -100px;
}
.openingText p { 
max-width: 525px;
font-size: 20px;
}
.openingPar1 {
margin-left: 20%;
}
.openingPar2 {
margin: 2em 2em;
margin-left: 50%;
}
.tab {
padding-left: 2em;
}
.openingPar1 p {
margin-bottom: 0em !important;
}
#firstHeader {
margin-top: 40px !important;
}
.site-title, .site-title-text, .logoText {
font-family: Boycott !important;
}
.site-title.site-title-text, .font-size-xl, .site-title, .site-footer .social-links, .widget-recent-entries-list .entry-date {
font-size: 1.66em !important;
}
.site-header .social-links a:hover {
color: #aaa !important;
transition: ease-in-out .3s !important;
}
.site-title.site-title-text {
color: #fff !important;
}
.wp-caption-text {
text-transform: none !important;
font-size: 18px;
color: #777;
} #vidThumbs {
display: inline-block;
text-align: center;
width: 100%;
margin-bottom: 1em;
clear: both;
}
.vidThumb {
width: 33.33%;
float:left;
margin: 0 auto;
padding-right: 16px;
padding-bottom: 16px;
}
#vidThumb3 {
padding-right: 0;
}
.vidThumb iframe {
width: 100%;
height: 215px;
}
.stealthButton {
width: 100%;
height: 100%;
} li img:hover {
opacity: .7;
transition: ease-in-out .3s;
}
.wp-block-gallery {
margin-bottom: 5em;
}
.pum-title {
display: none;
}
rs-fullwidth-wrap {
margin-bottom: 1.62em !important;
}
.header-icon {
margin-top: 0em !important;
font-size:40px;
}
.entry-content h1, .entry-content .h1 {
margin-bottom: .8em !important;
margin-top: 0.1em !important;
}
.site-content-inner {
padding-top: 0 !important;
}
.site-title.site-title-text {
font-size: 33px;
}
#intro-container {
margin-bottom: 40px;
}
.home-nav a {
border-color: #232323 !important;
}
.home-nav a:hover {
border-color: #e3e3e3 !important;
}
select, input:not([type]), input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input[type="range"] {
width: inherit !important;
} #contact-form {
text-align: left;
}
#contact-form label {
width: 100%;
}
.wpcf7-form-control {
color: #666666;
}
.entry-content p a {
color: #ffffff;
transition: ease-in-out .3s;
font-weight: bold !important;
}
.shell {
width: 100%;
overflow: auto;
display: flex;
height: 100%;
width: 100vw;
position: relative;
overflow: hidden;
}
.wpcf7-submit, .wpcf7-form-control  {
background-color: rgba(0,0,0,0) !important;
color: #999;
transition: ease-in-out .3s;
}
.wpcf7-form-control:focus {
background-color: rgba(0,0,0,.3) !important;
transition: ease-in-out .3s;
}
.form {
padding: 10px;
float: left;
background-image: linear-gradient(to right, rgba(0,0,0,.9) , rgba(0,0,0,0.6));
color: white;
padding: 3em 6%;
max-width: 640px;
}
.gradient-bar {
width: 30%;
float: left;
background-image: linear-gradient(to right, rgba(0,0,0,0.6) , transparent);
padding: 3em 0;
} .imageFrame {
background-repeat: no-repeat;
background-size: cover;
background-position-x: center;
background-position-y: center;
width: 100%;
overflow: auto;
display: flex;
height: 100%;
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
margin-top: 4em;
margin-bottom: 4em;
height: 100%;
overflow: hidden;
}
#quoteOne {
height: 700px;
}
#quoteTwo {
height: 700px;
}
#quoteThree {
height: 700px;
margin-top: 10em;
}
#quoteFour {
height: 700px;
margin-top: 10em;
}
#contactForm {
margin-bottom: 0;
}
.backgroundImage {
position: absolute;
top: 0;
left: 0;
object-position: 50% 50%;
object-fit: cover;
height: 100%;
width: 100%;
}
.imageOverlay {
background-color: rgba(9,9,9,0);
background-image: url(//thequestionofwar.org/wp-content/uploads/2021/04/imageOverlayGradient.png);
background-repeat: repeat-x;
background-size: contain;
background-position-x: center;
background-position-y: center;
width: 100%;
overflow: auto;
display: flex;
height: 100%;
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
margin-top: 4em;
height: 100%;
overflow: hidden;
margin-top: 0; 
}
.contentRight, .contentLeft {
color: white;
padding: 14em 8em 0;
max-width: 640px;
overflow: hidden;
width: 100%;
background-repeat: repeat-y;
background-size: contain;
}
.contentRight {
float: right;
background-image: url(//thequestionofwar.org/wp-content/uploads/2021/04/contentRightGradient.png);
padding-left: 0;
}
.contentLeft {
float: left;
background-image: url(//thequestionofwar.org/wp-content/uploads/2021/04/contentLeftGradient.png);
padding-right: 0;
}
.content {
font-size: 1.4em;
}
.gradientBarRight, .gradientBarLeft {
width: 30%;
padding: 3em 0;
overflow: hidden;
background-repeat: repeat-y;
background-size: contain;
}
.gradientBarRight {
float: left;
background-image: url(//thequestionofwar.org/wp-content/uploads/2021/04/gradientBarRight.png);
}
.gradientBarLeft {
float: right;
background-image: url(//thequestionofwar.org/wp-content/uploads/2021/04/gradientBarLeft.png);
} #headerFrame  {
height: 700px;
margin-top: 0;
}
#headerFrame .imageOverlay {
background-image: url(//thequestionofwar.org/wp-content/uploads/2021/04/imageOverlayGradient-banner.png);
} #logo {
width: 500px;
-webkit-animation: fadein 4s; -moz-animation: fadein 4s; -ms-animation: fadein 4s; -o-animation: fadein 4s; animation: fadein 4s;
animation-name: fadeInUp;
animation-fill-mode: both;
animation-duration: 3s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
}
p {
-webkit-animation: fadein 1s; -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s;
animation-fill-mode: both;
animation-duration: 1s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
}
.openingPar2 {
-webkit-animation: fadein 1s; -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s;
animation-name: fadeInUp;
animation-fill-mode: both;
animation-duration: 1s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
}
.openingPar1 {
-webkit-animation: fadein 1s; -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s;
animation-name: fadeInUp;
animation-fill-mode: both;
animation-duration: 1s;
-webkit-animation-delay: 1.25s;
-moz-animation-delay: 1.25s;
-o-animation-delay: 1.25s;
animation-delay: 1.25s;
}
@keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
} @-moz-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
} @-webkit-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
} @-ms-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
} @-o-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0,20%,0);transform:translate3d(0,20%,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}
#headerFrame .contentLeft {
background-image: url(//thequestionofwar.org/wp-content/uploads/2021/04/contentLeftGradient-banner.png);
padding: 0 6%;
width: 100%;
max-width: 100%;
}
#headerFrame .content {
margin-top: 30px;
overflow: hidden;  
}
#logoContainer {
text-align: left;
margin-left: 20%;
}    .mc4wp-checkbox-give input, .mc4wp-checkbox > label:nth-child(1) > input:nth-child(1), input[type="checkbox"] {
opacity: 1 !important;
position: relative !important;
}
#popmake-4784 {
background-color: rgba(0,0,0,0) !important;
box-shadow: none !important;
border: none !important;
}
.pum-theme-3837 .pum-content + .pum-close, .pum-theme-lightbox .pum-content + .pum-close {
right: 15px;
top: 10px;
}
#donationFrame {
background-image: url(//thequestionofwar.org/wp-content/uploads/2020/02/HavanaElMorro_1920w.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position-x: center;
background-position-y: center;
overflow: auto;
display: flex;
height: 1200px;
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
#donationFrame .shell, #donationFrame .form, #donationFrame .gradientBar {
height: 100%;
}
#donationFrame .form {
min-width: 40%;
max-width: 100%;
}  #colophon {
margin-top: -140px;
} .popmake {
background-color: #f5f5f5 !important;
}
.pum-content.popmake-content {
color: #090909;
}
.popmake img {
cursor: default !important;
}
.popmake-content a {
text-decoration: underline;
transition: ease-in-out .3s;
}
.popmake-content a:hover {
color: #888;
transition: ease-in-out .3s;
}  .img-thumbnail {
width: 100%;
cursor: pointer !important;
}
.video-caption {
text-align: center;
padding: 0;
margin: 0;
}
.video-thumbnail {
position: relative;
width: 100%;
cursor: pointer !important;
}
.video-thumbnail .icon {
position: absolute;
top: 50%;
left: 50%;
z-index: 98;
color: rgba(255,255,255,1);
font-size: 20px;
margin-left: -39px; margin-top: -20px; transition: all .25s;
opacity: 1;
background-color: rgba(50,50,50,.7);
padding: 10px 30px;
border-radius: 10px;
}
.video-thumbnail:hover .icon {
color: rgba(200,200,200.8);
background-color: rgba(0,0,0,.5);
opacity: 1;
}
.icon:hover + .img-thumbnail {
opacity: .7;
} .rs-sba {
font-size: 24px !important;
line-height: 29px !important;
}
.site-footer-area.footer-area-site-info {
padding: 5px 0 55px;
} #popmake-4505 {
background-color: #232323 !important;
border: none !important;
box-shadow: none !important;
}
#popmake-4505 .pum-content.popmake-content {
text-align: center !important;
}
#popmake-4505 .popmake-close {
top: 0 !important;
right: 0 !important;
}
.langButton {
margin: 10px !important;
width: 130px !important;
background-color: #ccc !important;
color: #232323 !important;
}
.bold {
font-weight: 900;
}
.light {
font-weight: 100;
}
.light2 {
font-weight: 200;
}
.langButton:hover {
background-color: #232323 !important;
color: #ccc !important;
}    @media only screen and (max-width: 1100px) {
.openingText {
top: -370px;
}
.openingPar1, #logoContainer {
margin-left: 15%;
}
.openingText p {
max-width: 425px;
}
.wpcf7-form {
margin: 0 0 3em;
}
}
@media only screen and (max-width: 1023px) {
.contentRight, .contentLeft {
padding: 14em 4em 0;
}
.contentRight {
padding-left: 0;
}
.contentLeft {
padding-right: 0;
}
}
@media only screen and (max-width: 900px) {
.openingPar2 {
margin-left: 30%;
}
#donationFrame {
background-position-x: 60%;
}
}
@media only screen and (max-width: 800px) {
.wp-image-4182 {
width: 100%;
}
#quoteThree .backgroundImage {
object-position: 60% 50%;
}
.form {
width: 100%;
background-image: linear-gradient(to right, rgba(0,0,0,.9), rgba(0,0,0,.8), rgba(0,0,0,.7), rgba(0,0,0,.6), rgba(0,0,0,.3));
}
.gradient-bar {
background-image: linear-gradient(to right, rgba(0,0,0,0.3) , transparent);
}
.wpcf7-form-control:focus {
background-color: rgba(0,0,0,.3) !important;
transition: ease-in-out .3s;
}
#contact-form {
text-align: center;
}
}
@media only screen and (max-width: 671px) {
#quoteOne .backgroundImage {
object-position: 40% 50%;
}
#quoteTwo .backgroundImage {
object-position: 65% 50%;
}
.openingPar1, .openingPar2, #logoContainer {
margin-left: 0%;
margin-right: 0%;
width: 100%;
padding: 0 5%;
}
.openingPar2 {
margin-top: 2em;
}
.openingPar1 p, .openingPar2 p {
width: 100%;
max-width: 100%;
}
#menu-primary {
padding-top: 0px;
}
}
@media only screen and (max-width: 620px) {
.content {
font-size: 1.3em;
}
.vidThumb {
width: 100%;
padding:0 0 16px;
}
.gradient-bar {
display: none;
}
}
@media only screen and (max-width: 540px) {
.openingText {
top: -420px;
}
#headerFrame .imageOverlay {
background-image: linear-gradient(rgba(9,9,9,.3) 0%, rgba(9,9,9,.8) 60%, rgb(9, 9, 9) 100%);
}
#headerFrame .contentLeft {
background-image: linear-gradient(to right, rgba(9,9,9,0) , rgba(9,9,9,0));
padding: 0 6%;
width: 100%;
max-width: 100%;
}
#quoteTwo .backgroundImage {
object-position: 70% 50%;
}
.rs-sba {
font-size: 24px !important;
line-height: 24px !important;
}
}
@media only screen and (max-width: 450px) {
.openingPar1, .openingPar2, #logoContainer {
padding: 0;
}
.openingText {
top: -450px;
}
#quoteOne .backgroundImage {
object-position: 35% 50%;
}
.contentRight, .contentLeft {
padding: 14em 2em 0;
}
.contentRight {
padding-left: 0;
}
.contentLeft {
padding-right: 0;
}
.content {
font-size: 1.2em;
}
.rs-sba {
font-size: 20px !important;
line-height: 20px !important;
}
}
@media only screen and (max-width: 350px) {
#headerFrame .imageOverlay {
background-image: linear-gradient(rgba(9,9,9,.3) 0%, rgba(9,9,9,.8) 50%, rgb(9, 9, 9) 100%);
}
.openingText {
top: -500px;
}
}