:root {
  --brand1: #002d5d;
  --brand2: #ffc20e;
  --green3: #cac6a8;


}

@font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-Book.otf') format('opentype');
    font-weight: 400;
}
@font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-Medium.otf') format('opentype');
    font-weight: 500;
}
@font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-Bold.otf') format('opentype');
    font-weight: 600;
}


html{
    scroll-behavior: smooth;
}
body{
    font-family: 'Gotham', sans-serif;
    font-size: 17px; 
    color: #FFF;
    font-weight: 400;
}



a{-webkit-transition: all 0.32s ease-out; -moz-transition: all 0.32s ease-out; -o-transition: all 0.32s ease-out; -ms-transition:  all 0.32s ease-out; transition: all 0.32s ease-out; text-decoration:none;}
a:hover{color: var(--red); text-decoration: none;}

::placeholder { color: 000; opacity: 1; }
:-ms-input-placeholder { color: 000;}
::-ms-input-placeholder { color: 000;}

/*COMMOM STYLES*/
.ff-mo{font-family: 'Montserrat';}

.fw-bl{font-weight: 700;}
.fw-bo{font-weight: 600;}
.fw-me{font-weight: 500;}
.fw-re{font-weight: 400;}
.fw-li{font-weight: 300;}
.fw-th{font-weight: 200;}

.fs-60{font-size: 60px;}
.fs-50{font-size: 50px;}
.fs-38{font-size: 38px;}
.fs-28{font-size: 28px;}

.fs-24{font-size: 24px;}
.fs-20{font-size: 20px;}
.fs-16{font-size: 16px;}
.fs-12{font-size: 12px;}


.ls-1{letter-spacing: 1px;}
.ls-2{letter-spacing: 2px;}

.lh-2{line-height: 2;}


@media screen and (min-width:768px){
    .mt-md-lg{margin-top: 60px!important;}
    .mb-md-lg{margin-bottom: 60px!important;}

    .mt-md-xl{margin-top: 100px!important;}
    .mb-md-xl{margin-bottom: 100px!important;}
  
}

.bg-grey{background-color: #484c4c!important; }
.bg-brand{background-color: var(--green1);}

.text-brand{color:#da1f31!important;}
.text-black{color:#000!important;}

.btn-brand{background-color: #da1f31; border:none; display: inline-block;  transition: all 0.32s ease-out; color: #FFF; font-weight: bold; font-size: 14px; padding: 15px 25px; letter-spacing: 1.5px; }
.btn-brand:hover{background-color: #484c4c; color: #FFF!important;}



.has-bg{background-position: center; background-size: cover; }


.img-linked{
    -webkit-transition: all 0.32s ease-out;
    -moz-transition: all 0.32s ease-out;
    -o-transition: all 0.32s ease-out;
    -ms-transition:  all 0.32s ease-out;
    transition: all 0.32s ease-out;
}
.img-linked:hover{
    transform: scale(1.1);
    cursor: pointer;
}

.text-linked{color: inherit; color: var(--brand2);}
.text-linked:hover{color: inherit; text-decoration: underline;}




/* Navigation */
#bgWrapper{width:  54px; background-image: url('../images/bg.png'); background-position: left; background-repeat: no-repeat; background-size: cover;}
#navWrapper{background-color: var(--brand1); max-width: 100%; width: 1000px;  }
#contentWraper{width: calc(100% - 1054px); }

 #contentWraper{background-image: url('../images/bg-1.jpg'); background-size: cover; transition: background-image 1s ease-in-out; background-position: left;}

#bgWrapper,
#navWrapper,
#contentWraper{float: left; height: 100%; min-height: 100vh; display: flex; align-items: center; }


#navWrapper .nav-link{color: #000; font-size: 14px; font-weight: 500; letter-spacing: 1px; background-color: #FFF; border-radius: 0; border:7px solid var(--brand2); width: 153px; height: 153px; display: flex; align-items: center; justify-content: center; margin: 9px 0px; transition: all .36s ease-in-out ; box-shadow: 5px 5px 10px rgba(0,0,0,0.3); text-align: center; padding: 9px; color: #231f20; float: left; margin: 9px;}
#navWrapper .nav-link:hover,
#navWrapper .nav-link.active{ background-color: var(--brand2);}

.img-logo-ng{width: 504x;}
.img-logo-lv{width: 225px;}

@media screen and (max-width: 1199px){
  #bgWrapper{width:  36px;}
   #navWrapper{max-width: 90%;}
   #contentWraper{width: calc(10% - 36px); }
}
@media screen and (max-width: 767px){
    #bgWrapper{width:  18px;}
   #navWrapper{max-width: 351px;}
   #contentWraper{width: calc(100% - 369px); }

   #navWrapper .nav-link{ border-radius: 0; width: 306px; height: 63px;}
}


@media(min-width:768px) and (max-width: 991px){
}

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