* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-margin-top: 89px;
}

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}

a {
    text-decoration: none;
}

p {
    margin: 10px 0;
}

form {
    display: flex;
    flex-direction: column;
    width: 400px;
    background: #f3f3f3;
    box-shadow: 5px 3px 5px #9b9b9b;
    padding: 10px;
    font-size: 20px;
}

input, textarea, select {
    margin: 10px 0;
    padding: 10px;
    border: unset;
    border-bottom: 2px solid #e3e3e3;
    outline: none;
}

button {
    padding: 10px;
    background: #3ac91e;
    border: unset;
    color:#fff;
    cursor: pointer;
}


.msg {
    border: 2px solid #ffa908;
    padding: 10px;
    text-align: center;
    font-weight: bold;
}

.none {
    display: none;
}

.logout {
    color: #b7625c;
}


/* MAIN */

nav{
    width: 100%;
    height: 100px;
    padding: 10px 0;
    background: #162542;
}

nav ul{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}

.sub-menu{
    background: #264074;
}

.sub-menu li{
    display: block;
}

nav ul li{
    display: inline-block;
    font-size: 20px;
    background-color: none;
    padding: 10px;
    margin: 0 10px;
}

nav ul li a{
    color: #fff;
    font-weight: 500;
    border-bottom: 1px #fff solid;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgb(46, 46, 46);
}

nav ul li a:hover{
    color:#ffae00;
    border-bottom: 2px #ffae00 solid;
}

nav ul li a:first-child{
    border-bottom: none;
}

nav ul li img {
    height: 50px;
}

.f-nav{
    z-index: 1001; 
    position: fixed; 
    left: 0;
    top: 0;
    width: 100%;
    background: #162542;
    height: auto;
}

.f-nav ul li a{
    border-bottom: none;
}

.navbar-toggler-icon{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

header{

    height: 600px;
    width: 100%;
    
}

#main-h{
    background-image:  linear-gradient(to right, #162542f1, rgba(119, 151, 253, 0.5)),
    url("../../uploads/header_bg.jpg");
}

#family{
    background-image:  linear-gradient(to right, #162542f1, rgba(119, 151, 253, 0.5)),
    url("../../uploads/header_semeyniy_bg.jpg");
    background-position: 50% 0;
}

#autolawyer{
    background-image:  linear-gradient(to right, #162542f1, rgba(119, 151, 253, 0.5)),
    url("../../uploads/header_avtoyurist_bg.jpg");
}

#criminal{
    background-image:  linear-gradient(to right, #162542f1, rgba(119, 151, 253, 0.5)),
    url("../../uploads/header_ugolovniy_bg.webp");
    background-position: right;
}

header nav{
    background: none;
}

h1{
    font-size: 40px;
    
}

h1, header h2  {
    color:#fff;
    font-weight: 500;
    text-shadow: 1px 1px 2px rgb(46, 46, 46);
}

/* header h2 span{
    text-decoration: underline dashed;
    text-underline-offset: 5px;
} */

header h3, .delimeter {
    margin-top: 10px;
    text-shadow: 1px 1px 2px rgb(46, 46, 46);
    color:#ffae00;

}

.delimeter{
    font-size: calc(1.3rem + .6vw);
    margin: 0 10px;
}

header h3 a{
    color:#ffae00;
}

header h3 a:hover{
    color: #dd6502;

}

.main-info{
    display: flex;
    max-height: 400px;
    align-items: center;
}

.header-info{
    margin-top: 80px;
    margin-left: 150px;
}



.header-btn{
    background-color: #ffae00;
    
    font-size: 20px;
    margin-top: 15px;
    padding: 10px 15px;
}

.header-btn:hover{
    background-color: #dd6502;
    color:#fff;
}


.phone-messanger{
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
}

.phone-messanger img{
    height:40px

}

.phone-messanger> a:nth-child(1):hover, .phone-messanger >a:nth-child(2):hover, .phone-messanger >a:nth-child(3):hover{
    opacity: 0.8;
} 



.phone-messanger a:nth-child(2){
    margin: 0 10px
}

.phone-messanger a:nth-child(3){
    margin-right: 10px;
}


/* INFO-CARDS */

section {
    display: flex;
    align-items: center;
    justify-content: center;
	flex-direction: column;
    padding: 25px 0;
}

section:nth-child(odd){
    background: #f3f3f3;
}

section:nth-child(even){
    background-color: #fff;
}

.content{
    max-width: 1200px;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.info-cards{
    flex-direction: row;
    /* position: relative;
    bottom: 120px; */
}

.inf-card{
    width: 300px;
    height: 200px;
    margin: 15px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.inf-card, .cases ul li{
    background-color: #fff;
    border: 2px solid #ce8e50;    
}


.inf-card:hover, .cases ul li:hover{
    transition: 0.25s;
    transform: scale(1.02);
    background: #e7e7e7;
}

.inf-card p{
    text-align: center;
    color: #000;
    font-size: 18px;
    /*text-shadow: 1px 1px 2px rgb(46, 46, 46);*/
}

.inf-card img{
    height: 60px;
}

/* TEAM */

#team .content {
	flex-direction:row;
	
}

#team .content div{
	margin: 0 50px;
}

#team .content div img{
	max-width:300px;
	width:100%;
	margin-bottom:10px;
}

#team .content div h3{
	text-align: center;
	font-size:25px;
}


/* SUPPORT */

section h2{
    margin-bottom: 25px;
    text-align: center;
}

#support img{
    width: 100%;
    max-width: 300px;
}

/* CASES */

.cases ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-left: 0;
}

.cases ul li{
    list-style-image: url("../../uploads/hammer.png");
    padding: 25px;
    margin: 5px;
    list-style-position: inside;
}

.info{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.info img{
    height: 400px;
    margin-right: 25px;
}

.info p{
    width: 100%;
    max-width: 600px;
    text-align: justify;
    font-size: 18px;
}


/* ADVANTAGES  */

#advantages .inf-card {
    flex-direction: row;
    max-width: 450px;
    width: 100%;
}

#advantages .inf-card img{
    margin-right: 20px;
}


#advantages .inf-card p {
    text-align: justify;
}

#advantages .inf-card p b{

}


/* PRICE */

#price table{
    max-width: 1000px;
    font-size: 20px;
    background: #fff;
}

#price table, #price table tr, #price table td, #price table th{
    border: 2px solid #a37a6b;

}

.middle-united-cell{
    font-size: 25px;
}

/* REVIEW */

#review{
    padding-bottom: 100px;
}

#review .content .carousel, .carousel-inner{
    max-width: 1000px;
    width: 100%;
}

.carousel .carousel-item .inf-card {
    max-width: 800px;
    width: 100%;
    flex-direction: row;
    margin: 0 auto;
    height: 200px;
}

.carousel .carousel-item .inf-card p{
    text-align: left;
    font-size: 18px;
}

.carousel .carousel-item .inf-card img{
    width: 150px;
    margin-right: 25px;
}

.carousel-control-prev-icon {
    background-image:url(../../uploads/prev.png);
}

.carousel-control-next-icon {
    background-image:url(../../uploads/next.png);
}

.btn-sub {
    margin-top: 25px;
    padding: 10px 25px;
    background: #162542;
    
    
}

.btn-sub a {
    color: #fff;
}

.btn-sub:hover{
    background-color: #111c31;
}

.btn-sub:hover a {
    color:#fff;
}


/* CONTACTS */

#contacts {
    padding: 0;
    display: block;
}

.info-map{
    position:relative;
    overflow: hidden;
    margin-top:-551px;
    height: 545px;
    max-width: 450px;
    width: 100%;
    z-index: 1000;
    background: #162542ef;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 25px;
}

.info-map .one-block{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 0 5px 0;
    width: 100%;
}

.info-map .one-block:nth-of-type(2){
    border-bottom: 2px dashed #fff;
    border-top: 2px dashed #fff;

}

.one-block p{
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 2px rgb(46, 46, 46);
    font-size: 16px;
}

.one-block .title{
    color: #ffae00;
    text-transform: uppercase;
    padding: 0;
    margin: 10px 0 0 0;
}

.one-block .btn-sub{
    margin-top: 0;
}

footer{
    background: #162542;
    padding: 3px;
    position: absolute;
    width: 100%;

}

footer p{
    text-align: center;
    color:#ffae00;
    text-shadow: 1px 1px 2px rgb(46, 46, 46);

}


/* CONTACT-FORM */

#contact-form{
    width: 100%;
    box-shadow: none;
    background: none;
    border-radius: none;
}

.modal{
    top: 90px;
}

#form-confirm-button{
    font-size: 20px;
    background: #ffae00;
    
}

#form-confirm-button:hover{
    background-color: #dd6502;

}

.form-message{
    text-align: center;
    font-size: 16px;
    display: none;
}

.succses{
    display: block;
    color:#3ac91e;
}

.error{
    display: block;
    color:red;
    border-bottom: 2px solid #ff4332;

}


#article-form {
    padding: 25px;
    background:#fff;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

#article-form form{
    max-width: 1000px;
    width: 100%;
}

p.indent { text-indent: 3.5em; }


.input-file-row {
	display: inline-block;
    margin: 20px 0;
}
.input-file {
	position: relative;
	display: inline-block;
}
.input-file span {
	position: relative;
	display: inline-block;
	cursor: pointer;
	outline: none;
	text-decoration: none;
	font-size: 14px;
	vertical-align: middle;
	color: rgb(255 255 255);
	text-align: center;
	background-color: #419152;
	line-height: 22px;
	height: 40px;
	padding: 10px 20px;
	box-sizing: border-box;
	border: none;
	margin: 0;
	transition: background-color 0.2s;
}
.input-file input[type=file] {
	position: absolute;
	z-index: -1;
	opacity: 0;
	display: block;
	width: 0;
	height: 0;
}
 
/* Focus */
.input-file input[type=file]:focus + span {
	box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
 
/* Hover/active */
.input-file:hover span {
	background-color: #59be6e;
}
.input-file:active span {
	background-color: #2E703A;
}
 
/* Disabled */
.input-file input[type=file]:disabled + span {
	background-color: #eee;
}
 
/* Список c превью */
.input-file-list {
	padding: 10px 0;
}
.input-file-list-item {
	display: inline-block;
	margin: 0 15px 15px;
	width: 300px;
	vertical-align: top;
	position: relative;
}
.input-file-list-item img {
	width: 300px;
}
.input-file-list-name {
	text-align: center;
	display: block;
	font-size: 12px;
	text-overflow: ellipsis;
	overflow: hidden;
}
.input-file-list-remove {
	color: #fff;
	text-decoration: none;
	display: inline-block;
	position: absolute;
	padding: 0;
	margin: 0;
	top: 5px;
	right: 5px;
	background: #ff0202;
	width: 27px;
	height: 27px;
	text-align: center;
	line-height: 27px;
	border-radius: 50%;
    font-size: 15px;
    font-weight: bold;
}

#tags{
    display: block;
    margin-bottom: 20px;
}

.note-editor{
    background: #fff;
}


/* ------ARTICLE-STYLES------ */

#article{
    /* background: #f3f3f3; */
}

#article>.content{
    max-width: 1200px;
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    align-content: stretch;
}

#article h1 {
    color: #000;
    font-size: 22px;
    text-shadow: none;
    text-transform: uppercase;
}

#article-content h2, #article-content h3{
    font-size: 20px;
}

#article h1, #article h2, #article h3{
    font-weight: bold;
}


#article-content p{
    font-size: 18px;
}



#article-content img{
    width: 100%;
    margin-bottom: 25px;
}

#sidebar{
    max-width: 350px;
    width: 100%;
    height: 100%;
    padding: 0 25px;
    position: sticky;
    top:100px;
}

#article-content, #article-list{
    width: 800px;
}

#article-tech-info{
    display: flex;
    justify-content: left;
    padding-left: 0;
    list-style: none;
    margin-bottom: 40px;
}

#article-tech-info li{
    display: block;
    margin-right: 10px;
}

#sidebar-contact, #last-articles{
    
    background: #ffae00;
    padding: 10px;
    width: 100%;
    margin-bottom: 10px;
}

#last-articles p{
    font-weight: 600;
    color:#000;
    text-align: center;
}

#last-articles a, .side-tel{
    display: block;
    color: #000;
    font-weight: 500;
    margin-bottom: 5px;
    background: #ff8303;
    padding: 5px 12px;
    
}

.social-links{
    width:198px;
    margin: 0 auto;
}

.social-links a:nth-of-type(2){
    margin: 0 20px;
}


/* ARTICLE-LIST */

#article-list{
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: left;
    
}

.list-obj{
    width: 250px;
    height: 350px;
    background: #f3f3f3;
    
    margin-bottom: 20px;
    border: 1px solid #e3e3e3;
}

.list-obj:nth-child(3n-1){
    margin-left: 20px;
    margin-right: 20px;

}

.list-obj p, .list-obj h2, .list-obj h3{
    padding: 5px 10px;
}

.list-obj h2{
    margin-bottom: 0px;
    padding-bottom: 0px;
    text-align: left;
    font-size: 18px;
    height: 70px;
}

.list-obj h3{
    font-size: 15px;
}

.list-obj p{
    display: block;
    max-width: 300px;
    height: 250px;
    font-size: 16px;
    width: 100%;
    word-wrap: break-word;
    padding: 10px;
    text-align: justify;
    margin-top: 0;
}

.list-obj img{
    object-fit: cover;
    width: 100%;
    height: 150px;
    object-position: 0 0;

    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

}

#page-list{
    width: 100%;
}

#page-list ul{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#page-list ul li{
    display: block;
    list-style: none;
    margin: 0px 10px;
}

#page-list ul li a img{
    height: 20px;
}

#menu-txt{
    color:#fff;
    display: inline-block;       
}

/* MOBILE-ADAPT */
@media screen and (max-width: 800px){

    nav{
        height: auto;
       
    }

    

    nav>div>ul{
        padding-left: 0;
        flex-direction: column;
    }

    .header-info{
        margin-left: 0;
        margin-top: 0;
    }

    header, .header-info, .main-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    h1{
        font-size: 18px;
    }

    h1, .main-info h2, .main-info h3{
        text-align: center;
    }

    .main-info h2, .main-info h3{
        font-size: 16px;
       
    }

    .header-info>h2 span:nth-child(2){
        display: block;
        margin: 0 auto;
        max-width: 275px;
    }

    .phone-messanger{
        flex-direction: column-reverse;
    }

    .phone-messanger div{
        margin: 10px 0;
    }

    .phone-messanger h3 a{
        font-size: 25px;
    }

    .delimeter{
        display: none;
    }


    .info{
        flex-direction: column;
    }


    #advantages .inf-card {
        flex-direction: column;
    }
    #price table{
        font-size: 12px;
    }

    #about-us p{
        font-size: 15px;
        padding: 20px;
    }

    .cases ul li{
        max-width: 300px;
        width: 100%;
    }

    .carousel .carousel-item .inf-card p, #advantages .inf-card p{
        text-align: center;
        font-size: 15px;
    }

    .carousel .carousel-item .inf-card {
        height: 400px;
        flex-direction: column;
        max-width: 250px;
    }
    .carousel .carousel-item .inf-card img,   #advantages .inf-card img{
        width: auto;
        margin-right: 0;
    }
    
    form {
    font-size: 18px;
    }
}