body {
   
    font-family: century-gothic, sans-serif;
    font-weight: 400;
    font-style: normal;

    
  }
      @media (max-width: 992px) {
        .news-tile .card-title {
          font-size: 1.2rem;
        }
      }
a{
    color: inherit;
}


.navbar {
  position: static;
}
.navbar .nav > li {
  z-index: 1001;
}

.inputDnD .form-control-file {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 6em;
  outline: none;
  visibility: hidden;
  cursor: pointer;
  background-color: #c61c23;
  box-shadow: 0 0 5px solid currentColor;
}
.inputDnD .form-control-file:before {
  content: attr(data-title);
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 100%;
  min-height: 6em;
  line-height: 2em;
  padding-top: 1.5em;
  opacity: 1;
  visibility: visible;
  text-align: center;
  border: 0.25em dashed currentColor;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
}
.inputDnD .form-control-file:hover:before {
  border-style: solid;
  box-shadow: inset 0px 0px 0px 0.25em currentColor;
}

.card-body{

  overflow: hidden;
  text-overflow: ellipsis;
}

a:hover{
    color: #CC0000;
}
      .news-tile .card-title {
        position: absolute;
        bottom: 15px;
        left: 30px;
        text-align: left;
      }
      .news-tile h4 {
        font-size: 1.2rem;
      }

      .news-tile h3 {
        font-size: 1.6rem;
      }

      .rgba-stylish-strong {
        background-color: rgba(62, 69, 81, .5);
      }

      .view:hover {
        -webkit-filter: brightness(140%);
        transition: all .4s ease-in-out;
      }

      .view {
        transition: all .4s ease-in-out;
      }
.blog-girds-sec {
    border-top: 1px solid #ddd;
    margin-top: 1em;
    padding-top: 2em;
}

  /* SHIFT */
  .shift ul li a {
    position:relative;
    z-index: 1;
  }
.shift ul li a:hover {
    color: #CC0000;
  }
.shift ul li a:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 1px;
    content: '.';
    color: transparent;
    background: #CC0000;
    visibility: none;
    opacity: 0;
    z-index: -1;
  }
.shift ul li a:hover:after {
    opacity: 1;
    visibility: visible;
    height: 100%;
  }
  .rgba-gradient {
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5) 100%);
  }
  

  h1 {
    letter-spacing: 8px;
  }
  
  h5 {
    letter-spacing: 1px;
  }

  
.icon-prefix .prefix ~ input {
  margin-left: 4rem;
  width: calc( 100% - 10rem )
  
}
.eleg{
  color: #2E2E2E !important;
}

input[type=text]:focus:not([readonly]) + label {
  color: #CC0000; }

input:focus:not([readonly]) { 
  box-shadow: 0 1px 0 0 red !important; 
  border-bottom: 1px solid red !important; 
}

.timepicker-tick.active, .timepicker-tick:hover {
  background-color: rgba(46, 46, 46,0.25);
}
.timepicker-canvas-bg {
  stroke: none;
  fill: #CC0000;
}
.timepicker-canvas-bearing {
  stroke: none;
  fill: #CC0000;
}
.timepicker-close{
  color: #CC0000;
}
.timepicker-canvas line {
  stroke: #CC0000;
  stroke-width: 4;
  stroke-linecap: round;
}

.datepicker-cancel, .datepicker-clear, .datepicker-today, .datepicker-done {
  color: #CC0000 ;
  padding: 0 1rem;
}

.datepicker-table td.is-today {
  color: #CC0000;
}

.text-primary {
  color: #CC0000 !important;
}

.red-check:checked + label:before {
  top: -4px;
  left: -3px;
  width: 12px;
  height: 22px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #CC0000; /* You need to change the colour here */
  border-bottom: 2px solid #CC0000; /* And here */
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  -o-transform: rotate(40deg);
  transform: rotate(40deg);
  -webkit-backface-visibility: hidden;
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%; }

  [type="checkbox"].filled-in:checked + span:not(.lever):after {
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    background-color: #CC0000;
    z-index: 0;
  }
  .md-form input[type=text]:focus:not([readonly]) + label {
    color: #CC0000; }
    .md-form input[type=text]:focus:not([readonly]) {
    box-shadow: 0 1px 0 0 #CC0000;
    border-bottom: 1px solid #CC0000; }
    
.icon-prefix .prefix {
  /*width: 10rem;*/
}

.input-field input:focus + label {
  color: #CC0000  !important;
}

 /* label underline focus color */
 .row .input-field input:focus {
  border-bottom: 1px solid #CC0000  !important;
  box-shadow: 0 1px 0 0 #CC0000  !important;
}


.btn-danger, .btn-danger:hover, .btn-danger:active, .btn-danger:visited {
  background-color: #CC0000 !important;
}

.red-text{
color: #CC0000 !important;
}


  .navbar {
    z-index: 1;

  }

  input[type=text]:focus:not([readonly]) + label {
    color: #CC0000; }
  
  input:focus:not([readonly]) { 
    box-shadow: 0 1px 0 0 red !important; 
    border-bottom: 1px solid red !important; 
  }

  .red-text{
    color: #CC0000 !important;
    }
    

  .btn-danger, .btn-danger:hover, .btn-danger:active, .btn-danger:visited {
    background-color: #CC0000 !important;
  }
  
  .md-form input[type=text]:focus:not([readonly]) + label {
    color: #CC0000; }
    .md-form input[type=text]:focus:not([readonly]) {
    box-shadow: 0 1px 0 0 #CC0000;
    border-bottom: 1px solid #CC0000; }

    .md-form:focus { color: #CC0000; }

@media(max-width:991px) {
	.carousel-caption h2, .carousel-caption h3 {
		font-size: 3em;
		font-weight: 700;
	}
	.bottom-slider, .main-content-w3layouts-agileits, footer,.banner-bottom {
		padding: 3em 0;
	}
	.footer-grid-agileits-w3ls:nth-child(2) {
		margin: 2em 0;
	}
	.agileits-w3ls-right-blog-con {
		margin-top: 2em;
	}
	.tech-btm h5 {
		font-size: 0.9em;
	}
	.banner-inner {
		min-height: 175px;
	}
	form.header-search {
		width: 72%;
	}
	.card {
		margin-bottom:1.5em;
	}
}

@media(max-width:384px) {
	.bottom-slider, .main-content-w3layouts-agileits, footer,.banner-bottom {
		padding: 2em 0;
	}
	section.middle-sec-agileinfo-w3ls {
		min-height: 619px;
		padding: 0em 3em 0 0;
	}
	h3.tittle {
		font-size: 1.8em;
	}
	.banner-inner {
		min-height: 130px;
	}
	.copyrighttop ul li {
		margin-bottom: 0.5em;
	}
}

.blog-grid-top h3,.two-blog2 h3,h5.card-title {
    font-size: 1.2em;
	margin: 1.2em 0 1em 0;
	font-weight: 700;
}

.blog-grid-top h3,.two-blog2 h3,h5.card-title {
    font-size: 1.2em;
	margin: 1.2em 0 1em 0;
	font-weight: 700;
}
.blog-grid-top h3 a,.two-blog2 h3 a,h5.card-title a {
	color: #333333;
}
.blog-grid-top p,.two-blog2 p{
    margin-bottom: 2em;
}
.blog-grid-top {

    padding-bottom: 3em;
}

.b-grid-top {
    position: relative;
}
.bottom-b-con{
    padding: 40px 0;
}
.blog_info_left_grid {
    position: relative;
    overflow: hidden;
}
.blog-info-middle ul li a {
    font-size: 0.9em;
    letter-spacing: 1px;
    color: #fff;
}
.blog-info-middle ul li a:hover{
	color:#CC0000;
	opacity:0.9;
}
.blog-info-middle {
    width: 100%;
    background: rgba(14, 15, 16, 0.65);
    padding: 18px;
    position: absolute;
    bottom: 0;
}
.blog_info_left_grid img {
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -webkit-transition: all 1s;
    transition: all 1s;
	background: #ebecec;
    padding: .4em;
}
.blog-info-middle ul li {
    display: inline-block;
}
.blog-grid-top h3,.two-blog2 h3,h5.card-title {
    font-size: 1.2em;
	margin: 1.2em 0 1em 0;
	font-weight: 700;
}
.blog-grid-top h3 a,.two-blog2 h3 a,h5.card-title a {
	color: #333333;
}
.blog-grid-top p,.two-blog2 p{
    margin-bottom: 2em;
}
.blog-grid-top {
 
    padding-bottom: 3em;
}
.blog-mid-sec {
    background: #eceff1;
    padding: .5em;
    margin: 1em 0;
}
button.btn.btn-primary.play.sec{
	width:40px;
	height:40px;
}
ul.blog-icons li {
    display: inline-block;
	margin-right: 20px;
	list-style:none;
}
ul.blog-icons a {
    font-size: 0.9em;
    letter-spacing: 1px;
    color: #999;
}
ul.blog-icons i {
    color: #CC0000;
}
.blog-girds-sec {
    border-top: 1px solid #ddd;
    margin-top: 1em;
    padding-top: 2em;
}


/* Icon 1 */

.animated-icon1, .animated-icon2, .animated-icon3 {
  width: 30px;
  height: 20px;
  position: relative;
  margin: 0px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  }
  
  .animated-icon1 span, .animated-icon2 span, .animated-icon3 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  }
  
 
  .animated-icon2 span {
  background: #e3f2fd;
  }
  
  .animated-icon2 span:nth-child(1) {
  top: 0px;
  }
  
  .animated-icon2 span:nth-child(2), .animated-icon2 span:nth-child(3) {
  top: 10px;
  }
  
  .animated-icon2 span:nth-child(4) {
  top: 20px;
  }
  
  .animated-icon2.open span:nth-child(1) {
  top: 11px;
  width: 0%;
  left: 50%;
  }

  .eleg{
    color: #2E2E2E !important;
  }

  

  .animated-icon2.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  }
  
  .animated-icon2.open span:nth-child(4) {
  top: 11px;
  width: 0%;
  left: 50%;
  }