/*  ============= WEB BROWSER RESETS ============ */
* { margin: 0; padding: 0; border: 0; box-sizing: border-box }


/*  ============= MAIN ============ */
html {
  -ms-scroll-snap-type: y mandatory;
      scroll-snap-type: y mandatory;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  overflow:   scroll;
}

::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
	scrollbar-width: none; /* Firefox */
}

body{
	/*font-family: 'Open Sans', sans-serif;*/
	padding:0;margin:0;
	background: url(./img/bg.jpg) fixed no-repeat center / cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	color:white;
	user-select: none;/*no right click*/
}


/* ========== MAIN CONTENT CONTAINERS ========= */
/* ========== https://www.munnelly.com/webdesign/exercises/flex-two-cols ========= */
/* Desktops */
/*@media (min-width:768px) { .container-block { padding: 1% 2% } }*/

/* Mobiles */
/*@media (max-width:767px) { .container-block { padding: 11% 8% } }*/




/* ========== FLEXBOX PARENT AND CHILD COLUMN ELEMENTS ========= */

/* Flexbox parent container */
.container-flexbox {
	display: flex; 
	/*justify-content: space-between;*/
	flex-wrap: wrap;
	/*height: 99dvh;*/
	margin:0;
	height: 100vh;
	width: 100vw;
	flex-direction: row;
	align-items: flex-start;
	flex-shrink: 0;
  scroll-snap-align: center;
	scroll-snap-align: start;
	scroll-snap-stop: always;
  background: rgba(63, 62, 62, 0.1);
  z-index: 1;
	
}
/* Mobiles: flexbox child columns */
@media (max-width: 767px) {
    .item-col-2 { width: 100%; margin-bottom: 0; margin-top:-150px; padding: 0 5px; height:auto; }

}



/* Desktops: flexbox columns */
@media (min-width: 768px) {
    .item-col-1 { width: 70%; flex-direction: row; margin-bottom: 0; padding:10px; text-align:center; }
    .item-col-2 { width: 30%; flex-direction: row; margin-bottom: 0; padding:10px; height:100%; text-align:center; margin-left:-5px;}
	
}





/* =========== SUB-HEADINGS AND PARAGRAPHS ============*/

/* Paragraphs inside text flexbox */
.item-col-2 p { 
    line-height: 1.6;
    font-size: 1.7em;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    /*font-size: calc(18px + (22 - 18) * ((100vw - 320px) / (1600 - 320)));*/
	font-size: clamp(1.2rem, -0.875rem + 3.3vw, 2.2rem);
	margin-top:-5px;

}

.item-col-2 .first-p {
  font-style: italic;
  color:rgb(241, 241, 241);
  margin-bottom: 20px;
}
/* Mobiles: paragraph line-spacing and bottom margin */
@media (max-width: 767px) {
    .item-col-2 p { line-height: 1.4; margin-bottom: 0px; /*padding-bottom:85px;*/ }
    .logo{display:none;}
    .item-col-2 .first-p {
    font-style: italic;
    color:rgb(241, 241, 241);
    margin-bottom: 0px;padding-bottom: 0px;}
}
/* Desktops: paragraph line-spacing and bottom margin */
@media (min-width: 768px) {
    .item-col-2 p { line-height: 1.6; margin-bottom: 0px }
    .logo-top-mobile {display:none;}
	.hide-desktop {display:none;}	
}


/* ========= COLOURED BACKGROUNDS =========== */
.bg-light { background-color: #d8f0f5 }
.bg-dark { background-image: linear-gradient(90deg, #FF0099,  #493240) }


/* Colours for sub-headings and paragraphs */



/* Visual layout guides - remove when finished */
/*
.container-flexbox { border: red 1px solid }
.container-flexbox .item-col-1 { border: black 1px solid }
.container-flexbox .item-col-2 { border: blue 1px solid }*/

.scroll-down {
    left: 0;
    width: 100%;
    position: relative;
    text-align: center;
    color: white;
    padding: 0;
    bottom: clamp(60px, 10vw, 80px);/*z-index:100;*/
}

.scroll-down h4 {
    font-size: 0.9em;
    font-weight: 400;
    padding: 0;
    margin: 0;
}
.scroll-down h4.arrows {
    line-height: 1.8em;
    font-size: 1.6em;
    margin: 0px 0px 0px 0px;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  height: 30px;
  width: 100vw;
  background: yellow;
}
.year{
  font-size: clamp(1rem, -0.875rem + 3.3vw, 2rem);
  font-style: italic;
  color:rgba(241, 241, 241, 0.918);}
  /* Clear floats after the columns */
.container-flexbox:after {
  content: "";
  display: table;
  clear: both;
}
.img { 
  pointer-events: none;
  margin-top:-5px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  max-height: 100%;
  max-height: 100vh;
 aspect-ratio: attr(width) / attr(height);
  object-fit: cover;
}
.logo {
  pointer-events: none;
  width: clamp(100px, 15vw, 350px);
}
.logo-top-mobile {border:none;/*width:50px; height:50px;*/ position: -webkit-sticky;
  position: sticky;float:right; top:4px; right:2px;
  width: clamp(40px, 10vw, 50px);
  pointer-events: none;
  z-index: 100;
}
p, img, body {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
.develop{border:none; width:20px; height:20px; position: -webkit-sticky; position: sticky; float:left; top:0; left:0;}
a.fill-div {display: block;height: 100%; width: 100%; text-decoration: none;}