/* ==========================================================
   mobile-fixes.css
   Load this AFTER custom.css. Contains only the mobile fixes.
   ========================================================== */

/* 1. Logo: size controlled here instead of inline style */
.navbar-brand img{
	height: 90px;
	width: auto;
}

/* 2. Smaller header on tablets and phones */
@media only screen and (max-width: 991px){
	.navbar-brand img{
		height: 60px;
	}

	/* Parallax backgrounds are jerky on phones: use a plain background */
	.parallaxie{
		background-attachment: scroll !important;
		background-position: center center !important;
	}
}

/* 3. Touch screens have no hover: show project titles by default
      and add a dark gradient so the white text stays readable */
@media (hover: none){
	.project-content{
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.project-image figure::before{
		height: 100%;
		background: linear-gradient(180deg, rgba(1, 5, 53, 0) 40%, rgba(1, 5, 53, 0.85) 100%);
	}
}

/* 4. Long email / link text must wrap instead of being cut off,
      and the email must not be force-capitalised in the footer */
.cta-contact-content p a,
.footer-links ul li a{
	overflow-wrap: anywhere;
	word-break: break-word;
}

.footer-links ul li a[href^="mailto:"],
.cta-contact-content p a[href^="mailto:"]{
	text-transform: none;
}

/* 5. Very small phones (320px - 375px) */
@media only screen and (max-width: 375px){
	.btn-default{
		font-size: 15px;
		padding: 14px 45px 14px 18px;
	}

	.cta-contact-content p{
		font-size: 14px;
	}
}