.imgclass3 {
    width: 72px;
    float: right;
    padding: 5px 7px 5px 0;
}

.lblclass {
    border: 5px solid #397a98;
    border-radius: 50%;
    padding: 30px;
}

.width600 {
    width: 600px;
}

.modalBackground {
    background-color: Black;
    filter: alpha(opacity=60);
    opacity: 0.6;
}

.modalPopup {
    background-color: #FFFFFF;
    width: 600px;
    border: 3px solid #0DA9D0;
    border-radius: 12px;
    padding: 0;
}

    .modalPopup .header {
        background-color: #2FBDF1;
        height: 30px;
        color: White;
        line-height: 30px;
        text-align: center;
        font-weight: bold;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }

    .modalPopup .body {
        min-height: 50px;
        line-height: 30px;
        text-align: center;
        font-weight: bold;
    }

    .modalPopup .footer {
        padding: 6px;
    }

    .modalPopup .yes, .modalPopup .no {
        height: 23px;
        color: White;
        line-height: 23px;
        text-align: center;
        font-weight: bold;
        cursor: pointer;
        border-radius: 4px;
    }

    .modalPopup .yes {
        background-color: #2FBDF1;
        border: 1px solid #0DA9D0;
    }

    .modalPopup .no {
        background-color: #9F9F9F;
        border: 1px solid #5C5C5C;
    }

h5 {
    color: #1e1e7b;
}

.containerbg {
    border-left: 1px solid #f4f4f4;
    border-right: 1px solid #f4f4f4;
    background: #fff;
}

.sectionbg {
    background: #f8f9fa;
}

.paddingleft5 {
    padding-left: 5px;
}

.margintop10 {
    margin-top: 10px;
}

.maindivnew {
    background-color: #fff;
    margin: auto;
    /* position: absolute; */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 85%;
}

.maindiv {
    background-color: #fff;
    margin: auto;
    /* position: absolute; */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 70%;
}

.red {
    color: red;
}

.margintop25 {
    margin-top: 23px;
}

.mainmenu {
    color: #154abf;
    font-size: 18px;
    font-weight: 600;
    font-style: italic;
    text-decoration: underline;
    float: right;
    position: inherit;
}


.header {
    min-height: 80px;
    border-bottom: 1px solid #1977b9;
    /*background: #cde1cd;*/
}

.floatright {
    text-align: right;
    line-height: 4;
}

.imgclass {
    width: 125px;
    float: right;
}

.imgclass2 {
    width: 190px;
    float: right;
    padding: 12px 0 0 0;
    height: 75px;
}



.imgclass1 {
    width: 285px;
}

body {
    padding: 0;
    margin: 0;
    background: #FFF;
}

    body a {
        transition: 0.5s all;
        -webkit-transition: 0.5s all;
        -moz-transition: 0.5s all;
        -o-transition: 0.5s all;
        -ms-transition: 0.5s all;
        text-decoration: none;
    }

        body a:hover {
            text-decoration: none;
            transition: 0.5s all;
            -webkit-transition: 0.5s all;
            -moz-transition: 0.5s all;
            -o-transition: 0.5s all;
            -ms-transition: 0.5s all;
        }

        body a:focus,
        a:hover {
            text-decoration: none;
        }

input[type="button"],
input[type="submit"] {
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

    input[type="button"]:hover,
    input[type="submit"]:hover {
        transition: 0.5s all;
        -webkit-transition: 0.5s all;
        -moz-transition: 0.5s all;
        -o-transition: 0.5s all;
        -ms-transition: 0.5s all;
    }

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    font-family: 'Lato', sans-serif;
}

p {
    margin: 0;
    padding: 0;
    font-size: 16px;
    letter-spacing: 0.4px;
    /*line-height: 1.9;*/
    /*color: #999;
    font-family: 'Roboto', sans-serif;*/
}

ul,
ol {
    margin: 0;
    padding: 0;
}

label {
    margin: 0;
}

a:focus,
a:hover {
    text-decoration: none;
    outline: none;
}

/* //Reset Code */
/* bottom-to-top */
#toTop {
    display: none;
    text-decoration: none;
    position: fixed;
    bottom: 24px;
    right: 3%;
    border-radius: 50%;
    overflow: hidden;
    z-index: 999;
    width: 35px;
    height: 35px;
    border: none;
    text-indent: 100%;
    background: url(../images/move-top.png) no-repeat 0px 0px;
}

#toTopHover {
    width: 32px;
    height: 32px;
    display: block;
    overflow: hidden;
    float: right;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
}

/* //bottom-to-top */
/* header */
/* logo */
a.navbar-brand {
    font-size: 36px;
    letter-spacing: 1px;
    color: #8e43e7;
    text-shadow: 2px 5px 3px rgba(0, 0, 0, 0.06);
}

.navbar-light .navbar-brand,
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus {
    color: #8e43e7;
}

/* //logo */
/* navigation */
.navbar-light .navbar-nav .nav-link {
    padding: 0;
    color: #4c4c4c;
    font-size: 16px;
    letter-spacing: 2px;
    font-weight: 500;
}

.navbar-expand-lg .navbar-nav .dropdown-menu {
    margin-top: 10px;
    left: -37px;
}

.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    color: #8e43e7;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #000;
}

/* fixed nav */
nav.fixed-navi ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    nav.fixed-navi ul li {
        float: left;
    }

nav.navbar.navbar-expand-lg.navbar-light.fixed-navi {
    box-shadow: 1px 3px 8px 3px rgba(8, 8, 8, 0.08);
}

/*helper*/
.isFixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    background: #fff;
    transition: all 1.5s ease;
}

/* //fixed nav */

/* search */
li.search {
    margin-left: 17em;
}

.search i {
    color: #8c8b8b;
    font-size: 20px;
}

a.reqe-button {
    background: #8e43e7;
    color: #fff;
    padding: 15px 18px;
    border-radius: 5px;
    font-size: 15px;
    letter-spacing: 2px;
}

/* //search */
/* //navigation */
/* //header */
/* banner */

.banner-img {
    background: url("../images/banner3.jpg");
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    min-height: 44vw;
    border-radius: 203px 0 0 400px;
}

.style-banner {
    padding: 12em 6em 0 6em;
}

    .style-banner h1 {
        font-size: 48px;
        line-height: 1.3;
        position: relative;
    }

        .style-banner h1:after,
        h2.middle-title-w3:after {
            content: "";
            background: #8e43e7;
            width: 100px;
            height: 2px;
            position: absolute;
            bottom: -25px;
            left: 0;
        }

        .style-banner h1 span {
            color: #8e43e7;
        }

.button-style {
    padding: 12px 25px;
    border: none;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid #8e43e7;
    background: #8e43e7;
}

    .button-style:hover {
        opacity: .9;
        color: #fff;
    }

/* //banner text */
h3.title-w3 {
    font-size: 38px;
    position: relative;
    letter-spacing: 1px;
}

    h3.title-w3:before {
        content: "";
        background: #8e43e7;
        width: 100px;
        height: 2px;
        position: absolute;
        bottom: -18px;
        left: 503px;
        right: 0;
    }

ul.list-unstyled.brands li {
    display: inline-block;
    width: 19%;
}

    ul.list-unstyled.brands li i {
        color: #e8e8e8;
        font-size: 70px;
        transition: 0.5s all;
        -webkit-transition: 0.5s all;
        -moz-transition: 0.5s all;
        -o-transition: 0.5s all;
        -ms-transition: 0.5s all;
    }

        ul.list-unstyled.brands li i.active,
        ul.list-unstyled.brands li i:hover {
            color: #8e43e7;
            transition: 0.5s all;
            -webkit-transition: 0.5s all;
            -moz-transition: 0.5s all;
            -o-transition: 0.5s all;
            -ms-transition: 0.5s all;
        }

/* //brands */
/* services */
.about-in .card {
    padding: 2.5em .5em;
    border: 1px solid transparent;
    -webkit-transition: box-shadow 0.3s ease-in-out;
    -moz-transition: box-shadow 0.3s ease-in-out;
    -ms-transition: box-shadow 0.3s ease-in-out;
    -o-transition: box-shadow 0.3s ease-in-out;
    transition: box-shadow 0.3s ease-in-out;
    background: transparent;
}

    .about-in .card:hover {
        background: #fff;
        -webkit-box-shadow: 0px 0px 18.69px 2.31px rgba(204, 204, 223, 0.5);
        -moz-box-shadow: 0px 0px 18.69px 2.31px rgba(204, 204, 223, 0.5);
        box-shadow: 0px 0px 18.69px 2.31px rgba(33, 33, 181, 0.5);
        border-radius: 15px;
    }




    .about-in .card.active {
        background: #fff;
        /*-webkit-box-shadow: 0px 0px 18.69px 2.31px rgba(204, 204, 223, 0.5);
        -moz-box-shadow: 0px 0px 18.69px 2.31px rgba(204, 204, 223, 0.5);
        box-shadow: 0px 0px 18.69px 2.31px rgba(204, 204, 223, 0.5);*/
        border-radius: 15px;
        border: 1px solid #f7f7f7;
    }

    .about-in .card i {
        font-size: 34px;
        color: #fff;
        width: 75px;
        height: 75px;
        background: #8e43e7;
        border-radius: 50%;
        line-height: 2.2;
    }

    .about-in .card h5.card-title {
        font-size: 20px;
        letter-spacing: 1px;
        font-weight: 600;
    }

p.title-para {
    max-width: 800px;
}

/* //services */
/* middle section */

.right-side-img-w3 {
    background: url(../images/bg.jpg) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    min-height: 40vw;
    float: right;
    width: 55%;
    border-radius: 250px 0 0 250px;
}

.left-build-wthree {
    float: left;
    width: 40%;
    padding: 3em 3.5em;
}

h2.middle-title-w3 {
    letter-spacing: 1px;
    font-size: 35px;
    position: relative;
    line-height: 1.4;
}

.left-build-wthree h6 {
    font-size: 20px;
    letter-spacing: 1px;
    color: #525252;
    line-height: 1.6;
}

ul.list-beach li p {
    font-size: 15px;
}

.left-build-wthree ul li i {
    color: #8e43e7;
    font-size: 22px;
}

/* //middle section */
.some-another {
    background: url(../images/bg2.jpg) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    min-height: 42vw;
    position: relative;
    border-radius: 0 230px 230px 0;
    margin-right: 6em;
    margin-bottom: 15em;
}

.grid-single {
    position: absolute;
    bottom: -40%;
    max-width: 700px;
    margin: 0 auto;
    right: -101px;
    left: 0;
    box-shadow: 0px 0px 15.69px 3.31px rgba(204, 204, 223, 0.44);
}

h3.title-w3-2:before {
    left: 254px;
}

.grid-single p {
    font-size: 18px;
}

/* // */
.steps-reach-w3l span {
    color: #fff;
    font-size: 28px;
    width: 110px;
    height: 110px;
    border: 2px solid #fff;
    line-height: 3.8;
    border-radius: 50%;
}

    .steps-reach-w3l span.fa.fa-check-square-o {
        background: #ff4f81;
    }

    .steps-reach-w3l span.fa.fa-volume-control-phone {
        background: #3b9fec;
    }

    .steps-reach-w3l span.fa.fa-calendar {
        background: #2dde98;
    }

    .steps-reach-w3l span.fa.fa-smile-o {
        background: #ffc168;
    }

.steps-reach-w3l p {
    color: #000;
    font-size: 17px;
}

.steps-reach-w3l {
    position: relative;
}

.style-agile-border {
    position: absolute;
    top: 43px;
    right: -49px;
}


h3.title-w3-3 {
    max-width: 500px;
    margin: 0 auto;
}

    h3.title-w3-3:before {
        left: 198px;
    }

/* testimonials */
.testimonials {
    background: url(../images/bg3.jpg) no-repeat center fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
}

.w3_testimonials_grid h5 {
    color: #8e43e7;
    letter-spacing: 1px;
    font-size: 23px;
}

.w3_testimonials_grid h4 {
    max-width: 700px;
    font-size: 17px;
    margin: 0 auto;
    letter-spacing: 1px;
    line-height: 1.4;
    color: #d4d4d4 !important;
}

.carousel-indicators li {
    width: 12px;
    height: 12px;
    background-color: #8a8a8a;
    border-radius: 50%;
    cursor: pointer;
    margin: 0 5px;
}

.carousel-indicators .active {
    background-color: #8e43e7;
}

.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: -12px;
}

/* //testimonials */
/* blog */
.blogs-bottom {
    box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.13);
}

.blog-w3 {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}

    .blog-w3:hover {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
    }

.blogs-bottom.p-4 h3 {
    font-size: 18px;
    color: #525050;
}

.blogs-bottom h4 {
    font-size: 23px;
    line-height: 1.4;
    letter-spacing: 1px;
}

.blogs-bottom i {
    color: #8e43e7;
}

.blogs-bottom a {
    color: #999;
    letter-spacing: 1px;
    font-size: 15px;
}

    .blogs-bottom a:Hover {
        color: #000;
    }

/* //blog */

/* footer */
/* copyright */
p.copy-right-grids {
    font-size: 15px;
    letter-spacing: 2px;
}

    p.copy-right-grids a {
        color: #8e43e7;
    }

/* //copyright */
/* social-icons */
.w3social-icons ul li {
    display: inline-block;
}

    .w3social-icons ul li a {
        color: #000;
        font-size: 16px;
        display: block;
        -webkit-box-shadow: 0px 0px 1px 0px #fff;
        -moz-box-shadow: 0px 0px 1px 0px #fff;
        box-shadow: 0px 0px 1px 0px rgba(19, 18, 18, 0.33);
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 2.5;
    }

        .w3social-icons ul li a:hover {
            color: #8e43e7;
            -webkit-box-shadow: 0px 0px 13px 2px #8e43e7;
            -moz-box-shadow: 0px 0px 13px 2px #8e43e7;
            box-shadow: 0px 0px 13px 2px #8e43e7;
        }

/* //social-icons */
/* footer nav */
ul.footer-nav-wthree li {
    display: inline-block;
}

    ul.footer-nav-wthree li a {
        color: #000;
        letter-spacing: 1px;
        font-size: 16px;
    }

/* //footer nav */
/* //footer */

/* inner pages */
.banner-w3ls-2 {
    background: url(../images/bg2.jpg) no-repeat center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    min-height: 300px;
}

/* page details */
.breadcrumb li a {
    color: #8e43e7;
    font-weight: bold;
}

.breadcrumb li {
    letter-spacing: 1px;
    color: #000;
}

/* //page details */

/* about page */
h1.tittle {
    text-shadow: 2px 2px 2px rgba(41, 41, 41, 0.15);
    font-size: 3em;
    color: #333338;
}

h2.sub-tittle {
    font-size: 16px;
    color: #8e43e7;
    letter-spacing: 1px;
}

/* team */
.box16 {
    text-align: center;
    color: #fff;
    position: relative;
}

    .box16 .box-content,
    .box16:after {
        width: 100%;
        position: absolute;
        left: 0;
    }

    .box16:after {
        content: "";
        height: 100%;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .08) 69%, rgba(0, 0, 0, .76) 100%);
        top: 0;
        transition: all .5s ease 0s;
    }

    .box16 .post,
    .box16 .title {
        transform: translateY(145px);
        transition: all .4s cubic-bezier(.13, .62, .81, .91) 0s;
    }

    .box16:hover:after {
        background: linear-gradient(to bottom, rgba(0, 0, 0, .01) 0, rgba(0, 0, 0, .09) 11%, rgba(0, 0, 0, .12) 13%, rgba(0, 0, 0, .19) 20%, rgba(0, 0, 0, .29) 28%, rgba(0, 0, 0, .29) 29%, rgba(0, 0, 0, .42) 38%, rgba(0, 0, 0, .46) 43%, rgba(0, 0, 0, .53) 47%, rgba(0, 0, 0, .75) 69%, rgba(0, 0, 0, .87) 84%, rgba(0, 0, 0, .98) 99%, rgba(0, 0, 0, .94) 100%);
    }

    .box16 img {
        width: 100%;
        height: auto;
    }

    .box16 .box-content {
        padding: 20px;
        margin-bottom: 20px;
        bottom: 0;
        z-index: 1;
    }

    .box16 .title {
        font-size: 22px;
        font-weight: 700;
        margin: 0 0 10px;
    }

    .box16 .post {
        display: block;
        padding: 8px 0;
        font-size: 15px;
    }

    .box16 .social li a,
    .box17 .icon li a {
        border-radius: 50%;
        font-size: 20px;
        color: #fff;
    }

    .box16:hover .post,
    .box16:hover .title {
        transform: translateY(0);
    }

    .box16 .social {
        list-style: none;
        padding: 0 0 5px;
        margin: 40px 0 25px;
        opacity: 0;
        position: relative;
        transform: perspective(500px) rotateX(-90deg) rotateY(0) rotateZ(0);
        transition: all .6s cubic-bezier(0, 0, .58, 1) 0s;
    }

    .box16:hover .social {
        opacity: 1;
        transform: perspective(500px) rotateX(0) rotateY(0) rotateZ(0);
    }

    .box16 .social:before {
        content: "";
        width: 50px;
        height: 2px;
        background: #fff;
        margin: 0 auto;
        position: absolute;
        top: -23px;
        left: 0;
        right: 0;
    }

    .box16 .social li {
        display: inline-block;
    }

        .box16 .social li a {
            display: block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            background: #8e43e7;
            margin-right: 10px;
            transition: 0.5s all;
            -webkit-transition: 0.5s all;
            -moz-transition: 0.5s all;
            -o-transition: 0.5s all;
            -ms-transition: 0.5s all;
        }

.box17 .icon li,
.box17 .icon li a {
    display: inline-block;
}

.box16 .social li a:hover {
    background: #fff;
    color: #8e43e7;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

.box16 .social li:last-child a {
    margin-right: 0;
}

@media only screen and (max-width:990px) {
    .box16 {
        margin-bottom: 30px;
    }
}

/* //team */
/* //about page */

/* gallery page */
.agile_gallery_grids {
    padding: 0 2em;
}

.demo > li {
    list-style-type: none;
    margin: 6px;
    display: inline-block;
    max-width: 355px;
}

/*jquery.picEyes*/
.picshade {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100% !important;
    background-color: #000;
    opacity: 0.91;
    filter: alpha(opacity=91);
    z-index: 99;
    display: none;
}

.pictures_eyes_close {
    position: fixed;
    top: 30px;
    right: 30px;
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(../images/close.png) no-repeat;
    z-index: 100;
    display: none;
}

.pictures_eyes {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 199;
    display: none;
}

.pictures_eyes_in {
    position: relative;
    text-align: center;
}

    .pictures_eyes_in img {
        max-height: 500px;
        max-width: 640px;
    }

    .pictures_eyes_in .prev,
    .pictures_eyes_in .next {
        position: absolute;
        top: 50%;
        width: 51px;
        height: 51px;
        cursor: pointer;
    }

    .pictures_eyes_in .prev {
        left: 35px;
        background: url(../images/left1.png) no-repeat;
    }

    .pictures_eyes_in .next {
        right: 35px;
        background: url(../images/right1.png) no-repeat;
    }

.pictures_eyes_indicators {
    position: fixed;
    left: 0;
    bottom: 15px;
    width: 100%;
    text-align: center;
    z-index: 299;
}

    .pictures_eyes_indicators a {
        display: inline-block;
        width: 50px;
        height: 50px;
        margin: 6px 3px 0 3px;
        border: 1px solid #ddd;
        border-radius: 10px;
        box-shadow: 0 0 2px #000;
        filter: alpha(opacity=50);
        opacity: 0.5;
        overflow: hidden;
    }

    .pictures_eyes_indicators img {
        height: 50px;
    }

    .pictures_eyes_indicators .current {
        filter: alpha(opacity=100);
        opacity: 1;
    }

.gallery-grid1 {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

    .gallery-grid1 .p-mask,
    .row .product .vm-product-media-container .p-mask {
        opacity: 0;
        visibility: hidden;
        background: rgba(25, 24, 24, 0.8);
        bottom: 0%;
        position: absolute;
        padding: 1em 1em;
        width: 100%;
        -webkit-transform: translate3d(0px, 100%, 0px);
        -moz-transform: translate3d(0px, 100%, 0px);
        -ms-transform: translate3d(0px, 100%, 0px);
        -o-transform: translate3d(0px, 100%, 0px);
        transform: translate3d(0px, 100%, 0px);
        -webkit-transition: all .5s ease 0s;
        -moz-transition: all .5s ease 0s;
        transition: all .5s ease 0s;
        text-align: center;
        border-bottom: 5px solid #8e43e7;
    }

        .gallery-grid1 .p-mask .p-desc {
            color: #a3a3a3;
            position: relative;
            display: block;
            margin-bottom: 10px;
            padding-bottom: 10px;
            font-size: 1em;
        }

    .gallery-grid1:hover .p-mask,
    .row .product:hover .p-mask {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translate3d(0px, 0px, 0px);
        -moz-transform: translate3d(0px, 0px, 0px);
        -ms-transform: translate3d(0px, 0px, 0px);
        -o-transform: translate3d(0px, 0px, 0px);
        transform: translate3d(0px, 0px, 0px);
    }

.p-mask h4, .p-mask h2, .p-mask h1 {
    color: #fff;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 1px;
}

.p-mask p {
    color: #f5f5f5;
    font-size: 13px;
    margin-top: 5px;
}

.pictures_eyes_in {
    position: relative;
    text-align: center;
}

    .pictures_eyes_in img {
        width: 100%;
    }

/* //gallery page */

/* contact page */
/* contact form */
.contact-top1 h1 {
    font-size: 28px;
    letter-spacing: 1px;
}

form.contact-wthree .form-control {
    border-radius: 0;
    background: #eee;
    border: none;
    font-size: 15px;
    letter-spacing: 1px;
}

form.contact-wthree label {
    width: 45px;
    height: 45px;
    text-align: center;
    background: #8e43e7;
    line-height: 45px;
    color: #eee;
    margin-bottom: 0;
}

.contact-top1 button {
    background: #8e43e7;
    letter-spacing: 1px;
    border-radius: 0px;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

    .contact-top1 button:hover {
        opacity: .8;
        transition: 0.5s all;
        -webkit-transition: 0.5s all;
        -moz-transition: 0.5s all;
        -o-transition: 0.5s all;
        -ms-transition: 0.5s all;
    }
/* //contact form */
/* contact details */
.contact-right-w3ls span {
    background: #fff;
    width: 40px;
    height: 40px;
    line-height: 40px;
}

.fv3-contact span {
    color: #fff;
    background: #8e43e7;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 50%;
}

.fv3-contact p, .fv3-contact h2 {
    display: inline-block;
    vertical-align: middle;
    color: #333;
}

.fv3-contact h2 {
    font-size: 16px;
    letter-spacing: 1px;
}

/* //contact details */
.map iframe {
    width: 100%;
    border: none;
    height: 400px;
    ;
}

/* //contact page */

/* responsive */

@media(max-width: 1680px) {
}

@media(max-width: 1600px) {
}

@media(max-width: 1440px) {
    .style-banner h1 {
        font-size: 44px;
    }

    .style-banner {
        padding: 2em 5em 0 5em;
    }

    .banner-img {
        border-radius: 160px 0 0 185px;
    }

    .left-build-wthree {
        width: 45%;
    }
}

@media(max-width: 1366px) {
    li.search {
        margin-left: 12em;
    }

    .style-banner h1 {
        font-size: 36px;
    }

    .left-build-wthree h6 {
        font-size: 18px;
    }

    h2.middle-title-w3 {
        font-size: 32px;
    }

    ul.list-beach li p {
        font-size: 14px;
    }

    .some-another {
        margin-bottom: 13em;
    }
}

@media(max-width: 1280px) {
    li.search {
        margin-left: 9em;
    }

    .style-banner {
        padding: 6.5em 3em 0 4em;
    }

        .style-banner h1 {
            font-size: 40px;
        }

    p {
        font-size: 15px;
    }

    .banner-img {
        border-radius: 150px 0 0 300px;
    }

    ul.list-unstyled.brands li i {
        font-size: 60px;
    }

    .right-side-img-w3 {
        min-height: 45vw;
    }

    .grid-single p {
        font-size: 16px;
    }

    .some-another {
        margin-bottom: 12em;
    }

    .banner-w3ls-2 {
        min-height: 220px;
    }

    h1.tittle {
        font-size: 2.8em;
    }
}

@media(max-width: 1080px) {
    .navbar-light .navbar-nav .nav-link {
        font-size: 15px;
    }

    a.navbar-brand {
        font-size: 34px;
    }

    a.reqe-button {
        font-size: 14px;
    }

    .style-banner {
        padding: 5em 2em 0 2em;
    }

        .style-banner h1 {
            font-size: 38px;
        }

    .banner-img {
        border-radius: 130px 0 0 250px;
    }

    h3.title-w3:before {
        left: 410px;
    }

    .about-in .card {
        padding: 1em .5em;
    }

    .left-build-wthree {
        width: 100%;
        float: none;
        padding: 0 3.5em;
    }

    .right-side-img-w3 {
        min-height: 520px;
        width: 90%;
        border-radius: 200px 0 0 200px;
        margin-top: 2em;
    }

    h3.title-w3-2:before {
        left: 254px;
    }

    .some-another {
        min-height: 44vw;
        margin-right: 2em;
        border-radius: 0 200px 200px 0;
    }

    .grid-single {
        right: -61px;
    }

    h3.title-w3-3:before {
        left: 198px;
    }

    .blogs-bottom h4 {
        font-size: 19px;
    }

    .blogs-bottom.p-4 h3 {
        font-size: 16px;
    }

    .blogs-bottom a {
        font-size: 14px;
    }

    h1.tittle {
        font-size: 2.5em;
    }

    .demo > li {
        max-width: 295px;
    }

    .map iframe {
        height: 320px;
    }

    .contact-bottom {
        padding: 0;
    }
}

@media(max-width: 1050px) {
}

@media(max-width: 1024px) {
    .style-banner h1 {
        font-size: 36px;
    }
}

@media(max-width: 991px) {
    li.search {
        margin-left: 0;
    }

    .style-banner {
        padding: 5em 5em 4em;
    }

    .banner-img {
        border-radius: 154px 0 0 300px;
        min-height: 56vw;
        margin-left: 12em;
    }

    .style-banner {
        padding: 4em 5em 2em;
    }

    h3.title-w3:before {
        left: 296px;
    }

    ul.list-unstyled.brands li i {
        font-size: 52px;
    }

    .blogs-bottom h4 {
        font-size: 20px;
    }

    .about-in .card {
        max-width: 500px;
        margin: 0 auto;
    }

    p.title-para {
        font-size: 13px;
        margin-top: 3em;
    }

    h3.title-w3-3, h3.title-w3-2 {
        font-size: 34px;
    }

        h3.title-w3-2:before {
            left: 248px;
        }

        h3.title-w3-3:before {
            left: 198px;
        }

    .style-agile-border img {
        width: 60%;
    }

    .steps-reach-w3l span {
        width: 100px;
        height: 100px;
        line-height: 3.5;
    }

    .steps-reach-w3l p {
        font-size: 15px;
    }

    ul.footer-nav-wthree li a {
        font-size: 15px;
    }

    p.copy-right-grids {
        font-size: 14px;
    }

    .box16 {
        max-width: 400px;
        margin: 0 auto;
    }

    .demo > li {
        max-width: 215px;
    }
}

@media(max-width: 900px) {
    .right-side-img-w3 {
        min-height: 470px;
    }

    .some-another {
        min-height: 480px;
    }

    .grid-single {
        right: -24px;
    }
}

@media(max-width: 800px) {
    .style-banner h1 {
        font-size: 34px;
    }

    .button-style {
        font-size: 13px;
    }

    .banner-img {
        border-radius: 140px 0 0 240px;
        min-height: 56vw;
        margin-left: 10em;
    }

    .right-side-img-w3 {
        min-height: 410px;
        border-radius: 150px 0 0 150px;
    }

    .banner-w3ls-2 {
        min-height: 200px;
    }
}

@media(max-width: 768px) {
    .some-another {
        margin-right: 1em;
    }

    .w3_testimonials_grid h4 {
        font-size: 15px;
    }
}

@media(max-width: 736px) {
    .style-banner {
        padding: 4em 4em 2em;
    }

    h3.title-w3 {
        font-size: 36px;
    }

        h3.title-w3:before {
            left: 202px;
        }

    ul.list-unstyled.brands li i {
        font-size: 48px;
    }

    h2.middle-title-w3 {
        font-size: 30px;
    }

    .grid-single {
        right: -17px;
        max-width: 500px;
    }

        .grid-single p {
            font-size: 14px;
        }

    .some-another {
        min-height: 420px;
        border-radius: 0 120px 120px 0;
    }

    h3.title-w3-2:before {
        left: 149px;
    }

    .style-agile-border {
        display: none;
    }

    h3.title-w3-3, h3.title-w3-2 {
        font-size: 32px;
    }

    h1.tittle {
        font-size: 2em;
    }

    .demo > li {
        max-width: 241px;
    }
}

@media(max-width: 667px) {


    .imgclass {
        width: 150px !important;
    }

    .imgclass1 {
        width: 194px !important;
    }

    .imgclass2 {
        width: 82px !important;
    }

    .style-banner {
        padding: 4em 3em 2em;
    }

    .banner-img {
        border-radius: 125px 0 0 240px;
        min-height: 62vw;
        margin-left: 7em;
    }

    .left-build-wthree {
        padding: 0 2em;
    }

    h2.middle-title-w3 {
        font-size: 28px;
    }

    .right-side-img-w3 {
        min-height: 360px;
        border-radius: 120px 0 0 120px;
        width: 94%;
    }

    .w3_testimonials_grid h5 {
        font-size: 21px;
    }
}

@media(max-width: 640px) {
}

@media(max-width: 600px) {
    .style-banner h1 {
        font-size: 32px;
    }

    p {
        font-size: 14px;
    }

    .banner-img {
        border-radius: 100px 0 0 240px;
    }

    .blog-w3:hover {
        transform: scale(1);
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
    }

    .banner-w3ls-2 {
        min-height: 160px;
    }
}

@media(max-width: 568px) {
    a.navbar-brand {
        font-size: 32px;
    }

    .style-banner {
        padding: 3em 2em 2em;
    }

    .banner-img {
        border-radius: 100px 0 0 220px;
        min-height: 64vw;
        margin-left: 4em;
    }

    .right-side-img-w3 {
        min-height: 320px;
    }
}

@media(max-width: 480px) {
    .style-banner h1 {
        font-size: 30px;
    }

    h3.title-w3 {
        font-size: 32px;
    }

        h3.title-w3:before {
            left: 167px;
        }

    ul.list-unstyled.brands li i {
        font-size: 42px;
    }

    h2.middle-title-w3 {
        font-size: 26px;
    }

    .left-build-wthree h6 {
        font-size: 16px;
    }

    .grid-single {
        max-width: 400px;
    }

    .some-another {
        min-height: 350px;
    }

    .grid-single {
        bottom: -60%;
    }

    h3.title-w3-3, h3.title-w3-2 {
        font-size: 28px;
    }

    .grid-single {
        bottom: -52%;
    }

    h1.tittle {
        font-size: 1.8em;
    }

    .demo > li {
        max-width: 422px;
    }

    .map iframe {
        height: 280px;
    }

    .fv3-contact h2 {
        font-size: 15px;
    }
}

@media(max-width: 440px) {
    .banner-img {
        border-radius: 85px 0 0 170px;
        min-height: 70vw;
        margin-left: 2em;
    }

    h3.title-w3:before {
        left: 160px;
        width: 80px;
    }

    .w3_testimonials_grid h4 {
        font-size: 14px;
    }

    p.copy-right-grids {
        font-size: 13px;
    }
}

@media(max-width: 414px) {
    .style-banner h1 {
        font-size: 28px;
    }

    p {
        font-size: 13px;
    }

    .navbar {
        padding: .2rem 1rem;
    }

    .style-banner {
        padding: 2em 2em 2em;
    }

    h3.title-w3 {
        font-size: 30px;
    }

        h3.title-w3:before {
            left: 146px;
        }

    .right-side-img-w3 {
        min-height: 300px;
        border-radius: 100px 0 0 100px;
        width: 96%;
    }

    .grid-single {
        max-width: 340px;
    }

        .grid-single p {
            font-size: 13px;
        }

    h3.title-w3-3, h3.title-w3-2 {
        font-size: 24px;
    }

    .banner-w3ls-2 {
        min-height: 120px;
    }
}

@media(max-width: 384px) {
    .style-banner h1 {
        font-size: 26px;
    }

    .button-style {
        font-size: 12px;
    }

    .navbar-light .navbar-nav .nav-link {
        font-size: 14px;
        letter-spacing: 1px;
    }

    h3.title-w3:before {
        left: 128px;
    }

    ul.list-unstyled.brands li i {
        font-size: 34px;
    }

    h2.middle-title-w3 {
        font-size: 24px;
    }

    ul.footer-nav-wthree li a {
        font-size: 14px;
    }

    h1.tittle {
        font-size: 1.5em;
    }

    h2.sub-tittle {
        font-size: 14px;
    }

    .fv3-contact h2 {
        font-size: 13px;
    }
}

@media(max-width: 375px) {
    .map iframe {
        height: 250px;
    }

    .fv3-contact h2 {
        font-size: 12px;
        letter-spacing: 0px;
    }

    .contact-top1 button {
        font-size: 15px;
    }
}

@media(max-width: 320px) {
    .banner-img {
        border-radius: 71px 0 0 139px;
    }

    .style-banner h1 {
        font-size: 25px;
    }

    a.navbar-brand {
        font-size: 30px;
    }

    h3.title-w3 {
        font-size: 28px;
    }

        h3.title-w3:before {
            left: 104px;
            width: 70px;
        }

    ul.list-unstyled.brands li {
        width: 18%;
    }

        ul.list-unstyled.brands li i {
            font-size: 32px;
        }

    p.title-para {
        font-size: 12px;
        margin-top: 2.5em;
    }

    h2.middle-title-w3 {
        font-size: 22px;
    }

    .left-build-wthree h6 {
        font-size: 14px;
    }

    ul.list-beach li p {
        font-size: 12px;
    }

    .right-side-img-w3 {
        min-height: 230px;
        border-radius: 80px 0 0 80px;
    }

    .grid-single {
        max-width: 280px;
    }

    h3.title-w3-3, h3.title-w3-2 {
        font-size: 22px;
    }

    .w3_testimonials_grid h5 {
        font-size: 17px;
    }

    .w3_testimonials_grid h4 {
        font-size: 13px;
    }

    ul.footer-nav-wthree li a {
        font-size: 13px;
    }

    .contact-top1 button {
        width: 36% !important;
    }
}

/* //responsive */

.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.panel-body {
    padding: 15px;
}

.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

    .panel-heading > .dropdown .dropdown-toggle {
        color: inherit;
    }

.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
}

    .panel-title > a,
    .panel-title > small,
    .panel-title > .small,
    .panel-title > small > a,
    .panel-title > .small > a {
        color: inherit;
    }

.panel-footer {
    padding: 10px 15px;
    background-color: #fcf8e3;
    border-top: 1px solid #ddd;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

.panel > .list-group,
.panel > .panel-collapse > .list-group {
    margin-bottom: 0;
}

    .panel > .list-group .list-group-item,
    .panel > .panel-collapse > .list-group .list-group-item {
        border-width: 1px 0;
        border-radius: 0;
    }

    .panel > .list-group:first-child .list-group-item:first-child,
    .panel > .panel-collapse > .list-group:first-child .list-group-item:first-child {
        border-top: 0;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }

    .panel > .list-group:last-child .list-group-item:last-child,
    .panel > .panel-collapse > .list-group:last-child .list-group-item:last-child {
        border-bottom: 0;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
    }

.panel-heading + .list-group .list-group-item:first-child {
    border-top-width: 0;
}

.list-group + .panel-footer {
    border-top-width: 0;
}

.panel > .table,
.panel > .table-responsive > .table,
.panel > .panel-collapse > .table {
    margin-bottom: 0;
}

    .panel > .table caption,
    .panel > .table-responsive > .table caption,
    .panel > .panel-collapse > .table caption {
        padding-right: 15px;
        padding-left: 15px;
    }

    .panel > .table:first-child,
    .panel > .table-responsive:first-child > .table:first-child {
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }

        .panel > .table:first-child > thead:first-child > tr:first-child,
        .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child,
        .panel > .table:first-child > tbody:first-child > tr:first-child,
        .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child {
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
        }

            .panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
            .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
            .panel > .table:first-child > tbody:first-child > tr:first-child td:first-child,
            .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child,
            .panel > .table:first-child > thead:first-child > tr:first-child th:first-child,
            .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
            .panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
            .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
                border-top-left-radius: 3px;
            }

            .panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
            .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
            .panel > .table:first-child > tbody:first-child > tr:first-child td:last-child,
            .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child,
            .panel > .table:first-child > thead:first-child > tr:first-child th:last-child,
            .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
            .panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
            .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
                border-top-right-radius: 3px;
            }

    .panel > .table:last-child,
    .panel > .table-responsive:last-child > .table:last-child {
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
    }

        .panel > .table:last-child > tbody:last-child > tr:last-child,
        .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child,
        .panel > .table:last-child > tfoot:last-child > tr:last-child,
        .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child {
            border-bottom-right-radius: 3px;
            border-bottom-left-radius: 3px;
        }

            .panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
            .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
            .panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
            .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
            .panel > .table:last-child > tbody:last-child > tr:last-child th:first-child,
            .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
            .panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
            .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
                border-bottom-left-radius: 3px;
            }

            .panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
            .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
            .panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
            .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
            .panel > .table:last-child > tbody:last-child > tr:last-child th:last-child,
            .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
            .panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
            .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
                border-bottom-right-radius: 3px;
            }

    .panel > .panel-body + .table,
    .panel > .panel-body + .table-responsive,
    .panel > .table + .panel-body,
    .panel > .table-responsive + .panel-body {
        border-top: 1px solid #ddd;
    }

    .panel > .table > tbody:first-child > tr:first-child th,
    .panel > .table > tbody:first-child > tr:first-child td {
        border-top: 0;
    }

.panel > .table-bordered,
.panel > .table-responsive > .table-bordered {
    border: 0;
}

    .panel > .table-bordered > thead > tr > th:first-child,
    .panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
    .panel > .table-bordered > tbody > tr > th:first-child,
    .panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
    .panel > .table-bordered > tfoot > tr > th:first-child,
    .panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
    .panel > .table-bordered > thead > tr > td:first-child,
    .panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
    .panel > .table-bordered > tbody > tr > td:first-child,
    .panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
    .panel > .table-bordered > tfoot > tr > td:first-child,
    .panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
        border-left: 0;
    }

    .panel > .table-bordered > thead > tr > th:last-child,
    .panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
    .panel > .table-bordered > tbody > tr > th:last-child,
    .panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
    .panel > .table-bordered > tfoot > tr > th:last-child,
    .panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
    .panel > .table-bordered > thead > tr > td:last-child,
    .panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
    .panel > .table-bordered > tbody > tr > td:last-child,
    .panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
    .panel > .table-bordered > tfoot > tr > td:last-child,
    .panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
        border-right: 0;
    }

    .panel > .table-bordered > thead > tr:first-child > td,
    .panel > .table-responsive > .table-bordered > thead > tr:first-child > td,
    .panel > .table-bordered > tbody > tr:first-child > td,
    .panel > .table-responsive > .table-bordered > tbody > tr:first-child > td,
    .panel > .table-bordered > thead > tr:first-child > th,
    .panel > .table-responsive > .table-bordered > thead > tr:first-child > th,
    .panel > .table-bordered > tbody > tr:first-child > th,
    .panel > .table-responsive > .table-bordered > tbody > tr:first-child > th {
        border-bottom: 0;
    }

    .panel > .table-bordered > tbody > tr:last-child > td,
    .panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,
    .panel > .table-bordered > tfoot > tr:last-child > td,
    .panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td,
    .panel > .table-bordered > tbody > tr:last-child > th,
    .panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,
    .panel > .table-bordered > tfoot > tr:last-child > th,
    .panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th {
        border-bottom: 0;
    }

.panel > .table-responsive {
    margin-bottom: 0;
    border: 0;
}

.panel-group {
    margin-bottom: 20px;
}

    .panel-group .panel {
        margin-bottom: 0;
        border-radius: 4px;
    }

        .panel-group .panel + .panel {
            margin-top: 5px;
        }

    .panel-group .panel-heading {
        border-bottom: 0;
    }

        .panel-group .panel-heading + .panel-collapse > .panel-body,
        .panel-group .panel-heading + .panel-collapse > .list-group {
            border-top: 1px solid #ddd;
        }

    .panel-group .panel-footer {
        border-top: 0;
    }

        .panel-group .panel-footer + .panel-collapse .panel-body {
            border-bottom: 1px solid #ddd;
        }

.panel-default {
    border-color: #ddd;
}

    .panel-default > .panel-heading {
        color: #333;
        background-color: #f5f5f5;
        border-color: #ddd;
    }

        .panel-default > .panel-heading + .panel-collapse > .panel-body {
            border-top-color: #ddd;
        }

        .panel-default > .panel-heading .badge {
            color: #f5f5f5;
            background-color: #333;
        }

    .panel-default > .panel-footer + .panel-collapse > .panel-body {
        border-bottom-color: #ddd;
    }

.panel-primary {
    border-color: #337ab7;
}

    .panel-primary > .panel-heading {
        color: #fff;
        background-color: #337ab7;
        border-color: #337ab7;
    }

        .panel-primary > .panel-heading + .panel-collapse > .panel-body {
            border-top-color: #337ab7;
        }

        .panel-primary > .panel-heading .badge {
            color: #337ab7;
            background-color: #fff;
        }

    .panel-primary > .panel-footer + .panel-collapse > .panel-body {
        border-bottom-color: #337ab7;
    }

.panel-success {
    border-color: #d6e9c6;
}

    .panel-success > .panel-heading {
        color: #3c763d;
        background-color: #dff0d8;
        border-color: #d6e9c6;
    }

        .panel-success > .panel-heading + .panel-collapse > .panel-body {
            border-top-color: #d6e9c6;
        }

        .panel-success > .panel-heading .badge {
            color: #dff0d8;
            background-color: #3c763d;
        }

    .panel-success > .panel-footer + .panel-collapse > .panel-body {
        border-bottom-color: #d6e9c6;
    }

.panel-info {
    border-color: #bce8f1;
}

    .panel-info > .panel-heading {
        color: #31708f;
        background-color: #d9edf7;
        border-color: #bce8f1;
    }

        .panel-info > .panel-heading + .panel-collapse > .panel-body {
            border-top-color: #bce8f1;
        }

        .panel-info > .panel-heading .badge {
            color: #d9edf7;
            background-color: #31708f;
        }

    .panel-info > .panel-footer + .panel-collapse > .panel-body {
        border-bottom-color: #bce8f1;
    }

.panel-warning {
    border-color: #faebcc;
}

    .panel-warning > .panel-heading {
        color: #8a6d3b;
        background-color: #fcf8e3;
        border-color: #faebcc;
    }

        .panel-warning > .panel-heading + .panel-collapse > .panel-body {
            border-top-color: #faebcc;
        }

        .panel-warning > .panel-heading .badge {
            color: #fcf8e3;
            background-color: #8a6d3b;
        }

    .panel-warning > .panel-footer + .panel-collapse > .panel-body {
        border-bottom-color: #faebcc;
    }

.panel-danger {
    border-color: #ebccd1;
}

    .panel-danger > .panel-heading {
        color: #a94442;
        background-color: #f2dede;
        border-color: #ebccd1;
    }

        .panel-danger > .panel-heading + .panel-collapse > .panel-body {
            border-top-color: #ebccd1;
        }

        .panel-danger > .panel-heading .badge {
            color: #f2dede;
            background-color: #a94442;
        }

    .panel-danger > .panel-footer + .panel-collapse > .panel-body {
        border-bottom-color: #ebccd1;
    }
/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
html {
    box-sizing: border-box
}

*, *:before, *:after {
    box-sizing: inherit
}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section {
    display: block
}

summary {
    display: list-item
}

audio, canvas, progress, video {
    display: inline-block
}

progress {
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden], template {
    display: none
}

a {
    background-color: transparent
}

    a:active, a:hover {
        outline-width: 0
    }

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

b, strong {
    font-weight: bolder
}

dfn {
    font-style: italic
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -0.25em
}

sup {
    top: -0.5em
}

figure {
    margin: 1em 40px
}

img {
    border-style: none
}

code, kbd, pre, samp {
    font-family: monospace,monospace;
    font-size: 1em
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

button, input, select, textarea, optgroup {
    font: inherit;
    margin: 0
}

optgroup {
    font-weight: bold
}

button, input {
    overflow: visible
}

button, select {
    text-transform: none
}

button, [type=button], [type=reset], [type=submit] {
    -webkit-appearance: button
}

    button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
        border-style: none;
        padding: 0
    }

    button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring {
        outline: 1px dotted ButtonText
    }

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

textarea {
    overflow: auto
}

[type=checkbox], [type=radio] {
    padding: 0
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

    [type=search]::-webkit-search-decoration {
        -webkit-appearance: none
    }

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}
/* End extract */
html, body {
    font-family: Verdana,sans-serif;
    font-size: 14px;
    line-height: 1.5
}

html {
    overflow-x: hidden
}

h1 {
    font-size: 36px
}

h2 {
    font-size: 30px
}

h3 {
    font-size: 24px
}

h4 {
    font-size: 20px
}

h5 {
    font-size: 18px
}

h6 {
    font-size: 16px
}

.w3-serif {
    font-family: serif
}

.w3-sans-serif {
    font-family: sans-serif
}

.w3-cursive {
    font-family: cursive
}

.w3-monospace {
    font-family: monospace
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Segoe UI",Arial,sans-serif;
    font-weight: 400;
    margin: 10px 0
}

.w3-wide {
    letter-spacing: 4px
}

hr {
    border: 0;
    border-top: 1px solid #eee;
    margin: 20px 0
}

.w3-image {
    max-width: 100%;
    height: auto
}

img {
    vertical-align: middle
}

a {
    /*color: inherit*/
}

.w3-table, .w3-table-all {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    display: table
}

.w3-table-all {
    border: 1px solid #ccc
}

    .w3-bordered tr, .w3-table-all tr {
        border-bottom: 1px solid #ddd
    }

.w3-striped tbody tr:nth-child(even) {
    background-color: #f1f1f1
}

.w3-table-all tr:nth-child(odd) {
    background-color: #fff
}

.w3-table-all tr:nth-child(even) {
    background-color: #f1f1f1
}

.w3-hoverable tbody tr:hover, .w3-ul.w3-hoverable li:hover {
    background-color: #ccc
}

.w3-centered tr th, .w3-centered tr td {
    text-align: center
}

.w3-table td, .w3-table th, .w3-table-all td, .w3-table-all th {
    padding: 8px 8px;
    display: table-cell;
    text-align: left;
    vertical-align: top
}

    .w3-table th:first-child, .w3-table td:first-child, .w3-table-all th:first-child, .w3-table-all td:first-child {
        padding-left: 16px
    }

.w3-btn, .w3-button {
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap
}

    .w3-btn:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)
    }

.w3-btn, .w3-button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

    .w3-disabled, .w3-btn:disabled, .w3-button:disabled {
        cursor: not-allowed;
        opacity: 0.3
    }

        .w3-disabled *, :disabled * {
            pointer-events: none
        }

        .w3-btn.w3-disabled:hover, .w3-btn:disabled:hover {
            box-shadow: none
        }

.w3-badge, .w3-tag {
    background-color: #000;
    color: #fff;
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
    text-align: center
}

.w3-badge {
    border-radius: 50%
}

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

    .w3-ul li {
        padding: 8px 16px;
        border-bottom: 1px solid #ddd
    }

        .w3-ul li:last-child {
            border-bottom: none
        }

.w3-tooltip, .w3-display-container {
    position: relative
}

    .w3-tooltip .w3-text {
        display: none
    }

    .w3-tooltip:hover .w3-text {
        display: inline-block
    }

.w3-ripple:active {
    opacity: 0.5
}

.w3-ripple {
    transition: opacity 0s
}

.w3-input {
    padding: 8px;
    display: block;
    border: none;
    border-bottom: 1px solid #ccc;
    width: 100%
}

.w3-select {
    padding: 9px 0;
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc
}

.w3-dropdown-click, .w3-dropdown-hover {
    position: relative;
    display: inline-block;
    cursor: pointer
}

    .w3-dropdown-hover:hover .w3-dropdown-content {
        display: block
    }

    .w3-dropdown-hover:first-child, .w3-dropdown-click:hover {
        background-color: #ccc;
        color: #000
    }

        .w3-dropdown-hover:hover > .w3-button:first-child, .w3-dropdown-click:hover > .w3-button:first-child {
            background-color: #ccc;
            color: #000
        }

.w3-dropdown-content {
    cursor: auto;
    color: #000;
    background-color: #fff;
    display: none;
    position: absolute;
    min-width: 160px;
    margin: 0;
    padding: 0;
    z-index: 1
}

.w3-check, .w3-radio {
    width: 24px;
    height: 24px;
    position: relative;
    top: 6px
}

.w3-sidebar {
    height: 100%;
    width: 200px;
    background-color: #fff;
    position: fixed !important;
    z-index: 1;
    overflow: auto
}

.w3-bar-block .w3-dropdown-hover, .w3-bar-block .w3-dropdown-click {
    width: 100%
}

    .w3-bar-block .w3-dropdown-hover .w3-dropdown-content, .w3-bar-block .w3-dropdown-click .w3-dropdown-content {
        min-width: 100%
    }

    .w3-bar-block .w3-dropdown-hover .w3-button, .w3-bar-block .w3-dropdown-click .w3-button {
        width: 100%;
        text-align: left;
        padding: 8px 16px
    }

.w3-main, #main {
    transition: margin-left .4s
}

.w3-modal {
    z-index: 3;
    display: none;
    padding-top: 100px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4)
}

.w3-modal-content {
    margin: auto;
    background-color: #fff;
    position: relative;
    padding: 0;
    outline: 0;
    width: 600px
}

.w3-bar {
    width: 100%;
    overflow: hidden
}

.w3-center .w3-bar {
    display: inline-block;
    width: auto
}

.w3-bar .w3-bar-item {
    padding: 8px 16px;
    float: left;
    width: auto;
    border: none;
    display: block;
    outline: 0
}

.w3-bar .w3-dropdown-hover, .w3-bar .w3-dropdown-click {
    position: static;
    float: left
}

.w3-bar .w3-button {
    white-space: normal
}

.w3-bar-block .w3-bar-item {
    width: 100%;
    display: block;
    padding: 8px 16px;
    text-align: left;
    border: none;
    white-space: normal;
    float: none;
    outline: 0
}

.w3-bar-block.w3-center .w3-bar-item {
    text-align: center
}

.w3-block {
    display: block;
    width: 100%
}

.w3-responsive {
    display: block;
    overflow-x: auto
}

.w3-container:after, .w3-container:before, .w3-panel:after, .w3-panel:before, .w3-row:after, .w3-row:before, .w3-row-padding:after, .w3-row-padding:before,
.w3-cell-row:before, .w3-cell-row:after, .w3-clear:after, .w3-clear:before, .w3-bar:before, .w3-bar:after {
    content: "";
    display: table;
    clear: both
}

.w3-col, .w3-half, .w3-third, .w3-twothird, .w3-threequarter, .w3-quarter {
    float: left;
    width: 100%
}

    .w3-col.s1 {
        width: 8.33333%
    }

    .w3-col.s2 {
        width: 16.66666%
    }

    .w3-col.s3 {
        width: 24.99999%
    }

    .w3-col.s4 {
        width: 33.33333%
    }

    .w3-col.s5 {
        width: 41.66666%
    }

    .w3-col.s6 {
        width: 49.99999%
    }

    .w3-col.s7 {
        width: 58.33333%
    }

    .w3-col.s8 {
        width: 66.66666%
    }

    .w3-col.s9 {
        width: 74.99999%
    }

    .w3-col.s10 {
        width: 83.33333%
    }

    .w3-col.s11 {
        width: 91.66666%
    }

    .w3-col.s12 {
        width: 99.99999%
    }

@media (min-width:601px) {
    .w3-col.m1 {
        width: 8.33333%
    }

    .w3-col.m2 {
        width: 16.66666%
    }

    .w3-col.m3, .w3-quarter {
        width: 24.99999%
    }

    .w3-col.m4, .w3-third {
        width: 33.33333%
    }

    .w3-col.m5 {
        width: 41.66666%
    }

    .w3-col.m6, .w3-half {
        width: 49.99999%
    }

    .w3-col.m7 {
        width: 58.33333%
    }

    .w3-col.m8, .w3-twothird {
        width: 66.66666%
    }

    .w3-col.m9, .w3-threequarter {
        width: 74.99999%
    }

    .w3-col.m10 {
        width: 83.33333%
    }

    .w3-col.m11 {
        width: 91.66666%
    }

    .w3-col.m12 {
        width: 99.99999%
    }
}

@media (min-width:993px) {
    .w3-col.l1 {
        width: 8.33333%
    }

    .w3-col.l2 {
        width: 16.66666%
    }

    .w3-col.l3 {
        width: 24.99999%
    }

    .w3-col.l4 {
        width: 33.33333%
    }

    .w3-col.l5 {
        width: 41.66666%
    }

    .w3-col.l6 {
        width: 49.99999%
    }

    .w3-col.l7 {
        width: 58.33333%
    }

    .w3-col.l8 {
        width: 66.66666%
    }

    .w3-col.l9 {
        width: 74.99999%
    }

    .w3-col.l10 {
        width: 83.33333%
    }

    .w3-col.l11 {
        width: 91.66666%
    }

    .w3-col.l12 {
        width: 99.99999%
    }
}

.w3-rest {
    overflow: hidden
}

.w3-stretch {
    margin-left: -16px;
    margin-right: -16px
}

.w3-content, .w3-auto {
    margin-left: auto;
    margin-right: auto
}

.w3-content {
    max-width: 980px
}

.w3-auto {
    max-width: 1140px
}

.w3-cell-row {
    display: table;
    width: 100%
}

.w3-cell {
    display: table-cell
}

.w3-cell-top {
    vertical-align: top
}

.w3-cell-middle {
    vertical-align: middle
}

.w3-cell-bottom {
    vertical-align: bottom
}

.w3-hide {
    display: none !important
}

.w3-show-block, .w3-show {
    display: block !important
}

.w3-show-inline-block {
    display: inline-block !important
}

@media (max-width:1205px) {
    .w3-auto {
        max-width: 95%
    }
}

@media (max-width:600px) {
    .w3-modal-content {
        margin: 0 10px;
        width: auto !important
    }

    .w3-modal {
        padding-top: 30px
    }

    .w3-dropdown-hover.w3-mobile .w3-dropdown-content, .w3-dropdown-click.w3-mobile .w3-dropdown-content {
        position: relative
    }

    .w3-hide-small {
        display: none !important
    }

    .w3-mobile {
        display: block;
        width: 100% !important
    }

    .w3-bar-item.w3-mobile, .w3-dropdown-hover.w3-mobile, .w3-dropdown-click.w3-mobile {
        text-align: center
    }

        .w3-dropdown-hover.w3-mobile, .w3-dropdown-hover.w3-mobile .w3-btn, .w3-dropdown-hover.w3-mobile .w3-button, .w3-dropdown-click.w3-mobile, .w3-dropdown-click.w3-mobile .w3-btn, .w3-dropdown-click.w3-mobile .w3-button {
            width: 100%
        }
}

@media (max-width:768px) {
    .w3-modal-content {
        width: 500px
    }

    .w3-modal {
        padding-top: 50px
    }
}

@media (min-width:993px) {
    .w3-modal-content {
        width: 900px
    }

    .w3-hide-large {
        display: none !important
    }

    .w3-sidebar.w3-collapse {
        display: block !important
    }
}

@media (max-width:992px) and (min-width:601px) {
    .w3-hide-medium {
        display: none !important
    }
}

@media (max-width:992px) {
    .w3-sidebar.w3-collapse {
        display: none
    }

    .w3-main {
        margin-left: 0 !important;
        margin-right: 0 !important
    }

    .w3-auto {
        max-width: 100%
    }
}

.w3-top, .w3-bottom {
    position: fixed;
    width: 100%;
    z-index: 1
}

.w3-top {
    top: 0
}

.w3-bottom {
    bottom: 0
}

.w3-overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2
}

.w3-display-topleft {
    position: absolute;
    left: 0;
    top: 0
}

.w3-display-topright {
    position: absolute;
    right: 0;
    top: 0
}

.w3-display-bottomleft {
    position: absolute;
    left: 0;
    bottom: 0
}

.w3-display-bottomright {
    position: absolute;
    right: 0;
    bottom: 0
}

.w3-display-middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%)
}

.w3-display-left {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(0%,-50%);
    -ms-transform: translate(-0%,-50%)
}

.w3-display-right {
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0%,-50%);
    -ms-transform: translate(0%,-50%)
}

.w3-display-topmiddle {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%)
}

.w3-display-bottommiddle {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%,0%);
    -ms-transform: translate(-50%,0%)
}

.w3-display-container:hover .w3-display-hover {
    display: block
}

.w3-display-container:hover span.w3-display-hover {
    display: inline-block
}

.w3-display-hover {
    display: none
}

.w3-display-position {
    position: absolute
}

.w3-circle {
    border-radius: 50%
}

.w3-round-small {
    border-radius: 2px
}

.w3-round, .w3-round-medium {
    border-radius: 4px
}

.w3-round-large {
    border-radius: 8px
}

.w3-round-xlarge {
    border-radius: 16px
}

.w3-round-xxlarge {
    border-radius: 32px
}

.w3-row-padding, .w3-row-padding > .w3-half, .w3-row-padding > .w3-third, .w3-row-padding > .w3-twothird, .w3-row-padding > .w3-threequarter, .w3-row-padding > .w3-quarter, .w3-row-padding > .w3-col {
    padding: 0 8px
}

.w3-container, .w3-panel {
    padding: 0.01em 16px
}

.w3-panel {
    margin-top: 16px;
    margin-bottom: 16px
}

.w3-code, .w3-codespan {
    font-family: Consolas,"courier new";
    font-size: 16px
}

.w3-code {
    width: auto;
    background-color: #fff;
    padding: 8px 12px;
    border-left: 4px solid #4CAF50;
    word-wrap: break-word
}

.w3-codespan {
    color: crimson;
    background-color: #f1f1f1;
    padding-left: 4px;
    padding-right: 4px;
    font-size: 110%
}

.w3-card, .w3-card-2 {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
}

.w3-card-4, .w3-hover-shadow:hover {
    box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)
}

.w3-spin {
    animation: w3-spin 2s infinite linear
}

@keyframes w3-spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(359deg)
    }
}

.w3-animate-fading {
    animation: fading 10s infinite
}

@keyframes fading {
    0% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.w3-animate-opacity {
    animation: opac 0.8s
}

@keyframes opac {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.w3-animate-top {
    position: relative;
    animation: animatetop 0.4s
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

.w3-animate-left {
    position: relative;
    animation: animateleft 0.4s
}

@keyframes animateleft {
    from {
        left: -300px;
        opacity: 0
    }

    to {
        left: 0;
        opacity: 1
    }
}

.w3-animate-right {
    position: relative;
    animation: animateright 0.4s
}

@keyframes animateright {
    from {
        right: -300px;
        opacity: 0
    }

    to {
        right: 0;
        opacity: 1
    }
}

.w3-animate-bottom {
    position: relative;
    animation: animatebottom 0.4s
}

@keyframes animatebottom {
    from {
        bottom: -300px;
        opacity: 0
    }

    to {
        bottom: 0;
        opacity: 1
    }
}

.w3-animate-zoom {
    animation: animatezoom 0.6s
}

@keyframes animatezoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

.w3-animate-input {
    transition: width 0.4s ease-in-out
}

    .w3-animate-input:focus {
        width: 100% !important
    }

.w3-opacity, .w3-hover-opacity:hover {
    opacity: 0.60
}

.w3-opacity-off, .w3-hover-opacity-off:hover {
    opacity: 1
}

.w3-opacity-max {
    opacity: 0.25
}

.w3-opacity-min {
    opacity: 0.75
}

.w3-greyscale-max, .w3-grayscale-max, .w3-hover-greyscale:hover, .w3-hover-grayscale:hover {
    filter: grayscale(100%)
}

.w3-greyscale, .w3-grayscale {
    filter: grayscale(75%)
}

.w3-greyscale-min, .w3-grayscale-min {
    filter: grayscale(50%)
}

.w3-sepia {
    filter: sepia(75%)
}

.w3-sepia-max, .w3-hover-sepia:hover {
    filter: sepia(100%)
}

.w3-sepia-min {
    filter: sepia(50%)
}

.w3-tiny {
    font-size: 10px !important
}

.w3-small {
    font-size: 12px !important
}

.w3-medium {
    font-size: 15px !important
}

.w3-large {
    font-size: 18px !important
}

.w3-xlarge {
    font-size: 24px !important
}

.w3-xxlarge {
    font-size: 36px !important
}

.w3-xxxlarge {
    font-size: 48px !important
}

.w3-jumbo {
    font-size: 64px !important
}

.w3-left-align {
    text-align: left !important
}

.w3-right-align {
    text-align: right !important
}

.w3-justify {
    text-align: justify !important
}

.w3-center {
    text-align: center !important
}

.w3-border-0 {
    border: 0 !important
}

.w3-border {
    border: 1px solid #ccc !important
}

.w3-border-top {
    border-top: 1px solid #ccc !important
}

.w3-border-bottom {
    border-bottom: 1px solid #ccc !important
}

.w3-border-left {
    border-left: 1px solid #ccc !important
}

.w3-border-right {
    border-right: 1px solid #ccc !important
}

.w3-topbar {
    border-top: 6px solid #ccc !important
}

.w3-bottombar {
    border-bottom: 6px solid #ccc !important
}

.w3-leftbar {
    border-left: 6px solid #ccc !important
}

.w3-rightbar {
    border-right: 6px solid #ccc !important
}

.w3-section, .w3-code {
    margin-top: 16px !important;
    margin-bottom: 16px !important
}

.w3-margin {
    margin: 16px !important
}

.w3-margin-top {
    margin-top: 16px !important
}

.w3-margin-bottom {
    margin-bottom: 16px !important
}

.w3-margin-left {
    margin-left: 16px !important
}

.w3-margin-right {
    margin-right: 16px !important
}

.w3-padding-small {
    padding: 4px 8px !important
}

.w3-padding {
    padding: 8px 16px !important
}

.w3-padding-large {
    padding: 12px 24px !important
}

.w3-padding-16 {
    padding-top: 16px !important;
    padding-bottom: 16px !important
}

.w3-padding-24 {
    padding-top: 24px !important;
    padding-bottom: 24px !important
}

.w3-padding-32 {
    padding-top: 32px !important;
    padding-bottom: 32px !important
}

.w3-padding-48 {
    padding-top: 48px !important;
    padding-bottom: 48px !important
}

.w3-padding-64 {
    padding-top: 64px !important;
    padding-bottom: 64px !important
}

.w3-padding-top-64 {
    padding-top: 64px !important
}

.w3-padding-top-48 {
    padding-top: 48px !important
}

.w3-padding-top-32 {
    padding-top: 32px !important
}

.w3-padding-top-24 {
    padding-top: 24px !important
}

.w3-left {
    float: left !important
}

.w3-right {
    float: right !important
}

.w3-button:hover {
    color: #000 !important;
    background-color: #ccc !important
}

.w3-transparent, .w3-hover-none:hover {
    background-color: transparent !important
}

.w3-hover-none:hover {
    box-shadow: none !important
}
/* Colors */
.w3-amber, .w3-hover-amber:hover {
    color: #000 !important;
    background-color: #ffc107 !important
}

.w3-aqua, .w3-hover-aqua:hover {
    color: #000 !important;
    background-color: #00ffff !important
}

.w3-blue, .w3-hover-blue:hover {
    color: #fff !important;
    background-color: #2196F3 !important
}

.w3-light-blue, .w3-hover-light-blue:hover {
    color: #000 !important;
    background-color: #87CEEB !important
}

.w3-brown, .w3-hover-brown:hover {
    color: #fff !important;
    background-color: #795548 !important
}

.w3-cyan, .w3-hover-cyan:hover {
    color: #000 !important;
    background-color: #00bcd4 !important
}

.w3-blue-grey, .w3-hover-blue-grey:hover, .w3-blue-gray, .w3-hover-blue-gray:hover {
    color: #fff !important;
    background-color: #607d8b !important
}

.w3-green, .w3-hover-green:hover {
    color: #fff !important;
    background-color: #4CAF50 !important
}

.w3-light-green, .w3-hover-light-green:hover {
    color: #000 !important;
    background-color: #8bc34a !important
}

.w3-indigo, .w3-hover-indigo:hover {
    color: #fff !important;
    background-color: #3f51b5 !important
}

.w3-khaki, .w3-hover-khaki:hover {
    color: #000 !important;
    background-color: #f0e68c !important
}

.w3-lime, .w3-hover-lime:hover {
    color: #000 !important;
    background-color: #cddc39 !important
}

.w3-orange, .w3-hover-orange:hover {
    color: #000 !important;
    background-color: #ff9800 !important
}

.w3-deep-orange, .w3-hover-deep-orange:hover {
    color: #fff !important;
    background-color: #ff5722 !important
}

.w3-pink, .w3-hover-pink:hover {
    color: #fff !important;
    background-color: #e91e63 !important
}

.w3-purple, .w3-hover-purple:hover {
    color: #fff !important;
    background-color: #9c27b0 !important
}

.w3-deep-purple, .w3-hover-deep-purple:hover {
    color: #fff !important;
    background-color: #673ab7 !important
}

.w3-red, .w3-hover-red:hover {
    color: #fff !important;
    background-color: #f44336 !important
}

.w3-sand, .w3-hover-sand:hover {
    color: #000 !important;
    background-color: #fdf5e6 !important
}

.w3-teal, .w3-hover-teal:hover {
    color: #fff !important;
    background-color: #009688 !important
}

.w3-yellow, .w3-hover-yellow:hover {
    color: #000 !important;
    background-color: #ffeb3b !important
}

.w3-white, .w3-hover-white:hover {
    color: #000 !important;
    background-color: #fff !important
}

.w3-black, .w3-hover-black:hover {
    color: #fff !important;
    background-color: #000 !important
}

.w3-grey, .w3-hover-grey:hover, .w3-gray, .w3-hover-gray:hover {
    color: #000 !important;
    background-color: #9e9e9e !important
}

.w3-light-grey, .w3-hover-light-grey:hover, .w3-light-gray, .w3-hover-light-gray:hover {
    color: #000 !important;
    background-color: #f1f1f1 !important
}

.w3-dark-grey, .w3-hover-dark-grey:hover, .w3-dark-gray, .w3-hover-dark-gray:hover {
    color: #fff !important;
    background-color: #616161 !important
}

.w3-pale-red, .w3-hover-pale-red:hover {
    color: #000 !important;
    background-color: #ffdddd !important
}

.w3-pale-green, .w3-hover-pale-green:hover {
    color: #000 !important;
    background-color: #ddffdd !important
}

.w3-pale-yellow, .w3-hover-pale-yellow:hover {
    color: #000 !important;
    background-color: #ffffcc !important
}

.w3-pale-blue, .w3-hover-pale-blue:hover {
    color: #000 !important;
    background-color: #ddffff !important
}

.w3-text-amber, .w3-hover-text-amber:hover {
    color: #ffc107 !important
}

.w3-text-aqua, .w3-hover-text-aqua:hover {
    color: #00ffff !important
}

.w3-text-blue, .w3-hover-text-blue:hover {
    color: #2196F3 !important
}

.w3-text-light-blue, .w3-hover-text-light-blue:hover {
    color: #87CEEB !important
}

.w3-text-brown, .w3-hover-text-brown:hover {
    color: #795548 !important
}

.w3-text-cyan, .w3-hover-text-cyan:hover {
    color: #00bcd4 !important
}

.w3-text-blue-grey, .w3-hover-text-blue-grey:hover, .w3-text-blue-gray, .w3-hover-text-blue-gray:hover {
    color: #607d8b !important
}

.w3-text-green, .w3-hover-text-green:hover {
    color: #4CAF50 !important
}

.w3-text-light-green, .w3-hover-text-light-green:hover {
    color: #8bc34a !important
}

.w3-text-indigo, .w3-hover-text-indigo:hover {
    color: #3f51b5 !important
}

.w3-text-khaki, .w3-hover-text-khaki:hover {
    color: #b4aa50 !important
}

.w3-text-lime, .w3-hover-text-lime:hover {
    color: #cddc39 !important
}

.w3-text-orange, .w3-hover-text-orange:hover {
    color: #ff9800 !important
}

.w3-text-deep-orange, .w3-hover-text-deep-orange:hover {
    color: #ff5722 !important
}

.w3-text-pink, .w3-hover-text-pink:hover {
    color: #e91e63 !important
}

.w3-text-purple, .w3-hover-text-purple:hover {
    color: #9c27b0 !important
}

.w3-text-deep-purple, .w3-hover-text-deep-purple:hover {
    color: #673ab7 !important
}

.w3-text-red, .w3-hover-text-red:hover {
    color: #f44336 !important
}

.w3-text-sand, .w3-hover-text-sand:hover {
    color: #fdf5e6 !important
}

.w3-text-teal, .w3-hover-text-teal:hover {
    color: #009688 !important
}

.w3-text-yellow, .w3-hover-text-yellow:hover {
    color: #d2be0e !important
}

.w3-text-white, .w3-hover-text-white:hover {
    color: #fff !important
}

.w3-text-black, .w3-hover-text-black:hover {
    color: #000 !important
}

.w3-text-grey, .w3-hover-text-grey:hover, .w3-text-gray, .w3-hover-text-gray:hover {
    color: #757575 !important
}

.w3-text-light-grey, .w3-hover-text-light-grey:hover, .w3-text-light-gray, .w3-hover-text-light-gray:hover {
    color: #f1f1f1 !important
}

.w3-text-dark-grey, .w3-hover-text-dark-grey:hover, .w3-text-dark-gray, .w3-hover-text-dark-gray:hover {
    color: #3a3a3a !important
}

.w3-border-amber, .w3-hover-border-amber:hover {
    border-color: #ffc107 !important
}

.w3-border-aqua, .w3-hover-border-aqua:hover {
    border-color: #00ffff !important
}

.w3-border-blue, .w3-hover-border-blue:hover {
    border-color: #2196F3 !important
}

.w3-border-light-blue, .w3-hover-border-light-blue:hover {
    border-color: #87CEEB !important
}

.w3-border-brown, .w3-hover-border-brown:hover {
    border-color: #795548 !important
}

.w3-border-cyan, .w3-hover-border-cyan:hover {
    border-color: #00bcd4 !important
}

.w3-border-blue-grey, .w3-hover-border-blue-grey:hover, .w3-border-blue-gray, .w3-hover-border-blue-gray:hover {
    border-color: #607d8b !important
}

.w3-border-green, .w3-hover-border-green:hover {
    border-color: #4CAF50 !important
}

.w3-border-light-green, .w3-hover-border-light-green:hover {
    border-color: #8bc34a !important
}

.w3-border-indigo, .w3-hover-border-indigo:hover {
    border-color: #3f51b5 !important
}

.w3-border-khaki, .w3-hover-border-khaki:hover {
    border-color: #f0e68c !important
}

.w3-border-lime, .w3-hover-border-lime:hover {
    border-color: #cddc39 !important
}

.w3-border-orange, .w3-hover-border-orange:hover {
    border-color: #ff9800 !important
}

.w3-border-deep-orange, .w3-hover-border-deep-orange:hover {
    border-color: #ff5722 !important
}

.w3-border-pink, .w3-hover-border-pink:hover {
    border-color: #e91e63 !important
}

.w3-border-purple, .w3-hover-border-purple:hover {
    border-color: #9c27b0 !important
}

.w3-border-deep-purple, .w3-hover-border-deep-purple:hover {
    border-color: #673ab7 !important
}

.w3-border-red, .w3-hover-border-red:hover {
    border-color: #f44336 !important
}

.w3-border-sand, .w3-hover-border-sand:hover {
    border-color: #fdf5e6 !important
}

.w3-border-teal, .w3-hover-border-teal:hover {
    border-color: #009688 !important
}

.w3-border-yellow, .w3-hover-border-yellow:hover {
    border-color: #ffeb3b !important
}

.w3-border-white, .w3-hover-border-white:hover {
    border-color: #fff !important
}

.w3-border-black, .w3-hover-border-black:hover {
    border-color: #000 !important
}

.w3-border-grey, .w3-hover-border-grey:hover, .w3-border-gray, .w3-hover-border-gray:hover {
    border-color: #9e9e9e !important
}

.w3-border-light-grey, .w3-hover-border-light-grey:hover, .w3-border-light-gray, .w3-hover-border-light-gray:hover {
    border-color: #f1f1f1 !important
}

.w3-border-dark-grey, .w3-hover-border-dark-grey:hover, .w3-border-dark-gray, .w3-hover-border-dark-gray:hover {
    border-color: #616161 !important
}

.w3-border-pale-red, .w3-hover-border-pale-red:hover {
    border-color: #ffe7e7 !important
}

.w3-border-pale-green, .w3-hover-border-pale-green:hover {
    border-color: #e7ffe7 !important
}

.w3-border-pale-yellow, .w3-hover-border-pale-yellow:hover {
    border-color: #ffffcc !important
}

.w3-border-pale-blue, .w3-hover-border-pale-blue:hover {
    border-color: #e7ffff !important
}


a:hover, a:active {
    color: #059862
}

table.w3-table-all, table.ws-table-all {
    margin: 20px 0
}
/*OPPSETT AV TOP, TOPNAV, SIDENAV, MAIN, RIGHT OG FOOTER:*/
.top {
    position: relative;
    background-color: #ffffff;
    height: 68px;
    padding-top: 20px;
    line-height: 50px;
    overflow: hidden;
    z-index: 2;
}

.w3schools-logo {
    font-family: fontawesome;
    text-decoration: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 37px;
    letter-spacing: 3px;
    color: #555555;
    display: block;
    position: absolute;
    top: 17px;
}

    .w3schools-logo .dotcom {
        color: #4CAF50
    }

.toptext {
    margin-right: 20px;
}

.login {
    display: none;
    line-height: 1.5;
    padding: 6px 14px;
    position: relative;
    top: 7px;
    color: #fff;
    background-color: #4CAF50;
    text-decoration: none;
    border-radius: 5px;
    font-family: "Segoe UI",Arial,sans-serif;
    font-weight: bold;
}

#loginactioncontainer {
    width: 80px;
    height: 50px;
}
/*#loginsignup {display:none;font-family:Verdana, sans-serif;}*/
#mypagediv {
    display: none;
}

.login:hover {
    background-color: #46a049;
    color: #fff
}

.login:focus {
    outline: none
}

#nav_login .signup {
    padding: 10px;
    background-color: #2196F3;
    color: #fff;
    text-decoration: none;
}

span.usergetspoint {
    xright: 50px;
    display: inline-block;
    line-height: normal;
    position: absolute;
    bottom: 3px;
    font-size: 12px;
    font-family: consolas;
    background-color: transparent;
    color: transparent;
    border-radius: 5px;
    padding: 1px 3px;
}

span#usergetstutpoint {
    animation-name: tutpoint;
    animation-duration: 3s;
    animation-timing-function: linear;
}

span#usergetsquizpoint {
    animation-name: quizpoint;
    animation-duration: 3s;
    animation-timing-function: linear;
}

span#usergetsstar {
    xright: 50px;
    display: inline-block;
    line-height: normal;
    position: absolute;
    bottom: 3px;
    font-size: 12px;
}

span#usergetsstar {
    animation-name: example;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: forwards
}

@keyframes example {
    0% {
        color: #FFD700;
        transform: rotate(0deg);
    }

    100% {
        font-size: 48px;
        color: #FFD700;
        transform: rotate(360deg);
    }
}

@keyframes tutpoint {
    0% {
        background-color: transparent;
        color: transparent
    }

    1% {
        background-color: rgba(76, 175, 80, 1);
        color: #fff
    }

    5% {
        font-size: 16px;
    }

    14% {
        font-size: 12px;
    }

    16% {
        font-size: 16px;
    }

    25% {
        font-size: 12px;
    }

    27% {
        font-size: 16px;
    }

    29% {
        font-size: 12px;
        background-color: rgba(76, 175, 80, 1);
        color: #fff
    }

    50% {
        background-color: transparent;
        color: transparent
    }
}

@keyframes quizpoint {
    0% {
        background-color: transparent;
        color: transparent
    }

    1% {
        background-color: rgba(44, 156, 202, 1);
        color: #fff
    }

    5% {
        font-size: 16px;
    }

    14% {
        font-size: 12px;
    }

    16% {
        font-size: 16px;
    }

    25% {
        font-size: 12px;
    }

    27% {
        font-size: 16px;
    }

    29% {
        background-color: rgba(44, 156, 202, 1);
        color: #fff
    }

    50% {
        background-color: transparent;
        color: transparent
    }
}

.topnav {
    position: relative;
    z-index: 2;
    font-size: 17px;
    background-color: #282A35;
    color: #f1f1f1;
    width: 100%;
    padding: 0;
    letter-spacing: 1px;
    font-family: 'Source Sans Pro', sans-serif;
}

    .topnav a {
        padding: 10px 15px 9px 15px !important;
    }

    .topnav .w3-bar a:hover, .topnav .w3-bar a:focus {
        background-color: #000000 !important;
        color: #ffffff !important;
    }

    .topnav .w3-bar a.active {
        background-color: #04AA6D !important;
        color: #ffffff;
    }

a.topnav-icons {
    width: 52px !important;
    font-size: 20px !important;
    padding-top: 11px !important;
    padding-bottom: 13px !important;
}

    a.topnav-icons.fa-home {
        font-size: 22px !important
    }

    a.topnav-icons.fa-menu {
        font-size: 22px !important
    }

a.topnav-localicons {
    font-size: 20px !important;
    padding-top: 6px !important;
    padding-bottom: 12px !important;
}
/*i.fa-caret-down,i.fa-caret-up{width:10px}*/
#sidenav h2 {
    font-size: 21px;
    padding-left: 16px;
    margin: -4px 0 4px 0;
    width: 204px;
}

#sidenav a {
    font-family: "Segoe UI",Arial,sans-serif;
    text-decoration: none;
    display: block;
    padding: 2px 1px 1px 16px
}

    #sidenav a:hover, #sidenav a:focus {
        color: #000000;
        background-color: #cccccc;
    }

    #sidenav a.active {
        background-color: #04AA6D;
        color: #ffffff;
    }

    #sidenav a.activesub:link, #sidenav a.activesub:visited {
        background-color: #ddd;
        color: #000;
    }

    #sidenav a.activesub:hover, #sidenav a.activesub:active {
        background-color: #ccc;
        color: #000;
    }

#leftmenuinner {
    position: fixed;
    top: 0;
    padding-top: 118px;
    padding-bottom: 0;
    height: 100%;
    width: 220px;
    background-color: transparent;
}

#leftmenuinnerinner {
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-top: 20px;
}

#main {
    padding: 16px
}

#mainLeaderboard {
    height: 90px
}

#right {
    text-align: center;
    padding: 16px 16px 0 0
}

    #right a {
        text-decoration: none
    }
/*#right a:hover {text-decoration:underline}*/
#skyscraper {
    min-height: 600px
}

.sidesection {
    margin-bottom: 32px;
}

#sidesection_exercise a {
    display: block;
    padding: 4px 10px;
}

    #sidesection_exercise a:hover, #sidesection_exercise a:active {
        background-color: #ccc;
        text-decoration: none;
        color: #000000;
    }

.bottomad {
    padding: 0 16px 16px 0;
    float: left;
    width: auto;
}

.footer a {
    text-decoration: none;
}

    .footer a:hover {
        text-decoration: underline;
    }

#nav_tutorials, #nav_references, #nav_exercises, #nav_login {
    -webkit-overflow-scrolling: touch;
    overflow: auto;
}

    #nav_tutorials::-webkit-scrollbar, #nav_references::-webkit-scrollbar, #nav_exercises::-webkit-scrollbar {
        width: 12px;
    }

    #nav_tutorials::-webkit-scrollbar-track, #nav_references::-webkit-scrollbar-track, #nav_exercises::-webkit-scrollbar-track {
        background: #555555;
    }

    #nav_tutorials::-webkit-scrollbar-thumb, #nav_references::-webkit-scrollbar-thumb, #nav_exercises::-webkit-scrollbar-thumb {
        background: #999999;
    }

#nav_tutorials, #nav_references, #nav_exercises, #nav_login {
    display: none;
    letter-spacing: 0;
    margin-top: 44px;
    position: absolute;
    width: 100%;
    background-color: #282A35;
    color: white;
}

    #nav_tutorials a, #nav_references a, #nav_exercises a, #nav_examples a {
        padding: 2px 0 2px 6px !important;
        font-size: 18px;
    }

        #nav_tutorials a:focus, #nav_references a:focus, #nav_exercises a:focus,, #nav_examples a:focus {
            color: #000;
            background-color: #ccc;
        }

    #nav_tutorials h3, #nav_references h3, #nav_exercises h3, #nav_examples h3, #sectionxs_tutorials h3,
    #sectionxs_references h3,
    #sectionxs_exercises h3 {
        padding-left: 6px;
        color: #FFF4A3;
        font-family: 'Source Sans Pro', sans-serif;
    }


.ref_overview {
    display: none
}

.tut_overview {
    display: none;
    margin-left: 10px;
    background-color: #ddd;
    line-height: 1.8em;
}

#sidenav a.activesub:link, #sidenav a.activesub:visited {
    background-color: #ddd;
    color: #000;
}

#sidenav a.activesub:hover, #sidenav a.activesub:active {
    background-color: #ccc;
    color: #000;
}

#sidenav a.active_overview:link, #sidenav a.active_overview:visited {
    background-color: #ccc;
    color: #000;
}

.w3-example {
    background-color: #E7E9EB;
    border-radius: 5px;
    padding: 0.01em 16px;
    margin: 20px 0;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important
}

.nextprev a {
    font-size: 18px;
    font-family: 'Source Sans Pro', sans-serif;
    padding-left: 19px;
    padding-right: 19px;
    border: 1px solid #cccccc;
    border-radius: 5px;
}

    .nextprev a:link, .nextprev a:visited {
        background-color: #ffffff;
        color: #000000;
    }

    .w3-example a:focus, .nextprev a:focus {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    }

.w3-example .w3-btn, .w3-example .ws-btn {
    background-color: #04AA6D !important;
    border-radius: 5px;
    font-size: 17px;
    font-family: 'Source Sans Pro', sans-serif;
    padding: 6px 18px;
}

.w3-code {
    border-left: 4px solid #04AA6D;
}

.nextprev a.w3-right, .nextprev a.w3-left {
    background-color: #04AA6D;
    color: #ffffff;
    border-color: #04AA6D
}

.pagemenu {
    margin-left: -20px;
    margin-right: -20px;
    padding: 20px;
    background-color: #d4edda;
    line-height: 2.8em;
    color: #555;
}

    .pagemenu hr {
        border-top: 1px solid #fff;
        margin: 20px 0;
    }

    .pagemenu a {
        display: block;
        text-decoration: none !important;
    }

        .pagemenu a:hover, .learnmore a:active {
            color: #000;
        }

#w3-exerciseform {
    background-color: #282A35;
    padding: 16px;
    color: #ffffff;
    border-radius: 5px;
}

    #w3-exerciseform .exercisewindow {
        background-color: #ffffff;
        padding: 16px;
        color: #000000;
    }

    #w3-exerciseform .exerciseprecontainer {
        background-color: #E7E9EB;
        padding: 16px;
        font-size: 120%;
        font-family: Consolas,"Courier New", Courier, monospace;
    }

        #w3-exerciseform .exerciseprecontainer pre[class*="language-"] {
            padding: 1px;
        }

        #w3-exerciseform .exerciseprecontainer pre {
            display: block;
        }

        #w3-exerciseform .exerciseprecontainer textarea {
            width: 100%;
            border: none;
            overflow: hidden
        }

        #w3-exerciseform .exerciseprecontainer input {
            padding: 1px;
            border: 1px solid transparent;
            height: 1.3em;
        }

    #w3-exerciseform .w3-btn {
        background-color: #04AA6D;
        border-radius: 5px;
        font-size: 17px;
        font-family: 'Source Sans Pro', sans-serif;
        padding: 7px 18px;
    }

.w3-theme {
    color: #fff !important;
    background-color: #73AD21 !important;
    background-color: #04AA6D !important
}

.w3-theme-border {
    border-color: #04AA6D !important
}

.sharethis a:hover {
    color: inherit;
}

.fa-facebook-square, .fa-instagram, .fa-linkedin-square {
    padding: 0 2px;
}

    .fa-facebook-square:hover, .fa-thumbs-o-up:hover {
        color: #3B5998;
    }

    .fa-instagram:hover {
        color: #8a3ab9;
    }

    .fa-linkedin-square:hover {
        color: #2867B2;
    }

.fa-twitter-square:hover {
    color: #55acee;
}

#google_translate_element img {
    margin-bottom: -1px;
}

#googleSearch {
    color: #000000;
}

    #googleSearch a {
        padding: 0 !important;
    }

.searchdiv {
    max-width: 400px;
    margin: auto;
    text-align: left;
    font-size: 16px
}

div.cse .gsc-control-cse, div.gsc-control-cse {
    background-color: transparent;
    border: none;
    padding: 6px;
    margin: 0px
}

td.gsc-search-button input.gsc-search-button {
    background-color: #4CAF50;
    border-color: #4CAF50
}

    td.gsc-search-button input.gsc-search-button:hover {
        background-color: #46a049;
    }

input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus, .gsc-search-button {
    box-sizing: content-box;
    line-height: normal;
}

.gsc-tabsArea div {
    overflow: visible;
}
/*"nullstille" w3css:*/
.w3-main {
    transition: margin-left 0s;
}
/*"nullstilling" slutt*/
@media (min-width:1675px) {
    #main {
        width: 79%
    }

    #right {
        width: 21%
    }
}

@media (max-width:600px) {
    .top img {
        display: block;
        margin: auto;
    }
    /*#mypagediv {position:absolute;width:auto;right:0;top:16px;}*/
}

@media (max-width:400px) {
    .top .w3schools-logo {
        font-size: 30px;
        top: 24px;
    }
}

@media (max-width:992px) {
    .toptext {
        display: none;
    }

    .login {
        top: 2px;
    }

    #sidenav {
        width: 260px;
        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    }

        #sidenav h2 {
            font-size: 26px;
            width: 100%;
        }

        #sidenav a {
            padding: 3px 2px 3px 24px;
            font-size: 17px
        }

    #leftmenuinner {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        height: 100%;
        position: relative;
        width: auto;
        padding-top: 0;
        background-color: #f1f1f1;
    }

    #leftmenuinnerinner {
        overflow-y: scroll
    }

    .bottomad {
        float: none;
        text-align: center
    }

    #skyscraper {
        min-height: 60px
    }
}

@media screen and (max-width:600px) {
    .w3-example, .w3-note, #w3-exerciseform {
        margin-left: -16px;
        margin-right: -16px;
    }
}
/* source-code-pro-regular - latin */
@font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/source-code-pro-v14-latin-regular.eot'); /* IE9 Compat Modes */
    src: url('fonts/source-code-pro-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/source-code-pro-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('fonts/source-code-pro-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('fonts/source-code-pro-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('fonts/source-code-pro-v14-latin-regular.svg#SourceCodePro') format('svg'); /* Legacy iOS */
    font-display: swap;
}
/* roboto-mono-500 - latin */
@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/roboto-mono-v13-latin-500.eot'); /* IE9 Compat Modes */
    src: url('fonts/roboto-mono-v13-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/roboto-mono-v13-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
    url('fonts/roboto-mono-v13-latin-500.woff') format('woff'), /* Modern Browsers */
    url('fonts/roboto-mono-v13-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
    url('fonts/roboto-mono-v13-latin-500.svg#RobotoMono') format('svg'); /* Legacy iOS */
    font-display: swap;
}
/* source-sans-pro-700 - latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/source-sans-pro-v14-latin-700.eot'); /* IE9 Compat Modes */
    src: url('fonts/source-sans-pro-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/source-sans-pro-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('fonts/source-sans-pro-v14-latin-700.woff') format('woff'), /* Modern Browsers */
    url('fonts/source-sans-pro-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('fonts/source-sans-pro-v14-latin-700.svg#SourceSansPro') format('svg'); /* Legacy iOS */
    font-display: swap;
}
/* source-sans-pro-600 - latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/source-sans-pro-v14-latin-600.eot'); /* IE9 Compat Modes */
    src: url('fonts/source-sans-pro-v14-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/source-sans-pro-v14-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
    url('fonts/source-sans-pro-v14-latin-600.woff') format('woff'), /* Modern Browsers */
    url('fonts/source-sans-pro-v14-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
    url('fonts/source-sans-pro-v14-latin-600.svg#SourceSansPro') format('svg'); /* Legacy iOS */
    font-display: swap;
}
/* freckle-face-regular - latin */
@font-face {
    font-family: 'Freckle Face';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/freckle-face-v9-latin-regular.eot'); /* IE9 Compat Modes */
    src: url('fonts/freckle-face-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/freckle-face-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('fonts/freckle-face-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('fonts/freckle-face-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('fonts/freckle-face-v9-latin-regular.svg#FreckleFace') format('svg'); /* Legacy iOS */
    font-display: swap;
}
/* fontawesome */
@font-face {
    font-family: 'fontawesome';
    font-style: normal;
    font-weight: normal;
    src: url('fonts/fontawesome.eot?14663396'); /* IE9 Compat Modes */
    src: url('fonts/fontawesome.eot?14663396#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/fontawesome.woff2?14663396') format('woff2'), /* Super Modern Browsers */
    url('fonts/fontawesome.woff?14663396') format('woff'), /* Modern Browsers */
    url('fonts/fontawesome.ttf?14663396') format('truetype'), /* Safari, Android, iOS */
    url('fonts/fontawesome.svg?14663396#fontawesome') format('svg'); /* Legacy iOS */
    font-display: swap;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 fontawesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}

.fa-2x {
    font-size: 2em;
}

.fa-trash:before {
    content: '\f1f8';
}

.fa-close:before {
    content: '\e815';
}

.fa-check:before {
    content: '\e817';
}

.fa-home:before {
    content: '\e800';
}

.fa-globe:before {
    content: '\e801';
}

.fa-html5:before {
    content: '\f13b';
}

.fa-code:before {
    content: '\f121';
}

.fa-menu:before {
    content: '\f0c9';
}

.fa-logo:before {
    content: '\e822';
}

.fa-java:before {
    content: '\e821';
}

.fa-bootstrap:before {
    content: '\e81c';
}

.fa-php:before {
    content: '\e81b';
}

.fa-python:before {
    content: '\e81a';
}

.fa-js:before {
    content: '\e819';
}

.fa-user:before {
    content: '\e816';
}

.fa-rotate:before {
    content: '\e813';
}

.fa-adjust:before {
    content: '\e80b';
}

.fa-caret-up:before {
    content: '\e80a';
}

.fa-caret-down:before {
    content: '\e809';
}

.fa-twitter-square:before {
    content: '\e808';
}

.fa-facebook-square:before {
    content: '\e806';
}

.fa-envelope:before {
    content: '\e805';
}

.fa-save:before {
    content: '\e804';
}

.fa-thumbs-o-up:before {
    content: '\e803';
}

.fa-search:before {
    content: '\e802';
}

.fa-css3:before {
    content: '\f13c';
}

.fa-instagram:before {
    content: '\f16d';
}

.fa-graduation-cap:before {
    content: '\f19d';
}

.fa-linkedin-square:before {
    content: '\f30c';
}

span.marked, span.deprecated {
    color: #e80000;
    background-color: transparent;
}

.w3-code span.marked {
    color: #e80000;
    background-color: transparent;
}

.w3-codeline {
    background-color: #E7E9EB;
    color: #000;
    font-family: Consolas,"courier new";
    padding: 15px;
}

#nav_login {
    background-color: #f1f1f1;
    color: #000;
}

.loginmodalform {
    margin: auto;
    width: 100%;
    max-width: 700px;
    text-align: left;
    padding: 20px 40px;
}

.loginmodaldiv input {
    width: 100%;
    border: 1px solid #ccc;
    padding: 8px 12px;
}

.loginmodaldiv .login_submit_container {
    text-align: right;
}

.loginmodaldiv button {
    width: 30%;
    min-width: 120px;
    border: none;
    border-radius: 5px;
    padding: 6px 10px;
    background-color: #4CAF50;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    font-family: "Segoe UI",Arial,sans-serif;
}

    .loginmodaldiv button:hover {
        background-color: #46a049;
        color: #fff;
    }

    .loginmodaldiv button:focus {
        outline: none
    }

.loginmodaldiv a {
    padding: 0 !important;
    color: #000;
}

.login_newusertext {
    width: auto;
    float: right;
    text-align: right;
}

.login_forgotpasswordtext {
    width: auto;
    float: left;
}

@media screen and (max-width:700px) {
    .loginmodaldiv .login_submit_container {
        text-align: center;
    }

    .login_newusertext {
        width: 100%;
        text-align: center;
        margin-top: 20px;
    }

    .login_forgotpasswordtext {
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }
}

.darktheme .w3-code span.marked {
    color: #ff9999;
    background-color: transparent;
}

.darktheme .w3-example.w3-light-grey {
    background-color: rgb(40,44,52) !important;
    color: white;
}

.intro {
    font-size: 16px
}

.w3-btn, .w3-btn:link, .w3-btn:visited {
    color: #FFFFFF;
    background-color: #4CAF50
}

a.w3-btn[href*="exercise.asp"], a.w3-btn[href*="exercise_js.asp"] {
    margin: 10px 5px 0 0
}

a.btnplayit, a.btnplayit:link, a.btnplayit:visited {
    border-radius: 5px;
    background-color: #FFAD33;
    padding: 1px 10px 2px 10px;
    font-size: 16px;
    font-family: 'Source Sans Pro', sans-serif;
}

    a.btnplayit:hover, a.btnplayit:active {
        background-color: #ffffff;
        color: #FFAD33
    }

    a.btnplayit:hover {
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    }

a.btnsmall:link, a.btnsmall:visited, a.btnsmall:active, a.btnsmall:hover {
    float: right;
    padding: 1px 10px 2px 10px;
    font-size: 16px;
    font-family: 'Source Sans Pro', sans-serif;
}

a.btnsmall:hover {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

a.btnsmall:active, a.btnsmall:hover {
    color: #4CAF50;
    background-color: #ffffff
}

.tagcolor {
    color: mediumblue
}

.tagnamecolor {
    color: brown
}

.attributecolor {
    color: red
}

.attributevaluecolor {
    color: mediumblue
}

.commentcolor {
    color: green
}

.cssselectorcolor {
    color: brown
}

.csspropertycolor {
    color: red
}

.csspropertyvaluecolor {
    color: mediumblue
}

.cssdelimitercolor {
    color: black
}

.cssimportantcolor {
    color: red
}

.jscolor {
    color: black
}

.jskeywordcolor {
    color: mediumblue
}

.jsstringcolor {
    color: brown
}

.jsnumbercolor {
    color: red
}

.jspropertycolor {
    color: black
}

.javacolor {
    color: black
}

.javakeywordcolor {
    color: mediumblue
}

.javastringcolor {
    color: brown
}

.javanumbercolor {
    color: red
}

.javapropertycolor {
    color: black
}

.kotlincolor {
    color: black
}

.kotlinkeywordcolor {
    color: mediumblue
}

.kotlinstringcolor {
    color: brown
}

.kotlinnumbercolor {
    color: red
}

.kotlinpropertycolor {
    color: black
}

.phptagcolor {
    color: red
}

.phpcolor {
    color: black
}

.phpkeywordcolor {
    color: mediumblue
}

.phpglobalcolor {
    color: goldenrod
}

.phpstringcolor {
    color: brown
}

.phpnumbercolor {
    color: red
}

.pythoncolor {
    color: black
}

.pythonkeywordcolor {
    color: mediumblue
}

.pythonstringcolor {
    color: brown
}

.pythonnumbercolor {
    color: red
}

.angularstatementcolor {
    color: red
}

.sqlcolor {
    color: black
}

.sqlkeywordcolor {
    color: mediumblue
}

.sqlstringcolor {
    color: brown
}

.sqlnumbercolor {
    color:
}

.darktheme .w3-code {
    background-color: rgb(40,44,52);
    color: white;
    border-left-color: rgb(40,44,52)
}

.darktheme .w3-codeline {
    background-color: rgb(40,44,52);
    color: white;
    border-left-color: rgb(40,44,52)
}

.darktheme .w3-example pre {
    background-color: rgb(40,44,52) !important;
    border-left-color: rgb(40,44,52)
}

.darktheme .tagcolor {
    color: #88ccbb /*green2*/ !important
}

.darktheme .tagnamecolor {
    color: #ff9999 /*red*/ !important
}

.darktheme .attributecolor {
    color: #c5a5c5 /*purple*/ !important
}

.darktheme .attributevaluecolor {
    color: #88c999 /*green*/ !important
}

.darktheme .commentcolor {
    color: #999 !important
}

.darktheme .cssselectorcolor {
    color: #ff9999 /*red*/ !important
}

.darktheme .csspropertycolor {
    color: #c5a5c5 /*purple*/ !important
}

.darktheme .csspropertyvaluecolor {
    color: #88c999 /*green*/ !important
}

.darktheme .cssdelimitercolor {
    color: white !important
}

.darktheme .cssimportantcolor {
    color: #ff9999 /*red*/ !important
}

.darktheme .jscolor {
    color: white !important
}

.darktheme .jskeywordcolor {
    color: #c5a5c5 /*purple*/ !important
}

.darktheme .jsstringcolor {
    color: #88c999 /*green*/ !important
}

.darktheme .jsstringtempcolor {
    color: orange /*green*/ !important
}

.darktheme .jsnumbercolor {
    color: #80b6ff /*blue*/ !important
}

.darktheme .jspropertycolor {
    color: white !important
}

.darktheme .javacolor {
    color: white !important
}

.darktheme .javakeywordcolor {
    color: #88c999 /*green*/ !important
}

.darktheme .javastringcolor {
    color: #88c999 /*green*/ !important
}

.darktheme .javanumbercolor {
    color: #88c999 /*green*/ !important
}

.darktheme .javapropertycolor {
    color: white !important
}

.darktheme .kotlincolor {
    color: white !important
}

.darktheme .kotlinkeywordcolor {
    color: #88c999 /*green*/ !important
}

.darktheme .kotlinstringcolor {
    color: #88c999 /*green*/ !important
}

.darktheme .kotlinnumbercolor {
    color: #88c999 /*green*/ !important
}

.darktheme .kotlinpropertycolor {
    color: white !important
}

.darktheme .phptagcolor {
    color: #999 !important
}

.darktheme .phpcolor {
    color: white !important
}

.darktheme .phpkeywordcolor {
    color: #ff9999 /*red*/ !important
}

.darktheme .phpglobalcolor {
    color: white !important
}

.darktheme .phpstringcolor {
    color: #88c999 /*green*/ !important
}

.darktheme .phpnumbercolor {
    color: #88c999 /*green*/ !important
}

.darktheme .pythoncolor {
    color: white !important
}

.darktheme .pythonkeywordcolor {
    color: #ff9999 /*red*/ !important
}

.darktheme .pythonstringcolor {
    color: #88c999 /*green*/ !important
}

.darktheme .pythonnumbercolor {
    color: #88c999 /*green*/ !important
}

.darktheme .angularstatementcolor {
    color: #ff9999 /*red*/ !important
}

.darktheme .sqlcolor {
    color: white !important
}

.darktheme .sqlkeywordcolor {
    color: #80b6ff /*blue*/ !important
}

.darktheme .sqlstringcolor {
    color: #88c999 /*green*/ !important
}

.darktheme .sqlnumbercolor {
    color:
}

@media only screen and (max-device-width: 480px) {
    .w3-code, w3-codeline, .w3-codespan, #w3-exerciseform .exerciseprecontainer {
        font-family: 'Source Code Pro',Menlo,Consolas,monospace;
    }

    .w3-code, w3-codeline {
        font-size: 14px;
    }

    .w3-codespan {
        font-size: 15px;
    }

    #w3-exerciseform .exerciseprecontainer {
        font-size: 15px;
    }

        #w3-exerciseform .exerciseprecontainer input {
            padding: 0;
            height: 1.5em
        }
}

@media screen and (max-width:700px) {
    #mainLeaderboard {
        height: 60px
    }

    #div-gpt-ad-1422003450156-0 {
        float: none;
        margin-left: auto;
        margin-right: auto
    }

    #div-gpt-ad-1422003450156-3 {
        float: none;
        margin-left: auto;
        margin-right: auto
    }
}
/*@media (max-width:1510px) {#topnav .w3-bar:nth-of-type(1) a:nth-of-type(12){display:none;}}*/
@media (max-width:1550px) {
    #topnav .w3-bar:nth-of-type(1) a:nth-of-type(18) {
        display: none;
    }
}

@media (max-width:1475px) {
    #topnav .w3-bar:nth-of-type(1) a:nth-of-type(17) {
        display: none;
    }
}

@media (max-width:1430px) {
    #topnav .w3-bar:nth-of-type(1) a:nth-of-type(16) {
        display: none;
    }
}

@media (max-width:1390px) {
    #topnav .w3-bar:nth-of-type(1) a:nth-of-type(15) {
        display: none;
    }
}

@media (max-width:1330px) {
    #topnav .w3-bar:nth-of-type(1) a:nth-of-type(14) {
        display: none;
    }
}

@media (max-width:1250px) {
    #topnav .w3-bar:nth-of-type(1) a:nth-of-type(13) {
        display: none;
    }
}

@media (max-width:1150px) {
    #topnav .w3-bar:nth-of-type(1) a:nth-of-type(12) {
        display: none;
    }
}
/*@media (max-width:1330px) {#topnav .w3-bar:nth-of-type(1) a:nth-of-type(10){display:none;}}*/
@media (max-width:1100px) {
    #topnav .w3-bar:nth-of-type(1) a:nth-of-type(11) {
        display: none;
    }
}
/*@media (max-width:1200px) {#topnav .w3-bar:nth-of-type(1) a:nth-of-type(9){display:none;}}*/
@media (max-width:993px) {
    #topnav .w3-bar:nth-of-type(1) a:nth-of-type(10) {
        display: none;
    }
}
/*@media (max-width:1100px) {#topnav .w3-bar:nth-of-type(1) a:nth-of-type(8){display:none;}}*/
@media (max-width:930px) {
    #topnav .w3-bar:nth-of-type(1) a:nth-of-type(9) {
        display: none;
    }
}
/*@media (max-width:1000px) {#topnav .w3-bar:nth-of-type(1) a:nth-of-type(7){display:none;}}*/
@media (max-width:810px) {
    #topnav .w3-bar:nth-of-type(1) a:nth-of-type(8) {
        display: none;
    }
}

@media (max-width:770px) {
    #topnav .w3-bar:nth-of-type(1) a:nth-of-type(7) {
        display: none;
    }
}
/*@media (max-width:800px)  {#topnav .w3-bar:nth-of-type(1) a:nth-of-type(19){display:none;}}
@media (max-width:800px)  {#topnav .w3-bar:nth-of-type(1) a:nth-of-type(20){display:none;}}*/
@media (max-width:700px) {
    #topnav .w3-bar:nth-of-type(1) a:nth-of-type(6) {
        display: none;
    }
}

@media (max-width:560px) {
    #topnav .w3-bar:nth-of-type(1) a:nth-of-type(5) {
        display: none;
    }
}

@media (max-width:480px) {
    #topnav .w3-bar:nth-of-type(1) a:nth-of-type(4) {
        display: none;
    }
}

@media (max-width:370px) {
    #topnav .w3-bar:nth-of-type(1) a:nth-of-type(3) {
        display: none;
    }
}

.w3-note {
    background-color: #ffffcc;
    border-left: 6px solid #ffeb3b
}

.w3-warning {
    background-color: #ffdddd;
    border-left: 6px solid #f44336
}

.w3-info {
    background-color: #04AA6D;
    border-left: 6px solid #4CAF50
}

hr[id^="ez-insert-after-placeholder"] {
    margin-top: 0;
}

.phonebr {
    display: none;
}

@media screen and (max-width: 475px) {
    .phonebr {
        display: initial;
    }
}

/*NYTT:*/
#main {
    padding: 16px 32px 32px 32px;
    border-right: 1px solid #f1f1f1;
}

#right {
    padding: 16px 8px;
}

.sidesection .w3-left-align {
    text-align: center !important;
}

#footer {
    padding: 32px;
    border-top: 1px solid #f1f1f1;
}

    #footer hr:first-child {
        display: none;
    }

.w3-info {
    background-color: #D9EEE1;
    border-left: none;
    padding: 32px;
    margin: 24px;
    margin-left: -32px;
    margin-right: -32px;
}

    .w3-info .w3-btn {
        background-color: #04AA6D;
        border-radius: 5px;
    }

.w3-example {
    padding: 8px 20px;
    margin: 24px -20px;
    box-shadow: none !important;
}

.w3-note, .w3-warning {
    border-left: none;
}


/*.w3-panel {*/
.w3-note, .w3-warning {
    margin-top: 24px;
    margin-bottom: 24px;
    margin-left: -32px;
    margin-right: -32px;
    padding: 16px 32px;
}

h1 {
    font-size: 42px;
}

h2 {
    font-size: 32px;
}

.w3-btn:hover, .w3-btn:active, .w3-example a:focus, .nextprev a:focus {
    box-shadow: none;
    background-color: #059862 !important;
}

    .w3-btn:hover.w3-blue, .w3-btn:active.w3-blue, .w3-button:hover.w3-blue, .w3-button:active.w3-blue {
        background-color: #0d8bf2 !important;
        color: #fff !important;
    }

    .w3-btn:hover.w3-white, .w3-btn:active.w3-white, .w3-button:hover.w3-white, .w3-button:active.w3-white {
        background-color: #f1f1f1 !important;
    }

.nextprev .w3-btn:not(.w3-left):not(.w3-right):hover, .nextprev .w3-btn:not(.w3-left):not(.w3-right):active, .nextprev .w3-btn:not(.w3-left):not(.w3-right):focus {
    background-color: #f1f1f1 !important;
}

/*NYTT br:*/

.ws-table-all {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    display: table;
    border: 1px solid #ccc
}

    .ws-table-all tr {
        border-bottom: 1px solid #ddd
    }

        .ws-table-all tr:nth-child(odd) {
            background-color: #fff
        }

        .ws-table-all tr:nth-child(even) {
            background-color: #E7E9EB
        }

    .ws-table-all td, .ws-table-all th {
        padding: 8px 8px;
        display: table-cell;
        text-align: left;
        vertical-align: top
    }

        .ws-table-all th:first-child, .ws-table-all td:first-child {
            padding-left: 16px
        }

.bar-item-hover:hover {
    background-color: #04AA6D !important;
    color: white !important;
}

.mystyle, .mystyle:hover {
    background-color: #282A35 !important;
    color: white !important;
}

#w3loginbtn:hover {
    background-color: #059862 !important;
    color: white !important;
}

@media screen and (min-width:860px) {
    #myAccordion {
        display: none !important;
    }
}

@media screen and (min-width:601px) {
    #navbtn_menu {
        display: none;
    }
}

@media screen and (max-width:700px) {
    #cert_navbtn {
        display: none !important;
    }
}

#myAccordion {
    font-family: 'Source Sans Pro', sans-serif;
    z-index: 1;
}

    #myAccordion .sectionxsclosenavspan {
        display: none;
    }

.ws-css-exercises {
    background-color: #282A35;
    color: white;
}

    .ws-css-exercises .w3-btn {
        background-color: #04AA6D;
        color: white;
    }

a.btnsmall {
    background-color: #04AA6D !important;
    color: white;
    border-radius: 5px;
}

/* NYE farger */

.ws-black {
    background-color: #282A35 !important;
    color: white !important;
}

.ws-hover-black:hover {
    background-color: #000 !important;
    color: white !important;
}


.ws-grey {
    background-color: #E7E9EB !important;
    color: black !important;
}

.ws-yellow {
    background-color: #FFF4A3 !important;
    color: black !important;
}

.ws-green {
    background-color: #04AA6D !important;
    color: white !important;
}

.ws-text-green {
    color: #04AA6D !important;
}

.ws-hover-green:hover {
    background-color: #059862 !important;
    color: white !important;
}

.ws-hover-text-green:hover {
    color: #059862 !important;
}

.ws-light-green {
    background-color: #D9EEE1 !important;
    color: black !important;
}

.ws-turquoise {
    background-color: #96D4D4 !important;
    color: black !important;
}

.ws-pink {
    background-color: #FFC0C7 !important;
    color: black !important;
}

.ws-light-pink {
    background-color: #F3ECEA !important;
    color: black !important;
}

.ws-btn {
    font-size: 17px;
    font-family: 'Source Sans Pro', sans-serif;
    border: none;
    border-radius: 5px;
    display: inline-block;
    padding: 6px 18px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    ;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #04AA6D;
    color: #ffffff
}

    .ws-btn:hover, .ws-btn:active {
        background-color: #059862 !important;
        color: #ffffff;
    }

a.btnsmall:hover {
    box-shadow: none;
}

a.btnsmall:active, a.btnsmall:hover {
    color: #fff;
}

a.btnplayit:hover, a.btnplayit:active {
    background-color: #ff9900 !important;
    color: #fff
}

a.btnplayit:hover {
    box-shadow: none;
}

#w3-exerciseform {
    padding: 20px;
    margin: 32px -20px;
}

p {
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    font-size: 15px;
}

hr {
    margin: 20px -16px;
}

.w3-codespan {
    font-size: 105%;
    background-color: rgba(222,222,222,0.3);
}
/*.w3-example p,.w3-panel p {*/
.w3-example p, .w3-info p, .w3-note p, .w3-warning p {
    margin-top: 1em;
    margin-bottom: 1em;
}

.w3-code, w3-codeline {
    font-size: 15px;
}

#midcontentadcontainer, #mainLeaderboard {
    text-align: center;
    margin-left: -16px;
    margin-right: -16px;
}

.adtext {
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 12px;
    color: #777;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

#snhb-mid_content-0 {
    height: 292px;
    width: 100%;
    position: relative;
    display: table
}

    #snhb-mid_content-0 > p {
        top: 0;
        left: 0;
        width: 100%;
        position: absolute;
        display: block
    }

    #snhb-mid_content-0 > div {
        width: 100% !important;
        padding-top: 15px;
        display: table-cell !important;
        vertical-align: middle;
        text-align: center
    }

#snhb-wide_skyscraper-0 {
    height: 612px;
    position: relative;
    display: block
}

@media screen and (max-width:974px) {
    #snhb-wide_skyscraper-0 {
        height: 62px
    }
}

@media screen and (max-width:600px) {
    .w3-example, #w3-exerciseform {
        margin-left: -32px;
        margin-right: -32px;
        border-radius: 0
    }
}

/*@media only screen and (max-device-width: 480px) {*/
@media only screen and (max-width: 500px) {
    #main {
        padding: 24px;
        padding: 16px
    }

    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 25px;
    }

    .w3-example {
        padding: 8px 16px;
        margin: 24px -16px;
    }

    #w3-exerciseform {
        padding: 8px 16px 16px 16px;
        margin: 24px -16px;
    }
    /*.w3-panel,.w3-info {*/
    .w3-note, .w3-info, .w3-warning {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}