@charset "utf-8";
/* CSS Document */

body {margin: 0; padding: 0; font-family: 'Roboto', sans-serif;}

.bluebg {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0448d2+0,002878+100 */
background: #0448d2; /* Old browsers */
background: -moz-linear-gradient(left, #0448d2 0%, #002878 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #0448d2 0%,#002878 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #0448d2 0%,#002878 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0448d2', endColorstr='#002878',GradientType=1 ); /* IE6-9 */
color: #fff;}

.maincontent {width: calc(100% - 100px); padding: 0 50px; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.maincontent > img {width: 600px;}
.maincontent > p {margin-top: 100px; font-size: 48px; font-weight: 400; width: 100%; text-align: center;}

footer {width: 100%; display: flex; justify-content: center; background-color: #ffffff; bottom: 0; position: fixed;}
footer > .section {width: 40%; padding: 15px 0; display: flex; justify-content: center; align-items: center;}
footer > .section > a > img {margin-right: 10px; cursor: pointer;}




/**responsive**/
@media (min-width: 480px) and (max-width: 767px) {
.maincontent > img {width: 300px;}
.maincontent > p {font-size: 32px;}
footer > .section > span {display: none;}
footer > .section > a > img {margin-right: 0;}
}

@media (max-width: 480px) {
.maincontent > img {width: 300px;}
.maincontent > p {font-size: 24px;}
footer > .section > span {display: none;}
footer > .section > a > img {margin-right: 0;}
}