/*---GridStyle---*/


/*---CSS Variables---*/

:root{
    --primary:#f3f3f3;
    --dark:#000;
    --light:#fff;
    --shadow:0 1px 5px rgba(104, 104, 104, 0.8);
}



html{
    box-sizing:border-box;
    color:var(--dark);
}


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

body{
   
    font-family: 'Merriweather', serif;
    background:#f2f2f2;
    margin:0;
    color:#222;
}

img{
    max-width:100%;
}


.wrapper{
    display:grid;
    grid-gap:10px;
}






.hero{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto;
    justify-items:center;
    align-items:center;
    width:100%;
    height:450px;
    background:url("img/hero.png")no-repeat center;
    background-size:cover;
}






.pic{
    max-width:100%;
    margin-bottom:20px;
}



/*-----------------List Styles-------------------*/

ul.sidebar{
    list-style:none;
    margin:0;
    color:blue;
    text-align:center;
    font-family:'Open Sans', sans-serif;
    color:#000;
}

ul.sidebar li{
    display:block;
    background:#fff;
    padding:10px;
    margin:10px 0px;
    box-shadow:var(--shadow);
}




ul.text{
    list-style:none;
    margin:0;
    text-align:center;
    font-size:14px;
}

ul.text li{
    display:block;
    background:#fff;
    padding:8px;
    margin:10px 0;
}







/*-----Navigation Styles------*/

.main-nav ul{
    display:grid;
    grid-gap:20px;
    padding:0;
    list-style:none;
    grid-template-columns:repeat(4, 1fr);
}


.main-nav a{
    font-family:"Open Sans", sans-serif;
    text-decoration:none;
    display:block;
    text-transform:uppercase;
    font-size:16px;
    background:#007EDB;
    color: var(--light);
    text-align:center;
    padding:20px;
}


.main-nav a:hover{
    background:#005798;
    color: var(--light);
}


/*-------------------Container------------*/

.container{
    display:grid;
    grid-gap:10px;
    grid-template-columns:1fr 2fr 1fr;
    grid-template-areas:
        'sidebarleft main sidebarright';
}


/*-----Sidebarleft-----*/

.sidebarleft{
    grid-area:sidebarleft;
    background:#f3f3f3;
    padding:5px;
}

/*-------Main--------*/
.main{
    grid-area:main;
    background:var(--primary);
    padding:10px;
    
}

/*-------sidebarright--------*/
.sidebarright{
    grid-area:sidebarright;
    background:#f3f3f3;
    padding:5px;
}




/*------Footer----------*/

footer{
    background: #000;
    padding:20px 0px;
    text-align:center;
}

footer p{
    font-family:"Open Sans", sans-serif;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1px;
}





/*--------------Heading Styles------------*/

h1,h2,h3,h4,h5,h6{
    font-family: 'Open Sans', sans-serif;
    margin:0px;
    font-weight:normal;
    color:#007EDB;
}

h1{
    font-size:30px;
    font-weight:bold;
}


h1.herohead{
    color:#fff;
    font-size:40px;
    text-align:center;
}



h2{
    font-size:26px;
    font-weight:bold;
}

h3{
    font-size:20px;
    font-weight:bold;
}

h4{
    font-size:18px;
    font-weight:bold;
}

h4.section{
    font-size:18px;
    font-weight:bold;
    background:#EA0202;
    color:#fff;
    text-align:center;
    padding:15px 0;
}

h5{
    font-size:16px;
    font-weight:bold;
}

h5.page{
    font-size:14px;
    text-transform:uppercase;
    color:green;
}


/*---------------------Paragraph Styles----------------*/
p{
    font-family: 'Merriweather', serif;
    font-size:14px;
    line-height:24px;
    color:#333;
    margin-bottom:20px;
}


p.nestedcol{
    font-family: 'Merriweather', serif;
    font-weight:bold;
    font-size:14px;
    line-height:16px;
    color:#333;
}



p.sig,.copy,.info{
    font-family: 'Open Sans', sans-serif;
}


p.info{
    font-size:10px;
    text-transform:uppercase;
    color:#666;
    line-height:0.5;
    
}

p.copy{
    font-size:10px;
    text-transform:uppercase;
    margin-bottom:10px;
    margin-top:0px;
    line-height:1;
}


p.sig{
    font-size:14px;
    text-transform:uppercase;
    color:#0084d1;
    line-height:18px;
}

p.caption{
    font-family:'Open Sans', sans-serif;
    font-size:14px;
    font-weight:bold;
    color:#222;
    line-height:18px;
    margin-bottom:20px;
}


p.side{
    font-family:'Open Sans', sans-serif;
    font-size:15px;
    color:blue;
    text-align:left;
    line-height:1;
    margin-bottom:0;
}



/*-------------------Link Styles-----------------------------*/
a{
    text-decoration:none;
    color:blue;
}


a:hover{
    color:green;
}



/*--------------Clear Styles---------------------*/
.clearall{
    height:50px;
    margin:0px;
    padding:20px;
    display:block;
    background:transparent;
}



/*---------------Ajax Target Div style---------------*/
#targetDiv{
    width:100%;
    background:transparent;
    padding:0px 20px;
}





/*---------------------Media Queries Desktop---------------------*/

@media(max-width:700px){
    .container{
    display:grid;
    grid-gap:10px;
    grid-template-columns:1fr 2fr 1fr;
    grid-template-areas:
        'sidebarleft main sidebarright';
    }
    
    .main-nav ul{
    display:grid;
    grid-gap:10px;
    padding:0;
    list-style:none;
    grid-template-columns:repeat(4, 1fr);
    }
    
}


/*---------------------Media Queries Smaller devices---------------------*/
@media(max-width:500px){
    .container{
        grid-template-columns:1fr;
        grid-template-areas:
        'sidebarleft' 
        'main' 
        'sidebarright';
    }
    
    .main-nav ul{
        grid-template-columns:1fr;
    }
}