/* Default CSS */
/* Generated by the CoffeeCup HTML Editor - www.coffeecup.com */
*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
 }
 .header{
    min-height:100vh;
    width:100%;
    background-image:url(images/blackbubbles.jpg);
    background-position:center;
    background-size:cover;
    padding-bottom: 50px;
    position:relative;
    overflow:hidden;
}

.header h1{
    margin-top: 100px;
    text-align:center;
    color:#fff;
}

.header h2{
    margin-top: 100px;
    text-align:center;
    color:#fff;
}

nav{
     display: flex;
     padding: 2% 6%;
     justify-content: space-between;
     align-items: center;
}

.nav-links{
    flex: 1;
    text-align:right;
}
.nav-links ul li{
    list-style:none;
    display:inline-block;
    padding: 8px 12px;
    position:relative;
}
.nav-links ul li a{
    /*color: #B23C1C;*/
    color: #fff;
    /*color: #8E8E8E;*/
    text-decoration:none;
    font-size:13px;
}
.nav-links ul li::after{
    content:'';
    width:0%;
    height:2px;
    background: #f44336;
    display:block;
    margin:auto;
    transition:0.5s;
}
.nav-links ul li:hover::after{
    width: 100%;
}

.text-box{
         width: 90%;
         color: #fff;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%,-50%);
         text-align:center;
 }
.text-box h1{
        font-size: 62px;
 }
.text-box p{
        margin: 10px 0 40px;
        font-size: 14px;
        color: #fff;
}

.hero-btn{
        display:inline-block;
        text-decoration:none;
        color: #fff;
        border: 1px solid #fff;
        padding: 12px 34px;
        font-size: 13px;
        background: transparent;
        position:relative;
        cursor:pointer;
       
}
.hero-btn:hover{
        border: 1px solid #f44336;
        background: #f44336;
        transition: 1s;
}

nav .fa{
       display:none;
}

 h1{
    font-size: 36px;
    font-weight:600;
 }
  
 p{
   color: #777;
   font-size: 14px;
   font-weight:300;
   line-height: 22px;
   padding: 10px;
}
 
.title{
     color: #B23C1C;
     padding:0px 0px 0px 0px;
}

.title h1{
     text-align:center;
     font-style:normal;
     font-size:35px;
     padding:0px 0px 0px 0px;
     
}

.title h2{
     text-align:center;
     font-size:25px;
     color: #FFFFFF;
     padding:0px 0px 0px 0px;     
}

.title p{
     text-align:center;
     color: #fff;
     font-style:italic;
     padding:0px 0px 0px 0px;
 }
 
 .title h4{
     padding:0px 0px 0px 0px;
     text-align:center;
     color: #FFFFFF;
 }
  
 .title .introduction p{
     text-align:center;
     color: #FFFFFF;
     font-size:15px;
     padding:0px 260px 0px 260px;
 }
  
.center {
     display: block;
     margin-left: auto;
     margin-right: auto;
     width: 100%;
}
.splash img{
     width:750px;
     height:300px;
     padding:0px 0px 0px 0px;
}
.portrait img{
     width:350px;
     height:400px;
     padding:0px 0px 0px 0px;
}
.portrait2 img{
     width:250px;
     height:350px;
     padding:10px 0px 0px 0px;
}

.landscape img{
     width:350px;
     height:300px;
     padding:30px 0px 0px 0px;
}

.landscape2 img{
     width:350px;
     height:300px;
     padding:20px 0px 0px 0px;
}

.square_image img{
     width:300px;
     height:300px;
     padding:10px 0px 0px 0px;
}

.title .about{
      flex-basis: 31%;
      background: none;
      margin-bottom: 5%;
      padding: 20px 200px;
      box-sizing:border-box;
      transition: 0.5s;
}

.title .about p{
     text-align:left;
     color: #FFFFFF;
     font-size:15px;
     padding:0px 0px 0px 0px;
     margin-bottom: -6%;
}

.title .recommended_reading{
      flex-basis: 31%;
      background: none;
      margin-bottom: 5%;
      padding: 20px 200px;
      box-sizing:border-box;
}

.title .recommended_reading p{
     text-align:left;
     color: #FFFFFF;
     font-size:15px;
     padding:0px 0px 0px 0px;
     margin-bottom: -6%;
}

.title .views h3{
     padding:0px 0px 0px 200px;
     text-align:left;
     color:#FFFFFF;
}
.title .views p{
     text-align:left;
     color: #FFFFFF;
     font-size:15px;
     padding:0px 100px 0px 200px;
}
.title .release h3{
    padding:0px 0px 0px 200px;
    text-align:left;
    color:#FFFFFF;
}
.title .release p{
    text-align:left;
    font-size: 15px;
    color:#f44336;
    font-style:italic;
    padding:0px 0px 0px 200px;
}
.row{
      margin-top:2%;
      display:flex;
      justify-content:space-between;
}

.red-btn{
     border: 1px solid #f44336;
     background:transparent;
     color: #f44336;
 }
 
 .red-btn:hover{
     color: #fff;
 }
 
 /*----------contact page---------*/
.contact-us{
    width: 80%;
    margin:auto;
}

.contact-col{
    flex-basis: 48%;
    margin-bottom: 30px;
}
.contact-col div{
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}
.contact-col div .fa{
    font-size: 28px;
    color: #f44336;
    margin: 10px;
    margin-right: 30px;
}
.contact-col div p{
    padding: 0;
    color: #FFFFFF;
}
.contact-col div h5{
    font-size: 20px;
    margin-bottom: 5px;
    color: #FFFFFF;
    font-weight:400;
}
.contact-col input, .contact-col textarea{
    width: 100%;
    padding: 15px;
    margin-bottom: 17px;
    outline: none;
    border: 1px solid #ccc;
    box-sizing:border-box;
}

/*poetry categories*/ 
.categories h1{
    color:#FFFFFF;
    text-align:center;
}
.categories .row .category_row_1 h3{
    color:#FFFFFF;    
}

.categories .row .category_row_2 h3{
    color:#FFFFFF;
}

.categories .row .category_row_3 h3{
    color:#FFFFFF;
}

.categories .row .category_row_1 ul li a{
    color:#f44336;
    font-size: 17px;
    list-style:none;
    text-decoration:none;
    position:relative;
    padding:0px 0px 0px 0px;
 }
.categories .row .category_row_2 ul li a{
    color:#f44336;
    font-size: 17px;
    list-style:none;
    text-decoration:none;
    position:relative;
    padding:0px 0px 0px 0px;
}

.categories .row .category_row_3 ul li a{
    color:#f44336;
    font-size: 17px;
    list-style:none;
    text-decoration:none;
    position:relative;
}

/*verse formatting*/

.one_verse{
     flex-basis: 100%;
 }
 
.one_verse p{
     color:#FFFFFF;
     font-size:small;
     font-style:normal;
     text-align:center;
     padding:0px 0px 0px 0px;
 }
 
.one_verse_la{
     flex-basis: 100%;
 }
.one_verse_la p{
     color:#FFFFFF;
     font-size:small;
     font-style:normal;
     text-align:left;
     padding:0px 0px 0px 520px;
 }
  

.two_verses{
     flex-basis: 100%;
 }
.two_verses p{
     color:#FFFFFF;
     font-size:small;
     font-style:normal;
     padding:0px 50px 0px 75px;
 }
 
.two_verses2{
     flex-basis: 100%;
 }
.two_verses2 p{
     color:#FFFFFF;
     font-size:small;
     font-style:normal;
     padding:0px 50px 0px 75px;
 }
  
.three_verses{
     flex-basis: 34%;
     padding: 0px 0px;
 }
.three_verses img{
     width: 100%;
 }
.three_verses p{
     color:#FFFFFF;
     font-size:small;
     font-style:normal;
     padding:0px 0px 0px 75px;
 }
 
.picture_row{
     display:flex;
     gap: 40px;
     margin-bottom:-8%;
     margin-left:28%;
     margin-right:28%;
 }

.picture_column{
     width:350px;
     height:300px;
     vertical-align:center;  
}

.verse_between_two_pictures{
     flex-basis: 48%;
     padding: 5px 20px;
 }
.verse_between_two_pictures img{
     width: 100%;
 }
.verse_between_two_pictures p{
     color:#FFFFFF;
     font-size:small;
     padding:0px 0px 0px 50px;
 }
 
.picture_between_two_verses{
     flex-basis: 48%;
     padding: 5px 20px;
 }
 .picture_between_two_verses img{
     width: 100%;
 }
.picture_between_two_verses p{
     color:#FFFFFF;
     font-size:small;
     padding:0px 0px 0px 100px;
 }
 
 
/*bubbles animation*/
 
.bubbles img{
     width:50px;
     animation:bubble 7s linear infinite;
}

.bubbles{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-around;
    position:absolute;
    bottom:-70px;
}

@keyframes bubble{
    0%{
        transform:translateY(0);
        opacity:0;
    }
    50%{
        
        opacity:1;
    }
    70%{
        
        opacity:1;
    }
    100%{
        transform:translateY(-80vh);
        opacity:0;
    }

}

.bubbles img:nth-child(1){
    animation-delay:2s;
    width:25px;
}
.bubbles img:nth-child(2){
    animation-delay:1s;
}
.bubbles img:nth-child(3){
    animation-delay:3s;
    width:25px;
}
.bubbles img:nth-child(4){
    animation-delay:4.5s;
}
.bubbles img:nth-child(5){
    animation-delay:3s;
}
.bubbles img:nth-child(6){
    animation-delay:6s;
    width:20px;
}
.bubbles img:nth-child(7){
    animation-delay:7s;
    width:35px;
}

@media(max-width: 900px){

.header h1{
    margin-top: 20px;
    text-align:center;
    color:#fff;
    font-size:22px;
}

.categories h1{
    color:#FFFFFF;
    text-align:center;
    font-size:22px;
}
.categories .row .category_row_1 h3{
    color:#FFFFFF;
    font-size:18px;
}
.categories .row .category_row_2 h3{
    color:#FFFFFF;
    font-size:18px;
}
.categories .row .category_row_3 h3{
    color:#FFFFFF;
    font-size:18px;
}

.categories .row .category_row_1 ul li a{
    color:#f44336;
    font-size:12px;
    list-style:none;
    text-decoration:none;
    position:relative;
}
.categories .row .category_row_2 ul li a{
    color:#f44336;
    font-size:12px;
    list-style:none;
    text-decoration:none;
    position:relative;
}
.categories .row .category_row_3 ul li a{
    color:#f44336;
    font-size:12px;
    list-style:none;
    text-decoration:none;
    position:relative;
}

.title .introduction p{
        font-size:12px;
        position:center;
        padding:0px 100px 0px 100px;
} 

.one_verse_la p{
     color:#FFFFFF;
     font-size:small;
     font-style:normal;
     text-align:left;
     padding:0px 0px 0px 210px;
 }
 
.picture_row{
     display:flex;
     gap: 20px;
     margin-bottom:-20%;
     margin-left:20%;
     margin-right:20%;
}

.picture_column{
     width:350px;
     height:300px;
     vertical-align:center;
}

.center {
     display: block;
     margin-left: auto;
     margin-right: auto;
     width: 100%;
} 

.square_image img{
     width:200px;
     height:200px;
     padding:0px 0px 0px 30px;
} 

.splash img{
        display:flex;
        justify-content:center;
        width:275px;
        height:175px;
        padding:0px 0px 0px 0px; 
 }

}     

@media(max-width: 700px){

.header h1{
    margin-top: 30px;
    text-align:center;
    color:#fff;
    font-size:larger;
}

.categories h1{
    color:#FFFFFF;
    text-align:center;
    font-size:18px;
}
.categories .row .category_row_1 h3{
    color:#FFFFFF;
    font-size:15px;
}
.categories .row .category_row_2 h3{
    color:#FFFFFF;
    font-size:15px;
}
.categories .row .category_row_3 h3{
    color:#FFFFFF;
    font-size:15px;
}
.categories .row .category_row_1 ul li a{
    color:#f44336;
    font-size:10px;
    list-style:none;
    text-decoration:none;
    position:relative;
}
.categories .row .category_row_2 ul li a{
    color:#f44336;
    font-size:10px;
    list-style:none;
    text-decoration:none;
    position:relative;
}
.categories .row .category_row_3 ul li a{
    color:#f44336;
    font-size:10px;
    list-style:none;
    text-decoration:none;
    position:relative;
}

.nav-links ul li{
          display:block;
 }
 
.nav-links{
           position:fixed;
           background: #f44336;
           height: 100vh;
           width: 200px;
           top: 0;
           right: -200px;
           text-align:left;
           z-index: 2;
           transition: 1s;
}
nav .fa{
            display:block;
            color: #fff;
            margin: 10px;
            font-size: 22px;
            cursor:pointer;
}
.nav-links ul{
            padding:30px;
}
.title h1{
        font-size:20px;
        position:relative;
        padding:0px 0px 0px 0px;
}
.title p{
     color: #fff;
     font-style:italic;
     padding:0px 0px 0px 0px;
 }
        
.title .introduction h4{
        font-size:15px;
        position:center;
        padding:0px 0px 0px 0px;
}
        
.title .introduction p{
        font-size:12px;
        position:center;
        padding:0px 20px 0px 20px;
} 
   
.row{
      margin-top:3%;
      margin-bottom:3%;
      display:flex;
      justify-content:space-between;
      padding:0px 0px 0px 0px;
}

.one_verse{
     flex-basis: 100%;
 }
 
.one_verse p{
     color:#FFFFFF;
     font-size:10px;
     font-style:normal;
     text-align:center;
     padding:0px 0px 0px 0px;
 }
 
 .one_verse_la{
     flex-basis: 100%;
 }
.one_verse_la p{
     color:#FFFFFF;
     font-size:10px;
     font-style:normal;
     text-align:left;
     padding:0px 0px 0px 70px;
 }
 
.title .about{
      flex-basis: 100%;
      background: none;
      margin-bottom: 5%;
      padding: 20px 30px;
      box-sizing:border-box;
}

.title .about p{
     text-align:left;
     color: #FFFFFF;
     font-size:10px;
     padding:0px 0px 0px 0px;
     margin-bottom: -6%;
}
 
.title .recommended_reading{
      flex-basis: 100%;
      background: none;
      margin-bottom: 5%;
      padding: 20px 30px;
      box-sizing:border-box;
}

.title .recommended_reading p{
     text-align:left;
     color: #FFFFFF;
     font-size:10px;
     padding:0px 0px 0px 0px;
     margin-bottom: -6%;
}

.title .views h3{
     padding:0px 30px;
     font-size:15px;
     text-align:left;
     color:#FFFFFF;
}
.title .views p{
     padding:20px 30px;
     font-size:10px;
     text-align:left;
     color: #FFFFFF;
}

.title .release h3{
    padding:0px 30px;
    font-size:15px;
    text-align:left;
    color:#FFFFFF;
}
.title .release p{
    text-align:left;
    font-size: 15px;
    color:#f44336;
    font-style:italic;
    padding:0px 30px;
}

.two_verses2{
     flex-basis: 100%;
 }
.two_verses2 p{
     color:#FFFFFF;
     font-size:9px;
     font-style:normal;
     padding:0px 0px 0px 0px;
 }
 
.verse_between_two_pictures{
     /*flex-basis: 25%;*/
     padding: 0px 0px;
 }
.verse_between_two_pictures img{
     width: 100%;
 }
.verse_between_two_pictures p{
     color:#FFFFFF;
     font-size:10px;
     padding:0px 0px 0px 10px;
 }
 
.picture_row{
     display:flex;
     gap: 20px;
     margin-bottom:-60%;
}

.picture_column{
     width:350px;
     height:300px;
     vertical-align:center;     
}

.center {
     display: block;
     margin-left: auto;
     margin-right: auto;
     width: 100%;
}   
         
.splash img{
        display:flex;
        justify-content:center;
        width:300px;
        height:150px;
        padding:0px 0px 0px 0px; 
 }
 
.portrait2 img{
     width:200px;
     height:250px;
     padding:0px 0px 0px 0px;
}

.square_image img{
     width:200px;
     height:200px;
     padding:0px 0px 0px 20px;
}
 
 .landscape img{
     width:200px;
     height:150px;
     padding:0px 10px 0px 10px;
 }
 
 .landscape2 img{
     width:150px;
     height:200px;
     padding:30px 0px 0px 0px;
}

/*----------contact page---------*/
.header h2{
    font-size: 20px;
    margin-top: 100px;
    text-align:center;
    color:#fff;
}

.contact-us{
    width: 100%;
    margin:auto;
}

.contact-col{
    flex-basis: 48%;
    margin-bottom: 30px;
}
.contact-col div{
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}
.contact-col div .fa{
    font-size: 28px;
    color: #f44336;
    margin: 10px;
    margin-right: 10px;
}
.contact-col div p{
    font-size: 10px;
    padding: 0;
    color: #FFFFFF;
}
.contact-col div h5{
    font-size: 15px;
    margin-bottom: 5px;
    color: #FFFFFF;
    font-weight:400;
}
.contact-col input, .contact-col textarea{
    width: 90%;
    padding: 10px;
    margin-bottom: 17px;
    outline: none;
    border: 1px solid #ccc;
    box-sizing:border-box;
}


}