// TYPOGRAPHY

// @font-face {
// 	font-family: 'Merriweather2';
// 	src: url('../fonts/Merriweather-Regular.otf') format('opentype');
// 	font-weight: 400;
// 	font-style: normal;
// 	font-display: swap;
// }

#fupi_content{
	h2, h3{
		font-weight: 600;
	}
	h3{
		line-height: 1.2;
		&.fupi_title{
			font-size: 18px;
			margin: 40px 0 10px;
			line-height: 1.2;
			font-weight: 500;
			color: #000;
		}
	}
	code{
		font-size: 13px;
	}
	#submit{
		font-size: 15px;
		padding: 2px 14px;
	}
	.fupi_faux_link{
		border: 0;
		background: transparent;
		font-size: inherit;
		text-decoration: underline;
		padding: 0;
		cursor: pointer;
		color: #2271b1;
		text-align: left;
		font-size: inherit !important;
		&:hover, &:focus{
			text-decoration: none;
			color: #135e96;
		}
	}
	.button-primary{
		&:hover, &:focus{
			text-decoration: none;
		}
	}
}

#fupi_settings_form{
	h2{
		margin: 0;
		padding: 1em 20px 0;
		font-size: 24px;
	}
}

@media screen and (min-width: 1100px){
	#fupi_settings_form{
		h2{
			font-size: 30px;
			letter-spacing: -.2px;
			color: #344a5b;
			& + table{
				margin-top: 20px;
			}
		}
	}
}
.fupi_module_name{
	font-size: 13px;
	text-transform: uppercase;
	display:block;
	margin-bottom: 13px;
	color: #555;
	letter-spacing: .2px;
}

#fupi_settings_form[data-activetab="tools"]{
	.fupi_module_name{
		display: none;
	}
	h2:first-of-type{
		.fupi_module_name{
			display: block;
		}
	}
} 

.fupi_subtitle{
	font-size: 18px;
	font-weight: 500;
	color: #666;
}
.fupi_important{
	color: red;
}
.fupi_under_field{
	color: #37393d;
	margin: 5px 0;
	a{
		color: #1C98CB !important;
		font-size: 14px !important;
	}
}
.fupi_after_field,
.fupi_under_field{
	vertical-align: middle;
}

// PAGE TITLE (1st thing above the settings form - small latters with a line below)

#fupi_page_title_wrap{
	display: flex;
	flex-wrap: wrap;
	vertical-align: middle;
	justify-content: center;
	border-bottom: 1px solid #ccc;
	padding: 0 40px 20px;
	background-color: #f8f8f8;
	margin: 0 -40px;
}
	#fupi_page_title{
		font-weight: 500;
		font-size: 15px !important;
		margin-top: 21px;
		margin-bottom: 0;
		color: #222;
	}

// VIDEO LINK

a.fupi_vid_link{ // blue link text with a red icon next to it
	text-decoration: none;
	i{
		font-size: 20px !important;
		display: inline;
		color: #f94040;
		position: relative;
		top: 4px;
	}
	span{
		font-weight: 500;
	}
	&:hover, &:focus{
		span{
			text-decoration: underline;
		}
	}
}
a.button.fupi_vid_link{
	i{
		font-size: 24px;
		position: relative;
		top: -2px;
	}
}
.fupi_under_field{
	a.fupi_vid_link {
		i{
			font-size: 22px;
			position: relative;
			top: 4px;
		}
	}
}

// VIDEO BUTTON

.fupi_vid_btn{
	border: 1px solid #a2bcd7;
	background: transparent;
	// border-radius: 4px;
	padding: 4px 10px 4px 12px;
	text-decoration: none;
	display: inline-block;
	.fupi_inner{
		display: flex;
		justify-content: center;
		align-items: center;
	}
		i{
			font-size: 20px !important;
			display: inline;
			color: #f94040;
		}
		span{
			font-weight: 500;
		}
	&:hover, &:focus{
		background-color: #edf0f1;
	}
}

// VIDEO THUMB

.fupi_vid_thumb{
	display: block;
	max-width: 640px;
	text-decoration: none;
	position: relative;
	cursor: pointer;
	margin: 20px auto;
	// box-shadow: 3px 3px 10px rgb(0 0 0 / 20%);
    // border-radius: 6px;
    overflow: hidden;
	img{
		display: block;
		width: auto;
		max-width: 100%;
		line-height: 1;
		transition: .3s all;
	}
	.fupi_vid_thumb_play_btn{
		transition: .3s all;
	}
	&:hover{
		img{
			border-color: #1C98CB;
		}
		.fupi_vid_thumb_play_btn{
			background: #0da7e4;
		}
	}
}
	.fupi_vid_thumb_play_btn{
		transition: .3s all;
		border: 0;
		position: absolute;
	    top: 50%;
	    left: 50%;
	    margin-top: -25px;
	    margin-left: -33px;
	    width: 66px;
	    height: 50px;
	    line-height: 50px;
	    background: #1C98CB;
	    // border-radius: 6px;
	    text-align: center;
	    color: #fff;
	    font-size: 36px;
		.dashicons{
			line-height: 50px !important;
			font-size: 30px !important;
		}
		&::before{
			position: relative;
			left: 2px;
		}
	}
@media screen and (min-width: 860px) {
	.fupi_vid_thumb.fupi_right{
		float: right;
		margin-left: 20px;
	}
}