@charset "UTF-8";

/*******************************
 *******************************
 **                           **
 **    4 in 1 Party Styles    **
 **    by @bzelip             **
 **                           **
 *******************************
 *******************************/

/* Reset
================================================== */
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,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}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:none}table{border-collapse:collapse;border-spacing:0}*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}


/* Scaffolding
================================================== */
html, body {
  height: 100%;
}

html {
  font-size: 20px;
}
@media (min-width: 48em) {
  html {
    font-size: 30px;
  }
}

body {
  font: 300 1rem/1.5 "Open Sans", sans-serif;
  color: rgb(51,51,51);
}


/* Grid adapted from http://mdo.github.io/table-grid
================================================== */
.row,
.col {
  display: block;
}

.row {
}

.col {
  padding: 1.5rem;
  border: 1px solid black;
}
@media (min-width: 48em) {
  .row {
    display: table;
    width: 100%;
    height: 50vh;
    table-layout: fixed;
  }
  .col {
    display: table-cell;
    padding: 0 1.5rem;
    vertical-align: middle;
    border: none;
  }
}


/* Texts
================================================== */
h1 {
  font-size: 2.5rem;
  font-weight: 700;
}


/* Sections
================================================== */
nav {
  text-align: center;
}

.toggle-title p {
  line-height: 1;
  font-size: 1.5rem;
}

.toggle-container .toggle-descrip {
  display: none;
  font-size: .55rem;
}

.toggle-descrip p {
  margin-bottom: .3rem;
  text-align: justify;
  line-height: 1.2;
}

.title {
  font-size: .65rem;
  font-weight: 700;
  text-align: center;
}
@media (min-width: 48em) {
  .toggle-container:hover .toggle-title {
    display: none;
  }
  .toggle-container:hover .toggle-descrip {
    display: block;
  }
}


#connect,
#survey,
#like,
#about {
  color: white;
}

#connect {
  background-color: #0074D9;
}

#survey {
  background-color: green;
}

#like {
  background-color: #FF851B;
}

#about {
  background-color: rgb(51,51,51);
}
@media (min-width: 48em) {
  #connect,
  #survey {
    border-bottom: .5rem solid white;
  }

  #like,
  #about {
    border-top: .5rem solid white;
  }

  #connect,
  #like {
    border-right: .5rem solid white;
  }

  #survey,
  #about {
    border-left: .5rem solid white;
  }
}


/* Utilities
================================================== */
strong, .strong {
  font-weight: 700;
}

em {
  font-style: italic;
}