/* Layout CSS */

body, html {
    margin:0px;
    padding:0px;
    font-family: futura-pt, sans-serif;
    font-weight:500;
}
.outer {
    position:relative;
    float:left;
    width:100%;
}
.outer .inner {
    position:relative;
    float:left;
    width:50%;
}
.outer .inner-svg {
    float:right;
}
.outer .inner-txt {
    float:left;
}
.inner svg {
    width:100%;
    height:auto;
    display:block;
}
.inner #clouds1 {
    opacity:1;
}
.inner #clouds2 {
    opacity:1;
}

/* Header */

.header {
    position:relative;
    float:left;
    width:calc(100% - 40px);
    padding:20px;
    text-align:center;
}
.header a,
.header a:visited {
    display:inline-block;
    text-decoration:none;
    text-transform:uppercase;
    font-weight:bold;
    margin:0px 10px 0px 10px; 
    color:#312782;
}
.header a:hover {
    color:#00B8F1;
}

/* Sentences */

.sentences {
    position:relative;
    float:left;
    width:100%;
    margin:0px 0px 20px 0px;
    text-transform:uppercase;
}
.sentences .sentence {
    position:relative;
    float:left;
    width:100%;
    font-size:35px;
    line-height:40px;
    text-align:center;
}
.sentences .sentence .dark {
    color:#312782;
}
.sentences .sentence .light {
    color:#00B8F1;
}

/* Content */

.content {
    position:relative;
    float:left;
    width:calc(100% - 40px);
    padding:0px 20px 0px 20px;
    text-align:center;
    color:#312782;
    display:flex;
    flex-flow:row wrap;
    justify-content:center;
}
.content .text {
    max-width:400px;
    color:#312782;
}
.content .text-long {
    max-width:630px;
    color:#312782;
}
.content .button {
    display:inline-block;
    position:relative;
    height:50px;
    border-radius:50px;
    line-height:50px;
    background-color:#FFDD00;
    color:#E5007E;
    text-transform:uppercase;
    margin:20px 0px 20px 0px;
    padding:0px 20px 0px 20px;
    transition:all linear 0.2s;
    font-weight:bold;
    text-decoration:none;
}
.content .button:hover {
    color:#FFDD00;
    background-color:#E5007E;
}
.content ul {
    list-style-type:none;
}
.content .links {
    position:relative;
    float:left;
    width:100%;
    margin:0px;
    padding:0px;
}
.content .links a {
    color:#312782;
}
.content .links a:hover {
    color:#00B8F1;
}

/* Artwork */

.artwork {
    position:relative;
    float:left;
    width:100%;
    display:flex;
    justify-content:center;
}
.artwork img {
    display:block;
    position:relative;
    float:left;
    width:100%;
    margin:80px 0px 80px 0px;
    max-width:250px;
}

/* Socials */

.sm {
    position:relative;
    float:left;
    width:100%;
    display:flex;
    flex-flow:row wrap;
    justify-content:center;
    padding:40px 0px 20px 0px;
}
.sm .icon {
    display:block;
    width:55px;
    height:55px;
    border-radius:55px;
    margin:0px 5px 0px 5px;
    border:2px solid #00B8F1;
    display:flex;
    flex-flow:row wrap;
    justify-content:center;
    align-items:center;
}
.sm .icon .inner {
    width:30px;
    height:30px;
    background-position:center center;
    background-repeat: no-repeat;
    background-size:contain;
}
.sm .icon-1 .inner { background-image:url('/site/templates/styles/img/icon-1.png'); }
.sm .icon-2 .inner { background-image:url('/site/templates/styles/img/icon-2.png'); }
.sm .icon-3 .inner { background-image:url('/site/templates/styles/img/icon-3.png'); }

/* Address */

.address {
    color:#00B8F1;
    font-weight:bold;
}

/* Form */

form {
    position:relative;
    float:left;
    width:100%;
}
form input[type=text],
form input[type=email],
form textarea {
    width:100%;
    font-family: futura-pt, sans-serif;
    background-color:#E4F6FC;
    border:none;
    padding:5px;
    margin:5px 0px 5px 0px;
    color:#00B8F1;
    padding:10px;
    border-radius:12px;
    resize: none;
}
form input[type=text]:focus,
form input[type=email]:focus,
form textarea:focus {
    background-color:#FFDD00;
    border:none;
    outline: none;
}
form input[type=submit] {
    border:none;

    height:50px;
    border-radius:50px;
    line-height:50px;
    background-color:#FFDD00;
    color:#E5007E;
    text-transform:uppercase;
    margin:20px 0px 20px 0px;
    padding:0px 20px 0px 20px;
    transition:all linear 0.2s;
    font-weight:900;
    text-decoration:none;
    max-width:200px;
    cursor: pointer;
}
form input[type=submit]:hover {
    color:#FFDD00;
    background-color:#E5007E;
}
::placeholder {
    color:#00B8F1;
}

/* Mobile Menu */

.mob-menu {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    text-align:center;
    transition:all ease-in 1.2s;
}
.mob-menu.ng-hide {

}
.mob-menu .bg {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color:#312782;

    transform:scale(1,1);
    transition:all ease-out 0.2s;
}
.mob-menu.ng-hide .bg {
    transform:scale(0,0);
    transition:all ease-in 0.2s;
}
.mob-menu a {
    font-size:25px;
    line-height:30px;
    text-transform:uppercase;
    text-decoration:none;
    color:#00B8F1;
    display:block;
    transition:all linear 0.2s;
}
.mob-menu a:hover {
    color:#FFDD00;
}
.mob-menu .flex {
    position:relative;
    top:20px;
    left:20px;
    width:calc(100% - 20px);
    height:calc(100% - 20px);

    display:flex;
    justify-content:center;
    align-items:center;

    transform:scale(1,1);
    opacity:1;
    filter: blur(0px);
    transition:all ease-out 0.2s;
}
.mob-menu.ng-hide .flex {
    transform:scale(2,2);
    opacity:0;
    filter: blur(4px);
    transition:all ease-in 0.2s;
}

/* Mobile Icon */

.mob-icon {
    position:fixed;
    top:20px;
    left:20px;
    width:30px;
    height:30px;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
}
.mob-icon .lines {
    position:absolute;
    margin:15px 0px 0px 0px;
}
.mob-icon .lines .line {
    position:absolute;
    width:30px;
    height:3px;
    background-color:#00B8F1;
    transform-origin:center center;
    transition:all ease-out 0.2s;
}
.mob-icon .lines .line_0 { top:-7px; }
.mob-icon .lines .line_1 { top:-1px; }
.mob-icon .lines .line_2 { top:5px; }
.mob-icon .lines.open .line {
    background-color:#FFDD00;
}
.mob-icon .lines.open .line_0 {
    top:0px;
    left:0px;
    transform:rotate(45deg);
}
.mob-icon .lines.open .line_1 {
    display:none;
}
.mob-icon .lines.open .line_2 {
    top:0px;
    left:0px;
    transform:rotate(-45deg);
}

/* Map */

.map {
    position:relative;
    float:left;
    width:100%;
    margin:40px 0px 20px 0px;
}
.map .aspect {
    position:relative;
    float:left;
    width:100%;
    padding-top:75%;
}
.map iframe {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}

/* Logo */

.logo {
    position:relative;
    float:left;
    width:100%;
    margin:20px 0px 40px 0px;
}

/* Media Queries */

.mob-menu {
    display:none;
}
.mob-icon {
    display:none;
}

@media(max-width:700px)
{
    .outer .inner-txt {
        width:100%;
    }
    .outer .inner-svg {
        width:calc(100% - 35px);
    }
    .sentences .sentence {
        font-size:30px;
        line-height:35px;
    }
    .mob-menu {
        display:block;
    }
    .mob-icon {
        display:block;
    }
    .header {
        display:none;
    }
}