@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:#140D41}
a:hover {text-decoration:none; color:#C1202F;}


hr{border:#000 1px solid;}



.top-head{
    width:100%;
    background:#5487C4;
    height:40px;
    padding-top:25px
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.head-col{
  float: left;
  width: 33.33%;
}

.head-col img{
    position:absolute;
    z-index:10;
    width:140px;
    top:10px
}

.head-col a{
    color:white;
    padding:20px;
    font-weight:bold;
    transition:.2s ease
}

.head-col a:hover{
    color:#FBDC3D
}

.footer{
      width:100%;
    background:#315C8F;
    height:40px;
    padding-top:25px;
}

.footer a{
    padding:20px;
    color:white;
    font-weight:bold;
    font-size:15px;
    transition:.2s ease
}

.footer a:hover{
    color:#FBDC3D;
}


.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;}

/*---------- RESPONSIVE STYLES ----------*/

@media screen and (max-width: 1000px)  {
    .two{display:none}   
    .left{display:none}
    .head-col img{right:20px}
}

@media only screen and (max-width: 1200px) {
	.width-60 {width: 80%;}
    .col-3 {width: 48%;}
	
}

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


@media only screen and (max-width: 767px) {
	.width-60 {width: 90%;}
}