:root {
    --color-white: #ffffff;
    --color-grey: #52617e;
    --color-light-gray: #F5F5F5;
    --color-sky: #00309a;
    --color-red: #e6212a;
    --color-dark-blue: #051735;
    --color-dark: #212121;

    --h1:52px;
    --h2:36px;
    --h3:30px;
    --h4:24px;
    --h5:16px;
    --h6:14px;
}

.color-white {
    color: var(--color-white)
}

.bg-color-white {
    background-color: var(--color-white)
}

.color-grey {
    color: var(--color-grey)
}

.bg-color-grey {
    background-color:var(--color-grey)
}

.color-light-grey {
    color: var(--color-light-gray)
}

.bg-color-light-grey {
    background-color:var(--color-light-gray)
}

.color-sky {
    color: var(--color-sky)
}
.bg-color-sky {
    background-color:var(--color-sky)
}

.bg-color-red {
    background-color: var(--color-red)
}

.color-red {
    color: var(--color-red)
}

.bg-color-light-sky {
    background-color: var(--color-light-sky)
}

.color-dark-blue {
    color: var(--color-dark-blue)
}

.bg-color-dark-blue {
    background-color: var(--color-dark-blue)
}

.color-dark {
    color: var(--color-dark)
}

.bg-color-dark {
    background-color: var(--color-dark)
}

.custom-btn {
    padding: 10px 15px;
    min-width:200px;
    font-size:16px;   
    line-height:28px;
    color:var(--color-white);    
    font-weight: 400;
    background-color: var(--color-sky);
    transition: 0.5s ease-in-out all;
    position: relative;
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
    border: 0;
    overflow: hidden;
    z-index:1;
}

.custom-btn:hover {
    color: #000 !important;
    background-color: transparent;   
}
.custom-btn:hover:before {
    left: 0%;
    right: auto;
    width: 100%;
}
.custom-btn:before {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 0px;
    z-index: -1;
    content: '';
    color: #000 !important;
    background: #fff;
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
    border-radius:4px;    
}

.btn-big {
    min-width: 200px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-small {
    min-width: 160px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-white{background-color: var(--color-white);color: var(--color-dark-blue);font-weight:500;}
.btn-white:hover{background-color:var(--color-sky) ;color:var(--color-white);}
.rounded-30{border-radius:30px;}

body {
    font-family: 'Futura Md BT';
    color: var(--color-grey);
    font-size:24px;
    line-height:1.3;     
}

h1,h2,h3,.section-bg-text{ font-family: 'Futura MdCn BT';}

h1 {
    font-size: var(--h1);    
    line-height: 75px;    
    font-weight: 500;
    font-family: 'Futura MdCn BT';    
}

h2 {
    font-size: var(--h2);    
    line-height:48px;    
    font-weight:500;
}

h3 {
    font-size: var(--h3);
    line-height:43px;    
}

h4 {
    font-size: var(--h4);    
    line-height: 32px;
    color: var(--color-dark-blue);    
}

h5 {
    font-size: var(--h5);    
    line-height:26px;
    color: var(--color-white);
}

h6 {
    font-size: var(--h6);    
    line-height:24px;
    color: var(--color-white);    
}

.container {
    max-width: 1870px;
    padding:0 15px;
    margin:0 auto;
}

@media only screen and (max-width:1500px) {
    :root {
        --h1:40px;
        --h2:30px;
        --h3:25px;
        --h4:22px;        
    }

    h1 {
        font-size: var(--h1);        
        line-height:58px;                   
    }

    h2 {
        font-size: var(--h2);        
        line-height:43px;                                
    }

    h3 {
        font-size: var(--h3);
        line-height:38px;
    }

    h4 {
        font-size: var(--h4);        
        line-height:30px;        
    }  

}


@media only screen and (max-width:1024px) {
    :root {
        --h1:35px;
        --h2:30px;
        --h3:25px;
        --h4:20px;        
    }

    h1 {
        font-size: var(--h1);
        line-height:43px;
    }

    h2 {
        font-size: var(--h2);
        line-height:38px;
    }

    h3 {
        font-size: var(--h3);
        line-height:33px;
    }

    h4 {
        font-size: var(--h4);        
        line-height:28px;        
    }
}

@media only screen and (max-width:991px) {
    :root {
        --h1:30px;
        --h2:25px;
        --h3:23px;        
    }

    h1 {
        font-size: var(--h1);        
        line-height:38px;     
    }

    h2 {
        font-size: var(--h2);
       line-height:33px;   
    }

    h3 {
        font-size: var(--h3);
        line-height:31px;        
    }  

    body{
        font-size:18px;
    }

}

@media only screen and (max-width:767px) {
    :root {
        --h1:34px;
        --h2:24px;
        --h3:22px;
        --h4:20px;
        --h6:12px;       
    }

    h1 {
        font-size: var(--h1);  
        line-height:43px;      
    }

    h2 {
        font-size: var(--h2);        
        line-height:33px;
    }

    h3 {
        font-size: var(--h3);        
        line-height: 33px;
    }

    h4 {
        font-size: var(--h4);        
        line-height:28px;
    }   
     h6 {
        font-size: var(--h6);        
        line-height:22px;
    }    
}