/** Cassiopeia BOATS Template
*
* Author: Dmitry Karev (dmitry@karev.ca)
* License: (c) 2024 - All rights reserved
*/

@import url('https://fonts.googleapis.com/css2?family=Yantramanav:wght@100;300;400;500;700;800&display=swap');

:root {
	
	/* ЦВЕТА */
	--karev-color-bg: #fff;
	--karev-color-logo: #f3f5f5;
	--karev-color-accent: #ff5e14;
	--karev-color-orange: #ff5e14;
	--karev-color-sea: #0dbbd4;
	--karev-text-color: #001659;
	--karev-color-border: #e8e8e9;

	/* ШРИФТЫ */
	--karev-font-headings: Yantramanav, Roboto, sans-serif; 
	--karev-font-text: Yantramanav, sans-serif;
	
	--body-font-size: 18px;
	--font-larger: 20px;
	--body-font-weight: 400;

	--karev-h3-size: 24px;
	--karev-h3-weight: 600;


	/* ТЕКСТ */
	--karev-btn-line-height: 1.5;
	
	/* РАЗМЕТКА */
	--single-mod-margins: 5rem auto;
}

body {
	font-family: var(--karev-font-text);
	font-size: var(--body-font-size);
}
a {
    color: #333;
}

p {
	font-family: var(--karev-font-text);
	font-weight: var(--body-font-weight);
    line-height: var(--body-line-height);
	letter-spacing: var(--karev-font-text-spacing);
    margin: 0 !important;
    padding-bottom: 1rem;
}

h1, h2, h3 {
    color: var(--karev-text-color);
	margin: 25px 0;
    font-family: var(--karev-font-headings);
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}
h1 {
	font-size: 80px;
    line-height: 1em;
    letter-spacing: -.01em;
    font-weight: 800;
	text-transform: uppercase;
}
h1.bg {
	color: var(--karev-color-bg);
    -webkit-text-stroke: 1px var(--karev-color-border);
    text-stroke: 1px var(--karev-color-border);
    font-size: 120px;
    margin-bottom: 0;
}
h1.art-title {
	margin-top: -80px;
    padding-left: 30px;
}
h2 {
	font-family: var(--karev-font-headings);
	font-size: var(--karev-h2-size);
	font-weight: var(--karev-h2-weight);
	letter-spacing: var(--karev-font-text-spacing);
	/* text-transform: uppercase; */
	/* margin: 3rem 0px 1rem; */
}
h3 {
	font-family: var(--karev-font-headings);
	font-size: var(--karev-h3-size);
	font-weight: var(--karev-h3-weight);
	margin-top: 1rem;
    margin-bottom: 0.5rem;
	text-transform: uppercase;
}
h3.card-header {
	color: var(--karev-text-color);
	margin-top: 0;
}

a.brand-logo {
	text-decoration: none;
    font-weight: 600;
    font-size: 24px;
}
a.brand-logo:hover {
	font-weight: 800;
	color: var(--karev-color-bg) !important;
}

.blog-item {
	display: flex !important;
}
.blog-item h2 a {
	color: var(--karev-text-color);
	font-size: 26px;
	font-weight: 600;
	text-decoration: none;	
}
.blog-item h2 a:hover {
	color: var(--karev-color-accent);
	font-size: 26px;
	text-decoration: none;	
}
.blog-item .item-content {
	padding: 20px 0;
}
.blog-items[class^=masonry-], .blog-items[class*=\ masonry-] {
    column-gap: 2em;
}
.btn-primary {
	background-color: var(--karev-color-accent);
    border-color: var(--karev-color-accent);
	color: #fff !important;
	font-size: 24px;
    font-weight: 600;
}	
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--karev-color-sea);
    border-color: var(--karev-color-sea);
	color: var(--karev-color-bg) !important;
}
.btn-secondary {
    color: var(--karev-text-color);
    background-color: #fff;
    border-color: var(--karev-text-color);
}	

.card {
    border: none;
}
.card-body {
	padding: 0;
}

.com-content-category-blog__item {
	border-bottom: 4px solid var(--karev-color-accent);
	border-left: 1px solid var(--karev-color-border);
}
.container-bottom-b {
    display: flex;
    flex-direction: column;
    /*padding-top: 3rem;*/
}
.container-header {
	background: #ffffffEE;
	box-shadow: 0 5px 5px rgba(0,0,0,.15);
}
.container-header .grid-child {
    padding: 0;
}
.container-nav {
	border-top: 1px solid var(--karev-color-border);
	display: inline-flex;	
	height: 70px;
	margin: 0;
	max-width: -webkit-fill-available;
	width: -webkit-fill-available;

    a:hover {
    	color: var(--karev-color-accent) !important;
    }
    a.brand-logo:hover {
    	color: white !important;
    }
	li {
		border-right: 1px solid #e8e8e9;
		color: var(--karev-text-color);
		font-size: 18px;
		font-weight: 500;
		line-height: 23px;
		margin: 0 !important;
		height: 70px;
		padding-top: 21px;
		text-align: center;
		/* width: 220px; */
	}
	li.current>a {
		color: var(--karev-color-accent);
		text-decoration: none !important;
	}
	li.active>a {
		text-decoration: none !important;
	}
	li:hover {
		background: url(/images/tmpl/nav-hover-bg.jpg);
		background-size: contain;
	}
}
.container-top-a>*, .container-top-b>*, .container-bottom-a>*, .container-bottom-b>* {
    flex: 1;
    margin: 0;
}
.container-topbar {
    color: var(--karev-text-color);
	height: 50px;
	padding: 10px 30px;
	
	.phone, .email, .time {
		float: left;
		padding-right: 1.5rem;
		width: max-content;

		a {
			padding-left: 5px;
			text-decoration: none;
		}
	}
		
	.facebook, .instagram {
		float: right;
		padding-right: 1.5rem;
		width: max-content;
	}
}

.container-header .mod-list li a:hover {
    background: url(/images/tmpl/nav-hover-bg.jpg);
}

.footer {
    color: #fff;
    background-color: black;
    margin-top: 0;
	
	.nav-header {
		font-size: var(--font-larger);
	}
	
	img {
	    width: 100px;
	}
}

iframe.wrapper {
	border: 0;
    height: 1800px;
    width: 100%;
}

.left {
    margin-right: 2rem;
    margin-bottom: 2rem;
    float: left;
}


.masonry-3 .blog-item {
	border-bottom: 4px solid var(--karev-color-accent);
	border-left: 1px solid var(--karev-color-border);
	border-right: 1px solid var(--karev-color-border);
	padding-bottom: 2rem;
}
.masonry-3 .left {
    margin: 0;
}
.masonry-4 {
    .blog-item {
    	border-bottom: 4px solid var(--karev-color-accent);
    	border-left: 1px solid var(--karev-color-border);
    	border-right: 1px solid var(--karev-color-border);
    }
    .blog-item:hover {
        background: var(--karev-text-color);
        box-shadow: 0 7px 18px rgba(0,0,0,.75);
        border: none;
        
        h2 a {
            color: #fff;
        }    
        
        .btn-secondary {
            color: #fff;
            background-color: var(--karev-color-accent);
            border-color: var(--karev-color-accent);
        }
    }

    h2 a:hover {
        color: #fff;
    }
}
.masonry-4 .left {
    margin: 0;
}
.metismenu.mod-menu .metismenu-item {
    align-items: center;
    color: var(--karev-text-color);
    display: flex;
    flex-wrap: wrap;
    font-size: 18px;
	font-weight: 500;
    line-height: 1.5;
    padding: 0;
}
.metismenu-item:hover {
	background: url(/images/tmpl/nav-hover-bg.jpg) !important;
}
.mod-menu_dropdown-metismenu {
	border-bottom: 1px solid var(--karev-color-border);
}

.navbar {
	margin: 0 !important;
	margin-left: 250px !important;
}
.navbar a {
	height: 66px;
	padding: 20px 25px;
	width: 220px;
}
.navbar-brand {
	background: var(--karev-color-accent);
	padding: 0 !important;
	position: absolute !important;
	width: 250px;	
	height: 70px;
    text-align: center;
    text-decoration: none;
    padding-top: 10px !important;
}

.readmore .icon-chevron-right::before, .readmore .icon-rightarrow::before, .readmore .icon-arrow-right::before {
    content: "";
}

.sidebar-right .card-body {
	padding: 1rem;
}
.single-mod {
    margin: var(--single-mod-margins);
}

.text-box {
    display: flow-root;
}
.top-a.card {
	border: none;
}

/* ABOVE FOOTER */
.full-w {
    display: grid;
    margin-bottom: -1rem;
    width: 100%;
    
    img {
        width: 100%;
    }
}


@media (width >= 992.98px) {
	.nav {
		display:none !important;
	}
}

@media (width <= 992.98px) {
	a.brand-logo {
		font-size: 30px;
	}
	h1.bg {
		font-size: 110px;
	}
	iframe.wrapper {
		height: 2310px;		
	}

	.nav {
		flex-direction: row;
		margin-left: 200px !important;
		
		li {
			width: 150px;
		}
	}
	.navbar-brand {
		width: 200px;
	}	
	.navbar {
		display:none;
	}	
}

@media (width <= 768.98px) {
	
	h1 {
		font-size: 50px;
	}
	h1.bg {
		font-size: 90px;
	}
	h1.art-title {
		font-size: 70px;
		margin-top: -65px;
		padding-left: 15px;
	}

	iframe.wrapper {
		border: 0;
		height: 2080px;
		width: 100%;
	}


    .btn-secondary {
        color: #fff;
        background-color: var(--karev-color-accent);
        border-color: var(--karev-color-accent);
    }

	.container-nav {
		background: var(--karev-color-accent);		
	}
	.container-nav li {
		background: url(/images/tmpl/nav-hover-bg.jpg);
		border-bottom: 1px solid var(--karev-color-border);
	}
	
	.container-topbar {
	    .email, .instagram, .facebook {
		    display: none;
	    }
	}
	
	.left {
        margin-right: 0;
        margin-bottom: 2rem;
    }
	
	.metismenu.mod-menu .metismenu-item {
		/* border: none; */
		text-align: left;
		text-decoration: none;
	}
	.metismenu.mod-menu .metismenu-item:hover {
		background: url(/images/tmpl/nav-hover-bg.jpg);
		background-size: contain;
		border: none;
	}
		
	.nav {
		display: none;
	}
	.nav-item {
		/* width: 100px; */
	}
	.navbar {
		display:inherit;
		margin-left: 0px !important;
		margin-top: 20px !important;
		padding-bottom: 19px !important;
		position: relative;
		width: -webkit-fill-available;
		z-index: 1000;
	}
	.navbar-brand {
		/* display:none !important; */
		display: inline-block !important
		text-align: center;
		width: -webkit-fill-available;
	}
	.navbar a {
		width: -webkit-fill-available;
	}
	.navbar-collapse {
		margin-top: 19px;
	}
	.navbar-toggler {
		margin-left: 20px;		
	}
	.navbar ul {
		background: var(--karev-color-bg);
	}
}

@media (width <= 620.98px) {
	
	h1.bg {
		font-size: 80px;
	}
	h1.art-title {
		font-size: 55px;
		margin-top: -55px;
		padding-left: 15px;
	}
}

@media (width <= 560.98px) {
	
	h1.bg {
		font-size: 50px;
	}
	h1.art-title {
		font-size: 36px;
		margin-top: -25px;
		padding-left: 15px;
	}
	iframe.wrapper {
		height: 2100px;
	}

}