@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,600&display=swap');

html, body {
    margin: 0px;
    padding: 0px;
    font-family: Montserrat, sans-serif;
    background: #ffffff;
}

section {
    width: 100%;
    padding: 0px;
    overflow: hidden
}

section .inner {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 90%;
    max-width: 1800px;
    margin: 0px auto;
    padding: 30px;
}

.content {
    position: relative;
    width: 40vw;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px 0px;
}

h1 {
    color: #2f2f2f;
    font-size: 1.9vw;
    line-height: 3.2vw;
    font-weight: 500;
}

p {
    color: #2f2f2f;
    font-size: 1.3vw;
    line-height: 2.6vw;
    font-weight: 300;
}

p span {
    position: relative;
    display: inline-block;
}

p span:after {
    content: "";
    display: none;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #c6c6c6;
    left: 0px;
    bottom: 2px;
}

.content a {
    display: inline-block;
    text-decoration: none;
    font-weight: 500;
    font-size: 1.3vw;
    padding: 5px 20px;
    color: #fff;
    border-radius: 10px;
    
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#90007b+0,6671d5+100 */
    background: #90007b; /* Old browsers */
    background: -moz-linear-gradient(left,  #90007b 0%, #6671d5 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  #90007b 0%,#6671d5 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  #90007b 0%,#6671d5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#90007b', endColorstr='#6671d5',GradientType=1 ); /* IE6-9 */
    
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.content a:hover {
    transform: scale(1.05);
}

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

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

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

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

.logo {
    position: relative;
    margin: 0px;
    text-align: left;
    width: 80%;
    max-width: 300px;
}

.logo img {
    width: 100%;
}

.sectors {
    position: fixed;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: bottom -30px right 0px;
    -webkit-background-size: 800px;
    background-size: 48vw;
    background-image: url(images/sectors.png);
    bottom: 0px;
}


/*RESPONSIVE*/
@media all and (max-width: 850px) and (min-width: 0px) {
    
    .content {
        width: 100%;
    }
    
    h1 {
        font-size: 3vw;
        line-height: 6vw;
    }
    
    p {
        font-size: 2vw;
        line-height: 4vw;
    }
    
    .content a {
        font-size: 2.6vw;
    }
    
    .sectors {
        position: relative;
        height: 60vw;
        width: 100%;
        -webkit-background-size: contain;
        background-size: contain;
        background-position: bottom -20px center;
    }
    
}

@media all and (max-width: 550px) and (min-width: 0px) {
    
    h1 {
        font-size: 5vw;
        line-height: 10vw;
    }
    
    p {
        font-size: 4vw;
        line-height: 8vw;
    }
    
    .content a {
        font-size: 20px;
    }
    
}

@media all and (max-width: 400px) and (min-width: 0px) {
    
    .content a {
        font-size: 4vw;
    }
    
}