/*fonts*/
    @font-face
    {
        font-family: doodlowers;
        src: url(../fonts/doodlowers/Doodlowers.ttf);
    }

/*tool bar*/
   	section
   	{
       	display:inline;
   	}
	/*format drop down selection lists*/
		.selectLists
		{
	          background-color: #337ab7;
	          color: #fff;
	          border-color: #2e6da4;
	          border-radius: 3px;
	          cursor: pointer;
		}

		select.selectLists
	     {
	          padding:5px 0px 5px 0px;
	     }

	/*Style The Color Picker Button*/
		/*color list*/
			h3 div.sp-replacer.sp-light
			{
				margin-left: 15px;
			}
			.sp-replacer.sp-light
			{
				background-color: #337ab7;
				border-color: #2e6da4;

				border-radius: 3px;
			}
			/*down arrow*/
			.sp-dd 
			{
			    color:white;

			}
/*###################################*/
    /*loader*/

        /*outside div*/
        .loader 
            {
                background: #101010;
                background: radial-gradient(#222, #101010);
                bottom: 0;
                left: 0;
                overflow: hidden;
                position: fixed;
                right: 0;
                top: 0;
                z-index: 99999;
            }

        /*Rainbow HiC curved text*/
            h1 span
            {
                height:200px;
                left:51%;
                margin: auto;
                position: absolute;
                top: 45%;
                margin-right: -50%;
                width:20px;
                transform: translate(-50%, -50%);
                transform-origin:bottom center;
            }
            .char1 { transform: rotate(-50deg); }
            .char2 { transform: rotate(-40deg); }
            .char3 { transform: rotate(-30deg); }
            .char4 { transform: rotate(-20deg); }
            .char5 { transform: rotate(-10deg); }
            .char6 { transform: rotate(0deg); }
            .char7 { transform: rotate(10deg); }
            .char8 { transform: rotate(20deg); }
            .char9 { transform: rotate(30deg); }
            .char10 { transform: rotate(40deg); }
            .char11 { transform: rotate(50deg); }

        /*loading text with flashing dots*/
            .loadingText
            {
                display: inline-block;
                font-size: 25px;
                color: white;

                height:200px;
                left:50%;
                margin: auto;
                position: absolute;
                top: 75%;
                margin-right: -50%;
                width:20px;
                transform: translate(-50%, -50%);
                transform-origin:bottom center;
              
            }
            @keyframes blink 
            {
                0% 
                {
                    opacity: .2;
                }
                20% 
                {
                    opacity: 1;
                }
                100% 
                {
                  opacity: .2;
                }
            }
            p.loading
            {
                display: inline-block;
            }
            .loading span 
            {
                animation-name: blink;
       
                animation-duration: 1.4s;
                animation-iteration-count: infinite;
                animation-fill-mode: both;
            }

            .loading span:nth-child(2) 
            {
                animation-delay: .2s;
            }

            .loading span:nth-child(3) 
            {

                animation-delay: .4s;
            }


        /*rotating rainbow*/
            .loader-inner 
            {
                bottom: 0;
                height: 40px;
                left: 0;
                margin: auto;
                position: absolute;
                right: 0;
                top: 0;
                width: 100px;
            }
            .loader-line-wrap 
            {
                animation: 
                    spin 8000ms cubic-bezier(.175, .885, .32, 1.275) infinite
                ;
                box-sizing: border-box;
                height: 70px;
                left: 0;
                overflow: hidden;
                position: absolute;
                top: 0;
                transform-origin: 50% 100%;
                width: 150px;
            }
            .loader-line 
            {
                border: 4px solid transparent; /* the 'strokes' of the arc */
                border-radius: 100%; /* for making the elements 'round' */
                box-sizing: border-box;
                height: 200px;
                left: 0;
                margin: 0 auto;
                position: absolute;
                right: 0;
                top: 0;
                width: 200px;
            }
            .loader-line-wrap:nth-child(1) { animation-delay: -100ms; }
            .loader-line-wrap:nth-child(2) { animation-delay: -300ms; }
            .loader-line-wrap:nth-child(3) { animation-delay: -400ms; }
            .loader-line-wrap:nth-child(4) { animation-delay: -500ms; }
            .loader-line-wrap:nth-child(5) { animation-delay: -600ms; }
            .loader-line-wrap:nth-child(6) { animation-delay: -700ms; }
            .loader-line-wrap:nth-child(7) { animation-delay: -800ms; }

            
            /*red*/
            .loader-line-wrap:nth-child(1) .loader-line 
            {
                border-color: rgb(251, 0, 0);
                height: 118px;
                width: 118px;
                top: 7px;
            }
            /*orange*/
            .loader-line-wrap:nth-child(2) .loader-line 
            {
                border-color: rgb(255,154,0);
                height: 104px;
                width: 104px;
                top: 14px;
            }


            /*yellow*/
            .loader-line-wrap:nth-child(3) .loader-line 
            {
                border-color: rgb(253,255,0);
                height: 90px;
                width: 90px;
                top: 21px;
            }

            /*green*/
            .loader-line-wrap:nth-child(4) .loader-line 
            { 
                border-color: rgb(0,255,17);
                height: 76px;
                width: 76px;
                top: 28px;
            }

            /*blue*/
            .loader-line-wrap:nth-child(5) .loader-line 
            {
                border-color: rgb(0, 191, 251);
                height: 62px;
                width: 62px;
                top: 35px;
            }

            /*Indigo*/
            .loader-line-wrap:nth-child(6) .loader-line 
            {
                border-color: rgb(0,30,255);
                height: 48px;
                width: 48px;
                top: 42px;
            }


            /*violet*/
            .loader-line-wrap:nth-child(7) .loader-line 
            {
                border-color: rgb(137,0,255);
                height: 34px;
                width: 34px;
                top: 49px;
            }


            @keyframes spin 
            {
                0%, 15% 
                {
                    transform: rotate(0);
                }
                100% 
                {
                    transform: rotate(360deg);
                }
            }