* {
box-sizing: border-box;
}


body {
margin: 20px;
padding: 0px;
background-color: white;
/*font-family: 'Poppins', sans-serif;*/
/*font-family: 'Roboto', sans-serif;*/
/*font-family: 'Source Sans Pro', sans-serif;*/
/*font-family: 'Raleway', sans-serif;*/
font-family: 'Montserrat', sans-serif;
/*font-family: 'Ubuntu', sans-serif;*/
letter-spacing: .5px;
font-size: 12px;
}

A:link {
	color: #999999;
	text-decoration: none;
}


A:active {
	color: #999999;
	text-decoration: none;
}


A:visited {
	color: #999999;
	text-decoration: none;
}


A:hover {
    color: #ff1919;
	text-decoration: none;
}


.fade_in_logo {
opacity:0;
position: relative;
animation-name: animate_logo;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
overflow: hidden;
}

.fade_in_01 {
opacity:0;
position: relative;
animation-name: animate_01;
animation-duration: .6s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

.fade_in_02 {
opacity:0;
position: relative;
animation-name: animate_01;
animation-duration: .6s;
animation-timing-function: ease;
animation-delay: .2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

.fade_in_03 {
opacity:0;
position: relative;
animation-name: animate_01;
animation-duration: .6s;
animation-timing-function: ease;
animation-delay: .4s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

.fade_in_04 {
opacity:0;
position: relative;
animation-name: animate_01;
animation-duration: .6s;
animation-timing-function: ease;
animation-delay: .6s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

.fade_in_05 {
opacity:0;
position: relative;
animation-name: animate_01;
animation-duration: .6s;
animation-timing-function: ease;
animation-delay: .8s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

.fade_in_06 {
opacity:0;
position: relative;
animation-name: animate_01;
animation-duration: .6s;
animation-timing-function: ease;
animation-delay: 1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

.fade_in_07 {
opacity:0;
position: relative;
animation-name: animate_01;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 1.2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

.fade_in_08 {
opacity:0;
position: relative;
animation-name: animate_02;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-delay: .8s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

.fade_in_09 {
opacity:0;
position: relative;
animation-name: animate_02;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-delay: .4s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

.fade_in_10 {
opacity:0;
position: relative;
animation-name: animate_02;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

@keyframes animate_logo {
0% {opacity:0; transform: translateX(50px);}
100% {opacity:1; transform: translateY(0px);}
}


@keyframes animate_01 {
0% {opacity:0; transform: translateY(50px);}
100% {opacity:1; transform: translateY(0px);}
}

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

.tagline_01 {
opacity:0;
animation-name: animate_tagline_01;
animation-duration: 42s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
/*animation-fill-mode: forwards;*/
}

.tagline_02 {
opacity:0;
animation-name: animate_tagline_02;
animation-duration: 42s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
}

.tagline_03 {
opacity:0;
animation-name: animate_tagline_03;
animation-duration: 42s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
}

.tagline_04 {
opacity:0;
animation-name: animate_tagline_04;
animation-duration: 42s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
}

.tagline_05 {
opacity:0;
animation-name: animate_tagline_05;
animation-duration: 42s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
}

.tagline_06 {
opacity:0;
animation-name: animate_tagline_06;
animation-duration: 42s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
}

@keyframes animate_tagline_01 {
0% {opacity:0;}
2% {opacity:1;}
14% {opacity:1;}
16% {opacity:0;}
100% {opacity:0;}
}

@keyframes animate_tagline_02 {
0% {opacity:0;}
16% {opacity:0;}
18% {opacity:1;}
30% {opacity:1;}
32% {opacity:0;}
100% {opacity:0;}
}

@keyframes animate_tagline_03 {
0% {opacity:0;}
32% {opacity:0;}
34% {opacity:1;}
46% {opacity:1;}
48% {opacity:0;}
100% {opacity:0;}
}

@keyframes animate_tagline_04 {
0% {opacity:0;}
48% {opacity:0;}
50% {opacity:1;}
62% {opacity:1;}
64% {opacity:0;}
100% {opacity:0;}
}

@keyframes animate_tagline_05 {
0% {opacity:0;}
64% {opacity:0;}
66% {opacity:1;}
78% {opacity:1;}
80% {opacity:0;}
100% {opacity:0;}
}

@keyframes animate_tagline_06 {
0% {opacity:0;}
80% {opacity:0;}
82% {opacity:1;}
98% {opacity:1;}
100% {opacity:0;}
}


.logo_A {
background:#ffffff; 
width: 100%; 
height: auto; 
padding-bottom: 6%;
overflow: hidden;
}

.logo_B {
background:#ffffff; 
width: 100%; 
height: auto; 
padding-bottom: 6%;
text-align: center;
overflow: hidden;
}

.logo_C {
background:#ffffff; 
width: 100%; 
height: auto; 
padding-bottom: 6%;
text-align: center;
overflow: hidden;
}

.taglines {
width: 99.2%; 
height: 30px; 
background: #f9f9f9; 
clear: both; 
float: left;
margin-left: .22%;
margin-right: 1%;
margin-top:.3%;
font-size: 9px;
text-align: center;
overflow: hidden;
}

.contact {
width: 100%; 
height: 50px; 
background: white; 
clear: both; 
float:left;
/*margin-top:.3%;*/
margin-top:2%;
text-align: center;
color: #999999;
}

#main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: white;
  /* let's see it! */
  color: white;
  overflow: hidden;
  cursor: pointer;
}

#main_thin {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: white;
  /* let's see it! */
  color: white;
  cursor: pointer;
  overflow: hidden;
}

#main_thin_02{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: white;
  /* let's see it! */
  cursor: pointer;
  color: white;
  overflow: hidden;
}

.responsive {
  width: 11%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
  float:left;
}

.responsive:after {
  padding-top: 138.32%;
  /* 16:9 ratio */
  /*For the mathematically impaired like me: to calculate the padding-top percentage of something else than 16:9 ratios, use this formula (for example using a 22:5 ratio where 22 is A and 5 is B): B / (A / 100) = C%. So 22:5 is 5 / .22 = 22.72%.*/
  
  display: block;
  content: '';
}

.responsive_thin {
  width: 7.46%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
  float:left;
}

.responsive_thin:after {
  padding-top: 203.52%;
  /* 16:9 ratio */
  /* to calculate the padding-top percentage of something else than 16:9 ratios, use this formula (for example using a 22:5 ratio where 22 is A and 5 is B): B / (A / 100) = C%. So 22:5 is 5 / .22 = 22.72%.*/
  
  display: block;
  content: '';
}



#main img {
transition: all .3s ease-in-out;
opacity:0.3;
}

/*#main:hover img {
transition-delay: .15s;
transform: scale(1.0); 
opacity:1;
cursor: pointer;
}*/

#main_thin img {
transition: all .3s ease-in-out;
opacity:1;
}

/*#main_thin:hover img {
transition-delay: .15s;
transform: scale(1.0); 
opacity:1;
cursor: pointer;
}*/

#text {
/*height: 10%;*/
width: 100%;
/*background-color: rgba(0,0,0,.6);*/
font-family: arial white;
line-height: 50px;
text-align: left;
position: absolute;
/*top: 105%;*/
top: 105%;
left: 2.4%;
transition: all .3s ease-in-out;
opacity:0;
}

/*#main:hover #text {
top: 78.4%;
opacity:1;
}*/

/*#main_thin_02:hover #text {
top: 78.4%;
opacity:1;
}
*/

#text_thin {
/*height: 10%;*/
width: 100%;
/*background-color: rgba(0,0,0,.6);*/
font-family: arial white;
line-height: 50px;
text-align: left;
position: absolute;
top: 105%;
left: 3.9%;
transition: all .3s ease-in-out;
opacity:0;
}

/*#main_thin:hover #text_thin {
top: 78.4%;
opacity:1;
}*/


#blackFrame {
height: 600px;
width: 250px;
position: absolute;
background-color: rgba(255,255,255,.6);
transform: translateY(-480px);
/*transform: translateX(80px);*/
transition: all .5s ease-in-out;
opacity: 0;
cursor:pointer;
/*transition-delay: .3s;*/
}

/*#main_thin:hover #blackFrame {
cursor: pointer;
opacity: 1;
}*/

/*#main_thin_02:hover #blackFrame {
cursor: pointer;
opacity: 1;
}*/

.thin {
/*display: none;*/
}

.thin_02 {
display: none;
}

.logo_A {
display: block;
}

.logo_B {
display: none;
}

.logo_C {
display: none;
}

.padding_top {
width: 100%;
height: 1px;
background: white;
padding-bottom: 13%;
}



/* SMARTPHONES PORTRAIT */
@media only screen and (min-width: 200px) and (max-width: 479px) {
.responsive {
width: 50%;
margin-bottom: 1%;
}

.thin {
display: none;
}

.thin_02 {
display: block;
}

.logo_A {
display: none;
}

.logo_B {
display: none;
}

.logo_C {
display: block;
}
.padding_top {
display: none;
}

}

/* SMARTPHONES LANDSCAPE */
@media only screen and (min-width: 480px) and (max-width: 1023px){
.responsive {
width: 20%;
margin-bottom: .6%;
}

.thin {
display: none;
}

.thin_02 {
display: block;
}

.logo_A {
display: none;
}

.logo_B {
display: block;
}

.logo_C {
display: none;
}

.padding_top {
padding-bottom: 3%;
}

}

/* TABLETS PORTRAIT */
@media only screen and (min-width: 768px) {


}


/* TABLET LANDSCAPE / DESKTOP */
@media only screen and (min-width: 1024px) {

#main:hover img {
transition-delay: .15s;
transform: scale(1.0); 
opacity:1;
cursor: pointer;
}

#main_thin:hover img {
transition-delay: .15s;
transform: scale(1.0); 
opacity:1;
cursor: pointer;
}

#main:hover #text {
/*transition-delay: .5s;*/
/*transform: translateY(-80px);*/
/*top: 87%;*/
top: 78.4%;
opacity:1;
}

#main_thin_02:hover #text {
top: 78.4%;
opacity:1;
}


#main_thin:hover #text_thin {
top: 78.4%;
opacity:1;
}

#main_thin:hover #blackFrame {
cursor: pointer;
opacity: 1;
}

#main_thin_02:hover #blackFrame {
cursor: pointer;
opacity: 1;
}
}