﻿
* {
margin:0;
padding:0;
outline:none;
box-sizing:border-box;
}

html {
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}

body {
font-family: 'Open Sans', sans-serif;
background:#333;
min-height:100%;
height: 100%;
position:relative;
}


a { text-decoration:none; }
img { border:none; }
.left { float:left; }
.right { float:right; }
.clear { clear:both; }

.container, .headerContainer, .bannerContainer {
max-width:1140px;
width:100%;
margin:0 auto;
position:relative;
}


#contentWrapper {
background:#fff;
}

#pageBody {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
position:relative;
z-index:8000;
background:#333;
min-height:100%;
height:100%;
width:100%;
}

#pageBody.toggle {
transform:translateX(250px);
-moz-transform:translateX(250px);
-o-transform:translateX(250px);
-webkit-transform:translateX(250px);
}

/***/

/* sidebar */

nav#sidebar {
display:block;
width:250px;
height:100%;
position:fixed;
top:0;
left:0;
background:#222;
z-index: 0;
overflow-y:auto;
}

nav#sidebar ul:last-child {
border-top:2px solid #222;
}

nav#sidebar ul:last-child a {
background:#222;
border-bottom:1px solid #333;
}

nav#sidebar ul li a {
border-bottom:1px solid #222;
color:#eee;
font-size:15px;
line-height:55px;
padding:0 20px;
display:block;
background:#333;
}

nav#sidebar ul li a i {
font-size:20px;
width:20px;
margin-right:20px;
text-align:center;
top: 2px;
position: relative;
color:#666;
}

/* Header */

header {
display:block;
height:100px;
z-index:9999;
width:100%;
background:#596e70;
}



.headerContainer {
position:relative;
height:100%;
}

header #headerLogo {
display:block;
position:absolute;
bottom:10px;
background-size:contain;
box-sizing: border-box;
text-transform:uppercase;
color:#fff;
line-height:30px;
font-size:30px;
font-weight:900;
letter-spacing:2px;
text-transform:uppercase;
}

header #headerLogo span {
letter-spacing:2px;
font-size:12px;
font-weight:300;
line-height:16px;
display:block;
color:rgba(255,255,255,0.4);
text-transform:none;
}


header a#toggleSidebar {
display:none;
color:#fff;
position:absolute;
line-height:50px;
top:0;
left:0;
font-size:30px;
padding:0 15px;
z-index:9999;
}

.headerNavWrapper {
width:100%;
text-align:center;
border-top:1px solid rgba(255,255,255,0.2);
height:40px;
position:absolute;
bottom:0;
}

header nav {
position:absolute;
top:50%;
transform:translateY(-50%);
right:0;
}

header nav ul {
list-style:none;
}

header nav>ul>li {
float:left;
margin-left:20px;
position:relative;
}

header nav>ul>li a {
font-size:15px;
line-height:50px;
font-weight:300;
color:rgba(255,255,255,0.8);
letter-spacing:2.5px;
text-transform:uppercase;
}


header nav>ul>li a:hover {
color:#fff;
}

header nav ul li ul.sub {
background:#596e70;
position:absolute;
top:49px;
left:0;
display:inline-block;
opacity:0;
padding:10px 15px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
text-align:left;
}

header nav ul li ul.sub:before {
font-family:"Font Awesome 5 Free";
content:"\f0d8";
font-weight:900;
color:#596e70;
line-height:30px;
font-size:30px;
position:absolute;
top:-20px;
left:10px;
}

header nav ul li:hover ul.sub {
opacity:1;
}

header nav ul li:last-child ul.sub {
left:auto;
right:0;
}

header nav ul li ul.sub li {
float:none;
}

header nav ul li ul.sub li a {
font-size:14px;
font-weight:400;
line-height:30px;
white-space:nowrap;
}

/* Content */

section {
padding:60px 0;
overflow:hidden;
position:relative;
}

section.location {
padding:0;
background:#222;
}

section.silver {
background:#f5f5f5;
}

section.dark {
background:#222;
}


section h1 {
font-weight:400;
font-size:22px;
color:#596e70;
padding:0 0 20px;
line-height:30px;
margin:0 0 40px;
letter-spacing:1px;
border-bottom:1px solid #eee;
text-transform:uppercase
}

section h3 {
font-size:30px;
font-size:30px;
margin: 0 0 30px;
font-weight:900;
text-align:left;
color:#596e70;
}

section h4 {
font-size:40px;
font-size:40px;
margin: 0 0 20px;
font-weight:900;
color:#596e70;
text-align:left;
}

section p {
font-size:16px;
line-height:30px;
margin: 0 0 60px;
font-weight:300;
color:#444;
}
section p b {
font-weight:600;
}

section p a {
color:#596e70;
}
section p img {
display:block;
max-width:100%;
height:auto;
border:1px solid #ddd;
padding:10px;

}

section p img.right {
max-width:40%;
margin:0 0 40px 60px;
}

section p img.left {
max-width:40%;
margin:0 60px 40px 0;
} 

section p.columns {
column-count:3;
column-gap:60px;
text-align:justify;
column-rule:1px solid #ddd;
}

section p.left.half {
width:50%;
float:left;
padding-right:50px;
box-sizing:border-box;
}


section img.left {
max-width:50%;
padding:40px 100px 0 0;
box-sizing:border-box;
float:left;
} 

section .contentRight {
max-width:50%;
float:left;
} 

section ul, section ol {
font-size:16px;
line-height:34px;
margin: 0 0 60px 25px;
font-weight:300;
color:#444;
}

section.history p {
margin:60px 0;
}

section img.backgroundRight {
display:block;
position:absolute;
top:0;
right:0;
width:30%;
}

.containerLeft {
float:left;
}


.companyData {
background:#f5f5f5;
margin: 0 0 60px;
}
.companyData img {
width:100%;
display:block;
}

.companyData p {
padding:40px;
margin:0;
}

.companyData p i {
margin-right:10px;
color:#596e70;
}

p.contactData i {
margin-right:10px;
color:#596e70;
}

/* Banner */

section.banner {
width:100%;
height:500px;
position:relative;
overflow:hidden;
background:url(../img/background.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:top center;
position:relative;
z-index:5;
padding:0;
}

section.banner .slogan {
background:#333;
position:absolute;
top:40px;
right:0;
display:inline-block;
}

section.banner .slogan p {
padding:20px;
font-weight:300;
line-height:20px;
font-size:20px;
color:#fff;
margin:0;
}

section.banner .slogan span {
padding:20px;
font-weight:900;
font-size:20px;
line-height:20px;
background:#fff;
text-align:right;
width:100%;
display:block;
}

section.banner .slogan span a {
color:#222;
}

section.banner .slogan span i {
margin-right:10px;
color:#596e70;
float:left;
}



section.map {
width:100%;
height:600px;
background:#eee;
padding:0;
}

section.map iframe{
width:100%;
height:100%;
border:none;
}


section table {
border-collapse: collapse;
border:none;
width:100%;
font-size:16px;
line-height:16px;
font-weight:300;
color:#444;
margin:0 0 40px;
background:#fff;
border:5px solid #fff;
}

section table td, section table th {
border:1px solid #ddd;
padding:20px;
}

section table th {
background:#f5f5f5;
font-weight:500;
color:#444;
}

section table tr th:nth-child(1) {
text-align:left;
}

section table tr:nth-child(2) {
background:#f5f5f5;
font-weight:400;
color:#888;
}

section table tr td:nth-child(1n+2) {
text-align:center;}



/* contact */
section.newsletter  {
background:#e2e2e2;
text-align:center;
}


section.newsletter h3 {
text-align:center;
margin:0 0 10px;
}

section.newsletter p {
margin-bottom:20px;
}

section.newsletter form {
padding:0 0 10px;
}

section.newsletter input {
display:inline-block;
vertical-align:middle;
border:1px solid #ddd;
line-height:50px;
width:40%;
font-family: 'Roboto', sans-serif;
font-size:18px;
font-weight:300;
color:#444;
padding:0 10px;
box-sizing:border-box;
}

section.newsletter button {
display:inline-block;
box-sizing:border-box;
vertical-align:middle;
border:none;
line-height:50px;
font-family: 'Roboto', sans-serif;
background:#596e70;
color:#fff;
padding:0 30px;
margin-left:10px;
font-size:18px;
font-weight:300;
}


.contactForm {
width:50%;
background:#f5f5f5;
box-sizing:border-box;
float:left;
}

.contactForm form {
padding:40px;
}


.contactForm form h3 {
font-size:26px;
line-height:40px;
margin:0 0 30px;
font-weight:400;
}

.contactForm form h3:after {
font-family:"Font Awesome 5 Free";
content:"\f0e0";
font-weight:900;
color:rgba(0,0,0,0.1);
font-size:40px;
float:right;
}

.contactForm form input, .contactForm form textarea {
background:#fff;
font-size:16px;
line-height:30px;
width:100%;
margin:0 0 10px;
padding:10px 15px;
color:#333;
display:block;
border:none;
font-family:"Open Sans",sans-serif;
border-radius:2px;
}

.contactForm form input[type=submit] {
width:auto;
padding:10px 30px;
background:#596e70;
color:#fff;
margin:40px 0 0;
cursor:pointer;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}

.contactForm form input[type=submit]:hover {
background:#333;
}

.contactForm img {
display:block;
width:100%;
}

/* Product list/gallery */

ul.productList  {
width:102%;
margin-left:-2%;
list-style:none;
float:left;
}

ul.productList li {
width:23%;
margin-left:2%;
margin-bottom:30px;
float:left;
background:#f5f5f5;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}

ul.productList.gallery li {
width:18%;
}

ul.productList li img {
width:100%;
display:block;
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}

ul.productList li:hover img {
-webkit-filter: none; /* Safari 6.0 - 9.0 */
filter:none;
}


ul.productList li:hover  {
background:#596e70;
}

ul.productList li:hover h3 {
color:#fff;}


ul.productList li h3 {
display:block;
color:#333;
font-size:16px;
line-height:30px;
font-weight:400;
padding:10px;
box-sizing:border-box;
margin:0;
text-overflow:ellipsis;
overflow:hidden;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}


.productLeft {
width:55%;
float:left;
}

.productLeft a.contactUs {
display:inline-block;
color:#fff;
background:#596e70;
line-height:50px;
font-size:16px;
font-weight:600;
padding:0 20px;
margin: 0 0 40px;
border-radius:2px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}


.productLeft a.contactUs:after {
font-family:"Font Awesome 5 Free";
content:"\f0e0";
font-weight:900;
float:left;
margin-right:40px;
}

.productLeft a.contactUs:hover {
background:#333;
}

.productRight {
width:38%;
float:right;
margin:0 0 40px;
}

.productRight img {
width:100%;
display:block;
}

.productRight i {
font-size:13px;
color:#888;
display:block;
background:#f5f5f5;
padding:10px;
}

a.goBack {
display:inline-block;
color:#888;
font-size:14px;
line-height:30px;
background:#f5f5f5;
font-weight:400;
padding:0 20px;
border-radius:2px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
float:right;
text-transform:none;
}


a.goBack:after {
font-family:"Font Awesome 5 Free";
content:"\f30a";
font-weight:900;
float:left;
margin-right:20px;
}

a.goBack:hover {
background:#eee;
}


/* storitve */
section.services {
padding-top:10px;}


ul.services {
width:calc(100% + 10px);
float:left;
margin:0 0 0 -10px;
}

ul.services li {
width:calc(25% - 10px);
margin-left:10px;
display:block;
float:left;
font-size:20px;
font-weight:300;
box-sizing:border-box;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;

}

ul.services li:first-child {
border-left:none;
}

ul.services li img {
width:100%;
display:block;
margin:0 0 20px;
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;

}

ul.services li:hover  {
background:#f5f5f5;
}

ul.services li:hover img {
-webkit-filter: none; /* Safari 6.0 - 9.0 */
filter:none;
}

ul.services li h3 {
display:block;
color:#596e70;
font-size:22px;
line-height:32px;
font-weight:900;
margin:0 20px 20px;
}

ul.services li p {
color:#888;
font-size:14px;
line-height:24px;
font-weight:300;
margin:0 20px 40px;
}


ul.services li p b {
font-weight:600;
color:#222;
}




/* home */


ul.offer {
width:103%;
transform:translateX(-3%)
}

ul.offer li {
width:30.33333333%;
margin-left:3%;
margin-bottom:20px;
display:block;
float:left;
}

ul.offer li a {
display:block;
color:#596e70;
background:#fff;
color:#596e70;
border-left:6px solid #596e70;
padding:20px;
font-size:20px;
font-weight:300;
box-sizing:border-box;
}

ul.offer li a:hover {
background:#596e70;
color:#fff;
}

/* news list */

ul.newsList {
width:102%;
margin-left:-2%;
list-style:none;
}

ul.newsList li {
float:left;
width:31.33333%;
margin-left:2%;
margin-bottom:20px;
background:#f5f5f5;
padding:0 0 20px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}

ul.newsList li:hover {
background:#eee;
}

ul.newsList li h3 {
text-align:left;
padding:20px 20px 10px;
margin:0;
line-height:30px;
font-size:20px;
}

ul.newsList li span.newsDate {
padding:0 20px 0;
line-height:24px;
font-size:12px;
color:#888;
}

ul.newsList li span.more, ul.eventList li span.more {
padding:0 20px 0;
line-height:24px;
font-size:14px;
font-weight:600;
color:#333;
text-transform:uppercase;
}

ul.newsList li span.more:after, ul.eventList li span.more:after {
font-family:"Font Awesome 5 Free";
content:"\f0da";
font-weight:900;
color:#596e70;
margin-left:10px;
font-size:14px;
}



ul.newsList li p {
padding:20px;
line-height:24px;
font-size:14px;
margin:0;
font-weight:400;
}


ul.newsList li img {
display:block;
width:100%;
height:auto;
}

a.moreItems { 
background:#f5f5f5;
display:block;
line-height:50px;
font-size:50px;
color:#ccc;
text-align:center;
}


a.moreItems:hover { 
background:#ddd !important;
color:#fff;
text-shadow:none;
}

.noItems {
font-size:20px;
line-height:20px;
font-weight:300;
color:#222;
text-align:center;
}

.noItems:before {
font-family:"Font Awesome 5 Free";
content:"\f2fe";
font-weight:900;
color:#ddd;
font-size:80px;
line-height:80px;
margin-bottom:40px;
display:block;
}

/* event list */

ul.eventList {
width:102%;
margin-left:-2%;
list-style:none;
}

ul.eventList li {
float:left;
width:31.33333%;
margin-left:2%;
margin-bottom:20px;
background:#fff;
padding: 0 0 20px;
}

ul.eventList li .eventDate{
background:#596e70;
color:#fff;
position:relative;
}

ul.eventList li .eventDate .eventDateDay {
line-height:40px;
font-size:40px;
font-weight:700;
display:inline-block;
padding:20px 20px 0;
}

ul.eventList li .eventDate .eventDateMonthYear {
line-height:20px;
font-size:14px;
font-weight:700;
display:inline-block;
text-transform:uppercase;
padding:20px 0 0;
}

ul.eventList li .eventDate .eventDateDow {
display:block;
text-transform:uppercase;
padding:0 20px 20px;
opacity:0.5;
line-height:40px;
font-size:30px;
font-weight:300;
letter-spacing:2px;
}

ul.eventList li h3 {
text-align:left;
padding:20px 20px 10px;
margin:0;
line-height:30px;
font-size:20px;
}

ul.eventList li p {
padding:10px 20px 20px;
line-height:24px;
font-size:14px;
margin:0;
color:#888;
}

ul.eventList li .eventData {
padding:0 20px 20px;
display:block;
line-height:24px;
font-size:14px;
color:#222;
}

ul.eventList li .eventData i {
color:#596e70;
margin-right:10px;
}


a.moreItems.event { 
background:#fff;
}


/* event list */

ul.linksList {
width:102%;
margin-left:-2%;
list-style:none;
margin-bottom:40px;
}

ul.linksList li {
float:left;
width:31.33333%;
margin-left:2%;
margin-bottom:20px;
background:#f5f5f5;
box-sizing:border-box;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}

ul.linksList li:hover {
background:#eee;
}

ul.linksList li a {
padding:20px;
display:block;
}

ul.linksList li .fas {
line-height:40px;
font-size:40px;
color:#ddd;
margin-right:20px;
}

ul.linksList li p {
display:inline-block;
color:#596e70;
line-height:20px;
font-size:16px;
font-weight:700;
margin:0;
vertical-align:top;
}

ul.linksList li p span{
display:block;
color:#888;
font-weight:400;
}






/* kontakt */

ul.teamList {
width:102%;
margin-left:-2%;
list-style:none;
float:left;
}

ul.teamList li {
float:left;
width:31.33333%;
margin-left:2%;
margin-bottom:20px;
background:#f5f5f5;
box-sizing:border-box;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
padding:20px;
height:180px;
}

ul.teamList li:hover {
background:#eee;
}


ul.teamList li:before {
font-family:"Font Awesome 5 Free";
content:"\f007";
font-weight:400;
color:#ddd;
font-size:80px;
margin-right:20px;
}

ul.teamList li.teamListGeneral {
border:1px solid #ddd;
background:#fff;
}

ul.teamList li.teamListGeneral:before {
font-family:"Font Awesome 5 Free";
content:"\f0e0";
font-weight:400;
color:#ddd;
font-size:80px;
margin-right:20px;
}

ul.teamList li p {
display:inline-block;
color:#596e70;
line-height:20px;
font-size:20px;
font-weight:700;
margin:0;
vertical-align:top;
}

ul.teamList li p>i {
display:block;
color:#333;
font-weight:400;
line-height:26px;
font-size:16px;
padding:5px 0 0;
}

ul.teamList li p span {
display:block;
color:#333;
font-weight:400;
line-height:26px;
font-size:16px;
padding:15px 0 0;
}

ul.teamList li p span a:hover {
color:#333;
}

ul.teamList li p span i {
color:#596e70;
margin-right:10px;
}


/* kontakt */

ul.fleet {
width:100%;
margin-left:-2%;
list-style:none;
float:left;
}

ul.fleet li {
float:left;
width:48%;
margin-left:2%;
margin-bottom:20px;
box-sizing:border-box;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}

ul.fleet li img {
display:inline-block;
width:70%;
vertical-align:top;
box-sizing:border-box;
border:8px solid #fff; 
}

ul.fleet li p {
display:inline-block;
color:#333;
line-height:26px;
font-size:16px;
padding:20px;
font-weight:400;
margin:0;
margin-left:-10%;
vertical-align:top;
width:38%;
background:#fff;
}

ul.fleet li p b {
color:#596e70;
font-size:20px;
display:block;
font-weight:700;
margin:0 0 15px;
}





/* Button */
a.btn {
display:inline-block;
background:#596e70;
color:#fff;
line-height:50px;
font-size:20px;
padding:0 25px;
border-radius:2px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}

a.btn:hover {
background:#333;
}

section.silver a.btn:hover {
background:#fff;
color:#596e70;
}

a.btn:after {
font-family:"Font Awesome 5 Free";
content:"\f381";
font-weight:900;
margin-left:20px;
}

a.btn.btnDownload:before {
content:"Prenesi";
}



/* footer */
svg {
display:block;
}
footer {
background:#333;
position:relative;
z-index:10;
}


footer svg {
position:absolute;
top:0;
left:0;
transform: translateY(-100%);
}
footer span {
display:inline-block;
padding-top:20px;
}



footer ul {
float:left;
width:25%;
margin:0;
padding:80px 0 40px;
text-align:left;
list-style:none;
}

footer ul li {
color:rgba(255,255,255,0.6);
text-align:left;
font-size:14px;
line-height:20px;
margin:0 0 10px;
}

footer ul li a {
color:rgba(255,255,255,0.6);
}

footer ul li i {
color:#596e70;
margin-right:10px;
}

footer ul li h3 {
color:#596e70;
margin:0 0 30px;
text-transform:uppercase;
font-size:14px;
}

.lowerFooter {
position:relative;
font-size:14px;
line-height:24px;
color:rgba(255,255,255,0.3);
text-align:center;
}

a.netit {
position:absolute;
right:30px;
top:40px;
display:block;
width:76px;
height:24px;
background:url(/img/netit.png) no-repeat;
}

a.netit:hover {
background-position:0 -29px; 
}



@media only screen and (max-width : 1260px) {
    .container, .headerContainer {
    width: 960px;
    }

}


/* Smartphones (portrait and landscape) ----------- */


@media only screen
and (min-width : 320px)
and (max-width : 1024px) {

    header nav {
    display:none;
    }

    header {
    }

    header a#toggleSidebar {
    display:block;
    }

    section.title h1 {
    line-height: 20px;
    font-size: 20px;
    }

    .container, .headerContainer {
    width:100%;
    }

    section {
    padding:20px;
    }
    
    .contact {
    width: 100%;
    }

    header #headerLogo {
    left:50%;
    bottom:15px;
    transform:translateX(-50%);
    white-space: nowrap;
    font-size:20px;
    line-height:22px;
    }

    header #headerLogo span {
    white-space: normal;
    }


    section h1 {
    font-size: 24px;
    }
    section h3 {
    font-size: 22px;
    line-height: 32px;
    }

    a.netit {
    position: relative;
    right: auto;
    top: auto;
    margin: 20px auto 0;
    }

    section p {
    font-size: 18px;
    line-height: 30px;
    margin: 0 0 30px;
    }


    section.banner .slogan {
    display: inline-block;
    right: 50%;
    transform: translateX(50%);
    width: 80%;
    min-width: 230px;
    }

    section.banner {
    height: 250px;
    }

    ul.services li {
    width: 100%;
    margin-left: 0;
    }

    ul.services li {
    width: 100%;
    margin-left: 0;
    background:#f5f5f5;
    margin-bottom:20px;
    }

    ul.services li img {
    -webkit-filter: none;
    filter: none;    
    }

    footer ul {
    margin: 20px 0 0;
    padding: 0 40px 0;
    width:100%;    
    }

    footer {
    padding:20px 0;
    }

    section p {
    font-size:16px;
    }


    section p.left.half {
    width: 100%;
    padding-right: 0;
    }

    section .contentRight {
    max-width: 100%;
    }

    .companyData p {
    padding: 20px;
    margin: 0;
    }

    .contactForm {
    width: 100%;
    }
    
    .contactForm form {
    padding: 20px;
    }

    .contactForm form h3::after {
    font-size: 30px;
    }

    ul.productList li h3 {
    font-size: 14px;
    line-height: 20px;
    height: 62px;
    }

    ul.productList li {
    width: 49%;
    margin-left: 1%;
    margin-bottom: 15px;
    }

    ul.productList {
    width: 101%;
    margin-left: -1%;
    }

    a.goBack {
    float: none;
    margin: 10px 0 0;
    display:block;
    width:200px;
    }

    .productLeft {
    width: 100%;
    }

    .productRight {
    width: 100%;
    margin: 0 0 40px;
    }

    ul.productList.gallery li {
    width: 49%;
    }
}



/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 736px) 
  and (orientation: portrait) { 
        
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 736px) 
  and (orientation: landscape) { 
    
    a.goBack {
    float: right;
    margin: 0;
    }

    ul.productList.gallery li {
    width: 32.33333%;
    }

    ul.productList li {
    width: 32.3333333%;
    }
}

