* {padding: 0; margin: 0; border: 0;}
html, body, div, img, form, fieldset, legend, label, p, h1, h2, h3 {margin: 0; padding: 0;}
header, nav, article, footer, address, aside, section, summary, hgroup, details, figcaption, figure, main {display:block;}
html {font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}

.plg_system_webauthn_login_button {display: none !important;}

#vidsearchbox {background-color: #DF1784; width: 200px; float:right; margin-bottom: 10px; margin-right: 10px;}
#vidsearchbox input {background-color: transparent; color: #fff; border: 0px;padding-top: 8px; padding-bottom: 8px; width: 150px;padding-left: 5px;}
#vidsearchbox ::placeholder {color: #fff; opacity: 1; }
#vidsearchbox ::-ms-input-placeholder { color: #fff;}

img#gosearchbox {width: 20px; height: 20px; float:right;padding-top: 5px; padding-right: 5px; cursor: pointer;}
span.visually-hidden {display:none;}

#header {width: 100%; position: relative; z-index:9999;}
#logo {width: 30%;float:left; height: 125px; display:block; }
#logo img {width: auto; height: 100px; padding-top: 10px;}
#contact {width: 30%; float:right; height: 50px; display:block; }



#footer {width: 100%;clear:both; background-color: #000;color: #fff; padding-top: 75px; padding-bottom: 75px;background-image: url('../images/footer-bg.png'); background-size: cover;}
#footer h3, #footer a {color: #fff;}

#banner {width: 100%; height: auto; display:block;}
#banner img {width: 100%; height: auto;}
#content {min-height: 300px;}

#greyhands {background-image: url('../images/greyhands.png'); background-size: cover; background-color: #f1f2f2; padding-top: 75px; padding-bottom: 75px;}

.vidbox {float:left; width: 23%; margin-left: 1%; margin-right: 1%;}
img.vidthumb {background-color: #e6e7e8; width: 100%; height: auto; display:block; margin-bottom: 10px;}
.vidtitle {font-weight:bold; font-size: 16px; line-height: 20px; text-align:center; height: 60px;}

#trial-dictionary {background-image: url('../images/trial-sam.png'); background-position: left bottom; background-repeat: no-repeat; background-size: auto 300px; display: block; padding-bottom: 75px;}
#trial-3 {background-image: url('../images/trial-sam.png'), url('../images/trial-mouse.png') ; background-position: left bottom, right bottom; background-repeat: no-repeat; background-size: auto 300px; display: block; padding-left: 17%; padding-right: 17%;}
#trial-3 .vidbox {width: 31%;}




ul.fields-container {display:none;}
.glass {background-image: url('../images/glass.png');}

#login {float:right;}

.logintitle {color: #fff; float:left; margin-right: 5px; font-size: 15px; line-height: 15px; padding-top: 3px;}
#login-form-121, #login-form-160 {float:right !important; width: 360px; background-color: #ec008c; padding:5px;}
input#modlgn-username-121, input#modlgn-username-160 {background-color: transparent; float:left; width: 90px; padding: 3px;  border: solid 1px #fff;margin-right: 5px; color: #fff;text-transform:none;}
input#modlgn-passwd-121, input#modlgn-passwd-160 {background-color: transparent; float:left; width: 90px; padding: 3px; border: solid 1px #fff; margin-right: 5px; color: #fff;text-transform:none;}
#logintopbutton {background-color: transparent;float:left; color: #fff; padding: 3px; border: solid 1px #fff;}
#logoutbutton {background-color: transparent;float:right; color: #fff; padding: 3px; border: solid 1px #fff;}

#login ::-webkit-input-placeholder { color: #fff !important;}

/* REGISTRATION FORM */
.ftitle {width: 15%; float:left;}
#footer ::placeholder {color: #ec008c;opacity: 1; }
#footer ::-ms-input-placeholder { color: #ec008c;}
label.checkbox-trap {font-size: 16px; line-height: 22px;}
.checkbox-trap {display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.checkbox-trap input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.checkmark {position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #fff; border: solid 1px #EC008C}
.checkbox-trap:hover input ~ .checkmark {background-color: #fff;}
.checkbox-trap input:checked ~ .checkmark {background-color: #EC008C}
.checkmark:after {content: ""; position: absolute; display: none;}
.checkbox-trap input:checked ~ .checkmark:after {display: block;}
.checkbox-trap .checkmark:after {left: 9px; top: 5px; width: 5px; height: 10px; border: solid white;border-width: 0 3px 3px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
#mainpage {min-height: 650px;}
.reg-form {-webkit-box-shadow: 0px 6px 7px -3px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 6px 7px -3px rgba(0,0,0,0.75);
box-shadow: 0px 6px 7px -3px rgba(0,0,0,0.75);}



.stretch {width: 100%; clear:both;}
.trap {width: 1200px; margin: auto;}


@media only screen and (min-width: 1200px) { /* WIDE - Desktop */
.stretch-wide {;}
.stretch {max-width: 1199px; margin: auto;}
.onlymob {display:none;}
.notmob {display:block;}
}

@media only screen and (min-width: 768px) and (max-width: 1199px) { /* MEDIUM - Tablet Portrait */
.stretch-medium {;}
.stretch {width: 100%; margin: auto;}
.onlymob {display:none;}
.notmob {display:block;}
.vidbox {width: 31%; margin-left: 1%; margin-right: 1%;}

}

@media only screen and (min-width: 480px) and (max-width: 767px) { /* SMALL - Mobile Landscape */
.stretch-small {;}
.stretch {width: 100%; margin: auto;}
.onlymob {display:block;}
.notmob {display:none;}
    #logo {width: 90%; padding-top: 50px; text-align:center;}
   .vidbox {width: 48%; margin-left: 1%; margin-right: 1%;}
  #trial-3 .vidbox {width: 90%; margin-left: 1%; margin-right: 1%;}
  #trial-3 {background-size: auto 200px;}
  #login {position: fixed; float:none !important; left: 0;  top: 0; z-index: 999999 !important;}
  #top { background-color: #EC008C; position: fixed; height: 35px; left: 0; right: 0; z-index: 8888;}
    #greyhands {background-size: auto 100% !important;}
}

@media only screen and (max-width: 479px) { /* TINY - Mobile Portrait */
.stretch-tiny {;}
.stretch {max-width: 100%; margin: auto;}
.onlymob {display:block;}
.notmob {display:none;}
  #logo {width: 90%; padding-top: 50px; text-align:center;}
  #contact {width: 100%;text-align:center;}
  .vidbox {width: 90%; margin-left: 5%; margin-right: 5%;}
  #trial-3 .vidbox {width: 90%; margin-left: 5%; margin-right: 5%;}
  #trial-3 {background-size: auto 150px;}
  #login {position: fixed; float:none !important; left: 0;  top: 0; z-index: 999999 !important;}
  #top { background-color: #EC008C; position: fixed; height: 35px; left: 0; right: 0; z-index: 8888;}
  #greyhands {background-size: auto 100% !important;}
}