/*  ============= WEB BROWSER RESETS ============ */
* { margin: 0; padding: 0; border: none; box-sizing: border-box }
html { height: 100%; scroll-behavior: smooth; scroll-padding-top: 72px }
body { min-height: 100%; max-width: 1950px; margin-left: auto; margin-right: auto; }  
img { width: 100%; height: auto; display: block }

/* Default font and colours */
body { font-family: 'Circular Std', serif; background-color: #a0ddff }
h1, h2, h3 { color: #E8AF15; }
p, li { color: #343434; }

/* Begin menu styles */

/* === ALL SCREEN SIZES ====== */

/* ======= FONT  ======== */

@font-face {
    font-family: 'Circular Std';
    src: url('https://laszloscheers.github.io/assets/fonts/CircularStd-Medium.eot');
    src: local('Circular Std Medium'), local('CircularStd-Medium'),
        url('https://laszloscheers.github.io/assets/fonts/CircularStd-Medium.eot?#iefix') format('embedded-opentype'),
        url('https://laszloscheers.github.io/assets/fonts/CircularStd-Medium.woff2') format('woff2'),
        url('https://laszloscheers.github.io/assets/fonts/CircularStd-Medium.woff') format('woff'),
        url('https://laszloscheers.github.io/assets/fonts/CircularStd-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Circular Std';
    src: url('https://laszloscheers.github.io/assets/fonts/CircularStd-Bold.eot');
    src: local('Circular Std Bold'), local('CircularStd-Bold'),
        url('https://laszloscheers.github.io/assets/fonts/CircularStd-Bold.eot?#iefix') format('embedded-opentype'),
        url('https://laszloscheers.github.io/assets/fonts/CircularStd-Bold.woff2') format('woff2'),
        url('https://laszloscheers.github.io/assets/fonts/CircularStd-Bold.woff') format('woff'),
        url('https://laszloscheers.github.io/assets/fonts/CircularStd-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}


/* ======= FONT END ======== */

.unhide-content-under-sticky-menu { margin-top: 72px }

/* Positions all menus in front of page content */
.container-menu-desktop, 
.container-menu-bar-mobile, 
.flyout-menu { z-index: 999 }
.container-menu-desktop, .container-menu-bar-mobile { width:100% }

/* on mobiles - hide desktop menu */
@media all and (max-width:767px) { 
    .container-menu-desktop.menu-transparent,
    .container-menu-desktop.menu-light,
    .container-menu-desktop.menu-dark { display: none }
}

/* on desktops - hide mobile menu bar and list of menu options */
@media all and (min-width:768px) { 
    .container-menu-bar-mobile.menu-transparent,
    .container-menu-bar-mobile.menu-light,
    .container-menu-bar-mobile.menu-dark,
    .flyout-menu.menu-transparent,
    .flyout-menu.menu-light,
    .flyout-menu.menu-light { display: none }
}

/* sticks menu to top of desktop and/or mobile screen */
.menu-sticky { position: fixed; top: 0; left: 0; right: 0; }

/* Height of desktop menu and mobile menu bar */
.container-menu-desktop, .container-menu-bar-mobile { height:72px }

/* website logo fixed size in desktop menu and mobile menu bar  */
.container-menu-desktop    a:first-child img,
.container-menu-bar-mobile a:first-child img { width: 200px; height: 40px }

/* website logo vertically cente#ff5000 in desktop menu and mobile menu bar  */
.container-menu-desktop    a:first-child,
.container-menu-bar-mobile a:first-child { display: flex; flex-direction: row; align-items: center }

/* hide bullet character on listed links */
.container-menu-desktop ul li,
.flyout-menu            ul li { list-style-type: none }

/* hide link underlines on desktop and mobile menus */
.container-menu-desktop ul li a,
.flyout-menu            ul li a { text-decoration: none }

/* style cta button on desktop and mobile menus */
.container-menu-desktop ul li a.btn-cta,
.flyout-menu            ul li a.btn-cta {
    display: inline-block;
    border-width: 2px;
    border-style: solid;
    font-weight: bold;
    /* soften corners */
    /* border-radius: 4px; */
    /* rounded corners */
    border-radius: 100px
}

/* style icon in cta button on desktop and mobile menus */
.container-menu-desktop ul li a.btn-cta i,
.flyout-menu            ul li a.btn-cta i { margin-right: 8px; font-size: 90% }

/* make desktop menu options bold */
.container-menu-desktop ul li a { font-weight:bold }

/* on mobiles, prevent scrolling outside flyout menu */
.no-scroll { overflow: hidden }

.menu-drop-shadow { box-shadow: 0 1px 10px #888 }

/* ======= DESKTOP MENU ======= */

/* outer parent flexbox container 
   home page link (with website logo) at left and ul links at right are its two children */
.container-menu-desktop {
	display: flex;
    justify-content: space-between;
    padding: 0 6% 0 6%;
    width: 100%;
}

/* menu links and cta button aligned horizontally */
.container-menu-desktop ul li {
    display: inline-block;
    margin: 0 40px 0 0; /* spacing at right of menu links, cta button */
}

.container-menu-desktop ul li:last-child {
    margin-right: 0 /* no spacing at right of last menu link or cta button */
}

/* vertically center menu links and cta button */
.container-menu-desktop ul { display: flex; align-items: center }

/* style text for links and cta button  */
.container-menu-desktop ul li a {
    font-size: calc(15px + (19 - 15) * ((100vw - 320px)/(1600 - 320)));
    /* font-weight:bold */
    /* text-transform: uppercase */
}

/* cta button padding */
.container-menu-desktop ul li a.btn-cta { padding: 6px 20px }


/* ======= MOBILE MENU  ======== */

/* outer flexbox container for mobile menu bar 
   home page link (with website logo) at left and hamburger icon at right are its two children */
.container-menu-bar-mobile {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
    width: 100%;
    padding: 0 6% 0 6%;
}

/* three bars hozizontal in hamburger icon */
.container-menu-bar-mobile .item-icon .bar1, 
.container-menu-bar-mobile .item-icon .bar2, 
.container-menu-bar-mobile .item-icon .bar3 { width: 36px; height: 4px; margin: 7px 0; transition: 0.4s }

/* hamburger icon changes shape to 'X' when fly-out menu is visible */
.change .bar1 { transform: rotate(-45deg) translate(-9px, 6px) }
.change .bar2 { opacity: 0 }
.change .bar3 { transform: rotate(45deg) translate(-8px, -8px) }

/* container div for flyout menu content */
.flyout-menu { 
    position: fixed; display: block; 
    top: 72px; /* same height as menu bar */
    width: 320px; 
    max-height: 100%;
    height: 100%;
    padding: 30px 40px 40px 40px;
    transition: 0.5s;
    overflow-x: hidden;
    overflow-y: scroll;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; /* safari on mobiles */    
}

.flyout-menu.flyout-menu-is-closed {
    right: -320px; /* hides flyout menu */
}

.flyout-menu.flyout-menu-is-open {
    right: 0; /* displays flyout menu */
    overscroll-behavior: contain;
    overscroll-behavior-y: contain
}

/* list of links on flyout menu */
.flyout-menu ul li { margin: 0 40px 30px 0; text-align: center; }

/* style flyout menu links */
.flyout-menu ul li a {
    font-size: 23px;
    text-align: center;
    /* font-weight:bold */
    /* text-transform: uppercase */
}

/* cta button */
.flyout-menu a.btn-cta {
    display: inline-block;
    padding: 10px 24px;
}

.flyout-menu hr { 
    height: 4px;
    margin: 32px 0 0 0;
    border-style: solid;
    border-width: 1px 
} 

.flyout-menu h4 {
    font-size: 30px;
    margin: 42px 0 5% 0;
    text-align: center;
    /* letter-spacing: 2px; *./
    /* text-transform: uppercase */
}

.flyout-menu h5 {
    font-size: 17px;
    margin: 20px 0 20px 0;
    text-align: center
}

.flyout-menu h5 a {
    font-size: 19px;
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom-style: solid;
    border-bottom-width: 2px
}

.flyout-menu p { 
    text-align: center; font-size: 19px; line-height: 1.4;
}

.flyout-menu.flyout-menu-is-open div.fly-out-profile-box,
.flyout-menu.flyout-menu-is-open div.fly-out-social-icons {
    display:flex;
    flex-direction: row;
    justify-content: center;    
}

.flyout-menu.flyout-menu-is-open div.fly-out-profile-box img,
.flyout-menu.flyout-menu-is-open div.fly-out-profile-box p { width: 45% }

.flyout-menu.flyout-menu-is-open div.fly-out-profile-box img {
    display: block; border-radius: 100%;
    width: 104px; height: 104px; 
    border-style: solid;
    border-width: 2px;
    margin-right: 5%;
}

.flyout-menu.flyout-menu-is-open div.fly-out-profile-box p {
    text-align:left 
}

.flyout-menu.flyout-menu-is-open div.fly-out-social-icons { 
    margin-top:12px
}

.flyout-menu.flyout-menu-is-open div.fly-out-social-icons a {
    font-size: 36px;
    text-align: justify;
    margin-left: 4%;
}

/* ========= Light background menu - desktops and mobiles ========= */

/* background colour */
.menu-light { 
	background-color: #E8AF15;
	transition: all .5s ease-in-out;
}

/* drop shadow border at left of fly-out menu */
.flyout-menu.flyout-menu-is-open {
    box-shadow: 0px 1px 10px #888 
}

/* menu links */
.menu-light ul li a:link,  .menu-light ul li a:visited { color:#FFFFFF }
.menu-light ul li a:hover, .menu-light ul li a:active  { color: #E5E5E5 }

/* cta button */
.menu-light ul li a.btn-cta:link, 
.menu-light ul li a.btn-cta:visited {
    background-color: transparent;
    color: #FFFFFF;
    border-color:#FFFFFF
}

.menu-light ul li a.btn-cta:hover,
.menu-light ul li a.btn-cta:active {
    background-color: #343434;
    color: #fff;
    border-color:#343434
}

/* on mobiles only */
.menu-light.flyout-menu hr { background-color: #E5E5E5; border-color:#E5E5E5 } 

.menu-light.flyout-menu h4,
.menu-light.flyout-menu h5,
.menu-light.flyout-menu h5 a, 
.menu-light.flyout-menu p { color:#E5E5E5 } 

/* colour of hamburger icon bars */
.menu-light .item-icon .bar1, 
.menu-light .item-icon .bar2, 
.menu-light .item-icon .bar3 { background-color:#343434 }	

/* phone number link */
a[href^=tel] { text-decoration: none; color:#0f2456 }

/* email link */
.menu-light.flyout-menu h5 a:link, 
.menu-light.flyout-menu h5 a:visited {
    border-bottom-color: #1B7ACB;
}

.menu-light.flyout-menu h5 a:hover, 
.menu-light.flyout-menu h5 a:active {
    border-bottom-color: #fff;
}

/* profile image border colour */
.menu-light.flyout-menu.flyout-menu-is-open div.fly-out-profile-box img { border-color:#0f2456 }

/* contact icons */
.menu-light.flyout-menu .fly-out-social-icons a i { color: #1B7ACB }

/* === End light background menu === */


/* ======== Transparent background menu - desktops and mobiles =========== */

/* background colour */
.menu-transparent { 
	background-color: transparent;
	transition: all .5s ease-in-out;
}

/* menu links */
.menu-transparent ul li a:link,  .menu-transparent ul li a:visited { color: #fff }
.menu-transparent ul li a:hover, .menu-transparent ul li a:active  { color: #b8b8b8 }

/* cta button */
.menu-transparent ul li a.btn-cta:link,
.menu-transparent ul li a.btn-cta:visited { 
    background-color: #343434;
    color: #fff;
    border-color:#343434;
}

.menu-transparent ul li a.btn-cta:hover,
.menu-transparent ul li a.btn-cta:active { 
    background-color: #fff;
    color: #343434;
    border-color:#7DACED
}

/* on mobiles only - various content */
.menu-transparent.flyout-menu hr { background-color: #fff; border-color:#fff } 

.menu-transparent.flyout-menu h4,
.menu-transparent.flyout-menu h5,
.menu-transparent.flyout-menu h5 a,
.menu-transparent.flyout-menu p { color:#fff } 

/* colour of hamburger icon bars */
.menu-transparent .item-icon .bar1, 
.menu-transparent .item-icon .bar2, 
.menu-transparent .item-icon .bar3 { background-color: #fff }

/* phone number link */
a[href^=tel] { text-decoration: none; color: #fff }

/* email link */
.menu-transparent.flyout-menu h5 a:link, 
.menu-transparent.flyout-menu h5 a:visited {
    border-bottom-color: #fff;
}

.menu-transparent.flyout-menu h5 a:hover, 
.menu-transparent.flyout-menu h5 a:active {
    border-bottom-color:#0f2456;
}

/* profile image border colour */
.menu-transparent.flyout-menu.flyout-menu-is-open div.fly-out-profile-box img { border-color: #0f2456 }

/* contact icons */
.menu-transparent.flyout-menu .fly-out-social-icons a i { color:#fff }

/* === End transparent background menu === */

/* ======= Dark background menu - desktops and mobiles ======= */

/* background colour */
.menu-dark { 
	background-color: #4090ff; 
	transition: all .5s ease-in-out;
}

/* menu links */
.menu-dark ul li a:link,  .menu-dark ul li a:visited { color: #343434 }
.menu-dark ul li a:hover, .menu-dark ul li a:active  { color: #FFFFFF }


/* on mobiles only - various content */
.menu-dark .flyout-menu hr { background-color: #FFFFFF !important; border-color:#343434 !important } 

.menu-dark .flyout-menu h4,
.menu-dark .flyout-menu h5,
.menu-dark .flyout-menu h5 a,
.menu-dark .flyout-menu p { color:#FFFFFF !important ; text-decoration: none;}

.menu-dark .flyout-menu ul li a:link,  .menu-dark .flyout-menu ul li a:visited { color: #FFFFFF !important }
.menu-dark .flyout-menu ul li a:hover, .menu-dark .flyout-menu ul li a:active  { color: #FFFFFF !important }

/* colour of hamburger icon bars */
.menu-dark .item-icon .bar1, 
.menu-dark .item-icon .bar2, 
.menu-dark .item-icon .bar3 { background-color: #343434 }

/* phone number link */
a[href^=tel] { text-decoration: none; color: #FFFFFF }

/* email link */
.menu-dark.flyout-menu h5 a:link, 
.menu-dark.flyout-menu h5 a:visited {
    border-bottom-color: #FFFFFF;
    color: #FFFFFF
}

.menu-dark.flyout-menu h5 a:hover, 
.menu-dark.flyout-menu h5 a:active {
    border-bottom-color: #7DACED;
}

/* contact icons */
.menu-dark.flyout-menu .fly-out-social-icons a i { color:#E8AF15 }
.menu-dark.flyout-menu .fly-out-social-icons a:hover { transform: scale(1.2); }

/* === End dark background menu === */

/* === 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-color: #4090FF;
}

.container-hero-block.portfolio-page {
	background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0)), url('../img/dennis-ritchie&ken-thompson.png');
}

.container-hero-block.contact-page {
	background-color:#c7f0ff;
    height: 250px;
}

.container-hero-block.contact-page h2{
    font-size: calc(52px + (84 - 52) * ((100vw - 320px)/(1600 - 320)));
    color: #E8AF15;
}

.bg-white {
    background-color:#FFFFFF;
}

.container-hero-block h1, .container-hero-block h2 {
	font-weight: 700;
	margin-left: auto;
    margin-right: auto;
}


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

.container-hero-block h2 {
	color:  #FFFFFF;
	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: 450px }
	.container-hero-block h1, .container-hero-block h2 { 
		width: 60%; 
	}

}

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


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

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

/* 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)));
    color: #343434;
}

.container-one-column h2 {
     line-height: 1.3; margin-top:32px; margin-bottom: 12px;
     font-size: calc(32px + (48 - 32) * ((100vw - 320px)/(1600 - 320)));
     color: #343434;
}
 
.container-one-column h3 {
     line-height: 1.4; margin-top:28px; margin: 5% 0 5% 0;
     font-size: calc(22px + (32 - 22) * ((100vw - 320px)/(1600 - 320)));
     color: #343434;
}
 
.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; text-align: justify !important; }


/* ============== 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-image: linear-gradient(to right, #3498db, #2980b9);
    color: #fff;
} 
 
a.button-solid:hover, .button-solid:active {
    border-color: #3867d6;
    background-image: linear-gradient(to right, #3742fa, #3742fa);
   color: #fff 
}
 
a.button-round { border-radius: 50px }
a.button-soft { border-radius: 5px }

a.button-arrow{
    color: #1a4352;
    font-size: calc(52px + (68 - 52) * ((100vw - 320px)/(1600 - 320)));
    padding: 12px 12px 12px 12px;

}
a.button-arrow:hover{
    transform: scale(1.7);
    transition: 1s;
}
@media (max-width:767px) { 
	a.button-arrow { 
		display: none;
	}
}
.fas .fa-arrow-circle-down {
    background-color: #FFFFFF;
}

/* 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:#E8AF15; border-bottom-color:#4090FF }

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


/* ============== 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: 0 11% 0 11% }
}

/* 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%;
    text-align: center;
    
}
.centered {
    justify-content: center !important;
    padding: 5% 3% 0 3% !important;
}

.item-1 img{
    border-style: solid;
    border-width: 3px;
    border-color: #D9EDF4;
    transform: scale(0.8) !important;
    margin-top: 2%;
}

.item-1 img:hover{
    border-color: #E8AF15;
    transform: scale(1) !important;
    transition: 1s;
}

.item-1 h3{
    margin: 3% 8% 4% 8%;
    font-size: calc(32px + (34 - 32) * ((100vw - 320px) / (1600 - 320)));
}


/* ====== 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: 100%;
		padding: 3% 0 4% 0;
        text-align: center;
	}
}

/* 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(64px + (88 - 64) * ((100vw - 320px)/(1600 - 320)));
    margin: 3% 6% 6% 6%;
}

.container-flexbox .item-2 p {
    font-size: calc(26px + (31 - 26) * ((100vw - 320px)/(1600 - 320)));
    margin: 3%;

}




/* =======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% }
    .container-flexbox .item-3:last-child { margin-bottom: 10% }
    .container-flexbox .item-3 p { text-align: center; }
    .container-flexbox .item-3 img:hover{
        transform: scale(1.06) !important;
        transition: 1s;
    }
}

/* 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 p { text-align: center; }
    .container-flexbox .item-3 img { 
        max-width: 390px;
        width: 90%;
        margin-left: auto;
        margin-right: auto
    }
}

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

.container-flexbox .item-1 h1 {
    line-height: 1.2;
    letter-spacing:-1px;
    font-size: calc(84px + (108 - 84) * ((100vw - 320px)/(1600 - 320)));
    margin: 5% 5% 4% 5%;
    color: #1a4352;
}

.container-flexbox .item-1 h2 {
    line-height: 1.2;
    letter-spacing:-1px;
    font-size: calc(54px + (68 - 54) * ((100vw - 320px)/(1600 - 320)));
    margin: 10% 6% 10% 6%;
    color: #1a4352;
}
@media (max-width:420px) { 
	.item-1 h2 { 
		font-size: calc(34px + (48 - 34) * ((100vw - 320px)/(1600 - 320))) !important;
	}
}

.container-flexbox .item-1 p {
    line-height: 1.5; padding-left: 0 !important; padding-right: 0 !important; margin-bottom: 10%;
    font-size: calc(20px + (25 - 20) * ((100vw - 320px)/(1600 - 320)));
}
.container-flexbox .item-1 ul {
    list-style: disc;
    padding: 10% 6% 6% 6%;
    text-align: left !important;
}
.container-flexbox .item-1 ul li{
    font-size: calc(16px + (21 - 16) * ((100vw - 320px)/(1600 - 320)));
    line-height: 1.8;
    margin-left: 5%;
}
.container-flexbox .item-1 ul li b{
    color: #E8AF15;

}
.margin-top ul h3 {
    margin-top: 6% !important;
}
.margin-top { margin-top: 6%; }

.margin-bottom {
    margin-bottom: 6% !important;
}
.padding-bottom {
    padding-bottom: 6% !important;
}
.frame {
    background-color: #D9EDF4 !important;
    min-height: 540px;
}

.container-flexbox .item-1 ul h3 {
    font-size: calc(28px + (30 - 28) * ((100vw - 320px) / (1600 - 320)));
    margin: 3% 0 4% 5%;
    color: #4090FF;
    text-transform: uppercase;
}
#resume h2{
    color: #FFFFFF !important;
}

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

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

/* 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(25px + (31 - 25) * ((100vw - 320px)/(1600 - 320)));
    margin-bottom:12px;
    margin-top: 42px;
    font-weight: bold;
    text-align: center;
}

.container-flexbox .item-3 img {
    margin-top: 12px;
    box-shadow: 8px 10px 8px #888; 
}

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

.container-flexbox .item-col-2 {
	box-shadow: rgba(160, 160, 160, 0.8) 5px 5px 20px;
    text-align: center !important;
    text-decoration: none;
    background-color: #fff ;
    align-items: center !important;
    justify-content: space-around;
    margin-bottom: 4%;
}


.container-flexbox .item-col-2 h1{
    font-size: calc(42px + (62 - 42) * ((100vw - 320px)/(1600 - 320)));
    padding: 20%;
    color: #1A4352;
    text-align: center;
    border-style: solid;
    border-width: 16px;
    border-color: #1A4352;
}

.container-flexbox .item-col-2 p{
    font-size: calc(16px + (18 - 16) * ((100vw - 320px)/(1600 - 320)));
    padding: 1%;
    margin-bottom: 6% !important;
}

/* Desktops - 3 columns */
@media (min-width:768px) { 
	.container-flexbox .item-col-2 { 
		width: 45%;
	}
}
/* Tablets - 3 columns */
@media (max-width:1614px) { 
	.container-flexbox .item-col-2 h1 { 
        font-size: calc(32px + (52 - 32) * ((100vw - 320px)/(1600 - 320)));
	}
}
@media (max-width:1250px) { 
	.container-flexbox .item-col-2 { 
        align-items: center;
		width: 100%;
        margin: 9%;
	}
    .item-col-2:nth-child(1) { order: 1 }
    .item-col-2:nth-child(3) { order: 2 }
    .item-col-2:nth-child(5) { order: 3 }
    .item-col-2:nth-child(2) { order: 4 }
    .item-col-2:nth-child(4) { order: 5 }
    .item-col-2:nth-child(6) { order: 6 }
}
/* Mobiles - 1 column */
@media (max-width:767px) { 
	.container-flexbox .item-col-2 { 
		width: 100%;
        align-items: center;
        margin: 9%;
	}
    .item-col-2:nth-child(1) { order: 1 }
    .item-col-2:nth-child(3) { order: 2 }
    .item-col-2:nth-child(5) { order: 3 }
    .item-col-2:nth-child(2) { order: 4 }
    .item-col-2:nth-child(4) { order: 5 }
    .item-col-2:nth-child(6) { order: 6 }

}


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

/* == Contact form container == */

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

/* Desktop */
@media all and (min-width:1024px) { 
	.container-contact-form {
		margin: 9% 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%;
	}
}
@media all and (max-width:760px) { 
	.container-contact-form { 
		margin: 15% 8% 18% 8%;
	}
}
@media all and (max-width:420px) { 
	.container-contact-form { 
		margin: 20% 8% 18% 8%;
	}
}

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

/* Heading */
.container-contact-form h3 { 
	font-weight: bold; 
	color: #343434;
	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 {
	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; 
    background-color: #1B7ACB;
    color: #fff;
	font-weight: bold;
    padding: 18px 28px;
    font-size: 18px;
    border-width: 2px;
    border-style: solid;
    border-radius: 100px
}


#contact-form #btn-submit:hover, 
#contact-form #btn-submit:active { 
    background-color: #343434;
    color: #E8AF15;
    transform:scale(1.1);
    transition: 1s;
}

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



/* == Begin footer CSS == */

/* Outer footer parent container */
.container-footer { 
	display: flex;
	justify-content: space-between;
   flex-wrap: wrap;
   background-color:#4090ff
}

#oposite { 
   background-color:#e8af15 !important;
}

/* Desktop footer - inside padding  */
@media all and (min-width:768px) {
	.container-footer { padding: 3% 8% 3% 8% }
}

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

/* Inner footer columns */

/* Desktops - 3 columns */
@media all and (min-width:768px) { 
   .container-footer .item-3:nth-child(1) { width: 20% }
   .container-footer .item-3:nth-child(2) { 
      width: 50%;
      /* text-align: center */
   }
   .container-footer .item-3:nth-child(3) { 
      width: 20%;
   }
}

/* Mobiles - 1 column */
@media all and (max-width:767px) { 
	.container-footer .item-3 { 
      width: 100%;
      margin-bottom: 10%
   }
   .container-footer .item-3:nth-child(2) { order: 1 }
   .container-footer .item-3:nth-child(1) { order: 2 }
   .container-footer .item-3:nth-child(3) { order: 3 } 
}

/* Styles for footer background, text, icons and links */

.container-footer .item-3 h4,
.container-footer .item-3 p,
.container-footer .item-3 p i,
.container-footer .item-3 p a {
   color: #fff
}

.container-footer .item-3 h4 {
   font-weight: bold;
   /* text-transform: uppercase */
   margin-bottom: 12px;
   font-size: calc(17px + (19 - 17) * ((100vw - 320px)/(1600 - 320)));
}

.container-footer .item-3 p {
   font-weight: normal;
   margin-bottom: 12px;
   font-size: calc(15px + (18 - 15) * ((100vw - 320px)/(1600 - 320)));
   line-height: 1.6
}

.container-footer .item-3 i { 
   padding-right: 26px;
} 

.container-footer .item-3 p a {
   text-decoration: none;
   border-bottom-style: solid;
   border-bottom-width: 2px;
   padding-bottom:2px;
}

.container-footer .item-3 p a:link, 
.container-footer .item-3 p a:visited  {
   border-bottom-color: transparent;
}

.container-footer .item-3 p a:hover, 
.container-footer .item-3 p a:active  {
   border-bottom-color: #fff
}

/* == End footer CSS == */

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

 .rotate-center {
	-webkit-animation: rotate-center 0.6s ease-in-out both;
	        animation: rotate-center 0.6s ease-in-out both;
}

.slide-bottom {
	-webkit-animation: slide-bottom 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-bottom 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.scale-up-center {
	-webkit-animation: scale-up-center 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-center 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.scale-up-top {
	-webkit-animation: scale-up-top 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: scale-up-top 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2021-6-4 10:48:48
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation rotate-center
 * ----------------------------------------
 */
 @-webkit-keyframes rotate-center {
    0% {
      -webkit-transform: rotate(0);
              transform: rotate(0);
    }
    100% {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }
  @keyframes rotate-center {
    0% {
      -webkit-transform: rotate(0);
              transform: rotate(0);
    }
    100% {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }

@-webkit-keyframes slide-bottom {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    100% {
      -webkit-transform: translateY(100px);
              transform: translateY(100px);
    }
  }
  @keyframes slide-bottom {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    100% {
      -webkit-transform: translateY(100px);
              transform: translateY(100px);
    }
  }

 @-webkit-keyframes scale-up-top {
    0% {
      -webkit-transform: scale(0.5);
              transform: scale(0.5);
      -webkit-transform-origin: 50% 0%;
              transform-origin: 50% 0%;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-transform-origin: 50% 0%;
              transform-origin: 50% 0%;
    }
  }
  @keyframes scale-up-top {
    0% {
      -webkit-transform: scale(0.5);
              transform: scale(0.5);
      -webkit-transform-origin: 50% 0%;
              transform-origin: 50% 0%;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-transform-origin: 50% 0%;
              transform-origin: 50% 0%;
    }
  }

@-webkit-keyframes scale-up-center {
    0% {
      -webkit-transform: scale(0.5);
              transform: scale(0.5);
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
  }
  @keyframes scale-up-center {
    0% {
      -webkit-transform: scale(0.5);
              transform: scale(0.5);
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
  }