@import url('https://fonts.googleapis.com/css?family=PT+Sans&display=swap');

.center {
    margin: auto;
}

.tcenter {
    text-align: center;
}

div {
    position: relative;
    top: 0px;
    left: 0px;
}




a, input {
    outline: none;
    -webkit-appearance: none;
  @include border-radius(0);
}



    a img {
        outline: none;
    }



img, input, select {
    border: 0;

}

.pl {
    padding-left: 5%;
}


.pt {
    padding-top: 15px;
    padding-bottom: 15px;
}
body, fieldset, div, p, input, select {
    font-family: 'PT Sans';
    font-size: 100%;
}


.black {
    background-color: #000000;
    width: 100%;
    display: block;
    padding: 5px 0px 5px 0px;
}

h1 {
    color: #FFFFFF;
    background-color: #000000;
    font-size: 15px;
    font-weight: 700;
    width: 70%
}



div {
    display: block;
    margin: auto;
    width: 70%
}



.sbody {
    width: 60%;
    margin: auto;
}

.bt {
    margin: 20px;
    text-align: center;
    background-color: #50b5b6;
    font: bold 100% 'PT Sans';
    color: white;
    padding: 10px 45px 10px 45px;
    border-radius: 5px;
    border: 0px;
}

    .bt:hover {
        background-color: #00c5c6;
    }

    .bt:disabled {
        background-color: darkgray
    }

fieldset {
    margin: 0 auto 15px;
    border: 0;
    position: relative;
    width: 99%;
    padding: 5px;
    display: block;
}

input[type=text], input[type=number], input[type=email], input[type=tel], select {
    margin-top: 15px;
    width: 100%;
    border: 1px solid #aaa;
    border-radius: 4px;
    margin: 8px 0;
    outline: none;
    padding: 8px;
    box-sizing: border-box;
    transition: .3s;
}

input:focus, select {
    border-color: #50b5b6;
    box-shadow: 0 0 8px 0 #50b5b6;
}


i {
    font-size: 12px;
    color: crimson
}

.ar {
    text-align: right;
}

.al {
    text-align: left;
}

.borde {
    border: 1px solid;
}

.inline {
    display: inline;
    height: auto;
}


.error, legend {
    border: 1px dotted red;
    border-radius: 4px;
}

legend, h4 {
    background-color: red;
    color: white;
    padding: 4px;
    font-size: 85%;
}

.bar {
    list-style-type: none;
    width: 922px;
    height: 140px;
    left: 0px;
    display: block;
    margin: 0;
    padding: 0;
   
}
.i1 {
    left: 38px;
    
}
.i2 {
    left: 48px;
    background-size: 100%;
}
.i3 {
    left: 61px;
    background-size: 100%;
}
.i4 {
    left: 74px;
    background-size: 100%;
}
.i5 {
    left: 88px;
    background-size: 100%;
}

.i1:disabled {
    background: url('../images/p1d.png') no-repeat;
    background-size: 100%;
    opacity: 1;
}

.i2:disabled {
    background: url('../images/p2d.png') no-repeat;
    background-size: 100%;
    opacity: 1;
}

.i3:disabled {
    background: url('../images/p3d.png') no-repeat;
    background-size: 100%;
    opacity: 1;
}

.i4:disabled {
    background: url('../images/p4d.png') no-repeat;
    background-size: 100%;
    opacity: 1;
}

.i5:disabled {
    background: url('../images/p5d.png') no-repeat;
    background-size: 100%;
    opacity: 1;
}

.i1:enabled, .i1:disabled.active {
    background: url('../images/p1a.png') no-repeat;
    background-size: 100%;
}

.i2:enabled, .i2:disabled.active {
    background: url('../images/p2a.png') no-repeat;
    background-size: 100%;
}

.i3:enabled, .i3:disabled.active {
    background: url('../images/p3a.png') no-repeat;
    background-size: 100%;
}

.i4:enabled, .i4:disabled.active {
    background: url('../images/p4a.png') no-repeat;
    background-size: 100%;
}

.i5:enabled, .i5:disabled.active {
    background: url('../images/p5a.png') no-repeat;
    background-size: 100%;
}
.f1 {
    background: url('../images/filete1.png')  no-repeat;
}

.f2 {
    background: url('../images/filete2.png') no-repeat;
}


.f3 {
    background: url('../images/filete3.png')  no-repeat;
}

.f4 {
    background: url('../images/filete4.png')  no-repeat;
}

.f5 {
    background: url('../images/filete5.png')  no-repeat;
}
.bar li {
    float: left;
    display: block;
    width: 20%;
    height: 140px;
}

    .bar li input {
        width: 60px;
        height: 60px;
        top: 40px;
        position: relative;
        border-radius: 50%;
        color: transparent;
    }
        .bar li input:enabled:hover {
            cursor: pointer;
        }

.soc {
    list-style-type: none;
    display: block;
    height: 60px;
    padding: 0px;
}
            
    .soc li {
        
        display: inline-block;
        width: 90px;
        height: 60px;
    }

        .soc li img {
            position: static;
        }


#cc {
    display: none;
    position: absolute;
    -moz-border-radius: 50%;
    border-radius: 50%;
    font-size: 10px;
    padding: 0px;
    width: 25px;
    height: 25px;
    color: #FFF;
    z-index: +99;
    overflow: visible;
    text-align: center;
    line-height: 25px;
}

input[type=radio], input[type=checkbox] {
    display: none;
}
    /* Create a custom checkbox */
    input[type=radio] + label span, input[type=checkbox] + label span {
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
        height: 15px;
        width: 15px;
        background-color: #ddd;
        -webkit-appearance: none;
        border-radius: 50%;
        margin-right: 3px;
        border: 7px solid #eee;
    }


    input[type=radio] + label span {
        border-radius: 50%;
    }

    input[type=checkbox] + label span {
        border-radius: 10%;
    }


    input[type=radio]:hover + label, input[type=checkbox]:hover + label {
        cursor: pointer;
    }


        /* On mouse-over, add a grey background color */
        input[type=radio]:hover + label span, input[type=checkbox]:hover + label span {
            background-color: #ddd;
            box-shadow: 0 0 8px 0 #50b5b6;
            border: 7px solid #b2e8e8;
        }

    /* When the checkbox is checked, add a blue background */
    input[type=radio]:checked + label span, input[type=checkbox]:checked + label span {
        background-color: #fff;
        border: 7px solid #00c5c6;
    }

.mc, .mt {
    width: 100%;
    display: block;
    height: 30px;
    list-style: none; /* Remove list bullets */
    padding-left: 0;
    margin: 0;
}

    .mc li, .mt li {
        list-style: none;
        display: inline-block;
        padding: 0;
        margin: 0;
        width: 49%;
    }

/*
.banner {
    content: url('../images/cab.png');
    width: 100%;
    height: 278px;
}
    */
.dbody {
    width: 922px;
    margin: auto;
}

@media only screen and (max-width: 922px) {

    /*
    .banner {
        content: url(../images/cabm.png);
        height: 100%;
    }

*/

    body, fieldset, div, p, input, select {
        font-family: 'PT Sans';
        font-size: 106%;
    }


    .dbody {
        width: 100%;
    }

    div {
        width: 90%
    }



    .sbody {
        width: 80%;
    }

    h1,h2{margin-left:15px;}

    .pt {
        padding-top: 0px;
    }

    .logo {
        margin-left: 5px;
    }

    .nodisplay {
        display: none;
        visibility: hidden;
    }

    .bar {
        display: flex;
        width: 100vw;
        height:20vw;

        
    }



    .f1, .f2, .f3, .f4, .f5 {
        background: url('../images/filete.png')  center repeat-x;

   
    }

    .bar li {
        height: 20vw;
        
    }

        .bar li input {
            position:relative;
            display:block;
            left:0;
            top:20%;
            margin:auto auto;
            width: 60%;
            height: 60%;
            vertical-align:central;
            text-align:center;
            
        }




    legend, h4 {
        font-size: 85%;
    }

    .mc {
        display: block;
        height: 100px;
        width: 100%;
        position: relative;
    }

        .mc li {
            display: block;
            width: 100%;
            padding-top: 20px;
        }

        .mc .al {
            position: relative;
            text-align: left;
        }

        .mc .ar {
            position: relative;
            text-align: left;
        }
}