* {
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:#fff;
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 {
width:1140px;
margin:0 auto;
position:relative;
}

/* Header */

header {
display:block;
height:110px;
background-color:#fff;
position:relative;
z-index:9990;
width:100%;
}

.headerContainer {
position:relative;
height:100%;
}

header #headerLogo {
display:block;
background:url(/img/logo-header.png) no-repeat center;
width:344px;
height:30px;
position:absolute;
top:20px;
left:0;
background-size:contain;
box-sizing: border-box;
padding: 75px 0 0;
color: #fff;
font-size: 10px;
}

header span {
display:block;
line-height:110px;
font-size:18px;
font-weight:400;
float:right;
}
header span a {
color:#0097ee;
}


/* Content */

section {
padding:60px 0;
}

article h2 {
font-size:40px;
line-height:40px;
padding:0 0  30px;
border-bottom:7px solid #0097ee;
margin: 0 0 60px;
font-weight:300;
color:#222;

}

article h2 i {
float:right;
color:#ccc;
}

article img  {
display:block;
max-width:100%;
}

article img.right  {
width:50%;
margin-left:100px;
box-shadow:2px 2px 8px 0 #ccc;
padding:8px;
border-radius:2px;
}

article p {
font-size:18px;
line-height:30px;
margin:0 0 80px;
color:#222;
font-weight:300;
}

article p i {
color:#888;
}

article p.large {
font-size:30px;
line-height:50px;
margin:0 0 60px;
color:#222;
font-weight:300;
}

article ul {
list-style:none;
}

article ul.pros li {
width:30%;
display:block;
border-radius:30px;
height:60px;
line-height:64px;
font-size:24px;
color:#fff;
background:#0097ee;
padding:0 20px;
margin:0 0 20px;
}

article ul.pros li i {
margin:0 20px 0 0;
font-size:32px;
}

section .specs {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 60px; /* Chrome, Safari, Opera */
-moz-column-gap: 60px; /* Firefox */
column-gap: 60px;
}

section .specs h3 {
font-size:24px;
color:#0097ee;
margin:0 0 20px;
font-weight:600;
}

section .specs ul {
margin:0 0 80px;
}

section .specs ul li {
font-size:18px;
line-height:30px;
color:#222;
margin:0 0 15px;
font-weight:300;
}

section .gallery ul {
width:102%;
margin-left:-2%;
}

section .gallery ul li {
width:18%;
margin-left:2%;
margin-bottom:25px;
float:left;
}

section .gallery ul li a {
width:100%;
display:block;
}

section .gallery ul li a img {
width:100%;
display:block;
box-shadow:2px 2px 8px 0 #ccc;
padding:8px;
border-radius:2px;
}

article table {
font-size:18px;
line-height:18px;
margin:0 0 30px;
color:#222;
font-weight:300;
width:100%;
border-collapse:collapse;
}

article table th, article table td{
padding:20px;
width:30%;
text-align:left;
}

article table th {
font-weight:600;
background:#f5f5f5;
}

article table td {
border-bottom:1px solid #ddd;
}

article table td.price {
color:#0097ee;
}



/* Banners */

#bannerWrapper {
width:100%;
height:300px;
box-sizing:border-box;
position:relative;
background:url(/img/background-banner.jpg) no-repeat center;
background-size:cover;
}

#bannerWrapper .container {
height:300px;
position:relative;
}

#bannerWrapper .container h3 {
position:absolute;
bottom:0;
left:0;
font-size:40px;
line-height:30px;
padding:20px;
background:rgba(255,255,255,0.8);
font-weight:300;
color:#222;
}



/* footer */

footer {
background:#0097ee;
padding:40px;
font-size:14px;
line-height:24px;
font-weight:300;
color:#fff;
position:relative;
text-align:center;
}

footer a {
color:#fff;
text-decoration:underline;
}

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 -24px; 
}

@media only screen and (max-width : 1260px) {
    .container, .headerContainer {
    width: 960px;
    }

}

@media only screen
/*and (min-device-width : 375px) 
and (max-device-width : 667px)*/
and (min-height : 300px) and (max-width : 1020px) and (min-device-height : 300px) {

    .container, .headerContainer {
    width:100%;
    padding:40px;
    }

    header {
    height:160px;
    }

    header span {
    display:block;
    margin:70px 0 0;
    line-height:18px;
    float:none;
    text-align:center;
    }

    header #headerLogo {
    left:calc(50% - 172px);
    }

    article img.right {
    float:none;
    width:100%;
    margin:0 0 50px;
    }

    #bannerWrapper .container h3 {
    font-size:18px;
    line-height:30px;
    width:100%;
    text-align:center;
    }

    article ul.pros li {
    width:100%;
    }

    article h2 {
    font-size:30px;
    line-height:30px;
    }

    section .gallery ul li {
    width:48%;
    margin-bottom:25px;
    }

    section .specs {
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
    -webkit-column-gap:0; /* Chrome, Safari, Opera */
    -moz-column-gap:0; /* Firefox */
    column-gap:0;
    }

    section {
    padding:30px 0;
    }

    
    article table  {
    line-height:24px;
    }


}