.dimmer{
opactiy: 0.9;
}


#header{
background-color: transparent;
}



#hero {
position: relative;
height: 600px;
width: 100%;
overflow: hidden;
}

#heroBack {
position: absolute;
left: 0;
top: 0;
z-index: -101;
background: url('//s3.amazonaws.com/our.s3.videopixie.com/video/bgvid-poster.jpg') no-repeat 50% 0;
background-size: cover;
height: 100%;
width: 100%;
}

#bgvid{
position: absolute;
left: 0;
top: 0;
min-width: 100%;
z-index: -100;
display: none;
}

#pause-video{
position: absolute;
bottom: 10px;
right: 15px;
color: rgba(175, 175, 175,0);
font-size: 13px;
cursor: pointer;
transition: color 0.2s;
}

#pause-video:hover{
color: rgb(210, 210, 210) !important;
}




#hero .content{
color: rgb(231,231,231);
padding: 180px 0 0 0;
}

#hero h1{
font-size: 44px;
clear: both;
margin: 10px 0 0 0;
float: left;
line-height: 130%;
}

#hero h2{
font-size: 29px;
margin: 1px 33px 0 0;
float: left;
font-family: 'Open Sans', sans-serif;
font-weight: normal;
}

#hero .content .button{
float: left;
clear: left;
margin: 50px 0 0 0;
padding: 0.7em 2.0em;
background-color: rgb(250, 91, 90);
border-radius: 10px;
font-size: 22px;
}

#hero .content .button:hover{
background-color: rgb(236, 84, 84);
}

#how{
background-color: rgb(15, 146, 177);
overflow: hidden;
padding-bottom: 62px;
}

#how .content{
background: url('/st/images/how.png') no-repeat 40px 55px;

}

#how-text{
padding: 220px 0 0 0;
}

#how-text h3{
color: rgb(231,231,231);
font-size: 26px;
font-family: 'montserrat', sans-serif;
}

#how-text p{
color: rgb(255,255,255);
font-size: 18px;
margin: 10px 0 0 0;
}

.how-step{
width: 280px;
text-align: center;
float: left;
}

#how-2{
margin: 0 80px;
}

#trustedBy{
  padding: 35px 0 45px 0;
  overflow: hidden;
}

#trustedBy h4{
color: rgb(150, 159, 163);
font-size: 14px;
margin: 0 0 -8px 2px;
font-weight: 600;
}

.trustedLogo{
display: inline-block;
margin: 0 26px 0 0;
background-image: url('/st/images/trusted_logos_sprite.png');
background-repeat: no-repeat;
height: 64px;
width: 64px;
}

#logoSamsung{
background-position: 0 -64px;
width: 122px;
}

#logoAccenture{
background-position: 0 -128px;
width: 113px;
}

#logoCoursera{
background-position: 0 -192px;
width: 112px;
}

#logoUdemy{
background-position: 0 -256px;
width: 102px;
}

#logoZboard{
background-position: 0 -320px;
width: 52px;
}

#logoSkillshare{
background-position: 0 -384px;
width: 132px;
}

#logoOrange{
background-position: 0 -448px;

}


#examples{
background-color: rgb(249,249,250);
padding: 100px 0 0 0;
overflow: hidden;
border-bottom: 60px solid rgb(240,240,242);
max-height: 2770px;
transition: max-height 1s;
}

#examples.showAll{
max-height: 10000px;
}

#examples h2{
margin-bottom: 40px;
}

#examples .play{
float: left;
margin: 64px 0 0 152px;
opacity: 0.8;
transition: opacity 0.2s;
cursor: pointer;
}

#examples .play:hover{
opacity: 1.0;
}

#examples h3{
font-family: 'montserrat';
font-size: 30px;
color: rgb(50,50,50);
margin: 80px 0 15px 0;
float: left;
clear: both;
}

#examples p{
font-size: 18px;
color: rgb(110, 121, 128);
line-height: 175%;
width: 408px;
float: left;
}

#examples a{
color: rgb(15,147,178);
font-family: 'montserrat';
}

.example{
background-repeat: no-repeat;
width: 1000px;
height: 333px;
position: relative;
float: left;
clear: both;
}

.example-overlay{
background-color: rgba(229,229,229,0.8);
width: 50%;
height: 100%;
float: right;
padding: 0 0 0 33px;
}


#examples .price{
position: absolute;
bottom: 13px;
right: 0;
background: transparent url('/st/images/price_tag_left.png') no-repeat 0 0;
color: #fff;
text-align: right;
font-size: 18px;
overflow: hidden;
}

#examples .price-inner{
margin-left: 22px;
background-color: rgb(15,147,178);
height: 36px;
width: 110px;
top: 0;
padding: 5px 34px 0 0;

}


#examples .price-inner.wide{
width: 235px;
}

#examples .price-inner.wide2{
width: 140px;
}

#examples .type-icon{
margin: 0px 0px;
background: url('/st/images/homepage_type_icons_3.png') no-repeat 0 0;
height: 100px;
width: 100px;
position: absolute;
top: 0;
right: 0;
}

#examples .start{
float: right;
clear: both;
font-size: 20px;
margin: 13px 0 80px 0;
}

#see-more-examples{
float: left;
clear: both;
margin: 0 0 60px 0;
text-align: center;
width: 100%;
color: rgb(116,124,128);
font-size: 19px;
cursor: pointer;
background: url('/st/images/see_more.png') no-repeat 50% 28px;
height: 64px;
}




#creators{
padding: 100px 0;
overflow: hidden;
}

#creators .content{
position: relative;
}

#creators h2{
float: left;
font-size: 29px;

}

#creators p{
font-size: 19px;
margin: 20px 0 0 0;
line-height: 160%;
width: 420px;
float: left;
clear: both;
color: rgb(116,124,128);
}

#creators strong{
color: rgb(252,91,90);
font-weight: bold;
font-family: 'Montserrat', sans-serif;
}

#creators .pixie{
float: left;
position: relative;
top: -42px;
left: -8px;
}




#creators .banner{
position: absolute;
height: 19%;
width: 100%;
bottom: 10%;
background-color: rgba(229,229,229,0.8);
text-align: center;
font-size: 11px;
font-family: 'montserrat', sans-serif;
}

#creators .banner>span{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
}

#creators .button{
font-family: 'montserrat';
}

#findSpecificSkills{
float: left;
clear: left;
width: 100%;
margin: 30px 42px 40px 42px;
}

#findSpecificSkills h3{
font-size: 24px;
margin: 0 0 8px -2px;
}

#creators .specificSkill{
float: left;
display: block;
width: 25%;
font-size: 18px;
color: rgb(116, 124, 128);
font-weight: 600;
}

#creatorsSignUp{
float: left;
clear: both;
width: 100%;
border-top: 1px solid rgb(220,220,220);
padding: 30px 0 0 0;
}

#creatorsSignUp a{ 
float: right;
}
 
#creatorsSignUp span{
float: right;
color: rgb(150, 159, 163);
margin: 21px 17px 0 0;
font-size: 18px;
font-weight: 700;
}


#browseVideoProducers{
float: left;
clear: left;
margin: 285px 0 0 0;

}


#creator-cloud{
position: absolute;
top: 0;
left: 12px;
}

/*----------------------------- flipping ----------------------------------*/

.flip-container {
	perspective: 1000px;
}

/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
   transform: rotateY(180deg);
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

.creator{
border-radius: 50%;
overflow: hidden;
position: absolute;
cursor: pointer;
color: rgb(30,30,30);
}

.creator .front {
border-radius: 50%;
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
     
     
.creator .back{
   transform: rotateY(180deg);
   background-color: rgb(229,229,229);
   text-align: center;
   border-radius: 50%;
}         
      
.creator .back h6{
color: rgb(15,147,178);
font-family: 'Open Sans';
}


.creator .back h4{
color: rgb(153, 153, 153);
font-weight: normal;
}

.creator .back h5{
color: rgb(50,50,50);
font-family: 'Montserrat';
}

.creator .back>*{
position: absolute;
width: 100%;
}

#creators .creator .back p{
width: 90%;
left: 5%;
margin: 0;
}


#creator-dave{
top: 173px;
left: 526px;
font-size: 13px;
}

#creator-dave .front{
background: url('/st/images/creators/Mograph_Dave.jpg') no-repeat 0 0;
}

#creator-dave, #creator-dave .front, #creator-dave .back{
width: 248px;
height: 248px;
}

#creator-dave h6{
top: 26%;
font-size: 20px;
}    

#creator-dave h4{
top: 38%;
font-size: 15px;
} 

#creator-dave p{
top: 54%;
font-size: 17px;
}



/*----------------------*/

#creator-ben{
top: 226px;
left: 798px;
}

#creator-ben .front{
background: url('/st/images/creators/Colorist_Ben.jpg') no-repeat 0 0;
}

#creator-ben, #creator-ben .front, #creator-ben .back{
width: 154px;
height: 154px;
}

#creator-ben h6{
top: 17%;
font-size: 14px;
}    

#creator-ben h4{
top: 36%;
font-size: 13px;
} 

#creator-ben p{
top: 63%;
font-size: 12px;
}


/*----------------------*/

#creator-rocket{
top: 127px;
left: 924px
}

#creator-rocket .front{
background: url('/st/images/creators/Studio_Rocket.jpg') no-repeat 0 0;
}

#creator-rocket, #creator-rocket .front, #creator-rocket .back{
width: 125px;
height: 125px;
}

#creator-rocket h6{
top: 29%;
font-size: 14px;
}    

#creator-rocket h4{
top: 44%;
font-size: 12px;
} 

#creator-rocket p{
top: 61%;
font-size: 12px;
}

/*----------------------*/

#creator-alex{
top: 30px;
left: 728px;
font-size: 12px;
}

#creator-alex .front{
background: url('/st/images/creators/Director_Alex.jpg') no-repeat 0 0;
}

#creator-alex, #creator-alex .front, #creator-alex .back{
width: 185px;
height: 185px;
}

#creator-alex h6{
top: 23%;
font-size: 14px;
}    

#creator-alex h4{
top: 47%;
font-size: 13px;
} 

#creator-alex p{
top: 62%;
font-size: 13px;
}

/*----------------------*/


#creator-hoju{
left: 558px;
}

#creator-hoju .front{
background: url('/st/images/creators/Animator_Hoju.jpg') no-repeat 0 0;
}

#creator-hoju, #creator-hoju .front, #creator-hoju .back{
width: 151px;
height: 151px;
}

#creator-hoju h6{
top: 26%;
font-size: 16px;
}    

#creator-hoju h4{
top: 43%;
font-size: 13px;
} 

#creator-hoju p{
top: 61%;
font-size: 14px;
}

/*----------------------*/

#creator-mat{
top: 90px;
left: 422px;
}

#creator-mat .front{
background: url('/st/images/creators/Editor_Mat.jpg') no-repeat 0 0;
}

#creator-mat, #creator-mat .front, #creator-mat .back{
width: 134px;
height: 134px;
}

#creator-mat h6{
top: 28%;
font-size: 13px;
}    

#creator-mat h4{
top: 43%;
font-size: 13px;
} 

#creator-mat p{
top: 61%;
font-size: 12px;
}


/*----------------------*/

#creator-ioana{
top: 226px;
left: 320px;
font-size: 10px;
}

#creator-ioana .front{
background: url('/st/images/creators/DP_Ioana.jpg') no-repeat 0 0;
}

#creator-ioana, #creator-ioana .front, #creator-ioana .back{
width: 192px;
height: 192px;
}

#creator-ioana h6{
top: 27%;
font-size: 18px;
}    

#creator-ioana h4{
top: 40%;
font-size: 13px;
} 

#creator-ioana p{
top: 58%;
font-size: 14px;
}

/*----------------------*/


#creator-ian{
left: 154px;
top: 227px;
}

#creator-ian .front{
background: url('/st/images/creators/Cinematographer_Ian.jpg') no-repeat 0 0;
}

#creator-ian, #creator-ian .front, #creator-ian .back{
width: 149px;
height: 149px;
}

#creator-ian h6{
top: 22%;
font-size: 16px;
}    

#creator-ian h4{
top: 37%;
font-size: 13px;
} 

#creator-ian p{
top: 57%;
font-size: 12px;
}

/*----------------------*/

#creator-therese{
left: 55px;
top: 313px; 
}

#creator-therese .front{
background: url('/st/images/creators/Editor_Therese.jpg') no-repeat 0 0;
}

#creator-therese, #creator-therese .front, #creator-therese .back{
width: 93px;
height: 93px;
}

#creator-therese h6{
top: 18%;
font-size: 12px;
line-height: 110%;
}    

#creator-therese h4{
top: 47%;
font-size: 11px;
} 

#creator-therese p{
top: 67%;
font-size: 12px;
}


#videoSchool{
background-color: rgb(15,147,178);
padding: 30px 0 40px 0;
overflow: hidden;
}

#videoSchool h2{
color: rgb(236, 236, 236);
font-size: 26px;
margin: 0 0 21px 0;
font-weight: 400;
font-family: 'Open Sans';

}

#videoSchool .col{
width: 50%;
float: left;
}

#videoSchool a{
display: block;
clear: left;
margin: 0px 0 10px 0;
    border-bottom: 1px dashed rgb(85, 178, 200);
    float: left;
}


#get-started{
background-color: rgb(255,255,255);
padding: 70px 0 120px 0;
overflow: hidden;
}

#get-started h2{
color: rgb(30,30,30);
margin-bottom: 40px;
}

#get-started a{
display: inline-block;
margin-top: 12px;
margin-top: 12px;

}

#get-started-left{
width: 440px;
margin: 0 100px 0 0;
float: left;
padding: 75px 0 0 0;
}

#get-started-right{
float: left;
width: 400px;
text-align: center;
}

#get-started-right img{

}

#get-started-left p{
line-height: 175%;
color: rgb(116,124,128);
font-size: 18px;
margin-bottom: 30px;
max-width: 437px;
}

#get-started-left strong{
color: rgb(252,91,90);
font-weight: bold;
font-family: 'Montserrat', sans-serif;
}

#get-started .button{
float: left;
font-size: 20px;
padding: 0.9em 2.5em;
}



#press{
background-color: rgb(240,240,242);
height: 180px;
}

#press h2{
font-family: 'Open sans';
font-size: 18px;
margin: 36px 0 0 0;
float: left;
color: rgb(116,124,128);
}


#press-logos{
float: left;
text-align: center;
width: 100%;
margin: 15px 0 0 0;
}


#press-logos a{
margin: 0 50px 0 0;
}

#press-logos a:last-child{
margin-right: 0;
}

#logo_nofilmschool{
position: relative;
top: 12px;
}