.wrapper{
    max-width:1200px;
    margin:0 auto;
    padding:0px;
    min-width:320px;
    position:relative;
}
.header{
    width: 100%;
    display: block;
    min-width: 320px;
    padding-top: 0px;
    background: #6abee8;
    background-size: cover;
    position: fixed;
    z-index: 1030;
    height: 80px;
    top: 0;
}
.logo{
    padding:10px 0px 09px 0px;
    margin:0 auto;
    text-align:center;
}


.logofordark{ display:none; }
.gry-grdt .logofordark{display:block; margin:0 auto; text-align:center; font-size:18px; padding:20px 0px; width:300px;}
.red-grdt .logofordark{display:block; margin:0 auto; text-align:center; font-size:18px; padding:20px 0px; width:300px;}
.orange-grdt .logofordark{display:block; margin:0 auto; text-align:center; font-size:18px; padding:20px 0px; width:300px;}
.blue-grdt .logofordark{display:block; margin:0 auto; text-align:center; font-size:18px; padding:20px 0px; width:300px;}
.green-grdt .logofordark{display:block; margin:0 auto; text-align:center; font-size:18px; padding:20px 0px; width:300px;}
.purple-grdt .logofordark{display:block; margin:0 auto; text-align:center; font-size:18px; padding:20px 0px; width:300px;}
.pink-grdt .logofordark{display:block; margin:0 auto; text-align:center; font-size:18px; padding:20px 0px; width:300px;}
.logoforwhite{margin:0 auto; text-align:center; font-size:18px; padding:20px 30px; width:300px;background-color: #165F86;height: 80px;}
.admin .logoforwhite {padding: 15px 30px;}
.gry-grdt .logoforwhite{display:none;}
.red-grdt .logoforwhite{display:none;}
.orange-grdt .logoforwhite{display:none;}
.blue-grdt .logoforwhite{display:none;}
.green-grdt .logoforwhite{display:none;}
.purple-grdt .logoforwhite{display:none;}
.pink-grdt .logoforwhite{display:none;}


.buttonsgrup{ font-size:14px; text-align:center; margin-top:45px; }
.btn-fill {
    background-color: #DA4B38;
    border: 2px solid #DA4B38;
    border-radius: 40px;
    color: #fff;
    display: inline-block;
    text-transform: uppercase;
    padding: 15px 40px;
    line-height: 1.42857;
    margin-right:25px;
}

.btn-fill:hover {
    color: #fff;
    text-decoration:none;
    opacity:0.9;
}

.btn-filla:focus {
    color: #fff !important;
    text-decoration:none;
    opacity:0.9;
}


.btn-border{
    border: 2px solid;
    border-radius: 40px;
    display: inline-block;
    font-size: 13px;
    text-transform: uppercase;
    -moz-user-select: none;
    background-image: none;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    color: #fff;
    padding: 15px 40px;
}

.btn-border:hover{ color:#fff; text-decoration:none; opacity:0.9;}
.btn-border:focus {
    color: #fff;
    text-decoration:none;
    opacity:0.9;
}

.show-grid{background-color:#fff; }

.banner-text { width: 100%; max-width:1200px; margin:0px auto 0 auto; position:relative; }
.banner-text h1 {
    text-align:center;
    display:block;
    font-size:64px;
    font-weight:bold;
    line-height:60px;
    color: #fff;
    letter-spacing:-2px;
    margin: 0 auto 0px auto;
    padding:59px 0px 22px 0px;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, .3);
}

.banner-text h2 {
    text-align:center;
    font-size:20px;
    line-height:32px;
    color:#fff;
    letter-spacing:-1px;
    margin: 0 auto;
    width: 100%;
}

.banner-text h4 {
    font-size:17px;
    line-height:22px;
    color:#38AAD1;
    letter-spacing:-1px;
    margin:10px auto 0px auto;
    width: 100%;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 1);
}
.banner-text h4 a{color:#38AAD1;}

.banner-text .price span{ color:#fff;}
.banner-text .price {
    position: absolute;
    right: 9%;
    top: 12%;
    font-size:22px;
    line-height:27px;
    color: #ffffff;
    margin: 0 auto;

    letter-spacing:-1px;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}


.banner-text i{ font-style:normal;}
.banner-text em{ font-style:normal;}

.banner-text h4 a:hover{ color: #A8A8A8;}

.banner-text b{color: #b8c5cf;}
.banner-text h2 span{color: #b8c5cf;}
.banner-text h2 a {
    color: #b8c5cf;
}
.banner-text hr {
    width: 60%;
    margin: 18px auto 24px auto;
    border-color: #2F2D2E;
    border-color: rgba(150, 150, 150, .1);
}
.banner-text h2 {
    font-size:20px;
    line-height:32px;
    color:#ccc;
    margin: 0 auto;
    width: 100%;
}


@-webkit-keyframes rotating  {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.rotating {
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
}

/*Color Demo*/

.moreoption{ width:100%; display:block;  margin-top:100px;}
.moreoption .boxheader{ border:solid 0px; padding-top:25px; padding-bottom:10px; font-size:17px; color:#fff; }



.buttoncolor{
    color: #fff;
    display: block;
    font-size:13px;
    padding:10px 15px;
    text-decoration: none;
    transition: background 0.3s linear 0s;
    width:12.5%;
    height:30px;
    float:left;
    text-align:center;
    margin:0px 0px;
}
.buttoncolor:hover{ color:#fff; text-decoration:none;}
.buttoncolor:focus{ color:#fff; text-decoration:none;}

.headertlt{ width:100%; padding:40px 0px 15px 0px; letter-spacing:-0.5px; font-size:22px; font-family: 'archivo_narrowregular'; color:#424242;}

.colorlink01{width:40%; float:left; margin:0% 0% 0% 2%; }
.colorlink02{width:40%; float:left; margin:0% 0% 0% 2%; }
.colorlink03{width:14%; float:left; margin:0% 0% 0% 2%; }

.buttoncolor02{
    color: #424242;
    display: block;
    font-size:15px;
    border-radius:2px;
    height:30px;
    padding:10px 15px;
    text-decoration: none;
    transition: background 0.3s linear 0s;
    width:100%;
    border-right:solid 5px #fff;
    float:left;
    text-align:center;
    margin:0% 0% 0% 0%;
    background-color:#f2f2f2;
    border:solid 1px #D9D9D9;
    cursor:pointer;
    text-align:center !important; 
    text-decoration:none !important;
    width:50%; float:left;
}
.buttoncolor02:hover{background-color:#424242; color:#000;}
.buttoncolor02.active{background-color:#424242; color:#fff;}

.main-content {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
} 


@media only screen and (min-width: 230px) and (max-width:501px){
    wrapper { width:100%; margin:0% 0%; }
    .logo{ width:60%; margin:0% 20%;  padding:49px 0px 09px 0px;}
    .colorlink01{ width:92% !important; margin:0% 4%;}
    .colorlink02{ width:92% !important; margin:0% 4%;}
    .colorlink03{ width:92% !important;  margin:0% 4%;}
    .buttoncolor02{ width:100% !important; margin-bottom:2%; }
    .buttoncolor{ width:25%; }
    .moreoption{ width:100%; margin:85px 0 0 0; background-color:transparent !important; border:none !important;
                 -webkit-box-shadow:none !important;
                 -moz-box-shadow:none !important;
                 box-shadow:none !important;}
    .banner-text h1{ font-size:28px; letter-spacing:0px; padding:19px 0px 10px 0px; line-height:44px; }
    .price{ }
    .banner-text h2{ font-size:15px; line-height:24px; letter-spacing:0px; }
    .banner-text{ width:90%; margin:0% 5%;  }
    .btn-border{width:100%;}
    .btn-fill{width:100%; margin-bottom:15px;}
}
@media only screen and (min-width: 502px) and (max-width:780px){
    .wrapper { width:100%; margin:0% 0%; }
    .logo{padding:10px 0px 09px 0px;}
    .colorlink01{ width:92% !important; margin:0% 4%;}
    .colorlink02{ width:92% !important; margin:0% 4%;}
    .colorlink03{ width:92% !important;  margin:0% 4%;}
    .buttoncolor02{ width:100% !important; margin-bottom:2%; }
    .buttoncolor{ width:25%; }
    .moreoption{ width:100%; margin:85px 0 0 0; background-color:transparent !important; border:none !important;
                 -webkit-box-shadow:none !important;
                 -moz-box-shadow:none !important;
                 box-shadow:none !important;}
    .banner-text h1{ font-size:25px; letter-spacing:0px; padding:19px 0px 0px 0px; }
    .price{ display:none; }
    .banner-text h2{ font-size:19px; line-height:32px; letter-spacing:0px; }
    .banner-text{ width:90%; margin:0% 5%;  }
    .btn-border{width:100%;}
    .btn-fill{width:100%; margin-bottom:15px;}
}

@media only screen and (min-width: 781px) and (max-width:1064px) {
    .wrapper { width:96%; margin:0% 2%; }
    .colorlink01{ width:100% !important; margin:0%;}
    .colorlink02{ width:100% !important; margin:0%;}
    .colorlink03{ width:100% !important; margin:0%;}
    .buttoncolor02{ width:50% !important; margin-bottom:1%; }
    .banner-text{ width:80%; margin:0% 10%;  }
    .banner-text h1{ font-size:28px; letter-spacing:0px; padding:79px 0px 0px 0px; }
    .banner-text h2{ font-size:18px; line-height:24px; letter-spacing:0px; }
}


@media only screen and (min-width: 1024px) and (max-width:1200px) {
    .wrapper { width:96%; margin:0% 2%; }
    .colorlink01{ width:100% !important; margin:0%; }
    .colorlink02{ width:100% !important; margin:0%;}
    .colorlink03{ width:100% !important; margin:0%;}

}

.error,
.error_custom{
    color:red !important;
    font-style:normal;
    padding-left:5px;
}
.loading{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:rgba(0,0,0,0.5);
    z-index:1000;
} 
.uil-spin-css {
    background: none;
    position: relative;
    width: 200px;
    height: 200px;
    margin-left:-150px;
    margin-top:-150px;
    top:50vh;
    left:50vw;
}

@-webkit-keyframes uil-spin-css {
    0% {
        opacity: 1;
        -ms-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -webkit-transform: scale(1.5);
        -o-transform: scale(1.5);
        transform: scale(1.5);
    }
    100% {
        opacity: 0.1;
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}
@-webkit-keyframes uil-spin-css {
    0% {
        opacity: 1;
        -ms-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -webkit-transform: scale(1.5);
        -o-transform: scale(1.5);
        transform: scale(1.5);
    }
    100% {
        opacity: 0.1;
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}
@-moz-keyframes uil-spin-css {
    0% {
        opacity: 1;
        -ms-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -webkit-transform: scale(1.5);
        -o-transform: scale(1.5);
        transform: scale(1.5);
    }
    100% {
        opacity: 0.1;
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}
@-ms-keyframes uil-spin-css {
    0% {
        opacity: 1;
        -ms-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -webkit-transform: scale(1.5);
        -o-transform: scale(1.5);
        transform: scale(1.5);
    }
    100% {
        opacity: 0.1;
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}
@-moz-keyframes uil-spin-css {
    0% {
        opacity: 1;
        -ms-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -webkit-transform: scale(1.5);
        -o-transform: scale(1.5);
        transform: scale(1.5);
    }
    100% {
        opacity: 0.1;
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}
@-webkit-keyframes uil-spin-css {
    0% {
        opacity: 1;
        -ms-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -webkit-transform: scale(1.5);
        -o-transform: scale(1.5);
        transform: scale(1.5);
    }
    100% {
        opacity: 0.1;
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}
@-o-keyframes uil-spin-css {
    0% {
        opacity: 1;
        -ms-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -webkit-transform: scale(1.5);
        -o-transform: scale(1.5);
        transform: scale(1.5);
    }
    100% {
        opacity: 0.1;
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes uil-spin-css {
    0% {
        opacity: 1;
        -ms-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -webkit-transform: scale(1.5);
        -o-transform: scale(1.5);
        transform: scale(1.5);
    }
    100% {
        opacity: 0.1;
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}
.uil-spin-css > div {
    width: 24px;
    height: 24px;
    margin-left: 4px;
    margin-top: 4px;
    position: absolute;
}
.uil-spin-css > div > div {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    background: #fff;
}
.uil-spin-css > div:nth-of-type(1) > div {
    -ms-animation: uil-spin-css 1s linear infinite;
    -moz-animation: uil-spin-css 1s linear infinite;
    -webkit-animation: uil-spin-css 1s linear infinite;
    -o-animation: uil-spin-css 1s linear infinite;
    animation: uil-spin-css 1s linear infinite;
    -ms-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
    -o-animation-delay: 0s;
    animation-delay: 0s;
}
.uil-spin-css > div:nth-of-type(1) {
    -ms-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
    -moz-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
    -webkit-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
    -o-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
    transform: translate(84px, 84px) rotate(45deg) translate(70px, 0);
}
.uil-spin-css > div:nth-of-type(2) > div {
    -ms-animation: uil-spin-css 1s linear infinite;
    -moz-animation: uil-spin-css 1s linear infinite;
    -webkit-animation: uil-spin-css 1s linear infinite;
    -o-animation: uil-spin-css 1s linear infinite;
    animation: uil-spin-css 1s linear infinite;
    -ms-animation-delay: 0.12s;
    -moz-animation-delay: 0.12s;
    -webkit-animation-delay: 0.12s;
    -o-animation-delay: 0.12s;
    animation-delay: 0.12s;
}
.uil-spin-css > div:nth-of-type(2) {
    -ms-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
    -moz-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
    -webkit-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
    -o-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
    transform: translate(84px, 84px) rotate(90deg) translate(70px, 0);
}
.uil-spin-css > div:nth-of-type(3) > div {
    -ms-animation: uil-spin-css 1s linear infinite;
    -moz-animation: uil-spin-css 1s linear infinite;
    -webkit-animation: uil-spin-css 1s linear infinite;
    -o-animation: uil-spin-css 1s linear infinite;
    animation: uil-spin-css 1s linear infinite;
    -ms-animation-delay: 0.25s;
    -moz-animation-delay: 0.25s;
    -webkit-animation-delay: 0.25s;
    -o-animation-delay: 0.25s;
    animation-delay: 0.25s;
}
.uil-spin-css > div:nth-of-type(3) {
    -ms-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
    -moz-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
    -webkit-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
    -o-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
    transform: translate(84px, 84px) rotate(135deg) translate(70px, 0);
}
.uil-spin-css > div:nth-of-type(4) > div {
    -ms-animation: uil-spin-css 1s linear infinite;
    -moz-animation: uil-spin-css 1s linear infinite;
    -webkit-animation: uil-spin-css 1s linear infinite;
    -o-animation: uil-spin-css 1s linear infinite;
    animation: uil-spin-css 1s linear infinite;
    -ms-animation-delay: 0.37s;
    -moz-animation-delay: 0.37s;
    -webkit-animation-delay: 0.37s;
    -o-animation-delay: 0.37s;
    animation-delay: 0.37s;
}
.uil-spin-css > div:nth-of-type(4) {
    -ms-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
    -moz-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
    -webkit-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
    -o-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
    transform: translate(84px, 84px) rotate(180deg) translate(70px, 0);
}
.uil-spin-css > div:nth-of-type(5) > div {
    -ms-animation: uil-spin-css 1s linear infinite;
    -moz-animation: uil-spin-css 1s linear infinite;
    -webkit-animation: uil-spin-css 1s linear infinite;
    -o-animation: uil-spin-css 1s linear infinite;
    animation: uil-spin-css 1s linear infinite;
    -ms-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
    -o-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.uil-spin-css > div:nth-of-type(5) {
    -ms-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
    -moz-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
    -webkit-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
    -o-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
    transform: translate(84px, 84px) rotate(225deg) translate(70px, 0);
}
.uil-spin-css > div:nth-of-type(6) > div {
    -ms-animation: uil-spin-css 1s linear infinite;
    -moz-animation: uil-spin-css 1s linear infinite;
    -webkit-animation: uil-spin-css 1s linear infinite;
    -o-animation: uil-spin-css 1s linear infinite;
    animation: uil-spin-css 1s linear infinite;
    -ms-animation-delay: 0.62s;
    -moz-animation-delay: 0.62s;
    -webkit-animation-delay: 0.62s;
    -o-animation-delay: 0.62s;
    animation-delay: 0.62s;
}
.uil-spin-css > div:nth-of-type(6) {
    -ms-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
    -moz-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
    -webkit-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
    -o-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
    transform: translate(84px, 84px) rotate(270deg) translate(70px, 0);
}
.uil-spin-css > div:nth-of-type(7) > div {
    -ms-animation: uil-spin-css 1s linear infinite;
    -moz-animation: uil-spin-css 1s linear infinite;
    -webkit-animation: uil-spin-css 1s linear infinite;
    -o-animation: uil-spin-css 1s linear infinite;
    animation: uil-spin-css 1s linear infinite;
    -ms-animation-delay: 0.75s;
    -moz-animation-delay: 0.75s;
    -webkit-animation-delay: 0.75s;
    -o-animation-delay: 0.75s;
    animation-delay: 0.75s;
}
.uil-spin-css > div:nth-of-type(7) {
    -ms-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
    -moz-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
    -webkit-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
    -o-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
    transform: translate(84px, 84px) rotate(315deg) translate(70px, 0);
}
.uil-spin-css > div:nth-of-type(8) > div {
    -ms-animation: uil-spin-css 1s linear infinite;
    -moz-animation: uil-spin-css 1s linear infinite;
    -webkit-animation: uil-spin-css 1s linear infinite;
    -o-animation: uil-spin-css 1s linear infinite;
    animation: uil-spin-css 1s linear infinite;
    -ms-animation-delay: 0.87s;
    -moz-animation-delay: 0.87s;
    -webkit-animation-delay: 0.87s;
    -o-animation-delay: 0.87s;
    animation-delay: 0.87s;
}
.uil-spin-css > div:nth-of-type(8) {
    -ms-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
    -moz-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
    -webkit-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
    -o-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
    transform: translate(84px, 84px) rotate(360deg) translate(70px, 0);
}