p {
	
	font-size: 16px;
	
}


/* Top bit */
.slider-for{
		
	background: transparent;
/* 	text-align: center; */
	

	width: 80%;	
	height: 400px;
		
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	margin-bottom: 200px;

}

/* Bottom bit */
.slider-nav {
	
/* 	height: 200px; */
	
	
	background: transparent;
    text-align: center;
    
    margin-left: 100px;
	margin-right: 100px;
	margin-top: 100px;
	margin-bottom: 50px;

		
		
}

.slick-slide.is-active {
	
	background-color: #fff
}


.slick-dots li button:before {
    color: white;
  }
  
  
  .slick-dots li.slick-active button:before {
    color:#C4538A !important;
}


.slick-next {
/*     right: 0px; */
}

.slick-prev {
/*     left: 0px; */
}


.project-title {
	
	text-align: center;
    font-size: xx-large;
	margin-bottom: 50px;
}

.research-heading {
	
	color:#C4538A;
	
}

.research-cont {
	
	color: #A5A6AA !important;
    position: relative;
    text-decoration: none;

	padding-bottom: 5px;

    padding-top: 5px;
}

.research-cont:hover {
  
}

.research-cont:before {
  
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #A5A6AA;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
  
}


.research-cont:hover:before {
  visibility: visible;
  transform: scaleX(1);
}

.research-img {
	
	width: 70%;
	
	margin-left: auto;
margin-right: auto;
	
	height: 40vh;
}

.slide-img {
	
	width: 80%;
	
}

.slide-img {
	
	width: 20vw;
	
}


.nav-image {
	
	height: 250px;
	
}

.research-para {
	
	margin-top: 5px;
	margin-bottom: 5px;
	
}


.mySlides {display:none;}


.display-container {

position: relative;

}


.slick-current {
	
	
}


.nav-size {
	
	padding: 10px 0 !important;
		
}


.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
 


/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  
  background-color: rgba(0,0,0,.20) !important;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */

/*
.sticky + .row3 {
  padding-top: 102px;
} 
*/

#myHeader {
	
	transition: 0.4s;
}


/* Add these properties to the .navigation ul ul rule: */
.drop-down-ul {

-webkit-transition: height 0.3s ease-in;
            -moz-transition: height 0.3s ease-in;
            -o-transition: height 0.3s ease-in;
            -ms-transition: height 0.3s ease-in;
            transition: height 0.3s ease-in;
                
}

/* And these, to the .navigation ul ul li rule:           */
.drop-down-li {
	
-webkit-transition: background-color 0.3s ease;
            -moz-transition: background-color 0.3s ease;
            -o-transition: background-color 0.3s ease;
            -ms-transition: background-color 0.3s ease;
            transition: background-color 0.3s ease;
  
}


@media only screen and (max-width: 450px) {


.research-img{
		
	height: 250px;
		

}


}




@media only screen and (max-width: 750px) and (min-width: 450px) {
  
  .slider-nav {
	  
	  display: none;
	  
  }
  
  .project-title {
	  
	  height: 5vh;
	  font-size: large;
	  
  }
  
  
  #research-page {
	  
	  height: 1000px;
	  
  }
  
  
 .research-img {
	
		
	height: 350px;
}

  
  
}


@media only screen and (max-width: 1200px) and (min-width: 750px) {

 .nav-image {
	
	height: 150px;
	
}

.research-img{
		
	height: 250px;
		

}


}


/* For All Mobile Stuff */

@media only screen and (max-width: 750px) {
  
  .slider-nav {
	  
	  display: none;
	  
  }
  
  .project-title {
	  
	  height: 5vh;
	  font-size: large;
	  
  }
  
  
  #research-page {
	  
	  height: 1000px;
	  
  }
  
  
    
  
}


@media only screen and (max-width: 978px) {
	
	#header {
	  
	  padding: 0px;
	  
  }

	
	}
	



/*
.slider-for div{
		
	background: #f2f2f2;
	text-align: center;
	
	
	vertical-align: middle;

    width: 80%;	
	height: 50vh;

}
*/


/*
h3 {
	background: #f0f0f0;
	color: #3498db;
	font-size: 2.25rem;
	margin: .5rem;
	padding: 2%;
	position: relative;
	text-align: center;
}

.slider-for h3 {
	line-height: 10rem;
}

.slider-nav h3::before {
	content: "";
	display: block;
	padding-top: 75%;
}

.slider-nav h3 span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}



/*
.slider-nav {
	
	margin-left: 100px;
	margin-right: 100px;
	
}

.slider-single {
	
	margin-left: 100px;
	margin-right: 100px;
	margin-top: 50px;
	margin-bottom: 50px;
}
*/




/* Border X get width  */

/*
div.borderXwidth a:before, div.borderXwidth a:after
{
    position: absolute;
    opacity: 0;
    width: 0%;
    height: 2px;
    content: '';
    background: #FFF;
    transition: all 0.3s;
}

div.borderXwidth a:before
{
    left: 0px;
    top: 0px;
}

div.borderXwidth a:after
{
    right: 0px;
    bottom: 0px;
}

div.borderXwidth a:hover:before, div.borderXwidth a:hover:after
{
    opacity: 1;
    width: 100%;
}
*/

.borderXwidth a:before, .borderXwidth a:after
{
    position: absolute;
    opacity: 0;
    width: 0%;
    height: 2px;
    content: '';
    background: #C4538A;
/*     transition: all 0.3s; */
    
    -webkit-transition: 0.5s ease-in;
            -moz-transition: 0.5s ease-in;
            -o-transition: 0.5s ease-in;
            -ms-transition: 0.5s ease-in;
            transition: 0.5s ease-in;

}

.borderXwidth a:before
{
    left: 0px;
    top: 0px;
}

.borderXwidth a:after
{
    right: 0px;
    bottom: 0px;
}

.borderXwidth a:hover:before, .borderXwidth a:hover:after
{
    opacity: 1;
    width: 100%;
}

.borderXwidth3
{
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.borderXwidth-topChild
{
	
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.borderXwidth2 a:before, .borderXwidth2 a:after
{
    position: absolute;
    opacity: 0;
    width: 0%;
    height: 0px !important;
    content: '';
    background: #C4538A;
    
   
}







.navigation2 {
/*             width:600px; */
        }
        .navigation2 ul{
        /* positioning */
        	position:relative;
            z-index:1000;
        /* remove the dots next to list items: */
            list-style:none; 
        /* get rid of any default or inherited margins and padding: */
            margin:0; 
            padding:0; 
            
        /* styling: */
/*         font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; */
            font-weight: lighter;
/*             font-size: 15px; */
        }
        
        /* we're using the direct descendant selectors > to ONLY affect the main menu items */
        .navigation2 > ul > li {
        /* positioning */ 
            position: relative;
            float: left;
        /* styling: */
            margin-right: 10px;
        }
        .navigation2 > ul > li > a {
        /* positioning */ 
            display:block;
        /* styling: */
            padding:8px 14px;
/*             text-decoration:none; */
/*             color:#aaaaaa;  */
            
        }
        .navigation2 > ul > li > a:hover{
        /* styling: */
/*             background-color:#666666; /* grey */ */
/*             color:#eeeeee; /* light grey */ */
        }
        
        
        
        .navigation2 ul ul{
            
/*             background-color:#e6056f; /* remove. this is for illustration purposes only */ */
            width:340px; /* you need a width to accommodate tertiary menus */
            
            position:absolute;
            z-index:100;
            
            height: 0;
            overflow: hidden;
            
            -webkit-transition: height 0.5s ease-in;
            -moz-transition: height 0.5s ease-in;
            -o-transition: height 0.5s ease-in;
            -ms-transition: height 0.5s ease-in;
            transition: height 0.6s ease-in;
                
        }
        

        /* don't display tertiary box yet */
        .navigation2 > ul > li:hover ul ul, .navigation > ul > li > a:hover ul ul{
            height:0;
            
        }
        /* tertiary drop-down box */
        .navigation2 ul ul ul{
            left:170px;
            width:170px;
        }
        
        .navigation2 > ul > li:hover ul, .navigation2 > ul > li > a:hover ul,
        .navigation2 ul ul li:hover > ul, .navigation2 ul ul li a:hover > ul{
            height:220px; /* need a height to accommodate any tertiary menus */
        }
        
        /* drop-down item styles */
        /* if you want different styling for tertiary menus, just copy the 4 rules below and insert an additional ul: for example: ".navigation ul ul li", becomes: ".navigation ul ul ul li" */
        
        .navigation2 ul ul li{
/*             background-color:#eaeaea; /* grey */ */
            width:170px;
            
            
            -webkit-transition: background-color 0.5s ease;
            -moz-transition: background-color 0.5s ease;
            -o-transition: background-color 0.5s ease;
            -ms-transition: background-color 0.5s ease;
            transition: background-color 0.6s ease;
        }
        
        .navigation2 ul ul li:hover {
/*             background-color:#999; /* grey */ */
        }
        
        .navigation2 ul ul li a {
            display:block;
/*             text-decoration:none; */
            margin:0 12px;
            padding:5px 0;
/*             color:#4c4c4c; /* grey */ */
        }
        .navigation2 ul ul li a:hover, .navigation ul ul li:hover > a {
/*             color:#ffffff; /* white */ */
        }
                


.navigation2 ul ul ul li a{
            border:0 !important;
        }
        .navigation2 ul ul ul li + li a{
            border-top:1px dotted #999 !important;
        }
        .navigation2 ul ul li + li a{
            border-top:1px dotted #999;
        }
        .navigation2 ul ul li:hover + li a{
            border-top:1px solid #eaeaea;
        }
        .navigation2 ul ul ul li:hover + li a{
            border: 0 !important;
        }
        .navigation2 ul ul ul li:hover + li{
            border-top:1px solid #999 !important;
        }