﻿/* Smartphone sample */

/* CONTAINER-SMART */
.EETcontainer-smart{
top:0;
left:0;
font-size:4.0em;
display:grid;
grid-template-columns:max-content auto;
gap:0.0vw;
background-color:#bdb76b;
}
/* MEDIA */
/*@media only screen and (max-width:915px){.EETcontainer-smart{grid-template-columns:max-content 72%}}
@media only screen and (max-width:851px){.EETcontainer-smart{grid-template-columns:max-content 71%}}
@media only screen and (max-width:823px){.EETcontainer-smart{grid-template-columns:max-content 70%}}
@media only screen and (max-width:820px){.EETcontainer-smart{grid-template-columns:max-content 69%}}
@media only screen and (max-width:800px){.EETcontainer-smart{grid-template-columns:max-content 68%}}
@media only screen and (max-width:760px){.EETcontainer-smart{grid-template-columns:max-content 67%}}
@media only screen and (max-width:736px){.EETcontainer-smart{grid-template-columns:max-content 66%}}
@media only screen and (max-width:720px){.EETcontainer-smart{grid-template-columns:max-content 65%}}
@media only screen and (max-width:678px){.EETcontainer-smart{grid-template-columns:max-content 64%}}
@media only screen and (max-width:667px){.EETcontainer-smart{grid-template-columns:max-content 63%}}
@media only screen and (max-width:640px){.EETcontainer-smart{grid-template-columns:max-content 61%}}
@media only screen and (max-width:568px){.EETcontainer-smart{grid-template-columns:max-content 56%}}
@media only screen and (max-width:507px){.EETcontainer-smart{grid-template-columns:auto}}
@media only screen and (max-height:414px){.EETcontainer-smart{grid-template-columns:auto}}
*/

.EETcontainer-smart a:link,
.EETcontainer-smart a:visited{color:#606060;text-decoration:none}
.EETcontainer-smart a:hover,
.EETcontainer-smart a:active{color:#7AA10F;text-decoration:none}





/* CONTAINER-33 */
.EETcontainer-smart-33{
margin-top:5px;
margin-left:0px;
font-size:1.0em;
display:grid;
grid-template-columns:repeat(3,1fr);
column-gap:0.0vw;
background-color:transparent
}
.EETcontainer-smart-33 >div{z-index:0}
.EETcontainer-smart-33 p{margin:30px 10px 0 0;font-size:1.0em; color:aliceblue;text-align:center}
/* MEDIA */
/*@media only screen and (max-width:834px){.EETcontainer-smart-33{grid-template-columns:repeat(3,1fr)}}
@media only screen and (max-width:568px){.EETcontainer-smart-33{grid-template-columns:repeat(1,1fr)}}

.EETcontainer-smart-33 a:link,
.EETcontainer-smart-33 a:visited{color:#000;text-decoration:none}
.EETcontainer-smart-33 a:hover,
.EETcontainer-smart-33 a:active{color:#7AA10F!important;text-decoration:none}

.EETcontainer-smart-33 hr{
border:0;
height:1px;
margin-top:8px;
margin-bottom:6px;
margin-left:-10px;
width:100%;
background:linear-gradient(to left, rgba(204,204,204,9), transparent);
}
*/



/* INFOBALK TOP SMART*/
.EETinfobalkTopSmart{
height:34px;
width:100%;
margin-top:100px;
margin-bottom:-30px;
padding:7px 0 0 5px;
font-size:1.0em;
color:#000;
text-align:left;
border-radius:0 10px 0  0;
background:linear-gradient(to right, rgba(255,255,255,0.4), rgba(128,128,0,0.9)60%);
background-color:#fff;
}

.EETinfobalkTopSmart a{float:right;margin-right:30px;font-size:1.0em;margin-top:0}
.EETinfobalkTopSmart a:link,
.EETinfobalkTopSmart a:visited{color:#fff !important;text-decoration:none}
.EETinfobalkTopSmart a:hover,
.EETinfobalkTopSmart a:active{color:#dcdcdc !important;text-decoration:none}






/* De smartphone met borders */
.smartphone
{
position:relative;
width:332px;
height:665px;
margin:10px 5px;
border:12px #2E3032 solid;
border-top-width:60px;
border-bottom-width:60px;
border-radius:36px;
box-shadow:2px 2px 6px #666;
}

/* De horizontale lijn op de top van de smartphone */
.smartphone:before
{
position:absolute;
content:'';
display:block;
width:60px;
height:5px;
top:-30px;
left:50%;
transform:translate(-50%, -50%);
background:#000;
border-radius:10px;
}

/* De cirkel op de bodem van de smartphone */
.smartphone:after
{
position:absolute;
content:'';
display:block;
width:35px;
height:35px;
left:50%;
bottom:-65px;
transform:translate(-50%, -50%);
background:#000;
border-radius:50%;
}

/* Het scherm en de inhoud van de smartphone */
.smartphone .content
{
width:257px;
height:545px;
/*background:red;*/
}
