/*
Site: VIP-AITIO
Code by: ssdaemon
Author URI: http://samusalovaara.com
Description: V.I.P LODGES @ HARTWALL ARENA, FINLAND
Version: 1.0
*/






@font-face {
    font-family: 'Sansation';
    src: url('font/Sansation-webfont.woff2') format('woff2'),
         url('font/Sansation-webfont.woff') format('woff'),
         url('font/Sansation-webfont.ttf') format('truetype'),
         url('font/Sansation-webfont.svg#bagnard_regularregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/****BODY AND SPIRIT*****/ /* for mobile*/

body {
	font-family: 'Work Sans', Sans-Serif;
  font-weight: 300;
	  font-size: 1.3em;
    line-height: 1.5em;
    letter-spacing: 0.6px;
	width: 100%;
  margin: 0 auto;
	background-color: #030303;
	color: #e4e3dc;
  position: relative;

}

#content {
   min-height:100%;
   position:relative;
   display: inline-block;
}

h1{
  font-size: 1.8em;
  font-family: 'Sansation', Sans-Serif;
   text-align: center;
   margin:0em;
   color: #e4e3dc;
   
}

h2{
  font-size: 1.4em;
  font-family: 'Sansation', Sans-Serif;
   text-align: center;
   margin:0em;
   padding-top: 1em;
   color: #e4e3dc;
}

h3{
  font-size: 1.4em;
  font-family: 'Work Sans', Sans-Serif;
  font-weight: 300;
   text-align: center;
   margin:0em;
   padding-top: 3em;
}

a{
  color: #e4e3dc;
  font-size: 1em;
}

/* TEXT HIGHLIGHT*/
.hl{
  font-family: 'Sansation', Serif;
  font-style: italic;
  font-weight: 700;
}


.hl-numero{
    font-family: 'Sansation', Serif;
    font-size: 180%;
    line-height: 2em;

    }



.mono{
  font-family: monospace;
}


/*CONTENT*/


#vip {
  margin: auto 3.8%;
  width: 93%;
 padding-top: 1em;
  font-family: 'Work Sans', Sans-Serif;
  font-weight: 300;
  display: inline-block;
}



#info p{
    letter-spacing: 0.5px;
    line-height: 1.7em;

}

#info-full{
  width: 100%;
  font-size: 1em;
  text-align: center;
  font-weight: 700;
}

#info-full-2{
  width: 100%;
  font-size: 0.8em;
  text-align: center;
  margin-bottom:40px;
}



#about {
  margin: auto;
  width: 90%;
 padding-top: 1em;
  font-family: 'Work Sans', Sans-Serif;
  font-weight: 300;
 text-align: left;
padding-bottom: 2em;
font-size: 0.7em;
line-height: 1.4em;
  /*background-color: #b2bd1a;*/
}

#logo {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    letter-spacing: 5px;
    text-align: center;
}




#vip-logo-container {
  height:34%;
  position: relative;
  transition: ease-in-out 0.3s;
      margin-bottom: -3em;
}

#vip-logo{
  position: absolute;
  top: 55%;
  left: 50%;
  margin-right:-50%;
  transform: translate(-50%, -50%);
  letter-spacing: 5px;
  padding-left: 1em;
  padding-right: 1em;
}

#vip-logo h1{
  font-size: 2.5em;
  margin-bottom: 20px;
  font-family: 'Sansation', Serif;
}

#vip-logo p{
  font-size: 0.7em;
  text-transform: uppercase;
  font-family: 'Work Sans', Sans-Serif;
  text-align: center;

}



#vip-logo-info {
    text-align: center;
    letter-spacing: 5px;
        margin-bottom: 2em;
}


#vip-logo-info p {
    text-transform: uppercase;
    font-size: 0.7em;
}



img{
  width: 80%;
  margin: 12px 10%;

}

#book{
  width: 100%;
  font-size: 1.3em;
  text-align: center;
  color:#e4e3dc;
  margin-top: 30%
}

#book p {
    text-align: center;
        line-height: 1.5em;
}


/*------Footer------*/

.footer {
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  letter-spacing: 2px;
  font-size: 0.5em;
  text-align: center;
}


/*----N a v i g a t i o n -----*/

#main-nav{
  margin-bottom: 1em;
  /*margin-left: 10%;*/
    margin-right: auto;
        font-weight: 400;
}



#sub-nav{
  margin-bottom: 5em;
  margin-left: 10%;
    margin-right: auto;

}


#nav-tab {
    height: 3.5em;
    position: relative
  }

#nav-tab p {
    margin: 0;
    /* background: yellow; */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    font-size: 2.3em;
    font-family: 'Sansation', Sans-Serif;
  }

#nav-tab a {
  color: #e4e3dc;
  text-decoration: none;
  border-bottom: 0px solid #e4e3dc;
  transition: ease-in-out 0.3s;
 
  
}

#nav-tab a:hover{
  color: #e4e3dc;
  font-size: 115%;
  text-decoration: none;
  padding-bottom: 20px;
  border-bottom: 5px solid #e4e3dc;
  
}

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

/* OSTA AITIO NAV*/

#osta-nav{
  /*margin-bottom: 5em;*/
  
    margin-right: auto;
    padding-top: 4em;
    padding-bottom: 3em;
}

#osta-nav-tab {
    height: 5em;
    position: relative
  }

#osta-nav-tab p {
    margin: 0;
    /* background: yellow; */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    font-family: 'Sansation', Sans-Serif;
  }

#osta-nav-tab a {
  color: #e4e3dc;
  text-decoration: none;
  border: 2px solid #e4e3dc;
padding: 10px 30px 20px 30px;
    font-size: 1.2em;
    transition: ease-in-out 0.3s;
 display: block;
 text-align: center;
 line-height: 1.2em;
  border-radius: 20px;
}

#osta-nav-tab a:hover{
  color: #e4e3dc;
  font-size: 90%;
  text-decoration: none;
  padding-bottom: 10px;
  border: 4px solid #e4e3dc;

}


/*----N a v i g a t i o n  2.0-----*/


#nav-tab-2 {
     height: 3em;
    position: relative;
    width: 24.99%;
    float: left;
  }



#nav-tab-2 p {
    margin: 0;
    /* background: yellow; */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    font-size: 1.2em;
    font-family: 'Sansation', Sans-Serif;
  }

#nav-tab-2 a {
  color: #e4e3dc;
  text-decoration: none;
  border-bottom: 0px solid #e4e3dc;
  transition: ease-in-out 0.3s;
 
  
}

#nav-tab-2 a:hover{
  color: #e4e3dc;
  font-size: 115%;
  text-decoration: none;
  padding-bottom: 20px;
  border-bottom: 5px solid #e4e3dc;
  
}




/*----N a v i g a t i o n  FOR INFO BUTTON-----*/


#nav-tab-info {
    height: 5em;
    position: relative;
    padding: 3em;

  }

#nav-tab-info p {
    margin: 0;
    /* background: yellow; */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    font-size: 2.8em;
    font-family: 'Sansation', Sans-Serif;
  }

#nav-tab-info a {
  color: #e4e3dc;
  text-decoration: none;
  border-bottom: 0px solid #e4e3dc;
 
  
}

#nav-tab-info a:hover{
  color: #e4e3dc;
  font-size: 115%;
  text-decoration: none;
  padding-bottom: 20px;
  border-bottom: 5px solid #e4e3dc;
  transition: ease 0.3s;
}

/************************************************/
/***************** AITIOKARTTA ******************/
/************************************************/
img.aitiokartta {
    max-width: 70%;
}

#kartta{
  width: 100%;
  font-size: 0.8em;
  text-align: center;
}


.aitio-specs {
    font-size: 0.7em;
}

/************************************************/
/****************** NAVIGATION ******************/
/************************************************/
nav {
    background: #e5e5e5;
    color: #1d1f20;
    left: 0;
    position: relative;
    top: 0;
    width: 100%;
    z-index: 9999;
}

/*** INPUT ***/
nav input {
    opacity: 0;
    position: absolute;
    z-index: -1;
}

/*** LABEL ***/
nav label {
    cursor: pointer;
    display: block;
    font: 2em/1 'Oswald', sans-serif;
    padding: 0.5em;
}

/* Hamburger Icon */
#menu-icon,
#menu-icon:before,
#menu-icon:after {
    background: #1d1f20;
    border-radius: 0.05em;
    height: 0.2em;
    transition: all 0.2s ease-in-out;
    width: 100%;
}

#menu-icon {
    display: inline-block;
    margin: 0.4em 0;
    max-width: 1em;
    position: relative;
}

nav label #menu-icon {
    float: right;
}

#menu-icon:before,
#menu-icon:after {
    content: '';
    left: 0;
    position: absolute;
}

#menu-icon:before {
    top: -0.4em;
}

#menu-icon:after {
    bottom: -0.4em;
}

/* Close Icon */
nav input[type=checkbox]:checked + label #menu-icon {
    background: transparent;
}

nav input[type=checkbox]:checked + label #menu-icon:before {
    top: 0;
    transform: rotate(-45deg);
}

nav input[type=checkbox]:checked + label #menu-icon:after {
    bottom: 0;
    transform: rotate(45deg);
}


/*** MENU ***/
/* Overlay */
nav input:checked ~ #overlay {
    background: #e5e5e5;
    bottom: 0;
    left: 0;
    height: 100vh;
    position: fixed;
    right: 0;
    top: 0;
    width: 100vw;
    z-index: -1;
}

/* List */
nav ul {
    font-size: 1.5em;
    list-style: none;
    margin: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    text-align: center;
}

nav input:checked ~ ul {
    margin: 1em;
    max-height: inherit;
    opacity: 1;
}

nav ul > li {
    margin: 0.5em 0;
}

nav ul a {
    color: #1d1f20!important;
    text-decoration: none;
}

nav ul a:hover {
    text-decoration: underline;
}

/* Social Media */
nav ul#social-media > li {
    display: inline-block;
    font-size: 1.5em;
    margin: 0.5em;
}


/*----- LANG NAV ------*/

#lang-nav{
      display: inline-block;
    width: 100%;
    max-width: 600px;
}

#lang-nav-tab {
    height: 3em;
    position: relative;
    width: 15%;
    float: left;
    margin-left: 5%;
  }

  #lang-nav-tab img{
   max-width: 38px;
  }




/*VIP AITIO BIG SCREEN*/ /*main slider*/

#slider{
  margin:0;
  padding: 0;
}

.load{
    animation: slide 2s;
}
.slider{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100vh;
    animation: slide 22s infinite;



}
.content{
    color: #e4e3dc;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
}


/*.screen{
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    letter-spacing: 5px;
    text-align: center;
}
.screen h1{
    font-size: 1.5em;
    margin-bottom: 20px;
}

.screen p{
    font-size: 0.7em;
    text-transform: uppercase;
  
}*/

@keyframes slide{
    0%{
        background-image: url('img/slider/vip1.jpg');
    }
    20%{
        background-image: url('img/slider/vip1.jpg');
    }
    20.01%{
        background-image: url('img/slider/vip2.jpg');
    }
    40%{
        background-image: url('img/slider/vip2.jpg');
    }
    40.01%{
        background-image: url('img/slider/vip3.jpg');
    }
    60%{
        background-image: url('img/slider/vip3.jpg');
    }
    60.01%{
        background-image: url('img/slider/vip4.jpg');
    }
    80%{
        background-image: url('img/slider/vip4.jpg');
    }
    80.01%{
        background-image: url('img/slider/vip5.jpg');
    }
    100%{
        background-image: url('img/slider/vip5.jpg');
    }
}

******  *       *
*       *       *
*   **  *       *
*    *  *       *
******  ******  ******

/*
VIP AITIO GALLERY
*/



div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 0px solid #777;
}

div.gallery img {
  width: 100%;
  margin: 0;
  height: auto;
}

.brightness {
    
    display: inline-block;
}

.brightness img:hover {
    opacity: .5;
     transition:0.3s ease-in-out;
}

div.aitio {
        padding: 15px;
    text-align: left;
    width: 20%;
    border: 3px solid;
    margin-left: 36%;
    margin-top: 2.5em;
    margin-bottom: 1em;
    font-size: 0.8em;

}

  .responsive {
        width: 80%;
    margin-left: 10%;
  }


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


/* Mail Chimp NEWSLETTER Styles */

#mc_embed_shell{
display: block;
    margin: 0px auto 50px;
    padding: 0px;
    width: 530px;
    max-width: 90%;
    border: solid 2px color(display-p3 0.894 0.89 0.867);
    border-radius: 20px;

  
  
}

#mc_embed_signup h2 {
    padding: 0;
    margin: 15px 0;
    font-size: 1em;
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
}

#mc_embed_signup {
font-family: 'Work Sans', Sans-Serif;
font-weight: 300;
}

#mc_embed_signup .button {
    clear: both;
    background-color: #37592a;
    border: 0 none;
    border-radius: 36px;
    transition: all 0.23s ease-in-out 0s;
    color: #FAFAFA;
    cursor: pointer;
    display: block;
    /* font-size: 15px; */
    font-weight: normal;
    height: 37px;
    line-height: 32px;
    margin: 0 auto;
    padding: 0 33px;
    text-align: center;
    text-decoration: none;
    /* vertical-align: top; */
    white-space: nowrap;
    width: fit-content;
    width: -moz-fit-content;
    font-family: 'Work Sans', Sans-Serif;
    font-weight: 600;
    text-transform: uppercase;
}

#mc_embed_signup .button:hover {
background-color: color(display-p3 0.894 0.89 0.867);
color: #111;
}

#mc_embed_signup .mc-field-group {
clear: left;
position: relative;
width: 96%;
padding-bottom: 3%;
min-height: 50px;
display: grid;
font-family: 'Work Sans', Sans-Serif;
font-weight: 300;
}


#mc_embed_signup .mc-field-group input {
    display: block;
    width: 90%;
    padding: 11px 0;
    text-indent: 2%;
    margin: 0 auto;
    background-color: #eeedeb;
    font-family: 'Work Sans', sans-serif ;
    font-weight: 700;
}

/*almost finished / confirm email message */
#mc_embed_signup div.response {
    margin: 1em auto;
    padding: 1em .5em 1.5em 1em;
    font-weight: bold;
    float: left;
    top: -1.5em;
    z-index: 1;
    width: 80%;
    background-color: #85ffb7;
    color: #fff;
    border-radius: 12px;
}


/* 
IMAGE HANDLER For Cat Planter
Lightbox based on Pure CSS Lightbox by Gregory Schier
*/

#ben{
  position: absolute;
    pointer-events: auto;
        z-index: -1;
        top:15%;
        right: 12%
}

#ben img{
  max-width:45%;
  float: right; margin: 0px 0px 15px 15px;
}

#ben1{
  max-width:35%;
  /* float: left; margin: 3% 5% -1% -2%; */
  height: auto;
  position: relative;
  display: inline-block; /* <= shrinks container to image size */
  transition: transform 150ms ease-in-out;
  }


#ben1 img{
  opacity: 1;
  animation: fadeIn 3s ease;
  transition: all 0.5s cubic-bezier(1, -0.02, 1, 1);


@keyframes fadeIn{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }}


}

#ben2{
  max-width:35%;
  /* float: right; margin: 3% 0% 3% 3%; */
  height: auto;
  position: relative;
  display: inline-block; /* <= shrinks container to image size */
  transition: transform 50ms ease-in-out;
}

#ben2 img{
  opacity: 1;
  animation: fadeIn 3s ease;
  transition: all 0.5s cubic-bezier(1, -0.02, 1, 1);


@keyframes fadeIn{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }}


}

.clickme-right{

  position: absolute;
  bottom: -5px;
  left: 0px;
  max-width: 110px !important;

}

.clickme-left{

  position: absolute;
  bottom: -5px;
  right: 0px;
  max-width: 110px !important;

}

.clickme-left:hover {
  transform: rotate( 15deg );
  transition:0.3s ease-in-out;
}

.clickme-right:hover {
  transform: rotate( -15deg );
  transition:0.3s ease-in-out;
}

.clickme-close{

  position: absolute;
    
    right: 2%;
    top: 3%;
    max-width: 100px !important;

}

.home{

    max-width: 30px !important;

}

.home img {
    width: 25px;
    transition: ease-in-out 0.3s;
}

.home img:hover {
    width: 35px;
    
}


#lang-top {
  width: 320px; /* or any width less than the container */
  margin: 0 auto;
  text-align: center; /* optional, to center the text inside */
  z-index: 3;
}

/* #lang-top a{
    font-size: 0.9em;
    font-family: 'Sansation', Sans-Serif;
    text-decoration: none;
    padding: 13px;
    border-radius: 31px;
    border: 2px solid #e4e3dc;
} */
/* 
#lang-top a:hover{
  color: #e4e3dc;
  font-size: 1.2em;
  text-decoration: none;
  padding-bottom: 20px;
  border-bottom: 5px solid #e4e3dc;
  transition: ease 0.3s;
} */

/* 
#lang-top a{
  color: #e4e3dc;
  font-size: 1.2em;
  text-decoration: none;
  padding: 13px 13px 20px 13px;
   border-radius: 35px;
   border-bottom-right-radius: 43px;
   border-bottom-left-radius: 43px;
  border: 2px solid #e4e3dc;
  border-bottom: 10px solid #e4e3dc;
  transition: ease 0.3s;
} */


#lang-top a{
  display: inline-block;
color: #e4e3dc;
    font-size: 0.7em;
    font-weight: 600;
    text-decoration: none;
    padding: 13px;
    border-radius: 36px;
    border: 2px solid #e4e3dc;
    transition: ease 0.3s;
    box-shadow: 2px 5px;
    transition: ease 0.3s;
    text-transform: uppercase;
}

#lang-top a:hover{
    
    text-decoration: none;
    padding: 13px;
    border-radius: 36px;
    color: #030303;
    background-color: #e4e3dc;
    border: 2px solid #e4e3dc;
    box-shadow: 0px 0px;
    position:relative;
    /* top:2px;
    left: 5px; */
}




#buy-bottom {
  width: 320px; /* or any width less than the container */
  margin: 0 auto;
  text-align: center; /* optional, to center the text inside */
  z-index: 3;
}


#buy-bottom a{
  display: inline-block;
color: #e4e3dc;
    font-size: 0.7em;
    font-weight: 600;
    text-decoration: none;
    padding: 13px;
    border-radius: 36px;
    border: 2px solid #e4e3dc;
    transition: ease 0.3s;
    box-shadow: 2px 5px;
    transition: ease 0.3s;
    text-transform: uppercase;
}



#buy-bottom a:hover{
    text-decoration: none;
    padding: 13px;
    border-radius: 36px;
    color: #030303;
    background-color: #e4e3dc;
    border: 2px solid #e4e3dc;
    box-shadow: 0px 0px;
    position:relative;
}




/** LIGHTBOX MARKUP **/

.thumbnail {
  max-width: 100%;
}

a.catbox{
  text-decoration: none;
  border-bottom: none;
  display: inline;
}

a.catbox:hover{
  text-decoration: none;
  border-bottom: none;
  background-color: transparent;
}

.lightbox {
  /** Default lightbox to hidden */
  display: none;

  /** Position and style */
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
 


  
}

a.lightbox{
  text-decoration: none;
  border-bottom: none;

}

a.lightbox:hover{
  text-decoration: none;
  border-bottom: none;
  background-color: transparent;
  padding: none;
        -ms-transform: none; /* IE 9 */
  -webkit-transform: none; /* Safari */
  transform: none;
  background: rgba(0,0,0,0.8);

}

.lightbox img {
  /** Pad the lightbox image */
  max-width: 80%;
  margin-top: 3% !important;
  animation: fadeIn 3s ease;
  transition: all 0.5s cubic-bezier(1, -0.02, 1, 1);


@keyframes fadeIn{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }}

}


.lightbox:target {
  /** Remove default browser outline */
  outline: none;

  /** Unhide lightbox **/
  display: block;
  background: rgba(0,0,0,0.8);
}



/*CAT CONTACT*/
#catcontact{margin-top: 1em;}

#contact{
margin-top: 3em;
}

#contact a {
    color: #000;
    text-decoration: none;
    margin-left: 5px;
    margin-right: 5px;
    font-weight: 400;
    transition: transform 0.3s;
    font-size: 1.0em;
    display: inline-block;
    border-bottom: none;
}

#contact a:hover{
    color: #000;
    background-color: transparent;
    /*transition: all 0.5s cubic-bezier(1, -0.02, 1, 1);*/
    

      -ms-transform: skewX(-15deg); /* IE 9 */
  -webkit-transform: skewX(-15deg); /* Safari */
  transform: skewX(-15deg);
}

/*FOOTER*/

/* 
#footer {
  bottom: 0;
  width: 100%;
  text-align: center;
  height: 300px;
} */



/*RESPONSIVE */ /*for desktop*/

@media only screen and (min-width: 720px){

  .footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  letter-spacing: 2px;
  font-size: 0.5em;
  text-align: center;
}

#lang-top {
    display: block;
    position: absolute;
    top: 5%;
    right: 5%;
    z-index: 1;
}
  
  
  #osta-nav-tab p {

    font-size: 1.4em;

  }


  #buy-bottom {
    display: block;
    position: absolute;
    bottom: 7%;
    left: 5%;
    z-index: 1;
}

#vip-logo-container {
  height:36%;
  transition: ease-in-out 0.3s;
  margin-bottom: 0em;
  
}

#vip-logo h1{
  font-size: 4em;
  margin-bottom: 50px;
  font-family: 'Sansation', Serif;
}

#vip-logo p{
  font-size: 0.9em;
  text-transform: uppercase;
  font-family: 'Work Sans', Sans-Serif;
}


#vip-logo-info p {
    text-transform: uppercase;
    font-size: 0.7em;
}

#vip-logo-info h1 {
  font-size: 2.8em;
    
}

#sub-nav{
  margin-bottom: 9em;
  margin-left: 10%;
    margin-right: auto;

}

#nav-tab {
    height: 3em;
    position: relative;
    width: 33.33%;
    float: left;
  }

#nav-tab p{
  font-size: 2em;
}


#nav-tab-2 {
    height: 3em;
    position: relative;
    width: 29.99%;
    float: left;
  }

#nav-tab-2 p{
  font-size: 2em;
}

#book{
  width: 100%;
  font-size: 1.3em;
  text-align: center;
      margin-top: 20%;

      margin-bottom: 9em;
}

#book p {
    text-align: center;
}



#info-full{
  width: 100%;
  font-size: 1.3em;
  text-align: left;
}

#info-full-2{
  width: 100%;
  font-size: 1em;
  text-align: left;
}


#info p{
    font-size: 0.9em; line-height: 1.7em;
}


#info h2{font-size: 1em}

#vip{width: 80%;
max-width:1300px;
margin: auto 10%}


#nav-tab-info p {
    margin: 0;
    /* background: yellow; */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    font-size: 2.8em;
    font-family: 'Sansation', Sans-Serif;
  }

#nav-tab-info a {
  color: #e4e3dc;
  text-decoration: none;
  border-bottom: 0px solid #e4e3dc;
 
  
}

#nav-tab-info a:hover{
  color: #e4e3dc;
  font-size: 115%;
  text-decoration: none;
  padding-bottom: 20px;
  border-bottom: 5px solid #e4e3dc;
  transition: ease 0.3s;
}


div.aitio {
   
    width: 25%;
    margin-left: 32%;
}

 .responsive {
    width: 45.4%;
    margin: 10px;
    display:inline-block;
  }

  .home{

    max-width: 46px !important;

}


#main-nav{
  margin-bottom: 7em;
  
}

	
}







@media only screen and (min-width: 1100px){

#buy-bottom {
    display: block;
    position: absolute;
    bottom: 7%;
    left: 5%;
    z-index: 1;
}


#vip-logo-container {
  height:37%;
      margin-bottom: 0em;
  
}

#vip-logo h1{
  font-size: 5em;
  margin-bottom: 60px;
  font-family: 'Sansation', Serif;
}

#vip-logo p{
  font-size: 1.5em;
  text-transform: uppercase;
  font-family: 'Work Sans', Sans-Serif;
}


#nav-tab {
    height: 3em;
    position: relative;
    width: 33.33%;
    float: left;
  }

#nav-tab p{
  font-size: 3.5em;
}



#info{
    position: relative;
    width: 45%;
    float: left;
    padding-left: 2.5%;
    padding-right: 2.5%;
    max-width: 1150px;
}


#info-full{
  width: 100%;
  font-size: 1.6em;
  line-height: 1.3em;

}

#info-full-2{
  width: 100%;
  font-size: 1em;

}


#info h2{
  text-align: left;
  
}

#nav-tab-info p {
    margin: 0;
    /* background: yellow; */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    font-size: 2.8em;
    font-family: 'Sansation', Sans-Serif;
  }

#nav-tab-info a {
  color: #e4e3dc;
  text-decoration: none;
  border-bottom: 0px solid #e4e3dc;
 
  
}

#nav-tab-info a:hover{
  color: #e4e3dc;
  font-size: 115%;
  text-decoration: none;
  padding-bottom: 20px;
  border-bottom: 5px solid #e4e3dc;
  transition: ease 0.3s;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 29.7%;
}



  
}




/*CAT PLANTER CONTACT TABLE*/ 
/* Create three unequal columns that floats next to each other */


#contact a {

    font-size: 1.0em;
    display: inline-block;
    border-bottom: none;
}

#contact a:hover{
    color: #000;
    background-color: transparent;
    /*transition: all 0.5s cubic-bezier(1, -0.02, 1, 1);*/
    

      -ms-transform: skewX(-15deg); /* IE 9 */
  -webkit-transform: skewX(-15deg); /* Safari */
  transform: skewX(-15deg);
}


.column {
  float: left;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

.left, .right {
  width: 33%;
}

.middle {
  width: 33%;
}

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