
html.pointer {
    cursor: pointer;
}


body {
	
   font-family:  Helvetica-Neue, Helvetica, Arial, verdana, sans-serif;
   font-weight: normal;
   line-height: 1.5em;
    margin: 0;
    background-color:#eee;
     -webkit-font-smoothing:antialiased;
}



.wrapper {
    width: 90%;
    margin: 0 5%;
    background-color: white;
}


.clear    {
    clear:both;
}


.floatleft   {
    float: left;
}

/* ==============
head-container
 ============== */
/*#devartlogo  {
    float: left;
    width: 25%;
    overflow:hidden;
}*/

.headwrapper {
    background-color:#D62317;
     height:46px;
}



/* ==============
 MOBILE: Menu
 ============== */
#main-navigation    {
    width: 90%;
    margin:auto;
}

#nav {
    padding: 0;
    margin: 0;
    text-align: justify;
}

#nav:after {
    content: '';
    
    display: inline-block;
    width: 100%;
}
#nav li {
    display: inline-block;
    padding-top: 12px;
}

nav a:link,hover,
nav a:visited {
    color: white;
    
    text-decoration: none;
}

nav a:hover {
    color: #999;
}

nav  .current a {
    color: #999;
}

 .devartlogo {
    font-family: Trebuchet MS;
    font-size: 1.1em;
    letter-spacing: 0.09em;
}
/* ==============
Poster fill
 ============== */

#bg-image {
    clear:both;
    background: url("still480.jpg")  no-repeat center;
    /*background-color:pink;*/
    height:275px;
}


#logobox {
    padding-top:20px;
    margin-left:5%;
}

#logobox img    {
    margin-right: 30px;
}

.appicon   {
    width:76px;
    height:76px;
    border-radius: 9px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1)  0 0px 3px 1px ;
    -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 0px 3px 1px ;
}


.appbadge   {
    width:135px;
    height: 40px;
}

#videobox {
    text-align:center;
    padding-top:90px;
}

#videobox img   {
    width:152px;
    height:36px;
}
/* ==============
Containers
 ============== */
.apptitle_container {
   
    height: 90px;
}


.apptitle_container img    {
      margin-right: 30px;
}



.icon   {
    width:90px;
    height:90px;
    border-radius: 15px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1)  0 0px 3px 1px ;
    -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 0px 3px 1px ;
}

.apptitle_container h1   {
    padding:0;
    margin:0;
    line-height: 90px;
}

.welcome    {
    padding-bottom:40px;
}

#container  {
    background-color:white; background-color:white;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1)  0 0px 3px 1px ;
    -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 0px 3px 1px ;
    border-bottom:1px solid #a3a4a5;
}


#videocontainer {
    width:852px;
    height:480px;
    position:absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    cursor: default;
}

.twitter-follow-button, .twitter-share-button  {
    margin-top: 10px;
}


#tips   {
   padding-left: 5%;
}


/* ==============
video
 ============== */

.video{
    width:852px;
    height:480px;
}

.closesmart {
    background: url("close.png") no-repeat 30px 100px;
    background-color:#ddd;
    
}

/* ==============
eight-views
 ============== */
#eight-views h3 {
    margin-top: 60px;
     margin-left: 5%;
}


.viewsimg {
    width:40%;
     margin-left: 5%;
}
/* ==============
 Features
 ============== */

.feature    {
    clear:both;
    padding-top: 60px;
    padding-bottom: 60px;
    
    border-top:1px solid #a3a4a5;
    width:100%;
}



.left   {
    float:left;
    width:100%;
   
}

.right  {
    float:left;
    width:100%;
}

.center  {
    text-align: center;
}

.headerleft   {
    float:left;
    width:45%;
    padding-right: 5%;
}
.watch {
    height:360px;
    width:200px;
    margin:0 auto;
    padding-bottom: 60px;
}



.views  {
    text-align: center;
}



.iphoneimg {
    width:70%;
   
    
}
.viewimg {
   padding-top: 60px;
   width:90%;
   
}





.views-tekst   {
    clear: both;
    padding-top: 40px;
}


.iphone-screenshot {
    text-align: center;
    
}

.iphone-screenshot img{
    width:263px;
    height:454px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px 1px;
    -moz-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px 1px;
    
}


.langue {
    width: 296px;
    height: 80px;
}
/* ==========================================================================
footer
 ========================================================================== */

footer {
    clear:both;
    text-align: center;
    font-size: small;
}


/* ==========================================================================
 Styles
 ========================================================================== */

h1, h2, h3, p {
	   line-height: 1.5em;
       font-weight: normal;
}


h1  {
    font-size: 2.0em;
}

h2  {
    font-size: 1.7em;
}



a  {
    text-decoration: none;
     color:#0580ff;
}

a:hover {
    text-decoration:underline;
}

.press {
     color: #666;
}

.bg_grey    {
    background-color: #ddd;
}


#faq    {
    clear:both;
    font-weight:bold;
    line-height: 2.5em;
}

.page h3  {
    color: #252525;
    font-weight: bold;
    font-size: 1.3em;
}



.linebreak  {
   padding-top: 40px;
   padding-bottom: 40px;
   border-bottom:1px solid #a3a4a5;
}

.last  {
    padding-top: 40px;
    padding-bottom: 40px;
}

#antwoorden h2  {
    color: #D62317;
}


/* ==========================================================================
 Social media
 ========================================================================== */

.icon-mail {
    content: url("mailicon.png");
    height: 32px;
    
}

.icon-fb {
    content: url("fbicon.png");
    height: 32px;
    
}

.icon-tw {
    content: url("twicon.png");
    height: 32px;
    
}

.icon-gp {
    content: url("gpicon.png");
    height: 32px;
    
}

.icon-in {
    content: url("inicon.png");
    height: 32px;
    
}



/* ==========================================================================
 Media Queries
 ========================================================================== */


@media only screen and (min-width: 480px) {
    
    /* ====================
     INTERMEDIATE
     ==================== */
    
      /*#devartlogo  {
       
        width: 35%;
    }*/
    
    
    

   #bg-image {
       background: url("still1140.jpg")  no-repeat center;
       height:640px;
    }



    #logobox {
        padding-top:50px;
    }

    #videobox {
       padding-top:400px;
    }

    h1  {
        font-size: 2.5em;
    }
    
    
    #videobox img   {
        width:169px;
        height:40px;
    }
    
    .iphoneimg {
        width:308px;
        height:643px;
    }
    
    .viewimg {
        width:45%;
    }
    
    #eight-views h3 {
        margin-top: 90px;
    }
    .viewsimg {
        width:263px;
        height:454px;
      margin-right: 3%;
      
    }
}
/* ====================
 INTERMEDIATE 768
 ==================== */

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


    .left  {
        float:left;
        width:45%;
      
    }
    
    .right  {
        float:right;
        width:45%;
        
    }
    
    .iphone-screenshot {
        text-align: left;
         margin-left: 30px;
        
    }
    
    .views  {
        text-align: left;
    }
    
    .iphoneimg {
        margin-left: 20px;
    }
    
    .viewimg {
        width:308px;
        height: 484px;
        padding-top: 94px;
    }
    
   
}

/* ============
 WIDE screen
 ============ */
@media only screen and (min-width: 1140px) {
   
   #bg-image,  .headwrapper, #container {
        width: 1140px;
        margin: 0 auto;
    }
  
    .wrapper  {
        width: 1026px; /* 1140px - 10% for margins */
        margin: 0 auto;
    }
}
