@import url(https://fonts.googleapis.com/css?family=Lekton:400,400i,700|Montserrat+Alternates:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Montserrat+Subrayada:400,700|Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i);@import url(https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700);@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);/** Proxima Nova **/

@font-face {
    font-family: 'Museo';
    src: local('.Museo 100'), url("fonts/Museo 100.otf") format('opentype');
    font-weight: 100;
}

@font-face {
    font-family: 'Museo';
    src: local('.Museo 300'), url("fonts/Museo 300.otf") format('opentype');
    font-weight: 300;
}

@font-face {
    font-family: 'Museo';
    src: local('Museo 400'), url("fonts/Museo 400.otf") format('opentype');
    font-weight: 400;
}

@font-face {
    font-family: 'Museo';
    src: local('Museo 500'), url("fonts/Museo 500.otf") format('opentype');
    font-weight: 500;
}

@font-face {
    font-family: 'Museo';
    src: local('Museo 700'), url("fonts/Museo 700.otf") format('opentype');
    font-weight: 700;
}

@font-face {
    font-family: 'Museo';
    src: local('Museo 900'), url("fonts/Museo 900.otf") format('opentype');
    font-weight: 900;
}
@font-face {
    font-family: 'Proxima Nova';
    src: local('Proxima Nova Thin'), url("fonts/Proxima Nova Thin.otf") format('opentype');
    font-weight: 300;
}

@font-face {
    font-family: 'Proxima Nova';
    src: local('Proxima Nova Regular'), url("fonts/Proxima Nova Regular.otf") format('opentype');
    font-weight: 400;
}

@font-face {
    font-family: 'Proxima Nova';
    src: local('Proxima Nova Light'), url("fonts/Proxima Nova Light.otf") format('opentype');
    font-weight: 100;
}

@font-face {
    font-family: 'Proxima Nova';
    src: local('Proxima Nova Bold'), url("fonts/Proxima Nova Bold.otf") format('opentype');
    font-weight: 700;
}

@font-face {
    font-family: 'Proxima Nova';
    src: local('Proxima Nova semibold'), url("fonts/Proxima Nova Semibold.otf") format('opentype');
    font-weight: 500;
}/**
 Define responsive styles here for mobile applications
 body
**/


/**
Mobile Devices 
Phones, Wearables
**/
@media only screen
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/*mobile*/


}

/*
 Larger screens mobile Devices
 Tablets, smallscreen PCs
*/
@media only screen
and (min-device-width : 481px) 
and (max-device-width : 1024px){ 
/* Tabs */

}

/*
  Large screens
  TV, Projector
 */
@media only screen
and (min-width : 1824px) {
/*largescreens*/

}
/**
 Define responsive styles here for mobile applications
 footer
**/


/**
Mobile Devices 
Phones, Wearables
**/
@media only screen
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/*mobile*/


}

/*
 Larger screens mobile Devices
 Tablets, smallscreen PCs
*/
@media only screen
and (min-device-width : 481px) 
and (max-device-width : 1024px){ 
/* Tabs */

}

/*
  Large screens
  TV, Projector
 */
@media only screen
and (min-width : 1824px) {
/*largescreens*/

}
/**
 Define responsive styles here for mobile applications
 LeftPanel
**/


/**
Mobile Devices 
Phones, Wearables
**/
@media only screen
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/*mobile*/


}

/*
 Larger screens mobile Devices
 Tablets, smallscreen PCs
*/
@media only screen
and (min-device-width : 481px) 
and (max-device-width : 1024px){ 
/* Tabs */

}

/*
  Large screens
  TV, Projector
 */
@media only screen
and (min-width : 1824px) {
/*largescreens*/

}
/**
 Define responsive styles here for mobile applications
 Navbar
**/


/**
Mobile Devices 
Phones, Wearables
**/
@media only screen
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/*mobile*/


}

/*
 Larger screens mobile Devices
 Tablets, smallscreen PCs
*/
@media only screen
and (min-device-width : 481px) 
and (max-device-width : 1024px){ 
/* Tabs */

}

/*
  Large screens
  TV, Projector
 */
@media only screen
and (min-width : 1824px) {
/*largescreens*/

}
/*
This defines flexbox for and  component sizing 
arraagement 
Each style in this section has a mobile version
that automatically fits to the mobile requirement
*/

/*
SIZES
.fx-1 through ten define percentage sizing for the 
-----------------------------------------------------------------------------------------
*/

.flex__fx{ 
    display:flex;
}

.flex__fx-fullheight {
    height: 100%;
}

.flex__fx1 {
    width: 10%;
}

.flex__fx1-5 {
    width: 15%;
}

.flex__fx2 {
    width: 20%;
}

.flex__fx2-5 {
    width: 25%;
}

.flex__fx3 {
    width: 30%;
}

.flex__fx3-5 {
    width: 35%;
}

.flex__fx4 {
    width: 40%;
}

.flex__fx4-5 {
    width: 50%;
}

.flex__fx5 {
    width: 50%;
}

.flex__fx5-5 {
    width: 55%;
}

.flex__fx6 {
    width: 60%;
}

.flex__fx6-5 {
    width: 65%;
}

.flex__fx7 {
    width: 70%;
}

.flex__fx7-5 {
    width: 75%;
}

.flex__fx8 {
    width: 80%;
}

.flex__fx8-5 {
    width: 85%;
}

.flex__fx9 {
    width: 90%;
}

.flex__fx9-5 {
    width: 95%;
}

.flex__fx10 {
    width: 100%;
}

/**
DIRECTION FLEX
-----------------------------------------------------------------------------------------
**/

.flex__fx {
    display: flex;
}

.flex__fx-horrizontal {
    flex-direction: row;
}

.flex__fx-vertical {
    flex-direction: column;
}

/*
For rows warap at the end 
*/

.flex__fx-row-wrap {
    flex-direction: row;
    flex-wrap: wrap;
}

/*
Align Items with equal spaces accross horrizontally or vertically
*/

.flex__fx-align-horrizontal-equal {
    justify-content: space-around;
}

/*
Align Items spread to fill the screen accross horrizontally or vertically
*/

.flex__fx-align-horrizontal-fill {
    justify-content: space-between;
}

.flex__fx-row{ 
    flex-direction:row;
}
.flex__fx-column{ 
    flex-direction:column;
}
/*
Centralize
*/

.flex__fx-align-center {
    align-items: center;
    justify-content: center;
    align-content: center;
}

/*
Align Items to edge 
*/

.flex__fx-start {
    justify-content: flex-start;
}

/*
Align Items to end 
*/

.flex__fx-start {
    justify-content: flex-end;
}

/*
Align Item to bottom laterally
*/

.flex__push-bottom {
    margin-top: auto;
}

/*
Align Item to top laterally
*/

.flex__push-top {
    margin-bottom: auto;
}

/*
Align Item to right horrizontally in a row
*/

.flex__push-right {
    align-self: flex-end;
}

/*
Align Item to left horrizontally
*/

.flex__push-left {
    align-self: flex-start;
}

/*
* Fonts : Bundle all the fonts that will be used in the application
*/

/**
Font sizes 
**/

.typography__h1 {
    font-family: Museo;
    font-size: 6rem;
    font-weight: 300;
    letter-spacing: -0.09375rem;
}

.typography__h2 {
    font-family: Museo;
    font-size: 3.75rem;
    font-weight: 300;
    letter-spacing: -0.03125rem;
}

.typography__h3 {
    font-family: Museo;
    font-size: 3rem;
    font-weight: 400;
    letter-spacing: 0rem;
}

.typography__h4 {
    font-family: Museo;
    font-size: 2.125rem;
    font-weight: 400;
    letter-spacing: 0.02rem;
}

.typography__h5 {
    font-family: Proxima Nova;
    font-size: 1.5rem;
    line-height: 1.8rem;
    font-weight: 300;
    letter-spacing: 0rem;
    margin-bottom: 3px;
}

.typography__h6{
    font-family: Proxima Nova;
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.009rem;
}

.typography__subtitle-1,  .typography__formholder .typography__label, .typography__formholder .typography__select, .typography__formholder select, .typography__formholder input, 
.typography__formholder .typography__input, .typography__formholder .typography__textarea, .typography__formholder textarea {
    font-family: Museo;
    font-size: .8rem;
    font-weight: 300;
    letter-spacing: 0.009rem;
}
.typography__formholder .typography__label, .typography__formholder .typography__select, .typography__formholder select, .typography__formholder input, 
.typography__formholder .typography__input, .typography__formholder .typography__textarea, .typography__formholder textarea { 
    font-size:1rem;
    font-weight:400;
}
.typography__formholder .typography__select, .typography__formholder select, .typography__formholder input, 
.typography__formholder .typography__input, .typography__formholder .typography__textarea, .typography__formholder textarea { 
    line-height:1.8rem;
}
.typography__formholder ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    font-family: Museo;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.009rem;
    color: rgba(0,0,0,0.5);
    line-height:1.8rem;
}

.typography__formholder :-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-family: Museo;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.009rem;
    color: rgba(0,0,0,0.5);
    line-height:1.8rem;
}

.typography__formholder ::-ms-input-placeholder { /* Microsoft Edge */
    font-family: Museo;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.009rem;
    color: rgba(0,0,0,0.5);
    line-height:2rem;
}

.typography__subtitle-2, .typography__formholder .typography__help, .typography__formholder .typography__error {
    font-family: Proxima Nova;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.0125rem;
}

.typography__body-1 {
    font-family: Proxima Nova;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.03125rem;
}

.typography__body-2 {
    font-family: Proxima Nova;
    font-size: 0.675rem;
    font-weight: 400;
    letter-spacing: 0.0156rem;
}

.typography__button {
    font-family: Proxima Nova;
    font-size: 0.875rem;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.047rem;
}

.typography__caption {
    font-family: Proxima Nova;
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.025rem;
}

.typography__overline {
    font-family: Proxima Nova;
    font-size: 0.525rem;
    font-weight: 400;
    letter-spacing: 0.09375rem;
}

/**
ELLIPSES 
**/

/*  Single line ellipses */


.typography__ellipses {
    width: 90%;
    /* Width takes 90% by default */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Multiline ellipses with line clamped to 4 lines */

.typography__ml-ellipses-4 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}
/* Multiline ellipses with line clamped to 3 lines */

.typography__ml-ellipses-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}
/* Multiline ellipses with line clamped to 2 lines */

.typography__ml-ellipses-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Multiline ellipses with line clamped to 6 lines */

.typography__ml-ellipses-6 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
}/**
Add background image 
**/
.images__background-contain { 
    background-color:rgba(0,0,0,0.1);
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
}
.images__background-cover{ 
    background-color:rgba(0,0,0,0.1);
    background-size:cover;
    background-position:center;
}
.images__background-repeat{ 
    background-color:rgba(0,0,0,0.1);
    background-size:contain;
    background-position:center;
}

/*
* Use i,mages as it is 
*/
/*
 Full sized images 
*/
.images__img{ 
    max-width: 100%;
    height:auto;
}
/**
FIt image to a container
*/
.images__imgFit{ 
    object-fit: cover;
}/**
Define app wide colors here 
-----------------------------------------------------
COLOR DEFINITION

-- Dark shades are defined last while light are defined first
--- 1 represent the lighest shades
--- 3 represent the darkest shades
Primary color: Pink
Secondary color: blue (accent)
Primary-color1:#ffb2dd
Primary-color2:#ff80ab
Primary-color3:#c94f7c
secondary-color1:#82f7ff
secondary-color2:#40c4ff
secondary-color3:#0094cc
----------------------------------------------------------
COLOR FORMAT

suffix-f : Defines font colors
color without suffix - Define backround colors
suffix-b defines border colors
suffix - ph defines placeholders
ACCENT COLORS ARE USED ONLY IN TEXT SMALL COMPONENTS AND BORDERS
---------------------------------------------------------------
*/

/*
BACKGROUND COLORS
.................................................................
*/

.color__primary-1 {
    background: #ffb2dd;
}

.color__primary-2 {
    background: #ff80ab;
}

.color__primary-3 {
    background: #c94f7c;
}

.color__secondary-1 {
    background: #82f7ff;
}

.color__secondary-2 {
    background: #40c4ff;
}

.color__secondary-3 {
    background: #0094cc;
}

/**
Tansparent colors
**/

.color__transp-light-1 {
    background: rgba(255, 255, 255, 0.3);
}

.color__transp-light-2 {
    background: rgba(255, 255, 255, 0.6);
}

.color__transp-light-3 {
    background: rgba(255, 255, 255, 0.8);
}

.color__transp-dark-1 {
    background: rgba(0, 0, 0, 0.3);
}

.color__transp-dark-2 {
    background: rgba(0, 0, 0, 0.6);
}

.color__transp-dark-3 {
    background: rgba(0, 0, 0, 0.8);
}

.color__light {
    background: #fff;
}

.color__dark {
    background: #000;
}

/*
FONT COLORS
.................................................................
*/

.color__light-f {
    color: #fff;
}

.color__dark-f {
    color: #000;
}

.color__secondary-1-f {
    color: #82f7ff;
}

.color__secondary-2-f {
    color: #40c4ff;
}

.color__secondary-3-f {
    color: #0094cc;
}

/**
Tansparent font colors
**/

.color__transp-light-1-f {
    color: rgba(255, 255, 255, 0.3);
}

.color__transp-light-2-f {
    color: rgba(255, 255, 255, 0.6);
}

.color__transp-light-3-f {
    color: rgba(255, 255, 255, 0.8);
}

.color__transp-dark-1-f {
    color: rgba(0, 0, 0, 0.3);
}

.color__transp-dark-2-f {
    color: rgba(0, 0, 0, 0.6);
}

.color__transp-dark-3-f {
    color: rgba(0, 0, 0, 0.8);
}

/*
Border COLORS
.................................................................
*/

.color__light-b {
    border-color: #fff;
}

.color__dark-b {
    border-color: #000;
}

.color__secondary-1-b {
    border-color: #82f7ff;
}

.color__secondary-2-b {
    border-color: #40c4ff;
}

.color__secondary-3-b {
    border-color: #0094cc;
}

/**
Tansparent font colors
**/

.color__transp-light-1-b {
    border-color: rgba(255, 255, 255, 0.3);
}

.color__transp-light-2-b {
    border-color: rgba(255, 255, 255, 0.6);
}

.color__transp-light-3-b {
    border-color: rgba(255, 255, 255, 0.8);
}

.color__transp-dark-1-b {
    border-color: rgba(0, 0, 0, 0.3);
}

.color__transp-dark-2-b {
    border-color: rgba(0, 0, 0, 0.6);
}

.color__transp-dark-3-b {
    color: rgba(0, 0, 0, 0.8);
}
/**
Button colors
**/
.color__primary-button{ 
    color:#fff;
    background-color:#c94f7c;
    border: solid 1px #c94f7c;
}
.color__primary-button:hover{ 
    color:#c94f7c;
    background-color:#fff;
}
.color__secondary-button{ 
    color:#fff;
    background-color:#0094cc;
    border: solid 1px #0094cc;
}
.color__secondary-button:hover { 
    background-color:#fff;
    color:#0094cc;  
}
.color__outline-button{ 
    color:rgba(0, 0, 0, 0.4);
    background-color:#fff;
    border:solid 1px rgba(0, 0, 0, 0.3);
}
.color__outline-button:hover{ 
    background-color:rgba(0, 0, 0, 0.2);
    color:rgba(0, 0, 0, 0.4);
    border:solid 1px rgba(0, 0, 0, 0.3);
}/**
* Define animation classes for the app
* The top section defines keyframes 
* The lower section defines class for this key froames
**/

/**
Set transitions for all 
**/

* {
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

/**
 * Define bounceIn for components 
**/

@keyframes animation__bounceIn {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }
    60% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}

/**
 * Define bounceOut for components 
**/

@keyframes animation__bounceIn {
    0% {
        transform: scale(1);
        opacity: 0;
    }
    60% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(0.1);
    }
}

/**
 * 
 *
 **/

/** 
   * Linnear Movement horrizontal
   *
  **/

@keyframes animation__lateralMoveVertical {
    0% {
        transform: translateY(0%);
        opacity: 0;
    }
    100% {
        transform: translateY(100%);
        opacity: 1;
    }
}

/** 
   * Linnear Movement Vetical
   *
  **/

@keyframes animation__lateralMoveHorrizontal {
    0% {
        transform: translateX(0%);
        opacity: 0;
    }
    100% {
        transform: translateX(100%);
        opacity: 1;
    }
}

/** 
   * Scales 
   *
  **/

@keyframes animation__scaleExpand {
    0% {
        transform: scale(0%);
    }
    60% {
        transform: scale(110%);
    }
    100% {
        transform: scale(100%);
    }
}

/**
 * Cool veiw
 * Typically useful for implementing picutures comming in 
 **/

@keyframes animation__imagebounceIn {
    0% {
        transform: scale(10%);
        transform: translateX(-20%);
        opacity: 0%;
    }
    40% {
        transform: scale(60%);
        transform: translateX(-10%);
        opacity: 1;
    }
    60% {
        transform: scale(110%);
        transform: translateX(-5%);
        opacity: 1;
    }
    100% {
        transform: scale(100%);
        opacity: 1;
        transform: translateX(0%);
    }
}

/**
 * Continous rotation 
 **/

@keyframes animation__rotate {
    0% {
        transform: rotate(0turn);
    }
    100% {
        transform: rotate(1turn);
    }
}

@keyframes animation__elevate {
    0% {
        transform: translateZ(0);
    }
    100% {
        transform: translateZ(0.3);
    }
}

.animation__bounceIn {
    animation: animation__bounceIn 2s ease-in 1;
}

.animation__bounceOut {
    animation: animation__bounceOut 2s ease-in 1;
}

.animation__lateralMoveHorrizontalInfinte {
    animation: animation__lateralMoveHorrizontal 4s ease-in infinite;
}

.animation__lateralMoveVerticalInfinte {
    animation: animation__lateralMoveVertical 4s ease-in infinite;
}

.animation__scaleExpand {
    animation: animation__scaleExpand 0.4s ease-in 1;
}

.animation__hoverExpand:hover {
    animation: animation__scaleExpand, animation__elevate 0.4s ease-in 1;
}

.animation__rotate {
    animation: animation__rotate 0.4s ease-in infinite;
}

.animation__imageBounceIn {
    animation: animation__imagebounceIn 4s ease-in 1;
}/*
DEFINE BOX SHADOWS HERE AND BORDER RADIUS
*/

/**
Vertical bottom bx
**/
.box-shadow__no-bx{ 
    box-shadow: 0 0px 0px 0px rgba(0, 0, 0, 0)!important; 
    -moz-box-shadow: 0 0px 0px 0px rgba(0, 0, 0, 0)!important;
    -webkit-box-shadow: 0 0px 0px 0px rgba(0, 0, 0, 0)!important;
}
.box-shadow__bx-top {
    -webkit-box-shadow: 0 2px 24px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 2px 24px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 24px 2px rgba(0, 0, 0, 0.1);
}

/**
Vertical top bx
**/

.box-shadow__bx-bottom {
    -webkit-box-shadow: 0 3px 2px -2px rgba(0,0,0,.1);
    -moz-box-shadow: 0 3px 2px -2px rgba(0,0,0,.1);
    box-shadow: 0 3px 2px -2px rgba(0,0,0,.1);
}

/**
Horixzontal left bx
**/

.box-shadow__bx-left {
    -webkit-box-shadow: -1px 0px 3px 1px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: -1px 0px 3px 1px rgba(0, 0, 0, 0.35);
    box-shadow: -1px 0px 3px 1px rgba(0, 0, 0, 0.35);
}

.box-shadow__bx-right {
    -webkit-box-shadow: 1px 0px 3px 1px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 1px 0px 3px 1px rgba(0, 0, 0, 0.35);
    box-shadow: 1px 0px 3px 1px rgba(0, 0, 0, 0.35);
}

/*
* BORDER RADIUS
----------------------------------------------------------------------------
*/

.box-shadow__br-all {
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
}

.box-shadow__br-top-left {
    border-radius: 3px 0px 0px 0px;
    -moz-border-radius: 3px 0px 0px 0px;
    -webkit-border-radius: 3px 0px 0px 0px;
}

.box-shadow__br-top-right {
    border-radius: 0px 3px 0px 0px;
    -moz-border-radius: 0px 3px 0px 0px;
    -webkit-border-radius: 0px 3px 0px 0px;
}

.box-shadow__br-bottom-left {
    border-radius: 0px 0px 0px 3px;
    -moz-border-radius: 0px 0px 0px 3px;
    -webkit-border-radius: 0px 0px 0px 3px;
}

.box-shadow__br-bottom-right {
    border-radius: 0px 0px 3px 0px;
    -moz-border-radius: 0px 0px 3px 0px;
    -webkit-border-radius: 0px 0px 3px 0px;
    border: 0px solid #000000;
}

.box-shadow__br-top {
    border-radius: 3px 3px 0px 0px;
    -moz-border-radius: 3px 3px 0px 0px;
    -webkit-border-radius: 3px 3px 0px 0px;
}

.box-shadow__br-bottom {
    border-radius: 0px 0px 3px 3px;
    -moz-border-radius: 0px 0px 3px 3px;
    -webkit-border-radius: 0px 0px 3px 3px;
}

.box-shadow__rounded { 
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius:50%;
}
/**
DEFINE PADDING 
**/
*{ 
    box-sizing:border-box;
}
.padding__padding-1 { 
    padding:0.19rem;
}
.padding__padding-2{ 
    padding:0.313rem;
}
.padding__padding-3{ 
    padding:0.4375rem;
}
.padding__padding-4{ 
    padding:0.5625rem;
}
.padding__padding-5{ 
    padding:0.6875rem;
}
.padding__padding-6{ 
    padding:1rem;
}
.padding__padding-7{ 
    padding:1.25rem;
}
.padding__padding-8{ 
    padding:1.875rem;
}
.padding__padding-9{ 
   padding:2.1875rem; 
}
.padding__padding-10{ 
    padding:2.5rem;
}
.padding__margin-1 { 
    margin:0.19rem;
}
.padding__margin-2{ 
    margin:0.313rem;
}
.padding__margin-3{ 
    margin:0.4375rem;
}
.padding__margin-4{ 
    margin:0.5625rem;
}
.padding__margin-5{ 
    margin:0.6875rem;
}
.padding__margin-6{ 
    margin:1rem;
}
.padding__margin-7{ 
    margin:1.25rem;
}
.padding__margin-8{ 
    margin:1.875rem;
}
.padding__margin-9{ 
   margin:2.1875rem; 
}
.padding__margin-10{ 
    margin:2.5rem;
}/**
 Define responsive styles here for mobile applications
 General appwide
**/

/**
Mobile Devices 
Phones, Wearables
**/

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /*mobile*/
  .mobile__fx-mobile-full {
    width: 100%;
  }
}

/*
 Larger screens mobile Devices
 Tablets, smallscreen PCs
*/

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) {
  /* Tabs */
  .mobile__fx-tab-full {
    width: 100%;
  }
}

/* 
/*
  Large screens
  TV, Projector
 */

/* @media only screen
and (min-width : 1824px) {
/*largescreens*/

/* }   *//**
DEFINE STYLES FOR CARDS 
All cards may have 
drop shadow, 
thumbnail;
topdescription

Detailed cards must have interaction 
*/

/**
SHared card component;
**/

.cards__card {
    display: flex;
    flex-direction: column;
    padding: 0.4375rem;
    margin: 0;
    border: solid 1px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    min-height: 80px;
    margin-bottom: 2px;
}

.cards__card-row {
    padding: 0rem 0.313rem;
    overflow: hidden;
}

.cards__card-header {
    height: 48px;
    border-bottom: solid 1px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    padding-left: 0.6875rem;
}

.cards__card-thumbnail {
    min-height: 80px;
    display: flex;
    flex-direction: row;
}

.cards__card .cards__body-2 {
    margin-bottom: 5px;
}

.cards__card-thumbnail .cards__caption {
    color: #666;
    margin-top: 3px;
    margin-bottom: 7px;
}

.cards__card-thumbnail .cards__img {
    width: 55px;
    height: 60px;
    padding: 6px;
    background-image: url("https://i.imgur.com/ObSvn4R.jpg");
    background-size: cover;
    object-fit: cover;
    background-color: rgba(0, 0, 0, 0.04);
}

.cards__card-thumbnail .cards__list {
    width: auto;
    max-width:80%;
    height: 100%;
    padding: 0px 10px;
    display: flex;
    flex-direction: column;
}

.cards__list .cards__h6 {
    margin-bottom: 0px;
    color: #444;
}

.cards__list .cards__body-2 {
    color: #666;
    margin-top: 3px;
}

.cards__card-thumbnail .cards__icons {
    margin-left: auto;
    align-self: flex-end;
}

.cards__card:hover {
    -webkit-box-shadow: 0 2px 24px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 2px 24px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 24px 2px rgba(0, 0, 0, 0.1);
}
/**
HIGHLIGHT TEXT CARDS 
**/

/** 
LIST CONTENT CARDS 
**/

/** 
DISPLAY MAJOR CONTENT CARDS 
**/

/** 
DISPLAY WRITEUP CARDS
**/

/** 
IMPORTANT INFO CARDS
**/

/** 
DETAILED CARDS 
**/

/** 
IMAGE PREVIEW CARDS 
**/

/** 
INTRO CARDS 
**//**
 Define responsive styles here for mobile applications
 General appwide
**/

/**
Mobile Devices 
Phones, Wearables
**/

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    /*mobile*/
    .mobile__card{ 
        display:flex;
        flex-direction:column;
        width:100%;
        padding:0.4375rem;
        margin:0;
        border:solid 1px rgba(0,0,0,0.08);
        box-sizing:border-box;
        min-height:100px;
    }
  }
  
  /*
   Larger screens mobile Devices
   Tablets, smallscreen PCs
  */
  
  @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) {
    /* Tabs */
    .mobile__fx-tab-full {
      width: 100%;
    }
  }
  
  /* 
  /*
    Large screens
    TV, Projector
   */
  
  /* @media only screen
  and (min-width : 1824px) {
  /*largescreens*/
  
  /* }   */
/**
Define styles for forms 
**/
/*
Form holder section
*/
.index__formholder { 
    width:100%;
    display:flex;
    min-height:3.438rem;
    height:auto;
    padding:0rem 0.625rem;
    flex-direction: column;
    flex-wrap: wrap;
    margin-bottom: 0.19rem;
    justify-content:flex-start;
    align-content:flex-start;
}
.index__formholder input,
.index__formholder select,
.index__formholder textarea { 
    border: none;
    background:rgba(0,0,0,0)!important;
    padding:0px 5px;
    box-sizing:border-box;

}
.index__input:focus,
input:focus,
select:focus,
textarea:focus,
button:focus {
    border: solid 0.0625rem #0094cc!important;
    background: rgba(0,0,0,0);
    border:none!important;
}
.index__formholder input:focus:after,
.index__formholder select:focus:after,
.index__formholder textarea:focus:after,
.index__formholder button:focus:after{
    font-family: "Ionicons";
    content:"\F3D0";

}
.index__formholder input:active,
.index__formholder select:active,
.index__formholder textarea:active,
.index__formholder button:active { 
    background-color:rgba(130, 247, 255, 0.2);
} 

.index__formholder input,
.index__formholder select,
.index__formholder .index__input,
.index__formholder .index__select{ 
    width:100%;
    height: 1.8rem;
    line-height: 1.8rem;
}
.index__formholder textarea,
.index__formholder .index__textarea{ 
    width:100%;
    height:3.124rem;  
}
.index__formholder .index__input,
.index__formholder .index__select,
.index__formholder .index__textarea { 
    border-radius:2px;
    border:solid 1px rgba(0,0,0,.2);
    display:flex;
    flex-wrap:nowrap;
}
.index__required:after { 
    content: " *";
}
/**
Alignment for forms 
*/
.index__formholder .index__row { 
    height:auto;
    width:100%;
    display:flex;
    flex-wrap:wrap;
}

.index__formholder .index__row .index__two-content { 
 margin-right:0.313rem;
 width:40%!important;
}
.index__formholder .index__row .index__three-content { 
    margin-right:0.313rem;
    width:26%!important;
}
.index__formholder .index__row .index__two-content input:focus, .index__formholder .index__row .index__three-content input:focus,
.index__formholder .index__row .index__two-content select:focus, .index__formholder .index__row .index__three-content select:focus,
.index__formholder .index__row .index__two-content textarea:focus, .index__formholder .index__row .index__three-content textarea:focus{
    outline:none!important;
}
/*
Add icon to form usually on the label 
post add after form 
*/
.index__form-icon, .index__formholder .index__Ionicons { 
    line-height:1.8rem!important;
    color: rgba(0,0,0,.4)!important;
    font-size: 1.4rem!important;
}
.index__with-icon-date input, .index__with-icon-arrow input, 
.index__with-icon-date textarea,
.index__formholder .index__select{
    width:85%!important;
    padding-right:5px;
}
.index__with-icon-date:after{ 
    font-family: "Ionicons";
    content:"\F394";
    color: rgba(0,0,0,.4)!important;
}
.index__with-icon-arrow:after, .index__select:after{ 
    font-family: "Ionicons";
    content:"\F3D0";
    color: rgba(0,0,0,.4)!important;
}
.index__formholder select {
 opacity:0!important;
}

.index__formholder label { 
    text-transform:capitalize;
    color:rgba(0,0,0,0.5)!important;
}

/*
Label Section
*/
.index__formholder label{ 
   margin-bottom:0.09rem; 
}
.index__formholder .index__help, .index__formholder .index__error{
    margin-top:-0.09rem;
    color:rgba(0,0,0,0.4);
    font-size:0.6rem;
}
.index__formholder .index__select, .index__formholder .index__input, .index__formholder .index__textarea{
    margin-bottom:0.19rem;
}
.index__formholder .index__error {
    color:#c94f7c!important;
}
.index__error { 
    border-color:#c94f7c!important;
}

/*
Forms
*//**
 Define responsive styles here for mobile applications
 Forms
**/


/**
Mobile Devices 
Phones, Wearables
**/
@media only screen
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/*mobile*/
.mobile__formholder{ 
    width:98%;
    height:4rem;
    margin-bottom:0.313rem;

}

}

/*
 Larger screens mobile Devices
 Tablets, smallscreen PCs
*/
@media only screen
and (min-device-width : 481px) 
and (max-device-width : 1024px){ 
/* Tabs */

}

/*
  Large screens
  TV, Projector
 */
@media only screen
and (min-width : 1824px) {
/*largescreens*/

}
/***
Buttons components
**/
.index__buttonholder { 
    display:flex;
    flex-direction:row;
    margin:0rem 0.4375rem;
    height:2.8rem;
    box-sizing:border-box;
    align-items:center;
    align-content:center;
    width:100%;
    padding: 0rem 0.625rem;
}

.index__button-group { 
    margin-left:auto;
    min-width:30%;
    display:flex;
    justify-content:flex-end;
}
.index__button-group .index__button{ 
    width:auto;
    min-width:6.5rem;
    height:2rem;
    box-sizing:content-box;
    padding:0px 20px;
    text-align:center;
    margin-right:10px;
    line-height:2rem;
    cursor:pointer;
}/**
 Define responsive styles here for mobile applications
 Forms
**/


/**
Mobile Devices 
Phones, Wearables
**/
@media only screen
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/*mobile*/
.mobile__buttonholder { 
    display:flex;
    flex-direction:column;
    margin:0rem 0.4375rem;
    height:2.5rem;
    align-items:center;
    align-content:center;
    width:100%;
    padding: 0rem 0.625rem;
    box-sizing: border-box;
}
.mobile__button-group { 
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    margin-top:3.5rem; 
    box-sizing:border-box;
}
.mobile__button{ 
    width:100%;
    height:2rem;
    box-sizing:border-box;
    padding:0px 20px;
    margin-top:0.4rem;
    margin-bottom:0.5rem;
    text-align:center;
    line-height:2rem;
}

}

/*
 Larger screens mobile Devices
 Tablets, smallscreen PCs
*/
@media only screen
and (min-device-width : 481px) 
and (max-device-width : 1024px){ 
/* Tabs */

}

/*
  Large screens
  TV, Projector
 */
@media only screen
and (min-width : 1824px) {
/*largescreens*/

}
/**
* Import dependecies
**/
/**
* Define Global styles 
**/
*{
    -webkit-transition:all 0.1s ease;
    -ms-transition:all 0.1s ease;
    -moz-transition:all 0.1s ease;
    transition:all 0.1s ease;
}
body,
html {
    width: 100%;
    height: 100%;
    font-size: 16px;
    padding: 0;
    margin: 0;
    font-family: Roboto;
    color:222;
}
* {
    transition:0.1s;
}