﻿/*** common ***/
.maincsection
{
    width:100%;
    height:100vh;
    min-height:710px;
    display:block;
}

#footerlogos
{
    position:fixed;
    z-index:9999;
    width:250px;
    left:calc(50% - 125px);
    bottom:20px;
}

#footerlogos img
{
    width:100%;
}


/**** init ****/
.inibackground
{
    position:fixed;
    top:0px;
    left:0px;
    display:block;
    width:100%;
    height:100%;
    z-index:0;
    display:none;
}

#bluebox
{
    background:url(/gfx/qgbluebg.jpg) no-repeat;
    background-size:cover;
    display:block;
}

#cgi1
{
    background:url(/img/db/slideshow/image1.jpg) no-repeat;
    background-size:cover;
    background-position:center;
    z-index:1;
}

#cgi2
{
    background:url(/img/db/slideshow/image2.jpg) no-repeat;
    background-size:cover;
    background-position:center;
    z-index:1;
}

#cgi3
{
    background:url(/img/db/slideshow/image3.jpg) no-repeat;
    background-size:cover;
    background-position:center;
    z-index:1;
}

#cgi4
{
    background:url(/img/db/slideshow/image4.png) no-repeat;
    background-size:cover;
    background-position:center;
    z-index:1;
}

#cgi5
{
    background:url(/img/db/slideshow/image5.png) no-repeat;
    background-size:cover;
    background-position:center;
    z-index:1;
}

#cgi6
{
    background:url(/img/db/slideshow/image6.png) no-repeat;
    background-size:cover;
    background-position:center;
    z-index:1;
}

#inilogo, #inilogoblack
{
    width:150px;
    display:block;
    top:60px;
    position:fixed;
    margin-left:calc(50% - 75px);
    z-index:100;
}

#initslogan, #initslogan2, #initslogan3, #initslogan4, #initslogan5, #initslogan6
{
    color:white;
    font-family:'Source Serif Pro';
    font-style:italic;
    width:80%;
    left:10%;
    font-size:26px;
    text-align:center;
    margin-top:50px;
    font-weight:lighter;
    top:40vh;
    letter-spacing:2px;
    position:fixed;
    z-index:100;
}

#initslogan span, #initslogan2 span, #initslogan3 span, #initslogan4 span, #initslogan5 span, #initslogan6 span
{
    padding-top:100px;
    font-family:'Source Serif Pro';
    font-size:26px;
    font-style:italic;
    font-weight:lighter;
    display:block;
}

#inilogo,#inilogoblack,#initslogan,#footerlogos,#initslogan2, #initslogan3, #initslogan4, #initslogan5, #initslogan6
{
    display:none;
}

/*** form section ***/

#formsection
{
    display:none;
    position:fixed;
    left:0px;
    top:0px;
}

#slideshowbox, #slideshowbox li
{
    width:100vw;
    height:100vh;
}

#slideshowbox li
{
    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-position: center center !important;
}

#formbluebox
{
    width:400px;
    display:none;
    position:fixed;
    top:calc(50vh - 195px);
    left:calc(50% - 200px);
    z-index:999;
    min-height:500px;
}

#formbluebox img
{
    width:20%;
    margin:15px 40%;
}

#formbluebox input, #formbluebox select, .spanform
{
    width:90%;
    margin-left:5%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color:rgba(255,255,255,0.5);
    font-size:15px;
    font-family:'Source Serif Pro';
    font-style:italic;
    display:block;

    background:none;
    border:0px;
    border-bottom:1px solid rgba(255,255,255,0.5);
    height:26px;
    margin-top:10px;
    padding-left:5px;
}

.spanform
{
    padding-top:4px;
    background:url(/gfx/chevron.png) no-repeat right,#292e54;
    background-size:20px;
}

#formbluebox select
{
    background:url(/gfx/chevron.png) no-repeat right,#292e54;
    background-size:20px;
}

#formbluebox select:focus option, #formbluebox select option
{
    width:90% !important;
}

#formbluebox input::placeholder, #formbluebox select::placeholder 
{
    color: rgba(255,255,255,0.5);
}

#formbluebox span.requir
{
    width:90%;
    margin:10px 5%;
    color:white;
    font-size:12px;
    float:left;
    font-weight:lighter;
}

#formbluebox a#regbtt, .skipbtt
{
    color:white;
    border:1px solid white;
    width:auto;
    padding:6px 14px;
    font-size:12px;
    margin:10px auto;
    display:table;
    text-transform:uppercase;
    letter-spacing:3px;
    font-family:'Open Sans';
    font-style:normal;

    -moz-transition: color 0.5s, background 0.5s;
	-webkit-transition: color 0.5s, background 0.5s;
	-o-transition: color 0.5s, background 0.5s;
	-ms-transition: color 0.5s, background 0.5s;
	transition: color 0.5s, background 0.5s;
}

#formbluebox a#regbtt:hover, .skipbtt:hover
{
    background:white;
    color: #292e54;
}

/***  thank you ***/

#tymsg
{
    display:none;        
    color:white;
    font-family:'Source Serif Pro';
    font-style:italic;
    width:100%;
    margin-left:0%;
    font-size:34px !important;
    text-align:center;    
    font-weight:lighter;    
	height:auto;
}

#endlogo
{
    width:180px;
    padding-top:40px;
    left:calc(50% - 90px);
    position:fixed;
    z-index:99999;
    top:20px;
}

.webapplink
{

}


#endslogan
{
    color:white;
    font-family:'Source Serif Pro';
    font-style:italic;
    width:60%;
    left:20%;
    font-size:34px;
    text-align:center;
    margin-top:50px;
    font-weight:lighter;
    position:fixed;
    z-index:99999;
    top:400px;
}

#endlogo,#endslogan
{
    display:none;
}

#tlegallinks
{
    position:fixed;
    left:65%;
    bottom:30px;
    display:none;
}

#tlegallinks a
{
    padding-left:20px;
    color:white;
}

#pagesbg
{
    background:rgba(0,0,0,0.6);
    position:fixed;
    width:100%;
    height:100vh;
    left:0px;
    top:0px;
    display:none;
    z-index:99999;
}

#pagescontentbox
{
    background:#292e54;
    position:fixed;
    width:80%;
    height:80vh;
    top:10vh;
    left:10%;
    overflow:hidden;
    border-radius:25px;
    display:none;
}

#pagescontentbox a
{
    width:96%;
    margin-left:2%;
    display:block;
    height:20px;
    text-align:right;
    color:white;
    padding-top:15px;
}

.tcrealcontent a
{
    text-align:left !important;
}

#pagescontentbox a i
{
    color:white;
}

.tcrealcontent
{
    width:80%;
    margin-left:10%;
    margin-top:40px;
    font-family:'Open Sans';
    font-size:15px;
    line-height:20px;
    color:white;
    height:calc(80vh - 60px);
    overflow:auto;
    display:none;
}

.tcrealcontent p
{
    padding-bottom:7px;
}

#termscontent
{

}

.dropdownsmc
{
    background:#292e54;
    position:absolute;
    width:90%;
    margin-left:5%;
    display:none;
}

.dropdownsmc li
{
    border:1px solid rgba(255,255,255,0.5);
    border-top:0px;
    color:rgba(255,255,255,0.5);
    font-size:15px;
    font-family:'Source Serif Pro';
    padding:7px 2%;
    background:#292e54;
}

.dropdownsmc li:hover
{
    background:rgba(0,0,0, 0.2);
}

.holdingspace
{
    width:90%;
    margin-left:5%;
    height:30px;
    margin-top:-30px;
    display:block;
    z-index:999999;
}

#name
{
    margin-top:10px;
}

.dropdownsmc
{
    height:220px; 
    overflow:hidden;
    z-index:99999;
}

.dropdownsmc > div
{
    height:220px;
    overflow:auto;
}

.countryd, #countrycontent
{
    height:195px;
}

#enquirestatic
{
	position:fixed;
	top:5%;
	right:5%;
	z-index:999999;
}

#enquirestatic a
{
	float:right;
}

#enquirestatic a:last-child
{
	margin-right:10px;
}

#downloadstatic
{
	position:fixed;
	bottom:20vh;
	left:calc(50% - 235px);
	z-index:999999;
}

#downloadstatic a
{
	float:left;
	margin-left:10px;
}

.tybtt
{
	margin: 2em auto;
}

@media screen and (max-height:830px)
{
    #initslogan span, #initslogan2 span, #initslogan3 span
    {
        padding-top:50px;
    }

    #formbluebox {
        top: 250px;
    }

    #formbluebox, #formsection
    {
        position:absolute;
    }

    #slideshowbox, #slideshowbox li
    {
        height:690px;
    }

    #inilogo, #inilogoblack
    {
        position:absolute;
    }

    #initslogan, #initslogan2, #initslogan3, #initslogan4, #initslogan5, #initslogan6
    {
        position:absolute;
        top:200px !important;
    }

    #initslogan span,#initslogan2 span,#initslogan3 span
    {
        padding-top:30px;
    }

	#downloadstatic
	{
		bottom:10vh;
	}
}

@media screen and (max-height:830px) and (max-width:760px)
{

    #footerlogos
    {
        position:absolute;
        top:700px;
        bottom:auto;
    }
}

@media screen and (max-width:760px) 
{
    #cgi1
    {
        background:url(/img/db/slideshow/image1mob.jpg) no-repeat;
        background-position:center;
    }

    #cgi2
    {
        background:url(/img/db/slideshow/image2mob.jpg) no-repeat;
        background-position:center;
    }

    #cgi3
    {
        background:url(/img/db/slideshow/image3mob.jpg) no-repeat;
        background-position:center;
    }

	#cgi4
    {
        background:url(/img/db/slideshow/image4mob.png) no-repeat;
        background-position:center;
    }

	#cgi5
    {
        background:url(/img/db/slideshow/image5mob.png) no-repeat;
        background-position:center;
    }

	#cgi6
    {
        background:url(/img/db/slideshow/image6mob.png) no-repeat;
        background-position:center;
    }


    #footerlogos
    {
        position:absolute;
        bottom:35px;
    }

    #tlegallinks
    {
        position:absolute;
        top:760px;
        left:50%;
        padding-bottom:50px;
    }

    #initslogan, #initslogan2, #initslogan3
    {
        font-size:22px;
    }

	#initslogan, #initslogan2, #initslogan3, #initslogan4, #initslogan5, #initslogan6
    {
        position:absolute;
        top:200px !important;
    }
	
	#downloadstatic
	{
		bottom:8vh;
	}
}

@media screen and (max-width:660px) 
{
	#enquirestatic a 
	{
		clear: right;
	}
	#enquirestatic a:last-child
	{
		margin-right:0px;
	}
}

@media screen and (max-width:560px) 
{
	#downloadstatic a
	{
		float:none;
		clear:left;
		margin:10px auto !important;
	}

	#downloadstatic 
	{
		left: calc(50% - 107px);
	}
}