/*------------------------------------------------------------------------*/
/*  1500px                                                                */
/*------------------------------------------------------------------------*/
@media only screen and (max-width : 1440px) {

	body {
		font: normal 14px/20px "Neue Montreal";
	}

	h1 { font: 500 60px/60px "Neue Montreal"; }
	h2 { font: 500 36px/40px "Neue Montreal"; }
	h3 { font: 500 36px/40px "Neue Montreal"; }

	.container {
		width: 1080px;
	}

	header {
	    height: 80px;
	}
	header .logo img {
		height: 30px;
		margin: 5px auto 0 auto;
	}
	header .left li {
		margin: 0 25px 0 0;
	}
	header .right li {
		margin: 0 0 0 25px;
	}
	header ul li a {
		font: 500 12px/40px "Neue Montreal";
	}
	header .button_menu {
		padding: 0 25px;
	}

	.icon_wpp {
		right: 20px;
		bottom: 20px;
	}

	.icon_wpp img {
		width: 90px;
	}

	section#featured .button {
		font: 500 12px/50px "Neue Montreal";
		background-size: auto 40px;
		margin: 20px 0 0 0;
		padding: 0 70px 0 25px;
	}

	.marquee {
	    height: 100px;
	}
	.marquee ul.flex li img {
	    height: 80px;
	}
	.marquee-h .marquee_wrapper {
	    height: 100px;
	}

	section#speech {
	    padding: 60px 230px;
	}

	section#speech .left {
	    width: 44%;
	}
	section#speech .right {
	    width: 54%;
	}

	section#speech .title h2 {
	    font: 500 30px / 34px "Neue Montreal";
	}
	section#speech .stats ul li h2 {
	    font: 500 40px / 46px "Neue Montreal";
	}
	section#speech .stats ul li p {
	    font-size: 16px;
	    line-height: 20px;
	}

	section#about {
		width: 900px;
		-webkit-border-radius: 20px;
				border-radius: 20px;
		padding: 50px;
	}
	section#about .text {
		padding: 0;
	}
	section#about .title h2 {
	    font: 500 48px / 54px "Neue Montreal";
	}
	section#about .title img {
		-webkit-border-radius: 20px;
				border-radius: 20px;
	}

	section#method {
		margin: 90px 0;
	}
	section#method .right .image {
		width: 340px;
    	height: 580px;
		-webkit-border-radius: 20px;
				border-radius: 20px;
	}
	section#method .button {
		font: 500 12px/50px "Neue Montreal";
		background-size: auto 40px;
		margin: 20px 0 0 0;
		padding: 0 70px 0 25px;
	}
	section#method #faq ul li .tag {
		width: 50px;
		font: 500 40px/90px "Neue Montreal";
	}
	section#method #faq ul li .question {
		font: 500 26px/90px "Neue Montreal";
	}
	section#method #faq ul li .answer {
		padding: 0;
	}
	section#method #faq ul li.active .answer {
		padding-bottom: 30px;
	}
	section#method #faq ul li .answer ul li {
		padding: 0 0 0 10px;
	}
	section#method #faq ul li .answer ul li::after {
		width: 4px;
		height: 4px;
		top: 8px;
	}
	section#method #faq ul li .more {
		width: 50px;
		height: 50px;
		top: 20px;
	}
	section#method #faq ul li .more:before,
	section#method #faq ul li .more:after {
		width: 14px;
	    left: calc(50% - 7px);
	}

	section#cases {
		width: 900px;
		-webkit-border-radius: 20px;
				border-radius: 20px;
		padding: 60px 0;
	}

	section#cases .videos {
		margin: 40px 0 0 0;
	}
	section#cases video {
		width: 240px;
		height: 390px;
		-webkit-border-radius: 20px;
				border-radius: 20px;
		margin: 0 15px;
	}

	section#contact {
		width: 1020px;
		-webkit-border-radius: 20px;
				border-radius: 20px;
		margin: 90px auto;
		padding: 60px;
	}
	section#contact .button {
		font: 500 12px/50px "Neue Montreal";
		background-size: auto 40px;
		padding: 0 70px 0 25px;
	}

	footer {
		width: 900px;
	}
	footer .infos img {
		height: 60px;
	}
	footer .infos .right li {
		margin: 0 0 0 10px;
	}
	footer .infos .right li img {
		width: 50px;
		height: 50px;
	}
	footer .copyright {
		margin: 20px 0 0 0;
	}
	footer .copyright span {
		font-size: 11px;
		line-height: 60px;
	}

}

/*------------------------------------------------------------------------*/
/*  440px                                                                 */
/*------------------------------------------------------------------------*/
@media only screen and (max-width : 440px) {

	h1 { font: 500 48px/48px "Neue Montreal"; }
	h2 { font: 500 22px/26px "Neue Montreal"; }
	h3 { font: 500 22px/26px "Neue Montreal"; }

	.container {
        width: 100%;
    }

    header {
        height: 120px;
    }
	header .left,
	header .right {
		display: none;
	}

    header .logo img {
    	position: relative;
        margin: 0;
    }

    .icon_wpp {
        right: 15px;
        bottom: 15px;
    }

    section#featured {
	    height: 600px;
	}

	section#featured .title {
	    width: 100%;
		margin: 60px 0 0 0;
	    padding: 0 60px 0 0;
	}

	.marquee ul.flex li img {
	    height: 100px;
	    margin: 0;
	}

	section#speech {
        padding: 60px 30px;
    }
	section#speech .title {
	    width: 100%;
	}
	section#speech .left,
	section#speech .right {
        width: 100%;
        padding: 0;
    }
    section#speech .right {
        margin: 30px 0 0 0;
    }
	section#speech video {
	    -webkit-border-radius: 20px;
	    border-radius: 20px;
	}

	section#speech .stats {
	    width: 100%;
	    margin: 30px 0 0 0;
	}
    section#speech .stats ul li h2 {
        font: 500 24px / 28px "Neue Montreal";
    }
    section#speech .stats ul li p {
        font-size: 14px;
        line-height: 18px;
    }
    section#speech .stats ul li {
	    padding: 0 15px;
	}

    section#about {
        width: calc(100% - 60px);
        padding: 30px;
    }
	section#about .title,
	section#about .text {
	    width: 100%;
	    float: none;
	    padding: 0;
	}

	section#about .title h2 {
        font: 500 34px / 40px "Neue Montreal";
    }
	section#about .left img {
	    margin: 30px 0;
	}

	section#about .left,
	section#about .right {
	    width: 100%;
	    float: left;
	    padding: 0;
	}
    section#method {
        margin: 60px 0;
    }
	section#method .left,
	section#method .right {
	    width: 100% !important;
	    float: none;
	    display: inline-block;
	}
	section#method #faq {
	    margin: 15px 0 60px 0;
	}

	section#method #faq ul li .tag {
        width: 40px;
        font: 500 34px / 90px "Neue Montreal";
    }
    section#method #faq ul li .question {
        font: 500 19px / 90px "Neue Montreal";
    }
	section#method #faq ul li.active .answer {
	    max-height: 780px !important;
	}
    section#method .right img {
        width: 100%;
    }

    section#cases {
        width: 100%;
        background: #0f1921 url(../img/bg_pattern.png) no-repeat bottom center;
		background-size: auto 60%;
        -webkit-border-radius: 0px;
        		border-radius: 0px;
        padding: 40px 30px 20px 30px;
        display: inline-block;
    }
	section#cases .videos {
	    display: inline-block;
	}
    section#cases video {
        width: 290px;
        height: 470px;
        margin: 0 0 30px 0;
    }

	section#contact {
        width: calc(100% - 60px);
        margin: 60px auto;
        padding: 30px;
    }
	section#contact .title {
	    width: 100%;
	    float: none;
	}
	section#contact .button {
		float: none;
	    margin: 20px 0 0 0;
	}

    footer {
        width: 100%;
    }
	footer .infos .left,
	footer .infos .right {
	    width: 100%;
	    float: none;
	}
	footer .infos {
	    width: 100%;
	    display: flex;
	    align-items: center;
	    flex-direction: column;
	}
	footer .infos a img {
	    display: block;
	    margin: auto;
	}
	footer .infos .right ul {
	    display: flex;
	    justify-content: center;
	    float: none;
	    margin: 30px 0 0 0;
	}
	footer .copyright {
        text-align: center;
        margin: 30px 0 0 0;
        padding: 0 100px;
    }
	footer .copyright span {
        font-size: 11px;
        line-height: 16px;
        display: inline-block;
        margin: 20px 0;
    }

}