/*------------------------------------*\
    RESET
\*------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0b1 | 201101 
    NOTE:WORK IN PROGRESS
    USE WITH CAUTION AND TEST WITH ABANDON */

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
    display:block;
}
body{
    line-height:1;
}
ol,ul{
    list-style:none;
}
blockquote,q{
    quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
    content:’’;
    content:none;
}
/* remember to define visible focus styles! 
:focus{
    outline:?????;
} */

/* remember to highlight inserts somehow! */
ins{
    text-decoration:none;
}
del{
    text-decoration:line-through;
}

table{
    border-collapse:collapse;
    border-spacing:0;
}





/*------------------------------------*\
    $MAIN
\*------------------------------------*/
/* GO! */


.group:after {
  content: "";
  display: table;
  clear: both;
}


.parent {

}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border:1px solid #231f20;
  background:#231f20;
  min-width:1200px;
}

.child .panel img {
    width: 100%;
    height: auto;
}

.panel {
    background:#fff;
    width:50%;
    float:left;
    position:relative;
    overflow:hidden;
}

.panel img {
  filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
  filter: gray; /* IE5+ */
  -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
  -webkit-transition: all .5s ease-in-out;
  opacity:0.8;
  display:block;
}

.panel img:hover {
    filter: none;
    -webkit-filter: grayscale(0);
    opacity:1;
    -webkit-transform: scale(1.01);
}


footer {
    background:#231f20;
    padding:15px 30px;
    font-family: Tahoma, Verdana, sans-serif;
}


.button {
    background:#66c6eb;
    color:#fff;
    border-radius: 10px;
    text-decoration: none;
    padding: 0.125em 0.875em 0.25em;
     display: inline-block;
    font-size: 1.125em;
    line-height: 1.25em;
    margin-top: 22px;
}



.logo, .social, .join {
    width:33.33%;
    float:left;
    margin-top:10px;
}

.social {
    text-align:center;
}

.social ul {
    display: inline-block;
    margin:0;
    padding:0;
}

.social ul li {
    display:inline-block;
    margin:0 5px;
}

.social ul li a { 
    width:30px;
    height:30px;
    display: block;
    text-indent: -9999px;
    overflow:hidden;
    margin-top:20px;
}

.social ul li.twitter a {
    background:url(../img/twitter.png) no-repeat;
}

.social ul li.fb a {
    background:url(../img/fb.png) no-repeat;
}

.social ul li.instagram a {
    background:url(../img/instagram.png) no-repeat;
}

.join {
    text-align:right;
}


/* Desktops  ----------- */
@media only screen  and (max-width:1240px) {

    .parent {
        padding:20px;
    }

    .child {
        min-width:1px;
        width:90%;
    } 


    .button {
        font-size:0.875rem;
        margin-top:25px;
    }

}


@media only screen  and (max-width:800px) {



    .logo, .social, .join {
        width:100%;
        float:none;
        text-align: center;
        margin-top:0;
    }


    .logo {
      margin-top:20px;
    }


    footer {
        padding-bottom:50px;
    }

}

@media only screen  and (max-width:480px) {

   .panel {
        float:none;
        width:100%;
        border-bottom:1px solid #231f20;
   } 

   .child {
      transform: translate(0);
      left:0%;
      margin:0;
      margin-top:10px;
      position:relative;
      width:100%;
   }

}