@charset "UTF-8";

/* Phone Data Fix */
	.phone { display: none; }	
	#dkgauri { display: none; }

/* CSS Document */
	html, body {width: auto!important; overflow-x: visible!important; } 

/* Top Navigation Tweaks */
	#uark-site-topnav .dropdown-menu .selected {
		background-color: white !important;
		border-top: none !important;
		box-shadow: none !important;
	}

	.remove-overview > li:first-child { display: none !important; }
	.uark-page { padding-bottom: 60px; }

/* Remove Redundant Breadcrumb items - Turn on last breadcrumb item - overflow: hidden !important; text-overflow: ellipsis !important; width: fit-content !important;	white-space: nowrap !important;*/
	.breadcrumb li:last-child { 
		display: none;
	}

/* Back to Top Button */
	#topper {
	  position: fixed;
	  bottom: 20px;
	  right: 20px;
	  display: none;
	  z-index: 500;
	}

/* Footer Styles
-------------------------------------------------- */
		.underfine { text-decoration-color: #575757; }

/* Responsive Video embed hack for old bootstrap
-------------------------------------------------- */
		.flex-video {
		  position: relative;
		  padding-top: 25px;
		  padding-bottom: 67.5%;
		  height: 0;
		  margin-bottom: 16px;
		  overflow: hidden;
		}

		.flex-video.widescreen { padding-bottom: 57.25%; }
		.flex-video.vimeo { padding-top: 0; } 
		.flex-video iframe,
		.flex-video object,
		.flex-video embed {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		}

		@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
		  .flex-video { padding-top: 0; }
		}

		#main-content .h2, #main-content h2 { 
			font-weight: 600;
			margin-top: 2.6rem;
			margin-bottom: 1rem;
		}

		#main-content .h1, #main-content h1 {font-weight: bold;} 
		.lead {  font-size: 1.8em; margin-bottom: 2em; }
		.heading-link  {
			color: #333 !important;
			text-decoration: none !important;
		}

		@media(max-width:768px) {
			.hide-on-mobile  {
				display: none;
			}
		}

		#fancytop {  min-height: 400px; padding-top: 200px; padding-bottom: 160px; background: url(https://walton.uark.edu/test/landing-test/images/about-faculty-expertise.jpg) top center / cover no-repeat;  }
		#textyplace h1 { color: white; font-size: 5em; font-weight: bold;  }	
		#textyplace p { color: white; font-size: 2.5em; font-weight: 200; }	
			
		@media only screen and (max-width: 1200px) { #textyplace h1 { font-size: 3em; } #textyplace p { font-size: 1.8em; } } 
		@media only screen and (max-width: 768px) { #textyplace h1 { font-size: 2em; } #textyplace p { font-size: 1em; } } 
			
		#main-content {   }    /* temporary */		
		.chunk { margin-top: 4em; margin-bottom: 3em;  }		
		#DrewsNav .navbar { background-color: pink !important; }
		#drewsNav .navbar-brand { font-size: 17px !important; color: #262626 !important; }
		#drewsNav .nav-item, #drewsNav .nav-link { font-size: 16px; font-weight: bold; color: #525252;  }
							
/* Container holding the big top header image and the text overlay */

	#drewsawesomebanner .container-fluid {
  		position: relative;
  		text-align: center;
  		color: white;
		padding: 0px;
	}

	#drewsawesomebanner img { 
		width: 100%;
		object-fit: cover; 
		object-position: center; 
		overflow: hidden;  
		max-height: 580px;
		}
		
	.cover-image img { 
		width: 100%;
		object-fit: cover; 
		object-position: center; 
		overflow: hidden;  
		max-height: 580px;
	}	
						
/* Centered text */	
		#drewsawesomebanner .centered {
  	 	 	position: absolute;
  		 	top: 50%;
  		 	left: 50%;
  		 	transform: translate(-50%, -50%);
		}					
		.pre-intro h2, .split-box h2 { font-size: 36px; font-weight: bold; margin-bottom: 1em; }
		.pre-intro p, .split-box p { font-size: 20px; }
	 	.thename { color: #aa0000;  }
		.bigPink { background: #e8d9d9; }
        .lefty-content { padding: 30px 110px 30px 60px !important;  }
			
		@media only screen and (max-width: 768px) { .lefty-content { padding: 20px 20px 30px 10px !important;  } }							
		.righty-content { padding: 30px 80px 30px 60px !important;  }
			
		@media only screen and (max-width: 768px) { .righty-content { padding: 20px 20px 30px 10px !important;  } }			
		.spacey { margin-top: 100px !important;  }
					
		.bigPink h4 {		
			font-size: 1.7rem;
    		font-weight: 800;
    		margin-bottom: 20px;
    		margin-top: 50px;
    		color: #393939;			
		}
			
		.quickstats { 
			background-image: url(https://walton.uark.edu/test/landing-test/images/topography5.svg);
    		background-repeat: repeat;
    		background-color: #f5f5f5;
    		border: 1px solid #e8e8e8;
    		box-shadow: 16px 20px 8px #f8f8f8;	
			}	 
						
		.quickstats .somestat { font-size: 76px; font-weight: bold; line-height: 1 }	
			
		.quickstats .statinfo { font-size: 23px; font-weight: bold; line-height: 1.2;  }
		
		.letmetellyou {		
			padding: 3em 0em 3em 0em; 
			background-image: url(https://walton.uark.edu/_resources/images/backgrounds/topography5white.svg);
    		background-repeat: repeat;
    		background-color: #464646;
    		border: 1px solid #e8e8e8;
    		box-shadow: 16px 20px 8px #f8f8f8;				
			}					
		.letmetellyou figcaption, .letmetellyou blockquote { color: white; }	
		.letmetellyou blockquote { display: inline-block; position: relative; border-left: none; }	
		.letmetellyou blockquote::before { content: open-quote; position:absolute; top:0; left: 10px; font-weight: bold; font-size: 1.5em; }
		.letmetellyou blockquote::after { content: close-quote; position:absolute; bottom:0; right: 10px; font-weight: bold; font-size: 1.5em; }
		.letmetellyou blockquote { quotes: "“" "”" "‘" "’"; }	
		.letmetellyou blockquote .whatsay { font-size: 26px; line-height: 1.5; font-weight: bold; }
		.letmetellyou figcaption { font-size: 14px; }
		.letmetellyou hr {
			width: 50%;
    		height: 8px;
    		margin-left: auto;
    		margin-right: auto;
    		margin-bottom: 28px;
    		background-color: #d2a5a8;
    		border-radius: 6px;
    		border: 0px;
    		opacity: 1;
			}	
						
		.darkside {  color: white; background-image: url(https://walton.uark.edu/test/landing-test/images/topography5white.svg); background-repeat: repeat; background-color: #2f2f2f; }
		.subtopicalbliss { margin-bottom: 60px;  }
		.subtopicalbliss h3 {
    		font-size: 26px;
    		font-weight: bold;
    		margin-top: 26px;
		}

		.subtopicalbliss .topiky {
    		border-radius: 12px;
    	}

		.fancy-feature {
			background-color: #f5f5f5;
			margin: 20px 0px 32px 0px;
			border-radius: 4px;  
		}

		.fancy-feature-text {
			padding: 25px 40px 25px 40px;
			height: 100%;
		}

		.photo-capn {
			margin-top: 8px;
			font-size: 14px;
			color: #474747;
			margin-bottom: 0px;
		}

		#sharethat { display: inline; float: right; }
		.sharep { display: inline; font-size: 12px; vertical-align: top; margin-right: 5px; }

	@media only screen and (max-width : 768px) {
		#sharethat  {
			display: block;
			float: none;
			margin-top: 4px;
		}
	}

	@media only screen and (max-width : 1400px) { .just-show-big-screens { display: none; }}

	/* Image Float Styles
-------------------------------------------------- */

	.putright  { 
		float: right;
		margin-left: 40px;
		margin-bottom: 50px;

	}

	.putleft  { 
		float: left;
		margin-right: 40px;
		margin-bottom: 50px;

	}

	.putcenter  {
		margin-left: auto !important;
		margin-right: auto !important;	
		margin-bottom: 3rem !important;
		margin-top: 3rem !important;
		height: auto;
		max-width: 100%;
	}

	/* Feed Styles for Blog Module
-------------------------------------------------- */
		.postfeed article { 	
			margin-top: 20px; 
	    	margin-bottom: 20px; 
		}
	
		.thestory { 
			margin-bottom: 5px;
			border-radius: 6px; 	
		}
			
		.thestory h2 a {  
			color: #3f3f3f !important;
    		font-size: 26px;
    		font-weight: 700;
    		line-height: 1 !important;
			text-decoration: none !important;		
		}			
		
		.thestory img {width: 250px; border-radius: 0px;} 	
		.thestory .whodat { font-size: 11px !important; color: #2f2f2f!important; font-weight: 800;  }

		#main-content .postfeed h2 { margin-top: 0px; line-height: 1; }

/* Option 1x style: Crazy Big Images */		
		 .option1x .thestory img { width: 100%;  margin-bottom: 12px; max-width: 914px;  } 		
		
		@media (max-width: 1200px) { 
  			.option1x .thestory img { width: 600px; } 
			.option1x .thestory h2, .option1x .thestory h2 a { font-size: 24px; line-height: 1.22; }		
		}
				
		 @media (max-width: 992px) { 
			.option1x .thestory img { width: 700px; } 
			.option1x .thestory h2, .option1x .thestory h2 a { font-size: 24px; line-height: 1.22; }		
		}
		
		@media (max-width: 768px) { 
			.option1x .thestory img { width: 540px; } 
			.option1x .thestory h2, .option1x .thestory h2 a { font-size: 24px !important; line-height: 1.22; } */		
		}
		
		@media (max-width: 560px) { 			
			.option1x .thestory img { width: 400px; } 		
		}		
		
/* Option 1 style: Large Boxes */
		.option1 .thestory img {width: 388px; border-radius: 0px;}	
		.option1 article { margin-bottom: 20px; }
		.option1 article .thestory .media-body { overflow-wrap: anywhere; }	

		@media (max-width: 1200px) { 				
	 		.option1 .thestory img { width: 250px; } 
			.stacks-o-feeds .option1 .thestory img { width: 250px; }  /* Helps with groupings of feeds */
		}

		 @media (max-width: 992px) { 			 
			.option1 .thestory img { width: 100%; max-width: 700px; }  
			.option1 .thestory .media-heading { margin-top: 16px !important; margin-bottom: 7px !important; }
			.stacks-o-feeds .option1 .thestory img { width: 120px; }  /* Helps with groupings of feeds */
			.stacks-o-feeds .option1 .thestory h2, .option1 .thestory h2 a { font-size: 30px; line-height: 1.22; }	
		}
			
		@media (max-width: 768px) { 
       		.option1 .thestory img { width: 100%; max-width: 500px; }  
			.option1 .thestory h2, .option1 .thestory h2 a { font-size: 24px; line-height: 1.22; } 		
		}
		
		@media (max-width: 551px) { 
       		.option1 .thestory img { width: 100%; max-width: 400px; } 			
		}
			
		@media (max-width: 430px) { 
       		.option1 .thestory img { width: 100%; max-width: 300px; } 			
		}
		
		@media (max-width: 340px) { 
       		.option1 .thestory img { width: 100%; max-width: 240px; } 			
		}
				
/* Option 2 style: display inline boxes */
		.option2 .thestory { padding: 6px; padding-top: 0px; border: 1px solid #eaeaea; }
		.option2 .thestory img { width: 100%; border-radius: 0px; margin-bottom: 8px; }
		.option2 .pull-left {margin-right: 0px; padding-right: 0px;}
		.option2 article { 			
			width: 295px;
			display: inline-block !important;
			vertical-align: top !important;
			margin-right: 24px;
			margin-bottom: 24px;		
		} 
	
		@media (max-width: 1400px) { 	
			.option2 article { width: 245px !important; }	
		}
	
 		@media (max-width: 1200px) { 
			.option2 article { width: 295px !important; }		
		}

		 @media (max-width: 992px) { 
			.option2 article { width: 520px !important; }	
		}
		
		 @media (max-width: 768px) {   		
			.option2 article { width: 100% !important; }
			.option2 .thestory h2, .option2 .thestory h2 a { font-size: 22px; line-height: 1.22; }	
		}
		
/* Option 3 style: smaller blog module news feed */		
		.option3 article { margin-bottom: 26px; }
		.option3 .storythumb { width: 112px; }			
		.option3 .thestory {	
			padding: 0px;
			border: 0px;
			background: none;
			margin-bottom: 5px;
			border-radius: 6px; 	
		} 		
		.option3 .thestory h2 { line-height: .05px !important;}
		.option3 .thestory h2 a {  					
				font-size: 18px;
				vertical-align: middle !important;
				line-height: 1.1 !important;	
		}			
			.option3 .thestory .blog-excerpt {  					
				display: none;	
		}	

	 @media (max-width: 992px) { 	 
		.stacks-o-feeds .option3 .storythumb { width: 70px !important; }  /* Helps with groupings of feeds */
		.stacks-o-feeds .option3 .thestory h2, .option3 .thestory h2 a { font-size: 15px; line-height: 1.26; } /* Helps with groupings of feeds */
		}

	@media (max-width: 768px) { 
		.stacks-o-feeds .option3 .storythumb { width: 120px !important; } /* Helps with groupings of feeds */
		.stacks-o-feeds .option3 .thestory h2, .option3 .thestory h2 a { font-size: 18px; line-height: 1.22; } /* Helps with groupings of feeds */
		.stacks-o-feeds .option3 .thestory .blog-excerpt { display: inline-block; }		
				 }
		.magicbutton { color: #aa0000; font-weight: normal; }

/* Extra styles to add padding on blog module feeds */
		 .feedpadright  { padding-right: 36px; }
		 .paddytop  { padding-top: 40px; }

/* Old Styles needed during transition to support old-style pages  */
		.jumbotron {
			padding: 30px;
			margin-bottom: 30px;
			font-size: 16px;
			font-weight: 200;
			line-height: 1.4;
			color: inherit;
			background-color: #eee;
		}

	@media screen and (min-width: 768px) {
		.container .jumbotron {
			padding-right: 60px;
			padding-left: 60px;
			padding-top: 48px;
			padding-bottom: 48px;
		}}

		.container .jumbotron {
			border-radius: 6px;
		}

		.jumbotron h3  {
			font-size: 24px;
			font-weight: bold;
		}

		.jumbotron .fas {
			font-size: 4.2em;
			color: #e1c1c1;
		}

		h3 small, .h3 small, h4 small, .h4 small {
			font-size: 14px;
			color: #999;
		}

		.btn { margin-bottom: 4px; }
		.btn-danger {
			color: #FFF;
			background-color: #aa0000;
			border-color: #aa0000;
		}

/* Styles for Cards */
		.card .card-content {
		padding: 20px;
		border-radius: 0 0 2px 2px
		}

		.card-image img {
			border-radius: 7px 7px 0px 0px !important; }

		.card .card-action {
		  padding: 20px;
		}

/* Styles for Arkansas Business Hall of Fame
-------------------------------------------------- */
		.abhfwell {
			background-color: white !important;
			padding: 40px;
		}

		.abhfwell p {
			font-size: 23px !important;
			font-weight: 200;
			margin-bottom: 26px;
		}

		.abhfTOPwell {
			padding: 40px;
		}

		.abhfTOPwell h3 {
			font-size: 2em;
			font-weight: 200;
		}

		.abhfTOPwell p {
			font-size: 14px !important;
		}

		.well {
			min-height: 20px;
			padding: 19px;
			margin-bottom: 20px;
			background-color: #f5f5f5;
			border: 1px solid #e3e3e3;
			border-radius: 4px;
		}

/* Directory Styles  
-------------------------------------------------- */	
		.directory_listPeople .row { margin-bottom: 50px; }

/* Summary and Details dropdowns  
-------------------------------------------------- */					
		#droppy summary {
			display: list-item;
			font-size: 18px;
			border: 1px solid lightgrey;
			border-radius: 5px;
			margin-bottom: 10px;
			padding: 8px;
			cursor: pointer;
			background: #f3eaea;
		}
		#droppy details { margin-bottom: 10px;  }
		#droppy details[open] { margin-bottom: 40px; }
		#droppy details[open] summary { background: #f4f3f3; border: 1px solid #ababab; }
