/*MOBILE*/

p {
    font-family: 'gilroylight', sans-serif;
    font-size: 14pt;
    line-height: 1.45;
}

@keyframes fadein {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Firefox < 16 */

@-moz-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Internet Explorer */

@-ms-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Opera < 12.1 */

@-o-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

body,
h1,
h2,
h3,
h4,
h5,
p,
span,
div, img {
    animation: fadein 2s;
    transition: all .5s ease-out;
}

.desktop, .mobile {
    animation: fadein 1s;
}

h1,
h2,
h3,
h4,
h5 {
    margin: 0;
}

aside {
    height: 200px;
}

.desktop {
    display: none;
}

.mobile {
    margin: 0 auto;
    width: 26vw;
}

.rams {
    width: 39vw;
}

section {
    margin: 6vh 0;
    display: grid;
}

header {
    padding: 6%;
    text-align: center;
    margin-bottom: 4vh;
}

h1 {
    font-family: 'gilroylight', sans-serif;
    font-size: 18pt;
}

h2 {
    font-family: 'arista_profat', sans-serif;
    font-size: 37.3pt;
}

h3 {
    font-family: 'gilroylight', sans-serif;
    font-size: 15pt;
}

.header_left {
    border-top: 3px solid black;
    margin-right: 90px;
    width: 40px;
    display: inline-block;
    position: relative;
    top: -30px;
}

.header_right {
    border-top: 3px solid black;
    margin-left: 90px;
    width: 40px;
    display: inline-block;
    position: relative;
    top: -30px;
}

h4,
h5 {
    font-family: 'arista_profat', sans-serif;
    font-size: 26pt;
    text-align: center;
}

.line {
    margin: 20px auto 30px auto;
    background-color: black;
    width: 50px;
    height: 3pt;
}

blockquote {
    padding: 6%;
    margin: 0;
}

/*TABLET*/

@media screen and (min-width:800px) {
    .mobile {
        display: grid;
        margin-bottom: 6%;
        width: 35%;
    }

    .rams {
        width: 52%;
    }

    .line {
        margin: 20px 0 30px 0;
    }

    h1 {
        font-size: 38pt;
    }

    h2 {
        font-size: 70pt;
    }

    h3 {
        font-size: 23pt;
    }

    section {
        display: block;
        margin: 0 12% 12% 12%;
        position: relative;
    }

    blockquote {
        border: black solid 4pt;
    }

    h4 {
        font-size: 4.8vw;
    }

    h4, h5, p {
        text-align: left;
    }

    .header_left {
        width: 80px;
        margin-right: 140px;
        top: -42px;
    }

    .header_right {
        width: 80px;
        margin-left: 140px;
        top: -42px;
    }
}

@media screen and (min-width:1020px) {
    header {
        padding: 4%;
    }
    h4,
    h5 {
        font-size: 40pt;
    }
    body {
        font-size: 15pt;
    }
    .w3 .desktop {
        top: 40vh;
    }
    .mobile {
        width: 400px;
    }
    .rams {
        width: 550px;
    }
}

/*DESKTOP*/

@media screen and (min-width:1500px) {
    header {
        margin-bottom: 200px;
    }

    .mar-top {
        margin-top: 30vh;
    }

    .mar-bot {
        margin-bottom: 20vh;
    }
    
    .mar-ext {
        margin-top: 40vh;
    }

    .desktop {
        display: block;
        width: 600px;
    }

    .mobile {
        display: none;
    }

    .w1 blockquote {
        display: block;
        position: relative;
        margin-left: 50%;
    }

    .w1 .desktop {
        position: absolute;
        left: 6vw;
        top: -15vh;
        z-index: 2;
    }

    .w2 blockquote {
        position: relative;
        margin-left: 16%;
        margin-right: 33%;
    }

    .w2 .desktop {
        position: absolute;
        top: -10vw;
        right: -2vw;
        z-index: 2;
    }

    .w3 blockquote {
        margin-left: 33%;
        margin-right: 16%;
        display: block;
        position: relative;
    }

    .w3 .desktop {
        position: absolute;
        right: -4vw;
        top: 32vh;
        z-index: 2;
    }

    .w4 blockquote {
        margin-right: 41.7%;
        display: block;
        position: relative;
    }

    .w4 .desktop {
        position: absolute;
        left: 35vw;
        top: 5vw;
        z-index: 2;
        margin-bottom: 0;
    }

    .w5 blockquote {
        margin-left: 25%;
        margin-right: 16.7%;
        display: block;
        position: relative;
    }

    .w5 .desktop {
        position: absolute;
        right: 36vw;
        top: -17vw;
        z-index: 2;
    }

    .w4 .desktop {
        right: -5vw;
    }
    
    .r0 {
        margin: -10% 25% 0 25%;
    }
    
    .rams2 {
        position: relative;
        display: grid;
        margin: 0 auto;
        top: 6vh;
    }
    
    .mar-env {
        margin-top: -1%;
    }
    
    .mar-use {
        margin-top: 16%;
    }

}

@media screen and (min-width: 1700px) {
    .w1 .desktop {
        left: 11vw;
    }

    .w2 .desktop {
        right: 0vw;
    }

    .w3 .desktop {
        right: 0vw;
    }

    .w4 .desktop {
        left: 37vw;
    }

    .w5 .desktop {
        right: 38vw;
    }
    
    .w5 {
        margin-top: 25%;
    }
}

@media screen and (min-width: 1900px) {
    .w1 .desktop {
        left: 15vw;
    }

    .w2 .desktop {
        right: 1.5vw
    }

    .w3 .desktop {
        right: 1vw;
        top: 32vh;
    }

    .w4 .desktop {
        position: absolute;
        left: 38wv;
    }

    .w5 .desktop {
        right: 38vw;
        top: -15vw;
    }
    
    .mar-time {
        margin-top: 30%;
    }
    
    .mar-lit {
        margin-top: 20%;
    }
}

@media screen and (min-width: 2050px) {
    .w3 .desktop {
        top: 25vh;
    }
    .mar-time {
        margin-top: 25%;
    }
}

@media screen and (min-width: 2200px) {
    .w1 .desktop {
        left: 18.5vw;
    }

    .w2 .desktop {
        right: 7vw;
    }

    .w4 .desktop {
        position: absolute;
        right: -4vw;
        top: 2vw;
    }

    .w5 .desktop {
        right: 40vw;
        top: -12vw;
    }
}