body{
    background:#f2f2f9;
    font-family:'Open Sans', sans-serif;
    color:#2f4f4f;
    line-height:1.7em;
    text-align:left;
}
#screen_width{
    position:absolute;
    top:-5px;
    left:0;
    color:#f2f2f9;
    font-size:10px;
}

p{
    padding:5px 0;
}

a{
    text-decoration:none;
    color:#888888;
}

a:hover{
    color:#cccccc;
}

h1{
    font-size:37px;
    font-weight:bold;
    padding:10px 0;
    color:#353535;
    line-height:1em;
}

h3{
    font-size:24px;
    padding:5px 0;
}

.clr{
    clear:both;
}

.pull-right{
    float:right;
    padding:10px;
}

.pull-left{
    float:left;
    padding:10px;
}

.image100{
    width:100%
}

.container{
    background:#f2f2f9;   
    margin:0 auto;
    width:90%;
    overflow:auto;
    clear:both;
}

.main-header{
    background:#f2f2f9;
    border-top:#353535 15px solid;
    overflow:auto;
    width:100%;
    box-shadow: 0 3px 3px -3px;
}

.main-header .logo{
    width:25%;
    float:left;
    padding-top:10px;
    transition: width 1s;
}

.main-header .main-nav{
    width:70%;
    float:right;
    padding-top:20px;
}

.main-header .main-nav ul{
    float:right;
}

.main-nav ul li{
    float:left;
    display:inline;
    margin-right:3px;
}

.main-nav ul li a{
    display:inline-block;
    padding:10px 20px;
    
}

.main-nav ul li a:hover,.main-nav ul li a.active{
    border-bottom:#73b819 solid 2px;
    padding-bottom:7px;
    
}

#showcase{
       
    padding:30px 0;
    margin-top::2px;
    background:#eceded url(../images/texture.png);
    border-bottom:1px #cccccc solid;
    transition: padding 1s;
}

.showcase-right{
    width:50%
    float:right
}

.showcase-right img{
    width:100%;
}

.showcase-left{
    width:45%;
    float:left;
}

.box3{
    background:#f2f2f9;
    width:33%;
    float:left;
    overflow:auto;
    padding-top:20px;
}

.box3 img{
    float:left;  
    padding-top:10px;
    
}

#content{
    overflow:auto;
    width:67%;
    float:left;
    margin-top:20px;
}

#sidebar{
    width:30%;
    float:right;
    margin-top:20px;
    padding-left:10px;
}

ul.list-group{
    border:1px #cccccc solid;
    border-radius:5px;
    padding:10px 20px;
}

.list-group li{
    padding:5px 0;
    border-bottom:1px #cccccc dashed;
}

/* sticky Footer Code */
html,body{
    height:100%;
}


#wrap{
    background:#f2f2f9;
    min-height:100%;
    margin-bottom:-80%;
}

#wrap:after{
    content:"";
    display:block;
}

footer,#wrap:after{
    height:80px;
}

footer{
    background:#353535;
    border-top:3px #000000 solid;
    margin-top:30px
}

footer p{
    color:#f2f2f9;
    margin:0;
    padding:10px 0 0;
    text-align:center;
}

/* Start Media Queries */

/* Laptops and bigger tablets*/

@media only screen and (min-width: 768px) and (max-width:1100px){
    
    .main-header .logo img{
        width:100%;
        transition: width 1s;
    }
    .main-nav ul li a{
        padding:10px 10px;
        transition: padding 1s;
    }
     
    h1{
        font-size:30px;     
        padding:10px 0;
    }
    
    h3{
        font-size:20px;
    }
    
    #showcase{
        padding:30px 0;
        transition: padding 1s;
    }
    
    .box3{
        text-align: center;
    }

   
}

/* Smartphones and Small tablets*/

@media only screen and (min-width: 240px) and (max-width:767px){
    
    h1,h2,h3,h4,h5,h6{
        text-align:center;  
    }
    
    /* Header */
    .main-header .logo{
        width:100%;
        float:none;
        display:block;
        margin:auto;
    }
    
     .main-header .logo img{
        width:100%;
        
        margin:auto;
    }
    
    /* Navigation */
      .main-header .main-nav{
        width:100%;
        float:none;
        display:block;
        padding-top:10px;
    }

    .main-header .main-nav ul{
        float:right;
        margin:0;
        padding:0;
        text-aligh:center;
        margin:auto;
        width:100%;
    }

    .main-header .main-nav ul li{
        float:none;
        display:block;
        margin:0;
    }

    .main-header .main-nav ul li a{
        display:block;
        padding:10px 20px;
        border-bottom:1px dashed #cccccc;
    }
    
    .main-nav li:last-child a{
        border:0;
        
    }

    .main-header .main-nav ul li a:hover,.main-nav ul li a.active{
        border:none;
        background:#e7e5e2;
        padding:10px 20px;
        
    }
    
    

    /* showcase */
    
    #showcase{
        text-align:left;
    }

    .showcase-right{
        width:100%
        float:none;
        transition: width 1s;
    }

    .showcase-right img{
        width:100%;
    }

    .showcase-left{
        width:100%;
        float:none;
        transition: width 1s;
    }
    
    /* 3 boxes */
    
    .box3{
        width:100%;
        float:none;
        clear:both;
        border-bottom:1px #cccccc dashed;
    }

    .box3 img{
        float:left;
        padding:5px 10px 0 0;
    }

    
    /* Main Content */
    
    #content{
        
        width:100%;
        float:none;
        display:block;
        text-align:center;
       
    }

    #sidebar{
        width:95%;
        float:none;
        display:block;
        text-align:center;      
    }
    
    .pull-right,.pull-left{
        float:none;
    }
    
}