@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;700&display=swap');


html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,
footer, header, menu, nav, section, summary, time, mark, audio, video{
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
}

article, aside, details, figcaption, figure, footer, header, menu, nav, section{ display:block; }

body {
    text-align: center;
    min-width: 1000px;
    overflow-x: hidden;
    font: 13px/1.231 'Assistant';
    *font-size: small;
    font-weight: 400;
}

*{ outline:0 none }

*{ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }

::-moz-selection{ background:#434173; color:#fff; text-shadow:none; }

::selection{ background:#434173; color:#fff; text-shadow:none; }

strong{font-weight:700;}

hr{ background-color:transparent; border:0;}

.desktop-only{display: inline-block;}
.thanks-text.mobile-only,
.mobile-only{display: none;}


.grid{
    width: 1200px;
    line-height: 0;
    font-size: 0;
    margin: 0 auto;
}

.link {
    color: #fff;
    text-align: center;
    font-size: 30px;
    line-height: 35px;
    font-weight: 400;
    text-decoration: none;
    
    display: inline-block;
    width: 297px;
    padding: 11px 0;
    border: 2px solid #fff;
    border-radius: 6px;
    background-color: #44ccf3;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.link:hover {
background-color: #37aacb;
}

.link span {
    font-weight: 700;
}

/*********************************************/
.banner{
    position: relative;
    z-index: 0;
    text-align: center;
    background-color: #ec494c;
    border-top: 20px solid #d20004;
    padding: 0 0 140px 0;
}

.banner h1{
    color: #fff;
    font-size: 40px;
    line-height: 30px;
    font-weight: 700;
    text-align: center;

    width: 592px;
    padding: 44px 0 33px;
    margin: auto;
}

.banner .text{
    color: #fff;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    width: 592px;
    margin: 0 auto 48px;
}

.banner .link {
    width: 249px;
}

.banner .text2 {
    color: #fff;
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    text-align: center;

    width: 100%;
    padding: 96px 300px 58px;
    margin: -48px 0 0 0;
    background-color: #d23f42;
}

.banner .text2 img {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 10px 0;
}

.video {
    background-color: #44ccf3;
}

.video iframe {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 671px;
    margin: -140px 0 0 0;
    border:6px solid #fff;
}

.video .video-text h2 {
    font-size: 30px;
    margin: 0 0 27px;
}

.video .video-text {
    color: #fff;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;

    width: 100%;
    padding: 80px 250px;
    background-color: #20778f;
}

.by{
    text-align: center;
    background-color: #fff;
}

.credits {
    text-align: left;
    padding: 34px 0;
    background-color: #44ccf3;
}

/*********************************************/

@media only screen and (max-width :1000px){
    .thanks-text.desktop-only,
    .desktop-only{display: none;}
    .mobile-text.desktop-only,
    .mobile-only{display: inline-block !important;}

    body{ 
        line-height: 0;
        min-width:320px;
    }
.grid{
    width: 100%;
    padding: 0 20px;
}

.link {
    font-size: 20px;
    line-height: 25px;
    width: 200px;
}


/*********************************************/
.banner {
    position: relative;
    z-index: 0;
    text-align: center;
    background-color: #ec494c;
    border-top: 20px solid #d20004;
    padding: 0 0 100px 0;
}

.banner h1 {
    color: #fff;
    font-size: 40px;
    line-height: 30px;
    font-weight: 700;
    text-align: center;

    width: 100%;
    padding: 44px 0 33px;
    margin: auto;
}

.banner .text {
    color: #fff;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    width: 100%;
    margin: 0 auto 48px;
}

.banner .link {
    width: 249px;
}

.banner .text2 {
    color: #fff;
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    text-align: center;

    width: 100%;
    padding: 96px 20px 58px;
    margin: -48px 0 0 0;
    background-color: #d23f42;
}

.banner .text2 img {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 10px 0;
}

.video {
    background-color: #44ccf3;
}

.video iframe {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 60vw;
    margin: -100px 0 0 0;
    border: 6px solid #fff;
}

.video .video-text h2 {
    font-size: 30px;
    margin: 0 0 27px;
}

.video .video-text {
    color: #fff;
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;

    width: 100%;
    padding: 80px 20px;
    background-color: #20778f;
}

.by {
    text-align: center;
    background-color: #fff;
}

.by img{
    width: 100%;
}

.credits {
    text-align: left;
    padding: 34px 0;
    background-color: #44ccf3;
}

}