/* Custom Stylesheet */
/**
 * Use this file to override Materialize files so you can update
 * the core Materialize files in the future
 *
 * Made By MaterializeCSS.com
 */
body {
  font-size:100%;
  font-weight: 400;
   color:#FFFFFF;
}
.icon-block {
  padding: 0 15px;
}
.root{
 background-color: "white"; 
}
@font-face {
  font-family: "Proxima";
  src: local(Proxima Thin), url("../font/proximanova.otf") format("otf"), url("../font/proximanova.otf") format("otf"), url("../font/ProximaNova.ttf") format("truetype");
  font-weight: 200; }

@font-face {
  font-family: "Proxima";
  src: local(Proxima Light), url("../font/proximanova.otf") format("otf"), url("../font/proximanova.otf") format("otf"), url("../font/ProximaNova.ttf") format("truetype");
  font-weight: 300; }

@font-face {
  font-family: "Proxima";
  src: local(Proxima Regular), url("../font/proximanova.otf") format("otf"), url("../font/proximanova.otf") format("otf"), url("../font/ProximaNova.ttf") format("truetype");
  font-weight: 400; }

@font-face {
  font-family: "Proxima";
  src: url("../font/proximabold.otf") format("otf"), url("../font/proximabold.otf") format("otf"), url("../font/ProximaBold.ttf") format("truetype");
  font-weight: 500; }

@font-face {
  font-family: "Proxima";
  src: url("../font/proximabold.otf") format("otf"), url("../font/proximabold.otf") format("otf"), url("../font/ProximaBold.ttf") format("truetype");
  font-weight: 700; }

a {
  text-decoration: none; 
  color:#FFFFFF;
 }

html {
  line-height: 1.5;
  font-family: "Proxima";
  font-weight: normal;
  color:#FFFFFF; }
  @media only screen and (min-width: 0) {
    html {
      font-size: 75%;
      line-height: 80%;
       } }
  @media only screen and (min-width: 700px) {
    html {
      font-size: 100%; } }
  @media only screen and (min-width: 1000px) {
    html {
      font-size: 100%; } }
  @media only screen and (min-width: 1024px) {
    html {
      font-size: 110%; } }
  @media only screen and (min-width: 1300px) {
    html {
      font-size: 130%; } }
  @media only screen and (min-width: 2560px) {
    html {
      font-size: 160%; } }
   

h1, h2, h3, h4, h5, h6{
  font-weight: 700;
  
  line-height: 1.1; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  font-weight: inherit;
  color:#FFFFFF; }


 
h1 {
  font-size: 4.8rem;
  
  line-height: 90%;
  margin: 2.1rem 0 1.68rem 0; }
h1.huge {
  font-size: 1000%;
  margin-top:0%;
}
@media only screen and (min-width: 451px) and (max-width: 520px) {
    h1.huge {
  font-size: 800%;} }
@media only screen and (max-width: 450px) {
    h1.huge {
  font-size: 600%;
  } }

h2 {
  font-size: 2.89rem;
  line-height: 110%;
 
  margin: 1.78rem 0 1.424rem 0; }

h3 {
  font-size: 1.78rem;
  line-height: 110%;

  margin: 1.16rem 0 1.168rem 0; }

h4 {
  font-size: 1.21rem;
  line-height: 110%;

  margin: 0.8rem 0 0.8rem 0; }

h5 {
  font-size: 1.64rem;
  line-height: 110%;
 
  margin: 0.82rem 0 0.656rem 0; }

h6 {
  font-size: 1rem;
  line-height: 110%;
  
  margin: 0.5rem 0 0.4rem 0; }

p {
  font-size: 1rem;
  font-weight: 100;
  line-height: 140%;
  
  margin: 0.5rem 0 0.4rem 0; }
}
.forcep {
  font-size: 1rem;
  font-weight: 100;
  line-height: 120%;
  margin: 0.5rem 0 0.4rem 0; }
}

em {
  font-style: italic; }

strong {
  font-weight: 500; }

small {
  font-size: 75%; }

.light, footer.page-footer .footer-copyright {
  font-weight: 300; }

.thin {
  font-weight: 200; }

.flow-text {
  font-weight: 300; }
  @media only screen and (min-width: 360px) {
    .flow-text {
      font-size: 1.2rem; } }
  @media only screen and (min-width: 390px) {
    .flow-text {
      font-size: 1.224rem; } }
  @media only screen and (min-width: 420px) {
    .flow-text {
      font-size: 1.248rem; } }
  @media only screen and (min-width: 450px) {
    .flow-text {
      font-size: 1.272rem; } }
  @media only screen and (min-width: 480px) {
    .flow-text {
      font-size: 1.296rem; } }
  @media only screen and (min-width: 510px) {
    .flow-text {
      font-size: 1.32rem; } }
  @media only screen and (min-width: 540px) {
    .flow-text {
      font-size: 1.344rem; } }
  @media only screen and (min-width: 570px) {
    .flow-text {
      font-size: 1.368rem; } }
  @media only screen and (min-width: 600px) {
    .flow-text {
      font-size: 1.392rem; } }
  @media only screen and (min-width: 630px) {
    .flow-text {
      font-size: 1.416rem; } }
  @media only screen and (min-width: 660px) {
    .flow-text {
      font-size: 1.44rem; } }
  @media only screen and (min-width: 690px) {
    .flow-text {
      font-size: 1.464rem; } }
  @media only screen and (min-width: 720px) {
    .flow-text {
      font-size: 1.488rem; } }
  @media only screen and (min-width: 750px) {
    .flow-text {
      font-size: 1.512rem; } }
  @media only screen and (min-width: 780px) {
    .flow-text {
      font-size: 1.536rem; } }
  @media only screen and (min-width: 810px) {
    .flow-text {
      font-size: 1.56rem; } }
  @media only screen and (min-width: 840px) {
    .flow-text {
      font-size: 1.584rem; } }
  @media only screen and (min-width: 870px) {
    .flow-text {
      font-size: 1.608rem; } }
  @media only screen and (min-width: 900px) {
    .flow-text {
      font-size: 1.632rem; } }
  @media only screen and (min-width: 930px) {
    .flow-text {
      font-size: 1.656rem; } }
  @media only screen and (min-width: 960px) {
    .flow-text {
      font-size: 1.68rem; } }
  @media only screen and (max-width: 360px) {
    .flow-text {
      font-size: 1.2rem; } }
/*
font-family: 'Proxima Nova A Cond Regular'
font-family: 'Proxima Nova A Cond Bold'

@font-face {
  font-family: "Proxima Nova A Cond Regular";
  src: url("../font/proximanova.otf");

}

@font-face {
  font-family: "Proxima Nova A Cond Bold";
  src: url("../font/proximabold.otf");
 
}




  html{
  	 font-family: "Proxima Nova A Cond Bold";
     
  }
  h1 {
    font-family: "Proxima Nova A Cond Bold";
     font-size: 6em; 
     color:#ffffff;
     
  }

  h2 {
    font-family: "Proxima Nova A Cond Bold";
    font-size: 3.5em; 
    color:#ffffff;
  }
  h3 {
    font-family: "Proxima Nova A Cond Regular";
    font-size: 2.15em;
    color:#ffffff;
    font-weight: normal;
  }

  h4 {
    font-family: "Proxima Nova A Cond Regular";
    font-size: 1.45em;
    color:#ffffff;
    font-weight: lighter;

  }
  a {
    font-family: "Proxima Nova A Cond Regular";
    font-size: 1.45em;
    color:#ffffff;
    font-weight: lighter;
  }
   h4.bold {
    font-family: "Proxima Nova A Cond Regular";
    font-size: 1.45em;
    color:#ffffff;
    font-weight: normal;

  }

h5 {
    font-family: "Proxima Nova A Cond Regular";
    font-size: 1.3em;
    color:#ffffff;
    font-weight: lighter;
  }

  h6 {
    font-family: "Proxima Nova A Cond Regular";
    font-size: 1.2em;
    color:#ffffff;
    font-weight: lighter;
  }

  p {
    font-family: "Proxima Nova Cond Regular";
    font-size: 1.2em;
    color:#ffffff;
    font-weight: lighter;
    text-decoration: none;
  }
  p.bold {
    font-family: "Proxima Nova Cond Regular";
    font-size: 1.2rem;
    color:#ffffff;
    
  }
  */
  
  .vertical-center {
    display: block;
    margin-left: auto;
    margin-right: auto; 
    vertical-align: middle;
    line-height: 500px;
    
  }
 .buttonbox
{  
  background-color: transparent;
  border: 4px solid #ffffff;
  width:292px;
  height:94px;

  font-weight: 234;
  font-size: 1.5rem;
  vertical-align: middle;
}

.btn-flat:hover, .btn-flat-large:hover {
    background-color: #000000;
    opacity: 0.8; }

div.redbox
{
  
  background-color: #f10017;
  border: 0px solid black;
  height:100%;
  
}


div.blackbox
{
  
  background-color: #000000;
  border: 0px solid black;
  height:100%;
  
}

div.yellowbox
{
  
  background-color: #dfdf3a;
  border: 0px solid black;
  height:100%;

  
}


div.pinkbox
{
  
  background-color: #F84E57;
  border: 0px solid black;
  height:100%;
  
}


div.magentabox
{
  
  background-color: #65084f;
  border: 0px solid black;
  height:100%;
  
}


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

  .topmargin {
    top:30px;
  }
  
  .collapsible-header i {
    width: 2rem;
    font-size: 1.6rem;
    height:100%;
    display: block;
    
    text-align: center;
    margin-right: 1rem;
    margin-bottom:6.4rem; }

  div.fullscreen {
    
    height: 100%;
    min-height:800px;
    /*background-image:*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 40% 0%;
    width:100%;
    margin-bottom: 0px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
  } 

    div.redbox p
  {
    margin: 5%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 1.4rem;
    font-weight: 100;
    text-align: center;
      
  }


  div.blackbox p
  {
    margin: 15%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 1.4rem;
    font-weight: 100;
      
  }

  div.yellowbox p
  {
    margin: 15%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 1.4rem;
    font-weight: 100;
    text-align: center;
      
  }


  div.pinkbox p
  {
    margin: 15%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 1.4rem;
    font-weight: 100;
    text-align: center;
      
  }

  div.magentabox p
  {
    margin: 15%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 1.4rem;
    font-weight: 100;
    text-align: center;
      
  }
 h1.header {
    font-family: "proxima";
    font-weight: bold;
    font-size: 6.0rem; 
    font-weight:200;
    text-align: center;
  }
  h1 {
    font-family: "proxima";
    font-weight: 295;
     font-size: 3.0rem; 
     color:#ffffff;
     
  }

}

@media only screen and (max-width: 600px) and (min-width: 351px) {
  .topmargin {
      top:30px;
    }
p {
  font-size: 125%;
  font-weight: 100;
  line-height: 140%;
  
  margin: 0.5rem 0 0.4rem 0; }
}
  .collapsible-header i {
    width: 2rem;
    font-size: 1.6rem;
    height:100%;
    display: block;
    float: left;
    text-align: center;
    margin-right: 1rem;
    margin-bottom:4.4rem; }

  div.fullscreen {
    
    height: 100%;
    min-height:800px;
    /*background-image:*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 40% 0%;
    width:100%;
    margin-bottom: 0px;

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
  } 

    div.redbox p
  {
    margin: 5%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 1.7rem;
    font-weight: 100;
    text-align: center;
      
  }


  div.blackbox p
  {
    margin: 15%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 1.7rem;
    font-weight: 100;
      
  }

  div.yellowbox p
  {
    margin: 15%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 1.7rem;
    font-weight: 100;
    text-align: center;
      
  }


  div.pinkbox p
  {
    margin: 15%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 1.7rem;
    font-weight: 100;
    text-align: center;
      
  }

  div.magentabox p
  {
    margin: 15%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 1.7rem;
    font-weight: 100;
    text-align: center;
      
  }
  h1.header {
    font-family: "proxima";
    font-weight: bold;
    font-size: 8.0rem; 
    font-weight:200;
    text-align: center;
  }

}
@media only screen and (max-width : 601px) {
  .topmargin {
   top:30px;
  }
  p {
  font-size: 125%;
  font-weight: 100;
  line-height: 140%;
  
  margin: 0.5rem 0 0.4rem 0; }
}
  .collapsible-header i {
    width: 2rem;
    font-size: 1.6rem;
    height:100%;
    display: block;
    float: left;
    text-align: center;
    margin-right: 1rem;
    margin-bottom:2.3rem; }
  div.fullscreen {
    height: 140%;
    min-height:1000px;
    
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 45% 0%;
    margin-bottom: 0px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
  } 

  div.redbox p
  {
    margin: 15%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 1.9rem;
    font-weight: 100;
    text-align: center;
      
  }


  div.blackbox p
  {
    margin: 25%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 1.9rem;
    font-weight: 100;
      
  }

  div.yellowbox p
  {
    margin: 25%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 1.9rem;
    font-weight: 100;
    text-align: center;
      
  }


  div.pinkbox p
  {
    margin: 25%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 1.9rem;
    font-weight: 100;
    text-align: center;
      
  }

  div.magentabox p
  {
    margin: 25%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 1.9rem;
    font-weight: 100;
    text-align: center;
      
  }

  h1.header {
    font-family: "proxima";
    font-weight: bold;
    font-size: 10.0rem; 
    font-weight:200;
    text-align: center;
  }
}
@media only screen and (min-width : 602px) {
  .topmargin {
   top:30px;
  }
  .collapsible-header i {
    width: 2rem;
    font-size: 1.6rem;
    height:100%;
    display: block;
    float: left;
    text-align: center;
    margin-right: 1rem;
    margin-bottom:2.3rem; }
  div.fullscreen {
    height: 140%;
    min-height:1000px;
    
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 60% 0%;
    margin-bottom: 0px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
  } 

  div.redbox p
  {
    margin: 15%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 1.9rem;
    font-weight: 100;
    text-align: center;
      
  }


  div.blackbox p
  {
    margin: 25%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 1.9rem;
    font-weight: 100;
      
  }

  div.yellowbox p
  {
    margin: 25%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 1.9rem;
    font-weight: 100;
    text-align: center;
      
  }


  div.pinkbox p
  {
    margin: 25%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 1.9rem;
    font-weight: 100;
    text-align: center;
      
  }

  div.magentabox p
  {
    margin: 25%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 1.9rem;
    font-weight: 100;
    text-align: center;
      
  }

  h1.header {
    font-family: "proxima";
    font-weight: bold;
    font-size: 10.0rem; 
    font-weight:200;
    text-align: center;
  }
}
@media only screen and (min-width : 602px) and (max-width : 995px) {
  .topmargin {
    top:30px;
  }
  .collapsible-header i {
    width: 2rem;
    font-size: 1.6rem;
    height:100%;
    display: block;
    float: left;
    text-align: center;
    margin-right: 1rem;
    margin-bottom:2.3rem; }
  div.fullscreen {
    height: 140%;
    min-height:1000px;
    
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 0%;
    margin-bottom: 0px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
  } 

  div.redbox p
  {
    margin: 15%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 1.9rem;
    font-weight: 100;
    text-align: center;
      
  }


  div.blackbox p
  {
    margin: 25%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 1.9rem;
    font-weight: 100;
      
  }

  div.yellowbox p
  {
    margin: 25%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 1.9rem;
    font-weight: 100;
    text-align: center;
      
  }


  div.pinkbox p
  {
    margin: 25%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 1.9rem;
    font-weight: 100;
    text-align: center;
      
  }

  div.magentabox p
  {
    margin: 25%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 1.9rem;
    font-weight: 100;
    text-align: center;
      
  }

  h1.header {
    font-family: "proxima";
    font-weight: bold;
    font-size: 10.0rem; 
    font-weight:200;
    text-align: center;
  }
}

@media only screen and (min-width : 996px) and (max-width : 1399px) {
  .topmargin {
    top:100px;
  }
  .collapsible-header i {
    width: 2rem;
    font-size: 1.6rem;
    height:100%;
    display: block;
    float: left;
    text-align: center;
    margin-right: 1rem;
    margin-bottom:1.0rem; }
  }

@media only screen and (min-width : 1400px) {
  .topmargin {
    top:100px;
  }
  .collapsible-header i {
    width: 2rem;
    font-size: 1.6rem;
    height:100%;
    display: block;
    float: left;
    text-align: center;
    margin-right: 1rem;
    margin-bottom:0rem; }
  div.fullscreen {
    height: 140%;
    min-height:1200px;
    
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 60% 0%;
    margin-bottom: 0px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
  } 

  div.redbox p
  {
    margin: 15%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 2.9rem;
    font-weight: 100;
    text-align: center;
      
  }


  div.blackbox p
  {
    margin: 25%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 2.9rem;
    font-weight: 100;
      
  }

  div.yellowbox p
  {
    margin: 25%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 2.9rem;
    font-weight: 100;
    text-align: center;
      
  }


  div.pinkbox p
  {
    margin: 25%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 2.9rem;
    font-weight: 100;
    text-align: center;
      
  }

  div.magentabox p
  {
    margin: 25%;
    font-family: "proxima";
    font-weight: bold;
    font-size: 2.9rem;
    font-weight: 100;
    text-align: center;
      
  }
  h1.header {
    font-family: "proxima";
    font-weight: bold;
    font-size: 20.0rem; 
    font-weight:200;
    text-align: center;
  }
}

input.subscribe {
  background-color: transparent;
  border: 2px solid #000000;
  border-style: 0;
  color:#000000;
  font-weight: 200;
  border-radius: 2px;
  outline: none;
  height: 2.2rem;
  width: 100%;
 
  font-size: 1.2rem;
 

}


.circle
{
  background: #000000;
  background-color: #000000;
  color: white;
  font-weight: 100;
  font-size: 10px;
  
  height: 30px!important;
  width: 30px!important;
  border-radius:50%;
  text-align: center;
  line-height: 30px;
  
}
.fit2lines {
    line-height: 1.5em;
    height: 3em;       /* height is 2x line-height, so two lines will display */
    overflow: hidden;  /* prevents extra lines from being visible */
}

.tabs {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  position: relative;
  height: 48px;
  background-color: #fff;
  margin: 0 auto;
  width: 100%;
  white-space: nowrap; }
  .tabs .tab {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: block;
    float: left;
    text-align: center;
    line-height: 48px;
    height: 48px;
    padding: 0 20px;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .8px;
    width: 15%; }
    .tabs .tab a {
      color: #f10017;
      display: block;
      width: 100%;
      height: 100%;
      -webkit-transition: color .28s ease;
      -moz-transition: color .28s ease;
      -o-transition: color .28s ease;
      -ms-transition: color .28s ease;
      transition: color .28s ease; }
      .tabs .tab a:hover {
        color: #f10017; }
    .tabs .tab.disabled a {
      color: #f10017;
      cursor: default; }
  .tabs .indicator {
    position: absolute;
    bottom: 0;
    height: 2px;
    background-color: #f10017;
    will-change: left, right; }

.no-whitespace {
    line-height: 0;
    font-size: 0;
}

ul.images {
  white-space-collapse: discard;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  width: 100%;
  overflow-x: auto;
  background-color: #ddd;
}
ul.images li {
  display: inline;
  height: 100%;
}
 .slider .indicators .indicator-item {
      display: inline-block;
      position: relative;
      cursor: pointer;
      height: 10px;
      width: 10px;
      margin: 0 8px;
      background-color: #e0e0e0;
      -webkit-transition: background-color .3s;
      -moz-transition: background-color .3s;
      -o-transition: background-color .3s;
      -ms-transition: background-color .3s;
      transition: background-color .3s;
      border-radius: 50%; }


.tab:active h3   {
  background-color:#ff0000;
}

li.fullscreen {
    
    height: 100%;
    /*background-image:*/
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: 50% 0%;
    margin-bottom: 0px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
  } 





  /* ALS COMPONENT FOR VERTICAL SCROLLER */
  /*************************************
 * generic styling for ALS elements
 ************************************

.als-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0px auto;
  z-index: 0;
}

.als-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  max-height: 100%
  margin: 0px auto;
}

.als-wrapper {
  position: relative;
  list-style: none;

}


.als-item {
  position: relative;
  display: block;
  text-align: center;
  cursor: pointer;
  float: left;
}

.als-prev, .als-next {
  


  clear: both;
}
/*************************************
 * specific styling for #demo2
 ************************************

#bloglist {
  margin:0px;
  margin-top:-21px;
  width:100%;
  max-height:30%;
}

#bloglist .als-item {
  
  margin: 0px;
  padding: 0px 0px 0px 0px;
  min-width: 33.3333%;
  min-height:100%;
  
  
  text-align: center;
}

#bloglist .als-item img {
  display: block;
  margin: 0;
  vertical-align: left;
  
  min-height:100%;

}

#bloglist .als-prev, #demo2 .als-next {
  
}

#bloglist .als-prev {

}

#bloglist .als-next {
 
}*/
 /* ALS COMPONENT FOR VERTICAL SCROLLER */
  /*************************************
 * generic styling for ALS elements
 ************************************/

/*************************************
 * specific styling for #demo2
 ************************************/

#bloglist {
  margin:0px;
  margin-top:-21px;
  min-width:100%!important;
  max-height:30%!important;
  min-height: 333px!important;
  width:100%;
  height:333px;
}



#bloglist .als-prev, #demo2 .als-next {
  top: 0px;
}

#bloglist .als-prev {
  /*left: 200px;*/
}

#bloglist .als-next {
  /*right: 200px;*/
}

/* The Magic */
.accordion:hover .accordion-item:hover .accordion-item-content,
.accordion .accordion-item--default .accordion-item-content {
    height: 100% ;
    /*14em;*/
    
}

.accordion-item-content,
.accordion:hover .accordion-item-content {
    height: 0;
    overflow: hidden;
    transition: height .10s;
    
    
}
.accordion-item:hover h4 {
  color:black;
}
.accordion-item:hover .circle {
  color:white;
  background-color:black;
}
.accordion-item h4 {
  color:white;
}
.accordion-item .circle {
  color:#f10017;
  background-color:#ffffff;
 
}
.showsubmenu{
  display:block;
}
.hidesubmenu{
  display:none;
}
.activator {
      cursor: pointer; 
}

.menuitem {
  font-family:"Proxima";
  display:block;

  font-size: 1.0rem!important;
  font-weight: 100;
  width:100%!important;

 
 
}
.subitem {
  font-family:"Proxima";
  display:block;
  margin-left:5%!important;
  margin-top:-12%!important;
  font-size: 0.9rem!important;
  font-weight: 100;
  
 
}

.longsubitem {
  font-family:"Proxima";
  display:block;
  margin-left:5%!important;
  margin-top:-12%!important;
  font-size: 0.9rem!important;
  font-weight: 100;
 
  white-space:nowrap;
 
}
.dynamic_margin {
  margin-top:0%!important;
}
@media only screen and (min-width: 451px) and (max-width: 520px) {
    .dynamic_margin {
  margin-top:0%!important;} }
@media only screen and (max-width: 450px) {
    .dynamic_margin {
  margin-top:-60%!important;} }



.als-container {
  position: relative;
  width: 100%;
  height:333px!important;
  min-height: 333px!important;
   
  margin: 0px auto;
  z-index: 0;
}

.als-viewport {
  position: relative;
  overflow: hidden;
  width: 100%!important;
  margin: 0px auto;
  height: 333px!important;
}

.als-wrapper {
  position: relative;
  list-style: none;
 
}

.als-item {
  position: relative;
  display: block;
  text-align: center;
  cursor: pointer;
  float: left;
 

}
.bloglist ul { 
    width: 100%
    display: block;
    white-space: nowrap;
    font-size: 0;
    overflow: auto; 
     }
.bloglist li { 
     position: relative;
     text-align: center;
     min-width:320px;

     max-width: 100%;
     height: 333px;
     cursor: pointer;
     display: inline-block;
     word-wrap: break-all;

     }
.als-prev, .als-next {
  
  /*clear: both;*/
}