/* X-Small devices (portrait phones, less than 576px)*/
/* No media query for `xs` since this is the default in Bootstrap*/

* {
    font-family: 'Open Sans', sans-serif;
}

.text-center { text-align:center; }
.text-left { text-align:left; }
.text-right { text-align:right; }

BODY,HTML {
    margin:0px;
    padding:0px;
}

SECTION#logo {
    background:#FED447;
    float:none;
}


SECTION#logo { 
    width:100%;
    text-align:center;
    padding-top:30px;
    padding-bottom:30px;
}

SECTION#logo IMG { 
    width:300px;
    max-width:80%;
}

SECTION#menu {
    width:100%;
    float:none;
    text-align:center;

}
SECTION#menu UL {
    margin-left:0px;
    padding-left:0px;
}

SECTION#menu LI {
    display: inline-block;
    margin-right:10px;
    margin-left:10px;
    padding-top:10px;
    transition: all .5s;
}

SECTION#menu LI A {
    background-color:#FED447;
    width:50px;
    height:50px;
    display:inline-block;
    border-radius: 50%;
    text-align:center;
    transition: all .5s;
    background-size: 90% 90%;
    background-position: center center;
}

SECTION#menu LI A.active, SECTION#menu LI A:hover {
    background-color:#000;
    box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px #000;        
}

SECTION#menu LI A SPAN {
    margin-top:5px;
    display:inline-block;
    color:#000;
    font-size:9px;
    font-weight: 700;
    margin-top:115%;
}

FOOTER {
    background:#FED447;
    padding-top:50px;
    padding-bottom:50px;
}

FOOTER SECTION.desktop {
    display:none;
}

FOOTER SECTION.responsive {
    width:90%;
    margin:auto;
    display: block;
}

FOOTER SECTION DIV { 
    text-align: center;
    padding:0px;
}

FOOTER SECTION IMG { 
    width:70px;
    vertical-align: top;
    margin-left:10px;
    margin-right:10px;
}

FOOTER SECTION ADDRESS { 
    font-size:18px;
    font-weight:600;
    text-align:center;
    margin-top:30px;
}

FOOTER SECTION SMALL { 
    clear: both;
    display: block;
    text-align:center;
    font-size:16px;
    font-weight:600;
    padding-top:30px;
}

DIV.container {
    width:90%;
    margin:auto;
    margin-top:50px;
    margin-bottom:50px;
}
DIV.container SECTION.left {
    margin-bottom:80px;
    display:block;
}
DIV.container SECTION.right {
    margin-bottom:0px;
    display:block;
}
DIV.container H1 {
    font-size:14px;
    line-height:14px;
    color:#000;
    font-weight: 900;
}

DIV.container P {
    font-size:14px;
    line-height:18px;
    color:#000;
    font-weight:600;
}

DIV.container P A {
    color:#FED447;
    transition: all .5s;
}

DIV.container P A:hover {
    color:#000;
}

DIV.container UL {
    font-size:14px;
    line-height:18px;
    color:#000;
    font-weight:600;
    /*padding-left:13px;*/
    list-style: none;
    padding: 0;
/*    margin-left: 10px;*/
}

DIV.container UL LI {
    margin-bottom:10px;
    margin-left:10px;
}

DIV.container UL LI::before {
    content: "\002D";
    font-size:16px;
    color: #000;
    position:absolute;
    transform: translate(-10px, -2px);
}

DIV.container IMG.responsive{
    width:100%;
    margin:auto;
 
}

DIV.container FIELDSET {
    border:0px none;
    display: block;
    width:600px;
    max-width:90%;
    margin:auto;
    margin-top:30px;
}
DIV.container LABEL {
    color: #000;
    font-size:13px;
    font-weight:600;
    display:block;
    margin-bottom:5px;
}
DIV.container INPUT {
    color: #000;
    font-size:14px;
    font-weight:600;
    display:block;
    width:100%;
    margin-bottom:20px;
}
DIV.container TEXTAREA {
    color: #000;
    font-size:14px;
    font-weight:600;
    display:block;
    width:100%;
    height:100px;
    margin-bottom:20px;
    resize: none;
}

DIV.container BUTTON {
    background-color: #fed447;
    border:0px none;
    color:#fff;
    padding-left:20px;
    padding-right:20px;
    padding-top:5px;
    padding-bottom:5px;
    margin:auto;
    margin-top:30px;
    display:block;
    font-size:14px;
    font-weight: 600;
    transition: all .5s;
    cursor:pointer;
}
DIV.container BUTTON:hover {
    color:#000;
}

DIV.container IMG.check {
    display:block;
    width:200px;
    max-width:50%;
    margin:auto;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    SECTION#menu LI {
        margin-right:20px;
        margin-left:20px;
    }
    SECTION#menu LI A {
        width:60px;
        height:60px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    SECTION#logo {
        width:50%;
        text-align:right;
        float:left;
    }
    SECTION#logo IMG { 
        margin-right:50px;
        display:inline-block;
    }
    SECTION#menu {
        width:50%;
        float:left;
        text-align:left;
    } 
    SECTION#menu LI {
        display: inline-block;
        margin-left:50px;
        margin-right:0px;
        padding-top:30px;
        transition: all .5s;
    }
    SECTION#menu LI A {
        background-color:#FED447;
        width:60px;
        height:60px;
        display:inline-block;
        border-radius: 50%;
        text-align:center;
        transition: all .5s;
        background-size: 90% 90%;
        background-position: center center;
    }
    
    SECTION#menu LI A.active, SECTION#menu LI A:hover {
        background-color:#000;
        box-shadow:
        0 0 0 3px #fff,
        0 0 0 6px #000;        
    }

    SECTION#menu LI A SPAN {
        margin-top:5px;
        display:inline-block;
        color:#000;
        font-size:12px;
        font-weight: 700;
        margin-top:110%;
    }

    FOOTER SECTION.desktop {
        width:900px;
        margin:auto;
        display: block;
    }

    FOOTER SECTION.responsive {
        display:none;
    }
    
    FOOTER SECTION ADDRESS { 
        width:40%;
        float:left;
        padding-top:0px;
        vertical-align: top;
        font-size:18px;
        font-weight:600;
        text-align:left;
    }
    FOOTER SECTION DIV { 
        width:40%;
        float:right;
        vertical-align: top;
        text-align: right;
    }

    FOOTER SECTION IMG { 
        width:70px;
        vertical-align: top;
        margin-left:20px;
    }

    FOOTER SECTION SMALL { 
        clear: both;
        display: block;
        text-align:center;
        font-size:16px;
        font-weight:600;
        padding-top:60px;
    }

    DIV.container {
        width:900px;
        margin:auto;
        margin-top:50px;
        margin-bottom:50px;
    }

    DIV.container SECTION.left {
        float:left;
        width:45%;
        margin-bottom:30px;
    }
    DIV.container SECTION.right {
        float:right;
        width:45%;
        margin-bottom:30px;
    }    

    DIV.container H1 {
        font-size:14px;
        line-height:14px;
        color:#000;
        font-weight: 900;
    }
    DIV.container UL {
        font-size:14px;
        line-height:18px;
        color:#000;
        font-weight:600;
    }

    DIV.container UL LI {
        margin-bottom:10px;
    }

    DIV.container IMG.responsive{
        width:100%;
        margin:auto;
    }

}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    SECTION#menu LI {
        padding-top:20px;
    }
    SECTION#menu LI A {
        width:70px;
        height:70px;
    }
    SECTION#menu LI A SPAN {
        font-size:14px;
    }
    FOOTER SECTION {
        width:1200px;
    }    
}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {

}









.breakpoint {
    position:absolute;
    right:5px;
    top:5px;
}


span.xs { display:block; }
span.sm { display:none; }
span.md { display:none; }
span.lg { display:none; }
span.xl { display:none; }
span.xxl { display:none; }


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    span.xs { display:none; }
    span.sm { display:block; }
    span.md { display:none; }
    span.lg { display:none; }
    span.xl { display:none; }
    span.xxl { display:none; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    span.xs { display:none; }
    span.sm { display:none; }
    span.md { display:block; }
    span.lg { display:none; }
    span.xl { display:none; }
    span.xxl { display:none; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    span.xs { display:none; }
    span.sm { display:none; }
    span.md { display:none; }
    span.lg { display:block; }
    span.xl { display:none; }
    span.xxl { display:none; }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    span.xs { display:none; }
    span.sm { display:none; }
    span.md { display:none; }
    span.lg { display:none; }
    span.xl { display:block; }
    span.xxl { display:none; }
}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    span.xs { display:none; }
    span.sm { display:none; }
    span.md { display:none; }
    span.lg { display:none; }
    span.xl { display:none; }
    span.xxl { display:block; }
}
