/***** SECURED BROWSER *****/

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 200;
  src: local('Source Sans Pro ExtraLight'), local('SourceSansPro-ExtraLight'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGCVh0V6fR69OLaFLklYbiSk.woff2) format('woff2'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGMa9awK0IKUjIWABZIchFI8.woff) format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGOode0-EuMkY--TSyExeINg.woff2) format('woff2'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGNbE_oMaV8t2eFeISPpzbdE.woff) format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlNV_2ngZ8dMf8fLgjYEouxg.woff2) format('woff2'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format('woff');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGCOFnW3Jk0f09zW_Yln67Ac.woff2) format('woff2'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGJ6-ys_j0H4QL65VLqzI3wI.woff) format('woff');
}


html, body {width: 100%; height: 100%;}
body {margin: 0; padding: 0; font-family: "Source Sans Pro", "Lucida Sans Unicode", "Lucida Grande", sans-serif;}

h1 {margin: 0 0 1.2em; padding: 0; font-size: 46px; line-height: 50px; font-weight: 400; letter-spacing: 4px; text-transform: uppercase;}
h2 {margin: 0 0 1.8em; padding: 0; font-size: 38px; line-height: 42px; font-weight: 400; letter-spacing: 8px; text-transform: uppercase;}

.main {height: 100%; min-height: 520px; overflow: auto; text-align: center; color: #fff; background: #039d8f url('../images/Exam.png') no-repeat top center; background-size: 100%;}
#home {height: 100%; padding-top: 6em; padding-bottom: 10px; transform: translateX(0); transition: transform 0.5s ease-in-out 0s; box-sizing: border-box;}
#home-down {height: 100%; padding: 7em 0; transform: translateX(0); transition: transform 0.5s ease-in-out 0s; box-sizing: border-box;}
#home-secured-browser {height: 100%; padding: 5em 0;}

#logoDiv {display:table; width:400px; margin: 30px auto; height:140px; margin-bottom: 2.4em; padding: 15px 20px; border: 5px solid rgba(255, 255, 255, 0.6); border-radius: 3px; background-color: rgba(255, 255, 255, 0.9);  border-top-color:#85b91f; border-right-color:#e64722; border-bottom-color:#f7ad00; border-left-color:#999896}
#logoDiv img{ height:auto; margin:auto; max-width:400px;}
#logoDiv span{display:table-cell; vertical-align:middle;}
.btn-huge {padding: 25px 60px; display: inline-block; border: 1px solid #fff; border-radius: 20px; font-size: 22px; line-height: 26px; letter-spacing: 1px; text-decoration: none; color: #444; background-color: #fff; transition: background-color 0.35s ease-in-out 0s, color 0.35s ease-in-out 0s;}
.btn-huge:hover, .btn-huge:focus {color: #fff; background-color: rgba(255, 255, 255, 0.1);}

.message {margin: 0 0 3em; font-size: 21px; line-height: 37px; font-weight: 300; letter-spacing: 1px;}
.notification {font-size: 21px; line-height: 37px; font-weight: 300; letter-spacing: 1px;}

.footer {position: absolute; bottom: 0; padding: 20px 0; width: 100%; font-size: 18px; line-height: 24px; font-weight: 300; letter-spacing: 1px;}
.footer img {display: inline-block; vertical-align: middle;}
.footer span {padding-right: 10px; display: inline-block; border-right: 1px solid #fff;}
.footer a {margin-left: 10px; padding: 4px 5px; display: inline-block; border-bottom: 1px dotted rgba(255, 255, 255, 0.5); text-decoration: none; color: #fff; transition: border-color 0.35s ease-in-out 0s, color 0.35s ease-in-out 0s;}
.footer a:hover, .footer a:focus {border-bottom-color: rgba(255, 255, 255, 0);}

.second #home {transform: translateY(-100%);}
.second #home-down {transform: translateY(-100%);}



@media only screen and (max-device-width: 480px) {
      #logoDiv {
            width: 303px;
}
}