@font-face {
	font-family: Montserrat;
	src: url(../shikoku/fonts/static/Montserrat-Regular.ttf);
}
@font-face {
	font-family: Open_Sans;
	src: url(../shikoku/fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf);
}

/* ELEMENTS */
* {
  margin:0;
  font-family: "Open_Sans", Montserrat, Perpetua, Georgia, Arial, Garamond, Sans-serif;
  font-size: 18px;
  box-sizing: border-box;
}
header {
  margin-bottom: 2rem;
}
header img {
  display: block;
  width: 80%;
  margin-left:auto;
  margin-right: auto;
}
header h1, header h2 {
  text-align: center;
  font-weight: 350;
  color: #C3272B;
  margin:0;
}
header h1 {
  font-size: 5rem;
}
header h2 {
  font-size: 3rem;
}
h3 {
  font-size: 2rem;
  color: #C3272B;
  font-weight: 450;
  transition: all 2s;
  margin-top: 300px;
  margin-bottom: .5em;
  clear: both;
  -webkit-transition: all 1.5s;
  -moz-transition: all 1.5s;
  -ms-transition: all 1.5s;
  -o-transition: all 1.5s;
}
h3:first-child {
  margin:1em;
}
h4 {
  color: #C3272B;
  font-weight: 400;
  font-size: 1.25rem;
  margin-left: .33em;
  margin-bottom: .75em; 
}
p {
  color: #202020; 
  padding: 0 .33em .5rem .33em;
  line-height: 1.5;
}
a {
  color: inherit;
  text-decoration-color: #C3272B;
  text-decoration-thickness: 4px;
}
small {
  font-size: 75%;
}
footer {
  margin-top: 5vh;
  width: 80vw;
  margin-left:auto;
  margin-right: auto;
  margin-bottom: 5vh;
  text-align: center;
  clear: both;
}
/* CLASSES */
.content {
  width: 80%;
  max-width: 1400px;
  margin-left:auto;
  margin-right: auto;
}
.video_link a {
  text-decoration: none; /* Link to video in main text */
  color: inherit;
}
.no-dec {
  text-decoration: none;
}

/* IMAGES */
img {
  border-radius: 8px;
}
figure {
  margin-top: 1em;
  margin-bottom: 1em;
}
figcaption {
  text-align: center;  
}
.tall {
  width: 20vw;
  height: auto;
}
.tall img {
  width: 100%;
  height: auto;
}
.wide {
  width: 30vw;
  height: auto;
  margin-left:auto;
  margin-right: auto;
}
.wide img {
  width: 100%;
  height:auto;
}
.square {
  width: 12vw;
  height: auto;
}
.square img {
  width: 100%;
  height:auto;
}
.thin {
  width: 55vw;
  height: auto;
}
.thin img {
  width: 100%;
  height:auto;
}
.collage {
  width: 100%;
  height: auto;
}
.collage img {
  width: 100%;
  height:auto;
}
.two-wide, .three-wide {
  display:flex;
  flex-wrap: wrap;
  width:100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.two-wide figure {
    width:50%;
    height: auto;
}
.two-wide img {
  width: 100%;
  height:auto;
  border-radius: 0;
}
.two-wide figure:first-child img {
  padding-right: 5px;
}
.two-wide figure:nth-child(2) img {
  padding-left: 5px;
}
.three-wide figure {
  width:33%;
}
.three-wide img {
  width: 100%;
  height: auto;
}
.three-wide img {
  padding-right: 5px;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
}
.grow-left, .grow-right {
  transition: all 1s;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
}
.grow-left:hover, .grow-right:hover {
  transform:scale(3);
  -webkit-transform:scale(3);
  -moz-transform:scale(3);
  -ms-transform:scale(3);
  -o-transform:scale(3);
}
.grow-right:hover {
  margin-left:20vw; 
  float: none;
}
.grow-left:hover {
  margin-right:20vw; 
  float:none;
}
.right {
  float:right;
  margin-left: 1.33em;
}
.centre {
  margin-left: auto;
  margin-right: auto;
}
.left {
  float: left;
  margin-right:1.33em;
}

/* VIDEO */
.videoContent {
  text-align: center;
	margin-bottom: 3.5em;
}
video {
  max-width:80%;
}

/* BUTTONS */
.button {
	display:inline-block;
	text-decoration: none;
	width: 5em;
	margin: .5em;
	border: 1px solid #C3272B;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-ms-border-radius: 8px;
	-o-border-radius: 8px;
	padding: .5em;
	background-color: #C3272B;
	color: white;
}
.button:hover {
	font-weight: bold;
	background-color: #FFFFFF ;
	color: #C3272B;
}

/* MEDIA STYLES */

@media only screen and (max-width: 1280px) {
  header, header img {
    width: 99%;
    margin-left:auto;
    margin-right:auto;
  }
  .content {
    width: 95%;
  } 
  .wide {
    width: 38vw;
  }
  .square {
    width: 20vw;
  }
  .clear-left {
    clear:left;
  }
}

@media only screen and (max-width: 1024px) {
  .wide {
    width: 45vw;
  }
  .tall {
    width: 28vw;
  }
  .thin {
    width: 95%;
  }
}

@media only screen and (max-width: 768px) {
  header h1 {
    margin-left: 5%;
    margin-right: 5%;
  }
  .wide {
    width: 80vw;
  }
  .tall {
    width: 40vw;
  }
  .two-wide figure {
    width:80%;
    height: auto;
    margin-left:auto;
    margin-right: auto;
  }
  .two-wide img {
    width: 100%;
    height:auto;
    border-radius: 0;
  }
  .three-wide figure {
    width: 46%;
    margin-left:auto;
    margin-right:auto;
  }
  .left, .right {
    float:none;
    margin: auto;
  }
  figcaption {
    font-size: 80%;
  }
  .square {
    width: 60%;
    height:auto;
    margin-left:auto;
    margin-right: auto; 
    margin-top: 1em;
    margin-bottom: 1em; 
  }
  /* Disable the transform */
  .grow-left:hover, .grow-right:hover {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    margin-left:auto;
    margin-right: auto;
  }
  .click {
    display: none;
  }
}

@media only screen and (max-width: 692px) {
  h1, h2, h3, h4 {
    text-align: center;
  }
  .three-wide figure {
    width: 80%;
    margin-left:auto;
    margin-right:auto;
  }
}

@media only screen and (max-width: 360px) {
  .wide, .thin, .two-wide figure {
    width: 95%;
  }
  .tall {
    width: 70%;
  }
  .square {
    width: 75%;
  }
}

/* Dimensions

my desk screen      1920
my laptop           1280
my iPad landscape   1024
my iPad portrait    768
my phone landscape  692
my phone portrait   360