/* Global Styles */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f9f9f9;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Arial, sans-serif;
  color: #00698f;
}

a {
  text-decoration: none;
  color: #337ab7;
}

a:hover {
  color: #23527c;
}

/* Add more styles as needed */

/*
Theme Name: TNP-MMXX
Theme URI: http://www.thesenewpuritans.com/
Description: These New Puritans
Author: Tom Seabrook
Version: 4.2
*/

/* COMMON */

@import url('https://fonts.googleapis.com/css?family=Lato:100,400,700');
html, body {margin: 0; padding: 0; border: 0; font-family: 'Helvetica', 'Lato', sans-serif; background: #fff;}
img {max-width: 100%; max-height: auto;}
a, a:visited {text-decoration: none;}
.pink:hover {color: #ffb6c1}

.menu {width: 100%; margin: 0; padding: 16px 0 8px 0; text-align: center; letter-spacing: 0.5px; font-size: 9px; line-height: 20px; font-weight: 300; color: #000;}
.menu img {width: 300px; height: auto; display: block; margin: 0 auto; padding: 0; margin-bottom: 5px;}
.menu span a, .menu span a:visited {color: #000; transition: 0.2s ease; font-weight: 700; padding: 0 2px 0 2px; font-size: 13px;}
.menu span a:hover {color: #ff0000; font-style: italic;}

.content {width: 90%; max-width: 720px; margin: 0 auto; font-size: 12px; line-height: 16px; text-align: left; padding: 0; color: #000; letter-spacing: 0.5px;}
.video {position: relative; padding-bottom: 56.25%; height: 0; margin: 20px 0 20px 0; width: 100%;}
.video iframe, .video img {position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%;}
.content p a, .content p a:visited {color: #000;}
.content p a:hover {border-bottom: 0px solid #ff0000; color: #ff0000; font-style: italic;}
.content a, .content a:visited {color: #000;}
.content a:hover {font-style: italic;}

.press {display: inline-block; margin: 3px 3px 3px 0; height: 20px;}
.press a, .press a:visited {padding: 4px 8px; border: 1px solid #000; color: #000; transition: 0.2s ease;}
.press a:hover {background: #000; color: #fff}
.white {border: 0; max-width: 500px; background: #fff; transition: 0.2s ease}


/* 2019 */

.tin_sea {width: 240px; height: 240px; position: relative; display: inline-block; margin: 4px; object-fit: cover;}
.tin_sea img {height: 240px; width: 240px; object-fit: cover;}
.tin_cap {position: absolute; margin: auto; left: 20px; top: 20px; bottom: 20px; right: 20px; text-align: center; opacity: 0; padding: 10%; font-size: 12px; line-height: 20px; letter-spacing: 2px; font-weight: 700; color: #000; background: #fff;}
.tin_sea:hover .tin_cap {opacity: 1; -webkit-transition: all 1s ease;}
.tin_sea:hover img {-webkit-filter: brightness(180%); -webkit-transition: all 1s ease;}
.tin_sea .tin_cap a, .tin_sea .tin_cap a:visited {color: #000fff; text-decoration: none;}
@media only screen and (max-device-width: 1028px) and (orientation : portrait) {
.content {width: auto; margin: 10px;}
.tin_sea, .tin_sea img {width: 140px; height: 140px;}
.tin_cap {opacity: 0.8; margin: 0 auto; top: 0; left: 0; right: 0; bottom: 0; min-height: 20px; padding: 10px; background: #fff; display: flex; align-items: center; display: -webkit-flex; text-align: center; justify-content: center;}
}
.spinner {position: fixed; margin: auto; top: 0; left: 0; right: 0; bottom: 0; width: 83px; height: 240px; padding: 0;}
.spinner img {height: 240px; width: 83px;}
.spinning {-webkit-animation:spin 8s linear infinite; -moz-animation:spin 8s linear infinite; animation:spin 8s linear infinite;}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.frame {position: absolute; top: 0; bottom: 0; right: 0; left: 0; display: flex; align-items: center; display: -webkit-flex; -webkit-align-items: center; text-align: center; justify-content: center;}
.frame img {width: 280px; height: 280px;}

/* SOCIAL */

.footer {margin: 0 auto; padding: 20px; text-align: center; color: #000; width: 240px;}
.footer a, .footer a:visited {color: #000; text-decoration: none; transition: 0.5s ease; font-weight: 700;}
.footer a:hover {color: #ff0000; font-style: italic;}
.social {font-size: 12px; line-height: 16px; margin: 0;}
.legal {font-size: 10px; line-height: 14px; margin: 0 0 10px 0;}

.chimp {margin: 0 0 2px 0; position: relative; width: 100%;}
.chimp .email {background: transparent; border: 0; box-shadow: none; padding: 0 20px 0 1px; width: 240px; font-size: 12px; line-height: 18px; color: #000; text-align: left; vertical-align: bottom; margin: 0; border-radius: 0; border-bottom: 1px solid #000;}
.chimp .button {background: transparent; color: #ff0000; border: 0px; font-size: 16px; font-weight: 700; line-height: 10px; vertical-align: bottom; transition: 0.3s; text-transform: uppercase; position: absolute; bottom: -1px; right: -1px; display: block; padding: 5px 4px 5px 4px; cursor: pointer; font-family: Helvetica; font-size: 100%; border-radius: 0; -webkit-appearance: none;}
input:-webkit-autofill {-webkit-box-shadow: inset 0 0 0px 9999px #ff0000;}
.chimp .button:hover {background: #ff0000; color: #000;}
::-webkit-input-placeholder {color: #ff0000;}


/* ARCHIVE */

.grid {width: 90%; max-width: 1040px; margin: 0 auto; overflow-y: hidden; background: #fff; font-size: 0; text-align: center;}
.grid:after {content: ''; display: block; clear: both;}
.grid-sizer, .grid-item {width: 240px; margin: 10px;}
.grid-item {margin: 10px 10px 10px 10px;}
.grid-item--double {width: 480px;}
.navigation {position: fixed; bottom: 0; left: 0; height: 20px; width: 150px; color: white; background: red; z-index: 9999999999; display: none !important;}
.space {width: 100%; height: 60px; padding: 0; margin: 0; border: 0;}

.video_box {position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; margin: 0;}
.video_box iframe, .video_box video {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.biggest {width: 100%; min-height: 100%; margin: 0; border: 0; padding: 0 0 20px 0; background: #fff}
.closer {position: fixed; z-index: 9999; top: 20px; right: 20px; line-height: 24px; width: 24px; text-align: center; font-weight: 900; font-size: 24px; color: #000; border: 0; padding: 0; background: #fff; cursor: pointer}
.closer a, .closer a:visited {color: #000; font-weight: bold;}
.closer a:hover {font-style: italic}

.box {margin: 20px auto; width: 70%; max-width: 800px; color: #000; letter-spacing: 1px; font-size: 12px; line-height: 16px; padding: 0; text-align: center;}
.box img {height: auto; width: #000;}
.box a, .box a:visited {color: #000; font-weight: bold}
.box a:hover {font-style: italic}
h1 {font-size: 18px; font-weight: 300; margin: 0 0 20px 0; padding: 0;}
h3 {color: red}
label {font-size: 0;}
.block {width: 50%; float: left; font-size: 11px;}
img.button {width: 100px; margin: 0; padding: 0; border: 0;}

.photo {margin: 0; padding: 0px; position: relative;}
.photo img {width: 100%; height: auto;}
.photo_caption {position: absolute; margin: auto; left: 20px; top: 20px; bottom: 20px; right: 20px; text-align: center; opacity: 0; padding: 10%; font-size: 12px; line-height: 20px; letter-spacing: 2px; font-weight: 700; color: #000; background: #fff;}
.photo:hover .photo_caption {opacity: 1; -webkit-transition: all 1s ease;}
.photo:hover img {-webkit-filter: brightness(180%); -webkit-transition: all 1s ease;}
.photo .photo_caption a, .photo .photo_caption a:visited {color: #000fff; text-decoration: none;}


/* RESPONSIVE */

@media (max-width: 600px){.top img, .menu img {width: 280px;} .top a, .menu span a {font-size: 12px;} .white {width: 90%;} .box {margin: 0 auto; width: 90%;} .press {margin-bottom: 9px;}}
@media (max-height: 700px) {.content {max-width: 640px;}}

@media only screen and (max-width: 1120px){
.grid {width: 780px;}
}

@media only screen and (max-width: 840px){
.grid {width: 520px;}
}

@media only screen and (max-width: 680px){
.grid {width: 260px;}
}

@media only screen and (max-width: 767px){
.spinner, .spinner img {}
}

@media only screen and (max-device-width: 1028px) and (orientation : portrait) {
.box {width: 90%; padding: 0;}
.box iframe, .box video {width: 100%; margin: 0 auto;}
.grid {width: 260px; margin: 0 auto;}
.photo img {margin: 50px 0 30px 0;}
.photo_caption {margin: 0 auto; top: 0; left: 0; right: 0; bottom: auto; min-height: 20px; padding: 0; opacity: 1; background: #fff;}
.photo a, .photo a:visited {text-decoration: underline; padding: 10px;}
#infscr-loading {position: fixed; width: 100%; bottom: 0; background: #fff; opacity: 0.8; font-family: sans-serif; font-size: 13px; color: #000; z-index: 999999;}
}

@media only screen and (max-device-width: 1028px) and (orientation : landscape) {
.photo img {margin: 50px 0 30px 0;}
.photo_caption {margin: 0 auto; top: 0; left: 0; right: 0; bottom: auto; min-height: 20px; padding: 0; opacity: 1; background: #fff;}
.photo a, .photo a:visited {text-decoration: underline; padding: 10px;}
#infscr-loading {position: fixed; width: 100%; bottom: 0; background: #fff; opacity: 0.8; font-family: sans-serif; font-size: 13px; color: #000; z-index: 999999;}
}

.fw_video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.fw_video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}