﻿@charset "utf-8";

/*------------------------------------------
// 0.BASIC ELEMENTS for CUPRUM FONTS
// Define styles for basic elements:body, h1-h6, etc.
//------------------------------------------*/
@font-face {
    font-family:'ArialNarrow';
    src:url('/fonts/arialnarrow-webfont.eot');
    src:url('/fonts/arialnarrow-webfont.eot?#iefix') format('embedded-opentype'),
        url('/fonts/arialnarrow-webfont.woff') format('woff'),
        url('/fonts/arialnarrow-webfont.ttf') format('truetype'),
        url('/fonts/arialnarrow-webfont.svg#ArialNarrow') format('svg');
    font-weight:normal;
    font-style:normal;
}

/*------------------------------------------
// 1.RESET ELEMENTS
// Define styles for basic reseting elements:html, body, div, span, applet etc.
//------------------------------------------*/
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, dl, dt, dd, ol, ul, li, fieldset, form, legend, caption {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-family:inherit;
	text-decoration:none;
}
button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner {
 border:none;
 text-transform:capitalize;
}


/* Styles start for header */

body {
    max-width: 1500px;
    margin: auto;
    background-color: #fff;
    min-width: 320px;
}

body {
    font-family: Helvetica, Arial, sans-serif;
}

header {
	margin-top: 20px;
	margin-left: 25px;
	margin-right: 25px;
}

/* mobile devices */
@media only screen and (max-width : 600px) {
	html, body {
		width: 100%;
	}

	body {
		padding: 0px 20px;
	}

	header {
		margin-bottom: 10px;
	}
}

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.logo-container img {
	max-width: 180px;
}

.fa-input {
  font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #fff;
  background-color: #ec5358;
}

.search-container .btn {
	padding: 0px !important;
	vertical-align: top;
	border-radius: 0px;
	width: 25px;
	height: 25px;
	margin-left: -6px;
}

.search-container {
	margin-top: 10px;
}

@media (min-width : 1025px){
    .logo-container img {
	    max-width: 240px;
    }

    .search-container {
	    margin-top: 20px;
    }
}

.search-container > div {
	float:right !important;
}
.search-input {
	width: 200px;
	padding: 0px;
	height: 25px;
	padding: 0px 10px;
	border: 1px solid #c9c9c9;
}

.search-container input[type="submit"]:hover {
    color: #fff;
}

.search-mobile {
    display: none;
}
/* mobile devices */
@media only screen and (min-width : 461px) and (max-width : 600px) {
/* Styles */

 	header {
 		margin-top: 20px;
 		margin-left: -15px;
 		margin-right: -15px;
        margin-bottom: 20px;
 	}

 	.search-input {
 		width: 130px;
 	}

  	header .logo-container {
 		width: 58% !important;
 	}
 	header .search-container {
 		width: 42% !important;
 	}
	.logo-container img {
		max-width: 180px;
	}

}

@media screen and (max-width : 460px) {

    header {
        margin-top: 20px;
        margin-left: -15px;
        margin-right: -15px;
    }

    .search-container {
 		display: none;
        width: 100%;
        text-align: left;
 	}

  	header .logo-container {
        /* This is for android 4.3 as it doesnt resolve calc function*/
        width: 89%;
 		width: calc(100% - 40px) !important;
 	}
 	header .search-mobile {
 		width: 30px !important;
 		padding-left: 0px !important;
 		text-align: left;
        margin-top: 10px;
        display:block;
 	}

    .search-mobile input, .search-mobile input:hover {
        color: #fff;
        padding: 4px 6px;
    }
 	.search-input {
 		width: 83%;
        min-height: 30px;
 	}

	.search-container .btn {
		width: 30px;
		height: 30px;
	}

}

/* tablet devices */
@media screen and (min-width:601px) and (max-width:1024px) {
/* Styles */

 	header {
 		margin-bottom: 20px;
        margin-top: 20px;
 	}
 	.search-input {
 		width: 150px;
 	}
}

/* Styles end for header */

/* Styles for navbar start */

nav {
	margin-left: 40px;
	margin-right: 40px;
	margin-top: 10px;
	margin-bottom: 10px;
}

nav ul li {
	margin-left: 18px;
	margin-right: 18px;
}

nav ul li:first-child {
	margin-left: 0px;
}

nav ul li *, nav ul li a:hover, nav ul li a:visited {
	color: #666666;
}
.navbar-nav>li>a {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

nav ul li a:hover, nav ul li a:focus, nav ul li.active a {
	background-color: #f2f2f2;
}

nav ul li.active a, nav ul li.active a:hover {
	color: #1cb8ed !important;
	background-color: transparent;
}

.nav-icon {
	margin-right: 20px;
	margin-top: 10px;
	color: #666666;
}

#navigation-icon {
	display: none;
}


/* tablet devices */
@media screen and (min-width:601px) and (max-width:1024px) {
/* Styles */

	#navigation-icon {
		display: block;
	}
	nav ul li:first-child {
		margin-left: 20px;
	}


	nav {
		position: absolute;
		top: 80px;
		width: 200px;
		margin-left: 0px;
		margin-right: 0px;
		margin-top: 0px;
		background-color: #fff;
		border-right: 1px solid #CCCCCC;
		box-shadow: 4px 0 6px 1px rgba(0, 0, 0, 0.1);
		height: 100vh;
		display: none;
		z-index: 10000;
	}

	#navigation ul {
		margin-top: 0px;
		width: 100%;
	}

	.navbar-nav li {
		float: none;
		margin-right: 20px;
	}

	nav ul li a{
		border-bottom: 1px solid #cccccc;
		width: 100%;
	}
}

/* mobile devices */
@media only screen and (max-width : 600px) {
/* Styles */
	nav ul li:first-child {
		margin-left: 20px;
	}


	nav {
		position: absolute;
		top: 79px;
		left: -20px;
		width: 200px;
		margin-left: 0px;
		margin-right: 0px;
		margin-top: 0px;
		background-color: #fff;
		border-right: 1px solid #CCCCCC;
		box-shadow: 4px 0 6px 1px rgba(0, 0, 0, 0.1);
		height: 100vh;
		display: none;
		z-index: 10000;
	}

	#navigation-icon {
		display: block;
	}

	.navbar-nav {
		margin-top: 0px;
	}
	#navigation ul {
		margin-top: 0px;
		width: 100%;
	}

	.nav-icon {
		margin-top: 10px;
	}

	.navbar-nav li {
		float: none;
		margin-right: 0px;
	}

	nav ul li a{
		border-bottom: 1px solid #cccccc;
		margin-left: 10px;
	}
}




/* Styles for navbar end */

/* Styles for body content start */

.body-content-container {
	position: relative;
}

/* Styles for body content end */

/* Styles for footer start */

footer {
	margin: 10px 30px;
	color: #898989;
	font-size: 12px;
}

.footer-arrow {
	font-size: 20px;
	cursor: pointer;
}

.footer-content {
	display: table;
	width: 100%;
	margin: 0px 15px;
}

.footer-content > div {
	display: table-cell;
	width: 16.6%;
}

.footer-content > div ul {
	list-style-type: none;
	margin-left: 0px;
	margin-top: 10px;
	padding: 0px;
}

.footer-content ul li a, .footer-content ul li a:visited {
	color: #3f3f3f;
	text-decoration: none;
}

.footer-content ul li a:hover {
	color: #1cb8ed;
}

.fa-facebook-square {
	color: #3b5998;
	cursor: pointer;
}

.fa-linkedin-square {
	color: #007bb6;
	cursor: pointer;
}

footer .footer-arrow {
	color: #40B4E5;
}

/* mobile devices */
@media only screen and (max-width : 600px) {

	.footer-content > div, .footer-arrow {
		display: none;
	}

    .footer-content > div:last-child {
        display: block;
    }

    .footer-content {
        width: auto;
        display: block;
        margin-top: 10px;
    }

    .footer-content .fa {
        color: #fff;
    }

	footer {
		margin: 10px -20px 0px -20px;
        padding: 10px 0px;
        background-color: #666;
        color: #fff;
	}
}

/* Styles for footer end */
