﻿@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:black}
a:hover {text-decoration:none; color:#grey;}


hr{border:#000 1px solid;}

header {background: #fff; width: 100%; border-bottom: 1px solid #E0E0E0;}
.top-bar {background: #fff; border-bottom: 1px solid #E0E0E0; display: inline-block; width: 100%; padding: 5px 0;} 
.top-bar p {display: inline-block; color:black; padding: 5px 0;font-size:12px;}
.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' ; }
.logos {border-bottom: 1px solid #E0E0E0; height:15%;padding:20px 0px}
.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: grey; padding: 10px 0;margin-top:15px;}
.footer p {font-size: 14px; line-height: 27px; color:white}
.footer .col-3 {text-align: left; color:#fff; margin-top:30px; display: inline-block;vertical-align: top; width: 45%;margin-bottom:30px}
.footer .col-3 a {color:#CDCDCD; transition: .2s ease;}
.footer .col-3 a:hover {color:#fff;}
/*---------- 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%;}
    .logos img {width:90%;}
}


@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%;}
	
}

@media only screen and (max-width: 500px) {
	.top-bar p {font-size: 14px;}
	.red-copyright {width: 90%;}
}




