/* Mobile portrait mode */
@media (max-width: 767px) {
	body {
		font-size: 13px;
	}
	.container {
		position: relative;
		width: 100%;
		padding-left: 10px;
		padding-right: 10px;
		box-sizing: border-box;
	}
	.ia-col-1,
	.ia-col-2,
	.ia-col-3,
	.ia-col-4,
	.ia-col-5,
	.ia-col-6,
	.ia-col-7,
	.ia-col-8,
	.ia-col-9,
	.ia-col-10,
	.ia-col-11,
	.ia-col-12 {
		width: 100%;
	}
	.ia-offset-3 {
		margin-left: 0;
	}
	
	
	.ia-col-xs-1,
	.ia-col-xs-2,
	.ia-col-xs-3,
	.ia-col-xs-4,
	.ia-col-xs-5,
	.ia-col-xs-6,
	.ia-col-xs-7,
	.ia-col-xs-8,
	.ia-col-xs-9,
	.ia-col-xs-10,
	.ia-col-xs-11,
	.ia-col-xs-12 {
		padding-left: 20px;
		padding-right: 20px;  
		float: none;
		box-sizing: border-box;
	}
	.ia-col-xs-1 {
		width: 8.333%;
	}
	.ia-col-xs-2 {
		width: 16.667%;
	}
	.ia-col-xs-3 {
		width: 25%;
	}
	.ia-col-xs-4 {
		width: 33.333%;
	}
	.ia-col-xs-5 {
		width: 41.667%;
	}
	.ia-col-xs-6 {
		width: 50%;
	}
	.ia-col-xs-7 {
		width: 58.333%;
	}
	.ia-col-xs-8 {
		width: 66.667%;
	}
	.ia-col-xs-9 {
		width: 75%;
	}
	.ia-col-xs-10 {
		width: 83.333%;
	}
	.ia-col-xs-11 {
		width: 91.667%;
	}
	.ia-col-xs-12 {
		width: 100%;
	}




	h1 {
		font-size: 2.0em;
	}
	#offcanvas-menu-toggle {
		display: block;
	}
	
	#krivogastani-promet-logo-mobile {
		display: block;
	}
	#krivogastani-promet-logo {
		display: none;
	}	
	
	#mobile-sub-menu {
		position: relative;
		width: 100%;
		display: block;
	}
	#mobile-sub-menu ul {
		list-style: none;
		padding: 0px;
		margin: 0px;
	}
	#mobile-sub-menu ul li {
		position: relative;
		width: 100%;
		padding: 15px 20px;
		background: #333;
		box-sizing: border-box;
		border-top: solid 1px #848484;
	}
	#mobile-sub-menu ul li:first-child {
		border: none;
	}
	#mobile-sub-menu ul li a {
		text-decoration: none;
		color: #fff;
		font-size: 1.2em;
	}
			
	#mobile-navigation {
		display: none;
		position: absolute;
		left: 10px;
		right: 10px;
		top: 90px;
		z-index: 9;
		padding-top: 40px;
		padding-bottom: 40px;
		width: auto;
		background-color: #424146;
		box-sizing: border-box;
	}
	#mobile-navigation ul {
		padding-left: 20px;
		padding-right: 20px;
	}
	#mobile-navigation ul li {
		display: block;
		text-align: left;
		border-top: solid 1px rgba( 242, 242, 242, 0.5 );
		position: relative;
		padding-left: 15px;
		padding-right: 15px;
		overflow: hidden;
	}
	#mobile-navigation ul li a {
		display:block;
		padding-top: 0.8em;
		padding-bottom: 0.8em;
		color: #f2f2f2;
		font-size: 1.4em;
		line-height: 1.4em;
		text-transform: uppercase;
		text-decoration: none;
		clear: both;
	}
	#mobile-navigation ul li a:hover {
		color: #fff;
	}
    #mobile-navigation ul li.menu-item-has-children > a:after {
        content: "+";
        margin-left: 15px; 
        font-size: 1.5em;
        position: absolute;
        top: 0.5em;
        right: 0px;
    }
	#mobile-navigation ul li:first-child {
		border: none;
	}
	#mobile-navigation ul li:first-child a {
		padding-top: 0;
	}
	#mobile-navigation ul li ul {
		display: none;
		padding: 0;
		margin: 0;
		margin-left: -5px;
		margin-right: -5px;
		overflow: hidden;
		padding-bottom: 20px;
	}
	#mobile-navigation ul li ul li {
		width: 100%;
		float: left;
		padding: 0px;
		padding-left: 5px;
		padding-right: 5px;
		box-sizing: border-box;
		border: none;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	#mobile-navigation ul li ul li a {
		display: block;
		background-color: rgba( 255, 255, 255, 0.8 );
		font-size: 1em;
		color: #000;
		padding: 5px;
		overflow:hidden;
	}
	#mobile-navigation ul li ul li:first-child a {
		padding-top: 5px;
	}
	#mobile-navigation ul li ul li img {
		width: 50%;
		float:left;
	}	
	#mobile-navigation ul li ul li p {
		width: 50%;
		float:left;
		box-sizing: border-box;
		padding-left: 10px;
	}	
	


	.main-menu {
		display: none;
	}
	#sub-menu-container {
		display: none;
	}


	.header_image img {
		width: 300%;
		margin-left: -100%;

	}

	
	.page {
		padding-top: 30px;
		padding-bottom: 20px;
	}
	.page h3 {
		font-size: 1.4em;
	}
	

	.products h1 .arrow-bottom {
		bottom: -24px;
	}
	#footer-contact-form {
		width: 100%;
	}
	#footer-contact-form .contact_submit_form {
		width: 100%;
	}
	#copyright {
		width: 100%;
		float: none;
		text-align: center;
		padding-top: 0px;
	}

}
/* Mobile lendscape mode */
@media (max-width: 767px) and (orientation : landscape) {
	body {
		font-size: 13px;
	}
	.container {
		position: relative;
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
	}
	.ia-col-1,
	.ia-col-2,
	.ia-col-3,
	.ia-col-4,
	.ia-col-5,
	.ia-col-6,
	.ia-col-7,
	.ia-col-8,
	.ia-col-9,
	.ia-col-10,
	.ia-col-11,
	.ia-col-12 {
		width: 100%;
	}
	h1 {
		font-size: 2.0em;
	}
	#offcanvas-menu-toggle {
		display: block;
	}
	
	#mobile-sub-menu {
		position: relative;
		width: 100%;
		display: block;
	}
	#mobile-sub-menu ul {
		list-style: none;
		padding: 0px;
		margin: 0px;
	}
	#mobile-sub-menu ul li {
		position: relative;
		width: 100%;
		padding: 15px 20px;
		background: #333;
		box-sizing: border-box;
		border-top: solid 1px #848484;
	}
	#mobile-sub-menu ul li:first-child {
		border: none;
	}
	#mobile-sub-menu ul li a {
		text-decoration: none;
		color: #fff;
		font-size: 1.2em;
	}
			
	#mobile-navigation {
		display: none;
		position: absolute;
		left: 10px;
		right: 10px;
		top: 90px;
		z-index: 9;
		padding-top: 40px;
		padding-bottom: 40px;
		width: auto;
		background-color: #424146;
		box-sizing: border-box;
	}
	#mobile-navigation ul {
		padding-left: 20px;
		padding-right: 20px;
	}
	#mobile-navigation ul li {
		display: block;
		text-align: left;
		border-top: solid 1px rgba( 242, 242, 242, 0.5 );
		position: relative;
		padding-left: 15px;
		padding-right: 15px;
		overflow: hidden;
	}
	#mobile-navigation ul li a {
		display:block;
		padding-top: 0.8em;
		padding-bottom: 0.8em;
		color: #f2f2f2;
		font-size: 1.4em;
		line-height: 1.4em;
		text-transform: uppercase;
		text-decoration: none;
		clear: both;
	}
	#mobile-navigation ul li a:hover {
		color: #fff;
	}
    #mobile-navigation ul li.menu-item-has-children > a:after {
        content: "+";
        margin-left: 15px; 
        font-size: 1.5em;
        position: absolute;
        top: 0.5em;
        right: 0px;
    }
	#mobile-navigation ul li:first-child {
		border: none;
	}
	#mobile-navigation ul li:first-child a {
		padding-top: 0;
	}
	#mobile-navigation ul li ul {
		display: none;
		padding: 0;
		margin: 0;
		margin-left: -5px;
		margin-right: -5px;
		overflow: hidden;
		padding-bottom: 20px;
	}
	#mobile-navigation ul li ul li {
		width: 100%;
		float: left;
		padding: 0px;
		padding-left: 5px;
		padding-right: 5px;
		box-sizing: border-box;
		border: none;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	#mobile-navigation ul li ul li a {
		display: block;
		background-color: rgba( 255, 255, 255, 0.8 );
		font-size: 1em;
		color: #000;
		padding: 5px;
		overflow:hidden;
	}
	#mobile-navigation ul li ul li:first-child a {
		padding-top: 5px;
	}
	#mobile-navigation ul li ul li img {
		width: 50%;
		float:left;
	}	
	#mobile-navigation ul li ul li p {
		width: 50%;
		float:left;
		box-sizing: border-box;
		padding-left: 10px;
	}	
	
	
	.main-menu {
		display: none;
	}
	#sub-menu-container {
		display: none;
	}
	
	.page {
		padding-top: 30px;
		padding-bottom: 20px;
	}
	.page h3 {
		font-size: 1.4em;
	}
	

	
	#copyright {
		width: 100%;
		float: none;
		text-align: center;
		padding-top: 0px;
	}

}

/* iPad portrait mode */
@media (min-width: 768px) and (max-width: 991px) {
	body {
		font-size: 13px;
	}
	.container {
		position: relative;
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
	}

	.ia-col-sm-1,
	.ia-col-sm-2,
	.ia-col-sm-3,
	.ia-col-sm-4,
	.ia-col-sm-5,
	.ia-col-sm-6,
	.ia-col-sm-7,
	.ia-col-sm-8,
	.ia-col-sm-9,
	.ia-col-sm-10,
	.ia-col-sm-11,
	.ia-col-sm-12 {
		padding-left: 20px;
		padding-right: 20px;  
		float: left;
		box-sizing: border-box;
	}
	.ia-col-sm-1 {
		width: 8.333%;
	}
	.ia-col-sm-2 {
		width: 16.667%;
	}
	.ia-col-sm-3 {
		width: 25%;
	}
	.ia-col-sm-4 {
		width: 33.333%;
	}
	.ia-col-sm-5 {
		width: 41.667%;
	}
	.ia-col-sm-6 {
		width: 50%;
	}
	.ia-col-sm-7 {
		width: 58.333%;
	}
	.ia-col-sm-8 {
		width: 66.667%;
	}
	.ia-col-sm-9 {
		width: 75%;
	}
	.ia-col-sm-10 {
		width: 83.333%;
	}
	.ia-col-sm-11 {
		width: 91.667%;
	}
	.ia-col-sm-12 {
		width: 100%;
	}
	.ia-col-md-6:nth-child(2n+3) {
		clear: both;
	}
	
	
	#offcanvas-menu-toggle {
		display: block;
		top: 40px;
		left: auto;
		right: 5px;
	}
	#mobile-sub-menu {
		position: relative;
		width: 100%;
		display: block;
	}
	#mobile-sub-menu ul {
		list-style: none;
		padding: 0px;
		margin: 0px;
	}
	#mobile-sub-menu ul li {
		position: relative;
		width: 100%;
		padding: 15px 20px;
		background: #333;
		box-sizing: border-box;
		border-top: solid 1px #848484;
	}
	#mobile-sub-menu ul li:first-child {
		border: none;
	}
	#mobile-sub-menu ul li a {
		text-decoration: none;
		color: #fff;
		font-size: 1.2em;
	}
			
	#mobile-navigation {
		display: none;
		position: absolute;
		left: 10px;
		right: 10px;
		top: 90px;
		z-index: 9;
		padding-top: 40px;
		padding-bottom: 40px;
		width: auto;
		background-color: #424146;
		box-sizing: border-box;
	}
	#mobile-navigation ul {
		padding-left: 20px;
		padding-right: 20px;
	}
	#mobile-navigation ul li {
		display: block;
		text-align: left;
		border-top: solid 1px rgba( 242, 242, 242, 0.5 );
		position: relative;
		padding-left: 15px;
		padding-right: 15px;
		overflow: hidden;
	}
	#mobile-navigation ul li a {
		display:block;
		padding-top: 0.8em;
		padding-bottom: 0.8em;
		color: #f2f2f2;
		font-size: 1.4em;
		line-height: 1.4em;
		text-transform: uppercase;
		text-decoration: none;
		clear: both;
	}
	#mobile-navigation ul li a:hover {
		color: #fff;
	}
    #mobile-navigation ul li.menu-item-has-children > a:after {
        content: "+";
        margin-left: 15px; 
        font-size: 1.5em;
        position: absolute;
        top: 0.5em;
        right: 0px;
    }
	#mobile-navigation ul li:first-child {
		border: none;
	}
	#mobile-navigation ul li:first-child a {
		padding-top: 0;
	}
	#mobile-navigation ul li ul {
		display: none;
		padding: 0;
		margin: 0;
		margin-left: -5px;
		margin-right: -5px;
		overflow: hidden;
		padding-bottom: 20px;
	}
	#mobile-navigation ul li ul li {
		width: 100%;
		float: left;
		padding: 0px;
		padding-left: 5px;
		padding-right: 5px;
		box-sizing: border-box;
		border: none;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	#mobile-navigation ul li ul li a {
		display: block;
		background-color: rgba( 255, 255, 255, 0.8 );
		font-size: 1em;
		color: #000;
		padding: 5px;
		overflow:hidden;
	}
	#mobile-navigation ul li ul li:first-child a {
		padding-top: 5px;
	}
	#mobile-navigation ul li ul li img {
		width: 50%;
		float:left;
	}	
	#mobile-navigation ul li ul li p {
		width: 50%;
		float:left;
		box-sizing: border-box;
		padding-left: 10px;
	}	
	
	
	#krivogastani-promet-logo {
		width: 50%;
	}
	.main-menu {
		display: none;
		width: 94%;
	}
	#sub-menu-container {
		display: none;
	}
	.main-submenu-close {
		top: -40px;
		right: 15px;	
	}
	

	.product {
		margin-top: 20px;
		margin-bottom: 20px;
	}

	
	#copyright {
		width: 100%;
		float: none;
		text-align: center;
		padding-top: 0px;
	}

}
/* iPad lendscape mode */
@media (min-width: 992px) and (max-width: 1199px) {
	body {
		font-size: 13px;
	}
	.container {
		width: 92%;
	}
	
	.ia-col-md-1,
	.ia-col-md-2,
	.ia-col-md-3,
	.ia-col-md-4,
	.ia-col-md-5,
	.ia-col-md-6,
	.ia-col-md-7,
	.ia-col-md-8,
	.ia-col-md-9,
	.ia-col-md-10,
	.ia-col-md-11,
	.ia-col-md-12 {
		padding-left: 20px;
		padding-right: 20px;  
		float: left;
		box-sizing: border-box;
	}
	.ia-col-md-1 {
		width: 8.333%;
	}
	.ia-col-md-2 {
		width: 16.667%;
	}
	.ia-col-md-3 {
		width: 25%;
	}
	.ia-col-md-4 {
		width: 33.333%;
	}
	.ia-col-md-5 {
		width: 41.667%;
	}
	.ia-col-md-6 {
		width: 50%;
	}
	.ia-col-md-7 {
		width: 58.333%;
	}
	.ia-col-md-8 {
		width: 66.667%;
	}
	.ia-col-md-9 {
		width: 75%;
	}
	.ia-col-md-10 {
		width: 83.333%;
	}
	.ia-col-md-11 {
		width: 91.667%;
	}
	.ia-col-md-12 {
		width: 100%;
	}

	.ia-col-md-4:nth-child(3n+4) {
		clear: both;
	}
	
	.product {
		margin-top: 20px;
		margin-bottom: 20px;
	}	


}


@media (min-width: 1200px) and (max-width: 1399px) {
	body {
		font-size: 14px;
	}
	.container {
		width: 86%;
	}
	
	.product {
		margin-top: 25px;
		margin-bottom: 25px;
	}	
	
	.ia-col-3:nth-child(4n+5) {
		clear: both;
	}
}

@media (min-width: 1400px) and (max-width: 1649px)  {
	body {
		font-size: 15px;
	}
	.container {
		width: 78%;
	}
	
	.ia-col-3:nth-child(4n+5) {
		clear: both;
	}
}

@media (min-width: 1650px) {
	
	.ia-col-3:nth-child(4n+5) {
		clear: both;
	}
	
}