* {

    font-family:Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, 'sans-serif';
}

.image1{
    width: 140px;
    height: 39px;
}
.image2{
    width: 115px;
    height: 32px;
}
.image3{
    width: 68.2;
    height: 43px;
}


.titlestyle{
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.5px;
}

.titlestyle2{
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.5px;
    color: #000000;
}
.textstyle{
    font-weight: 600;
    font-size: 12px;
    letter-spacing: -0.5px;
    color: #000000;
}

.textstyle2{
    font-weight: 400;
    font-size: 12px;
    letter-spacing: -0.5px;
    color: #A7A7A7;
}

.textstyle3{
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.5px;
    color: #000000;
}

.buttonstyle1{
    font-weight: 500;
    font-size: 14px;
    width: 102px;
    height: 38px;
}

.buttonstyle2{
    font-weight: 800;
    font-size: 11px;
    letter-spacing: -0.5px;
    color: #242424;
}

.connectbutton{
    width: 125px;
    height: 38px;
    background-color: #A6845E;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.5px;
    color: #FFFFFF;
    border: 1px #A6845E;
}

.gCfznT {
    height: 38px;
    width: 40%;
    -webkit-box-align: center;
    align-items: center;
    border-radius: 8px;
    display: flex;
    padding: 0px 10px;
    border: 1px solid  #DBDBDB;
    background-color: #FFFFFF;
}

.eEQPeW {
    width: 100%;
    border: 0px;
    color: #242424;
    flex: 1 1 0%;
    margin: 0px;
    padding: 0px;
    outline: none;
    font-size: 16px;
    font-weight: 800;
    
}

.body{
    background-color: #F8F8F8;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin: 0;
}

.header{
  margin-bottom: 4%;
    background-color: #FFFFFF;
    width: 100%;
    height: 96px;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.container {
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.basic {
    background-color: #FFFFFF;
    border-radius: 10px;
    margin-bottom: 15px;
    border: 1px solid #E9E9E9;
    max-width: 100%;
}
.separator{
    color: #535353;
    border: 0.1px solid #535353;
    background-color: #535353;
    /* width: 532px; */
    height: 0.5px;
    margin: 0%;
}

.separator2{
    color: #E9E9E9;
    border: 0.1px solid #E9E9E9;
    background-color: #E9E9E9;
    /* width: 532px; */
    height: 0.5px;
    margin: 0%;
}

/*Css de cada elemento*/

/*Primer elemento*/
.div1{
    display: flex;
    flex-direction: column;
    width: 532px;
    height: 149px;
    background-image: linear-gradient(to right, #0F0F10 , #313131);

}

.div11{
    margin: 3.5% 4% 18px 4%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.div12{
    margin: 18px 4% 3.5% 4%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.div111{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 60%;
}

.div1111{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 5%;
}

.div11111{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.div11111 span:not(:last-child){
    margin-right: 4px;
}

.div12 div{
    display: flex;
    flex-direction: column;
}

.div12 span{
    text-align: end;  
}

.div121 span{
    text-align: start;   
}


.div121{
    flex: 0.9 1 0px;
}
.div122, .div123{
    flex: 1 1 0px;
}

.div122 div{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.div122 div span:first-child{
    margin-right: 2%;
}

.div123 div{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.div123 div span:first-child{
    margin-right: 2%;
}

/*Segundo elemento*/

.div2 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 532px;
    height: 135px;

    background-color: #2E2E2E;
    opacity: 80%;
}
.div21{
    margin: 3.5% 4% 3.5% 4%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}
.div22{
    margin: 3.5% 4% 3.5% 4%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.div23{
    margin: 3.5% 4% 3.5% 4%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.values span:first-child{
    margin-right: 4px;
}


/*Tercer elemento*/

.div3{
    display: flex;
    flex-direction: column;
    width: 532px;
    height: 102px;
}

.div31{
    margin: 0% 2%;
}


.div31{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 3.5% 4% 2% 4%;
}

.div311{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.div311 span:first-child{
    margin-right:5px;
}

.div32{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0% 4% 2% 4%;
}

.div321, .div322{
    margin: 0%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
}



/*Cuarto elemento*/
.div4{
    display: flex;
    flex-direction: column;
    width: 532px;
    height: 102px;
}

.div41{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 3.5% 4% 2% 4%;
}

.div42{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0% 4% 2% 4%;
}



/*Quinto elemento*/
.div5{
    display: flex;
    flex-direction: column;
    width: 532px;
    height: 210px;
}

.div5 > div:nth-child(2){
    border-top: 1px solid rgb(233, 234, 235);
}

.div5 > div:nth-child(2) span{
    margin-top: 2%;
}

.div5x{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.div54 div:first-child{
    text-align: start;
    max-width: 60%;
}

.div51{
    margin: 3.5% 5% 19px 5%;
}

.div52{
    margin: 19px 5% 7.5px 5%;
}

.div53{
    margin: 7.5px 5% 19px 5%;
}

.div54{
    margin: 0% 4% 2% 4%;
}



/*Css de los input con texto estático*/

input[type="text"]#subdomaintwo{
    -webkit-appearance: none!important;
    text-align: right;
    font-weight: bold;
    color: black;
    width: 14%;
    border: 1px solid gray;
    border-left: 0px;
    margin: 0 0 0 -7px;
    background: white;
}
input[type="text"]#subdomain{
    -webkit-appearance: none!important;
    border: 1px solid gray;
    border-right: 0px;
    outline: none;
}

/*Botones*/
.buttons {
    -webkit-box-align: center;
    border-radius: 18px;
    padding: 0px 8px;
}


/*Tablet*/
@media (max-width: 560px) {
    
    .header{
        height: 86.4px;
    }
    .container{
        height: 91%;
    }
    .basic{
        width: 90%;
    }

    .titlestyle, .titlestyle2 {
        font-size: 12px;
    }
    .textstyle, .textstyle2 {
        font-size: 10px;
    }
    .textstyle3 {
        font-size: 14px;
    }

    /*First block*/

    .div1{
        height: 126.65px;
    }
    .div11 {
        margin-bottom: 12px;
    }
    .div12 {
        margin-top: 12px;
    }
    

    /*Second block*/
    .div2{
        height: 114.75px;
    }
    .connectbutton{
        width: 100px;
        height: 32.3px;
        background-color: #A6845E;
        font-weight: 500;
        font-size: 10px;
        letter-spacing: -0.5px;
        color: #FFFFFF;
        border: 1px #A6845E;
    }

    /*Third & Fourth block*/
    .div3, .div4 {
        height: 86.7px;
    }
    .buttonstyle1{
        font-size: 10px;
        width: 86.7px;
        height: 32.3px;
    }
    .buttonstyle2{
        font-size: 10px;
    }
    .gCfznT {
        height: 32.3px;
        
    }
    .eEQPeW{
        font-size: 12px;
    }
    .div31{
        margin-bottom: 1%;
    }
    .div32{
        margin: 1% 4% 3.5% 4%;
    }
    .div41{
        margin-bottom: 1%;
    }
    .div42{
        margin: 1% 4% 3.5% 4%;
    }

    /*Fifth block*/
    .div5{
        height: 178.5px;
    }
    .div51{
        margin-bottom: 10px;
    }
    .div52{
        margin-top: 10px;
        margin-bottom: 7px;
    }
    .div53{
        margin-top: 7px;
        margin-bottom: 12px;
    }
}
/*Phones*/
@media (max-width: 480px) {
    
    .header{
        height: 76.8px;
    }
    .image1{
        width: 111px;
        height: 31px;
    }
    .image2{
        width: 97px;
        height: 27px;
    }
    .image3{
        width: 51.15px;
        height: 32.25px;
    }
    .container{
        height: 91%;
    }
    .basic{
        width: 90%;
    }

    .titlestyle, .titlestyle2 {
        font-size: 11px;
    }
    .textstyle, .textstyle2 {
        font-size: 9px;
    }
    .textstyle3 {
        font-size: 13px;
    }

    /*First block*/

    .div1{
        height: 126.65px;
    }
    .div11 {
        margin-bottom: 17px;
    }
    .div12 {
        margin-top: 17px;
    }
    .div121{
        flex: 0.95 1 0px;
    }
    .div122, .div123{
        flex: 1 1 0px;
    }

    /*Second block*/
    .div2{
        height: 114.75px;
    }
    .connectbutton{
        width: 93.75px;
        height: 30.4px;
        background-color: #A6845E;
        font-weight: 500;
        font-size: 10px;
        letter-spacing: -0.5px;
        color: #FFFFFF;
        border: 1px #A6845E;
    }

    /*Third & Fourth block*/
    .div3, .div4 {
        height: 86.7px;
    }
    .buttonstyle1{
        font-size: 10px;
        width: 76.5px;
        height: 30.4px;
    }
    .buttonstyle2{
        font-size: 10px;
    }
    .gCfznT {
        height: 30.4px;
    }
    .eEQPeW{
        font-size: 12px;
    }
    .div31{
        margin-bottom: 1.5%;
    }
    .div32{
        margin: 1.5% 4% 3.5% 4%;
    }
    .div41{
        margin-bottom: 1.5%;
    }
    .div42{
        margin: 1.5% 4% 3.5% 4%;
    }

    /*Fifth block*/
    .div5{
        height: 168px;
    }
    .div51{
        margin-bottom: 12px;
    }
    .div52{
        margin-top: 12px;
        margin-bottom: 7px;
    }
    .div53{
        margin-top: 7px;
        margin-bottom: 12px;
    }
}
@media (max-width: 415px) {
    
    .header{
        height: 67.2px;
    }
    .image1{
        width: 111px;
        height: 31px;
    }
    .image2{
        width: 97px;
        height: 27px;
    }
    .image3{
        width: 51.15px;
        height: 32.25px;
    }
    .container{
        height: 91%;
    }
    .basic{
        width: 90%;
    }

    .titlestyle, .titlestyle2 {
        font-size: 9px;
    }
    .textstyle, .textstyle2 {
        font-size: 8px;
    }
    .textstyle3 {
        font-size: 11px;
    }

    /*First block*/

    .div1{
        height: 111.75px;
    }
    .div11 {
        margin-bottom: 14px;
    }
    .div12 {
        margin-top: 14px;
    }
    
    .div121{
        flex: 1.1 1 0px;
    }

    .div122, .div123{
        flex: 1 1 0px;
    }

    /*Second block*/
    .div2{
        height: 101.25px;
    }
    .connectbutton{
        width: 93.75px;
        height: 30.4px;
        background-color: #A6845E;
        font-weight: 500;
        font-size: 10px;
        letter-spacing: -0.5px;
        color: #FFFFFF;
        border: 1px #A6845E;
    }

    /*Third & Fourth block*/
    .div3, .div4 {
        height: 76.5px;
    }
    .buttonstyle1{
        font-size: 10px;
        width: 71.4px;
        height: 28.5px;
    }
    .buttonstyle2{
        font-size: 10px;
    }
    .gCfznT {
        height: 30.4px;
    }
    .eEQPeW{
        font-size: 12px;
    }
    .div31{
        margin-bottom: 1.5%;
    }
    .div32{
        margin: 1.5% 4% 3.5% 4%;
    }
    .div41{
        margin-bottom: 1.5%;
    }
    .div42{
        margin: 1.5% 4% 3.5% 4%;
    }

    /*Fifth block*/
    .div5{
        height: 157.5px;
    }
    .div51{
        margin-bottom: 12px;
    }
    .div52{
        margin-top: 12px;
        margin-bottom: 7px;
    }
    .div53{
        margin-top: 7px;
        margin-bottom: 12px;
    }
}
@media (max-width: 360px) {
    
    .header{
        height: 62.4px;
    }
    .image1{
        width: 104px;
        height: 29px;
    }
    .image2{
        width: 90px;
        height: 25px;
    }
    .image3{
        width: 44.3px;
        height: 27.95px;
    }
    .container{
        height: 91%;
    }
    .basic{
        width: 90%;
    }

    .titlestyle, .titlestyle2 {
        font-size: 8px;
    }
    .textstyle, .textstyle2 {
        font-size: 6px;
    }
    .textstyle3 {
        font-size: 10px;
    }

    .separator, .separator2{
        height: 0.15px;
    }

    /*First block*/

    .div1{
        height: 89.4px;
    }
    .div11 {
        margin-bottom: 10px;
    }
    .div12 {
        margin-top: 10px;
        flex-wrap: unset;
    }
    .div121, .div122, .div123{
        flex: unset;
    }
    /*Second block*/
    .div2{
        height: 81px;
    }
    .connectbutton{
        width: 81.25px;
        height: 24.7px;
        background-color: #A6845E;
        font-weight: 500;
        font-size: 8px;
        letter-spacing: -0.5px;
        color: #FFFFFF;
        border: 1px #A6845E;
    }

    /*Third & Fourth block*/
    .div3, .div4 {
        height: 61.2px;
    }
    .buttonstyle1{
        font-size: 8px;
        width: 61.2px;
        height: 24.7px;
    }
    .buttonstyle2{
        font-size: 8px;
    }
    .gCfznT {
        height: 24.7px;
        width: 40%;
    }
    .eEQPeW{
        font-size: 10px;
    }
    .div31{
        margin-bottom: 1%;
    }
    .div32{
        margin: 1% 4% 3.5% 4%;
    }
    .div41{
        margin-bottom: 1%;
    }
    .div42{
        margin: 1% 4% 3.5% 4%;
    }

    /*Fifth block*/
    .div5{
        height: 126px;
    }
    .div51{
        margin-bottom: 8px;
    }
    .div52{
        margin-top: 8px;
        margin-bottom: 6px;
    }
    .div53{
        margin-top: 6px;
        margin-bottom: 8px;
    }
}
@media (max-width: 320px){
    .image1{
        width: 104px;
        height: 29px;
    }
    .image2{
        width: 90px;
        height: 25px;
    }
    .image3{
        width: 44.3px;
        height: 27.95px;
    }
    .container{
        height: 90%;
    }
    .basic{
        width: 90%;
    }

    .titlestyle, .titlestyle2 {
        font-size: 8px;
    }
    .textstyle, .textstyle2 {
        font-size: 6px;
    }
    .textstyle3 {
        font-size: 8px;
    }

    .separator, .separator2{
        height: 0.01px;
    }

    /*First block*/

    .div1{
        height: 89.4px;
    }
    .div11 {
        margin-bottom: 10px;
    }
    .div12 {
        margin-top: 10px;
        flex-wrap: unset;
    }
    .div121, .div122, .div123{
        flex: unset;
    }
    /*Second block*/
    .div2{
        height: 81px;
    }
    .connectbutton{
        width: 62.5px;
        height: 19px;
        background-color: #A6845E;
        font-weight: 500;
        font-size: 6px;
        letter-spacing: -0.5px;
        color: #FFFFFF;
        border: 1px #A6845E;
    }

    /*Third & Fourth block*/
    .div3, .div4 {
        height: 61.2px;
    }
    .buttonstyle1{
        font-size: 6px;
        width: 51px;
        height: 19px;
    }
    .buttonstyle2{
        font-size: 8px;
    }
    .gCfznT {
        height: 19px;
        width: 40%;
    }
    .eEQPeW{
        font-size: 10px;
    }
    .div31{
        margin-bottom: 1.5%;
    }
    .div32{
        margin: 1.5% 4% 3.5% 4%;
    }
    .div41{
        margin-bottom: 1.5%;
    }
    .div42{
        margin: 1.5% 4% 3.5% 4%;
    }

    /*Fifth block*/
    .div5{
        height: 115.5px;
    }
    .div51{
        margin-bottom: 10px;
    }
    .div52{
        margin-top: 10px;
        margin-bottom: 7px;
    }
    .div53{
        margin-top: 7px;
        margin-bottom: 10px;
    }
}
@media (max-width: 280px) {
    
    .image1{
        width: 104px;
        height: 29px;
    }
    .image2{
        width: 90px;
        height: 25px;
    }
    .image3{
        width: 44.3px;
        height: 27.95px;
    }
    .container{
        height: 90%;
    }
    .basic{
        width: 90%;
    }

    .titlestyle, .titlestyle2 {
        font-size: 7px;
    }
    .textstyle, .textstyle2 {
        font-size: 5px;
    }
    .textstyle3 {
        font-size: 7px;
    }

    .separator, .separator2{
        height: 0.01px;
    }

    /*First block*/

    .div1{
        height: 89.4px;
    }
    .div11 {
        margin-bottom: 10px;
    }
    .div12 {
        margin-top: 10px;
        flex-wrap: unset;
    }
    .div121, .div122, .div123{
        flex: unset;
    }
    /*Second block*/
    .div2{
        height: 81px;
    }
    .connectbutton{
        width: 62.5px;
        height: 19px;
        background-color: #A6845E;
        font-weight: 500;
        font-size: 6px;
        letter-spacing: -0.5px;
        color: #FFFFFF;
        border: 1px #A6845E;
    }

    /*Third & Fourth block*/
    .div3, .div4 {
        height: 61.2px;
    }
    .buttonstyle1{
        font-size: 6px;
        width: 51px;
        height: 19px;
    }
    .buttonstyle2{
        font-size: 8px;
    }
    .gCfznT {
        height: 19px;
        width: 40%;
    }
    .eEQPeW{
        font-size: 10px;
    }
    .div31{
        margin-bottom: 1.5%;
    }
    .div32{
        margin: 1.5% 4% 3.5% 4%;
    }
    .div41{
        margin-bottom: 1.5%;
    }
    .div42{
        margin: 1.5% 4% 3.5% 4%;
    }

    /*Fifth block*/
    .div5{
        height: 115.5px;
    }
    .div51{
        margin-bottom: 10px;
    }
    .div52{
        margin-top: 10px;
        margin-bottom: 7px;
    }
    .div53{
        margin-top: 7px;
        margin-bottom: 10px;
    }
}
@media (max-width: 270px) {
    
    .image1{
        width: 104px;
        height: 29px;
    }
    .image2{
        width: 90px;
        height: 25px;
    }
    .image3{
        width: 44.3px;
        height: 27.95px;
    }
    .container{
        height: 90%;
    }
    .basic{
        width: 90%;
    }

    .titlestyle, .titlestyle2 {
        font-size: 7px;
    }
    .textstyle, .textstyle2 {
        font-size: 5px;
    }
    .textstyle3 {
        font-size: 7px;
    }

    .separator, .separator2{
        height: 0.01px;
    }

    /*First block*/

    .div1{
        height: 81.95px;
    }
    .div11 {
        margin-bottom: 10px;
    }
    .div12 {
        margin-top: 10px;
        flex-wrap: unset;
    }
    .div121, .div122, .div123{
        flex: unset;
    }
    /*Second block*/
    .div2{
        height: 74.25px;
    }
    .connectbutton{
        width: 62.5px;
        height: 19px;
        background-color: #A6845E;
        font-weight: 500;
        font-size: 6px;
        letter-spacing: -0.5px;
        color: #FFFFFF;
        border: 1px #A6845E;
    }

    /*Third & Fourth block*/
    .div3, .div4 {
        height: 56.1px;
    }
    .buttonstyle1{
        font-size: 6px;
        width: 45.9px;
        height: 17.1px;
    }
    .buttonstyle2{
        font-size: 8px;
    }
    .gCfznT {
        height: 17.1px;
        width: 35%;
    }
    .eEQPeW{
        font-size: 8px;
    }
    .div31{
        margin-bottom: 1.5%;
    }
    .div32{
        margin: 1.5% 4% 3.5% 4%;
    }
    .div41{
        margin-bottom: 1.5%;
    }
    .div42{
        margin: 1.5% 4% 3.5% 4%;
    }

    /*Fifth block*/
    .div5{
        height: 110.5px;
    }
    .div51{
        margin-bottom: 10px;
    }
    .div52{
        margin-top: 10px;
        margin-bottom: 7px;
    }
    .div53{
        margin-top: 7px;
        margin-bottom: 10px;
    }
}



/*
@media (min-width: 0px) {
    .container {
    min-width: 200px; } }
@media (min-width: 576px) {
    .container {
    max-width: 540px; } }
@media (min-width: 768px) {
    .container {
    max-width: 720px; } }
@media (min-width: 992px) {
    .container {
    max-width: 960px; } }
@media (min-width: 1200px) {
    .container {
    max-width: 1140px; } }
@media (min-width: 2560px) {
    .container {
    max-width: 1880px; } }
@media (min-width: 3840px) {
    .container {
    max-width: 2256px; } }*/