*{
    margin:0;
    padding: 0;
    position: relative;
}

.body_flow{
    overflow: hidden !important;
}

#share-buttons{
    width:100%;
    background-color: white;
    text-align:center;
    padding: 30px 0;
}

#share-buttons img {
    width: 35px;
    padding: 5px;
    border: 0;
    box-shadow: 0;
    display: inline-block;
}

a, p, h4, span{
    font-size: 16px;
    -webkit-transition: .3s;
    transition: .3s;
    text-decoration: none;
}

a{
    text-decoration: none;
    color: rgb(13, 112, 161);
    -webkit-transition: .3s;
    transition: .3s;
}

    a:hover{
        color: rgb(80, 6, 53);
        cursor: pointer;
    }

img{
    border: 0px;
}

*:focus{
    outline:none;
}

li{
    list-style-type: none;
}

h1{
    font-size: 50px;
    background: transparent;
    background: -webkit-linear-gradient(180deg, rgb(13, 112, 161) 0, rgba(16, 56, 75,1)80%);
    background: linear-gradient(180deg, rgb(13, 112, 161) 0, rgba(16, 56, 75,1)80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'sofia-pro';
    background: transparent\9; /* apply to all ie from 8 and below */
    *background: transparent;  /* apply to ie 7 and below */
    _background: transparent; /* apply to ie 6 and below */
    color: rgb(16, 56, 75)\9; /* apply to all ie from 8 and below */
    *color: rgb(16, 56, 75);  /* apply to ie 7 and below */
    _color: rgb(16, 56, 75); /* apply to ie 6 and below */
}

h2{
    font-size: 50px;
    color: rgb(13, 112, 161);
    font-family: 'sofia-pro';
}

h3{
    font-family: 'sofia-pro';
    font-size: 20px;
    color: rgb(13, 112, 161);
}

body, html{
    width:100%;
    height: auto;
    z-index:1;
    /*font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;*/
    font-family: "Century Gothic";
    background-color: white;
}

body{
    height: 100%;
    -ms-overflow-x: hidden;
    overflow-x: hidden;
}

.container{
    display: none !important;
}

.button-container{
    display: none !important;
}

#facebook{transition-delay: 0s !important;}
#twitter{transition-delay: .1s !important;}
#linkedin{transition-delay: .2s !important;}

.cookies_pop{
    position: fixed;
    display: block;
    bottom:0;
    width: calc(100% - 40px);
    background-color: rgb(0, 77, 105);
    right: 0;
    color: white;
    padding: 10px 20px;
}

    .cookies_pop p{
        display: inline-block;
        font-size: 14px;
    }


    .cookies_pop button{
        display: inline-block;
        padding: 5px 10px;
        border:none;
        background-color: white;
        color: black;
        width: 100px;
        text-align: center;
    }

/* 
    ##Device = Desktops
    ##Screen = 1281px to higher resolution desktops
*/
@media screen and (min-width: 1281px) {
    header{
        position: fixed;
        top:0;
        left:0;
        padding: 10px 50px;
        width: calc(100% - 100px);
        -webkit-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        z-index: 900;
    }
    
        .site_logo{
            height: 50px;
            display: inline-block;
        }

            .site_logo img{
                height: 100%;
            }

        .menu_toggle{
            display: none;
        }

        menu{
            position: absolute;
            display: block;
            top: 0;
            right: 0;
            height: 100%;
        }

            menu a{
                text-decoration: none;
                color: rgb(255, 255, 255);
                display: inline-block;
                padding: 20px 10px;
                top: 50%;
                font-size: 14px;
                text-transform: uppercase;
            }

                menu a:hover{
                    color: rgb(224, 120, 186) !important;
                }

                menu select{
                    background-color: transparent;
                    color: rgb(255,255,255);
                    border: none;
                    outline: none;
                    margin: 0px 20px;
                    font-size: 14px;
                    -webkit-transition: .3s;
                    transition: .3s;
                }

                    menu select option{
                        color: black;
                    }

                    menu select:hover{
                        color: rgb(224, 120, 186) !important;
                        cursor: pointer;
                    }

    .row{
        width: 100%;
        display: block;
        padding: 18vh 0;
    }

        .row span{
            display: block;
            text-align: center;
        }

        .col_3{
            display: inline-block;
            vertical-align: top;
            padding: 20px;
            width: 20%;
            margin: 40px 2%;
        }

        .col_2{
            width: 50%;
            padding: 0;
        }

        .quick_link{
            display: inline-block;
            padding:15px 30px;
            background-color: rgba(16, 56, 75,1);
            color: white;
        }

            .quick_link:hover{            
                background-color: rgb(80, 6, 53);
                color :white;
            }

    .contact_back{
        z-index: 2000 !important;
        padding:30vh 0;
    }

    #contact_head{
        font-size: 50px;
        text-transform: uppercase;
    }

        .contact_project{
            left:50%;
            -ms-transform: translate(-50%,0);
            -webkit-transform: translate(-50%,0);
            transform: translate(-50%,0);
            width: 60vw;
            padding:50px 0px;
            padding-bottom: 50px;
            text-align:center;
        }

            #mail{
                display: inline-block;
                border:none;
                font-size: 20px;
                /*color: rgb(13, 112, 161);*/
                outline: none;
                padding: 15px;
                width: 25vw;
                -webkit-transition: .4s ease-in-out !important;
                transition: .4s ease-in-out !important;
            }

            .contact_project a{
                display: inline-block;
                padding:15px 30px;
                background-color: rgb(13, 112, 161);
                color: white;
                -webkit-transition: .4s ease-in-out !important;
                transition: .4s ease-in-out !important;
            }

                .contact_project a:hover{
                    background-color: rgb(80, 6, 53);
                }

        .mail_pop{
            position:absolute;
            display:none;
            top: 100%;
            left: 50%;
            -ms-transform: translate(-50%,0);
            -webkit-transform: translate(-50%,0);
            transform: translate(-50%,0);
            padding: 20px;
            color: white;
            z-index: 9999 !important;
            transition: .3s;
            -webkit-transition: .3s;
        }

            .mail_pop:hover{
                cursor: pointer;
                background-color: rgba(80, 6, 53, 0.3) !important;
            }

    .media{
        position: fixed;
        right: -60px;
        top:50%;
        -ms-transform: translate(0,-50%);
        -webkit-transform: translate(0,-50%);
        transform: translate(0,-50%);
        background-color: white;
        display: inline-block;
        z-index: 999;
    }

        .media a{
            display: block;
            border:6px solid white;
            right: 0;
            -webkit-transition: .5s !important;
            transition: .5s !important;
        }

        .media img{
            background-color: rgb(13, 112, 161);
            width: 40px;
            -webkit-transition: .3s !important;
            transition: .3s !important;
        }
        
        .media img:hover{
            background-color: rgb(80, 6, 53);
        }

    footer{
        width: 100%;
        background-color: rgba(16, 56, 75,1);
        text-align: center;
        color: white;
        bottom: 0;
        z-index:5;
    }

        footer a:hover{
            color: rgb(134, 84, 116);
        }

        footer h3{
            padding: 20px;
            color: white;
        }

        .footer_mid{
            display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
            display: -ms-flexbox;  /* TWEENER - IE 10 */
            display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
            display: flex;
            width: 60%;
            left: 50%;
            -ms-transform: translate(-50%,0);
            -webkit-transform: translate(-50%,0);
            transform: translate(-50%,0);
            padding-top: 40px;
        }

            .footer_col{
                width:33.33%;
            }

                .footer_col li{
                    list-style-type: none;
                    line-height: 28px;
                }

                    .footer_mid a{
                        color: white;
                    }

            .footer_media{
                display: inline-block;
                width: 40vw;
                margin: 50px 0px;
                
            }

                .footer_media img{
                    width: 30px;
                    padding: 5px;
                }
            
            .copyright a{
                color: white;
            }
}

/* 
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/

@media screen and (min-width: 1025px) and (max-width: 1280px) {
h2{
    font-size: 40px !important;
}

a, p, h4, span{
    font-size: 15px;
}

    header{
        position: fixed;
        top:0;
        left:0;
        padding: 10px 50px;
        width: calc(100% - 100px);
        -webkit-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        z-index: 900;
    }
    
        .site_logo{
            height: 50px;
            display: inline-block;
        }

            .site_logo img{
                height: 100%;
            }

        .menu_toggle{
            display: none;
        }

        menu{
            position: absolute;
            display: block;
            top: 0;
            right: 0;
            height: 100%;
        }

            menu a{
                text-decoration: none;
                color: rgb(255, 255, 255);
                display: inline-block;
                padding: 20px 10px;
                top: 50%;
                font-size: 14px;
                text-transform: uppercase;
            }

                menu a:hover{
                    color: rgb(224, 120, 186) !important;
                }

                menu select{
                    background-color: transparent;
                    color: rgb(255,255,255);
                    border: none;
                    outline: none;
                    margin: 0px 20px;
                    font-size: 14px;
                    -webkit-transition: .3s;
                    transition: .3s;
                }

                    menu select option{
                        color: black;
                    }

                    menu select:hover{
                        color: rgb(224, 120, 186) !important;
                        cursor: pointer;
                    }

    .row{
        width: 100%;
        display: block;
        padding: 13vh 0;
    }

        .row span{
            display: block;
            text-align: center;
        }

        .col_3{
            display: inline-block;
            vertical-align: top;
            padding: 10px;
            width: 25%;
            margin: 20px 2%;
        }

        .col_2{
            width: 50%;
            padding: 0;
        }

    .quick_link{
        display: inline-block;
        padding:12px 30px;
        background-color: rgba(16, 56, 75,1);
        color: white;
    }

        .quick_link:hover{            
            background-color: rgb(80, 6, 53);
            color :white;
        }

    .contact_back{
        z-index: 999;
    }

    #contact_head{
        font-size: 40px;
        text-transform: uppercase;
    }

        .contact_project{
            left:50%;
            -ms-transform: translate(-50%,0);
            -webkit-transform: translate(-50%,0);
            transform: translate(-50%,0);
            width: 60vw;
            padding:50px 0px;
            padding-bottom: 50px;
            text-align:center;
        }

            #mail{
                display: inline-block;
                border:none;
                font-size: 20px;
                /*color: rgb(13, 112, 161);*/
                outline: none;
                padding: 8px;
                width: 25vw;
                -webkit-transition: .4s ease-in-out !important;
                transition: .4s ease-in-out !important;
            }

            .contact_project a{
                display: inline-block;
                padding:8px 20px;
                background-color: rgb(13, 112, 161);
                color: white;
                -webkit-transition: .4s ease-in-out !important;
                transition: .4s ease-in-out !important;
            }

                .contact_project a:hover{
                    background-color: rgb(80, 6, 53);
                }

            .mail_pop{
                position:absolute;
                display:none;
                top: 100%;
                left: 50%;
                -ms-transform: translate(-50%,0);
                -webkit-transform: translate(-50%,0);
                transform: translate(-50%,0);
                padding: 20px;
                color: white;
                z-index: 9999 !important;
                transition: .3s;
                -webkit-transition: .3s;
            }
    
                .mail_pop:hover{
                    cursor: pointer;
                    background-color: rgba(80, 6, 53, 0.3) !important;
                }

    .media{
        position: fixed;
        right: -60px;
        top:50%;
        -ms-transform: translate(0,-50%);
        -webkit-transform: translate(0,-50%);
        transform: translate(0,-50%);
        background-color: white;
        display: inline-block;
        z-index: 999;
    }

        .media a{
            display: block;
            border:6px solid white;
            right: 0;
            -webkit-transition: .5s !important;
            transition: .5s !important;
        }

        .media img{
            background-color: rgb(13, 112, 161);
            width: 40px;
            -webkit-transition: .3s;
            transition: .3s;
        }
        
        .media img:hover{
            background-color: rgb(80, 6, 53);
        }

    footer{
        width: 100%;
        background-color: rgba(16, 56, 75,1);
        text-align: center;
        color: white;
        bottom: 0;
        z-index:5;
    }

        footer a:hover{
            color: rgb(134, 84, 116);
        }

        footer h3{
            padding: 20px;
            color: white;
        }

        .footer_mid{
            display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
            display: -ms-flexbox;  /* TWEENER - IE 10 */
            display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
            display: flex;
            width: 80%;
            left: 50%;
            -ms-transform: translate(-50%,0);
            -webkit-transform: translate(-50%,0);
            transform: translate(-50%,0);
            padding-top: 40px;
        }

            .footer_col{
                width:33.33%;
            }

                .footer_col li{
                    list-style-type: none;
                    line-height: 28px;
                }

                    .footer_mid a{
                        color: white;
                    }

            .footer_media{
                display: inline-block;
                width: 40vw;
                margin: 50px 0px;
                
            }

                .footer_media img{
                    width: 30px;
                    padding: 5px;
                }
            
            .copyright a{
                color: white;
            }
}

/* 
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
    h2{
        font-size: 40px !important;
    }
    
    a, p, h4, span{
        font-size: 15px;
    }
    
        header{
            position: fixed;
            top:0;
            left:0;
            padding: 10px 20px;
            width: calc(100% - 40px);
            -webkit-transition: .5s ease-in-out;
            transition: .5s ease-in-out;
            z-index: 900;
        }
        
            .site_logo{
                height: 40px;
                display: inline-block;
            }
    
                .site_logo img{
                    height: 100%;
                }

            .menu_toggle{
                display: none;
            }
    
            menu{
                position: absolute;
                display: block;
                top: 0;
                right: 0;
                height: 100%;
            }
    
                menu a{
                    text-decoration: none;
                    color: rgb(255, 255, 255);
                    display: inline-block;
                    padding: 20px 10px;
                    top: 50%;
                    font-size: 13px;
                    text-transform: uppercase;
                }
    
                    menu a:hover{
                        color: rgb(224, 120, 186) !important;
                    }
    
                    menu select{
                        background-color: transparent;
                        color: rgb(255,255,255);
                        border: none;
                        outline: none;
                        margin: 0px 20px;
                        font-size: 14px;
                        -webkit-transition: .3s;
                        transition: .3s;
                    }
    
                        menu select option{
                            color: black;
                        }
    
                        menu select:hover{
                            color: rgb(224, 120, 186) !important;
                            cursor: pointer;
                        }
    
        .row{
            width: 100%;
            display: block;
            padding: 15vh 0;
        }
    
            .row span{
                display: block;
                text-align: center;
            }
    
            .col_3{
                display: inline-block;
                vertical-align: top;
                padding: 10px;
                width: 28%;
                margin: 0px 0%;
            }
    
            .col_2{
                width: 50%;
                padding: 0;
            }
    
    .quick_link_back{
        display: block;
        width:100%;
    }

        .quick_link{
            display: inline-block;
            padding:12px 30px;
            background-color: rgba(16, 56, 75,1);
            color: white;
        }
    
            .quick_link:hover{            
                background-color: rgb(80, 6, 53);
                color :white;
            }
    
        .contact_back{
            z-index: 999;
        }
    
        #contact_head{
            font-size: 40px;
            text-transform: uppercase;
        }
    
            .contact_project{
                left:50%;
                -ms-transform: translate(-50%,0);
                -webkit-transform: translate(-50%,0);
                transform: translate(-50%,0);
                width: 80vw;
                padding:50px 0px;
                padding-bottom: 50px;
                text-align:center;
            }
    
                #mail{
                    display: inline-block;
                    border:none;
                    font-size: 20px;
                    /*color: rgb(13, 112, 161);*/
                    outline: none;
                    padding: 8px;
                    width: 50vw;
                    -webkit-transition: .4s ease-in-out !important;
                    transition: .4s ease-in-out !important;
                }
    
                .contact_project a{
                    display: inline-block;
                    padding:8px 20px;
                    background-color: rgb(13, 112, 161);
                    color: white;
                    -webkit-transition: .4s ease-in-out !important;
                    transition: .4s ease-in-out !important;
                }
    
                    .contact_project a:hover{
                        background-color: rgb(80, 6, 53);
                    }

                .mail_pop{
                    position:absolute;
                    display:none;
                    top: 100%;
                    left: 50%;
                    -ms-transform: translate(-50%,0);
                    -webkit-transform: translate(-50%,0);
                    transform: translate(-50%,0);
                    padding: 20px;
                    color: white;
                    z-index: 9999 !important;
                    transition: .3s;
                    -webkit-transition: .3s;
                }
        
                    .mail_pop:hover{
                        cursor: pointer;
                        background-color: rgba(80, 6, 53, 0.3) !important;
                    }
    
        .media{
            position: fixed;
            right: -60px;
            top:50%;
            -ms-transform: translate(0,-50%);
            -webkit-transform: translate(0,-50%);
            transform: translate(0,-50%);
            background-color: white;
            display: inline-block;
            z-index: 999;
        }
    
            .media a{
                display: block;
                border:6px solid white;
                right: 0;
                -webkit-transition: .5s !important;
                transition: .5s !important;
            }
    
            .media img{
                background-color: rgb(13, 112, 161);
                width: 40px;
                -webkit-transition: .3s;
                transition: .3s;
            }
            
            .media img:hover{
                background-color: rgb(80, 6, 53);
            }
    
        footer{
            width: 100%;
            background-color: rgba(16, 56, 75,1);
            text-align: center;
            color: white;
            bottom: 0;
            z-index:5;
        }
    
            footer a:hover{
                color: rgb(134, 84, 116);
            }
    
            footer h3{
                padding: 20px;
                color: white;
            }
    
            .footer_mid{
                display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
                display: -ms-flexbox;  /* TWEENER - IE 10 */
                display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
                display: flex;
                width: 90%;
                left: 50%;
                -ms-transform: translate(-50%,0);
                -webkit-transform: translate(-50%,0);
                transform: translate(-50%,0);
                padding-top: 40px;
            }
    
                .footer_col{
                    width:33.33%;
                }
    
                    .footer_col li{
                        list-style-type: none;
                        line-height: 28px;
                    }
    
                        .footer_mid a{
                            color: white;
                        }
    
                .footer_media{
                    display: inline-block;
                    width: 40vw;
                    margin: 50px 0px;
                    
                }
    
                    .footer_media img{
                        width: 30px;
                        padding: 5px;
                    }
                
                .copyright a{
                    color: white;
                }
}

/* 
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
h2{
    font-size: 40px !important;
}

a, p, h4, span{
    font-size: 15px;
}

    header{
        position: fixed;
        top:0;
        left:0;
        padding: 10px 20px;
        width: calc(100% - 40px);
        -webkit-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        z-index: 900;
    }
    
        .site_logo{
            height: 40px;
            display: inline-block;
        }

            .site_logo img{
                height: 100%;
            }

        .menu_toggle{
            display: none;
        }

        menu{
            position: absolute;
            display: block;
            top: 0;
            right: 0;
            height: 100%;
        }

            menu a{
                text-decoration: none;
                color: rgb(255, 255, 255);
                display: inline-block;
                padding: 20px 10px;
                top: 50%;
                font-size: 13px;
                text-transform: uppercase;
            }

                menu a:hover{
                    color: rgb(224, 120, 186) !important;
                }

                menu select{
                    background-color: transparent;
                    color: rgb(255,255,255);
                    border: none;
                    outline: none;
                    margin: 0px 20px;
                    font-size: 14px;
                    -webkit-transition: .3s;
                    transition: .3s;
                }

                    menu select option{
                        color: black;
                    }

                    menu select:hover{
                        color: rgb(224, 120, 186) !important;
                        cursor: pointer;
                    }

    .row{
        width: 100%;
        display: block;
        padding: 15vh 0;
    }

        .row span{
            display: block;
            text-align: center;
        }

        .col_3{
            display: inline-block;
            vertical-align: top;
            padding: 10px;
            width: 28%;
            margin: 0px 0%;
        }

        .col_2{
            width: 50%;
            padding: 0;
        }

.quick_link_back{
    display: block;
    width:100%;
}

    .quick_link{
        display: inline-block;
        padding:12px 30px;
        background-color: rgba(16, 56, 75,1);
        color: white;
    }

        .quick_link:hover{            
            background-color: rgb(80, 6, 53);
            color :white;
        }

    .contact_back{
        z-index: 999;
    }

    #contact_head{
        font-size: 40px;
        text-transform: uppercase;
    }

        .contact_project{
            left:50%;
            -ms-transform: translate(-50%,0);
            -webkit-transform: translate(-50%,0);
            transform: translate(-50%,0);
            width: 80vw;
            padding:50px 0px;
            padding-bottom: 50px;
            text-align:center;
        }

            #mail{
                display: inline-block;
                border:none;
                font-size: 20px;
                /*color: rgb(13, 112, 161);*/
                outline: none;
                padding: 8px;
                width: 50vw;
                -webkit-transition: .4s ease-in-out !important;
                transition: .4s ease-in-out !important;
            }

            .contact_project a{
                display: inline-block;
                padding:8px 20px;
                background-color: rgb(13, 112, 161);
                color: white;
                -webkit-transition: .4s ease-in-out !important;
                transition: .4s ease-in-out !important;
            }

                .contact_project a:hover{
                    background-color: rgb(80, 6, 53);
                }

        .mail_pop{
            position:absolute;
            display:none;
            top: 100%;
            left: 50%;
            -ms-transform: translate(-50%,0);
            -webkit-transform: translate(-50%,0);
            transform: translate(-50%,0);
            padding: 20px;
            color: white;
            z-index: 9999 !important;
            transition: .3s;
            -webkit-transition: .3s;
        }

            .mail_pop:hover{
                cursor: pointer;
                background-color: rgba(80, 6, 53, 0.3) !important;
            }

    .media{
        position: fixed;
        right: -60px;
        top:50%;
        -ms-transform: translate(0,-50%);
        -webkit-transform: translate(0,-50%);
        transform: translate(0,-50%);
        background-color: white;
        display: inline-block;
        z-index: 999;
    }

        .media a{
            display: block;
            border:6px solid white;
            right: 0;
            -webkit-transition: .5s !important;
            transition: .5s !important;
        }

        .media img{
            background-color: rgb(13, 112, 161);
            width: 40px;
            -webkit-transition: .3s;
            transition: .3s;
        }
        
        .media img:hover{
            background-color: rgb(80, 6, 53);
        }

    footer{
        width: 100%;
        background-color: rgba(16, 56, 75,1);
        text-align: center;
        color: white;
        bottom: 0;
        z-index:5;
    }

        footer a:hover{
            color: rgb(134, 84, 116);
        }

        footer h3{
            padding: 20px;
            color: white;
        }

        .footer_mid{
            display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
            display: -ms-flexbox;  /* TWEENER - IE 10 */
            display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
            display: flex;
            width: 80%;
            left: 50%;
            -ms-transform: translate(-50%,0);
            -webkit-transform: translate(-50%,0);
            transform: translate(-50%,0);
            padding-top: 40px;
        }

            .footer_col{
                width:33.33%;
            }

                .footer_col li{
                    list-style-type: none;
                    line-height: 28px;
                }

                    .footer_mid a{
                        color: white;
                    }

            .footer_media{
                display: inline-block;
                width: 40vw;
                margin: 50px 0px;
                
            }

                .footer_media img{
                    width: 30px;
                    padding: 5px;
                }
            
            .copyright a{
                color: white;
            }
}

/* 
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/

@media screen and (min-width: 481px) and (max-width: 767px) {
    h2{
        font-size: 40px !important;
    }
    
    a, p, h4, span{
        font-size: 15px;
    }
    
        header{
            position: fixed;
            top:0;
            left:0;
            padding: 10px 20px;
            width: calc(100% - 40px);
            -webkit-transition: .5s ease-in-out;
            transition: .5s ease-in-out;
            z-index: 1000;
        }
        
            .site_logo{
                height: 30px;
                display: inline-block;
                z-index: 1001;
            }
    
                .site_logo img{
                    height: 100%;
                }
    
            .menu_toggle {
                position: absolute;
                display: block;
                width: 30px;
                height: 26px;
                right: 0;
                top:0;
                margin: 10px;
                background: transparent;
                border:none;
                border-top: 4px solid;
                border-bottom: 4px solid;
                color: rgb(13, 112, 161);
                outline: none;
                transition: all 0.25s ease-in-out;
                z-index: 1001;
            }
            .menu_toggle:before, .menu_toggle:after {
                content: '';
                display: block;
                width: 100%;
                height: 4px;
                position: absolute;
                top: 50%;
                left: 50%;
                background: currentColor;
                -webkit-transform: translate(-50%, -50%);
                        transform: translate(-50%, -50%);
                transition: -webkit-transform 0.25s ease-in-out;
                transition: transform 0.25s ease-in-out;
                transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
            }
            button.is-active {
                border-color: transparent;
            }
            button.is-active:before {
                -webkit-transform: translate(-50%, -50%) rotate(45deg);
                        transform: translate(-50%, -50%) rotate(45deg);
            }
            button.is-active:after {
                -webkit-transform: translate(-50%, -50%) rotate(-45deg);
                        transform: translate(-50%, -50%) rotate(-45deg);
            }
    
            menu{
                position: fixed;
                display: block;
                top: 0;
                left: 110%;
                width: 100vw;
                height: 100vh;
                background: url("../Images/mobile-phone-1875813_1920.jpg");
                background-size: cover;
                background-position: center;
                transition: 0.25s ease-in-out;
            }
    
                menu div{
                    overflow-y: auto;
                    top: 0;
                    left:0;
                    height: 100%;
                    width: 100%;
                    background-color:rgb(0, 77, 105);
                    background: linear-gradient(to bottom right, rgb(0, 105, 144) 0, rgba(198,34,137,0.3) 110vw);
                }
    
                .active_menu{
                    left:0;
                }
    
                menu a{
                    text-decoration: none;
                    color: rgb(255, 255, 255);
                    display: block;
                    top: 20%;
                    text-align:center;
                    padding: 20px 0;
                    width: 100%;
                    font-size: 20px;
                    opacity: 0;
                    text-transform: uppercase;
                    transition: opacity 0.5s ease-in-out;
                    transition-delay: 0.25s;
                }
    
                    .active_link{
                        opacity: 1;
                    }
    
                    menu a:hover{
                        color: rgb(224, 120, 186) !important;
                    }
    
                    menu select{
                        background-color: transparent;
                        color: rgb(255,255,255);
                        border: none;
                        margin: 0px 20px;
                        font-size: 16px;
                        -webkit-transition: .3s;
                        transition: .3s;
                        margin-bottom: 40px;
                    }
    
                        menu select option{
                            text-transform: uppercase;
                            color: black;
                        }
    
        .row{
            width: 100%;
            display: block;
            padding: 10vh 0;
        }
    
            .row span{
                display: block;
                text-align: center;
            }
    
            .col_3{
                display: block;
                vertical-align: top;
                padding: 10px;
                width: 90%;
                margin: 0px 0%;
            }
    
            .col_2{
                width: 50%;
                padding: 0;
            }
    
    .quick_link_back{
        display: block;
        width:100%;
    }
    
        .quick_link{
            display: inline-block;
            padding:12px 30px;
            background-color: rgba(16, 56, 75,1);
            color: white;
        }
    
            .quick_link:hover{            
                background-color: rgb(80, 6, 53);
                color :white;
            }
    
        .contact_back{
            z-index: 999;
        }
    
        #contact_head{
            font-size: 40px;
            text-transform: uppercase;
        }
    
            .contact_project{
                left:50%;
                -ms-transform: translate(-50%,0);
                -webkit-transform: translate(-50%,0);
                transform: translate(-50%,0);
                width: 80vw;
                padding:50px 0px;
                padding-bottom: 50px;
                text-align:center;
            }
    
                #mail{
                    display: inline-block;
                    border:none;
                    font-size: 20px;
                    /*color: rgb(13, 112, 161);*/
                    outline: none;
                    padding: 8px;
                    width: 50vw;
                    -webkit-transition: .4s ease-in-out !important;
                    transition: .4s ease-in-out !important;
                }
    
                .contact_project a{
                    display: inline-block;
                    padding:8px 20px;
                    background-color: rgb(13, 112, 161);
                    color: white;
                    -webkit-transition: .4s ease-in-out !important;
                    transition: .4s ease-in-out !important;
                }
    
                    .contact_project a:hover{
                        background-color: rgb(80, 6, 53);
                    }

            .mail_pop{
                position:absolute;
                display:none;
                top: 100%;
                left: 50%;
                -ms-transform: translate(-50%,0);
                -webkit-transform: translate(-50%,0);
                transform: translate(-50%,0);
                padding: 20px;
                color: white;
                z-index: 9999 !important;
                transition: .3s;
                -webkit-transition: .3s;
            }
    
                .mail_pop:hover{
                    cursor: pointer;
                    background-color: rgba(80, 6, 53, 0.3) !important;
                }
    
        .media{
            position: fixed;
            right: -60px;
            top:50%;
            -ms-transform: translate(0,-50%);
            -webkit-transform: translate(0,-50%);
            transform: translate(0,-50%);
            background-color: white;
            display: inline-block;
            z-index: 999;
        }
    
            .media a{
                display: block;
                border:3px solid white;
                right: 0;
                -webkit-transition: .5s !important;
                transition: .5s !important;
            }
    
            .media img{
                background-color: rgb(13, 112, 161);
                width: 40px;
                -webkit-transition: .3s;
                transition: .3s;
            }
            
            .media img:hover{
                background-color: rgb(80, 6, 53);
            }
    
        footer{
            width: 100%;
            background-color: rgba(16, 56, 75,1);
            text-align: center;
            color: white;
            bottom: 0;
            z-index:5;
        }
    
            footer a:hover{
                color: rgb(134, 84, 116);
            }
    
            footer h3{
                padding: 20px;
                color: white;
            }
    
            .footer_mid{
                display: inline-block;
                width: 80%;
                left: 50%;
                -ms-transform: translate(-50%,0);
                -webkit-transform: translate(-50%,0);
                transform: translate(-50%,0);
            }
    
                .footer_col{
                    width:80%;
                    padding-top: 40px;
                }
    
                    .footer_col li{
                        list-style-type: none;
                        line-height: 28px;
                    }
    
                        .footer_mid a{
                            color: white;
                        }
    
                .footer_media{
                    display: inline-block;
                    width: 40vw;
                    margin: 50px 0px;
                    
                }
    
                    .footer_media img{
                        width: 30px;
                        padding: 5px;
                    }
                
                .copyright a{
                    color: white;
                }
}

/* 
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/

@media screen and (min-width: 320px) and (max-width: 480px) {
h2{
    font-size: 40px !important;
}

a, p, h4, span{
    font-size: 15px;
}

p{
    line-height:25px;
}

    header{
        position: fixed;
        top:0;
        left:0;
        padding: 10px 20px;
        width: calc(100vw - 40px);
        -webkit-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        z-index: 1000;
    }
    
        .site_logo{
            height: 30px;
            display: inline-block;
            z-index: 1001;
        }

            .site_logo img{
                height: 100%;
            }

        .menu_toggle {
            position: absolute;
            display: block;
            width: 30px;
            height: 26px;
            right: 0;
            top:0;
            margin: 10px;
            background: transparent;
            border:none;
            border-top: 4px solid;
            border-bottom: 4px solid;
            color: rgb(13, 112, 161);
            outline: none;
            transition: all 0.25s ease-in-out;
            z-index: 1001;
        }
        .menu_toggle:before, .menu_toggle:after {
            content: '';
            display: block;
            width: 100%;
            height: 4px;
            position: absolute;
            top: 50%;
            left: 50%;
            background: currentColor;
            -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
            transition: -webkit-transform 0.25s ease-in-out;
            transition: transform 0.25s ease-in-out;
            transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
        }
        button.is-active {
            border-color: transparent;
        }
        button.is-active:before {
            -webkit-transform: translate(-50%, -50%) rotate(45deg);
                    transform: translate(-50%, -50%) rotate(45deg);
        }
        button.is-active:after {
            -webkit-transform: translate(-50%, -50%) rotate(-45deg);
                    transform: translate(-50%, -50%) rotate(-45deg);
        }

        menu{
            position: fixed;
            display: block;
            top: 0;
            left: 110%;
            width: 100vw;
            height: 100%;
            overflow-y: auto;
            background: url("../Images/mobile-phone-1875813_1920.jpg");
            background-size: cover;
            background-position: center;
            transition: 0.25s ease-in-out;
        }

            menu div{
                top: 0;
                left:0;
                height: 100%;
                width: 100%;
                background: linear-gradient(to bottom right, rgba(0, 88, 122, 0.9) 60vh, rgba(198,34,137,.9) 120vh);
            }

            .active_menu{
                left:0;
            }

            menu a{
                text-decoration: none;
                color: rgb(255, 255, 255);
                display: block;
                top: 20%;
                text-align:center;
                padding: 20px 0;
                width: 100%;
                font-size: 20px;
                opacity: 0;
                text-transform: uppercase;
                transition: opacity 0.5s ease-in-out;
                transition-delay: 0.25s;
            }

                .active_link{
                    opacity: 1;
                }

                menu a:hover{
                    color: rgb(224, 120, 186) !important;
                }

                menu select{
                    background-color: transparent;
                    color: rgb(255,255,255);
                    border: none;
                    margin: 0px 20px;
                    font-size: 16px;
                    -webkit-transition: .3s;
                    transition: .3s;
                }

                    menu select option{
                        text-transform: uppercase;
                        color: black;
                    }

    .row{
        width: 100%;
        display: block;
        padding: 15vh 0;
    }

        .row span{
            display: block;
            text-align: center;
        }

        .col_3{
            display: block;
            vertical-align: top;
            padding: 10px;
            width: 90%;
            margin: 0px 0%;
        }

        .col_2{
            width: 50%;
            padding: 0;
        }

.quick_link_back{
    display: block;
    width:100%;
}

    .quick_link{
        display: inline-block;
        padding:12px 30px;
        background-color: rgba(16, 56, 75,1);
        color: white;
    }

        .quick_link:hover{            
            background-color: rgb(80, 6, 53);
            color :white;
        }

    #contact_head{
        font-size: 30px;
        width: 95%;
        text-transform: uppercase;
    }

        .contact_project{
            left:50%;
            -ms-transform: translate(-50%,0);
            -webkit-transform: translate(-50%,0);
            transform: translate(-50%,0);
            width: 80vw;
            padding:50px 0px;
            padding-bottom: 50px;
            text-align:center;
        }

            #mail{
                display: inline-block;
                border:none;
                font-size: 20px;
                /*color: rgb(13, 112, 161);*/
                outline: none;
                padding: 8px;
                width: 50vw;
                -webkit-transition: .4s ease-in-out !important;
                transition: .4s ease-in-out !important;
            }

            .contact_project a{
                display: inline-block;
                padding:8px 20px;
                background-color: rgb(13, 112, 161);
                color: white;
                -webkit-transition: .4s ease-in-out !important;
                transition: .4s ease-in-out !important;
            }

                .contact_project a:hover{
                    background-color: rgb(80, 6, 53);
                }

        .mail_pop{
            position:absolute;
            display:none;
            top: 100%;
            left: 50%;
            -ms-transform: translate(-50%,0);
            -webkit-transform: translate(-50%,0);
            transform: translate(-50%,0);
            padding: 20px;
            color: white;
            z-index: 9999 !important;
            transition: .3s;
            -webkit-transition: .3s;
        }

            .mail_pop:hover{
                cursor: pointer;
                background-color: rgba(80, 6, 53, 0.3) !important;
            }

    .media{
        position: fixed;
        right: -60px;
        top:50%;
        -ms-transform: translate(0,-50%);
        -webkit-transform: translate(0,-50%);
        transform: translate(0,-50%);
        background-color: white;
        display: inline-block;
        z-index: 999;
    }

        .media a{
            display: block;
            border: 1px solid white;
            right: 0;
            -webkit-transition: .5s !important;
            transition: .5s !important;
        }

        .media img{
            background-color: rgb(13, 112, 161);
            width: 40px;
            -webkit-transition: .3s;
            transition: .3s;
        }
        
        .media img:hover{
            background-color: rgb(80, 6, 53);
        }

    footer{
        width: 100%;
        background-color: rgba(16, 56, 75,1);
        text-align: center;
        color: white;
        bottom: 0;
        z-index:5;
    }

        footer a:hover{
            color: rgb(134, 84, 116);
        }

        footer h3{
            padding: 20px;
            color: white;
        }

        .footer_mid{
            display: inline-block;
            width: 80%;
            left: 50%;
            -ms-transform: translate(-50%,0);
            -webkit-transform: translate(-50%,0);
            transform: translate(-50%,0);
        }

            .footer_col{
                width:80%;
                padding-top: 40px;
            }

                .footer_col li{
                    list-style-type: none;
                    line-height: 28px;
                }

                    .footer_mid a{
                        color: white;
                    }

            .footer_media{
                display: inline-block;
                width: 40vw;
                margin: 50px 0px;
                
            }

                .footer_media img{
                    width: 30px;
                    padding: 5px;
                }
            
            .copyright a{
                color: white;
            }
}

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
    background-color:rgb(0, 77, 105);
}
::-webkit-scrollbar-thumb:hover {
    background-color:rgb(80, 6, 53);
}