.clearer {
    clear: both;
    display: block;
    font-size: 0;
    height: .001%;
    line-height: 0;
    width: 1px
}

.relative {
    position: relative !important
}

.right {
    float: right !important
}

.left {
    float: left !important
}

.bold {
    font-weight: 700 !important
}

.tright {
    text-align: right
}

.tleft {
    text-align: left
}

.center {
    text-align: center
}

.marginb0 {
    margin-bottom: 0 !important
}

.marginb20 {
    margin-bottom: 20px !important
}

.break-all {
    word-break: break-all;
}

.hide {
    display: none
}

.w-full {
    width: 100%;
}

.warning {
    color: red
}

.btn .ui-btn {
    background: #202020;
    border-color: #000;
    color: #fff;
    text-shadow: none;
    font-weight: 400
}

.btn .ui-btn:hover {
    background: #2d2d2d
}

.twinsRecom,
.result {
    font-size: 16px;
    padding: 10px 20px;
    margin-top: 20px;
    margin-bottom: 40px;
    background: #ccc;
    border: 2px solid #666;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px
}

.twinsRecom ul,
.result ul {
    padding-left: 20px
}

.twinsRecom ul li,
.result ul li {
    list-style: disc;
    text-align: left;
    margin-bottom: 20px
}

.twinsRecom#dataReview,
.result#dataReview {
    background: none repeat scroll 0 0 #a8aba0;
    border: 1px solid #202020;
    font-size: 15px;
    padding: 0 20px;
    text-shadow: none
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-40 {
    margin-top: 40px !important;
}

.mb-0 {
    margin-bottom: 0px !important;
}

.mb-5 {
    margin-bottom: 5px !important;
}
.mb-10 {
    margin-bottom: 10px !important;
}

.mb-40 {
    margin-bottom: 40px !important;
}

.color-grey {
    color: #acacac
}

.col1,
.col2 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    width: 50%;
    padding: 10px 30px 0 0;
    margin-bottom: 30px
}

.label {
    text-align: left;
    font-weight: bold !important;
}

.flex {
    display: flex;
}

.block {
    display: block;
}

.flex-col {
    flex-direction: column;
}

.items-end {
    align-items: flex-end;
}

.col1.narrow {
    float: none;
    padding-right: 15px;
}

.col2.narrow {
    float: none;
    padding-left: 15px;
}

.flex .ui-controlgroup-controls,
.col1.narrow .ui-controlgroup-controls,
.col2.narrow .ui-controlgroup-controls {
    width: 100%;
}

.col1 .ui-field-contain .ui-select,
.col2 .ui-field-contain .ui-select {
    width: 100%
}

.col1 h3.center,
.col2 h3.center {
    font-size: 18px
}

.col2 {
    padding: 10px 0 0 30px
}

.disabled label {
    color: #ccc
}

.disabled .ui-input-text.ui-body-c {
    background-color: #ddd;
    box-shadow: none
}

#ttfs .ui-field-contain label.ui-select {
    width: 100%
}

.result {
    color: #fff;
    background-color: #86b7bd;
    font-weight: 400;
    text-shadow: none;
    border: 1px solid #202020;
    padding: 20px;
    margin-top: 40px
}

.result .large {
    display: block;
    font-size: 18px;
    font-weight: 700;
    text-align: center
}

.result span.small {
    display: block;
    font-size: 13px;
    margin-top: 10px
}

.result span.small.hide {
    display: none;
}

.result.redOne {
    background-color: #dfac5a
}

.result em {
    font-size: 13px
}

#ttfs {
    margin-top: 50px
}

#ttfs em {
    font-size: 13px
}

#showRisk,
#showBlock {
    border-top: 6px solid #d1d1d1;
    padding-top: 30px
}

#siugr {
    margin-top: 50px
}

#siugr label.ui-select {
    width: 100%
}

hr.divider {
    border-top: 6px solid #d1d1d1;
    border-left: 0;
    margin-bottom: 30px
}

.ui-radio .ui-btn.ui-radio-on:after {
    width: 18px;
    height: 18px;
}

.cardio-green {
    color: green;
}

.ui-link:link{
    color: #0E4B4D;
}

.ui-page-theme-a a:visited{
    color: #0E4B4D;
}

.ui-link:hover{
    color: #198e91;
}

.ui-link:active{
    color: #198e91;
}

.cardio-red {
    color: red;
}

.frameless .ui-collapsible-content {
    border: 0;
}

.frameless .ui-collapsible-heading a,
.frameless .ui-collapsible-heading a:focus,
.frameless .ui-collapsible-heading a:hover {
    font-weight: normal;
    color: #666;
    padding-top: 13px;
    border: 0;
    background: none;
    box-shadow: none;
}


/* Para pantallas pequeñas */
@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
	h1 {
		font-size: 1.5rem
	}
	h2 {
		font-size: 1rem
	}
	.ui-btn {
		font-size: 0.9rem
	}

/* Para pantallas medianas */
@media (min-width: 601px) and (max-width: 1200px) {
    body {
        font-size: 16px;
    }
	h1 {
		font-size: 2rem
	}
	h2 {
		font-size: 1.5rem
	}
}

/* Para pantallas grandes */
@media (min-width: 1201px) {
    body {
        font-size: 18px;
    }
	h1 {
		font-size: 2.5rem
	}
	h2 {
		font-size: 2rem
	}
}