/*
----------------------------------------------------
==================================================== 
Created by: Goodinson & Pound Agency 
For use by: Ormsheim Members
Date Created: 13/04/2022
==================================================== 
----------------------------------------------------
*/

@import url("https://use.typekit.net/mig0lfn.css");
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500;1,700&display=swap');
@import "Norse.css";

@import "login.css";
@import "menu_admin.css";
/* 
==================================================== 
COLOUR PALLET
==================================================== 
*/

:root {
    /*Standard colors*/
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;  
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #333333;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --transparent:transaprent;
    /*Theme colors*/
    --alpha:#000000;
    --beta:#FFA700;
    --gamma:#79062A;
    --delta:#FFFFFF;
    --lightgrey:#292b30;
    --midgrey:#232529;
    --darkgrey:#181a1c;
    --lightfont:#c3c5c7;
}

/* ----------------------------------------------------------------
   -------------------------- STRUCTURE ---------------------------
   ---------------------------------------------------------------- */

* {
    box-sizing: border-box; /* All margins and padding included in size*/
}

body, html {
  height: 100%;
  margin: 0;
  font: 400 19px/2 "Lato", sans-serif;
  color: #777;
  padding:0;
  width:100%;
  background: var(--lightgrey);
}
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
#pagecontent.narrow{
    margin:0 0 0 255px;
    width:calc(100% - 255px)
}

#pagecontent.wide{
    margin:0 0 0 5px;
    width:calc(100%)
}
div.content {
    max-width:1200px;
    margin:auto;

    min-height:calc(110%);
}
div.content-narrow {
    width: 100%;
    max-width:900px !important;
    margin:auto;
    overflow:hidden;
    min-height:calc(100% - 100px);
}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}
.row {
    display:table;
    width: 100%;
}


a.button {
    max-width:200px;
    width:50%;
    margin:20px auto;
    padding:8px;
    box-shadow: 0 0 2px #333;
    display: block;
    background:white;
    text-align: center;
    text-decoration: none;
}
a.button_small{
    max-width:200px;
    width:50%;
    margin:10px 5px;
    padding:8px;
    box-shadow: 0 0 2px #333;
    display: block;
    background:white;
    text-align: center;
    text-decoration: none;
    font-size: 11pt;
}
a.button:hover, a.button_small:hover {
    background: #333;
    color:white
}

a.button_left {
    float:left;
}

.quarter{width:calc(24.99999% - 30px)}
.third{width:calc(33.33333% - 20px)}
.half{width:calc(49.99999% - 20px);}
.twothird{width:calc(66.66666% - 20px)}
.threequarter{width:calc(74.99999% - 30px)} 
.full{width:calc(99.99999% - 20px)}


/* ------------------------------------ */
/* Parallax Styles */
/* ------------------------------------ */

.bgimg-1, .bgimg-2, .bgimg-3,.bgimg-4 {
  position: relative;
  opacity: 1;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: grayscale(70%);
}
.bgimg-1 {
  background-image: url("https://ormsheim.org.uk/assets/images/main/logo_still-min.png");
  min-height: 100%;
}

.bgimg-2 {
  background-image: url("../images/main/whitby1.jpg");
  min-height: 400px;
}

.bgimg-3 {
  background-image: url("../../../Gallery/Album8_folder/2.jpg");
  min-height: 400px;
}
.bgimg-4 {
  background-image: url("../images/main/orms_group_new.jpg  ");
  min-height: 400px;
}

.caption {
  position: absolute;
  left: 0;
  top: 47%;
  width: 100%;
  text-align: center;
  color: #111;
  opacity: .8;
}

.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

h3.caption_head {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111;
}
a.down-arrow {
  display:block;
  position: absolute;
  left: 0;
  top: 85%;
  width: 100%;
  text-align: center;
  color: #111;
  opacity: .8;
}
/* ----------------------------------------------------------------
   ---------------------------- FOOTER ----------------------------
   ---------------------------------------------------------------- */
#footer {
    background-color: #333;
    z-index:300;
    bottom:0;
    margin-left:40px;
    width:calc(100% - 40px)
}
#footer-inner {
    height:160px;
    max-width:980px;
    margin:auto;

}
#footer-link-holder{
    max-width:980px;
    margin:auto;
    text-align:center;
    font-size: 10pt
}
a.footer-link {
    color: #f2f2f2;
    padding:  0 0 10px 0 ;
    text-decoration: none;
    display: inline-block;
    position:relative;
    width:100%;
    margin: 7px 0 0 0;
    border-bottom: #808080 1px solid
}
#vike-logo {
    height: 100px;
    border-radius: 10px;
    margin:0px calc(50% - 50px);
    margin-bottom:0
}
p.footer-inner  {
    color: #f2f2f2;
    text-align: center;
    margin:0
}
p.footer-header  {
    color:  #808080;
    margin:0;
    padding:10px
}
#footer-inner [class*=" fa-"] {
    top:5px;
    position: absolute;
    margin-right:15px
}
a.media-link {  
    color: #f2f2f2;
    text-decoration: none;
    vertical-align: middle;
    display: inline-block;
    position:relative;
    padding: 0 0 0 10px;
    width:100%;
    margin: 5px 0 0 0;
    
}
span.media-link {
    padding: 0 0 0 5px;
    top:5px;
    position: absolute;
}


/* ----------------------------------------------------------------
   ---------------------------- ###### ----------------------------
   ---------------------------------------------------------------- */

h1.title-row {
    font-weight:300;
    text-align: center;
    margin: 0 auto;
}
p.title-row {
    font-weight:300;
    text-align: center;
}
p.policy-row {
    font-weight:300;
}
h1.section, h3.section {
    font-weight:300;
    text-align: center;
    margin: 0 auto;
}
p.section {
    font-weight:300;
    text-align: center;
}
.col {
    float:left;
    padding:8px
}
.col-no-padding {
    float:left;
    padding:0
}
img.col {
    width:calc(100% - 10px);
    margin:5px;
    box-shadow: 0 0 2px #333;
}
img.comb {
    width:calc(100% - 4px);
    margin:2px;
    box-shadow: 0 0 2px #333;
    object-position:center left ;
    object-fit: cover;
    height:300px
}

/* ----------------------------------------------------------------
   ----------------------------- MTV ------------------------------
   ---------------------------------------------------------------- */

img.mtv {
    margin:0;
    display:block;
    width:calc(100%);
    height:calc(100%);
    object-position:top left ;
    object-fit: cover;
}
img.mtv-p {
    margin:5px auto;
    box-shadow: 0 0 2px #333;
    padding:5px;
    display:block;
    max-height:300px;
}
img.mtv-p2 {
    margin:auto auto;
    display:block;
    width:calc(100%);
    max-height:calc(800px);
    object-position:top left ;
    object-fit: cover;  
}
h2.mtv {
    font-weight:300;
    text-align: center;
    position:absolute;
    bottom:0;
    width:100%;
    color:white;
    text-shadow: .5px .5px #CCC;
    background-color: #111;
    opacity:.8;
    margin-bottom: 0
}

a.mtv {
    text-decoration: none;
    color:#333;
}

/* ----------------------------------------------------------------
   --------------------------- Events -----------------------------
   ---------------------------------------------------------------- */
.event-cont {
    float:left;
    width:calc(24.99999% - 10px);
    margin:5px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    background: #fff;
    padding:0px;
    margin-top:10px;
    color:#333;
    position:relative;
    height:310px;
}
.event-cont h3 {
    margin:0;
    text-align: center;
    font-weight:300;
    width:100%;
    position:absolute;
    top:100px
}
.event-cont p {
    margin:5px;
    text-align: center;
}


.event-cont p.dates {
    color:green;
    margin:5px;
    font-weight:300;
    width:calc(100% - 10px);
    float: right;
    position:absolute;
    top:130px;
}

.event-cont img, .event-cont-big img {
    width: calc(100% - 10px);
    margin:5px;

}
.event-cont p.location {
    margin:5px;
    text-align: center;
    width:calc(100% - 10px);
    font-weight:300;
    color:#333;
    position:absolute;
    top:155px;
}

div.displayCont{
    width:calc(100% );
    position:absolute;
    top:198px;
    left:0px;
    height:42px;
    overflow:hidden;
    
}
.event-cont p.big-date, .event-cont-big p.big-date {
    float:left;
    width:85px;
    margin: 0;
    margin-top:5px;
    text-align: center;
    position:absolute;
    top:-15px;
    left:calc(15px);
    width:90px;
    background: green;
    padding:6px 3px;
    opacity: .85;
    color:white;
    line-height: 1.2;
    border-radius: 6px
    
}
.event-cont p.big-date span, .event-cont-big p.big-date span {
    color:white
}


/* ------------ FOR EVENTS PAGE --------*/

.event-cont-p {
    float:left;
    width:calc(49.9999% - 20px);
    margin:5px;
    box-shadow: 0 0 2px #333;
    padding:0px;
    background: white;
    margin-top:10px;
    min-height:375px;
    color:#333;
    position:relative;
    height:454px;
}
.event-cont-p img {
    width: calc(100%);
    margin:0px;
    height: 210px
}

.event-cont-p h3 {
    font-weight:300;
    margin:5px;
    width:calc(100% - 10px);
    float: right;
    position:absolute;
    top:210px
}
.event-cont-p p.location {
    font-weight:300;
    margin:5px;
    width:calc(100% - 10px);
    float: right;
    position:absolute;
    top:265px
}
.event-cont-p p.dates {
    color:green;
    margin:5px;
    font-weight:300;
    width:calc(100% - 10px);
    position:absolute;
    top:240px
}
.event_text {
    position:absolute;
    height:97px;
    overflow-y: scroll;
    top: 304px;font-weight:300;
    font-size:10pt;
    padding:5px;
    width:calc(100% - 10px)
}
.event-cont-p .displayCont {
    width:calc(100%);
    position:absolute;
    top:418px;
    left:0px;
    height:42px;
    overflow:hidden;
    
}
.event-cont-p p.big-date {
    float:left;
    width:85px;
    margin: 0;
    text-align: center;
    position:absolute;
    top:0;
    left:0;
    background: white;
    padding:10px 3px;
    opacity: .85;
    line-height: 1.2
}
p.big-date span{
    font-size:34pt;
    color: green;
    
}
.display-indicator {
    float:left;
    padding:5px;
    width:calc(33.33333% - 10px);
    text-align: center;
    background:gainsboro;
    color:grey;
}
.green {
    background: #c2f0c2;
    color:green
}
#lh-tag {
    height: 30px;
    color:green;
    margin:0
}
#arch-tag {
    height: 30px;
    color:green;
    margin:0
}
.event-cont-big {
    float:left;
    width:calc(99.99999% - 10px);
    max-width: 900px;
    margin:5px calc(50% - 450px);
    box-shadow: 0 0 2px #333;
    padding:0px;
    margin-top:10px;
    color:#333;
    position:relative;
}
.optionsCont {
    position:absolute;
    top:238px;
    padding: 6px 1px;
    background: #e0e0e0;
    width: calc(100% - 2px)
}
.optionsCont a.option {
    border: 1px solid silver;
    padding: 10px 5px;
    background: whitesmoke;
    border-radius: 4px;
    margin:0 0;
    display:inline-block;
    text-decoration: none;
}
.optionsCont a.option:hover {
    background: #4CAF50;
    color:white;
    
}

.optionsCont div.intHolder {
    border: 1px solid silver;
    background: #4CAF50;
    padding:0;
    border-radius: 4px;
    margin:0 0;
    display:inline-block;
    text-decoration: none;
    float:right;
    position:relative;
    width:59px
}
.optionsCont div.intHolder p.bg {
    position: absolute;
    right:0;
    color:#e0e0e0;
    font-size:11px;
    float:right;
    padding:0;
    z-index:3;
    margin:0 5px;
 
}
.optionsCont div.intHolder p.fg {
    right:0;
    color:black;
    padding:10px 0 0px 0;
    font-weight: 400;
    z-index:1000
}
/* ----------------------------------------------------------------
   ----------------------------- ### ------------------------------
   ---------------------------------------------------------------- */


div.mtv {
    box-shadow: 0 0 2px #333;
    background:white;
    width: calc(33.33333% - 6px ) !important;
    margin:0;
    height:400px;
    position:relative
}
div.prof-header {
    width:calc(100% - 10px);
    position:relative
}

div.prof-header h2.name {
    position:absolute;
    bottom:0;
    width:100%;
    text-align: center;
    color:white;
    font-weight: 300;
    background:#111;
    opacity:.8;
    margin-bottom: 0
}





@media (max-width:900px) {
    .quarter, .third, .half,.twothird, .threequarter,.full{
        width:calc(99.99999% - 15px)
    }
    .card.half {
         width:calc(99.99999% - 15px)
    }

    .event-cont {
        float:left;
        width:calc(99.99999% - 10px);
        margin:5px;
        margin-top:10px;
        
        padding:0px
    }

    .event-cont-p {
        float:left;
        width:calc(99.99999% - 10px);
        margin:5px;
        box-shadow: 0 0 2px #333;
        padding:0px
    }


    img.mtv-p {
        margin:5px auto;
        box-shadow: 0 0 2px #333;
        padding:5px;
        display:block;
        height:300px;
    }
    div.mtv {
        box-shadow: 0 0 2px #333;
        background:white;
        width: calc(99.99999% - 6px ) !important;
        margin:2px;
    }
    .event-cont-big {
    float:left;
    width:calc(99.99999% - 10px);
    max-width: 900px;
    margin:5px;
    box-shadow: 0 0 2px #333;
    padding:0px;
    margin-top:10px;
    color:#333;
    position:relative;
}





}

a.subnav {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 18px;
    font-weight: 300;
}

ul.info {
    text-align: center;
    width:75%;
    margin:auto;
    max-width:900px
}
li.info {
    font-weight:300;
    text-align: center;;
    padding:2px 0
}

ul.policy {
    margin:auto;
    max-width:900px
}
li.policy {
    font-weight:300;
    padding:2px 0
}




#myVideo {
          position: fixed;
          right: 0;
          bottom: 0;
          min-height: 100%;
          width:100%;
          height: 300px; z-index: -10;
          object-fit: cover;
}

    div.holder_white {
        color: #777;background-color:white;text-align:center;padding:50px 80px;text-align: CENTER;
    }

    div.holder_grey {
        color:#ddd;background-color:#282E34;text-align:center;padding:50px 80px;text-align: center;
    }
/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .bgimg-1, .bgimg-2, .bgimg-3,.bgimg-4 {
    background-attachment: scroll;
  }
  
}

@media (max-width:900px) {
    .bgimg-1 {
        min-height:50vh;
        /*background-image: url("../images/main/logo_still.png");*/
        object-fit: cover;
    }
    a.down-arrow {
        display:none;
    }
    
   #myVideo {
      position: fixed;
      right: 0;
      top:0;
      min-height: 50%;
      width:100%;
      z-index:-10;
      object-fit: cover;
}
div.holder_white {
    color: #777;background-color:white;text-align:center;padding:50px 20px;text-align: center;
}
div.holder_grey {
    color:#ddd;background-color:#282E34;text-align:center;padding:50px 20px;text-align: center;
}
#pagecontent.narrow{
    margin:0 0 0 260px;
    width:calc(100% - 50px)
}

#pagecontent.wide{
    margin:0 0 0 5px;
    width:calc(100% - 5px)
}
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 28px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(32px);
  -ms-transform: translateX(32px);
  transform: translateX(32px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


    div.patchcont {
        width:50%;
        float:left;
        border-radius:10px
    }
    div.patchcont:hover {
        background:#4CAF50;
        color:#fff
    }
    div.patchcont:hover p{

        color:#fff
    }
    div.patchcont img {
        float:left;
        height:70px;
    }
    div.patchcont p {
        margin:16px 0;
        width: calc(100% - 70px);
        font-weight:300;
        color:#4CAF50;
    }
    ol li {
        font-weight:300;
        color:#4CAF50;
        font-size:12pt
    }
    ul li {
        color:#777
    }
    ul li quote {
        font-style: italic; 
    }
    @media (max-width:900px) {
        div.patchcont {
        width:99%;
        float:left;
        border-radius:10px
    }
    }
    
    a.action-link {float:right;margin: 0 3px;padding: 5px; background: #fff; border-radius: 3px; text-decoration: none; box-shadow: 0 16px 38px -12px rgba(0,0,0,.56), 0 4px 25px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2);}
    a.action-link-top {float:right;margin: 10px 3px;padding: 5px; background: #fff; border-radius: 3px; text-decoration: none; box-shadow: 0 16px 38px -12px rgba(0,0,0,.56), 0 4px 25px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2);font-size:10pt}
    
    div.card {
        float:left;
        margin: 10px 3px;
        padding: 5px; 
        background: #fff; 
        text-decoration: none; 
        box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
        position:relative
    }   
    
    div.card div.topper {
    float:left;
    width:65px;
    margin: 0;
    margin-top:5px;
    text-align: center;
    position:absolute;
    top:-15px;
    left:calc(15px);
    background: green;
    padding:15px 3px;
    opacity: .85;
    color:white;
    line-height: 1.2;
    font-size:24px
}
div.card div.topperWide {
    float:left;
    width:90%;
    margin: 0;
    margin-top:5px;
    text-align: center;
    position:absolute;
    top:-15px;
    left:calc(15px);
    background: green;
    padding:15px 3px;
    opacity: .85;
    color:white;
    line-height: 1.2;
    font-size:20px
}
.card h3 {font-weight:300;
    font-size: 18px;
    margin:10px 0 0 95px
    
}