*{margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;}

html {
  scroll-behavior: smooth;
}

body{font-family: "Outfit", sans-serif;
     font-size: 16px;
     font-weight: normal;
     color:rgba(25,26,28,1);} 
     
h1{font-family: "Cal Sans", sans-serif;
   text-transform: uppercase;
   font-weight: bold;
   font-size: 32px;
   line-height: 27px;} 
   
h2{font-weight: normal;
   font-size: 16px;
   line-height: 13px;
   margin-top: 10px;
   color:rgba(25,26,28,0.4);}

h3,
.nosotros p{font-weight: normal;
            font-size: 16px;
            line-height: 16px;
            margin-top: 16px;
            color:rgba(25,26,28,0.2);}
   


nav{width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    background-color: rgba(255,255,255,0.3);}

    .nav-logo{background: url("../img/capitalbrake_logo_1300px.png") no-repeat;
                background-position: center center;
                background-size: contain;
                width: 90px;
                height: 30px;
                margin-left: calc(50% - 45px);
               }
    
    .nav-link,
    .nav-reef{display: none;
              font-size: 1px;}


main{width: 320px;
     height: auto;
     margin-left: calc(50% - 160px);
     }

     .inicio{height: auto;
             padding-top: 150px;
             padding-bottom: 50px;
             background: url("../img/header_320px.jpg") no-repeat;
             background-position: top right;
             }

     .test{height: auto;
           padding-top: 170px;
           padding-bottom: 50px;
           background: url("../img/love_320px.jpg") no-repeat;
           background-position: top right;
           }
      
      .recursos{height: auto;
                padding-top: 250px;
                background: url("../img/pestañas_320px.jpg") no-repeat;
                background-position: top right;}
      
      .nosotros{height: auto;
                padding-top: 60px;
                padding-bottom:20px;}




.btn-test,
.btn-ver{background: rgba(25,26,28,1);
          color: rgba(255,255,255,1);
          border: solid 1px rgba(0,0,0,0.7);
          border-radius: 5px;
          text-align: center;
          width: 300px;
          height: 30px;
          font-weight: normal;
          font-family: "Outfit", sans-serif;
          margin-top: 3rem;
          transition: all ease 0.5s;}


          .btn-test:hover,
          .btn-ver:hover{background-color: rgba(255,255,255,1);
                         border: solid 1px rgba(201,254,123,1);
                         color: rgba(25,26,28,0.6);
                         box-shadow: 0 0 5px rgba(201,254,123,1);}


@media only screen and (min-width: 479px){


h2{margin-top: 8px;}

h3,
.nosotros p{font-weight: normal;
            font-size: 13px;
            line-height: 13px;
            margin-top: 8px;
            }

nav{width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(255,255,255,0.3);}

    .nav-logo{background: url("../img/capitalbrake_logo_1300px.png") no-repeat;
                background-position: center center;
                background-size: contain;
                width: 100px;
                height: 30px;
                margin-left: 5px;
               }
    
    .nav-link{display: inline;
              font-size: 12px;
              margin-right: 15px;
              transition: all ease 0.5s;}

                 .nav-link a{color:rgba(0,0,0,0.3);
                             margin-left: 5px;}

                  .nav-link a:hover{color: rgba(0,0,0,0.7);}




main{width: 480px;
     height: auto;
     margin-left: calc(50% - 240px);
     }

     .inicio{height: auto;
             padding-top: 70px;
             padding-bottom: 50px;
             background: url("../img/header_480px.jpg") no-repeat;
             background-position: top right;
             }

             .inicio-txt{display: flex;
                         flex-direction: column;
                         align-items:flex-start;
                         justify-content: center;
                         width: 60%;
                         height: 100%;
                         }

      .test{height: auto;
           padding-top: 50px;
           padding-bottom: 50px;
           background: url("../img/love_480px.jpg") no-repeat;
           background-position: center left;
           display: flex;
           flex-direction: row;
           align-items: flex-end;
           justify-content: flex-end;
           }

              .test-txt{display: flex;
                        flex-direction: column;
                        align-items:flex-start;
                        justify-content: center;
                        width: 60%;
                        height: 100%;
                        }
      
      .recursos{height: auto;
                padding-top: 50px;
                background: url("../img/pestañas_480px.jpg") no-repeat;
                background-position: top right;}

                .recursos-txt{width: 60%;}

      .nosotros{display: flex;
                flex-direction: row;
                align-self: flex-end;
                justify-content: flex-end;
                background: url("../img/reloj_480px.jpg") no-repeat;
                background-position: bottom left;}

                .nosotros-txt{width: 60%;}

}
@media only screen and (min-width: 769px){

h1{font-size: 48px;
   line-height: 40px;} 
   
h2{font-weight: normal;
   font-size: 20px;
   line-height: 22px;
   margin-top: 10px;
   color:rgba(25,26,28,0.4);}

h3,
.nosotros p{font-weight: normal;
            font-size: 18px;
            line-height: 18px;
            margin-top: 18px;
            color:rgba(25,26,28,0.2);}

main{width: 769px;
     height: auto;
     margin-left: calc(50% - 385px);
     }

     .inicio{height: auto;
             padding-top: 120px;
             padding-bottom: 50px;
             background: url("../img/header_769px.jpg") no-repeat;
             background-position: top right;
             }

             .inicio h2,
             .inicio h3{width: 80%;}

             .inicio h3{margin-top: 8px;}

      .test{height: auto;
            padding-top: 50px;
            padding-bottom: 50px;
            background: url("../img/love_769px.jpg") no-repeat;
            background-position: center left;
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            justify-content: flex-end;}

            .test-txt h2{width: 85%;} 
            .test-txt h3{width: 85%;}

      .recursos{height: auto;
                padding-top: 50px;
                background: url("../img/pestañas_769px.jpg") no-repeat;
                background-position: center right;}

            .recursos-txt{width: 60%;}

      .nosotros{display: flex;
                flex-direction: row;
                align-self: flex-end;
                justify-content: flex-end;
                background: url("../img/reloj_769px.jpg") no-repeat;
                background-position: center left;}

            .nosotros-txt{width: 60%;}  
}
@media only screen and (min-width: 1024px){


h1{font-size: 3.2rem;
   line-height: 2.5rem;}

h2{font-size: 1.2rem;
   line-height: 1rem;}

h3{font-size: 1rem;
   line-height: 0.9rem;}

nav{position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    }

      .nav-logo{background: url("../img/capitalbrake_logo_1300px.png") no-repeat;
                background-position: center center;
                background-size: contain;
                width: 190px;
                height: 50px;
                margin-left: 1rem;}

      .nav-link a{color:rgba(0,0,0,0.3);
                  font-size: 1rem;
                  margin-left: 0.5rem;
                  transition: all ease 0.5s;}

                  .nav-link a:hover{color: rgba(0,0,0,0.7);}

      .nav-reef{display: flex;
                flex-direction: row;
                justify-content: center/*space-between*/;
                align-items: center;
                height: 60px;
                width: 100px;
                margin-right: 12%;}

                 .nav-reef a{width: 20px;
                             height: 20px;
                             background-repeat: no-repeat;
                             background-position: center center;
                             background-size: contain;
                             opacity: 0.6;
                             }

                             .nav-reef a:nth-child(1){background-image: url("../img/icon_inst.png");}
                             /*.nav-reef a:nth-child(2){background-image: url("../img/icon_face.png");}*/
                            .nav-reef a:nth-child(2){background-image: url("../img/icon_tick.png");margin-left: 10px;}
                             /*.nav-reef a:nth-child(4){background-image: url("../img/icon_twt.png");}*/

main{width: 1024px;
     height: auto;
     margin-left: calc(50% - 512px);
     }
    
     .inicio,
     .test,
     .recursos,
     .nosotros{min-height: 600px;}


     .inicio-txt,
     .recursos-txt{margin-left: 50px;}

     .inicio{padding-top: 0px;
             padding-bottom:0px;
             display: flex;
             flex-direction: column;
             align-items: flex-start;
             justify-content: center;
             background: url("../img/header_1024px.jpg") no-repeat;
             background-position: center right;
             }


           .inicio-txt{width: 410px;}
                 
                 .inicio-txt h1{width: 100%;}
                 .inicio-txt h2{width: 90%;}
                 .inicio-txt h3{width: 90%;}

      .test{padding-top: 0px;
            padding-bottom: 0px;
            background: url("../img/love_1024px.jpg") no-repeat;
            background-position: center left;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;}

            .test-txt{width: 550px;}

                      .test-txt h1{width: 100%;}
                      .test-txt h2{width: 80%;}
                      .test-txt h3{width: 80%;}

      .recursos{padding-top:0px;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;
                background: url("../img/pestañas_1024px.jpg") no-repeat;
                background-position: center right;}

                .recursos-txt{width: 400px;}

      .nosotros{display: flex;
                flex-direction: row;
                align-self: flex-end;
                justify-content: flex-end;
                background: url("../img/reloj_769px.jpg") no-repeat;
                background-position: bottom left;}
                
                .nosotros-txt{width: 600px;}
                .nosotros-txt p{font-size: 1rem;
                                line-height: 0.9rem;
                                width: 80%;}
}







/*     
h1{font-family: "Cal Sans", sans-serif;
   text-transform: uppercase;
   font-weight: bold;
   font-size: 4.5rem;
   line-height: 3.5rem;}

h2{font-weight: normal;
   font-size: 1.3rem;
   line-height: 1.3rem;
   margin-top: 1.7rem;
   color:rgba(25,26,28,0.4);}
   
h3{font-weight: normal;
   font-size: 1.1rem;
   line-height: 1.1rem;
   margin-top: 1rem;
   color:rgba(25,26,28,0.2);}


nav{position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    }/*

      .nav-logo{background: url("../img/capitalbrake_logo_1300px.png") no-repeat;
                background-position: center center;
                background-size: contain;
                width: 190px;
                height: 50px;
                margin-left: 1rem;}

      .nav-link a{color:rgba(0,0,0,0.3);
                  font-size: 1rem;
                  margin-left: 0.5rem;
                  transition: all ease 0.5s;}

                  .nav-link a:hover{color: rgba(0,0,0,0.7);}

      .nav-reef{display: flex;
                flex-direction: row;
                justify-content: center/*space-between*//*;
       /*         align-items: center;
                height: 60px;
                width: 100px;
                margin-right: 12%;}

                 .nav-reef a{width: 20px;
                             height: 20px;
                             background-repeat: no-repeat;
                             background-position: center center;
                             background-size: contain;
                             opacity: 0.6;
                             }

                             .nav-reef a:nth-child(1){background-image: url("../img/icon_inst.png");}
                             /*.nav-reef a:nth-child(2){background-image: url("../img/icon_face.png");}*/
         /*                    .nav-reef a:nth-child(2){background-image: url("../img/icon_tick.png");margin-left: 10px;}
                             /*.nav-reef a:nth-child(4){background-image: url("../img/icon_twt.png");}*/
/*
main{width:1300px;
     min-height: 200px;
     /*display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
     margin-left: calc(50% - 650px);
     
     }  
     
     .inicio{display: flex;
             flex-direction: row;
             justify-content:flex-start;
             align-items:flex-start;
             width: 100%;
             height: 800px;
             background: url("../img/header_1300px.jpg") no-repeat;
             background-position: top right;
             background-size:contain;
            }

             .inicio-txt{display: flex;
                         flex-direction: column;
                         align-items:flex-start;
                         justify-content: center;
                         width: 60%;
                         height: 100%;
                         }
      
      .test{display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            background: url("../img/love_1300px.jpg") no-repeat;
            background-position: left -100px center;
            background-size: 50% auto;
            width: 100%;
            height: 100vh;}
              
               .test-txt{display: flex;
                         flex-direction: column;
                         align-items: flex-start;
                         justify-content: center;
                         width: 68%;
                         height: 100%;
                         padding-left: 10rem; 
                        }

               .test-intro{width: 80%;}
      
      .nosotros{width: 100%;
                height: 100vh;
                display: flex;
                flex-direction: row;
                justify-content: flex-end;
                align-items: center;
                background: url("../img/reloj_1300px.jpg");
                background-repeat: no-repeat;
                background-position: left bottom;
                background-size: auto 70%;}

                .nosotros-txt{width: 58%;
                              margin-bottom: 4rem;}

                              .nosotros-txt h1{margin-bottom: 2rem;}

                              .nosotros-txt p{width: 90%;
                                              margin-bottom: 1rem;
                                              font-weight: normal;
                                              font-size: 1.1rem;
                                              line-height: 1.1rem;
                                              margin-top: 1rem;
                                              color:rgba(25,26,28,0.2);}

       .recursos{width: 100%;
                 height: 100vh;
                 display: flex;
                 flex-direction: row;
                 align-items: center;
                 justify-content: flex-start;
                 background: url("../img/pestañas_1300px.jpg");
                 background-repeat: no-repeat;
                 background-position: right center;
                 background-size: 50%;
                 }

                 .recursos-txt{width: 50%;}
                 .recursos h2,
                 .recursos h3{width: 80%;}

               




.btn-test{background: rgba(25,26,28,1);
          color: rgba(255,255,255,1);
          border: solid 1px rgba(0,0,0,0.7);
          border-radius: 5px;
          text-align: center;
          width: 300px;
          height: 30px;
          font-weight: normal;
          font-family: "Outfit", sans-serif;
          margin-top: 3rem;
          transition: all ease 0.5s;}

          .btn-test:hover{background-color: rgba(255,255,255,1) /*rgba(189,224,139,1)*//*;
                        /*  border: solid 1px rgba(201,254,123,1);
                          color: rgba(25,26,28,0.6);
                          box-shadow: 0 0 5px rgba(201,254,123,1);}

         .test-active h2,
         .test-active h3,
         .test-active .btn-test {display: none;}

.btn-ver{background: rgba(25,26,28,1);
          color: rgba(255,255,255,1);
          border: solid 1px rgba(0,0,0,0.7);
          border-radius: 5px;
          text-align: center;
          width: 300px;
          height: 30px;
          font-weight: normal;
          font-family: "Outfit", sans-serif;
          margin-top: 3rem;
          transition: all ease 0.5s;}

          .btn-ver:hover{background-color: rgba(255,255,255,1);
                          border: solid 1px rgba(201,254,123,1);
                          color: rgba(25,26,28,0.6);
                          box-shadow: 0 0 5px rgba(201,254,123,1);}

@media only screen and (max-width: 480px) {
body {
background-color: lightblue;
}
.nav-link a,
.nav-reef{display: none;}

      

main{max-width: 320px;
     margin-left: calc( 50% - 160px);
     outline: solid red 1px;}



     
     .inicio-txt{width: 100%;}




}