@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,700,800');

body { margin:0; padding: 0; font-family: 'Montserrat', sans-serif; letter-spacing: 1px; color: #555;}
.container { max-width: 1300px; margin: 0 auto; padding: 0 1%; }
ul, li, h1, h2, h3, h4, h5, p { padding: 0; margin: 0; list-style: none; }
h2 { font-size: 30px }
h1 { font-size: 40px }
a { text-decoration: none; color: #555}
p { line-height: 1.7; font-size: 15px }
button { background-color: transparent; border: none; }
.center { text-align: center; }
.clear { clear: both; }
.bold { font-weight: 600 }
.upper { text-transform: uppercase; }
.space {letter-spacing: 1px }
.blu {color: #184a9b}
.b-b {background-color: #184a9b}
.b-blu { background-color: #0a152c }
.b-color { background-color: #b9bfe2 }
.color { color: #b9bfe2 }
.active {font-weight: 800!important}
.fff {color: #fff}
.z { z-index: 1; position: relative; }

#header-hp { text-align: center; padding: 2% }
.numbers { color: #b9bfe2; font-size: 26px}
#header-hp .numbers a { font-weight: 400; color: #b9bfe2; font-size: 23px }
#header-hp .menu li { padding: 1% 0.7%; font-size: 14px; display: inline-block; color: #fff; font-weight: lighter; text-transform: uppercase; }
#header .logo {width: 25%; float: left; margin-top: 20px}
#header .logo img { width: 200px }
#header .menu { width: 75%; float: right; text-align: right; z-index: 5; position: relative; }
#header .menu li { display: inline-block; color: #fff; padding: 5px 0 0 2%; text-transform: uppercase; font-size: 13px }
.menu li:hover { opacity: 0.6; }
#header .numbers { text-align: right; padding-top: 20px }
#header .numbers .line { height: 4px; background-color: #184a9b; width: 170px; text-align: right; float: right; display: block; margin: 10px 0 }
#header .numbers a { font-weight: 400; color: #b9bfe2; font-size: 20px }

.logo-hp { text-align: center; margin-top: 10%; position: relative; }
.logo-hp .logo {width: 240px}
.logo-hp p { color: #fff; font-size: 13px; margin: 10px 0 5px }
.logo-hp a { color: #fff; font-size: 13px; letter-spacing: normal;}
.logo-hp a img { width: 40px }
.texture { background-image: url(../images/bg.jpg); height: 100vh; background-size: cover; }
.deco { position: absolute; top: 0; width: 100%; z-index: 2; background-size: cover; }
.menu_responsive { display: none; }

.service { position: relative; background-color: #b9bfe2; padding: 3px 0; text-align: center; overflow: hidden; }
.service .line img { position: absolute; top: 0; left: 0; width: 100%; opacity: 0.2; margin-top: -1px }
.service .bs { position: relative; z-index: 1; padding: 80px 0; color: #fff }
.service .bs h2 { font-size: 4vw; color: #fff; font-weight: 400 }
.service .icon { height: 90px }
.service .bs.blu { background-color: #0a152c }

.link { font-size: 12px;font-weight: lighter; background-color: rgba(24,74,155,0.7); padding: 8px 0; position: absolute; bottom: 0; width: 100% }
.link a { font-size: 13px; color: #fff; font-weight: lighter; }

.parallax-window { min-height: 180px; background: transparent; }

main { padding: 50px 0; position: relative; }
.main1 .img { width: 40%; float: left; }
.main1 .img img { width: 100%; }
.main1 .img.maps img { border-radius: 0; }
#maptest { background-color: rgba(24,74,155,0.3); width: 100%; height: 540px; border-radius: 0 40px 0 0 }
.main1 .txt { float: right; width: 58%; margin-top: -8px  }
.main1 .line {background-color: #b9bfe2; height: 4px; width: 80px; margin: 20px 0}
.main2 .line {background-color: #b9bfe2; height: 4px; width: 80px; margin: 20px 0}
.main3 .line {background-color: #b9bfe2; height: 4px; width: 80px; margin: 20px auto}

.png { position: absolute; overflow: hidden; width: 70%; bottom: -400px;right: 0;z-index: -1 }
.png img { width: 100%; opacity: 0.1; }
.main1 .txt.left { float: left; }
.paesi { border-radius: 40px 0 0 0; overflow: hidden; width: 30%; float: right; text-align: right; position: relative; z-index: 2; }
.paesi a { display: block; padding: 10px 3%; background-color: rgba(185,191,226,0.7);border-bottom: 3px solid #b9bfe2 }
.paesi a:nth-child(2n) { background-color: rgba(185,191,226,0.4) }
.paesi a:hover {border-bottom: 3px solid #fff; background-color: #184a9b; color: #fff }

.button { transition: all 1s ease 0s; border-radius: 3px; margin-top: 20px; display: inline-block; padding: 10px; letter-spacing: normal; color: #fff; font-size: 11px; text-transform: uppercase; }
.button img { margin-right: 5px; width: 30px }
.button:hover { opacity: 0.8 }

#footer-hp { background-color: rgba(24,74,155,0.8); position: absolute; z-index: 1; bottom: 0; padding: 8px 4%; width: 92%; color: #fff; font-weight: lighter;}
footer { text-align: center; background-color: #184a9b; padding: 8px 4% }
footer p{ color: #fff; font-size: 11px }
footer a { color: #fff; font-size: 11px }
.parallax-window {padding: 5px 0 0; position: relative;background: transparent;}
.parallaxprefooter { font-size: 30px; padding: 5% 0; position: relative;background: transparent; text-align: center;}
.parallaxprefooter .line { height: 6px; width: 180px; background-color: #184a9b; margin: 20px auto }
.parallaxprefooter a { color: #b9bfe2; font-size: 30px }
.parallaxprefooter img { height: 40px }

form { width: 100%; float: left; }
form input, textarea { width: 100%; background-color: transparent; border:none; border-bottom: 2px solid #666; padding: 5px; border-radius: 0 2px 2px 0; font-size: 15px; margin: 8px 0; font-family: 'Open Sans', sans-serif; }
form .obbligo { font-size: 13px }
#checkbox input { width: 15px; margin-right: 5px; float: left; }
#checkbox p { font-size: 16px; float: left; width: 90% }
form .button { background-color: #b9c8e1; padding: 10px 20px; display: inline-block; margin-top: 10px; border-radius: 5px; }
form .button.submit { border:none; width: auto; }

.move { position: absolute; bottom: 50px; width: 70px; right: 0; left: 0; margin: 0 auto; text-align: center; }
.move img { width: 50px }

.gallery { background-color: #000; position: relative; }
.gallery .button { position: absolute; left: 0; right: 0; text-align: center; margin: 0 auto; bottom: 35%; padding: 30px; display: inline-block; width: 180px }
.gallery img {transition: all 1s ease 0s; width: 25%; float: left; }
.gallery img:hover { opacity: 0.6 }

.box { z-index: 5; height: 300px; background-color: #0a152c; width: 32%; display: inline-block; margin: 0.1%; border-radius: 5px; position: relative; overflow: hidden; }
.box .img { transition: all 1s ease 0s; width: 110%; opacity: 0.6; }
.box .img:hover { width: 112%; opacity: 1; margin-top: -1% }
.box .icon { width: 30px; }
.box .txt { color: #fff; padding: 5px 1%; position: absolute; bottom: 0; background-color: rgba(10,21,44,0.8); width: 98%; text-align: center; }
.box .txt h3 { color: #b9bfe2; font-size: 1.3vw; font-weight: lighter; text-transform: uppercase; }
.box .txt h2 { color: #b9bfe2; font-size: 1.8vw; text-transform: uppercase; }
.box .txt p { font-size: 11px; font-weight: lighter; }
.box h5 { font-size: 2.5vw }

.main3 p { width: 80%; margin: 0 auto }
.main3 .download { display: inline-block; background-color: #b9bfe2; padding: 10px; margin-top: 20px; border-radius: 5px }
.main3 .gallery { background-color: transparent; text-align: center; margin-top: 50px }
.main3 .gallery img { border-radius: 5px; margin: 0.2%; transition: all 1s ease 0s; width: 24%; display: inline-block; float: none; }
.main3 .gallery img:hover { opacity: 0.6 }
.main3 .data { font-size: 40px; display: inline-block; padding: 10px; border-radius: 5px; color: #fff; margin-bottom: 20px }

.casella { width: auto; }

@media screen and (max-width: 1200px) {
.box { height: 250px }
.box .img { width: 130%;}
.box .img:hover { width: 132%;}
.paesi { width: 41% }
.main1 .txt.left { width: 55% }
}

@media screen and (max-width: 768px) {
.logo-hp { margin-top: 25% }
.menu { display: none; }
.menu_responsive { text-align: center; z-index: 200; display: inline-block; top: 0; left: 0; position: fixed; width: 100%; background-color: #0a152c}
#trigger-overlay { color: #fff; padding: 5px 0; }
#trigger-overlay p { display: inline-block; /*margin-right: 5px*/ }
#trigger-overlay i { display: none; font-size: 15px }
.move { bottom: 10px }
#header-hp { padding-top: 50px }
.gallery .button { padding: 10px; bottom: 45%}
.gallery img { width: 50% }
#header .logo { float: none; width: 100%; text-align: center; margin-top: 50px }
#header .numbers { padding: 10px 0 20px; float: none; width: 100%; text-align: center; font-size: 13px }
#header .numbers a { font-size: 17px }
.parallax-window { padding: 5px 0 30px }
#header .numbers .line { display: none; }
.link { text-align: center; }
.main1 .img { text-align: center; width: 100%; float: none; }
.main1 .img img { width: 300px; border-radius: 0 40px;}
.main1 .txt { float: none; text-align: center; width: 90%; margin: 40px auto 0 }
.line { margin: 20px auto!important }
.parallaxprefooter a, .parallaxprefooter { font-size: 15px }
h1 { font-size: 30px }
.png { bottom: -10%; }
.box { width: 48%; height: 250px }
.box .img { width: auto; height: 100%}
.box .img:hover { width: auto; height: 100%; margin: 0}
.box .txt h3 { font-size: 3vw }
.box .txt h2 { font-size: 3vw }
.main3 .gallery img { width: 31% }
.paesi { width: 99%; margin-top: -10px; border-radius: 40px 40px 0 0; float: none; text-align: center; }
.main1 .txt.left { width: 100%; float: none; }
.paesi a { font-size: 13px }
#maptest { width: 100%; height: 400px; }
form input, textarea { text-align: center; }
form { width: 98% }
.service .bs h2 { font-size: 10vw; font-weight: bolder; }
.service .line img { width: 200% }
.service .line { overflow: hidden; }
.main1 { text-align: center; }
}

@media screen and (max-width: 500px) {
.box { height: 200px }
.main3 .gallery img { width: 47% }
.box h5 { font-size: 4.5vw }
#header-hp .numbers a, #header-hp .numbers { font-size: 17px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); }
#header .numbers { text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); }
.logo-hp { margin-top: 38% }
.main1 .img iframe { width: 90% }
}

@media screen and (max-width: 420px) {
}