@import url(https://fonts.googleapis.com/css2?family=Mea+Culpa&display=swap);
@import url(https://fonts.googleapis.com/css?family=Oswald:300,400,700);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic);

.big {
    text-align: center;
    color : white;
    background-image: linear-gradient(125deg, #fdfcfb 0%, #2F4F4F 100%);
}
h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
  font-family: 'Mea Culpa', cursive;
  font-size: 80px;
}
h3 {
    font-size: 20px;
    color: white;
    text-shadow: 2px 2px 4px #000000;
}
h2 {
    font-size: 40px;
    text-transform: uppercase;
    color: #fff;
    background-image: linear-gradient(125deg, #fdfcfb 0%, #2F4F4F 100%);
    font-weight: 800;
    margin : 20px 0px 20px;
    text-align: center;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px #000000;
}
h4 {
    font-size: 30px;
    text-transform: uppercase;
    color: #fff;
    /*background-image: linear-gradient(125deg, #fdfcfb 0%, #2F4F4F 100%); */
    font-weight: 800;
    margin : 20px 0px 20px;
    text-align: center;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px #000000;
}
.container-fluid {
    padding-top: 0.5rem;    
}
.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 10px; 
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 12px 20px 0 rgba(0,0,0,0.2);
}

.card-header {
    text-align: center;
    text-transform: uppercase;
    color: #2F4F4F;
}
.card .list-group-item {
    font-style: italic;
    color: #2F4F4F;
}
.card-body h5 {
    text-align: center;
    text-transform: uppercase;
    background-color: white; 
    border: 4px solid #2F4F4F;
    border-radius: 15px;
    color: #2F4F4F;
}
.card-title h3 {
    text-align: center;
}
.btn-gate {
    background-color: white; 
    border: 4px solid #2F4F4F;
    border-radius: 15px;
    color: #2F4F4F;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    transition-duration: 0.4s;
}
.btn-gate:hover {
    background-color: #2F4F4F; 
    color: white;
}
.btn-login {
    background-color: white; 
    border: 1rem;
    color: #2F4F4F;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    transition-duration: 0.4s;
}
.btn-login:hover {
    background-color: white;
    color: #2F4F4F;
}
.copyright {
    font: 400 15px Arial, sans-serif !important;
    color: #2F4F4F;
}
.copyright a:link, .copyright a:visited {
    background-color: white;
    color: #2F4F4F;
    padding: 2px 2px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
.copyright a:hover, .copyright a:active {
    background-color: #2F4F4F;
    color: white;
}
.fa-angle-up {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #2F4F4F;
    opacity: .5;
    transition: .2s linear;
}

.fa-angle-up a:hover {
    opacity: .1;
}
.btn{
    background-color: #2F4F4F;
    color: #fff;
    font-size: 20px;
    letter-spacing: 4px;
    font-weight: 600;
    border-color: #fff;
}
.btn:hover {    
    background-color: #fff !important;
    color: #2F4F4F;
}
.nav .nav-item .nav-link {
    color: #2F4F4F !important;
}
.nav .dropdown .nav-link {
    color: #2F4F4F !important;
}
.capital { 
    text-transform: capitalize;
}

.tooltip.show {
  opacity: 3;
}

.tooltip-inner {
    background-color: #2F4F4F;
    box-shadow: 0px 0px 4px black;
    opacity: 1 !important;
}

.tooltip.bs-tooltip-right .arrow:before {
    border-right-color: #2F4F4F !important;
}

.tooltip.bs-tooltip-left .arrow:before {
    border-left-color: #2F4F4F !important;
}

.tooltip.bs-tooltip-bottom .arrow:before {
    border-bottom-color: #2F4F4F !important;
}

.tooltip.bs-tooltip-top .arrow:before {
    border-top-color: #2F4F4F !important;
}

#opengates-world .parallax-one {
    padding-top: 200px; 
    padding-bottom: 200px; 
    overflow: hidden; 
    position: relative; 
    width: 100%; 
    background-image: url("../BeitBridgeLight.webp"); 
    background-attachment: fixed; 
    background-size: cover; 
    -moz-background-size: cover; 
    -webkit-background-size: cover; 
    background-repeat: no-repeat; 
    background-position: top center;
}

#opengates-world .parallax-two {
    padding-top: 200px; 
    padding-bottom: 200px; 
    overflow: hidden; 
    position: relative; 
    width: 100%; 
    background-image: url("../CityHarareLight.jpg"); 
    background-attachment: fixed; 
    background-size: cover; 
    -moz-background-size: cover; 
    -webkit-background-size: cover; 
    background-repeat: no-repeat; 
    background-position: top center;
}

#opengates-world .parallax-three {
    padding-top: 200px; 
    padding-bottom: 200px; 
    overflow: hidden; 
    position: relative; 
    width: 100%; 
    background-image: url("../GreatRuinsLight.jpg"); 
    background-attachment: fixed; 
    background-size: cover; 
    -moz-background-size: cover; 
    -webkit-background-size: cover; 
    background-repeat: no-repeat; 
    background-position: top center;
}

#opengates-world .block {
    background: white; 
    padding: 60px; 
    width:820px; 
    margin:0 auto; 
    text-align:justify;
}
#opengates-world .block-gray {
    background: #f2f2f2;
    padding: 60px;
}
#opengates-world .section-overlay-mask {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: black; 
    opacity: 0.70;
}

@media screen and (max-width: 959px) and (min-width: 768px) {
    #opengates-world .block {
        padding: 40px; 
        width:620px;
    }
}
@media screen and (max-width: 767px) and (min-width: 479px) {
    #opengates-world .block {
        padding: 30px; 
        width:420px;
    }
    #opengates-world .h7 .h8 {
        font-size:50%;
    }
    #opengates-world .block {
        padding: 30px;
    }
    #opengates-world .parallax-one, #opengates-world .parallax-two {
        padding-top:100px; 
        padding-bottom:100px;
    }
}
@media screen and (max-width: 479px) {
    #opengates-world .block {
        padding: 30px 15px; 
        width:290px;
    }
    #opengates-world h7 h8 {
        font-size:20%;
    }
}

#opengates-world h7 {
    font-family:'Mea Culpa', cursive; 
    font-size:10vw;     
    text-align:center; 
    color:#2F4F4F;     
    text-shadow: 2px 2px 5px white;
}

#opengates-world h8 {
    font-family:'Mea Culpa', cursive; 
    font-size:8vw;     
    text-align:center; 
    color:#2F4F4F;     
    text-shadow: 2px 2px 5px white;
}
#opengates-world p {
    font-family:'Source Sans Pro', sans-serif;; 
    font-size:2vw;     
}
.first-character {
    font-weight:400; 
    float: left; 
    font-size: 84px; 
    line-height: 64px; 
    padding-top: 4px; 
    padding-right: 8px; 
    padding-left: 3px; 
    font-family: 'Source Sans Pro', sans-serif;
}