﻿body {
    font-family: 'Open Sans', sans-serif;
    /*    padding-top: 50px;*/
    padding-bottom: 20px;
    /*background-image:url(../Content/images/background.png);*/
    /*  background-color: #EDF0FF;*/
    /*    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='1' y2='0'%3E%3Cstop offset='0' stop-color='%23E849FF'/%3E%3Cstop offset='1' stop-color='%23CF6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FF33B2'/%3E%3Cstop offset='1' stop-color='%23FC0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='%23FFF' fill-opacity='0' stroke-miterlimit='10'%3E%3Cg stroke='url(%23a)' stroke-width='2'%3E%3Cpath transform='translate(0 0)' d='M1409 581 1450.35 511 1490 581z'/%3E%3Ccircle stroke-width='4' transform='rotate(0 800 450)' cx='500' cy='100' r='40'/%3E%3Cpath transform='translate(0 0)' d='M400.86 735.5h-83.73c0-23.12 18.74-41.87 41.87-41.87S400.86 712.38 400.86 735.5z'/%3E%3C/g%3E%3Cg stroke='url(%23b)' stroke-width='4'%3E%3Cpath transform='translate(0 0)' d='M149.8 345.2 118.4 389.8 149.8 434.4 181.2 389.8z'/%3E%3Crect stroke-width='8' transform='rotate(0 1089 759)' x='1039' y='709' width='100' height='100'/%3E%3Cpath transform='rotate(0 1400 132)' d='M1426.8 132.4 1405.7 168.8 1363.7 168.8 1342.7 132.4 1363.7 96 1405.7 96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
*/ background-attachment: fixed;
    background-size: cover;
}
/* Set padding to keep content from hitting the edges */
.body-content {
    /* padding-left: 15px;
    padding-right: 15px;*/
}
.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: linear-gradient(110deg, #00adef 60%, #fdcd3b 40%);
    color: white;
    text-align: center;
}
/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
/*.dl-horizontal dt {
    white-space: normal;
}*/

/* Set width on the form input elements since they're 100% wide by default */
/*input,
select,
textarea {
    max-width: 280px;
}*/
.my-border-25px {
    border-radius: 25px !important;
}
.my-text-darkblue {
    color: #161616;
    font-weight: bold;
}
.my-bg-gradient {
    /*background-color: #aabee5;*/
    /*background-image: url('images/spiral.svg');
    background-size: cover;*/
    background: white; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #00adef, white, #00adef); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.my-header {
    background-color: rgb(0 173 239 / 0.65);
    color: white;
    text-align: center;
    border-radius: 25px;
    padding: 0.5em;
}
.my-border-bottom{
    border-bottom: 0.75em solid rgb(0 173 239 / 0.65);
}
.my-dummy-footer {
    min-height:2em;
}
.my-bg-scribble {
    /*background-color: #aabee5;*/
    background-image: url('images/scribble.svg');
    background-size: cover;
}
.my-bg-dots {
    background-color: #aabee5;
    background-image: url('images/dots.svg');
    background-size: cover;
}

.my-dots-header {
    text-align: center;
    border-radius: 25px;
    padding: 0.5em;
    color: #204c89;
}

.reveal {
    position: relative;
    opacity: 0;
}

    .reveal.active {
        opacity: 1;
    }

.active.fade-bottom {
    animation: fade-bottom 1s ease-in;
}

.active.fade-left {
    animation: fade-left 1s ease-in;
}

.active.fade-right {
    animation: fade-right 1s ease-in;
}

@keyframes fade-bottom {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fade-left {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fade-right {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.top-bar .nav-item {
    display: inline-block;
}

nav {
    padding: 0px;
}

    nav.top-bar-wrap {
        background: #ffc20e;
    }

.top-bar-wrap {
    height: 60px;
    line-height: 60px;
}

.main-nav-wrap {
    height: 40px;
    line-height: 40px;
}

nav.main-nav-wrap {
    background: #00adef;
    font-size: 1.25rem
}

    nav.top-bar-wrap ul,
    nav.main-nav-wrap ul {
        margin-bottom: 0px;
        margin-top: 0px
    }

a.inner-link {
    color: white;
}


/*a.nav-link:hover {
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    border-left: 12px solid rgba(0, 0, 0, 0.3);
}*/
/*a.nav-link {
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    color: #f9f9f9;
    text-transform: uppercase;
    font-family: ' Rubik', sans-serif;*/
/* transform: skew(-25deg);
    transition: all 400ms ease-out*/
/*}*/
/*a .inner-link {
    display: inline-block;*/
/* transform: skew(25deg)*/
/*}*/
/*.nav-link {
    padding: 0px;
}
*/
.top-bar-wrap a {
    padding-left: 12px;
}

.main-nav-wrap a {
    padding-left: 18px;
}

.brand-logo img {
    height: 40px;
    transform: skew(25deg)
}

.brand-phone a {
    display: block;
    font-size: 1.25em;
    text-decoration: none;
    color: #000000;
    letter-spacing: 2px;
    height: 40px;
    line-height: 1.5em;
    transform: skew(25deg)
}

.brand-phone,
.brand-logo {
    padding: 40px;
    position: absolute;
    top: 0;
    height: 100px;
    transform: skewX(-25deg);
}

.brand-logo {
    left: -30px;
    padding-left: 70px;
    background: #00adef;
    border-right: 2px solid #ffb66c;
}

.brand-phone {
    right: 0;
    right: -30px;
    padding-right: 70px;
    background: #ffb66c;
    border-left: 3px solid #6c4013;
}

/* Custom color and variants */
.myyellow {
    background-color: #ffc20e !important;
}

    .myyellow.lighten-1 {
        background-color: #ffc20e !important;
    }

    .myyellow.lighten-2 {
        background-color: #ffcb30 !important;
    }

    .myyellow.lighten-3 {
        background-color: #ffd352 !important;
    }

    .myyellow.lighten-4 {
        background-color: #ffdc74 !important;
    }

    .myyellow.lighten-5 {
        background-color: #FFFFF0 !important;
    }

.myyellow-text {
    color: #ffc20e !important;
}

.mypink-text {
    color: deeppink;
}

.myblue {
    background-color: #00adef !important;
}

.myblue-text {
    color: #00adef !important;
}

.myblue.lighten-5 {
    background-color: #effbff !important;
}

.myblue-text.text-lighten-5 {
    color: #b4d2e4 !important;
}

.myblue.lighten-4 {
    background-color: #8fbcd6 !important;
}

.myblue-text.text-lighten-4 {
    color: #8fbcd6 !important;
}

.myblue.lighten-3 {
    background-color: #69a6c9 !important;
}

.myblue-text.text-lighten-3 {
    color: #69a6c9 !important;
}

.myblue.lighten-2 {
    background-color: #448fbb !important;
}

.myblue-text.text-lighten-2 {
    color: #448fbb !important;
}

.myblue.lighten-1 {
    background-color: #367396 !important;
}

.myblue-text.text-lighten-1 {
    color: #367396 !important;
}

.myblue.darken-1 {
    background-color: #295670 !important;
}

.myblue-text.text-darken-1 {
    color: #295670 !important;
}

.myblue.darken-2 {
    background-color: #22485e !important;
}

.myblue-text.text-darken-2 {
    color: #22485e !important;
}

.myblue.darken-3 {
    background-color: #1b394b !important;
}

.myblue-text.text-darken-3 {
    color: #1b394b !important;
}

body {
    /*background-color: #D1C4E9;*/
    overflow-x: hidden;
}

.bg-white {
    background-color: #fff;
}

.navbar-brand {
    padding: 23.5px 20px;
    font-size: 18px;
}

.navbar-nav {
    width: 100%;
}

.nav-item {
    /* padding: 20px 8px;*/
    margin: 0px 3px;
    text-align: center;
    border-radius: 5px;
   /* font-size: 16px;*/
    color: white;
    position: static;
}

    .nav-item.active {
        color: #EF5350;
    }

    .nav-item:hover {
      /*  color:black;*/
        font-weight:bold;
    }

a {
    color: inherit !important;
}

.nav-link {
    padding: 5px;
}

.navbar-collapse.collapse.in {
    display: block !important;
}

.fa-angle-down {
    padding-left: 10px;
}

.fa-icon {
    font-size: 30px;
    color: #fff;
    background-color: pink;
    margin: 2px 10px 5px 0px;
    border-radius: 10px;
    width: 50px;
    height: 50px;
}

.dropdown-menu {
    margin-top: 0px;
    border: none;
    background-color: #F3E5F5;
    padding: 50px 50px 30px 50px;
}

#dropdown-menu1 {
    position: absolute;
    left: 165px;
}

#dropdown-menu2 {
    position: absolute;
    left: 285px;
}

#dropdown-menu3 {
    position: absolute;
    left: 415px;
}

.tab {
    margin-bottom: 20px;
    width: 230px;
}

    .tab:hover {
        color: #E91E63 !important;
    }

.dropdown-item {
    padding: 0px;
}

    .dropdown-item:hover {
        background-color: inherit;
    }

@media (max-width: 767px) {
    .nav-item {
        width: 100%;
        text-align: left;
        padding-left: 10px;
    }

    .dropdown-menu {
        left: 0 !important;
        position: relative !important;
        padding: 20px;
    }
}


.modalBackground {
    background-color: gray;
    filter: alpha(opacity=90);
    opacity: 0.8;
}

.modalPopup {
    background-color: #FFFFFF;
    border-width: 3px;
    border-style: solid;
    border-color: black; /*padding-top: 12px; /*padding-left: 10px;*/
    width: 85%;
    align-self: center;
    height: 90%;
    overflow: auto;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 100%;
    border-radius: 5px;
    position: center;
}

    .card:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }

.my-bg-disabled {
    background-color: #e9ecef !important;
}
