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



@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";


: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:#4CAF50;
    --delta:#FFFFFF;
    --lightgrey:#292b30;
    --midgrey:#232529;
    --darkgrey:#181a1c;
    --lightfont:#c3c5c7;
}

body, html {
  height: 100%;
  margin: 0;
  font: 400 19px/2 "Lato", sans-serif;
  color: #777;
  padding:0;
  width:100%;
  
}
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

div.content {
    width: 100%;
    max-width:1000px;
    margin:auto;
    overflow:hidden;
    min-height:calc(100% - 100px);
}
div.content-narrow {
    width: 100%;
    max-width:900px !important;
    margin:auto;
    overflow:hidden;
    min-height:calc(100% - 100px);
}
div.content-wide {
    width: 100%;
    max-width:1200px !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%;
}

.topRow {
    margin-top:120px
}
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-white {
    max-width:200px;
    width:50%;
    margin:20px auto;
    margin-bottom: 10px;
    padding:8px;
    box-shadow: 0 0 2px #333;
    display: inline-block;
    background:white;
    text-align: center;
    text-decoration: none;
    border-radius: 6px;
    color:#333;
}
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("../images/main/logo_still-min.png");*/
  min-height: 100%;
}

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

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

.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: 40pt;
  letter-spacing: 10px;
}

h3.caption_head {
  letter-spacing: 5px;
  text-transform: uppercase;
  font-size: 40pt;
  line-height: .9
}
a.down-arrow {
  display:block;
  position: absolute;
  left: 0;
  top: 85%;
  width: 100%;
  text-align: center;
  color: #111;
  opacity: .8;
}
/* ----------------------------------------------------------------
   ---------------------------- FOOTER ----------------------------
   ---------------------------------------------------------------- */
#footer {
    background-color: #282E34;
    z-index:300;
    bottom:0;

}
#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;
}

.norsebold {
    font-family: 'Norse Bold', sans-serif;
}
.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;
}
.story-holder p {
    font-weight:300;
}
/* ----------------------------------------------------------------
   --------------------------- Events -----------------------------
   ---------------------------------------------------------------- */


.event-cont {
    float:left;
    width:calc(49.99999% - 10px);
    margin:5px;
    box-shadow: 0 0 2px #333;
    padding:0px;
    background: white;
    margin-top:10px;
    color:#333;
    position:relative;
    height:240px;
}
.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;
    text-align: center;
    position:absolute;
    top:-10px;
    left:calc(50% - 45px);
    width:90px;
    background: green;
    padding:6px 3px;
    opacity: .85;
    color:white;line-height: 1.2
    
}
.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;
}

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


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)
    }


    .event-cont {
        float:left;
        width:calc(99.99999% - 10px);
        margin:5px;
        margin-top:10px;
        box-shadow: 0 0 2px #333;
        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;
    }
    
    div.major-major-event {
        box-shadow: 0 0 2px #777;
        border-radius:7px;
        position:relative;
        background-size: auto 100%;
        background-position: center;
        background-repeat: no-repeat;
    }
    div.major-major-event img {
        border-radius:7px 7px 0 0 ;
        width:100%;
        max-width:400px
    }
    div.major-major-event p {
        color:#f0f0f0;
    }
    
/* 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;
}
}