@import url(https://fonts.googleapis.com/css?family=Archivo);
@import url(https://fonts.googleapis.com/css?family=Comfortaa);
@import url(https://fonts.googleapis.com/css?family=Kalam);

body {
	padding: 0;
	margin: 0 auto;
    font: 1em Archivo, Verdana, Arial, "Trebuchet MS", sans-serif;
    font-weight:normal;
    line-height:1.3em;
    color:#363F48;
    background-color:lightgrey;
}

a {
    color: #155CA4; 
    text-decoration: none;
}

a:hover {text-decoration:underline;}

h1, h2, h3, h4 { 
    font-size:1.2em; 
    padding: 5px 0 5px 0px; 
    margin: 0;
    line-height: 1.3em;
}

.header{
    height: auto;
    width: 980px;
    font-size: 1.1em;
    margin: 0px auto 0px;
    padding: 0 0 0 10px;
    overflow: hidden;
    position: relative;
}

.header h1{
    font-size:1.5em;
    margin-top:10px;
    margin-bottom:10px;
}

.header p{
    margin-top:10px;
    margin-bottom:10px;
}

.topmenu {
    margin:auto;
    padding: 0;
    width: 980px;
    background:#292929;
    border-bottom:1px solid #393939;
    margin-bottom:10px;
    text-align: center;
}

.navwrap {margin: 0px auto; width:980px;text-align: center;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-size:1.2em;display:block;padding:20px 20px;height:100%;color:#FFF;text-decoration:none;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#70a600;}

.title{
    font-size:1.2em;
    font-weight:bold;
}

.htop{
    margin:auto;
    width:980px;
	overflow: hidden;
    font-size:1.5em;
    font-weight:bold;
    text-transform:uppercase;
    line-height:1.5em;
    margin-bottom:25px;
    margin-top:15px;
    text-align:left;
}

img {
	border:none;
    box-shadow: 5px 5px 5px #888888;
}

ul li{
    line-height:1.8em;
}

p{margin:0 0 5px 0;}

.underline{
    width:98%;
    border-bottom:3px solid #888888;
}

.content{
	margin:auto;
    width: 980px;
    overflow: hidden;
    text-align: left;
    /*background-color: white;*/
}

.quote-col{
    margin:auto;
    width:980px;
	overflow: hidden;
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}

.quote-cell{
    display: inline-block;
    margin:0 0 1em;
    padding:5px;
    width: 95%;
    text-align:left;
    background-color: white;
}

.quote-cell img{
    width:98%;
}

.quote-cell p{
    margin:3px;
    font-size:1em;
}

.ulauthor{
    margin:auto;
    width:98%;
	overflow: hidden;
    padding-left:10px;
    margin-left:5px;
    margin-top:0px;
    font-size:1.3em;
}

.ulauthor li {
    float:left;
    height:1.4em;
    text-align:left;
    width:30%;
    margin-left:15px;
    padding-bottom:10px;
}

.main{
    margin:1px auto;
	width:950px;
    text-align:left;
	overflow: hidden;
}

.left{
    float:left;
    width:630px;
}

.right{
    float:left;
    width:315px;
    padding: 0 0 0 5px;
}

.quote {
    overflow: hidden !important;
    margin:10px auto 10px auto;
    text-align:left;
    width:620px;
    padding:10px;
    font: 1em Comfortaa, Verdana, Arial, "Trebuchet MS", sans-serif;
    font-size:1em;
    line-height: 2em;
    background-color: white;
}

.quote img{
    width:100%; height:auto;
}

.quote a{
    text-decoration:none;
    margin-top: 10px;
    margin-bottom: 10px;
}

.quotedetail {
    width:90%;
    background-color: #2C7CB0;
    color:#FFF;
    font: Kalam, Verdana, Arial, "Trebuchet MS", sans-serif;
    font-size: 1.3em;
    line-height:2.1em;
    padding:10px;
    box-shadow: 5px 5px 5px #888888;
    border:1px solid black;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    -ms-border-radius: 9px;
    -o-border-radius: 9px;
    border-radius: 9px;
}

.related{
    float:left;
    text-align:left;
    width:95%;
    margin:10px;
    font-size:1.1em;
}

.breadcrumb{
    float:left;
    width:100%;
    font-size:1.1em;
    line-height:1.3em;
    margin:10px 5px 10px 5px;
    clear:both;
}

.breadcrumb a{text-decoration:underline;}

.breadcrumb ol{list-style: none; margin: 0; padding: 0;}

.breadcrumb ol li{display: inline;}

.social img{
    width:110px;
}

.social a{
    text-decoration:none;
}

.setupad, .setupad_double {
    display:block; 
    position: relative;
    height: 310px; 
    margin-top:10px;
    margin-bottom:5px; 
}

.vads{
    clear:both;
    padding:5px;
    margin-top:10px;
    margin-bottom:15px;
    width:99%;
    text-align:justify;
    height:350px;
}

.footer {
	clear: both;
	text-align: center;
	color: #FFF;
	padding: 10px 0 5px 0;
	background-color:#000;
}

.footer p {
	line-height: 1.5em;
    font-size:1.2em;
    margin:30px 10px 30px 10px;
}

.footer a {
	color: #FFF;
	text-decoration: none;
}

@media screen and (max-width: 980px) {
    .content {
        width: 95%;
    }
    
    .header, .breadcrumb, .main, .footer {
        width: 95%;
    }
    
    .topmenu, .navwrap{
        width: 95%;
    }
    
    .quote{
        width:98%;
    }
	
	.setupad{
		height:350px;
	}
	
	.setupad, .setupad_double, .vads{
		text-align:center;
	}
}

@media screen and (max-width: 800px){
    .content {
        width: 95%;
    }

    .header, .breadcrumb, .main, .footer {
        width: 95%;
    }
    
    .topmenu, .navwrap, .left, .right{
        width: 95%;
    }
    
    .header, .navwrap{
        height: auto;
    }
    
    .ulauthor li {
        width:43%;
        line-height:2.0em;
    }
    
    .ulauthor li a{
        font-size:0.7em;
    }
}

@media screen and (max-width: 700px) {
    .content {
        width: 95%;
    }

	.header, .breadcrumb, .main {
        width: 95%;
    }
    
    .topmenu, .navwrap, .left, .right{
        width: 95%;
    }
    
    .header, .navwrap{
        height: auto;
    }
    
    .quote-col{
        width:98%;
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
        -moz-column-gap: 1em;
        -webkit-column-gap: 1em;
        column-gap: 1em;
    }

	.social{
        width: 90%;
    }
}

@media screen and (max-width: 550px) {
    .content {
        width: 95%;
    }

	.header, .main {
        width: 95%;
    }
    
    .topmenu, .navwrap{
        width: 95%;
    }
    
    .quote-col{
        width:95%;
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
        -moz-column-gap: 1em;
        -webkit-column-gap: 1em;
        column-gap: 1em;
    }
    
    .ulauthor li, .related, .breadcrumb, .htop{
        width:95%;
    }
}