*{
    box-sizing: border-box;
}
h2{
    font-family: roboto/*sans-serif*/;
    font-size:30px;
    padding:0;
    margin:0;
}
.basicCurve {
	width:1.953125vw;
    height:1.953125vw;
	padding:0;
    position:relative;
    top:2.05078125vw;
    transform-origin:top right;
}

.layer1 .basicCurve{
    transform: rotate(-10deg);
}
.layer2 .basicCurve{
    transform: rotate(-8deg);
}
.layer1{
    width:13.76953125vw;
    left:36.23046875vw;/*29.296875vw;*/
}
.layer2{
    width:16.6015625vw;
    left:33.3984375vw;/*26.46484375vw*/;
    animation-direction: reverse;
}
.layer3{
    width:19.43359375vw;
    left:30.56640625vw/*23.6328125*/;
}

.layer3 .basicCurve{
    transform: rotate(-6.666667deg);
}
.circContainer{
    top:24.4140625vw;
    position:absolute;
    animation-name: bigRotate;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform: translate(14.6484375vw);
    transform-origin: 100% 50%;  
}
.fillBox{
    background: #5AB9EA;/*#5680E9*/;
}
@keyframes bigRotate {
  from {transform: rotate(0deg)}
  to {transform: rotate(360deg)}
}
.circleCenter{
    font-size:14.6484375vw;
    font-family:CustomFont, sans-serif;
    color:#5AB9EA;
    top:25.390625vw;/*Plus extra 10 for half of turner height*/
    left:50vw;
    position:absolute;
    transform: translate(-50%, -50%);
    user-select: none;
}
@font-face {
font-family: "CustomFont";
src: url("fonts/customFont.woff") format("woff");
}
.headAnimationContainer{
    
    height:100vh;
    margin:0;
    padding:0;
    background-image: radial-gradient(#C1C8E4 30% ,#84CEEB 70%, #8860D0);
}
.pageTitle, .headerContact{
    font-size:40px;
    font-family:roboto;
    text-align: center;
    position:absolute;
    transform: translate(-50%, -50%);
    user-select: none;
    color:white;
    font-weight: 400;
    text-decoration: none;
}
.subTitle{
    font-size:20px;
}
.headerContact{
    font-size:24px;
    top:30vh;
    left:85vw;
}
.pageTitle{
    top:50vh;
    left:15vw;
}


#secondSlide{
    margin:0;
    padding:10px;
    text-align: center;
}
body{
    padding:0;
    margin:0;
    /*overflow-x: hidden; */
    
}
::-webkit-scrollbar {
    display: none;
}
html {
  scroll-behavior: smooth;
}
.animationButton{
    font-size:30px;
    font-family:roboto;
     /*Changeable*/
    /*left:43.06640625vw;*/
    position:absolute;
    transform: translate(-50%, -50%);
    user-select: none;
    text-decoration: none;
    color:white;
    font-weight: 400;
}
.animationButton{
    top:90vh;
    left:85vw;
    width:300px;
}


.animationButton:hover, .headerContact:hover{
    opacity:0.7;
}
@media only screen and (max-width: 600px) {
	.pagePreview img{
		width:100%;
	}
    .basicCurve {
        width:3.90625vw;
        height:3.90625vw;
        top:4.1015625vw;   
    }
    .layer1{
        width:27.5390625vw;
        left:22.59375vw;
        top:50vh;
    }
    .layer2{
        width:33.203125vw;
        left:16.9296875vw;
        top:50vh;
    }
    .layer3{
        width:38.8671875vw;
        left:11.265625vw;
        top:50vh;
    }
    .circContainer{
        /*top:48.828125vw;*/
        top:50vh;
    }
    .circleCenter{
        font-size:29.296875vw;
        top:50vh;/*50.78125vw;/*Plus extra 10 for half of turner height*/
        left:50.1328125vw;
    }
    .animationButton{
        top:90vh; /*Changeable*/
        left:50vw;
        font-size:20px;
        
    } 
    .pageTitle{
        top:15vh;
        left:50vw;
        font-size:26px;
    }
    .subTitle{
        font-size:16px;
    }
    .headerContact{
        top:82vh;
        left:50vw;
        font-size:16px;
    }
}

.webPortQuote{
    width:100vw;
    padding:10px;
    background-color: #8860D0;
    color:white;
    font-family:roboto;
    font-size:20px;
    font-weight:500;
    margin-bottom:20px;
	left:-10px;
	position: relative;
}
.highlights{
    position: absolute;
    padding:0;
    left:0;
}
.webPortQuote .authorSite{
    font-style:italic;
    font-weight:200;
    margin:20px 0;
    font-size:14px;
    
}
.authorSiteLink{
    font-weight:900;
    font-style:normal;
    color:white;
    text-decoration: none;
    margin-left:5px;
}
.authorSiteLink:hover{
    opacity:0.7;
}
.pagePreview{
    display:block;
    
    margin:0 2.5vw;
    border:2px solid #8860D0;
    padding:0;
    
}
.pagePreview.Left{
    float:left;
}
.pagePreview.Right{
    float:right;
}
.pagePreview img{
    max-width:300px;
    margin:0;
    
}
.siteText{
    margin:1vw;
    text-align:left;
    /*font-family:roboto;
    font-weight:700;*/
    overflow: auto;
	font-family: sans-serif;
}
.siteText ul{
    list-style-position: inside;
    
}
.siteText h3{
    /*font-weight:bolder;*/
    text-align:center;  
	font-family: roboto;
	font-weight:800;
}
.sectionHead{
    font-family:CustomFont;
    font-size: 50px;
    font-weight:100;
    text-align:center;
    color:#5AB9EA;
    margin:5px;
}

.navBar{
    /*height:48px;*/
    
    position:sticky;
    top:0;
    background:#5AB9EA;
    padding:8px 16px;
    /*box-shadow:0px 10px 5px rgba(0,0,0,0.2);*/
    font-family:roboto;
    font-size:24px;
    z-index:10;
    overflow:hidden;
	height:60px;
}
.leftLogo{
    float:left;
}
.rightMenu{
    float:right;
}
.rightMenu a, .leftLogo a{
    display:inline-block;
    padding:8px 16px;
    font-weight: bolder;
    border:0;
    outline:0;
    text-decoration: none;
    color:black;
    text-align:center;    
    transition: background 0.3s;
    color:white;
	overflow:hidden;
	font-family: roboto;
	
}
.rightMenu a:hover, .leftLogo a:hover{
    background-color:#8860D0;
}
.footerCopyright{
    width:100vw;
    padding:20px 10px;
    background-color: #8860D0;
    color:white;
    font-family:roboto;
    font-size:20px;
    font-weight:500;
	left:0;
	position: relative;
	text-align:center;
}
.introSection{
	font-family: sans-serif;
	padding:2vw;
}