/*@import url("fonts.css");*/

@desktop_l:  ~"only screen and (min-width: 1200px)";                            // xl
@desktop:    ~"only screen and (min-width: 992px) and (max-width: 1199px)";     // lg
@tablet:     ~"only screen and (min-width: 768px) and (max-width: 991px)";      // md
@phone_l:    ~"only screen and (min-width: 576px) and (max-width: 767px)";      // sm
@phone:      ~"only screen and (max-width: 575px)";                             // 

/*@max_width: 600px;*/
@max_width: 700px;

* {
    margin: 0px;
    padding: 0px;
}

html, body { 
    width: 100%; 
    height: 100%; 
    font-family: Arial, Helvetica, sans-serif;
}


#wrapper {
    
    display: table; 
    /*width: 100%;*/ 
    height: 100%;
    margin: auto;
    
    #outer {
        width: 100%;
        max-width: @max_width;
        display: table-cell;
        vertical-align: middle;
        /*background-color: rgba(100, 100, 100, 0.5);*/
    
        #inner {
            margin: 23px;
            /*background-color: rgba(100, 100, 100, 0.5);*/

            .logo {
                max-width: 100%;
                height: auto;
                margin: auto auto 65px auto;
                display: block;
                @media (max-width: @max_width) {
                    margin-bottom: 55px;
                }
            }

            .delimiter {
                max-width: @max_width;
                height: 3px;
                margin: 40px auto;
                background-color: #959595;
                
                @media (max-width: @max_width) {
                    margin: 30px auto;
                }
                
                &.top { margin-top: 0px; }
            }

            .info_container {
                display: table;
                margin: auto;
            }

            .info_icon {
                display: block;
                float: left;
                &.phone { margin: auto 10px; }
                &.email { float: right; }

                @media (max-width: @max_width) {
                    float: none;
                    &.email { float: none; }
                    margin: 10px 0 !important;
                }
            }
            
            
            video {
                width: 100%;
                max-width: 800px;
                height: 100%;
                max-height: 640px;
            }

            .social {
                width: 100%;
                display: block;
                /*float: left;*/
                text-align: center;

                a { display: inline-block;  }

                .facebook, .twitter, .linkedin { margin: 0 12px; }
            }
            
            .logo {
                text-align: center;
                img {
                    margin: auto;
                    width: 80%;
                    max-width: 250px;
                }
            }

            .back_soon {
                margin-top: 100px;
                font-family: 'Montserrat', sans-serif;
                color: #959595;
                font-size: 1.3rem;
                text-align: center;
                @media (max-width: @max_width) {
                    margin-top: 90px;
                }
            }
        }
    }
    
}


.clear { clear: both; }