/* CSS Document 
# id
. class
: 
margin top right bottom left
*/

/* Division Styles # id . class */


div#buttons {margin-top: 20px;}

/* For file input button to be an image - see tell someone*/
.image-upload>input {
  display: none;
}

/* Footer */
#searchbutton {float:right ;background-color:#25aae2; color:#000000; margin:0; padding-left:10px; padding-right:5px; border:none;}

/* Sixthform Footer */
#searchbutton6 {float:right ;background-color:#25aae2; color:#000000; margin:0; 
padding-top:0; padding-bottom:0;padding-left:10px; padding-right:5px; border:none;}
#searchbutton6 img { margin:0; padding:0; border:none;}


/* Buttons */
.xbutton {border:1px solid #886d4f; padding:.2em; margin:1em .5em 0 0; text-decoration:none; color:#45698c; -webkit-appearance: none;}
.xbutton:hover {border:1px solid #886d4f; padding:.2em; margin:1em .5em 0 0; text-decoration:underline; color:#000000;-webkit-appearance: none; }
.button     {background-color:#da551d; color:#25aae2;
				  text-align:center; 
				  vertical-align:middle; height:28px;
                  border-radius: 15px 15px 15px 15px;
                  padding: 0em 1em; margin:0; -webkit-appearance: none;}
.button:hover {background-color:#25aae2; color:#da551d;  
				  text-align:center; 
				  vertical-align:middle; height:28px;
                  border-radius: 15px 15px 15px 15px;
                  padding:0 1em; margin:0; -webkit-appearance: none; }

.bigbutton     {background-color:#da551d; color:#25aae2;
				  text-align:center; width:calc(100% - 0em);
				  vertical-align:middle; height:28px;
                  border-radius: 15px 15px 15px 15px;
                  padding: 0 1em; margin:0; -webkit-appearance: none;}
.bigbutton:hover {background-color:#25aae2; color:#da551d;  
				  text-align:center; width:calc(100% - 0em);
				  vertical-align:middle; height:28px;
                  border-radius: 15px 15px 15px 15px;
                  padding:0 1em; margin:0; -webkit-appearance: none; }

.fatbutton     {background-color:#da551d; color:#25aae2;
				  text-align:center; width:calc(100% - 0em);
				  vertical-align:middle; height:70px;
                  border-radius: 15px 15px 15px 15px;
                  font-size:24px; 
                  padding: 1em 1em; margin:0; -webkit-appearance: none;}
.fatbutton:hover {background-color:#25aae2; color:#da551d;  
				  text-align:center; width:calc(100% - 0em);
				  vertical-align:middle; height:70px;
                  border-radius: 15px 15px 15px 15px;
			      font-size:24px; 
                  padding:1em 1em; margin:0; -webkit-appearance: none; }

.fakebutton     {background-color:#da551d; color:#25aae2;
				  text-align:center; width:calc(100% + 1em);
				  vertical-align:middle; height:28px;
                  border-radius: 15px 15px 15px 15px;
                  padding: 1px; margin:0; -webkit-appearance: none;}
.fakebutton:hover {background-color:#25aae2; color:#da551d;  
				  text-align:center; width:calc(100% + 1em);
				  vertical-align:middle; height:28px;
                  border-radius: 15px 15px 15px 15px;
                  padding:1px; margin:0; -webkit-appearance: none; }

.ffbutton     {background-color:#da551d; color:#25aae2;
				  text-align:center; width:calc(100% + 1em);
				  vertical-align:middle; height:28px;
                  border-radius: 15px 15px 15px 15px;
                  padding: 1px; margin:0; -webkit-appearance: none;}
.ffbutton:hover {background-color:#25aae2; color:#da551d;  
				  text-align:center; width:calc(100% + 1em);
				  vertical-align:middle; height:28px;
                  border-radius: 15px 15px 15px 15px;
                  padding:1px; margin:0; -webkit-appearance: none; }

.ffbutton img   {background-color:#da551d; color:#25aae2;
				  text-align:center; width:calc(90% - 0em);
				  vertical-align:middle; height:30px;
                  border-radius: 15px 15px 15px 15px;
                  padding: 0; margin:0 8px 0 8px; -webkit-appearance: none;}
                  
.ffbutton:hover img {background-color:#25aae2; color:#da551d;  
				  text-align:center; width:calc(90% - 0em);
				  vertical-align:middle; height:30px;
                  border-radius: 15px 15px 15px 15px;
                  padding:0; margin:0 8px 0 8px; -webkit-appearance: none; }

.next {align: left; border:0;  padding:.4em; margin:.4em;   color:#000000; }
.next:hover {border:0; padding:.4em; margin:.4em;   color:#f2991f;}
.nextOut {align: left; border:0;  padding:.4em; margin:.4em;   color: #949b9a;}

/* End *//* Without this, any image wider than its native pixel size (eg. Mandala.png,
   which had no responsive class applied) forces the whole page wider than
   the phone viewport, and the browser zooms the entire page out to fit it -
   shrinking everything else and making fixed side-margins (eg. .quote) look
   far too wide relative to the squeezed text column. */
img { max-width:100%; height:auto; }

.clear {clear:both; color:#000000; margin:0; padding:0; border:0; height:auto; width:100%;}

        .comment-box { margin-bottom: 15px; padding: 10px; border: 1px solid #ccc; }
        .comment-form { margin-top: 20px; }
        .message { margin-top: 10px; color: green; }
        .error { color: red; }

details.techy { margin: 0.5em 0 1.1em; }
details.techy > summary { cursor: pointer; color: #000000; font-size: 0.9em; font-style: italic; list-style: none; user-select: none; }
details.techy > summary::-webkit-details-marker { display: none; }
details.techy[open] > summary { color: #000000; }
details.techy .techytext { border-left: 3px solid #000000; margin-top: 0.6em; padding: 0.2em 0 0.2em 1em; font-size: 0.96em; }

.iconleft {
	float:left;
	width:80%;
	margin-top:-30px;
	margin-right:10px;
}
img.border {border-style:solid; border-width:thin; border-color:#000000; padding:.2em .2em .2em .2em; margin:0 0 20px 20px;}
img.noborder {border:none;}

img.headingicon { border:none; margin-right:20px;
	max-height:50px; 
	max-width:50px; 
	object-fit: fill; 
}

img.linkicon { border:none; margin-right:20px;
	max-height:40px; 
	max-width:40px; 
	object-fit: fill; 
}


img.texticon { border:none; margin-right:5px;
	max-height:20px; 
	max-width:20px; 
	object-fit: fill; 
}

div.headingicon {float: left;  
	max-height:50px; 
	max-width:50px; 
    width: auto;
    height: auto;
	margin-left: 30px; 
	margin-right: 30px; 
}

img.headingiconright {float: right; border:none; 
	max-height:50px; 
	max-width:50px; 
    width: auto;
    height: auto;
margin-left: 50px; }
/*!

=========================================================
* Coming Sssoon Page - v1.3.2
=========================================================

* Product Page: https://www.creative-tim.com/product/coming-sssoon-page
* Copyright 2017 Creative Tim (http://www.creative-tim.com)
* Licensed under MIT (https://github.com/creativetimofficial/coming-sssoon-page/blob/master/LICENSE.md)

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/

body{
        font-size: 16px;
}
canvas { background: white; border: 1px solid #ccc; }
input[type=range] { width: 40%; }

/*     General overwrite     */
a{
    font-weight: bold;
}
a:hover, a:focus {
    color: #ffff00;
    font-weight: bold;
}


a.white{
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
}
a.white:hover, a.white:focus {
    color: #ffff00;
    font-size: 24px;
    font-weight: bold;
}

a.black{
    color: #000000;
    font-size: 24px;
    font-weight: bold;
}
a.black:hover, a.black:focus {
    color: #0360ad;
    font-size: 24px;
    font-weight: bold;
}
a.bold{
    color: #000000;
    font-weight: bold;
}
a.bold:hover, a.black:focus {
    color: ;
    font-weight: bold;
}
/*
a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    outline : 0;
}
button {background-color:$colourBlue;}
*/

h1         {font-size:26px; color:; margin:.5em 0 0 0; padding:10px; border:0;  }
h1.blue    {font-size:32px; font-weight:bold; color:#0000ff; margin:0; margin-top:.5em; padding:10px;}
h1.gold    {font-size:32px; font-weight:bold; color:#da551d; margin:0; margin-top:.5em; padding:10px;}
/*           Typography          */

.quote {font-size:24px !important; margin-left:50px; margin-right:50px; font:italic;}

.wiki {margin-left:50px; margin-right:50px; font:italic;}

@media (max-width:600px){
    /* A 50px margin either side eats a huge fraction of a phone's width,
       squeezing the text far narrower than the fixed-width margin ever
       intended on a full-size screen. */
    .quote, .wiki { margin-left:12px; margin-right:12px; }
}

p{
    font-size: 16px;
    line-height: 1.6180em;
}

ul {
/*
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
	padding-inline-start: 40px;
	unicode-bidi: isolate;
*/
    padding-inline-start: 20px;
}
/*  */
.twothirdscolumn {width:66%;  vertical-align:top; margin:0;}
.halfcolumn {width:50%; vertical-align:top; margin:0;float:left;}
.halfcolumnleft {width:50%; vertical-align:top; margin:0; float:left;}
.halfcolumnright {width:50%; vertical-align:top; margin:0; float:left;}
.thirdcolumn {width:33%; vertical-align:top; margin:0;float:left;}
.quartercolumn {width:25%; vertical-align:top; float:left;}
.autocolumn { width:auto;  vertical-align:top; margin:0;}

/* A figure shared by the two Mandala images on the home page (the static
   PNG and the JS-drawn spiral overlay) so they always render at the same
   size, on phone and PC alike. */
.mandala-figure { display:block; max-width:560px; width:100%; height:auto; margin:1.6em auto; }

@media (max-width:600px){
    /* Column classes are meant to sit side by side on a wide page; on a
       phone-width screen there usually isn't room for even two, so stack
       them full-width instead of squeezing each into a sliver. */
    .halfcolumn, .halfcolumnleft, .halfcolumnright,
    .twothirdscolumn, .thirdcolumn, .quartercolumn {
        width:100%; float:none;
    }
}
.left{clear:left; float:right; margin-right:auto;}
.right{float:right; margin-left:auto; margin-right:0;}
.centre{float:both; margin-left:auto; margin-right:auto;}
.center{float:both; margin-left:auto; margin-right:auto;}
.leftoftext { padding-right: 10px; }
.rightoftext { padding-left: 10px; }
.centreoftext { padding-left: 10px; padding-right: 10px; }

textarea.comment {width:100%;  vertical-align:top; margin:0;
}

div.mainbody { width:100%; 	position: relative; clear:both;  padding-left:50px; padding-right:50px;
}
@media (max-width:600px){
    /* This 50px padding wraps every page's content; on a phone it alone
       eats over a quarter of the screen width before any other margin is
       even considered. */
    div.mainbody { padding-left:12px; padding-right:12px; }
}
div.red   { color:#ff0000; }
div.green { color:; }
div.blue  { color:#0000ff; }
/*    background-image: url('https://www.asif.vision/resources/images/JuliaSetLotusMandalaOfZodiac.jpg'); */

p.error {color:#ff0000 !important; }
p.line { text-align:right; margin-top:34px; margin-bottom:20px;}
input.line { font-size:20px; box-sizing:border-box; margin-top:12px; margin-bottom:0px; }
select.line { font-size:20px; box-sizing:border-box; margin-top:12px; margin-bottom:0px; }
textarea.line { font-size:20px; box-sizing:border-box; margin-top:12px; margin-bottom:0px; }
button.line:hover {background-color:#bfd630; }
 
.bigbutton { font-size:24px; background-color:; }
.bigbutton:hover { font-size:24px; }


.mandala{
    background-image: url('https://www.asif.vision/resources/images/Mandala.png');
    background-position: center center;
    background-size: cover;
    height: auto;
    left: 0;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 0;
    width: auto;
}
.cover{
    position: fixed;
    opacity: 1;
    background-color: rgba(0,0,0,.1);
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.cover.black{
    background-color: rgba(0,0,0,.6);
}

.logo-container .logo{
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid #333333;
    width: 60px;
    float: left;
}

.main .logo{
    color: #FFFFFF;
    font-size: 56px;
    font-weight: 300;
    position: relative;
    text-align: center;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.33);
    margin-top: 150px;
    z-index: 3;
}
.main .logo.cursive{
    font-family: 'Grand Hotel';
    font-size: 82px;
    
}
.main .content{
    position: relative;
    z-index: 4;
}
.main .motto{
    min-height: 140px;
}
.main .motto, .main .subscribe .info-text{
    font-size: 28px;
    color: #FFFFFF;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.33);
    text-align: center;
    margin-top: 50px;
    
}
.main .subscribe .info-text{
    font-size: 18px;
    margin-bottom: 30px;
}

.footer{
    position: relative;
    bottom: 20px;
    right: 0;
    width: 100%;
    color: #AAAAAA;
    z-index: 4;
    text-align: right;
    margin-top: 50px;
}
.footer a{
    color: #FFFFFF;
}

@media (min-width:991px){
    .footer{
        position: fixed;
        bottom: 20px;
    }
}