@font-face {
    font-family: 'roboto';
    src: url('./font/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'roboto-bold';
    src: url('./font/Roboto-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'roboto-condensed';
    src: url('./font/RobotoCondensed-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'roboto-condensed-bold';
    src: url('./font/RobotoCondensed-Bold.ttf') format('truetype');
}

body {
    background-color: #121b20;
    margin: 0;
    padding-bottom: 1.5rem;
}

.gonggo {
    color: #FFBF00;
    font-family: roboto-bold;
}

.image {
    width: 100%;
    height: 25rem;
    background: url('./images/spiderweb-1.jpg') center center no-repeat;
    background-size: cover;
    position: relative;
}

.image > .caption {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;

    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;

    padding-bottom: 2rem;
    padding-left: 30%;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.image > .caption > .header {
    font-family: roboto-bold;
    color: #FFBF00;
    font-size: 4.5rem;
    line-height: 150%;
}

.image > .caption > .content,
.image > .caption > .slogan {
    font-family: roboto;
    color: white;
    font-size: 1.75rem;
    margin-left: 5%;
    line-height: 150%;
}

.image > .caption > .slogan {
    color: #FFDF01;
}

.proposition {
    width: 100%;

    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;

    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;

    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;

    padding: 0 2rem;
    box-sizing: border-box;
}

.proposition > .value {
    -ms-align-self: stretch;
    -webkit-align-self: stretch;
    align-self: stretch;

    width: 20%;
    padding: 0.5rem;
    padding-top: 7.5rem;
    margin: 0 1rem;
    box-sizing: border-box;
}

.proposition > .value.resources {
    background: url('./images/Web-100.png') 50% 0.5rem no-repeat;
    background-size: auto;
}

.proposition > .value.api {
    background: url('./images/Virtual-Apps-100.png') 50% 0.5rem no-repeat;
    background-size: auto;
}

.proposition > .value.deploy {
    background: url('./images/Branch-Engineering-100.png') 50% 0.5rem no-repeat;
    background-size: auto;
}

.proposition > .value > .header {
    text-align: center;
    font-family: roboto-bold;
    font-size: 1.25rem;
    color: white;
    padding: 0.5rem 0;
    text-transform: uppercase;
}

.proposition > .value > .content {
    text-align: center;
    font-family: roboto;
    font-size: 1rem;
    color: white;
    padding: 0.5rem 0;
    text-align: justify;
    line-height: 150%;
}

.download {
    width: 100%;

    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;

    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;

    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;

    margin-top: 1rem;
    padding: 0 2rem;
    box-sizing: border-box;
}

.download > .header {
    font-family: roboto;
    color: white;
    font-size: 1.5rem;
    line-height: 150%;
    width:60%;
}

.download > .content {
    margin-top: 0.5rem;
    width:60%;
}

.download > .content > .entry > a {
    font-family: roboto;
    color: #f1e5ac;
    font-size: 1rem;
    line-height: 150%;
}

.team,
.developer,
.customer, 
.sponsor {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;

    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;

    margin-top: 2rem;
}

.team > .header, 
.developer > .header,
.customer > .header, 
.sponsor > .header {
    text-align: center;
    font-family: roboto-bold;
    font-size: 1.25rem;
    color: #FFBF00;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.team > .content, 
.developer > .content,
.customer > .content, 
.sponsor > .content {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;

    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;

    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.customer > .content {
	gap: 1em;
}

.team > .content > .box,
.developer > .content > .box,
.customer > .content > .box,
.sponsor >.content >.box {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;

    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;

    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;

    margin: 1rem 2rem;
}

.customer > .content > .box {
	gap: 0.75em;
	flex: none;
	padding: 0rem 1rem;
	max-width: 85%;
}

.developer > .content > .box {
    max-width: 175px;
}

.team > .content > .box {
    max-width: 80%;
}

.sponsor > .content > .box {
    max-width: 50%;
}

.customer > .content >.box > img {
	height: 5.625rem; /*90 px*/
}

.sponsor > .content > .box > img {
    margin-bottom: 1rem;
}

.team > .content > .box > .name,
.developer > .content > .box > .name,
.customer > .content > .box > .name,
.sponsor > .content > .box > .name {
    font-family: roboto;
    font-size: 1.15rem;
    color: white;
    text-align: center;
    line-height: 120%;
}

.team > .content > .box > .photo {
    margin-bottom: 0.5rem;
    width: 300px;
    height: 200px;
}

.team > .content > .box > .attribute {
    font-family: roboto;
    font-size: 0.9rem;
    color: white;
    text-align: center;
    line-height: 120%;
    margin-bottom: 0.5rem;
}

.team > .content > .box > .attribute a {
    color: #c6eae3;
}

.team > .content > .box > .photo.penguin {
    background: url('./images/penguin.jpg') center center no-repeat;
    background-size: cover;
}

.developer > .content > .box > .photo {
    margin-bottom: 1rem;
    width: 150px;
    height: 150px;
}

.developer > .content > .box > .photo.abdulyadi {
    background: url('./images/abdulyadi-2.jpg') center center no-repeat;
    background-size: cover;
}

.developer > .content > .box > .photo.hersam {
    background: url('./images/hersam-2.jpg') center center no-repeat;
    background-size: cover;
}

.customer >.content > .box > .photo.yokohama {
    background: url('./images/yokohama.jpg') center center no-repeat;
}

/* start of large tablet styles */
@media screen and (max-width: 991px) {
    .proposition > .value {
        width: 40%;
    }
}

/* start of medium tablet styles */
@media screen and (max-width: 767px) {
    .image > .caption {
        padding-left: 25%;
    }

    .image > .caption > .content,
    .image > .caption > .slogan {
        font-size: 1.5rem;
    }

    .proposition > .value {
        -ms-align-self: center;
        -webkit-align-self: center;
        align-self: center;

        width: 80%;
        margin: 0;
    }

	.customer > .content >.box > img {
		height: 4rem;
	}
}

/* start of phone styles */
@media screen and (max-width: 400px) {
    .proposition > .value {
        padding-top: 6rem;
    }

    .proposition > .value.resources {
        background-size: 5rem 5rem;
    }

    .proposition > .value.api {
        background-size: 5rem 5rem;
    }

    .proposition > .value.deploy {
        background-size: 5rem 5rem;
    }

    .image {
        height: 15rem;
    }

    .image > .caption {
        padding-left: 20%;
    }

    .image > .caption > .header {
        font-size: 2rem;
    }

    .image > .caption > .content,
    .image > .caption > .slogan {
        font-size: 1.05rem;
    }

    .proposition > .value > .header {
        font-size: 1.15rem;
    }

    .proposition > .value > .content {
        font-size: 0.95rem;
    }

    .developer > .content > .box {
        margin-left: 1rem;
        margin-right: 1rem;
        max-width: 125px;
    }

    .team > .content > .box > .photo {
        width: 200px;
        height: 133px;
    }

    .developer > .content > .box > .photo {
        width: 100px;
        height: 100px;
    }

    .team > .content > .box > .name,
    .developer > .content > .box > .name,
    .customer > .content > .box > .name {
        font-size: 0.9rem;
    }

    .team > .content > .box > .attribute {
        font-size: 0.7rem;
    }

	.customer > .content >.box > img {
		height: 3.75rem;
	}
}

.sawang {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;

    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;

    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;

    width: 100%;
    padding: 1rem 0;
}

.sawang >.anim {
    width: 50rem;
}

/* start of large tablet styles */
@media screen and (max-width: 991px) {}

/* start of medium tablet styles */
@media screen and (max-width: 767px) {
    .sawang > .anim {
        width: 90%;
    }
    
    .sponsor > .content > .box > img {
        max-width: 70%;
    }
}

/* start of phone styles */
@media screen and (max-width: 400px) {
    .sawang > .anim {
        width: 90%;
    }

    .sponsor > .content > .box > img {
        max-width: 80%;
    }
}