@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');
@import url('https://fonts.googleapis.com/css?family=Varela|Varela+Round');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

#loader{color:#fff;}

html{min-height:100%;background-color:#000 ;}
body{  margin:0 auto;background-image: url(../img/00501A.png); background-repeat:no-repeat; background-size:cover;background-attachment:fixed;
}
main{display:none;}
.branding{display:none;}

header{margin:0;display:flex;}
header h1{ font-family: 'Permanent Marker', cursive; padding-left: .5em;
    margin: 0;
    color: #fff;
    font-weight: 100;
    font-size: 2.5em;}
nav{flex:auto; margin:1em;float:right;position:relative; z-index:9;}
main{ 
  min-height: 500px;
  position: relative;
  margin:auto;
}

.branding{/*background-image:url(../img/stardust.png);*/
    min-height: 2vw; color:#fff;flex:1 1 75% }

nav span a{    color: #fff;
    font-size: 1.56em;
    margin: .2em;
    transition: box-shadow 0.3s linear;
}

nav span a:hover{
    box-shadow: 0px 3px 0px 0px  #fff;
}
nav span a:focus{
    box-shadow: 0px 3px 0px 0px  #fff;
}


footer{background-color:#ff6663;display:none;}
    
    .footerText{/*background-image:url(../img/stardust.png);*/
    min-height: 9vw;}
    
    
 /*Cube 1*/   
.divLeft{	flex:1 1 100%;


}



.containerLeft {
      width: 30vw;
      height: 30vw;
      margin: 4.5vw auto 10%;
      /* border: 1px solid #CCC; */
      -webkit-perspective: 1000px;
         -moz-perspective: 1000px;
           -o-perspective: 1000px;
              perspective: 1000px;
     
			  
    }


#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;

}

#cube figure {
  margin: 0;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  /*border: 2px dotted #00FF84;*/
 
  border: 1px solid #fff;
 
   line-height: 196px;
   font-size: 120px;
   font-weight: bold;
   color: white;
   text-align: center;
}

    #cube .front  {
      -webkit-transform: translateZ( 1vw );
         -moz-transform: translateZ( 110px );
           -o-transform: translateZ( 110px );
              transform: translateZ( 15.1vw );
    }
    #cube .back   {
      -webkit-transform: rotateX( -180deg ) translateZ( 100px );
         -moz-transform: rotateX( -180deg ) translateZ( 100px );
           -o-transform: rotateX( -180deg ) translateZ( 100px );
              transform: rotateX( -180deg ) translateZ( 15.1vw );
    }
    #cube .right {
      -webkit-transform: rotateY(   90deg ) translateZ( 100px );
         -moz-transform: rotateY(   90deg ) translateZ( 100px );
           -o-transform: rotateY(   90deg ) translateZ( 100px );
              transform: rotateY(   90deg ) translateZ( 15.1vw);
    }
    #cube .left {
      -webkit-transform: rotateY(  -90deg ) translateZ( 100px );
         -moz-transform: rotateY(  -90deg ) translateZ( 100px );
           -o-transform: rotateY(  -90deg ) translateZ( 100px );
              transform: rotateY(  -90deg ) translateZ( 15.1vw);
    }
    #cube .top {
      -webkit-transform: rotateX(   90deg ) translateZ( 100px );
         -moz-transform: rotateX(   90deg ) translateZ( 100px );
           -o-transform: rotateX(   90deg ) translateZ( 100px );
              transform: rotateX(   90deg ) translateZ( 15.1vw);
    }
    #cube .bottom {
      -webkit-transform: rotateX(  -90deg ) translateZ( 100px );
         -moz-transform: rotateX(  -90deg ) translateZ( 100px );
           -o-transform: rotateX(  -90deg ) translateZ( 100px );
              transform: rotateX(  -90deg ) translateZ( 15.1vw);
    }

    #cube.show-front {
      -webkit-transform: translateZ( -100px );
         -moz-transform: translateZ( -100px );
           -o-transform: translateZ( -100px );
              transform: translateZ( -100px );
    }
    #cube.show-back {
      -webkit-transform: translateZ( -100px ) rotateX( -180deg );
         -moz-transform: translateZ( -100px ) rotateX( -180deg );
           -o-transform: translateZ( -100px ) rotateX( -180deg );
              transform: translateZ(-100px ) rotateX( -180deg );
    }
    #cube.show-right {
      -webkit-transform: translateZ( -100px ) rotateY(  -90deg );
         -moz-transform: translateZ( -100px ) rotateY(  -90deg );
           -o-transform: translateZ( -100px ) rotateY(  -90deg );
              transform: translateZ(-100px) rotateY(  -90deg );
    }
    #cube.show-left {
      -webkit-transform: translateZ( -100px ) rotateY(   90deg );
         -moz-transform: translateZ( -100px ) rotateY(   90deg );
           -o-transform: translateZ( -100px ) rotateY(   90deg );
              transform: translateZ(-100px ) rotateY(   90deg );
    }
    #cube.show-top {
      -webkit-transform: translateZ( -100px ) rotateX(  -90deg );
         -moz-transform: translateZ( -100px ) rotateX(  -90deg );
           -o-transform: translateZ( -100px ) rotateX(  -90deg );
              transform: translateZ( -100px ) rotateX(  -90deg );
    }
    #cube.show-bottom {
      -webkit-transform: translateZ( -100px ) rotateX(   90deg );
         -moz-transform: translateZ( -100px ) rotateX(   90deg );
           -o-transform: translateZ( -100px ) rotateX(   90deg );
              transform: translateZ( -100px ) rotateX(   90deg );
    }

#cube { transition: transform 1s; }
#cube { transform: translateZ( -100px ); }


.containerLeft #cube figure.front{background-image: url(../img/psych.jpg); background-repeat:no-repeat; background-size:contain;}
.containerLeft #cube figure.back{background-image: url(../img/english2.jpg); background-repeat:no-repeat; background-size:contain;} 
.containerLeft #cube figure.right{background-image: url(../img/pubUnit2.jpg); background-repeat:no-repeat; background-size:contain;} 
.containerLeft #cube figure.left{background-image: url(../img/bio2.jpg); background-repeat:no-repeat; background-size:contain;} 
.containerLeft #cube figure.top{background-image: url(../img/catering.jpg); background-repeat:no-repeat; background-size:contain;} 
.containerLeft #cube figure.bottom{background-image: url(../img/EmpPortal.jpg); background-repeat:no-repeat; background-size:contain;} 




footer{ margin-bottom:0;}

#optionsLeft {	
	display: flex;
}



button {
    background: transparent;
    border: none;
}


#optionsLeft button {
    /* width: 4vw; */
    flex: 1 1 16%;
    background-position-y: 50%;
}



p#show-buttons {
    display: flex;
    width: 100%;
    height: 8vw;   
    margin:0;
}



p#show-buttons button:nth-of-type(1){
	background-image: url(../img/thumbs_psych.jpg);
	background-repeat:no-repeat;
	background-size: cover;
}

p#show-buttons button:nth-of-type(2){
	background-image: url(../img/thumbs_english2.jpg);
	background-repeat:no-repeat;
	background-size: cover;
}

p#show-buttons button:nth-of-type(3){
	background-image: url(../img/thumbs_pubUnit2.jpg);
	background-repeat:no-repeat;
	background-size: cover;
}

p#show-buttons button:nth-of-type(4){
	background-image: url(../img/thumbs_bio2.jpg);
	background-repeat:no-repeat;
	background-size: cover;
}


p#show-buttons button:nth-of-type(5){
	background-image: url(../img/thumbs_catering.jpg);
	background-repeat:no-repeat;
	background-size: cover;
}


p#show-buttons button:nth-of-type(6){
	background-image: url(../img/EmpPortalThumb.jpg);
	background-repeat:no-repeat;
	background-size: cover;
        background-position-y:22%;
}


p#show-buttons button:nth-of-type(7){ background-position:0 -2vw; background-color:rgba(250, 200, 200, .2);}



p#show-buttons button{	transition: all .3s ease-in-out;
	color: #fff;	font-size: 2em;}

/*    
p#show-buttons button:hover{flex:1 1 30%; background-position:0 -4vw ;  font-size:5em;}
p#show-buttons button:nth-of-type(1):hover{ background-position:0 -2vw;}
p#show-buttons button:nth-of-type(3):hover{ background-position:0 -5vw;}
p#show-buttons button:nth-of-type(4):hover{ background-position:0 -11vw;}

p#show-buttons button:nth-of-type(5):hover{ background-position:0 -10vw;}


p#show-buttons button:nth-of-type(6):hover{ background-position:0 -11vw;}
*/
/*Cube 2*/


#optionsRight {
	display:flex;
}

#optionsRight button {
    /* height:4vw; */
    /* width: 4vw; */
    flex: 1 1 16%;
    background-position-y: -18px;
}

.containerRight {
    width: 30vw;
    height: 30vw;
    margin: 4.5vw auto 10%;
    /* border: 1px solid #CCC; */
    -webkit-perspective: 1000px;
       -moz-perspective: 1000px;
         -o-perspective: 1000px;
            perspective: 1000px;
   
            
  }

.divRight{	flex:1 1 100%;
    /*background-image:url(../img/stardust.png);*/
    background-position: 30vw;
        }
    

        .containerRight #cube figure.front{background-image: url(../img/englewoodrangers.jpg); background-repeat:no-repeat; background-size:contain;}
        .containerRight #cube figure.back{background-image: url(../img/kasalonlogo.jpg); background-repeat:no-repeat; background-size:contain;} 
        .containerRight #cube figure.right{background-image: url(../img/wglt.jpg); background-repeat:no-repeat; background-size:contain;} 
        .containerRight #cube figure.left{background-image: url(../img/RedFaction.jpg); background-repeat:no-repeat; background-size:contain;} 
        .containerRight #cube figure.top{background-image: url(../img/portallogos.jpg); background-repeat:no-repeat; background-size:contain;} 
        .containerRight #cube figure.bottom{background-image: url(../img/countryvector.jpg); background-repeat:no-repeat; background-size:contain;} 


        p#show-buttons2 {
            display: flex;
            width: 100%;
            height: 8vw;
            margin:0;
        }
        


        p#show-buttons2 button{	transition: all .3s ease-in-out; color:#fff;font-size:2em;
        }
        

p#show-buttons2 button:nth-of-type(1){
	background-image: url(../img/thumbs_englewoodrangers3.jpg);
	background-repeat:no-repeat;
    background-size: cover;
    background-position-y: 0px;
}

p#show-buttons2 button:nth-of-type(2){
	background-image: url(../img/thumbs_kasalon.jpg);
	background-repeat:no-repeat;
    background-size: cover;
    
    background-position-y: 0px;
}

p#show-buttons2 button:nth-of-type(3){
	background-image: url(../img/thumbs_wwdtmc.jpg);
	background-repeat:no-repeat;
	background-size: cover;
}

p#show-buttons2 button:nth-of-type(4){
	background-image: url(../img/thumbs_RedFaction.jpg);
	background-repeat:no-repeat;
	background-size: cover;
	background-position: 0 -.3vw;
}


p#show-buttons2 button:nth-of-type(5){
	background-image: url(../img/EmpPortalLogoThumb.jpg);
	background-repeat:no-repeat;
	background-size: cover;
	background-position: 0 -1vw;
}

p#show-buttons2 button:nth-of-type(6){
	background-image: url(../img/thumbs_countryvectors.jpg);
	background-repeat:no-repeat;
	background-size: cover;
	background-position: 0 -.3vw;
}

p#show-buttons2 button:nth-of-type(7){ background-position:0 -2vw; background-color:rgba(250, 200, 200, .2);}
/*

p#show-buttons2 button:hover{flex:1 1 30%; background-position:0 -5vw ;  font-size:5em;}
*/

/*Box3*/


#optionsThree {
	display:flex;
}

#optionsThree button {
    /* height:4vw; */
    /* width: 4vw; */
    flex: 1 1 16%;
    
    background-position-y: -18px;
}


.containerThree {
    width: 30vw;
    height: 30vw;
    margin: 4.5vw auto 10%;
    /* border: 1px solid #CCC; */
    -webkit-perspective: 1000px;
       -moz-perspective: 1000px;
         -o-perspective: 1000px;
            perspective: 1000px;
   
            
  }
    

        .containerThree #cube figure.front{background-image: url(../img/anneconcept.jpg); background-repeat:no-repeat; background-size:contain;}
        .containerThree #cube figure.back{background-image: url(../img/bad_reception_tv9.jpg); background-repeat:no-repeat; background-size:contain;} 
        .containerThree #cube figure.right{background-image: url(../img/corridor.jpg); background-repeat:no-repeat; background-size:contain;} 
        .containerThree #cube figure.left{background-image: url(../img/queen.jpg); background-repeat:no-repeat; background-size:contain;} 
        .containerThree #cube figure.top{background-image: url(../img/phoenix.jpg); background-repeat:no-repeat; background-size:contain;} 
        .containerThree #cube figure.bottom{background-image: url(../img/zeuz.jpg); background-repeat:no-repeat; background-size:contain;} 


        p#show-buttons3 {
            display: flex;
            width: 100%;
            height: 8vw;
            
            margin:0;
        }
        


        p#show-buttons3 button{	transition: all .3s ease-in-out; color:#fff;font-size:2em;
        }

        
p#show-buttons3 button:nth-of-type(1){
	background-image: url(../img/anneconceptThumb.jpg);
	background-repeat:no-repeat;
	background-size: cover;
}

p#show-buttons3 button:nth-of-type(2){
	background-image: url(../img/bad_receptionThumb.jpg);
	background-repeat:no-repeat;
	background-size: cover;
}

p#show-buttons3 button:nth-of-type(3){
	background-image: url(../img/corridorThumb.jpg);
	background-repeat:no-repeat;
	background-size: cover;
}

p#show-buttons3 button:nth-of-type(4){
	background-image: url(../img/queenThumb.jpg);
	background-repeat:no-repeat;
	background-size: cover;
	background-position: 0 -.3vw;
}


p#show-buttons3 button:nth-of-type(5){
	background-image: url(../img/phoenixThumb.jpg);
	background-repeat:no-repeat;
	background-size: cover;
	background-position: 0;
}


p#show-buttons3 button:nth-of-type(6){
	background-image: url(../img/zeuzThumb.jpg);
	background-repeat:no-repeat;
	background-size: cover;
        background-position-y:bottom;
}

p#show-buttons3 button:nth-of-type(7){ background-position:0 -2vw; background-color:rgba(250, 200, 200, .2);}

/*
p#show-buttons3 button:hover{flex:1 1 30%; background-position:0 -5vw ;  font-size:5em;}

*/


/*JQUI*/
.ui-widget-content{
  border:none !important;
  background:transparent !important;
}

.ui-widget-header{
    border:none !important;
    background:transparent !important;
}

.ui-tabs .ui-tabs-panel{
    /* border-width: 0; */
    padding: 0 !important;
    /* background: none; */
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{

  border: none !important; 
  background: transparent !important;
    font-weight: normal;
    color: #ffffff;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus{
  border:none !important;
  background: #003147;
  font-weight: normal;
  color: #ffffff;}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br{
  border-top-right-radius:0px !important;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl{border-top-right-radius:0px !important;}

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr{border-top-right-radius:0px !important;}

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl{border-top-right-radius:0px !important;}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor{
    padding:.5em;
}
.ui-tabs .ui-tabs-nav{margin-left:35%;}
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button{
    color:#fff;
    /*transition: box-shadow 0.3s linear, color 0.3s linear;*/
}
.ui-tabs-anchor{   
    transition: box-shadow 0.3s linear, color 0.3s linear;
    margin: 0em;
font-family: 'Roboto Condensed', sans-serif;
}

.ui-tabs-anchor:hover{
    box-shadow: 0px 3px 0px 0px  #fff; 
    color:#fff;
}

.ui-tabs-anchor:focus{
    outline:0;box-shadow: 0px 3px 0px 0px  #fff;
}
button {
   /* border-top:1px solid #201c29;
    border-left:1px solid #201c29;
    border-right:1px solid #201c29;*/
    border-bottom: 3px solid #201c29;
    margin-left:1px;
    margin-right:1px;
}



button:hover{border-bottom: 3px solid #fff;}
:focus{outline:0;}
button:focus {
    border-bottom: 3px solid #fff;
}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited{box-shadow: 0px 3px 0px 0px  #fff; 
    color:#fff;}

.branding h1{
   float:left;
}

.mobile{
  display:none;
}

img{
width: 100%;
margin: 0;
padding: 0;
}

h2{
font-family: 'Roboto Condensed', sans-serif;
 /* font-family: 'Varela', sans-serif;*/
 color: #fff;
 padding-left: 5.6%;
} 


.hide{
  display:none;
}

.show{
  display:block;
}

.mobile{
  max-width:600px;
}

.mobile ul {
  list-style: none;
  margin:0;
  padding:0;
}

.mobile ul li{
  margin:0;
  padding:0;
}

@media only screen and (max-width: 900px) {
   .branding h1{ float:none;}
   .ui-tabs .ui-tabs-nav{     
    margin-left: 1.6%;
    margin-bottom: 2%;
    padding-top: 0;
    margin-top: -2%;}

}
@media only screen and (max-width: 600px) {
  #tabs{display:none !important;}
  .mobile{
    display:flex;
    flex-direction:column;
   
  }
  .large{display:none ;}

}


@media only screen and (min-width: 1921px) {
  #tabs{display:none !important;}
  .mobile{
    display:none !important;
  }
  .large{
    display:flex !important;
    flex-direction:column;
    margin:auto;
    max-width:1000px;
  }
  
}

@media screen and (min-width: 600px) and (max-width:1920px) {
  
   main{display:none !important;}
  }