@font-face {
    font-family: 'Black Ops One';
    src:
        url('../fonts/Black_Ops_One/BlackOpsOne-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Rajdhani';
    src:
        url('../fonts/Rajdhani/Rajdhani-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Rajdhani';
    src:
        url('../fonts/Rajdhani/Rajdhani-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Rajdhani';
    src:
        url('../fonts/Rajdhani/Rajdhani-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Rajdhani';
    src:
        url('../fonts/Rajdhani/Rajdhani-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Rajdhani';
    src:
        url('../fonts/Rajdhani/Rajdhani-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Quantico';
    src:
        url('../fonts/Quantico/Quantico-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Quantico';
    src:
        url('../fonts/Quantico/Quantico-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Quantico';
    src:
        url('../fonts/Quantico/Quantico-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}


@font-face {
    font-family: 'Quantico';
    src:
        url('../fonts/Quantico/Quantico-BoldItalic.ttf') format('truetype');

    font-weight: bold;
    font-style: italic;
}

:root{
    --primary-color: #0089e9;
    --second-color: #000;
    --third-color: #1c1c1c;
    --fourth-color: #fff;
    --field-color: #696969;
    --border-radius: 30px;
}

::selection {
    background-color: var(--primary-color);
    color: var(--fourth-color);
}

html {
    position: relative;
    min-height: 100%;
}

body{
    font-size: 16px;
    font-family: 'Rajdhani', sans-serif;
    background-color: var(--fourth-color);
    color: var(--second-color);
    padding: 100px 0 650px;
}

a:link, a:visited{
    color: var(--primary-color);
    text-decoration: none;
}

a:hover, a:focus{
    text-decoration: underline;
}

header#top-header{
    width:100%;
    position:fixed;
    background-color: var(--fourth-color);
    height: 100px;
    top:0;
    left:0;
    z-index: 5;
    border-bottom: 1px solid var(--primary-color);
}

footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    min-height: 200px;
    background-color: var(--third-color);
    color:#fff;
    border-top: 2px solid var(--primary-color);
}

footer .container{
    box-sizing: border-box;
    padding: 10px;
}

footer ul{
    list-style: none;
    padding: 0;
}

footer a:link, footer a:visited{
    color: #fff;
    text-decoration: none;
}

footer a:hover, footer a:focus{
    text-decoration: underline;
}

#main-content{
    padding: 40px 20px;
    box-sizing: border-box;
}

.container{
    width:100%;
    max-width: 1280px;
    margin: 0 auto;
}

.clear {
	clear: both;
	line-height: 0;
}

#logo-container {
	float: left;
	font-family: 'Black Ops One', cursive;
	font-size: 6rem;
	padding-left: 20px;
}

#logo-container a{
      color: var(--primary-color);
      text-decoration: none;
}



#main-menu-container{
    float: right;
}





/*=================mobile menu================================*/
#main-menu-overlay{
    position: fixed;
    width:100%;
    height:100%;
    background-color:var(--primary-color);
    top:0;
    left:0;
    z-index: 1;
    display: none;
    opacity: .5;
}

#main-menu-close {
    color: var(--primary-color);
    cursor: pointer;
    font-size: 2em;
    position: absolute;
    right: 20px;
    top: 8px;
}

#main-menu-swap-open{
    position:absolute;
    top:0;
    right:0;
    width:20px;
    background: transparent;
    height: 100%;
    z-index:1000;
}

#main-menu-close:hover, #main-menu-close:focus{
    color: var(--second-color);
}


#main-menu > ul{
    list-style: none;
    font-family: 'Quantico', sans-serif;
    margin: 0;
}

#main-menu > ul >  li > a{
    display:block;
    text-decoration: none;
    text-transform: capitalize;
    transition: 0.2s;
    box-sizing: border-box;
}

#main-menu > ul > li > a:link, #main-menu > ul > li > a:visited{
    color: var(--primary-color);
}

#main-menu > ul > li > a:hover, #main-menu > ul > li > a:focus{
    color: var(--fourth-color);
    background-color: var(--primary-color);
}

#main-menu-open {
	font-size: 2rem;
	color: var(--primary-color);
	cursor: pointer;
	margin-top: 30px;
	margin-right: 30px;
}

#main-menu-open:hover, #main-menu-open:focus {
    color: var(--second-color);
}

ul.dropdown-content {
    position: absolute;
    list-style: none;
    background-color: var(--fourth-color);
    display: none;
    padding: 0;
    min-width: 117px;
    box-sizing: border-box;
}

ul.dropdown-content > li{
    display: block;
}

ul.dropdown-content > li > a{
    display: block;
    box-sizing: border-box;
}

ul.dropdown-content > li a:link,  ul.dropdown-content > li > a:visited{
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.8rem;
}

ul.dropdown-content > li a:hover,  ul.dropdown-content > li > a:focus{
    color: var(--fourth-color);
    background-color: var(--primary-color);
}

.dropdown:hover  ul.dropdown-content{
    display: block;
}

.dropdown > a::after{
    font-family: 'Font Awesome 6 Free';
    content: ' \f0d7';
}

.col2-1, .col2-2{
    width:100%;
    box-sizing: border-box;
}

.footer-contacts{
    font-size: 2.4rem;
}

.social-icons{
    font-size: 1.5rem;
}

.phone-number{
    font-size: 2.6rem;
}

.phone-number, .messaging-icons{
    display: inline-block;
}

.messaging-icons{
    font-size: 2.1rem;
}

.messaging-icons img {
	width: 30px;
}

.contact-email{
    margin: 10px 0;
}

#header-video{
    display: block;
    object-fit: cover;
    width: 100%;
    height: 450px;
}

#video-overlay{
    width: 100%;
    position: absolute;
    top:100px;
    left:0;
    text-align: center;
    padding: 10px;
    color: #fff;
    box-sizing: border-box;
}

#video-overlay i {
    font-size: 3em;
}

#front-page-text {
	margin-top: 20px;
	font-size: 2rem;
	font-family: 'Quantico', sans-serif;
}

#front-page-icons{
    margin-top: 20px;
}

.front-page-icon-container {
	display: inline-block;
	margin-right: 20px;
}

.front-page-icon {
	font-size: 1rem;
}

.front-page-icon-caption {
	font-size: 1rem;
	font-family: 'Quantico', sans-serif;
}

#front-page-moto {
	margin-top: 30px;
	font-size: 1.5rem;
	font-weight: 500;
}

#page-header-image{
    width: 100%;
    height: 225px;
    text-align: center;
    color: #fff;
    background-color: var(--primary-color);
    font-size: 3.8rem;
    font-family: 'Quantico', sans-serif;
    box-sizing: border-box;
    background-image: url(../img/header-image-op.jpg);
    background-position: center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

h1, h2, h3 {
    color: var(--primary-color);
}

h1 i, h2 i, h3 i {
    font-size: 2rem;
    vertical-align: bottom;
}

.divider{
    border-bottom: 2px solid var(--primary-color);
    width: 100%;
    clear:both;
    margin: 10px 0;
}

.info{
    font-size: 0.8em;
    color:rgb(117, 117, 117);
    margin: 4px 0;
}

.info-help{
    display: block;
    clear:both;
    margin: 4px 0;
}

.info i, .info-help i{
    font-size: 2em;
    vertical-align: middle;
    margin-right: 5px;
    color:var(--primary-color);
}

.package-title {
    color: var(--primary-color);
    font-style: italic;
    margin-bottom: 10px;
    font-size:1.1em;
}
.package-desc{
    margin-bottom:10px;
}

.title-icon{
    font-size:2.5em;
    margin-right:10px;
}

ol.pagewide li {
    list-style: none;
    clear: both;
}

.dnone {
    display: none;
}

.text-gray{
    color: #999;
}

#country-flag{
    width: 32px;
    vertical-align: middle;
    margin-left: 3px;
    border: 1px solid #999;
}

#gdpr-alert-bar{
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 100000;
    background-color: var(--second-color);
    color: var(--fourth-color);
    min-height: 60px;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
}

button.white-bg:hover, a.button.white-bg:hover{
        background-color: var(--fourth-color);
        border: 1px solid var(--fourth-color);
        color: var(--second-color);
   }
   
table {
    width: 100%;
    border: 1px solid #cce9fd;
}

table td{
    padding: 20px 10px;
}

.zebra tr:nth-child(2n+1), .zebra div:nth-child(2n+1) {
    background-color: #cce9fd;
}

.last-td-align-right td:last-child{
    text-align: right;
}

.image-gallery-error{
    display: none;
    text-align: center;
    color: red;
    font-size: 1.1rem;
}

.image-gallery-preview .ajax-loader{
    max-width:none;
}

/*========================================== flash messages styling ==========================================*/
#messages > div{
    padding:20px;
    font-size: 1.1em;
    margin-bottom: 20px;
    color:#fff;
    display:none;

}


#messages > div > i{
    font-size: 1.5rem;
    cursor: pointer;
    float: right;
    margin-left: 10px;
}

#messages > div > i:hover, #messages > div > i:focus{
    color:var(--primary-color);
}


#message-success{
    background-color: #59be8a;
}

#message-notify{
    background-color: #56c9ff;
}

#message-error{
    background-color: #ff9b9b;
}


/*========================================== form styling ==========================================*/
input[type="text"],
input[type="password"], 
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="time"],
input[type="date"],
select,
textarea
{
    width: 100%;
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding-left: 25px;
    outline: none;
    box-sizing: border-box;
    color: var(--second-color);
    font-size: 1rem;
}

input[type="time"]{
    width: 120px;
    padding-left: 15px;
}

input[type="text"],
input[type="password"], 
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="time"],
input[type="date"],
select
{
    height: 63px;
}

textarea
{
    height: 140px;
}

input[type="text"]:hover,
input[type="password"]:hover, 
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="search"]:hover,
input[type="url"]:hover,
input[type="number"]:hover,
input[type="time"]:hover,
input[type="date"]:hover,
select:hover,
textarea:hover
{
    background-color: #f0f8ff;
}

input[type="text"]:focus,
input[type="password"]:focus, 
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="time"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus
{
    border:1px solid var(--second-color);
    background-color: #f0f8ff;
}

label {
	display: block;
	font-size: 0.9rem;
	margin-bottom: 5px;
	padding-left: 10px;
	color: var(--second-color);
}

button, a.button {
    background-color: var(--primary-color);
    color: var(--fourth-color);
    cursor: pointer;
    text-align: center;
    padding: 10px 60px;
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
    box-shadow: 0px 4px 4px 0px #00000040;
    height: 63px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    outline: none;
    font-weight: 500;
    box-sizing: border-box;
    font-size: 0.85rem;
}

button:hover, a.button:hover{
    background-color: var(--second-color);
    border: 1px solid var(--second-color);
}

button:focus, a.button:focus{
    opacity: 0.7;
    background-color: var(--second-color);
    border: 1px solid var(--second-color);
}

a.button {
    text-decoration: none;
    display: inline-block;
    line-height: 2.6rem;
}

input[type="checkbox"], input[type="radio"] {
    accent-color: var(--primary-color);
    
}

input[type="checkbox"]:focus, input[type="radio"]:focus {
    outline: 2px solid var(--second-color);
}

div.input{
    width: 100%;
    max-width: 400px;
    margin: 20px 0;
}

div.input-small{
    width: 100%;
    max-width: 300px;
    margin: 20px 10px;
    display: inline-block;
}

.just-validate-error-label {
	color: red;
	font-size: 0.9em;
	margin-left: 5px;
	margin-top: 5px;
}

.ajax-loader {
    display: none;
    text-align: center;
    margin-top: -10px;
    margin-bottom: -10px;
    width: 100%;
    max-width: 400px;
}

.ajax-loader > img {
    height: 120px;
}

button > img {
	height: 80px;
        margin-top:-18px;
}

.form-outline {
	border: 1px solid var(--primary-color);
	padding: 20px 10px;
	box-sizing: border-box;
	border-radius: var(--border-radius);
}


.inline-radio-buttons{
    clear: both;
}

.inline-radio-buttons label{
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 0;
    margin-top: 5px
}

.inline-radio-buttons label:last-of-type{
    margin-right: 0;
}

.inline-radio-buttons label img{
    width: 20px;
    vertical-align: middle;
}

.inline-radio-buttons input{
    margin-right: 3px;
}

.radio-label {
	padding-left: 10px;
	color: #6c6c6c;
	margin-bottom: 5px;
}

.required-ast:after{
    content: "*";
    color:red;
}

.error-message{
    color: red;
    padding-left: 10px;
}

.captcha-container{
    clear: both;
}

#feedback_captcha{
    margin-left: 15px;
}

gmp-map {
  height: 400px;
  clear: both;
}

.in-text-image{
    width: 100%;
    display: block;
    margin-bottom: 10px;
    border-radius: 10px;
}

.cols{
    text-align: justify;
}

@media (max-width: 350px){
    table{
        font-size: 0.8em;
    }
}

@media (min-width:500px){
    .in-text-image{
        display: inline;
        width: 300px;
        float: left;
        margin-right: 10px;
        margin-bottom: 5px;
    }
}

@media(max-width:767px){
    
    #main-menu{
        display: none;
        width: 300px;
        position: fixed;
        right:0;
        top:0;
        background:#fff;
        height: 100%;
        overflow-x: hidden;
        z-index: 2;
        overflow: auto;
        border-right: 1px solid var(--primary-color);     
    }
    
    #main-menu > ul{
        padding: 0;
        margin-top: 40px;
    }
    
    #main-menu > ul > li > a{
        font-size: 1rem;
        font-weight: bold;
        padding: 15px 10px;
        border-top: 1px solid var(--primary-color);
    }
    
    #main-menu > ul > li:first-child > a{
        border-top: none;
    }
    
    #main-menu-overlay.show-mobile-menu, #main-menu.show-mobile-menu{
        display: block;
        transition: 1s;
    }
    
    ul.dropdown-content{
        width: 100%;
    }
    
    ul.dropdown-content > li > a{
        padding: 15px 10px;
        border-bottom: 1px solid var(--primary-color);
    }
    
    .desktop-view{
        display: none;
    }

}

@media (min-width: 768px){
    
    body{
       padding: 100px 0 250px;
    }
        
    #main-menu-open, #main-menu-close{
        display: none;
    }

    #main-menu > ul{
        padding-left: 5px;
        margin-right: 20px;
    }

    #main-menu > ul > li{
        display: inline-block;
    }


    #main-menu > ul > li > a{
        height: 100%;
        padding: 39px 10px;
        font-size: 1.2rem;
    }
    
    ul.dropdown-content{
        border:1px solid var(--primary-color);
    }
    
    ul.dropdown-content > li > a{
        padding: 20px 10px;
    }
    
    .col2-1, .col2-2{
        width:50%;
        float: left;
        padding-left:15px;
    }
    
    .footer-contacts, .footer-privacy{
        text-align: right;
    }
    
    .copyright{
        padding-left: 30px;
    }
    
    #front-page-text{
        font-size: 3rem;
    }
    
    .front-page-icon {
        font-size: 1.2rem;
    }

    .front-page-icon-caption {
        font-size: 1.1rem;
    }
    
    #front-page-moto{
        font-size: 2rem;
    }
    
    .mobi-view{
        display: none;
    }
    
    .button-with-margin button, .button-with-margin a.button{
        margin-left: 15px;
    }

}

@media(min-width:981px){
    #main-menu > ul > li > a{
        padding: 37px 15px;
        font-size: 1.4rem;
    }
    
     ul.dropdown-content > li a:link,  ul.dropdown-content > ul > li > a:visited{
        font-size: 1.2rem;
    }
}

@media(min-width: 1280px){
    #front-page-text{
        font-size: 4rem;
    }

    .front-page-icon {
        font-size: 1.5rem;
    }

    #front-page-moto{
        font-size: 3rem;
    }
}


@media (prefers-color-scheme: dark){
    body{
        background-color: var(--second-color);
        color: var(--fourth-color);
    }

    header#top-header{
        background-color: var(--primary-color);
    }

    footer{
        background-color: var(--third-color);
    }

    #logo-container a{
        color: var(--second-color);
    }
    
    #main-menu > ul > li > a:link, #main-menu > ul > li > a:visited{
        color: var(--second-color);
    }

    #main-menu > ul > li > a:hover, #main-menu > ul > li > a:focus{
        color: var(--second-color);
        background-color: var(--fourth-color);
    }
    
    #page-header-image, #video-overlay{
        color: #000;
    }
    
    
    @media(max-width: 767px){
        
        #main-menu{
            background-color: var(--primary-color);
            border-left: 1px solid var(--fourth-color);
        }

        #main-menu > ul > li > a{

            border-top: 1px solid var(--fourth-color);
        }
        
        #main-menu-close {
            color: var(--fourth-color);

        }
        
        ul.dropdown-content > li a:link,  ul.dropdown-content > li > a:visited{
            border-top: 1px solid var(--second-color);
        }
        
        ul.dropdown-content > li a:hover,  ul.dropdown-content > li > a:focus{
            color: var(--fourth-color);
            background-color: var(--second-color);
        }

    }

    @media(min-width:768px){

    }
    
    #main-menu-open {
        color: var(--second-color);
    }

    #main-menu-open:hover, #main-menu-open:focus {
        color: var(--fourth-color);
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="tel"],
    input[type="search"],
    input[type="url"],
    input[type="number"],
    input[type="time"],
    input[type="date"],
    select,
    textarea
    {
        background-color: var(--third-color);
        color: var(--fourth-color);
    }

    input[type="text"]:hover,
    input[type="password"]:hover,
    input[type="email"]:hover,
    input[type="tel"]:hover,
    input[type="search"]:hover,
    input[type="url"]:hover,
    input[type="number"]:hover,
    input[type="time"]:hover,
    input[type="date"]:hover,
    select:hover,
    textarea:hover
    {
        background-color: #2f2f2f;
    }

    input[type="text"]:focus,
    input[type="password"]:focus,
    input[type="email"]:focus,
    input[type="tel"]:focus,
    input[type="search"]:focus,
    input[type="url"]:focus,
    input[type="number"]:focus,
    input[type="time"]:focus,
    input[type="date"]:focus,
    select:focus,
    textarea:focus
    {
        border:1px solid var(--fourth-color);
        background-color: #2f2f2f;   
    }
    
    label {
        color: var(--fourth-color);
    }
    
    button:hover, a.button:hover{
        background-color: var(--fourth-color);
        border: 1px solid var(--fourth-color);
        color: var(--second-color);
    }

    button:focus, a.button:focus{
        opacity: .8;
        background-color: var(--fourth-color);
        border: 1px solid var(--fourth-color);
        color: var(--second-color);
    }
    
    .in-text-image{
        border: 1px dotted var(--primary-color);
    }
    
    #gdpr-alert-bar{
        border-top: 1px dotted var(--primary-color);
    }
    
    table{
        border: 1px solid #111;
    }
    
   .zebra tr:nth-child(2n+1), .zebra div:nth-child(2n+1) {
        background-color: #111;
    }

}