*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{
    font-family: "Open Sans",Helvetica,Arial,sans-serif,"Playfair Display",serif;
    font-size:16px;
    font-weight:normal;

}

.container{
    display:block;
    width:100%;
    height:700px;
    position:relative;
    background:url("/images/readingbook-bg.jpg");
    background-repeat: no-repeat;
    background-size:cover;
    background-position:left 15%;
    
}

.overlay{
    content:"";
    display:block;
    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
    background:linear-gradient(to right, rgba(0,0,0,0.8) 0%,rgba(36,36,36,0) 100%);
}

#page-header{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    width:100%;
    height:100px;
    background-color:rgb(41, 41, 41);
    position:fixed;
    z-index:10;
}

#logo{
    width:140px;
    height:100px;
    
}

.wrapper{
    position:relative;
    top:100px;
    left:0px;
    width:100%;
    height:600px;

}

main{
    display:block;
    height:600px;
    width:100%;
    margin:0;
}

.header-central{
    max-width:60%;
    height:100%;
    margin:0px auto;
    margin:0px auto 30px 20px;
    text-align: center;   
    padding-top:100px; 
}
#main-header{
    width:80%;
    color:#fff;
}
 .main-heading{
    font-family:"Playfair Display",sans-serif,Arial,serif;
    font-size:60px;
    font-weight:400;
    text-transform: uppercase;
    line-height:1.2;
 }
 .content{
     width:80%;
     height :20%;
     padding:20px;
     margin:5px 0px 5px 20px;
 }
 .details{
    color:#fff;
    font-size:22px;
    text-align:center;
 
 }
 .no-decoration{
     text-decoration:none;
 }

 #call-to-action{
    width:60%;
    min-height:40%;
    padding-left:20px;
    margin:20px auto 20px 40px;

}
#call-to-action a{
    display: block;
    /* width:80%; */
    width:100%;
    height:50px;
    margin:20px auto;
    text-decoration:none;
}
.cta{
     color:#000;
     width:100%;
     height:50px;
     margin:10px auto;        
     /* text-transform: uppercase; */
     font-family:"Open Sans",Helvetica,Arial,sans-serif,"Playfair Display",serif;
     font-weight:bold;
     font-size:18px;  
     text-decoration:none;   
 }
 p.cta {
    width:100%;
    padding:12px;
    opacity:0.8;
    border-radius:5px;
    color:#fff;
 }
.button-big{
    display:block;
    padding:10px 0;
    border-radius:5px;
    background-color:rgb(230, 230, 230);
    color:rgb(20, 20, 20);
    opacity:0.8;
}
.button-big:hover,a.cta:hover,.card-button a:hover{
    cursor:pointer;
    color:#256eaa;
}

.paragraph-link-text{
    text-align:center;
    padding:20px;
    text-transform:uppercase;
    color:#0d4675;
    font-weight:bold;
    background-color:rgb(182, 182, 182);
    margin:20px;
    border-radius:5px;
}


.block-wrapper:nth-of-type(odd){
    background-color:rgb(240, 240, 240);
}
.block-big{
    padding:50px;
}

.block-paragraph{
    color:#3e3e3b;
    padding:10px;
    line-height:150%;
    text-align:left;
    word-wrap:break-word;
}

.column-block{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
}
 .column-paragraph{
     width:30%;
     margin: 20px auto;
 }
.page-wrapper{
   padding-top:100px;   /* Give space for the dynamically included header */

}

.grid{
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    padding:30px;   
    width:100%;
}

.grid:nth-of-type(odd){
    background-color: rgb(233, 233, 233);
    
}
.grid:nth-of-type(even){
    background-color: rgb(245, 245, 245);
}

.grid-paragraph{
    flex-direction:column;
    flex-basis:50%;
    padding:20px;
    line-height:150%;
    color:#3e3e3b;
}

.normal-paragraph{
    padding-bottom:10px;
}

.grid-image{
    flex-basis:50%;
    padding-top:20px;
}

.paragraph-header{
    text-align:center;
    font-size:20px;
    padding-bottom:10px;
    color:#0d4675;
}
.block-header{
    font-size:25px;
    font-family:"Playfair Display",serif,Helvetica,Arial;
    text-align:center;
    padding:30px 0px 20px 0px;
    color:#0d4675;
    
}
.block-header h2,h3,h4,h5,h6{
    font-weight:normal;
    
}

.block-video{
    display:block;
    width:90%;
    height:480px;
    margin:20px auto;
}

iframe{
    width:100%;
    height:100%;

}
.card-grid{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-around;
    padding:20px;   
    width:100%;
}


.block-image{
    max-width:100%;
    height:auto;
}
.card{
    width:50%;    
    padding:15px;

}

.card-image{
    max-width:100%;
    height:auto;
}

.card-header{
    text-align:left;
    font-size:20px;
    padding-bottom:20px;
    color:#0d4675;
    text-transform:uppercase;
}

.card-description{
    width:90%;
    text-align:left;
    padding:10px 0px;
    line-height:150%;
    color:#3e3e3b;
}
.card-button{
    padding:15px 0;
}
.card-button a{
    text-decoration:none;
    
}

.text-center{
    text-align:center;
}

.text-left{
    text-align:left;
}

.text-upper{
    text-transform:uppercase;
}

.image-bdr{
    border:2px solid rgb(128, 128, 128);
}

.community-image-gallery .image-row{
    display:flex;
    flex-direction:row;
    justify-content:center;
    flex-wrap:wrap;
}

.community-image-gallery .image-wrapper{
    padding:10px;
    width:40%;
}

.image-wrapper .image{
    width:100%;
    height:100%;
}


#navBar{
    display:flex;
    width:70%;
    height:80px;
}
#navBar ul{
    display:flex;
    justify-content:space-around;
    align-items:center;   
    width:100%;
    height:80px;
    
}

#navBar ul li{
    list-style-type:none;
    
}
#navBar ul li a{
    padding:10px;
    color:#fff;
    text-decoration:none;
    transition-property:color,background-color,border-radius;
    transition-duration: 500ms;
}
#navBar ul li a:hover{
    border-radius:5px;
    color:#fff;
}

.menu-icon-wrapper{
    display:none;
}

#icon-bar-top,#icon-bar-middle,#icon-bar-bottom{
    display:none;

}


#nav-dropdown-mobile{
    display:none;
    height:100vh;
}
.menu-dropdown-open{
    display:block;
    position:absolute;
    top:100px;
    right:0px;
    width:100%;
    height:100%;
    background-color: rgb(223, 223, 223);
    z-index:20;

}

/*--------- customer feedback section ***************/
#customer-feedback .block-paragraph{
    color:#3e3e3b;
}
/*----- Footer Styles **************/
#page-footer{
    background-color:rgb(223,223,223);
}
#footer-logo-div{
    width:150px;
    height:150px;
}
.footer-text{
    text-align:center;
    padding:5px 15px;
    color:#0d4675;
}
#footer-menu ul{
    display:flex;
    justify-content:center;
    list-style-type:none;
    
}
#footer-menu ul li{
    padding:10px;
}

#footer-menu ul li a{
    text-decoration:none;
    color:#0d4675;
}

#footer-menu ul li a:hover{
    
    color:#256eaa;
    
}
.icons{
    padding:10px;
    background-color:#0d4675;
    color:#fff;
    margin:5px;

}

.icons:hover{
    background-color:#256eaa;
    
}

/* Move the bullet points of the list items to the inside of the parent element and align the <li>s*/
ul.inside{
    margin-left:20px;
    
}

/**********************************
************************************
***********************************

    MEDIA QUERIES

************************************
***********************************
*********************************/
@media screen and (max-width:1050px){

    .container{
        height:600px;
    }
    .overlay{
        top:100px;
        height:500px;
    }
    .wrapper{
        height:100%;
        width:100%;
    }
    main{
        height:100%;
    }    
    .header-central{
        max-width:90%;
        height:100%;
        text-align:center;
    }

    #main-header{
        width:100%;
    }
    .main-heading{
        font-size:60px;
        text-align:center;
    }
    .content{
        width:80%;
        height:80px;
        padding:10px;
        margin:20px auto;
        font-size:14px;
    }

    .details{
        color:#fff;
        font-size:22px;
        text-align:center;
     }
    #call-to-action{
        width:70%;
        min-height:30%;
        padding:10px;
        margin:5px auto;
    
    }

    .cta{
        width:100%;
    }

    .block-big{
        padding:50px;
        
    }

    .block-header{
        font-size:20px;
    }
     .block-video{
        display:block;
        width:100%;
        height:300px;
        margin:10px auto;    

    } 

   .column-block{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
    }
    .column-paragraph{
        width:50%;
        margin: 20px auto;
    }
    .grid{
        display:flex;
        flex-direction:column;
        justify-content:center;
        max-width:100%;
        /* fix for IE bug - unwanted vertical space in the grid */
        min-height:1px;
    }

    .grid-paragraph{
        flex-direction:column;
        flex-basis:auto;
        padding:20px;
        order: 2;
    }
    
    .grid-image{
        width:70%;
        margin:0 auto;
        flex-basis:auto;
        height:auto;
        /* fix for IE bug - unwanted vertical space in the grid */
        min-height:1px;
    }

   .block-image{
        max-width:100%;
        height:auto;
    }
    .paragraph-link-text{
        width:70%;
        margin:20px auto;
    }

   
    #navBar ul{
        visibility:hidden;
    } 

   .menu-icon-wrapper{
        display:block;
        visibility:visible;
        position:absolute;
        width:50px;
        height:50px;
        right:15px;
        top:20px; 
    }

    .bar{
        width:25px;
        height:2px;
        background-color: #fff;
    }
    #icon-bar-top{
        display:block;
        margin-left:auto;
        margin-right:auto;
        margin-top:25px; 

    }
    #icon-bar-middle{
        display:block;
        margin-left:auto;
        margin-right:auto;
        margin-top:5px;        
    }
    #icon-bar-bottom{
        display:block;
        margin-left:auto;
        margin-right:auto;
        margin-top:5px;        
        
    }
    .menu-icon-wrapper:hover{
        cursor: pointer;
    
    }
    
    #navbarMenu-mobile{
        display:block;
        width:100%;
        height:100%;
        background-color:#000;
        opacity:0.75;
    } 
    #navbarMenu-mobile ul{
        display:block;
        visibility:visible;
        width:100%;
        height:100%;
        
    }

    #navbarMenu-mobile ul li{
        width:100%;
        height:50px;
        font-weight: bold;
        margin-bottom:1px;
        border-bottom:1px dotted rgb(134, 134, 134);

    }
    #navbarMenu-mobile ul li a{
        color:#fff;
        height:100%;
        display:block;
        padding:10px;
        text-align: center;
        text-decoration:none;
    }
    #navbarMenu-mobile ul li a:hover{
        color:#fff;
        opacity:0.9;
    }

    .open-menu{
        position:absolute;
        top:100px;
        right:0px;
        width:100%;
        height:100%;
        border-bottom:1px dotted grey;
        background-color:#0d4675;
        z-index:20;
    }


}
@media screen and (max-width:800px){
    .main-heading{
        font-size:40px;
    }
    .content{
        width:90%;
    }
    #call-to-action{
        width:90%;
    }
    .grid{
        padding:10px;
    }

    .grid-image{
        width:90%;
        
    }
    .card-grid{
        flex-direction: column;
    }
    .card{
        width:90%;
    }

    .card-button{
        text-decoration:none;
        
    } 

    .paragraph-link-text{
        width:100%;
        font-size:14px;
    }
    .community-image-gallery .image-wrapper{
        width:50%;
    }


    /*To support very small screen sizes***/
    .card-button .button-big,.grid .button-big{
        min-width:100%;
        font-size:90%;
        
    } 

    #footer-menu ul{
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
    }
}

@media screen and (max-width:700px){

        .container{
            background-position:center;
        }
        .header-central{
            padding-top:80px;
        }
        .content{
            width:100%;
        }
        #call-to-action{
            width:100%;
        }     
        .block-big{
            padding:20px;
        }  
        
        .column-paragraph{
            width:90%;
        } 
        .community-image-gallery .image-row{
            flex-direction:column;
            
        }

        .community-image-gallery .image-wrapper{
            width:100%;
        }
    
} 
@media screen and (max-width:500px){
    .main-heading{
        font-size:30px;
    }


    .card{
        width:100%;
        padding:5px;
    }
    .grid-image{
        width:100%;
    }
    .image-bdr{
        border:none;
    }

}