@font-face {
    font-family: 'SFProBlack';
    src: url(fonts/SF-Pro-Display-Black.ttf);
    font-family: 'SFProBold';
    src: url(fonts/SF-Pro-Display-Bold.ttf); 
}
@font-face {
    font-family: 'SFProLight';
    src: url(fonts/SF-Pro-Display-Light.ttf);
}
@font-face {
    font-family: 'SFProMedium';
    src: url(fonts/SF-Pro-Display-Medium.ttf);
}
@font-face {
    font-family: 'SFProRegular';
    src: url(fonts/SF-Pro-Display-Regular.ttf);
}
@font-face {
    font-family: 'SFProHeavy';
    src: url(fonts/SF-Pro-Text-Heavy.ttf);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: 'SFProLight';

}
.wrapper{
    height:auto;
    width:auto;
    display:grid;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "header"
    "banner"
    "shelf"
    "carousel"
    "footer";
}

.header{
    grid-area:header;
    position:fixed;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color: rgba(20, 20, 20, 0.87);
    padding:5px;
    backdrop-filter: blur(8px);
}
.sticky{
    position:fixed;
}
.header .hcontainer{
    height:35px;
    width:1069px;
    display:flex;
    align-items: center;
    justify-content: center;
    transition:.2s;
}
.hcontainer div:nth-child(n) {
    display: flex;
    align-items: center;
    justify-content: center;
}
.hcontainer li{
    list-style: none;
    margin:0px 12px;
    padding:5px 10px;
    font-size:0.8em;
    text-decoration:none;
    font-weight: 100;
    color:rgba(230,230,230,0.8);
    transition:.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hcontainer li:hover{
    color:white;
}
.logo, .search, .shop{
    transition:.3s;
}
.logo .logoi, .search .searchi, .shop .shopi{
    position:absolute;
}
.logo .logoiw, .search .searchiw, .shop .shopiw{
    position:absolute;
}
.logo:hover .logoi, .search:hover .searchi, .shop:hover .shopi{
    opacity: 0;
}
.hcontainer img{
    height:16px;
    width:16px;
    transition:.2s;
}
.hcontainer .search, .hcontainer .shop{
    margin:5px 0px;
}
.banner{
    grid-area:banner;
    margin-top:40px;
}
.banner div:nth-child(n){
    display: flex;
    align-items: center;
    justify-content: center;
}
.banner a{
    text-decoration: none;
    color:black;
}
.banner .banner-small{
    height:50px;
    background-color: #F4F4F7;
    font-weight: 200;
}
.banner .banner-regular{
    height:auto;
    background-color: #FBFAFC;
    /* background-color: #998ca6; */
    font-weight: 100;
    /* margin:10px 0px; */
    display: flex;
    flex-direction: column;
    margin-top: -63px;
    position: relative;
    z-index: -1;
}
.banner .banner-regular-pro{
    height:auto;
    background-color: #000000;
    /* font-weight: 100; */
    /* font-family: 'SFProHeavy'; */
    /* font-size: 30px; */
    margin:10px 0px;
    display: flex;
    flex-direction: column;
    color: #F4F4F7;
    position: relative;
    z-index: -1;
}

.banner .banner-regular-pro h1{
    font-weight: 500;
    font-size: 54px;
    /* letter-spacing: -3.2px; */
    padding-top: 35px;
    position: absolute;
    margin-bottom: 29rem;
    font-family: 'SFProBold';
}

.banner .banner-regular-pro h2{
    font-weight: 400;
    font-size: 1.7em;
    position: absolute;
    margin-bottom: 20rem;
    font-family: 'SFProRegular';
}


.banner .banner-regular-pro h3{
    font-weight: 400;
    font-size: 1.4em;
    position: relative;
    /* margin-bottom: 15rem; */
    font-family: 'SFProRegular';
    color:#3082D4;
    /* left: 654px; */
    padding: 5px 20px;
    z-index: 1;
    float: left;
    top: 170px;
}
 
/*Pro*/

.banner .banner-regular h1{
    font-weight: 500;
    font-size: 3.5em;
    padding-top: 35px;
    position: absolute;
    margin-bottom: 25rem;
    font-family: 'SFProMedium';
}
.banner .banner-regular h2{
    font-weight: 400;
    font-size: 1.8em;
    position: absolute;
    margin-bottom: 16rem;
    font-family: 'SFProRegular';
}
.banner-small h5{
    color:rgba(80,80,80,0.96);
}


.banner .banner-regular h3{
    padding:5px 20px;
    cursor:pointer;
    font-weight: 400;
    color:#3082D4;
    position: relative;
    top: 14rem;
    float: left;
    font-size: 21px;
    font-family: 'SFProRegular';
    z-index: 1;
}
/*Watch*/
.banner .banner-regular-watch {
    height: 583px;
    /* margin:10px 0px; */
    display: flex;
    flex-direction: column;
    color: #F4F4F7;
    position: relative;
    z-index: -1;
}

.banner .banner-regular-watch .logo-fit {
    position: absolute;
    margin-bottom: 390px;
}


.banner .banner-regular-watch .fit{
    object-fit: cover;
    width: 100%;
    height: 600px;
}

.banner .banner-regular-watch h2{
    font-weight: 400;
    font-size: 1.7em;
    position: absolute;
    margin-bottom: 17rem;
    font-family: 'SFProRegular';
    color: #000;
}

.banner .banner-regular-watch h3{
    font-weight: 400;
    font-size: 1.4em;
    position: relative;
    font-family: 'SFProRegular';
    color:#3082D4;
    padding: 5px 20px;
    z-index: 1;
    float: left;
    bottom: 23rem;
}


/*Cards*/
.shelf{
    grid-area:shelf;
    display:grid;
    grid-template-columns: 1fr 1fr;
    margin-top: -30px;
}
.shelf div:nth-child(odd){
    margin:5px 5px 5px 10px;
}
.shelf div:nth-child(even){
    margin:5px 10px 5px 5px;
}
.shelf a{
    text-decoration: none;
    margin:0;
    padding:0;
}
.shelf .shelf-element{
    height:600px;
    background-color: #FBFAFC;
}
.shelf .shelf-element:nth-child(1){
    background: url("Images/shelf-1.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display:flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    padding:10px;
}
.shelf .shelf-element:nth-child(1) .element-content{
    display:flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    margin-bottom:15px;
}
.shelf .shelf-element:nth-child(1) h1{
    color:white;
    font-size: 45px;
    margin:5px;
}
.shelf .shelf-element:nth-child(1) h3{
    font-weight: 400;
    font-size: 25px;
    color:white;
}
.shelf .shelf-element:nth-child(1) span{
    margin: 10px;
}
.shelf .shelf-element:nth-child(1) a{
    margin:5px;
    text-decoration: none;
    color:#3082D4;
    font-size: 20px;
}



.shelf .shelf-element:nth-child(2){
    background: url("Images/shelf-2.jpg");
    background-color: #FBFAFC;
    background-size: 50%;
    background-position: center 85%;
    background-repeat: no-repeat;
    padding:10px;
}
.shelf .shelf-element:nth-child(2) .element-content{
    display:flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    margin-top:35px;
}
.shelf .shelf-element:nth-child(2) h1{
    font-size: 30px;
    margin:5px;
}
.shelf .shelf-element:nth-child(2) h1 img{
    height:30px;
    width:30px;
}
.shelf .shelf-element:nth-child(2) h2{
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 1px;
    color:#CC2127;
}
.shelf .shelf-element:nth-child(2) h3{
    font-size:20px;
    font-weight: 400;
    margin:10px;
}
.shelf .shelf-element:nth-child(2) span{
    margin: 10px;
}
.shelf .shelf-element:nth-child(2) a{
    margin:5px 15px;
    text-decoration: none;
    color:#3082D4;
    font-size: 17px;
}


.shelf .shelf-element:nth-child(3){
    background: url("Images/shelf-3.png");
    background-color: white;
    background-size: 80%;
    background-position: center 90%;
    background-repeat: no-repeat;
    padding:10px;
}
.shelf .shelf-element:nth-child(3) .element-content{
    display:flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    margin-top:45px;
}
.shelf .shelf-element:nth-child(3) h1{
    font-size: 40px;
    margin:5px;
    letter-spacing: -1px;
}
.shelf .shelf-element:nth-child(3) h3 img{
    height:40px;
    width:40px;
}
.shelf .shelf-element:nth-child(3) h2{
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 1px;
    color:#CC2127;
}
.shelf .shelf-element:nth-child(3) h3{
    font-size:20px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -5px;
}
.shelf .shelf-element:nth-child(3) span{
    margin: 10px;
}
.shelf .shelf-element:nth-child(3) a{
    margin:5px 15px;
    text-decoration: none;
    color:#3082D4;
    font-size: 17px;
}


.shelf .shelf-element:nth-child(4){
    background: url("Images/shelf-4.jpg");
    background-color: black;
    background-size: 55%;
    background-position: center 85%;
    background-repeat: no-repeat;
    padding:10px;
}
.shelf .shelf-element:nth-child(4) .element-content{
    display:flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    margin-top:45px;
}
.shelf .shelf-element:nth-child(4) h1{
    font-size: 40px;
    color: white;
    margin:5px;
    letter-spacing: -1px;
}
.shelf .shelf-element:nth-child(4) h3 img{
    height:40px;
    width:40px;
}
.shelf .shelf-element:nth-child(4) h2{
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 1px;
    color:#CC2127;
}
.shelf .shelf-element:nth-child(4) h3{
    font-size:20px;
    font-weight: 400;
    color:white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -5px;
}
.shelf .shelf-element:nth-child(4) span{
    margin: 10px;
}
.shelf .shelf-element:nth-child(4) a{
    margin:5px 15px;
    text-decoration: none;
    color:#3082D4;
    font-size: 17px;
}


.shelf .shelf-element:nth-child(5){
    background: url("Images/shelf-5.png");
    background-color: black;
    background-size: 80%;
    background-position: center 85%;
    background-repeat: no-repeat;
    padding:10px;
}
.shelf .shelf-element:nth-child(5) .element-content{
    display:flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    margin-top:25px;
}
.shelf .shelf-element:nth-child(5) h1{
    font-size: 40px;
    font-weight: 400;
    color: white;
    margin:5px;
    letter-spacing: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shelf .shelf-element:nth-child(5) h3 img{
    height:40px;
    width:40px;
}
.shelf .shelf-element:nth-child(5) h2{
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 1px;
    color:#CC2127;
}
.shelf .shelf-element:nth-child(5) h3{
    font-size:20px;
    font-weight: 400;
    color:white;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shelf .shelf-element:nth-child(5) span{
    margin: 10px;
}
.shelf .shelf-element:nth-child(5) a{
    margin:5px 15px;
    text-decoration: none;
    color:#3082D4;
    font-size: 17px;
}



.shelf .shelf-element:nth-child(6){
    background: url("Images/shelf-6.jpg");
    background-color: white;
    background-size: 35%;
    background-position: center -80%;
    background-repeat: no-repeat;
    padding:10px;
    display:flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
}
.shelf .shelf-element:nth-child(6) .element-content{
    display:flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    margin-bottom:25px;
}
.shelf .shelf-element:nth-child(6) h1{
    font-size: 40px;
    font-weight: 400;
    margin:5px;
    letter-spacing: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shelf .shelf-element:nth-child(6) h3 img{
    height:40px;
    width:40px;
}
.shelf .shelf-element:nth-child(6) h2{
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 1px;
    color:#CC2127;
}
.shelf .shelf-element:nth-child(6) h3{
    font-size:20px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shelf .shelf-element:nth-child(6) span{
    margin: 10px;
}
.shelf .shelf-element:nth-child(6) a{
    margin:5px 15px;
    text-decoration: none;
    color:#3082D4;
    font-size: 17px;
}

.carousel{
    grid-area:carousel;
}
.footer{
    grid-area:footer;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #F5F4F6;
}
.footer-top{
    height:auto;
    padding:10px 15px;
    /*background-color: beige;*/
    width:1069px;
}
.footer-top p{
    margin:10px 0px;
    font-size:13px;
    font-weight: 200;
    color:grey; 
    cursor:default;
}
.footer-top p a{
    color:black;
    text-decoration: none;
}
.footer-top a:hover{
    text-decoration: underline;
}
.footer-top hr{
    border:none;
    height:1px;
    background-color: #c1c1c1;
    width:1070px;
}
.footer-mid{
    height:auto;
    margin:20px 0px;
    /*background-color:aquamarine;*/
    width:1069px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer-mid .column{
    height:100%;
    width:20%;
    /*background-color: #3082D4;*/
    display: flex;
    flex-direction: column;
    margin:10px;
}
.footer-mid .column h4{
    font-size: 14px;
    margin:5px 0px;
    color:#29292A;
    cursor: default;
}
.footer-mid .column ul{
    list-style: none;
    margin-bottom: 10px;
}
.footer-mid .column ul li{
    margin:10px 0px;
    font-size: 13px;
    font-weight: 100;
    color:grey;
}
.footer-mid .column ul a{
    text-decoration: none;
    color:grey;
}
.footer-mid .column ul a:hover{
    text-decoration: underline;
}
.footer-bottom{
    height:auto;
    /*background-color: greenyellow;*/
    width:1069px;
}
.footer-bottom .contents{
    height:auto;
    width:100%;
    margin:10px 0px;
    display: flex;
}
.footer-bottom .contents p{
    color:grey;
    font-size: 13px;
    cursor: default;
}
.footer-bottom hr{
    width:1070px;
    border:none;
    height:1px;
    background-color: #c1c1c1;
}
.footer-bottom .contents .content{
    height:auto;
    width:33.33333333%;
    display: flex;
    flex-direction: row;
    margin:5px 0px;
}
.footer-bottom .contents .content a{
    text-decoration: none;
    color:grey;
}
.footer-bottom .contents .content a:hover{
    text-decoration: underline;
}
.footer-bottom .contents .country p{
    width:100%;
    text-align: right;
}