@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap');
/***** BEGIN RESET *****/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;	
}

ol, ul {
	list-style: none;
}

table{border-collapse:collapse; width:100%;}
td{vertical-align:top;}

/* Make HTML 5 elements display block-level for consistent styling */  
header, nav, article, footer, address {  
    display: block;  
} 

/*-------- COLORS --------

*/

/***** END RESET *****/
::-moz-selection {
    background: #000; 
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #000;
    color: #fff;
    text-shadow: none;
}


/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

/*-------- BODY STYLES --------*/

body {
font-family: 'Roboto Condensed' ;
}

h1 {font-family: 'Roboto Condensed' ;}
a:link, a:visited, a:active {text-decoration:none;color:#333;}
a:hover {text-decoration:none; color:#26476a;}


hr{border:#000 1px solid;}

header {background: #fff; width: 100%; border-bottom: 2px solid #e7e7e7;}
.top-bar {background:#26476a; display: block; width: 100%; padding:0;} 
.top-bar a{display: inline-block; text-align: left; font-size:12px;color:#fff; padding:10px 0;font-weight:600}
.logo {text-align: left; margin: 0 auto; padding: 15px 0; display: inline-block; width: 30%;}
.logo img {max-width:230px; width: 100%;}
.header-right {display: inline-block; width: 68%; vertical-align: bottom;}
.width-90 {width: 90%; margin: 0 auto;}
.width-80 {width: 70%; margin: 0 auto;}
.width-60 {width: 60%; margin: 0 auto;}
#padding50 {padding: 50px 0;}

.footer {background: #2E2E2E; padding: 25px 0; margin-top:-15px; margin-top:25px;}
.footer p {font-size: 14px; line-height: 27px; color:#A3A3A3}
.footer .col-3 {text-align: left; color:#fff; margin-top:50px; display: inline-block;vertical-align: top; width: 35%;}
.footer .col-3 a {color:#A3A3A3; transition: .2s ease;}
.footer .col-3 a:hover {color:#fff;}
.col-3 img {background: #fff; padding: 15px; border-radius: 5px; margin-top:5px;}
.red-copyright {background: #26476a; padding: 30px 0; color:#fff;margin-top:-10px; position: absolute; width: 60%;}
.red-copyright p {font-size: 13px;}
/*---------- RESPONSIVE STYLES ----------*/


@media only screen and (max-width: 1200px) {
	.logo {width: 50%;}
	.header-right {width: 48%;}
	.width-60 {width: 80%;}
	.red-copyright {width: 80%;}
	.footer .col-3 {width: 48%;}
	
}

@media only screen and (max-width: 900px) {
	.footer .col-3 {width: 100%;}
}


@media only screen and (max-width: 767px) {
	.top-bar {text-align: center;}
	.top-bar p {text-align: center;}
	.top-bar .header-btn {width: 100%; margin: 0 auto; padding: 10px 0;}
	.width-60 {width: 90%;}
	.footer p {font-size: 12px;}
	
}

@media only screen and (max-width: 500px) {
	.top-bar p {font-size: 14px;}
	.red-copyright {width: 90%;}
}