/* font included */
@font-face {
    font-family: 'Bebas Neue';
    src: url('../fonts/BebasNeueRegular.eot');
    src: url('../fonts/BebasNeueRegular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/BebasNeueRegular.woff2') format('woff2'),
        url('../fonts/BebasNeueRegular.woff') format('woff'),
        url('../fonts/BebasNeueRegular.ttf') format('truetype'),
        url('../fonts/BebasNeueRegular.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* common-styling */
*                                                                                   { margin: 0; padding: 0;}
body,html                                                                           { padding: 0; margin: 0; overflow: hidden; }
a,a:hover,a:active                                                                  { text-decoration: none; }
ul li                                                                               { list-style: none; }
/* section styling */
.sw-section                                                                         { position: relative; overflow: hidden;}
.sidebar                                                                            { padding: 40px 25px 66px; box-sizing: border-box; position: relative; width: 312px; height: 100vh; display: flex; flex-direction: column; justify-content: space-between;  }
.sidebar:after                                                                      { content: ""; height: 100%; width: 50vw;  position: absolute; top: 0; right: -5px; background-color:rgba(0,0,0, 0.5); display: block; z-index: 0; transform: skew(15deg);  }
.video-wrapper                                                                      { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: 100%; z-index: -100; transform: translate(-50%, -50%); }
.logo-box a 																		{ display: inline-block; }
.logo                                                                               { max-width: 203px; filter: brightness(0) invert(1); }
.contact-list                                                                       { margin-bottom: 0px; }
.contact-list li                                                                    { margin:0 0 30px;  display: flex; align-items: center; }  
.contact-list li:last-child                                                         { margin-bottom: 0; }                 
.contact-list li .contact-link                                                      { margin-top: 5px; color: white; text-decoration: none; font-family: 'Bebas Neue'; font-size: 24px; line-height: 24px; font-weight: 400; letter-spacing: 1px; -webkit-transform: scaleX(1); transform: scaleX(1); transition: 0.5s; }                                              
.info-box                                                                           { padding-left: 40px; }
.contact-list img                                                                   { margin-right: 15px; max-width: 27px; -webkit-transform: scaleX(1); transform: scaleX(1); transition: 0.5s; }
.contact-list li:hover img                                                          { transform: rotate(-180deg); -webkit-transform: scaleX(-1); transform: scaleX(-1); }
.contact-list li:hover .contact-link                                                { transform: rotate(-180deg); -webkit-transform: scaleX(-1); transform: scaleX(-1); }
.social-list                                                                        { display: flex; align-items: center; }        
.social-list li                                                                     { margin-right: 20px; }
.social-list li a:hover                                                             { filter: brightness(0.5); }
.logo-box,
.info-box                                                                           { position: relative;z-index: 1; }
@media (min-width:576px) and (max-width:1199px)
{
.sidebar                                                                            { padding: 50px 20px 60px;  width:315px; }
.sidebar:after                                                                      { width: 100%;  position: absolute; top: 0; left: -120px;  }
.logo                                                                               { max-width: 90px; }
.contact-list li                                                                    { margin-bottom: 30px; }
.contact-list li .contact-link                                                      { font-size: 18px; line-height: 24px; }
.info-box                                                                           { padding-left: 0px; }
.contact-list img                                                                   { margin-right: 15px; max-width: 20px; }
.social-list li                                                                     { margin-right: 15px; }
.social-list a img                                                                  { display: inline-block; max-height: 30px; }
}
@media (max-width:575px)
{ 
.sidebar                                                                            { padding: 50px 25px 150px;}
.sidebar:after                                                                      { width:100%;  position: absolute; top: 0; left: -110px;  }
.logo                                                                               { max-width: 90px; }
.contact-list li                                                                    { margin-bottom: 25px; }
.contact-list li .contact-link                                                      { font-size: 18px; line-height: 24px; }
.info-box                                                                           { padding-left: 0px; }
.contact-list img                                                                   { margin-right: 15px; max-width: 20px; }
.social-list li                                                                     { margin-right: 15px; }
.social-list a img                                                                  { display: inline-block; max-height: 30px; }
}
