*{margin: 0; padding: 0; outline: 0; border: 0}

img, video{max-width: 100%; vertical-align: bottom}

body{font: 400 18px/42px 'Poppins', sans-serif; letter-spacing: 0.5px; background: #101820; /* background: #414042 url(images/dce-background-pattern.svg) top right no-repeat; */ color: #f7f7f7}


h1{font: 400 16px/32px 'Poppins', sans-serif; padding: 0 0 20px; max-width: 400px}
h2{font: 500 18px/30px 'DINPro', sans-serif; color: #f65f25; padding: 40px 0 10px}
h3{font: 700 26px/42px 'DINPro', sans-serif; padding: 0 0 50px; max-width: 350px}
h4{font: 600 18px/30px 'DINPro', sans-serif; padding: 40px 0 20px}

p{font: 400 18px/42px 'Poppins', sans-serif; padding: 0 0 20px}

.container{max-width: 1600px; margin: 0 auto; padding: 0 40px}
.wrapper{display: table; height: 100%}
.inner{display: table-cell; vertical-align: middle}

header .logo{max-width: 140px; padding: 20px 0}


main img, main video{border-radius: 6px}

main .feature:after, main .showcase:after{content: ''; clear: both; display: block}

/*main .feature{padding: 60px 0 120px}*/
main .feature{padding: 20px 0 60px}

main ul{list-style: none; position: relative; float: left; width: 48%}
main ul ul{float: none; width: 100%}

main ul a{position: relative; display: block}
main a span{position: absolute; height: 100%; width: 100%; opacity: 0; border-radius: 6px; transition: 0.5s}
main a:hover span{opacity: 1; transition: 0.5s}

main .intro{float: right; width: 48%; padding: 3% 0 0}
main .intro h1{font: 500 46px/56px 'DINPro', sans-serif}
main .intro p{max-width: 550px}

/*main .showcase{padding: 100px 0; background: #f7f7f7; color: #414042}*/
main .showcase{padding: 60px 0 0; background: #f7f7f7; color: #414042}


main .showcase ul{float: none; width: 100%}
main .showcase ul li{float: left; width: 48%; margin: 0 0 80px}
main .showcase ul li:nth-child(even){float: right; width: 48%}
main .showcase ul li ul li{float: none !important; width: 100% !important; margin: 0}


.launch{font: 400 14px/30px 'Poppins', sans-serif; background: url(images/icon-arrow.svg) top right no-repeat; color: #00c7c1; text-decoration: none; text-transform: uppercase; padding-right: 40px; display: inline-block !important; transition: 0.3s}
.launch:hover{opacity: 1; padding-right: 50px}


/*.about{padding: 100px 0; color: #414042; background: #fff; clear: both}*/
.about{padding: 60px 0; color: #414042; background: #fff; clear: both}

.about p{max-width: 1150px}

.about ul{font: 400 16px/30px 'Poppins', sans-serif; list-style: none; float: none; width: 100%}
.about ul li{padding: 0 0 10px}

.about a{color: #00c7c1; text-decoration: none}
.about a:hover{text-decoration: underline}


.swiper-container{padding: 0 0 80px !important; margin: -80px auto 0 !important; display: none; background: #f7f7f7; color: #414042}
.swiper-container:before{content: ''; width: 40px; height: 100%; background: #f7f7f7; position: absolute;  left: 0; z-index: 2}
.swiper-container .swiper-wrapper{padding: 0 0 0 40px}
.swiper-container .swiper-wrapper .swiper-slide img{border-radius: 6px}

footer{background: #101820; /*background: #414042;*/ color: #f7f7f7; padding: 80px 0}
footer:after{content: ''; display: block; clear: both}

footer h4{padding: 0 0 20px}
footer p{font: 400 14px/34px 'Poppins', sans-serif}
footer a{color: #fff; text-decoration: none}

footer .fineprint{float: left; width: 50%; max-width: 600px}
footer .links{float: right; width: 50%; text-align: right}

footer .links ul{list-style: none}
footer .links ul li{float: right; padding: 0 0 0 5px}

footer .links ul li:last-child{clear: both; margin: 30px 0 0; line-height: 34px}


footer .tafe{max-width: 300px; float: right; clear: both; margin: 40px 0 0}


@media(max-width: 1399px){
    
    /*main .intro{padding: 0}*/
    p{font: 400 18px/38px 'Poppins', sans-serif}
    
}

@media(max-width: 1199px){
    
    main .intro{float: none; width: 100%} 
    main .intro p{max-width: 700px}
    main .feature ul{float: none; width: 100%; margin: 80px 0 0}
    
}

@media(max-width: 999px){
    
/*    h3{padding: 0 0 20px}*/
    
    main .showcase h2{padding: 0 0 10px}
    main .showcase ul{display: none}
    .swiper-container{display: block}
    
    main a span{display: none}
    
}

@media(max-width: 799px){
    
    footer .tafe{float: left}
    footer .fineprint, footer .links{width: 100%; float: none; text-align: left}
    footer .links ul li{float: left}
    
}

@media(max-width: 599px){
    
    body{font: 400 16px/36px 'Poppins', sans-serif; background-size: 350px} 
    p{font: 400 16px/36px 'Poppins', sans-serif; padding: 0 0 20px}
    
    header .logo{max-width: 100px}
    
    .container{padding: 0 20px}
    
    .swiper-container:before{width: 20px}
    .swiper-container .swiper-wrapper{padding: 0 0 0 20px}
    .swiper-container article h1{max-width: 250px}
    
    main .feature ul{margin: 50px 0 0}
    
    main .intro h1{font: 500 34px/46px 'DINPro', sans-serif}
    
    p{font: 400 16px/36px 'Poppins', sans-serif}
    
    .about ul{font: 400 14px/26px 'Poppins', sans-serif}
    
}