/*@font-face {
    font-family: raleway-italics;
    font-style: italic;
    src: url('fonts/Raleway-LightItalic.otf') format('opentype'), url(http://fonts.googleapis.com/css?family=Raleway);
}

@font-face {
    font-family: raleway-bold;
    font-style: bold;
    src: url('fonts/Raleway-SemiBold.otf') format('opentype'), url(http://fonts.googleapis.com/css?family=Raleway);
}

@font-face {
    font-family: raleway;
    font-style: normal;
    src: url('fonts/Raleway-Light.otf') format('opentype'), url(http://fonts.googleapis.com/css?family=Raleway);
}*/


body {
    margin: 0;
    background: #000000;
}

body, html {
  height: 100%;
}


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

.hacker-container {
    position: relative;
    width: 100%;
    height: 500px;
    object-fit: auto;
    background-attachment: top;
    /*background-color: #FFFFFF;*/
    background-size: contain;
}

.center-logo-email {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: auto;
    text-align: center;
/*    background-position: center;
    background-size: contain;
    background-image: url("Images/ToothPike Logo White.gif");
    background-repeat: no-repeat;*/
}

.center-logo {
    position: relative;
    width: 100%;
    height: 100%;
    left: 10%;
    top: 10%;
    /*object-fit: auto;
    text-align: center;*/
    /*vertical-align: center;*/
/*    background-position: center;
    background-size: contain;
    background-image: url("Images/ToothPike Logo White.gif");
    background-repeat: no-repeat;*/
}

.hackergif {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: auto;
    background-position: center;
    background-size: cover;
    background-attachment: top;
    background-image: url("Images/hackerviewhack.gif");
    background-repeat: no-repeat;
}

.hackergiffixed {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: auto;
    background-position: center;
    background-size: cover;
    background-attachment: top;
    background-image: url("Images/hackerviewhack.gif");
    background-repeat: no-repeat;
}

.top-menu {
    position: relative;
    width: 100%;
    height: 50px;
    object-fit: auto;
/*    background-position: center;
    background-size: cover;
    background-attachment: top;
    background-image: url("Images/hackerviewhack.gif");
    background-repeat: no-repeat;*/
    z-index: 1;
}

.middle-menu {
    position: relative;
    top: -150px;
    left: 50%;
    width: 50%;
    height: 60px;
    z-index: 1;
}

.bottom-menu {
    position: relative;
    width: 100%;
    height: 200px;
    object-fit: auto;
/*    background-position: center;
    background-size: cover;
    background-attachment: top;
    background-image: url("Images/hackerviewhack.gif");
    background-repeat: no-repeat;*/
}

.main-body {
    position: relative;
    width:100%;
    /*height:100%;*/
    display:inline-block;
    /*top:-250px;*/
    background-color: black;
}


/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 15%;
  padding: 0px;
  display: inline-block;
  margin-left: 9%;
  margin-right: 9%;
}

.row {
    width:100%;
    object-fit: auto;
    text-align: center;
    /*background-color: blue;*/
    margin-right: auto;
    margin-left: auto;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}


/* link colors */
a:link {
    color: #cccccc;
    text-decoration-color: #00000000;
}
a:visited {
    color: #cccccc;
    text-decoration-color: #00000000;
}
a:hover {
    color: white;
    text-decoration-color: #00000000;
}
a:active {
    color: white;
    text-decoration-color: #00000000;
}


.basicbutton {
  background-color: #000f; /* 4CAF50 Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  float:left;
  cursor: pointer;
  -webkit-appearance: none;
}

.basicbutton:hover {
  background-color: #fff; /* Green */
  color: black;
}

.basicbuttonnofloat {
  background-color: #000f; /* 4CAF50 Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  -webkit-appearance: none;
}

.basicbuttonnofloat:hover {
  background-color: #fff; /* Green */
  color: black;
}

/*for desktop and wide screens*/
@media screen and (min-width: 1481px) {

    #dot-center{
        position: relative;
        left:-150px;
    }

    #dot {
      height: 300px;
      width: 300px;
      /*background-color: #bbb;*/
      background-color: #000;
      border-radius: 50%;
      display: inline-block;
    }


    #studioinfo {
        position:relative;
        background-color: #000f; /* 4CAF50 Green */
        border: none;
        color: white;
        /*padding: 15px 32px;*/
        text-align: center;
        text-decoration: none;
        display: inline-block;
        width:40%;
        /*height:500px;*/
        padding-top: 5%;
        padding-left: 5%;
        padding-right: 5%;
        font-size: 2.2vw;
        font-family: 'Raleway', sans-serif;
        float:right;
    }

    #body-paragraph {
        font-size: 2vw;
        display:inline-block;
    }

    #aweber-form-container {
        float:right;
        width:50%;
    }

    #aweber-form {
        position: relative;
        left:25%;
        width:50%;
        height:50%;
    }
}

/*This is for mobile/narrow devices*/
@media screen and (max-width: 1480px) {

    #aweber-form-container {
        position:relative;
        top:50px;
/*        width:200vw;
        left:-50vw;
*/    }

    #aweber-form {
        position: relative;
/*        left:25%;
        width:50%;
*/        height:600px;
    }

    #dot-center{
        position: relative;
        left:-100px;
        top:50px;
    }

    #dot {
      height: 200px;
      width: 200px;
      /*background-color: #bbb;*/
      background-color: #000;
      border-radius: 50%;
      display: inline-block;
    }

    #studioinfo {
        position:relative;
        background-color: #63CD74; /* 4CAF50 Green */
        border: none;
        color: white;
        /*padding: 15px 32px;*/
        text-align: center;
        text-decoration: none;
        font-family: 'Raleway', sans-serif;
        display: inline-block;

        float:right;
        width:90%;
/*        height:500px;
*/        font-size: 3.3vh;
        padding-top: 5%;
        padding-left: 5%;
        padding-right: 5%;
        line-height: 78px;
    }

    #body-paragraph {
        font-size: 2vh;
        display:inline-block;
    }
}