*, *::before, *::after {
    box-sizing: border-box;
  }

html {
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Segoe, Helvetica, Arial, sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgb(51, 51, 51);
    margin: 0;
    padding: 0;
}

a {
    font-weight: 500;
    text-decoration: none;
}

a:link {
    color: rgba(0, 70, 117, 1);
}
a:visited {
    color: rgb(69, 89, 89);
}
a:hover {
    color: rgb(102, 51, 153);
    text-decoration: underline;
}
a:focus {
    color: rgb(102, 51, 153);
}
a:active {
    color: rgb(102, 51, 153);
}
.main-nav a:link { 
    color: rgb(245, 245, 245);
    padding: .8rem;
}
.main-nav a:visited {
    color: rgb(245, 245, 245);
}
.main-nav a:hover {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}
.main-nav a:focus { 
    color: rgb(102, 51, 153);
    background-color: rgba(0, 0, 0, 0.2);
}
.main-nav a:active {
    color: rgb(102, 51, 153);
    background-color: rgba(0, 0, 0, 0.2);
}

blockquote {
    border-left: 2px solid rgb(255, 215, 0);
    background-color: rgb(245, 245, 245);
    padding: 1px 2px 1px 15px;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* ------ TYPOGRAPHY ------ */

h1 {
    font-size: 2rem;
    font-weight: 600;
    line-height: 2rem;
    width: 80%;
    margin: 0;
    float: left;
    padding-top: .5rem;
    color: rgb(0, 139, 182);
}

h1 span {
	font-size: medium;
    color: rgb(102, 51, 153);
}

h2, h3, h4, h5 {
    line-height: 2rem;
    margin: 0;
    color: rgb(19, 111, 116);
}

h2 {
    font-size: 1.9rem;
    color: rgb(47, 79, 79);
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.375rem;
}

h5 {
    font-size: 1.2rem;
}

p {
margin-block: 1rem .5rem;
}

.just {
    text-align: justify;
    word-spacing: -2px;
}

.hilite {color: rgb(102, 51, 153);}

/* ------ POSITIONING ------ */

.flt-left {
    float: left;
}

.flt-right {
float: right;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.center-block {
  margin-left: auto;
  margin-right: auto;
  display: block;
  max-width: 100%;
  height: auto;
}

.justify {
  justify-content: space-between;
}

.marg {
margin: 0;
}

.marg-t {
margin-top: 0;
}

.marg-b {
margin-bottom: 0;
}

.top-marg {
margin-top: 2rem;
}

.left-marg {
margin-left: 0;
}

.pad-t {
    padding-top: 1rem;
}

.pad-b {
    padding-bottom: 1rem;
}

.pad {
    padding: 0;
}

.pad-lr {
    padding-left: 1rem;
	padding-right: 1rem;
}

.pad-125 {
    padding: 1.25rem;
}

.hide {
    display: none;
}
.jasminews {
    border: 2px solid rgb(4, 98, 94);
    border-radius: 12px;
    margin-top: 1rem;
    padding: .5rem;
}
.jasminews p {
    line-height: 1.4;
}
/* ------ Nav ------ */

.main-nav {
    float: right;
    width: 100%;
    height: 100px;
}

.main-nav ul {
    float: right;
    display: inline;
    width: 100%;
    list-style-type: none;
    align-content: center;
}

.main-nav li {
    float: left;
    text-align: center;
    min-width: 33%;
    color: antiquewhite;
    background: rgb(102, 133, 135);
    border-bottom:solid 1px rgb(129, 169, 172);
    border-left:solid 1px rgb(129, 169, 172);
}

.main-nav li:last-child {
    display: none;
}

.main-nav a {
    display: inline-block;
    text-decoration: none;
    height: 50px;
    min-width: 33%;
    line-height: 1.5rem;
    font-size: 1.1rem;
}

@supports (display: flex) {

    .main-nav {
        padding:0;
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .main-nav ul {
        display: flex;
        flex-direction: row;
        flex-flow: wrap;
        justify-content: center;
    }
    .main-nav li {
        float: left;
        text-align: center;
        min-width: 33%;
        color: rgb(248, 248, 255);
        background: linear-gradient(to top,rgba(0,0,0,.7),rgb(102, 133, 135),rgb(108, 141, 144));
        border-bottom: 0;
        border-left: 0;
    }
}

/* ------ Header ------ */

header {
    float: left;
    height: 10%;
    min-height: 170px;
    width: 100%;
    background: rgb(242, 242, 237);
} 

.logo-full {
    width: 100%;
}
.logo-center {
    margin: 0 auto;
}

header img {
    float: left;
    height: 100%;
    width: 20%;
    max-width: 90px;
    border: 0;
    padding: .5rem .2rem;
}

@supports (display: flex) {

    header {
        position: inherit;
        display: flex;
        flex-direction: column;
        flex-flow: wrap;
        justify-content: space-between;
    } 

    .logo-full {
        display: flex;
        flex-direction: row;
        width: 100%;
    }
}
/* ------ Grid layout ------ */
.main {
    padding-top: 102px;
    -ms-position: relative;
	min-height: 750px;
	min-height: calc(100vh - 191px);
}

.wrapper {
    width: 95%;
    margin: 0 auto;
    padding: 1rem 0;
    align-content: center; 
}

.row {
    float: left;
    display: inline;
    width: 100%;
}
.col-1 {
    width: 100%;
}

.clear:before {
    content: " ";
    display: table;
}

.clear:after {
    clear: both;
}

@supports (display: flex) {

    .main {
        padding-top: 0;
        position: inherit;
    }

    .wrapper {
        display: flex;
        flex-direction: column;
        flex-flow: wrap;
        height: 100%;
        width: 95%;
        padding: 1rem 0;
    }
    .row {
        display: flex;
        flex-direction: column;
    }
}

.pad-b-non {
    padding-bottom: 0;
}

.pad-t-non {
    padding-top: 0;
}

/* ------ Main contents layout ------ */
/* ----index page---- */
.htag {
    margin-top: 1rem;
    padding: 4rem 0 1rem;
}
.callout {
    line-height: 2rem;
    font-size: 1.2rem;
    margin-top: .8rem;
    padding: 1rem;
    background-color: rgb(242, 242, 237);
    border-radius: 1em;
}

.call-bold {
    font-weight: 600;
    color: rgb(102, 51, 153);
}

.shout {
    background-color: rgb(242, 242, 237); 
    padding: 1.25rem;
    border-radius: 1em;
}

.shout .lead {
    color: rgb(47, 79, 79);
    margin: 0;
    padding: .5rem 0;
}

.shout .tag {
    margin: 0;
    padding: .5rem 0;
    text-align: center;
}
.swim {
    float: left;
    min-height: 200px;
    background-color: rgb(242, 242, 237);
    padding: 1rem 0;
    margin-top: .2rem;
}

.swim p {
    color: rgb(69, 69, 69);
    font-weight: 600;
}

@supports (display: flex) {
    .htag {
        padding-top: 0;
    }
}
/* ----multi pages---- */
.page-header {
    padding-top: 6rem;
}

.hed_col {
    padding-left: 12px;
    margin-bottom: .8rem;
    padding-bottom: .3rem;
}

.web_line {
    border-left: solid 9px rgb(139, 102, 139);
    border-bottom: solid 3px rgb(139, 102, 139); 
}
.host_line {
    border-left: solid 9px rgb(0, 128, 128);
    border-bottom: solid 3px rgb(0, 128, 128); 
}
.supp_line {
    border-left: solid 9px rgb(205, 92, 92);
    border-bottom: solid 3px rgb(205, 92, 92); 
}
.dev_line {
    border-left: solid 9px rgb(72, 61, 139);
    border-bottom: solid 3px rgb(72, 61, 139); 
}

.lead {
    font-size: 1.3rem;
    color: rgb(47, 79, 79);
}

.tag {
    font-size: 1.5rem;
    color: rgb(102, 51, 153);
    line-height: inherit;
}

.panel {
    width: 100%;
    float: left;
    position: relative;
    min-height: 250px;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: .5rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.panel h4 {
    align-self: flex-start;
}

.panel-heading {
    width: 100%;
    background-color: rgb(102, 133, 135);
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    padding: .85rem;
}

.panel p {
    text-align: left;
    padding: 0 .8rem;
    margin: 1rem 0 0;
	height: 80%;
	line-height: 1.375;
}
.panel-default:last-child {
    margin-left: 0;
}

.panel h4,
.service-panel h4 {
    color: rgb(242,242,237);
    margin: 0;
}
.panel a {
    color: rgb(0, 70, 117);
    padding: .8rem;
	position: absolute;
    bottom: 0;
    right: 0;
}

.panel a:hover {
    color: rgb(102, 51, 153);
    text-decoration: none;
}

.swim a {
    color: rgb(47, 79, 79);
    text-decoration: none;
}

.swim a:hover {
    color: rgb(255, 255, 255);
    background-color: rgb(102, 133, 135);
}

.btn {
    height: 20%;
    width: 100%;
    justify-content: flex-end;
    background-color: rgb(108, 141, 144);
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
    position: absolute;
    bottom: 0;
    left: 0;
}

.swim-btn {
    border: 3px solid rgb(86, 112, 113);
    padding: 1rem;
}

.line {
    width: 60%;
}

.side-panel {
    background-color: rgb(248, 248, 255);
    padding: 1rem;
}

.side-panel li {
    padding: .25em;
}

@supports (display: flex) {

    .page-header {
        padding-top: 0;
    }
	.panel {
    width: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    min-height: 250px;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: .8rem;
    border-radius: .5rem;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.panel a {
    margin-top: auto;
    align-self: flex-start;
    color: rgb(0, 70, 117);
    padding: .8rem;
}

    .panel-default:last-child {
        margin-left: auto;
        margin-right: auto;
    }
}
/* ----services page---- */

.Inpage-lnk {
    float: left;
    width: 100%;
	font-size: 1em;
	line-height: 1em;
}

.Inpage-lnk ul {
    float: left;
    display: inline-block;
    width: 100%;
    list-style-type: none;
}

.Inpage-lnk li {
    float: left;
	width: 50%;
}

.Inpage-lnk a {
    color: white;
    display: inline-block;
    text-decoration: none;
    height: 50px;
    line-height: 1.5rem;
    font-size: 1.1rem;
    background-color: inherit;
    padding: .7rem;
	width: 100%;
}
.web {
    background-color: rgb(139, 102, 139);
}
.host {
    background-color: rgb(0, 128, 128);
}
.supp {
    background-color: rgb(205, 92, 92);
}
.dev {
    background-color: rgb(72, 61, 139);
}
.service-panel {
    float: left;
    display: inline-block;
    position: relative;
    width: 100%;
    min-height: 320px;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
	border-bottom: solid 8px rgb(128, 128, 128);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.area_web {
    border-bottom-color: rgb(139, 102, 139);
}
.area_host {
    border-bottom-color: rgb(0, 128, 128);
}
.area_serv {
    border-bottom-color: rgb(205, 92, 92);
}
.area_dev {
    border-bottom-color: rgb(72, 61, 139);
}

.service-panel p {
    font-size: 1.1rem;
    padding: 1rem;
    text-align: left;
	height: 200px;
	margin: 0;
}

.service-btn {
    width: 100%;
    justify-content: flex-end;
	height: 19%;
    position: absolute; 
    bottom: 0;
    left: 0;
	padding: 1rem 0;
	margin: 0;
}

.service-btn p {
    text-align: center;
    padding: 0;
	margin: 0; 
    color: rgb(102, 133, 135);
} 

.service-btn a {
    color: rgb(47, 79, 79);
    text-decoration: underline;
}

.service-btn a:hover {
    color: rgb(102, 51, 153);
	text-decoration: none;
}

.t_of_p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 1rem;
}
@supports (display: flex) {
    .service-panel {
        display: flex;
        flex-direction: column;
        min-height: 320px;
        width: 100%;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        border-radius: .5rem;
        box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    }
}
/* ---- sitemap page ---- */

.sitemap-title {
    font-size: 1.85rem;
}

.sitemap li {
    padding-bottom: .5rem;
}

.york-sign {
    display: none;
}

/* ---- news page ---- */

.news-space {
    padding-bottom: 1rem;
}

.news-space h4 {
	font-size: 1.2rem;
    color: rgb(1, 86, 35);
}

.news-space p {
	margin: .25rem;
}

.news-links {
    padding-right: 1rem;
}

.news-links a {
    font-size: 1rem;
    font-weight: 400;
}

.news-links ul {
    list-style-type: disc;
    padding-left: 2rem;
    font-size: 1.2rem;
}

.news-pad {
    padding-left: 1rem;
}

/* ---- accommodation page ---- */

.bizcard {
    background-color: rgb(240, 248, 255);
    padding: .8rem;
    width: 100%;
}

.bizcard h5 {
    color: darkcyan;
    width: 50%;
    float: right;
}
.guestweb {
	border-bottom: solid 1px rgb(100, 149, 237);
    text-align: center;
    padding: .25em;
}
/* ----- Form Fields ----- */

input,
textarea {
    font-size: 1rem;
    font-weight: 400; 
    color: rgb(26, 40, 55);
    width: 100%;
    border: none;
    height: auto;
    padding: 15px;
    outline: 0;
    margin-bottom: 1.2em;
    border-radius: .3em;
    border-bottom: 3px solid rgba(0,0,0, 0.05);
    background-color: rgb(232, 238, 239);
    box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
}

label {
    display: block;
    color: rgb(47, 79, 79);
    font-weight: 600;
    margin-bottom: 0.5em; 
}

.form-contact {
    padding: 20px 24px;
    background: rgb(242, 242, 237);
    max-width: 500px;
}

.contact-btn {
    cursor: pointer;
    font-size: .875em;
    font-weight: 600;
    padding-left: 20px;
    padding-right: 20px;
    text-transform: uppercase;
    background: linear-gradient(to top, rgb(138, 178, 182), rgba(0,0,0,.5));
    color: rgb(255, 255, 255);
}

.contact-btn:hover {
    color: rgb(102, 51, 153);
    background-color: rgba(125, 140, 158, .5);
}

.default {
    background-color: rgb(138, 178, 182);
}

.error {
    background-color: rgba(220, 182, 90, .7);
}

/* ------ Footer ------ */

footer {
    float: left;
    width: 100%;
    color: rgb(248, 248, 255);
    margin-left: auto;
    margin-right: auto;
    background-color: rgb(56, 84, 111);
}

footer p {
    color: rgb(248, 248, 255);
    margin-top: 0;
    margin-bottom: 0;
    padding: .3rem 0 .3rem 0;
}

footer a:link {
    color: rgb(248, 248, 255);
}
footer a:visited {
    color: rgb(248, 248, 255);
}
footer a:hover {
    color: rgb(241, 245, 209);
}
footer a:focus {
    color: rgb(241, 245, 209);
}
footer a:active {
    color: rgb(241, 245, 209);
}
.copy {
    color: rgb(248, 248, 255);
    background-color: rgb(65, 112, 129);
}
.breadcrumb {
    width: 90%;
    height: 2rem;
    margin-left: auto;
    margin-right: auto;
	text-align: center;
	padding-top: 0.5rem;
}

@supports (display: flex) {
.breadcrumb {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
}

.breadcrumb li {
    display: inline;
}

.breadcrumb li + li:before {
    content: "> ";
    font-size: 1.4rem;
    line-height: 1.2rem;
    padding-left: 0.5rem;
}

/*------------------ Media Queries -----------------------*/

@media only screen and (max-width: 21.75em) { /* 348px */

.Inpage-lnk li {
    float: left;
	width: 100%;
}
    .service-panel {
        min-height: 330px;
    }
}

@media only screen and (min-width: 23.43em) { /* 375px */
    
    .service-panel {
        min-height: 300px;
    }
}
    
    
@media only screen and (min-width: 33.75em) { /* 540px */

    header {
        flex-direction: row;
    }
    h1 {
        font-size: 2.5rem;
        padding-top: .2rem;
    }

    header img {
        width: 20%;
        height: 100%;
        max-width: 90px;
    }

    .main {
        padding-top: 101px;
        -ms-position: relative;
    }

    .left-marg {
        margin-left: 1rem;
    }

    .pad-l {
        padding-left: 2rem;
    }

    .pad-r {
        padding-right: 2rem;
    }

    .pad-r-lrg {
        padding-right: 4rem;
    }

    .pad-b-lrg {
        padding-bottom: 2rem;
    } 

    .service-panel {
        min-height: 250px;
    }

    .sitemap-title {
        font-size: 2.3rem;
    }

    .news-links a {
        font-size: 1.2rem;
        font-weight: 500;
    }
    @supports (display: flex) {

        .main {
            padding-top: 0;
            position: inherit;
        }
    }
}

@media only screen and (min-width: 45em) { /* 720px */

    h1 {
        padding-left: .5rem;
    }

    header {
        min-height: 101px;
        padding: 0 0 0;
    } 

    header img {
        float: left;
        width: 20%;
        max-width: 90px;
    }

    .main-nav {
        flex-direction: column;
        width: 100%;
    }

    .logo-full {
        width: 100%;
        padding: 0;
        margin-left: 4rem;
    }

    .main-nav li {
        min-width: 20%;
    }

    .main-nav li:last-child {
        display: block;
    }

    .hide {
        display: block;
    }

    .row {
        float: left;
        width: 100%;
        padding: 0;
        flex-wrap: wrap;
    }

    .col-2 {
        width: 80%;
    }

    .col-3 {
        width: 70%;
    }

    .col-4 {
        width: 60%;
    }

    .col-5 {
        width: 50%;
    }

    .col-8 {
        width: 40%;
    }

    .col-10 {
        width: 20%;
    }

    .justify-2 {
        justify-content: space-around;
    }

    .Inpage-lnk {
        padding: .7rem;
    }

    .Inpage-lnk li {
        width: 25%;
    }

    /* ---- sitemap page ---- */
    .york-sign {
        display: block;
        height: 250px;
        margin-left: -4rem;
    }

    @supports (display: flex) {

        header {
            min-height: 101px;
        } 

        .row {
            display: flex;
            flex-direction: row;
            padding: 0 1.25rem;
        }

        .marg-l {
            margin-left: -2rem; 
        }

        .marg-r {
            margin-right: -2rem; 
        }

        .logo-full {
            margin-left: 0;
        }

        .main-nav {
            margin-right: 0;
        }

        .panel-default {
            margin-left: 0;
        } 
    }
}

@media only screen and (min-width: 48.5em) { /* 776px */

    .col-6 {
        width: 49%;
    }
    .col-7 {
        width: 45%;
    }
    .panel-default {
        margin-left: 2rem;
        float: left;
    }
    .panel-default:last-child {
        margin-left: 2rem;
    }
    .service-panel {
        float: left;
    }
    .panel-space:nth-child(2n+1) {
        margin-right: 1.5rem;
        margin-left: 1.5rem;
    }

    .panel-space:nth-child(2n) {
        margin-left: 1.5rem;
    }

    .service-panel {
        min-height: 310px;
    }

    @supports (display: flex) {

       .panel-default {
            margin-left: 0;
        }
        .panel-default:last-child {
            margin-left: auto;
            margin-right: auto;
        }
        .panel-space:nth-child(2n+1) {
            margin-right: 0;
        }
        .panel-space:nth-child(2n) {
            margin-left: 0;
        }
    }
}


@media only screen and (min-width: 60em) { /* 960px */

    h1 {
       padding-top: 1.2rem; 
    }

    header {
        margin: 0 auto;
    }

    .logo-full {
        width: 40%;
        max-width: 500px;
        padding: 0;
    }
    .main-nav {
        flex-direction: column;
        width: 50%;
    }
    .main-nav li {
        max-width: 19.9%;
    }

    .page-header {
        padding-top: 0;
    }
    .htag {
        padding-top: 0;
    }
    .service-panel {
        min-height: 250px;
    }
}

@media only screen and (min-width: 63em) { /* 1197px */

    .panel-default:last-child {
        margin-left: 2rem;
    }

    .york-sign {
        height: auto;
        margin-left: -5rem;
        padding: 2rem 0 0 0;
    }

    .wrapper {
        max-width: 1000px;
    }
    .col-9 {
        width: 30%;
    }

    @supports (display: flex) {

        .wrapper {
            width: 90%;
        }
        .panel-default:last-child {
            margin-left: 0;
            margin-right: 0;
        }
    }
}

@media only screen and (min-width: 65em) { /* 1235px */ 

    .main-nav {
        padding-right: 2.5rem;
    }
}