/* === HERO BLOCK === */

.container-hero-block {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.container-hero-block.home-page {
	background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0)), url('../img/hero-home-background.jpg');
}

.container-hero-block.portfolio-page {
	background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0)), url('../img/hero-portfolio-background.jpg');
}

.container-hero-block.contact-page {
	background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0)), url('../img/hero-contact-background.jpg')
}

.container-hero-block h1, .container-hero-block h2 {
	font-weight: 700;
	font-family: 'Open Sans', sans-serif;
	text-shadow: 2px 2px #222;
	margin-left: auto;
	margin-right: auto;
}

.container-hero-block h1 { 
	color: #fff;
	font-size: calc(42px + (102 - 42) * ((100vw - 320px)/(1600 - 320)))
}

.container-hero-block h2 {
	color:  #4799eb;
	line-height: 1.5;
	font-size: calc(32px + (64 - 32) * ((100vw - 320px)/(1600 - 320)));
}

/* Desktop - block height, text width and h1 bottom margin */
@media all and (min-width:768px) { 
	.container-hero-block { height: 520px }
	.container-hero-block h1, .container-hero-block h2 { 
		width: 60%; 
	}
	.container-hero-block h1 {margin-top: 3%;  margin-bottom: 3% }
}

/* Mobiles - block height, text width and h1 bottom margin */
@media all and (max-width:767px) { 
	.container-hero-block { height: 500px }
	.container-hero-block h1, .container-hero-block h2  { 
		width: 90%; 
	}
	.container-hero-block h1 { margin-top: 18%; margin-bottom: 5% }
}


/* ==== CONTAINER FOR SINGLE COLUMN OF CONTENT ==== */

/* Desktop */
@media all and (min-width:768px) {
    .container-one-column { padding: 4% 20% 5% 20% }
}

/* Mobiles */
@media all and (max-width:767px) {
     .container-one-column { 
         padding: 7% 7% 10% 7%;
         text-align: center;
    }
}

.container-one-column h1 {
    line-height: 1.2; margin-bottom: 32px;
    font-size: calc(38px + (54 - 38) * ((100vw - 320px)/(1600 - 320)));
}

.container-one-column h2 {
     line-height: 1.3; margin-top:32px; margin-bottom: 12px;
     font-size: calc(32px + (48 - 32) * ((100vw - 320px)/(1600 - 320)));
}
 
.container-one-column h3 {
     line-height: 1.4; margin-top:28px; margin-bottom: 2px;
     font-size: calc(22px + (32 - 22) * ((100vw - 320px)/(1600 - 320)));
}
 
.container-one-column p,
.container-one-column li {
     line-height: 1.5; margin-bottom:14px;
     font-size: calc(16px + (18 - 16) * ((100vw - 320px)/(1600 - 320)));
}

.container-one-column ul { margin-left: 17px }


/* ============== FAUX BUTTONS =================== */

a.button:link, a.button:visited, a.button:hover, a.button:active { 
    text-decoration: none;
    color: #fff;
    border: none;
    padding: 14px 30px;
    display: inline-block;
    line-height: 1;
    font-weight: bold;
    letter-spacing: 1px;
}
 
a.button-solid:link, .button-solid:visited {
    background-color: #ff6501;
    color: #fff;
} 
 
a.button-solid:hover, .button-solid:active {
    background-color: #0c1d37;
   color: #fff 
}
 
a.button-round { border-radius: 50px }
a.button-soft { border-radius: 5px }

/* Hide button icons on narrow desktop sceens */
@media all and (min-width:768px) and (max-width: 1024px) {
   .container-flexbox .item-3 a.button i { display: none}
}

/* ============== FANCY HYPERLINKS =================== */

a.fancy-link:link, a.fancy-link:visited,
a.fancy-link:hover, a.fancy-link:active { 
    text-decoration: none;
    color: inherit;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    padding-bottom: 2px;
}

a.fancy-link:link, a.fancy-link:visited { 
    color: #222; 
    border-bottom-color:#ff6501
}

a.fancy-link:hover, a.fancy-link:active { 
    color: #222; 
    border-bottom-color: #222
}

.text-accent {
    display: inline-block;
    padding-right: 0.25em;
    padding-left: 0.25em;
    border-radius: 8px;
    background-color: rgba(255, 101, 1, 0.12);
    color: #ff6501;
}


/* ============== FLEXBOX MULTI-COLUMN LAYOUTS ================== */


/* ============ PARENT FLEXBOX CONTAINERS ========== */

.container-flexbox { 
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

/* Desktops only - inside padding  */
@media all and (min-width:768px) {
	.container-flexbox { padding: 2% 10% 1% 10% }
}

/* Mobiles only - inside padding */
@media all and (max-width:767px) {
	.container-flexbox { padding: 7% 8% 1% 8% }
}

/* ====== INNER FLEXBOX COLUMN: 1 COLUMN EVERY SCREEN ======= */

.container-flexbox .item-1 { 
	width: 100%;
    padding: 1% 6% 0 6%;
    text-align: center; 
}

/* ====== FLEXBOX ITEM COLUMNS: 2 COLUMNS ON DESKTOPS, 1 COLUMN ON MOBILES ====== */

/* Desktops - 2 columns */
@media all and (min-width:768px) { 
	.container-flexbox .item-2 { 
		width: 45%;
		padding: 3% 0 4% 0;
	}
}

/* Mobiles - 1 column */
@media all and (max-width:767px) { 
	.container-flexbox .item-2 {
		text-align: center; 
		width: 100%;
		padding: 5% 5% 5% 5%;
	}
}

.container-flexbox .item-2 h2 {
    font-size: calc(24px + (48 - 16) * ((100vw - 320px) / (1600 - 320)));
}

.container-flexbox .item-2 p {
    font-size: calc(16px + (22 - 16) * ((100vw - 320px) / (1600 - 320))); 
}

/* =======INNER FLEXBOX COLUMNS: 3 COLUMNS ON DESKTOPS, 1 COLUMN ON MOBILES ===== */

/* Desktops - 3 columns */
@media all and (min-width:768px) { 
	.container-flexbox .item-3 { width: 30% }
	.container-flexbox .item-3 { margin-bottom: 6% }
}

/* Mobiles - 1 column */
@media all and (max-width:767px) { 
	.container-flexbox .item-3 { width: 100% }
    .container-flexbox .item-3 { margin-bottom: 14% }
    .container-flexbox .item-3 img { 
        max-width: 390px;
        width: 90%;
        margin-left: auto;
        margin-right: auto
    }
}


/* Spacing under images in children of parent flexbox containers */
.container-flexbox img { margin-bottom: 20px }

/* Makes square images circles  */
img.image-circle { 
    border-radius: 100%;
}

.container-flexbox .item-1 h2 {
    line-height: 1.2; margin-bottom: 8px;
    letter-spacing:-1px;
    font-size: calc(24px + (48 - 24) * ((100vw - 320px)/(1600 - 320)));
}

.container-flexbox .item-1 p {
    line-height: 1.5; margin-bottom: 14px;
    font-size: calc(17px + (22 - 17) * ((100vw - 320px)/(1600 - 320)));
}

@media all and (max-width:767px) {
    .container-flexbox .item-1 { text-align: center }
}

.container-flexbox .item-1,
.container-flexbox .item-2 p,
.container-flexbox .item-3 p {
    line-height: 1.5; margin-bottom:20px;
    font-size: calc(16px + (19 - 16) * ((100vw - 320px)/(1600 - 320)));
}

.container-flexbox .item-2 h3,
.container-flexbox .item-3 h3 {
    line-height: 1.6; margin-bottom: 12px;
}

/* Centre-align text withn two, three and four columns on mobiles */
@media all and (max-width:767px) {
    .container-flexbox .item-2,    
    .container-flexbox .item-3  { text-align: center }
}

.container-flexbox .item-3 h3,
.container-flexbox .item-3-2 h3 {
    font-size: calc(22px + (28 - 22) * ((100vw - 320px)/(1600 - 320)));
    margin-bottom: 12px;
    margin-top: 42px;
    font-weight: bold;
}

.container-flexbox .item-3 img {
    margin-top: 12px
}


/* =============== BEGIN CONTACT FORM CSS ============= */

/* == Contact form container == */

/* All screens */
.container-contact-form { 
	text-align: center; 
	background-color: #fde6d6 
}

/* Desktop */
@media all and (min-width:1024px) { 
	.container-contact-form {
		margin: 4% 23% 4% 23%;
		padding: 2% 4% 1% 4%
	}
}

/* Mobiles */
@media all and (max-width:1023px) { 
	.container-contact-form { 
		margin: 6% 8% 18% 8%;
		padding: 7% 8% 8% 8%;
	}
}

/* == Contact form heading and text == */

/* Heading */
.container-contact-form h3 { 
	font-weight: bold; 
	color: #0c2461;
	line-height: 1.2;
	margin-bottom: 3%;
	font-size: calc(30px + (64 - 30) * ((100vw - 320px) / (1600 - 320))); 
}

/* Text */
.container-contact-form p { 
    font-weight: normal;
    color: #000; 
	line-height: 1.5;
	margin-bottom: 7%;
	font-size: calc(16px + (22 - 16) * ((100vw - 320px) / (1600 - 320))); 
}

/* == Contact form fields == */

#contact-form .flex-row { display: flex; justify-content: space-between }

/* Desktop */
@media all and (min-width: 1024px) {
	#contact-form .flex-row { flex-direction: row; text-align: left; margin-bottom: 6% }
	#contact-form .flex-row .item-name,
	#contact-form .flex-row .item-email { width: 47% }
	#contact-form .flex-row .item-textarea { width: 64% }
	#contact-form .flex-row .item-btn { width: 30%; align-self: flex-end }
}

/* Mobiles */
@media all and (max-width: 1023px) {
	#contact-form .flex-row { flex-direction: column; text-align: center; }
}

#contact-form label, #contact-form input, #contact-form textarea {
	font-family: sans-serif;
	color: #000;
	display: block;
}

#contact-form label {
	font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320))); 
	font-weight: bold;
	margin-bottom: 8px;
	display: flex;
	align-items: baseline;
}

#contact-form [type="text"], 
#contact-form [type="email"],
#contact-form textarea { width: 100% }
#contact-form ::placeholder { font-size: 94% }

/* Mobiles */
@media all and (max-width: 1023px) { 
	#contact-form [type="text"], 
	#contact-form [type="email"],
	#contact-form textarea { margin-bottom: 20px }
}

#contact-form input, #contact-form textarea {
	padding: 10px 12px;
	border: 2px solid #0c2461;
	background-color: #f0f0f0;
	border-radius: 5px;
}

#contact-form input:focus,
#contact-form textarea:focus {
	background-color: #fff;
}

#contact-form.flex-row .item-btn { width: 26% }

#contact-form #btn-submit { 
	float: right; 
	border: none; 
    background-color: #0c2461;
    color: #fff;
	font-weight: bold;
    padding: 18px 28px;
    font-size: 18px
}


#contact-form #btn-submit:hover, 
#contact-form #btn-submit:active { 
    background-color: #403d50;
    color: #fff
}

#contact-form #btn-submit i.fas {
	margin-left: 9px;
	font-size: 104%
}



img.drop-shadow-faint {
    filter: drop-shadow(8px 8px 10px #888 );
}


/* == End footer CSS == */

/* ----------------------------------------------
 * Generated by Animista on 2019-3-20 10:33:40
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 .slide-in-top {
    animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-top {
  0% {
    transform: translateY(-200px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-200px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}