@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;}
a:hover {text-decoration:none; color:yellow;}

.column {
  float: left;
  width: 33.33%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


hr{border:#000 1px solid;}

header {background:white; width: 100%;}
.top-bar {background: #fff; border-bottom: 2px solid #ddd; display: inline-block; width: 100%; padding: 10px 0;} 
.top-bar p {display: inline-block; text-align: left; color:white; padding: 15px 0; letter-spacing: 1px; font-weight: 600;}
.header-btn {padding: 10px 25px; background: #140D43; color:#fff; text-align: center; display: inline-block; float: right; border-radius: 5px; margin-top:5px;font-family: 'Roboto Condensed' ; }
.logo {text-align: left; margin: 0 auto; padding: 15px 0; display: inline-block; width: 30%;}
.logo img {max-width:300px; width: 100%;}
.header-right {width: 100%; vertical-align: bottom;border-top: 1px solid #FFF;}
.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:#1D1D1D; padding: 25px 0; margin-top:-15px; margin-top:25px;}
.footer p {letter-spacing: 1px; 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; letter-spacing: 1px; 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: #C2202E; padding: 20px 0; color:#fff; border-radius: 5px;margin-top:-0px; 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: 100%;}
	.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%;}
}