/* 
Theme Name: Blue4x4 Bootstrap 4 
Theme URI: http://thrandur.net
Description: Amazing blue 4x4 responsive WordPress Theme using Bootstrap 4
Version: 2
Author: Thrandur Arnthorsson
Author URI: http://thrandur.net

Offroad Yellow: #f4e892;
4x4 Blue: #366e9f;
Muddy truck: #e1b06e;
Brown mud: #544c44;
Sky: #f2fbfe;

*/


/* Bootstrap 4 modifications 2017*/
.nav-item {
	font-size: 1.4em;
}
.menu-item {
	margin-left: 20px;
}
#navbars4x4[aria-expanded="true"] {
	background: black;
	border: 0px solid green!important;
}

.nav-offroad>a {
 color : #f2fbfe!important;
}
.dropdown-menu {
	background-color: #366e9f!important;
}
.dropdown-item {
	color: white!important;
}
.dropdown-item:hover {
	color: #366e9f!important;
}
.navbar-collapse {
	z-index: 1000;
}
.navbar-collapse.collapse.show {
	background-color: #366e9f!important;
}
.navbar-toggler {
	background: white;
}
.b1 {
	background: #f4e892;
	min-height: 100px;
}
.b2 {
	background: #f2fbfe;
	min-height: 100px;
}
.btn-primary {
	color: white!important;
	background-color: #366e9f;
}
/* ----------------------------- */

/* Animations					 */
@keyframes move4x4 {
	0% {
		opacity: 0;
		transform: translateX(-300px);
	}
	
	100% {
		opacity: 1;
		transform: translateX(0);		
	}
}
/* ----------------------------- */

body {
  font-size: 16pt;
  margin: 0;
  background: linear-gradient(#f2fbfe,#366e9f);
}

h1 {
  font-family: Zeyada;
  font-size: 2.8rem;
  color: #366e9f;
}
h2 {
  font-family: Zeyada;
  font-size: 2rem;
  color: black;
}
h3 {
  font-family: Zeyada;
  font-size: 1.6rem;
  color: black;
}

.usp4x4 {
	position: absolute;
	margin-top: 0px;
	font-family: Zeyada, cursive; 
}

.author .img-thumbnail {
	width: 110px;	
	height: 110px;	
}
.img-article {
	width: 180px;
}
.img-thumbnail img {
	width: auto;
	height: auto;
}
.cooler4x4 img {
	position: relative;
	margin-top: -90px;
	margin-left: 300px;
	height: 110px;
	width:  auto;
	border: 0px solid #73AD21;
	z-index: 1;
	animation-name: move4x4;
	animation-duration: 5s;
	/* animation-delay: 3s; */
}

.menuline img {
	margin-top: 0px;
	margin-left: -80px;
	z-index: -1000;
	height: 90px;
	width:  auto;
	overflow: hidden;
	border: 0px solid #73AD21;
}

.message1 {
	position: absolute;
	margin-top: -60px;
	margin-left: 4px;
	font-size: 42px;
	overflow: hidden;
	color: #366e9f;
	animation-name: move4x4;
	animation-duration: 6s;
}

.message2 {
	position: absolute;
	margin-top: -28px;
	margin-left: 4px;
	font-size: 31px;
	overflow: hidden;
	color: black;
	animation-name: move4x4;
	animation-duration: 7s;
}

.ad-header {
	position: absolute;
	margin-top: -150px;
	margin-left: 580px;
	width: 320px;
	height: 101px;
	border: 0px solid #73AD21;
}

.perfect {
	width: 160px;
	height: 160px;
	margin-left: auto;
	margin-right: auto;
}

.card {
	background: #f4e892;
	color: #366e9f;
	border: none;
	font-size: 14px;
}

.card a {
    color: #337ab7;
    text-decoration: none;
}

.side-4x4 {
	background: #e1b06e;
	color: #366e9f;
	border: none;
}
.ebay {
	font-size: 12pt;
}
.ebay img {
	outline: 3px solid white;	
	border-radius: 5px;
}
.article {
	color: #366e9f;
	border: none;
}
.article img {
	width: 190px;
}
.article .btn a {
    color: white;
    text-decoration: none;
}
.article h4 {
    color: #366e9f;
	font-size: 18px;
    text-decoration: none;
}

.wrapper {
  background: #f2fbfe;
}

.jumbotron {
	background: #f4e892;
	color: #366e9f;
}
.nav {
	font-size: 1.2rem;
	color: #f2fbfe;
}

.navbar-default {
	background: transparent;
}


.navbar {
	margin-top: 90px;
	margin-left: 0px;
	height: 90px;
	width: 100%;
	background-image: url("topbackground.svg");
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: left;
	border: 0px solid green;	
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.navbar  {
	margin-top: 90px;
	margin-left: 0px;
	height: 90px;
	width: 100%;
	background-image: url("topbackground-ie.svg");
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: left;
	border: 0px solid red;	
}
}

.navbar-nav {
	margin-top: 0px;
	color: #f2fbfe;
}
.navbar-brand {
}

.navbar-brand img{
	max-width: 100%;
	max-height: 85px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	height: 85px;
	width: 207px;
	border: 0px solid red ;	
	z-index: -1000;
  display: inline;
  vertical-align: top;
  float: none;
}
/*
.navbar-toggle {
	margin-top: -50px;
}
*/

.dropdown.open {
    background: #366e9f;
}

/*
//Bootstrap 3 Menu Generator - http://bootstrap3-menu.codedorigin.com/#
.navbar-inverse { background-color: #366E9F}
.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background-color: #F2FBFE}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: #000000}
.dropdown-menu { background-color: #000000}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #366E9F}
.navbar-inverse { background-image: none; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none; }
.navbar-inverse { border-color: #000000}
.navbar-inverse .navbar-brand { color: #F2FBFE}
.navbar-inverse .navbar-brand:hover { color: #F4E892}
.navbar-inverse .navbar-nav>li>a { color: #F2FBFE}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #366E9F}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #F4E892}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #F4E892}
.dropdown-menu>li>a { color: #F2FBFE}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #F4E892}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #F2FBFE}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #F4E892}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #F2FBFE}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #F4E892}

*/
.navbar-default .navbar-nav>li>a {
    color: #f2fbfe;
	background-color: #366e9f;
}

.nav>li>a {
	color : #f2fbfe;
	background-color: #366e9f;
}
.menu-item>a {
	color : #f2fbfe;
	background-color: #366e9f!important;
}
.nav>li>a:focus, .nav>li>a:hover {
 color : #f4e892;
 background-color: #544c44;
}

.icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #f4e892!important;
}

.nav .open>a, .nav .open>a:focus, .nav .open>a:hover  {
    background-color: #366e9f;
    border-color: #366e9f;
}

a.dropdown-toggle:hover {
	color : #f4e892!important;	
}
li.nav-offroad>a:hover {
 color : #f4e892!important;
}

.nav-action>a {
 color : #f4e892!important;
 font-weight: bold;
}

footer {
	background: #544c44;
}
footer-4x4 {
	background: black;
}
footer .container {
	background: black;
}
.panel-footer {
	font-size: .8rem;
	background: black;
	color: #f2fbfe;
	border: none;
}
.vefsala {
	background: black;
	color: #f2fbfe;
}
.vefsala a {
	color: #ffffff;
}
.marketing {
  color: #ebebe9;
  background: #234968;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  font-size: 140px;
  text-align: center;
  padding-top: 30px;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  max-height: 500px;
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  max-height: 500px;
  background-color: #777;
}

.offroad-yellow {
	background: #f4e892!important;
}
.4x4-blue {
	background: #366e9f!important;
}
.muddy-truck {
	background: #e1b06e!important;
}
.brown-mud {
	background: #544c44!important;
}
.offroad-sky {
	background: #f2fbfe!important;
}

li.widget {
	list-style: none;
}
img{
	max-width: 100%;
}
.imgboxwrap{ float:left; width:149px; height:333px; 
color:#848484; font: normal 11px/16px Arial, Helvetica, sans-serif; margin-right:16px; _margin-right:10px; }
.imgboxwrap h3{ color:#00316d; font: bold 13px Arial, Helvetica, sans-serif; margin:10px 0; height:34px;} 


.linktxt{ color:#00316d; margin:10px 0; height:34px;text-decoration:none;}  

.readmore{color:#000; font: normal 10px Arial, Helvetica, sans-serif; text-transform:uppercase; margin:10px 0;text-decoration:none;}
.imgboxwrap h4{color:#000; font: normal 10px Arial, Helvetica, sans-serif; text-transform:uppercase; margin:10px 0;}

.btn a {
	color: white;
}
.author {
	background: #f2fbfe;
	font-size: 12pt;
}
.page {
	background: #f4e892;
	font-size: 12pt;
	border: 1px solid #366e9f;
	border-radius: 5px;
}
.gear {
	font-size: 10pt;	
}