﻿@media only screen and (max-width: 1024px) {
    #menu ul li {
        margin-left: 25px;
        margin-right: 25px;
    }
    .energy .five.columns{
        width: 0%;
    }
    .energy .seven.columns{
        width: 100%;
    }
    .energy .energySlide{
        padding: 0 25px;
    }
    .focusSml {
        max-width: 90%;
    }

    #animation-line svg {
        width: 100%;
        height: 120px;
    }
    .padSection{
        padding-right: 50px;
        padding-left: 50px;
    }
}

@media only screen and (max-width: 1023px) {
    #menu {
        overflow: hidden;
        height: 0;
        width: 100%;
        left: 0;
        top: 75px;
        margin: 0;
        position: fixed;
        z-index: 2;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        background-color: rgba(35, 35, 35, 1);
    }
    .mobileInline {
        display: inline-block !important;
    }
    button.hamburger.hamburger--spin.mobileInline {
        margin-top: 10px;
    }
    #menu.open {
		height: 75px;
    }
    .logo img{
        margin-left: 50px;
    }
    #menu nav{
        text-align: center;
    }
    .focusSml {
        max-width: 70%;
    }
    #menu ul li {
        margin-left: 10px;
        margin-right: 10px;
    }
    .logoTrusted {
        width: 180px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    #solutions .slick-dots {
        position: absolute;
        bottom: -10%;
    }

    #trustedBy .slick-dots {
        bottom: -20%;
    }
    .slide .logoTrusted img {
        width: 60%;
    }
    #valueCreation  .three.columns {
        width: 47%;
        margin-left: 3%;
    }

    #valueCreation .three {
        margin-top: 30px;
    }
    .cardPricing {
        width: 60%;
        margin: auto;
    }
    #pricing .four.columns {
        width: 100%;
        margin-left: 0px;
        margin-top: 20px;
    }
    .textSolution {
        margin-bottom: 30px;
        display: inline-block;
        width: 100%;
        vertical-align: middle;
    }
    .why .row{
        flex-direction: column;
    }
    .why .row .four.columns{
        width: 450px;
        margin:0;
        padding-top: 50px;
    }
    .what .row .six.columns{
        padding: 20px;
    }
    #aboutOffices .four.columns{
        width: 100%;
        margin: 0;
    }
    #aboutOffices .four.columns .contactUsMar{
        margin-bottom: 50px;
    }
    #aboutOffices .four.columns:last-of-type:last-child{
        margin-bottom: 300px;
    }
    .carouselEnergy .energySlide{
        height: auto;
    }
}

@media only screen and (max-width: 768px) {
    #menu.open{
        height: 100px;
    }
    .four.columns.boxBenefits {
        float: none;
        width: 60%;
        margin: auto;
        margin-bottom: 30px;
        display: block;
    }
    .introduction {
        width: 100%;
        text-align: left;
    }
	footer .three.columns, footer .four.columns {
		width: 46%;
	}
    footer .five.columns {
        width: 100%;
        margin-top: 30px;
        margin-left: 0%;
    }
    .newsletter {
        margin-top: 20px;
    }
    .subscribe-description {
        width: 80%;
    }
	#why .row {
		display: block;
	}

	#why .boxText {
		margin-bottom: 40px;
	}
	#valueCreation .three.columns {
		width: 42%;
		margin-left: 2%;
	}
    .applicationsQuote p{
        padding-bottom: 100px;
    }
    .what .six.columns{
        height: auto;
        margin-bottom: 50px;
    }
    .what .six.columns:last-of-type{
        margin-bottom: 50px;
    }
    .why .row .four.columns{
        width: 300px;
        margin:0;
        padding-top: 50px;
    }
    .decision img{
        margin-bottom: 50px;
    }
    .cloud img{
        height: auto;
        margin-bottom: 100px;
    }
    .demoForm{
        padding: 0 50px;
    }
}

@media only screen and (max-width: 480px) {

	#benefit .no-focus, #benefit .no-focus-rx {
		padding-right: 0%;
		padding-left: 0%;
	}

	#section1 .row {
		display: block;
	}
		.singleCase {
		max-height: 100%;
		position: relative;
	}
	button#signup_nl {
		min-width: 110px;
	}
		#menu.open {
		height: calc(100vh - 75px);
	}
	#section1 .containerSection {
		display: block;
		position: relative;
		margin: auto;
	}
	#keyFeatures {
		margin-top: 30px;
		margin-bottom: 30px;
	}
	#keyFeatures .Phase.description-1,
	#keyFeatures .Phase.description-2,
	#keyFeatures .Phase.description-3,
	#keyFeatures .Phase.description-4,
	#keyFeatures .Phase.description-5,
	#keyFeatures .Phase.description-6 {
		opacity: 1;
		display: inline;
	}
    .subscribe-description {
        width: 70%;
    }
    .cardMostImportantAddress {
        margin-bottom: 30px;
        width: 100%;
        box-sizing: border-box;
    }
    .maps{
        display:none;
    }
    .contMostImportant {
        display: block;
    }
    .imgLogos {
        display: block;
    }
    .three.columns {
        width: 90%;
    }
    #menu li:hover .submenu {
        max-height: 300px;
        opacity: 1;
        /* width: 100%; */
        background-color: transparent;
        box-shadow: none;
        border: none;
    }
    #menu .submenu li {
        /* margin: 30px !important; */
        height: auto;
        text-align: center;
        margin-left: 2%;
        margin-right: 2%;
        display: block; 
        width: auto;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    #menu ul li .submenu a {
        line-height: 21px;
        font-size: 18px;
    }
    .submenu {
        overflow: hidden;
        max-height: 0px;
        position: relative;
        top: 0;
        left: 0;
        opacity: 0;
        background-color: white;
        transform-origin: center;
        margin-left: auto;
        width: 100%;
        text-align: center;
        border-top: 2px solid #e2e2e2;
        align-items: center;
    }
    #menu .submenu a {
        display: inline-block;
        min-height: 50px;
    }
    .description-wrapper div {
        display: block;
    }

    .imgTesto {
        margin-left: 0%;
        width: 100%;
        /* display: inline-block; */
    }
    circle#circle1_medium {
        cx: 55;
    }
    circle#circle1 {
        cx: 55;
    }
    path#Line {
        d: path("M 40 145 L 722 145");
    }
    circle#circle1_hover_surface {
        cx: 55;
    }

    .testo {
        width: 100%;
    }
        #menu ul.submenu {
        display: block;
        align-items: baseline;
        justify-content: space-around;
    }
    .submenu .imgSvg {
        position: relative;
        display: none;
    }
    #btPrice {
        margin-bottom: 20px;
    }
    #valueCreation .three.columns {
        width: 100%;
        margin-left: 0%;
    }
    #header a.button.green {
        min-width: 265px;
        font-size: 16px;
    }
    .cardPricing {
        width: 80%;
        margin: auto;
    }
    .caption {
        background-color: rgba(0, 0, 0, 0.7);
        position: relative;
        z-index: 999;
        width: 80%;
        right: 0px;
        padding: 10%;
        text-align: left;
        top: 0%;
        transform: translateY(0%);
    }

    .logo a {
        display: inline-block;
        vertical-align: middle;
        width: 190px;
    }

    #menu {
        overflow: hidden;
        height: 0;
        width: 100%;
        left: 0;
        top: 75px;
        margin: 0;
        position: fixed;
        z-index: 2;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        background-color: rgba(35, 35, 35, 1);
    }

        #menu a.button {
            /* border: 2px solid;
            border-radius: 40px; */
            display: inline-block;
            vertical-align: middle;
            min-width: 270px;
            text-align: center;
            line-height: 50px;
            font-family: 'proximanova-semibold-webfont';
            letter-spacing: 2px;
            font-size: 19px;
        }

        #menu .valign-center.right {
            text-align: center;
        }

        #menu ul li {
            display: block;
            margin-bottom: 30px;            
        }
    
        #menu #btnLogin{
            margin: 0px 0px 30px;
            color: black;
        }

    #buttonExt {
        display: block;
        margin-left: 0px;
        margin-top: 30px;
    }

    .mobile {
        display: block !important;
    }

    .mobileInline {
        display: inline-block !important;
    }

    br.mobile, img.mobile {
        display: inline-block !important;
    }

    .desktop, br.desktop, img.desktop {
        display: none !important;
    }

    button.hamburger.hamburger--spin.mobileInline {
        margin-top: 10px;
    }

    #menu ul li a {
        color: white;
        font-size: 27px;
        line-height: 35px;
        cursor: pointer;
        letter-spacing: 3px;
    }

    #why .row {
        display: block;
    }

    .boxText {
        margin-bottom: 20px;
    }

    .quote {
        margin-left: 0px;
    }

    .solution {
        margin-left: 0px;
    }

    .logoTrusted {
        width: 231px !important;
        margin-left: 0%;
    }



    footer .primaColonna {
        /* text-align: center; */
        margin-bottom: 25px;
    }

    footer img {
        margin-left: auto;
        margin-bottom: 40px;
    }

    .six.columns.left.secondColumn {
        width: 50%;
    }
    footer p {
        color: white;
        margin-bottom: 30px;
        font-size: 16px;
        font-family: 'proximanovalight';
        letter-spacing: 1px;
    }
    .newsletter {
        margin-top: 30px;
    }
    #solutions .focusSml {
        margin-top: 100px;
    }

    footer .three.columns, footer .four.columns {
        width: 100%;
    }

    #pricing .focusSml {
        max-width: 100%;
    }

	button.hamburger.hamburger--spin.mobileInline {
		margin-top: 10px;
		min-width: 90px;
	}
    .events .three.columns{
        margin: 40px auto;
        float: none;
    }
    .arrowColumn{
        display: none;
    }
    .singleEvent img{
        margin-bottom: 40px;
    }
    .resources{
        padding: 0 50px;
    }
}