/*
Theme Name: Globals - Material and Bootstrap HTML template
Module : Hosting
Description: Custom styles are defined in this class
Author: Jyostna
Author URI: http://themeforest.net/user/jyostna
Version: 1.0 
-------------------------------------------- */


/*
TABLE OF CONTENT
-------------------------------------------------
1- IMPORTS
2- HEADER STYLES
3- DROPDOWN MENU STYLES
4- TYPOGRAPHY STYLES
    4.1 TYPO SECTION
    4.2 MARK SECTION
5- COLOR STYLES
6- BUTTON STYLES
---------------------------------------------- */


/*========================== IMPORTS =======================*/

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100,700);

/*========================== IMPORTS END =======================*/


/*========================== HEADER STYLES =======================*/

.list {
    margin-top: -43px !important;
    margin-bottom: -5px !important;
    padding-top: 11px !important;
    color: #9699a6 !important;
    padding-bottom: 11px !important;
    font-size: 14px !important;
}

@media screen and (min-width: 610px) {
    .list {
        margin-top: -34px !important;
        margin-bottom: 0 !important;
        padding-top: 11px !important;
        color: #9699a6 !important;
        padding-bottom: 11px !important;
        font-size: 14px !important;
    }
}

.list:hover {
    color: #00bff3 !important;
}

.dropdown {
    list-style-type: none;
}

.navbar.navbar,
.navbar-default.navbar {
    background-color: #222629 !important;
    color: rgba(255, 255, 255, .84);
}

.global-logo {
    position: relative;
    top: -9px;
    left: 10px;
    margin-left: 45px;
}

@media screen and (min-width: 610px) {
    .global-logo {
        margin-left: 60px;
        position: relative;
        top: -9px;
        padding-right: 20px;
    }
}

header {
    background-color: #222629 !important;
}

.ul-pad {
    margin-top: 0;
    margin-bottom: 10px;
    margin-left: -40px;
}

#dropdown .dropdown {
    font-size: 30px;
    padding: 20px;
}

.menu-icon {
    color: #9699a6;
    padding-top: 31px;
}

@media screen and (min-width: 610px) {
    .menu-icon {
        color: #9699a6;
        padding-top: 52px;
    }
}

.menu-icon2 {
    color: #9699a6;
}

.menu-icon2:hover {
    color: #9699A6;
}

.logo {
    margin-top: 41px;
}

.main-logo {
    margin-left: 71px;
    margin-top: -50px;
}

.ul-style {
    list-style: none;
}

a.dropanchor {
    color: #9699a6 !important;
    margin-top: 4px;
    margin-bottom: 4px;
}

.dropanchor,
.dropanchor:hover,
.dropanchor:focus {
    color: #00bff3 !important;
}

.dropdown-menu {
    border-radius: 0;
}

.icon-preview ul>li {
    margin: -5px 0;
}

.dropdown-btn {
    position: absolute;
    top: 100%;
    left: -88% !important;
}

.btn-primary:hover:not(.btn-link):not(.btn-flat) {
    background-color: #00bff3;
}

.menu-plus-btn {
    color: #ffffff !important;
    background-color: #f04e4e !important;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    z-index: 1;
    position: relative;
    top: 82px;
    right: 23px;
}

.plus-btn-icon {
    position: relative;
    right: 6px;
    top: 2px;
}

.menu-plus-btn:hover {
    background-color: #00bff3 !important;
}

.menu-i {
    color: #cdcfd7 !important;
    font-size: 17px;
    margin-right: 12px;
    position: relative;
    top: 1px;
}

.icon-centent {
    font-size: 14px !important;
    color: #9699a6 !important;
}

.a-pad {
    margin-top: 9px;
    margin-bottom: 9px;
}

.float-hover:hover {
    background-color: #93c25e;
}


/*========================== HEADER STYLES END =======================*/


/*================= DROPDOWN MENU STYLES ===================*/

.menu {
    width: 200px;
    background-color: #fff;
    position: absolute;
    top: 100%;
    left: 0;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
}

.toggle-menu-possition {
    position: relative;
    right: 16px;
    font-weight: normal;
}


/*================= DROPDOWN MENU STYLES END ===================*/


/*================= TYPOGRAPHY STYLES ===================*/

.typography {
    background-color: #43494e;
}

body {
    background-color: #fafafa;
}

.typo-h {
    font-family: 'Roboto', sans-serif;
    font-weight: lighter;
    color: #fff;
    font-size: 42px;
    margin: 5% 0 5% 0;
}


/*================= 4.1 TYPO SECTION ===================*/

.typo-section {
    background-color: #fafafa;
}

.r-pad1 {
    margin-top: 7.7%;
}

.li-style {
    color: #cdcfd7;
    font-size: 14px;
    list-style: none;
    margin-bottom: 3px;
}

.span-property {
    color: #9699a6;
    font-size: 14px;
}

.h1 {
    margin-top: 32px;
    font-size: 46px;
    font-family: 'roboto', sans-serif;
    font-weight: 300;
}

.h2 {
    margin-top: 24px;
    font-size: 36px;
    font-family: 'roboto', sans-serif;
    font-weight: 300;
}

.h3 {
    margin-top: 24px;
    font-size: 30px;
    font-family: 'roboto', sans-serif;
    font-weight: 300;
}

.h4 {
    margin-top: 24px;
    font-size: 28px;
    font-family: 'roboto', sans-serif;
    font-weight: 300;
}

.h5 {
    margin-top: 24px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 24px;
}

.h6 {
    margin-top: 24px;
    font-size: 18px;
    font-family: 'roboto', sans-serif;
    font-weight: 300;
}

.h1-dark-color {
    color: #31364c;
}

.h1-dark-color2 {
    color: #31364c;
    font-family: 'roboto', sans-serif !important;
    font-weight: bold !important;
}

.bold {
    font-family: 'roboto', sans-serif !important;
    font-weight: bold !important;
}

.typo-content {
    background-color: #fafafa;
}

.light-border {
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    margin-top: 7%;
    padding-top: 8.6%;
    padding-bottom: 7.5%;
}

.typo-t {
    color: #9699a6;
    font-size: 16px;
}

.typo-t2 {
    color: #9699a6;
    font-size: 14px;
}

.h3-30px {
    color: #31364c;
    font-size: 30px;
    margin-top: 50px;
}

.h1-40px {
    color: #31364c;
    font-size: 46px;
    margin-top: 32px;
}

.quote-row {
    margin-top: 8.2%;
    padding-bottom: 7%;
    border-bottom: 1px solid #ebebeb;
}

blockquote {
    border: none;
}

blockquote p:before {
    content: '"';
    position: relative;
    bottom: 0;
    font-weight: bolder;
    color: #6739b6;
    top: 0;
}

.quate-h {
    font-family: 'Roboto', sans-serif;
    color: #6739b6;
    font-size: 30px;
    margin-left: 45px;
    margin-top: 9%;
    font-weight: 300;
}

.frank {
    margin-left: 43px;
}

.quote-backgroud {
    background-color: #6739b6;
    margin-top: 30px;
}

.quate-h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: #ffffff;
    font-size: 30px;
    margin-left: 45px;
    margin-top: 4%;
}

.frank2 {
    margin-left: 43px;
    color: #ffffff;
    margin-bottom: 20px;
}

blockquote .quate-h2:before {
    content: '"';
    position: relative;
    bottom: 0;
    font-weight: bolder;
    color: #ffffff;
    top: 0;
}


/*================= 4.1 TYPO SECTION END ===================*/


/*=================  4.2 MARK SECTION ===================*/

.mark {
    background-color: #fafafa;
}

.mark-row {
    margin-top: 8.2%;
    padding-bottom: 7.2%;
}

.style-sign-mark {
    margin-top: 36px;
}

.sign-list {
    color: #9699a6;
    font-size: 14px;
    margin-top: 12px;
}

.remove-list {
    color: #cdcfd7;
    margin-top: 12px;
}

.i-colr {
    color: #ccdb38;
    font-size: 21px;
    margin-right: 12px;
    position: relative;
    top: 3px !important;
}

.i-colr-red {
    color: #f04e4e;
    font-size: 21px;
    margin-right: 12px;
    position: relative;
    top: 3px !important;
}

.sign-mark {
    margin-left: -40px;
}


/*=================  4.2 MARK SECTION END ===================*/


/*================= TYPOGRAPHY STYLES END ===================*/


/*================= COLOR STYLES ===================*/

.colors {
    background-color: #fafafa;
}

.color-box1 {
    background-color: #f04e4e;
    height: 50px;
    margin-top: 30px;
}

.color-box2 {
    background-color: #ff9700;
    height: 50px;
    margin-top: 30px;
}

.color-box3 {
    background-color: #fecc17;
    height: 50px;
    margin-top: 30px;
}

.color-box4 {
    background-color: #00bff3;
    height: 50px;
    margin-top: 30px;
}

.color-box5 {
    background-color: #ccdb38;
    height: 50px;
    margin-top: 30px;
}

.color-box6 {
    background-color: #6739b6;
    height: 50px;
    margin-top: 30px;
}

.p-col {
    padding: 0;
}

.color-row {
    margin-top: 7.7%;
    padding-bottom: 8.8%;
}


/*================= COLOR STYLES END ===================*/


/*================= BUTTON STYLES ===================*/

.btn-row {
    margin-top: 8.7%;
    padding-bottom: 8.7%;
    border-bottom: 1px solid #ebebeb;
}

.mini-btn {
    font-size: 13px;
    color: #ffffff !important;
    background-color: #252525 !important;
    border-radius: 16px;
    width: 170px;
    height: 32px;
    font-family: 'roboto', sans-serif;
    font-weight: normal;
    text-transform: capitalize;
    margin: 0 !important;
}

.btn-i1 {
    color: #ffffff;
    font-size: 10px;
}

.btn-div1 {
    margin-top: 20px;
    padding-bottom: 20px;
}

@media screen and (min-width: 610px) {
    .btn-div1 {
        margin-top: 80px;
        padding-bottom: 0;
    }
}

.small-btn {
    font-size: 14px;
    color: #ffffff !important;
    background-color: #252525 !important;
    border-radius: 20px;
    width: 170px;
    height: 40px;
    font-family: 'roboto', sans-serif;
    font-weight: normal;
    text-transform: capitalize;
    margin: 0 !important;
}

.btn-i2 {
    color: #ffffff;
    font-size: 13px;
}

.btn-div2 {
    margin-top: 20px;
    padding-bottom: 20px;
}

@media screen and (min-width: 610px) {
    .btn-div2 {
        margin-top: 75px;
        padding-bottom: 0;
    }
}

.medium-btn {
    font-size: 16px;
    color: #ffffff !important;
    background-color: #252525 !important;
    border-radius: 27px;
    width: 170px;
    height: 54px;
    font-family: 'roboto', sans-serif;
    font-weight: normal;
    text-transform: capitalize;
    margin: 0 !important;
}

.btn-i3 {
    color: #ffffff;
    font-size: 14px;
    position: relative;
    top: 1px;
}

.btn-div3 {
    margin-top: 20px;
    padding-bottom: 20px
}

@media screen and (min-width: 610px) {
    .btn-div3 {
        margin-top: 60px;
        padding-bottom: 0;
    }
}

.large-btn {
    font-size: 18px;
    color: #ffffff !important;
    background-color: #252525 !important;
    border-radius: 32px;
    width: 260px;
    height: 64px;
    font-family: 'roboto', sans-serif;
    font-weight: normal;
    text-transform: capitalize;
    margin: 0 !important;
}

.btn-i4 {
    color: #ffffff;
    font-size: 15px;
    position: relative;
    top: 2px;
}

.btn-div4 {
    margin-top: 20px;
    padding-bottom: 20px;
}

@media screen and (min-width: 610px) {
    .btn-div4 {
        margin-top: 50px;
        padding-bottom: 0;
    }
}

.xl-btn {
    background-color: #252525 !important;
    border-radius: 37px;
    color: #ffffff !important;
    font-family: "roboto", sans-serif;
    font-size: 24px;
    height: 74px;
    margin: 0 !important;
    text-transform: capitalize;
    width: 270px;
    font-weight: 500;
}

.colr-btn-icon {
    color: #9699a6 !important;
}

.btn-i5 {
    color: #ffffff;
    font-size: 14px;
    position: relative;
    top: -1px;
}

.btn-div5 {
    margin-top: 40px;
}

.colr {
    background-color: #f2f3f5 !important;
}

.colr2 {
    background-color: #f04e4e !important;
}

.colr3 {
    background-color: #fecc17 !important;
}

.colr4 {
    background-color: #ccdb38 !important;
}

.colr5 {
    background-color: #00bff3 !important;
}

.colr6 {
    background-color: #ff9700 !important;
}

.toggle-btn-row {
    margin-top: 8.7%;
    padding-bottom: 8.7%;
}

.t-btn1 {
    width: 40px;
    height: 40px;
    background-color: #252525;
    border-radius: 50%;
}

.t-btn2 {
    width: 40px;
    height: 40px;
    background-color: #00bff3;
    border-radius: 50%;
}

.t-btn3 {
    width: 70px;
    height: 70px;
    background-color: #f04e4e;
    border-radius: 50%;
}

.r-btn {
    margin-left: 10%;
}

.t-btn4 {
    width: 40px;
    height: 40px;
    background-color: #00bff3;
    margin-right: -4px;
    position: relative;
    top: 0;
}

.t-btn5 {
    width: 40px;
    height: 40px;
    background-color: #07b6e6;
    margin-right: -4px;
}

.t-btn6 {
    width: 40px;
    height: 40px;
    background-color: #00afdf;
}

.t-icon {
    font-size: 15px;
    margin-top: 2px;
}

.t-icon3 {
    font-size: 35px;
}

.t-icon4 {
    font-size: 22px;
    margin-top: 2px;
}

.t-btn-box {
    margin-top: 36px;
}

.forms-row {
    margin-top: 7.7%;
    padding-bottom: 7%;
}

.control-box {
    opacity: 1;
    font-size: 16px;
    padding-bottom: 10px;
}

.form-input-box {
    margin-top: 30px;
}

.form-input-box2 {
    background-color: #25292c;
}

.form-div {
    margin: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
}

.control-label.color-white {
    color: rgb(255, 255, 255) !important;
}

.text-group2 {
    margin-top: 30px;
}

.select-control {
    font-size: 16px;
    color: #9699a6;
}

.select-input1 {
    margin-top: 50px;
}

.select-input {
    margin-top: 40px;
}

.option1:hover {
    color: #93c25e !important;
    background-color: #fafafa !important;
}

button {
    color: white;
    border: none;
}

ul {
    list-style-type: none;
}

.dubble-quates {
    background-color: #fafafa;
}

.style-input {
    background-image: linear-gradient(#00bff3, #00bff3) !important;
    border-bottom: 2px solid #cdcfd7;
}

.style-input2 {
    background-image: linear-gradient(#00bff3, #00bff3) !important;
    border-bottom: 2px solid #9699a6;
    color: #ffffff;
}

.form-input-sm-box2 {
    background-color: #6739b6;
}

.form-input-sm-box1 {
    background-color: #00bff3;
}

.style-input-sm1 {
    background-image: linear-gradient(#ffffff, #ffffff) !important;
    border-bottom: 2px solid #5bdcff;
    color: #ffffff;
}

.style-input-sm2 {
    background-image: linear-gradient(#ffffff, #ffffff) !important;
    border-bottom: 2px solid #8860cd;
    color: #ffffff;
}

.large-input {
    margin-top: 10%;
}

.style-select-box {
    background-color: #00bff3;
    padding: 1px 20px 44px 39px;
    margin-top: 40px;
}

.select-input1 {
    background-image: linear-gradient(#00bff3, #00bff3) !important;
    border-bottom: 2px solid #5bdcff !important;
}

.select-input {
    background-image: linear-gradient(#00bff3, #00bff3) !important;
    border-bottom: 2px solid #cdcfd7 !important;
}

.btn-li {
    text-align: left;
}

@media screen and (min-width: 610px) {
    .btn-li {
        text-align: center;
    }
}

.style-select-box.width-adj {
    float: left;
    margin-left: 2%;
    padding: 0;
    width: 48%;
}

.style-select-box.width-adj-1 {
    float: left;
    margin-right: 2%;
    padding: 0;
    width: 48%;
}

.box-2 {
    background-color: #6739b6;
    padding: 2px 20px;
}

.box-3 {
    background-color: #00bff3;
    padding: 1px 20px;
}

.style-select-box.width-adj {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}

.style-select-box.width-adj-1 {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}

.box-3 .form-group {
    padding: 0;
}

.box-2 .form-group {
    padding: 0;
}

.box-3 .form-group.is-focused .form-control {
    background-image: linear-gradient(#fff, #fff) !important;
}

.box-2 .form-group.is-focused .form-control {
    background-image: linear-gradient(#fff, #fff) !important;
}

.box-3 .form-group.is-focused label,
.form-group.is-focused label.control-label {
    color: #5bdcff !important;
}

.box-3 .forms-row .form-group select,
.forms-row .form-group input:focus,
.forms-row .form-group input:valid,
.forms-row .form-group input.form-file,
.forms-row .form-group input.has-value,
.forms-row .form-group textarea:focus,
.forms-row .form-group textarea:valid,
.forms-row .form-group textarea.form-file,
.forms-row .form-group textarea.has-value {
    color: #fff;
}

.box-2 .forms-row .form-group select,
.forms-row .form-group input:focus,
.forms-row .form-group input:valid,
.forms-row .form-group input.form-file,
.forms-row .form-group input.has-value,
.forms-row .form-group textarea:focus,
.forms-row .form-group textarea:valid,
.forms-row .form-group textarea.form-file,
.forms-row .form-group textarea.has-value {
    color: #fff;
}


/*select styles start*/

.style-select-box .select2-container--default .select2-selection--single {
    border: 0 none;
    background-color: transparent;
}

.select2-search--dropdown {
    display: none;
    padding: 4px;
}

.select2-container--default .select2-results > .select2-results__options {
    overflow-y: hidden;
}

.select2-dropdown.select2-dropdown--below {
    border: 0 none;
}

.select2-results__option {
    padding: 10px;
}

.select2-results {
    display: block;
    height: auto;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #00BFF3;
}

.select2-container {
    border-bottom: 1px solid #CDCED8;
}

.select2-dropdown.select2-dropdown--above {
    border: 0 none;
}

.select2-container--default .select2-selection--single {
    border: none;
    background: transparent;
}

.border-color.select2-container {
    border-bottom: 1px solid #000;
}

.p-col {
    padding: 0;
}

.color-box1-1 {
    background-color: #F04D4E;
    height: 60px;
}

.color-box2-1 {
    background-color: #FF9700;
    height: 60px;
}

.color-box3-1 {
    background-color: #FECC17;
    height: 60px;
}

.color-box4-1 {
    background-color: #00BFF3;
    height: 60px;
}

.color-box5-1 {
    background-color: #CCDB38;
    height: 60px;
}

.color-box6-1 {
    background-color: #6739B6;
    height: 60px;
}


/*================= BUTTON STYLES END ===================*/