@import url('https://fonts.googleapis.com/css?family=Russo+One&display=swap');

:root {
	--blue: #3089c5;
	--dark-blue: #162b38;
	--green: #00b19f;
	--brown: #7f452f;
	--red:#D8320E; /* A9260A */
	--dark-red:#A4444B;
}
.bg-red {
	background-color: var(--red);
}
.foot .library-image {
	 margin: 0;
}
.btn-blue {
	background-color: var(--blue);
	border-radius: 0;
	color: var(--light)!important;
	padding: 1rem 1.1rem;
	font-size: 1.2rem;
	border: var(--light) thin solid;
}
	.btn-blue:hover {
		background-color: var(--dark-blue);
		color: var(--light)!important;
	}
/*-----------------
--JS-Slider
------------------*/
#slider, #slider .sliderInner , #slider2, #slider2 .sliderInner{
	width: 100%;
	height: 850px;
	border-radius: 3px;
}
#slider2 .bgLayer, #slider .bgLayer {
	width: 95% !important;
}
#slider2 div, #slider div {
	-webkit-transform: translate3d(0,0,0);
	 transform: translate3d(0,0,0);
}
#slider2 .sliderInner div {
    background-size: auto 100% !important;
}

#slider .sliderInner div {
    background-size: auto 100% !important;
}
#slider div {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(2px,0px,0);
}
#sliderFrame {
	width: 100%;
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
@media only screen and (min-width:1600px) {
	#slider2 .sliderInner div {
    	background-size: auto 100% !important;
	}

	#slider .sliderInner div {
	    background-size: auto 100% !important;
	}
}

/*------------
--Header
--------------*/
.head {
	margin-top: 60px;
}
.col-top-3 {
	flex: 0 0 33.333%;
}
.col-mid-3 {
	flex: 0 0 33.333%;
	border-left: var(--light) 2px solid;
	border-right: var(--light) 2px solid;
}
.col-img {
	position: relative;
	overflow: hidden;
	height: 750px;
}
	.col-img img {
		position: relative;
		width: 600px;
		height: auto;
		left: 50%;
		transform: translateX(-50%);
	}
.col-info {
	position: relative;
	overflow: hidden;
	height: 750px;
	color: var(--light);
	background-color: var(--dark-red);
	text-align: center;
}

	.col-info img {
		max-width: 100%;
	}
.ci-container {
/*	margin-top: 15px;*/
	padding: 30px 0;
	border-top: var(--light) 2px solid;
}
.ci-container a {
	margin: 15px 0;
	color: var(--green);
}
@media only screen and (max-width:992px) {
	.col-top-3 {
		flex: 0 0 25%;
	}
	.col-mid-3 {
		flex: 0 0 50%;
	}
}
@media only screen and (max-width:768px) {
	.col-top-3 {
		flex: 0 0 15%;
	}
	.col-mid-3 {
		flex: 0 0 70%;
	}
	
}
@media only screen and (max-width:576px) {
	.col-top-3 {
		flex: 0 0 5%;
	}
	.col-mid-3 {
		flex: 0 0 90%;
	}
}

/*--------- min-width ----------*/
@media only screen and (min-width:1600px) {
	.col-img img {
		width: 100%;
	}
	.col-img {
		height: 800px;
	}
	.col-info {
		height: 800px;
	}
}
@media only screen and (min-width:1800px) {
	.col-img img {
		width: 100%;
	}
	.col-img {
		height: 900px;
	}
	.col-info {
		height: 900px;
	}
}
@media only screen and (min-width:2100px) {
	.col-img {
		height: 1000px;
	}
	.col-info {
		height: 1000px;
	}
}
/*------------
--Head-d
-------------*/
.head-d {
	background: url('site/head-d.jpg');
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}
.head-d-item {
	position: relative;
	padding: 4rem 0;
}
	.head-d-item::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: var(--dark);
		opacity: 0.6;
		z-index: 1;
	}
	.head-d-item h1 {
		color: var(--light);
		position: relative;
		z-index: 5;
	}
/*-------------
--Navbar
--------------*/
.navbar .container {
	width: 100%;
	max-width: 1600px ;
	padding: 0;
	padding-right: 5%;
}
.navbar {
	border-top: black 2px solid;
	border-bottom: black 2px solid;
	padding: 0;
}
.navbar-brand img {
	width: 200px;
}
.navbar-brand {
	padding: 15px 35px;
	background-color: #F0EDC0;
	font-weight: 300;
	text-transform: uppercase;
	color: black;
}
	.navbar-brand:hover {
		color: black;
		background-color: #767450;
	}
.nav-link, .dropdown-item a, .navbar-brand {
	font-weight: 500;
        font-size:18px;
	text-transform: uppercase;
	color: black;
        font-family: 'Russo One', sans-serif;
}
	.nav-link:hover {
		color: #323232;
	}

.navbar .dropdown-menu {
	padding: 0;
	margin: 0;
	background-color: var(--red);
}
	.navbar .dropdown-menu ul {
		background-color: var(--red);
                padding: 0;
	        margin: 0;
		padding-left: 10px;
	}
		.navbar .dropdown-menu li:hover {
			background-color: var(--red);
		}
			.navbar .dropdown-menu li a {
				color: black;
			}
.navbar-toggler {
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.1);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
@media only screen and (max-width:768px) {
	.navbar-nav {
		padding-left: 15px;
	}
}
/*----------------
--Section-1
----------------*/

.section-1 {
	background-color: var(--brown);
	color: var(--light);
	padding: 3rem 0;
	border-top: var(--dark) 2px solid;
}
.section-1 a {
	color: var(--light);
}
.section-1 h3 {
        font-size: 2.4rem;
}
/*--------------
--footer
--------------*/

.foot {
	padding: 3rem 0 0 0;
	background-color: var(--dark);
	color: var(--light);
}
	.foot a {
		color: var(--light);
	}
		.foot a:hover {
			opacity: 0.7;
		}
	.foot li {
		padding: 8px 0;
		border-bottom: var(--light) solid thin;
		list-style: none;
	}
	.foot li a {
		display: block;
	}

.foot-bottom {
	padding: 2rem 0;
	text-align: center;
	background-color: black;
}
@media only screen and (min-width: 768px){
.navbar-expand-md .navbar-nav .dropdown-menu {
	position: absolute;
	left: 50%;
	transform: translate(-50%);
}
}
