body
{
   margin:0px;
   background-size: 100% 100%;
   background-attachment: fixed;
} 
#main_page{
   display:none;
}
#policy{
   display:none;
   background-color:lightgrey;
}
#navigation_panel{
   height:50px;
   position:relative;
   background-color:red;
   box-shadow:0px 0px 10px 0px black;
   z-index:2;
   opacity:1;
}
#navigation_panel_placeholder{
   position:absolute;
   height:100%;
   width:140px;	 
   right:0%;
}
#navigation_panel_image{
   position:absolute;
   height:100%;
   width:180px;	 
   left:0%;
   background-image:url('logos/createo.png'); 
   background-size: 75% 230%;
   background-position:8px -30px;
   background-repeat:no-repeat;
}
#navigation_panel_sidebars{
   position:absolute;
   height:100%;
   width:50%;
   font-size:10px;
   background-image:url('logos/Menu.png'); 
   background-size: 76% 90%;
   background-position:8px 3px;
}
#navigation_panel_sidebars p{
   position:relative;
   left:52px;
   top:9px;
}
#navigation_panel_login{
   position:absolute;
   height:77.5%;
   width:50%;	
   left:50%;   
   padding-top:8%;
   text-align:center;
   font-family: "Comic Sans MS", cursive, sans-serif;
   font-size:110%;
}
#navigation_panel_login p{
   position:absolute;
   left:52px;
   top:7px;
   font-size:10px;
}
#info_panel1{
   height:50%;
   width:100%;
   padding-bottom:0px;
   position:relative;
   background:linear-gradient(to right, lightgrey 0%,#00cccc 30%, #00cccc 70%, lightgrey 100%);
   transition:background 3s linear infinite;
}
#info_panel1 > img{
   position:absolute;
   text-align:center;
   left:50%;
   top:0%;
   margin:0px;
   transform:translate(-50%,0%);
}
#info_panel1 > div{
   width:220px;
   height:200px;
   padding-bottom:0px;
   position:relative;
   background-color:transparent;
   top:50%;
   left:50%;
   transform:translate(-50%,-55%);
}
#info_panel1 > div > img{
   position:absolute;
   left:0px;
   top:0px;
   max-width:100%;
   opacity:0;
}
#info_panel1 > div > img[id='banner0']{
   opacity:1;
}

#info_panel2{
   height:70%;
   width:100%;
   position:relative;
   background-color:transparent;
   box-shadow:0px 0px 10px 0px black;
   z-index:1;
}
#span1{
    position:absolute;
	width:100%;
	height:100%;
	z-index:-1;
	background-color:aliceblue;
    opacity:0.4;
}
#span2 > div{
   position:absolute;
   width:60px;
   height:60px;
   left:50%;
   transform:translate(-50%,0%);
   background-color:white;
   border-radius:35px;
   border:2px solid dodgerblue;
   bottom:3%;
}
#span2 > div >img{
   position:absolute;
   width:95%;
   height:90%;
   top:7px;
   left:1px;
}
#info_panel2 > div{
   width:824px;
   padding:3px;
   position:absolute;
   background-color:cornflowerblue;
   top:-10%;
   left:50%;
   transform:translate(-50%,0%);
   font-family: "Comic Sans MS", cursive, sans-serif;
}
#info_panel2 > div > span{
   width:200px;
   height:30px;
   position:absolute;
   top:-7%;
   left:50%;
   transform:translate(-50%,0%);
}
#info_panel2 > div > span > span{
   width:7px;
   height:7px;
   position:relative;
   margin-left:35px;
   float:left;
   cursor:pointer;
   background-color:transparent;
   border-radius:10px;
   border:1px solid grey;
}
#info_panel2 > div > span > span[id="banner_button0"]{
   background-color:cornflowerblue;
}
#shadow_span{
   width:824px;
   height:10%;
   padding:3px;
   background-color:white;
   position:absolute;
   top:-10%;
   left:50%;
   transform:translate(-50%,0%);
   box-shadow:0px 0px 10px 0px black;
}
#info_panel2 > div > div{
   width:200px;
   height:180px;
   position:relative;
   background-color:white;
   border:3px solid cornflowerblue;
   box-shadow:inset 0px 0px 15px 0px cornflowerblue;
   float:left;
   overflow:hidden;
}
#info_panel2 > div > div img{
   width:100%;
   height:100%;
   position:absolute;
   top:50%;
   left:50%;
   transform:translate(-50%, -50%);
}
#info_panel2 > div > div p{
   position:absolute;
   width:100%;
   text-align:center;
   margin:0px;
   top:50%;
   transform:translate(0%,-50%);
}

#footer{
   height:50px;
   position:relative;
   background-color:red;
   z-index:2;
}
#footer_panel_placeholder
{
   position:absolute;
   height:100%;
   width:190px;	 
   right:0%;
}
#footer_panel_placeholder img
{
   margin-top:12px;
   position:relative;
   width:25px;
   height:25px;
}
#footer_panel_placeholder img[title="Linkedin"]
{
   width:31px;
}
#footer_panel_placeholder a
{
   position:relative;
   margin-top:12px;
   margin:6px;
   width:25px;
   height:25px;
}
#footer_panel_placeholder p
{
   position:absolute;
   left:-85px;
   text-align:center;
   font-family: "Comic Sans MS", cursive, sans-serif;
}

#about
{
   height:100%;
   position:relative;
   background-color:cornsilk;
   display:none;
}
#about > div
{
   position:relative;
   width:50%;
   height:80%;
   margin:5%;
   padding:0px;
   float:left;
   font-family: "Comic Sans MS", cursive, sans-serif;
}
#about img
{
   position:absolute;
   width:35%;
   height:60%;
   right:0px;
   margin:0px;
   padding:0px;
}

#contact
{
   height:100%;
   position:relative;
   background-color:lightgrey;
   display:none;
}
#contact > div
{
   position:relative;
   height:100%;
   width:80%;
   left:50%;
   transform:translate(-50%,0%);
}
#contact > div > div
{
   position:relative;
   padding-top:1%;
   height:23%;
   width:100%;
   font-family: "Comic Sans MS", cursive, sans-serif;
   text-align:center;
}
#contact > div > div p
{
   position:relative;
   width:600px;
   left:50%;
	transform:translate(-50%, 0%);
}
#contact table
{
   position:absolute;
   width:50%;
   padding-bottom:2.5%;
   left:50%;
   top:50%;
   transform:translate(-50%,-35%);
   font-family: "Comic Sans MS", cursive, sans-serif;
   font-size:100%;
}
#contact table div
{
   position:relative;
   width:76.5%;
   padding:1%;
   text-align:center;
   border:1px solid green;
   border-radius:5px;
   background-color:lightgreen;
   margin-left:10%;
   font-family: "Comic Sans MS", cursive, sans-serif;
   font-size:100%;
   display:none;
}
#contact input
{
   width:80%;
   margin-left:10%;
   margin-top:5%;
   height:35px;
   background-color:transparent;
   border:1px solid black;
   border-radius:5px;
   outline:none;
   padding-left:10px;
   padding-right:10px;
   font-family: "Comic Sans MS", cursive, sans-serif;
   font-size:100%;
}
#contact textarea
{
   width:80%;
   margin-left:10%;
   margin-top:5%;
   height:150px;
   background-color:transparent;
   border:1px solid black;
   border-radius:5px;
   outline:none;
   padding-left:10px;
   padding-right:10px;
   font-family: "Comic Sans MS", cursive, sans-serif;
   font-size:100%;
}
#contact button
{
   width:150px;
   margin-left:10%;
   margin-top:5%;
   height:35px;
   background-color:dodgerblue;
   border-radius:5px;
   outline:none;
   text-align:center;
   font-family: "Comic Sans MS", cursive, sans-serif;
   font-size:100%;
   cursor:pointer;
   border:0px solid white;
}

@media screen and (min-width:875px) and (max-height:800px){
#info_panel1{
   height:340px;
}
#info_panel2{
   height:500px;
}
}
@media screen and (min-width:1440px){
#info_panel2 > div{
   width:1224px;
}
#info_panel2 > div > div{
   width:300px;
   height:270px;
}
#shadow_span{
   width:1224px;
}
#info_panel1 > div{
   width:320px;
   height:300px;
}
#info_panel1 > img{
   width:600px;
}
}
@media screen and (max-width:875px){
#contact > div > div p
{
   width:100%;
}
#contact table
{
   width:90%;
}
#info_panel1{
   height:340px;
}
#info_panel2{
   height:820px;
}
#info_panel2 > div{
   width:412px;
   top:-5%;
}
#shadow_span{
	   width:412px;
	   top:-5%;
	   height:5%:
}
#info_panel2 > div > span{
   top:-4%;
}
}
@media screen and (max-width:450px){
#contact > div
{
   width:100%;
}
#contact table
{
   width:100%;
}
#info_panel2 > div > span{
   top:-5%;
}
#info_panel1{
   height:220px;
}
#info_panel1 > div{
   width:120px;
   height:100px;
}
#info_panel1 > img{
   width:230px;
}
#info_panel2{
   height:510px;
}
#info_panel2 > div > div{
   width:110px;
   height:100px;
}
	#info_panel2 > div{
	   width:232px;
	   font-size:75%;
	}
#shadow_span{
	   width:232px;
}
#navigation_panel_image{
   background-image:url('logo.png'); 
   background-size: 30% 80%;
   background-position:8px 5px;
}
#footer_panel_placeholder p
{
   display:none;
}
#footer_panel_placeholder
{
   width:200px;	 
   left:0%;
}
}

#how
{
   position:relative;
   background-color:lightgrey;
   display:none;
   font-family: "Comic Sans MS", cursive, sans-serif;
   text-align:center;
}
#how > div > span
{
   position:absolute;
   width:100%;
   height:3px;
   background-color:dodgerblue;
   left:0px;
}
#how > div > span > span {
  position:absolute;
  width: 0px; 
  height: 0px; 
  left:50%;
  transform:translate(-50%, 0%);
  top:-21px;
  margin-top:10px;
  border-right: 27px solid transparent;
  border-bottom: 12px solid dodgerblue;
  border-left: 27px solid transparent;
}
#how > div
{
   position:relative;
   width:100%;
   height:400px;
   margin:0px;
   padding-top:1%;
   padding-bottom:2%;
}
#how > div > div
{
   position:relative;
   width:50%;
   height:80%;
   margin:0px;
   padding:0px;
   float:left;
}
#how > div > div img
{
   position:absolute;
   max-width:96%;
   left:50%;
   top:50%;
	transform:translate(-50%, -47%);
   margin:0px;
   padding:0px;
   border:2px solid white;
   display:none;
}
#how > div > div p
{
   position:relative;
   text-align:center;
   top:50%;
	transform:translate(0%, -48%);
	font-size:1.5vw;
	margin:0%;
	margin-left:20%;
	margin-right:20%;
	display:none;
}
#move_img_left
{
   position:absolute;
   left:0px;
   text-align:center;
   width:7.5%;
   font-size:4.5vw;
   cursor:pointer;
   margin:0px;
   top:50%;
	transform:translate(0%, -50%);
}
#move_img_right
{
   position:absolute;
   right:0px;
   text-align:center;
   width:7.5%;
   font-size:4.5vw;
   cursor:pointer;
   margin:0px;
   top:50%;
	transform:translate(0%, -50%);
}
#move_img_left_tools
{
   position:absolute;
   left:0px;
   text-align:center;
   width:7.5%;
   font-size:4.5vw;
   cursor:pointer;
   margin:0px;
   top:50%;
	transform:translate(0%, -50%);
}
#move_img_right_tools
{
   position:absolute;
   right:0px;
   text-align:center;
   width:7.5%;
   font-size:4.5vw;
   cursor:pointer;
   margin:0px;
   top:50%;
	transform:translate(0%, -50%);
}